第9章 網(wǎng)頁設(shè)計(jì)與制作

第9章網(wǎng)頁設(shè)計(jì)與制作貴州師范大學(xué)數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院計(jì)算機(jī)公共教研室內(nèi)容提要9.1初涉網(wǎng)站建設(shè)9.2認(rèn)識(shí)網(wǎng)頁制作軟件9.3添加網(wǎng)頁元素9.4布局網(wǎng)頁9.5網(wǎng)頁圖像的簡單處理9.6網(wǎng)頁動(dòng)畫的簡單制作9.7發(fā)布網(wǎng)站9.1初涉網(wǎng)站建設(shè)網(wǎng)頁制作基礎(chǔ)知識(shí)常用網(wǎng)頁制作相關(guān)軟件9.1.1網(wǎng)頁制作基礎(chǔ)知識(shí)1.什么是網(wǎng)頁瀏覽網(wǎng)站時(shí)，在瀏覽器中看到的頁面就是網(wǎng)頁，網(wǎng)頁又稱Web頁，其中包括各種各樣的網(wǎng)頁元素，如文本、圖像、動(dòng)畫、聲音、表單和超鏈接等。9.1.1網(wǎng)頁制作基礎(chǔ)知識(shí)2.什么是網(wǎng)頁組成元素網(wǎng)頁是由多種元素組成，文本和圖像是網(wǎng)頁最基本的元素，它們在網(wǎng)頁中起著非常重要的作用，是網(wǎng)頁主要的信息載體。除文本和圖像之外，網(wǎng)頁中還可以包括動(dòng)畫、音樂等多媒體元素。（1）文本網(wǎng)頁中文本的樣式繁多、風(fēng)格不一，吸引人的網(wǎng)頁通常都具有美觀的文本樣式。文本的樣式可以通過對網(wǎng)頁文本的屬性進(jìn)行設(shè)置修改，在后面的章節(jié)將會(huì)詳細(xì)講解這方面的知識(shí)。（2）圖像圖像也是網(wǎng)頁中不可或缺的元素。圖像比文本更直觀和生動(dòng)，它還可以傳遞一些文本所不能傳遞的信息。網(wǎng)站標(biāo)識(shí)Logo、Banner等通常都是圖像。（2）圖像網(wǎng)頁中支持的圖像格式有JPG、GIF和PNG三種。其中JPG格式用于照片級圖像時(shí)使用，GIF格式支持動(dòng)畫和背景透明，PNG格式也支持背景透明，但目前不太常用。JPG格式用于照片級圖像時(shí)使用GIF格式支持動(dòng)畫和背景透明（3）動(dòng)畫網(wǎng)頁中動(dòng)畫的格式GIF動(dòng)畫SWF動(dòng)畫（4）音樂網(wǎng)頁中常用的音樂格式有MID和MP3。MID是通過計(jì)算機(jī)軟硬件合成的音樂，不能被錄制;MP3是壓縮文件，其壓縮率非常高，音質(zhì)也不錯(cuò)，是背景音樂的首選。9.1.1網(wǎng)頁制作基礎(chǔ)知識(shí)3.什么是網(wǎng)站網(wǎng)站就是一個(gè)或多個(gè)網(wǎng)頁的集合。按網(wǎng)站內(nèi)容可以將網(wǎng)站分為：門戶網(wǎng)站個(gè)人網(wǎng)站專業(yè)網(wǎng)站職能網(wǎng)站9.1.1網(wǎng)頁制作基礎(chǔ)知識(shí)4.網(wǎng)頁的類型按位置分類主頁內(nèi)容頁9.1.1網(wǎng)頁制作基礎(chǔ)知識(shí)4.網(wǎng)頁的類型按表現(xiàn)形式分類靜態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁9.1.1網(wǎng)頁制作基礎(chǔ)知識(shí)5．網(wǎng)頁制作中的專業(yè)術(shù)語在網(wǎng)頁制作過程中常常會(huì)遇到一些專業(yè)名詞，如Logo、Banner、導(dǎo)航條、超鏈接和發(fā)布等。Logo：網(wǎng)站的“商標(biāo)”，一般包含網(wǎng)站名稱、網(wǎng)址、網(wǎng)站標(biāo)志和網(wǎng)站理念4部分，并位于頁面的左上角。Banner：通常被做成動(dòng)畫效果，用于宣傳網(wǎng)頁內(nèi)容，也稱為廣告條。導(dǎo)航條：鏈接著各個(gè)頁面，就如同一個(gè)網(wǎng)站的路標(biāo)，只要單擊導(dǎo)航條中的超鏈接就能進(jìn)入相應(yīng)的頁面。超鏈接：能起到將不同頁面連接起來的功能，可以是同一站點(diǎn)頁面之間的鏈接，也可以是與其他網(wǎng)站頁面之間的鏈接。超鏈接有文本鏈接、圖像鏈接。在瀏覽網(wǎng)頁時(shí)，單擊超鏈接就能轉(zhuǎn)到與之對應(yīng)的頁面。發(fā)布：指把制作好的網(wǎng)頁上傳到網(wǎng)絡(luò)上的過程，有時(shí)也稱為上傳網(wǎng)站。9.1.2常用網(wǎng)頁制作相關(guān)軟件Dreamweaver是一款優(yōu)秀的網(wǎng)頁設(shè)計(jì)軟件，它能將文本、圖像、動(dòng)畫和音樂等整合在一起，在指定的位置顯示對象。9.1.2常用網(wǎng)頁制作相關(guān)軟件網(wǎng)頁中加上圖像的點(diǎn)綴，可以使網(wǎng)頁更豐富多彩。圖像處理軟件非常多，但在制作網(wǎng)頁時(shí)經(jīng)常使用的軟件是Fireworks和Photoshop。特別是Fireworks，它是Adobe公司專門為處理網(wǎng)頁圖像量身訂作的圖形圖像處理軟件。9.1.2常用網(wǎng)頁制作相關(guān)軟件Flash動(dòng)畫是網(wǎng)頁中普遍使用的一種動(dòng)畫格式，使用Flash軟件進(jìn)行Flash動(dòng)畫制作是非常方便的。9.2認(rèn)識(shí)網(wǎng)頁制作軟件初識(shí)Dreamweaver8文檔的基本操作設(shè)置頁面屬性規(guī)劃與創(chuàng)建站點(diǎn)面板組“文件”面板“文檔”窗口狀態(tài)欄標(biāo)簽選擇器“屬性”面板文檔工具欄插入欄1.插入欄2.文檔工具欄窗口視圖切換設(shè)置文檔標(biāo)題文件管理預(yù)覽文檔3.面板組面板組位于工作界面的右側(cè)，由“CSS”、“應(yīng)用程序”、“文件”等多個(gè)面板組組成。各面板組又包含了若干個(gè)面板，它們是一些相關(guān)的特定功能的集合。4.屬性面板屬性面板位于文檔窗口底部，用于查看或編輯當(dāng)前選定網(wǎng)頁元素的常用屬性。根據(jù)所選的網(wǎng)頁元素的不同，屬性面板中的參數(shù)設(shè)置選項(xiàng)也會(huì)各有不同。5.狀態(tài)欄9.2.2文檔的基本操作1.創(chuàng)建網(wǎng)頁新安裝的Dw在新建文檔時(shí)默認(rèn)按照標(biāo)準(zhǔn)HTML格式進(jìn)行創(chuàng)建，對于新手而言，可以不修改任何設(shè)置，直接單擊“創(chuàng)建”按鈕。標(biāo)準(zhǔn)靜態(tài)網(wǎng)頁文檔的頁面類型為“HTML”，其文檔類型為“XHTML1.0Transtional”9.2.2文檔的基本操作2.預(yù)覽網(wǎng)頁選擇文檔工具欄中的按鈕，可以在瀏覽器中對網(wǎng)頁效果進(jìn)行預(yù)覽。3.保存網(wǎng)頁選擇“文件”菜單下的“保存”命令，打開“另存為”對話框。在“保存在”下拉列表框中選擇文件的保存位置，在“文件名”列表框中輸入文件名。單擊“保存”按鈕，完成保存的操作。9.2.2文檔的基本操作4.打開網(wǎng)頁通過對話框打開通過菜單命令打開通過雙擊方式打開通過快捷菜單打開9.2.3設(shè)置頁面屬性設(shè)置外觀屬性設(shè)置鏈接屬性設(shè)置標(biāo)題屬性1.設(shè)置外觀屬性打開“頁面屬性”對話框后，默認(rèn)為外觀類別，在其右側(cè)可進(jìn)行頁面外觀屬性的詳細(xì)設(shè)置，包括網(wǎng)頁文檔中的文本字體、文本大小、文本顏色和網(wǎng)頁文檔背景顏色、網(wǎng)頁文檔背景圖像等的設(shè)置。

