網頁制作課程設計總結闡述該網站的設計意圖和創意，簡潔介紹網站。

2.設計思想

闡述網站的整體設計思想，包括：

2.1網站整體結構規劃思想

要求闡述網站整體結構的選擇、設計的思想，繪制網站結構草圖。

2.2主頁設計思想

要求對主頁的布局思路進行闡述和分析。

2.3子頁的設計思想

要求對子頁的設計以及網頁對象的選取思路進行闡述和分析。

3網頁具體設計分析

要求選取一張網頁，對網頁的設計實現過程進行闡述和分析，具體說明制作該網頁的步驟，所使用的網頁對象以及該網頁對象的操作方法。

4結論

對整個設計報告做歸納性總結，并分析設計過程中的困難及如何解決的，最終提出展望。

一、設計目的

本課程的設計目的是通過實踐使同學們經受Dreamweaver8開發的全過程和受到一次綜合訓練，以便能較全面地理解、把握和綜合運用所學的學問。結合詳細的開發案例，理解并初步把握運用Dreamweaver8可視化開發工具進行網頁開發的方法;了解網頁設計制作過程。通過設計達到把握網頁設計、制作的技巧。了解和熟識網頁設計的基礎學問和實現技巧。依據題目的要求，給出網頁設計方案，可以按要求，利用合適圖文素材設計制作符合要求的網頁設計作品。嫻熟把握Photoshop8、Dreamweaver8等軟件的的操作和應用。增加動手實踐力量，進一步加強自身綜合素養。我本次主要是設計的一"新加坡之旅'為主題的網頁，針對新加坡的漂亮風景做了介紹。

二、設計思想

利用Dreamweaver8.0制作一個關于"新加坡之旅'的網站，利用表格、行為、層和鏈接等網頁設計技術設計頁面。

本網站以新加坡旅游為素材，主要講解了與新加坡景點相關的內容。首頁設風景介紹和風景觀賞兩個欄目。景點介紹設7個欄目，風景觀賞只含一個頁面。

三、網頁具體設計分析

(一)建立布局

在這次的網頁設計中用到大量的布局，所以怎么樣建立布局是關鍵。Dreamweaver8是大多數人設計網頁的稱手兵器，也是眾多入門者的捷徑。特殊是其在布局方面的精彩表現，更受青睞。大家都知道，沒有表格的關心，很難組織出一個協調合理的頁面。

1.點擊"ALT+F6'鍵，進入布局模式，插入布局表格。建立一個也許的布局。

2.使用背景圖片：選中該項，按掃瞄可以插入一幅預備好的圖片作為表格的背景，由于圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要掌握好。

(二)網頁中的圖像

圖像傳輸是的真正魅力所在，它與文字相比具有顯著的優點：一是直觀，人眼觀看圖像時接受信息的速度遠遠超過觀看文字時接受信息的速度;二是能更清晰地表達細節內容。正是由于這些優點，所以在進行網頁設計時圖像很受歡迎。假如網頁做得像一幅風景畫，掃瞄者肯定會流連忘返(假如圖片很大，效果會適得其反)。圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現在InternetExplorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。

(1)在網頁中插入圖像

利用Dreamweaver8可以便利地在網頁中插入圖像，還可以設置圖像邊框、大小、和位置，并且可以直接對圖像進行編輯。在網頁中加入圖像的操作特別簡潔：

1.新建一個空白網頁，把光標定位在網頁的開頭位置。

2.打開"工具'菜單，選擇"圖片'菜單項，在子菜單中選擇"來自文件'菜單項，或者單擊工具欄中的圖片工具圖標，彈出一個"圖片'對話框。

3.在此對話框中單擊"掃瞄'按鈕，消失一個"選擇文件'對話框。

4.在"選擇文件'對話框的文件列表中選擇某個圖像文件，然后單擊"確定'按鈕，或直接雙擊該圖像文件，該圖像即被加入到網頁中。在網頁中插入圖像后我們就可以對圖像的各種屬性進行設置了。

(2)圖像的各種屬性設置

