HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)實(shí)例教程-第1章-網(wǎng)頁(yè)設(shè)計(jì)新時(shí)代

第1章網(wǎng)頁(yè)設(shè)計(jì)新時(shí)代本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述從2010年開(kāi)始，HTML5和CSS3就一直是互聯(lián)網(wǎng)技術(shù)中最受關(guān)注的兩個(gè)話題。2010年MIX10大會(huì)上微軟的工程師在介紹IE9時(shí)，從前端技術(shù)的角度把互聯(lián)網(wǎng)的發(fā)展分為3個(gè)階段:第一階段是以Web1.0為主的網(wǎng)絡(luò)階段，前端主流技術(shù)是HTML和CSS；第二階段是Web2.0的Ajax應(yīng)用階段，熱門(mén)技術(shù)是JavaScript/DOM/異步數(shù)據(jù)請(qǐng)求；第三階段即為HTML5+CSS3階段，這兩者相輔相成，使網(wǎng)頁(yè)設(shè)計(jì)進(jìn)入了一個(gè)嶄新的時(shí)代。第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解WEB開(kāi)發(fā)基本原則了解HTML5是如何形成的了解HTML5的設(shè)計(jì)原則了解HTML5頁(yè)面的特征了解網(wǎng)頁(yè)的基本元素和網(wǎng)頁(yè)設(shè)計(jì)的常用技術(shù)使用HTML創(chuàng)建一些Web頁(yè)面第4頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫(xiě)一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第5頁(yè)1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則本節(jié)介紹開(kāi)放Web標(biāo)準(zhǔn)的重要性、構(gòu)造良好的語(yǔ)義化標(biāo)記技術(shù),以及編寫(xiě)良好的HTML是網(wǎng)頁(yè)設(shè)計(jì)過(guò)程的一部分；簡(jiǎn)單、直白的HTML結(jié)構(gòu)應(yīng)當(dāng)用CSS進(jìn)行樣式化等。第6頁(yè)Web標(biāo)準(zhǔn)成立于1998年的WebStandardsProject(Web標(biāo)準(zhǔn)項(xiàng)目,WaSP)一直致力于跨不同瀏覽器的標(biāo)準(zhǔn)實(shí)現(xiàn)和基于標(biāo)準(zhǔn)的Web設(shè)計(jì)方法。其目標(biāo)是降低Web開(kāi)發(fā)的成本與復(fù)雜性,并通過(guò)使Web內(nèi)容在不同設(shè)備和輔助技術(shù)之間更具一致性和兼容性的辦法,提高Web頁(yè)面的可訪問(wèn)性。什么是Web標(biāo)準(zhǔn)使用Web標(biāo)準(zhǔn)的好處語(yǔ)義化標(biāo)記Web標(biāo)準(zhǔn)層次。第7頁(yè)Web標(biāo)準(zhǔn)與瀏覽器的兼容性瀏覽器的前景正在朝著標(biāo)準(zhǔn)的方向演化和靠攏。Firefox、Safari、Opera、Chrome，當(dāng)然也包括古老的IE，都在以不同的速度朝著全面支持HTML5.CSS3等標(biāo)準(zhǔn)的方向前進(jìn)。隨著訪問(wèn)Web內(nèi)容的設(shè)備種類越來(lái)越多，精確預(yù)測(cè)網(wǎng)站在各種用戶設(shè)備上的外觀變得越來(lái)越困難。因此，網(wǎng)頁(yè)的設(shè)計(jì)不應(yīng)受像素完美控制的困擾，而是要接納這種不確定性，設(shè)計(jì)出可適應(yīng)不同瀏覽環(huán)境的柔性網(wǎng)站。第8頁(yè)可訪問(wèn)性使用Web設(shè)計(jì)標(biāo)準(zhǔn)會(huì)在更廣泛的設(shè)備上有更好的可訪問(wèn)性、帶來(lái)更多樣的用戶等。設(shè)計(jì)網(wǎng)頁(yè)首先要關(guān)注不同用戶如何使用Web。有些人使用不同的設(shè)備或低速的Web連接；有些人只使用鍵盤(pán)；有些人使用屏幕閱讀器閱讀Web頁(yè)面；有些人聽(tīng)不到音頻內(nèi)容。因此要熟悉形形色色的Web用戶。不要只是假設(shè)所有人都用相同的模式在使用Web。HTML5給Web網(wǎng)頁(yè)的可訪問(wèn)性帶來(lái)的更廣泛的便利。第9頁(yè)結(jié)構(gòu)化文檔的Web可以把Web想象成一個(gè)由文檔組成的大海,文檔之間相互關(guān)聯(lián),并且與日常生活中遇到的打印文檔有著很多相似性新聞網(wǎng)站中文章的結(jié)構(gòu)與報(bào)紙上的文章結(jié)構(gòu)類似。每一篇文章包含標(biāo)題、文本段落以及一些圖片（有時(shí)可能以視頻代替圖片）。相同點(diǎn)非常明顯,而唯一的不同就是,在報(bào)紙上可以在一個(gè)版面上擁有多篇故事,而在網(wǎng)頁(yè)上每篇故事則傾向于獨(dú)占一個(gè)頁(yè)面。新聞網(wǎng)站還經(jīng)常使用首頁(yè)顯示新聞?lì)^條以及故事梗概。在編寫(xiě)Web頁(yè)面時(shí),HTML代碼會(huì)告知Web瀏覽器需要顯示的信息結(jié)構(gòu),即什么文本放在標(biāo)題、段落或表格中等,從而瀏覽器能夠恰當(dāng)?shù)貙⑵涑尸F(xiàn)給用戶。第10頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫(xiě)一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第11頁(yè)1.2HTML5概述2004年成立的Web超文本應(yīng)用技術(shù)工作組（WHATWG）創(chuàng)立了HTML5規(guī)范,同時(shí)開(kāi)始專門(mén)針對(duì)Web應(yīng)用開(kāi)發(fā)新的功能。2006年,W3C介入HTML5的開(kāi)發(fā),并于2008年發(fā)布了HTML5的工作草案。2009年,W3C停止了對(duì)XHTML2的更新。2010年HTML5開(kāi)始用于解決實(shí)際問(wèn)題。這時(shí)各大瀏覽器廠商開(kāi)始對(duì)旗下產(chǎn)品進(jìn)行升級(jí)以支持HTML5的新功能,因此,HTML5規(guī)范也得到了持續(xù)性的完善。第12頁(yè)傳統(tǒng)HTML與XHTML標(biāo)記語(yǔ)言在我們的日常計(jì)算中無(wú)處不在。在傳統(tǒng)的文字處理文檔中,用于描述結(jié)構(gòu)與外觀的標(biāo)記代碼常常不是后臺(tái)編碼的。在Web文檔中,傳統(tǒng)HTML和XHTML（XHTML是HTML基于XML語(yǔ)法規(guī)則建立的標(biāo)記語(yǔ)言）的標(biāo)記代碼是明顯可見(jiàn)的。這些非后臺(tái)的標(biāo)記語(yǔ)言能夠?qū)eb頁(yè)面的結(jié)構(gòu)與外觀傳遞給Web瀏覽器。從1991年底開(kāi)始推出至今,HTML和基于XML的XHTML都發(fā)生了許多變化。最早構(gòu)建Web頁(yè)面的HTML版本并沒(méi)有嚴(yán)格的定義。然而在1993年,InternetEngineeringTaskForce(IETF)開(kāi)始標(biāo)準(zhǔn)化語(yǔ)言,且在1995年發(fā)布了第一個(gè)真正意義上的HTML標(biāo)準(zhǔn)——HTML2.0。第13頁(yè)HTML5是如何形成的HTML5是HTML長(zhǎng)期發(fā)展過(guò)程中的一個(gè)里程碑，各種版本HTML以不同規(guī)范形成了各種編碼風(fēng)格。盡管它們可能在細(xì)節(jié)方面有所不同，但的HTML都有一個(gè)共同的基本方面:HTML是一種標(biāo)記語(yǔ)言。超越HTML4轉(zhuǎn)向XHTML1.0XHTML2.0的失敗HTML5的成功第14頁(yè)HTML5的設(shè)計(jì)原則HTML5的形成基于許多設(shè)計(jì)原則，在應(yīng)用新標(biāo)記法時(shí)，還要有計(jì)劃地支持現(xiàn)有內(nèi)容。另外，W3C還定義了以下原則:確保支持現(xiàn)有內(nèi)容在舊式瀏覽器中讓新特性能夠優(yōu)雅降級(jí)不要重新發(fā)明鋪平老路進(jìn)化而非革命能夠普遍訪問(wèn)第15頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫(xiě)一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第16頁(yè)1.3HTML5頁(yè)面的特征本節(jié)通過(guò)一個(gè)較為完整的頁(yè)面來(lái)介紹HTML5的頁(yè)面特征。第17頁(yè)使用HTML5結(jié)構(gòu)化元素通過(guò)研究Web頁(yè)面發(fā)現(xiàn),如果使用一些帶有語(yǔ)義性的標(biāo)記,可以加快瀏覽器解釋頁(yè)面中元素的速度,如早期的<samp>、<var>元素,HTML5繼承了這些元素,并根據(jù)用戶使用最為頻繁的類名稱和ID號(hào)不斷開(kāi)發(fā)新的標(biāo)記,因?yàn)檫@些標(biāo)記能真正體現(xiàn)開(kāi)發(fā)者真實(shí)意圖所在。下面通過(guò)示例說(shuō)明HTML5是如何使用這些全新的HTML5特征來(lái)結(jié)構(gòu)化元素的。使用HTML5新增元素后的網(wǎng)頁(yè)布局第18頁(yè)使用CSS3美化HTML5文檔在支持HTML5新元素的瀏覽器中,樣式化各新增元素變得十分簡(jiǎn)單,可以對(duì)任意一個(gè)元素應(yīng)用CSS,包括直接設(shè)置或引入CSS文件。。使用CSS3美化HTML5文檔第19頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫(xiě)一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第20頁(yè)1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)要設(shè)計(jì)WEB網(wǎng)頁(yè),應(yīng)該了解網(wǎng)頁(yè)的基本元素和網(wǎng)頁(yè)設(shè)計(jì)的常用技術(shù)等基礎(chǔ)知識(shí)。

