国产AV88|国产乱妇无码在线观看|国产影院精品在线观看十分钟福利|免费看橹橹网站

APP內(nèi)閱讀

20469 網(wǎng)頁制作教程

發(fā)布時間：2022-8-25 | 雜志分類：其他
免費制作
更多內(nèi)容

20469 網(wǎng)頁制作教程

第 2 章 HTML 簡介 41 容，每一對<td>…</td>表示一行，每一對<th>…</th>表示標題單元，每一對<td>…</td>則表示表格內(nèi)容單元。 其運行結(jié)果如圖 2-11 所示。 圖 2-11 表格標記實例 2.3.9 框架標記有時候，為了頁面和版面的需要，在同一個頁面上同時顯示多個 HTML 文件。這時，就可以使用框架。有關(guān)框架的元素有： <frameset>：定義一個框架容器。 <frame>：定義一個框架，并制定子區(qū)所對應(yīng)的網(wǎng)頁地址。 <noframe>：若瀏覽器不支持框架時，顯示相關(guān)信息給訪問者。其中<frameset>有 rows 和 cols 兩個屬性來分別控制多重框架的高度和寬度，既可用百分比表示，又可用像素來表示，其中的“*”表示除其他部分外所剩余的部分。并且<frameset>…</frameset>的后半部分“</frameset>”可以省略。 【例 2-12】框架示例。 <html&... [收起]
[展開]
20469 網(wǎng)頁制作教程
粉絲: {{bookData.followerCount}}
文本內(nèi)容
{{isCollapse?'展開':'收起'}}
第51頁

第 2 章 HTML 簡介 41

容，每一對<td>…</td>表示一行，每一對<th>…</th>表示標題單元，每一對<td>…</td>

則表示表格內(nèi)容單元。

其運行結(jié)果如圖 2-11 所示。

圖 2-11 表格標記實例

2.3.9 框架標記

有時候，為了頁面和版面的需要，在同一個頁面上同時顯示多個 HTML 文件。這時，

就可以使用框架。有關(guān)框架的元素有：

 <frameset>：定義一個框架容器。

 <frame>：定義一個框架，并制定子區(qū)所對應(yīng)的網(wǎng)頁地址。

 <noframe>：若瀏覽器不支持框架時，顯示相關(guān)信息給訪問者。

其中<frameset>有 rows 和 cols 兩個屬性來分別控制多重框架的高度和寬度，既可用百

分比表示，又可用像素來表示，其中的“*”表示除其他部分外所剩余的部分。并且

<frameset>…</frameset>的后半部分“</frameset>”可以省略。

【例 2-12】框架示例。

<html>

<head><title>框架結(jié)構(gòu)示例</title></head>

<frameset cols="40%,*">

<frame src="2-1.html">

<frame src="2-4.html">

<noframe>

第52頁

42 網(wǎng)頁制作教程

該瀏覽器不支持框架

</noframe>

</frameset>

</html>

其運行結(jié)果如圖 2-12 所示。

圖 2-12 框架標記實例

但要注意，若在一個 HTML 文檔中使用了<frameset>標記，就不能再使用<body>標記，

如果在<frameset>定義中使用了<body>標記，則瀏覽器將只解釋<body>包含的內(nèi)容，而忽

略<frameset>的內(nèi)容。

2.3.10 其他一些常用標記

1．正文標題

HTML 用<h1>到<h6>這幾個標簽來定義正文標題，從大到小。每個正文標題自成

一段。

【例 2-13】正文標題示例。

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

運行效果如圖 2-13 所示。

第53頁

第 2 章 HTML 簡介 43

圖 2-13 正文標題實例

2．<div>標記

HTML 的<div>標記是塊級元素，它是可用于組合其他 HTML 元素的容器。<div>標

記沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。如

果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。

<div>標記的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。

使用<table>標記進行文檔布局不是表格的正確用法。<table>標記的作用是顯示表格化的

數(shù)據(jù)。

【例 2-14】DIV 示例。

<html>

<head>

<title>div 布局實例</title>

<style type="text/css">

div#container{width:500px}

div#header{background-color:#99bbbb;}

div#menu{background-color:#ffff99; height:200px; width:100px; float:left;}

div#content{background-color:#EEEEEE;height:200px; width:400px; float:left;}

div#footer {background-color:#99bbbb; clear:both; text-align:center;}

h1 {margin-bottom:0;}

h2 {margin-bottom:0; font-size:14px;}

ul {margin:0;}

li {list-style:none;}

第54頁

44 網(wǎng)頁制作教程

</style>

</head>

<body>

<div id="container">

<div id="header">

<h1>網(wǎng)頁頭部</h1>

</div>

<div id="menu">

<h2>Menu</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

</div>

<div id="content">網(wǎng)頁內(nèi)容</div>

<div id="footer">其他信息</div>

</div>

</body>

</html>

運行效果如圖 2-14 所示。

圖 2-14 DIV 布局實例

第55頁

第 2 章 HTML 簡介 45

3．<span>標記

HTML 的<span> 標記是內(nèi)聯(lián)元素，可用作文本的容器。<span> 元素也沒有特定的含