2.設(shè)置鏈接屬性設(shè)置鏈接屬性是指設(shè)置網(wǎng)頁文檔中超級鏈接各種狀態(tài)的樣式設(shè)置鏈接文本的顏色設(shè)置已訪問鏈接文本的顏色設(shè)置變換圖像鏈接文本的顏色設(shè)置活動(dòng)鏈接文本的顏色3.設(shè)置標(biāo)題屬性在“頁面屬性”對話框的“分類”列表框中選擇“標(biāo)題”選項(xiàng)后，在其右側(cè)面板中可設(shè)置網(wǎng)頁中標(biāo)題的字體、大小和顏色等參數(shù)，其設(shè)置方法與設(shè)置外觀的樣式基本相同。在“標(biāo)題”文本框中輸入網(wǎng)頁標(biāo)題，該標(biāo)題將出現(xiàn)在瀏覽器標(biāo)題欄中。在“文檔類型”下拉列表框中可以選擇所編輯的文檔類型，通常選擇XHTL1.0Transitional或XHTML1.0Strict，可以使HTML文檔與XHTML兼容。9.2.4規(guī)劃與創(chuàng)建站點(diǎn)在創(chuàng)建站點(diǎn)前需要先進(jìn)行站點(diǎn)規(guī)劃。站點(diǎn)規(guī)劃的目的在于明確建站的方向和確定實(shí)現(xiàn)這一目標(biāo)所采用的方式，同時(shí)也是確定本站點(diǎn)所要實(shí)現(xiàn)的功能。必須有的信息想要有的信息可以沒有的信息9.2.4規(guī)劃與創(chuàng)建站點(diǎn)1.認(rèn)識(shí)站點(diǎn)通過各種鏈接聯(lián)系起來的多個(gè)網(wǎng)頁文檔構(gòu)成了站點(diǎn)。站點(diǎn)是管理網(wǎng)頁文檔的場所，利用站點(diǎn)的管理功能可以對站點(diǎn)中的文件進(jìn)行管理和測試。9.2.4規(guī)劃與創(chuàng)建站點(diǎn)本地站點(diǎn)：是用戶工作的目錄，用于存放用戶網(wǎng)頁、素材等本地文件夾，在制作一般網(wǎng)頁時(shí)只需要建立本地站點(diǎn)即可。遠(yuǎn)程站點(diǎn)：為了在不連接Internet的情況下而能對所建的站點(diǎn)進(jìn)行測試、修改，需要在本地計(jì)算機(jī)上創(chuàng)建遠(yuǎn)程站點(diǎn)，以模擬真實(shí)的Web服務(wù)器環(huán)境進(jìn)行測試。測試站點(diǎn)：主要用于對動(dòng)態(tài)網(wǎng)頁進(jìn)行測試，如在制作ASP、PHP或JSP等動(dòng)態(tài)網(wǎng)頁時(shí)必須創(chuàng)建測試站點(diǎn)，否則瀏覽網(wǎng)頁時(shí)它將不能正確顯示。9.2.4規(guī)劃與創(chuàng)建站點(diǎn)2.規(guī)劃站點(diǎn)規(guī)劃站點(diǎn)是指利用不同的文件夾將不同的網(wǎng)頁內(nèi)容分門別類地保存，合理地組織站點(diǎn)結(jié)構(gòu)，可以提高工作效率，加快對站點(diǎn)的設(shè)計(jì)。在規(guī)劃站點(diǎn)結(jié)構(gòu)時(shí)，最常采用的是樹形模式的規(guī)劃法。9.2.4規(guī)劃與創(chuàng)建站點(diǎn)2.規(guī)劃站點(diǎn)3.創(chuàng)建并管理站點(diǎn)站點(diǎn)是Dreamweaver中對屬于同一網(wǎng)站下的文件進(jìn)行合理、有效組織的手段，創(chuàng)建站點(diǎn)后可以更有效地對站點(diǎn)內(nèi)文件進(jìn)行管理。本地路徑設(shè)置地址信息管理遠(yuǎn)程服務(wù)器信息管理測試服務(wù)器環(huán)境配置模板管理9.3添加網(wǎng)頁元素添加網(wǎng)頁文本設(shè)置文本格式添加網(wǎng)頁圖像添加超鏈接添加動(dòng)畫及音樂9.3.1添加網(wǎng)頁文本插入、編輯文本內(nèi)容設(shè)置文本格式、段落格式設(shè)置文本超級鏈接1.添加普通文本在Dreamweaver8中通過“文本”插入欄可以快速添加各類型的文本。添加文本方法：直接輸入文本從其他文檔中復(fù)制文本采用剪貼板將文本粘貼到頁面。導(dǎo)入文本使用Dreamweaver8可以導(dǎo)入XML模板、表格式數(shù)據(jù)、Word以及Excel等文檔中的文本。（文件/導(dǎo)入/……）2.添加特殊符號在Dreamweaver8中提供了二種將特殊符號添加到網(wǎng)頁文檔中的簡單方法：方法一：單擊“文本”插入欄中“字符”按鈕組的下拉按鈕，在彈出的菜單中選擇相應(yīng)的特殊符號。從“插入”/“HTML”/“特殊字符”子菜單中選擇字符名稱。3.添加空格在Dreamweaver8中輸入空格時(shí)會(huì)發(fā)現(xiàn)無論按多少次空格鍵都只會(huì)出現(xiàn)一個(gè)空格，這是因?yàn)镈reamweaver8的文檔格式都是以HTML的形式存在，而HTML文檔中只允許字符之間包含一個(gè)空格。要在網(wǎng)頁文檔中添加連續(xù)的空格，可以采用以下幾種方式：選擇“插入”/“HTML”/“特殊字符”/“不換行空格”命令可以添加一個(gè)空格，如果需要添加多個(gè)空格可重復(fù)操作。按Shift+Ctrl+空格鍵添加一個(gè)空格，如果需要添加多個(gè)空格可重復(fù)操作。將輸入法切換到全角狀態(tài)（通常按Shift+空格鍵可以進(jìn)行全、半角狀態(tài)切換），直接敲空格鍵，需要多少個(gè)空格就按多少次空格鍵。4.添加水平線水平線主要用于分割文本段落、頁面修飾等。應(yīng)用實(shí)例：億郵平臺(tái)作業(yè)界面

