一、實(shí)驗(yàn)?zāi)康暮鸵?/p>

掌握Dreamweaver 8.0在網(wǎng)頁(yè)設(shè)計(jì)制作中的運(yùn)用，學(xué)習(xí)一些網(wǎng)頁(yè)制作的基本技術(shù)，學(xué)會(huì)Dreamweaver8.0中所提供的層、框架、模板和庫(kù)、表單、層疊樣式表、行為等各種網(wǎng)頁(yè)元素的功能和使用方法，對(duì)Dreamweaver8.0的高級(jí)使用有一個(gè)全面的認(rèn)識(shí)。

二、實(shí)驗(yàn)環(huán)境（所使用的平臺(tái)和相關(guān)軟件）

PC機(jī)1臺(tái)、Photoshopcs3以上、dreamweavercs3以上、flashcs3以上

三、實(shí)驗(yàn)內(nèi)容（實(shí)驗(yàn)內(nèi)容的具體描述）

?上海，簡(jiǎn)稱“滬”或“申”，是中華人民共和國(guó)直轄市，國(guó)家中心城市，超大城市，中國(guó)的經(jīng)濟(jì)、交通、科技、工業(yè)、金融、貿(mào)易、會(huì)展和航運(yùn)中心，首批沿海開放城市。 地處長(zhǎng)江入?？冢魱|中國(guó)海與日本九州島相望，南瀕杭州灣，北、西與江蘇、浙江兩省相接。春秋戰(zhàn)國(guó)時(shí)期，上海是楚國(guó)春申君黃歇的封邑，故上海別稱申。四、五世紀(jì) 的晉朝時(shí)期，因漁民創(chuàng)造捕魚工具“扈”，江流入海處稱“瀆”，因此松江下游一帶被稱為“扈瀆”，以后又改“滬”，故上海簡(jiǎn)稱滬。 唐天寶年間始有縣制。宋代始有 “上?！敝Ｔ荚O(shè)上?？h，標(biāo)志著上海建城之始。上海是國(guó)家歷史文化名城，擁有深厚的近代城市文化底蘊(yùn)和眾多歷史古跡。江南吳越文化與西方傳入的工業(yè)文化相 融合形成上海特有的海派文化。1843年后上海成為對(duì)外開放的商埠并迅速發(fā)展成為遠(yuǎn)東第一大城市。今日的上海已經(jīng)成功舉辦了2010年世界博覽會(huì)、中國(guó)上海國(guó)際藝術(shù)節(jié)、 上海國(guó)際電影節(jié)等大型國(guó)際活動(dòng)。上海市總面積6340平方公里，轄16個(gè)市轄區(qū)，屬亞熱帶濕潤(rùn)季風(fēng)氣候，四季分明，日照充分，雨量充沛。

2015年，上海GDP居中國(guó)城市第一位，亞洲城市第二位，僅次于日本東京。上海亦是全球著名的的金融中心，世界上人口規(guī)模和面積最大的都會(huì)區(qū)之一，以上海為中心城市的 長(zhǎng)三角城市群已成為全球6大世界級(jí)城市群之一。上海港貨物吞吐量和集裝箱吞吐量均居世界第一，是一個(gè)良好的濱江濱海國(guó)際性港口。上海也是中國(guó)大陸首個(gè)自貿(mào)區(qū)中國(guó)（上海） 自由貿(mào)易試驗(yàn)區(qū)所在地。

截至2018年末，上海市常住人口總數(shù)為2423.78萬人。實(shí)現(xiàn)地區(qū)生產(chǎn)總值（GDP）32679.87億元，比上年增長(zhǎng)6.6%。

四、實(shí)驗(yàn)步驟（設(shè)計(jì)思想和實(shí)現(xiàn)步驟）

一)建立布局

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

1.點(diǎn)擊“ALT+F6”鍵，進(jìn)入布局模式，插入布局表格。建立一個(gè)大概的布局。

2.使用背景圖片：選中該項(xiàng)，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景，因?yàn)閳D片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。

（二）網(wǎng)頁(yè)中的圖像

圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點(diǎn)：一是直觀，人眼觀看圖像時(shí)接受信息的速度遠(yuǎn)遠(yuǎn)超過觀看文字時(shí)接受信息的速度；二是能更清楚地表達(dá)細(xì)節(jié)內(nèi)容。正是由于這些優(yōu)點(diǎn)，所以在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)圖像很受歡迎。如果網(wǎng)頁(yè)做得像一幅風(fēng)景畫，瀏覽者一定會(huì)流連忘返（如果圖片很大，效果會(huì)適得其反）。圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現(xiàn)在Internet?

Explorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。

（1）在網(wǎng)頁(yè)中插入圖像

利用Dreamweaver cs3可以方便地在網(wǎng)頁(yè)中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對(duì)圖像進(jìn)行編輯。在網(wǎng)頁(yè)中加入圖像的操作非常簡(jiǎn)單：

1.新建一個(gè)空白網(wǎng)頁(yè)，把光標(biāo)定位在網(wǎng)頁(yè)的開始位置。

2.打開“工具”菜單，選擇“圖片”菜單項(xiàng)，在子菜單中選擇“來自文件”菜單項(xiàng)，或者單擊工具欄中的圖片工具圖標(biāo)，彈出一個(gè)“圖片”對(duì)話框。

3.在此對(duì)話框中單擊“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話框。

4.在“選擇文件”對(duì)話框的文件列表中選擇某個(gè)圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中插入圖像后我們就可以對(duì)圖像的各種屬性進(jìn)行設(shè)置了。

（2）圖像的各種屬性設(shè)置

1.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個(gè)快捷菜單，在菜單中選擇“圖片屬性”菜單項(xiàng)，出現(xiàn)一個(gè)“圖片屬性”對(duì)話框.?

2.打開“外觀”選項(xiàng)卡。

(1)設(shè)定圖像邊框粗細(xì)：在“外觀”選項(xiàng)卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。

(2)設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時(shí)需要將圖像和文字分開，且兩者互不影響。比如在網(wǎng)頁(yè)左邊插入一幅圖像，要求右邊的文字就像沒有圖像時(shí)可以多行輸入，這就要通過設(shè)置圖像的環(huán)繞方式來實(shí)現(xiàn)。在網(wǎng)頁(yè)中圖像的環(huán)繞方式有兩種：

①左環(huán)繞：圖像在左邊，文本在圖像的右邊進(jìn)行環(huán)繞。

②右環(huán)繞：圖像在右邊，文本在圖像的左邊進(jìn)行環(huán)繞。

在“外觀”選項(xiàng)卡的“布局”欄中打開“對(duì)齊方式”下拉列表框，選擇“左”選項(xiàng)，并單擊“確定”按鈕，圖像就被設(shè)置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設(shè)置為右環(huán)繞方式。

(3)編輯圖像大小：在Dreamweaver cs3中，當(dāng)在網(wǎng)頁(yè)中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡(jiǎn)單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動(dòng)圖像邊框，可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿意的尺寸。

(4)設(shè)置圖像縮放比例：網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)重要原則就是網(wǎng)頁(yè)的兼容性，對(duì)于不同的瀏覽器或者不同的分辨率，不管是800×600的窗口，還是1024×768的窗口，網(wǎng)頁(yè)都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：

1.選中網(wǎng)頁(yè)中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項(xiàng)，彈出一個(gè)“圖像屬性”對(duì)話框.?

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

（3）怎樣編輯網(wǎng)頁(yè)中的圖像

在Dreamweaver cs3中，可以使用“圖片”工具欄中的各種工具對(duì)網(wǎng)頁(yè)中的圖像進(jìn)行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。

另外，為了使圖片更符合要求，我們還在photoshop ?cs3中隊(duì)所用的圖片進(jìn)行了處理，使得圖片看起來更加精細(xì)美觀，符合我們的主題要求。

（4）使用背景圖像

使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁(yè)的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁(yè)的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁(yè)更美觀好看。網(wǎng)頁(yè)中使用背景圖像的具體步驟如下：

1.新建一個(gè)空白網(wǎng)頁(yè)。

2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“網(wǎng)頁(yè)屬性”，彈出“網(wǎng)頁(yè)屬性”對(duì)話框.?

3.開“背景”選項(xiàng)卡。

4.在“背景”選項(xiàng)卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇背景圖片”對(duì)話框。

