第3章 旅游網(wǎng)站文本設(shè)置(免費下載)

1、Dreamweaver CS5網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 本章將介紹在本章將介紹在Dreamweaver CS5中中添加和設(shè)置文本的基本方法。添加和設(shè)置文本的基本方法。第第3 3章旅游網(wǎng)站文本設(shè)置章旅游網(wǎng)站文本設(shè)置學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)掌握設(shè)置頁面屬性的方法。掌握設(shè)置頁面屬性的方法。掌握插入文件頭標(biāo)簽的方法。掌握插入文件頭標(biāo)簽的方法。掌握添加文本和特殊對象的方法。掌握添加文本和特殊對象的方法。掌握設(shè)置字體屬性的方法。掌握設(shè)置字體屬性的方法。掌握設(shè)置段落屬性的方法。掌握設(shè)置段落屬性的方法。3.13.1設(shè)計思路設(shè)計思路本章制作的4個網(wǎng)頁“jianjie.htm”、“yanbian.htm”、“qi

2、hou.htm”和“zhibei.htm”均是“嶗山旅游”網(wǎng)站“嶗山概況”欄目下的內(nèi)容，即“基本簡介”、“名稱演變”、“氣候特征”和“植被特征”。頁面設(shè)計形式均是標(biāo)題居中顯示、然后是兩條水平線，兩條水平線中間是正文文本，第2條水平線下面是網(wǎng)頁制作日期。網(wǎng)頁制作的操作過程基本上按照設(shè)置頁面屬性、添加文本、設(shè)置文本格式的順序進(jìn)行。3.2 3.2 設(shè)置頁面屬性設(shè)置頁面屬性1、【外觀（【外觀（CSS）】分類）】分類2、【外觀（【外觀（HTML）】分類）】分類3、【鏈接【鏈接 （CSS）】分類）】分類4、【標(biāo)題（【標(biāo)題（CSS）】分類）】分類5【標(biāo)題【標(biāo)題/編碼編碼】 分類分類6、【跟蹤圖像【跟蹤圖像

3、】分類】分類3.3 3.3 插入文件頭標(biāo)簽插入文件頭標(biāo)簽1、設(shè)置頁面的設(shè)置頁面的Meta屬性屬性 在菜單欄中選擇【插入】/【HTML】/【文件頭標(biāo)簽】/【Meta】命令，打開【META】對話框，進(jìn)行相應(yīng)的參數(shù)。當(dāng)在【當(dāng)在【META】對話框的【屬性】列表框中選擇】對話框的【屬性】列表框中選擇“名名稱稱”或或“HTTP-equivalent”時，其格式如下。時，其格式如下。 （1）name屬性常用的有關(guān)鍵字（屬性常用的有關(guān)鍵字（keywords）、說明）、說明（description）和作者（）和作者（author）等，作者（）等，作者（author）就是標(biāo)明網(wǎng)頁的作者名或聯(lián)系方式等信息。就是標(biāo)明

4、網(wǎng)頁的作者名或聯(lián)系方式等信息。（2）帶有）帶有http-equiv屬性的屬性的Meta標(biāo)簽是功能性標(biāo)簽，標(biāo)簽是功能性標(biāo)簽，http-equiv屬性常用的有字符集（屬性常用的有字符集（Content-Type）、）、pragma、window-target和刷新（和刷新（refresh）等。）等。字符集（字符集（Content-Type）：用于指定網(wǎng)頁使用的字符用于指定網(wǎng)頁使用的字符集，即網(wǎng)頁文檔編碼集，即網(wǎng)頁文檔編碼 。pragma：禁止瀏覽器從本地緩存中調(diào)閱頁面：禁止瀏覽器從本地緩存中調(diào)閱頁面。window-target，用于指定顯示頁面的瀏覽器窗口，用于指定顯示頁面的瀏覽器窗口。2、設(shè)置頁

