全書配套課件：Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)

1、Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主講人主講人 第一講第一講 網(wǎng)頁基礎(chǔ)知識(shí)網(wǎng)頁基礎(chǔ)知識(shí) 1、網(wǎng)頁的幾個(gè)基本概念。 2、HTML基礎(chǔ)知識(shí) 3、了解Dreamweaver 8. 1、網(wǎng)頁的基本概念1什么是Internet2什么是WWW3什么是瀏覽器4什么Http？5什么URL？6. 什么是IP、域名？7. 靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁8. 什么是網(wǎng)站、網(wǎng)頁、首頁 1.1. 什么是InternetnInternet簡單地說就是國際互聯(lián)網(wǎng)，它是一個(gè)由各種不同類型和規(guī)模的獨(dú)立運(yùn)行和管理的計(jì)算機(jī)網(wǎng)絡(luò)組成的全球范圍的計(jì)算機(jī)網(wǎng)絡(luò)，這些網(wǎng)絡(luò)通過普通電話線、高速率專用線路、衛(wèi)星、微波和光纜等通

2、訊線路連接起來的。n它為人們提供了巨大的并且還在不斷增長的信息資源和服務(wù)工具寶庫，用戶可以利用Internet提供的各種工具去獲取Internet提供的巨大信息資源任何一個(gè)地方的任意一個(gè)Internet用戶都可以從Internet中獲得任何方面的信息 1.2什么是WWW WWW 是 World Wide Web （環(huán)球信息網(wǎng)）的縮寫，也可以簡稱為 Web，中文名字為“萬維網(wǎng)”。 WWW 是 Internet 的多媒體信息查詢工具，是 Internet 上近年才發(fā)展起來的服務(wù)，也是發(fā)展最快和目前用的最廣泛的服務(wù)。通過萬維網(wǎng)，人們只要通過使用簡單的方法，就可以很迅速方便地取得豐富的信息資料。由于用

3、戶在通過 Web 瀏覽器訪問信息資源的過程中，無需再關(guān)心一些技術(shù)性的細(xì)節(jié)，而且界面非常友好，因而 Web 在Internet 上一推出就受到了熱烈的歡迎，走紅全球，并迅速得到了爆炸性的發(fā)展 1.3什么是瀏覽器什么是瀏覽器呢？瀏覽器(Browser)實(shí)際上是一個(gè)軟件程序，用于與WWW建立連接，并與之進(jìn)行通信。它可以在WWW系統(tǒng)中根據(jù)鏈接確定信息資源的位置，并將用戶感興趣的信息資源取回來，對(duì) HTML 文件進(jìn)行解釋，然后將文字圖像或者將多媒體信息還原出來。目前WWW環(huán)境中使用最多的瀏覽器主要有兩個(gè)，一個(gè)是Netscape公司的Navigator，另一個(gè)是美國Microsoft公司的 Interne

4、t Explorer，如下圖。1.4什么是http HTTP，即超文本傳輸協(xié)議，是 HyperText Transfer Protocol的縮寫。瀏覽網(wǎng)頁時(shí)在瀏覽器地址欄中輸入的URL前面都是以http:/開始的。HTTP定義了信息如何被格式化、如何被傳輸，以及在各種命令下服務(wù)器和瀏覽器所采取的響應(yīng) 1.5什么是URL URL是Uniform Resource Locator的縮寫，即統(tǒng)一資源定位器，也就是我們通常所說的網(wǎng)址，用于指明資料在互聯(lián)網(wǎng)上的取得方式與位置。URL好比Internet的門牌號(hào)碼，它可以幫助用戶在Internet的信息海洋中定位到所需要的資料。 其格式為 ： 通訊協(xié)議：/

5、服務(wù)器地址：通訊端口/路徑/文件名 例如：http:/ 意思是采用http協(xié)議從名為 的服務(wù)器上的目錄 fubao_product中獲得文件list.htm 1.6什么是IP、域名 IP地址是Internet上主機(jī)地址的數(shù)字形式，能唯一確定Internet上每臺(tái)計(jì)算機(jī)的位置。由32位的二進(jìn)制數(shù)組成，將32位數(shù)中每8位為一組，用十進(jìn)制形式表示，利用句號(hào)分割各部分。例如12和192168.0.1等。 為了解決用戶記憶IP地址的 困難，因特網(wǎng)提供了一種域名系統(tǒng)DNS(Domain Name System)，為主機(jī)分配一個(gè)由多個(gè)部分組成的域名。域名和IP地址是一一對(duì)應(yīng)的，域名易于

6、記憶，用的更普遍。當(dāng)用戶要和Internet上每臺(tái)計(jì)算機(jī)交換信息時(shí)，只需使用域名，網(wǎng)絡(luò)會(huì)自動(dòng)轉(zhuǎn)成IP地址，找到該臺(tái)計(jì)算機(jī)。 1.7靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁 根據(jù)網(wǎng)頁是否含有程序代碼，可以將網(wǎng)頁簡單地劃分為靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁，前者使用的是靜態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)，也就是說，網(wǎng)頁主要使用HTML（Hypertext Markup Language，超文本標(biāo)記語言）來完成；而后者使用了包括ASP、JSP或PHP在內(nèi)的動(dòng)態(tài)網(wǎng)頁開發(fā)技術(shù) 。1.8什么是網(wǎng)站、網(wǎng)頁、首頁網(wǎng)站網(wǎng)站：通常把一系列邏輯上可以視為一個(gè)整體的網(wǎng)頁集合叫做網(wǎng)站。 對(duì)于小型網(wǎng)站，是指帶有一定主題的多個(gè)網(wǎng)頁集合；對(duì)于大型網(wǎng)站還包含數(shù)據(jù)庫和服務(wù)器端應(yīng)用程

7、序等。網(wǎng)頁：網(wǎng)頁：網(wǎng)頁的學(xué)名稱作HTML文件，是一種可以在互聯(lián)網(wǎng)上傳輸，并被瀏覽器認(rèn)識(shí)和翻譯成頁面顯示出來的文件。HTML的意思是“Hypertext Markup Language”，中文翻譯為“超文本標(biāo)記語言”?！俺谋尽本褪侵疙撁鎯?nèi)可以包含圖片、鏈接甚至音樂、程序等非文字的元素。主頁主頁：一個(gè)網(wǎng)站，首先進(jìn)入的是主頁。網(wǎng)站的主頁就是我們通常所說的首頁。它既是一個(gè)單獨(dú)的網(wǎng)頁，像一般網(wǎng)頁一樣，可以存放各種信息，又是一個(gè)特殊的網(wǎng)頁，它是整個(gè)網(wǎng)站文件的起始點(diǎn)和匯總點(diǎn)，是訪問者瀏覽網(wǎng)站開始的地方。在主頁中，應(yīng)該給出這一網(wǎng)站的概述，網(wǎng)站所包含的主要內(nèi)容、各種信息的向?qū)?。訪問者在看到主頁后，便對(duì)這個(gè)網(wǎng)站

8、有一個(gè)大致的了解，以確定要哪方面的內(nèi)容，知道如何去查找 。2、 HTML基礎(chǔ)知識(shí) 2.1 HTML概念 2.2 語法結(jié)構(gòu) 2.3 格式修飾標(biāo)記 2.4 創(chuàng)建HTML文件2.1HTML概念 HTML是“Hypertext Marked Language”的縮寫，即超文本標(biāo)記語言，是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)，需要通過WEB瀏覽器顯示出效果。 所謂超文本，是因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、影視等內(nèi)容，HTML并不是一種程序語言，它只是一種排版網(wǎng)頁中資料顯示的結(jié)構(gòu)語言，易學(xué)易懂，非常簡單。 2.2HTML語法結(jié)構(gòu)：這是

