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

Web标准化技术胡雪梅综合案例—儿童用品网上商店Web标准化技术胡雪梅本课将分析、策划、设计、制作一个完整的网页，通过对案例的讲解，介绍一套遵从Web标准的设计流程。Web标准化技术胡雪梅案例概述1内容分析2HTML结构设计3原型设计4页面方案设计5Web标准化技术胡雪梅布局设计6细节设计7CSS布局的优点8交互效果设计9遵从Web标准的设计流程10Web标准化技术胡雪梅1案例概述完成后的首页网页的内容包括：•标题•Logo•主导航栏•次导航栏•帐号登录和购物车•今日推荐•最受欢迎•分类推荐•搜索栏•分类导航•特别提示•版权信息Web标准化技术胡雪梅2内容分析卓越亚马逊网站的首页Web标准化技术胡雪梅要有明确的网站名称和标志要给访问者了解和联系这个网站所有者信息的途径网站的目的是销售商品，必须要有清晰的产品导航展示最受欢迎和重点推荐的产品方便用户查找商品的站内搜索版权信息Web标准化技术胡雪梅3原型设计下面要考虑的是如何合理地在页面上放置这些内容。在设计任何网页之前都应该有个构思的过程，最好制作出线框图，这个过程叫“原型设计”。Web标准化技术胡雪梅原型设计也是分步骤实现的，首先考虑把网页分成上中下3部分。Web标准化技术胡雪梅再将每个部分逐步细化。网页头部细化：Web标准化技术胡雪梅中间内容细化：Web标准化技术胡雪梅网站首页原型线框图Web标准化技术胡雪梅确定布局的细分程度原则：细分到可以用某一特定标记表示。Web标准化技术胡雪梅4页面方案设计这一步的核心是美工设计，就是要让页面更美观，同时准备网页的图片素材。在Fireworks或PS软件中完成页面方案的设计Web标准化技术胡雪梅5HTML结构设计现在完全不要管CSS，通过HTML搭建出网页的内容结构。尽可能保证在不使用CSS的情况下，页面依然保持良好的结构和可读性，这不但便于阅读和修改，还有助于被搜索引擎了解和收录。Web标准化技术胡雪梅13.3HTML结构设计标题标志主导航帐号今日推荐最受欢迎分类推荐搜索框产品分类特别提示版权信息次导航网页的内容包括：•标题•Logo•主导航栏•次导航栏•帐号登录和购物车•今日推荐•最受欢迎•分类推荐•搜索栏•分类导航•特别提示•版权信息Web标准化技术胡雪梅实例home-01将网页的标题分级，分别用h1、h2、h3…标记，层次清晰。当有若干项目并列时ul是很好的选择，它可以使页面的逻辑关系清晰。代码中没有出现div标记，因为div是不具有语义的标记，在最初搭建HTML时只考虑语义相关的内容。Web标准化技术胡雪梅6布局设计这一步的任务是把内容放到适当的位置，暂时不涉及非常细节的因素。6.1整体样式设计首先对整个页面的共有属性进行设置。实例home-02Web标准化技术胡雪梅body{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;}Web标准化技术胡雪梅6.2页头部分根据原型线框图设定的各个部分，对HTML进行加工。实例home-02将整个头部放入一个div中，id名为header；将标志图像放入一个div中，id名为logo；为各个导航栏设定id名称。Web标准化技术胡雪梅divid=headerh1BabyHousing/h1divid=logoimgsrc=images/logo.gif//divulid=mainNavigationliclass=currentahref=#strong网站首页/strong/a/liliahref=#strong产品介绍/strong/a/liliahref=#strong信息/strong/a/liliahref=#strong畅销排行榜/strong/a/li/ululid=topNavigationliahref=#span关于我们/span/a/liliahref=#span联系方式/span/a/liliahref=#span意见建议/span/a/li/ululid=accountBoxliahref=#class=loginspan登录帐号/span/a/liliahref=#class=cartspan购物车/span/a/li/ul/divWeb标准化技术胡雪梅设置相应的CSS样式为了方便观察，先临时给div、ul、h1增加一个边框，以确定各个元素是否放到了正确的位置。#headerdiv,#headerul,#headerh1{border:1pxredsolid;}Web标准化技术胡雪梅设置整个页头的样式：#header{position:relative;width:760px;height:138px;margin:0auto;font:14px/1.6arial;}将header设置为相对定位，目的是使子元素使用绝对定位时将其作为包含块。Web标准化技术胡雪梅将logo设置为绝对定位：#header#logo{position:absolute;top:10px;left:0px;}Web标准化技术胡雪梅将次导航的列表设置为绝对定位，右上角对齐到header的右上角。#header#topNavigation{position:absolute;top:0;right:0;}将次导航的列表项目设置为左浮动，使他们水平排列。#header#topNavigationli{float:left;padding:02px;}Web标准化技术胡雪梅同理，将主导航的列表设置为绝对定位，放置到合适的位置。#header#mainNavigation{position:absolute;color:white;font-weight:bold;top:88px;left:0;}#header#mainNavigationli{float:left;padding:5px;}Web标准化技术胡雪梅将登录账号的列表设置为绝对定位，放置到合适的位置。#header#accountBox{position:absolute;top:44px;right:10px;}#header#accountBoxli{float:left;width:93px;height:110px;text-align:center;}Web标准化技术胡雪梅效果如图。虽然还需要进一步细化，但从布局的角度已经实现了原型设计的要求。Web标准化技术胡雪梅6.3内容部分根据原型线框图设定的各个部分，对HTML进行加工。实例home-02Web标准化技术胡雪梅divid=contentdivid=mainContentdivclass=recommendationh2今日推荐/h2……/divdivclass=recommendationh2最受欢迎/h2……/divdivclass=recommendationh2分类推荐/h2……/div/divdivid=sideBardivclass=searchBoxform……/form/divdivclass=menuBoxh2产品分类/h2……/divdivclass=extraBoxh2特别提示/h2……/div/div/divWeb标准化技术胡雪梅用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;}Web标准化技术胡雪梅6.4页脚部分为页脚增加一个div：divid=footerpclass=p1ahref=#网站首页/a|ahref=#产品介绍/a|ahref=#信息/a|ahref=#“畅销榜/a/ppclass=p2版权属于前沿科技artech.cn/p/divWeb标准化技术胡雪梅设置CSS：#footer{clear:both;height:53px;margin:0;background:transparenturl('images/footer-background.png')repeat-x;text-indent:0px;text-align:center;}Web标准化技术胡雪梅清除浮动问题另一种解决方法（较常用，经典）：当一div盒子里有浮动盒子div时，在该div盒子里最后添加一空div盒子，将该空div盒子的样式只设置一条代码：clear:both;Html:divclass=“cleardiv”/divCSS:.cleardiv{clear:both;}Web标准化技术胡雪梅7细节设计7.1页头部分1.网页标题在PS中切出标题图像，如图，用其替换h1标题。为h1标题设置CSS：#headerh1{background:transparenturl('images/title.png')no-repeatbottomleft;height:63px;margin:0;margin-left:40px;}实例home-03Web标准化技术胡雪梅隐藏原来的标题。在h1文字两边套上标记span:h1spanBabyHousing/span/h1设置CSS样式：#headerh1span{display:none;}Web标准化技术胡雪梅2.登录账号在PS中切出“登录账号”和“购物车”图像，如图：对相应的HTML作一些修改：ulid=accountBoxliahref=“#”class=“login”span登录帐号/span/a/liliahref=#class=cartspan购物车/span/a/li/ul为a设置类别的目的是为了分别设置样式，加span的目的是为了隐藏文字。Web标准化技术胡雪梅#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;}Web标准化技术胡雪梅3.顶部导航栏为了实现适应不同宽度的圆角效果，可以使用滑动门技术。为文字增加span标记，以便使用a和span分别设置左右两侧的背景图像。对相应的HTML作修改：ulid=topNavigationliahref=#span关于我们/span/a/liliahref=#span联系方式/s