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

1、關(guān)于因特網(wǎng)技術(shù)基礎(chǔ)第三第一張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月第三章 Dreamweaver的基本使用 3.1 網(wǎng)頁(yè)設(shè)計(jì)概述 3.2 網(wǎng)頁(yè)元素的創(chuàng)作與編輯工具3.3 Dreamweaver 基礎(chǔ)知識(shí)第二張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3.1 網(wǎng)頁(yè)設(shè)計(jì)概述 3.1.1 手工編碼方式 網(wǎng)頁(yè)是由HTML（HYPER TEXT MARKUP LANGUAGE）超文本標(biāo)記語(yǔ)言編碼的文本文檔，設(shè)計(jì)制作網(wǎng)頁(yè)的過(guò)程就是生成HTML代碼的過(guò)程。在WWW（World Wide Web ）發(fā)展的初期人們制作網(wǎng)頁(yè)是通過(guò)直接編寫HTML代碼來(lái)實(shí)現(xiàn)的。 手工編碼制作網(wǎng)頁(yè)對(duì)網(wǎng)頁(yè)設(shè)計(jì)人員的要求較高，編碼效率低

2、，調(diào)試過(guò)程復(fù)雜，因此，對(duì)大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)人員來(lái)說(shuō)采用這個(gè)方式比較困難。但手工編碼可以靈活地制作出豐富的網(wǎng)頁(yè)效果。 第三張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月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è)效果上有一定的局限性。 第四張，PPT共三十八頁(yè)

3、，創(chuàng)作于2022年6月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è)人的具體情況而定，每必要拘泥于某種固定的模式。 第五張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3.2 網(wǎng)頁(yè)元素的創(chuàng)作與編輯工具3.2.1 網(wǎng)頁(yè)圖像制作工具 1. Fir

4、eworks Firework 是目前最流行的網(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è)圖像模板供用戶使用。其最方便之處是，它可以將圖像切割，圖像映射，懸停按鈕，圖像翻轉(zhuǎn)等效果直接生成HTML代碼，或者嵌入到現(xiàn)有的網(wǎng)頁(yè)中，或者作為單獨(dú)的網(wǎng)頁(yè)出現(xiàn)。2. Photo

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

6、片全部下做到本地在觀看，而是可以隨時(shí)觀看，即使后面的內(nèi)容還沒(méi)有完全下載，也可以開(kāi)始欣賞動(dòng)畫。2. Director Director是Macromedia公司推出的多媒體開(kāi)發(fā)工具，它為廣大多媒體制作人員提供了建立交互式應(yīng)用的強(qiáng)大功能。用戶可以在友好的界面下通過(guò)使用Director制作出令人滿意的多媒體作品。Director是一個(gè)簡(jiǎn)單且直觀的軟件，即使是首次使用該軟件的用戶也能編出優(yōu)秀的程序。而且，Director又是一個(gè)高度面向?qū)ο蟮墓ぞ撸浅＿m合圖像設(shè)計(jì)者使用。 第七張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3.2.3 網(wǎng)頁(yè)編輯工具 1. FrontPage FrontPage 是Micro

7、soft Office 家族中的一員，F(xiàn)rontPage 的界面，功能與Word 都非常相似。FrontPage提供了相當(dāng)數(shù)量的模版和向?qū)?，使初學(xué)者能夠非常容易的設(shè)計(jì)出美觀實(shí)用的網(wǎng)頁(yè)。FrontPage 最強(qiáng)大之處，是其站點(diǎn)管理與遠(yuǎn)程發(fā)布功能。用戶只需在本地對(duì)網(wǎng)頁(yè)進(jìn)行編輯，F(xiàn)rontPage 便會(huì)跟蹤用戶編輯過(guò)的文件，在發(fā)布時(shí)，自動(dòng)將修改過(guò)的網(wǎng)頁(yè)進(jìn)行發(fā)布，未編輯過(guò)的網(wǎng)頁(yè)可由用戶決定是否再次向服務(wù)器發(fā)送。2. Dreamweaver Dreamweaver 和Fireworks 、Flash 一起，被人們喻為“網(wǎng)頁(yè)制作三劍客”。同F(xiàn)rontPage一樣，Dreamweaver也是“所見(jiàn)即所得”的

