单元4 商品信息展示网页设计

单元4

商品信息展示网页设计

购物网站通常会以图文混排方式展示商品外观和有用信息，吸引顾客选购商品。 本单元通过对购物网站的商品列表网页和品牌展示网页设计的探析与训练，重点学习HTML5中的列表标签、CSS的列表属性、表格属性和定位属性等，学会在网页中合理地使用列表、表格和CSS定位属性展示相关信息，学会应用列表、表格及CSS定位设计商品信息展示网页。教学导航教学目标（1）熟悉HTML5中的列表标签（2）熟悉CSS的列表属性、表格属性和定位属性（3）学会在网页中合理地使用列表、表格和CSS定位属性展示相关信息（4）学会应用列表、表格及CSS定位设计商品信息展示网页关键字购物网站商品信息展示网页列表标签列表属性表格属性定位属性参考资料（1）HTML5的常用标签及其属性、方法与事件参考附录B（2）CSS的属性参考附录C（3）CSS的各种选择器的含义和用法参考附录D教学方法任务驱动法、分组讨论法、理论实践一体化、探究学习法课时建议6课时实例探析【任务4-1】探析手机麦包包网触屏版的热销商品网页【效果展示】 手机麦包包网触屏版的热销商品网页0401.html的浏览效果如图4-1所示。 手机麦包包网触屏版的热销商品网页0401.html的主体结构为上、中、下结构，顶部内容包括Logo图片、用户登录超链接按钮和购物车超链接按钮，中部内容为热销商品列表，底部为多个导航超链接。图4-1手机麦包包网触屏版的热销商品网页0401.html的浏览效果【网页探析】1．网页0401.html的HTML代码探析2．网页0401.html的CSS代码探析知识梳理1．HTML5的列表标签（1）<ul>、<ol>和<li>标签 <ul>标签用于定义无序列表，<ol>标签用于定义有序列表，<li>标签用于定义列表项目。 <li>标签可用在有序列表（<ol>）和无序列表（<ul>）中。（2）<dl>、<dt>和<dd>标签 <dl>标签定义了定义列表（definitionlist），<dd>在定义列表中用于定义条目的定义部分，<dt>标签定义了定义列表中的项目（即术语部分）。 <dl>标签用于结合<dt>（定义列表中的项目）和<dd>（描述列表中的项目）。（3）<menu>标签 <menu>标签用于定义菜单列表。 当希望列出表单控件时使用该标签。 注意与<nav>的区别，<menu>专门用于表单控件。（4）<command>标签 <command>标签用于定义命令按钮，如单选按钮、复选框或按钮。 只有当<command>标签位于<menu>标签内时，该元素才是可见的。 否则不会显示这个元素，但是可以用它规定键盘快捷键。2．CSS列表属性（List） CSS列表属性允许放置、改变列表项标志，或者将图像作为列表项标志。 从某种意义上讲，不是描述性文本的任何内容都可以认为是列表。（1）列表类型（2）列表项图像（3）列表标志位置3．HTML5的链接与导航标签（1）<a>标签（2）<nav>标签4．CSS表格属性（Table） CSS表格属性可以改善表格的外观。（1）表格边框（2）折叠边框（3）表格宽度和高度（4）表格文本对齐（5）表格内边距（6）表格颜色5．CSS定位属性（Positioning） CSS定位（Positioning）属性允许对元素进行定位。 CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。（1）CSS定位机制 CSS有3种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。 也就是说，普通流中的元素的位置由元素在(X)HTML中的位置决定。（2）CSSposition属性position属性值使用说明static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框fixed元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身表4-8

position属性值的含义（3）CSS相对定位 设置为相对定位的元素框会偏移某个距离。 元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。图4-2相对定位示意图（4）CSS绝对定位 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。图4-3绝对定位示意图提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的堆放次序。（5）CSS浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。图4-4右浮动示意图图4-5左浮动示意图图4-6浮动元素被卡住的示意图（6）行框和清理 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。 因此，创建浮动框可以使文本围绕图像，如图4-7所示。图4-7图像向左浮动示意图图4-8

