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

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

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

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

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

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

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