第8章 用jQuery打造个性网站 8.1 案例背景介绍 8.2 网站材料 8.3 网站结构
第8章 用jQuery打造个性网站
在这一章里，将从零开始，创建一个网站并用jQuery来完善它。本章不仅讲解了jQuery如何应用在网站中，还介绍了开发一个网站时，前端开发工作者的一般工作流程。其中大量涉及HTML和CSS等内容。这也是为了提醒读者，作为一个出色的前端开发者，对HTML和CSS的理解同样重要，很多时候甚至比JavaScript更重要。
8.1 案例背景介绍
这是一个购物网站，网站的用途是向少男少女们提供时尚服装，首饰和玩具等。既然面向的客户群是年轻的一代，那么网站应该给人一种很时尚的感觉。因此，需要给网站增加一些与众不同的交互功能来吸引客户。
8.2 网站材料
假设已经准备好了搭建这个网站的基本素材，例如各种产品的种类，产品的介绍性文字，图片和价格等信息。现在的任务就是把这些素材合理利用，创建出一个给人一种舒适愉悦感觉的网站。
8.3 网站结构
8.3.1文件结构
每个网站或多或少都会用到图片、样式表和JavaScript脚本，因此在开始创建该网站之前，需要对文件夹结构进行以下设计。
- images文件夹用来存放将要用到的图片。
- styles文件夹用来存放CSS样式表。
- scripts文件夹用来存放jQuery脚本。
本章示例功能为展示商品和针对商品的详细介绍，因此只要做两个页面，即首页和商品详细页即可。目录结构如图8-1所示。
[插图]
8.3.2 网页结构
购物网站基本可以分为下面几个部分。
- 头部：相当于网站的品牌，可用于放置Logo标志和通往各个页面的链接等。
- 内容：放置页面的主体内容。
- 底部：放置页面其他链接和版权信息等。
该网站也不例外。首先把网站的主体结构用<div>标签表示出来，<div>的id 属性值分别为“header”、“content”和“footer”，HTML代码如下：
[插图]
这是一个通用的模板，网站首页（index.html）和产品详细页（detail.html）都可以使用该模板。有了这个基本的结构后，接下来的工作就是把相关的内容分别插入到各个页面。
8.3.3 界面设计
现在已经知道该网站每个页面的大概结构，再加上网站的原始素材，接下来就可以着手设计这些页面了。选用 Photoshop 图形设计工具来完成这项工作，两个页面的设计效果如图8-2和图8-3所示。
[插图]
[插图]
页面最终效果确定下来之后，就可以进行网页的CSS代码的设计了。