網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目三（HTML5與CSS3基礎(chǔ)）_第1頁
網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目三（HTML5與CSS3基礎(chǔ)）_第2頁
網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目三（HTML5與CSS3基礎(chǔ)）_第3頁
網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目三（HTML5與CSS3基礎(chǔ)）_第4頁
網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目三（HTML5與CSS3基礎(chǔ)）_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML5與CSS3基礎(chǔ)項

目

三網(wǎng)頁設(shè)計與制作案例教程網(wǎng)頁設(shè)計

網(wǎng)頁制作工具有很多，其中，DreamweaverCC最適合初學(xué)者。DreamweaverCC將功能強(qiáng)大的可視化操作界面、一流的代碼編輯器和實用的站點管理工具相結(jié)合，是一款集網(wǎng)頁制作和網(wǎng)站管理于一體的所見即所得的網(wǎng)頁編輯器。

本項目主要介紹DreamweaverCC的基本功能，包括了解其工作界面，學(xué)習(xí)使用DreamweaverCC創(chuàng)建并管理本地站點等。項目導(dǎo)讀知識目標(biāo)1.熟悉HTML5的基礎(chǔ)知識。

2.熟悉CSS3的基礎(chǔ)知識。能力目標(biāo)思政目標(biāo)1.能夠使用DreamweaverCC設(shè)置網(wǎng)頁內(nèi)容。2.能夠使用DreamweaverCC設(shè)置網(wǎng)頁樣式。1.掌握網(wǎng)頁制作語言的基礎(chǔ)知識，學(xué)習(xí)語法規(guī)則，養(yǎng)成良好的工作習(xí)慣。2.練習(xí)制作網(wǎng)頁，培養(yǎng)自己的鉆研精神。+01任務(wù)一HTML5基礎(chǔ)任務(wù)描述

HTML是網(wǎng)頁制作必備技術(shù)。HTML5是HTML的最新版本。本任務(wù)首先介紹HTML5的基礎(chǔ)知識，然后通過實際操作加深理解。一、HTML5簡介

使用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)。瀏覽器能夠識別并解析這些文檔。

HTML在20世紀(jì)90年代發(fā)展迅速，從HTML2.0版本發(fā)展到3.2版本、4.0版本，再到4.01版本。在這之后，為了擁有更強(qiáng)的功能性與適用性，HTML開始向其他方向演化，發(fā)展出了XHTML與XHTML2.0版本，但因為沒能取得良好的兼容性而宣告失敗。最終，向HTML5的演化取得了成功，因為HTML5在開發(fā)時就綜合考慮了當(dāng)前與未來的發(fā)展趨勢，所以它向后兼容，且包含了HTML4.0的全部特性，并在此基礎(chǔ)上進(jìn)行了少量的修改與完善。

2014年，W3C正式宣布，HTML5制定完成并公開發(fā)布。目前HTML5已經(jīng)得到主流瀏覽器的良好支持。二、HTML5基本語法

1．HTML5標(biāo)簽的分類:分

類

類

別備

注（1）雙標(biāo)簽。指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的標(biāo)簽，基本語法格式為：<標(biāo)簽名>內(nèi)容</標(biāo)簽名><title>…</title>（2）單標(biāo)簽。也稱為空標(biāo)簽，基本語法格式為：<標(biāo)簽名/><hr/>,單標(biāo)簽中的“/”可以省略（3）注釋標(biāo)簽。是HTML5中的一種特殊標(biāo)簽。注釋標(biāo)簽的內(nèi)容不會顯示在頁面上，但是會保存在頁面的源代碼中。它的基本語法格式為：<!--注釋內(nèi)容-->開頭和結(jié)尾處添加注釋標(biāo)簽可方便其他開發(fā)人員修改和理解代碼2．HTML5標(biāo)簽的屬性:根據(jù)需要為標(biāo)簽設(shè)置屬性，如為段落標(biāo)簽設(shè)置樣式。一個標(biāo)簽可以有多個屬性，標(biāo)簽名和屬性名之間要用空格隔開，屬性之間不分先后順序。標(biāo)簽的屬性省略時將使用它們的默認(rèn)值。設(shè)置標(biāo)簽屬性的語法格式為：<標(biāo)簽名屬性1="屬性值1"屬性2="屬性值2">內(nèi)容</標(biāo)簽名>3．塊級標(biāo)簽與行內(nèi)標(biāo)簽:HTML5中標(biāo)記內(nèi)容的標(biāo)簽有塊級標(biāo)簽和行內(nèi)標(biāo)簽之分，它們的特點如下。（1）塊級標(biāo)簽的內(nèi)容在瀏覽器中顯示時獨占一行，類似于在其內(nèi)容首尾各添加了一個換行符。例：<h1>與<p>標(biāo)簽都是塊級標(biāo)簽，使用它們標(biāo)記的內(nèi)容將獨占一行，且這些標(biāo)簽之后的內(nèi)容同樣也會另起一行。（2）行內(nèi)標(biāo)簽的內(nèi)容在瀏覽器中顯示時不能獨占一行。若行內(nèi)標(biāo)簽前后沒有塊級標(biāo)簽，則它們可顯示在同一行中。例如，用于標(biāo)記斜體的<i>標(biāo)簽就是一個行內(nèi)標(biāo)簽。三、HTML5文檔結(jié)構(gòu)

