1、目錄第五章 網頁制作25.1.Web簡介25.1.1.網站工作機制25.1.2.網站設計流程35.1.3.網站設計原則45.1.4.優秀網站案例解析55.2.Dreamweaver初步85.2.1.Dreamweaver介紹85.2.2.站點的簡介和規劃135.2.3.創建本地站點145.2.4.使用站點地圖175.3.網頁設計初步185.3.1.創建文本網頁185.3.2.使用表格規劃網頁布局205.3.3.使用層規劃網頁布局245.3.4.制作圖文混排網頁275.3.5.制作超級鏈接305.4.網頁設計進階325.4.1.制作多媒體網頁325.4.2.制作表單網頁345.4.3.使用CSS

2、樣式365.4.4.使用模板批量制作網頁435.5.網站運營及維護455.5.1.站點測試455.5.2.站點管理495.5.3.站點發布51第五章 網頁制作本章將介紹使用計算機過程中常用的一系列工具軟件。其中包含常用輔助工具、電子郵件客戶端軟件、多媒體瀏覽和播放工具、安全軟件等。5.1. Web簡介Web 是Internet提供的一種服務，通過它可以訪問遍布于Internet主機上的鏈接文檔；是存儲在全世界Internet計算機中的數量巨大的文檔的集合；Web 上海量的信息是由彼此關聯的文檔組成，這些文檔稱為主頁（Home Page）或頁面（Page），它是一種超文本（Hypertext）信

3、息，而使其連接在一起的是超鏈接（Hyperlink）。 HTML是什么? HTML是Hypertext Markup Language（超文本標記語言）的縮寫，它是構成Web頁面（Page）的主要工具。在網上，如果要向全球范圍內出版和發布信息，需要有一種能夠被廣泛理解的語言，即所有的計算機都能夠理解的一種用于出版的“母語”。WWW（World Wide Web）所使用的出版語言就是HTML語言。 什么是動態HTML？動態HTML（DHTML）不僅是一種獨特的技術、計算機語言或功能集，而是綜合了幾種不同技術相互作用的方式。動態HTML（DHTML）可以讓您使用常規DHTML、腳本文件、文檔對象模

4、塊、絕對定位技術、動態樣式、多媒體過濾器和各種其他技術動態改變HTML在屏幕上顯示文本和圖像的方式。 什么是Flash? 由Macromedia 公司出品的網頁制作“三劍客”軟件之一。是一個專業的網頁動畫制作軟件。它生成的動畫可嵌入聲音、電影、圖形等各種文件，另還可與等相結合進行編程，進行交互性更強的控制。5.1.1. 網站工作機制互聯網http網頁文件圖像等www服務器空瀏覽器返回結果圖 5- 1 網站工作機制5.1.2. 網站設計流程網站的整體策劃是一個系統工程，是在建設網站之前進行的必要工作。網站建設總體流程一般分為市場調查、市場分析、制定網站技術方案、規劃網站內容、前臺界面設計、后臺程

5、序開發、網站測試、網站發布、網站推廣、網站維護等流程。1、 市場調查2、 市場分析3、 制定網站技術方案4、 規劃網站內容5、 前臺界面設計6、 后臺程序開發7、 網站測試8、 網站發布9、 網站推廣10、 網站維護5.1.3. 網站設計原則1、 網站設計原則在網站設計階段應注意盡心籌劃、盡量精簡、盡量簡樸、善用圖片、易于漫游、重點突出、循環利用現有信息、保持新鮮感、貫徹諾言、吸引用戶。2、 網站的組織結構設計原則在網站組織結構設計時，應考慮網站組織結構良好，對文件、目錄等的組織和命名預先規劃好。目錄結構保證相近內容放在一起；文件、目錄命名規范，且不含特殊字符；URL鏈接方式統一。3、 網頁布

