第二章-設(shè)計(jì)及實(shí)現(xiàn)

第二章設(shè)計(jì)與實(shí)現(xiàn)1第二章方法篇2.1網(wǎng)頁設(shè)計(jì)要素2.1.1網(wǎng)頁的基本視覺元素網(wǎng)頁設(shè)計(jì)是指在網(wǎng)頁制作中運(yùn)用平面設(shè)計(jì)的基本視覺元素進(jìn)行合理的組合構(gòu)成，從而達(dá)到信息傳達(dá)和審美的目的。網(wǎng)頁設(shè)計(jì)中涉及的視覺元素主要包括網(wǎng)站標(biāo)志、文字、圖形和圖像、色彩等。各視覺元素及其組合構(gòu)成方式，是網(wǎng)頁設(shè)計(jì)準(zhǔn)確傳遞信息以及符合視覺審美規(guī)律的基本要求。在設(shè)計(jì)過程中，設(shè)計(jì)師必須遵循構(gòu)圖的形式美法則，才能設(shè)計(jì)出更合理美觀的信息傳達(dá)形式。美的形式不僅可以感染受眾，還能使人們產(chǎn)生良好的形象記憶，從而更有效地達(dá)到表現(xiàn)網(wǎng)站主題內(nèi)容的設(shè)計(jì)目的。2第二章方法篇網(wǎng)頁是網(wǎng)站構(gòu)成的基本元素，而網(wǎng)頁的精彩與否與其版式風(fēng)格是緊密相關(guān)的。（1）網(wǎng)頁的風(fēng)格定位網(wǎng)頁設(shè)計(jì)首先要考慮風(fēng)格的定位。任何網(wǎng)頁的風(fēng)格都由其主題內(nèi)容決定，只有形式與內(nèi)容達(dá)到完美統(tǒng)一，才能實(shí)現(xiàn)更好的宣傳效果。目前網(wǎng)站的應(yīng)用范圍日益擴(kuò)大，幾乎涉及所有的行業(yè)，歸納起來大體可分為：新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教文化、娛樂藝術(shù)、電子商務(wù)、網(wǎng)絡(luò)數(shù)碼、醫(yī)療保健等。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)3第二章方法篇不同行業(yè)的網(wǎng)頁，應(yīng)體現(xiàn)出不同的風(fēng)格。例如：政府機(jī)關(guān)的網(wǎng)頁風(fēng)格一般較嚴(yán)謹(jǐn)莊重，而娛樂行業(yè)則活潑生動(dòng)，文化教育類的風(fēng)格則高雅大方，等等。網(wǎng)頁風(fēng)格的形成主要依賴于網(wǎng)頁的版式設(shè)計(jì)和頁面的色調(diào)處理，以及圖片與文字的組合形式等，因此，網(wǎng)頁的設(shè)計(jì)和制作者要具有一定的美術(shù)素質(zhì)和修養(yǎng)。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)4第二章方法篇（2）網(wǎng)頁的版式設(shè)計(jì)網(wǎng)頁的版式設(shè)計(jì)，是指在有限的顯示器屏幕空間上將視聽多媒體元素進(jìn)行有機(jī)的排列組合，是一種區(qū)別于傳統(tǒng)媒體的具有獨(dú)特風(fēng)格和藝術(shù)特色的視聽傳達(dá)方式。網(wǎng)頁在傳達(dá)信息的同時(shí)也使瀏覽者產(chǎn)生感官與精神上和諧的美的享受。為使網(wǎng)頁達(dá)到最佳的視覺效果，設(shè)計(jì)師需要反復(fù)推敲網(wǎng)頁版式的合理性，使瀏覽者有一個(gè)流暢的視覺體驗(yàn)。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)5第二章方法篇網(wǎng)頁的版式設(shè)計(jì)通常包括：視覺元素及其組織形式、頁面間的轉(zhuǎn)場以及網(wǎng)站的導(dǎo)航形式等?！耙曈X元素的組織”包括元素的大小和數(shù)量、表格的布局、散點(diǎn)組合與塊狀組合、主題形象的體現(xiàn)、留白效果的表現(xiàn)、圖與文的關(guān)系、曲線與直線的組織、水平線與垂直線以及斜線的比較，等等。根據(jù)不同的組織形式，可以將網(wǎng)頁的版式大致劃分為以下幾種類型：骨骼型、滿版型、分割型、中軸型、傾斜型、對(duì)稱型、焦點(diǎn)型、三角型、自由型。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)6第二章方法篇骨骼型網(wǎng)頁中骨骼型是一種規(guī)范、嚴(yán)謹(jǐn)?shù)姆指罘绞?，類似于?bào)刊的版式。常見的網(wǎng)頁骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。通常以豎向分欄居多。這種版式給人以和諧、理性的美。骨骼型版式常為綜合門戶、新聞媒體類網(wǎng)站所采用。如圖2-1所示。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)7第二章方法篇圖2-1該網(wǎng)站為世界新聞報(bào)網(wǎng)，采用三欄的結(jié)構(gòu)形式，清晰，有條理，富有彈性。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)8第二章方法篇滿版型滿版型頁面以圖像充滿整版。主要以圖像為訴求點(diǎn)，可將部分文字置于圖像之上。視覺傳達(dá)效果直觀而突出，給人以生動(dòng)大方的感覺。滿版型版式被各種網(wǎng)站所采用，其中以韓國網(wǎng)站居多。如圖2-2、圖2-3、圖2-4所示。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)9第二章方法篇圖2-2教育機(jī)構(gòu)網(wǎng)站采用實(shí)體圖為背景進(jìn)行滿幅構(gòu)圖，豐富的畫面給人以輕松、活潑、向上的感受。圖2-3采用卡通圖畫作背景，導(dǎo)航形式與背景內(nèi)容融為一體，形式統(tǒng)一，感覺輕松自然。圖2-4色彩鮮明，內(nèi)容形式活潑，整個(gè)畫面充滿了孩童般的陽光氣息，海面、白云元素的出現(xiàn)，使畫面更添空間感。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)10第二章方法篇分割型分割型版式指把整個(gè)頁面分成上下或左右兩部分，分別安排圖片或文字內(nèi)容。兩部分形成對(duì)比，使圖片部分感性而具表現(xiàn)力，文字部分則理性而具說服力?？梢哉{(diào)整圖片和文字所占的面積比例，來調(diào)節(jié)對(duì)比的強(qiáng)弱。如果圖片比例過大，文字字體過于纖細(xì)，段落疏松，會(huì)造成視覺心理的不平衡，顯得生硬。如果通過文字或圖片將分割線虛化處理，就會(huì)產(chǎn)生自然和諧的效果。分割型版式常被各類網(wǎng)站所采用。如圖2-5、圖2-6所示。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)11第二章方法篇圖2-5圖片與文字分割為上下兩部分，圖片一目了然，突出網(wǎng)站性質(zhì)，文字設(shè)計(jì)清新淡雅，給人以輕松舒適的感覺。圖2-6以象征主題內(nèi)容的高品質(zhì)圖像為主，色彩鮮亮奪目，突出健康食品的特征2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)12第二章方法篇中軸型中軸型版式指沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。中軸型版式為各類網(wǎng)站所采用。如圖2-7、圖2-8所示。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)13第二章方法篇圖2-7以火炬的形象為中軸線劃分整個(gè)頁面，卷曲的背景形式給人以較強(qiáng)的空間感。圖2-8用反差較大的背景色將頁面一分為二，突現(xiàn)產(chǎn)品性能的實(shí)體圖像，使頁面更顯生動(dòng)。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)14第二章方法篇傾斜型傾斜型版式是將頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動(dòng)感，引人注目。傾斜型版式為各類網(wǎng)站所采用。如圖2-9、圖2-10、圖2-11所示。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)15第二章方法篇圖2-9色彩協(xié)調(diào)，邊緣淡化，傾斜的頁面顯得輕松悠閑，體現(xiàn)了該網(wǎng)站的訴求特征。圖2-10傾斜的畫面形式突出網(wǎng)站的主題，增添動(dòng)感，強(qiáng)烈的藝術(shù)處理效果、斑駁的邊緣使網(wǎng)站突顯個(gè)性。圖2-11圖片與文字內(nèi)容均采用傾斜式，加以鮮明強(qiáng)烈的“可口可樂”元素，使畫面更具動(dòng)感，刺激人的感官。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)16第二章方法篇對(duì)稱型對(duì)稱型版式的頁面給人穩(wěn)定、嚴(yán)謹(jǐn)、理性的感覺。對(duì)稱分為絕對(duì)對(duì)稱和相對(duì)對(duì)稱。一般采用相對(duì)對(duì)稱的手法，以避免呆板。左右對(duì)稱的頁面版式比較常見。四角型對(duì)稱也是其中一種，指在頁面四角安排相應(yīng)的視覺元素。對(duì)稱型版式為各類網(wǎng)站所采用。如圖2-12、圖2-13所示。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)17第二章方法篇圖2-12以健康、明快的嫩綠色為背景將畫面上下分割，文字與圖片的結(jié)合，增添了真實(shí)感和趣味性。圖2-13紅黑兩色將畫面分為左右對(duì)稱的形式。不但背景對(duì)稱，畫面圖像也相對(duì)對(duì)稱，突出了頁面主題的氣氛。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)18第二章方法篇焦點(diǎn)型焦點(diǎn)型的網(wǎng)頁版式通過對(duì)瀏覽者視線的誘導(dǎo)，可以使頁面產(chǎn)生強(qiáng)烈的視覺效果，如集聚感或膨脹感等。焦點(diǎn)型分三種情況：中心——將圖片或文字置于頁面的視覺中心。向心——視覺元素引導(dǎo)瀏覽者的視線向頁面中心聚攏。離心——視覺元素引導(dǎo)瀏覽者的視線向外輻射。焦點(diǎn)型版式為各類網(wǎng)站使用。如圖2-14、圖2-15、圖2-16。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)19第二章方法篇圖2-14視覺元素環(huán)繞光盤圖形，引導(dǎo)瀏覽者的視線，色彩活躍，體現(xiàn)了網(wǎng)站的主題特征。圖2-15利用文字元素組成焦點(diǎn)形式，引導(dǎo)瀏覽者的視線向外輻射，富有趣味性。圖2-16利用瀏覽者操作鼠標(biāo)帶動(dòng)圖片形成視線引導(dǎo)的強(qiáng)烈效果，加以豐富的色彩，使畫面更具動(dòng)感、現(xiàn)代感，刺激人的感官。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)20第二章方法篇三角型三角型版式指網(wǎng)頁各視覺元素呈三角形或多角形排列。正三角形最具穩(wěn)定性，倒三角形則可產(chǎn)生動(dòng)感。側(cè)三角形構(gòu)成一種均衡版式，既安定又有動(dòng)感。三角型版式各類網(wǎng)站所采用。如圖2-17、圖2-18、圖2-19。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)21第二章方法篇圖2-17利用色彩劃分構(gòu)圖，側(cè)三角形構(gòu)成一種均衡版式，既安定又有動(dòng)感。圖2-18利用三塊版面將整個(gè)界面劃分成三角構(gòu)圖，整體顯得穩(wěn)定、均衡。圖2-19將兩個(gè)三角形分別放置在呼應(yīng)的對(duì)角上，配以標(biāo)志及導(dǎo)航，處理得當(dāng)，突顯主題內(nèi)容，使畫面更具動(dòng)感、現(xiàn)代感。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)22第二章方法篇自由型自由型版式的頁面具有活潑、輕快的氣氛。自由型版式也可應(yīng)用于多種網(wǎng)站。如圖2-20、圖2-21所示。

