03制作二级链接列表页面教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt

《03制作二级链接列表页面教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt》由会员分享，可在线阅读，更多相关《03制作二级链接列表页面教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、03 制作二级链接列表页面教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）制作二级链接列表页面静态网站制作教学资源课件7.4.3 制作二级链接列表页面(1)新建一个HTML 文件，保存到codes 文件夹下，文件名为：list.htm，修改标题为：中国梦 教育梦。(2)二级页面中的头部和底部的做法与首页相同。(3)选择菜单“插入”-“布局对象”-“Div 标签”，插入选择“在标签之后”“”，类选择“box”，ID 填写“index1”。(4)将光标置于层index1 中，选择菜单“插入”-“布局对象”-“Div 标签”，插入选择“在开始标签之后”“”，ID 填写“ind

2、ex1_1”。一、制作左侧版块7.4.3 制作二级链接列表页面(5)在CSS 面板中，单击“新建CSS 规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML 元素）”，选择器名称填写“index1_1”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置宽为“210像素”，浮动为“左对齐”。(6)选择菜单“插入”-“图像”，选择文件夹images 下的left1.jpg，按方向键右键，输入文字“教育助力中国梦”，进入代码视图，选中文字“教育助力中国梦”，选择菜单“插入”-“HTML”-“文本对象”-“项目列表”，选择菜单“插入”-“HTML”-“文本对象”-“列

3、表项”，返回到设计视图，为文字“教育助力中国梦”加上空链接。7.4.3 制作二级链接列表页面(7)按回车后输入“百名书记畅谈中国梦系列报道”，“中国梦我的梦”，“袁贵仁：我的中国教育梦”，并分别加上空链接。(8)在CSS 面板中，单击“新建CSS 规则”按钮，在弹出的对话框中，选择器类型选择“复合对象（基于选择的内容）”，选择器名称填写“#index1_1 ul”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置填充为“4 像素”，边界为“10 像素”，左侧选项卡选择“边框”，取消勾选全部相同，设置左样式为“实现”，宽度为“1 像素”，颜色为“#C8000B”。7.4.3 制作二

4、级链接列表页面(9)在任务栏上选择“ul”，按方向键右键，重复步骤6 和7，插入的图片选择文件夹images 下的left2.jpg。(10)左侧版块效果如图所示。7.4.3 制作二级链接列表页面(1)选择菜单“插入”-“布局对象”-“Div 标签”，插入选择“在标签之后”“”，ID 填写“index1_2_1”。(2)在CSS 面板中，单击“新建CSS 规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML 元素）”，选择器名称填写“index1_2_1”，规则定义选择“main.css”，左侧选项卡选择“类型”，设置行高为“30 像素”，左侧选项卡选择“方框”，设置宽为“

5、760 像素”，高为“30 像素”，浮动为“左对齐”，取消勾选填充的全部相同，设置右为“10 像素”，取消勾选边界的全部相同，设置左为“10 像素”，左侧选项卡选择“边框”，取消勾选全部相同，设置下样式为“实线”，宽度为“2像素”，颜色为“#CCC”。(3)输入文字“教育力量”，选择菜单“插入”-“HTML”-“文本对象”-“标题3”。二、制作右侧信息链接列表7.4.3 制作二级链接列表页面(4)在CSS 面板中，单击“新建CSS 规则”按钮，在弹出的对话框中，选择器类型选择“标签（重新定义HTML 元素）”，选择器名称选择“h3”，规则定义选择“main.css”，左侧选项卡选择“类型”，设

6、置字体大小为“14 像素”，粗细为“粗体”，左侧选项卡选择“方框”，设置浮动为“左对齐”，左填充为“10 像素”，左边界为“10 像素”，左侧选项卡选择“边框”，取消勾选“全部相同”，边框下样式选择“实线”，宽度为“2像素”，颜色为“#C8000B”。(5)选择菜单“插入”-“标签”，左侧选择“HTML 标签”，右侧选择“span”，然后在当前光标位置输入文字“当前位置 首页 教育力量”。7.4.3 制作二级链接列表页面(6)选择菜单“插入”-“布局对象”-“Div 标签”，插入选择“在标签之后”“”，ID 填写“index1_2_2”。(7)在CSS 面板中，单击“新建CSS 规则”按钮，在

7、弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML 元素）”，选择器名称填写“index1_2_2”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置宽为“780 像素”，浮动为“左对齐”，设置填充和边界都为0。(8)将光标置于层index1_2_2 中，输入文字“梦开始的地方2013-11-01”，选择菜单“插入”-“HTML”-“文本对象”-“项目列表”，为“梦开始的地方”添加空链接，选中“2013-11-01”，选择菜单“插入”-“标签”，在打开的“标签选择器”对话框中，左侧选择“HTML标签”，右侧选择“span”，单击“插入”按钮。7.4.3 制作二级链接列表页

8、面(9)按回车键，重复上述步骤，输入文字“高薪高效高就业2013-11-01”，“青春飞扬，梦想起航2013-11-01”，“袁贵仁：我的中国教育梦2013-11-01”，“2011 计划让创新要素活起来2013-11-01”，“教育是百年梦想的基础2013-11-01”，“习近平：实现中国梦必须走中国道路2013-11-01”，“快乐着你们的快乐 我的学校，我的梦2013-11-01”，“国之梦”联系着千千万万的“家之梦”2013-11-01”，“承前启后 继往开来 继续朝着中华民族伟大复兴目标奋勇前进 在参观“复兴之路”展览时的讲话2013-11-01”，“外媒：中国实现教育梦还有很长的路

9、要走2013-11-01”。(10)在任务栏选择“ul”，按方向键右键，选择菜单“插入”-“布局对象”-“Div 标签”，插入选择“在插入点”，ID 填写“index1_2_3”。7.4.3 制作二级链接列表页面(11)在CSS 面板中，单击“新建CSS 规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML 元素）”，选择器名称填写“index1_2_3”，规则定义选择“main.css”，左侧选项卡选择“区块”，文本对齐选择“右对齐”，左侧选项卡选择“方框”，设置宽为“780 像素”，浮动为“左对齐”，设置上下边界都为“30 像素”。(12)将光标置于层index1_2_3 中，输入文字“总共10 页/当前第1 页 首页 上一页 下一页 尾页”，并分别为文字“首页 上一页 下一页 尾页”添加空链接。(13)完成链接列表如图所示。