【導(dǎo)讀】初步具備小型網(wǎng)站創(chuàng)建與管理及網(wǎng)頁制作的基本能力。2掌握中文DreamweaverCS5進(jìn)行網(wǎng)頁設(shè)計(jì)制作的相關(guān)知識。譽(yù)殿堂、風(fēng)采圖片、文體天地、學(xué)習(xí)園地、支部生活。間為主頁主體區(qū)，主體區(qū)又分為左右兩部分，左邊窄，用堅(jiān)式結(jié)構(gòu)放置導(dǎo)航欄。右邊寬，存放班級簡介等內(nèi)容。用于存放版權(quán)聲明信息。設(shè)計(jì)網(wǎng)頁盡寸：選擇1024×768規(guī)格,實(shí)際尺寸為：980×***，(***代表768的倍。寬度最好限定在一個幅面內(nèi)，長度一般是不超過3個版面。本地站點(diǎn)文件夾用以確定存放所有站點(diǎn)文件的存儲位置。在桌面雙擊“我的電腦”圖標(biāo)；英文輸入法狀態(tài)下輸入站點(diǎn)名稱。后在空白處單擊確定。標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件”命令。啟動FireworksCS5，選擇畫布寬度為980，高度為80，畫布顏色自定義為黑色。按鈕，進(jìn)入到Firework主界面。色為白色，字體為黑體。執(zhí)行“文件”菜單中的“圖像預(yù)覽”命令，設(shè)置文件格式為GIF，單擊“導(dǎo)出”按鈕。

　　

【正文】 確定 】 按鈕，會彈出“圖像標(biāo)簽輔助功能屬性”對話框。在這里可以設(shè)置當(dāng)圖像不能正常顯示出來時(shí)的替代文本。在這里，我們輸入“已所不欲，勿施于人”。 ? （操作演示） ? ⑤ 最后保存網(wǎng)頁，按下快捷鍵 F12,查看網(wǎng)頁效果，如“插入圖像的網(wǎng)頁效果圖 ”所示。 知識點(diǎn) 15 Dreamweaver中圖像及應(yīng)用 插入圖像的網(wǎng)頁效果 知識點(diǎn) 15 Dreamweaver中圖像及應(yīng)用 ? (2) 設(shè)置圖像屬性 ? 有時(shí)侯，插入的圖像并不能很好的在網(wǎng)頁中顯示，這時(shí)需要對插入的圖像進(jìn)行相應(yīng)的屬性設(shè)置。圖像的屬性一般有大小，邊框，替換文本等。下面我們看看如何對插入的圖像進(jìn)行大小的調(diào)整，邊框的設(shè)置，及替換文本的更改。 ? 要調(diào)整圖像的大小，有兩種方法。一是選中圖像，在圖像四周會出現(xiàn)調(diào)整圖像大小的控制點(diǎn)，拖動控制點(diǎn)可調(diào)整圖像的大小。一是選中圖像，在“屬性面板”中的寬，高中設(shè)置圖像的大小。 知識點(diǎn) 15 Dreamweaver中圖像及應(yīng)用 ? 【 實(shí)例 18】 設(shè)置圖像的屬性 ? 操作步驟如下： ? ① 選中圖像，在圖像四周出現(xiàn)調(diào)整大小的控制點(diǎn)，（操作演示） ? ② 此時(shí)若要調(diào)整圖像的寬度，請拖動右側(cè)的選擇控制點(diǎn)。若要調(diào)整元素的高度，請拖動底部的選擇控制點(diǎn)。若要同時(shí)調(diào)整元素的寬度和高度，請拖動頂角的選擇控制點(diǎn)。 若要在調(diào)整元素尺寸時(shí)保持元素的比例（其寬高比），請?jiān)诎醋? Shift 鍵的同時(shí)拖動頂角的選擇控制點(diǎn)。（操作演示） ? ③ 用調(diào)整大小控制點(diǎn)最小可以將元素大小調(diào)整到 8 x 8 像素。若要將元素的寬度和高度調(diào)整到更小的大?。ɡ? 1 x 1 像素），那么只有在“屬性面板“輸入相應(yīng)的數(shù)值。（操作演示） ? ④當(dāng)調(diào)整了圖像的大小后，“屬性面板”的“寬”“高”文本框后會出 【 恢復(fù)原樣 】 按鈕，當(dāng)我們想把調(diào)整后的圖像恢復(fù)到原圖大小時(shí)，可以使用此按鈕。（操作演示） 知識點(diǎn) 15 Dreamweaver中圖像及應(yīng)用 ? (3) 設(shè)置網(wǎng)頁背景圖片 ? 而網(wǎng)頁背景圖的插入與一般圖像的插入有所區(qū)別，網(wǎng)頁背景是對整個網(wǎng)頁而言，需要操作網(wǎng)頁，而一般圖像的插入僅僅是對插入的某個區(qū)域做設(shè)置。 ? 【 實(shí)例 19】 設(shè)置網(wǎng)頁背景。 ? 操作步驟如下： ? ① 在網(wǎng)頁空白位置單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“頁面屬性”菜單命令，或是在“屬性面板”中單擊【 頁面屬性 】 按鈕。打開“頁面屬性”對話框，（操作演示） ? ② 在“頁面屬性”對話框設(shè)置“背景圖像”，選擇“瀏覽 …“ 按鈕選擇背景圖片。 ? ③ 在“頁面屬性”對話框中設(shè)置“重復(fù)”選項(xiàng)，選擇“ repeat”。 ? ④ 單擊“確定”按鈕，這樣網(wǎng)頁背景就設(shè)置好了。 知識點(diǎn) 16 Dreamweaver中超級鏈接的概念與基本應(yīng)用 ? 1．熟悉超鏈接的概念 ? 超鏈接可以實(shí)現(xiàn)從一個網(wǎng)頁跳轉(zhuǎn)到另一個頁面，也可以從一個頁面跳轉(zhuǎn)到同頁面的其它位置。它包含一個鏈接對象（文本、圖像或其它對象）和一個目標(biāo)地址（即目標(biāo)頁面或?qū)ο螅?。根?jù)鏈接對象的不同，可以將超鏈接劃分為兩種：超文本(Hypertext)和超鏈接 (Hyperlink)。超文本就是鏈接對象是文本的鏈接。而超鏈接是利用文本以外的對象作為鏈接對象所創(chuàng)建的鏈接。對于超鏈接來說，重要的是要弄清楚鏈接的路徑，鏈接路徑分為絕對路徑和相對路徑。 知識點(diǎn) 16 Dreamweaver中超級鏈接的概念與基本應(yīng)用 ? (1) 絕對路徑 ? 絕對路徑是從保存網(wǎng)頁的磁盤根目錄開始，一級一級的列出文件所在的路徑。例如文件 “ E:\class\”，那么在瀏覽器中如輸入這個路徑” E:\class\”，瀏覽器將會搜索本地磁盤驅(qū)動器，找到文件后，以物理地址的形式顯示在瀏覽器中， （操作演示）。 ? 但絕對路徑存在兩個缺點(diǎn)： ? ① 這種絕對路徑的鏈接不利于測試。因?yàn)樵谡军c(diǎn)中使用了絕對地址后，要想測試鏈接是否有效，必須在 Inter服務(wù)器上對鏈接進(jìn)行測試； ? ② 當(dāng)站點(diǎn)移動位置的時(shí)侯，有些鏈接就失效了，不利于站點(diǎn)的移植。 知識點(diǎn) 16 Dreamweaver中超級鏈接的概念與基本應(yīng)用 ? (2) 相對路徑 ? 相對路徑是指相對于當(dāng)前目錄的路徑，而不是使用本地磁盤的路徑。使用相對路徑可以為我們帶來非常多的便利。相對路徑根據(jù)錄前目錄的不同，對同一個文件有幾種表示方法，以文件 ，如“ ”圖所示 ， 件夾 e:/class/html下 ,當(dāng)前目錄在不同位置表示 法如下： ? 當(dāng)前目錄在 ： ? 當(dāng)前目錄在 image下表示為： ../html/ ? 當(dāng)前目錄在站點(diǎn)根目錄 e:/class下表示為： html/ ? 當(dāng)前目錄為 E盤根目錄，則表示為 /class/html/ 知識點(diǎn) 16 Dreamweaver中超級鏈接的概念與基本應(yīng)用 ? 2. 在網(wǎng)頁中使用超鏈接 ? 超鏈接的使用很簡單，在 Dreamweaver中只需要選擇鏈接到的頁面或位置即可 ? 【 實(shí)例 110】 為班班風(fēng)采網(wǎng)站設(shè)置文字超鏈接。 ? 其操作步驟如下： ? ① 選擇文字“榮譽(yù)殿堂”，在“屬性面板”中左鍵按下“鏈接”后的【 瀏覽文件 】 按鈕，在出現(xiàn)的“選擇文件”,如圖“選擇文件”對話框 所示。 （操作演示） ? ② 單擊“確定”按鈕后即實(shí)現(xiàn)了文本“榮譽(yù)殿堂”與文件 之間的超鏈接。 ? ③ 單擊屬性面板中“目標(biāo)”選項(xiàng)后的下拉按鈕，選擇“ _blank”。“目標(biāo)”選項(xiàng)主要表示單擊了超鏈接后在什么地方打開目標(biāo)網(wǎng)頁。 ? _blank：表示在一個新頁面中打開目標(biāo)頁 ? _self：表示在本頁面打開目標(biāo)頁 ? _parent：表示在父窗口中打開目標(biāo)頁 ? _top:表示在上一級框架或頁面中打開目標(biāo)頁 知識點(diǎn) 16 Dreamweaver中超級鏈接的概念與基本應(yīng)用 知識點(diǎn) 16 Dreamweaver中超級鏈接的概念與基本應(yīng)用 “選擇文件”對話框 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 ? 1. 創(chuàng)建表格 ? 表格由表格標(biāo)題、行、列、列標(biāo)題、單元格組成，行與列的交叉稱為單元格，單元格用來填入內(nèi)容。表格顯示如圖“表格的組成 ”所示。 ? 在 Dreamweaver中創(chuàng)建表格很簡單，它會根據(jù)輸入的行和列的要求自動創(chuàng)建一個簡單的表格， ? 【 實(shí)例 111】 創(chuàng)建一表格，用于統(tǒng)計(jì)中國主要城市人口、經(jīng)濟(jì)數(shù)據(jù)。 ? 操作步驟如下： ? ① 創(chuàng)建新網(wǎng)頁，保存網(wǎng)頁名稱為 ，并將光標(biāo)移到要插入表格的位置。 ? ② 鼠標(biāo)左鍵單擊插入面板中“常用”工具欄上的 【 表格 】按鈕，打開“表格”對話框 ,如圖“表格對話框“所示。（操作演示） 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 表格的組成 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 “表格”對話框 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 ? ③ “表格”對話框用來輸入創(chuàng)建表格的信息，圖中的各個部分的含義如下所示： ? 行數(shù)：表格的行 ? 列數(shù)：表格的列 ? 表格寬度：表格在網(wǎng)頁中的寬度，可以使用像素，也可以使用百分比表示。 ? 邊框粗細(xì)：表格的邊框占多少像素，一般在網(wǎng)頁中使用 0像素，表示沒有邊框。 ? 單元格邊距：單元格內(nèi)容與邊框的距離。 ? 單元格間距：單元格與單元格之間的距離。 ? “標(biāo)題”區(qū)域：設(shè)置表格標(biāo)題位置。 ? “標(biāo)題”文本框：表格的標(biāo)題內(nèi)容。 ? 摘要：備注信息。 ? ④ 創(chuàng)建表格，在表格對話框中行數(shù)輸入“ 3”，列數(shù)輸入“ 10”，邊框粗細(xì)輸入“ 1”，頁眉選擇“頂部”，標(biāo)題輸入“中國主要城市人口、經(jīng)濟(jì)數(shù)據(jù)統(tǒng)計(jì)”，（操作演示） ? ⑤ 單擊 【 確定 】 按鈕，生成表格，（操作演示） ? ⑥ 在表格中輸入數(shù)據(jù)，然后按下快捷鍵 F12瀏覽網(wǎng)頁，如圖”瀏覽表格“所示。 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 瀏覽表格 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 ? 2. 編輯表格 ? 對于創(chuàng)建的表格，如果它不再滿足現(xiàn)有的需求，可以對表格進(jìn)行相關(guān)的編輯，讓表格重新適應(yīng)需求的改變。表格的編輯主要涉及到行的增加、列的增加，行的刪除，列的刪除，及單元格的合并與拆分。 ? (1) 增加新行 ? 【 實(shí)例 112】 在 ”中國主要城市人口、經(jīng)濟(jì)數(shù)據(jù) “的表格中插入新行。 ? 操作步驟如下： ? ① 將光標(biāo)定位在“經(jīng)濟(jì)”這一行，單擊鼠標(biāo)右標(biāo)，在彈出的快捷菜單中執(zhí)行“表格” → “插入行”菜單命令。 ? ② 會在“經(jīng)濟(jì)”這一行之上插入一個新行，這不一定符合需求，因?yàn)橐话阈枰凇敖?jīng)濟(jì)”行的下面插入新行 ,（操作演示） ? ③ 要在“經(jīng)濟(jì)”行之下增加新行，將光標(biāo)定位在“經(jīng)濟(jì)”這一行，執(zhí)行“修改” → “表格” → “插入行或列”菜單命令，打開“插入行或列”對話框，如圖“插入行或列對話框（插入行）”所示（并操作演示） ? ④ 在“插入行或列”對話框中可以輸入想要插入的行數(shù)，并且可以選擇是在當(dāng)前行所在的位置之上或之下插入新行，這里選擇“所選之下”，如圖”執(zhí)行插入行命令插入新行 “所示（并操作演示） 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 “插入行或列 ”對話框（插入行） 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 執(zhí)行“插入行或列 ”命令插入新行 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 ? (2) 增加新列 ? 【 實(shí)例 113】 在插入行后的“中國主要城市人口、經(jīng)濟(jì)數(shù)據(jù)統(tǒng)計(jì)”表的最右邊插入新列，對每一行的數(shù)據(jù)進(jìn)行匯總。 ? 操作步驟如下： ? ①將光標(biāo)定位在內(nèi)容為“大連”的單元格，執(zhí)行右鍵菜單“表格” → “插入列”菜單命令，這一菜單命令會在內(nèi)容為“大連”的單元格所在列左邊插入一個新列，這不符合案例的需求，（操作演示） ? ② 要能夠在內(nèi)容為“大連”的單元格所在列的右邊增加新列，需要執(zhí)行右鍵菜單“修改” → “表格” → “插入行或列”菜單命令，使用“插入行或列”對話框插入新列。如圖”插入行或列對話框 (插入列 )“ 所示（操作演示） ③ 在“插入行或列”對話框中選擇“插入列”，在列數(shù)中輸入“ 1”，位置選擇“當(dāng)前列之后（ A）”，單擊 【 確定 】 按鈕，效果如圖”執(zhí)行插入行或列命令插入新列“所示。（操作演示） ? 執(zhí)行“插入行或列”命令插入新列 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 “插入行或列”對話框 (插入列 ) 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 執(zhí)行“插入行或列”命令插入新列 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 ? (3) 刪除行或列 ? 【 實(shí)例 114】 如上頁圖所示，表格中多了兩行和一列，要求刪除多余的行和列。 ? 可以使用右鍵菜單進(jìn)行相應(yīng)的刪除操作，其操作步驟如下： ? 將光標(biāo)定位到要刪除行或列的單元格中，然后單擊鼠標(biāo)右鍵，執(zhí)行“表格” → “刪除行”或“刪除列”菜單命令，將刪除光標(biāo)所在的當(dāng)前行或列。效果如圖“刪除行和列”所示（操作演示） 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 刪除行和列 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 ? (4) 單元格的合并 ? 有時(shí)根據(jù)需要可能會把兩個或幾個在同一行或同一列的單元格合并成一個大的單元格。這在 Dreamweaver中很容易實(shí)現(xiàn)。 ? 【 實(shí)例 115】 上頁圖中，在最后一列標(biāo)題中輸入“匯總”，然后合并“匯總”列下面的二個單元格。 ? 操作步驟如下： ? ① 選中需要匯總的二個單元格，（操作演示） ? ② 單擊鼠標(biāo)右鍵，執(zhí)行“修改” → “表格” → “合并單元格”菜單命令。 ? ③ 這樣就合并了二個單元格，其效果如圖“合并單元格 ”所示。（操作演示） 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 合并單元格 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 ? (5) 單元格的拆分 ? 在有些情況下，需要將一個單元格拆分成兩個或多個單元格。 ? 【 實(shí)例 116】 將上頁圖中剛合并的單元格拆分成兩個單元格。 ? 操作步驟如下： ? ① 將光標(biāo)定位在需要拆分的單元格中。 ? ② 單擊鼠標(biāo)右鍵，執(zhí)行“修改” → “表格” → “拆分單元格”菜單命令，彈出“拆分單元格”對話框。如圖“拆分單元格對話框”所示。（操作演示） ? ③ 在“拆分單元格”對話框中選擇將單元格拆分成行或者列，這里選擇行。 ? ④ 在“行數(shù)”中輸入“ 2”，表示拆分成二行。（如果拆分成列，那么在列數(shù)中輸入相應(yīng)的數(shù)字）。（操作演示） ? ⑤ 單擊 【 確定 】 按鈕，完成拆分單元格。 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 “拆分單元格”對話框 知識點(diǎn) 17 Dreamweaver表格建立與基本操作 ? (6) 表格長寬及行高列寬的調(diào)整 ? 可以使用鼠標(biāo)調(diào)整表格的長寬。而有時(shí)侯需