综合案例—儿童用品网上商店讲述.ppt

4.9 交互效果设计 1.次导航栏 4-20.html。 为次导航栏增加鼠标经过效果，首先准备一个和原背景图像的形状相同，只是把白色改为黄色的新图像，如图： 然后为链接元素增加“:hover”的伪类别，在其中更换背景图像，适当修改文字颜色； 注意也要更换“a:hover”包含的span元素的背景图像： 4.9 交互效果设计 2.主导航栏 4-21.html。 主导航栏的做法和次导航栏一样，首先准备一个和原背景图像的形状相同，只是修改了颜色的新图像，如图： 然后为链接元素增加“:hover”的伪类别，在其中更换背景图像； 注意也要更换“a:hover”包含的span元素的背景图像，此外适当修改文字的颜色： 4.9 交互效果设计 3.账号区 4-22.html。 （1）“登录账号”和“购物车”图像的鼠标经过效果，实际上可以用更换背景图像技术； （2）但当访问者浏览页面时，各个图片下载有先有后，如果网络速度慢，当鼠标指针经过某个链接的时候，会出现短暂的停顿，等图像下载完毕后才会出现，影响访问者体验； （3）改进方案：使用下面的图片，把两个图像合并在一起，然后当鼠标指针经过时，通过对背景图像的位置的改变实现最终的效果； 4.9 交互效果设计 3.账号区 4-22.html。 （1）实现代码如下： （2）代码关键之处是后面的bottom，表示从底部开始显示，而在默认情况下是从top开始显示的，这样就可以实现所需要的效果了。 4.9 交互效果设计 4.图像边框 4-23.html。 （1）接下来实现当鼠标指针经过某个展示的图像时，边框发生变化的效果 （2）当鼠标指针经过图像时，边框由黄色变为蓝色，背景色由浅蓝色变为深蓝色； 4.9 交互效果设计 5.产品分类4-24.html。 最后实现右边栏中“产品分类”列表的鼠标指针经过效果。 4.10 遵从Web标准的设计流程 图4.20 完成本案例的7个步骤及其相应的工具 这7个步骤相应总结如下。 （1）内容分析：仔细研究需要在网页中展现的内容，梳理其中的逻辑关系，分清层次以及重要程度。 （2）结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器中保持高可读性。 （3）原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。 （4）方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。 （5）布局设计：使用HTML和CSS对页面进行布局。 （6）视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。 （7）交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。 人有了知识，就会具备各种分析能力， 明辨是非的能力。 所以我们要勤恳读书，广泛阅读， 古人说“书中自有黄金屋。 ”通过阅读科技书籍，我们能丰富知识， 培养逻辑思维能力； 通过阅读文学作品，我们能提高文学鉴赏水平， 培养文学情趣； 通过阅读报刊，我们能增长见识，扩大自己的知识面。 有许多书籍还能培养我们的道德情操， 给我们巨大的精神力量， 鼓舞我们前进。 * 4.6 .2 页头部分 1.将主导航的列表设置为绝对定位，并定位到适当的位置； 2.将主导航的ul列表项目li设置为左浮动，从而使它们水平排列，并使得项目之间有一定的间隔； 3.由于主导航的背景颜色比较深，因此把其中的链接文字颜色设置为白色，代码如下：文件13-6.html。 4.6 .2 页头部分 1.将次导航的列表设置为绝对定位，右上角对齐到header的右上角； 2.将主导航的ul列表项目li设置为左浮动，从而使它们水平排列，并使得项目之间有一定的间隔； 文件13-7.html。 4.6 .2 页头部分 1.账号和购物车的设置为绝对定位，并放到右侧适当位置； 2.将账号的ul列表项目li也设置为左浮动，从而使得水平排列，并设置间隔； 文件13-8.html。 4.6 .3 内容部分 1.在原型线框图中，内容部分分为左右两列首先对HTML代码按照下图进行改造；文件13-9.html。 4.6 .3 内容部分 1.在原型线框图中，内容部分分为左右两列首先对HTML代码按照下图进行改造；文件13-9.