CSS网页设计标准教程 教学课件 温谦 第13章综合案例—儿童用品网上商店.ppt

《CSS网页设计标准教程 教学课件 温谦 第13章综合案例—儿童用品网上商店.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS网页设计标准教程第4部分综合案例第13章综合案例—儿童用品网上商店案例概述13.1内容分析13.2HTML结构设计13.3原型设计13.4页面方案设计13.5布局设计13.6细节设计13.7CSS布局的优点13.8交互效果设计13.9遵从Web标准的设计流程13.1013.1案例概述图13.1完成后的首页13.2内容分析图13.4卓越亚马逊网站的首页13.3HTML结构设计图13.5HTML结构13.4原型设计图13.6网站首页原型线框图13.5页面方案设计图13.13在Fireworks软件中完成页面方案的设

2、计13.6布局设计13.6.1整体样式设计13.6.2页头部分13.6.3内容部分13.6.4页脚部分13.7细节设计13.7.1页头部分13.7.2内容部分13.7.3左侧的主要内容列13.7.4右边栏13.8CSS布局的优点使用CSS进行布局的最大优点是非常灵活，可以方便地扩展和调整。例如，当网站随着业务的发展，需要在页面中增加一些内容，那么不需要修改CSS样式，只需要简单地在HTML中增加相应的模块就可以了。图13.37所示的就是对页面扩展了内容以后的效果，在“主要内容”部分增加了“特色促销”和“优中选优”两个

3、模块，在右侧栏中增加了“送货服务”和“热门信息”两个模块。在前面的页面基础上，增加这些内容很容易。图13.37方便灵活地增加网页中的内容不但如此，设计得足够合理的页面可以非常灵活地修改样式，例如，只需要将两列布局的浮动方向交换，就可以立即得到一个新的页面，如图13.38所示，可以看到左右两列交换了位置。图13.38方便地调换左右两列的位置13.9交互效果设计图13.39设置不同位置的鼠标指针经过效果13.10遵从Web标准的设计流程图13.46完成本案例的7个步骤及其相应的工具这7个步骤相应总结如下。（1）内容分析：

4、仔细研究需要在网页中展现的内容，梳理其中的逻辑关系，分清层次以及重要程度。（2）结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器中保持高可读性。（3）原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。（4）方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。（5）布局设计：使用HTML和CSS对页面进行布局。（6）视觉设计：使用CSS并配合美工设计元素，完成由设计方法

5、到网页的转化。（7）交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。