9、聲明HTML文件的語法格式。每一個(gè)HTML文件都必須以此標(biāo)記來聲明。：聲明文件頭的語法格式。在該標(biāo)記內(nèi)的所有內(nèi)容都屬于網(wǎng)頁文件的文件頭，不會(huì)出現(xiàn)在網(wǎng)頁內(nèi)。：聲明文件標(biāo)題。在該標(biāo)記內(nèi)的內(nèi)容，都將出現(xiàn)在網(wǎng)頁最上面的標(biāo)題欄中。：聲明文件主體。該標(biāo)記中的內(nèi)容是網(wǎng)頁文件的主體，會(huì)被顯示在瀏覽器的窗口中。幾乎每一種HTML語言的語法都是以開頭，以結(jié)束。在編輯HTML語言的過程中，也可以使用注釋，其語法格式為：，中間的內(nèi)容只是解釋說明，而不會(huì)被瀏覽器編譯和顯示 。2.3格式修飾標(biāo)記 HTML中有許多格式標(biāo)記，常用的有居中、換行、色彩、大小、字體、鏈接等，利用它們可以有效地控制內(nèi)容的顯示。由于格式標(biāo)記多而復(fù)雜

10、，一般很難完全記憶。Dreamweaver等開發(fā)工具能夠自動(dòng)添加格式標(biāo)記，所以一般只需要了解這些格式標(biāo)記都是什么含義就可以了。 HTML的標(biāo)簽分單標(biāo)簽和成對(duì)標(biāo)簽兩種。成對(duì)標(biāo)簽是由首標(biāo)簽 和尾標(biāo)簽組成的，成對(duì)標(biāo)簽的作用域只作用于這對(duì)標(biāo)簽中的文檔。單獨(dú)標(biāo)簽的格式，單獨(dú)標(biāo)簽在相應(yīng)的位置插入元素就可以了。 大多數(shù)標(biāo)簽都有自己的一些屬性, 屬性要寫在始標(biāo)簽內(nèi)，屬性用于進(jìn)一步改變顯示的效果, 各屬性之間無先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)值，其格式如下： 要設(shè)置的內(nèi)容 作為一般的原則，大多數(shù)屬性值不用加雙引號(hào)。但是如果包含空格、號(hào)，號(hào)等特殊字符的屬性值必須加入雙引號(hào)。為了養(yǎng)成良好的習(xí)慣，提倡

11、全部對(duì)屬性值加雙引號(hào)。如：要設(shè)置字體的文本內(nèi)容2.4創(chuàng)建HTML文件 創(chuàng)建HTML文件十分簡單，在普通的Windows記事本（如圖一）、寫字板中都可以進(jìn)行編輯。目前，有許多圖形化的網(wǎng)頁開發(fā)工具，如Dreamweaver（如圖二）、FrontPage等。這些開發(fā)工具能夠采用“所見即所得”的方法，直接處理網(wǎng)頁，而不需要編寫繁瑣的標(biāo)記，這使得用戶在沒有HTML語言基礎(chǔ)的情況下，照樣可以編寫網(wǎng)頁。但這些工具在自動(dòng)生成網(wǎng)頁時(shí)，往往會(huì)產(chǎn)生一些垃圾代碼，從而降低了網(wǎng)頁的效率 。3、 了解Dreamweaver 83.1 Dreamweaver 8的功能3.2 Dreamweaver 8的新增功能3.1 Dr

12、eamweaver 8的功能 Macromedia Dreamweaver 8 是一款專業(yè)的 HTML 編輯器，用于對(duì) Web 站點(diǎn)、Web 頁和 Web 應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。無論用戶愿意享受手工編寫 HTML 代碼時(shí)的駕馭感還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver 都會(huì)為用戶提供有用的工具，使用戶擁有更加完美的 Web 創(chuàng)作體驗(yàn)。 利用 Dreamweaver 8 中的可視化編輯功能，用戶可以快速地創(chuàng)建頁面而無需編寫任何代碼。用戶可以查看所有站點(diǎn)元素或資源并將它們從易于使用的面板直接拖到文檔中。用戶可以在 Macromedia Fireworks 或其他圖形應(yīng)用程序中

13、創(chuàng)建和編輯圖像，然后將它們直接導(dǎo)入 Dreamweaver，或者添加 Macromedia Flash 對(duì)象，從而優(yōu)化用戶的開發(fā)工作流程 。3.2 Dreamweaver 8的新增功能 Dreamweaver 8 包含了許多新增的功能，這些新增功能改善了軟件的易用性，并使您無論處于設(shè)計(jì)環(huán)境還是編碼環(huán)境都可以方便地制作頁面。Dreamweaver 使復(fù)雜的技術(shù)變得簡單而方便，以幫助您達(dá)到事半功倍的效果 。縮放： 使用縮放可以更好地控制設(shè)計(jì)。放大并檢查圖像，或使用復(fù)雜的嵌套表格布局?？s小可預(yù)覽頁面的顯示方式。 輔助線： 使用輔助線來測(cè)量頁面布局，將頁面布局和頁面模型加以比較，精度可達(dá)至像素級(jí)別?？?/p>

14、視化反饋有助于準(zhǔn)確地測(cè)量距離，并且支持智能靠齊。新的標(biāo)準(zhǔn) CSS 面板： 可以通過新的標(biāo)準(zhǔn) CSS 面板集中學(xué)習(xí)、了解和使用以可視化方式應(yīng)用于頁面的 CSS 樣式。全部 CSS 功能已合并到一個(gè)面板集合中，并已得到增強(qiáng)，可以更加輕松、更有效率地使用 CSS 樣式。使用新的界面可以更方便地看到應(yīng)用于具體元素的樣式層疊，從而能夠輕松地確定在何處定義了屬性。屬性網(wǎng)格允許進(jìn)行快速編輯。CSS 布局可視化： 在設(shè)計(jì)時(shí)應(yīng)用可視化助理來描畫 CSS 布局邊框或?yàn)?CSS 布局加上顏色。應(yīng)用可視化助理可揭示出復(fù)雜的嵌套方案，并改善所選內(nèi)容。單擊 CSS 布局可看到十分有用的工具提示，這些提示有助于了解設(shè)計(jì)的控

15、制元素。請(qǐng)參見使用 CSS 對(duì)頁進(jìn)行布局。代碼折疊： 通過隱藏和展開代碼塊，重點(diǎn)顯示您想要查看的代碼?！熬幋a”工具欄： 新的“編碼”工具欄在“代碼”視圖一側(cè)的溝槽欄中提供了用于常見編碼功能的按鈕。后臺(tái)文件傳輸： 在 Dreamweaver 8 將文件上載到服務(wù)器時(shí)繼續(xù)工作。Flash 視頻： 快速便捷地將 Flash 視頻文件插入 Web 頁Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主講人主講人 第二講第二講 走進(jìn)走進(jìn)Dreamweaver 8Dreamweaver 8 1、啟動(dòng)與退出 2、工作界面 3、創(chuàng)建簡單頁面 1、啟動(dòng)與退出1啟動(dòng)2退出3.打開網(wǎng)頁文檔4.關(guān)閉網(wǎng)頁

16、文檔1.1. 啟動(dòng) 在Windows窗口中執(zhí)行命令執(zhí)行【開始】/【所有程序】/【Macromedia】/【Macromedia Dreamweaver 8】命令即可啟動(dòng)Macromedia Dreamweaver 8程序，如下圖所示。 1.2退出 Dreamweaver 8程序常用的退出方法有如下四種。單擊Dreamweaver 8窗口右上角的關(guān)閉按鈕。單擊Dreamweaver 8窗口左上角的圖標(biāo)，在打開的下拉菜單中執(zhí)行【關(guān)閉】命令。在Dreamweaver 8窗口中執(zhí)行【文檔】/【退出】命令。當(dāng)當(dāng)前活動(dòng)窗口為Dreamweaver 8時(shí)，按Alt+ F4 組合鍵也可退出Dreamweave

