HTML5+CSS3网页设计与制作实用教程单元8 网站整合与制作购物网站首页.pptx

HTML5+CSS3网页设计与制作实用教程单元8 网站整合与制作购物网站首页.pptx

《HTML5+CSS3网页设计与制作实用教程单元8 网站整合与制作购物网站首页.pptx》由会员分享，可在线阅读，更多相关《HTML5+CSS3网页设计与制作实用教程单元8 网站整合与制作购物网站首页.pptx（157页珍藏版）》请在冰点文库上搜索。

,单元8,网站整合与制作购物网站首页HTML5+CSS3网页设计与制作实用教程,本单元以整合“购物网站”与制作购物网站首页为例全面介绍网站整合与首页制作的方法，主要包括熟悉网站开发规范、规划网站、设计与制作网站首页、测试网站、发布网站、推广与维护网站等方面。

本章导读Thechaptersintroduction,目录导航,渐进训练任务8-1熟悉网站开发流程和规范任务8-2分析与规划购物网站任务8-3设计与制作电脑版网站首页0801.htm任务8-4测试网站任务8-5发布网站任务8-6推广与维护网站探索训练任务8-7设计与制作触屏版网站首页0802.html析疑解惑单元小结,任务8-1熟悉网站开发流程和规范,任务描述熟悉网站开发的基本流程。

熟悉网站开发的常用规范。

任务实施1熟悉网站开发的基本流程第一个阶段：

规划网站和准备素材阶段。

需求分析，规划网站的主题、风格、规模、功能和内容版块。

收集资料、准备素材，并进行整理修改。

规划网站栏目结构、目录结构、链接结构和版式结构。

任务8-1熟悉网站开发流程和规范,第二个阶段：

设计、制作网页阶段。

网站的总体设计。

设计、制作网站的主页、二级页面和内容页面等。

将各个网页通过超级链接进行整合。

第三个阶段：

测试、发布、推广与维护网站阶段。

测试、调试与完善网站。

发布与推广网站。

维护与更新网站。

任务8-1熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范网站中所有文件、文件夹、CSS类的命名应规范，尽量做到字母数量少，见名知意、容易理解。

文件夹命名一般采用英文小写字母，特殊情况可以使用中文拼音。

文件名称采用小写的英文字母、数字和下画线的组合，也可以大小写英文字母混合使用。

网页菜单名称可以使用菜单名的英文单词或组合英文单词命名。

（1）文件夹的常用名称表8-1文件夹的常用名称,任务8-1熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范

（2）CSS样式文件的常用名称,表8-2,CSS样式文件的常用名称,名称base.csscolumns.csscommon.csscontent.cssfont.cssform.cssglobal.css,说明基本公共CSS样式文件专栏CSS样式文件通用CSS样式文件内容CSS样式文件文字CSS样式文件表单CSS样式文件公共CSS样式文件,名称mend.cssmenu.cssmodule.cssnav.csspages.cssprint.cssproduct.css,说明补丁CSS样式文件菜单CSS样式文件模块CSS样式文件导航CSS样式文件页面CSS样式文件打印CSS样式文件商品列表CSS样式文件,任务8-1熟悉网站开发流程和规范,任务8-1熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范（3）CSS样式表文件中类和ID标识的常用名称表8-3CSS样式表文件中的常用名称,任务8-1熟悉网站开发流程和规范,2熟悉网站开发的基本命名规范（3）CSS样式表文件中类和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）网页文件大小,任务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网站需求分析网站设计者必须了解各类用户的习惯、知识、技能，对各类用户的需求进行调研，以便预测不同类别的用户对网站的不同需求，为网站设计提供参考和依据，使设计出的网站适合面更广，用户群更多。

任务8-2分析与规划购物网站,1网站需求分析本单元拟开发的网站为一个购物网站，一般的购物网站都为动态网站，后台为数据库，前台使用ASP.NET、PHP和JSP开发平台实现其功能。

