《網(wǎng)頁設(shè)計與制作(HTML+CSS)(第2版)》全冊教案教學(xué)設(shè)計

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效PAGE12PAGE128《網(wǎng)頁設(shè)計與制作（HTML+CSS）（第2版）》全書教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：202年月課題名稱第1章HTML和CSS網(wǎng)頁設(shè)計概述計劃課時4課時教學(xué)引入在學(xué)習(xí)HTML和CSS之前，我們首先需要了解一些與網(wǎng)頁制作相關(guān)的知識，為學(xué)習(xí)后面章節(jié)的內(nèi)容夯實基礎(chǔ)。本章將從網(wǎng)頁概述、網(wǎng)頁制作技術(shù)、網(wǎng)頁展示平臺以及網(wǎng)頁代碼編輯工具四個方面詳細講解網(wǎng)頁制作的相關(guān)知識。教學(xué)目標使學(xué)生了解網(wǎng)頁，能夠舉例說明網(wǎng)頁的構(gòu)成和相關(guān)名詞的含義。使學(xué)生熟悉網(wǎng)頁制作的入門技術(shù)，能夠歸納總結(jié)這些技術(shù)的特點。使學(xué)生了解網(wǎng)頁的展示平臺——瀏覽器，能夠說出各主流瀏覽器的特點。使學(xué)生掌握Dreamweaver工具的使用，能夠運用Dreamweaver工具搭建一個簡單的網(wǎng)頁。教學(xué)重點創(chuàng)建第一個網(wǎng)頁教學(xué)難點Web標準教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進行教學(xué)教學(xué)過程第一課時（網(wǎng)頁的構(gòu)成、網(wǎng)頁相關(guān)名詞、Web標準、HTML簡介、CSS簡介）一、通過直接導(dǎo)入的方式導(dǎo)入新課說到網(wǎng)頁，其實大家并不陌生，我們上網(wǎng)時瀏覽新聞、查詢信息、看視頻等都是在瀏覽網(wǎng)頁。網(wǎng)頁可以看作承載各種網(wǎng)站應(yīng)用和信息的容器，所有可視化的內(nèi)容都會通過網(wǎng)頁展示給用戶。然而網(wǎng)頁是由什么構(gòu)成的？我們經(jīng)常提及的Web、網(wǎng)址又是什么？網(wǎng)頁有哪些標準？本節(jié)將從網(wǎng)頁的構(gòu)成、網(wǎng)頁相關(guān)名詞、Web標準三個方面詳細講解網(wǎng)頁的相關(guān)知識。二、新課講解知識點1-網(wǎng)頁的構(gòu)成教師展示PPT，講解網(wǎng)頁的構(gòu)成。分析淘寶網(wǎng)首頁中包含的元素文字圖像超鏈接音頻視頻動畫查看網(wǎng)頁的源代碼并分析知識點2-網(wǎng)頁相關(guān)名詞教師展示PPT，講解網(wǎng)頁相關(guān)名詞。InternetWWWURLDNSHTTP和HTTPSWebW3C組織知識點3-Web標準教師展示PPT，講解Web標準。結(jié)構(gòu)HTMLXMLXHTML表現(xiàn)行為ECMAScriptBOMDOM知識點4-HTML簡介教師展示PPT，講解HTML簡介。HTML概念：HTML（HyperTextMarkupLanguage，超文本標簽語言）是通過標簽描述網(wǎng)頁中的文本、圖像、聲音等內(nèi)容。HTML發(fā)展史：1989年HTML首次應(yīng)用到網(wǎng)頁設(shè)計。1993年HTML首次以因特網(wǎng)草案的形式發(fā)布（第一版）。1995年第2.0版。1997年第3.2版。1997年第4.0版。1999年第4.01版。2008年發(fā)布了HTML5的工作草案。2014年10月底，W3C宣布HTML5正式定稿。知識點5-CSS簡介教師展示PPT，講解CSS簡介。CSS概念：CSS也被稱為CSS樣式或?qū)盈B樣式表，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片外觀（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS發(fā)展史：1996年12月W3C發(fā)布了第一個有關(guān)樣式的標準CSS1。1998年5月發(fā)布了CSS2。2001年5月23日W3C完成了CSS3的工作草案。三、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。四、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第二課時（網(wǎng)頁展示平臺）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。下列選項中，屬于網(wǎng)頁構(gòu)成要素的有（）。A、文字B、超鏈接C、音頻D、代碼答案：ABC說明：網(wǎng)頁主要由文字、圖像和超鏈接（超鏈接為單擊可以跳轉(zhuǎn)的其他頁面的元素）等元素構(gòu)成。當(dāng)然除了這些元素，網(wǎng)頁中還可以包含音頻、視頻以及動畫等。二、通過直接導(dǎo)入的方式導(dǎo)入新課瀏覽器是網(wǎng)頁展示的平臺，只有經(jīng)過瀏覽器渲染，網(wǎng)頁才能將美麗的效果呈現(xiàn)給用戶。瀏覽器的種類有很多，例如IE瀏覽器、火狐瀏覽器、谷歌瀏覽器、Edge瀏覽器、Safari瀏覽器和Opera瀏覽器等。三、新課講解知識點-網(wǎng)頁展示平臺教師展示PPT，講解網(wǎng)頁展示平臺。IE瀏覽器火狐瀏覽器谷歌瀏覽器四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第三、四課時（Dreamweaver操作界面、Dreamweaver初始化設(shè)置、創(chuàng)建第一個網(wǎng)頁）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。請列舉常見的網(wǎng)頁展示平臺？答案：火狐瀏覽器、谷歌瀏覽器、IE瀏覽器。說明：無二、通過直接導(dǎo)入的方式導(dǎo)入新課為了方便網(wǎng)頁制作，我們通常會選擇一些較便捷的網(wǎng)頁代碼編輯工具。例如，Hbuilder、sSublime、VSCode、Dreamweaver等。其中前面列舉的3種軟件，更偏向于Web開發(fā)，而Dreamweaver工具則依靠其可視化的網(wǎng)頁制作模式，極大地降低了網(wǎng)站建設(shè)的難度，使得不同技術(shù)水平的設(shè)計師，都能搭建出美觀的頁面。本節(jié)將簡單介紹Dreamweaver工具的使用，并利用該工具創(chuàng)建本書第一個網(wǎng)頁。三、新課講解知識點1-Dreamweaver操作界面教師展示PPT，講解Dreamweaver操作界面。菜單欄文件（F）菜單編輯（E）菜單查看（V）菜單插入（I）菜單修改（M）菜單格式（O）菜單命令（C）菜單站點（S）菜單窗口（W）菜單幫助（H）菜單插入欄文檔工具欄“顯示代碼視圖”“顯示代碼和設(shè)計視圖”“顯示設(shè)計視圖”“在瀏覽器中預(yù)覽/調(diào)試”“刷新”文檔編輯界面屬性面板知識點2-Dreamweaver初始化設(shè)置教師展示PPT，講解Dreamweaver初始化設(shè)置。設(shè)置工作區(qū)布局添加必備面板設(shè)置新建文檔設(shè)置代碼提示瀏覽器設(shè)置知識點3-創(chuàng)建第一個網(wǎng)頁教師展示PPT，講解創(chuàng)建第一個網(wǎng)頁。編寫HTML代碼編寫CSS代碼四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。教學(xué)后記《網(wǎng)頁設(shè)計與制作（HTML+CSS）（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：202年月課題名稱第2章HTML入門計劃課時6課時教學(xué)引入HTML作為一門標簽語言，主要用來描述網(wǎng)頁中的文字和圖像等元素。使用HTML標簽描述網(wǎng)頁中的內(nèi)容是每一個網(wǎng)頁制作人員的入門要求。然而什么是HTML標簽？又該如何使用HTML標簽描述網(wǎng)頁中的文字和圖像呢？本章將對HTML的入門知識進行詳細講解。教學(xué)目標使學(xué)生掌握HTML文檔基本格式，能夠書寫符合格式規(guī)范的HTML結(jié)構(gòu)代碼。使學(xué)生掌握文本控制標簽的用法，能夠合理地使用文本控制標簽定義網(wǎng)頁元素。使學(xué)生掌握圖像標簽，學(xué)會運用圖像標簽制作圖文混排頁面。教學(xué)重點標簽的屬性標題標簽段落標簽文本樣式標簽文本格式化標簽圖像標簽<img/>絕對路徑和相對路徑【階段案例】制作圖文混排頁面教學(xué)難點絕對路徑和相對路徑教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進行教學(xué)教學(xué)過程第一課時（HTML文檔格式、標簽分類、標簽的屬性、標簽關(guān)系、頭部結(jié)構(gòu)標簽）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。在Dreamweaver中，能夠選擇文檔視圖方式的菜單是（）。A、插入（I）B、查看（V）C、站點（S）D、文件（F）答案：A說明：“查看（V）”菜單：用于選擇文檔的視圖方式。例如，設(shè)計視圖、代碼視圖等。此外“查看（V）”菜單還可以用于顯示或隱藏不同類型的頁面元素和工具。二、通過直接導(dǎo)入的方式導(dǎo)入新課HTML作為一門標簽語言，主要用來描述網(wǎng)頁中的文字和圖像等信息，其最新版本HTML5已經(jīng)逐漸成為移動互聯(lián)網(wǎng)的主流。但什么是HTML，又該如何使用HTML標簽控制網(wǎng)頁中的文字和圖像呢？本章對HTML的基礎(chǔ)知識進行詳細講解。三、新課講解知識點1-HTML文檔格式教師展示PPT，講解HTML文檔格式。<!DOCTYPE>：<!DOCTYPE>位于文檔的最前面，也被稱為文檔類型聲明，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML標準規(guī)范。<html>：<html>位于<!DOCTYPE>之后，也被稱為根標簽。根標簽標示了HTML文檔的開始和結(jié)束，其中<html>標示HTML文檔的開始，</html>標示HTML文檔的結(jié)束，在它們之間是網(wǎng)頁的頭部內(nèi)容和主體內(nèi)容<head>：<head>用于定義HTML文檔的頭部內(nèi)容，也被稱為頭部標簽，該標簽緊跟在<html>之后。頭部標簽主要用來容納其他位于文檔頭部的標簽，用來描述文檔的標題、作者，以及該文檔與其他文檔的關(guān)系。<body>：<body>用于定義HTML文檔所要顯示的內(nèi)容，也被稱為主體標簽。在網(wǎng)頁中，所有文本、圖像、音頻和視頻等內(nèi)容代碼都必須放在<body>內(nèi)，才能最終呈現(xiàn)給用戶。知識點2-標簽分類教師展示PPT，講解標簽分類。雙標簽雙標簽的概念：雙標簽也被稱為“體標簽”，是指由開始和結(jié)束兩個標簽符號組成的標簽。雙標簽的基本語法格式：<標簽名>內(nèi)容</標簽名>單標簽單標簽的概念：單標簽也被稱為“空標簽”，是指用一個標簽符號即可完整的描述某個功能的標簽。單標簽的基本語法格式：<標簽名/>知識點3-標簽的屬性教師展示PPT，講解標簽的屬性。<標簽名屬性1="屬性值1"屬性2="屬性值2"…>內(nèi)容</標簽名>知識點4-標簽關(guān)系教師展示PPT，講解標簽關(guān)系。嵌套關(guān)系嵌套關(guān)系也稱為包含關(guān)系，可以簡單理解為一個雙標簽里面有包含了其他的標簽。并列關(guān)系并列關(guān)系也稱為兄弟關(guān)系，就是兩個標簽處于同一級別，并且沒有包含關(guān)系。知識點5-頭部結(jié)構(gòu)標簽教師展示PPT，講解頭部結(jié)構(gòu)標簽。<title>標簽<title>標簽的概念：用于設(shè)置HTML頁面的標題，也就是給網(wǎng)頁取一個名。<title>標簽的示例代碼：<title>輕松學(xué)習(xí)HTML5</title><meta/>標簽<metaname="名稱"content="值"/><metahttp-equiv="名稱"content="值"/>四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第二課時（標題標簽、段落標簽、水平線標簽、換行標簽、文本樣式標簽、文本格式化標簽、特殊字符）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。下列選項中，屬于雙標簽的有（）。A、<html>B、<body>C、<hr/>D、<meta/>答案：AB說明：無。二、通過直接導(dǎo)入的方式導(dǎo)入新課在一個網(wǎng)頁中文字往往占有較大的篇幅，為了讓文字能夠在網(wǎng)頁中排版整齊、結(jié)構(gòu)清晰，HTML提供了一系列的文本控制標簽。例如，標題標簽<h1>~<h6>、段落標簽<p>、字體標簽<font>等，本節(jié)將對這些HTML文本控制標簽進行詳細介紹。三、新課講解知識點1-標題標簽教師展示PPT，講解標題標簽。標題標簽的概念：HTML提供了6個等級的標題，即h1、h2、h3、h4、h5和h6，從h1到h6重要性遞減。標題標簽的基本語法格式：<hnalign="對齊方式">標題文本</hn>align屬性的取值：left：設(shè)置標題文字左對齊（默認值）。center：設(shè)置標題文字居中對齊。right：設(shè)置標題文字右對齊。知識點2-段落標簽教師展示PPT，講解段落標簽。段落標簽的概念：在網(wǎng)頁中使用<p>標簽來定義段落。默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。段落標簽的基本語法格式：<palign="對齊方式">段落文本</p>知識點3-水平線標簽教師展示PPT，講解水平線標簽。水平線標簽的概念：在網(wǎng)頁中，水平線可以將段落與段落之間隔開，使得文檔層次分明。水平線可以通過<hr/>標簽來定義。水平線標簽的基本語法格式：<hr屬性="屬性值"/>水平線標簽的常用屬性：align：設(shè)置水平線的對齊方式。siza：設(shè)置水平線的粗細。color：設(shè)置水平線的顏色。width：設(shè)置水平線的寬度。知識點4-換行標簽教師展示PPT，講解換行標簽。使用換行標簽<br/>對文本內(nèi)容強制換行顯示。知識點5-文本樣式標簽教師展示PPT，講解文本樣式標簽。文本樣式標簽的概念：文本樣式標簽<font>，用來控制網(wǎng)頁中文本的字體、字號和顏色。文本樣式標簽的基本語法格式：<font屬性="屬性值">文本內(nèi)容</font><font>標簽常用的屬性：face：設(shè)置文字的字體，例如微軟雅黑、黑體、宋體等。size：設(shè)置文字的大小，可以取1到7之間的整數(shù)值。color：設(shè)置文字的顏色。知識點6-文本格式化標簽教師展示PPT，講解文本格式化標簽。文本格式化標簽的概念：在網(wǎng)頁制作中，文本格式化標簽可以使文字以特殊的方式突出顯示，例如網(wǎng)頁中常見的粗體、斜體或下畫線效果。常用的文本格式化標簽：<b>和<strong>：文字以粗體方式顯示（HTML推薦使用strong）。<i>和<em>：文字以斜體方式顯示（HTML推薦使用em）。<s>和<del>：文字以加刪除線方式顯示（HTML推薦使用del）。<u>和<ins>：文字以加下畫線方式顯示（HTML不贊成使用u）。知識點7-特殊字符教師展示PPT，講解特殊字符。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第三課時（常用圖像格式、圖像標簽<img/>、絕對路徑和相對路徑）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。下列選項中，能夠設(shè)置文字大小的屬性是（）A、faceB、sizeC、colorD、width答案：B說明：無二、通過直接導(dǎo)入的方式導(dǎo)入新課瀏覽網(wǎng)頁時我們常常會被網(wǎng)頁中的圖像所吸引，巧妙的在網(wǎng)頁中使用圖像可以讓網(wǎng)頁更為豐富多彩。本節(jié)將通過對常用圖像格式、圖像標簽、相對路徑和絕對路徑幾個知識點，詳細講解HTML中圖像的應(yīng)用。三、新課講解知識點1-常用圖像格式教師展示PPT，講解常用圖像格式。GIF格式PNG格式JPEG格式知識點2-圖像標簽<img/>教師展示PPT，講解圖像標簽<img/>圖像標簽<img/>基本語法格式：<imgsrc="圖像URL"/><img/>標簽的其他屬性圖像的替換文本屬性alt圖像的寬度、高度屬性width、height圖像的邊框?qū)傩詁order圖像的邊距屬性vspace和hspace圖像的對齊屬性align知識點3-絕對路徑和相對路徑教師展示PPT，講解絕對路徑和相對路徑。絕對路徑絕對路徑的概念：絕對路徑就是網(wǎng)頁上的文檔或目錄在盤符（即C盤、D盤等）中的真正路徑，例如“D:\案例源碼\chapter02\images\banner1.jpg”就是一個盤符中的絕對路徑。相對路徑相對路徑的概念：相對路徑就是相對于當(dāng)前文檔的路徑，相對路徑?jīng)]有盤符，通常是以HTML網(wǎng)頁文檔為起點，通過層級關(guān)系描述目標圖像的位置。相對路徑的設(shè)置.四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第四課時（【階段案例】制作圖文混排頁面）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。相對路徑是網(wǎng)頁上的文檔在盤符中的真正路徑（）A、對B、錯答案：B說明：相對路徑就是相對于當(dāng)前文檔的路徑，相對路徑?jīng)]有盤符，通常是以HTML網(wǎng)頁文檔為起點，通過層級關(guān)系描述目標圖像的位置。二、通過直接導(dǎo)入的方式導(dǎo)入新課本章前幾個小節(jié)重點講解了什么是HTML、HTML文本控制標簽以及HTML圖像標簽。為了使初學(xué)者能夠更好地認識HTML，本小節(jié)將通過案例的形式分步驟實現(xiàn)網(wǎng)頁中常見的圖文混排效果。三、新課講解案例實現(xiàn)1-分析效果圖教師展示PPT，分析效果圖。案例實現(xiàn)2-制作頁面結(jié)構(gòu)教師編寫代碼，制作頁面結(jié)構(gòu)。案例實現(xiàn)3-控制圖像教師編寫代碼，控制圖像。案例實現(xiàn)4-控制文本教師編寫代碼，控制文本。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。復(fù)習(xí)本節(jié)課的內(nèi)容。第五、六課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習(xí)，通過上機練習(xí)可以考察同學(xué)對知識點的掌握情況，對代碼的熟練程度。上機一：（考查知識點為HTML標簽）形式：單獨完成題目：制作電影宣傳效果。要求如下：在Dreamweaver中添加<h2>標題內(nèi)容、水平線、圖像、段落文本，整體作為網(wǎng)頁的上半部分。在Dreamweaver中添加<h2>標題內(nèi)容、水平線、圖像、段落文本，整體作為網(wǎng)頁的下半部分。分別給兩部分文本和圖像添加樣式。在firefox瀏覽器中預(yù)覽。上機二：（考查知識點為文本格式化標簽）形式：單獨完成題目：城東早春。要求如下：在Dreamweaver默認文檔中寫好6個段落。在每個段落中分別使用不同的文本格式化標簽：第一個段落即題目設(shè)置為粗體；第二個段落即作者設(shè)置為斜體；第四個段落添加下劃線效果；第六個段落添加刪除線效果。其他段落使用普通的文本格式輸出。教學(xué)后記《網(wǎng)頁設(shè)計與制作（HTML+CSS）（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：202年月課題名稱第3章CSS入門計劃課時8課時教學(xué)引入隨著網(wǎng)頁制作技術(shù)的不斷發(fā)展，單調(diào)的HTML屬性樣式已經(jīng)無法滿足網(wǎng)頁設(shè)計的需求。網(wǎng)頁設(shè)計人員需要更多的字體選擇、更方便的樣式效果、更絢麗的圖形動畫。CSS的出現(xiàn)在不改變原有HTML結(jié)構(gòu)的情況下，增加了豐富的網(wǎng)頁樣式效果，極大地滿足了開發(fā)者的需求。本章將詳細講解CSS入門的知識。教學(xué)目標使學(xué)生掌握CSS選擇器的用法，能夠運用CSS基礎(chǔ)選擇器和復(fù)合選擇器定義標簽樣式。使學(xué)生熟悉CSS文本樣式屬性的類型，能夠運用相應(yīng)的屬性定義文本樣式。使學(xué)生掌握CSS優(yōu)先級權(quán)重的規(guī)律，能夠區(qū)分CSS選擇器權(quán)重的大小。使學(xué)生了解CSS層疊性和繼承性，能夠運用CSS層疊性和繼承性優(yōu)化代碼結(jié)構(gòu)。教學(xué)重點CSS樣式引入標簽選擇器類選擇器id選擇器標簽指定式選擇器后代選擇器并集選擇器【階段案例】制作新聞頁面教學(xué)難點CSS層疊性和繼承性CSS優(yōu)先級教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進行教學(xué)教學(xué)過程第一、二課時（CSS樣式規(guī)則、CSS樣式引入、標簽選擇器、類選擇器、id選擇器、通配符選擇器）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。若想讓圖像和文字之間有一定距離的排列效果，就需要使用水平邊距屬性（）。答案：hspace說明：無二、通過直接導(dǎo)入的方式導(dǎo)入新課在使用CSS之前，我們首先要掌握CSS的基礎(chǔ)知識，為熟練使用CSS夯實基礎(chǔ)。在學(xué)習(xí)CSS的過程中，CSS樣式規(guī)則、CSS樣式引入、CSS基礎(chǔ)選擇器是CSS最核心的內(nèi)容，本節(jié)將詳細講解這些核心基礎(chǔ)內(nèi)容。三、新課講解知識點1-CSS樣式規(guī)則教師展示PPT，講解CSS樣式規(guī)則。CSS的基本樣式規(guī)則：選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;······}書寫CSS樣式代碼結(jié)構(gòu)的特點：CSS樣式中的選擇器嚴格區(qū)分大小寫，而聲明不區(qū)分大小寫，按照書寫習(xí)慣一般將選擇器、聲明都采用小寫的方式。多個屬性之間必須用英文狀態(tài)下的分號隔開，最后一個屬性后的分號可以省略，但是為了便于增加新樣式最好保留。如果屬性的值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的引號（一般使用雙引號）。在編寫CSS代碼時，為了提高代碼的可讀性，可使用“/*注釋語句*/”來進行注釋。在CSS代碼中空格是不被解析的，中括號以及分號前后的空格可有可無。知識點2-CSS樣式引入教師展示PPT，講解CSS樣式引入。行內(nèi)式行內(nèi)式的基本語法格式：<標簽名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內(nèi)容</標簽名>內(nèi)嵌式內(nèi)嵌式的基本語法格式：<head><styletype="text/css"> 選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>外鏈式外鏈式的基本語法格式：<head><linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/></head><link/>標簽屬性：href、type、rel導(dǎo)入式導(dǎo)入式的基本語法格式：<styletype="text/css">@importurl(css文件路徑);或@import"css文件路徑"; /*在此還可以存放其他CSS樣式*/</style>知識點3-標簽選擇器教師展示PPT，講解標簽選擇器。標簽選擇器的基本語法格式：標簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}知識點4-類選擇器教師展示PPT，講解類選擇器。類選擇器的基本語法格式：.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}類選擇器的注意事項：第一個字符不能使用數(shù)字，并且嚴格區(qū)分大小寫。知識點5-id選擇器教師展示PPT，講解id選擇器。id選擇器的基本語法格式：#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}id選擇器的注意事項：同一個id也可以應(yīng)用于多個標簽，瀏覽器并不報錯，但是這種做法是不被允許的。知識點6-通配符選擇器教師展示PPT，講解通配符選擇器。通配符選擇器的基本語法格式：*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第三課時（CSS字體樣式屬性、CSS文本外觀屬性）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。下列選項中，屬于CSS基礎(chǔ)選擇器的是（）。A、標簽選擇器B、類選擇器C、id選擇器D、通配符選擇器答案：ABCD說明：無。二、通過直接導(dǎo)入的方式導(dǎo)入新課學(xué)習(xí)HTML時，我們可以使用文本樣式標簽和屬性控制文本內(nèi)容的顯示樣式，但是這種方式繁瑣且不利于代碼的維護。為此，CSS提供了文本樣式屬性。使用CSS文本樣式屬性可以輕松方便的控制內(nèi)容的顯示樣式。CSS文本樣式屬性包括CSS字體樣式屬性和CSS文本外觀屬性，本節(jié)將對這兩種屬性做詳細講解。三、新課講解知識點1-CSS字體樣式屬性教師展示PPT，講解CSS字體樣式屬性。font-size:字號作用：用于設(shè)置字號。常用的屬性值單位em、px、%font-family:字體作用：用于設(shè)置字體。使用font-family設(shè)置字體時的注意事項。font-weight:字體粗細作用：用于定義字體的粗細。屬性值：normal、bold、bolder、lighter、100~900（100的整數(shù)倍）。font-variant:變體作用：用于設(shè)置英文字符的變體，用于定義小型大寫字體?？捎脤傩灾担簄ormal、small-caps。font-style:字體風(fēng)格作用：用于定義字體風(fēng)格。可用屬性值：normal、italic、oblique。font:綜合設(shè)置字體樣式作用：用于對字體樣式進行綜合設(shè)置。基本語法格式：選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}@font-face規(guī)則作用：用于定義服務(wù)器字體?；菊Z法格式：@font-face{ font-family:字體名稱; src:字體路徑; }使用服務(wù)器字體的步驟。服務(wù)器字體定義完成后的注意事項。知識點2-CSS文本外觀屬性教師展示PPT，講解文本外觀屬性。color:文本顏色作用：用于設(shè)置文本顏色。屬性取值：顏色英文單詞、十六進制顏色值、RGB顏色值。取值的注意事項。letter-spacing:字間距作用：用于設(shè)置字間距。屬性取值：不同單位的數(shù)值，可以為負數(shù)，默認值為normal。word-spacing:單詞間作用：用于設(shè)置單詞之間的間距。屬性取值：不同單位的數(shù)值，可以為負數(shù)，默認值為normal。line-height:行間距作用：用于設(shè)置行與行之間的間距。屬性值單位：像素（px）、倍率（em）和百分比（%）。text-transform:文本轉(zhuǎn)換作用：用于設(shè)置文本大小寫的轉(zhuǎn)換。屬性取值：none、capitalize、uppercase、lowercase。text-decoration:文本裝飾作用：用于設(shè)置文本下畫線。屬性取值：none、underline、overline、line-through。text-align:水平對齊方式作用：用于設(shè)置文本水平對齊方式。屬性取值：left、right、center。使用text-align屬性的注意事項。text-indent:首行縮進作用：用于設(shè)置段落文本首行字符縮進屬性取值：不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,建議使用em作為設(shè)置單位。使用text-indent屬性的注意事項。white-space:空白符處理作用：用于設(shè)置空格的處理方式。屬性取值：normal、pre、nowrap。text-shadow:陰影效果作用：用于設(shè)置陰影效果?；菊Z法格式：選擇器{text-shadow:h-shadowv-shadowblurcolor;}四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第四課時（標簽指定式選擇器、后代選擇器、并集選擇器、CSS層疊性和繼承性、CSS優(yōu)先級）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。下列選項中，能夠設(shè)置設(shè)置字體的屬性是（）A、font-familyB、font-weightC、font-styleD、font-weight答案：A說明：無二、通過直接導(dǎo)入的方式導(dǎo)入新課我們想要使用CSS實現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離，解決工作中出現(xiàn)的CSS調(diào)試問題，還需要學(xué)習(xí)CSS高級特性。CSS高級特性包括CSS復(fù)合選擇器、CSS層疊性與繼承性、CSS優(yōu)先級，本節(jié)將對這些高級特性進行詳細講解。三、新課講解知識點1-標簽指定式選擇器教師展示PPT，講解指定式選擇器。標簽指定式選擇器又稱交集選擇器，由兩個選擇器構(gòu)成，其中第一個為標簽選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格。知識點2-后代選擇器教師展示PPT，講解后代選擇器。后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面，內(nèi)層標簽寫在后面，中間用空格分隔。當(dāng)標簽發(fā)生嵌套時，內(nèi)層標簽就成為外層標簽的“后代”。知識點3-并集選擇器教師展示PPT，講解并集選擇器。并集選擇器的各個選擇器通過逗號連接而成的，如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。知識點4-CSS層疊性和繼承性教師展示PPT，講解CSS層疊性和繼承性。層疊性：是指多種CSS樣式的疊加。繼承性：是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式。知識點5-CSS優(yōu)先級教師展示PPT，講解CSS優(yōu)先級。CSS優(yōu)先級定義：指的就是CSS樣式規(guī)則的權(quán)重。在考慮權(quán)重時，需要注意一些特殊的情況：繼承樣式的權(quán)重為0。行內(nèi)樣式優(yōu)先。權(quán)重相同時，CSS的優(yōu)先級遵循就近原則。CSS定義“!important”命令，會被賦予最大的優(yōu)先級。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第五、六課時（【階段案例】—制作新聞頁面）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。請簡述什么是CSS的繼承性，并舉例說明。答案：繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式。例如，定義主體標簽<body>的文本顏色為黑色，那么頁面中所有的文本都將顯示為黑色，這是因為頁面其他的標簽都嵌套在<body>標簽中，是<body>標簽的子標簽。這些子標簽繼承了父標簽<body>的屬性。說明：無。二、通過直接導(dǎo)入的方式導(dǎo)入新課本章前幾個小節(jié)重點講解了CSS樣式規(guī)則、選擇器、CSS文本相關(guān)樣式及高級特性。為了使初學(xué)者更好地認識CSS，本小節(jié)將通過案例的形式分步驟制作網(wǎng)頁中常見的新聞頁面。三、新課講解案例實現(xiàn)1-分析效果圖教師展示PPT，分析效果圖。結(jié)構(gòu)分析樣式分析案例實現(xiàn)2-制作頁面結(jié)構(gòu)教師編寫代碼，制作頁面結(jié)構(gòu)。案例實現(xiàn)3-定義CSS樣式教師編寫代碼，定義CSS樣式。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。復(fù)習(xí)本節(jié)課的內(nèi)容。第七、八課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習(xí)，通過上機練習(xí)可以考察同學(xué)對知識點的掌握情況，對代碼的熟練程度。上機一：（考查知識點為CSS字體樣式屬性）形式：單獨完成題目：制作新浪博客效果。要求如下：使用行內(nèi)式引入CSS樣式。設(shè)置所有文本為微軟雅黑、14像素、黑色字體。設(shè)置“新浪”、“新浪網(wǎng)”為紅色字體，“博客首頁”為藍色字體，網(wǎng)址及日期為綠色字體。設(shè)置標題為16像素、左對齊、下劃線的效果。設(shè)置文本“-百度快照-評價”為灰色、下劃線的效果。上機二：（考查知識點為CSS文本外觀屬性）形式：單獨完成題目：制作新浪博客效果。要求如下：綜合使用標簽選擇器、id選擇器及類選擇器控制元素。設(shè)置所有文本為宋體、14像素，行高為18像素。設(shè)置標題“你若安好，便是晴天”為18像素、紫色、加粗、居中的效果。設(shè)置第一段文本為紅色、居中對齊。設(shè)置第二段文本為藍色、首行縮進2個字符、字間距為16像素。設(shè)置第三段文本為綠色、加粗、斜體。設(shè)置第四段文本為紫色、刪除線效果。教學(xué)后記《網(wǎng)頁設(shè)計與制作（HTML+CSS）（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：202年月課題名稱第4章盒子模型計劃課時8課時教學(xué)引入盒子模型是網(wǎng)頁布局的基礎(chǔ)，讀者只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個元素。本章將對盒子模型的概念、盒子相關(guān)屬性進行詳細講解。教學(xué)目標使學(xué)生了解盒子模型的概念，能夠舉例描述盒子模型結(jié)構(gòu)。使學(xué)生掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果。使學(xué)生掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。使學(xué)生熟悉漸變屬性的原理，能夠為盒子設(shè)置漸變背景。使學(xué)生掌握元素類型的分類，能夠進行元素類型的轉(zhuǎn)換。教學(xué)重點設(shè)置邊框綜合樣式內(nèi)邊距屬性外邊距屬性綜合設(shè)置元素的背景盒子的寬與高圓角陰影元素類型的轉(zhuǎn)換【階段案例】制作音樂排行榜教學(xué)難點圖片邊框線性漸變徑向漸變重復(fù)漸變教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進行教學(xué)教學(xué)過程第一課時（認識盒子模型、設(shè)置邊框樣式、設(shè)置邊框?qū)挾?、設(shè)置邊框顏色、設(shè)置邊框綜合樣式、內(nèi)邊距屬性、外邊距屬性）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。（）標簽用于定義水平線。答案：<hr/>說明：無二、通過直接導(dǎo)入的方式導(dǎo)入新課我們要想自由地控制頁面中每個盒子的樣式，就需要掌握盒子模型的相關(guān)屬性。盒子模型的相關(guān)屬性就是我們前面提到邊框、邊距、背景、寬度和高度等，本節(jié)將對這些屬性進行詳細地講解。在講解之前我們先來了解一下什么是盒子模型。三、新課講解知識點1-認識盒子模型教師展示PPT，講解認識盒子模型。盒子模型的概念：所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。每個方形盒子都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。知識點2-設(shè)置邊框樣式教師展示PPT，講解設(shè)置邊框樣式。設(shè)置邊框樣式的方法：border-style屬性用于設(shè)置邊框樣式。設(shè)置邊框樣式的常用屬性值：none：沒有邊框即忽略所有邊框的寬度（默認值）。solid：邊框為單實線。dashed：邊框為虛線。dotted：邊框為點線。double：邊框為雙實線。知識點3-設(shè)置邊框?qū)挾冉處熣故綪PT，講解設(shè)置邊框?qū)挾?。設(shè)置邊框?qū)挾鹊姆椒ǎ篵order-width屬性用于設(shè)置邊框的寬度，其常用取值單位為像素px。具體設(shè)置方式：border-top-width：上邊框?qū)挾?border-right-width：右邊框?qū)挾?border-bottom-width：下邊框?qū)挾?border-left-width：左邊框?qū)挾?border-width：上邊框?qū)挾萚右邊框?qū)挾认逻吙驅(qū)挾茸筮吙驅(qū)挾萞;知識點4-設(shè)置邊框顏色教師展示PPT，講解設(shè)置邊框顏色。設(shè)置邊框顏色的方法：border-color屬性用于設(shè)置邊框的顏色。border-color屬性取值：預(yù)定義的顏色英文單詞（如red、blue）。十六進制顏色值#RRGGBB（如#FF0000或#F00）。RGB模式rgb(r,g,b)（如rgb(0,255,0)括號里是顏色色值或百分比）。具體設(shè)置方式：border-top-color:上邊框顏色;border-right-color:右邊框顏色;border-bottom-color:下邊框顏色;border-left-color:左邊框顏色;border-color:上邊框顏色[右邊框顏色下邊框顏色左邊框顏色];設(shè)置邊框顏色的注意事項。知識點5-設(shè)置邊框綜合樣式教師展示PPT，講解設(shè)置邊框綜合樣式。具體設(shè)置方式：border-top:上邊框?qū)挾葮邮筋伾?border-right:右邊框?qū)挾葮邮筋伾?border-bottom:下邊框?qū)挾葮邮筋伾?border-left:左邊框?qū)挾葮邮筋伾?border:四邊寬度樣式顏色;知識點6-內(nèi)邊距屬性教師展示PPT，講解內(nèi)邊距屬性。設(shè)置內(nèi)邊距的方法：padding屬性用于設(shè)置內(nèi)邊距。具體設(shè)置方式：padding-top:上內(nèi)邊距;padding-right:右內(nèi)邊距;padding-bottom:下內(nèi)邊距;padding-left:左內(nèi)邊距;padding:上內(nèi)邊距[右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距];使用內(nèi)邊距屬性的注意事項。知識點7-外邊距屬性教師展示PPT，講解外邊距屬性。講解外邊距屬性的方法：margin屬性用于設(shè)置外邊距。具體設(shè)置方式：margin-top:上外邊距;margin-right:右外邊距;margin-bottom:下外邊距;margin-left:左外邊距;margin:上外邊距[右外邊距下外邊距左外邊距];使用外邊距屬性的注意事項。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第二課時（設(shè)置背景顏色、設(shè)置背景圖像、設(shè)置背景圖像平鋪、設(shè)置背景圖像的位置、設(shè)置背景圖像固定、綜合設(shè)置元素的背景、盒子的寬與高）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。下列選項中，可以設(shè)置外邊距的屬性是（）。A、paddingB、marginC、borderD、background答案：B說明：無。二、通過直接導(dǎo)入的方式導(dǎo)入新課網(wǎng)頁能通過背景給人留下深刻印象，例如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片作為背景，來凸顯節(jié)日效果。我們想要設(shè)置背景樣式就需要使用背景屬性。通過背景屬性，我們可以為網(wǎng)頁設(shè)置背景顏色、背景圖像。下面詳細介紹背景屬性的用法。三、新課講解知識點1-設(shè)置背景顏色教師展示PPT，講解設(shè)置背景顏色。設(shè)置背景顏色的方法：網(wǎng)頁元素的背景顏色使用background-color屬性來設(shè)置。background-color的屬性值：使用顏色英文單詞。十六進制#RRGGBB。RGB代碼rgb(r,g,b)。知識點2-設(shè)置背景圖像教師展示PPT，講解設(shè)置背景圖像。設(shè)置背景圖像的方法：通過background-image屬性設(shè)置背景圖像。知識點3-設(shè)置背景圖像平鋪教師展示PPT，講解設(shè)置背景圖像平鋪。設(shè)置背景圖像平鋪的方法：通過background-repeat屬性可以使圖像沿著一個方向平鋪或者不平鋪。background-repeat屬性值：repeat：沿水平和豎直兩個方向平鋪（默認值）。no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）。repeat-x：只沿水平方向平鋪。repeat-y：只沿豎直方向平鋪。知識點4-設(shè)置背景圖像的位置教師展示PPT，講解設(shè)置背景圖像的位置。使用不同單位的數(shù)值，直接設(shè)置圖像左上角在元素中的坐標，例如“background-position:20px20px;”。使用預(yù)定義的關(guān)鍵字，指定背景圖像在元素中的對齊方式。水平方向值：left、center、right。垂直方向值：top、center、bottom。使用百分比，按背景圖像和元素的指定點對齊。0%0%表示圖像左上角與元素的左上角對齊。50%50%表示圖像50%50%中心點與元素50%50%的中心點對齊。20%30%表示圖像20%30%的點與元素20%30%的點對齊。100%100%表示圖像右下角與元素的右下角對齊。知識點5-設(shè)置背景圖像固定教師展示PPT，講解設(shè)置背景圖像固定。設(shè)置背景圖像固定的方法：通過background-attachment屬性可以使圖像隨著頁面滾動條的移動而移動。background-attachment屬性值：scroll：圖像隨頁面一起滾動（默認值）。fixed：圖像固定在屏幕上，不隨頁面滾動。知識點6-綜合設(shè)置元素的背景教師展示PPT，講解綜合設(shè)置元素的背景。綜合設(shè)置元素背景的方法：使用background屬性可以綜合設(shè)置背景樣式。綜合設(shè)置元素背景的基本語法格式：background:背景色url("圖像")平鋪定位固定;知識點7-盒子的寬與高教師展示PPT，講解盒子的寬與高。設(shè)置盒子寬與高的方法：在CSS中使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。盒子寬與高的取值：不同單位的數(shù)值。相對于父元素的百分比。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第三課時（顏色透明度、圓角、圖片邊框、陰影、線性漸變、徑向漸變、重復(fù)漸變、多背景圖像、修剪背景圖像）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。下列選項中，可以使背景圖像不平鋪的屬性是（）A、repeatB、no-repeatC、repeat-xD、repeat-y答案：B說明：repeat：沿水平和豎直兩個方向平鋪（默認值）、no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）、repeat-x：只沿水平方向平鋪、repeat-y：只沿豎直方向平鋪，故選B。二、通過直接導(dǎo)入的方式導(dǎo)入新課為了豐富網(wǎng)頁的樣式功能，去除一些冗余的樣式代碼，CSS3中添加了一些新的盒子模型屬性，如顏色透明、圓角、陰影、漸變等。本節(jié)將詳細介紹這些全新的的CSS樣式屬性。三、新課講解知識點1-顏色透明度教師展示PPT，講解顏色透明度。rgba模式rgba模式的概念：rgba模式是在紅、綠、藍三原色的基礎(chǔ)上添加了不透明度參數(shù)rgba模式的基本語法格式：rgba(r,g,b,alpha);opacity屬性opacity屬性的概念：能夠使任何元素呈現(xiàn)出透明效果，作用范圍要比rgba模式大得多。opacity屬性的基本語法格式：opacity：參數(shù);知識點2-圓角教師展示PPT，講解圓角。設(shè)置圓角的方法：運用CSS3中的border-radius屬性可以將矩形邊框四角圓角化，實現(xiàn)圓角效果。設(shè)置圓角的基本語法格式：border-radius:水平半徑參數(shù)1水平半徑參數(shù)2水平半徑參數(shù)3水平半徑參數(shù)4/垂直半徑參數(shù)1垂直半徑參數(shù)2垂直半徑參數(shù)3垂直半徑參數(shù)4;border-radius屬性遵循值復(fù)制的原則：水平半徑參數(shù)和垂直半徑參數(shù)設(shè)置1個參數(shù)值時，表示四角的圓角半徑均相同。水平半徑參數(shù)和垂直半徑參數(shù)設(shè)置2個參數(shù)值時，第1個參數(shù)值代表左上圓角半徑和右下圓角半徑，第2個參數(shù)值代表右上和左下圓角半徑。水平半徑參數(shù)和垂直半徑參數(shù)設(shè)置3個參數(shù)值時，第1個參數(shù)值代表左上圓角半徑，第2個參數(shù)值代表右上和左下圓角半徑；第3個參數(shù)值代表右下圓角半徑。水平半徑參數(shù)和垂直半徑參數(shù)設(shè)置4個參數(shù)值時，第1個參數(shù)值代表左上圓角半徑，第2個參數(shù)值代表右上圓角半徑，第3個參數(shù)值代表右下圓角半徑，第4個參數(shù)值代表左下圓角半徑。知識點3-圖片邊框教師展示PPT，講解圖片邊框。設(shè)置圖片邊框的方法：運用CSS3中的border-image屬性可以使圖片作為元素的邊框。設(shè)置圖片邊框的基本語法格式：border-image:border-image-source/border-image-slice/border-image-width/border-image-outset/border-image-repeat;border-image的屬性描述知識點4-陰影教師展示PPT，講解陰影。設(shè)置陰影的方法：使用CSS3中的box-shadow屬性可以輕松實現(xiàn)陰影的添加。設(shè)置陰影的基本語法格式：box-shadow:h-shadowv-shadowblurspreadcoloroutset;box-shadow屬性參數(shù)值：知識點5-線性漸變教師展示PPT，講解線性漸變。設(shè)置線性漸變的方法：運用CSS3中的“background-image:linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)線性漸變效果。設(shè)置線性漸變的基本語法格式：background-image:linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);知識點6-徑向漸變教師展示PPT，講解徑向漸變。設(shè)置徑向漸變的方法：運用CSS3中的“background-image:radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)徑向漸變效果。設(shè)置徑向漸變的基本語法格式：background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);知識點7-重復(fù)漸變教師展示PPT，講解重復(fù)漸變。重復(fù)線性漸變設(shè)置重復(fù)線性漸變的方法：通過“background-image:repeating-linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)重復(fù)線性漸變的效果。設(shè)置重復(fù)線性漸變的基本語法格式：background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);重復(fù)徑向漸變設(shè)置重復(fù)徑向漸變的方法：通過“background-image:repeating-radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)重復(fù)徑向漸變的效果。設(shè)置重復(fù)徑向漸變的基本語法格式：background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);知識點8-多背景圖像教師展示PPT，講解多背景圖像。設(shè)置多背景的方法：通過background-image、background-repeat、background-position和background-size等屬性的值來實現(xiàn)多重背景圖像效果。知識點9-修剪背景圖像教師展示PPT，講解修剪背景圖像。設(shè)置背景圖像的大小設(shè)置背景圖像大小的方法：background-size屬性用于控制背景圖像的大小。設(shè)置背景圖像大小的基本語法格式：background-size:屬性值1屬性值2;background-size屬性值：像素值、百分比、cover、contain設(shè)置背景圖像的顯示區(qū)域設(shè)置背景圖像顯示區(qū)域的方法：background-origin屬性可以自行定義背景圖像的相對位置。設(shè)置背景圖像顯示區(qū)域的基本語法格式：background-origin:屬性值;background-origin屬性值：padding-box、border-box、content-box設(shè)置背景圖像的裁剪區(qū)域設(shè)置背景圖像裁剪區(qū)域的方法：background-clip屬性用于定義背景圖像的裁剪區(qū)域。設(shè)置背景圖像裁剪區(qū)域的基本語法格式：background-clip:屬性值;background-clip屬性值：border-box、padding-box、content-box四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第四課時（元素的類型、div和span、元素類型的轉(zhuǎn)換、相鄰塊元素垂直外邊距的合并、嵌套塊元素垂直外邊距的合并）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。請寫出設(shè)置線性漸變的基本格式。答案：background-image:linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);說明：無二、通過直接導(dǎo)入的方式導(dǎo)入新課在使用這些標簽的時候，我們會發(fā)現(xiàn)有些標簽可以設(shè)置寬度和高度屬性（如p標簽），有些標簽則不可以（如strong標簽）。這是因為標簽有著特定的類型，不同類型的標簽可以設(shè)置的屬性也不同。本節(jié)將詳細講解標簽元素的類型和轉(zhuǎn)換方法。三、新課講解知識點1-元素的類型教師展示PPT，講解元素的類型。塊元素塊元素的特點：每個塊元素通常都會獨自占據(jù)一行或多行，可以對其設(shè)置寬度、高度、對齊等屬性。常見的塊元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>。行內(nèi)元素行內(nèi)元素的特點：不會占據(jù)一行，也不強迫其他的標簽在新的一行顯示。一個行內(nèi)標簽通常會和其他行內(nèi)標簽顯示在同一行中，它們不占有獨立的區(qū)域，僅僅靠自身的文本內(nèi)容大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對齊等屬性。常見的行內(nèi)元素：<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>。使用行內(nèi)元素的注意事項。知識點2-div和span教師展示PPT，講解div和span。divdiv的概念：div英文全稱為“division”，譯為中文是“分割、區(qū)域”。<div>標簽簡單而言就是一個塊元素，可以實現(xiàn)網(wǎng)頁的規(guī)劃和布局。div的使用方法：在div標簽中可以設(shè)置外邊距、內(nèi)邊距、寬和高；大多數(shù)HTML標簽都可以嵌套在<div>標簽中；可以嵌套多層<div>；通過與id、class等屬性結(jié)合設(shè)置CSS樣式，可以替代大多數(shù)的塊級文本標簽。使用<div>標簽的注意事項。spanspan的概念：span中文譯為“范圍”，作為容器標簽被廣泛應(yīng)用在HTML語言中。<span>標簽是行內(nèi)元素，僅作為只能包含文本和各種行內(nèi)標簽的容器。span的使用方法：<span>標簽常用于定義網(wǎng)頁中某些特殊顯示的文本，配合class屬性使用。<span>標簽本身沒有結(jié)構(gòu)特征，只有在應(yīng)用樣式時，才會產(chǎn)生視覺上的變化。使用<span>標簽的注意事項。知識點3-元素類型的轉(zhuǎn)換教師展示PPT，講解元素類型的轉(zhuǎn)換。元素類型轉(zhuǎn)換的方法：可以使用display屬性對元素的類型進行轉(zhuǎn)換。display屬性值：inline：此元素將顯示為行內(nèi)元素（行內(nèi)元素默認的display屬性值）。block：此元素將顯示為塊元素（塊元素默認的display屬性值）。inline-block：此元素將顯示為行內(nèi)塊元素，可以對其設(shè)置寬高和對齊等屬性，但是該元素不會獨占一行。none：此元素將被隱藏，不顯示，也不占用頁面空間，相當(dāng)于該元素不存在。元素轉(zhuǎn)換時的注意事項。知識點4-相鄰塊元素垂直外邊距的合并教師展示PPT，講解相鄰塊元素垂直外邊距的合并。相鄰塊元素垂直外邊距合并的概念：當(dāng)上下相鄰的兩個塊元素相遇時，如果上面的標簽有下外邊距margin-bottom，下面的標簽有上外邊距margin-top，則它們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。知識點5-嵌套塊元素垂直外邊距的合并教師展示PPT，講解嵌套塊元素垂直外邊距的合并。嵌套塊元素垂直外邊距合并的概念：對于兩個嵌套關(guān)系的塊元素，如果父標簽沒有上內(nèi)邊距及邊框，則父標簽的上外邊距會與子標簽的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父標簽的上外邊距為0，也會發(fā)生合并。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第五、六課時（【階段案例】制作音樂排行榜）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。請簡要描述什么是相鄰塊元素垂直外邊距的合并。答案：當(dāng)上下相鄰的兩個塊元素相遇時，如果上面的標簽有下外邊距margin-bottom，下面的標簽有上外邊距margin-top，則它們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。。說明：無。二、通過直接導(dǎo)入的方式導(dǎo)入新課本章前幾節(jié)重點講解了盒子模型的概念、盒子相關(guān)屬性、元素的類型和轉(zhuǎn)換等。為了使讀者更熟練地運用盒子模型相關(guān)屬性控制頁面中的各個元素，本節(jié)將通過案例的形式分步驟制作一個音樂排行榜模塊。三、新課講解案例實現(xiàn)1-分析效果圖教師展示PPT，分析效果圖。結(jié)構(gòu)分析樣式分析案例實現(xiàn)2-制作頁面結(jié)構(gòu)教師編寫代碼，制作頁面結(jié)構(gòu)。案例實現(xiàn)3-定義CSS樣式教師編寫代碼，定義CSS樣式。定義基礎(chǔ)樣式整體控制歌曲排行榜模塊設(shè)置歌曲排名部分樣式設(shè)置需要單獨控制的列表項樣式四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。復(fù)習(xí)本節(jié)課的內(nèi)容。第七、八課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習(xí)，通過上機練習(xí)可以考察同學(xué)對知識點的掌握情況，對代碼的熟練程度。上機一：（考查知識點為綜合設(shè)置背景屬性）形式：單獨完成題目：背景對聯(lián)效果-恭賀新禧。要求如下：需要定義4個盒子，它們層層嵌套。新建一個大盒子，背景為上聯(lián)圖像，不平鋪，居左對齊。在大盒子里嵌套一個同樣大小的盒子（第二個盒子），背景為下聯(lián)圖像，居右對齊，不平鋪。在第二個盒子里嵌套一個同樣大小的盒子（第三個盒子），背景圖像為橫批，水平居中垂直居上對齊，不平鋪。在第三個盒子里嵌套一個同樣大小的盒子（第四個盒子），背景為“福”字圖像，居中顯示。上機二：（考查知識點為設(shè)置背景圖像）形式：單獨完成題目：CSS背景圖像之尖角導(dǎo)航。要求如下：將超鏈接（a）轉(zhuǎn)換為行內(nèi)塊元素，為其指定寬度和高度。定義超鏈接的背景圖像，當(dāng)鼠標經(jīng)過時，更換背景圖像。教學(xué)后記《網(wǎng)頁設(shè)計與制作（HTML+CSS）（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：202年月課題名稱第5章列表和超鏈接計劃課時6課時教學(xué)引入一個網(wǎng)站由多個網(wǎng)頁構(gòu)成，每個網(wǎng)頁上都有大量的信息，要想使網(wǎng)頁中的信息排列有序，條理清晰，并且網(wǎng)頁與網(wǎng)頁之間有一定的關(guān)聯(lián)，就需要使用列表和超鏈接。本章將對列表標簽、CSS列表樣式、超鏈接標簽和鏈接偽類進行具體講解。教學(xué)目標使學(xué)生掌握無序、有序及定義列表的使用，能夠制作常見的網(wǎng)頁模塊。使學(xué)生熟悉CSS控制列表樣式的方法，能夠使用CSS設(shè)置列表樣式。使學(xué)生掌握超鏈接標簽的使用，能夠使用超鏈接定義網(wǎng)頁元素。使學(xué)生掌握CSS偽類的用法，能夠使用CSS偽類實現(xiàn)超鏈接特效。教學(xué)重點無序列表有序列表定義列表創(chuàng)建超鏈接鏈接偽類控制超鏈接【階段案例】制作新聞列表教學(xué)難點鏈接偽類控制超鏈接教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進行教學(xué)教學(xué)過程第一課時（無序列表、有序列表、定義列表、列表的嵌套應(yīng)用）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。上節(jié)課制作的音樂排行榜時，歌曲排名部分通過（）標簽進行定義。答案：p說明：無二、通過直接導(dǎo)入的方式導(dǎo)入新課一個網(wǎng)站由多個網(wǎng)頁構(gòu)成，每個網(wǎng)頁上都有大量的信息，要想使網(wǎng)頁中的信息排列有序，條理清晰，并且網(wǎng)頁與網(wǎng)頁之間有一定的關(guān)聯(lián)，就需要使用列表和超鏈接。本章將對列表標簽、CSS列表樣式、超鏈接標簽和鏈接偽類進行具體講解。三、新課講解知識點1-無序列表教師展示PPT，講解無序列表。定義無序列表的方法：無序列表使用<ul>標簽定義，內(nèi)部可以嵌套多個<li>標簽（<li>是列表項）。定義無序列表的基本語法格式：<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li></ul>無序列表常用的type屬性值使用無序列表的注意事項。知識點2-有序列表教師展示PPT，講解有序列表。定義有序列表的方法：有序列表是一種強調(diào)排列順序的列表，使用<ol>標簽定義，內(nèi)部可以嵌套多個<li>標簽。定義有序列表的基本語法格式：<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li></ol>有序列表的屬性和屬性值：使用有序列表的注意事項。知識點3-定義列表教師展示PPT，講解定義列表。定義列表的基本語法格式：<dl><dt>名詞1</dt><dd>dd是名詞1的描述信息1</dd><dd>dd是名詞1的描述信息2</dd>...<dt>名詞2</dt><dd>dd是名詞2的描述信息1</dd><dd>dd是名詞2的描述信息2</dd>...</dl>使用定義列表時的注意事項。知識點4-列表的嵌套應(yīng)用教師展示PPT，講解列表的嵌套應(yīng)用。列表嵌套應(yīng)用的概念：在使用列表時，列表項中也有可能包含若干子列表項，我們要想在列表項中定義子列表項就需要將列表進行嵌套。列表嵌套的方法：只需將子列表嵌套在上一級列表的列表項中。設(shè)置邊框顏色的注意事項。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第二課時（list-style-type屬性、list-style-image屬性、list-style-position屬性、list-style屬性）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。下列選項中，可以定義有序列表的是（）。A、<ol>B、<ul>C、<dl>D、<li>答案：A說明：有序列表是一種強調(diào)排列順序的列表，使用<ol>標簽定義，內(nèi)部可以嵌套多個<li>標簽。二、通過直接導(dǎo)入的方式導(dǎo)入新課定義無序或有序列表時，可以通過標簽的屬性控制列表的項目符號，但該方式不符合結(jié)構(gòu)表現(xiàn)分離的網(wǎng)頁設(shè)計原則。為此CSS提供了一系列的列表樣式屬性，來單獨控制列表項目符號，本節(jié)將對這些屬性進行詳細地講解。三、新課講解知識點1-list-style-type屬性教師展示PPT，講解list-style-type屬性。list-style-type屬性作用：用于設(shè)置列表項目符號樣式。list-style-type屬性值：list-style-type屬性的注意事項。知識點2-list-style-image屬性教師展示PPT，講解list-style-image屬性。list-style-image屬性的作用：使用list-style-image屬性可以為各個列表項設(shè)置項目圖像，使列表的樣式更加美觀。知識點3-list-style-position屬性教師展示PPT，講解list-style-position屬性。list-style-position屬性的作用：用于控制列表項目符號的位置。list-style-position屬性的屬性值：inside：列表項目符號位于列表文本以內(nèi)。outside：列表項目符號位于列表文本以外（默認值）。知識點4-list-style屬性教師展示PPT，講解list-style屬性。list-style屬性的基本語法格式：list-style:列表項目符號列表項目符號的位置列表項目圖像;四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第三課時（創(chuàng)建超鏈接、錨點鏈接、鏈接偽類控制超鏈接）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。在list-style-type屬性中，可以設(shè)置列表項顯示符號為小寫羅馬數(shù)字的屬性值是（）A、discB、circleC、lower-romanD、lower-alpha答案：C說明：無二、通過直接導(dǎo)入的方式導(dǎo)入新課超鏈接是網(wǎng)頁常用元素之一，每個網(wǎng)頁通過超鏈接關(guān)聯(lián)在一起，構(gòu)成一個完整的網(wǎng)站。超鏈接定義的對象可以是圖片，也可以是文本，或者是網(wǎng)頁中的任何內(nèi)容元素。單擊通過超鏈接定義的對象，可進行頁面跳轉(zhuǎn)。本節(jié)將對超鏈接標簽進行詳細地講解。三、新課講解知識點1-創(chuàng)建超鏈接教師展示PPT，講解創(chuàng)建超鏈接。創(chuàng)建超鏈接的方法：在HTML中創(chuàng)建超鏈接非常簡單，只需用<a>標簽嵌套需要被鏈接的對象即可。創(chuàng)建超鏈接的基本語法格式：<ahref="跳轉(zhuǎn)目標"target="目標窗口的彈出方式">文本或圖像</a>創(chuàng)建超鏈接的常用屬性：href：用于指定鏈接目標的url地址，當(dāng)為<a>標簽應(yīng)用href屬性時，這個<a>標簽就具有了超鏈接的功能。target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，意為在原窗口中打開，_blank為在新窗口中打開。創(chuàng)建超鏈接時的注意事項。知識點2-錨點鏈接教師展示PPT，講解錨點鏈接。創(chuàng)建錨點鏈接的作用：通過創(chuàng)建錨點鏈接，用戶能夠直接跳到指定位置的內(nèi)容。知識點3-鏈接偽類控制超鏈接教師展示PPT，講解鏈接偽類控制超鏈接。超鏈接標簽<a>的偽類：鏈接偽類控制超鏈接時的意事項。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。預(yù)習(xí)下節(jié)課的內(nèi)容。第四課時（【階段案例】制作新聞列表）一、復(fù)習(xí)鞏固在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。（）標簽用于定義超鏈接。答案：<a>說明：<a>標簽是一個行內(nèi)元素，用于定義超鏈接。二、通過直接導(dǎo)入的方式導(dǎo)入新課在前幾個小節(jié)重點講解了列表標簽、超鏈接標簽以及CSS控制列表與超鏈接的樣式。為了使初學(xué)者更好地運用列表與超鏈接組織頁面，本小節(jié)將通過案例的形式分步驟制作網(wǎng)頁中常見的新聞列表。當(dāng)光標移上鏈接文本時，文本的顏色發(fā)生改變。三、新課講解案例實現(xiàn)1-分析效果圖教師展示PPT，分析效果圖。結(jié)構(gòu)分析樣式分析案例實現(xiàn)2-制作頁面結(jié)構(gòu)教師編寫代碼，制作頁面結(jié)構(gòu)。案例實現(xiàn)3-定義CSS樣式教師編寫代碼，定義CSS樣式。定義基礎(chǔ)樣式整體控制新聞列表制作標題部分整體控制列表內(nèi)容控制列表項CSS控制鏈接文本四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。學(xué)生交流，針對自己遇到的難點向老師提問，老師進行解答。五、布置作業(yè)教師通過高校教輔平臺（）發(fā)放測試題以鞏固本節(jié)課的學(xué)習(xí)內(nèi)容。復(fù)習(xí)本節(jié)課的內(nèi)容。第五、六課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習(xí)，通過上機練習(xí)可以考察同學(xué)對知識點的掌握情況，對代碼的熟練程度。上機一：（考查知識點為創(chuàng)建超鏈接）形式：單獨完成題目：制作簡單的熱點新聞板塊。要求如下：定義新聞標題。定義水平線，并通過CSS設(shè)置水平線的樣式。定義無序列表，并為列表項中的文本添加超鏈接屬性，并定義鏈接偽類。為“馬上注冊”圖片添加超鏈接屬性。上機二：（考查知識點為有序列表）形式：單獨完成題目：制作百度歌曲排行榜。要求如下：定義有序列表<ol>。再有序列表<ol>中，定義五對<.li></li>列表項。通過CSS設(shè)置列表樣式。教學(xué)后記