網(wǎng)頁設(shè)計(jì)與制作-全套電子課件完整版ppt整本書電子教案最全教學(xué)教程整套課件

1、網(wǎng)頁設(shè)計(jì)與制作教程網(wǎng)頁設(shè)計(jì)與制作教材配套電子教案2007.61.1網(wǎng)頁概述1.2 網(wǎng)頁制作工具簡介1.3 HTML基礎(chǔ)1.4 實(shí)踐技能訓(xùn)練第1章 網(wǎng)頁基礎(chǔ)知識(shí)1.1.1什么是網(wǎng)頁 Web直譯過來就是“網(wǎng)”，可以理解為通過超級(jí)連接將各種文檔連接起來的一個(gè)大規(guī)模的信息集合。 網(wǎng)頁（Web頁）實(shí)際上就是HTML文件，是一種可以在WWW網(wǎng)上傳輸，并能被瀏覽器認(rèn)識(shí)和翻譯成頁面的文件。 WWW是“World wide web”的縮寫；HTML則是“HyperText Markup Language”的縮寫，意為“超文本標(biāo)記語言”，它是一種規(guī)范，一種標(biāo)準(zhǔn)。超文本就是指頁面可以包含圖片、鏈接、音樂等非文字的元

2、素。 制作網(wǎng)頁所需要的硬件和軟件：硬件：計(jì)算機(jī)主頻最好的P以上，內(nèi)存最好在128MB以上，必須有足夠大的空間來存放網(wǎng)頁素材。軟件：Dreamweaver 8.0是目前制作網(wǎng)頁的最新版本，F(xiàn)rontpage也是一個(gè)不錯(cuò)的產(chǎn)品。處理網(wǎng)頁圖像和文字可以選擇Fireworks，若要制作網(wǎng)頁動(dòng)畫，可以選擇 Flash。 1.1 網(wǎng)頁概述1.1.2 網(wǎng)頁中的基本元素 網(wǎng)頁包括的主要元素有： 文本、圖像、動(dòng)畫、聲音、視頻、表格、表單等。 1.1 網(wǎng)頁概述1.1.2 網(wǎng)頁中的基本元素 1.文本 文本是人類最重要的信息載體和交流的工具，網(wǎng)頁的主體一般以文本為主。在制作網(wǎng)頁時(shí)，可以根據(jù)需要設(shè)置文本的字體、字號(hào)、顏

3、色以及所需要的其他格式。 文本在網(wǎng)頁中的主要功能是顯示信息和超級(jí)鏈接，文本通過文字的具體內(nèi)容與不同的格式來顯示信息的重要內(nèi)容，這是文本的直接功能。此外，文本作為一個(gè)對象，往往又是超級(jí)鏈接的觸發(fā)體，通過文本表達(dá)的鏈接目標(biāo)指向相關(guān)內(nèi)容。2.圖像 圖像在網(wǎng)頁中可以起到提供信息、展示作品、美化網(wǎng)頁以及體現(xiàn)風(fēng)格等效果。圖像可以用作標(biāo)題、網(wǎng)站標(biāo)志、網(wǎng)頁背景、鏈接按紐、導(dǎo)航條、網(wǎng)頁主圖等，網(wǎng)頁中使用圖像的格式主要有：GIF、JPEG、PNG等格式。1.1 網(wǎng)頁概述1.1.2 網(wǎng)頁中的基本元素 圖像GIF圖像。GIF(graphics interchange format)由Compu-Serve公司1987

4、年6月制訂。GIF通常對于卡通、圖像、Logo、以及帶有透明區(qū)域的圖像、動(dòng)化很有作用。GIF文件格式的擴(kuò)展名是“.gif”.JPEG圖像。JPEG（joint photographic experts group 聯(lián)合照片專家組）是一種特別為照片圖像設(shè)計(jì)的圖片壓縮處理格式。JPEG文件采用先進(jìn)的壓縮算法，可以保持較好的圖像保真度和較高的壓縮比。JPEG文件格式的擴(kuò)展名為 “.jpg”. PNG圖像。PNG（portable network graphic）即可移植網(wǎng)絡(luò)圖形。PNG圖像是專門針對Web開發(fā)的一種無損壓縮圖像，它的壓縮比要大大超過許多傳統(tǒng)的圖像無損壓縮算法，同時(shí)還支持透明背景和動(dòng)態(tài)

5、效果。PNG文件格式的擴(kuò)展名是“.png”1.1 網(wǎng)頁概述1.1.2 網(wǎng)頁中的基本元素 3.動(dòng)畫 動(dòng)畫實(shí)質(zhì)上就是動(dòng)態(tài)的圖像。在網(wǎng)頁中使用動(dòng)畫可以有效地吸引瀏覽者的注意。由于活動(dòng)的對象比靜止的對象更具有吸引力，因而，網(wǎng)頁上通常有大量的動(dòng)畫。網(wǎng)頁中使用較多的動(dòng)畫是GIF動(dòng)畫和Flash動(dòng)畫。4.聲音 聲音是多媒體網(wǎng)頁的一個(gè)重要組成部分。用于網(wǎng)絡(luò)聲音文件格式非常多，常用的是MIDI、MAV、MP3和AIF等。一般來講，不要使用聲音文件作為網(wǎng)頁的背景音樂，那樣會(huì)影響網(wǎng)頁的下載速度?？梢栽诰W(wǎng)頁中添加一個(gè)鏈接來打開聲音文件作為背景音樂，讓播放音樂變得可以控制。 瀏覽器的不同，處理聲音文件的方式也會(huì)有很大的

6、差異和不一致的地方，最好將聲音文件添加到Flash影片中，然后嵌入SWF文件以改善一致性。1.1 網(wǎng)頁概述1.1.2 網(wǎng)頁中的基本元素 視頻 在網(wǎng)頁中視頻文件格式也非常多，常見的有RealPlayer、MPEG、AVI和DivX、flash等。表格 表格是一種用來控制網(wǎng)頁中頁面布局的有效方式。為了達(dá)到理想的視覺效果，通常都不顯示邊框，我們所看到的網(wǎng)頁如果具有橫豎分明的風(fēng)格，一般都是用表格來輔助布局的。 許多設(shè)計(jì)人員使用表格對網(wǎng)頁進(jìn)行布局。Dreamweaver提供兩種方式來查看和操作表格：標(biāo)準(zhǔn)視圖和布局視圖。在標(biāo)準(zhǔn)視圖中，表格顯示為行和列的網(wǎng)格，而布局視圖允許創(chuàng)建者在將表格用做基礎(chǔ)結(jié)構(gòu)的同時(shí)在

7、網(wǎng)頁上繪制、移動(dòng)方框以及調(diào)整方框的大小。1.1 網(wǎng)頁概述1.1.2 網(wǎng)頁中的基本元素 表單 表單是一種特殊的網(wǎng)頁元素。表單的主要用途是：收集聯(lián)系信息、接受用戶要求、獲得反饋意見、設(shè)置訪問者簽名、讓瀏覽者輸入關(guān)鍵字去搜索相關(guān)網(wǎng)頁、讓瀏覽者注冊會(huì)員或以會(huì)員身份登錄。登錄的用戶名、密碼、搜索引擎等都是表單。 表單由不同功能的表單元素組成，最簡單的表單也要包含一個(gè)輸入?yún)^(qū)域和一個(gè)提交按鈕。站點(diǎn)瀏覽者填寫表單的方式通常是輸入文本、選中單選按鈕和復(fù)選框，以及從下拉列表框中選擇選項(xiàng)。根據(jù)表單功能和處理方式的不同，通?？梢詫⒈韱畏譃橛脩舴答伇韱?、流言簿表單、搜索表單和用戶注冊表單等類型。1.1 網(wǎng)頁概述1.1.

