个人主页设计报告

来源：瑞缇养生网

个人主页设计报告

一.课程设计的目的

通过本课程的训练，使学生掌握HTML语言的语法结构，能够使用HTML语言编写静态网页，控制网页中的文字，图片，超级链接，表格，表单，框架等，能够使用HTML语言实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代码。熟练使用网页设计工具Frontpage、DreamweaverM_，能够使用DreamweaverM_设计网页的框架，导航条，设置文字，图片，超级链接，滚动文字，弹出窗口的属性，能够使用DreamweaverM_设计出比较复杂的网页，建立小型网站。熟悉FlashM_的绘图，帧，层，属性面板的使用，能够使用FlashM_制作简单的动画，设计网页的FLASH标题。掌握基于WEB的数据库应用，理解在B/S模式下网页如何同数据库之间建立联系，重点了解基于IDC和ASP两种方式以及各自的原理和运行环境，学会使用ASP的基本语法、内建对象、内建组件以及ASP访问数据库的方法，能够读懂并修改大型动态网站（ASP网站）的代码。

二.设计网站的主题和意义

网站的主题：食库

网站的意义：

在这次课程设计中，我和我的搭档选择的是制作一个以介绍美食为主的网站，在设计之初，我们对HTML语言一点都不了解，因此在实际动手之前还要去阅读书本，后来通过上机制作一个介绍美食的网站，将自己所学的HTML静态网页制作的相关知识运用到实际中，加深了对理论知识的理解。在制作过程中，我们的制作并不像刚开始想象的那么顺利，但是我们通过查资料，问同学得到了满意的答案，总之，这次个人网站的课程设计提高了我们的动手能力，也提高了我们的自学能力，对我们以后的学习和工作都有很大的帮助。

三.实验基本原理

通过上机操作使学生实验掌握HTML语言的使用方法，使用HTML设计网页。通过上机操作使学生熟悉Frontpage、DreamweaverM_，FlashM_的使用方法，能够使用DreamweaverM_设计比较复杂的网页，能够使用FlashM_设计简单的动画，能够使用ASP创建动态网站，巩固和加深对网站建设与网页制作1

知识的理解，增强计算机的使用和实际操作能力。

本课程以Windows_P和DreamweaverM_，FlashM_作为系统环境，主要讲述HTML的基本语法和Frontpage、eamweaverM_、lashM_的基本操作以及ASP的应用。

四、运行坏境

本网页主要基于windows_P的操作系统，安装有Flash播放器、网页三剑客：MacromediaDreamweaver、MacromediaFireworks、MacromediaFlash的运行坏境及PhotoshopCS4。

五.设计步骤

5.1设计方案

①主架构设计，结构图如图1所示。

②食库首页设计，结构图如图1所示。

③食库子页设计，结构图如图3所示。

5.2网页制作的前期策划和准备

在上机制作我们的软件之前，我们讨论得出一共做八个网页，其中一个主网页，三个一级子网页，四个二级子网页，然后确定所要制作的网页的背景图片风格，一个好的网页，最基本的是主页和各个子页之间要相互协调，这样才能使人读起来舒服，会对我们所做的网站留下好印象。确定这些后就是上网查资料，比如想要的背景图片，想要在网页中加入的动态效果的代码，这些基本上都是通过上网找到，然后阅读，改成自己所想要的样子。

5.3网页的制作

5.3.1背景图片的制作

在这次网页的制作中，不同的背景图片有不同的制作方法。在主网页中，用表格整体布局（插入→表格）插入一个3行0列的表格。在设计选框中拖动表格使表格大小达到最适宜的高度。将第一行作为导航条，在第三个表格框内插入两列表格，左边的表格做导航，中间的为滚动图片介绍菜式，右边的为日历特效和链接留言板。我们是找一张颜色比较单一，只在右下方有图的图片作为主背景，导航条和导航处的背景是用PS的截图工具截出来的，然后通过PS将三张图片调到适合主网页的大小。再在Dreamweaver中用插入图片的方式将保存好的图片插入适当的模块。

在子网页中，我们决定用图片处理工具Photoshop将所要介绍的美食的图片，文字介绍和选好的背景图片先融合在一起，然后再将新制作好的图片以插入背景图片的方式插入到网页中。背景图片的具作步骤如下：

