《圖像處理及網(wǎng)頁制作》課件第11章_第1頁
《圖像處理及網(wǎng)頁制作》課件第11章_第2頁
《圖像處理及網(wǎng)頁制作》課件第11章_第3頁
《圖像處理及網(wǎng)頁制作》課件第11章_第4頁
《圖像處理及網(wǎng)頁制作》課件第11章_第5頁
已閱讀5頁，還剩76頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第11章網(wǎng)頁設(shè)計(jì)基礎(chǔ)11.1網(wǎng)頁設(shè)計(jì)的基本概念11.2網(wǎng)頁的基本元素及功能11.3網(wǎng)頁設(shè)計(jì)的基本原則和表現(xiàn)手法1.4網(wǎng)頁版式設(shè)計(jì)的視覺流程本章小結(jié)

網(wǎng)頁作為一種大眾媒體，不僅要傳達(dá)設(shè)計(jì)者的思想和情感，還要具有一定的藝術(shù)感染力，因此，網(wǎng)頁設(shè)計(jì)既要求具備頁面構(gòu)圖、色彩搭配、平面布局、版式設(shè)計(jì)、空間表現(xiàn)等方面的知識，又離不開對網(wǎng)頁設(shè)計(jì)中的一些基本概念和基本元素及功能的了解。對于網(wǎng)頁設(shè)計(jì)者而言，不僅要了解網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識，也要能很好的把握和應(yīng)用其基本原則和表現(xiàn)手法。

11.1.1認(rèn)識萬維網(wǎng)

萬維網(wǎng)(WorldWideWeb，又稱WWW、3W或Web)是Internet(因特網(wǎng))最為重要的應(yīng)用之一。萬維網(wǎng)有一套標(biāo)準(zhǔn)及易為人們所掌握的超文本標(biāo)記語言HTML、統(tǒng)一資源定位符URL和超文本傳輸協(xié)議HTTP。

萬維網(wǎng)由客戶端和服務(wù)器端組成。萬維網(wǎng)上的所有數(shù)據(jù)存儲在Web服務(wù)器上，然后用戶利用自己的計(jì)算機(jī)充當(dāng)客戶端，連接上網(wǎng)去瀏覽服務(wù)器上的信息。11.1網(wǎng)頁設(shè)計(jì)的基本概念為了獲取萬維網(wǎng)上的信息，用戶必須在自己的計(jì)算機(jī)上安裝瀏覽器軟件，然后運(yùn)行瀏覽器。瀏覽器負(fù)責(zé)把用戶的瀏覽命令傳送到Web服務(wù)器上，服務(wù)器根據(jù)用戶的要求把不同的網(wǎng)頁信息傳輸給用戶計(jì)算機(jī)，經(jīng)瀏覽器處理后，在用戶計(jì)算機(jī)屏幕上顯示出豐富多彩的網(wǎng)頁內(nèi)容。11.1.2超文本標(biāo)記語言HTML

網(wǎng)頁的核心是HTML(超文本標(biāo)記語言)，HTML并不是一種程序設(shè)計(jì)語言，而是一種頁面描述語言。

HTML是網(wǎng)頁制作的基礎(chǔ)，也是最基本的工具。使用任何工具制作的網(wǎng)頁，最終都要以HTML方式存儲在計(jì)算機(jī)里。用HTML制作網(wǎng)頁無需編程，只要學(xué)會使用各種標(biāo)記即可，但是需要熟記一定數(shù)量的HTML標(biāo)記及相應(yīng)用法。HTML具有特別的格式，Web瀏覽器可以把HTML解釋成可以直接閱讀的格式化Web文檔。我們可以使用自己熟悉的文本編輯器(如Windows記事本)并直接利用HTML進(jìn)行標(biāo)注，這是網(wǎng)頁制作的最基本的方法。

HTML文件(即網(wǎng)頁的源文件)的擴(kuò)展名通常為html或htm，在結(jié)構(gòu)上分為head(文件頭)和body(文件體)兩個(gè)部分，<head>和</head>標(biāo)記表示文件頭的開始和結(jié)束，<body>和</body>標(biāo)記表示文件體的開始和結(jié)束，整個(gè)文件以<html>標(biāo)記開始。如：