8、3網(wǎng)頁的類型：有3種不同的類型：基本網(wǎng)頁、動(dòng)態(tài)網(wǎng)頁和模板網(wǎng)頁。1.基本網(wǎng)頁 基本網(wǎng)頁又稱靜態(tài)網(wǎng)頁，是相對動(dòng)態(tài)網(wǎng)頁而言的。工作原理如下。 客戶端請求 服務(wù)器 接受響應(yīng) 客戶端瀏覽器 網(wǎng)頁1.1 網(wǎng)頁概述動(dòng)態(tài)網(wǎng)頁 動(dòng)態(tài)網(wǎng)頁中除了基本網(wǎng)頁中的元素外，還包括一些程序，這些應(yīng)用程序需要瀏覽器與服務(wù)器之間發(fā)生交互行為，而且應(yīng)用程序的執(zhí)行需要應(yīng)用程序服務(wù)器才能完成。 應(yīng)用程序服務(wù)器的作用是讀取動(dòng)態(tài)網(wǎng)頁上的代碼，根據(jù)代碼中的指令完成網(wǎng)頁，然后將代碼從網(wǎng)頁上去掉，所得的結(jié)果將是一個(gè)靜態(tài)網(wǎng)頁；應(yīng)用程序服務(wù)器將該網(wǎng)頁傳送回網(wǎng)頁服務(wù)器，網(wǎng)頁服務(wù)器將網(wǎng)頁發(fā)送到瀏覽器，瀏覽器得到的仍然是一個(gè)純HTML的靜態(tài)網(wǎng)頁。 動(dòng)態(tài)網(wǎng)

9、頁是經(jīng)過人與服務(wù)器對話的結(jié)果。如圖網(wǎng)頁上的登錄、注冊、網(wǎng)上購物等都屬于此類網(wǎng)站。1.1 網(wǎng)頁概述動(dòng)態(tài)網(wǎng)頁有兩種：一種是普通動(dòng)態(tài)網(wǎng)頁，它不包含數(shù)據(jù)庫；一種是包含數(shù)據(jù)庫的動(dòng)態(tài)網(wǎng)頁。普通動(dòng)態(tài)網(wǎng)頁，其工作的過程如圖所示1.1 網(wǎng)頁概述.包含數(shù)據(jù)庫的動(dòng)態(tài)網(wǎng)頁，如Access、SQL、MYSQL等，其工作過程如圖所示：1.1 網(wǎng)頁概述1.1 網(wǎng)頁概述3.模板網(wǎng)頁 模板是提供一個(gè)標(biāo)準(zhǔn)頁面，它的模式固定，例如頁面布局、字體排列等固定不變，只需要改變頁面的內(nèi)容，這有助于讀者成批地建立頁面風(fēng)格相同的頁面，從而使網(wǎng)站風(fēng)格得到統(tǒng)一。模板能夠帶給你對網(wǎng)頁功能和布局更為完整的概念，并且模板文件能夠讓你更容易的瀏覽頁面代碼

10、。 1.2 網(wǎng)頁制作工具簡介1.2.1網(wǎng)頁編輯工具 1.FrontPage 2.Dreamweaver 1.2 網(wǎng)頁制作工具簡介1.2.2網(wǎng)頁動(dòng)畫制作軟件 Flash也是Macromedia公司推出的產(chǎn)品。Flash8.0可以更好的為網(wǎng)頁設(shè)計(jì)師和開發(fā)人員服務(wù)，幫助他們提高工作效率，創(chuàng)造豐富的、極具誘惑力個(gè)感染力的動(dòng)畫作品。 Flash的主要功能是制作動(dòng)畫，這種動(dòng)畫不能是純粹的動(dòng)畫，還應(yīng)該具有交互的特點(diǎn)，制作出來的作品應(yīng)該達(dá)到令人目眩的感覺。 Flash8.0兼容了以前的版本，凡是以前使用過Flash5.0、Flash MX以及Flash MX 2004的用戶都可以立即上手，應(yīng)用起來更方便、更快

11、捷。Flash8.0的功能得到了極大的擴(kuò)展，用它可以創(chuàng)造完整的動(dòng)態(tài)站點(diǎn)，從內(nèi)容顯示到數(shù)據(jù)庫的連通，以及視頻的調(diào)整，給用戶帶來的驚喜是空前的。 憑借Flash8.0的開發(fā)環(huán)境及新的服務(wù)器技術(shù)優(yōu)勢，網(wǎng)頁的開發(fā)者可以通過它建立新一帶的網(wǎng)絡(luò)動(dòng)畫，帶來更具視覺震撼力的Web產(chǎn)品。1.2 網(wǎng)頁制作工具簡介 1.2.3網(wǎng)絡(luò)圖像處理軟件 Fireworks是Macromedia公司專門為網(wǎng)頁設(shè)計(jì)的Web圖形工具軟件，它可以用最少的步驟生成最小但質(zhì)量很高的JPEG和GIF圖像，這些圖像可以直接用于網(wǎng)頁上。Fireworks是Web圖形工具的首選軟件。 Photoshop是由Adobe公司出品的著名的圖形圖像處理

12、軟件。它能夠?qū)崿F(xiàn)各種專業(yè)化的圖像處理，是專門圖像創(chuàng)作的首選軟件。 1.3 HTML基礎(chǔ)概念 HTML則是“HyperText Markup Language超文本標(biāo)記語言”的縮寫，它是構(gòu)成Web頁面的主要工具，是用來表示網(wǎng)上信息的符號(hào)標(biāo)記語言。 在Internet上，如果要想全球范圍內(nèi)發(fā)布信息，需要一個(gè)能夠被廣泛理解的語言，也就是說所有的計(jì)算機(jī)都能夠理解的用語出版的“母語”。WWW （World wide web）所使用的出版語言就是HTML語言。 通過HTML，將所需要表達(dá)的信息按某種規(guī)則HTML文件，通過專用的瀏覽器來識(shí)別，并將這些HTML“翻譯”成可以識(shí)別的信息，就是我們所見到的網(wǎng)頁。1

13、.3 HTML基礎(chǔ)功能HTML的功能如下：出版在線的文檔，其中包含了標(biāo)題、文本、表格、列表以及照片等內(nèi)容。通過超鏈接檢索在線的信息。為獲取遠(yuǎn)程服務(wù)而設(shè)計(jì)表單，可用于檢索信息、訂購產(chǎn)品。在文檔中直接包含了電子表格、視頻剪輯、聲音剪輯以及其他的一些功能。1.3 HTML基礎(chǔ)1.3.1 HTML語言結(jié)構(gòu)的基本標(biāo)志 文檔標(biāo)志 。標(biāo)志用于HTML文檔的最前面，用來標(biāo)識(shí)HTML文檔的開始。而標(biāo)志恰恰相反，它放在HTML文檔的最后邊，又來標(biāo)識(shí)HTML文檔的結(jié)束，兩個(gè)標(biāo)志必須成對使用。文件頭標(biāo)志。和構(gòu)成HTML文檔的開頭部分，在此標(biāo)志之間可以使用、等標(biāo)志對。標(biāo)志對之間的內(nèi)容是不會(huì)在瀏覽器的框內(nèi)顯示出來。兩個(gè)標(biāo)

14、志必須成對使用。1.3 HTML基礎(chǔ)1.3.1 HTML語言結(jié)構(gòu)的基本標(biāo)志文件主體標(biāo)志. 是HTML文檔的主體部分，在此標(biāo)志對之間可以包含、等眾多標(biāo)志。它們所定義的文本、圖像等將會(huì)在瀏覽器的框內(nèi)顯示出來。兩個(gè)標(biāo)志必須成對使用。標(biāo)志中還可以有如表1-1所示的屬性。 屬性用途示例設(shè)置背景顏色紅色背景設(shè)置文本顏色藍(lán)色文本設(shè)置鏈接顏色鏈接為藍(lán)色設(shè)置已經(jīng)使用的鏈接的顏色1.3 HTML基礎(chǔ)1.3.1 HTML語言結(jié)構(gòu)的基本標(biāo)志文件標(biāo)題標(biāo)志。使用過瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊的藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁的“主題”。要將網(wǎng)頁的主題顯示到瀏覽器的頂部其實(shí)很簡單，只要在標(biāo)志對之間加如

