網(wǎng)頁界面設(shè)計(jì)與前端架構(gòu)

1、演講人：瑞達(dá)丁文隆時(shí)間：網(wǎng)站的整體設(shè)計(jì)明確問題網(wǎng)站制作流程網(wǎng)站設(shè)計(jì)者的定位明確問題為什么需要建立個(gè)網(wǎng)站？它需要和誰進(jìn)行交互？它的訪問者的興趣所在？它的訪問者將獲得什么樣的信息？它怎樣才能最有效的實(shí)現(xiàn)交互？它是否需要建立大型交互式項(xiàng)目？它必須在何時(shí)建立？（網(wǎng)站開通時(shí)間）在預(yù)算內(nèi)按時(shí)完成項(xiàng)目目標(biāo)？你有那些資源可以幫助訪問者？預(yù)算網(wǎng)站訪問者花費(fèi)多久才能獲得必要的資源？如果在訪問者離開一個(gè)站點(diǎn)數(shù)分鐘后對(duì)他采訪，你希望他會(huì)記住那些細(xì)節(jié)？訪問這個(gè)網(wǎng)站的經(jīng)歷會(huì)對(duì)訪問者的想法和行動(dòng)產(chǎn)生什么樣的影響？如何吸引那些在線或者離線的訪問者迅速活動(dòng)起來？網(wǎng)站是否合法？網(wǎng)站的制作流程策劃網(wǎng)站網(wǎng)站布局規(guī)劃色彩搭配收集資料鏈

2、接設(shè)計(jì)界面設(shè)計(jì)域名和空間部署網(wǎng)站廣告宣傳維護(hù)與更新網(wǎng)站設(shè)計(jì)者的定位網(wǎng)頁設(shè)計(jì)不僅涉及平面構(gòu)成、色彩構(gòu)成、CI等方面的知識(shí)，還涉及Java、JavaScript、數(shù)據(jù)庫等知識(shí)。設(shè)計(jì)者的任務(wù)1.確定CI.通過視覺來統(tǒng)一企業(yè)形象。包括：網(wǎng)站標(biāo)志、標(biāo)準(zhǔn)色彩、標(biāo)準(zhǔn)字體、宣傳標(biāo)語等。2.創(chuàng)建交互界面。3.功能實(shí)現(xiàn)。4.網(wǎng)頁之間的有效鏈接。5.視覺美感。網(wǎng)頁布局平面設(shè)計(jì)元素在網(wǎng)頁布局中的應(yīng)用點(diǎn)。線。面?？臻g平面設(shè)計(jì)原理在網(wǎng)頁布局中的應(yīng)用均衡性-設(shè)計(jì)要素的協(xié)調(diào)與一致對(duì)比性-設(shè)計(jì)要素的差異與分離色彩對(duì)比面積對(duì)比肌理對(duì)比點(diǎn)線面空間網(wǎng)頁配色基本色彩原理顏色由色相、明度、飽和度3個(gè)要素組成。色相：不同的波長的顏色構(gòu)成了

3、不同的色相。明度：顏色的明暗程度。取決于顏色吸收光的程度，進(jìn)光量越大，物體對(duì)光的反射率越高，明度則越高。反之則低。明度最高是白色，最低是黑色。飽和度：顏色的純度，或是與中性灰的差別。凡具有色相的所有色彩都有一定的飽和度，無色彩沒有色相，飽和度為0。RGB模式：根據(jù)顯示器顏色混合原理。RGB就是紅綠藍(lán)相加混合產(chǎn)生的色彩。網(wǎng)頁色彩譜網(wǎng)頁安全色色彩的文化色彩的認(rèn)知是很主觀的，每個(gè)人對(duì)于色彩都有不同的定義域解釋，但多數(shù)人對(duì)于色彩的認(rèn)知將形成一種趨勢(shì)，而所謂的多數(shù)人，便涉及到了主要瀏覽群體的文化認(rèn)知。這中間就包含了政治、宗教、社會(huì)結(jié)構(gòu)、歷史等諸多因素。色彩的象征色彩的象征也可以說是色彩的聯(lián)想，一般來說這

4、種象征可以分為自然上的象征、文化上的象征及品牌的象征。色彩的心理感覺不同的色彩會(huì)給人不同的色彩感覺。而這種感覺也會(huì)因?yàn)榈赜?、時(shí)間、環(huán)境等因素而改變。網(wǎng)頁配色的特點(diǎn)色彩的鮮明性色彩的獨(dú)特性色彩的功能性和習(xí)慣性色彩的有限性色彩的周期性前端代碼設(shè)計(jì)基礎(chǔ)知識(shí)：什么是 W3C W3C（World Wide Web Consortium，/）創(chuàng)建于1994年，研究Web規(guī)范和指導(dǎo)方針，致力于推動(dòng)Web發(fā)展，保證各種Web技術(shù)能很好地協(xié)同工作。大約500名會(huì)員組織加入這個(gè)團(tuán)體，它的主任Tim Berners-Lee（/People/Berner

5、s-Lee/）在1989年發(fā)明了Web。W3C推行的主要規(guī)范有HTML，CSS，XML，XHTML和DOM（Document Object Model）。多年以來，W3C把那些沒有被部分會(huì)員公司（如Netscape和Microsoft）嚴(yán)格執(zhí)行的規(guī)范定義為“推薦”（Recommendations）。自1998年開始，“Web標(biāo)準(zhǔn)組織”（）將W3C的“推薦”重新定義為“Web 標(biāo)準(zhǔn) ”，這是一種商業(yè)手法，目的是讓制造商重視并重新定位規(guī)范，在新的瀏覽器和網(wǎng)絡(luò)設(shè)備中完全地支持那些規(guī)范。其他的標(biāo)準(zhǔn)組織包括European Computer Manufacture

6、rs Association（ECMA）將ECMAScript 定義為“標(biāo)準(zhǔn)JavaScript”。WEB 標(biāo)準(zhǔn) Web Standards) 的歷史 在上個(gè)世紀(jì)90年代后期，當(dāng)互聯(lián)網(wǎng)和web逐漸成為主流時(shí)，Web瀏覽器(包括當(dāng)時(shí)的Netscape 4及以下版本，IE 4及以下版本。行話叫Version 4瀏覽器)的開發(fā)商還沒有完全的支持CSS（層疊式樣式表，對(duì)于Web開發(fā)人員來說，他們可以用CSS來控制Html文檔的表現(xiàn)）。考慮到CSS1是在1996年制定的，而CSS2是在1998年才制定的，所以這種對(duì)CSS支持的不足也是可以理解的。由于瀏覽器對(duì)CSS的支持不夠，再加上一些平面設(shè)計(jì)師的要求（

7、這些要求與他們經(jīng)常與印刷品打交道有關(guān)）導(dǎo)致他們?yōu)榱丝刂凭W(wǎng)頁的視覺表現(xiàn)而濫用HTML。一個(gè)典型的例子就是，當(dāng)設(shè)計(jì)師可以用border=0 來隱藏表格的邊框時(shí)，用隱藏表格來控制布局的方法同樣被使用。另一個(gè)例子是對(duì)“transparent”（透明）的使用，同樣是不可見，他們卻使用空白的GIF圖片來控制布局。WEB 標(biāo)準(zhǔn) Web Standards) 的歷史由于HTML從來就沒被用來控制一個(gè)文檔的表現(xiàn)，導(dǎo)致大量混亂代碼、非法代碼、瀏覽器的專用代碼和屬性就被隨意的使用了。“校驗(yàn)”這個(gè)詞也很少被人問津。對(duì)于這些代碼來說，標(biāo)簽大雜燴（tag soup）是一個(gè)很形象的名字。什么是 WEB 標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)，近年

8、來在國外已經(jīng)得到了很大的重視。尤其是美國頒布了501號(hào)法案以后，皆要求站點(diǎn)必須為殘障人士提供與普通人士相當(dāng)?shù)目稍L問性支持。要知道，傳統(tǒng)的布局方法是很難達(dá)到這樣的要求的。美國的多數(shù)技術(shù)性站點(diǎn)都開始向Web標(biāo)準(zhǔn)轉(zhuǎn)型。許多大型站點(diǎn)也已經(jīng)使用新方法重構(gòu)。例如就在最近(2005年1月)，微軟公司的msn站點(diǎn)使用XHTML Strict+CSS完全重寫。網(wǎng)站標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合 。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)

9、準(zhǔn)主要包括對(duì)象模型（如W3C DOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（European Computer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)。我們來簡單了解一下這些標(biāo)準(zhǔn)：在WEB標(biāo)準(zhǔn)中構(gòu)成網(wǎng)頁的三個(gè)主要部分：結(jié)構(gòu)、表現(xiàn)、行為結(jié)構(gòu)標(biāo)準(zhǔn)語言 XML是The Extensible Markup Language(可擴(kuò)展標(biāo)識(shí)語言)的簡寫。目前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0，參考（/TR/2000/REC-XML-20001006）。和H

10、TML一樣，XML同樣來源于SGML，但XML是一種能定義其他語言的語。XML最初設(shè)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。關(guān)于XML的好處和技術(shù)規(guī)范細(xì)節(jié)這里就不多說了，網(wǎng)上有很多資料，也有很多書籍可以參考。結(jié)構(gòu)標(biāo)準(zhǔn)語言XHTML是The Extensible HyperTextMarkup Language可擴(kuò)展標(biāo)識(shí)語言的縮寫。目前推薦遵循的是W3C于2000年1月26日推薦XML1.0（參考http: //TR/xhtml1）。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對(duì)成千上萬已有的站點(diǎn)，直接采

11、用XML還為時(shí)過早。因此，我們?cè)贖TML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML。簡單的說，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡。結(jié)構(gòu)標(biāo)準(zhǔn)語言HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn)的 HTML 標(biāo)準(zhǔn)版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持某些 HTML5 技術(shù)。HTML 5有兩大特點(diǎn)：首先，強(qiáng)化了 Web 網(wǎng)頁的表現(xiàn)性能。其次，追加了本地?cái)?shù)據(jù)庫等 Web 應(yīng)用的功能。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)

12、應(yīng)用服務(wù)（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。表現(xiàn)標(biāo)準(zhǔn)語言級(jí)聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀

13、。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。行為標(biāo)準(zhǔn)DOM是Document Object Model文檔對(duì)象模型的縮寫。根據(jù)W3C DOM規(guī)范（/DOM/），DOM是一種與瀏覽器，平臺(tái)，語言的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件。簡單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來訪問他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)像。ECMAScript是ECMA(European Computer Manufacturers Asso

14、ciation)制定的標(biāo)準(zhǔn)腳本語言（JAVAScript）。目前推薦遵循的是ECMAScript262（http:/www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。按照 WEB 標(biāo)準(zhǔn)建設(shè)網(wǎng)站的目的向后兼容什么是向后兼容？我們認(rèn)為是：采用正確的方法設(shè)計(jì)和建設(shè)，發(fā)布的任何文檔可以正確顯示在多種瀏覽器、平臺(tái)、設(shè)備上，并且能繼續(xù)在未來發(fā)明的新瀏覽器和設(shè)備中工作。開放的標(biāo)準(zhǔn)使之成為可能。關(guān)注瀏覽器符合 WEB 標(biāo)準(zhǔn)的網(wǎng)站可以：在圖形桌面瀏覽器上達(dá)到更精確的控制、定位和排版，允許用戶使用適合他們的表達(dá)方式進(jìn)行編輯。可以開發(fā)工作在多瀏覽器和平臺(tái) 的復(fù)雜交互行為。遵守可訪問性原則和

15、指南，而不需要犧牲美觀、性能或者精巧性。以前重新設(shè)計(jì)網(wǎng)站 需要幾天或者幾星期，現(xiàn)在只需要幾小時(shí)，從而減少成本和避免工作煩惱。支持多種瀏覽器，從而不需要爭論和考慮多版本的成本，很少或根本就不需要代碼分支。支持非傳統(tǒng)的設(shè)備 ，從無線設(shè)備到孩子們想像到的、可以上網(wǎng)的智能手機(jī)，以及盲人閱讀器、屏幕閱讀器等殘疾人士使用的設(shè)備，都不需要再爭論開發(fā)特殊版本的費(fèi)用。為任何網(wǎng)頁提交適合打印的版本 ，不需要建立通常的“專門打印頁”或者依賴昂貴的私人出版系統(tǒng)來建立類似的版本。通過把樣式從結(jié)構(gòu)、行為中分離，以及嚴(yán)格的文檔結(jié)構(gòu)，易于在高級(jí)發(fā)布流程中重新設(shè)計(jì)Web文檔。從老的Web語言HTML轉(zhuǎn)換到更強(qiáng)大的以XML為基礎(chǔ)

16、的置標(biāo)語言?？梢栽诋?dāng)前符合標(biāo)準(zhǔn)的瀏覽器和平臺(tái)上確保正確地工作，也可以在老瀏覽器中工作。保證這樣設(shè)計(jì)的站點(diǎn)將能繼續(xù)工作在將來的瀏覽器和設(shè)備上，包括那些還沒有發(fā)明和仍在想像中的設(shè)備，這是向后兼容的許諾 。結(jié)構(gòu)化 HTML首先要學(xué)習(xí)什么是“結(jié)構(gòu)(structural)”，一些作家也稱之為“語義(semantic)。這個(gè)術(shù)語的意思是你需要分析你的內(nèi)容塊，以及每塊內(nèi)容服務(wù)的目的，然后再根據(jù)這些內(nèi)容目的建立起相應(yīng)的 HTML 結(jié)構(gòu) 。如果你坐下來仔細(xì)分析和規(guī)劃你的頁面結(jié)構(gòu)，你可能得到類似這樣的幾塊：標(biāo)志和站點(diǎn)名稱主頁面內(nèi)容站點(diǎn)導(dǎo)航(主菜單) 子菜單搜索框功能區(qū)(例如購物車、收銀臺(tái)) 頁腳(版權(quán)和有關(guān)法律聲

17、明) 我們通常采用DIV 元素 TIPS: 可以把 DIV 理解為 盒子 或者 容器 來將這些結(jié)構(gòu)定義出來：(“”“”) 這不是布局，是結(jié)構(gòu)。 這是一個(gè)對(duì)內(nèi)容塊的語義說明。當(dāng)你理解了你的結(jié)構(gòu)，就可以加對(duì)應(yīng)的ID在DIV上。DIV容器中可以包含任何內(nèi)容塊，也可以嵌套另一個(gè)DIV。內(nèi)容塊可以包含任意的HTML元素-標(biāo)題、段落、圖片、表格、列表等等。根據(jù)上面講述的，你已經(jīng)知道如何結(jié)構(gòu)化HTML，現(xiàn)在你可以進(jìn)行布局和樣式定義了。每一個(gè)內(nèi)容塊都可以放在頁面上任何地方，再指定這個(gè)塊的顏色、字體、邊框、背景以及對(duì)齊屬性等等。CSS 排版大部分用戶使用的瀏覽器都有很好的CSS 支持，當(dāng)然它們也有個(gè)各自的脾性，不過只要你習(xí)慣了它們，就能夠處理得很好。編寫CSS 代碼很簡單。每條CSS 規(guī)則都有一個(gè)選擇符和一個(gè)聲明。聲明是由屬性名 property) 和屬性值 value) 組成的。屬性名一般使用連字符(-)連接。(body margin:0; padding:0.related float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue#footer color: gray; font-size: 0.6em; line-height: 1.2em; backgrou