<html> HTML文件開始

<head> 文件頭開始

文件頭內(nèi)容 如<title>標(biāo)題</title>(打開網(wǎng)頁后“標(biāo)題”在標(biāo)題欄中顯示)

</head> 文件頭結(jié)束

<body> 文件體開始

文件體內(nèi)容

</body> 文件體結(jié)束

</html> HTML文件結(jié)束11.1.3網(wǎng)站、網(wǎng)頁與主頁

一個(gè)網(wǎng)站通常由許多網(wǎng)頁組成。網(wǎng)頁的內(nèi)容可以包含多種字體和樣式的文本、各種圖片、電影片斷和聲音等。

主頁是進(jìn)入網(wǎng)站的第一個(gè)網(wǎng)頁，也稱為首頁(HomePage)，為該網(wǎng)站的“門戶網(wǎng)頁”。這個(gè)頁面是整個(gè)網(wǎng)站的核心，站點(diǎn)內(nèi)所有內(nèi)容都由門戶頁面進(jìn)行索引。主頁通常被命名為index.html或default.html，它是站點(diǎn)訪問者在網(wǎng)頁瀏覽器的地址欄中鍵入該站點(diǎn)的網(wǎng)址時(shí)，默認(rèn)地顯示在瀏覽器中的網(wǎng)頁。通過主頁上的介紹或說明，用戶可以在短時(shí)間內(nèi)了解網(wǎng)站所提供的信息和服務(wù)項(xiàng)目。11.1.4超級鏈接與網(wǎng)站的鏈接結(jié)構(gòu)

1.超級鏈接

萬維網(wǎng)之所以成為Internet中最引人矚目、最受歡迎的應(yīng)用，不僅是因?yàn)樗峁┝硕嗝襟w的瀏覽方式，更在于它使人們只需通過簡單的鼠標(biāo)操作就能夠獲得更多的信息。在這種交互過程中，超級鏈接起著十分重要的作用，它是用戶在萬維網(wǎng)中暢游的航標(biāo)。在網(wǎng)頁中，超級鏈接表現(xiàn)為一些標(biāo)有顏色或下劃線的文字或圖標(biāo)，將鼠標(biāo)指針移到超級鏈接上時(shí)，鼠標(biāo)指針就會變成小手形(還有一些特定的鼠標(biāo)指針形狀)，單擊該文字或圖標(biāo)，就可以輕而易舉地跳轉(zhuǎn)到當(dāng)前網(wǎng)站的其他網(wǎng)頁或者相關(guān)的網(wǎng)站。

2.網(wǎng)站的鏈接結(jié)構(gòu)

網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：樹型結(jié)構(gòu)和星型結(jié)構(gòu)，如圖11-1所示。

圖11-1網(wǎng)站的鏈接結(jié)構(gòu)

(1)樹型鏈接結(jié)構(gòu)(一對一)。樹型鏈接結(jié)構(gòu)類似DOS的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。瀏覽這樣的鏈接結(jié)構(gòu)時(shí)，須一級級進(jìn)入，一級級退出。這種結(jié)構(gòu)的優(yōu)點(diǎn)是條理清晰，訪問者明確知道自己在什么位置，不會迷路，其缺點(diǎn)是瀏覽效率低，在進(jìn)行欄目跳轉(zhuǎn)時(shí)必須繞經(jīng)首頁。

(2)星型鏈接結(jié)構(gòu)(一對多)。星型鏈接結(jié)構(gòu)中每個(gè)頁面之間都建立有鏈接。這種結(jié)構(gòu)的優(yōu)點(diǎn)是瀏覽方便，隨時(shí)可以通過鏈接到達(dá)自己喜歡的頁面，其缺點(diǎn)是鏈接太多，容易使瀏覽者迷路。通常，在首頁和一級頁面之間用星型結(jié)構(gòu)鏈接，在一級頁面和二級頁面之間用樹型結(jié)構(gòu)鏈接。11.1.5URL與網(wǎng)站目錄結(jié)構(gòu)組織原則

