教學(xué)課件·網(wǎng)頁設(shè)計與制作第三版

1、網(wǎng)頁設(shè)計與制作第三版項目一搭建網(wǎng)站前期準(zhǔn)備工作初識網(wǎng)頁相關(guān)概念1構(gòu)建網(wǎng)站結(jié)構(gòu)2明確網(wǎng)頁設(shè)計的原則3了解網(wǎng)站建設(shè)流程4了解網(wǎng)頁制作工具5網(wǎng)站是網(wǎng)頁構(gòu)成的集合，搭建網(wǎng)站的主要任務(wù)是設(shè)計網(wǎng)頁。通過本項任務(wù)的學(xué)習(xí)，了解網(wǎng)頁的相關(guān)概念，包括網(wǎng)頁、網(wǎng)站、主頁、靜態(tài)網(wǎng)頁、動態(tài)網(wǎng)頁、網(wǎng)頁瀏覽機(jī)制等，從而為網(wǎng)頁設(shè)計打下基礎(chǔ)。任務(wù)1初識網(wǎng)頁相關(guān)概念任務(wù)1初識網(wǎng)頁相關(guān)概念一、網(wǎng)頁網(wǎng)頁又稱Web頁，它是網(wǎng)站的主要組成部分，是被瀏覽器解讀并顯示的HTML標(biāo)準(zhǔn)文件，由文字、表格、圖片、聲音、視頻、動畫以及各種功能按鈕組成。一個網(wǎng)頁上的文字、圖片、按鈕又可以是指向其他頁面的鏈接點，這些鏈接點稱為超級鏈接(簡稱超鏈接)。當(dāng)用

2、戶點擊這些超鏈接時，就會在瀏覽器中顯示被指向的頁面。網(wǎng)頁的超鏈接功能為人們從海量的網(wǎng)絡(luò)信息資源中獲取有用信息提供了簡便途徑。 網(wǎng)站(Web Site)，簡而言之，就是一組具有共同主題的網(wǎng)頁通過超鏈接的形式所組成的信息系統(tǒng)。網(wǎng)站的概念可以從以下四個方面加以理解。任務(wù)1初識網(wǎng)頁相關(guān)概念二、網(wǎng)站任務(wù)1初識網(wǎng)頁相關(guān)概念二、網(wǎng)站1從信息組成上來看2從存放形式上來看3從客戶訪問上來看4從運行管理上來看任務(wù)1初識網(wǎng)頁相關(guān)概念三、主頁主頁是網(wǎng)站的起始頁和索引頁，是用戶瀏覽網(wǎng)站的“入口處”。與一般網(wǎng)頁一樣，主頁可以存放各種信息，但它又是一個特殊的網(wǎng)頁，主要由導(dǎo)航及各種超鏈接構(gòu)成，用戶可以通過主頁提供的超鏈接訪問

3、其他頁面的信息和資源。任務(wù)1初識網(wǎng)頁相關(guān)概念四、靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 (一)靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是標(biāo)準(zhǔn)的HTML網(wǎng)頁文件，它的文件擴(kuò)展名是.htm或.html，可以包含文本、圖像、聲音、Flash動畫、客戶端腳本、ActiveX控件及Java Applet等。這種網(wǎng)頁不包含在服務(wù)器端運行的任何腳本，網(wǎng)頁上的每一行代碼都是由網(wǎng)頁設(shè)計人員預(yù)先編寫好后放置到Web服務(wù)器上的，在客戶端的瀏覽器上解讀的網(wǎng)頁代碼與服務(wù)器端的網(wǎng)頁代碼是一樣的。任務(wù)1初識網(wǎng)頁相關(guān)概念四、靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 (二)動態(tài)網(wǎng)頁 動態(tài)網(wǎng)頁是由HTML代碼和服務(wù)器端運行的腳本代碼所構(gòu)成的網(wǎng)頁文件。網(wǎng)頁的內(nèi)容動態(tài)地存儲在服務(wù)器數(shù)據(jù)庫中，當(dāng)用戶

4、請求訪問該頁面時，通過運行服務(wù)器端的腳本代碼、讀取數(shù)據(jù)庫信息來生成一個標(biāo)準(zhǔn)的HTML網(wǎng)頁文件，然后將其發(fā)送到客戶端的瀏覽器中進(jìn)行顯示。它們會隨請求的用戶和時間不同，返回給瀏覽器不同的網(wǎng)頁，因此稱其為動態(tài)網(wǎng)頁。任務(wù)1初識網(wǎng)頁相關(guān)概念四、靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)別可以從以下四個方面理解。從本質(zhì)上區(qū)分1從管理維護(hù)上區(qū)分2從設(shè)計技術(shù)上區(qū)分3從形式上區(qū)分4任務(wù)1初識網(wǎng)頁相關(guān)概念五、網(wǎng)頁瀏覽機(jī)制 (一)服務(wù)器與瀏覽器 互聯(lián)網(wǎng)是一個大型的、相互連接的分布式信息存儲系統(tǒng)，它是以客戶機(jī)/服務(wù)器模式工作的。通常來說，提供服務(wù)的一方稱為服務(wù)器，請求服務(wù)或接受服務(wù)的一方稱為客戶機(jī)。服務(wù)器是網(wǎng)絡(luò)的核心設(shè)

5、備，實際上是一種配置較高的計算機(jī)，安裝有服務(wù)器軟件(如Windows XP下的IIS)，其基本功能是提供網(wǎng)絡(luò)資源共享、網(wǎng)絡(luò)通信管理和網(wǎng)絡(luò)通信服務(wù)。客戶機(jī)是接受服務(wù)的計算機(jī)，配置可高可低，但必須安裝有瀏覽器軟件以解讀網(wǎng)頁文件。有些網(wǎng)頁文件資源在瀏覽器不能解讀時，會提示客戶機(jī)安裝相關(guān)的瀏覽器插件(如Flash播放器)。瀏覽器軟件有很多，如火狐(Mozilla Firefox)、遨游(Maxthon)、騰訊TT(Tencent Traveler),Netscape Navigator，常用的是Windows自帶的IE瀏覽器。任務(wù)1初識網(wǎng)頁相關(guān)概念五、網(wǎng)頁瀏覽機(jī)制 (二)URI、介紹 URL(Unif

6、orm Resource Locator，統(tǒng)一資源定位符)通常稱為網(wǎng)址，它是Internet上用來描述信息資源的字符串。其格式為:任務(wù)1初識網(wǎng)頁相關(guān)概念五、網(wǎng)頁瀏覽機(jī)制URL由下列三部分組成:協(xié)議或稱為服務(wù)方式該資源的主機(jī)域名或IP地址資源的具體地址，由路徑和文件名組成任務(wù)1初識網(wǎng)頁相關(guān)概念五、網(wǎng)頁瀏覽機(jī)制(三)網(wǎng)頁瀏覽機(jī)制客戶機(jī)訪問服務(wù)器中的網(wǎng)絡(luò)資源的下作原理任務(wù)2構(gòu)建網(wǎng)站結(jié)構(gòu)一、構(gòu)建網(wǎng)站的物理結(jié)構(gòu)物理結(jié)構(gòu)即目錄結(jié)構(gòu)，構(gòu)建網(wǎng)站的物理結(jié)構(gòu)就是根據(jù)網(wǎng)站主題的需要，為不同類型的資源分別建立目錄進(jìn)行保存。對于信息量小的站點，可以將不同類型的文件存放在不同的文件夾中。對于文件數(shù)量眾多、信息量大、文件類

