網(wǎng)頁(yè)設(shè)計(jì)與制作第2版王君學(xué)教學(xué)課件_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作第2版王君學(xué)教學(xué)課件_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作第2版王君學(xué)教學(xué)課件_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作第2版王君學(xué)教學(xué)課件_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作第2版王君學(xué)教學(xué)課件_第5頁(yè)
已閱讀5頁(yè)，還剩573頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第1章

網(wǎng)站建設(shè)基礎(chǔ).ppt第2章

Dreamweaver基礎(chǔ).ppt第3章

設(shè)置頁(yè)面和文本.ppt第4章

使用圖像和媒體.ppt第5章

創(chuàng)建超級(jí)鏈接.ppt第6章

使用表格.ppt第7章

使用CSS樣式.ppt第8章

使用CSS+Div布局.ppt第9章

使用APDiv和Spry.ppt第10章

使用框架.ppt第11章

使用行為.ppt第12章

使用庫(kù)和模板.ppt第13章

使用表單.ppt第14章

開(kāi)發(fā)ASP應(yīng)用程序基礎(chǔ).ppt第15章

制作ASP應(yīng)用程序.ppt第16章

網(wǎng)站制作綜合實(shí)訓(xùn).ppt

網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）（王君學(xué)牟建波）全套可編輯PPT幻燈片課件（共16章）

互聯(lián)網(wǎng)是現(xiàn)代社會(huì)信息傳播的重要途徑，在上網(wǎng)成為時(shí)尚的今天，了解網(wǎng)站建設(shè)和網(wǎng)頁(yè)制作的基本方法，無(wú)疑具有重要的現(xiàn)實(shí)意義。本章將介紹與網(wǎng)站建設(shè)相關(guān)的一些基本知識(shí)，以為后續(xù)內(nèi)容的學(xué)習(xí)奠定基礎(chǔ)。

第1章網(wǎng)站建設(shè)基礎(chǔ)學(xué)習(xí)目標(biāo)了解網(wǎng)站建設(shè)的基本概念。了解網(wǎng)站設(shè)計(jì)的基礎(chǔ)知識(shí)。了解網(wǎng)頁(yè)制作的基本技術(shù)。了解網(wǎng)頁(yè)制作的常用工具。了解網(wǎng)站設(shè)計(jì)的基本流程。1.1互聯(lián)網(wǎng)基礎(chǔ)因特網(wǎng)萬(wàn)維網(wǎng)HTTPIP地址域名URLFTP1.1.1因特網(wǎng)因特網(wǎng)，英文名為Internet，是目前全球最大的一個(gè)電子計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)，它的前身是美國(guó)國(guó)防部高級(jí)研究計(jì)劃局（ARPA）主持研制的ARPAnet。因特網(wǎng)分為3個(gè)層次：底層網(wǎng)、中間層網(wǎng)和主干網(wǎng)，底層網(wǎng)為大學(xué)校園網(wǎng)或企業(yè)網(wǎng)，中間層網(wǎng)為地區(qū)網(wǎng)絡(luò)和商用網(wǎng)絡(luò)，最高層為主干網(wǎng)，一般由國(guó)家或大型公司投資組建，目前美國(guó)高級(jí)網(wǎng)絡(luò)服務(wù)（AdvancedNetworkServices，ANS）公司所建設(shè)的ANSNET為因特網(wǎng)的主干網(wǎng)。因特網(wǎng)提供的服務(wù)主要有萬(wàn)維網(wǎng)WWW、文件傳輸FTP和電子郵件E-mail等。

1.1.2萬(wàn)維網(wǎng)萬(wàn)維網(wǎng)，英文名為WorldWideWeb，通?？s寫(xiě)為WWW，也可簡(jiǎn)稱為Web、3W，是因特網(wǎng)的一種信息服務(wù)。從技術(shù)角度上說(shuō)，萬(wàn)維網(wǎng)是因特網(wǎng)上那些支持WWW協(xié)議和超文本傳輸協(xié)議HTTP的客戶機(jī)與服務(wù)器的集合，透過(guò)它可以存取世界各地的超媒體文件。萬(wàn)維網(wǎng)的內(nèi)核部分是由3個(gè)標(biāo)準(zhǔn)構(gòu)成的：超文本傳輸協(xié)議HTTP、統(tǒng)一資源定位器URL和超文本標(biāo)記語(yǔ)言HTML。1.1.3HTTP

超文本傳輸協(xié)議，英文名為HyperTextTransferProtocol，通?？s寫(xiě)為HTTP，它負(fù)責(zé)規(guī)定瀏覽器和服務(wù)器之間如何互相交流，這就是瀏覽器中的網(wǎng)頁(yè)地址很多是以“http://”開(kāi)頭的原因，有時(shí)也會(huì)看到以“https”開(kāi)頭的。HTTPS（SecureHypertextTransferProtocol，安全超文本傳輸協(xié)議）是一個(gè)安全通信通道，基于HTTP開(kāi)發(fā)，用于在客戶計(jì)算機(jī)和服務(wù)器之間交換信息，可以說(shuō)它是HTTP的安全版。

1.1.4IP地址在因特網(wǎng)上有千百萬(wàn)臺(tái)主機(jī)，為了區(qū)分這些主機(jī)，人們給每臺(tái)主機(jī)都分配了一個(gè)專門(mén)的地址，稱為IP地址。通過(guò)IP地址就可以訪問(wèn)到每一臺(tái)主機(jī)。IP地址由4部分?jǐn)?shù)字組成，每部分都不大于256，各部分之間用小數(shù)點(diǎn)分開(kāi)，如“”。IP地址有固定IP地址和動(dòng)態(tài)IP地址之分。固定IP地址是長(zhǎng)期固定分配給一臺(tái)計(jì)算機(jī)使用的IP地址，一般是特殊的服務(wù)器才擁有固定IP地址。通過(guò)Modem、ISDN、ADSL、有線寬頻、小區(qū)寬頻等方式上網(wǎng)的計(jì)算機(jī)不具備固定IP地址，而是由因特網(wǎng)服務(wù)提供商動(dòng)態(tài)分配暫時(shí)的一個(gè)IP地址。普通用戶一般不需要去了解動(dòng)態(tài)IP地址，這些都是計(jì)算機(jī)系統(tǒng)自動(dòng)完成的。1.1.5域名

要記住那么多的IP地址數(shù)字串是非常困難的，為此，因特網(wǎng)提供了域名（DomainName）?？梢愿鶕?jù)公司名、行業(yè)特征等制定合適、易記的域名，這就大大方便了人們的訪問(wèn)。對(duì)于普通用戶而言，他們只需要記住域名就可以瀏覽到網(wǎng)頁(yè)。域名的格式通常是由若干個(gè)英文字母或數(shù)字組成，然后由“.”分隔成幾部分，例如“163.com”。近年來(lái)，一些國(guó)家也紛紛開(kāi)發(fā)使用本民族語(yǔ)言構(gòu)成的域名，我國(guó)也開(kāi)始使用中文域名。按照Internet的組織模式，通常對(duì)域名進(jìn)行分級(jí)，一級(jí)域名主要有以下幾種：.com（商業(yè)組織）、.net（網(wǎng)絡(luò)中心）、.edu（教育機(jī)構(gòu)）、.gov（政府部門(mén)）、.mil（軍事機(jī)構(gòu)）、.org（國(guó)際組織）等。大部分國(guó)家和地區(qū)都擁有自己獨(dú)立的域名，例如：.cn（中國(guó)）、.us（美國(guó)）、.uk（英國(guó)）、.hk（香港）等。

1.1.6URL

統(tǒng)一資源定位器，英文名為UniformResourceLocator，通?？s寫(xiě)為URL，是一個(gè)世界通用的負(fù)責(zé)給萬(wàn)維網(wǎng)中諸如網(wǎng)頁(yè)這樣的資源定位的系統(tǒng)。簡(jiǎn)單地說(shuō)，URL就是Web地址，俗稱網(wǎng)址。當(dāng)使用瀏覽器訪問(wèn)網(wǎng)站的時(shí)候，都要在瀏覽器的地址欄中輸入網(wǎng)站的網(wǎng)址。URL通常由3部分組成：協(xié)議類型，主機(jī)名和路徑及文件名。最常用的協(xié)議是HTTP協(xié)議，它也是目前萬(wàn)維網(wǎng)中應(yīng)用最廣的協(xié)議。主機(jī)名是指服務(wù)器的域名系統(tǒng)（DNS）主機(jī)名或IP地址。路徑是由“/”符號(hào)隔開(kāi)的字符串，一般用來(lái)表示主機(jī)上的一個(gè)目錄或文件地址。

1.1.7FTPFTP（FileTransferProtocol，即文本傳輸協(xié)議），是Internet上使用非常廣泛的一種通訊協(xié)議。FTP是由支持Internet文件傳輸?shù)母鞣N規(guī)則所組成的集合，這些規(guī)則使Internet用戶可以把文件從一個(gè)主機(jī)傳送到另一個(gè)主機(jī)上。FTP通常也表示用戶執(zhí)行這個(gè)協(xié)議所使用的應(yīng)用程序，如：CutFTP等。用戶使用的方法很簡(jiǎn)單，啟動(dòng)FTP軟件先與遠(yuǎn)程主機(jī)建立連接，然后向遠(yuǎn)程發(fā)出指令即可。

1.2網(wǎng)頁(yè)制作技術(shù)HTML

CSS

ASPVBScriptJavaScript1.2.1HTML一、HTML文檔的基本結(jié)構(gòu)

