当前位置:文档之家› 网页设计与制作期末作业

网页设计与制作期末作业

《网页设计》课程期末考试作业网站名称:孤独的探戈丽水学院工学院2016.12诚信承诺我谨在此承诺:本人所完成的《网页设计基础》期末考试作品均系本人独立完成,没有抄袭行为,凡涉及其他作者的观点和材料,均作了注释,若有不实,后果由本人承担。

承诺人(签名):谢岭2016年12 月25 日《网页设计》课程期末考试作业成绩评定表孤独的探戈》设计说明书一、选题的分析(选题的意义,针对选定的课题,打算如何展开设计,想表达什么内容?)本次我选的网站主题是音乐,我平时就十分喜欢听音乐,我觉得音乐是一种年轻人表达自我的一种方式,通过音乐我们能表现自己的喜怒哀乐,表现出自己的生活态度。

音乐能够给我们力量,给我们安慰,给我们无限的希望。

我们心里总有那么一首歌,想唱给心爱的姑娘;总有那么一首歌,慰藉我们孤独的灵魂。

因此,我也想制作一个音乐网站,通过音乐的力量来给更多的人温暖和安慰。

针对这次选定的主体,我打算制作六个网页,分别为首页,歌手,专辑,排行榜,MV和自我简介六部分。

首先制作之前,我借鉴参考了主流音乐网站QQ t乐和网易云音乐的网页排版布局,取其精华,为我所用。

我初步确定了本次网页布局为简单的上下型,简洁明了方便用户浏览。

网页内容为图文并茂,以较少的文字加上多彩的图片吸引用户兴趣。

总而言之,这次网站设计的理念是极简主义,去除多余的文字,排版内容简单明了,贯穿一种单纯真诚的生活态度。

二、如何运用网络的优点进行更好的表达(网站的版面风格、版式、颜色、互动性、多媒体等。

为什么这样做?)首先,本次网站页面的版面布局借鉴了一些优秀的音乐网站的排版,版面以上下型为主,风格偏简洁舒适自然,因为过多的东西以及一些花俏的动画,会给人视觉疲劳,看来起来繁重累赘,不利于用户的浏览体验。

网页的颜色以白色,灰色为主,看起来低调却富有内涵,同时加入多彩的图片以至于整体不会太沉闷。

色彩协调,给人以自然舒适的感觉。

关于网站的交互性,我设置了六个页面的相互链接和用户登录链接,能够满足网站必要的互动。

网页的互动性通过链接点实现,大部分的网页都需要有很醒目的导航,实现各个页面的跳转。

所以在网站的顶部加了各个网页的链接便于用户寻找,方便用户使用。

整个网页制作过程中,采用了多媒体中的文本、图像、链接、表格等内容。

通过多媒体的综合运用,使网站变得生动有趣。

