網(wǎng)頁設(shè)計制作流程

1、什么是網(wǎng)站和網(wǎng)頁？ “網(wǎng)頁”是什么，平常我們所聽說的“新浪”、“搜狐”、“網(wǎng)易”等，即是俗稱的“網(wǎng)站”。而當(dāng)我們訪問這些網(wǎng)站的時候，最直接訪問的就是“網(wǎng)頁”了。這許許多多的網(wǎng)頁則組成了整個站點，也就是網(wǎng)站。 網(wǎng)頁 是一種網(wǎng)絡(luò)信息傳遞的載體。這種媒介的性質(zhì)和我們?nèi)粘５摹皥蠹垺?、“廣播”、“電視”等傳統(tǒng)媒體是可以相提并論的。在網(wǎng)絡(luò)上傳遞相關(guān)的信息，比如文字、圖片甚至多媒體音影，都是存儲在網(wǎng)頁中，瀏覽者只需要通過瀏覽網(wǎng)頁，就可以了解到相關(guān)信息了。構(gòu)成網(wǎng)頁的基本要素 1.1.文字文字字號:最適合于網(wǎng)頁正文顯示的字體大小為12磅左右，現(xiàn)在很多的綜合性站點，由于在一個頁面中需要安排的內(nèi)容較多，通常采用9磅

2、的字號。較大的字體可用于標(biāo)題或其他需要強(qiáng)調(diào)的地方，小一些的字體可以用于頁腳和輔助信息。需要注意的是，小字號容易產(chǎn)生整體感和精致感，但可讀性較差。 字形：粗體字強(qiáng)壯有力，有男性特點，適合機(jī)械、建筑業(yè)等內(nèi)容；細(xì)體字高雅細(xì)致，有女性特點，更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。在同一頁面中，字體種類少，版面雅致，有穩(wěn)定感；字體種類多，則版面活躍，豐富多采。關(guān)鍵是如何根據(jù)頁面內(nèi)容來掌握這個比例關(guān)系。字體：從加強(qiáng)平臺無關(guān)性的角度來考慮，正文內(nèi)容最好采用缺省字體。因為瀏覽器是用本地機(jī)器上的字庫顯示頁面內(nèi)容的。作為網(wǎng)頁設(shè)計者必須考慮到大多數(shù)瀏覽者的機(jī)器里只裝有三種字體類型及一些相應(yīng)的特定字體。而你指定的字體在

3、瀏覽者的機(jī)器里并不一定能夠找到，這給網(wǎng)頁設(shè)計帶來很大的局限。解決問題的辦法是：在確有必要使用特殊字體的地方，可以將文字制成圖像，然后插入頁面中。行距：行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設(shè)置比較適合正文。行距的常規(guī)比例為10:12，即用字10點，則行距12點。這主要是出于以下考慮：適當(dāng)?shù)男芯鄷纬梢粭l明顯的水平空白帶，以引導(dǎo)瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。 除了對于可讀性的影響，行距本身也是具有很強(qiáng)表現(xiàn)力的設(shè)計語言，為了加強(qiáng)版式的裝飾效果，可以有意識地加寬或縮窄行距，體現(xiàn)獨(dú)特的審美意趣。例如，加寬行距可以體現(xiàn)輕松、舒展的情緒，應(yīng)用于娛樂

4、性、抒情性的內(nèi)容恰如其分。另外，通過精心安排，使寬、窄行距并存，可增強(qiáng)版面的空間層次與彈性，表現(xiàn)出獨(dú)到的匠心。通過文字大小疏密進(jìn)行處理，突出重點，層次分明。2.2.圖形圖形 格式：網(wǎng)頁上經(jīng)常使用的圖片格式：JPG、GIF、SWF、BMP、TIFF、PNG等。GIF具有圖像文件短小、下載速度快、低顏色數(shù)下GIF比JPEG裝載的更快.JPEG格式是在目前Internet中最受歡迎的圖像格式，JPEG可支持多達(dá)16M顏色，它能展現(xiàn)十分豐富生動的圖像，還能壓縮。但壓縮方式是以損失圖像質(zhì)量為代價，壓縮比越高圖像質(zhì)量損失越大，圖像文件也就越小。 圖像的形式：同印刷排版一樣，靜態(tài)圖像在網(wǎng)頁排版中的運(yùn)用不外乎

