综合案例-儿童用品网上商店

综合案例—儿童用品网上商店Web标准化技术本课将分析、策划、设计、制作一个完整的网页，通过对案例的讲解，介绍一套遵从Web标准的设计流程。

案例概述1内容分析2HTML结构设计3原型设计4页面方案设计5

布局设计6细节设计7CSS布局的优点8交互效果设计9遵从Web标准的设计流程101案例概述

完成后的首页网页的内容包括：标题Logo主导航栏次导航栏帐号登录和购物车今日推荐最受欢迎分类推荐搜索栏分类导航特别提示版权信息2内容分析

卓越亚马逊网站的首页要有明确的网站名称和标志要给访问者了解和联系这个网站所有者信息的途径网站的目的是销售商品，必须要有清晰的产品导航展示最受欢迎和重点推荐的产品方便用户查找商品的站内搜索版权信息3原型设计

下面要考虑的是如何合理地在页面上放置这些内容。在设计任何网页之前都应该有个构思的过程，最好制作出线框图，这个过程叫“原型设计”。原型设计也是分步骤实现的，首先考虑把网页分成上中下3部分。再将每个部分逐步细化。网页头部细化：中间内容细化：网站首页原型线框图确定布局的细分程度原则：细分到可以用某一特定标记表示。4页面方案设计

这一步的核心是美工设计，就是要让页面更美观，同时准备网页的图片素材。在Fireworks或PS软件中完成页面方案的设计5HTML结构设计

现在完全不要管CSS，通过HTML搭建出网页的内容结构。尽可能保证在不使用CSS的情况下，页面依然保持良好的结构和可读性，这不但便于阅读和修改，还有助于被搜索引擎了解和收录。13.3HTML结构设计

标题标志主导航帐号今日推荐最受欢迎分类推荐搜索框产品分类特别提示版权信息次导航网页的内容包括：标题Logo主导航栏次导航栏帐号登录和购物车今日推荐最受欢迎分类推荐搜索栏分类导航特别提示版权信息实例home-01将网页的标题分级，分别用h1、h2、h3…标记，层次清晰。当有若干项目并列时<ul>是很好的选择，它可以使页面的逻辑关系清晰。代码中没有出现<div>标记，因为<div>是不具有语义的标记，在最初搭建HTML时只考虑语义相关的内容。6布局设计

这一步的任务是把内容放到适当的位置，暂时不涉及非常细节的因素。6.1整体样式设计首先对整个页面的共有属性进行设置。