義。當與 CSS 一同使用時，<span>標記可用于為部分文本設(shè)置樣式屬性。

本 章 小 結(jié)

本文主要介紹了 HTML 的基本概念及其語法。HTML 標記是 HTML 語言的基礎(chǔ)。通

過介紹 HTML 標記符，使讀者基本了解和掌握使用 HTML 語言設(shè)計和制作網(wǎng)頁（包括文

字、圖像、鏈接、表格、表單、框架等）的方法。

習 題

選擇題

1．用 HTML 標記語言編寫一個簡單的網(wǎng)頁，網(wǎng)頁最基本的結(jié)構(gòu)是（ ）。

A．<html><head>…</head><frame>…</frame></html>

B．<html><title>…</title><body>…</body></html>

C．<html><title>…</title><frame>…</frame></html>

D．<html><head>…</head><body>…</body></html>

2．為了標識一個 HTML 文件應(yīng)該使用的 HTML 標記是（ ）。

A．<p></p> B．<body></body>

C．<html></html> D．<table></table>

3．下面哪一個屬性不是文本的標簽屬性？（ ）

A．size B．a(chǎn)lign C．color D．face

4．關(guān)于表格的描述正確的一項是（ ）。

A．在單元格內(nèi)不能繼續(xù)插入整個表格

B．可以同時選定不相鄰的單元格

C．粘貼表格時，不粘貼表格的內(nèi)容

D．在網(wǎng)頁中，水平方向可以并排多個獨立的表格

5．關(guān)于文本對齊，源代碼設(shè)置不正確的一項是（ ）。

A．居中對齊：<div align="middle">…</div>

B．居右對齊：<div align="right">…</div>

C．居左對齊：<div align="left">…</div>

第56頁

46 網(wǎng)頁制作教程

D．兩端對齊：<div align="justify">…</div>

6．下面哪一項是換行符標簽？（ ）

A．<body> B．<font> C．<br> D．<p>

7．下列哪一項是在新窗口中打開網(wǎng)頁文檔？（ ）

A．_self B．_blank C．_top D．_parent

8．在一個框架組的屬性面板中，不能設(shè)置下面哪一項？（ ）

A．邊框顏色 B．子框架的寬度或者高度

C．邊框?qū)挾?D．滾動條

9．常用的網(wǎng)頁圖像格式有（ ）和（ ）。

A．gif，tiff B．tiff，jpg C．gif，jpg D．tiff，png

10．要使表格的邊框不顯示，應(yīng)設(shè)置 border 的值是（ ）。

A．1 B．0 C．2 D．3

11．在 HTML 中，（ ）不是鏈接的目標屬性。

A．self B．new C．blank D．top

12．下列 HTML 標記中，屬于非成對標記的是（ ）。

A．<li> B．<ul> C．<P> D．<font>

13．以下標記符中，用于設(shè)置頁面標題的是（ ）。

A．<title> B．<caption> C．<head> D．<html>

14．以下標記符中，沒有對應(yīng)的結(jié)束標記的是（ ）。

A．<body> B．<br> C．<html> D．<title>

15．若要使設(shè)計網(wǎng)頁的背景圖形為 bg.jpg，以下標記中，正確的是（ ）。

A．<body background="bg.jpg"> B．<body bground="bg.jpg">

C．<body image="bg.jpg"> D．<body bgcolor="bg.jpg">

16．若要以標題 2 號字、居中、紅色顯示“你好”，以下用法中，正確的是（ ）。

A．<h2><div align="center"><color="#ff00000">你好</div></h2></font>

B．<h2><div align="center"><font color="#ff00000">你好</div></h2></font>

C．<h2><div align="center"><font color="#ff00000">你好<</h2>/div></font>

D．<h2><div align="center">< font color="#ff00000">你好</font></div></h2>

17．若要以加粗宋體、12 號字顯示“你好”以下用法中，正確的是（ ）。

A．<b><font size=12>你好</b></font>

B．<b><font face="宋體" size=12>你好</font></b>

C．<b><font size="宋體"size=12>你好</b></font>

D．<b><font size="宋體" fontsize=12>你好</b></font>

第57頁

第 2 章 HTML 簡介 47

18．以下標記中，用于定義一個單元格的是（ ）。

A．<td>&nbsp;</td> B．<tr>…</tr>

C．<table>…</table> D．<caption>…</caption>

19．用于設(shè)置表格背景顏色的屬性的是（ ）。

A．background B．bgcolor C．BorderColor D．backgroundColor

20．以下標記中，用來創(chuàng)建對象的是（ ）。

A．<object> B．<embed> C．<form> D．<marquee>

第58頁

第 3 章 Dreamweaver 入門

3.1 Dreamweaver 基礎(chǔ)

本章主要介紹 Dreamweaver CS5 的新增特性、工作界面、站點設(shè)置及建立等，通過本

章的學習，可以對 Dreamweaver 提供的功能有一個全面的了解。

3.1.1 Dreamweaver 概述

Dreamweaver 系列軟件是 Adobe 公司出品的可視化的網(wǎng)頁編輯器，以其強大的網(wǎng)頁設(shè)

