《网页设计与制作教程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友好性。

四、核心页面制作步骤示例（以首页为例）

搭建基础框架： 编写HTML5基础文档结构，引入必要的CSS和JS文件。

构建导航栏： 使用Bootstrap Navbar，修改品牌Logo和链接，适配响应式。

设计轮播图区域： 配置Carousel组件，填充具有古典意境的图片和诗文名句。

布局“精选诗文”区域： 使用栅格系统，每行放置3-4个Card组件（大屏下），每个Card内包含诗文标题、摘要和“阅读更多”按钮。

构建“名家风采”区域： 使用网格系统展示诗人头像和姓名，点击可跳转至作者页。

设计页脚： 放置版权信息、网站简介和友情链接。

全局样式精修： 通过自定义CSS，统一调整颜色、字体、间距，添加微交互效果。

跨设备测试： 使用浏览器开发者工具模拟不同尺寸设备，检查并调整布局与样式。

五、项目与拓展

完成“古诗文网”项目后，学员应能：

独立规划并实现一个中等复杂度的响应式网站。

深刻理解Bootstrap框架“移动优先”的设计理念及其效率优势。

掌握将视觉设计稿转化为标准网页代码的能力。

拓展建议：
交互增强： 可以为诗文详情页添加“收藏”、“朗读”功能（需结合JavaScript）。
后台对接： 将静态页面改造为动态网站，思考如何与后端（如PHP、Node.js）进行数据交互，实现诗文的动态管理。
* 性能优化： 对图片进行压缩，考虑使用Bootstrap定制工具只引入所需组件，以减少CSS文件体积。

通过本项目从0到1的实践，“古诗文网”不仅是一个作品，更是学员迈向专业前端开发者的重要里程碑，为后续学习JavaScript交互及全栈开发打下坚实的项目基础。