个人主页设计报告

PAGEPAGE19一.课程设计的目的通过本课程的训练，使学生掌握HTML语言的语法结构，能够使用HTML语言编写静态网页，控制网页中的文字，图片，超级链接，表格，表单，框架等，能够使用HTML语言实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代码。熟练使用网页设计工具Frontpage、DreamweaverMX，能够使用DreamweaverMX设计网页的框架，导航条，设置文字，图片，超级链接，滚动文字，弹出窗口的属性，能够使用DreamweaverMX设计出比较复杂的网页，建立小型网站。熟悉FlashMX的绘图，帧，层，属性面板的使用，能够使用FlashMX制作简单的动画，设计网页的FLASH标题。掌握基于WEB的数据库应用，理解在B/S模式下网页如何同数据库之间建立联系，重点了解基于IDC和ASP两种方式以及各自的原理和运行环境，学会使用ASP的基本语法、内建对象、内建组件以及ASP访问数据库的方法，能够读懂并修改大型动态网站（ASP网站）的代码。二.设计网站的主题和意义网站的主题：食库网站的意义：在这次课程设计中，我和我的搭档选择的是制作一个以介绍美食为主的网站，在设计之初，我们对HTML语言一点都不了解，因此在实际动手之前还要去阅读书本，后来三.实验基本原理通过上机操作使学生实验掌握HTML语言的使用方法，使用HTML设计网页。通过上机操作使学生熟悉Frontpage、DreamweaverMX，FlashMX的使用方法，能够使用DreamweaverMX设计比较复杂的网页，能够使用FlashMX设计简单的动画，能够使用ASP创建动态网站，巩固和加深对知识的理解，增强计算机的使用和实际操作能力。本课程以WindowsXP和DreamweaverMX，FlashMX作为系统环境，主要讲述HTML的基本语法和Frontpage、eamweaverMX、lashMX的基本操作以及ASP的应用。四、运行坏境本网页主要基于windowsXP的操作系统，安装有Flash播放器、网页三剑客：MacromediaDreamweaver、MacromediaFireworks、MacromediaFlash的运行坏境及PhotoshopCS4。五.设计步骤5.1设计方案=1\*GB3①主架构设计，结构图如图1所示。食库（主页）食库（主页）美味川菜美味粤菜美味京菜留言板酸菜鱼辣子鸡丁糖醋脆皮鱼金菇肥牛卷酱汁猪蹄陈皮蜜汁鸡翅图1=2\*GB3②食库首页设计，结构图如图1所示。主页主页播放器图片日历特效滚动字幕滚动图片导航浮动图标图2=3\*GB3③食库子页设计，结构图如图3所示。食库子页食库子页超链接图片鼠标特效图35.2网页制作的前期策划和准备在上机制作我们的软件之前，我们讨论得出一共做八个网页，其中一个主网页，三个一级子网页，四个二级子网页，然后确定所要制作的网页的背景图片风格，一个好的网页，最基本的是主页和各个子页之间要相互协调，这样才能使人读起来舒服，会对我们所做的网站留下好印象。确定这些后就是上网查资料，比如想要的背景图片，想要在网页中加入的动态效果的代码，这些基本上都是通过上网找到，然后阅读，改成自己所想要的样子。5.3网页的制作5.3.1背景图片的制作在这次网页的制作中，不同的背景图片有不同的制作方法。在主网页中，用表格整体布局（插入→表格）插入一个3行0列的表格。在设计选框中拖动表格使表格大小达到最适宜的高度。将第一行作为导航条，在第三个表格框内插入两列表格，左边的表格做导航，中间的为滚动图片介绍菜式，右边的为日历特效和链接留言板。我们是找一张颜色比较单一，只在右下方有图的图片作为主背景，导航条和导航处的背景是用PS的截图工具截出来的，然后通过PS将三张图片调到适合主网页的大小。再在Dreamweaver中用插入图片的方式将保存好的图片插入适当的模块。在子网页中，我们决定用图片处理工具Photoshop将所要介绍的美食的图片，文字介绍和选好的背景图片先融合在一起，然后再将新制作好的图片以插入背景图片的方式插入到网页中。背景图片的具体制作步骤如下：先将美食的图片和所选定背景图片在Photoshop中打开，双击锁定的背景图层，将背景图层解锁并命名为图层0。将美食的图片用移动工具移动到背景图片的图层上，并命名为图层1。在图层1上添加图层蒙版，在渐变工具中选出适当的渐变，勾去反向，在图层1的蒙版上通过鼠标的拖拉，将两个图层融合在一起，也可以在图层窗口中选择适合两张图片的叠加方式，如变暗，变亮等。通过横排或直排文字工具将要介绍美食的文字添加进去，并将文字调为适当的字体，大小等。5.3.2=1\*ROMANI.在主页面中，添加了在页面中走动的忽隐忽现的动画，实现该效果的部分代码如下：<tdwidth="461"><p><ahref='img/btn_next_ovr.gif'><imgid="me1"border="0"src='2009121710263935711.gif'align="right"style="position:absolute;top:49;left:100;filter:alpha(Opacity=100)"width="100"height="100"></a></p><scriptlanguage="vbscript">dimidimcontroli=180subwindow_onload()change()endsubsubchange()ifi=0thencontrol=1move()endififi=180thencontrol=0move()endififcontrol=1thenme1.filters.alpha.opacity=ii=i+5elseme1.filters.alpha.opacity=ii=i-5endifwindow.settimeout"change()",100endsubsubmove()me1.style.left=Rnd*1800+20me1.style.top=Rnd*300+20endsub=2\*ROMANII.在主网页的最下部，我们设计了左右滚动的欢迎条，代码如下：<marqueealign="bottom"width=100%height="30"loop=-1direction="right"behavior="alternate"scrollamount="10"><spanclass="STYLE11">欢迎来到食库！</span></marquee>=3\*ROMANIII.在主页的最右方，设计了漂亮的日历，实现代码如下：<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metahttp-equiv="Content-Language"content="gb2312"/><metacontent="all"name="robots"/><metaname="author"content="RainoXu"/><metaname="Keywords"content=""><metaname="description"content=""/><metacontent="Xhtml+CSS,ASP,网页设计"name="keywords"/><styletype="text/css">*{margin:0;padding:0;font:10pxtahoma;}#calender{text-align:center;width:147px;font-size:10px;/*color:#27B0C1;*/margin:12px012px6px;border-top:1pxsolid#EEEEEE;border-left:1pxsolid#EEEEEE;}#calender.arrow_over{color:#FF1493;}#calender.arrow_out{color:#FF8C00;}#calendertd{border-bottom:1pxsolid#EEEEEE;border-right:1pxsolid#EEEEEE;width:21px;height:20px;line-height:16px;color:#666666;}#calender#cal_title{width:147px;background:#EFEFEF;}#calender#weektd{background:#F8F8F8;}#calender.current{background:#AAE7E8;display:block;margin:2px;}#calender.notcurrent{display:block;margin:2px;background:#EDEDED;}</style><scripttype="text/javascript">document.writeln("<divid='calenderdiv'style>日历加载中...</div>");varpress_tag;functionchangecal(action,year,month){varstrcal;switch(action){case"nextmonth":if(month==11){month=1;year=year*1+1;}else{month=month*1+2;}strcal="<spanonmouseover=\"this.className='arrow_over'\"onmouseout=\"this.className='arrow_out'\"class='arrow_out'onclick='calender("+year+","+month+")'title='下一个月'style='cursor:hand;'>></span>";break;case"premonth":if(month==0){month=12;year=year*1-1;}strcal="<spanonmouseover=\"this.className='arrow_over'\"onmouseout=\"this.className='arrow_out'\"class='arrow_out'onclick='calender("+year+","+month+")'title='上一个月'style='cursor:hand;'><</span>";break;case"nextyear":year=year*1+1;month=month*1+1;strcal="<spanonmouseover=\"this.className='arrow_over'\"onmouseout=\"this.className='arrow_out'\"class='arrow_out'onclick='calender("+year+","+month+")'title='下一年'style='cursor:hand;'>>></span>";break;case"preyear":year=year*1-1;month=month*1+1;strcal="<spanonmouseover=\"this.className='arrow_over'\"onmouseout=\"this.className='arrow_out'\"class='arrow_out'onclick='calender("+year+","+month+")'title='上一年'style='cursor:hand;'><<</span>";break;default:;}strcal=""+strcal+"";return(strcal);}functioncalender(cyear,cmonth){vard,d_date,d_day,d_month;//定义每月天数数组varmonthdates=["31","28","31","30","31","30","31","31","30","31","30","31"]d=newDate();d_year=d.getYear();//获取年份//判断闰月，把monthdates的二月改成29if(((d_year%4==0)&&(d_year%100!=0))||(d_year%400==0))monthdates[1]="29";if((cyear!="")||(cmonth!="")){//如果用户选择了月份和年份，则当前的时间改为用户设定d.setYear(cyear);d.setMonth(cmonth-1);d.setDate(1);}d_month=d.getMonth();//获取当前是第几个月d_year=d.getYear();//获取年份d_date=d.getDate();//获取日期if(d_year<2000){d_year=d_year+1900}//===========输出日历===========varstr;str="<tablecellspacing='0'cellpadding='0'id='calender'>";str+="<tr><tdid='cal_title'colspan='7'>"str+=changecal("preyear",d_year,d_month)str+=changecal("premonth",d_year,d_month)str+=d_year+"-"+(d_month*1+1)str+=changecal("nextmonth",d_year,d_month)str+=changecal("nextyear",d_year,d_month)str+="</td></tr>";str+="<trid='week'><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>";str+="<tr>";varfirstday,lastday,totalcounts,firstspace,lastspace,monthdays;//需要显示的月份共有几天，可以用已定义的数组来获取monthdays=monthdates[d.getMonth()];//设定日期为月份中的第一天d.setDate(1);//需要显示的月份的第一天是星期几firstday=d.getDay();//1号前面需要补足的的空单元格的数firstspace=firstday;//设定日期为月份的最后一天d.setDate(monthdays);//需要显示的月份的最后一天是星期几lastday=d.getDay();//最后一天后面需要空单元格数lastspace=6-lastday;//前空单元格+总天数+后空单元格，用来控制循环totalcounts=firstspace*1+monthdays*1+lastspace*1;//count：大循环的变量;f_space:输出前空单元格的循环变量;l_space:用于输出后空单元格的循环变量varcount,flag,f_space,l_space;//flag：前空单元格输完后令flag=1不再继续做这个小循环flag=0;for(count=1;count<=totalcounts;count++){//一开始flag=0，首先输出前空单元格，输完以后flag=1，以后将不再执行这个循环if(flag==0){if(firstspace!=0){for(f_space=1;f_space<=firstspace;f_space++){str+="<td></td>";if(f_space!=firstspace)count++;}flag=1;continue;}}if((count-firstspace)<=monthdays){//输出月份中的所有天数curday=d_year+","+(d_month*1+1)+","+(count-firstspace)+"|"linkday=d_year+","+(d_month*1+1)+","+(count-firstspace)vartoday=newDate();if((d_year==today.getYear())&&(d_month==today.getMonth())&&((count-firstspace)==today.getDate())){//将本地系统中的当前天数高亮str+="<td><spanclass='current'>"+(count-firstspace)+"</span></td>";}else{//不用高亮的部分,没有日志str+="<td>"+(count-firstspace)+"</td>";}if(count%7==0){if(count<totalcounts){str+="</tr><tr>";}else{str+="</tr>";}}}else{//如果已经输出了月份中的最后一天，就开始输出后空单元格补足for(l_space=1;l_space<=lastspace;l_space++){str+="<td></td>";if(l_space!=lastspace)count++;}continue;}}str+="<tr><tdcolspan='7'style='text-indent:9px;'><pre>日历</td></tr></table>"document.getElementById("calenderdiv").innerHTML="<divid='calenderdiv'>"+str+"</div>";}//调用函数calender("","")</script>=4\*ROMANIV．在主页和子页中，分别各鼠标制作了不同的效果，主页中随着鼠标的移动会有五颜六色的星星跟着移动，代码如下：<scriptlanguage="JavaScript">if(document.all){colours=newArray('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')amount=colours.length;YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0;document.write('<divid="ie"style="position:absolute;top:0;left:0;"><divstyle="position:relative">');for(i=0;i<amount;i++)document.write('<divid="iestars"style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:CourierNew;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center">.</div>');document.write('</div></div>');ini=1;gstep=1;functioniMouse(){my=event.y;mx=event.x;}document.onmousemove=iMousefunctiondim(){ini-=gstep;dt=setTimeout('dim()',10);if(ini<2){clearTimeout(dt);glow();}}functionglow(){ini+=gstep;gt=setTimeout('glow()',10);if(ini>14){clearTimeout(gt);dim();}}functionstars(){ie.style.top=document.body.scrollTop;for(i=0;i<amount;i++){varlayer=iestars[i].style;layer.filter='glow(color='+colours[i]+',strength='+ini+')';layer.top=Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);}currStep+=step;}functiondelay(){Ydelay=YgetDelay+=(my-YgetDelay)*1/20;Xdelay=XgetDelay+=(mx-XgetDelay)*1/20;stars();setTimeout('delay()',10);}delay();glow();}</script>在子网页中，添加了可以跟随鼠标移动的时钟，部分代码如下：<SCRIPTlanguage=JavaScript>dCol="0000FF"fCol="FF0000"sCol="00FF00"mCol="000000"hCol="000000"ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;d=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");m=newArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");date=newDate();day=date.getDate();year=date.getYear();if(year<2000)year=year+1900;TodaysDate="年"+m[date.getMonth()]+""+day+"日"+d[date.getDay()]+""+year;D=TodaysDate.split('');H='...';H=H.split('');M='';M=M.split('');S='';S=S.split('');Face='123456789101112';font='Arial';size=1;speed=0.6;ns=(document.layers);ie=(document.all);Face=Face.split('');n=Face.length;a=size*10;ymouse=0;xmouse=0;scrll=0;props="<fontface="+font+"size="+size+"color="+fCol+">";props2="<fontface="+font+"size="+size+"color="+dCol+">";Split=360/n;Dsplit=360/D.length;HandHeight=ClockHeight/4.5HandWidth=ClockWidth/4.5HandY=-7;HandX=-2.5;scrll=0;step=0.06;currStep=0;y=newArray();x=newArray();Y=newArray();X=newArray();for(i=0;i<n;i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}Dy=newArray();Dx=newArray();DY=newArray();DX=newArray();for(i=0;i<D.length;i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}if(ns){for(i=0;i<D.length;i++)document.write('<layername="nsDate'+i+'"top=0left=0height='+a+'width='+a+'><center>'+props2+D[i]+'</font></center></layer>');for(i=0;i<n;i++)document.write('<layername="nsFace'+i+'"top=0left=0height='+a+'width='+a+'><center>'+props+Face[i]+'</font></center></layer>');for(i=0;i<S.length;i++)document.write('<layername=nsSeconds'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');for(i=0;i<M.length;i++)document.write('<layername=nsMinutes'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');for(i=0;i<H.length;i++)document.write('<layername=nsHours'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');}if(ie){document.write('<divid="Od"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');for(i=0;i<D.length;i++)document.write('<divid="ieDate"style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>');document.write('</div></div>');document.write('<divid="Of"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');for(i=0;i<n;i++)document.write('<divid="ieFace"style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>');document.write('</div></div>');document.write('<divid="Oh"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');for(i=0;i<H.length;i++)document.write('<divid="ieHours"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');document.write('</div></div>');document.write('<divid="Om"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');for(i=0;i<M.length;i++)document.write('<divid="ieMinutes"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');document.write('</div></div>')document.write('<divid="Os"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');for(i=0;i<S.length;i++)document.write('<divid="ieSeconds"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');document.write('</div></div>')}(ns)?window.captureEvents(Event.MOUSEMOVE):0;functionMouse(evnt){ymouse=(ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;xmouse=(ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;}(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;functionClockAndAssign(){time=newDate();secs=time.getSeconds();sec=-1.57+Math.PI*secs/30;mins=time.getMinutes();min=-1.57+Math.PI*mins/30;hr=time.getHours();hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(time.getMinutes())/360;if(ie){Od.style.top=window.document.body.scrollTop;Of.style.top=window.document.body.scrollTop;Oh.style.top=window.document.body.scrollTop;Om.style.top=window.document.body.scrollTop;Os.style.top=window.document.body.scrollTop;}for(i=0;i<n;i++){varF=(ns)?document.layers['nsFace'+i]:ieFace[i].style;F.top=y[i]+ClockHeight*Math.sin(-1.0471+i*Split*Math.PI/180)+scrll;F.left=x[i]+ClockWidth*Math.cos(-1.0471+i*Split*Math.PI/180);}for(i=0;i<H.length;i++){varHL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);}for(i=0;i<M.length;i++){varML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);}for(i=0;i<S.length;i++){varSL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);}for(i=0;i<D.