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

1、 案例概述案例概述 4.1 内容分析内容分析 4.2 HTML结构设计结构设计 4.3 原型设计原型设计 4.4 页面方案设计页面方案设计 4.5 布局设计布局设计 4.6 细节设计细节设计 4.7 CSS布局的优点布局的优点 4.8 交互效果设计交互效果设计 4.9 遵从遵从Web标准的设计流程标准的设计流程 4.10 4.1 4.1 案案 例例 概概 述述 本章将分析，策划，设计并制作一个完整的网站。本章将分析，策划，设计并制作一个完整的网站。 网站主题是制作名为网站主题是制作名为“Baby HousingBaby Housing”的儿童用的儿童用 品网上商店。通过对这个案例的讲解，描述其

2、中的技品网上商店。通过对这个案例的讲解，描述其中的技 术细节，介绍一套遵从术细节，介绍一套遵从WebWeb标准的网页设计流程。使标准的网页设计流程。使 用这样的工作流程，可以使设计流程更加规范。用这样的工作流程，可以使设计流程更加规范。 完成后的首页如下图所示。（完成后的首页如下图所示。（home.htmlhome.html） 4.1 4.1 案案 例例 概概 述述 图图4.1 完成后的首页完成后的首页 4.1 4.1 案案 例例 概概 述述 （1 1）页面竖直方向分为上中下）页面竖直方向分为上中下3 3个部分，上下部分背景会自动延伸；个部分，上下部分背景会自动延伸； （2 2）中间的内容区域

3、分为左右两列，左列为主要内容，右列由若干圆角）中间的内容区域分为左右两列，左列为主要内容，右列由若干圆角 框构成；框构成； （3 3）页面具有交互提示功能，例如页头的导航菜单具有鼠标指针经过时）页面具有交互提示功能，例如页头的导航菜单具有鼠标指针经过时 变色的效果变色的效果 （4 4）菜单项圆角背景会自动适应菜单项的宽度，例如）菜单项圆角背景会自动适应菜单项的宽度，例如“网站首页网站首页”比比 “信息信息”宽一些；宽一些； （5 5）“登录账号登录账号”和和“购物车购物车”两个按钮在鼠标指针经过时也会发生颜两个按钮在鼠标指针经过时也会发生颜 色变化；色变化； 4.2 4.2 内内 容容 分分

4、析析 （1 1）设计一个网页的第一步是明确这个网页的内容，如网页需要传达给访问者）设计一个网页的第一步是明确这个网页的内容，如网页需要传达给访问者 的信息，各种信息的重要性，各种信息的组织架构等；的信息，各种信息的重要性，各种信息的组织架构等； （2 2）要有明确的网站名称和标志；）要有明确的网站名称和标志； （3 3）要给访问者方便地了解这个网站所有者自身信息的途径，如关于我们，联）要给访问者方便地了解这个网站所有者自身信息的途径，如关于我们，联 系方式等链接；系方式等链接； （4 4）本网站目的是销售商品，因此必须要有清晰的产品分类结构，并有合理的）本网站目的是销售商品，因此必须要有清晰的

5、产品分类结构，并有合理的 导航栏；导航栏； （5 5）网上商店通常在首页上会把一些最受欢迎的和重点推荐的产品拿出来展示，）网上商店通常在首页上会把一些最受欢迎的和重点推荐的产品拿出来展示， 因为首页的访问量会明显比其他页面大得多，可以充当广告牌；如下图亚马因为首页的访问量会明显比其他页面大得多，可以充当广告牌；如下图亚马 逊首页，这个页面虽然内容很多，但简单来说就分为两大类：分类链接和推逊首页，这个页面虽然内容很多，但简单来说就分为两大类：分类链接和推 荐商品链接；荐商品链接； （6 6）对于一个网站，最重要的核心不是形式，而是内容，必须真正了解这个网）对于一个网站，最重要的核心不是形式，而是

