东海水晶工艺品网站设计与实现(附件)
因为现在网络的运用与人们的日常活动越来越密不可分，出现了许多各种各样的网页。本文针对HTML网站的制作做了具体阐述。在制作的过程中要用到许多技术，包含网页版面的布局规划设计，图像的设计与解决、网页HTML5动画的制作等。目前使用最多的是Dreamweaver，它是网页制作的核心之一。东海水晶工艺品网站的制作就是为了顺应发展的潮流。它能够让使用者能够非常容易的找到自己想要了解和需要的工艺品。还能了解和分享自己知道的和不知道的水晶历史。本网站主要以DIV和CSS样式制作了有不同种类的工艺品，水晶历史以及不同种类的水晶知识科普页面。既能快速的寻找想要的工艺品，也方便了解相关知识。
目 录
一、引言 1
（一）选题背景 1
（二）选题的意义 1
二、 网站的工具使用 1
（一）工具介绍 1
1. Photoshop 1
2. Dreamweaver 1
三、页面的主体设计 1
（一）总体设计 1
1.首页设计 2
2.子页设计 3
（二）详细设计 4
1.logo设计 4
2.导航栏设计 4
3.首页主体部分设计 4
4.首页尾部设计 5
5.首页登录界面设计 5
6.网页DIV结构与css样式 6
四、页面的具体实现 9
（一）首页的实现 9
（二）子页的实现 10
1.水晶种类各子页面的实现 10
2.水晶工艺品子页的实现 11
3.联系我们子页实现 12
（三）三级子页的实现 12
五、网页特效 13
六、总结 14
参考文献 16
一、引言
（一）选题背景
因特网的高速发展，由于它传播的信息量大，传播速度快等优点，让越来越多的企业和商家纷纷建立属于自身的网站，同时伴随着人们生活水平的进步，水晶工艺品越来越受到人们的欢迎，而且不同的水晶都有着不同的意义和象征，从而让人们越来越趋之若鹜。比如：洁白无瑕的白水晶被意为纯洁、无私的象 *好棒文|www.hbsrm.com +Q: &351916072&
征，更是被年轻的朋友们与纯洁的恋情联想在一起。紫水晶被意为大红大紫和高贵的表率，深受人们的青睐。水晶文化还包含了丰富的文明精神，因而水晶也是灵魂的物化。本网站的建立是为了展现我国的水晶文化知识、文化内涵、以及收藏价值，让大众了解水晶，熟知水晶的经济价值与文化价值，网站拥有大量水晶工艺品的图片，让人们更加直观的鉴赏。
（二）选题的意义
网站的建立是基于HTML和CSS进行的代码编写，网站的整体使用HTML进行基础建立，并借助Photoshop进行页面设计与图片处理，同时加上一些自制的图片。网站动态方面是利用JavaScript来实现，以此展现网站的动态效果，使网站具有独特性与观赏性。东海水晶工艺品网站的完成将是一个对水晶文化、鉴赏和收藏价值肯定等多方面的综合性网站。
网站的工具使用
（一）工具介绍
1. Photoshop
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。
Photoshop主要解决以像素所形成的数字图像。利用其众多的编修与绘图工具，能够有效地进行图片编辑任务。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有触及。本网站的制作过程中主要使用了ps中的图像处理方面的功能。主要是对图片大小的修改和logo的设计等一系列图片处理。
Dreamweaver
Adobe Dreamweaver，简称“DW”，是集网页制作和管理网站于一身的所见即所得网页代码编辑器。运用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员能够在几乎任何地方快速制作和进行网站建设。东海水晶工艺品网站的制作主要依托DW软件进行制作，利用了HTML、CSS、JavaScript三项主要功能以及其他次要功能。整个网站的制作完成几乎全部依托DW。其中包括网站的框架和时间滚动显示框。
三、页面的主体设计
（一）总体设计
网站是关于水晶发展方面的资讯网，网站的整体规划一共包括30多个页面（包括主页在内）。网站的主题是展示水晶的经济文化价值、文化内涵、历史发展角度与用途，还有一些有关于的水晶的故事。网站主页的版式是五行三栏式。导航条内容为：首页、水晶工艺品、水晶原石、水晶品种介绍；子页则针对水晶品种具有代表性的几种常见的水晶种类，进行详细的介绍。在这些页面中使用白色来对应网页底部的灰色，形成色差，使网页完成制作后能达到相互衬应、相互渗透、相互比对的效果。网站结构如图31所示：
图31“东海水晶工艺品网”网站导航结构图
“首页”主要是从大体上来介绍整个网站的内容，并对各个板块的内容进行初步的展示，突出本网站的制作目的，网站整个页面的布局呈现上中下结构。
“产品展示”一栏主要是对各种水晶工艺品的分类进行整理，其中主要有奖杯类、首饰类、水晶球类等其他水晶工艺品的类别，对这些种类的水晶工艺品进行一一的展示。
“水晶种类”一栏主要是白水晶、红水晶、紫水晶等六种类别的水晶进行介绍。并把各种类别的水晶的组成，相关历史故事和寓意进行介绍。
“水晶历史”一栏主要是展示水晶的发展历史，主要分为水晶的形成，中国水晶史和东海水晶史三部分。各个部分都拥有较为详细的介绍
1.首页设计
制作一个首页网站主要分为：头部（top）、主要内容（body）、尾部（footer）这三个部分。其中头部包括logo，导航栏和banner三部分，主要内容就是body部分和尾部的footer部分。所以东海水晶工艺品网站的首页就如图32所示：
Logo
Top
Banner
Body1
Body2
Body3
Footer
图32网站首页结构图
2.子页设计
二级子页的布局大致与首页相同，不过三级子页的采用了两种样式，一是body部分进行了改变，把原本的三栏式改成了两栏式左小右大的样式。二是body部分改成了一个整体样式如图33,34所示：
Logo
Top
目 录
一、引言 1
（一）选题背景 1
（二）选题的意义 1
二、 网站的工具使用 1
（一）工具介绍 1
1. Photoshop 1
2. Dreamweaver 1
三、页面的主体设计 1
（一）总体设计 1
1.首页设计 2
2.子页设计 3
（二）详细设计 4
1.logo设计 4
2.导航栏设计 4
3.首页主体部分设计 4
4.首页尾部设计 5
5.首页登录界面设计 5
6.网页DIV结构与css样式 6
四、页面的具体实现 9
（一）首页的实现 9
（二）子页的实现 10
1.水晶种类各子页面的实现 10
2.水晶工艺品子页的实现 11
3.联系我们子页实现 12
（三）三级子页的实现 12
五、网页特效 13
六、总结 14
参考文献 16
一、引言
（一）选题背景
因特网的高速发展，由于它传播的信息量大，传播速度快等优点，让越来越多的企业和商家纷纷建立属于自身的网站，同时伴随着人们生活水平的进步，水晶工艺品越来越受到人们的欢迎，而且不同的水晶都有着不同的意义和象征，从而让人们越来越趋之若鹜。比如：洁白无瑕的白水晶被意为纯洁、无私的象 *好棒文|www.hbsrm.com +Q: &351916072&
征，更是被年轻的朋友们与纯洁的恋情联想在一起。紫水晶被意为大红大紫和高贵的表率，深受人们的青睐。水晶文化还包含了丰富的文明精神，因而水晶也是灵魂的物化。本网站的建立是为了展现我国的水晶文化知识、文化内涵、以及收藏价值，让大众了解水晶，熟知水晶的经济价值与文化价值，网站拥有大量水晶工艺品的图片，让人们更加直观的鉴赏。
（二）选题的意义
网站的建立是基于HTML和CSS进行的代码编写，网站的整体使用HTML进行基础建立，并借助Photoshop进行页面设计与图片处理，同时加上一些自制的图片。网站动态方面是利用JavaScript来实现，以此展现网站的动态效果，使网站具有独特性与观赏性。东海水晶工艺品网站的完成将是一个对水晶文化、鉴赏和收藏价值肯定等多方面的综合性网站。
网站的工具使用
（一）工具介绍
1. Photoshop
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。
Photoshop主要解决以像素所形成的数字图像。利用其众多的编修与绘图工具，能够有效地进行图片编辑任务。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有触及。本网站的制作过程中主要使用了ps中的图像处理方面的功能。主要是对图片大小的修改和logo的设计等一系列图片处理。
Dreamweaver
Adobe Dreamweaver，简称“DW”，是集网页制作和管理网站于一身的所见即所得网页代码编辑器。运用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员能够在几乎任何地方快速制作和进行网站建设。东海水晶工艺品网站的制作主要依托DW软件进行制作，利用了HTML、CSS、JavaScript三项主要功能以及其他次要功能。整个网站的制作完成几乎全部依托DW。其中包括网站的框架和时间滚动显示框。
三、页面的主体设计
（一）总体设计
网站是关于水晶发展方面的资讯网，网站的整体规划一共包括30多个页面（包括主页在内）。网站的主题是展示水晶的经济文化价值、文化内涵、历史发展角度与用途，还有一些有关于的水晶的故事。网站主页的版式是五行三栏式。导航条内容为：首页、水晶工艺品、水晶原石、水晶品种介绍；子页则针对水晶品种具有代表性的几种常见的水晶种类，进行详细的介绍。在这些页面中使用白色来对应网页底部的灰色，形成色差，使网页完成制作后能达到相互衬应、相互渗透、相互比对的效果。网站结构如图31所示：
图31“东海水晶工艺品网”网站导航结构图
“首页”主要是从大体上来介绍整个网站的内容，并对各个板块的内容进行初步的展示，突出本网站的制作目的，网站整个页面的布局呈现上中下结构。
“产品展示”一栏主要是对各种水晶工艺品的分类进行整理，其中主要有奖杯类、首饰类、水晶球类等其他水晶工艺品的类别，对这些种类的水晶工艺品进行一一的展示。
“水晶种类”一栏主要是白水晶、红水晶、紫水晶等六种类别的水晶进行介绍。并把各种类别的水晶的组成，相关历史故事和寓意进行介绍。
“水晶历史”一栏主要是展示水晶的发展历史，主要分为水晶的形成，中国水晶史和东海水晶史三部分。各个部分都拥有较为详细的介绍
1.首页设计
制作一个首页网站主要分为：头部（top）、主要内容（body）、尾部（footer）这三个部分。其中头部包括logo，导航栏和banner三部分，主要内容就是body部分和尾部的footer部分。所以东海水晶工艺品网站的首页就如图32所示：
Logo
Top
Banner
Body1
Body2
Body3
Footer
图32网站首页结构图
2.子页设计
二级子页的布局大致与首页相同，不过三级子页的采用了两种样式，一是body部分进行了改变，把原本的三栏式改成了两栏式左小右大的样式。二是body部分改成了一个整体样式如图33,34所示：
Logo
Top
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/370.html
