第五讲制作包超级链接和AP Div网页.docVIP

第五讲制作包含超级链接和AP Div的网页 【操作准备】 1．创建1个本地站点 （1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6 （3）创建本地站点 2．创建网页文档album0502.html 3．创建网页文档jbx.html 4．创建网页文档scroll_pic.html 【引导训练】 【任务5-1】制作包含超级链接的展示张家界景点的网页 本单元“引导训练”的任务卡如表5-1所示。 表5-1　单元5“引导训练”任务卡 任务编号 5-1 任务名称 制作包含超级链接的展示张家界景点的网页 网页主题 公园游 计划工时 120min 网页制作任务描述 （1）创建表格布局的网页0501.html，该网页中包含多个表格 （2）在网页中绘制或插入三个AP Div，在AP Div中插入SWF动画或图像 （3）在网页中创建多个超级链接，包括文本形式的外部链接和内部链接，图片形式的内部链接，电子邮件链接，文件下载链接，锚点链接，空地址链接，图像热点链接，对链接有效性和正确性进行检查 网页布局结构分析 （1）采用表格布局方式，主体结构为上中下结构，中部为左右结构 （2）文字型导航栏（位于网页顶部和网页底部两个位置） 网页色彩搭配分析 网页中文字的颜色：#000000、#FFFFFF、#6633CC、#339933．#66CCFF， 链接颜色：#6633CC，变换图像链接颜色：#FF6600，已访问链接颜色：#00FFFF，活动链接颜色：#FF9999 网页组成元素分析 主要包括表格、文本、图像、SWF动画和多种形式的超级链接等网页元素 任务实现流程分析 新建网页文档0501.html→在网页中插入多个表格→在表格单元格中输入文字、插入图像→绘制或插入AP Div→在AP Div插入SWF动画或图像→创建多个超级链接 配盘素材导引 原始文件位置：start\Unit05\task05-1 最终文件位置：result\Unit05\task05-1 【任务5-1-1】创建网页文档0501.html 【任务描述】 （1）创建网页文档0501.html。 （2）在网页中依次插入6个表格：表格1（1行1列）、表格2（1行3列）、表格3（1行1列）、表格4（2行3列）、表格5（1行1列）和表格6（4行1列）。 （3）在表格1中插入SWF动画“01.swf”；在表格2中输入超链接文字；在表格3中插入图像“map01.jpg”；在表格4中插入多个嵌套表格，在各个嵌套表格中分别输入文字和插入图像；在表格5中插入浮动框架；在表格6中分别输入超链接文字和版权信息。 【任务实施】 1．新建网页文档0501.html （1）在“单元5”站点文件夹task05-1中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建1个名称为“0501.html”的网页文档。 （2）设置网页标题 在【文档】工具栏的“标题”文本框直接输入网页标题“张家界风光”即可，如果需要设置网页的其他页面属性，单击【属性】面板【页面属性】按钮，打开【页面属性】对话框，在该对话框中设置页面属性即可，这里只将“链接”的“下划线样式”设置为“仅在变换图像时显示下划线”，其他的属性保持默认其设置不变。 2．插入表格1 （1）插入表格1 在网页中插入1个1行1列的表格1，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。 该表格单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”，“宽”设置为“780像素”，“高”设置为“140像素”。 （2）在表格1中插入SWF动画 将光标置于表格1的单元格中，插入文件夹“flash”中的SWF动画“01.swf”，将该SWF动画的“宽”设置为“780像素”，“高”设置为“140像素”。 （3）保存网页，预览其效果。 3．插入表格2 在表格1的下方插入1个1行3列的表格2，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，行高设置为“32像素”，背景图像设置为文件夹“images”中的图像“bg01.gif”。 将表格2第1列和第3列的列宽设置为“20像素”，将表格2第2列单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”。 在表格2第2列单元格中输入以下文字“首 页 | 张家界森林公园 | 天子山自然保护区 | 索溪峪自然保护区 | 黄龙洞 | 宝峰湖 | 张家界其他景点”。设置这些文字的大小为“10点数(pt)”、加粗，文字颜色设置为“#FFFFFF”，样式名称命名为style1。 保存该网页，预览其效果。 4．插入表格3 在表格2的下方插入1个1行1列的表格3，该表格的“宽”设置