Question

8.3.1　文件结构

每个网站或多或少都会用到图片、样式表和JavaScript脚本，因此在开始创建该网站之前，需要对文件夹结构进行以下设计。

　images文件夹用来存放将要用到的图片。

　styles文件夹用来存放CSS样式表。

　scripts文件夹用来存放jQuery脚本。

本章示例功能为展示商品和针对商品的详细介绍，因此只要做两个页面，即首页和商品详细页即可。目录结构如图8-1所示。

图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代码的设计了。

图8-2　首页设计效果

图8-3　详细页设计效果