<html><head><title>人生哲理名言</title></head><body><p>1、鐘表，可以回到起點(diǎn)，卻已不是昨天。</p><p>2、使人成熟的是經(jīng)歷，而不是歲月。</p><p>3、低頭要有勇氣，抬頭要有底氣。</p></body></html>1.2.1HTML二、HTML標(biāo)簽<h1>標(biāo)題文字</h1><h2>標(biāo)題文字</h2>…<h6>標(biāo)題文字</h6>1.2.1HTML三、HTML段落<p>如果你的成功定義是超越別人，那么注定會(huì)失敗，因?yàn)槭郎峡傆斜饶銖?qiáng)的人。<br>如果成功的定義是超越自己，那么真的只要努力就會(huì)成功。</p><p>世界上的事情，最忌諱的就是個(gè)十全十美，你看那天上的月亮，一旦圓滿了，馬上就要虧厭；<br>樹(shù)上的果子，一旦熟透了，馬上就要墜落。<br>凡事總要稍留欠缺，才能持恒。</p>1.2.1HTML四、HTML鏈接HTML語(yǔ)言通常使用<a>…</a>標(biāo)簽在文檔中創(chuàng)建超級(jí)鏈接，例如：<ahref=""target="_blank">網(wǎng)易</a>1.2.1HTML五、HTML表格<tablewidth="200"border="1"cellpadding="0"cellspacing="0"><caption>學(xué)生名單</caption><tr><thwidth="50%"height="30">姓名</th><th>班級(jí)</th></tr><tr><tdwidth="50%"height="30"align="center">王一翔</td><tdalign="center">二年級(jí)3班</td></tr><tr><tdwidth="50%"height="30"align="center">王一楠</td><tdalign="center">二年級(jí)2班</td></tr></table>1.2.2CSS一、CSS的保存方式1.2.2CSS二、CSS的語(yǔ)法結(jié)構(gòu)CSS格式設(shè)置規(guī)則由兩部分組成：選擇器和聲明（大多數(shù)情況下為包含多個(gè)聲明的代碼塊）。選擇器是標(biāo)識(shí)已設(shè)置格式元素的術(shù)語(yǔ)（如HTML標(biāo)簽、類名稱或ID），而介于大括號(hào)（即{}）之間的所有內(nèi)容都是聲明塊，聲明塊主要用于定義樣式屬性，可以是一條也可以是多條，每條聲明由一個(gè)屬性和一個(gè)值組成。選擇器{聲明1;聲明2;...聲明N}1.2.2CSS三、CSS的樣式類型1、類樣式可應(yīng)用于任何HTML元素，它以一個(gè)點(diǎn)號(hào)來(lái)定義，例如：.pstyle{text-align:left}在下面的HTML代碼中，h1和p元素中都有pstyle類，表示兩者都將遵守pstyle選擇器中的規(guī)則。<h1class="pstyle">網(wǎng)絡(luò)流行語(yǔ)</h1><pclass="pstyle">在海邊不要講笑話，會(huì)引起“海笑”的。</p>1.2.2CSS2、ID名稱樣式ID名稱樣式可以為標(biāo)有特定ID名稱的HTML元素指定特定的樣式，它只能應(yīng)用于同一個(gè)HTML文檔中的一個(gè)HTML元素，ID選擇器以“#”來(lái)定義，例如：#p1{color:blue;}#p2{color:green;}在下面的HTML代碼中，ID名稱為p1的p元素內(nèi)的文本顯示為藍(lán)色，而ID名稱為p2的p元素內(nèi)的文本顯示為綠色。<pid="p1">細(xì)節(jié)決定成敗，態(tài)度決定一切。</p><pid="p2">習(xí)慣決定成績(jī)，細(xì)節(jié)決定命運(yùn)。</p>1.2.2CSS3、ID名稱樣式最常見(jiàn)的CSS選擇器是標(biāo)簽選擇器。換句話說(shuō)，文檔的HTML標(biāo)簽就是最基本的選擇器，例如：table{color:blue;}h2{color:silver;}p{color:gray;}標(biāo)簽樣式匹配HTML文檔中標(biāo)簽類型的名稱，也就是說(shuō)，標(biāo)簽樣式不需要使用特定的方式進(jìn)行引用。一旦定義了標(biāo)簽樣式，在HTML文檔中凡是含有該標(biāo)簽的地方自動(dòng)應(yīng)用該樣式。1.2.2CSS4、復(fù)合內(nèi)容樣式復(fù)合內(nèi)容樣式主要是指標(biāo)簽組合、標(biāo)簽嵌套等形式的CSS樣式。標(biāo)簽組合即同時(shí)為多個(gè)HTML標(biāo)簽定義相同的樣式，例如：h1,p{font-size:12px}標(biāo)簽嵌套即在某個(gè)HTML標(biāo)簽內(nèi)出現(xiàn)的另一個(gè)HTML標(biāo)簽，可以包含多個(gè)層次，例如，每當(dāng)標(biāo)簽h2出現(xiàn)在表格單元格內(nèi)時(shí)使用的選擇器格式是：tdh2{font-size:18px}復(fù)合內(nèi)容選擇器有時(shí)也會(huì)是多種形式的組合，例如：#mytablea:link,#mytablea:visited{color:#000000}上面的樣式只會(huì)應(yīng)用于ID名稱是mytable的標(biāo)簽內(nèi)的超級(jí)鏈接。1.2.2CSS5、內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式設(shè)置在單個(gè)的HTML元素中，通常使用標(biāo)簽<span>進(jìn)行定義，例如：<p>人在<spanstyle="color:#F00;">江湖</span>，身不由己</p>上面定義的內(nèi)聯(lián)樣式將使文本“江湖”以紅色顯示。1.2.3ASP1、ASPASP（ActiveServerPages，動(dòng)態(tài)服務(wù)器主頁(yè)），是Microsoft公司在1996年底推出的一種運(yùn)行于服務(wù)器端的Web應(yīng)用程序開(kāi)發(fā)技術(shù)。ASP既不是一種語(yǔ)言，也不是一種開(kāi)發(fā)工具，而是一種內(nèi)含于IIS之中的集成Script語(yǔ)言（如VBScript、JavaScript）到HTML主頁(yè)的服務(wù)器端的腳本語(yǔ)言環(huán)境，其主要功能是為生成動(dòng)態(tài)的、交互的Web服務(wù)器應(yīng)用程序提供一種功能強(qiáng)大的方式或技術(shù)?？梢哉f(shuō)，ASP是一種類似HTML、Script與CGI的結(jié)合體，但是其運(yùn)行效率卻比CGI更高，程序編制比HTML更方便且更有靈活性，程序安全及保密性也比Script好。ASP文件的擴(kuò)展名為“.asp”，其中包括HTML標(biāo)記、文本和腳本語(yǔ)句，其腳本語(yǔ)句代碼包含于“<%…%>”之間。ASP具有開(kāi)發(fā)快、易上手、效率高的優(yōu)點(diǎn)，但是存在的安全隱患也是4種語(yǔ)言里最大的，平臺(tái)的局限性也限制了ASP的發(fā)展。

1.2.3ASP2、.NET.NET相當(dāng)于ASP的升級(jí)版本，提供了一種新的編程模型結(jié)構(gòu)，可以生成伸縮性和穩(wěn)定性更好的應(yīng)用程序，并提供更好的安全保護(hù)。但是也由于是微軟的產(chǎn)品，平臺(tái)就有了限制，數(shù)據(jù)庫(kù)的鏈接也很復(fù)雜。

1.2.3ASP3、PHPPHP是當(dāng)下主流網(wǎng)站開(kāi)發(fā)語(yǔ)言之一，PHP源碼是完全公開(kāi)的，更新及時(shí)，使得PHP無(wú)論在UNIX還是在WINDOWS平臺(tái)都可以有更多新功能。它提供豐富的函數(shù)，使得在程序設(shè)計(jì)方面有著更好的資源。平臺(tái)無(wú)關(guān)性以及安全是PHP最大的優(yōu)點(diǎn)，雖然也存在一些小的缺點(diǎn)，但是作為應(yīng)用最為廣泛的一種后臺(tái)語(yǔ)言，PHP的優(yōu)點(diǎn)還是顯于缺點(diǎn)。

1.2.3ASP4、JSPJSP技術(shù)平臺(tái)和服務(wù)器是互相獨(dú)立，同PHP一樣也是開(kāi)放的源碼。JSP出現(xiàn)至今已經(jīng)是一門(mén)很成熟的程序語(yǔ)言，具有集成的數(shù)據(jù)源能力、易于維護(hù)、能有效防止系統(tǒng)崩潰等優(yōu)點(diǎn)。無(wú)疑JSP是4種語(yǔ)言里最好最強(qiáng)大的，但是由于它的強(qiáng)大就決定了其使用的技術(shù)性，所以不是一般網(wǎng)站網(wǎng)頁(yè)編程語(yǔ)言的首選。

1.2.4VBScriptVBScript是ASP的默認(rèn)腳本語(yǔ)言，它是VB家族的最新成員，可以說(shuō)VBScript是VB的子集，也可以說(shuō)VBScript是為了符合Internet小而精的條件而從VB之中萃取出精華功能的程序語(yǔ)言，其語(yǔ)法規(guī)則、函數(shù)與VB很相似，但功能上有所限制。VBScript可以在客戶端使用，也可以在服務(wù)器端使用，這是程序本身決定的。但是并不是所有的瀏覽器都支持VBScript，因此一般在安裝IIS的服務(wù)器端使用VBScript。

<scriptlanguage="VBScript">MsgBox"歡迎訪問(wèn)我們的主頁(yè)！"</script>

1.2.5JavaScriptJavaScript是一種跨平臺(tái)、基于對(duì)象的腳本語(yǔ)言，由JavaScript核心語(yǔ)言、JavaScript客戶端擴(kuò)展、JavaScript服務(wù)器端擴(kuò)展3部分組成。核心語(yǔ)言部分在客戶端、服務(wù)器端均可使用，包括了JavaScript的基本語(yǔ)法（如操作符、語(yǔ)句、函數(shù)）以及一些內(nèi)置對(duì)象等。客戶端擴(kuò)展部分是在JavaScript核心語(yǔ)言的基礎(chǔ)上擴(kuò)展了控制瀏覽器的對(duì)象模型DOM。

<scriptlanguage="JavaScript">alert("您是訪問(wèn)我們主頁(yè)的第88位瀏覽者！");</script>

1.3網(wǎng)頁(yè)制作工具1.3.1Dreamweaver1.3.2Flash1.3.3Photoshop1.3.1Dreamweaver

Dreamweaver是集網(wǎng)頁(yè)制作和網(wǎng)站管理于一身的所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。最初的版本由美國(guó)Macromedia公司開(kāi)發(fā)，在Adobe收購(gòu)Macromedia后又發(fā)布了幾個(gè)版本，如DreamweaverCS3、DreamweaverCS4、DreamweaverCS5、DreamweaverCS6、DreamweaverCC、DreamweaverCC2014等。由于具有出色的網(wǎng)頁(yè)代碼編輯和網(wǎng)頁(yè)架構(gòu)設(shè)計(jì)功能，Dreamweaver成為目前網(wǎng)頁(yè)制作者使用最多的網(wǎng)站設(shè)計(jì)工具之一。1.3.2FlashFlash是一種動(dòng)畫(huà)創(chuàng)作與應(yīng)用程序開(kāi)發(fā)于一身的創(chuàng)作軟件，最初的版本也是由美國(guó)Macromedia公司開(kāi)發(fā)，在Adobe收購(gòu)Macromedia后又發(fā)布了幾個(gè)版本，如FlashCS3、FlashCS4、FlashCS5、FlashCS6、FlashCC、FlashCC2014等。Flash是一個(gè)非常優(yōu)秀的矢量動(dòng)畫(huà)制作軟件，它以流式控制技術(shù)和矢量技術(shù)為核心，制作的動(dòng)畫(huà)具有短小精悍的特點(diǎn)，所以被廣泛應(yīng)用于網(wǎng)頁(yè)動(dòng)畫(huà)的設(shè)計(jì)中，已成為當(dāng)前網(wǎng)頁(yè)動(dòng)畫(huà)設(shè)計(jì)最為流行的軟件之一。1.3.3PhotoshopAdobe公司出品的Photoshop具有強(qiáng)大的圖形圖像處理功能，自推出之日起就一直深受廣大用戶的好評(píng)。Photoshop功能強(qiáng)大、操作靈活，為用戶提供了更為廣闊的使用空間和設(shè)計(jì)空間，使圖像設(shè)計(jì)工作更加方便、快捷。Photoshop應(yīng)用領(lǐng)域也非常廣泛，在圖像、圖形、文字、視頻、出版等各方面都有涉及。目前比較常用的Photoshop版本有PhotoshopCS5、PhotoshopCS6、PhotoshopCC、PhotoshopCC2014等。1.4網(wǎng)頁(yè)布局類型1.4.1一字型結(jié)構(gòu)1.4.2左右型結(jié)構(gòu)1.4.3川字型結(jié)構(gòu)1.4.4二字型結(jié)構(gòu)1.4.5三字型結(jié)構(gòu)1.4.6廠字型結(jié)構(gòu)1.4.7匡字型結(jié)構(gòu)1.4.8同字型結(jié)構(gòu)1.4.9回字型結(jié)構(gòu)1.4.1一字型結(jié)構(gòu)一字型結(jié)構(gòu)是最簡(jiǎn)單的網(wǎng)頁(yè)布局類型，即無(wú)論是從縱向上看還是從橫向上看都只有1欄，通常居中顯示，它是其他布局類型的基礎(chǔ)。