6、局原則在網頁布局設置時，應注重醒目性、創造性、造型性、明快性、可讀性，總結為統一、協調、流動、強調、均衡。5.1.4. 優秀網站案例解析1、 Google中國網站首頁特點：谷歌公司的標準主頁，醒目的標志、創造性的精簡界面、主題功能突出。頁面結構：導航欄搜索框導航欄圖 5- 2 谷歌首頁簡潔版2、 iGoogle中國網站首頁特點：谷歌公司的另一種首頁界面模式，在突出搜索功能的前提下，注重信息顯示的多樣性、強大的自定義能力。導航欄搜索框自定義信息圖 5- 3谷歌首頁綜合信息版圖 5- 4易中天新浪博客3、 易中天新浪博客特點：突出文化氛圍、內容清晰、結構簡單。文化氛圍Banner信息博客內容個人信

7、息4、 淘寶網圖 5- 5淘寶網首頁特點：目標是盡量多的展示商品，所以結構復雜，且各種多媒體技術應用非常多。Banner導航欄目導航欄、搜索廣告內容內容內容內容內容內容公司信息圖 5- 6蘋果公司首頁5、 蘋果公司首頁特點：追求質量、追求細節。簡潔的界面中體現公司的品質追求。導航欄主打產品介紹產品產品圖 5- 7魔獸世界首頁6、 魔獸世界首頁特點：突出內容，以內涵吸引用戶。廣告浮動游戲Banner廣告浮動開通賬號首頁鏈接游戲內容5.2. Dreamweaver初步5.2.1. Dreamweaver介紹Dreamweaver 8.0是Macromedia 公司推出的目前最新版本的網頁設計軟件，

8、站點管理和頁面設計是它的兩大核心功能，它采用多種先進的技術，易學、易用。只要掌握初步的知識，再加上自己的創意，即可制作出獨樹一幟的網頁。本節重點介紹在Dreamweaver 8.0中如何創建站點并進行站點管理，從而為下一步開發網站做好準備，同時，通過本章的學習使讀者熟悉Dreamweaver 8.0界面及運行環境。在使用Dreamweaver開發網站之前，首先需要熟悉一下Dreamweaver的啟動及設計環境。通過本節可以使大家了解Dreamweaver 8.0這個網頁制作軟件的“廬山真面目”，會使后面的學習變得更加輕松，上手更加迅速。1、 Dreamweaver 8.0的啟動步驟（1） 單擊

9、任務欄“開始”按鈕，選擇“程序”命令。（2） 將光標向右移動，選擇Macromedia文件夾。（3） 將光標再向右移動，單擊Macromedia Dreamweaver 8.0圖標，Dreamweaver 8.0就被啟動了。 圖 5- 8“工作區設置”界面 圖 5- 9改變工作區2、 Dreamweaver 8.0的工作環境面板組文件面板文檔編輯窗口插入面板組文檔工具欄標簽狀態欄屬性面板標題欄菜單欄圖 5- 10 Dreamweaver 8.0工作界面3、 “插入”面板組 圖 5- 11“插入”欄中的選項圖 5- 12“插入”欄以標簽顯示4、 文檔工具欄圖 5- 13文檔工具欄 5、 “屬性”

10、檢查器圖 5- 14圖像“屬性”檢查器6、 文檔編輯窗口網頁文檔編輯窗口是Dreamweaver 8.0的主工作區，在這里可以進行網頁的設計制作。（a）文檔編輯窗口的縮放圖 5- 15最大化文檔窗口按鈕（b）文檔編輯窗口的標題欄（c）縮放工具和手形工具（d）標尺和輔助線7、 面板組Dreamweaver 8.0默認的面板組有以下4個。（a）CSS面板組（b）“應用程序”面板組 圖 5- 16 CSS面板組 圖 5- 17“應用程序”面板組（c）“標簽”面板組（d）“文件”面板組8、 浮動面板組的操作常用的浮動面板組的操作方法如下。（1）展開和折疊浮動面板組圖 5- 18重新組合浮動面板圖1-1

