Dreamweavercs6標準實例教程課件第4章文本與超鏈接

上傳人：y*** IP屬地：貴州上傳時間：2022-12-11 格式：PPTX 頁數(shù)：56 大?。?.02MB 積分：25 舉報 版權(quán)申訴

已閱讀5頁，還剩51頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第4章

文本與超鏈接第4章

文本與超鏈接1

本章將介紹文本與超級鏈接的基本知識及使用方法。內(nèi)容包括：添加普通文本、插入特殊符號和插入日期的方法；對文本的格式設(shè)置；三種超級鏈接的概念與功能；創(chuàng)建各種超級鏈接的方法，包括使用屬性面板創(chuàng)建鏈接、鏈接到文檔中指定位置、創(chuàng)建指向E-mail地址鏈接等。插入普通文本插入特殊符號和日期創(chuàng)建超鏈接虛擬鏈接與腳本鏈接學習要點本章將介紹文本與超級鏈接的基本知識及使用方法。內(nèi)容包24.1添加網(wǎng)頁文本

文字是最重要的傳遞信息的媒介。網(wǎng)頁上的信息大多都是通過文字來表達的，它們通過不同的排版方式、不同的設(shè)計風格排列在網(wǎng)頁上，提供豐富的信息。在制作網(wǎng)頁的時候，文本的創(chuàng)建與編輯占了制作工作的很大部分。能否對各種文本控制手段運用自如，是決定網(wǎng)頁設(shè)計是否美觀和富有創(chuàng)意以及提高工作效率的關(guān)鍵。4.1添加網(wǎng)頁文本文字是最重要的傳遞信息的媒介。3Dreamweavercs6標準實例教程課件第4章文本與超鏈接4Dreamweavercs6標準實例教程課件第4章文本與超鏈接5

切換到“文本”插入面板，并單擊特殊字符下拉箭頭后，就可以看到Dreamweaver自帶的特殊字符。切換到“文本”插入面板，并單擊特殊字符下拉箭頭后，就61．換行符Dreamweaver具有自動換行功能，即文本可以自動多行顯示，但是自動換行必須是在文本一行結(jié)束的時候才能夠進行。如果要在段落中實現(xiàn)強制換行的同時不改變段落的結(jié)構(gòu)，就必須插入換行符。在HTML代碼中，段落換行對應(yīng)的標簽是和，而換行符的標簽是 。插入換行符換行Enter（回車）換行1．換行符Dreamweaver具有自動換行功能，即72．插入非間斷空格

執(zhí)行“編輯”｜“首選參數(shù)”命令，然后在“常規(guī)”中確保選中“允許多個連續(xù)的空格”。2．插入非間斷空格執(zhí)行“編輯”｜“首選參數(shù)”命令，然84.1.3查找和替換文本執(zhí)行“編輯”｜“查找和替換”命令打開“查找和替換”對話框。

按Ctrl+Enter鍵或Shift+Enter鍵可以在文本搜索字段中添加換行符，從而搜索回車符。執(zhí)行此類搜索時，如果不使用正則表達式，則請取消選擇“忽略空白”選項。此搜索專門查找回車符，而不是僅查找換行符匹配項；例如，它不查找 標簽或標簽?；剀嚪凇霸O(shè)計”視圖中顯示為空格而不是換行符。4.1.3查找和替換文本執(zhí)行“編輯”｜“查找和替換”命令94.1.4插入日期

（1）將插入點放在文檔中需要插入日期的位置。

（2）切換“插入”面板中的“常用”面板。

（3）單擊“日期”按鈕，此時出現(xiàn)“插入日期”對話框。在對話框中可以選擇星期、日期、時間的顯示方式。如果讀者希望插入的日期在每次保存文檔時自動進行更新，可以選擇對話框中“儲存時自動更新”復(fù)選框。注意：插入日期對話框中顯示的日期和時間不是當前日期，也不反映訪問者在查看站點時所看到的日期/時間。它們只是說明此信息顯示方式的示例。4.1.4插入日期（1）將插入點放在文檔中需要插104.2設(shè)置文本格式4.2.1文本的屬性

DreamweaverCS6可以將多個CSS類應(yīng)用于單個元素。選擇一個元素，執(zhí)行以下方式之一打開“多類選區(qū)”對話框：

（1）在HTML屬性面板上的“類”下拉列表中選擇“應(yīng)用多個類”。

