flash網(wǎng)頁多媒體課程設(shè)計

1、<p><b>　　課程設(shè)計報告書</b></p><p>　　課程名稱：《多媒體技術(shù)應(yīng)用》課程設(shè)計 </p><p>　　題 目： flash網(wǎng)頁的設(shè)計與制作 </p><p>　　系 名： 信息工程系 </p><p>　　專業(yè)班級：

2、 </p><p>　　姓 名： </p><p>　　學(xué) 號： </p><p>　　指導(dǎo)教師: </

3、p><p>　　2012年 12 月 29日</p><p><b>　　課程設(shè)計任務(wù)書</b></p><p>　　學(xué)生姓名： 專業(yè)班級： </p><p>　　指導(dǎo)教師： 工作單位： 信息工程系 <

4、/p><p>　　設(shè)計題目：**flash網(wǎng)頁的設(shè)計與制作</p><p><b>　　初始條件：</b></p><p>　　要求較全面地理解、掌握和綜合運(yùn)用所學(xué)的多媒體方面的理論知識，會用photoshop進(jìn)行圖片處理，會用flash制作簡單動畫，以及用flash協(xié)助制作網(wǎng)頁，美化頁面。</p><p>　　要求完成的主

5、要任務(wù)：</p><p>　　用flash協(xié)助設(shè)計與制作網(wǎng)頁，以及相關(guān)文檔的制作。要求有明確的主題，內(nèi)容健康向上，不允許單純的圖片堆積，互動性強(qiáng)，聲形并茂，有較強(qiáng)的動態(tài)的視覺特效。</p><p><b>　　主要任務(wù)：</b></p><p>　　1. 完成整個網(wǎng)頁的設(shè)計及制作；經(jīng)教師檢查及答辯；</p><p>　　

6、2. 寫出規(guī)范的課程設(shè)計說明書，課程設(shè)計報告采取統(tǒng)一格式；詳細(xì)敘述設(shè)計的主要內(nèi)容以及設(shè)計的具體思路，在報告中要有個人總結(jié)和心得。</p><p>　　3. 課程設(shè)計結(jié)束后交設(shè)計說明書等文檔，設(shè)計作品以姓名命名，并以班集體為單位刻盤。</p><p>　　4. 文檔雷同者按不及格處理；</p><p>　　設(shè)計報告撰寫格式要求：   &#

7、160; </p><p>　　要求層次清楚、整潔規(guī)范、不得相互抄襲，凡正文內(nèi)容有整段完全相同者一律以抄襲論處。設(shè)計報告正文字?jǐn)?shù)不少于0.2萬字（不包括附錄）。</p><p>　　第1級（章）題序和題名用黑體三號字，第2級（目）題序和題名用黑體小四號字，第3級（條）題序和題名用黑體小四號字，正文內(nèi)容用宋體五號字(英文用新羅馬體)，多倍行距1.25。報告內(nèi)容一律使用A4打印紙計算機(jī)打印，頁

8、碼在頁下居中標(biāo)明。必須使用國家公布的規(guī)范字。</p><p>　　頁面設(shè)置：上空2.5 cm，下空2.0 cm，左空2.5 cm，右空2.0cm（左裝訂）。</p><p>　　插圖圖面要整齊、美觀，插圖應(yīng)與正文呼應(yīng)，不能脫節(jié)。每幅插圖應(yīng)有圖序與圖題，圖序編號要連續(xù)，圖序與圖題間空一格且要放在插圖下方居中處。</p><p><b>　　時間安排：<

9、/b></p><p>　　2012年12月29日 布置課程設(shè)計任務(wù)；講述設(shè)計目的、內(nèi)容、時間安排與本次課程設(shè)計的要求查閱資料，學(xué)生進(jìn)行分析及總體設(shè)計，理清設(shè)計思路；</p><p>　　2012年12月 30日-2013年1月 3日按設(shè)計要求，查閱資料；進(jìn)行設(shè)計及制作；</p><p>　　2013年1月 4日 提交課程設(shè)計報告及相關(guān)文檔。</p&

