搜索
1目录一、主题......................................................................................2二、网站设计思路.....................................................................2三、网站功能介绍.....................................................................2四、制作过程..............................................................................3首页........................................................................................3个人资料................................................................................5相册........................................................................................7音乐........................................................................................8好友留言................................................................................9五、页面展示............................................................................10六、总结分析............................................................................12附录............................................................................................132一、主题我的QQ空间二、网站设计思路之前一直没想好做什么样的网页，后来在逛QQ空间的时候觉得做个空间的网页也不错。所以就准备着做了。首先我想到的是QQ空间里的页面框架都差不多，那么我该怎样让我的QQ空间的也有相似的框架呢。我想到用CSS+DIV，DIV+CSS可以使HTML代码更整齐，它的可控性比布局表格强。我初步计划设五个页面，分别为“首页”、“个人资料”、“相册”、“音乐”、“好友留言”。在首页插一些图片和文字，个人资料里加了一个MV。三、网站功能介绍首页页面的功能有“首页”、“个人资料”、“相册”、“音乐”、“好友留言”（这些都在最上面，靠左，分别链接到“首页”、“个人资料”、“相册”、“音乐”、“好友留言”页面）；好友动态（好友动态在中间）；我的资料和图像（在左上角）；最近访客（在资料和图像下面）；好友留言（在访客下面，链接到“好友留言”）；还插入了背景音乐“林俊杰—她说”，设置为不重复播放；网页最下是制作人姓名、制作人邮箱、学号和联系电话。个人资料页面的功能最上面和最下面都和首页相同；中间上面是3我的个人资料，下面插入梁静茹的“爱久见人心”的MV，设置为不重复播放；左边是我的图像；图像下面是“图片”、“日志”、“说说”、“浏览量”。相册页面的功能最上面和最下面都和首页相同；中间插了九张图片，背景音乐为曲婉婷的“我的歌声里”，不重复播放。音乐页面的功能最上面和最下面都和首页相同；中间上面有一张林俊杰的图片；下面是两首歌，分别为林俊杰的“她说”和曲婉婷的“我的歌声里”，两首歌有开始和暂停键；左边是我的图像；图像下面是“图片”、“日志”、“说说”、“浏览量”。好友留言页面的功能最上面和最下面都和首页相同；中间是好友留言；左边是我的图像；图像下面是“图片”、“日志”、“说说”、“浏览量”；在左下有好友留言；背景音乐为曲婉婷的“我的歌声里”，不重复播放。四、制作过程首页首先设置整个页面的背景和页面高宽度，背景水平重复，再利用菜单将整个页面分为五个部分，分别为导航、个人资料、最近访客、空间动态、还有个人制作声明。用无序列表设置导航，并且链接到其他页面。根据不同要求设置字体颜色，插入图片，加上链接。插入音频，并且把长宽度都设置为10，使人不易察觉，这样进入页面就有4音乐响起。用CSS设置排版，去掉链接的下划线，以及背景图片的设置重复背景，边框为1像素，还有波浪线的颜色为#334455，如果设置的字体本机没有，那么默认的字体则为方正喵呜体，背景颜色为白色，同时设置了各个区的外边距的复合属性。代码如下图所示：用DIV设置顶部，无序列表设置导航“首页”、“个人资料”、“相册”、“音乐”、“好友留言”。5在页面中插入歌曲，代码如下图所示：空间制作人声明代码如下图：在后面附录里有。个人资料这个页面的布局跟首页差不多。在这个页面中添加表格，在表格中填写个人资料，代码如下图：6在页面左边设置我的图像。图像下面是“图片”、“日志”、“说说”、“浏览量”。代码和显示图分别如下：在中间插入一段梁静茹演唱的“爱久见人心”的MV，代码和显7示图分别如下：相册布局跟首页一样，在这页面中，也是添加表格，在表格中插入图片，代码和显示图分别如下：8同样插入背景音乐，背景音乐为曲婉婷的“我的歌声里”。同样有制作人声明。音乐页面布局同首页，左边跟个人资料的左边一样，在中间添加一张9林俊杰的图片，图片下面为两首歌曲。歌曲的代码如下图：页面效果如下图：好友留言布局同首页，其余的在前面页面中都可以找到原型，只是把中间换成了好友留言。代码如下图：10五、页面展示首页个人资料相册11音乐好友留言12六、总结分析大一下学期我们学习网页制作时做过一次网页，那次是用Dreamweaver做的，我记得当时花了快一个星期。本以为这次不会花那么长时间，没想到也花了一个星期。主要是这次使用代码做的，跟Dreamweaver有所不同。而我这次做的网页是用CSS+DIV来排版布局的，它的优点在于可以使HTML代码更整齐，跟容易让人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比布局表格强得。其实，在做网页的时候，有很多都不会，比如说：插入视频等。当我不会做的时候，我就会问下同学或者上百度去搜索。虽说有的问题在百度上也找不到答案，这时我就去翻书，因为书上会很详细的讲解。做这次网页我最大的收获就是不管遇到什么困难，只要你不放弃，13总会找到你想要的答案。附录htmlheadtitle无标题文档/titlestyletype=text/cssa{text-decoration:none}#content{border:1pxdashed#334455}#top{height:900px;width:1440px;background-image:url(img/1.jpg);margin:0px0px}.menu{width:1440px;height:40px;repeat-x;margin:0pxauto0px100px}.menuul{width:1440px;loat:left;display:inline;14}.menuulli{width:70px;float:left;display:inline;margin:0px10px}.menuullia{width:90px;float:left;height:40px;float:left;font-size:20px;font-family:方正喵呜体;text-decoration:none;text-align:center;line-height:50px;color:#FFFFFF;margin:0px0px0px0px}.menuullia:hover{background-color:#0033FF;background-position:center}#left{height:750px;width:150px;background-color:#FFFFFF;float:left;margin:20pxautoauto140px}#right{height:750px;width:800px;background-color:#FFFFFF;float:left;margin:20pxautoauto10px;}#foot{15height:60px;width:960px;background-color:#FFFFFF;float:left;margin:10pxautoauto140px}STYLE1{font-family:新宋体}/style/headbodydivid=topdivclass=menuulliahref=index.html首页/a/liliahref=ziliao.html个人资料/a/liliahref=xiangce.html相册/a/liliahref=yinyue.html音乐/a/liliahref=liuyan.html好友留言/a/li/ul/divdivid=leftp/pp16个人资料imgsrc=img/23.gifstyle=margin:3pxautoauto25px/ppalign=center刘小染/pp ahref=#ahref=liuyan.html留言/a ahref=#stle=background-color:#CCCCCC加好友/a/pdivid=content/divp最近访客/ppimgsrc=img/3.gif/height=50width=50style=margin:0pxautoauto15pximgsrc=img/4.jpg/height=50width=50style=margin:0pxautoauto10px/pimgsrc=img/5.jpg/height=50width=50style=margin:0pxautoauto10pximgsrc=img/6.jpg/height=50width=50style=margin:0pxautoauto10px17/ppimgsrc=img/7.jpg/height=50width=50style=margin:0pxautoauto15pximgsrc=img/8.jpg/height=50width=50style=margin:0pxautoauto10px/ppimgsrc=img/9.jpg/height=50width=50style=margin:0pxautoauto15px ahref=#换一批/a/pdivid=content/divpahref=liuyan.html好友留言：/pmarqueeborder=1align=middlescrolldelay=100/ppimgsrc=img/6.jpgheight=30width=30style=margin:0pxautoauto20px//ppfontsize=-3ahref=#镌刻时光/a/font