HTML5+CSS3网页设计与制作实用教程单元8 网站整合与制作购物网站首页PPT格式课件下载.pptx

1、需求分析，规划网站的主题、风格、规模、功能和内容版块。收集资料、准备素材，并进行整理修改。规划网站栏目结构、目录结构、链接结构和版式结构。,任务 8-1 熟悉网站开发流程和规范,第二个阶段：设计、制作网页阶段。网站的总体设计。设计、制作网站的主页、二级页面和内容页面等。将各个网页通过超级链接进行整合。,第三个阶段：测试、发布、推广与维护网站阶段。测试、调试与完善网站。发布与推广网站。维护与更新网站。,任务 8-1 熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范网站中所有文件、文件夹、CSS 类的命名应规范，尽量做到字母数量少，见名知意、容 易理解。文件夹命名一般采用英文小写字母，特殊情况

2、可以使用中文拼音。文件名称采用小 写的英文字母、数字和下画线的组合，也可以大小写英文字母混合使用。网页菜单名称可以 使用菜单名的英文单词或组合英文单词命名。（1）文件夹的常用名称表8-1文件夹的常用名称,任务 8-1 熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范（2）CSS 样式文件的常用名称,表8-2,CSS 样式文件的常用名称,名称 base.css columns.css common.css content.css font.css form.css global.css,说明基本公共CSS样式文件 专栏CSS样式文件通用CSS样式文件 内容CSS样式文件 文字CSS样式文件

3、表单CSS样式文件 公共CSS样式文件,名称 mend.css menu.css module.css nav.css pages.css print.css product.css,说明补丁CSS样式文件 菜单CSS样式文件 模块CSS样式文件 导航CSS样式文件 页面CSS样式文件 打印CSS样式文件商品列表CSS样式文件,任务 8-1 熟悉网站开发流程和规范,任务 8-1 熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范（3）CSS 样式表文件中类和ID 标识的常用名称表8-3CSS 样式表文件中的常用名称,任务 8-1 熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范（3）CS

4、S 样式表文件中类和ID 标识的常用名称表8-3CSS 样式表文件中的常用名称,任务 8-1 熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范（3）CSS 样式表文件中类和ID 标识的常用名称表8-3CSS 样式表文件中的常用名称,任务 8-1 熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范（4）网页导航栏的常用名称,表8-4,网页导航栏的常用名称,任务 8-1 熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范（5）网页图片的常用名称,表8-5,网页图片的常用名称,任务 8-1 熟悉网站开发流程和规范3熟悉网页版面的基本尺寸规范,（1）网页的宽度,（2）网页的长度,（3）网页文件

5、大小,任务 8-1 熟悉网站开发流程和规范4熟悉网页广告的基本尺寸规范,表8-6,网页广告的尺寸标准,目录导航,渐进训练任务 8-1 熟悉网站开发流程和规范任务 8-2 分析与规划购物网站任务 8-3 设计与制作电脑版网站首页0801.htm任务 8-4 测试网站任务 8-5 发布网站任务 8-6 推广与维护网站探索训练任务 8-7 设计与制作触屏版网站首页0802.html析疑解惑 单元小结,任务 8-2 分析与规划购物网站,任务描述对购物网站的功能、主题、风格、栏目结构、版式结构、链接 结构、目录结构、内容版块等方面进行深入分析和合理规划。,任务实施1网站需求分析网站设计者必须了解各类用户

6、的习惯、知识、技能，对各类用户的需求进行调研，以便预 测不同类别的用户对网站的不同需求，为网站设计提供参考和依据，使设计出的网站适合面更 广，用户群更多。,任务 8-2 分析与规划购物网站,1网站需求分析本单元拟开发的网站为一个购物网站，一般的购物网站都为动态网站，后台为数据库，前台使用ASP.NET、PHP 和JSP 开发平台实现其功能。通常购物网站的基本功能模块包括商 品列表、商品详情显示、搜索商品、用户注册、用户登录、选购商品、收藏商品、帮助中心、结算中心、订单查询等，这些功能模块一般使用三层架构（用户界面层、业务逻辑层、数据 访问层）实现。,2策划网站主题和网站名称网站名称要合法、合情

7、、合理，根据中文网站浏览者的特点，除非特定需要，中文网站 名称最好使用中文名称，不要使用英文或者中英文混合名称，网站名称要有特色，体现一定 的内涵，给浏览者更多的视觉冲击和想象，在体现出网站主题的同时，又能突出网站特色。,任务 8-2 分析与规划购物网站,3规划网站风格网站风格是指网站的外观和表现形式，要明确网站的类型，根据网站类型确定网站的风 格，不同类型的网站具有不同的风格，版面设计、颜色搭配也各有特点。网站风格是通过网 站中的页面来体现的，最主要的是通过首页来体现的。具体包括页面的版式结构、色彩搭配、图像动画的使用等方面。,4规划网站结构规划网站结构首先要建立一张站点图，站点图中包括站点