15、顯示的文本即可。注意：標(biāo)志對只能放在標(biāo)志對之間。下面是一個(gè)綜合的例子，說明了HTML文檔中最基本標(biāo)志的使用。顯示在瀏覽器最上邊藍(lán)色條中的文本紅色背景、藍(lán)色的文本1.3 HTML基礎(chǔ)1.3.2頁面格式標(biāo)志段落標(biāo)志.標(biāo)志對是用來創(chuàng)建一個(gè)段落,在此標(biāo)志對之間加入的文本將按照段落的格式顯示在瀏覽器上。另外，標(biāo)志還可以使用align屬性，它用來說明對齊方式，語法是。align可以是Left （左對齊）、Center（居中）和 Right（右對齊）三個(gè)值中間的一個(gè)。如：表示標(biāo)志對中的文本使用居中對齊方式。.標(biāo)志隊(duì)有來對文本進(jìn)行預(yù)處理操作。1.3 HTML基礎(chǔ)1.3.2頁面格式標(biāo)志2.換行標(biāo)志 是一個(gè)很簡單

16、的標(biāo)志，它沒有結(jié)束標(biāo)志，因?yàn)樗怯脕韯?chuàng)建一個(gè)回車換行的。在的使用上面還有一定的技巧，如果把加在標(biāo)志對的外邊,將創(chuàng)建一個(gè)很大的回車換行,即前面和后面的文本的行與行之間的距離很大,若放在的里面,則前面和后面的文本行與行之間的距離比較小.1.3 HTML基礎(chǔ)1.3.2頁面格式標(biāo)志3.列表標(biāo)志 、用來創(chuàng)建一個(gè)普通的列表,用來創(chuàng)建列表中的上層項(xiàng)目,用來創(chuàng)建列表中最下層項(xiàng)目, 和都必須放在標(biāo)志對之間。下面是一個(gè)創(chuàng)建普通列表的例子一個(gè)普通的列表中國城市北京上海廣州美國城市華盛頓芝加哥dd紐約1.3 HTML基礎(chǔ)1.3.2頁面格式標(biāo)志3.列表標(biāo)志、標(biāo)志對用來創(chuàng)建一個(gè)表有數(shù)字的列表；標(biāo)志對用來創(chuàng)建一個(gè)標(biāo)有圓點(diǎn)的

17、列表；標(biāo)志對只能在或標(biāo)志對之間使用，此標(biāo)志對用來創(chuàng)建一個(gè)列表項(xiàng)，若放在之間則每個(gè)列表項(xiàng)加上一個(gè)數(shù)字，若放在之間則每個(gè)列表項(xiàng)加上一個(gè)圓點(diǎn)。中國城市北京上海廣州美國城市華盛頓芝加哥紐約1.3 HTML基礎(chǔ)1.3.2頁面格式標(biāo)志標(biāo)志對用來排版大塊HTML段落，也用于格式化表，此標(biāo)志對的用法與標(biāo)志對非常相似，同樣有align對齊方式屬性。標(biāo)題格式標(biāo)志HTML語言提供了一系列對文本中的標(biāo)題進(jìn)行操作的標(biāo)志對：，一共有6對標(biāo)題的標(biāo)志對。是最大的標(biāo)題，而則是最小的標(biāo)題，也就是說標(biāo)志中h后面的數(shù)字越大標(biāo)題文本就越小。如果HTML文檔需要輸出標(biāo)題文本，就可以使用這6對標(biāo)題中的任何一對。1.3 HTML基礎(chǔ)1.3.

18、3文本標(biāo)志1.黑體字、斜體字、下劃線標(biāo)志對用來使文本以黑體字的形式輸出。用來使文本以斜體字的形式輸出。用來使文本以下加一劃線的形式輸出。2.文字字型標(biāo)志文字字型標(biāo)志還有、。這些標(biāo)志對的用法和上面講的一樣，差別只是輸出文本是字體不一樣而已。用來輸出打字機(jī)風(fēng)格字體的文本。用來輸出引用方式的字體，通常是斜體。用來輸出需要強(qiáng)調(diào)的文本（通常是斜體加黑體）。則用來輸出加重文本（通常是斜體加黑體）。1.3 HTML基礎(chǔ)1.3.3文本標(biāo)志3.文字大小、字體、顏色標(biāo)志 是一對很有用的標(biāo)志對，它可以對輸出文本的字體大小、顏色進(jìn)行隨意地改變，這些改變主要是通過對它的兩個(gè)屬性size和color的控制來實(shí)現(xiàn)的。Siz

19、e屬性用來改變字體的大小，它可以取值：-N、N和+N；而color屬性則用來改變文本的顏色。顏色的取值可以是基本標(biāo)志中講過的十六進(jìn)制RGB顏色碼或HTML語言給定的顏色常量名。1.3 HTML基礎(chǔ)1.3.3文本標(biāo)志文本標(biāo)志的綜合應(yīng)用文本標(biāo)志的綜合示例 最大的標(biāo)題 使用h3的標(biāo)題 最大的標(biāo)題 黑體字文本 斜體字文本 下加一劃線文本 打字機(jī)風(fēng)格的文本 引用方式的文本 強(qiáng)調(diào)文本 加重文本 size取值+1color取值為紅色時(shí)的文本1.3 HTML基礎(chǔ)1.3.4 圖像標(biāo)志 圖像屬性賦值標(biāo)志 標(biāo)志并不是真正地將圖像加入到HTML文檔中，而是將標(biāo)志對的SRC屬性賦值。這個(gè)值是圖像文件的文件名，包括路徑，

20、這個(gè)路徑可以是相對路徑，也可以是網(wǎng)址。實(shí)際上就是通過路徑將圖形文件嵌入到文檔中。 所謂相對路徑是指所要鏈接或嵌入到當(dāng)前HTML文檔的文件與當(dāng)前文件的相對位置所形成的路徑。 通常有如下情況： 假如HTML文件與圖形文件（假設(shè)文件名為logo.gif）在同一個(gè)目錄下，則可以將代碼寫成。 .假如圖形文件放在當(dāng)前的HTML文檔所在的目錄的一個(gè)子目錄（子目錄名假設(shè)是images）下，則代碼應(yīng)該為。 .假設(shè)圖形文件放在當(dāng)前的HTML文檔所在的目錄的上層目錄（目錄名假設(shè)是home）下，則相對路徑就必須是準(zhǔn)網(wǎng)址了。即用“./”表示網(wǎng)站，然后在后面緊跟文件在網(wǎng)站中的路徑。假設(shè)home是網(wǎng)站下的一個(gè)目錄，則代碼應(yīng)

21、為，若home是網(wǎng)站下的目錄king下面的一個(gè)子目錄，則代碼應(yīng)該為了。1.3 HTML基礎(chǔ)1.3.4 圖像標(biāo)志 必須強(qiáng)調(diào)，src屬性在標(biāo)志中是必須賦值的，是標(biāo)志中不可缺少的一部分。除此之外，標(biāo)志還有alt 、align、 border、 width和height屬性： alt屬于是當(dāng)鼠標(biāo)移動(dòng)到圖像上時(shí)顯示的文本。 align是圖形的對齊方式。 border屬性是圖形的邊框，可以取大于或者等于0的整數(shù)，默認(rèn)單位是像素。 width和height屬性是圖形的寬和高，默認(rèn)單位是像素。水平線標(biāo)志標(biāo)志是在HTML文檔中假如一條水平線，它可以直接使用，具有size、color、width 和noshade

