網(wǎng)頁大作業(yè)——中華傳統(tǒng)文化網(wǎng)頁作業(yè)報(bào)告

時(shí)間：2023-09-20 15:00:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-20 15:00:01 來源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁大作業(yè)——中華傳統(tǒng)文化網(wǎng)頁作業(yè)報(bào)告：傳統(tǒng)文化網(wǎng)站設(shè)計(jì)

設(shè)計(jì)課程： WEB前端開發(fā)技術(shù)
系 別：
專 業(yè)： 軟件工程
班 級(jí)：
姓 名：
學(xué) 號(hào)：
設(shè)計(jì)時(shí)間： 2020年6月
摘要
中國(guó)傳統(tǒng)文化(traditional culture of China)是中華文明演化而匯集成的一種反映民族特質(zhì)和風(fēng)貌的民族文化，是民族歷史上各種思想文化、觀念形態(tài)的總體表征，是指居住在中國(guó)地域內(nèi)的中華民族及其祖先所創(chuàng)造的、為中華民族世世代代所繼承發(fā)展的、具有鮮明民族特色的、歷史悠久、內(nèi)涵博大精深、傳統(tǒng)優(yōu)良的文化。在全球化浪潮中，保傳統(tǒng)文化對(duì)維護(hù)世界文化的多樣性具有十分重要的意義。世界上任何民族，如果拋棄民族文化傳統(tǒng)，沒有任何特色，就會(huì)在世界民族之林中失去地位，同時(shí)也在國(guó)際政治中失去影響力。現(xiàn)今，我國(guó)少數(shù)民族優(yōu)秀傳統(tǒng)文化正在流失，許多文化遺產(chǎn)處于瀕危狀態(tài)?；ヂ?lián)網(wǎng)作為信息技術(shù)的通信橋梁連接著全球的計(jì)算機(jī)，無論是在國(guó)內(nèi)還是國(guó)外網(wǎng)站都得以迅速的發(fā)展和壯大，并被人們重視和關(guān)注，對(duì)于全球范圍內(nèi)不同地域的人們聯(lián)系交流等等活動(dòng)也日益重要。中華傳統(tǒng)文化網(wǎng)以傳統(tǒng)文化為載體，為的就是讓更多中華兒女了解傳統(tǒng)文化、重視傳統(tǒng)文化、保護(hù)傳統(tǒng)文化、傳承傳統(tǒng)文化。本次開發(fā)主要以HTML5+CSS3+JavaScript等技術(shù)構(gòu)建此網(wǎng)站。
關(guān)鍵詞：中華民族、中華傳統(tǒng)文化、傳承

目錄
href="https://zhuanlan.zhihu.com/write#_Toc104734112">第一章 前言
1.1 傳統(tǒng)文化價(jià)值
1.2 傳統(tǒng)文化傳播情況
"https://zhuanlan.zhihu.com/write#_Toc104734115">1.3 設(shè)計(jì)目的
href="https://zhuanlan.zhihu.com/write#_Toc104734116">第二章 設(shè)計(jì)思路
"https://zhuanlan.zhihu.com/write#_Toc104734117">2.1 風(fēng)格定位
"https://zhuanlan.zhihu.com/write#_Toc104734118">2.2 網(wǎng)站結(jié)構(gòu)
"https://zhuanlan.zhihu.com/write#_Toc104734119">2.3 主要功能
href="https://zhuanlan.zhihu.com/write#_Toc104734120">第三章 設(shè)計(jì)效果
f="https://zhuanlan.zhihu.com/write#_Toc104734121">3.1 首頁
="https://zhuanlan.zhihu.com/write#_Toc104734122">3.2二級(jí)頁面
3.2.1 歷史頁
3.2.2 地域頁
3.2.3 民族頁
3.2.4 風(fēng)俗頁
3.2.5 建筑頁
3.2.6 藝術(shù)頁
3.2.7 美食頁
3.2.8其他和關(guān)于頁
href="https://zhuanlan.zhihu.com/write#_Toc104734131">第四章 總結(jié)與展望