17、r 8。 1.3打開網(wǎng)頁文檔執(zhí)行【文件】/【打開】命令，打開【打開】對(duì)話框 ，找到需要打開的網(wǎng)頁文檔，單擊選中，然后單擊“打開”按鈕，即可打開 。1.4關(guān)閉網(wǎng)頁文檔編輯完文檔后，可以單擊文檔工具欄上的按鈕 ，關(guān)閉文檔。若文檔有改動(dòng)則彈出如圖所示的提示框，詢問是否保存改動(dòng)。2、 工作界面 2.1 窗口介紹 2.2 面板組 2.3 重組面板 2.4 首選參數(shù)設(shè)置2.1窗口介紹 在默認(rèn)狀態(tài)下，Dreamweaver 8窗口主要有標(biāo)題欄、菜單欄、文檔工具欄、編輯區(qū)、【屬性】面板、插入欄、面板組、狀態(tài)欄等組成，如上圖所示。標(biāo)題欄標(biāo)題欄：顯示當(dāng)前正在編輯的文檔的目錄和名稱。菜單欄菜單欄：菜單欄位于標(biāo)題欄的

18、下面，有10個(gè)菜單組成，包含了幾乎所有的Dreamweaver8命令。文檔工具欄文檔工具欄：文檔工具欄中包含按鈕，使用這些按鈕可以在文檔的不同視圖間快，還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)，如圖所示。插入欄插入欄：包含用于創(chuàng)建和插入對(duì)象（如表格、層和圖像）的按鈕。當(dāng)鼠標(biāo)指針滾動(dòng)到一個(gè)按鈕上時(shí)，會(huì)出現(xiàn)一個(gè)工具提示，其中含有該按鈕的名稱，如下圖所示。插入欄 插入欄上的插入命令按鈕被分成了如下七個(gè)常用類別：【常用】、【布局】、【表單】、【文本】、【HTML】、【服務(wù)器代碼】、【應(yīng)用程序】、【Flash 元素】、【收藏】。狀態(tài)欄狀態(tài)欄：編輯窗口底部的狀態(tài)欄提供與用戶正創(chuàng)

19、建的文檔有關(guān)的其它信息，如下圖所示。編輯區(qū)編輯區(qū)：主要用來設(shè)計(jì)頁面和編輯代碼的工作區(qū)域。它有三種視圖模式：設(shè)計(jì)視圖、代碼視圖、拆分視圖?！緦傩詫傩浴棵姘迕姘澹簩?duì)當(dāng)前編輯區(qū)選中的對(duì)象進(jìn)行屬性設(shè)置，如設(shè)置文本的字體、大小、顏色。2.2面板組面板組是組合在一個(gè)標(biāo)題下面的相關(guān)面板的集合。面板組中選定的面板顯示為一個(gè)選項(xiàng)卡。每個(gè)面板組都可以展開或折疊，并且可以和其它面板組?？吭谝黄鸹蛉∠？?。默認(rèn)情況下，Dreamweaver 8的都是把幾個(gè)功能相近的面板集合成一個(gè)面板組，集中管理的，但這些面板不是固定的，可以自由更改，因此用戶可以將自己常用到的幾個(gè)面板集合到一個(gè)面板組中，方便使用 。2.3變更面板默認(rèn)

20、情況下，Dreamweaver 8都是將幾個(gè)功能相近的面板集合成一個(gè)面板組，以進(jìn)行集中管理，但這些面板不是固定的，可以自由更改，因此用戶可以將自己常用到的幾個(gè)面板集合到一個(gè)面板組中，以便使用 。例如，將【層】移到【應(yīng)用程序】面板組的操作如下圖所示。 2.4首選參數(shù)設(shè)置 執(zhí)行【編輯】/【首選參數(shù)】命令，打開【首選參數(shù)】對(duì)話框 ，通過設(shè)置這些參數(shù)，可以尋找一個(gè)最適合個(gè)人習(xí)慣的配置。3、 創(chuàng)建簡單頁面 3.1 創(chuàng)建頁面 3.2 保存頁面 3.3 設(shè)置頁面屬性3.1創(chuàng)建頁面 啟動(dòng)Dreamweaver 8程序后，執(zhí)行【文件】/【新建】命令 ，打開【新建文檔】對(duì)話框，在【常規(guī)】選項(xiàng)卡的【類別】列表選擇“

21、基本頁”，在【基本頁】列表選擇“HTML”項(xiàng)，然后單擊“創(chuàng)建”按鈕即可，如下圖。 在窗口中執(zhí)行【文件】/【保存】 ，打開【另存為】對(duì)話框，在【保存在】項(xiàng)選擇目錄，然后在【文件名】后面輸入需要保存的文件名“index.html”，如圖所示。單擊“保存”按鈕后，即可完成保存文檔 。3.2保存頁面3.2設(shè)置頁面屬性 在【屬性】面板中單擊“頁面屬性”按鈕 ，打開打開【頁面屬性】對(duì)話框 ，然后進(jìn)行相應(yīng)的設(shè)置，如圖所示。在【頁面屬性】對(duì)話框中可以設(shè)置網(wǎng)頁的外觀、鏈接、標(biāo)題、標(biāo)題/編碼、跟蹤圖像共五個(gè)方面的內(nèi)容。外觀：可以設(shè)置當(dāng)前頁面的字體、字號(hào)、背景色和4個(gè)邊距等。鏈接：設(shè)置網(wǎng)頁中的鏈接屬性。標(biāo)題效果：設(shè)

22、置1-6級(jí)標(biāo)題的字號(hào)、顏色。標(biāo)簽/編碼：設(shè)置網(wǎng)頁的標(biāo)題以及網(wǎng)頁在使用中的語言選擇，一般都選擇編碼為簡體中文（GB2312)。跟蹤圖像：在設(shè)計(jì)網(wǎng)頁時(shí)，用于做參考的網(wǎng)頁圖像，單擊按鈕可以載入規(guī)劃好的圖片。Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主講人主講人 第三講第三講 站點(diǎn)管理站點(diǎn)管理 1、定義站點(diǎn) 2、管理站點(diǎn) 3、用站點(diǎn)管理文件. 1、定義站點(diǎn)1站點(diǎn)的概述2定義站點(diǎn)1.1. 站點(diǎn)的概述在 Dreamweaver 8中建立站點(diǎn)，是進(jìn)行網(wǎng)站開發(fā)的一個(gè)關(guān)鍵前提步驟。這里所講的定義站點(diǎn)，其實(shí)就是在 Dreamweaver 8中定義一個(gè)文件夾目錄，用于存放頁面文件和素材、策劃網(wǎng)

23、站結(jié)構(gòu)、部署開發(fā)環(huán)境。定義站點(diǎn)是為了更好地利用【文件】面板對(duì)站點(diǎn)文件進(jìn)行管理，也是為減少一些錯(cuò)誤的出現(xiàn)，如路徑出錯(cuò)，鏈接出錯(cuò)等等。許多初學(xué)者開始做網(wǎng)頁時(shí)，就只知道做單一網(wǎng)頁，對(duì)文件的條理性、結(jié)構(gòu)性不加以管理，沒有對(duì)文件進(jìn)行分類管理，使整個(gè)站點(diǎn)結(jié)構(gòu)顯得很亂；所以在開發(fā)之前應(yīng)該認(rèn)真策劃好站點(diǎn)結(jié)構(gòu)。1.2定義站點(diǎn)執(zhí)行【站點(diǎn)】/【新建站點(diǎn)】命令，然后依次操作。2、 管理站點(diǎn) 2.1 打開站點(diǎn) 2.2 管理站點(diǎn) 2.3 刪除站點(diǎn) 2.4 復(fù)制站點(diǎn)2.1打開站點(diǎn) 啟動(dòng)Dreamweaver 8 后，在窗口中執(zhí)行【窗口】/【文件】命令，打開【文件】面板。在【文件】面板中的下拉列表中，選擇要打開的站點(diǎn)“個(gè)人站

