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

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

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

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

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

第 2 章 HTML 簡(jiǎn)介 41

容,每一對(duì)<td>…</td>表示一行,每一對(duì)<th>…</th>表示標(biāo)題單元,每一對(duì)<td>…</td>

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

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

圖 2-11 表格標(biāo)記實(shí)例

2.3.9 框架標(biāo)記

有時(shí)候,為了頁(yè)面和版面的需要,在同一個(gè)頁(yè)面上同時(shí)顯示多個(gè) HTML 文件。這時(shí),

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

 <frameset>:定義一個(gè)框架容器。

 <frame>:定義一個(gè)框架,并制定子區(qū)所對(duì)應(yīng)的網(wǎng)頁(yè)地址。

 <noframe>:若瀏覽器不支持框架時(shí),顯示相關(guān)信息給訪問(wèn)者。

其中<frameset>有 rows 和 cols 兩個(gè)屬性來(lái)分別控制多重框架的高度和寬度,既可用百

分比表示,又可用像素來(lái)表示,其中的“*”表示除其他部分外所剩余的部分。并且

<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頁(yè)

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

該瀏覽器不支持框架

</noframe>

</frameset>

</html>

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

圖 2-12 框架標(biāo)記實(shí)例

但要注意,若在一個(gè) HTML 文檔中使用了<frameset>標(biāo)記,就不能再使用<body>標(biāo)記,

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

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

2.3.10 其他一些常用標(biāo)記

1.正文標(biāo)題

HTML 用<h1>到<h6>這幾個(gè)標(biāo)簽來(lái)定義正文標(biāo)題,從大到小。每個(gè)正文標(biāo)題自成

一段。

【例 2-13】正文標(biāo)題示例。

<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>

運(yùn)行效果如圖 2-13 所示。

第53頁(yè)

第 2 章 HTML 簡(jiǎn)介 43

圖 2-13 正文標(biāo)題實(shí)例

2.<div>標(biāo)記

HTML 的<div>標(biāo)記是塊級(jí)元素,它是可用于組合其他 HTML 元素的容器。<div>標(biāo)

記沒(méi)有特定的含義。除此之外,由于它屬于塊級(jí)元素,瀏覽器會(huì)在其前后顯示折行。如

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

<div>標(biāo)記的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。

使用<table>標(biāo)記進(jìn)行文檔布局不是表格的正確用法。<table>標(biāo)記的作用是顯示表格化的

數(shù)據(jù)。

【例 2-14】DIV 示例。

<html>

<head>

<title>div 布局實(shí)例</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頁(yè)

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

</style>

</head>

<body>

<div id="container">

<div id="header">

<h1>網(wǎng)頁(yè)頭部</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)頁(yè)內(nèi)容</div>

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

</div>

</body>

</html>

運(yùn)行效果如圖 2-14 所示。

圖 2-14 DIV 布局實(shí)例

第55頁(yè)

第 2 章 HTML 簡(jiǎn)介 45

3.<span>標(biāo)記

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

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

本 章 小 結(jié)

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

過(guò)介紹 HTML 標(biāo)記符,使讀者基本了解和掌握使用 HTML 語(yǔ)言設(shè)計(jì)和制作網(wǎng)頁(yè)(包括文

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

習(xí) 題

選擇題

1.用 HTML 標(biāo)記語(yǔ)言編寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè),網(wǎng)頁(yè)最基本的結(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.為了標(biāo)識(shí)一個(gè) HTML 文件應(yīng)該使用的 HTML 標(biāo)記是( )。

A.<p></p> B.<body></body>

C.<html></html> D.<table></table>

3.下面哪一個(gè)屬性不是文本的標(biāo)簽屬性?( )

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

4.關(guān)于表格的描述正確的一項(xiàng)是( )。

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

B.可以同時(shí)選定不相鄰的單元格

C.粘貼表格時(shí),不粘貼表格的內(nèi)容

D.在網(wǎng)頁(yè)中,水平方向可以并排多個(gè)獨(dú)立的表格

5.關(guān)于文本對(duì)齊,源代碼設(shè)置不正確的一項(xiàng)是( )。

A.居中對(duì)齊:<div align="middle">…</div>

B.居右對(duì)齊:<div align="right">…</div>

C.居左對(duì)齊:<div align="left">…</div>

第56頁(yè)

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

D.兩端對(duì)齊:<div align="justify">…</div>

6.下面哪一項(xiàng)是換行符標(biāo)簽?( )

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

7.下列哪一項(xiàng)是在新窗口中打開(kāi)網(wǎng)頁(yè)文檔?( )

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

8.在一個(gè)框架組的屬性面板中,不能設(shè)置下面哪一項(xiàng)?( )

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

C.邊框?qū)挾?D.滾動(dòng)條

