《網(wǎng)絡(luò)技術(shù)與應(yīng)用》第6章 網(wǎng)頁制作_第1頁
《網(wǎng)絡(luò)技術(shù)與應(yīng)用》第6章 網(wǎng)頁制作_第2頁
《網(wǎng)絡(luò)技術(shù)與應(yīng)用》第6章 網(wǎng)頁制作_第3頁
《網(wǎng)絡(luò)技術(shù)與應(yīng)用》第6章 網(wǎng)頁制作_第4頁
《網(wǎng)絡(luò)技術(shù)與應(yīng)用》第6章 網(wǎng)頁制作_第5頁
已閱讀5頁，還剩126頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第6章網(wǎng)頁制作網(wǎng)絡(luò)技術(shù)與應(yīng)用2022/12/22

6.1網(wǎng)頁制作概述6.2HTML語言6.3Dreamweaver本章內(nèi)容2022/12/236.1網(wǎng)頁制作概述網(wǎng)頁是能夠被瀏覽器軟件識別的文件，網(wǎng)頁制作就是編寫網(wǎng)頁文件。制作網(wǎng)頁的基本技術(shù)標(biāo)準(zhǔn)是超文本標(biāo)記語言（HTML，HyperTextMarked-upLanguage），它規(guī)定了文檔的邏輯組織格式，能制作出網(wǎng)頁的各種效果。然而只有用瀏覽器打開含有HTML的網(wǎng)頁文件時，才能看到設(shè)計的結(jié)果。2022/12/246.1.1網(wǎng)頁的基本要素1.文字文字是網(wǎng)頁發(fā)布信息所使用的主要形式。文字性網(wǎng)頁一定要注意編排，包括標(biāo)題的字形和字號，內(nèi)容的層次樣式，是否需要變換顏色進(jìn)行點綴等。（1）標(biāo)題一個網(wǎng)頁通常都有一個標(biāo)題，表明本網(wǎng)頁的主要內(nèi)容，對標(biāo)題的設(shè)計是很重要的。（2）字的大小網(wǎng)頁中的文字不能太大或太小。一個優(yōu)秀網(wǎng)頁中的文字，應(yīng)統(tǒng)籌規(guī)劃，大小搭配適當(dāng)，給人以生動活潑之感覺。（3）字型在網(wǎng)頁適當(dāng)?shù)奈恢貌捎貌煌淖煮w字型，也能使網(wǎng)頁產(chǎn)生吸引人的效果。2022/12/252.圖片網(wǎng)頁上的圖片格式一般使用JPG、GIF和PNG，這幾種格式具有跨平臺的特性，可以在不同操作系統(tǒng)支持的瀏覽器上顯示。圖形在網(wǎng)頁中通常有如下應(yīng)用。（1）背景圖片（2）網(wǎng)頁圖片（3）圖片按鈕2022/12/263.超級鏈接鏈接是網(wǎng)頁中一種非常重要的功能，是網(wǎng)頁中最重要、最根本的元素之一。通過鏈接可以從一個網(wǎng)頁轉(zhuǎn)到另一個網(wǎng)頁，也可以從一個網(wǎng)站轉(zhuǎn)到另一個網(wǎng)站，還可以從一個網(wǎng)頁的一部分轉(zhuǎn)到另一部分。鏈接的標(biāo)志有文字和圖片兩種。2022/12/274.交互功能Internet區(qū)別其它媒體的一個重要標(biāo)志就是它的交互功能。通常網(wǎng)頁的交互功能都是利用表單來實現(xiàn)的。表單是網(wǎng)頁中站點服務(wù)器處理的一組數(shù)據(jù)輸入域，當(dāng)訪問者單擊按鈕或圖形來提交表單后，數(shù)據(jù)就會傳送到服務(wù)器上。2022/12/286.1.2網(wǎng)頁制作工具1．超文本標(biāo)識語言（HTML）

HTML是一種專門用于Web頁制作的標(biāo)記語言，用來描述超文本各個部分的內(nèi)容格式，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接點。HTML文檔由文本、格式化代碼和導(dǎo)向其它文檔的超鏈接組成。對于初學(xué)者來說，學(xué)習(xí)并熟練應(yīng)用HTML語言，是掌握網(wǎng)絡(luò)編程技術(shù)必不可少的一個選擇。2022/12/29

2．FrontPageFrontPage是由Microsoft公司推出的新一代Web網(wǎng)頁制作工具。FrontPage使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大量工作。2022/12/2103．DreamweaverDreamweaver是由Macromedia公司推出的一款在網(wǎng)頁制作方面大眾化的軟件，它具有可視化編輯界面，用戶不必編寫復(fù)雜的HTML源代碼就可以生成跨平臺、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人員的需要，同時也容易被業(yè)余網(wǎng)友們所掌握。另外，Dreamweaver的網(wǎng)頁動態(tài)效果與網(wǎng)頁排版功能都比一般的軟件好用，即使是初學(xué)者也能制作出相當(dāng)于專業(yè)水準(zhǔn)的網(wǎng)頁，所以Dreamweaver是網(wǎng)頁設(shè)計者的首選工具。2022/12/2116.1.3網(wǎng)頁美化工具為了使制作的網(wǎng)頁更為美觀，用戶在利用網(wǎng)頁制作工具制作網(wǎng)頁時，還需利用網(wǎng)頁美化工具對網(wǎng)頁進(jìn)行美化。1.PhotoshopPhotoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認(rèn)的PC機(jī)上最好的通用平面美術(shù)設(shè)計軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，Photoshop都是首選的平面制作工具2022/12/2122.FireworksFireworks是由Adobe公司開發(fā)的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。因為Fireworks是第一套專門為制作網(wǎng)頁圖形而設(shè)計的軟件，同時也是專業(yè)的網(wǎng)頁圖形設(shè)計及制作的解決方案。3.FlashFlash是Adobe公司開發(fā)的矢量圖形編輯和動畫創(chuàng)作的專業(yè)軟件，它是一種交互式動畫設(shè)計工具，用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。2022/12/2136.1.4網(wǎng)頁制作的基本步驟1.整體規(guī)劃進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計其結(jié)構(gòu)。網(wǎng)頁制作者在明確網(wǎng)頁制作的目的及要包括的內(nèi)容之后，接下來就應(yīng)該對網(wǎng)站進(jìn)行規(guī)劃，以確保文件內(nèi)容條理清楚、結(jié)構(gòu)合理。主要有以下三種：①層狀結(jié)構(gòu)②線性結(jié)構(gòu)③Web結(jié)構(gòu)2022/12/2142.網(wǎng)頁設(shè)計與制作網(wǎng)頁制作一般包括靜態(tài)網(wǎng)頁制作和動態(tài)網(wǎng)頁程序設(shè)計。其流程一般是收集整理資料，準(zhǔn)備素材，內(nèi)容規(guī)劃，然后就是制作了。通常在進(jìn)行網(wǎng)頁開發(fā)時，首先進(jìn)行靜態(tài)網(wǎng)頁的制作，然后再在其中加入交互表單、動態(tài)腳本程序等。2022/12/2153.測試網(wǎng)頁當(dāng)網(wǎng)頁設(shè)計人員制作完所有網(wǎng)站頁面之后，需要對所設(shè)計的網(wǎng)頁進(jìn)行審查和測試，測試內(nèi)容包括功能性測試和完整性測試兩個方面。4.網(wǎng)頁上傳發(fā)布網(wǎng)頁設(shè)計好，必須把它發(fā)布到互連網(wǎng)上，否則網(wǎng)站形象仍然不能展現(xiàn)出去。發(fā)布的服務(wù)器可以是遠(yuǎn)程服務(wù)器，也可以是本地服務(wù)器。2022/12/2166.2HTML語言用HTML語言編寫的超文本文件稱為HTML文件。HTML文件的擴(kuò)展名為.htm或.html?？梢允褂萌魏挝谋揪庉嬈鳎ㄈ鏦indows的記事本、寫字板等）來編輯，然后保存為.htm或.html文件，也可使用專門的HTML代碼編輯工具軟件（如HomeSite、WebEditPro等）來編輯。2022/12/2176.2.1基本結(jié)構(gòu)HTML語言是通過利用各種標(biāo)記來標(biāo)識文檔的結(jié)構(gòu)和超鏈接的。標(biāo)記被封裝在尖括號內(nèi)，不區(qū)分字母的大小寫。HTML標(biāo)記一般成對使用，分別被稱為頭標(biāo)記和尾標(biāo)記，如<html>….</html>，只有少數(shù)標(biāo)記單獨使用，如<br>、<hr>等。2022/12/2181.基本結(jié)構(gòu)下面先來看一個例子?！纠?.1】一個簡單的HTML示例。打開記事本編輯器，輸入以下代碼。<html><head><title>一個簡單的HTML示例</title></head><bodybgcolor="rgb(255,255,150)"text="rgb(200,0,0)"><h2>歡迎光臨我的網(wǎng)頁</h2><hrcolor="blue">

