1、網(wǎng)頁制作 項(xiàng)目一 認(rèn)識(shí)網(wǎng)頁和網(wǎng)站 n網(wǎng)頁：網(wǎng)頁：存放在存放在Web服務(wù)器上供客戶機(jī)服務(wù)服務(wù)器上供客戶機(jī)服務(wù) 用戶瀏覽的頁面；用戶瀏覽的頁面； 是一種綜合了文字、圖片、動(dòng)畫和音樂等內(nèi)容是一種綜合了文字、圖片、動(dòng)畫和音樂等內(nèi)容 的超文本文件，具有可視化和交互性的特點(diǎn)。的超文本文件，具有可視化和交互性的特點(diǎn)。 網(wǎng)站： 是網(wǎng)頁的集合，網(wǎng)頁是 構(gòu)成網(wǎng)站的基本元素。 學(xué)習(xí)目標(biāo) 了解網(wǎng)頁的構(gòu)成了解網(wǎng)頁的構(gòu)成 掌握網(wǎng)頁的布局設(shè)計(jì) 掌握不同風(fēng)格網(wǎng)頁的布局 熟悉Photoshop軟件工具的應(yīng)用 第1章 網(wǎng)頁版式設(shè)計(jì) n網(wǎng)頁版式的基本類型網(wǎng)頁版式的基本類型 n網(wǎng)頁版式設(shè)計(jì)注意事項(xiàng)網(wǎng)頁版式設(shè)計(jì)注意事項(xiàng) n頁面布局基本

2、步驟頁面布局基本步驟 n模板模板 7.1 網(wǎng)頁版式的基本類型 網(wǎng)頁版式的基本類型可分為網(wǎng)頁版式的基本類型可分為“國國” 字型、拐角型、標(biāo)題正文型、左右框架字型、拐角型、標(biāo)題正文型、左右框架 型、上下框架型、封面型、型、上下框架型、封面型、Flash動(dòng)畫型動(dòng)畫型 等幾種。等幾種。 1. “國”字型 “國國”字型結(jié)構(gòu)是指網(wǎng)頁的最上面是字型結(jié)構(gòu)是指網(wǎng)頁的最上面是 網(wǎng)站的網(wǎng)站的Logo（標(biāo)志）、（標(biāo)志）、Banner（橫幅（橫幅 廣告條）和導(dǎo)航欄，中間是當(dāng)前網(wǎng)頁的廣告條）和導(dǎo)航欄，中間是當(dāng)前網(wǎng)頁的 主要內(nèi)容（通常被分成大小不等的三列，主要內(nèi)容（通常被分成大小不等的三列， 其中中間的一列用來放置當(dāng)前網(wǎng)頁

3、的主其中中間的一列用來放置當(dāng)前網(wǎng)頁的主 體內(nèi)容），最下面是網(wǎng)站的版權(quán)聲明等體內(nèi)容），最下面是網(wǎng)站的版權(quán)聲明等 信息。信息。 LogoBanner 導(dǎo)航欄導(dǎo)航欄 版權(quán)聲明等信息版權(quán)聲明等信息 2. 拐角型 拐角型結(jié)構(gòu)與拐角型結(jié)構(gòu)與“國國”字型結(jié)構(gòu)其實(shí)只是字型結(jié)構(gòu)其實(shí)只是 形式上存在一些區(qū)別，即網(wǎng)頁的最上面是形式上存在一些區(qū)別，即網(wǎng)頁的最上面是 網(wǎng)站的網(wǎng)站的Logo（標(biāo)志）、（標(biāo)志）、Banner（橫幅廣（橫幅廣 告條）和導(dǎo)航欄，中間是當(dāng)前網(wǎng)頁的主要告條）和導(dǎo)航欄，中間是當(dāng)前網(wǎng)頁的主要 內(nèi)容（通常被分成大小不等的兩列，其中內(nèi)容（通常被分成大小不等的兩列，其中 較寬的一列用來放置當(dāng)前網(wǎng)頁的主體內(nèi)較寬