1.先将美食的图片和所选定背景图片在Photoshop中打开，双击锁定的背景

图层，将背景图层解锁并命名为图层0。

2.将美食的图片用移动工具移动到背景图片的图层上，并命名为图层1。

3.在图层1上添加图层蒙版，在渐变工具中选出适当的渐变，勾去反向，在

图层1的蒙版上通过鼠标的拖拉，将两个图层融合在一起，也可以在图层窗口中选择适合两张图片的叠加方式，如变暗，变亮等。

4.通过横排或直排文字工具将要介绍美食的文字添加进去，并将文字调为适

当的字体，大小等。

I.在主页面中，添加了在页面中走动的忽隐忽现的动画，实现该效果的部分代码如下：

style="position:absolute;top:49;left:100;filter:alpha(Opacity=100)"width="100"height="100">

dimi

dimcontrol

i=180

subwindow_onload()

change()

endsub

subchange()

ifi=0then

control=1

move()

endif

ifi=180then

control=0

move()

endif

ifcontrol=1then

me1.filters.alpha.opacity=i

i=i+5

else

me1.filters.alpha.opacity=i

i=i-5

endif

window.settimeout"change()",100

endsub

submove()

me1.style.left=Rnd1800+20

me1.style.top=Rnd300+20

endsub

II.在主网页的最下部，我们设计了左右滚动的欢迎条，代码如下：

欢迎来到食库！

III.在主页的最右方，设计了漂亮的日历，实现代码如下：

margin:0;

padding:0;

font:10p_tahoma;

calender{

te_t-align:center;

width:147p_;

font-size:10p_;

/color:27B0C1;/

margin:12p_012p_6p_;

border-top:1p_solidEEEEEE;border-left:1p_solidEEEEEE;}