第一次做網(wǎng)頁，我做的還不錯吧！</body></html>2022/12/219②將文件以test6-1.htm為名字保存起來，關(guān)閉記事本程序。③右鍵單擊文件test6-1.htm的圖標(biāo)，選擇“打開方式”→“InternetExplore”，即可看到網(wǎng)頁瀏覽效果。2022/12/220可以看出，HTML文件由文件頭部和文件主體兩部分組成，分別由不同的標(biāo)記標(biāo)識。①<html>和</html>：文件標(biāo)記，把全部html代碼括起來。②<head>和</head>：頭部標(biāo)記，把文件頭部括起來，包括標(biāo)題等信息。③<title>和</title>：網(wǎng)頁標(biāo)題標(biāo)記，此對標(biāo)記要放在<head>和</head>中間，其中的信息出現(xiàn)在網(wǎng)頁標(biāo)題欄中。④<body>和</body>：文件主體標(biāo)記，出現(xiàn)在這一對標(biāo)記之間的信息為網(wǎng)頁文件的正文部分。2022/12/2212．語法規(guī)則①HTML文件一行可寫多個標(biāo)記，一個標(biāo)記也可以分多行書寫；②標(biāo)記字母可以用大寫，可以用小寫，也可以大小寫混用；③標(biāo)記中的符號，如尖括號及其中的字母，必須用半角字符，即英文標(biāo)點，否則瀏覽器不做解釋，標(biāo)記效果無效；④寫在HTML文件中的換行、回車符和連續(xù)的空格在顯示效果中是無效的，要想換行、分段或加入多個空格必須添加相應(yīng)的標(biāo)記；2022/12/222⑤有些標(biāo)記要加上屬性參數(shù)，如文件主體標(biāo)記<bodybgcolor="rgb(255,255,150)"text="rgb(200,0,0)">。屬性名、“=”和屬性值三者合起來構(gòu)成一個完整的屬性引用，一個標(biāo)記可以有多個屬性，各個屬性之間用空格分開，屬性之間無先后順序之分。2022/12/2236.2.2文件主體頁面的全部可見信息都放在<body>和</body>之間，所以整體控制屬性也位于<body>標(biāo)記中。常用的屬性有：background="…"，定義構(gòu)成網(wǎng)頁背景的圖片文件名，一般是.bmp文件、.jpg文件或.gif文件等。bgcolor="…"，定義網(wǎng)頁背景顏色。顏色的值可以是red、green、blue等具體的英文單詞；也可以是6位十六進(jìn)制數(shù)，如#ff0000表示紅色，#00ff00表示綠色等；還可以是三色函數(shù)rgb（x，y，z），其中，x、y、z分別為0～255之間的整數(shù)，如rgb（0，255，0）表示綠色。2022/12/224text="…"，定義網(wǎng)頁文本顏色。link="…"，定義未被訪問的鏈接源的顏色。alink="…"，定義被激活的鏈接源的顏色。vlink="…"，定義被訪問過的鏈接源的顏色。topmargin="m"，定義信息內(nèi)容的頂邊距。leftmargin="n"，定義信息內(nèi)容的左邊距。2022/12/2256.2.3文字控制用到的標(biāo)記有：（1）文本格式控制標(biāo)記<font>…</font><font>標(biāo)記必須使用屬性參數(shù)，才能對文字進(jìn)行控制。face="…"，定義文字的字體。字體名必須是計算機(jī)上安裝的字體。size="…"，定義字號大小，字號為1～7，默認(rèn)值為3，數(shù)越大，文字越大。color="…"，定義文字的顏色。2022/12/226（2）標(biāo)題樣式標(biāo)記<hn>…</hn>這里n的值取1～6，是6種不同等級的標(biāo)題標(biāo)記，<h1>字號最大，<h6>字號最小。（3）分段標(biāo)記<p>…</p><p>…</p>之間的內(nèi)容為一段，<p>標(biāo)記也有自己的屬性align，其值可以取left、right或center，分別標(biāo)識本段中的文本左對齊、右對齊和居中對齊。<p>標(biāo)記也可以做單標(biāo)記使用，標(biāo)識文本從此處開始新的一段，直到下一個<p>標(biāo)記為止。另外，<center>…</center>標(biāo)記對也可以讓文本居中顯示。它一般應(yīng)用于某一行內(nèi)容的修飾。2022/12/227（4）換行標(biāo)記<br>如果只是為了強(qiáng)行換行而不分段，可以在文本的后面加上單標(biāo)記<br>。（5）字形標(biāo)記<b>、<i>和<u><b>…</b>：粗體標(biāo)記。<i>…</i>：斜體標(biāo)記。<u>…</u>：下劃線標(biāo)記。（6）上標(biāo)、下標(biāo)標(biāo)記<sub>和<sup><sub>…</sub>：下標(biāo)文本標(biāo)記。<sup>…</sup>：上標(biāo)文本標(biāo)記。（7）注釋標(biāo)記在HTML文檔中，有些內(nèi)容不需要在瀏覽器中顯示，只起到說明或注釋的作用，一般把它們放在注釋標(biāo)記對<!--…-->中，如，<!--以下程序具有XX功能-->。2022/12/228（8）水平線標(biāo)記<hr>文本間加入水平線有時能起到點綴的作用，在網(wǎng)頁上插入水平線的標(biāo)記是單標(biāo)記<hr>，<hr>標(biāo)記有如下屬性：color="…"，定義水平線的顏色。size="n"，定義水平線的粗細(xì)，n越大，線就越寬。width="k"，定義水平線的長度，可以是絕對長度，也可以是相對長度，即線長占窗口寬度的百分比，如<hrwidth=100>或<hrwidth=50%>。2022/12/2296.2.4圖片在網(wǎng)頁上插入圖片的標(biāo)記是單標(biāo)記<img>，它有以下屬性：src=“…”，定義圖片文件的位置或url地址，一般采用相對路徑。alt="…"，定義在圖片未完全下載時，圖片位置上顯示的文字說明信息。瀏覽圖片時，當(dāng)把鼠標(biāo)指針移動到圖片上時，也會有相應(yīng)的文字出現(xiàn)。align="…"，確定圖片的對齊方式——left或right，即將圖片左對齊或右對齊。border=“k”，為圖片加上邊框，k定義邊框的粗細(xì)。width="m"，圖片顯示的寬度。height="n"，圖片顯示的高度。通過width和height這兩個屬性，可以確定圖片的大小，如果沒有設(shè)置，圖片按原始大小顯示。2022/12/230【例6.3】圖片插入示例。<html><head><title>圖片插入示例</title></head><body><h1>校園風(fēng)景</h1><img

src="xiaoyuan01.jpg"border="2"align="left"alt="校園一隅"><img

src="xiaoyuan02.jpg"border="2"align="right"></body></html>2022/12/2316.2.5超級鏈接一個超鏈接是由兩部分組成的：一是鏈接源，另一個是鏈接目標(biāo)。鏈接源可以是文本，也可以是圖像；鏈接目標(biāo)可以是一個完整的網(wǎng)址，可以是一個網(wǎng)頁文件，也可以是文檔內(nèi)部定義的錨點。1．超鏈接標(biāo)記超鏈接標(biāo)記是<a>…</a>，應(yīng)用格式為：<ahref="鏈接目標(biāo)"target="目標(biāo)窗口">鏈接源</a>2022/12/232（1）href屬性：指明要鏈接的目標(biāo)，其值可以是文本、圖像、聲音、視頻，也可以是文件或url，甚至是電子郵件程序等。如：<ahref="http://">濟(jì)南大學(xué)</a>：鏈接到指定的站點的默認(rèn)文檔（首頁）。<ahref="http:///abc.htm">濟(jì)南大學(xué)</a>：鏈接到指定的站點的指定文檔。<ahref="a1/abc.htm">…</a>：鏈接到當(dāng)前文檔所在文件夾中的子文件夾a1中的指定文檔。<ahref=“mailto：xxx@”>…</a>：啟動電子郵件程序向指定郵箱發(fā)送郵件。<ahref="鏈接目標(biāo)"><img

src="圖片文件"></a>2022/12/233（2）name屬性：定義名為label的書簽。應(yīng)用格式為：