4、的一列用來放置當(dāng)前網(wǎng)頁的主體內(nèi) 容），最下面是網(wǎng)站的版權(quán)聲明等信息。容），最下面是網(wǎng)站的版權(quán)聲明等信息。 LogoBanner 導(dǎo)航欄導(dǎo)航欄 版權(quán)聲明等信息版權(quán)聲明等信息 3. 標(biāo)題正文型 標(biāo)題正文型結(jié)構(gòu)是指網(wǎng)頁的最上面標(biāo)題正文型結(jié)構(gòu)是指網(wǎng)頁的最上面 是當(dāng)前網(wǎng)頁的標(biāo)題或類似的對(duì)象（如修是當(dāng)前網(wǎng)頁的標(biāo)題或類似的對(duì)象（如修 飾性圖像），下面是當(dāng)前網(wǎng)頁的正文。飾性圖像），下面是當(dāng)前網(wǎng)頁的正文。 一些文章頁面或注冊(cè)頁面等就是這一些文章頁面或注冊(cè)頁面等就是這 種類型。種類型。 當(dāng)前頁面的標(biāo)題當(dāng)前頁面的標(biāo)題 當(dāng)前頁面的正文當(dāng)前頁面的正文 4. 左右框架型 左右框架型結(jié)構(gòu)，一般左面是導(dǎo)航左右框架型結(jié)構(gòu)，一般

5、左面是導(dǎo)航 鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或 標(biāo)致，右面是正文。標(biāo)致，右面是正文。 我們見到的大部分的大型論壇都是我們見到的大部分的大型論壇都是 這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采 用。用。 這種類型結(jié)構(gòu)非常清晰，一目了然。這種類型結(jié)構(gòu)非常清晰，一目了然。 當(dāng)前頁面的標(biāo)題當(dāng)前頁面的標(biāo)題 導(dǎo)導(dǎo) 航航 鏈鏈 接接 顯示當(dāng)前鏈接的內(nèi)容顯示當(dāng)前鏈接的內(nèi)容 5. 上下框架型 上下框架型結(jié)構(gòu)與左右框架型類似，上下框架型結(jié)構(gòu)與左右框架型類似， 區(qū)別僅僅在于是一種上下分為兩頁的框區(qū)別僅僅在于是一種上下分為兩頁的框 架。架。 導(dǎo)航鏈接導(dǎo)航鏈接

6、 修修 飾飾 圖圖 案案 顯示當(dāng)前鏈接的內(nèi)容顯示當(dāng)前鏈接的內(nèi)容 6. 封面型 封面型結(jié)構(gòu)一般出現(xiàn)在網(wǎng)站的首頁，封面型結(jié)構(gòu)一般出現(xiàn)在網(wǎng)站的首頁， 大部分是通過精美的平面設(shè)計(jì)并結(jié)合局大部分是通過精美的平面設(shè)計(jì)并結(jié)合局 部的動(dòng)畫效果，之后在網(wǎng)頁中放上幾個(gè)部的動(dòng)畫效果，之后在網(wǎng)頁中放上幾個(gè) 簡(jiǎn)單的鏈接或者僅放一個(gè)簡(jiǎn)單的鏈接或者僅放一個(gè)“進(jìn)入進(jìn)入”或或 “Enter”之類的鏈接，以提示訪問者進(jìn)之類的鏈接，以提示訪問者進(jìn) 入網(wǎng)站的下一級(jí)頁面。入網(wǎng)站的下一級(jí)頁面。 7.Flash動(dòng)畫型 Flash動(dòng)畫型結(jié)構(gòu)與封面型結(jié)構(gòu)類似，動(dòng)畫型結(jié)構(gòu)與封面型結(jié)構(gòu)類似， 只是該結(jié)構(gòu)的網(wǎng)頁是由只是該結(jié)構(gòu)的網(wǎng)頁是由Flash動(dòng)畫

