网页设计与制作案例教程（第2版）（胡秀娥） 项目五（网页列表与超链接） .docxVIP

网页设计与制作 案例教程 网页列表与超链接项目五 网页列表与超链接 网页设计 项目导读 列表是网页中的重要元素，使用它可以使网页的相关 内容以一种整齐划一的方式排列显示，能给人清晰、工整 、一目了然的视觉效果。超链接是各个网页之间的桥梁， 是它将网页连接成了网站。这两种元素组合使用，能够制 作出网页中非常重要的模块——导航栏。 本项目将介绍网页列表与超链接的相关知识，以及使 用Dreamweaver CC在网页中添加这些元素并制作导航栏 的方法。 知 识 目 标 能 力 目 标 → 思 政 目 标 1.熟悉列表标签的基础知识。 2.熟悉超链接标签的基础知识。 3.熟悉制作简单导航栏的方法。 1.能够使用Dreamweaver CC为网页添加列表并设置样式。 2.能够使用Dreamweaver CC为网页添加超链接并设置样式。 3.能够使用Dreamweaver CC制作简单导航栏。 1.保持积极的学习态度，增强自身工作能力。 2.了解“绿水青山就是金山银山”的相关信息，增强热爱自然、 保护自然的意识。 任务一 在网页中添加列表 任务描述 网 市 中 应 用 广 泛 除 文 字 列 表 图 文 列 表 外 导 航 田 田 : 一、添加列表 HTML5 中的列表元素分为无序列表、有序列表等。使用 Dreamweaver CC可以直接在网页文档中添加列表，将插入点 置于想要插入列表的位置，若单击“插入”面板中的“无序列 表”和“列表项”按钮，可添加无序列表；若单击“插入”面 板中的“有序列表”和“列表项”按钮，可添加有序列表，如 图所示。 需要注意的是，列表项标签应嵌套在无序列表或有序列 表标签之内。 CC CC LiE 插入 CSS 设 文 件 HTML 2 √ 标 题 ：H2 Table Figure ul 无序列表 ol 有序列表 li 列表项 8 Hyperink 目 “插入”面板中的列表按钮 body ul body ul 无序列表会将列表项的内容依次排列，并在每一个列表项前添加项目 li/li li/li/ul/body符号(默认为实心圆)。无序列表的列表项之间没有先后、主次、轻 li/li /ul /body 重之分。在HTML5 中，使用ul 标签标记无序列表，使用li标签 标记列表项，且一个ul 标签中可以包含一个或多个li标签。默认 无序列表的代码情况下，各个列表项会从上至下排列，而不是显示在同一行中。 无序列表的代码 bodyol添加有序列表： 文档窗口中自动生成有序列表的代码，如图所 body ol 示。有序列表中的列表项是有先后顺序的，列表项前的项目符号为数 li/1i lik/l/ol /body字序号，默认为阿拉伯数字。在HTML5 中，使用ol lik/l /ol /body 列表，同样使用li标签标记列表项，且一个ol 标签同样也可以包 有序列表的代码含一个或多个li标签。对于强调列表项排列顺序的内容，如排行榜、 有序列表的代码 新闻列表等，可以使用有序列表制作。 设置列表样式 设置列表样式 :二、 设置列表样式 在 “CSS 设计器”面板中，可以直接设置列表的3个样式，分别为项目符号的位置、自定义项目符号与项目 符号样式，如图所示。 + + 国 性 显示集 list-style postion list-style-image list-style-type (1)list-style-position属性用于设置项目符号的位置，其属性值有inside() 和outside()。 其 中 ，inside 表 示项目符号在列表项之内； outside 是默认值，表示项目符号在列表项左侧。 (2)list-style- image 属性用于设置自定义项目符号。设置方法为，单击该属性右侧的下拉列表，在展开的列表 中 选 择 url 选项，单击编辑框右侧的“浏览”按钮，打开“选择图像源文件”对话框，选择图像文件后单击 “确定”按钮，即可自定义项目符号。 (3)list-style-type 属性用于设置列表项的项目符号，其属性值及说明如表所示。 属性值 说明 属性值 说明 none 不使用项目符号 ower-alpha 小写英文字母 disc 实心圆(默认值) upper-alpha 大写英文字母 circle 空心圆 lower-roman 小写罗马数字 square 实心方块 upper-roman 大写罗马数字 decimal 阿拉伯数字 hiragana 日文平假名 cjk-ideographic 中文数字 katakana 日文片假名 list-style-type的属性值及说明 任务实施——为“传承经典网”主页添加列表