5.2網(wǎng)頁基本編輯頁面屬性的設置。文本的添加和設置。圖象的添加和設置。超連接。表格的添加和設置其他網(wǎng)頁元素的添加和設置?；救蝿眨?、掌握制作一個網(wǎng)頁一般步驟。2、設置網(wǎng)頁的背景顏色和背景圖片;3、網(wǎng)頁元素的添加和設置；基本知識:1、網(wǎng)頁的創(chuàng)建、打開、保存、退出；2、頁面屬性的設置（重點）;3、網(wǎng)頁元素的添加和設置；5.2.1制作網(wǎng)頁的一般過程

1、創(chuàng)建網(wǎng)頁的一般過程：(1)啟動Dreamweaver，默認站點為上次定義的站點，新建網(wǎng)頁。

(2)設置網(wǎng)頁的基本屬性。(3)在文檔工作區(qū)中輸入文字等網(wǎng)頁元素。(4)保存網(wǎng)頁在站點中。新建網(wǎng)頁步驟詳細如下：在站點窗口中選取需要新建頁面的站點文件夾，單擊鼠標右鍵，選擇“新建網(wǎng)頁”命令，出現(xiàn)一個“Untitled.htm”（無標題）文件圖標，此時在文本框內(nèi)，輸入你的文件的名字如“l(fā)ihong.htm”，最后按【Enter】鍵。2、設置網(wǎng)頁屬性頁面屬性是指網(wǎng)頁的一般屬性信息，有：1）網(wǎng)頁標題、2）網(wǎng)頁的背景顏色、3）背景圖像、等。1）設置網(wǎng)頁標題顯示在瀏覽器窗口的標題欄中。標題文字應能夠恰如其分地描述網(wǎng)頁的內(nèi)容。設置網(wǎng)頁標題的方法有：1\在“頁面屬性”對話框中的“標題”內(nèi)設置。2\在文檔窗口工具欄中的“標題”文本框內(nèi)直接輸入。2）設置背景顏色1\在“頁面屬性”對話框中的“背景顏色”內(nèi)設置。3）設置網(wǎng)頁其他屬性如果需要設置網(wǎng)頁的其他屬性，打開“頁面屬性”對話框進行設置，方法如下。（1）在文檔窗口中選擇“修改”菜單中的“頁面屬性”命令，或者按【Ctrl+J】快捷鍵，打開“頁面屬性”對話框，如圖所示。（2）設置對話框中的選項。頁面標題背景圖像背景顏色左邊界、頂部邊界、邊界寬度、邊界高度文檔編碼（3）設置完成后單擊“確定”按鈕。3、添加文本在文檔中插入文本的方法有2為：第一種是直接插入文本，步驟：1\首先在需要插入文本的區(qū)域單擊鼠標定位插入點2\然后輸入文字3\如果輸入的文字超出一行的范圍，插入的文本會自動換行。文字的詳細屬性設置下面再講。第二是將已有文件中的文本復制到文檔窗口中。步驟為：打開要復制的純文本文件，按【Ctrl+C】組合鍵將文本復制到剪貼板中，接著切換回Dreamweaver文檔窗口，在需要添加文本的區(qū)域單擊鼠標左鍵，然后選擇“編輯”菜單的“粘貼”命令（或按【Ctrl+V】快捷鍵），則選中文本即被復制到指定區(qū)域。4、添加圖形（下節(jié)要點）常用

Web圖像格式：1．GIF格式

2．JPEG格式雖然有很多種計算機圖像格式，但由于受瀏覽器的限制，在Web上常用的圖像格式只包括2種：GIF和JPEG。在Dreamweaver中插入圖像的步驟如下。（1）將光標置于要插入圖像的位置，在“插入”欄的“常用”選項卡中單擊“圖像”按鈕或選擇“插入”菜單中的“圖像”命令。（2）此時將打開“選擇圖像源”對話框，選取存放在站點中的圖像文件，最后單擊“確認”按鈕即可將圖片插入到指定區(qū)域。（3）如果所選擇的圖像文件不是站點中的文件，則將打開“MacromediaDreamweaver”對話框，如圖。提示是否將圖像文件保存到根目錄下，單擊“是”按鈕，然后打開“拷貝文件為”對話框，定位到站點中用于存放圖像文件的文件夾，此時可以為圖象重命名，最后單擊“保存”按鈕即可。（4）修改圖像屬性將圖像插入指定位置后，可以利用“屬性面板”設置圖像的屬性。5、插入其他對象。例如表格、視頻等，同樣應使用“插入欄”的“常用”選項卡中的相應按鈕插入其他對象。小結：編輯網(wǎng)頁的一般步驟：(1)啟動Dreamweaver，創(chuàng)建站點文件夾。(2)在站點文件管理面板中新建網(wǎng)頁。設置網(wǎng)頁的基本屬性（標題等）。(3)在文檔工作區(qū)中輸入文字，插入圖片等網(wǎng)頁元素。(4)保存網(wǎng)頁。思考題：1、創(chuàng)建、編輯網(wǎng)頁的一般過程；2、設置網(wǎng)頁屬性的內(nèi)容和步驟；基本任務：1、在網(wǎng)頁中文字基本編輯。

