網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程

網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程任務(wù)一：班級(jí)主頁(yè)的界面設(shè)計(jì)任務(wù)二：班級(jí)主頁(yè)的配色方案設(shè)計(jì)任務(wù)三：班級(jí)主頁(yè)的界面導(dǎo)出任務(wù)四：班級(jí)主頁(yè)首頁(yè)制作任務(wù)五：班級(jí)主頁(yè)二級(jí)頁(yè)面制作任務(wù)六：班級(jí)主頁(yè)頁(yè)面的美化實(shí)現(xiàn)技術(shù)：Fireworks+Dreamweaver項(xiàng)目一《我們的青春年代》班級(jí)主頁(yè)的設(shè)計(jì)與制作項(xiàng)目劃分

項(xiàng)目劃分

任務(wù)一：企業(yè)網(wǎng)站主頁(yè)的設(shè)計(jì)

企業(yè)網(wǎng)站服務(wù)器的配置企業(yè)網(wǎng)站主頁(yè)的設(shè)計(jì)任務(wù)二：企業(yè)網(wǎng)站新聞的創(chuàng)建企業(yè)網(wǎng)站數(shù)據(jù)庫(kù)的創(chuàng)建與連接企業(yè)網(wǎng)站新聞的基本操作企業(yè)網(wǎng)站新聞的顯示企業(yè)網(wǎng)站管理員登錄頁(yè)的設(shè)計(jì)實(shí)現(xiàn)技術(shù)：ASP+Dreamweaver項(xiàng)目二

《森興木材》企業(yè)網(wǎng)站的創(chuàng)建項(xiàng)目劃分

任務(wù)一：個(gè)人主頁(yè)的界面設(shè)計(jì)

個(gè)人主頁(yè)結(jié)構(gòu)的分析與素材的準(zhǔn)備片頭歡迎動(dòng)畫(huà)的設(shè)計(jì)制作任務(wù)二：頁(yè)面的制作和ActionScript的添加

按鈕和頁(yè)面跳轉(zhuǎn)的實(shí)現(xiàn)首頁(yè)的制作相冊(cè)頁(yè)面的制作日志頁(yè)面的制作好友頁(yè)面的制作音樂(lè)的添加實(shí)現(xiàn)技術(shù)：Flash項(xiàng)目三

《MyZone》Flash網(wǎng)站的制作項(xiàng)目一《我們的青春年代》班級(jí)主頁(yè)制作分析環(huán)節(jié)設(shè)計(jì)環(huán)節(jié)制作環(huán)節(jié)測(cè)試環(huán)節(jié)維護(hù)環(huán)節(jié)客戶需求分析網(wǎng)站信息內(nèi)容及功能分析計(jì)劃的制定設(shè)計(jì)軟件的選擇網(wǎng)站界面布局設(shè)計(jì)網(wǎng)站色彩搭配方案設(shè)計(jì)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)選擇靜態(tài)網(wǎng)站的具體制作動(dòng)態(tài)網(wǎng)站的具體制作典型用戶的測(cè)試開(kāi)發(fā)人員的測(cè)試網(wǎng)頁(yè)內(nèi)容的調(diào)整、更新網(wǎng)頁(yè)的推廣網(wǎng)頁(yè)的制作流程項(xiàng)目一《我們的青春年代》班級(jí)主頁(yè)制作班級(jí)主頁(yè)網(wǎng)站信息結(jié)構(gòu)我們的青春年代班級(jí)首頁(yè)班級(jí)新聞班級(jí)相冊(cè)班級(jí)文學(xué)班級(jí)作品班級(jí)留言新聞1新聞2新聞3班級(jí)成員活動(dòng)圖片圖圖貼貼詩(shī)歌散文笑話集錦小說(shuō)專區(qū)作品展示學(xué)習(xí)資料下載專區(qū)項(xiàng)目一《我們的青春年代》班級(jí)主頁(yè)制作班級(jí)主頁(yè)項(xiàng)目具體劃分內(nèi)容序號(hào)任務(wù)模塊1班級(jí)主頁(yè)的界面設(shè)計(jì)班級(jí)主頁(yè)的界面框架設(shè)計(jì)班級(jí)主頁(yè)Logo與導(dǎo)航條設(shè)計(jì)2班級(jí)主頁(yè)的配色方案設(shè)計(jì)班級(jí)主頁(yè)的配色方案設(shè)計(jì)3班級(jí)主頁(yè)的界面導(dǎo)出班級(jí)主頁(yè)的界面導(dǎo)出4班級(jí)主頁(yè)首頁(yè)制作班級(jí)主頁(yè)站點(diǎn)的創(chuàng)建與管理班級(jí)主頁(yè)首頁(yè)基本元素的插入5班級(jí)主頁(yè)二級(jí)頁(yè)面制作【班級(jí)新聞】模塊頁(yè)面設(shè)計(jì)與制作其他頁(yè)面的制作留言簿的制作6班級(jí)主頁(yè)頁(yè)面的美化班級(jí)主頁(yè)頁(yè)面的美化班級(jí)主頁(yè)頁(yè)面特效制作任務(wù)預(yù)備知識(shí)（一）Fireworks8基礎(chǔ)

矢量與位圖對(duì)象交互式圖形圖像的優(yōu)化與導(dǎo)出Fireworks8文檔的基本操作Fireworks8文檔的新建、打開(kāi)、導(dǎo)入、保存與導(dǎo)出Fireworks8的工作環(huán)境

工具箱面板、屬性檢查器面板文本的輸入與編輯矢量對(duì)象的基本操作位圖的基本操作

層、蒙版和混合模式濾鏡的應(yīng)用任務(wù)預(yù)備知識(shí)（一）矢量與位圖對(duì)象矢量圖形使用稱為“矢量”的線條和曲線（包含顏色和位置信息）呈現(xiàn)圖像。編輯矢量圖時(shí)修改的是描述其形狀的線條和曲線的屬性。矢量圖形與分辨率無(wú)關(guān)。位圖圖形由排列成網(wǎng)格的稱為“像素”的點(diǎn)組成。圖像是由網(wǎng)格中每個(gè)像素的位置和顏色值決定。編輯位圖圖形時(shí)修改的不是線條和曲線而是像素。位圖圖形與分辨率有關(guān)。交互式圖形

切片和熱點(diǎn)是指定網(wǎng)頁(yè)圖形中交互區(qū)域的網(wǎng)頁(yè)對(duì)象。切片將圖像切成不同的部分，可以將變換圖像行為、動(dòng)畫(huà)和統(tǒng)一資源定位器(URL)鏈接應(yīng)用到這些部分上。

任務(wù)預(yù)備知識(shí)（一）Fireworks8文檔的基本操作新建：

選擇【文件】|【新建】，設(shè)置畫(huà)布大小、分辨率和顏色的屬性值。

要?jiǎng)?chuàng)建與剪貼板上的對(duì)象大小相同的新文檔，則將需要參照大小的對(duì)象復(fù)制到剪貼板，然后選擇【文件】|【新建】操作。打開(kāi)：

選擇【文件】|【打開(kāi)】操作。導(dǎo)入：

選擇【文件】|【導(dǎo)入】打開(kāi)導(dǎo)入對(duì)話框，選擇需要導(dǎo)入的對(duì)象，在文檔中通過(guò)單擊操作可以按照?qǐng)D像的實(shí)際尺寸導(dǎo)入圖像對(duì)象，通過(guò)單擊鼠標(biāo)左鍵拖動(dòng)的方式可以按照虛線尺寸導(dǎo)入圖像對(duì)象。保存：

選擇【文件】|【保存】或選擇【文件】|【另存為】。導(dǎo)出：

選擇【文件】|【導(dǎo)出】操作或者直接選擇【文件】|【圖像預(yù)覽】操作。任務(wù)預(yù)備知識(shí)（一）Fireworks8工作環(huán)境任務(wù)預(yù)備知識(shí)（一）Fireworks8文本編輯

文本的編輯包括文本的字體、字號(hào)、字體樣式設(shè)置、字距（可調(diào)范圍為-99～100）、行距、文本方向、文本對(duì)齊方式、文本縮進(jìn)、段落間距、基線調(diào)整（范圍為-99～100，調(diào)整文字垂直方向的位置，負(fù)值低于基線，正值高于基線）等任務(wù)預(yù)備知識(shí)（一）Fireworks8矢量對(duì)象的基本操作直線、矩形和橢圓的繪制與調(diào)整圓角矩形、多邊形和星形的繪制與調(diào)整自動(dòng)形狀的繪制直線和曲線路徑段的繪制與調(diào)整自由變形矢量路徑的繪制路徑的編輯

任務(wù)預(yù)備知識(shí)（一）Fireworks8位圖的基本操作

創(chuàng)建位圖對(duì)象位圖的選擇位圖的修飾：

擦除和克隆、模糊、銳化和涂抹像素、減淡和加深像素、紅眼消除、替換顏色、調(diào)整位圖顏色和色調(diào)層

激活層、添加和刪除層、保護(hù)層和對(duì)象、在【層】面板中合并對(duì)象、共享層蒙版

矢量蒙版、位圖蒙版、組合對(duì)象以構(gòu)成蒙版、蒙版的應(yīng)用方式、蒙版的替換、禁用和刪除混合模式

不透明模式、暗化模式、亮化模式、光照效果模式、反轉(zhuǎn)模式、添色模式、熱模式、數(shù)字模式和色調(diào)模式濾鏡的應(yīng)用混合模式不透明模式效果

混合模式暗化模式效果

混合模式亮化模式效果

混合模式光照效果混合模式反轉(zhuǎn)模式效果混合模式添色模式效果混合模式熱模式效果混合模式數(shù)學(xué)模式效果混合模式色調(diào)模式效果濾鏡的應(yīng)用亮度/對(duì)比度濾鏡修改圖像中所有像素的明亮度和對(duì)比度，生成高亮、陰影或中間色調(diào)的圖像。濾鏡的應(yīng)用色相/飽和度濾鏡改變圖像的色調(diào)（顏色）、顏色的純度、和亮度。濾鏡的應(yīng)用色階濾鏡通過(guò)調(diào)整圖像中亮區(qū)與暗區(qū)的分布情況，從而合理應(yīng)用圖像中的像素來(lái)表達(dá)圖像各方面的細(xì)節(jié)。濾鏡的應(yīng)用曲線濾鏡【曲線】濾鏡與色階基本相似，曲線與色階的區(qū)別在于曲線可以在不影響其他顏色的基礎(chǔ)上來(lái)改變圖像的色調(diào)。

濾鏡的應(yīng)用模糊濾鏡【模糊】濾鏡使圖像產(chǎn)生柔化、模糊朦朧的效果。

濾鏡的應(yīng)用銳化濾鏡通過(guò)【銳化】濾鏡可以細(xì)化圖像來(lái)吸引注意力，是增大圖像邊緣兩側(cè)的像素對(duì)比度。