5、四種形式：方形圖、退底圖、出血圖以及這三種形式的結(jié)合使用。 （1）方形圖即圖形以直線邊框來規(guī)范和限制，是一種最常見、最簡潔、最單純的形態(tài)。方形圖使圖像內(nèi)容更突出且將主體形象與環(huán)境共融，可以完整地傳達(dá)主題思想，富有感染性。配置方形圖的頁面，給人以穩(wěn)重、可信、嚴(yán)謹(jǐn)、理性、莊重和安靜等感覺，但有時也顯得平淡、呆板。（2）退底圖將圖像中的背景去掉，只留下主題形象。退底圖形自由而突出，更具有個性，因而給人印象深刻。配置退底圖的頁面，輕松、活潑，動態(tài)十足，而且圖文結(jié)合自然，給人以親和感。但也容易造成凌亂和不整體的感覺。 人物全部退底，文字色塊的安排輕松隨意，是面向年輕人的設(shè)計。（3）出血圖圖像的一邊或幾個

6、邊充滿頁面，有向外擴(kuò)張和舒展之勢。一般用于傳達(dá)抒情或運(yùn)動信息的頁面，因不受邊框限制，感覺上與人更加接近，便于情感與動感的發(fā)揮。 四邊出血，有強(qiáng)烈的擴(kuò)張感。 主體形象退底且兩邊出血。主體形象的方向性與右側(cè)文字的排列方式具有引導(dǎo)視覺的作用。3.交互功能（菜單按鈕、鏈接、表單、數(shù)據(jù)交換.）網(wǎng)頁版式的基本類型 網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。 1.骨骼型 網(wǎng)頁版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧

7、、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。 2.滿版型 頁面以圖像充滿整版。主要以圖像為訴求點，也可將部分文字壓置于圖像之上。視覺傳達(dá)效果直觀而強(qiáng)烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網(wǎng)頁設(shè)計中的運(yùn)用越來越多。 3.分割型 把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積，來調(diào)節(jié)對比的強(qiáng)弱。例如：如果圖片所占比例過大，文案使用的字體過于纖細(xì)，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產(chǎn)生自

8、然和諧的效果。 4.中軸型 沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。5.曲線型 圖片、文字在頁面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。 6.傾斜型 頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動感，引人注目。 7.對稱型 對稱的頁面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。 對稱分為絕對對稱和相對對稱。一般采用相對對稱的手法，以避免呆板。左右對稱的頁面版式比較常見。 四角型也是對稱型的一種，是在頁面四角安排相應(yīng)的視覺元素。四個角是頁面的邊界點，重要性不可低估。在四個角安排的任何內(nèi)容都能產(chǎn)生安定感

9、?？刂坪庙撁娴乃膫€角，也就控制了頁面的空間。越是凌亂的頁面，越要注意對四個角的控制。 8.焦點型 焦點型的網(wǎng)頁版式通過對視線的誘導(dǎo)，使頁面具有強(qiáng)烈的視覺效果。焦點型分三種情況。 （1）中心以對比強(qiáng)烈的圖片或文字置于頁面的視覺中心。 （2）向心視覺元素引導(dǎo)瀏覽者視線向頁面中心聚攏，就形成了一個向心的版式。向心版式是集中的、穩(wěn)定的，是一種傳統(tǒng)的手法。 （3）離心視覺元素引導(dǎo)瀏覽者視線向外輻射，則形成一個離心的網(wǎng)頁版式。離心版式是外向的、活潑的，更具現(xiàn)代感，運(yùn)用時應(yīng)注意避免凌亂。 通過離心的版式，清晰地傳達(dá)出網(wǎng)站提供的服務(wù)。 9.三角型 網(wǎng)頁各視覺元素呈三角形排列。正三角形（金字塔型）最具穩(wěn)定性，倒