第一章 前言
1.1 傳統(tǒng)文化價(jià)值
中華民族優(yōu)秀傳統(tǒng)文化是中華民族生存和發(fā)展所依賴的精神支撐，是中華民族自尊心和自信心所根植的土壤，是國(guó)家走向富強(qiáng)的軟實(shí)力資源。傳承和弘揚(yáng)中華優(yōu)秀傳統(tǒng)文化，就是形成中華優(yōu)秀傳統(tǒng)文化現(xiàn)代意識(shí)的認(rèn)同感，喚起復(fù)興中華優(yōu)秀傳統(tǒng)文化的使命感，發(fā)揚(yáng)光大中華優(yōu)秀傳統(tǒng)文化的人文精神，激活中華優(yōu)秀傳統(tǒng)文化的強(qiáng)大基因。
中華傳統(tǒng)文化包括了皮影戲、京劇、國(guó)畫、書 法、文字、語言、六藝、音樂、武術(shù)、曲藝、棋類、節(jié)日、 民俗等方面的內(nèi)容，尤其在皮影戲、京劇、國(guó)畫、書法方面，具備較強(qiáng)的文學(xué)性與藝術(shù)性，并蘊(yùn)含較為深刻的思想內(nèi)涵。其中，中華優(yōu)秀傳統(tǒng)文化中所蘊(yùn)含的思想能夠突顯出社會(huì)主義核心價(jià)值。對(duì)于社會(huì)主義核心價(jià)值而言，其屬于國(guó)家與民族的主流價(jià)值觀，更是促進(jìn)全國(guó)人民團(tuán)結(jié)統(tǒng)一的重要思想與文化基礎(chǔ)。其思想基礎(chǔ)主要內(nèi)容包括三個(gè)層面，第一層面為：富強(qiáng)、民主、文明、和諧。在儒家文化中，存在較為豐富的和思想，例如，“君子周而不比，小人比而不周?！钡诙€(gè)層面為：自由、平等、公正、法治，在孔子提出的“有教無類”中，顯示的就是人人平等。第三個(gè)層面為：愛國(guó)、 敬業(yè)、誠信、友善，例如，儒家文化中的“躬自厚而薄責(zé)于人”等思想，從中可以看出，中華傳統(tǒng)文化中蘊(yùn)含著較多與社會(huì)主義核心價(jià)值相符合的內(nèi)容。其次，為民族發(fā)展提供精神動(dòng)力。在中華傳統(tǒng)文化中，存在豐富的精神食糧，還涵蓋著較許多中華民族更深層次的精神追求，在不斷發(fā)展中，已 經(jīng)成為大家共同奮斗的主要紐帶。由此可見，中華傳統(tǒng)文化 中的思想能量能夠?yàn)槊褡灏l(fā)展提供良好的精神動(dòng)力，實(shí)現(xiàn)我 國(guó)的不斷發(fā)展，為解決時(shí)代難題提供重要啟示。中華傳統(tǒng)文 化中存在較多的治國(guó)理政以及為人處世思想，并且強(qiáng)調(diào)實(shí)事 求是，從生活實(shí)踐中探尋真理。并且，在為人處世方面，存 在較多的經(jīng)典語錄，在這些文化中蘊(yùn)含的種種思想，對(duì)于當(dāng) 前國(guó)家與社會(huì)發(fā)展仍存在極為重要的意義，能夠?yàn)榻鉀Q時(shí)代 難題提供重要啟示，其中存在的治國(guó)經(jīng)驗(yàn)以及政治智慧等， 能夠使治國(guó)理政能力得到進(jìn)一步提升[1-3]。
本網(wǎng)站通過對(duì)不同類別中國(guó)傳統(tǒng)文化的展示，以促進(jìn)國(guó)民對(duì)中國(guó)傳統(tǒng)文化進(jìn)行全面的認(rèn)識(shí)，進(jìn)而促進(jìn)文化交，形成了解傳統(tǒng)文化、重視傳統(tǒng)文化、保護(hù)傳統(tǒng)文化、傳承傳統(tǒng)文化現(xiàn)象。
1.2 傳統(tǒng)文化傳播情況
在傳統(tǒng)文化的傳播上，主要以紙質(zhì)記載和書籍為主，這種傳播模式下，受眾只有在固定的文化傳播場(chǎng)所才能接收到傳統(tǒng)的文化知識(shí)，而具備文化傳播功能的固定產(chǎn)所也較為有限，包括圖書館、歷史展覽館以及博物館等，這些場(chǎng)所也需要受眾花費(fèi)相應(yīng)的成本及時(shí)間。這種傳統(tǒng)文化傳播媒介，已經(jīng)無法很好地適應(yīng)現(xiàn)今文化發(fā)展需求，主動(dòng)到固定場(chǎng)所接受文化傳播的受眾也在逐漸較少。其次，覆蓋時(shí)間有限。由于在傳統(tǒng)文化的傳播上，主要是在固定的場(chǎng)所中進(jìn)行，場(chǎng)所會(huì)在一定程度上限制傳播的時(shí)間段。在互聯(lián)網(wǎng)環(huán)境下，時(shí)間逐漸呈現(xiàn)出零散化以及碎片化特征。這種需要花費(fèi)受眾大量時(shí)間的傳播方式，在傳播效率上低于碎片化的傳播方式。最后，方式創(chuàng)新不足。在我國(guó)傳統(tǒng)文化中， 存在較多的經(jīng)典故事與傳統(tǒng)美德，可以幫助年輕人樹立正確 的價(jià)值觀以及人生觀。但是年輕人基本上是在學(xué)?；蚱渌麍?chǎng)所獲得傳統(tǒng)文化知識(shí)，在知識(shí)的獲取上存在較大的被動(dòng)性， 并沒有對(duì)傳統(tǒng)文化有自己獨(dú)特的認(rèn)識(shí)，未能形成良好共鳴， 這種情況下，無法將其中的內(nèi)涵與精髓吸收，提升自身。因 此，在中華傳統(tǒng)文化傳播上，需要對(duì)傳播方式進(jìn)行不斷創(chuàng) 新，在多樣化的傳播方式下，提升年輕人對(duì)于傳統(tǒng)文化的興 趣，達(dá)到良好的傳播效果。針對(duì)于當(dāng)前傳統(tǒng)文化傳播情況， 需要積極探索全媒體下的創(chuàng)新傳播途徑來更好地傳播中華傳統(tǒng)文化，以保證中華傳統(tǒng)文化功能的良好發(fā)揮。
現(xiàn)階段，“互聯(lián)網(wǎng) +”環(huán)境下，各種先進(jìn)技術(shù)也得以快速 發(fā)展，較多行業(yè)紛紛引進(jìn)了“互聯(lián)網(wǎng) +”發(fā)展模式，而中華 傳統(tǒng)文化傳播過程中，也應(yīng)積極利用互聯(lián)網(wǎng)優(yōu)勢(shì)及巨大的潛 力，創(chuàng)建出新的發(fā)展空間。在內(nèi)容形式上，可以選擇新型的編譯方式，通過全新的 視角，積極利用極具渲染力的方式，例如，圖片、視頻以及 音樂等，向人們呈現(xiàn)相應(yīng)內(nèi)容，更好地對(duì)中華傳統(tǒng)文化進(jìn)行推廣傳承。而在互聯(lián)網(wǎng)技術(shù)下，融媒體能夠有效打破時(shí)空 限制，在線上探尋傳統(tǒng)文化傳播途徑，能夠有效突破傳統(tǒng)文化在空間上的限制，基于多種感官消化帶來更好的傳播效果[4-6]。
1.3 設(shè)計(jì)目的
現(xiàn)今，我國(guó)少數(shù)民族優(yōu)秀傳統(tǒng)文化正在流失，許多文化遺產(chǎn)處于瀕危狀態(tài)。互聯(lián)網(wǎng)作為信息技術(shù)的通信橋梁連接著全球的計(jì)算機(jī)，無論是在國(guó)內(nèi)還是國(guó)外網(wǎng)站都得以迅速的發(fā)展和壯大，并被人們重視和關(guān)注，對(duì)于全球范圍內(nèi)不同地域的人們聯(lián)系交流等等活動(dòng)也日益重要。中華傳統(tǒng)文化網(wǎng)以傳統(tǒng)文化為載體，為的就是讓更多中華兒女了解傳統(tǒng)文化、重視傳統(tǒng)文化、保護(hù)傳統(tǒng)文化、傳承傳統(tǒng)文化。更有效地傳承中弘揚(yáng)中華優(yōu)秀傳統(tǒng)文化，在廣泛弘揚(yáng)中更好地傳承中華優(yōu)秀傳統(tǒng)文化，在世界和國(guó)際社會(huì)中贏得應(yīng)有的文化認(rèn)同和文化尊重。
第二章 設(shè)計(jì)思路
2.1 風(fēng)格定位
為了更簡(jiǎn)單明了的突出主體，提供更舒適的感官感受，本網(wǎng)站采用全屏網(wǎng)頁設(shè)計(jì)，通過合理的頁面布局，視覺沖擊力大可很好的吸引觀者注意。頁面內(nèi)的文字內(nèi)容不是特別多，主要以圖片展示為主。頁面色彩除主頁采取以紅為主色調(diào)，其他頁面主頁以白底色為主色調(diào)。
2.2 網(wǎng)站結(jié)構(gòu)