模塊二班級(jí)主頁(yè)的界面框架設(shè)計(jì)任務(wù)描述利用素材完成如右圖所示的首頁(yè)界面框架設(shè)計(jì)。頁(yè)面尺寸要求在1024*768分辨率下滿屏顯示。主色調(diào)采用高遠(yuǎn)博大的藍(lán)色。任務(wù)解析操作方法界面設(shè)計(jì)效果圖任務(wù)解析框架設(shè)計(jì)解析

在IE6.0下，滿屏顯示的頁(yè)面寬度為顯示器分辨率減21，1024分辨率下的寬度為1003px（像素）。在Firefox下，寬度用分率辨1024減19，為1005px。在Opear下，寬度用分率辨1024減23，為1001px。所以如果在1024*768的分辨率下，網(wǎng)頁(yè)寬度的值小于或等于1000px比較安全。在800*600的分辨率下寬度小于或等于770px。任務(wù)解析界面配色設(shè)計(jì)解析

——配色表

操作方法文本的輸入：選擇【文本】工具；在文檔中單擊希望文本開(kāi)始的位置，輸入文本；或者拖動(dòng)鼠標(biāo)繪制文本塊，然后再輸入文本。文本的編輯：使用【指針】工具選擇需要修改的文本；在【屬性】檢查器面板中編輯文本的字體、字號(hào)、字體樣式等屬性；或者選擇【文本】|【編輯器】，打開(kāi)文本編輯器進(jìn)行編輯。矩形/圓角矩形的繪制：在工具箱的【矩形】工具彈出菜單中選擇【矩形】工具/【圓角矩形】；在【屬性】檢查器面板中設(shè)置筆觸與填充屬性；在畫(huà)布上拖動(dòng)鼠標(biāo)繪制以形狀。操作方法【鋼筆】工具繪制直線路徑：在工具箱中選擇【鋼筆】工具；在【屬性】檢查器面板中設(shè)置筆觸屬性；在畫(huà)布上單擊以放置第一個(gè)角點(diǎn)；移動(dòng)到下一個(gè)位置，單擊放置第二個(gè)角點(diǎn)；雙擊最后一個(gè)點(diǎn)結(jié)束路徑并使其成為開(kāi)口路徑?！镜蹲印抗ぞ呒羟新窂剑菏褂谩静糠诌x定】工具選定需要剪切的路徑；在工具箱中選擇【刀子】工具，跨越路徑拖動(dòng)指針進(jìn)行剪切；若需要選擇剪切后的路徑對(duì)象，則選擇【部分選定】工具進(jìn)行選擇。操作方法漸變填充設(shè)置：使用【指針】工具選中需要設(shè)置漸變填充的對(duì)象；在【屬性】檢查器面板的【填充選項(xiàng)】中選擇漸變填充，在彈出菜單中選擇一種漸變形式；單擊【填充顏色】框以打開(kāi)【編輯漸變】彈出窗口；單擊或拖動(dòng)顏色滑塊調(diào)整漸變顏色，單擊或拖動(dòng)不透明度滑塊調(diào)整不透明度。選中應(yīng)用漸變填充的對(duì)象，調(diào)整漸變填充動(dòng)態(tài)濾鏡設(shè)置：使用【指針】工具選中需要應(yīng)用動(dòng)態(tài)濾鏡的對(duì)象；在【屬性】檢查器中，單擊【添加動(dòng)態(tài)濾鏡】按鈕，從彈出菜單中選擇一種濾鏡；在打開(kāi)的效果設(shè)置對(duì)話框中編輯相應(yīng)效果；同一個(gè)對(duì)象可以添加多個(gè)【動(dòng)態(tài)濾鏡】，若需要?jiǎng)h除所應(yīng)用的濾鏡，可以單擊【添加動(dòng)態(tài)濾鏡】按鈕旁的減號(hào)進(jìn)行刪除。舉一反三矢量圖形的特殊繪制：1．直線、矩形和橢圓的特殊繪制（1）若要繪制只能按45°的傾角增量的直線，按住Shift鍵并拖動(dòng)【直線】工具。若要繪制正方形或正圓，按住Shift鍵并拖動(dòng)【矩形】或【橢圓】工具。（2）若要從特定中心點(diǎn)繪制直線、矩形或橢圓，將指針?lè)旁陬A(yù)期的中心點(diǎn)，然后按Alt鍵并拖動(dòng)【直線】、【矩形】或者【橢圓】工具。（3）若要既限制形狀又要從中心點(diǎn)繪制，將指針?lè)旁陬A(yù)期的中心點(diǎn)，按Shift+Alt

鍵并拖動(dòng)繪制工具。（4）若要在繪制時(shí)調(diào)整基本形狀的位置，在按住鼠標(biāo)按鈕的同時(shí)，按住空格鍵，然后將對(duì)象拖動(dòng)到畫(huà)布上的另一個(gè)位置（【直線】工具例外），釋放空格鍵可繼續(xù)繪制對(duì)象。舉一反三矢量圖形的特殊繪制：2．圓角矩形、多邊形和星形的特殊繪制（1）若要使所選矩形轉(zhuǎn)為圓角矩形，則在【屬性】檢查器面板的【矩形圓度】框內(nèi)輸入一個(gè)從0到100的值并按Enter鍵，或者拖動(dòng)彈出滑塊來(lái)調(diào)整角度。（2）若要將多邊形的方向限制為按45°的增量變化，請(qǐng)?jiān)诶L制時(shí)按住Shift鍵?！径噙呅巍抗ぞ呖偸菑闹行狞c(diǎn)開(kāi)始繪制。（3）若要將星形方向限制為按45°的傾角增量變化，請(qǐng)?jiān)谕蟿?dòng)時(shí)按住Shift鍵。【多邊形】工具總是從中心點(diǎn)開(kāi)始繪制。模塊三班級(jí)主頁(yè)網(wǎng)站Logo與banner設(shè)計(jì)任務(wù)描述打開(kāi)各章節(jié)完成文檔\ch1-1-2\界面框架設(shè)計(jì).png，在此基礎(chǔ)上完成網(wǎng)站網(wǎng)站Logo與banner的設(shè)計(jì)。完成后效果如右圖所示。任務(wù)解析操作方法添加Logo與banner后效果圖任務(wù)解析網(wǎng)站Logo設(shè)計(jì)網(wǎng)站標(biāo)志的設(shè)計(jì)創(chuàng)意來(lái)自網(wǎng)站的名稱和內(nèi)容。設(shè)計(jì)時(shí)一般放置在網(wǎng)站所有頁(yè)面的上方，是網(wǎng)站給人的第一印象。Logo設(shè)計(jì)時(shí)一般與圖案、文字組合，展示網(wǎng)站的主題與名稱。Logo常見(jiàn)的表現(xiàn)形式有簡(jiǎn)潔的文字符號(hào)，繁復(fù)的圖案紋飾，卡通動(dòng)畫(huà)或人物等。班級(jí)主頁(yè)網(wǎng)站主題是展現(xiàn)學(xué)生的青青校園生活，是放飛夢(mèng)想的年代，網(wǎng)站Logo設(shè)計(jì)為一只飛舞

的蝴蝶圖案和中文字“我們的青

春年代”的組合，與藍(lán)色漸變和

白云圖案的背景相結(jié)合，表達(dá)主

