因特網(wǎng)技術(shù)基礎(chǔ)第三

關(guān)于因特網(wǎng)技術(shù)基礎(chǔ)第三第一頁(yè)，共三十八頁(yè)，2022年，8月28日第三章Dreamweaver的基本使用3.1網(wǎng)頁(yè)設(shè)計(jì)概述3.2網(wǎng)頁(yè)元素的創(chuàng)作與編輯工具3.3Dreamweaver基礎(chǔ)知識(shí)第二頁(yè)，共三十八頁(yè)，2022年，8月28日3.1網(wǎng)頁(yè)設(shè)計(jì)概述

3.1.1手工編碼方式

網(wǎng)頁(yè)是由HTML（HYPERTEXTMARKUPLANGUAGE）超文本標(biāo)記語(yǔ)言編碼的文本文檔，設(shè)計(jì)制作網(wǎng)頁(yè)的過(guò)程就是生成HTML代碼的過(guò)程。在WWW（WorldWideWeb）發(fā)展的初期人們制作網(wǎng)頁(yè)是通過(guò)直接編寫(xiě)HTML代碼來(lái)實(shí)現(xiàn)的。手工編碼制作網(wǎng)頁(yè)對(duì)網(wǎng)頁(yè)設(shè)計(jì)人員的要求較高，編碼效率低，調(diào)試過(guò)程復(fù)雜，因此，對(duì)大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)人員來(lái)說(shuō)采用這個(gè)方式比較困難。但手工編碼可以靈活地制作出豐富的網(wǎng)頁(yè)效果。

第三頁(yè)，共三十八頁(yè)，2022年，8月28日3.1.2可視化工具方式

隨著網(wǎng)頁(yè)制作技術(shù)的不斷發(fā)展，出現(xiàn)了諸如FrontPage、Dreamweaver等可視化的網(wǎng)頁(yè)編輯工具。利用這些工具人們?cè)诳梢暛h(huán)境下編輯制作網(wǎng)頁(yè)元素，由編輯工具自動(dòng)生成對(duì)應(yīng)的網(wǎng)頁(yè)代碼。如要在網(wǎng)頁(yè)上顯示表格，就可以直接在工作區(qū)中繪制表格而不用考慮編碼的規(guī)則和語(yǔ)法。利用可視化工具編輯網(wǎng)頁(yè)操作簡(jiǎn)單直觀，調(diào)試方便，是大眾化的網(wǎng)頁(yè)編輯方式。但利用可視化工具在制作一些特殊網(wǎng)頁(yè)效果上有一定的局限性。

第四頁(yè)，共三十八頁(yè)，2022年，8月28日3.1.3編碼和可視化工具結(jié)合方式

編碼和可視化工具結(jié)合是一種比較成熟的網(wǎng)頁(yè)制作方式。具體過(guò)程為：一般的網(wǎng)頁(yè)元素通過(guò)可視化工具編輯制作，一些特殊的網(wǎng)頁(yè)效果通過(guò)插入代碼生成。這種方式效率高、調(diào)試方便而且可以實(shí)現(xiàn)豐富的網(wǎng)頁(yè)效果，但要求設(shè)計(jì)人員既要熟悉Html語(yǔ)言又能運(yùn)用可視化工具。除了上面三種基本的網(wǎng)頁(yè)設(shè)計(jì)制作方式外，我們還可以通過(guò)修改已有的網(wǎng)頁(yè)代碼生成自己的網(wǎng)頁(yè)。在網(wǎng)頁(yè)編輯制作過(guò)程中具體采用何種方式要根據(jù)個(gè)人的具體情況而定，每必要拘泥于某種固定的模式。

第五頁(yè)，共三十八頁(yè)，2022年，8月28日3.2網(wǎng)頁(yè)元素的創(chuàng)作與編輯工具

3.2.1網(wǎng)頁(yè)圖像制作工具