24、點(diǎn)”，即可打開站點(diǎn)。 2.2管理站點(diǎn)如果站點(diǎn)設(shè)置需要改動(dòng)，可以通過編輯站點(diǎn)來完成，在窗口中執(zhí)行【站點(diǎn)】/【管理站點(diǎn)】命令打開【管理站點(diǎn)】對(duì)話框，在左側(cè)的站點(diǎn)列表中選中需要編輯站點(diǎn)，如圖1所示，然后單擊 按鈕，打開站點(diǎn)定義對(duì)話框，如圖2所示，再進(jìn)行重新編輯。2.3刪除站點(diǎn) 窗口中執(zhí)行【站點(diǎn)】/【管理站點(diǎn)】命令，打開【管理站點(diǎn)】對(duì)話框，在【管理站點(diǎn)】對(duì)話框的站點(diǎn)列表中選中“我的相冊(cè)”，直接單擊右側(cè)的“刪除”按鈕即可。2.4復(fù)制站點(diǎn) 打開【管理站點(diǎn)】對(duì)話框，選中要復(fù)制的站點(diǎn)，然后單擊“復(fù)制” 按鈕，如圖1所示，那么在【管理站點(diǎn)】對(duì)話框的站點(diǎn)列表中就復(fù)制了一個(gè)該站點(diǎn)的副本，如圖2所示。3、 用站點(diǎn)管理

25、文件 3.1 創(chuàng)建文件（夾） 3.2 移動(dòng)文件（夾） 3.3 復(fù)制文件 3.4 刪除文件3.1創(chuàng)建文件（夾）創(chuàng)建：在站點(diǎn)內(nèi)的目錄下單擊鼠標(biāo)右鍵，打開右鍵快捷菜單，在菜單中選擇【新建文件】命令或者【新建文件夾】命令，如圖所示。3.2移動(dòng)文件（夾）移動(dòng)：單擊選中需要移動(dòng)的文件，拖曳到目標(biāo)位置，如圖1所示，然后釋放鼠標(biāo)左鍵，彈出【更新文件】對(duì)話框，如圖2所示，單擊“更新”按鈕，系統(tǒng)會(huì)自動(dòng)更新文件中的鏈接 。3.3復(fù)制文件 右鍵單擊要復(fù)制的文件，在快捷菜單中執(zhí)行【編輯】/【復(fù)制】命令，如右圖所示，在該文件的下方增加一個(gè)副本 。3.4刪除文件 站點(diǎn)目錄下，右擊要?jiǎng)h除的文件，然后執(zhí)行【編輯】/【刪除】命令

26、即可，如下圖所示。 Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主講人主講人 第四講第四講 用表格設(shè)計(jì)頁面用表格設(shè)計(jì)頁面 1、表格插入 2、表格的設(shè)置 3、用表格設(shè)計(jì)頁面 1、表格的插入 1表格概述 2表格結(jié)構(gòu) 3插入表格1.1. 表格概述 表格是網(wǎng)頁設(shè)計(jì)制作中不可缺少的元素，它不僅用于頁面上的數(shù)據(jù)顯示，還可以用來設(shè)計(jì)頁面框架。 使用表格可以將圖片、文本、數(shù)據(jù)和表單等元素有序地顯示在頁面上，使得頁面看起來簡潔明了、編排整齊。用表格設(shè)計(jì)的頁面，框架布局清晰，在不同平臺(tái)、不同分辨率的瀏覽器里都能保持其原有的布局，并且在不同的瀏覽器平臺(tái)都具有較好的兼容性，所以表格是網(wǎng)頁中最常用的

27、排版方式之一。1.2. 表格結(jié)構(gòu)表格是由一個(gè)或多個(gè)單元格組成的集合。表格中橫向的一排稱之為行，縱向的一排稱之為列，中間的單個(gè)小方塊稱之為單元格。單元格與單元格之間的距離叫做單元格間距，單元格內(nèi)容到單元格邊框之間的距離叫邊距。每個(gè)單元格的四周稱之為單元格邊框，整個(gè)表格的四周稱之為表格邊框，下圖展示了表格各部分的對(duì)應(yīng)關(guān)系。1.3. 插入表格 在【常用】插入欄中單擊表格按鈕 ，打開【表格】對(duì)話框 ，設(shè)置【行數(shù)】、【列數(shù)】、【表格寬度】等參數(shù)后單擊“確定”按鈕即可 。2、表格的設(shè)置 1表格選取 2設(shè)置表格屬性 3拆分表格 4. 合并表格2.1. 表格的選取 表格的選取包括整表的選取、單元格的選取、表格

28、行與列的選取。整表的選取整表的選?。褐恍枰獙⑹髽?biāo)指針移到表格的邊框，當(dāng)鼠標(biāo)指針右下角出現(xiàn)圖標(biāo)時(shí)單擊鼠標(biāo)左鍵即可選中整個(gè)表格；或者先在表格內(nèi)任意處單擊一次鼠標(biāo)左鍵，然后在標(biāo)簽選擇器上單擊“”標(biāo)簽，也可選中這個(gè)表格。單元格的選取單元格的選?。喊醋trl鍵，然后單擊某一單元格，即可選中該單元格；或者先在單元格內(nèi)單擊一次鼠標(biāo)左鍵，然后單擊狀態(tài)欄上的“”標(biāo)簽，也可選中該單元格。表格行與列的選取表格行與列的選?。簩⑹髽?biāo)指針移到某一行的左側(cè)，當(dāng)鼠標(biāo)指針變成形狀時(shí)，單擊鼠標(biāo)左鍵，即可選中該行；將鼠標(biāo)指針移到某一列的頂部，當(dāng)鼠標(biāo)指針變成形狀時(shí)，單擊鼠標(biāo)左鍵，即可選中該列。 2.2. 設(shè)置表格的屬性先選中表格，

29、然后在【屬性】面板中設(shè)置整個(gè)表格的邊框、間距、背景顏色、邊框顏色等，也可以針對(duì)單個(gè)、某一行、某一列單元格分別進(jìn)行設(shè)置 。2.3. 拆分表格 拆分拆分：單擊要拆分的單元格，在【屬性】面板中單擊拆分單元格按鈕 ，在彈出的【拆分單元格】對(duì)話框中設(shè)置拆分行或列，并設(shè)置要拆分成的行數(shù)或列數(shù)，然后單擊按鈕即可將單元格拆分成多行或多列 ，如下圖所示。2.3. 合并表格 選中需要合并的多個(gè)連續(xù)的單元格后，在【屬性】面板中單擊合并單元格按鈕 ，將多個(gè)單元格合并，如下圖所示。3、用表格設(shè)計(jì)頁面 1嵌套表格 2. 表格化的頁面結(jié)構(gòu) 3用表格規(guī)劃頁面結(jié)構(gòu) 4. 用表格設(shè)計(jì)頁面3.1. 嵌套表格 簡單地說，嵌套表格就是

30、一個(gè)表格中含有另一個(gè)表格。引入嵌套表格有3個(gè)方面的原因。網(wǎng)頁的排版有時(shí)會(huì)很復(fù)雜，在外部需要一個(gè)表格來控制總體布局，如果內(nèi)部排版的細(xì)節(jié)也通過總表格來實(shí)現(xiàn)，容易引起行高列寬等的沖突，給排版工作帶來困難。其次，瀏覽器在解析網(wǎng)頁的時(shí)候，是將整個(gè)網(wǎng)頁下載完畢之后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，瀏覽者需要等待很長時(shí)間才能看到網(wǎng)頁內(nèi)容。在嵌套表格中，可以利用表格的背景圖像、邊框、間距和邊距等屬性得到漂亮的邊框效果，制作出精美的網(wǎng)頁。 創(chuàng)建嵌套表格的操作方法很簡單，先插入總表格，然后將鼠標(biāo)光標(biāo)置于要插入嵌套表格的單元格中，繼續(xù)插入表格即可。3.2. 表格化的頁面結(jié)構(gòu) 一個(gè)頁面的主要骨架結(jié)構(gòu)，大體可分

31、為如下幾部分：Container（所有內(nèi)容）、Logo（標(biāo)志）、Header（頭部）、Navigation（導(dǎo)航欄）、Main Content（主要內(nèi)容）、Sidebar（側(cè)欄）、Footer（頁腳），如右圖所示。這些部分都可以看成由一個(gè)個(gè)表格組成的。Container：指頁面包含的所有內(nèi)容，所有的Web頁面都用一個(gè)Container，主要為了包含一些頁面元素。Header：網(wǎng)頁的頭部，嚴(yán)格意義上來說，Header并不是一個(gè)特定的元素，它更多用于放置Logo、導(dǎo)航欄等常見元素。Logo：Logo是一個(gè)專用標(biāo)志，用于表明網(wǎng)站的身份和品牌。一般將Logo放在Header的左上角，使訪問者第一眼就能