7、型復(fù)雜的站點，應(yīng)根據(jù)不同的欄目建立目錄，在不同欄目的目錄下將不同類型的文件分類存放，如圖所示。信息量小的站點的目錄結(jié)構(gòu)信息量大的站點的目錄結(jié)構(gòu)任務(wù)2構(gòu)建網(wǎng)站結(jié)構(gòu)二、構(gòu)建網(wǎng)站的邏輯結(jié)構(gòu)(一)樹狀鏈接結(jié)構(gòu)樹狀鏈接結(jié)構(gòu)任務(wù)2構(gòu)建網(wǎng)站結(jié)構(gòu)二、構(gòu)建網(wǎng)站的邏輯結(jié)構(gòu)(二)網(wǎng)狀鏈接結(jié)構(gòu)網(wǎng)狀鏈接結(jié)構(gòu)任務(wù)2構(gòu)建網(wǎng)站結(jié)構(gòu)三、明確網(wǎng)站的物理結(jié)構(gòu)與邏輯結(jié)構(gòu)的關(guān)系網(wǎng)站的物理結(jié)構(gòu)與邏輯結(jié)構(gòu)是密不可分的，邏輯結(jié)構(gòu)建立在目錄結(jié)構(gòu)的基礎(chǔ)之上，良好的邏輯結(jié)構(gòu)可以方便用戶瀏覽網(wǎng)站;而物理結(jié)構(gòu)合理與否對網(wǎng)站的管理與維護(hù)及網(wǎng)站的邏輯結(jié)構(gòu)的建立都具有重大影響。對瀏覽者來說，最關(guān)心的是網(wǎng)站的邏輯結(jié)構(gòu)，即鏈接結(jié)構(gòu)，而對網(wǎng)站設(shè)計人員來說，兩種結(jié)

8、構(gòu)都必須合理策劃和構(gòu)建，要既方便瀏覽者瀏覽，又易于管理、更新和移植。任務(wù)3明確網(wǎng)頁設(shè)計的原則一、網(wǎng)頁設(shè)計的內(nèi)容原則文字圖像超鏈接動畫音頻、視頻等多媒體元素任務(wù)3明確網(wǎng)頁設(shè)計的原則二、網(wǎng)頁設(shè)計的用色原則1.網(wǎng)站的主題不同，配色方案也隨之不同2.要注意同類色、鄰近色、對比色的運用3.不要用大面積的高純度色彩、過多的顏色4.文字閱讀的部分要使用對比色5.選擇顏色要注意時效性任務(wù)3明確網(wǎng)頁設(shè)計的原則三、網(wǎng)頁設(shè)計的布局原則 (一)規(guī)則布局規(guī)則布局有一個基本型(上下、上中下、左右、左中右)，通過基本型可以擴(kuò)展出更多的布局形式。圖1-6就是規(guī)則布局的四種基本型與十二種簡單混合布局，以這十六種布局形式可以擴(kuò)展

9、出更多的布局形式。規(guī)則布局的最大特點是層次清晰，通過比例的合理劃分(可參照黃金分割比例)、色彩的運用、圖片、動畫、視頻等元素的合理編排可以達(dá)到重心平衡穩(wěn)定和區(qū)塊運用合理的布局效果。這類布局是網(wǎng)頁設(shè)計中最常見的形式，如“國”字形、“匡”字形、“呂”字形和“T”字形，它們適用于信息量較大的網(wǎng)站，如門戶網(wǎng)站、政府、企業(yè)、學(xué)校等正規(guī)網(wǎng)站。實際上，所有站點均可使用這種布局形式。任務(wù)3明確網(wǎng)頁設(shè)計的原則三、網(wǎng)頁設(shè)計的布局原則四種基本型與十二種簡單混合布局任務(wù)3明確網(wǎng)頁設(shè)計的原則三、網(wǎng)頁設(shè)計的布局原則 (二)不規(guī)則布局不規(guī)則布局的形式自由、個性張揚(yáng)、使用靈活，完全是一種藝術(shù)創(chuàng)意形式。但非專業(yè)人員較難掌握色彩

10、的運用、抽象的整體造型。常見的有封面型、廣告創(chuàng)意型(POP) , Flash動畫型，一般個人網(wǎng)站、娛樂型網(wǎng)站可采用這種形式，也有企業(yè)網(wǎng)站使用這種形式。任務(wù)3明確網(wǎng)頁設(shè)計的原則三、網(wǎng)頁設(shè)計的布局原則在網(wǎng)頁的布局中，不管使用什么形式的布局，都應(yīng)注意以下幾個問題:1.頁面布局整體上都是上中下形式2.頁面內(nèi)容的高度、寬度要適應(yīng)屏幕閱讀習(xí)慣3.重點信息、焦點信息、亮點信息要突出顯示4.圖文搭配做到穩(wěn)定、平衡5.主頁、欄目頁、文章頁的布局既要統(tǒng)一，又要有區(qū)別任務(wù)4了解網(wǎng)站建設(shè)流程一、確定網(wǎng)站的主題網(wǎng)站的內(nèi)容決定網(wǎng)站的主題，所謂網(wǎng)站的主題就是網(wǎng)站所要表達(dá)的主要內(nèi)容。確定網(wǎng)站的主題是網(wǎng)站建設(shè)中極為關(guān)鍵的一步。

11、作為網(wǎng)站設(shè)計者，一定要明確自己的網(wǎng)站應(yīng)該具有哪些內(nèi)容，網(wǎng)站應(yīng)向瀏覽者提供哪些信息，網(wǎng)站是為哪些瀏覽群體服務(wù)的，等等。給網(wǎng)站一個準(zhǔn)確的定位，切忌內(nèi)容過于龐雜，失去了中心主題而降低對瀏覽者的吸引力。對于初次接觸網(wǎng)站建設(shè)的人員，最好選擇自己喜愛或擅長的主題，如旅游主題、音樂主題、體育主題，以靜態(tài)頁面為主，保持網(wǎng)站結(jié)構(gòu)清晰，盡量不要經(jīng)常更新網(wǎng)站內(nèi)容，以便快速掌握網(wǎng)站建設(shè)的基本流程。在確定好網(wǎng)站主題后，還必須為網(wǎng)站起一個名字、設(shè)計一個Logo?？傊盐蘸镁W(wǎng)站建設(shè)的方向是網(wǎng)站建設(shè)成功的關(guān)鍵。任務(wù)4了解網(wǎng)站建設(shè)流程二、收集、制作和整理資料網(wǎng)站資料主要包括文本、圖像、動畫三大類。另外，依據(jù)網(wǎng)站的主題，還可能

12、需要準(zhǔn)備音頻、視頻等多媒體素材以及其他資料，如供瀏覽者下載的軟件、Word文檔。有些資料要進(jìn)行制作，如Flash動畫;有些資料還需要進(jìn)一步加工和處理，如在不影響顯示效果的情況下，圖片應(yīng)盡量壓縮得小一些，以加快頁面的加載速度?？傊?，收集、制作和整理資料時范圍要廣泛，在進(jìn)行網(wǎng)頁設(shè)計時再去粗取精。任務(wù)4了解網(wǎng)站建設(shè)流程三、規(guī)劃網(wǎng)站結(jié)構(gòu)規(guī)劃網(wǎng)站結(jié)構(gòu)包括兩方面的含義，即規(guī)劃網(wǎng)站的目錄結(jié)構(gòu)(物理結(jié)構(gòu))和鏈接結(jié)構(gòu)(邏輯結(jié)構(gòu))。物理結(jié)構(gòu)反映網(wǎng)站中各種信息資源的存放形式，邏輯結(jié)構(gòu)反映網(wǎng)站中信息的瀏覽形式。網(wǎng)站的物理結(jié)構(gòu)與邏輯結(jié)構(gòu)是密不可分的，邏輯結(jié)構(gòu)建立在目錄結(jié)構(gòu)的基礎(chǔ)之上，方便了用戶的瀏覽。瀏覽者最關(guān)心的是網(wǎng)

