配套課件：HTML5+CSS3網(wǎng)頁設計基礎

1、第1頁第1章 網(wǎng)頁設計基礎本章概述 本章的學習目標主要內(nèi)容第2頁本章概述網(wǎng)頁設計工作主要包括網(wǎng)頁內(nèi)容顯示、總體顏色選擇、頁面的排版布局和用戶群的體驗度等。網(wǎng)頁設計作為一門綜合性較高的課程，涉及商業(yè)策劃、平面設計、程序語言和數(shù)據(jù)庫等。本章將介紹網(wǎng)頁的基本組成元素、頁面結(jié)構(gòu)和創(chuàng)建網(wǎng)頁的方法。第3頁本章的學習目標了解網(wǎng)頁上常見的基本元素及其特點了解網(wǎng)頁的布局結(jié)構(gòu)即網(wǎng)頁內(nèi)容的排版知識掌握編輯HTML5網(wǎng)頁常用的編輯軟件了解HTML5發(fā)展、優(yōu)勢、瀏覽器支持情況掌握HTML5文檔的基本格式和語法規(guī)范掌握創(chuàng)建和瀏覽網(wǎng)頁的方法第4頁主要內(nèi)容1. 1 網(wǎng)頁的基本元素1. 2 網(wǎng)頁的布局結(jié)構(gòu)1. 3 創(chuàng)建HTML

2、5頁面1. 4 HTML5基礎1. 5 實訓1. 6 本章小結(jié) 第5頁1.1 網(wǎng)頁的基本元素介紹構(gòu)成網(wǎng)頁的基本元素及其特點。1. 文本2. 圖片和動畫3. 聲音和視頻4. 超鏈接5. 導航欄6. 表單7. 其他常見元素第6頁1.2 網(wǎng)頁的布局結(jié)構(gòu)從頁面布局的角度看，一個頁面的布局就類似一篇文章的排版，需要分為多個區(qū)塊，較大的區(qū)塊又可再細分為小區(qū)塊。塊內(nèi)有文字、圖片、超鏈接等內(nèi)容，這些區(qū)塊一般稱為塊級元素，而區(qū)塊內(nèi)的文字、圖片或超鏈接等一般稱為行級元素，如圖1-2所示。1.3 創(chuàng)建HTML5頁面第7頁本節(jié)主要內(nèi)容：案例分析 用記事本編輯網(wǎng)頁用HBuilder編輯網(wǎng)頁1.3.1 案例分析【案例展示

3、】設計一個簡單的頁面，包含了網(wǎng)頁標題文字和一行文本信息，本例文件1-1.html在IE瀏覽器中的瀏覽效果如圖1-3所示。【知識要點】HTML文檔的結(jié)構(gòu)、創(chuàng)建網(wǎng)頁、保存網(wǎng)頁與瀏覽網(wǎng)頁。【學習目標】掌握使用記事本和HBuilder創(chuàng)建、保存和瀏覽網(wǎng)頁的方法。第8頁1.3.2 用記事本編輯網(wǎng)頁用記事本創(chuàng)建網(wǎng)頁過程如下。(1)打開記事本。(2)創(chuàng)建新文件。(3)保存網(wǎng)頁。(4)瀏覽網(wǎng)頁。(5)查看網(wǎng)頁源代碼。第9頁1.3.3 用HBuilder編輯網(wǎng)頁用HBuilder創(chuàng)建網(wǎng)頁過程如下。(1)啟動HBuilder，創(chuàng)建Web項目。(2)創(chuàng)建HTML文件。(3)編輯文件。(4)瀏覽網(wǎng)頁。第10頁1.4

4、HTML5基礎第11頁本節(jié)主要內(nèi)容： HTML5概述 HTML5文檔結(jié)構(gòu) HTML5語句結(jié)構(gòu) HTML5語法規(guī)范1.4.1 HTML5概述1. HTML5發(fā)展 2014年10發(fā)布。HTML5將會逐漸取代HTML4.01、XHTML1.0標準。2. HTML5優(yōu)勢 新的簡化的字符集聲明。 新的簡化的DOCTYPE。 簡答而強大的HTML5API。 以瀏覽器原生能力替代復雜的JavaScript代碼。3. 瀏覽器支持 目前常用的瀏覽器有IE、火孤( Firefox)、谷歌( Chrome)、 Safari和 Opera等。第12頁1.4.2 HTML5文檔結(jié)構(gòu)HTML文檔是一種純文本格式的文件，文

5、檔的基本結(jié)構(gòu)為:網(wǎng)頁標題 網(wǎng)頁內(nèi)容第13頁1.4.2 CSS的層疊和繼承性1. 聲明： 聲明必須是 HTML 文檔的第一行，位于 標簽之前。2. 文檔標簽：標記位于標記之后，也稱為根標記，表示HTML文檔的開始。3. 頭標簽：標簽用于定義HTML文檔的頭部信息，緊跟在標簽之后。4. 文檔編碼：HTML5文檔使用meta元素的 charset屬性指定文檔編碼，格式為：5. 標題標簽：標簽用來定義文檔的標題。6. 主體標簽：標記用于定義HTML文檔所要顯示的內(nèi)容。第14頁1.4.3 HTML5語句結(jié)構(gòu)HTML5語句主要有標簽、屬性和元素構(gòu)成，其語法結(jié)構(gòu)如下： 元素的內(nèi)容1. 標簽 標簽分單標簽和雙

6、標簽，單標簽如、等。雙標簽由開始和結(jié)束兩個標簽符組必須成對出現(xiàn)，等。第15頁1.4.3 HTML5語句結(jié)構(gòu)2.屬性 屬性在開始標簽中指定，用來表示該標簽的性質(zhì)和特性。通常都是以“屬性名=”值”形式來表示，有多個屬性時用空格隔開，并且在指定多個屬性時不用區(qū)分順序。 例如，段落標簽有屬性 align，align表示文字的對齊方式，表示為： 歡迎訪問本網(wǎng)站3. 元素 元素指的是包含標簽在內(nèi)的整體，元素的內(nèi)容是開始標簽與結(jié)束標簽之間的內(nèi)容。第16頁1.4.4 HTML5語法規(guī)范1. 標簽和屬性的規(guī)范 標簽名和屬性建議都用小寫字母。 HTML標簽可以嵌套，但不允許交叉。 HTML標簽中的一個單詞不能分兩