7、組成。動(dòng)畫組成。 由于由于Flash動(dòng)畫具有豐富及強(qiáng)大的交動(dòng)畫具有豐富及強(qiáng)大的交 互功能，所以該結(jié)構(gòu)的網(wǎng)頁可表達(dá)的信互功能，所以該結(jié)構(gòu)的網(wǎng)頁可表達(dá)的信 息更豐富，而且其視聽效果也十分完美。息更豐富，而且其視聽效果也十分完美。 7.2 網(wǎng)頁版式設(shè)計(jì)注意事項(xiàng) n網(wǎng)頁的寬度網(wǎng)頁的寬度 n網(wǎng)頁的高度網(wǎng)頁的高度 n網(wǎng)頁文件大小網(wǎng)頁文件大小 1.網(wǎng)頁的寬度 瀏覽器一般都有一個(gè)瀏覽器一般都有一個(gè)20像素寬的縱向像素寬的縱向 滾動(dòng)條，所以網(wǎng)頁的最大寬度小于或等滾動(dòng)條，所以網(wǎng)頁的最大寬度小于或等 于水平分辨率于水平分辨率-20。 2. 網(wǎng)頁的高度 網(wǎng)頁的高度一般以瀏覽器窗口的屏網(wǎng)頁的高度一般以瀏覽器窗口的屏 數(shù)

8、來度量，網(wǎng)頁的長度一般不宜超過數(shù)來度量，網(wǎng)頁的長度一般不宜超過3屏。屏。 過長的網(wǎng)頁不方便訪問者查找自己過長的網(wǎng)頁不方便訪問者查找自己 想要的內(nèi)容。想要的內(nèi)容。 3. 網(wǎng)頁文件大小 在設(shè)計(jì)網(wǎng)頁時(shí)，必須保證網(wǎng)頁能被在設(shè)計(jì)網(wǎng)頁時(shí)，必須保證網(wǎng)頁能被 訪問者快速地下載，即保證網(wǎng)頁文件體訪問者快速地下載，即保證網(wǎng)頁文件體 積盡可能小。積盡可能小。 一般地，網(wǎng)站的首頁文件（包含所一般地，網(wǎng)站的首頁文件（包含所 有圖像、文本和多媒體對(duì)象）不宜超過有圖像、文本和多媒體對(duì)象）不宜超過 30KB，網(wǎng)站二級(jí)頁面的文件不宜超過，網(wǎng)站二級(jí)頁面的文件不宜超過 45KB。 7.3 頁面布局基本步驟 n設(shè)計(jì)草圖設(shè)計(jì)草圖 n建

9、立本地站點(diǎn)建立本地站點(diǎn) n創(chuàng)建網(wǎng)頁創(chuàng)建網(wǎng)頁 n頁面屬性設(shè)置頁面屬性設(shè)置 n使用表格或使用表格或div劃分頁面區(qū)域劃分頁面區(qū)域 n設(shè)置表格或設(shè)置表格或div屬性屬性 n插入嵌套表格或嵌套插入嵌套表格或嵌套div n添加頁面元素添加頁面元素 n對(duì)頁面元素屬性設(shè)置對(duì)頁面元素屬性設(shè)置 1. 設(shè)計(jì)草圖 2. 建立本地站點(diǎn) 建立一個(gè)文件夾用于管理站點(diǎn)所有文建立一個(gè)文件夾用于管理站點(diǎn)所有文 件，并在件，并在Dreamweaver8中將其設(shè)置為中將其設(shè)置為 站點(diǎn)的根文件夾。站點(diǎn)的根文件夾。 在站點(diǎn)根文件夾中建立一個(gè)在站點(diǎn)根文件夾中建立一個(gè) resources子文件夾，用于存放非網(wǎng)頁子文件夾，用于存放非網(wǎng)頁 文