HTML5使用元素描述頁面結(jié)構(gòu)，最基本的HTML5文檔結(jié)構(gòu)包括DOCTYPE聲明、html元素、head元素與body元素，如圖所示。除此之外，HTML5還提供了一些其他結(jié)構(gòu)元素，用于標(biāo)記頁面的不同區(qū)域，下面分別進(jìn)行介紹。最基本的HTML5文檔結(jié)構(gòu)01DOCTYPE聲明:DOCTYPE聲明位于文檔首行，用于向瀏覽器說明當(dāng)前文檔使用的標(biāo)準(zhǔn)規(guī)范，“<!doctypehtml>”表示當(dāng)前文檔使用HTML5標(biāo)準(zhǔn)。02html元素:是HTML5文檔的根元素，用于告知瀏覽器自身是一個HTML5文檔，<html>標(biāo)簽標(biāo)志著HTML5文檔的開始，</html>標(biāo)簽標(biāo)志著HTML5文檔的結(jié)束，它們之間的內(nèi)容又分為文檔的頭部和主體內(nèi)容。03head元素:用于標(biāo)記HTML5文檔的頭部，也稱為頭部標(biāo)記，它一般放置在<html>起始標(biāo)簽之后，用于封裝其他位于文檔頭部的標(biāo)簽，這些標(biāo)簽中存儲著網(wǎng)頁的各種基本信息，可以使瀏覽器快速解析頁面，其中的內(nèi)容一般不會顯示在頁面中。文檔頭部一般包括以下幾種元素:（1）網(wǎng)頁標(biāo)題。使用<title>…</title>標(biāo)簽可以設(shè)置網(wǎng)頁標(biāo)題，瀏覽器會將該標(biāo)題顯示在標(biāo)題欄或狀態(tài)欄中。（2）網(wǎng)頁元信息。使用<meta/>標(biāo)簽可以標(biāo)記網(wǎng)頁元信息，在其中設(shè)置網(wǎng)站的相關(guān)屬性能夠方便搜索引擎檢索網(wǎng)頁。此外，它還可以標(biāo)記文檔的字符編碼，如圖3-1中的代碼“charset="utf-8"”即表示將網(wǎng)頁文檔的字符編碼設(shè)置為“utf-8”。（3）網(wǎng)頁視口。網(wǎng)頁視口就是瀏覽器中顯示網(wǎng)頁頁面的那部分區(qū)域，通過設(shè)置視口的寬度、縮放比例等屬性可以使網(wǎng)頁適配各種屏幕尺寸的設(shè)備，具體設(shè)置方法見項目七。body元素：用于標(biāo)記HTML5文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。頁面中的所有信息（文本、圖像、音頻和視頻等）都必須寫在<body>標(biāo)簽之內(nèi)。0405

其他結(jié)構(gòu)元素在對網(wǎng)頁文檔排版時需要將大量標(biāo)簽放在下列表示結(jié)構(gòu)的元素中，也就是將表示內(nèi)容的標(biāo)簽裝進(jìn)不同的“容器”中。頁眉header描述頁面的標(biāo)題欄或一個內(nèi)容塊的標(biāo)題區(qū)域?？砂鄠€header元素，如：網(wǎng)站Logo、主導(dǎo)航和搜索框等。導(dǎo)航nav描述頁面導(dǎo)航的鏈接組?？砂鄠€nav元素，導(dǎo)航性質(zhì)的鏈接組都可以放置在nav元素中，如主導(dǎo)航欄或側(cè)邊導(dǎo)航欄等。頁腳的導(dǎo)航一般不放在該元素中。主要區(qū)域main用于描述一個頁面的主要內(nèi)容。一個頁面中只能包含一個main元素。文章塊article描述頁面中的一個獨立內(nèi)容，如新聞文章、博客條目、用戶評論等。區(qū)塊section用于描述網(wǎng)頁中的一節(jié)，對頁面內(nèi)容進(jìn)行分區(qū)。如網(wǎng)頁中的章節(jié)、頭部或尾部等，可嵌套在article元素中。附欄aside用于描述一個與頁面其余內(nèi)容幾乎無關(guān)的部分，可包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊廣告等。頁腳footer用于描述文檔或節(jié)的頁腳，如版權(quán)信息、作者信息等。作為頁腳時，一般位于頁面底部。