9.常用的網(wǎng)頁(yè)圖像格式有( )和( )。

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 中,( )不是鏈接的目標(biāo)屬性。

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

12.下列 HTML 標(biāo)記中,屬于非成對(duì)標(biāo)記的是( )。

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

13.以下標(biāo)記符中,用于設(shè)置頁(yè)面標(biāo)題的是( )。

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

14.以下標(biāo)記符中,沒(méi)有對(duì)應(yīng)的結(jié)束標(biāo)記的是( )。

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

15.若要使設(shè)計(jì)網(wǎng)頁(yè)的背景圖形為 bg.jpg,以下標(biāo)記中,正確的是( )。

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

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

16.若要以標(biāo)題 2 號(hào)字、居中、紅色顯示“你好”,以下用法中,正確的是( )。

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 號(hào)字顯示“你好”以下用法中,正確的是( )。

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頁(yè)

第 2 章 HTML 簡(jiǎn)介 47

18.以下標(biāo)記中,用于定義一個(gè)單元格的是( )。

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

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

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

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

20.以下標(biāo)記中,用來(lái)創(chuàng)建對(duì)象的是( )。

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

第58頁(yè)

第 3 章 Dreamweaver 入門

3.1 Dreamweaver 基礎(chǔ)

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

章的學(xué)習(xí),可以對(duì) Dreamweaver 提供的功能有一個(gè)全面的了解。

3.1.1 Dreamweaver 概述

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

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

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

的制作,可以輕松制作出跨平臺(tái)和瀏覽器的頁(yè)面,相比之前的版本,CS5 在以下方面得到

了增強(qiáng):

1.CSS 檢查

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

用其他實(shí)用程序即可對(duì)代碼進(jìn)行檢查。

2.PHP 自定義類代碼提示

為用戶自定義的 PHP 函數(shù)顯示適當(dāng)?shù)恼Z(yǔ)法提示,可以幫助使用人員更準(zhǔn)確地編寫(xiě)

代碼。

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

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

4.CSS Starter 頁(yè)

新版本簡(jiǎn)化的 CSS Starter 布局,可以快速啟動(dòng)基于 Web 標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì),提供了部

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

第59頁(yè)

第 3 章 Dreamweaver 入門 49

3.1.2 Dreamweaver 工作界面

Dreamweaver CS5 的安裝與 Windows 平臺(tái)上的其他軟件類似,通過(guò)簡(jiǎn)單的鼠標(biāo)操作即

可完成,軟件啟動(dòng)后的界面如圖 3-1 所示。

圖 3-1 Dreamweaver CS5 用戶界面

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

菜單欄中找到。

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

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

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

的顯示)。

 屬性面板區(qū):在選中網(wǎng)頁(yè)元素時(shí)將顯示其可被修改的屬性,可以對(duì)任選頁(yè)面元素

屬性進(jìn)行更改,是編輯網(wǎng)頁(yè)時(shí)使用頻率最高的一個(gè)面板。

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

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

第60頁(yè)

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

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

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

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