7、行寫。 屬性值都要用雙引號括起來。 HTML源文件中的換行、回車符和空格在顯示效果中是無效的。2. 代碼的縮進 HTML代碼并不要求在書寫時縮進，但為了文檔的結(jié)構(gòu)性和層次性，建議使用標簽時首尾對齊，內(nèi)部的內(nèi)容向右縮進幾格。第17頁1.5 實訓【實訓任務】練習創(chuàng)建網(wǎng)頁文檔，展示企業(yè)簡介信息，本例文件1-2.html在瀏覽器中的顯示效果如圖1-11所示。第18頁第19頁1.6 本章小結(jié) 本章講述了網(wǎng)頁的基本元素、布局結(jié)構(gòu)和網(wǎng)頁編輯技術。首先，介紹了網(wǎng)頁上常見基本元素和網(wǎng)頁的布局結(jié)構(gòu)知識。然后，結(jié)合案例介紹了常用的網(wǎng)頁編輯工具記事本和Hbuilder。最后，介紹了HTML5文檔的結(jié)構(gòu)和語法規(guī)范等內(nèi)容

8、。第20頁第2章 網(wǎng)頁基本元素本章概述 本章的學習目標主要內(nèi)容第21頁本章概述隨著網(wǎng)絡技術的發(fā)展，網(wǎng)頁內(nèi)容也更加豐富多樣。展示網(wǎng)頁內(nèi)容的元素包括文本、圖像、列表、表格、鏈接等，本章將具體介紹頁面上常用的各種元素的標簽及其屬性。第22頁本章的學習目標掌握文本控制標簽的功能和使用方法。掌握圖像標簽及其各屬性的功能和使用方法。掌握網(wǎng)頁上常用超鏈接的設置方法。掌握列表標簽及其屬性的功能和使用方法。掌握表格標簽及其屬性的功能和使用方法。掌握頁面交互元表的功能和用法。掌握綜合應用各種頁面元素標簽及其屬性制作頁面的方法。第23頁主要內(nèi)容2.1 文本控制標簽2.2 圖像標簽2.3 超鏈接標簽2.4 列表2.5

9、 表格2.6 頁面交互標簽2.7 實訓2.8 本章小結(jié)第24頁2.1 文本控制標簽本節(jié)主要內(nèi)容：標題標簽段落標簽換行標簽水平線標簽文本格式化標簽范圍標簽注釋標簽特殊符號第25頁2.1.1 案例分析【案例展示】招商加盟-加盟中心局部頁面的設計。使用標題標簽、段落標簽、換行標簽、水平線標簽、文本格式控制標簽等，設計招商加盟-加盟中心局部頁面，【知識要點】標題標簽、段落標簽、換行標簽、水平線標簽、文本格式控制標簽等網(wǎng)頁元素。【學習目標】掌握標題標簽、段落標簽、換行標簽、水平線標簽、文本格式控制標簽的作用并靈活應用。參考代碼：2-1.html第26頁2.1.2 標題標簽語法格式：標題文字說明： n的取

10、值為1到6。 align為可選屬性，用來設置標題在頁面的對齊方式，取值 left（左對齊）、center（居中對齊）、right（右對齊），默認取值left。 參考示例：2-1-1.html第27頁2.1.3 段落標簽語法格式：段落文字說明： 參數(shù)align的取值和功能參考標題標簽中說明第28頁2.1.4 換行標簽語法格式：文字 或 文字使用換行標簽，可以使頁面內(nèi)容整齊、美觀。第29頁2.1.5 水平線標簽語法格式：屬性介紹： align：參考標題標簽中align說明。 size：設置水平線的粗細，n取正整數(shù)，默認為2像素。 width：設置水平線的長度，n取正整數(shù)表示確定的像素值，也可以是瀏

11、覽器窗口的百分比，默認為100%。 color：設置水平線的顏色，默認黑色?？梢杂妙伾Q、十六進制#RGB或rgb(r,g,b)來表示。 noshade：設置水平線是否要陰影，默認有陰影。例：定義一條水平線，居中顯示、粗5px、寬400px、紅色、無陰影。代碼如下。第30頁2.1.6 文本格式化標簽參考示例：2-1-2.html標簽顯示效果和文字以粗體方式顯示，b定義文本粗體，strong定義強調(diào)文本和文字以斜體方式顯示，i定義斜體字，em定義強調(diào)文本和文字以加刪除線方式顯示(HTML5不贊成使用s)和文字以加下劃線方式顯示(HTML5不贊成使用u)文字高亮顯示創(chuàng)建一個引用標記，被標記的文字

12、以斜體的方式顯示第31頁2.1.7 范圍標簽語法格式：區(qū)域元素說明：與之間只能包含文本和各種行內(nèi)標簽，用來定義網(wǎng)頁中某些特殊顯示的文本，配合class屬性使用。它本身沒有固定的格式表現(xiàn)，只有應用樣式時，才會產(chǎn)生視覺上的變化。第32頁2.1.8 注釋標簽語法格式：說明：注釋內(nèi)容可以為一行，也可以為多行。并且開始標簽和結(jié)束標簽可以不在一行上。第33頁2.1.9 特殊符號特殊符號描述字符的代碼 空格符小于號 大于號&和號&￥人民幣版權注冊商標攝氏度正負號乘號除號2.1.10 案例制作制作完成演示案例:加盟中心。參考代碼 2-1.html第34頁第35頁2.2 圖像標簽 本節(jié)主要內(nèi)容：常用圖像格式圖像

