DreamweaverCS6第2章文本與課件

1、 本章簡介： 不管網(wǎng)頁內(nèi)容如何豐富，文本自始至終都是網(wǎng)頁中最基本的元素。由于文本產(chǎn)生的信息量大，輸入、編輯起來方便，并且生成的文件小，容易被瀏覽器下載，不會占用太多的等待時間，因此掌握好文本的使用，對于制作網(wǎng)頁來說是最基本的要求。第2章文本與文檔 本章簡介： 第2章文本與文檔課堂學(xué)習(xí)目標(biāo)掌握文字的輸入、連續(xù)空格的輸入掌握頁邊距、網(wǎng)頁的標(biāo)題、網(wǎng)頁的默認(rèn)格式的設(shè)置掌握設(shè)置文字的大小、顏色、字體、對齊方式和段落樣式等的設(shè)置掌握項目符號或編號、文本縮進、插入日期、特殊字符和換行符的使用掌握水平線、顯示和隱藏網(wǎng)格和標(biāo)尺的應(yīng)用課堂學(xué)習(xí)目標(biāo)掌握文字的輸入、連續(xù)空格的輸入2.1文本與文檔課堂案例青山別墅網(wǎng)頁輸

2、入文本設(shè)置文本屬性輸入連續(xù)的空格設(shè)置是否顯示不可見元素設(shè)置頁邊距設(shè)置網(wǎng)頁的標(biāo)題設(shè)置網(wǎng)頁的默認(rèn)格式課堂案例機電設(shè)備網(wǎng)頁改變文本的大小改變文本的顏色改變文本的字體改變文本的對齊方式設(shè)置文本樣式段落文本2.1文本與文檔課堂案例青山別墅網(wǎng)頁改變文本的大小2.1.1課堂案例青山別墅網(wǎng)頁使用“頁面屬性”命令設(shè)置頁面外觀、網(wǎng)頁標(biāo)題效果；使用“首選參數(shù)”命令設(shè)置允許多個連續(xù)空格、顯示不可見元素效果。效果圖2.1.1課堂案例青山別墅網(wǎng)頁使用“頁面屬性”命令設(shè)2.1.2輸入文本應(yīng)用Dreamweaver CS6編輯網(wǎng)頁時，在文檔窗口中光標(biāo)為默認(rèn)顯示狀態(tài)。要添加文本，首先應(yīng)將光標(biāo)移動到文檔窗口中的編輯區(qū)域，然后直接

3、輸入文本，就像在其他文本編輯器中一樣。打開一個文檔，在文檔中單擊鼠標(biāo)左鍵，將光標(biāo)置于其中，然后在光標(biāo)后面輸入輸入文字后的效果圖2.1.2輸入文本應(yīng)用Dreamweaver CS6編輯網(wǎng)2.1.3設(shè)置文本屬性利用文本屬性可以方便地修改選中文本的字體、字號、樣式、對齊方式等，以獲得預(yù)期的效果。選擇“窗口 屬性”命令，彈出“屬性”面板，在HTML和CSS屬性面板中都可以設(shè)置文本的屬性。“屬性”面板2.1.3設(shè)置文本屬性利用文本屬性可以方便地修改選中文本的2.1.4輸入連續(xù)的空格在默認(rèn)狀態(tài)下，Dreamweaver CS6只允許網(wǎng)站設(shè)計者輸入一個空格，要輸入連續(xù)多個空格則需要進行設(shè)置或通過特定操作才能

4、實現(xiàn)。1設(shè)置“首選參數(shù)”對話框2直接插入多個連續(xù)空格2.1.4輸入連續(xù)的空格在默認(rèn)狀態(tài)下，Dreamweave2.1.5設(shè)置是否顯示不可見元素在網(wǎng)頁的設(shè)計視圖中，有一些元素僅用來標(biāo)志該元素的位置，而在瀏覽器中是不可見的。例如，腳本圖標(biāo)是用來標(biāo)志文檔正文中的 Javascript 或 Vbscript 代碼的位置，換行符圖標(biāo)是用來標(biāo)志每個換行符 的位置等。在設(shè)計網(wǎng)頁時，為了快速找到這些不可見元素的位置，常常需要改變這些元素在設(shè)計視圖中的可見性。2.1.5設(shè)置是否顯示不可見元素在網(wǎng)頁的設(shè)計視圖中，有一些2.1.6設(shè)置頁邊距按照文章的書寫規(guī)則，正文與紙的四周需要留有一定的距離，這個距離叫頁邊距。網(wǎng)頁

