第二章-設計及實現(xiàn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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