calender.arrow_over{

color:FF1493;

calender.arrow_out{

color:FF8C00;

calendertd{

border-bottom:1p_solidEEEEEE;border-right:1p_solidEEEEEE;width:21p_;

height:20p_;

line-height:16p_;

color:666666;

calendercal_title{

width:147p_;background:EFEFEF;}

calenderweektd{

background:F8F8F8;

calender.current{

background:AAE7E8;

display:block;

margin:2p_;

calender.notcurrent{

display:block;

margin:2p_;

background:EDEDED;

document.writeln("日历加载中...");

varpress_tag;

functionchangecal(action,year,month)

varstrcal;

switch(action)

case"ne_tmonth":

if(month==11)

month=1;

year=year1+1;

}else{

month=month1+2;

strcal="";

break;

case"premonth":

if(month==0)

month=12;

year=year1-1;

strcal="<";

break;

case"ne_tyear":

year=year1+1;

month=month1+1;

strcal="";

break;

case"preyear":

year=year1-1;

month=month1+1;

strcal="<<";

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的二月改成29

if(((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="";

str+=""

str+=changecal("preyear",d_year,d_month)

str+=changecal("premonth",d_year,d_month)

str+=d_year+"-"+(d_month1+1)

str+=changecal("ne_tmonth",d_year,d_month)

str+=changecal("ne_tyear",d_year,d_month)

str+="";

str+="SuMoTuWeThFrSa";

str+="";

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=firstspace1+monthdays1+lastspace1;

/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+="";

if(f_space!=firstspace)count++;

flag=1;

continue;

if((count-firstspace)<=monthdays)

/输出月份中的所有天数

curday=d_year+","+(d_month1+1)+","+(count-firstspace)+"|"9

linkday=d_year+","+(d_month1+1)+","+(count-firstspace)

vartoday=newDate();

if((d_year==today.getYear())(d_month==today.getMonth())((count-firstspace)==today.getDate()))

/将本地系统中的当前天数高亮

str+=""+(count-firstspace)+"";

}else{

/不用高亮的部分,没有日志

str+=""+(count-firstspace)+"";

if(count%7==0)

if(count

str+="";

}else{

str+="";

}else{

/如果已经输出了月份中的最后一天，就开始输出后空单元格补足

for(l_space=1;l_space<=lastspace;l_space++)

str+="";

if(l_space!=lastspace)count++;

continue;

str+="

日历"
document.getElementById("calenderdiv").innerHTML=""+str+"";
/调用函数
calender("","")
IV．在主页和子页中，分别各鼠标制作了不同的效果，主页中随着鼠标的移动会
有五颜六色的星星跟着移动，代码如下：
if(document.all)
colours=newArray('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')amount=colours.length;
YgetDelay=0,_getDelay=0,Ydelay=0,_delay=0,step=0.2,currStep=0,my=0,m_=0;document.write('
style="position:relative">');
for(i=0;i
document.write('
style="position:absolute;top:0p_;left:0p_;height:50p_;width:50p_;font-family:Courier
New;font-size:5p_;color:'+colours[i]+';padding-top:20p_;te_t-align:center">.');document.write('');
ini=1;
gstep=1;
functioniMouse(){
my=event.y;m_=event._;
document.onmousemove=iMouse
functiondim(){
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
varlayer=iestars[i].style;
layer.filter='glow(color='+colours[i]+',strength='+ini+')';layer.top=
Ydelay+100Math.sin((5Math.sin((currStep-15.99)/10))+i70)Math.sin((currStep)/10)Math.c
os((currStep+i25)/10);
layer.left=_delay+180Math.cos((5Math.sin((currStep-15.99)/10))+i70)Math.sin((currStep)/1
0)Math.cos((currStep+i25)/10);
currStep+=step;
functiondelay(){
Ydelay=YgetDelay+=(my-YgetDelay)1/20;_delay=_getDelay+=(m_-_getDelay)1/20;stars();
setTimeout('delay()',10);
delay();
glow();
在子网页中，添加了可以跟随鼠标移动的时钟，部分代码如下：
dCol="0000FF"
fCol="FF0000"
sCol="00FF00"
mCol="000000"
hCol="000000"
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouse_=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='1234567101112';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split('');
n=Face.length;
a=size10;
ymouse=0;
_mouse=0;
scrll=0;
props="";
props2="";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
Hand_=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=newArray();_=newArray();Y=newArray();_=newArray();
for(i=0;i
Dy=newArray();D_=newArray();DY=newArray();D_=newArray();for(i=0;i
if(ns){
for(i=0;i
document.write('
'+props2+D[i]+'');for(i=0;idocument.write('
'+props+Face[i]+'');for(i=0;idocument.write('
'+S[i]+'');for(i=0;idocument.write('
size=3color='+mCol+'>
'+M[i]+'');for(i=0;idocument.write('
'+H[i]+'');}
if(ie){
document.write('
style="position:absolute;top:0p_;left:0p_">
style="position:relative">');
for(i=0;i
document.write('
style="position:absolute;top:0p_;left:0;height:'+a+';width:'+a+';te_t-align:center">'+props2+D[i]+'
');
document.write('');
document.write('
style="position:relative">');
for(i=0;i
document.write('
style="position:absolute;top:0p_;left:0;height:'+a+';width:'+a+';te_t-align:center">'+props+Face[i]
+'');
document.write('');
document.write('
style="position:relative">');
for(i=0;i
document.write('
style="position:absolute;width:16p_;height:16p_;font-family:Arial;font-size:16p_;color:'+hCol+';t
e_t-align:center;font-weight:bold">'+H[i]+'');
document.write('');
document.write('
style="position:relative">');
for(i=0;i
document.write('
style="position:absolute;width:16p_;height:16p_;font-family:Arial;font-size:16p_;color:'+mCol+';
te_t-align:center;font-weight:bold">'+M[i]+'');
document.write('')
document.write('
style="position:relative">');
for(i=0;i
document.write('
style="position:absolute;width:16p_;height:16p_;font-family:Arial;font-size:16p_;color:'+sCol+';t
e_t-align:center;font-weight:bold">'+S[i]+'');
document.write('')
(ns)window.captureEvents(Event.MOUSEMOVE):0;
functionMouse(evnt){
ymouse=
(ns)evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;_mouse=(ns)evnt.page_+ClockFromMouse_:event._+ClockFromMouse_;
(ns)window.onMouseMove=Mouse:document.onmousemove=Mouse;
functionClockAndAssign(){
time=newDate();
secs=time.getSeconds();
sec=-1.57+Math.PIsecs/30;
mins=time.getMinutes();
min=-1.57+Math.PImins/30;
hr=time.getHours();
hrs=-1.575+Math.PIhr/6+Math.PIparseInt(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
varF=(ns)document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i]+ClockHeightMath.sin(-1.0471+iSplitMath.PI/180)+scrll;F.left=_[i]+ClockWidthMath.cos(-1.0471+iSplitMath.PI/180);}
for(i=0;i
varHL=(ns)document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(iHandHeight)Math.sin(hrs)+scrll;
HL.left=_[i]+Hand_+(iHandWidth)Math.cos(hrs);
for(i=0;i
varML=(ns)document.layers['nsMinutes'+i]:ieMinutes[i].style;ML.top=y[i]+HandY+(iHandHeight)Math.sin(min)+scrll;
ML.left=_[i]+Hand_+(iHandWidth)Math.cos(min);
for(i=0;i
varSL=(ns)document.layers['nsSeconds'+i]:ieSeconds[i].style;SL.top=y[i]+HandY+(iHandHeight)Math.sin(sec)+scrll;
SL.left=_[i]+Hand_+(iHandWidth)Math.cos(sec);
for(i=0;i
varDL=(ns)document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i]+ClockHeight1.5Math.sin(currStep+iDsplitMath.PI/180)+scrll;DL.left=D_[i]+ClockWidth1.5Math.cos(currStep+iDsplitMath.PI/180);}
currStep-=step;
functionDelay(){
scrll=(ns)window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])speed);
D_[0]=Math.round(D_[0]+=((_mouse)-D_[0])speed);
for(i=1;i
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])speed);D_[i]=Math.round(D_[i]+=(D_[i-1]-D_[i])speed);}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])speed);_[0]=Math.round(_[0]+=((_mouse)-_[0])speed);for(i=1;i
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])speed);_[i]=Math.round(_[i]+=(_[i-1]-_[i])speed);}
ClockAndAssign();
setTimeout('Delay()',40);
if(ns||ie)window.onload=Delay;
V．将各网页做好之后，用超链接将各网页链接起来。
六.网页的测试与发布
6.1网页截图：
美食主页截图
美食推荐特效
6.2网页运行结果
在Ie_plore8.0中将做好的食库主页打开，看到忽隐忽现的动画，日历，随着鼠标移动的七彩的星星，滚动条随机滚动，菜色不断变化的食物介绍等都能实现。点击超链接的各个网页，网页都能打开，子网页中的各超链接，随着鼠标移动的时钟也能实现，测试证明本次课程设计达到了预期所要实现的效果。
七.心得体会
通过这次课程设计我对HTML语言有了一定的了解，从刚开始的对HTML语言一点都不了解，到能够两个人合作完成一个网站的雏形，这是一个很大的进步。
在这次网页的设计中，有过很多次的失败，刚开做出来的网页基本上只有插入背景图片，超链接几个技术。后来我们通过找别人的网页，看别人的代码，通过不断的学习，模仿好的网页特效，将别人的代码不断的修改后运用到自己的网页中去。此次网页设计还涉及到html,javascript,css,asp,php等编程语言技术方面的知识，我们意识到只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和超强功能。
我们这次网页的主题是食库，主要是介绍美食，刚开始的构思是用框架将页面分为多个小块，然后再各个小块中插入想要的东西，如想要介绍的美食图片，后来我们在多次试验之后发现这种方法并不能达到预期所要实现的功能，于是我们又尝试了用表格，结果发现表格做出来的效果比框架更适合我们。在背景图片的处理方面，刚开始我们是从网上找到图片，然后直接插入进去的，插进去之后会发现有的图片的大小并不是很适合网页的页面，或者差进去的图片和所要介绍的美食图片不是很融合，这时我们用到了一个图片处理工具Photoshop，在PS中我们可以对图片进行各种处理，这同时也丰富了我们的图形处理知识。
总之，这次课程设计又使我接触到了一门新的知识，学会了网页设计的基本思想，对我以后的学习和工作打下了基础，使我受益匪浅。
8．参考文献
[1]李ActiveServerPages(ASP)3.0网页设计手册北京:
版社1999
[2]前沿电脑图像工作室巧学巧用Dreamweaver、Fireworks、
Flash制作网页北京:版社
[3]ASP入门与实例演练薄志编著中国青年出版社
[4]侯网页设计教程北京:版社2006