網(wǎng)站的目錄結(jié)構(gòu)如下：
css ------存放CSS文件
image------存放圖片文件
js -------存放js文件
index.html ---------首頁
history.html -------歷史頁面
local.html ---------地域頁面
nation.html---------民族頁面
habit.html---------風(fēng)俗頁面
building.html-------建筑頁面
art.html---------藝術(shù)頁面
food.html---------美食頁面
other.html---------其他頁面
about.html---------關(guān)于頁面
2.3 主要功能
（1）三類輪播圖
（2）圖片自動(dòng)放大圖
（2）鼠標(biāo)移動(dòng)上圖片放大
（2）文字顯示與隱藏
（2）四類圖片組
第三章 設(shè)計(jì)效果
3.1 首頁
頭部：包括input搜索框、logo和導(dǎo)航欄、輪播圖片，如圖1所示：


中間：


尾部：設(shè)計(jì)者信息、網(wǎng)頁設(shè)計(jì)日期、友情鏈接


3.2二級(jí)頁面
二級(jí)頁面的頭部和尾部均采用統(tǒng)一的模板，具體設(shè)計(jì)效果如下：


二級(jí)頁面的內(nèi)容根據(jù)不同的主題靈活選取不同的布局，下面展示具體的設(shè)計(jì)效果。
3.2.1 歷史頁
歷史頁包含一個(gè)縱向的輪播圖，分別展示歷史戰(zhàn)爭(zhēng)、歷史交流、歷史美談、歷史人物輪播圖