10、gt;<p>　　指 導(dǎo) 教 師 簽 字： 2012年 12 月 29日</p><p>　　系 主 任 簽 字： 2012年 12月 29日</p><p><b>　　一、設(shè)計目的</b></p><p>　　本課程的設(shè)計目的是通過實(shí)踐使我經(jīng)歷Aptana開發(fā)的全過程和受到一次綜合訓(xùn)

11、練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識。結(jié)合具體的開發(fā)案例，理解并初步掌握運(yùn)用Aptana可視化開發(fā)工具進(jìn)行網(wǎng)頁開發(fā)的方法；了解網(wǎng)頁設(shè)計制作過程。我本次主要是設(shè)計的“祖國六十年”為主題的網(wǎng)頁，針對祖國六十年的發(fā)展了介紹。</p><p><b>　　二、設(shè)計思想</b></p><p>　　利用Aptana制作一個關(guān)于“oppo”的網(wǎng)站，利用表格、行為、層和

12、鏈接等網(wǎng)頁設(shè)計技術(shù)設(shè)計頁面。</p><p>　　本網(wǎng)站以手機(jī)的發(fā)展為素材，主要講解了與oppo智能手機(jī)相關(guān)的內(nèi)容。</p><p>　　各網(wǎng)站鏈接示意圖如下所示： </p><p><b>　　網(wǎng)站的開發(fā)流程</b></p><p><b>　　具體步驟：</b></p><

13、p>　　（1）設(shè)計網(wǎng)站主題、內(nèi)容、結(jié)構(gòu)</p><p><b>　?。?）素材準(zhǔn)備</b></p><p><b>　　（3）創(chuàng)建站點(diǎn)</b></p><p>　?。?）創(chuàng)建網(wǎng)頁，調(diào)整網(wǎng)頁布局，添加網(wǎng)頁內(nèi)容并為網(wǎng)頁添加鏈接</p><p>　　（5）網(wǎng)站測試、預(yù)覽并發(fā)布站點(diǎn)</p>

14、<p>　　三、網(wǎng)頁詳細(xì)設(shè)計分析</p><p><b>　　1.建立布局</b></p><p>　　在這次的網(wǎng)頁設(shè)計中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Aptana是大多數(shù)人設(shè)計網(wǎng)頁的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個協(xié)調(diào)合理的頁面。</p><

15、;p>　　1.1.網(wǎng)頁中的圖像</p><p>　　1.2在網(wǎng)頁中插入圖像 </p><p>　　利用Aptana可以方便地在網(wǎng)頁中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對圖像進(jìn)行編輯。在網(wǎng)頁中加入圖像的操作非常簡單：</p><p>　　1.2.1.新建一個空白網(wǎng)頁，把光標(biāo)定位在網(wǎng)頁的開始位置。</p><p>　　

16、1.2.2.打開“工具”菜單，選擇“圖片”菜單項(xiàng)，在子菜單中選擇“來自文件”菜單項(xiàng)，或者單擊工具欄中的圖片工具圖標(biāo)，彈出一個“圖片”對話框。</p><p>　　1.2.3.在此對話框中單擊“瀏覽”按鈕，出現(xiàn)一個“選擇文件”對話框。</p><p>　　1.2.4.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁中。在網(wǎng)頁中

17、插入圖像后我們就可以對圖像的各種屬性進(jìn)行設(shè)置了。</p><p>　　2、圖像的各種屬性設(shè)置</p><p>　　2.1.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個快捷菜單，在菜單中選擇“圖片屬性”菜單項(xiàng)，出現(xiàn)一個“圖片屬性”對話框.</p><p>　　2.2.打開“外觀”選項(xiàng)卡。</p><p>　　2.2.1設(shè)定圖像邊框粗細(xì)：在“外觀”選

