HTML大作业.docx

HTML大作业.docx

《HTML大作业.docx》由会员分享，可在线阅读，更多相关《HTML大作业.docx（16页珍藏版）》请在冰豆网上搜索。

HTML大作业

一、主题ﻩ2

二、网站设计思路ﻩ2

三、网站功能介绍2

四、制作过程3

首页ﻩ3

个人资料ﻩ５

相册ﻩ7

音乐ﻩ8

好友留言9

五、页面展示ﻩ10

六、总结分析ﻩ12

附录ﻩ1３

一、主题

我的ＱQ空间

二、网站设计思路

之前一直没想好做什么样的网页,后来在逛ＱQ空间的时候觉得做个空间的网页也不错。

因此就准备着做了、首先我想到的是QQ空间里的页面框架都差不多,那么我该如何让我的QQ空间的也有相似的框架呢、我想到用CＳS＋DＩV,DIV+CSＳ能够使HTＭL代码更整齐,它的可控性比布局表格强、我初步计划设五个页面,分不为“首页"、“个人资料”、“相册"、“音乐”、“好友留言”。

在首页插一些图片与文字,个人资料里加了一个MV、

三、网站功能介绍

首页页面的功能有“首页"、　“个人资料”、“相册”、“音乐”、“好友留言"（这些都在最上面,靠左,分不链接到“首页”、　“个人资料”、“相册”、“音乐”、“好友留言”页面）;好友动态（好友动态在中间）;我的资料与图像（在左上角）;最近访客（在资料与图像下面）;好友留言（在访客下面,链接到“好友留言"）;还插入了背景音乐“林俊杰—她讲”,设置为不重复播放;网页最下是制作人姓名、制作人邮箱、学号与联系电话。

个人资料页面的功能最上面与最下面都与首页相同;中间上面是我的个人资料,下面插入梁静茹的“爱久见人心”的MＶ,设置为不重复播放;左边是我的图像;图像下面是“图片”、“日志”、“讲讲”、“浏览量”。

相册页面的功能最上面与最下面都与首页相同;中间插了九张图片,背景音乐为曲婉婷的“我的歌声里＂,不重复播放。

音乐页面的功能最上面与最下面都与首页相同;中间上面有一张林俊杰的图片;下面是两首歌,分不为林俊杰的“她讲"与曲婉婷的“我的歌声里”,两首歌有开始与暂停键;左边是我的图像;图像下面是“图片”、“日志"、“讲讲”、“浏览量"。

好友留言页面的功能最上面与最下面都与首页相同;中间是好友留言;左边是我的图像;图像下面是“图片”、“日志"、“讲讲”、“浏览量";在左下有好友留言;背景音乐为曲婉婷的“我的歌声里",不重复播放。

四、制作过程

首页

首先设置整个页面的背景与页面高宽度,背景水平重复,再利用菜单将整个页面分为五个部分,分不为导航、个人资料、最近访客、空间动态、还有个人制作声明、用无序列表设置导航,同时链接到其她页面、依照不同要求设置字体颜色,插入图片,加上链接、插入音频,同时把长宽度都设置为10,使人不易察觉,如此进入页面就有音乐响起。

用ＣSＳ设置排版,去掉链接的下划线,以及背景图片的设置重复背景,边框为１像素,还有波浪线的颜色为＃３34４55,假如设置的字体本机没有,那么默认的字体则为"方正喵呜体",背景颜色为白色,同时设置了各个区的外边距的复合属性。

代码如下图所示:

用DIV设置顶部,无序列表设置导航“首页”、“个人资料”、“相册”、“音乐"、“好友留言”、

在页面中插入歌曲,代码如下图所示:

空间制作人声明代码如下图:

在后面附录里有。

个人资料

这个页面的布局跟首页差不多。

在这个页面中添加表格,在表格中填写个人资料,代码如下图:

在页面左边设置我的图像。

图像下面是“图片”、“日志＂、“讲讲"、“浏览量”。

代码与显示图分不如下:

在中间插入一段梁静茹演唱的“爱久见人心”的ＭV,代码与显示图分不如下:

相册

布局跟首页一样,在这页面中,也是添加表格,在表格中插入图片,代码与显示图分不如下:

同样插入背景音乐,背景音乐为曲婉婷的“我的歌声里”、同样有制作人声明。

音乐

页面布局同首页,左边跟个人资料的左边一样,在中间添加一张林俊杰的图片,图片下面为两首歌曲。

歌曲的代码如下图:

页面效果如下图:

好友留言

布局同首页,其余的在前面页面中都能够找到原型,只是把中间换成了好友留言。

代码如下图:

五、页面展示

首页

个人资料

相册

音乐

好友留言

六、总结分析

大一下学期我们学习网页制作时做过一次网页,那次是用Dreaｍｗeaｖer做的,我记得当时花了快一个星期。

本以为这次可不能花那么长时间,没想到也花了一个星期、主要是这次使用代码做的,跟Ｄrｅａｍｗｅavｅｒ有所不同。

而我这次做的网页是用ＣSＳ+ＤIV来排版布局的,它的优点在于能够使HＴＭＬ代码更整齐,跟容易让人理解,而且在浏览时的速度也比传统的布局方式快,最重要的是它的可控性要比布局表格强得、

事实上,在做网页的时候,有特不多都可不能,比如讲:

插入视频等。

当我可不能做的时候,我就会问下同学或者上XX去搜索、虽讲有的问题在XX上也找不到答案,这时我就去翻书,因为书上会特不详细的讲解。

做这次网页我最大的收获就是不管遇到什么困难,只要您不放弃,总会找到您想要的答案。

附录

<ｈｔｍl＞

<ｔiｔlｅ＞无标题文档＜/titｌｅ〉

〈styletype=＂ｔexｔ/cｓs">

a｛

text－deｃｏrａｔion:

ｎonｅ

}

#contｅｎt｛

ｂｏrｄｅr:

１pｘｄashｅｄ＃3３4455

｝

#tｏｐ｛

hｅigｈｔ:

９00ｐx;ｗiｄtｈ:

１４40ｐｘ;ｂackgrouｎd—image:

urｌ（iｍｇ／1、jpg）;ｍａｒgin:

0px　0px

}

、ｍenu｛

wiｄth:

１440ｐx;heigｈt:

４0pｘ;reｐeａt-x;maｒｇｉn:

０pxaｕtｏ　0pｘ1００pｘ

｝

、meｎuuｌ｛　

ｗidth:

１440ｐx;loaｔ:

left;diｓｐlａy:

inlｉne;

｝

、meｎuｕlli｛

width:

70px;floａt:

ｌeｆt;dｉsplay:

ｉnｌｉne;mａｒｇin:

０px１0ｐx

｝

、mｅnuul　lｉa｛

ｗｉdtｈ:

９0ｐx;ｆloａt:

lｅft;hｅight:

40px;flｏat:

lefｔ;fonｔ—size:

２０ｐx;ｆont-familｙ:

”方正喵呜体";

text—decoｒaｔｉon:

nonｅ;texｔ－aｌｉgn:

ｃeｎtｅr;　liｎe-hｅｉｇhｔ:

5０pｘ;　cｏｌｏｒ:

#FFFFFF;maｒｇiｎ:

0px　０px　0px0px

｝

、ｍｅnｕuｌlｉa:

hovｅｒ{

baｃkｇrｏｕnd-ｃｏloｒ:

＃003３ＦＦ;ｂacｋgｒｏｕnd－poｓitｉon:

　ceｎｔer

}

#ｌeｆt｛

ｈeｉght:

75０pｘ;　wiｄtｈ:

１５0px;bａｃkｇroｕnd-color:

#FＦFFＦF;　float:

ｌeft;marｇｉn:

2０pｘａuto　ａutｏ140px

｝

＃ｒｉｇht｛

ｈeｉgｈt:

7５0px;　ｗｉdth:

８00pｘ;backｇｒounｄ—coloｒ:

　#ＦＦＦFFF;ｆｌoａt:

lｅｆｔ;maｒgｉn:

20pｘａｕtoａuto10ｐx;

｝

#ｆoｏt｛

heｉｇht:

６0px;widｔh:

960px;bacｋｇｒouｎd—coｌor:

＃FFFＦＦF;floａt:

left;mａｒｇin:

10pｘautｏauｔo140ｐｘ

｝

STYLE１　｛

ｆｏｎｔ-family:

　”新宋体”

｝

＜/stylｅ>

<／head〉

〈body〉

〈dｉvｉｄ=＂toｐ">

〈dｉvcｌaｓs＝"ｍeｎｕ”>

　　　<ｌi＞＜aｈreｆ=”zｉｌｉaｏ、hｔml"＞个人资料<／ａ>

　相册<／a>＜／li〉

　　　　<ｌi〉＜a　ｈref="yiｎyue、htｍｌ”>音乐

　＜lｉ〉好友留言〈/a〉＜／li＞

〈／uｌ〉

〈/ｄｉv>

〈ｐ〉

个人资料<ｉmg　　sｒc＝”ｉmg/23、gif＂stｙle＝"ｍarｇin:

3pｘauｔoaｕto２5px”>

＜/p〉

〈p　align=”cｅntｅr"＞刘小染

＜ｐ>

　＆nbsp;＆nbsp; &nbsｐ;〈ahref=”#"＞〈a　ｈrｅf="liuyａn、html”>留言<／a〉＆nｂsｐ;＆ｎbsｐ;＆nｂsp;

＜ａｈref＝"＃"ｓtｌｅ＝＂ｂaｃkgrounｄ—coｌor:

#CＣCCCC”＞加好友〈／a〉

<／ｐ〉

〈ｄｉvｉd="cｏntent”＞〈/div>

〈p>最近访客〈/p>

〈p＞＜imｇsｒc＝”img／３、giｆ”/heigｈt="５０”　wiｄtｈ=”5０”　ｓtyle=”mａrｇin:

0pｘａutoａutｏ　15pｘ"〉

0pxauto　auto10px＂＞

　　　<ｉｍg　ｓｒc=”img/5、jpg”／ｈeiｇhｔ=”50"wiｄth=”50"stｙｌe=”maｒgin:

0px　auｔoauｔｏ　１0ｐx"＞

　　〈ｉmg　ｓｒc="iｍｇ/6、ｊｐg"/　　heighｔ=”5０”　wiｄth="50”　ｓtyle=＂maｒgｉｎ:

0pｘaｕtｏaｕto　1０pｘ”＞

〈/p>

〈p>

0pxautｏ　auto　1５px＂〉

　〈iｍgsrc=”img/8、jpg"/heｉｇht="5０"ｗiｄｔh＝＂50"stｙle=”margiｎ:

0pｘ　auto　ａuｔo１０ｐｘ”＞

＜／ｐ>

〈p〉

0ｐx　ａｕtoaｕtｏ　１5px"＞＆nbsp; 换一批

〈/diｖ>

〈p>好友留言:

〈／p〉

〈／p>

0pｘaｕｔo　auｔo　20ｐx”/＞

<／p>

〈p〉

<ｆｏnt　sｉze=”－３＂>〈aｈreｆ="#＂〉镌刻时光〈／a＞〈/ｆｏnt＞

〈/p〉

＜p>

孤独时,有您的陪伴才不觉得凄凉;憔悴时,有您的安慰才不觉得忧伤;痛苦时,有您的呵护才不觉得迷茫;快乐时,有您的分享才会觉得幸福荡漾!

＜／ｐ〉

＜/marｑuｅｅ＞

<／div〉

＜divid=＂righｔ"〉

＜ｐ〉〈/p＞

10pxauto　aｕto　10px"〉空间动态〈/fｏｎt〉

〈bloｃｋquｏte〉

＜p〉〈／p>

〈/p>

〈p>

　〈ｉｍｇsｒc＝＂iｍg／10、jpg”sｔｙle=＂mａｒgｉn:

autｏaｕtoａuｔo65０px”　／〉

　<ａhrｅｆ=”＃＂〉镌刻时光