縱向輪播圖html代碼：

<ul id="deconum2" class="num_a2"> <li><a href="javascript:void(0)" hidefocus="true" target="_self">歷史戰(zhàn)爭(zhēng)</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排列的圖片組


3.2.2 地域頁
地域頁的實(shí)現(xiàn)方式和歷史頁很類似（只做了浙江的詳情頁，其他城市未設(shè)計(jì)），具體的設(shè)計(jì)效果如下：


3.2.3 民族頁
民族頁通過圖文的形式概述了民族特點(diǎn)，右下角滾動(dòng)展示各民族圖片，具體設(shè)計(jì)效果如下：



3.2.4 風(fēng)俗頁
風(fēng)俗頁的實(shí)現(xiàn)參考了民族頁和之前的一些設(shè)計(jì)，另外在底部圖片上增加了縮放動(dòng)畫。

具體的縮放動(dòng)畫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; }

3.2.5 建筑頁
建筑頁的實(shí)現(xiàn)方式和民俗頁一樣，具體設(shè)計(jì)效果如下：



3.2.6 藝術(shù)頁
藝術(shù)頁將帶縮放動(dòng)畫的圖片放到了頂部，圖片布局的實(shí)現(xiàn)方式和之前類似，具體設(shè)計(jì)效果如下：