10、三角形則產(chǎn)生動感。側(cè)三角形構(gòu)成一種均衡版式，既安定又有動感。 10.自由型 自由型的頁面具有活潑、輕快的風(fēng)格。網(wǎng)頁設(shè)計制作流程一.確定網(wǎng)頁主題二.收集網(wǎng)頁相關(guān)資料三.構(gòu)思網(wǎng)頁布局四.制作網(wǎng)頁五.發(fā)布為網(wǎng)頁文件HTML或SWF六.上傳網(wǎng)頁一.確定網(wǎng)頁主題（網(wǎng)頁類型） 個人主頁 商業(yè)網(wǎng)站 綜合網(wǎng)站二.收集網(wǎng)頁相關(guān)資料 圖片 文字 聲音 視頻 動畫1.1.文字與圖片文字與圖片: :是網(wǎng)站的基本單元是網(wǎng)站的基本單元 文字與圖片的比例要適當(dāng)文字與圖片的比例要適當(dāng)文字太多，會使減低網(wǎng)站的吸引力文字太多，會使減低網(wǎng)站的吸引力圖片太多，又會使頁面的瀏覽速度大大下降圖片太多，又會使頁面的瀏覽速度大大下降2.2.

11、聲音：主要是音響和音樂，其中音樂占主要地位聲音：主要是音響和音樂，其中音樂占主要地位適當(dāng)?shù)脑诰W(wǎng)頁上加點音樂效果，會使網(wǎng)頁更具吸引力適當(dāng)?shù)脑诰W(wǎng)頁上加點音樂效果，會使網(wǎng)頁更具吸引力網(wǎng)上的流行的聲音格式有網(wǎng)上的流行的聲音格式有MIDIMIDI、WAVWAV、MP3MP3及及REAL AUDIOREAL AUDIO3.3.動畫動畫適量的動畫使頁面生動活潑，有時會使頁面內(nèi)容更加直觀易讀；適量的動畫使頁面生動活潑，有時會使頁面內(nèi)容更加直觀易讀；使用動畫不能過多，否則不僅網(wǎng)站的瀏覽速度會大大降低，更使用動畫不能過多，否則不僅網(wǎng)站的瀏覽速度會大大降低，更會給人一種眼花繚亂的感覺；會給人一種眼花繚亂的感覺；普通

12、的動畫使用普通的動畫使用GIFGIF動畫技術(shù)；對于復(fù)雜又需交互的內(nèi)容，則動畫技術(shù)；對于復(fù)雜又需交互的內(nèi)容，則可以借助可以借助FlashFlash動畫制作技術(shù)；動畫制作技術(shù)；使用使用JavaJava、ASPASP等編程技術(shù)也可以獲得靈活的動畫效果。等編程技術(shù)也可以獲得靈活的動畫效果。4.4.視頻影象視頻影象視頻影像是一種非常直觀而有效的表現(xiàn)方式視頻影像是一種非常直觀而有效的表現(xiàn)方式下載一個視頻文件要花費(fèi)很多的時間下載一個視頻文件要花費(fèi)很多的時間三.構(gòu)思網(wǎng)頁布局網(wǎng)頁布局-主要構(gòu)成原則醒目性：指用戶把注意力集中到你誘導(dǎo)起瀏覽的部分和內(nèi)容可讀性：指網(wǎng)站的內(nèi)容讓人容易讀懂明快性：指準(zhǔn)確、快速轉(zhuǎn)達(dá)網(wǎng)站的構(gòu)

