1、網(wǎng) 站 設(shè) 計(jì) 與 建 設(shè)Website design and developments第1章 Web設(shè)計(jì)綜述第一部分 Web基礎(chǔ)知識(shí)3網(wǎng)頁、網(wǎng)站、主頁、封頁與超鏈接等基本概念Web比傳統(tǒng)媒體所具有的獨(dú)特特征 Web技術(shù)以及相關(guān)工具Web設(shè)計(jì)原則 概 述Web 設(shè)計(jì)最基本原則Web 最小公分母設(shè)計(jì)原則Web 頁面布局設(shè)計(jì)原則Web 顏色設(shè)計(jì)原則Web 字體設(shè)計(jì)原則 Web 設(shè)計(jì)深刻影響1.1 Internet與Intranet Internet又稱為因特網(wǎng)，是一個(gè)全球性的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)。它既是一個(gè)多媒體的通信媒介，又是一個(gè)無限的信息資源。它由成千上萬個(gè)不同規(guī)模的網(wǎng)絡(luò)通過自愿原則采用TCP/IP

2、協(xié)議互相連接起來的一個(gè)巨型計(jì)算機(jī)網(wǎng)絡(luò)。 Intranet是指企業(yè)內(nèi)部網(wǎng)，它采用 Internet 的協(xié)議標(biāo)準(zhǔn)，應(yīng)用 Internet 的現(xiàn)有技術(shù)建設(shè)的企業(yè)內(nèi)部網(wǎng)絡(luò)。 1.2 網(wǎng)頁，網(wǎng)站，封頁與主頁WWW的含義是環(huán)球信息網(wǎng)(World Wide Web)，也簡(jiǎn)稱為 Web網(wǎng)或“萬維網(wǎng)”。 網(wǎng)頁 (Web Page)網(wǎng)站 (Web Site) 也叫站點(diǎn)，是指在Internet上，由一組相互關(guān)聯(lián)的文檔和各種網(wǎng)頁元素組成的集合。 主頁（Home Page） 超鏈接（Hyperlink） 超文本（Hypertext）6封頁(Cover Page)在主頁前面的網(wǎng)頁，內(nèi)容非常簡(jiǎn)潔，一般是簡(jiǎn)易抽象的繪圖或fl

3、ash動(dòng)畫，闡述網(wǎng)站當(dāng)下宣傳的主題和意念，網(wǎng)站封頁一般顯示幾秒的很短時(shí)間就自動(dòng)跳轉(zhuǎn)到主頁或點(diǎn)擊封頁也可以直接進(jìn)入主頁。現(xiàn)在很多網(wǎng)站開始流行“封頁”設(shè)計(jì)，但網(wǎng)站不一定一直有封頁，封頁一個(gè)網(wǎng)站頂多有一個(gè)。封頁相當(dāng)于書的封皮，主頁相當(dāng)于書的目錄，其他網(wǎng)頁相當(dāng)于內(nèi)容書頁。7封頁實(shí)例Web2.0Web2.0 是相對(duì)Web1.0 的新的一類互聯(lián)網(wǎng)應(yīng)用的統(tǒng)稱。Web1.0 的主要特點(diǎn)在于用戶通過瀏覽器獲取信息。Web2.0 則更注重用戶的交互作用，用戶既是網(wǎng)站內(nèi)容的瀏覽者，也是網(wǎng)站內(nèi)容的制造者。web2.0網(wǎng)站與web1.0沒有絕對(duì)的界限。web2.0技術(shù)可以成為web1.0網(wǎng)站的工具，一些在web2.0概

4、念之前誕生的網(wǎng)站本身也具有web2.0特性web2.0的核心不是技術(shù)而在于指導(dǎo)思想。Web2.0與其說是一種新技術(shù)不如說是一種新的理念博客（Blog）、維基（Wiki）等Web 3.0Web 3.0一詞包含多層含義，用來概括互聯(lián)網(wǎng)發(fā)展過程中可能出現(xiàn)的各種不同的方向和特征包括將互聯(lián)網(wǎng)本身轉(zhuǎn)化為一個(gè)泛型數(shù)據(jù)庫；跨瀏覽器、超瀏覽器的內(nèi)容投遞和請(qǐng)求機(jī)制；人工智能技術(shù)的運(yùn)用；語義網(wǎng)；地理映射網(wǎng)；運(yùn)用3D技術(shù)搭建的網(wǎng)站甚至虛擬世界或網(wǎng)絡(luò)公國等111.3 Web媒體新特征Web多媒體： Web是豐富多彩的多媒體 Web是非線性媒體：用戶可以隨時(shí)跳轉(zhuǎn)到其他網(wǎng)頁或網(wǎng)站,傳統(tǒng)媒體是線性的。Web交互性：客戶可與頁

