單元2美麗鮮花網(wǎng)店-HTML標(biāo)簽與CSS樣式基礎(chǔ)《WEB前端開發(fā)實用案例教程》課件

1、WEB前端開發(fā)實用案例教程 第二單元 美麗鮮花網(wǎng)店 HTML標(biāo)簽與CSSS樣式基礎(chǔ) HTML作為網(wǎng)頁的骨架，決定了有哪些元素,那么CSS就是網(wǎng)頁的血肉，決定了這些元素以什么樣的形式展現(xiàn)。HTML的作用就是用來表示一個網(wǎng)頁由哪些元素組成，每一個標(biāo)簽都會在網(wǎng)頁中渲染出對應(yīng)的元素。因此，網(wǎng)頁主要有3部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。我們將要學(xué)習(xí)的HTML標(biāo)簽和CSS層疊樣式表就是網(wǎng)頁結(jié)構(gòu)層和表現(xiàn)層的具體體現(xiàn)。教學(xué)目標(biāo)： 掌握Dreamweaver中插入文字、圖像、列表、超鏈接等HTML元素方法，以及網(wǎng)頁各元素標(biāo)簽的寫法，能夠編寫網(wǎng)頁結(jié)構(gòu)

2、層代碼 掌握CSS樣式表語法規(guī)則 掌握CSS樣式表中選擇器的使用，能夠?qū)W(wǎng)頁元素進(jìn)行修飾 掌握在頁面中引入CSS樣式表的4種方式（內(nèi)嵌樣式、行內(nèi)樣式、鏈接樣式和導(dǎo)入樣式），能夠根據(jù)需要選擇合適的方式將CSS樣式引入到網(wǎng)頁中目錄頁/Contents01 任務(wù) 1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹02 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)知識儲備01 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】1. HTML與CSS簡介 HTML是HyperText Markup Language（超文本標(biāo)記語言）的英文縮寫，是用于設(shè)計網(wǎng)頁的主要語言。用HTML編寫的超文本文檔稱為HTML文檔，擴展名為“

3、.html”，也就是網(wǎng)頁。 CSS（Cascading Style Sheets）中文名為“層疊樣式表”，用于設(shè)置網(wǎng)頁中各標(biāo)簽的樣式。在網(wǎng)頁制作中，HTML屬于網(wǎng)頁的結(jié)構(gòu)層部分，用來確定網(wǎng)頁的內(nèi)容和結(jié)構(gòu)；CSS屬于網(wǎng)頁的表現(xiàn)層部分，用于設(shè)置網(wǎng)頁的樣式。2. HTML的標(biāo)簽構(gòu)成 HTML文件是由一系列元素和標(biāo)簽組成的。元素是HTML文件的重要組成部分，元素名不區(qū)分大小寫。HTML用標(biāo)簽來規(guī)定元素的屬性和它在文件中的位置。 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】 HTML文件是由一系列元素和標(biāo)簽組成的。元素是HTML文件的重要組成部分，元素名不區(qū)分大小寫。HTML用標(biāo)簽來規(guī)定元素的屬

4、性和它在文件中的位置。 HTML標(biāo)簽是由尖括號括起來的關(guān)鍵詞，絕大多數(shù)HTML標(biāo)簽都是成對出現(xiàn)的，包含首標(biāo)簽和尾標(biāo)簽。首標(biāo)簽的格式為，尾標(biāo)簽的格式為，首標(biāo)簽和尾標(biāo)簽的中間為元素內(nèi)容。 標(biāo)簽內(nèi)容 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】 成對標(biāo)簽僅對包含在其中的內(nèi)容起作用，如標(biāo)題標(biāo)簽和用于界定標(biāo)題元素的范圍。除成對標(biāo)簽外，也存在少量的單標(biāo)簽，其格式為，作用是在相應(yīng)位置插入元素，如換行標(biāo)簽表示在該標(biāo)簽所在位置插入一個換行符。 在HTML文件中，每個標(biāo)簽都有名稱、可選擇的屬性和標(biāo)簽內(nèi)容，標(biāo)簽的屬性都在首標(biāo)簽內(nèi)標(biāo)明。首標(biāo)簽的基本語法如下： 尾標(biāo)簽的語法格式： 在HTML文件中，某個標(biāo)簽的完