22、屬性。 size是設(shè)置水平的厚度。 width是設(shè)置水平線的寬度、默認(rèn)單位為像素。 noshade屬性不需要賦值，而是直接加入標(biāo)志即可使用，它是用來假如一條沒有陰影的水平線（不假如此屬性，水平線將有陰影）。1.3 HTML基礎(chǔ)1.3.5表格標(biāo)志 創(chuàng)建表格標(biāo)志標(biāo)志對用來創(chuàng)建一個(gè)表格，下表所示的是屬性。 屬性用途設(shè)置表格的背景色設(shè)置邊框的寬度，若不設(shè)置寬度默認(rèn)值為0設(shè)置邊框的顏色設(shè)置邊框明亮部分的顏色（當(dāng)border的只大于等于1才有用）設(shè)置邊框昏暗部分的顏色（當(dāng)border的只大于等于1才有用）設(shè)置表格的單元格之間的空間大小設(shè)置表格的單元格邊框與其內(nèi)部內(nèi)容之間空間大小設(shè)置表格的寬度，單位用絕對像

23、素值或總寬度的百分比1.3 HTML基礎(chǔ)1.3.5表格標(biāo)志 行、單元格和表格頭標(biāo)志.、 標(biāo)志對用來創(chuàng)建表格的每一行。此標(biāo)志對只能放在標(biāo)志對之間使用，而在此標(biāo)志對之間加入文本是無用的，因?yàn)橹g只能緊跟標(biāo)志對才是有效的語法。 標(biāo)志對用來創(chuàng)建表格中每一行中的每一個(gè)單元格，此標(biāo)志對只有放在標(biāo)志對之間才識(shí)有效的，輸入的文本也只有放在標(biāo)志對之間才有效（即才能被顯示出來）。1.3 HTML基礎(chǔ)、和標(biāo)志對之間的關(guān)系標(biāo)志含義最外層，創(chuàng)建一個(gè)表格創(chuàng)建一行要輸出的文本只能放在此處要輸出的文本只能放在此處要輸出的文本只能放在此處創(chuàng)建一個(gè)單元個(gè)（這里總共創(chuàng)建了三個(gè)單元格）行末尾最外層1.3 HTML基礎(chǔ)1.3.5表格標(biāo)

24、志 此外，還有align和 valign屬性， align是水平對齊方式，取值為left(左對齊)、center（居中對齊）、right（右對齊）。 valign是垂直對齊方式，取值為top(靠頂端對齊)、 middle(居中間對齊)、bottom(靠底部對齊)。具有width、colspan、rowspan和nowrap屬性。 width是單元格的寬度，單位用絕對像素值或總寬度的百分比。 colspan設(shè)置一個(gè)表格單元格跨占的列數(shù)（缺省值為1）。 rowspan設(shè)置一個(gè)表格單元格跨占的行數(shù)（缺省值為1）。 nowrap禁止對表格單元格內(nèi)的內(nèi)容自動(dòng)斷行。標(biāo)志對用來設(shè)置表格頭，文字通常是黑體、居

25、中。1.3 HTML基礎(chǔ)1.3.5表格標(biāo)志 標(biāo)志對用來設(shè)置表格頭，文字通常是黑體、居中。1.3 HTML基礎(chǔ)1.3.5表格標(biāo)志 表格標(biāo)志的綜合應(yīng)用表格標(biāo)志的綜合示例意大利英格蘭西班牙AC米蘭拂羅倫莎曼聯(lián)紐卡斯?fàn)柊腿_那皇家社會(huì)1.3 HTML基礎(chǔ)1.3.5表格標(biāo)志 尤文圖斯桑普多利亞利物普阿申納皇家馬德里拉奇奧國際米蘭切爾西米德爾斯堡馬德里競技1.3 HTML基礎(chǔ)1.3.6鏈接標(biāo)志 1.創(chuàng)建連接頁面標(biāo)志 創(chuàng)建頁面的標(biāo)志對的href屬性無論如何是不可缺少的，標(biāo)志對之間假如需要鏈接的文本和圖像（鏈接圖像即加入標(biāo)志）。Href的值可以是網(wǎng)址或相對路徑，也可以mailto:形式。 對于第一種情況，語法

26、為,這樣就可以創(chuàng)建一個(gè)超文本鏈接了，例如： 這是我的網(wǎng)站對于第二種情況，語法為 ，這就創(chuàng)建了一個(gè)自動(dòng)發(fā)送電子郵件的連接，mailto：后邊緊跟著要自動(dòng)發(fā)送的電子郵件的地址（即E-mail地址），例如：這是我的電子郵箱（E-mail）1.3 HTML基礎(chǔ)1.3.7 標(biāo)志幀 幀可以用來向?yàn)g覽器窗口中裝載多個(gè)HTML文件。也就是說每個(gè)HTML文件占據(jù)一個(gè)幀，而多個(gè)幀可以同時(shí)顯示在同一瀏覽器窗口中，它們組成了一個(gè)最大的幀，也就是一個(gè)包含多個(gè)HTML文檔的HTML文件（我們稱它為主文檔）。幀通常的使用方法是在一個(gè)幀中放置目錄（即可以供選擇的鏈接），然后將HTML文件顯示在另一個(gè)幀中。 幀屬性標(biāo)志 標(biāo)志對

27、放在幀的主文檔的標(biāo)志對的外邊，也可以嵌套在其他幀的文檔中，并且可以嵌套使用。此標(biāo)志對用來定義主文檔中有幾個(gè)幀并且各個(gè)幀是如何排列的。它具有rows和cols屬性，使用標(biāo)志時(shí)這兩個(gè)屬性至少必須選擇一個(gè)，否則瀏覽器窗口只顯示第一個(gè)定義的幀，剩下的一概不管，標(biāo)志對也就沒有祈禱任何作用了。 rows是用來規(guī)定主文檔中各個(gè)幀的行定位,而cols用來規(guī)定主文檔中的各個(gè)幀 的列定位。這兩個(gè)屬性的取值可以是百分?jǐn)?shù)、絕對像素值或者“*”，其中“*”代表那些未被說明的空間，如果同一個(gè)屬性中出現(xiàn)多個(gè)“*”則將剩下的未被說明的空間平均分配。同時(shí)，所有的幀按照rows和cols的值從左到右，然后從上到下排列，1.3 H

28、TML基礎(chǔ)1.3.7 標(biāo)志幀示例說明總共有三個(gè)按列排列的幀，每個(gè)幀占整個(gè)瀏覽器窗口是1/3總共有三個(gè)按行排列的幀，第一個(gè)幀占整個(gè)瀏覽器窗口的40%，剩下的空間平均分配給另外兩個(gè)幀總共有六個(gè)幀，先是在第一行中從左到右排列三個(gè)幀，然后在第二行中從做到右再排列三個(gè)幀，即兩行三列，所占空間依據(jù)rows和cols屬性的值，其中200的單位是像素1.3 HTML基礎(chǔ)1.3.7 標(biāo)志幀幀內(nèi)容標(biāo)志.標(biāo)志放在之間，用來定義某一個(gè)具體的幀。標(biāo)志具有src、name、scrolling和noresize屬性，其中src 和name屬性都是必須賦值的。 src是此幀的源HTML文件名（包括網(wǎng)絡(luò)路徑、相對路徑或網(wǎng)址），

29、瀏覽器將會(huì)在此幀中顯示src指定的HTML文件。 name是此幀的名字，這個(gè)名字是用來供超文本鏈接標(biāo)志中的target屬性，用來指定鏈接的HTML文件將顯示在哪一個(gè)幀中。例如定義一個(gè)幀，名字是main,在幀中顯示的HTML文件名是jc.htm，則代碼為：。當(dāng)有一個(gè)鏈接，在單擊了這個(gè)鏈接后，文件new.htm將要顯示在名為main的幀中，則代碼為需要鏈接的文本。這樣一來，就可以在一個(gè)幀中建立網(wǎng)站的目錄，加入一系列鏈接，當(dāng)單擊鏈接以后在另一幀中顯示被鏈接的HTML文件。 scrolling用來指定是否顯示滾動(dòng)軸，取值可以是“yes”（顯示）、“no”（不顯示）、“auto”（若需要?jiǎng)t會(huì)自動(dòng)顯示，不