实例home-02body{ margin:0; padding:0; background:whiteurl('images/header-background.png')repeat-x; font:12px/1.6arial;/*字大小12px行高1.6em字体arial*/ }ul{ margin:0; padding:0; list-style:none;}a{ text-decoration:none; color:#3D81B4;}p{ text-indent:2em;}6.2页头部分根据原型线框图设定的各个部分，对HTML进行加工。实例home-02将整个头部放入一个div中，id名为header；将标志图像放入一个div中，id名为logo；为各个导航栏设定id名称。<divid="header"><h1>BabyHousing</h1><divid="logo"><imgsrc="images/logo.gif"/></div><ulid="mainNavigation"> <liclass="current"><ahref="#"><strong>网站首页</strong></a></li> <li><ahref="#"><strong>产品介绍</strong></a></li> <li><ahref="#"><strong>信息</strong></a></li> <li><ahref="#"><strong>畅销排行榜</strong></a></li></ul><ulid="topNavigation"> <li><ahref="#"><span>关于我们</span></a></li> <li><ahref="#"><span>联系方式</span></a></li> <li><ahref="#"><span>意见建议</span></a></li></ul><ulid="accountBox"> <li><ahref="#"class="login"><span>登录帐号</span></a></li> <li><ahref="#"class="cart"><span>购物车</span></a></li></ul></div>设置相应的CSS样式为了方便观察，先临时给div、ul、h1增加一个边框，以确定各个元素是否放到了正确的位置。#headerdiv,#headerul,#headerh1{border:1pxredsolid;}设置整个页头的样式：#header{ position:relative; width:760px; height:138px; margin:0auto; font:14px/1.6arial;}将header设置为相对定位，目的是使子元素使用绝对定位时将其作为包含块。将logo设置为绝对定位：#header#logo{ position:absolute; top:10px; left:0px;}将次导航的列表设置为绝对定位，右上角对齐到header的右上角。#header#topNavigation{ position:absolute; top:0; right:0;}将次导航的列表项目设置为左浮动，使他们水平排列。#header#topNavigationli{ float:left; padding:02px;}同理，将主导航的列表设置为绝对定位，放置到合适的位置。#header#mainNavigation{ position:absolute; color:white; font-weight:bold; top:88px; left:0;}#header#mainNavigationli{ float:left; padding:5px;}将登录账号的列表设置为绝对定位，放置到合适的位置。#header#accountBox{ position:absolute; top:44px; right:10px;}#header#accountBoxli{ float:left; width:93px; height:110px; text-align:center;}效果如图。虽然还需要进一步细化，但从布局的角度已经实现了原型设计的要求。6.3内容部分根据原型线框图设定的各个部分，对HTML进行加工。实例home-02<divid="content"> <divid="mainContent"> <divclass="recommendation"> <h2>今日推荐</h2> …… </div> <divclass="recommendation"> <h2>最受欢迎</h2> …… </div> <divclass="recommendation"> <h2>分类推荐</h2> …… </div> </div> <divid="sideBar"> <divclass="searchBox"> <form>……</form> </div> <divclass="menuBox"> <h2>产品分类</h2> …… </div> <divclass="extraBox"> <h2>特别提示</h2> …… </div> </div></div>用CSS实现两列布局：#contentdiv{ border:1pxgreensolid;}#content{ width:760px; margin:0auto;}#mainContent{ float:left; width:540px;}#sideBar{ float:right; width:186px; margin-right:10px; margin-top:20px;}6.4页脚部分为页脚增加一个div：<divid="footer"> <pclass="p1"><ahref="#">网站首页</a>|<ahref="#">产品介绍</a>|<ahref="#">信息</a>|<ahref="#“>畅销榜</a></p> <pclass="p2">版权属于前沿科技</p></div>设置CSS：#footer{ clear:both; height:53px; margin:0; background:transparenturl('images/footer-background.png')repeat-x; text-indent:0px; text-align:center;}清除浮动问题另一种解决方法（较常用，经典）：当一div盒子里有浮动盒子div时，在该div盒子里最后添加一空div盒子，将该空div盒子的样式只设置一条代码：clear:both;Html:<divclass=“cleardiv”></div>CSS:.cleardiv{clear:both;}7细节设计

7.1页头部分1.网页标题在PS中切出标题图像，如图，用其替换h1标题。为h1标题设置CSS：#headerh1{ background:transparenturl('images/title.png')no-repeatbottomleft; height:63px; margin:0; margin-left:40px;}实例home-03隐藏原来的标题。在h1文字两边套上标记span:<h1><span>BabyHousing</span></h1>设置CSS样式：

#headerh1span{ display:none;}2.登录账号在PS中切出“登录账号”和“购物车”图像，如图：对相应的HTML作一些修改：<ulid="accountBox"><li><ahref=“#”class=“login”><span>登录帐号</span></a></li><li><ahref="#"class="cart"><span>购物车</span></a></li></ul>

为a设置类别的目的是为了分别设置样式，加span的目的是为了隐藏文字。#header#accountBoxspan{ display:none;}#header#accountBoxa{ display:block; height:110px; width:93px;}#header#accountBox.login{ background:transparenturl('images/account-left.jpg')no-repeat;}#header#accountBox.cart{ background:transparenturl('images/account-right.jpg')no-repeat;}3.顶部导航栏为了实现适应不同宽度的圆角效果，可以使用滑动门技术。为文字增加span标记，以便使用a和span分别设置左右两侧的背景图像。对相应的HTML作修改：

<ulid="topNavigation"> <li><ahref="#"><span>关于我们</span></a></li> <li><ahref="#"><span>联系方式</span></a></li> <li><ahref="#"><span>意见建议</span></a></li></ul>

准备好背景图，设置CSS样式：#header#topNavigationa{ display:block; line-height:25px; padding:00014px; background:transparenturl('images/top-navi-white.gif')no-repeat;}#header#topNavigationaspan{ display:block; padding:014px00; background:transparenturl('images/top-navi-white.gif')no-repeatright;}4.主导航栏对相应的HTML作修改：<ulid="mainNavigation"> <liclass="current"><ahref="#"><strong>网站首页</strong></a></li> <li><ahref="#"><strong>产品介绍</strong></a></li> <li><ahref="#"><strong>信息</strong></a></li> <li><ahref="#"><strong>畅销排行榜</strong></a></li></ul>用strong代替span，突出重点。这里与顶部导航不同的是当鼠标经过时显示圆角框。#header#mainNavigationa{ display:block; line-height:25px; padding:00014px; color:white;}#header#mainNavigationastrong{ display:block; padding:014px00;}#header#mainNavigation.currenta{ color:white; background:transparenturl('images/main-navi.gif')no-repeat;}#header#mainNavigation.currentastrong{ color:white; background:transparenturl('images/main-navi.gif')no-repeatright;}5.删除红色线框。7.2内容部分

为所有图片设置边框样式：#contentaimg{ padding:5px; background:#BDD6E8; border:1px#DEAF50solid;}左侧分为上、中、下3个部分，特点：上面的“今日推荐”栏目：图像居左、文字居右；中间的“最受欢迎”栏目：图像居右、文字居左；下面的“分类推荐”栏目分为3列。7.3左侧内容列

对相应的HTML作修改：<divid="mainContent"> <divid="img-left"> <h2>今日推荐</h2> …… </div> <divid="img-right"> <h2>最受欢迎</h2> …… </div> <divid="multiColumn"> <h2>分类推荐</h2> …… </div></div>#img-leftimg{ float:left; margin-right:10px;}#img-rightimg{ float:right; margin-left:10px;}#multiColumnli{ float:left; width:160px; margin:010px; text-align:center;}对标题做设置：#mainContenth2{ padding-top:20px; color:#069; border-bottom:1px#DEAF50solid; font:bold22px/24px楷体_GB2312; background:transparenturl('images/rose.png')no-repeatbottomright;}将图像与下面的文字间距调整下：#multiColumnlip{ margin:0010px0;}7.4右边栏

右边是3个圆角框，对相应的HTML作修改：<divid="sideBar"> <divid="searchBox"><span> …… </span> </div> <divid="menuBox"> <span> <h2>产品分类</h2> ……</span> </div> <divid="extraBox"> <span> <h2>特别提示</h2> …… </span> </div></div>#sideBardiv{ margin-top:20px; background:transparenturl('images/sidebox-bottom.png')no-repeatbottom; width:100%;}#sideBardivspan{ display:block;background:transparenturl('images/sidebox-top.png')no-repeat; padding:10px;}#sideBar#searchBox{ text-align:center;}#sideBarinput{ margin:5px0;}#sideBarh2{ margin:0px; font:bold22px/24px楷体_GB2312; color:#069; text-align:center;}#sideBar#menuBoxli{ font:14px宋体; height:25px; line-height:25px; border-top:1pxwhitesolid;}#sideBar#menuBoxlia{ display:block; padding-left:35px; background:transparenturl('images/menu-bullet.png')no-repeat10pxcenter; height:25px;}8CSS布局的优点

使用CSS进行布局的最大优点是非常灵活，可以方便地扩展和调整。例如，当网站随着业务的发展，需要在页面中增加一些内容，那么不需要修改CSS样式，只需要简单地在HTML中增加相应的模块就可以了。如图所示就是对页面扩展了内容以后的效果，在“主要内容”部分增加了“特色促销”和“优中选优”两个模块，在右侧栏中增加了“送货服务”和“热门信息”两个模块。

方便灵活地增加网页中的内容

设计合理的页面可以非常灵活地修改样式，例如，只需要将两列布局的浮动方向交换，就可以立即得到一个新的页面，如图所示，可以看到左右两列交换了位置。9交互效果设计

设置不同位置的鼠标指针经过效果9.1顶部导航#header#topNavigationa:hover{ color:white; background:transparenturl('images/top-navi-hover.gif')no-repeat;}#header#topNavigationa:hoverspan{ background:transparenturl('images/top-navi-hover.gif')no-repeatright;}9.2主导航栏#header#mainNavigationa:hover{ background:transparenturl('images/main-navi-hover.gif')no-repeat;}#header#mainNavigationa:hoverstrong{ background:transparenturl