更新的文件來(lái)對(duì)站點(diǎn)進(jìn)行更新維護(hù)。創(chuàng)建本地站點(diǎn)的流程如下:

① 在本地(本機(jī))硬盤中新建一個(gè)用于存儲(chǔ)網(wǎng)站中所有文件的文件夾,文件夾

最 好 使 用 英 文和數(shù) 字 混 合 命 名 , 這 里 我們?cè)诒緳C(jī) E 盤 中新建一文件 夾 并 命 名 為

website001。

② 在 Dreamweaver 菜單欄中選擇“站點(diǎn)”→“新建站點(diǎn)”命令,在彈出的對(duì)話框中

將“站點(diǎn)名稱”修改為自己想要的名稱(website001),將“本地站點(diǎn)文件夾”修改為步

驟①中的文件夾(E:\\website001\\),如圖 3-2 所示。

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

③“服務(wù)器”選項(xiàng)用于連接遠(yuǎn)端服務(wù)器,如圖 3-3 所示,該服務(wù)器通常由 Internet

服務(wù)提供商(ISP)提供,用于站點(diǎn)的發(fā)布,在創(chuàng)建站點(diǎn)階段不需要對(duì)其進(jìn)行設(shè)置,其具

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

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

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

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

可參閱 4.8.2 節(jié)。

第61頁(yè)

第 3 章 Dreamweaver 入門 51

圖 3-3 服務(wù)器

圖 3-4 版本控制

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

們?cè)?website001 文件夾下新建一文件并命名為 images,然后單擊“默認(rèn)圖像文件夾”后

第62頁(yè)

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

的 按鈕選擇該文件夾即可。對(duì)于“鏈接相對(duì)于”選項(xiàng),如果本地計(jì)算機(jī)中并沒(méi)有安裝

Web 服務(wù)器軟件(IIS、Apache、Tomcat 等),則不需改動(dòng)此默認(rèn)設(shè)置,如果安裝了該類軟

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

鏈接的路徑?!癢eb URL”選項(xiàng)用于創(chuàng)建站點(diǎn)根目錄相對(duì)鏈接,并在使用鏈接檢查器時(shí)驗(yàn)

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

如果需要對(duì)站點(diǎn)進(jìn)行測(cè)試或者本地發(fā)布,則需要對(duì)該選項(xiàng)進(jìn)行正確設(shè)置,通常情況下使

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

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

⑥“高級(jí)設(shè)置”下的子選項(xiàng)通常保持默認(rèn),最后單擊“保存”按鈕,這樣一個(gè) Web

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

以上就是使用 Dreamweaver 創(chuàng)建 Web 站點(diǎn)的基本流程,后續(xù)將會(huì)在實(shí)例中做進(jìn)一步

講解。

3.1.4 了解工作區(qū)

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

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

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

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

第63頁(yè)

第 3 章 Dreamweaver 入門 53

圖 3-6 工作區(qū)

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

視圖)的選項(xiàng)、各種查看選項(xiàng)和一些常用操作(如在瀏覽器中預(yù)覽,檢查瀏覽器兼容性等)。

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

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

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

第64頁(yè)

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

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

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

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

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

端代碼(如 PHP 或 ColdFusion 標(biāo)記語(yǔ)言 (CFML))以及任何其他類型代碼的手工編碼

環(huán)境。

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

面板和“文件”面板。雙擊某選項(xiàng)卡可以展開(kāi)該面板。

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

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

含的全部?jī)?nèi)容。

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

頁(yè)面時(shí)最常用到的部分。

區(qū)域 7:用于管理文件和文件夾,可以對(duì)站點(diǎn)中的文件進(jìn)行管理,無(wú)論其位于本地計(jì)

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

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

區(qū)域 8:代碼窗口及工具,用于顯示網(wǎng)頁(yè)代碼及對(duì)代碼片段進(jìn)行選擇編輯及格式化等。

3.1.5 設(shè)置 Dreamweaver 站點(diǎn)

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

