Dreamweaver CS3網(wǎng)頁設(shè)計(jì)培訓(xùn)教程_第1頁
Dreamweaver CS3網(wǎng)頁設(shè)計(jì)培訓(xùn)教程_第2頁
Dreamweaver CS3網(wǎng)頁設(shè)計(jì)培訓(xùn)教程_第3頁
Dreamweaver CS3網(wǎng)頁設(shè)計(jì)培訓(xùn)教程_第4頁
Dreamweaver CS3網(wǎng)頁設(shè)計(jì)培訓(xùn)教程_第5頁
已閱讀5頁，還剩485頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

DreamweaverCS3網(wǎng)頁設(shè)計(jì)培訓(xùn)教程第1課網(wǎng)頁制作根底本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)網(wǎng)頁制作的相關(guān)知識(shí)初識(shí)DreamweaverCS3具體要求了解網(wǎng)頁的定義及組成元素了解網(wǎng)頁常見局部的稱謂及標(biāo)準(zhǔn)了解網(wǎng)頁制作的流程了解網(wǎng)頁配色技巧了解DreamweaverCS3的工作界面掌握DreamweaverCS3的根本設(shè)置掌握DreamweaverCS3的根本操作本課導(dǎo)讀 網(wǎng)頁是構(gòu)成網(wǎng)絡(luò)的主體，是互聯(lián)網(wǎng)信息的主要載體。在學(xué)習(xí)網(wǎng)頁制作前，需要了解網(wǎng)頁制作的相關(guān)知識(shí)，以便在以后的學(xué)習(xí)及工作中運(yùn)用。另外，我們還需要認(rèn)識(shí)網(wǎng)頁制作工具DreamweaverCS3的工作界面、根本設(shè)置以及一些簡單的應(yīng)用，如啟動(dòng)與退出DreamweaverCS3、新建、保存、預(yù)覽及翻開網(wǎng)頁文檔等。1.1網(wǎng)頁制作的相關(guān)知識(shí) 網(wǎng)上沖浪已成為生活的一個(gè)重要組成局部，人們通過網(wǎng)絡(luò)來獲取知識(shí)、資源，越來越多的企事業(yè)單位也將網(wǎng)頁作為宣傳公司品牌形象的一種重要手段，網(wǎng)頁也從以前的純文本形式逐步開展到圖、文、聲音及動(dòng)畫兼有的綜合形式。下面我們就來學(xué)習(xí)網(wǎng)頁制作的各種知識(shí)。1.1網(wǎng)頁制作的相關(guān)知識(shí) 1.1.1知識(shí)講解 1.1.2典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁1.1.1知識(shí)講解 在開始學(xué)習(xí)網(wǎng)頁制作之前，應(yīng)先了解一下什么是網(wǎng)頁以及一些相關(guān)的專業(yè)術(shù)語。1.1.1知識(shí)講解 1.網(wǎng)頁的定義及組成元素 2.網(wǎng)頁常見局部的稱謂及標(biāo)準(zhǔn)3.網(wǎng)頁制作的流程 4.網(wǎng)頁配色技巧1.網(wǎng)頁的定義及組成元素 瀏覽網(wǎng)頁時(shí)在瀏覽器中看到的一個(gè)個(gè)頁面就是網(wǎng)頁，其中包括多種多樣的網(wǎng)頁元素，如文本、圖像、動(dòng)畫和音樂等。 文本是網(wǎng)頁最根本的組成元素，是網(wǎng)頁的主體局部。 圖像也是網(wǎng)頁中不可缺少的元素，是使網(wǎng)頁看起來更美觀的點(diǎn)睛之筆。動(dòng)畫在網(wǎng)頁中也有廣泛的應(yīng)用，網(wǎng)頁中常用的動(dòng)畫格式主要有兩種：一種是SWF動(dòng)畫，一種是GIF動(dòng)畫。播放音樂是為瀏覽者提供聽覺感受的最正確選擇，但因?yàn)槭芤魳钒鏅?quán)的約束，在專業(yè)網(wǎng)站中很少有使用背景音樂的，只在局部個(gè)人主頁或企業(yè)網(wǎng)站中有所使用。2.網(wǎng)頁常見局部的稱謂及標(biāo)準(zhǔn) 通常情況下，網(wǎng)頁的根本組成局部有Logo、Banner、導(dǎo)航條、超鏈接和版權(quán)信息等。3.網(wǎng)頁制作的流程 制作網(wǎng)頁不像編輯文檔那樣輕松，需要遵循一定的流程：收集資料和素材、規(guī)劃站點(diǎn)、制作網(wǎng)頁、測試站點(diǎn)、發(fā)布站點(diǎn)、更新和維護(hù)站點(diǎn)等。 1〕收集資料和素材 2〕規(guī)劃站點(diǎn) 3〕制作網(wǎng)頁 4〕測試站點(diǎn) 5〕發(fā)布站點(diǎn) 6〕更新和維護(hù)站點(diǎn)4.網(wǎng)頁配色技巧 網(wǎng)頁中的色彩通常用十六進(jìn)制數(shù)來表示，如“#FF0000〞表示紅色，“#00FF00〞表示綠色、“#0000FF〞表示藍(lán)色、“#FFFF00〞表示黃色、“#FFFFFF〞表示白色、“#000000〞表示黑色等，即每兩位為一種色彩，從左到右分別為紅、綠、藍(lán)三色，每組色彩的取值均為00～FF〔十進(jìn)制數(shù)255的十六進(jìn)制值〕。典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁案例目標(biāo) 本案例將使用“記事本〞制作一個(gè)簡單的網(wǎng)頁。典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁操作思路〔1〕利用以HTML代碼創(chuàng)立的文本文件可以通過“記事本〞等文本編輯程序直接進(jìn)行編寫的特點(diǎn)制作本網(wǎng)頁文檔?！?〕創(chuàng)立圖像和文本等內(nèi)容。〔3〕從結(jié)構(gòu)上講，HTML文件由兩大局部組成：一是頭部〔即<head>標(biāo)簽與</head>標(biāo)簽之間的內(nèi)容，如網(wǎng)頁的標(biāo)題就放置在頭部〕，二是主體〔即<body>標(biāo)簽與</body>標(biāo)簽之間的內(nèi)容，也就是在瀏覽器中看到的內(nèi)容〕。為了與普通的文本文件相區(qū)別，將<html>標(biāo)簽與</html>標(biāo)簽分別放置在網(wǎng)頁代碼最前及最后，這樣，一個(gè)簡單的網(wǎng)頁就創(chuàng)立好了。典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁操作步驟

具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁案例小結(jié) 本案例用“記事本〞制作了一個(gè)簡單的網(wǎng)頁文檔。在制作過程中需注意的是：在保存文檔時(shí)一定要在【保存類型】下拉列表框中選擇【所有文件】選項(xiàng)；在輸入網(wǎng)頁文檔名稱時(shí)，一定要將網(wǎng)頁文檔的擴(kuò)展名.htm〔或.html〕一并輸入，否那么“記事本〞程序會(huì)將其保存為純文本格式文檔。1.2初識(shí)DreamweaverCS3 在學(xué)習(xí)了網(wǎng)頁制作的根底知識(shí)后，接下來就應(yīng)該認(rèn)識(shí)網(wǎng)頁制作利器——DreamweaverCS3了。1.2初識(shí)DreamweaverCS3知識(shí)講解典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁知識(shí)講解 在學(xué)習(xí)DreamweaverCS3之前應(yīng)先安裝DreamweaverCS3，安裝方法與其他應(yīng)用程序的安裝根本相同，這里不再贅述。知識(shí)講解1.DreamweaverCS3的工作界面2.DreamweaverCS3的根本設(shè)置1.DreamweaverCS3的工作界面

2.DreamweaverCS3的根本設(shè)置 在使用DreamweaverCS3前，需要進(jìn)行一些簡單的設(shè)置，以方便使用軟件。選擇【編輯】→【首選參數(shù)】命令，翻開【首選參數(shù)】對話框，如圖1.17所示。該對話框左側(cè)為【分類】列表框，右側(cè)為對應(yīng)的設(shè)置選項(xiàng)；默認(rèn)翻開的是【常規(guī)】分類，可單擊左側(cè)【分類】列表框中的選項(xiàng)進(jìn)行切換，然后進(jìn)行該分類的設(shè)置。典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁案例目標(biāo) 本案例將用DreamweaverCS3制作“welcome2.html〞網(wǎng)頁，其效果和用“記事本〞創(chuàng)立的“welcome.html〞網(wǎng)頁相同典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁操作思路〔1〕創(chuàng)立一個(gè)新網(wǎng)頁并將其保存?！?〕在網(wǎng)頁中添加素材并設(shè)置效果?！?〕參加版權(quán)欄。典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁操作步驟