1.4.2 左右型結(jié)構(gòu)左右型結(jié)構(gòu)將網(wǎng)頁(yè)分割為左右兩欄，左欄小右欄大或者左欄大右欄小。1.4.3 川字型結(jié)構(gòu)川字型結(jié)構(gòu)將網(wǎng)頁(yè)分割為左中右3欄，左右兩欄小中欄大。1.4.4 二字型結(jié)構(gòu)二字型結(jié)構(gòu)將網(wǎng)頁(yè)分割為上下兩欄，上欄小下欄大或上欄大下欄小。1.4.5 三字型結(jié)構(gòu)三字型結(jié)構(gòu)將網(wǎng)頁(yè)分割為上中下3欄，上下欄小中欄大。1.4.6廠字型結(jié)構(gòu)廠字型結(jié)構(gòu)將網(wǎng)頁(yè)分割為上下兩欄，下欄又分為左右兩欄。1.4.7匡字型結(jié)構(gòu)匡字型結(jié)構(gòu)將網(wǎng)頁(yè)分割為上中下3欄，中欄又分為左右兩欄。1.4.8 同字型結(jié)構(gòu)同字型結(jié)構(gòu)將網(wǎng)頁(yè)分割為上下兩欄，下欄又分為左中右3欄。1.4.9回字型結(jié)構(gòu)回字型結(jié)構(gòu)將網(wǎng)頁(yè)分割為上中下3欄，中欄又分為左中右3欄。1.5網(wǎng)站設(shè)計(jì)流程1.5.1前期策劃1.5.2網(wǎng)頁(yè)制作1.5.3網(wǎng)站發(fā)布1.5.4網(wǎng)站推廣1.5.5后期維護(hù)1.5.1前期策劃無(wú)論是大的門(mén)戶站點(diǎn)還是只有少量頁(yè)面的個(gè)人站點(diǎn)，都需要做好前期策劃工作。明確網(wǎng)站主題、網(wǎng)站名稱、網(wǎng)站結(jié)構(gòu)、網(wǎng)站風(fēng)格、網(wǎng)站創(chuàng)意等，是制作一個(gè)網(wǎng)站的良好開(kāi)端。1.5.2 網(wǎng)頁(yè)制作在前期策劃完成后，接著就進(jìn)入網(wǎng)頁(yè)設(shè)計(jì)與制作階段。這一時(shí)期的工作按其性質(zhì)可以分為3類：頁(yè)面美工設(shè)計(jì)、靜態(tài)頁(yè)面制作和程序開(kāi)發(fā)。1.5.3 網(wǎng)站發(fā)布發(fā)布站點(diǎn)前，必須確定網(wǎng)頁(yè)的存儲(chǔ)空間。如果自己有遠(yuǎn)程服務(wù)器，配置好后，直接發(fā)布到上面即可。如果自己沒(méi)有遠(yuǎn)程服務(wù)器，則最好在網(wǎng)上申請(qǐng)一個(gè)空間來(lái)存放網(wǎng)頁(yè)，并申請(qǐng)一個(gè)域名來(lái)指定站點(diǎn)在網(wǎng)上的位置。發(fā)布網(wǎng)頁(yè)可以直接使用DreamweaverCS6的發(fā)布站點(diǎn)功能進(jìn)行上傳，也可以使用FTP工具軟件上傳。1.5.4網(wǎng)站推廣網(wǎng)站推廣活動(dòng)一般發(fā)生在網(wǎng)站發(fā)布之后，當(dāng)然也不排除一些網(wǎng)站在籌備期間就開(kāi)始宣傳的可能。網(wǎng)站推廣是網(wǎng)絡(luò)營(yíng)銷的主要內(nèi)容，可以說(shuō)，大部分的網(wǎng)絡(luò)營(yíng)銷活動(dòng)都是為了網(wǎng)站推廣的需要，如發(fā)布新聞、搜索引擎登記、交換鏈接、網(wǎng)絡(luò)廣告等。1.5.5 后期維護(hù)站點(diǎn)上傳到遠(yuǎn)程服務(wù)器后，首先要檢查運(yùn)行是否正常，如果有錯(cuò)誤要及時(shí)更正。另外，還應(yīng)對(duì)站點(diǎn)中的內(nèi)容及時(shí)進(jìn)行更新，以便提供最新信息，吸引更多的瀏覽者。

現(xiàn)在互聯(lián)網(wǎng)上各種類型的網(wǎng)站應(yīng)有盡有，掌握一門(mén)網(wǎng)站建設(shè)和網(wǎng)頁(yè)制作工具，對(duì)網(wǎng)頁(yè)制作愛(ài)好者來(lái)說(shuō)是非常必要的。本章將介紹DreamweaverCS6的基礎(chǔ)知識(shí)，為后續(xù)DreamweaverCS6的深入學(xué)習(xí)打下堅(jiān)實(shí)基礎(chǔ)。第2章Dreamweaver基礎(chǔ)學(xué)習(xí)目標(biāo)了解DreamweaverCS6的工作界面。掌握設(shè)置DreamweaverCS6首選參數(shù)的方法。掌握在DreamweaverCS6中創(chuàng)建和管理站點(diǎn)的方法。掌握在站點(diǎn)中創(chuàng)建文件夾和文件的方法。掌握在網(wǎng)頁(yè)中使用常見(jiàn)文件頭標(biāo)簽的方法。2.1

認(rèn)識(shí)工作界面2.1.1歡迎屏幕2.1.2文檔窗口2.1.3工作區(qū)布局2.1.4常用工具欄2.1.5常用面板2.1.1歡迎屏幕當(dāng)啟動(dòng)DreamweaverCS6后通常會(huì)顯示歡迎屏幕，如果希望以后啟動(dòng)DreamweaverCS6時(shí)不再顯示歡迎屏幕，勾選底部的【不再顯示】復(fù)選框即可。

2.1.2文檔窗口文檔窗口主要是用來(lái)顯示和編輯當(dāng)前的文檔頁(yè)面，通常有【代碼】、【拆分】、【設(shè)計(jì)】和【實(shí)時(shí)視圖】4種視圖模式。2.1.2文檔窗口【拆分】視圖可以將文檔窗口拆分為【代碼】視圖和【設(shè)計(jì)】視圖兩種模式，讀者既可以可視化操作，又可以隨時(shí)查看源代碼。2.1.3工作區(qū)布局

DreamweaverCS6的文檔窗口有多種布局模式，可以通過(guò)選擇【窗口】/【工作區(qū)布局】中的相應(yīng)菜單命令來(lái)更換DreamweaverCS6的工作區(qū)布局。

2.1.4常用工具欄一、【文檔】工具欄2.1.4常用工具欄2.1.4常用工具欄二、【標(biāo)準(zhǔn)】工具欄在默認(rèn)情況下，【標(biāo)準(zhǔn)】工具欄是不顯示的，可以選擇菜單命令【查看】／【工具欄】／【標(biāo)準(zhǔn)】來(lái)顯示。2.1.5常用面板一、面板組2.1.5常用面板二、【文件】面板通過(guò)【文件】面板可以在站點(diǎn)中創(chuàng)建、打開(kāi)、重命名或刪除文件夾和文件，也可以上傳和下載文件?？梢哉f(shuō)，【文件】面板是站點(diǎn)管理器的縮略圖。2.1.5常用面板二、【屬性】面板通過(guò)【屬性】面板可以設(shè)置和修改所選對(duì)象的屬性。選擇的對(duì)象不同，【屬性】面板顯示的參數(shù)也不同。文本【屬性】面板還提供了【HTML】和【CSS】?jī)煞N類型的屬性設(shè)置。2.1.5常用面板二、【插入】面板插入】面板中的按鈕分為常用、布局、表單、數(shù)據(jù)等類別，單擊相應(yīng)的類別名，將在面板中顯示相應(yīng)類別的對(duì)象按鈕。2.2設(shè)置首選參數(shù)2.2.1【常規(guī)】分類

2.2.2【不可見(jiàn)元素】分類

2.2.3【復(fù)制/粘貼】分類2.2.4

【新建文檔】分類