的 Web 站點(diǎn)類型:

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

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

② 遠(yuǎn)程文件夾:存儲(chǔ)用于測(cè)試、協(xié)作等用途的文件。Dreamweaver 在“文件”面板

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

程文件夾包含用戶從 Internet 訪問(wèn)所需的文件。

通過(guò)本地文件夾和遠(yuǎn)程文件夾的結(jié)合使用,網(wǎng)站制作人員可以在本地計(jì)算機(jī)和 Web

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

本地文件夾中處理文件,完成后需要他人訪問(wèn)時(shí),再將它們發(fā)布到遠(yuǎn)程文件夾(遠(yuǎn)程站

點(diǎn)目錄)。

③ 測(cè)試服務(wù)器文件夾:Dreamweaver 在其中處理動(dòng)態(tài)頁(yè)的文件夾,動(dòng)態(tài)頁(yè)通常是包

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

第65頁(yè)

第 3 章 Dreamweaver 入門 55

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

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

的文檔的創(chuàng)建和編輯,下面對(duì) DW(以下對(duì) Dreamweaver 簡(jiǎn)稱 DW)支持的主要文檔格式

做簡(jiǎn)單介紹。

圖 3-8 新建文檔

 XSLT(eXtensible Stylesheet Language Transformation): 可擴(kuò)展樣式表語(yǔ)言文件,

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

被瀏覽器識(shí)別的其他類型的文檔,比如 HTML 和 XHTML。

 ActionScript:DW 自身支持的面向?qū)ο蟮哪_本語(yǔ)言,用于實(shí)現(xiàn)某些動(dòng)態(tài)效果。

 CSS(Cascading Style Sheet):層疊樣式表文件,擴(kuò)展名為.css。用于設(shè)置 HTML

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

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

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

 XML(eXtensible Markup Language):可擴(kuò)展標(biāo)記語(yǔ)言文件,擴(kuò)展名為 .xml。主要

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

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

 ColdFusion(ColdFusion 組件):ColdFusion 標(biāo)記語(yǔ)言文件,擴(kuò)展名為 .cfm,由 Adobe

公司開(kāi)發(fā)的用于處理動(dòng)態(tài)頁(yè)面的標(biāo)記語(yǔ)言。

 ASP(Active Server Page):動(dòng)態(tài)服務(wù)器頁(yè)面,擴(kuò)展名為.asp。提供了一個(gè)服務(wù)

第66頁(yè)

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

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

編寫(xiě)該類頁(yè)面。

 .NET(C#、VB):是一種基于組件和模塊的服務(wù)器端程序開(kāi)發(fā)和運(yùn)行規(guī)范,雖然

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

語(yǔ)言進(jìn)行頁(yè)面處理。

 JSP(Java Server Pages):Java 服務(wù)器端頁(yè)面,擴(kuò)展名為.JSP,是在 HTML 頁(yè)面中

加入 Java 程序段和 JSP 標(biāo)簽所形成的頁(yè)面,具有 Java 技術(shù)簡(jiǎn)單易用、完全面向?qū)?/p>

象、平臺(tái)無(wú)關(guān)且安全可靠、面向因特網(wǎng)的特點(diǎn),是編寫(xiě)服務(wù)器端頁(yè)面的一種主要

語(yǔ)言。

 PHP(Hypertext Preprocessor):超文本預(yù)處理器文件,擴(kuò)展名為 .php,主要用于

服務(wù)器端處理動(dòng)態(tài)頁(yè)面,具有開(kāi)源免費(fèi)、支持眾多數(shù)據(jù)庫(kù)和跨平臺(tái)屬性。

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

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

重要原因。

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

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

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

3.2 Dreamweaver 建站實(shí)例

在 DW 中,制作頁(yè)面或者網(wǎng)站需要從建立一個(gè)站點(diǎn)開(kāi)始,這為以后站點(diǎn)的測(cè)試、發(fā)

布等工作提供了便利,下面以實(shí)例說(shuō)明建立站點(diǎn)的過(guò)程。

3.2.1 設(shè)置站點(diǎn)和項(xiàng)目文件

在本例中,我們建立了一個(gè)基本的旅游類站點(diǎn),包含了建站的所有流程:新建站點(diǎn)

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

具體操作流程如下:

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

為“webpage”的文件夾。

② 新建站點(diǎn)。在菜單欄中選擇“站點(diǎn)”→“新建站點(diǎn)”命令,在彈出對(duì)話框中輸入

站點(diǎn)名為“webpage01”,在“本地站點(diǎn)文件夾件”欄中單擊 按鈕,選擇“E:\\ webpage,

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

第67頁(yè)

第 3 章 Dreamweaver 入門 57

圖 3-9 頁(yè)面預(yù)覽效果

圖 3-10 新建站點(diǎn)

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

在“文件”面板的“站點(diǎn)—webpage01”上右擊,在彈出的快捷菜單中選擇“新建文

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

第68頁(yè)

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

④ 新建分類文件夾。再次在“文件”面板的“站點(diǎn)

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

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

scripts 和 flash,用來(lái)存放圖像、腳本、多媒體等,最終

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

通過(guò)上述步驟就完成了一個(gè)簡(jiǎn)單的站點(diǎn)的建立過(guò)

程,接下來(lái)需要對(duì)文件內(nèi)容進(jìn)行編輯,對(duì)各種資源進(jìn)行

處理,以最終完成該頁(yè)面。

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

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

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

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

形成一個(gè)比較統(tǒng)一的風(fēng)格,這就是通常所說(shuō)的頁(yè)面布局。這里采用表格來(lái)對(duì)整個(gè)頁(yè)面進(jìn)

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

圖 3-12 表格布局

具體操作如下:

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

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

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

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

第69頁(yè)

第 3 章 Dreamweaver 入門 59

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

視圖中打開(kāi),在菜單欄中選擇“插入”→“表格”

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

所示。

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

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

新行中插入一個(gè) 1 行 3 列表格,參照上述步驟在頁(yè)

面底部添加一個(gè) 2 行3列表格,這樣就完成了整個(gè)

頁(yè)面的布局。

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

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

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

圖 3-14 頁(yè)面預(yù)覽

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

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

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

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

圖 3-13 插入表格

第70頁(yè)

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

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

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

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

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

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

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

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

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

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

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

元格輸入“|酒店預(yù)訂”,第 5 個(gè)單元格輸入“|火車票”,第 6 個(gè)單元格輸入“|論壇”,最

終效果如圖 3-16 所示。

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

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

在單元格 1 和單元格 3 中分別嵌套一個(gè) 15 行 1 列的表格,單元格 2 不做改變。對(duì)單

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

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

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

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

第71頁(yè)

第 3 章 Dreamweaver 入門 61

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

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

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

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

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

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

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

顯示進(jìn)行控制。具體設(shè)置如下:

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

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

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

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

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

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

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

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

表格 1:選擇單元格 1(即該表格的第 1 個(gè) td 元素), 按鈕將自動(dòng)被選擇,“目標(biāo)

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

第72頁(yè)

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

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

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

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

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

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

圖 3-20 頁(yè)面效果

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

圖 3-22 表格 1 預(yù)覽

第73頁(yè)

第 3 章 Dreamweaver 入門 63

表格 2:使用標(biāo)簽選擇器選中該表格,在屬性面板中設(shè)置其邊框?yàn)?1,在標(biāo)簽選擇器

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

“ background-image”為 事 先 準(zhǔn) 備 好 的 圖 片 ( danyalan-bg.jpg ), 并 設(shè) 置

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

效果如圖 3-23 所示。

圖 3-23 表格 2 預(yù)覽

表格 3:在標(biāo)簽選擇器中選擇該表格的第 1 列(第 1 個(gè) td 元素),在屬性面板中添加

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

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

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

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

圖 3-24 表格 3 預(yù)覽

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

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

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

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

圖 3-25 表格 4 預(yù)覽

第74頁(yè)

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

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

規(guī)則對(duì)各個(gè)表格進(jìn)行了規(guī)范化顯示,這樣就完成了該頁(yè)面的基本制作,站點(diǎn)中其他頁(yè)面

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

3.2.5 發(fā)布站點(diǎn)

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

遠(yuǎn)程發(fā)布,從理論上來(lái)講,無(wú)論本地發(fā)布還是遠(yuǎn)程發(fā)布,均可使用 IP 地址訪問(wèn),但由于

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

的一般流程。

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

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

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

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

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

步”按鈕,在彈出對(duì)話框(見(jiàn)圖 3-27)中“別名”中輸入“website001”,繼續(xù)單擊“下

一步”按鈕,在對(duì)話框中單擊“瀏覽”按鈕,選擇 E:\\website001 作為目錄(見(jiàn)圖 3-28),

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

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

第75頁(yè)

第 3 章 Dreamweaver 入門 65

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

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

第76頁(yè)

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

圖 3-29 添加虛擬目錄 website001

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

中選擇“目錄安全性”,單擊“編輯”按鈕,在彈出的對(duì)話框中(見(jiàn)圖 3-30)去掉“匿名

訪問(wèn)”前的勾選并勾選“集成 Windows 身份驗(yàn)證”復(fù)選框。

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

第77頁(yè)

第 3 章 Dreamweaver 入門 67

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

做好的 index.html 頁(yè)面,如圖 3-31 所示。

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

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

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

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

本 章 小 結(jié)

本章從 DW 的基本功能入手,介紹了 DW 中站點(diǎn)的創(chuàng)建方法,并以實(shí)例說(shuō)明了如何

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

識(shí),通過(guò)本章的學(xué)習(xí),讀者可以掌握站點(diǎn)的建立及頁(yè)面的布局方法,對(duì)如何建設(shè)網(wǎng)站有

一個(gè)全面的認(rèn)識(shí)。

第78頁(yè)

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

習(xí) 題

一、選擇題

1.關(guān)于域名系統(tǒng),以下說(shuō)法正確的是( )。

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

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

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

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

2.以下關(guān)于網(wǎng)絡(luò)協(xié)議的說(shuō)法,錯(cuò)誤的是( )。

A.HTTP 用于請(qǐng)求/應(yīng)答 Web 頁(yè)面

B.FTP 用于文件傳輸,支持?jǐn)帱c(diǎn)續(xù)傳

C.Telnet 用于遠(yuǎn)程登錄

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

3.關(guān)于自主發(fā)布,以下說(shuō)法錯(cuò)誤的是( )。

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

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

C.無(wú)論固定 IP 還是動(dòng)態(tài) IP 的服務(wù)器都需要借助動(dòng)態(tài)域名解析軟件進(jìn)行域名解析

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

4.網(wǎng)頁(yè)中常用的嵌入 CSS 的方式是( )。

A.link 標(biāo)簽和 link 屬性 B.link 標(biāo)簽和 style 屬性

C.style 標(biāo)簽和 link 屬性 D.style 標(biāo)簽和 style 屬性

二、簡(jiǎn)答題

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

2.簡(jiǎn)述在 DW 頁(yè)面中插入網(wǎng)頁(yè)基本元素(文本、圖片、鏈接等)的方法。

百萬(wàn)用戶使用云展網(wǎng)進(jìn)行電子書(shū)免費(fèi)制作,只要您有文檔,即可一鍵上傳,自動(dòng)生成鏈接和二維碼(獨(dú)立電子書(shū)),支持分享到微信和網(wǎng)站!
收藏
轉(zhuǎn)發(fā)
下載
免費(fèi)制作
其他案例
更多案例
免費(fèi)制作
x
{{item.desc}}
下載
{{item.title}}
{{toast}}