《網頁設計與制作教程HTML+CSS+Bootstrap》項目四：創建企業級網站——古詩文網

一、 項目概述與學習目標

項目四《創建網站古詩文網》是本課程綜合實踐的核心環節。本項目旨在將HTML、CSS以及Bootstrap框架的理論知識融會貫通，通過完成一個具有企業級標準的古詩文展示類網站，全面提升學員的網頁設計與制作實戰能力。

核心學習目標：
1. 技術整合： 熟練掌握HTML5進行語義化結構搭建，運用CSS3進行精細化樣式控制，并利用Bootstrap前端框架實現高效、響應式的頁面布局。
2. 企業流程實踐： 體驗從需求分析、原型設計、頁面切圖到代碼實現、測試調整的完整網頁開發流程。
3. 設計思維培養： 掌握如何為特定主題（古詩文）設計符合其文化氣質的視覺風格、色彩搭配與版式布局。
4. 響應式開發： 確保網站在桌面、平板、手機等多種設備上均有良好的瀏覽體驗。

二、 項目需求與設計分析

1. 網站定位：
一個集經典古詩文展示、作者介紹、文化知識普及于一體的專業文化網站，界面需典雅、簡潔、富有書卷氣。

2. 主要功能頁面：
首頁 (index.html): 網站門戶，包含導航欄、輪播圖（展示經典名句）、精選詩文推薦、熱門作者、頁腳信息等。
詩文列表頁 (list.html): 按朝代、類型或作者分類展示詩文標題和摘要，提供搜索和分頁功能。
詩文詳情頁 (detail.html): 完整展示單篇詩文的原文、注釋、譯文及賞析。
作者頁 (author.html): 介紹詩人詞人的生平、成就及相關作品鏈接。

3. 設計風格：
色彩方案： 主色調采用水墨黑（#333）、宣紙白（#f8f5e6）、朱砂紅（#c03）或黛青（#3a7a7a）等中國傳統色。
字體： 標題可使用書法感字體（通過Web Font引入或圖片），正文字體優先選擇宋體、楷體等襯線字體或黑體等無襯線字體。
* 元素： 適當運用古典紋樣、印章、毛筆筆觸等元素作為裝飾。

三、 技術實現要點

1. 項目結構與環境搭建
創建清晰的文件夾結構（css, js, images, fonts等）。
通過CDN或本地文件引入Bootstrap CSS和JS庫，以及jQuery依賴。
* 創建自定義的CSS樣式文件（如style.css）覆蓋或補充Bootstrap樣式。

2. 使用Bootstrap實現響應式布局
柵格系統 (Grid System): 為核心內容區域（如詩文列表、詳情排版）使用.container、.row和.col-</em>類進行靈活布局。
導航欄 (Navbar): 使用Bootstrap導航欄組件，并利用折疊類實現移動端的漢堡菜單。
輪播圖 (Carousel): 首頁使用Bootstrap輪播組件展示精選圖文。
卡片 (Card): 用于展示詩文摘要、作者簡介，使內容模塊化、美觀。
分頁 (Pagination) 與 按鈕 (Button): 在列表頁使用分頁組件，全站統一按鈕樣式。

3. 自定義CSS深化設計
全局樣式重置與定義： 設置基礎字體、顏色、鏈接樣式。
細節美化： 為卡片添加懸停陰影效果，為導航欄設置滾動監聽，為引用詩句設計特殊的邊框和背景。
* 響應式微調： 使用媒體查詢（Media Queries）對Bootstrap未能完美適配的細節（如字體大小、邊距）進行設備專屬調整。

4. 語義化HTML5結構
* 合理使用 <header>, <nav>, <main>, <article>, <section>, <footer> 等語義化標簽，提升代碼可讀性和SEO友好性。

四、 核心頁面制作步驟示例（以首頁為例）

1. 搭建基礎框架： 編寫HTML5基礎文檔結構，引入必要的CSS和JS文件。
2. 構建導航欄： 使用Bootstrap Navbar，修改品牌Logo和鏈接，適配響應式。
3. 設計輪播圖區域： 配置Carousel組件，填充具有古典意境的圖片和詩文名句。
4. 布局“精選詩文”區域： 使用柵格系統，每行放置3-4個Card組件（大屏下），每個Card內包含詩文標題、摘要和“閱讀更多”按鈕。
5. 構建“名家風采”區域： 使用網格系統展示詩人頭像和姓名，點擊可跳轉至作者頁。
6. 設計頁腳： 放置版權信息、網站簡介和友情鏈接。
7. 全局樣式精修： 通過自定義CSS，統一調整顏色、字體、間距，添加微交互效果。
8. 跨設備測試： 使用瀏覽器開發者工具模擬不同尺寸設備，檢查并調整布局與樣式。

五、 項目與拓展

完成“古詩文網”項目后，學員應能：

• 獨立規劃并實現一個中等復雜度的響應式網站。
• 深刻理解Bootstrap框架“移動優先”的設計理念及其效率優勢。
• 掌握將視覺設計稿轉化為標準網頁代碼的能力。

拓展建議：
交互增強： 可以為詩文詳情頁添加“收藏”、“朗讀”功能（需結合JavaScript）。
后臺對接： 將靜態頁面改造為動態網站，思考如何與后端（如PHP、Node.js）進行數據交互，實現詩文的動態管理。
* 性能優化： 對圖片進行壓縮，考慮使用Bootstrap定制工具只引入所需組件，以減少CSS文件體積。

通過本項目從0到1的實踐，“古詩文網”不僅是一個作品，更是學員邁向專業前端開發者的重要里程碑，為后續學習JavaScript交互及全棧開發打下堅實的項目基礎。