具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁案例小結(jié) 本案例用DreamweaverCS3創(chuàng)立了一個(gè)網(wǎng)頁，并在IE瀏覽器中進(jìn)行了預(yù)覽。通過本案例的學(xué)習(xí)，可以看出Dreamweaver的強(qiáng)大功能及由此帶來的便捷。Dreamweaver最大的特點(diǎn)之一就是可視化的操作，使得用戶在不是很了解網(wǎng)頁的框架語言HTML時(shí)即可隨心所欲地對網(wǎng)頁元素進(jìn)行添加、刪除以及各種屬性設(shè)置，大大地減輕了初學(xué)者的負(fù)擔(dān)，使初學(xué)者能夠輕松上手，為以后的學(xué)習(xí)打下根底。1.3上機(jī)練習(xí) 1.3.1用“記事本〞創(chuàng)立“Goodmorning.html〞網(wǎng)頁1.3.2用DreamweaverCS3制作“Goodmorning2.html〞網(wǎng)頁1.3.1用“記事本〞創(chuàng)立“Goodmorning.html〞網(wǎng)頁 本練習(xí)將使用“記事本〞制作“Goodmorning.html〞網(wǎng)頁文檔。1.3.1用“記事本〞創(chuàng)立“Goodmorning.html〞網(wǎng)頁操作思路：將素材文件夾中的所有圖像復(fù)制到網(wǎng)頁要保存的文件夾中，如“D:\web〞。翻開“記事本〞程序，新建一個(gè)文件，將其保存到與素材圖像相同的文件夾中，如“D:\web〞，并將其名稱設(shè)置為“Goodmorning.html〞。參照效果圖輸入所有的代碼，然后進(jìn)行保存。1.3.2用DreamweaverCS3制作“Goodmorning2.html〞網(wǎng)頁本練習(xí)將使用DreamweaverCS3制作與節(jié)中用“記事本〞制作的網(wǎng)頁相同效果的網(wǎng)頁“Goodmorning2.html〞。1.3.2用DreamweaverCS3制作“Goodmorning2.html〞網(wǎng)頁操作思路：新建一個(gè)網(wǎng)頁并將其保存。將要用到的素材復(fù)制到保存網(wǎng)頁的同一目錄下。在網(wǎng)頁中插入圖像。第2課創(chuàng)立站點(diǎn)與效勞器本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)IIS的安裝與簡單配置站點(diǎn)的規(guī)劃及創(chuàng)立具體要求了解安裝IIS的必要性熟悉IIS的簡單配置了解站點(diǎn)的規(guī)劃掌握站點(diǎn)的創(chuàng)立方法掌握站點(diǎn)信息的修改方法掌握在【文件】面板中創(chuàng)立網(wǎng)站結(jié)構(gòu)的方法本課導(dǎo)讀 IIS是進(jìn)行網(wǎng)頁制作、測試、提供WWW效勞和FTP效勞的重要效勞器軟件。要提供瀏覽網(wǎng)頁的效勞，必須安裝IIS中的WWW效勞。為方便管理和測試，需要在Dreamweaver中進(jìn)行站點(diǎn)的創(chuàng)立及配置。2.1IIS的安裝與簡單配置 在學(xué)習(xí)制作網(wǎng)頁前，應(yīng)將網(wǎng)頁的制作和測試環(huán)境創(chuàng)立好，其中包括IIS的安裝與配置及站點(diǎn)的規(guī)劃與創(chuàng)立等。2.1IIS的安裝與簡單配置 2.1.1知識(shí)講解 2.1.2典型案例——局域網(wǎng)Web效勞器的創(chuàng)立2.1.1知識(shí)講解 IIS是InternetInformationServices〔互聯(lián)網(wǎng)信息效勞〕的縮寫，是Microsoft公司的一種集成了多種Internet效勞〔如WWW效勞和FTP效勞等〕的軟件。下面就IIS的相關(guān)知識(shí)進(jìn)行介紹。2.1.1知識(shí)講解

1.安裝IIS的必要性 2.IIS的安裝3.IIS的簡單配置1.安裝IIS的必要性 要發(fā)布網(wǎng)頁，讓其他用戶通過網(wǎng)絡(luò)〔Internet或企業(yè)內(nèi)部網(wǎng)Intranet〕訪問站點(diǎn)中的各個(gè)網(wǎng)頁，需要在放置站點(diǎn)的計(jì)算機(jī)中安裝相應(yīng)的軟件，這就是Web效勞器軟件，IIS即包括該效勞。2.IIS的安裝 通常情況下，要作為Web效勞器的計(jì)算機(jī)中都需要安裝Windows2000或Windows2003操作系統(tǒng)，對于一般的網(wǎng)頁制作和測試用Web效勞器或小型企事業(yè)作為Intranet的Web效勞器，安裝WindowsXP操作系統(tǒng)即可。下面，以在WindowsXP操作系統(tǒng)中安裝IIS為例進(jìn)行講解。在安裝IIS之前，需要準(zhǔn)備好WindowsXP的安裝光盤或?qū)indowsXP的安裝程序復(fù)制到計(jì)算機(jī)中。在WindowsXP中安裝IIS的具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。3.IIS的簡單配置 創(chuàng)立IIS主要是創(chuàng)立Web效勞器和FTP效勞器，用戶通過Web效勞器可以將各種信息有效、直觀地發(fā)布給局域網(wǎng)中的內(nèi)部用戶或Internet上的用戶；通過FTP效勞器可以在效勞器和客戶機(jī)之間快速地傳送文件。將IIS安裝好后，系統(tǒng)將自動(dòng)創(chuàng)立一個(gè)默認(rèn)的Web站點(diǎn)〔默認(rèn)位于“C:\Inetpub\wwwroot〞文件夾中〕和一個(gè)默認(rèn)的FTP站點(diǎn)〔默認(rèn)位于“C:\Inetpub\ftproot〞文件夾中〕，用戶也可創(chuàng)立自己的Web站點(diǎn)和FTP站點(diǎn)，并修改和設(shè)置站點(diǎn)的屬性。3.IIS的簡單配置 這里，以系統(tǒng)自動(dòng)創(chuàng)立的默認(rèn)Web站點(diǎn)為例介紹如何設(shè)置Web站點(diǎn)的屬性，具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——局域網(wǎng)Web效勞器的創(chuàng)立案例目標(biāo) 本案例將使用WindowsXP操作系統(tǒng)創(chuàng)立一個(gè)局域網(wǎng)Web效勞器。作為效勞器的計(jì)算機(jī)的IP地址為、Web效勞器的IP地址為，局域網(wǎng)中的用戶通過在IE瀏覽器中輸入“50〞進(jìn)行內(nèi)部網(wǎng)的訪問。典型案例——局域網(wǎng)Web效勞器的創(chuàng)立操作思路〔1〕在要作為Web效勞器的計(jì)算機(jī)中安裝IIS，其安裝方法參見節(jié)中的“IIS的安裝〞局部，本案例中不再贅述?！?〕配置Web效勞器的IP地址為?！?〕創(chuàng)立站點(diǎn)文件夾，并配置Web效勞器。典型案例——局域網(wǎng)Web效勞器的創(chuàng)立操作步驟

具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——局域網(wǎng)Web效勞器的創(chuàng)立案例小結(jié) 本案例通過創(chuàng)立一個(gè)局域網(wǎng)Web效勞器為讀者演示了創(chuàng)立Web效勞器的整個(gè)流程。在局域網(wǎng)Web效勞器的配置中，正確設(shè)置網(wǎng)站首頁的名稱是非常重要的，當(dāng)用戶在IE瀏覽器中直接輸入Web效勞器地址〔如〕時(shí)，IIS將會(huì)自動(dòng)顯示首頁〔如index.asp〕；如果在站點(diǎn)中沒有發(fā)現(xiàn)該網(wǎng)頁文檔，那么按默認(rèn)文檔列表框中的順序從上向下進(jìn)行搜索，自動(dòng)顯示發(fā)現(xiàn)的文檔，如果沒有發(fā)現(xiàn)，那么會(huì)報(bào)錯(cuò)。2.2站點(diǎn)的規(guī)劃及創(chuàng)立 創(chuàng)立IIS，只是完成了創(chuàng)立網(wǎng)頁制作和測試環(huán)境的一局部，要制作網(wǎng)頁，還需要在DreamweaverCS3中進(jìn)行站點(diǎn)的規(guī)劃及創(chuàng)立。2.2站點(diǎn)的規(guī)劃及創(chuàng)立知識(shí)講解典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點(diǎn)的創(chuàng)立知識(shí)講解 在制作網(wǎng)頁之前，應(yīng)先對要制作的網(wǎng)頁的站點(diǎn)進(jìn)行規(guī)劃和創(chuàng)立，這樣就可利用站點(diǎn)的管理功能對站點(diǎn)中的文件進(jìn)行管理和測試。知識(shí)講解1.站點(diǎn)的規(guī)劃2.站點(diǎn)的創(chuàng)立1.站點(diǎn)的規(guī)劃站點(diǎn)的規(guī)劃是指利用文件夾分門別類地保存不同的網(wǎng)頁內(nèi)容，合理地組織站點(diǎn)結(jié)構(gòu)。在規(guī)劃站點(diǎn)時(shí)，應(yīng)先在本地磁盤上創(chuàng)立一個(gè)文件夾作為站點(diǎn)的根目錄，在制作過程中創(chuàng)立和編輯的所有網(wǎng)頁、圖像文件及網(wǎng)站中用到的其他內(nèi)容都應(yīng)保存在該文件夾中。在發(fā)布站點(diǎn)時(shí)，只需將此文件夾中的所有內(nèi)容上傳到Web效勞器上即可。如果站點(diǎn)結(jié)構(gòu)復(fù)雜，內(nèi)容較多，那么還需建立子文件夾，以存放不同類別的網(wǎng)頁或圖像等。2.站點(diǎn)的創(chuàng)立站點(diǎn)規(guī)劃完成后就可以開始創(chuàng)立站點(diǎn)了。在DreamweaverCS3中，可以通過【站點(diǎn)管理】對話框進(jìn)行站點(diǎn)的創(chuàng)立和管理操作。DreamweaverCS3中提供了本地站點(diǎn)、遠(yuǎn)程站點(diǎn)和測試站點(diǎn)3種站點(diǎn)類型。創(chuàng)立站點(diǎn)和管理站點(diǎn)的具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點(diǎn)的創(chuàng)立案例目標(biāo) 本案例將在DreamweaverCS3中創(chuàng)立一個(gè)局域網(wǎng)內(nèi)部網(wǎng)站的站點(diǎn)“gongsi〞。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點(diǎn)的創(chuàng)立操作思路〔1〕節(jié)已在D盤中創(chuàng)立了文件夾“gongsi〞，本實(shí)例中直接進(jìn)行使用，不再創(chuàng)立站點(diǎn)文件夾。〔2〕配置站點(diǎn)的本地信息。其中，站點(diǎn)名稱為“gongsi〞，保存位置為“D:\gongsi\〞。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點(diǎn)的創(chuàng)立操作思路〔3〕配置站點(diǎn)的測試效勞器。其中，在【效勞器模型】下拉列表框中選擇【ASPVBScript】選項(xiàng)，在【訪問】下拉列表框中選擇【本地/網(wǎng)絡(luò)】選項(xiàng)，在【測試效勞器文件】文本框中輸入與本地根文件夾相同的文件夾，即“D:\gongsi\〞。〔4〕在【文件】面板中創(chuàng)立新文件夾及文件并進(jìn)行編輯。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點(diǎn)的創(chuàng)立操作步驟