18、項(xiàng)卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。</p><p>　　2.2.2設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時需要將圖像和文字分開，且兩者互不影響。比如在網(wǎng)頁左邊插入一幅圖像，要求右邊的文字就像沒有圖像時可以多行輸入，這就要通過設(shè)置圖像的環(huán)繞方式來實(shí)現(xiàn)。在網(wǎng)頁中圖像的環(huán)繞方式有兩種：</p><p>　?、僮蟓h(huán)繞：圖

19、像在左邊，文本在圖像的右邊進(jìn)行環(huán)繞。</p><p>　?、谟噎h(huán)繞：圖像在右邊，文本在圖像的左邊進(jìn)行環(huán)繞。</p><p>　　在“外觀”選項(xiàng)卡的“布局”欄中打開“對齊方式”下拉列表框，選擇“左”選項(xiàng)，并單擊“確定”按鈕，圖像就被設(shè)置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設(shè)置為右環(huán)繞方式。</p><p>　　2.2.3.編輯圖像大小：在Aptana中，當(dāng)在網(wǎng)頁

20、中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動圖像邊框，可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿意的尺寸。</p><p>　　2.2.4設(shè)置圖像縮放比例：網(wǎng)頁設(shè)計的一個重要原則就是網(wǎng)頁的兼容性，對于不同的瀏覽器或者不同的分辨率，不管是800×600的窗口，還是1024

21、5;768的窗口，網(wǎng)頁都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：</p><p>　　2.2.4.1.選中網(wǎng)頁中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項(xiàng)，彈出一個“圖像屬性”對話框.</p><p>　　2.2.4.2.在“大小”欄

22、中選中“指定大小”復(fù)選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。外還可以在“外觀”選項(xiàng)卡的“水平間距”和“垂直間距”欄里進(jìn)行設(shè)置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。</p><p>　　3.怎樣編輯網(wǎng)頁中的圖像</p><p>　　在Aptan

23、a中，可以使用“圖片”工具欄中的各種工具對網(wǎng)頁中的圖像進(jìn)行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。</p><p>　　另外，為了使圖片更符合要求，我們還在photoshop中對所用的圖片進(jìn)行了處理，使得圖片看起來更加精細(xì)美觀，符合我們的主題要求。</p><p><b>　　4.使用背景圖像</b></p><p>

24、;　　使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁更美觀好看。網(wǎng)頁中使用背景圖像的具體步驟如下：</p><p>　　2.4.1.新建一個空白網(wǎng)頁。</p><p>　　2.4.2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“網(wǎng)頁屬性”，彈出“網(wǎng)頁屬性”對話框.</p><p>　　2.

25、4.3.開“背景”選項(xiàng)卡。</p><p>　　2.4.4.在“背景”選項(xiàng)卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個“選擇背景圖片”對話框。</p><p>　　2.4.5.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個“選擇文件”對話框。</p><p>　　2.4.6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊

26、“確定”按鈕。</p><p>　　這樣，所選圖片將作為整個網(wǎng)頁的背景，如果在第4步時同時選中“水印”復(fù)選框，背景圖片將顯示為特殊的水印效果，當(dāng)網(wǎng)頁滾動時，背景不動，只有網(wǎng)頁內(nèi)容滾動，產(chǎn)生一種透明層的效果，非常吸引人。</p><p><b>　　5設(shè)置鏈接</b></p><p>　　選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，

27、同時，下方的目標(biāo)屬性被激活，輸入blank設(shè)置成在新窗口中打開網(wǎng)頁。我們設(shè)置了鏈接本站點(diǎn)的網(wǎng)頁頁面，同時也連接了外網(wǎng)，使得大家訪問頁面時能夠查詢更多詳細(xì)的信息，方便用戶查詢。</p><p><b>　　網(wǎng)頁制作過程</b></p><p>　　1.創(chuàng)建oppo主頁</p><p>　　1.1在flash中用文字工具寫一句“歡迎來到oppo世界

