Dreamweaver課件：第2章網(wǎng)頁文本操作2

1、第二章第二章 文本與文檔文本與文檔o本章學習要點：n網(wǎng)頁文檔的基本操作網(wǎng)頁文檔的基本操作n網(wǎng)頁文檔的屬性設置網(wǎng)頁文檔的屬性設置n插入普通文本、特殊文本插入普通文本、特殊文本n網(wǎng)頁文本的屬性設置網(wǎng)頁文本的屬性設置n插入水平線和時間插入水平線和時間n項目列表的建立方法項目列表的建立方法n移動文字的制作方法移動文字的制作方法插入文本插入文本o普通文本普通文本 o特殊文本特殊文本 o在字符之間添加空格在字符之間添加空格o上、下標的制作上、下標的制作o水平線水平線 o日期日期 文 本 是 網(wǎng) 頁 制 作 的 核 心 內 容 ，文 本 是 網(wǎng) 頁 制 作 的 核 心 內 容 ，Dreamweaver MX

2、 2004Dreamweaver MX 2004允許通過以下方式在允許通過以下方式在WebWeb頁中添加文本：直接將文本輸入到頁面頁中添加文本：直接將文本輸入到頁面中、從其他文檔復制和粘貼文本或從其他中、從其他文檔復制和粘貼文本或從其他應用程序中拖放文本。能夠合并到應用程序中拖放文本。能夠合并到WebWeb頁的頁的常見文檔類型有常見文檔類型有ASCIIASCII文本文件、文本文件、RTFRTF文件文件和和MS OfficeMS Office文檔，用文檔，用DreamweaverDreamweaver可以從可以從這些文檔類型中的任何一種程序取出文本，這些文檔類型中的任何一種程序取出文本，然后將文

3、本插入到然后將文本插入到WebWeb頁中。頁中。 普通文本普通文本 普通文本是指一般的漢字或英文文本，將光標普通文本是指一般的漢字或英文文本，將光標直接定位到編輯窗口中要輸入文字的地方，然后直直接定位到編輯窗口中要輸入文字的地方，然后直接輸入文字即可插入。接輸入文字即可插入。 也可在其他文本編輯器中編輯文本（也可在其他文本編輯器中編輯文本（WordWord、WPSWPS等），然后復制該文字，打開要添加該文字的等），然后復制該文字，打開要添加該文字的WebWeb頁面，選擇頁面，選擇 編輯編輯 粘貼粘貼 命令即可粘貼一般的文命令即可粘貼一般的文本。但本。但DreamweaverDreamweave

4、r不保留在其他應用程序中設置不保留在其他應用程序中設置的文本格式，只可以保留換行符。如果想保留文本的文本格式，只可以保留換行符。如果想保留文本的格式，可以選擇的格式，可以選擇 編輯編輯 帶格式粘貼帶格式粘貼 命令，如命令，如果不想保留文本格式，還可選擇果不想保留文本格式，還可選擇 編輯編輯 粘貼文本粘貼文本 命令。命令。 特殊文本特殊文本 在在Dreamweaver MX 2004Dreamweaver MX 2004中，可以在文檔中，可以在文檔中插入多種特殊符號，如版權復制符號、并中插入多種特殊符號，如版權復制符號、并列符、注冊商標符號等。要插入特殊符號，列符、注冊商標符號等。要插入特殊符號

5、，具體操作如下。具體操作如下。 （1 1）將光標定位到插入特殊字符的位置。）將光標定位到插入特殊字符的位置。 （2 2）單擊）單擊“插入插入”欄中的欄中的“文本文本”選項卡，選項卡，如如圖圖3-13-1所示。所示。 （3 3）單擊）單擊 按鈕，展開如按鈕，展開如圖圖3-23-2所示的所示的“字符字符”下拉列表。下拉列表。 圖圖3-13-1圖圖3-23-2 （4 4）如果還需要輸入其他的特殊字符，）如果還需要輸入其他的特殊字符，可以在可以在“字符字符”下拉列表中選擇下拉列表中選擇“其他字符其他字符”選項，打開如選項，打開如圖圖3-33-3所示的所示的“插入其他字符插入其他字符”對話框。對話框。