2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)23第二章方法篇圖2-20自由組合的活潑版式，夸張的人物形象，有趣的導(dǎo)航懸掛其中，這樣的搭配組合，讓瀏覽者樂于接受。圖2-21構(gòu)圖自由，形式獨(dú)特，色彩搭配協(xié)調(diào)，極富趣味性。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)24第二章方法篇

以上介紹的版式基本類型并不是固定不變的，在實(shí)際設(shè)計(jì)中，設(shè)計(jì)師可以根據(jù)網(wǎng)頁所要傳達(dá)的主題內(nèi)容來靈活地變化版式。在設(shè)計(jì)前要認(rèn)真分析網(wǎng)站的定位，在設(shè)計(jì)中要靈活把握版式結(jié)構(gòu)，才能更好地達(dá)到設(shè)計(jì)目的。2.1.2網(wǎng)頁的版式風(fēng)格設(shè)計(jì)25第二章方法篇點(diǎn)、線、面是構(gòu)成視覺空間的基本元素，是表現(xiàn)視覺形象的基本形式語言。一個(gè)按鈕或文字是一個(gè)點(diǎn)，幾個(gè)按鈕或者幾個(gè)文字的排列則形成線。線的移動(dòng)、數(shù)行文字或者一塊空白可以理解為面。點(diǎn)、線、面相互依存、相互作用，便可組合成各種各樣的視覺形象以及千變?nèi)f化的視覺空間。在設(shè)計(jì)中處理好三者的關(guān)系，合理地運(yùn)用形式語言，不僅可以創(chuàng)造出獨(dú)特的網(wǎng)頁視覺形象，充分地表現(xiàn)網(wǎng)頁的主題內(nèi)容，還可以更好地吸引瀏覽者。點(diǎn)、線、面的運(yùn)用和表現(xiàn)，如圖2-22所示。2.1.3.形式語言的運(yùn)用26第二章方法篇2.1.3.形式語言的運(yùn)用27第二章方法篇（1）網(wǎng)頁形態(tài)中點(diǎn)的視覺構(gòu)成點(diǎn)是視覺構(gòu)成的基本元素之一。點(diǎn)是相對(duì)而言的，在網(wǎng)頁中，把一個(gè)單獨(dú)而細(xì)小的形象稱為點(diǎn)，并不只有圓點(diǎn)才叫點(diǎn)。比如一個(gè)漢字、一個(gè)按鈕、一個(gè)標(biāo)志等自由形，在頁面中都可以是點(diǎn)。點(diǎn)是相對(duì)線和面而存在的元素。

2.1.3.形式語言的運(yùn)用28第二章方法篇在設(shè)計(jì)中，一個(gè)網(wǎng)頁往往需要有數(shù)量不等、形狀各異的點(diǎn)來裝飾畫面。點(diǎn)的形狀、方向、大小、位置、聚集、發(fā)散，能夠給人帶來不同的心理感受。例如在導(dǎo)航標(biāo)題后加個(gè)點(diǎn)，在每段文字段首加方或者圓的點(diǎn)，能使頁面顯得活潑生動(dòng)，甚至可以起到畫龍點(diǎn)睛的作用。點(diǎn)的運(yùn)用和表現(xiàn)，如圖2-23所示。2.1.3.形式語言的運(yùn)用29第二章方法篇圖2-23這是同一網(wǎng)站的不同頁面，點(diǎn)以不同的構(gòu)成形式出現(xiàn)。上圖，將點(diǎn)有規(guī)律地排列組合，布滿整個(gè)畫面，并構(gòu)成網(wǎng)站的導(dǎo)航系統(tǒng)；中圖，根據(jù)內(nèi)容的需要，點(diǎn)以不同的色彩形式出現(xiàn)在畫面中，自由活潑；下圖，點(diǎn)構(gòu)成的導(dǎo)航被放大至近似于面排列在頁面中，背景又出現(xiàn)了不同形式的點(diǎn)，整個(gè)畫面豐富活潑，卻不雜亂。該網(wǎng)站總體來講，構(gòu)圖獨(dú)特，形式自由，色彩搭配協(xié)調(diào)，極富趣味性。2.1.3.形式語言的運(yùn)用30第二章方法篇（2）網(wǎng)頁形態(tài)中線的視覺構(gòu)成線是點(diǎn)移動(dòng)的軌跡，在頁面上起到強(qiáng)調(diào)、分割、引導(dǎo)視線的作用。不同方向、長度、寬度、形態(tài)的線會(huì)給人以不同的感受。垂直的線顯得平穩(wěn)、挺拔；弧線流暢、輕盈；曲線給人以動(dòng)感、活力；粗線條可以傳遞粗獷、勇敢、陽剛感；細(xì)線條可以傳遞銳利、敏感、速度感。在設(shè)計(jì)中，利用線對(duì)頁面空間進(jìn)行分割的方法也很普遍。線對(duì)空間的分割可以產(chǎn)生各種特征的面。線的運(yùn)用和表現(xiàn)，如圖2-24所示。2.1.3.形式語言的運(yùn)用31第二章方法篇圖2-24這一網(wǎng)站運(yùn)用線條勾勒出不同形態(tài)，以構(gòu)成豐富的畫面?；钴S的線條與圖片的結(jié)合貫穿始終，與主題內(nèi)容配合得恰到好處。每個(gè)頁面的各種元素相互呼應(yīng)，統(tǒng)一協(xié)調(diào)又不乏趣味，給整個(gè)網(wǎng)站增添了活力和感情色彩。2.1.3.形式語言的運(yùn)用32第二章方法篇（3）網(wǎng)頁形態(tài)中面的視覺構(gòu)成面是網(wǎng)頁形態(tài)中常用的構(gòu)成元素，點(diǎn)和線的密集擴(kuò)張軌跡都可構(gòu)成面。面的大小、形態(tài)、變化關(guān)系到頁面的整體布局。在網(wǎng)頁設(shè)計(jì)中，表格和框架是用來分割頁面的，采用面的分割、組合、虛實(shí)交替等方式可以使網(wǎng)頁主題明確、層次分明，產(chǎn)生井然有序的和諧效果。面的運(yùn)用和表現(xiàn)，如圖2-25所示。2.1.3.形式語言的運(yùn)用33第二章方法篇圖2-25這一網(wǎng)站采用不同色彩變化的斜面進(jìn)行布局，每個(gè)斜面都有區(qū)別于其他面的細(xì)節(jié)處理，并且都代表著不同的欄目內(nèi)容，構(gòu)成導(dǎo)航系統(tǒng)，點(diǎn)擊進(jìn)入下一級(jí)頁面，又出現(xiàn)了不同的面的組合形式，但整體上都保持著和諧統(tǒng)一。畫面豐富，導(dǎo)航靈活，每個(gè)頁面的各元素相互呼應(yīng)，相互襯托。2.1.3.形式語言的運(yùn)用34第二章方法篇(1)色彩基礎(chǔ)概念了解從色彩學(xué)上講，色彩是由色相、明度、純度三個(gè)要素組成的。色彩的三要素及色彩原理對(duì)于網(wǎng)頁設(shè)計(jì)是至關(guān)重要的。2.1.4.色彩原理的運(yùn)用35第二章方法篇色相——指不同波長的顏色構(gòu)成的各種色彩相貌，是顏色的基本特征。明度——指色彩的明暗程度。通常又稱亮度、光度、深淺度。純度——純度是指顏色的純粹程度，也稱飽和度，即與中性灰的參雜程度。對(duì)比色——色環(huán)中位置相對(duì)的兩種色彩，通常也指兩種可以明顯區(qū)分的色彩。相近色——色環(huán)中相鄰的三種顏色。無彩色——只有明度特征，沒有色相和飽和度的區(qū)別，是指黑、白、灰系統(tǒng)色。有彩色——指黑、白、灰以外的色彩。2.1.4.色彩原理的運(yùn)用36第二章方法篇（2）網(wǎng)頁的色彩設(shè)計(jì)分析色彩在視覺系統(tǒng)中的重要性大于形狀、面積、位置等因素。在網(wǎng)頁設(shè)計(jì)中，色彩給瀏覽者帶來的視覺沖擊力常大于版式等因素，其表現(xiàn)力直接影響到形式的統(tǒng)一與美觀。很多網(wǎng)站以成功的色彩搭配令人過目不忘。但剛接觸網(wǎng)頁設(shè)計(jì)時(shí)，往往不容易駕馭好網(wǎng)頁的顏色搭配。前面簡單介紹了色彩的基本概念，下面結(jié)合網(wǎng)頁設(shè)計(jì)來探索色彩在其中的作用、特征體現(xiàn)以及搭配規(guī)律等。2.1.4.色彩原理的運(yùn)用37第二章方法篇色彩在網(wǎng)頁設(shè)計(jì)中的作用：組織、劃分——利用色彩進(jìn)行信息組織、區(qū)域劃分與識(shí)別，便于瀏覽者操作和分辨，減少認(rèn)知負(fù)荷。突出、強(qiáng)調(diào)——利用色彩的變化對(duì)內(nèi)容進(jìn)行必要的強(qiáng)調(diào)，使網(wǎng)頁內(nèi)容的層次更分明、條理更清晰。提示、警示——利用色彩的象征性表現(xiàn)內(nèi)容，例如綠色按鈕表示“開始”，紅色表示“停止”等。增添吸引力——利用美觀合理的色彩搭配吸引瀏覽者的眼球，激起其興趣。2.1.4.色彩原理的運(yùn)用38第二章方法篇

