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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28、”，降溫子字體放大到合適大小，改顏色為紅色，降幀數(shù)延伸到二十幀，在添加一個(gè)引導(dǎo)層，用橢圓工具畫(huà)出一個(gè)橢圓，用橡皮擦擦去橢圓的一點(diǎn)，再在第一幀的時(shí)候把編輯好的文字移動(dòng)到橢圓曲線的一段，再在第二十幀的時(shí)候把文字應(yīng)橢圓曲線的另一段，再創(chuàng)建補(bǔ)間動(dòng)畫(huà)，一個(gè)主頁(yè)歡迎詞就設(shè)計(jì)好了</p><p>　　最后將其導(dǎo)出到所做作業(yè)的文件夾中即可。</p><p>　　1.2按照設(shè)計(jì)編寫(xiě)代碼：</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">注冊(cè)</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主頁(yè)界面圖：</b></p><p>　　創(chuàng)建oppo搜索網(wǎng)頁(yè)</p><p>　　2.1制作網(wǎng)頁(yè)幻燈片</p><p>　　首先到網(wǎng)上下載幾張精美的oppo智能手機(jī)圖片加載到flash中，按ctrl+f8創(chuàng)建一個(gè)元件，再選中一張圖片將其拖到元件中，改變其大小值為高400寬

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

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

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

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

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

52、“裁剪”按鈕對(duì)圖片進(jìn)行裁剪，裁剪完成后，將圖片的寬設(shè)置為100%，高設(shè)置為120px。</p><p>　　用此方法在開(kāi)頭位置編寫(xiě)單行表格第一格放”oppo”首頁(yè)圖片,第二格放”首頁(yè)”圖片,第三、第四、第五格分別放“商城”、“手機(jī)”、“服務(wù)”圖片作為一行選擇菜單：</p><p>　　編寫(xiě)代碼作為連接到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ī)作為該頁(yè)的動(dòng)態(tài)播放圖片,最終設(shè)計(jì)代碼如下</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">我要購(gòu)買(mǎi)</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頁(yè)(注冊(cè)頁(yè))</p><p>　　選一張oppo手機(jī)圖片放到該作業(yè)的文件夾中,編寫(xiě)背景代碼:</p><p>　　<body background="oppo/16[1].jpg"&g

71、t; 將這張圖片充斥整個(gè)頁(yè)面;在排版注冊(cè)表的樣式,排版如圖所示:</p><p>　　”姓名”類(lèi)為普通輸入框,樣式代碼為<input type="text" name="user">;密碼輸入框?yàn)樘厥廨斎肟?輸入的密碼值要不可見(jià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">;“上傳”控件需啊喲上傳的是整個(gè)表格的信息，故需要將該頁(yè)代碼打包成塊，運(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)頁(yè);再就是“注冊(cè)”、“重置”、“普通”按鈕，其分別得控件代碼為， <input type="submi

75、t"value="注 冊(cè)">、<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="注 冊(cè)"><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)頁(yè)創(chuàng)建完成后，即可完善鏈接。更新模板“歡迎來(lái)到oppo的世界”的鏈接，可更新部分二級(jí)頁(yè)面

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

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

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

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

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

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

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