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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,03制作二级链接列表页面教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）,制作二级链接列表页面,静态网站制作教学资源课件,7.,4.3 制作二级链接列表页面,(1)新建一个HTML文件，保存到codes文件夹下，文件名为：list.htm，修改标题为：中国梦教育梦。,(2)二级页面中的头部和底部的做法与首页相同。,(3)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，类选择“box”，ID填写“index1”。,(4)将光标置于层index1中，选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在开始标签之后”“”，ID填写“index1_1”。,一、制作左侧版块,7.,4.3 制作二级链接列表页面,(5)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“ID（仅应用于一个HTML元素）”，选择器名称填写“index1_1”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置宽为“210像素”，浮动为“左对齐”。,(6)选择菜单“插入”-“图像”，选择文件夹images下的left1.jpg，按方向键右键，输入文字“教育助力中国梦”，进入代码视图，选中文字“教育助力中国梦”，选择菜单“插入”-“HTML”-“文本对象”-“项目列表”，选择菜单“插入”-“HTML”-“文本对象”-“列表项”，返回到设计视图，为文字“教育助力中国梦”加上空链接。,7.,4.3 制作二级链接列表页面,(7)按回车后输入“百名书记畅谈中国梦系列报道”，“中国梦我的梦”，“袁贵仁：我的中国教育梦”，并分别加上空链接。,(8)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“复合对象（基于选择的内容）”，选择器名称填写“#index1_1 ul”，规则定义选择“main.css”，左侧选项卡选择“方框”，设置填充为“4像素”，边界为“10像素”，左侧选项卡选择“边框”，取消勾选全部相同，设置左样式为“实现”，宽度为“1像素”，颜色为“#C8000B”。,7.,4.3 制作二级链接列表页面,(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像素”，左侧选项卡选择“方框”，设置宽为“760像素”，高为“30像素”，浮动为“左对齐”，取消勾选填充的全部相同，设置右为“10像素”，取消勾选边界的全部相同，设置左为“10像素”，左侧选项卡选择“边框”，取消勾选全部相同，设置下样式为“实线”，宽度为“2像素”，颜色为“#CCC”。,(3)输入文字“教育力量”，选择菜单“插入”-“HTML”-“文本对象”-“标题3”。,二、制作右侧信息链接列表,7.,4.3 制作二级链接列表页面,(4)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“标签（重新定义HTML元素）”，选择器名称选择“h3”，规则定义选择“main.css”，左侧选项卡选择“类型”，设置字体大小为“14像素”，粗细为“粗体”，左侧选项卡选择“方框”，设置浮动为“左对齐”，左填充为“10像素”，左边界为“10像素”，左侧选项卡选择“边框”，取消勾选“全部相同”，边框下样式选择“实线”，宽度为“2像素”，颜色为“#C8000B”。,(5)选择菜单“插入”-“标签”，左侧选择“HTML标签”，右侧选择“span”，然后在当前光标位置输入文字“当前位置 首页 教育力量”。,7.,4.3 制作二级链接列表页面,(6)选择菜单“插入”-“布局对象”-“Div标签”，插入选择“在标签之后”“”，ID填写“index1_2_2”。,(7)在CSS面板中，单击“新建CSS规则”按钮，在弹出的对话框中，选择器类型选择“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 制作二级链接列表页面,(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”，“外媒：中国实现教育梦还有很长的路要走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)完成链接列表如图所示。,