在網(wǎng)頁設(shè)計(jì)中，通常將色彩按其作用劃分為以下幾種：背景色——用于網(wǎng)頁的背景顏色，有時(shí)即為基本色。基本色——即網(wǎng)頁的主色調(diào)。一般占據(jù)面積較大，在整體網(wǎng)站上起到體現(xiàn)主題內(nèi)容及風(fēng)格的重要作用。輔助色——輔助基本色的次要顏色，起到配合基本色營造整體氛圍的作用。強(qiáng)調(diào)色——用于突出、強(qiáng)調(diào)標(biāo)志性內(nèi)容的色彩。2.1.4.色彩原理的運(yùn)用39第二章方法篇色彩均衡的體現(xiàn)要使網(wǎng)站看上去舒適、協(xié)調(diào)，除了文字、圖片等的合理排版，色彩的均衡也是非常重要的。一個(gè)網(wǎng)站不可能單一地運(yùn)用某種顏色，所以必須把握好色彩的均衡性。色彩的均衡，包括色彩的位置、色彩所占的比例、面積等。例如大面積色彩的明度以及鮮艷明亮的色彩面積應(yīng)小一點(diǎn)，讓人感覺舒適、不刺眼等。在網(wǎng)頁設(shè)計(jì)中，一定要合理地運(yùn)用色彩，使其在頁面上呈現(xiàn)出一種均衡美的視覺效果。2.1.4.色彩原理的運(yùn)用40第二章方法篇

色彩的心理聯(lián)想不同的色彩在人們的生活中帶有不同的感情和文化內(nèi)涵。比如紅色讓人聯(lián)想到太陽、玫瑰、喜慶、熱鬧、興奮；白色象征純潔、干凈、明快；黑色代表深沉、神秘、壓抑、寂靜；紫色象征著女性化、高雅、浪漫；藍(lán)色象征天空、高科技、穩(wěn)重、理智；橙色代表歡快、甜美、收獲、時(shí)尚；綠色代表了自然、活力、舒適、希望；等等。色彩的含義不是一成不變的，在特定的情景下，同種色彩給人的感受也隨之變化。

2.1.4.色彩原理的運(yùn)用41第二章方法篇不同色彩的運(yùn)用和體現(xiàn)。如圖2-26、圖2-27、圖2-28、圖2-29所示。2.1.4.色彩原理的運(yùn)用42第二章方法篇黑白灰的運(yùn)用黑白灰是萬能色，可以和任意一種色彩搭配。在設(shè)計(jì)過程中,如果兩種色彩的搭配不協(xié)調(diào)，可試加入黑色或者灰色，或許會(huì)得到意想不到的效果。對(duì)一些明度較高的網(wǎng)站，適當(dāng)配以黑色，可調(diào)節(jié)其明度效果，呈現(xiàn)均衡。白色是網(wǎng)站使用最普遍的一種顏色。很多網(wǎng)站留出大面積白色空間，作為網(wǎng)站組成部分，即通常所說的留白。很多設(shè)計(jì)性網(wǎng)站較多運(yùn)用留白藝術(shù)。留白可給人遐想的空間，讓人感覺心情舒適、暢快。恰當(dāng)?shù)牧舭讓?duì)協(xié)調(diào)頁面的均衡有很好的效果。

2.1.4.色彩原理的運(yùn)用43第二章方法篇黑白灰的運(yùn)用和體現(xiàn)，如圖2-30所示2.1.4.色彩原理的運(yùn)用44第二章方法篇基于對(duì)比色的配色對(duì)比色是指色環(huán)中位置相對(duì)的兩種色彩，通常也指兩種可以明顯區(qū)分的色彩。對(duì)比色在網(wǎng)頁設(shè)計(jì)中用得很普遍。由于對(duì)比色有較強(qiáng)烈的分離性，在設(shè)計(jì)網(wǎng)頁時(shí)恰當(dāng)?shù)剡\(yùn)用對(duì)比色，不僅能拉開色彩的距離感，而且能表現(xiàn)出特殊的視覺對(duì)比與平衡效果。如圖2-31、圖2-32所示。2.1.4.色彩原理的運(yùn)用45第二章方法篇2.1.4.色彩原理的運(yùn)用46第二章方法篇

基于相近色的配色相近色的搭配給人以自然、統(tǒng)一、和諧的視覺感受。相近色在網(wǎng)頁設(shè)計(jì)中最為常用。如圖2-33、圖2-34、圖2-35所示。2.1.4.色彩原理的運(yùn)用47第二章方法篇2.1.4.色彩原理的運(yùn)用48第二章方法篇

有彩色與無彩色的搭配有彩色與無彩色搭配的主要作用是強(qiáng)調(diào)網(wǎng)站的主題內(nèi)容或控制畫面色彩的平衡。如圖2-36、圖2-37所示。2.1.4.色彩原理的運(yùn)用49第二章方法篇2.1.4.色彩原理的運(yùn)用50第二章方法篇色彩小結(jié)了解了色彩的基本概念及其在網(wǎng)頁設(shè)計(jì)中的搭配規(guī)律后，具體運(yùn)用時(shí)，還需注意：一個(gè)網(wǎng)站不可能運(yùn)用單一的某種顏色，因?yàn)檫@樣會(huì)讓人感覺單調(diào)、乏味；但也不能將所有顏色都運(yùn)用上，因?yàn)槟菢訒?huì)讓人感覺輕浮、花哨，主題不突出，沒有方向。通常使用一種或兩種主題色，配以輔助色，一個(gè)頁面盡量不要超過四種色彩。

2.1.4.色彩原理的運(yùn)用51第二章方法篇在設(shè)計(jì)過程中，設(shè)計(jì)背景色時(shí)，要考慮其與前景文字的搭配。一般網(wǎng)站側(cè)重的是文字，所以背景可以選擇純度或者明度較低的色彩，文字用較為突出的亮色，清晰可見，讓人一目了然。有些網(wǎng)站為給瀏覽者留下深刻印象，處理背景時(shí)很夸張。比如一個(gè)空白頁的某部分用了大面積的明亮色塊，這時(shí)文字的色彩就要選擇暗色系列的，這樣文字才能與背景分開層次，不致于影響瀏覽者閱讀內(nèi)容。

2.1.4.色彩原理的運(yùn)用52第二章方法篇標(biāo)志是宣傳網(wǎng)站的重要組成部分，所以在頁面上要突出顯示，標(biāo)志的色彩跟網(wǎng)頁的主題色層次要拉開。有時(shí)候?yàn)榱烁玫赝怀鰳?biāo)志，也可適當(dāng)使用對(duì)比色。導(dǎo)航、小標(biāo)題是網(wǎng)站的指路燈。瀏覽者要在網(wǎng)頁間跳轉(zhuǎn)、了解網(wǎng)站的結(jié)構(gòu)及內(nèi)容，必須通過導(dǎo)航或者小標(biāo)題引導(dǎo)來實(shí)現(xiàn)。這時(shí)可以使用稍具跳躍性的色彩來加以強(qiáng)調(diào)，以吸引視線，讓人感覺網(wǎng)站功能清晰明了、層次分明，不致于迷失方向。2.1.4.色彩原理的運(yùn)用53第二章方法篇網(wǎng)頁細(xì)節(jié)的設(shè)計(jì)可以體現(xiàn)出一個(gè)網(wǎng)站的品質(zhì)，及其對(duì)于瀏覽者的態(tài)度，每個(gè)網(wǎng)站都有自己設(shè)計(jì)精細(xì)的獨(dú)特之處。下面我們從網(wǎng)站的導(dǎo)航方式及l(fā)oading畫面的設(shè)計(jì)兩個(gè)方面來了解一下網(wǎng)頁設(shè)計(jì)品質(zhì)的細(xì)節(jié)體現(xiàn)。如圖2-38、圖2-39、圖2-40、圖2-41、圖2-42、圖2-43、圖2-44、圖2-45所示，不同的網(wǎng)站各自采用不同的導(dǎo)航方式及l(fā)oading畫面設(shè)計(jì)，精美別致，給人耳目一新的感覺。2.1.5.網(wǎng)頁設(shè)計(jì)品質(zhì)的細(xì)節(jié)體現(xiàn)54第二章方法篇2.1.5.網(wǎng)頁設(shè)計(jì)品質(zhì)的細(xì)節(jié)體現(xiàn)55第二章方法篇2.1.5.網(wǎng)頁設(shè)計(jì)品質(zhì)的細(xì)節(jié)體現(xiàn)56第二章方法篇2.2網(wǎng)站設(shè)計(jì)要素2.2.1.網(wǎng)站設(shè)計(jì)前的考慮（1）使用者優(yōu)先的觀念無論是在設(shè)計(jì)網(wǎng)站之前、設(shè)計(jì)過程中，還是設(shè)計(jì)完畢后，都要謹(jǐn)記一條準(zhǔn)則，即：使用者優(yōu)先。如果沒有得到使用者的接受和認(rèn)可，任何網(wǎng)站都會(huì)失去實(shí)際意義。（2）考慮多數(shù)人的連線狀況在設(shè)計(jì)網(wǎng)站時(shí)必須以普遍的連線狀況為參考量，避免放置大量會(huì)加重塞車情況或讓人等得不耐煩的鏈接。在網(wǎng)站整體設(shè)計(jì)完成之后,最好上網(wǎng)測試一下連線情況。57第二章方法篇（3）考慮使用者的瀏覽器為使大多數(shù)使用者可以無障礙地瀏覽網(wǎng)站，最好采用瀏覽器都可閱讀格式，避免使用只有個(gè)別瀏覽器可以支持的格式或其他程序技巧。如果為了展現(xiàn)網(wǎng)站設(shè)計(jì)的高超技術(shù)效果又不想放棄潛在受眾，可考慮在主頁設(shè)置幾種觀賞切換模式（如純文字模式、Frame模式、Java模式等），供瀏覽者自行選擇。2.2.1.網(wǎng)站設(shè)計(jì)前的考慮58第二章方法篇

