web设计实验报告

《web开发技术》设计报告学号:1060310014013专业:计算机科学与技术10班姓名:吴斌题目:武汉之旅目录一、设计目的二、课程设计题目三、网页设计思路四、网页设计分析五、技术分析六、网页中的效果及代码七、设计总结一设计目的设计目的是通过实践经历Dreamweavercs8开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweavercs8可视化开发工具进行网页开发的方法；了解网页设计制作过程通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshopcs3、Dreamweavercs8等软件的的操作和应用。二、课程设计题目武汉之旅三、网页设计思路1．作品中需包含flash动画、超链接、图片、声音等多媒体元素。2．课程设计过程中，首先要进行网页设计分析及页面布局。四、网页设计分析选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。调研内容如下：1、网页当前以及日后可能出现的功能需求。2、网页的实际运行环境。3、网页页面总体风格以及美工效果。4、主页面和次级页面数量等。。5、各种页面特殊效果及其数量。然后，前期工作结束之后对所有网页进行功能描述，并对网站进行总体规划，接着逐步细化。我做的主题是城市简介，并且选定题目为“武汉之旅”，其目的是做一个简单的网站，介绍武汉旅游的各个方面，提供一定的资讯信息，。进行分析之后，网站布局设计如下图武汉简介文化天地美食天地地标建筑（index）首页武汉简介文化天地美食天地地标建筑（index）首页五、技术分析(一)建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweavercs8是大多数人设计网页的最佳选择。特别是其在布局方面的出色表现，更受大家欢迎。众所周知，没有表格的帮助，很难组织出一个协调合理的页面。1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。（二）网页中的图像图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。由于这些优点，在进行网页设计时图像是很受欢迎的。如果网页做得像一幅风景画，浏览者一定会流连忘返，当然，图片不能很大。图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer支持的、最常用的图像格式是GIF、JPEG和BMP。（1）在网页中插入图像利用Dreamweavercs8可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.新建一个空白网页，把光标定位在网页的开始位置。2.打开“插入”菜单，选择“图片”菜单项，在子菜单中选择“文件系统”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。（2）图像的各种属性设置1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.打开“外观”选项卡。(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。(3)编辑图像大小：在Dreamweavercs8中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。(4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。（4）怎样编辑网页中的图像在Dreamweavercs8中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我还在photoshopcs8中对所用的图片进行了处理，使得图片看起来更加精细美观。（4）使用背景图像使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：1.新建一个空白网页。2.单击鼠标右键，弹出的快捷菜单里选“页面属性”，弹出“页面属性”对话框.3.开“背景”选项卡。4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。这样，所选图片将作为整个网页的背景（5）插入flash动画关于Flash视频使用Dreamweaver中的“插入Flash视频”命令，可将Flash视频内容插入Web页面，而无需使用Flash创作工具。该命令可以插入Flash组件；当您在浏览器中查看它时，它显示所选择的Flash视频内容以及一组播放控件。（6）设置鼠标经过图片，进行图片交互再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。（7）设置链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。六、网页中的效果及代码1、网页中的背景图片的加入和背景音乐的加入在Dreamweaver中打开图片，选中后点击“确定”，相应的会自动生成代码，在文本文档中的添加代码是<bodybackground="image/图片名称">相应的，加入背景音乐的代码和加入图片的代码类似<bgsoundsrc="media/武侠帝女花.mp3">（此代码为主页（index.html）的背景音乐）2、图片的不断移动使图片在页面连续滚动出现其中某页代码如下：<tableborder="2"width="100%"height="20%"bordercolor="gray"><tdheight="90"width="100%"><center><marquee><imgsrc="image/武汉大学.jpg"alt=""/width="200"height="100%"><imgsrc="image/黄鹤楼.jpg"alt=""/width="200"height="90"><imgsrc="image/武汉科技大学.jpg"alt=""/width="200"height="90"><imgsrc="image/琴台大剧院1.jpg"alt=""/width="200"height="90"><imgsrc="image/长江大桥1.jpg"alt=""/width="200"height="90"><imgsrc="image/热干面.jpg"alt=""/width="200"height="90"><imgsrc="image/精武鸭脖.jpg"alt=""/width="200"height="90"><imgsrc="image/面窝.jpg"alt=""/width="200"height="90"><imgsrc="image/豆皮.jpg"alt=""/width="200"height="90"></marquee></center></tr>2、网页中的链接其代码如下：<divalign="center"><ahref="武汉简介.html"class="STYLE2">武汉简介</a></div></td><tdbgcolor="#999999"><divalign="center"><ahref="地标建筑.html"class="STYLE2">地标建筑</a></div></td><tdbgcolor="#666666"><divalign="center"><ahref="美食天地.html"class="STYLE2">美食天地</a></div></td><tdbgcolor="#333333"><divalign="center"><ahref="文化天地.html"class="STYLE1">文化天地</a>3、网页中鼠标的时钟特效，时钟会随着鼠标的移动而移动，而且形状会变化，当鼠标停止后时钟就又恢复了现在这个状态。代码如下；<scriptlanguage=JavaScript>dCol='990000';//datecolour.fCol='990000';//facecolour.sCol='FF0000';//secondscolour.mCol='000000';//minutescolour.hCol='000000';//hourscolour.ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;//Alternothingbelow!Alignmentswillbelost!d=newArray("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");m=newArray("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");date=newDate();day=date.getDate();year=date.getYear();if(year<2000)year=year+1900;TodaysDate=""+d[date.getDay()]+""+day+""+m[date.getMonth()]+""+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+"><B>";props2="<fontface="+font+"size="+size+"color="+dCol+"><B>";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]+'</B></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]+'</B></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.length;i++){varDL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;DL.top=Dy[i]+ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;DL.left=Dx[i]+ClockWidth*1.5*Math.cos(currStep+i*Dsplit