13、站的邏輯結(jié)構(gòu);而對于網(wǎng)站設(shè)計人員來說，兩種結(jié)構(gòu)都必須合理地策劃和構(gòu)建，既要方便瀏覽者瀏覽，又要易于網(wǎng)站的管理、更新和移植。物理結(jié)構(gòu)的合理與否對網(wǎng)站的管理與維護(hù)、邏輯結(jié)構(gòu)的建立都具有重大影響。這兩種結(jié)構(gòu)的設(shè)計方法在本項目任務(wù)2中已經(jīng)進(jìn)行了詳細(xì)說明，此處不再贅述。任務(wù)4了解網(wǎng)站建設(shè)流程四、設(shè)計制作網(wǎng)頁頁面設(shè)計包括內(nèi)容設(shè)計、用色設(shè)計和布局設(shè)計，并且主頁、欄目頁、文章頁的設(shè)計既要統(tǒng)一，又要有區(qū)別。本項目任務(wù)3中已經(jīng)對相關(guān)內(nèi)容進(jìn)行了詳細(xì)說明，此處不再贅述。任務(wù)4了解網(wǎng)站建設(shè)流程五、測試與發(fā)布網(wǎng)站 (一)網(wǎng)站的測試網(wǎng)站編輯制作完成后，最終需要在服務(wù)器上發(fā)布，但在發(fā)布之前必須對網(wǎng)站進(jìn)行測試。網(wǎng)站的測試主要包

14、括瀏覽器兼容性測試、鏈接測試和下載時間測試等，這些測試方法均可以使用Dreamweaver實現(xiàn)。任務(wù)4了解網(wǎng)站建設(shè)流程五、測試與發(fā)布網(wǎng)站(二)網(wǎng)站的發(fā)布確定網(wǎng)站空間申請域名網(wǎng)站上傳任務(wù)4了解網(wǎng)站建設(shè)流程六、維護(hù)與推廣網(wǎng)站 (一)維護(hù)網(wǎng)站 網(wǎng)站要經(jīng)常維護(hù)，保持內(nèi)容的新鮮感，才能夠吸引瀏覽者。網(wǎng)站的維護(hù)包括文章更新、頁面布局變化、欄目調(diào)整、圖形增刪、廣告設(shè)計、查看網(wǎng)站現(xiàn)有空間大小等內(nèi)容。如果網(wǎng)站空間發(fā)生變化，應(yīng)該及時對域名和空間進(jìn)行綁定。靜態(tài)網(wǎng)站的維護(hù)主要通過重新上傳更新內(nèi)容的方法實現(xiàn)，動態(tài)網(wǎng)站則是通過網(wǎng)站后臺管理界面實現(xiàn)對內(nèi)容的更新。任務(wù)4了解網(wǎng)站建設(shè)流程六、維護(hù)與推廣網(wǎng)站 (二)推廣網(wǎng)站網(wǎng)站有

15、付費的推廣方法，如印刷品廣告、媒體廣告、戶外廣告，也有免費的推廣方法，如搜索引擎注冊、網(wǎng)絡(luò)廣告交換、論壇發(fā)帖推廣。無論用什么方法推廣，網(wǎng)站的內(nèi)容都是第一位的，只有內(nèi)容具有影響力，搜索引擎才會自動收錄網(wǎng)站，各種論壇、QQ群才會廣泛傳播，所以網(wǎng)站內(nèi)容是網(wǎng)站最強(qiáng)的生命力。任務(wù)5了解網(wǎng)頁制作工具標(biāo)記型網(wǎng)頁制作工具“所見即所得”型網(wǎng)頁制作工具編程型網(wǎng)頁制作工具一二三END.網(wǎng)頁設(shè)計與制作第三版項目二利用HTML編寫網(wǎng)頁編寫公司簡介頁面1編寫產(chǎn)品展示頁面2編寫產(chǎn)品清單列表頁面3項目二利用HTML編寫網(wǎng)頁添加頁面的動態(tài)效果6編寫商務(wù)留言頁面4將頁面組合成網(wǎng)站5任務(wù)1編寫公司簡介頁面一、HTML入門(一)HT

16、ML概述HTML代碼是由若干HTML標(biāo)簽符號和由標(biāo)簽符號描述的各種元素組成的。HTML文檔結(jié)構(gòu)HTML標(biāo)簽注釋標(biāo)簽任務(wù)1編寫公司簡介頁面一、HTML入門(二)標(biāo)簽標(biāo)簽在與之間使用，用來給網(wǎng)頁命名，網(wǎng)頁的名稱將被顯示在瀏覽器的標(biāo)題欄中，該標(biāo)簽無屬性。任務(wù)1編寫公司簡介頁面一、HTML入門(三)標(biāo)簽標(biāo)簽定義HTML文檔的所有內(nèi)容，如文本、超鏈接、圖像、表格和列表。任務(wù)1編寫公司簡介頁面一、HTML入門(四)與文字排版有關(guān)的標(biāo)簽1. 標(biāo)簽標(biāo)簽的顯示任務(wù)1編寫公司簡介頁面一、HTML入門(四)與文字排版有關(guān)的標(biāo)簽2. 標(biāo)簽標(biāo)簽的顯示任務(wù)1編寫公司簡介頁面一、HTML入門(四)與文字排版有關(guān)的標(biāo)簽3.標(biāo)

17、題文字標(biāo)簽標(biāo)簽的顯示任務(wù)1編寫公司簡介頁面一、HTML入門(四)與文字排版有關(guān)的標(biāo)簽4.標(biāo)簽任務(wù)1編寫公司簡介頁面一、HTML入門(四)與文字排版有關(guān)的標(biāo)簽5.標(biāo)簽任務(wù)1編寫公司簡介頁面一、HTML入門(四)與文字排版有關(guān)的標(biāo)簽6.項目符號、項目編號標(biāo)簽嵌套列表顯示結(jié)果任務(wù)1編寫公司簡介頁面一、HTML入門(四)與文字排版有關(guān)的標(biāo)簽7.排版方法及說明空格的插入自動換行行距控制任務(wù)1編寫公司簡介頁面二、利用HTML制作公司簡介頁面羅德紡織品有限公司網(wǎng)站的公司簡介頁面任務(wù)2 編寫產(chǎn)品展示頁面一、插入多媒體素材(一)插入圖片的標(biāo)簽任務(wù)2 編寫產(chǎn)品展示頁面一、插入多媒體素材標(biāo)簽的顯示結(jié)果任務(wù)2 編寫產(chǎn)

18、品展示頁面一、插入多媒體素材(二)插入聲音、視頻、動畫等元素的標(biāo)簽1. 標(biāo)簽任務(wù)2 編寫產(chǎn)品展示頁面一、插入多媒體素材(二)插入聲音、視頻、動畫等元素的標(biāo)簽2. 標(biāo)簽任務(wù)2 編寫產(chǎn)品展示頁面二、用HTML制作產(chǎn)品展示頁面羅德紡織品有限公司網(wǎng)站的產(chǎn)品展示頁面任務(wù)2 編寫產(chǎn)品展示頁面二、用HTML制作產(chǎn)品展示頁面該網(wǎng)頁的制作步驟如下:(1)打開記事本(2)輸入以下代碼(3)保存為網(wǎng)頁文件(4)打開保存文件任務(wù)3編寫產(chǎn)品清單列表頁面一、認(rèn)識表格標(biāo)簽(一)表格標(biāo)簽表格標(biāo)簽的顯示任務(wù)3編寫產(chǎn)品清單列表頁面一、認(rèn)識表格標(biāo)簽(一)表格標(biāo)簽任務(wù)3編寫產(chǎn)品清單列表頁面一、認(rèn)識表格標(biāo)簽(一)表格標(biāo)簽任務(wù)3編寫產(chǎn)品

19、清單列表頁面一、認(rèn)識表格標(biāo)簽(一)表格標(biāo)簽任務(wù)3編寫產(chǎn)品清單列表頁面一、認(rèn)識表格標(biāo)簽(一)表格標(biāo)簽使用表格的注意事項:(1)表格中各單元格的內(nèi)容可以是文本、圖像、動畫、視頻、鏈接、表單、表單域等所有網(wǎng)頁元素。(2)依據(jù)單元格中的內(nèi)容，表格具有自動縮放功能。(3)表格可以嵌套使用，嵌套層數(shù)不限。任務(wù)3編寫產(chǎn)品清單列表頁面一、認(rèn)識表格標(biāo)簽(二)使用表格布局頁面表格布局的注意事項如下:(1)表格布局時邊框?qū)挾鹊闹狄欢ㄒO(shè)置為0，即不顯示邊框。(2)表格布局經(jīng)常通過表格的嵌套實現(xiàn)。(3)表格布局時的網(wǎng)頁代碼可讀性差。(4)多重嵌套的表格下載速度慢。任務(wù)3編寫產(chǎn)品清單列表頁面二、利用表格制作產(chǎn)品清單列表

