章-網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識-本章主要內(nèi)容(與“工具”有關(guān)文檔共96張)

基本的網(wǎng)頁設(shè)計(jì)工具前臺頁面技術(shù)

Photoshop網(wǎng)頁制作三劍客（Dreamweaver、Fireworks、Flash）層疊樣式表（CSS）超文本標(biāo)記語言（HTML）頁面腳本語言（JavaScript/VBScript）1第1頁，共96頁。常用的后臺設(shè)計(jì)語言及開發(fā)環(huán)境

ASP(VB)ASP.NET(VB\C#\J#)JSP(java)

.netFramework

eclipse2第2頁，共96頁。項(xiàng)目1網(wǎng)站首頁設(shè)計(jì)與切片

知識技能目標(biāo)掌握靜態(tài)網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識掌握使用切片工具進(jìn)行切片并導(dǎo)出網(wǎng)頁模板的基本方法本單元理論授課4學(xué)時(shí)，上機(jī)操作4學(xué)時(shí)。3第3頁，共96頁。任務(wù)1網(wǎng)頁基礎(chǔ)、網(wǎng)頁配色及網(wǎng)站賞析

一、任務(wù)分析張先生的網(wǎng)站要展示企業(yè)形象和宣傳產(chǎn)品，要求如下：①網(wǎng)站選色以綠色為主，代表健康和生機(jī)；②網(wǎng)站有一個(gè)較大的banner展示動(dòng)畫，展示產(chǎn)品和宣傳企業(yè)形象；網(wǎng)站首頁效果如圖所示；

③網(wǎng)頁寬度全屏設(shè)置為1003px。課次1課時(shí)2教具投影儀備注課題任務(wù)1網(wǎng)頁基礎(chǔ)、網(wǎng)頁配色知識及經(jīng)典網(wǎng)站賞析目的了解網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識、網(wǎng)頁配色基礎(chǔ)知識重點(diǎn)網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識難點(diǎn)無4第4頁，共96頁。

二、相關(guān)知識（一）網(wǎng)頁基礎(chǔ)知識

1.Internet基礎(chǔ)知識

(1)Internet

“Inter”意即交互，“net”意即網(wǎng)絡(luò)。Internet稱為國際互聯(lián)網(wǎng)絡(luò)。

(2)Internet的功能信息的獲取與發(fā)布（WWW）電子郵件（E-mail）網(wǎng)上交際（BBS、新聞組、即時(shí)通訊、網(wǎng)絡(luò)電話等）電子商務(wù)與網(wǎng)上事務(wù)處理

Internet的其它應(yīng)用(遠(yuǎn)程教育、遠(yuǎn)程醫(yī)療、遠(yuǎn)程登錄、文件傳輸、游戲娛樂等)5第5頁，共96頁。

(3)Internet的發(fā)展

Internet始于1969年，美國國防部高級研究計(jì)劃管理局（ARPA--AdvancedResearchProjectsAgency）資助建立一個(gè)名為ARPANET的網(wǎng)絡(luò)，目的只是為了將美國的幾個(gè)軍事及研究用電腦主機(jī)連接起來，成為Internet的雛形。隨著網(wǎng)絡(luò)互連技術(shù)的發(fā)展，將大小同構(gòu)和異構(gòu)網(wǎng)絡(luò)連接起來，形成一個(gè)網(wǎng)絡(luò)的網(wǎng)絡(luò)，形成了現(xiàn)在的Internet（國際互聯(lián)網(wǎng)）。6第6頁，共96頁。(4)Internet在我國的發(fā)展

1987年至1993年，我國與Internet的連接僅是電子函件的轉(zhuǎn)發(fā)連接，并在少數(shù)高校和科研機(jī)構(gòu)提供電子郵件服務(wù)。

1987年9月，北京計(jì)算機(jī)應(yīng)用技術(shù)研究所與德國卡爾斯魯厄大學(xué)（KarlruheUniversity）合作，建成CANET中國科技網(wǎng)（ChinaAcademicNetwork），它是我國第一個(gè)Internet電子郵件服務(wù)結(jié)點(diǎn)。

1994年3月，Internet管理委員會批準(zhǔn)中國進(jìn)入Internet，中國政府也批準(zhǔn)Internet與中國連通。同年，我國第一條Internet專線在中科院高能物理研究所正式接通。7第7頁，共96頁。(5)Internet的工作原理互聯(lián)網(wǎng)連接了世界上不同國家與地區(qū)無數(shù)不同硬件、不同操作系統(tǒng)與不同軟件的計(jì)算機(jī)，為保證這些計(jì)算機(jī)能暢通無阻地交換信息，須擁有統(tǒng)一的通信協(xié)議?；ヂ?lián)網(wǎng)上使用TCP/IP作為標(biāo)準(zhǔn)的通信協(xié)議。

TCP/IP采用分組交換方式，即數(shù)據(jù)在傳輸時(shí)分成若干段（數(shù)據(jù)包），TCP/IP協(xié)議的基本傳輸單位是數(shù)據(jù)包。

TCP/IP協(xié)議簇包括兩個(gè)主要的協(xié)議，即TCP（傳輸控制協(xié)議）和IP（網(wǎng)際協(xié)議），它們在數(shù)據(jù)傳輸過程中主要完成以下功能：8第8頁，共96頁。①TCP協(xié)議把數(shù)據(jù)分成若干數(shù)據(jù)包，給每個(gè)數(shù)據(jù)包寫上序號，以便接收端把數(shù)據(jù)還原成原來的格式。

②

IP協(xié)議給每個(gè)數(shù)據(jù)包寫上發(fā)送主機(jī)源地址和接收主機(jī)目的地址，數(shù)據(jù)包就可以在網(wǎng)上傳送了。數(shù)據(jù)包可以通過不同的傳輸途徑（路由）進(jìn)行傳輸，由于路徑不同，加上其它的原因，可能出現(xiàn)順序顛倒、數(shù)據(jù)丟失、數(shù)據(jù)失真甚至重復(fù)的現(xiàn)象，這些問題都由TCP協(xié)議來處理，它具有查糾錯(cuò)誤的功能，必要時(shí)請求發(fā)送端重發(fā)。

IP協(xié)議負(fù)責(zé)數(shù)據(jù)傳輸尋址，TCP協(xié)議保障數(shù)據(jù)可靠傳輸。9第9頁，共96頁。(6)Intranet（內(nèi)聯(lián)網(wǎng)）

Intranet也叫企業(yè)內(nèi)部網(wǎng)，是指在一個(gè)單位或企業(yè)內(nèi)通過TCP/IP協(xié)議建立的網(wǎng)絡(luò)。