、网页的结构与分解(绘制网站页面结构、网站地图、链接点)四、网页所采用的技术所采用的技术:CSS, div布局,HTML使用的软件:Dreamweaver,Photoshop通过Dreamweave进行网页的布局和制作,通过Photoshop寸图片进行美化CSS文件:•big {height: auto;width: 960px;margin-right: auto;margin-left: auto;}•top {height: auto;width: 960px;margin-right: auto;margin-left: auto;}•left1 {background-color: #F36;float: left;height: 200px;width: 250px;list-style-type: none;text-align: center;}•left1 ul li {font-size: 16px;list-style-type: none;margin-top: 0px;margin-bottom: 0px;background-color: #F36;height: 35px;width: 80px;margin-right: 0px;margin-left: 0px; text-align: center;color: #FFF;font-weight: bold;}.content1 {background-image: url(../images/20.jpg); background-repeat: repeat-y; }.right1 {float: right;height: 200px;width: 710px;background-image: url(../images/1.jpg); background-color: #FFF;background-repeat: repeat-x;}.content {height: auto;width: 960px;clear: both;background-image: none; background-repeat: repeat-y;}.zhong {background-color: #9F6; height: auto;width: 360px;margin-left: 300px;}.content ul li {font-family: " 微软雅黑 ";font-size: 16px;float: left;height: 20px;width: 80px; list-style-type: none; margin-left: 85px; margin-top: 10px; }.foot {height: 100px;width: 960px;margin-top: 15px;text-align:center;}.foot ul li {text-align: center;height: 25px;width: 80px; list-style-type: none;float: left;margin-top: 5px; margin-bottom: 5px;margin-right: 40px;marg in-left: 50px;}首页代码:Cb3dy><dl V<diY al<div 匚1甘£2=”1号£卞1^>< ul t yp-- ' sqjLai e* >{ Ll^^ia ha. H8 —(T '■■ Bl S 3. JU1 / a / L i i< 11 Xs rn nt-' S" ft ttl </ ii> </l 1 > <1 i > <a hrnf =亠屮A鉴理言乐叮广4 X/11 > <1 i ><a href = ° #?ir?个惟电台"a> </Lz > ;1 iX-a hx&£*'«* > jk的!K 早</心</!£> C/uDf/cil-v?< div -1 as " r i ^h-t 1" >C/ div>:(liv 113时■ ■ CQfllt «Ej t 呻 ><ul ><11 ><a hi:巴f-4' in de 葛.htnl "、第页■></!CliXa href-* Lht>l*>Sthtef =B 2. hxnl'^S </aX/li><LiXa kca C= '3. ht*!4*>1S </*></li</LJ L><r>*4ibtip: </ps,^pXa 話护““北口口/久.TPT vid^h^^&SO' heiffht=J184w/XfaX/p><i kref=^ti Sr 013^3=^1111 1—fT2 f-tdiii丹sty le= * f om-wei gkx: bold; col DI : ^F30 . Tont-siae: 18pa.. j-JIti<21 c 口华<BT"J<3pa^ eLa55*J liiV5*> |</3f(an><a Inrrif-'ir"4nl 3^-f c A fT </a><syajL C1SES=' > |<i^ sp@rt><a D las 3= ' £-e c 3 ' >a S8:</ a><s£p jit i E!L as i— " 1 itie1*》| </ ip:ari><3 h«f-'«w<span cl s—J11 me " > || </ sp an><a hr ef=,'W u D Iss 2= ' E^f c 3M-?■ </ a>心口业c;lLgH-5sm'X3L h丄“ =*旷cL卷3-飞一E口騎〉吏鉛"且》<31L JLAJJ£ Jl" Jte•止"/ ><t ihl# uncHih-"心口** 肘口Fiir-r™-8' 0* 厂尼:1 jrp輕einw* Q" 厂矗]]p 工山巧弓“£・*£)「)■<th stflPfl--Ml*><p><e href-^^XLue s祁日*_jnt" wndth^-L S6" heieht-*L43" />(/■></u> <P><* hTBfiM”;'站闵记忆的古脚言聃YAth、<tji ?CQDfl=*GQl>><p^<a lKHi^"**Xin£ 三"=1込址備.'9+ jpg" w:LdiE" 1 haiffht=J,142J,S3珀ef>对卄盘找们娈施在一ja</a></p><Zth><th aeHpe-"™l*><p><a hr tf-* ■*■><!»<( h " j■■吗3 】0 -JLii-M 166* krijiii-* 1 *2* /X/a></p><p? 5 nrrT--?"》玦祈淘M的耳采WS > < /th><th eccpo^^cDl^XpXa hr9i=A,f w Xi*e ETWi聲皆s m 了卫严昭^0>="元矇heielrt="142'* />"a>€/pA QXa hre±=・*">却手岡意祎评-^/aX/nX/tk/</y ;</D±V><div oot J ><ul ><LiXi L XB C=-^>返冋面刚"八$、\、<! LiXa hrt-F1®%"〉■F穷:営2器<L1><a 冷T>養于科们<7*X/liAhEE('&' it'^" >AUX ft rnhref='K,B>用户^tS</i></li></LI L><p ^tyl「■ * cwt - ali ccTi+cr * ?G O/T iDch^ftcopy :电孑向軒】B1 € a 】卄鬥尸・亠氐M«E1" ilJ il^ </ A >J7</p> </div></bQC ?y>Ctr><xh s cop ?= !,□ h 1' ><^ > ■' s h.rflf=H? " Xing sr c!=叩“址如# 4 加巴" <p><< 的星夜黑£;/a”/p、</th><th SMpe^ool^XpXa hr«f^*f*Xi»i<p)<> ^e3WV</fl></pX>tb><th scope--BO 1 * ><p><3 href—mrc—i怦gj/阮」诞* jCpXa it rt- 睦貳猥的屯老汀a></p '"th)-th acopo^J,cjl' ;'<q><o iir ci^u3"/\inc 口rc~"T* jp「' <p><a hi«f=J f J,>W (T SI闾!Hi炸Vf»></p></tE></t acti>v/i dtlA" L * 犷widimr 6 犷wd-t-1^" I 66"wiilthr"16B"he i 書h* "142^Mighayh*i 亦■- " 14Z"ha 蚯ht・"14¥/></S X/D>/X/nX/z>五、网站设计日志设计制作过程中出现的疑难问题,以及如何解决方法?本次网站设计,还是出现了很多让我头疼的问题。

相关主题