20、頁面羅德紡織品有限公司網(wǎng)站的產(chǎn)品清單列表頁面任務(wù)4編寫商務(wù)留言頁面一、認(rèn)識表單標(biāo)簽(一)表單的概念表單是供瀏覽者填寫信息的頁面元素，服務(wù)器從中采集客戶端的信息，使網(wǎng)頁具有交互的功能。在包含表單元素的網(wǎng)頁中，當(dāng)用戶填寫完信息并提交(Submit)后，表單的內(nèi)容就從客戶端的瀏覽器傳送到服務(wù)器上，經(jīng)過服務(wù)器上的處理程序(如ASl程序)處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網(wǎng)頁就具有了交互性。任務(wù)4編寫商務(wù)留言頁面一、認(rèn)識表單標(biāo)簽(二)表單標(biāo)簽表單用標(biāo)簽對來創(chuàng)建，格式如下: action屬性的值是服務(wù)器端處理表單數(shù)據(jù)的程序名(包括路徑)，如果這個屬性是空值，即“”，則使用當(dāng)前文檔處理表單

21、數(shù)據(jù)。用戶提交表單后，服務(wù)器就執(zhí)行action屬性值表示的程序(如ASP程序)。任務(wù)4編寫商務(wù)留言頁面一、認(rèn)識表單標(biāo)簽(三)表單控件標(biāo)簽表單很像容器，組成它的主要內(nèi)容是表單控件，文本框、多行文本框、密碼框、列表框、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕等都是表單控件。下面介紹這些表單控件標(biāo)簽。任務(wù)4編寫商務(wù)留言頁面一、認(rèn)識表單標(biāo)簽(三)表單控件標(biāo)簽標(biāo)簽列表控件多行文本框控件任務(wù)4編寫商務(wù)留言頁面二、利用表單制作商務(wù)留言頁面羅德紡織品有限公司網(wǎng)站的商務(wù)留言頁面任務(wù)5將頁面組合成網(wǎng)站一、創(chuàng)建超鏈接內(nèi)部鏈接外部鏈接E-mail鏈接書簽鏈接其他文檔鏈接空鏈接任務(wù)5將頁面組合成網(wǎng)站二、利用超鏈接將各頁面

22、進(jìn)行連接羅德紡織品有限公司網(wǎng)站的主頁任務(wù)6添加頁面的動態(tài)效果一、網(wǎng)頁動態(tài)效果滾動字幕加入收藏設(shè)為主頁任務(wù)6添加頁面的動態(tài)效果二、制作網(wǎng)頁動態(tài)效果添加動態(tài)效果后的羅德紡織品有限公司網(wǎng)站的主頁任務(wù)6添加頁面的動態(tài)效果二、制作網(wǎng)頁動態(tài)效果左側(cè)單元格內(nèi)表格的嵌套形式和對齊方式END.網(wǎng)頁設(shè)計與制作第三版項目三利用Dreamweaver CS6制作網(wǎng)頁認(rèn)識Dreamweaver CS61制作簡單頁面2利用表格工具制作網(wǎng)頁3利用AP DIV和Spry制作網(wǎng)頁4項目三利用Dreamweaver CS6制作網(wǎng)頁基于行為與Spry特效制作網(wǎng)頁7利用框架技術(shù)制作網(wǎng)頁5使用CSS修飾和美化網(wǎng)頁6使用模板快速制作網(wǎng)頁

23、8任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面Dreamweaver CS6的起始頁任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面Dreamweaver CS6的標(biāo)準(zhǔn)工作界面任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(一)菜單欄菜單欄文件:管理文件，例如，新建、打開、保存、另存為、導(dǎo)人、導(dǎo)出及打印。編輯:編輯文本，例如，剪切、復(fù)制、粘貼、查找、替換和參數(shù)設(shè)置。查看:切換視圖模式以及顯示、隱藏標(biāo)尺、網(wǎng)格線等輔助視圖功能。插入:插入各種元素，例如，圖片、多媒體組件、表

24、格、框架及超級鏈接。修改:修改頁面元素，例如，在表格中再插人表格及拆分、合并單元格。格式:對文本進(jìn)行操作，例如，設(shè)置文本格式。命令:所有的附加命令項。站點:創(chuàng)建和管理站點。窗口:顯示和隱藏控制面板以及切換文檔窗口。幫助:聯(lián)機(jī)幫助功能。例如，按下Fl鍵，就會打開電子幫助文本。任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(二)面板組面板組“插入”面板組任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(四)標(biāo)準(zhǔn)工具欄標(biāo)準(zhǔn)下具欄標(biāo)準(zhǔn)工具欄包含執(zhí)行“文件”和“編輯”菜單中常見操作的按鈕:如新建、打開、在Bridge中瀏覽

25、、保存、全部保存、打印代碼、剪切、復(fù)制、粘貼、撤銷和重做，如圖所示。任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(五)樣式呈現(xiàn)工具欄“樣式呈現(xiàn)”工具欄（默認(rèn)情況下處于隱藏狀態(tài)）包含一些按鈕，如果使用依賴于媒體的樣式表，則這些按鈕可幫助您查看設(shè)計在不同媒體類型中的呈現(xiàn)方式。它還包含一個允許您啟用或禁用 CSS 樣式的按鈕。若要顯示該工具欄，請選擇“查看”“工具欄”“樣式呈現(xiàn)”。樣式呈現(xiàn)工具欄任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(六)文檔窗口當(dāng)打開或創(chuàng)建一個項目，進(jìn)人文檔窗口時，可以在文檔區(qū)域中進(jìn)行文字

26、輸人、表格插人和圖片編輯等操作。文檔窗口顯示當(dāng)前文檔，可以選擇以下任一視圖。任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(七)狀態(tài)欄文檔窗口底部的狀態(tài)欄提供與正創(chuàng)建的文檔有關(guān)的其他信息。狀態(tài)欄任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(八)“屬性”面板 “屬性”面板可以檢查和編輯當(dāng)前選定頁面元素(如文本和插人的對象)的最常用屬性。“屬性”面板的內(nèi)容根據(jù)選定的元素的不同會有所不同?！皩傩浴泵姘迦蝿?wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(九)“文件”面板使用“文件

27、”面板可以查看和管理Dreamweaver站點中的文件，如圖所示。文件面板任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(十) CSS樣式”面板 使用“CSS樣式”面板可以跟蹤影響當(dāng)前所選頁面元素的CSS規(guī)則和屬性或影響整個文檔的規(guī)則和屬性(“全部”模式)。使用“CSS樣式”面板頂部的切換按鈕可以在“全部”和“當(dāng)前”兩種模式之間切換，還可以在“全部”和“當(dāng)前”兩種模式下修改CSS屬性，如圖所示。CSS樣式”面板任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(十一)可視化輔助線Dreamweaver提供了幾種可視

28、化輔助線，幫助用戶設(shè)計文檔和大概估計文檔在瀏覽器中的外觀。用戶可以執(zhí)行以下任一操作: (1)將文檔窗口與所需的窗口對齊，查看元素如何更好地適合頁面。 (2)用跟蹤圖像作為頁面背景，可幫助用戶復(fù)制在插圖或圖像編輯應(yīng)用程序(如Adobe Photoshop或Adobe Fireworks)中創(chuàng)建的設(shè)計。 (3)用標(biāo)尺和輔助線為精確定位和調(diào)整頁面元素提供可視的提示。 (4)使用網(wǎng)格標(biāo)記可以精確定位絕對定位元素(AP元素)以及調(diào)整其大小。任務(wù)1認(rèn)識Dreamweaver CS6二、體驗Dreamweaver CS6的新功能(一)自適應(yīng)流體網(wǎng)格布局創(chuàng)建自適應(yīng)流體網(wǎng)格布局頁面任務(wù)1認(rèn)識Dreamweave

