网页设计与制作课程设计

信息工程学院--《网站设计与建设》课程设计报告PAGEPAGE3目录摘要．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．Ⅱ第一章题目分析 2第二章设计概述 32.1功能概述 32.2系统流程图 3第三章系统设计 43.1网站目录结构设计 43.2系统功能设计 43.3系统功能结构图 53.4首页布局设计 6第四章详细设计 74.1首页 74.2首页代码实现 74.3相册子页 84.4相册代码实现 94.5音乐子页 114.6音乐子页代码实现 114.8通讯录子页代码实现 12第五章调试分析 165.1子页错误 165.2网站特效不显示 165.3Div标签使用 17总结 18参考文献 19致谢 20

第一章题目分析设计一个个人主页来展示自己相关的信息，同时主页内也有一个登陆系统，该系统用于自己登陆来管理网站。每个人都有自己的一面，而每个人展示的方法都大不相同。对于一个个性不是时分鲜明的人来说，有一个自己的个人网站，会有一个很好的展示平台。在这个平台上可以晒自己的相片，也可以有一些名人名言。可以把自己感兴趣的时事新闻添加到网站。每个人的爱好不同，富裕了的人有多种兴趣和爱好，养鸟种花、逛街购物、寻朋访友等等等等，现在兴起的娱乐形式又出现了建个人网站的形式，打上个人资料、上传个人照片、回复朋友留言、交流共同爱好，成为一种新型的时尚娱乐方式。这种个人网站没有其他目的，他们把网站作为个人宠物，每天细心照料，倾注个人的热情。而个人主页对于我来说就是一个展示自我，同时又可以交到许多朋友的平台。对于个性鲜明的我们，需要展示的平台也越来越多。此时，互联网这一交流平台已经成为年轻一代我们的平台。可以足不出户的购物、订餐和许多功能。一个个主页可以让我们充分来发挥自己的才能。

第二章设计概述2.1功能概述设计一个个人主页，首页可以有一个登陆管理该网站的登陆窗口。网站布局中主要有4部分，第一部分为页面中间部分，此部分用于发布一些最新消息。网站右侧，有一个滚动的字幕栏，用于大家发表一些信息和心情。在滚动栏下方有个自己用的链接部分，在主页最下方是友情连接部分。导航栏部分有6个，分为首页、相册、哲理、留言、通讯录和音乐欣赏。2.2系统流程图首页首页相册哲理音乐留言通讯录图2.2网站功能结构图

第三章系统设计3.1网站目录结构设计网站的目录是指建立网站时创建的目录。例如：在用frontpage98建立网站时都默认建立了根目录和images子目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。在网站设计过程中把站点的目录设在本地磁盘D盘下的未命名站点3，在本目录下有图片存放文件夹，视频存放文件夹，文本存放文件等。如图3.1图3.1目录结构3.2系统功能设计系统功能中有很多功能，主要功能有滚动字幕来让大家发表自己的看法，和一些交流信息。社区热帖部分用于发表一些最新信息，相册子页显示一些照片。哲理模块添加了一些人生哲理文章，音乐子子页有自己喜欢的歌曲，可以添加和替换，留言板，通讯录部分记录联系电话和一些信息。3.3系统功能结构图首页首页相册哲理音乐留言通讯录浏览相片管理相片查看文章修改添加乐音欣赏查看通讯录修改添加信息

3.4首页布局设计在进行制作前，对网站首页有一个整体的布局设计，熟话说人要脸，树要皮。而且一个好的网站首页会第一眼吸引到浏览该网站的游客,这就要求我们的首页有一个好的布局设计。布局如图3.3图3.3首页布局

第四章详细设计4.1首页首页主要是显示的一些信息和连接，按照事先画好的布局图来进行布局设计。效果如图4.1图4.14.2首页代码实现在主页设计过程中主要用到了滚动字幕，登陆框，DIV功能和超链接，关键代码如下：DIV<tdvAlign="bottom"align="middle"width="88"height="1"><palign="center"><ahref="xc.html"><imgonMouseOver="this.src='images/myhome_1.gif'"onMouseOut="this.src='images/myhome.gif'"src="images/myhome.gif"border="0"width="70"height="26"><divstyle="position:relative;left:3px;top:-20px;z-index:99;width:50px;">相册</div>滚动字幕<marquee

id="scrollArea"

height="150"

width="380"

loop="-1"

scrollamount="1"

scrolldelay="50"

direction="up"

onMouseOver=scrollArea.stop()

onMouseOut=scrollArea.start()>滚动内容</marquee>

4.3相册子页在相册子页中，用到了类似于windows图片预览里的幻灯片功能，在每个图片框中添加图片地址，然后修改坐标，修改图片切换时间等。效果如图4.44.4相册代码实现关键代码如下：for(vari=1;i<counts+1;i++){document.write('<ahref="javascript:changeimg('+i+');"id="xxjdjj'+i+'"class="axx"target="_self">'+i+'</a>');}document.write('</div></div>');change_img();</script>