具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點(diǎn)的創(chuàng)立案例小結(jié) 本案例創(chuàng)立了一個(gè)局域網(wǎng)內(nèi)部網(wǎng)站的站點(diǎn)，在創(chuàng)立過程中需要注意：如果有以.asp為擴(kuò)展名的動(dòng)態(tài)網(wǎng)頁，那么必須配置測試效勞器信息，而且測試效勞器文件夾所在的位置應(yīng)包含在IIS的站點(diǎn)中，否那么將不能正常顯示網(wǎng)頁內(nèi)容。2.3上機(jī)練習(xí) 2.3.1創(chuàng)立寢室Web效勞器2.3.2創(chuàng)立站點(diǎn)“Site〞2.3.1創(chuàng)立寢室Web效勞器 在寢室內(nèi)創(chuàng)立一個(gè)小型的局域網(wǎng)，選擇一臺(tái)計(jì)算機(jī)作為Web效勞器，安裝IIS并進(jìn)行配置，然后進(jìn)行Web效勞器的測試。2.3.2創(chuàng)立站點(diǎn)“Site〞在Dreamweaver中新建一個(gè)站點(diǎn)，將其設(shè)置為不使用任何效勞器技術(shù)，然后將其保存在D盤上的“Site〞文件夾內(nèi)。2.3.2創(chuàng)立站點(diǎn)“Site〞操作思路：在D盤上新建一個(gè)“Site〞文件夾。創(chuàng)立不使用任何效勞器技術(shù)的站點(diǎn)并將其保存在“Site〞文件夾內(nèi)。第3課用文本制作簡單網(wǎng)頁本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)添加網(wǎng)頁文本設(shè)置文本格式具體要求掌握添加普通文本、空格、特殊字符、水平線、日期及活動(dòng)字幕的方法掌握設(shè)置字體格式的方法掌握設(shè)置段落格式的方法熟悉創(chuàng)立列表的方法本課導(dǎo)讀 文本是網(wǎng)頁的主體，是瀏覽者獲取信息最主要的途徑。添加文本及設(shè)置文本格式的方法與在Word中根本相同，但也有不同之處，如換行、分段和添加空格等。3.1添加網(wǎng)頁文本 文本是網(wǎng)頁的主體內(nèi)容，是向?yàn)g覽者傳遞信息最主要的方式。從某種意義上說，文本是網(wǎng)頁存在的根底，是網(wǎng)頁中不可或缺的元素。3.1添加網(wǎng)頁文本

知識(shí)講解

典型案例——制作版權(quán)信息欄

知識(shí)講解

在網(wǎng)頁中添加文本與在Word等文字處理軟件中添加文本類似。知識(shí)講解 1.添加普通文本 2.添加空格 3.添加特殊字符 4.添加水平線 5.添加日期和時(shí)間 6.創(chuàng)立活動(dòng)字幕1.添加普通文本

在Dreamweaver中，可以直接輸入文本，也可以從其他文檔中復(fù)制文本，還可以導(dǎo)入文本。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。2.添加空格

如果要添加空格，需將輸入法切換到全角狀態(tài)，然后再按空格鍵。如果未切換到全角狀態(tài)，那么也可按【Ctrl+Shift+空格】組合鍵在文檔中添加空格。

3.添加特殊字符

在網(wǎng)頁制作過程中，時(shí)常需要添加一些特殊字符，如版權(quán)符號(hào)和注冊商標(biāo)符號(hào)等，這就需要使用Dreamweaver的特殊字符添加功能。插入特殊字符的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。4.添加水平線

使用水平線可以對多個(gè)對象進(jìn)行分隔，使各個(gè)對象錯(cuò)落有致。插入水平線的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。5.添加日期和時(shí)間

如果需要，還可以在網(wǎng)頁中添加日期和時(shí)間，在網(wǎng)頁中添加日期或時(shí)間的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。6.創(chuàng)立活動(dòng)字幕 活動(dòng)字幕也稱為滾動(dòng)看板和滾動(dòng)字幕，網(wǎng)站中常用的滾動(dòng)公告就是一種活動(dòng)字幕。使用HTML的<marquee>標(biāo)簽即可創(chuàng)立活動(dòng)字幕，具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。典型案例——制作版權(quán)信息欄

案例目標(biāo)

本案例將練習(xí)在DreamweaverCS3中添加文本。典型案例——制作版權(quán)信息欄

操作思路 〔1〕新建一個(gè)空白網(wǎng)頁并劃分出版權(quán)欄?！?〕輸入文本?！?〕在【屬性】面板中設(shè)置其屬性和超鏈接，然后進(jìn)行保存。操作步驟

具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——制作版權(quán)信息欄

案例小結(jié) 本案例通過創(chuàng)立一個(gè)版權(quán)信息欄演示了水平線、普通文本、特殊符號(hào)、普通文本超鏈接的創(chuàng)立等操作。版權(quán)信息欄通常位于頁面的底部，主要放置版權(quán)聲明、技術(shù)支持、網(wǎng)站管理超鏈接等信息，局部網(wǎng)站也將網(wǎng)頁訪問量和加載頁面所用時(shí)間等信息放在版權(quán)信息欄中。典型案例——制作版權(quán)信息欄

3.2設(shè)置文本格式 如果網(wǎng)頁中的文本樣式太單調(diào)，那么會(huì)大大削弱網(wǎng)頁的外觀效果。通過對網(wǎng)頁文本格式的設(shè)置，可使文本變得美觀，讓網(wǎng)頁更具吸引力。3.2設(shè)置文本格式

知識(shí)講解

典型案例——美化版權(quán)信息欄

知識(shí)講解

設(shè)置文本格式包括對選中文本的字體、字號(hào)和顏色進(jìn)行設(shè)置，以及對光標(biāo)插入點(diǎn)所在段落的文本的對齊方式和縮進(jìn)方式等進(jìn)行設(shè)置，下面分別進(jìn)行介紹。知識(shí)講解 1.設(shè)置字體格式 2.設(shè)置段落格式 3.添加列表

1.設(shè)置字體格式 同其他文字處理軟件一樣，在DreamweaverCS3中也可對文本的顏色、字體和字號(hào)等進(jìn)行設(shè)置。1〕編輯字體列表2〕設(shè)置文本字體及字號(hào)3〕更改文本顏色 具體操作方法請教師參考軟件和書中內(nèi)容進(jìn)行講解。2.設(shè)置段落格式 文本格式設(shè)置還包括對文本段落進(jìn)行格式設(shè)置，如設(shè)置段落對齊方式、縮進(jìn)方式和列表等。1〕文本段落對齊方式的設(shè)置2〕文本段落縮進(jìn)方式的設(shè)置 具體操作方法請教師參考軟件和書中內(nèi)容進(jìn)行講解。3.添加列表 列表有工程列表和編號(hào)列表兩種。列表常應(yīng)用在條款或列舉等類型的文本中，如文章列表等。1〕添加工程列表2〕添加編號(hào)列表 具體操作方法請教師參考軟件和書中內(nèi)容進(jìn)行講解。

典型案例——美化版權(quán)信息欄

案例目標(biāo) 本案例將練習(xí)對“版權(quán).html〞網(wǎng)頁中的文本進(jìn)行格式設(shè)置。

典型案例——美化版權(quán)信息欄操作思路〔1〕對水平線進(jìn)行設(shè)置?！?〕對所有的文本進(jìn)行字號(hào)設(shè)置?！?〕對段落對齊方式進(jìn)行設(shè)置?！?〕對最后一行文本進(jìn)行字體及顏色等設(shè)置。典型案例——美化版權(quán)信息欄操作步驟

具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——美化版權(quán)信息欄案例小結(jié) 本案例通過美化“版權(quán).html〞為用戶演示了文本格式的設(shè)置方法。在設(shè)置文本格式時(shí)，正文文本應(yīng)盡量使用12像素的宋體。另外，需要特別注意的是：對齊、縮進(jìn)及列表，都是針對文本段落的，只有對文本段落才有效。3.3上機(jī)練習(xí)“導(dǎo)購〞網(wǎng)頁的制作“導(dǎo)購〞網(wǎng)頁的美化3.3.1“導(dǎo)購〞網(wǎng)頁的制作 根據(jù)本課所學(xué)知識(shí)制作“導(dǎo)購〞網(wǎng)頁文檔，主要運(yùn)用普通文本的輸入、水平線的添加、空格的添加、換行與分段等知識(shí)點(diǎn)。

3.3.2“導(dǎo)購〞網(wǎng)頁的美化 根據(jù)本課所學(xué)知識(shí)對節(jié)制作的網(wǎng)頁文檔進(jìn)行美化，主要運(yùn)用字體的添加，字體、字號(hào)、顏色的設(shè)置，文本段落的對齊，列表的創(chuàng)立和加粗效果的運(yùn)用等知識(shí)點(diǎn)。第4課插入圖像美化網(wǎng)頁本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)圖像的插入及根本編輯圖像高級操作具體要求熟悉圖像的插入熟悉圖像的根本編輯學(xué)會(huì)制作鼠標(biāo)經(jīng)過圖像學(xué)會(huì)制作導(dǎo)航條本課導(dǎo)讀 除文本外，圖像是網(wǎng)頁最重要的組成局部。圖像在整個(gè)網(wǎng)頁中可以起到畫龍點(diǎn)睛的作用，圖文并茂的網(wǎng)頁比純文本更能吸引人的注意力。4.1圖像的插入及根本編輯

一個(gè)好的網(wǎng)頁除了文本之外，還應(yīng)該有圖像來點(diǎn)綴。在網(wǎng)頁中恰到好處地使用圖像，能使網(wǎng)頁更加生動(dòng)、美觀。4.1圖像的插入及根本編輯 知識(shí)講解4.1.2典型案例——“青春〞網(wǎng)頁的制作知識(shí)講解 圖像格式很多，但目前網(wǎng)頁中支持的圖像格式只有GIF，JPG〔也稱為JPEG〕和PNG3種。知識(shí)講解 1.圖像的插入 2.圖像的根本編輯 1.圖像的插入

使用Photoshop或Fireworks等圖像處理軟件制作好需要的圖像并保存為網(wǎng)頁支持的圖像格式后，即可使用DreamweaverCS3將其插入到網(wǎng)頁中。插入圖像的具體操作請教師參照軟件及書中內(nèi)容進(jìn)行講解。

2.圖像的根本編輯

插入圖像并選中圖像后，可在【屬性】面板中編輯圖像的屬性，如設(shè)置圖像的大小、邊框和對齊方式等。

典型案例——“青春〞網(wǎng)頁的制作案例目標(biāo) 本案例將練習(xí)在網(wǎng)頁中插入圖像并設(shè)置圖像的根本屬性。

典型案例——“青春〞網(wǎng)頁的制作操作思路〔1〕將圖像文件復(fù)制到“img1〞文件夾中并新建一個(gè)空白網(wǎng)頁文檔?！?〕插入背景圖像并設(shè)置其格式?！?〕插入文本并設(shè)置格式。典型案例——“青春〞網(wǎng)頁的制作操作步驟

具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。

