web课设范例.doc

目录1.绪论11.1网站简介11.2 网站介绍11.3 网站规划12.主要模块设计22.1头部设计22.2 主要内容42.3底部版权声明43.各页面设计63.1首页设计63.2博文页面63.3 图片页面73.4 关于我页面83.5 其他页面94. 设计小结114.1网页制作中遇到的已解决及未解决问题114.2 网站设计心得体会115. 参考文献121.绪论1.1网站简介 （1）网站名称：新浪博客 （2）网站所用知识：HTML+CSS、Javascript、Photoshop1.2 网站介绍 网站模仿之本人的新浪博客/chengzhenping 但代码全部是原创，网站中用到的logo都是从网站中扣图，部分经过PS处理。原博客只有四个页面鉴于老师的要求同时兼顾美观，加一页面链接于最顶端导航栏的“博客首页”1.3 网站规划 本站最大特色为代码精简，这也是我在网站设计及编程中所热衷的。能共用的css代码尽量共用。例如使用border:0;来控制所有的图片没有边框，如有些需要边框则根据css规则另定义。还有就是一些共用的样式则使用class选择器，这样能简化很多代码，达到化繁为简的目的，而且看起来也更规范。 五个页面中的整体body,头部，以及框架，下面的版权声明都是一样的，所以可以建一个公用的css文件，但又有些不同的地方。可根据css的继承规则，只改动不同的地方。例如#bottom这个给版权定义样式的ID选择器，无论是内容还是样式都一样，唯一不同的是绝地定位中的top值不同，所以每个页面除继承之共用css外只需改下top值就够了。2.主要模块设计2.1头部设计头部设计分为两部分，分别top1，top2两个模块。且每个页面的top1,top2模块都一摸一样。每个模块开始及结束都应用注释分开来，这样找问题的时候就比较容易。主要的CSS代码如下：bodywidth:1366px;background:#d9caa3;font-size:medium;color:#2e3092;imgborder:0px;atext-decoration:none;a:link,a:visitedcolor:#2e3092;a:hover,a:activetext-decoration:underline;background:#eee;ullist-style:none;lifloat:left;margin-left:10px;.top1height:30px;background:#fff;font-size:13px;padding-left:100px;line-height:20px; .top2background:url(./logo/top.gif) no-repeat;height:265px;color:#fff;.top2 acolor:#fff;font-size:medium;.top2 a:link,.top2 a:visitedcolor:#fff;.top2 a:hover,.top2 a:activebackground:none;.top2 ulmargin:60px 250px;clear:left; Top1 top2模块的html代码如下： 博客首页 微博：最火交流工具 看明星动态 注册 搜索 三剑客的博客 /chengzhenping 订阅 手机订阅首页|博文|图片|关于我效果图如下： 2.2 主要内容主要内容有中心内容及右栏，每个大盒子都使用共用css文件中class选择器.main及main_top的样式。其中首页第二个盒子图片播放器用到javascript，其播放原理是利用看了setTimeout()函数，每3秒钟切换一次图片链接，实现简单播放效果。代码如下：var j=0;var image=document.getElementById(show_img);var images=new Array();for(var i=0;i19)j=0;setTimeout(show(),3000);show();2.3底部版权声明版权声明是每个页面都有的模块，所以它的css代码是放在共用css文件中的。其css代码如下：#bottomposition:absolute;top:2200px;left:250px;font-size:13px;color:#78705a;text-align:center;#bottom a:link,#bottom a:visitedcolor:#78705a;#bottom a:hover,#bottom a:activebackground:none;text-decoration:underline; #bottom这个ID选择器除了控制版权声明的样式，还控制了声明模块的位置。该样式使用的是绝地定位，绝地定位的特点是简单，但容易出错，所以用的时候要充分考虑是否会覆盖了已有的内容。同时要用五大主流浏览器统统测试一遍，以免在一个浏览器没问题，但在其它浏览器布局完全打乱的现象。底部版权声明部分的HTML代码如下： 新浪BLOG意见反馈留言板不良信息反馈电话：95105670 提示音后按2键（按当地市话标准计费）欢迎批评指正 新浪简介| About Sina| 广告服务| 联系我们| 招聘信息| 网站律师| SINA English| 会员注册| 产品答疑 Copyright 1996 - 2010 SINA Corporation, All Rights Reserved 新浪公司版权所有底部效果图如下：3.各页面设计3.1首页设计 首页的内容较多，也是工作量最大的页面。其主要模块top1,top2,main,right,bottom这几个模块。CSS样式代码除前面给出的top1,top2,bottom外如下：.mainbackground:#fff;color:#a1420f;font-size:13px;padding-left:20px;margin-top:2px;.main_topheight:30px;background:#c1a67b;color:#fff;border:solid;line-height:30px;font-size:13px;font-weight:bold;margin-left:-20px;clear:left;spanfont-size:1.5em;hrborder:dashed thin;width:740px;height:1px;color:#ccc;margin-top:30px;pcolor:#000;tdcolor:#00753A;font-size:13px;#contentwidth:800px;margin-left:140px;#images imgheight:100px;#rightwidth:220px;height:auto;position:absolute;top:311px;left:970px;#right hrwidth:200px;3.2博文页面 博文页面大部分都是用的是共用css，其头部和底部版权声明部分都和首页一样。所以实现较首页简单不少。除公用CSS样式外的代码如下：#leftwidth:250px;height:300px;margin-left:140px;#contentwidth:800px;position:absolute;top:311px;left:460px;#bottomtop:700px; 其中#bottom中只列出一个top值，其它都继承之共用css。最大限度简化代码，如此可见一斑。3.3 图片页面 图片页面主要CSS样式代码也是来之共用css文件。所以其额外的css代码也较少，如下：#contentwidth:800px;position:absolute;top:311px;left:460px;background:#fff;#content imgheight:100px;width:100px;margin:50px 50px;#content pborder:solid thin #ccc;height:200px;width:220px;float:left;margin-left:20px;margin-top:10px;#content limargin-top:10px;margin-bottom:10px;#leftwidth:250px;margin-left:140px;#left hrwidth:200px;#left imgwidth:100px;#left hrwidth:200px;#bottomtop:1800px;3.4 关于我页面 关于我页面整体布局也都和所有的页面一样。所以它的CSS代码同样大部分来之共用css文件，其单独css代码如下：#leftwidth:250px;margin-left:140px;#left hrwidth:200px;#contentwidth:800px;height:500px;position:absolute;top:311px;left:460px;background:#fff;#bottomtop:1000px;其Html特有代码如下： 个人资料 三剑客 博客等级：10博客积分：20博客访问：19关注人气：0 我最新关注的人 我常参加的圈子 尚无参加的圈子 我的档案 主要部分效果截图如下：3.5 其他页面 由于这个博客只有四个页面，但老师要求至少五个页面。考虑到老师的要求同时兼顾美观，另加一个页面链接于最顶部的“博客首页”这个链接。这个页面做的比较简单，主要部分top1,top2,版权声明等都一样。主要内容就只加入了几部电影。除top1,top2,bottom模块外的html代码如下：其效果截图如下：4. 设计小结4.1网页制作中遇到的已解决及未解决问题Question 1:每个页面的top2部分的三剑客的博客中之前我是使用margin-left:250px;但在火狐及谷歌浏览器中显示不正常，但在Dreamweaver设计中及IE及IE内核的浏览器中显示正常。而在火狐及谷歌浏览器显示结果为top1与top2模块之间有大概250px的垂直空隙。苦思不得其解，但随意把margin-left改成padding-left后就没问题了。估计可能是IE和火狐浏览器解释margin不一样所致吧。Question 2:var j=0;var image=document.getElementById(show_img);var images=new Array();for(var i=0;i19)j=0;setTimeout(show(),3000);show();这段JS代码必须放在所获取的文档对象之后才有用。放在内及外部没用。开始推断，可能是代码执行时文档树还没有生成，故无法获取文档对象，所以在中加入defer=”defer”属性，让JS代码在最后执行，但仍然没有用。至今仍不得其解。4.2 网站设计心得体会设计这个网站花了整整两天时间，深切体会到做网站是件体力活。但通过这次网站设计对html，css有了进一步的了解。运用的更加熟练，对代码精简，代码复用，代码规范，以及浏