Intranet是基于Internet技術(shù)、TCP/IP和HTTP等通信協(xié)議以及WWW等信息服務(wù)的一種區(qū)域化的信息系統(tǒng)，它通過開放的Internet標(biāo)準(zhǔn)協(xié)議，把多種服務(wù)平臺提供給區(qū)域網(wǎng)絡(luò)上的計(jì)算機(jī)。它既給一個(gè)公司或企業(yè)提供了將其自身組織成一個(gè)完整信息系統(tǒng)的網(wǎng)絡(luò)環(huán)境，也可以根據(jù)需要通過防火墻技術(shù)訪問Internet。10第10頁，共96頁。(7)幾個(gè)與Internet有關(guān)的概念術(shù)語

IP地址

IP地址能唯一標(biāo)識主機(jī)在Internet中所處的網(wǎng)絡(luò)位置。

IP地址提供統(tǒng)一的地址格式，即由32個(gè)二進(jìn)制位（bit）組成。由于二進(jìn)制使用起來不方便，常用“點(diǎn)分十進(jìn)制”來表示，即將IP地址分為4個(gè)字節(jié)，每個(gè)字節(jié)以十進(jìn)制數(shù)來表示，各個(gè)數(shù)之間以句點(diǎn)隔開。例如，中國人民大學(xué)網(wǎng)站IP地址。11第11頁，共96頁。

域名與IP地址相比，人們更喜歡使用具有一定含義的字符串來標(biāo)識Internet上的計(jì)算機(jī)，用戶可以隨意命名自己的計(jì)算機(jī)，這樣就可能在Internet上出現(xiàn)重名。為了避免重名，Internet管理機(jī)構(gòu)采取了在主機(jī)名后加上后綴的方法，這個(gè)后綴稱為域名(domain)，用以標(biāo)識主機(jī)的區(qū)域位置。如中www為主機(jī)名，由服務(wù)器管理員命名，為域名，由服務(wù)器所屬單位向域名管理機(jī)構(gòu)申請。域名通過域名服務(wù)器（DNS）的解析轉(zhuǎn)換為實(shí)際的IP地址，以實(shí)現(xiàn)最終的訪問。12第12頁，共96頁。URLURL（UniformResourceLocator：統(tǒng)一資源定位器）是WWW頁(資源對象)的地址，它的地址格式為：

【資源類型】：指出WWW客戶程序用來操作的工具。如:“http://”表示W(wǎng)WW服務(wù)器，“ftp://”表示FTP服務(wù)器，“new:”表示新聞組(Newgroup)等。

【域名】:指出WWW頁所在的服務(wù)器域名。

【端口號】:對某些資源的訪問，需給出服務(wù)器提供的端口號。

【路徑】:資源的具體位置，如http:///domain/HXWZ資源類型://域名:端口號/路徑13第13頁，共96頁。2．WWW簡介

WWW是Internet多媒體信息查詢工具，是Internet上近年發(fā)展起來的服務(wù)，也是發(fā)展最快和使用最廣泛的服務(wù)。

(1)什么是WWWWWW是WorldWideWeb（環(huán)球信息網(wǎng)）的縮寫，也可以簡稱為Web，中文名字為“萬維網(wǎng)”。通過萬維網(wǎng)，人們只要通過簡單的方法，就可以迅速地獲得世界范圍豐富的信息資料。用戶在通過Web瀏覽器訪問信息資源時(shí)無需關(guān)心一些技術(shù)細(xì)節(jié)，且界面友好，因而Web服務(wù)在Internet上一推出就受到了熱烈的歡迎，得到迅速發(fā)展。14第14頁，共96頁。(2)WWW的工作原理

WWW中的信息資源主要由一篇篇的Web文檔(Web頁)構(gòu)成。這些Web頁采用超文本（HyperText）的格式，即可以含有指向其它Web頁或內(nèi)部特定位置的超級鏈接?？梢詫㈡溄永斫鉃橹赶蚱渌Y源的“指針”。鏈接使得Web頁交織為網(wǎng)狀，使Internet成為一個(gè)巨大的信息網(wǎng)。由于將文件放入WWW服務(wù)器的人并不知道將來閱讀這個(gè)文件的人到底會使用哪一種類型的計(jì)算機(jī)或終端，要保證每個(gè)人在屏幕上都能看到正確顯示的文件，必須用某種計(jì)算機(jī)都能“看懂”的方式來描述文件，于是就產(chǎn)生了HTML超文本標(biāo)記語言。15第15頁，共96頁。(3)WWW的核心——HTTP協(xié)議

WWW服務(wù)器使用的主要協(xié)議是HTTP，即超文本傳輸協(xié)議。

HTTP是應(yīng)用層的協(xié)議，適用于分布式超媒體信息系統(tǒng)，它于1990年提出，經(jīng)過使用與發(fā)展，得到了不斷完善和擴(kuò)展。

HTTP協(xié)議的運(yùn)作方式如下：16第16頁，共96頁。3．靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁

請求響應(yīng)瀏覽器Web服務(wù)器后臺腳本解釋器數(shù)據(jù)庫服務(wù)器數(shù)據(jù)庫靜態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁請求響應(yīng)瀏覽器Web服務(wù)器靜態(tài)網(wǎng)頁17第17頁，共96頁。4．什么是ASP和ASP(ActiveServerPage)是由微軟提出的一種動(dòng)態(tài)網(wǎng)頁構(gòu)架，它是一種包含了使用VBScript或JavaScript腳本程序代碼的網(wǎng)頁。當(dāng)瀏覽器瀏覽ASP網(wǎng)頁時(shí)，Web服務(wù)器根據(jù)請求生成相應(yīng)的HTML代碼再返回給瀏覽器，在瀏覽器端看到的是動(dòng)態(tài)生成的頁面。

ASP能容易地與數(shù)據(jù)庫和其它程序進(jìn)行交互。掌握了VBScript或JavaScript的基本語法后，只要清楚各個(gè)組件的用途、屬性、方法，就能輕松編寫自己的ASP系統(tǒng)。ASP的網(wǎng)頁文件的擴(kuò)展名是“.ASP”。18第18頁，共96頁。和ASP的區(qū)別不僅在于功能的增強(qiáng)，更在于編程思維的轉(zhuǎn)換。ASP使用VBScript及JavaScript等腳本語言結(jié)合html來編程，這些腳本語言屬于面向結(jié)構(gòu)的語言，而非面向?qū)ο螅瑫a(chǎn)生以下問題：

