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

關(guān)于因特網(wǎng)技術(shù)基礎(chǔ)第三第三章Dreamweaver的基本使用3.1網(wǎng)頁設(shè)計概述3.2網(wǎng)頁元素的創(chuàng)作與編輯工具3.3Dreamweaver基礎(chǔ)知識第2頁,共38頁，2024年2月25日，星期天3.1網(wǎng)頁設(shè)計概述

3.1.1手工編碼方式

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

第3頁,共38頁，2024年2月25日，星期天3.1.2可視化工具方式

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

第4頁,共38頁，2024年2月25日，星期天3.1.3編碼和可視化工具結(jié)合方式

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

第5頁,共38頁，2024年2月25日，星期天3.2網(wǎng)頁元素的創(chuàng)作與編輯工具

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

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

1.FlashFlash

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

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

第7頁,共38頁，2024年2月25日，星期天3.2.3網(wǎng)頁編輯工具

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

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

頁面標題、背景圖像和顏色、文本和鏈接顏色以及邊距是每個Web文檔的基本屬性。用戶可以使用“頁面屬性”對話框設(shè)置或更改頁面屬性。第11頁,共38頁，2024年2月25日，星期天3.3.4文本對象的插入和格式化3.3.5圖像的使用（插入、屬性、動態(tài)[圖像熱點]、[輪替圖像]、[占位圖像]）3.3.6鏈接和導(dǎo)航（跳轉(zhuǎn)菜單）第12頁,共38頁，2024年2月25日，星期天3.3.7網(wǎng)頁布局1、表格應(yīng)用（表格屬性設(shè)置、表格自動格式化、1像素細線表格）2、利用表格進行頁面布局3、利用Firework進行頁面布局4、層排版第13頁,共38頁，2024年2月25日，星期天1、表格應(yīng)用（表格屬性設(shè)置、表格自動格式化、1像素細線表格）

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

在文檔中創(chuàng)建表格的步驟如下：（1）在Dreamweaver8.0中單擊“插入”—“表格”菜單命令，彈出屬性設(shè)置窗口，對所要插入的表格進行初步定義。（2）在參數(shù)設(shè)置窗口中根據(jù)需要設(shè)置參數(shù)。（3）單擊窗口中的“確定”按鈕之后，即可在文檔中光標所做位置插入一個表格。第14頁,共38頁，2024年2月25日，星期天 對于表格總體屬性的設(shè)置，主要是通過屬性面板來完成。第15頁,共38頁，2024年2月25日，星期天設(shè)置單元格，行和列的屬性按照前面介紹的方法，選中某一個單元格，或者是某一行、某一列。單元格的屬性面板

行的屬性面板

列的屬性面板

第16頁,共38頁，2024年2月25日，星期天 單擊已經(jīng)創(chuàng)建好的表格的邊框，以選中該表格，然后選擇“命令”|“格式化表格”菜單項，彈出“格式化表格”對話框。第17頁,共38頁，2024年2月25日，星期天創(chuàng)建1像素細線表格（1）、將表格的邊框設(shè)置為0；（2）、設(shè)置表格的單元格邊距為0，單元格間 距為1；（3）、設(shè)置表格的背景色與所有單元格的背景 色（顏色不同）。第18頁,共38頁，2024年2月25日，星期天常用頁面布局形式第19頁,共38頁，2024年2月25日，星期天第20頁,共38頁，2024年2月25日，星期天2、利用表格進行頁面布局

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

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

font-size:16pixels;

font-family:Helvetica;

font-weight:bold;

}聲明由兩部分組成：屬性（如font-family）和值（如Helvetica）。上述示例為H1標簽創(chuàng)建了樣式：鏈接到此樣式的所有H1標簽的文本都將是16像素大小并使用Helvetica字體和粗體。第30頁,共38頁，2024年2月25日，星期天在Dreamweaver中可以定義以下規(guī)則類型：

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

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

CSS選擇器規(guī)則（高級樣式）重定義特定元素組合的格式，或其它CSS允許的選擇器形式的格式（例如，每當(dāng)h2標題出現(xiàn)在表格單元格內(nèi)時，就應(yīng)用選擇器tdh2）。高級樣式還可以重定義包含特定id屬性的標簽的格式（例如，由#myStyle定義的樣式可以應(yīng)用到所有包含屬性/值對id="myStyle"的標簽）。第31頁,