5、面互動(dòng)與被動(dòng)地接受廣播信息有本質(zhì)的區(qū)別。個(gè)性化 ：可提供一對(duì)一的客戶需求信息。一對(duì)一關(guān)系：大眾媒體的概念和應(yīng)用對(duì)于Internet無效,傳統(tǒng)媒體為廣播式傳播。Web主動(dòng)性： 主動(dòng)獲得信息。Web平等身份：聊天、博客(部落閣)、BBS、在線游戲和電子商務(wù)等。 1211.Web媒體新特征-續(xù)Web即時(shí)交流：E-email、聊天、在線游戲等。Web提供電子商務(wù)：B2C、C2C電子商務(wù)網(wǎng)站。 信息搜索能力：有強(qiáng)大的信息搜索能力 如google Web即時(shí)性：一旦信息發(fā)布，瞬間就可借助Internet傳遍世界各地，傳統(tǒng)媒體做不到的。Web采用B/S架構(gòu)： Web站點(diǎn)發(fā)布與傳統(tǒng)軟件C/S不同，省時(shí)省力、便

6、于維護(hù)與發(fā)布。無需培訓(xùn)：易于瀏覽信息、不需要任何客戶培訓(xùn)，無須安裝與卸載客戶端軟件。Web信息易修改、傳播速度快和傳播成本低。 Web充分使用原有信息：Web信息可以存于數(shù)據(jù)庫中，傳統(tǒng)媒體難于使用眾多類信息和已有信息。131.4 Web技術(shù)和工具Web技術(shù)是人類所經(jīng)歷的發(fā)展最快的技術(shù)B/技術(shù)：瀏覽器/服務(wù)器模式，所有頁面信息和數(shù)據(jù)都放置在了服務(wù)器端，客戶機(jī)上只需要有瀏覽器。 Web常用技術(shù)：HTML、DHTML、CSS、XML、AJAX 、JavaScript和Java Applets。 網(wǎng)頁設(shè)計(jì)工具：FrontPage、Dreamweaver、HotDog Professional、Nets

7、cape Communicator、IBM RSA、Eclipse、Web Page Maker和BEA WebLogic Workshop等。由于HTML網(wǎng)頁文件是一個(gè)純ASCII文檔，任何一個(gè)編輯器都可以編輯該類型文件 最好的網(wǎng)站設(shè)計(jì)方法：手工編碼加上所見即所得的工具。 141.5 Web設(shè)計(jì)最基本原則Web最基本設(shè)計(jì)原則：Web內(nèi)容永遠(yuǎn)是第一位的，多媒體外觀設(shè)計(jì)與設(shè)計(jì)技術(shù)始終是第二位的。Web內(nèi)容是第一位的與Web客戶是第一位的，是一致的。Web客戶是指瀏覽網(wǎng)站的主要用戶群。站點(diǎn)在設(shè)計(jì)時(shí)既應(yīng)該專注客戶的共性，也應(yīng)該兼顧個(gè)性。15Web客戶特點(diǎn)80%的Web客戶只掃描網(wǎng)頁的關(guān)鍵字和短語普通