題寓意。任務(wù)解析網(wǎng)站banner設(shè)計(jì)網(wǎng)站廣告條（banner）主要存放網(wǎng)站主題內(nèi)容、網(wǎng)頁(yè)中需要推廣的內(nèi)容或者強(qiáng)調(diào)性內(nèi)容。Banner也可用以頁(yè)面布局。網(wǎng)頁(yè)布局設(shè)計(jì)時(shí)，banner可以放置在網(wǎng)頁(yè)的頂部、中部或者底部，尺寸設(shè)計(jì)為橫向貫穿整個(gè)或者大半個(gè)頁(yè)面。Banner中的文字設(shè)計(jì)要求簡(jiǎn)潔明了，一般用粗壯的字體形式來(lái)突出顯示；考慮與文字的搭配，背景圖像需要避免復(fù)雜。網(wǎng)站Banner背景圖像選取了絢爛綻放的黃色小花，與班級(jí)主頁(yè)的用戶群體特征相符，表達(dá)美好青春的寓意。Banner文字體現(xiàn)主題內(nèi)容。操作方法位圖的導(dǎo)入：選擇【文件】|【導(dǎo)入】，打開(kāi)【導(dǎo)入】對(duì)話框；選擇需要導(dǎo)入的位圖對(duì)象，點(diǎn)擊【打開(kāi)】按鈕；此時(shí)鼠標(biāo)指針變成導(dǎo)入箭頭，在畫(huà)布上單擊鼠標(biāo)，以位圖對(duì)象的實(shí)際尺寸導(dǎo)入位圖到畫(huà)布；或者按住鼠標(biāo)左鍵拖動(dòng)鼠標(biāo)，則以拖出的虛線框大小導(dǎo)入位圖對(duì)象。文本附加到路徑：輸入并編輯文本；使用【鋼筆】工具繪制并調(diào)整好路徑；選中文本塊和路徑；選擇【文本】|【附加到路徑】。操作方法曲線路徑的繪制與調(diào)整：選擇【工具】面板中的【鋼筆】工具，在畫(huà)布上單擊鼠標(biāo)左鍵放置第一個(gè)角點(diǎn)；移動(dòng)鼠標(biāo)到下一個(gè)點(diǎn)的位置，單擊并拖動(dòng)以產(chǎn)生一個(gè)曲線點(diǎn)；重復(fù)上一步操作繪制其他曲線點(diǎn)；雙擊最后一個(gè)點(diǎn)或選擇其他工具，結(jié)束路徑并使其成為開(kāi)口路徑。若要調(diào)整曲線路徑，選擇【部分選定】工具單擊某個(gè)點(diǎn)以選中，選定的角點(diǎn)顯示為實(shí)心的藍(lán)色方形；選中角度將該點(diǎn)拖動(dòng)到一個(gè)新位置；選中點(diǎn)手柄拖動(dòng)調(diào)整曲線形狀，【鋼筆】工具也能完成曲線路徑的調(diào)整。舉一反三文本效果設(shè)置：1．修改文本屬性對(duì)文本的編輯除了常見(jiàn)的字體、字號(hào)、字體樣式設(shè)置外，還可以調(diào)整字距、行距、文本方向、文本對(duì)齊方式、文本縮進(jìn)、段落間距、基線調(diào)整等。2．設(shè)置文字填充和動(dòng)態(tài)濾鏡效果可以將筆觸、填充和濾鏡應(yīng)用到所選文本塊中的文本，就像應(yīng)用到其它對(duì)象一樣。也可以將【樣式】面板中的任何樣式（即使它不是文本樣式）應(yīng)用于文本。舉一反三將文本附加到路徑：通過(guò)將文本附加到路徑的操作，使得輸入的文本不受矩形文本塊的限制。繪制路徑并將文本附加到該路徑后，文本將順著路徑的形狀排列并且保持可編輯性。將文本轉(zhuǎn)換為路徑：可以先將文本轉(zhuǎn)換為路徑，然后就像對(duì)待矢量對(duì)象那樣，編輯字母的形狀。將文本轉(zhuǎn)換為路徑后，原來(lái)的文本轉(zhuǎn)為路徑組，即可使用所有的矢量編輯工具。然而，無(wú)法再將它作為文本編輯。任務(wù)預(yù)備知識(shí)（二）對(duì)色彩的分析主題網(wǎng)站的色彩運(yùn)用不同年齡段用戶網(wǎng)站的色彩運(yùn)用不同性別網(wǎng)站的色彩運(yùn)用不同風(fēng)格網(wǎng)站的色彩運(yùn)用不同主題網(wǎng)站對(duì)色彩的要求網(wǎng)頁(yè)色彩搭配的原則與方法色彩搭配的原則色彩的搭配網(wǎng)頁(yè)色彩搭配的技巧對(duì)色彩的分析熱情張揚(yáng)的紅色對(duì)紅色的分析紅色用來(lái)傳達(dá)具有活力、積極、熱誠(chéng)、溫暖以及前進(jìn)等含義的企業(yè)形象與精神。另外，紅色也常被用作警告、危險(xiǎn)、禁止、防火等標(biāo)識(shí)色。與紅色的搭配紅色與少量黃色相搭配，會(huì)使其熱力強(qiáng)盛，趨于躁動(dòng)、不安，極富動(dòng)感和張揚(yáng)的個(gè)性。紅色與黑色的搭配在商業(yè)設(shè)計(jì)中被譽(yù)為商業(yè)成功色，常被用于較前衛(wèi)時(shí)尚、個(gè)性的娛樂(lè)休閑區(qū)網(wǎng)頁(yè)中。紅色與灰色、黑色等暗色調(diào)搭配使用，給人以現(xiàn)代、激進(jìn)的感覺(jué)。粉紅色是紅色系中的冷色系，這類顏色的組合多用于女性主題，容易營(yíng)造出柔情、嬌媚、溫柔、甜蜜、純真、誘惑和艷麗等氣氛。對(duì)色彩的分析陽(yáng)光健康的橙色對(duì)橙色的分析橙色具有健康、陽(yáng)光、歡欣、活力、勇敢和自由等象征意義，橙色既有紅色的熱情又有黃色的光明和活潑的特質(zhì)，可以營(yíng)造朝氣蓬勃和大自然的氣氛，給人以華貴而溫暖，興奮而熱烈的感覺(jué)，橙色還會(huì)使人聯(lián)想到金色的秋天以及豐碩的果實(shí)，因此是一種富足、快樂(lè)而幸福的色彩。與橙色的搭配將淺黃色、黃色、黃綠色等鄰近色與橙色搭配使用，通過(guò)不同明度和純度的變化可以得到更為豐富的色階通常都能得到非常好的視覺(jué)效果，使整個(gè)頁(yè)面看起來(lái)華麗、新鮮、充滿活力。將淺綠色、淺藍(lán)色、藍(lán)色等顏色與橙色搭配使用，可以構(gòu)成最明亮、最歡樂(lè)的色彩。橙色加入黑色調(diào)和后，象征著沉著、安定、茶香、古色古香，頁(yè)面華麗而古典；加灰后給人沙灘、故土、灰心的感覺(jué)對(duì)色彩的分析活潑明快的黃色對(duì)黃色的分析黃色是有彩色中最明亮的色彩，具有活潑與輕快的特點(diǎn)。黃色給人明亮、輝煌、燦爛、愉快、高貴、柔和與年輕的感覺(jué)，象征著光明、希望、富貴與朝氣，同時(shí)又容易引起味覺(jué)上的條件反射，給人以甜美和香酥感。與黃色的搭配黃色與白色搭配帶來(lái)嬌嫩、明朗、雅致、清爽的感覺(jué)高亮度的黃色與黑色相結(jié)合可以帶來(lái)高貴、內(nèi)斂、穩(wěn)重的心理感受黃色與綠色搭配會(huì)顯得很有朝氣和活力，在商品網(wǎng)站中使用黃色與紅色搭配來(lái)渲染熱鬧氣氛對(duì)色彩的分析青春活力的綠色對(duì)綠色的分析綠色綠色具有與自然、健康相關(guān)的特質(zhì)，是自然之色，代表了生命與希望，也充滿了青春與活力。綠色是新鮮、春天、純真、活力、新生、和平、舒適、成長(zhǎng)、健康、清新的色彩，與綠色的搭配綠色與白色調(diào)和后可以得到淺綠色，與白色搭配，具有清新、和平、柔和、青春、春天等的感覺(jué)。綠色與黑色調(diào)和后可以得到深綠色，與深色搭配，傳達(dá)茂盛、健康、生命、成熟、穩(wěn)重、開(kāi)闊等心理感覺(jué)。適當(dāng)運(yùn)用不同純度的深綠和淺綠色并不刺目，反而可使頁(yè)面看起來(lái)很有朝氣和活力。高明度的綠色也與紅色、藍(lán)色與黃色兩組對(duì)比色搭配在一起，顏色鮮亮，形成強(qiáng)烈的視覺(jué)節(jié)奏感。對(duì)色彩的分析高遠(yuǎn)博大的藍(lán)色對(duì)藍(lán)色的分析藍(lán)色使人聯(lián)想到大海、天空等，給人以沉穩(wěn)的感覺(jué)，具有深遠(yuǎn)、永恒、沉靜、博大、理智、誠(chéng)實(shí)和寒冷的象征意義，藍(lán)色還能夠營(yíng)造出和平淡雅潔凈及可靠等氛圍。與藍(lán)色的搭配

藍(lán)色加白給人清新、涼爽、聰明、高雅、輕柔、浪漫的感覺(jué)，淺藍(lán)色具有淡雅、清新、浪漫和高貴等特性，常被用于化妝品、女性、服裝網(wǎng)站的設(shè)計(jì)中，它也是最具涼爽、清新特征的色彩。高純度的藍(lán)色主色調(diào)配合的其他高純度冷暖色調(diào)對(duì)比，會(huì)營(yíng)造出一種整潔輕快的印象。藍(lán)色加黑可以營(yíng)造幽深、穩(wěn)重、冷漠、深沉、成熟、寒冷等感覺(jué)。深藍(lán)色是沉穩(wěn)的且較常用的色調(diào)，能給人以沉穩(wěn)、冷靜、嚴(yán)謹(jǐn)和成熟的心理感受。它主要用于營(yíng)造安穩(wěn)、可靠及略帶有神秘感的氛圍。對(duì)色彩的分析高貴神秘的紫色對(duì)紫色的分析紫色是比較女性化的顏色，代表著高貴和奢華、優(yōu)雅與魅力，也意味著神秘與莊重、神圣和浪漫。另一方面又有孤獨(dú)等意味。與紫色的搭配紫色加入少量的白色，就會(huì)成為一種十分優(yōu)美、柔和的色彩。隨著白色的不斷加入，也就不斷產(chǎn)生不同層次的淡紫色，可使紫色的沉悶性格消失，變得優(yōu)雅、嬌氣，并充滿女性魅力。淺紫色給人嫵媚、優(yōu)雅、嬌氣、清秀、夢(mèng)幻，布滿女性魅力。高彩度的紫紅色可以表現(xiàn)出超凡的華麗，而低彩度的粉紅色可以表現(xiàn)出高雅的氣質(zhì)。藍(lán)紫色可以用來(lái)創(chuàng)造出都市化的成熟美，且藍(lán)紫色可以使心情浮躁的人冷靜下來(lái)。明亮的色調(diào)直至灰亮的藍(lán)紫色有一種與眾不同的神秘美感。低亮度的藍(lán)紫色顯得沉穩(wěn)，高亮度的藍(lán)紫色顯得非常高雅。對(duì)色彩的分析莊嚴(yán)肅穆的黑色對(duì)黑色的分析黑色具有很強(qiáng)的感染力，能夠表現(xiàn)出莊嚴(yán)、肅穆、剛健、堅(jiān)實(shí)、堅(jiān)毅的感覺(jué)，黑色用在宗教網(wǎng)站中顯出嚴(yán)肅和莊嚴(yán)，象征著力量、莊嚴(yán)肅穆。另外，黑色還具有深沉、神秘、寂靜、消極、沉睡、壓抑、恐怖、悲痛甚至死亡等象征意義，又意味著不吉祥和罪惡。與黑色的搭配黑白兩種顏色的搭配使用通?？梢员憩F(xiàn)出都市化的感覺(jué)，常用于現(xiàn)代派頁(yè)面設(shè)計(jì)中。在黑白色之間加入灰色進(jìn)行調(diào)和，增添頁(yè)面層次感。紅色和黑色為經(jīng)典的搭配。因?yàn)榧t色是最鮮明生動(dòng)的、最熱烈的顏色，刺激性較強(qiáng)，紅色相對(duì)于其他顏色，視覺(jué)傳遞速度最快。紅色在黑色的反襯下很容易吸引人們的目光。紅黑這兩種配色也被廣泛的運(yùn)用于較能體現(xiàn)個(gè)性的時(shí)尚類網(wǎng)站，讓人印象強(qiáng)烈的深刻。橙色在黑色的背景上顯得很鮮亮，黑色與橙色搭配較容易營(yíng)造視覺(jué)要求較高的時(shí)尚網(wǎng)站。對(duì)色彩的分析含蓄謙和的灰色對(duì)灰色的分析灰色居于黑色與白色之間，屬于中等明度，具有溫和、謙讓、含蓄、中庸、平凡、中立和高雅的心理感受。與灰色的搭配

灰色是中性色，可以與任何色彩搭配，也可以幫助兩種對(duì)此強(qiáng)烈的色彩實(shí)現(xiàn)和諧過(guò)渡。在許多高科技產(chǎn)品，尤其是金屬材料有關(guān)的產(chǎn)品，幾乎都采用灰色來(lái)展現(xiàn)高科技的形象。任何色彩加入灰色都能顯得含蓄而柔和。但是灰色在給人高品味、含蓄、精致、雅致耐人尋味的同時(shí)，也容易給人頹廢、蒼涼、消極、沮喪、沉悶的感受，如果搭配不好頁(yè)面會(huì)給人灰暗、臟、頹廢的負(fù)面感覺(jué)。對(duì)色彩的分析純潔樸素的白色對(duì)白色的分析白光是所有顏色光線的集合，白色反射所有的光線，不吸收任何可見(jiàn)光，因此白色非常耀眼，具有明快、純粹、清潔、光明及金屬的象征意義。白色具有樸實(shí)、純潔、快樂(lè)的特質(zhì)，也象征著神圣、純潔、樸素、高雅等。與白色的搭配白色作為非彩色，通常與其他色彩搭配使用，構(gòu)成明快的對(duì)比調(diào)和關(guān)系，與鮮艷的色彩搭配，可以使頁(yè)面更清爽、更明快。黑色與白色表現(xiàn)出了兩個(gè)極端的亮度，這兩種顏色搭配使用通常可以表現(xiàn)出都市化，現(xiàn)代的感覺(jué)。因?yàn)楹谏桶咨拇钆浣o人以特殊的嚴(yán)肅感，所以也經(jīng)常被用于莊重的場(chǎng)合。不同年齡段用戶網(wǎng)站的色彩運(yùn)用

