Dreamweaver+CS4+網(wǎng)頁設(shè)計(jì)與制作指南 第16章

1、第16章公司網(wǎng)站制作案例本章案例以制作一個(gè)電力公司的網(wǎng)站和主導(dǎo)，系統(tǒng)講解如何實(shí)現(xiàn)客戶的需求，在整個(gè)過程中，按照“新建站點(diǎn)”|“制作模板”|“制作首頁文件”|“制作子頁文件”|“案例擴(kuò)展分析”的流程，全面分析制作網(wǎng)站的過程。本章重要知識(shí)點(diǎn)：了解企業(yè)網(wǎng)站的制作流程掌握制作模板的流程掌握新建和修改CSS樣式表的技巧熟悉走馬燈的網(wǎng)頁特效制作16.1策劃構(gòu)思思及設(shè)計(jì)計(jì)流程在正式制制作網(wǎng)站站之前，先要了了解客戶戶的需求求，網(wǎng)站站終歸是是為了客客戶的需需求而定定制，為為網(wǎng)站設(shè)設(shè)計(jì)一個(gè)個(gè)整體的的策劃書書，這一一點(diǎn)至關(guān)關(guān)重要，很多人人可能會(huì)會(huì)忽略這這一點(diǎn)。16.1.1客戶需求求在客戶的的需求中中，已詳詳細(xì)說明明

2、了網(wǎng)站站的欄目目分配。16.1.2網(wǎng)站策劃劃根據(jù)客戶戶所提供供的網(wǎng)站站結(jié)構(gòu)和和需求，策劃將將網(wǎng)站的的欄目分分為“公公司簡(jiǎn)介介”、“電力動(dòng)動(dòng)態(tài)”、“用電電法規(guī)”、“業(yè)業(yè)務(wù)公開開”、“交流合合作”、“多種種產(chǎn)業(yè)”幾類。整個(gè)頁頁面以淡淡雅為主主，主色色調(diào)定為為淡藍(lán)綠綠色，突突出電力力安全、電力為為民的主主題。16.1.3網(wǎng)站結(jié)構(gòu)構(gòu)規(guī)劃一般的企企業(yè)網(wǎng)站站會(huì)有一一個(gè)引導(dǎo)導(dǎo)頁，可可以用圖圖片或動(dòng)動(dòng)畫來制制作，但但是電力力行業(yè)的的網(wǎng)站，一般都都是直奔奔主題，避免太太多的繁繁雜環(huán)節(jié)節(jié)，主要要體現(xiàn)了了便民的的特色，該網(wǎng)站站就簡(jiǎn)單單地左右右分欄，清晰、簡(jiǎn)潔、明了，將網(wǎng)站站的內(nèi)容容展示出出來，因因而在制制作時(shí)一一次

3、性通通過了客客戶的驗(yàn)驗(yàn)收。16.1.4準(zhǔn)備所需需素材在制作網(wǎng)網(wǎng)站之前前，先要要準(zhǔn)備制制作網(wǎng)站站所需的的圖片和和文字資資料，以以及制作作Banner中所使用用的素材材，包括括體現(xiàn)的的主題、文字、制作好好的圖片片和動(dòng)畫畫素材都都放在images下。16.2制作過程程為尊重客客戶的意意見及所所有權(quán)，這里將將網(wǎng)站名名稱和Logo用別的名名稱代替替。本案案例將詳詳細(xì)講解解制作電電力企業(yè)業(yè)網(wǎng)站中中，要注注意的問問題及要要掌握的的一些技技巧。16.2.1網(wǎng)站首頁頁設(shè)計(jì)首先在Photoshop中，使用用客戶提提供的圖圖片及相相關(guān)參照照網(wǎng)址，設(shè)計(jì)出出網(wǎng)站的的首頁圖圖片小樣樣。16.2.2將圖片切切割為網(wǎng)網(wǎng)頁啟動(dòng)

4、ImageReady程序，將將設(shè)計(jì)好好的首頁頁圖片，依據(jù)網(wǎng)網(wǎng)頁設(shè)計(jì)計(jì)布局切切割制作作成網(wǎng)頁頁，對(duì)于于圖片的的分割，要盡量量控制圖圖片的大大小在10KB以內(nèi)，在在保證圖圖片質(zhì)量量的前提提下，盡盡量減少少切割數(shù)數(shù)量，在在圖片導(dǎo)導(dǎo)出之前前，先要要進(jìn)行優(yōu)優(yōu)化，這這是非常常必要的的操作，這樣可可以大大大減小圖圖片的容容量。16.3建立站點(diǎn)點(diǎn)在使用分分割的圖圖片制作作網(wǎng)頁之之前，首首先需要要建立一一個(gè)新的的站點(diǎn)，方便網(wǎng)網(wǎng)站文件件的操作作。16.3.1新建站點(diǎn)點(diǎn)新建站點(diǎn)點(diǎn)的具體體操作步步驟如下下：（1）選擇菜菜單命令令“站點(diǎn)點(diǎn)”|“新建站點(diǎn)點(diǎn)”，彈彈出“站站點(diǎn)定義義為”對(duì)對(duì)話框，并切換換到“高高級(jí)”選選項(xiàng)卡