8、客戶讀Web內(nèi)容比紙張慢25%。Web客戶和站點(diǎn)設(shè)計(jì)關(guān)系：Web設(shè)計(jì)必須吸引人，以客戶為本，引導(dǎo)他快速找到他所需要的內(nèi)容。Web客戶不希望網(wǎng)頁充斥無關(guān)內(nèi)容和混亂圖像。內(nèi)容很重要，布局和傳遞也很重要。用可以贏得客戶的布局特性來創(chuàng)建網(wǎng)頁。確定當(dāng)前網(wǎng)頁設(shè)計(jì)客戶資源環(huán)境最好的方法就是訪問一些著名網(wǎng)站，了解這些網(wǎng)站的設(shè)計(jì)。網(wǎng)站設(shè)計(jì)還要特別考慮你的客戶群，針對(duì)不同的客戶群可能客戶環(huán)境差別是很大的 171.6 Web最小公分母設(shè)計(jì)原則網(wǎng)站設(shè)計(jì)人員：最新的硬件、軟件和插件。設(shè)計(jì)基礎(chǔ)指導(dǎo)原則：最小公分母設(shè)計(jì)：使用大眾客戶群最低的環(huán)境設(shè)計(jì)網(wǎng)站，讓更多的客戶能順暢瀏覽網(wǎng)站。15吋顯示器。分辨率：800*60036.

9、6Kb/s ModemIE6或更早兼容Google Chrome、FireFox和360安全瀏覽器極少用戶會(huì)花時(shí)間下載插件(flash插件除外)參照著名網(wǎng)站的設(shè)計(jì)(最有效)網(wǎng)站設(shè)計(jì)還要特別考慮你的客戶群 800*600 1024*768 1280*1024返回1.7 Web頁面與傳統(tǒng)軟件用戶界面 都依賴于圖形用戶界面（GUI），即含有同樣的基本設(shè)計(jì)構(gòu)件：窗口、圖標(biāo)、菜單和指針。Web頁面更注重的是信息的展示，而傳統(tǒng)軟件界面更注重的是系統(tǒng)功能的實(shí)現(xiàn) Web站點(diǎn)比傳統(tǒng)軟件更專注于內(nèi)容 “Web內(nèi)容永遠(yuǎn)都是第一位的” 241.8 Web頁面布局Web 頁面布局：是對(duì)頁面的整體規(guī)劃，即對(duì)頁面劃分成不同

10、的區(qū)域，用于放置不同的頁面元素。網(wǎng)頁布局直接影響到網(wǎng)站的外觀和結(jié)構(gòu),頁面布局按照導(dǎo)航元素放置的位置進(jìn)行分類。 25 Web頁面布局設(shè)計(jì)原則 1/2頁面布局應(yīng)該遵循翻轉(zhuǎn)金字塔樣式：首先提供給用戶一個(gè)摘要列表，然后是對(duì)細(xì)節(jié)的鏈接或者引用。 頁面布局是設(shè)計(jì)人員向用戶展示信息的方式，必須具有邏輯性、易于理解，并遵守它。一定不要設(shè)計(jì)左右拖動(dòng)頁面，可以上下拖動(dòng)頁面，而且不易拖動(dòng)過長，客戶往往會(huì)忽視頁面下面的內(nèi)容。借鑒成功相似網(wǎng)站的頁面布局。 26Web頁面布局設(shè)計(jì)原則 2/2對(duì)于整個(gè)網(wǎng)站每個(gè)頁面的布局應(yīng)該相對(duì)保持協(xié)調(diào)一致，不應(yīng)該有大的跳躍感覺。頁面布局對(duì)于一個(gè)網(wǎng)站不易過多，應(yīng)該根據(jù)網(wǎng)站內(nèi)容合理地設(shè)計(jì)頁面布

11、局。同類型網(wǎng)頁應(yīng)該有相同和非常相似的頁面結(jié)構(gòu)。切忌不要邊設(shè)計(jì)邊修改頁面布局，否則會(huì)浪費(fèi)很多時(shí)間和精力，一旦確定就不要輕易修改。公共布局格式：按導(dǎo)航元素放置的方式分類左邊空白布局上邊空白布局分布式左邊和上邊空白布局右邊空白布局上邊和中部布局上下布局分布式布局藝術(shù)風(fēng)格布局左邊空白布局左邊空白布局上邊空白布局上左邊空白布局右邊空白布局上下邊空白布局分布式布局藝術(shù)風(fēng)格布局網(wǎng)頁布局元素網(wǎng)頁布局：在建立網(wǎng)站前應(yīng)首先考慮網(wǎng)站的外觀和結(jié)構(gòu)。從視覺和技術(shù)角度審視整個(gè)頁面元素以及它們之間的關(guān)系。然后在整個(gè)網(wǎng)站上貫徹所選擇的元素：布局、字體、顏色、圖像以及其它多媒體。頁面布局是設(shè)計(jì)人員向用戶展示信息的方式，必須規(guī)劃

