網站設計與建設綜合實例PPT演示課件

10.1實例創(chuàng)意和效果展示10.2實例說明10.3設計過程,第10章網站設計與建設綜合實例,1,該實例是一個小型的娛樂資訊網站的首頁，頁面的色調是藍色，給人的感覺是涼爽、清新，將藍色與白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛，精美的表格線條使整個頁面顯得華麗而整潔。在頁面的頂部是廣告條和常用的頁面鏈接。接著下面是導航部分，整個頁面總共有9個導航鏈接，是這個小型站點的9個版塊。本頁是網站的首頁，因此“本站首頁”的導航是展開的。在頁面的左側主要包括“聊天室”、“虛擬社區(qū)”的登錄區(qū)域和友情鏈接區(qū)域；頁面的中間主要是新聞區(qū)域和明星寫真區(qū)域；頁面的右側是公告區(qū)域和音樂搜索區(qū)域；在頁面的最底部是版權信息區(qū)域。,10.1實例創(chuàng)意和效果展示,2,整個頁面采用表格布局和組織內容，做到內容豐富而又有條不紊，如圖9-1所示。,10.1實例創(chuàng)意和效果展示,圖9-1實例效果,3,本頁面的制作過程中用到的主要技術包括：1.站點的規(guī)劃建立一個本地站點設計網頁和測試網頁的效果。2.頁面屬性的設置通過頁面屬性的設置，定義頁面的標題、文字顏色和超級聯(lián)接的顏色。3.CSS樣式的使用通過CSS樣式的使用，改變文字的顯示風格和表格的框線風格，使界面更加美觀。4.表格的布局通過表格的布局，使頁面的內容既豐富而又整齊、清晰。,10.2實例說明10.2.1技術要點,4,5.JavaScript腳本的應用通過JavaScript腳本的應用，實現(xiàn)“加入我的收藏夾”、“設置本站為首頁”的功能和公告中的滾動字幕特效。6.Flash按鈕的制作將友情鏈接中的鏈接做成Flash按鈕的風格，增加頁面的圖像動態(tài)效果。7.表單的制作通過表單的制作，為用戶提供登錄“聊天室”、“虛擬社區(qū)”的窗口和搜索音樂的捷徑。8.圖像的使用在廣告條和明星寫真的區(qū)域插入圖像，在導航條的背景上添加背景圖像使得整個頁面充滿動感。,10.2實例說明10.2.1技術要點,5,在設計本頁面時，需要使用的素材包括：網站廣告條使用的Gif動畫。導航條的背景圖片。新聞前邊的指示箭頭。公告欄中字幕前邊的Gif動畫。明星寫真中的明星圖片。,10.2實例說明10.2.2素材準備,6,10.3設計過程10.3.1規(guī)劃站點,打開DreamweaverMX2004，執(zhí)行“站點”“管理站點”命令，新建一個“娛樂無極限”的站點，使用的本地文件夾為“D:fun”，不設置遠程信息，如圖9-2所示。選擇已經建立好的站點，單擊鼠標右鍵，選擇“新建文件”命令，定義主頁文件名為index.htm；接著在站點上單擊鼠標右鍵，選擇“新建文件夾”命令，定義圖像文件使用的文件夾為image，如圖9-3所示。,圖9-2建立“娛樂無極限”的本地站點,圖9-3定義主頁文件和文件夾,7,1.頁面屬性的設置雙擊index.htm進入頁面的編輯狀態(tài)，在標題欄中輸入“娛樂無極限”。執(zhí)行“修改”“頁面屬性”命令，打開“頁面屬性”對話框。選擇“外觀”分類選項，將文本顏色設為黑色、背景顏色設為白色，左邊距、右邊距、上邊距和下邊距的值均設為0，如圖9-4所示。,10.3設計過程10.3.2制作網頁,圖9-4設置頁面外觀,8,選擇“鏈接”分類選項，將鏈接顏色設為天藍色“#c0dfff”，已訪問鏈接的顏色設為天藍色“#c0dfff”，變換圖像鏈接顏色設為“#3366ff”，活動鏈接設為“#000000”，鏈接下劃線樣式設為“僅在變換圖像時顯示下劃線”，如圖9-5所示。,10.3設計過程10.3.2制作網頁,圖9-5設置頁面鏈接,9,2.CSS樣式的設計(1)頁面中的文字目前流行的大多數(shù)網頁文字的風格是9pt大小的宋體，本頁面采用這種風格，分別重新定義、和標簽的CSS樣式為字體“宋體”、大小“9pt”，如圖9-6所示。,10.3設計過程10.3.2制作網頁,圖9-6定義、和標簽的CSS樣式,10,2.CSS樣式的設計(2)表格邊框細線的制作表格有兩種用途，一種是純粹為了布局使用的表格，其邊框粗細為0；另一種是在布局的基礎上顯示細線風格的表格，可以使用CSS樣式中的類定義細線邊框，如圖9-7所示。,10.3設計過程10.3.2制作網頁,圖9-7使用CSS樣式中的類定義細線邊框,11,3.制作頁面頂部的廣告條表格(1)插入廣告條圖片執(zhí)行“插入”“表格”命令，彈出“表格”對話框，將表格的行數(shù)設為1，列數(shù)設為3，寬度設為760像素，邊框粗細、單元格邊距和單元格間距均設為0，如圖9-8所示。選中整個表格，將起背景顏色設為淺藍色“#3399ff”，如圖9-9所示。,10.3設計過程10.3.2制作網頁,圖9-8插入頂部表格,圖9-9設置頂部表格的淺藍色背景,12,3.制作頁面頂部的廣告條表格(1)插入廣告條圖片選中中間的單元格，將其寬度定義為468像素，兩邊的單元格的寬度均定義為146像素，如圖9-10所示。將鼠標定位在中間的單元格，執(zhí)行“插入”“圖像”命令，插入廣告條圖片“title.gif”，效果如圖9-11所示。,10.3設計過程10.3.2制作網頁,圖9-10設置廣告圖片的單元格寬度,圖9-11插入廣告條圖片,13,(2)制作網站鏈接文字本頁面的頂部表格左側包括“加入我的收藏夾”、“設置本站為首頁”兩個鏈接，這是大多數(shù)網站具備的基本功能，使用JavaScript腳本可以實現(xiàn)這些功能。首先制作“加入我的收藏夾”鏈接，切換到代碼窗口，編寫JavaScript腳本修改原來的鏈接，代碼如下：加入我的收藏夾,10.3設計過程10.3.2制作網頁,圖9-12制作“加入我的收藏夾”的超級鏈接,圖9-13“添加到收藏夾”對話框,14,(2)制作網站鏈接文字接著制作“設置本站為首頁”的鏈接，開始一個新的行，不開始新的段落，輸入“設置本站為首頁”，將其鏈接地址設為“#”。切換到代碼窗口，編寫JavaScript腳本實現(xiàn)這個功能。首先在和之間加入設置當前頁面為首頁的函數(shù)，代碼如下：,10.3設計過程10.3.2制作網頁,15,(2)制作網站鏈接文字接著修改和之間的“設置本站為首頁”鏈接的代碼，修改如下：設置本站為首頁然后，按F12鍵預覽頁面，單擊“設置本站為首頁”，如圖9-14所示，出現(xiàn)如圖9-15所示的設置主頁的對話框。,10.3設計過程10.3.2制作網頁,圖9-14單擊“設置本站為首頁”超級鏈接,圖9-15設置主頁的對話框,16,4.制作導航表格,10.3設計過程10.3.2制作網頁,圖9-17將表格寬度轉換為像素平均分配單元格,圖9-18設置導航鏈接,17,5.制作主體內容的框架頁面的主體部分是本實例制作的核心部分。主體部分，從左到右可以分為兩個部分，左邊部分是兩個登錄表單和幾個綜合網站的鏈接；右邊是娛樂新聞、明星寫真、本站公告和音樂搜索等幾個欄目。,10.3設計過程10.3.2制作網頁,圖9-22設置主體表格背景顏色和單元格的寬度,18,6.制作主體表格左側的內容(1)制作“聊天室”登錄表單效果如圖9-25所示。(2)制作“虛擬社區(qū)”登錄表單效果如圖9-26所示。,10.3設計過程10.3.2制作網頁,圖9-25制作“聊天室”登錄表單,圖9-26制作“虛擬社區(qū)”登錄表單,19,6.制作主體表格左側的內容(3)制作友情鏈接效果如圖9-28所示。,10.3設計過程10.3.2制作網頁,圖9-28制作友情鏈接使用的Flash按鈕,20,7.制作主體部分右側單元格的內容(1)制作娛樂新聞欄目效果如圖9-33所示。,10.3設計過程10.3.2制作網頁,圖9-33制作娛樂新聞,21,7.制作主體部分右側單元格的內容(2)制作本站公告欄目效果如圖9-34、9-35所示。,10.3設計過程10.3.2制作網頁,圖9-34制作公告內容,圖9-35滾動字幕效果,22,7.制作主體部分右側單元格的內容(3)制作明星寫真檔案欄目效果如圖9-36所示。(4)制作音樂搜索表單效果如圖9-39所示。,10.3設計過程10.3.2制作網頁,圖9-36制作明星寫真檔案,圖9-39制作音樂搜索表單,23,7.制作主體部分右側單元格的內容(5)制作最新音樂專輯欄目效果如圖9-40所示。(6)制作網站拓展欄目效果如圖9-40所示。,10.3設計過程10.3.2制作網頁,圖9-40制作最新音樂專輯欄目,24,8.制作底部的版權信息區(qū)域將鼠標定位在主體表格的最右端，插入一個1行1列寬度為760像素的表格，邊框粗細、單元格邊距和單元格間距均設為0，在“屬性”面板中將表格高度設置為40像素，輸入使用瀏覽器的建議和版權信息，如圖9-41所示。,10.3設計過程10.3.2制作網頁,圖9-41制作底部的版權信息區(qū)域,25,1.測試網站制作好站點中所有的頁面后，首先要對整個網站進行測試。測試最基本的方法就是在Dreamweaver中打開站點首頁，然后按F12鍵預覽頁面，在瀏覽器中測試每一個頁面，看內容是否能正確顯示，尤其要測試超鏈接是否能正確工作。為了確保不同的瀏覽者能夠看到一致的頁面效果，制作好的網站還應在不同的顯示分辨率下進行測試，至少要在800600像素和1024768像素兩種分辨率下進行測試。另外，還需要在不同字體顯示大小情況下進行測試（即在“大字體”和“小字體”兩種方式下測試），以確保不同字體設置的瀏覽者能夠看到一致的字體效果。測試完成之后，就可以將網站上傳發(fā)布到遠程站點上。,10.3設計過程10.3.3測試和上傳網站,26,2.上傳網站(1)設置遠程站點首先設置站點的服務器訪問類型為FTP訪問，這樣本地站點建立的文件就可以通過FTP協(xié)議上傳到遠程的Web服務器上。選擇“站點”“管理站點”命令，打開“管理站點”對話框。單擊對話框中的“編輯”按鈕，彈出“站點定義為”的對話框，將“分類”列表框切換到“遠程信息”。在右邊的參數(shù)設置中分別設置FTP主機、登錄用戶名和登錄密碼，設置的參數(shù)如圖9-42所示。,10.3設計過程10.3.3測試和上傳網站,圖9-42FTP訪問的參數(shù)設置,27,(2)測試遠程站點設置好各個參數(shù)后，用戶可以單擊“測試”按鈕測試FTP遠程站點是否連通。單擊“測試”按鈕，經過一段時間等待，出現(xiàn)測試成功的對話框，如圖9-43所示。,10.3設計過程10.3.3測試和上傳網站,圖9-43測試遠程站點,28,(3)連接遠程服務器遠程站點測試成功后，接下來建立本地站點和Internet服務器的真正連接，才能真正構建遠程站點。過程如下：在站點面板中單擊“連接”按鈕，如圖9-44所示。連接成功后，會在站點窗口的遠程站點窗格中顯示主機目錄，它將作為遠程站點根目錄