13、標簽及其屬性絕對路徑與相對路徑第36頁2.2.1 案例分析【案例展示】新聞動態(tài)-資訊詳情局部頁面的設計。使用圖像標簽，標題標簽、段落標簽等，設計完成資訊詳情局部頁面的設計?！局R要點】圖像標簽的定義、圖像屬性設置、圖文混排?！緦W習目標】掌握圖像格式設置和圖文混排技術。參考代碼：2-2.html第37頁2.2.2 常用圖像格式網(wǎng)頁圖像有三種常用的格式：GIF、JPG和PNG。具體區(qū)別如下。（1）GIF格式GIF格式支持動畫，同時GIF格式也是一種無損的圖像格式。再加上GIF格式支持透明(全透明或全不通明)，因此很適合在互聯(lián)網(wǎng)上使用。GIF格式文件最多使用256種顏色，適合顯示色調(diào)不連續(xù)或具有大面

14、積單一顏色的圖像，如Logo、小圖標及其他色彩相對單一的圖像。（2）PNG格式PNG格式是一種替代GIF格式的無專利權限制的格式。PNG格式最大的優(yōu)勢是體積更小，支持alpha透明（全透明、半透明、全不透明），并且顏色過渡更平滑，但PNG格式不支持動畫。它包括對索引色、灰度、真彩色圖像以及Alpha通道透明的支持。（3）JPG格式JPG格式所能顯示的顏色比GIF格式和PNG格式要多得多，可以用來保存超過256種顏色的圖像。JPG格式主要用于攝影或者連續(xù)色調(diào)圖像。2.2.3 圖像標簽及其屬性語法格式： 第38頁2.2.3 圖像標簽及其屬性屬性介紹： src：用于指定圖像文件的路徑和文件名，是標簽

15、的必需屬性。 width：設置圖像的顯示寬度，單位是像素或百分比。 height：設置圖像的顯示高度，單位是像素或百分比。 alt：圖像不能顯示時，代替圖像的說明文字。 border：設置圖像邊框的寬度，單位是像素。 align：設置圖像的對齊方式，取值left、center、right。 title：鼠標指向圖片時，顯示的提示文字。 hspace：定義圖像左側(cè)和右側(cè)的空白。 vspace：定義圖像頂部和底部的空白。第39頁2.2.3 圖像標簽及其屬性指定圖像大?。?用width和height屬性用來定義圖片的寬度和高度，其目的是通過指定圖像的高度和寬度加快圖像的下載速度。參考示例：2-2-1

16、.html第40頁2.2.3 圖像標簽及其屬性指定圖像的替換文本： alt屬性指定的替換文本參考示例：2-2-2.html第41頁2.2.3 圖像標簽及其屬性指定圖像的邊框： 通過border屬性可以為圖像添加邊框，設置邊框的寬度，添加邊框后的圖像顯得更醒目、美觀。邊框的顏色默認黑色，不可調(diào)整。參考示例：2-2-3.html第42頁2.2.3 圖像標簽及其屬性指定圖像的對齊方式： 圖文混排技術是指設置圖像與同一行中的文本、圖像、插件或其它元素的對齊方式。默認情況下圖像的底部會相對于于文本的第一行文字對齊。但是在制作網(wǎng)頁的過程中，有時需要實現(xiàn)圖像和文字的環(huán)繞效果，這就需要使用圖像的對齊屬性ali

17、gn。參考示例：2-2-4.html第43頁2.2.4 絕對路徑與相對路徑網(wǎng)頁中路徑分兩種：絕對路徑和相對路徑。1. 絕對路徑 絕對路徑是包括通信協(xié)議名、服務器名、路徑及文件名的完整路徑，是網(wǎng)頁上的文件或目錄在硬盤上的真正路徑。2. 相對路徑 相對路徑就是相對于當前文件的路徑，相對路徑不帶有盤符，通常是以HTML網(wǎng)頁文件為起點，通過層級關系描述目標文件的位置。第44頁2.2.5 案例制作制作完成演示案例:資訊詳情局部頁面。參考代碼 2-2.html第45頁第46頁2.3 超鏈接標簽 本節(jié)主要內(nèi)容：超鏈接簡介超鏈接的應用第47頁2.3.1 案例分析【案例展示】鏈接案例網(wǎng)站信息頁面。使用頁面間鏈接

18、、網(wǎng)站間鏈接、可下載文件鏈接等知識，制作網(wǎng)站信息頁面?！局R要點】超鏈接的定義、頁面間鏈接、網(wǎng)站間鏈接、下載文件鏈接等。【學習目標】掌握各種超鏈接 的應用場合和實現(xiàn)技術。參考代碼：2-3.html2.3.2 超鏈接簡介語法格式：超文本說明： 在上面的語法中，標簽用于定義超鏈接，href和 target為其常用屬性。 href：用于指定鏈接目標的url地址。需要創(chuàng)建空鏈接時，用“#”代替URL。 target：用于指定鏈接頁面的打開方式，常用的取值有_self和_blank兩種， _self為默認值，意為在原窗口中打開，_ blank為在新窗口中打開。第48頁2.3.3 超鏈接的應用1. 站內(nèi)頁

19、面之間的鏈接 同一網(wǎng)站域名下的各頁面之間可以用超鏈接實現(xiàn)互相鏈接訪問。 例如，在首頁以外的其他頁面上，點擊超鏈接“首頁”返回網(wǎng)站首頁。代碼如下。 首頁 4. 下載鏈接5. 圖像做超鏈接6. 錨記鏈接第49頁2.3.3 超鏈接的應用2. 網(wǎng)站之間的鏈接不同網(wǎng)站之間通過超鏈接實現(xiàn)信息和資源共享。例如，在網(wǎng)頁上，點擊超鏈接“163郵箱”打開163網(wǎng)易郵箱首頁。代碼如下。 163郵箱 例如，點擊超鏈接“百度百科超鏈接”打開百度百科網(wǎng)站上關于超鏈接介紹的頁面。代碼如下。百度百科-超鏈接 第50頁2.3.3 超鏈接的應用3. 媒體鏈接 超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動畫等，通過它

