发源地时尚发型网站的设计与实现
目 录
一、引言 1
（一）网站开发背景 1
（二）网站开发目的 1
（三）网站设计思路 1
二、设计工具及技术介绍 1
（一）Dreamweaver 1
（二）Photoshop 1
（三）DIV+CSS布局 2
（四）JavaScript 2
三、网站制作准备 2
（一）收集素材 2
（二）网站内容 2
四、网站整体设计 2
（一）网站布局 3
（二）Logo的设计 4
五、网站具体实现 4
（一）首页的实现 4
（二）子页的实现 7
（三）网页特效的实现 8
六、网站测试 10
（一）兼容性测试 10
（二）W3C标准测试 10
总结 11
致谢 12
参考文献 13
附录 14
引言
（一）网站开发背景
如今的时代是一个经济知识的时代，信息正在以前所未有的速度在膨胀着，未来的世界是网络的世界，越来越多的人开始接触网络，挨家挨户都有电子设备连接着网络，所以现在最大的推广面就是在网络上面推广。但是现在的大部分理发连锁都只是在现实社会中采用发传单，降低理发价格或者推出新的理发技术来吸引更多的客户来消费，这是传统的宣传模式必不可少，而在网络上的推广较少，有的也只是一些理发产品的推广。这是一个非常好的时机，把握住了这股潮流就能使发源地时尚发型理发连锁的推广面迅速的扩大。
（二）网站开发目的
网站开发最重要的目的就是提高发源地时尚理发连锁的影响力 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
，让更多的人们进来消费，创造更多的营业额，继续扩大连锁的规模，形成一个良性循环。网站更好的展示了理发连锁的理念：我们就是服务顾客，无论何人，何种身份，只要进来店里，就会让客户有一个全新的，满意的形象。同时展示了为您服务的发型师，用到的理发产品，理发的价格等等，让你没有后顾之忧。高兴而来满意而去。
（三）网站设计思路
网站的设计就是为了服务大众，不能过于虚华，要实用，要让客户有观赏的欲望，所以要做到以下几个方面。
1.实用性：网站就是理发网站要一目了然，不要插入无关的广告，影响客户的情绪。网站背景以白色+黑色+粉色为基础色调，看起来干净清爽。网站各个标题要明确，客户想看那些内容一点进去就能完成。整体要给客户简单明了的感觉，这样才能留住需要的客户。
2.智能性：网站的各个链接不能出现错误，客户能以最快的速度找到想要的内容，所以在编写代码的时候出现重复的代码可以用“class”来代替，不用的代码要清楚干净，这样才能使网站读取的速度加快，不让客户花费过多的时间等待网页的刷新。
兼容性：现在的浏览器过于繁多，所做的网站要通过几大基础浏览器的测试例如：IE浏览器、雅虎浏览器（Yahoo）、谷歌浏览器（Chrome)、火狐浏览器（Firefox），通过了这几大浏览器的测试并且没出现问题才能正式上线。
二、设计工具及技术介绍
（一）Dreamweaver
Adobe Dreamweaver，简称“DW”，是集网页制作和管理网站于一体的所见即所得网页编辑器。Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
（二）Photoshop
Adobe Photoshop，简称“PS”，是美国Adobe公司旗下最为出名的图像处理软件系列之一，为图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。
（三）DIV+CSS布局
DIV元素是用来为HTML文档内大块的（block-level）的内容提供结构和背景的元素。CSS层叠样式表（Cascading Style Sheets，缩写CSS），是用来进行网页风格设计的。DIV+CSS页面代码精简，结构清晰容易被搜索引擎搜索到，适合优化SEO，降低网页大小，让网页体积变得更小。同时提高了网站的访问速度，增加用户的体验性。
（四）JavaScript
JavaScript是由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言。本课题主要是使用它来实现网页的动态效果，
网站制作准备
收集素材
首先明确主题，是设计一个理发网站，然后查阅大量优秀的网站，特别关注主题为理发的网站。学习他们如何把网站布局的合理，网站基础色调搭配如何协调，用雅虎浏览器可以看到他们使用的代码，看他们代码是如何排布的，有哪些代码可以简写，那些代码可以使用到我的作品中来，看到好的JavaScript代码可以保存下来也许可以用到。一些感觉有用的图片和文字可以复制粘贴下来放着，最后整理一下资料文件夹。
网站内容
整个网站内容包括导航（网站首页、发型师、理发理念、理发价格、理发产品、联系我们），三张规格相同的图片通过JavaScript效果组成动态图片，以及一些发型师的头像与基础信息，理发价格，理发产品图片与文字说明，如图3-1所示。
图3-1 网站内容结构图
网站整体设计
网站布局
使用PS的之前先确定了网站的大概构成，分成三大板块：第一个板块就是logo所在的板块，包括导航、理发理念与动态图片，第二个板块就是中间内容，第三个板块就是版权栏。其中导航包括：网站首页、发型师、理发理念、理发价格、理发产品、联系我们。导航下面主题图片一栏使用三张规格相同的图片用JavaScript代码组合起来形成特殊滚动效果。图片下面就是推荐发型师（包含发型师头像、姓名、联系方式），其次理发价格（包含洗发理发、特色项目、营养类），最后是理发产品（图片、文字介绍）加一个版权栏构成整个网站。
首页分成三个板块，Logo、导航、理发理念、主题图片为第一个板块，推荐发型师、理发价格、理发产品为第二个板块，最后一个板块是版权，如图4-1所示。
图4-1 首页布局图
子页也分成三个板块，第一个板块和主页板块相同，第二个板块分为左右两个部分，左边是推荐发型师的头像与基本信息，右边是推荐用品图像。第三个板块还是版权。如图4-2所示。
图4-2 子页布局图
Logo的设计
在制作代码之前，在各大网站注意观察了Logo，每个Logo都能展现一个网站的特性，为此到在线Logo编辑的网站上寻找适合毕业设计网站的Logo，经过很多次的Logo设计最终确定了下图的Logo最为网站的Logo，如图4-3所示。
首页是一个网站最重要的一张页面，要让客户一目了然能迅速找到需要的东西。网站的实现需要不同作用的代码，规范这些代码的块级元素就是DIV层。对于标题的规范例如h1、h2、h3等标签。对于导航栏的规范例如ul、li等标签。对于图像的排列，字体的大小颜色等等通过CSS样式表中的代码来实现。
一、引言 1
（一）网站开发背景 1
（二）网站开发目的 1
（三）网站设计思路 1
二、设计工具及技术介绍 1
（一）Dreamweaver 1
（二）Photoshop 1
（三）DIV+CSS布局 2
（四）JavaScript 2
三、网站制作准备 2
（一）收集素材 2
（二）网站内容 2
四、网站整体设计 2
（一）网站布局 3
（二）Logo的设计 4
五、网站具体实现 4
（一）首页的实现 4
（二）子页的实现 7
（三）网页特效的实现 8
六、网站测试 10
（一）兼容性测试 10
（二）W3C标准测试 10
总结 11
致谢 12
参考文献 13
附录 14
引言
（一）网站开发背景
如今的时代是一个经济知识的时代，信息正在以前所未有的速度在膨胀着，未来的世界是网络的世界，越来越多的人开始接触网络，挨家挨户都有电子设备连接着网络，所以现在最大的推广面就是在网络上面推广。但是现在的大部分理发连锁都只是在现实社会中采用发传单，降低理发价格或者推出新的理发技术来吸引更多的客户来消费，这是传统的宣传模式必不可少，而在网络上的推广较少，有的也只是一些理发产品的推广。这是一个非常好的时机，把握住了这股潮流就能使发源地时尚发型理发连锁的推广面迅速的扩大。
（二）网站开发目的
网站开发最重要的目的就是提高发源地时尚理发连锁的影响力 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
，让更多的人们进来消费，创造更多的营业额，继续扩大连锁的规模，形成一个良性循环。网站更好的展示了理发连锁的理念：我们就是服务顾客，无论何人，何种身份，只要进来店里，就会让客户有一个全新的，满意的形象。同时展示了为您服务的发型师，用到的理发产品，理发的价格等等，让你没有后顾之忧。高兴而来满意而去。
（三）网站设计思路
网站的设计就是为了服务大众，不能过于虚华，要实用，要让客户有观赏的欲望，所以要做到以下几个方面。
1.实用性：网站就是理发网站要一目了然，不要插入无关的广告，影响客户的情绪。网站背景以白色+黑色+粉色为基础色调，看起来干净清爽。网站各个标题要明确，客户想看那些内容一点进去就能完成。整体要给客户简单明了的感觉，这样才能留住需要的客户。
2.智能性：网站的各个链接不能出现错误，客户能以最快的速度找到想要的内容，所以在编写代码的时候出现重复的代码可以用“class”来代替，不用的代码要清楚干净，这样才能使网站读取的速度加快，不让客户花费过多的时间等待网页的刷新。
兼容性：现在的浏览器过于繁多，所做的网站要通过几大基础浏览器的测试例如：IE浏览器、雅虎浏览器（Yahoo）、谷歌浏览器（Chrome)、火狐浏览器（Firefox），通过了这几大浏览器的测试并且没出现问题才能正式上线。
二、设计工具及技术介绍
（一）Dreamweaver
Adobe Dreamweaver，简称“DW”，是集网页制作和管理网站于一体的所见即所得网页编辑器。Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
（二）Photoshop
Adobe Photoshop，简称“PS”，是美国Adobe公司旗下最为出名的图像处理软件系列之一，为图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。
（三）DIV+CSS布局
DIV元素是用来为HTML文档内大块的（block-level）的内容提供结构和背景的元素。CSS层叠样式表（Cascading Style Sheets，缩写CSS），是用来进行网页风格设计的。DIV+CSS页面代码精简，结构清晰容易被搜索引擎搜索到，适合优化SEO，降低网页大小，让网页体积变得更小。同时提高了网站的访问速度，增加用户的体验性。
（四）JavaScript
JavaScript是由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言。本课题主要是使用它来实现网页的动态效果，
网站制作准备
收集素材
首先明确主题，是设计一个理发网站，然后查阅大量优秀的网站，特别关注主题为理发的网站。学习他们如何把网站布局的合理，网站基础色调搭配如何协调，用雅虎浏览器可以看到他们使用的代码，看他们代码是如何排布的，有哪些代码可以简写，那些代码可以使用到我的作品中来，看到好的JavaScript代码可以保存下来也许可以用到。一些感觉有用的图片和文字可以复制粘贴下来放着，最后整理一下资料文件夹。
网站内容
整个网站内容包括导航（网站首页、发型师、理发理念、理发价格、理发产品、联系我们），三张规格相同的图片通过JavaScript效果组成动态图片，以及一些发型师的头像与基础信息，理发价格，理发产品图片与文字说明，如图3-1所示。
图3-1 网站内容结构图
网站整体设计
网站布局
使用PS的之前先确定了网站的大概构成，分成三大板块：第一个板块就是logo所在的板块，包括导航、理发理念与动态图片，第二个板块就是中间内容，第三个板块就是版权栏。其中导航包括：网站首页、发型师、理发理念、理发价格、理发产品、联系我们。导航下面主题图片一栏使用三张规格相同的图片用JavaScript代码组合起来形成特殊滚动效果。图片下面就是推荐发型师（包含发型师头像、姓名、联系方式），其次理发价格（包含洗发理发、特色项目、营养类），最后是理发产品（图片、文字介绍）加一个版权栏构成整个网站。
首页分成三个板块，Logo、导航、理发理念、主题图片为第一个板块，推荐发型师、理发价格、理发产品为第二个板块，最后一个板块是版权，如图4-1所示。
图4-1 首页布局图
子页也分成三个板块，第一个板块和主页板块相同，第二个板块分为左右两个部分，左边是推荐发型师的头像与基本信息，右边是推荐用品图像。第三个板块还是版权。如图4-2所示。
图4-2 子页布局图
Logo的设计
在制作代码之前，在各大网站注意观察了Logo，每个Logo都能展现一个网站的特性，为此到在线Logo编辑的网站上寻找适合毕业设计网站的Logo，经过很多次的Logo设计最终确定了下图的Logo最为网站的Logo，如图4-3所示。
首页是一个网站最重要的一张页面，要让客户一目了然能迅速找到需要的东西。网站的实现需要不同作用的代码，规范这些代码的块级元素就是DIV层。对于标题的规范例如h1、h2、h3等标签。对于导航栏的规范例如ul、li等标签。对于图像的排列，字体的大小颜色等等通过CSS样式表中的代码来实现。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1666.html