30、需要?jiǎng)t自動(dòng)不顯示）。 noresize屬性值直接加入標(biāo)志中就可以使用，不需要賦值，它用來禁止用戶調(diào)整一個(gè)幀的大小。1.3 HTML基礎(chǔ)1.3.7 標(biāo)志幀. 標(biāo)志對也是放在標(biāo)志對之間，用來在那些不支持幀的瀏覽器中顯示文本或圖像信息。幀標(biāo)志的綜合應(yīng)用下面是一個(gè)有關(guān)幀的綜合應(yīng)用的例子。主文檔 ：幀標(biāo)志綜合示例對不起,您的瀏覽器不支持幀!1.3 HTML基礎(chǔ)1.3.7 標(biāo)志幀目錄頁 meun.htm:目錄目錄鏈接到第一頁鏈接到第二頁第一頁 pagel.htm第一頁這是第一頁!第二頁 page2.htm第二頁這是第二頁!1.3 HTML基礎(chǔ)1.3.8 表單標(biāo)志創(chuàng)建表單標(biāo)志標(biāo)志對用來創(chuàng)建一個(gè)表單，也就是定

31、義表單的開始和結(jié)束位置，在標(biāo)志對之間的一切都屬于表單內(nèi)容。標(biāo)志還有action、method和terget屬性。action的值是處理程序的程序名（包含絕對路徑和相對路徑），如：當(dāng)用戶提交表單時(shí)，服務(wù)器將執(zhí)行網(wǎng)址/上的名為counter.cgi的CGI程序。method屬性用來定義處理程序從表單中獲得信息的方式，可以取GET和POST中間的任何一個(gè)。GET方式是處理程序從當(dāng)前HTML文檔中獲取數(shù)據(jù)，然而這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在1KB以下。POST方式與GET方式正好相反，它是當(dāng)前的HTML文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用GET方式大得多。terget屬性用來指

32、定目標(biāo)窗口或目標(biāo)幀。1.3 HTML基礎(chǔ)1.3.8 表單標(biāo)志定義輸入?yún)^(qū)標(biāo)志標(biāo)志用來定義一個(gè)用戶輸入?yún)^(qū)，用戶可以在其中輸入信息。此標(biāo)志必須放在標(biāo)志對之間。標(biāo)志中共提供了八種類型的輸入?yún)^(qū)域，具體是哪一種類型由type屬性來決定，這八種類型的具體內(nèi)容見表1-5。Type屬性取值輸入?yún)^(qū)域類型輸入?yún)^(qū)域示例單行的文本輸入?yún)^(qū)域，size與maxlength屬性用來定義此種輸入?yún)^(qū)域顯示尺寸大小與輸入的最大字符數(shù)將表單內(nèi)容提交給服務(wù)器的按鈕將表單的內(nèi)容全部清楚，重新填寫按鈕一個(gè)復(fù)選框，checked屬性用來設(shè)置該復(fù)選框缺省時(shí)是否被選中，右邊示例使用了三個(gè)復(fù)選框隱藏區(qū)域，用戶不能在其中輸入，用來預(yù)設(shè)某些要傳送的信

33、息使用圖像來代替submit按鈕，圖像的源文件由src屬性指定，用戶單擊后，表單中的信息和單擊位置的X、Y坐標(biāo)一起傳送給服務(wù)器輸入密碼的區(qū)域，當(dāng)用戶輸入密碼時(shí)，區(qū)域內(nèi)將會(huì)顯示“*”單選框類型，radio屬性表示輸入項(xiàng)是一個(gè)單選項(xiàng)，右邊示例中使用了三個(gè)單選項(xiàng)1.3 HTML基礎(chǔ)1.3.8 表單標(biāo)志3.創(chuàng)建列表框標(biāo)志標(biāo)志對用來創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框。此標(biāo)志對用于標(biāo)志對之間。具有multiple、name和size屬性。name是此列表的名字，它與上面介紹的name屬性作用是一樣的。size屬性用來設(shè)置用來設(shè)置列表的高度，缺省時(shí)值為1，若沒有設(shè)置（加入）multiple屬性，顯示的將是

34、一個(gè)彈出式的列表框。.標(biāo)志是用來指定列表框的一個(gè)選項(xiàng)，它放在標(biāo)志對之間。此標(biāo)志具有selected和value屬性。Selected屬性用來指定默認(rèn)的選項(xiàng)。Value屬性用來給指定的那一個(gè)選項(xiàng)賦值，這個(gè)值是要傳送到服務(wù)器上的，服務(wù)器正是通過調(diào)用區(qū)域的名字的value屬性來獲得該區(qū)域選中的數(shù)據(jù)項(xiàng)。1.3 HTML基礎(chǔ)1.3.8 表單標(biāo)志HTML代碼瀏覽器顯示的結(jié)果請選擇最喜歡的女歌手 :祖海宋祖英韓紅孫悅請選擇最喜歡的男歌手 :劉德華張學(xué)友郭富城黎明1.3 HTML基礎(chǔ)1.3.8 表單標(biāo)志4.創(chuàng)建文本框標(biāo)志用來創(chuàng)建一個(gè)可以輸入多行的文本框,此標(biāo)志對用于標(biāo)志對之間。具有name、cols和rows

35、屬性。cols和rows屬性分別用來設(shè)置文本框的列數(shù)和行數(shù)，這里的行和列是以字符為 單位的，如表1-7例子所示。 HTML代碼瀏覽器顯示的結(jié)果你的意見對我很重要:請將意見輸入此區(qū)域1.3 HTML基礎(chǔ)1.3.9 多媒體標(biāo)志多媒體標(biāo)志用于插入音樂和各種多媒體插件。插入背景音樂標(biāo)志用來插入背景音樂，但只適用于IE，其參數(shù)設(shè)定不多。例如：src=your.mid設(shè)定midi檔案及路徑，可以是相對路徑，也可以是絕對路徑。autostart=true是否在音樂文件傳完之后，就自動(dòng)播放音樂。true表示是，false表示否（內(nèi)定值）。loop=infinite是否自動(dòng)反復(fù)播放。loop=2表示重復(fù)2次，

36、infinite表示重復(fù)多次。輸入各種多媒體標(biāo)志用以插入各種多媒體，格式可以是MIDI、MAV、AIFF、AU等等，netscape及新版的IE都支持。其參數(shù)設(shè)定較多。1.3 HTML基礎(chǔ)1.3.9 多媒體標(biāo)志輸入各種多媒體標(biāo)志用以插入各種多媒體，格式可以是MIDI、MAV、AIFF、AU等等，netscape及新版的IE都支持。其參數(shù)設(shè)定較多。例如：src=your.mid設(shè)定midi檔案及路徑，可以是相對路徑，也可以是絕對路徑。autostart=true是否在音樂文件傳完之后，就自動(dòng)播放音樂。true表示是，false表示否（內(nèi)定值）。loop=true是否自動(dòng)反復(fù)播放。loop=2表示

37、重復(fù)2次， infinite表示重復(fù)多次。hidden=true是否完全隱藏控制畫面，true為是,no為否（內(nèi)定）。Starttime=分：秒設(shè)定歌曲開始播放的時(shí)間。如Starttime=00：30表示從第30秒處開始播放。Volume=0-100設(shè)定音量的大小，數(shù)量是0到100之間。內(nèi)定值為使用者系統(tǒng)本身設(shè)定。Width=整數(shù)和high=整數(shù)1.3 HTML基礎(chǔ)1.3.9 多媒體標(biāo)志設(shè)定控制畫面的寬度和高度（若hidden=no）。Align=center設(shè)定控制畫面和旁邊文字的對齊方式，其值可以是top、bottom、center、baseline、left right texttop、

