《HTML5-CSS3-javasript-网页制作-网页设计第2章--网页文档编辑分析.ppt》由会员分享，可在线阅读，更多相关《HTML5-CSS3-javasript-网页制作-网页设计第2章--网页文档编辑分析.ppt（25页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML+CSS+JavaScript网页制作机械工业出版社同名教材机械工业出版社同名教材机械工业出版社同名教材机械工业出版社同名教材配套电子教案配套电子教案配套电子教案配套电子教案2.1 2.1 案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面2.22.2 案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面超链接超链接超链接超链接2.3 2.3 案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面图像图像图像图像2.4 2.4 案例
2、：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面列表列表列表列表2.5 2.5 实训：制作鲜花名片页面实训：制作鲜花名片页面实训：制作鲜花名片页面实训：制作鲜花名片页面第第2章章 网页文档编辑网页文档编辑 【案案案案例例例例展展展展示示示示】页页页页面面面面中中中中使使使使用用用用不不不不同同同同的的的的标标标标题题题题等等等等级级级级显显显显示示示示服服服服务务务务向向向向导导导导、问问问问题题题题和和和和解解解解决决决决方方方方案案案案；使使使使用用用用段段段段落落落落和和和和换换换换行行行行显显显显示示示示问问问问题题题题解解解解答答答
3、答；使使使使用用用用特特特特殊殊殊殊符符符符号号号号实实实实现现现现段段段段落落落落首首首首行行行行缩缩缩缩进进进进；使使使使用用用用水水水水平平平平线线线线实实实实现现现现文文文文本本本本分分分分隔隔隔隔。本本本本例例例例文文文文件件件件2-1.html2-1.html2-1.html2-1.html在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图2-12-12-12-1所示。所示。所示。所示。2.12.1 案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面2.1.1 2.1.1 2.1.1
4、 2.1.1 注释标签注释标签注释标签注释标签!-!-!-可可可可以以以以在在在在HTMLHTMLHTMLHTML文文文文档档档档中中中中添添添添加加加加注注注注释释释释，增增增增加加加加代代代代码码码码的的的的可可可可读读读读性性性性，便便便便于于于于以以以以后后后后维维维维护护护护和和和和修修修修改改改改。用用用用户户户户在在在在浏浏浏浏览览览览器器器器中中中中看看看看不不不不见见见见这这这这些些些些注注注注释释释释，只只只只有有有有在在在在用用用用文本编辑器打开文档源代码时才可见。注释标签的格式为：文本编辑器打开文档源代码时才可见。注释标签的格式为：文本编辑器打开文档源代码时才可见。注释
5、标签的格式为：文本编辑器打开文档源代码时才可见。注释标签的格式为：!-!-!-2.1.2 2.1.2 2.1.2 2.1.2 段落标签段落标签段落标签段落标签 浏浏浏浏览览览览器器器器忽忽忽忽略略略略用用用用户户户户在在在在HTMLHTMLHTMLHTML编编编编辑辑辑辑器器器器中中中中键键键键入入入入的的的的回回回回车车车车符符符符，所所所所以以以以段段段段落落落落标标标标签签签签在在在在编编编编辑辑辑辑网网网网页页页页的的的的时时时时候候候候经经经经常常常常会会会会用用用用到到到到，段段段段落落落落标标标标签签签签会会会会在段落前后加上额外的空行。段落标签的格式为在段落前后加上额外的空行。
6、段落标签的格式为在段落前后加上额外的空行。段落标签的格式为在段落前后加上额外的空行。段落标签的格式为：p align=p align=p align=文字文字文字文字 2.12.1 案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面2.1.3 2.1.3 2.1.3 2.1.3 换行标签换行标签换行标签换行标签 /换行标签的格式为换行标签的格式为换行标签的格式为换行标签的格式为：文字文字文字文字 /浏浏浏浏览览览览器器器器解解解解释释释释时时时时，从从从从该该该该处处处处换换换换行行行行。换换换换行行行行标标标标签签签签单单单单独独独独使使
7、使使用用用用，可可可可使使使使页页页页面面面面清晰、整齐清晰、整齐清晰、整齐清晰、整齐。2.1.4 2.1.4 2.1.4 2.1.4 水平线标签水平线标签水平线标签水平线标签 水水水水平平平平线线线线可可可可以以以以作作作作为为为为段段段段落落落落与与与与段段段段落落落落之之之之间间间间的的的的分分分分隔隔隔隔线线线线，使使使使得得得得文文文文档档档档结结结结构构构构清清清清晰晰晰晰，层层层层次次次次分分分分明明明明。当当当当浏浏浏浏览览览览器器器器解解解解释释释释到到到到HTMLHTMLHTMLHTML文文文文档档档档中中中中的的的的标标标标签签签签时，会在此处换行，并加入一条水平线段时，
8、会在此处换行，并加入一条水平线段时，会在此处换行，并加入一条水平线段时，会在此处换行，并加入一条水平线段。水平线标签的格式为水平线标签的格式为水平线标签的格式为水平线标签的格式为：hr hr hr /2.12.1 案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面2.1.5 2.1.5 2.1.5 2.1.5 标题标签标题标签标题标签标题标签 在在在在页页页页面面面面中中中中，标标标标题题题题是是是是一一一一段段段段文文文文字字字字内内内内容容容容的的的的核核核核心心心心，所所所所以以以以总总总总是是是是用用用用加加加加强强强强的的的的效效
9、效效果果果果来来来来表表表表示示示示。标标标标题题题题使使使使用用用用至至至至标标标标签签签签进进进进行行行行定定定定义义义义。定定定定义义义义最最最最大大大大的的的的标标标标题题题题，定定定定义义义义最最最最小小小小的的的的标标标标题题题题，HTMLHTMLHTMLHTML会会会会自自自自动动动动在在在在标标标标题题题题前后添加一个额外的换行。标题文字标签的格式为：前后添加一个额外的换行。标题文字标签的格式为：前后添加一个额外的换行。标题文字标签的格式为：前后添加一个额外的换行。标题文字标签的格式为：h#align=h#align=h#align=标题文字标题文字标题文字标题文字 2.1.6
10、 2.1.6 2.1.6 2.1.6 特殊符号特殊符号特殊符号特殊符号 由由由由于于于于大大大大于于于于号号号号“”和和和和小小小小于于于于号号号号“”等等等等已已已已作作作作为为为为HTMLHTMLHTMLHTML的的的的语语语语法法法法符符符符号号号号，因因因因此此此此，如如如如果果果果要要要要在在在在页页页页面面面面中中中中显显显显示示示示这这这这些些些些特特特特殊殊殊殊符符符符号号号号，就就就就必必必必须须须须使使使使用用用用相相相相应应应应的的的的HTMLHTMLHTMLHTML代代代代码码码码表表表表示示示示，这这这这些些些些特特特特殊殊殊殊符符符符号号号号对对对对应应应应的的的的
11、HTMLHTMLHTMLHTML代代代代码码码码被被被被称称称称为为为为字符实体。字符实体。字符实体。字符实体。2.12.1 案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面案例：网络花店服务向导页面 【案案案案例例例例展展展展示示示示】使使使使用用用用页页页页面面面面之之之之间间间间的的的的链链链链接接接接、页页页页内内内内书书书书签签签签链链链链接接接接、下下下下载载载载文文文文件件件件链链链链接接接接和和和和电电电电子子子子邮邮邮邮件件件件链链链链接接接接制制制制作作作作网网网网络络络络花花花花店店店店购购购购物物物物指指指指南南南南页页页页面面面面，本本本
12、本例文件例文件例文件例文件2-2.html2-2.html2-2.html2-2.html在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图2-22-22-22-2、图、图、图、图2-32-32-32-3所示。所示。所示。所示。2.2 2.2 案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面超链接超链接超链接超链接 2.1.1 2.1.1 2.1.1 2.1.1 超链接简介超链接简介超链接简介超链接简介1 1 1 1超链接的定义超链接的定义超链接的定义超链接的定义 超超超超链链链链接接接接（h
13、yperlinkhyperlinkhyperlinkhyperlink）是是是是指指指指从从从从一一一一个个个个网网网网页页页页指指指指向向向向一一一一个个个个目目目目标标标标的的的的连连连连接接接接关关关关系系系系，这这这这个个个个目目目目标标标标可可可可以以以以是是是是另另另另一一一一个个个个网网网网页页页页，也也也也可可可可以以以以是是是是相相相相同同同同网网网网页页页页上上上上的的的的不不不不同同同同位位位位置置置置，还还还还可可可可以以以以是是是是一一一一个个个个图图图图片片片片，一一一一个个个个电电电电子子子子邮邮邮邮件件件件地地地地址址址址，一一一一个个个个文件，甚至是一个应用程
14、序文件，甚至是一个应用程序文件，甚至是一个应用程序文件，甚至是一个应用程序。2 2 2 2超链接的分类超链接的分类超链接的分类超链接的分类 根根根根据据据据超超超超链链链链接接接接目目目目标标标标文文文文件件件件的的的的不不不不同同同同，超超超超链链链链接接接接可可可可分分分分为为为为页页页页面面面面超超超超链链链链接接接接、锚锚锚锚点点点点超超超超链链链链接接接接、电电电电子子子子邮邮邮邮件件件件超超超超接接接接链链链链等等等等；根根根根据据据据超超超超链链链链接接接接单单单单击击击击对对对对象象象象的的的的不不不不同，超链接可分为文字超链接、图像超链接、图像映射等同，超链接可分为文字超链接
15、、图像超链接、图像映射等同，超链接可分为文字超链接、图像超链接、图像映射等同，超链接可分为文字超链接、图像超链接、图像映射等。2.2 2.2 案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面超链接超链接超链接超链接 2.1.1 2.1.1 2.1.1 2.1.1 超链接简介超链接简介超链接简介超链接简介3 3 3 3路径路径路径路径（1 1 1 1）绝对路径）绝对路径）绝对路径）绝对路径绝绝绝绝对对对对路路路路径径径径是是是是包包包包括括括括通通通通信信信信协协协协议议议议名名名名、服服服服务务务务器器器器名名名名、路路路路径径径径及及及
16、及文文文文件件件件名名名名的的的的完完完完全路径全路径全路径全路径。（2 2 2 2）根目录相对路径）根目录相对路径）根目录相对路径）根目录相对路径根根根根目目目目录录录录相相相相对对对对路路路路径径径径的的的的根根根根是是是是指指指指本本本本地地地地站站站站点点点点文文文文件件件件夹夹夹夹（根根根根目目目目录录录录），以以以以“/”开头，路径是从当前站点的根目录开始计算开头，路径是从当前站点的根目录开始计算开头，路径是从当前站点的根目录开始计算开头，路径是从当前站点的根目录开始计算。（3 3 3 3）文档目录相对路径）文档目录相对路径）文档目录相对路径）文档目录相对路径文文文文档档档档目目目
17、目录录录录相相相相对对对对路路路路径径径径是是是是指指指指包包包包含含含含当当当当前前前前文文文文档档档档所所所所在在在在的的的的文文文文件件件件夹夹夹夹，也也也也就就就就是是是是以当前文档所在的文件夹为基础开始计算路径以当前文档所在的文件夹为基础开始计算路径以当前文档所在的文件夹为基础开始计算路径以当前文档所在的文件夹为基础开始计算路径。2.2 2.2 案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面超链接超链接超链接超链接 2.2.2 2.2.2 2.2.2 2.2.2 超链接的应用超链接的应用超链接的应用超链接的应用1 1 1 1创
18、建锚点创建锚点创建锚点创建锚点 创建锚点的语法格式如下创建锚点的语法格式如下创建锚点的语法格式如下创建锚点的语法格式如下：a a a 热热热热点点点点文文文文本本本本 其其其其中中中中，锚锚锚锚点点点点的的的的名名名名称称称称可可可可以以以以是是是是数数数数字字字字或或或或英英英英文文文文字字字字母母母母，或或或或者者者者两两两两者者者者混混混混合。在同一页面中可以有多个锚点，但名称不能相同合。在同一页面中可以有多个锚点，但名称不能相同合。在同一页面中可以有多个锚点，但名称不能相同合。在同一页面中可以有多个锚点，但名称不能相同。建建建建立立立立链链链链接接接接时时时时，hrefhrefhref
19、href属属属属性性性性定定定定义义义义了了了了这这这这个个个个链链链链接接接接所所所所指指指指的的的的目目目目标标标标地地地地址址址址，也也也也就就就就是是是是路路路路径径径径。如如如如果果果果要要要要创创创创建建建建一一一一个个个个不不不不链链链链接接接接到到到到其其其其他他他他位位位位置置置置的的的的空空空空超超超超链链链链接接接接，可用可用可用可用“#”代替代替代替代替URLURLURLURL。2.2 2.2 案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面超链接超链接超链接超链接 2.2.2 2.2.2 2.2.2 2.2.2
20、超链接的应用超链接的应用超链接的应用超链接的应用2 2 2 2在不同页面中使用锚点在不同页面中使用锚点在不同页面中使用锚点在不同页面中使用锚点 链接到同一目录内的网页文件，格式为：链接到同一目录内的网页文件，格式为：链接到同一目录内的网页文件，格式为：链接到同一目录内的网页文件，格式为：a 热点文本热点文本热点文本热点文本 链接到下一级目录中的网页文件，格式为：链接到下一级目录中的网页文件，格式为：链接到下一级目录中的网页文件，格式为：链接到下一级目录中的网页文件，格式为：a 热点文本热点文本热点文本热点文本 链接到上一级目录中的网页文件，格式为：链接到上一级目录中的网页文件，格式为：链接到上
21、一级目录中的网页文件，格式为：链接到上一级目录中的网页文件，格式为：a 热点文本热点文本热点文本热点文本 链接到同级目录中的网页文件，格式为：链接到同级目录中的网页文件，格式为：链接到同级目录中的网页文件，格式为：链接到同级目录中的网页文件，格式为：a 热点文本热点文本热点文本热点文本 3 3 3 3指向书签的链接指向书签的链接指向书签的链接指向书签的链接a name=目标文本附近的字符串目标文本附近的字符串目标文本附近的字符串目标文本附近的字符串 （1 1）指向页面内书签的链接）指向页面内书签的链接）指向页面内书签的链接）指向页面内书签的链接a 热点文本热点文本热点文本热点文本 （2 2）指
22、向其他页面书签的链接）指向其他页面书签的链接）指向其他页面书签的链接）指向其他页面书签的链接a 热点文本热点文本热点文本热点文本 即单击即单击即单击即单击“热点文本热点文本热点文本热点文本”，将跳转到目标页面，将跳转到目标页面，将跳转到目标页面，将跳转到目标页面“记号名记号名记号名记号名”开始的网页元素。开始的网页元素。开始的网页元素。开始的网页元素。2.2 2.2 案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面超链接超链接超链接超链接 2.2.2 2.2.2 2.2.2 2.2.2 超链接的应用超链接的应用超链接的应用超链接的应用4
23、4 4 4指向下载文件的链接指向下载文件的链接指向下载文件的链接指向下载文件的链接 如果链接到的文件不是如果链接到的文件不是如果链接到的文件不是如果链接到的文件不是HTMLHTMLHTMLHTML文件，则该文件将作为下载文件，则该文件将作为下载文件，则该文件将作为下载文件，则该文件将作为下载文件。指向下载文件的链接格式为：文件。指向下载文件的链接格式为：文件。指向下载文件的链接格式为：文件。指向下载文件的链接格式为：a 热点文本热点文本热点文本热点文本 5 5 5 5指向电子邮件的链接指向电子邮件的链接指向电子邮件的链接指向电子邮件的链接 单击指向电子邮件的链接，将打开默认的电子邮件程序，单击
24、指向电子邮件的链接，将打开默认的电子邮件程序，单击指向电子邮件的链接，将打开默认的电子邮件程序，单击指向电子邮件的链接，将打开默认的电子邮件程序，如如如如FoxMailFoxMailFoxMailFoxMail、Outlook ExpressOutlook ExpressOutlook ExpressOutlook Express等，并自动填写邮件地址。指等，并自动填写邮件地址。指等，并自动填写邮件地址。指等，并自动填写邮件地址。指向电子邮件链接的格式为：向电子邮件链接的格式为：向电子邮件链接的格式为：向电子邮件链接的格式为：a 热点文本热点文本热点文本热点文本 2.2 2.2 案例：网络花店
25、购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面案例：网络花店购物指南页面超链接超链接超链接超链接 【案案案案例例例例展展展展示示示示】使使使使用用用用图图图图像像像像的的的的基基基基本本本本操操操操作作作作制制制制作作作作网网网网络络络络花花花花店店店店商商商商品品品品明明明明细细细细页页页页面面面面，本例文件本例文件本例文件本例文件2-3.html2-3.html2-3.html2-3.html在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图2-42-42-42-4所示。所示。所示。所示。2.3 2.3 案例：网络花店商品明细
26、页面案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面图像图像图像图像2.2.2.2.3.1 3.1 3.1 3.1 网页图像的格式及使用原则网页图像的格式及使用原则网页图像的格式及使用原则网页图像的格式及使用原则1 1 1 1网页图像的格式网页图像的格式网页图像的格式网页图像的格式 网页图像有网页图像有网页图像有网页图像有3 3 3 3种常用格式：种常用格式：种常用格式：种常用格式：GIFGIFGIFGIF、JPEGJPEGJPEGJPEG和和和和PNGPNGPNGPNG。2 2 2 2网页图像的使用原则网页图像的使用原则网页图像的使用原则网页图像的使用原则（1
27、1 1 1）高高高高质质质质量量量量的的的的图图图图像像像像因因因因其其其其图图图图像像像像体体体体积积积积过过过过大大大大，不不不不太太太太适适适适合合合合网网网网络络络络传传传传输输输输。一一一一般般般般在在在在网网网网页页页页设设设设计计计计中中中中选选选选择择择择的的的的图图图图像像像像不不不不要要要要超超超超过过过过8KB8KB8KB8KB，如如如如必必必必须须须须选选选选用用用用较较较较大大大大图图图图像像像像时时时时，可可可可先先先先将将将将其其其其分分分分成成成成若若若若干干干干小小小小图图图图像像像像，显显显显示示示示时时时时再再再再通通通通过过过过表表表表格格格格将将将将这
28、这这这些小图像拼合起来。些小图像拼合起来。些小图像拼合起来。些小图像拼合起来。（2 2 2 2）如如如如果果果果在在在在同同同同一一一一文文文文件件件件中中中中多多多多次次次次使使使使用用用用相相相相同同同同的的的的图图图图像像像像时时时时，最最最最好好好好使使使使用用用用相相相相对路径查找该图像。对路径查找该图像。对路径查找该图像。对路径查找该图像。2.3 2.3 案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面图像图像图像图像2.3.2 2.3.2 2.3.2 2.3.2 图像标签图像标签图像标签图像标签 图像标签的格式为：图像标签的
29、格式为：图像标签的格式为：图像标签的格式为：/1 1 1 1指定图像的替换文本说明指定图像的替换文本说明指定图像的替换文本说明指定图像的替换文本说明 有有有有时时时时，由由由由于于于于网网网网络络络络过过过过忙忙忙忙或或或或者者者者用用用用户户户户在在在在图图图图片片片片还还还还没没没没有有有有下下下下载载载载完完完完全全全全就就就就点点点点击击击击了了了了浏浏浏浏览览览览器器器器的的的的停停停停止止止止键键键键，用用用用户户户户不不不不能能能能在在在在浏浏浏浏览览览览器器器器中中中中看看看看到到到到图图图图片片片片，这这这这时替换文本说明就十分有必要了。时替换文本说明就十分有必要了。时替换文
30、本说明就十分有必要了。时替换文本说明就十分有必要了。2.3 2.3 案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面图像图像图像图像2.3.2 2.3.2 2.3.2 2.3.2 图像标签图像标签图像标签图像标签 2 2 2 2调整图像大小调整图像大小调整图像大小调整图像大小 在在在在HTMLHTMLHTMLHTML中中中中，通通通通过过过过imgimgimgimg标标标标签签签签的的的的属属属属性性性性widthwidthwidthwidth和和和和heightheightheightheight来来来来调调调调整整整整图图图图像像像像
31、大大大大小小小小，其其其其目目目目的的的的是是是是通通通通过过过过指指指指定定定定图图图图像像像像的的的的高高高高度度度度和和和和宽宽宽宽度度度度加加加加快快快快图图图图像像像像的的的的下下下下载载载载速速速速度度度度。默默默默认认认认情情情情况况况况下下下下，页页页页面面面面中中中中显显显显示示示示的的的的是是是是图图图图像像像像的的的的原原原原始始始始大大大大小小小小。例例例例如，设置玫瑰花图片的宽度和高度。代码如下：如，设置玫瑰花图片的宽度和高度。代码如下：如，设置玫瑰花图片的宽度和高度。代码如下：如，设置玫瑰花图片的宽度和高度。代码如下：width=124 height=175 wid
32、th=124 height=175 width=124 height=1753 3 3 3指定图像的边框指定图像的边框指定图像的边框指定图像的边框 在在在在网网网网页页页页中中中中显显显显示示示示的的的的图图图图像像像像如如如如果果果果没没没没有有有有边边边边框框框框，会会会会显显显显得得得得有有有有些些些些单单单单调调调调，可可可可以以以以通通通通过过过过imgimgimgimg标标标标签签签签的的的的borderborderborderborder属属属属性性性性为为为为图图图图像像像像添添添添加加加加边边边边框框框框，添添添添加加加加边边边边框框框框后后后后的图像显得更醒目、美观。的图像
33、显得更醒目、美观。的图像显得更醒目、美观。的图像显得更醒目、美观。2.3 2.3 案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面图像图像图像图像2.3.2 2.3.2 2.3.2 2.3.2 图像标签图像标签图像标签图像标签 4 4 4 4图像作为超链接热点图像作为超链接热点图像作为超链接热点图像作为超链接热点 图图图图像像像像也也也也可可可可作作作作为为为为超超超超链链链链接接接接热热热热点点点点，单单单单击击击击图图图图像像像像则则则则跳跳跳跳转转转转到到到到被被被被链链链链接接接接的的的的文本或其他文件。格式为文本或其他文件。格式
34、为文本或其他文件。格式为文本或其他文件。格式为：a a a /5 5 5 5设置网页背景图像设置网页背景图像设置网页背景图像设置网页背景图像 背背背背景景景景属属属属性性性性将将将将背背背背景景景景设设设设置置置置为为为为图图图图像像像像。属属属属性性性性值值值值为为为为图图图图片片片片的的的的URLURLURLURL。如如如如果果果果图图图图像像像像尺尺尺尺寸寸寸寸小小小小于于于于浏浏浏浏览览览览器器器器窗窗窗窗口口口口，那那那那么么么么图图图图像像像像将将将将在在在在整整整整个个个个浏浏浏浏览览览览器器器器窗窗窗窗口口口口进进进进行复制。格式为：行复制。格式为：行复制。格式为：行复制。格式
35、为：body background=body background=body background=2.3 2.3 案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面图像图像图像图像2.3.2 2.3.2 2.3.2 2.3.2 图像标签图像标签图像标签图像标签 6 6 6 6指定图像的对齐方式指定图像的对齐方式指定图像的对齐方式指定图像的对齐方式 在在在在进进进进行行行行网网网网页页页页制制制制作作作作的的的的时时时时候候候候往往往往往往往往要要要要在在在在网网网网页页页页中中中中的的的的某某某某个个个个位位位位置置置置插插插插入入入入一
36、一一一个个个个小小小小的的的的图图图图片片片片，使使使使文文文文本本本本环环环环绕绕绕绕在在在在图图图图像像像像片片片片的的的的周周周周围围围围。imgimgimgimg标标标标签签签签的的的的alignalignalignalign属属属属性性性性用用用用来来来来指指指指定定定定图图图图像像像像与与与与周周周周围围围围元元元元素素素素的的的的对对对对齐齐齐齐方方方方式式式式，实实实实现现现现图图图图文文文文混混混混排效果排效果排效果排效果。2.3 2.3 案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面案例：网络花店商品明细页面图像图像图像图像【案案案案例例例例
37、展展展展示示示示】使使使使用用用用多多多多种种种种列列列列表表表表技技技技术术术术制制制制作作作作网网网网络络络络花花花花店店店店客客客客服服服服中中中中心心心心页页页页面面面面，本例文件本例文件本例文件本例文件2-4.html2-4.html2-4.html2-4.html在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图在浏览器中的显示效果如图2-92-92-92-9所示。所示。所示。所示。2.4 2.4 案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面列表列表列表列表2.4.1 2.4.1 2.4.1 2.4.
38、1 无序列表无序列表无序列表无序列表 所所所所谓谓谓谓无无无无序序序序列列列列表表表表就就就就是是是是列列列列表表表表中中中中列列列列表表表表项项项项的的的的前前前前导导导导符符符符号号号号没没没没有有有有一一一一定定定定的的的的次序，而是用黑点、圆圈、方框等一些特殊符号标识次序，而是用黑点、圆圈、方框等一些特殊符号标识次序，而是用黑点、圆圈、方框等一些特殊符号标识次序，而是用黑点、圆圈、方框等一些特殊符号标识。当当当当创创创创建建建建一一一一个个个个无无无无序序序序列列列列表表表表时时时时，主主主主要要要要使使使使用用用用用用用用HTMLHTMLHTMLHTML的的的的 标标标标签签签签和和
39、和和 标标标标签签签签来来来来标标标标记记记记。其其其其中中中中 标标标标签签签签标标标标识识识识一一一一个个个个无无无无序序序序列列列列表表表表的的的的开开开开始始始始；标签标识一个无序列表项。格式为标签标识一个无序列表项。格式为标签标识一个无序列表项。格式为标签标识一个无序列表项。格式为：1 第一个列表项第一个列表项第一个列表项第一个列表项 2 第二个列表项第二个列表项第二个列表项第二个列表项 /2.4 2.4 案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面列表列表列表列表2.4.2 2.4.2 2.4.2 2.4.2 有序列表有序
40、列表有序列表有序列表 有有有有序序序序列列列列表表表表是是是是一一一一个个个个有有有有特特特特定定定定顺顺顺顺序序序序的的的的列列列列表表表表项项项项的的的的集集集集合合合合。在在在在有有有有序序序序列列列列表表表表中中中中，各各各各个个个个列列列列表表表表项项项项有有有有先先先先后后后后顺顺顺顺序序序序之之之之分分分分，它它它它们们们们之之之之间间间间以以以以编编编编号号号号来来来来标标标标记记记记。使用使用使用使用 标签可以建立有序列表，表项的标签仍为标签可以建立有序列表，表项的标签仍为标签可以建立有序列表，表项的标签仍为标签可以建立有序列表，表项的标签仍为 。格式为：格式为：格式为：格式
41、为：1 1 1 表项表项表项表项1 1 1 1 2 2 2 表项表项表项表项2 2 2 2 /2.4 2.4 案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面列表列表列表列表2.4.3 2.4.3 2.4.3 2.4.3 定义列表定义列表定义列表定义列表 定定定定义义义义列列列列表表表表又又又又称称称称为为为为释释释释义义义义列列列列表表表表或或或或字字字字典典典典列列列列表表表表，定定定定义义义义列列列列表表表表不不不不是是是是带带带带有有有有前前前前导导导导字字字字符符符符的的的的列列列列项项项项目目目目，而而而而是是是是一一一一列列
42、列列实实实实物物物物以以以以及及及及与与与与其其其其相相相相关关关关的的的的解解解解释释释释。当当当当创创创创建建建建一一一一个个个个定定定定义义义义列列列列表表表表时时时时，主主主主要要要要用用用用到到到到3 3 3 3个个个个HTMLHTMLHTMLHTML标标标标签签签签：标标标标签签签签、和和和和 标签。格式为标签。格式为标签。格式为标签。格式为：第一个标题项第一个标题项第一个标题项第一个标题项/对第一个标题项的解释文字对第一个标题项的解释文字对第一个标题项的解释文字对第一个标题项的解释文字/第二个标题项第二个标题项第二个标题项第二个标题项/对第二个标题项的解释文字对第二个标题项的解释
43、文字对第二个标题项的解释文字对第二个标题项的解释文字/2.4 2.4 案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面列表列表列表列表2.4.4 2.4.4 2.4.4 2.4.4 嵌套列表嵌套列表嵌套列表嵌套列表 嵌嵌嵌嵌套套套套列列列列表表表表可可可可以以以以把把把把页页页页面面面面分分分分为为为为多多多多个个个个层层层层次次次次，给给给给人人人人以以以以很很很很强强强强的的的的层层层层次次次次感感感感。有有有有序序序序列列列列表表表表和和和和无无无无序序序序列列列列表表表表不不不不仅仅仅仅可可可可以以以以自自自自身身身身嵌嵌嵌嵌套套
44、套套，而而而而且且且且彼彼彼彼此此此此可可可可互互互互相相相相嵌嵌嵌嵌套套套套。嵌嵌嵌嵌套套套套方方方方式式式式可可可可分分分分为为为为：无无无无序序序序列列列列表表表表中中中中嵌嵌嵌嵌套套套套无无无无序序序序列列列列表表表表、有有有有序序序序列列列列表表表表中中中中嵌嵌嵌嵌套套套套有有有有序序序序列列列列表表表表、无无无无序序序序列列列列表表表表中中中中嵌嵌嵌嵌套套套套无无无无序序序序列列列列表表表表、在在在在有有有有序序序序列列列列表中嵌套有序列表等方式，读者需要灵活掌握。表中嵌套有序列表等方式，读者需要灵活掌握。表中嵌套有序列表等方式，读者需要灵活掌握。表中嵌套有序列表等方式，读者需要灵
45、活掌握。2.4 2.4 案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面案例：网络花店客服中心页面列表列表列表列表【实实实实训训训训展展展展示示示示】使使使使用用用用网网网网页页页页文文文文档档档档的的的的基基基基本本本本排排排排版版版版知知知知识识识识，制制制制作作作作鲜鲜鲜鲜花花花花名名名名片片片片页页页页面面面面，本本本本例例例例文文文文件件件件2-5.html2-5.html2-5.html2-5.html在在在在浏浏浏浏览览览览器器器器中中中中的的的的显显显显示示示示效效效效果果果果如如如如图图图图2-132-132-132-13所所所所示。示。示。示。
46、2.5 2.5 实训：制作鲜花名片页面实训：制作鲜花名片页面实训：制作鲜花名片页面实训：制作鲜花名片页面 1 1使用文字与段落的基本排版技术制作如图使用文字与段落的基本排版技术制作如图使用文字与段落的基本排版技术制作如图使用文字与段落的基本排版技术制作如图2-142-14所示的所示的所示的所示的页面。页面。页面。页面。2 2使用图文混排技术制作如图使用图文混排技术制作如图使用图文混排技术制作如图使用图文混排技术制作如图2-152-15所示的网络花店网银所示的网络花店网银所示的网络花店网银所示的网络花店网银支付简介页面。支付简介页面。支付简介页面。支付简介页面。3 3使用锚点链接和电子邮件链接制作如图使用锚点链接和电子邮件链接制作如图使用锚点链接和电子邮件链接制作如图使用锚点链接和电子邮件链接制作如图2-162-16所示的网所示的网所示的网所示的网页。页。页。页。4 4使用嵌套的列表制作如图使用嵌套的列表制作如图使用嵌套的列表制作如图使用嵌套的列表制作如图2-172-17所示的鲜花分类列表。所示的鲜花分类列表。所示的鲜花分类列表。所示的鲜花分类列表。习题习题习题习题2 2