剛出生不久的嬰幼兒對(duì)于剛出生不久的寶寶來(lái)講，他們需要享受溫柔的呵護(hù)，這類網(wǎng)站適合用明亮、清潔、淡雅的色調(diào)來(lái)設(shè)計(jì)。顏色多采用溫馨干凈的粉紅色、清淡素雅的淺藍(lán)色以及淺綠色和淺紫色作為主色調(diào)，搭配白色來(lái)設(shè)計(jì)。兒童與少年這個(gè)年齡段的小朋友非?；顫娍蓯?ài)，此類網(wǎng)站適合使用帶有強(qiáng)烈刺激感的鮮艷色調(diào)，來(lái)表達(dá)兒童、少年活潑好動(dòng)的性格與富有朝氣的特點(diǎn)。顏色多采用純度較高的、非常亮麗的藍(lán)色、綠色、黃色、橙色、紅色等，并搭配白色來(lái)設(shè)計(jì)，頁(yè)面色彩明快活潑，視覺(jué)沖擊力強(qiáng)。年輕一族這一階段年齡跨度稍大，是青春飛揚(yáng)、個(gè)性十足的年代，適合的顏色很多，此類網(wǎng)站既可以使用強(qiáng)烈刺激的顏色來(lái)反映年輕人的青春活力，表達(dá)年輕人動(dòng)感、時(shí)尚、現(xiàn)代的感覺(jué)，也可以使用典雅暗淡的顏色來(lái)反映他們復(fù)雜的心路歷程和恬靜的氣質(zhì)。中老年群經(jīng)過(guò)歲月的洗禮，人生經(jīng)歷比較豐富，原本張揚(yáng)的個(gè)性慢慢收斂，心態(tài)也變得比較平和。此類網(wǎng)站的色彩由原來(lái)強(qiáng)烈刺激的色調(diào)轉(zhuǎn)為素雅恬靜的柔和色調(diào)。如棕色、咖啡色、紫紅色等。不同性別網(wǎng)站的色彩運(yùn)用

男性網(wǎng)站男性具有冷靜、力量的特質(zhì)，此類網(wǎng)站一般采用冷色調(diào)來(lái)色來(lái)設(shè)計(jì)，表達(dá)男性穩(wěn)重、強(qiáng)大、有力的特征。要表達(dá)男性的陽(yáng)剛與魅力，可以選擇深紅色、棕褐色、黑色作為主色調(diào)來(lái)設(shè)計(jì)；要表達(dá)男性的儒雅與紳士風(fēng)度，可以采用灰色、藍(lán)灰色、白色進(jìn)行設(shè)計(jì)。女性網(wǎng)站女性具有溫柔、親切的特質(zhì)，此類網(wǎng)站一般采用暖色調(diào)來(lái)色來(lái)設(shè)計(jì)，表達(dá)女性溫柔、親切、可愛(ài)、優(yōu)雅的女性魅力。紫色系列可以表達(dá)成熟女性的優(yōu)雅、高貴的魅力；素雅、明亮的粉紅色、淺藍(lán)色、淺綠色等可以表達(dá)年輕女性清新、溫柔、可愛(ài)、親切的特征。不同風(fēng)格網(wǎng)站的色彩運(yùn)用

活力休閑的風(fēng)格以暖色特別是充滿活力的黃色為中心。紅、橙色的色彩組合最能創(chuàng)造出溫暖的感覺(jué)。這種色彩組合具有青春、朝氣、活潑、頑皮的特點(diǎn)。紅紫色搭配它的補(bǔ)色黃綠色，傳遞著精力充沛的氣息，充分表達(dá)熱力、活力與精神。優(yōu)雅浪漫的風(fēng)格亮色、淡雅色調(diào)是關(guān)鍵的因素。白色背景能產(chǎn)生優(yōu)雅、浪漫的印象。色相差、明度差盡量控制在清淡、明朗的色調(diào)里。粉色代表浪漫，能引起人的興趣與快感，而且比較柔和、寧?kù)o。使用粉紅色、淡紫色和桃紅，會(huì)令人覺(jué)得柔和、典雅，散發(fā)出強(qiáng)烈的女性特質(zhì)。簡(jiǎn)潔質(zhì)樸的風(fēng)格以干凈、整潔的亮色調(diào)為中心，可以適當(dāng)添加少許灰色以降低純度。避免使用過(guò)多顏色，盡量使用同類色、鄰近色、明度反差不宜過(guò)大，減少對(duì)比。不同風(fēng)格網(wǎng)站的色彩運(yùn)用

古典神秘的風(fēng)格多使用黑灰、復(fù)色為主色調(diào)。冷色與明度較低的色調(diào)與之搭配能較好地表現(xiàn)這一主題。自然舒適的風(fēng)格明亮又樸素的柔和色調(diào)給人以最強(qiáng)烈的自然印象。藍(lán)色、綠色是大自然的顏色，具有清新、素雅的感覺(jué)，能體現(xiàn)大自然之美，心情也變得安定、祥和。華麗高貴的風(fēng)格色相差、明度差最大化的強(qiáng)烈色調(diào)對(duì)比，凝重的復(fù)色與之搭配，輔以細(xì)節(jié)精巧的造型，營(yíng)造出奢華的氛圍。純藍(lán)與紅色結(jié)合在一起產(chǎn)生藍(lán)紫色，是色相環(huán)中最深的顏色。藍(lán)黑、藍(lán)紫和黃橙搭配，象征權(quán)威、深不可測(cè)、表現(xiàn)出華麗的皇家氣派。速度力量的風(fēng)格力量感的重度、強(qiáng)度通常以明度鮮艷的色調(diào)來(lái)表現(xiàn)，而速度的輕快感則以鮮艷的純色為基調(diào)，相互結(jié)合于沖擊力較強(qiáng)的頁(yè)面。黃色代表著活力和永恒的動(dòng)感。高純度的對(duì)比配色設(shè)計(jì)，如黃色與它的補(bǔ)色紫色搭配，則含有活力與行動(dòng)的意味。不同主題網(wǎng)站對(duì)色彩的要求

機(jī)構(gòu)類網(wǎng)站包括政府、協(xié)會(huì)、組織團(tuán)體等，要求端莊、穩(wěn)重。企業(yè)類網(wǎng)站公司（企業(yè)）宣傳類：以積極、健康向上、充滿上進(jìn)心以及誠(chéng)信為要求。電子商務(wù)類：以誠(chéng)信為主，頁(yè)面色彩鮮艷、圖像逼真。娛樂(lè)類網(wǎng)站包括游戲類網(wǎng)站、電影類網(wǎng)站和音樂(lè)類網(wǎng)站。休閑類網(wǎng)站包括服裝飾品類網(wǎng)站、化妝品類網(wǎng)站、體育類網(wǎng)站、旅游類和飲食類文化類網(wǎng)站包括文化教育類和藝術(shù)雜志類介紹網(wǎng)站個(gè)人主頁(yè)色彩搭配的原則

色彩的整體性色彩的鮮明性色彩的獨(dú)特性色彩的藝術(shù)性色彩搭配的合理性色彩的搭配

同種色彩搭配鄰近色彩搭配對(duì)比色彩搭配暖色色彩搭配冷色色彩搭配有主色的混合色彩搭配網(wǎng)頁(yè)色彩搭配的技巧

使用相同的色系色彩。運(yùn)用對(duì)比色或互補(bǔ)色。使用過(guò)渡色。用黑色和一種彩色。不要將所有顏色都用到，盡量控制在3種色彩之內(nèi)，并且選擇其中的一種作為主調(diào)。背景和文字的顏色對(duì)比要盡量大，要有足夠的對(duì)比度來(lái)保證頁(yè)面容易閱讀。另外，絕對(duì)不要用花紋復(fù)雜的圖案作背景，以便突出主要的文字內(nèi)容?？紤]主要用戶群的背景和構(gòu)成。模塊二班級(jí)主頁(yè)的配色方案設(shè)計(jì)任務(wù)描述通過(guò)對(duì)色彩以及不同主題和風(fēng)格網(wǎng)站的色彩搭配分析，完成《我們的青春年代》班級(jí)主頁(yè)的配色方案設(shè)計(jì)。利用Fireworks8完成不同配色方案下班級(jí)主頁(yè)的界面設(shè)計(jì)。效果圖如右所示。任務(wù)解析操作方法配色方案設(shè)計(jì)圖任務(wù)解析班級(jí)主頁(yè)的色彩設(shè)計(jì)要求能反映年輕人的青春活力，表達(dá)年輕人動(dòng)感、時(shí)尚、現(xiàn)代的感覺(jué)，對(duì)網(wǎng)站色彩主色調(diào)的選擇純度較高藍(lán)色、綠色和橙色。界面框架色彩搭配采用同色搭配的方法，主題文字與背景則選擇對(duì)比色搭配以突出顯示。班級(jí)主頁(yè)首頁(yè)界面色彩搭配設(shè)計(jì)包括框架色彩搭配設(shè)計(jì)、文字色彩設(shè)計(jì)和網(wǎng)頁(yè)用圖設(shè)計(jì)三大部分。藍(lán)色為主色調(diào)的配色方案設(shè)計(jì)藍(lán)色具有高遠(yuǎn)、博大、理智、誠(chéng)實(shí)等象征意義，藍(lán)色能夠營(yíng)造出和平淡雅潔凈及可靠等氛圍。選擇明亮的天藍(lán)色作為主色調(diào)，與白色相搭配，灰色和深藍(lán)色作輔助，可以使頁(yè)面看起來(lái)非常干凈整潔，給人高遠(yuǎn)、博大、誠(chéng)實(shí)的印象。班級(jí)主頁(yè)網(wǎng)站主題是展現(xiàn)學(xué)生的青青校園生活，是放飛夢(mèng)想的年代，因此取名為”我們的青春年代”，純凈的藍(lán)色由深到淺漸變作為網(wǎng)頁(yè)背景，與網(wǎng)站Logo圖案設(shè)計(jì)相結(jié)合，傳達(dá)學(xué)生群體高遠(yuǎn)博大的情懷，誠(chéng)實(shí)可信的品質(zhì)。藍(lán)色配色方案取色表藍(lán)色配色方案效果圖綠色為主色調(diào)的配色方案設(shè)計(jì)綠色具有與自然、健康相關(guān)的特質(zhì)，是新鮮、春天、純真、活力、新生、和平、舒適、成長(zhǎng)、健康、清新的色彩，是自然之色，代表了生命與希望，也充滿了青春與活力。選擇明度較高的綠色作為主色調(diào)，與白色搭配，灰色進(jìn)行調(diào)和，頁(yè)面整體充滿了青春與活力，給人生機(jī)勃勃的印象。根據(jù)班級(jí)主頁(yè)的主題，綠色為主色調(diào)的色彩搭配方案，體現(xiàn)了學(xué)生群體青春飛揚(yáng)的特質(zhì)，表示學(xué)生群體是祖國(guó)的新生力，是美好未來(lái)發(fā)展的希望的寓意。