1.URL

URL(UniformResourceLocator，統(tǒng)一資源定位器符)的格式為協(xié)議：//IP地址或域名/路徑/文件名

例如，

/literature/classes/novels/index.html

URL的第1部分(如http://或ftp://)說明要訪問的是哪一類資源，使用什么協(xié)議。http代表了超文本傳輸協(xié)議，即要訪問的是萬維網(wǎng)站點(diǎn)；ftp代表了文件傳輸協(xié)議，即要訪問的是FTP服務(wù)器，用戶可以從FTP服務(wù)器中下載許多實(shí)用的軟件或文件。

URL的第2部分(如或)是存放資源的主機(jī)的IP地址或域名。

URL的第3部分(如/literature/classes/novels/index.html)是可選項(xiàng)，用來指明所要訪問的資源在計(jì)算機(jī)中的路徑和文件名。通常情況下，站點(diǎn)的服務(wù)器都會指定一個(gè)默認(rèn)的文件名(如index.html或default.html等)。因此，如果省略了文件名，則自動訪問該路徑下的默認(rèn)文件。

2.網(wǎng)站目錄結(jié)構(gòu)原則

網(wǎng)站的目錄是指建立網(wǎng)站時(shí)創(chuàng)建的目錄。規(guī)劃一個(gè)網(wǎng)站的目錄結(jié)構(gòu)時(shí)，應(yīng)當(dāng)遵循幾個(gè)原則：

(1)不要將所有文件都存放在根目錄下。

(2)按欄目內(nèi)容分別建立子目錄。

(3)在每個(gè)主目錄下都建立獨(dú)立的images目錄。

(4)目錄的層次不要太深。

(5)其他需要注意的還有：切忌使用中文目錄，不要使用過長的目錄，盡量使用意義明確的目錄。

網(wǎng)頁設(shè)計(jì)人員需要美化網(wǎng)頁，增加網(wǎng)頁的藝術(shù)感。網(wǎng)頁的內(nèi)容與其性質(zhì)有關(guān)，不同性質(zhì)的網(wǎng)頁，內(nèi)容不同，所需要的美化效果也不同。一般來說，網(wǎng)頁包括幾項(xiàng)基本內(nèi)容：標(biāo)題、網(wǎng)站標(biāo)識(Logo)、主體內(nèi)容、頁眉頁腳、導(dǎo)航欄、廣告欄、友情鏈接等，如圖11-2所示。11.2網(wǎng)頁的基本元素及功能

圖11-2網(wǎng)頁的基本元素頁腳標(biāo)題網(wǎng)站標(biāo)識導(dǎo)航欄頁眉友情鏈接主體內(nèi)容11.2.1標(biāo)題

設(shè)計(jì)一個(gè)頁面，首先要有明確的標(biāo)題。標(biāo)題能夠體現(xiàn)出網(wǎng)頁設(shè)計(jì)的目的，在很大程度上決定了頁面其他元素的定位。一個(gè)好的頁面要求其標(biāo)題具有概括性、簡短、有特色、易記，還要符合網(wǎng)站總體風(fēng)格，頁面中的內(nèi)容要圍繞其標(biāo)題來組織。

頁面中的標(biāo)題用來提示頁面的主要內(nèi)容，標(biāo)題信息將出現(xiàn)在瀏覽器的標(biāo)題欄中。同時(shí)，它還有一個(gè)重要作用就是引導(dǎo)訪問者清楚地瀏覽網(wǎng)站的各項(xiàng)內(nèi)容，不至于迷失方向。加入標(biāo)題的HTML語句特別簡單，只要在<title></title>標(biāo)記之間添加標(biāo)題內(nèi)容。例如：

<title>浙江理工大學(xué)</title>

其顯示效果如圖11-3所示。

圖11-3網(wǎng)站標(biāo)題顯示效果11.2.2網(wǎng)站標(biāo)識

網(wǎng)站作為一種信息交流的媒體，在傳遞信息的同時(shí)，也需要對自身進(jìn)行宣傳，就是說它需要有自己的特定標(biāo)識。網(wǎng)站標(biāo)識如同一個(gè)產(chǎn)品的商標(biāo)，集中體現(xiàn)了網(wǎng)站的特色、內(nèi)容、文化內(nèi)涵及個(gè)性。一般網(wǎng)站的標(biāo)識都設(shè)計(jì)得十分醒目、獨(dú)特，并設(shè)置在網(wǎng)頁的顯要位置，力求給瀏覽者留下深刻的印象，如圖11-4所示。

對于當(dāng)前常見的網(wǎng)站，網(wǎng)站標(biāo)識的位置一般在主頁的顯要位置以及二級頁面的頁眉位置(頁面的左上方)。

圖11-4網(wǎng)站的標(biāo)識示例11.2.3頁眉和頁腳

1.頁眉

頁眉是指網(wǎng)頁上端的部分，如圖11-5所示。

圖11-5網(wǎng)頁頁眉示意圖頁眉和整個(gè)頁面的設(shè)計(jì)風(fēng)格相同，良好的頁眉在頁面中會起到較好的標(biāo)識作用。頁眉所在的位置是瀏覽者注意力較集中的地方，大多數(shù)網(wǎng)站設(shè)計(jì)者會在這里放置網(wǎng)站宗旨、廣告語、宣傳口號等。

2.頁腳

頁腳是指頁面的底端部分，如圖11-6所示。

頁腳部分通常用來標(biāo)注網(wǎng)站所屬的企事業(yè)單位的名稱、地址，網(wǎng)站的版權(quán)及電子信箱等信息，瀏覽者可以從這里了解到一些站點(diǎn)所有者的情況。圖11-6網(wǎng)頁頁腳示意圖11.2.4導(dǎo)航欄

成功的網(wǎng)頁是不能缺少導(dǎo)航欄這個(gè)重要部分的。導(dǎo)航欄是網(wǎng)站設(shè)計(jì)中一個(gè)獨(dú)立的部分，它的位置對網(wǎng)頁的結(jié)構(gòu)和整體布局起著至關(guān)重要的作用。一般來講，一個(gè)網(wǎng)站的導(dǎo)航欄在每一個(gè)頁面中出現(xiàn)的位置是固定的。導(dǎo)航欄的位置一般有四種：頁面左側(cè)、右側(cè)、頂部和底部。有的網(wǎng)站設(shè)置了多種導(dǎo)航欄，就是為了增強(qiáng)網(wǎng)頁的可訪問性，如圖11-7所示。

圖11-7網(wǎng)頁導(dǎo)航欄示意圖11.2.5主體內(nèi)容

主體內(nèi)容是頁面設(shè)計(jì)的主體元素。它一般是二級鏈接內(nèi)容的標(biāo)題，或者是內(nèi)容提要，或者是內(nèi)容的部分摘錄。其表現(xiàn)手法一般是圖像和文字結(jié)合。它的布局通常按內(nèi)容的分類進(jìn)行分欄安排。瀏覽者瀏覽頁面時(shí)，一般按從左到右、從上到下的順序，所以重要的內(nèi)容一般安排在頁面的左上位置，次要的內(nèi)容安排在右下方，如圖11-8所示。

圖11-8網(wǎng)頁中主體內(nèi)容示意圖11.2.6搜索引擎和友情鏈接

1.搜索引擎

搜索是除了電子郵件以外被用得最多的網(wǎng)絡(luò)工具。通過搜索引擎查找是網(wǎng)絡(luò)沖浪者尋找網(wǎng)上信息和資源的主要手段。

常用的英文搜索引擎主要有Google、Inktomi、Altavista等；常用的中文搜索引擎主要有百度、搜狐等。不同的搜索引擎對頁面的提取、索引、排序的規(guī)則都不一樣。搜索引擎會自動收集相關(guān)內(nèi)容，顯示搜索結(jié)果時(shí)，除了主頁外還會顯示大量的頁面內(nèi)容，如圖11-9所示。一個(gè)好的網(wǎng)站，通常設(shè)有站內(nèi)搜索引擎和站外搜索引擎。站內(nèi)搜索引擎主要起著搜索站內(nèi)內(nèi)容的作用，站外搜索引擎通常利用超鏈接的方式將一些主流搜索引擎掛接在本站中來擴(kuò)大搜索的范圍。

圖11-9常用的搜索引擎

2.友情鏈接

網(wǎng)站友情鏈接，也稱為交換鏈接、互惠鏈接、互換鏈接等，是具有一定資源互補(bǔ)優(yōu)勢的網(wǎng)站之間的簡單合作形式，即合作網(wǎng)站之間分別在自己的網(wǎng)站上放置對方網(wǎng)站的LOGO或網(wǎng)站名稱，并設(shè)置對方網(wǎng)站的超級鏈接，使得用戶可以從合作網(wǎng)站中發(fā)現(xiàn)自己的網(wǎng)站，達(dá)到互相推廣的目的。友情鏈接常作為一種網(wǎng)站推廣手段，也可以看做是對網(wǎng)站功能的一種補(bǔ)充，訪問者可以從一個(gè)網(wǎng)站跳轉(zhuǎn)到其友情鏈接的網(wǎng)址上以獲取更多的內(nèi)容。實(shí)際上，友情鏈接的主要作用有以下兩點(diǎn):

(1)通過和其他站點(diǎn)交換鏈接，可以吸引更多的用戶點(diǎn)擊訪問。

(2)搜索引擎會根據(jù)交換鏈接的數(shù)量以及交換鏈接網(wǎng)站質(zhì)量等對一個(gè)網(wǎng)站做出綜合評價(jià)，這也將是影響網(wǎng)站在搜索引擎排名的因素之一。

設(shè)計(jì)的比較好的網(wǎng)站，往往會有跳躍的色彩，精美的圖片，使瀏覽者流連忘返，即使對其中的文字內(nèi)容并沒有什么興趣，那些精致的圖片廣告也能吸引人們的注意，這就是網(wǎng)頁頁面設(shè)計(jì)的魅力。11.3網(wǎng)頁設(shè)計(jì)的基本原則和表現(xiàn)手法通過網(wǎng)頁頁面設(shè)計(jì)能把一種概念、一種思想通過精美的構(gòu)圖、版式和色彩，傳達(dá)給瀏覽網(wǎng)頁的人。進(jìn)行網(wǎng)頁頁面設(shè)計(jì)，必須要掌握一些網(wǎng)頁設(shè)計(jì)基本原則和表現(xiàn)手法并學(xué)會靈活運(yùn)用。11.3.1網(wǎng)頁設(shè)計(jì)的基本原則

網(wǎng)頁設(shè)計(jì)最重要的一個(gè)原則是：創(chuàng)意。這個(gè)原則也可以看成是網(wǎng)頁設(shè)計(jì)的根本，沒有創(chuàng)意的網(wǎng)站不能算是成功的網(wǎng)站。除此之處，還要遵循以下基本原則。

1.內(nèi)容設(shè)計(jì)原則

(1)內(nèi)容優(yōu)先：要想提高網(wǎng)站的訪問率，首先要在內(nèi)容上多下工夫。

(2)版權(quán)問題：網(wǎng)頁中引用的資料，一定不能侵犯他人的版權(quán)。

2.版式設(shè)計(jì)原則

(1)統(tǒng)一：注意頁面設(shè)計(jì)的整體性和一致性。

(2)平衡：注意頁面中圖像、文字的視覺分布。

(3)連貫和呼應(yīng)：注意頁面的相互關(guān)聯(lián)關(guān)系。

(4)布局分割：將頁面分成若干塊，每一塊之間有視覺上的不同，使瀏覽者一目了然。

(5)對比：通過“矛盾”與“沖突”，使設(shè)計(jì)更有生氣。

(6)和諧：整個(gè)頁面符合美學(xué)法則，渾然一體。

3.色彩設(shè)計(jì)原則

(1)總體協(xié)調(diào)、局部對比：頁面的整體色彩效果應(yīng)該是和諧的，只在局部、小范圍使用一些強(qiáng)烈的色彩對比。

(2)色彩搭配要鮮明、獨(dú)特、舒適并富于聯(lián)想。

4.圖像與文本運(yùn)用原則

(1)圖像運(yùn)用原則：慎用圖像并選擇適當(dāng)?shù)膱D像格式。

