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

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

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

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

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

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

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

9、?？刂坪庙撁娴乃膫€角，也就控制了頁面的空間。越是凌亂的頁面，越要注意對四個角的控制。 8.焦點型 焦點型的網(wǎng)頁版式通過對視線的誘導(dǎo)，使頁面具有強烈的視覺效果。焦點型分三種情況。 （1）中心以對比強烈的圖片或文字置于頁面的視覺中心。 （2）向心視覺元素引導(dǎo)瀏覽者視線向頁面中心聚攏，就形成了一個向心的版式。向心版式是集中的、穩(wěn)定的，是一種傳統(tǒng)的手法。 （3）離心視覺元素引導(dǎo)瀏覽者視線向外輻射，則形成一個離心的網(wǎng)頁版式。離心版式是外向的、活潑的，更具現(xiàn)代感，運用時應(yīng)注意避免凌亂。 通過離心的版式，清晰地傳達出網(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)方式下載一個視頻文件要花費很多的時間下載一個視頻文件要花費很多的時間三.構(gòu)思網(wǎng)頁布局網(wǎng)頁布局-主要構(gòu)成原則醒目性：指用戶把注意力集中到你誘導(dǎo)起瀏覽的部分和內(nèi)容可讀性：指網(wǎng)站的內(nèi)容讓人容易讀懂明快性：指準(zhǔn)確、快速轉(zhuǎn)達網(wǎng)站的構(gòu)

13、成內(nèi)容造型性：維持整體外型上的穩(wěn)定感和均衡性創(chuàng)造性：有鮮明個性，創(chuàng)意是必不可少的布局的構(gòu)成原則上是:統(tǒng)一、協(xié)調(diào)、流動、強調(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è)計時要注意宜人性、人機、心理等各方面因素2.網(wǎng)頁設(shè)計常用工具軟件 Adobe Photoshop Macromedia FlashAdobe IllustratorAdobe ImageReadDreamweaver：自制動態(tài)HTML動畫的網(wǎng)頁 Macromedia Fireworks：Fireworks進行切圖，可以將一個大圖片分割成不同色深的多個小圖片，并且生成相應(yīng)的網(wǎng)頁文件或代碼，從而減小網(wǎng)頁的重量。Macromedia Dire

15、ctor:對多媒體元素進行整合。五.發(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)頁的字體、大小、顏色及頁面布局的語言，使用任何的文本編輯器都可以對它進行編輯。 在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)頁很短的時間