計及方便的站點管理功能成為了網(wǎng)頁設(shè)計人員的首選，網(wǎng)頁設(shè)計人員可以使用該軟件實

現(xiàn)從編輯到預覽的所有網(wǎng)頁創(chuàng)建過程，這種“所見即所得”的制作方式大大簡化了網(wǎng)頁

的制作，可以輕松制作出跨平臺和瀏覽器的頁面，相比之前的版本，CS5 在以下方面得到

了增強：

1．CSS 檢查

以可視化方式顯示詳細的 CSS 框模型，可輕松切換 CSS 屬性，不需要讀取代碼或使

用其他實用程序即可對代碼進行檢查。

2．PHP 自定義類代碼提示

為用戶自定義的 PHP 函數(shù)顯示適當?shù)恼Z法提示，可以幫助使用人員更準確地編寫

代碼。

3．集成 CMS（內(nèi)容管理系統(tǒng)）支持

提供對類似 WordPress 等內(nèi)容管理系統(tǒng)框架的制作和測試支持。

4．CSS Starter 頁

新版本簡化的 CSS Starter 布局，可以快速啟動基于 Web 標準的網(wǎng)站設(shè)計，提供了部

分快速設(shè)計模板及示例。

第59頁

第 3 章 Dreamweaver 入門 49

3.1.2 Dreamweaver 工作界面

Dreamweaver CS5 的安裝與 Windows 平臺上的其他軟件類似，通過簡單的鼠標操作即

可完成，軟件啟動后的界面如圖 3-1 所示。

圖 3-1 Dreamweaver CS5 用戶界面

 菜單欄：包含了 Dreamweaver CS5 所提供的菜單命令，軟件提供的功能都可以從

菜單欄中找到。

 常用面板區(qū)：包含“插入”“CSS 樣式”“AP 元素”“文件”“資源”“日志”等，

是設(shè)計人員用于完成網(wǎng)頁設(shè)計所用到的主要工具面板集合，可以通過“窗口”

菜單中勾選相應(yīng)選項來顯示該面板（取消勾選即可取消該面板在常用面板區(qū)中

的顯示）。

 屬性面板區(qū)：在選中網(wǎng)頁元素時將顯示其可被修改的屬性，可以對任選頁面元素

屬性進行更改，是編輯網(wǎng)頁時使用頻率最高的一個面板。

 文檔/視圖區(qū)：設(shè)計和書寫網(wǎng)頁代碼的主要區(qū)域，使用時可根據(jù)自身需要選擇或者

定制文檔/視圖區(qū)的顯示方式。

第60頁

50 網(wǎng)頁制作教程

3.1.3 Dreamweaver 創(chuàng)建 Web 站點的流程

在 Dreamweaver 中，Web 站點可視為網(wǎng)站中所有文件的集合。我們可以在本地計算

機上創(chuàng)建 Web 頁，也可將 Web 頁上傳至 Web 服務(wù)器中，并可隨時在保存文件后傳輸

更新的文件來對站點進行更新維護。創(chuàng)建本地站點的流程如下：

① 在本地（本機）硬盤中新建一個用于存儲網(wǎng)站中所有文件的文件夾，文件夾

最 好 使 用 英 文和數(shù) 字 混 合 命 名 ， 這 里 我們在本機 E 盤 中新建一文件 夾 并 命 名 為

website001。

② 在 Dreamweaver 菜單欄中選擇“站點”→“新建站點”命令，在彈出的對話框中

將“站點名稱”修改為自己想要的名稱（website001），將“本地站點文件夾”修改為步

驟①中的文件夾（E:\\website001\\），如圖 3-2 所示。

圖 3-2 站點設(shè)置

③“服務(wù)器”選項用于連接遠端服務(wù)器，如圖 3-3 所示，該服務(wù)器通常由 Internet

服務(wù)提供商（ISP）提供，用于站點的發(fā)布，在創(chuàng)建站點階段不需要對其進行設(shè)置，其具

體設(shè)置請參閱 3.2.5 節(jié)。

④“版本控制”是軟件工程中的常用術(shù)語，用于對文件的更新進行監(jiān)控，由于網(wǎng)

站也是由一個個文件組成的，因此可以使用版本控制工具對文件的更改進行監(jiān)控，如

圖 3-4 所示，也可以選擇使用 CS5 集成的 Subversion 來進行網(wǎng)站版本控制，具體設(shè)置

可參閱 4.8.2 節(jié)。

第61頁

第 3 章 Dreamweaver 入門 51

圖 3-3 服務(wù)器

圖 3-4 版本控制

⑤“高級設(shè)置”中可以設(shè)置網(wǎng)站中圖像的默認存放文件夾，如圖 3-5 所示，這里我

們在 website001 文件夾下新建一文件并命名為 images，然后單擊“默認圖像文件夾”后

第62頁

52 網(wǎng)頁制作教程

的 按鈕選擇該文件夾即可。對于“鏈接相對于”選項，如果本地計算機中并沒有安裝

Web 服務(wù)器軟件（IIS、Apache、Tomcat 等），則不需改動此默認設(shè)置，如果安裝了該類軟

件并且已經(jīng)在軟件中對站點根目錄進行了設(shè)置，則可以使用“站點根目錄”作為網(wǎng)頁中