貴州師范大學(xué)公告欄4.添加水平線插入水平線操作需要使用“插入”/“HTML”/“水平線”命令來實(shí)現(xiàn)，而插入后可通過“水平線”屬性面板設(shè)置其屬性參數(shù)。在“水平線”屬性面板中選擇“寬”為百分比單位時(shí)，水平線的寬度是相對當(dāng)前頁面或水平線的父元素而言的。5.添加日期在Dreamweaver8中提供了二種添加當(dāng)前日期（包含或不包含時(shí)間）到網(wǎng)頁文檔中的簡單方法：方法一：選擇“插入”/“日期”命令添加日期。方法二：將插入欄切換到“常用”插入欄，單擊“日期”按鈕添加日期。9.3.2設(shè)置文本格式添加到網(wǎng)頁中的文本并不總是能滿足網(wǎng)頁制作的需要，這時(shí)可以通過“屬性”面板對其文本和段落格式進(jìn)行相應(yīng)的設(shè)置。合理設(shè)置網(wǎng)頁文本格式，可以使網(wǎng)頁更美觀，層次更分明。在“屬性”面板中可對文本的字體、字號、字形和顏色等屬性進(jìn)行設(shè)置字體字號字形顏色9.3.3添加網(wǎng)頁圖像網(wǎng)頁中的圖像常被稱作圖片，其基本單位是像素。像素是指組成圖像的一個(gè)個(gè)小點(diǎn)，即指圖像橫向和縱向的像素點(diǎn)數(shù)。1.插入圖像插入圖像的操作步驟如下：選擇“插入/圖像”命令或?qū)⒉迦霗谇袚Q到“常用”插入欄，單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。在“查找范圍”下拉列表框中選擇要插入的圖像的位置。2.設(shè)置圖像屬性在Dreamweaver中，圖像和文本一樣有各種屬性設(shè)置，通過圖像“屬性”面板進(jìn)行精確控制圖像的大小、邊距、邊框、對齊方式以及編輯圖像等屬性設(shè)置?！皥D像”文本框“寬”和“高”文本框“源文件”文本框2.設(shè)置圖像屬性“圖像”文本框：用于設(shè)置圖像名稱“寬”和“高”文本框：用于設(shè)置圖像大小“源文件”文本框：用于顯示圖像文件的位置“替換”下拉列表框：用于設(shè)置圖像的簡短描述文本“垂直邊距”和“水平邊距”文本框：用于設(shè)置圖像與文本在垂直方向與水平方向的距離?！斑吙颉蔽谋究颍河糜谠O(shè)置邊框的寬度“對齊”下拉列表框：用于設(shè)置同一行上的圖像與文本的對齊方式?！傲炼群蛯Ρ榷取卑粹o：用于調(diào)整圖像的明暗度。3.創(chuàng)建鼠標(biāo)經(jīng)過圖像瀏覽網(wǎng)頁可發(fā)現(xiàn)鼠標(biāo)移動(dòng)到某個(gè)按鈕上時(shí)，該按鈕外觀發(fā)生變化，這種效果實(shí)際上是兩張按鈕圖片交換的結(jié)果。在Dreamweaver中通過“插入鼠標(biāo)經(jīng)過圖像”功能可以很方便地實(shí)現(xiàn)這種效果。3.創(chuàng)建鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像前的顯示效果鼠標(biāo)經(jīng)過圖像后的顯示效果9.3.4添加超鏈接在瀏覽網(wǎng)頁的過程中，當(dāng)單擊某些文本或圖像時(shí)即可跳轉(zhuǎn)到其他網(wǎng)頁中，這些文本或圖像就是添加了超級鏈接的文本或圖像。超級鏈接能夠?qū)崿F(xiàn)頁面與頁面之間的跳轉(zhuǎn)，從而將網(wǎng)站中的每個(gè)頁面有機(jī)地連接起來。超鏈接由源端點(diǎn)和目標(biāo)端點(diǎn)兩部分組成。其中有超鏈接的一端稱為源端點(diǎn)（響應(yīng)鼠標(biāo)單擊操作的圖像或文本），跳轉(zhuǎn)到的頁面稱為目標(biāo)端點(diǎn)（打開的新頁面）。在網(wǎng)頁中，可以添加文本超鏈接、圖像熱點(diǎn)超鏈接、電子郵件超鏈接、錨超鏈接和空鏈接。1.添加基本超級鏈接基本超級鏈接：文本超級鏈接圖像超級鏈接在屬性面板的鏈接選項(xiàng)中進(jìn)行相應(yīng)設(shè)置。1.添加基本超級鏈接2.添加圖像熱點(diǎn)超級鏈接圖像熱點(diǎn)超級鏈接是指在一幅圖像上的不同區(qū)域設(shè)置多個(gè)超級鏈接。在添加超級鏈接時(shí)，首先需要選擇圖像，使用屬性面板左下角的熱點(diǎn)創(chuàng)建工具進(jìn)行熱點(diǎn)區(qū)域的創(chuàng)建，然后分別選擇所創(chuàng)建的熱點(diǎn)區(qū)域，在“鏈接”文本框中輸入目標(biāo)端點(diǎn)網(wǎng)頁的路徑及名稱即可。2.添加圖像熱點(diǎn)超級鏈接熱點(diǎn)創(chuàng)建工具為熱點(diǎn)區(qū)域設(shè)置鏈接地址和打開方式繪制的熱點(diǎn)區(qū)域3.添加電子郵件超級鏈接使用“常用”插入欄中單擊“電子郵件鏈接”按鈕或選擇“插入/電子郵件鏈接”命令添加電子郵件超級鏈接。4.添加錨鏈接錨鏈接的功能是實(shí)現(xiàn)源文檔與目標(biāo)文檔中指定部分的快速跳轉(zhuǎn)。它可以跳轉(zhuǎn)到其他網(wǎng)頁中的指定位置，也可以跳轉(zhuǎn)到當(dāng)前網(wǎng)頁中的指定位置。5.添加空超級鏈接空鏈接是指未指向目標(biāo)端點(diǎn)的鏈接。如果要為頁面上的文本或圖像上附加行為，以便通過調(diào)用JavaScript等腳本代碼實(shí)現(xiàn)一些特殊功能，則需要添加空鏈接。添加空鏈接的方法如下：選擇要添加空鏈接的文本或圖像，在屬性面板的“鏈接”文本框中輸入“#”符號即可。9.3.5添加動(dòng)畫及音樂添加Flash動(dòng)畫添加背景音樂1.添加Flash動(dòng)畫添加Flash動(dòng)畫的操作步驟如下：在“常用”插入欄中單擊“媒體”按鈕后的按鈕，在彈出的下拉菜單中選擇“Flash”命令。在打開的“選擇文件”對話框的“查找范圍”下拉列表框中選擇Flash動(dòng)畫文件所在的位置，在文件列表中選擇所需的Flash動(dòng)畫文件。單擊“確定”按鈕，在“對象附加屬性設(shè)置”對話框中設(shè)置“標(biāo)題”、“快捷鍵”等信息。單擊“確定”按鈕，即可插入Flash動(dòng)畫文件。2.添加背景音樂使用行為或標(biāo)簽來添加背景音樂利用添加插件的方法來插入音樂文件2.添加背景音樂使用標(biāo)簽添加背景音樂的操作步驟如下：選擇“插入/標(biāo)簽”命令，打開“標(biāo)簽選擇器”對話框，依次打開左側(cè)的“HTML標(biāo)簽/頁元素”選項(xiàng)，在右側(cè)選擇bgsound選項(xiàng)。單擊“插入”按鈕，打開“標(biāo)簽編輯器-bgsound”對話框，在“源”文本框中輸入背景音樂的路徑及名稱，在“循環(huán)”下拉列表框中選擇“無限-1”選項(xiàng)使其循環(huán)播放。單擊“關(guān)閉”按鈕關(guān)閉“標(biāo)簽編輯器”對話框，再單擊“關(guān)閉”按鈕完成背景音樂添加。9.4布局網(wǎng)頁使用表格進(jìn)行網(wǎng)頁布局是目前最流行的網(wǎng)頁布局方式。Dreamweaver8提供了強(qiáng)大的表格工具，可以讓用戶隨心所欲地在網(wǎng)頁的合適位置上擺放文字、圖片、Flash和Dreamweaver8的各種控件。9.4.1創(chuàng)建表格表格在網(wǎng)頁制作過程中起到很重要的作用——網(wǎng)頁布局。表格布局使用原則1、應(yīng)遵循從大到小的布局原則先將整幅頁面需要分成幾個(gè)大的部分。接著在大的部分中嵌套小的表格9.4.1創(chuàng)建表格選擇以下方法之一即可創(chuàng)建新表格：使用Ctrl+Alt+T組合鍵。單擊“布局”插入欄的表格按鈕。選擇【插入】|【表格】命令。9.4.2編輯表格1．選擇表格或單元格在對表格或表格中的單元格進(jìn)行操作之前需先選擇要操作的對象。選擇整個(gè)表格：將插入點(diǎn)移動(dòng)到表格邊框上，當(dāng)鼠標(biāo)指針變?yōu)榛蛐螤顣r(shí)單擊鼠標(biāo)左鍵即可。選擇行：將鼠標(biāo)指針移動(dòng)到所需行的左側(cè)，當(dāng)鼠標(biāo)指針變?yōu)樾螤钋以撔械倪吙蚓€變?yōu)榧t色時(shí)單擊鼠標(biāo)左鍵即可。選擇列：將鼠標(biāo)指針移動(dòng)到所需列的上端，當(dāng)鼠標(biāo)指針變?yōu)樾螤钋以摿械倪吙蚓€變?yōu)榧t色時(shí)單擊鼠標(biāo)左鍵即可。選擇單元格：將鼠標(biāo)光標(biāo)定位到要選擇的單元格中單擊即可。選擇連續(xù)分布的多個(gè)單元格：將插入點(diǎn)定位到要選擇的單元格區(qū)域中左上角的單元格中，然后按住鼠標(biāo)左鍵不放向右下角拖動(dòng)鼠標(biāo)到該區(qū)域最后一個(gè)單元格中，釋放鼠標(biāo)即可。選擇不連續(xù)分布的多個(gè)單元格：按住Ctrl鍵不放，依次單擊要選擇的各個(gè)單元格即可。9.4.2編輯表格2．合并或拆分單元格選擇要合并的單元格區(qū)域后，單擊屬性面板左下角的按鈕，即可將選擇的單元格合并為一個(gè)單元格。將插入點(diǎn)定位到要進(jìn)行拆分操作的單元格中，單擊屬性面板左下角的按鈕，打開“拆分單元格”對話框。在“把單元格拆分”欄中選擇將其拆分行或列，在下面的數(shù)值框中輸入要拆分為的行或列的數(shù)目。設(shè)置完成后單擊【確定】按鈕關(guān)閉對話框。9.4.2編輯表格3．添加行或列將插入點(diǎn)定位到相應(yīng)的單元格中。單擊右鍵，在彈出的快捷菜單中選擇“表格”→“插入行”命令，在所選單元格的上方將會(huì)出現(xiàn)新的一行；若選擇“表格”→“插入列”命令，將在所選單元格左側(cè)出現(xiàn)新的一列。4．刪除行或列將插入點(diǎn)定位到要?jiǎng)h除的行或列的任意單元格中。單擊右鍵，在彈出的快捷菜單中選擇“表格”→“刪除行（或列）”命令，可刪除插入點(diǎn)所在的行或列。9.4.3設(shè)置表格和單元格屬性插入表格后，可在屬性面板中對表格或單元格的屬性進(jìn)行設(shè)置。行數(shù)：確定表格行的數(shù)目。列數(shù)：確定表格列的數(shù)目。表格寬度：確定表格的寬度值?？梢栽O(shè)置為百分比或固定值（像素）。邊框粗細(xì)：指的是表格外框的寬度，其單位為像素。當(dāng)它的值為0時(shí)，則不顯示邊框，它的邊框是以虛線顯示的。單元格邊距：指的是在單元格內(nèi)部的元素與該單元格邊框的距離，其單位為像素。單元格間距：指的就是兩個(gè)單元格之間或者單元格與表格邊框之間的距離，其單位為像素。9.5網(wǎng)頁圖像的簡單處理9.5.1初識(shí)Fireworks89.5.2文檔的基本操作9.5.3處理文本9.5.4選擇并編輯位圖9.5.5繪制矢量圖9.5.6創(chuàng)建切片與導(dǎo)出圖像9.5.1初識(shí)Fireworks8Fireworks8是由Adobe公司開發(fā)的一款專門用于處理網(wǎng)頁圖像的軟件，在網(wǎng)頁制作中主要用于創(chuàng)建以及編輯位圖和矢量圖、創(chuàng)建簡單動(dòng)畫效果、設(shè)計(jì)網(wǎng)頁效果（如變換圖像和彈出菜單）和優(yōu)化圖像以減小其文件大小等。在完成一個(gè)文檔編輯后，可以將其導(dǎo)出或另存為JPEG文件、GIF文件或其他格式的文件用于網(wǎng)頁制作。如果想對處理的對象繼續(xù)使用其他應(yīng)用程序（如PhotoShop、Dreamweaver或Flash）對其進(jìn)行編輯，還可以將其導(dǎo)出或保存為相應(yīng)應(yīng)用程序的文件類型。1.啟動(dòng)Fireworks8選擇“開始|所有程序|Macromedia|Fireworks8”命令雙擊Fireworks8快捷方式圖標(biāo)雙擊Fireworks8文檔2.認(rèn)識(shí)Fireworks的工作界面3.退出FIREWORKS8選擇【文件】|【退出】命令單擊標(biāo)題欄右上角的【關(guān)閉】按鈕按Ctrl+Q9.5.2文檔的基本操作1.新建文檔(1)選擇【文件】|【新建】命令，或單擊【主要】工具欄上的按鈕，打開【新建文檔】對話框。(2)在【畫布大小】選項(xiàng)組中可以設(shè)置畫布的寬度、高度和分辨率。在【畫布顏色】選項(xiàng)組中可以設(shè)置畫布的顏色。(4)完成上述設(shè)置后，單擊【確定】按鈕。9.5.2文檔的基本操作2．保存文檔在處理圖像時(shí)，為了預(yù)防突發(fā)事故而導(dǎo)致文件丟失，可以將文檔保存在計(jì)算機(jī)中。保存Fireworks圖像時(shí)，如果選擇“文件”→“保存”命令，可以將其保存為Fireworks默認(rèn)的PNG格式；選擇“文件”→“另存為”命令，還可以保存為其他圖形格式（如GIF、JPEG、BMP、WBMP、TIF、SWF、AI、PSD等）。9.5.2文檔的基本操作3．導(dǎo)入圖像使用“文件”→“導(dǎo)入”命令，F(xiàn)ireworks可以導(dǎo)入多種格式的圖形文件和文本文件，導(dǎo)入后的文件將在當(dāng)前的工作窗口生成一個(gè)新的圖層。當(dāng)用戶打開一個(gè)不是PNG格式的文檔時(shí)，F(xiàn)ireworks將會(huì)創(chuàng)建一個(gè)新的Fireworks的PNG文檔；而打開一個(gè)PNG文檔時(shí)，原始文檔將保持不變。9.5.2文檔的基本操作4．打開文檔要對某圖像文檔進(jìn)行查看或編輯操作，需先將其打開。選擇“文件”→“打開”命令或按Ctrl+O組合鍵打開“打開”對話框，從中選擇需要打開的文檔，單擊【打開】按鈕即可。9.5.2文檔的基本操作5.關(guān)閉文檔選擇【文件】|【關(guān)閉】命令單擊【關(guān)閉】按鈕按Ctrl+W9.5.3處理文本1.輸入文本在Fireworks中可以使用“文本”工具輸入文本，分為“標(biāo)簽輸入”和“文本塊輸入”兩種方式。9.5.3處理文本2.設(shè)置文本屬性9.5.3處理文本3.設(shè)置文本的特殊效果應(yīng)用了樣式后的效果

