第13章 鲜品园综合案例网站

高等学校规划教材Web前端开发实例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第13章鲜品园综合案例网站目录13.1网站的开发流程13.2网站结构13.3网站技术分析13.4制作首页13.5制作最新资讯页13.6网站的整合与维护13.1网站的开发流程13.1网站的开发流程 在讲解具体页面的制作之前，首先简单介绍网站的开发流程。典型的网站开发流程包括以下几个阶段。 1）规划站点：包括确立站点的策略或目标、确定所面向的用户及站点的数据需求。 2）网站制作：包括设置网站的开发环境、规划页面设计，以及布局、创建内容资源等。 3）测试站点：测试页面的链接及网站的兼容性。 4）发布站点：将站点发布到服务器上。13.2网站结构13.2.1站点的目录结构13.2.2页面的组成13.2.1站点的目录结构 1．创建站点根目录 本章讲解的综合案例建立在D:/web/ch13目录中，该目录作为站点根目录。 2．根目录下的通用目录 对于中小型网站，一般会创建如下通用的目录结构。images目录：存放网站的图像素材。css目录：存放CSS样式文件，实现内容和样式的分离。js目录：存放jQuery和JavaScript脚本文件。13.2.2页面的组成 鲜品园网站的主要组成页面如下。

首页（index.html）：显示网站的Logo、导航菜单、广告、果园推荐、每日新品特卖、蔬果资讯和版权声明等信息。蔬果热卖页（hot.html）：显示产品分类、在线客服、分页展示热卖产品的页面。全部产品页（produ.html）：显示产品分类、在线客服、分页展示全部产品的页面。产品明细页（orange.html）：显示产品详细内容的页面。最新资讯页（consult.html）：显示新闻列表的页面。联系我们页（touch.html）：显示招聘职位信息的页面。13.3网站技术分析13.3网站技术分析 1．HTML5 HTML5是网页结构语言，负责组织网页结构，站点中的页面都需要使用网页结构语言建立起网页的内容架构。

搭建页面内容架构。DIV布局页面内容。使用文件结构元素定义页面内容。使用列表和链接制作导航菜单。使用表单技术制作联系我们表单。13.3网站技术分析 2．CSS3 制作本网站中使用的CSS3的主要技术如下。网站整体样式的规划。网站顶部Logo的样式设计。网站导航菜单的样式设计。网站广告条的样式设计。网站栏目的样式设计。网站产品展示的样式设计。网站新闻列表的样式设计。网站表单的样式设计。网站版权信息的样式设计。13.3网站技术分析 3．JavaScript和jQuery 制作本网站中使用的JavaScript和jQuery的主要技术如下。使用jQuery实现页面顶部导航菜单的鼠标指针经过效果。使用jQuery实现鼠标指针经过“我的购物车”链接时弹出购物车信息的效果。使用JavaScript实现首页果园推荐产品的鼠标指针经过平移效果。使用JavaScript实现首页广告条图片的轮播效果。使用JavaScript实现首页每日新品特卖图片的鼠标指针经过平移效果。

13.3网站技术分析 3．JavaScript和jQuery使用jQuery实现首页蔬果资讯左侧文字的向上循环滚动字幕效果。使用jQuery实现首页蔬果资讯右侧图片的幻灯播放效果。使用jQuery实现蔬果热卖和全部产品页面的产品分页显示效果。使用JavaScript实现产品明细页单击“购买数量”上、下箭头实现数量增减的效果。使用jQuery实现产品明细页单击“加入购物车”或“立即购买”按钮的弹窗效果。使用jQuery实现产品明细页产品选项卡的切换效果。

13.4制作首页13.4制作首页

网站首页（index.html）包括网站的Logo、导航菜单、广告、果园推荐、每日新品特卖、蔬果资讯和版权声明等信息。

制作过程如下。

1.页面结构代码 2.页面样式设计

3.页面交互与网页特效的实现13.5制作最新资讯页13.5制作最新资讯页

最新资讯页（consult.html）的布局与首页相似，如网站的Logo、导航菜单、版权区域等，它们仅仅是页面主体的内容不同。该页面的主体内容由两部分组成，左侧包括产品分类和在线客服的链接；右侧显示新闻列表。

制作过程如下。

1.页面结构代码 2.页面样式设计

3.页面交互与网页特效的实现13.6网站的整合与维护13.6网站的整合与维护

在前面讲解的鲜品园的相关示例中，都是按照某个栏目进行页面制作的，并未将所有的页面整合在一个统一的站点之下。读者完成鲜品园所有栏目的页面后，需要将这些栏目页面整合在一起形成一个完整的站点。需要注意的是，当这些栏目整合完成之后，要正确地设置各级页面之间的链接，使之有效地完成各个页面跳转。13.6网站的整合与维护

建站容易维护难。对于网站来说，只有不断地更新内容，才能保证网站的生命力。

1）在网站建设初期，要对网站的各个栏目和子栏目进行细致的规划，在此基础上确定哪些是经常要更新的内容，哪些是相对稳定的内容。

2）在网站建设过程中，要对后续维护给予足够的重视，保证网站后续维护的资金和人力。习题131．制作鲜品园网站的蔬果热卖页（hot.html），