1.FireworksFirework是目前最流行的網(wǎng)頁(yè)圖像制作軟件。只有將Dreamweaver的默認(rèn)圖像編輯器設(shè)為Fireworks，那么在Fireworks中制作完成網(wǎng)頁(yè)圖像后將其輸出就會(huì)立即在Dreamweaver中更新。Fireworks還可以安裝使用所有的Photoshop濾鏡，并且可以直接導(dǎo)入PSD格式圖像。更方便的是它不僅結(jié)合了Photoshop位圖功能以及CorelDraw矢量圖的功能，而且提供了大量的網(wǎng)頁(yè)圖像模板供用戶(hù)使用。。其最方便之處是，它可以將圖像切割，圖像映射，懸停按鈕，圖像翻轉(zhuǎn)等效果直接生成HTML代碼，或者嵌入到現(xiàn)有的網(wǎng)頁(yè)中，或者作為單獨(dú)的網(wǎng)頁(yè)出現(xiàn)。2.Photoshop第六頁(yè)，共三十八頁(yè)，2022年，8月28日3.2.2動(dòng)畫(huà)制作工具

1.FlashFlash

是目前最流行的矢量動(dòng)畫(huà)制作軟件。與其它的動(dòng)和軟件相比，它具有一些優(yōu)點(diǎn)：制作的是矢量圖像。只有用少量矢量數(shù)據(jù)就可以描述一個(gè)復(fù)雜的對(duì)象，而占有的存儲(chǔ)空間只是位圖的幾千分之一，非常適合在網(wǎng)絡(luò)上使用。同時(shí)，矢量圖像不會(huì)隨瀏覽器窗口大小的改變而改變畫(huà)面質(zhì)量。使用插件方式工作。提供了一些增強(qiáng)功能。例如，支持位圖，聲音，漸變色和Alpha透明等。擁有了這些功能，用戶(hù)就完全可以建立一個(gè)全部由Flash制作的站點(diǎn)。

Flash影片也是一種流式文件。這就是說(shuō)，瀏覽者在觀看一個(gè)大動(dòng)畫(huà)時(shí)，可以不必等到影片全部下做到本地在觀看，而是可以隨時(shí)觀看，即使后面的內(nèi)容還沒(méi)有完全下載，也可以開(kāi)始欣賞動(dòng)畫(huà)。2.DirectorDirector是Macromedia公司推出的多媒體開(kāi)發(fā)工具，它為廣大多媒體制作人員提供了建立交互式應(yīng)用的強(qiáng)大功能。用戶(hù)可以在友好的界面下通過(guò)使用Director制作出令人滿(mǎn)意的多媒體作品。Director是一個(gè)簡(jiǎn)單且直觀的軟件，即使是首次使用該軟件的用戶(hù)也能編出優(yōu)秀的程序。而且，Director又是一個(gè)高度面向?qū)ο蟮墓ぞ撸浅＿m合圖像設(shè)計(jì)者使用。

第七頁(yè)，共三十八頁(yè)，2022年，8月28日3.2.3網(wǎng)頁(yè)編輯工具

1.FrontPage FrontPage是MicrosoftOffice家族中的一員，F(xiàn)rontPage的界面，功能與Word都非常相似。FrontPage提供了相當(dāng)數(shù)量的模版和向?qū)В钩鯇W(xué)者能夠非常容易的設(shè)計(jì)出美觀實(shí)用的網(wǎng)頁(yè)。FrontPage最強(qiáng)大之處，是其站點(diǎn)管理與遠(yuǎn)程發(fā)布功能。用戶(hù)只需在本地對(duì)網(wǎng)頁(yè)進(jìn)行編輯，F(xiàn)rontPage便會(huì)跟蹤用戶(hù)編輯過(guò)的文件，在發(fā)布時(shí)，自動(dòng)將修改過(guò)的網(wǎng)頁(yè)進(jìn)行發(fā)布，未編輯過(guò)的網(wǎng)頁(yè)可由用戶(hù)決定是否再次向服務(wù)器發(fā)送。2.DreamweaverDreamweaver和Fireworks、Flash一起，被人們喻為“網(wǎng)頁(yè)制作三劍客”。同F(xiàn)rontPage一樣，Dreamweaver也是“所見(jiàn)即所得”的網(wǎng)頁(yè)編輯軟件。它能夠很好的支持ActiveX,JavaScript,Java,Flash和Shockwave等，而且還能通過(guò)鼠標(biāo)拖動(dòng)的方式從頭到尾制作動(dòng)態(tài)的HTML效果。Dreamweaver還采用了RoundtripHTML技術(shù)，使用這些技術(shù)，網(wǎng)頁(yè)可以在Dreamweaver和HTML代碼編輯器之間進(jìn)行自由轉(zhuǎn)化，而HTML語(yǔ)法及結(jié)構(gòu)不變。這樣，專(zhuān)業(yè)設(shè)計(jì)者可以在不改變?cè)芯庉嬃?xí)慣的同時(shí)，充分享受到“所見(jiàn)即所得”帶來(lái)的方便。第八頁(yè)，共三十八頁(yè)，2022年，8月28日3.3Dreamweaver基礎(chǔ)知識(shí)