選取文字對象

9.5.4選擇并編輯位圖位圖圖像由排列成網(wǎng)格的稱為像素（Pixel）的點(diǎn)組成，每個(gè)點(diǎn)被指定一種顏色。位圖圖像的主要優(yōu)點(diǎn)在于表現(xiàn)力強(qiáng)、細(xì)膩、層次多和細(xì)節(jié)豐富，可以模擬出像照片一樣的真實(shí)效果。放大后的位圖9.5.4選擇并編輯位圖編輯位圖時(shí)，修改的是像素，而不是線條和曲線。放大位圖將使這些像素在網(wǎng)格中重新進(jìn)行分布，這通常會(huì)使圖像的邊緣呈鋸齒狀。9.5.4選擇并編輯位圖1．選擇位圖在對位圖圖像進(jìn)行編輯之前，需要先選擇對象。在Fireworks8中選擇位圖的工具包括“指針”工具、“選取框”工具、“橢圓選取框”工具、“套索”工具、“多邊形套索”工具和“魔術(shù)棒”工具等。2．編輯位圖選取選區(qū)后，可以用鉛筆工具、刷子工具或油漆桶工具對其進(jìn)行編輯，還可以對位圖上的部分區(qū)域進(jìn)行復(fù)制、羽化邊緣、刪除像素、裁剪圖像等操作。9.5.5繪制矢量圖矢量圖使用稱為“矢量”的線條和曲線（包括顏色和位置信息）描述圖像。它與分辨率無關(guān)，這意味著用戶除了可以在分辨率不同的輸出設(shè)備上顯示以外，還可以對其執(zhí)行移動(dòng)、調(diào)整大小、更改形狀或更改顏色等操作，而不會(huì)改變其外觀品質(zhì)。Fireworks8提供了多種繪制和編輯矢量圖的工具，通過這些工具，可以快速繪制出直線、圓角矩形、橢圓形和星形等矢量圖。9.5.5繪制矢量圖放大后的矢量圖不會(huì)改變外觀品質(zhì)放大后的矢量圖和位圖效果比較

