第10章设置列表样式精选.pptxVIP

第10章 设置列表样式 列表让设计者能够对相关的元素进行分组，并由此给他们制定结构。大多数网站都包含某种形式的列表，比如新闻列表、标题列表等等。将这些条目标识为列表并加上标记会在HTML文档中增加结构。本章主要讲解如何通过CSS样式对网页中的列表进行控制，并且通过两个影视音乐网站的实例，详细讲解了页面中对列表样式的应用。 10.1 列表控制概述 在网页中列表元素是非常重要的应用形式。通过CSS样式控制列表，可以轻松的实现整齐直观的显示效果。 10.1.1 列表控制原则 列表形式在网站设计中占有很大比重，在信息的显示时非常整齐直观便于用户理解与点击，从出现网页开始到现在，列表元素一直是页面中非常重要的应用形式。 10.1.2 列表标签的使用 无序列表ul 所谓无序列表，是指列表中的各个元素在逻辑上没有先后顺序的列表形式。如果列表中不需要描述一条信息的序号，则可以使用ul元素。大部分页面中的作息均可以用ul来描述。ul与li标签配合使用，其中的每一个标签均为一条列表，所有li标签将被包含在ul标签中。 序列表ol 有序列表则与上面讲的无序列表相反，表示列表的每一个元素都会有序列区分，从上至下可以为数字、字母等多种不同形式。使用ol的有序列表目前在网上出现得并不是很多，原因就在于很少有人使用ol标签来制作列表。多数人使用表格来制作有序列表，这样将会造成代码过于复杂。 10.2 列表样式控制 与控制背景一样，列表元素也提供了与图像、定位类似的标准的属性，虽然看似不多，但对页面设计却带来了意想不到的改观。使用CSS布局之后，最大的改变就是对相同的设计在不同的技术环境下拥有的新的思路与做法，列表元素也是如此。 10.2.1 ul无序列表 10.2.2 ol有序列表 10.2.3 定义列表 10.2.4 更改列表项目样式 10.3 使用列表制作菜单 当项目列表的项目符号可以通过设置list-style-type属性值为none时，制作各式各样的菜单和导航条成了项目列表的最大用处之一，通过CSS属性控制可以达到意想不到的效果，本节将向读者介绍如何使用列表标签制作实用的风页导航菜单。 10.3.1 无需表格的菜单 10.3.2 菜单的横竖转换 导航菜单 在浏览器中预览导航菜单效果 10.4 CSS 3.0中其他模块的新增属性 在CSS3.0中新增加了4种对网页中其他模块进行控制的属性，分别是@media、@font-face、columns和speech,下面就分别对这4种新增的控制其他模块的属性进行简单的介绍。 10.4.1 @media 10.4.2 @font-face 10.4.3 columns 10.4.4 speech 10.4.5 使用CSS3.0实现选项卡式新闻块 10.5 课堂练习 本实例制作一个游戏类网站页面，在页面中多处应用了列表，所以列表的排版是否合理，直接会影响到页面的整体整体性和美观性，同时也会直接影响到浏览者对网站的第一印象。本节将通过实例的制作来讲解如何创建列表。 10.5.1 设计分析 10.5.2 制作步骤 源文件位置：光盘/视频/第8章/10-5-2.swf 视频位置：光盘/素材/第8章/10-5-2.html 10.6 课堂讨论 通过本章的学习，我们掌握了设置列表的样式，在网页设计和制作中可以不再使用单一的列表样式。 10.6.1 问题1——网页中文本分行与分段有什么区别 遇到文本末尾的地方，Dreamweaver会自动进行分行操作，然而在某些情况下，我们需要进行强迫分行，将某些文本放到下一行去，此时在操作上读者可以有两种选择：按键盘上的Enter键（为段落标签），在代码视图中显示为P标签。也可以按快捷键Shift+Enter（为换行符也被称为强迫分行），在代码视图中显示为br /，可以使文本落到下一行去，在这种情况下被分行的文本仍然在同一段落中。 10.6.2 问题2——如何不通过CSS样式更改项目列表前的符号效果 在设计视图中选中已有列表的其中一项，执行“格式列表属性”命令，弹出“列表属性”对话框，在“列表类型”下拉列表中选择“项目列表”选项，此时“列表属性”对话框上除“列表类型”下拉列表框外，只有“样式”下拉列表框和“新建样式”下拉列表框可用，在“样式”下拉列表中共有3个选项，分别为“默认”、“项目符号”和“正方形”，它们用来设置项目列表里每行开头的列表标志。 10.7 课后练习 本章向读者讲述了如何设置列表样式，通过前面的学习，已经掌握了如何在网页中添加列表，并设置样式，接下来就独自完成课后练习吧。 源文件位置：光盘\ 素材\第10章\10-7.html 视频位置：光盘\ 视频\第10章\10-7.swf