Dreamweaver的工作界面第九頁(yè)，共三十八頁(yè)，2022年，8月28日3.3.2站點(diǎn)的管理 Dreamweaver站點(diǎn)由三部分組成，具體取決于開(kāi)發(fā)環(huán)境和所開(kāi)發(fā)的Web站點(diǎn)類(lèi)型：（1）本地文件夾：是您的工作目錄。Dreamweaver將該 文件夾稱(chēng)為“本地站點(diǎn)”。此文件夾可以位于本地計(jì) 算機(jī)上，也可以位于網(wǎng)絡(luò)服務(wù)器上。這就是為 Dreamweaver站點(diǎn)所處理的文件的存儲(chǔ)位置。（2）遠(yuǎn)端文件夾：是存儲(chǔ)文件的位置，這些文件用于 測(cè)試、生產(chǎn)、協(xié)作等，具體取決于開(kāi)發(fā)環(huán)境。 Dreamweaver在“文件”面板中將該文件夾稱(chēng)為“遠(yuǎn) 端站點(diǎn)”。一般說(shuō)來(lái)，遠(yuǎn)端文件夾位于運(yùn)行Web服 務(wù)器的計(jì)算機(jī)上。（3）測(cè)試服務(wù)器文件夾：是Dreamweaver處理動(dòng)態(tài)頁(yè) 的文件夾。第十頁(yè)，共三十八頁(yè)，2022年，8月28日3.3.3頁(yè)面操作(創(chuàng)建、調(diào)試、保存、打開(kāi)、頁(yè)面屬性、文檔元素、其他查看)

頁(yè)面標(biāo)題、背景圖像和顏色、文本和鏈接顏色以及邊距是每個(gè)Web文檔的基本屬性。用戶(hù)可以使用“頁(yè)面屬性”對(duì)話(huà)框設(shè)置或更改頁(yè)面屬性。第十一頁(yè)，共三十八頁(yè)，2022年，8月28日3.3.4文本對(duì)象的插入和格式化3.3.5圖像的使用（插入、屬性、動(dòng)態(tài)[圖像熱點(diǎn)]、[輪替圖像]、[占位圖像]）3.3.6鏈接和導(dǎo)航（跳轉(zhuǎn)菜單）第十二頁(yè)，共三十八頁(yè)，2022年，8月28日3.3.7網(wǎng)頁(yè)布局1、表格應(yīng)用（表格屬性設(shè)置、表格自動(dòng)格式化、1像素細(xì)線(xiàn)表格）2、利用表格進(jìn)行頁(yè)面布局3、利用Firework進(jìn)行頁(yè)面布局4、層排版第十三頁(yè)，共三十八頁(yè)，2022年，8月28日1、表格應(yīng)用（表格屬性設(shè)置、表格自動(dòng)格式化、1像素細(xì)線(xiàn)表格）

表格廣泛地應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中，無(wú)論在數(shù)據(jù)顯示方面還是在定位排版方面都起著不可替代的作用，下面就詳細(xì)介紹如何在網(wǎng)頁(yè)中創(chuàng)建表格。

