防盗门销售网站
目 录
引言 1
一、 开发工具和技术 1
（一）开发工具 1
（二）开发技术 1
二、主体规划 1
（一）网站内容规划 1
（二）网页框架结构 2
1、首页布局 2
2、子页 3
三、网站设计与实现 3
（一）首页设计与实现 3
1、Logo设计 4
2、banner设计 4
3、整体页面效果的实现 4
（二） 二级页面制作与链接 6
1、二级页面 6
2、 二级页面的链接 10
（三） 登录注册页面 13
1、登录页面 13
2、注册页面 13
四、JavaScript特效与Flash动画的实现 14
（一）Logo发光特效 14
（二）图片滚动效果 15
（三）banner轮换效果 17
五、网站测试 19
总结 19
致谢 21
参考文献 21
引言
随着社会的进步和经济的发展，人们的沟通越来越信息化，网上购物是人们现在最时尚的潮流。随着偷盗、斗殴等犯罪事件逐年上升，人们对自己的安全越来越重视，对防盗的需求越来越多，因此建立一个功能健全，页面干净利落优美的防盗门销售网站可以满足人们对市场的需求。
开发工具和技术
（一）开发工具
Dreamweaver采用“所见即所得”的直观设计模式，充分尊重设计者本人的原始想法和行为设计。它将网页设计功能中的技术效果部分和设计部分分离开来，使用户专注于自己本身的，而其余的 *好棒文|www.hbsrm.com +Q: ￥351916072￥
工作由Dreamweaver自动完成。另外，还有一点值得说明的是，Dreamweaver 可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。
PHOTOSHOP的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是一种图形、图像处理的一种软件，提供了一种与众不同的方法来创建WEB图形，并且拥有所有其他图形处理工具的诸多优点。PHOTOSHOP的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，PHOTOSHOP中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也有很大的帮助的。
Flash是一种与众不同的网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。Flash提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果。
开发技术
在网站的制作方面，我的网站开发技术主要以HTML+CSS语言为主，Javascript特效为辅，将自己在学校中所学的知识运用到网站中去，从而设计出一个不错的网站。
二、主体规划
（一）网站内容规划
首页页面上放置了公司新闻，推荐产品和相关视频链接。一级页面的后面是公司新闻、最新产品、常见问题、给我留言和联系我们这几个页面。另外每一个子页面都有产品分类的相关链接。具体如图2-1所示：
图2-1网站功能结构图
（二）网页框架结构
1、首页布局
网站首页布局以干净利落为原则，水平分割展示每一块内容让大家可以快速了解我的网站所要展示的东西和功能。中间左侧部分链接的与我们公司有关的新闻，正中展示的我们向大家推荐的几款优质的、性价比很高的防盗门。右侧链接的是一个视频。
具体框架如图2-2所示：
logo
广告语
导航
公司新闻
推荐产品
视频
版权
图2-2首页布局框架
2、子页
子页主要分为上下两个部分，上部分仍然使用网页头部方式设计，将网站的导航栏及banner展现出来。下半部分又分为左右两部分，左边是产品列表的导航，右边部分则是新闻列表数据。这样设计不仅使网页美观精致，更间接地把重要信息展现给大家。
具体框架如图2-3所示：
logo
广告语
导航
产品列表
主体内容
版权
图2-3子页布局框架
三、网站设计与实现
（一）首页设计与实现
1、Logo设计
Logo背景颜色为纯白色和黄色结合，紧扣网站主题，由图案和英文单词组成，直观的表现出了网站的内容。点缀的星光可以让浏览者的眼睛一亮，让浏览者对我们的网站产生兴趣与好感，从而关注我们的网站，从而加深浏览者对我们网站的了解，方便我们网站防盗门的销售。如图3-1所示：
图3-1 Logo设计
2、banner设计
首页banner一要体现企业的高端、大气、上档次，二是要体现防盗门产品特色的风格。三是要符合整体的页面设计。我的网站的所设计的banner是一个大屏广告效果，它可以切换广告，让浏览者有一些具体的了解，从而对我们的防盗门销售网站产生信心，并且可以放心的在我们的网站浏览与消费。具体效果如图3-2所示:
图3-2首页banner
3、整体页面效果的实现
如果把我们的网站当做一千零一夜，书中的每一个故事都是一个网页，那么首页就相当于书的封面和目录。书中的故事开头都很精彩，引人入胜，我希望我们的首页也可以吸引大家的眼球。首页中包含了指向网站中其他页面的超链接，用户通过主页可以访问网站的其他页面。
网站首页是网站整体形象的浓缩，要进行创意设计，不仅要美观简洁，而且要紧扣防盗门销售网站的定位与宗旨。通过首页，我们想让浏览者了解我们网站的主要内容和功能，从而加深对我们防盗门销售网站的形象，通过主要的版块设置让浏览者对我们的网站的功能有所了解并且产生兴趣。首页把网站所有的六大版块一目了然的呈现给了浏览者。浏览者可以通过这六大板块来了解我们的网站，加深对我们网站的印象，从而开始对我们网站防盗门的销售有一个很大的帮助和改善。网站首页下方的视频可以给浏览者不一样的风采。如图3-3所示：
图3-3视频欣赏
网站首页中的图片和文字都是自己在网上提前收集好用来设计网站的材料，将这些收集好的材料放到自己的防盗门首页当中。并且在首页当中加入Javascript特效的运用，展现我们防盗门网站的风格与特色，从而给浏览者留下深刻的印象。我在网站的色彩搭配上主要以白色和灰色为主，加以少量的黄色和黑色，白色给人以安静与平和的情绪，同时具有纯洁坦率朴素的形象。而灰色幽幽的，淡淡的，两种颜色交相呼应，从而来显出整个网站的主题，体现我们网站的特色。如图3-4所示：
引言 1
一、 开发工具和技术 1
（一）开发工具 1
（二）开发技术 1
二、主体规划 1
（一）网站内容规划 1
（二）网页框架结构 2
1、首页布局 2
2、子页 3
三、网站设计与实现 3
（一）首页设计与实现 3
1、Logo设计 4
2、banner设计 4
3、整体页面效果的实现 4
（二） 二级页面制作与链接 6
1、二级页面 6
2、 二级页面的链接 10
（三） 登录注册页面 13
1、登录页面 13
2、注册页面 13
四、JavaScript特效与Flash动画的实现 14
（一）Logo发光特效 14
（二）图片滚动效果 15
（三）banner轮换效果 17
五、网站测试 19
总结 19
致谢 21
参考文献 21
引言
随着社会的进步和经济的发展，人们的沟通越来越信息化，网上购物是人们现在最时尚的潮流。随着偷盗、斗殴等犯罪事件逐年上升，人们对自己的安全越来越重视，对防盗的需求越来越多，因此建立一个功能健全，页面干净利落优美的防盗门销售网站可以满足人们对市场的需求。
开发工具和技术
（一）开发工具
Dreamweaver采用“所见即所得”的直观设计模式，充分尊重设计者本人的原始想法和行为设计。它将网页设计功能中的技术效果部分和设计部分分离开来，使用户专注于自己本身的，而其余的 *好棒文|www.hbsrm.com +Q: ￥351916072￥
工作由Dreamweaver自动完成。另外，还有一点值得说明的是，Dreamweaver 可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。
PHOTOSHOP的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是一种图形、图像处理的一种软件，提供了一种与众不同的方法来创建WEB图形，并且拥有所有其他图形处理工具的诸多优点。PHOTOSHOP的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，PHOTOSHOP中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也有很大的帮助的。
Flash是一种与众不同的网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。Flash提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果。
开发技术
在网站的制作方面，我的网站开发技术主要以HTML+CSS语言为主，Javascript特效为辅，将自己在学校中所学的知识运用到网站中去，从而设计出一个不错的网站。
二、主体规划
（一）网站内容规划
首页页面上放置了公司新闻，推荐产品和相关视频链接。一级页面的后面是公司新闻、最新产品、常见问题、给我留言和联系我们这几个页面。另外每一个子页面都有产品分类的相关链接。具体如图2-1所示：
图2-1网站功能结构图
（二）网页框架结构
1、首页布局
网站首页布局以干净利落为原则，水平分割展示每一块内容让大家可以快速了解我的网站所要展示的东西和功能。中间左侧部分链接的与我们公司有关的新闻，正中展示的我们向大家推荐的几款优质的、性价比很高的防盗门。右侧链接的是一个视频。
具体框架如图2-2所示：
logo
广告语
导航
公司新闻
推荐产品
视频
版权
图2-2首页布局框架
2、子页
子页主要分为上下两个部分，上部分仍然使用网页头部方式设计，将网站的导航栏及banner展现出来。下半部分又分为左右两部分，左边是产品列表的导航，右边部分则是新闻列表数据。这样设计不仅使网页美观精致，更间接地把重要信息展现给大家。
具体框架如图2-3所示：
logo
广告语
导航
产品列表
主体内容
版权
图2-3子页布局框架
三、网站设计与实现
（一）首页设计与实现
1、Logo设计
Logo背景颜色为纯白色和黄色结合，紧扣网站主题，由图案和英文单词组成，直观的表现出了网站的内容。点缀的星光可以让浏览者的眼睛一亮，让浏览者对我们的网站产生兴趣与好感，从而关注我们的网站，从而加深浏览者对我们网站的了解，方便我们网站防盗门的销售。如图3-1所示：
图3-1 Logo设计
2、banner设计
首页banner一要体现企业的高端、大气、上档次，二是要体现防盗门产品特色的风格。三是要符合整体的页面设计。我的网站的所设计的banner是一个大屏广告效果，它可以切换广告，让浏览者有一些具体的了解，从而对我们的防盗门销售网站产生信心，并且可以放心的在我们的网站浏览与消费。具体效果如图3-2所示:
图3-2首页banner
3、整体页面效果的实现
如果把我们的网站当做一千零一夜，书中的每一个故事都是一个网页，那么首页就相当于书的封面和目录。书中的故事开头都很精彩，引人入胜，我希望我们的首页也可以吸引大家的眼球。首页中包含了指向网站中其他页面的超链接，用户通过主页可以访问网站的其他页面。
网站首页是网站整体形象的浓缩，要进行创意设计，不仅要美观简洁，而且要紧扣防盗门销售网站的定位与宗旨。通过首页，我们想让浏览者了解我们网站的主要内容和功能，从而加深对我们防盗门销售网站的形象，通过主要的版块设置让浏览者对我们的网站的功能有所了解并且产生兴趣。首页把网站所有的六大版块一目了然的呈现给了浏览者。浏览者可以通过这六大板块来了解我们的网站，加深对我们网站的印象，从而开始对我们网站防盗门的销售有一个很大的帮助和改善。网站首页下方的视频可以给浏览者不一样的风采。如图3-3所示：
图3-3视频欣赏
网站首页中的图片和文字都是自己在网上提前收集好用来设计网站的材料，将这些收集好的材料放到自己的防盗门首页当中。并且在首页当中加入Javascript特效的运用，展现我们防盗门网站的风格与特色，从而给浏览者留下深刻的印象。我在网站的色彩搭配上主要以白色和灰色为主，加以少量的黄色和黑色，白色给人以安静与平和的情绪，同时具有纯洁坦率朴素的形象。而灰色幽幽的，淡淡的，两种颜色交相呼应，从而来显出整个网站的主题，体现我们网站的特色。如图3-4所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1593.html