28、”，降溫子字體放大到合適大小，改顏色為紅色，降幀數(shù)延伸到二十幀，在添加一個引導(dǎo)層，用橢圓工具畫出一個橢圓，用橡皮擦擦去橢圓的一點(diǎn)，再在第一幀的時候把編輯好的文字移動到橢圓曲線的一段，再在第二十幀的時候把文字應(yīng)橢圓曲線的另一段，再創(chuàng)建補(bǔ)間動畫，一個主頁歡迎詞就設(shè)計好了</p><p>　　最后將其導(dǎo)出到所做作業(yè)的文件夾中即可。</p><p>　　1.2按照設(shè)計編寫代碼：</p>

29、<p>　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p><p><b>　　<html ></b></p><p><b>　　<

30、head></b></p><p>　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p>　　<title>我的表格</title></p><p><b>

31、　　</head></b></p><p><b>　　<body></b></p><p><b>　　<center></b></p><p>　　<object width="98" height="2"></p

32、><p>　　<param name="movie" value="11.swf"></p><p>　　<embed src="myown_flash.swf" width="800" height="300"></p><p><b>

33、;　　</embed></b></p><p>　　<object> <br></p><p>　　<A href="enter12.html"><input type="button" value="進(jìn)入OPPO"></A></p>

34、<p><b>　　<br></b></p><p><b>　　<br></b></p><p>　　<div id="breadcrumbs"></div> </p><p>　　<div id="login-form&qu

35、ot;></p><p>　　<a href="enter14.html">注冊</a>　</p><p>　　<a href="http://user.qzone.qq.com/1095109496?ADUIN=798361863&ADSESSION=1358079649&ADTAG=CLIENT.QQ.4

36、855_FriendTip.0&ADPUBNO=26095&ptlang=2052</p><p><b>　　">登錄</a></b></p><p>　　<a href="http://user.qzone.qq.com/1095109496?ADUIN=798361863&ADSESSION=1

37、358079649&ADTAG=CLIENT.QQ.4855_FriendTip.0&ADPUBNO=26095&ptlang=2052</p><p>　　">MY OPPO</a></p><p><b>　　</div></b></p><p>　　<form acti

38、on="http://user.qzone.qq.com/1095109496?ADUIN=798361863&ADSESSION=1358079649&ADTAG=CLIENT.QQ.4855_FriendTip.0&ADPUBNO=26095&ptlang=2052</p><p><b>　　/"></b></p>

39、<p>　　<div id="search_bar"></p><p>　　<div id="search_txtpre"></div><br></p><p>　　<input type="text" id="search_txt" value

40、='搜索...' onclick='javascript:{if(this.value=="搜索..."){this.value=""}}' onfocus='javascript:{if(this.value=="搜索..."){this.value=""}}' onblur='javascript:

41、{if(this.value==""){this.value="搜索..."}}'/></p><p>　　<a href="#" class="search_btn" value="" onclick="javascript:do_dearch($('#search_txt&

42、#39;).val());"> </a><br><br></p><p>　　</div><input type="submit" value="搜 索 手 機(jī)"><br><br></p><p><b>　　</div><

43、;/b></p><p><b>　　</div></b></p><p><b>　　</form></b></p><p>　　<object width="498" height="350"></p><p>　

44、　<param name="movie" value="11.swf"></p><p>　　<embed src="11.swf" width="800" height="300"></p><p><b>　　</embed></b&g

45、t;</p><p><b>　　<object> </b></p><p><b>　　</center></b></p><p><b>　　</body></b></p><p><b>　　</html><

46、/b></p><p><b>　　1.3主頁界面圖：</b></p><p>　　創(chuàng)建oppo搜索網(wǎng)頁</p><p>　　2.1制作網(wǎng)頁幻燈片</p><p>　　首先到網(wǎng)上下載幾張精美的oppo智能手機(jī)圖片加載到flash中，按ctrl+f8創(chuàng)建一個元件，再選中一張圖片將其拖到元件中，改變其大小值為高400寬