鏈接的路徑。“Web URL”選項用于創(chuàng)建站點根目錄相對鏈接，并在使用鏈接檢查器時驗

證這些鏈接，適用于本地計算機安裝了 Web 服務(wù)器軟件且已正確設(shè)置相應(yīng)目錄的情形，

如果需要對站點進行測試或者本地發(fā)布，則需要對該選項進行正確設(shè)置，通常情況下使

用默認設(shè)置即可。

圖 3-5 高級設(shè)置

⑥“高級設(shè)置”下的子選項通常保持默認，最后單擊“保存”按鈕，這樣一個 Web

站點就創(chuàng)建完成了。

以上就是使用 Dreamweaver 創(chuàng)建 Web 站點的基本流程，后續(xù)將會在實例中做進一步

講解。

3.1.4 了解工作區(qū)

工作區(qū)是展示和編輯頁面的重要區(qū)域，在工作區(qū)中可以方便地查看或修改文檔和對

象的屬性參數(shù)。工作區(qū)中還有許多常用操作面板，使用它們可以快速修改文檔。如圖 3-6

所示，Dreamweaver 提供了一個將所有元素置于一個窗口中的集成開發(fā)環(huán)境。在這個集成

的工作區(qū)中，全部的窗口和面板均可以在其中顯示。

第63頁

第 3 章 Dreamweaver 入門 53

圖 3-6 工作區(qū)

區(qū)域 1：文檔工具欄，包含了提供各種“文檔”窗口視圖（如“設(shè)計”視圖和“代碼”

視圖）的選項、各種查看選項和一些常用操作（如在瀏覽器中預覽，檢查瀏覽器兼容性等）。

區(qū)域 2：切換設(shè)計器按鈕，單擊此下拉按鈕會出現(xiàn)圖 3-7 所示的預定義工作區(qū)樣式，

使用者可以在需要時選擇相應(yīng)的工作區(qū)布局。

圖 3-7 工作區(qū)切換

第64頁

54 網(wǎng)頁制作教程

區(qū)域 3：文檔區(qū)，用于顯示實時文檔視圖，日常較多使用的是“設(shè)計視圖”，該視圖

用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計環(huán)境。在該視圖中可以顯

示文檔的可視化表示形式，類似于在瀏覽器中查看頁面時看到的內(nèi)容。“代碼視圖”主要

用于查看各類網(wǎng)頁或腳本語言的源代碼，用于編寫和編輯 HTML、JavaScript 以及服務(wù)器

端代碼（如 PHP 或 ColdFusion 標記語言 (CFML)）以及任何其他類型代碼的手工編碼

環(huán)境。

區(qū)域 4：該面板區(qū)用于監(jiān)控和修改文檔內(nèi)容，主要包括“插入”面板、“CSS 樣式”

面板和“文件”面板。雙擊某選項卡可以展開該面板。

區(qū)域 5：該部分為標簽選擇器，位于“文檔”窗口底部的狀態(tài)欄中，用于顯示當前選

定內(nèi)容的標簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的某個標簽就可以自動選擇該標簽及其包

含的全部內(nèi)容。

區(qū)域 6：該部分為屬性檢查器，用于查看和更改所選對象或文本的各種屬性，是編輯

頁面時最常用到的部分。

區(qū)域 7：用于管理文件和文件夾，可以對站點中的文件進行管理，無論其位于本地計

算機還是位于遠程服務(wù)器上。使用“文件”面板還可以訪問本地磁盤上的全部文件，可

以提供類似于 Windows 資源管理器的功能。

區(qū)域 8：代碼窗口及工具，用于顯示網(wǎng)頁代碼及對代碼片段進行選擇編輯及格式化等。

3.1.5 設(shè)置 Dreamweaver 站點

Dreamweaver 站點通常由三部分（或文件夾）組成，具體還取決于開發(fā)環(huán)境和所開發(fā)

的 Web 站點類型：

① 本地根文件夾：用于存儲網(wǎng)站中所有的文件。Dreamweaver 將此文件夾稱為“本

地站點”。此文件夾通常位于本地計算機上，但也可能位于網(wǎng)絡(luò)服務(wù)器上。

② 遠程文件夾：存儲用于測試、協(xié)作等用途的文件。Dreamweaver 在“文件”面板

中將此文件夾稱為“遠程站點”。遠程文件夾通常位于運行 Web 服務(wù)器的計算機上。遠

程文件夾包含用戶從 Internet 訪問所需的文件。

通過本地文件夾和遠程文件夾的結(jié)合使用，網(wǎng)站制作人員可以在本地計算機和 Web

服務(wù)器之間傳輸文件，可以方便地管理 Dreamweaver 站點中的文件。網(wǎng)站開發(fā)時可以在

本地文件夾中處理文件，完成后需要他人訪問時，再將它們發(fā)布到遠程文件夾（遠程站

點目錄）。

③ 測試服務(wù)器文件夾：Dreamweaver 在其中處理動態(tài)頁的文件夾，動態(tài)頁通常是包

含有腳本語言的頁面，用來響應(yīng)用戶的交互性操作，如查詢、更新等。

第65頁

