当前位置:文档之家› 中南大学web技术实验报告(计算机物联网专业专用)

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

中南大学Web技术实验报告
学生姓名: 胡家威
学号: 0909090807
专业班级: 计科0902班
指导老师: 盛羽
学院: 信息科学与工程学院完成时间: 2012年5月30日
目录
实验目的 (3)
实验内容 (3)
详细设计 (3)
界面展示 (11)
实验目的
了解和掌握基本的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.博客页面分析:这个页面分为了两个部分,左边显示博文,右边显示其他信息,包括作
者信息,搜索,文章分类列表。

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

7.联系方式页面:这个页面就是显示一个表单,表单中让用户输入相应的内容,然后可以
点击提交,但是这个提交是没有效果的。

8.然后就是实验二中的部分,实验二的界面不同:
8.1.最上面的是一个logo,鼠标移上去时会显示出另外一张颜色更深的图片。

但是由于
没有找到更好的图片,所以显示的图片的圆角处可以看到白色部分。

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

没有选择
显示子菜单
显示多级子菜单
8.3.最后是相册,我做了一个相册,但是实现了两个要求内容,既可以每页显示6张图
片,通过点击按钮可以进行切换,也可以点击图片查看大的图片。

点击向右
点击图片显示大图
界面展示
1.首页(由于比较大,这里只是显示中下部分)
2.个人简介
3.博客
4.相册
5.联系方式
6.练习二(实验)。

相关主题