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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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