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

CSS网页设计标准教程 第4部分 综合案例 第 13 章 综合案例 —儿童用品网上商店 13.1 案 例 概 述 13.2 内 容 分 析 13.3 HTML结构设计 13.4 原 型 设 计 13.5 页面方案设计 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.8 CSS布局的优点 使用CSS进行布局的最大优点是非常灵活，可以方便地扩展和调整。 例如，当网站随着业务的发展，需要在页面中增加一些内容，那么不需要修改CSS样式，只需要简单地在HTML中增加相应的模块就可以了。 图13.37所示的就是对页面扩展了内容以后的效果，在“主要内容”部分增加了“特色促销”和“优中选优”两个模块，在右侧栏中增加了“送货服务”和“热门信息”两个模块。 在前面的页面基础上，增加这些内容很容易。 不但如此，设计得足够合理的页面可以非常灵活地修改样式，例如，只需要将两列布局的浮动方向交换，就可以立即得到一个新的页面，如图13.38所示，可以看到左右两列交换了位置。 13.9 交互效果设计 13.10 遵从Web标准的设计流程 这7个步骤相应总结如下。 （1）内容分析：仔细研究需要在网页中展现的内容，梳理其中的逻辑关系，分清层次以及重要程度。 （2）结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器中保持高可读性。 （3）原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。 （4）方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。 （5）布局设计：使用HTML和CSS对页面进行布局。 （6）视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。 （7）交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。 * * 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 案例概述 13.1 内容分析 13.2 HTML结构设计 13.3 原型设计 13.4 页面方案设计 13.5 布局设计 13.6 细节设计 13.7 CSS布局的优点 13.8 交互效果设计 13.9 遵从Web标准的设计流程 13.10 图13.1 完成后的首页 图13.4 卓越亚马逊网站的首页 图13.5 HTML结构 图13.6 网站首页原型线框图 图13.13 在Fireworks软件中完成页面方案的设计 图13.37 方便灵活地增加网页中的内容 图13.38 方便地调换左右两列的位置 图13.39 设置不同位置的鼠标指针经过效果 图13.46 完成本案例的7个步骤及其相应的工具 *