32、看到。 Navigation：導(dǎo)航欄部分。頁面導(dǎo)航是最重要的元素之一，訪問者一般都使用它來訪問網(wǎng)站中的其他內(nèi)容，為了便于用戶使用，容易找到，就放在頂端附近。Main Content：主要內(nèi)容部分。這是網(wǎng)站的核心，它是Web頁面的焦點(diǎn)。Sidebar：側(cè)欄部分。主要放置一些次要內(nèi)容，如廣告、站點(diǎn)搜索、訂閱鏈接、聯(lián)系方法等，這個(gè)內(nèi)容不是必需的。一般將Sidebar放在頁面右側(cè)，也可以將其放在左側(cè)或兩邊，只要不干擾主要內(nèi)容的瀏覽就行，Sidebar往往是用縱向?qū)Ш?。Footer：頁腳部分。Web頁面的尾部總會(huì)有一個(gè)頁腳，這是Web頁面的結(jié)束部分。和Header一樣，F(xiàn)ooter也不是一個(gè)特定的元素。

33、在頁腳里一般包含版權(quán)、法律聲明以及主要的聯(lián)系方式，也可以包含一些重要的鏈接。3.3. 用表格規(guī)劃頁面結(jié)構(gòu) 在設(shè)計(jì)頁面時(shí)，為了整體把握頁面結(jié)構(gòu)，可以先用表格將頁面的主體框架勾勒出來，然后再針對(duì)每個(gè)部分進(jìn)行內(nèi)容的填充，如下圖所示。具體操作參考范例解析4.3.2。3.4. 用表格設(shè)計(jì)頁面 頁面的框架設(shè)計(jì)好之后就可以填充相應(yīng)的內(nèi)容了，如下圖所示，具體操作參見范例解析4.3.3。Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主講人主講人 第六講第六講 圖像處理圖像處理 1、圖像的插入 2、設(shè)置圖像格式 3、插入圖像對(duì)象. 1、圖像的插入1常用的圖像格式2圖像插入3圖像的上傳保存1.1.

34、 常用的圖像格式 在網(wǎng)頁中經(jīng)常使用的圖像是JPG和GIF圖，還有少量的PNG圖。JPG格式：全稱是JPEG，即聯(lián)合圖像專家組格式，是用于攝影或連續(xù)色調(diào)圖像的高級(jí)格式，這是因?yàn)镴PG圖可以包含幾百萬種顏色。隨著JPG文件品質(zhì)的提高，文件的大小也將隨之增加。通常通過壓縮JPG文件在圖像的品質(zhì)和文件大小之間達(dá)到良好的平衡。GIG格式：即圖形交換模式。此類格式形成一種壓縮的8位圖像文件。正因?yàn)樗墙?jīng)過壓縮的，而且又是8位的，所以這種格式的文件大多用于網(wǎng)絡(luò)傳輸上，速度要比傳輸其它格式的圖像文件快得多，它的缺點(diǎn)就是不能用于存儲(chǔ)真彩的圖像文件。PNG格式：PNG(Portable Network Graph

35、ic Format，便攜式網(wǎng)絡(luò)圖象格式)是W3C 組織在20世紀(jì)90年代中期開始開發(fā)的一種無損位圖文件存儲(chǔ)格式，是一種輕便、無法律障礙、壓縮性能好且規(guī)范好的一個(gè)標(biāo)準(zhǔn)，其目的是企圖替代GIF和TIFF，同時(shí)增加一些它們文件格式所不具備的特性。1.2插入圖像執(zhí)行【插入】/【圖像】命令，打開【選擇圖像源文件】對(duì)話框，在【查找范圍】下拉列表中找到圖片所在目錄，單擊選中，然后單擊“確定”按鈕即可，如下圖所示。1.3圖像的上傳保存在創(chuàng)建站點(diǎn)的時(shí)候，一般都會(huì)在根目錄下創(chuàng)建一個(gè)images 文件夾，用于專門的存放圖片文件。若插入的圖片與網(wǎng)頁文件不在相同的根目錄下，系統(tǒng)會(huì)提示用戶復(fù)制圖片到根目錄下。2、 設(shè)置圖

36、像格式 1. 圖像格式 2. 具體設(shè)置方法 3圖像編輯區(qū) 4. 編輯圖像2.1圖像格式 圖像的格式主要有下面幾個(gè)方面：圖像的格式主要有下面幾個(gè)方面：圖像大小更改：圖像大小更改：更改圖像大小有兩種方法，方法一：在【屬性】面板中設(shè)置【高】文本框和【寬】文本框；方法二：直接拖拉圖像邊框的控點(diǎn)。更給圖像的大小后，可以直接按按鈕，將圖片恢復(fù)到初始大小。對(duì)齊方式：對(duì)齊方式：圖像的對(duì)齊方式有3種：左對(duì)齊、居中對(duì)齊、右對(duì)齊。默認(rèn)的對(duì)棄方式是：左對(duì)齊。圖文混排：圖文混排：在圖文混排的頁面中，可以通過設(shè)置【垂直邊距】文本框和【水平邊距】文本框來設(shè)置圖片和四周文本之間的間距的。在【對(duì)齊】列表中列舉了多種圖文混排的對(duì)

37、齊方式。2.2具體設(shè)置方法 改變大?。?設(shè)置對(duì)齊： 設(shè)置邊距： 2.3圖像編輯區(qū) 除了對(duì)圖像的格式進(jìn)行設(shè)置外，在【屬性】面板中還可以對(duì)圖像進(jìn)行編輯美化操作，如對(duì)圖像進(jìn)行編輯、裁減、亮度和對(duì)比度以及銳化等菜做，如圖所示的圖片編輯區(qū) 。2.4圖像編輯 對(duì)圖像編輯主要有下面幾個(gè)方面：亮度、對(duì)比度、銳化等，下圖列舉了亮度和對(duì)比度的設(shè)置、銳化的設(shè)置。3、 插入圖型對(duì)象 1. 圖型對(duì)象 2. 圖像占位符 3鼠標(biāo)經(jīng)過圖像 4. 導(dǎo)航條3.1圖像對(duì)象 在Dreamweaver 8中，系統(tǒng)為用戶提供了一些特殊的功能：圖像對(duì)象，如鼠標(biāo)經(jīng)過圖像、導(dǎo)航條、占位符等，如下圖所示。3.2 圖像占位符 在設(shè)計(jì)網(wǎng)頁，如果頁面

38、的框架已經(jīng)設(shè)計(jì)好了，但需要的圖像素材還沒有準(zhǔn)備齊全，此時(shí)可以插入一個(gè)指定大小的占位符，等將來圖片準(zhǔn)備好之后，再替換成圖片 。3.3 鼠標(biāo)經(jīng)過圖像 在瀏覽器中當(dāng)鼠標(biāo)經(jīng)過圖像時(shí)，該圖像發(fā)生變化，這就是鼠標(biāo)經(jīng)過圖像。它實(shí)際上是由兩個(gè)圖像組成，當(dāng)鼠標(biāo)不在圖像上時(shí)，顯示原來圖像，當(dāng)鼠標(biāo)經(jīng)過時(shí)則顯示另外一個(gè)圖像 。3.4 導(dǎo)航條 由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶操作而變化。導(dǎo)航條通常為在站點(diǎn)上的頁面和文件之間移動(dòng)提供一條簡捷的途徑。當(dāng)鼠標(biāo)移到導(dǎo)航條上時(shí)，導(dǎo)航條的文字內(nèi)容標(biāo)成圖片按鈕，擋按下鼠標(biāo)時(shí)又發(fā)生了變化，給人很新鮮的感覺。 Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主