1.選中所插入的圖片，單擊鼠標右鍵，彈出一個快捷菜單，在菜單中選擇"圖片屬性'菜單項，消失一個"圖片屬性'對話框.

2.打開"外觀'選項卡。

(1)設定圖像邊框粗細：在"外觀'選項卡的"布局'欄里可以依據需要定義圖像的邊框，也可以定義邊框值為"0'，即無邊框。

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

①左環繞：圖像在左邊，文本在圖像的右邊進行環繞。

②右環繞：圖像在右邊，文本在圖像的左邊進行環繞。

在"外觀'選項卡的"布局'欄中打開"對齊方式'下拉列表框，選擇"左'選項，并單擊"確定'按鈕，圖像就被設置為左環繞方式，同樣，假如選"右'，圖像就被設置為右環繞方式。

(3)編輯圖像大小：在Dreamweaver8中，當在網頁中加入一幅圖像后，圖像大小默認設置為其原來的大小，假如加入的圖像太大或太小，或有其他特殊需要，就得調整圖像的大小。調整圖像大小特別簡潔敏捷，只要你選中加入的圖像，用鼠標左鍵拖動圖像邊框，可任意調整圖像的寬度和高度直到達到你滿足的尺寸。

(4)設置圖像縮放比例：網頁設計的一個重要原則就是網頁的.兼容性，對于不同的掃瞄器或者不同的辨別率，不管是800600的窗口，還是1024768的窗口，網頁都要能正常的顯示。設置圖像縮放比例就是將圖像設置為大小可以按比例變化，與掃瞄器的大小成一固定比例，這樣在不同大小的掃瞄器窗口里圖像都能正常的顯示外觀。設置圖像縮放比例的步驟如下：

1.選中網頁中的圖像，單擊鼠標右鍵，在彈出的快捷菜單里，選擇"圖像屬性'菜單項，彈出一個"圖像屬性'對話框.

2.在"大小'欄中選中"指定大小'復選框，同時選中"寬度'和"高度'下面的"百分比'單選按鈕，然后在"寬度'和"高度'欄里輸入想顯示的比例，單擊"確定'完成設置。外還可以在"外觀'選項卡的"水平間距'和"垂直間距'欄里進行設置，水平間距是指圖像與四周元素在水平方向的間距，以象素為單位;垂直間距指圖像與四周元素在垂直方向的間距。

(3)怎樣編輯網頁中的圖像

在Dreamweaver8中，可以使用"圖片'工具欄中的各種工具對網頁中的圖像進行編輯，編輯功能主要有：圖像旋轉和翻轉、剪裁、圖像淡化、凹凸效果等等。

另外，為了使圖片更符合要求，我們還在photoshop8中隊所用的圖片進行了處理，使得圖片看起來更加精細美觀，符合我們的主題要求。

(4)使用背景圖像

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

1.新建一個空白網頁。

2.單擊鼠標右鍵，彈出的快捷菜單里選"網頁屬性'，彈出"網頁屬性'對話框.

3.開"背景'選項卡。

4.在"背景'選項卡的"格式'欄中選中"背景圖片'復選框，然后單擊下面的"掃瞄'按鈕，消失一個"選擇背景圖片'對話框。

5.在"選擇背景圖像'對話框中單擊"掃瞄文件'按鈕，消失一個"選擇文件'對話框。

6.在"選擇文件'對話框的文件列表中選擇圖像文件，單擊"確定'按鈕。

這樣，所選圖片將作為整個網頁的背景，假如在第4步時同時選中"水印'復選框，背景圖片將顯示為特別的水印效果，當網頁滾動時，背景不動，只有網頁內容滾動，產生一種透亮?????層的效果，特別吸引人。

(5)插入flash動畫

關于Flash視頻使用Dreamweaver中的"插入Flash視頻'命令，可將Flash視頻內容插入Web頁面，而無需使用Flash創作工具。該命令可以插入Flash組件;當您在掃瞄器中查看它時，它顯示所選擇的Flash視頻內容以及一組播放控件。

(6)設置鼠標經過圖片，進行圖片交互

再插入圖片的下拉菜單中有一項是"鼠標經過'，點擊