PHP动态网站开发项目实战
上QQ阅读APP看书,第一时间看更新

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 网站后台登录页版面效果图