39、講人主講人 第七講第七講 超鏈接技術(shù)超鏈接技術(shù) 1、認(rèn)識(shí)超鏈接 2、超鏈接的種類 1、認(rèn)識(shí)超鏈接1超鏈接的概念2文本超鏈接3. 更改超鏈接默認(rèn)屬性4圖像超鏈接1.1. 超鏈接的概念什么是超鏈接：所謂的超鏈接是指從一個(gè)對(duì)象指向另一個(gè)對(duì)象的鏈接關(guān)系，源對(duì)象可以是文本、圖像、按鈕等，目標(biāo)對(duì)象可以是一個(gè)頁面、一張圖片、一個(gè)文件、一個(gè)郵件地址或者一個(gè)應(yīng)用程序等等。當(dāng)鼠標(biāo)光標(biāo)移到添加了超鏈接的對(duì)象上時(shí)，光標(biāo)就變成了小手狀如圖1，在超鏈接對(duì)象上單擊后，鏈接目標(biāo)將被打開或者運(yùn)行，如圖2。在默認(rèn)狀態(tài)下，如果為文本添加了超鏈接后，那么該文本就顯示為藍(lán)色字體且?guī)в邢聞澗€，用于與普通文本區(qū)別，單擊后文本的顏色又會(huì)發(fā)生

40、改變。用戶也可以在頁面屬性里修改鏈接的顯示狀態(tài)。1.2文本超鏈接首先選中文本，在【常用】插入欄單擊插入超鏈接按鈕，打開【超級(jí)鏈接】對(duì)話框，在【文本】文本框中輸入超鏈接文本，在【鏈接】選項(xiàng)框輸入目標(biāo)網(wǎng)頁名稱或者單擊按鈕選擇目標(biāo)文件，在【目標(biāo)】選項(xiàng)框的列表中選擇打開目標(biāo)的位置，在【標(biāo)題】文本框輸入相關(guān)文本，如下圖所示 【超級(jí)鏈接】對(duì)話框中需要設(shè)置的各項(xiàng)的含義。 【文本】文本框：在頁面中顯示的帶有超鏈接的文本， 【鏈接】選項(xiàng)框：單擊超鏈接后將要跳轉(zhuǎn)到的目標(biāo)對(duì)象。 【目標(biāo)】選項(xiàng)框：目標(biāo)對(duì)象的打開位置：_bank代表在一個(gè)新的窗口中打開鏈接對(duì)象；_self表示在當(dāng)前窗口打開鏈接對(duì)象，它是系統(tǒng)的默認(rèn)值；_

41、parent和_top都表示在一個(gè)完整的窗口打開鏈接目標(biāo)。 【標(biāo)題】文本框：鼠標(biāo)光標(biāo)移到超鏈接文本上時(shí)顯示的文字 默認(rèn)情況下，帶超鏈接的文本顯示為藍(lán)色，且?guī)в邢聞澗€，用戶可以自行設(shè)置不同的顯示狀態(tài)。在【屬性】面板單擊按鈕，打開【頁面屬性】對(duì)話框，在【分類】欄單擊【鏈接】項(xiàng)，然后在右側(cè)具體的項(xiàng)目中進(jìn)行具體的設(shè)置，如下圖所示。1.3. 更改超鏈接默認(rèn)屬性1.4圖像超鏈接單擊選中一個(gè)圖片，在【屬性】面板中單擊【鏈接】文本框后的按鈕 ，如圖1，打開【選擇文件】對(duì)話框，如圖2，找到目標(biāo)文件“Description001.html”，然后單擊“確定”按鈕 ，為圖像創(chuàng)建超鏈接完成，最終的【屬性】面板顯示如圖

42、3所示 。2、超鏈接的種類 1按路徑分類 2按性質(zhì)分類 3. 錨記鏈接 4熱點(diǎn)鏈接 5. 電子郵件鏈接2.1按路徑分類 根據(jù)鏈接對(duì)象的路徑不同，可以分為：內(nèi)部鏈接、外部鏈接和錨記鏈接。 內(nèi)部鏈接內(nèi)部鏈接：鏈接到當(dāng)前網(wǎng)站內(nèi)的其他網(wǎng)頁，上一節(jié)所列舉的兩個(gè)例子都是內(nèi)部鏈接。 外部鏈接外部鏈接：鏈接到網(wǎng)站外的其他網(wǎng)頁，在【鏈接】文本框輸入完整的地址，如鏈接到搜狐網(wǎng)站首頁，則要輸入“http:/”。 錨記鏈接錨記鏈接：鏈接到當(dāng)前打開的網(wǎng)頁中某個(gè)指定位置。 根據(jù)鏈接對(duì)象的性質(zhì)不同，鏈接又可分為：文本鏈接、圖像鏈接、電子郵件鏈接、多媒體文件鏈接和空鏈接等。其中的文本鏈接和圖像鏈接是大家比較常用的鏈接，需要特

43、別說明一點(diǎn)的是圖像鏈接的一個(gè)特例：熱點(diǎn)鏈接。熱點(diǎn)鏈接熱點(diǎn)鏈接：鏈接指向一張圖片的某一部分。電子郵件鏈接電子郵件鏈接：鏈接指向一個(gè)E-mail地址。多媒體文件鏈接多媒體文件鏈接：鏈接指向一個(gè)多媒體文件。 空鏈接空鏈接：鏈接不指向任何目標(biāo)文件，一般用“#”代替。2.2按性質(zhì)分類2.3錨記鏈接 通過建立錨記鏈接，直接跳轉(zhuǎn)到指定的位置。 2.4熱點(diǎn)鏈接 熱點(diǎn)鏈接又叫圖像映射，它是指將一個(gè)圖片劃成多個(gè)區(qū)域，每個(gè)區(qū)域鏈接到不同的對(duì)象上去。當(dāng)瀏覽者單擊映射圖時(shí)，瀏覽器會(huì)自動(dòng)判斷鼠標(biāo)單擊在哪個(gè)熱點(diǎn)上，并根據(jù)判斷跳轉(zhuǎn)到相應(yīng)的對(duì)象上去 。2.5電子郵件鏈接 電子郵件鏈接是指連接到E-mail地址的鏈接。如果用戶的

44、機(jī)器已經(jīng)安裝了Outlook、Foxmail等郵件軟件，在瀏覽網(wǎng)頁時(shí)單擊一個(gè)E-mail地址鏈接就會(huì)自動(dòng)打開一個(gè)郵件發(fā)送窗口，并且地址欄已經(jīng)自動(dòng)添加了鏈接的E-mail地址。先選中目標(biāo)，在屬性面板添加電子郵件地址。單擊含有電子郵件鏈接的目標(biāo)，自動(dòng)打開郵件軟件Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主講人主講人 第八講第八講 框架的使用框架的使用 1、認(rèn)識(shí)框架 2、設(shè)置框架屬性 3、設(shè)計(jì)框架頁面 1、認(rèn)識(shí)框架1什么是框架、框架集2應(yīng)用框架3創(chuàng)建框架集4調(diào)整框架集5命名框架6刪除框架1.1. 什么是框架n框架框架是瀏覽器窗口中的一個(gè)區(qū)域，獨(dú)立顯示一個(gè)HTML文檔內(nèi)容，這部分

45、內(nèi)容既可以與瀏覽器的其他區(qū)域內(nèi)容毫無關(guān)系，也可以與其他區(qū)域內(nèi)容合成一個(gè)整體 。n框架集框架集是一個(gè)HTML 文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個(gè)框架中初始顯示的頁面的 URL?？蚣芗募旧聿话跒g覽器中顯示的 HTML 內(nèi)容，但 noframes 部分除外；框架集文件只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息 。1.2應(yīng)用框架框架用的最多的場(chǎng)合就是導(dǎo)航，一組框架用來顯示導(dǎo)航欄，另一組框架用來顯示具體內(nèi)容，如圖所示，這是一個(gè)左右結(jié)構(gòu)的框架頁面，左側(cè)顯示的是導(dǎo)航欄，右側(cè)是主框架，用來顯示左側(cè)每個(gè)欄目的具體信息 。請(qǐng)注意，