5、設(shè)計也如此，在默認(rèn)狀態(tài)下文檔的上、下、左、右邊距不為零。修改頁邊距的具體操作步驟如下。（1）選擇“修改 頁面屬性”命令，彈出“頁面屬性”對話框。（2）根據(jù)需要在對話框的“左邊距”“右邊距”“上邊距”“下邊距”“邊距寬度”和“邊距高度”選項的數(shù)值框中輸入相應(yīng)的數(shù)值。“頁面屬性”對話框2.1.6設(shè)置頁邊距按照文章的書寫規(guī)則，正文與紙的四周2.1.7設(shè)置網(wǎng)頁的標(biāo)題HTML 頁面的標(biāo)題可以幫助站點瀏覽者理解所查看網(wǎng)頁的內(nèi)容，并在瀏覽者的歷史記錄和書簽列表中標(biāo)志頁面。文檔的文件名是通過保存文件命令保存的網(wǎng)頁文件名稱，而頁面標(biāo)題是瀏覽者在瀏覽網(wǎng)頁時瀏覽器標(biāo)題欄中顯示的信息。 更改頁面標(biāo)題的具體操作步驟如下

6、。（1）選擇“修改 頁面屬性”命令，彈出“頁面屬性”對話框。（2）在對話框的“分類”選項框中選擇“標(biāo)題/編碼”選項，在對話框右側(cè)“標(biāo)題”選項的文本框中輸入頁面標(biāo)題，單擊“確定”按鈕，完成設(shè)置。2.1.7設(shè)置網(wǎng)頁的標(biāo)題HTML 頁面的標(biāo)題可以幫助站點瀏2.1.8設(shè)置網(wǎng)頁的默認(rèn)格式用戶在制作新網(wǎng)頁時，頁面都有一些默認(rèn)的屬性，比如網(wǎng)頁的標(biāo)題、網(wǎng)頁邊界、文字編碼、文字顏色和超鏈接的顏色等。若需要修改網(wǎng)頁的頁面屬性，可選擇“修改 頁面屬性”命令，彈出“頁面屬性”對話框?！绊撁鎸傩浴睂υ捒?.1.8設(shè)置網(wǎng)頁的默認(rèn)格式用戶在制作新網(wǎng)頁時，頁面都2.1.9課堂案例機電設(shè)備網(wǎng)頁使用“屬性”面板，設(shè)置文字大小、顏

7、色及字體。效果圖2.1.9課堂案例機電設(shè)備網(wǎng)頁使用“屬性”面板，設(shè)置文Dreamweaver CS6提供兩種改變文本大小的方法，一種是設(shè)置文本的默認(rèn)大小，另一種是設(shè)置選中文本的大小。2.1.10改變文本的大小Dreamweaver CS6提供兩種改變文本大小的方法豐富的視覺色彩可以吸引用戶的注意，網(wǎng)頁中的文本不僅可以是黑色，還可以呈現(xiàn)為其他色彩，最多時可達(dá)到16 777 216種顏色。顏色的種類與用戶顯示器的分辨率和顏色值有關(guān)，所以，通常在216種網(wǎng)頁色彩中選擇文字的顏色。2.1.11改變文本的顏色豐富的視覺色彩可以吸引用戶的注意，網(wǎng)頁中的文本不僅可以是Dreamweaver CS6提供了兩種