clear属性应用示意图引导训练【任务4-2】设计苏宁易购触屏版的促销商品列表网页【任务描述】 编写HTML代码和CSS代码，设计图4-9所示苏宁易购触屏版的促销商品列表网页0402.html。图4-9苏宁易购触屏版的促销商品列表

网页0402.html的浏览效果 苏宁易购触屏版的促销商品列表网页0402.html的主体结构为上、中、下结构，如图4-9所示。 顶部内容包括返回链接图片、标题文字和主页链接图片，中部内容包括多行促销商品列表，底部内容包括多个导航超链接和版权信息。 网页0402.html顶部结构使用<nav>标签实现，中部结构使用<section>标签实现，底部结构使用<footer>标签实现。【任务实施】1．网页0402.html的主体结构设计 在本地硬盘的文件夹“04商品信息展示网页设计\0402”中创建网页0402.html。（1）定义网页0402.html通用CSS代码（2）定义网页0402.html主体结构的CSS代码（3）编写网页0402.html主体结构的HTML代码2．网页0402.html的局部内容设计（1）网页0402.html的顶部内容设计（2）网页0402.html的中部内容设计（3）网页0402.html的底部内容设计【任务4-3】设计易购网的选用商品列表网页【任务描述】 编写HTML代码和CSS代码，设计图4-10所示易购网的选用商品列表网页0403.html。图4-10易购网的选用商品列表网页0403.html的浏览效果 易购网的选用商品列表网页0403.html的主体结构为上、下结构，如图4-10所示。 上部内容包括标题文字，底部内容为圆角表格，在该表格中显示所选商品。 网页0402.html上部结构使用<header>标签实现，下部结构使用<section>标签实现。【任务实施】1．设计网页0403.html的CSS代码 在本地硬盘的文件夹“04商品信息展示网页设计\0403”中创建网页0403.html。（1）定义网页0403.html通用CSS代码（2）定义网页0403.html中的表格的CSS代码（3）定义网页0403.html主体结构的CSS代码2．编写网页0403.html的HTML代码同步训练【任务4-4】设计凡客诚品网触屏版的品牌墙网页【任务描述】 编写HTML代码和CSS代码，设计图4-11所示凡客诚品网触屏版的品牌墙网页0404.html。图4-11凡客诚品网触屏版的品牌墙

网页0404.html的浏览效果 凡客诚品网触屏版的品牌墙网页0404.html的主体结构为上、中、下结构，如图4-11所示。 顶部内容包括首页链接图片和标题文字，中部内容包括多行商品品牌列表，底部内容包括多个导航超链接。 网页0404.html顶部结构使用<nav>标签实现，中部结构使用<section>标签实现，底部结构使用<footer>标签实现。【任务实施】1．网页0404.html的主体结构设计 在本地硬盘的文件夹“04商品信息展示网页设计\0404”中创建网页0404.html。（1）定义网页0404.html通用CSS代码（2）定义网页0404.html主体结构的CSS代码（3）编写网页0404.html主体结构的HTML代码2．网页0404.html的局部内容设计（1）网页0404.html的顶部内容设计（2）网页0404.html的中部内容设计（3）网页0404.html的底部内容设计拓展训练【任务4-5】设计苏宁易购触屏版的家用电器精选商品导航网页【任务描述】 编写HTML代码和CSS代码，设计图4-12所示苏宁易购触屏版的家用电器精选商品导航网页0405.html。图4-12苏宁易购触屏版的

家用电器精选商品导航网页

0405.html的浏览效果 苏宁易购触屏版的家用电器精选商品导航网页0405.html的主体结构为上、下结构，如图4-12所示。 上部内容包括返回链接图片、标题文字、用户登录链接图片、购物车链接图片和首页链接图片，下部内容包括多行家用电器精选商品图片列表。 网页0405.html上部结构使用