2、掌握在網(wǎng)頁中使用圖象使用表格。5.2.2網(wǎng)頁文本編輯基本知識:1、如何添加文本；2、設置各種文字字體3、圖象和文本的對齊操作。（重點）4、圖片插入的操作步驟。（重點）5、圖象屬性面版的內(nèi)容及用法。（重點）基本技能1、在網(wǎng)頁中使用圖象和設置文字。5.2.2網(wǎng)頁文本編輯1、如何添加文本2、設置文字的大小3、設置文字的顏色4、文字的換行5、插入空格6、設置各種漢字字體效果1、文本的設置1）換行在需要插入文本的區(qū)域單擊鼠標定位插入點，然后輸入文字.如果輸入的文字超出一行的范圍，插入的文本會自動換行。如果想折行顯示一段的內(nèi)容，可以按【Shift+Enter】組合鍵；2）分段如果需要開始新的一段，按【Enter】鍵即可；2、插入空格

（1）單擊插入面板“文本”項目中的“字符”下拉列表中的不換行空格圖標。（2）選擇“插入/HTML/特殊字符/不換行空格”命令。（3）按下【Crtl+Shift+Space】組合鍵。（4）切換輸入法為某種中文全角輸入法，直接按空格鍵。3、插入日期

4、其他對象的插入除了一般文本以外，如果需要在網(wǎng)頁中插入特殊字符，例如商標符號?、版權符號?、英鎊符號￡等，應該首先定位光標，然后單擊“插入欄”中的“字符”對象，再單擊相應按鈕。5、文本屬性面板的組成格式屬性字體屬性字號屬性size顏色屬性color加粗與傾斜樣式屬性對齊屬性align=center/left/right編號與項目列表減少增加縮進超鏈接框6.填加新字體的具體操作;（1）在屬性面板的“字體”下拉列表中或者在“文本/字體”菜單中選擇“編輯字體列表”項。在出現(xiàn)的“編輯字體列表”對話框右側的“可用字體”項目中選擇需要加入的字體。例如，選擇常用的“宋體”。（2）單擊左側的按鈕，字體出現(xiàn)在上面的“字體列表”框中。（3）如果需要繼續(xù)加入其他的字體，需要單擊左上角的按鈕，在“字體列表”框中就會出現(xiàn)“在以下列表中添加字體”的字樣。（4）在“可用字體”項目中選擇需要加入的字體。例如，選擇常用的“楷體”，單擊左側的按鈕。字體出現(xiàn)在“選擇的字體”和“字體列表”框中。（5）同理進行其他字體的加入。例如，加入黑體。（6）如果需要刪除字體，將字體選中后，單擊左上角的按鈕即可。（7）加入的字體出現(xiàn)在“字體”下拉列表中。思考題：1、將一種漢字字體填加到文字列表中的操作步驟。2、插入空格有那幾種？3、文本屬性面版的內(nèi)容及用法。5.2.3圖像的插入1、添加圖形常用Web圖像格式：1．GIF格式;2．JPEG格式雖然有很多種計算機圖像格式，但由于受瀏覽器的限制，在Web上常用的圖像格式只包括2種：GIF和JPEG。在Dreamweaver中插入圖像的步驟如下。（1）將光標置于要插入圖像的位置，在“插入”欄的“常用”選項卡中單擊“圖像”按鈕或選擇“插入”菜單中的“圖像”命令。（2）此時將打開“選擇圖像源”對話框，選取存放在站點中的圖像文件，最后單擊“確認”按鈕即可將圖片插入到指定區(qū)域。（3）如果所選擇的圖像文件不是站點中的文件，則將打開“MacromediaDreamweaver”提示信息框，如圖。提示是否將圖像文件保存到根目錄下，單擊“是”按鈕，然后打開“拷貝文件為”對話框，定位到站點中用于存放圖像文件的文件夾，最后單擊“保存”按鈕即可。2、圖像的編輯1)、圖像屬性面板A選中圖像。B打開“屬性面板”，設置圖像的屬性。2)、設置圖像的顯示大小a增加或減小圖像寬度和高度屬性時，圖像可能會顯示變形；b文件大小不發(fā)生變化。