47、550，坐標(biāo)為0 ，0.將幀數(shù)延續(xù)到30，再按ctrl+f8創(chuàng)建一個元件，重選一張圖片，將其拖到元件中，調(diào)整其大小和屬性，回到場景。新建一個圖層，把原件拖到該圖層中，延續(xù)到50幀。在新建一個元件用矩形工具畫一個矩形，寬為16，高為403，放到圖片的左端，再左下角的濾鏡，將此元件改為模糊，在第50幀的時候添加關(guān)鍵幀，再把矩形拖到足夠大，以遮住整個圖片，再在該圖層創(chuàng)建補(bǔ)間動畫。在新建一個圖層，在第20幀的時候添加幀，按f9編寫代碼：p2.s

48、etMask(pu2);將圖層2的矩形元件遮罩圖層2的圖片。再將圖層1和圖層2 延續(xù)到80幀,</p><p>　　在第50幀的時候插入關(guān)鍵幀按ctrl+f8創(chuàng)建新元件，在選擇一張圖片，改變其大小和屬性，將幀數(shù)延續(xù)到80幀。再在圖層3第50幀的時候插入關(guān)鍵幀按ctrl+f8新建元件，用橢圓工具化一個小橢圓，再回到場景1中,在50幀時候?qū)⑺ǖ脑系街虚g,用任意變形工具將其變小,放到最中間,再將幀數(shù)延續(xù)到80幀,

49、在第80幀的時候?qū)E圓元件放大到遮住整個圖片,再創(chuàng)建補(bǔ)間動畫,在圖層4的第50幀的時候按f9，編入代碼p3.setMask(pu1);將圖層3的圖片遮罩圖層2的圖片,這樣就完成了最終效果:</p><p>　　2.2編寫標(biāo)題：“歡迎來到oppo的世界”，在創(chuàng)建搜索欄，添加圖片按鈕，設(shè)計界面如下：</p><p><b>　　創(chuàng)建第3 頁</b></p>

50、<p>　　對“版權(quán)表格”的操作：在屬性面板中設(shè)置其單元格水平對齊方式為“居中對齊”在菜單欄中選擇“插入”|“HTML”|“水平線”插入一條水平線。輸入文本“版權(quán)所有青島大學(xué)軟件技術(shù)學(xué)院”“更新日期”，設(shè)置其大小為12px,顏色為#003300。將光標(biāo)定位于文本“版權(quán)所有”后，在菜單欄中選擇“插入”|“HTML”|“特殊字符”|“版權(quán)”插入版權(quán)符號，將光標(biāo)定位于文本“更新日期”后，，在菜單欄中選擇“插入”|“日期”當(dāng)前日期。&

51、lt;/p><p>　　對“導(dǎo)航表格”的操作：選中導(dǎo)航表格，在“屬性”面板中設(shè)置其屬性，寬設(shè)為100%，高設(shè)為120px，對齊方式為居中對齊，類選擇“.table1”,邊框?yàn)?，背景顏色為#339900。選中第1行五個單元格，在“屬性”面板中選擇“合并單元格”按鈕，將單元格合并，將光標(biāo)定位于“導(dǎo)航表格”第一行，選擇插入面板組中的“常用”|“圖像”按鈕，插入圖片“導(dǎo)航.jpg”，單擊圖片，在 “屬性”面板中單擊編輯中的

52、“裁剪”按鈕對圖片進(jìn)行裁剪，裁剪完成后，將圖片的寬設(shè)置為100%，高設(shè)置為120px。</p><p>　　用此方法在開頭位置編寫單行表格第一格放”oppo”首頁圖片,第二格放”首頁”圖片,第三、第四、第五格分別放“商城”、“手機(jī)”、“服務(wù)”圖片作為一行選擇菜單：</p><p>　　編寫代碼作為連接到oppo官網(wǎng):</p><p>　　<TABLE widt

