第三章網(wǎng)頁文本的設(shè)計(jì)

1、列 1 號(hào)共 5 頁HTML網(wǎng)頁設(shè)計(jì)教案章節(jié)課題第三章 網(wǎng)頁文本的設(shè)計(jì)授課日期2015年3月16日 第二周 授課時(shí)數(shù)4學(xué)時(shí)教學(xué)目的1.掌握HTML中文本的排版方法2.熟悉HTML中特殊文本的添加；3.掌握HTML文字列表的建立方法；4.熟悉HTML與文本相關(guān)的標(biāo)記與屬性。教學(xué)方法多媒體網(wǎng)絡(luò)教室，采用“演播”教學(xué)法。教學(xué)重點(diǎn)本階段的重點(diǎn)是讓學(xué)生掌握HTML文檔添加文本的方法及其對(duì)于文本排版修飾的手段。教學(xué)難點(diǎn)1.HTML特殊字符文本添加2.網(wǎng)頁文本排版3.無序列表、有序列表及其自定義列表的創(chuàng)建教具、掛圖 見課前準(zhǔn)備工作作業(yè)題號(hào) 見教案：附加題教學(xué)過程及時(shí)間分配主要教學(xué)內(nèi)容及步驟課前準(zhǔn)備工作圖樣演

2、示素材1.第三章網(wǎng)頁文本的設(shè)計(jì)PPT演示文稿；2.實(shí)時(shí)網(wǎng)站登陸演示3.HTML代碼書寫HTML網(wǎng)頁設(shè)計(jì)教案（續(xù)頁） 第 2 頁教學(xué)過程及時(shí)間分配教學(xué)內(nèi)容一、普通文本的添加1.通過鍵盤直接輸入示例1：無標(biāo)題文檔2.通過復(fù)制粘貼的方式（注意的DW中選擇性粘貼的方法）示例2：二、特殊字符文本的添加1特殊符號(hào)以&開頭后面跟相關(guān)特殊字符示例3：在網(wǎng)頁中展示“”代碼：<；1>；（1） 半角大空白：&ensp；（2） 全角大的空白：&emsp；（3） 不斷行的空白： ；（4） 小于：<；（5） 大于：>；（6） &符號(hào)：&；（7） 雙引號(hào)："；（8） 版權(quán)：©；

3、（9） 已注冊(cè)商標(biāo)：®；（10） 乘號(hào)：×；（11） 除號(hào)：÷s；（12） 加減號(hào)：±；（13） 千分比：&permil；（14） 雙向箭頭：&harr；2特殊公式標(biāo)記（1）為上標(biāo)標(biāo)記，用于將數(shù)字縮小后顯示于上方；（2）為下標(biāo)標(biāo)記，用于將數(shù)字縮小后顯示于下方；練習(xí)1：寫出(63+36)21=?結(jié)果以千分比表示HTML網(wǎng)頁設(shè)計(jì)教案（續(xù)頁） 第 3 頁教學(xué)過程及時(shí)間分配教學(xué)內(nèi)容練習(xí)2：H2+O2=H2O運(yùn)算式 (63+36)÷2±1=? 結(jié)果以&permil；表示。運(yùn)算式 H2+O2↔H2O二、HTML網(wǎng)頁文本的修飾1.

4、重要文本（1）加粗文本;（2）強(qiáng)調(diào)文本;（3）加強(qiáng)調(diào)文本2.傾斜文本傾斜文本3.設(shè)置文本旁注的文字大小4.設(shè)置已刪除文本已刪除文本5.設(shè)置文本方向 標(biāo)簽（1）從左向右顯示：屬性dir值為 “l(fā)tr”（2）從右向左顯示：屬性dir值為 “rtl”二、HTML網(wǎng)頁文本的排版1.實(shí)現(xiàn)段落與段內(nèi)換行（） 瀏覽器解釋HTML代碼時(shí)會(huì)忽略多余的空格和換行，不管輸入多少個(gè)空格，都將HTML網(wǎng)頁設(shè)計(jì)教案（續(xù)頁） 第 4 頁教學(xué)過程及時(shí)間分配教學(xué)內(nèi)容被視為一個(gè)空格。按回車鍵換行也是無效的，如果需要換行需要使用一個(gè)標(biāo)記來告訴瀏覽器這里需要回車操作。示例4：段落標(biāo)記.用來定義網(wǎng)頁中的一段文本，文本在一個(gè)段中會(huì)自動(dòng)換

5、行。換行標(biāo)記是一個(gè)單個(gè)使用的標(biāo)記，“break”的縮寫，作用是將文字在一個(gè)段內(nèi)強(qiáng)制換行；2.設(shè)置標(biāo)題（）類似于word文檔不同級(jí)別的標(biāo)題，HTML中共有6個(gè)標(biāo)題標(biāo)記，數(shù)字越小級(jí)別越高文字也相應(yīng)越大。（3）使文字水平居中（）瀏覽器默認(rèn)顯示方式從靠左的位置開始顯示文字（4）設(shè)置文字段落的縮進(jìn)（）對(duì)某段文字進(jìn)行縮進(jìn)顯示，正文的左右兩側(cè)都會(huì)距離瀏覽器邊界增加一定的距離。（5）為網(wǎng)頁添加水平線（）為了讓網(wǎng)頁內(nèi)容更有條理的顯示可以添加水平線，該標(biāo)記也是單個(gè)使用的。四、設(shè)置文字列表（1）建立無序列表（）項(xiàng)目列表使用的一對(duì)標(biāo)記是,其中每一個(gè)列表項(xiàng)使用結(jié)構(gòu)如下：第一項(xiàng)第二項(xiàng)第三項(xiàng)（2）建立有序列表類似于word

6、中的自動(dòng)編號(hào)功能，使用標(biāo)記，每一個(gè)列表項(xiàng)前使用結(jié)構(gòu)：第一項(xiàng)第二項(xiàng)第三項(xiàng)（3）建立不同類型的無序列表前面的標(biāo)記符號(hào)的變化Disc項(xiàng)目符號(hào)列表結(jié)構(gòu)：HTML網(wǎng)頁設(shè)計(jì)教案（續(xù)頁） 第 5 頁教學(xué)過程及時(shí)間分配教學(xué)內(nèi)容 項(xiàng)目1項(xiàng)目2項(xiàng)目3Circle項(xiàng)目符號(hào)列表結(jié)構(gòu)： 項(xiàng)目1項(xiàng)目2項(xiàng)目3square項(xiàng)目符號(hào)列表結(jié)構(gòu)： 項(xiàng)目1項(xiàng)目2項(xiàng)目3（4）建立不同類型的有序列表數(shù)字列表結(jié)構(gòu)： 項(xiàng)目1項(xiàng)目2項(xiàng)目3字母列表結(jié)構(gòu)： 項(xiàng)目1項(xiàng)目2項(xiàng)目3（5）建立嵌套列表HTML網(wǎng)頁設(shè)計(jì)教案（續(xù)頁） 第 6 頁教學(xué)過程及時(shí)間分配教學(xué)內(nèi)容示例： 第一章 第一節(jié)第二節(jié) 知識(shí)點(diǎn)1知識(shí)點(diǎn)2第二章第三章（6）自定義列表（）用來創(chuàng)建一個(gè)普通的列表，用來創(chuàng)建列表中的上層項(xiàng)目，用來創(chuàng)建列表中最下層項(xiàng)目，和都必須放在標(biāo)志對(duì)之間?？偟膩碚f標(biāo)記定義了一個(gè)定義列表，定義列表中的條目是通過使用標(biāo)記(“definition title”，定