《Web技术基础》第2课标准化页面、结构化文档解析.ppt

3.3 XHTML文本格式化——引用和术语定义 实例xhtml(address).html说明了如何在 XHTML 文件中写地址，如何实现缩写或首字母缩写，如何改变文字的方向。 3.4 XHTML列表 标签 描述 ol 有序列表 ul 无序列表 li 列表项 dl 定义列表 dt 定义列表项目 dd 定义列表项目描述 3.4 XHTML列表——无序列表 无序列表是一个项目的列表，每个项目默认使用粗体圆点进行标记。无序列表用ul标签定义，每个列表项用li定义，列表项内容可以使用段落、换行符、图片、连接以及其他列表等等。 无序列表ul有一个可选属性type，用来规定列表里项目符号的类型。 属性 值 描述 type disc（默认值。实心圆） square（实心方块） circle（空心圆） 不赞成使用。建议使用样式取代它 规定列表的项目符号的类型 3.4 XHTML列表——无序列表 h4Disc 项目符号列表：/h4 ul type=disc li苹果/li li香蕉/li /ul h4Circle 项目符号列表：/h4 ul type=circle li苹果/li li香蕉/li /ul h4Square 项目符号列表：/h4 ul type=square li苹果/li li香蕉/li /ul 3.4 XHTML列表——有序列表 有序列表也是项目，列表项目使用数字进行标记。有序列表用ol标签定义，每个列表项用li定义，列表项内容可以使用段落、换行符、图片、连接及其他列表等。 有序列表ol有二个可选属性。 属性 值 描述 start number 不赞成使用。建议使用样式取代它 规定列表中的起始点 type A（大写字母）、a（小写字母） I（大写罗马字母）、i（小写罗马字母） 1（数字） 规定列表的类型。不赞成使用。建议使用样式代替 3.4 XHTML列表——有序列表 h4数字列表：/h4 ol li苹果/li li香蕉/li /ol h4字母列表：/h4 ol type=A li苹果/li li香蕉/li /ol h4小写字母列表：/h4 ol type=a li苹果/li li香蕉/li /ol h4罗马字母列表：/h4 ol type=I li苹果/li li香蕉/li /ol h4小写罗马字母列表：/h4 ol type=i li苹果/li li香蕉/li /ol 3.4 XHTML列表——定义列表 定义列表是项目及其注释的组合，定义列表以dl标签开始，每个定义列表项以dt开始，每个定义列表项的描述以dd开始。 h4一个定义列表：/h4 dl dt咖啡/dt dd黑色的热饮料/dd dtMilk/dt dd白色的冷饮料/dd /dl 3.5 叮叮书店首页结构化文档的建立 当制作一个网页时，首先要确定整个页面的内容结构，采用先整体后局部，自上到下的方法，将页面划分成不同的区域，然后确定每一个区域的内容，最后完成一个结构化的页面文档。 3.5 叮叮书店首页结构化文档的建立 1.分析设计页面内容结构 整个页面内容是一个大的容器，可以看成Word文档的一页，一般由页眉、内容和页脚三个区域组成。 页眉由网站logo、导航菜单和常用连接三个区域组成。 页脚由logo、导航和版权标志三个区域组成。 3.5 叮叮书店首页结构化文档的建立 内容由左边内容区和右边边栏区组成，其中左边内容区由图片切换广告、本周推荐标题栏、本周推荐内容区、最近新书标题栏和最近新书内容区组成，右边边栏区由广告区、促销、分类和合作伙伴区、关于书店标题栏和关于书店内容区组成，促销区又由促销标题栏和促销内容区组成，分类和合作伙伴区又由分类标题栏和合作伙标题栏组成。 3.5 叮叮书店首页结构化文档的建立 3.5 叮叮书店首页结构化文档的建立 2.用div确定文档结构 在叮叮书店站点中新建文件index1.html。 建立文档整体内容结构 div id=wrap !--页眉-- div class=header/div !--内容-- div class=center-content !--页脚-- div class=footer/div /div 3.5 叮叮书店首页结构化文档的建立 建立页眉区 !--网站logo-- div class=logo/div !--常用连接-- div id=menu-logo/div !--导航菜单-- div id=menu/div 3.5 叮叮书店首页结构化文档的建立 建立内容区 !--左边内容区-- div class=left-content !--图片切换广告-- div id=advert/div !