11、8 （2）移動浮動面板組（3）重新組合浮動面板5.2.2. 站點的簡介和規劃1、 網站網站（英文：Website）是指在互聯網上，根據一定的規則，使用HTML等工具制作的用于展示特定內容的相關網頁的集合。簡單地說，網站是一種通信工具，就像布告欄一樣，人們可以通過網站來發布自己想要公開的信息，或者利用網站來提供相關的網絡服務。人們可以通過網頁瀏覽器來訪問網站，獲取自己需要的信息或者享受網絡服務。2、 網頁網頁（英文：Web page）是一個文件，他存放在世界某個角落的某一部計算機中，而這部計算機必須是與互聯網相連的。首頁，亦稱主頁、起始頁，是用戶打開瀏覽器時自動打開的一個或多個網頁。首頁也可以指

12、一個網站的入口網頁，即打開網站后看到的第一個頁面，大多數作為首頁的文件名是index、default、main或portal加上擴展名。3、 網站和網頁的關系網站是多個網頁的集合，其包括一個首頁和若干個分頁，這種集合不是簡單的集合。為了達到最佳效果，在創建任何 Web 站點頁面之前，要對站點的結構進行設計和規劃。決定要創建多少頁，每頁上顯示什么內容，頁面布局的外觀以及各頁是如何互相連接起來的。5.2.3. 創建本地站點在Dreamweave 8中可以有效的建立并管理多個站點。搭建站點可以有兩種方法，一是利用向導完成，二是利用高級設定來完成。在搭建站點前，我們先在自己的電腦硬盤上建一個以英文或數

13、字命名的空文件夾。1、 管理站點圖 5- 19管理站點選擇菜單欄站點管理站點，出現“管理站點”對話框。點擊“新建”按鈕，選擇彈出菜單中的“站點”項。 圖 5- 20創建站點圖 5- 21創建站點圖 5- 22創建站點圖 5- 23創建站點到此，我們完成了站點的創建。2、 搭建站點結構3、 文件與文件夾的管理圖 5- 24創建站點圖 5- 25 文件夾視圖5.2.4. 使用站點地圖圖 5- 26站點地圖視圖 圖 5- 27創建站點地圖圖 5- 28站點地圖配置5.3. 網頁設計初步5.3.1. 創建文本網頁1、 插入文本2、 設置文本屬性圖 5- 29文本屬性面板圖 5- 30調色板3、 編輯字

14、體列表圖 5- 31編輯字體列表對話框5.3.2. 使用表格規劃網頁布局1、 插入表格圖 5- 32表格按鈕 圖 5- 33表格屬性設置對話框2、 設置表格屬性圖 5- 34表格屬性3、 設置單元格屬性 圖 5- 35單元格屬性4、 表格的行和列圖 5- 36插入行列5、 拆分與合并單元格圖 5- 37拆分單元格5.3.3. 使用層規劃網頁布局1、 創建普通層（1）插入層圖 5- 38插入層（2）拖放層圖 5- 39拖放層（3）繪制層2、 創建嵌套層圖 5- 40嵌套層3、 設置層的屬性圖 5- 41層屬性5.3.4. 制作圖文混排網頁1、 插入圖像圖 5- 42插入圖像圖 5- 43選擇圖像

15、文件2、 設置圖像屬性圖 5- 44設置圖像屬性3、 插入其它圖像元素圖 5- 45插入圖像占位符圖 5- 46插入鼠標經過圖像5.3.5. 制作超級鏈接1、 超級鏈接及其分類2、 超級鏈接的創建圖 5- 47在屬性面板直接輸入要鏈接的對象圖 5- 48在屬性面板直接拖曳“指向文件”圖標指向要鏈接的對象3、 超級鏈接的設置4、 錨記鏈接（1）插入“錨記”圖 5- 49命名錨記對話框（2）錨記鏈接5、 郵箱鏈接圖 5- 50插入電子郵件鏈接6、 下載文件鏈接7、 空鏈接5.4. 網頁設計進階5.4.1. 制作多媒體網頁1、插入Flash動畫圖 5- 51插入Flash 圖 5- 52插入設置透明

