版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
DreamweaverCS3網(wǎng)頁設(shè)計培訓教程第1課網(wǎng)頁制作根底本課要點具體要求本課導讀上機練習本課要點網(wǎng)頁制作的相關(guān)知識初識DreamweaverCS3具體要求了解網(wǎng)頁的定義及組成元素了解網(wǎng)頁常見局部的稱謂及標準了解網(wǎng)頁制作的流程了解網(wǎng)頁配色技巧了解DreamweaverCS3的工作界面掌握DreamweaverCS3的根本設(shè)置掌握DreamweaverCS3的根本操作本課導讀 網(wǎng)頁是構(gòu)成網(wǎng)絡(luò)的主體,是互聯(lián)網(wǎng)信息的主要載體。在學習網(wǎng)頁制作前,需要了解網(wǎng)頁制作的相關(guān)知識,以便在以后的學習及工作中運用。另外,我們還需要認識網(wǎng)頁制作工具DreamweaverCS3的工作界面、根本設(shè)置以及一些簡單的應用,如啟動與退出DreamweaverCS3、新建、保存、預覽及翻開網(wǎng)頁文檔等。1.1網(wǎng)頁制作的相關(guān)知識 網(wǎng)上沖浪已成為生活的一個重要組成局部,人們通過網(wǎng)絡(luò)來獲取知識、資源,越來越多的企事業(yè)單位也將網(wǎng)頁作為宣傳公司品牌形象的一種重要手段,網(wǎng)頁也從以前的純文本形式逐步開展到圖、文、聲音及動畫兼有的綜合形式。下面我們就來學習網(wǎng)頁制作的各種知識。1.1網(wǎng)頁制作的相關(guān)知識 1.1.1知識講解 1.1.2典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁1.1.1知識講解 在開始學習網(wǎng)頁制作之前,應先了解一下什么是網(wǎng)頁以及一些相關(guān)的專業(yè)術(shù)語。1.1.1知識講解 1.網(wǎng)頁的定義及組成元素 2.網(wǎng)頁常見局部的稱謂及標準3.網(wǎng)頁制作的流程 4.網(wǎng)頁配色技巧1.網(wǎng)頁的定義及組成元素 瀏覽網(wǎng)頁時在瀏覽器中看到的一個個頁面就是網(wǎng)頁,其中包括多種多樣的網(wǎng)頁元素,如文本、圖像、動畫和音樂等。 文本是網(wǎng)頁最根本的組成元素,是網(wǎng)頁的主體局部。 圖像也是網(wǎng)頁中不可缺少的元素,是使網(wǎng)頁看起來更美觀的點睛之筆。動畫在網(wǎng)頁中也有廣泛的應用,網(wǎng)頁中常用的動畫格式主要有兩種:一種是SWF動畫,一種是GIF動畫。播放音樂是為瀏覽者提供聽覺感受的最正確選擇,但因為受音樂版權(quán)的約束,在專業(yè)網(wǎng)站中很少有使用背景音樂的,只在局部個人主頁或企業(yè)網(wǎng)站中有所使用。2.網(wǎng)頁常見局部的稱謂及標準 通常情況下,網(wǎng)頁的根本組成局部有Logo、Banner、導航條、超鏈接和版權(quán)信息等。3.網(wǎng)頁制作的流程 制作網(wǎng)頁不像編輯文檔那樣輕松,需要遵循一定的流程:收集資料和素材、規(guī)劃站點、制作網(wǎng)頁、測試站點、發(fā)布站點、更新和維護站點等。 1〕收集資料和素材 2〕規(guī)劃站點 3〕制作網(wǎng)頁 4〕測試站點 5〕發(fā)布站點 6〕更新和維護站點4.網(wǎng)頁配色技巧 網(wǎng)頁中的色彩通常用十六進制數(shù)來表示,如“#FF0000〞表示紅色,“#00FF00〞表示綠色、“#0000FF〞表示藍色、“#FFFF00〞表示黃色、“#FFFFFF〞表示白色、“#000000〞表示黑色等,即每兩位為一種色彩,從左到右分別為紅、綠、藍三色,每組色彩的取值均為00~FF〔十進制數(shù)255的十六進制值〕。典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁案例目標 本案例將使用“記事本〞制作一個簡單的網(wǎng)頁。典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁操作思路〔1〕利用以HTML代碼創(chuàng)立的文本文件可以通過“記事本〞等文本編輯程序直接進行編寫的特點制作本網(wǎng)頁文檔?!?〕創(chuàng)立圖像和文本等內(nèi)容?!?〕從結(jié)構(gòu)上講,HTML文件由兩大局部組成:一是頭部〔即<head>標簽與</head>標簽之間的內(nèi)容,如網(wǎng)頁的標題就放置在頭部〕,二是主體〔即<body>標簽與</body>標簽之間的內(nèi)容,也就是在瀏覽器中看到的內(nèi)容〕。為了與普通的文本文件相區(qū)別,將<html>標簽與</html>標簽分別放置在網(wǎng)頁代碼最前及最后,這樣,一個簡單的網(wǎng)頁就創(chuàng)立好了。典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁操作步驟
具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——用“記事本〞制作“welcome.html〞網(wǎng)頁案例小結(jié) 本案例用“記事本〞制作了一個簡單的網(wǎng)頁文檔。在制作過程中需注意的是:在保存文檔時一定要在【保存類型】下拉列表框中選擇【所有文件】選項;在輸入網(wǎng)頁文檔名稱時,一定要將網(wǎng)頁文檔的擴展名.htm〔或.html〕一并輸入,否那么“記事本〞程序會將其保存為純文本格式文檔。1.2初識DreamweaverCS3 在學習了網(wǎng)頁制作的根底知識后,接下來就應該認識網(wǎng)頁制作利器——DreamweaverCS3了。1.2初識DreamweaverCS3知識講解典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁知識講解 在學習DreamweaverCS3之前應先安裝DreamweaverCS3,安裝方法與其他應用程序的安裝根本相同,這里不再贅述。知識講解1.DreamweaverCS3的工作界面2.DreamweaverCS3的根本設(shè)置1.DreamweaverCS3的工作界面
2.DreamweaverCS3的根本設(shè)置 在使用DreamweaverCS3前,需要進行一些簡單的設(shè)置,以方便使用軟件。選擇【編輯】→【首選參數(shù)】命令,翻開【首選參數(shù)】對話框,如圖1.17所示。該對話框左側(cè)為【分類】列表框,右側(cè)為對應的設(shè)置選項;默認翻開的是【常規(guī)】分類,可單擊左側(cè)【分類】列表框中的選項進行切換,然后進行該分類的設(shè)置。典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁案例目標 本案例將用DreamweaverCS3制作“welcome2.html〞網(wǎng)頁,其效果和用“記事本〞創(chuàng)立的“welcome.html〞網(wǎng)頁相同典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁操作思路〔1〕創(chuàng)立一個新網(wǎng)頁并將其保存?!?〕在網(wǎng)頁中添加素材并設(shè)置效果?!?〕參加版權(quán)欄。典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁操作步驟
具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——用DreamweaverCS3創(chuàng)立“welcome2.html〞網(wǎng)頁案例小結(jié) 本案例用DreamweaverCS3創(chuàng)立了一個網(wǎng)頁,并在IE瀏覽器中進行了預覽。通過本案例的學習,可以看出Dreamweaver的強大功能及由此帶來的便捷。Dreamweaver最大的特點之一就是可視化的操作,使得用戶在不是很了解網(wǎng)頁的框架語言HTML時即可隨心所欲地對網(wǎng)頁元素進行添加、刪除以及各種屬性設(shè)置,大大地減輕了初學者的負擔,使初學者能夠輕松上手,為以后的學習打下根底。1.3上機練習 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)頁 本練習將使用“記事本〞制作“Goodmorning.html〞網(wǎng)頁文檔。1.3.1用“記事本〞創(chuàng)立“Goodmorning.html〞網(wǎng)頁操作思路:將素材文件夾中的所有圖像復制到網(wǎng)頁要保存的文件夾中,如“D:\web〞。翻開“記事本〞程序,新建一個文件,將其保存到與素材圖像相同的文件夾中,如“D:\web〞,并將其名稱設(shè)置為“Goodmorning.html〞。參照效果圖輸入所有的代碼,然后進行保存。1.3.2用DreamweaverCS3制作“Goodmorning2.html〞網(wǎng)頁本練習將使用DreamweaverCS3制作與節(jié)中用“記事本〞制作的網(wǎng)頁相同效果的網(wǎng)頁“Goodmorning2.html〞。1.3.2用DreamweaverCS3制作“Goodmorning2.html〞網(wǎng)頁操作思路:新建一個網(wǎng)頁并將其保存。將要用到的素材復制到保存網(wǎng)頁的同一目錄下。在網(wǎng)頁中插入圖像。第2課創(chuàng)立站點與效勞器本課要點具體要求本課導讀上機練習本課要點IIS的安裝與簡單配置站點的規(guī)劃及創(chuàng)立具體要求了解安裝IIS的必要性熟悉IIS的簡單配置了解站點的規(guī)劃掌握站點的創(chuàng)立方法掌握站點信息的修改方法掌握在【文件】面板中創(chuàng)立網(wǎng)站結(jié)構(gòu)的方法本課導讀 IIS是進行網(wǎng)頁制作、測試、提供WWW效勞和FTP效勞的重要效勞器軟件。要提供瀏覽網(wǎng)頁的效勞,必須安裝IIS中的WWW效勞。為方便管理和測試,需要在Dreamweaver中進行站點的創(chuàng)立及配置。2.1IIS的安裝與簡單配置 在學習制作網(wǎng)頁前,應將網(wǎng)頁的制作和測試環(huán)境創(chuàng)立好,其中包括IIS的安裝與配置及站點的規(guī)劃與創(chuàng)立等。2.1IIS的安裝與簡單配置 2.1.1知識講解 2.1.2典型案例——局域網(wǎng)Web效勞器的創(chuàng)立2.1.1知識講解 IIS是InternetInformationServices〔互聯(lián)網(wǎng)信息效勞〕的縮寫,是Microsoft公司的一種集成了多種Internet效勞〔如WWW效勞和FTP效勞等〕的軟件。下面就IIS的相關(guān)知識進行介紹。2.1.1知識講解
1.安裝IIS的必要性 2.IIS的安裝3.IIS的簡單配置1.安裝IIS的必要性 要發(fā)布網(wǎng)頁,讓其他用戶通過網(wǎng)絡(luò)〔Internet或企業(yè)內(nèi)部網(wǎng)Intranet〕訪問站點中的各個網(wǎng)頁,需要在放置站點的計算機中安裝相應的軟件,這就是Web效勞器軟件,IIS即包括該效勞。2.IIS的安裝 通常情況下,要作為Web效勞器的計算機中都需要安裝Windows2000或Windows2003操作系統(tǒng),對于一般的網(wǎng)頁制作和測試用Web效勞器或小型企事業(yè)作為Intranet的Web效勞器,安裝WindowsXP操作系統(tǒng)即可。下面,以在WindowsXP操作系統(tǒng)中安裝IIS為例進行講解。在安裝IIS之前,需要準備好WindowsXP的安裝光盤或?qū)indowsXP的安裝程序復制到計算機中。在WindowsXP中安裝IIS的具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。3.IIS的簡單配置 創(chuàng)立IIS主要是創(chuàng)立Web效勞器和FTP效勞器,用戶通過Web效勞器可以將各種信息有效、直觀地發(fā)布給局域網(wǎng)中的內(nèi)部用戶或Internet上的用戶;通過FTP效勞器可以在效勞器和客戶機之間快速地傳送文件。將IIS安裝好后,系統(tǒng)將自動創(chuàng)立一個默認的Web站點〔默認位于“C:\Inetpub\wwwroot〞文件夾中〕和一個默認的FTP站點〔默認位于“C:\Inetpub\ftproot〞文件夾中〕,用戶也可創(chuàng)立自己的Web站點和FTP站點,并修改和設(shè)置站點的屬性。3.IIS的簡單配置 這里,以系統(tǒng)自動創(chuàng)立的默認Web站點為例介紹如何設(shè)置Web站點的屬性,具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——局域網(wǎng)Web效勞器的創(chuàng)立案例目標 本案例將使用WindowsXP操作系統(tǒng)創(chuàng)立一個局域網(wǎng)Web效勞器。作為效勞器的計算機的IP地址為、Web效勞器的IP地址為,局域網(wǎng)中的用戶通過在IE瀏覽器中輸入“50〞進行內(nèi)部網(wǎng)的訪問。典型案例——局域網(wǎng)Web效勞器的創(chuàng)立操作思路〔1〕在要作為Web效勞器的計算機中安裝IIS,其安裝方法參見節(jié)中的“IIS的安裝〞局部,本案例中不再贅述?!?〕配置Web效勞器的IP地址為?!?〕創(chuàng)立站點文件夾,并配置Web效勞器。典型案例——局域網(wǎng)Web效勞器的創(chuàng)立操作步驟
具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——局域網(wǎng)Web效勞器的創(chuàng)立案例小結(jié) 本案例通過創(chuàng)立一個局域網(wǎng)Web效勞器為讀者演示了創(chuàng)立Web效勞器的整個流程。在局域網(wǎng)Web效勞器的配置中,正確設(shè)置網(wǎng)站首頁的名稱是非常重要的,當用戶在IE瀏覽器中直接輸入Web效勞器地址〔如〕時,IIS將會自動顯示首頁〔如index.asp〕;如果在站點中沒有發(fā)現(xiàn)該網(wǎng)頁文檔,那么按默認文檔列表框中的順序從上向下進行搜索,自動顯示發(fā)現(xiàn)的文檔,如果沒有發(fā)現(xiàn),那么會報錯。2.2站點的規(guī)劃及創(chuàng)立 創(chuàng)立IIS,只是完成了創(chuàng)立網(wǎng)頁制作和測試環(huán)境的一局部,要制作網(wǎng)頁,還需要在DreamweaverCS3中進行站點的規(guī)劃及創(chuàng)立。2.2站點的規(guī)劃及創(chuàng)立知識講解典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點的創(chuàng)立知識講解 在制作網(wǎng)頁之前,應先對要制作的網(wǎng)頁的站點進行規(guī)劃和創(chuàng)立,這樣就可利用站點的管理功能對站點中的文件進行管理和測試。知識講解1.站點的規(guī)劃2.站點的創(chuàng)立1.站點的規(guī)劃站點的規(guī)劃是指利用文件夾分門別類地保存不同的網(wǎng)頁內(nèi)容,合理地組織站點結(jié)構(gòu)。在規(guī)劃站點時,應先在本地磁盤上創(chuàng)立一個文件夾作為站點的根目錄,在制作過程中創(chuàng)立和編輯的所有網(wǎng)頁、圖像文件及網(wǎng)站中用到的其他內(nèi)容都應保存在該文件夾中。在發(fā)布站點時,只需將此文件夾中的所有內(nèi)容上傳到Web效勞器上即可。如果站點結(jié)構(gòu)復雜,內(nèi)容較多,那么還需建立子文件夾,以存放不同類別的網(wǎng)頁或圖像等。2.站點的創(chuàng)立站點規(guī)劃完成后就可以開始創(chuàng)立站點了。在DreamweaverCS3中,可以通過【站點管理】對話框進行站點的創(chuàng)立和管理操作。DreamweaverCS3中提供了本地站點、遠程站點和測試站點3種站點類型。創(chuàng)立站點和管理站點的具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點的創(chuàng)立案例目標 本案例將在DreamweaverCS3中創(chuàng)立一個局域網(wǎng)內(nèi)部網(wǎng)站的站點“gongsi〞。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點的創(chuàng)立操作思路〔1〕節(jié)已在D盤中創(chuàng)立了文件夾“gongsi〞,本實例中直接進行使用,不再創(chuàng)立站點文件夾?!?〕配置站點的本地信息。其中,站點名稱為“gongsi〞,保存位置為“D:\gongsi\〞。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點的創(chuàng)立操作思路〔3〕配置站點的測試效勞器。其中,在【效勞器模型】下拉列表框中選擇【ASPVBScript】選項,在【訪問】下拉列表框中選擇【本地/網(wǎng)絡(luò)】選項,在【測試效勞器文件】文本框中輸入與本地根文件夾相同的文件夾,即“D:\gongsi\〞?!?〕在【文件】面板中創(chuàng)立新文件夾及文件并進行編輯。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點的創(chuàng)立操作步驟
具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——局域網(wǎng)內(nèi)部網(wǎng)站站點的創(chuàng)立案例小結(jié) 本案例創(chuàng)立了一個局域網(wǎng)內(nèi)部網(wǎng)站的站點,在創(chuàng)立過程中需要注意:如果有以.asp為擴展名的動態(tài)網(wǎng)頁,那么必須配置測試效勞器信息,而且測試效勞器文件夾所在的位置應包含在IIS的站點中,否那么將不能正常顯示網(wǎng)頁內(nèi)容。2.3上機練習 2.3.1創(chuàng)立寢室Web效勞器2.3.2創(chuàng)立站點“Site〞2.3.1創(chuàng)立寢室Web效勞器 在寢室內(nèi)創(chuàng)立一個小型的局域網(wǎng),選擇一臺計算機作為Web效勞器,安裝IIS并進行配置,然后進行Web效勞器的測試。2.3.2創(chuàng)立站點“Site〞在Dreamweaver中新建一個站點,將其設(shè)置為不使用任何效勞器技術(shù),然后將其保存在D盤上的“Site〞文件夾內(nèi)。2.3.2創(chuàng)立站點“Site〞操作思路:在D盤上新建一個“Site〞文件夾。創(chuàng)立不使用任何效勞器技術(shù)的站點并將其保存在“Site〞文件夾內(nèi)。第3課用文本制作簡單網(wǎng)頁本課要點具體要求本課導讀上機練習本課要點添加網(wǎng)頁文本設(shè)置文本格式具體要求掌握添加普通文本、空格、特殊字符、水平線、日期及活動字幕的方法掌握設(shè)置字體格式的方法掌握設(shè)置段落格式的方法熟悉創(chuàng)立列表的方法本課導讀 文本是網(wǎng)頁的主體,是瀏覽者獲取信息最主要的途徑。添加文本及設(shè)置文本格式的方法與在Word中根本相同,但也有不同之處,如換行、分段和添加空格等。3.1添加網(wǎng)頁文本 文本是網(wǎng)頁的主體內(nèi)容,是向瀏覽者傳遞信息最主要的方式。從某種意義上說,文本是網(wǎng)頁存在的根底,是網(wǎng)頁中不可或缺的元素。3.1添加網(wǎng)頁文本
知識講解
典型案例——制作版權(quán)信息欄
知識講解
在網(wǎng)頁中添加文本與在Word等文字處理軟件中添加文本類似。知識講解 1.添加普通文本 2.添加空格 3.添加特殊字符 4.添加水平線 5.添加日期和時間 6.創(chuàng)立活動字幕1.添加普通文本
在Dreamweaver中,可以直接輸入文本,也可以從其他文檔中復制文本,還可以導入文本。具體操作請教師參照軟件和書中內(nèi)容進行講解。2.添加空格
如果要添加空格,需將輸入法切換到全角狀態(tài),然后再按空格鍵。如果未切換到全角狀態(tài),那么也可按【Ctrl+Shift+空格】組合鍵在文檔中添加空格。
3.添加特殊字符
在網(wǎng)頁制作過程中,時常需要添加一些特殊字符,如版權(quán)符號和注冊商標符號等,這就需要使用Dreamweaver的特殊字符添加功能。插入特殊字符的具體操作請教師參照軟件和書中內(nèi)容進行講解。4.添加水平線
使用水平線可以對多個對象進行分隔,使各個對象錯落有致。插入水平線的具體操作請教師參照軟件和書中內(nèi)容進行講解。5.添加日期和時間
如果需要,還可以在網(wǎng)頁中添加日期和時間,在網(wǎng)頁中添加日期或時間的具體操作請教師參照軟件和書中內(nèi)容進行講解。6.創(chuàng)立活動字幕 活動字幕也稱為滾動看板和滾動字幕,網(wǎng)站中常用的滾動公告就是一種活動字幕。使用HTML的<marquee>標簽即可創(chuàng)立活動字幕,具體操作請教師參照軟件和書中內(nèi)容進行講解。典型案例——制作版權(quán)信息欄
案例目標
本案例將練習在DreamweaverCS3中添加文本。典型案例——制作版權(quán)信息欄
操作思路 〔1〕新建一個空白網(wǎng)頁并劃分出版權(quán)欄?!?〕輸入文本?!?〕在【屬性】面板中設(shè)置其屬性和超鏈接,然后進行保存。操作步驟
具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——制作版權(quán)信息欄
案例小結(jié) 本案例通過創(chuàng)立一個版權(quán)信息欄演示了水平線、普通文本、特殊符號、普通文本超鏈接的創(chuàng)立等操作。版權(quán)信息欄通常位于頁面的底部,主要放置版權(quán)聲明、技術(shù)支持、網(wǎng)站管理超鏈接等信息,局部網(wǎng)站也將網(wǎng)頁訪問量和加載頁面所用時間等信息放在版權(quán)信息欄中。典型案例——制作版權(quán)信息欄
3.2設(shè)置文本格式 如果網(wǎng)頁中的文本樣式太單調(diào),那么會大大削弱網(wǎng)頁的外觀效果。通過對網(wǎng)頁文本格式的設(shè)置,可使文本變得美觀,讓網(wǎng)頁更具吸引力。3.2設(shè)置文本格式
知識講解
典型案例——美化版權(quán)信息欄
知識講解
設(shè)置文本格式包括對選中文本的字體、字號和顏色進行設(shè)置,以及對光標插入點所在段落的文本的對齊方式和縮進方式等進行設(shè)置,下面分別進行介紹。知識講解 1.設(shè)置字體格式 2.設(shè)置段落格式 3.添加列表
1.設(shè)置字體格式 同其他文字處理軟件一樣,在DreamweaverCS3中也可對文本的顏色、字體和字號等進行設(shè)置。1〕編輯字體列表2〕設(shè)置文本字體及字號3〕更改文本顏色 具體操作方法請教師參考軟件和書中內(nèi)容進行講解。2.設(shè)置段落格式 文本格式設(shè)置還包括對文本段落進行格式設(shè)置,如設(shè)置段落對齊方式、縮進方式和列表等。1〕文本段落對齊方式的設(shè)置2〕文本段落縮進方式的設(shè)置 具體操作方法請教師參考軟件和書中內(nèi)容進行講解。3.添加列表 列表有工程列表和編號列表兩種。列表常應用在條款或列舉等類型的文本中,如文章列表等。1〕添加工程列表2〕添加編號列表 具體操作方法請教師參考軟件和書中內(nèi)容進行講解。
典型案例——美化版權(quán)信息欄
案例目標 本案例將練習對“版權(quán).html〞網(wǎng)頁中的文本進行格式設(shè)置。
典型案例——美化版權(quán)信息欄操作思路〔1〕對水平線進行設(shè)置。〔2〕對所有的文本進行字號設(shè)置?!?〕對段落對齊方式進行設(shè)置?!?〕對最后一行文本進行字體及顏色等設(shè)置。典型案例——美化版權(quán)信息欄操作步驟
具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——美化版權(quán)信息欄案例小結(jié) 本案例通過美化“版權(quán).html〞為用戶演示了文本格式的設(shè)置方法。在設(shè)置文本格式時,正文文本應盡量使用12像素的宋體。另外,需要特別注意的是:對齊、縮進及列表,都是針對文本段落的,只有對文本段落才有效。3.3上機練習“導購〞網(wǎng)頁的制作“導購〞網(wǎng)頁的美化3.3.1“導購〞網(wǎng)頁的制作 根據(jù)本課所學知識制作“導購〞網(wǎng)頁文檔,主要運用普通文本的輸入、水平線的添加、空格的添加、換行與分段等知識點。
3.3.2“導購〞網(wǎng)頁的美化 根據(jù)本課所學知識對節(jié)制作的網(wǎng)頁文檔進行美化,主要運用字體的添加,字體、字號、顏色的設(shè)置,文本段落的對齊,列表的創(chuàng)立和加粗效果的運用等知識點。第4課插入圖像美化網(wǎng)頁本課要點具體要求本課導讀上機練習本課要點圖像的插入及根本編輯圖像高級操作具體要求熟悉圖像的插入熟悉圖像的根本編輯學會制作鼠標經(jīng)過圖像學會制作導航條本課導讀 除文本外,圖像是網(wǎng)頁最重要的組成局部。圖像在整個網(wǎng)頁中可以起到畫龍點睛的作用,圖文并茂的網(wǎng)頁比純文本更能吸引人的注意力。4.1圖像的插入及根本編輯
一個好的網(wǎng)頁除了文本之外,還應該有圖像來點綴。在網(wǎng)頁中恰到好處地使用圖像,能使網(wǎng)頁更加生動、美觀。4.1圖像的插入及根本編輯 知識講解4.1.2典型案例——“青春〞網(wǎng)頁的制作知識講解 圖像格式很多,但目前網(wǎng)頁中支持的圖像格式只有GIF,JPG〔也稱為JPEG〕和PNG3種。知識講解 1.圖像的插入 2.圖像的根本編輯 1.圖像的插入
使用Photoshop或Fireworks等圖像處理軟件制作好需要的圖像并保存為網(wǎng)頁支持的圖像格式后,即可使用DreamweaverCS3將其插入到網(wǎng)頁中。插入圖像的具體操作請教師參照軟件及書中內(nèi)容進行講解。
2.圖像的根本編輯
插入圖像并選中圖像后,可在【屬性】面板中編輯圖像的屬性,如設(shè)置圖像的大小、邊框和對齊方式等。
典型案例——“青春〞網(wǎng)頁的制作案例目標 本案例將練習在網(wǎng)頁中插入圖像并設(shè)置圖像的根本屬性。
典型案例——“青春〞網(wǎng)頁的制作操作思路〔1〕將圖像文件復制到“img1〞文件夾中并新建一個空白網(wǎng)頁文檔?!?〕插入背景圖像并設(shè)置其格式。〔3〕插入文本并設(shè)置格式。典型案例——“青春〞網(wǎng)頁的制作操作步驟
具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。
典型案例——“青春〞網(wǎng)頁的制作案例小結(jié) 本案例主要講解如何利用DreamweaverCS3在網(wǎng)頁中插入圖像并對圖像的屬性進行設(shè)置。在瀏覽網(wǎng)頁的時候,當鼠標光標移到圖像上時,鼠標光標右下角會出現(xiàn)“青春〞提示字樣,這是在【屬性】面板的【替換】文本框中輸入替換文本的效果。需要注意的是:圖像的對齊方式一定要為“左對齊〞,否那么得不到圖像和文本段落在同一水平區(qū)域的效果。 4.2圖像高級操作
DreamweaverCS3中提供了鼠標經(jīng)過圖像和導航條等網(wǎng)頁功能,下面對這些功能分別進行介紹。4.2圖像高級操作
知識講解
典型案例——制作網(wǎng)站導航條
知識講解 鼠標經(jīng)過圖像功能展示的是一種動態(tài)圖像的效果,當鼠標光標經(jīng)過圖像時圖像會發(fā)生變化。這種圖像由原始圖像和鼠標經(jīng)過圖像組成:當鼠標光標移動到原始圖像上時,將會顯示鼠標經(jīng)過圖像;當鼠標光標移出圖像范圍時,那么顯示原始圖像。知識講解
1.鼠標經(jīng)過圖像的制作 2.導航條的制作
1.鼠標經(jīng)過圖像的制作創(chuàng)立鼠標經(jīng)過圖像的具體操作步驟如下:〔1〕將光標插入點定位到需要創(chuàng)立鼠標經(jīng)過圖像的位置?!?〕選擇【插入記錄】→【圖像對象】→【鼠標經(jīng)過圖像】命令,翻開【插入鼠標經(jīng)過圖像】對話框。
1.鼠標經(jīng)過圖像的制作〔3〕在【圖像名稱】文本框中輸入圖像名稱,單擊【原始圖像】文本框后的【瀏覽】按鈕,在翻開的對話框中選擇原始圖像并單擊【確定】按鈕,返回【插入鼠標經(jīng)過圖像】對話框。用同樣的方法設(shè)置鼠標經(jīng)過圖像?!?〕選中復選框,可防止圖像顯示延遲。在【替換文本】文本框中輸入所需內(nèi)容。單擊【按下時,前往的URL】文本框后的【瀏覽】按鈕,在翻開的對話框中選擇要鏈接到的網(wǎng)頁文檔并單擊【確定】按鈕,返回【插入鼠標經(jīng)過圖像】對話框?!?〕設(shè)置完成后單擊【確定】按鈕,關(guān)閉【插入鼠標經(jīng)過圖像】對話框。2.導航條的制作
導航條由圖像或圖像組組成,這些圖像的顯示內(nèi)容隨操作不同而不同。導航條為在網(wǎng)頁和文件之間的跳轉(zhuǎn)提供了一條快捷途徑。制作導航條的具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。
典型案例——制作網(wǎng)站導航條
案例目標
本案例主要練習制作水平導航條。典型案例——制作網(wǎng)站導航條操作思路 〔1〕將需要的所有圖像復制到“img〞文件夾中。〔2〕新建一個文檔,在其中插入圖像并設(shè)置格式?!?〕插入導航條并進行設(shè)置。典型案例——制作網(wǎng)站導航條操作步驟
具體操作步驟請教師參照軟件及書中內(nèi)容進行講解。典型案例——制作網(wǎng)站導航條案例小結(jié) 本案例主要練習水平導航條的創(chuàng)立。首先要注意,插入的第1個圖像“l(fā)eft.png〞的對齊方式一定要設(shè)置為“左對齊〞,否那么該圖像不能和后面的導航條水平對齊,而是分別處于兩個段落,當然,在后面學習表格布局或DIV布局的相關(guān)知識后就不必設(shè)置該選項了。其次,如果在添加導航條元件的過程中操作有誤,那么可以在【導航條元件】列表框中選中該元件,然后單擊按鈕,刪除該元件之后再重新添加。添加完所有元件后,可以通過單擊和按鈕進行前后順序調(diào)整。4.3上機練習 4.3.1制作“新年快樂〞網(wǎng)頁 4.3.2為“新年快樂〞網(wǎng)頁制作鼠標經(jīng)過圖像4.3.1制作“新年快樂〞網(wǎng)頁 本練習將制作“新年快樂〞網(wǎng)頁,主要練習在網(wǎng)頁中添加圖像并對圖像的一些根本屬性進行設(shè)置。4.3.1制作“新年快樂〞網(wǎng)頁操作思路:在【頁面屬性】對話框中設(shè)置背景顏色為“#B30404〞。設(shè)置文檔段落的對齊方式為“居中對齊〞。依次插入“t.gif〞、“t2.gif〞和“n.png〞圖像,再設(shè)置“n.png〞的寬、高、鏈接和邊框等屬性〔因為給圖像添加了鏈接,Dreamweaver默認會給圖像加上1像素的邊框,以突出圖像的鏈接,但這樣很影響網(wǎng)頁的整體視覺效果,所以把邊框值設(shè)為“0〞,去掉邊框。至于寬和高的設(shè)置,適當即可,不過一定要同比縮放,以保證圖像不失真〕。輸入文本“新年快樂!Happynewyeartoyou!〞。插入底部圖像“b.gif〞。4.3.2為“新年快樂〞網(wǎng)頁制作鼠標經(jīng)過圖像
本練習將接著上面的練習制作網(wǎng)頁,主要練習制作鼠標經(jīng)過圖像。4.3.2為“新年快樂〞網(wǎng)頁制作鼠標經(jīng)過圖像操作思路:將節(jié)中制作的“新年快樂.html〞網(wǎng)頁另存為“新年快樂2.html〞。刪除“n.png〞,并重新添加原始圖像為“n.png〞、鼠標經(jīng)過圖像為“n2.png〞的鼠標經(jīng)過圖像。設(shè)置鼠標經(jīng)過圖像的屬性。第5課用表格標準網(wǎng)頁本課要點具體要求本課導讀上機練習本課要點表格的創(chuàng)立及根本編輯表格屬性設(shè)置具體要求掌握普通表格及嵌套表格的創(chuàng)立方法熟悉表格和單元格的選擇方法熟悉單元格的合并、拆分及刪除方法熟悉表格及單元格屬性的設(shè)置方法熟悉表格內(nèi)容的添加方法本課導讀 表格在日常辦公中很常見,它能使數(shù)據(jù)的顯示更清晰明了,網(wǎng)頁中的表格還有更重要的作用——進行頁面布局。表格可以將網(wǎng)頁分割為很多組合在一起的小塊,既加快了網(wǎng)頁的加載速度,又使網(wǎng)頁整齊而美觀。5.1創(chuàng)立及編輯表格 頁面布局是網(wǎng)頁制作的宏觀設(shè)置,使用表格進行頁面布局是其中最常用的手段。5.1創(chuàng)立及編輯表格 知識講解典型案例——制作“我的課程表〞表格知識講解
表格是進行頁面布局時非常有用的工具。利用表格進行頁面布局,可以將圖像或文本放置在表格的各個單元格中,從而精確控制其位置。知識講解 1.創(chuàng)立表格 2.編輯表格1.創(chuàng)立表格 在DreamweaverCS3中,表格分為普通表格和嵌套表格。普通表格即是傳統(tǒng)意義上的表格,嵌套表格是在表格的某個單元格內(nèi)插入的表格,即表格之中再嵌套表格。1〕創(chuàng)立普通表格2〕創(chuàng)立嵌套表格2.編輯表格 表格創(chuàng)立好后,可以對表格進行合并或拆分單元格、刪除或添加行〔或列〕等編輯操作。在表格中添加圖像和文本等內(nèi)容后,根據(jù)實際需要,也可對表格的大小等進行調(diào)整。1〕選擇整個表格2〕選擇行或列3〕選擇單元格4〕拆分單元格5〕合并單元格6〕添加行或列7〕刪除行或列5.1.2典型案例——制作“我的課程表〞表格案例目標 本案例主要練習創(chuàng)立表格和添加簡單的內(nèi)容。5.1.2典型案例——制作“我的課程表〞表格操作思路〔1〕創(chuàng)立一個5行6列的表格?!?〕將第1列的前兩個單元格合并,將第1行的后5個單元格合并。〔3〕在第3行的后5個單元格中各插入一個4行1列的嵌套表格,在第4行的后5個單元格中各插入一個2行1列的嵌套表格。〔4〕在相應單元格中添加文本或圖像。5.1.2典型案例——制作“我的課程表〞表格操作步驟
具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。5.1.2典型案例——制作“我的課程表〞表格案例小結(jié) 本案例利用表格創(chuàng)立了一個“我的課程表〞網(wǎng)頁,運用了創(chuàng)立表格、合并單元格、輸入文本以及插入圖像等知識。在DreamweaverCS3中,表格內(nèi)容的對齊方式默認為“左對齊〞,而在IE瀏覽器中那么為“居中對齊〞,所以在Dreamweaver和IE瀏覽器中的效果有一定差異,為了防止因表格內(nèi)容的默認對齊方式不同而引起瀏覽效果與預期效果的不同,需要在設(shè)計網(wǎng)頁時為表格設(shè)置屬性,下面我們就來學習怎樣設(shè)置表格屬性。5.2表格屬性設(shè)置
要使表格美觀,需要對表格及單元格的屬性進行設(shè)置,如設(shè)置邊框線顏色和單元格的對齊方式等。5.2表格屬性設(shè)置知識講解典型案例——美化“我的課程表〞表格知識講解
表格的屬性很多,包括表格的寬度、高度,表格包含的行數(shù)、列數(shù),表格中各單元格間的距離,單元格中內(nèi)容與單元格邊框線間的距離以及是否有邊框、邊框線粗細和表格背景顏色等,下面分別進行講解。知識講解 1.設(shè)置表格屬性 2.設(shè)置單元格屬性1.設(shè)置表格屬性
要進行表格屬性設(shè)置,需先選中表格。選中表格后,在【屬性】面板可進行表格的屬性設(shè)置。2.設(shè)置單元格屬性 除了可以設(shè)置整個表格的屬性外,還可對表格的單元格、行或列的屬性進行設(shè)置。選擇要設(shè)置屬性的單元格、行或列后,其【屬性】面板如下圖。在單元格的【屬性】面板中,可以對單元格中的文本進行屬性設(shè)置,其設(shè)置方法與普通文本相同。另外,還可以對單元格的對齊方式、寬和高及是否換行等進行設(shè)置。典型案例——美化“我的課程表〞表格案例目標 本案例主要練習表格屬性及單元格屬性的設(shè)置。典型案例——美化“我的課程表〞表格操作思路〔1〕設(shè)置第1層〔外層〕表格的屬性。〔2〕設(shè)置第1層表格的單元格屬性?!?〕設(shè)置第2層〔嵌套〕表格的屬性?!?〕設(shè)置第2層表格的單元格屬性。典型案例——美化“我的課程表〞表格操作步驟
具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。典型案例——美化“我的課程表〞表格案例小結(jié) 本案例練習美化表格,包括對表格屬性〔如表格邊框粗細、邊框顏色、間距、填充、對齊方式和高度等〕及單元格屬性〔如單元格的對齊方式和單元格高度等〕進行設(shè)置。通過這些設(shè)置,可以使創(chuàng)立的表格及其內(nèi)容的顯示效果更好。5.3上機練習“個人簡歷〞網(wǎng)頁的制作“個人簡歷〞網(wǎng)頁的美化5.3.1“個人簡歷〞網(wǎng)頁的制作 本練習將利用表格進行頁面布局。5.3.1“個人簡歷〞網(wǎng)頁的制作操作思路在DreamweaverCS3中創(chuàng)立一個9行1列、寬度為605像素、邊框為1像素、其余值保持默認設(shè)置的表格。將素材圖像“1px.gif〞復制到保存網(wǎng)頁文檔的位置。在第3行中插入圖像“1px.gif〞。在第4~8行中分別插入寬度為90%的嵌套表格。將各嵌套表格的第2行中的單元格合并,在合并后的單元格中分別插入寬度為80%的嵌套表格。輸入文本,然后對文本的屬性進行設(shè)置。“個人簡歷〞網(wǎng)頁的美化本練習將對節(jié)中制作的“個人簡歷〞網(wǎng)頁進行美化。“個人簡歷〞網(wǎng)頁的美化操作思路將“個人簡歷.html〞網(wǎng)頁另存為“個人簡歷2.html〞。選中最外層表格,設(shè)置填充、間距和邊框值分別為“0〞、“2〞和“0〞,背景顏色和邊框顏色均為“#FFFFFF〞。設(shè)置最外層表格9行單元格的水平對齊方式均為“居中對齊〞、第1行的垂直對齊方式為“頂端對齊〞、第2~6行的垂直對齊方式為“居中對齊〞。設(shè)置第1,2,3,9行單元格的背景顏色?!皞€人簡歷〞網(wǎng)頁的美化繼續(xù)設(shè)置所有第2層嵌套表格的填充、間距和邊框值分別為“0〞、“3〞和“1〞,邊框顏色為“#FFFFFF〞。設(shè)置所有第2層嵌套表格中各單元格的水平對齊方式以及背景顏色。設(shè)置所有第3層嵌套表格中各單元格的水平對齊方式以及背景顏色。第6課建立鏈接本課要點具體要求本課導讀上機練習本課要點使用網(wǎng)頁鏈接網(wǎng)頁鏈接分類具體要求了解網(wǎng)頁鏈接掌握插入鏈接的根本方法熟悉各種鏈接的概念本課導讀 網(wǎng)頁鏈接能豐富網(wǎng)頁的內(nèi)容和功能,帶給網(wǎng)站訪問者極大的方便。很難想像一個沒有鏈接的網(wǎng)站會是什么樣子:瀏覽者每讀一篇文章或查看一件商品的詳細信息,都要從瀏覽器中輸入準確的一串網(wǎng)絡(luò)地址,這種情況是讓人無法接受的。何況,沒有網(wǎng)站的導航鏈接,事先很難知道網(wǎng)頁信息的具體地址。網(wǎng)頁鏈接就像網(wǎng)站的骨架,將網(wǎng)頁和其他資源有序地整合起來,是網(wǎng)頁中不可缺少的一局部。6.1使用網(wǎng)頁鏈接 鏈接和文本、圖像等一樣,是網(wǎng)頁的主體,是連接網(wǎng)頁和其他資源的橋梁。通過鏈接,瀏覽者能順利訪問網(wǎng)站的信息資源。本節(jié)主要介紹怎樣在網(wǎng)頁中使用鏈接,并對鏈接進行簡單的屬性設(shè)置。6.1使用網(wǎng)頁鏈接知識講解典型案例——制作“古詩欣賞〞網(wǎng)頁知識講解
鏈接能夠?qū)崿F(xiàn)頁面之間的跳轉(zhuǎn),從而有機地將網(wǎng)站中的各個頁面聯(lián)系起來,是網(wǎng)頁中至關(guān)重要的元素。制作網(wǎng)頁時,可以通過將鏈接加在圖像和文字等上面來實現(xiàn)資源的連接。知識講解1.了解網(wǎng)頁中的鏈接2.插入網(wǎng)頁鏈接3.設(shè)置鏈接樣式1.了解網(wǎng)頁中的鏈接 鏈接由源端點和目標端點兩局部組成,有鏈接的一端稱為鏈接的源端點〔鼠標光標移到其上時通常會變?yōu)樾螤睢?,提供鏈接資源的一端稱為目標端點,即Internet地址,通常稱之為 URL。URL是英文“UniformResourceLocator〞的縮寫,其含義為“統(tǒng)一資源定位符〞,它定義了一種統(tǒng)一的網(wǎng)絡(luò)資源尋找方法,網(wǎng)絡(luò)上的所有資源〔如網(wǎng)頁、音頻、視頻、Flash動畫和壓縮文件等〕均可以通過這種方法訪問。URL的根本格式是“訪問方案://效勞器:端口/路徑/文件#錨記〞,例如“://bk.baidu:80/view/262.htm#11〞。2.插入網(wǎng)頁鏈接網(wǎng)頁鏈接通常添加在文本或圖像上,可以通過【屬性】面板快速添加。1〕添加文本鏈接2〕創(chuàng)立普通圖像鏈接3〕創(chuàng)立圖像熱點鏈接3.設(shè)置鏈接樣式默認的頁面鏈接樣式很可能與頁面的風格不協(xié)調(diào),如顏色和字體等,可以根據(jù)需要預先進行鏈接樣式的設(shè)置。具體操作步驟如下:〔1〕選擇【修改】→【頁面屬性】命令〔或單擊【屬性】面板下方的【頁面屬性】按鈕〕,翻開【頁面屬性】對話框?!?〕在左邊的【分類】列表框中選擇【鏈接】選項,將對話框切換到該分類。在該對話框中進行相應的設(shè)置,然后單擊【確定】按鈕,關(guān)閉對話框。6.1.2典型案例——制作“古詩欣賞〞網(wǎng)頁案例目標 本案例將練習在網(wǎng)頁中添加圖像和文本鏈接,并設(shè)置頁面鏈接樣式。6.1.2典型案例——制作“古詩欣賞〞網(wǎng)頁操作思路〔1〕設(shè)置頁面屬性和鏈接樣式?!?〕插入表格并設(shè)置表格樣式,利用表格進行網(wǎng)頁布局?!?〕插入嵌套表格?!?〕添加相應文本和圖像。〔5〕在文本和圖像上添加鏈接。6.1.2典型案例——制作“古詩欣賞〞網(wǎng)頁操作步驟
具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。6.1.2典型案例——制作“古詩欣賞〞網(wǎng)頁案例小結(jié) 本案例通過制作“古詩欣賞〞網(wǎng)頁演示了創(chuàng)立及設(shè)置文本鏈接和圖像鏈接的方法,讀者一定要掌握這些知識。6.2鏈接分類 在網(wǎng)頁中,除了指向頁面的鏈接外,還有文件鏈接、腳本鏈接、電子郵件鏈接、空鏈接和命名錨記等比較常見的鏈接類型。另外,鏈接還可分為相對鏈接和絕對鏈接兩類。本節(jié)將詳細介紹各種鏈接。6.2鏈接分類
知識講解
典型案例——完善版權(quán)信息知識講解 不同的鏈接可以實現(xiàn)不同的功能,下面分別介紹不同鏈接的功能和創(chuàng)立方法。知識講解1.相對鏈接2.絕對鏈接3.文件鏈接4.空鏈接5.電子郵件鏈接6.命名錨記1.相對鏈接 相對鏈接在頁面制作中最為常見,它只能鏈接網(wǎng)站內(nèi)部的頁面或資源,是鏈接目標相對于創(chuàng)立鏈接的頁面的路徑。例如,“about.html〞說明頁面“about.html〞和鏈接所在的頁面處于同一個文件夾中;又如,“img/logo.gif〞說明圖片“l(fā)ogo.gif〞在創(chuàng)立鏈接的頁面所處文件夾中的【img】文件夾中,依此類推,以斜線〔/〕分隔文件夾和文件來表示路徑。創(chuàng)立相對鏈接的具體操作請教師參照軟件和書中內(nèi)容進行講解。2.絕對鏈接 與相對鏈接對應的是絕對鏈接,絕對鏈接采用嚴格的尋址標準,包含通信方案、效勞器地址和效勞端口等,如“://news.163/img/netease_logo.gif〞,通過它就可以訪問“://news.163〞網(wǎng)站內(nèi)部“img〞文件夾中的圖片“netease_logo.gif〞。絕對鏈接的創(chuàng)立方法和相對鏈接的創(chuàng)立方法一樣,只是鏈接的地址需要手動輸入。3.文件鏈接
互聯(lián)網(wǎng)上的資源豐富多樣,除了網(wǎng)頁之外,還有音頻〔如MP3和鈴聲〕、視頻、應用軟件和小說等,下載這些文件就需要通過文件鏈接來實現(xiàn)。文件鏈接的創(chuàng)立方法和頁面鏈接相同,也包括相對鏈接和絕對鏈接兩種形式。4.空鏈接 為了實現(xiàn)一些自定義的功能或效果,常常要在網(wǎng)頁中添加腳本,如JavaScript和VBScript腳本等,而其中許多功能是與訪問者互動的,比較常見的是“設(shè)為首頁〞和“參加收藏〞等,它們都需要通過空鏈接來實現(xiàn)??真溄硬⒉粚崿F(xiàn)頁面的跳轉(zhuǎn),而是提供調(diào)用腳本的功能??真溄拥牡刂方y(tǒng)一用“#〞表示,需要在代碼中添加腳本。5.電子郵件鏈接電子郵件鏈接為瀏覽者提供了快速創(chuàng)立電子郵件的功能,用戶單擊此類鏈接后即可進入電子郵件的創(chuàng)立向?qū)В囊淮筇攸c就是預先設(shè)置好了收件人的郵件地址。電子郵件鏈接與頁面鏈接的不同之處在于使用的通信方案不同,電子郵件鏈接的通信方案是SMTP,所以在添加鏈接地址的時候加上“mailto:〞指定通信方案即可,如“mailto:www@163〞,后面的“www@163〞就是收件人的郵件地址。創(chuàng)立電子郵件鏈接的具體操作請教師參照軟件和書中內(nèi)容進行講解。6.命名錨記當瀏覽者翻開某網(wǎng)頁時,默認是從頁面頂部開始顯示的,如果網(wǎng)頁內(nèi)容超出窗口高度,那么需拖動滾動條往下瀏覽。當網(wǎng)頁比較長的時候,這種方式就有些讓瀏覽者費心了,比方一個公司介紹網(wǎng)頁,每個局部都有一段較長的圖文內(nèi)容,加在一起網(wǎng)頁就比較長了,這時,可以在網(wǎng)頁中使用命名錨記,單擊指向各命名錨記的鏈接即可跳到相應的局部去閱讀,而不需使用滾動條去尋找。創(chuàng)立命名錨記的過程如下:⑴在頁面某位置插入命名錨記。⑵在頁面中需要跳轉(zhuǎn)到命名錨記的位置插入指向?qū)^記的鏈接。
典型案例——完善版權(quán)信息
案例目標 本案例將對節(jié)中制作的“版權(quán)2.html〞網(wǎng)頁進行進一步完善,練習空鏈接和電子郵件鏈接的使用方法。典型案例——完善版權(quán)信息操作思路〔1〕翻開網(wǎng)頁文檔,在其中添加新的工程并設(shè)置格式?!?〕為插入的工程編輯代碼,設(shè)置鏈接。典型案例——完善版權(quán)信息操作步驟
具體操作步驟請教參照軟件和書中內(nèi)容進行講解。
典型案例——完善版權(quán)信息案例小結(jié) 本案例通過對節(jié)中制作的“版權(quán)2.html〞網(wǎng)頁進行進一步完善為用戶演示了“設(shè)為首頁〞和“參加收藏〞等空鏈接的創(chuàng)立方法以及電子郵件鏈接的使用方法。創(chuàng)立鏈接的通用方法是使用【屬性】面板輸入鏈接地址,建議讀者熟練掌握該方法,其余方法作為輔助即可。6.3上機練習6.3.1制作網(wǎng)站友情鏈接欄目6.3.2制作“軟件下載〞網(wǎng)頁6.3.1制作網(wǎng)站友情鏈接欄目 根據(jù)本課所學知識制作網(wǎng)站中常見的友情鏈接欄目,其中主要用到了圖像和文本鏈接以及滾動字幕,這些都是網(wǎng)站建設(shè)中常用的技術(shù)。讀者熟練掌握本例之后,舉一反三,即可滿足多樣化的網(wǎng)站需求。6.3.1制作網(wǎng)站友情鏈接欄目操作思路新建一個空白網(wǎng)頁文檔,在其中劃分出鏈接欄,并將需要用到的圖像復制到保存網(wǎng)頁的文件夾中。插入圖像和文本,并在【屬性】面板中設(shè)置其屬性。添加各種效果。6.3.2制作“軟件下載〞網(wǎng)頁 根據(jù)本課及之前所學的知識制作一個“軟件下載〞網(wǎng)頁,其中主要用到了文件鏈接、空鏈接以及文本和圖像鏈接等。另外,還采用了表格布局技術(shù),從而進一步穩(wěn)固之前的學習內(nèi)容。6.3.2制作“軟件下載〞網(wǎng)頁操作思路新建一個空白網(wǎng)頁文檔并保存,將需要的圖像復制到保存該網(wǎng)頁的目錄下。使用表格進行網(wǎng)頁布局,然后插入圖像和文本等。設(shè)置鏈接。第7課通過多媒體元素豐富網(wǎng)頁
本課要點具體要求本課導讀上機練習本課要點插入Flash媒體元素插入其他媒體元素具體要求掌握插入Flash動畫、按鈕和文本的方法掌握插入FlashPaper的方法掌握插入Flash視頻的方法掌握設(shè)置Flash背景透明的方法了解插入Shockwave影片的方法了解插入JavaApplet的方法熟悉插入背景音樂的方法熟悉插入插件的方法本課導讀 網(wǎng)頁中如果只有圖像和文本,那么表現(xiàn)力畢竟有限。如果在網(wǎng)頁中參加一些動感十足的Flash動畫,那么可以吸引更多瀏覽者的注意。如果再加上背景音樂,那么就更能創(chuàng)立圖像、文本、動畫和音樂四位一體的多媒體效果了。7.1插入Flash媒體元素在網(wǎng)頁中添加動態(tài)元素可使網(wǎng)頁更具動感、更吸引人。Flash動畫是網(wǎng)頁中最常見的動態(tài)元素。Flash動畫是一種矢量動畫,它具有動畫文件小、效果好并能夠?qū)崿F(xiàn)交互等優(yōu)點。要制作Flash動畫,可以使用Adobe公司最新推出的FlashCS3軟件。7.1插入Flash媒體元素 知識講解典型案例——制作“江南旅游〞網(wǎng)首頁知識講解 在DreamweaverCS3中,可以直接插入發(fā)布后的Flash動畫文件〔.swf文件〕。可插入的Flash媒體元素包括Flash動畫、Flash按鈕和Flash文本等。知識講解
1.了解Flash文件格式 2.插入Flash動畫
3.插入Flash按鈕
4.插入Flash文本
5.插入FlashPaper
6.插入Flash視頻
7.設(shè)置Flash動畫背景透明1.了解Flash文件格式要想在網(wǎng)頁中插入適宜的Flash媒體元素,首先得了解其文件格式。Flash文件主要有以下3種文件類型:.swf.fla.swt2.插入Flash動畫 制作網(wǎng)頁時必須考慮到網(wǎng)絡(luò)的下載速度,所以在插入Flash動畫文件之前最好將其壓縮為.swf格式。在網(wǎng)頁中插入Flash動畫后,可在【屬性】面板中對其進行大小調(diào)整和預覽等操作。插入Flash動畫的具體操作請教師參照軟件和書中內(nèi)容進行講解。3.插入Flash按鈕 DreamweaverCS3中集成了許多精美的Flash按鈕,這為增加網(wǎng)頁動態(tài)效果提供了方便。在制作網(wǎng)頁時,也可以將自己制作的Flash按鈕插入到網(wǎng)頁中。插入Flash按鈕的方法與插入Flash動畫類似,這里主要講解插入DreamweaverCS3中集成按鈕的方法。具體操作請教師參照教材進行講解。4.插入Flash文本
在網(wǎng)頁中還可以插入Flash文本,插入Flash文本的方法與插入Flash按鈕的方法類似。Flash文本是DreamweaverCS3中集成的文本動畫,可以通過【插入Flash文本】對話框插入。在網(wǎng)頁中插入Flash文本的具體操作請教師參照軟件和書中內(nèi)容進行講解。
5.插入FlashPaper FlashPaper是一種特殊的Flash動畫文件,可以通過FlashPaper軟件制作。制作網(wǎng)頁時,可以利用插入FlashPaper功能在網(wǎng)頁中插入FlashPaper文檔。這樣,在瀏覽器中翻開包含F(xiàn)lashPaper文檔的網(wǎng)頁時,用戶就可以瀏覽FlashPaper文檔中的所有頁面,而無須加載新的網(wǎng)頁;用戶也可以搜索、打印和縮放該文檔。在網(wǎng)頁中插入FlashPaper的具體操作請教師參照軟件和書中內(nèi)容進行講解。6.插入Flash視頻
插入Flash視頻也是目前網(wǎng)頁制作中常用的方法。在DreamweaverCS3中,可以輕松地在網(wǎng)頁中插入Flash視頻。插入Flash視頻的具體操作請教師參照軟件和書中內(nèi)容進行講解。7.設(shè)置Flash動畫背景透明 有時,為了優(yōu)化網(wǎng)頁視覺效果,可在表格的單元格中插入背景圖像,然后再在該單元格中插入Flash動畫,這時需要將Flash動畫設(shè)置為背景透明,否那么就看不見下面的背景圖像了。設(shè)置Flash動畫背景透明的具體操作請教師參照軟件和書中內(nèi)容進行講解。典型案例——制作“江南旅游〞網(wǎng)首頁案例目標
本案例將制作一個網(wǎng)站的首頁,主要練習插入Flash動畫、Flash文本和Flash按鈕。典型案例——制作“江南旅游〞網(wǎng)首頁操作思路〔1〕設(shè)置頁面屬性,并插入圖像?!?〕插入Flash動畫?!?〕設(shè)置Flash動畫背景透明?!?〕插入Flash文本。〔5〕插入Flash按鈕。典型案例——制作“江南旅游〞網(wǎng)首頁操作步驟
具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。典型案例——制作“江南旅游〞網(wǎng)首頁案例小結(jié) 本案例練習了添加Flash動畫、Flash文本、Flash按鈕和設(shè)置Flash動畫背景透明等。為了使Dreamweaver能正常插入Flash文本和Flash按鈕,網(wǎng)頁的保存路徑中不能包含中文,而且Flash文本和Flash按鈕的保存路徑中也不能包含中文;如果網(wǎng)站文件夾名稱中由于某些因素一定要包含中文,那么可在不包含中文的路徑下創(chuàng)立新頁面,在此頁面中插入Flash文本或Flash按鈕,此時,Dreamweaver能正常創(chuàng)立所需的Flash文本或Flash按鈕,并生成.swf文件,然后將生成的.swf文件復制到網(wǎng)站所需目錄中,使用插入Flash的方法插入該文件,便可實現(xiàn)相對應的同種功能。7.2插入其他媒體元素
在DreamweaverCS3中,除了可以插入Flash媒體元素外,還可添加其他媒體元素,如Shockwave影片、JavaApplet及背景音樂等。7.2插入其他媒體元素
知識講解
典型案例——在線影院
知識講解
下面講解在DreamweaverCS3中插入Shockwave影片、JavaApplet及背景音樂等的方法。知識講解
1.插入Shockwave影片 2.插入JavaApplet 3.插入背景音樂 4.插入插件
1.插入Shockwave影片
Shockwave影片具有文件小、下載速度快、被目前主流的瀏覽器所支持等優(yōu)點,廣泛應用于網(wǎng)頁制作中。它是使用Director制作的多媒體影片文件。在DreamweaverCS3中插入Shockwave影片的具體操作請教師參照軟件和書中內(nèi)容進行講解。2.插入JavaAppletJavaApplet是Java的應用程序,是一種動態(tài)、平安和跨平臺的網(wǎng)絡(luò)應用程序,它能在網(wǎng)頁中實現(xiàn)一些特殊效果,如下雪、水紋和下雨等。JavaApplet常被嵌入到HTML語言中,可以實現(xiàn)較為復雜的控制和動態(tài)效果??梢詮木W(wǎng)站上下載JavaApplet,如://java/zh等網(wǎng)站。在網(wǎng)頁中插入JavaApplet的具體操作請教師參照軟件和書中內(nèi)容進行講解。3.插入背景音樂
在DreamweaverCS3中,可以為網(wǎng)頁添加背景音樂。背景音樂是在網(wǎng)頁后臺播放的音樂,在制作時可以采用在源代碼中添加代碼的方法來添加背景音樂,具體操作請教師參照軟件和書中內(nèi)容進行講解。
4.插入插件
如果想在瀏覽器中訪問更多類型的媒體對象,就必須借助插件。利用插件可以在網(wǎng)頁中插入各種類型的媒體元素。插件包括的范圍很廣,如視頻文件、音樂文件和動畫文件等。前面介紹的Shockwave影片就是插件中的一員。插入插件的具體操作請教師參照軟件和書中內(nèi)容進行講解。
7.2.2典型案例——在線影院案例目標 本案例將在網(wǎng)頁中插入一個插件,以豐富網(wǎng)頁內(nèi)容,主要練習插入插件的操作。7.2.2典型案例——在線影院操作思路〔1〕插入插件?!?〕設(shè)置插件屬性。7.2.2典型案例——在線影院操作步驟
具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。7.2.2典型案例——在線影院案例小結(jié) 本案例在“在線影院〞網(wǎng)頁中插入了一個插件,在制作過程中主要練習了插入插件以及設(shè)置插件屬性等操作。制作本案例主要是為了讓讀者靈活掌握插入插件的方法,從而學會在網(wǎng)頁制作過程中插入其他媒體元素。7.3上機練習7.3.1個人主頁7.3.2MTV欣賞7.3.1個人主頁 本練習將制作一個個人主頁,主要練習插入Flash動畫、設(shè)置Flash動畫背景透明以及添加背景音樂。7.3.1個人主頁操作思路:設(shè)置頁面屬性,并添加背景音樂。插入背景圖像,添加背景透明的Flash動畫。插入Flash動畫。7.3.2MTV欣賞 本練習將在“MTV欣賞〞頁面中插入一個插件,主要練習插入插件。7.3.2MTV欣賞操作思路:在網(wǎng)頁中插入“電影神話主題曲.wmv〞文件。在【屬性】面板中設(shè)置其寬度為“640像素〞、高度為“480像素〞。第8課使用層疊樣式美化網(wǎng)頁本課要點具體要求本課導讀上機練習本課要點層疊樣式的定義及創(chuàng)立層疊樣式的管理和應用具體要求了解層疊樣式熟悉創(chuàng)立層疊樣式的方法掌握層疊樣式的管理掌握層疊樣式的應用本課導讀 DreamweaverCS3中默認的文本字號都比較大,需要用戶自己手動來設(shè)置,但逐一設(shè)置很麻煩,運用層疊樣式就可以很方便地對整個網(wǎng)頁中的文本進行字體格式設(shè)置。另外,還可以用層疊樣式來創(chuàng)立十分精美的表格線框等。8.1層疊樣式的定義及創(chuàng)立 在設(shè)計網(wǎng)頁時,常常需要對網(wǎng)頁中各種元素的屬性進行設(shè)置。一般來說,在同一個網(wǎng)站的所有頁面中,相同類型的網(wǎng)頁元素應該具有相同的屬性,。如果逐一設(shè)置會做許多重復的工作,而且很容易出錯;當需要對屬性進行修改時,也需要逐一進行修改。為了解決這個問題,就需要使用CSS〔CascadingStyleSheets,即層疊樣式表〕來統(tǒng)一進行控制。定義CSS樣式后,就可以把它應用到不同的網(wǎng)頁元素中,這樣,所有應用該CSS樣式的網(wǎng)頁元素就會具有相同的屬性;當修改該CSS樣式后,所有應用該CSS樣式的網(wǎng)頁元素的屬性就會一同被修改。8.1層疊樣式的定義及創(chuàng)立
知識講解
典型案例——設(shè)置網(wǎng)頁頁面屬性
知識講解 要想在文檔中使用CSS樣式,可以創(chuàng)立新的CSS樣式,也可以鏈接或?qū)胛臋n外部的CSS樣式。在創(chuàng)立CSS樣式前,我們先來了解一下CSS樣式的定義。知識講解 1.層疊樣式的定義 2.認識【CSS樣式】面板 3.創(chuàng)立層疊樣式4.CSS樣式的具體定義
1.層疊樣式的定義CSS是“層疊樣式表〞的簡稱,通過CSS可以定制網(wǎng)頁中的文本格式,不僅可以控制一個頁面的文本格式,采用外部鏈接的方式還可以控制多個頁面的文本格式。CSS樣式有多種定義方式,主要有標簽CSS樣式、類CSS樣式和偽類CSS樣式3種。2.認識【CSS樣式】面板CSS的創(chuàng)立及管理根本上都是在【CSS樣式】面板中進行的,下面就來認識它。選擇【窗口】→【CSS樣式】命令或按【Shift+F11】組合鍵,翻開【CSS樣式】面板。在該面板中可進行新建、編輯、刪除CSS樣式和鏈接外部CSS文件等操作。3.創(chuàng)立層疊樣式在【CSS樣式】面板中創(chuàng)立CSS樣式的具體操作步驟如下:〔1〕單擊【CSS樣式】面板右上角的按鈕,在彈出的菜單中選擇【新建】命令,翻開【新建CSS規(guī)那么】對話框?!?〕在【選擇器類型】欄中選擇所需定義的樣式類型?!?〕在【定義在】欄中可選擇樣式的種類或選擇只在當前文檔中應用所選樣式。這里選中單項選擇按鈕,然后單擊【確定】按鈕?!?〕翻開【保存樣式表文件為】對話框。在該對話框的【保存在】下拉列表框中選擇保存路徑,在【文件名】文本框中輸入該CSS樣式的名稱?!?〕單擊【保存】按鈕,保存新建的樣式表文件并自動翻開CSS規(guī)那么定義對話框?!?〕在該對話框中進行各項參數(shù)設(shè)置,設(shè)置完成后單擊【確定】按鈕,系統(tǒng)會自動在【CSS樣式】面板中顯示出定義的樣式。4.CSS樣式的具體定義 CSS樣式有8個類別:1〕類型 2〕背景 3〕區(qū)塊4〕方框 5〕邊框 6〕列表7〕定位 8〕擴展各類別中相關(guān)參數(shù)的具體含義請教師參照軟件和書中內(nèi)容進行講解。典型案例——設(shè)置網(wǎng)頁頁面屬性
案例目標 網(wǎng)頁頁面屬性也是通過創(chuàng)立層疊樣式來實現(xiàn)對整個網(wǎng)頁進行控制的,下面就來設(shè)置網(wǎng)頁頁面屬性。典型案例——設(shè)置網(wǎng)頁頁面屬性操作思路〔1〕新建一個空白文檔并將所有要用的素材復制到保存網(wǎng)頁的位置。〔2〕設(shè)置頁面屬性。〔3〕插入網(wǎng)頁元素。典型案例——設(shè)置網(wǎng)頁頁面屬性操作步驟
具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。典型案例——設(shè)置網(wǎng)頁頁面屬性案例小結(jié) 本案例練習了網(wǎng)頁頁面屬性的常規(guī)設(shè)置,DreamweaverCS3將網(wǎng)頁頁面中最常用的一些層疊樣式集中在其中,以方便制作者進行設(shè)置。8.2層疊樣式的管理和應用 初次創(chuàng)立的層疊樣式可能不太符合實際需要,此時可以對層疊樣式進行編輯。另外,局部層疊樣式創(chuàng)立好后,還需制作者手動進行應用。8.2層疊樣式的管理和應用
知識講解
典型案例——為表格應用CSS樣式知識講解 在DreamweaverCS3中,可以對已創(chuàng)立的CSS樣式進行修改和編輯,也可以刪除已創(chuàng)立的CSS樣式。知識講解
1.編輯CSS樣式 2.鏈接外部CSS樣式表文件 3.刪除CSS樣式 4.應用CSS樣式
1.編輯CSS樣式 編輯CSS樣式有兩種方法:一種是在CSS規(guī)那么定義對話框中進行修改,另一種是直接在【CSS樣式】面板中修改。2.鏈接外部CSS樣式表文件 CSS樣式通常只顯示在創(chuàng)立該樣式的頁面的【CSS樣式】面板中,通過鏈接可將其他頁面中的樣式應用到當前頁面中。鏈接外部樣式表的具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。3.刪除CSS樣式 如果不再需要某個CSS樣式,那么可以將其刪除。在【CSS樣式】面板中選擇要刪除的CSS樣式,再單擊按鈕,即可刪除該CSS樣式。
4.應用CSS樣式設(shè)置好CSS樣式后,標簽CSS樣式和偽類CSS樣式會自動應用到相應的HTML標簽和偽類上,而類CSS樣式需要手動應用到需要的網(wǎng)頁元素上。將類CSS樣式應用到網(wǎng)頁元素上主要有3種方法:使用網(wǎng)頁元素的快捷菜單使用CSS樣式的快捷菜單使用網(wǎng)頁元素的【屬性】面板8.2.2典型案例——為表格應用CSS樣式
案例目標 本案例利用CSS樣式對節(jié)中制作的“我的課程表〞網(wǎng)頁進行樣式設(shè)置,以美化網(wǎng)頁。8.2.2典型案例——為表格應用CSS樣式操作思路〔1〕定義第1層表格的邊框和背景等屬性?!?〕定義第1層表格的單元格屬性?!?〕定義第2層表格的邊框和背景等屬性。〔4〕定義第2層表格的單元格屬性。8.2.2典型案例——為表格應用CSS樣式操作步驟
具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。8.2.2典型案例——為表格應用CSS樣式案例小結(jié) 本案例練習用CSS樣式對表格進行修飾,從中可以看出:CSS樣式是統(tǒng)一多個網(wǎng)頁風格的工具,使用得當可使網(wǎng)頁制作事半功倍而且效果協(xié)調(diào)統(tǒng)一。在一些大型網(wǎng)站中,所有頁面的風格是一致的,但各個欄目之間有一些小的差異,在制作好一個欄目的CSS樣式文件后,再稍微修改一下即可。8.3上機練習8.3.1“再別康橋〞網(wǎng)頁頁面屬性設(shè)置8.3.2“再別康橋〞網(wǎng)頁其他樣式的設(shè)置及應用8.3.1“再別康橋〞網(wǎng)頁頁面屬性設(shè)置 本練習對“再別康橋〞網(wǎng)頁進行頁面屬性設(shè)置。8.3.1“再別康橋〞網(wǎng)頁頁面屬性設(shè)置操作思路:設(shè)置頁面背景。設(shè)置頁面默認字體〔默認字體的顏色要參照背景圖像的顏色進行設(shè)置〕。設(shè)置鏈接樣式。8.3.2“再別康橋〞網(wǎng)頁其他樣式的設(shè)置及應用 本練習對“再別康橋〞網(wǎng)頁進行其他樣式的定義及應用。8.3.2“再別康橋〞網(wǎng)頁其他樣式的設(shè)置及應用操作思路:定義3種不同的字體樣式,并將其分別應用于詩人簡介、詩歌標題和詩歌內(nèi)容。定義頂部表格及單元格的樣式。定義圖片樣式。第9課使用框架進行網(wǎng)頁布局本課要點具體要求本課導讀上機練習本課要點了解框架并創(chuàng)立框架框架及框架集的根本操作和屬性設(shè)置具體要求了解框架及框架集熟悉框架及框架集的創(chuàng)立掌握框架及框架集的根本操作掌握框架及框架集的屬性設(shè)置本課導讀 使用框架可以防止重復勞動,如將共同的局部〔頂部的導航區(qū)和版權(quán)信息區(qū)〕做成單獨的網(wǎng)頁,然后通過框架將其鏈接到各個框架網(wǎng)頁中,從而節(jié)約時間,并減小整個網(wǎng)站的大小。9.1了解框架并創(chuàng)立框架 在布局頁面時除了可以使用層和表格外,還可以使用框架進行布局,下面介紹框架的概念及創(chuàng)立方法。9.1了解框架并創(chuàng)立框架 知識講解典型案例——制作“在線小說〞框架網(wǎng)頁知識講解 框架的功能是把瀏覽器窗口劃分為假設(shè)干個區(qū)域,分別顯示不同的網(wǎng)頁??蚣芗墓δ苁嵌x一組框架的布局和屬性。下面對框架及框架集的相關(guān)知識進行介紹。知識講解 1.了解框架及框架集 2.框架及框架集的創(chuàng)立 3.框架及框架集的保存
1.了解框架及框架集在網(wǎng)頁上定義的一個區(qū)域就是單個框架,而框架集那么記錄了同一個網(wǎng)頁中多個框架的布局、超鏈接和屬性信息。利用框架可以把瀏覽器窗口劃分為假設(shè)干個區(qū)域,在每個區(qū)域中可以添加任意網(wǎng)頁元素,也可以分別顯示不同的網(wǎng)頁。1.了解框架及框架集 框架集與框架之間的關(guān)系其實就是包含與被包含的關(guān)系,框架集相當于一個容器,框架那么是放在容器中的東西,框架集記錄了框架的位置以及框架中包含的網(wǎng)頁的鏈接地址。2.框架及框架集的創(chuàng)立 DreamweaverCS3的預定義框架集可以直接創(chuàng)立,也可以在頁面中加載。 1〕直接創(chuàng)立預定義框架集 2〕加載預定義框架集 3〕手動創(chuàng)立框架集3.框架及框架集的保存 框架創(chuàng)立完成后,可將其保存。在DreamweaverCS3中,保存框架和框架集與保存一般網(wǎng)頁文檔有所不同,可以保存某個框架文檔,也可以單獨保存框架集文檔,還可以保存框架集和框架中出現(xiàn)的所有文檔。 1〕保存框架文檔 2〕保存框架集文檔 3〕保存框架集中的所有文檔典型案例——制作“在線小說〞框架網(wǎng)頁案例目標 本案例主要練習利用框架進行網(wǎng)頁布局。本案例中共有5個框架,其中頂部及底部各1個,中間3個。典型案例——制作“在線小說〞框架網(wǎng)頁操作思路〔1〕創(chuàng)立一個“上方固定,下方固定〞類型的框架集?!?〕將中間的框架進行拆分、調(diào)整,使中間具有3個框架。〔3〕保存框架及框架集。典型案例——制作“在線小說〞框架網(wǎng)頁操作步驟
具體操作步驟請教師參照軟件和書中內(nèi)容進行講解。典型案例——制作“在線小說〞框架網(wǎng)頁案例小結(jié) 本案例練習了框架網(wǎng)頁的創(chuàng)立及保存,其中要重點掌握的是手動進行框架拆分的方法,要區(qū)分按住【Alt】鍵拆分與未按住【Alt】鍵直接拆分的區(qū)別。另外,本案例中保存框架及框架集時使用的都是快捷鍵,用戶可在DreamweaverCS3的【文件】菜單中找到相應命令的快捷鍵。9.2框架及框架集的根本操作和屬性設(shè)置 框架創(chuàng)立完成后,還需對其進行一些操作,如選擇框架、設(shè)置屬性和鏈接網(wǎng)頁等,下面分別進行講解。9.2框架及框架集的根本操作和屬性設(shè)置知識講解典型案例——設(shè)置“在線小說〞網(wǎng)頁的框架及框架集屬性知識講解 可對框架及框架集進行選擇和刪除等操作,下面對這些根本操作進行講解。知識講解 1.框架及框架集的根本操作 2.刪除框架 3.框架及框架集的屬性設(shè)置 1.框架及框架集的根本操作 在對框架和框架集進行屬性設(shè)置以及其他操作前,需要先選擇相應的
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025國際貿(mào)易合同
- 2025開關(guān)插座采購合同標準版
- 2025年度高科技企業(yè)公司股權(quán)協(xié)議書模板3篇
- 2025年度智能家居生態(tài)鏈消費者協(xié)議3篇
- 2025年度新材料研發(fā)與應用公司整體轉(zhuǎn)讓協(xié)議版3篇
- 2025年度醫(yī)療設(shè)備融資租賃服務(wù)合同模板3篇
- 2025年度農(nóng)村宅基地房買賣合同(農(nóng)村電商服務(wù)站建設(shè))
- 2025年度公租房合同(含租賃合同簽訂及備案費用)3篇
- 2025年度環(huán)保處理設(shè)備專業(yè)維修與改造合同3篇
- 2025年度新能源汽車充電基礎(chǔ)設(shè)施合作項目協(xié)議書范本3篇
- DB11-T 693-2024 施工現(xiàn)場臨建房屋應用技術(shù)標準
- GB/T 45089-20240~3歲嬰幼兒居家照護服務(wù)規(guī)范
- 統(tǒng)編版2024-2025學年三年級上冊語文期末情景試卷(含答案)
- 2024年01月11344金融風險管理期末試題答案
- 浙江省杭州市八縣區(qū)2024-2025學年高二數(shù)學上學期期末學業(yè)水平測試試題
- 民政部主管社團管理辦法
- 工地施工臨時用水及計算
- 工作計劃酒店上半年工作總結(jié)及下半年工作計劃
- 淺談燃機電廠燃氣管道的完整性管理
- 防護設(shè)備操作手冊
- 《中小學教師職業(yè)生涯規(guī)劃與專業(yè)發(fā)展》講座
評論
0/150
提交評論