8、改變文本字體的方法，一種是設(shè)置文本的默認(rèn)字體，一種是設(shè)置選中文本的字體。2.1.12改變文本的字體Dreamweaver CS6提供了兩種改變文本字體的方文本的對齊方式是指文字相對于文檔窗口或瀏覽器窗口在水平位置的對齊方式。對齊方式按鈕有以下4種?！白髮R”按鈕 ：使文本在瀏覽器窗口中左對齊?！熬又袑R”按鈕 ：使文本在瀏覽器窗口中居中對齊?！坝覍R”按鈕：使文本在瀏覽器窗口中右對齊。“兩端對齊”按鈕：使文本在瀏覽器窗口中兩端對齊。2.1.13改變文本的對齊方式文本的對齊方式是指文字相對于文檔窗口或瀏覽器窗口在水平位置的文本樣式是指字符的外觀顯示方式，如加粗文本、傾斜文本和文本加下劃線等。2.

9、1.14設(shè)置文本樣式2.1.14設(shè)置文本樣式段落是指描述一個主題并且格式統(tǒng)一的一段文字。在文檔窗口中，輸入一段文字后按Enter鍵，這段文字就顯示在標(biāo)簽中。2.1.15段落文本段落是指描述一個主題并且格式統(tǒng)一的一段文字。在文檔窗口中，輸2.2項目符號和編號列表課堂案例電器城網(wǎng)店設(shè)置項目符號或編號修改項目符號或編號設(shè)置文本縮進格式插入日期特殊字符插入換行符2.2項目符號和編號列表課堂案例電器城網(wǎng)店2.2.1課堂案例電器城網(wǎng)店使用“項目列表”按鈕創(chuàng)建列表。效果圖2.2.1課堂案例電器城網(wǎng)店使用“項目列表”按鈕創(chuàng)建通過項目列表或編號列表按鈕設(shè)置項目符號或編號，步驟如下。（1）選擇段落。（2）在“屬性

10、”面板中，單擊“項目列表”按鈕 或“編號列表”按鈕 ，為文本添加項目符號或編號。設(shè)置了項目符號和編號后的段落。通過列表設(shè)置項目符號或編號，步驟如下。（1）選擇段落。（2）選擇“格式 列表”命令，彈出其子菜單，選擇“項目列表”或“編號列表”命令。2.2.2設(shè)置項目符號或編號通過項目列表或編號列表按鈕設(shè)置項目符號或編號，步驟如下。2.（1）將插入點放在設(shè)置項目符號或編號的文本中。（2）通過以下幾種方法啟動“列表屬性”對話框。 單擊“屬性”面板中的“列表項目”按鈕。 選擇“格式 列表 屬性”命令。2.2.3修改項目符號或編號（1）將插入點放在設(shè)置項目符號或編號的文本中。2.2.3修設(shè)置文本縮進格式有

11、以下幾種方法。在“屬性”面板中單擊“內(nèi)縮區(qū)塊”按鈕 或“刪除內(nèi)縮區(qū)塊”按鈕 ，使段落向右移動或向左移動。選擇“格式 縮進”或“格式 凸出”命令，使段落向右移動或向左移動。按Ctrl+Alt+ 組合鍵或Ctrl+Alt+ 組合鍵，使段落向右移動或向左移動。2.2.4設(shè)置文本縮進格式設(shè)置文本縮進格式有以下幾種方法。2.2.4設(shè)置文本縮進格式（1）在文檔窗口中，將插入點放置在想要插入對象的位置。（2）通過以下幾種方法彈出“插入日期”對話框。 單擊“插入”面板“常用”選項卡中的“日期”按鈕 。 選擇“插入 日期”命令。（3）選擇相應(yīng)的日期和時間的格式，單擊“確定”按鈕完成設(shè)置。2.2.5插入日期2.2

