第15_综合案例—儿童用品网上商店.ppt

1、第十五讲,综合案例 儿童用品网上商店,本讲任务,制作儿童用品网上商店首页,案例演示,本讲目标,从本案例开始，我们将从零开始，分析、策划、设计并制作一个完整的案例“Baby Housing”儿童用品网上商店。 通过该案例的学习，我们可以了解其中的技术细节，要求能够： 1、使用DIV+CSS制作简单的页面布局； 2、根据网站开发流程制作网站。,1、需求分析 （1）网站想实现什么目标？ （2）谁来访问？ （3）访问者需要什么？ （4）用多少时间，预算是多少，完成的质量？ （5）网站内容是什么？,网站开发流程5-1,1、时刻记住：以客户需求为导向 2、形成需求文档：网站需求规划说明书,客户,2、结构设

2、计,网站开发流程5-2,案例演示,标准网页设计过程是遵循：结构+表现+行为。 良好的网页结构和可读性，有利于网站被Google、百度等搜索引擎收录，提升网站访问量。,3、原型设计,网站开发流程5-3,1、对整个网页的一个构思，对网站的完整功能和内容进行分析。 2、便于和客户交流，避免浪费时间反复修改。,可选用Visio、Photoshop、 Firewroks等设计软件,4、页面方案设计,网站开发流程5-4,在Fireworks软件中完成页面方案的设计,设计核心任务是美术设计，要让页面更美观、更漂亮，需要Fireworks等图片处理软件的熟练掌握，难点在于：配色,最简单的配色方案：“两种半颜色

3、配色法”,5、布局设计 1）整体、页头、内容、页脚的大体设计 2）页头、内容的细节设计 3）交互设计 鼠标经过主导航栏时 鼠标经过次导航栏时 鼠标经过“登录账号”或者“购物车”图像时 鼠标经过某个展示的图像的边框时 鼠标经过右边栏“产品分类”时,网站开发流程5-5,经过上述的分析，我们从此部分开始设计,跟我一步一步学,使用Dreamweaver创建站点,创建站点,注意： 1、通用的文件夹命名 2、文件、文件夹命名：小写、有语义,中小型网站的目录结构,常用的三种页面布局技术,三种页面布局技术,框架布局： 1、优点：简洁、多窗口查看 2、缺点：分多文件保存，不利于搜索引擎搜索 3、适用场合：论坛、

4、社区,表格布局： 1、优点：设计简单、浏览器兼容性好 2、缺点：表格嵌套导致结构冗余、整个表格下载完才开始显示数据，影响访问速度 3、适用场合：不符合W3C，逐渐淡出,DIV+CSS布局： 1、优点：符合W3C内容和结构分离的思想、层次结构简单、利用搜索引擎搜索 2、缺点：布局稍微复杂、存在浏览器兼容问题 3、适用场合：主流的布局方式,1、HTML结构设计,参考课本P374P377,2、制作首页布局2-1,1、划分页面结构,如何进行划分呢？,2、编写CSS控制各块的布局,2、制作首页布局2-2,container（顶级容器）,content（页面主体）,1、推荐加顶级容器，方便统一设置 2、中

5、间三块放入main容器块中,注意命名规范 1、各块的业界习惯的命名 2、注意最外面的大块用ID，其他用class或ID均可,3、整体样式设计,对整个页面的共有属性进行一些设置，例如对字体、margin、padding等属性，以保证这些内容在各个浏览器中有相同表现。,body margin:0; padding:0; background: white url(./images/header-background.png) repeat-x; font:12px; #container width:760px; margin:0 auto; ,ul margin:0; padding:0; li

6、st-style-type:none; a text-decoration:none; color:#3D81B4; p text-indent:2em; ,顶级容器，用于界定网页整体宽度和居中效果,4、页头部分大体设计, Baby Housing 网站首页 关于我们 登录帐号 ,Logo部分,4、内容部分大体设计, ,左侧：今日推荐+最受欢迎+分类推荐,右侧：查询+产品分类+特别提示,5、页脚部分大体设计, 网站首页 | 产品介绍 | 信息 | 畅销畅销榜 版权属于前沿科技 ,6、页头部分细节设计,要求实现目标：,7、内容部分细节设计2-1,在大体设计中，我们将内容左侧部分分解成3个DIV容器,3个容器之间哪些元素相同？哪些不同？,7、内容部分细节设计2-2,要求实现圆角框,在大体设计中，我们将内容右侧部分分解成3个DIV容器,分类采用ulli列表 每一个列表项目左端添加蝴蝶形状装饰图,8、交互效果设计,1、主导航背景图像切换 2、次导航背景图像切换 3、账号区背景图像切换 4、图像边框鼠标经过时背景色改变 5、产品分类列表项目鼠标经过时效果改变,案例小结,1、目前设计网页的布局技术有哪些？主流是哪种？ 2、在静态网页的设计理念中，最难最重要的两点是什么？ 3、为了方便查看网页中容器的具体位置，一般我们会添加