12、一個(gè)結(jié)構(gòu)，要具有邏輯性、易于理解，并遵守它。網(wǎng)頁布局元素包括頁面規(guī)劃布局、邊界、字體、顏色、圖像以及表格等：框架：規(guī)劃頁面布局，允許同時(shí)顯示多個(gè)頁面。表格：規(guī)劃頁面布局，在單元格上可以放置各種網(wǎng)頁元素，容易排版。導(dǎo)航：控制用戶在網(wǎng)站內(nèi)的移動(dòng)。段落：在頁面上分組文本字符。圖像：提供視覺吸引、信息和導(dǎo)航。列表：組織并強(qiáng)調(diào)某些信息條目。顏色：提供網(wǎng)站整體色彩感覺，增加可讀性、易于分類。邊距：控制顯示內(nèi)容距瀏覽器窗口邊界的距離。邊界：為HTML表和框架提供可見的邊界?？瞻祝簻p少頁面元素混亂，分開頁面上的元素 空白在網(wǎng)頁設(shè)計(jì)中非常重要，它能夠使網(wǎng)頁看起來簡(jiǎn)潔、明快，閱讀舒暢，是網(wǎng)頁設(shè)計(jì)中必不可缺少的元素

13、。切記不要將盡可能多得信息放在一個(gè)網(wǎng)頁中，應(yīng)該有合理的、簡(jiǎn)明的分類，不要強(qiáng)迫客戶從一堆信息中艱難地挑出所需要的信息，要讓客戶自己選擇是否進(jìn)入更深的鏈接獲得信息。也不要只為了讓頁面變短而分割頁面，除非是在邏輯斷點(diǎn)處。每一個(gè)頁面都應(yīng)該是獨(dú)立完整的。 頁面布局技術(shù)(1)層疊樣式表(CSS)能完全精確的定位文本和圖片瀏覽器是否支持CSS技術(shù)(2)表格頁面布局：邊界為0(3)框架頁面布局(4)透明GIF頁面布局 占位圖像 (5) Flash頁面布局頁面布局技術(shù)：頁面尺寸切記在網(wǎng)頁設(shè)計(jì)過程中，一定不要左右拖動(dòng)頁面，只能上下拖動(dòng)頁面，而且也不能拖動(dòng)過長，客戶往往會(huì)忽視頁面下面的內(nèi)容。1.9 顏色與Web設(shè)計(jì)

14、 當(dāng)訪問一個(gè)網(wǎng)站時(shí)，給我們的第一感覺是什么？是顏色。 色彩以一種“隱蔽”的方式傳達(dá)的各種信息 幾乎每一個(gè)成功的企業(yè)都有企業(yè)文化顏色，微軟公司的顏色是天藍(lán)色、Oracle公司的顏色是紅黑色、IBM公司的顏色是藍(lán)色等發(fā)光物體三基色：紅、綠、藍(lán) (RGB)不發(fā)光物體的印刷四色：青、洋紅、黃、黑 (CMYK) 青(C)、洋紅(M)、黃(Y)和黑(K) 色彩都具有三個(gè)要素：色調(diào)、飽和度、亮度（或明度） 色調(diào)（Hue，簡(jiǎn)稱：H）：指顏色的種類，它反映了顏色的基本面貌和性質(zhì)。如：紅、綠、藍(lán)等各種顏色。色調(diào)H的單位是度，表示在顏色環(huán)上所處位置的角度；飽和度（Saturation，簡(jiǎn)稱：S）：指顏色的深淺程度或

15、濃淡程度。一般鮮艷的色彩其飽和度都比較高，較刺眼，故飽和度高的顏色一般不用作網(wǎng)頁背景。飽和度S的單位是百分比。亮度（Brightness，簡(jiǎn)稱：B）： 指顏色的明暗程度。如白色亮度高，黑色亮度低；黃色亮度最高，紫色亮度最低。亮度B的單位是百分比。Photoshop拾色器顏色格式兩種數(shù)值格式：RGB值十六進(jìn)制數(shù)值RGB：“0，255，0” 綠十六進(jìn)制數(shù)：“#00FF00” 綠顏色數(shù)為16777216種顏色(256256256，224) 瀏覽器支持的216個(gè)顏色(另40個(gè)用于OS)抖動(dòng)：瀏覽器將顏色近似為它所支持的最近安全顏色的過程。顏色和Web設(shè)計(jì)色環(huán)：將色彩按“紅黃綠青藍(lán)紫紅”依次過渡漸變，就