（2）在CSS屬性面板上的“目標規(guī)則”下拉列表中選擇“應(yīng)用多個類”。

（3）在“文檔”窗口底部的標簽選擇器上單擊鼠標右鍵，在彈出的下拉菜單中選擇“設(shè)置類”|“應(yīng)用多個類”。4.2設(shè)置文本格式4.2.1文本的屬性Dr114.2.2設(shè)置段落格式

使用屬性面板中的“格式”彈出菜單或“格式”｜“段落格式”子菜單可以應(yīng)用標準段落和標題標簽。對段落應(yīng)用標題標簽時，Dreamweaver自動添加下一行文本作為標準段落。若要更改此設(shè)置，請執(zhí)行“編輯”｜“首選參數(shù)”命令，然后在“常規(guī)”類別中的“編輯選項”下確保取消選中“標題后切換到普通段落”。4.2.2設(shè)置段落格式使用屬性面板中的“格式”彈124.3用CSS樣式格式化文本

使用

CSS設(shè)置頁面格式時，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容位于自身的HTML文件中，而定義代碼表現(xiàn)形式的CSS規(guī)則位于外部樣式表或HTML文檔的另一部分（通常為<head>部分）中。

執(zhí)行“窗口”｜“CSS樣式”命令，或單擊屬性面板上的“CSS”按鈕，即可打開“CSS樣式”面板。附加樣式表。新建CSS規(guī)則。編輯樣式表。刪除選中樣式表中的CSS樣式。4.3用CSS樣式格式化文本使用CSS設(shè)置頁134.3.1創(chuàng)建CSS樣式表定義要創(chuàng)建的CSS樣式的類型。注意：類名稱必須以英文字母或句點開頭，可以包含任何字母和數(shù)字組合。不可包含空格或其他標點符號。ID必須以英文字母開頭，可以包含任何字母和數(shù)字組合。不應(yīng)包含空格或其它標點符號。可選擇在名稱前添加“#”號。4.3.1創(chuàng)建CSS樣式表定義要創(chuàng)建的CSS樣式的類型。14選擇定義樣式的位置：若要創(chuàng)建外部樣式表，請選擇“新建樣式表文件”。若要在當前文檔中嵌入樣式，請選擇“僅限該文檔”。設(shè)置新CSS樣式選項：選擇定義樣式的位置：設(shè)置新CSS樣式選項：154.3.2鏈接/導入外部CSS樣式表

外部CSS樣式表是一個包含樣式和格式規(guī)范的外部文本文件。當對一個外部的CSS樣式表進行了編輯后，所有同該CSS樣式表鏈接的文檔都會根據(jù)所作的修改進行更新。在CSS樣式面板上，單擊“附加樣式表”按鈕。導入：將外部CSS樣式表的信息帶入當前文檔。鏈接：只讀取和傳送信息，不會轉(zhuǎn)移信息。4.3.2鏈接/導入外部CSS樣式表外部CSS樣164.3.3修改CSS樣式表打開“CSS樣式”面板，雙擊“所有規(guī)則”（“全部”模式下）窗格中的某條規(guī)則，或雙擊“所選內(nèi)容的摘要”（“當前”模式下）窗格中的某個屬性，彈出“CSS樣式定義”對話框。選中要修改的樣式后單擊底部的“編輯樣式表”按鈕。在“所有規(guī)則”窗格（“全部”模式下）中選擇一條規(guī)則，或在“所選內(nèi)容的摘要”窗格（“當前”模式）中選擇一個屬性，然后在下面的“屬性”窗格中編輯該規(guī)則的屬性。4.3.3修改CSS樣式表打開“CSS樣式”面板，雙擊“174.3.4CSS樣式的應(yīng)用

新建CSS規(guī)則，“選擇器類型”選擇“復(fù)合內(nèi)容”，選擇器名稱為a:link，規(guī)則定義位置為“僅限該文檔”。

新建CSS規(guī)則?！斑x擇器類型”選擇“復(fù)合內(nèi)容”，選擇器名稱為a:hover4.3.4CSS樣式的應(yīng)用新建CSS規(guī)則，“選擇184.4添加超級鏈接

超級鏈接（HyperLink）是網(wǎng)頁與網(wǎng)頁之間聯(lián)系的紐帶。通過超級鏈接的方式可以將各個網(wǎng)頁連接起來，使網(wǎng)站中眾多的頁面構(gòu)成一個有機整體，使訪問者能夠在各個頁面之間跳轉(zhuǎn)。

