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

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

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

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

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

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

6、orm Resource Locator，統(tǒng)一資源定位符)通常稱(chēng)為網(wǎng)址，它是Internet上用來(lái)描述信息資源的字符串。其格式為:任務(wù)1初識(shí)網(wǎng)頁(yè)相關(guān)概念五、網(wǎng)頁(yè)瀏覽機(jī)制URL由下列三部分組成:協(xié)議或稱(chēng)為服務(wù)方式該資源的主機(jī)域名或IP地址資源的具體地址，由路徑和文件名組成任務(wù)1初識(shí)網(wǎng)頁(yè)相關(guān)概念五、網(wǎng)頁(yè)瀏覽機(jī)制(三)網(wǎng)頁(yè)瀏覽機(jī)制客戶(hù)機(jī)訪問(wèn)服務(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)站主題的需要，為不同類(lèi)型的資源分別建立目錄進(jìn)行保存。對(duì)于信息量小的站點(diǎn)，可以將不同類(lèi)型的文件存放在不同的文件夾中。對(duì)于文件數(shù)量眾多、信息量大、文件類(lèi)

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

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

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

10、的運(yùn)用、抽象的整體造型。常見(jiàn)的有封面型、廣告創(chuàng)意型(POP) , Flash動(dòng)畫(huà)型，一般個(gè)人網(wǎng)站、娛樂(lè)型網(wǎng)站可采用這種形式，也有企業(yè)網(wǎng)站使用這種形式。任務(wù)3明確網(wǎng)頁(yè)設(shè)計(jì)的原則三、網(wǎng)頁(yè)設(shè)計(jì)的布局原則在網(wǎng)頁(yè)的布局中，不管使用什么形式的布局，都應(yīng)注意以下幾個(gè)問(wèn)題:1.頁(yè)面布局整體上都是上中下形式2.頁(yè)面內(nèi)容的高度、寬度要適應(yīng)屏幕閱讀習(xí)慣3.重點(diǎn)信息、焦點(diǎn)信息、亮點(diǎn)信息要突出顯示4.圖文搭配做到穩(wěn)定、平衡5.主頁(yè)、欄目頁(yè)、文章頁(yè)的布局既要統(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è)計(jì)者，一定要明確自己的網(wǎng)站應(yīng)該具有哪些內(nèi)容，網(wǎng)站應(yīng)向?yàn)g覽者提供哪些信息，網(wǎng)站是為哪些瀏覽群體服務(wù)的，等等。給網(wǎng)站一個(gè)準(zhǔn)確的定位，切忌內(nèi)容過(guò)于龐雜，失去了中心主題而降低對(duì)瀏覽者的吸引力。對(duì)于初次接觸網(wǎng)站建設(shè)的人員，最好選擇自己喜愛(ài)或擅長(zhǎng)的主題，如旅游主題、音樂(lè)主題、體育主題，以靜態(tài)頁(yè)面為主，保持網(wǎng)站結(jié)構(gòu)清晰，盡量不要經(jīng)常更新網(wǎng)站內(nèi)容，以便快速掌握網(wǎng)站建設(shè)的基本流程。在確定好網(wǎng)站主題后，還必須為網(wǎng)站起一個(gè)名字、設(shè)計(jì)一個(gè)Logo?？傊?，把握好網(wǎng)站建設(shè)的方向是網(wǎng)站建設(shè)成功的關(guān)鍵。任務(wù)4了解網(wǎng)站建設(shè)流程二、收集、制作和整理資料網(wǎng)站資料主要包括文本、圖像、動(dòng)畫(huà)三大類(lèi)。另外，依據(jù)網(wǎng)站的主題，還可能

12、需要準(zhǔn)備音頻、視頻等多媒體素材以及其他資料，如供瀏覽者下載的軟件、Word文檔。有些資料要進(jìn)行制作，如Flash動(dòng)畫(huà);有些資料還需要進(jìn)一步加工和處理，如在不影響顯示效果的情況下，圖片應(yīng)盡量壓縮得小一些，以加快頁(yè)面的加載速度?？傊占?、制作和整理資料時(shí)范圍要廣泛，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(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ǔ)之上，方便了用戶(hù)的瀏覽。瀏覽者最關(guān)心的是網(wǎng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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