13、成內(nèi)容造型性：維持整體外型上的穩(wěn)定感和均衡性創(chuàng)造性：有鮮明個性，創(chuàng)意是必不可少的布局的構(gòu)成原則上是:統(tǒng)一、協(xié)調(diào)、流動、強(qiáng)調(diào)、均衡主頁的設(shè)計規(guī)則一.一個網(wǎng)頁的下載速度應(yīng)在一個網(wǎng)頁的下載速度應(yīng)在1010秒之內(nèi)秒之內(nèi) 每個頁面大小應(yīng)在2040KB 其中HTML文件通常為14KB，其余1936KB是其他內(nèi)容，如圖片、文本。二二. .頁面的寬度頁面的寬度 頁面的寬度一般設(shè)計成770象素三三. .頁面長度頁面長度 一般頁面長度最長為三個屏幕長度,如果多于三個屏幕長度,則要簡化主頁內(nèi)容.即: 634, 1018, 1334pixel四四. . 建議使用動態(tài)布局建議使用動態(tài)布局 即隨著分辨率不同來調(diào)整頁面寬度

14、,以保證無論保種分辨率下都可以看到全屏的內(nèi)容.四.制作網(wǎng)頁1.偽界面設(shè)計 根據(jù)事先規(guī)劃的結(jié)構(gòu)，在平面軟件里設(shè)計你想要的最終效果，利用平面圖片的形式先展示一次，設(shè)計時要注意宜人性、人機(jī)、心理等各方面因素2.網(wǎng)頁設(shè)計常用工具軟件 Adobe Photoshop Macromedia FlashAdobe IllustratorAdobe ImageReadDreamweaver：自制動態(tài)HTML動畫的網(wǎng)頁 Macromedia Fireworks：Fireworks進(jìn)行切圖，可以將一個大圖片分割成不同色深的多個小圖片，并且生成相應(yīng)的網(wǎng)頁文件或代碼，從而減小網(wǎng)頁的重量。Macromedia Dire

15、ctor:對多媒體元素進(jìn)行整合。五.發(fā)布為網(wǎng)頁文件HTML或SWF HTML全稱 HyperText Markup Language，正式名稱是超文本標(biāo)記語言，HTML語言發(fā)展很快，已歷經(jīng)HTML1.0、HTML2.0和HTML3.0、HTML4.0多個版本，現(xiàn)在HTML5.0正在測試，同時DHTML (動態(tài))、VHTML(虛擬)、SHTML等也飛速發(fā)展起來, html利用標(biāo)記（tag）用來描述網(wǎng)頁的字體、大小、顏色及頁面布局的語言，使用任何的文本編輯器都可以對它進(jìn)行編輯。 在Flash中發(fā)布主影片和菜單以及與此相關(guān)的子影片。主影片發(fā)布為首頁(index.html)Web文檔和index. s

16、wf，其余影片均發(fā)布為swf.六.上傳網(wǎng)頁 將網(wǎng)頁中的所有 Flash影片文件（swf）和文檔（html）均登錄到自己的個人主頁空間上。登陸以后，通過網(wǎng)頁瀏覽器便可以瀏覽自己的網(wǎng)頁。Flash簡要介紹什么是FLASH Flash是美國的MACROMEDIA公司于1999年6月推出的優(yōu)秀網(wǎng)頁動畫設(shè)計軟件。它是一種交互式動畫設(shè)計工具，用它可以將音樂，聲效，動畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。 如今升級到Flash 8版本，它不僅可以制作網(wǎng)頁，而且在游戲、網(wǎng)頁動畫、網(wǎng)絡(luò)廣告、網(wǎng)絡(luò)賀卡服務(wù)等多種領(lǐng)域有廣泛應(yīng)用。 FLASH的特點 1. 使用矢量圖形和流式播放技術(shù)。與位圖圖形不同的是，矢量圖形可以任意縮放尺寸而不影響圖形的質(zhì)量；流式播放技術(shù)使得動畫可以邊播放邊下載，從而緩解了網(wǎng)頁瀏覽者焦急等待的情緒。 2. 通過使用關(guān)鍵幀和圖符使得所生成的動畫(.swf)文件非常小，幾K字節(jié)的動畫文件已經(jīng)可以實現(xiàn)許多令人心動的動畫效果，用在網(wǎng)頁設(shè)計上不僅可以使網(wǎng)頁更加生動，而且小巧玲瓏下載迅速，使得動畫可以在打開網(wǎng)頁很短的時間