超級鏈接可以是一段文本，一幅圖像或其他網(wǎng)頁元素，當在瀏覽器中用鼠標單擊這些對象時，瀏覽器可以根據(jù)指示載入一個新的頁面或者轉(zhuǎn)到頁面的其他位置。4.4添加超級鏈接超級鏈接（HyperLink）194.4.1鏈接的基本知識

超級鏈接由兩部分組成，一部分是在瀏覽網(wǎng)頁時可以看到的部分，稱為超級鏈接載體，另一部分是超級鏈接所鏈接的目標。在瀏覽頁面時單擊鏈接的載體將會打開該目標。鏈接的目標可以是網(wǎng)頁、圖片、視頻或聲音和電子郵件地址等。1．URLUniformResourceLocator，中文名稱稱為統(tǒng)一資源定位符，簡單講就是網(wǎng)絡(luò)上一個站點、網(wǎng)頁的完整地址，相當于個人的通信地址。/index.htm4.4.1鏈接的基本知識超級鏈接由兩部分組成，一202．絕對路徑

絕對路徑提供鏈接文檔的完整URL，包括使用的協(xié)議（對于網(wǎng)頁通常是http://）。3．文檔相對路徑

通過指定從當前文檔到鏈接的文檔在文件夾分級結(jié)構(gòu)中所經(jīng)過的路徑。文檔相對路徑所包含的基本概念是省略對于當前文檔和鏈接的文檔都相同的絕對URL部分，而只提供不同的那部分路徑。4．根相對路徑

根相對路徑提供從站點根文件夾到文檔所經(jīng)過的路徑。如果工作于一個使用數(shù)臺服務(wù)器的大型網(wǎng)站或者一臺同時作為數(shù)個不同站點主機的服務(wù)器，那么可能需要使用根相對路徑。5．錨點（Anchor）

通過創(chuàng)建錨點，可以使鏈接指向當前文檔或者不同文檔中的指定位置。2．絕對路徑214.4.2創(chuàng)建鏈接執(zhí)行“插入”｜“超級鏈接”命令，或單擊“常用”插入面板中的“超級鏈接”按鈕_blank：將鏈接的文件載入一個未命名的新瀏覽器窗口中。_parent：將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。_self：將鏈接的文件載入該鏈接所在的同一框架或窗口中。為默認值。_top：在整個瀏覽器窗口中載入所鏈接的文件，因而會刪除所有框架?！澳繕恕睆棾鍪讲藛沃锌梢赃x擇用于打開鏈接目標的窗口。4.4.2創(chuàng)建鏈接執(zhí)行“插入”｜“超級鏈接”命令，或單擊22在屬性設(shè)置面板的“鏈接”文本框中創(chuàng)建超級鏈接。（1）在文檔窗口中選中需要建立鏈接的文本或圖像。（2）執(zhí)行“窗口”｜“屬性”命令，在屬性設(shè)置面板中單擊“鏈接”文本框后面的文件夾圖標，在彈出的文件框中選擇一個合適的文件。

或直接在屬性設(shè)置面板的鏈接文本框中輸入要鏈接文檔的路徑和文件名。還可以拖動鏈接文本框后面的按鈕指向另一個打開的文檔，或者打開文檔中的某一錨點。在屬性設(shè)置面板的“鏈接”文本框中創(chuàng)建超級鏈接。（1）在文檔窗234.4.3鏈接到文檔中的指定位置

（1）將光標放在欲設(shè)置錨點的位置，切換到“常用”插入面板。（2）單擊命名錨記圖標，打開“命名錨記”對話框，輸入錨點名稱。

錨記名稱只能包含小寫ASCII字母和數(shù)字，不能以數(shù)字開頭。如果看不到錨記標記，可選擇“查看”|“可視化助理”|“不可見元素”。錨記名稱區(qū)分大小寫。（3）選擇作為超級鏈接的文字，然后在屬性面板上的“鏈接”文本框中輸入錨點的名稱。

在屬性設(shè)置面板中的“鏈接”后的文本輸入框中，錨點名稱前面需要添加一個特殊的符號“#”。4.4.3鏈接到文檔中的指定位置（1）將光標放在244.4.4創(chuàng)建電子郵件鏈接（1）選擇需要作為郵件鏈接的文字。（2）打開屬性設(shè)置面板。在屬性設(shè)置面板的鏈接文本框中輸入郵件地址。