(2)文本運(yùn)用原則：盡量使用默認(rèn)字體，合理選用字號。

圖11-10黑色背景示意圖11.3.2網(wǎng)頁設(shè)計(jì)中的表現(xiàn)手法

1.背景

許多網(wǎng)頁的背景都是純色的，實(shí)際上在網(wǎng)頁中選用適當(dāng)?shù)谋尘翱稍鰪?qiáng)頁面的感染力。背景的色彩應(yīng)該與頁面的色彩相協(xié)調(diào)。要使自己的網(wǎng)頁美觀，合理地使用顏色是非常重要的。

如果設(shè)計(jì)的網(wǎng)頁屬于較莊重的，可以使用藍(lán)色作背景，因?yàn)檫@樣看來比較肅穆安靜一些；如果網(wǎng)頁的情感色彩較濃，可多使用一些浪漫的顏色，如粉紅色、淡紫色和玫瑰紅等。背景中不常用黑色，因?yàn)楹谏畛粒o人以壓抑感，與其他顏色也不好搭配。在設(shè)計(jì)中，黑色通常是用來勾畫或點(diǎn)綴最深沉部分的，如圖11-10所示。

2.文字內(nèi)容

當(dāng)標(biāo)題確定后，就要采集內(nèi)容。所采集的內(nèi)容必須與標(biāo)題相符，同時(shí)要保證內(nèi)容的正確性，還要注意的是內(nèi)容的數(shù)量。一般說來，站點(diǎn)的質(zhì)量是與它的內(nèi)容成正比的，只有豐富的內(nèi)容才能滿足更廣泛的瀏覽者需求。但內(nèi)容不要過于繁雜，同時(shí)應(yīng)保證內(nèi)容的趣味性。在采集內(nèi)容的過程中，—定要注意內(nèi)容的特色。