通常购物网站的基本功能模块包括商品列表、商品详情显示、搜索商品、用户注册、用户登录、选购商品、收藏商品、帮助中心、结算中心、订单查询等，这些功能模块一般使用三层架构（用户界面层、业务逻辑层、数据访问层）实现。

2策划网站主题和网站名称网站名称要合法、合情、合理，根据中文网站浏览者的特点，除非特定需要，中文网站名称最好使用中文名称，不要使用英文或者中英文混合名称，网站名称要有特色，体现一定的内涵，给浏览者更多的视觉冲击和想象，在体现出网站主题的同时，又能突出网站特色。

任务8-2分析与规划购物网站,3规划网站风格网站风格是指网站的外观和表现形式，要明确网站的类型，根据网站类型确定网站的风格，不同类型的网站具有不同的风格，版面设计、颜色搭配也各有特点。

网站风格是通过网站中的页面来体现的，最主要的是通过首页来体现的。

具体包括页面的版式结构、色彩搭配、图像动画的使用等方面。

4规划网站结构规划网站结构首先要建立一张站点图，站点图中包括站点所有的关键页面、它们之间的链接关系等，设计网页的主要技术要点也应规划好。

任务8-2分析与规划购物网站4规划网站结构

（1）规划网站的栏目结构表8-7“易购网”的栏目结构,任务8-2分析与规划购物网站,4规划网站结构

（2）规划网站的目录结构构建目录结构的基本要求见如下所述。

（4）目录的层次不要太深。

（3）在每个主目录下都建立独立的image、flash等子目录。

（1）不要将所有文件都存放在根目录下。

（2）按栏目内容建立子目录。

任务8-2分析与规划购物网站,4规划网站结构

（2）规划网站的目录结构“易购网”各文件夹所存放文件类型如表8-8所示。

表8-8,“易购网”的目录结构及其存放的文件类型,任务8-2分析与规划购物网站,4规划网站结构（3）规划网站的链接结构网站的链接结构常用的有两种基本方式，如下所述。

本单元拟制作的网页如表8-9所示。

树状链接结构。

网状链接结构。

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

图8-1,本单元拟创建网页的链接结构示意图,目录导航,渐进训练任务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】规划与设计电脑版网站首页的主体布局结构,任务描述规划网站首页页面0801.html的主体布局结构，并绘制各组成部分的页面内容分布示意图。

编写网站首页页面0801.html主体布局结构对应的HTML代码。

定义网站首页页面0801.html主体布局结构对应的CSS样式代码。

任务实施1规划与设计“易购网”首页主体部分的布局结构“易购网”首页的主体部分分为7个板块，左列分别为顶商品类型导航菜单、商品广告图片和商品品牌专区，中列分别为焦点图片轮换特效、热卖商品专区和低价商品专区，右列分别为商品广告图片、商品促销公告、畅销商品排行和热门商品搜索。

首页主体部分的页面内容分布示意图如图8-3所示。

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

创建网页文档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代码HTML代码广告图片促销公告热卖专区低价专区畅销排行热门搜索,行号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“易购网”首页的底部分布局结构对应的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代码行号CSS代码,【任务8-3-1】规划与设计电脑版网站首页的主体布局结构,在文件夹“CSS”中可创建通用样式文件base.css，在该样式文件定义CSS代码，样式文件base.css的CSS代码如表5-3所示。

在文件夹“CSS”中可创建顶部导航结构与LOGO的样式文件top.css，在该样式文件定义CSS代码，样式文件top.css的CSS代码详见单元2。

在文件夹“CSS”中可创建底部导航结构样式文件bottom.css，在该样式文件定义CSS代码，样式文件bottom.css的CSS代码详见单元2。

【任务8-3-2】设计与实现电脑版网站首页的导航结构,任务描述设计与实现网站首页的顶部下拉菜单式导航结构。