8、網(wǎng)頁(yè)編輯軟件。它能夠很好的支持ActiveX, JavaScript, Java, Flash和Shockwave等，而且還能通過(guò)鼠標(biāo)拖動(dòng)的方式從頭到尾制作動(dòng)態(tài)的HTML效果。Dreamweaver還采用了Roundtrip HTML技術(shù)，使用這些技術(shù)，網(wǎng)頁(yè)可以在Dreamweaver和HTML代碼編輯器之間進(jìn)行自由轉(zhuǎn)化，而HTML語(yǔ)法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計(jì)者可以在不改變?cè)芯庉嬃?xí)慣的同時(shí)，充分享受到“所見(jiàn)即所得”帶來(lái)的方便。第八張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3.3 Dreamweaver 基礎(chǔ)知識(shí)3.3.1 Dreamweaver 的工作界面第九張，PPT共三十八頁(yè)，創(chuàng)作于2

9、022年6月3.3.2 站點(diǎn)的管理 Dreamweaver 站點(diǎn)由三部分組成，具體取決于開(kāi)發(fā)環(huán)境和所開(kāi)發(fā)的 Web 站點(diǎn)類型： （1）本地文件夾：是您的工作目錄。Dreamweaver 將該文件夾稱為“本地站點(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 在“文件”面板中將該文件夾稱為“遠(yuǎn)端站點(diǎn)”。一般說(shuō)來(lái)，遠(yuǎn)端文件夾位于運(yùn)行 Web 服務(wù)器的計(jì)算機(jī)上。 （3）測(cè)試服務(wù)器文件夾：是 Dreamweaver 處

10、理動(dòng)態(tài)頁(yè) 的文件夾。第十張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3.3.3 頁(yè)面操作(創(chuàng)建、調(diào)試、保存、打開(kāi)、頁(yè)面屬性、文檔元素、其他查看)頁(yè)面標(biāo)題、背景圖像和顏色、文本和鏈接顏色以及邊距是每個(gè) Web 文檔的基本屬性。用戶可以使用 “頁(yè)面屬性”對(duì)話框設(shè)置或更改頁(yè)面屬性。第十一張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3.3.4 文本對(duì)象的插入和格式化3.3.5 圖像的使用（插入、屬性、動(dòng)態(tài)圖像熱點(diǎn)、輪替圖像、占位圖像）3.3.6 鏈接和導(dǎo)航（跳轉(zhuǎn)菜單）第十二張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3.3.7 網(wǎng)頁(yè)布局1、表格應(yīng)用（表格屬性設(shè)置、表格自動(dòng)格式化、1像素細(xì)線表格）2、利用表格

11、進(jìn)行頁(yè)面布局3、利用Firework進(jìn)行頁(yè)面布局4、層排版第十三張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月1、表格應(yīng)用（表格屬性設(shè)置、表格自動(dòng)格式化、1像素細(xì)線表格）表格廣泛地應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中，無(wú)論在數(shù)據(jù)顯示方面還是在定位排版方面都起著不可替代的作用，下面就詳細(xì)介紹如何在網(wǎng)頁(yè)中創(chuàng)建表格。在文檔中創(chuàng)建表格的步驟如下： （1）在Dreamweaver 8.0中單擊“插入”“表格”菜單命令，彈出屬性設(shè)置窗口，對(duì)所要插入的表格進(jìn)行初步定義。 （2）在參數(shù)設(shè)置窗口中根據(jù)需要設(shè)置參數(shù)。 （3）單擊窗口中的“確定”按鈕之后，即可在文檔中光標(biāo)所做位置插入一個(gè)表格。第十四張，PPT共三十八頁(yè)，創(chuàng)作于2022年6

12、月對(duì)于表格總體屬性的設(shè)置，主要是通過(guò)屬性面板來(lái)完成。第十五張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月設(shè)置單元格，行和列的屬性 按照前面介紹的方法，選中某一個(gè)單元格，或者是某一行、某一列。單元格的屬性面板 行的屬性面板 列的屬性面板 第十六張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月單擊已經(jīng)創(chuàng)建好的表格的邊框，以選中該表格，然后選擇“命令”|“格式化表格”菜單項(xiàng)，彈出“格式化表格”對(duì)話框。第十七張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月創(chuàng)建1像素細(xì)線表格（1）、將表格的邊框設(shè)置為0；（2）、設(shè)置表格的單元格邊距為0，單元格間 距為1；（3）、設(shè)置表格的背景色與所有單元格的背景 色（顏色不同）。第十

13、八張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月常用頁(yè)面布局形式第十九張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月第二十張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月2、利用表格進(jìn)行頁(yè)面布局在“布局”下，我們可以在網(wǎng)頁(yè)中直接畫出表格與單元格，還可以自由拖動(dòng)。利用“布局”來(lái)對(duì)網(wǎng)頁(yè)定位非常方便。“布局視圖”的具體用法如下所示： （1）將對(duì)象面板切換到“布局”面板組，單擊“布局”按鈕進(jìn)入“布局模式”。 （2）在“布局”面板上許多以前不可用的按鈕變?yōu)榭捎脿顟B(tài)。其中有兩個(gè)按鈕，一個(gè)是“布局表格”按鈕 ，允許用戶像繪圖一樣在頁(yè)面里繪制表格，進(jìn)行表格布局；另一個(gè)是“繪制布局單元格”按鈕 ，可以用于在表格中直接繪制單元