2.2.2.網(wǎng)站主題設(shè)計(jì)的思維流程1.確定網(wǎng)站主題做網(wǎng)站，首先必須確定網(wǎng)站的主題。在選擇主題和內(nèi)容時(shí)，主題定位要小，內(nèi)容要精。不要試圖做一個(gè)包羅萬象的網(wǎng)站，這樣往往會(huì)使網(wǎng)站失去特色。2.確定網(wǎng)站界面界面是網(wǎng)站給瀏覽者的第一印象，往往決定著網(wǎng)站的可看性。在確定網(wǎng)站的界面時(shí)，要注意欄目與板塊編排。構(gòu)建網(wǎng)站就好比寫論文，首先要列出提綱，做到主題明確、層次清晰。剛接觸網(wǎng)站設(shè)計(jì)，容易犯的錯(cuò)誤就是：確定題材后立刻開始制作，不進(jìn)行合理規(guī)劃，致使網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，板塊混亂。著手制作網(wǎng)頁前，要仔細(xì)考慮每一個(gè)欄目和板塊的組織編排。59第二章方法篇3.確定網(wǎng)站CI形象所謂CI(英文corporateidentity的縮寫)，是指通過視覺設(shè)計(jì)來統(tǒng)一企業(yè)的形象。一個(gè)杰出的網(wǎng)站和實(shí)體企業(yè)一樣，也需要整體的形象包裝和設(shè)計(jì)。準(zhǔn)確的、有創(chuàng)意的CI設(shè)計(jì)，可以使網(wǎng)站的宣傳推廣取得事半功倍的效果。網(wǎng)站主題和名稱確定后，需要思考的就是網(wǎng)站的CI。網(wǎng)站CI包括：網(wǎng)站標(biāo)志、網(wǎng)站色彩、標(biāo)準(zhǔn)字體、網(wǎng)站宣傳語等。2.2.2.網(wǎng)站主題設(shè)計(jì)的思維流程60第二章方法篇設(shè)計(jì)網(wǎng)站標(biāo)志(logo)logo是指網(wǎng)站的標(biāo)志，可以是中文、英文字母或符號(hào)、圖案等。標(biāo)志的設(shè)計(jì)創(chuàng)意一般來自于網(wǎng)站的名稱和內(nèi)容，如將網(wǎng)站內(nèi)有代表性的圖形圖案（人物、動(dòng)物、植物、物品），加以卡通化或藝術(shù)化處理作為標(biāo)志出現(xiàn)。最常用的方式是用網(wǎng)站名稱作標(biāo)志，采用不同的字體、字母的變形和組合制作出網(wǎng)站的標(biāo)志。2.2.2.網(wǎng)站主題設(shè)計(jì)的思維流程61第二章方法篇設(shè)計(jì)網(wǎng)站色彩網(wǎng)站給人的第一印象來自不同的色彩搭配效果所產(chǎn)生的視覺沖擊，網(wǎng)站的色彩可能直接影響到瀏覽者的情緒?！皹?biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸網(wǎng)站內(nèi)涵的色彩，用于網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和基本色上，給人以和諧統(tǒng)一的感覺。至于其他色彩也可搭配使用，作為點(diǎn)綴和襯托，但絕不能喧賓奪主。2.2.2.網(wǎng)站主題設(shè)計(jì)的思維流程62第二章方法篇設(shè)計(jì)網(wǎng)站字體和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、主菜單的特有字體。一般網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)網(wǎng)站的風(fēng)格，可根據(jù)主題需要選擇藝術(shù)化字體。需要注意的是：非默認(rèn)字體只能采用圖片的形式，以避免因?yàn)g覽者的計(jì)算機(jī)沒有安裝特殊字體，而影響設(shè)計(jì)效果。設(shè)計(jì)網(wǎng)站宣傳語即網(wǎng)站的精神主旨或網(wǎng)站的目標(biāo)，可用富有氣勢的一句話或一個(gè)詞來高度概括，以達(dá)到對(duì)外宣傳的效果。2.2.2.網(wǎng)站主題設(shè)計(jì)的思維流程63第二章方法篇4.確定網(wǎng)站風(fēng)格風(fēng)格是指網(wǎng)站帶給瀏覽者的綜合感受，包括網(wǎng)站的CI、版面布局、瀏覽方式、交互性、語氣等因素，不管是哪些因素，要能夠使瀏覽者明確判斷出網(wǎng)站是獨(dú)特的。網(wǎng)站的風(fēng)格可以是平易近人、生動(dòng)活潑、溫文儒雅等。風(fēng)格獨(dú)特的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站看到的是信息的堆砌；風(fēng)格獨(dú)特的網(wǎng)站可使瀏覽者獲得除內(nèi)容外的更感性的認(rèn)識(shí)，比如網(wǎng)站的品位、對(duì)瀏覽者的態(tài)度等。2.2.2.網(wǎng)站主題設(shè)計(jì)的思維流程64第二章方法篇5.選擇有創(chuàng)意的內(nèi)容選擇有創(chuàng)意的內(nèi)容，其目的是為了更好地宣傳與推廣網(wǎng)站。主題內(nèi)容是網(wǎng)站的根本所在，內(nèi)容第一是網(wǎng)站成功的關(guān)鍵，如果內(nèi)容空洞，即使頁面再精美，仍然會(huì)失去真正的意義。2.2.2.網(wǎng)站主題設(shè)計(jì)的思維流程65第二章方法篇網(wǎng)站設(shè)計(jì)的元素主要指視聽元素，通常包括：文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、導(dǎo)航工具、背景音樂、動(dòng)態(tài)影像等。無論是文字、圖形、動(dòng)畫，還是音頻、視頻，設(shè)計(jì)師所要考慮的是如何將這些元素以感人的形式放進(jìn)網(wǎng)頁里。2.2.3.網(wǎng)站設(shè)計(jì)的元素66第二章方法篇2.3網(wǎng)站設(shè)計(jì)的實(shí)現(xiàn)2.3.1.主題案例五：網(wǎng)頁基本視覺元素分析與制作技巧（1）視覺元素之一：網(wǎng)站導(dǎo)航分析網(wǎng)站的導(dǎo)航條可以引導(dǎo)瀏覽者迅速地找到有用的信息。目前在網(wǎng)頁設(shè)計(jì)中，導(dǎo)航條的形式很豐富，最常見的是在網(wǎng)站中所有網(wǎng)頁的上方放置菜單條，如圖2-46所示。其他常見的形式還有比較隨意的，如圖2-47所示；表現(xiàn)另類個(gè)性、追求特殊藝術(shù)效果的，如圖4-48；文字與圖形相結(jié)合的，如圖2-49、圖2-50所示。在設(shè)計(jì)過程中，我們應(yīng)依據(jù)網(wǎng)站風(fēng)格與內(nèi)容的需要合理地設(shè)計(jì)導(dǎo)航條的形式。如需要特殊藝術(shù)效果的導(dǎo)航形式，則可利用Photoshop軟件進(jìn)行圖片化處理。

