第三章 第10講 網(wǎng)頁設(shè)計基礎(chǔ)知識

考點剖析

【知識要點】

一、基本概念

1.網(wǎng)頁

網(wǎng)頁一般又被稱作HTML文檔，是一種可以在互聯(lián)網(wǎng)上傳輸，能被瀏覽器識別和翻譯成網(wǎng)面并顯示出來的文件。網(wǎng)頁分為靜態(tài)網(wǎng)頁（擴展名：html或htm等）和動態(tài)網(wǎng)頁（擴展名：asp、php、jsp等）。

網(wǎng)頁要素：文本、圖像（gif、jpeg）、多媒體元素、超鏈接、腳步程序。

2.網(wǎng)站

網(wǎng)站：網(wǎng)站又稱Wbe站點，是指在網(wǎng)絡(luò)上，根據(jù)一定的規(guī)則，使用網(wǎng)頁開發(fā)軟件制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。網(wǎng)站首頁的主文件名：index、Default，擴展名依照上面網(wǎng)頁。

3.網(wǎng)站、主頁與網(wǎng)頁的關(guān)系

網(wǎng)站是指在網(wǎng)絡(luò)上，根據(jù)一定的規(guī)則，使用網(wǎng)頁開發(fā)軟件制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合，由主頁和其他網(wǎng)頁組成。用戶在瀏覽器的地址欄輸入網(wǎng)址后見到的第一個頁面稱為主頁，主頁是網(wǎng)站中所有網(wǎng)頁的索引頁，通過單擊主頁上的超鏈接可以打開其他的網(wǎng)頁。

4.制作工具

常見的網(wǎng)頁制作工具有DreamWeaver、FrontPage等。

二、Dreamweaver CS3的工作界面

Dreamweaver CS3工作界面主要由標(biāo)題欄、菜單欄、插入欄。文檔工具欄、文檔窗口、屬性面板、狀態(tài)欄、面板組等組成，如下圖所示。

Dreamweaver CS3工作界面

1.菜單欄

1.菜單欄位于Dreamweaver CS3窗口最上方，提供了各種操作命令。在Dreamweaver 其他版本中，“插入記錄”菜單也可能是“插入”菜單。

2.文檔工具欄

“文檔”工具欄提供了視圖模式切換的按鈕和與查看文檔、在本地和遠程站點間傳輸文檔有關(guān)的常用命令和選項，如下圖所示。

3.文檔窗口

文檔處理顯示當(dāng)前打開的文檔，分為“代碼”視圖、“設(shè)計”視圖和同時顯示“代碼”視圖和“設(shè)計”視圖的“拆分”視圖三種視圖模式。啟動Dreamweaver CS3后，默認的文檔窗口視圖為“設(shè)計”視圖。

4.狀態(tài)欄

狀態(tài)欄位于文檔窗口的底部，用于顯示正在編輯的文檔有關(guān)的信息，如下圖所示。

（1）選取工具：用于選取“文檔”窗口內(nèi)的對象。

（2）手形工具：對象大于“文檔”窗口時，用來移動對象的位置。

（3）縮放工具：使用該工具后，單擊“文檔”窗口可增大顯示比例，按下Alt鍵單擊可減小顯示比例。

5.屬性面板

“屬性”面板用于查看和編輯當(dāng)前選定對象的各種屬性。不同頁面元素對應(yīng)的“屬性”面板也不同。啟動Dreamweaver后，默認的屬性面板為文本屬性面板。

6.面板組

單擊面板組與文檔窗口間的“隱藏/顯示面板”按鈕，可以將所有面板隱藏或顯示。

7.標(biāo)尺和網(wǎng)格

使用標(biāo)尺好網(wǎng)格可以在調(diào)整網(wǎng)頁中一些對象的位置和大小時使操作更加準(zhǔn)確。

（1）標(biāo)尺

選擇“查看→標(biāo)尺→顯示”命令，可在文檔窗口的左邊和上邊顯示標(biāo)尺。

（2）網(wǎng)格

選擇“查看→網(wǎng)絡(luò)設(shè)置→顯示網(wǎng)絡(luò)”命令，可以顯示或隱藏網(wǎng)格。注意：標(biāo)尺和網(wǎng)格只在網(wǎng)頁文檔窗口內(nèi)顯示，在瀏覽器中不會顯示。

【典型例題】

【例1】在Dreamweaver中，通過“文檔”工具欄不能完成的操作是（）

A.切換文檔窗口的視圖模式B.修改網(wǎng)頁文件名