29、r CS6二、體驗Dreamweaver CS6的新功能(二)“多屏預(yù)覽”面板“多屏預(yù)覽”面板任務(wù)1認(rèn)識Dreamweaver CS6二、體驗Dreamweaver CS6的新功能(三)CSS過渡效果任務(wù)1認(rèn)識Dreamweaver CS6二、體驗Dreamweaver CS6的新功能(四)增強(qiáng)型j Query移動框架支持創(chuàng)建針對手機(jī)的文件任務(wù)1認(rèn)識Dreamweaver CS6二、體驗Dreamweaver CS6的新功能(四)增強(qiáng)型j Query移動框架支持應(yīng)用“jQuery Mobile色板”面板 任務(wù)1認(rèn)識Dreamweaver CS6二、體驗Dreamweaver CS6的新功能(五

30、)改善的FTP性能改善的站點管理任務(wù)1認(rèn)識Dreamweaver CS6二、體驗Dreamweaver CS6的新功能(六)更新的實時視圖通過實時視圖測試后的網(wǎng)頁任務(wù)2制作簡單頁面一、新建站點(一)設(shè)置站點的本地信息設(shè)置站點的本地信息任務(wù)2制作簡單頁面一、新建站點(二)設(shè)置遠(yuǎn)程服務(wù)器的連接方式選擇“站點”“新建站點”命令，在彈出的對話框中選擇“服務(wù)器”選項，在“基本”選項卡中選擇“連接方法”為“FTP”，然后分別設(shè)置網(wǎng)站的“FTP地址”“用戶名”和“密碼”等信息，如圖所示。任務(wù)2制作簡單頁面一、新建站點(三)完成站點建立站點設(shè)置完成后，可以看到“文件”面板中列出了站點中的文件，如圖3-2 2所

31、示。如果“文件”面板沒有顯示，可以執(zhí)行“窗口”“文件”命令查看(快捷鍵為F8)。站點文件夾任務(wù)2制作簡單頁面二、新建網(wǎng)頁(一)創(chuàng)建空白網(wǎng)頁(1)在菜單欄中執(zhí)行“文件”一“新建”命令，彈出“新建文檔”對話框，如圖所示?！靶陆ㄎ臋n”對話框任務(wù)2制作簡單頁面二、新建網(wǎng)頁(一)創(chuàng)建空白網(wǎng)頁 (2)在“空白頁”選項卡中選擇頁面類型為“HTML，以及布局為“無”，單擊“創(chuàng)建”按鈕，創(chuàng)建一個新的可編輯的網(wǎng)頁，在“標(biāo)題”文本框中輸人“南通羅德紡織品有限公司”，如圖所示。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(一)創(chuàng)建空白網(wǎng)頁 (3)在文檔窗口中輸人相應(yīng)代碼后，選擇“文件”“保存”命令，將網(wǎng)頁保存在站點中，文件命名為i

32、ndex. Html。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(二)設(shè)置頁面屬性 (1)在菜單欄執(zhí)行“修改”一“頁面屬性”命令，彈出“頁面屬性”對話框，如圖所示。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(二)設(shè)置頁面屬性 (2)設(shè)置網(wǎng)頁外觀。一般情況下，設(shè)置字體大小為12像素，文本顏色、背景顏色和背景圖像可自行設(shè)定。同時設(shè)置網(wǎng)頁四邊的邊距，一般只設(shè)置上邊距為0像素，如圖所示。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(二)設(shè)置頁面屬性(3)選擇背景圖像。單擊“瀏覽”按鈕，在彈出的“選擇圖像源文件”對話框中選擇背景圖片為201.jpg，然后單擊“確定”按鈕返回。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(三)預(yù)覽網(wǎng)頁 在菜單欄中執(zhí)行“文件

33、”“在瀏覽器中預(yù)覽”“Internet Explorer”命令或單擊工具欄中 按鈕即可打開IE瀏覽器，預(yù)覽網(wǎng)頁。網(wǎng)頁預(yù)覽效果如圖所示。任務(wù)2制作簡單頁面三、添加文本(一)添加文本(1)直接輸入文本。(2)從其他文檔復(fù)制并粘貼。粘貼文字到空白文檔任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式(1)用鼠標(biāo)選擇文檔窗口中第一行的“企業(yè)介紹”四個字，在“屬性”面板的“HTML中選擇“格式”為“標(biāo)題2，如圖所示。字體屬性設(shè)置任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式(2)在“屬性”面板的“CSS中設(shè)置對齊方式為居中對齊(單擊圖標(biāo))，彈出如圖所示的“新建CSS規(guī)則”對話框?！靶陆–SS規(guī)則”對話框

34、任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式(3)建立自定義類“. t1，然后設(shè)置字體顏色為“# FF0000，結(jié)果如圖3-30所示。文字格式設(shè)置完成任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式 (4)設(shè)置第一段文字為“楷體、14號、紅色、斜體”，第二段文字為“黑體、18號、藍(lán)色、居中對齊、粗體”。用鼠標(biāo)選擇第一段文字，在CSS“屬性”面板中選擇14號字體，隨即彈出“新建CSS規(guī)則”對話框，定義自定義類“. t2，如圖所示，完成后單擊“確定”按鈕。定義自定義類“. t2任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式編輯字體列表。Dreamweaver CS6預(yù)設(shè)的可供選擇的只有13項

35、英文字體，要想使用其他字體，需編輯字體列表。編輯字體列表任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式 分別設(shè)置第一段文字和第二段文字的字體。選中對應(yīng)文字，從CSS“屬性”面板中的“字體”下拉列表中分別選擇“楷體”“黑體”。設(shè)置字體大小。從CSS屬性”面板中的“大小”下拉列表中分別選擇14號和18號字體。字號數(shù)字從小到大，對應(yīng)的字也逐漸增大。設(shè)置文字顏色。單擊CSS屬性”面板中的顴按鈕，在彈出的顏色列表中選擇所需要的顏色，即紅色和藍(lán)色。設(shè)置字符樣式。單擊CSS屬性”面板中的樹或俐按鈕，將選定文本設(shè)置為粗體或斜體，如圖所示。設(shè)置字符樣式任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式各項設(shè)置完

36、成后，預(yù)覽網(wǎng)頁，如圖所示。預(yù)覽字體設(shè)置效果任務(wù)2制作簡單頁面三、添加文本(三)文字的其他設(shè)置換行文本空格插入特殊字符插人水平線插人項目列表插人文件頭標(biāo)簽任務(wù)2制作簡單頁面三、添加文本(三)文字的其他設(shè)置首選參數(shù)設(shè)置任務(wù)2制作簡單頁面三、添加文本(三)文字的其他設(shè)置插人特殊字符任務(wù)2制作簡單頁面三、添加文本(三)文字的其他設(shè)置水平線屬性設(shè)置列表屬性設(shè)置文件頭內(nèi)容任務(wù)2制作簡單頁面四、添加圖像目前互聯(lián)網(wǎng)上支持的圖像格式主要有GIF, JPEG和PNG三種，其中使用最為廣泛的是GIF和JPEG。在制作網(wǎng)頁時，要先構(gòu)想好網(wǎng)頁布局，在圖像處理軟件中將需要插入的圖片進(jìn)行處理，然后存放在站點根目錄下的文件夾

37、中。任務(wù)2制作簡單頁面四、添加圖像(一)在“公司介紹”四個字符下面添加企業(yè)圖片任務(wù)2制作簡單頁面四、添加圖像(二)選擇圖像路徑任務(wù)2制作簡單頁面四、添加圖像 注意:如果要插入的圖片不在根文件夾中，會彈出如圖所示的對話框，提醒用戶將該圖片保存到根文件夾中，一般情況下都單擊“是”按鈕，然后將該圖片保存到根文件夾中。任務(wù)2制作簡單頁面四、添加圖像(三)設(shè)置圖像屬性圖像的屬性任務(wù)2制作簡單頁面四、添加圖像(四)在Dreamweaver中編輯圖像Dreamweaver提供了基本的圖像編輯功能，可以在Dreamweaver中重新取樣、裁剪、優(yōu)化和銳化圖像，還可以調(diào)整圖像的亮度和對比度。Dreamweave

