中南大学web技术实验报告(计算机物联网专业专用).pdfVIP

中南大学

Web技术实验报告

学生姓名:胡家威

学号:0909090807

专业班级:计科0902班

指导老师:盛羽

学院:信息科学与工程学院

完成时间:2012年5月30日

目录

实验目的

实验内容

详细设计

界面展示

实验目的

了解和掌握基本的Web技术，包括HTML、CSS、Javascript等。

实验内容

(1).制作一个个人主页；

(2).制作一个相册。

详细设计

【请老师相信这是学生做的，内容为英文是我个人的习惯，不喜欢写着写着切换中英文！】

1.首先界面设计：个人主页我分为了五大模块：首页（Home），个人简介（Portfolio），博

客（Blog），相册（Photos），联系方式（Contact）。为了将第二个作业整合进来，我给

了添加了一个新的模块（Exercise），链接进去。

2.接着是各个界面的设计：首先，个人主页的各个页面我使用统一的界面风格，只是其中

的内容不相同罢了。统一的界面风格如下：

2.1.背景是一张小图片，宽只有1个像素，然后竖直平铺下去。

图片上面的颜色深下面浅，这样就可以表现出渐变式的背景。

2.2.中间内容区域最上面是一个使用Flash制作的3D动态切换效果。【图片是校园图片】

2.3.接下来是导航栏，导航栏是一个标准的导航了，这里没有子菜单，被选中的菜单项

会呈现出不一样的效果。

2.4.然后是中间内容区域，这个不同页面内容不同。

2.5.最后是页面底部，底部也是标准的网页底部，标明了版权以及制作人（yinger就是

我），同时标明它是符合CSS和XHTML规范的。

3.首页分析：中间部分是一个用JS制作的特效，分为5部分，可以自动切换。

4.个人简介页面分析：这里也是使用了一个JS制作的特效，形成了四页的选项卡，每个

选项卡中的页面其实是在JS中从外部加载进来的，效果很好。这里分别记录了我的童

年，初中，高中和大学。

5.博客页面分析：这个页面分为了两个部分，左边显示博文，右边显示其他信息，包括作

者信息，有哪些信誉好的足球投注网站，文章分类列表。

6.相册页面：这个页面就是显示图片，我找了一个插件，好不容易应用上了，它可以实现

图片的分页显示，并通过左右的两个按钮进行图片的切换。

7.联系方式页面：这个页面就是显示一个表单，表单中让用户输入相应的内容，然后可以

点击提交，但是这个提交是没有效果的。

8.然后就是实验二中的部分，实验二的界面不同：

8.1.最上面的是一个logo，鼠标移上去时会显示出另外一张颜色更深的图片。但是由于

没有找到更好的图片，所以显示的图片的圆角处可以看到白色部分。

8.2.然后是导航栏，这个是要实现有下拉菜单的导航栏，我借用了一个，实现了多级联

的菜单。

没有选择

显示子菜单

显示多级子菜单

8.3.最后是相册，我做了一个相册，但是实现了两个要求内容，既可以每页显示6张图

片，通过点击按钮可以进行切换，也可以点击图片查看大的图片。

点击向右

点击图片显示大图

2.个人简介

4.相册

5.联系方式

6.