<aname="label">…</a>如果要鏈接到當(dāng)前文檔中名為label的書簽位置，則應(yīng)用格式為：<ahref="#label">…</a>（3）target屬性：定義鏈接目標(biāo)的打開窗口，如果缺省target屬性，鏈接目標(biāo)將在鏈接源窗口中打開。應(yīng)用格式為：target="目標(biāo)窗口"“目標(biāo)窗口”的值可以是一個指定的窗口window-name，也可以是本窗口（_self）、父窗口（_parent）、新窗口（_blank）及整個瀏覽器窗口（_top）。2022/12/2342．Base標(biāo)記如果想讓整個頁面中的所有鏈接標(biāo)識都具有固定的target屬性，如target=_blank，而在每一個<a>標(biāo)記中都加上target=_blank又太麻煩，這時可以在<head></head>標(biāo)記對之間加上標(biāo)記<basetarget=_blank>。但是如果有某一鏈接需要在當(dāng)前窗口打開，那么只要將該鏈接單獨加上target=_self屬性即可。2022/12/2356.2.6滾動字幕滾動字幕，也稱為滾動看板、活動字幕?，F(xiàn)在的網(wǎng)站中也越來越多地使用滾動字幕來加強(qiáng)網(wǎng)頁的互動性。滾動字幕的標(biāo)記為<marquee>…</marquee>，主要屬性有：（1）direction：用于設(shè)定活動字幕的滾動方向是向左（left）、向右（rignt）、向上（up）、向下（down）。（2）behavior：用于設(shè)定滾動的方式，主要由三種方式：behavior="scroll"，表示由一端滾動到另一端；behavior="slide"，表示由一端快速滑動到另一端，且不再重復(fù)；behavior="alternate"，表示在兩端之間來回滾動。2022/12/236（3）bgcolor：用于設(shè)定活動字幕的背景顏色。（4）scrollamount：用于設(shè)定活動字幕的滾動速度。（5）height：用于設(shè)定滾動字幕的高度，width：則設(shè)定滾動字幕的寬度。（6）loop：用于設(shè)定滾動的次數(shù)，當(dāng)loop=-1表示一直滾動下去，直到頁面更新。（7）id：用于設(shè)定marquee標(biāo)記的標(biāo)識。2022/12/237由于<marquee>標(biāo)記只能作用于一段文本，因此對于多行活動字幕，分行時只能用<br>標(biāo)記，不能用<p>標(biāo)記。<marquee>標(biāo)記支持兩個常用的事件：onmouseover和onmouseout，分別表示鼠標(biāo)指針指向活動字幕和指針離開活動字幕。如：

<marqueeid="tonggao"onmouseover="tonggao.stop()"onmouseout="tonggao.start()">

表示當(dāng)鼠標(biāo)經(jīng)過以上區(qū)域的時候滾動停止，當(dāng)鼠標(biāo)移開的時候又繼續(xù)滾動。其中stop()和start()是marquee標(biāo)記對象的兩個方法。有些網(wǎng)頁制作工具不支持滾動字幕，可以打開制作好的網(wǎng)頁代碼直接加入marquee標(biāo)記并加以設(shè)置即可。2022/12/238【例6.5】<html><head><title>滾動字幕</title></head><body><marqueeid="tonggao"onmouseover="tonggao.stop()"onmouseout="tonggao.start()"scrollAmount="2"scrollDelay="80"direction="up"height="160"><ahref="#">好消息：要漲工資了</a><br><ahref="#">壞消息：物價也漲了</a><br><ahref="01.htm">奧運圣火登上了珠峰<br></a><ahref="02.htm">中國乒乓球隊再次獲得團(tuán)體冠軍</a></marquee></body></html>2022/12/2396.2.7聲音和視頻HTML除了可以插入圖形之外，還可以播放音樂和視頻等。用瀏覽器可以播放的音樂格式有：Midi、Wav和Mp3等格式。（1）點播音樂將音樂做成一個鏈接，只需用鼠標(biāo)在上面單擊，就可以聽到動人的音樂了，這樣做的方法很簡單，格式如下：<a

href="音樂文件名">歌曲名</a>例如，播放一首mp3格式歌曲：<a

href="Future.mp3">我的未來不是夢</a>2022/12/240（2）自動載入音樂前面是借助鏈接來實現(xiàn)網(wǎng)上播放音樂這一功能的，還可以讓音樂自動載入，也可以在頁面上出現(xiàn)控制面板或當(dāng)背景音樂來使用?；菊Z法格式如下：<embedsrc="音樂文件名">主要屬性包括：

src="filename"，定義要載入的音樂文件名。

autostart="true/false"，定義是否要音樂文件傳送完就自動播放。true是自動播放，false是不自動播放，系統(tǒng)默認(rèn)為true。2022/12/241

loop="n/true/false"，定義播放重復(fù)次數(shù)。如：loop="6"表示重復(fù)6次，loop="-1"表示播放到離開網(wǎng)頁為止，true表示無限次播放，false播放一次即停止。

startime="分:秒"，定義樂曲的開始播放時間。例如，網(wǎng)頁打開20秒后播放要設(shè)為startime="00:20"。

volume="n"，n取0-100之間的值，定義音量的大小。如果沒有設(shè)置的話，就使用系統(tǒng)的音量。

width、height，定義控制面板的大小。

hidden="true/false"，隱藏或顯示控制面板。

controls="console/smallconsole"，設(shè)置控制面板的外觀。2022/12/242【例6.6】播放音樂時出現(xiàn)控制面板。<html><head><title>播放音樂</title></head><body><embedsrc="Molihua.mp3"loop="true"width="145"height="60"><p>打開網(wǎng)頁聽音樂，可以控制開與關(guān)，還可以調(diào)節(jié)音量</p></body></html>2022/12/243<embed>標(biāo)記也適用于視頻播放。例如：<embedsrc="WelcometoBeijing.avi"width="245"height="160">（3）IE中的背景音樂另外，還有一種插入背景音樂的格式，不過只有在IE瀏覽器中才能有效果。格式為：<bgsound

src="音樂文件名"loop="#">#=循環(huán)數(shù)例如：<bgsound

src="02.mp3"loop="3">2022/12/2446.2.8表格表格是規(guī)劃頁面設(shè)計的得力工具，它可以使得文本和圖片等元素和諧地混合在一起。表格的標(biāo)記是：<table>…</table>，主要屬性包括：

border="k"，定義表格框線寬度。

width="m"，定義表格寬度。

height="n"，定義表格高度。bgcolor=“…”，定義表格背景顏色。表格標(biāo)題的標(biāo)記是<caption>…</caption>，標(biāo)題的位置可由align屬性來設(shè)置，其值可取top或bottom，位置分別表示表格上方和表格下方。2022/12/245一個表由<table>開始，</table>結(jié)束，表的內(nèi)容由<tr>、<th>或<td>定義。<tr>定義表格的行，有多少行就有多少對<tr>；<th>說明表的列數(shù)和相應(yīng)欄目的名稱，稱為表頭，第一行有多少欄就有多少對<th>；<td>填充由<tr>和<th>組成的表格，即單元格。2022/12/246行標(biāo)記<tr>…</tr>的屬性包括：

align="…"，定義本行中內(nèi)容的水平對齊方式，可取值為left、right、center。

valign="…"，定義本行中內(nèi)容的垂直對齊方式，可取值為top、middle、bottom。

width和height，定義行的寬度和高度。

bgcolor="…"，定義本行的背景顏色。2022/12/247單元格標(biāo)記<td>…</td>的屬性包括：

align="…"，定義單元格中內(nèi)容水平對齊方式，可取值為left、right、center。

valign="…"，定義單元格內(nèi)容垂直對齊方式，可取值為top、middle、bottom。

rowspan="…"，定義該單元格跨過的行數(shù)。

colspan="…"，定義該單元格跨過的列數(shù)。

width和height，定義單元格的寬度和高度。

bgcolor="…"，定義本單元格的背景顏色。2022/12/248【例6.7】表格應(yīng)用示例。<html><head><title>跨行跨列表格應(yīng)用</title></head><body><tableborder="1"><caption><b>人事工資表</b><caption><tr><th

rowspan="2">姓名</th><th

colspan="3">應(yīng)發(fā)工資</th></tr><tralign="center"><td>基本工資</td><td>獎金</td><td>扣款</td></tr><tralign="center"><td>張三豐</td><td>1200</td><td>2000</td><td>500</td></tr></table></body></html>2022/12/249網(wǎng)頁效果為：2022/12/2506.2.9特殊字符標(biāo)記由于在HTML中，類似“>”、“<”這樣的符號，以及“<font>”之類的字符被賦予了特殊的含義，當(dāng)文檔中真的包含這些字符的時候，就應(yīng)該使用特殊字符標(biāo)記，格式如下：

