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

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

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

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

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