《HTML大作业.docx》由会员分享，可在线阅读，更多相关《HTML大作业.docx（13页珍藏版）》请在三一办公上搜索。
1、HTML大作业目录 一、主题 . 2 二、网站设计思路 . 2 三、网站功能介绍 . 2 四、制作过程 . 3 首页 . 3 个人资料 . 5 相册 . 7 音乐 . 8 好友留言 . 9 五、页面展示 . 10 六、总结分析 . 12 附录 . 13 1 一、主题 我的QQ空间 二、网站设计思路 之前一直没想好做什么样的网页，后来在逛QQ空间的时候觉得做个空间的网页也不错。所以就准备着做了。首先我想到的是QQ空间里的页面框架都差不多，那么我该怎样让我的QQ空间的也有相似的框架呢。我想到用CSS+DIV，DIV+CSS可以使HTML代码更整齐，它的可控性比布局表格强。我初步计划设五个页面，分别
2、为“首页”、“个人资料”、“相册”、“音乐”、“好友留言”。在首页插一些图片和文字，个人资料里加了一个MV。 三、网站功能介绍 首页页面的功能有“首页”、 “个人资料”、“相册”、“音乐”、“好友留言”；好友动态；我的资料和图像；最近访客；好友留言；还插入了背景音乐 “林俊杰她说”，设置为不重复播放；网页最下是制作人姓名、制作人邮箱、学号和联系电话。 个人资料页面的功能最上面和最下面都和首页相同；中间上面是2 我的个人资料，下面插入梁静茹的“爱久见人心”的MV，设置为不重复播放；左边是我的图像；图像下面是“图片”、“日志”、“说说”、“浏览量”。 相册页面的功能最上面和最下面都和首页相同；中间
3、插了九张图片，背景音乐为曲婉婷的“我的歌声里”，不重复播放。 音乐页面的功能最上面和最下面都和首页相同；中间上面有一张林俊杰的图片；下面是两首歌，分别为林俊杰的“她说”和曲婉婷的“我的歌声里”，两首歌有开始和暂停键；左边是我的图像；图像下面是“图片”、“日志”、“说说”、“浏览量”。 好友留言页面的功能最上面和最下面都和首页相同；中间是好友留言；左边是我的图像；图像下面是“图片”、“日志”、“说说”、“浏览量”；在左下有好友留言；背景音乐为曲婉婷的“我的歌声里”，不重复播放。 四、制作过程 首页 首先设置整个页面的背景和页面高宽度，背景水平重复，再利用菜单将整个页面分为五个部分，分别为导航、个
4、人资料、最近访客、空间动态、还有个人制作声明。用无序列表设置导航，并且链接到其他页面。根据不同要求设置字体颜色，插入图片，加上链接。插入音频，并且把长宽度都设置为10，使人不易察觉，这样进入页面就有3 音乐响起。 用CSS设置排版，去掉链接的下划线，以及背景图片的设置重复背景，边框为1像素，还有波浪线的颜色为#334455，如果设置的字体本机没有，那么默认的字体则为方正喵呜体，背景颜色为白色，同时设置了各个区的外边距的复合属性。代码如下图所示： 用DIV设置顶部， 无序列表设置导航“首页”、“个人资料”、“相册”、“音乐”、“好友留言”。 4 在页面中插入歌曲，代码如下图所示： 空间制作人声明
5、代码如下图： 在后面附录里有。 个人资料 这个页面的布局跟首页差不多。在这个页面中添加表格，在表格中填写个人资料，代码如下图： 5 在页面左边设置我的图像。图像下面是“图片”、“日志”、“说说”、“浏览量”。代码和显示图分别如下： 在中间插入一段梁静茹演唱的“爱久见人心”的MV，代码和显6 示图分别如下： 相册 布局跟首页一样，在这页面中，也是添加表格，在表格中插入图片，代码和显示图分别如下： 7 同样插入背景音乐，背景音乐为曲婉婷的“我的歌声里”。同样有制作人声明。 音乐 页面布局同首页，左边跟个人资料的左边一样，在中间添加一张8 林俊杰的图片，图片下面为两首歌曲。歌曲的代码如下图： 页面效
6、果如下图： 好友留言 布局同首页，其余的在前面页面中都可以找到原型，只是把中间换成了好友留言。代码如下图： 9 五、页面展示 首页 个人资料 相册 10 音乐 好友留言 11 六、总结分析 大一下学期我们学习网页制作时做过一次网页，那次是用Dreamweaver做的，我记得当时花了快一个星期。本以为这次不会花那么长时间，没想到也花了一个星期。主要是这次使用代码做的，跟Dreamweaver有所不同。而我这次做的网页是用CSS+DIV来排版布局的，它的优点在于可以使HTML代码更整齐，跟容易让人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比布局表格强得。 其实，在做网页的
7、时候，有很多都不会，比如说：插入视频等。当我不会做的时候，我就会问下同学或者上百度去搜索。虽说有的问题在百度上也找不到答案，这时我就去翻书，因为书上会很详细的讲解。做这次网页我最大的收获就是不管遇到什么困难，只要你不放弃，12 总会找到你想要的答案。 附录 无标题文档 a text-decoration:none #content border:1px dashed #334455 #top height:900px; background-image:url(img/1.jpg);margin:0px 0px .menu width:1440px; height:40px;repeat-x;
8、margin:0px .menu ul width:1440px;loat:left; display:inline; 13 width:1440px; auto 0px 100px .menu ul li width:70px;float:left;display:inline; margin:0px 10px .menu ul li a width:90px;float:left;height:40px;float:left; font-size:20px;font-family: 方正喵呜体; text-decoration:none; text-align:center; line-h
9、eight:50px; color: #FFFFFF; margin:0px 0px 0px 0px .menu ul li a:hover background-color:#0033FF; background-position: center #left height:750px; width:150px;background-color: #FFFFFF; float:left;margin:20px auto auto 140px #right height:750px; width:800px;background-color: #FFFFFF;float:left;margin:
10、20px auto auto 10px; #foot 14 height:60px; width:960px;background-color: #FFFFFF;float:left;margin:10px auto auto 140px STYLE1 font-family: 新宋体 首页 个人资料 相册 音乐 好友留言 15 个人资料 刘小染 留言 加好友 最近访客 16 换一批 好友留言： 镌刻时光 17 孤独时，有你的陪伴才不觉得凄凉；憔悴时，有你的安慰才不觉得忧伤；痛苦时，有你
11、的呵护才不觉得迷茫；快乐时，有你的分享才会觉得幸福荡漾! 空间动态 镌刻时光 每个人都会经过这个阶段，见到一座山，就想知道山后面是什么。我很想告诉他，可能翻过山后面，你会发现没什么特别。回望之下，可能会觉得这一18 边更好。每个人都会坚持自己的信念，在别人看来，是浪费时间，她却觉得很重要. 阅读(216) 评论(1314) 转载(520) 收藏(520) 站在人生的十字路口，我们也许会徘徊不定、犹豫不决。影响我们下决心的因素，往往既不是事情过于复杂，也不是我们的判断力不够，而是对于自己即将放弃的选择心有 不甘，既想要鱼，又想要熊掌。这时候我们就要明白，没有舍就没有得，今天所放弃的，明天可能会加倍回报给你。 19 阅读(216) 评论(1314) 转载(520) 收藏(520) 空间制作人：xxx 学号：1111111111 20 邮箱地址：emxxxx 联系电话：156xxxxxxxx 21