5、整定義語法如下： 標(biāo)簽內(nèi)容（文本或超文本） 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】3. 元素 當(dāng)一段文字被一組HTML標(biāo)簽包含在中間時，則這段文字和包含文字的HTML標(biāo)簽一起被稱為一個元素。 在所有HTML文件中，最外層的元素是由標(biāo)簽建立的，在標(biāo)簽所建立的元素中，包含了兩個主要的子元素，這兩個子元素是由標(biāo)簽與標(biāo)簽所建立的。標(biāo)簽所建立的元素的內(nèi)容為文件頭部，而標(biāo)簽所建立的元素內(nèi)容為文件主體。4. HTML標(biāo)題、水平線、段落和換行1）HTML標(biāo)題 標(biāo)題的作用是讓用戶快速了解文檔的結(jié)構(gòu)與大致信息，它是通過等標(biāo)簽對進(jìn)行定義的。標(biāo)簽對定義最大的一號標(biāo)題；標(biāo)簽對定義最小的六號標(biāo)題。 這是一號

6、標(biāo)題 這是二號標(biāo)題 這是三號標(biāo)題 這是四號標(biāo)題 這是五號標(biāo)題 這是六號標(biāo)題 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】 2）水平線 水平線主要是用來分隔網(wǎng)頁中的內(nèi)容。水平線標(biāo)簽是一個單標(biāo)簽，其作用是在HTML頁面中創(chuàng)建水平線。 3）段落 HTML段落是通過標(biāo)簽對進(jìn)行定義的。 4）換行 段落中內(nèi)容情況進(jìn)行換行，需使用標(biāo)簽。 這是段落文字 這是段落文字 這是段落文字 段落中內(nèi)容 進(jìn)行換行的使用 段落內(nèi)容 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】5. 路徑1）絕對路徑 絕對路徑是書寫完整的路徑，系統(tǒng)按照整個路徑查找文件。絕對路徑中的盤符后面用“:”或“:/”分隔，各目錄名之間以

7、及目錄名與文件名之間用“”或“/”分隔。例如：表示為圖像在域名為的服務(wù)器中的img目錄里；表示為圖像在E盤my web目錄下的image子目錄里。2）相對路徑 相對路徑是以當(dāng)前文檔所在的路徑和子目錄為起始目錄，進(jìn)行相對于文檔的查找。制作網(wǎng)頁時通常采用相對路徑，這樣可以避免站點中的文件整體移動后，產(chǎn)生找不到圖像或其他文件等的現(xiàn)象。例如：表示為圖像位置是當(dāng)前目錄image文件夾里的1.gif圖片。 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】6. HTML超鏈接1）超鏈接基本格式 超鏈接由源端點和目標(biāo)端點兩部分組成，其中設(shè)置了鏈接的一端稱為源端點，跳轉(zhuǎn)到的頁面或?qū)ο蠓Q為目標(biāo)端點，源端點可以

8、是文字或圖像等。HTML超鏈接主要由標(biāo)簽對和屬性href構(gòu)成。要實現(xiàn)鏈接的跳轉(zhuǎn)，必須要使用屬性href。 HTML超鏈接格式表示為 : href=”跳轉(zhuǎn)文件的地址”表示為超鏈接的目標(biāo)文件的路徑。 target 屬性表示鏈接目標(biāo)的打開方式。 源端點（如鏈接文字） 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】 target有4種類型打開方式，分別表示是 : target=“_blank”表示保留當(dāng)前窗口，在新窗口中打開鏈接的網(wǎng)頁； target=_parent 表示在當(dāng)前窗口打開鏈接的網(wǎng)頁，如果是框架網(wǎng)頁，則在父框架中顯示打開的鏈接網(wǎng)頁； target=_self 表示在當(dāng)前窗口打開鏈接的

9、網(wǎng)頁，如果是框架網(wǎng)頁，則在當(dāng)前框架中顯示打開的鏈接網(wǎng)頁； target=_top 表示在當(dāng)前窗口打開鏈接的網(wǎng)頁，如果是框架網(wǎng)頁，則刪除所有框架，顯示打開的網(wǎng)頁。 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【知識儲備】2）超鏈接分類 超鏈接分為文字鏈接、圖像超鏈接、空鏈接、錨點超鏈接和郵件超鏈接幾種類型。（1）文字超鏈接表示為鏈接文字。（2）圖像超鏈接表示為。（3）空鏈接表示為 鏈接實質(zhì)是無跳轉(zhuǎn)頁面，僅在頁面上有鏈接形式。（4）錨點超鏈接表示為標(biāo)題名。（5）郵件超鏈接表示為。素材收集02 創(chuàng)建站點，用Dreamweaver CS制作網(wǎng)頁 (實例圖片文字內(nèi)容見本章素材文件夾) 實例素材：第二單元“文