(1)代碼邏輯混亂，難于管理

ASP是腳本語言混合html編程，所以很難看清代碼的邏輯關(guān)系，隨著程序的復(fù)雜性增加，使得代碼的管理十分困難。

(2)代碼的可重用性差由于是面向結(jié)構(gòu)的編程方式，并且混合html，所以可能頁面原型修改一點(diǎn)，整個(gè)程序都需要修改，無法實(shí)現(xiàn)代碼重用。19第19頁，共96頁。支持面向?qū)ο蟮囊磺刑匦?，比如封裝性、繼承性、多態(tài)性等等，解決了ASP的很多弱點(diǎn)?？梢允褂肅#

,

VB

,

JavaScript等編寫代碼，同時(shí)支持可視化的界面設(shè)計(jì)。封裝性使得代碼邏輯清晰，易于管理，使業(yè)務(wù)邏輯和Html頁面分離，這樣無論頁面原型如何改變，業(yè)務(wù)邏輯代碼都不需改動(dòng)。繼承性和多態(tài)性使代碼的可重用性大大提高，可以通過繼承已有的對象最大限度保護(hù)以前的投資，提高開發(fā)效率。20第20頁，共96頁。

（二）網(wǎng)頁配色基礎(chǔ)知識網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，下面了解一些色彩的基本知識：

1．色彩的形成顏色是由光的折射而產(chǎn)生的。所有色彩都可以用紅、綠、藍(lán)這三種色彩調(diào)和而成。html語言中的色彩表達(dá)即是用這三種顏色的數(shù)值表示。例如：紅色的十六進(jìn)制的表示為(FF0000)，白色為(FFFFFF)，"bgColor=#FFFFFF"是指背景色為白色。顏色分非彩色和彩色兩類。非彩色即黑、白、灰色系。彩色即除了非彩色以外的所有色彩。任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以能表現(xiàn)出幾百萬種色彩。21第21頁，共96頁。2．色環(huán)色環(huán)就是將彩色光譜中的長條形色彩序列首尾連接在一起，使紅色連接到另一端的紫色。色環(huán)通常包括12種不同的顏色，如下所示。22第22頁，共96頁。

基色基色是最基本的顏色，通過按一定比例混合基色可以產(chǎn)生任何其它顏色。現(xiàn)在大多是用紅、綠、藍(lán)（RGB模式）作為基色進(jìn)行顏色顯示（加色法）。如果使用彩色噴墨打印機(jī)，就有四種顏色墨水：青、品紅、黃、黑（CMYK模式）。因?yàn)橛?jì)算機(jī)顯示器使用加色原理，而打印機(jī)使用減色。顯示器發(fā)射彩色光線，而紙張上的墨水則從它反射的光中吸收了某種顏色（減色法）。23第23頁，共96頁。

次生色混合色環(huán)中任何兩種鄰近的基色可獲得另一種顏色，這些顏色即是次生色：青、品紅和黃。加色法中的次生色就是減色法中的基色，同樣可以推斷出，減色法中的次生色也就是加色法中的基色。這就是加色模式和減色模式之間的相互關(guān)系。三次色為了完成色環(huán)，再次找到已填入色環(huán)的顏色之間的中間色。幸運(yùn)的是，這些三次色對于加色法和減色法都是相同的。24第24頁，共96頁。3．顏色之間的相互關(guān)系。相似色給定顏色旁邊的顏色。如果以橙色開始想得到它的兩個(gè)相似色，就選定紅色和黃色。使用相似色的配色方案可以提供顏色的協(xié)調(diào)和交融，比較自然。互補(bǔ)色也稱為對比色（反差最大）。互補(bǔ)色在色環(huán)上相互正對。如果希望更鮮明地突出某些顏色，則選擇對比色。如黃色和藍(lán)色。分列的互補(bǔ)色一種顏色，先找到它的互補(bǔ)色，該互補(bǔ)色兩邊的兩種顏色即是。三色組三色組是色環(huán)上等距離的任何三種顏色。在配色方案中使用三色組時(shí)，顏色對比均比較強(qiáng)烈。如基色和次生色均是三色組。暖色暖色由紅色調(diào)構(gòu)成，如紅色、橙色和黃色。暖色給人以溫暖、舒適、有活力的感覺。這些顏色產(chǎn)生的視覺效果使其更貼近觀眾，并在頁面上更顯突出。冷色冷色來自于藍(lán)色調(diào)，如藍(lán)色、青色和綠色。這些顏色使配色方案顯得穩(wěn)定和清爽。它們看起來還有遠(yuǎn)離觀眾的效果，所以適于做頁面背景。25第25頁，共96頁。4．色彩的三要素明度。是指色彩的明暗程度。光的明暗度稱亮度。明度由光的振幅決定。振幅寬亮度就高。色相。是色彩的相貌，是一種色彩區(qū)別另一種色彩的表面特征。它是由光的波長引起一種視覺感。色相秩序的確定是跟據(jù)太陽光譜的波長順序排列的，即紅、橙、黃、綠、藍(lán)、紫等，它們是所有色彩中最突出、純度最高的典型色相。純度。即色彩所含的單色相飽和的程度，也稱為彩度。決定顏色純度的因素有多方面，從光的角度講，光波波長越單一，色彩越純；光波波長越混雜，比例均衡，使各單色光的色性消失，純度為零。同一高純度色彩在強(qiáng)光或弱光的照射下，色彩的純度也相應(yīng)降低。色彩的三要素是互相依存、互相制約的，很難截然分開，其中任何一個(gè)屬性的改變，都將引起色彩個(gè)性的變化。26第26頁，共96頁。