所謂特色，就是指要突出個(gè)性，如果是個(gè)人主頁，就要突出自己的性格、興趣、愛好等；如果是企業(yè)網(wǎng)頁，那就要突出本企業(yè)的特點(diǎn)。對文字內(nèi)容應(yīng)進(jìn)行分類，設(shè)置欄目，讓人清楚明了。網(wǎng)頁欄目的設(shè)置不要太多，要注意分層，較重要的欄目最好能從首頁進(jìn)入，并且保證用各種瀏覽器都能看到頁面的最佳效果。

3.圖片

一個(gè)頁面上如果沒有圖片只有文字?jǐn)⑹觯隙〞屓烁械剿魅粺o味，因此必須在網(wǎng)頁上加—些圖片，以增加其可視性。通常根據(jù)頁面中使用圖片數(shù)量的多少，可以把常見的網(wǎng)頁劃分為以下五類：

(1)完全沒有圖片的網(wǎng)頁(一般放在最后一頁)。

(2)有少量圖片的網(wǎng)頁(常作為綜合類網(wǎng)站的第二頁)。

(3)有大量圖片的網(wǎng)頁(個(gè)人網(wǎng)站或?qū)ｉT網(wǎng)站，如攝影網(wǎng)站，服裝、服飾類網(wǎng)站等多見)。

