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

个人网页设计课程设计报告 目录目录 一、概述.2 二、结构图.2 三、网页主题选择.2 四、模块介绍.3 （一）首页.4 1、整体框架代码.5 2、导航栏动态跳动效果的脚本代码.8 3、日历脚本代码和日历CSS 属性设置.9 4、每张网页都通过同一个层叠样式表touming.css 来控制属性，框架 CSS 代码如下.14 （二）日志.19 1、日志局部代码实现.19 2、相关日至导航图和代码.20 （三）留言.21 1、留言局部代码实现.21 2、评论脚本代码实现通过点击事件onclick 来实现 .22 （四）相册.23 1、相册局部代码实现.23 2、实现相册翻页的脚本代码如下.24 3、图片滚动效果图和代码.25 （五）关于我.27 1、关于我局部代码实现：.27 五、总结.29 六、制作平台.29 -1- 个人网页设计课程设计报告 一、概述一、概述 现在网络越来越趋于平常化， 网络一是生活正不可或缺的一部分。 自己平时上博客、刷 微博的时候就觉得有些网页自己可尝试着写出来。自己也在网页和脚本这方面学过一点知 识，因此可能上手比较块，故本次课程设计课题我和李运强选的题目是个人网页的设计。 在整个网页设计过程中主要是在模仿， 模仿个人博客， 个人空间的相关模块设置和功能 实现。个人在设计时考虑的多为个人的兴趣喜好， 而不注重商业的展示。内容以反映个人为 中心，从而使个人网站真正的成为展示自己的网络名片。 在网页制作中，我借鉴了网络上个人网页的设计风格，采用博客的形式来做整体框架。 整个网页的架构是由 DreamwaveCS4 完成的。 二、结构图二、结构图 郑伟的空间 首 页 日 志 留 言 相 册 关 于 我 三、网页主题选择三、网页主题选择 以博客的形式展现自我已成为当前最为时髦和时尚的方式了。主题我是参考我自己的 免费空间里的网站唧唧歪歪网的博客形式。例如整个背景的透明色设置就是受到它的启发。 所以， 我的关注的便是怎样让自己的网页更具有个性魅力， 使个人擅长的信息更全面的反映 于浏览者。 我的博客形式的个人主页比较喜欢， 所以主要是用博客的思想来展开我的设计思 路 。作 品做 好后我 会上 传于 我的 空间， 届时 大家 可以 来访问 。访 问地 址是 ： http:/zhengwei0601.web- -2- 个人网页设计课程设计报告 四、模块介绍四、模块介绍 以博客的形式展示自我，所以每张网页的整体框架是一样的，只是在中填充的内容不同。故在介绍我首页的结果后就不一一详细介绍其他页面 的结构，而只是将各个页面中的代码写下来。 每张网页所用到的脚本文件有所不同， 故也会将所用到的脚本文件代码写下来。 脚本文 件是用 javascript 写的，而且是用外部链接形式调入网页的，以便于网页代码的优化、修改 和维护。 受某些博客的影响，我非常喜欢导航栏的动态效果和音频效果。 所在，在导航栏上我和 搭档一直在写动态抖动的 js 代码。当然好的网页是通过好的布局、绚丽的层叠样式表 CSS 的使用、动态的实现等很多因素共同作用的结果。 有些简单的脚本代码自己实现的， 当然有 些比较复杂的脚本代码参考过网络资源，像日历这个脚本代码是参考网络上的资源。 -3- 个人网页设计课程设计报告 （一）首页（一）首页 -4- 个人网页设计课程设计报告 1 1、整体框架代码、整体框架代码： 郑伟的空间 心醉公社 首页 日志 留言 相册 关于我 个人中心 欢迎加盟心醉公社 社公醉心盟加迎欢 闭上眼睛，我看到了我的前途 好朋友是一本书可以打开一个世界， 开创一个好生活； 朋友是一面镜子， 可以照见自己的影子。 左手边的温度 半边床的幸福, 你的温柔我仍然记得那么清楚, 幸福就在不远处。 午后阳光覆盖的金黄色沙滩掩埋不掉心头沁出的甜； 海与天湛蓝相爱的分界线分不出尽头究竟有多远 。 留言 | 关于我 | 相册 | 日志 -7- 个人网页设计课程设计报告 最近更新 用心诠释着?不是 幸福的幸福 不知道从什么时候开始寻找一种叫幸福的东西 小生活， 小幸福我常常在想，我究竟是一个 拥有 你，我好幸福曾经看过这么一段话：爱情是追到手的吗？ Copyright zhengwei0601web- Some Rights Reserved. DesignBy 心醉湾 2 2、导航栏动态跳动效果的脚本代码、导航栏动态跳动效果的脚本代码： var currunt=0; function dis(menu_number) currunt=menu_number; width=30; -8- 个人网页设计课程设计报告 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 3、日历脚本代码和日历、日历脚本代码和日历 CSSCSS 属性设置属性设置： 日历效果图 -9- 个人网页设计课程设计报告 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) 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() 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) var daytemp=daily 0) 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) -11- 个人网页设计课程设计报告 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); Inputfont-family:verdana;font-size:9pt;text-decoration:none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000; .Calendarfont-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; .Titlefont-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; .DaySatfont-family:verdana;font-size:7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%; .DaySunfont-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; .DaySatTitlefont-family:verdana;font-size:9pt;color:#FF0000;text-decoration: -12- 个人网页设计课程设计报告 none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%; .DaySunTitlefont-family:verdana;font-size:9pt;color:#FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%; .DayButtonfont-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(varintDays=0;intDaysdays.length;intDays+)document.write(); document.write(); Calendar(); -13- 个人网页设计课程设计报告 4 4、 每张网页都通过同一个层叠样式表每张网页都通过同一个层叠样式表 touming.csstouming.css 来控制属性，来控制属性， 框架框架 CSSCSS 代码如下代码如下: 在这里我用的是外部样式表，因为这样既可以使得网页代码看起来简单又可以方便的同 时设置多个网页的属性。 外部层叠样式表的连接方式为 charset utf-8; /* CSS Document */ body background-image:url(./image/background.jpg) .content font-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); #guidepadding:0;margin:0;border-bottom:1pxsolid width:100%;filter:alpha(opacity=90);-moz-opacity:0.9 #warp1 position:relative; left:243px; top:30px; width:900px; height:850px; -14- #fff;float:left; 个人网页设计课程设计报告 #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; #indry position:relative; -15- 个人网页设计课程设计报告 left:30px; width:273px; height:255px; top:155px; font-size:14px; background-color:#D5DFDC; FILTER: Alpha(opacity=50); #rili position: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,#d5 background-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; -16- 个人网页设计课程设计报告 #d3 left:230px; z-index:3; #d4 left:330px; z-index:4; #d5 left:430px; z-index:5; .contents padding:10px; display:none; #content position:absolute; border:1px solid black; width:92px; height:112px; left:375px; top:35px; #content1 height:auto; display:block; #xuan color:#FFF; height:auto; font-family: 幼圆; font-size:20px; #pic height:90; width:110; #me position:absolute; left:72px; -17- 个人网页设计课程设计报告 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; #media position: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; -18- 个人网页设计课程设计报告 （二）日志（二）日志 1 1、日志局部代码实现、日志局部代码实现： 用心诠释着?不是幸福的幸福 不知道从什么时候开始寻找 一种叫幸福的东西，多年了，曾经很多次就站在幸福的旁边， 那种触手可及的感觉只给了我 更多的遗憾。不知道从什么时候开始为所谓的幸福找寻定义， 后来，从那累累的伤痕中总 结出，所谓的幸福不过是不幸的人安慰自己的名词罢了。 佛说前生五百次的回眸才换 得今生的一次擦肩而过， 于是偶尔也觉的自己太过于挥霍生活赐予的所谓的幸福， 习惯于把 自己的快乐建立在别人的痛苦之上， 而渐渐有了折磨人的*。开始理解幸福，在别人的痛苦 中作乐；开始在白纸上涂抹，在自己的痛苦中沉醉；开始怒视，开始狂叫，开始在每一个该 流泪的瞬间放声大笑！ -19- 个人网页设计课程设计报告 喜欢在凌晨上网，在那个算不 上世界的空间里像幽灵一样游荡； 喜欢给自己的名字上涂上灰暗的色彩， 以为总多多少少可 以伪装，可以自卫，可以在这个已经找不到的地久天长的世界找些哄骗自己的理由。 感动于 那个关于鱼与水的故事， 以为自己还会落泪，结果？错了，在没有眼泪可为那一片凄美而落 了。幸福的旁边不是不幸，不是无奈，不是涂满血痕的黄昏，亦非幻想中的朝霞漫天。幸福 的旁边是精神的孤寂和灵魂的彷徨， “失魂落魄”应该是最切实的描述了吧。于是在寻找幸 福的路上明白了什么是“行尸走肉” ，什么叫“麻木不仁” ，正如在找寻成功的途中会明白什 么叫失败一样。看动物世界的时候，更觉出做人的悲哀。至少那些被人类视为禽兽的东西还 能任意而为之。不像我们在渴望的同时压抑自己的欲望， 在建设的同时毁灭，在追寻的同时 放弃. 我真的从没找到过幸福吗？似 乎也找到过。 比如在将要迟到的路上看到的那一个个的绿灯； 比如在没有零钱买车票时那地 上闪烁着的亮银色； .我的幸福竟只是如此而已吗？都是一些色彩混合着最低微的需求. 我怀疑自己应该去摆弄油彩，或许那里面有我曾经想要的幸福，或许有所谓高尚的东 西. 或者我的幸福就装在盒子里，已 经在河水里顺流而下了。 或许已经成了某条小鱼的家也说不定， 但愿那盒子能带给它们幸福 吧. 通过列表的形式将内容展现出来有时候比使用换行 或者空格标签效率和 效果要高要好的多。 2 2、相关日至导航图和代码、相关日至导航图和代码： 相关日志 用心诠释着?不是幸福的幸福 小生活，小幸福 拥有你，我好幸福 -20- 个人网页设计课程设计报告 （三）留言（三）留言 1 1、留言局部代码实现、留言局部代码实现： 既然来了， 就留下点什么吧 我说政委同志 _ -21- 个人网页设计课程设计报告 上述的评论功能中输入框是通过表单的一些标签实现的。 输入框是文本框， 而提交按钮则是 一个类型为提交的按钮。 2 2、评论脚本代码实现通过点击事件、评论脚本代码实现通过点击事件 onclickonclick 来实现来实现： function Ok_OnClick(event) if(document.getElementsByName(textName)0.value =) alert(亲你还没有输入内容哦); return; /getElementById var table; var tableList = document.getElementsByTagName(TABLE); for(var i = 0 ; i tableList.length ; i+) if(tableL = tableName) table = tableListi break; var value = document.getElementsByName(textName)0.value; var index = table.rows.length; table.insertRow(index); table.rows(index).insertCell(0); table.rows(index).cells(0).innerText = +value; document.getElementsByName(textName)0.value = ; -22- 个人网页设计课程设计报告 （四）相册（四）相册 1 1、相册局部代码实现、相册局部代码实现： -23- 个人网页设计课程设计报告 2 2、实现相册翻页的脚本代码如下、实现相册翻页的脚本代码如下： function upNext(bigimg) var i=1; var width= bigimg.width; var height= bigimg.height; bigimg.onmousemove=function() if(event.offsetXwidth/2) bigimg.style.cursor= url(image/arr_left.cur),auto; bigimg.onmouseup=function() var obj=document.getElementById(viewpic); var srcvalue; srcvalue=image/+i+.jpg; -24- 个人网页设计课程设计报告 obj.src=srcvalue; i-; if(i=-1)i=14; /if 子句完 else bigimg.style.cursor= url(image/arr_right.cur),auto; bigimg.onmouseup=function() var obj=document.getElementById(viewpic); var srcvalue; srcvalue=image/+i+.jpg; obj.src=srcvalue; i+; if(i=15)i=0; /else 子句完 function lightOff() radioobj=document.getElement