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.使用背景圖片:選擇此項並單擊“瀏覽”以插入準備好的圖片作為表格的背景。因為圖片是作為桌子背景平鋪的，所以要控制好桌子大小和圖片大小。
(B)網頁中的圖像
圖像傳輸是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.選擇插入的圖片，單擊鼠標右鍵彈出快捷菜單，選擇？圖像屬性？菜單項，a？圖像屬性？對話框。
2.打開它？外觀？標簽。
(1)設置圖像的邊框粗細:in？外觀？選項卡式？布局？您可以根據需要定義列中圖像的邊框，也可以將邊框值定義為？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動畫
關於使用Dreamweaver的Flash視頻？插入Flash視頻？命令，可以在不使用Flash創作工具的情況下將Flash視頻內容插入網頁。該命令可以插入到Flash組件中；當您在瀏覽器中查看它時，它會顯示選定的Flash視頻內容和壹組播放控件。
(6)設置鼠標穿過圖片進行圖片交互。
再次插入圖片下拉菜單中的壹項是什麽？老鼠路過？點擊此項，會彈出壹個對話框。在對話框中，可以設置鼠標經過前的圖片和鼠標經過後的圖片，選擇？妳確定嗎？去做吧。
(7)設置鏈接
選擇圖片或文本，並在下面的鏈接屬性中輸入您要連接的地址。同時激活下面的目標屬性，輸入blank在新窗口打開網頁。我們建立了壹個鏈接到本網站的網頁，同時也連接到了外網，這樣當妳訪問該網頁時，可以查詢到更詳細的信息，方便用戶查詢。
；