《个人网页设计》课程设计报告.doc

个人网页设计课程设计报告目录一、概述2二、结构图2三、网页主题选择2四、模块介绍3（一）首页41、整体框架代码52、导航栏动态跳动效果的脚本代码83、日历脚本代码和日历css属性设置94、每张网页都通过同一个层叠样式表touming.css来控制属性，框架css代码如下14（二）日志191、日志局部代码实现192、相关日至导航图和代码20（三）留言211、留言局部代码实现212、评论脚本代码实现通过点击事件onclick来实现22（四）相册231、相册局部代码实现232、实现相册翻页的脚本代码如下243、图片滚动效果图和代码25（五）关于我271、关于我局部代码实现：27五、总结29六、制作平台29一、概述 现在网络越来越趋于平常化，网络一是生活正不可或缺的一部分。自己平时上博客、刷微博的时候就觉得有些网页自己可尝试着写出来。自己也在网页和脚本这方面学过一点知识，因此可能上手比较块，故本次课程设计课题我和李运强选的题目是个人网页的设计。 在整个网页设计过程中主要是在模仿，模仿个人博客，个人空间的相关模块设置和功能实现。个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。 在网页制作中，我借鉴了网络上个人网页的设计风格，采用博客的形式来做整体框架。整个网页的架构是由dreamwavecs4完成的。 二、结构图 郑伟的空间日志相册留言关于我首页三、网页主题选择以博客的形式展现自我已成为当前最为时髦和时尚的方式了。主题我是参考我自己的免费空间里的网站唧唧歪歪网的博客形式。例如整个背景的透明色设置就是受到它的启发。所以，我的关注的便是怎样让自己的网页更具有个性魅力，使个人擅长的信息更全面的反映于浏览者。我的博客形式的个人主页比较喜欢，所以主要是用博客的思想来展开我的设计思路。作品做好后我会上传于我的空间，届时大家可以来访问。访问地址是： 四、模块介绍 以博客的形式展示自我，所以每张网页的整体框架是一样的，只是在中填充的内容不同。故在介绍我首页的结果后就不一一详细介绍其他页面的结构，而只是将各个页面中的代码写下来。每张网页所用到的脚本文件有所不同，故也会将所用到的脚本文件代码写下来。脚本文件是用javascript写的，而且是用外部链接形式调入网页的，以便于网页代码的优化、修改和维护。受某些博客的影响，我非常喜欢导航栏的动态效果和音频效果。所在，在导航栏上我和搭档一直在写动态抖动的js代码。当然好的网页是通过好的布局、绚丽的层叠样式表css的使用、动态的实现等很多因素共同作用的结果。有些简单的脚本代码自己实现的，当然有些比较复杂的脚本代码参考过网络资源，像日历这个脚本代码是参考网络上的资源。（一）首页1、整体框架代码：郑伟的空间 心醉公社 首页 日志 留言 相册 关于我 个人中心     欢迎加盟心醉公社社公醉心盟加迎欢 闭上眼睛，我看到了我的前途 好朋友是一本书可以打开一个世界， 开创一个好生活； 朋友是一面镜子， 可以照见自己的影子。 左手边的温度 半边床的幸福, 你的温柔我仍然记得那么清楚, 幸福就在不远处。午后阳光覆盖的金黄色沙滩掩埋不掉心头沁出的甜； 海与天湛蓝相爱的分界线分不出尽头究竟有多远 。 留言 | 关于我 |相册 | 日志 最近更新  用心诠释着?不是幸福的幸福 不知道从什么时候开始寻找一种叫幸福的东西  小生活，小幸福我常常在想，我究竟是一个  拥有你，我好幸福曾经看过这么一段话： 爱情是追到手的吗？ copyright some rights reserved.design by 心醉湾2、导航栏动态跳动效果的脚本代码： var currunt=0; function dis(menu_number) currunt=menu_number; width=30; speed=5; positionx=0; prespeed=0; flag=1; document.getelementbyid(content+menu_number).style.display=block; hidrest(menu_number); function hidrest(menu_clicked) var menu_length=5; for(i=1;i=menu_length;i+) if(i!=menu_clicked) document.getelementbyid(content+i).style.display=none; function shake() if(flag=1) speed=1-speed*0.8 positionx+=speed; positionx-=prespeed; document.getelementbyid(d+currunt).style.top=positionx if(math.abs(speed)1.0) document.getelementbyid(d+currunt).style.top=0; flag=0; prespeed=speed; settimeout(shake(),50) 3、日历脚本代码和日历css属性设置： 日历效果图 var months = new array(一, 二, 三,四, 五, 六, 七, 八, 九,十, 十一, 十二); var daysinmonth = new array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31); var days = new array(日,一, 二, 三,四, 五, 六); var classtemp; var today=new gettoday(); var year=today.year; var month=today.month; var newcal; function getdays(month, year) if (1= month) return (0 = year % 4) & (0 != (year % 100) |(0 = year % 400) ? 29 : 28; else return daysinmonthmonth; function gettoday() this.now = new date(); this.year = this.now.getfullyear(); this.month = this.now.getmonth(); this.day = this.now.getdate(); function calendar() newcal = new date(year,month,1); today = new gettoday(); var day = -1; var startday = newcal.getday(); var endday=getdays(newcal.getmonth(), newcal.getfullyear(); var daily = 0; if (today.year = newcal.getfullyear() & (today.month = newcal.getmonth() day = today.day; var caltable = document.all.caltable.tbodies.calendar; var intdaysinmonth =getdays(newcal.getmonth(), newcal.getfullyear(); for (var intweek = 0; intweek caltable.rows.length;intweek+) for (var intday = 0;intday caltable.rowsintweek.cells.length;intday+) var cell = caltable.rowsintweek.cellsintday; var montemp=(newcal.getmonth()+1)10?(0+(newcal.getmonth()+1):(newcal.getmonth()+1); if (intday = startday) & (0 = daily) daily = 1; var daytemp=daily10?(0+daily):(daily); var d=; if(day=daily) cell.classname=daynow; else if(intday=6) cell.classname = daysat; else if (intday=0) cell.classname =daysun; else cell.classname=day; if (daily 0) & (daily = intdaysinmonth) cell.innertext = daily; daily+; else cell.classname=calendartd; cell.innertext = ; document.all.year.value=year; document.all.month.value=month+1; function submonth() if (month-1)11) month=0; year=year+1; else month=month+1; calendar(); function setdate() if (document.all.month.value12) alert(月的有效范围在1-12之间!); return; year=math.ceil(document.all.year.value); month=math.ceil(document.all.month.value-1); calendar(); function buttonover() var obj = window.event.srcelement; obj.runtimestyle.csstext = background-color:#ffffff;/ obj.classname=hover;function buttonout() var obj = window.event.srcelement; window.settimeout(function()obj.runtimestyle.csstext = ;,300);input font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #ffffff;height: 20px;border: 1px solid #666666;color:#000000;.calendar font-family: verdana;text-decoration: none;width: 170;background-color: #c0d0e8;font-size: 9pt;border:0px dotted #1c6fa5;.calendartd font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;.title font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #a4b9d7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;.day font-family: verdana;font-size: 7pt;color:#243f65;background-color: #e5e9f2;height: 20px;width:11%;text-align: center;.daysat font-family: verdana;font-size: 7pt;color:#ff0000;text-decoration: none;background-color:#e5e9f2;text-align: center;height: 18px;width: 12%;.daysun font-family: verdana;font-size: 7pt;color: #ff0000;text-decoration: none;background-color:#e5e9f2;text-align: center;height: 18px;width: 12%;.daynow font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #ffffff;height: 20px;text-align: center;.daytitle font-family: verdana;font-size: 9pt;color: #000000;background-color: #c0d0e8;height: 20px;width:11%;text-align: center;.daysattitle font-family: verdana;font-size: 9pt;color:#ff0000;text-decoration: none;background-color:#c0d0e8;text-align: center;height: 20px;width: 12%;.daysuntitle font-family: verdana;font-size: 9pt;color: #ff0000;text-decoration: none;background-color: #c0d0e8;text-align: center;height: 20px;width: 12%;.daybutton font-family: webdings;font-size: 9pt;font-weight: bold;color: #243f65;cursor:hand;text-decoration: none; 3 年 月 4 document.write( + days0 + ); for (var intloop = 1; intloop days.length-1;intloop+) document.write( + daysintloop + ); document.write( + daysintloop + ); for (var intweeks = 0; intweeks 6; intweeks+) document.write(); for (var intdays = 0; intdays days.length;intdays+) document.write(); document.write(); calendar();4、每张网页都通过同一个层叠样式表touming.css来控制属性，框架css代码如下:在这里我用的是外部样式表，因为这样既可以使得网页代码看起来简单又可以方便的同时设置多个网页的属性。外部层叠样式表的连接方式为charset utf-8;/* css document */body background-image:url(./image/background.jpg) .contentfont-size:14px;background-color:#d5dfdc;filter: alpha(opacity=50);width:800px;position:absolute;left:313px;top:184px;width: 586px;height: 712px; .alphafilter:alpha(opacity=50);width:300px; /*设置图片透明*/.zz position:relative;left:30px;width:263px;height:275px;top:155px; font-size:14px;background-color:#d5dfdc;filter: alpha(opacity=50);#guide padding:0; margin:0; border-bottom:1px solid #fff; float:left; width:100%;filter:alpha(opacity=90);-moz-opacity:0.9#warp1 position:relative;left:243px;top:30px;width:900px;height:850px;#kongjian position:absolute;left:28px;top:-61px;width:739px;height:66px;z-index:2;#index position:relative;left:0px;top:110px;width:900px;height:28px;z-index:3;#me position:absolute;left:73.5px;top:42px;width:121px;height:132px;#introduce position:absolute;left:8px;top:-13px;width:260px;height:35px;z-index:1;#xiaodaohang position:absolute;left:285px;top:427px;width:239px;height:57px;z-index:4;#indryposition:relative;left:30px;width:273px;height:255px;top:155px; font-size:14px;background-color:#d5dfdc;filter: alpha(opacity=50);#riliposition:absolute;left:283px;top:506px;width:264px;height:160px;z-index:3;#apdiv4 position:absolute;left:24px;top:63px;width:914px;height:1px;z-index:4;#d1,#d2,#d3,#d4,#d5background-color:#ea8371;position:absolute;border:1px black solid;margin-left:0;margin-right:auto;width:87px;height:28px;text-align:center;top: 1px;#d1 left:30px;z-index:1;#d2 left:130px;z-index:2;#d3 left:230px; z-index:3;#d4left:330px;z-index:4;#d5 left:430px;z-index:5; .contents padding:10px; display:none; #contentposition:absolute;border:1px solid black;width:92px;height:112px;left:375px;top:35px; #content1 height:auto; display:block; #xuancolor:#fff;height:auto;font-family: 幼圆;font-size:20px;#picheight:90;width:110;#me position:absolute;left:72px;top:54px;width:122px;height:132px;#introduce position:absolute;left:-3px;top:-6px;width:271px;height:52px;z-index:1;#apdiv1 position:absolute;left:282px;top:497px;width:272px;height:137px;z-index:1;#apdiv2 position:absolute;left:274px;top:670px;width:268px;height:29px;z-index:2;#mediaposition:absolute;left:871px;top:155px;width:276px;height:28px;z-index:2;h1 color:#663;font-size:40px; padding:.6em 0 0; margin-top:2em; h2 font-size:15px; padding:.5em .6em .3em; color:#0c2f86; （二）日志1、日志局部代码实现：  用心诠释着?不是幸福的幸福           不知道从什么时候开始寻找一种叫幸福的东西，多年了，曾经很多次就站在幸福的旁边，那种触手可及的感觉只给了我更多的遗憾。不知道从什么时候开始为所谓的幸福找寻定义，后来，从那累累的伤痕中总结出，所谓的幸福不过是不幸的人安慰自己的名词罢了。           佛说前生五百次的回眸才换得今生的一次擦肩而过，于是偶尔也觉的自己太过于挥霍生活赐予的所谓的幸福，习惯于把自己的快乐建立在别人的痛苦之上，而渐渐有了折磨人的*。开始理解幸福，在别人的痛苦中作乐；开始在白纸上涂抹，在自己的痛苦中沉醉；开始怒视，开始狂叫，开始在每一个该流泪的瞬间放声大笑！  &n