38、r的圖像編輯工具旨在使網(wǎng)頁設(shè)計者能與內(nèi)容設(shè)計者(負(fù)責(zé)創(chuàng)建網(wǎng)站中使用的圖像文件)輕松地實現(xiàn)協(xié)作。任務(wù)2制作簡單頁面四、添加圖像(五)插入其他圖像元素1.插入圖像占位符任務(wù)2制作簡單頁面四、添加圖像(五)插入其他圖像元素2.鼠標(biāo)經(jīng)過圖像任務(wù)2制作簡單頁面五、添加鏈接鏈接是一個網(wǎng)站的靈魂，一個網(wǎng)站是由多個頁面組成的，而這些頁面之間依據(jù)鏈接確定相互之間的導(dǎo)航關(guān)系。超級鏈接是指站點內(nèi)不同網(wǎng)頁之間、站點與Web之間的連接關(guān)系，它可以使站點內(nèi)的所有網(wǎng)頁成為有機(jī)的整體，還能夠使不同站點之間建立聯(lián)系。超級鏈接由兩部分組成:鏈接載體和鏈接目標(biāo)。任務(wù)2制作簡單頁面五、添加鏈接(一)關(guān)于鏈接路徑根路徑相對路徑絕對路徑

39、任務(wù)2制作簡單頁面五、添加鏈接(二)創(chuàng)建外部鏈接1.直接輸入地址鏈接屬性設(shè)置任務(wù)2制作簡單頁面五、添加鏈接(三)創(chuàng)建內(nèi)部鏈接創(chuàng)建內(nèi)部鏈接任務(wù)2制作簡單頁面五、添加鏈接(四)創(chuàng)建E-mail鏈接創(chuàng)建E-mail鏈接手動輸人電子郵件地址任務(wù)2制作簡單頁面五、添加鏈接(五)創(chuàng)建錨記鏈接插人命名錨記插人命名錨記后的網(wǎng)頁任務(wù)2制作簡單頁面五、添加鏈接(五)創(chuàng)建錨記鏈接創(chuàng)建錨記鏈接任務(wù)2制作簡單頁面五、添加鏈接(六)制作圖像映射圖片的“屬性”面板熱點鏈接任務(wù)2制作簡單頁面六、添加多媒體插入Flash插入FLV視頻添加背景音樂插入視頻任務(wù)3利用表格工具制作網(wǎng)頁一、設(shè)計表格結(jié)構(gòu)羅德紡織品有限公司網(wǎng)站首頁任務(wù)3

40、利用表格工具制作網(wǎng)頁二、添加表格表格屬性設(shè)置任務(wù)3利用表格工具制作網(wǎng)頁二、添加表格表格的邊距和間距任務(wù)3利用表格工具制作網(wǎng)頁三、設(shè)置表格屬性設(shè)置表格屬性填充:用來設(shè)置單元格邊距。間距:用來設(shè)置單元格間距。對齊:用來設(shè)置表格的對齊方式，默認(rèn)的對齊方式為左對齊。邊框:用來設(shè)置表格邊框的寬度。任務(wù)3利用表格工具制作網(wǎng)頁四、設(shè)置單元格屬性設(shè)置單元格屬性水平:用來設(shè)置單元格內(nèi)元素的水平排版方式，可以是居左、居右或居中。垂直:用來設(shè)置單元格內(nèi)元素的垂直排版方式，可以是頂端對齊、底端對齊或居中對齊。高、寬:用來設(shè)置單元格的寬度和高度。不換行:勾選該選項防止單元格中較長的文本自動換行。標(biāo)題:使選擇的單元格成為

41、標(biāo)題單元格，單元格內(nèi)的文字自動以標(biāo)題格式顯示出來。背景顏色:用來設(shè)置表格的背景顏色。任務(wù)3利用表格工具制作網(wǎng)頁五、修改表格的行和列修改表格任務(wù)3利用表格工具制作網(wǎng)頁五、修改表格的行和列“插入列或行”對話框任務(wù)3利用表格工具制作網(wǎng)頁六、插入嵌套表格并設(shè)計網(wǎng)頁元素(1)在第一行的左邊單元格中插人一個公司標(biāo)記的Flash文件，將top.jpg設(shè)置為右邊單元格的背景圖片。(2)在第二行的單元格中嵌套插人一個新的一行兩列的表格，并進(jìn)行相應(yīng)設(shè)置，作為網(wǎng)站導(dǎo)航。(3)在第三行中插人公司宣傳的Flash文件。完成步驟(1)(3)后的效果任務(wù)3利用表格工具制作網(wǎng)頁五、修改表格的行和列(4)在第四行中分別插人三個

42、嵌套表格，并對其進(jìn)行相應(yīng)設(shè)置。(5)在第五行中插入友情鏈接圖片，并采用圖像映射方式分別設(shè)置其導(dǎo)航。(6)在第六行中插人網(wǎng)站版本信息并設(shè)置其背景顏色為“#c7eefd”。任務(wù)4利用AP DIV和Spry制作網(wǎng)頁一、繪制AP DIV(一)插入AP DIV(二)拖放APP DIV(三)瀏覽AP元素任務(wù)4利用AP DIV和Spry制作網(wǎng)頁二、設(shè)置AP DIV的屬性AP DIV的屬性任務(wù)4利用AP DIV和Spry制作網(wǎng)頁三、AP DIV和表格之間的轉(zhuǎn)換由于AP DIV在網(wǎng)頁布局上非常方便，因此一些人可能不喜歡使用表格來創(chuàng)建自己的頁面，而是喜歡通過AP DIV來進(jìn)行設(shè)計。Dreamweaver CS6可

43、以使用AP DIV來創(chuàng)建布局，然后將它們轉(zhuǎn)換為表格。任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計網(wǎng)站首頁利用AP DIV布局的羅德紡織品公司網(wǎng)站的首頁任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計網(wǎng)站首頁(一)使用跟蹤圖像輔助頁面的布局選擇“跟蹤圖像”任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計網(wǎng)站首頁(二)布局頁面頂部頁面頂部布局完成任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計網(wǎng)站首頁(三)布局頁面中間的主體部分頁面中間主體部分布局完成任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局

44、設(shè)計網(wǎng)站首頁(四)布局頁面下方的友情鏈接及公司信息AP DIV布局整體結(jié)構(gòu)任務(wù)4利用AP DIV和Spry制作網(wǎng)頁五、使用Spry布局網(wǎng)頁(一)使用Spry菜單欄提示復(fù)制相關(guān)文件Spry菜單欄”對話框設(shè)置Spry菜單欄屬性任務(wù)4利用AP DIV和Spry制作網(wǎng)頁五、使用Spry布局網(wǎng)頁(二)使用Spry選項卡式面板Spry選項卡式面板Spry選項卡式面板的屬性任務(wù)5利用框架技術(shù)制作網(wǎng)頁框架是網(wǎng)頁中經(jīng)常使用的頁面設(shè)計方法，框架的作用就是把網(wǎng)頁在一個瀏覽器窗口中分割成幾個不同的區(qū)域，實現(xiàn)在一個瀏覽器窗口中顯示多個HTML頁面。框架示意圖框架結(jié)構(gòu)組成：框架(Frame)框架集(Frameset)任務(wù)