2.2.1【常規(guī)】分類在【首選參數(shù)】對(duì)話框的【常規(guī)】分類中可以定義【文檔選項(xiàng)】和【編輯選項(xiàng)】?jī)刹糠謨?nèi)容。2.2.2【不可見(jiàn)元素】分類在【不可見(jiàn)元素】分類中可以定義不可見(jiàn)元素是否顯示，在選擇【不可見(jiàn)元素】分類后，還要確認(rèn)菜單欄中的【查看】/【可視化助理】/【不可見(jiàn)元素】命令已經(jīng)選擇。2.2.3【復(fù)制/粘貼】分類在【復(fù)制/粘貼】分類中，可以定義粘貼到文檔中的文本格式。2.2.4【新建文檔】分類在【不可見(jiàn)元素】分類中可以定義不可見(jiàn)元素是否顯示，在選擇【不可見(jiàn)元素】分類后，還要確認(rèn)菜單欄中的【查看】/【可視化助理】/【不可見(jiàn)元素】命令已經(jīng)選擇。2.3創(chuàng)建站點(diǎn)2.3.1教學(xué)案例━━創(chuàng)建站點(diǎn)“夢(mèng)想”2.3.2定義Dreamweaver站點(diǎn)2.3.3創(chuàng)建文件夾和文件2.3.1教學(xué)案例━━創(chuàng)建站點(diǎn)“夢(mèng)想”創(chuàng)建一個(gè)本地站點(diǎn)，站點(diǎn)名稱為“夢(mèng)想”，指向本地文件夾“D:\mengxiang”，然后在站點(diǎn)中創(chuàng)建文件夾“images”，在根文件夾下創(chuàng)建網(wǎng)頁(yè)文件，并保存為“index.htm”。2.3.2定義Dreamweaver站點(diǎn)在DreamweaverCS6中，新建Dreamweaver站點(diǎn)的方法是：選擇菜單命令【站點(diǎn)】/【新建站點(diǎn)】，在打開(kāi)的對(duì)話框中，輸入站點(diǎn)名稱，并設(shè)置好本地站點(diǎn)文件夾即可。如果現(xiàn)在不需要?jiǎng)?chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)文件或不需要將網(wǎng)頁(yè)文件發(fā)布到遠(yuǎn)程站點(diǎn)上，可以暫時(shí)不設(shè)置【服務(wù)器】選項(xiàng)，在需要時(shí)再行設(shè)置即可。2.3.3創(chuàng)建文件夾和文件在【文件】面板中創(chuàng)建文件夾和文件最簡(jiǎn)便的方法是：用鼠標(biāo)右鍵單擊根文件夾或其他文件夾，在彈出的快捷菜單中選擇【新建文件夾】或【新建文件】命令，然后輸入新的文件夾或文件名稱即可。也可單擊【文件】面板組標(biāo)題欄右側(cè)的按鈕，在彈出的菜單中選擇【文件】/【新建文件夾】或【新建文件】命令。2.4管理站點(diǎn)2.4.1編輯站點(diǎn)2.4.2復(fù)制站點(diǎn)2.4.3刪除站點(diǎn)2.4.4導(dǎo)出站點(diǎn)2.4.5導(dǎo)入站點(diǎn)2.4.6新建站點(diǎn)2.4.1編輯站點(diǎn)編輯站點(diǎn)是指對(duì)DreamweaverCS6中已經(jīng)存在的站點(diǎn)重新進(jìn)行設(shè)置。編輯站點(diǎn)的方法是，在菜單欄中選擇【站點(diǎn)】/【管理站點(diǎn)】命令，打開(kāi)【管理站點(diǎn)】對(duì)話框進(jìn)行設(shè)置即可。2.4.2復(fù)制站點(diǎn)復(fù)制站點(diǎn)的方法是，在【管理站點(diǎn)】對(duì)話框中選中要復(fù)制的站點(diǎn)，然后單擊按鈕復(fù)制選定的站點(diǎn)，并顯示在【您的站點(diǎn)】列表框中，此時(shí)再對(duì)復(fù)制的站點(diǎn)進(jìn)行編輯即可。2.4.3 刪除站點(diǎn)在【管理站點(diǎn)】對(duì)話框中刪除站點(diǎn)僅僅是刪除了在DreamweaverCS6中定義的站點(diǎn)信息，存在磁盤(pán)上的相對(duì)應(yīng)的文件夾及其文件是仍然存在的。2.4.4 導(dǎo)出站點(diǎn)導(dǎo)出站點(diǎn)的方法是，在【管理站點(diǎn)】對(duì)話框中選中要導(dǎo)出的站點(diǎn)，然后單擊【導(dǎo)出站點(diǎn)】按鈕打開(kāi)【導(dǎo)出站點(diǎn)】對(duì)話框進(jìn)行設(shè)置即可。2.4.5 導(dǎo)入站點(diǎn)導(dǎo)入站點(diǎn)的方法是，在【管理站點(diǎn)】對(duì)話框中單擊【導(dǎo)入站點(diǎn)】按鈕，打開(kāi)【導(dǎo)入站點(diǎn)】對(duì)話框，選中要導(dǎo)入的站點(diǎn)文件，單擊【打開(kāi)】按鈕導(dǎo)入即可。2.4.6 新建站點(diǎn)在【管理站點(diǎn)】對(duì)話框中單擊】/【新建站點(diǎn)】按鈕可以打開(kāi)對(duì)話框新建站點(diǎn)，這與菜單命令【站點(diǎn)】/【新建站點(diǎn)】的作用是相同的。2.5插入文件頭標(biāo)簽2.5.1Meta2.5.2關(guān)鍵字2.5.3說(shuō)明2.5.4刷新2.5.1MetaMeta標(biāo)簽用于提供網(wǎng)頁(yè)的說(shuō)明信息，例如字符編碼、作者、版權(quán)信息或關(guān)鍵字，也可以用來(lái)向服務(wù)器提供信息，例如頁(yè)面的失效日期、刷新間隔等。在文件頭部可包含多個(gè)Meta標(biāo)簽，書(shū)寫(xiě)順序可以任意。添加Meta標(biāo)簽的方法是，選擇菜單命令【插入】/【HTML】/【文件頭標(biāo)簽】/【Meta】，打開(kāi)【META】對(duì)話框，進(jìn)行相應(yīng)的參數(shù)設(shè)置即可。2.5.1Meta設(shè)置網(wǎng)頁(yè)的制作者信息設(shè)置網(wǎng)頁(yè)使用的字符集2.5.1Meta禁止瀏覽器從本地緩存中調(diào)閱頁(yè)面指定顯示頁(yè)面的瀏覽器窗口2.5.2 關(guān)鍵字設(shè)置網(wǎng)頁(yè)關(guān)鍵字的方法是：選擇菜單命令【插入】/【HTML】/【文件頭標(biāo)簽】/【關(guān)鍵字】，打開(kāi)【關(guān)鍵字】對(duì)話框，輸入關(guān)鍵字即可。2.5.3 說(shuō)明在Dreamweaver中，除了可以使用上面介紹的META對(duì)話框設(shè)置網(wǎng)頁(yè)的關(guān)鍵字外，還可以直接使用【插入】/【HTML】/【文件頭標(biāo)簽】/【說(shuō)明】命令，打開(kāi)【說(shuō)明】對(duì)話框輸入說(shuō)明性文本。2.5.4 刷新定時(shí)刷新網(wǎng)頁(yè)功能也是經(jīng)常用到的。設(shè)置方法是：選擇菜單命令【插入】/【HTML】/【文件頭標(biāo)簽】/【刷新】，打開(kāi)【刷新】對(duì)話框，進(jìn)行參數(shù)設(shè)置即可。2.6編輯文件頭標(biāo)簽2.6.1通過(guò)源代碼2.6.2通過(guò)【屬性】面板2.6.1通過(guò)源代碼將文檔窗口切換到【代碼】視圖，對(duì)源代碼中的文件頭標(biāo)簽進(jìn)行修改即可。2.6.2 通過(guò)【屬性】面板保證文檔窗口處于【設(shè)計(jì)】視圖狀態(tài)，然后選擇菜單命令【查看】/【文件頭內(nèi)容】命令，來(lái)顯示【文件頭內(nèi)容】工具欄。接著在【文件頭內(nèi)容】工具欄中單擊相應(yīng)的圖標(biāo)來(lái)顯示其對(duì)應(yīng)的【屬性】面板，并在【屬性】面板中重新設(shè)置相關(guān)屬性。

制作網(wǎng)頁(yè)離不開(kāi)文本，文本是網(wǎng)頁(yè)傳遞信息的最基本的手段，掌握好文本的使用在網(wǎng)頁(yè)制作中無(wú)疑是非常重要的。本章將介紹設(shè)置文檔頁(yè)面屬性和文本屬性的基本方法。第3章設(shè)置頁(yè)面和文本學(xué)習(xí)目標(biāo)掌握創(chuàng)建和保存文檔的方法。掌握設(shè)置頁(yè)面屬性的方法。掌握設(shè)置字體屬性的方法。掌握設(shè)置段落屬性的方法。掌握使用列表的方法。掌握插入水平線和日期的方法。3.1 創(chuàng)建和保存文檔3.1.1新建文檔3.1.2保存文檔3.1.3打開(kāi)文檔3.1.4關(guān)閉文檔3.1.5添加內(nèi)容3.1.1新建文檔在DreamweaverCS6中，除了通過(guò)【文件】面板創(chuàng)建文檔外，還可以通過(guò)歡迎屏幕和菜單命令來(lái)創(chuàng)建文檔。3.1.2保存文檔創(chuàng)建文檔后可選擇菜單命令【文件】/【保存】或/【另存為】，打開(kāi)【另存為】對(duì)話框來(lái)命名保存文件。3.1.3打開(kāi)文檔在DreamweaverCS6中，可通過(guò)【文件】面板和菜單命令兩種方式來(lái)打開(kāi)網(wǎng)頁(yè)文檔。3.1.4關(guān)閉文檔

在DreamweaverCS6中，可通過(guò)文檔標(biāo)簽和菜單命令兩種方式來(lái)關(guān)閉網(wǎng)頁(yè)文檔。選擇菜單命令【文件】/【關(guān)閉】，可關(guān)閉當(dāng)前打開(kāi)的文檔。選擇菜單命令【文件】/【全部關(guān)閉】，可關(guān)閉所有打開(kāi)的文檔。

3.1.5 添加內(nèi)容在網(wǎng)頁(yè)文檔中，可以通過(guò)鍵盤(pán)直接輸入文本，也可以將其他文檔中的內(nèi)容導(dǎo)入或復(fù)制/粘貼到當(dāng)前網(wǎng)頁(yè)文檔中，對(duì)于一些無(wú)法輸入的特殊字符還可以通過(guò)DreamweaverCS6中的相關(guān)命令插入到文檔中。一、復(fù)制/粘貼文本使用復(fù)制/粘貼的方法從其他文檔中復(fù)制/粘貼文本，此時(shí)DreamweaverCS6將按【首選參數(shù)】對(duì)話框的【復(fù)制/粘貼】分類選項(xiàng)的格式設(shè)置進(jìn)行粘貼文本。如果選擇菜單命令【編輯】/【選擇性粘貼】，將打開(kāi)【選擇性粘貼】對(duì)話框，可以根據(jù)需要選擇相應(yīng)的選項(xiàng)進(jìn)行粘貼文本。3.1.5 添加內(nèi)容二、導(dǎo)入文本選擇菜單命令【文件】/【導(dǎo)入】/【W(wǎng)ord文檔】、【Excel文檔】或【表格式數(shù)據(jù)】，將分別打開(kāi)【導(dǎo)入Word文檔】、【導(dǎo)入Excel文檔】或【導(dǎo)入表格式數(shù)據(jù)】對(duì)話框，進(jìn)行參數(shù)設(shè)置后可按要求將Word文檔、Excel文檔或表格式數(shù)據(jù)導(dǎo)入到網(wǎng)頁(yè)文檔中。3.1.5 添加內(nèi)容三、插入特殊字符選擇【插入】/【HTML】/【特殊字符】菜單中的相應(yīng)命令，可以插入版權(quán)、商標(biāo)等特殊字符。還可以選擇【其他字符】命令，打開(kāi)【插入其他字符】對(duì)話框來(lái)插入其他一些特殊字符。3.2設(shè)置頁(yè)面屬性3.2.1教學(xué)案例━━北京獲得2022年冬奧會(huì)舉辦權(quán)3.2.2外觀屬性3.2.3鏈接屬性3.2.4標(biāo)題屬性3.2.5標(biāo)題/編碼屬性

3.2.6跟蹤圖像屬性

3.2.1教學(xué)案例━━北京獲得2022年冬奧會(huì)舉辦權(quán)