(4)恰當(dāng)使用圖片的網(wǎng)頁(綜合類網(wǎng)站的第一頁，即首頁)。

(5)使用圖片不當(dāng)?shù)木W(wǎng)頁(個(gè)人網(wǎng)站多見)。

有大量圖片的網(wǎng)頁也許看起來很夠勁，但必須注意到美觀只是網(wǎng)頁的要求之一，看上去很漂亮的網(wǎng)頁有可能是完全失敗的。

在理想的狀態(tài)下，網(wǎng)頁應(yīng)該是既美觀又實(shí)用的，這樣的網(wǎng)頁才會引人注目。這就要求設(shè)計(jì)者高效地運(yùn)用圖片，用來吸引瀏覽者的視線并引發(fā)他們想象。

4.其他內(nèi)容

如果想使自己的網(wǎng)站更具有特色，可適當(dāng)?shù)厥褂靡恍┚W(wǎng)頁制作技巧，如添加背景音樂、制作動態(tài)網(wǎng)頁等，這些措施可以讓網(wǎng)頁更具可觀性，但是這些技巧不要加得太多，否則會影響網(wǎng)頁下載的速度。11.3.3網(wǎng)頁設(shè)計(jì)需考慮的問題

1.網(wǎng)頁空間與頁面尺寸

