4.1设置页眉（课件）-高二《网页设计与制作》同步教学（人民邮电版）

项目四 编排贺卡网页 任务一 设置页眉 任务二 设置主体部分 项目四： 编排贺卡网页 网页设计与制作Dreamweaver 8 任务一 小 结 任务二 实 训 任务一 设置页眉 本任务主要是对网页页眉部分的图像进行设置，包括网站站标和图像占位符，涉及的知识点有图像的基本类型和作用、设置背景图像、图像的插入方法以及图像占位符的作用、插入方法及其属性设置等。 通过本任务的学习，应该掌握的内容主要有： Dreamweaver 8 网页设计与制作 项目四： 编排贺卡网页 设置页眉操作动画 任务一 小 结 任务二 实 训 2 1. 网页图像的作用、格式和选择 网页中图像的作用基本上可分为两种情况：一种是起装饰作用，如背景图像等。另一种是起传递信息的作用，它和文本的作用是一样的。 目前，在网页中使用的最为普遍的图像格式主要是GIF和JPG。 GIF由于文件小、支持透明色、下载时具有从模糊到清晰的效果，成为网页制作中首选的图像格式。JPG为摄影提供了一种标准的有损耗压缩方案，比较适合处理照片一类的图像。 Dreamweaver 8 网页设计与制作 项目四： 编排贺卡网页 任务一 设置页眉 任务一 小 结 任务二 实 训 在【属性】面板中单击【页面属性】按钮打开【页面属性】对话框，在【外观】分类中，单击【背景图像】后面的【浏览】按钮设置网页背景图像。 2. 设置背景图像的方法 Dreamweaver 8 网页设计与制作 项目四： 编排贺卡网页 任务一 设置页眉 任务一 小 结 任务二 实 训 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 在【页面属性】对话框的【外观】分类中，【重复】下拉列表中有4个选项：“不重复”、“重复”、“横向重复”及“纵向重复”，可以通过选择它们来定义背景图像的重复方式。 不管图像的尺寸多大，一旦将其设置为背景图像，默认情况下Dreamweaver 8会自动将其重复拼接，令整个背景区被铺满。选择背景图像时，一定不能选择颜色太深的，否则文档的内容就衬托不出来了。为了让背景图像更好地显示，网页中其他图像文件的背景要为透明的，这样背景图像才能通过透明部分显示出来，否则将会影响整个页面的美观。 Dreamweaver 8 网页设计与制作 项目四： 编排贺卡网页 任务一 设置页眉 任务一 小 结 任务二 实 训 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 通过以下几种方法可向网页中插入图像。 （1）在【插入】／【常用】面板的【图像】下拉菜单中单击 【图像】按钮。 （2）直接拖曳【插入】／【常用】面板中的【图像】按钮至页面的光标处。 （3）在主菜单栏中选择【插入】／【图像】命令。 （4）也可以在【文件】／【文件】面板中用鼠标选中图像文件，然后拖曳到文档窗口中所需位置松开鼠标即可。 3. 插入图像的方法 Dreamweaver 8 网页设计与制作 项目四： 编排贺卡网页 任务一 设置页眉 任务一 小 结 任务二 实 训 在【相对于】下拉列表中有“文档”和“站点根目录”两个选项: （1）当选择“文档”时，【URL】将使用文档相对路径，如 “images/logo.jpg”， （2）当选择“站点根目录”时，【URL】将使用站点根目录相对路径，如“/images/logo.jpg”。 如果勾选【预览图像】复选框，选定图像的预览图会显示在对话框的右侧。 Dreamweaver 8 网页设计与制作 项目四： 编排贺卡网页 任务一 设置页眉 任务一 小 结 任务二 实 训 在主菜单栏中选择【插入】／【图像对像】／【图像占位符】命令或在【插入】／【常用】面板的【图像】下拉菜单中单击【图像占位符】按钮打开【图像占位符】对话框，在对话框中可定义【名称】、【宽度】、【高度】、【颜色】和【替换文本】等选项。 4. 插入图像占位符的方法 Dreamweaver 8 网页设计与制作 项目四： 编排贺卡网页 任务一 设置页眉 如果对插入的图像占位符不满意，可以通过【属性】面板对其进行修改。图像占位符只是作为临时代替图像的符号，在发布站点前可通过【属性】面板图像占位符的【源文件】属性设置实际需要的图像文件，这时【图像占位符】将自动变成图像。 【图像占位符】对话框 任务一 小 结 任务二 实 训 网站站标是网站的图形标志，通常放在网站首页左上角的位置