53、h="550" border="0"></p><p><b>　　<TR></b></p><p>　　<TD> <A href="http://www.oppo.com/userfiles/images/201212/20121212185218_rQviJe.jpg"

54、 width='990px' height='479px'/"><img src="images/QQ截圖1.jpg""></A></TD></p><p>　　<TD> <A href="http://www.oppo.com"><img src=&

55、quot;images/QQ截圖2.jpg""></A></TD></p><p>　　<TD> <A href="http://http://store.opposhop.com.cn"><img src="images/QQ截圖3.jpg""></A></T

56、D></p><p>　　<TD> <A href="http://www.oppo.com/?q=mobile"><img src="images/QQ截圖4.jpg""></A></TD></p><p>　　<TD> <A href="htt

57、p://www.oppo.com/?q=service"><img src="images/QQ截圖5.jpg""></A></TD></p><p><b>　　</TR></b></p><p><b>　　</TABLE></b><

58、;/p><p>　　在選擇幾張oppo手機(jī)作為該頁的動態(tài)播放圖片,最終設(shè)計代碼如下</p><p>　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p><p><b>

59、　　<html ></b></p><p><b>　　<head></b></p><p>　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p>　　

60、<title>我的作業(yè)</title></p><p><b>　　</head></b></p><p><b>　　<body></b></p><p><b>　　<center></b></p><p>　　&

61、lt;TABLE width="550" border="0"></p><p><b>　　<TR></b></p><p>　　<TD> <A href="http://www.oppo.com/userfiles/images/201212/20121212185218_rQv

62、iJe.jpg" width='990px' height='479px'/"><img src="images/QQ截圖1.jpg""></A></TD></p><p>　　<TD> <A href="http://www.oppo.com">

63、<img src="images/QQ截圖2.jpg""></A></TD></p><p>　　<TD> <A href="http://http://store.opposhop.com.cn"><img src="images/QQ截圖3.jpg""><

64、;/A></TD></p><p>　　<TD> <A href="http://www.oppo.com/?q=mobile"><img src="images/QQ截圖4.jpg""></A></TD></p><p>　　<TD> <A h

65、ref="http://www.oppo.com/?q=service"><img src="images/QQ截圖5.jpg""></A></TD></p><p><b>　　</TR></b></p><p><b>　　</TABLE>

66、</b></p><p>　　<a href="enter14.html"><font size="50px">我要購買</a></center></p><p>　　<marquee onmouseover="stop()" onmouseout="st

67、art()"></p><p>　　<img src="oppo/12[1].jpg"></a></li> </p><p>　　<img src="oppo/13[1].jpg"></a></li>

68、 </p><p>　　<img src="oppo/14[1].jpg"></a></li> </p><p>　　<img src="oppo/15[1].jpg"></a></li> </p>

69、;<p>　　<img src="oppo/16[1].jpg"></a></li></p><p>　　</marquee> </p><p><b>　　</body></b></p><p><b>　　</html&

70、gt;</b></p><p><b>　　最終視圖效果如下:</b></p><p>　　創(chuàng)建第4頁(注冊頁)</p><p>　　選一張oppo手機(jī)圖片放到該作業(yè)的文件夾中,編寫背景代碼:</p><p>　　<body background="oppo/16[1].jpg"&g

71、t; 將這張圖片充斥整個頁面;在排版注冊表的樣式,排版如圖所示:</p><p>　　”姓名”類為普通輸入框,樣式代碼為<input type="text" name="user">;密碼輸入框?yàn)樘厥廨斎肟?輸入的密碼值要不可見,樣式代碼為:</p><p>　　</font><input type="pass

72、word"name="user"></p><p>　　;”性別”為單選框,屬性值為“男、女”</p><p>　　</font><input type="radio" name="sex" value="男"checked>其中“checked”為默認(rèn)值“男”；“您的

73、住址”為多選框代碼值為:</p><p>　　<input type="checkbox">;“上傳”控件需啊喲上傳的是整個表格的信息，故需要將該頁代碼打包成塊，運(yùn)用到代碼：</p><p>　　<form action="http://user.qzone.qq.com/1095109496?ADUIN=798361863&ADSE