5．配色標(biāo)準(zhǔn)與原則（1）特色鮮明一個(gè)網(wǎng)站的用色必須要有自己獨(dú)特的風(fēng)格，要與表現(xiàn)的內(nèi)容相和諧，還要考慮受眾人群的年齡、層次等特點(diǎn)，這樣才能顯得個(gè)性鮮明，主題突出，和諧自然，給瀏覽者留下深刻的印象。（2）搭配合理網(wǎng)頁設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇，但它又與其它平面設(shè)計(jì)不同，它在遵從藝術(shù)規(guī)律的同時(shí)，還考慮人的生理特點(diǎn)，色彩搭配一定要合理，給人一種和諧、愉快的感覺。（3）講究藝術(shù)性網(wǎng)站設(shè)計(jì)也是一種藝術(shù)活動(dòng)，因此它必須遵循藝術(shù)規(guī)律，在考慮到網(wǎng)站本身特點(diǎn)的同時(shí)，按照內(nèi)容決定形式的原則，大膽進(jìn)行藝術(shù)創(chuàng)新，設(shè)計(jì)出既符合網(wǎng)站要求，又有一定藝術(shù)特色的網(wǎng)站。27第27頁，共96頁。6．色彩與心理（1）黃色的性格冷漠、高傲、敏感、具有擴(kuò)張和不安寧的視覺印象。黃色是各種色彩中，最為嬌氣的一種色。只要在純黃色中混入少量的其它色，其色相感和色性格均會發(fā)生較大程度的變化。在黃色中加入少量的藍(lán)，會使其轉(zhuǎn)化為一種鮮嫩的綠色。其高傲的性格也隨之消失，趨于一種平和、潮潤的感覺。在黃色中加入少量的紅，則具有明顯的橙色感覺，其性格也會從冷漠、高傲轉(zhuǎn)化為一種有分寸感的熱情、溫暖。在黃色中加入少量的黑，其色感和色性變化最大，成為一種具有明顯橄欖綠的復(fù)色印象。其色性也變的成熟、隨和。在黃色中加入少量的白，其色感變的柔和，其性格中的冷漠、高傲被淡化，趨于含蓄，易于接近。28第28頁，共96頁。

（2）紅色色感溫暖，性格剛烈而外向，是一種對人刺激很強(qiáng)的顏色。紅色容易引起人的注意，也容易使人興奮、激動(dòng)、緊張、沖動(dòng)，也容易使人視覺疲勞。紅色中加入少量黃，會使其熱力強(qiáng)盛，趨于躁動(dòng)、不安。紅色中加入少量藍(lán)，會使其熱性減弱，趨于文雅、柔和。紅色中加入少量黑，會使其性格變的沉穩(wěn)，趨于厚重、樸實(shí)。紅中加入少量的白，會使其性格變的溫柔，趨于含蓄、羞澀、嬌嫩。29第29頁，共96頁。

（3）綠色是具有黃色和藍(lán)色兩種成分的顏色。在綠色中，將黃色的擴(kuò)張感和藍(lán)色的收縮感相中庸，將黃色的溫暖感與藍(lán)色的寒冷感相抵消。這樣使得綠色的性格最為平和、安穩(wěn)。是一種柔順、恬靜、滿足、優(yōu)美的色。綠色中黃的成份較多時(shí)，其性格趨于活潑、友善，具有幼稚性。綠色中加入少量的黑，其性格就趨于莊重、老練、成熟。綠色中加入少量的白，其性格就趨于潔凈、清爽、鮮嫩。30第30頁，共96頁。

（4）白色的色感光明，性格樸實(shí)、純潔、快樂。白色具有圣潔的不容侵犯性。如果在白色中加入其它任何色，都會影響其純潔性，使其性格變的含蓄。在白色中混入少量紅，就成為淡淡的粉色，鮮嫩而充滿誘惑。在白色中混入少量黃，則成為一種乳黃色，給人一種香膩的印象。在白色中混入少量的藍(lán)，給人感覺清冷、潔凈。在白色中混入少量的橙，有一種干燥的氣氛。在白色中混入少量的綠，給人一種稚嫩、柔和的感覺。在白色中混入少量的紫，可誘導(dǎo)人聯(lián)想到淡淡的芳香。31第31頁，共96頁。

（5）藍(lán)色的色感冷靜，性格樸實(shí)而內(nèi)向，是一種有助于人頭腦冷靜的色。藍(lán)色的樸實(shí)、內(nèi)向性格，常為那些性格活躍、具有較強(qiáng)擴(kuò)張力的色彩，提供一個(gè)深遠(yuǎn)、廣埔、平靜的空間，成為襯托活躍色彩的友善而謙虛的朋友。藍(lán)色還是一種在淡化后仍然似能保持較強(qiáng)個(gè)性的色。如果在藍(lán)色中分別加入少量的紅、黃、黑、橙、白等色，均不會對藍(lán)色的性格構(gòu)成較明顯的影響力。32第32頁，共96頁。

（6）紫色的明度在有彩色的色料中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。在紫色中紅的成分較多時(shí)，其知覺具有壓抑感、威脅感。在紫色中加入少量的黑，其感覺就趨于沉悶、傷感、恐怖。在紫色中加入白，可使紫色沉悶的性格消失，變得優(yōu)雅、嬌氣，并充滿女性的魅力。網(wǎng)頁配色板33第33頁，共96頁。(三)網(wǎng)站風(fēng)格案例賞析

１.中國奢侈品信息網(wǎng)(/)34第34頁，共96頁。2.阿摩司視覺藝術(shù)中心（）35第35頁，共96頁。3.黑蟻設(shè)計(jì)(/index2.html)36第36頁，共96頁。4.個(gè)人網(wǎng)站(/)37第37頁，共96頁。三、任務(wù)實(shí)施【任務(wù)場景】任選一種作圖工具，體驗(yàn)網(wǎng)頁配色并繪圖?！静僮鳝h(huán)境】WindowsXP、任選一種作圖工具?！静僮鞑襟E】步驟1啟動(dòng)作圖工具（或運(yùn)行網(wǎng)頁配色程序，網(wǎng)上有下載）；步驟2體驗(yàn)網(wǎng)頁配色，為網(wǎng)頁選擇好背景、前景、強(qiáng)調(diào)等色彩搭配。四、課堂實(shí)踐例1．1任選幾個(gè)你認(rèn)為漂亮的網(wǎng)站進(jìn)行賞析，教師點(diǎn)評。38第38頁，共96頁。任務(wù)2利用切片工具制作網(wǎng)頁模板

一、任務(wù)分析

張先生的網(wǎng)站首頁背景圖片設(shè)計(jì)完成后，我們可以利用Photoshop或Fireworks等工具為他的網(wǎng)站首頁圖片進(jìn)行切片。網(wǎng)頁切片的目的是在網(wǎng)頁中創(chuàng)建導(dǎo)航鏈接、翻轉(zhuǎn)和動(dòng)畫效果，另外可以優(yōu)化圖片以提高網(wǎng)頁下載速度。課次2課時(shí)2教具投影儀備注課題任務(wù)2利用切片工具制作網(wǎng)頁模板目的掌握切片工具的使用重點(diǎn)切片工具的使用難點(diǎn)無39第39頁，共96頁。

二、相關(guān)知識下面學(xué)習(xí)Fireworks的基本操作方法。