除上述結(jié)構(gòu)元素之外，還有div元素，對應(yīng)的標(biāo)簽<div>為塊級標(biāo)簽，span元素對應(yīng)的<span>標(biāo)簽為行內(nèi)標(biāo)簽，在頁面中靈活使用它們進(jìn)行布局，可以使網(wǎng)頁更具結(jié)構(gòu)化。掃描二維碼觀看詳細(xì)步驟視頻任務(wù)實施——制作“傳承經(jīng)典網(wǎng)”主頁的“散文選篇”模塊

使用最基礎(chǔ)的標(biāo)題與段落標(biāo)簽就可以制作網(wǎng)頁中較為簡單的模塊，本任務(wù)就以“傳承經(jīng)典網(wǎng)”的“散文選篇”模塊為例，學(xué)習(xí)使用DreamweaverCC在網(wǎng)頁中添加元素的方法?！皞鞒薪?jīng)典網(wǎng)”主頁的“散文選篇”模塊頁面效果02任務(wù)二CSS3基礎(chǔ)任務(wù)描述

使用CSS3能夠簡單便捷地為網(wǎng)頁內(nèi)容添加樣式，同時減輕網(wǎng)頁文檔的負(fù)擔(dān)，使網(wǎng)頁文檔的結(jié)構(gòu)更加清晰。本任務(wù)將首先介紹CSS3的基礎(chǔ)知識，然后通過實際操作加深理解。一、CSS3簡介

隨著HTML功能的不斷完善，結(jié)構(gòu)代碼和樣式代碼的混合使用讓HTML文檔的代碼結(jié)構(gòu)十分混亂，為網(wǎng)頁的維護(hù)工作增加了難度。此時CSS應(yīng)運而生，它將網(wǎng)頁的結(jié)構(gòu)層和表現(xiàn)層分離開來，大大簡化了HTML代碼。1994年，哈坤·利提出了CSS的最初設(shè)想，之后CSS技術(shù)經(jīng)歷了幾次發(fā)展，最終W3C于2005年12月開始制定CSS3標(biāo)準(zhǔn)。到目前為止該標(biāo)準(zhǔn)還沒有最終定稿，但主流瀏覽器已經(jīng)開始支持其中的大部分特性。二、CSS3基本語法CSS3樣式表是由一個或多個CSS3樣式組成的。CSS3樣式是由選擇器和聲明組成的，其基本格式如圖所示。body{font-size:20px;color:lightblue;}選擇器聲明樣式分隔符聲明分隔符聲明樣式分隔符屬性值屬性值屬性屬性介紹CSS3樣式的各組成部分:（1）選擇器用于匹配HTML文檔中的某個或某些元素。（2）聲明可有N個，聲明之間用分號隔開并放置在一對大括號（即樣式分隔符）中，它們用于命令瀏覽器如何渲染指定對象。聲明由屬性和屬性值兩部分組成。（3）屬性是用于設(shè)置樣式的具體效果項，屬性名一般由一個或多個單詞組成，多個單詞中間用連字符連接。（4）屬性值是設(shè)置屬性效果的參數(shù)，可以是數(shù)值或關(guān)鍵字。三、在HTML文檔中引入CSS