&字符串；特殊字符標(biāo)記以“&”開始，以“；”結(jié)束，中間的字符串不能有空格。2022/12/2516.2.10表單表單標(biāo)記是制作交互式Web頁面的基礎(chǔ)。例如，可以通過按鈕、選擇框、列表和文本編輯框等多種控制標(biāo)記，實現(xiàn)數(shù)據(jù)的交互操作。動態(tài)網(wǎng)頁制作技術(shù)經(jīng)常利用表單技術(shù)進(jìn)行頁面和數(shù)據(jù)庫之間的數(shù)據(jù)傳遞。2022/12/252（1）表單標(biāo)記<form>…</form><form>標(biāo)記有action、method和target等屬性。

action=“…”，說明服務(wù)器端數(shù)據(jù)處理程序的網(wǎng)絡(luò)路徑和程序名，如<formaction=“register.asp”>。程序“register.asp”的編制方法在以后的章節(jié)中介紹。

method=“…”，用來定義處理程序從表單中獲得信息的方式，可取值為get或post，默認(rèn)為post。target="…"，用來指定處理程序的目標(biāo)窗口。2022/12/253（2）<input>標(biāo)記表單中包含的好多控制部件是用單標(biāo)記<input>定義的。<input>標(biāo)記必須放在<form>標(biāo)記對之間，它具有豐富的屬性參數(shù)，代表不同的輸入或控制控件。

type=“…”，表示控制部件的類型，取值及其含義見教材的表6-2。

name="…"，說明該部件的名稱，類似于程序中的變量。

size="…"，說明該部件的大小。

value="…"，說明該部件的初始值，即輸入?yún)^(qū)域的默認(rèn)值。它還能保存用戶的輸入和選擇。服務(wù)器就是通過調(diào)用輸入?yún)^(qū)域的value屬性值來獲得數(shù)據(jù)的。2022/12/254①單行文本框單行文本框可以接收用戶輸入的文本數(shù)據(jù)，不能包含換行符。形式如下：

<inputtype="text"name="name"value=“string"size=“n"maxlength=“m"readonly="false|true">其中，name是控件的名稱，value是文本框的初值，size表示文本框的寬度，maxlength表示文本框最多能輸入多少個字符，readonly表示控件是否只讀。2022/12/255②密碼框<input

type="password"

name="name"value="…"size=""maxlength="">密碼框的各個屬性和文本框相同，不同的地方就是密碼框中顯示的符號都用“*”代替，從而起到保密的作用。2022/12/256③單選按鈕<inputtype="radio"name="…"value="…">單選按鈕是指從多個選項中選擇其中的一個的控件。它的name屬性為控件名，value是指選中該項時的值，當(dāng)語句中有checked屬性時，表示該項是默認(rèn)選項。要注意的是：單選按鈕一般是以一組的形式存在，在這一組當(dāng)中，控件名，即name屬性的值，應(yīng)該相同；只能有一個是被選中狀態(tài)；各個控件的value屬性不要相同。2022/12/257④復(fù)選框<inputtype="checkbox"name="…"value="…">復(fù)選框也是表單上可供用戶選擇輸入的控件，它有選中和不選中兩種狀態(tài)，選中時在控件上有“√”符號顯示。復(fù)選框的name屬性是控件名稱，一組復(fù)選框的name屬性的值一般也是相同的。當(dāng)標(biāo)記中有checked屬性時，表示該項是選中狀態(tài)。2022/12/258⑤按鈕控件<inputtype="button"name="…"value="…"onclick=function()>按鈕控件常用來實現(xiàn)一些客戶端的數(shù)據(jù)處理工作。它的value屬性是指按鈕上面的文字。按鈕控件一般是通過onclick屬性響應(yīng)鼠標(biāo)單擊事件，可以運行一個javascript函數(shù)，也可以執(zhí)行一條命令，等等。2022/12/259⑥提交按鈕<inputtype="submit"name="…"value="…">提交按鈕用來將表單的輸入（或選擇）內(nèi)容發(fā)送到Web服務(wù)器中去。發(fā)送的方式及在服務(wù)器端對數(shù)據(jù)的處理方式由表單標(biāo)記的method屬性和action屬性指定。2022/12/260⑦重設(shè)按鈕<inputtype="reset"name="…"value="…">重設(shè)按鈕的作用是將表單中的所有控件恢復(fù)為默認(rèn)值，其屬性的值與提交按鈕相同。⑧提交圖片提交圖片的作用同提交按紐，只是用一個圖片來替代按紐。<inputtype="image"src="圖片文件名"name="控件名"value="…">2022/12/261（3）<textarea>…</textarea>標(biāo)記<textarea>標(biāo)記對必須位于<form>標(biāo)記對之間，用來創(chuàng)建一個多行文本框。用法格式如下：<textareaname="…"rows="n"cols="m">初值文本</textarea>該控件具有name、cols和rows屬性，cols和rows分別用來設(shè)置文本框的列數(shù)和行數(shù)，列數(shù)以字符數(shù)為單位。首尾標(biāo)記之間的文本是該控件的初值，也可以沒有。2022/12/262（4）<select>、<option>標(biāo)記<select>標(biāo)記對用來創(chuàng)建下拉列表框或可復(fù)選的列表框，它必須放在<form>標(biāo)記對之間。用法格式如下：<selectname="…"multiplesize="n">…</select><select>標(biāo)記具有name、multiple和size等屬性。

name定義列表框的輸入域名。multiple不用賦值，可直接使用。加入multiple屬性，顯示一個列表框，并可進(jìn)行多項選擇；不加multiple屬性，顯示一個下拉列表框，只能選擇一項。size屬性用來設(shè)置列表框的高度，默認(rèn)值為1。2022/12/263<option>標(biāo)記對用來指定列表框中的一個選項，它必須放在<select>標(biāo)記對之間。用法格式如下：<optionvalue="string"selected>選項文本</option>selected屬性用來指定默認(rèn)的選項，value屬性用來指定該選項的取值。2022/12/2646.3Dreamweaver要制作一個漂亮、直觀的Web網(wǎng)頁，除了要了解HTML語言知識外，一般來說，還需要掌握一種Web網(wǎng)頁可視化制作軟件，如DreamWeawer、FrontPage等，這樣可以提高程序設(shè)計的效率，縮短軟件研發(fā)周期。Dreamweaver是Macromedia公司出品的網(wǎng)頁制作工具軟件，用戶可以在頁面上直接添加和編輯網(wǎng)頁元素，還支持動態(tài)網(wǎng)頁腳本編輯技術(shù)，可以方便高效地制作出漂亮的Web頁面。2022/12/2656.3.1