5、面的關(guān)鍵字屬性設(shè)置頁面的關(guān)鍵字屬性 在菜單欄中選擇【插入】/【HTML】/【文件頭標(biāo)簽】/【關(guān)鍵字】命令，打開【關(guān)鍵字】對話框，進(jìn)行相應(yīng)的參數(shù)設(shè)置。3、設(shè)置頁面的說明屬性設(shè)置頁面的說明屬性 在菜單欄中選擇【插入】/【HTML】/【文件頭標(biāo)簽】/【說明】命令，打開【說明】對話框，進(jìn)行相應(yīng)的參數(shù)。4、設(shè)置頁面的刷新屬性設(shè)置頁面的刷新屬性 在菜單欄中選擇【插入】/【HTML】/【文件頭標(biāo)簽】/【刷新 】命令，打開【刷新 】對話框，進(jìn)行相應(yīng)的參數(shù)。5、編輯文件頭標(biāo)簽屬性編輯文件頭標(biāo)簽屬性 （1）通過源代碼修改。（2）通過【屬性】面板修改。首先在菜單欄中選擇【查看】/【文件頭內(nèi)容】命令，接著在顯示在【文

6、檔】窗口頂部的【文件頭內(nèi)容】工具欄中選擇相應(yīng)的圖標(biāo)，如選擇（刷新）圖標(biāo)，然后在【屬性】面板中設(shè)置相關(guān)屬性。3.4 3.4 添加文本和特殊對象添加文本和特殊對象添加文本添加文本插入水平線插入水平線插入日期插入日期插入注釋插入注釋3.4.1 添加文本（1）直接輸入。在文檔中，可以通過鍵盤）直接輸入。在文檔中，可以通過鍵盤（包括軟鍵盤）直接輸入文本，也可以在菜單（包括軟鍵盤）直接輸入文本，也可以在菜單欄中選擇【插入】欄中選擇【插入】/【HTML】/【特殊字符】【特殊字符】菜單中的子命令插入不換行空格、版權(quán)、商標(biāo)、菜單中的子命令插入不換行空格、版權(quán)、商標(biāo)、貨幣符號等特殊字符貨幣符號等特殊字符。（2）導(dǎo)

7、入文檔）導(dǎo)入文檔 。在。在Dreamweaver CS5中，還中，還可以通過導(dǎo)入的方法導(dǎo)入表格式數(shù)據(jù)、可以通過導(dǎo)入的方法導(dǎo)入表格式數(shù)據(jù)、Word文文檔和檔和Excel文檔等。文檔等。（3）復(fù)制粘貼）復(fù)制粘貼 。在。在Dreamweaver CS5文檔中文檔中粘貼內(nèi)容時有兩種方式：【粘貼】和【選擇性粘貼內(nèi)容時有兩種方式：【粘貼】和【選擇性粘貼】。如果選擇【編輯】粘貼】。如果選擇【編輯】/【選擇性粘貼】命【選擇性粘貼】命令，將打開【選擇性粘貼】對話框，可以在設(shè)令，將打開【選擇性粘貼】對話框，可以在設(shè)置粘貼方式后再進(jìn)行粘貼。置粘貼方式后再進(jìn)行粘貼。3.4.2 插入水平線1、插入水平線。在菜單欄中選擇

8、【插入】、插入水平線。在菜單欄中選擇【插入】/【HTML】/【水平線】命令，或在【插入】面板的【水平線】命令，或在【插入】面板的【常用】類別中，單擊【水平線】按鈕插入水平線。【常用】類別中，單擊【水平線】按鈕插入水平線。2、修改水平線屬性。選中水平線，然后在【屬性】、修改水平線屬性。選中水平線，然后在【屬性】面板中設(shè)置其屬性面板中設(shè)置其屬性 。3.4.3 插入日期1、插入日期。在菜單欄中選擇【插入】、插入日期。在菜單欄中選擇【插入】/【日【日期】命令，或在【插入】面板的【常用】類別期】命令，或在【插入】面板的【常用】類別中，單擊【日期】按鈕，打開【插入日期】對中，單擊【日期】按鈕，打開【插入日

9、期】對話框，插入日期。話框，插入日期。2、編輯日期格式。選中日期，在【屬性】面板中單、編輯日期格式。選中日期，在【屬性】面板中單擊【編輯日期格式】按鈕，重新打開【插入日期】擊【編輯日期格式】按鈕，重新打開【插入日期】對話框進(jìn)行設(shè)置對話框進(jìn)行設(shè)置。3.4.4 插入注釋1、插入注釋。在菜單欄中選擇【插入】、插入注釋。在菜單欄中選擇【插入】/【注【注釋】命令，或在【插入】面板的【常用】類別釋】命令，或在【插入】面板的【常用】類別中，單擊【注釋】按鈕，打開【插入注釋】對中，單擊【注釋】按鈕，打開【插入注釋】對話框，進(jìn)行設(shè)置。話框，進(jìn)行設(shè)置。2、編輯注釋文本。在菜單欄中選擇【編輯】、編輯注釋文本。在菜單

