網(wǎng)頁設(shè)計(jì)基礎(chǔ)第九章

1、第9章 網(wǎng)站制作綜合實(shí)例9.1 網(wǎng)站規(guī)劃建設(shè)網(wǎng)站之前就應(yīng)該有一個整體的戰(zhàn)略規(guī)劃和目標(biāo)，規(guī)劃好網(wǎng)頁的大致外觀后就可以著手設(shè)計(jì)了。9.1.1 網(wǎng)站目標(biāo)（1）網(wǎng)站的整體定位。（2）網(wǎng)站的主要內(nèi)容。（3）網(wǎng)站瀏覽者的教育程度。9.1.2 內(nèi)容組織（1）內(nèi)容一定要緊扣主題。（2）設(shè)立一個最近更新欄目。（3）設(shè)立一個網(wǎng)頁交互欄目，不需要很多，但一定要有。如班級論壇、訪客留言等，能夠讓瀏覽者留下他們的信息。9.1.3 鏈接結(jié)構(gòu)（1）樹狀鏈接結(jié)構(gòu)。（2）星狀鏈接結(jié)構(gòu)。 9.1.4 網(wǎng)站風(fēng)格無論是商業(yè)網(wǎng)站還是個人網(wǎng)站，要想使網(wǎng)頁豐富多彩，吸引大量的訪問者，網(wǎng)站風(fēng)格的設(shè)計(jì)是至關(guān)重要的。站點(diǎn)風(fēng)格設(shè)計(jì)包括設(shè)計(jì)站點(diǎn)的整

2、體色彩、網(wǎng)頁的結(jié)構(gòu)、文本的字體和大小、背景的使用等，這些沒有一定的公式或規(guī)則，需要設(shè)計(jì)者通過各種分析決定。9.1.5 版面布局設(shè)計(jì)1.常見的網(wǎng)頁版面布局類型網(wǎng)頁的版面布局類型歸納起來有以下3種。1）“”型布局2）“”型布局3）其他布局9.1.5 版面布局設(shè)計(jì)2.版面布局設(shè)計(jì)要求版面布局設(shè)計(jì)要求歸納起來有以下4點(diǎn)：（1）整潔大方。（2）突出重點(diǎn)。（3）平衡對稱。（4）風(fēng)格一致。9.2 主頁設(shè)計(jì)9.2.1制作主頁圖片稿通常一個網(wǎng)站的主頁設(shè)計(jì)初稿都由網(wǎng)站美工人員或者藝術(shù)設(shè)計(jì)人員設(shè)計(jì)制作出的一張圖片稿。專業(yè)的設(shè)計(jì)人員也許不是專業(yè)的網(wǎng)頁制作人員，同樣讓網(wǎng)頁制作人員完全替代美工設(shè)計(jì)的工作也是勉為其難。而且

3、，主頁的設(shè)計(jì)樣式往往需要多次修改才能滿足前期策劃的要求，中間可能會有很多個設(shè)計(jì)稿，如果對每個設(shè)計(jì)稿都制作成網(wǎng)頁，浪費(fèi)的人力物力也會相當(dāng)大。主頁圖片稿通常使用Photoshop或網(wǎng)頁制作三劍客之一的Fireworks進(jìn)行制作，這取決于藝術(shù)設(shè)計(jì)人員的喜好。 9.2.2利用Fireworks對圖片切片將圖片導(dǎo)出為網(wǎng)頁的操作步驟如下：（1）在Fireworks中執(zhí)行“文件”“導(dǎo)出”命令，彈出“導(dǎo)出”對話框。（2）在“導(dǎo)出”下拉列表框中，選擇“HTML和圖像”選項(xiàng)，在HTML下拉列表框中選擇“導(dǎo)出HTML文件”，選中“將圖像放入子文件夾”復(fù)選框。（3）單擊“導(dǎo)出”按鈕，就可以將圖片導(dǎo)出成為一個HTML網(wǎng)

4、頁和一系列圖片切片，這些切片會存放在指定的文件夾內(nèi)，默認(rèn)是與網(wǎng)頁同目錄下的images文件夾中。通過Fireworks的處理，一張主頁的圖片設(shè)計(jì)稿就變成了一個基本的網(wǎng)頁形式了。下一步，就是網(wǎng)頁制作的主要內(nèi)容了。 9.2.3利用Dreamweaver制作主頁主頁制作步驟如下：（1）在Dreamweaver中創(chuàng)建一個新文檔，將該文檔與圖像文件放于同一個站點(diǎn)目錄下，打開布局模式，然后單擊插入欄內(nèi)的“布局表格”按鈕.（2）使用“布局表格”功能在文檔編輯區(qū)內(nèi)繪制一個表格，該表格的寬度是根據(jù)頁面設(shè)計(jì)時圖像的寬度決定的。例如，在本例中，表格的寬度設(shè)置為800像素.（3）單擊插入欄內(nèi)的“繪制布局單元格”按鈕，

5、根據(jù)圖像的大小繪制出所有圖像所在的單元格。（4）完成布局表格繪制之后，啟用擴(kuò)展表格模式觀察表格效果，此時可以更清楚地看到表格效果。（5）繪制好布局表格后，將文檔命名為“index.htm”并保存。 9.2.4插入圖片完成布局表格繪制之后，在擴(kuò)展表格模式下，在表格內(nèi)逐一插入相應(yīng)圖像。9.3 編輯子頁面9.4 設(shè)置超鏈接9.5 CSS樣式的應(yīng)用 對于整個網(wǎng)站的多個頁面，如果利用CSS來控制樣式，那么在網(wǎng)站改版和批量調(diào)整網(wǎng)站樣式時會大大提高工作效率。一般使用插入鏈接的外部樣式表來引入CSS樣式，這只需要將對應(yīng)的樣式集中書寫在樣式表文件中，然后在每個網(wǎng)頁的中加以引用即可。如果更換樣式，只需要替換對應(yīng)的

6、樣式表文件即可，不需要對大量的網(wǎng)頁進(jìn)行逐一修改。9.6 添加JavaScript特效1、在主頁中可以自動獲取用戶所在計(jì)算機(jī)的時間，并根據(jù)不同的訪問時間，向用戶發(fā)出不同的問候.JavaScript代碼如下： var mess1=; day = new Date( ) hr = day.getHours( ) if ( hr = 0 ) & (hr = 4 ) & (hr = 7 ) & (hr = 12) & (hr = 13) & (hr = 18)& (hr = 23) mess1=晚上好！辛苦了一天了 alert(mess1);2、如果訪問者沒有填寫留言內(nèi)容或姓名，瀏覽器可以發(fā)出相應(yīng)的提示

7、。JavaScript代碼如下：function CheckForm()var Err;Err=;if(document.VisitorForm.VisitorName.value=)Err=Err+請輸入您的姓名！n ;if(document.VisitorForm.Words.value = )Err=Err+請輸入您的留言內(nèi)容！;alert(Err);return false;9.7 測試檢查與網(wǎng)站發(fā)布9.7.1 測試檢查1.鏈接的檢查與修復(fù)2.檢查網(wǎng)頁的兼容性 9.7.2 網(wǎng)站發(fā)布要進(jìn)行網(wǎng)站發(fā)布，先要向Web服務(wù)器申請一個空間，就像買一套房子一樣，在網(wǎng)上給自己的網(wǎng)站找一個“房間”，然后將網(wǎng)站放進(jìn)去。申請空間通常有幾種