74、SSION=1358079649&ADTAG=CLIENT.QQ.4855_FriendTip.0&ADPUBNO=26095&ptlang=2052</p><p>　　">……</form>，其中“<form action”后為鏈接的網(wǎng)頁;再就是“注冊”、“重置”、“普通”按鈕，其分別得控件代碼為， <input type="submi

75、t"value="注 冊">、<input type="reset" value="重 置"> <input type="button" value="普 通">和隱藏按鈕:<input type="hidden"></p><p>

76、;<b>　　最終代碼為:</b></p><p>　　<body background="oppo/16[1].jpg"> </p><p><b>　　<br></b></p><p><b>　　<br></b></p>&

77、lt;p><b>　　<br></b></p><p>　　<!--表單元素一定要放在表單中才能發(fā)揮作用--><br></p><p><b>　　<center></b></p><p>　　<form action="http://user.qzon

78、e.qq.com/1095109496?ADUIN=798361863&ADSESSION=1358079649&ADTAG=CLIENT.QQ.4855_FriendTip.0&ADPUBNO=26095&ptlang=2052</p><p><b>　　"></b></p><p>　　<font color

79、="red">姓名：</font><input type="text" name="user"><br><br></p><p>　　<font color="red">密碼：</font><input type="password"

80、;name="user"><br><br></p><p>　　<font color="red">性別：</font><input type="radio" name="sex" value="男"checked><font color=&

81、quot;red">男</font><br><br></p><p>　　<input type="radio" name="sex" value="女"checked><font color="red">女</font><br><

82、;br></p><p>　　<font color="red">您的住址：</font><input type="checkbox"><font color="red">江南</font><br><br></p><p>　　<inp

83、ut type="checkbox"><font color="red">北京</font><br><br></p><p>　　<input type="checkbox"><font color="red">上海</font><br&g

84、t;<br></p><p>　　上傳：<input type="file"><br><br></p><p>　　<input type="submit"value="注 冊"><br><br></p><p>　　&

85、lt;input type="reset" value="重 置"><br><br></p><p>　　<input type="button" value="普 通"><br><br></p><p>　　<input type=

86、"image" src="images/right_daohang1.jpg"><br><br></p><p>　　<input type="hidden"><br><br></p><p><b>　　</form></b>&l

87、t;/p><p><b>　　</center></b></p><p><b>　　最終效果圖為:</b></p><p><b>　　5.完善鏈接</b></p><p>　　網(wǎng)頁創(chuàng)建完成后，即可完善鏈接。更新模板“歡迎來到oppo的世界”的鏈接，可更新部分二級頁面

88、“手機(jī)搜索”“我要購買”“登記注冊”的鏈接。而三級頁面的鏈接在模板中即可實(shí)現(xiàn)。</p><p><b>　　五、總結(jié)</b></p><p>　　通過這次網(wǎng)頁課程設(shè)計激發(fā)學(xué)習(xí)興趣，調(diào)動學(xué)習(xí)的自覺性，自己動腦、動手，動口，運(yùn)用網(wǎng)絡(luò)資源，結(jié)合教材及老師的指導(dǎo)，通過自身的實(shí)踐，創(chuàng)作出積聚個人風(fēng)格、個性的個人網(wǎng)頁?？傮w來說，整個學(xué)期的學(xué)習(xí)過程，我學(xué)會了很多知識，</p&

89、gt;<p>　　在此次網(wǎng)頁設(shè)計中，我充分利用了這次設(shè)計的機(jī)會，全心全意投入到網(wǎng)頁世界，去不斷的學(xué)習(xí)，去不斷的探索；同時去不斷的充實(shí)，去不斷的完善自我，在網(wǎng)絡(luò)的天空下逐漸的美化自己的人生！</p><p>　　做好頁面，并不是一件容易的事，它包括個人主頁的選題、內(nèi)容采集整理、圖片的處理、頁面的排版設(shè)置、背景及其整套網(wǎng)頁的色調(diào)等很多東西。本次課程設(shè)計不是很好，頁面過于簡單，創(chuàng)新意識反面薄弱，這是我需要