38、middle、absmiddle、absbottom。Controls=smallconsole設(shè)定控制畫面的外貌。預(yù)設(shè)值是console.其中console一般正常的面板；smallconsole較小的面板；piaybutton只顯示播放按鈕；pausebutton只顯示暫停按鈕；stopbutton只顯示停止按鈕；volumelever只顯示音量調(diào)整按鈕。1.3 HTML基礎(chǔ)1.3.10 其他標(biāo)志適用于IE,譯為“跑馬燈”。例如status Bar，其意思是指走動(dòng)或卷動(dòng)的文字，其參數(shù)設(shè)定較多。例如：hellobehavior=scroll設(shè)定文字的卷動(dòng)方式，可選值為：scroll一般卷動(dòng)，

39、使內(nèi)定值。slied例如幻燈片，一格格的,效果是文字一接觸左邊便全部消失。alternate文字向左右兩邊撞來撞去。direction=left設(shè)置文字卷動(dòng)方向，left 表示向左，是內(nèi)定值，right表示向右。bgcolor=#0000ff設(shè)置文字卷動(dòng)范圍的背景顏色。height=30 width=150設(shè)置文字卷動(dòng)范圍，可以采取相對或絕對，如30%或30等，單位為像素。hspace=0 vspace=0設(shè)定文字的水平及垂直空白位置。1.3 HTML基礎(chǔ)1.3.10 其他標(biāo)志loop=infinite設(shè)定文字卷動(dòng)的次數(shù)，其值可以是正整數(shù)或infinite, infinite是內(nèi)定的，表示無限

40、次。scrollamount=30設(shè)定每“格”文字之間的間隔，單位是像素。scrolldelay=500設(shè)定文字卷動(dòng)的停頓時(shí)間，單位是毫秒。2.是令文字閃爍，只適用于netscape,用法直接，沒有參數(shù)。例如：天上的星星不說話，地上的孩子叫媽媽顯示的結(jié)果為：天上的星星不說話，地上的孩子叫媽媽是放在之間的標(biāo)志，此處以公式的形式進(jìn)行介紹。該網(wǎng)頁的描述，作用于尋找引擎的登錄。該網(wǎng)頁的關(guān)鍵字，作用于尋找引擎的登錄。1.3 HTML基礎(chǔ)1.3.10 其他標(biāo)志是放在之間的標(biāo)志，此處以公式的形式進(jìn)行介紹。該網(wǎng)頁的描述，作用于尋找引擎的登錄。該網(wǎng)頁的關(guān)鍵字，作用于尋找引擎的登錄。以上兩行命令的功能相同，都是要

41、求瀏覽器重新載入該頁面，不使用緩存中的信息，expires時(shí)間可以修改。1.3 HTML基礎(chǔ)1.3.10 其他標(biāo)志設(shè)定這是HTML文件及其編碼語系，中文網(wǎng)頁請使用BIG5，或者不設(shè)編碼也可，純英文網(wǎng)頁建議使用ISO-8859-1。表示該網(wǎng)頁由什么編輯器寫成。這一行較為實(shí)用，能在預(yù)定的秒數(shù)內(nèi)自動(dòng)轉(zhuǎn)到指定的網(wǎng)址，原始碼中的10表示10秒。1.3 HTML基礎(chǔ)1.3.10 其他標(biāo)志用來將目前文件與其他URL做鏈接，但不會(huì)有鏈接按鈕，用于標(biāo)志，格式如下：1.4 實(shí)踐技能訓(xùn)練實(shí)例1.字體設(shè)置標(biāo)記實(shí)例說明：本實(shí)例介紹字體設(shè)置標(biāo)志的方法，效果如圖1-12實(shí)例分析：利用字體設(shè)置標(biāo)志，設(shè)置字體的大小、顏色及字體

42、的屬性，完成字體設(shè)置的HTML網(wǎng)頁的制作。實(shí)例2.字符修飾標(biāo)記實(shí)例說明：本實(shí)例介紹字符修飾標(biāo)記的使用方法，效果如圖1-13。實(shí)例分析：利用字符修飾標(biāo)記，、，完成字符修飾HTML網(wǎng)頁的制作。 實(shí)例3：表格標(biāo)記實(shí)例說明：本實(shí)例介紹表格標(biāo)記的使用方法，效果如圖1-14。實(shí)例分析：利用表格標(biāo)記，元素用于定義一個(gè)表格，每一個(gè)表格只有一對。用來定義表格單元，一張網(wǎng)頁可以包含多個(gè)表格單元。用來定義表格的行，用來定義表格的頭。網(wǎng)頁設(shè)計(jì)與制作教程網(wǎng)頁設(shè)計(jì)與制作教材配套電子教案2007.62.1 Dreamweaver 8.0界面介紹2.2 Dreamweaver 8.0常用工具2.3 Dreamweaver8.

43、0的功能簡介2.4 使用Dreamweaver 8.0處理圖片2.5 在Dreamweaver 8.0中規(guī)劃站點(diǎn)2.6 本地站點(diǎn)的搭建與管理2.7 實(shí)踐技能訓(xùn)練第二章 Dreamweaver 8.0入門2.1.1 Dreamweaver 8.0界面介紹 在首次啟動(dòng)Dreamweaver8時(shí)會(huì)出現(xiàn)如圖2-1的一個(gè)界面,這是一個(gè)“工作區(qū)設(shè)置”對話框，在對話框左側(cè)是Dreamweaver8的設(shè)計(jì)視圖，右側(cè)是Dreamweave 8的代碼視圖。Dreamweaver8設(shè)計(jì)視圖布局提供了一個(gè)將全部元素置于一個(gè)窗口中的集成布局。我們選擇面向設(shè)計(jì)者的設(shè)計(jì)視圖布局。 2.1 Dreamweaver 8.0界面

44、介紹2.1.1 Dreamweaver 8.0界面介紹 Dreamweaver 8.0標(biāo)準(zhǔn)工作界面大致可以分為以下幾個(gè)區(qū)域: 標(biāo)題欄: 菜單欄： 文檔工具欄： “插入”欄： 文檔窗口： 屬性欄： 狀態(tài)欄： 浮動(dòng)面板組：2.1 Dreamweaver 8.0界面介紹2. 2.1菜單欄工具 文件：用來管理文件。插入：用來插入各種元素. 修改：具有對頁面元素修改的功能。 文本：用來對文本操作。命令：所有的附加命令項(xiàng) 站點(diǎn)：用來創(chuàng)建和管理站點(diǎn) 窗口：用來顯示和隱藏控制面板以及切換文檔窗口 幫助：聯(lián)機(jī)幫助功能。2.2 Dreamweaver 8.0常用工具2.2.2文檔工具欄 “文檔”工具欄包含各種按鈕

45、，它們提供各種“文檔”窗口視圖（如“設(shè)計(jì)”視圖和“代碼”視圖）的選項(xiàng)、各種查看選項(xiàng)和一些常用操作（如在瀏覽器中預(yù)覽）。界面如圖2-4所示。2.2 Dreamweaver 8.0常用工具2.2.3 “插入”欄 插入面板集成了所有可以在網(wǎng)頁應(yīng)用的對象包括“插入”菜單中的選項(xiàng)。有常用、布局、表單、文本、HTML、應(yīng)用程序、Flash元素和收藏夾共8個(gè)二級(jí)菜單共167個(gè)按鈕。插入面板組其實(shí)就是圖像化了的插入指令，通過一個(gè)個(gè)的按鈕，可以很容易的加入圖像、聲音、多媒體動(dòng)畫、表格。圖層、框架、表單、Flash和ActiveX等網(wǎng)頁元素。面板的界面如圖2-5所示。 2.2 Dreamweaver 8.0常用工

46、具2.2.4文檔窗口 “文檔”窗口顯示當(dāng)前文檔。可以選擇下列任一視圖：“設(shè)計(jì)”視圖是一個(gè)用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，Dreamweaver 8.0顯示文檔的完全可編輯的可視化表示形式，類似于在瀏覽器中查看頁面時(shí)看到的內(nèi)容。“代碼”視圖是一個(gè)用于編寫和編輯 HTML、JavaScript、服務(wù)器語言代碼以及任何其他類型代碼的手工編碼環(huán)境?！按a和設(shè)計(jì)”視圖使您可以在單個(gè)窗口中同時(shí)看到同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。2.2 Dreamweaver 8.0常用工具2.2.5屬性欄 屬性面板并不是將所有的屬性加載在面板上，而是根據(jù)我們選擇的對象來動(dòng)態(tài)顯