4.5音乐子页在音乐子页中添加了一个音乐播放器，可以进行音乐播放，同时带有列表功能，效果如图4.5图4.54.6音乐子页代码实现关键代码如下:<embedsrc="音乐地址"autostart="1"loop=-1type="application/x-mplayer2"width="400"height="64"></embed>4.7通讯录子页在通讯录子页中用了一个DIV标签来控制，可以用代码的添加来添加信息，同时在每个表中添加了文字过多显示滚动。效果如图4.7图4.74.8通讯录子页代码实现关键代码如下：<tablewidth="462"border="1"align="left"cellspacing="0"bordercolor="#996633"><tr><tdwidth="35"nowrapclass="STYLE2"><divalign="left"class="STYLE3">序号</div></td><tdwidth="85"nowrapclass="STYLE2"><divalign="left"class="STYLE6">姓名</div></td><tdwidth="180"nowrapclass="STYLE2"><divalign="left"class="STYLE6">学校</div></td><tdwidth="150"nowrapclass="STYLE2"><divalign="left"class="STYLE6">专业</div></td><tdwidth="100"nowrapclass="STYLE2"><divalign="left"class="STYLE6">手机</div></td><tdwidth="100"nowrapclass="STYLE2"><divalign="left"class="STYLE6">QQ</div></td><tdnowrapclass="STYLE2"><divalign="left"class="STYLE6"><spanclass="STYLE3">校内<strong>（有/没有）</strong></span></div></td><tdwidth="150"nowrapclass="STYLE2"><divalign="left"class="STYLE7"><divalign="left"class="STYLE2">想说的话</div></div></td></tr><trbordercolor="#996633"><tdalign="center"valign="middle"class="STYLE2"><divalign="left"class="STYLE7"><spanclass="STYLE3"><strong>1</strong></span></div></td><tdwidth="85"class="STYLE2"> <divclass="STYLE3"style="WIDTH:85;HEIGHT:30;BACKGROUND-COLOR:transparent;OVERFLOW:auto;scrollbar-face-color:#FFFFFF;scrollbar-shadow-color:#885C10;scrollbar-highlight-color:#F8ECD8;scrollbar-3dlight-color:#885C10;scrollbar-darkshadow-color:#F8ECD8;scrollbar-track-color:#F8ECD8;scrollbar-arrow-color:#885C10"> <divalign="left"> <spanclass="STYLE3"><strong><AHREF="xiugai4.asp?ID=1">宋泽明</A></strong></span></div> </div></td><tdwidth="180"class="STYLE2"> <divclass="STYLE3"style="WIDTH:180;HEIGHT:30;BACKGROUND-COLOR:transparent;OVERFLOW:auto;scrollbar-face-color:#FFFFFF;scrollbar-shadow-color:#885C10;scrollbar-highlight-color:#F8ECD8;scrollbar-3dlight-color:#885C10;scrollbar-darkshadow-color:#F8ECD8;scrollbar-track-color:#F8ECD8;scrollbar-arrow-color:#885C10"> <divalign="left"> <spanclass="STYLE3"><strong>吉林工程技术师范学院</strong></span> </div></div></td> <divalign="left"> <spanclass="STYLE3"><strong>75196386</strong></span> </div> </div></td><tdwidth="120"class="STYLE2"> <divstyle="WIDTH:150;HEIGHT:30;BACKGROUND-COLOR:transparent;overflow-y:auto;scrollbar-face-color:#FFFFFF;scrollbar-shadow-color:#885C10;scrollbar-highlight-color:#F8ECD8;scrollbar-3dlight-color:#885C10;scrollbar-darkshadow-color:#F8ECD8;scrollbar-track-color:#F8ECD8;scrollbar-arrow-color:#885C10"> <divalign="left"> <spanclass="STYLE3"><strong>无</strong></span> </div></div></td><trbordercolor="#996633"><tdalign="center"valign="middle"class="STYLE2">

第五章调试分析5.1子页错误在制作子叶相册时，相册中部分图片加了特效。但是在调试过程中发现图片并不显示，而且无特效。查找问题，发现代码中图片添加位置不对，而且并未调长宽。调试后，改正问题。截图如图5.1图5.15.2网站特效不显示在调试过程中发现有部分特显没有显示，在网上询问，发现没有控件被阻止了。允许后特显显示截图如5.2图5.25.3Div标签使用在使用div过程中发现无法控制文字在图片上的位置，而且图片的位置也会发生偏移。检查后发现是图层坐标控制不对，重新调整坐标后文字显示在图片上。如图5.3图5.3

总结虽然此次课程设计的时间急促，但是这个收获应该说是相当大的。一开始我们从参考书上找来了课题，但是毕竟是参考书，做到后来发现很多程序都是不完整的，这让我们伤透了脑筋。参考书毕竟只是一个参考，设计这种东西最后还是要靠自己动脑筋。然后整个设计通过了软件和硬件上的调试，应该说这是通过我们小组成员的共同努力和动脑完成的，虽然内容并不是很复杂，但是我们觉得设计的过程相当重要，学到了很多，收获了很多。通过这次课程设计我们也发现了自身存在的不足之处，虽然感觉理论上已经掌握，但在运用到实践的过程中仍有意想不到的困惑，经过一番努力才得以解决。我觉得课程设计反映的是一个从理论到实际应