广州大学Web应用技术实验一（红色长廊主题）

一、实验目的及要求

1. 了解Web基本原理；
2. 掌握HTML和CSS基本语法；
3. 熟练运用HTML和CSS制作静态网页；

二、实验设备与平台

1. 实验设备：个人计算机。
   2.平台及工具：Windows，Linux 或Mac OS操作系统，现代浏览器， Apache Tomcat及HTML编辑工具。

三、实验内容及步骤

1. 使用HTML、CSS等技术制作“广大红色文化长廊”网站首页。
   1） 要求代码整洁，采用缩进格式，有适当的注释。
   2） 内容尽量丰富，界面美观。
   3） 软件功能说明、编写的代码说明和运行结果截图复制到题目后面的空白处。
2. 效果示例
   参考：“学习强国”（https://www.xuexi.cn/），
   “人民网”（http://www.people.com.cn/）

（正式内容）
一、网站首页说明
网站整体功能构想说明:
整体构想分“特色景点”，“风云人物”，“党的历史”，“英雄故事”，“党史竞答”，“论坛”，以及“登录注册”模块七个方面来讲述广大红色长廊。这个网站可能更多的是给访客补充党建知识的网站。
其中特色景点想围绕红色长廊中的gzhu打卡牌照框，夜晚会有亮灯的写有每年历史事件红色柱子，行政楼小广场中的大型红色环绕建筑以及整面可有光明日报内容的墙，这些特色的设计。风云人物则是想围绕中国共产党创立之初的领衔人物，如陈独秀、李大钊等这些对党建初期做有贡献的人的事迹。党的历史则是由红色长廊上每隔几米的红色柱子上的历年事件触发的灵感，想要另起一页用一个时间轴这样的特效来介绍。英雄故事则是想讲述我们从小就学习到的黄继光、邱少云这类英雄人物的故事，以及最近上映的电影平津湖中的英雄原型，还有在高考阅读题中常出现的女英雄赵一曼这类人物的英雄事迹。党史竞答则是由老师前面布置的平时作业合到这个网站里。论坛则是想另起模块放些近代以及现在一些相关的党报新闻之类的文章，让来访问网站的人能够从文章中了解更多更新的事件，并且在登录之后能够在这些文章下留下读后感或者自己的一些观点。登录模块暂时还没有放在导航栏上，这是一个待开发模块，在后续学习了jsp链接数据库的相关知识后会做相应的更改。

总体的菜单设置、板块设置及简单介绍:
首页的菜单设置的很简单，在首页顶部使用ul,li,a这些标签将每个版块的名称摆放在一排，当你想访问具体的一个版块时，点击对应的文字即可跳转到相应的版块页面。

菜单设置下是一个轮播图，播放广大红色长廊中一些具有特点的设计之处。可以点击图片左右两边的按钮实现图片的播放，也可以点击图片下方的小圆点跳到对应图片。不做任何操作时图片会自动定时播放下一张图片。

轮播图下面是一个滚动到相应位置会弹出的模块，模块内有一幅图片以及一首诗《我用残损的手掌》，这部分是想点一下网站的主题，也是想让首页更加美观一些。

弹出模块下面则是风云人物模块的简要介绍部分，使用了三个卡片简要列举了三个人物，通过点击下面的“了解更多”则可跳转到相应的模块页面

接着是英雄故事模块的简要介绍部分，使用了一个css特效，通过将鼠标放在模块内并滚动鼠标，能够看到英雄人物的简要介绍，点击“了解更多”则可跳转到该模块具体内容页面。

在接着是党的历史模块的简要介绍部分，使用了简单的布局，用文字和图片，想以报纸的感觉呈现这部分。在尾部有“了解更多”的链接，点击即可跳转。

最后是首页的footer部分，写了作者署名以及网站的主题名称。

二、程序组成及代码说明
首页代码的主要组成部分如下图。css文件夹中有base.css，index.css，index1.css；images文件夹中则放有首页中需要用到的图片。Js文件夹中有animate.js，index.js，index1.js，jquery.min.js；剩下的就是首页index.html

1. 运行结果截图
   
   
   
   
   

2. 主要程序代码说明
   A) index.html代码说明
   源代码参见source目录下的index.html。
   首页的结构搭建在文件中定义。
   B) index.css代码说明
   源代码参见source目录下css文件夹中的index.css。
   首页的大部分样式在此文件中定义。
   C) base.css代码说明
   源代码参见source目录下css文件夹中的base.css。
   在此文件中修改一些标签自带的默认样式，定义一些默认样式
   D）index1.css代码说明
   源代码参见source目录下css文件夹中的index1.css。
   首页中的英雄故事部分的样式在此文件中定义。
   E) js文件夹代码说明
   源代码参见source目录下js文件夹
   其中的index.js，animate.js用在首页的轮播图部分，index.js中调用了定义在 animate.js的函数；index1.js用在英雄故事部分；jquery.min.js使首页有了动画显示的特效。

3. 其它
   注意首页的显示可能要在连网的情况下打开，因为英雄故事部分使用的css+js特效直接调用了在线网上的js。

三、小结
通过这次实验，更加地熟悉了HTML和CSS的使用。在这次实验中，我觉得相比于HTML对首页进行布局的问题，CSS更加有难度。有很多属性如果不多加使用是会很容易忘记的。而且就算记得，如何正确地使用也很难。很多情况下页面出来的样式效果跟预期的很不符合，这个时候又得要不断的调整看页面的呈现效果，在这我花费了很多时间。从这也发现自己对CSS的掌握还有很多不足。
遇到的问题：

①jquery随着滚动条滚动，元素滑动显示的问题
想要滚动条滚动到距离滚动条顶部的一定距离时，div标签从display:none;变为显示。想要这种动画效果，百度了之后发现使用jquery的show函数可以实现。但是发现当对在首页中占有位置的div使用display:none;和show函数时无法实现该效果。后面改为使用子绝父相，对父盒子div使用position:relative;并定义好宽高。对子盒子使用position:absolute;display:none;以及show函数控制滚动条到一定位置时，可以实现该效果。

②文字环绕图片的问题

像上面图片中的代码那样，将文字和图片放在同一级时文字会自动环绕图片。修改错误之前在文字外面再套了一层div标签，让div标签和Img标签同级时，就导致了无法实现文字环绕图片的效果。

③使用background-image:url(…)无法显示背景图片的问题
要注意Url中的图片相对于当前文件的相对位置。该属性写在css文件夹中的css文件中，想要调用images文件夹中的图片，url中应该写…/images/图片名称