c若要保持相同的縱橫比，在調(diào)整的同時按住【shift】鍵即可。3)、圖像的對齊屬性a圖像的水平對齊按鈕有：（左對齊、右對齊、居中對齊）。b同一行中既有圖像也有文字的對齊設置方式，4)、圖形邊框的設置：小技巧：在邊框屬性上默認為“無邊框”。設置一個值：可以設置圖像周圍邊線的寬度。

思考題：1、圖片插入的操作步驟。2、圖象屬性面版的內(nèi)容及用法。3、圖象的對齊操作。4、如何設置圖像周圍的邊框。5.2.4使用超鏈接本節(jié)任務：1、把三個以上關聯(lián)網(wǎng)頁鏈接起來組成一個站點。(請看：站點的最終效果：)基本知識:1、超鏈接概念；(難點)2、文本超鏈接；（重點）3、錨點鏈接；（重點）4、Email鏈接；5、空鏈接；6、圖象超鏈接；7、管理站點中的鏈接（重點）基本技能1、掌握各種超鏈接技術的使用。1.什么是超鏈接1.超鏈接的意義a網(wǎng)站是使用超鏈接把網(wǎng)頁有機地鏈起來的b超鏈接是組成網(wǎng)站的基本元素網(wǎng)頁——網(wǎng)站——WWWc超鏈接就是Web的靈魂。本節(jié)首先介紹超鏈接的基本概念，然后介紹如何創(chuàng)建和管理網(wǎng)頁中的超鏈接。2.什么是超鏈接網(wǎng)頁中的超鏈接就是以文字或圖像作為鏈接對象，然后指定一個要跳轉的網(wǎng)頁地址，當瀏覽者單擊文字或其他對象時，瀏覽器跳轉到指定的目標網(wǎng)頁。超鏈接其關鍵是使用了URL。3、URL

1）URL功能超鏈接利用URL（UniversalResourceLocator即統(tǒng)一資源定位器）定位Web上的資源。2）組成：協(xié)議計算機地址（或一個電子郵件地址等），文件地址和文件名。常用的協(xié)議包括：HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）、FTP（FileTransferProtocol，文件傳輸協(xié)議）、mailto（電子郵件協(xié)議）、news（Usenet新聞組協(xié)議）、telnet（遠程登錄協(xié)議）等。對于mailto協(xié)議，應在協(xié)議后放置一個冒號，然后跟E-mail地址；而對于常用的http和ftp等協(xié)議，則是在冒號后加兩個斜杠，斜杠之后則是相關信息的主機地址。例如，

mailto:somebody@263.net、

、

。2）絕對URL絕對URL是指Internet上資源的完整地址，包括完整的協(xié)議種類、計算機域名（所謂域名是指一個能夠反映出Web服務器實際位置的化名）和包含路徑的文檔名。其形式為：協(xié)議：//計算機域名/文檔名。如:http:///dzsw/dzsw.html。3）相對URL相對URL是指Internet上相對于當前頁面（即正在訪問的頁面）的地址，它包含從當前頁面指向目的頁面位置的路徑。例如，gl/yj.htm就是一個相對URL，它表示當前頁面所在目錄下gl子目錄中的yj.htm文檔。當使用相對URL時，可以使用與DOS文件目錄類似的兩個特殊符號：句點（.）和雙重句點（..），分別表示當前目錄和上一級目錄（父目錄）。結束1、(復習)站點內(nèi)網(wǎng)頁文件的新建操作要點1）打開站點管理器；2）用鼠標選中相應的文件夾；3）單擊鼠標右鍵新建網(wǎng)頁文件；4）雙擊該文件即可編輯該網(wǎng)頁文件。2.文本超鏈接2．創(chuàng)建文本超鏈接的步驟如下：（1）選中要創(chuàng)建超鏈接的文本；（2）單擊“屬性面板”的“鏈接”文本框旁邊的“瀏覽文件”按鈕，在站點中選擇一個文件作為超鏈接的目標文件，或者在“屬性面板”的“鏈接”文本框中輸入目標文件的URL（相對或絕對）。結束3．錨máo點超鏈接錨(anchor)點超鏈接就是在頁面的特定區(qū)域先指定一個錨點，然后創(chuàng)建一個指向錨點的超鏈接，單擊該鏈接時瀏覽器自動跳轉到錨點所在的區(qū)域。又叫書簽。；