10、欄中選擇【編輯】/【首先【首先參數(shù)】命令，打開【首先參數(shù)】對話框，在【不可見參數(shù)】命令，打開【首先參數(shù)】對話框，在【不可見元素】分類中選中【注釋】復(fù)選框元素】分類中選中【注釋】復(fù)選框。同時確保【查看】同時確?！静榭础?【可視化助理】【可視化助理】/【不可見元素】命令已選中?！静豢梢娫亍棵钜堰x中。用鼠標(biāo)選中（注釋）標(biāo)記，在【屬性】面板中可修改用鼠標(biāo)選中（注釋）標(biāo)記，在【屬性】面板中可修改注釋文本。注釋文本。3.5 設(shè)置文本格式文檔標(biāo)題文檔標(biāo)題段落和換行段落和換行縮進(jìn)、凸出和對齊縮進(jìn)、凸出和對齊不換行空格不換行空格編號列表和項目列表編號列表和項目列表 字體、大小和顏色字體、大小和顏色粗體、斜體

11、等樣式粗體、斜體等樣式3.5.1 文檔標(biāo)題在在【屬性（【屬性（HTML）】面板的】面板的【格式【格式】下拉列表】下拉列表中選擇標(biāo)題類型。在中選擇標(biāo)題類型。在【頁面屬性【頁面屬性】對話框的】對話框的【標(biāo)【標(biāo)題題】分類中定義標(biāo)題樣式。】分類中定義標(biāo)題樣式。3.5.2 段落和換行在在【屬性（【屬性（HTML）】面板的】面板的【格式【格式】下拉列表中選擇】下拉列表中選擇“段落段落”選項，或者在菜單欄中選擇選項，或者在菜單欄中選擇【格式【格式】/【段落格式【段落格式】/【段落【段落】命令將給所選擇的文本設(shè)置段落格式。每按一次】命令將給所選擇的文本設(shè)置段落格式。每按一次Enter鍵也會另起一個段落。鍵也會

12、另起一個段落。選擇選擇【插入【插入】/【HTML】/【特殊字符【特殊字符】/【換行符【換行符】命令，】命令，或按或按Shift+Enter組合鍵，可以插入換行符。組合鍵，可以插入換行符。3.5.3 縮進(jìn)、凸出和對齊 在文檔排版過程中，有時會遇到需要使某段文本整體向內(nèi)縮進(jìn)在文檔排版過程中，有時會遇到需要使某段文本整體向內(nèi)縮進(jìn)或向外凸出的情況。選擇或向外凸出的情況。選擇【文本【文本】/【縮進(jìn)【縮進(jìn)】或】或【凸出【凸出】命令，】命令，或者單擊或者單擊【屬性【屬性】面板上的相應(yīng)按鈕，可以使段落整體向內(nèi)縮進(jìn)】面板上的相應(yīng)按鈕，可以使段落整體向內(nèi)縮進(jìn)或向外凸出。如果同時設(shè)置多個段落的縮進(jìn)和凸出，則需要先選

13、或向外凸出。如果同時設(shè)置多個段落的縮進(jìn)和凸出，則需要先選中這些段落。中這些段落。文本的對齊方式通常有文本的對齊方式通常有4種：左對齊、居中對齊、右對齊和兩端種：左對齊、居中對齊、右對齊和兩端對齊?？梢酝ㄟ^對齊?？梢酝ㄟ^【屬性【屬性】面板來設(shè)置，也可以通過】面板來設(shè)置，也可以通過【格式【格式】/【對齊【對齊】菜單中的相應(yīng)命令來實現(xiàn)。如果同時設(shè)置多個段落的對】菜單中的相應(yīng)命令來實現(xiàn)。如果同時設(shè)置多個段落的對齊方式，則需要先選中這些段落。齊方式，則需要先選中這些段落。3.5.4 不換行空格在在【首選參數(shù)【首選參數(shù)】對話框的】對話框的【常規(guī)【常規(guī)】分類中選中】分類中選中【允許多個連續(xù)【允許多個連續(xù)的空