6、（5 5）單擊需要的字符后再單擊）單擊需要的字符后再單擊 按按鈕即可輸入相應的字符，如鈕即可輸入相應的字符，如圖圖3-43-4所示。所示。 也可以選擇也可以選擇 插入插入 HTMLHTML 特殊字符特殊字符 菜單命令下的相應命令插入相應字符。菜單命令下的相應命令插入相應字符。 圖圖3-33-3圖圖3-43-4在字符之間添加空格在字符之間添加空格 Dreamweaver MX 2004Dreamweaver MX 2004的的HTMLHTML代碼只代碼只允許字符之間包含一個空格，若要在文允許字符之間包含一個空格，若要在文檔中添加其他空格，必須插入不換行空檔中添加其他空格，必須插入不換行空格，也可

7、以設置一個在文檔中自動添加格，也可以設置一個在文檔中自動添加不換行空格的參數(shù)選擇。不換行空格的參數(shù)選擇。o插入不換行空格插入不換行空格 o設置添加不換行空格的參數(shù)設置添加不換行空格的參數(shù) 插入不換行空格插入不換行空格 插入不換行空格，可執(zhí)行如下操作之一。插入不換行空格，可執(zhí)行如下操作之一。o在在“插入插入”欄的欄的“文本文本”選項卡中，單擊選項卡中，單擊“字符字符”按鈕，在下拉列表中選擇按鈕，在下拉列表中選擇“插入不插入不換行空格換行空格”選項。選項。o選擇選擇 插入插入 HTMLHTML 特殊字符特殊字符 不換行空不換行空格格 菜單命令。菜單命令。 o按按【Ctrl+Shift+Ctrl+S

8、hift+空格鍵空格鍵】鍵輸入。鍵輸入。 o將輸入法切換到全角狀態(tài)再按空格鍵。將輸入法切換到全角狀態(tài)再按空格鍵。 設置添加不換行空格的參數(shù)設置添加不換行空格的參數(shù) 設置添加不換行空格的參數(shù)，具體操作設置添加不換行空格的參數(shù)，具體操作如下。如下。 （1 1）選擇）選擇 編輯編輯 首選參數(shù)首選參數(shù) 菜單命令。菜單命令。 （2 2）在）在“分類分類”列表的列表的“常規(guī)常規(guī)”選項中選項中選中選中 復選框。復選框。 （3 3）單擊）單擊 按鈕保存即可。按鈕保存即可。 添加上、下標的方法o利用標簽選擇器可以實現(xiàn)上、下標的插入 方法：在快速插入面版中找到 “標簽選擇器” htmlsup點擊“插入”后，輸入上

9、標內容，確定即可。 注：下標sub的插入方法同上。 水平線水平線 水平線對于信息的組織很有用。在頁面上，水平線對于信息的組織很有用。在頁面上，可以使用一條或多條水平線以可視方式分隔文可以使用一條或多條水平線以可視方式分隔文本和對象。本和對象。 o創(chuàng)建水平線創(chuàng)建水平線 o修改水平線修改水平線 創(chuàng)建水平線創(chuàng)建水平線 （1 1）在）在“文檔文檔”窗口中，將插入點放在要插窗口中，將插入點放在要插入水平線的位置。入水平線的位置。 （2 2）執(zhí)行以下操作之一。）執(zhí)行以下操作之一。o選擇選擇 插入插入 HTMLHTML 水平線水平線 菜單命令；菜單命令； o在在“插入插入”欄的欄的“HTML”HTML”選項

