網(wǎng)頁編輯和超級鏈接.ppt

《網(wǎng)頁編輯和超級鏈接.ppt》由會員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁編輯和超級鏈接.ppt（38頁珍藏版）》請在裝配圖網(wǎng)上搜索。

第三章網(wǎng)頁編輯和超級鏈接3.1網(wǎng)頁文檔的格式化3.2插入對象3.3超級鏈接的應(yīng)用3.4應(yīng)用實例,DREAMWEAVER,3.1網(wǎng)頁文檔的格式化文字是網(wǎng)頁中最基本的頁面元素占用存儲空間小傳遞信息的主要載體網(wǎng)頁文檔格式化是一種修飾頁面文字的操作，DW文字格式化主要有兩種方式：用HTML標(biāo)記格式化,DREAMWEAVER,用CSS樣式格式化CSS樣式是一種對網(wǎng)頁文檔內(nèi)容進(jìn)行精確格式化的方法，它可以使用許多HTML樣式不能使用的屬性。CSS樣式還可以同時對多篇文檔格式化，可將創(chuàng)建好的樣式保存在外部樣式表中，若修改樣式表，便可對相關(guān)網(wǎng)頁進(jìn)行相應(yīng)的更新，從而實現(xiàn)對文本格式化的自動化管理兩種格式化方法的優(yōu)先級HTML標(biāo)記>CSS樣式關(guān)于插入文本Dreamweaver允許您通過以下方式在Web頁中添加文本：直接將文本鍵入頁中，從其他文檔復(fù)制和粘貼文本，或從其他應(yīng)用程序拖放文本。(ASCII文本文件、RTF文件和MSOffice文檔),DREAMWEAVER,關(guān)于插入文本將文本添加到文檔中直接在“文檔”窗口中鍵入文本。從其他應(yīng)用程序中復(fù)制文本，切換到Dreamweaver，將插入點定位在“文檔”窗口的“設(shè)計”視圖中，然后選擇“編輯”>“粘貼”。Dreamweaver不保留在其他應(yīng)用程序中應(yīng)用的文本格式，但它保留換行符。從MSOffice文檔復(fù)制和粘貼文本W(wǎng)ord或Excel文檔的內(nèi)容可添加到新的或現(xiàn)有的Web頁中Dreamweaver將文件轉(zhuǎn)換為HTML后，其大小必須小于300K如果使用MicrosoftOffice97，您將無法添加Word或Excel文檔的內(nèi)容，您必須插入指向該文檔的鏈接若要將Word或Excel文檔的內(nèi)容添加到新的或現(xiàn)有的Web頁中，執(zhí)行以下操作：,DREAMWEAVER,1、打開您要將Word或Excel文件的內(nèi)容復(fù)制到的目標(biāo)Web頁2、執(zhí)行以下操作之一以選擇文件：將文件從當(dāng)前位置拖放到希望在其中顯示內(nèi)容的頁中。如果出現(xiàn)“插入MicrosoftWord或Excel文檔”對話框，單擊“插入將文檔的內(nèi)容插入到此Web頁中”，然后單擊“確定”。選擇“文件”>“導(dǎo)入”>“Word文檔或文件”>“導(dǎo)入”>“Excel文檔”。在“打開”對話框中，瀏覽到要添加的文件，然后單擊“打開”插入指向Word或Excel文檔的鏈接若要創(chuàng)建指向Word或Excel文檔的鏈接，請執(zhí)行以下操作：打開希望在其中顯示鏈接的頁。將文件從當(dāng)前位置拖放到希望在其中顯示鏈接的Dreamweaver頁中。出現(xiàn)“插入MicrosoftWord或Excel文檔”對話框。,DREAMWEAVER,選擇“創(chuàng)建鏈接”，然后單擊“確定”。如果正在創(chuàng)建的鏈接所指向的文檔位于站點的根文件夾以外，Dreamweaver將提示您將文檔復(fù)制到站點根文件夾。通過將文檔復(fù)制到站點的根文件夾，可以確保發(fā)布Web站點時該文檔可用。指向Word或Excel文檔的鏈接出現(xiàn)在頁中,DREAMWEAVER,3.1.1用HTML標(biāo)記格式化文本應(yīng)用實例：制作一個符合下列要求的網(wǎng)頁文件。將word文件oa.doc轉(zhuǎn)換成HTML文件oa.htm在新的網(wǎng)頁頁面中導(dǎo)入HTML文件oa.htm，并設(shè)置頁面背景圖片為bg0052.gif添加標(biāo)題“辦公自動化”，將其格式設(shè)置為Heading1、紅色、居中、加粗用HTML標(biāo)記heading2~heading6分別格式化后5段文字，并給這些文字設(shè)置不同顏色將網(wǎng)頁一oa.htm為名保存在本地站點的根文件夾myweb中,DREAMWEAVER,3.1.3設(shè)置段落格式和文檔結(jié)構(gòu)1.設(shè)置段落格式2.對齊文本3.縮進(jìn)文本使用“縮進(jìn)”命令可以將blockquoteHTML標(biāo)簽應(yīng)用于文本段落，縮進(jìn)頁面兩側(cè)的文本。縮進(jìn)文本和取消縮進(jìn)：1將插入點放在要縮進(jìn)的段落中。2單擊屬性檢查器中的“縮進(jìn)”或“凸出”按鈕，選擇“文本”>“縮進(jìn)”或“凸出”，或從上下文菜單中選擇“列表”>“縮進(jìn)”或“凸出”。注意：可以對段落應(yīng)用多重縮進(jìn)。每選擇一次該命令，文本就從文檔的兩側(cè)進(jìn)一步縮進(jìn)。,DREAMWEAVER,4.添加段落間距添加段落換行添加換行符5.使用水平線水平線對于組織信息很有用。在頁面上，可以使用一條或多條水平線以可視方式分隔文本和對象。6.創(chuàng)建項目列表和編號列表若要創(chuàng)建新列表，請執(zhí)行以下操作：1在Dreamweaver文檔中，將插入點放在要添加列表的位置，然后執(zhí)行下列操作之一：單擊屬性檢查器中的“項目列表”或“編號列表”按鈕。選擇“文本”>“列表”，然后選擇所需的列表類型：“不排序（項目）列表”、“排序（編號）列表”或“定義列表”。2鍵入列表項文本，然后按Enter鍵,DREAMWEAVER,使用現(xiàn)有文本創(chuàng)建列表：1選擇一系列段落組成一個列表。2單擊屬性檢查器中的“項目列表”或“編號列表”按鈕，或選擇“文本”>“列表”，然后選擇所需的列表類型：“不排序列表”、“排序列表”或“定義列表”創(chuàng)建嵌套列表：1選擇要嵌套的列表項。2單擊屬性檢查器中的“縮進(jìn)”按鈕，或選擇“文本”>“縮進(jìn)”。3按照以上使用的同一過程，對縮進(jìn)的文本應(yīng)用新的列表類型或樣式。,DREAMWEAVER,3.2插入對象3.2.1插入水平線3.2.2插入日期Dreamweaver提供了一個方便的日期對象，該對象使您可以以任何喜歡的格式插入當(dāng)前日期（包含或不包含時間都可以），您可以選擇在每次保存文件時都自動更新該日期。注意：“插入日期”對話框中顯示的日期和時間不是當(dāng)前日期，也不反映訪問者在顯示您的站點時所看到的時期/時間。它們只是說明此信息的顯示方式的示例。將當(dāng)前日期插入到文檔中：1在“文檔”窗口中，將插入點放在要插入日期的位置。2執(zhí)行下列操作之一：選擇“插入”>“日期”。在“插入”欄的“常用”類別中，單擊“日期”按鈕。,DREAMWEAVER,3在出現(xiàn)的對話框中，選擇星期格式、日期格式和時間格式。4如果希望在每次保存文檔時都更新插入的日期，請選擇“儲存時自動更新”。如果希望日期在插入后變成純文本并永遠(yuǎn)不自動更新，請取消選擇該選項。5單擊“確定”插入日期。提示：如果選擇了“儲存時自動更新”，則在日期格式插入到文檔中后可以對其進(jìn)行編輯，方法是單擊已設(shè)置格式的文本，然后在屬性檢查器中選擇“編輯日期格式”3.2.3插入特殊字符3.2.4在字符之間添加空格HTML只允許字符之間包含一個空格；若要在文檔中添加其他空格，必須插入連續(xù)空格。可以設(shè)置一個在文檔中自動添加連續(xù)空格的參數(shù)選擇。,DREAMWEAVER,若要插入連續(xù)空格，請執(zhí)行下列操作之一：1.在“插入”欄中的“文本”類別中，單擊“字符”按鈕選擇“插入連續(xù)空格”。2.選擇“插入”>“HTML”>“特殊字符”>“連續(xù)空格”。3.按Control+Shift+空格鍵若要設(shè)置添加連續(xù)空格的參數(shù)，請執(zhí)行以下操作：1選擇“編輯”>“首選參數(shù)”(Windows)2在“常規(guī)”類別中確保選中“允許多個連續(xù)的空格”。3.2.5插入Flash按鈕和Flash文字在DW中，利用內(nèi)置的Flash按鈕和文字，可以直接在網(wǎng)頁上制作出有動態(tài)效果的Flash按鈕和文字若要在網(wǎng)頁上插入Flash按鈕，請執(zhí)行以下操作1在網(wǎng)頁中選擇Flash按鈕插入點的位置,DREAMWEAVER,2在網(wǎng)頁編輯窗口中選擇“插入|交互式圖像|Flash按鈕”命令，此時系統(tǒng)打開插入Flash按鈕對話框。3單擊OK按鈕后，就會產(chǎn)生一個“.SWF”格式的文件，文件會被自動導(dǎo)入當(dāng)前正在編輯的網(wǎng)頁中。4在網(wǎng)頁中選中此按鈕，可以設(shè)置該按鈕的屬性若要在網(wǎng)頁上插入Flash文字，請執(zhí)行以下操作：1在網(wǎng)頁中選擇Flash文字的插入位置2在網(wǎng)頁編輯窗口中選擇“插入|交互式圖像|Flash文本”命令，此時系統(tǒng)打開插入Flash文本對話框。3單擊OK按鈕后，就會產(chǎn)生一個“.SWF”格式的文件，文件會被自動導(dǎo)入當(dāng)前正在編輯的網(wǎng)頁中。在網(wǎng)頁上插入Flash按鈕和文字，不用安裝和使用Flash系統(tǒng)，就可以給網(wǎng)頁增添動態(tài)效果,DREAMWEAVER,3.2.6插入Rollover圖片Rollover圖片是由主圖片(OriginalImage)和翻轉(zhuǎn)圖片(RolloverImage)兩部分組成。頁面載入后，先顯示主圖片，當(dāng)鼠標(biāo)移到主圖片上方時，圖片內(nèi)容發(fā)生變化，自動更新為翻轉(zhuǎn)圖片，鼠標(biāo)移出時，圖片又恢復(fù)原樣。制作Rollover圖片是應(yīng)準(zhǔn)備兩幅尺寸相同的圖片。若兩幅圖片尺寸不同的話，將調(diào)整第2幅圖片如何在網(wǎng)頁上插入Rollover圖片,DREAMWEAVER,3.3超級鏈接的應(yīng)用3.3.1超級鏈接概述用預(yù)先準(zhǔn)備好的文本、按鈕、圖像等對象與其他對象建立一種鏈接，也就是在源端點和目標(biāo)端點建立一種鏈接。超級鏈接的劃分：,DREAMWEAVER,源端點,超文本：文本下方有下劃線非超文本：文本之外的其他對象構(gòu)建的鏈接,,目標(biāo)端點,外部鏈接內(nèi)部鏈接電子郵件鏈接局部鏈接、腳本鏈接,,相對路徑與絕對路徑3.3.2創(chuàng)建超級鏈接使用屬性檢查器鏈接到文檔屬性檢查器文件夾圖標(biāo)和“鏈接”文本框可用于創(chuàng)建從圖像、對象或文本到其它文檔或文件的鏈接。關(guān)于屬性檢查器中的“目標(biāo)”_blank將鏈接的文檔載入一個新的、未命名的瀏覽器窗口。_parent將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。_self將鏈接的文檔載入鏈接所在的同一框架或窗口。_top將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架。,DREAMWEAVER,使用完整的URL的地址的鏈接路徑稱為絕對路徑，它指明了目標(biāo)的具體位置指明目標(biāo)端點與原端點的相對位置關(guān)系的路徑成為相對路徑,,使用“指向文件”圖標(biāo)鏈接文檔“指向文件”圖標(biāo)可用于創(chuàng)建從圖像、對象或文本到其它文檔或文件的鏈接。若要使用“指向文件”圖標(biāo)鏈接文檔，請執(zhí)行以下操作：1在“文檔”窗口的“設(shè)計”視圖中選擇文本或圖像。2拖動屬性檢查器中“鏈接”文本框右側(cè)的“指向文件”圖標(biāo)，然后指向另一個打開的文檔、已打開文檔中的可見錨記或者指向“文件”面板中的一個文檔。注意：只有當(dāng)“文檔”窗口中的文檔未最大化時，才能鏈接到打開的文檔。如果指向打開的文檔，則在進(jìn)行選擇時，該文檔移至屏幕的最前面。3釋放鼠標(biāo)按鈕。使用站點地圖鏈接文檔,DREAMWEAVER,3.3.3管理鏈接為避免站點中出現(xiàn)斷開的鏈接，可以激活鏈接管理，使Dreamweaver在您作出更改后自動更新鏈接。也可以使用站點的可視化表示形式來修改鏈接，或者，可以通過一次更改將所有鏈接更新到一個特定的文件中。自動更新鏈接每當(dāng)在本地站點內(nèi)移動或重命名文檔時，Dreamweaver可更新起自以及指向該文檔的鏈接。當(dāng)將整個站點（或其中完全獨立的一個部分）存儲在本地硬盤上時，此項功能最實用。Dreamweaver不更改遠(yuǎn)程文件夾中的文件，除非將這些本地文件放在或者存回到遠(yuǎn)程服務(wù)器上。若要在Dreamweaver中啟用鏈接管理，請執(zhí)行以下操作：,DREAMWEAVER,1選擇“編輯”>“首選參數(shù)”(Windows)“首選參數(shù)”對話框出現(xiàn)。2從左側(cè)的分類列表中選擇“常規(guī)”。出現(xiàn)“常規(guī)”首選參數(shù)選項。3在“文檔選項”部分，從“移動文件時更新鏈接”彈出菜單中選擇“總是”或者“提示”。若選擇“總是”，則每當(dāng)移動或重命名選定文檔時，Dreamweaver將自動更新起自和指向該文檔的所有鏈接。在站點地圖中修改鏈接可以通過在站點地圖中添加、更改和刪除鏈接來修改站點的結(jié)構(gòu)。Dreamweaver自動更新站點地圖以顯示對站點所做的更改。若要更改鏈接，請執(zhí)行以下操作：1在站點地圖中，選擇要更改的鏈接所指向的頁面,DREAMWEAVER,選擇“站點”>“更改鏈接”右鍵單擊，然后從上下文菜單中選擇“更改鏈接”。2通過瀏覽找到希望鏈接指向的文件，或者鍵入URL。3.3.4創(chuàng)建錨點鏈接在網(wǎng)頁設(shè)計中，要創(chuàng)建某個網(wǎng)頁的某個指定位置的超鏈接稱為創(chuàng)建錨點的鏈接。命名錨記使您可以在文檔中設(shè)置標(biāo)記，這些標(biāo)記通常放在文檔的特定主題處或頂部。然后可以創(chuàng)建到這些命名錨記的鏈接，這些鏈接可快速將訪問者帶到指定位置。創(chuàng)建到命名錨記的鏈接的過程分為兩步。首先，創(chuàng)建命名錨記，然后創(chuàng)建到該命名錨記的鏈接。若要創(chuàng)建命名錨記，請執(zhí)行以下操作：1.在“文檔”窗口的“設(shè)計”視圖中，將插入點放在需要命名錨記的地方。,DREAMWEAVER,2執(zhí)行下列操作之一：選擇“插入”>“命名錨記”。按下Control+Alt+A在“插入”欄的“常用”類別中，單擊“命名錨記”按鈕。3在“錨記名稱”文本框中，鍵入錨記的名稱，并單擊“確定”。注意：如果看不到錨記標(biāo)記，可選擇“查看”>“可視化助理”>“不可見元素”。若要鏈接到命名錨記，請執(zhí)行以下操作：1在“文檔”窗口的“設(shè)計”視圖中，選擇要從其創(chuàng)建鏈接的文本或圖像。2在屬性檢查器的“鏈接”文本框中，鍵入一個數(shù)字符號(#)和錨記名稱。注意：錨記名稱區(qū)分大小寫。,DREAMWEAVER,3.3.5創(chuàng)建電子郵件鏈接3.3.6創(chuàng)建導(dǎo)航條導(dǎo)航條由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶操作而變化。使用“插入導(dǎo)航條”命令之前，須首先為各個導(dǎo)航項目的顯示狀態(tài)創(chuàng)建一組圖像。（可將導(dǎo)航條項目視為按鈕，因為單擊它時，導(dǎo)航條項目將用戶帶到其它頁面。為文檔創(chuàng)建導(dǎo)航條后，可使用“修改導(dǎo)航條”命令向?qū)Ш綏l添加圖像，或從導(dǎo)航條中刪除圖像。此命令可用于更改圖像或圖像組、更改單擊項目時所打開的文件、選擇在不同的窗口或框架中打開文件以及重新排序圖像。,DREAMWEAVER,插入導(dǎo)航條插入導(dǎo)航條時，須命名導(dǎo)航條項目，并選擇要用于它們的圖像。若要創(chuàng)建導(dǎo)航條，請執(zhí)行以下操作：1.選擇“插入”>“圖像對象”>“導(dǎo)航條”2完成對話框。3.3.7創(chuàng)建跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單是文檔中的彈出菜單，對站點訪問者可見，并列出鏈接到文檔或文件的選項。可以創(chuàng)建到整個Web站點內(nèi)文檔的鏈接、到其它Web站點上文檔的鏈接、電子郵件鏈接、到圖形的鏈接。跳轉(zhuǎn)菜單可包含三個基本部分：（可選）菜單選擇提示，如菜單項的類別說明，或一些指導(dǎo)信息等，例如“選擇其中一項：”（必需）所鏈接菜單項的列表：用戶選擇某個選項，則鏈接的文檔或文件被打開。（可選）“前往”按鈕。,DREAMWEAVER,3.4應(yīng)用實例,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,,DREAMWEAVER,