10、件資源。文件資源。 3. 創(chuàng)建網(wǎng)頁 在站點(diǎn)中新建一個(gè)網(wǎng)頁文件，并命名，在站點(diǎn)中新建一個(gè)網(wǎng)頁文件，并命名， 例如：例如：index.html。 4. 頁面屬性設(shè)置 利用菜單中利用菜單中【修改修改】|【頁面屬性頁面屬性】 命令，進(jìn)行頁面基本設(shè)置。命令，進(jìn)行頁面基本設(shè)置。 包括：包括： n基本文字格式基本文字格式 n頁面背景設(shè)置頁面背景設(shè)置 n鏈接效果設(shè)置鏈接效果設(shè)置 n頁面標(biāo)題頁面標(biāo)題 n編碼編碼 5. 插入表格 根據(jù)設(shè)計(jì)草圖在網(wǎng)頁頁面中添加表格，根據(jù)設(shè)計(jì)草圖在網(wǎng)頁頁面中添加表格， 明確各頁面主要區(qū)域的位置和大小。明確各頁面主要區(qū)域的位置和大小。 注意注意：表格的最上方、最下方、最左側(cè)：表格的最上

11、方、最下方、最左側(cè) 和最右側(cè)的行列可用于和最右側(cè)的行列可用于“區(qū)域間隔區(qū)域間隔”使使 用。用。 6. 表格屬性設(shè)置 對(duì)頁面中的表格的屬性和單元格的屬對(duì)頁面中的表格的屬性和單元格的屬 性進(jìn)行設(shè)置，便于下面頁面元素的添加。性進(jìn)行設(shè)置，便于下面頁面元素的添加。 注意注意：表格的邊框、邊距、間距值通常：表格的邊框、邊距、間距值通常 設(shè)置為設(shè)置為0。 7.插入嵌套表格 在前面添加的區(qū)域表格的某些單元格在前面添加的區(qū)域表格的某些單元格 中添加表格（即嵌套表格），明確各細(xì)中添加表格（即嵌套表格），明確各細(xì) 小部分的位置和大小。小部分的位置和大小。 注意注意：頁面中只要是與其他部分性質(zhì)有：頁面中只要是與其他部

12、分性質(zhì)有 區(qū)別的內(nèi)容，都可以占據(jù)一個(gè)獨(dú)立的小區(qū)別的內(nèi)容，都可以占據(jù)一個(gè)獨(dú)立的小 表格。表格。 8. 添加頁面元素 在頁面相應(yīng)區(qū)域、相應(yīng)表格或單元格在頁面相應(yīng)區(qū)域、相應(yīng)表格或單元格 內(nèi)添加頁面元素（如圖片，文字，鏈接內(nèi)添加頁面元素（如圖片，文字，鏈接 等）。等）。 9. 設(shè)置頁面元素屬性 利用利用CSS對(duì)各頁面元素進(jìn)行格式設(shè)置。對(duì)各頁面元素進(jìn)行格式設(shè)置。 7.4 模板 模板實(shí)質(zhì)上就是一種特殊類型的文檔，模板實(shí)質(zhì)上就是一種特殊類型的文檔， 作為創(chuàng)建其他文檔的基礎(chǔ)，用于設(shè)計(jì)布作為創(chuàng)建其他文檔的基礎(chǔ)，用于設(shè)計(jì)布 局比較固定的頁面結(jié)構(gòu)或元素。局比較固定的頁面結(jié)構(gòu)或元素。 使用模板的好處：使用模板的好處：