在瀏覽網(wǎng)頁時(shí)，人們所能直接看到的頁面只是顯示器屏幕的一部分。因?yàn)g覽器的工具條還要占據(jù)部分屏幕空間，所以所顯示的網(wǎng)頁屏幕尺寸還會再小一些。

目前，大多數(shù)顯示器的分辨率設(shè)置為800

×

600，所以我們在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)要以分辨率800

×

600為標(biāo)準(zhǔn)。不少設(shè)計(jì)者為了使頁面在瀏覽器上顯示最佳狀態(tài)，讓訪問者舒適地瀏覽頁面，會特意在在頁面的頁眉或頁腳處標(biāo)注“建議屏幕分辨率為800

×

600”等字樣。

2.頁面的安全寬度

當(dāng)顯示器分辨率設(shè)置為800

×

600時(shí)，即瀏覽器的屏幕最大寬度為800像素，因垂直方向的滾動條占去20像素，網(wǎng)頁的安全寬度應(yīng)為780像素。所以，頁面設(shè)計(jì)寬度只有限制在780像素以內(nèi)，在用800

×

600分辨率的顯示器瀏覽時(shí)，水平方向才能夠全部在視屏范圍內(nèi)，如圖11-11所示。如果頁面寬度超過780像素，則會產(chǎn)生水平方向的滾動條，如圖11-12所示。

圖11-11頁面寬度為780像素

通常，如果需要訪問者拖拽水平滾動條才能瀏覽到網(wǎng)頁的全部內(nèi)容，那么這個(gè)網(wǎng)頁設(shè)計(jì)就不能認(rèn)為十分成功，不管頁面本身是多么漂亮。

圖11-12頁面寬度大于780像素

3.頁面的最佳長度

頁面的寬度作了嚴(yán)格的限制以后，頁面長度的定義相對寬松多了，通?？梢允?～3屏不等?？紤]到整個(gè)網(wǎng)頁的下載速度、訪問者瀏覽的方便性以及信息含量、網(wǎng)站的類型等因素，頁面的長度也不盡相同。根據(jù)經(jīng)驗(yàn)，中小型網(wǎng)站主頁面的最佳長度應(yīng)在1～2屏之間。很多大型的網(wǎng)站為了在主頁面內(nèi)增加信息含量，使內(nèi)容更能直觀地面對訪問者，則把主頁面的尺寸設(shè)置為3屏左右或更長。

11.4.1一致性與和諧性

在網(wǎng)頁版式設(shè)計(jì)中特別要強(qiáng)調(diào)圖文的一致性與和諧性，即版式的視覺流程。11.4網(wǎng)頁版式設(shè)計(jì)的視覺流程版式設(shè)計(jì)的視覺流程是一種“空間的運(yùn)動”，是視線隨各元素在空間沿一定軌跡運(yùn)動的過程，這種視覺在空間的流動線為一種“虛”線。正因?yàn)樗摚栽O(shè)計(jì)時(shí)容易被忽略。有經(jīng)驗(yàn)的設(shè)計(jì)師非常重視并善于運(yùn)用這條貫穿版面的主線?？梢哉f，視覺流程運(yùn)用的好壞，是設(shè)計(jì)師技巧是否成熟的表現(xiàn)。視覺流程可以從理性與感性及方向關(guān)系流程與散點(diǎn)流程來分析。