第 3 章 Dreamweaver 入門 55

3.1.6 創(chuàng)建和打開文檔

Dreamweaver 不僅對建立和編輯 HTML 文檔提供了良好的支持，還支持如圖 3-8 所示

的文檔的創(chuàng)建和編輯，下面對 DW（以下對 Dreamweaver 簡稱 DW）支持的主要文檔格式

做簡單介紹。

圖 3-8 新建文檔

 XSLT（eXtensible Stylesheet Language Transformation）： 可擴展樣式表語言文件，

擴展名為.xsl 或 .xslt。用于將一種 XML 文檔轉(zhuǎn)換為另外一種 XML 文檔，或者可

被瀏覽器識別的其他類型的文檔，比如 HTML 和 XHTML。

 ActionScript：DW 自身支持的面向?qū)ο蟮哪_本語言，用于實現(xiàn)某些動態(tài)效果。

 CSS（Cascading Style Sheet）：層疊樣式表文件，擴展名為.css。用于設(shè)置 HTML

內(nèi)容的顯示方式并控制各個頁面元素的位置。

 JavaScript：應(yīng)用非常廣泛的腳本語言，擴展名為.js。通常用于處理表單以及其他

類交互操作，多用于客戶端，也可用于服務(wù)器端。

 XML（eXtensible Markup Language）：可擴展標記語言文件，擴展名為 .xml。主要

用于存儲和傳送文本格式的數(shù)據(jù)，可使用 XSL（eXtensible Stylesheet Language，可

擴展樣式表語言）設(shè)置這些數(shù)據(jù)的具體格式。

 ColdFusion（ColdFusion 組件）：ColdFusion 標記語言文件，擴展名為 .cfm，由 Adobe

公司開發(fā)的用于處理動態(tài)頁面的標記語言。

 ASP（Active Server Page）：動態(tài)服務(wù)器頁面，擴展名為.asp。提供了一個服務(wù)

第66頁

56 網(wǎng)頁制作教程

器端處理動態(tài)頁面的規(guī)范，可以使用 JavaScript 或者 VBScript 作為具體語言

編寫該類頁面。

 .NET（C#、VB）：是一種基于組件和模塊的服務(wù)器端程序開發(fā)和運行規(guī)范，雖然

是對 ASP 的發(fā)展，但已經(jīng)與早期的 ASP 沒有太大關(guān)系，使用 C#和 VB 兩種腳本

語言進行頁面處理。

 JSP（Java Server Pages）：Java 服務(wù)器端頁面，擴展名為.JSP，是在 HTML 頁面中

加入 Java 程序段和 JSP 標簽所形成的頁面，具有 Java 技術(shù)簡單易用、完全面向?qū)?/p>

象、平臺無關(guān)且安全可靠、面向因特網(wǎng)的特點，是編寫服務(wù)器端頁面的一種主要

語言。

 PHP（Hypertext Preprocessor）：超文本預處理器文件，擴展名為 .php，主要用于

服務(wù)器端處理動態(tài)頁面，具有開源免費、支持眾多數(shù)據(jù)庫和跨平臺屬性。

通過上述介紹可以看出，幾乎所有主流的 Web 開發(fā)技術(shù)，DW 都提供了良好的支持，

可以根據(jù)需要直接創(chuàng)建所需類型的頁面文件，這也是 DW 成為 Web 開發(fā)首選工具的一個

重要原因。

另外，DW 還支持從軟件自帶模板來創(chuàng)建文件，或者使用用戶自定義模板來生成文

件，可以單擊“空模板”或者“示例中的頁”創(chuàng)建基于模板的各類頁面，也可以單擊“模

板中的頁”從站點中的自定義模板中創(chuàng)建各類頁面。

3.2 Dreamweaver 建站實例

在 DW 中，制作頁面或者網(wǎng)站需要從建立一個站點開始，這為以后站點的測試、發(fā)

布等工作提供了便利，下面以實例說明建立站點的過程。

3.2.1 設(shè)置站點和項目文件

在本例中，我們建立了一個基本的旅游類站點，包含了建站的所有流程：新建站點

→創(chuàng)建文件→布局頁面→添加內(nèi)容→頁面呈現(xiàn)，最終效果如圖 3-9 所示。

具體操作流程如下：

① 設(shè)置本地文件夾。在本地計算機磁盤中新建一個文件夾，如在 E 盤中新建一個名

為“webpage”的文件夾。

② 新建站點。在菜單欄中選擇“站點”→“新建站點”命令，在彈出對話框中輸入

站點名為“webpage01”，在“本地站點文件夾件”欄中單擊 按鈕，選擇“E:\\ webpage，

單擊“保存”按鈕即可，如圖 3-10 所示。

第67頁

第 3 章 Dreamweaver 入門 57

圖 3-9 頁面預覽效果

圖 3-10 新建站點

③ 新建網(wǎng)頁文件。站點創(chuàng)建成功后，在“文件”面板中將出現(xiàn)新建站點信息，

在“文件”面板的“站點—webpage01”上右擊，在彈出的快捷菜單中選擇“新建文

件 ”命令，并將文件名設(shè)為“index.html”，將其作為網(wǎng)站的首頁。