16、背景2、插入Flash文本圖 5- 53插入Flash按鈕3、插入Flash按鈕 5.4.2. 制作表單網頁1、 插入表單（1）將插入點放在希望表單出現的位置。選擇“插入”>“表單”，或選擇“插入”欄上的“表單”類別，然后單擊“表單”圖標，（2）用鼠標選中表單，在屬性面板上可以設置表單的各項屬性。圖 5- 54表單屬性2、 簡單案例（1）新建一個網頁文件，選擇表單插入欄，插入表單，將光標放置在表單內，插入一個5行2列的表格，將第1、5行合并。分別在第2、3行插入文本字段，在第4行插入文本區域，在第5行插入兩個按鈕。圖 5- 55表單效果（2）制作網頁跳轉菜單圖 5- 56制作跳轉表單圖

17、5- 57跳轉表單中輸入內容5.4.3. 使用CSS樣式1、 了解 CSS以下為引用的內容：H1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;2、 在 Dreamweaver 中可以定義以下規則類型:（1） 創建新的樣式表選擇"文件">"新建"。在"新建文檔"對話框中的"類別"列中選擇"基本頁"，在"基本頁"列中選擇"CSS"，然后單擊"創建"。圖 5- 5

18、8新建CSS文檔在樣式表中鍵入以下代碼:p font-family: Verdana, sans-serif; font-size: 11px; color: #000000; line-height: 18px; padding: 3px; 圖 5- 59瀏覽、修改CSS內容（2） 附加樣式表當您將樣式表附加到 Web 頁面中時，在樣式表中定義的規則將應用到頁面上的相應元素。例如，當您將 cafe_townsend.css 樣式表附加到 index.html 頁時，將根據您定義的 CSS 規則設置所有段落文本(用 HTML 代碼中的標簽設置格式的文本)的格式。 在"文檔"

19、窗口中，打開 Cafe Townsend 的 index.html 文件。(如果該文件已打開，則請單擊它的選項卡。)選擇在教程:向頁面添加內容中粘貼到頁面中的第一段文本。圖 5- 60選擇要設置CSS的文本在"屬性"檢查器中查看，并確保使用段落標簽設置了該段落的格式。如果"屬性"檢查器中的"格式"彈出式菜單顯示"段落"，則已使用段落標簽設置了段落的格式。如果"屬性"檢查器中的"格式"彈出式菜單顯示"無"或其它內容，則選擇"段落"來設置段

20、落的格式。圖 5- 61 設置CSS 對第二段重復第 3 步。在"CSS 樣式"面板("窗口">"CSS 樣式")中，單擊位于面板右下角的"附加樣式表"按鈕。圖 5- 62 點擊附加樣式表圖 5- 63 選擇樣式（3） 研究"CSS 樣式"面板（4） 創建新的 CSS 規則圖 5- 64新建CSS規則圖 5- 65 CSS規則定義界面圖 5- 66選擇CSS設置文本5.4.4. 使用模板批量制作網頁1、 建立模板（1）模板頁面 （2）設定可編輯區域 2、 使用模板批量制作網頁 （1）根據模

21、板新建頁面 命令：FileNew From Template。 （2）對一個已經有內容的頁面應用模板 命令：ModifyTemplateApply Template to Page。 （3）更新模板以全面更新站點 另外一種方法是執行ModifyTemplateUpdate Pages命令。 5.5. 網站運營及維護5.5.1. 站點測試1、 兼容性測試（1） 打開前面制作的網站的主頁，單擊“文檔”工具欄中的 按鈕，在彈出的下拉菜單中選擇“設置”。（2） 打開“目標瀏覽器”對話框，在對話框中選擇要檢測的瀏覽器，在右側的下拉列表中選擇對應瀏覽器的最低版本。單擊“確定”按鈕，關閉對話框，完成要測試的