瀏覽網(wǎng)站的時(shí)候經(jīng)?？梢钥吹竭@樣的網(wǎng)頁，網(wǎng)頁中擠排滿了內(nèi)容，沒有考慮它的空間框架、編排秩序，所有內(nèi)容在頁面占著均衡的地位，讓人無法知曉哪些內(nèi)容才是最主要的。這種頁面沒有流暢的視覺流程，是沒有注意到編排的清晰度、可讀性的典型。

在網(wǎng)頁編排的過程中，首先要將零亂頁面加以組織，混雜的內(nèi)容則根據(jù)整體布局的需要進(jìn)行分組歸納，通過內(nèi)在聯(lián)系的組織排列，并要反復(fù)推敲文字、圖形與空間的關(guān)系，找到最適合它們的位置。各類內(nèi)容，或主或從，各自在頁面上找到自己的“舞臺”，在混亂無序的狀態(tài)中創(chuàng)造新秩序使其成為豐富多樣而又簡潔明確的統(tǒng)一整體，在對比中達(dá)到和諧統(tǒng)一。方向關(guān)系的流程強(qiáng)調(diào)邏輯，注重版面的清晰脈絡(luò)，似乎有一條線、一股氣貫穿其內(nèi)，使整個(gè)版面的運(yùn)動趨勢有“主體旋律”，細(xì)節(jié)與主體猶如樹干和樹枝一樣和諧。方向關(guān)系流程較散點(diǎn)關(guān)系流程更具理性色彩。方向關(guān)系表現(xiàn)為以下幾種形式。

1.單向視覺流程

單向視覺流程使頁面的流動簡明，便于直接表達(dá)主題內(nèi)容，并有簡潔而強(qiáng)烈的視覺效果。其表現(xiàn)為三種方向關(guān)系：

(1)豎向視覺流程——堅(jiān)定、直觀的感覺，如圖11-13所示。

(2)橫向視覺流程——穩(wěn)定、恬靜之感，如圖11-14所示。

圖11-13豎向視覺流程示意圖

圖11-14橫向視覺流程示意圖

(3)斜向視覺流程——以不穩(wěn)定的動態(tài)引起注意，如圖11-15所示。

2.曲線視覺流程

各視覺要素隨弧線或回旋線而變化的流程被稱為曲線視覺流程。曲線視覺流程不如單向視覺流程直接簡明，但更具韻味、節(jié)奏和曲線美。曲線流程的形式微妙而復(fù)雜，可概括為弧線形“C”和回旋形“S”?；【€形具有飽滿、擴(kuò)張的特點(diǎn)，有一定的方向感；回旋形兩個(gè)相反的弧線產(chǎn)生矛盾回旋，在平面中增加深度和動感，如圖11-16所示。

圖11-15斜向視覺流程示意圖

圖11-16曲線視覺流程示意圖

3.重心視覺流程

這里的重心是指視覺心理的重心，可理解為：其一，以強(qiáng)烈的形象或文字獨(dú)據(jù)頁面某個(gè)部位或完全充斥整版，其重心的位置因其具體畫面而定。在視覺流程上，首先是從頁面重心開始，然后順沿形象的方向與力度的傾向來發(fā)展視線的進(jìn)程。其二，向心、離心的視覺運(yùn)動，也是重心視覺流程的表現(xiàn)。重心的誘導(dǎo)流程使主題更為鮮明突出而強(qiáng)烈，如圖11-17所示。

圖11-17重心視覺流程示意圖

4.反復(fù)視覺流程

反復(fù)視覺流程指相同或相似的視覺要素做規(guī)律、秩序、節(jié)奏的逐次運(yùn)動。其運(yùn)動流程不如單向、曲線和重心流程運(yùn)動強(qiáng)烈，但更富于韻律和秩序美，如圖11-18所示。

5.導(dǎo)向視

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論