3.2.7 美食頁
美食頁綜合了前面頁面典型的圖文布局方式，具體設(shè)計(jì)效果如下：


3.2.8其他和關(guān)于頁
這兩個(gè)頁面都比較基礎(chǔ)簡(jiǎn)單，具體設(shè)計(jì)效果如下


第四章 總結(jié)與展望
4 總結(jié)展望
總體來說，通過今次的對(duì)網(wǎng)頁設(shè)計(jì)的學(xué)習(xí)，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁設(shè)計(jì)的大門，只要我再認(rèn)真努力的去學(xué)習(xí)，去提高，憑借我對(duì)網(wǎng)頁設(shè)計(jì)的熱情和執(zhí)著，我將來設(shè)計(jì)出的網(wǎng)頁會(huì)更加專業(yè)，更完善。也希望老師在今后的日子里多指導(dǎo)。網(wǎng)頁設(shè)計(jì)還有更多的技巧，有待于我們?nèi)ネ诰蚝脱芯?。由于平時(shí)課程比較繁忙，學(xué)習(xí)時(shí)間比較少，對(duì)于網(wǎng)頁設(shè)計(jì)軟件的強(qiáng)大功能運(yùn)用得還不夠.不知不覺網(wǎng)頁設(shè)計(jì)的課程將要結(jié)束了，這門課程所包含內(nèi)容的豐富是讓我從沒有想到的。
通過這次web前端課程設(shè)計(jì)讓我對(duì)所學(xué)的知識(shí)有了回顧和加深，首先是HTML，對(duì)于這個(gè)確實(shí)是比較簡(jiǎn)單，只需要去記東西一些標(biāo)簽，主要是把這些HTML的基本標(biāo)簽給記熟了，在寫代碼的時(shí)候就不會(huì)卡，然后CSS還是包括了很多東西，學(xué)習(xí)了很多選擇器，都有不同的作用，CSS的樣式也有很多，比如background-color，font-size，float，尤其是浮動(dòng)設(shè)置的格子有時(shí)可能會(huì)飛來飛去的，可能就是一個(gè)地方?jīng)]有設(shè)置好，想實(shí)現(xiàn)的功能實(shí)現(xiàn)不了，動(dòng)畫也可以實(shí)現(xiàn)基本的效果。最難的還是JavaScript，學(xué)的并不是太扎實(shí)，接下來我會(huì)在深入的學(xué)習(xí)中進(jìn)一步加強(qiáng)這方面知識(shí)點(diǎn)的理解。
參考文獻(xiàn)
[1]尹嘯童.探析新媒體時(shí)代傳統(tǒng)文化電視節(jié)目的傳播途徑創(chuàng)新——以《中國(guó) 成語大會(huì)》為例[J].傳播力研究,2019(16):1.
[2]楊文代.發(fā)揮新媒體“短平快”優(yōu)勢(shì)創(chuàng)新優(yōu)秀傳統(tǒng)文化傳播路徑[J].視界觀, 2020(7):1.
[3]許小凡,郭書凝,何秋輝,等.中華傳統(tǒng)文化新媒體傳播之我見[J].硅谷,2019, 5(2):39-40.
[4]李夢(mèng)玲.融媒體視角下傳統(tǒng)文化傳播方式創(chuàng)新[J].傳媒論壇,2020,3(10):2.
[5]李艷.探究中國(guó)傳統(tǒng)文化跨文化傳播的創(chuàng)新——以茶道文化為例解析[J].北 極光,2019(10):86-87.
[6]茍延峰,袁柏林,呂延.新媒體時(shí)代中國(guó)優(yōu)秀傳統(tǒng)文化傳播問題探究——以安 徽省市域調(diào)查為例[J].皖西學(xué)院學(xué)報(bào),2021,37(4):6.