根據(jù)要求設(shè)置文檔頁(yè)面屬性。(1) 創(chuàng)建一個(gè)新文檔并保存為“3-2-1.htm”，然后導(dǎo)入素材文檔“北京獲得2022年冬奧會(huì)舉辦權(quán).doc”。(2) 設(shè)置頁(yè)面字體為“宋體”，大小為“14px”。(3) 設(shè)置背景顏色為“#CDFAF8”，頁(yè)邊距均為“10px”。(4) 將【標(biāo)題2】的字體修改為“黑體”，大小修改為“24px”，顏色為紅色“#F00”，然后將其應(yīng)用到文檔標(biāo)題“北京獲得2022年冬奧會(huì)舉辦權(quán)”，同時(shí)設(shè)置文檔標(biāo)題居中對(duì)齊。(5) 設(shè)置瀏覽器標(biāo)題為“北京獲得2022年冬奧會(huì)舉辦權(quán)”。3.2.1教學(xué)案例━━北京獲得2022年冬奧會(huì)舉辦權(quán)

3.2.2 外觀屬性DreamweaverCS6的【頁(yè)面屬性】對(duì)話框提供了【外觀（HTML）】和【外觀（CSS）】?jī)煞N外觀設(shè)置方式。3.2.2 外觀屬性DreamweaverCS6的【頁(yè)面屬性】對(duì)話框提供了【外觀（HTML）】和【外觀（CSS）】?jī)煞N外觀設(shè)置方式。3.2.2 外觀屬性【頁(yè)面字體】下拉列表和圖3-19【編輯字體列表】對(duì)話框。3.2.2 外觀屬性文本大小和單位列表。調(diào)色板和【顏色】拾取器調(diào)色板。3.2.2 外觀屬性調(diào)色板下拉菜單和【顏色格式】菜單。3.2.3 鏈接屬性通過(guò)【鏈接】分類，可以設(shè)置超級(jí)鏈接文本的字體、大小、鏈接文本的狀態(tài)顏色以及下劃線樣式。3.2.4 標(biāo)題屬性Dreamweaver提供了6種標(biāo)題格式：標(biāo)題1～標(biāo)題6，網(wǎng)頁(yè)通常會(huì)按其默認(rèn)格式顯示。3.2.5 標(biāo)題/編碼屬性在【標(biāo)題/編碼】分類中，可以設(shè)置瀏覽器標(biāo)題、文檔類型和編碼方式。3.2.6 跟蹤圖像屬性在【跟蹤圖像】分類中，可以將設(shè)計(jì)草圖設(shè)置成跟蹤圖像，鋪在編輯的網(wǎng)頁(yè)下面作為參考圖，用于引導(dǎo)網(wǎng)頁(yè)的設(shè)計(jì)。3.3設(shè)置字體屬性3.3.1教學(xué)案例━━冬季運(yùn)動(dòng)的益處3.3.2文檔標(biāo)題3.3.3字體類型3.3.4字體顏色3.3.5文本大小3.3.6粗體和斜體3.3.7CSS規(guī)則3.3.1教學(xué)案例━━冬季運(yùn)動(dòng)的益處根據(jù)要求創(chuàng)建文檔并進(jìn)行格式設(shè)置，在瀏覽器中的顯示效果如圖3-30所示。2.3.2定義Dreamweaver站點(diǎn)在DreamweaverCS6中，新建Dreamweaver站點(diǎn)的方法是：選擇菜單命令【站點(diǎn)】/【新建站點(diǎn)】，在打開(kāi)的對(duì)話框中，輸入站點(diǎn)名稱，并設(shè)置好本地站點(diǎn)文件夾即可。如果現(xiàn)在不需要?jiǎng)?chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)文件或不需要將網(wǎng)頁(yè)文件發(fā)布到遠(yuǎn)程站點(diǎn)上，可以暫時(shí)不設(shè)置【服務(wù)器】選項(xiàng)，在需要時(shí)再行設(shè)置即可。3.3.2 文檔標(biāo)題Dreamweaver提供了6種標(biāo)題格式：標(biāo)題1～標(biāo)題6，可以在【屬性（HTML）】面板的【格式】下拉列表中進(jìn)行選擇。設(shè)置文檔標(biāo)題的6種HTML標(biāo)簽依次是：<h1>…</h1>，<h2>…</h2>，<h3>…</h3>，<h4>…</h4>，<h5>…</h5>，<h6>…</h6>。數(shù)字越小字號(hào)越大，數(shù)字越大字號(hào)越小。3.3.3 字體類型通過(guò)【屬性（CSS）】面板中的【字體】下拉列表可以設(shè)置所選文本的字體類型。3.3.4 字體顏色利用調(diào)色板設(shè)置所選文本的顏色。3.3.5 文本大小通過(guò)【屬性（CSS）】面板的【大小】選項(xiàng)可以設(shè)置所選文本的大小。在【大小】下拉列表中可以選擇已預(yù)設(shè)的選項(xiàng)，也可以在文本框中直接輸入數(shù)字，然后在后邊的下拉列表中選擇單位。單位可分為“相對(duì)值”和“絕對(duì)值”兩類。除百分比以外，建議讀者在制作網(wǎng)頁(yè)時(shí)固定使用一種類型的單位，不要混用，否則會(huì)給網(wǎng)頁(yè)的維護(hù)帶來(lái)不必要的麻煩。3.3.6 粗體和斜體選擇【格式】/【樣式】菜單中的相應(yīng)命令，可以設(shè)置所選文本的粗體、斜體、下劃線、刪除線等樣式。在【插入】面板的【文本】類別，可以設(shè)置粗體、斜體、加強(qiáng)和強(qiáng)調(diào)等樣式。3.3.7 CSS規(guī)則在設(shè)置文本的字體、大小和顏色屬性時(shí)，通常會(huì)打開(kāi)【新建CSS規(guī)則】對(duì)話框。3.3.7 CSS規(guī)則單擊【確定】按鈕后，在【屬性（CSS）】面板的【目標(biāo)規(guī)則】下拉列表中自動(dòng)出現(xiàn)了樣式名稱。3.4設(shè)置段落屬性3.4.1教學(xué)案例━━冬季運(yùn)動(dòng)項(xiàng)目3.4.2段落與換行3.4.3文本對(duì)齊方式3.4.4文本縮進(jìn)和凸出3.4.5設(shè)置列表3.4.6插入水平線3.4.7插入日期3.4.1教學(xué)案例━━冬季運(yùn)動(dòng)項(xiàng)目根據(jù)要求創(chuàng)建文檔并進(jìn)行格式設(shè)置，在瀏覽器中的顯示效果如圖3-44所示。3.4.2 段落與換行通過(guò)【屬性（HTML）】面板的【格式】下拉列表，可以設(shè)置正文的段落格式，即HTML標(biāo)簽“<p>…</p>”所包含的所有文本為一個(gè)段落，用戶可以設(shè)置文檔的標(biāo)題格式為“標(biāo)題1”～“標(biāo)題6”，還可以將某一段文本按照預(yù)先格式化的樣式進(jìn)行顯示，即選擇【預(yù)先格式化的】選項(xiàng)，其HTML標(biāo)簽是“<pre>…</pre>”，如果要取消已設(shè)置的格式，選擇【無(wú)】選項(xiàng)即可，如圖3-53所示，也可以利用【格式】/【段落格式】菜單中的相應(yīng)命令來(lái)進(jìn)行設(shè)置。在文檔中輸入文本時(shí)直接按Enter鍵也可以形成一個(gè)段落，其HTML標(biāo)簽是“<P>…</P>”，如果按Shift+Enter組合鍵或選擇菜單命令【插入】/【HTML】/【特殊字符】/【換行符】，則可以在段落中進(jìn)行換行，其HTML標(biāo)簽是“<br>”，XHTML標(biāo)簽是“<br/>”。默認(rèn)狀態(tài)下，段與段之間是有間距的，而通過(guò)換行符進(jìn)行換行不會(huì)在兩行之間形成大的間距，如圖3-54所示。3.4.3 文本對(duì)齊方式文本的對(duì)齊方式通常有4種：左對(duì)齊、居中對(duì)齊、右對(duì)齊和兩端對(duì)齊?？梢栽凇緦傩裕–SS）】面板中單擊相應(yīng)按鈕來(lái)進(jìn)行設(shè)置，也可以通過(guò)【格式】/【對(duì)齊】菜單中的相應(yīng)命令來(lái)實(shí)現(xiàn)。這兩種方式的效果是一樣的，但使用的代碼不一樣。前者使用CSS樣式進(jìn)行定義，后者使用HTML標(biāo)簽進(jìn)行定義。如果同時(shí)設(shè)置多個(gè)段落的對(duì)齊方式，則需要先選中這些段落。3.4.4 文本縮進(jìn)和凸出在文檔排版過(guò)程中，有時(shí)會(huì)遇到需要使某段文本整體向內(nèi)縮進(jìn)或向外凸出的情況。單擊【屬性】面板上的相應(yīng)按鈕，或者選擇菜單命令【格式】/【縮進(jìn)】（或【凸出】），可以使段落整體向內(nèi)縮進(jìn)（或向外凸出）。如果同時(shí)設(shè)置多個(gè)段落的縮進(jìn)和凸出，則需要先選中這些段落。3.4.5 設(shè)置列表列表的類型通常有編號(hào)列表、項(xiàng)目列表和定義列表等，最常用的是項(xiàng)目列表和編號(hào)列表。用戶可以根據(jù)需要設(shè)置列表屬性。3.4.5 設(shè)置列表列表可以嵌套，方法是首先設(shè)置1級(jí)列表，然后在1級(jí)列表中選擇需要設(shè)置為2級(jí)列表的內(nèi)容并使其縮進(jìn)一次，最后根據(jù)需要重新設(shè)置縮進(jìn)部分的列表類型。3.4.6 插入水平線在制作網(wǎng)頁(yè)時(shí)，經(jīng)常需要插入水平線來(lái)對(duì)內(nèi)容區(qū)域進(jìn)行分割。選擇菜單命令【插入】/【HTML】/【水平線】可以插入一條水平線。選中水平線，在【屬性】面板中還可以設(shè)置水平線的id名稱、寬度、高度、對(duì)齊方式和是否具有陰影效果等參數(shù)。3.4.7 插入日期許多網(wǎng)頁(yè)在頁(yè)腳位置都有制作或修改日期，而且每次修改保存后都會(huì)自動(dòng)更新。選擇菜單命令【插入】/【日期】，打開(kāi)【插入日期】對(duì)話框，根據(jù)需要進(jìn)行參數(shù)設(shè)置即可。只有在【插入日期】對(duì)話框中選中【儲(chǔ)存時(shí)自動(dòng)更新】復(fù)選框，才能在更新網(wǎng)頁(yè)時(shí)自動(dòng)更新日期，而且也只有選擇了該選項(xiàng)，才能使單擊日期時(shí)顯示日期的【屬性】面板，否則插入的日期僅僅是一段文本而已。