在文檔中創(chuàng)建表格的步驟如下：（1）在Dreamweaver8.0中單擊“插入”—“表格”菜單命令，彈出屬性設(shè)置窗口，對(duì)所要插入的表格進(jìn)行初步定義。（2）在參數(shù)設(shè)置窗口中根據(jù)需要設(shè)置參數(shù)。（3）單擊窗口中的“確定”按鈕之后，即可在文檔中光標(biāo)所做位置插入一個(gè)表格。第十四頁(yè)，共三十八頁(yè)，2022年，8月28日 對(duì)于表格總體屬性的設(shè)置，主要是通過(guò)屬性面板來(lái)完成。第十五頁(yè)，共三十八頁(yè)，2022年，8月28日設(shè)置單元格，行和列的屬性按照前面介紹的方法，選中某一個(gè)單元格，或者是某一行、某一列。單元格的屬性面板

行的屬性面板

列的屬性面板

第十六頁(yè)，共三十八頁(yè)，2022年，8月28日 單擊已經(jīng)創(chuàng)建好的表格的邊框，以選中該表格，然后選擇“命令”|“格式化表格”菜單項(xiàng)，彈出“格式化表格”對(duì)話(huà)框。第十七頁(yè)，共三十八頁(yè)，2022年，8月28日創(chuàng)建1像素細(xì)線(xiàn)表格（1）、將表格的邊框設(shè)置為0；（2）、設(shè)置表格的單元格邊距為0，單元格間 距為1；（3）、設(shè)置表格的背景色與所有單元格的背景 色（顏色不同）。第十八頁(yè)，共三十八頁(yè)，2022年，8月28日常用頁(yè)面布局形式第十九頁(yè)，共三十八頁(yè)，2022年，8月28日第二十頁(yè)，共三十八頁(yè)，2022年，8月28日2、利用表格進(jìn)行頁(yè)面布局

在“布局”下，我們可以在網(wǎng)頁(yè)中直接畫(huà)出表格與單元格，還可以自由拖動(dòng)。利用“布局”來(lái)對(duì)網(wǎng)頁(yè)定位非常方便?！安季忠晥D”的具體用法如下所示：（1）將對(duì)象面板切換到“布局”面板組，單擊“布局”按鈕進(jìn)入“布局模式”。（2）在“布局”面板上許多以前不可用的按鈕變?yōu)榭捎脿顟B(tài)。其中有兩個(gè)按鈕，一個(gè)是“布局表格”按鈕，允許用戶(hù)像繪圖一樣在頁(yè)面里繪制表格，進(jìn)行表格布局；另一個(gè)是“繪制布局單元格”按鈕，可以用于在表格中直接繪制單元格。第二十一頁(yè)，共三十八頁(yè)，2022年，8月28日 繪制完成后，在“布局”對(duì)象面板中按下“標(biāo)準(zhǔn)模式”按鈕，則剛剛繪制的布局會(huì)全部轉(zhuǎn)換成表格。我們可以任意調(diào)整表格，也可以回到“布局模式”中繼續(xù)繪制。第二十二頁(yè)，共三十八頁(yè)，2022年，8月28日3、利用Firework進(jìn)行頁(yè)面布局（1）、將設(shè)計(jì)好的網(wǎng)頁(yè)模板（圖像）利用Firework的切片工具進(jìn)行裁切；（2）、導(dǎo)出html文件。第二十三頁(yè)，共三十八頁(yè)，2022年，8月28日第二十四頁(yè)，共三十八頁(yè)，2022年，8月28日裁切要點(diǎn)：（1）、對(duì)要插入文字或圖片的區(qū)域進(jìn)行裁切；（2）、對(duì)大面積空白區(qū)域進(jìn)行裁切（顏色一致）；（3）、裁切區(qū)域盡量不要交叉。第二十五頁(yè)，共三十八頁(yè)，2022年，8月28日4、層排版 “層”是一個(gè)容器,就像一個(gè)包含內(nèi)容的框架，可以將它放在所需要的位置。利用Dremweaver中的“層”，可以對(duì)網(wǎng)頁(yè)內(nèi)的元素的位置進(jìn)行“精確”的定位。 在Dremweaver中可以使用div或span標(biāo)記插入“層”。第二十六頁(yè)，共三十八頁(yè)，2022年，8月28日繪制層工具2個(gè)層層面板層屬性第二十七頁(yè)，共三十八頁(yè)，2022年，8月28日3.3.8CSS樣式簡(jiǎn)介