5、，在對(duì)話話框左側(cè)側(cè)分類下下面的列列表中“本地信信息”所所對(duì)應(yīng)的的選項(xiàng)中中進(jìn)行詳詳細(xì)設(shè)置置。（2）單擊“確定”按鈕，本例的的站點(diǎn)成成功建立立完成。16.3.2新建站點(diǎn)點(diǎn)文件夾夾在站點(diǎn)中中先創(chuàng)建建如下文文件夾，用來放放置相關(guān)關(guān)的文件件：images：用來放放置站點(diǎn)點(diǎn)中的所所有圖片片。style：用來放放置站點(diǎn)點(diǎn)使用的的CSS樣式表文文件。html：用來放放置站點(diǎn)點(diǎn)中的所所有HTML文件。flash：用來放放置站點(diǎn)點(diǎn)中的動(dòng)動(dòng)畫文件件。temp：用來放放置站點(diǎn)點(diǎn)中的圖圖片及動(dòng)動(dòng)畫源文文件。16.4創(chuàng)建CSS樣式在制作首首頁之前前，要根根據(jù)界面面的風(fēng)格格創(chuàng)建相相應(yīng)的CSS樣式。首首先創(chuàng)建建基本的的標(biāo)簽樣

6、樣式，如如body、table、td、p、input以及鏈接接的基本本樣式。16.5制作網(wǎng)站站首頁在站點(diǎn)的的“文件件”面板板中，選選中文件件夾html，單擊鼠鼠標(biāo)右鍵鍵，新建建一個(gè)文文件，命命名為index.htm，再結(jié)合合CSS樣式表的的使用，創(chuàng)建一一個(gè)與網(wǎng)網(wǎng)頁效果果圖相對(duì)對(duì)應(yīng)的首首頁文件件。16.5.1導(dǎo)入外部部樣式表表（1）打開“文件”面板，雙擊index.htm名稱，在在文檔窗窗口中編編輯文件件。（2）在制作作之前先先要從外外部引入入CSS樣式。（3）打開“CSS樣式”面面板，并并在空白白處單擊擊鼠標(biāo)右右鍵，在在彈出的的菜單中中選擇“附加樣樣式表”命令；或單擊擊“附加加樣式表表”按鈕鈕

7、，彈出出“鏈接接外部樣樣式表”對(duì)話框框。16.5.1導(dǎo)入外部部樣式表表（4）單擊“瀏覽”按鈕，選擇CSS樣式文件件所有路路徑，導(dǎo)導(dǎo)入CSS樣式表文文件，并并選中“添加為為”之后后的“鏈鏈接”單單選按按鈕。（5）單擊“確定”按鈕，即成功功在文件件中導(dǎo)入入了CSS樣式表。16.5.2設(shè)置網(wǎng)頁頁標(biāo)題首先設(shè)置置網(wǎng)頁的的標(biāo)題，在文檔檔頭部輸輸入標(biāo)題題的名稱稱。16.5.3設(shè)置頁面面屬性選擇菜單單命令“修改”|“頁面屬性性”，彈彈出“頁頁面屬性性”對(duì)話話框，從從中設(shè)置置跟蹤圖圖像。設(shè)置跟蹤蹤圖像，可以使使界面在在制作過過程中布布局分配配更加合合理科學(xué)學(xué)。16.5.4制作頭部部表格首頁界面面是按800*60

8、0的分辯率率設(shè)計(jì)的的，所以以表格的的寬度，都是按按照界面面中的設(shè)設(shè)計(jì)設(shè)置置為778px。16.5.5制作公告告欄在頭部表表格下制制作公告告欄，作作為緊急急通知公公告欄，并做成成走馬燈燈的樣式式。16.6制作正文文表格在公告欄欄制作完完畢后，開始制制作正文文表格部部分，正正文表格格按照界界面的設(shè)設(shè)置，主主要分為為左右兩兩個(gè)欄目目，再從從右側(cè)分分為上、左、右右的格式式。16.6.1左側(cè)欄的的制作詳細(xì)操作作步驟如如下：（1）建立一一個(gè)2列1行的表格格。（2）設(shè)置2列表格垂垂直對(duì)齊齊為“頂頂端”，第1列表格設(shè)設(shè)置寬度度為“195px”。制作“用用電業(yè)務(wù)務(wù)指南”表格制作“站站內(nèi)搜索索”表格格制作“用用電

9、報(bào)裝裝流程圖圖”表格格16.6.2制作Banner將正文表表格的右右側(cè)分為為3個(gè)部分，上部為為Banner區(qū)；下部部分為左左右，制制作欄目目?jī)?nèi)容。16.6.3制作行業(yè)業(yè)動(dòng)態(tài)接上面的的操作步步驟繼續(xù)續(xù)制作正正文部分分。16.6.4制作停電電公告（1）在行業(yè)業(yè)動(dòng)態(tài)表表格下方方，制作作停電公公告的表表格。（2）合并第第1行中的兩兩個(gè)單元元格，插插入停電電公告的的圖片。（3）設(shè)置第第2行第1列的單元元格為水水平居中中，寬度度為“135px”，并插入入圖片“mt_0.jpg”。16.6.4制作停電電公告（4）設(shè)置第第2行第2列垂直對(duì)對(duì)齊為“頂端”，通過過插入表表格設(shè)置置最新的的8條停電公公告。（5）表格

