项目四编辑网页图像

1、项目四编辑网页图像情情 境境 设设 置置 在当今的信息化时代里，网络已经成在当今的信息化时代里，网络已经成为了人们沟通的纽带，我们也经常通过网为了人们沟通的纽带，我们也经常通过网络去了解社会，了解产品等，所以一个好络去了解社会，了解产品等，所以一个好的网站将成为一个最大的展示平台，那么的网站将成为一个最大的展示平台，那么一个好的网站显得更加重要，其中最具吸一个好的网站显得更加重要，其中最具吸引力的，使页面更加丰富多彩的当属图像引力的，使页面更加丰富多彩的当属图像元素的使用。元素的使用。项项 目目 展展 示示本项目完成后的大体效果如下。（不要求大本项目完成后的大体效果如下。（不要求大家做的和样张

2、完全一样，但要尽量模仿）家做的和样张完全一样，但要尽量模仿）项项 目目 目目 标标 能正确插入普通图像能正确插入普通图像 能合理设置图像属性能合理设置图像属性 能正确插入鼠标经过图像能正确插入鼠标经过图像 认识常用的图像文件类型认识常用的图像文件类型项项 目目 分分 析析具体工作任务：具体工作任务： 制作一个网页，主题为制作一个网页，主题为“文学天地文学天地” 输入文字，进行适当的设置输入文字，进行适当的设置 插入普通图像，合理设置来美化页面插入普通图像，合理设置来美化页面 插入其他图像元素来修饰页面插入其他图像元素来修饰页面 设置页面背景，使效果更加完美设置页面背景，使效果更加完美实实 施施

3、 步步 骤骤步骤一：创建一个新的站点并将站点的存步骤一：创建一个新的站点并将站点的存放位置设为放位置设为e:sucaichaper4中。在站点中。在站点根文件下创建子文件夹根文件下创建子文件夹images和网页文件和网页文件index.html。步骤二：输入并格式化文本步骤二：输入并格式化文本步骤三：插入普通图像步骤三：插入普通图像步骤四：设置图像属性步骤四：设置图像属性步骤五：插入鼠标经过图像步骤五：插入鼠标经过图像需要注意的仍是所插入图像若不在站点内时，要将所有的需要注意的仍是所插入图像若不在站点内时，要将所有的图像均保存到图像均保存到images文件中，这是一个好的习惯，也是行文件中，这

4、是一个好的习惯，也是行业惯例。业惯例。知知 识识 链链 接接一、网页中的颜色一、网页中的颜色 在网页中是以在网页中是以RGBRGB来表示颜色的，我们所看到的成来表示颜色的，我们所看到的成 千上万的颜色都是由红、绿、蓝三种基础颜色调和而千上万的颜色都是由红、绿、蓝三种基础颜色调和而成的。成的。 网页安全颜色范围：由红，绿，蓝三种基色可以网页安全颜色范围：由红，绿，蓝三种基色可以调和成调和成1677721616777216种，但网页中常用到的是种，但网页中常用到的是216216种颜种颜 色，这是由于浏览器能正常显示的这，超出这个范色，这是由于浏览器能正常显示的这，超出这个范围就失真，因此我们也把这

5、围就失真，因此我们也把这216216种颜色叫做网页的安种颜色叫做网页的安全颜色范围。全颜色范围。知知 识识 链链 接接二、网页中的图像格式二、网页中的图像格式 1.GIF1.GIF格式：是网页中常用的一种图像格式，在绝格式：是网页中常用的一种图像格式，在绝 大多数浏览器中都能正常显示大多数浏览器中都能正常显示 。 2.JPEG2.JPEG格式：是网页中常用的一种图像格式，下载格式：是网页中常用的一种图像格式，下载 速度非常快，适合于显示颜色丰富、细腻的图像速度非常快，适合于显示颜色丰富、细腻的图像 3.PNG3.PNG格式：适合于在网络上传播。但是，它只有格式：适合于在网络上传播。但是，它只有

6、 在在Microsoft Internet Explorer(4.0Microsoft Internet Explorer(4.0及以上版及以上版 本本) )和和Netscape NavigatorNetscape Navigator（4.044.04及以上版本）及以上版本） 才能得到支持。才能得到支持。 知知 识识 链链 接接三、图像属性参数三、图像属性参数我们可以通过属性参数面板来设置图像的各种属性。我们可以通过属性参数面板来设置图像的各种属性。 操作方法：选中要编辑的图像，然后编辑、修改图操作方法：选中要编辑的图像，然后编辑、修改图像属性面板的参数。像属性面板的参数。知知 识识 链链 接

7、接四、调整图像四、调整图像 插入到页面中的图像可以进行必要的修改。插入到页面中的图像可以进行必要的修改。 图像的调整主要是：调整大小、裁剪图像、图像的调整主要是：调整大小、裁剪图像、调整亮度和对比度、锐化图像。调整亮度和对比度、锐化图像。知知 识识 链链 接接五、插入鼠标经过图像五、插入鼠标经过图像鼠标经过图像是一种图像在浏览器中显示的特殊效果，鼠标经过图像是一种图像在浏览器中显示的特殊效果，为了实现这个效果，需要两副图像，正常状态下显示为了实现这个效果，需要两副图像，正常状态下显示一副图像，而当鼠标指针经过该图像时，它将变化为一副图像，而当鼠标指针经过该图像时，它将变化为另外一副图像，从而达

8、到一种图像动态变化的特殊效另外一副图像，从而达到一种图像动态变化的特殊效果。果。 注意：注意：“原始图像原始图像”和和“鼠标经过图像鼠标经过图像”所设置的两个图像尺寸大小最所设置的两个图像尺寸大小最好相等，如果大小不等，系统将自动调整第二个图像的大小，使其与第好相等，如果大小不等，系统将自动调整第二个图像的大小，使其与第一个图像匹配。一个图像匹配。知知 识识 链链 接接六、插入图像占位符六、插入图像占位符图像占位符：是临时替代图像的，顶替图像的位置，图像占位符：是临时替代图像的，顶替图像的位置，是在设计好页面后又不能确定插入什么样的具体图像是在设计好页面后又不能确定插入什么样的具体图像时，在图

9、像的位置上使用图像占位符，可以避免由于时，在图像的位置上使用图像占位符，可以避免由于没有图像而导致无法正常设计的问题。没有图像而导致无法正常设计的问题。图像占位符与图像的属性基本相同。图像占位符与图像的属性基本相同。 知知 识识 拓拓 展展项目展示项目展示知知 识识 拓拓 展展制作要点提示制作要点提示1.1.创建一个本地站点并且新建一个子文件夹创建一个本地站点并且新建一个子文件夹imagesimages来管理素材文件来管理素材文件2.2.新建一个网页，保存网页文件，将其命名新建一个网页，保存网页文件，将其命名为为“index.html”index.html”3.3.插入一个插入一个3 3行行3 3列的表格列的表格4.4.在每个单元格中分别插入一幅图像