典型案例——“青春〞網(wǎng)頁的制作案例小結(jié) 本案例主要講解如何利用DreamweaverCS3在網(wǎng)頁中插入圖像并對圖像的屬性進(jìn)行設(shè)置。在瀏覽網(wǎng)頁的時(shí)候，當(dāng)鼠標(biāo)光標(biāo)移到圖像上時(shí)，鼠標(biāo)光標(biāo)右下角會(huì)出現(xiàn)“青春〞提示字樣，這是在【屬性】面板的【替換】文本框中輸入替換文本的效果。需要注意的是：圖像的對齊方式一定要為“左對齊〞，否那么得不到圖像和文本段落在同一水平區(qū)域的效果。 4.2圖像高級操作

DreamweaverCS3中提供了鼠標(biāo)經(jīng)過圖像和導(dǎo)航條等網(wǎng)頁功能，下面對這些功能分別進(jìn)行介紹。4.2圖像高級操作

知識(shí)講解

典型案例——制作網(wǎng)站導(dǎo)航條

知識(shí)講解 鼠標(biāo)經(jīng)過圖像功能展示的是一種動(dòng)態(tài)圖像的效果，當(dāng)鼠標(biāo)光標(biāo)經(jīng)過圖像時(shí)圖像會(huì)發(fā)生變化。這種圖像由原始圖像和鼠標(biāo)經(jīng)過圖像組成：當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到原始圖像上時(shí)，將會(huì)顯示鼠標(biāo)經(jīng)過圖像；當(dāng)鼠標(biāo)光標(biāo)移出圖像范圍時(shí)，那么顯示原始圖像。知識(shí)講解

1.鼠標(biāo)經(jīng)過圖像的制作 2.導(dǎo)航條的制作

1.鼠標(biāo)經(jīng)過圖像的制作創(chuàng)立鼠標(biāo)經(jīng)過圖像的具體操作步驟如下：〔1〕將光標(biāo)插入點(diǎn)定位到需要?jiǎng)?chuàng)立鼠標(biāo)經(jīng)過圖像的位置?！?〕選擇【插入記錄】→【圖像對象】→【鼠標(biāo)經(jīng)過圖像】命令，翻開【插入鼠標(biāo)經(jīng)過圖像】對話框。

1.鼠標(biāo)經(jīng)過圖像的制作〔3〕在【圖像名稱】文本框中輸入圖像名稱，單擊【原始圖像】文本框后的【瀏覽】按鈕，在翻開的對話框中選擇原始圖像并單擊【確定】按鈕，返回【插入鼠標(biāo)經(jīng)過圖像】對話框。用同樣的方法設(shè)置鼠標(biāo)經(jīng)過圖像?！?〕選中復(fù)選框，可防止圖像顯示延遲。在【替換文本】文本框中輸入所需內(nèi)容。單擊【按下時(shí)，前往的URL】文本框后的【瀏覽】按鈕，在翻開的對話框中選擇要鏈接到的網(wǎng)頁文檔并單擊【確定】按鈕，返回【插入鼠標(biāo)經(jīng)過圖像】對話框。〔5〕設(shè)置完成后單擊【確定】按鈕，關(guān)閉【插入鼠標(biāo)經(jīng)過圖像】對話框。2.導(dǎo)航條的制作

導(dǎo)航條由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨操作不同而不同。導(dǎo)航條為在網(wǎng)頁和文件之間的跳轉(zhuǎn)提供了一條快捷途徑。制作導(dǎo)航條的具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。

典型案例——制作網(wǎng)站導(dǎo)航條

案例目標(biāo)

本案例主要練習(xí)制作水平導(dǎo)航條。典型案例——制作網(wǎng)站導(dǎo)航條操作思路 〔1〕將需要的所有圖像復(fù)制到“img〞文件夾中?！?〕新建一個(gè)文檔，在其中插入圖像并設(shè)置格式。〔3〕插入導(dǎo)航條并進(jìn)行設(shè)置。典型案例——制作網(wǎng)站導(dǎo)航條操作步驟

具體操作步驟請教師參照軟件及書中內(nèi)容進(jìn)行講解。典型案例——制作網(wǎng)站導(dǎo)航條案例小結(jié) 本案例主要練習(xí)水平導(dǎo)航條的創(chuàng)立。首先要注意，插入的第1個(gè)圖像“l(fā)eft.png〞的對齊方式一定要設(shè)置為“左對齊〞，否那么該圖像不能和后面的導(dǎo)航條水平對齊，而是分別處于兩個(gè)段落，當(dāng)然，在后面學(xué)習(xí)表格布局或DIV布局的相關(guān)知識(shí)后就不必設(shè)置該選項(xiàng)了。其次，如果在添加導(dǎo)航條元件的過程中操作有誤，那么可以在【導(dǎo)航條元件】列表框中選中該元件，然后單擊按鈕，刪除該元件之后再重新添加。添加完所有元件后，可以通過單擊和按鈕進(jìn)行前后順序調(diào)整。4.3上機(jī)練習(xí) 4.3.1制作“新年快樂〞網(wǎng)頁 4.3.2為“新年快樂〞網(wǎng)頁制作鼠標(biāo)經(jīng)過圖像4.3.1制作“新年快樂〞網(wǎng)頁 本練習(xí)將制作“新年快樂〞網(wǎng)頁，主要練習(xí)在網(wǎng)頁中添加圖像并對圖像的一些根本屬性進(jìn)行設(shè)置。4.3.1制作“新年快樂〞網(wǎng)頁操作思路:在【頁面屬性】對話框中設(shè)置背景顏色為“#B30404〞。設(shè)置文檔段落的對齊方式為“居中對齊〞。依次插入“t.gif〞、“t2.gif〞和“n.png〞圖像，再設(shè)置“n.png〞的寬、高、鏈接和邊框等屬性〔因?yàn)榻o圖像添加了鏈接，Dreamweaver默認(rèn)會(huì)給圖像加上1像素的邊框，以突出圖像的鏈接，但這樣很影響網(wǎng)頁的整體視覺效果，所以把邊框值設(shè)為“0〞，去掉邊框。至于寬和高的設(shè)置，適當(dāng)即可，不過一定要同比縮放，以保證圖像不失真〕。輸入文本“新年快樂!Happynewyeartoyou!〞。插入底部圖像“b.gif〞。4.3.2為“新年快樂〞網(wǎng)頁制作鼠標(biāo)經(jīng)過圖像

本練習(xí)將接著上面的練習(xí)制作網(wǎng)頁，主要練習(xí)制作鼠標(biāo)經(jīng)過圖像。4.3.2為“新年快樂〞網(wǎng)頁制作鼠標(biāo)經(jīng)過圖像操作思路：將節(jié)中制作的“新年快樂.html〞網(wǎng)頁另存為“新年快樂2.html〞。刪除“n.png〞，并重新添加原始圖像為“n.png〞、鼠標(biāo)經(jīng)過圖像為“n2.png〞的鼠標(biāo)經(jīng)過圖像。設(shè)置鼠標(biāo)經(jīng)過圖像的屬性。第5課用表格標(biāo)準(zhǔn)網(wǎng)頁本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)表格的創(chuàng)立及根本編輯表格屬性設(shè)置具體要求掌握普通表格及嵌套表格的創(chuàng)立方法熟悉表格和單元格的選擇方法熟悉單元格的合并、拆分及刪除方法熟悉表格及單元格屬性的設(shè)置方法熟悉表格內(nèi)容的添加方法本課導(dǎo)讀 表格在日常辦公中很常見，它能使數(shù)據(jù)的顯示更清晰明了，網(wǎng)頁中的表格還有更重要的作用——進(jìn)行頁面布局。表格可以將網(wǎng)頁分割為很多組合在一起的小塊，既加快了網(wǎng)頁的加載速度，又使網(wǎng)頁整齊而美觀。5.1創(chuàng)立及編輯表格 頁面布局是網(wǎng)頁制作的宏觀設(shè)置，使用表格進(jìn)行頁面布局是其中最常用的手段。5.1創(chuàng)立及編輯表格 知識(shí)講解典型案例——制作“我的課程表〞表格知識(shí)講解

表格是進(jìn)行頁面布局時(shí)非常有用的工具。利用表格進(jìn)行頁面布局，可以將圖像或文本放置在表格的各個(gè)單元格中，從而精確控制其位置。知識(shí)講解 1.創(chuàng)立表格 2.編輯表格1.創(chuàng)立表格 在DreamweaverCS3中，表格分為普通表格和嵌套表格。普通表格即是傳統(tǒng)意義上的表格，嵌套表格是在表格的某個(gè)單元格內(nèi)插入的表格，即表格之中再嵌套表格。1〕創(chuàng)立普通表格2〕創(chuàng)立嵌套表格2.編輯表格 表格創(chuàng)立好后，可以對表格進(jìn)行合并或拆分單元格、刪除或添加行〔或列〕等編輯操作。在表格中添加圖像和文本等內(nèi)容后，根據(jù)實(shí)際需要，也可對表格的大小等進(jìn)行調(diào)整。1〕選擇整個(gè)表格2〕選擇行或列3〕選擇單元格4〕拆分單元格5〕合并單元格6〕添加行或列7〕刪除行或列5.1.2典型案例——制作“我的課程表〞表格案例目標(biāo) 本案例主要練習(xí)創(chuàng)立表格和添加簡單的內(nèi)容。5.1.2典型案例——制作“我的課程表〞表格操作思路〔1〕創(chuàng)立一個(gè)5行6列的表格。〔2〕將第1列的前兩個(gè)單元格合并，將第1行的后5個(gè)單元格合并?！?〕在第3行的后5個(gè)單元格中各插入一個(gè)4行1列的嵌套表格，在第4行的后5個(gè)單元格中各插入一個(gè)2行1列的嵌套表格。〔4〕在相應(yīng)單元格中添加文本或圖像。5.1.2典型案例——制作“我的課程表〞表格操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。5.1.2典型案例——制作“我的課程表〞表格案例小結(jié) 本案例利用表格創(chuàng)立了一個(gè)“我的課程表〞網(wǎng)頁，運(yùn)用了創(chuàng)立表格、合并單元格、輸入文本以及插入圖像等知識(shí)。在DreamweaverCS3中，表格內(nèi)容的對齊方式默認(rèn)為“左對齊〞，而在IE瀏覽器中那么為“居中對齊〞，所以在Dreamweaver和IE瀏覽器中的效果有一定差異，為了防止因表格內(nèi)容的默認(rèn)對齊方式不同而引起瀏覽效果與預(yù)期效果的不同，需要在設(shè)計(jì)網(wǎng)頁時(shí)為表格設(shè)置屬性，下面我們就來學(xué)習(xí)怎樣設(shè)置表格屬性。5.2表格屬性設(shè)置