47、示對象的屬性屬性面板的狀態(tài)完全是隨當(dāng)前在文檔中選擇的對象來確定的。例如，當(dāng)前選擇了一幅圖像，那么屬性面板上就出現(xiàn)該圖像的相關(guān)屬性；如果選擇了表格，那么屬性面板會(huì)相應(yīng)的變化成表格的相關(guān)屬性。屬性面板的界面如圖2-8所示。2.2 Dreamweaver 8.0常用工具2.2.6狀態(tài)欄 “文檔窗口”的底部的狀態(tài)欄提供了與你正在創(chuàng)建的文檔的有關(guān)其他信息?！拔臋n”窗口底部的狀態(tài)欄提供與你正創(chuàng)建的文檔有關(guān)的其它信息。標(biāo)簽選擇器顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部內(nèi)容。單擊 可以選擇文檔的整個(gè)正文。2.2 Dreamweaver 8.0常用工具1.將世界一流水

48、平的“設(shè)計(jì)”和“代碼”編輯器合二為一，在設(shè)計(jì)窗口中精簡源代碼，是用戶能夠按照工作的需要指定自己的用戶界面。2.跨瀏覽器有效檢查當(dāng)保存時(shí)，自動(dòng)地檢查當(dāng)前文檔跨瀏覽器的有效性（兼容性），可以指定測試瀏覽器，同時(shí)自動(dòng)檢測以確定頁面有沒有目標(biāo)瀏覽器不支持的tags或CSS結(jié)構(gòu)。動(dòng)態(tài)跨瀏覽器有效性檢測功能可以自動(dòng)核對tags或CSS規(guī)則是否適應(yīng)目前的主瀏覽器。3.使用內(nèi)置的圖形編輯程序讓開發(fā)更加節(jié)省時(shí)間。圖像的剪切、縮放等一系列的輔助性的圖象編輯功能可以使用內(nèi)嵌的Macromedia Fireworks 技術(shù)。4.在設(shè)計(jì)模式下允許開發(fā)者可以不用固定的瀏覽器預(yù)覽數(shù)據(jù)，而利用LiveData窗口預(yù)覽實(shí)時(shí)數(shù)據(jù)

49、。2.3 Dreamweaver8.0的功能簡介（1） 5.功能更多的CSS支持 在設(shè)計(jì)窗口中運(yùn)用重新設(shè)計(jì)的標(biāo)簽檢測工具來檢測哪個(gè)CSS規(guī)則運(yùn)用與當(dāng)前的選擇。 即時(shí)編輯功能讓你在編輯CSS的同時(shí)能夠即時(shí)看到設(shè)計(jì)窗口中的變化。 使用增強(qiáng)的CSS面板直接在代碼內(nèi)部定義樣式，并且可以直觀地看到CSS樣式定義的位置。 不必切換編輯方式直接選取CSS樣式，樣式下拉列表中內(nèi)置了所有可用樣式的預(yù)覽顯示。 通過頁面屬性對話框（ “修改”菜單 “頁面屬性” ）獲取更多改變頁面控制屬性（如標(biāo)題、鏈接等）。2.3 Dreamweaver8.0的功能簡介（2）6.運(yùn)用完整的集成開發(fā)環(huán)境來開發(fā)HTML、XHTML、XM

50、L、ASP、ASP.NET、JSP、PHP和Macromedia Cold Fusion站點(diǎn)。通過Macromedia插件中心可以獲取800多個(gè)免費(fèi)插件來制定和擴(kuò)展你的開發(fā)環(huán)境。7.所有傳輸?shù)奈募耆用?，并阻止越?quán)存取你的信息、文件內(nèi)容、用戶名和口令。8.從Microsoft Word和Excel中直接拷貝粘帖內(nèi)容到Dreamweaver中，同時(shí)保留字體、顏色和CSS樣式。完全支持Unicode，支持使用和chu存任何字體以及編碼（包括雙字節(jié)字符）。9.使用改進(jìn)后的ASP.NET對象和屬性檢測工具構(gòu)建Microsoft ASP.NET Web forms.2.3 Dreamweaver8.0

51、的功能簡介（3）10.重新編寫PHP語法和服務(wù)器行為，包括Master-Detail頁面設(shè)置模塊、用戶身份驗(yàn)證模塊等。通過內(nèi)置的Flash構(gòu)件，導(dǎo)入一個(gè)Flash構(gòu)件就像標(biāo)簽一樣輕松。MXHTML構(gòu)件，利用MX組件（包括按鈕、模板）快速建立有效的用戶界面。改進(jìn)的表格編輯工具，修改的Insert面板，高效的文件編輯過程。更多有效地代碼編輯（如按右鍵彈出的編碼工具），更多的搜索選擇項(xiàng)并且能夠保存搜索條件，以及能夠迅速啟動(dòng)屬性檢查工具。詳盡的屬性編輯，列出每個(gè)適用于當(dāng)前選擇項(xiàng)的可用屬性。 此外Dreamweaver 8.0還增加了圖片處理功能：圖片的亮度和對比度的調(diào)節(jié)、圖片的銳化效果等。2.3 Dr

52、eamweaver8.0的功能簡介（4） 在Dreamweaver 中插入一張圖片，“屬性”面板上就多了幾個(gè)與圖片相關(guān)的屬性圖標(biāo)。改變圖片的大小后，在圖片大小設(shè)置欄旁邊就多了一個(gè)帶箭頭的圖形按鈕圖標(biāo)，這是快速使圖片還原到原始大小的工具。在切換到Fireworks圖標(biāo)旁邊的一組圖表之中，也是一個(gè)這樣的圖標(biāo)。Dreamweaver 8.0同時(shí)還增加了“剪切(Crop)”工具（剪切圖片）、“亮度/對比度”調(diào)節(jié)工具、“銳化”工具等三個(gè)圖片處理的 新功能。有了這些簡單的圖片處理工具，在編輯網(wǎng)頁圖片時(shí)，不需要啟動(dòng)其它的圖像處理軟件，提高了工作效率。2.4使用Dreamweaver 8.0處理圖片圖片剪切2

53、.亮度的調(diào)節(jié) 3.銳化2.4使用Dreamweaver 8.0處理圖片 在Dreamweaver中,站點(diǎn)這個(gè)術(shù)語既可以是Web站點(diǎn),也可以指屬于Web站點(diǎn)的文檔在本地存儲(chǔ)的位置。當(dāng)開始考慮創(chuàng)建Web站點(diǎn)時(shí)，為了確保站點(diǎn)的成功，應(yīng)該按照一系列的規(guī)劃步驟進(jìn)行。即使創(chuàng)建個(gè)人的主頁，只有朋友和家人看見，仔細(xì)規(guī)劃站點(diǎn)也是有用的。 要開發(fā)一個(gè)優(yōu)秀的網(wǎng)站，通常應(yīng)該遵循以下工作流程：首先定義開發(fā)網(wǎng)站的目的，作好網(wǎng)站的規(guī)劃工作； 接下來對網(wǎng)站的外觀進(jìn)行設(shè)計(jì)；然后進(jìn)行實(shí)際頁面的制作； 接著再對制作的網(wǎng)站進(jìn)行測試，以確保所做的網(wǎng)站符合最初設(shè)計(jì)的目標(biāo)； 最后是將網(wǎng)站發(fā)布。發(fā)布網(wǎng)站后還要定期對網(wǎng)站進(jìn)行維護(hù)，以便及時(shí)更新

