网站制作技术综合设计报告
主 题 学生姓名 学生学号
瑜伽俱乐部
宁倩 0908130318
专业班级 电气工程及其自动化1303 学 院 指导教师
信息科学与工程学院
周欣然
信息学院计算机基础教学所
2014年 12 月 14 日
精选文库
目录
一 网站基本信息 1 网站功能描述 2 网站基本内容 （1）网站主题 （2）网站栏目
二 网页具体制作过程 1 首页 2 书籍分类页 3 书籍推荐页 4 作者推荐页 5 书籍下载页
三 网页具体内容 1 素材选取 2 网页内容
四 网页问题及解决方案 五 总结 1 心得体会 2 网页优点及不足
--
2
精选文库
一 网站基本信息
1 网站功能描述
本人平时热爱瑜伽活动，瑜伽是一项能够让人全身心放松的运动。除此之外还能强身健体，改善身体状况。瑜伽对于男女老少都合适。适合每一个人锻炼。此网站本人选取从瑜伽简介，分类，视频，音乐，书籍，作用等方面对瑜伽进行展示。目的在于加深自己对瑜伽各个方面的了解，同时也向大家推广瑜伽这项活动。
2 网站基本内容
（1）网站主题
网站名为“瑜伽俱乐部”，以“瑜伽运动”为主题，展开设计，向大家推广瑜伽这项锻炼活动
（2）网站栏目
网站首页中，有以下三个栏目：瑜伽分类，瑜伽作用，瑜伽媒体。
书籍分类中，有以下四个栏目：阿斯汤嘎瑜伽，艾扬格瑜伽，流瑜伽，热瑜伽。 瑜伽媒体中，有以下两个栏目：瑜伽视频，瑜伽图书
二 网页具体制作过程
1 首页
首页的制作方法：
（1） 运用了表格来规划整个网页；网页分为左右两个部分；
（2） 左方上部使用java script制作了一个类似幻灯片的相框，左方的下
方则是对瑜伽的简介，涉及瑜伽历史。
（3） 网页右方第一表格插入图片，明确主题。在此表格中也做了导航栏，
点击将进入不同的页面。
（4） 右下方通过表格，图片，文字，简单阐述了瑜伽的内容，在此部分点
击read more同样能进入不同的页面。
（5） 网页的最后，表明制作者，同时采取插入实时更新的时间。 （6） 本页面插有背景音乐。该音乐是瑜伽典型音乐。 （7） 右上角设置了读者联系我们的方式。
--
3
精选文库
2 瑜伽分类页
瑜伽分类页制作方法：
（1） 运用上下左右框架将页面分为三部分；
（2） 在左框架中插入两列四行的表格，第一列中插入图标，另一列分别输入不
同瑜伽类别；超链接到不同的页面。 （3） 右框架中为不同类别瑜伽简介。
3 瑜伽作用页
书籍推荐页制作方法：
--
4
精选文库
（1）div+CSS布局； （2）行为使得页面更加美观
4 瑜伽媒体页
瑜伽视频页方法：
（1）采用模板布局； （2）可编辑区插入视频
书籍页制作： （1）运用模板；
（2）可编辑区插入书本封面图片。APdiv显示书本简介。
-- 5
精选文库
三 网页具体内容
1 素材选取
本网页的素材主要通过百度，在网上寻找瑜伽图片，瑜伽图书图片；在酷狗中挑选与网站相配的背景瑜伽音乐；在各个网站搜寻瑜伽的相关资料。
2 网页内容
（1） 读者可以进入网站后，在首页里欣赏到美妙的音乐，优美的动画效
果，点击‘联系我们’可以向网站制作者发送电子邮件，咨询相关问题。在首页的主要内容里，对不同方面的内容进行了简述，读者可以通过这些文字对各个子网页有一个大概的认识。点击read more 可跳到不同的界面了解到具体的内容。
（2） 在首页导航栏里点击‘分类’，进入链接网页可以对瑜伽分类有所了
解。瑜伽分类繁多，在这里我选取了几个有代表性，大家比较容易理解的种类进行了详细的说明。
（3） 在首页导航栏里点击‘作用’，进入链接网页可以对瑜伽中常见的动
作有所了解，同时了解到它们的作用。这些动作简单易懂，作用明显，能够银起大家联系瑜伽的兴趣。
（4） 在首页导航栏里点击‘瑜伽媒体’，进入链接网页，可以通过一些简
单的视频更加深刻的了解瑜伽。这些视频也吸引读者跟随视频一起练习。除此之外该页面还能跳到图书页面。该页面向大家推荐了好几本有关的瑜伽的书籍。
--
6
精选文库
四 网页问题及解决方案
1 本网页因为建立了站点，不能随意更改网页的存储位置，否则网页内容会发生改变或缺失。在制作网页的过程中，将网页保存在U盘里，每次实验课，只需打开U盘里的文件。
2 网页中使用了框架，建立超链接的过程中，只链接到了框架的一部分，没有整体改变框架内容。应该在链接时将目标选为“_blank”。
3 框架保存时，由于框架页较多，保存全部，再次打开是费时。应该将框架逐个命名保存，易于寻找。
五 总结
1 心得体会
从网页设计开课以来，我就有做一个瑜伽网站的想法。从搜集资料到最后完成这一页面经历了一个学期的漫长时光，这段时间同样也是短暂的，因为到最后，还是做出了自己并不满意的网站。上课的内容很简单，但是实际做起来却会碰到各种各样的问题。让我深刻意识所学的东西不仅仅在于课堂，更在于实践。
在这一过程中，我碰到了很多问题，如，插入图片的路径问题，模板在各个使用该模板页面的更新问题，div布局的页面位置问题，表格调整过程中页面布局问题。复制的文字乱码问题，如何插入音乐，视频等问题。这些问题大都是通过与同学之间讨论解决，另外在网上查询解决问题。最后发现自己对表格使用最熟悉，APdiv是一个很自由的布局方式。
通过本次实验我意识到要做好一个主题网站是非常不容易的，不仅仅要对网页只是了解，还要对色彩，图片剪切等方面非常熟悉。这个设计让我了解了很多课外的东西，掌握了很多新技能。
网页课虽然已经结束，但是网页这么有趣的东西我会一直作为自己的兴趣爱好发展下去，像热爱瑜伽一样热爱网页。此外，非常感谢负责人的周老师对我们一个学期的培养，老师很和蔼，很认真，我很喜欢。
2 网页优点及不足
优点：本网站选材健康，宣传了一项非常有益身心健康的体育活动。网
--
7
精选文库
页主题明确，色彩鲜明，采用了各种布局方式，使用了各种媒体，图文并茂。通过图片，文字，音乐，详尽的展示了瑜伽的基本内容。
缺点：没有采用动态，美观程度不高。技术不够娴熟。尝试做了动态，但不成功。。
-- 8
因篇幅问题不能全部显示，请点此查看更多更全内容