圖像和媒體與文本一樣，是網(wǎng)頁(yè)制作中不可缺少的重要元素。圖像和媒體不僅可以為網(wǎng)頁(yè)增色添彩，還可以更好地配合文本傳遞信息。本章將介紹圖像和媒體的基本知識(shí)以及在網(wǎng)頁(yè)中插入圖像和媒體的基本方法。第4章使用圖像和媒體學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)中常用的圖像和媒體的基本類型。掌握插入圖像和圖像占位符的方法。掌握插入SWF動(dòng)畫(huà)、FLV視頻和ActiveX控件的方法。掌握設(shè)置圖像屬性和不同媒體屬性的方法。4.1圖像格式4.1.1GIF圖像4.1.2JPG/JPEG圖像4.1.3PNG圖像4.1.1 GIF圖像GIF格式（GraphicsInterchangeFormat，圖像交換格式，文件擴(kuò)展名為“.gif”）的數(shù)據(jù)是一種連續(xù)色調(diào)的無(wú)損壓縮格式，采用了可變長(zhǎng)度等壓縮算法，壓縮率一般在50%左右。只要圖像不多于256色，GIF格式既可減少文件的大小，又能保持成像的質(zhì)量。但是GIF格式不多于256色的限制局限了其應(yīng)用范圍，不適合顯示有暈光、漸變色彩等顏色細(xì)膩的圖像和照片等。GIF格式最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像（如圖表、按鈕、圖標(biāo)、徽標(biāo)）或其他具有統(tǒng)一色彩和色調(diào)或只需少量顏色的圖像（如黑白照片等）。GIF分為靜態(tài)GIF和動(dòng)畫(huà)GIF兩種，支持透明背景圖像，適用于多種操作系統(tǒng)。動(dòng)畫(huà)GIF是將多幅圖像保存為一個(gè)圖像文件，從而形成動(dòng)畫(huà)。GIF格式因其具有圖像文件體積小、成像相對(duì)清晰、下載速度快、下載時(shí)隔行顯示、支持透明色以及多個(gè)圖像能組成動(dòng)畫(huà)的特點(diǎn)，因此大受歡迎，是一種在網(wǎng)絡(luò)上使用最早、應(yīng)用非常廣泛的圖形文件格式。目前幾乎所有相關(guān)軟件都支持GIF格式，公共領(lǐng)域有大量的軟件在使用GIF格式圖像文件。4.1.2 JPG/JPEG圖像JPG/JPEG格式（JointPhotographicExpertsGroup，聯(lián)合圖像專家組文件格式，文件擴(kuò)展名為“.jpg”或“.jpeg”），是24位的圖像文件格式，也是一種與平臺(tái)無(wú)關(guān)的高效率壓縮格式。JPG/JPEG標(biāo)準(zhǔn)由ISO與CCITT（國(guó)際電報(bào)電話咨詢委員會(huì)）共同制定，是面向連續(xù)色調(diào)靜止圖像的一種壓縮標(biāo)準(zhǔn)。JPG/JPEG格式的文件一般有兩種文件擴(kuò)展名：“.jpg”和“.jpeg”，這兩種擴(kuò)展名的實(shí)質(zhì)是相同的，可以把“.jpg”的文件改名為“.jpeg”，而對(duì)文件本身不會(huì)有任何影響。嚴(yán)格來(lái)講，JPEG的文件擴(kuò)展名應(yīng)該為“.jpeg”，但由于DOS系統(tǒng)的8.3文件名命名規(guī)則，PC機(jī)使用了“.jpg”的擴(kuò)展名，而由于Mac系統(tǒng)并不限制擴(kuò)展名的長(zhǎng)度，因此當(dāng)時(shí)蘋(píng)果機(jī)上都使用了“.jpeg”的擴(kuò)展名。雖然現(xiàn)在Windows系統(tǒng)也可以支持任意長(zhǎng)度的擴(kuò)展名了，但大家已經(jīng)習(xí)慣了“.jpg”的用法。這與HTML網(wǎng)頁(yè)文檔擴(kuò)展名“.htm”和“.html”的情況是一樣的，雖然擴(kuò)展名不一樣，但實(shí)際上是一回事。4.1.3 PNG圖像PNG格式（PortableNetworkGraphicsFormat，便攜式網(wǎng)絡(luò)圖形格式，文件擴(kuò)展名為“.png”）。PNG格式設(shè)計(jì)的目的是試圖替代GIF和TIFF文件格式，同時(shí)增加一些GIF文件格式所不具備的特性。網(wǎng)絡(luò)通訊中因受帶寬制約，在保證圖像清晰、逼真的前提下，PNG格式圖像文件體積小，特別適合網(wǎng)絡(luò)傳輸。PNG格式文件具有高壓縮比，它利用特殊的編碼方法標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)，因而對(duì)圖像的顏色沒(méi)有影響，也不可能產(chǎn)生顏色的損失，這樣就可以重復(fù)保存而不降低圖像質(zhì)量。PNG-8格式與GIF圖像類似，同樣采用8位調(diào)色板將RGB彩色圖像轉(zhuǎn)換為索引彩色圖像。圖像中保存的不再是各個(gè)像素的彩色信息，而是從圖像中挑選出來(lái)的具有代表性的顏色編號(hào)，每一編號(hào)對(duì)應(yīng)一種顏色，圖像的數(shù)據(jù)量也因此減少，這對(duì)彩色圖像的傳播非常有利。PNG格式圖像在瀏覽器上采用流式瀏覽，即使經(jīng)過(guò)交錯(cuò)處理的圖像會(huì)在完全下載之前提供瀏覽者一個(gè)基本的圖像內(nèi)容，然后再逐漸清晰起來(lái)。它允許連續(xù)讀出和寫(xiě)入圖像數(shù)據(jù)，這個(gè)特性很適合于在通信過(guò)程中顯示和生成圖像。PNG格式可以為原圖像定義256個(gè)透明層次，使得彩色圖像的邊緣能與任何背景平滑地融合，從而徹底地消除鋸齒邊緣。這種功能是GIF和JPEG沒(méi)有的。PNG格式還支持真彩和灰度級(jí)圖像的Alpha通道透明度。PNG格式對(duì)于幾乎任何類型的網(wǎng)頁(yè)圖像都是非常適合的，是目前使用量逐漸增多的圖像格式。4.2.1 教學(xué)案例━━五月飛雪將素材文檔復(fù)制到站點(diǎn)文件夾下，然后根據(jù)要求設(shè)置網(wǎng)頁(yè)背景和插入圖像，在瀏覽器中的顯示效果如圖4-1所示。(1) 設(shè)置整個(gè)網(wǎng)頁(yè)的背景圖像為“snowbg.jpg”，要求背景圖像縱向和橫向都重復(fù)。(2) 依次插入3個(gè)JPG格式的圖像“snow01.jpg”、“snow02.jpg”、“snow03.jpg”以及一個(gè)PSD格式的圖像“snow04.psd”，替換文本依次為“雪中紅花”、“雪后森林”、“雪中綠樹(shù)”、“雪后大地”。4.2.1 教學(xué)案例━━五月飛雪4.2.2 設(shè)置背景在制作網(wǎng)頁(yè)時(shí)，經(jīng)常需要設(shè)置背景圖像或背景顏色。設(shè)置整個(gè)網(wǎng)頁(yè)的背景圖像或背景顏色，可通過(guò)【頁(yè)面屬性】對(duì)話框進(jìn)行。4.2.3 插入圖像一、通過(guò)【選擇圖像源文件】對(duì)話框插入圖像。在插入圖像時(shí)，有時(shí)會(huì)彈出【圖像標(biāo)簽輔助功能屬性】對(duì)話框。

二、通過(guò)【文件】面板拖曳圖像4.2.3 插入圖像

三、通過(guò)【資源】面板插入圖像4.2.3 插入圖像

四、插入PSD文件。在DreamweaverCS6中，可以直接在網(wǎng)頁(yè)文檔中插入PSD文件，此時(shí)將彈出【圖像優(yōu)化】對(duì)話框。4.2.3 插入圖像4.2.4 圖像屬性圖像插入到網(wǎng)頁(yè)后，不一定完全適合需要，有時(shí)還需要進(jìn)行修飾。最好使用Photoshop等圖像處理軟件對(duì)圖像提前進(jìn)行處理，不過(guò)在DreamweaverCS6中，可以通過(guò)【屬性】面板來(lái)設(shè)置圖像大小，也可以適度地進(jìn)行編輯處理操作，使其更符合實(shí)際需要。4.2.5 圖像占位符選擇菜單命令【插入】/【圖像對(duì)象】/【圖像占位符】，或者在【插入】面板的【常用】類別中單擊圖像按鈕組中的【圖像占位符】按鈕，打開(kāi)【圖像占位符】對(duì)話框，根據(jù)需要設(shè)置參數(shù)即可。4.3 媒體類型4.3.1SWF4.3.2FLV

4.3.3WMV

4.3.4WMA

4.3.5MP4

4.3.6RA

4.3.7RM4.3.8RMVB

4.3.9ASF

4.3.10Shockwave

4.3.1SWF

SWF（ShockWaveFlash）是一種基于矢量的Flash動(dòng)畫(huà)文件（文件擴(kuò)展名為“.swf”），是Macromedia（現(xiàn)已被ADOBE公司收購(gòu)）公司的動(dòng)畫(huà)設(shè)計(jì)軟件Flash的專用格式，被廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)、動(dòng)畫(huà)制作等領(lǐng)域?？梢栽贔lash中創(chuàng)建原始內(nèi)容或者從其它Adobe應(yīng)用程序（如Photoshop或Illustrator）導(dǎo)入它們，快速設(shè)計(jì)簡(jiǎn)單的動(dòng)畫(huà)，以及使用AdobeAcitonScript3.0開(kāi)發(fā)高級(jí)的交互式項(xiàng)目。設(shè)計(jì)人員和開(kāi)發(fā)人員可使用它來(lái)創(chuàng)建演示文稿、應(yīng)用程序和其它允許用戶交互的內(nèi)容。Flash可以包含簡(jiǎn)單的動(dòng)畫(huà)、視頻內(nèi)容、復(fù)雜演示文稿和應(yīng)用程序以及介于它們之間的任何內(nèi)容。通常，使用Flash創(chuàng)作的各個(gè)內(nèi)容單元稱為應(yīng)用程序，即使它們可能只是很簡(jiǎn)單的動(dòng)畫(huà)。也可以通過(guò)添加圖片、聲音、視頻和特殊效果，構(gòu)建包含豐富媒體的Flash應(yīng)用程序。4.3.2FLV

FLV（FlashVideo）是隨著FlashMX的推出而發(fā)展而來(lái)的一種新興的流媒體格式（文件擴(kuò)展名為“.flv”）。由于它形成的文件具有體積小、加載速度極快、CPU占有率低、視頻質(zhì)量良好等特點(diǎn)，使得網(wǎng)絡(luò)觀看視頻文件成為可能。它的出現(xiàn)有效地解決了視頻文件導(dǎo)入Flash后，使導(dǎo)出的SWF文件體積龐大，不能在網(wǎng)絡(luò)上很好地使用等問(wèn)題。而且，F(xiàn)LV利用了網(wǎng)頁(yè)上廣泛使用的FlashPlayer平臺(tái)，訪問(wèn)者只要能看Flash動(dòng)畫(huà)就能看FLV視頻，而無(wú)需再額外安裝視頻插件，F(xiàn)LV視頻的使用給視頻傳播帶來(lái)了極大便利?？梢哉f(shuō)，F(xiàn)LV視頻是目前網(wǎng)絡(luò)上使用最廣泛的視頻傳播格式。4.3.3WMV