设计与实现网站首页的顶部商品类型下拉菜单式导航结构。

设计与实现网站首页的顶部购物列表下拉菜单结构。

设计与实现网站首页的侧栏菜单显示结构。

任务实施1设计与实现网站首页的顶部下拉菜单式导航结构网站首页0801.html的顶部下拉菜单式导航结构对应的HTML代码如表8-14所示，对应CSS代码如表8-15所示。

【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-14网页0801.html顶部下拉菜单式导航结构对应的HTML代码HTML代码我的易购订单管理编辑个人信息修改登录密码收货地址管理我的收藏夹商品咨询意见建议,行号01020304050607080910111213,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-15,CSS代码,行号,网页0801.html中顶部下拉菜单式导航结构对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-15,CSS代码,行号,网页0801.html中顶部下拉菜单式导航结构对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-15CSS代码,行号,网页0801.html中顶部下拉菜单式导航结构对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,2设计与实现网站首页的顶部商品类型下拉菜单式导航结构网站首页0801.html的顶部商品类型下拉菜单式导航结构对应的HTML代码如表8-16所示，对应的CSS代码如表8-17所示。

1设计与实现网站首页的顶部下拉菜单式导航结构网站首页的顶部下拉菜单式导航的浏览效果如图8-6所示。

图8-6网站首页的顶部下拉菜单式导航的浏览效果,【任务8-3-2】设计与实现电脑版网站首页的导航结构,2设计与实现网站首页的顶部商品类型下拉菜单式导航结构,首页笔记本笔记本电脑笔记本配件电脑包数码影音电玩产品,表8-16网页0801.html顶部商品类型下拉菜单式导航结构对应的HTML代码HTML代码,行号01020304050607080910111213,【任务8-3-2】设计与实现电脑版网站首页的导航结构,2设计与实现网站首页的顶部商品类型下拉菜单式导航结构表8-16网页0801.html顶部商品类型下拉菜单式导航结构对应的HTML代码,HTML代码手机通信硬件外设办公设备,行号141516171819202122232425,【任务8-3-2】设计与实现电脑版网站首页的导航结构,2设计与实现网站首页的顶部商品类型下拉菜单式导航结构表8-17网页0801.html中顶部商品类型下拉菜单式导航结构对应的CSS代码行号CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-17,CSS代码,行号,网页0801.html中顶部商品类型下拉菜单式导航结构对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-17,CSS代码,行号,网页0801.html中顶部商品类型下拉菜单式导航结构对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-17,CSS代码,行号,网页0801.html中顶部商品类型下拉菜单式导航结构对应的CSS代码行号CSS代码,网站首页的顶部商品类型下拉菜单式导航的浏览效果如图8-7所示。

图8-7网站首页的顶部商品类型下拉菜单式导航的浏览效果,【任务8-3-2】设计与实现电脑版网站首页的导航结构,3设计与实现网站首页的顶部购物列表下拉菜单结构网站首页的顶部购物列表下拉菜单对应的HTML代码如表8-18所示，对应CSS代码如表8-19所示。

表8-18网页0801.html顶部购物列表下拉菜单对应的HTML代码,HTML代码我的购物车3件星（SAMSUNG）10.5英寸平板电脑￥3488.0x1,行号01020304050607080910,【任务8-3-2】设计与实现电脑版网站首页的导航结构,3设计与实现网站首页的顶部购物列表下拉菜单结构表8-18网页0801.html顶部购物列表下拉菜单对应的HTML代码,HTML代码合计3件￥6156.00,行号1112131415161718192021,【任务8-3-2】设计与实现电脑版网站首页的导航结构,3设计与实现网站首页的顶部购物列表下拉菜单结构,行号,表8-19网页0801.html中顶部购物列表下拉菜单对应的CSS代码CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-19,CSS代码,行号,网页0801.html中顶部购物列表下拉菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-19,CSS代码,行号,网页0801.html中顶部购物列表下拉菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-19,CSS代码,行号,网页0801.html中顶部购物列表下拉菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-19,CSS代码,行号,网页0801.html中顶部购物列表下拉菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-19,网页0801.html中顶部购物列表下拉菜单对应的CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-19,CSS代码,行号,网页0801.html中顶部购物列表下拉菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,3设计与实现网站首页的顶部购物列表下拉菜单结构网页0801.html中顶部购物列表下拉菜单的浏览效果如图8-8所示。