創(chuàng)建錨點鏈接的步驟如下:（1）在文檔窗口中要插入錨點的區(qū)域定位光標，單擊“插入欄”中“常用”選項卡的“命名錨記”按鈕，在彈出的“命名錨記”對話框中輸入錨點名稱（最好使用有意義的英文字符或用漢語拼音代替），然后單擊“確定”按鈕；（2）將光標定位到文檔窗口中要跳轉到定義錨點的區(qū)域，選中文本；（3）在“屬性面板”中的“鏈接”文本框中首先輸入一個“#”號，再輸入錨點名稱（它們之間不要有空格）；（4）按【F12】鍵在瀏覽器窗口中預覽錨點的鏈接效果（注意只有在超過一屏以上的頁面中設置錨點鏈接才具有實際的意義）。結束4．電子郵件超鏈接所謂電子郵件超鏈接就是指當瀏覽者單擊該超鏈接時，系統(tǒng)會啟動客戶端電子郵件程序（例如OutlookExpress）并打開“新郵件”窗口，使訪問者能方便地撰寫電子郵件。創(chuàng)建電子郵件超鏈接的步驟如下：（1）將光標定位到需要插入電子郵件鏈接的位置。（2）在文檔窗口中的“插入欄”中單擊“電子郵件鏈接”按鈕。（3）彈出“電子郵件鏈接”對話框，在“文本”文本框中輸入用于超鏈接的文本，在“E-mail”文本框中輸入電子郵件地址，如圖。（4）單擊“確定”按鈕。結束5．空鏈接結束6.鏈接文件（下載）管理站點中的鏈接1．站點管理器是管理網(wǎng)頁的唯一管理器當站點中的鏈接逐漸增多，并且頁面都與首頁產(chǎn)生關聯(lián)后，我們可以在站點管理器中，管理網(wǎng)頁，管理鏈接。例如：把某一網(wǎng)頁的位置做一調(diào)整。2、查看網(wǎng)站的站點導航當站點中的鏈接逐漸增多，并且頁面都與首頁產(chǎn)生關聯(lián)后，就可以在站點管理器中，使用“地圖視圖”查看鏈接到首頁的導航情況，如圖。單擊圖形旁邊的“+”號，則擴展視圖，查看各種類型鏈接的情況，單擊“-”號則收縮視圖。不同的圖標表示不同的超鏈接，例如上圖中包含4種類型的超鏈接：

①站點內(nèi)部鏈接；

②站點外部鏈接；

③電子郵件鏈接；

④無效的超鏈接，即指定的目標文件不存在或是指定路徑錯誤。結束3圖像與超鏈接補充知識:1)圖形大小的設置2)網(wǎng)頁中的背景和基本圖形1．圖像超鏈接在網(wǎng)頁中指定圖像作為超鏈接非常簡單，步驟如下。（1）在文檔窗口中，單擊插入的圖像，然后在“屬性檢查器”中的“鏈接”文本框旁單擊“瀏覽文件”按鈕。（2）打開“選擇文件”對話框，定位到要跳轉的文件后單擊“確認”按鈕即可。2．圖像映射（map/hot）

圖像映射就是指在一幅圖像中定義若干個區(qū)域（這些區(qū)域被稱為熱點），每個區(qū)域中指定一個不同的超鏈接，當單擊不同區(qū)域時可以跳轉到相應的目標頁面。3.動態(tài)圖像效果通常網(wǎng)頁中的動態(tài)圖像效果需要編寫JavaScript腳本程序才能獲得，不過Dreamweaver

能夠使用戶不用編寫一行代碼，就能生成某些很好的圖像效果，例如鼠標經(jīng)過圖像、網(wǎng)站相冊等。(行為中再講)結束思考題：1、在Target（目標）下拉列表框中，_blank，_parent，_self，_top的含義。2、什么是絕對URL,相對URL，URL的協(xié)議有哪些？3、創(chuàng)建錨點鏈接的步驟？4、圖象屬性面版所有屬性的含義？5、不同的圖標表示不同的超鏈接。實驗八、使用超連接一、實驗目的：運用DW創(chuàng)建網(wǎng)站（網(wǎng)頁編輯技術的綜合利用）。二、實驗內(nèi)容：1、

文本超連接；2、

圖象超連接；3、

e-mail超連接；4、

錨點超連接5、

空連接；6、圖像翻轉；三、實驗步驟：（略）5.2.5使用表格表格基本知識點:1、表格、單元格的一些概念2、表格的插入、表格嵌套（難點）；3、在表格中插入各種網(wǎng)頁元素4、表格的選定及狀態(tài)5、表格屬性設置6、表格的對齊1.表格及其操作1、表格的幾個概念：表格<table>，單元格<td>行<tr>單元格邊距，單元格間距說明：表格是增加數(shù)據(jù)與圖片的強大工具，提供了在頁面增加水平與垂直結構的網(wǎng)頁設計方法。2、插入表格操作方法：

a.在對象面板上插入“表格”按鈕,會出現(xiàn)對話框