CSS是CascadingStyleSheets（層疊樣式表）的簡(jiǎn)稱(chēng)。更多的人把它稱(chēng)為樣式表。顧名思義，它是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具。借助CSS的強(qiáng)大功能，網(wǎng)頁(yè)將在我們豐富的想象力下千變?nèi)f化。 層疊樣式表(CSS)是一系列格式設(shè)置規(guī)則，它們控制Web頁(yè)面內(nèi)容的外觀。使用CSS設(shè)置頁(yè)面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開(kāi)的。頁(yè)面內(nèi)容（HTML代碼）位于自身的HTML文件中，而定義代碼表現(xiàn)形式的CSS規(guī)則位于另一個(gè)文件（外部樣式表）或HTML文檔的另一部分（通常為<head>部分）中。使用CSS可以非常靈活并更好地控制頁(yè)面的外觀，從精確的布局定位到特定的字體和樣式等。第二十八頁(yè)，共三十八頁(yè)，2022年，8月28日 術(shù)語(yǔ)“層疊”是指對(duì)同一個(gè)元素或Web頁(yè)面應(yīng)用多個(gè)樣式的能力。例如，可以創(chuàng)建一個(gè)CSS規(guī)則來(lái)應(yīng)用顏色，創(chuàng)建另一個(gè)規(guī)則來(lái)應(yīng)用邊距，然后將兩者應(yīng)用于一個(gè)頁(yè)面中的同一文本。所定義的樣式“層疊”到我們的Web頁(yè)面上的元素，并最終創(chuàng)建出我們想要的設(shè)計(jì)。第二十九頁(yè)，共三十八頁(yè)，2022年，8月28日CSS格式設(shè)置規(guī)則由兩部分組成：選擇器和聲明。選擇器是標(biāo)識(shí)已設(shè)置格式元素（如P、H1、類(lèi)名稱(chēng)或ID）的術(shù)語(yǔ)，而聲明則用于定義樣式元素。在下面的示例中，H1是選擇器，介于大括號(hào)({})之間的所有內(nèi)容都是聲明：H1{

font-size:16pixels;

font-family:Helvetica;

font-weight:bold;

}聲明由兩部分組成：屬性（如font-family）和值（如Helvetica）。上述示例為H1標(biāo)簽創(chuàng)建了樣式：鏈接到此樣式的所有H1標(biāo)簽的文本都將是16像素大小并使用Helvetica字體和粗體。第三十頁(yè)，共三十八頁(yè)，2022年，8月28日在Dreamweaver中可以定義以下規(guī)則類(lèi)型：

自定義CSS規(guī)則（也稱(chēng)為“類(lèi)樣式”）使您可以將樣式屬性應(yīng)用到任何文本范圍或文本塊。所有類(lèi)樣式均以句點(diǎn)(.)開(kāi)頭。例如，您可以創(chuàng)建稱(chēng)為.red的類(lèi)樣式，設(shè)置規(guī)則的color屬性為紅色，然后將該樣式應(yīng)用到一部分已定義樣式的段落文本中。

HTML標(biāo)簽規(guī)則重定義特定標(biāo)簽（如p或h1）的格式。創(chuàng)建或更改h1標(biāo)簽的CSS規(guī)則時(shí)，所有用h1標(biāo)簽設(shè)置了格式的文本都會(huì)立即更新。

CSS選擇器規(guī)則（高級(jí)樣式）重定義特定元素組合的格式，或其它CSS允許的選擇器形式的格式（例如，每當(dāng)h2標(biāo)題出現(xiàn)在表格單元格內(nèi)時(shí)，就應(yīng)用選擇器tdh2）。高級(jí)樣式還可以重定義包含特定id屬性的標(biāo)簽的格式（例如，由#myStyl