第21頁(yè)網(wǎng)頁(yè)的基本元素網(wǎng)頁(yè)作為信息的載體,包含各種各樣的元素。從網(wǎng)頁(yè)的內(nèi)容或者多媒體元素的角度出發(fā),網(wǎng)頁(yè)包含文本、圖像、動(dòng)畫(huà)、音頻和視頻等；從布局設(shè)計(jì)的角度看,網(wǎng)頁(yè)包含頁(yè)眉、主內(nèi)容區(qū)和頁(yè)腳等。網(wǎng)頁(yè)的基本媒體元素網(wǎng)頁(yè)的基本布局元素第22頁(yè)網(wǎng)頁(yè)設(shè)計(jì)常用技術(shù)在Web標(biāo)準(zhǔn)中,網(wǎng)頁(yè)主要由三部分組成,結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。對(duì)應(yīng)的標(biāo)準(zhǔn)也分為三方面,結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言,主要包括HTML、XHTML和XML；表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言,主要包括CSS；行為標(biāo)準(zhǔn),主要包括ECNAScript（網(wǎng)頁(yè)腳本語(yǔ)言規(guī)范）等。網(wǎng)頁(yè)標(biāo)記語(yǔ)言HTML網(wǎng)頁(yè)表現(xiàn)技術(shù)CSS網(wǎng)頁(yè)腳本語(yǔ)言動(dòng)態(tài)網(wǎng)頁(yè)編程技術(shù)第23頁(yè)網(wǎng)頁(yè)設(shè)計(jì)常用工具HTML文件的編寫(xiě)可以使用任何文本編輯器，如記事本、寫(xiě)字板、Word等，不過(guò)在保存時(shí)都必須保存為.html或者.htm格式。為了使設(shè)計(jì)網(wǎng)頁(yè)更加簡(jiǎn)單、方便，有些公司和人員設(shè)計(jì)了專業(yè)的HTML編輯工具，這些工具絕大多數(shù)可以分為兩類:第一類是基于文本的HTML編輯器，第二類是所見(jiàn)即所得編輯器?；谖谋镜木庉嬈魉?jiàn)即所得編輯器如何選擇工具第24頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5編寫(xiě)一個(gè)簡(jiǎn)單的Web頁(yè)面1.6本章小結(jié)第25頁(yè)1.5編寫(xiě)一個(gè)簡(jiǎn)單的Web頁(yè)面搭建瀏覽環(huán)境盡管各主流瀏覽器都對(duì)HTML5提供了很好的支持,但畢竟HTML5是一種全新的HTML標(biāo)記語(yǔ)言,許多新的功能必須在搭建好的瀏覽環(huán)境后才可以正常瀏覽。為此,我們?cè)谡綀?zhí)行一個(gè)HTML5頁(yè)面之前,必須先搭建支持HTML5的瀏覽器環(huán)境,并檢查瀏覽器是否支持HTML5標(biāo)記。第26頁(yè)檢測(cè)瀏覽環(huán)境是否支持

IE8不支持HTML5的畫(huà)布標(biāo)記Chrome支持HTML5的畫(huà)布標(biāo)記為了能進(jìn)一步了解瀏覽器支持HTML5新標(biāo)簽功能的情況,可以在引入新標(biāo)簽前,通過(guò)編寫(xiě)JavaScript代碼來(lái)檢測(cè)瀏覽器是否技術(shù)該標(biāo)簽。第27頁(yè)使用HTML5編寫(xiě)簡(jiǎn)單的Web頁(yè)面

一個(gè)簡(jiǎn)單的Web頁(yè)面第28頁(yè)主要內(nèi)容1.1WEB網(wǎng)頁(yè)設(shè)計(jì)原則1.2HTML5概述1.3HTML5頁(yè)面的特征1.4WEB網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.5