在用浏览器打开网页时,浏览器会从服务器上下载这个网页和网页上的多媒体内容。假如网页上的图片文件非常大,这个时候由于互联网速度是什么原因,网页的打开速度就会非常慢,因此需要用软件把网页上的图片进行优化。网页上的图片,一般需要有非常不错的视觉成效,但对于普通的图片,在颜色单一的状况下,可以对图片的格式进行优化和压缩。网页上的图片一般是GIF格式或JPG格式。在网站制作时,需要依据图片的种类和实质需要合理地选择这两种图片格式。
GIF是互联网上用最早、应用最为广泛的图像格式。GIF的主要原理是降低图像中每点颜色的存储位数来达成对图像文件的压缩,也可以理解为,GIF降低了图片色板中颜色的数目,从而在存储时减小了文件的大小。GIF降低了图像的颜色,在图像显示时可能否完全还原以前的色彩,但因为其很大地压缩了图片,有益于互联网传输,所以在互联网上有着广泛的应用。
GI支持透明背景和动画成效,这就能愈加丰富网页的媒体成效JPG是一种在互联网上被广泛支持的图片格式。JPG可以支持24位真彩色,可以非常不错地还原图片的色彩。图像处置软件可以把JG图片进行不同程度的压缩和存储。
1、Fireworks与 Dreamweaver的关联操作
Fireworks和 Dreamweaver都是专业的网站制作软件。在网站制作时,两种软件常常是关联操作的互合适合完成不一样的功能。
Fireworks是图片设计软件,集成了不少切片链接、热门链接等功能,可以便捷地在图片中插入链接并便捷地导出为网页。
Dreamweaver是网站制作软件,也集成了很多图片处置的工具和操作,可以便捷地对网页中的图片进行优化和处置。
在网站制作时,需要灵活地用 Fireworks和 Dreamweaver的强大功能。在图片设计时充分优化和排版网页,在网站制作时对图片进行有效的处置与设置。
2、优化页面图像
在用 Dreamweaver进行网站制作时,可以借助 Dreamweaver的图像处置功能,灵活地对图像进行处置与优化。 Dreamweaver可以达成图片的裁剪、优化、图片成效设置等功能
关联至图像软件
在操作 Dreamweaver中的图片时,有时需要对网页中的图片进行编辑,Dreamweaver在图片属性中提供了关联到外部图像软件的功能。 Dreamweaver可以设置一个图像编辑软件,在设计视图中,选择一张图片将来,可以单击属性面板中的图像编辑工具,启动图像编辑软件对图像进行编辑
(1)在 Dreamweaver中选择编辑最佳选择参数命令,弹出最佳选择参数对话框,在分类列表中选择文件种类/编辑器选项。
(2)单击 Fireworks文本框后面的浏览按钮,在选择外部编辑器对话框中选择 Fireworks
CS6所在的路径。 Fireworks CS6一般安装在C: Program files\Adobe\ Adobe Fireworks CS6目录下面,单击确定按钮,完成设
(3)也可对不同格式的文件设置不一样的外部编辑器。单击扩展名列表中的一种扩展名,然后在编辑器列表中添加一个外部编辑器。
(4)单击确定按钮,完成编辑器的设置。
3、图片的优化处置
在 Dreamweaver中设置了 Fireworks的路径将来,即可在 Dreamweaver中对图片进行优化和处置。这类操作可以用 Fireworks cs6完成,但在 Dreamweaver CS6中的操作会更便捷，具体操作步骤如下：
(1)在计算机中的E:盘下新建一个文件夹eg11
(2)打开本书光盘,将源文件\1图片中的3个图片文件复制到步骤(1)新建的文件夹中
(3)打开 Dreamweaver CS6,选择文件|新建命令,新建一个HTML网页文件。
(4)选择文件|保存命令,将文件保存至E:egll文件下,文件名为egl.html
(5)选择插入图像命令,在打开的选择图像源文件对话框中,选择插入从光盘中复制的图片alt.jpg
(6)选择文件保存命令,保存文件。按F12键运行预览网页,网页中图片的成效如
(7)对图片的优化和设置或许会更改该图片文件,为了便于对比操作,需要复制所插入的图片文件。打开文件夹E:eg1l,将文件a1jpg复制为al_1jpg、al2jpg、a_3jpg、al4jpg、al5jpg。
(8)网页中常见的图片格式是JPG格式或GIF格式。在格式下拉列表框中选择JPEG选项,然后在品质文本框中输入29,品质文本框是对图片水平的设置。
4、图片大小的调整
在网页中插入过大的图片时,可以设置图片的宽度和高度使图片正常显示。如此虽然能使图片正常显示,但过大的图片文件会干扰网页打开的速度,需要重新设置图片的大小。 Photoshop Cs6和Fireworks CS6可以用设置图像大小的办法调整图片的占用空间。 Dreamweaver CS6提供了图像大小的设置工具,对图片的大小设置非常便利,操作步骤如下
(1)打开 Dreamweaver CS6,选择文件|新建命令,新建一个HTML网页文件。
(2)选择文件保存命令,将文件保存至E:leg11文件下,文件名为eg2html
(3)选择插入图像命令,在弹出的选择图像源文件对话框中,选择插入从光盘中复制的图片a2jpg。单击确定按钮,完成图片插入。
(4)单击确定按钮完成设置。选择文件|保存命令保存文件。
(5)按F12键运行网页,网页图片的成效如图11-9所示。可以发现图片非常大,需要对图片的大小进行设置。
(6)在 Dreamweaver Cs6的设计视图中选择插入的图片,单击属性面板上的优化按钮对图片进行优化。
(7)在图片的优化对话框中选择文件选项卡,在宽文本框中输入400,将图片宽度和高度设置成图片压缩未来的大小。在文件选项卡中,已经默认选中约束比率复选框,图片的高度会自动设置并维持与原图相同的比率。
(8)单击确定按钮,完成图片大小的设置。选择文件|保存命令,保存文件
(9)按F12键运行网页,网页图片的成效如图11-11所示。发现图片已经变小,可以在浏览器的窗口中完全显示。
5、图片的亮度与对比度的设置
Dreamweaver可以便捷地对图片的亮度与对比度进行设置。这类设置与 Fireworks CS6中的图片设置和 Photoshop cs6中图片设置的成效是相同的打开 Dreamweaver CS6,选择文件新建命令,新建一个HTML网页文件。
(1)选择文件保存命令,将文件保存至E:eg11文件下,文件名为eg3html
(2)选择插入图像命令,在弹出的选择图像源文件对话框中选择插入图片al_3:jpg，单击确定按钮,完成图片插入。
(3)选择文件保存命令,保存文件。
(4)按F12键运行网页,网页中图片的原始成效。
(5)在 Dreamweaver CS6的设计视图中选择插入的图片,单击属性面板上的亮度和对比度按钮,,对图片进行亮度与对比度的设置
(6)为图片的亮度/对比度对话框,拖动亮度的滑块,亮度文本框中会显示相应的数值。
(7)单击确定按钮,完成图片亮度的设置。选择文件保存命令,保存文件。
(8)按F12键运行网页,网页图片的成效如图11-14所示。可以发现网页中图片的亮度已经改变。
(9)在 Dreamweaver CS6设计视图的图片后单击,再选择插入图像命令,在弹出的选择图像源文件对话框中选择插入图片a14jpg。单击确定按钮,完成图片的插入
(10)在 Dreamweaver cs6的设计视图中选择插入的图片,单击属性面板上的亮度和对比度按钮,对图片进行亮度与对比度的设置
(11)图片的亮度对比度对话框,拖动对比度的滑块,对比度文本框中会显示相应的数值。
(12)单击确定按钮,完成图片亮度的设置。选择文件丨保存命令,保存文件。
(13)按F12键运行网页,网页图片的成效如图11-16所示。可以发现网页中图片的对比度已经改变。
5、图片的锐化设置
图片的锐化就是使图片不同颜色的边界明确,使图片更具备层次感。 Dreamweaver的图片锐化工具可以便捷地对网页的图片进行锐化设置
(1)打开 Dreamweaver CS6,选择文件|新建命令,新建一个HTML网页文件。
(2)选择文件保存命令,将文件保存至E:egl1文件下,文件名为eg4htm。
(3)选择插入图像命令,在弹出的选择图像源文件对话框中选择插入图片a1_5jpg然后单击确定按钮,完成图片插入
(4)选择文件保存命令,保存文件。
(5)按F12键运行网页,网页图片的原始成效。
(6)在 Dreamweaver Cs6的设计视图中选择插入的图片,单击属性面板上的锐化按钮△,对图片进行锐化设置
(7)如图11-18所示为图片的锐化对话框,拖动锐化的滑块,锐化文本框中会显示相应的数值。
(8)单击确定按钮,完成图片亮度的设置。选择文件丨保存命令,保存文件。
(9)按F12键运行网页,网页图片的成效如图11-19所示。可以发现网页中图片的亮度已经改变。
6、图片的裁剪
用Dreamweaver进行网页排版时,假如需要对图片进行裁剪,可以不需要外部工具进行图片裁剪。选择Dreamweaver CS6的图片裁剪工具,可以对图片进行便捷的裁剪。
(1)打开 Dreamweaver CS6,选择文件新建命令,新建一个HTML网页文件。
(2)选择文件保存命令,将文件保存至E:leg11文件下,文件名为eg5html。
(3)选择插入图像命令,在弹出的选择图像源文件对话框中选择插入图片al6jp单击确定按钮,完成图片的插入。
(4)选择文件保存命令,保存文件
(5)按F12键运行网页,裁剪之前的图片。
(6)在 Dreamweaver CS6的设计视图中选择插入的图片,单击属性面板上的裁剪按钮型对图片进行裁剪。此时,设计视图中的图片会个边框和拖动点,如图所示。调整这个边框的大小可以设置裁剪的地区,双击图片,完成图片的裁剪。
(7)图片裁剪将来,设计视图如图。