HTML课程实训报告

1、学号201110165109武汉科技大学城市学院课程设计报告课程名称网页设计课程设计题目音乐网站设计学部信息工程学部专业信息管理与信息系统班级1 班姓名周密指导教师周凤丽2013 年 6 月 22 日编 P035设计题目：音乐网站设计设计主要内容：一、开发平台：DREAMWEAVER+FIREWORKS+FLASH二、设计要求：1、设计内容设计一个关于音乐欣赏和音乐下载的网站，网站浏览者可以通过不同的音乐分类查找并欣赏自己喜好的音乐，同时可以了解最新最流行的歌曲排名。2、网站主要功能模块(1)国语歌手：可提供部分歌曲的下载，下同。(2)日韩歌曲：(3)欧美歌曲：(4)影视歌曲：(5)热辣舞曲：

2、(6)古典音乐：三、站点结构导航图四、站点上交注意事项及考核标准：(7)设计作品须严格按照网页设计与制作课程考试要求按时独立完成，严禁无故拖延上交时间，杜绝请人代做或剽窃他人作品行为。2站点文件夹名称必须采用学号+姓名形式(如200610130226zhangjing),网页中须特别注明版权及作者的有效联系方式等相关资料，必要时可创建站点浏览说明文档。3网站的评价标准及分值分布为：主题和内容(30分)，导航、结构和链接(20分)，艺术性(30分),创造性(20分)。4学生的最终成绩由网站和平时成绩两部分组成，其中网站成绩70%,平时成绩30%。1 网页设计相关技术介绍 11.1 HTML11.

