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在新窗口打開網頁。我們建立了壹個鏈接到本網站的網頁,同時也連接到了外網,這樣當妳訪問該網頁時,可以查詢到更詳細的信息,方便用戶查詢。
;