儒学文化网站的设计与实现

本网站的设计目是宣扬儒学文化，向人们介绍其中的精神思想与历史文化。本篇说明书是对网站的运行方式做了总体说明，首先本文对设计内容做了调研，确定了网站的主题是以推广儒学为主，明确了开发本网站的技术可行性，接着明确网站的设计思路，确定logo和网站的页面布局。本文还主要介绍了网站的设计方法和网站的实现方式，包括网站总体内容，按钮效果，界面链接以及子页面的效果等等。在网站的实现上，则是对每个页面的特效进行了详细的说明介绍，阐述了每张页面上的设计方法和网站页面上具体形成的效果。
目 录
一、引言 1
三、网站的设计 1
（一）总体设计 1
（二）详细设计 3
1.网站logo 3
2.网站导航 3
3.网站底部 4
4.具体内容 4
四、网站的实现 5
（一）首页 5
（二）二级页面 6
1.精神思想 6
2.代表人物 6
3.儒家六艺 7
4.八大雅事 8
5.经典书籍 9
6.联系我们 10
（三）子页 10
五、总结 12
致谢 13
参考文献 14
一、引言
儒学文化蕴含中国古代人们上千年的思想精神，对人们精神思想方面的进步有着至关重要的作用。在现如今所存在的网站中，大部分的网站布局太过于繁琐，内容过多，所实现的效果过于缺乏，无法适应当代的快节奏生活，所以，建立一个简单、优美、适应现代潮流的网站成了一个迫切的需要。
二、开发工具与技术
本网站使用的工具包括Dreamweaver与Photoshop两大软件。其中以Dreamweaver进行网站的制作为主，Photoshop对图片的处理为辅。在制作中，以html为基础，以css对网站中的内容进行样式的修改与美化，最后使用jQuery的一些效果让网站看起来更加轻巧优美。
三、网站的设计
（一）总体设计
本网站主要包括网站首页、精神思想、代表人物、儒家六艺、八大雅事、经典书籍、联系我们等模块。在其中，精神思想模块包含忠、孝、
 *好棒文|www.hbsrm.com +Q: *351916072* 
仁、义等十个页面，儒家六艺中则包含礼、乐、射等六个子页，八大雅事则是琴、棋、书、画等八个页面。整个网站采用Arial Black的字体，14码的大小让文字看起来优美漂亮。
在不同的页面中其布局结构也不相同，其中主页的布局结构如下
Logo
导航栏
动态背景
内容
底部主页布局







“精神思想”“八大雅事”与“儒家六艺”布局结构相似，其所展现的效果不同，布局结构如图
Logo
导航
内容
底部






“代表人物”“经典书籍”和“与我联系”也大致相同，其结构布局如下
Logo
导航
内容
内容2
底部







“精神思想”页面的布局结构分别如下
Logo
导航
导航
内容1
内容2
网站底部
“儒家六艺”页面的布局结构
Logo
导航
内容1
内容2
内容3
底部“儒家六艺”子页面
“八大雅事”子页面的布局结构
Logo
导航
图片
内容
底部“八大雅事”子页面
（二）详细设计
1.网站logo
在网页头部划分为两部分，左边的是网站的logo，右边的则是导航栏。如图31
其中，logo分三部分，分别是图片、网站名称和地址。图片呈方形以黑色为底色，以白色线条勾勒成“R”型。其设计主要是为了映衬儒家精神文化，方形为轮廓彰显为人处事中庸公正；黑色底白色线条是指做人要清廉高尚，出淤泥而不染；“R”是“仁”第一个拼音，也是“人”的第一个拼音，体现“仁”、“民为贵社稷次之君为轻”的思想。“浩儒网”三个字是网站名称，取自“儒家浩然正气”。如图3.1
2.网站导航
右侧导航栏中，带线条的浅绿色背景图和黑色导航字体相搭配，鼠标停留时在字体后方会出现白色的方块作为背景，分别在精神思想、儒家六艺和八大雅事中设有垂直导航栏对应着各自的子页面，由于精神思想的子页面较多则只筛选出来部分，另外两个则全在垂直导航上显示。如图31,部分重要代码如下
图31 网站头部

• 网站首页


• 精神思想



版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/697.html