在屬性設(shè)置面板中的鏈接文本框中，郵件地址前面需要添加“mailto:”，表示該超級鏈接是郵件鏈接。4.4.4創(chuàng)建電子郵件鏈接（1）選擇需要作為郵件鏈接的文254.4.5創(chuàng)建空鏈接和腳本鏈接1、創(chuàng)建空鏈接

選擇欲作為空鏈接的文本，然后打開屬性設(shè)置面板。在屬性設(shè)置面板“鏈接”文本框中輸入“#”號，即可創(chuàng)建一個空鏈接，也稱作虛擬鏈接。2、創(chuàng)建腳本鏈接

選擇需要作為腳本鏈接的文本，然后打開屬性設(shè)置面板。在屬性設(shè)置面板中“鏈接”文本框中輸入腳本，如：

JavaScript:alert('您好，歡迎光臨！')單擊腳本鏈接時會彈出一個如圖所示的對話框。4.4.5創(chuàng)建空鏈接和腳本鏈接1、創(chuàng)建空鏈接選擇264.5文本與鏈接網(wǎng)頁實例4.5文本與鏈接網(wǎng)頁實例271、設(shè)置頁面屬性2、在設(shè)計視圖中輸入文字，并新建CSS規(guī)則。3、添加郵件鏈接和錨點鏈接。1、設(shè)置頁面屬性2、在設(shè)計視圖中輸入文字，并新建CSS規(guī)則。28第4章

文本與超鏈接第4章

文本與超鏈接29

文字是最重要的傳遞信息的媒介。網(wǎng)頁上的信息大多都是通過文字來表達的，它們通過不同的排版方式、不同的設(shè)計風格排列在網(wǎng)頁上，提供豐富的信息。在制作網(wǎng)頁的時候，文本的創(chuàng)建與編輯占了制作工作的很大部分。能否對各種文本控制手段運用自如，是決定網(wǎng)頁設(shè)計是否美觀和富有創(chuàng)意以及提高工作效率的關(guān)鍵。4.1添加網(wǎng)頁文本文字是最重要的傳遞信息的媒介。31Dreamweavercs6標準實例教程課件第4章文本與超鏈接32Dreamweavercs6標準實例教程課件第4章文本與超鏈接33

切換到“文本”插入面板，并單擊特殊字符下拉箭頭后，就可以看到Dreamweaver自帶的特殊字符。切換到“文本”插入面板，并單擊特殊字符下拉箭頭后，就341．換行符Dreamweaver具有自動換行功能，即文本可以自動多行顯示，但是自動換行必須是在文本一行結(jié)束的時候才能夠進行。如果要在段落中實現(xiàn)強制換行的同時不改變段落的結(jié)構(gòu)，就必須插入換行符。在HTML代碼中，段落換行對應(yīng)的標簽是和，而換行符的標簽是 。插入換行符換行Enter（回車）換行1．換行符Dreamweaver具有自動換行功能，即352．插入非間斷空格

執(zhí)行“編輯”｜“首選參數(shù)”命令，然后在“常規(guī)”中確保選中“允許多個連續(xù)的空格”。2．插入非間斷空格執(zhí)行“編輯”｜“首選參數(shù)”命令，然364.1.3查找和替換文本執(zhí)行“編輯”｜“查找和替換”命令打開“查找和替換”對話框。

（1）將插入點放在文檔中需要插入日期的位置。

（2）切換“插入”面板中的“常用”面板。

DreamweaverCS6可以將多個CSS類應(yīng)用于單個元素。選擇一個元素，執(zhí)行以下方式之一打開“多類選區(qū)”對話框：

（1）在HTML屬性面板上的“類”下拉列表中選擇“應(yīng)用多個類”。

（2）在CSS屬性面板上的“目標規(guī)則”下拉列表中選擇“應(yīng)用多個類”。

（3）在“文檔”窗口底部的標簽選擇器上單擊鼠標右鍵，在彈出的下拉菜單中選擇“設(shè)置類”|“應(yīng)用多個類”。4.2設(shè)置文本格式4.2.1文本的屬性Dr394.2.2設(shè)置段落格式

使用