要使表格美觀，需要對表格及單元格的屬性進(jìn)行設(shè)置，如設(shè)置邊框線顏色和單元格的對齊方式等。5.2表格屬性設(shè)置知識(shí)講解典型案例——美化“我的課程表〞表格知識(shí)講解

表格的屬性很多，包括表格的寬度、高度，表格包含的行數(shù)、列數(shù)，表格中各單元格間的距離，單元格中內(nèi)容與單元格邊框線間的距離以及是否有邊框、邊框線粗細(xì)和表格背景顏色等，下面分別進(jìn)行講解。知識(shí)講解 1.設(shè)置表格屬性 2.設(shè)置單元格屬性1.設(shè)置表格屬性

要進(jìn)行表格屬性設(shè)置，需先選中表格。選中表格后，在【屬性】面板可進(jìn)行表格的屬性設(shè)置。2.設(shè)置單元格屬性 除了可以設(shè)置整個(gè)表格的屬性外，還可對表格的單元格、行或列的屬性進(jìn)行設(shè)置。選擇要設(shè)置屬性的單元格、行或列后，其【屬性】面板如下圖。在單元格的【屬性】面板中，可以對單元格中的文本進(jìn)行屬性設(shè)置，其設(shè)置方法與普通文本相同。另外，還可以對單元格的對齊方式、寬和高及是否換行等進(jìn)行設(shè)置。典型案例——美化“我的課程表〞表格案例目標(biāo) 本案例主要練習(xí)表格屬性及單元格屬性的設(shè)置。典型案例——美化“我的課程表〞表格操作思路〔1〕設(shè)置第1層〔外層〕表格的屬性?！?〕設(shè)置第1層表格的單元格屬性?！?〕設(shè)置第2層〔嵌套〕表格的屬性?！?〕設(shè)置第2層表格的單元格屬性。典型案例——美化“我的課程表〞表格操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。典型案例——美化“我的課程表〞表格案例小結(jié) 本案例練習(xí)美化表格，包括對表格屬性〔如表格邊框粗細(xì)、邊框顏色、間距、填充、對齊方式和高度等〕及單元格屬性〔如單元格的對齊方式和單元格高度等〕進(jìn)行設(shè)置。通過這些設(shè)置，可以使創(chuàng)立的表格及其內(nèi)容的顯示效果更好。5.3上機(jī)練習(xí)“個(gè)人簡歷〞網(wǎng)頁的制作“個(gè)人簡歷〞網(wǎng)頁的美化5.3.1“個(gè)人簡歷〞網(wǎng)頁的制作 本練習(xí)將利用表格進(jìn)行頁面布局。5.3.1“個(gè)人簡歷〞網(wǎng)頁的制作操作思路在DreamweaverCS3中創(chuàng)立一個(gè)9行1列、寬度為605像素、邊框?yàn)?像素、其余值保持默認(rèn)設(shè)置的表格。將素材圖像“1px.gif〞復(fù)制到保存網(wǎng)頁文檔的位置。在第3行中插入圖像“1px.gif〞。在第4～8行中分別插入寬度為90%的嵌套表格。將各嵌套表格的第2行中的單元格合并，在合并后的單元格中分別插入寬度為80%的嵌套表格。輸入文本，然后對文本的屬性進(jìn)行設(shè)置?！皞€(gè)人簡歷〞網(wǎng)頁的美化本練習(xí)將對節(jié)中制作的“個(gè)人簡歷〞網(wǎng)頁進(jìn)行美化?！皞€(gè)人簡歷〞網(wǎng)頁的美化操作思路將“個(gè)人簡歷.html〞網(wǎng)頁另存為“個(gè)人簡歷2.html〞。選中最外層表格，設(shè)置填充、間距和邊框值分別為“0〞、“2〞和“0〞，背景顏色和邊框顏色均為“#FFFFFF〞。設(shè)置最外層表格9行單元格的水平對齊方式均為“居中對齊〞、第1行的垂直對齊方式為“頂端對齊〞、第2～6行的垂直對齊方式為“居中對齊〞。設(shè)置第1，2，3，9行單元格的背景顏色?！皞€(gè)人簡歷〞網(wǎng)頁的美化繼續(xù)設(shè)置所有第2層嵌套表格的填充、間距和邊框值分別為“0〞、“3〞和“1〞，邊框顏色為“#FFFFFF〞。設(shè)置所有第2層嵌套表格中各單元格的水平對齊方式以及背景顏色。設(shè)置所有第3層嵌套表格中各單元格的水平對齊方式以及背景顏色。第6課建立鏈接本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)使用網(wǎng)頁鏈接網(wǎng)頁鏈接分類具體要求了解網(wǎng)頁鏈接掌握插入鏈接的根本方法熟悉各種鏈接的概念本課導(dǎo)讀 網(wǎng)頁鏈接能豐富網(wǎng)頁的內(nèi)容和功能，帶給網(wǎng)站訪問者極大的方便。很難想像一個(gè)沒有鏈接的網(wǎng)站會(huì)是什么樣子：瀏覽者每讀一篇文章或查看一件商品的詳細(xì)信息，都要從瀏覽器中輸入準(zhǔn)確的一串網(wǎng)絡(luò)地址，這種情況是讓人無法接受的。何況，沒有網(wǎng)站的導(dǎo)航鏈接，事先很難知道網(wǎng)頁信息的具體地址。網(wǎng)頁鏈接就像網(wǎng)站的骨架，將網(wǎng)頁和其他資源有序地整合起來，是網(wǎng)頁中不可缺少的一局部。6.1使用網(wǎng)頁鏈接 鏈接和文本、圖像等一樣，是網(wǎng)頁的主體，是連接網(wǎng)頁和其他資源的橋梁。通過鏈接，瀏覽者能順利訪問網(wǎng)站的信息資源。本節(jié)主要介紹怎樣在網(wǎng)頁中使用鏈接，并對鏈接進(jìn)行簡單的屬性設(shè)置。6.1使用網(wǎng)頁鏈接知識(shí)講解典型案例——制作“古詩欣賞〞網(wǎng)頁知識(shí)講解

鏈接能夠?qū)崿F(xiàn)頁面之間的跳轉(zhuǎn)，從而有機(jī)地將網(wǎng)站中的各個(gè)頁面聯(lián)系起來，是網(wǎng)頁中至關(guān)重要的元素。制作網(wǎng)頁時(shí)，可以通過將鏈接加在圖像和文字等上面來實(shí)現(xiàn)資源的連接。知識(shí)講解1.了解網(wǎng)頁中的鏈接2.插入網(wǎng)頁鏈接3.設(shè)置鏈接樣式1.了解網(wǎng)頁中的鏈接 鏈接由源端點(diǎn)和目標(biāo)端點(diǎn)兩局部組成，有鏈接的一端稱為鏈接的源端點(diǎn)〔鼠標(biāo)光標(biāo)移到其上時(shí)通常會(huì)變?yōu)樾螤睢?，提供鏈接資源的一端稱為目標(biāo)端點(diǎn)，即Internet地址，通常稱之為 URL。URL是英文“UniformResourceLocator〞的縮寫，其含義為“統(tǒng)一資源定位符〞，它定義了一種統(tǒng)一的網(wǎng)絡(luò)資源尋找方法，網(wǎng)絡(luò)上的所有資源〔如網(wǎng)頁、音頻、視頻、Flash動(dòng)畫和壓縮文件等〕均可以通過這種方法訪問。URL的根本格式是“訪問方案://效勞器:端口/路徑/文件#錨記〞，例如“://bk.baidu:80/view/262.htm#11〞。2.插入網(wǎng)頁鏈接網(wǎng)頁鏈接通常添加在文本或圖像上，可以通過【屬性】面板快速添加。1〕添加文本鏈接2〕創(chuàng)立普通圖像鏈接3〕創(chuàng)立圖像熱點(diǎn)鏈接3.設(shè)置鏈接樣式默認(rèn)的頁面鏈接樣式很可能與頁面的風(fēng)格不協(xié)調(diào)，如顏色和字體等，可以根據(jù)需要預(yù)先進(jìn)行鏈接樣式的設(shè)置。具體操作步驟如下：〔1〕選擇【修改】→【頁面屬性】命令〔或單擊【屬性】面板下方的【頁面屬性】按鈕〕，翻開【頁面屬性】對話框。〔2〕在左邊的【分類】列表框中選擇【鏈接】選項(xiàng)，將對話框切換到該分類。在該對話框中進(jìn)行相應(yīng)的設(shè)置，然后單擊【確定】按鈕，關(guān)閉對話框。6.1.2典型案例——制作“古詩欣賞〞網(wǎng)頁案例目標(biāo) 本案例將練習(xí)在網(wǎng)頁中添加圖像和文本鏈接，并設(shè)置頁面鏈接樣式。6.1.2典型案例——制作“古詩欣賞〞網(wǎng)頁操作思路〔1〕設(shè)置頁面屬性和鏈接樣式?！?〕插入表格并設(shè)置表格樣式，利用表格進(jìn)行網(wǎng)頁布局?！?〕插入嵌套表格?！?〕添加相應(yīng)文本和圖像?！?〕在文本和圖像上添加鏈接。6.1.2典型案例——制作“古詩欣賞〞網(wǎng)頁操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。6.1.2典型案例——制作“古詩欣賞〞網(wǎng)頁案例小結(jié) 本案例通過制作“古詩欣賞〞網(wǎng)頁演示了創(chuàng)立及設(shè)置文本鏈接和圖像鏈接的方法，讀者一定要掌握這些知識(shí)。6.2鏈接分類 在網(wǎng)頁中，除了指向頁面的鏈接外，還有文件鏈接、腳本鏈接、電子郵件鏈接、空鏈接和命名錨記等比較常見的鏈接類型。另外，鏈接還可分為相對鏈接和絕對鏈接兩類。本節(jié)將詳細(xì)介紹各種鏈接。6.2鏈接分類

知識(shí)講解