67第二章方法篇以圖2-47、圖2-48為例，這兩種導(dǎo)航及背景都體現(xiàn)了Photoshop軟件中畫筆工具的藝術(shù)處理效果。畫筆效果的制作過程簡述如下：a.將圖片轉(zhuǎn)到通道面板,新建通道Alpha1；b.利用套索工具在通道里畫出所需形狀，并填充色彩；c.運(yùn)用濾鏡"畫筆描邊"中的"噴色描邊"，設(shè)置效果參數(shù)；d.回到圖層，打開"選擇"菜單下的"載入選區(qū)"，繼而選擇通道"Alpha1"，填充相應(yīng)色彩即可。上述提示僅為大致過程，學(xué)習(xí)者在設(shè)計(jì)操作時(shí)可反復(fù)試驗(yàn)，注意細(xì)節(jié)處理，直到實(shí)現(xiàn)網(wǎng)站理想的視覺效果。2.3.1.主題案例五：網(wǎng)頁基本視覺元素分析與制作技巧68第二章方法篇2.3.1.主題案例五：網(wǎng)頁基本視覺元素分析與制作技巧69第二章方法篇（２）視覺元素之二：網(wǎng)站標(biāo)志分析網(wǎng)頁標(biāo)志是網(wǎng)站獨(dú)有的傳媒符號(hào)，一般出現(xiàn)在站點(diǎn)的頁面上方，是網(wǎng)站內(nèi)涵的集中體現(xiàn)。網(wǎng)站標(biāo)志最重要的作用是傳遞網(wǎng)站的定位、表達(dá)網(wǎng)站的理念，便于人們識(shí)別，它廣泛用于網(wǎng)站的宣傳等。一個(gè)富有視覺沖擊力的網(wǎng)站標(biāo)志設(shè)計(jì)，會(huì)直接影響瀏覽者對(duì)網(wǎng)站的判斷，特別是網(wǎng)站推廣。標(biāo)志設(shè)計(jì)追求的是：以簡潔的符號(hào)化視覺藝術(shù)形象向人們傳達(dá)網(wǎng)站的主題和理念。2.3.1.主題案例五：網(wǎng)頁基本視覺元素分析與制作技巧70第二章方法篇網(wǎng)站標(biāo)志的設(shè)計(jì)手法很多，例如：表象性手法、表征性手法、借喻性手法、標(biāo)識(shí)性手法、卡通化手法、幾何形構(gòu)成手法、漸變推移手法。在實(shí)際運(yùn)用中，標(biāo)識(shí)性手法、卡通化手法和幾何形構(gòu)成手法最為常用。標(biāo)識(shí)性手法是指用網(wǎng)站名稱文字或拼音字母的符號(hào)來進(jìn)行設(shè)計(jì)的方法，如圖2-51所示?？ㄍɑ址ㄊ侵竿ㄟ^夸張、幽默的卡通圖像來設(shè)計(jì)標(biāo)志的方法，如圖2-52所示。幾何形構(gòu)成手法是指用點(diǎn)、線、面等形式語言來設(shè)計(jì)標(biāo)志的方法，如圖2-53所示。2.3.1.主題案例五：網(wǎng)頁基本視覺元素分析與制作技巧71第二章方法篇2.3.1.主題案例五：網(wǎng)頁基本視覺元素分析與制作技巧72第二章方法篇（1）星巴克咖啡中國網(wǎng)站頁面設(shè)計(jì)分析與制作技巧圖2-54所示的網(wǎng)站為星巴克咖啡中國網(wǎng)站。首先，這一網(wǎng)站的布局形式符合其主題需要，標(biāo)志元素出現(xiàn)在每一幅頁面上，以突現(xiàn)主題。其次，頁面以實(shí)體店場景為背景，體現(xiàn)網(wǎng)站的性質(zhì)。瀏覽者的鼠標(biāo)經(jīng)過相應(yīng)的導(dǎo)航元素，場景便會(huì)隨之改變。人性化的設(shè)計(jì)將瀏覽者帶入到一個(gè)逼真的虛擬環(huán)境中，趣味性十足。網(wǎng)站背景采用了富有肌理效果的底紋，使網(wǎng)站具有獨(dú)特的色彩味道。當(dāng)網(wǎng)站的整體版式風(fēng)格形成后，在頁面下方放置卡通元素加以細(xì)節(jié)處理，使畫面豐富、有趣、不呆板。2.3.2.主題案例六：網(wǎng)站頁面設(shè)計(jì)分析與制作技巧73第二章方法篇2.3.2.主題案例六：網(wǎng)站頁面設(shè)計(jì)分析與制作技巧74第二章方法篇（2）星巴克咖啡韓國網(wǎng)站頁面設(shè)計(jì)分析與制作技巧利用Photoshop制作具有“燒紙邊緣效果”的背景底紋的操作小技巧有：使用套索工具繪制邊緣帶齒的不規(guī)則圖形；進(jìn)行快速蒙版的操作；選擇區(qū)域的加減操作；高斯模糊濾鏡的應(yīng)用；色調(diào)/飽和度校正的設(shè)置。如圖2-55所示。上述提示是制作的大概過程，學(xué)習(xí)者在設(shè)計(jì)操作時(shí)要注意細(xì)節(jié)處理，反復(fù)嘗試。2.3.2.主題案例六：網(wǎng)站頁面設(shè)計(jì)分析與制作技巧75第二章方法篇2.3.2.主題案例六：網(wǎng)站頁面設(shè)計(jì)分析與制作技巧76第二章方法篇2.4基于設(shè)計(jì)的網(wǎng)站制作

通過前面章節(jié)的學(xué)習(xí)，學(xué)習(xí)者已經(jīng)能夠使用Dreamweaver制作具有一定功能的圖文并排網(wǎng)頁，但是這樣制作出來的網(wǎng)頁很難有整體的視覺效果，例如案例四。當(dāng)然也可以利用Photoshop設(shè)計(jì)不具有任何網(wǎng)頁功能的頁面效果圖，例如案例六。但是效果圖始終只是圖片，不能作為網(wǎng)頁來使用。通過這一節(jié)的講解，學(xué)習(xí)者將能夠把這些通過Photoshop設(shè)計(jì)的網(wǎng)頁效果圖變?yōu)閷?shí)實(shí)在在的擴(kuò)展名為.html的網(wǎng)頁文件，在不破壞視覺效果的基礎(chǔ)上，實(shí)現(xiàn)網(wǎng)頁中的一些基本功能，如導(dǎo)航、動(dòng)畫、超鏈接等。77第二章方法篇切片工具的使用要把一張效果圖變?yōu)榫W(wǎng)頁，需要使用Photoshop中的切片工具，如左圖，使用切片工具可以把圖片切分成很多切片。其中操作者主動(dòng)切出來的切片叫作用戶切片，切片標(biāo)識(shí)為藍(lán)色，可以通過切片選取工具來改變用戶切片的大小和位置。其余的切片叫作自動(dòng)切片，切片標(biāo)識(shí)為灰色，如下圖。自動(dòng)切片不能被直接修改，必須提升為用戶切片后才能修改，切片選項(xiàng)是精確調(diào)整切片大小和位置的.78第二章方法篇2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面

案例要點(diǎn)—切片工具使用，切割規(guī)則，存儲(chǔ)為web所用格式的設(shè)置。

目標(biāo)描述—了解歡迎頁面切割的目的，掌握切割的方法，初步掌握結(jié)合使用Photoshop和Dreamweaver來完成網(wǎng)站歡迎頁面的制作。當(dāng)一張效果圖被切分為大大小小的切片后，通過Photoshop“文件”菜單中的“存儲(chǔ)為web所用格式”，這張效果圖將自動(dòng)生成.html的網(wǎng)頁。79第二章方法篇案例實(shí)現(xiàn)

如圖2－58，這是一個(gè)小型網(wǎng)站的歡迎頁面設(shè)計(jì)圖。圖2－582.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面80第二章方法篇通過Photoshop的切片工具切割成如圖2－59的樣式，在硬盤上建立一個(gè)站點(diǎn)文件夾website圖2－59切片圖2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面81第二章方法篇使用Photoshop“文件”菜單下的“存儲(chǔ)為web所用格式”，彈出如圖2－60的對(duì)話框。使用該對(duì)話框左上角的縮放工具先把整張圖縮小，然后使用切片選擇工具把整張圖所有的切片全部框選，設(shè)置成JPEG格式，品質(zhì)設(shè)置為100。圖2－60切片設(shè)置2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面82第二章方法篇設(shè)置完成后點(diǎn)擊其右上角的存儲(chǔ)，彈出如圖2－61的對(duì)話框，選擇保存在預(yù)先建立的站點(diǎn)文件夾website下，保存類型選擇“HTML和（*.html）”，命名為index.html，點(diǎn)擊保存。圖2－61保存設(shè)置2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面83第二章方法篇保存后website文件夾下將自動(dòng)生成一個(gè)images文件夾，用來保存切片生成的單獨(dú)圖片，同時(shí)還自動(dòng)生成了index.html的網(wǎng)頁文件。使用Dreamweaver打開index.html后發(fā)現(xiàn)，這些單獨(dú)的切片圖片通過一張隱形表格（見注解）無縫地拼接在一起，看不出任何切割的痕跡。這些工作由Photoshop自動(dòng)完成，這樣就實(shí)現(xiàn)了效果圖向網(wǎng)頁文件的轉(zhuǎn)化。另外，如果需要改變存儲(chǔ)圖片的文件夾的名稱（默認(rèn)是images）、切片圖片的命名方式等設(shè)置，使其符合站點(diǎn)整體規(guī)劃，也可以在圖2－61的設(shè)置里選“其他”，將彈出如圖2－62的對(duì)話框，可在其中修改相關(guān)設(shè)置。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面84第二章方法篇