第68頁

58 網(wǎng)頁制作教程

④ 新建分類文件夾。再次在“文件”面板的“站點

—webpage01”上右擊，在彈出的快捷菜單中選擇“新建

文件夾”命令，創(chuàng)建幾個文件夾，分別命名為 images、

scripts 和 flash，用來存放圖像、腳本、多媒體等，最終

站點結(jié)構(gòu)如圖 3-11 所示。

通過上述步驟就完成了一個簡單的站點的建立過

程，接下來需要對文件內(nèi)容進行編輯，對各種資源進行

處理，以最終完成該頁面。

3.2.2 創(chuàng)建基于表格的頁面布局

在瀏覽網(wǎng)站的過程中，看到的并不是千篇一律的頁面，通常每個頁面都有自己的顏

色搭配、整體風格、內(nèi)容分塊等，對于網(wǎng)頁設(shè)計者而言，最終頁面不僅要提供足夠的信

息，還要使瀏覽者賞心悅目，要達到這一點，就必須對頁面中所有內(nèi)容的位置作好規(guī)劃，

形成一個比較統(tǒng)一的風格，這就是通常所說的頁面布局。這里采用表格來對整個頁面進

行布局，本例中共使用了 4 個表格，具體如圖 3-12 所示。

圖 3-12 表格布局

具體操作如下：

① 新建站點 website001，將本地文件夾設(shè)為 E:\\website001，DW 中選擇“文件”面板，

在站點 website001 上右擊，在彈出的快捷菜單中選擇“新建文件”命令，將其命名為

“index-table.html”，設(shè)置頁面標題為“旅行中的靈境”，頁面字體為“華文宋體”。

圖 3-11 站點結(jié)構(gòu)

第69頁

第 3 章 Dreamweaver 入門 59

② 添加表格。雙擊該首頁文件，將其在設(shè)計

視圖中打開，在菜單欄中選擇“插入”→“表格”

命令，添加兩個1行 6 列表格，其設(shè)置如圖 3-13

所示。

③ 添加主體表格。在設(shè)計視圖中按【Enter】

鍵，在菜單欄中選擇“插入”→“表格”命令，在

新行中插入一個 1 行 3 列表格，參照上述步驟在頁

面底部添加一個 2 行3列表格，這樣就完成了整個

頁面的布局。

3.2.3 向頁面添加內(nèi)容

在 3.2.2 中使用表格規(guī)劃好了整個頁面，本節(jié)中需要向表格中插入具體的內(nèi)容，插入

內(nèi)容后的頁面如圖 3-14 所示。

圖 3-14 頁面預覽

① 表格 1 的具體操作如下：

在第 1 個單元格中輸入“歡迎訪問本網(wǎng)站”，第 2 個單元格中輸入“登錄”，第 3 個

單元格中輸入“注冊”，第 4 個單元格放置圖片（shanshui.jpg），設(shè)置圖片大小為 300×50

像素，并設(shè)置該單元格寬度為 300 像素，第 5 個單元格輸入“設(shè)為首頁”，第 6 個單元格

圖 3-13 插入表格

第70頁

60 網(wǎng)頁制作教程

輸入“聯(lián)系我們”，并在屬性面板中將“登錄”添加鏈接至“l(fā)ogin.html”，“注冊”添加鏈

接至“register.html”，“設(shè)為首頁”添加空鏈接“#”，并添加“行為”代碼如下：

"this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.

163.com');event.returnValue=false;"

對“聯(lián)系我們”添加郵件鏈接 rfv@163.com。效果如圖 3-15 所示。

圖 3-15 添加內(nèi)容后的表格 1

② 表格 2 的具體操作如下：

選擇整行，對其添加背景顏色“#00FF00”，設(shè)置所有文本為“居中對齊”，第 1 個單

元格輸入“|首頁”并設(shè)置“首頁”鏈接為空鏈接，第 2 個單元格輸入“|國內(nèi)游”并設(shè)置

其鏈接為相應(yīng)頁面，第 3 個單元格輸入“|國際游”并設(shè)置其鏈接為相應(yīng)頁面，第 4 個單

元格輸入“|酒店預訂”，第 5 個單元格輸入“|火車票”，第 6 個單元格輸入“|論壇”，最

終效果如圖 3-16 所示。

圖 3-16 添加內(nèi)容后的表格 2

③ 表格 3 的具體操作如下：

在單元格 1 和單元格 3 中分別嵌套一個 15 行 1 列的表格，單元格 2 不做改變。對單

元格 1 和單元格 3 中的表格分別添加相應(yīng)文本，單元格 2 中插入圖片（worldmap.jpg），并

修改其寬為 500 像素，高為 300 像素，屬性面板中設(shè)置其“水平”對齊方式為“居中對

齊”，最終效果如圖 3-17 所示。

圖 3-17 添加內(nèi)容后的表格 3

第71頁

第 3 章 Dreamweaver 入門 61

④ 表格 4 的具體設(shè)置如下：

第 1 行各單元格依次輸入以下內(nèi)容：“關(guān)于我們”“友情鏈接”“免責聲明”。再選擇

第 2 行，將 3 個單元格合并成 1 個并加入文本“版權(quán)所有?，All Rights Reserved 2014”。