45、5利用框架技術(shù)制作網(wǎng)頁一、創(chuàng)建框架 (1)新建一個HTML文件，在菜單中選擇“插入”“HTML”“框架”命令，如圖所示，在彈出的下拉菜單中選擇“上方及左側(cè)嵌套”。創(chuàng)建的框架結(jié)構(gòu)如圖所示。選擇框架創(chuàng)建的框架結(jié)構(gòu)任務(wù)5利用框架技術(shù)制作網(wǎng)頁一、創(chuàng)建框架(2)使用鼠標(biāo)直接拖動框架邊框，直至合適的位置，這樣上方及左側(cè)嵌套的框架即完成。(3)選中框架集。選擇“窗口”“框架”命令，打開“框架”面板?！翱蚣堋泵姘逯械淖址硎久總€框架的名稱，在“框架”面板中單擊最外層的邊框，使其顯示出黑邊，則選中了框架集，如圖所示。選中框架集任務(wù)5利用框架技術(shù)制作網(wǎng)頁一、創(chuàng)建框架 (4)選中框架集后，在“屬性”面板中設(shè)置各個選

46、項的屬性，如圖所示。框架集的屬性任務(wù)5利用框架技術(shù)制作網(wǎng)頁一、創(chuàng)建框架(5)選中框架，設(shè)置框架屬性。在“框架”面板中單擊需要選擇的框架，使其出現(xiàn)細(xì)黑邊，然后在“屬性”面板中設(shè)置各個選項，如圖所示?？蚣艿膶傩匀蝿?wù)5利用框架技術(shù)制作網(wǎng)頁二、保存框架網(wǎng)頁每一個框架都有一個框架名稱，可以用默認(rèn)的框架名稱，也可以在“屬性”面板中修改框架名稱。系統(tǒng)默認(rèn)的框架名稱為topFrame(上方)、leftFrame(左側(cè))、mainFrame(右側(cè))。任務(wù)5利用框架技術(shù)制作網(wǎng)頁三、在框架中使用超級鏈接在框架式網(wǎng)頁中設(shè)置超級鏈接時，一定要設(shè)置鏈接的目標(biāo)屬性，為鏈接的目標(biāo)文檔指定顯示窗口。鏈接目標(biāo)較遠(yuǎn)(其他網(wǎng)站)時，

47、一般放在新窗口中;在導(dǎo)航條上創(chuàng)建鏈接時，一般將目標(biāo)文檔放在另一個框架中顯示(當(dāng)頁面較小時)或全屏幕顯示(當(dāng)頁面較大時)。任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面 (1)在菜單欄中選擇“窗口”“框架”命令，打開“框架”面板，選中整個框架集，如圖所示。在“屬性”面板中，將“行”的值設(shè)置為“317，單位為“像素”，如圖所示。選中框架集框架集屬性設(shè)置任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面(2)在菜單欄中選擇“窗口”“框架”命令，打開“框架”面板，選中子框架集，如圖所示。在“屬性”面板中，將“列”的值設(shè)置為“280，單位為“像素”，如圖所示。選中子框架集子框架集屬性設(shè)置任務(wù)5利用框架技術(shù)制作網(wǎng)頁四

48、、制作框架頁面(3)鼠標(biāo)在topFrame框架中的空白處單擊一下，在頁面“屬性”面板中將上、下、左、右邊距全部設(shè)為“0”。插人一個3行2列的表格，寬度為902px，高度為307px，居中對齊，先分別對第二行和第三行進(jìn)行合并單元格，在3行中依次插人bz. Swf、top. j pg、x01.JPg、top3. Jpg和flash. Swf。任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面(4)鼠標(biāo)在leftFrame框架中的空白處單擊一下，在頁面“屬性”面板中將上、下、左、右邊距全部設(shè)為“0。插人一個2行1列的表格，表格寬度為220px，右對齊。將第一個單元格的高度設(shè)為250px，選中其余單元格，將高

49、度設(shè)置為50px，背景顏色設(shè)置為“#d8efff。分別輸人文字設(shè)置導(dǎo)航欄目，然后對各個導(dǎo)航欄目建立超級鏈接，鏈接路徑指向要鏈接到的網(wǎng)頁，“目標(biāo)”選擇“mainFrame，框架，如圖所示。子框架頁面設(shè)置任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面(5)鼠標(biāo)在mainFrame框架中的空白處單擊一下，在頁面“屬性”中將上、下、左、右邊距全部設(shè)為“0。插入一個新的表格，設(shè)置為左對齊。任務(wù)6使用CSS修飾和美化網(wǎng)頁層疊樣式表(CSS)是一系列格式設(shè)置規(guī)則，它們控制Web頁面內(nèi)容的外觀。使用CSS設(shè)置頁面格式時，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容(HTML代碼)位于自身的HTML文件中，而定義代碼表現(xiàn)形

50、式的CSS規(guī)則位于另一個文件(外部樣式表)或HTML文檔的另一部分(通常為部分)中。使用CSS可以非常靈活地控制頁面的外觀。任務(wù)6使用CSS修飾和美化網(wǎng)頁一、創(chuàng)建CSS樣式CSS樣式”面板“新建CSS規(guī)則”對話框任務(wù)6使用CSS修飾和美化網(wǎng)頁一、創(chuàng)建CSS樣式復(fù)合內(nèi)容的CSS規(guī)則任務(wù)6使用CSS修飾和美化網(wǎng)頁一、創(chuàng)建CSS樣式定義.w1的CSS規(guī)則任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(一)文本樣式的設(shè)置設(shè)置CSS的文本樣式將CSS樣式應(yīng)用于標(biāo)簽應(yīng)用CSS樣式后的文字效果任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(二)背景樣式的設(shè)置WI的背景設(shè)置任務(wù)6使用CSS修飾和美化網(wǎng)

51、頁二、用CSS美化網(wǎng)頁(三)區(qū)塊樣式的設(shè)置在“. WI的CSS規(guī)則定義”對話框的左側(cè)選擇“區(qū)塊”，可以在右邊區(qū)域中設(shè)置CSS的區(qū)塊樣式。任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(四)方框樣式的設(shè)置前面已經(jīng)設(shè)置過圖像的大小、圖像水平和垂直方向上的空白區(qū)域、圖像是否有文字環(huán)繞效果等，方框樣式則進(jìn)一步完善和豐富了這些設(shè)置。在“. WI的CSS規(guī)則定義”對話框的左側(cè)選擇“方框”，可以在右邊區(qū)域中設(shè)置CSS的方框樣式。任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(五)邊框樣式的設(shè)置設(shè)置邊框樣式可以給對象添加邊框，設(shè)置邊框的顏色、粗細(xì)、樣式。任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)

52、頁(五)邊框樣式的設(shè)置應(yīng)用表格邊框樣式后的效果任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(六)列表樣式的設(shè)置CSS中有關(guān)列表的設(shè)置豐富了列表的外觀。在“.WI的CSS規(guī)則定義”對話框的左側(cè)選擇“列表”，可以在右邊區(qū)域中設(shè)置CSS的列表樣式。任務(wù)6使用CSS修飾和美化網(wǎng)頁三、CSS樣式表的其他操作(一)編輯CSS樣式任務(wù)6使用CSS修飾和美化網(wǎng)頁三、CSS樣式表的其他操作(二)應(yīng)用CSS自定義樣式利用快捷菜單設(shè)置CSS樣式任務(wù)6使用CSS修飾和美化網(wǎng)頁三、CSS樣式表的其他操作(三)附加樣式表“鏈接外部樣式表”對話框任務(wù)6使用CSS修飾和美化網(wǎng)頁四、CSS樣式表制作實例(一)用CSS樣式

53、表的濾鏡制作模糊文字效果w2的CSS規(guī)則設(shè)置CSS擴(kuò)展的模糊設(shè)置模糊文字效果任務(wù)6使用CSS修飾和美化網(wǎng)頁四、CSS樣式表制作實例(二)超鏈接的CSS樣式原始導(dǎo)航條帶鏈接的導(dǎo)航條新建CSS規(guī)則任務(wù)6使用CSS修飾和美化網(wǎng)頁四、CSS樣式表制作實例(二)超鏈接的CSS樣式a : link的CSS規(guī)則定義”對話框應(yīng)用超鏈接樣式后的導(dǎo)航效果任務(wù)7基于行為與Spry特效制作網(wǎng)頁一、了解行為對象事件動作事件與動作任務(wù)7基于行為與Spry特效制作網(wǎng)頁二、應(yīng)用行為(一)“行為”面板“行為”面板任務(wù)7基于行為與Spry特效制作網(wǎng)頁二、應(yīng)用行為(二)創(chuàng)建行為彈出公告選擇對象添加動作調(diào)整事件任務(wù)7基于行為與Spr