另外，如果需要改變存儲(chǔ)圖片的文件夾的名稱（默認(rèn)images）、切片圖片的命名方式等設(shè)置，使其符合站點(diǎn)整體規(guī)劃，也可以在圖2－61的設(shè)置里選擇“其他”，將彈出如圖2－62的對(duì)話框，可在其中修改相關(guān)設(shè)置。注：隱形表格就是表格的填充、間距、邊框值都為0，網(wǎng)頁中絕大多數(shù)排版都使用這種表格。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面85第二章方法篇本案例在Dreamweaver中的后期處理頁面整體居中由于最初設(shè)計(jì)圖的大小比屏幕的分辨率小，在IE里預(yù)覽由Photoshop自動(dòng)生成的頁面index.html時(shí)，整個(gè)頁面會(huì)處于屏幕的左上角。即使設(shè)置表格的對(duì)齊屬性為居中，也只能實(shí)現(xiàn)在水平方向上居中。怎樣才能讓設(shè)計(jì)圖處于屏幕的絕對(duì)中間呢？首先，選中整個(gè)表格，使用Ctrl+X剪切，然后在剩下的空白頁面上插入一張1行1列的表格，表格的寬和高都設(shè)置成100%，填充、間距、邊框值都設(shè)為0，在這個(gè)1行1列的表格里面使用Ctrl+V，把剛才剪切的包含設(shè)計(jì)圖的表格粘貼進(jìn)來，對(duì)齊屬性設(shè)置為居中。按F12鍵在IE中預(yù)覽，會(huì)發(fā)現(xiàn)無論屏幕多大，設(shè)計(jì)圖都已經(jīng)絕對(duì)居中了。最后設(shè)置頁面背景顏色為#C7AE8B，如圖2－63，這樣整個(gè)版面的效果就比較符合視覺規(guī)律。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面86第二章方法篇圖2－63居中顯示2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面87第二章方法篇鼠標(biāo)經(jīng)過圖像某些網(wǎng)頁中的導(dǎo)航，當(dāng)鼠標(biāo)放上去時(shí)會(huì)有細(xì)微的變化，在Dreamweaver中可以通過使用“鼠標(biāo)經(jīng)過圖像”來實(shí)現(xiàn)這樣的操作。首先做兩張相差很小的小圖片，例如只是文字的顏色有一點(diǎn)不同，如圖2－64，把它們存為JPEG的格式放在images文件夾下，分別命名為up.jpg和down.jpg。再用Dreamweaver新建一個(gè)基本頁，保存在站點(diǎn)文件夾website下，命名為temp.html。如圖2－65，在頁面中插入“鼠標(biāo)經(jīng)過圖像”，彈出圖2－66對(duì)話框，把up.jpg添加到“原始圖像”路徑，down.jpg添加到“鼠標(biāo)經(jīng)過圖像”路徑，確定后，按F12鍵在IE中預(yù)覽，會(huì)發(fā)現(xiàn)頁面上正常顯示的是up.jpg效果，當(dāng)鼠標(biāo)經(jīng)過時(shí)圖就變?yōu)閐own.jpg效果。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面88第二章方法篇圖2－65鼠標(biāo)經(jīng)過圖像命令圖2－66插入鼠標(biāo)經(jīng)過圖像2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面89第二章方法篇圖2-67允許阻止的內(nèi)容注意：WindowsXP的安全保護(hù)會(huì)阻止這個(gè)網(wǎng)頁效果的顯示，需要手動(dòng)允許，如圖2－67。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面90第二章方法篇

回到實(shí)例index.html中，如果需要設(shè)計(jì)主導(dǎo)航的鼠標(biāo)翻轉(zhuǎn)效果，也可以通過以上步驟去實(shí)現(xiàn)。得益于最初設(shè)計(jì)圖的切片劃分，index.html的導(dǎo)航實(shí)際上已經(jīng)被分成了若干獨(dú)立的圖片，并且分別處于不同的單元格中。只需要針對(duì)導(dǎo)航上的這幾張小圖，使用Photoshop再制作一張稍有變化的相應(yīng)圖片作為翻轉(zhuǎn)后的圖片，并存儲(chǔ)在images文件夾下即可。先把這幾個(gè)單元格里的普通圖片刪去，如圖2－68，使用鼠標(biāo)翻轉(zhuǎn)圖片在每個(gè)單元格里重新插入一次，就完成了整個(gè)導(dǎo)航的鼠標(biāo)翻轉(zhuǎn)的制作。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面91第二章方法篇圖2－68刪除導(dǎo)航圖片2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面92第二章方法篇

制作這些導(dǎo)航小圖片的翻轉(zhuǎn)圖片比較麻煩，有個(gè)簡單的方法可以一次完成。首先用Photoshop打開包含切片信息的那張?jiān)荚O(shè)計(jì)圖（圖2－69），把導(dǎo)航的樣式做一些需要的變化（圖2-70），然后設(shè)置保持不變，再存儲(chǔ)為web所用格式到另外一個(gè)臨時(shí)的地方（例如桌面上），修改存儲(chǔ)的文件名（比如原來是index.html，現(xiàn)在index0.html）。這樣就在桌面上得到了一個(gè)index0.html和一個(gè)images文件夾。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面93第二章方法篇打開images文件夾，找到和原來導(dǎo)航的圖片相應(yīng)的圖片（可以參看切片編號(hào)），全部選中并復(fù)制到站點(diǎn)website的images文件夾下，就一次性得到了所有需要的翻轉(zhuǎn)圖片。桌面上生成的index0.htm和images臨時(shí)文件夾就可以刪除了。最后不要忘了在導(dǎo)航圖片上寫上超鏈接，實(shí)現(xiàn)點(diǎn)擊后跳轉(zhuǎn)到相應(yīng)的頁面。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面94第二章方法篇圖2－69原導(dǎo)航文字樣式圖2－70稍作變化的樣式2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面95第二章方法篇案例小結(jié)

切割要遵循一定的規(guī)律，切片要為網(wǎng)頁中需要實(shí)現(xiàn)的功能服務(wù)，比如圖2－59中的切片2、3、4、5、6就是為了做鼠標(biāo)翻轉(zhuǎn)效果服務(wù)的，而切片9可以用不同的圖片來更換保證頁面的新鮮感。切片13是一段文字，但在網(wǎng)頁中以圖片的形式存在不利于文字的編輯和更新，所以把它在單元格中刪除，而在Dreamweaver中另外輸入所需的文字。

2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面96第二章方法篇切片變?yōu)榫W(wǎng)頁后分別處于不同的單元格中，凌亂的切片會(huì)導(dǎo)致表格過于復(fù)雜，不但難以修改，還會(huì)增加代碼的數(shù)量。因此在切割出必要的需要實(shí)現(xiàn)功能的切片后，要盡量使剩下區(qū)域版面上的切片和實(shí)現(xiàn)功能的切片相配合，在水平和垂直方向上保持統(tǒng)一。

2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面97第二章方法篇

新手在做切片的時(shí)候經(jīng)常會(huì)在切片和切片之間留有一些1個(gè)像素高的廢切片，在切片做完后，要養(yǎng)成良好的習(xí)慣，清點(diǎn)切片的編號(hào)順序，如果發(fā)現(xiàn)編號(hào)有缺失，肯定是產(chǎn)生了廢切片，可以在相應(yīng)的地方使用縮放工具放大到最大，找到并調(diào)整，以去除這些廢切片。如圖2－71，放大后如圖2－72，發(fā)現(xiàn)切片8是1像素高的廢切片，只需把切片3的下沿向下調(diào)整1個(gè)像素，切片8就消失了。2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面98第二章方法篇圖2－71實(shí)際大小圖2－72放大后效果2.4.1主題案例七:利用切割制作網(wǎng)站歡迎頁面99第二章方法篇2.4.2主題案例八：制作網(wǎng)站的主框架頁面案例要點(diǎn)—主框架頁面的切割，二次排版，隱形表格。目標(biāo)描述—了解主框架頁面切割的目的，掌握切割的方法，進(jìn)一步學(xué)會(huì)結(jié)合軟件Photoshop和Dreamweaver的相關(guān)功能來完成網(wǎng)站制作。100第二章方法篇案例實(shí)現(xiàn)前一個(gè)案例中提到了網(wǎng)站的歡迎頁面，它是整個(gè)網(wǎng)站的大門，比較側(cè)重于視覺的美觀，使瀏覽者可能被它所吸引，從而產(chǎn)生繼續(xù)瀏覽網(wǎng)站的興趣。目前大多數(shù)個(gè)人網(wǎng)站以及企業(yè)網(wǎng)站都會(huì)有類似此功能的歡迎頁面。無論是什么類型的網(wǎng)站，都要傳達(dá)給瀏覽者大量的信息內(nèi)容，這就需要設(shè)計(jì)一個(gè)主框架頁面，使相應(yīng)欄目的內(nèi)容能夠方便地放入其中，又不失美觀。其余欄目的頁面都沿用這個(gè)主框架頁面的設(shè)計(jì)風(fēng)格，僅改變欄目的相應(yīng)內(nèi)容。2.4.2主題案例八：制作網(wǎng)站的主框架頁面101第二章方法篇圖2－73是一家小型企業(yè)網(wǎng)站的公司介紹欄目的截圖，版面結(jié)構(gòu)簡潔清晰。圖2－73/2.4.2主題案例八：制作網(wǎng)站的主框架頁面102第二章方法篇先建立一個(gè)站點(diǎn)文件夾website1

圖2－74是切割后的設(shè)計(jì)圖，很簡單，但是完全能滿足需求。其中切片1是網(wǎng)站標(biāo)題以及主導(dǎo)航所在的位置，切片2是與欄目相關(guān)的一張圖片或者Flash，切片3是二級(jí)導(dǎo)航所在的位置，切片4是本頁相關(guān)的內(nèi)容，切片5是底部的修飾和版權(quán)信息，這樣依據(jù)設(shè)計(jì)結(jié)構(gòu)分割的方法，會(huì)使日后的更新和修改很便利。這種結(jié)構(gòu)化切割后生成的頁面成為了本網(wǎng)站的主框架頁面，其他欄目都可由這個(gè)頁面另存后修改相應(yīng)的內(nèi)各部分而得到。注意圖2－74切割圖中沒有主導(dǎo)航和二級(jí)導(dǎo)航文字，因?yàn)樵O(shè)計(jì)師預(yù)計(jì)純文字導(dǎo)航，是在Dreamweaver中完成的，因此在設(shè)計(jì)稿上不需要出現(xiàn)導(dǎo)航，只預(yù)留出相應(yīng)的位置即可。2.4.2主題案例八：制作網(wǎng)站的主框架頁面103第二章方法篇將切割后的設(shè)計(jì)圖存儲(chǔ)為web所用格式，存放到預(yù)先建立的站點(diǎn)文件夾website1中，命名為company.html。圖2－74切片圖2.4.2主題案例八：制作網(wǎng)站的主框架頁面104第二章方法篇本案例在Dreamweaver中的后期處理圖片設(shè)置為單元格背景