結(jié)果如圖 3-18 所示。

圖 3-18 添加內(nèi)容后的表格 4

3.2.4 使用 CSS 設(shè)置頁面格式

各個表格的內(nèi)容添加完成后，我們使用 CSS 對頁面元素進行設(shè)置，對頁面中元素的

顯示進行控制。具體設(shè)置如下：

頁面設(shè)置：在屬性面板中單擊“頁面屬性”按鈕，將出現(xiàn)圖 3-19 所示的對話框，在

“外觀（CSS）”項中設(shè)置“頁面字體”為“華文宋體”，“大小”為 16px，如果在下拉列表

中找不到該字體，可單擊“編輯字體列表”，從系統(tǒng)中將該字體添加至 DW 中即可，再將

“背景顏色”設(shè)置為#9FF，也可以選擇一張圖片將其設(shè)置為“背景圖像”，這里我們不再

設(shè)置，但讀者需要注意的是，如果同時設(shè)置了“背景顏色”和“背景圖像”，那么背景圖

像將會遮蓋住相應(yīng)區(qū)域的背景顏色（透明圖片除外）。最后單擊“應(yīng)用”或者“確定”按

鈕，即可將設(shè)置應(yīng)用于該頁面，效果如圖 3-20 所示。

圖 3-19 頁面設(shè)置

表格 1：選擇單元格 1（即該表格的第 1 個 td 元素）， 按鈕將自動被選擇，“目標

規(guī)則”中選擇“新內(nèi)聯(lián)樣式”，單擊“編輯規(guī)則”按鈕，會出現(xiàn)圖 3-21 所示的 CSS 規(guī)則定

第72頁

62 網(wǎng)頁制作教程

義對話框，這里選擇“區(qū)塊”，將“text-align”屬性設(shè)置為“l(fā)eft”，選擇“方框”選項，將

“width”修改為“16%”，單擊“確定”按鈕即可。同理選擇單元格 2，對其建立新內(nèi)聯(lián)樣

式，在規(guī)則定義對話框中修改其“width”屬性為“7%”，對單元格 3 參照上述操作設(shè)置其

“width”屬性為“7%”，單元格 5 和單元格 6 的“width”屬性各設(shè)為“10%”，單元格 4 的

“width”屬性設(shè)為 50%，這樣表格 1 的 CSS 設(shè)置就完成了，最終效果如圖 3-22 所示。

圖 3-20 頁面效果

圖 3-21 定義單元格規(guī)則

圖 3-22 表格 1 預覽

第73頁

第 3 章 Dreamweaver 入門 63

表格 2：使用標簽選擇器選中該表格，在屬性面板中設(shè)置其邊框為 1，在標簽選擇器

中選中表格第 1 行，建立新內(nèi)聯(lián)樣式，在 CSS 規(guī)則定義對話框中設(shè)置“背景”→

“ background-image”為 事 先 準 備 好 的 圖 片 （ danyalan-bg.jpg ）， 并 設(shè) 置

“background-position(X)”和“background-position(Y)”分別為“center”，瀏覽器中預覽的

效果如圖 3-23 所示。

圖 3-23 表格 2 預覽

表格 3：在標簽選擇器中選擇該表格的第 1 列（第 1 個 td 元素），在屬性面板中添加

新內(nèi)聯(lián)規(guī)則，定義其 CSS 規(guī)則中“方框”→width 為 20%，同理選擇第 3 列（第 3 個 td

元素），依照上述步驟設(shè)置其 width 為 20%，再選擇該表格第 2 列（第 2 個 td 元素），添

加新內(nèi)聯(lián) CSS 規(guī)則，設(shè)置“背景”→background-color 為#FFF，“區(qū)塊”→vertical-align

為 middle，最終效果如圖 3-24 所示。

圖 3-24 表格 3 預覽

表格 4：選擇第 1 行（第 1 個 tr 元素），添加新內(nèi)聯(lián)規(guī)則，設(shè)置“區(qū)塊”→text-align

為 center，再選擇第 2 行（第 2 個 tr 元素），參照上述步驟將其 text-align 也設(shè)為 center，

選擇菜單欄中的“插入”→“HTML”→“水平線”命令，在原有文本前插入一條水平線，

最終效果如圖 3-25 所示。

圖 3-25 表格 4 預覽

第74頁

64 網(wǎng)頁制作教程

本例中先使用表格對整個頁面進行了分割，然后向各個分塊中插入內(nèi)容，使用 CSS

規(guī)則對各個表格進行了規(guī)范化顯示，這樣就完成了該頁面的基本制作，站點中其他頁面

的制作也基本遵循這一流程。

3.2.5 發(fā)布站點

站點的發(fā)布就是讓網(wǎng)絡(luò)上的其他人可以訪問制作好的網(wǎng)站，一般可分為本地發(fā)布和

遠程發(fā)布，從理論上來講，無論本地發(fā)布還是遠程發(fā)布，均可使用 IP 地址訪問，但由于

IP 地址難于記憶，一般都會采用申請域名的方法發(fā)布。在這里以本地發(fā)布為例說明發(fā)布