典型案例——完善版權(quán)信息知識(shí)講解 不同的鏈接可以實(shí)現(xiàn)不同的功能，下面分別介紹不同鏈接的功能和創(chuàng)立方法。知識(shí)講解1.相對鏈接2.絕對鏈接3.文件鏈接4.空鏈接5.電子郵件鏈接6.命名錨記1.相對鏈接 相對鏈接在頁面制作中最為常見，它只能鏈接網(wǎng)站內(nèi)部的頁面或資源，是鏈接目標(biāo)相對于創(chuàng)立鏈接的頁面的路徑。例如，“about.html〞說明頁面“about.html〞和鏈接所在的頁面處于同一個(gè)文件夾中；又如，“img/logo.gif〞說明圖片“l(fā)ogo.gif〞在創(chuàng)立鏈接的頁面所處文件夾中的【img】文件夾中，依此類推，以斜線〔/〕分隔文件夾和文件來表示路徑。創(chuàng)立相對鏈接的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。2.絕對鏈接 與相對鏈接對應(yīng)的是絕對鏈接，絕對鏈接采用嚴(yán)格的尋址標(biāo)準(zhǔn)，包含通信方案、效勞器地址和效勞端口等，如“://news.163/img/netease_logo.gif〞，通過它就可以訪問“://news.163〞網(wǎng)站內(nèi)部“img〞文件夾中的圖片“netease_logo.gif〞。絕對鏈接的創(chuàng)立方法和相對鏈接的創(chuàng)立方法一樣，只是鏈接的地址需要手動(dòng)輸入。3.文件鏈接

互聯(lián)網(wǎng)上的資源豐富多樣，除了網(wǎng)頁之外，還有音頻〔如MP3和鈴聲〕、視頻、應(yīng)用軟件和小說等，下載這些文件就需要通過文件鏈接來實(shí)現(xiàn)。文件鏈接的創(chuàng)立方法和頁面鏈接相同，也包括相對鏈接和絕對鏈接兩種形式。4.空鏈接 為了實(shí)現(xiàn)一些自定義的功能或效果，常常要在網(wǎng)頁中添加腳本，如JavaScript和VBScript腳本等，而其中許多功能是與訪問者互動(dòng)的，比較常見的是“設(shè)為首頁〞和“參加收藏〞等，它們都需要通過空鏈接來實(shí)現(xiàn)?？真溄硬⒉粚?shí)現(xiàn)頁面的跳轉(zhuǎn)，而是提供調(diào)用腳本的功能?？真溄拥牡刂方y(tǒng)一用“#〞表示，需要在代碼中添加腳本。5.電子郵件鏈接電子郵件鏈接為瀏覽者提供了快速創(chuàng)立電子郵件的功能，用戶單擊此類鏈接后即可進(jìn)入電子郵件的創(chuàng)立向?qū)В囊淮筇攸c(diǎn)就是預(yù)先設(shè)置好了收件人的郵件地址。電子郵件鏈接與頁面鏈接的不同之處在于使用的通信方案不同，電子郵件鏈接的通信方案是SMTP，所以在添加鏈接地址的時(shí)候加上“mailto:〞指定通信方案即可，如“mailto:www@163〞，后面的“www@163〞就是收件人的郵件地址。創(chuàng)立電子郵件鏈接的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。6.命名錨記當(dāng)瀏覽者翻開某網(wǎng)頁時(shí)，默認(rèn)是從頁面頂部開始顯示的，如果網(wǎng)頁內(nèi)容超出窗口高度，那么需拖動(dòng)滾動(dòng)條往下瀏覽。當(dāng)網(wǎng)頁比較長的時(shí)候，這種方式就有些讓瀏覽者費(fèi)心了，比方一個(gè)公司介紹網(wǎng)頁，每個(gè)局部都有一段較長的圖文內(nèi)容，加在一起網(wǎng)頁就比較長了，這時(shí)，可以在網(wǎng)頁中使用命名錨記，單擊指向各命名錨記的鏈接即可跳到相應(yīng)的局部去閱讀，而不需使用滾動(dòng)條去尋找。創(chuàng)立命名錨記的過程如下：⑴在頁面某位置插入命名錨記。⑵在頁面中需要跳轉(zhuǎn)到命名錨記的位置插入指向?qū)?yīng)錨記的鏈接。

典型案例——完善版權(quán)信息

案例目標(biāo) 本案例將對節(jié)中制作的“版權(quán)2.html〞網(wǎng)頁進(jìn)行進(jìn)一步完善，練習(xí)空鏈接和電子郵件鏈接的使用方法。典型案例——完善版權(quán)信息操作思路〔1〕翻開網(wǎng)頁文檔，在其中添加新的工程并設(shè)置格式。〔2〕為插入的工程編輯代碼，設(shè)置鏈接。典型案例——完善版權(quán)信息操作步驟

具體操作步驟請教參照軟件和書中內(nèi)容進(jìn)行講解。

典型案例——完善版權(quán)信息案例小結(jié) 本案例通過對節(jié)中制作的“版權(quán)2.html〞網(wǎng)頁進(jìn)行進(jìn)一步完善為用戶演示了“設(shè)為首頁〞和“參加收藏〞等空鏈接的創(chuàng)立方法以及電子郵件鏈接的使用方法。創(chuàng)立鏈接的通用方法是使用【屬性】面板輸入鏈接地址，建議讀者熟練掌握該方法，其余方法作為輔助即可。6.3上機(jī)練習(xí)6.3.1制作網(wǎng)站友情鏈接欄目6.3.2制作“軟件下載〞網(wǎng)頁6.3.1制作網(wǎng)站友情鏈接欄目 根據(jù)本課所學(xué)知識(shí)制作網(wǎng)站中常見的友情鏈接欄目，其中主要用到了圖像和文本鏈接以及滾動(dòng)字幕，這些都是網(wǎng)站建設(shè)中常用的技術(shù)。讀者熟練掌握本例之后，舉一反三，即可滿足多樣化的網(wǎng)站需求。6.3.1制作網(wǎng)站友情鏈接欄目操作思路新建一個(gè)空白網(wǎng)頁文檔，在其中劃分出鏈接欄，并將需要用到的圖像復(fù)制到保存網(wǎng)頁的文件夾中。插入圖像和文本，并在【屬性】面板中設(shè)置其屬性。添加各種效果。6.3.2制作“軟件下載〞網(wǎng)頁 根據(jù)本課及之前所學(xué)的知識(shí)制作一個(gè)“軟件下載〞網(wǎng)頁，其中主要用到了文件鏈接、空鏈接以及文本和圖像鏈接等。另外，還采用了表格布局技術(shù)，從而進(jìn)一步穩(wěn)固之前的學(xué)習(xí)內(nèi)容。6.3.2制作“軟件下載〞網(wǎng)頁操作思路新建一個(gè)空白網(wǎng)頁文檔并保存，將需要的圖像復(fù)制到保存該網(wǎng)頁的目錄下。使用表格進(jìn)行網(wǎng)頁布局，然后插入圖像和文本等。設(shè)置鏈接。第7課通過多媒體元素豐富網(wǎng)頁

本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)插入Flash媒體元素插入其他媒體元素具體要求掌握插入Flash動(dòng)畫、按鈕和文本的方法掌握插入FlashPaper的方法掌握插入Flash視頻的方法掌握設(shè)置Flash背景透明的方法了解插入Shockwave影片的方法了解插入JavaApplet的方法熟悉插入背景音樂的方法熟悉插入插件的方法本課導(dǎo)讀 網(wǎng)頁中如果只有圖像和文本，那么表現(xiàn)力畢竟有限。如果在網(wǎng)頁中參加一些動(dòng)感十足的Flash動(dòng)畫，那么可以吸引更多瀏覽者的注意。如果再加上背景音樂，那么就更能創(chuàng)立圖像、文本、動(dòng)畫和音樂四位一體的多媒體效果了。7.1插入Flash媒體元素在網(wǎng)頁中添加動(dòng)態(tài)元素可使網(wǎng)頁更具動(dòng)感、更吸引人。Flash動(dòng)畫是網(wǎng)頁中最常見的動(dòng)態(tài)元素。Flash動(dòng)畫是一種矢量動(dòng)畫，它具有動(dòng)畫文件小、效果好并能夠?qū)崿F(xiàn)交互等優(yōu)點(diǎn)。要制作Flash動(dòng)畫，可以使用Adobe公司最新推出的FlashCS3軟件。7.1插入Flash媒體元素 知識(shí)講解典型案例——制作“江南旅游〞網(wǎng)首頁知識(shí)講解 在DreamweaverCS3中，可以直接插入發(fā)布后的Flash動(dòng)畫文件〔.swf文件〕?？刹迦氲腇lash媒體元素包括Flash動(dòng)畫、Flash按鈕和Flash文本等。知識(shí)講解

1.了解Flash文件格式 2.插入Flash動(dòng)畫

3.插入Flash按鈕

4.插入Flash文本

5.插入FlashPaper

6.插入Flash視頻

7.設(shè)置Flash動(dòng)畫背景透明1.了解Flash文件格式要想在網(wǎng)頁中插入適宜的Flash媒體元素，首先得了解其文件格式。Flash文件主要有以下3種文件類型：.swf.fla.swt2.插入Flash動(dòng)畫 制作網(wǎng)頁時(shí)必須考慮到網(wǎng)絡(luò)的下載速度，所以在插入Flash動(dòng)畫文件之前最好將其壓縮為.swf格式。在網(wǎng)頁中插入Flash動(dòng)畫后，可在【屬性】面板中對其進(jìn)行大小調(diào)整和預(yù)覽等操作。插入Flash動(dòng)畫的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。3.插入Flash按鈕 DreamweaverCS3中集成了許多精美的Flash按鈕，這為增加網(wǎng)頁動(dòng)態(tài)效果提供了方便。在制作網(wǎng)頁時(shí)，也可以將自己制作的Flash按鈕插入到網(wǎng)頁中。插入Flash按鈕的方法與插入Flash動(dòng)畫類似，這里主要講解插入DreamweaverCS3中集成按鈕的方法。具體操作請教師參照教材進(jìn)行講解。4.插入Flash文本

在網(wǎng)頁中還可以插入Flash文本，插入Flash文本的方法與插入Flash按鈕的方法類似。Flash文本是DreamweaverCS3中集成的文本動(dòng)畫，可以通過【插入Flash文本】對話框插入。在網(wǎng)頁中插入Flash文本的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。

5.插入FlashPaper FlashPaper是一種特殊的Flash動(dòng)畫文件，可以通過FlashPaper軟件制作。制作網(wǎng)頁時(shí)，可以利用插入FlashPaper功能在網(wǎng)頁中插入FlashPaper文檔。這樣，在瀏覽器中翻開包含F(xiàn)lashPaper文檔的網(wǎng)頁時(shí)，用戶就可以瀏覽FlashPaper文檔中的所有頁面，而無須加載新的網(wǎng)頁；用戶也可以搜索、打印和縮放該文檔。在網(wǎng)頁中插入FlashPaper的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。6.插入Flash視頻