綠色配色方案取色表綠色配色方案效果圖橙色為主色調(diào)的配色方案設(shè)計(jì)橙色是十分活潑、溫暖的色彩，也是令人振奮的顏色。橙色具有健康、陽(yáng)光、歡欣、活力、勇敢和自由等象征意義，它既有紅色的熱情又有黃色的光明和活潑的特質(zhì)，可以營(yíng)造朝氣蓬勃和大自然的氣氛，給人以溫暖，興奮而熱烈的感覺(jué)。橙色作與白色的搭配，灰色調(diào)和，使頁(yè)面充滿了陽(yáng)光健康、積極向上的氣息。橙色作為主色調(diào)的搭配方案，可以體現(xiàn)該群體青春活力、健康向上的特質(zhì)，溫暖的橙色還可以表達(dá)班級(jí)主頁(yè)是班級(jí)成員精神上的家園的寓意，給人溫暖的感覺(jué)，營(yíng)造班級(jí)主頁(yè)健康、陽(yáng)光、積極向上的學(xué)習(xí)和生活氛圍，充滿了激情。橙色配色方案取色表橙色配色方案效果圖任務(wù)預(yù)備知識(shí)（三）切片的基本操作創(chuàng)建切片對(duì)象查看并顯示切片和切片輔助線編輯切片切片交互操作準(zhǔn)備切片以供導(dǎo)出優(yōu)化與導(dǎo)出使用【導(dǎo)出向?qū)А窟M(jìn)行導(dǎo)出使用【圖像預(yù)覽】進(jìn)行導(dǎo)出使用優(yōu)化設(shè)置在工作區(qū)中優(yōu)化選擇文件類型優(yōu)化GIF、PNG、TIFF、BMP和PICT文件是對(duì)【調(diào)色板】的選擇優(yōu)化JPEG創(chuàng)建切片對(duì)象基于所選對(duì)象插入矩形切片：選中需要插入切片的對(duì)象；選擇【編輯】|【插入】|【矩形切片】。如果選擇了多個(gè)對(duì)象，則需要選擇應(yīng)用切片的方式，【單一】可創(chuàng)建覆蓋全部所選對(duì)象的單個(gè)切片對(duì)象，【多重】可為每個(gè)所選對(duì)象創(chuàng)建一個(gè)切片對(duì)象。使用【切片】工具繪制切片：選擇【切片】工具；在需要繪制切片的對(duì)象上拖動(dòng)以繪制切片對(duì)象。繪制【html】切片：繪制切片對(duì)象并將其保留為選定狀態(tài)；在【屬性】檢查器中，從【類型】彈出菜單中選擇【HTML】；單擊【編輯】按鈕，在【編輯HTML切片】窗口中鍵入文本；單擊【確定】以應(yīng)用更改并關(guān)閉【編輯HTML切片】窗口。編輯切片移動(dòng)切片輔助線以編輯切片：將【指針】或【部分選定】工具放在切片輔助線上，針變?yōu)檩o助線移動(dòng)指針；將切片輔助線拖動(dòng)到所需位置，切片大小即被調(diào)整，并且所有相鄰切片也自動(dòng)調(diào)整大小。使用工具編輯切片對(duì)象：可以使用【指針】、【部分選定】和【變形】工具更改切片的形狀或調(diào)整切片的大小。使用【屬性】檢查器或【信息】面板編輯切片對(duì)象：選中切片對(duì)象后，可以在【屬性】檢查器面板中以數(shù)字方式更改切片對(duì)象的位置和大小。使用優(yōu)化設(shè)置在工作區(qū)中優(yōu)化

【GIF網(wǎng)頁(yè)216】強(qiáng)制所有顏色均為網(wǎng)頁(yè)安全色。該調(diào)色板最多包含216種顏色?！綠IF接近網(wǎng)頁(yè)256色】將非網(wǎng)頁(yè)安全色轉(zhuǎn)換為與其最接近的網(wǎng)頁(yè)安全色。調(diào)色板最多包含256種顏色?！綠IF接近網(wǎng)頁(yè)128色】將非網(wǎng)頁(yè)安全色轉(zhuǎn)換為與其最接近的網(wǎng)頁(yè)安全色。調(diào)色板最多包含128種顏色?！綠IF最合適256】是一個(gè)只包含圖形中實(shí)際使用的顏色的調(diào)色板。調(diào)色板最多包含256種顏色。【JPEG-較高品質(zhì)】將品質(zhì)設(shè)為80、平滑度設(shè)為0，生成的圖形品質(zhì)較高但占用空間較大。【JPEG-較小文件】將品質(zhì)設(shè)為60、平滑度設(shè)為2，生成的圖形大小不到【較高品質(zhì)JPEG】的一半，但品質(zhì)有所下降?！緞?dòng)畫(huà)GIF接近網(wǎng)頁(yè)128】將文件格式設(shè)為【GIF動(dòng)畫(huà)】，并將非網(wǎng)頁(yè)安全色轉(zhuǎn)換為與其最接近的網(wǎng)頁(yè)安全色。調(diào)色板最多包含128種顏色。優(yōu)化JPEG調(diào)整JPEG品質(zhì)：用【優(yōu)化】面板的【品質(zhì)】滑塊彈出菜單中調(diào)整品質(zhì)。較高的百分比設(shè)置可以維持優(yōu)良的圖像品質(zhì)，但壓縮較少，因此產(chǎn)生的文件也較大；較低的百分比設(shè)置產(chǎn)生小文件，但圖像品質(zhì)也較低。選擇性地壓縮JPEG的各個(gè)區(qū)域：選擇性JPEG壓縮可以以不同的級(jí)別壓縮JPEG的不同區(qū)域。圖像中引人注意的區(qū)域以較高品質(zhì)級(jí)別壓縮。而重要性較低的區(qū)域（如背景）以較低品質(zhì)級(jí)別壓縮，可以在減小圖像的總大小同時(shí)保留較重要區(qū)域的品質(zhì)。壓縮JPEG的所選區(qū)域的基本操作：步驟一：在【優(yōu)化】面板的【導(dǎo)出文件格式】彈出菜單中設(shè)置導(dǎo)出文件格式為【JPEG】。步驟二：使用【選取框】工具在圖像上選取用于壓縮的圖形區(qū)域。步驟三：選擇【修改】|【選擇性JPEG】|【將所選保存為JPEG蒙版】。步驟四：在【優(yōu)化】面板中單擊【編輯選擇性品質(zhì)選項(xiàng)】按鈕，打開(kāi)【可選JPEG設(shè)置】對(duì)話框。勾選【啟動(dòng)選擇性品質(zhì)】并在文本框中輸入一個(gè)值，單擊【確定】按鈕。模塊二班級(jí)主頁(yè)的界面導(dǎo)出任務(wù)描述打開(kāi)“項(xiàng)目一\各章節(jié)完成文檔\ch1-1-3”下的添加logo和banner后的界面設(shè)計(jì)文檔，在此基礎(chǔ)上利用Fireworks8完成《我們的青春年代》班級(jí)主頁(yè)的切片與優(yōu)化導(dǎo)出。任務(wù)解析操作方法切片后效果圖任務(wù)解析切片是將圖片轉(zhuǎn)換成可編輯網(wǎng)頁(yè)的一座橋梁，通過(guò)切片才可以將界面設(shè)計(jì)圖片變成Dreamweaver可以編輯的網(wǎng)頁(yè)格式，切片后的圖像是網(wǎng)頁(yè)中片的主要來(lái)源，切片后的圖像可以更快的在網(wǎng)絡(luò)上傳播。切片的方法是切片首先保證切出網(wǎng)頁(yè)中需要多次修改的區(qū)域；其次是切片圖像的大小除了特殊品質(zhì)要求的圖片外，大部分切片圖像應(yīng)盡量保持在15K以內(nèi)，以便于便于網(wǎng)絡(luò)傳輸，另外是要充分利用Dreamweaver中的自動(dòng)拼貼功能減少垃圾切片。班級(jí)主頁(yè)的切片原則：按照班級(jí)主頁(yè)的框架結(jié)構(gòu)進(jìn)行切片。網(wǎng)站Logo、banner、導(dǎo)航欄、公告欄、標(biāo)題欄、主體內(nèi)容部分、頁(yè)腳單獨(dú)切片，需要重新繪制的部分如表單域、需要插入文字的部分如公告欄文字區(qū)、可以用背景色填充的部分如頁(yè)腳版權(quán)信息區(qū)單獨(dú)切片。可以用逆向思維的方式，從Dreamweaver中表格設(shè)計(jì)網(wǎng)頁(yè)框架的結(jié)構(gòu)安排倒敘到切片環(huán)節(jié)以確定切片劃分的原則。操作方法創(chuàng)建切片：選擇【切片】工具，此工具繪制的是矩形切片；參照切片原則在班級(jí)主頁(yè)界面設(shè)計(jì)圖上拖動(dòng)鼠標(biāo)以繪制切片對(duì)象；重復(fù)上述步驟直至頁(yè)面分割完成。繪制【html】切片：繪制切片對(duì)象并將其保留為選定狀態(tài)；在【屬性】檢查器中，從【類型】彈出菜單中選擇【HTML】；單擊【編輯】按鈕，在【編輯HTML切片】窗口中鍵入文本；單擊【確定】以應(yīng)用更改并關(guān)閉【編輯HTML切片】窗口。移動(dòng)切片輔助線以調(diào)整切片：根據(jù)需要，可以選中要調(diào)整的切片對(duì)象，也可以不選；將【指針】工具或【部分選定】工具放在切片輔助線上，針變?yōu)檩o助線移動(dòng)指針；拖動(dòng)鼠標(biāo)使輔助線移動(dòng)到所需的位置，調(diào)整切片大小。操作方法自定義優(yōu)化：在【優(yōu)化】面板的【導(dǎo)出文件格式】彈出菜單中選擇一種選項(xiàng)；設(shè)置格式特定的選項(xiàng)；根據(jù)需要從【優(yōu)化】面板的【選項(xiàng)】菜單中選擇其它優(yōu)化設(shè)置；可以命名并保存自定義優(yōu)化設(shè)置。選擇性地壓縮JPEG區(qū)域：在【優(yōu)化】面板的【導(dǎo)出文件格式】彈出菜單中設(shè)置導(dǎo)出文件格式為【JPEG】；使用【選取框】工具在圖像上選取用于壓縮的圖形區(qū)域；選擇【修改】|【選擇性JPEG】|【將所選保存為JPEG蒙版】；在【優(yōu)化】面板中單擊【編輯選擇性品質(zhì)選項(xiàng)】按鈕，打開(kāi)【可選JPEG設(shè)置】對(duì)話框并進(jìn)行優(yōu)化設(shè)置；單擊【確定】按鈕使用【圖像預(yù)覽】導(dǎo)出：選擇【文件】|【圖像預(yù)覽】，打開(kāi)【圖像預(yù)覽】對(duì)話框；完成設(shè)置后單擊【導(dǎo)出】按鈕，打開(kāi)【導(dǎo)出】對(duì)話框；在【導(dǎo)出】對(duì)話框中鍵入文件的名稱，選擇目標(biāo)，根據(jù)需要設(shè)置任何其它選項(xiàng)，然后單擊【保存】。