DreamWeaverMX2004概述1．DreamweaverMX2004的特點DreamweaverMX2004包含有一個嶄新的、簡潔高效的界面，且產(chǎn)品性能也得到了改進(jìn)。此外，該產(chǎn)品還包含了眾多新增的功能，這些新增功能改善了軟件的易用性，無論處于設(shè)計環(huán)境還是編碼環(huán)境都可以方便地生成頁面。（1）簡潔高效的設(shè)計和開發(fā)界面（2）新式的頁面布局和設(shè)計環(huán)境（3）強(qiáng)大和開放的編碼環(huán)境2022/12/2662．選擇工作區(qū)布局首次啟動Dreamweaver時，會出現(xiàn)一個對話框，可以從中選擇一種工作區(qū)布局，如圖所示，并可以使用菜單“編輯”下的“首選參數(shù)”對話框切換到一種不同的工作區(qū)?！霸O(shè)計者”工作區(qū)是一個使用MDI（多文檔界面）的集成工作區(qū)，其中全部文檔窗口和面板被集成在一個更大的應(yīng)用程序窗口中，并將面板組?？吭谟覀?cè)。建議大家使用此布局?！熬幋a者”工作區(qū)是同樣的集成工作區(qū)，但是將面板組停靠在左側(cè)，而且文檔窗口在默認(rèn)情況下顯示“代碼”視圖。建議手工編碼人員使用這種布局。在這兩種布局的任何一種布局中，都可以在工作區(qū)的任何一側(cè)?？棵姘褰M。2022/12/267插入工具欄文檔窗口標(biāo)簽檢查器屬性窗口面板組文件面板3.DreamWeaver窗口概述2022/12/2684.菜單Dreamweaver菜單包括文件，編輯，查看，插入，修改，文本，命令，站點，窗口，幫助。文件：包括對文件的各種操作。編輯：包含了對文件的復(fù)制，粘貼，查找與替換等命令。查看：使用查看菜單可以查看文檔的相關(guān)內(nèi)容。插入：用于將對象插入文檔中。修改：可以使用修改菜單更改選定頁面元素的屬性。文本：可以設(shè)置文本的格式，如段落格式，字體等。命令：提供各種命令的訪問。站點：提供用于管理站點以及上傳和下載文件的菜單項。窗口：提供對Dreamweaver中的所有面板，檢查器和窗口的訪問。幫助：提供了對Dreamweaver文檔的訪問。2022/12/2696.3.2建網(wǎng)頁前的準(zhǔn)備1．“首選參數(shù)”的設(shè)置選擇“編輯”菜單中的“首選參數(shù)”選項，出現(xiàn)如圖6-16所示對話框。在“常規(guī)”類別中，我們做以下設(shè)置：①允許多個連續(xù)的空格②使用<strong>和<em>代替<b>和<i>③使用CSS而不是HTML標(biāo)簽2022/12/2702．建立基本站點我們做網(wǎng)頁時，一般是先在本地磁盤上創(chuàng)建并編輯網(wǎng)頁，調(diào)試好后，再把網(wǎng)頁復(fù)制到Web服務(wù)器上發(fā)布。相應(yīng)的，在Dreamweaver中，站點管理也通常包含兩部分：本地計算機(jī)中某個文件夾（本地站點）和遠(yuǎn)程Web服務(wù)器上的一個位置（遠(yuǎn)程站點）。若要在Dreamweaver中本地定義站點，執(zhí)行以下操作：2022/12/271①先確定存放網(wǎng)頁文件的文件夾，然后選擇“站點”菜單下的“管理站點”選項，彈出“管理站點”對話框。在“管理站點”對話框中，單擊“新建”按鈕，然后從彈出式菜單中選擇“站點”選項卡，彈出“站點定義”對話框。②單擊“基本”選項卡，系統(tǒng)要求為站點輸入一個名稱，以便在Dreamweaver中標(biāo)識該站點，該名稱必須是任何所需的英文名稱。③單擊“下一步”按鈕，顯示詢問是否要使用服務(wù)器技術(shù)。選擇“否”選項，表示目前該站點是一個靜態(tài)站點，不建動態(tài)網(wǎng)頁。2022/12/272④單擊“下一步”按鈕，系統(tǒng)詢問要如何使用文件，這里選擇“編輯我的計算機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）”的選項。⑤在“您將把文件存儲在計算機(jī)上的什么位置？”文本框中輸入本地磁盤上存放網(wǎng)頁的文件夾地址，或者文本框旁邊的文件夾圖標(biāo)，在出現(xiàn)的對話框中選擇需要的文件夾。⑥單擊“下一步”按鈕，系統(tǒng)詢問如何連接到遠(yuǎn)程服務(wù)器。從下拉列表中選擇“無”，。⑦單擊“下一步”按鈕，系統(tǒng)顯示設(shè)置概要，單擊“完成”按鈕完成設(shè)置，系統(tǒng)隨即出現(xiàn)“管理站點”對話框，顯示新站點。最后單擊“完成”按鈕，系統(tǒng)關(guān)閉“管理站點”對話框。2022/12/273此時“文件”面板中顯示所設(shè)站點的本地根文件夾，如圖6-22所示?！拔募泵姘逯械奈募斜韺⒊洚?dāng)文件管理器，允許復(fù)制、粘貼、刪除、移動和打開文件，就像在計算機(jī)桌面上操作一樣。在定義的本地站點根文件夾中完成了網(wǎng)頁的創(chuàng)建和編輯后，下一步可選擇在服務(wù)器上定義遠(yuǎn)程文件夾并發(fā)布網(wǎng)頁。2022/12/2746.3.3頁面制作1．新建并保存頁面在Dreamveaver中選擇“文件→新建→常規(guī)→基本頁→HTML”，這樣就建好了一個頁面，默認(rèn)的文件名為untitled.htm。如果是主頁，保存時給文件改名為index.htm。注意：在Dreamveaver中，網(wǎng)頁文件名，包括網(wǎng)頁中用到的圖片、音樂文件名和文件夾名，一律要用小寫的英文字母或拼音文字命名，不能用中文，文件名中也不能含有空格。2022/12/2752．頁面設(shè)置在編輯網(wǎng)頁之前，還可以對網(wǎng)頁的一些參數(shù)進(jìn)行設(shè)置，因為這些參數(shù)的值將會影響到整個網(wǎng)頁。按鍵盤上的Ctrl＋J鍵或單擊“屬性”面板上的“頁面屬性”按鈕，彈出“頁面屬性”對話框。（1）“外觀”選擇“外觀”選項，可做如下設(shè)置。“背景顏色”：用來設(shè)置網(wǎng)頁的背景顏色背景圖像：設(shè)置網(wǎng)頁的背景圖像2022/12/276（2）“鏈接”“已訪問鏈接”：被點擊后的超鏈接文字?！版溄宇伾保何幢稽c擊的超鏈接文字的顏色?！盎顒渔溄印保狐c擊超鏈接文字時的顏色。（3）“標(biāo)題/編碼”“標(biāo)題”：在瀏覽器內(nèi)觀看該頁面時，標(biāo)題在左上角的標(biāo)題欄內(nèi)顯示，一般是用來顯示該頁的主題?！熬幋a”：文檔所使用的編碼，一般都選用“簡體中文（GB2312）”一項。文件文件夾與站點文件夾：分別顯示網(wǎng)頁文檔與網(wǎng)站所在的文件夾。2022/12/2773．插入文本在Dreamweaver中插入文字是非常容易的事情，要向網(wǎng)頁中添加文本，可以直接輸入文本，也可以使用“剪貼板”工具，從其它文檔中復(fù)制或移動文本到網(wǎng)頁中。網(wǎng)頁文本在文檔中會自動換行。在網(wǎng)頁上強(qiáng)行換行的辦法是按shift+Enter組合鍵，按Enter鍵則是分段。2022/12/2784．設(shè)置文本格式網(wǎng)頁中的文本輸入后，可以為其設(shè)置新的文本格式。（1）設(shè)置字體和更改樣式使用“屬性”面板或“文本”菜單中的選項，可以設(shè)置或更改所選文本的字體特性?？梢栽O(shè)置字體、樣式（如粗體或斜體）和字號。（2）更改字體大小從“屬性”面板“格式”和“大小”兩個下拉列表框中選擇相關(guān)選項，或從菜單“文本”→“大小”子菜單中選擇字號的值（從1到7），都可以調(diào)整字體的大小。注意：系統(tǒng)默認(rèn)基準(zhǔn)字體值為3，這些數(shù)字指示與基準(zhǔn)字體大小的相對差值。例如，＋4產(chǎn)生的字號等于3＋4，即7。字體之和的最大值為7，如果試圖將它們設(shè)置得更高，它們顯示為7。2022/12/279（3）更改文本顏色若要更改文本顏色，可執(zhí)行下面操作之一：選擇文本，單擊“屬性”面板中的顏色選擇器，從調(diào)色板中選擇一種顏色。執(zhí)行菜單“文本”→“顏色”，出現(xiàn)系統(tǒng)顏色選擇器對話框，選擇一種顏色，然后單擊“確定”按鈕。直接在“屬性”面板域中輸入顏色名稱或十六進(jìn)制數(shù)字。2022/12/280（4）插入日期日期數(shù)據(jù)在網(wǎng)頁的制作中往往是一個重要的元素，Dreamweaver提供了一個非常方便的日期對象。將當(dāng)前日期插入到文檔中，操作步驟如下。①在“插入”工具窗口中，將插入點放在要插入日期的位置，執(zhí)行下列操作之一：選擇菜單“插入”→“日期”。在“插入”工具欄的“常用”類別中，單擊“日期”按鈕。②在彈出的“插入日期”對話框中，選擇星期格式、日期格式和時間格式。③如果希望在每次保存網(wǎng)頁時都更新插入的日期（如對日期、時間有要求的新聞網(wǎng)頁），請選中“儲存時自動更新”復(fù)選框，否則，日期在插入后就變成了純文本不會自動更新。2022/12/281（5）插入特殊字符某些特殊字符在HTML中以名稱或數(shù)字的形式表示，它們被稱為實體。HTML包含版權(quán)符號（©；）、“與”符號（&；）、注冊商標(biāo)符號（®；）等字符的實體名稱。每個實體都有一個名稱（如&mdash；）和一個數(shù)字等效值（如—；）。若要將特殊字符插入到文檔中，在“文檔”窗口中，首先將插入點放在要插入特殊字符的位置，然后執(zhí)行下列操作之一：從菜單“插入”→“HTML”→“特殊字符”子菜單中選擇字符名稱。在“常用”工具欄中的“文本”類別中，單擊“字符”按鈕選擇需要的字符。2022/12/282（6）在字符之間添加空格默認(rèn)情況下，HTML只允許字符之間包含一個空格，若要在文檔中添加多個空格，可以執(zhí)行下列操作之一：在“常用”工具欄中的“文本”類別中，單擊“字符”按鈕，選擇“不換行連續(xù)空格”。選擇菜單“插入”→“HTML”→“特殊字符”→“不換行空格”子菜單。按鍵盤Ctrl＋Shift＋空格鍵。也可以設(shè)置一個在文檔中自動添加連續(xù)空格的參數(shù)選擇：在“首選參數(shù)”的“常規(guī)”類別中選中“允許多個連續(xù)的空格”即可。2022/12/2835．設(shè)置段落格式和文檔結(jié)構(gòu)（1）對齊文本選擇要對齊的文本，或者將插入點定位到文本開頭，單擊“屬性”面板中的對齊選項（“左對齊”、“右對齊”或“居中對齊”，如圖6-28所示），或者執(zhí)行菜單操作“文本”→“對齊”，然后選擇要執(zhí)行的對齊命令。（2）縮進(jìn)文本使用“縮進(jìn)”命令可以縮進(jìn)頁面兩側(cè)的文本?？s進(jìn)文本和取消縮進(jìn)可執(zhí)行以下操作：將插入點放在要縮進(jìn)的段落中，然后單擊”屬性”面板中的“縮進(jìn)”或“凸出”按鈕，或者選擇菜單“文本”→“縮進(jìn)”/“凸出”。2022/12/284（3）使用水平線①插入水平線在“文檔”窗口中，將插入點放在要插入水平線的位置，執(zhí)行下列操作之一：選擇菜單“插入”→“HTML”→“水平線”。在“插入”欄的“HTML”類別中單擊“水平線”按鈕。②修改水平線在“屬性”面板中根據(jù)需要對屬性進(jìn)行修改?！皩捄透摺币韵袼貫閱挝换蛞皂撁娉叽绨俜直鹊男问街付ㄋ骄€的寬度和高度?！皩R”指定水平線的對齊方式（“默認(rèn)”、“左對齊”、“居中對齊”或“右對齊”）。只有當(dāng)水平線的寬度小于瀏覽器窗口的寬度時，該設(shè)置才適用?！瓣幱啊敝付ɡL制水平線時是否帶陰影，取消此選項將使用純色繪制水平線。2022/12/285（4）創(chuàng)建項目列表若要創(chuàng)建新列表，請執(zhí)行以下操作：①在Dreamweaver文檔中，將插入點放在要添加列表的位置，然后執(zhí)行下列操作之一：單擊“屬性”面板中的“項目列表”按鈕或“編號列表”按鈕。執(zhí)行菜單操作“文本”→“列表”，然后選擇所需的列表類型：“不排序（項目）列表”、“排序（編號）列表”或“定義列表”，指定列表項的前導(dǎo)字符出現(xiàn)在文檔窗口中。②輸入一行列表項文本，然后按Enter鍵創(chuàng)建其它列表項。若要結(jié)束列表，按兩次Enter鍵即可。若要使用現(xiàn)有文本創(chuàng)建列表，則選擇一系列段落組成一個列表，單擊“屬性”面板中的“項目列表”或“編號列表”按鈕，或選擇“文本”→“列表”菜單，然后選擇所需的列表類型“項目列表”、“編號列表”或“定義列表”等。2022/12/2866.3.4圖像和多媒體1．插入圖像在將圖像插入到網(wǎng)頁時，Dreamweaver自動在HTML源代碼中生成對該圖像文件的引用。若要插入圖像，請執(zhí)行以下操作：（1）在文檔窗口中，將插入點放置在要顯示圖像的地方，然后執(zhí)行以下操作之一：選擇菜單“插入”→“圖像”。在“插入”欄的“常用”類別中，單擊“圖像”圖標(biāo)。將圖像從“資源”面板（“窗口”→“資源”）拖到“文檔”窗口中的所需位置。（2）在彈出的“選擇圖像源文件”對話框中執(zhí)行下列操作之一（如圖6-31所示）：選擇“文件系統(tǒng)”選項以選擇一個圖形文件。選擇“數(shù)據(jù)源”選項以選擇一個動態(tài)圖像源。（3）選擇要插入的圖像或內(nèi)容源，單擊“確定”按鈕。2022/12/287（4）在“替換文本”和“詳細(xì)說明”文本框中輸入相應(yīng)的數(shù)據(jù)，然后單擊“確定”按鈕，隨即該圖像出現(xiàn)在網(wǎng)頁中?？梢栽凇皩傩浴泵姘澹ā按翱凇薄皩傩浴保┲性O(shè)置該圖像的屬性。也可以選擇菜單“插入”→“圖像對象”→“鼠標(biāo)經(jīng)過圖像”，然后進(jìn)行相關(guān)設(shè)置，即可看到一個動態(tài)圖像效果。2022/12/2882．插入聲音為Web頁添加的聲音可以有多種不同類型的聲音文件和格式，例如.wav、.midi和.mp3。（1）鏈接到音頻文件若要創(chuàng)建指向某一音頻文件的鏈接，執(zhí)行以下操作：①選擇要用作指向音頻文件的鏈接的文本或圖像。②在“屬性”面板中，單擊文件夾圖標(biāo)以瀏覽到音頻文件，或者在“鏈接”文本框中輸入文件的路徑和名稱。2022/12/289（2）嵌入聲音文件嵌入音頻將聲音直接嵌入頁面中，但只有在訪問者具有所選聲音文件的適當(dāng)插件后，聲音才可以播放。若要嵌入音頻文件，請執(zhí)行以下操作：①在“設(shè)計”視圖中，將插入點放置在要嵌入文件的地方，然后執(zhí)行以下操作之一：