10、中單擊選項中單擊“水平線水平線”按鈕按鈕 。 修改水平線修改水平線 （1 1）在）在“文檔文檔”窗口中，選擇要修改的水平線。窗口中，選擇要修改的水平線。 （2 2）選擇）選擇 窗口窗口 屬性屬性 菜單命令，打開如圖菜單命令，打開如圖3-73-7所示的屬性面板，然后根據(jù)需要對屬性進行所示的屬性面板，然后根據(jù)需要對屬性進行設置。設置。 也可以在圖形軟件中制作一些矩形條后用插也可以在圖形軟件中制作一些矩形條后用插入圖形的方法插入到入圖形的方法插入到WebWeb頁面中，用這種方法做頁面中，用這種方法做成的水平線更加豐富多彩。成的水平線更加豐富多彩。 圖圖3-73-7日期日期 DreamweaverDr

11、eamweaver提供了一個方便的日期對象，該提供了一個方便的日期對象，該對象使可以以任何喜歡的格式插入當前日期（包對象使可以以任何喜歡的格式插入當前日期（包含或不包含時間都可以），并在每次保存文件時含或不包含時間都可以），并在每次保存文件時都自動更新該日期。都自動更新該日期。 將當前日期插入到文檔中的具體操作如下。將當前日期插入到文檔中的具體操作如下。 （1 1）在）在“文檔文檔”窗口中將插入點放在要插入窗口中將插入點放在要插入日期的位置。日期的位置。 （2 2）執(zhí)行下列操作之一。）執(zhí)行下列操作之一。o選擇選擇 插入插入 日期日期 菜單命令；菜單命令； o在在“插入插入”欄的欄的“常用常用”

12、選項中，單擊選項中，單擊“插入日插入日期期”按鈕。按鈕。 如果選中了如果選中了 復選框，則在日期格復選框，則在日期格式插入到文檔中后可以對其進行編輯，方法是單式插入到文檔中后可以對其進行編輯，方法是單擊已設置格式的日期文本，然后在屬性面板中單擊已設置格式的日期文本，然后在屬性面板中單擊擊 按鈕，接著在打開的按鈕，接著在打開的“插入日期插入日期”對對話框中重新進行設定即可。話框中重新進行設定即可。 如果希望在每次保存文檔時如果希望在每次保存文檔時都更新插入的日期，可選中都更新插入的日期，可選中“存存儲時自動更新儲時自動更新”復選框。如果希復選框。如果希望日期在插入后變成純文本并永望日期在插入后變

13、成純文本并永遠不自動更新，請取消選擇該選遠不自動更新，請取消選擇該選項。項。格式化文本格式化文本 “文本文本”屬性面板中各選項含義及設置方法如下。屬性面板中各選項含義及設置方法如下。 o格式格式 o樣式樣式 o粗體粗體 o斜體斜體 o字體字體 o大小大小 o顏色顏色 o對齊方式對齊方式 o鏈接鏈接 格式格式 設置所選文本（一般是標題文本）的段落設置所選文本（一般是標題文本）的段落樣式。樣式?！岸温涠温洹笔菓檬菓脴撕灥哪J格式，標簽的默認格式，“標題標題 1”1”添加添加標簽，各具體選項如標簽，各具體選項如圖圖3-3-8 8所示，設置該選項可以將所選的文本設置成所示，設置該選項可以將所選的文

14、本設置成各種標題。標題號越小，字體越大。各種標題。標題號越小，字體越大。 要設置字體的要設置字體的“格式格式”屬性，只需在屬性，只需在“格格式式”下拉列表中選擇相應的選項即可，其效果下拉列表中選擇相應的選項即可，其效果如如圖圖3-93-9所示。所示。 圖圖3-83-8圖圖3-93-9項目列表項目列表o有序列表有序列表 o無序列表無序列表 o創(chuàng)建嵌套列表創(chuàng)建嵌套列表 有序列表有序列表 有序列表又稱為編號列表，是有一定有序列表又稱為編號列表，是有一定排列順序的列表，一般前面有數(shù)字前導字排列順序的列表，一般前面有數(shù)字前導字符，也可以是阿拉伯數(shù)字、英文字母、羅符，也可以是阿拉伯數(shù)字、英文字母、羅馬數(shù)字