舉一反三創(chuàng)建彈出菜單：選擇【修改】|【彈出菜單】|【添加彈出菜單】后，會(huì)打開(kāi)【彈出菜單編輯器】對(duì)話框，在對(duì)話框中可以根據(jù)向?qū)瓿蓮棾霾藛蔚膭?chuàng)建過(guò)程。彈出菜單編輯器的對(duì)話框中包含四個(gè)選項(xiàng)卡：【內(nèi)容】包含用于確定基本菜單結(jié)構(gòu)以及每個(gè)菜單項(xiàng)的文本、URL鏈接和目標(biāo)的選項(xiàng)?！就庥^】包含可確定每個(gè)菜單單元格的【彈起】狀態(tài)和【滑過(guò)】狀態(tài)的外觀，以及菜單的垂直和水平方向的選項(xiàng)?！靖呒?jí)】包含可確定單元格尺寸、邊距、間距、單元格邊框?qū)挾群皖伾?、菜單延遲以及文字縮進(jìn)的選項(xiàng)?！疚恢谩堪纱_定菜單和子菜單位置的選項(xiàng)，其中【菜單位置】將相對(duì)于切片放置彈出菜單。預(yù)設(shè)位置包括切片的底部、右下部、頂部和右上部；【子菜單位置】將彈出子菜單放在父菜單的右側(cè)或右下部，或者放在其底部。舉一反三創(chuàng)建動(dòng)畫(huà)：動(dòng)畫(huà)元件的使用：

選擇【編輯】|【插入】|【新建元件】以創(chuàng)建動(dòng)畫(huà)元件，或者選擇需要轉(zhuǎn)換為元件的對(duì)象，選擇【修改】|【元件】|【轉(zhuǎn)換為元件】將已有的對(duì)象轉(zhuǎn)換為元件。幀的設(shè)置：

通過(guò)【幀】面板可以命名幀、重新組織幀、手動(dòng)設(shè)置動(dòng)畫(huà)的定時(shí)以及將對(duì)象從一個(gè)幀移到另一個(gè)幀。還可以設(shè)置幀延時(shí)或隱藏幀。動(dòng)畫(huà)的預(yù)覽與導(dǎo)出：

動(dòng)畫(huà)導(dǎo)出時(shí)可以選擇【文件】|【圖像預(yù)覽】，在彈出的對(duì)話框中選擇導(dǎo)出的圖像格式為【GIF動(dòng)畫(huà)】，然后導(dǎo)出動(dòng)畫(huà)。可以在【動(dòng)畫(huà)】選項(xiàng)卡中設(shè)置動(dòng)畫(huà)的【循環(huán)播放】，以及修改【幀延時(shí)】。打開(kāi)多個(gè)文件以創(chuàng)建動(dòng)畫(huà)創(chuàng)建動(dòng)畫(huà)元件動(dòng)畫(huà)創(chuàng)建補(bǔ)間實(shí)例動(dòng)畫(huà)任務(wù)預(yù)備知識(shí)（四）Dreamweaver8文檔的工作環(huán)境插入工具欄文檔工具欄狀態(tài)欄Dreamweaver8文檔的基本操作Dreamweaver8文檔的新建、打開(kāi)、保存、預(yù)覽Dreamweaver8文檔的頁(yè)面屬性設(shè)置Dreamweaver中基本元素的插入插入文本元素插入圖像元素Dreamweaver8文檔的工作環(huán)境Dreamweaver8文檔的工作環(huán)境插入工具欄：Dreamweaver8文檔的工作環(huán)境文檔工具欄：Dreamweaver8文檔的工作環(huán)境狀態(tài)欄：Dreamweaver8文檔的頁(yè)面屬性設(shè)置選擇【修改】|【頁(yè)面屬性】，打開(kāi)【頁(yè)面屬性】對(duì)話框，或者單擊【屬性】檢查器面板中的【頁(yè)面屬性】按鈕，打開(kāi)頁(yè)面屬性設(shè)置的對(duì)話框；【外觀】類中設(shè)置頁(yè)面文字字體、大小、背景色和背景圖、頁(yè)面邊距;【鏈接】類中設(shè)置頁(yè)面超級(jí)鏈接的鏈接、變換圖像鏈接、活動(dòng)鏈接、已訪問(wèn)鏈接顏色和下劃線樣式;【標(biāo)題/編碼】類設(shè)置文檔標(biāo)題和編碼格式模塊二班級(jí)主頁(yè)站點(diǎn)的創(chuàng)建與管理任務(wù)描述在E盤(pán)根目錄下新建文件夾myweb，復(fù)制“項(xiàng)目一\各章節(jié)完成文檔\ch1-3-2”下index.html文件、form.html文件和images到myweb文件夾中，利用Dreamweaver創(chuàng)建班級(jí)主頁(yè)本地站點(diǎn)，站點(diǎn)根目錄文件夾為myweb。任務(wù)解析知識(shí)點(diǎn)：文件的打開(kāi)、站點(diǎn)的新建與管理操作方法操作方法文件的打開(kāi)啟動(dòng)Dreamweaver8，選擇【文件】|【打開(kāi)】；在彈出的對(duì)話框中選擇相應(yīng)的文件；單擊【打開(kāi)】按鈕?；蛴益I單擊需要打開(kāi)的文件，在彈出的菜單中選擇【打開(kāi)方式】|【Dreamweaver8】站點(diǎn)的創(chuàng)建啟動(dòng)Dreamweaver8，選擇【站點(diǎn)】|【新建站點(diǎn)】，打開(kāi)【站點(diǎn)定義】向?qū)?duì)話框；根據(jù)向?qū)c(diǎn)擊【下一步】按鈕設(shè)置站點(diǎn)創(chuàng)建選項(xiàng)，單擊【上一步】返回前一步修改設(shè)置；單擊【完成】按鈕完成站點(diǎn)新建操作。站點(diǎn)的管理在Dreamweaver8中選擇【站點(diǎn)】|【管理站點(diǎn)】，打開(kāi)【管理站點(diǎn)】對(duì)話框；在左側(cè)站點(diǎn)名稱列表框中選擇需要編輯的站點(diǎn)名稱，單擊【編輯】按鈕，打開(kāi)站點(diǎn)創(chuàng)建的向?qū)?duì)話框；修改站點(diǎn)信息后單擊【完成】按鈕完成站點(diǎn)創(chuàng)建操作。如果要?jiǎng)h除站點(diǎn)，則在【管理站點(diǎn)】對(duì)話框中選中站點(diǎn)名稱，單擊【刪除】按鈕。舉一反三創(chuàng)建和管理站點(diǎn)：使用【高級(jí)】選項(xiàng)卡來(lái)創(chuàng)建和管理站點(diǎn)站點(diǎn)的導(dǎo)入與導(dǎo)出站點(diǎn)的復(fù)制與刪除查看站點(diǎn)地圖站點(diǎn)測(cè)試：檢查文件間的鏈接：

選擇【文件】|【檢查頁(yè)】|【檢查鏈接】，或者選擇【站點(diǎn)】|【檢查站點(diǎn)范圍的鏈接】，可以打開(kāi)【結(jié)果】面板的【鏈接檢查器】選項(xiàng)卡，列表中顯示鏈接有誤或沒(méi)有鏈接的文件和圖片修復(fù)損壞的鏈接：

檢查連接后，【鏈接檢查器】中顯示損壞的鏈接以及孤立的文件，直接在【鏈接檢查器】的“斷掉的鏈接”列表中單擊損壞的鏈接及圖片路徑，輸入正確的路徑及文件名，或者雙擊“文件”列表中的文件，打開(kāi)該文件，找到出錯(cuò)的鏈接及圖片，在【屬性】檢查器面板中輸入正確的路徑及文件名。修復(fù)完畢后按Enter鍵確認(rèn)，修復(fù)正確的文件會(huì)從【鏈接檢查器】列表中消失。

模塊三班級(jí)主頁(yè)首頁(yè)基本元素的插入任務(wù)描述班級(jí)主頁(yè)index頁(yè)面完成切片并導(dǎo)出后，在站點(diǎn)創(chuàng)建完成的基礎(chǔ)上，利用Dreamweaver8打開(kāi)inde.html頁(yè)面，在Dreamweaver8工作環(huán)境下插入網(wǎng)頁(yè)文字和圖像，設(shè)置主體內(nèi)容部分單元格的背景，并在banner單元格中插入Flash，所需要的圖像和Flash素材已放置在images文件夾中。同時(shí)修改index頁(yè)面中的其他元素以及頁(yè)面屬性，完成index頁(yè)面的制作。任務(wù)解析操作方法操作方法頁(yè)面屬性的設(shè)置：選擇【修改】|【頁(yè)面屬性】，打開(kāi)【頁(yè)面屬性】對(duì)話框；或單擊【屬性】檢查器面板中的【頁(yè)面屬性】按鈕，打開(kāi)【頁(yè)面屬性】對(duì)話框；在打開(kāi)的對(duì)話框中，分別選擇【外觀】類、【鏈接】類等類別，設(shè)置頁(yè)面的相關(guān)屬性；設(shè)置完后單擊【確定】按鈕。單元格背景圖與背景色的設(shè)置：在需要設(shè)置背景圖或背景色的單元格中單擊，使光標(biāo)定位在單元格中；或者按住Ctrl鍵，移動(dòng)鼠標(biāo)到單元格上，此時(shí)單元格邊框顯示為紅色框，單擊鼠標(biāo)左鍵選中單元格；在【屬性】檢查器面板【單元格】欄中設(shè)置【背景】或【背景顏色】框?qū)傩?。操作方法熱點(diǎn)地圖的插入與屬性設(shè)置：?jiǎn)螕暨x中需要添加熱點(diǎn)地圖的圖像對(duì)象；單擊【屬性】檢查器面板右下角的箭頭以完全顯示面板；在【地圖】框下方選擇熱點(diǎn)工具，在選中的圖像上繪制熱點(diǎn)；使用工具選中熱點(diǎn)，在【屬性】檢查器面板中設(shè)置地圖名稱、超級(jí)鏈接等屬性。文本的插入與屬性設(shè)置