6、内容，必须真正了解这个网 站的目的，否则无论网站多漂亮和花哨，都不能算是成功的作品；站的目的，否则无论网站多漂亮和花哨，都不能算是成功的作品； 4.2 4.2 内内 容容 分分 析析 图图13.4 卓越亚马逊网站的首页卓越亚马逊网站的首页 4.2 4.2 内内 容容 分分 析析 这一网站大致要展示的内容包括：这一网站大致要展示的内容包括： （1 1）标题）标题 （2 2）标志；）标志； （3 3）主导航栏）主导航栏 （4 4）自身介绍）自身介绍 （5 5）账号登录与购物车）账号登录与购物车 （6 6）今日推荐商品（）今日推荐商品（1 1种）种） （7 7）最受欢迎商品（）最受欢迎商品（1 1种

7、）种） （8 8）分类推荐商品（）分类推荐商品（3 3种）种） （9 9）搜索框）搜索框 （1010）类别菜单）类别菜单 （1111）特别提示信息）特别提示信息 （1212）版权信息）版权信息 4.3 HTML4.3 HTML结构设计结构设计 1.1.在理解了网站的基础上开始构建网站的内容结构。在理解了网站的基础上开始构建网站的内容结构。 2.2.首先完全不考虑首先完全不考虑CSSCSS，而是从网页的内容出发，根据上面列出的要点，而是从网页的内容出发，根据上面列出的要点， 通过通过HTMLHTML搭建出网页的内容结构；搭建出网页的内容结构； 3.3.下图所示是搭建的下图所示是搭建的HTMLHT

8、ML在没有使用任何在没有使用任何CSSCSS设置下，使用浏览器观察的设置下，使用浏览器观察的 效果。效果。P253P253 文件文件4-1.html4-1.html。 4.3 HTML4.3 HTML结构设计结构设计 图图4.5 HTML结构结构 4.3 HTML4.3 HTML结构设计结构设计 注意：注意： 任何一个页面，应该尽可能保证在不使用任何一个页面，应该尽可能保证在不使用CSSCSS的情况下，依然保的情况下，依然保 持良好的结构和可读性；持良好的结构和可读性； 这不仅对访问者很有帮助，而且有助于网站被这不仅对访问者很有帮助，而且有助于网站被GoogleGoogle，百度这，百度这 样

9、的搜索引擎了解和收录，这对于提升网站访问量是至关重要的；样的搜索引擎了解和收录，这对于提升网站访问量是至关重要的； 文件文件4-1.html4-1.html。 4.3 HTML4.3 HTML结构设计结构设计 1.1.代码比较简单，使用的都是最基本的代码比较简单，使用的都是最基本的HTMLHTML标签，这些标记都是具有一标签，这些标记都是具有一 定含义的定含义的HTMLHTML标记。标记。 2.2.代码中没有出现任何代码中没有出现任何标签，因为它不属于具有语义的标签，在最标签，因为它不属于具有语义的标签，在最 初搭建初搭建HTMLHTML的时候，要考虑语义相关的内容。的时候，要考虑语义相关的内

10、容。 3.3.标签在代码中多次出现，当有若干个项目并列时，它是一个很好标签在代码中多次出现，当有若干个项目并列时，它是一个很好 的选择。的选择。 4.4 4.4 原原 型型 设设 计计 1.1.在设计任何一个网页之前，都应该有一个构思的过程，对网站的完整在设计任何一个网页之前，都应该有一个构思的过程，对网站的完整 功能和内容进行全面的分析。功能和内容进行全面的分析。 2.2.如果可以，应该制作出线框图，这个过程专业上成为如果可以，应该制作出线框图，这个过程专业上成为“原型设计原型设计”。 3.3.例如，在具体制作页面之前，可以设计一个下图所示的网页原型。例如，在具体制作页面之前，可以设计一个下

11、图所示的网页原型。 4.4 4.4 原原 型型 设设 计计 图图4.6 网站首页原型线框图网站首页原型线框图 4.4 4.4 原原 型型 设设 计计 1.1.网页原型设计也是分步骤实现的。比如首先可以考虑，把一个页面从网页原型设计也是分步骤实现的。比如首先可以考虑，把一个页面从 上至下依次分为上至下依次分为3 3个部分：个部分： 4.4 4.4 原原 型型 设设 计计 2.2.然后再将每个部分逐步细化，比如页头部分，细化如图：然后再将每个部分逐步细化，比如页头部分，细化如图： 4.4 4.4 原原 型型 设设 计计 3.3.中间的内容部分分为左右两列，细化如图：中间的内容部分分为左右两列，细化

12、如图： 4.4 4.4 原原 型型 设设 计计 4.4.再进一步细化主要内容和侧边栏，细化如图：再进一步细化主要内容和侧边栏，细化如图： 4.4 4.4 原原 型型 设设 计计 5.5.页脚部分比较简单，不再赘述。将页脚部分比较简单，不再赘述。将3 3个部分组合在一起，原型线框图如下：个部分组合在一起，原型线框图如下： 4.4 4.4 原原 型型 设设 计计 6.6.绘制原型线框图软件：绘制原型线框图软件：Axure RP,Fireworks,Photoshop,Axure RP,Fireworks,Photoshop,画图，画图，wordword或者或者 其他都可以。其他都可以。 4.5 4

13、.5 页面方案设计页面方案设计 1.1.接下来根据原型线框图，在接下来根据原型线框图，在PhotoshopPhotoshop或者或者FireworksFireworks软件中设计真正的页软件中设计真正的页 面方案；面方案； 2.2.该步核心任务是美术设计，即美工的任务；该步核心任务是美术设计，即美工的任务； 4.5 4.5 页面方案设计页面方案设计 图图13.13 在在Fireworks软件中完成页面方案的设计软件中完成页面方案的设计 4.6 4.6 布布 局局 设设 计计 本节主要考虑把各种元素放到适当的位置，而暂本节主要考虑把各种元素放到适当的位置，而暂 时不考虑细节。时不考虑细节。 4.

14、6.1 4.6.1 整体样式设计整体样式设计 4.6.2 4.6.2 页头部分页头部分 4.6.3 4.6.3 内容部分内容部分 4.6.4 4.6.4 页脚部分页脚部分 4.6 .1 4.6 .1 整体样式设整体样式设 计计 1.1.首先对整个页面的共有属性进行一些设置，以保证这些内容在各个浏览器首先对整个页面的共有属性进行一些设置，以保证这些内容在各个浏览器 中有相同的表现。中有相同的表现。 文件文件13-02.html13-02.html。 4.6 .2 4.6 .2 页头部分页头部分 1.1.首先根据原型线框图中设定的各个部分，对首先根据原型线框图中设定的各个部分，对HTMLHTML进

15、行加工。红线标示部分进行加工。红线标示部分 是在原是在原HTMLHTML代码基础上新增加的内容：文件代码基础上新增加的内容：文件13-03.html13-03.html。 主要操作：主要操作： 1.1.将整个将整个headerheader部分放入一个部分放入一个divdiv中，为该中，为该divdiv设定设定idid名称为名称为“headerheader”。 2.2.将标志图像将标志图像( (茶杯茶杯) )放入一个放入一个divdiv中，取名为中，取名为“logologo”。 3.3.为主导航栏的设定为主导航栏的设定idid名称为名称为“mainNavigationmainNavigation

16、”。 4.4.为主导航栏的第一个项目设定类别名称为为主导航栏的第一个项目设定类别名称为“currentcurrent”。 5.5.为次导航栏的设定为次导航栏的设定idid名称为名称为“topNavigationtopNavigation”。 6.6.为登陆账号设定为登陆账号设定idid名称为名称为“accountBoxaccountBox”。 4.6 .2 4.6 .2 页头部分页头部分 4.6 .2 4.6 .2 页头部分页头部分 1.1.为了方便观察，临时给为了方便观察，临时给div,uldiv,ul和和h1h1增加一个红色的边框，这样可以确定各增加一个红色的边框，这样可以确定各 个元素是

17、否放置到了适当的位置：个元素是否放置到了适当的位置： 2.2.然后为整个页头部分设置样式，代码如下：文件然后为整个页头部分设置样式，代码如下：文件13-4.html13-4.html。 说明：说明： 将将positonpositon设置为设置为relativerelative，目的是使后面的，目的是使后面的 子元素使用绝对定位时，子元素使用绝对定位时， 以页头而不是浏览器窗口为定位基准；以页头而不是浏览器窗口为定位基准； 4.6 .2 4.6 .2 页头部分页头部分 1.1.设置设置h1h1标题，将标题，将marginmargin设置为设置为0 0，避免干扰其他元素的定位；，避免干扰其他元素的

18、定位； 2.2.将标志图片所在的将标志图片所在的divdiv设置为绝对定位，代码如下：文件设置为绝对定位，代码如下：文件13-5.html13-5.html。 4.6 .2 4.6 .2 页头部分页头部分 1.1.将主导航的列表设置为绝对定位，并定位到适当的位置；将主导航的列表设置为绝对定位，并定位到适当的位置； 2.2.将主导航的将主导航的ulul列表项目列表项目lili设置为左浮动，从而使它们水平排列，并使得项目之间设置为左浮动，从而使它们水平排列，并使得项目之间 有一定的间隔；有一定的间隔； 3.3.由于主导航的背景颜色比较深，因此把其中的链接文字颜色设置为白色，代码如由于主导航的背景颜

19、色比较深，因此把其中的链接文字颜色设置为白色，代码如 下：文件下：文件13-6.html13-6.html。 4.6 .2 4.6 .2 页头部分页头部分 1.1.将次导航的列表设置为绝对定位，右上角对齐到将次导航的列表设置为绝对定位，右上角对齐到headerheader的右上角；的右上角； 2.2.将主导航的将主导航的ulul列表项目列表项目lili设置为左浮动，从而使它们水平排列，并使得项设置为左浮动，从而使它们水平排列，并使得项 目之间有一定的间隔；目之间有一定的间隔； 文件文件13-7.html13-7.html。 4.6 .2 4.6 .2 页头部分页头部分 1.1.账号和购物车的设

20、置为绝对定位，并放到右侧适当位置；账号和购物车的设置为绝对定位，并放到右侧适当位置； 2.2.将账号的将账号的ulul列表项目列表项目lili也设置为左浮动，从而使得水平排列，并设置间隔；也设置为左浮动，从而使得水平排列，并设置间隔； 文件文件13-8.html13-8.html。 4.6 .3 4.6 .3 内容部分内容部分 1.1.在原型线框图中，内容部分分为左右两列首先对在原型线框图中，内容部分分为左右两列首先对HTMLHTML代码按照下图进行改代码按照下图进行改 造；文件造；文件13-9.html13-9.html。 4.6 .3 4.6 .3 内容部分内容部分 1.1.在原型线框图中

21、，内容部分分为左右两列首先对在原型线框图中，内容部分分为左右两列首先对HTMLHTML代码按照下图进行改代码按照下图进行改 造；文件造；文件13-9.html13-9.html。 4.6 .3 4.6 .3 内容部分内容部分 2.2.写出写出CSSCSS代码，实现固定宽度的两列布局：文件代码，实现固定宽度的两列布局：文件13-9.html13-9.html。 4.6 .4 4.6 .4 页页 脚脚 部分部分 1.1.为页脚增加一个为页脚增加一个divdiv，并将其设置类别名称为，并将其设置类别名称为footerfooter。 2.2.设置相应的设置相应的CSSCSS样式代码如下：样式代码如下：

22、 3.3.特别注意不要忘记设定特别注意不要忘记设定clearclear属性，以保证页脚内容在页面的最下端，不受属性，以保证页脚内容在页面的最下端，不受 中间部分中间部分floatfloat的影响；的影响；13-10.html13-10.html。 至此布局设计完成了，这是一个典型的至此布局设计完成了，这是一个典型的“1-2-11-2-1”布局。布局。 4.7 4.7 细细 节节 设设 计计 4.7.1 4.7.1 页头部分页头部分 1.h11.h1标题用图像替换标题用图像替换 2. 2.设置账号区的样式设置账号区的样式 3. 3.设置次导航栏的圆角效果设置次导航栏的圆角效果 4. 4.设置主导