WMV（WindowsMediaVideo）是微軟推出的一種流媒體格式（文件擴(kuò)展名為“.wmv”），它是由ASF（AdvancedStreamFormat）格式升級(jí)延伸而來(lái)。在同等視頻質(zhì)量下，WMV格式的文件可以邊下載邊播放，因此很適合在網(wǎng)上傳輸和播放。WMV文件一般同時(shí)包含視頻和音頻部分，視頻部分使用WindowsMediaVideo編碼，音頻部分使用WindowsMediaAudio編碼。WMV-HD，基于WMV9標(biāo)準(zhǔn)，是微軟開(kāi)發(fā)的視頻壓縮技術(shù)系列中的其中一個(gè)版本。盡管WMV-HD是微軟的獨(dú)有標(biāo)準(zhǔn)，但因其在操作系統(tǒng)中大力支持WMV系列版本，從而在桌面系統(tǒng)得以迅速普及。4.3.4WMA

WMA（WindowsMediaAudio）是微軟公司推出的與MP3格式齊名的一種新的音頻格式（文件擴(kuò)展名為“.wma”）。由于WMA在壓縮比和音質(zhì)方面都超過(guò)了MP3，更是遠(yuǎn)勝于RA，即使在較低的采樣頻率下也能產(chǎn)生較好的音質(zhì)。WMA還支持音頻流技術(shù)，適合在網(wǎng)絡(luò)上在線播放。WMA可以用于多種格式的編碼文件中。應(yīng)用程序可以使用WindowsMediaFormatSDK進(jìn)行WMA格式的編碼和解碼。一些常見(jiàn)的支持WMA的應(yīng)用程序包括WindowsMediaPlayer、WindowsMediaEncoder、RealPlayer、Winamp等。其他一些平臺(tái)，例如Linux和移動(dòng)設(shè)備中的軟硬件也支持此格式。4.3.5MP4

MP4（MPEG-4Part14）是一種使用MPEG-4對(duì)音頻、視頻信息進(jìn)行壓縮的編碼格式（文件擴(kuò)展名為“.mp4”），以儲(chǔ)存數(shù)碼音訊及數(shù)碼視訊為主。MP4由國(guó)際標(biāo)準(zhǔn)化組織（ISO）和國(guó)際電工委員會(huì)（IEC）下屬的“動(dòng)態(tài)圖像專家組”（MovingPictureExpertsGroup，即MPEG）制定，第一版在1998年10月通過(guò)，第二版在1999年12月通過(guò)。MPEG-4格式的主要用途在于網(wǎng)上流、光盤(pán)、語(yǔ)音發(fā)送（視頻電話）以及電視廣播。MPEG-4包含了MPEG-1及MPEG-2的絕大部份功能及其他格式的長(zhǎng)處，并加入及擴(kuò)充對(duì)虛擬現(xiàn)實(shí)模型語(yǔ)言（VRML，VirtualRealityModelingLanguage）的支持，具有面向?qū)ο蟮暮铣蓹n案（包括音效、視訊和VRML對(duì)象）以及數(shù)字版權(quán)管理（DRM）及其他互動(dòng)功能。MPEG-4比MPEG-2更先進(jìn)，其中一點(diǎn)就是不再使用宏區(qū)塊做影像分析，而是以影像上個(gè)體為變化記錄，因此盡管影像變化速度很快、碼率不足時(shí)，也不會(huì)出現(xiàn)方塊畫(huà)面。4.3.6RA

RA（RealAudio）是RealNetworks公司所開(kāi)發(fā)的一種流式音頻文件格式（文件擴(kuò)展名為“.ra”）。RA文件壓縮比例高，體積小巧，可以隨網(wǎng)絡(luò)帶寬的不同而改變聲音質(zhì)量，能夠很好地實(shí)時(shí)傳送和播放，非常適合在網(wǎng)絡(luò)傳輸速度較低的互聯(lián)網(wǎng)上使用。RA格式文件需要RealPlayer來(lái)播放，其他很多播放器都也可以打開(kāi)RA格式文件。4.3.7RM

RM格式是RealNetworks公司開(kāi)發(fā)的一種流媒體視頻文件格式（文件擴(kuò)展名為“.rm”）。RM可以根據(jù)網(wǎng)絡(luò)數(shù)據(jù)傳輸?shù)牟煌俾手贫ú煌膲嚎s比率，從而實(shí)現(xiàn)低速率的網(wǎng)絡(luò)進(jìn)行視頻文件的實(shí)時(shí)傳送和播放。它主要包含RealAudio、RealVideo和RealFlash三部分。這種格式的一個(gè)特點(diǎn)是用戶使用RealPlayer或RealOnePlayer播放器可以在不下載音頻/視頻內(nèi)容的條件下實(shí)現(xiàn)在線播放。RM格式一開(kāi)始就定位在視頻流應(yīng)用方面，可以說(shuō)是視頻流技術(shù)的始創(chuàng)者。RM格式的誕生，使得流文件為更多人所知。這類文件可以實(shí)現(xiàn)即時(shí)播放，即先從服務(wù)器上下載一部分視頻文件，形成視頻流緩沖區(qū)后實(shí)時(shí)播放，同時(shí)繼續(xù)下載，為接下來(lái)的播放做好準(zhǔn)備。這種“邊傳邊播”的方法避免了用戶必須等待整個(gè)文件從網(wǎng)絡(luò)上全部下載完畢才能觀看的缺點(diǎn)，因而特別適合在線觀看影視。RM主要用于在低速率的網(wǎng)上實(shí)時(shí)傳輸視頻的壓縮格式，它同樣具有小體積而又比較清晰的特點(diǎn)。RM文件的大小完全取決于制作時(shí)選擇的壓縮率。4.3.8RMVB

RMVB是在流媒體的RM影片格式上升級(jí)延伸而來(lái)的一種視頻文件格式，RMVB中的VB指VBR（VariableBitRate），可改變之比特率。RMVB則打破了原先RM格式那種平均壓縮采樣的方式，在保證平均壓縮比的基礎(chǔ)上，設(shè)定了一般為平均采樣率兩倍的最大采樣率值。將較高的比特率用于復(fù)雜的動(dòng)態(tài)畫(huà)面，而在靜態(tài)畫(huà)面中則靈活地轉(zhuǎn)為較低的采樣率，合理地利用了比特率資源，使RMVB最大限度地壓縮了影片的大小，最終擁有了近乎完美的的視聽(tīng)效果，因此RMVB較上一代RM格式畫(huà)面要清晰了很多。RMVB可以用RealPlayer、暴風(fēng)影音、QQ影音等播放軟件來(lái)播放。4.3.9ASF

ASF（AdvancedStreamingFormat）是由微軟公司開(kāi)發(fā)用于網(wǎng)絡(luò)傳播和播放動(dòng)態(tài)影像的一種流媒體格式（文件擴(kuò)展名為“.asf”），以網(wǎng)絡(luò)數(shù)據(jù)包的形式傳輸，實(shí)現(xiàn)流式多媒體內(nèi)容發(fā)布。它包含音頻、視頻、圖像等多種形式，其最大的特點(diǎn)是體積小，是針對(duì)網(wǎng)絡(luò)傳播而開(kāi)發(fā)的通用多媒體文件格式。ASF支持任意的壓縮/解壓縮編碼方式，并可以使用任何一種底層網(wǎng)絡(luò)傳輸協(xié)議，具有很大的靈活性。MicrosoftMediaplayer是能播放幾乎所有多媒體文件的播放器，支持網(wǎng)絡(luò)上的ASF流文件格式，可以一邊下載一邊實(shí)時(shí)播放。4.3.10Shockwave

Shockwave是Macromedia公司（后被Adobe公司收購(gòu)）制定的用于在Web中插放豐富的交互式多媒體內(nèi)容的業(yè)界標(biāo)準(zhǔn)（文件擴(kuò)展名為“.dcr”、“.dir”、“.dxr”）?？梢酝ㄟ^(guò)Director來(lái)創(chuàng)建Shockwave影片，它生成的壓縮格式可以被瀏覽器快速下載，并且可被目前的主流瀏覽器所支持。Director是美國(guó)Adobe公司開(kāi)發(fā)的一款軟件，主要用于多媒體項(xiàng)目的集成開(kāi)發(fā)。廣泛應(yīng)用于多媒體光盤(pán)、課件、觸摸屏軟件、網(wǎng)絡(luò)電影、網(wǎng)絡(luò)交互式多媒體查詢系統(tǒng)、企業(yè)多媒體形象展示、游戲和屏幕保護(hù)等的開(kāi)發(fā)制作。使用Director能夠容易地創(chuàng)建包含高品質(zhì)圖像、數(shù)字視頻、音頻、動(dòng)畫(huà)、三維模型、文本、超文本以及Flash文件的多媒體程序。4.4 應(yīng)用媒體4.4.1教學(xué)案例━━海坨戴雪4.4.2插入SWF動(dòng)畫(huà)4.4.3插入FLV視頻4.4.4插入Shockwave影片4.4.5插入Applet4.4.6插入ActiveX控件4.4.7插入插件4.4.1 教學(xué)案例━━海坨戴雪將素材文檔復(fù)制到站點(diǎn)文件夾下，然后根據(jù)要求設(shè)置網(wǎng)頁(yè)，在瀏覽器中的顯示效果如圖4-34所示。(1) 設(shè)置整個(gè)網(wǎng)頁(yè)的背景圖像為“haituobg.jpg”，要求背景圖像不平鋪。(2) 插入圖像“haituo.jpg”，設(shè)置替換文本為“海坨戴雪”。(3) 插入SWF動(dòng)畫(huà)“haituodaixue.swf”，要求循環(huán)自動(dòng)播放。(4) 插入FLV視頻“haituo.flv”，要求視頻類型設(shè)置為“累進(jìn)式下載視頻”，外觀設(shè)置為“HaloSkin3”。(5) 插入ActiveX控件使其能夠播放WMV視頻文件“daixue.wmv”。4.4.1 教學(xué)案例━━海坨戴雪4.4.2 插入SWF動(dòng)畫(huà)在DreamweaverCS6中，插入SWF動(dòng)畫(huà)的方法是：選擇菜單命令【插入】/【媒體】/【SWF】，或在【插入】/【常用】面板的【媒體】按鈕組中單擊【SWF】按鈕，當(dāng)然也可以在【文件】面板中選中SWF動(dòng)畫(huà)文件直接拖動(dòng)到文檔中。4.4.3 插入FLV視頻在DreamweaverCS6中插入FLV視頻的方法是：選擇菜單命令【插入】/【媒體】/【FLV】，打開(kāi)【插入FLV】對(duì)話框。在【視頻類型】下拉列表中選擇需要的視頻類型，如“累進(jìn)式下載視頻”。4.4.3 插入FLV視頻如果在【插入FLV】對(duì)話框的【視頻類型】下拉列表中選擇【流視頻】，那么【插入FLV】對(duì)話框如下。4.4.4 插入Shockwave影片插入Shockwave影片的方法是，選擇菜單命令【插入】/【媒體】/【Shockwave】，打開(kāi)【選擇文件】對(duì)話框，選擇一個(gè)影片文件。插入文件后，在【屬性】面板的【寬】和【高】文本框中分別輸入影片的寬度和高度。4.4.5 插入Applet插入Shockwave影片的方法是，選擇菜單命令【插入】/【媒體】/【Applet】，打開(kāi)【選擇文件】對(duì)話框，選擇一個(gè)JavaApplet文件。插入文件后，在【屬性】面板的【寬】和【高】文本框中設(shè)置媒體的寬度和高度。4.4.6 插入ActiveX控件向網(wǎng)頁(yè)中插入ActiveX來(lái)播放WMV視頻格式文件的方法是：選擇菜單命令【插入】/【媒體】/【ActiveX】，系統(tǒng)自動(dòng)在文檔中插入一個(gè)ActiveX占位符，確保ActiveX占位符處于選中狀態(tài)，然后在【屬性】面板中設(shè)置【寬】和【高】選項(xiàng)，在【ClassID】下拉列表中添加“CLSID:22D6f312-b0f6-11d0-94ab-0080c74c7e95”，并選中【嵌入】復(fù)選框。由于在ActiveX【屬性】面板的【ClassID】下拉列表中沒(méi)有關(guān)于MediaPlayer的設(shè)置，因此需要手動(dòng)添加。4.4.7 插入插件插入插件的方法是，選擇菜單命令【插入】/【媒體】/【插件】，打開(kāi)【選擇文件】對(duì)話框，為插件選擇內(nèi)容文件，然后在【屬性】面板中設(shè)置各個(gè)插件選項(xiàng)。