在“插入”欄的“常用”類別中，單擊“媒體”按鈕，然后選擇“插件”圖標(biāo)。

選擇菜單“插入”→“媒體”→“插件”。②在“屬性”面板中，單擊文件夾圖標(biāo)瀏覽音頻文件，或者在“鏈接”文本框中輸入文件的路徑和名稱。③通過在相應(yīng)文本框中輸入值，或者通過在“文檔”窗口中調(diào)整插件占位符的大小和輸入寬度及高度，可確定音頻控件在瀏覽器中以多大的尺寸顯示。2022/12/2903．插入視頻可以通過不同方式和使用不同格式將視頻添加到Web頁面。若要在頁面中包含一個可供用戶下載的簡短的視頻剪輯，請執(zhí)行以下操作：①將剪輯放入站點文件夾。這些剪輯通常采用AVI或MPEG文件格式。②鏈接到剪輯，或?qū)⑵淝度氲巾撁嬷?，方法與添加音頻類似。注意：用戶必須下載輔助應(yīng)用程序才能查看常見的流式處理格式，如RealPlayer、QuickTime或WindowsMediaPlayer。2022/12/2914．插入Flash對象（1）插入Flash文本對象Flash文本對象允許創(chuàng)建和插入只包含文本的Flash影片，可以使用自己選擇的設(shè)計器字體和文本創(chuàng)建較小的矢量圖形影片。若要插入Flash文本對象，請執(zhí)行以下操作：①在“文檔”窗口中，將插入點放置在你要插入Flash文本的地方。②要打開“插入Flash文本”對話框，請執(zhí)行以下操作之一：

在“插入”欄的“常用”類別中，選擇“媒體”，然后單擊“Flash文本”圖標(biāo)。

選擇菜單“插入”→“媒體”→“Flash文本”。2022/12/292③在“文本”框中輸入要呈現(xiàn)的文字，根據(jù)需要設(shè)置文字的大小和字體等選項；在“顏色”框中直接輸入十六進(jìn)制的顏色值，或在調(diào)色板中選擇需要的顏色；在“轉(zhuǎn)滾顏色”框中指定文字翻轉(zhuǎn)顏色；在“鏈接”框中輸入或選擇該Flash文本要鏈接的地址；在“背景顏色”框中輸入Flash文本的底色；在“另存為”框中輸入swf文件名。系統(tǒng)要求文件名和路徑名必須為半角符號。④完成“插入Flash文本”對話框設(shè)置，然后單擊“應(yīng)用”或“確定”按鈕，將Flash文本插入文檔窗口中。如果單擊的是“應(yīng)用”按鈕，則對話框保持打開狀態(tài)，還可以在文檔中預(yù)覽文本。2022/12/293（2）插入Flash按鈕對象可以在使用Dreamweaver時在文檔中創(chuàng)建、插入和修改Flash按鈕。若要插入Flash按鈕對象，必須先保存文檔，并將插入點放置在要插入Flash按鈕的位置，然后執(zhí)行以下操作之一：