90、提高的地方。需要學(xué)的地方還有很多，需要有耐心、堅持，不斷的學(xué)習(xí)，綜合運(yùn)用多種知識，才能設(shè)計出好的web頁面。</p><p>　　總體來說，通過這次的對網(wǎng)頁課程設(shè)計，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁設(shè)計的大門，只要我再認(rèn)真努力的去學(xué)習(xí)，去提高，憑借我對網(wǎng)頁設(shè)計的熱情和執(zhí)著，我將來設(shè)計出的網(wǎng)頁會更加專業(yè)，更完善。</p><p>　　“書到用時方恨少”，從這次實(shí)訓(xùn)當(dāng)中我深

91、刻的體會到理論知識的重要性，理論結(jié)合實(shí)際才能將知識掌握牢固。為了使自己的網(wǎng)頁風(fēng)格統(tǒng)一，是自己在設(shè)計過程中更加省時省力，我使用了較多的模板，這使我的工作效率大大提高。在設(shè)計的過程中遇到了很多問題，有些知識理解得不夠深刻，掌握得不夠牢固，操作不夠熟練，沒有能完全達(dá)到自己預(yù)期的效果，還好通過老師的細(xì)心指導(dǎo)和同學(xué)們的幫助才能達(dá)到最終效果。 </p><p>　　實(shí)訓(xùn)期間上網(wǎng)查看了一些知名的網(wǎng)站開發(fā)出的網(wǎng)頁，不僅欄目內(nèi)容豐

92、富，信息量大，而且頁面圖文并茂，五彩繽紛，使得網(wǎng)民贊嘆不已，流連忘返。當(dāng)前的軟件的功能日趨復(fù)雜，不學(xué)到一定的深度和廣度是難以在實(shí)際工作中應(yīng)付自如的。因此反映出自己學(xué)習(xí)的還不夠，存在許多缺點(diǎn)疏漏，需要更加刻苦鉆研及學(xué)習(xí)，不斷開拓視野，增強(qiáng)自己的實(shí)踐操作技能，為以后能做出出色的網(wǎng)頁而努力。</p><p>　　實(shí)訓(xùn)將要結(jié)束，其中的酸甜苦辣我會在今后的日子里不斷地去咀嚼，去回味，去探索。從制作網(wǎng)頁過程中，我學(xué)到了新的美

93、化網(wǎng)頁的方法，運(yùn)用了更多以前未運(yùn)用的技巧。這使我學(xué)到了更多的知識，不僅可以鞏固了以前所學(xué)過的知識，而且學(xué)到了很多在書本上所沒有學(xué)到過的知識，為我自己在制作網(wǎng)頁這方面積累了一些經(jīng)驗(yàn)。通過這次課程設(shè)計使我懂得了理論與實(shí)際相結(jié)合是很重要的，只有理論知識是遠(yuǎn)遠(yuǎn)不夠的，只有把所學(xué)的理論知識與實(shí)踐相結(jié)合起來，從理論中得出結(jié)論，才能真正為掌握技術(shù)，從而提高自己的實(shí)際動手能力和獨(dú)立思考的能力。</p><p><b>

94、　　參考文獻(xiàn)</b></p><p>　　1．葛艷玲.網(wǎng)頁制作基礎(chǔ)教程（Dreamweaver 8.0）.電子工業(yè)出版社.2009年9月第2版</p><p>　　2. 馬憲敏. Dreamweaver 8基礎(chǔ)與實(shí)例教程.中國水利水電出版社.</p><p>　　3. 佩奇. Dreamweaver 8網(wǎng)頁設(shè)計標(biāo)準(zhǔn)教程.電子工業(yè)出版社. </p&g