的一般流程。

① 在本地計算機上安裝 Web 服務(wù)器，這里選擇 Windows 平臺上廣為使用的 IIS，此處

使用的是 Windows XP+IIS 5.1 組合，軟件具體安裝過程不再贅述，讀者可自行參閱其他書籍。

② 在 Windows XP 中選擇“開始”→“設(shè)置”→“控制面板”→“管理工具”→“Internet

信息服務(wù)”命令，會出現(xiàn)圖 3-26 所示的界面，單擊 圖標直至顯示“默認網(wǎng)站”，在“默

認網(wǎng)站”上右擊，在彈出的快捷菜單中選擇“新建”→“虛擬目錄”命令，單擊“下一

步”按鈕，在彈出對話框（見圖 3-27）中“別名”中輸入“website001”，繼續(xù)單擊“下

一步”按鈕，在對話框中單擊“瀏覽”按鈕，選擇 E:\\website001 作為目錄（見圖 3-28），

繼續(xù)“下一步”直至完成，最終結(jié)果如圖 3-29 所示。

圖 3-26 Internet 信息服務(wù)頁面

第75頁

第 3 章 Dreamweaver 入門 65

圖 3-27 創(chuàng)建虛擬目錄別名

圖 3-28 輸入網(wǎng)站本地路徑

第76頁

66 網(wǎng)頁制作教程

圖 3-29 添加虛擬目錄 website001

③ 在“默認網(wǎng)站”上右擊，在彈出的快捷菜單中選擇“屬性”命令，在彈出對話框

中選擇“目錄安全性”，單擊“編輯”按鈕，在彈出的對話框中（見圖 3-30）去掉“匿名

訪問”前的勾選并勾選“集成 Windows 身份驗證”復選框。

圖 3-30 目錄安全性設(shè)置

第77頁

第 3 章 Dreamweaver 入門 67

④ 打開 IE 瀏覽器，在地址欄中輸入 http://localhost/website001 即可訪問到我們已經(jīng)

做好的 index.html 頁面，如圖 3-31 所示。

圖 3-31 IE 中訪問結(jié)果

這里，除了本機能夠訪問該頁面以外，其他和本機處于同一局域網(wǎng)內(nèi)的主機也可以

訪問這個網(wǎng)站，但是需要將 localhost 換成欲訪問主機的 IP 地址，遠程發(fā)布與此類似，所

不同的是需要增加遠程站點定義及上傳網(wǎng)站內(nèi)容的過程，具體請參閱 4.8.2 節(jié)。

本 章 小 結(jié)

本章從 DW 的基本功能入手，介紹了 DW 中站點的創(chuàng)建方法，并以實例說明了如何

設(shè)計具體頁面以及對頁面中的元素設(shè)置各種不同的格式，最后講解了站點發(fā)布的基本知

識，通過本章的學習，讀者可以掌握站點的建立及頁面的布局方法，對如何建設(shè)網(wǎng)站有

一個全面的認識。

第78頁

68 網(wǎng)頁制作教程

習 題

一、選擇題

1．關(guān)于域名系統(tǒng)，以下說法正確的是（ ）。

A．域名系統(tǒng)是一個非層次型系統(tǒng)

B．域名系統(tǒng)主要用來將 IP 地址解析為綁定的域名

C．域名解析請求與應(yīng)答都需要 DNS 協(xié)議的支持

D．主機域名必須和其 IP 地址一一對應(yīng)

2．以下關(guān)于網(wǎng)絡(luò)協(xié)議的說法，錯誤的是（ ）。

A．HTTP 用于請求/應(yīng)答 Web 頁面

B．FTP 用于文件傳輸，支持斷點續(xù)傳

C．Telnet 用于遠程登錄

D．SMTP 用于在郵件客戶端和服務(wù)器端傳輸郵件

3．關(guān)于自主發(fā)布，以下說法錯誤的是（ ）。

A．自主發(fā)布需要預先了解服務(wù)器所處的網(wǎng)絡(luò)環(huán)境

B．自主發(fā)布需要發(fā)布者自行搭建 Web 服務(wù)器

C．無論固定 IP 還是動態(tài) IP 的服務(wù)器都需要借助動態(tài)域名解析軟件進行域名解析

D．自主發(fā)布也需要申請相應(yīng)的域名

4．網(wǎng)頁中常用的嵌入 CSS 的方式是（ ）。

A．link 標簽和 link 屬性 B．link 標簽和 style 屬性

C．style 標簽和 link 屬性 D．style 標簽和 style 屬性

二、簡答題

1．簡述建設(shè)商業(yè)性網(wǎng)站的基本流程。

2．簡述在 DW 頁面中插入網(wǎng)頁基本元素（文本、圖片、鏈接等）的方法。

{{isCollapse?'展開':'收起'}}
百萬用戶使用云展網(wǎng)進行電子書免費制作，只要您有文檔，即可一鍵上傳，自動生成鏈接和二維碼(獨立電子書)，支持分享到微信和網(wǎng)站！
收藏
轉(zhuǎn)發(fā)
下載
免費制作
其他案例
更多案例
免費制作
x
{{item.desc}}
下載
{{item.title}}
{{toast}}