10、的的設(shè)置同同“行業(yè)業(yè)動(dòng)態(tài)”，不同同的是在在偶數(shù)的的單元格格中的細(xì)細(xì)條的圖圖片、奇奇數(shù)條數(shù)數(shù)前的小小圖片，以及代代表“更更多”的的圖片。16.6.5制作相關(guān)關(guān)法規(guī)在Banner下方的表表格的第第2列單元格格中，設(shè)設(shè)置相關(guān)關(guān)法規(guī)的的表格。16.6.6制作電力力行業(yè)相相關(guān)鏈接接在相關(guān)法法規(guī)下面面制作“相關(guān)鏈鏈接”的的表格，此處與與整體界界面風(fēng)格格統(tǒng)一，制作方方法同“相關(guān)法法規(guī)”。這樣正文文部分的的表格全全部制作作完成。16.7制作尾部部版權(quán)制作尾部部版權(quán)部部分，也也采用清清新簡(jiǎn)潔潔的樣式式。16.8調(diào)整頁面面通過上面面幾節(jié)，頁面已已基本制制作完成成，但是是在瀏覽覽器中查查看效果果時(shí)，發(fā)發(fā)現(xiàn)頁面面的整

11、體體效果不不是太理理想，主主要是下下部分的的表格在在底端沒沒有對(duì)齊齊。16.9.1創(chuàng)建模板板應(yīng)用制作作好的首首頁創(chuàng)建建該站點(diǎn)點(diǎn)的模板板。16.9.2使用庫在模板中中，導(dǎo)航航欄是不不可編輯輯區(qū)域，可以在在二級(jí)模模板或其其他的模模板中使使用，為為了方便便日后的的調(diào)用，在此將將導(dǎo)航欄欄創(chuàng)建為為庫。16.10應(yīng)用模板板創(chuàng)建子子欄目由制作好好的模板板創(chuàng)建子子欄目頁頁面，流流程是：從模板板新建網(wǎng)網(wǎng)頁|編輯可編編輯區(qū)域域。16.10.1從模板新新建網(wǎng)頁頁具體操作作步驟如如下：（1）選擇菜菜單命令令“文件件”|“新建”，彈出“新建文文檔”窗窗口，左左側(cè)選擇擇第3項(xiàng)|“模板中的的頁”，在站點(diǎn)點(diǎn)所在下下拉列表表中

12、選擇擇當(dāng)前站站點(diǎn)的名名稱，并并在站點(diǎn)點(diǎn)的模板板下拉列列表中選選擇index，并選中中右下角角“當(dāng)模模板改變變時(shí)更新新頁面”復(fù)選框框。（2）單擊“創(chuàng)建”按鈕，應(yīng)用模模板創(chuàng)建建了一個(gè)個(gè)未命名名的文件件“Untitled-1”文檔，將將其保存存為intro.htm。16.10.2編輯左欄欄可編輯輯區(qū)域在左側(cè)的的可編輯輯區(qū)域設(shè)設(shè)置頁面面。16.10.3編輯右欄欄可編輯輯區(qū)域在右部的的可編輯輯區(qū)域進(jìn)進(jìn)行界面面的修飾飾，以及及欄目?jī)?nèi)內(nèi)容的設(shè)設(shè)置。16.11應(yīng)用模板板制作三三級(jí)頁面面同上一節(jié)節(jié)的制作作方法，應(yīng)用模模板制作作三級(jí)頁頁面，三三級(jí)頁面面左側(cè)可可編輯區(qū)區(qū)域與子子欄目相相同，在在右側(cè)的的可編輯輯區(qū)域有有所區(qū)別別，三級(jí)級(jí)頁面保保存為intro_info.htm。16.12.1準(zhǔn)備相關(guān)關(guān)素材本案例是是一個(gè)電電力行業(yè)業(yè)方面的的企業(yè)網(wǎng)網(wǎng)站，大大家可以以親手根根據(jù)講解解制作網(wǎng)網(wǎng)站的模模板，以以及在制制作過程程中遇到到的CSS樣式表。在制作作過程中中，需要要用到的的圖片、文字、Flash動(dòng)畫，應(yīng)應(yīng)根據(jù)界界面的設(shè)設(shè)計(jì)先制制作好，特別是是在Flash動(dòng)畫中用用到的圖圖片更是是要精雕雕細(xì)琢，精細(xì)中中更見設(shè)設(shè)計(jì)者的的制作水水平。16.12.2定制CSS樣式在制作之之初，不不可能一一下子將將所有的的CSS樣式全部部想到，而會(huì)在在制作過過程中，隨時(shí)增增加和修修改CSS樣式，此此時(shí)應(yīng)注注意樣式式，盡