Dreamweaver+CS+網(wǎng)頁(yè)設(shè)計(jì)與制作指南

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

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

3、作好的圖片和動(dòng)畫素材都放在images下。16.2 制作過(guò)程為尊重客戶的意見及所有權(quán)，這里將網(wǎng)站名稱和Logo用別的名稱代替。本案例將詳細(xì)講解制作電力企業(yè)網(wǎng)站中，要注意的問(wèn)題及要掌握的一些技巧。16.2.1 網(wǎng)站首頁(yè)設(shè)計(jì)首先在Photoshop中，使用客戶提供的圖片及相關(guān)參照網(wǎng)址，設(shè)計(jì)出網(wǎng)站的首頁(yè)圖片小樣。16.2.2 將圖片切割為網(wǎng)頁(yè)啟動(dòng)ImageReady程序，將設(shè)計(jì)好的首頁(yè)圖片，依據(jù)網(wǎng)頁(yè)設(shè)計(jì)布局切割制作成網(wǎng)頁(yè)，對(duì)于圖片的分割，要盡量控制圖片的大小在10KB以內(nèi)，在保證圖片質(zhì)量的前提下，盡量減少切割數(shù)量，在圖片導(dǎo)出之前，先要進(jìn)行優(yōu)化，這是非常必要的操作，這樣可以大大減小圖片的容量。16.3

4、 建立站點(diǎn)在使用分割的圖片制作網(wǎng)頁(yè)之前，首先需要建立一個(gè)新的站點(diǎn)，方便網(wǎng)站文件的操作。16.3.1 新建站點(diǎn)新建站點(diǎn)的具體操作步驟如下：（1）選擇菜單命令“站點(diǎn)”|“新建站點(diǎn)”，彈出“站點(diǎn)定義為”對(duì)話框，并切換到“高級(jí)”選項(xiàng)卡，在對(duì)話框左側(cè)分類下面的列表中“本地信息”所對(duì)應(yīng)的選項(xiàng)中進(jìn)行詳細(xì)設(shè)置。（2）單擊“確定”按鈕，本例的站點(diǎn)成功建立完成。16.3.2 新建站點(diǎn)文件夾在站點(diǎn)中先創(chuàng)建如下文件夾，用來(lái)放置相關(guān)的文件：images：用來(lái)放置站點(diǎn)中的所有圖片。style：用來(lái)放置站點(diǎn)使用的CSS樣式表文件。html：用來(lái)放置站點(diǎn)中的所有HTML文件。flash：用來(lái)放置站點(diǎn)中的動(dòng)畫文件。temp：用

5、來(lái)放置站點(diǎn)中的圖片及動(dòng)畫源文件。16.4 創(chuàng)建CSS樣式在制作首頁(yè)之前，要根據(jù)界面的風(fēng)格創(chuàng)建相應(yīng)的CSS樣式。首先創(chuàng)建基本的標(biāo)簽樣式，如body、table、td、p、input以及鏈接的基本樣式。16.5 制作網(wǎng)站首頁(yè)在站點(diǎn)的“文件”面板中，選中文件夾html，單擊鼠標(biāo)右鍵，新建一個(gè)文件，命名為index.htm，再結(jié)合CSS樣式表的使用，創(chuàng)建一個(gè)與網(wǎng)頁(yè)效果圖相對(duì)應(yīng)的首頁(yè)文件。16.5.1 導(dǎo)入外部樣式表（1）打開“文件”面板，雙擊index.htm名稱，在文檔窗口中編輯文件。（2）在制作之前先要從外部引入CSS樣式。（3）打開“CSS樣式”面板，并在空白處單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“

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

7、照界面中的設(shè)計(jì)設(shè)置為778px。16.5.5 制作公告欄在頭部表格下制作公告欄，作為緊急通知公告欄，并做成走馬燈的樣式。16.6 制作正文表格在公告欄制作完畢后，開始制作正文表格部分，正文表格按照界面的設(shè)置，主要分為左右兩個(gè)欄目，再?gòu)挠覀?cè)分為上、左、右的格式。16.6.1 左側(cè)欄的制作詳細(xì)操作步驟如下：（1）建立一個(gè)2列1行的表格。（2）設(shè)置2列表格垂直對(duì)齊為“頂端”，第1列表格設(shè)置寬度為“195px”。制作“用電業(yè)務(wù)指南”表格制作“站內(nèi)搜索”表格制作“用電報(bào)裝流程圖”表格16.6.2 制作Banner將正文表格的右側(cè)分為3個(gè)部分，上部為Banner區(qū)；下部分為左右，制作欄目?jī)?nèi)容。16.6.3

8、 制作行業(yè)動(dòng)態(tài)接上面的操作步驟繼續(xù)制作正文部分。16.6.4 制作停電公告（1）在行業(yè)動(dòng)態(tài)表格下方，制作停電公告的表格。（2）合并第1行中的兩個(gè)單元格，插入停電公告的圖片。（3）設(shè)置第2行第1列的單元格為水平居中，寬度為“135px”，并插入圖片“mt_0.jpg”。16.6.4 制作停電公告（4）設(shè)置第2行第2列垂直對(duì)齊為“頂端”，通過(guò)插入表格設(shè)置最新的8條停電公告。（5）表格的設(shè)置同“行業(yè)動(dòng)態(tài)”，不同的是在偶數(shù)的單元格中的細(xì)條的圖片、奇數(shù)條數(shù)前的小圖片，以及代表“更多”的圖片。16.6.5 制作相關(guān)法規(guī)在Banner下方的表格的第2列單元格中，設(shè)置相關(guān)法規(guī)的表格。16.6.6 制作電力行業(yè)

9、相關(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)整頁(yè)面通過(guò)上面幾節(jié)，頁(yè)面已基本制作完成，但是在瀏覽器中查看效果時(shí)，發(fā)現(xiàn)頁(yè)面的整體效果不是太理想，主要是下部分的表格在底端沒(méi)有對(duì)齊。16.9.1 創(chuàng)建模板應(yīng)用制作好的首頁(yè)創(chuàng)建該站點(diǎn)的模板。16.9.2 使用庫(kù)在模板中，導(dǎo)航欄是不可編輯區(qū)域，可以在二級(jí)模板或其他的模板中使用，為了方便日后的調(diào)用，在此將導(dǎo)航欄創(chuàng)建為庫(kù)。16.10 應(yīng)用模板創(chuàng)建子欄目由制作好的模板創(chuàng)建子欄目頁(yè)面，流程是：從模板新建網(wǎng)頁(yè)|編

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