3.2 任务实现
本任务仅以首页版面切图为例讲解“切图”的过程，其他版面的“切图”不做详细的讲解，仅提供“切图”结果代码。
在进行“切图”前，首先创建整个项目的目录，如图3-8所示，然后对网站前台的所有页面进行分析，得出如下要点。
图3-8 网站项目目录
☆ 所有页的背景颜色为#EEEEEE。
☆ 网站页面主体的宽度为1000px。
☆ 创建的样式文件为style.css，保存的目录为“web/css/”。
☆ 全局的样式如下：
3.2.1 首页版面“切图”
该版面切图所形成的静态网页文件名为index.html，保存的目录为“web/”。
使用相关工具打开首页版面源文件，利用所学知识对版面进行分析。首页版位主要由“页头”版位、“导航”版位、“banner”版位、“关于花公子、新闻动态和联系信息”形成的横向版位、“最新蜂蜜”版位、“友情链接”版位和“页脚”版位组成。在切图的时候，按照自上而下、自左向右的顺序进行。
1．“页头”版位“切图”
（1）分析版位。
“页头”版位主要由左侧的Logo和右侧的服务热线组成。根据CSS盒子模型原理，该版位的CSS盒子模型如图3-9所示。
图3-9 “页头”版位CSS盒子模型图
（2）切出（或导出）版位图片。
该版位需切出（或导出）的图片有网站Logo和电话图标，图片的格式为PNG，保存的目录为“web/images/”，图片如图3-10和图3-11所示。
图3-10 网站Logo
图3-11 电话图标
（3）编写该版位结构和内容的代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
（4）编写CSS代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
通过浏览器预览的效果如图3-12所示。
2．“导航”版位“切图”
（1）分析版位。
根据版面源文件，“导航”版位主要由首页、关于花公子、新闻动态、产品中心、给我留言、联系我们6个菜单组成，在分析的时候要注意以下两点。
图3-12 网页页头的效果
① 首页菜单的背景图：该背景图只用在“首页”这个菜单项上。
② 对导航最外面的盒子宽度不做控制，让其适应屏幕宽度，6个菜单均在页面主体宽度范围内。
根据CSS盒子模型原理，“导航”版位的CSS盒子模型如图3-13所示。
图3-13 “导航”版位CSS盒子模型图
（2）切出（或导出）版位图片。
通过分析，该版位需导出的图片只有一张，即“首页”菜单项的背景图片，格式为PNG，保存的目录为“web/images/”，图片效果如图3-14所示。
图3-14 首页菜单项背景图
（3）编写该版位结构和内容的代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
（4）编写CSS代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
此时，“首页”版面的效果如图3-15所示。
图3-15 “首页”版面效果图1
3．“banner”版位“切图”
（1）分析版位。
该版位的结构非常简单，主要由一张banner组成，对banner最外层盒子的宽度不做控制，让其左、右两边伸展以占满屏幕。banner图片占满页面主体宽度，即1000px。根据CSS盒子模型原理，“banner”版位的CSS盒子模型如图3-16所示。
图3-16 “banner”版位CSS盒子模型图
（2）切出（或导出）版位图片。
该版位只需导出banner图片即可，图片效果如图3-17所示。
图3-17 banner图片效果
（3）编写版位结构和内容代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
（4）编写CSS代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
此时，“首页”版面的效果如图3-18所示。
图3-18 “首页”版面效果图2
4．“关于花公子、新闻动态和联系信息”形成的横向版位“切图”
（1）分析版位。
该横向版位是“首页”版面中较为复杂的版位。该横向版位可进一步划分成“关于花公子”版位、“新闻动态”版位和右侧的“联系信息”版位。横向版位与“关于花公子”版位、“新闻动态”版位、“联系信息”版位的关系是包含与被包含的关系。根据CSS盒子模型原理，该横向版位的CSS盒子模型如图3-19所示。
图3-19 “关于花公子”“新闻动态”和“联系信息”形成的横向版位CSS盒子模型图
（2）切出（或导出）版位图片。
通过分析，该版位需导出的图片如图3-20～图3-25所示。
图3-20 形象图
图3-21 400电话图片
图3-22 微信图片
图3-23 访客留言图片
图3-24 QQ在线客服图片
图3-25 QQ在线图片
（3）编写版位结构和内容的代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
（4）编写CSS代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
此时，“首页”页面的效果如图3-26所示。
5．“最新蜂蜜”版位“切图”
（1）分析版位。
该版位主要输出最新的蜂蜜产品。根据CSS盒子模型原理，该版位的CSS盒子模型如图3-27所示。
（2）切出（或导出）版位图片。
通过分析版面源文件可知，该版位需导出的图片为5张产品图片，如图3-28所示。
（3）编写版位结构和内容的代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
图3-26 “首页”页面效果图3
图3-27 “最新蜂蜜”版位CSS盒子模型图
图3-28 “最新蜂蜜”版位需导出的图片
（4）编写CSS代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
此时，“首页”页面的效果如图3-29所示。
6．“友情链接”版位“切图”
（1）分析版位。
该版位从整体上分成左、右两部分，左边为栏目标题——友情链接，右边为具体的文本链接。根据CSS盒子模型原理，该版位的CSS盒子模型如图3-30所示。
（2）切出（或导出）版位图片。
通过分析版面源文件可知，该版位没有需要切出（或导出）的图片。
（3）编写版位结构和内容的代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
图3-29 “首页”页面效果图4
图3-30 “友情链接”版位CSS盒子模型图
（4）编写CSS代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
此时，“首页”页面的效果如图3-31所示。
图3-31 “首页”页面效果图5
7．“页脚”版位“切图”
（1）分析版位。
根据版面源文件，该版位最外层只有一个盒子，但对其宽度不做控制，让其适应屏幕宽度；通过第二层盒子使该版位的内容在页面主体宽度范围内呈现；第三层盒子左、右各有一个，左边的盒子用于输出版权等信息，右边的盒子用于输出二维码图片。根据CSS盒子模型原理，“页脚”版位的CSS盒子模型如图3-32所示。
（2）切出（或导出）版位图片。
通过分析版面源文件可知，该版位需切出（或导出）的图片为二维码图片，如图3-33所示。
图3-32 “页脚”版位CSS盒子模型图
图3-33 二维码图片
（3）编写版位结构和内容的代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
（4）编写CSS代码。
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
该版位的CSS代码编写完成后，整个“首页”页面的“切图”顺利完成，此时“首页”页面的效果图如图3-34所示。
3.2.2 关于花公子版面“切图”
该版面的页头、导航、banner、友情链接、页脚等版位与首页相应的版位相同，因此，该版面的“切图”只需切主体部分。
图3-34 “首页”页面切图最终效果图
1．分析版位
通过分析该版面的主体部分，根据CSS盒子模型原理得出该版面主体版位的CSS盒子模型，如图3-35所示。
2．切出（或导出）版位图片
通过分析版面源文件可知，该版位需切出（或导出）的图片为3个图标，如图3-36所示。
3．编写版位结构和内容的代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
图3-35 “关于花公子”页面主体版位CSS盒子模型图
图3-36 “关于花公子”版面中需切出（或导出）的图标
4．编写CSS代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“关于花公子”页面的效果图如图3-37所示。
3.2.3 新闻动态列表页版面“切图”
该版面的页头、导航、banner、友情链接、页脚等版位与首页相应的版位相同，因此对该版面的“切图”只需考虑切主体部分。
1．分析版位
通过分析该版面的主体部分，根据CSS盒子模型原理得出该版面主体版位的CSS盒子模型，如图3-38所示。
2．切出（或导出）版位图片
通过分析版面源文件可知，该版位没有需要切出（或导出）的图片。
3．编写版位结构和内容的代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下HTML代码：
图3-37 “关于花公子”页面的效果图
图3-38 “新闻动态”版面主体版位CSS盒子模型图
4．编写CSS代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“新闻动态”列表页面的效果图如图3-39所示。
3.2.4 新闻动态内容页版面“切图”
该版面的页头、导航、banner、友情链接、页脚版位与首页相应的版位相同，页面主体左侧的“新闻类别”版位与新闻动态列表页相应的版位相同，页面主体左侧的“联系我们”版位与“关于花公子”页面相应的版位相同，因此，这里只需考虑切页面主体右侧新闻详细内容版位部分。
1．分析版位
通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-40所示。
2．切出（或导出）版位图片
通过分析版面源文件可知，该版位没有需要切出（或导出）的图片。
3．编写版位结构和内容的代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：
图3-39 “新闻动态”列表页面的效果图
图3-40 “新闻动态”内容页主体部分版位CSS盒子模型图
4．编写CSS代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“新闻动态”内容页面的效果图如图3-41所示。
图3-41 “新闻动态”内容页页面效果
3.2.5 产品中心列表页版面“切图”
该版面的页头、导航、banner、友情链接、页脚版位与首页相应的版位相同，页面主体左侧的“产品类别”版位与“新闻动态”内容页相应的版位相同，页面主体左侧的“联系我们”版位与“关于花公子”页面相应的版位相同，因此，这里只需考虑切页面主体右侧产品缩略图列表部分。
1．分析版位
通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-42所示。
图3-42 “产品中心”列表页主体部分版位CSS盒子模型图
2．切出（或导出）版位图片
通过分析版面源文件可知，该版位需切出（或导出）的图片如图3-43和图3-44所示。
图3-43 蜂蜜产品图
图3-44 产品方框图
3．编写版位结构和内容的代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：
4．编写CSS代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“产品中心”列表页面的效果图如图3-45所示。
图3-45 “产品中心”列表页面的效果图
3.2.6 产品中心内容页版面“切图”
该版面的页头、导航、banner、友情链接、页脚版位与首页相应的版位相同，页面主体左侧的“产品类别”版位、“联系我们”版位与“产品中心”列表页相应的版位相同，因此，这里只需考虑切该版面主体右侧产品详细内容部分。
1．分析版位
通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-46所示。
2．切出（或导出）版位图片
通过分析版面源文件可知，该版位需切出（或导出）的图片如图3-47和图3-48所示。
图3-46 “产品中心”内容页主体部分版位CSS盒子模型
图3-47 产品内容页切出（或导出）图片1
图3-48 产品内容页切出（或导出）图片2
3．编写版位结构和内容的代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：
4．编写CSS代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“产品中心”内容页面的效果图如图3-49所示。
图3-49 “产品中心”内容页面的效果图
3.2.7 给我留言版面“切图”
该版面的页头、导航、banner、友情链接、页脚版位与首页相应的版位相同，页面主体左侧的“产品类别”版位、“联系我们”版位与“产品中心”列表页相应的版位相同，因此，这里只需考虑切该版面主体右侧留言部分。
1．分析版位
通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-50所示。
2．切出（或导出）版位图片
通过分析版面源文件可知，该版位需切出（或导出）的图片如图3-51所示。
图3-50 “给我留言”版面主体部分版位CSS盒子模型图
图3-51 “给我留言”版面需切出（或导出）的图片
3．编写版位结构和内容的代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：
4．编写CSS代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“给我留言”内容页面的效果图如图3-52所示。
图3-52 “给我留言”页面的效果图
3.2.8 联系我们版面“切图”
该版面与图3-35所示的“关于花公子”版面基本相同，不同的是“联系我们”版面主体右侧多了一个联系我们的banner（横幅）图。
1．分析版位
通过分析该版面主体部分版位，根据CSS盒子模型原理得出该版位的CSS盒子模型，如图3-53所示。
2．切出（或导出）版位图片
通过分析版面源文件可知，该版位需切出（或导出）的图片如图3-54所示。
图3-53 “联系我们”版面主体部分版位CSS盒子模型
图3-54 联系我们banner图片
3．编写版位结构和内容的代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写该页面主体部分的如下HTML代码：
4．编写CSS代码
根据该版位的CSS盒子模型，按从外向里、从左向右的顺序逐层编写如下CSS代码：
该版位的CSS代码编写完成后，该版面的“切图”顺利完成，此时“联系我们”页面的效果图如图3-55所示。
图3-55 “联系我们”页面效果图