C.打開瀏覽器預(yù)覽當(dāng)前網(wǎng)頁D.上傳文件到遠程服務(wù)器

【答案】 B

【分析】文檔工具欄提供了視圖模式切換按鈕和預(yù)覽文檔、傳輸文檔等命令和選項，通過工具欄上的“標(biāo)題”框可以修改當(dāng)前網(wǎng)頁的標(biāo)題，但不能修改網(wǎng)頁文件名。

【例2】在Dreamweaver中，默認顯示的屬性面板是（）

A.“文本屬性”面板B.“圖像屬性”面板

C.“表格屬性”面板D.“頁面屬性”面板

【答案】A

【分析】啟動Dreamweaver后，默認的屬性面板是文本屬性面板，只有在頁面中選擇了其他頁面元素，才會顯示對應(yīng)的屬性面板。

能力提升

一、單項選擇題

1.以下說法錯誤的是

A.WWW在服務(wù)上采用是客戶機/服務(wù)器模式

B.Dreamweaver是集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和管理于一體的軟件

C.所有網(wǎng)頁的擴展名必須是htm或html才能被訪問

D.一個網(wǎng)站只能有一個主頁

2.在Dreamweaver的工作窗口中，用來提供與正在編程的文檔有關(guān)的信息和工具的（）A屬性面板B狀態(tài)欄C標(biāo)簽選擇器D插入欄

3.新浪網(wǎng)的網(wǎng)址是http://www.sina.com.cn，其中http是指（）

A主機名稱B.協(xié)議名稱

C.頂級域名D.端口地址

4.在Dreamweaver的啟動界面中，不能完成的操作是（）

A.打開最近編輯過的網(wǎng)友文件B.創(chuàng)建一個新網(wǎng)頁文件

C.選擇文檔窗口的視圖模式D.查看新增的功能

5.以下不屬于插入欄類別的是（）A.常用B.數(shù)據(jù)C應(yīng)用程序D.收藏夾

6.啟動Dreamweaver后，文檔窗口默認的視圖模式是

A.設(shè)計視圖B.擴展視圖

C.代碼視圖D.布局視圖

7.在Dreamweaver中的狀態(tài)欄上“1024×768”的含義是（）

A.當(dāng)前文檔窗口的大小

B.顯卡的最大分辨率

C.當(dāng)前被選中圖像的像素大小

D.整個Dreamweaver窗口的大小

8.在插入工具欄中，按鈕 的含義是（）

A.超級鏈接B.電子郵件鏈接

C.命令錨記D.模板

9.在“科技在線”站點中新建一個網(wǎng)頁文件時，默認的網(wǎng)頁標(biāo)題是（）

A.科技在線B.無標(biāo)題文件

C.空白D.未命名文檔

10.以下說法錯誤的是（）

A.通過標(biāo)簽選擇器可以選擇各種頁面元素

B.啟動Dreamweaver后，默認的屬性面板是文本屬性面板

C.狀態(tài)欄上手形工具的作用是增加或減少顯示比例

D.要切換各種視圖模式，可通過文檔工具欄來實現(xiàn)

11.在Dreamweaver中，要打開或隱藏各種面板，可使用的菜單是（）

A.命令B.窗口C.查看D.編輯

12.關(guān)于屬性面板，以下說法錯誤的是（）

A可以用來設(shè)置當(dāng)前網(wǎng)頁的頁面屬性

B.主要用于查看和編輯當(dāng)前選定對象的各種屬性

C.啟動Dreamweaver后默認的“屬性”面板不同

D.不同頁面元素對應(yīng)的“屬性”面板不同

13.設(shè)置標(biāo)尺的尺寸單位時，不包括的單位是（）

A.像素B.百分比C.英寸D.厘米

二、填空題

1＿＿＿＿是指在網(wǎng)絡(luò)上，根據(jù)一定的規(guī)則，使用網(wǎng)頁開發(fā)軟件制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。

2.當(dāng)用戶在瀏覽器的地址欄中輸入網(wǎng)址后看見的第一個頁面稱為＿＿＿＿。

3.WWW在服務(wù)上采用的是＿＿＿＿模式。

4.在＿＿＿＿視圖中可在一個窗口中同時看到同一文檔的“代碼”視圖和“設(shè)計”視圖。

5.使用縮放工具時，按下＿＿＿＿鍵在窗口中單擊可減小顯示比例。

二、簡答題

1.簡述網(wǎng)站、主頁與網(wǎng)頁的關(guān)系

2.簡述Dreamweaver的工作界面。