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

综合案例 儿童用品网上商店 Web标准化技术 本课将分析 策划 设计 制作一个完整的网页 通过对案例的讲解 介绍一套遵从Web标准的设计流程 1案例概述 完成后的首页 网页的内容包括 标题Logo主导航栏次导航栏帐号登录和购物车今日推荐最受欢迎分类推荐搜索栏分类导航特别提示版权信息 2内容分析 卓越亚马逊网站的首页 要有明确的网站名称和标志要给访问者了解和联系这个网站所有者信息的途径网站的目的是销售商品 必须要有清晰的产品导航展示最受欢迎和重点推荐的产品方便用户查找商品的站内搜索版权信息 3原型设计 下面要考虑的是如何合理地在页面上放置这些内容 在设计任何网页之前都应该有个构思的过程 最好制作出线框图 这个过程叫 原型设计 原型设计也是分步骤实现的 首先考虑把网页分成上中下3部分 再将每个部分逐步细化 网页头部细化 中间内容细化 网站首页原型线框图 确定布局的细分程度原则 细分到可以用某一特定标记表示 4页面方案设计这一步的核心是美工设计 就是要让页面更美观 同时准备网页的图片素材 在Fireworks或PS软件中完成页面方案的设计 5HTML结构设计 现在完全不要管CSS 通过HTML搭建出网页的内容结构 尽可能保证在不使用CSS的情况下 页面依然保持良好的结构和可读性 这不但便于阅读和修改 还有助于被搜索引擎了解和收录 13 3HTML结构设计 网页的内容包括 标题Logo主导航栏次导航栏帐号登录和购物车今日推荐最受欢迎分类推荐搜索栏分类导航特别提示版权信息 实例home 01将网页的标题分级 分别用h1 h2 h3 标记 层次清晰 当有若干项目并列时是很好的选择 它可以使页面的逻辑关系清晰 代码中没有出现标记 因为是不具有语义的标记 在最初搭建HTML时只考虑语义相关的内容 6布局设计 这一步的任务是把内容放到适当的位置 暂时不涉及非常细节的因素 6 1整体样式设计首先对整个页面的共有属性进行设置 实例home 02 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 6 2页头部分 根据原型线框图设定的各个部分 对HTML进行加工 实例home 02将整个头部放入一个div中 id名为header 将标志图像放入一个div中 id名为logo 为各个导航栏设定id名称 BabyHousing网站首页产品介绍信息畅销排行榜关于我们联系方式意见建议登录帐号购物车 设置相应的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 今日推荐 最受欢迎 分类推荐 产品分类 特别提示 用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 网站首页 产品介绍 信息 畅销榜版权属于前沿科技 设置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 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 BabyHousing设置CSS样式 headerh1span display none 2 登录账号在PS中切出 登录账号 和 购物车 图像 如图 对相应的HTML作一些修改 登录帐号购物车为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作修改 关于我们联系方式意见建议 准备好背景图 设置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作修改 网站首页产品介绍信息畅销排行榜用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作修改 今日推荐 最受欢迎 分类推荐 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作修改 产品分类 特别提示 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 images main navi hover gif no repeatright color 3D81B4 9 3账号区 介绍另一种方法 将背景图制作成如图所示的上下两部分 下半部的图像颜色比上半部稍浅 平常状态下显示上半部 鼠标经过时显示下半部 header accountBox login hover background transparenturl images accoun