使用Dreamweaver打開company.html，選中整個(gè)表格，對(duì)齊屬性設(shè)為居中，網(wǎng)頁背景顏色設(shè)置為#0E539E。選中company.html中切片1所在的圖片，也就是最上面的網(wǎng)站標(biāo)題部分，在屬性欄里可以看到這張圖片的大小為719×82像素，然后在單元格中刪除該圖，將空出來的單元格設(shè)置為為719×82像素，并將該圖設(shè)置為本單元格的背景圖片，如圖2－75。改動(dòng)后，可以在這個(gè)單元格中嵌套一個(gè)右對(duì)齊的隱形表格，把主導(dǎo)航放進(jìn)去。用同樣的方法處理切片3，放入二級(jí)導(dǎo)航，使用CSS來設(shè)置超鏈接樣式，如圖2－76。2.4.2主題案例八：制作網(wǎng)站的主框架頁面105第二章方法篇圖2－75單元格屬性圖2－76插入導(dǎo)航注意：在單元格中刪掉不需要的切片圖片時(shí)盡量將單元格的寬和高設(shè)置為與該圖片一致的尺寸，以防出現(xiàn)刪掉圖片后整個(gè)表格錯(cuò)開的問題。2.4.2主題案例八：制作網(wǎng)站的主框架頁面106第二章方法篇對(duì)于內(nèi)容二次排版

圖2－74中切片4是用來放置相應(yīng)欄目內(nèi)容的，不同欄目內(nèi)容的圖文關(guān)系的變化會(huì)使對(duì)這部分的切割產(chǎn)生差異。company.html作為主框架頁，不需要采取如圖2－77那種連同欄目內(nèi)容一起切割的方法，應(yīng)該考慮到它的通用性和可擴(kuò)展性，先把內(nèi)容部分先作為整體切片，如圖2－74。等生成網(wǎng)頁后再對(duì)這部分進(jìn)行二次切割，排版嵌入到頁面中，下面看看具體如何實(shí)現(xiàn)。2.4.2主題案例八：制作網(wǎng)站的主框架頁面107第二章方法篇圖2-77連同欄目內(nèi)容一起切割，不需要這樣一次切割成，它會(huì)導(dǎo)致其他欄目的內(nèi)容很難順利地排入網(wǎng)頁，缺乏通用性和可擴(kuò)展性。2.4.2主題案例八：制作網(wǎng)站的主框架頁面108第二章方法篇對(duì)圖2－74中切片4的第二次排版，怎樣最快、最簡單地實(shí)現(xiàn)？使用Photoshop打開images文件夾中切片4的圖片，按照?qǐng)D文關(guān)系再切割一次，注意圖中分隔線條不要放在切片3內(nèi)，如圖2－78，以Web所用格式存儲(chǔ)在站點(diǎn)文件夾website1中，文件名為company_04.html。使用Dreamweaver打開company_04.html，選中切片3所在部分，刪掉圖片并直接排入文字，以方便以后修改，注意文字的CSS樣式，選中整個(gè)表格，Ctrl＋C復(fù)制待用。使用Dreamweaver打開company.html，刪掉中間部分（圖2－74中切片4）的圖片，設(shè)置單元格背景為白色，Ctrl＋V粘貼剛才復(fù)制的表格。company_04.html這個(gè)頁面在做完上述這幾步后就可以從站點(diǎn)文件夾中刪除了。這樣我們就快速地完成了對(duì)頁面內(nèi)容的第二次排版。如果圖文關(guān)系不復(fù)雜，大多時(shí)候只需要手工建立隱形表格并插入排版，不需要單獨(dú)切割，這里提供的是通用的方法。2.4.2主題案例八：制作網(wǎng)站的主框架頁面109第二章方法篇圖2－78對(duì)內(nèi)容的單獨(dú)切割2.4.2主題案例八：制作網(wǎng)站的主框架頁面110第二章方法篇預(yù)先定制網(wǎng)頁的命名規(guī)則整個(gè)網(wǎng)站包含很多網(wǎng)頁文件，我們需要按照一定的規(guī)則做好命名規(guī)劃，而不應(yīng)該在要保存制作的網(wǎng)頁時(shí)臨時(shí)命名。命名可以采用欄目的英文單詞或者拼音，盡量不要使用中文。命名預(yù)先規(guī)劃完成后，在做主框架頁面時(shí)，就可以寫出所有導(dǎo)航的超鏈接，這樣就不需要重復(fù)寫由主框架頁面另存而產(chǎn)生的頁面的導(dǎo)航超鏈接，減少了很多工作量?？紤]到Internet的國際性，網(wǎng)站根目錄內(nèi)所有的文件和文件夾（包含圖片、聲音、動(dòng)畫等資源文件）都應(yīng)盡可能使用英文和數(shù)字來命名。在制作網(wǎng)站前可以先畫出站點(diǎn)的欄目分布圖，并定好每個(gè)頁面的名字，如圖2－79。2.4.2主題案例八：制作網(wǎng)站的主框架頁面111第二章方法篇

2.4.2主題案例八：制作網(wǎng)站的主框架頁面112第二章方法篇案例小結(jié)切割主框架頁面時(shí)，首先要把版面按標(biāo)題、導(dǎo)航、內(nèi)容、底部等分割開，使版面有較好的可擴(kuò)展性。其次再考慮一些局部的功能性，比如欄目內(nèi)容、Flash、鼠標(biāo)翻轉(zhuǎn)等，都盡量采取第二次排版嵌入。由于并不是一次切割到位，表格的嵌套使用頻繁，所以對(duì)于表格、單元格知識(shí)的掌握和運(yùn)用要求比較高，比如表格內(nèi)的對(duì)齊關(guān)系、長寬的設(shè)定、背景的設(shè)定等。最后，CSS里可以專門對(duì)表格的邊框進(jìn)行定義，如果靈活運(yùn)用，可以利用表格解決很多內(nèi)容排版時(shí)需要的分隔線。2.4.2主題案例八：制作網(wǎng)站的主框架頁面113第二章方法篇2.4.3主題案例九：完成整體網(wǎng)站制作案例要點(diǎn)—Flash、iframe、插件、查找和替換。目標(biāo)描述—掌握一些目前在網(wǎng)頁制作中比較流行的技術(shù)，最終完成網(wǎng)站制作。這個(gè)案例將涉及一些網(wǎng)站制作技術(shù)，這些技術(shù)并不是必需的，為了讓學(xué)習(xí)者更多地了解網(wǎng)站制作技術(shù)，在這個(gè)案例的局部使用了一些和原網(wǎng)站制作不同的技術(shù)。如圖2－80，這是一個(gè)網(wǎng)站主框架頁面的截圖，它根據(jù)設(shè)計(jì)的初衷以及版面的結(jié)構(gòu)做了切割。切片1是網(wǎng)站的標(biāo)題logo，切片3是Flash的主導(dǎo)航，切片4是當(dāng)前欄目的標(biāo)題，切片5是Flash的二級(jí)導(dǎo)航，切片6是一張會(huì)產(chǎn)生變化的圖片，切片7是需要二次排版的相應(yīng)欄目的內(nèi)容，切片9和11是版權(quán)信息和聯(lián)系方式。切片8、10、12都是輔助切片，完成切片后存儲(chǔ)為web所用格式，命名為procss.html，保存在預(yù)先建立的站點(diǎn)文件夾website2中。114第二章方法篇本案例在Dreamweaver中的后期處理網(wǎng)頁中的Flash技術(shù)近幾年在一些韓國網(wǎng)站風(fēng)格的網(wǎng)站上十分流行。本案例中主導(dǎo)航和二級(jí)導(dǎo)航都采用了Flash技術(shù)，F(xiàn)lash導(dǎo)航形式活潑，具有動(dòng)感，在這里主要介紹如何在網(wǎng)頁中運(yùn)用Flash技術(shù)。Dreamweaver打開文件process.html，刪除其中切片3和切片5的圖片，將做好的和這兩張圖片等大且已在Flash內(nèi)定義好超鏈接的Flash導(dǎo)航分別插入到對(duì)應(yīng)的單元格中，如圖2－81。圖2－81插入Flash2.4.3主題案例九：完成整體網(wǎng)站制作115第二章方法篇無論是Flash導(dǎo)航還是頁面中的其他Flash元素，都需要讓Flash的背景和原版面周圍的背景無縫連接。這可以通過將Flash中的背景色與原版面的背景色設(shè)置為同一種顏色來實(shí)現(xiàn)，如本案例。2.4.3主題案例九：完成整體網(wǎng)站制作116第二章方法篇再看一個(gè)網(wǎng)頁的局部圖2－82，中間的文字部分設(shè)計(jì)成Flash動(dòng)畫。如果在Dreamweaver中刪除這塊切片所在單元格中的圖片，那么該處的背景圖將不完整。當(dāng)使用Flash來替代時(shí)，F(xiàn)lash的背景不能設(shè)置為某種單色，所以，在切割的時(shí)候應(yīng)該先把設(shè)計(jì)圖做成如圖2－83的樣式。刪掉的切片4的圖片可以作為Flash的背景使用，這樣就實(shí)現(xiàn)了Flash和周圍圖片的無縫連接?；蛘咭部梢园堰@張圖作為該單元格的背景圖，然后將插入的Flash背景設(shè)置為透明。2.4.3主題案例九：完成整體網(wǎng)站制作117第二章方法篇圖2－82局部設(shè)計(jì)圖圖2－83修改后的設(shè)計(jì)圖2.4.3主題案例九：完成整體網(wǎng)站制作118第二章方法篇