13、 n網(wǎng)頁風(fēng)格一致，避免制作同一頁面的麻煩。網(wǎng)頁風(fēng)格一致，避免制作同一頁面的麻煩。 n修改共同的頁面時(shí)，不必一個(gè)一個(gè)修改，只修改共同的頁面時(shí)，不必一個(gè)一個(gè)修改，只 需要更改應(yīng)用模板。需要更改應(yīng)用模板。 如果一個(gè)網(wǎng)站布局比較統(tǒng)一，擁有相如果一個(gè)網(wǎng)站布局比較統(tǒng)一，擁有相 同的導(dǎo)航，并且顯示不同欄目?jī)?nèi)容的位同的導(dǎo)航，并且顯示不同欄目?jī)?nèi)容的位 置基本保持不變，那么這種布局的網(wǎng)站置基本保持不變，那么這種布局的網(wǎng)站 就可以考慮使用模板來創(chuàng)建。就可以考慮使用模板來創(chuàng)建。 n1. 創(chuàng)建模板創(chuàng)建模板 n2. 定義可編輯區(qū)域定義可編輯區(qū)域 n3. 應(yīng)用模板應(yīng)用模板 1. 創(chuàng)建模板 n（1）將網(wǎng)頁另存為模板）將網(wǎng)頁另

14、存為模板 n（2）新建模板）新建模板 （1）將網(wǎng)頁另存為模板 n1）打開一個(gè)存在或已制作好的網(wǎng)頁，刪除其）打開一個(gè)存在或已制作好的網(wǎng)頁，刪除其 中不要的內(nèi)容，選擇中不要的內(nèi)容，選擇【文件文件】|【另存為模板另存為模板】 命令，打開命令，打開【另存為模板另存為模板】對(duì)話框。對(duì)話框。 n2）在）在【站點(diǎn)站點(diǎn)】下拉列表中設(shè)置模板保存的站下拉列表中設(shè)置模板保存的站 點(diǎn)，在點(diǎn)，在【現(xiàn)存的模板現(xiàn)存的模板】列表框中顯示了當(dāng)前站列表框中顯示了當(dāng)前站 點(diǎn)中的已有模板。在點(diǎn)中的已有模板。在【另存為另存為】框中輸入模板框中輸入模板 名稱，單擊名稱，單擊【保持保持】按鈕。按鈕。 （2）新建模板 選擇選擇【文件文件】|

15、【新建新建】命令，打開命令，打開 【新建文檔新建文檔】對(duì)話框，然后在對(duì)話框，然后在【類別類別】 列表中選擇列表中選擇【基本頁基本頁】，并在，并在【基本頁基本頁】 列表中選擇列表中選擇【HTML模板模板】選項(xiàng)。單擊選項(xiàng)。單擊 【創(chuàng)建創(chuàng)建】按鈕。按鈕。 2. 定義可編輯區(qū)域 模板創(chuàng)建之后，需要根據(jù)具體要求對(duì)模板創(chuàng)建之后，需要根據(jù)具體要求對(duì) 模板進(jìn)行編輯，指定哪些區(qū)域可以編輯，模板進(jìn)行編輯，指定哪些區(qū)域可以編輯， 哪些區(qū)域不能編輯。在模板文檔中，可哪些區(qū)域不能編輯。在模板文檔中，可 編輯區(qū)是頁面中可變的區(qū)域，如具體欄編輯區(qū)是頁面中可變的區(qū)域，如具體欄 目區(qū)。不可編輯區(qū)是頁面中不可變的區(qū)目區(qū)。不可編輯區(qū)是頁面中不可變的區(qū) 域，如導(dǎo)航欄和版權(quán)欄等。域，如導(dǎo)航欄和版權(quán)欄等。 定義步驟：定義步驟： n（1）打開新建的模板文件，在文檔中選）打開新建的模板文件，在文檔中選 擇要定義為可編輯區(qū)的區(qū)域。擇要定義為可編輯區(qū)的區(qū)域。 n（2）選擇）選擇【插入插入】|【模板對(duì)象模板對(duì)象】| 【可編輯區(qū)域可編輯區(qū)域】命令。命令。 n（3）在打開的）在打開的【新建