第五讲制作包含超级链接和AP Div的网页.docx
- 文档编号:12944593
- 上传时间:2023-06-09
- 格式:DOCX
- 页数:36
- 大小:813.37KB
第五讲制作包含超级链接和AP Div的网页.docx
《第五讲制作包含超级链接和AP Div的网页.docx》由会员分享,可在线阅读,更多相关《第五讲制作包含超级链接和AP Div的网页.docx(36页珍藏版)》请在冰点文库上搜索。
第五讲制作包含超级链接和APDiv的网页
第五讲制作包含超级链接和APDiv的网页
【操作准备】
1.创建1个本地站点
(1)创建所需的文件夹,拷贝所需的资源
(2)启动DreamweaverCS6
(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)在网页中绘制或插入三个APDiv,在APDiv中插入SWF动画或图像
(3)在网页中创建多个超级链接,包括文本形式的外部链接和内部链接,图片形式的内部链接,电子邮件链接,文件下载链接,锚点链接,空地址链接,图像热点链接,对链接有效性和正确性进行检查
网页布局结构分析
(1)采用表格布局方式,主体结构为上中下结构,中部为左右结构
(2)文字型导航栏(位于网页顶部和网页底部两个位置)
网页色彩搭配分析
网页中文字的颜色:
#000000、#FFFFFF、#6633CC、#339933.#66CCFF,
链接颜色:
#6633CC,变换图像链接颜色:
#FF6600,已访问链接颜色:
#00FFFF,活动链接颜色:
#FF9999
网页组成元素分析
主要包括表格、文本、图像、SWF动画和多种形式的超级链接等网页元素
任务实现流程分析
新建网页文档0501.html→在网页中插入多个表格→在表格单元格中输入文字、插入图像→绘制或插入APDiv→在APDiv插入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,该表格的“宽”设置为“780像素”,“边框”、“间距”和“填充”都设置为“0”,“对齐”方式设置为“居中对齐”,行高设置为“200像素”。
将表格3单元格的水平对齐方式设置为“居中对齐”,垂直对齐方式设置为“居中”。
在表格3的单元格中插入文件夹“task05-1\images”中图像“map01.jpg”,“替换”文本设置为“张家界导游图,张家界地图,张家界景区示意图”。
将表格3中所插入的图像的“宽”设置为“780像素”,“高”设置为“400像素”。
保存网页,预览其效果。
5.插入表格4
(1)插入表格4且设置其属性
在表格3的下方插入1个2行3列的表格4,该表格的“宽”设置为“780像素”,“边框”、“间距”和“填充”都设置为“0”,“对齐”方式设置为“居中对齐”。
将表格4第1列的“宽”设置为“178像素”,第2列的“宽”设置为“2像素”,第3列的“宽”设置为“600像素”,注意切换到网页的【代码视图】窗口,将第2列两个单元格的空格符号“ ”删除,否则第2列的宽度尺寸设置会无效。
将表格4第1列的两个单元格的水平对齐方式设置为“居中对齐”,垂直对齐方式设置为“顶端”。
将表格4第3列单元格的水平对齐方式设置为“居中对齐”。
(2)添加HTML代码,设置表格4的属性
(3)合并单元格并设置背景颜色
将表格4第2列的两个单元格合并为1个单元格,同样将表格4第3列的两个单元格合并为1个单元格。
将表格4第2列合并后的单元格的背景颜色设置为“#CCCCCC”。
(4)插入嵌套表格4-1
在表格4第1列的上方单元格中插入1个3行1列的表格4-1,该表格的“宽”设置为“175像素”,“边框”、“间距”和“填充”都设置为“0”,“对齐”方式设置为“居中对齐”。
(5)设置嵌套表格4-1的属性
将表格4-1第2行的单元格的水平对齐方式设置为“居中对齐”,垂直对齐方式设置为“居中”。
将表格4-1第1行的“高”设置为“43像素”,第2行的“高”设置为“85像素”,第3行的“高”设置为“20像素”。
将表格4-1第2行单元格的背景图像设置为文件夹“images”中的图像“02.jpg”。
(6)在表格4-1的单元格中插入图像
在表格4-1第1行单元格中插入文件夹“images”中的图像“01.jpg”,在第3行单元格中插入文件夹“images”中的图像“03.jpg”。
(7)在表格4-1第2行的单元格中插入浮动框架
切换到网页0501.html【代码视图】窗口,在表格4-1第2行单元格的HTML标签
(8)插入嵌套表格4-2
在表格4第2行第1列的单元格中插入1个7行1列的表格4-2,该表格的“宽”设置为“90%”,“边框”、“间距”和“填充”都设置为“0”,“对齐”方式设置为“居中对齐”。
将表格4-2第1行的“高”设置为“45像素”,第1行的单元格的水平对齐方式设置为“居中对齐”,垂直对齐方式设置为“居中”,在该单元格中插入文件夹“images”中的图像“05.jpg”,然后输入两个空格,再输入文字“张家界景点大全”,将所输入文字大小设置为“16像素”,颜色设置为“#66CCFF”,样式名称命名为style2。
将表4-2的第3、5行的行高设置为“6像素”,第7行的行高设置为“35像素”,将所有行单元格的水平对齐方式设置为“居中对齐”,将第7行单元格的“垂直”对齐方式设置为“居中”。
分别将文件夹“text”中文本文件“0501.txt”中“张家界景点大全”相应的文本内容拷贝到表格4-2的第2、4、6行中,在合适位置换行。
在第7行中输入文字“【下载更多的图片】”,将所有文字的大小设置为“10点数(pt)”,样式名称命名为style3。
将文字“【下载更多的图片】”的颜色设置为“#9933CC”,样式名称命名为style31。
(9)插入嵌套表格4-3
在表格4第3列的单元格中插入1个6行1列的表格4-3,该表格的“宽”设置为“96%”,“边框”、“间距”和“填充”都设置为“0”,“对齐”方式设置为“居中对齐”。
将表格4-3的第1、3、5行的行高设置为“40像素”。
在第1、3、5行的单元格中插入文件夹“images”中的图像“04.jpg”,并将该图像的“宽”设置为“580像素”,“高”设置为“40像素”。
分别将文件夹“text”中文本文件“0501.txt”中“张家界景区介绍”相应的文本内容拷贝到表格4-2的第2、4、6行中,并且文字的大小设置为“10点数(pt)”,居左对齐,样式名称命名为style4。
将第2行中段首文字“张家界国家森林公园”、第4行中段首文字“天子山自然保护区”、第6行中段首文字“索溪峪自然保护区”的颜色设置为“#339933”、粗体,样式名称命名为style41。
在第4行的单元格中合适的位置插入文件夹“images”中的图像“tzs.jpg”,将该图像的“宽”设置为“150像素”,“高”设置为“130像素”,“垂直边距”设置为“6像素”,“水平边距”设置为“10像素”,边框设置为0,居左对齐,在“替换”列表框中输入文本“千山万壑,云雾缭绕”,并且拖动该图像到合适的位置。
在第6行的单元格中合适的位置插入文件夹“images”中的图像“bfh.jpg”,将该图像的“宽”设置为“170像素”,“高”设置为“122像素”,“垂直边距”设置为“6像素”,“水平边距”设置为“10像素”,边框设置为0,居右对齐,在“替换”列表框中输入文本“云梯百丈上天台,高峡平湖一鉴开”,并且拖动该图像到合适的位置。
在第6行中图像的下方输入文字“【回到页首】”,可以通过输入空格调整文字的位置,将文字大小设置为“12点数(pt)”,颜色设置为“#66CCFF”。
6.插入表格5
在表格4的下方插入1个1行1列表格5,该表格的“宽”设置为“780像素”,“边框”、“间距”和“填充”都设置为“0”,“对齐”方式设置为“居中对齐”,将该表格的行高设置为“76像素”。
切换到【代码视图】窗口,在表格5的标签
与 | 之间输入以下代码: