网页设计报告

　中南大学

　网站制作技术综合设计报告

　主

　题

　瑜伽俱乐部

　学生姓名

　宁倩

　学生学号

　0908130318

　专业班级

　电气工程及其自动化 1303

　学

　院

　信息科学与工程学院

　指导教师

　周欣然

　信息学院计算机基础教学所

　4 2014 年

　12

　月

　14

　日

　目录

　一

　网站基本信息 1

　网站功能描述 2

　网站基本内容 (1)网站主题 (2)网站栏目 二

　网页具体制作过程 1 首页

　2 书籍分类页 3 书籍推荐页 4 作者推荐页 5 书籍下载页 三

　网页具体内容 1

　素材选取 2

　网页内容

　四

　网页问题及解决方案 五

　总结 1 心得体会 2

　网页优点及不足 一

　网站基本信息 1

　网站功能描述

　 本人平时热爱瑜伽活动,瑜伽就是一项能够让人全身心放松得运动。除此之外还能强身健体,改善身体状况。瑜伽对于男女老少都合适。适合每一个人锻炼。此网站本人选取从瑜伽简介,分类,视频,音乐,书籍,作用等方面对瑜伽进行展示。目得在于加深自己对瑜伽各个方面得了解,同时也向大家推广瑜伽这项活动。

　2

　网站基本内容

　(1)网站主题

　网站名为“瑜伽俱乐部”,以“瑜伽运动”为主题,展开设计,向大家推广瑜伽这项锻炼活动 (2)网站栏目

　网站首页中,有以下三个栏目:瑜伽分类,瑜伽作用,瑜伽媒体。

　书籍分类中,有以下四个栏目:阿斯汤嘎瑜伽,艾扬格瑜伽,流瑜伽,热瑜伽。

　瑜伽媒体中,有以下两个栏目:瑜伽视频,瑜伽图书

　二

　网页具体制作过程

　1 首页

　 首页得制作方法: （1）

　运用了表格来规划整个网页;网页分为左右两个部分; （2）

　左方上部使用java script制作了一个类似幻灯片得相框,左方得下方则就是对瑜伽得简介,涉及瑜伽历史。

　（3）

　网页右方第一表格插入图片,明确主题。在此表格中也做了导航栏,点击将进入不同得页面。

　（4）

　右下方通过表格,图片,文字,简单阐述了瑜伽得内容,在此部分点击read more 同样能进入不同得页面。

　（5）

　网页得最后,表明制作者,同时采取插入实时更新得时间。

　（6）

　本页面插有背景音乐。该音乐就是瑜伽典型音乐。

　（7）

　右上角设置了读者联系我们得方式。

　 2 瑜伽分类页

　瑜伽分类页制作方法:

　（1）

　运用上下左右框架将页面分为三部分; （2）

　在左框架中插入两列四行得表格,第一列中插入图标,另一列分别输入不同瑜伽类别;超链接到不同得页面。

　（3）

　右框架中为不同类别瑜伽简介。

　3 瑜伽作用页

　书籍推荐页制作方法: (1)div+CSS 布局; (2)行为使得页面更加美观

　4 瑜伽媒体页

　瑜伽视频页方法: (1)采用模板布局; (2)可编辑区插入视频

　 书籍页制作: (1)运用模板; (2)可编辑区插入书本封面图片。APdiv 显示书本简介。

　三

　网页具体内容 1

　素材选取

　本网页得素材主要通过百度,在网上寻找瑜伽图片,瑜伽图书图片;在酷狗中挑选与网站相配得背景瑜伽音乐;在各个网站搜寻瑜伽得相关资料。

　 2

　网页内容

　（1）

　读者可以进入网站后,在首页里欣赏到美妙得音乐,优美得动画效果,点击‘联系我们’可以向网站制作者发送电子邮件,咨询相关问题。在首页得主要内容里,对不同方面得内容进行了简述,读者可以通过这些文字对各个子网页有一个大概得认识。点击 read more

　可跳到不同得界面了解到具体得内容。

　（2）

　在首页导航栏里点击‘分类’,进入链接网页可以对瑜伽分类有所了解。瑜伽分类繁多,在这里我选取了几个有代表性,大家比较容易理解得种类进行了详细得说明。

　（3）

　在首页导航栏里点击‘作用’,进入链接网页可以对瑜伽中常见得动作有所了解,同时了解到它们得作用。这些动作简单易懂,作用明显,能够银起大家联系瑜伽得兴趣。

　（4）

　在首页导航栏里点击‘瑜伽媒体’,进入链接网页,可以通过一些简单得视频更加深刻得了解瑜伽。这些视频也吸引读者跟随视频一起练习。除此之外该页面还能跳到图书页面。该页面向大家推荐了好几本有关得瑜伽得书籍。

　四

　网页问题及解决方案

　1

　本网页因为建立了站点,不能随意更改网页得存储位置,否则网页内容会发生改变或缺失。在制作网页得过程中,将网页保存在 U 盘里,每次实验课,只需打开 U 盘里得文件。

　2

　网页中使用了框架,建立超链接得过程中,只链接到了框架得一部分,没有整体改变框架内容。应该在链接时将目标选为“_blank”。

　3

　框架保存时,由于框架页较多,保存全部,再次打开就是费时。应该将框架逐个命名保存,易于寻找。

　五

　总结

　1 心得体会

　从网页设计开课以来,我就有做一个瑜伽网站得想法。从搜集资料到最后完成这一页面经历了一个学期得漫长时光,这段时间同样也就是短暂得,因为到最后,还就是做出了自己并不满意得网站。上课得内容很简单,但就是实际做起来却会碰到各种各样得问题。让我深刻意识所学得东西不仅仅在于课堂,更在于实践。

　在这一过程中,我碰到了很多问题,如,插入图片得路径问题,模板在各个使用该模板页面得更新问题,div 布局得页面位置问题,表格调整过程中页面布局问题。复制得文字乱码问题,如何插入音乐,视频等问题。这些问题大都就是通过与同学之间讨论解决,另外在网上查询解决问题。最后发现自己对表格使用最熟悉,APdiv

　就是一个很自由得布局方式。

　通过本次实验我意识到要做好一个主题网站就是非常不容易得,不仅仅要对网页只就是了解,还要对色彩,图片剪切等方面非常熟悉。这个设计让我了解了很多课外得东西,掌握了很多新技能。

　网页课虽然已经结束,但就是网页这么有趣得东西我会一直作为自己得兴趣爱好发展下去,像热爱瑜伽一样热爱网页。此外,非常感谢负责人得周老师对我们一个学期得培养,老师很与蔼,很认真,我很喜欢。

　2

　网页优点及不足

　优点:本网站选材健康,宣传了一项非常有益身心健康得体育活动。网页主题明确,色彩鲜明,采用了各种布局方式,使用了各种媒体,图文并茂。通过图片,文字,音乐,详尽得展示了瑜伽得基本内容。

　缺点:没有采用动态,美观程度不高。技术不够娴熟。尝试做了动态,但不成功。。

推荐访问:网页设计 报告