16、可以得到一個(gè)色環(huán)。在色環(huán)中，可以將顏色分為：暖色系、中性系和冷色系 配色方案單色方案色調(diào)H值得到基本顏色，再通過調(diào)整亮度B以及飽和度S得到其他幾種相近顏色。 相似色方案色彩圓環(huán)上選擇彼此相鄰的幾種顏色構(gòu)成的配色方案就是相似色方案 配色方案補(bǔ)色方案在色彩圓環(huán)上沿直徑相對(duì)應(yīng)的兩種顏色構(gòu)成一對(duì)互補(bǔ)色，綠色和紅色為互補(bǔ)色，綠色旁邊的深綠色和藍(lán)綠色以及紅色旁邊的橙紅色以及深紅色就構(gòu)成了一組雙重互補(bǔ)色 三合一色方案三色方案是指在色彩圓環(huán)中選擇一個(gè)等邊三角形三個(gè)頂點(diǎn)上的顏色構(gòu)成的配色方案。紅、黃、藍(lán)是一個(gè)三色方案， 58Web顏色設(shè)計(jì)原則(1/2)：最直接的視覺沖擊網(wǎng)站應(yīng)該使用企業(yè)原有CI顏色，需要簡(jiǎn)潔、新

17、穎、舒服、大方，充分體現(xiàn)企業(yè)的文化形象。網(wǎng)頁色系要整個(gè)網(wǎng)站需要保持一致。網(wǎng)站的色系可以分為暖色系、中性系和冷色系幾種。色系包含了網(wǎng)頁底色、文字顏色、圖片顏色、動(dòng)畫顏色和邊框顏色等。Web三色原則：除了黑色和白色以外，主要顏色原則上不要超過三種，太多的顏色會(huì)導(dǎo)致網(wǎng)頁色彩雜亂，令人厭煩。 5925.顏色確定原則 (2/2)選擇一種適合的配色方案網(wǎng)頁元素應(yīng)該選擇與網(wǎng)站主體相一致的色調(diào)圖像的顏色應(yīng)該盡可能的少，從而減少圖片尺寸應(yīng)使用瀏覽器支持的216個(gè)Web安全顏色 顏色確定原則：最直接的視覺沖擊盡可能使用瀏覽器支持的216個(gè)顏色顏色數(shù)目不應(yīng)使用過多,除了黑色和白色以外，選擇三到四個(gè)顏色就足夠了 所有

18、頁面顏色要與主頁保持一致顏色形成一種風(fēng)格：圖像、文字、底色網(wǎng)站的色系包含了網(wǎng)頁底色、文字顏色、圖片顏色、動(dòng)畫顏色和邊框顏色等，這不單只是將顏色搭配得當(dāng)就算完美，還要配合網(wǎng)站主題及信息內(nèi)容。 使用戶感到簡(jiǎn)潔、新穎、舒服、大方，充分體現(xiàn)公司企業(yè)的形象1.10. 字體和Web設(shè)計(jì)網(wǎng)頁中的文本有兩種：HTML文本圖形文件格式的文字圖像 最常用的英文字體是Times New Roman(Macintosh為Times)Arial(Macintosh為Helvetica)，最常用的中文字體是宋體英文字體分兩類: Serif（襯線）有那種邊邊角角的字體。比如說Times New Roman常用于印刷業(yè)，可以用來清楚地分辨出每一個(gè)字母，因此讀者瀏覽那些字?jǐn)?shù)比較多的段落就變得很輕松。 Sans-SerifArial特征就是簡(jiǎn)潔大方。幾乎所有的廣告、標(biāo)志，幻燈片，系統(tǒng)、程序和網(wǎng)頁使用這種字體這是因?yàn)轱@示器的分辨率低，而字體不能減小。如果用Serif字體，那些邊邊角