14、格。第二十一張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月繪制完成后，在“布局”對(duì)象面板中按下“標(biāo)準(zhǔn)模式”按鈕，則剛剛繪制的布局會(huì)全部轉(zhuǎn)換成表格。我們可以任意調(diào)整表格，也可以回到“布局模式”中繼續(xù)繪制。第二十二張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3、利用Firework進(jìn)行頁(yè)面布局（1）、將設(shè)計(jì)好的網(wǎng)頁(yè)模板（圖像）利用Firework的切片工具進(jìn)行裁切；（2）、導(dǎo)出html文件。第二十三張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月第二十四張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月裁切要點(diǎn)：（1）、對(duì)要插入文字或圖片的區(qū)域進(jìn)行裁切；（2）、對(duì)大面積空白區(qū)域進(jìn)行裁切（顏色一 致）；（3）、裁切區(qū)域

15、盡量不要交叉。第二十五張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月4、層排版 “層”是一個(gè)容器,就像一個(gè)包含內(nèi)容的框架，可以將它放在所需要的位置。利用Dremweaver中的“層”，可以對(duì)網(wǎng)頁(yè)內(nèi)的元素的位置進(jìn)行“精確”的定位。在Dremweaver中可以使用div或span標(biāo)記插入“層”。第二十六張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月繪制層工具2個(gè)層層面板層屬性第二十七張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月3.3.8 CSS 樣式簡(jiǎn)介 CSS是Cascading Style Sheets（層疊樣式表）的簡(jiǎn)稱。更多的人把它稱為樣式表。顧名思義，它是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具。借助CSS的強(qiáng)大功

16、能，網(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 文檔的另一部分（通常為 部分）中。使用 CSS 可以非常靈活并更好地控制頁(yè)面的外觀，從精確的布局定位到特定的字體和樣式等。第二十八張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月 術(shù)語(yǔ)“層疊”是指對(duì)同一個(gè)元素或 Web 頁(yè)面應(yīng)用多個(gè)樣式的能力。例如，可以創(chuàng)建一個(gè) CSS 規(guī)則來(lái)應(yīng)用顏色，創(chuàng)建另一

17、個(gè)規(guī)則來(lái)應(yīng)用邊距，然后將兩者應(yīng)用于一個(gè)頁(yè)面中的同一文本。所定義的樣式“層疊”到我們的 Web 頁(yè)面上的元素，并最終創(chuàng)建出我們想要的設(shè)計(jì)。第二十九張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月CSS 格式設(shè)置規(guī)則由兩部分組成：選擇器和聲明。選擇器是標(biāo)識(shí)已設(shè)置格式元素（如 P、H1、類名稱或 ID）的術(shù)語(yǔ)，而聲明則用于定義樣式元素。在下面的示例中，H1 是選擇器，介于大括號(hào) () 之間的所有內(nèi)容都是聲明：H1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;聲明由兩部分組成：屬性（如 font-family）和值（如 Helveti

18、ca）。上述示例為 H1 標(biāo)簽創(chuàng)建了樣式：鏈接到此樣式的所有 H1 標(biāo)簽的文本都將是 16 像素大小并使用 Helvetica 字體和粗體。第三十張，PPT共三十八頁(yè)，創(chuàng)作于2022年6月在 Dreamweaver 中可以定義以下規(guī)則類型：自定義 CSS 規(guī)則（也稱為“類樣式”）使您可以將樣式屬性應(yīng)用到任何文本范圍或文本塊。所有類樣式均以句點(diǎn) (.) 開(kāi)頭。例如，您可以創(chuàng)建稱為 .red 的類樣式，設(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)用選擇器 td h2）。高級(jí)樣式還可以重定義包含特定 id 屬性的標(biāo)簽的格式（例如，由 #myStyle 定義的樣式可以應(yīng)用到所