54、y特效制作網(wǎng)頁三、行為的應(yīng)用(一)狀態(tài)欄文本設(shè)置實例“設(shè)置狀態(tài)欄文本”對話框狀態(tài)欄文本設(shè)置預(yù)覽效果任務(wù)7基于行為與Spry特效制作網(wǎng)頁三、行為的應(yīng)用(二)制作圖像顯示/漸隱效果選擇“顯示/漸隱”命令顯示/漸隱設(shè)置選擇行為事件提示復(fù)制相關(guān)文件任務(wù)7基于行為與Spry特效制作網(wǎng)頁三、行為的應(yīng)用(三)制作圖像左右晃動效果選擇“晃動”命令晃動設(shè)置選擇行為事件提示復(fù)制相關(guān)文件任務(wù)7基于行為與Spry特效制作網(wǎng)頁三、行為的應(yīng)用(四)制作跟隨鼠標(biāo)信息提示添加Spry下具提示構(gòu)件Spry工具提示文本設(shè)置Spry工具提示屬性設(shè)置提示復(fù)制相關(guān)文件Spry工具提示效果任務(wù)8使用模板快速制作網(wǎng)頁一、創(chuàng)建模板直接創(chuàng)建模

55、板將普通網(wǎng)頁另存為模板從“文件”菜單新建模板任務(wù)8使用模板快速制作網(wǎng)頁二、使用模板(一)可編輯區(qū)域創(chuàng)建可編輯區(qū)域“新建可編輯區(qū)域”對話框文檔窗口中的可編輯區(qū)域任務(wù)8使用模板快速制作網(wǎng)頁二、使用模板(二)其他模板區(qū)域可編輯的可選區(qū)域重復(fù)區(qū)域可選區(qū)域任務(wù)8使用模板快速制作網(wǎng)頁三、使用庫項目創(chuàng)建庫項目插入庫項目更改庫項目任務(wù)8使用模板快速制作網(wǎng)頁四、創(chuàng)建基于模板的頁面添加可編輯區(qū)域插人可編輯區(qū)域后的頁面修改庫文件將庫文件直接拖到模板中任務(wù)8使用模板快速制作網(wǎng)頁四、創(chuàng)建基于模板的頁面從模板創(chuàng)建應(yīng)用所有資源的網(wǎng)頁基于模板創(chuàng)建的網(wǎng)頁更新源文件提示END.網(wǎng)頁設(shè)計與制作第三版項目四利用Fireworks C

56、S6制作網(wǎng)頁認(rèn)識Fireworks CS61制作網(wǎng)站LOGO中的各類字體2制作網(wǎng)站LOGO中的各類圖形3添加濾鏡與制作動畫4任務(wù)1認(rèn)識Fireworks CS6Fireworks CS6的主界面工作區(qū)工具條“屬性”面板組合面板任務(wù)1認(rèn)識Fireworks CS6一、Fireworks CS6的特色1面板部分工作界面的調(diào)整、變化2菜單部分菜單命令的增強(qiáng)、重組3實戰(zhàn)操作工作流程的快捷、輕松任務(wù)1認(rèn)識Fireworks CS6二、Fireworks CS6的主要面板“圖像編輯”面板“自動形狀屬性”面板“層”面板123任務(wù)2制作網(wǎng)站LOGO中的各類字體立體字體金屬字體透視文字特效環(huán)形字體印章文字立體字

57、效果效果盡顯的金屬文字透視陰影效果圖環(huán)形文字效果圖印章效果圖任務(wù)3制作網(wǎng)站LOGO中的各類圖形制作圓角按鈕制作心形光暈圖制作奧林匹克五環(huán)旗示范按鈕光暈效果心形圖奧運五環(huán)效果圖任務(wù)4添加濾鏡與制作動畫一、制作旋轉(zhuǎn)文字動畫(1)建立新文件。啟動Fireworks CS6，按Ctrl+N組合鍵新建一個工作區(qū)，設(shè)置工作區(qū)的寬度為400，高度為300,顏色為藍(lán)色，其余為默認(rèn)值。(2)輸人文本。首先單擊文本工具，設(shè)置參數(shù)如下:字體為華文行楷，大小為20,顏色為紅色(#FF0000)，其余為默認(rèn)值。然后在文本框中輸入文字，單擊“確定”按鈕。用箭頭工具選擇并移動文本到工作區(qū)稍微靠上的位置，接著在濾鏡中選擇“陰

58、影和光暈”一“光暈”命令，設(shè)置具體參數(shù)如下:寬度為2，柔化度為1，顏色為黃色(# FFFF00)，透明度為6500，如圖所示。此時文本效果如圖所示。發(fā)光屬性設(shè)置文本效果任務(wù)4添加濾鏡與制作動畫一、制作旋轉(zhuǎn)文字動畫(3)制作文本圖形的分布路徑。文本附加到路徑文本屬性設(shè)置任務(wù)4添加濾鏡與制作動畫一、制作旋轉(zhuǎn)文字動畫(4)開始制作動畫?！稗D(zhuǎn)化為元件”對話框文本轉(zhuǎn)化為元件任務(wù)4添加濾鏡與制作動畫一、制作旋轉(zhuǎn)文字動畫(5)克隆其他圖例?？寺〔⑿D(zhuǎn)多個元件任務(wù)4添加濾鏡與制作動畫一、制作旋轉(zhuǎn)文字動畫(6)創(chuàng)建動畫。補(bǔ)間實例分散到各狀態(tài)任務(wù)4添加濾鏡與制作動畫一、制作旋轉(zhuǎn)文字動畫(7)輸出動畫。圖像預(yù)覽導(dǎo)出

59、設(shè)置任務(wù)4添加濾鏡與制作動畫一、制作旋轉(zhuǎn)文字動畫旋轉(zhuǎn)文字的最終效果圖任務(wù)4添加濾鏡與制作動畫二、制作閃字(1)打開Fireworks CS6軟件，新建一個白色背景的畫布，畫布大小設(shè)置為390 X 68像素，如圖所示。(2)使用左邊工具條中的文本工具在畫布中輸入文字，然后在下方“屬性”面板中調(diào)整文本的大小和字體，并將消除鋸齒級別設(shè)置為“強(qiáng)力消除鋸齒”，如圖所示?！靶陆ㄎ臋n”對話框文字設(shè)置任務(wù)4添加濾鏡與制作動畫二、制作閃字(3)在“狀態(tài)”面板中將狀態(tài)1拖到“新建/重制狀態(tài)”按鈕上，重復(fù)2次，共制作成3個狀態(tài)，如圖所示。一般是看閃底素材有多少個狀態(tài)，然后就制作多少個狀態(tài)。(4)編輯閃底素材。一般的

60、閃底并不是想要的大小，有時會比字小，所以就需要編輯一下。首先打開閃底素材，單擊下方“屬性”面板中的“畫布大小”按鈕，調(diào)整為閃字畫布大小，如圖所示。添加狀態(tài)更改畫布大小任務(wù)4添加濾鏡與制作動畫二、制作閃字(5)在“狀態(tài)”面板中單擊洋蔥皮按鈕，勾選“多狀態(tài)編輯”，并將結(jié)束狀態(tài)滑塊拖到最后一個狀態(tài)上，框選所有圖像內(nèi)容，如圖所示。(6)框選中的是三個狀態(tài)中的對象，使用移動工具將對象移到畫布最左邊，然后按Alt鍵并選擇“移動復(fù)制對象至滿畫布”，閃底效果如圖所示，然后保存并關(guān)閉閃底。多狀態(tài)編輯閃底效果圖任務(wù)4添加濾鏡與制作動畫二、制作閃字(7)回到閃字的制作畫布中，選擇菜單中的“文件”“導(dǎo)人”命令或按Ct