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

1、第第1313章章 综合案例综合案例儿童用品网上商店儿童用品网上商店 本章简介：本章简介： 从本章开始介绍从本章开始介绍3 3个综合案例，分别演示个综合案例，分别演示一个网页是如何从零开始，逐步搭建一个网页是如何从零开始，逐步搭建出来的。其中第一个案例将非常详细出来的。其中第一个案例将非常详细地进行介绍，后两个案例将选择重要地进行介绍，后两个案例将选择重要内容讲解。内容讲解。本章将分析、策划、设计并制作一个完整本章将分析、策划、设计并制作一个完整的案例。这个案例是为一个假想的名的案例。这个案例是为一个假想的名为为“ASAMOM”ASAMOM”的儿童用品网上商店制的儿童用品网上商店制作一个网站。通

2、过对这个案例的讲解，作一个网站。通过对这个案例的讲解，描述其中的技术细节，介绍一套遵从描述其中的技术细节，介绍一套遵从WebWeb标准的网页设计流程。使用这样的标准的网页设计流程。使用这样的工作流程，可以使设计流程更加规范。工作流程，可以使设计流程更加规范。 案例概述案例概述13.1内容分析内容分析13.2HTML结构设计结构设计13.3原型设计原型设计13.4页面方案设计页面方案设计13.5 布局设计布局设计13.6细节设计细节设计13.7CSS布局的优点布局的优点13.8交互效果设计交互效果设计13.9遵从遵从Web标准的设计流程标准的设计流程13.1013.1案 例 概 述完成后的首页效

3、果。完成后的首页效果。完成后的首页13.2内 容 分 析设计一个网页的第一步是明确这个网页的内容，如网页需要传设计一个网页的第一步是明确这个网页的内容，如网页需要传达给访问者的信息、各种信息的重要性、各种信息的组织架构等。达给访问者的信息、各种信息的重要性、各种信息的组织架构等。以以“ASAMOMASAMOM儿童用品商店儿童用品商店”的首页为例进行一些说明。的首页为例进行一些说明。京东商城网站的首页13.3 HTML结构设计在理解了网站的在理解了网站的基础上开始构建网站基础上开始构建网站的内容结构。现在完的内容结构。现在完全不要管全不要管CSSCSS，而是完，而是完全从网页的内容出发，全从网页

4、的内容出发，根据上面列出的要点，根据上面列出的要点，通过通过HTMLHTML搭建出网页搭建出网页的内容结构。的内容结构。HTML结构13.4原 型 设 计首先，在设计任何一首先，在设计任何一个网页之前，都应该先有个网页之前，都应该先有一个构思的过程，对网站一个构思的过程，对网站的完整功能和内容进行全的完整功能和内容进行全面的分析。如果有条件，面的分析。如果有条件，应该制作出线框图，这个应该制作出线框图，这个过程专业上称为过程专业上称为“原型设原型设计计” ” 。HTML结构13.5页面方案设计接下来根据原型线框接下来根据原型线框图，在图，在PhotoshopPhotoshop或者或者Firew

5、orksFireworks软件中设计真软件中设计真正的页面方案。具体使用正的页面方案。具体使用哪种软件，可以根据个人哪种软件，可以根据个人的习惯，对于网页设计来的习惯，对于网页设计来说，推荐使用说，推荐使用FireworksFireworks，它有矢量绘制功能。它有矢量绘制功能。在Fireworks软件中完成页面方案的设计13.6布 局 设 计在这一步中，任务是把各种元素放到适当的在这一步中，任务是把各种元素放到适当的位置，而暂时不用涉及非常细节的因素。位置，而暂时不用涉及非常细节的因素。13.6.1整体样式设计首先对整个页面的共有属性进行一些设置，例如对字体、首先对整个页面的共有属性进行一些

6、设置，例如对字体、marginmargin、paddingpadding等属性都进行初始设置，以保证这些内容在各个浏览器中有相同表现。等属性都进行初始设置，以保证这些内容在各个浏览器中有相同表现。在Fireworks中进行切片平铺背景图像13.6.2页头部分下面开始对页头部分的设计进行讲解。现在手中一共有下面开始对页头部分的设计进行讲解。现在手中一共有3 3种备用资源：种备用资源：“HTMLHTML代码代码”“”“原型线框图原型线框图”和和“设计方案图设计方案图”。首先根据原型线框图中设。首先根据原型线框图中设定的各个部分，对定的各个部分，对HTMLHTML进行加工。进行加工。页头中的各个部分

7、放置到适当的位置13.6.3内容部分在原型线框图中，内容部分分为左右两列，下面首先对在原型线框图中，内容部分分为左右两列，下面首先对HTMLHTML进行改造，进行改造，然后设置相应的然后设置相应的CSSCSS代码，实现左右分栏的要求。代码，实现左右分栏的要求。内容部分的两列布局13.6.4页脚部分最后设置页脚部分，这里不再赘述。为页脚增加一个最后设置页脚部分，这里不再赘述。为页脚增加一个divdiv，并将其类别，并将其类别名称设置为名称设置为“footer”footer”。页脚部分13.7细 节 设 计大的布局设计完成以后，就要开始对细节进行设计了。整个设计过程是大的布局设计完成以后，就要开始