：在需要插入文本單元格中單擊，使光標(biāo)定位在單元格中；選擇輸入法，鍵入文本內(nèi)容；選中需要設(shè)置屬性的文本，在【屬性】檢查器面板中設(shè)置大小、字體、顏色等屬性。Flash的插入與屬性設(shè)置打開(kāi)工具欄【常用】選項(xiàng)卡，單擊插入媒體的按鈕，在彈出菜單中選擇插入Flash的按鈕，或者選擇【插入】|【媒體】|【Flash】；在對(duì)話框中找到需要插入的Flash文件并選中,單擊【確定】按鈕；在文檔中單擊選中Flash對(duì)象；在【屬性】檢查器面板中設(shè)置Flash的寬高、對(duì)齊方式、參數(shù)等屬性。操作方法圖像的插入與屬性設(shè)置在【常用】工具欄中單擊插入圖像的按鈕，或者選擇【插入】|【圖像】，打開(kāi)【選擇圖像源文件】對(duì)話框；在打開(kāi)的【選擇圖像源文件】對(duì)話框中找到需要插入的圖像文件并選中；單擊【確定】按鈕；在文檔中單擊選中圖像對(duì)象；在【屬性】檢查器面板中設(shè)置圖像大小、鏈接、對(duì)齊方式等屬性。文本字段的插入與屬性設(shè)置在需要插入文本字段的單元格中單擊；在【表單】工具欄中單擊插入文本字段的按鈕，或者選擇【插入】|【表單】|【文本域】（要想表單起作用，需要在插入表單元素之前先插入表單）；單擊選中文本字段，在【屬性】檢查器面板中設(shè)置類型、字符寬度等屬性，還可以打開(kāi)【標(biāo)簽檢查器】面板，在面板的【屬性】選項(xiàng)卡中設(shè)置文本字段高度等屬性。操作方法跳轉(zhuǎn)菜單的插入與屬性設(shè)置在需要插入跳轉(zhuǎn)菜單的單元格中單擊；在【表單】工具欄中單擊插入跳轉(zhuǎn)菜單的按鈕，或選擇【插入】|【表單】|【跳轉(zhuǎn)菜單】；在彈出的【插入跳轉(zhuǎn)菜單】對(duì)話框中輸入菜單項(xiàng)文本及超級(jí)鏈接，選中菜單項(xiàng)后，單擊或按鈕進(jìn)行添加或刪除菜單項(xiàng)，單擊按鈕和調(diào)整菜單項(xiàng)的順序，需要在菜單項(xiàng)后添加前往按鈕則勾選【菜單之后插入前往按鈕】；單擊選中跳轉(zhuǎn)菜單，在【屬性】檢查器面板中設(shè)置菜單項(xiàng)初始化時(shí)選定值等屬性，單擊【列表值】按鈕可以打開(kāi)【列表值】對(duì)話框修改列表值。滾動(dòng)字幕的制作選定制作滾動(dòng)字幕的單元格，切換到【代碼】視圖；在【代碼】視圖，將光標(biāo)定位在選中代碼中文字開(kāi)始的位置輸入標(biāo)記<marquee>，在文字結(jié)束的位置輸入標(biāo)記</marquee>；在<marquee>標(biāo)記“marquee”后敲空格，在彈出的列表中選擇behavior、direction等參數(shù)以設(shè)置滾動(dòng)類型、方向等屬性。

舉一反三文本的導(dǎo)入與特殊字符的插入：導(dǎo)入文本在文檔中插入特殊字符在字符之間添加空格鼠標(biāo)經(jīng)過(guò)圖像與導(dǎo)航條的制作：鼠標(biāo)經(jīng)過(guò)圖像【預(yù)先載入圖像】將不會(huì)立即出現(xiàn)在頁(yè)面上的圖像載入瀏覽器緩存中，這樣可防止當(dāng)圖像應(yīng)該出現(xiàn)時(shí)由于下載而導(dǎo)致延遲?！窘粨Q圖像】通過(guò)更改<img>標(biāo)簽的SRC屬性將一個(gè)圖像與另一個(gè)圖像交換?！净謴?fù)交換圖像】將最后一組交換的圖像恢復(fù)為以前的源文件。導(dǎo)航條舉一反三網(wǎng)頁(yè)頁(yè)面與網(wǎng)頁(yè)元素所對(duì)應(yīng)的html標(biāo)簽：<!DOCTYPE>：聲明，告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。<html>、<head>、<body>：定義文檔、頭部、主體<p>：定義段落。<br>：插入一個(gè)簡(jiǎn)單的換行符。<!--...-->：注釋標(biāo)簽。<img>：定義一副圖像。<a>：定義錨。通過(guò)使用href

屬性創(chuàng)建指向另外一個(gè)文檔的鏈接（或超鏈接）；通過(guò)使用name或id屬性，創(chuàng)建一個(gè)文檔內(nèi)部的書(shū)簽。<table>：定義HTML表格。<td>：定義HTML表格中的標(biāo)準(zhǔn)單元格。<class>與<style>：<class>定義元素的類。<style>定義內(nèi)聯(lián)樣式。<marquee>：創(chuàng)建一個(gè)滾動(dòng)的文本字幕。任務(wù)預(yù)備知識(shí)（五）表格的基本操作表格的創(chuàng)建表格行、列的插入與刪除設(shè)置表格的屬性設(shè)置行、列、單元格的屬性單元格的合并與拆分布局表格與布局單元格的基本操作繪制布局表格和單元格將內(nèi)容添加到布局單元格中設(shè)置布局表格屬性設(shè)置布局單元格屬性表格創(chuàng)建對(duì)話框的設(shè)置在“表格大小”部分中設(shè)置：【行數(shù)】確定表格具有的行的數(shù)目。【列數(shù)】確定表格具有的列的數(shù)目?！颈砀駥挾取恳韵袼貫閱挝换虬凑紴g覽器窗口寬度的百分比指定表格的寬度?！具吙虼旨?xì)】指定表格邊框的寬度（以像素為單位）?！締卧襁吘唷看_定單元格邊框和單元格內(nèi)容之間的像素?cái)?shù)?！締卧耖g距】確定相鄰的表格單元格之間的像素?cái)?shù)。在“頁(yè)面”部分設(shè)置一個(gè)標(biāo)題選項(xiàng)在“輔助功能”部分設(shè)置表格的屬性設(shè)置【表格

ID】是表格的ID?！拘小亢汀玖小渴潜砀裰行泻土械臄?shù)目?！緦挕亢汀靖摺渴且韵袼貫閱挝换虬凑紴g覽器窗口寬度的百分比計(jì)算的表格寬度和高度。但通常不需要設(shè)置表格的高度?！締卧襁吘唷渴菃卧駜?nèi)容和單元格邊框之間的像素?cái)?shù)?！締卧耖g距】是相鄰的表格單元格之間的像素?cái)?shù)。【對(duì)齊】確定表格相對(duì)于同一段落中其他如文本或圖像等元素的顯示位置?！咀髮?duì)齊】沿其他元素的左側(cè)對(duì)齊表格，同一段落中的文本在表格的右側(cè)換行；【右對(duì)齊】沿其他元素的右側(cè)對(duì)齊表格，文本在表格的左側(cè)換行；【居中對(duì)齊】將表格居中，文本顯示在表格的上方和/或下方；【缺省】指示瀏覽器應(yīng)該使用其默認(rèn)對(duì)齊方式。當(dāng)將對(duì)齊方式設(shè)置為【默認(rèn)】時(shí)，其他內(nèi)容不顯示在表格的旁邊，若要在其他內(nèi)容旁邊顯示表格，則使用【左對(duì)齊】或【右對(duì)齊】。表格的屬性設(shè)置【邊框】指定表格邊框的寬度（以像素為單位）?！厩宄袑挕亢汀厩宄懈摺堪粹o從表格中刪除所有明確指定的行高或列寬?！緦⒈砀駥挾绒D(zhuǎn)換成像素】和【將表格高度轉(zhuǎn)換成像素】按鈕將表格中每列的寬度或高度設(shè)置為以像素為單位的當(dāng)前寬度，同時(shí)將整個(gè)表格的寬度設(shè)置為以像素為單位的當(dāng)前寬度?！緦⒈砀駥挾绒D(zhuǎn)換成百分比】和【將表格高度轉(zhuǎn)換成百分比】按鈕將表格中每列的寬度或高度設(shè)置為按占【文檔】窗口寬度百分比表示的當(dāng)前寬度，同時(shí)將整個(gè)表格的寬度設(shè)置為按占【文檔】窗口寬度百分比表示的當(dāng)前寬度。【背景顏色】是表格的背景顏色?！具吙蝾伾渴潜砀襁吙虻念伾??！颈尘皥D像】是表格的背景圖像。行、列、單元格的屬性設(shè)置【水平】指定單元格、行或列內(nèi)容的水平對(duì)齊方式。有左對(duì)齊、右對(duì)齊、居中對(duì)齊及默認(rèn)四個(gè)選項(xiàng)，通常常規(guī)單元格為左對(duì)齊，標(biāo)題單元格為居中對(duì)齊。【垂直】指定單元格、行或列內(nèi)容的垂直對(duì)齊方式。對(duì)齊方式有頂端、中間、底部、基線與默認(rèn)五個(gè)選項(xiàng)，垂直對(duì)齊通常是居中對(duì)齊。【寬】和【高】是以像素為單位或按占整個(gè)表格寬度或高度百分比計(jì)算的所選單元格的寬度和高度。若要讓瀏覽器根據(jù)單元格的內(nèi)容以及其他列和行的寬度和高度確定適當(dāng)?shù)膶挾然蚋叨?，則數(shù)值框內(nèi)為空。默認(rèn)情況下，瀏覽器選擇一列的寬度來(lái)容納列中最寬的圖像或最長(zhǎng)的行。這就是為什么當(dāng)您將內(nèi)容添加到某個(gè)列時(shí)，該列有時(shí)變得比表格中其他列寬得多的原因。行、列、單元格的屬性設(shè)置【背景】設(shè)置單元格、列或行的背景圖像。單擊文件夾圖標(biāo)瀏覽到某個(gè)圖像，或使用“指向文件”圖標(biāo)選擇某個(gè)圖像文件?！颈尘邦伾渴褂妙伾x擇器設(shè)置的單元格、列或行的背景顏色?！具吙颉渴菃卧竦倪吙蝾伾??！竞喜卧瘛堪粹o可以將所選的多個(gè)單元格、行或列合并為一個(gè)單元格。只有當(dāng)單元格形成矩形或直線的塊時(shí)才可以合并這些單元格?！静鸱謫卧瘛堪粹o可以將一個(gè)單元格分成兩個(gè)或更多單元格。一次只能拆分一個(gè)單元格；如果選擇的單元格多于一個(gè)，則此按鈕將禁用?！静粨Q行】可以防止換行，從而使給定單元格中的所有文本都在一行上。【標(biāo)題】可以將所選的單元格格式設(shè)置為表格標(biāo)題單元格。默認(rèn)情況下，表格標(biāo)題單元格的內(nèi)容為粗體并且居中。模塊二班級(jí)新聞模塊頁(yè)面設(shè)計(jì)與制作任務(wù)描述參照班級(jí)主頁(yè)首頁(yè)的頁(yè)面設(shè)計(jì)，利用表格完成班級(jí)新聞模塊的布局設(shè)計(jì)與制作。任務(wù)解析在網(wǎng)站頁(yè)面設(shè)計(jì)中保持一致性是一個(gè)重要的組成部分，它能使網(wǎng)站效地傳達(dá)信息而不會(huì)導(dǎo)致用戶迷惑或焦慮。網(wǎng)站頁(yè)面一致性的設(shè)計(jì)主要在網(wǎng)站頁(yè)面框架結(jié)構(gòu)、導(dǎo)航條布局、網(wǎng)站Logo、banner等在不同頁(yè)面中反復(fù)出現(xiàn)的網(wǎng)頁(yè)元素的設(shè)計(jì)上保持一致性。班級(jí)主頁(yè)網(wǎng)站中其他頁(yè)面的設(shè)計(jì)可以通過(guò)以首頁(yè)index的框架結(jié)構(gòu)為基礎(chǔ)并進(jìn)行修改來(lái)保持網(wǎng)站的一致性。操作方法操作方法表格的創(chuàng)建將光標(biāo)定位在需要插入表格的位置。單擊【常用】或【布局】工具欄中的【表格】按鈕，或者選擇【插入】|【表格】，打開(kāi)【表格】對(duì)話框。在對(duì)話框中完成表格的設(shè)置，單擊【確定】按鈕創(chuàng)建表格。表格、單元格的屬性設(shè)置移動(dòng)鼠標(biāo)到表格線上，鼠標(biāo)指針變成夾子形狀時(shí)單擊以選中表格。光標(biāo)定位在單元格中以選中單元格。在【屬性】檢查器面板中中修改表格或單元格的大小、寬高、邊框、背景等屬性。操作方法單元格的合并：選擇連續(xù)行中形狀為矩形的單元格。選擇【修改】【表格】|【合并單元格】；或者在【屬性】檢查器面板中單擊合并單元格的按鈕。所選單元格的內(nèi)容放置在最終的合并單元格中，所選的第一個(gè)單元格的屬性將應(yīng)用于合并的單元格單元格的拆分：?jiǎn)螕魡卧?。選擇【修改】|【表格】|【拆分單元格】；或者在【屬性】檢查器面板中單擊拆分單元格的按鈕。在彈出的【拆分單元格】的對(duì)話框中設(shè)置把單元格拆分為【行】還是【列】，并指定行數(shù)或列數(shù)。單擊【確定】按鈕。舉一反三層的使用：創(chuàng)建層創(chuàng)建嵌套層調(diào)整層大小更改層的層疊順序更改層可見(jiàn)性層的【溢出】屬性和【可見(jiàn)性】屬性設(shè)置層與表格的互相轉(zhuǎn)換框架的使用：創(chuàng)建框架和框架集查看和設(shè)置框架集屬性查看和設(shè)置框架屬性創(chuàng)建層創(chuàng)建層有三種方法：將光標(biāo)定位在需要插入層的位置，選擇【插入】|【布局對(duì)象】|【層】，文檔中顯示新插入的層；在【布局】工具欄中單擊【繪制層】按鈕，在文檔中按住鼠標(biāo)左鍵拖動(dòng)以繪制一個(gè)層；切換到【布局】工具欄，單擊鼠標(biāo)按住左鍵拖動(dòng)【繪制層】按鈕到文檔窗口中松開(kāi)，可以創(chuàng)建一個(gè)新層。如果要連續(xù)繪制多哥層，在【布局】工具欄中單擊【繪制層】按鈕，在文檔中按住ctrl鍵，可以連續(xù)繪制多個(gè)層。創(chuàng)建嵌套層創(chuàng)建嵌套層有三種方法：將鼠標(biāo)指針定位于已經(jīng)創(chuàng)建好的父層中，選擇【插入】|【布局對(duì)象】|【層】，則在父層中插入一個(gè)子層。直接拖放【布局】工具欄中的【繪制層】按鈕到父層中。在【層】面板中，按住ctrl鍵，選中面板中的一個(gè)層，并拖動(dòng)到要嵌入的層上，在目標(biāo)層的四周出現(xiàn)選中的方框時(shí)松開(kāi)鼠標(biāo)左鍵即可創(chuàng)建。調(diào)整層大小