Fireworks是第一個(gè)針對網(wǎng)頁而開發(fā)的專業(yè)圖像處理軟件。它將矢量圖像處理和位圖圖像處理合二為一，避免了圖像在多個(gè)應(yīng)用程序之間來回遷移。

Fireworks矢量圖形處理能力強(qiáng)，能任意切圖、生成鼠標(biāo)翻轉(zhuǎn)圖像；具有強(qiáng)大的動(dòng)畫和網(wǎng)絡(luò)圖像生成功能，可以進(jìn)行圖像優(yōu)化；可以導(dǎo)出帶有HTML或者JavaScript代碼的網(wǎng)頁文件；

Fireworks提供了一個(gè)真正集成的Web解決方案。40第40頁，共96頁。

（一）Fireworks常用工具

1.工具箱工具箱(Toolbox)是應(yīng)掌握的工具之一，如下所示。右下角帶有小三角號的都是工具組，用鼠標(biāo)按住工具組圖標(biāo)1秒后，其隱含的組員圖標(biāo)便會彈出，按住鼠標(biāo)不放并向右拖動(dòng)，選擇需要的組員并釋放鼠標(biāo)，此工具成員圖標(biāo)便出現(xiàn)在工具箱中，替代了原來的工具組圖標(biāo)。41第41頁，共96頁。2.Fireworks操作基礎(chǔ)在Fireworks【工具】面板中，選擇的工具決定了創(chuàng)建的對象是矢量圖還是位圖。例如，從【工具】面板的【矢量】部分選擇【鋼筆】工具，就能繪制矢量路徑；選擇【刷子】工具，則可以繪制位圖對象；選擇【文本】工具，可以鍵入文字。繪制或?qū)胧噶?、位圖對象或文本后：可以使用各種工具、效果、命令和技術(shù)來增強(qiáng)和完成圖形；可以使用【按鈕編輯器】中的工具創(chuàng)建交互式導(dǎo)航按鈕；可使用Fireworks工具編輯導(dǎo)入的JPG、GIF、PNG、PSD等圖形，如對它們進(jìn)行裁切、潤飾、蒙版處理、調(diào)整顏色和色調(diào)等處理。42第42頁，共96頁。

例1.2利用鋼筆工具（貝塞爾曲線工具），繪出如下圖形。

左圖操作步驟：

(1)選擇“直線”工具，在下方畫一條短直線；

(2)選擇“直線”工具，在上方畫一條長直線；

(3)選擇“鋼筆”工具，先在上方長線的右端點(diǎn)擊一下，再在下方短線的右端點(diǎn)擊并向左水平拖動(dòng)以改變曲線的弧度到合適即可。43第43頁，共96頁。

（二）交互式圖形

Fireworks的切片和熱點(diǎn)是指定網(wǎng)頁圖形中交互區(qū)域的對象。切片是將圖像切成不同的部分，可以將變換圖像、動(dòng)畫效果和超級鏈接等應(yīng)用到這些對象上。在網(wǎng)頁上，每個(gè)切片都放置在一個(gè)表格單元格中。使用熱點(diǎn)可將URL鏈接和行為指定給整個(gè)圖形或圖形的某個(gè)部分。切片和熱點(diǎn)可以在工作區(qū)中快速為圖形指定交換圖像行為。44第44頁，共96頁。

（三）圖形優(yōu)化和導(dǎo)出圖形

Fireworks可在導(dǎo)出圖形時(shí)進(jìn)行圖像優(yōu)化，在文件大小和品質(zhì)之間平衡，如圖所示。Fireworks源PNG文檔可以導(dǎo)出多種類型的文件，包括JPG、GIF、GIF動(dòng)畫和包含多種類型切片圖像的HTML表格。45第45頁，共96頁。

（四）矢量圖形和位圖圖像

1.矢量圖形矢量圖又稱向量圖形，它由以數(shù)學(xué)方程式所定義的直線和曲線組成，內(nèi)容以線條和色塊為主。矢量圖形特點(diǎn)：矢量圖由多個(gè)對象元素堆砌而成，各對象在計(jì)算機(jī)中由數(shù)學(xué)公式描述；每個(gè)對象都是實(shí)體，具有顏色、形狀、輪廓和大小等屬性；矢量圖與分辨率無關(guān)，將矢量圖放大或縮小，仍然會保持其清晰度，不會出現(xiàn)鋸齒狀邊緣，如圖所示；矢量圖在標(biāo)志設(shè)計(jì)、插圖設(shè)計(jì)及工程繪圖上應(yīng)用廣泛。46第46頁，共96頁。2.位圖圖像位圖又稱點(diǎn)陣圖，由許多點(diǎn)（像素）組成，每個(gè)像素有具體顏色。計(jì)算機(jī)顯示器屏幕可看作一個(gè)大的像素網(wǎng)格，在每個(gè)像素上顯示不同的顏色、亮度等，便會在整體上顯示出一幅圖像，這就是位圖圖像。特點(diǎn)如下：位圖（如圖所示）可以表現(xiàn)圖像中色彩的細(xì)微變化，能夠制作色彩和色調(diào)變化豐富的圖像，畫面細(xì)膩，過渡自然；位圖的清晰度與分辨率有關(guān)，在屏幕上將位圖放大，或以低分辨率打印，圖像會出現(xiàn)鋸齒邊緣；矢量圖中所有對象都是用數(shù)學(xué)公式表示的，因此文件所占空間小，縮放不失真。通常位圖文件比相同內(nèi)容的矢量圖像文件大，但矢量圖不易作出色調(diào)或色彩豐富變化的圖像。47第47頁，共96頁。

（五）創(chuàng)建新文檔

PNG是Fireworks的文檔格式。創(chuàng)建新文檔的步驟如下：

(1)選擇【文件】菜單/【新建】，打開下圖所示【新建文檔】對話框。

(2)輸入畫布寬度和高度度量值；以像素/英寸或像素/厘米為單位輸入分辨率；為畫布選擇白、透明或自定義顏色。

(3)單擊“確定”按鈕。48第48頁，共96頁。

（六）打開和導(dǎo)入文件

(1)選擇【文件】菜單\【打開】，打開圖所示的對話框。

(2)選擇文件并單擊“打開”按鈕。

注意：可以將矢量對象、位圖圖像或文本從支持拖動(dòng)操作的任何應(yīng)用程序（如Flash、Photoshop等）拖到Fireworks中。49第49頁，共96頁。

（七）保存Fireworks文件

(1)選擇【文件】菜單\【保存】，打開下圖左所示【另存為】對話框；

