1.設計目的
闡述該網站的設計意圖和創意，簡單介紹網站。
2.設計思想
闡述網站的整體設計思想，包括：
2.1網站整體結構規劃思想
要求闡述網站整體結構的選擇、設計的思想，繪製網站結構草圖。
2.2 主頁設計思想
要求對主頁的佈局思路進行闡述和分析。
2.3子頁的設計思想
要求對子頁的設計以及網頁對象的選取思路進行闡述和分析。
3網頁詳細設計分析
要求選取一張網頁，對網頁的設計實現過程進行闡述和分析，詳細說明製作該網頁的步驟，所使用的網頁對象以及該網頁對象的操作方法。
4結論
對整個設計報告做歸納性總結，並分析設計過程中的困難及如何解決的，最後提出展望。
一、設計目的
本課程的設計目的是透過實踐使同學們經歷Dreamweaver 8開發的全過程和受到一次綜合訓練，以便能較全面地理解、掌握和綜合運用所學的知識。結合具體的開發案例，理解並初步掌握運用Dreamweaver 8可視化開發工具進行網頁開發的方法;瞭解網頁設計製作過程。透過設計達到掌握網頁設計、製作的技巧。瞭解和熟悉網頁設計的基礎知識和實現技巧。根據題目的要求，給出網頁設計方案，可以按要求，利用合適圖文素材設計製作符合要求的網頁設計作品。熟練掌握Photoshop 8、Dreamweaver 8等軟件的的操作和應用。增強動手實踐能力，進一步加強自身綜合素質。我本次主要是設計的一“新加坡之旅”爲主題的網頁，針對新加坡的美麗風景做了介紹。
二、設計思想
利用Dreamweaver8.0製作一個關於“新加坡之旅”的網站，利用表格、行爲、層和連結等網頁設計技術設計頁面。
本網站以新加坡旅遊爲素材，主要講解了與新加坡景點相關的內容。首頁設風景介紹和風景欣賞兩個欄目。景點介紹設7個欄目，風景欣賞只含一個頁面。
三、網頁詳細設計分析
(一)建立佈局
在這次的網頁設計中用到大量的佈局，所以怎麼樣建立佈局是關鍵。Dreamweaver 8是大多數人設計網頁的稱手兵器，也是衆多入門者的捷徑。特別是其在佈局方面的出色表現，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個協調合理的頁面。
1.點擊“ALT+F6”鍵，進入佈局模式，插入佈局表格。建立一個大概的佈局。
2.使用背景圖片：選中該項，按瀏覽可以插入一幅準備好的圖片作爲表格的背景，因爲圖片是以平鋪的形式作爲表格背景，所以表格大小和圖片尺寸都要控制好。
(二)網頁中的圖像
圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優點：一是直觀，人眼觀看圖像時接受資訊的速度遠遠超過觀看文字時接受資訊的速度;二是能更清楚地表達細節內容。正是由於這些優點，所以在進行網頁設計時圖像很受歡迎。如果網頁做得像一幅風景畫，瀏覽者一定會流連忘返(如果圖片很大，效果會適得其反)。 圖像檔案的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現在Internet Explorer和Netscape支援的、最常用的圖像格式是GIF、JPEG和BMP。
(1)在網頁中插入圖像
利用Dreamweaver 8可以方便地在網頁中插入圖像，還可以設定圖像邊框、大小、和位置，並且可以直接對圖像進行編輯。在網頁中加入圖像的操作非常簡單：
1.新建一個空白網頁，把遊標定位在網頁的開始位置。
2.開啟“工具”選單，選擇“圖片”選單項，在子選單中選擇“來自檔案”選單項，或者單擊工具欄中的圖片工具圖標，彈出一個“圖片”對話框。
3.在此對話框中單擊“瀏覽”按鈕，出現一個“選擇檔案”對話框。
4.在“選擇檔案”對話框的檔案列表中選擇某個圖像檔案，然後單擊“確定”按鈕，或直接雙擊該圖像檔案，該圖像即被加入到網頁中。在網頁中插入圖像後我們就可以對圖像的各種屬性進行設定了。
(2)圖像的各種屬性設定
1.選中所插入的圖片，單擊鼠標右鍵，彈出一個快捷選單，在選單中選擇“圖片屬性”選單項，出現一個“圖片屬性”對話框.
2.開啟“外觀”選項卡。
(1)設定圖像邊框粗細：在“外觀”選項卡的“佈局”欄裏可以根據需要定義圖像的邊框，也可以定義邊框值爲“0”，即無邊框。
(2)設定圖像環繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時需要將圖像和文字分開，且兩者互不影響。比如在網頁左邊插入一幅圖像，要求右邊的文字就像沒有圖像時可以多行輸入，這就要透過設定圖像的環繞方式來實現。在網頁中圖像的環繞方式有兩種：
①左環繞：圖像在左邊，文字在圖像的右邊進行環繞。
②右環繞：圖像在右邊，文字在圖像的左邊進行環繞。
在“外觀”選項卡的“佈局”欄中開啟“對齊方式”下拉列表框，選擇“左”選項，並單擊“確定”按鈕，圖像就被設定爲左環繞方式，同樣，如果選“右”，圖像就被設定爲右環繞方式。
(3)編輯圖像大小：在Dreamweaver 8中，當在網頁中加入一幅圖像後，圖像大小默認設定爲其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調整圖像的大小。調整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標左鍵拖動圖像邊框，可任意調整圖像的寬度和高度直到達到你滿意的尺寸。
(4)設定圖像縮放比例：網頁設計的一個重要原則就是網頁的.相容性，對於不同的瀏覽器或者不同的分辨率，不管是800×600的視窗，還是1024×768的視窗，網頁都要能正常的顯示。設定圖像縮放比例就是將圖像設定爲大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器視窗裏圖像都能正常的顯示外觀。設定圖像縮放比例的步驟如下：
1.選中網頁中的圖像，單擊鼠標右鍵，在彈出的快捷選單裏，選擇“圖像屬性”選單項，彈出一個“圖像屬性”對話框.
2.在“大小”欄中選中“指定大小”複選框，同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然後在“寬度”和“高度”欄裏輸入想顯示的比例，單擊“確定”完成設定。外還可以在“外觀”選項卡的“水平間距”和“垂直間距”欄裏進行設定，水平間距是指圖像與周圍元素在水平方向的間距，以象素爲單位;垂直間距指圖像與周圍元素在垂直方向的間距。
(3)怎樣編輯網頁中的圖像
在Dreamweaver 8中，可以使用“圖片”工具欄中的各種工具對網頁中的圖像進行編輯，編輯功能主要有：圖像旋轉和翻轉、剪裁、圖像淡化、凹凸效果等等。
另外，爲了使圖片更符合要求，我們還在photoshop8中隊所用的圖片進行了處理，使得圖片看起來更加精細美觀，符合我們的主題要求。
(4)使用背景圖像
使用背景圖像與使用背景色不同，使用背景色只將網頁的背景用某種顏色填充，而使用背景圖像則是將網頁的背景用圖像平鋪。這樣做可以使製作的網頁更美觀好看。網頁中使用背景圖像的具體步驟如下：
1.新建一個空白網頁。
2.單擊鼠標右鍵，彈出的快捷選單裏選“網頁屬性”，彈出“網頁屬性”對話框.
3.開“背景”選項卡。
4.在“背景”選項卡的“格式”欄中選中“背景圖片”複選框，然後單擊下面的“瀏覽”按鈕，出現一個“選擇背景圖片”對話框。
5.在“選擇背景圖像”對話框中單擊“瀏覽檔案”按鈕，出現一個“選擇檔案”對話框。
6.在“選擇檔案”對話框的檔案列表中選擇圖像檔案，單擊“確定”按鈕。
這樣，所選圖片將作爲整個網頁的背景，如果在第4步時同時選中“水印”複選框，背景圖片將顯示爲特殊的水印效果，當網頁滾動時，背景不動，只有網頁內容滾動，產生一種透明層的效果，非常吸引人。
(5)插入flash動畫
關於 Flash 視頻 使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Flash 視頻內容插入 Web 頁面，而無需使用 Flash 創作工具。該命令可以插入 Flash 組件;當您在瀏覽器中檢視它時，它顯示所選擇的 Flash 視頻內容以及一組播放控件。
(6)設定鼠標經過圖片，進行圖片交互
再插入圖片的下拉選單中有一項是“鼠標經過”，點擊這一項，會彈出一個對話框，在對話框中可以設定鼠標經過前的圖片和經過時的圖片，選擇“確定”即可。
(7)設定連結
選中圖片或者文字，在下面的連結屬性中輸入所要連接到的地址，同時，下方的目標屬性被激活，輸入blank設定成在新視窗中開啟網頁。我們設定了連結本站點的網頁頁面，同時也連接了外網，使得大家訪問頁面時能夠查詢更多詳細的資訊，方便用戶查詢。