内容发布更新时间 : 2024/12/26 10:06:44星期一 下面是文章的全部内容请认真阅读。
图 4-1 网站草图1
首页的页面规定好之后接下来的所有页面可以按照首页的模板制作头部和脚部，只用替换掉中间的内容即可。图4-2是抢购页面：
图 4-2 网站草图2
抢购页面产品如果有多个产品可以无限延伸下去。剩下的政策法规、公司简介栏目只需要替换首脚部，中间使用图文混排并居中即可。
第二节 设计制作PSD模板
使用工具PS制作网页效果图，并且使用切片工具将图片切成小图，避免不必要的背景色图片浪费图片资源，用户加载慢。优化网站打开速度和用户体验。
制作时合理使用PS中的辅助线工具能让网页看起来格式对齐。先确定网站结构是左右
结构还是一块块拼接或者瀑布流。确定后考虑配色，将网站的配色确定后，一块一块的设计完成组装起来成为一个页面，页面可能比较长，超过10000px的页面不能保存为psd，解决方法：保存为psb格式文件或者分成两个psd分别保存与切片，都需要与开发人员写注释或者交流清楚。
首先需要制作网站的头部如图4-3所示。
图 4-3 网页设计1
首先设计出网站的logo及加上起名等，在旁边做出文字介绍等内容。列出需要的页面做出菜单，并将选中的菜单项目稍微调色表示选中，如图4-4所示。
图 4-4 网页设计2
随后制作搜索框，一定要保证文本与搜索框对齐，不然排版会显得参差不齐。 接下来制作轮播页面，暂时先把轮播页面的图片排好版，将使用如下图片示例，图文混搭做出banner图效果后。可以在网上下载按钮等文件表示此图将轮播，在图片下方需要使用块来告诉用户有几张轮播，可以通过点击块来跳转页面。
图 4-5 网站设计3
图片制作好后，把他加入到网页中，插入按钮等一定要注意对齐。
图 4-6 网站设计4
接下来秒杀栏目使用网上的瓶装葡萄酒图片素材加上文案做出图4-7效果：
图 4-7 网站设计5
商品展示栏做出三个风格差不多的样式，都是使用上面标题加上下面小块商品拼接而成，商品只是做出一个模板可以复制多个：
图 4-8 网站设计6
最后制作脚部，再次强调文本一定要对齐，并且尽量不要使用宋体。由于LW红酒只是作为示范没有申请各种文件，此处使用x将声明信息打码，友情链接方面只作为样式参考。
图 4-9 网站设计7
整页psd样式，其中商品展示栏需要制作多个这里不再赘述：