2.2 任务实现
通过网站需求分析，网站整体结构的设计思路已经非常清晰，在与客户当面沟通确认后，开始搜集相关素材来设计网站版面。版面设计完成后，应积极与客户沟通，若客户对版面效果不满意，应继续设计或修改直至客户满意或认可。
花公子蜂蜜网站项目的前端版面共有9个，分别为首页、关于花公子、新闻动态列表页、新闻动态内容页、产品中心列表页、产品中心内容页、给我留言、联系我们、网站后台登录页。下面以首页版面设计为例讲解设计过程，具体设计版面的步骤不做演示，其他版面设计只给出设计的最终结果。
2.2.1 设计首页版面
1．首页版面构思
网站首页是展示给访问者的第一个页面，是给访问者第一印象的页面。当用户第一时间访问首页时，将以一种简约、清新、和谐的风格展现在眼前，并且通过banner营造出浓厚的蜂蜜芳香和纯天然生产过程的氛围，同时在首页添加网站简介、新闻动态和最新蜂蜜产品内容，让访问者能够方便找到想了解的信息。在页面的配色上，以绿色作为主色调，给人传递绿色、健康的理念，再配以蜂蜜的浅黄色，突出蜂蜜的品质。
2．首页版面粗略布局
根据需求及首页设计思路，粗略画出首页版面的布局，如图2-15所示。
3．首页版面细化布局
根据首页版面的粗略布局，进一步细化到具体的栏目及栏目的位置，首页版面细化布局图如图2-16所示。
图2-15 首页版面粗略布局图
图2-16 首页版面细化布局图
4．搜集首页版面相关素材
搜集素材是网站版面设计的重要环节。在这个环节中不要盲目去找素材，应该紧密结合网站的主题，有针对性地去搜集。例如搜集页头的素材时，可以围绕着小蜜蜂、电话图标这两个关键词去进行，又如在搜集banner的素材时，围绕着“蜂蜜”这个关键词就能搜集到很多相关的图片素材，如图2-17和图2-18所示。
图2-17 蜂蜜图片1
图2-18 蜂蜜图片2
5．设计首页版面
根据首页版面的细化布局图和搜集到的素材，使用相关的工具对素材进行加工处理，然后进行排版、设计，最终设计出首页版面，效果如图2-19所示。
图2-19 首页版面效果图
2.2.2 设计关于花公子版面
根据版面设计的原则，按照首页版面设计的过程设计关于花公子版面，页面效果如图2-20所示。
图2-20 关于花公子版面效果图
2.2.3 设计新闻动态列表页版面
根据版面设计的原则，按照首页版面设计的过程设计新闻动态列表页版面，页面效果如图2-21所示。
图2-21 新闻动态列表页版面效果图
2.2.4 设计新闻动态内容页版面
根据版面设计的原则，按照首页版面设计的过程设计新闻动态内容页版面，页面效果如图2-22所示。
图2-22 新闻动态内容页版面效果图
2.2.5 设计产品中心列表页版面
根据版面设计的原则，按照首页版面设计的过程设计产品中心列表页版面，页面效果如图2-23所示。
图2-23 产品中心列表页版面效果图
2.2.6 设计产品中心内容页版面
根据版面设计的原则，按照首页版面设计的过程设计产品中心内容页版面，页面效果如图2-24所示。
图2-24 产品中心内容页版面效果图
2.2.7 设计给我留言版面
根据版面设计的原则，按照首页版面设计的过程设计给我留言版面，页面效果如图2-25所示。
图2-25 给我留言版面效果图
2.2.8 设计联系我们版面
根据版面设计的原则，按照首页版面设计的过程设计联系我们版面，页面效果如图2-26所示。
图2-26 联系我们版面效果图
2.2.9 设计网站后台登录页版面
根据版面设计的原则，按照首页版面设计的过程设计网站后台登录页版面，页面效果如图2-27所示。
图2-27 网站后台登录页版面效果图