综合案例—儿童用品网上商店介绍.ppt

  1. 1、本文档共75页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
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.将次导航的列表设置为绝对定位,右上角对齐到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.html。 4.6 .3 内容部分 2.写出CSS代码,实现固定宽度的两列布局:文件13-9.html。 4.6 .4 页 脚 部分 1.为页脚增加一个div,并将其设置类别名称为footer。 2.设置相应的CSS样式代码如下: 3.特别注意不要忘记设定clear属性,以保证页脚内容在页面的最下端,不受中间部分float的影响;13-10.html。 至此布局设计完成了,这是一个典型的“1-2-1”布局。 4.7 细 节 设 计 4.7.1 页头部分 1.h1标题用图像替换 2.设置账号区的样式 3.设置次导航栏的圆角效果 4.设置主导航栏圆角效果 4.7.2 内容部分 4.7.3 左侧的主要内容列 4.7.4 右边栏 4.7 .1 页 头 部分 1.进行h1标题的图像替换。准备一副图片如下(300px*53px): 2.修改h1的CSS样式代码如下:left(背景图片靠对象左侧开始显示, bottom(背景图片靠对象紧贴底部开始显示):

文档评论(0)

502992 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档