20、們可以將網(wǎng)站建設成一個豐富多彩的多媒體世界。 例如，點擊超鏈接“MP4視頻”打開視頻文件并開始播放。代碼如下。 MP4視頻 第51頁2.3.3 超鏈接的應用4. 下載鏈接如果超鏈接指向不是一個網(wǎng)頁文件，而是其他文件，如doc、xls、zip、rar文件等，單擊鏈接時就會下載相應的文件。例如，點擊超鏈接“合作協(xié)議下載”，開始下載文件。代碼如下。合作協(xié)議下載 注意：在項目文件夾的datum目錄里，有“合作協(xié)議.zip”文件，才能點擊下載。第52頁2.3.3 超鏈接的應用5. 圖像做超鏈接 為了增加頁面的美觀性，有時用圖像代替文字做超鏈接。例如，超鏈接中的“首頁”超文本，用圖片替換。代碼如下。 鏈接

21、圖像在低版本的IE瀏覽器中會添加邊框效果，去掉鏈接圖像的邊框只需將邊框定義為0即可。第53頁2.3.3 超鏈接的應用6. 錨記鏈接 創(chuàng)建錨記鏈接，需要兩個步驟。 (1) 首先定義錨記名稱。 格式1：目標附近的文本 格式2：網(wǎng)頁內(nèi)容，E代表html標簽，如p、hn、div等。 (2) 然后，定義錨記鏈接。點擊超文本時，跳轉(zhuǎn)到錨記名或id名開始的位置。 格式：超文本第54頁2.3.4 案例制作制作完成演示案例:網(wǎng)站信息頁面。參考代碼 2-3.html第55頁第56頁2.4 列表 本節(jié)主要內(nèi)容：無序列表有序列表定義列表嵌套列表第57頁2.4.1 案例分析【案例展示】招商加盟-合作方式局部頁面。使用多

22、種列表技術設計招商加盟-合作方式頁面?！局R要點】無序列表、有序列表、定義列表和嵌套列表【學習目標】掌握各種列表的使用方法和列表嵌套技術。參考代碼：2-4.html2.4.2 無序列表語法格式： 列表項1列表項2 屬性type定義無序列表的前導符號。取值circle（圓圈）、disc（圓點）和square（方塊），默認disc。參考示例：2-4-1.html第58頁2.4.3 有序列表語法格式： 列表項1列表項2 屬性介紹： type：列表項的符號類型，取值1（阿拉伯數(shù)字）、a（小寫英文字母）、A（大寫英文字母）、i（小寫羅馬數(shù)字）、I（大寫羅馬數(shù)字），默認符號是阿拉伯數(shù)字。 start：列表

23、項編號的起始值，取值正整數(shù)。默認取值1，即編號從1開始。 reversed：是否對列表項反向排序，當取值為“reversed”時，反向排序。參考示例：2-4-2.html第59頁2.4.4 定義列表語法格式： 標題1 標題1的描述1 標題1的描述2 標題2 標題2的描述1 標題2的描述2 說明：標簽指定定義列表，標簽指定列表項的標題，標簽對標題進行描述。參考示例：2-4-3.html第60頁2.4.5 嵌套列表所謂嵌套列表就是無序列表與有序列表嵌套混合使用。嵌套列表可以把頁面分為多個層次，給人以很強的層次感。參考示例：2-4-4.html第61頁2.4.6 案例制作制作完成演示案例:合作方式局

24、部頁面。參考代碼 2-4.html第62頁2.5 表格 第63頁本節(jié)主要內(nèi)容： 表格的結(jié)構(gòu) 表格的基本語法 表格的修飾 不規(guī)范表格2.5.1 案例分析【案例展示】LED射燈介紹局部頁面。使用表格技術，制作LED射燈介紹局部頁面?！局R要點】表格元素、語法、表格修飾的設置?！緦W習目標】掌握設置表格屬性的方法。第64頁2.5.2 表格的結(jié)構(gòu)表格是由行和列組成的二維表，而每行又由一個或多個單元格組成，用于放置數(shù)據(jù)或其他內(nèi)容。表格中的內(nèi)容按照相應的行或列進行分類和顯示。第65頁2.5.3 表格的基本語法 表格標題 表頭1表頭2表頭n 表頭2-1表頭2-2表頭2-n 表頭m-1表頭m-2表頭m-n第66

25、頁2.5.3 表格的基本語法表格的整體外觀由標簽的屬性決定。border：定義表格邊框的寬度，單位是像素。默認值“0”，顯示為沒有邊框的表格。width：定義表格的寬度，單位是像素或百分比。height：定義表格的高度，單位是像素或百分比。cellspacing：定義單元格之間的空白，單位是像素，默認2px。cellpadding：定義單元格邊框與內(nèi)容之間的空白, 單位是像素，默認1px。參考示例：2-5-1.html第67頁2.5.4 表格的修飾表格是網(wǎng)頁布局中的重要元素，可以對其設置進而美化表格。設置表格大小設置表格背景設置表格的對齊方式設置表格中數(shù)據(jù)的對齊方式參考示例：2-5-3.htm

26、l第68頁2.5.5 不規(guī)范表格1跨行跨行是指單元格在垂直方向上合并，語法如下： 單元格內(nèi)容2跨列跨列是指單元格在水平方向上合并，語法如下： 單元格內(nèi)容3跨行、跨列參考示例：2-5-4.html第69頁2.5.6 案例制作制作完成演示案例:LED射燈介紹局部頁面。參考代碼 2-5.html第70頁2.6 頁面交互標簽 第71頁本節(jié)主要內(nèi)容： details和summary元素表格的基本語法 progress元素 meter元素2.6.1 details和summary元素details元素用于顯示或隱藏文檔的細節(jié)信息用details和summary實現(xiàn)信息顯示/隱藏功能的代碼格式如下： 標題

27、文檔詳細信息 屬性open:取值open，定義details是否顯示。默認不顯示。參考示例：2-6-1.html第72頁2.6.2 progress元素progress元素用于顯示某個特定任務的時間進度語法格式：屬性介紹： value：定義當前已完成的工作量值。屬性值value1取值在0.0和1.0之間或者是在max值以下。 max: 定義全部的工作量數(shù)值。屬性值value2默認取值范圍是從0.0-1.0，或者指定值，默認值是1.0。參考示例：2-6-2.html第73頁2.6.3 meter元素meter元素用于表示指定范圍內(nèi)的數(shù)值。語法格式：屬性介紹： value：定義度量的當前值。必須。