調(diào)整單個(gè)層大?。涸凇驹O(shè)計(jì)】視圖中，移動(dòng)鼠標(biāo)到層上單擊，選擇一個(gè)層。若要通過(guò)拖動(dòng)來(lái)調(diào)整大小，則拖動(dòng)該層四周任一大小調(diào)整柄。若要通過(guò)鍵盤(pán)一次調(diào)整1像素的大小，則按住Ctrl鍵的同時(shí)按鍵盤(pán)上的上下左右箭頭，箭頭鍵移動(dòng)層的右邊框和下邊框來(lái)調(diào)整大小。若要按網(wǎng)格靠齊增量來(lái)調(diào)整大小，則按住Shift+Ctrl鍵的同時(shí)按鍵盤(pán)上的上下左右箭頭來(lái)調(diào)整大小。也可以在在【屬性】檢查器鍵入【寬】和【高】的值。同時(shí)調(diào)整多個(gè)層的大小：按住Shift鍵單擊層以同時(shí)選中兩個(gè)或多個(gè)層。選擇【修改】|【對(duì)齊】|【設(shè)成寬度相同】，或者【修改】|【對(duì)齊】|【設(shè)成高度相同】，以最后選定的層的寬度或高度為參照值調(diào)整其他層的大小。在【屬性】檢查器面板的【多個(gè)層】部分輸入寬度和高度值。這些值將應(yīng)用于所有選定層。層的【溢出】屬性和【可見(jiàn)性】屬性層的溢出：如果層中放置的內(nèi)容超出了層的大小，則按照【溢出】屬性中指定的方式處理。Visible：表示溢出部分也會(huì)顯示，層會(huì)向右下方擴(kuò)展。Hidden：表示保持層的大小，并裁剪掉溢出部分，不顯示滾動(dòng)條。Scroll：表示給層添加滾動(dòng)條，不管層里的內(nèi)容是否超出層的大小。Auto：表示在層的內(nèi)容超出層的大小時(shí)，層大小不變，自動(dòng)顯示滾動(dòng)條。層的可見(jiàn)性：Default：默認(rèn)，表示不指定可見(jiàn)性屬性。Inherit：繼承，表示使用父層的可見(jiàn)性來(lái)設(shè)置。Visible：可見(jiàn)，表示顯示層的內(nèi)容，忽略父層設(shè)置。Hidden：隱藏，表示隱藏層的內(nèi)容，忽略父層設(shè)置。使用預(yù)定義的框架集創(chuàng)建框架步驟一：將插入點(diǎn)放置在文檔中。步驟二：選擇【插入】|【HTML】|【框架】，在彈出的子菜單中選擇預(yù)定義的框架集。或者在【布局】工具欄中單擊【框架】按鈕上的下拉箭頭，然后選擇預(yù)定義的框架集?？蚣芗瘓D標(biāo)提供應(yīng)用于當(dāng)前文檔的每個(gè)框架集的可視化表示形式?？蚣芗瘓D標(biāo)的藍(lán)色區(qū)域表示當(dāng)前文檔，而白色區(qū)域表示將顯示其它文檔的框架。步驟三：出現(xiàn)【框架標(biāo)簽輔助功能屬性】對(duì)話框，為每個(gè)框架指定一個(gè)名稱。步驟四：?jiǎn)螕簟敬_定】。查看和設(shè)置框架集屬性

【邊框】確定在瀏覽器中查看文檔時(shí)在框架周圍是否應(yīng)顯示邊框。要顯示邊框，則選擇【是】；要使瀏覽器不顯示邊框，則選擇【否】。要允許瀏覽器確定如何顯示邊框，則選擇【默認(rèn)值】?！具吙?qū)挾取恐付蚣芗兴羞吙虻膶挾取！具吙蝾伾吭O(shè)置邊框的顏色。使用顏色選擇器選擇一種顏色，或者鍵入顏色的十六進(jìn)制值?！鞠袼亍繉⑦x定列或行的大小設(shè)置為一個(gè)絕對(duì)值。對(duì)于應(yīng)始終保持相同大小的框架（例如導(dǎo)航條）而言，此選項(xiàng)是最佳選擇?！景俜直取恐付ㄟx定列或行應(yīng)相當(dāng)于其框架集的總寬度或總高度的百分比。以【百分比】為單位的框架分配空間是在以【像素】為單位的框架之后，但在將單位設(shè)置為【相對(duì)】的框架之前。【相對(duì)】指定在為【像素】和【百分比】框架分配空間后，為選定列或行分配其余可用空間；剩余空間在大小設(shè)置為【相對(duì)】的框架中按比例劃分。若要設(shè)置選定框架集的各行和各列的框架的大小，請(qǐng)單擊【行列選擇范圍】區(qū)域左側(cè)或頂部的選項(xiàng)卡；然后在【值】文本框中，輸入高度或?qū)挾?。查看和設(shè)置框架屬性

查看框架在【文檔】窗口的【設(shè)計(jì)】視圖中，按住Alt鍵的同時(shí)單擊一個(gè)框架，或者在【框架】面板（【窗口】|【框架】）中單擊框架。在【屬性】檢查器（【窗口】|【屬性】）中，單擊右下角的展開(kāi)箭頭，查看所有框架屬性，框架屬性

【框架名稱】是鏈接的target屬性或腳本在引用該框架時(shí)所用的名稱?！驹次募恐付ㄔ诳蚣苤酗@示的源文檔。

【滾動(dòng)】指定在框架中是否顯示滾動(dòng)條。【不能調(diào)整大小】令訪問(wèn)者無(wú)法通過(guò)拖動(dòng)框架邊框在瀏覽器中調(diào)整框架大小?！具吙颉吭跒g覽器中查看框架時(shí)顯示或隱藏當(dāng)前框架的邊框?！具吙颉窟x項(xiàng)為【是】（顯示邊框）、【否】（隱藏邊框）和【默認(rèn)值】?！具吙蝾伾繛樗锌蚣艿倪吙蛟O(shè)置邊框顏色?！具吘鄬挾?高度】以像素為單位設(shè)置左、右/上、下邊距的寬/高度。模塊三其他頁(yè)面的制作任務(wù)描述使用Dreamweaver8打開(kāi)“各章節(jié)完成文檔\ch1-5-2\myweb”下的index.html文件，創(chuàng)建模板template.dwt，并基于模板完成班級(jí)主頁(yè)其他頁(yè)面的制作。完成各頁(yè)面之間的超級(jí)鏈接設(shè)置。利用【創(chuàng)建網(wǎng)站相冊(cè)】命令完成“班級(jí)相冊(cè)”頁(yè)面中“家庭成員”子頁(yè)面的制作。模塊三其他頁(yè)面的制作任務(wù)解析在Dreamweaver中，如果設(shè)計(jì)的頁(yè)面布局良好，頁(yè)面美觀，可以將頁(yè)面生成相應(yīng)的模板保存下來(lái)，在必要的時(shí)候可以直接套用該模板，從而可以迅速生成風(fēng)格統(tǒng)一網(wǎng)站其他頁(yè)面。將設(shè)計(jì)較好的網(wǎng)頁(yè)文件保存下來(lái)以備反復(fù)使用的文件為模板文件，模板文件的擴(kuò)展名為.dwt。使用模板文件可以使網(wǎng)站頁(yè)面風(fēng)格統(tǒng)一，系統(tǒng)性和整體性較強(qiáng)，也可以省去重復(fù)勞動(dòng)的麻煩，此外如果需要修改不