3.2 网页上的图像编辑(课件）-高二《网页设计与制作》同步教学（中国人民大学出版社）

3.2 网页上的图像编辑 虽然图像文件的格式有很多种，但实际上在网页中常使用的图像文件格式只有GIF、JPG和PNG这三种，因为这三种图像文件都是经过压缩的，所以文件比较小，又与原图相去不远，利于网络上传输与观看。 3.2.1 图像的插入与编辑 1.在网页中插入图像 想让网页更漂亮只要在网页上插入图像，就可以让网页更加多姿多彩。 在网页中插入图像的操作步骤如下： (1)将光标放在要插入图像的位置，然后采用以下二种方法插入图像： 方法一：在菜单栏中单击【插入】→【图像】命令，如图所示。 方法二：在【插入】（常用）面板中单击【图像】按钮 ，如图所示。 (2)采用以上二种方法之一，会出现【选择图像源文件】对话框后，在“查找范围”菜单中切换文件所在的文件夹，接着在列表中选择文件名，然后选择 按钮，如图所示。 置入的图像会以原尺寸显示(如图所示)，若置入的图像是GIF动画图像文件，则必须要打开浏览器才能看到动画效果。 也可以打开【文件】面板，接着选择要插入的图像文件，然后直接拖动到编辑区，则图像马上就会显示在编辑区中。 2．修改图像大小 （1）移动鼠标选取图片后，接着打开【属性】面板，分别在“宽”和“高”栏中输入图片的宽度和高度。 提示：也可以将鼠标指向图像右下角的控点，指针变为 箭头时，拖动鼠标即可调整图像大小。 （2）接着在“对齐”列表中选择“绝对居中”对齐方式。 修改后的图像会依照所设置的大小显示，并且使用文绕图的方式，将文本对齐在图像的中间。若是要恢复图像原来的大小，可以单击【属性】面板上的 图标，则图像会恢复原样。 在网页中继续插入图像，在“对齐”列表中选择“左对齐” 或“右对齐”对齐方式，可以将网页进行图文混排,如图所示。 3．为图像添加替换文本 网页上的图像若是不够清楚，还可以为它加上替代文本，让浏览者能够马上了解图像的内容。 为图像添加替代文本的操作步骤如下： （1）移动鼠标选取图像后，接着打开【属性】面板，然后在“替换”栏输入要显示的图像替代说明文本，如下图所示。 （2）移动鼠标单击 【在浏览器中预览/调试】 按钮，然后从弹出的菜单中选择【预览在iexplore】选项。 也可以按下【F12】键，打开浏览器窗口，将鼠标移到图像上，则鼠标下方就会显示出替代说明文本，如图所示。 3.2.2网页背景图的设置 加入背景图，可以让网页显得更活泼。操作步骤如下： （1）移动鼠标到菜单栏执行【修改】→【页面属性】命令或单击【属性】面板中的 按钮。 （2）出现“页面属性”对话框后，移动鼠标单击外观（CSS）或外观（HTML下【浏览】按钮。 （3）出现“选择图像源文件”对话框后，在“查找范围”栏中切换文件所在磁盘与文件夹，接着在列表中选择背景图片文件，然后单击 按钮。 （4）回到“页面属性”对话框后，移动鼠标单击 按钮。 网页的背景图会以贴磁砖的方式重复排列来显示（如图所示），所以要注意颜色不能太过鲜艳，以免看不清楚文本或网页上的其他内容，造成反效果。 3.3 用CSS样式设置文本格式 在制作网页过程中，每页都会用到文字、图像以及表格、表单等元素。对于这些元素，如果没有CSS样式控制，是无法使页面美观的。各浏览器之间不兼容，也会导致同一个网页在不同的浏览器中显示效果不同，而应用CSS样式则恰到好处地解决了这个问题。Dreamweaver CS4将CSS面板重新设计为一个统一的CSS样式面板，可以快速地创建、编辑和应用样式。 层叠样式表CSS（Cascading Style Sheet）可以用来自定义样式或改变默认样式，提高编辑效率，美化网页。 CSS是W3C（The World Wide Web Consortium）为HTML制定的样式表机制，并得到微软公司和网景公司的支持，因而CSS样式在IE4（Internet Explorer4.0）和NC4（Netscape4.0）以上的浏览器中均可支持，只是有些效果需要更高版本的浏览器支持。 3.3.1 新建CSS样式 1、新建特定标签CSS样式 2、新建任何标签的CSS样式 3.3.2 编辑CSS样式 3.3.3 应用CSS样式 3.4 项目实训 3.4.1项目一 1.实训题目 “长城—世界建筑史上一大奇迹”网页 2.实训目的 通过制作该网页作，可以掌握文本的标题设置、文字的移动和复制、文字的查找与替换等基本设计过程。 3.实训案例效果 3.4.2项目二 1.实训题目 “中国名胜—故宫”网页 2.实训目的 通过制作该网页作，可以掌握图像加载、移动、复制、删除和属性设置等基本设计过程。“中国名胜—故宫”网页的显示效果如图所示。 3.实训案例效