插入Flash視頻也是目前網(wǎng)頁制作中常用的方法。在DreamweaverCS3中，可以輕松地在網(wǎng)頁中插入Flash視頻。插入Flash視頻的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。7.設(shè)置Flash動(dòng)畫背景透明 有時(shí)，為了優(yōu)化網(wǎng)頁視覺效果，可在表格的單元格中插入背景圖像，然后再在該單元格中插入Flash動(dòng)畫，這時(shí)需要將Flash動(dòng)畫設(shè)置為背景透明，否那么就看不見下面的背景圖像了。設(shè)置Flash動(dòng)畫背景透明的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。典型案例——制作“江南旅游〞網(wǎng)首頁案例目標(biāo)

本案例將制作一個(gè)網(wǎng)站的首頁，主要練習(xí)插入Flash動(dòng)畫、Flash文本和Flash按鈕。典型案例——制作“江南旅游〞網(wǎng)首頁操作思路〔1〕設(shè)置頁面屬性，并插入圖像。〔2〕插入Flash動(dòng)畫?！?〕設(shè)置Flash動(dòng)畫背景透明?！?〕插入Flash文本?！?〕插入Flash按鈕。典型案例——制作“江南旅游〞網(wǎng)首頁操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。典型案例——制作“江南旅游〞網(wǎng)首頁案例小結(jié) 本案例練習(xí)了添加Flash動(dòng)畫、Flash文本、Flash按鈕和設(shè)置Flash動(dòng)畫背景透明等。為了使Dreamweaver能正常插入Flash文本和Flash按鈕，網(wǎng)頁的保存路徑中不能包含中文，而且Flash文本和Flash按鈕的保存路徑中也不能包含中文；如果網(wǎng)站文件夾名稱中由于某些因素一定要包含中文，那么可在不包含中文的路徑下創(chuàng)立新頁面，在此頁面中插入Flash文本或Flash按鈕，此時(shí)，Dreamweaver能正常創(chuàng)立所需的Flash文本或Flash按鈕，并生成.swf文件，然后將生成的.swf文件復(fù)制到網(wǎng)站所需目錄中，使用插入Flash的方法插入該文件，便可實(shí)現(xiàn)相對應(yīng)的同種功能。7.2插入其他媒體元素

在DreamweaverCS3中，除了可以插入Flash媒體元素外，還可添加其他媒體元素，如Shockwave影片、JavaApplet及背景音樂等。7.2插入其他媒體元素

知識(shí)講解

典型案例——在線影院

知識(shí)講解

下面講解在DreamweaverCS3中插入Shockwave影片、JavaApplet及背景音樂等的方法。知識(shí)講解

1.插入Shockwave影片 2.插入JavaApplet 3.插入背景音樂 4.插入插件

1.插入Shockwave影片

Shockwave影片具有文件小、下載速度快、被目前主流的瀏覽器所支持等優(yōu)點(diǎn)，廣泛應(yīng)用于網(wǎng)頁制作中。它是使用Director制作的多媒體影片文件。在DreamweaverCS3中插入Shockwave影片的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。2.插入JavaAppletJavaApplet是Java的應(yīng)用程序，是一種動(dòng)態(tài)、平安和跨平臺(tái)的網(wǎng)絡(luò)應(yīng)用程序，它能在網(wǎng)頁中實(shí)現(xiàn)一些特殊效果，如下雪、水紋和下雨等。JavaApplet常被嵌入到HTML語言中，可以實(shí)現(xiàn)較為復(fù)雜的控制和動(dòng)態(tài)效果。可以從網(wǎng)站上下載JavaApplet，如://java/zh等網(wǎng)站。在網(wǎng)頁中插入JavaApplet的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。3.插入背景音樂

在DreamweaverCS3中，可以為網(wǎng)頁添加背景音樂。背景音樂是在網(wǎng)頁后臺(tái)播放的音樂，在制作時(shí)可以采用在源代碼中添加代碼的方法來添加背景音樂，具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。

4.插入插件

如果想在瀏覽器中訪問更多類型的媒體對象，就必須借助插件。利用插件可以在網(wǎng)頁中插入各種類型的媒體元素。插件包括的范圍很廣，如視頻文件、音樂文件和動(dòng)畫文件等。前面介紹的Shockwave影片就是插件中的一員。插入插件的具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。

7.2.2典型案例——在線影院案例目標(biāo) 本案例將在網(wǎng)頁中插入一個(gè)插件，以豐富網(wǎng)頁內(nèi)容，主要練習(xí)插入插件的操作。7.2.2典型案例——在線影院操作思路〔1〕插入插件?！?〕設(shè)置插件屬性。7.2.2典型案例——在線影院操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。7.2.2典型案例——在線影院案例小結(jié) 本案例在“在線影院〞網(wǎng)頁中插入了一個(gè)插件，在制作過程中主要練習(xí)了插入插件以及設(shè)置插件屬性等操作。制作本案例主要是為了讓讀者靈活掌握插入插件的方法，從而學(xué)會(huì)在網(wǎng)頁制作過程中插入其他媒體元素。7.3上機(jī)練習(xí)7.3.1個(gè)人主頁7.3.2MTV欣賞7.3.1個(gè)人主頁 本練習(xí)將制作一個(gè)個(gè)人主頁，主要練習(xí)插入Flash動(dòng)畫、設(shè)置Flash動(dòng)畫背景透明以及添加背景音樂。7.3.1個(gè)人主頁操作思路：設(shè)置頁面屬性，并添加背景音樂。插入背景圖像，添加背景透明的Flash動(dòng)畫。插入Flash動(dòng)畫。7.3.2MTV欣賞 本練習(xí)將在“MTV欣賞〞頁面中插入一個(gè)插件，主要練習(xí)插入插件。7.3.2MTV欣賞操作思路：在網(wǎng)頁中插入“電影神話主題曲.wmv〞文件。在【屬性】面板中設(shè)置其寬度為“640像素〞、高度為“480像素〞。第8課使用層疊樣式美化網(wǎng)頁本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)層疊樣式的定義及創(chuàng)立層疊樣式的管理和應(yīng)用具體要求了解層疊樣式熟悉創(chuàng)立層疊樣式的方法掌握層疊樣式的管理掌握層疊樣式的應(yīng)用本課導(dǎo)讀 DreamweaverCS3中默認(rèn)的文本字號(hào)都比較大，需要用戶自己手動(dòng)來設(shè)置，但逐一設(shè)置很麻煩，運(yùn)用層疊樣式就可以很方便地對整個(gè)網(wǎng)頁中的文本進(jìn)行字體格式設(shè)置。另外，還可以用層疊樣式來創(chuàng)立十分精美的表格線框等。8.1層疊樣式的定義及創(chuàng)立 在設(shè)計(jì)網(wǎng)頁時(shí)，常常需要對網(wǎng)頁中各種元素的屬性進(jìn)行設(shè)置。一般來說，在同一個(gè)網(wǎng)站的所有頁面中，相同類型的網(wǎng)頁元素應(yīng)該具有相同的屬性，。如果逐一設(shè)置會(huì)做許多重復(fù)的工作，而且很容易出錯(cuò)；當(dāng)需要對屬性進(jìn)行修改時(shí)，也需要逐一進(jìn)行修改。為了解決這個(gè)問題，就需要使用CSS〔CascadingStyleSheets，即層疊樣式表〕來統(tǒng)一進(jìn)行控制。定義CSS樣式后，就可以把它應(yīng)用到不同的網(wǎng)頁元素中，這樣，所有應(yīng)用該CSS樣式的網(wǎng)頁元素就會(huì)具有相同的屬性；當(dāng)修改該CSS樣式后，所有應(yīng)用該CSS樣式的網(wǎng)頁元素的屬性就會(huì)一同被修改。8.1層疊樣式的定義及創(chuàng)立

知識(shí)講解

典型案例——設(shè)置網(wǎng)頁頁面屬性

知識(shí)講解 要想在文檔中使用CSS樣式，可以創(chuàng)立新的CSS樣式，也可以鏈接或?qū)胛臋n外部的CSS樣式。在創(chuàng)立CSS樣式前，我們先來了解一下CSS樣式的定義。知識(shí)講解 1.層疊樣式的定義 2.認(rèn)識(shí)【CSS樣式】面板 3.創(chuàng)立層疊樣式4.CSS樣式的具體定義

1.層疊樣式的定義CSS是“層疊樣式表〞的簡稱，通過CSS可以定制網(wǎng)頁中的文本格式，不僅可以控制一個(gè)頁面的文本格式，采用外部鏈接的方式還可以控制多個(gè)頁面的文本格式。CSS樣式有多種定義方式，主要有標(biāo)簽CSS樣式、類CSS樣式和偽類CSS樣式3種。2.認(rèn)識(shí)【CSS樣式】面板CSS的創(chuàng)立及管理根本上都是在【CSS樣式】面板中進(jìn)行的，下面就來認(rèn)識(shí)它。選擇【窗口】→【CSS樣式】命令或按【Shift＋F11】組合鍵，翻開【CSS樣式】面板。在該面板中可進(jìn)行新建、編輯、刪除CSS樣式和鏈接外部CSS文件等操作。3.創(chuàng)立層疊樣式在【CSS樣式】面板中創(chuàng)立CSS樣式的具體操作步驟如下：〔1〕單擊【CSS樣式】面板右上角的按鈕，在彈出的菜單中選擇【新建】命令，翻開【新建CSS規(guī)那么】對話框?！?〕在【選擇器類型】欄中選擇所需定義的樣式類型。〔3〕在【定義在】欄中可選擇樣式的種類或選擇只在當(dāng)前文檔中應(yīng)用所選樣式。這里選中單項(xiàng)選擇按鈕，然后單擊【確定】按鈕?！?〕翻開【保存樣式表文件為】對話框。在該對話框的【保存在】下拉列表框中選擇保存路徑，在【文件名】文本框中輸入該CSS樣式的名稱?！?〕單擊【保存】按鈕，保存新建的樣式表文件并自動(dòng)翻開CSS規(guī)那么定義對話框?！?〕在該對話框中進(jìn)行各項(xiàng)參數(shù)設(shè)置，設(shè)置完成后單擊【確定】按鈕，系統(tǒng)會(huì)自動(dòng)在【CSS樣式】面板中顯示出定義的樣式。4.CSS樣式的具體定義 CSS樣式有8個(gè)類別：1〕類型 2〕背景 3〕區(qū)塊4〕方框 5〕邊框 6〕列表7〕定位 8〕擴(kuò)展各類別中相關(guān)參數(shù)的具體含義請教師參照軟件和書中內(nèi)容進(jìn)行講解。典型案例——設(shè)置網(wǎng)頁頁面屬性