15、等符號。馬數(shù)字等符號。無序列表無序列表 無序列表又稱為項目列表，是一系無序列表又稱為項目列表，是一系列無順序級別關系的項目文本組成的列列無順序級別關系的項目文本組成的列表，一般前面是用項目符號作為前導字表，一般前面是用項目符號作為前導字符。符。創(chuàng)建嵌套列表創(chuàng)建嵌套列表 創(chuàng)建嵌套列表的創(chuàng)建嵌套列表的具體操作如下。具體操作如下。 （1 1）選擇要嵌套的列表項。）選擇要嵌套的列表項。 （2 2）單擊屬性面板中的）單擊屬性面板中的“縮進縮進”按鈕按鈕 ，或選擇或選擇 文本文本 縮進縮進 菜單命令。菜單命令。DreamweaverDreamweaver自動縮進文本并創(chuàng)建一個單獨的列表，該列表自動縮進文本

16、并創(chuàng)建一個單獨的列表，該列表具有原始列表具有原始列表的的HTMLHTML屬性，如屬性，如圖圖3-103-10所示。所示。 （3 3）按照以上列表的創(chuàng)建方法，對縮進的）按照以上列表的創(chuàng)建方法，對縮進的文本應用新的列表類型或樣式。完成的效果如文本應用新的列表類型或樣式。完成的效果如圖圖3-113-11所示。所示。 圖圖3-103-10 圖圖3-113-11 在創(chuàng)建一個頁面時，可以先對整個頁面進行布局，然后再向頁面中填入各種內容。網(wǎng)頁布局的方法很多，主要有表格布局、層布局和框架布局3種方式。移動文字的制作o文字oBehavior（方式）nScroll:一圈一圈繞著走nSlide:只走一次nAlter

17、nate:來回走oDirection:方向oLoop:循環(huán)次數(shù)oScroll amount:速度oScrolldelay:延時課后練習課后練習o填空題填空題o判斷題判斷題o問答題問答題o上機操作題上機操作題填空題填空題 （1 1）段落對齊有左對齊、右對齊、）段落對齊有左對齊、右對齊、 和和 4 4種方式。種方式。 （2 2）“文本文本”屬性面板中的屬性面板中的 圖標可以對所選文本圖標可以對所選文本進行進行 設置，用設置，用 圖標可以對所選文本進行圖標可以對所選文本進行 設置。設置。 居中對齊居中對齊傾斜傾斜兩端對齊兩端對齊加粗加粗判斷題判斷題（1 1）Dreamweaver MX 2004Dr

18、eamweaver MX 2004中只能進行無格式文本。中只能進行無格式文本。 （ ）（2 2）對水平線進行顏色設置后只能在瀏覽器中才能看）對水平線進行顏色設置后只能在瀏覽器中才能看到顏色顯示效。到顏色顯示效。 （ ） 問答題問答題（1 1）如何在如何在WebWeb頁面中添加多個空格？頁面中添加多個空格？ （2 2）如何添加和刪除字體列表項中的字體種類？如何添加和刪除字體列表項中的字體種類？ （3 3）如何更改字體列表的順序？如何更改字體列表的順序？ 上機操作題上機操作題 1.1.根據(jù)本課所學內容，請讀者自己創(chuàng)建一個根據(jù)本課所學內容，請讀者自己創(chuàng)建一個WebWeb頁面，在文檔中輸入自已的簡歷，并根據(jù)自己頁面，在文檔中輸入自已的簡歷，并根據(jù)自己的想法添加字體列表、并設置字體的大小、顏色的想法添加字體列表、并設置字體的大小、顏色及段落對齊方式。及段落對齊方式。 要求：有上、下