传统文化网站设计
设计课程： WEB前端开发技术
系 别：
专 业： 软件工程
班 级：
姓 名：
学 号：
设计时间： 2020年6月
摘要
中国传统文化(traditional culture of China)是中华文明演化而汇集成的一种反映民族特质和风貌的民族文化，是民族历史上各种思想文化、观念形态的总体表征，是指居住在中国地域内的中华民族及其祖先所创造的、为中华民族世世代代所继承发展的、具有鲜明民族特色的、历史悠久、内涵博大精深、传统优良的文化。在全球化浪潮中，保传统文化对维护世界文化的多样性具有十分重要的意义。世界上任何民族，如果抛弃民族文化传统，没有任何特色，就会在世界民族之林中失去地位，同时也在国际政治中失去影响力。现今，我国少数民族优秀传统文化正在流失，许多文化遗产处于濒危状态。互联网作为信息技术的通信桥梁连接着全球的计算机，无论是在国内还是国外网站都得以迅速的发展和壮大，并被人们重视和关注，对于全球范围内不同地域的人们联系交流等等活动也日益重要。中华传统文化网以传统文化为载体，为的就是让更多中华儿女了解传统文化、重视传统文化、保护传统文化、传承传统文化。本次开发主要以HTML5+CSS3+JavaScript等技术构建此网站。
关键词：中华民族、中华传统文化、传承
目录
第一章 前言
1.1 传统文化价值
1.2 传统文化传播情况
1.3 设计目的
第二章 设计思路
2.1 风格定位
2.2 网站结构
2.3 主要功能
第三章 设计效果
3.1 首页
3.2二级页面
3.2.1 历史页
3.2.2 地域页
3.2.3 民族页
3.2.4 风俗页
3.2.5 建筑页
3.2.6 艺术页
3.2.7 美食页
3.2.8其他和关于页
第四章 总结与展望
中华民族优秀传统文化是中华民族生存和发展所依赖的精神支撑，是中华民族自尊心和自信心所根植的土壤，是国家走向富强的软实力资源。传承和弘扬中华优秀传统文化，就是形成中华优秀传统文化现代意识的认同感，唤起复兴中华优秀传统文化的使命感，发扬光大中华优秀传统文化的人文精神，激活中华优秀传统文化的强大基因。
中华传统文化包括了皮影戏、京剧、国画、书 法、文字、语言、六艺、音乐、武术、曲艺、棋类、节日、民俗等方面的内容，尤其在皮影戏、京剧、国画、书法方面，具备较强的文学性与艺术性，并蕴含较为深刻的思想内涵。其中，中华优秀传统文化中所蕴含的思想能够突显出社会主义核心价值。对于社会主义核心价值而言，其属于国家与民族的主流价值观，更是促进全国人民团结统一的重要思想与文化基础。其思想基础主要内容包括三个层面，第一层面为：富强、民主、文明、和谐。在儒家文化中，存在较为丰富的和思想，例如，“君子周而不比，小人比而不周。”第二个层面为：自由、平等、公正、法治，在孔子提出的“有教无类”中，显示的就是人人平等。第三个层面为：爱国、 敬业、诚信、友善，例如，儒家文化中的“躬自厚而薄责于人”等思想，从中可以看出，中华传统文化中蕴含着较多与社会主义核心价值相符合的内容。其次，为民族发展提供精神动力。在中华传统文化中，存在丰富的精神食粮，还涵盖着较许多中华民族更深层次的精神追求，在不断发展中，已 经成为大家共同奋斗的主要纽带。由此可见，中华传统文化 中的思想能量能够为民族发展提供良好的精神动力，实现我 国的不断发展，为解决时代难题提供重要启示。中华传统文 化中存在较多的治国理政以及为人处世思想，并且强调实事 求是，从生活实践中探寻真理。并且，在为人处世方面，存 在较多的经典语录，在这些文化中蕴含的种种思想，对于当 前国家与社会发展仍存在极为重要的意义，能够为解决时代 难题提供重要启示，其中存在的治国经验以及政治智慧等， 能够使治国理政能力得到进一步提升[1-3]。
本网站通过对不同类别中国传统文化的展示，以促进国民对中国传统文化进行全面的认识，进而促进文化交，形成了解传统文化、重视传统文化、保护传统文化、传承传统文化现象。
在传统文化的传播上，主要以纸质记载和书籍为主，这种传播模式下，受众只有在固定的文化传播场所才能接收到传统的文化知识，而具备文化传播功能的固定产所也较为有限，包括图书馆、历史展览馆以及博物馆等，这些场所也需要受众花费相应的成本及时间。这种传统文化传播媒介，已经无法很好地适应现今文化发展需求，主动到固定场所接受文化传播的受众也在逐渐较少。其次，覆盖时间有限。由于在传统文化的传播上，主要是在固定的场所中进行，场所会在一定程度上限制传播的时间段。在互联网环境下，时间逐渐呈现出零散化以及碎片化特征。这种需要花费受众大量时间的传播方式，在传播效率上低于碎片化的传播方式。最后，方式创新不足。在我国传统文化中， 存在较多的经典故事与传统美德，可以帮助年轻人树立正确 的价值观以及人生观。但是年轻人基本上是在学校或其他场所获得传统文化知识，在知识的获取上存在较大的被动性， 并没有对传统文化有自己独特的认识，未能形成良好共鸣， 这种情况下，无法将其中的内涵与精髓吸收，提升自身。因 此，在中华传统文化传播上，需要对传播方式进行不断创 新，在多样化的传播方式下，提升年轻人对于传统文化的兴 趣，达到良好的传播效果。针对于当前传统文化传播情况， 需要积极探索全媒体下的创新传播途径来更好地传播中华传统文化，以保证中华传统文化功能的良好发挥。
现阶段，“互联网 +”环境下，各种先进技术也得以快速 发展，较多行业纷纷引进了“互联网 +”发展模式，而中华 传统文化传播过程中，也应积极利用互联网优势及巨大的潜 力，创建出新的发展空间。在内容形式上，可以选择新型的编译方式，通过全新的 视角，积极利用极具渲染力的方式，例如，图片、视频以及 音乐等，向人们呈现相应内容，更好地对中华传统文化进行推广传承。而在互联网技术下，融媒体能够有效打破时空 限制，在线上探寻传统文化传播途径，能够有效突破传统文化在空间上的限制，基于多种感官消化带来更好的传播效果[4-6]。
现今，我国少数民族优秀传统文化正在流失，许多文化遗产处于濒危状态。互联网作为信息技术的通信桥梁连接着全球的计算机，无论是在国内还是国外网站都得以迅速的发展和壮大，并被人们重视和关注，对于全球范围内不同地域的人们联系交流等等活动也日益重要。中华传统文化网以传统文化为载体，为的就是让更多中华儿女了解传统文化、重视传统文化、保护传统文化、传承传统文化。更有效地传承中弘扬中华优秀传统文化，在广泛弘扬中更好地传承中华优秀传统文化，在世界和国际社会中赢得应有的文化认同和文化尊重。
为了更简单明了的突出主体，提供更舒适的感官感受，本网站采用全屏网页设计，通过合理的页面布局，视觉冲击力大可很好的吸引观者注意。页面内的文字内容不是特别多，主要以图片展示为主。页面色彩除主页采取以红为主色调，其他页面主页以白底色为主色调。
网站的目录结构如下：
css ------存放CSS文件
image------存放图片文件
js -------存放js文件
index.html ---------首页
history.html -------历史页面
local.html ---------地域页面
nation.html---------民族页面
habit.html---------风俗页面
building.html-------建筑页面
art.html---------艺术页面
food.html---------美食页面
other.html---------其他页面
about.html---------关于页面
（1）三类轮播图
（2）图片自动放大图
（2）鼠标移动上图片放大
（2）文字显示与隐藏
（2）四类图片组
头部：包括input搜索框、logo和导航栏、轮播图片，如图1所示：
| 图1 首页头部效果图 |
中间：
| 图2 首页内容效果图 |
尾部：设计者信息、网页设计日期、友情链接
| 图3 首页尾部效果图 |
二级页面的头部和尾部均采用统一的模板，具体设计效果如下：
| 图4 二级页面头部和尾部效果图 |
二级页面的内容根据不同的主题灵活选取不同的布局，下面展示具体的设计效果。
历史页包含一个纵向的轮播图，分别展示历史战争、历史交流、历史美谈、历史人物轮播图
| 图5 历史页纵向轮播图 |
| 纵向轮播图html代码： |
| <ul id="deconum2" class="num_a2"> <li><a href="javascript:void(0)" hidefocus="true" target="_self">历史战争</a></li> <li><a href="javascript:void(0)" hidefocus="true" target="_self">历史交流</a></li> <li><a href="javascript:void(0)" hidefocus="true" target="_self">历史美谈</a></li> <li><a href="javascript:void(0)" hidefocus="true" target="_self">历史人物</a></li> </ul> </div> |
轮播图下面是4x4排列的图片组
| 图5 历史页4x4图片组 |
地域页的实现方式和历史页很类似（只做了江苏的详情页，其他城市未设计），具体的设计效果如下：
| 图6 地域页效果图 |
民族页通过图文的形式概述了民族特点，右下角滚动展示各民族图片，具体设计效果如下：
| 图7 民族页效果图 |
风俗页的实现参考了民族页和之前的一些设计，另外在底部图片上增加了缩放动画。
| 图8 风俗页效果图 |
| 具体的缩放动画css样式如下： @keyframes bannerScaleChange { 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .banner_top .big_div { width: 90%; margin: 0 auto; height: 400px; position: relative; margin-top: 30px; } .banner_top .big_div .headerDScreen { position: absolute; width: 100%; height: 400px; background-image: url('../image/habit.imgs/nav-.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; animation: bannerScaleChange 8s infinite; z-index: -1; } |
建筑页的实现方式和民俗页一样，具体设计效果如下：
| 图9 建筑页效果图 |
艺术页将带缩放动画的图片放到了顶部，图片布局的实现方式和之前类似，具体设计效果如下：
| 图10 艺术页效果图 |
美食页综合了前面页面典型的图文布局方式，具体设计效果如下：
| 图11 美食页效果图 |
这两个页面都比较基础简单，具体设计效果如下
| 图12 其他和关于页效果图 |
、
4 总结展望
总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。也希望老师在今后的日子里多指导。网页设计还有更多的技巧，有待于我们去挖掘和研究。由于平时课程比较繁忙，学习时间比较少，对于网页设计软件的强大功能运用得还不够.不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。
通过这次web前端课程设计让我对所学的知识有了回顾和加深，首先是HTML，对于这个确实是比较简单，只需要去记东西一些标签，主要是把这些HTML的基本标签给记熟了，在写代码的时候就不会卡，然后CSS还是包括了很多东西，学习了很多选择器，都有不同的作用，CSS的样式也有很多，比如background-color，font-size，float，尤其是浮动设置的格子有时可能会飞来飞去的，可能就是一个地方没有设置好，想实现的功能实现不了，动画也可以实现基本的效果。最难的还是JavaScript，学的并不是太扎实，接下来我会在深入的学习中进一步加强这方面知识点的理解。
参考文献
[1]尹啸童.探析新媒体时代传统文化电视节目的传播途径创新——以《中国 成语大会》为例[J].传播力研究,2019(16):1.
[2]杨文代.发挥新媒体“短平快”优势创新优秀传统文化传播路径[J].视界观, 2020(7):1.
[3]许小凡,郭书凝,何秋辉,等.中华传统文化新媒体传播之我见[J].硅谷,2019, 5(2):39-40.
[4]李梦玲.融媒体视角下传统文化传播方式创新[J].传媒论坛,2020,3(10):2.
[5]李艳.探究中国传统文化跨文化传播的创新——以茶道文化为例解析[J].北 极光,2019(10):86-87.
[6]苟延峰,袁柏林,吕延.新媒体时代中国优秀传统文化传播问题探究——以安 徽省市域调查为例[J].皖西学院学报,2021,37(4):6.
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