超級(jí)鏈接是網(wǎng)站中使用比較頻繁的HTML元素，因?yàn)榫W(wǎng)站的各種頁(yè)面都是由超級(jí)鏈接串接而成，超級(jí)鏈接完成了頁(yè)面之間的跳轉(zhuǎn)。本章將介紹超級(jí)鏈接的基本知識(shí)以及創(chuàng)建超級(jí)鏈接的基本方法。第5章創(chuàng)建超級(jí)鏈接學(xué)習(xí)目標(biāo)了解超級(jí)鏈接的概念和分類。掌握設(shè)置文本和圖像超級(jí)鏈接的方法。掌握設(shè)置錨記和腳本超級(jí)鏈接的方法。掌握測(cè)試和更新超級(jí)鏈接的方法。5.1認(rèn)識(shí)超級(jí)鏈接5.1.1超級(jí)鏈接的概念5.1.2鏈接路徑的類型5.1.3超級(jí)鏈接的分類5.1.1超級(jí)鏈接的概念超級(jí)鏈接習(xí)慣簡(jiǎn)稱為超鏈接，是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)對(duì)象可以是另一個(gè)網(wǎng)頁(yè)，也可以是一個(gè)圖像、一個(gè)電子郵件地址、一個(gè)文件（如Word、Excel、Rar、Zip文件等），甚至是一個(gè)應(yīng)用程序，還可以是相同網(wǎng)頁(yè)上的不同位置。而在一個(gè)網(wǎng)頁(yè)上用作超級(jí)鏈接的載體對(duì)象，可以是一段文本或者是一幅圖像，甚至可以是一幅圖像的某一部分。當(dāng)瀏覽者在瀏覽器中單擊已經(jīng)設(shè)置鏈接的文本或圖像后，鏈接目標(biāo)將顯示在瀏覽器窗口中，并且根據(jù)目標(biāo)的類型來(lái)打開(kāi)或運(yùn)行。超級(jí)鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許用戶同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行交互的元素。各個(gè)網(wǎng)頁(yè)鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。5.1.1超級(jí)鏈接的概念在因特網(wǎng)中，每個(gè)網(wǎng)頁(yè)都有惟一的地址，通常稱為URL（UniformResourceLocator，統(tǒng)一資源定位符）。URL的書(shū)寫(xiě)格式通常為“協(xié)議://主機(jī)名/路徑/文件名”，例如，“/bbs/index.htm”便是網(wǎng)站論壇的URL，而“”省略了路徑和文件名，但服務(wù)器會(huì)將首頁(yè)文件回傳給瀏覽器。由此可以看出，URL主要用來(lái)指明通信協(xié)議和地址，以便取得網(wǎng)絡(luò)上的各種服務(wù)，它包括以下幾個(gè)組成部分。? 通信協(xié)議：包括HTTP、FTP、Telnet和Mailto等幾種形式。? 主機(jī)名：指服務(wù)器在網(wǎng)絡(luò)中的IP地址或域名，在因特網(wǎng)中使用的多是域名。? 路徑和文件名：主機(jī)名與路徑及文件名之間以“/”分隔。5.1.2 鏈接路徑的類型絕對(duì)路徑提供所鏈接文檔的完整的URL，沒(méi)能任何省略部分，其中包括所使用的通信協(xié)議，例如，“/support/dreamweaver/contents.html”。對(duì)于圖像文件，完整的URL可能會(huì)類似于“/support/dreamweaver/images/01.jpg”。在一個(gè)站點(diǎn)鏈接其他站點(diǎn)上的文檔時(shí)，通常使用絕對(duì)路徑。文檔相對(duì)路徑是指省略當(dāng)前文檔和所鏈接的文檔都相同的絕對(duì)路徑部分，而只提供不同的路徑部分，例如，“dreamweaver/contents.html”。對(duì)于大多數(shù)站點(diǎn)的本地鏈接來(lái)說(shuō)，文檔相對(duì)路徑通常是最合適的路徑。站點(diǎn)根目錄相對(duì)路徑描述從站點(diǎn)的根文件夾到文檔的路徑，站點(diǎn)根目錄相對(duì)路徑以“/”開(kāi)始，“/”表示站點(diǎn)根文件夾，例如，“/support/dreamweaver/contents.html”。在處理使用多個(gè)服務(wù)器的大型站點(diǎn)或者在使用承載多個(gè)站點(diǎn)的服務(wù)器時(shí)，可能需要使用這種路徑。如果需要經(jīng)常在站點(diǎn)的不同文件夾之間移動(dòng)HTML文件，那么使用站點(diǎn)根目錄相對(duì)路徑通常也是最佳的方法。5.1.3 超級(jí)鏈接的分類按照不同的標(biāo)準(zhǔn)，超級(jí)鏈接可以有不同的分類。根據(jù)鏈接載體對(duì)象的不同，超級(jí)鏈接通常可分為以下兩種。?

文本超級(jí)鏈接：以文本作為超級(jí)鏈接載體。?

圖像超級(jí)鏈接：以圖像作為超級(jí)鏈接形體。根據(jù)鏈接路徑類型的不同，超級(jí)鏈接通?？煞譃橐韵聝煞N。?

內(nèi)部超級(jí)鏈接：鏈接目標(biāo)位于同一站點(diǎn)內(nèi)的超級(jí)鏈接形式。?

外部超級(jí)鏈接：鏈接目標(biāo)位于站點(diǎn)外的超級(jí)鏈接形式。外部超級(jí)鏈接可以實(shí)現(xiàn)網(wǎng)站之間的跳轉(zhuǎn)，從而將瀏覽范圍擴(kuò)大到整個(gè)網(wǎng)絡(luò)。5.1.3 超級(jí)鏈接的分類根據(jù)鏈接目標(biāo)對(duì)象的不同，超級(jí)鏈接可分為以下幾種類型。?

網(wǎng)頁(yè)超級(jí)鏈接：鏈接到HTML、ASP、PHP等網(wǎng)頁(yè)文檔的鏈接，這是網(wǎng)站最常見(jiàn)的超鏈接形式。?

下載超級(jí)鏈接：鏈接到圖像、影片、音頻、Word文檔、Excel文檔、PowerPoint文檔、PDF文檔等資源文件或RAR、ZIP等壓縮文件的鏈接。?

電子郵件超級(jí)鏈接：鏈接到電子郵件的超鏈接形式，將會(huì)啟動(dòng)郵件客戶端程序，可以寫(xiě)郵件并發(fā)送到鏈接的郵箱中。?

空鏈接：鏈接目標(biāo)形式上為“#”，主要用于在對(duì)象上附加行為等。?

腳本鏈接：鏈接目標(biāo)為一段JavaScript腳本代碼，用于執(zhí)行某項(xiàng)操作。?

錨記超級(jí)鏈接：鏈接目標(biāo)為網(wǎng)頁(yè)文檔中的某一位置，這一位置可以位于當(dāng)前網(wǎng)頁(yè)或其他網(wǎng)頁(yè)中，這個(gè)網(wǎng)頁(yè)可以位于當(dāng)前站點(diǎn)內(nèi)，也可以位于其他站點(diǎn)內(nèi)。5.2文本超級(jí)鏈接

5.2.1教學(xué)案例━━1932年我國(guó)首次參加奧運(yùn)會(huì)5.2.2文本超級(jí)鏈接5.2.3下載超級(jí)鏈接和空鏈接5.2.4電子郵件超級(jí)鏈接5.2.5本超級(jí)鏈接的狀態(tài)5.2.6設(shè)置默認(rèn)的鏈接相對(duì)路徑5.2.1教學(xué)案例━━1932年我國(guó)首次參加奧運(yùn)會(huì)將素材文檔復(fù)制到站點(diǎn)文件夾下，然后根據(jù)要求設(shè)置超級(jí)鏈接，在瀏覽器中的顯示效果如圖5-1所示。(1) 設(shè)置網(wǎng)頁(yè)中文本“奧運(yùn)會(huì)首位中國(guó)運(yùn)動(dòng)員劉長(zhǎng)春”的鏈接目標(biāo)文件為“l(fā)iuchangchun.htm”，打開(kāi)目標(biāo)窗口的方式為在新窗口中打開(kāi)，標(biāo)題文本為“劉長(zhǎng)春”。(2) 設(shè)置網(wǎng)頁(yè)中文本“奧運(yùn)會(huì)首位中國(guó)運(yùn)動(dòng)員劉長(zhǎng)春紀(jì)念雕塑”的鏈接目標(biāo)文件為“diaosu.htm”，打開(kāi)目標(biāo)窗口的方式為在新窗口中打開(kāi)，標(biāo)題文本為“劉長(zhǎng)春紀(jì)念雕塑”。(3) 設(shè)置文本“百度”的鏈接地址為“”，打開(kāi)目標(biāo)窗口的方式為在新窗口中打開(kāi)，標(biāo)題文本為“到百度檢索”。(4) 設(shè)置文本“下載圖像壓縮包”的鏈接目標(biāo)文件為“images/images.rar”，標(biāo)題文本為“下載圖像”。(5) 設(shè)置文本“反饋給我們”的鏈接目標(biāo)為電子郵件地址“us@163.com”，標(biāo)題文本為“反饋意見(jiàn)或建議”。(6) 設(shè)置鏈接顏色和已訪問(wèn)鏈接顏色均為“#0CF”，變換圖像鏈接顏色為“#F00”，且僅在變換圖像時(shí)顯示下劃線。5

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論