執(zhí)行“窗口”｜“CSS樣式”命令，或單擊屬性面板上的“CSS”按鈕，即可打開“CSS樣式”面板。附加樣式表。新建CSS規(guī)則。編輯樣式表。刪除選中樣式表中的CSS樣式。4.3用CSS樣式格式化文本使用CSS設(shè)置頁414.3.1創(chuàng)建CSS樣式表定義要創(chuàng)建的CSS樣式的類型。注意：類名稱必須以英文字母或句點開頭，可以包含任何字母和數(shù)字組合。不可包含空格或其他標點符號。ID必須以英文字母開頭，可以包含任何字母和數(shù)字組合。不應(yīng)包含空格或其它標點符號。可選擇在名稱前添加“#”號。4.3.1創(chuàng)建CSS樣式表定義要創(chuàng)建的CSS樣式的類型。42選擇定義樣式的位置：若要創(chuàng)建外部樣式表，請選擇“新建樣式表文件”。若要在當前文檔中嵌入樣式，請選擇“僅限該文檔”。設(shè)置新CSS樣式選項：選擇定義樣式的位置：設(shè)置新CSS樣式選項：434.3.2鏈接/導入外部CSS樣式表

外部CSS樣式表是一個包含樣式和格式規(guī)范的外部文本文件。當對一個外部的CSS樣式表進行了編輯后，所有同該CSS樣式表鏈接的文檔都會根據(jù)所作的修改進行更新。在CSS樣式面板上，單擊“附加樣式表”按鈕。導入：將外部CSS樣式表的信息帶入當前文檔。鏈接：只讀取和傳送信息，不會轉(zhuǎn)移信息。4.3.2鏈接/導入外部CSS樣式表外部CSS樣444.3.3修改CSS樣式表打開“CSS樣式”面板，雙擊“所有規(guī)則”（“全部”模式下）窗格中的某條規(guī)則，或雙擊“所選內(nèi)容的摘要”（“當前”模式下）窗格中的某個屬性，彈出“CSS樣式定義”對話框。選中要修改的樣式后單擊底部的“編輯樣式表”按鈕。在“所有規(guī)則”窗格（“全部”模式下）中選擇一條規(guī)則，或在“所選內(nèi)容的摘要”窗格（“當前”模式）中選擇一個屬性，然后在下面的“屬性”窗格中編輯該規(guī)則的屬性。4.3.3修改CSS樣式表打開“CSS樣式”面板，雙擊“454.3.4CSS樣式的應(yīng)用

新建CSS規(guī)則，“選擇器類型”選擇“復(fù)合內(nèi)容”，選擇器名稱為a:link，規(guī)則定義位置為“僅限該文檔”。

新建CSS規(guī)則?！斑x擇器類型”選擇“復(fù)合內(nèi)容”，選擇器名稱為a:hover4.3.4CSS樣式的應(yīng)用新建CSS規(guī)則，“選擇464.4添加超級鏈接

超級鏈接可以是一段文本，一幅圖像或其他網(wǎng)頁元素，當在瀏覽器中用鼠標單擊這些對象時，瀏覽器可以根據(jù)指示載入一個新的頁面或者轉(zhuǎn)到頁面的其他位置。4.4添加超級鏈接超級鏈接（HyperLink）474.4.1鏈接的基本知識

絕對路徑提供鏈接文檔的完整URL，包括使用的協(xié)議（對于網(wǎng)頁通常是http://）。3．文檔相對路徑

通過創(chuàng)建錨點，可以使鏈接指向當前文檔或者不同文檔中的指定位置。2．絕對路徑494.4.2創(chuàng)建鏈接執(zhí)行“插入”｜“超級鏈接”命令，或單擊“常用”插入面板中的“超級鏈接”按鈕_blank：將鏈接的文件載入一個未命名的新瀏覽器窗口中。_parent：將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。_self：將鏈接的文件載入該鏈接所在的同一框架或窗口中。為默認值。_top：在整個瀏覽器窗口中載入所鏈接的文件，因而會刪除所有框架。“目標”彈出式菜單中可以選擇用于打開鏈接目標的窗口。4.4.2創(chuàng)建鏈接執(zhí)行“插入”｜“超級鏈接”命令，或單擊50在屬性設(shè)置面板的“鏈接”文本框中創(chuàng)建超級鏈接。（1）在文檔窗口中選中需要建立鏈接的文本或圖像。（

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

Dreamweavercs6標準實例教程課件第4章文本與超鏈接

文檔簡介

溫馨提示

最新文檔

評論

Dreamweavercs6標準實例教程課件第4章文本與超鏈接

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