28、 optimum：定義度量的優(yōu)化值，即什么樣的度量值是最佳的值。如果該值高于high屬性，則意味著值越高越好。如果該值低于low屬性的值，則意味著值越低越好。第74頁2.6.3 meter元素 low：定義度量的值位于哪個點被界定為低的值的范圍。 high：定義度量的值位于哪個點被界定為高的值的范圍。 min：定義范圍的最小值，默認值是0。 max：定義范圍的最大值，默認值是1。參考示例：2-6-3.html第75頁2.7 實訓【實訓任務】設計新聞動態(tài)產(chǎn)品資訊局部頁面。【知識要點】文本控制標簽、圖像標簽及圖文混排、列表、超鏈接。【實訓目標】掌握用文本標簽、圖像標簽、列表、超鏈接等設計頁面的技術

29、。第76頁第77頁2.8 本章小結(jié) 本章首先介紹了文本控制標簽的功能及用法，然后介紹了圖像標簽、文件的路徑知識和圖文混排技術，還有超鏈接技術、列表和表格的設計技術，頁面交互元素的功能，最后通過實例講解了文本控制標簽、圖像標簽、列表標簽、超鏈接在頁面設計中的實際應用技術。通過本章的學習，讀者能掌握應用頁面元素設計簡單網(wǎng)頁的技術。第78頁第3章 CSS入門本章概述 本章的學習目標主要內(nèi)容第79頁本章概述CSS在Web設計領域是一個突破，它為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式，包括版式、顏色和大小等。CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進行統(tǒng)一管理，也就是說，頁面中顯

30、示的內(nèi)容放在結(jié)構(gòu)里，而修飾、美化放在樣式里，做到結(jié)構(gòu)(內(nèi)容)與樣式分開，這樣，當頁面使用不同的樣式時，呈現(xiàn)出的效果是不一樣的。W3C(萬維網(wǎng)聯(lián)盟)推薦使用CSS來完成表現(xiàn)。第80頁本章的學習目標理解CSS的定義、優(yōu)點。掌握CSS的定義與使用方法。掌握CSS樣式規(guī)則。掌握CSS基礎選擇器，能夠運用CSS選擇器選擇頁面元素。掌握CSS長度單位、百分比單位和色彩單位的使用掌握CSS的層疊性和繼承性。理解CSS優(yōu)先級，能夠區(qū)分復合選擇器權重的大小第81頁主要內(nèi)容3. 1 CSS定義與使用3. 2 CSS 選擇器3. 3 CSS屬性單位3. 4 CSS高級特性3. 5 實訓3. 6 本章小結(jié) 第82頁3

31、.1 CSS定義與使用本節(jié)主要內(nèi)容：CSS概述CSS定義和引用3.1.1 CSS概述CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。同時CSS非常常靈活，既可以嵌入在HTML文檔中，也可以是一個單獨的外部文件，如果是獨立的文件，則必須以.css為后綴名。如今大多數(shù)網(wǎng)頁都是遵循Web標準開發(fā)的，即用HTML編寫網(wǎng)頁結(jié)構(gòu)和內(nèi)容，而相關版面布局、文本或圖片的顯示樣式都使用CSS控制。HTML與CSS的關系就像人的骨骼與衣服，通過更改CSS樣式，可以輕松控制網(wǎng)頁的表現(xiàn)樣式。第83頁第84頁3.1.2 CSS定義和引用1.內(nèi)聯(lián)樣式

32、內(nèi)聯(lián)樣式就是在元素標簽內(nèi)使用style屬性，style屬性值可以包含任何CSS樣式聲明。內(nèi)聯(lián)樣式的格式為:需要說明的是，內(nèi)聯(lián)樣式由于將表現(xiàn)和內(nèi)容混在一起，不符合Web標準，所以要慎用這種方法，當樣式僅需要在一個元素上應用一次時可以使用內(nèi)聯(lián)樣式。參考示例：3-1-1.html第85頁3.1.2 CSS定義和引用2. 內(nèi)部樣式表內(nèi)部樣式表是寫在HTML的里面的，只對所在的網(wǎng)頁有效。（1）內(nèi)部樣式表的格式為：選擇符1屬性：屬性值；屬性：屬性值 /*注釋內(nèi)容*/選擇符2屬性：屬性值；屬性：屬性值選擇符n屬性：屬性值；屬性：屬性值第86頁3.1.2 CSS定義和引用（2）組合選擇符的格式除了在內(nèi)分別定義

33、各種選擇符的樣式外，如果多個選擇符具有相同的樣式，可以采用組合選擇符，以減少重復定義的麻煩，其格式為：選擇符1，選擇符2，選擇符n屬性：屬性值；屬性：屬性值參考示例：3-1-2.html第87頁3.1.2 CSS定義和引用3.外部樣式表多個頁面需要應用相同樣式時，應該使用外部樣式表。外部樣式表管理整個Web頁的外觀。Web開發(fā)時，首先對整個外觀定義一個CSS文件（擴展名為css），當頁面需要使用樣式時，通過標簽鏈接外部樣式表文件。使用外部樣式表可以實現(xiàn)改變一個文件就能改變整個站點外觀的目的。第88頁3.1.2 CSS定義和引用(1)用標簽鏈接樣式表文件標簽必須放到頁面的 標簽對內(nèi)。其格式為:第

34、89頁3.1.2 CSS定義和引用(2)樣式表文件的格式樣式表文件可以用任何文本編輯器(如記事本)打開并編輯，一般樣式表文件的擴展名為.css。樣式表文件的內(nèi)容是定義的樣式表，不包含HTML標簽。樣式表文件的格式為：選擇符1屬性：屬性值；屬性：屬性值 /*注釋內(nèi)容*/選擇符2屬性：屬性值；屬性：屬性值選擇符n屬性：屬性值；屬性：屬性值參考示例：3-1-3.html第90頁3.2 CSS 選擇器本節(jié)主要內(nèi)容：案例分析CSS樣式規(guī)則CSS基礎選擇器案例制作第91頁3.2.1 案例分析【案例展示】使用鏈入外部樣式表的方法制作企業(yè)簡介頁面?！局R要點】常用的CSS選擇符、網(wǎng)頁中引用CSS。【學習目標】

35、掌握CSS的定義與使用方法參考代碼：3-2.html第92頁3.2.2 CSS樣式規(guī)則CSS為樣式化網(wǎng)頁內(nèi)容提供了一條捷徑，即樣式規(guī)則，每一條規(guī)則都是單獨的語句。樣式表的每個規(guī)則都有兩個主要部分：選擇符(selector)和聲明( declaration)。CSS控制網(wǎng)頁內(nèi)容顯示格式的方式是通過許多定義的樣式屬性(如字號、段落控制等)實現(xiàn)的，并將多個樣式屬性定義為一組可供調(diào)用的選擇符(selector)。用戶只需要通過選擇符對不同的HIML標簽進行控制，并賦予各種樣式聲明，即可實現(xiàn)各種效果。聲明由一個或多個屬性值對組成。第93頁3.2.2 CSS樣式規(guī)則樣式規(guī)則的語法為：selector屬性：

36、屬性值；屬性：屬性值語法說明:selector表示希望進行格式化的元素；聲明部分包括在選擇符后的大括號中；用“屬性：屬性值”描述要應用的格式化操作。第94頁3.2.3 CSS基礎選擇器1標記選擇器標記選擇器是指用HTML標記名稱作為選擇器，按標記名稱分類，為頁面中某一類標記指定統(tǒng)一的CSS樣式。其基本語法格式為：標記名屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;該語法中，所有的HTML標記名都可以作為標記選擇器，如body、hl、p、 strong等。用標記選擇器定義的樣式對頁面中該類型的所有標記都生效。標記選擇器最大的優(yōu)點是能快速為頁面中同類型的標記統(tǒng)一樣式，同時這也是它的缺點，不

37、能設計差異化樣式。第95頁3.2.3 CSS基礎選擇器2類選擇器類選擇器使用“.”（英文點號）進行標識，后面緊跟類名，其基本語法格式為：.類名屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；該語法中，類名即為HTML元素的class屬性值，大多數(shù)HTML元素都可以定義clas屬性。類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。參考示例：3-2-1.html第96頁3.2.3 CSS基礎選擇器3id選擇器id選擇器使用“”進行標識，后面緊跟id名，其基本語法格式為：#id名屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；該語法中，id名即為HTML元素的id屬性值。大多數(shù)H

38、TML元素都可以定義id屬性，元素的id值是唯一的，只能對應于文檔中某一個具體的元素。參考示例：3-2-2.html第97頁3.2.3 CSS基礎選擇器4通配符選擇器通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式為：*屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。*margin:0; /*定義外邊距*/padding:0; /*定義內(nèi)邊距*/第98頁3.2.3 CSS基礎選擇器5標簽指定式選擇器標簽指定式選擇器又稱交集選擇器，由兩個選擇器構(gòu)成，其中第一個為

39、標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如h：h3.special或pone。參考示例：3-2-3.html第99頁3.2.3 CSS基礎選擇器6后代選擇器后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內(nèi)層標記寫在后面，中間用空格分隔。當標記發(fā)生嵌套時，內(nèi)層標記就成為外層標記的后代。參考示例：3-2-4.html第100頁3.2.3 CSS基礎選擇器7并集選擇擇器并集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標記選擇器、類選擇器及id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同或部分相同，

40、就可以利用并集選擇器為它們定義相同的CSS樣式。參考示例：3-2-5.html3.2.4 案例制作制作完成演示案例:制作企業(yè)簡介。參考代碼 3-2.html第101頁3.3 CSS屬性單位第102頁本節(jié)主要內(nèi)容：長度單位色彩單位3.3.1 長度、百分比單位1長度單位長度單位有相對長度單位和絕對長度單位兩種類型。相對長度單位是指以該屬性前一個屬性的單位值為基礎來完成目前的設置。絕對長度單位將不會隨著顯示設備的不同而改變。換句話說，屬性值使用絕對長度單位時，不論在哪種設備上，顯示效果都是一樣的，如屏幕上的lcm與打印機上的1cm是一樣長的。由于相對長度單位確定的是一個相對于另一個長度屬性的長度，因

41、而它能更好地適應不同的媒體，所以它是首選的。第103頁3.3.1 長度、百分比單位2百分比單位百分比單位也是一種常用的相對長度類型，通常的參考依據(jù)為元素的font-size屬性。百分比值總是相對于另一個值來說的，該值可以是長度單位或其他單位。每一個可以使用百分比值單位指定的屬性，同時也自定義了這個百分比值的參照值。在大多數(shù)情況下，這個參照值是該元素本身的字體尺寸。并非所有屬性都支持百分比單位。一個百分比值由可選的正號“+”或負號“-”，接著一個數(shù)字，后跟百分號“%”組成。如果百分比值是正的，正號可以不寫。正負號、數(shù)字與百分號之間不能有空格。第104頁3.3.2 色彩單位1用十六進制數(shù)方式表示色

42、彩值在計算機中，定義每種色彩的強度范圍為0255。當所有色彩的強度都為0時，將產(chǎn)生黑色；當所有色彩的強度都為255時，將產(chǎn)生白色。在HTML中，使用十六進制數(shù)指定色彩時，前面是一個“#”號，再加上6個十六進制數(shù)字表示，表示方法為：# RRGGBB。其中，前兩個數(shù)字代表紅光強度(Red)，中間兩個數(shù)字代表綠光強度( Green)，后后兩個數(shù)字代表藍光強度(Blue)。紅色、綠色、藍色、黑色、白色的十六進制設置值分別為:#ff0000、#00ff00、#00000ff、#000000、#ffffff。第105頁3.3.2 色彩單位2用色彩名稱方式表示色彩值CSS中也提供了與HTML一樣的用色彩的英

43、文名稱表示色彩的方式。例如下面的示例代碼：pcolor:red第106頁3.3.2 色彩單位3用rgb函數(shù)方式表示色彩值在CSS中，可以用rgb函數(shù)設置所要的色彩。語法格式為： rgb(R,G,B) 其中，R為紅色值，G為綠色值，B為藍色值。這3個參數(shù)可取正整數(shù)值或百分比值，正整數(shù)值的取值范圍為0255，百分比值的取值范圍為色彩強度的百分比0.0%100.0%。例如下面的示例代碼：pcolor:rgb(128,50,220)pcolor:rgb(15%,100,60%)第107頁3.4 CSS高級特性第108頁本節(jié)主要內(nèi)容：案例分析CSS的層疊和繼承性CSS的優(yōu)先級案例制作3.4.1 案例分析

44、【案例展示】使用各種類型的元素制作客戶案例的相關產(chǎn)品局部頁面?！局R要點】CSS的層疊性、繼承性及優(yōu)先級。【學習目標】靈活使用CSS高級特性的方法設置元素的樣式第109頁3.4.2 CSS的層疊和繼承性1. 層疊性層疊( cascade)是指CSS能夠?qū)ν粋€元素應用多個樣式表的能力。一般原則是,最接近目標的樣式定義優(yōu)先級最高。高優(yōu)先級樣式將繼承低優(yōu)先級樣式的未重疊定義,但覆蓋重疊的定義。根據(jù)規(guī)定,樣式表的優(yōu)先級別從高到低為:內(nèi)聯(lián)樣式表、內(nèi)部樣式表、鏈接樣式表和默認瀏覽器樣式表。參考示例：3-4-1.html第110頁3.4.2 CSS的層疊和繼承性2. 繼承性CSS的主要特征就是繼承（Inh

45、eritance），它依賴于祖先-子孫關系，這種特性允許樣式不僅應用于某個特定的元素，同時也應用于其后代，而后代所定義的新樣式，卻不會影響父代樣式。根據(jù)CSS規(guī)則，子元素繼承父元素屬性。如: bodyfont-family:微軟雅黑; 通過繼承，所有body的子元素都應該顯示為為“微軟雅黑”字體，子元素的子元素也一樣。參考示例：3-4-2.html第111頁3.4.3 CSS的優(yōu)先級定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題，當多個規(guī)則應用到同一個元素時權重越大的樣式會被優(yōu)先采用。參考示例：3-4-3.html第112頁3.4.4 案例制作制作完成演示案

46、例:客戶案例相關產(chǎn)品局部頁面。參考代碼 3-4.html第113頁3.5 實訓制作完成演示案例:LED射燈詳細信息頁面。參考代碼 3-5.html第114頁第115頁3.6 本章小結(jié) 本章全面講述了CSS所實現(xiàn)的結(jié)構(gòu)與表現(xiàn)的分離及CSS樣式的優(yōu)先級規(guī)則。首先介紹了CSS定義與使用、CSS樣式規(guī)則、引入方式及CSS基礎選擇器。接下來，講解了CSS屬性單位、CSS的層疊性、繼承性及優(yōu)先級。最后通過CSS修飾文本，制作出了一個常見的LED射燈詳細信息頁面。第116頁第四章 元素外觀修飾本章概述 本章的學習目標主要內(nèi)容第117頁本章概述網(wǎng)頁設計中各種元素包括文本、圖像、列表、表格、鏈接、導航等，可以用

47、CSS樣式進行設置以美化頁面。本章將具體介紹頁面各種元素樣式屬性及其設置方法。第118頁本章的學習目標掌握文本字體樣式屬性的意義及其設置方法。掌握圖像樣式各個屬性的意義及其設置方法。掌握列表樣式的定義方法。掌握表格樣式的設置方法。掌握綜合應用元素外觀屬性制作頁面的方法。第119頁主要內(nèi)容4.1 文本樣式4.2 圖像樣式4.3 列表樣式4.4 表格樣式4.5 實訓4.6 本章小結(jié) 第120頁4.1 文本樣式本節(jié)主要內(nèi)容：案例分析字體樣式文本外觀屬性案例制作第121頁4.1.1 案例分析【案例展示】企業(yè)文化頁面的設計。【知識要點】字體類型、大小、粗細、顏色、修飾、對齊方式、縮進、行間距、首字母樣式

48、、字符間距、單詞間距、大小寫轉(zhuǎn)換、文本陰影、長單詞換行、空白符處理、溢出文本處理等?！緦W習目標】掌握CSS文本修飾的常用屬性的作用并靈活應用。參考代碼：4-1.html第122頁4.1.2 字體樣式網(wǎng)頁設計時需要選擇合適的字體、字號等文本樣式進行頁面設計。為了方便控制頁面中文本的樣式，CSS提供了一組字體樣式屬性。1. font-family(設置字體) 語法：font-family: name2. font-size(設置字體大小) 語法：font-size : xx-small | x-small | small | medium | large | x-large | xx-large

49、| larger | smaller | length | %3. font-weight(設置字體粗細) 語法：font-weight:normal | bold | bolder | lighter | 4. font-style(字體風格) 語法：font-style : normal | italic | oblique第123頁4.1.2 字體樣式4. font-style(設置字體風格) 語法：font-style : normal | italic | oblique5. font-face(綜合設置字體樣式) 可以用font屬性對字體樣式進行綜合設置。語法：font: font

50、-style font-weight font- size font-family參考示例：例4-1-1.html、4-1-2.html、4-1-3.html第124頁4.1.3 文本外觀屬性1. color(定義文本的顏色) 語法：color：預定義顏色值 |十六進制 | RGB代碼2. text-decoration (定義字體修飾) 語法：text-decoration：underline | overline | line-through | none3. text-align(設置文本對齊方式) 語法：text-align：center | left | right | justif

51、y4. line-height(設置行間距) 行間距就是行與行之間的垂直間距，一般稱為行高，在CSS 樣式中用Line-height用于設置行高。5. text-indent(定義首行縮進) 語法：text-indent:length | %第125頁4.1.2 字體樣式6. :first-letter偽元素(向文本的第一個字母添加特殊樣式) :first-letter偽元素用于指定元素第一個字母的樣式。7. letter-spacing（字符間距）語法：letter-spacing:normal | length8. word-spacing（單詞間距）語法：word-spacing:nor

52、mal | length9. text-transform(文本大小寫轉(zhuǎn)換) 語法：text-transform:none | capitalize | uppercase | lowercase10. text-shadow(文本陰影) 語法：text-shadow: h-shadow v-shadow blur color第126頁4.1.3 文本外觀屬性11. word-wrap(允許長單詞或 URL 地址換行) 語法：word-wrap: normal|break-word12. white-space(空白符處理字體修飾) 語法：white-space :normal | pre |

53、 nowrap 13. text-overflow(溢出文本) 語法：text-overflow: clip | ellipsis | string參考示例：例4-1-4.html、4-1-5.html、4-1-6.html、4-1-7.html、4-1-8.html、4-1-9.html4.1.4 案例制作制作完成演示案例:企業(yè)文化頁面的設計。參考代碼 4-1.html第127頁第128頁4.2 圖像樣式本節(jié)主要內(nèi)容：案例分析設置圖像樣式案例制作第129頁4.2.1 案例分析【案例展示】新聞動態(tài)-產(chǎn)品資訊局部頁面的設計?！局R要點】設置圖像邊框、圖像縮放、圖像位置、圖文混排等。【學習目標】掌

54、握CSS設置圖像樣式的常用屬性。參考代碼：4-2.html第130頁4.2.2 設置圖像樣式在HTML中，已經(jīng)學習過圖像元素的基本知識，下面用CSS樣式設置圖片的大小和邊框。1. 設置圖像大小 使用CSS樣式控制圖片的大小，可以通過 width和 height兩個屬性來實現(xiàn)。常用的取值單位有像素px和基于父元素寬度（高度）的百分比寬度（高度）。2. 設置圖像邊框 用CSS樣式設置圖像的邊框時，用border-style屬性設置邊框線型，用border-width設置邊框粗細，用border-color設置邊框顏色。4.2.3 案例制作制作完成演示案例:新聞動態(tài)-產(chǎn)品資訊局部頁面的設計。參考代碼

55、 4-2.html第131頁第132頁4.3 列表樣式本節(jié)主要內(nèi)容：案例分析設置列表項標記類型設置列表項標記位置案例制作第133頁4.3.1 案例分析【案例展示】工程案例客戶案例展示頁面。【知識要點】設置列表類型、設置列表項目符號及位置的屬性和方法。【學習目標】掌握CSS設置列表樣式的常用屬性和方法。參考代碼：4-3.html第134頁4.3.2 設置列表項標記類型通常的項目列表主要采用或標簽，然后配合標簽列出各個項目。在CSS樣式中，列表項的標記類型是通過屬性list-syle-type來修改的。 list-style-type屬性主要用于修改列表項的標記類型， list- style-ty

56、pe屬性常用的屬性值見表4-1。參考代碼：4-3-1.html第135頁4.3.2 設置列表項標記類型列表類型list-style-type的屬性值說明無序列表disc默認值，標記是實心圓circle標記是空心圓square標記是實心正方形decimal標記是數(shù)字有序列表upper-alpha標記是大寫英文字母，如 A ,B, C, E,F,lower-alpha標記是小可英文字母，如a,b,c,d,e,f,upper-roman標記是大寫羅馬字母，如I,II,III,IV,V,VI,lower - roman標記是小寫歲馬字母，如i,ii,iii,iv,v,vi,none不顯示任何符號表4-

57、1常用的 list-style-type屬性值第136頁4.3.3 設置列表項標記位置list-style-position屬性用于聲明列表標志相對于列表項內(nèi)容的位置，其屬性值有兩個關鍵詞 outside(外部)和 inside(內(nèi)部)。使用 outside屬性值（默認值），保持標記位于文本的左側(cè)，放置在文本以外，環(huán)繞文本不根據(jù)標記對齊。使用 inside屬性值，列表項目標記放置在文本以內(nèi)，像是插入在列表項內(nèi)容最前面的行內(nèi)元素一樣，環(huán)繞文本根據(jù)標記對齊。參考代碼：4-3-2.html4.3.4 案例制作制作完成演示案例:工程案例客戶案例展示頁面。參考代碼 4-3.html第137頁第138頁4

58、.4 表格樣式本節(jié)主要內(nèi)容：案例分析border-collapse(設置表格邊框合并)border-spacing(設置單元格間距 )empty-cells(設置是否顯示單元格邊框)caption-side(設置表格標題位置)案例制作第139頁4.4.1 案例分析【案例展示】營銷動態(tài)-銷售統(tǒng)計部分頁面。【知識要點】表格邊框合并、單元格間距?！緦W習目標】掌握設置表格樣式的常用屬性。參考代碼：4-4.html第140頁4.4.2 border-collapse(設置表格邊框合并)border-collapse屬性用于設置表格的邊框是合并成單邊框，還是分別有自己的邊框。語法：border-colla

59、pse:separate | collapse參數(shù)：separate：邊框分開，border-spacing 和 empty-cells 屬性起作用。（默認值）collapse：邊框合并，即兩個相鄰的邊框共用一個邊框。忽略 border-spacing 和 empty-cells 屬性。參考代碼：4-4-1.html第141頁4.4.3 border-spacing(設置單元格間距 )border-spacing用于設置相鄰單元格邊框間的距離。語法：border-spacing:length | length參數(shù)：length：相鄰單元格的邊框之間的距離，單位 px、cm 等，不允許用負值。參

60、考代碼：4-4-2.html第142頁4.4.4 empty-cells(設置是否顯示單元格邊框)empty-cells屬性用于設置當表格的單元格無內(nèi)容時，是否顯示該單元格的邊框。語法：empty-cells: show | hide參數(shù)：show：在空單元格周圍繪制邊框(默認)。hide：不在空單元格周圍繪制邊框參考代碼：4-4-3.html第143頁4.4.5 caption-side(設置表格標題位置)caption-side用于設置表格標題的位置。語法：caption-side:top | bottom | left | right參數(shù)：top：把表格標題定位在表格之上，默認值。bot