在“插入”欄的“常用”類別中，選擇“媒體”，然后單擊“Flash按鈕”圖標(biāo)。

選擇菜單“插入”→“媒體”→“Flash按鈕”。完成“插入Flash按鈕”對話框的設(shè)置，然后單擊“應(yīng)用”或“確定”，F(xiàn)lash按鈕就插入到了“文檔”窗口中。2022/12/294（3）插入Flash視頻可以在Dreamweaver中將Flash視頻插入到頁面中。若要插入.swf文件（Flash視頻文件），請執(zhí)行以下操作。①在“文檔”窗口的“設(shè)計”視圖中，將插入點放置在你要插入影片的地方，然后執(zhí)行以下操作之一：

在“插入”欄的“常用”類別中，選擇“媒體”，然后單擊“插入Flash”圖標(biāo)。選擇菜單“插入”→“媒體”→“Flash”。②在顯示的對話框中，選擇一個Flash文件（.swf）。Flash占位符隨即出現(xiàn)在文檔窗口中（與Flash按鈕和文本對象不同）。2022/12/2956.3.5鏈接與導(dǎo)航1．建立超鏈接的應(yīng)用（1）文本、圖像超鏈接“屬性”面板中的文件夾圖標(biāo)、“鏈接”文本框和指向文件圖標(biāo)，可用于創(chuàng)建從圖像、對象或文本到其它文檔或文件的鏈接。若要使用“屬性”面板的文件夾圖標(biāo)或“鏈接”文本框鏈接文檔，請執(zhí)行以下操作：①在“文檔”窗口的“設(shè)計”視圖中選擇文本或圖像。②打開“屬性”面板（“窗口”→“屬性”），然后執(zhí)行下列操作之一：單擊“鏈接”文本框右側(cè)的文件夾圖標(biāo)，以通過瀏覽選擇一個文件。在“鏈接”文本框中輸入文檔的路徑和文件名。③從“目標(biāo)”彈出菜單中，選擇文檔打開的位置。2022/12/296若要使用“指向文件”圖標(biāo)鏈接文檔，請執(zhí)行以下操作：①在文檔窗口的“設(shè)計”視圖中選擇文本或圖像。②拖動“屬性”面板中“鏈接”文本框右側(cè)的“指向文件”圖標(biāo)，然后指向另一個打開的文檔、已打開文檔中的可見錨記或者指向“文件”面板中的一個文檔?！版溄印蔽谋究?qū)⒏?，以顯示該鏈接，最后釋放鼠標(biāo)按鈕。2022/12/297（2）插入圖像地圖注意，這里所說的圖像地圖是指能在一張圖片上實現(xiàn)多個局部區(qū)域指向不同的網(wǎng)頁鏈接。在創(chuàng)建圖像地圖時，先創(chuàng)建一個熱點，然后定義用戶單擊此熱點時所打開的鏈接?？梢栽谝粡垐D片上創(chuàng)建多個熱點。若要創(chuàng)建圖像地圖熱點，請執(zhí)行以下操作：①在頁面“設(shè)計”窗口中，選擇要創(chuàng)建熱點的圖像。②在“屬性”面板中，單擊右下角的展開箭頭，查看所有屬性。③在“地圖名稱”文本框中為該圖像地圖輸入唯一的名稱。2022/12/298④若要定義圖像地圖區(qū)域，請執(zhí)行下列操作之一：選擇圓形工具，并將鼠標(biāo)指針拖至圖像上，創(chuàng)建一個圓形熱點。選擇矩形工具，并將鼠標(biāo)指針拖至圖像上，創(chuàng)建一個矩形熱點。選擇多邊形工具，在各個頂點上單擊一下，定義一個不規(guī)則形狀的熱點。然后單擊箭頭工具封閉此形狀。創(chuàng)建熱點后，出現(xiàn)熱點“屬性”面板。⑤完成熱點“屬性”面板中的有關(guān)內(nèi)容。2022/12/299（3）電子郵件超鏈接單擊電子郵件鏈接時，該鏈接打開一個新的空白郵件窗口（使用的是與用戶瀏覽器相關(guān)聯(lián)的郵件程序）。若要使用“插入電子郵件鏈接”命令創(chuàng)建電子郵件鏈接，請執(zhí)行以下操作：①在文檔窗口的“設(shè)計”視圖中，將插入點放在希望出現(xiàn)電子郵件鏈接的位置，或者選擇要作為電子郵件鏈接出現(xiàn)的文本或圖像。②選擇菜單“插入”→“電子郵件鏈接”，出現(xiàn)“電子郵件鏈接”對話框，在文本框中輸入相應(yīng)內(nèi)容，完成對話框設(shè)置后單擊“確定”按鈕。若要使用“屬性”面板創(chuàng)建電子郵件鏈接，請執(zhí)行以下操作：①在“文檔”窗口的“設(shè)計”視圖中選擇文本或圖像。②在“屬性”面板的“鏈接”文本框中，輸入“mailto:”，后面跟電子郵件地址。在冒號和電子郵件地址之間不能輸入任何空格。2022/12/21002．插入跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單實際上就是一個下拉菜單，其中每一個選項都可以說是一個超級鏈接。當(dāng)用戶從下拉菜單中選擇一個選項時，將被復(fù)位向到指定的URL。若要插入跳轉(zhuǎn)菜單，請執(zhí)行以下操作：①打開一個文檔，然后將插入點放在文檔窗口中。②選擇菜單“插入”→“表單”→“跳轉(zhuǎn)菜單”，出現(xiàn)“插入跳轉(zhuǎn)菜單”對話框，如圖6-38所示。完成對話框設(shè)置，單擊“確定”按鈕，在文檔中就會出現(xiàn)跳轉(zhuǎn)菜單。③在“文本”框中輸入選項的名字，在“選擇時，轉(zhuǎn)到URL”文本框中輸入或者選擇該命令所對應(yīng)的超級鏈接。2022/12/21013．使用導(dǎo)航條一個導(dǎo)航條可以包括一張圖片或一系列圖片，在使用瀏覽器瀏覽頁面時，這些圖片會隨著瀏覽者的鼠標(biāo)指針的移動而互相更替。（1）插入導(dǎo)航條插入導(dǎo)航條時，要命名導(dǎo)航條項目，并選擇要用于它們的圖像。若要創(chuàng)建導(dǎo)航條，請執(zhí)行以下操作。①執(zhí)行下列操作之一：選擇菜單“插入”→“圖像對象”→“導(dǎo)航條”。在“插入”欄的“常用”類別中，單擊“圖像”菜單并選擇“插入導(dǎo)航條”按鈕。出現(xiàn)“插入導(dǎo)航條”對話框。2022/12/2102②進(jìn)行如下設(shè)置：在“項目名稱”對話框中輸入導(dǎo)航條元素的名稱。在“狀態(tài)圖像”文本框中輸入所選擇的圖像的路徑名和文件名，或者單擊“瀏覽”按鈕選擇圖像文件。在“插入導(dǎo)航條”對話框的各選項中，除必須在“狀態(tài)圖像”文本框中輸入之外，其它都是可選的。在“鼠標(biāo)經(jīng)過圖像”文本框中輸入的文件是當(dāng)鼠標(biāo)指針移過狀態(tài)圖像時所顯示的圖像，這一點與插入翻滾圖類似。在“選擇時，前往的URL”文本框中輸入或選擇一個鏈接。③完成對話框設(shè)置，單擊“確定”按鈕。2022/12/2103（2）修改導(dǎo)航條為文檔創(chuàng)建導(dǎo)航條后，可使用“修改導(dǎo)航條”命令向?qū)Ш綏l添加圖像，或從導(dǎo)航條中刪除圖像。若要修改導(dǎo)航條，請執(zhí)行以下操作：①在活動頁面中選擇導(dǎo)航條。②選擇菜單“修改”→“導(dǎo)航條”，出現(xiàn)“修改導(dǎo)航條”對話框。③在“導(dǎo)航條項目”列表中，選擇要編輯的項目，按需要進(jìn)行更改，單擊“確定”按鈕。2022/12/21046.3.6圖層圖層（Layer）是網(wǎng)頁制作的新技術(shù)，是一種HTML頁面元素，可以將它定位在頁面上的任意位置。層可以包含文本、圖像或其它HTML文檔，它給網(wǎng)頁設(shè)計師提供了強(qiáng)大的網(wǎng)頁控制能力，圖層遠(yuǎn)比表格靈活。圖層相當(dāng)于網(wǎng)頁中的一個區(qū)域，一個網(wǎng)頁中可以擁有多個圖層，它的最大好處就是各個圖層可以重迭，還可以控制每個圖層是否可見，也可以決定層與層之間的關(guān)系。2022/12/21051．圖層的創(chuàng)建要創(chuàng)建圖層，請執(zhí)行以下操作：①選擇“插入”→“布局對象”→“層”命令，或者單擊布局對象面板上的圖層按鈕。②鼠標(biāo)變?yōu)橐粋€十字狀，拖動鼠標(biāo)，直接在文檔窗口內(nèi)繪制一個圖層。若要修改圖層屬性，請執(zhí)行以下操作：①打開“屬性”面板，選中要進(jìn)行修改的圖層，單擊“屬性”面板右下角的擴(kuò)展箭頭，顯示出圖層的所有屬性。②對圖層屬性進(jìn)行修改后保存設(shè)置。2022/12/21062．圖層的主要操作層的操作主要包括層的激活、選擇、調(diào)整大小、對齊等。（1）激活層要把對象放入層中，首先要激活層。把鼠標(biāo)光標(biāo)移至層內(nèi)任何地方單擊，即可激活層。請注意，激活層的操作只是在圖層內(nèi)插入內(nèi)容，并不代表選取該層。（2）選擇層在Dreamweaver中，要選擇單獨一個層，可以單擊層邊界或者在層面板中單擊層的名稱。若要選擇多層，執(zhí)行下列操作之一：按住Shift鍵，在兩層或多層內(nèi)部或邊界上單擊鼠標(biāo)。在層面板按住Shift鍵，單擊兩層或多層的名稱。提示：當(dāng)多層被選中時，最后選擇的層的手柄以黑色突出顯示，其它層的手柄以白色突出顯示。2022/12/2107（3）調(diào)整層大小可以單獨調(diào)整一個層的大小，也可以同時調(diào)整多個層的大小使它們具有相同的寬度和高度。需要注意的是，如果在層面板中勾選了PreventOverlaps（防止重迭）復(fù)選框，在調(diào)整某層大小時不能使它與另一層重迭。調(diào)整單獨一個層的大小，既可以選擇層，拖曳它的改變大小手柄，也可以在“屬性”面板中輸入寬度和高度值。同時調(diào)整多層的大小，請執(zhí)行以下操作：①在文檔窗口中選擇兩層或多層。②選擇菜單“修改”→“對齊”→“設(shè)成寬度相同”或“設(shè)成高度相同”命令。③先選的層的寬度和高度被調(diào)整為最后選定那一層（以黑色突出顯示）的寬度和高度。④在“屬性”面板中，在MultipleLayers（多層）選項下輸入寬度和高度，輸入的值被應(yīng)用于所有選定的層。2022/12/2108（4）對齊層當(dāng)頁面上有多層時，可以使用層對齊命令對齊層，要對齊兩到多層，請執(zhí)行以下操作：①選擇要對齊的層。②選擇菜單“修改”→“對齊”，然后選擇對齊選項。2022/12/21093．用時間軸實現(xiàn)動畫在Dreamweaver中，用“時間軸”可以實現(xiàn)動畫效果。通過隨時改變層的位置、尺寸、可視性和重迭次序來創(chuàng)建動畫。選擇“窗口”→“時間軸”，打開“時間軸”面板，“時間軸”面板可以顯示或更改層和圖像的屬性。（1）播放頭：顯示當(dāng)前頁面上的層是時間軸的哪一幀。（2）動畫信道：顯示層與圖像的動畫條。（3）動畫條：顯示每個對象的動畫持續(xù)時間。（4）關(guān)鍵幀：在動畫條中被指定動畫屬性的幀。（5）行為信道：在時間軸上每一幀執(zhí)行指令的顯示。（6）幀頻：每秒鐘播放的幀數(shù)。（7）自動播放：選中后，在瀏覽器中打開該頁面，動畫就自動播放。（8）循環(huán)：選中后在瀏覽器中會無限循環(huán)播放。2022/12/21104.錄制路徑如果需要創(chuàng)建具有復(fù)雜運動路徑的動畫，可以使用Dreamweaver的錄制路徑功能。（1）在文檔中插入一個層，設(shè)置好其中的圖片和層的初始位置。（2）選中圖層，選擇菜單“修改”→“時間軸”→“錄制路徑”，在文檔中拖動層來錄制路徑，在動畫停止的地方釋放鼠標(biāo)左鍵，可以看到，頁面上留下了層的運動軌跡，同時“時間軸”面板上較為合理地創(chuàng)建了一定數(shù)目的關(guān)鍵幀。（3）選中“自動播放”和“循環(huán)”復(fù)選框，保存文件，在瀏覽器中看動畫效果就可以了。2022/12/21116.3.7表格表格是規(guī)劃頁面設(shè)計的得力工具，它可以使得文本和圖片等元素和諧地混合在一起。利用表格規(guī)劃頁面的方法是將頁面分割成各自獨立的小板塊，每個小板塊都可以單獨放置相關(guān)數(shù)據(jù)信息，這樣，整個網(wǎng)頁頁面就能規(guī)劃出豐富多彩的藝術(shù)格局。2022/12/21121．插入表格使用“插入”欄或“插入”菜單來創(chuàng)建一個新表格。若要插入表格，請執(zhí)行以下操作：（1）在“文檔”窗口的“設(shè)計”視圖中，將插入點放在需要表格出現(xiàn)的位置。（2）選擇菜單“插入”→“表格”或在工具欄的“常用”類別中，單擊“表格”按鈕，即會出現(xiàn)“插入表格”對話框。（3）完成對話框設(shè)置，單擊“確定”按鈕，在設(shè)計視圖界面中生成了一個表格。2022/12/21132．設(shè)置表格的屬性表格插入后，可以通過選中表格，然后在屬性面板中設(shè)置表格的屬性。（1）行、列：分別設(shè)置表格的行數(shù)和列數(shù)。（2）寬、高：分別設(shè)置表格的寬度和高度；有“像素”和“百分比”兩個單位，表格的寬度或高度改變之后，里面的行高和列寬會按比例調(diào)整。（3）填充、間距：填充是設(shè)置單元格外內(nèi)部數(shù)據(jù)和單元格邊框之間的距離；間距是設(shè)置單元格與單元格之間的距離。（4）對齊：設(shè)置表格在文檔中的對齊方式，選項有默認(rèn)、居中對齊、左對齊、右對齊，系統(tǒng)默認(rèn)為左對齊。（5）邊框：設(shè)置表格邊框的粗細(xì)，默認(rèn)值為0。2022/12/21143．表格的調(diào)整（1）調(diào)整表格大小可以通過拖動表格的一個選擇柄來調(diào)整表格的大小。當(dāng)選中表格或表格中有插入點時，Dreamweaver將在該表格的頂部或底部顯示表格寬度和表格標(biāo)題菜單。（2）調(diào)整表格列行的大小表格右側(cè)、下側(cè)及右下角的黑色點是調(diào)整表格的高和寬的調(diào)整柄。當(dāng)光標(biāo)移到調(diào)整柄上就可以分別調(diào)整表格的高和寬。移到表格的邊框線上也可以進(jìn)行調(diào)整。2022/12/21154．添加、刪除行和列若要添加單個行或列，請執(zhí)行以下操作：①單擊一個單元格。②執(zhí)行下列操作之一：選擇菜單“修改”→“表格”→“插入行”或“修改”→“表格”→“插入列”，即在插入點的上面出現(xiàn)一行或在插入點的左側(cè)出現(xiàn)一列。單擊列標(biāo)題菜單，然后選擇“左側(cè)插入列”或“右側(cè)插入列”，即在插入點的左側(cè)或右側(cè)出現(xiàn)一列。提示：在表格的最后一個單元格中按鍵盤Tab鍵會自動在表格中另外添加一行。2022/12/2116若要添加多行或多列，請執(zhí)行以下操作：①單擊一個單元格，選擇菜單“修改”→“表格”→“插入行或列”，即出現(xiàn)“插入行或列”對話框。②選擇“行”或“列”，然后完成該對話框設(shè)置，單擊“確定”按鈕，新插入的行或列便出現(xiàn)在表格中。若要刪除某行或列，可以單擊要刪除的行或列中的一個單元格，然后選擇“修改”→“表格”→“刪除行”或“刪除列”；也可以選擇完整的一行或列，然后選擇“編輯”→“清除”或按Delete鍵，整個行或列即從表格中消失。2022/12/21175．拆分、合并單元格拆分、合并單元格的方法也有多種。一種方法可以使用“屬性”面板，或執(zhí)行菜單操作“修改”→“表格”，然后選擇相應(yīng)的拆分、合并單元格命令。另一種方法是使用Dreamweaver中提供的增加和減少單元格所跨行數(shù)或列數(shù)的工具。2022/1

溫馨提示

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

評論

0/150

提交評論