5.在“選擇背景圖像”對(duì)話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話框。

6.在“選擇文件”對(duì)話框的文件列表中選擇圖像文件，單擊“確定”按鈕。

這樣，所選圖片將作為整個(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)生一種透明層的效果，非常吸引人。

（5）插入flash動(dòng)畫

關(guān)于 Flash 視頻使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Flash?

視頻內(nèi)容插入 Web 頁(yè)面，而無需使用 Flash 創(chuàng)作工具。該命令可以插入 Flash 組件；當(dāng)您在瀏覽器中查看它時(shí)，它顯示所選擇的 Flash 視頻內(nèi)容以及一組播放控件。

（6）設(shè)置鼠標(biāo)經(jīng)過圖片，進(jìn)行圖片交互

再插入圖片的下拉菜單中有一項(xiàng)是“鼠標(biāo)經(jīng)過”，點(diǎn)擊這一項(xiàng)，會(huì)彈出一個(gè)對(duì)話框，在對(duì)話框中可以設(shè)置鼠標(biāo)經(jīng)過前的圖片和經(jīng)過時(shí)的圖片，選擇“確定”即可。

五、實(shí)驗(yàn)結(jié)果

1. 首頁(yè)

.2. 景點(diǎn)介紹

3. 風(fēng)景欣賞

4. 美食推薦

5. 在線留言

六、實(shí)驗(yàn)心得

一.充分發(fā)揮了動(dòng)手能力

　　作為網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者，我對(duì)網(wǎng)頁(yè)設(shè)計(jì)非常感興趣，一心想設(shè)計(jì)出一個(gè)美觀、實(shí)用、內(nèi)容豐富的個(gè)人網(wǎng)頁(yè)。本學(xué)期的教改方案由以前學(xué)生單純接受知識(shí)變?yōu)橹鲃?dòng)參與教學(xué)活動(dòng)。在這樣的壓力和動(dòng)力下，通過自己動(dòng)手、動(dòng)腦，通過網(wǎng)絡(luò)資源，老師的指導(dǎo)，在不斷發(fā)現(xiàn)問題和解決問題的過程中學(xué)到了很多知識(shí)，也增強(qiáng)了我的創(chuàng)作能力和動(dòng)手能力，在網(wǎng)頁(yè)設(shè)計(jì)過程中，從構(gòu)思到設(shè)計(jì)、完善、維護(hù)，整個(gè)過程我都全身心投入，使我真正學(xué)到了網(wǎng)頁(yè)設(shè)計(jì)的知識(shí)。

　　二.在設(shè)計(jì)過程中不斷提高了網(wǎng)頁(yè)設(shè)計(jì)水平

　　在本次網(wǎng)頁(yè)設(shè)計(jì)中，我不僅學(xué)到了很多關(guān)于網(wǎng)頁(yè)設(shè)計(jì)方面的知識(shí)，也從中學(xué)會(huì)了關(guān)于網(wǎng)絡(luò)、編程等方面的知識(shí)。我從最初開始運(yùn)用FrontPage設(shè)計(jì)網(wǎng)頁(yè)，到后來運(yùn)用Dreamweaver、Flash、Fireworks等網(wǎng)軟件設(shè)計(jì)網(wǎng)頁(yè)，完善網(wǎng)頁(yè)。在這個(gè)過程中，我通過自學(xué)教材、上網(wǎng)查詢，學(xué)習(xí)了Dreamweaver、Flash、Fireworks等網(wǎng)頁(yè)軟件的應(yīng)用，學(xué)會(huì)了管理、維護(hù)自己的站點(diǎn)，以及一些簡(jiǎn)單動(dòng)畫、控件的制作等等。在設(shè)計(jì)過程中也出現(xiàn)了很多的問題，但通過看書，上網(wǎng)查詢，請(qǐng)教老師等方式，不斷的學(xué)習(xí)、解決、提高，設(shè)計(jì)出的網(wǎng)頁(yè)不論是外觀還是內(nèi)容，都在不斷地進(jìn)步、改善?？梢哉f在自己動(dòng)手，不斷實(shí)踐的過程中，網(wǎng)頁(yè)設(shè)計(jì)水平得到了很大的提高。

獲取源碼可以私信我哦~