第2章--编辑网页元素cl.pptVIP

机械工业出版社 电子工业出版社 机械工业出版社 网页设计与制作教程（HTML+CSS+JavaScript） 第2版 机械工业出版社 第2章 编辑网页元素 2.1 文字与段落排版 2.1.1 标题标签h#…/h# 标题文字标签的格式为： h# align=left|center|right 标题文字 /h# 【演练2-1】列出HTML中的各级标题，本例文件2-1.html在浏览器中显示的效果如图2-1所示。 2.1 文字与段落排版 2.1.2 段落标签p…/p 2.1 文字与段落排版 2.1.3 换行标签br/ 2.1 文字与段落排版 2.1.4 水平线标签hr/ 水平线标签的格式为： hr align=left|center|right size=横线粗细 width=横线长度 color=横线色彩 noshade= noshade / 【演练2-4】hr/标签的基本用法，本例文件2-4.html在浏览器中显示的效果如图2-4所示。 2.1 文字与段落排版 2.1.5 光影世界关于我们页面 【演练2-6】使用文字与段落的基本排版知识制作光影世界关于我们页面，本例文件2-6.html在浏览器中显示的效果如图2-6所示。 2.2 列表 2.2.1 无序列表 当创建一个无序列表时，用HTML的ul标签和li标签来标记。格式为： ul type=符号类型 li type=符号类型1 第一个列表项 … /ul 【演练2-7】制作光影世界栏目类别的无序列表，本例文件2-7.html在浏览器中显示的效果如图2-7所示。 2.2 列表 2.2.2 有序列表 有序列表是一个有特定顺序的列表项的集合。格式为： ol type=符号类型 li type=符号类型1 表项1 … /ol 【演练2-8】制作光影世界客照展示上传文件步骤的有序列表，本例文件2-8.html在浏览器中显示的效果如图2-8所示。 2.2 列表 2.2.3 定义列表 定义列表又称为释义列表或字典列表。格式为： dl dt…第一个标题项…/dt dd…对第一个标题项的解释文字…/dd /dl 【演练2-9】使用定义列表显示光影世界客服中心的联系电话和地址，本例文件2-9.html的浏览效果如图2-9所示。 2.2 列表 2.2.4 嵌套列表 所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。 【演练2-10】制作光影世界栏目简介页面，在无序列表中嵌套无序列表和有序列表，本例文件2-10.html在浏览器中显示的效果如图2-10所示。 2.3 超链接 2.3.1 超链接的基本概念 1．超链接的定义 所谓的超链接（hyperlink）是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置。 2．超链接的分类 根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 3．路径 创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。 2.3 超链接 2.3.2 超链接的应用 1．锚点标签a…/a a href=URL target=打开窗口方式 热点 /a 2．指向其他页面的链接 （1）链接到同一目录内的网页文件 a href=目标文件名.htm 热点文本 /a （2）链接到下一级目录中的网页文件 a href=子目录名/目标文件名.htm 热点文本 /a （3）链接到上一级目录中的网页文件 a href=../目标文件名.htm 热点文本 /a （4）链接到同级目录中的网页文件 a href=../子目录名/目标文件名.htm 热点文本 /a 2.3 超链接 2.3.2 超链接的应用 3．指向本页中的链接 要在当前页面内实现超链接，需要定义两个标签：一个为超链接标签，另一个为书签标签。 （1）超链接标签 超链接标签的格式为： a href=#记号名 热点文本 /a （2）书签标签 书签就是用a标签对文本作一个记号。如果有多个链接，对不同目标文本要设置不同的书签名。书签名在a标签的name属性中定义，格式为： a name=记号名 目标文本附近的字符串 /a 2.3 超链接 2.3.2 超链接的应用 3．指向书签的链接 书签名在a标签的name属性中定义，格式为： a name=记号名 目标文本附近的内容 /a （1）指向页面内书签的链接 格式为： a href=#记号名 热点文本 /a （2）指向其他页面书签的链接 a href=目标文件