第三章 第10講 網頁設計基礎知識
考點剖析
【知識要點】
一、基本概念
1.網頁
網頁一般又被稱作HTML文檔，是一種可以在互聯網上傳輸，能被瀏覽器識別和翻譯成網面并顯示出來的文件。網頁分為靜態網頁（擴展名：html或htm等）和動態網頁（擴展名：asp、php、jsp等）。
網頁要素：文本、圖像（gif、jpeg）、多媒體元素、超鏈接、腳步程序。
2.網站
網站：網站又稱Wbe站點，是指在網絡上，根據一定的規則，使用網頁開發軟件制作的用于展示特定內容的相關網頁的集合。網站首頁的主文件名：index、Default，擴展名依照上面網頁。
3.網站、主頁與網頁的關系
網站是指在網絡上，根據一定的規則，使用網頁開發軟件制作的用于展示特定內容的相關網頁的集合，由主頁和其他網頁組成。用戶在瀏覽器的地址欄輸入網址后見到的第一個頁面稱為主頁，主頁是網站中所有網頁的索引頁，通過單擊主頁上的超鏈接可以打開其他的網頁。
4.制作工具
常見的網頁制作工具有DreamWeaver、FrontPage等。
二、Dreamweaver CS3的工作界面
Dreamweaver CS3工作界面主要由標題欄、菜單欄、插入欄。文檔工具欄、文檔窗口、屬性面板、狀態欄、面板組等組成，如下圖所示。
Dreamweaver CS3工作界面
1.菜單欄
1.菜單欄位于Dreamweaver CS3窗口最上方，提供了各種操作命令。在Dreamweaver 其他版本中，“插入記錄”菜單也可能是“插入”菜單。
2.文檔工具欄
“文檔”工具欄提供了視圖模式切換的按鈕和與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令和選項，如下圖所示。
3.文檔窗口
文檔處理顯示當前打開的文檔，分為“代碼”視圖、“設計”視圖和同時顯示“代碼”視圖和“設計”視圖的“拆分”視圖三種視圖模式。啟動Dreamweaver CS3后，默認的文檔窗口視圖為“設計”視圖。
4.狀態欄
狀態欄位于文檔窗口的底部，用于顯示正在編輯的文檔有關的信息，如下圖所示。
（1）選取工具：用于選取“文檔”窗口內的對象。
（2）手形工具：對象大于“文檔”窗口時，用來移動對象的位置。
（3）縮放工具：使用該工具后，單擊“文檔”窗口可增大顯示比例，按下Alt鍵單擊可減小顯示比例。
5.屬性面板
“屬性”面板用于查看和編輯當前選定對象的各種屬性。不同頁面元素對應的“屬性”面板也不同。啟動Dreamweaver后，默認的屬性面板為文本屬性面板。
6.面板組
單擊面板組與文檔窗口間的“隱藏/顯示面板”按鈕，可以將所有面板隱藏或顯示。
7.標尺和網格
使用標尺好網格可以在調整網頁中一些對象的位置和大小時使操作更加準確。
（1）標尺
選擇“查看→標尺→顯示”命令，可在文檔窗口的左邊和上邊顯示標尺。
（2）網格
選擇“查看→網絡設置→顯示網絡”命令，可以顯示或隱藏網格。注意：標尺和網格只在網頁文檔窗口內顯示，在瀏覽器中不會顯示。
【典型例題】
【例1】在Dreamweaver中，通過“文檔”工具欄不能完成的操作是（）
A.切換文檔窗口的視圖模式B.修改網頁文件名
C.打開瀏覽器預覽當前網頁D.上傳文件到遠程服務器
【答案】 B
【分析】文檔工具欄提供了視圖模式切換按鈕和預覽文檔、傳輸文檔等命令和選項，通過工具欄上的“標題”框可以修改當前網頁的標題，但不能修改網頁文件名。
【例2】在Dreamweaver中，默認顯示的屬性面板是（）
A.“文本屬性”面板B.“圖像屬性”面板
C.“表格屬性”面板D.“頁面屬性”面板
【答案】A
【分析】啟動Dreamweaver后，默認的屬性面板是文本屬性面板，只有在頁面中選擇了其他頁面元素，才會顯示對應的屬性面板。
能力提升
一、單項選擇題
1.以下說法錯誤的是
A.WWW在服務上采用是客戶機/服務器模式
B.Dreamweaver是集網頁設計、網站開發和管理于一體的軟件
C.所有網頁的擴展名必須是htm或html才能被訪問
D.一個網站只能有一個主頁
2.在Dreamweaver的工作窗口中，用來提供與正在編程的文檔有關的信息和工具的（）A屬性面板B狀態欄C標簽選擇器D插入欄
3.新浪網的網址是http://www.sina.com.cn，其中http是指（）
A主機名稱B.協議名稱
C.頂級域名D.端口地址
4.在Dreamweaver的啟動界面中，不能完成的操作是（）
A.打開最近編輯過的網友文件B.創建一個新網頁文件
C.選擇文檔窗口的視圖模式D.查看新增的功能
5.以下不屬于插入欄類別的是（）A.常用B.數據C應用程序D.收藏夾
6.啟動Dreamweaver后，文檔窗口默認的視圖模式是
A.設計視圖B.擴展視圖
C.代碼視圖D.布局視圖
7.在Dreamweaver中的狀態欄上“1024×768”的含義是（）
A.當前文檔窗口的大小
B.顯卡的最大分辨率
C.當前被選中圖像的像素大小
D.整個Dreamweaver窗口的大小
8.在插入工具欄中，按鈕 的含義是（）
A.超級鏈接B.電子郵件鏈接
C.命令錨記D.模板
9.在“科技在線”站點中新建一個網頁文件時，默認的網頁標題是（）
A.科技在線B.無標題文件
C.空白D.未命名文檔
10.以下說法錯誤的是（）
A.通過標簽選擇器可以選擇各種頁面元素
B.啟動Dreamweaver后，默認的屬性面板是文本屬性面板
C.狀態欄上手形工具的作用是增加或減少顯示比例
D.要切換各種視圖模式，可通過文檔工具欄來實現
11.在Dreamweaver中，要打開或隱藏各種面板，可使用的菜單是（）
A.命令B.窗口C.查看D.編輯
12.關于屬性面板，以下說法錯誤的是（）
A可以用來設置當前網頁的頁面屬性
B.主要用于查看和編輯當前選定對象的各種屬性
C.啟動Dreamweaver后默認的“屬性”面板不同
D.不同頁面元素對應的“屬性”面板不同
13.設置標尺的尺寸單位時，不包括的單位是（）
A.像素B.百分比C.英寸D.厘米
二、填空題
1＿＿＿＿是指在網絡上，根據一定的規則，使用網頁開發軟件制作的用于展示特定內容的相關網頁的集合。
2.當用戶在瀏覽器的地址欄中輸入網址后看見的第一個頁面稱為＿＿＿＿。
3.WWW在服務上采用的是＿＿＿＿模式。
4.在＿＿＿＿視圖中可在一個窗口中同時看到同一文檔的“代碼”視圖和“設計”視圖。
5.使用縮放工具時，按下＿＿＿＿鍵在窗口中單擊可減小顯示比例。
二、簡答題
1.簡述網站、主頁與網頁的關系
2.簡述Dreamweaver的工作界面。