HTML與CSS是兩種不同的語言，要讓它們同時對一個網(wǎng)頁產(chǎn)生作用，必須在HTML文檔中引入CSS。在HTML文檔中引入CSS的3種方式分別為行內(nèi)樣式、內(nèi)嵌樣式表與鏈接樣式表。行內(nèi)樣式：也稱為內(nèi)聯(lián)樣式，即直接為HTML標(biāo)簽設(shè)置style屬性，具體格式為：<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;……">內(nèi)容</標(biāo)簽名>1style是標(biāo)簽的屬性，它自身又包含了多個樣式屬性，這些屬性與屬性值的規(guī)范與CSS3相同。內(nèi)嵌樣式表與鏈接樣式表:添加方法是單擊“CSS設(shè)計器”面板中“源”窗格左側(cè)的加號按鈕，在展開的列表中可以看到3個選項。其中，“在頁面中定義”選項表示設(shè)置內(nèi)嵌樣式表，“創(chuàng)建新的CSS文件”與“附加現(xiàn)有的CSS文件”選項表示設(shè)置鏈接樣式表。2（1）內(nèi)嵌樣式表。選擇“在頁面中定義”選項后，文檔窗口即自動生成<style>標(biāo)簽，在其中輸入樣式代碼即可。使用該方式添加的樣式代碼可作用于當(dāng)前整個頁面，無法作用于其他頁面。（2）鏈接樣式表。“創(chuàng)建新的CSS文件”“創(chuàng)建新的CSS文件”,在“文件/URL”文本框中輸“index”“確定”，系統(tǒng)將自動創(chuàng)建一個CSS樣式文件，并在網(wǎng)頁頭部標(biāo)簽中自動生成鏈接代碼，如圖所示。

“index.css”按鈕，打開樣式文件，即可在其中輸入樣式代碼，設(shè)置樣式。

選擇“附加現(xiàn)有的CSS文件”選項后，將打開“附加現(xiàn)有的CSS文件”對話框，其與“創(chuàng)建新的CSS文件”對話框基本相同，單擊“瀏覽”按鈕，打開“選擇樣式表文件”對話框，在其中選擇想要附加的樣式表文件，單擊“確定”按鈕即可將本地的CSS文件附加到網(wǎng)頁文檔中。四、CSS3選擇器想要使用CSS3設(shè)置網(wǎng)頁樣式，首先需要設(shè)置正確的選擇器，使其匹配到相應(yīng)的目標(biāo)元素。1基本選擇器：包括標(biāo)簽選擇器、類選擇器和ID選擇器。標(biāo)簽選擇器用它來統(tǒng)一設(shè)置某類元素的基本樣式。HTML文檔是由標(biāo)簽組成的，標(biāo)簽選擇器就是直接引用標(biāo)簽名的選擇器。如p{font-size:20px;color:lightblue;}類選擇器以“.”為前綴，后面跟隨一個自定義類名。需要為標(biāo)簽設(shè)置class屬性（class屬性可以包含多個屬性值，各屬性值之間用空格隔開），屬性值就是類選擇器的名稱如.p1{…}如<pclass="p1">…</p>。ID選擇器以“#”為前綴，后面跟隨一個自定義的ID名。使用ID選擇器需要為標(biāo)簽設(shè)置id屬性，具有唯一性，每個標(biāo)簽只能設(shè)置一個id屬性值，屬性值就是ID選擇器的名稱。如#p2{…}如<pid="p2">…</p>。2組合選擇器:需要設(shè)置復(fù)雜的網(wǎng)頁樣式，可以使用組合選擇器來精確匹配頁面元素，下面介紹幾種常用的組合選擇器。包含選擇器通過空格連接兩個選擇器，如divp{…}，前面選擇器表示祖先元素，后面選擇器表示其后代元素。子選擇器通過“>”連接兩個選擇器，如div>p{…}，前面選擇器表示父元素，后面選擇器表示其子元素。相鄰選擇器通過“+”連接兩個選擇器，只有滿足這個連接順序的、同級的、相鄰的元素才會成功匹配。例如，在HTML文檔中有<div><h1>…</h1><p>…</p></div>，可使用h1+p{…}選擇與h1元素相鄰的，同級的一個p元素。兄弟選擇器通過“~”連接兩個選擇器，它在相鄰選擇器的基礎(chǔ)上，通過連接順序匹配相鄰的元素之后，會將后續(xù)同級別的同類元素一同匹配。例如，在HTML文檔中有<div><h1>…</h1><p>…</p><p>…</p></div>，可使用h1~p{…}選擇緊鄰在h1元素后出現(xiàn)的所有同級別的p元素。3屬性選擇器:根據(jù)標(biāo)簽的屬性來匹配元素，一般有以下7種類型：E[attr]選擇器是最基本的屬性選擇器，用于匹配所有擁有attr屬性的E元素，無論attr屬性值是什么。例:nav

a[id]{background:white;color:cadetblue;}