14、格的空格】復(fù)選框，表示允許使用】復(fù)選框，表示允許使用Space（空格）鍵來輸入多個連（空格）鍵來輸入多個連續(xù)的空格，這些空格在瀏覽器中也顯示為多個空格。該選項主續(xù)的空格，這些空格在瀏覽器中也顯示為多個空格。該選項主要針對習(xí)慣于在字處理程序中鍵入的用戶。當(dāng)禁用該選項時，要針對習(xí)慣于在字處理程序中鍵入的用戶。當(dāng)禁用該選項時，使用使用Space（空格）鍵不能輸入多個連續(xù)的空格。（空格）鍵不能輸入多個連續(xù)的空格。在菜單欄中選擇在菜單欄中選擇【插入【插入】/【HTML】/【特殊字符【特殊字符】/【不換行空【不換行空格格】命令，或打開】命令，或打開【插入【插入】面板并切換到】面板并切換到【文本【文本】類別

15、，單擊】類別，單擊【字符【字符】按鈕中的向下黑箭頭打開下拉菜單，單擊】按鈕中的向下黑箭頭打開下拉菜單，單擊【不換行空【不換行空格格】按鈕，或按】按鈕，或按Ctrl+Shift+Space（空格）鍵也可添加不換行空（空格）鍵也可添加不換行空格符。不換行空格在源代碼中顯示為格符。不換行空格在源代碼中顯示為“ ”。3.5.5 編號列表和項目列表 通過以下任意一種方式將所選文本設(shè)置為編號列表或項目列表。通過以下任意一種方式將所選文本設(shè)置為編號列表或項目列表。在在【屬性【屬性】面板中單擊編號列表或項目列表按鈕?！棵姘逯袉螕艟幪柫斜砘蝽椖苛斜戆粹o。選擇選擇【格式【格式】/ /【列表【列表】/ /

16、【編號列表【編號列表】或】或【編號列表【編號列表】命令?！棵?。在在【插入【插入】面板的】面板的【文本【文本】類別中，單擊編號列表或項目列表按】類別中，單擊編號列表或項目列表按鈕。鈕。 如果對插入的列表不滿意，可以進(jìn)行修改，方法是：如果對插入的列表不滿意，可以進(jìn)行修改，方法是： 選擇選擇【文本【文本】/ /【列表【列表】/ /【屬性【屬性】命令，或在】命令，或在【屬性【屬性】面板中】面板中單擊單擊【列表項目【列表項目】按鈕，打開】按鈕，打開【列表屬性【列表屬性】對話框?！繉υ捒颉?.5.6 字體、大小和顏色文本的字體、大小和顏色，除了可以使用文本的字體、大小和顏色，除了可以使用【頁面屬性【頁面

17、屬性】對話框】對話框進(jìn)行設(shè)置外，還可以通過進(jìn)行設(shè)置外，還可以通過【屬性（【屬性（CSS）】面板和】面板和【格式【格式】菜】菜單中的相應(yīng)命令進(jìn)行設(shè)置。單中的相應(yīng)命令進(jìn)行設(shè)置。無論是使用菜單命令還是通過無論是使用菜單命令還是通過【屬性（【屬性（CSS）】面板來設(shè)置文本的】面板來設(shè)置文本的字體、大小和顏色屬性，如果是第字體、大小和顏色屬性，如果是第1次都將打開次都將打開【新建【新建CSS規(guī)則規(guī)則】對話框，在對話框，在【選擇器名稱【選擇器名稱】文本框中輸入名稱，其他選項保持默認(rèn)】文本框中輸入名稱，其他選項保持默認(rèn)即可。設(shè)置完成后，在即可。設(shè)置完成后，在【屬性（【屬性（CSS）】面板的】面板的【目標(biāo)規(guī)則【目標(biāo)規(guī)則】下拉】下拉列表中自動出現(xiàn)了樣式名稱，此時其他屬性的定義都將在此列表中自動出現(xiàn)了樣式名稱，此時其他屬性的定義都將在此CSS樣樣式中進(jìn)行，除非在式中進(jìn)行，除非在【目標(biāo)規(guī)則【目標(biāo)規(guī)則】下拉列表中選擇】下拉列表中選擇【】選項。選項。如果要對其他文本應(yīng)用該樣式，可以選中這些文本，然后在如果要對其他文本應(yīng)用該樣式，可以選中這些文本，然后在【屬性【屬性（CSS）】面板的】面板的【目標(biāo)規(guī)則【目標(biāo)規(guī)則】下拉列表中選擇該樣式，也可以在】下拉列表中選擇該樣式，也可以在【屬