案例目標(biāo) 網(wǎng)頁頁面屬性也是通過創(chuàng)立層疊樣式來實(shí)現(xiàn)對整個(gè)網(wǎng)頁進(jìn)行控制的，下面就來設(shè)置網(wǎng)頁頁面屬性。典型案例——設(shè)置網(wǎng)頁頁面屬性操作思路〔1〕新建一個(gè)空白文檔并將所有要用的素材復(fù)制到保存網(wǎng)頁的位置?！?〕設(shè)置頁面屬性?！?〕插入網(wǎng)頁元素。典型案例——設(shè)置網(wǎng)頁頁面屬性操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。典型案例——設(shè)置網(wǎng)頁頁面屬性案例小結(jié) 本案例練習(xí)了網(wǎng)頁頁面屬性的常規(guī)設(shè)置，DreamweaverCS3將網(wǎng)頁頁面中最常用的一些層疊樣式集中在其中，以方便制作者進(jìn)行設(shè)置。8.2層疊樣式的管理和應(yīng)用 初次創(chuàng)立的層疊樣式可能不太符合實(shí)際需要，此時(shí)可以對層疊樣式進(jìn)行編輯。另外，局部層疊樣式創(chuàng)立好后，還需制作者手動(dòng)進(jìn)行應(yīng)用。8.2層疊樣式的管理和應(yīng)用

知識(shí)講解

典型案例——為表格應(yīng)用CSS樣式知識(shí)講解 在DreamweaverCS3中，可以對已創(chuàng)立的CSS樣式進(jìn)行修改和編輯，也可以刪除已創(chuàng)立的CSS樣式。知識(shí)講解

1.編輯CSS樣式 2.鏈接外部CSS樣式表文件 3.刪除CSS樣式 4.應(yīng)用CSS樣式

1.編輯CSS樣式 編輯CSS樣式有兩種方法：一種是在CSS規(guī)那么定義對話框中進(jìn)行修改，另一種是直接在【CSS樣式】面板中修改。2.鏈接外部CSS樣式表文件 CSS樣式通常只顯示在創(chuàng)立該樣式的頁面的【CSS樣式】面板中，通過鏈接可將其他頁面中的樣式應(yīng)用到當(dāng)前頁面中。鏈接外部樣式表的具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。3.刪除CSS樣式 如果不再需要某個(gè)CSS樣式，那么可以將其刪除。在【CSS樣式】面板中選擇要?jiǎng)h除的CSS樣式，再單擊按鈕，即可刪除該CSS樣式。

4.應(yīng)用CSS樣式設(shè)置好CSS樣式后，標(biāo)簽CSS樣式和偽類CSS樣式會(huì)自動(dòng)應(yīng)用到相應(yīng)的HTML標(biāo)簽和偽類上，而類CSS樣式需要手動(dòng)應(yīng)用到需要的網(wǎng)頁元素上。將類CSS樣式應(yīng)用到網(wǎng)頁元素上主要有3種方法：使用網(wǎng)頁元素的快捷菜單使用CSS樣式的快捷菜單使用網(wǎng)頁元素的【屬性】面板8.2.2典型案例——為表格應(yīng)用CSS樣式

案例目標(biāo) 本案例利用CSS樣式對節(jié)中制作的“我的課程表〞網(wǎng)頁進(jìn)行樣式設(shè)置，以美化網(wǎng)頁。8.2.2典型案例——為表格應(yīng)用CSS樣式操作思路〔1〕定義第1層表格的邊框和背景等屬性?！?〕定義第1層表格的單元格屬性?！?〕定義第2層表格的邊框和背景等屬性?！?〕定義第2層表格的單元格屬性。8.2.2典型案例——為表格應(yīng)用CSS樣式操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。8.2.2典型案例——為表格應(yīng)用CSS樣式案例小結(jié) 本案例練習(xí)用CSS樣式對表格進(jìn)行修飾，從中可以看出：CSS樣式是統(tǒng)一多個(gè)網(wǎng)頁風(fēng)格的工具，使用得當(dāng)可使網(wǎng)頁制作事半功倍而且效果協(xié)調(diào)統(tǒng)一。在一些大型網(wǎng)站中，所有頁面的風(fēng)格是一致的，但各個(gè)欄目之間有一些小的差異，在制作好一個(gè)欄目的CSS樣式文件后，再稍微修改一下即可。8.3上機(jī)練習(xí)8.3.1“再別康橋〞網(wǎng)頁頁面屬性設(shè)置8.3.2“再別康橋〞網(wǎng)頁其他樣式的設(shè)置及應(yīng)用8.3.1“再別康橋〞網(wǎng)頁頁面屬性設(shè)置 本練習(xí)對“再別康橋〞網(wǎng)頁進(jìn)行頁面屬性設(shè)置。8.3.1“再別康橋〞網(wǎng)頁頁面屬性設(shè)置操作思路：設(shè)置頁面背景。設(shè)置頁面默認(rèn)字體〔默認(rèn)字體的顏色要參照背景圖像的顏色進(jìn)行設(shè)置〕。設(shè)置鏈接樣式。8.3.2“再別康橋〞網(wǎng)頁其他樣式的設(shè)置及應(yīng)用 本練習(xí)對“再別康橋〞網(wǎng)頁進(jìn)行其他樣式的定義及應(yīng)用。8.3.2“再別康橋〞網(wǎng)頁其他樣式的設(shè)置及應(yīng)用操作思路：定義3種不同的字體樣式，并將其分別應(yīng)用于詩人簡介、詩歌標(biāo)題和詩歌內(nèi)容。定義頂部表格及單元格的樣式。定義圖片樣式。第9課使用框架進(jìn)行網(wǎng)頁布局本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)了解框架并創(chuàng)立框架框架及框架集的根本操作和屬性設(shè)置具體要求了解框架及框架集熟悉框架及框架集的創(chuàng)立掌握框架及框架集的根本操作掌握框架及框架集的屬性設(shè)置本課導(dǎo)讀 使用框架可以防止重復(fù)勞動(dòng)，如將共同的局部〔頂部的導(dǎo)航區(qū)和版權(quán)信息區(qū)〕做成單獨(dú)的網(wǎng)頁，然后通過框架將其鏈接到各個(gè)框架網(wǎng)頁中，從而節(jié)約時(shí)間，并減小整個(gè)網(wǎng)站的大小。9.1了解框架并創(chuàng)立框架 在布局頁面時(shí)除了可以使用層和表格外，還可以使用框架進(jìn)行布局，下面介紹框架的概念及創(chuàng)立方法。9.1了解框架并創(chuàng)立框架 知識(shí)講解典型案例——制作“在線小說〞框架網(wǎng)頁知識(shí)講解 框架的功能是把瀏覽器窗口劃分為假設(shè)干個(gè)區(qū)域，分別顯示不同的網(wǎng)頁?？蚣芗墓δ苁嵌x一組框架的布局和屬性。下面對框架及框架集的相關(guān)知識(shí)進(jìn)行介紹。知識(shí)講解 1.了解框架及框架集 2.框架及框架集的創(chuàng)立 3.框架及框架集的保存

1.了解框架及框架集在網(wǎng)頁上定義的一個(gè)區(qū)域就是單個(gè)框架，而框架集那么記錄了同一個(gè)網(wǎng)頁中多個(gè)框架的布局、超鏈接和屬性信息。利用框架可以把瀏覽器窗口劃分為假設(shè)干個(gè)區(qū)域，在每個(gè)區(qū)域中可以添加任意網(wǎng)頁元素，也可以分別顯示不同的網(wǎng)頁。1.了解框架及框架集 框架集與框架之間的關(guān)系其實(shí)就是包含與被包含的關(guān)系，框架集相當(dāng)于一個(gè)容器，框架那么是放在容器中的東西，框架集記錄了框架的位置以及框架中包含的網(wǎng)頁的鏈接地址。2.框架及框架集的創(chuàng)立 DreamweaverCS3的預(yù)定義框架集可以直接創(chuàng)立，也可以在頁面中加載。 1〕直接創(chuàng)立預(yù)定義框架集 2〕加載預(yù)定義框架集 3〕手動(dòng)創(chuàng)立框架集3.框架及框架集的保存 框架創(chuàng)立完成后，可將其保存。在DreamweaverCS3中，保存框架和框架集與保存一般網(wǎng)頁文檔有所不同，可以保存某個(gè)框架文檔，也可以單獨(dú)保存框架集文檔，還可以保存框架集和框架中出現(xiàn)的所有文檔。 1〕保存框架文檔 2〕保存框架集文檔 3〕保存框架集中的所有文檔典型案例——制作“在線小說〞框架網(wǎng)頁案例目標(biāo) 本案例主要練習(xí)利用框架進(jìn)行網(wǎng)頁布局。本案例中共有5個(gè)框架，其中頂部及底部各1個(gè)，中間3個(gè)。典型案例——制作“在線小說〞框架網(wǎng)頁操作思路〔1〕創(chuàng)立一個(gè)“上方固定，下方固定〞類型的框架集?！?〕將中間的框架進(jìn)行拆分、調(diào)整，使中間具有3個(gè)框架?！?〕保存框架及框架集。典型案例——制作“在線小說〞框架網(wǎng)頁操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。典型案例——制作“在線小說〞框架網(wǎng)頁案例小結(jié) 本案例練習(xí)了框架網(wǎng)頁的創(chuàng)立及保存，其中要重點(diǎn)掌握的是手動(dòng)進(jìn)行框架拆分的方法，要區(qū)分按住【Alt】鍵拆分與未按住【Alt】鍵直接拆分的區(qū)別。另外，本案例中保存框架及框架集時(shí)使用的都是快捷鍵，用戶可在DreamweaverCS3的【文件】菜單中找到相應(yīng)命令的快捷鍵。9.2框架及框架集的根本操作和屬性設(shè)置 框架創(chuàng)立完成后，還需對其進(jìn)行一些操作，如選擇框架、設(shè)置屬性和鏈接網(wǎng)頁等，下面分別進(jìn)行講解。9.2框架及框架集的根本操作和屬性設(shè)置知識(shí)講解典型案例——設(shè)置“在線小說〞網(wǎng)頁的框架及框架集屬性知識(shí)講解 可對框架及框架集進(jìn)行選擇和刪除等操作，下面對這些根本操作進(jìn)行講解。知識(shí)講解 1.框架及框架集的根本操作 2.刪除框架 3.框架及框架集的屬性設(shè)置 1.框架及框架集的根本操作 在對框架和框架集進(jìn)行屬性設(shè)置以及其他操作前，需要先選擇相應(yīng)的

溫馨提示

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

評論

0/150

提交評論