46、框架不是文件。用戶很可能會(huì)以為當(dāng)前顯示在框架中的文檔是構(gòu)成框架的一部分，但該文檔實(shí)際上并不是框架的一部分?？蚣苁谴娣盼臋n的容器，任何一個(gè)框架都可以顯示任意一個(gè)文檔。1.3創(chuàng)建框架集 常用的創(chuàng)建框架集的方法，如下：從插入工具欄創(chuàng)建，在【布局】插入欄單擊圖標(biāo)右側(cè)的倒三角，打開下拉樣式表，單擊選擇需要的框架樣式即可。用菜單創(chuàng)建，在窗口中執(zhí)行【插入】/【HTML】/【框架】命令，然后選擇某一個(gè)框架集即可。用命令創(chuàng)建，在窗口中執(zhí)行【文件】/【新建】/【框架集】命令也可以創(chuàng)建框架集。1.4調(diào)整框架集 使用預(yù)定義插入的框架集并不一定完全符合用戶的需要，用戶可以根據(jù)自己的需要，進(jìn)一步設(shè)計(jì)自己的框架集 ，將鼠標(biāo)

47、光標(biāo)置于需要變動(dòng)的頂部框架內(nèi)，執(zhí)行【修改】/【框架頁】/【拆分左框架】命令，如右圖所示。1.5命名框架 對(duì)于框架集中每個(gè)框架的命名，用戶自己可以設(shè)置新的名稱，也可以采用默認(rèn)的框架命名，如左邊框架就叫l(wèi)eftFrame、頂部框架就叫topFrame、中間的主要內(nèi)容框架叫mainFrame、右邊的叫rightFrame、底部的叫bottomFrame。在絕大多數(shù)的情況下，我們都用系統(tǒng)默認(rèn)的命名方法，形象好記 。1.6刪除框架 框架集中的框架是不可以直接刪除的，要想刪除框架怎么辦呢？其實(shí)很簡單，只需要將要?jiǎng)h除框架的邊框拖出編輯區(qū)即可 ，將鼠標(biāo)光標(biāo)移到需要?jiǎng)h除框架的邊框上，待光標(biāo)變成雙箭頭 ，按住鼠標(biāo)

48、左鍵不放 抓圖，拖出編輯區(qū)即可，如下圖所示。2、 設(shè)置框架屬性 1. 選擇框架和框架集 2. 設(shè)置框架屬性 3. 設(shè)置框架集屬性2.1選擇框架和框架集 利用框架面板，可以很方便的選種框架和框架集。框架面板上直接單擊選中“topFrame”框架，則編輯區(qū)中被選中的框架邊框呈虛線狀態(tài)，如左圖所示 ，在框架面板中單擊框架集的邊框，可以選中整個(gè)框架集，此時(shí)編輯區(qū)的框架集邊框呈虛線狀態(tài)，如右圖所示 。2.2設(shè)置框架屬性 選種框架以后，利用屬性面板設(shè)置框架屬性。 框架【屬性】面板上的各項(xiàng)含義：【框架名稱】文本框：用于設(shè)置框架的名稱?！驹次募课谋究颍河糜谥付ㄔ诳蚣苤酗@示的網(wǎng)頁文件。【滾動(dòng)】選項(xiàng)框：指定框架

49、中是否顯示滾動(dòng)條。【不能調(diào)整大小】復(fù)選框：設(shè)置瀏覽時(shí)是否能夠改變框架的大小。【邊框顏色】文本框：為框架的邊框設(shè)置顏色?！具吔鐚挾取俊ⅰ具吔绺叨取课谋究颍河糜谠O(shè)定框架的內(nèi)容與左右、上下邊框之間的距離，以像素為單位。2.3設(shè)置框架集屬性 框架集【屬性】面板上的部分項(xiàng)含義：【框架集】：用于顯示當(dāng)前框架集的結(jié)構(gòu)，顯示所選框架集是幾行幾列。【邊框?qū)挾取课谋究颍涸O(shè)置框架集中所有邊框的寬度，單位為像素。【邊框顏色】文本框：設(shè)置框架邊框的顏色，默認(rèn)為灰色?！局怠课谋究颍涸O(shè)置選定行的高度或者選定列的寬度?！締挝弧浚河糜谠O(shè)置行或列尺寸的度量單位。3、設(shè)計(jì)框架頁面1用框架設(shè)計(jì)頁面2設(shè)置無框架內(nèi)容3.1用框架設(shè)計(jì)頁面

50、 用框架設(shè)計(jì)頁面的基本步驟：創(chuàng)建框架頁面-保存框架頁面-設(shè)置每個(gè)框架的源文件-保存預(yù)覽3.2設(shè)置無框架內(nèi)容 有些瀏覽器不支持框架技術(shù)，就不能正確瀏覽框架式網(wǎng)頁。Dreamweaver 8中允許創(chuàng)建無框架內(nèi)容，以備用戶因?yàn)g覽器問題不能正常瀏覽網(wǎng)頁時(shí)顯示提示信息 。 具體操作具體操作：執(zhí)行【修改】/【框架頁】/【編輯無框架內(nèi)容】命令，切換到無框架頁面，在無框架內(nèi)容編輯窗口輸入文本“很抱歉，您的瀏覽器不支持框架技術(shù)，無法正常顯示！”等內(nèi)容，再次執(zhí)行【修改】/【框架頁】/【編輯無框架內(nèi)容】命令，回到正常的編輯窗口。 Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主講人主講人 第九講第

51、九講 層的使用層的使用 1、層的基本知識(shí) 2、層的屬性設(shè)置 3、層的高級(jí)應(yīng)用 1、層的基本知識(shí)1層的概念2插入層3繪制層4嵌套層1.1. 層的概念 什么是層？什么是層？層是一個(gè)被準(zhǔn)確定位的HTML網(wǎng)頁元素，它和文字、圖像等一樣都是網(wǎng)頁的組成部分；層也是一個(gè)網(wǎng)頁內(nèi)容的容器，可以在層中放入任何頁面元素；同時(shí)層也可以層疊和疊加。 利用層可以控制網(wǎng)頁元素的位置，可以實(shí)現(xiàn)網(wǎng)頁對(duì)象的重疊和立體化等動(dòng)態(tài)效果，使網(wǎng)頁內(nèi)容變得更加豐富。1.2插入層 在【插入】菜單欄執(zhí)行【插入】/【布局對(duì)象】/【層】命令，即可在頁面中插入一個(gè)默認(rèn)的層，如圖所示 。 用菜單命令插入的層，采用的是程序默認(rèn)的設(shè)置，寬是200像素，高1

52、15像素。 1.3繪制層 將【常用】插入欄切換到【布局】插入欄 ，單擊繪制層按鈕 ，移動(dòng)鼠標(biāo)光標(biāo)到編輯窗口，待鼠標(biāo)光標(biāo)變成十字狀，按住鼠標(biāo)左鍵拖拉出一個(gè)16070像素的層，如圖所示。放開鼠標(biāo)即可完成，用這個(gè)方法插入的層可以控制大小 。層的大小1.4嵌套層 嵌套是將一個(gè)層包含在另一個(gè)層中。嵌套層通常用于層的疊加和組織，并且子層可隨父層一起移動(dòng)，可繼承父層的一些屬性。 首先在編輯窗口插入一個(gè)層 ，將鼠標(biāo)光標(biāo)置于父層內(nèi)，再執(zhí)行【插入】/【布局對(duì)象】/【層】命令插入一個(gè)子層，這就是嵌套層，如圖所示。子層父層2、 層的基本屬性 2.1 層的選取 2.2 層的屬性設(shè)置 2.3 移動(dòng)層 2.4 多個(gè)層操作2

