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

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

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

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

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

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

任务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代码行号CS