图8-8网页0801.html中顶部购物列表下拉菜单的浏览效果,【任务8-3-2】设计与实现电脑版网站首页的导航结构,4设计与实现网站首页的侧栏菜单显示结构网站首页的侧栏菜单对应的HTML代码如表8-20所示，对应的CSS代码如表8-21所示。

表8-20网页0801.html侧栏菜单对应的HTML代码,HTML代码所有类别电脑产品电脑整机-台式电脑平板电脑电脑一体机,行号010203040506070809101112,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-20,HTML代码,行号,网页0801.html侧栏菜单对应的HTML代码行号HTML代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-21,CSS代码,行号,网页0801.html中侧栏菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-21,CSS代码,行号,网页0801.html中侧栏菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-21,CSS代码,行号,网页0801.html中侧栏菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-21,CSS代码,行号,网页0801.html中侧栏菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-21,CSS代码,行号,网页0801.html中侧栏菜单对应的CSS代码行号CSS代码,【任务8-3-2】设计与实现电脑版网站首页的导航结构,表8-21,网页0801.html中侧栏菜单对应的CSS代码,#pd.tfootbackground:

url（./images/category.png）no-repeat;,CSS代码height:

9px;line-height:

0;overflow:

hidden;,行号147148149150151152153154155,网页0801.html中侧栏菜单的浏览效果如图8-9所示。

图8-9网页0801.html中侧栏菜单的浏览效果,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,任务描述设计与实现网站首页的品牌专区版块内容。

设计与实现网站首页的热卖专区版块内容。

设计与实现网站首页的低价专区版块内容。

设计与实现网站首页的畅销排行版块内容。

设计与实现网站首页的热门搜索版块内容。

【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,任务实施1设计与实现网站首页的品牌专区版块内容网站首页的品牌专区版块内容对应的HTML代码如表8-22所示，对应的CSS代码如表8-23所示。

表8-22网页0801.html中品牌专区版块内容对应的HTML代码,HTML代码品牌专区,行号010203040506,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,HTML代码更多品牌,行号070809101112131415,1设计与实现网站首页的品牌专区版块内容表8-22网页0801.html中品牌专区版块内容对应的HTML代码,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,表8-23,CSS代码,行号,网页0801.html中品牌专区版块内容对应的CSS代码行号CSS代码,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,表8-23,网页0801.html中品牌专区版块内容对应的CSS代码,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,表8-23,网页0801.html中品牌专区版块内容对应的CSS代码,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,2设计与实现网站首页的热卖专区版块内容网站首页的热卖专区版块内容对应的HTML代码如表8-24所示，对应的CSS代码如表8-25所示。

表8-24网页0801.html中热卖专区版块内容对应的HTML代码,HTML代码热卖专区易购价：

￥899.00市场价：

￥999.00,行号01020304050607080910,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,2设计与实现网站首页的热卖专区版块内容表8-24网页0801.html中热卖专区版块内容对应的HTML代码,HTML代码台电9.7英寸平板电脑,行号111213141516171819,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,2设计与实现网站首页的热卖专区版块内容表8-25网页0801.html中热卖专区版块内容对应的CSS代码行号CSS代码行号CSS代码,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,表8-25,CSS代码,行号,网页0801.html中热卖专区版块内容对应的CSS代码行号CSS代码,【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容,表8-25,CSS代码,行号,网页0801.html中热卖专区版块内容对应的CSS代码行号CSS代