8、所有的关键页面、它们之间的 链接关系等，设计网页的主要技术要点也应规划好。,任务 8-2 分析与规划购物网站4规划网站结构（1）规划网站的栏目结构表8-7“易购网”的栏目结构,任务 8-2 分析与规划购物网站,4规划网站结构（2）规划网站的目录结构构建目录结构的基本要求见如下所述。,（4）目录的层次不要太深。,（3）在每个主目录下都建立独立的image、flash 等子目录。,（1）不要将所有文件都存放在根目录下。,（2）按栏目内容建立子目录。,任务 8-2 分析与规划购物网站,4规划网站结构（2）规划网站的目录结构“易购网”各文件夹所存放文件类型如表8-8 所示。,表8-8,“易购网”的目录

9、结构及其存放的文件类型,任务 8-2 分析与规划购物网站,4规划网站结构（3）规划网站的链接结构网站的链接结构常用的有两种基本方式，如下所述。本单元拟制作的网页如表8-9 所示。树状链接结构。网状链接结构。表8-9本单元拟制作的网页名称及说明,网页文档名称0801.Html,网页内容说明“易购网”的首页,网页文档名称0402.html,网页内容说明 用户登录网页,任务 8-2 分析与规划购物网站,4规划网站结构（3）规划网站的链接结构本单元拟创建网页的链接结构示意图如图8-1 所示，该图中主要表示的是各二级页面与 首页之间的链接关系，其他页面之间相互的链接关系没有标注。,图8-1,本单元拟创建

10、网页的链接结构示意图,目录导航,渐进训练任务 8-1 熟悉网站开发流程和规范任务 8-2 分析与规划购物网站任务 8-3 设计与制作电脑版网站首页0801.htm任务 8-4 测试网站任务 8-5 发布网站任务 8-6 推广与维护网站探索训练任务 8-7 设计与制作触屏版网站首页0802.html析疑解惑 单元小结,任务 8-3 设计与制作电脑版网站首页0801.html,设计与制作电脑版网站首页0801.html，其浏 览效果如图8-2 所示。,任务描述,图8-2 网站首页0801.html 的浏览效果,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,任务描述规划网站首页页面080

11、1.html 的主体布局结构，并绘制各组成部分的页面内容分布示意图。编写网站首页页面0801.html 主体布局结构对应的HTML 代码。定义网站首页页面0801.html 主体布局结构对应的CSS 样式代码。,任务实施1规划与设计“易购网”首页主体部分的布局结构“易购网”首页的主体部分分为7 个板块，左列分别为顶商品类型导航菜单、商品广告图片和商品品牌专区，中列分别为焦点图片轮换特效、热卖商品专区和低价商品专区，右列分别 为商品广告图片、商品促销公告、畅销商品排行和热门商品搜索。首页主体部分的页面内容分 布示意图如图8-3 所示。,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,1

12、规划与设计“易购网”首页主体部分的布局结构,图8-3,“易购网”首页主体部分的页面内容分布示意图,图8-4,首页主体部分整体布局设计示意图,图8-5,首页主体部分局部布局设计示意图,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,创建所需的文件夹在站点“易购网”中创建文件夹“08 网站整合与制作购物网站首页”，在该文件夹中创 建文件夹“0801”，并在文件夹“0801”中创建子文件夹“CSS”“image”“flash”和“js”，将所需 要的图片文件拷贝到“image”文件夹中，将所需要的Javascript 文件拷贝到“js”文件夹中，将所需要的Flash 动画拷贝到“flash

13、”文件夹中。创建网页文档0801.html在文件夹“0801”中创建网页文档0801.html，“易购网”首页的中部主体部分布局结构 对应的HTML 代码如表8-10 所示。,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,3创建网页文档0801.html表8-10“易购网”首页的中部主体部分布局结构对应的HTML 代码,HTML代码 商品类型侧栏菜单导航 广告图片 品牌专区 焦点图片自动轮换播放,行号01020304050607080910111213,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,表8-10“易购网”首页的中部主体部分布局结构对应的HTML 代码HTM

14、L代码 广告图片 促销公告 热卖专区 低价专区 畅销排行 热门搜索,行号141516171819202122232425262728,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,“易购网”首页的顶部布局结构对应的HTML 代码如表8-11 所示。表8-11“易购网”首页的顶部布局结构对应的HTML 代码行号HTML代码行号HTML代码,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,“易购网”首页的底部布局结构对应的HTML 代码如表8-12 所示，首页底部的HTML代 码与CSS 与单元2 的0201.html 类似，请参见单元2 的相关内容。,表8-12“易购网”首

15、页的底部分布局结构对应的HTML 代码HTML代码 帮助导航菜单 友情链接 版权信息,行号01020304,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,4创建样式文件与编写CSS样式代码在文件夹“CSS”中可创建样式文件main.css，在该样式文件定义CSS 代码，“易购网”首页主体布局结构对应的CSS 样式代码的定义如表8-13 所示。表8-13“易购网”首页中部左侧主体布局结构对应的CSS 样式代码行号CSS代码行号CSS代码,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,4创建样式文件与编写CSS样式代码表8-13“易购网”首页中部左侧主体布局结构对应的CSS 样式代码行号CSS代码行号CSS代码,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,4创建样式文件与编写CSS样式代码表8-13“易购网”首页中部左侧主体布局结构对应的CSS 样式代码行号CSS代码行号CS