3.2 任务实现

本任务仅以首页版面切图为例讲解“切图”的过程，其他版面的“切图”不做详细的讲解，仅提供“切图”结果代码。

在进行“切图”前，首先创建整个项目的目录，如图3-8所示，然后对网站前台的所有页面进行分析，得出如下要点。

☆ 所有页的背景颜色为#EEEEEE。

☆ 网站页面主体的宽度为1000px。

☆ 创建的样式文件为style.css，保存的目录为“web/css/”。

☆ 全局的样式如下：

3.2.1 首页版面“切图”

该版面切图所形成的静态网页文件名为index.html，保存的目录为“web/”。

使用相关工具打开首页版面源文件，利用所学知识对版面进行分析。首页版位主要由“页头”版位、“导航”版位、“banner”版位、“关于花公子、新闻动态和联系信息”形成的横向版位、“最新蜂蜜”版位、“友情链接”版位和“页脚”版位组成。在切图的时候，按照自上而下、自左向右的顺序进行。

1．“页头”版位“切图”

（1）分析版位。

“页头”版位主要由左侧的Logo和右侧的服务热线组成。根据CSS盒子模型原理，该版位的CSS盒子模型如图3-9所示。

（2）切出（或导出）版位图片。

该版位需切出（或导出）的图片有网站Logo和电话图标，图片的格式为PNG，保存的目录为“web/images/”，图片如图3-10和图3-11所示。

（3）编写该版位结构和内容的代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

（4）编写CSS代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

通过浏览器预览的效果如图3-12所示。

2．“导航”版位“切图”

（1）分析版位。

根据版面源文件，“导航”版位主要由首页、关于花公子、新闻动态、产品中心、给我留言、联系我们6个菜单组成，在分析的时候要注意以下两点。

① 首页菜单的背景图：该背景图只用在“首页”这个菜单项上。

② 对导航最外面的盒子宽度不做控制，让其适应屏幕宽度，6个菜单均在页面主体宽度范围内。

根据CSS盒子模型原理，“导航”版位的CSS盒子模型如图3-13所示。

（2）切出（或导出）版位图片。

通过分析，该版位需导出的图片只有一张，即“首页”菜单项的背景图片，格式为PNG，保存的目录为“web/images/”，图片效果如图3-14所示。

（3）编写该版位结构和内容的代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

（4）编写CSS代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

此时，“首页”版面的效果如图3-15所示。

3．“banner”版位“切图”

（1）分析版位。

该版位的结构非常简单，主要由一张banner组成，对banner最外层盒子的宽度不做控制，让其左、右两边伸展以占满屏幕。banner图片占满页面主体宽度，即1000px。根据CSS盒子模型原理，“banner”版位的CSS盒子模型如图3-16所示。

（2）切出（或导出）版位图片。

该版位只需导出banner图片即可，图片效果如图3-17所示。

（3）编写版位结构和内容代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

（4）编写CSS代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

此时，“首页”版面的效果如图3-18所示。

4．“关于花公子、新闻动态和联系信息”形成的横向版位“切图”

（1）分析版位。

该横向版位是“首页”版面中较为复杂的版位。该横向版位可进一步划分成“关于花公子”版位、“新闻动态”版位和右侧的“联系信息”版位。横向版位与“关于花公子”版位、“新闻动态”版位、“联系信息”版位的关系是包含与被包含的关系。根据CSS盒子模型原理，该横向版位的CSS盒子模型如图3-19所示。

（2）切出（或导出）版位图片。

通过分析，该版位需导出的图片如图3-20～图3-25所示。

（3）编写版位结构和内容的代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

（4）编写CSS代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

此时，“首页”页面的效果如图3-26所示。

5．“最新蜂蜜”版位“切图”

（1）分析版位。

该版位主要输出最新的蜂蜜产品。根据CSS盒子模型原理，该版位的CSS盒子模型如图3-27所示。

（2）切出（或导出）版位图片。

通过分析版面源文件可知，该版位需导出的图片为5张产品图片，如图3-28所示。

（3）编写版位结构和内容的代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

（4）编写CSS代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

此时，“首页”页面的效果如图3-29所示。

6．“友情链接”版位“切图”

（1）分析版位。

该版位从整体上分成左、右两部分，左边为栏目标题——友情链接，右边为具体的文本链接。根据CSS盒子模型原理，该版位的CSS盒子模型如图3-30所示。

（2）切出（或导出）版位图片。

通过分析版面源文件可知，该版位没有需要切出（或导出）的图片。

（3）编写版位结构和内容的代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

（4）编写CSS代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

此时，“首页”页面的效果如图3-31所示。

7．“页脚”版位“切图”

（1）分析版位。

