第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

2、”、“qihou.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)頁的作者名或

4、聯(lián)系方式等信息。就是標(biāo)明網(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，用于指定顯示頁面的瀏覽器窗口，用于指定顯示頁面

5、的瀏覽器窗口。2、設(shè)置頁面的關(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）通過【屬性】面板修改。首先在菜單欄中選擇【查看】/【文

6、件頭內(nèi)容】命令，接著在顯示在【文檔】窗口頂部的【文件頭內(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)、貨幣符

7、號等特殊字符貨幣符號等特殊字符。（2）導(dǎo)入文檔）導(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

8、插入水平線1、插入水平線。在菜單欄中選擇【插入】、插入水平線。在菜單欄中選擇【插入】/【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ù)選框。同時確?！静榭础客瑫r確保【查看】/【可視化助理】【可視化助理】/【不可見元素】命令已選中。【不可見元素】命令已選中。用鼠標(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è)置段落格式。每按一次【段落】命令將給所選擇的文本

12、設(shè)置段落格式。每按一次Enter鍵也會另起一個段落。鍵也會另起一個段落。選擇【插入】選擇【插入】/【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)按鈕，可以使段落整體

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

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

15、入】面板并切換到【文本】類別，單擊格】命令，或打開【插入】面板并切換到【文本】類別，單擊【字符】按鈕中的向下黑箭頭打開下拉菜單，單擊【不換行空【字符】按鈕中的向下黑箭頭打開下拉菜單，單擊【不換行空格】按鈕，或按格】按鈕，或按Ctrl+Shift+Space（空格）鍵也可添加不換行空（空格）鍵也可添加不換行空格符。不換行空格在源代碼中顯示為格符。不換行空格在源代碼中顯示為“ ”。3.5.5 編號列表和項目列表 通過以下任意一種方式將所選文本設(shè)置為編號列表或項目列表。通過以下任意一種方式將所選文本設(shè)置為編號列表或項目列表。 在在【屬性屬性】面板中單擊編號列表或項目列表按鈕。面板中單擊編號

16、列表或項目列表按鈕。 選擇選擇【格式格式】/ /【列表列表】/ /【編號列表編號列表】或或【編號列表編號列表】命令。命令。 在在【插入插入】面板的面板的【文本文本】類別中，單擊編號列表或項目列表按類別中，單擊編號列表或項目列表按鈕。鈕。 如果對插入的列表不滿意，可以進(jìn)行修改，方法是：如果對插入的列表不滿意，可以進(jìn)行修改，方法是： 選擇選擇【文本文本】/ /【列表列表】/ /【屬性屬性】命令，或在命令，或在【屬性屬性】面板面板中單擊中單擊【列表項目列表項目】按鈕，打開按鈕，打開【列表屬性列表屬性】對話框。對話框。3.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)行，除非在【目標(biāo)規(guī)則】下拉列表中選擇【式中進(jìn)行，除非在【目標(biāo)規(guī)則】下拉列表中選擇【】選項。選項。如果要對其他文本應(yīng)用該樣式，可以選中這些文本，然后在【屬性如果要對其他文本應(yīng)用該樣式，可以選中這些文本，然后在【屬性（CSS）】面板的【目標(biāo)規(guī)則】下拉列表中選擇該樣式，也可以在）】面板的【目標(biāo)規(guī)則】下拉列表中選擇該樣式，也