web設(shè)計實驗報告

《web開發(fā)技術(shù)》設(shè)計報告學(xué)號:1060310014013專業(yè):計算機科學(xué)與技術(shù)10班姓名:吳斌題目:武漢之旅目錄一、設(shè)計目的二、課程設(shè)計題目三、網(wǎng)頁設(shè)計思路四、網(wǎng)頁設(shè)計分析五、技術(shù)分析六、網(wǎng)頁中的效果及代碼七、設(shè)計總結(jié)一設(shè)計目的設(shè)計目的是通過實踐經(jīng)歷Dreamweavercs8開發(fā)的全過程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運用所學(xué)的知識。結(jié)合具體的開發(fā)案例，理解并初步掌握運用Dreamweavercs8可視化開發(fā)工具進行網(wǎng)頁開發(fā)的方法；了解網(wǎng)頁設(shè)計制作過程通過設(shè)計達(dá)到掌握網(wǎng)頁設(shè)計、制作的技巧。了解和熟悉網(wǎng)頁設(shè)計的基礎(chǔ)知識和實現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁設(shè)計方案，可以按要求，利用合適圖文素材設(shè)計制作符合要求的網(wǎng)頁設(shè)計作品。熟練掌握Photoshopcs3、Dreamweavercs8等軟件的的操作和應(yīng)用。二、課程設(shè)計題目武漢之旅三、網(wǎng)頁設(shè)計思路1．作品中需包含flash動畫、超鏈接、圖片、聲音等多媒體元素。2．課程設(shè)計過程中，首先要進行網(wǎng)頁設(shè)計分析及頁面布局。四、網(wǎng)頁設(shè)計分析選定主題，確定題目之后，在做整個網(wǎng)站之前對網(wǎng)站進行需求分析。首先，做好需求調(diào)研。調(diào)研方式主要是上網(wǎng)查閱資料，在圖書館里翻閱相關(guān)書籍。調(diào)研內(nèi)容如下：1、網(wǎng)頁當(dāng)前以及日后可能出現(xiàn)的功能需求。2、網(wǎng)頁的實際運行環(huán)境。3、網(wǎng)頁頁面總體風(fēng)格以及美工效果。4、主頁面和次級頁面數(shù)量等。。5、各種頁面特殊效果及其數(shù)量。然后，前期工作結(jié)束之后對所有網(wǎng)頁進行功能描述，并對網(wǎng)站進行總體規(guī)劃，接著逐步細(xì)化。我做的主題是城市簡介，并且選定題目為“武漢之旅”，其目的是做一個簡單的網(wǎng)站，介紹武漢旅游的各個方面，提供一定的資訊信息，。進行分析之后，網(wǎng)站布局設(shè)計如下圖武漢簡介文化天地美食天地地標(biāo)建筑（index）首頁武漢簡介文化天地美食天地地標(biāo)建筑（index）首頁五、技術(shù)分析(一)建立布局在這次的網(wǎng)頁設(shè)計中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweavercs8是大多數(shù)人設(shè)計網(wǎng)頁的最佳選擇。特別是其在布局方面的出色表現(xiàn)，更受大家歡迎。眾所周知，沒有表格的幫助，很難組織出一個協(xié)調(diào)合理的頁面。1.點擊“ALT+F6”鍵，進入布局模式，插入布局表格。建立一個大概的布局。2.使用背景圖片：選中該項，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。（二）網(wǎng)頁中的圖像圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點：一是直觀，人眼觀看圖像時接受信息的速度遠(yuǎn)遠(yuǎn)超過觀看文字時接受信息的速度；二是能更清楚地表達(dá)細(xì)節(jié)內(nèi)容。由于這些優(yōu)點，在進行網(wǎng)頁設(shè)計時圖像是很受歡迎的。如果網(wǎng)頁做得像一幅風(fēng)景畫，瀏覽者一定會流連忘返，當(dāng)然，圖片不能很大。圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現(xiàn)在InternetExplorer支持的、最常用的圖像格式是GIF、JPEG和BMP。（1）在網(wǎng)頁中插入圖像利用Dreamweavercs8可以方便地在網(wǎng)頁中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對圖像進行編輯。在網(wǎng)頁中加入圖像的操作非常簡單：1.新建一個空白網(wǎng)頁，把光標(biāo)定位在網(wǎng)頁的開始位置。2.打開“插入”菜單，選擇“圖片”菜單項，在子菜單中選擇“文件系統(tǒng)”菜單項，或者單擊工具欄中的圖片工具圖標(biāo)，彈出一個“圖片”對話框。3.在此對話框中單擊“瀏覽”按鈕，出現(xiàn)一個“選擇文件”對話框。4.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁中。在網(wǎng)頁中插入圖像后我們就可以對圖像的各種屬性進行設(shè)置了。（2）圖像的各種屬性設(shè)置1.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個快捷菜單，在菜單中選擇“圖片屬性”菜單項，出現(xiàn)一個“圖片屬性”對話框.2.打開“外觀”選項卡。(1)設(shè)定圖像邊框粗細(xì)：在“外觀”選項卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”(2)設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時需要將圖像和文字分開，且兩者互不影響。比如在網(wǎng)頁左邊插入一幅圖像，要求右邊的文字就像沒有圖像時可以多行輸入，這就要通過設(shè)置圖像的環(huán)繞方式來實現(xiàn)。(3)編輯圖像大小：在Dreamweavercs8中，當(dāng)在網(wǎng)頁中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動圖像邊框，可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿意的尺寸。(4)設(shè)置圖像縮放比例：網(wǎng)頁設(shè)計的一個重要原則就是網(wǎng)頁的兼容性，對于不同的瀏覽器或者不同的分辨率，不管是800×600的窗口，還是1024×768的窗口，網(wǎng)頁都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：1.選中網(wǎng)頁中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項，彈出一個“圖像屬性”對話框.2.在“大小”欄中選中“指定大小”復(fù)選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。外還可以在“外觀”選項卡的“水平間距”和“垂直間距”欄里進行設(shè)置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。（4）怎樣編輯網(wǎng)頁中的圖像在Dreamweavercs8中，可以使用“圖片”工具欄中的各種工具對網(wǎng)頁中的圖像進行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。另外，為了使圖片更符合要求，我還在photoshopcs8中對所用的圖片進行了處理，使得圖片看起來更加精細(xì)美觀。（4）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁更美觀好看。網(wǎng)頁中使用背景圖像的具體步驟如下：1.新建一個空白網(wǎng)頁。2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“頁面屬性”，彈出“頁面屬性”對話框.3.開“背景”選項卡。4.在“背景”選項卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個“選擇背景圖片”對話框。5.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個“選擇文件”對話框。6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊“確定”按鈕。這樣，所選圖片將作為整個網(wǎng)頁的背景（5）插入flash動畫關(guān)于Flash視頻使用Dreamweaver中的“插入Flash視頻”命令，可將Flash視頻內(nèi)容插入Web頁面，而無需使用Flash創(chuàng)作工具。該命令可以插入Flash組件；當(dāng)您在瀏覽器中查看它時，它顯示所選擇的Flash視頻內(nèi)容以及一組播放控件。（6）設(shè)置鼠標(biāo)經(jīng)過圖片，進行圖片交互再插入圖片的下拉菜單中有一項是“鼠標(biāo)經(jīng)過”，點擊這一項，會彈出一個對話框，在對話框中可以設(shè)置鼠標(biāo)經(jīng)過前的圖片和經(jīng)過時的圖片，選擇“確定”即可。（7）設(shè)置鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時，下方的目標(biāo)屬性被激活，輸入blank設(shè)置成在新窗口中打開網(wǎng)頁。我們設(shè)置了鏈接本站點的網(wǎng)頁頁面，同時也連接了外網(wǎng)，使得大家訪問頁面時能夠查詢更多詳細(xì)的信息，方便用戶查詢。六、網(wǎng)頁中的效果及代碼1、網(wǎng)頁中的背景圖片的加入和背景音樂的加入在Dreamweaver中打開圖片，選中后點擊“確定”，相應(yīng)的會自動生成代碼，在文本文檔中的添加代碼是<bodybackground="image/圖片名稱">相應(yīng)的，加入背景音樂的代碼和加入圖片的代碼類似<bgsoundsrc="media/武俠帝女花.mp3">（此代碼為主頁（index.html）的背景音樂）2、圖片的不斷移動使圖片在頁面連續(xù)滾動出現(xiàn)其中某頁代碼如下：<tableborder="2"width="100%"height="20%"bordercolor="gray"><tdheight="90"width="100%"><center><marquee><imgsrc="image/武漢大學(xué).jpg"alt=""/width="200"height="100%"><imgsrc="image/黃鶴樓.jpg"alt=""/width="200"height="90"><imgsrc="image/武漢科技大學(xué).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、網(wǎng)頁中的鏈接其代碼如下：<divalign="center"><ahref="武漢簡介.html"class="STYLE2">武漢簡介</a></div></td><tdbgcolor="#999999"><divalign="center"><ahref="地標(biāo)建筑.html"class="STYLE2">地標(biāo)建筑</a></div></td><tdbgcolor="#666666"><divalign="center"><ahref="美食天地.html"class="STYLE2">美食天地</a></div></td><tdbgcolor="#333333"><divalign="center"><ahref="文化天地.html"class="STYLE1">文化天地</a>3、網(wǎng)頁中鼠標(biāo)的時鐘特效，時鐘會隨著鼠標(biāo)的移動而移動，而且形狀會變化，當(dāng)鼠標(biāo)停止后時鐘就又恢復(fù)了現(xiàn)在這個狀態(tài)。代碼如下；<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