22、目標瀏覽器的設置，如圖5-69所示。圖 5- 67選擇“設置”命令 圖 5- 68設置“目標瀏覽器”對話框（3） 選擇“文件”>“檢查頁”>“檢查目標瀏覽器”菜單，在“結果”面板組中的“目標瀏覽器檢查”面板中將顯示檢查結果，如圖5-70所示。圖 5- 69“目標瀏覽器檢查”面板（4） 單擊“目標瀏覽器檢查”面板左上方的 按鈕，在彈出的下拉菜單中選擇“檢查整個當前本地站點的目標瀏覽器”選項，以對站點中所有Web頁面進行目標瀏覽器的兼容性檢查。（5） 單擊“目標瀏覽器檢查”面板左側的 按鈕，瀏覽器中會顯示出檢查報告，如圖5-71所示。圖 5- 70顯示檢查報告（6） 單擊“目標瀏覽器檢

23、查”面板左側的 按鈕，可保存檢查結果。（7） 雙擊“目標瀏覽器檢查”面板中的錯誤信息，系統自動切換至“拆分”視圖，并選中有問題的標記。（8） 將有問題的代碼修改或者刪除，以修正錯誤。2、 檢查網頁鏈接（1） 檢查頁面鏈接a) 在Dreamweaver中打開要檢查的網頁文檔（可繼續在SM站點中進行操作）。b) 選擇“文件”>“檢查頁”>“檢查鏈接”菜單，“結果”面板組中的“鏈接檢查器”面板中將顯示檢查的結果。c) 在“顯示”下拉列表中可選擇要查看的鏈接類型。圖 5- 71選擇要查看的鏈接類型（2） 檢查站點中某部分的鏈接a) 擇“窗口”>“文件”菜單，打開“文件”面板。在“文件

24、”面板中選擇要檢查的文件或文件夾。b) 在選中的文件或文件夾上單擊鼠標右鍵，在彈出的快捷菜單中選擇“檢查鏈接”>“選擇文件/文件夾”菜單，如圖5-73所示。 c) 檢查結果將顯示在“結果”面板組的“鏈接檢查器”面板中。同樣地，在“顯示”下拉列表中可選擇要查看的鏈接類型。（3） 檢查站點范圍的鏈接a) 首先在“文件”面板中選擇要檢查的站點。b) 右鍵單擊站點根文件夾，在彈出的下拉菜單中選擇“檢查鏈接”>“整個本地站點”，如圖5-21所示。 圖 5- 72檢查部分鏈接 圖 5- 73檢查整個站點范圍的鏈接3、 修復網頁鏈接（1） 在“斷掉的鏈接”列表中，單擊“斷掉的鏈接”列中出錯的項，

25、該列變為可編輯狀態，如圖5-22所示。圖 5- 74斷掉的鏈接（2） 重新輸入鏈接文件的路徑或者單擊右側的 圖標，在彈出的“選擇文件”對話框中重新選擇鏈接的文檔，此處按【Delete】鍵刪除。（3） 下面還有幾個文件與其有相同的錯誤，當修改完上述鏈接后，系統彈出提示框，詢問是否修正其他引用該文件的非法鏈接。（4） 單擊“是”按鈕關閉提示框，系統自動修正其他鏈接。5.5.2. 站點管理1、 申請空間和域名2、 申請空間3、 申請域名（1）域名基礎知識域名可分為頂級域名（一級域名）、二級域名和三級域名等。以com、net、gov、edu為后綴的域名稱為國際域名。以cn為后綴的域名稱為國內域名。（2）申請域名5.5.3. 站點發布1、 設置站點