第三章 制作第一個文本頁面
教學(xué)課題：設(shè)置頁面頭內(nèi)容
教學(xué)目標(biāo)：掌握設(shè)置頁面頭內(nèi)容的方法。
教學(xué)重點：1、頁面頭內(nèi)容的含義。
2、設(shè)置頁面頭內(nèi)容的方法。
教學(xué)難點：設(shè)置頁面頭內(nèi)容的方法。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例1：設(shè)置頁面頭內(nèi)容
1、【操作步驟】
步驟1：設(shè)置網(wǎng)頁標(biāo)題
（1）打開“美麗的九寨溝”網(wǎng)頁。如圖3-1所示。
圖3-1
（2）在標(biāo)題處將網(wǎng)頁標(biāo)題更改為“美麗的九寨溝”。如圖3-2所示。
圖3-2
說明：網(wǎng)頁標(biāo)題可以是中文、英文或符號，顯示在瀏覽器的標(biāo)題欄中。當(dāng)網(wǎng)頁被添加入收藏夾時，網(wǎng)頁標(biāo)題又作為網(wǎng)頁的名字出現(xiàn)在收藏夾中。
步驟2：插入作者和版權(quán)信息
（1）單擊如圖3-3所示列表中的“META”按鈕，彈出“META”對話框。
（2）以定義作者信息為例，在“屬性”欄中選擇“名稱”屬性，在“值”文本框中輸入值為author，在“內(nèi)容”文本框中輸入作者“張紅”，即作者信息。如圖3-4所示。
圖3-3
圖3-4
（3）如果希望設(shè)置版權(quán)聲明，在“值”文本框中輸入copyright，在“內(nèi)容”文本框中輸入版權(quán)聲明，如圖3-5如示。
圖3-5
（4）如果希望設(shè)置網(wǎng)頁編輯器的說明，在“值”文本框中輸入Generator,在“內(nèi)容”文本框中輸入所用的網(wǎng)頁編輯器，如圖3-6所示。
圖3-6
步驟3：插入關(guān)鍵字
（1）單擊如圖3-3所示列表中的“關(guān)鍵字”按鈕，彈出“關(guān)鍵字”對話框。
（2） 在“關(guān)鍵字”對話框中輸入關(guān)鍵字即可。如圖3-7所示。
圖3-7
步驟4：插入說明
（1）單擊如圖3-3所示列表中的“說明”按鈕，彈出“說明”對話框。
（2）在“說明”對話框中輸入說明即可。如圖3-8所示。
圖3-8
步驟5：插入刷新時間
（1）單擊如圖3-3所示列表中的“刷新”按鈕，彈出“刷新”對話框，刷新主要適用于兩種情況。
（2）一種是網(wǎng)頁地址發(fā)生變化，可以在原地址的網(wǎng)頁上使用刷新功能，到設(shè)定時間后，瀏覽器自動跳轉(zhuǎn)到新的網(wǎng)頁。如圖3-9所示，經(jīng)過8秒后，瀏覽器自動跳轉(zhuǎn)到指定的網(wǎng)頁。
圖3-9
（3）第二種網(wǎng)頁經(jīng)常更新，可以讓瀏覽器在若干秒之后自動刷新網(wǎng)頁。如圖3-10所示，8秒后，網(wǎng)頁自動刷新。
圖3-10
步驟6：插入基準(zhǔn)鏈接
（1）單擊如圖3-3所示列表中的“基礎(chǔ)”按鈕，彈出“基礎(chǔ)”對話框。在Herf文本框中輸入基礎(chǔ)URL地址，在“目標(biāo)”下拉列表中選擇鏈接頁面在哪個框架集中打開，其中包括5個選項，指定所有鏈接的文檔應(yīng)在哪個框架或窗口中打開。如圖3-11所示。
圖3-11
教學(xué)課題：網(wǎng)頁中的文本與文檔
教學(xué)目標(biāo)：1、掌握頁面中文本的輸入和編輯方法
2、掌握設(shè)置有序列表和無序列表的方法
3、掌握插入日期和特殊字符的方法
教學(xué)重點：1、文本的輸入和編輯方法。
2、設(shè)置有序列表和無序列表的方法。
3、插入日期和特殊字符的方法。
教學(xué)難點：文本的輸入和編輯方法。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例1：制作文本頁面，完成效果如圖3-12如示。
圖3-12
【操作步驟】
步驟1：建立網(wǎng)站站點。
（1）在本地硬盤上新建文件夾，名稱為“wangye”，作為站點文件夾。
（2）啟動Dreamweaver CS5，新建站點，名稱為“wenben”。
步驟2：新建網(wǎng)頁文件
（1）右擊站點根目錄通過新建文件添加網(wǎng)頁文件，名稱為“xingfu.html”。
步驟3．輸入普通文本。
在文檔窗口中輸入“中國人幸福感的十大標(biāo)準(zhǔn)”，每輸入一行，直接按回車鍵換行，輸入文本后的效果如圖3-13所示。
圖3-13
說明：Dreamweaver中普通文本的輸入與其他文字處理軟件基本一樣，有以下兩種方式。
第一是在文檔編輯窗口中直接由鍵盤輸入。第二是復(fù)制已有的文本。
步驟4．設(shè)置文本屬性。
圖3-14是文本屬性面板，文本的字體、字號、顏色等屬性需要添加樣式表來實現(xiàn)。
圖3-14
（1）設(shè)置文本標(biāo)題：
- 打開編輯字體列表對話框。
選擇文本標(biāo)題，右擊，選擇“字體”->“編輯字體列表”，如圖3-15所示。
圖3-15
- 添加中文字體。
從“可用字體”框中選擇需要的字體，單擊“左移” 
按鈕將字體類型移動到“選擇的字體”框后，單擊字體列表的“加號”按鈕，將選中的字體類型添加到字體列表中，如圖3-16所示。同樣可以單擊“右移” 
按鈕將已選擇的字體類型刪除。
圖3-16
- 選擇自己需要的字體后，會彈出新建CSS對話框，在該對話框中選擇或輸入選擇器名稱（如圖3-17所示）。
圖3-17
- 此時“ CSS樣式”面板如圖3-18所示。
圖3-18
- 在“ CSS樣式”中雙擊“.biaoti”樣式，打“.biaoti的CSS規(guī)則定義”對話框，如圖3-19所示。
圖3-19
- 在此對話框中設(shè)置字體為黑體、字號為36像素、顏色為紅色，此時網(wǎng)頁標(biāo)題如圖3-20所示。
圖3-20
（2）設(shè)置文本內(nèi)容：同設(shè)置文本標(biāo)題的方法，將文本內(nèi)容設(shè)置為宋體、24像素、黑色。如圖3-21所示。
圖3-21
步驟5：設(shè)置文本的對齊方式
- 選中文本。
- 打開格式菜單，選擇對齊，即可設(shè)置文本的對齊方式。
步驟6．插入水平線。
（1）將光標(biāo)置于標(biāo)題后面。
（2）選擇“插入”→“HTML”→“水平線”命令，效果如圖3-22所示。
圖3-22