8、对细节进行设计了。整个设计过程是按照从内容到形式、逐步细化的思想来进行的。按照从内容到形式、逐步细化的思想来进行的。13.7.1页头部分下面首先对页头部分进行细节的设置。在下面首先对页头部分进行细节的设置。在Fireworks中，把需要的部分中，把需要的部分切割出来并保存为透明背景切割出来并保存为透明背景。在Fireworks中切图 （a） （b） 制作背景图像13.7.2内容部分到这里页头部分的视觉细节设计就完成了。下面开始设计中间的内容区到这里页头部分的视觉细节设计就完成了。下面开始设计中间的内容区域。前面已经完成了基本的布局设计，现在就在此基础上继续细化视觉设计域。前面已经完成了基本的布

9、局设计，现在就在此基础上继续细化视觉设计。给图像设置边框效果13.7.3左侧的主要内容列接下来就要对左列（接下来就要对左列（“主要主要内容内容”）进行设置，从最终的效）进行设置，从最终的效果中可以看到，左侧列分为上、果中可以看到，左侧列分为上、中、下中、下3个部分。它们都各有特点：个部分。它们都各有特点：上面的上面的“今日推荐今日推荐”栏目中，图像居左，文字居右；栏目中，图像居左，文字居右；中间的中间的“最受欢迎最受欢迎”栏目中，图像居右，文字居左；栏目中，图像居右，文字居左；下面的下面的“分类推荐分类推荐”中，内容又分为中，内容又分为3列，每一列中图列，每一列中图像居上，文字居下像居上，文字

10、居下。设置了浮动后的效果13.7.4右边栏接下来实现右边栏的样式设计，要点是一组圆角框的实现方法接下来实现右边栏的样式设计，要点是一组圆角框的实现方法。1实现圆角框实现圆角框2圆角框内部样式圆角框内部样式设置圆角框内的样式侧边栏中设置圆角框后的效果13.8CSS布局的优点使用使用CSS进行布局的最大优点是非常灵活，可以方便地扩展和调整。例进行布局的最大优点是非常灵活，可以方便地扩展和调整。例如，当网站随着业务的发展，需要在页面中增加一些内容，那么不需要修改如，当网站随着业务的发展，需要在页面中增加一些内容，那么不需要修改CSS样式，只需要简单地在样式，只需要简单地在HTML中增加相应的模块就可

11、以了。中增加相应的模块就可以了。方便地调换左右两列的位置方便灵活地增加网页中的内容13.9交互效果设计接下来进行一些交互性的动态设计，这里主要是为网页元素增加鼠标指接下来进行一些交互性的动态设计，这里主要是为网页元素增加鼠标指针经过时的效果。针经过时的效果。设置不同位置的鼠标指针经过效果13.9.1次导航栏为次导航栏增加鼠标指针经过效果，首先准备一个和原背景图像的形状为次导航栏增加鼠标指针经过效果，首先准备一个和原背景图像的形状相同、只是把白色改为黄色的新图像。相同、只是把白色改为黄色的新图像。次导航栏中鼠标指针经过时的背景图像13.9.2主导航栏主导航栏的做法和次导航栏一样，准备背景图像。主

12、导航栏的做法和次导航栏一样，准备背景图像。主导航栏中鼠标指针经过时的背景图像13.9.3账号区接下来实现接下来实现“登录账号登录账号”和和“购物车购物车”图像的鼠标经过效果。实际上，图像的鼠标经过效果。实际上，这里同样是更换背景图像，不过这里还可以介绍一种略有变化的方法。上面这里同样是更换背景图像，不过这里还可以介绍一种略有变化的方法。上面的方法中，为了实现鼠标指针经过连接时更换背景图像的效果，制作两个独的方法中，为了实现鼠标指针经过连接时更换背景图像的效果，制作两个独立的图像文件。这样会导致一个问题，当页面上传到了服务器上，这样访问立的图像文件。这样会导致一个问题，当页面上传到了服务器上，这

13、样访问者浏览这个页面时，各个图片的下载会有先有后，有的时候，如果网络速度者浏览这个页面时，各个图片的下载会有先有后，有的时候，如果网络速度不是很快，当鼠标指针经过某个链接的时候，所需要更换的图像文件还没有不是很快，当鼠标指针经过某个链接的时候，所需要更换的图像文件还没有下载到访问者的计算机上，这时就会出现短暂的停顿，等该图像文件下载完下载到访问者的计算机上，这时就会出现短暂的停顿，等该图像文件下载完毕后才会出现，这样就影响了访问者的体验。毕后才会出现，这样就影响了访问者的体验。账号区的新背景图像13.9.4图像边框接下来实现当鼠标指针经过某个展示的图像时，边框发生变化的效果。接下来实现当鼠标指针经过某个展示的图像时，边框发生变化的效果。为图像设置鼠标经过时边框变化的效果13.9.5产品分类最后，实现右边栏中最后，实现右边栏中“产品分类产品分类”列表的鼠标指针经过效果。列表的鼠标指针经过效果。为“产品分类”列表设置鼠标指针经过效果13.10遵从Web标准的设计流程经过上面比较完整的