12、.5插入日期在網(wǎng)頁中插入特殊字符，有以下幾種方法。單擊“字符”展開式工具按鈕 。單擊“插入”面板“文本”選項卡中的“字符”展開式按鈕 ，彈出13個特殊字符按鈕。在其中選擇需要的特殊字符的工具按鈕，即可插入特殊字符。2.2.6特殊字符在網(wǎng)頁中插入特殊字符，有以下幾種方法。2.2.6特殊字符為段落添加換行符有以下幾種方法。 單擊“插入”面板“文本”選項卡中的“字符”展開式按鈕，選擇“換行符”按鈕。按Shift+Enter組合鍵。選擇“插入 HTML 特殊字符 換行符”命令。2.2.7插入換行符為段落添加換行符有以下幾種方法。 單擊“插入”面板“文本”選2.3水平線、網(wǎng)格與標(biāo)尺課堂案例休閑度假村網(wǎng)頁

13、水平線顯示和隱藏網(wǎng)格標(biāo)尺2.3水平線、網(wǎng)格與標(biāo)尺課堂案例休閑度假村網(wǎng)頁2.3.1課堂案例休閑度假村網(wǎng)頁使用“水平線”命令，在文檔中插入水平線；使用“屬性”面板，改變水平線的高度和寬度；使用代碼命令，改變水平線的顏色。效果圖2.3.1課堂案例休閑度假村網(wǎng)頁使用“水平線”命令，分割線又叫做水平線，可以將文字、圖像、表格等對象在視覺上分割開。一篇內(nèi)容繁雜的文檔，如果合理地放置幾條水平線，就會變得層次分明，便于閱讀。1創(chuàng)建水平線 單擊“插入”面板“常用”選項卡中的“水平線”按鈕 。 選擇“插入 HTML 水平線”命令。2修改水平線在文檔窗口中，選中水平線，選擇“窗口 屬性”命令，彈出“屬性”面板，可以

14、根據(jù)需要對屬性進行修改。2.3.2水平線“屬性”面板分割線又叫做水平線，可以將文字、圖像、表格等對象在視覺上分割使用網(wǎng)格可以更加方便地定位網(wǎng)頁元素，在網(wǎng)頁布局時網(wǎng)格也具有至關(guān)重要的作用。1顯示和隱藏網(wǎng)格選擇“查看 網(wǎng)格設(shè)置 顯示網(wǎng)格”命令，此時處于顯示網(wǎng)格的狀態(tài)，網(wǎng)格在“設(shè)計”視圖中可見。2設(shè)置網(wǎng)頁元素與網(wǎng)格對齊選擇“查看 網(wǎng)格設(shè)置 靠齊到網(wǎng)格”命令，此時，無論網(wǎng)格是否可見，都可以讓網(wǎng)頁元素自動與網(wǎng)格對齊。2.3.3顯示和隱藏網(wǎng)格顯示網(wǎng)格使用網(wǎng)格可以更加方便地定位網(wǎng)頁元素，在網(wǎng)頁布局時網(wǎng)格也具有至3修改網(wǎng)格的疏密選擇“查看 網(wǎng)格設(shè)置 網(wǎng)格設(shè)置”命令，彈出“網(wǎng)格設(shè)置”對話框。在“間隔”選項的文本框中輸入一個數(shù)字，并從下拉列表中選擇間隔的單位，單擊“確定”按鈕關(guān)閉對話框，完成網(wǎng)格線間隔的修改。4修改網(wǎng)格線的形狀和顏色選擇“查看 網(wǎng)格設(shè)置 網(wǎng)格設(shè)置”命令，彈出“網(wǎng)格設(shè)置”對話框。在對話框中，先單擊“顏色”按鈕并從顏色拾取器中選擇一種顏色，或者在文本框中輸入一個十六進制的數(shù)字，然后單擊“顯示”選項組中的“線”或“點”單選項，最后單擊“確定”按鈕，完成網(wǎng)格線顏色和線型的修改。“網(wǎng)格設(shè)置”對話框“網(wǎng)格設(shè)置”對話框3修改網(wǎng)格的疏密“網(wǎng)格設(shè)置”對話框“網(wǎng)格設(shè)置”對話框標(biāo)尺顯示在文檔窗口的上方和左側(cè)，用以標(biāo)志網(wǎng)頁元素的位置