E[attr="value"]選擇器用于匹配attr屬性值為“value”的E元素，它縮小了匹配范圍，能夠更加精確地匹配需要的元素。例如：nava[id="first"]{background:white;color:cadetblue;}E[attr~="value"]選擇器用于匹配attr屬性值列表中包含了“value”的E元素，不需要完全匹配。如果“value”是一個列表，需要用空格隔開。例如：nav

a[title~="web"]{background:lightcyan;color:#2f4f4f;}E[attr$="value"]選擇器與E[attr^="value"]選擇器相反，用于匹配attr屬性值以“value”結(jié)尾的E元素。E[attr*="value"]選擇器0E[attr|="value"]選擇器用于匹配attr屬性值為“value”或以“value”開頭的元素。例如：nava[lang|="zh"]{background:#ffffff;color:darkolivegreen;}用于匹配attr屬性值中包含字符串“value”的E元素，無論“value”在屬性值的什么位置。例如：nava[title*="t"]{background:lightcyan;color:#2f4f4f;}E[attr^="value"]選擇器用于匹配attr屬性值以“value”開頭的E元素，例如：nava[title^=http]{background:#ffffff;color:#2f4f4f;}4偽類選擇器：用于定義元素的特殊狀態(tài)，以英文冒號為前綴，后面跟隨偽類或偽類對象，在冒號前可以使用其他選擇器限制偽類應(yīng)用的范圍。下面詳細(xì)介紹偽類選擇器：靜態(tài)偽類選擇器只用于設(shè)置鏈接的樣式，包括“:link”和“:visited”，它們分別表示鏈接被訪問前的狀態(tài)與鏈接被訪問后的狀態(tài)。動態(tài)偽類選擇器可用于設(shè)置任意元素的樣式，包括“:hover”“:active”和“:focus”等，它們分別表示鼠標(biāo)指針移動至元素上時、鼠標(biāo)指針單擊元素區(qū)域但不松開時與元素獲得焦點時的狀態(tài)。結(jié)構(gòu)偽類選擇器可以根據(jù)文檔的結(jié)構(gòu)來匹配元素①:first-child。匹配父元素的第一個子元素。②:last-child。匹配父元素的最后一個子元素。③:nth-child(n)。匹配父元素的第n個子元素。④:empty。匹配沒有子元素的元素。⑤:root。匹配根元素。否定偽類選擇器是“:not()”，它能夠過濾掉括號內(nèi)匹配的元素。狀態(tài)偽類選擇器CSS3中包含十幾種狀態(tài)偽類選擇器，常用的有以下3種。①:enabled。匹配指定范圍內(nèi)所有可用的元素。②:disabled。匹配指定范圍內(nèi)所有不可用的元素。③:checked。匹配指定范圍內(nèi)所有選擇類的元素。五、CSS3的繼承性與層疊性1．繼承性:指在HTML的結(jié)構(gòu)中，后代元素會繼承祖先元素的CSS3樣式。能夠被繼承的屬性包括字號、文本顏色等，不能被繼承的屬性包括邊框、背景等。例如，設(shè)置body元素的字號為20像素后，那么在網(wǎng)頁中除了單獨設(shè)置過字號樣式的元素外，其他元素都將繼承該屬性。2．層疊性:指可以對同一個對象應(yīng)用多個樣式。如果同一個對象擁有多個樣式，那么這些樣式會根據(jù)各自的權(quán)重來確定呈現(xiàn)的優(yōu)先級，顯示最終效果。各種選擇器的權(quán)重值如下:

（1）ID選擇器：100。

（2）類、偽類與屬性選擇器：10。

（3）標(biāo)簽選擇器：1。

（4）通配選擇器：0。

除此之外，行內(nèi)樣式表的優(yōu)先級是最高的，權(quán)重值為1000。繼承的樣式優(yōu)先級是最低的，沒有權(quán)重值。當(dāng)權(quán)重值相同時，遵循就近原則。掃描二維碼觀看詳細(xì)步驟視頻任務(wù)實施——美化“傳承經(jīng)典網(wǎng)”主頁的“散文選篇”模塊

本任務(wù)將美化任務(wù)一中制作的“散文選篇”模塊，學(xué)習(xí)使用DreamweaverCC為網(wǎng)頁中的元素設(shè)置樣式的方法，頁面效果如圖所示?！吧⑽倪x篇”模塊美化后的頁面效果項目實訓(xùn)——制作“圖書交易網(wǎng)”主頁“網(wǎng)站介紹”模塊參考本項目兩個任務(wù)的任務(wù)實施，制作“圖書交易網(wǎng)”主頁的“網(wǎng)站介紹”模

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論