矢量圖

位圖

1.繪制直線、矩形或橢圓形單擊工具箱中的直線工具、矩形工具或橢圓工具按鈕。在畫布上選擇路徑的起點(diǎn)位置，按下鼠標(biāo)左鍵不放。拖動(dòng)鼠標(biāo)創(chuàng)建所需的路徑對象。松開鼠標(biāo)左鍵，完成創(chuàng)建。對于“直線”工具，按住Shift鍵并拖動(dòng)可限制只能按45°的傾角增量來繪制直線。對于“矩形”或“橢圓”工具，按住Shift鍵并拖動(dòng)可將形狀限制為正方形或圓形。2.使用鋼筆工具繪制路徑利用直線工具、鋼筆工具、矢量路徑工具和重繪路徑工具，可以繪制出自由形狀的路徑。路徑是一條與很多點(diǎn)有關(guān)聯(lián)的線條，表現(xiàn)在圖形上就是線條和輪廓。路徑實(shí)質(zhì)上就是對象的骨架，對象上的其他屬性(如筆觸屬性、填充屬性和濾鏡效果等)相當(dāng)于對象的血和肉。在Fireworks中創(chuàng)建的路徑，既可以是開放的路徑，也可以是閉合的路徑。9.5.6創(chuàng)建切片與導(dǎo)出圖像創(chuàng)建切片優(yōu)化圖像導(dǎo)出圖像1.創(chuàng)建切片創(chuàng)建交互性區(qū)域是一個(gè)網(wǎng)頁對象在網(wǎng)頁中以HTML代碼的形式出現(xiàn)2.優(yōu)化圖像設(shè)計(jì)網(wǎng)頁圖像的最終目標(biāo)：創(chuàng)建能夠高速下載的精美圖像保持圖像品質(zhì)選擇壓縮質(zhì)量最高的文件格式動(dòng)畫GIF接近網(wǎng)頁128色JPEG較小文件JPEG較高品質(zhì)GIF最合適256色GIF接近網(wǎng)頁128色GIF接近網(wǎng)頁256色GIF網(wǎng)頁216內(nèi)置的優(yōu)化類型2.優(yōu)化圖像3．導(dǎo)出圖像在Fireworks8中，可以將圖像導(dǎo)出為.gif、.swf、.psd、.jpeg、.html或動(dòng)畫文件等多種格式，并可根據(jù)需要對其進(jìn)行設(shè)置，控制圖像質(zhì)量?？梢允褂谩拔募薄皩?dǎo)出”命令，或單擊繪圖區(qū)上方的“快速導(dǎo)出”按鈕，打開“導(dǎo)出”對話框，從中設(shè)置文件的保存位置、保存名稱和導(dǎo)出文件的類型等。9.6網(wǎng)頁動(dòng)畫的簡單制作Flash8是目前功能最強(qiáng)大的矢量動(dòng)畫軟件之一，利用Flash制作的動(dòng)畫作品被廣泛應(yīng)用于網(wǎng)頁廣告、網(wǎng)站片頭、交互游戲、互動(dòng)教學(xué)以及動(dòng)畫MTV等諸多領(lǐng)域。9.6.1初識(shí)Flash8時(shí)間軸圖層區(qū)幀控制區(qū)播放指針時(shí)間軸標(biāo)題時(shí)間軸狀態(tài)欄場景場景是進(jìn)行動(dòng)畫編輯的主要工作區(qū)，在Flash8中無論是繪制圖形還是創(chuàng)建動(dòng)畫都在該區(qū)域中進(jìn)行。場景主要由白色舞臺(tái)和灰色場景工作區(qū)兩部分組成。面板組面板是將Flash當(dāng)中的各項(xiàng)編輯工具的設(shè)置統(tǒng)一集中在一起，以方便設(shè)置Flash操作中的各項(xiàng)設(shè)置和數(shù)值，F(xiàn)lash8提供了多種面板。選擇[窗口]菜單中的命令，可以查看全部面板。Flash8的“屬性”面板位于工作界面的底部，包括“屬性”、“濾鏡”和“參數(shù)”3個(gè)選項(xiàng)卡。 9.6.2文檔的基本操作新建文檔設(shè)置文檔屬性保存、關(guān)閉文檔打開文檔9.6.3認(rèn)識(shí)并操作幀幀是Flash動(dòng)畫中最基本的組成元素。可以把每一個(gè)幀看作是一個(gè)靜止的畫面，通過將每一個(gè)幀的內(nèi)容連續(xù)播放，從而將要表達(dá)的內(nèi)容展示出來。1.認(rèn)識(shí)幀關(guān)鍵幀普通幀空白關(guān)鍵幀（1）普通幀普通幀就是不起關(guān)鍵作用的幀，它在時(shí)間軸中以灰色方塊表示，主要用作關(guān)鍵幀與關(guān)鍵幀之間的過渡。（2）關(guān)鍵幀關(guān)鍵幀主要用于定義動(dòng)畫中對象的主要變化，它在時(shí)間軸中以實(shí)心的小圓表示，動(dòng)畫中所有需要顯示的對象都必須添加到關(guān)鍵幀中。關(guān)鍵幀顯示狀態(tài)展示灰色背景:表示內(nèi)容與第一幀相同淡紫色背景的黑色箭頭:表示創(chuàng)建了動(dòng)畫補(bǔ)間動(dòng)畫虛線:表示動(dòng)畫創(chuàng)建不成功,例如，最后的關(guān)鍵幀丟失了。淡綠色背景的黑色箭頭:表示創(chuàng)建了形狀補(bǔ)間動(dòng)畫關(guān)鍵幀顯示狀態(tài)展示“α”符號:表示該幀添加了特定的語句“小紅旗”圖標(biāo):表示該幀添加了標(biāo)簽或注釋（2）空白關(guān)鍵幀空白關(guān)鍵幀中沒有任何對象,它在時(shí)間軸中以空心的小圓表示?？瞻钻P(guān)鍵幀主要用于結(jié)束或間隔動(dòng)畫中的畫面。2．操作幀對幀進(jìn)行操作，可以確定每一幀中包含的內(nèi)容、動(dòng)畫的播放狀態(tài)和播放時(shí)間等，為制作動(dòng)畫節(jié)省很多時(shí)間。（1）選擇幀在以幀進(jìn)行編輯前，應(yīng)選擇需要編輯的幀。在Flash8中選擇幀主要有以下4種方法：選擇單個(gè)幀：將鼠標(biāo)光標(biāo)移動(dòng)到時(shí)間軸中需要選擇幀的上方，單擊鼠標(biāo)左鍵即可。選擇不連續(xù)的多個(gè)幀：選擇一幀后，按住Ctrl鍵的同時(shí)依次單擊要選擇的其他幀即可。選擇連續(xù)的多個(gè)幀：選擇一幀后，按住Shift鍵的同時(shí)單擊要選擇連續(xù)幀的最后幀即可。選擇圖層中的所有幀：單擊圖層中的圖層名稱即可。（2）插入幀添加新動(dòng)畫內(nèi)容延長關(guān)鍵幀播放時(shí)間分隔兩個(gè)補(bǔ)間動(dòng)畫（2）插入幀用菜單命令插入幀用快捷菜單插入幀用快捷按鍵插入幀按F5鍵插入一個(gè)普通幀按F6鍵插入一個(gè)關(guān)鍵幀按F7鍵插入一個(gè)空白關(guān)鍵幀（3）移動(dòng)/復(fù)制幀在制作Flash動(dòng)畫時(shí)，有時(shí)需要適當(dāng)移動(dòng)幀的位置；而當(dāng)需要?jiǎng)?chuàng)建相同內(nèi)容的幀時(shí)，可對已有幀進(jìn)行復(fù)制。移動(dòng)/復(fù)制幀的操作步驟如下：移動(dòng)幀：選擇需要移動(dòng)的幀，按住鼠標(biāo)左鍵不放將其拖動(dòng)到新的位置即可。復(fù)制幀：選擇需要移動(dòng)的幀，單擊右鍵，在彈出的快捷菜單中選擇“復(fù)制幀”命令；鼠標(biāo)指針定位到新的位置，單擊右鍵，在彈出的快捷菜單中選擇“粘貼幀”命令。（4）刪除/清除幀刪除幀用于將選擇的幀從時(shí)間軸中完全清除，執(zhí)行刪除幀操作后，被刪除幀后方的幀會(huì)自動(dòng)前移并填補(bǔ)被刪除幀所占的位置。清除幀用于將選擇幀中的所有內(nèi)容清除，但繼續(xù)保留該幀在時(shí)間軸中所占用的位置。刪除/清除幀的操作步驟如下：刪除幀：選擇需要?jiǎng)h除的幀，單擊右鍵，在彈出的快捷菜單中選擇“刪除幀”命令。清除幀：選擇需要清除的幀，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“清除幀”命令，將關(guān)鍵幀轉(zhuǎn)換為空白關(guān)鍵幀，舞臺(tái)中的內(nèi)容即被清除。（5）設(shè)置幀的顯示狀態(tài)在時(shí)間軸中可以根據(jù)需要對幀設(shè)置不同的顯示狀態(tài)?！昂苄　?、“小”、“標(biāo)準(zhǔn)”、“大”和“中”：用于設(shè)置幀的顯示狀態(tài)“預(yù)覽”：以縮略圖形式顯示場景對象“關(guān)聯(lián)預(yù)覽”：用于顯示場景對象的位置（6）設(shè)置幀頻幀頻表示播放動(dòng)畫時(shí)每秒鐘播放的幀數(shù)，單位是fps。9.6.4圖層的基本操作在Flash動(dòng)畫中，圖層主要是用于將不同的對象和動(dòng)作區(qū)分開，以便制作者修改和編輯動(dòng)作時(shí)不影響其他動(dòng)作。1.認(rèn)識(shí)圖層普通圖層被引導(dǎo)圖層遮罩圖層被遮罩圖層引導(dǎo)圖層2.操作圖層（1）選擇圖層選擇單個(gè)圖層選擇不連續(xù)分布的多個(gè)圖層（Ctrl）選擇連續(xù)分布的多個(gè)圖層（Shift）2.操作圖層（2）創(chuàng)建圖層2.操作圖層（3）隱藏/顯示圖層2.操作圖層（3）隱藏/顯示圖層隱藏圖層隱藏所有圖層隱藏單個(gè)圖層2.操作圖層（4）刪除圖層通過“刪除圖層”按鈕刪除利用快捷菜單刪除9.6.5元件和庫元件是Flash動(dòng)畫制作過程中為解決重復(fù)使用而創(chuàng)建的動(dòng)畫對象，元件的使用不但大大提高了工作效率，而且可以很大程度地減少動(dòng)畫文件的大小。庫則是用存放從外部導(dǎo)入的素材和管理存儲(chǔ)元件的地方，當(dāng)需要使用某個(gè)素材或元件時(shí)，可以直接從庫中調(diào)用。9.6.5元件和庫圖形元件：用于創(chuàng)建可反復(fù)使用的圖形。圖形元件可以是靜止的圖片，可以是用于創(chuàng)建連接到主時(shí)間軸的可重用動(dòng)畫片段，也可以是多個(gè)幀組成的動(dòng)畫。按鈕元件：用于激發(fā)某種交互性的動(dòng)作，如響應(yīng)鼠標(biāo)事件、跳轉(zhuǎn)到某幀、打開某網(wǎng)頁、執(zhí)行某段代碼實(shí)現(xiàn)某種功能等，在Flash動(dòng)畫到動(dòng)畫或動(dòng)畫到其他事物之間起到橋梁的作用。影片剪輯元件：是一段Flash動(dòng)畫，可以擁有獨(dú)立于主時(shí)間軸的多幀時(shí)間軸，即可在播放主動(dòng)畫時(shí)循環(huán)播放，也可獨(dú)立于主動(dòng)畫播放。影片剪輯元件可以包含交互式組件、圖形、聲音或其他影片剪輯，還可以將影片剪輯實(shí)例放在按鈕元件的時(shí)間軸內(nèi)，以創(chuàng)建動(dòng)畫按鈕。9.6.5元件和庫編輯工具

預(yù)覽窗口

該列表中列出了庫中包含的所有的各種屬性,包括名稱、類型、使用次數(shù)統(tǒng)計(jì)等。下拉菜單按鈕在該下拉列表框中可以選擇需要使用的文件的庫寬庫視圖窄庫視圖切換排序順序9.6.6創(chuàng)建基本動(dòng)畫一個(gè)動(dòng)畫往往是動(dòng)畫對象基本動(dòng)作變化之間的組合,如對象大小的變化、對象移動(dòng)