根据版面源文件，该版位最外层只有一个盒子，但对其宽度不做控制，让其适应屏幕宽度；通过第二层盒子使该版位的内容在页面主体宽度范围内呈现；第三层盒子左、右各有一个，左边的盒子用于输出版权等信息，右边的盒子用于输出二维码图片。根据CSS盒子模型原理，“页脚”版位的CSS盒子模型如图3-32所示。

（2）切出（或导出）版位图片。

通过分析版面源文件可知，该版位需切出（或导出）的图片为二维码图片，如图3-33所示。

（3）编写版位结构和内容的代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

（4）编写CSS代码。

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

该版位的CSS代码编写完成后，整个“首页”页面的“切图”顺利完成，此时“首页”页面的效果图如图3-34所示。

3.2.2 关于花公子版面“切图”

该版面的页头、导航、banner、友情链接、页脚等版位与首页相应的版位相同，因此，该版面的“切图”只需切主体部分。

1．分析版位

通过分析该版面的主体部分，根据CSS盒子模型原理得出该版面主体版位的CSS盒子模型，如图3-35所示。

2．切出（或导出）版位图片

通过分析版面源文件可知，该版位需切出（或导出）的图片为3个图标，如图3-36所示。

3．编写版位结构和内容的代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

4．编写CSS代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“关于花公子”页面的效果图如图3-37所示。

3.2.3 新闻动态列表页版面“切图”

该版面的页头、导航、banner、友情链接、页脚等版位与首页相应的版位相同，因此对该版面的“切图”只需考虑切主体部分。

1．分析版位

通过分析该版面的主体部分，根据CSS盒子模型原理得出该版面主体版位的CSS盒子模型，如图3-38所示。

2．切出（或导出）版位图片

通过分析版面源文件可知，该版位没有需要切出（或导出）的图片。

3．编写版位结构和内容的代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：

4．编写CSS代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“新闻动态”列表页面的效果图如图3-39所示。

3.2.4 新闻动态内容页版面“切图”

该版面的页头、导航、banner、友情链接、页脚版位与首页相应的版位相同，页面主体左侧的“新闻类别”版位与新闻动态列表页相应的版位相同，页面主体左侧的“联系我们”版位与“关于花公子”页面相应的版位相同，因此，这里只需考虑切页面主体右侧新闻详细内容版位部分。

1．分析版位

通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-40所示。

2．切出（或导出）版位图片

通过分析版面源文件可知，该版位没有需要切出（或导出）的图片。

3．编写版位结构和内容的代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：

4．编写CSS代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“新闻动态”内容页面的效果图如图3-41所示。

3.2.5 产品中心列表页版面“切图”

该版面的页头、导航、banner、友情链接、页脚版位与首页相应的版位相同，页面主体左侧的“产品类别”版位与“新闻动态”内容页相应的版位相同，页面主体左侧的“联系我们”版位与“关于花公子”页面相应的版位相同，因此，这里只需考虑切页面主体右侧产品缩略图列表部分。

1．分析版位

通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-42所示。

2．切出（或导出）版位图片

通过分析版面源文件可知，该版位需切出（或导出）的图片如图3-43和图3-44所示。

3．编写版位结构和内容的代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：

4．编写CSS代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“产品中心”列表页面的效果图如图3-45所示。

3.2.6 产品中心内容页版面“切图”

该版面的页头、导航、banner、友情链接、页脚版位与首页相应的版位相同，页面主体左侧的“产品类别”版位、“联系我们”版位与“产品中心”列表页相应的版位相同，因此，这里只需考虑切该版面主体右侧产品详细内容部分。

1．分析版位

通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-46所示。

2．切出（或导出）版位图片

通过分析版面源文件可知，该版位需切出（或导出）的图片如图3-47和图3-48所示。

3．编写版位结构和内容的代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：

4．编写CSS代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“产品中心”内容页面的效果图如图3-49所示。

3.2.7 给我留言版面“切图”

该版面的页头、导航、banner、友情链接、页脚版位与首页相应的版位相同，页面主体左侧的“产品类别”版位、“联系我们”版位与“产品中心”列表页相应的版位相同，因此，这里只需考虑切该版面主体右侧留言部分。

1．分析版位

通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-50所示。

2．切出（或导出）版位图片

通过分析版面源文件可知，该版位需切出（或导出）的图片如图3-51所示。

3．编写版位结构和内容的代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：

4．编写CSS代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“给我留言”内容页面的效果图如图3-52所示。

3.2.8 联系我们版面“切图”

该版面与图3-35所示的“关于花公子”版面基本相同，不同的是“联系我们”版面主体右侧多了一个联系我们的banner（横幅）图。

1．分析版位

通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-53所示。

2．切出（或导出）版位图片

通过分析版面源文件可知，该版位需切出（或导出）的图片如图3-54所示。

3．编写版位结构和内容的代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：

4．编写CSS代码

根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：

该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“联系我们”页面的效果图如图3-55所示。