网页设计项目化教程项目二 企业网站的设计.pptVIP

项目任务实施 -任务4 企业产品展示页面的设计与实现 【任务实施】 --具体参考教材。 【知识梳理】 1. 页面支持图片格式 要在页面中正确使用图像，首先要了解图像的相关知识。与其他类型的资源一样，图像信息也是保存在文件的。由于图像在磁盘中的压缩方式和存储方式有多种，所以存在多种格式的图像。目前Iinternet中最为常见的图像格式有GIF、JPG（JPEG）和PNG。 2. 图像占位符 在网页的制作过程中，有时需要插入的图像尚未准备好，这种情况下，可以利用图像占位符给今后需要插入的图像预留一个位置，以后再在图像占位符中插入图像。 3. 鼠标经过图像 鼠标经过图像就是网页中的动态按钮，也是网页中使用得最多的动态效果之一。将鼠标指针移动到鼠标经过图像上时，当前图像会被另一幅图像代替，当鼠标指针移开时恢复为初始的图像。当将鼠标指针移到的图像上单击时，可以跳转到其链接的页面。这种动态效果使网页变得非常活泼。 项目任务实施 -任务4 企业产品展示页面的设计与实现 【知识梳理】 4. 创建网站相册 Dreamweaver 使用 Fireworks 来为该文件夹中的每个图像创建一个缩略图和一个较大尺寸的图像。然后，Dreamweaver 自动创建一个 Web 页，它包含所有缩略图以及指向较大图像的链接。在开始之前，将相册的所有图像放置在一个文件夹中（该文件夹不必位于站点中）；另外，确保图像文件名包含以下任意一个扩展名：.gif、.jpg、.jpeg、.png、.psd、.tif 或 .tiff。带有无法识别的文件扩展名的图像不会包含在相册中；同时还要安装Fireworks软件。 注意：Fireworks 启动（如果它尚未运行）并创建缩略图和大尺寸图像。如果所包含的图像文件数目较多，这可能会需要几分钟的时间。当处理完成后，Dreamweaver 将再次处于活动状态并创建包含缩略图的页。 项目任务实施 -任务5 超链接的设置 【任务分析】 超链接是实现页面跳转的主要方法。本任务通过对森兴企业首页导航的设置来介绍超链接的主要种类和设置方法。 项目任务实施 -任务5 超链接的设置 【操作步骤】--具体操作参照教材。 【知识梳理】 1. 超链接 超链接是网页之间建立联系的基本途径，超链接把制作的网站页面相互连接起来，目的是当用户单击超链接后就打开另一个页面或文件。打开的目标文件通常用URL定义，超链接的路径分为绝对路径和相对路径。 绝对路径是包含服务协议的完全路径，要求包含精确的地址，一旦目标文件移动后连接就会失效。一般用在与当前站点之外的文件链接时。 相对路径一般分为根目录相对路径和文档相对路径。根目录相对路径以站点根目录为参照对象，总是从当前站点根目录开始。文档相对路径是指和当前文档所在的文件夹相对的路径。在同一站点中的文档的链接一般选择使用相对路径。 在Dreamweaver中，可用文本和图像创建内部链接（同一网站内的各个页面之间的链接）、外部链接（不同网站的网页之间的链接）、空链接、脚本链接、电子邮件链接、下载链接、锚记链接等。 项目任务实施 -任务5 超链接的设置 【知识梳理】 （1）文本链接 文本链接指的是链接的主体是文本的形式，这是一种比较常见的链接形式。经常通过属性面板进行设计。 步骤1 选中要创建超链接的文本，然后打开【属性】面板。 步骤2 单击【链接】下拉文本框右侧的图标打开【选择文件】对话框，从中选择要链接的目标文档，然后在【目标】下拉类表中选择目标的打开方式即可。 （2）图像链接 图像链接有两种情况：一种是普通的图像链接，其创建方法与文本链接类似，选中要链接的图像，然后在【属性】面板中进行相应的设置即可。另一种是热点链接，即浏览者单击图像中设置了链接的区域就会跳转到相应的页面。热点链接的设置方法如下。 步骤1 以Dreamweaver打开站点文件夹kuozhan文件夹中的“requ.html”文件。 项目任务实施 -任务5 超链接的设置 【知识梳理】 步骤2 选中页面中的图片，单击【属性】面板左下角的热区工具，形状有“椭圆形”、“矩形”、“多变形”，选择“多变形”，在图中【小学】部分画上热区，如图所示。 步骤3 在【属性】面板中单击【链接】下拉文本框右侧的图标打开【选择文件】对话框，从中选择要链接的目标文档“xiaoxue.html”，然后在【目标】下拉类表中选择【_blank】选项， 项目任务实施 -任务5 超链接的设置 【知识梳理】 （3）空连接 空链接是一种没有指定目标的特殊形式的链接。利用空链接可以激活文章中链接对应的网页元素，然后可以为其添加各种行为。 其设置方法和文本链接雷同，只是在链接栏内输入“#”。 （4）脚本链接 脚本链接是一种特殊类