(2)輸入位置和文件名(擴(kuò)展名默認(rèn).png)，單擊“保存”按鈕。若要將文檔導(dǎo)出為其它格式，可以在【優(yōu)化】面板中選擇一種文件格式，如下圖右所示，再選擇【文件】菜單/【導(dǎo)出】命令導(dǎo)出文檔。50第50頁，共96頁。

（八）設(shè)置Fireworks工作環(huán)境

Fireworks允許用戶根據(jù)需要，對其運(yùn)行環(huán)境進(jìn)行個(gè)性化的設(shè)置，以適應(yīng)不同要求的操作習(xí)慣，來提高工作效率。

1.設(shè)置“常規(guī)”選項(xiàng)按組合鍵Ctrl+U或選擇【編輯】菜單/【首選參數(shù)】命令，彈出“首選參數(shù)”對話框，選“常規(guī)”卡片，如圖所示。51第51頁，共96頁。2.設(shè)置“編輯”選項(xiàng)在“首選參數(shù)”對話框中單擊“編輯”選項(xiàng)卡，如圖所示，其中：修剪時(shí)刪除對象：選中該復(fù)選框，用戶在使用裁剪工具時(shí)，裁剪區(qū)域外的圖像將被刪除。 在轉(zhuǎn)換為選取框時(shí)刪除路徑：選中該復(fù)選框，用戶在將路徑轉(zhuǎn)換為選取框（修改菜單）后路徑將被刪除。下圖為不刪除路徑時(shí)的情形。52第52頁，共96頁。

刷子大小繪圖光標(biāo)：設(shè)置“刷子”、“橡皮擦”、“模糊”、“銳化”、“減淡”、“加深”、“涂沫”等工具的指針形狀，如打勾，則顯示為十字形指針。否則顯示的是工具圖標(biāo)指針。下圖為使用刷子工具時(shí)的顯示效果。精確光標(biāo)：選中該復(fù)選框（不選前一項(xiàng)），在使用工具進(jìn)行圖像編輯時(shí)，光標(biāo)將顯示為十字形狀，有利于用戶對圖像的精確定位。53第53頁，共96頁。

在“‘鋼筆’工具選項(xiàng)”選項(xiàng)區(qū)中，選中“顯示鋼筆預(yù)覽”復(fù)選框，可在使用“鋼筆”工具單擊時(shí)，提供將創(chuàng)建的下一個(gè)路徑段的預(yù)覽；如圖下。

“顯示實(shí)心點(diǎn)”復(fù)選框打勾，可將未選中的控制點(diǎn)顯示為實(shí)心點(diǎn)。54第54頁，共96頁。

（九）更改畫布新建或打開圖像后，可根據(jù)需求調(diào)整畫布尺寸及顏色，以及對畫布進(jìn)行旋轉(zhuǎn)和裁剪等操作。

1.新建文檔，單擊“新建文檔”對話框中的“自定義”，從調(diào)色板中選擇合適的顏色作為畫布的顏色，如下圖所示。

如要更改畫布的顏色，選擇【修改】菜單/【畫布】/【畫布顏色】，或在畫布中單擊鼠標(biāo)右鍵，在彈出菜單中選擇【修改畫布】/【畫布顏色】選項(xiàng)，打開“畫布顏色”對話框。55第55頁，共96頁。

2.旋轉(zhuǎn)與修剪畫布選擇【修改】菜單/【畫布】命令，執(zhí)行旋轉(zhuǎn)畫布操作，如旋轉(zhuǎn)180°、順時(shí)針旋轉(zhuǎn)90°和逆時(shí)針旋轉(zhuǎn)90°等。如圖像的四周有空白的畫布區(qū)域，可選擇【修改】菜單/【畫布】/【修剪畫布】命令，將這些空白區(qū)域裁掉。如選擇【修改】菜單/【畫布】/【符合畫布】命令，則系統(tǒng)將自動(dòng)調(diào)整畫布尺寸，裁去四周的空白畫布區(qū)域。如果此時(shí)有超出畫布的對象，則畫布被擴(kuò)展。56第56頁，共96頁。

（十）切片工具的使用一個(gè)由圖片為主的網(wǎng)頁，整幅圖像的下載速度較慢?？稍贔ireworks中設(shè)定好切片大小后，導(dǎo)出為帶有表格的HTML文件。該文件中將各幅小圖片插入到相應(yīng)的單元格中，并使表格的格線寬度為0，使各幅圖片之間沒有縫隙，看起來就像一幅圖片一樣，在下載時(shí)，圖像是從切片的各個(gè)位置同時(shí)出現(xiàn)(馬賽克效果)，切割后的總占用空間一般少于原圖空間。下面根據(jù)已經(jīng)制作好的圖像介紹操作步驟。

1.導(dǎo)入圖像及畫輔助線

(1)新建文檔，畫布寬設(shè)為500像素、高設(shè)為375像素、分辨率設(shè)為72像素／英寸，畫布底色白色，單擊【確定】按鈕。57第57頁，共96頁。(2)選【文件】菜單/【導(dǎo)入…】命令，導(dǎo)入所需圖片，如下圖左所示。

(3)選擇【視圖】菜單/【標(biāo)尺】命令，鼠標(biāo)移到標(biāo)尺的灰色區(qū)域中，按下鼠標(biāo)左鍵，向圖像內(nèi)拖曳鼠標(biāo)，拖到一定位置后釋放鼠標(biāo)，畫面上出現(xiàn)一條輔助線。從縱向標(biāo)尺拖動(dòng)鼠標(biāo)產(chǎn)生縱向輔助線，從橫向標(biāo)尺拖動(dòng)產(chǎn)生橫向輔助線。如此給畫面加若干輔助線，把畫面分割成若干區(qū)域，如下右所示。如果輔助線位置不合適，將鼠標(biāo)移到輔助線上，鼠標(biāo)左鍵直接拖動(dòng)即可。將輔助線拖出畫面即可刪除輔助線。58第58頁，共96頁。2.切割圖片及優(yōu)化輸出

(1)選擇工具箱中的矩形切片工具，沿著輔助線把圖片切成一個(gè)個(gè)的矩形區(qū)域，每個(gè)切片上被覆蓋了一層綠色，指向切片時(shí)四周用紅線分割，本例有6個(gè)切片，如下所示。59第59頁，共96頁。

（2）制作了所有切片并在優(yōu)化面板設(shè)置了優(yōu)化選項(xiàng)后，選擇【文件】菜單/【導(dǎo)出】命令，彈出如下右的【導(dǎo)出】對話框。(3)選中下部的【將圖象放入子文件夾】復(fù)選框：將圖片放到子文件夾下，下邊的”瀏覽”按鈕被激活，按鈕右邊是子文件夾名，默認(rèn)是images。優(yōu)化面板60第60頁，共96頁。

如果欲自定義圖片存放的文件夾，可以單擊”瀏覽”按鈕，彈出如下左圖所示的【選擇文件夾】對話框。

3.其他設(shè)置

(1)單擊前面對話框中的按鈕，彈出“HTML設(shè)置”對話框。在【常規(guī)】卡片中設(shè)定要導(dǎo)出的HTML類型及擴(kuò)展名，這里取默認(rèn)值，如下右圖所示。61第61頁，共96頁。(2)單擊【表格】卡片，可以設(shè)置切片經(jīng)過切分HTML表格的空白單元選項(xiàng)。Fireworks默認(rèn)采用一個(gè)像素寬的透明文件(默認(rèn)為)來填充單元格間距（即【1象素透明間隔符】）。下邊的【空單元格】欄可設(shè)置空白單元的顏色和圖像。

(3)單擊【文檔特定信息】卡片，設(shè)置各切片導(dǎo)出的文件命名格式。默認(rèn)是【文件名】+【下劃線】+切片所在的【行值】和【列值】。62第62頁，共96頁。

還可以選擇【文件名】+【下劃線】+【1，2，3，4，】這種方式。如果只對重要的部分設(shè)置了切片，可將【包含沒有切片的區(qū)域】打勾，這樣可以把沒切片的區(qū)域也一起導(dǎo)出。(4)單擊”確定”按鈕，返回到前一對話框中，單擊”保存”按鈕，命名為。最后保存png文檔。63第63頁，共96頁。如果輔助線位置不合適，將鼠標(biāo)移到輔助線上，鼠標(biāo)左鍵直接拖動(dòng)即可。第10步：按以下對話框?qū)С鑫臋n：netFramework選擇需要的組員并釋放鼠可以將鏈接理解為指向其它資源的“指針”。（十）切片工具的使用修剪時(shí)刪除對象：選中該復(fù)選框，第5步：在（416，80）處在紫色中紅的成分較多時(shí)，其知覺具有壓抑感、威脅感。它們看起來還有遠(yuǎn)離觀眾的效果，所以適于做頁面背景。第12步：使用切片工具在頁面上按下圖樣式進(jìn)行切片：(2)WWW的工作原理(十一)熱區(qū)和切片的應(yīng)用熱區(qū)（Hotspot）和切片（Slice）是用來創(chuàng)建圖像交互效果的重要工具，下面的例子使用熱區(qū)和切片實(shí)現(xiàn)圖片的切換，運(yùn)行效果(例)是當(dāng)用鼠標(biāo)指向文本時(shí)在圖片區(qū)域中顯示出相應(yīng)的動(dòng)物圖片。操作步驟如下。（1）準(zhǔn)備6張用于切換的動(dòng)物圖片。本例的6幅圖片如下所示。（2）在Fireworks中新建一個(gè)文檔。64第64頁，共96頁。

（3）在文檔窗口中繪制一個(gè)矩形區(qū)域，準(zhǔn)備放置這6張圖片。點(diǎn)擊矩形工具按鈕，在文檔窗口中用鼠標(biāo)拖拽出一個(gè)適當(dāng)大小的矩形；（4）選中矩形，在屬性面板中設(shè)置邊線為紅色，填充為白色；（5）在工具面板中點(diǎn)擊文字工具，在文檔窗口底端放一段文字，內(nèi)容為【豹子狐貍蝴蝶馬母雞屎克郎】；（6）利用矩形熱點(diǎn)工具，為這段文字中的各動(dòng)物名稱設(shè)置熱區(qū)。只有熱區(qū)內(nèi)的對象才能加入動(dòng)作。這里要實(shí)現(xiàn)鼠標(biāo)指向文字時(shí)顯示圖片，就必須把文字所在的區(qū)域設(shè)為熱區(qū)，如下圖所示。熱區(qū)65第65頁，共96頁。

（7）添加幀。在Fireworks中可以添加許多幀，但每次窗口中只能顯示其中的一幀，因此要切換6張圖片，就要把它們分別放在6個(gè)幀當(dāng)中。打開【幀】浮動(dòng)面板，點(diǎn)擊浮動(dòng)面板右上角的黑色三角形“選項(xiàng)”按鈕，從菜單中點(diǎn)選【重制幀】，在【數(shù)目】框中輸入6，并選取【在當(dāng)前幀之后】選項(xiàng)，表示在當(dāng)前幀的后面再復(fù)制6個(gè)幀，如下左圖所示。重制后的【幀】浮動(dòng)面板如下右圖所示。CS3界面66第66頁，共96頁。(8)把準(zhǔn)備好的圖片添加到各幀中。點(diǎn)選【幀】浮動(dòng)面板中的幀2，選擇【文件】菜單/【導(dǎo)入…】，在打開的【導(dǎo)入】對話框中選擇第一幅豹子的圖片，在矩形區(qū)域中劃過一個(gè)區(qū)域，將圖片放入該區(qū)域，之后可能還要對圖片進(jìn)行適當(dāng)?shù)恼{(diào)整，如下左圖所示。

(9)用同樣的方法，在幀3、4、5、6、7中分別導(dǎo)入其他5張圖片。

(10)設(shè)置切片。切片（Slice）是可以接受交互動(dòng)作的區(qū)域，回到幀1中，選擇工具面板中的切片工具，將矩形邊框所在的區(qū)域切割成為一個(gè)切片，如下右圖所示。熱區(qū)切片67第67頁，共96頁。

（11）設(shè)置交互動(dòng)作。用選取工具點(diǎn)選左邊的【豹子】熱區(qū)，按住【描準(zhǔn)】小圖標(biāo)，將它拖到切片區(qū)域上，放開鼠標(biāo)。拖拽到矩形切片上時(shí)，會發(fā)現(xiàn)這兩個(gè)區(qū)域被一條曲線連接起來了。接著會彈出選擇切換圖片的對話框，其中預(yù)設(shè)為幀2，這里不用修改。表示當(dāng)鼠標(biāo)移到文字熱區(qū)【豹子】上時(shí)，把切片矩形區(qū)域中顯示的內(nèi)容由幀1切換到幀2，顯示出幀2中的豹子圖片，如下左圖所示。（12）重復(fù)上一個(gè)步驟。將【狐貍】、【蝴蝶】、【馬】、【母雞】、【屎克郎】5個(gè)熱區(qū)分別鏈接到切片區(qū)域上。在鏈接時(shí)，要將交換圖像對話框中的【交換圖象自】分別修改為幀3至幀7，表示鼠標(biāo)移到【狐貍】、【蝴蝶】、【馬】、【母雞】、【屎克郎】上時(shí)，分別顯示這5張圖片。（13）預(yù)覽。點(diǎn)擊文檔窗口的【預(yù)覽】選項(xiàng)卡，或?qū)С鰹榫W(wǎng)頁文件在瀏覽器中顯示。下右圖是鼠標(biāo)指向【豹子】的顯示效果。68第68頁，共96頁。(十二)下拉菜單的制作當(dāng)網(wǎng)頁具有較多功能時(shí)，如果每種功能都通過一個(gè)按鈕來實(shí)現(xiàn)，會使頁面看起來很雜亂。好的辦法是使用菜單。下拉菜單主要用于導(dǎo)航欄中的選項(xiàng)存在子選項(xiàng)的情況下，當(dāng)用戶將指針移到導(dǎo)航欄中某個(gè)對象時(shí)，將顯示相應(yīng)的彈出菜單。（1）新建文檔，使用文字工具輸入文本“系部簡介”；（2）用矩形熱點(diǎn)工具將“系部簡介”四字框住，將其設(shè)置為熱區(qū)，如上所示。（3）選取指針工具，右鍵單擊“系部簡介”熱區(qū)，在彈出的快捷菜單（如下左圖所示）中選擇【添加彈出菜單…】，得到如下右圖所示的對話框。69第69頁，共96頁。