3、2 CSS11.3 JavaScript12 爱狗家园网站设计规划 1网站介绍 2栏目设计 2站点分析及站点地图 21站点分析 21站点地图 3主页面布局 33 个人体会和感受 74 参考文献和网址 85 附图 91 网页设计相关技术介绍1.1HTML超文本标记语言，即 HTML(HypertextMarkupLanguage),是用于描述网页文档的一种标记语言。超级文本标记语言(英文缩写：HTML 是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件， 通过在文本文件中添加标记符， 可以告诉浏览器如何显示其中的内容(

4、如：文字如何处理，画面如何安排，图片如何显示等)。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。CSSCSS 是英语 CascadingStyleSheets(层叠样式表单)的缩写，它是一种用来表现 HTM 或XML 等文件样式的计算机语言，通常又称为“风格样式表(StyleSheet)”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成

5、红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制 HTML 中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。JavaScriptJavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端 WebFF 发的脚本语言，常用来给 HTMLH 页添加动态功能，比如响应用户的各种操作。它最初由网景公司(Netscape)的 BrendanEich 设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript 是 Sun 公司的注册商标。Ec

6、ma 国际以 JavaScript 为基础制定了 ECMAScript 标准。JavaScript 也可以用于其他场合，如服务器端编程。完整的 JavaScript 实现包含三个部分：ECMAScript,文档对象模型，字节顺序记号。2 音乐网站设计规划网站介绍音乐网站是一类休闲放松的网站，随着社会的发展，人们生活工作压力日益增大，音乐可以放松你的心情，让你体验不一样的舒适感。音乐网站提供在线试听，音乐共享,音乐收藏，音乐交流等功能。音乐网站的歌曲分类有：华语男歌手、华语女歌手、华语组合、欧美男歌手、欧美女歌手、欧美组合、日韩歌曲等。有的音乐网站还会提供心情分类，可以依据你的心情为你推荐合适的

7、歌曲。栏目设计首页：网站首页，分布各种音乐的总览情况，如歌曲分类、推荐 MV?。榜单：提供各种分类下的音乐排名情况。歌手：全世界歌手大全，帮助你快速找到自己喜欢的歌手。分类：各种分类，适合不同的人在不同的时候收听，包括欧美歌曲，日韩歌曲，影视歌曲等。站点分析及站点地图站点分析1、网站的设计：DIV 和表格的完美结合，使得整个网站结构清晰明了。多个也页面的相互链接，更使得整个网站生动活泼，趣味盎然。2、网站的主题：永不会过时的音乐主题。3、网站的风格：网站使用绿色的背景，鲜艳亮眼，在炎炎夏日让人顿觉清爽，加上“随身听”的网站名称，让人更感舒缓放松。同时网站利用文字加图片的解析，让人更容易了结整个

8、网站的布局。合适的布局和各类动听的音乐，更观众的眼球和耳朵，让人更加爱上这个网站，不愿离去。4、功能分析：音乐网站带有在线听歌功能加下载功能，让音乐爱好者可以浏览各类歌曲并“随身携带”。同时还配有返回顶部功能，各个链接均在同一窗口打开，大大节约浏览者时间，同时也方便使用。站点地图indjtx.kill图2-1站点地图王页面布局1、主页的所有样式如下:ffrorltnlbanflia.sugerlUF.feilti.131Msn101MmETte:p.：r晚ido,.城Ido,.久,i业,.釉岬r.h岷h.:邨人出质ftilti.土咐hilti.拢M，VError.慎error.%irrar.施

9、困加j.现mi.喇i向1.理nW.腼谢“M剑触根4型iJ理rriIDSCiHtp,我iku：.erCakltp.时id温士气ind：x.断tin也理k叽,理W-de.唧皿次.N.jier.理li哪hWiiktr.Hfulii.iiftiLti.料fdlti.中rror.J.error.Werror.rilin.ktiltud.MilDJnqu.El卿,一jiifiU.CahUp.erttatlperCllhUp.erDshttp.ET的1炖er时汕乐郎:曲！.mi扁一如i而x.*iinM.由1磔坂毗.啊b叫k巾h毗./也就帆Ulftf.4*FXI TDYK1千千阑敞陈需姆1情活馀良1我青存王菲

10、田麟月邨英五月天2喻张友2嘉宾蝇儿2比明的故事黄丽华瑚射手华诺女球手华后阻台3既悟钺理3开门大吉同照传奇3元薛岁月元薛岁月球实犯4我只在乎你邓丽君口白螭子王既4宓痂小5酸理歌手5陵支歌手鼠是阻台5光辉岁月Beyond5百开这个地方许诺5场了心的友刘涛日朝奥歌手日韩灾毁手日韩阻台6耒生转刘德华6哥已犍上.，,至痼6畛借李宇春单身情歌琳志熄7鬟惜Fh*lwla柳7睇春天有一一前硼S让找我军周华健.S中国电敢月传奇S一定餐幸福杨某勺没有情人的-.孟.庭苇9GaaiAHTnU嬲嗨9流海雨未然周华侬10爱小虎队10兼朝豌各赵英俊10JSA林子油建号MV新或榜TOPIGC更多”盘整怫TOPJ00更多冷时手

11、樗T1碗更多，1吉寺再见水木年华1ft*#主罪1国BL传揖11小福生2aby.ig.卫 5W-K5W-KZ光阴的锹事黄峡期2生菲1黄咙明3看春幅 L L3时间煮雨郁W3将奕迅13汪醉4杷你的距离就蟀目千千周散/皿4旗戏常漠5遇苍酬也上.S刚我自车度殖掘5册蟀蚱李致6我知道脑.一陈堂6情片徐岛6邓丽君188叶口口17里星少女皿 1 17卷宣民族凤7徐盘1F陈g烟3不忙不爱就 t t 班,S哂别S林槌18郁可唾9天机阿也工,领悟早瞠建9壹学石19瞄J音乐分鬓更多经噢岩盂，：M箕后都完总工磴监西伤感劲118后国星的，博曲音J席励志1艇小清通西性T诟前苫密古恩中国随杆旧mia他占&衽曲懑惆累视

12、效前天朝阴第棋奇乐irtfr汨喏事情靠首型推茸玳手走名图2-5#main内容6、#main 中包括#mian1、#main2 和#main3 三部分,其中#main1 又包括#main1-top、#main1-middle、#main1-bottom 三部分，而且#main1-bottom 还包括#main1-bottom-1ft#main1-bottom-2 两部分。7、#bottom 是主页面的底部内容。息点互动 版机所育 网站建设 网站制作 瞄设计 丽设计 网站推广我的邮布工：Luzun93BlB抵匚!.滕系电话：！1354513151E学号！351110165100姓名E图2-5#bo

13、ttom内容3 个人体会和感受在开始学习网页设计这门课之前心里就无比期待，作为一名信工学部学生，再加上自己本身对电影致我们终将逝去的青春答SoYciund插曲热映大难原声电视剧 K 盛夏晚晴天一定要幸福插曲如果董老了插曲1盛夏的天空片尾曲电视剧或陆贞传奇珍惜片头曲V心情片尾曲:电视用天才碰麻展天才碰麻瓜主题曲忘不了的你片尾曲一个人冒险插曲曲致青春主题曲电视剧新恋爱时代I回味主题曲徘徊片插曲轻声地说【插曲电视同宝贝我要你快乐片头曲太难插曲计算机的热爱，对这门课有着浓厚的兴趣。在经过一学期的学习之后，才发现原来制作一个网页是如此的复杂，如此的需要耐心和时间。学习之后不仅比较全面的了结了网页制作也设

14、计基本原则，而且还可以自己动手做网页了，这对我来说是最值得高兴的事，因为可能会对我以后的工作有用。这次实训原本我的题目是动物园网站制作，后来因为在图书馆没找到相关书籍，所以换了一个音乐网站，做了之后才发现原来音乐网站的制作更麻烦。其实音乐网站的制作也没那么复杂，只是我是对着百度音乐做的，而且做的相对来说比较全面，所以花了大量时间和心血，其中的每个字都是自己一个个打上去的，网页里面的分界线也是自己在 photoshop 里面做好然后插图插进去的。因为字比较多，所以表格做的也很多，而且有些效果因为没学过 javascript,所以做不出来，我就在 flash 里面最好插进去的，花了很多时间，所以才

15、导致于我到这么晚才完成。通过这次实训，我明白了，做网站不仅仅是追求好，更要有选择在合适的时间内可以完成的网页制作，也明白了照搬照抄有时候并不是那么简单，或许，自己原创会更好。虽然实训完了就不用学网页设计了，但是出于兴趣，我会好好的自学它，争取能够做出很完美的网页。4 参考文献和网址参考书籍：1孙冬梅著DreamweaverCS5完全学习手册北京：电子工业出版社，2011.2DreamweaverCS3网站建设与网页制作案例指导北京：电子工业出版社，2009.参考网站：1Http:/ 模板之家5附图LniM,li-MIBUriM.FifiSI4，141WU-7iT-liBWuKSv13B.H4%

16、na_jua_T*BIXVB-r-WEhBT*114-44MFT*Ma-aFM-TT*-图5-1站点首页截图灵幡单歌手5Htt专通型.”kbEH扑I*”见* *“19上肝单1紫 g3 1Minv*:*4*tnHtm图.fltTEF二M*iS-H-4TvfiltKfWTOFSKn/计冷奥精明*3iM*a7：?电皿通,1ER4EN.!11苹fflWM*期#T4l.孑机自同也却力F梅卓行日社泡曲旭IliiflnIHItn.因MHflQftlVHtWtflnr量供，-HUMII+.!ii;12 .,i二山luWHirMt*J11IMaMJ；L*GltS幻Y*SM4tt.14：&lmT-fiAl

17、t15t日9JM*f田If犯Cbu-cf局iZIeWwis-*I,15mZM口中登AHVSUTWCTSLTNHT13gnu.il血 uIt鸵布看梅*li4f3*HE*T11*,3323研II3HMH_Tl-11*.图5-2榜单界面省更将单他手分奥专医薇激金疗事称用no褥 Emritti知町标等百K士鞘苔外僵4Kiw惧illEfrtWWKWfBF=1K芯国SWJUJtfS谡歌曲吗!4tEfiKS*n”好网七号31m-VKmu:uuairftWSSBB袁郡用HNMB；EJM琳加中皿网旭遇S餐品%dJ*d在LHitffi虹通腐Sft眼 fcfi*的轩*例单ii?fW旧n,包扁l|iilM|(irtZ

18、kr七叫iCHJMW$GMShtti116eLurtdiawwi5304HbnalefHaIIOa-iIG(EIOLM亡重嚼 m 可珞06TFiPutiil”白SEbllA贴石侑笈-2犯算情以吠卬Tw(HThBurialg附g“中1(T1ACtrp4nHr*3的HeMrSfrrGAOtF&MJtirio3tomd-Thefe-st0f1flfSowtiwi：6r-trwySpfl r*&的OntUorTIE*10SinceUBn6mKlH#CiarkMAfBreakvMvKZl11HrtcrTheTitt4chip1Jtchcwitoitprr-PKFLPresani“Futu

19、re-fkx*l)12RlwHiItWthAt尔MMAn.OfPxpJ13V#rth|0眼Mnj._-.,iiJa图5-5欧美歌曲界面图5-6日韩歌曲界面图5-6DJ舞曲界面古风共 1UC0 首歌01 商忌天下河图0Z 了结营点03 刀剑如梦黄贞04 关学治董贞05 干年曝心然区/梦仙林琶贞07 风起天阑时图08饕赣董责09 凤 J 乳劫海图莫失莫忘心然问剑董贞鹿沧海一声笑董贞如花河图为龙河图批上书董贞寒衣调董贞利气沧海型点岫剑跟董贞伸第三十八年夏至河图图5-7古风歌曲界面中国好声音第二期 3代善鳗的强系列婚也曾经的联系列 43)风起天阖爰旗寸雪经的歌系列知九音贞经贡江湖也雪经的歌系列 45J

20、也唱的你的歌 1:瞥经的歌系列 45/九音史经也风起天阑；首页榜单歌手分类专题音乐分类影视歌曲影视歆曲010203040506070B09W12131415共 1000 首 StAngelWhenIFaiInLoveHelloSeattleWw膜gyWeIJ加TogetherSIentA*ghtWhtAWonderfulWorld生生世世受铁山同牙纪晓支OT7聿男成美人聆我想大声告诉你此生不换我们的纪念错误的相遇&arahMicLachIdnCeJmeDionOwlCityVordaSfwpardBellyGiImanLou$Armstrong吴雨泰戢小John 取*筷子兄弟李玲玉雉凡青鸟飞鱼李崖登徐洁儿天使之城 1北京遇上西雅图？北京遇上西雁图 3北京冠上酉雅图北京遇上西推图北京官上西雅图仙剑奇侠传#箫上涛花如 3 之食检人老男孩（李庄稼史便居仙剑奇快传野k 放羊的星星；（原来献是你:；图5-8影视歌曲界面M吹雨成&时间值木上白马你年少掌心的梦话依然喳握着吗才；翻沛成易眼泪被&月发这条路上的