《HTML5+CSS3網(wǎng)頁設(shè)計技術(shù)》授課教案授課教案學校******大學（學院）任課教師***授課題目模塊六列表和超鏈接授課時間長度6學時所用教材HTM5+CSS3網(wǎng)頁設(shè)計技術(shù)，黃玉春主編；中國科學技術(shù)出版社教學目標｜知識目標｜（1）掌握列表標簽（無序列表、有序列表、自定義列表、列表的嵌套）。（2）掌握用CSS控制列表的樣式。（3）掌握超鏈接標簽的使用。（4）掌握用偽類控制超鏈接。｜能力目標｜（1）能夠制作各類列表。（2）能夠用CSS控制列表的樣式。（3）能夠熟練使用超鏈接標簽。（4）能夠使用CSS偽類控制超鏈接。｜素質(zhì)目標｜（1）通過學習列表和超鏈接，體會網(wǎng)頁設(shè)計之美，將HTML和CSS完美結(jié)合解決實際問題。（2）列表案例選擇社會主義核心價值觀相關(guān)內(nèi)容，牢記社會主義核心價值觀，樹立正確的人生觀。（3）實戰(zhàn)案例選取人民網(wǎng)的新聞列表，能夠在學習專業(yè)知識和技能的同時了解社會民生發(fā)展大事。教學重點（1）CSS控制列表的樣式。（2）用偽類設(shè)置超鏈接樣式。教學難點列表和超鏈接樣式的設(shè)置。教學方法任務引入法、課堂討論、理論講解、實操訓練教學用具多媒體教學設(shè)備、教材、課件、實訓素材教學過程主要教學內(nèi)容及步驟考勤教師使用App或者點名等方式進行簽到；學生按照老師要求簽到任務導入瀏覽器打開一個網(wǎng)頁，開發(fā)者模式查看網(wǎng)頁源碼，找出列表代碼，引出本任務教學內(nèi)容。教學內(nèi)容任務一掌握列表標簽列表標簽是HTML網(wǎng)頁結(jié)構(gòu)中十分常用的標簽，按照列表結(jié)構(gòu)劃分，html網(wǎng)頁的列表標簽分為3種。分別是無序列表<ul>、有序列表<ol>和定義列表<dl>。一、無序列表無序列表的標簽是ul（英文unorderedlist的縮寫）。定義無序列表的基本語法格式如下：<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li></ul><ul></ul>中只能且必須嵌套<li></li>。li標簽之間沒有先后順序，是并列存在的。li標簽里可以容納文本、數(shù)據(jù)、圖片、超鏈接等內(nèi)容。值得一提的是，列表標簽<ul>和<li>自帶樣式type屬性，用于指定列表項目符號。無序列表常用type屬性值有3種。（1）disc：默認值。實心小圓點。（2）circle：空心小圓點。（3）square：實心小方塊。二、有序列表有序列表的標簽是ol（英文orderedlist的縮寫）。有序列表是一種強調(diào)順序的列表。定義有序列表的基本語法格式如下：<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li></ol><ol></ol>中只能且必須嵌套<li></li>。<li></li>標識列表項，列表項目使用數(shù)字進行標記。li標簽里也可以容納文本、數(shù)據(jù)、圖片、超鏈接等內(nèi)容。列表標簽<ol>和<li>也自帶樣式type屬性，用于指定列表項目序號。有列表常用type屬性值有3種。（1）1：默認值。項目序號顯示數(shù)字1，2，3…。（2）a或A：項目序號顯示為英文字母a，b，c…或A，B，C…。（3）i或I：項目序號顯示為羅馬數(shù)字i，ii，iii…或I，II，III…。有序列表的ol標記還有start屬性，該屬性用于設(shè)置起始編號的數(shù)字。默認值為1。即起始編號從1開始。三、自定義列表自定義列表的標簽是dl（英文definitionlist的縮寫）。自定義列表的基本語法格式如下：<dl><dt>名詞1</dt><dd>名詞1的描述信息1</dd><dd>名詞1的描述信息2</dd>…<dt>名詞2</dt><dd>名詞2的描述信息1</dd><dd>名詞2的描述信息2</dd>…</dl>在上面的語法中，<dl></dl>用于指定自定義列表，<dt></dt>和<dd>/dd>并列嵌套在<dl></dl>中。其中<dt></dt>標簽用于指定術(shù)語名詞，<dd></dd>標簽用于對術(shù)語名詞的解釋和描述。一對<dt></dt>標簽可以嵌套多對<dd></dd>標簽，也就是說一個名詞術(shù)語可以有多項解釋和描述。任務二CSS控制列表樣式定義無序列表或有序列表式時，可以通過type屬性設(shè)置列表項目的符號，但該方法不符合結(jié)構(gòu)與樣式分離的網(wǎng)頁設(shè)計原則，在實際開發(fā)中通常用CSS提供的列表樣式屬性來設(shè)置列表的樣式。一、列表符號樣式要影響列表的樣式，最簡單(同時支持最充分)的辦法就是改變其標志類型。要修改用于列表項的標志類型，可以使用list-style-type屬性。此屬性可用于設(shè)置列表的符號或編號，通常搭配<ol><ul>標簽一起使用：list-style-type:value對于type屬性，可以設(shè)置多種符號類型，具體如下。（1）disc：實心圓（默認值）。（2）circle：空心圓。（3）square：實心方塊。（4）decimal：阿拉伯數(shù)字。（5）lower-roman：小寫羅馬數(shù)字。（6）upper-roman：大寫羅馬數(shù)字。（7）lower-alpha：小寫英文字母。（8）upper-alpha：大寫英文字母。（9）none：不使用項目符號。實際網(wǎng)頁設(shè)計中，盡量使用ul標簽標識無序列表，用ol標簽標識有序列表。二、圖片作為列表符號如果要把列表的標志改成一個圖像，可以利用list-style-image屬性：ulli{list-style-image:url(*.gif)}說明：這個屬性指定作為一個有序或無序列表項標識的圖像。三、列表屬性簡寫為簡單起見，CSS設(shè)置了一個復合屬性list-style用于控制列表的樣式?？梢詫⒁陨?個列表樣式屬性合并為一個方便的屬性list-style，就像下面這樣：li{list-style:url(example.gif)squareinside}list-style的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其他的就會填入其默認值。值得一提的是，在實際網(wǎng)頁制作過程中，為了更高效地控制列表顯示符號，通常將list-style的屬性值定義為none，然后通過為li設(shè)置背景的方式實現(xiàn)不同的列表項目符號。任務三設(shè)置·超鏈接超鏈接是網(wǎng)頁中最常用的元素，每個網(wǎng)頁通過超鏈接關(guān)聯(lián)在一起，構(gòu)成一個完整的網(wǎng)站。定義超鏈接的對象可以是文字，可以是圖像，也可以是其他任何元素。只有通過超鏈接定義的對象才能在單擊后進行跳轉(zhuǎn)。一、定義超鏈接在HTML中，通過標記符<a></a>來加入超鏈接。<a>和</a>之間的部分稱作超鏈接源，也就是鼠標所點擊的區(qū)域，一般以文字或圖片作為超鏈接源。該標記的用法為：<ahref="url"target="winame"title="*">文字或圖片</a>標簽<a>表示一個鏈接的開始，</a>表示鏈接的結(jié)束。（1）href屬性：用于指定所要鏈接的目標地址；目標地址是最重要的，一旦路徑上出現(xiàn)差錯，該資源就無法訪問。暫時沒有確定鏈接目標時，通常將href屬性設(shè)為“#”（即href="#"），表示該鏈接暫時使用一個空鏈接。（2）target屬性：該屬性用于指定打開鏈接的目標窗口，其默認方式是原窗口。其取值有下面的4種方式。①_parent：在上一級窗口中打開，一般使用分幀的框架頁會經(jīng)常使用。②_blank：在新窗口打開。③_self：在同一個幀或窗口中打開，這項一般不用設(shè)置。④_top：在瀏覽器的整個窗口中打開，忽略任何框架。（3）title屬性：該屬性用于指定指向鏈接時所顯示的標題文字。1．鏈接路徑若目標地址是網(wǎng)站內(nèi)部的其他網(wǎng)頁，這時目標地址使用相對路徑。例如，當前網(wǎng)頁有一個“首頁”的菜單項，現(xiàn)定義一個超鏈接，當用戶單擊時切換到首頁，則該鏈接的定義方法為：<ahref="index.htm">首頁</a>若目標地址是外部網(wǎng)站的網(wǎng)頁，這時目標地址使用絕對路徑。例如，在當前網(wǎng)頁創(chuàng)建一個超鏈接，用以鏈接到“中央電視臺”網(wǎng)站，則實現(xiàn)的代碼為：<ahref="">中央電視臺</a>另外，也可以用圖像作為超鏈接的標志。假設(shè)中央電視臺的logo在images目錄下，上述鏈接也可以表示為：<ahref=""><imgsrc="images/logo.gif"></a>2．錨點鏈接定義錨點鏈接可以跳轉(zhuǎn)到網(wǎng)頁的某一個指定位置。一般事先在該位置定義一個錨點（anchor），定義錨點用<a>標記的name屬性來實現(xiàn)，其用法為：<aname="錨點名">也可以用HTML標簽的id屬性來定義錨點，其用法為：<標簽id="錨點名">定義好錨點后，若要鏈接到網(wǎng)頁的某一錨點，則鏈接的方法為：<ahref="#錨點名">文本</a>3．郵件鏈接若要使超鏈接指向電子郵件發(fā)送鏈接，則可以用以下格式來實現(xiàn)：<ahref="mailto:電子郵件地址">…</a>單擊該鏈接，就會啟動默認的電子郵件發(fā)送程序。4．下載鏈接當超鏈接的url是非網(wǎng)頁的其他文件，如果文件能夠在瀏覽器中瀏覽，就直接在瀏覽器中打開，如*.jpg、*.gif、*.png、*.txt等格式的文件；如果該文件不能在瀏覽器中瀏覽，就會出現(xiàn)下載對話框，要求下載目標文件，如*.rar、*.exe等格式的文件。例如，要在當前網(wǎng)頁中創(chuàng)建一個超鏈接，用于下載download/zy1.rar文件，則實現(xiàn)的代碼為：<ahref="download/zy1.rar">點擊下載</a>二、CSS偽類控制超鏈接在CSS中，通過偽類可以實現(xiàn)鏈接的不同狀態(tài)顯示為不同的樣式。與超鏈接相關(guān)的偽類主要有4個，這些偽類定義了超鏈接的4種狀態(tài)，具體如下。（1）a:link{CSS樣式規(guī)則;}：未訪問的鏈接。（2）a:visited{CSS樣式規(guī)則;}：已訪問的鏈接。（3）a:hover{CSS樣式規(guī)則;}：鼠標劃過鏈接。（4）a:active{CSS樣式規(guī)則;}：已選中的鏈接。需要注意的是，在CSS定義中，a:hover必須被