《网页设计报告》由会员分享，可在线阅读，更多相关《网页设计报告（9页珍藏版）》请在金锄头文库上搜索。
1、中南大学网站制作技术综合设计报告主题瑜伽俱乐部学生姓名宁倩学生学号08专业班级电气工程及其自动化1303学院信息科学与工程学院指导教师周欣然信息学院计算机基础教学所2014年 12 月 14 日目录一 网站基本信息1 网站功能描述2 网站基本内容（1）网站主题（2）网站栏目二 网页具体制作过程1 首页2 书籍分类页3 书籍推荐页4 作者推荐页5 书籍下载页三 网页具体内容1 素材选取2 网页内容四 网页问题及解决方案五 总结1 心得体会2 网页优点及不足网站基本信息1 网站功能描述本人平时热爱瑜伽活动，瑜伽是一项能够让人全身心放松的运动。除此之 外还能强身健体，改善身体状况。瑜伽对于男女老少都
2、合适。适合每一个人锻炼。 此网站本人选取从瑜伽简介，分类，视频，音乐，书籍，作用等方面对瑜伽进行 展示。目的在于加深自己对瑜伽各个方面的了解，同时也向大家推广瑜伽这项活 动。2 网站基本内容(1) 网站主题网站名为“瑜伽俱乐部”，以“瑜伽运动”为主题，展开设计，向大家推广 瑜伽这项锻炼活动(2) 网站栏目 网站首页中，有以下三个栏目：瑜伽分类，瑜伽作用，瑜伽媒体。 书籍分类中，有以下四个栏目：阿斯汤嘎瑜伽，艾扬格瑜伽，流瑜伽，热瑜伽。 瑜伽媒体中，有以下两个栏目：瑜伽视频，瑜伽图书二 网页具体制作过程1首页首页的制作方法：(1) 运用了表格来规划整个网页；网页分为左右两个部分；(2) 左方上部
3、使用java script制作了一个类似幻灯片的相框，左方的下 方则是对瑜伽的简介，涉及瑜伽历史。(3) 网页右方第一表格插入图片，明确主题。在此表格中也做了导航栏， 点击将进入不同的页面。(4) 右下方通过表格，图片，文字，简单阐述了瑜伽的内容，在此部分点 击read more同样能进入不同的页面。(5) 网页的最后，表明制作者，同时采取插入实时更新的时间。(6) 本页面插有背景音乐。该音乐是瑜伽典型音乐。(7) 右上角设置了读者联系我们的方式。mmYOGA CLUBUS ft ill步N总由1千年苗甕轻旖懸已摆制生出凰英的h鶴疋用青吿町耳干車毎的核改=.主他i?理.常肆锄利 万百曲既力心灵
4、与和神*伍举丘.一的汇沙耳斗， 古卩匱丿風相叵 口|.与专言一.也,1好丘茁踰如阳即右注M -. 日索生牯丙車苻罕钦-追聲.忘脚曲东.绘走的+旨钠1的 竟仕、无就拟 戛1?和干静自寒和&H氢古印宜 也 是右级呼说酋早用出忡的一无 扛异;住一!（T ?!匹兰 万法职出A.序杵曲阳刖是工9S-務刖的修目啡己斤岂 削怡 瓯自的#竝法誉丢馬啊悴隹累）、啊息划慫注.阁心的兀2注 T .U I I 4 L XL X坯馆ifti电调息话和平雨骨谀RTRfife睥俺腐自站自航 SSEZWMFK& 育呑 規牝希5的临fii関見王累昱一呢列的詔厲祁心方注 旦艳 调身旳*血袪血菊食闻歯iz皇.1勺理5的幷耶出誓譏匡
5、腦 尊.蛀至势漏L科恫看 B1L: 30H-12-1T ZP9ET陡暑侖如的蛊冇.有聽牌啊戦阵相逊出务KZ.hD:CZ摊习爱有羽性-剜1JB尊田问刚脱!卑-几因乩 嫁就尝丽闯遍以商年籾宙6力純:*氣 R汁月& SHBttnnfft幵细理主在做昏刑Rfth呵时一罡睡在紀用的辿g黑執如归甘身锹干万开團用力推血适址.如杲担出自己按限谆BUti柞祜县昨的毎习.果在爭可的iii程中出础力不支！龍稀1赂，请印刘收珈1乩FfffiBtSe-EUUEffi正醱啲印匿“古Ma*-目桔曽花（！ ikESlB.叵制I.喑2瑜伽分类页瑜伽分类页制作方法：（1）运用上下左右框架将页面分为三部分；（2）在左框架中插入两列
6、四行的表格，第一列中插入图标，另一列分别输入不 同瑜伽类别；超链接到不同的页面。（3）右框架中为不同类别瑜伽简介。曜琥!M球in埔伽分秃、瞟盟衆:臨勘用臨tr爲:护鑑;y餾即気嚨s勰臨欝 干修亢砂是迪匡杠甘世思加工卑:工丽则业蛀耳我111麹帕轻述讦啤茁鏈展魄，已瀏i性出浪奏踊别4左樹印宜“古虫tirtr邑括眷廉检宝袖荷療晞阐、tW6W-王馬啊、艮迭利砂ii（l#議.泵.3瑜伽作用页书籍推荐页制作方法1）div+CSS 布局； 2）行为使得页面更加美观rYOGA作用A:皿嫌伸展泊踝、肩睫腋至和三生SL以二卜：_=； T- . _ /： . :t.;rr mI rr ih ?|J *yt i.:-
7、jt 申w. .r: *.:亠节 討眄.i ”.i .7：l 1? -r : 4 ：l：71：壬；：=；、余 A .：. 4- .：|：|.F逞柔地按岸膛部.惺说下半辆血液摘,：;：卩7- ；4 b I 叫-閒.-：,4 瑜伽媒体页瑜伽视频页方法：MtezJwLm” m是註身心曲呂动，垃些唱何年龄扎土姑離苣动的则中怵跡fl的好确乐甥，悴习前应汪零e.T車眄TBtiS&f 7:-.-1）采用模板布局； 2）可编辑区插入视频书籍页制作：（1）运用模板；（2）可编辑区插入书本封面图片。APdiv显示书本简介。是舌因即!t.树圈、 丸EK珂产古T&B?用 ifiUnnmiTTiaai 结全來讒运当D州
8、心 返壷|利？喘韭有尅 加*部禅生卒垢初内t井範 匸垢.占書舟巴和血:福 JF.臣逸條I*出VS. 免段也从而达列逵启.益也a蛊？ I罚5舌弟囲汕如艾懾 话嗡iitt黑虽吉曙 7Wf斜耳 丈帝.B.HS-vi+flfif 枚辱btH- 対走册n-卑射 的I副碣.刁悴劭:CS电剂郵礙僧塩帕 特眾悝）ffmoE*ii-fl. 充益曲一畤至er 15 梢千年冋印上曽入眄胃” 于一弟 Sm+Mtlii?2 了范I,的営理祀旳片志 玄过耶主.啊.苗恃曲淨Ph让谓&再墾忙、 忸理旳I理二生话甲，股删 l .aCbr ulaA J_ 1 A X;书中可工計城慣茁目一斗懈解2悖 一书对皆育 RSTtfUiii
9、iJiNTtjffiiTfi L 再且itWW- i-3 irtenFWl?.段 陶解.：.w腹別姑二味三 网页具体内容1 素材选取本网页的素材主要通过百度，在网上寻找瑜伽图片，瑜伽图书图片；在酷狗 中挑选与网站相配的背景瑜伽音乐；在各个网站搜寻瑜伽的相关资料。2 网页内容（1） 读者可以进入网站后，在首页里欣赏到美妙的音乐，优美的动画效 果，点击联系我们可以向网站制作者发送电子邮件，咨询相 关问题。在首页的主要内容里，对不同方面的内容进行了简述， 读者可以通过这些文字对各个子网页有一个大概的认识。点击 read more 可跳到不同的界面了解到具体的内容。（2） 在首页导航栏里点击分类，进入
10、链接网页可以对瑜伽分类有所了 解。瑜伽分类繁多，在这里我选取了几个有代表性，大家比较容 易理解的种类进行了详细的说明。（3）在首页导航栏里点击作用，进入链接网页可以对瑜伽中常见的动 作有所了解，同时了解到它们的作用。这些动作简单易懂，作用 明显，能够银起大家联系瑜伽的兴趣。（4）在首页导航栏里点击瑜伽媒体，进入链接网页，可以通过一些简 单的视频更加深刻的了解瑜伽。这些视频也吸引读者跟随视频一 起练习。除此之外该页面还能跳到图书页面。该页面向大家推荐 了好几本有关的瑜伽的书籍。四 网页问题及解决方案1 本网页因为建立了站点，不能随意更改网页的存储位置，否则网页内 容会发生改变或缺失。在制作网页的
11、过程中，将网页保存在U盘里，每次实验 课，只需打开U盘里的文件。2 网页中使用了框架，建立超链接的过程中，只链接到了框架的一部分，没有整体改变框架内容。应该在链接时将目标选为“ _blank”3 框架保存时，由于框架页较多，保存全部，再次打开是费时。应该将 框架逐个命名保存，易于寻找。五 总结1心得体会从网页设计开课以来，我就有做一个瑜伽网站的想法。从搜集资料到最后 完成这一页面经历了一个学期的漫长时光，这段时间同样也是短暂的，因为到最 后，还是做出了自己并不满意的网站。上课的内容很简单，但是实际做起来却会 碰到各种各样的问题。让我深刻意识所学的东西不仅仅在于课堂，更在于实践。在这一过程中，我
12、碰到了很多问题，如，插入图片的路径问题，模板在各个 使用该模板页面的更新问题，div布局的页面位置问题，表格调整过程中页面布 局问题。复制的文字乱码问题，如何插入音乐，视频等问题。这些问题大都是通 过与同学之间讨论解决，另外在网上查询解决问题。最后发现自己对表格使用最 熟悉，APdiv是一个很自由的布局方式。通过本次实验我意识到要做好一个主题网站是非常不容易的，不仅仅要对网 页只是了解，还要对色彩，图片剪切等方面非常熟悉。这个设计让我了解了很多 课外的东西，掌握了很多新技能。网页课虽然已经结束，但是网页这么有趣的东西我会一直作为自己的兴趣爱 好发展下去，像热爱瑜伽一样热爱网页。此外，非常感谢负责人的周老师对我们 一个学期的培养，老师很和蔼，很认真，我很喜欢。2 网页优点及不足优点：本网站选材健康，宣传了一项非常有益身心健康的体育活动。网 页主题明确，色彩鲜明，采用了各种布局方式，使用了各种媒体，图文并 茂。通过图片，文字，音乐，详尽的展示了瑜伽的基本内容。缺点：没有采用动态，美观程度不高。技术不够娴熟。尝试做了动态，但不 成功。