23、航栏圆角效果设置主导航栏圆角效果 4.7.2 4.7.2 内容部分内容部分 4.7.3 4.7.3 左侧的主要内容列左侧的主要内容列 4.7.4 4.7.4 右边栏右边栏 4.7 .1 4.7 .1 页页 头头 部分部分 1.1.进行进行h1h1标题的图像替换。准备一副图片如下（标题的图像替换。准备一副图片如下（300px300px* *53px53px）：）： 2.2.修改修改h1h1的的CSSCSS样式代码如下样式代码如下: :left(left(背景图片靠对象左侧开始显示背景图片靠对象左侧开始显示, , bottom(bottom(背景图片靠对象紧贴底部开始显示背景图片靠对象紧贴底部开始

24、显示) )： 4.7 .1 4.7 .1 页页 头头 部分部分 3.3.可以看到图像出现在正确位置，但是原来的标题文字还在上面，为了隐藏可以看到图像出现在正确位置，但是原来的标题文字还在上面，为了隐藏 原来的文字，在原来的文字，在HTMLHTML中再套一层中再套一层spanspan，然后用，然后用displaydisplay属性将文字隐藏。属性将文字隐藏。 4-11.html4-11.html。 4.7 .1 4.7 .1 页页 头头 部分部分 1.1.设置账号区的样式。准备两副图片如下：设置账号区的样式。准备两副图片如下： 2.2.修改修改HTMLHTML，对两个链接分别设置了类别名称，同时

25、注意利用，对两个链接分别设置了类别名称，同时注意利用spanspan标记隐藏标记隐藏 文字。文字。 4-12.html 4-12.html。 13.7 .1 13.7 .1 页页 头头 部分部分 13.7 .1 13.7 .1 页页 头头 部分部分 1.1.设置次导航栏的圆角效果。准备图片如下：设置次导航栏的圆角效果。准备图片如下： 2.2.分别利用文字的分别利用文字的标签和标签和标签设置左右侧的背景图像。标签设置左右侧的背景图像。4-13.html4-13.html。 4.7 .1 4.7 .1 页页 头头 部分部分 1.1.设置主导航栏的圆角效果。原理和次导航栏相同，准备图片如下：设置主导

26、航栏的圆角效果。原理和次导航栏相同，准备图片如下： 2.2.分别利用文字的分别利用文字的标签和标签和标签设置左右侧的背景图像。和次导航标签设置左右侧的背景图像。和次导航 栏的区别是，这里只有表示当前页的菜单项有圆角背景，而其他菜单项则栏的区别是，这里只有表示当前页的菜单项有圆角背景，而其他菜单项则 没有背景图像，因此，背景设置在针对没有背景图像，因此，背景设置在针对“currentcurrent”类中。类中。4-14.html4-14.html。 4.7 .2 4.7 .2 内内 容容 部分部分 1.1.目前页头的视觉细节部分调整完毕，下面开始设计中间的内容区域。首先目前页头的视觉细节部分调整

27、完毕，下面开始设计中间的内容区域。首先 为图片设置边框样式，这样图片看起来更精致。为图片设置边框样式，这样图片看起来更精致。4-15.html4-15.html。 4.7 .3 4.7 .3 左侧的主要内容列左侧的主要内容列 1.1.左侧分为上，中，下三个部分：左侧分为上，中，下三个部分： 上面的上面的“今日推荐今日推荐”栏目，图像居左，文字居右；栏目，图像居左，文字居右； 中间的中间的“最受欢迎最受欢迎”栏目，图像居右，文字局左；栏目，图像居右，文字局左； 下面的下面的“分类推荐分类推荐”栏目，内容分为栏目，内容分为3 3列，每一列图像居上，文字居下；列，每一列图像居上，文字居下； 为上，中

28、，下三个部分分别套上为上，中，下三个部分分别套上divdiv，类别为，类别为recommendationrecommendation，如下，如下 图所示：图所示： 4.7 .3 4.7 .3 左侧的主要内容列左侧的主要内容列 1.1.左侧分为上，中，下三个部分：左侧分为上，中，下三个部分： 上面的上面的“今日推荐今日推荐”栏目，再增加类别栏目，再增加类别img-leftimg-left； 中间的中间的“最受欢迎最受欢迎”栏目，再增加类别栏目，再增加类别img-rightimg-right； 下面的下面的“分类推荐分类推荐”栏目，内容分为栏目，内容分为3 3列，增加类别列，增加类别multiCo

29、lumnmultiColumn；文件见；文件见4-16.html。 4.7 .3 4.7 .3 左侧的主要内容列左侧的主要内容列 2.2.可以看到，可以看到，3 3种栏目分别增加了一个类别名称：种栏目分别增加了一个类别名称：img-left,img-img-left,img- right,multiColumnright,multiColumn，下面分别设置样式：，下面分别设置样式： 4.7 .3 4.7 .3 左侧的主要内容列左侧的主要内容列 3.3.左列主要内容设置为左浮动，为了避免下面的左列主要内容设置为左浮动，为了避免下面的divdiv受到上面受到上面divdiv的浮动影响，的浮动影响

30、， 添加代码如下：添加代码如下： 4.4.接下来对左侧内容的接下来对左侧内容的h2h2标题做一些设置，使其更精致：标题做一些设置，使其更精致： 代码主要设置了字体、颜色、增加了下划线以及右端的一个装饰花图像。代码主要设置了字体、颜色、增加了下划线以及右端的一个装饰花图像。 4.7 .3 4.7 .3 左侧的主要内容列左侧的主要内容列 5. 5. “分类推荐分类推荐”栏目中的文字和图像之间的距离微调一下。栏目中的文字和图像之间的距离微调一下。 至此，左侧列的设置完成。接下来设置右边栏。至此，左侧列的设置完成。接下来设置右边栏。 4.7 .4 4.7 .4 右边栏右边栏 1.1.实现圆角框。实现圆

31、角框。13-17.html13-17.html。准备两幅图片：。准备两幅图片： 4.7 .4 4.7 .4 右边栏右边栏 2.2.为了使圆角框能够灵活适应内容的长度，实现自动伸缩。为每一个部分增为了使圆角框能够灵活适应内容的长度，实现自动伸缩。为每一个部分增 加一层加一层标签。标签。 4.7 .4 4.7 .4 右边栏右边栏 3.3.设置设置CSSCSS代码如下，以实现所有代码如下，以实现所有divdiv的圆角效果：的圆角效果： 4.7 .4 4.7 .4 右边栏右边栏 4.4.对圆角框中的对圆角框中的h2h2标题进行统一设置：标题进行统一设置： 4.7 .4 4.7 .4 右边栏右边栏 5.

32、5.对搜索框进行设置，使文本输入框和按钮都居中对齐。对搜索框进行设置，使文本输入框和按钮都居中对齐。 4.7 .4 4.7 .4 右边栏右边栏 6.6.设置分类目录的列表样式：设置分类目录的列表样式： 整个页面的视觉设计完毕，页脚部分比较简单，不再赘述。整个页面的视觉设计完毕，页脚部分比较简单，不再赘述。 4.8 CSS4.8 CSS布局的优点布局的优点 使用使用CSSCSS进行布局的最大优点是非常灵活，进行布局的最大优点是非常灵活， 可以方便地扩展和调整。可以方便地扩展和调整。 例如，当网站随着业务的发展，需要在页面例如，当网站随着业务的发展，需要在页面 中增加一些内容，那么不需要修改中增加

33、一些内容，那么不需要修改CSSCSS样式，只需样式，只需 要简单地在要简单地在HTMLHTML中增加相应的模块就可以了。中增加相应的模块就可以了。 图图4.174.17所示的就是对页面扩展了内容以后的所示的就是对页面扩展了内容以后的 效果，在效果，在“主要内容主要内容”部分增加了部分增加了“特色促销特色促销” 和和“优中选优优中选优”两个模块，在右侧栏中增加了两个模块，在右侧栏中增加了 “送货服务送货服务”和和“热门信息热门信息”两个模块。两个模块。 文件文件4-18.html4-18.html。 在前面的页面基础上，增加这些内容很容易。在前面的页面基础上，增加这些内容很容易。 图图4.17

34、方便灵活地增加网页中的内容方便灵活地增加网页中的内容 不但如此，设计得足够合理的页面可以非常灵活地修改样式，例不但如此，设计得足够合理的页面可以非常灵活地修改样式，例 如，只需要将两列布局的浮动方向交换，就可以立即得到一个新的页如，只需要将两列布局的浮动方向交换，就可以立即得到一个新的页 面，如图面，如图4.184.18所示，可以看到左右两列交换了位置。所示，可以看到左右两列交换了位置。4-19.html4-19.html。 原来的代码：原来的代码： 修改后的代码：修改后的代码： 图图4.18 方便地调换左右两列的位置方便地调换左右两列的位置 4.9 4.9 交互效果设计交互效果设计 图图4.

35、19 设置不同位置的鼠标指针经过效果设置不同位置的鼠标指针经过效果 接下来进行交互性动态设计，主要实现鼠标指针经过时的效果，涉及接下来进行交互性动态设计，主要实现鼠标指针经过时的效果，涉及 到的网页元素包括：到的网页元素包括： （1 1）次导航栏）次导航栏 （2 2）主导航栏）主导航栏 （3 3）账号区）账号区 （4 4）图像边框）图像边框 （5 5）产品分类）产品分类 4.9 4.9 交互效果设计交互效果设计 1.1.次导航栏次导航栏 4-20.html4-20.html。 为次导航栏增加鼠标经过效果，首先准备一个和原背景图像的形状相同，只是把白色改为次导航栏增加鼠标经过效果，首先准备一个和

36、原背景图像的形状相同，只是把白色改 为黄色的新图像，如图：为黄色的新图像，如图： 然后为链接元素增加然后为链接元素增加“:hover:hover”的伪类别，在其中更换背景图像，适当修改文字颜色；的伪类别，在其中更换背景图像，适当修改文字颜色； 注意也要更换注意也要更换“a:hovera:hover”包含的包含的spanspan元素的背景图像：元素的背景图像： 4.9 4.9 交互效果设计交互效果设计 2.2.主导航栏主导航栏 4-21.html4-21.html。 主导航栏的做法和次导航栏一样，首先准备一个和原背景图像的形状相同，只是修改了主导航栏的做法和次导航栏一样，首先准备一个和原背景图像

37、的形状相同，只是修改了 颜色的新图像，如图：颜色的新图像，如图： 然后为链接元素增加然后为链接元素增加“:hover:hover”的伪类别，在其中更换背景图像；的伪类别，在其中更换背景图像； 注意也要更换注意也要更换“a:hovera:hover”包含的包含的spanspan元素的背景图像，此外适当修改文字的颜色：元素的背景图像，此外适当修改文字的颜色： 4.9 4.9 交互效果设计交互效果设计 3.3.账号区账号区 4-22.html4-22.html。 （1 1）“登录账号登录账号”和和“购物车购物车”图像的鼠标经过效果，实际上可以用更换背景图像技术；图像的鼠标经过效果，实际上可以用更换背景图像技术； （2 2）但当访问者浏览页面时，各个图片下载有先有后，如果网络速度慢，当鼠标指针经过某）但当访问者浏览页面时，各个图片下载有先有后，如果网络速度慢，当鼠标指针经过某 个链接的时候，会出现短暂的停顿，等图像下载完毕后才会出现，影响访问者体验；个链接的时候，会出现短暂的停顿，等图像下载完毕后才会出现，影响访问者体验； （3 3）改进方案：使用下面的图片，把两个图像合并在一起，然后当鼠标指针经过时，通过对）改进方案：使用下面的图片，把两个图像合并在一起，然后当鼠标指针经过时，通过对 背景图像的位置的改变实现最终的效