53、.1層的選取 設(shè)置層屬性前要先選中層，常用的層的選擇方法有如下幾種：直接在編輯窗口中單擊層的邊框。將鼠標(biāo)光標(biāo)置于層內(nèi)，然后在單擊標(biāo)簽選擇器上的標(biāo)簽。單擊層上面的圖標(biāo) ，也可選中層。執(zhí)行【窗口】/【層】命令，打開【層】面板，在面板中單擊層名稱即可選中。 2.2層的屬性設(shè)置 選中層之后，就可以在【屬性】面板查看和設(shè)置層的屬性層【屬性】面板部分項(xiàng)的說明如下：【層編號(hào)】選項(xiàng)框：設(shè)置層名，此名稱唯一?！咀蟆课谋究?、【上】文本框：設(shè)置層相對(duì)于編輯窗口或父層左上角的位置?！緦挕课谋究?、【高】文本框：設(shè)置層的大小?！綵軸】文本框：設(shè)置層的層次順序號(hào)?！究梢娦浴窟x項(xiàng)框：設(shè)置層的可見性，包括“default”（默

54、認(rèn)）、“inherit”（繼承父層的該屬性）、“visible”（可見）、“hidden”（隱藏）4個(gè)選項(xiàng)?！绢悺窟x項(xiàng)框：添加對(duì)CSS樣式的引用?！疽绯觥窟x項(xiàng)框：（僅用于CSS層）指的是層的內(nèi)容過大時(shí)如何處理?！皏isible”：增加尺寸以顯示去不內(nèi)容；“hidden”：只能顯示層以內(nèi)的內(nèi)容；“scroll”：增加滾動(dòng)條，無論內(nèi)容是否超出；“auto”：只有內(nèi)容超出時(shí)才增加滾動(dòng)條?！炯糨嫛浚河脕碇付▽拥哪囊徊糠謨?nèi)容是可見的，“左”、“右”、“上”、“下”輸入的數(shù)值是距離層的4個(gè)邊界的像素值。2.3移動(dòng)層 移動(dòng)層：移動(dòng)鼠標(biāo)光標(biāo)到層的邊框上，待鼠標(biāo)光標(biāo)變成 狀時(shí)，按住鼠標(biāo)左鍵不放，拖動(dòng)層，到達(dá)目的

55、后放開鼠標(biāo)即可 。2.4多個(gè)層操作 多個(gè)層操作：按住Shift鍵，然后依次單擊選中三個(gè)層 ，將它們同時(shí)選中，執(zhí)行【修改】/【排列順序】/【左對(duì)齊】等命令 ，如圖所示。3、 層的高級(jí)應(yīng)用3.1 隱藏與顯示3.2 層的堆疊3.3 與表格的相互轉(zhuǎn)化3.1 隱藏與顯示層的隱藏與顯示可以通過【層】面板上的眼形 列來設(shè)定，在眼形圖標(biāo)所在的列中，單擊層名的前部，單擊一次鼠標(biāo)，就改變一種狀態(tài)。當(dāng)層名前的圖標(biāo)為 時(shí)，表示該層處于隱藏狀態(tài)；當(dāng)層名前的圖標(biāo)為 時(shí)，表示該層處于顯示狀態(tài)；如果層名前沒有任何圖標(biāo)，表示該層處于瀏覽器默認(rèn)狀態(tài)或者繼承其父層的可見性。設(shè)置層的顯示/隱藏狀態(tài)在未設(shè)置層的顯示狀態(tài)前，層名前面不顯

56、示任何圖標(biāo)，即采用默認(rèn)的顯示狀態(tài)。單擊一次，顯示 ，表示隱藏，再單擊一個(gè)，顯示 ，表示顯示，再單擊一次，圖標(biāo)消失，回到默認(rèn)狀態(tài) 。3.2 層的堆疊 在【層】面板中可以直接拖動(dòng)某層到新的位置，從而改變層的堆疊次序，如圖所示 3.3 與表格的相互轉(zhuǎn)化 文檔中先選中層，然后執(zhí)行【修改】/【轉(zhuǎn)換】/【層到表格】 ，可以將層轉(zhuǎn)化為表格。 選中整個(gè)表格，執(zhí)行【修改】/【轉(zhuǎn)換】/【表格到層】命令 ，可以將表格轉(zhuǎn)化為多個(gè)層。Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)中文版網(wǎng)頁制作基礎(chǔ)主講人主講人 第十講第十講 應(yīng)用多媒體技術(shù)應(yīng)用多媒體技術(shù) 1、插入Flash動(dòng)畫 2、插入視頻文件 3、添加音樂背景 1、插

57、入Flash動(dòng)畫1插入FLash動(dòng)畫2插入FLash文本3插入FLash按鈕1.1. 插入Flash動(dòng)畫n執(zhí)行【插入】/【媒體】/【Flash】命令 Flash【屬性】面板部分設(shè)置項(xiàng)的含義：【Flash】文本框：指定用來標(biāo)識(shí)Flash以進(jìn)行腳本撰寫的名稱?！疚募浚褐付ㄖ赶?Flash 對(duì)象文件的路徑。單擊文件夾圖標(biāo)以瀏覽到某一文件，或者鍵入路徑?！敬怪边吘唷俊ⅰ舅竭吘唷课谋究颍褐付‵lash動(dòng)畫邊框與頁面上邊界和做邊界的距離，以像素為單位?！酒焚|(zhì)】選項(xiàng)框：為定義該按鈕的 object 和 embed 標(biāo)簽設(shè)置 quality 參數(shù)。設(shè)置越高，F(xiàn)lash 內(nèi)容的顯示效果就越好?！颈壤窟x項(xiàng)框

58、：為定義按鈕或文本對(duì)象的 object 和 embed 標(biāo)簽設(shè)置 scale 參數(shù)。此參數(shù)定義 Flash 內(nèi)容在由 width 和 height 值為該 SWF 文件定義的區(qū)域內(nèi)顯示的方式。 按鈕： 單使它可以在“文檔”窗口中預(yù)覽 Flash 對(duì)象。 按鈕：將選定的對(duì)象重設(shè)為原始大小。 按鈕：打開一個(gè)對(duì)話框，可以在其中輸入附加參數(shù)。 按鈕：打開 Flash 對(duì)象對(duì)話框，可以對(duì)選定的 Flash 對(duì)象進(jìn)行編輯。1.2插入FLash文本 執(zhí)行【插入】/【媒體】/【Flash文本】命令 ，打開【插入Flash文本】對(duì)話框 ，設(shè)置完畢后，插入Flash文本的效果如下圖所示的“行業(yè)快訊”。 【插入Fl

59、ash文本】對(duì)話框部分項(xiàng)含義：【顏色】文本框：Flash文本的初始顏色?！緷L動(dòng)顏色】文本框：設(shè)置鼠標(biāo)移動(dòng)上面的變換顏色?！炬溄印课谋究颍簽檫@個(gè)Flash文本內(nèi)容添加超級(jí)鏈接對(duì)象?！灸繕?biāo)】選項(xiàng)框：指定連接的對(duì)象在頁面中打開的位置?！颈尘吧课谋究颍涸O(shè)置Flash文本的背景顏色?！玖泶鏋椤课谋究颍河脕碓O(shè)置保存此swf文件的地址和文件名。 1.3插入Flash按鈕 執(zhí)行【插入】/【媒體】/【Flash按鈕】命令，打開【插入Flash按鈕】對(duì)話框 ，先選擇按鈕樣式，再輸入文本，然后確定即可。2、 插入視頻文件 2.1 基本知識(shí) 2.2 插入WMV視頻文件 2.3 插入RM文件2.1基本知識(shí)在網(wǎng)頁中插入

60、的視頻文件格式有多種，如常見的AVI、WMV、MPEG、RM、RMVB、ASF等。但是視頻的格式不同，對(duì)應(yīng)的播放器是有區(qū)別的，如AVI、WMV、ASF一般用Windows自帶的Media Player進(jìn)行播放，RM格式的文件一般用RealPlayer播放。雖然它們播放器不同，但它們一般都是使用ActiveX控件或者插件來播放。ActiveX控件是Microsoft公司對(duì)瀏覽器能力的一個(gè)擴(kuò)展。當(dāng)瀏覽器載入一個(gè)頁面后，發(fā)現(xiàn)這個(gè)頁面含有瀏覽器不支持的ActiveX控件時(shí)，瀏覽器就提示安裝所需軟件。插件功能是針對(duì)Netscape瀏覽器而言的，通過這個(gè)插件可以使瀏覽器可以播放多種動(dòng)畫和視頻文件 。 2.