54、網(wǎng)站內(nèi)容。2.5在Dreamweaver 8.0中規(guī)劃站點(diǎn)(1)網(wǎng)站的規(guī)劃主要包括以下內(nèi)容： 1.確定網(wǎng)站的主題和名稱 網(wǎng)站主題是指用戶建立網(wǎng)站所要包含的主要內(nèi)容?，F(xiàn)在網(wǎng)站的主題很多，這一步是整個(gè)網(wǎng)站規(guī)劃環(huán)節(jié)最重要的。一般來說，確定網(wǎng)站主題時(shí)要遵循以下原則： 主題鮮明、小而精。一個(gè)網(wǎng)站必須有一個(gè)明確的主題，在主題范圍內(nèi)做到內(nèi)容大而全、精而深。 主題是自己最擅長的最感興趣的。找準(zhǔn)一個(gè)自己最趕興趣的內(nèi)容做深、做透。 體現(xiàn)自己的個(gè)性。把自己的興趣、愛好盡情的發(fā)揮出來，突出自己的個(gè)性，辦出自己的特色。 2.5在Dreamweaver 8.0中規(guī)劃站點(diǎn)(2) 2.搜集資料 確定網(wǎng)站的主題后，要圍繞主題開

55、始搜集資料。資料既可以從圖書、報(bào)紙、光盤、多媒體上獲得，也可以從網(wǎng)上搜集；然后再把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。 3.規(guī)劃站點(diǎn) 規(guī)劃站點(diǎn)就像設(shè)計(jì)一座大樓一樣，只有圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。在規(guī)劃網(wǎng)站時(shí)，首先要把網(wǎng)站的內(nèi)容一一列舉出來，根據(jù)內(nèi)容列出一個(gè)結(jié)構(gòu)化的藍(lán)圖，根據(jù)實(shí)際情況設(shè)計(jì)各個(gè)頁面之間的鏈接。網(wǎng)站的規(guī)劃內(nèi)容有：確定網(wǎng)站點(diǎn)題材，確定網(wǎng)站的名稱，確定網(wǎng)站的框架等。2.5在Dreamweaver 8.0中規(guī)劃站點(diǎn)(3) 4.欄目的設(shè)置 合理的設(shè)計(jì)網(wǎng)站的欄目和板快，一般要注意以下事項(xiàng)： 突出主題。把主題欄目放在最顯眼的地方，讓訪問者更快、更鮮明地知道你的網(wǎng)站所

56、要表現(xiàn)的內(nèi)容。 設(shè)計(jì)一個(gè)“最近更新”的藍(lán)目。 5.目錄結(jié)構(gòu)設(shè)計(jì) 目錄結(jié)構(gòu)設(shè)計(jì)一般要注意以下事項(xiàng)： 按照欄目內(nèi)容建立子目錄。 每個(gè)目錄下分別為圖像創(chuàng)建一個(gè)目錄image。 目錄的層次不呢感太深，最好少于5層。 盡量使用意義明確的非中文目錄（一般用拼音）。2.5在Dreamweaver 8.0中規(guī)劃站點(diǎn)(4) 6.顏色搭配 合理地應(yīng)用色彩是非常關(guān)鍵的，不同的色彩搭配產(chǎn)生不同的效果，并能夠影響訪問者的情緒。色彩搭配要遵循和諧、均衡、重點(diǎn)突出的原則。 7.版面布局 網(wǎng)頁頁面的版面布局是不可忽視的。要合理地運(yùn)用空間，使網(wǎng)頁疏密有致，井井有條。版面布局一般遵循的原則是：突出重點(diǎn)、平衡和諧，將網(wǎng)站標(biāo)志、主菜

57、單等最重要的模塊放在最顯眼、最突出的位置。同時(shí)還要注意其它也面和首頁的風(fēng)格一致性，要有返回首頁的鏈接。2.5在Dreamweaver 8.0中規(guī)劃站點(diǎn)(5) 8. 圖像的運(yùn)用 網(wǎng)頁上不能只有文字，必須適當(dāng)?shù)卦黾右恍﹫D像，使用圖像一般要注意以下事項(xiàng)： 圖像為主頁的內(nèi)容服務(wù)，不要讓整個(gè)頁面花花綠綠，喧賓奪主。 圖像要兼顧大小美觀。圖片不僅要好看，還要在保證圖片質(zhì)量的情況下盡量縮小圖片的大小。單張圖像不要超過30KB。 合理地使用JPG和GIF格式。一般來說，顏色 較少的（在256色以內(nèi)的）圖像把它處理成GIF格式；顏色比較豐富的圖像，最好把它處理成JPG格式。2.5在Dreamweaver 8.0

58、中規(guī)劃站點(diǎn)（6） 要制作一個(gè)能夠被大家瀏覽的網(wǎng)站，首先需要在本地磁盤上制作這個(gè)網(wǎng)站，然后把這個(gè)網(wǎng)站傳到互聯(lián)網(wǎng)的web服務(wù)器上。放置在本地磁盤上的網(wǎng)站被稱為本地站點(diǎn)，位于互聯(lián)網(wǎng)web服務(wù)器里的網(wǎng)站被稱為遠(yuǎn)程站點(diǎn)。 Dreamweaver 8.0提供了對本地站點(diǎn)和遠(yuǎn)程站點(diǎn)強(qiáng)大的管理功能。 在Dreamweaver 8.0中可以有效的建立并管理多個(gè)站點(diǎn)。搭建站點(diǎn)可以有兩種方法，一是利用向?qū)瓿?，二是利用高?jí)設(shè)定來完成。 1.定義站點(diǎn) 2.搭建站點(diǎn)結(jié)構(gòu) 3.文件與文件夾的管理2.6本地站點(diǎn)的搭建與管理 網(wǎng)站建好之后需要將做好的網(wǎng)頁上傳到一個(gè)服務(wù)器，以便網(wǎng)站能夠被其他人訪問。Dreamweaver 8集

59、成了遠(yuǎn)程站點(diǎn)的管理工具，可以方便地管理本地站點(diǎn)與遠(yuǎn)程服務(wù)器中的文件。 2.7.1 獲得WEB服務(wù)器 2.7.2 定義遠(yuǎn)程站點(diǎn) 2.7.3 上傳站點(diǎn) 2.7 站點(diǎn)的發(fā)布2.7.1 建立并設(shè)置本地根文件夾2.7.2 定義站點(diǎn)2.7.3 創(chuàng)建0DBC連接2.7實(shí)踐技能訓(xùn)練站點(diǎn)的建立網(wǎng)頁設(shè)計(jì)與制作教程網(wǎng)頁設(shè)計(jì)與制作教材配套電子教案2007.63.1 創(chuàng)建一個(gè)新文檔3.2 文字處理3.3 圖像處理3.4 超級(jí)鏈接3.5 使用多媒體對象第3章 創(chuàng)建和編輯網(wǎng)頁文檔 3.1.1 創(chuàng)建新的空白文檔 在Dreamweaver 8.0中可以創(chuàng)建新的空白文檔、創(chuàng)建以模板為基礎(chǔ)的文檔以及打開并編輯已經(jīng)存在的文檔。 三種

60、方法： 1、 從啟動(dòng)界面中的“創(chuàng)建新項(xiàng)目”組合框中選擇合適的文件類型，即可直接進(jìn)入文檔窗口進(jìn)行編輯。 2、也可選擇主菜單中的“文件”“新建”命令，系統(tǒng)彈出新建文檔對話框。 3、按下Ctrl+N快捷鍵，系統(tǒng)彈出新建文檔對話框。3.1 創(chuàng)建一個(gè)新文檔3.1.2 打開現(xiàn)有文檔 在Dreamweaver8.0中可以打開現(xiàn)有的Web頁或基于文本的文檔，即使這些文檔不是用Dreamweaver8.0創(chuàng)建的也可以將其打開，然后利用Dreamweaver8.0在“設(shè)計(jì)”視圖或“代碼”視圖中編輯該文檔。 打開現(xiàn)有的文檔有以下幾種方法： 1.在“文檔”窗口中打開選擇的文檔 2.導(dǎo)入Word文檔 3.在資源管理器中