青杏青少年性教育网站的设计与实现(源码)
互联网的迅速发展，使得信息传播越来越方便快捷。然而青少年缺少一定的信息筛选、是非分辨的能力。色情制品的传播使青少年获取到错误的知识，产生错误的观念与思想。青少年的健康成长离不开正确、健康、积极向上的引导。网络的飞速发展带来了更便捷的引导方式。本人制作的青杏青少年性教育网站用活泼有趣的形式向青少年传递正确健康的性知识。此网站为青少年提供正确全面的资讯、多元包容的观念，引导关注青少年的健康成长。本网站运用HTML和CSS对网页代码进行编写，利用JavaScript代码增加网站特效，用Photoshop处理图片、Logo，使网站页面能够得到青少年的青睐，网站创建的意义得到实现。
目 录
一、引言 1
（一）网站开发背景 1
（二）选题内容 1
二、网站相关需求分析 1
（一）需求分析活动 1
（二）市场调研情况 1
三、网站制作工具 1
（一）网页设计工具 1
1.Dreamweaver软件 1
2.Photoshop软件 1
（二）网站实现语言 2
1.HTML语言 2
2.CSS语言 2
四、网站设计 2
（一）网站基本框架设计 2
（二）网页布局设计 2
1.网站首页设计 2
2.网站子页面设计 3
（三）网页的div结构与层样式 4
1.首页DIV结构 4
2.子页的DIV结构 5
（四）网站形象设计 6
1.LOGO设计 6
2.导航设计 6
五、网站实现 6
（一）网站基本功能 6
1.首页 6
2.关于青杏 6
3.品牌与理念 8
4.健康与知识 8
5.有你最美 9
6.新闻与活动 9
7.三级子页 9
8.社会/校园招聘 11
9.青杏的隐藏课堂 11
(二)JavaScript特效 12
六、总结 12
致谢 13 *好棒文|www.hbsrm.com +Q: #351916072#
参考文献 14
一、引言
（一）网站开发背景
伴随着计算机技术和互联网的高速发展，我们进入了信息时代，亦称之为数字化时代。在我们这个数字化时代里，信息传播变得更加方便快捷。信息的高速传播有利亦有弊，各种信息不经筛选通过各种途径被传播。当今社会的青少年获得信息越来越便捷。由于青少年自身缺乏一定的分辨能力，无法正确及时的分辨信息的好坏，因此需要正确的引导。本课题所制作的青杏网站是一个以宣传正确健康适宜的性教育为宗旨的平台。此网站以文本、图片等形式向青少年宣传正确的性知识，关心青少年身心的健康成长，为青少年提供正确全面的资讯、多元包容的观念。
（二）选题内容
本网站用CSS进行网页效果图、网页布局、色彩购置，框架架构等内容的制作，用PhotoShop软件设计网页中的品牌LOGO以及相关的一些的图片，用Dreamweaver软件进行页面的制作，HTML、CSS、Java等语言进行代码的编写，使效果图中的页面框架、内容布局、图片排列等内容可以以网页的形式呈现，使用Google、IE、火狐等主流浏览器进行网页的测试，提高网站的可靠性和安全性。
二、网站相关需求分析
（一）需求分析活动
“上下五千年”这五个字经常在书本、手机、电视和人们的口中看到听到。然而，“性”亦或与之相关的字词却甚少被发现或是提及。在文化传承中，性似洪水猛兽，人们对其避而不谈。教育不仅仅有文化教育、思想品德教育，性教育也应当包含其中。制作一个性教育类的网站，利用便捷的网络传播正确的知识。经过充分的调查可以发现，相关类型的网站国内几乎没有，需求之大，显而易见。
（二）市场调研情况
制作相关的问卷进行了市场调研，结果显示绝大部分的青少年希望有此类网站，并愿意利用此类网站学习相关知识。部分家长表示赞同，部分家长表示反对。通过对市场的调研，发现同意并投身于性教育的人变多，有的地区还开了性教育的实验课程。网站的开发与建设会使性教育得到更快更好的发展。
三、网站制作工具
（一）网页设计工具
1.Dreamweaver软件
Dreamweaver软件是由Adobe公司推出的专业的可视化网页编辑工具，支持HTML编程语言和CSS技术，功能强大并且使用简便，能够快速生成跨平台和跨浏览器的网页与网站，使用此软件进行此次网站的设计与开发。
2.Photoshop软件
Photoshop软件就是大家所熟知的“PS”，主要处理以像素构成的数字图像，是目前世界上最流行的图像处理软件。在此次网站建设中，主要利用PS设计制作网站的LOGO，处理网页中的图片等。
（二）网站实现语言
1.HTML语言
HTML是目前最流行的网页制作语言，是建立网页文本的一种标记语言，是一种简单并且通用的全置标记语言，通过标记和属性对文本的属性进行描述。在本次的网站建设中，利用HTML超链接不同的网页，使网页之间连贯形成一个网站。
2.CSS语言
CSS全称为Cascading Style Sheet，即层叠样式表，可以用来设计网页的风格，是对HTML的补充，可以使页面的颜色、布局、背景、字体和其他效果更加精确的控制。设立CSS，统一地控制HTML中各个标记的显示属性，从而节省许多重复性格式的设定。此次网站建设使用CSS，使网页更加完善、精美，从而更好的吸引青少年的注意力。
四、网站设计
（一）网站基本框架设计
网站由首页、子页、三级页面组成，大体框架如图41示。页面主色调为绿色，意为青春与成长，契合网站的主题与思想。网站名为青杏，青涩的杏子，寓意青少年。“青杏”与“青性”同音，响应主旨。网站的LOGO由卡通字体的“青杏”与一颗青杏组成。
图41 网站基本设计框架图
（二）网页布局设计
1.网站首页设计
网页的布局最能够体现网站设计者的构思，良好的网页布局能够使访问者身心愉悦，而首页更是重中之重。本性教育网站的样式简洁大方，访问者浏览能够一目了然。首页基本框架如图42示：
LOGO
导航
横幅
新闻中心
精彩活动
品牌与产品
版权
图42 首页框架图
在首页布局中，LOGO、导航、横幅与版权是有固定的位置，中间其余的内容分别是：新闻中心在左侧，精彩活动、品牌与产品一上一下在右侧。左侧的新闻中心占的页面面积较右侧大一些，新闻每天都会有，面积大有利于吸引视线从而发挥其价值。首页页面结构简单大方，清晰明了，能够让浏览者一目了然。
目 录
一、引言 1
（一）网站开发背景 1
（二）选题内容 1
二、网站相关需求分析 1
（一）需求分析活动 1
（二）市场调研情况 1
三、网站制作工具 1
（一）网页设计工具 1
1.Dreamweaver软件 1
2.Photoshop软件 1
（二）网站实现语言 2
1.HTML语言 2
2.CSS语言 2
四、网站设计 2
（一）网站基本框架设计 2
（二）网页布局设计 2
1.网站首页设计 2
2.网站子页面设计 3
（三）网页的div结构与层样式 4
1.首页DIV结构 4
2.子页的DIV结构 5
（四）网站形象设计 6
1.LOGO设计 6
2.导航设计 6
五、网站实现 6
（一）网站基本功能 6
1.首页 6
2.关于青杏 6
3.品牌与理念 8
4.健康与知识 8
5.有你最美 9
6.新闻与活动 9
7.三级子页 9
8.社会/校园招聘 11
9.青杏的隐藏课堂 11
(二)JavaScript特效 12
六、总结 12
致谢 13 *好棒文|www.hbsrm.com +Q: #351916072#
参考文献 14
一、引言
（一）网站开发背景
伴随着计算机技术和互联网的高速发展，我们进入了信息时代，亦称之为数字化时代。在我们这个数字化时代里，信息传播变得更加方便快捷。信息的高速传播有利亦有弊，各种信息不经筛选通过各种途径被传播。当今社会的青少年获得信息越来越便捷。由于青少年自身缺乏一定的分辨能力，无法正确及时的分辨信息的好坏，因此需要正确的引导。本课题所制作的青杏网站是一个以宣传正确健康适宜的性教育为宗旨的平台。此网站以文本、图片等形式向青少年宣传正确的性知识，关心青少年身心的健康成长，为青少年提供正确全面的资讯、多元包容的观念。
（二）选题内容
本网站用CSS进行网页效果图、网页布局、色彩购置，框架架构等内容的制作，用PhotoShop软件设计网页中的品牌LOGO以及相关的一些的图片，用Dreamweaver软件进行页面的制作，HTML、CSS、Java等语言进行代码的编写，使效果图中的页面框架、内容布局、图片排列等内容可以以网页的形式呈现，使用Google、IE、火狐等主流浏览器进行网页的测试，提高网站的可靠性和安全性。
二、网站相关需求分析
（一）需求分析活动
“上下五千年”这五个字经常在书本、手机、电视和人们的口中看到听到。然而，“性”亦或与之相关的字词却甚少被发现或是提及。在文化传承中，性似洪水猛兽，人们对其避而不谈。教育不仅仅有文化教育、思想品德教育，性教育也应当包含其中。制作一个性教育类的网站，利用便捷的网络传播正确的知识。经过充分的调查可以发现，相关类型的网站国内几乎没有，需求之大，显而易见。
（二）市场调研情况
制作相关的问卷进行了市场调研，结果显示绝大部分的青少年希望有此类网站，并愿意利用此类网站学习相关知识。部分家长表示赞同，部分家长表示反对。通过对市场的调研，发现同意并投身于性教育的人变多，有的地区还开了性教育的实验课程。网站的开发与建设会使性教育得到更快更好的发展。
三、网站制作工具
（一）网页设计工具
1.Dreamweaver软件
Dreamweaver软件是由Adobe公司推出的专业的可视化网页编辑工具，支持HTML编程语言和CSS技术，功能强大并且使用简便，能够快速生成跨平台和跨浏览器的网页与网站，使用此软件进行此次网站的设计与开发。
2.Photoshop软件
Photoshop软件就是大家所熟知的“PS”，主要处理以像素构成的数字图像，是目前世界上最流行的图像处理软件。在此次网站建设中，主要利用PS设计制作网站的LOGO，处理网页中的图片等。
（二）网站实现语言
1.HTML语言
HTML是目前最流行的网页制作语言，是建立网页文本的一种标记语言，是一种简单并且通用的全置标记语言，通过标记和属性对文本的属性进行描述。在本次的网站建设中，利用HTML超链接不同的网页，使网页之间连贯形成一个网站。
2.CSS语言
CSS全称为Cascading Style Sheet，即层叠样式表，可以用来设计网页的风格，是对HTML的补充，可以使页面的颜色、布局、背景、字体和其他效果更加精确的控制。设立CSS，统一地控制HTML中各个标记的显示属性，从而节省许多重复性格式的设定。此次网站建设使用CSS，使网页更加完善、精美，从而更好的吸引青少年的注意力。
四、网站设计
（一）网站基本框架设计
网站由首页、子页、三级页面组成，大体框架如图41示。页面主色调为绿色，意为青春与成长，契合网站的主题与思想。网站名为青杏，青涩的杏子，寓意青少年。“青杏”与“青性”同音，响应主旨。网站的LOGO由卡通字体的“青杏”与一颗青杏组成。
图41 网站基本设计框架图
（二）网页布局设计
1.网站首页设计
网页的布局最能够体现网站设计者的构思，良好的网页布局能够使访问者身心愉悦，而首页更是重中之重。本性教育网站的样式简洁大方，访问者浏览能够一目了然。首页基本框架如图42示：
LOGO
导航
横幅
新闻中心
精彩活动
品牌与产品
版权
图42 首页框架图
在首页布局中，LOGO、导航、横幅与版权是有固定的位置，中间其余的内容分别是：新闻中心在左侧，精彩活动、品牌与产品一上一下在右侧。左侧的新闻中心占的页面面积较右侧大一些，新闻每天都会有，面积大有利于吸引视线从而发挥其价值。首页页面结构简单大方，清晰明了，能够让浏览者一目了然。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/589.html