圖2－84添加參數(shù)選中插入的swf文件后，在“屬性”里點(diǎn)“參數(shù)”，添加如圖2－84所示的參數(shù)和值，這樣就可以使這個(gè)Flash背景透明。2.4.3主題案例九：完成整體網(wǎng)站制作119第二章方法篇javascript小程序?qū)崿F(xiàn)網(wǎng)頁圖片的變化網(wǎng)頁設(shè)計(jì)不同于平面設(shè)計(jì)，可以使用一些技術(shù)讓網(wǎng)頁顯得更有生氣，如圖2－85中間的這張圖片，可以使用javascript小程序來實(shí)現(xiàn)。目前有兩種比較流行的方案：一種是每次網(wǎng)頁刷新隨機(jī)從預(yù)先定義的圖片中抽調(diào)一張顯示；另一種是每隔一段時(shí)間自動(dòng)變換圖片顯示。2.4.3主題案例九：完成整體網(wǎng)站制作120第二章方法篇方案1效果實(shí)現(xiàn)使用Photoshop軟件做兩張與切片6所在單元格內(nèi)圖片process_06.jpg等大的替換圖，也存放在站點(diǎn)文件夾website2的images文件夾中，按順序重新命名三張圖片為process_06_1.jpg、process_06_2.jpg、process_06_3.jpg。使用Dreamweaver打開process.html，刪除切片6所在單元格內(nèi)的圖片，設(shè)置空出來的單元格長寬和該圖片相同。切換到代碼視圖，在這個(gè)單元格所在的代碼位置，輸入如圖2－86所示的代碼，再到IE中預(yù)覽。這樣每次刷新頁面都會(huì)在三張圖片中隨機(jī)選取一張顯示。2.4.3主題案例九：完成整體網(wǎng)站制作121第二章方法篇圖2－86插入代碼2.4.3主題案例九：完成整體網(wǎng)站制作122第二章方法篇方案2效果實(shí)現(xiàn)保留前面做的三張圖片，在空單元格所在的代碼處插入<imgsrc="images/process_06_1.jpg“name="img1"width="285"height="331"id="img1"style="filter:revealTrans(Transition=1,Duration=1.5)">，濾鏡中的Duration是指切換時(shí)間（以秒計(jì)），本例設(shè)置的是1.5秒，若想使切換過程慢一些，可增大Duration參數(shù)的值。2.4.3主題案例九：完成整體網(wǎng)站制作123第二章方法篇在網(wǎng)頁源代碼的<head>與</head>之間插入如圖2－87所示的這段javascript程序代碼。在網(wǎng)頁源代碼的<body>標(biāo)記中加上onload="start()"事件，使在網(wǎng)頁載入時(shí)就顯示動(dòng)態(tài)切換效果。按F12鍵在IE中預(yù)覽，三張圖片每隔1.5秒會(huì)輪流分別顯示一次。注意：所有圖片的文件名和文件格式要統(tǒng)一，用序號(hào)區(qū)分，如本例所用圖片的文件名（含相對(duì)路徑）為：images/process_06_1.jpg、images/process_06_2.jpg、images/process_06_3.jpg。2.4.3主題案例九：完成整體網(wǎng)站制作124第二章方法篇互聯(lián)網(wǎng)上提供了大量現(xiàn)成的能實(shí)現(xiàn)動(dòng)態(tài)功能的javascript小程序，所以學(xué)習(xí)者即使沒有掌握這種程序語言，也可以從中挑選合適的拿來使用。圖2－87插入代碼2.4.3主題案例九：完成整體網(wǎng)站制作125第二章方法篇欄目內(nèi)容可擴(kuò)展性地解決圖2－80中切片7是放置每個(gè)欄目主要內(nèi)容的地方，由于不同欄目的內(nèi)容所占用的版面大小不同，因此切片7所在的單元格需要在不破壞版面美觀的基礎(chǔ)上在垂直方向上有一定的伸縮性，以適應(yīng)每個(gè)欄目內(nèi)容的變化，目前一般采取如下兩種方法來實(shí)現(xiàn)。Ａ.使用背景圖片讓左右的單元格和欄目的單元格同時(shí)伸縮。這種方法要求在做主框架頁設(shè)計(jì)圖以及切割主框架頁時(shí)都要考慮實(shí)現(xiàn)擴(kuò)展的可能性。如圖2－88，兩個(gè)不同的頁面中切片7所在的單元格在高度上有明顯差異，而版面下方以及左右兩邊簡單的底紋設(shè)計(jì)使得這種變化完全不會(huì)影響版面結(jié)構(gòu)。2.4.3主題案例九：完成整體網(wǎng)站制作126第二章方法篇圖2－88欄目內(nèi)容不同2.4.3主題案例九：完成整體網(wǎng)站制作127第二章方法篇圖2－80中切片10和12的存在也從技術(shù)上保障了切片7伸縮的可能性。用Dreamweaver打開process.html，若嘗試在切片7所在單元格中放入超過原來高度的內(nèi)容，例如原圖片高為717像素，現(xiàn)在改成817像素，那么在IE中預(yù)覽時(shí)就會(huì)發(fā)現(xiàn)版面遭到了一定程度的破壞，如圖2－89產(chǎn)生了白色裂紋。2.4.3主題案例九：完成整體網(wǎng)站制作128第二章方法篇圖2－89版面錯(cuò)開圖2－90背景圖片2.4.3主題案例九：完成整體網(wǎng)站制作129第二章方法篇Ｂ.iframe標(biāo)記的使用iframe一般被稱作內(nèi)聯(lián)框架，或者頁中頁。首先把本欄目切片7的內(nèi)容單獨(dú)做成一個(gè)頁面，存儲(chǔ)在站點(diǎn)文件夾website2中，命名process_iframe.html。注意將設(shè)置頁面屬性中的左邊距和上邊距值均設(shè)置為0，如圖2－91。使用Dreamweaver打開process.html文件，刪除切片7所在單元格內(nèi)的圖片，在代碼視圖下的該單元格位置插入<iframewidth="500"height="700"scrolling="auto"src="process_iframe.html"></iframe>。process_iframe.html是作為一個(gè)內(nèi)聯(lián)框架嵌在process.html中的，如果proceed_iframe.html中的內(nèi)容超出了設(shè)定的寬500像素、高700像素的范圍，就會(huì)自動(dòng)產(chǎn)生滾動(dòng)條。2.4.3主題案例九：完成整體網(wǎng)站制作130第二章方法篇圖2－91內(nèi)容單獨(dú)做成一個(gè)網(wǎng)頁2.4.3主題案例九：完成整體網(wǎng)站制作131第二章方法篇插件的使用和很多軟件一樣，Dreamweaver也可以使用外部插件來實(shí)現(xiàn)一些復(fù)雜的功能。在安裝該軟件時(shí)，可以附帶安裝MacromediaExtensionManager插件管理器，打開軟件后所有已安裝的插件將被列出，可以對(duì)其進(jìn)行管理，如圖2－92。2.4.3主題案例九：完成整體網(wǎng)站制作132第二章方法篇圖2－92插件使用2.4.3主題案例九：完成整體網(wǎng)站制作133第二章方法篇查找和替換通過對(duì)主框架頁的另存并修改，可以生成其他欄目的頁面，如果發(fā)現(xiàn)在制作網(wǎng)站的過程中出錯(cuò)，例如主導(dǎo)航上公司簡介本來應(yīng)該鏈接到profile.html，由于筆誤寫成了porfile.html，因?yàn)樗械捻撁娑际怯闪泶娈a(chǎn)生的，所以它們都需要修改。通過Dreamweaver“編輯”菜單中的“查找和替換”的功能，可以很方便地實(shí)現(xiàn)一次性全部修改，如圖2－94。查找范圍選擇“整個(gè)當(dāng)前本地站點(diǎn)”或者指定到站點(diǎn)文件夾，搜索項(xiàng)選擇“源代碼”，查找href=“porfile.html”替換為href=“profile.html”，2.4.3主題案例九：完成整體網(wǎng)站制作134第二章方法篇圖2－94查找和替換選擇“替換全部”。于是，Dreamweaver會(huì)在整個(gè)站點(diǎn)所有文件的源代碼中查找到“porfile.html”并自動(dòng)替換為“profile.html”。2.4.3主題案例九：完成整體網(wǎng)站制作135第二章方法篇案例小結(jié)網(wǎng)站的制作主要有兩個(gè)步驟：一是在Photoshop等軟件中設(shè)計(jì)網(wǎng)站的歡迎頁、主框架頁以及二級(jí)框架頁，在這個(gè)過程中除了需要遵循一般的平面設(shè)計(jì)規(guī)律，還需要考慮網(wǎng)頁功能的實(shí)現(xiàn)；二是把這些設(shè)計(jì)好的版面利用Photoshop軟件中的切片工具生成網(wǎng)頁，在Dreamweaver等網(wǎng)頁設(shè)計(jì)軟件中編輯這些頁面，并由此產(chǎn)生其他相關(guān)的網(wǎng)頁。Dreamweaver軟件中的層、時(shí)間線、行為、插件，以及Flash、Javascript、Applet、ActiveX、Shockwave等技術(shù)的使用，使網(wǎng)頁成為與瀏覽者交互的平臺(tái)。2.4.3主題案例九：完成整體網(wǎng)站制作136第二章方法篇2.5網(wǎng)站的發(fā)布2.5.1網(wǎng)站的本機(jī)測試在網(wǎng)站發(fā)布之前對(duì)站點(diǎn)進(jìn)行本機(jī)測試是一個(gè)必不可少的步驟，特別是對(duì)大型或訪問量大的網(wǎng)站。網(wǎng)站的本機(jī)測試包括目標(biāo)瀏覽器的測試和站點(diǎn)鏈接的檢查。137第二章方法篇測試目標(biāo)瀏覽器在制作網(wǎng)頁時(shí)，既可使用如圖像和段落文本等所有瀏覽器都支持的元素，也可使用如樣式和層等只有較新瀏覽器才支持的元素。Dreamweaver中的“檢查目標(biāo)瀏覽器”能對(duì)文檔中的HTML進(jìn)行測試，檢查是否有目標(biāo)瀏覽器不支持的標(biāo)簽或?qū)傩?。步驟如下：選擇“文件”菜單下“檢查頁”子菜單中的“檢查目標(biāo)瀏覽器”，如圖2-95。在默認(rèn)狀態(tài)下，Dreamweaver會(huì)自動(dòng)檢查瀏覽器的兼容性，如果發(fā)生兼容問題，狀態(tài)欄中的檢查瀏覽器兼容