各种广告元素gif图片、flash动画等等，尽量吸引访客的眼球，然后突出的表现想表现的东西，这样就更加促成了转换率了。
第五、利用div+css制作网站页面。
网页设计固然重要，但是最关键的是如何将网页制作出来，设计和制作上面还会有不小的冲突，在切图后将页面排版出来，做出最初的div模型。制作时可以使用各种插件辅助工作，因为网上的js插件都是开源的，使用起来不用担心版权问题。Div模型制作出来之后将各种产品的排版加入其中，使之成为一个完整的页面。然后可以考虑网站的动画效果问题。这个问题需要考虑的更多，对于各种浏览器的支持以及兼容性问题，争取能兼容各大浏览器。
第六、网站的测试与交互
网页的div+css排版制作完成后需要交给制作后台的人员进一步工作，交付前需要进行兼容性测试，测试完成后将静态的网页文件交出进行后台添加变成动态网页。完成产品的添加以及各种功能的实现。
第四节 栏目设计
首页
导航栏：点击导航栏能进行挑战，本页面内跳转。 轮播栏：轮播栏展示公司主要推荐购买的三种产品。
秒杀栏：倒计时秒杀，做出动画显示倒计时，使网页看起来不是那么死板。
产品展示栏：产品展示，通过后台添加图片和介绍在前台展示，此处暂时只作为效果展示，不具备后台。
友情链接栏：网页友情链接，将用于推广网页。链接可后台添加，此处只作为效果展示。 脚部声明栏：必要的网页声明，否则违法，只作为效果展示。 公司介绍页
公司介绍页面主要为公司照片展示与公司文字介绍。 产品详情页
产品展示栏：展示产品的大图，并且添加价格及优惠。同时提供购买和加入购物车选项。 产品详情页面：产品详细介绍，以及优惠详情，各种信息可以加入其中，把想告诉客户的全部放在详情页面中。
限时抢购页
限时抢购商品展示栏：展示前面的限时抢购商品，提供抢购按钮，并且时间到了才能抢。 政策法规页面
结构大体上与公司详情页一样，可以排版图文。
第四章 公司网站制作
第一节 设计草图
首先需要确定的是网页的宽度，现在的主流显示器的分辨率有1280*960（4:3屏幕）、1366*768（低分屏笔记本）、1440*900（低分屏宽屏）或者更高1080P、2160P等。设计网页为了使这些分辨率的电脑都能使用，设计的宽度不能超过1280主流显示器的宽度。又为了保证横向的滚动条不会显示出来，采用了1248px宽度。整个网页居中显示，每一栏目使用栏目背景颜色填充，使网站能适应各种分辨率。画出草图如图4-1所示：
图 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
商品展示栏做出三个风格差不多的样式，都是使用上面标题加上下面小块商品拼接而成，商品只是做出一个模板可以复制多个：
网站设计与制作(div css)--大学本科毕业论文