（4）輸入菜單項(xiàng)的文本內(nèi)容及鏈接地址后按”+”按鈕，以增加菜單項(xiàng)。（5）所有鏈接對象的名稱和地址輸入完畢后點(diǎn)”繼續(xù)”按鈕，得到如下左圖所示的對話框。（6）設(shè)置完菜單的行為顏色屬性后點(diǎn)擊”完成”按鈕，回到編輯窗口，點(diǎn)擊“系部簡介”熱區(qū)，用鼠標(biāo)拖動(dòng)菜單的框線到合適位置即可，設(shè)計(jì)完畢。（7）按下F12鍵，在IE中瀏覽（下拉菜單只能在瀏覽器中顯示），將鼠標(biāo)移動(dòng)到相應(yīng)的選項(xiàng)上，會顯示出下拉菜單，得到如下右圖的顯示效果。習(xí)題170第70頁，共96頁。

Fireworks應(yīng)用實(shí)例1：運(yùn)行效果1.設(shè)置文檔或?qū)雸D像第1步：在工作目錄中建立文件夾X4-01。第2步：啟動(dòng)Fireworks，打開，如下所示：（如果在打開圖像文件時(shí)同時(shí)出現(xiàn)“替換字體”對話框，單擊“維持外觀”）71第71頁，共96頁。2.繪制頁面圖像第3步：選擇“文本”工具，在圖像上輸入文本“”。如右所示：

第4步：選中輸入的文本，執(zhí)行“窗口”菜單\“樣式”，在“樣式”面板中選擇一種樣式，如右所示：72第72頁，共96頁。

第5步：執(zhí)行“窗口”菜單\“屬性”，在“屬性”面板中設(shè)置文本字號為18號，寬度320，高30，X值18,Y值248，如下所示：73第73頁，共96頁。3.按鈕、樣式和特效的使用（庫按鈕）第6步：執(zhí)行“編輯”菜單\“插入”\“新建按鈕”，點(diǎn)擊“導(dǎo)入按鈕”按鈕，打開“導(dǎo)入元件：buttons”

對話框，選中一種按鈕類型，點(diǎn)“導(dǎo)入”按鈕，往頁面上依次加入三個(gè)按鈕（不能用復(fù)制的方法產(chǎn)生），按鈕的寬度為110像素、高28像素，位置分別為（3，20），（3，70），（3，120），如下所示：74第74頁，共96頁。

第7步：雙擊各按鈕，進(jìn)入按鈕編輯狀態(tài)，單擊“釋放”標(biāo)簽，將按鈕文字分別設(shè)置為“專欄”、“教程”、“論壇”，文字大小為25，隸書，加粗，將“釋放”狀態(tài)的文字分別復(fù)制粘貼到按鈕的其他狀態(tài)中（刪除原文字），如下所示：75第75頁，共96頁。

第7步：雙擊各按鈕，進(jìn)入按鈕編輯狀態(tài)，單擊“釋放”標(biāo)簽，將按鈕文字分別設(shè)置為“專欄”、“教程”、“論壇”，文字大小為25，隸書，加粗，將“釋放”狀態(tài)的文字分別復(fù)制粘貼到按鈕的其他狀態(tài)中（刪除原文字），如下所示：76第76頁，共96頁。4.設(shè)定交互圖像或文本第8步：進(jìn)入“幀”面板，添加三個(gè)幀，分別在幀2、幀3、幀4中導(dǎo)入圖像、、，如下所示：77第77頁，共96頁。

第9步：在屬性面板中設(shè)置圖像大小為150X150，X位置350，Y位置130。第10步：回到第1幀，用切片工具在圖像上拖動(dòng)鼠標(biāo)，產(chǎn)生一個(gè)矩形切片，點(diǎn)擊“專欄”按鈕，將其上的切片描準(zhǔn)器拖放到矩形切片上，在彈出的“交換圖像”對話框中選擇幀2，同樣方法使“教程”和“論壇”按鈕的行為交換圖像分別對應(yīng)幀3和幀4，如下所示。最后將文件另存為。78第78頁，共96頁。5.優(yōu)化圖像第11步：在優(yōu)化面板，設(shè)置“JPEG-較小文件”，品質(zhì)60，平滑2。如右所示：6.建立切片第12步：使用切片工具在頁面上按下圖樣式進(jìn)行切片：79第79頁，共96頁。7.導(dǎo)出HTML文件第13步：執(zhí)行“文件”菜單\“導(dǎo)出”，按下圖進(jìn)行設(shè)置，最后點(diǎn)“導(dǎo)出”按鈕。80第80頁，共96頁。

Fireworks應(yīng)用實(shí)例2：運(yùn)行效果1.設(shè)置文檔或?qū)雸D像第1步：在root中建立文件夾X4-02。第2步：啟動(dòng)Fireworks，選擇“文件”菜單\“新建”，在對話框中作如下設(shè)置：81第81頁，共96頁。2.繪制頁面圖像第3步：導(dǎo)入圖像到畫布左上角，如下所示。82第82頁，共96頁。

第4步：設(shè)置透明色。選