10、字.txt” 、 image 效果文件：第二單元“flower01.html”任務(wù)實施03 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【任務(wù)實施】 鮮花網(wǎng)頁的結(jié)構(gòu)部分主要包括輸入文本、設(shè)置段落、設(shè)置標(biāo)題、設(shè)置超鏈接、插入水平線、插入圖像等操作。1）構(gòu)建HTML結(jié)構(gòu)（1）將素材實例文件夾拷貝至創(chuàng)建My Web站點的根目錄中。（2）啟動Dreamweaver CS，打開“文件”面板，在拷貝的文件夾中創(chuàng)建一個名為“flower.html”的網(wǎng)頁文檔，并在文檔編輯窗口中打開。（3）添加標(biāo)題。將文字內(nèi)容復(fù)制粘貼到新建文檔的設(shè)計視圖中，然后依據(jù)效果圖，查看是否分好段落，如果沒有，在設(shè)計視圖中按Enter鍵劃

11、分段落，并清除空行。 任務(wù)1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹【任務(wù)實施】 圖 2-1 頁面效果（4）添加標(biāo)題標(biāo)簽。在“插入”面板中選擇“結(jié)構(gòu)”類別，然后單擊“標(biāo)題H1”按鈕。如圖2-1所示的頁面效果。（5）添加水平線。將標(biāo)題文字和內(nèi)容文字進(jìn)行了形式上的分開。（6）設(shè)置超鏈接。（7）保存文件。按Ctrl+S組合鍵保存網(wǎng)頁，然后按F12鍵在瀏覽器中預(yù)覽效果，此頁面完成。知識歸納04 HTML文件中最重要的應(yīng)用之一就是超鏈接，超鏈接是一個網(wǎng)站的靈魂，Web上的網(wǎng)頁是互相連接，單擊被稱為超鏈接的文本或圖形就可以鏈接到其他頁面。目錄頁/Contents01 任務(wù) 1 制作鮮花網(wǎng)頁結(jié)構(gòu)HTML標(biāo)簽介紹0

12、2 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)知識儲備01 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)【知識儲備】1. 在HTML頁面中引入CSS樣式表的方法（1）將CSS樣式表放置在HTML文件頭部，內(nèi)部樣式表中。 內(nèi)部樣式表也稱嵌入式樣式表，是指把對頁面各元素的樣式設(shè)置集中寫在標(biāo)簽對中，并且用標(biāo)簽對進(jìn)行聲明，其格式如下： 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)【知識儲備】（2）將CSS樣式表放置在HTML文件主體：行內(nèi)樣式表。 行內(nèi)樣式表是直接對HTML標(biāo)簽使用style屬性，然后將CSS代碼作為屬性值寫在其中，其格式如下：（3）將CSS樣式表放置在HTML文件外部：鏈接樣式表。 要在HTML中鏈接外部

13、樣式表文件，需要在標(biāo)簽對之間添加標(biāo)簽對，具體格式如下： 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)【知識儲備】（4）將CSS樣式表放置在HTML文件外部：導(dǎo)入樣式表。 要在HTML文件中導(dǎo)入樣式表，需要使用標(biāo)簽對進(jìn)行聲明，并在該標(biāo)簽對中加入import url（外部樣式表文件地址）;語句，具體格式如下： 其中，import語句后面的“;”是不可省略的。 外部樣式表文件的文件擴展名必須為“.css”。 外部樣式表地址可以是絕對地址，也可以是相對地址。 import url(外部樣式表文件地址); 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)【知識儲備】2. 選擇器的類型 選擇器用來對HTML文件的不同標(biāo)簽進(jìn)行

14、控制，從而使CSS可以對不同的網(wǎng)頁元素進(jìn)行修飾。CSS的語法結(jié)構(gòu)由3部分組成：選擇器名、屬性和屬性值。CSS選擇器類型，分別是標(biāo)簽選擇器、id選擇器和類選擇器，偽類選擇器和通用選擇器。1)標(biāo)簽選擇器類型 用法是“div ”，表示為使同一標(biāo)簽的元素?fù)碛邢嗤瑯邮健?biāo)簽選擇器特點是一個HTML文件由很多不同的標(biāo)簽組成，利用標(biāo)簽選擇器可以統(tǒng)一設(shè)置使用某類標(biāo)簽定義的元素的外觀。例如根據(jù)效果要求可以定義標(biāo)簽選擇器為： h1 /*設(shè)置為h1一級標(biāo)題*/text-align:center; /*設(shè)置文字內(nèi)容居中*/font-size:42px; /*設(shè)置文字為字號42像素*/color:#FF6600; /*

