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

考點(diǎn)剖析

【知識(shí)要點(diǎn)】

一、基本概念

1.網(wǎng)頁(yè)

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

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

2.網(wǎng)站

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

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

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

4.制作工具

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

二、Dreamweaver CS3的工作界面

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

Dreamweaver CS3工作界面

1.菜單欄

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

2.文檔工具欄

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

3.文檔窗口

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

4.狀態(tài)欄

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

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

（2）手形工具：對(duì)象大于“文檔”窗口時(shí)，用來移動(dòng)對(duì)象的位置。

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

5.屬性面板

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

6.面板組

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

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

使用標(biāo)尺好網(wǎng)格可以在調(diào)整網(wǎng)頁(yè)中一些對(duì)象的位置和大小時(shí)使操作更加準(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)頁(yè)文檔窗口內(nèi)顯示，在瀏覽器中不會(huì)顯示。

【典型例題】

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

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

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

【答案】 B

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

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

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

C.“表格屬性”面板D.“頁(yè)面屬性”面板

【答案】A

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

能力提升

一、單項(xiàng)選擇題

1.以下說法錯(cuò)誤的是

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

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

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

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

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

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

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

C.頂級(jí)域名D.端口地址

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

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

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

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

6.啟動(dòng)Dreamweaver后，文檔窗口默認(rèn)的視圖模式是

A.設(shè)計(jì)視圖B.擴(kuò)展視圖

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

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

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

B.顯卡的最大分辨率

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

D.整個(gè)Dreamweaver窗口的大小

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

A.超級(jí)鏈接B.電子郵件鏈接

C.命令錨記D.模板

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

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

C.空白D.未命名文檔

10.以下說法錯(cuò)誤的是（）

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

B.啟動(dòng)Dreamweaver后，默認(rèn)的屬性面板是文本屬性面板

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

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

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

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

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

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

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

C.啟動(dòng)Dreamweaver后默認(rèn)的“屬性”面板不同

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

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

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

二、填空題

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

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

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

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

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

二、簡(jiǎn)答題

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

2.簡(jiǎn)述Dreamweaver的工作界面。