15、設(shè)置文字的顯示顏色*/ 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)【知識儲備】2)類選擇器類型 用法是 “.Class ”表示為使不用的網(wǎng)頁元素?fù)碛邢嗤臉邮?。類選擇器特點是使用類（class）選擇器可以為相同或不同的標(biāo)簽分類設(shè)置不同的樣式。使用該選擇器時，需要在HTML中為設(shè)置同一樣式的標(biāo)簽定義相同的類名，即設(shè)置標(biāo)簽的類（class）屬性，然后在CSS中定義類選擇器。定義類選擇器時，需要在類名稱前面加一個點“.”，語法結(jié)構(gòu)是“.類名”樣式屬性:取值;樣式屬性:取值;。例如根據(jù)效果要求可以定義類（class）選擇器為：.cont /*設(shè)置為cont類名*/ Color:red; /*設(shè)置文字的顯示顏

16、色*/ Font-size:18px /*設(shè)置文字為字號18像素*/ 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)【知識儲備】3）ID選擇器類型 用法是“#id ”表示為精確控制某個元素的具體樣式。Id選擇器特點是用來對單個元素設(shè)置單獨的樣式，在同一HTML文件中，id名不能重復(fù)。id選擇器的使用方法與類選擇器相似，先在HTML中為希望單獨設(shè)置樣式的標(biāo)簽定義id名（使用標(biāo)簽的id屬性），然后在CSS中定義id選擇器。定義id選擇器時，需要在id名稱前面加一個“#”號，語法結(jié)構(gòu)是“#id名”樣式屬性:取值;樣式屬性:取值; 例如根據(jù)效果要求可以定義id選擇器為：#main /*設(shè)置為main類名*/ w

17、idth:1408px; /*設(shè)置寬度為1408像素*/ height:536px; /*設(shè)置高度為536像素*/ 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)【知識儲備】4）偽類選擇器 用法是“:link,:visited,:hover,:active,:”，分別表示是“：link向未被訪問的鏈接添加樣式”，“:visited向已被訪問的鏈接添加樣式”，“:hover當(dāng)鼠標(biāo)懸浮在元素上方時，向元素添加樣式”，“:active向被激活的元素添加樣式”。 偽類選擇器特點是偽類選擇器不屬于選擇器，它是讓元素呈現(xiàn)動態(tài)效果的特殊屬性。之所以稱為“偽”，是因為它指定的對象在文檔中并不存在，它指定的是元素的某種狀

18、態(tài)。 例如根據(jù)效果要求定義偽類選擇器為：.demo a:linkcolor:gray; /*鏈接沒有被訪問前景色為灰色*/.demo a:visitedcolor:yellow; /*鏈接被訪問過后前景色為黃色*/.demo a:hovercolor:green; /*鼠標(biāo)懸浮在鏈接上時前景色為綠色*/.demo a:activecolor:blue; /*鼠標(biāo)點中激活鏈接那一下前景色為藍(lán)色*/ 任務(wù) 2 修飾鮮花網(wǎng)頁CSS樣式基礎(chǔ)【知識儲備】5）通用選擇器 用法是“*”表示定義所有網(wǎng)頁元素的顯示格式，匹配Html中所有標(biāo)簽元素。通用選擇器特點是一種特殊類型的選擇器，因為涉及范圍較廣，一般常用于清除頁面中元素的邊距。 例如根據(jù)效果要求定義通用選擇器為：3. 選擇器的優(yōu)先級 選擇器的優(yōu)先級是指當(dāng)有多個選擇器作用于同一HTML文檔的同一元素時，即多個選擇器的作用范圍發(fā)生了重疊時，CSS的處理方式。CSS規(guī)定選擇器的優(yōu)先級從高到低為：行內(nèi)樣式 id選擇器 類選擇器 標(biāo)簽選擇器。若在同一HTML文檔中引入了不同類型的CSS樣式文件，則各CSS樣式文件的選擇器優(yōu)先級別為： 行內(nèi)樣式表 內(nèi)嵌樣式表 鏈接樣式表 導(dǎo)入樣式表*margin: