dreamweaver網(wǎng)頁(yè)設(shè)計(jì)(編輯修改稿)
2025-03-28 11:34 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 點(diǎn)”對(duì)話框。使用“管理站點(diǎn)”對(duì)話框，可以管理多個(gè)站點(diǎn)，實(shí)現(xiàn)對(duì)站點(diǎn)的創(chuàng)建、編輯、復(fù)制、刪除、導(dǎo)入和導(dǎo)出。導(dǎo)出的站點(diǎn)文件為 *.ste。 三、管理站點(diǎn)中的文件 ? 學(xué)會(huì)如何創(chuàng)建站點(diǎn)后，新創(chuàng)建的站點(diǎn)是空的或雜亂的，下面將學(xué)習(xí)在Dreamweaver中如何管理站點(diǎn)中的文件，主要介紹兩種方法：使用“文件”面板和使用“站點(diǎn)地圖”。 ? 一般站點(diǎn)由首頁(yè)（ ）、圖像文件夾（ images）、源文件夾（ ）和 web文件夾組成。 文件夾 作用 圖像文件夾 放置網(wǎng)頁(yè)中用到的圖片 源文件夾 用于放置在 Photoshop或 Fireworks等設(shè)計(jì)工具中設(shè)計(jì)的界面和按鈕等原始文件 Web文件夾 用于放置除 表 站點(diǎn)文件夾 使用 “ 文件 ” 面板管理文件 ? 站點(diǎn)的所有文件在“文件”面板中以目錄樹(shù)的形式呈現(xiàn)，方便管理與查看。 ? 選擇“窗口” → “文件”命令，打開(kāi)“文件”面板，選中需要?jiǎng)?chuàng)建文件的文件夾，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件”命令，在“文件”面板中將生成一個(gè)名稱(chēng)為“ ”的文件，如圖所示。 ? 也可以選擇“文件” → “新建”命令，彈出 “新建文檔”對(duì)話框，默認(rèn)選中“空白頁(yè)”選項(xiàng)卡，選擇“空白頁(yè)”，從右側(cè)的“頁(yè)面類(lèi)型”列表中選擇“ HTML”，單擊“創(chuàng)建”按鈕。 Dreamweaver即創(chuàng)建一個(gè)新的 HTML文件，并展開(kāi)工作區(qū)界面。 ? 對(duì)于站點(diǎn)中創(chuàng)建好的各種文檔還可以通過(guò)“文件”面板進(jìn)行相應(yīng)的管理：移動(dòng)文件、復(fù)制文件、重命名文件、刪除文件。 ? 頁(yè)面標(biāo)題、背景圖像和顏色、文本和鏈接顏色、邊距是每個(gè) Web文檔的基本屬性。在Dreamweaver中打開(kāi)一個(gè)網(wǎng)頁(yè)文件后，單擊屬性面板中的“頁(yè)面屬性”按鈕或選擇“修改”菜單 → “頁(yè)面屬性”命令，均可打開(kāi)“頁(yè)面屬性”對(duì)話框進(jìn)行設(shè)置或更改頁(yè)面屬性。Dreamweaver將頁(yè)面屬性分為外觀（ CSS）、外觀（ HTML）、鏈接（ CSS）、標(biāo)題（ CSS）、標(biāo)題 /編碼、跟蹤圖像 6個(gè)類(lèi)別。 四、實(shí)踐練習(xí) ?配置 IIS和創(chuàng)建遠(yuǎn)程站點(diǎn) ?練習(xí) 創(chuàng)建網(wǎng)頁(yè)基本元素 ?一、文本 ?二、圖像 ?三、超級(jí)鏈接 一、文本的輸入和編輯 1 輸入文本 插入普通文本 插入列表文本 2 設(shè)置文本屬性 （ 1） HTML方式 （ 2） CSS方式 3 輸入特殊字符 二、圖像 1 插入圖像 2 設(shè)置圖像屬性 3 創(chuàng)建圖像地圖 1 插入圖像 ? 根據(jù)圖像在網(wǎng)頁(yè)中作用的不同，可以將其分為普通圖像、占位圖像和鼠標(biāo)經(jīng)過(guò)圖像 3種，下面分別介紹它們的插入方法。 ? 1）插入普通圖像 ? 插入普通圖像的方法如下： ? （ 1）將鼠標(biāo)指針置于需要插入圖像的位置。 ? （ 2）選擇“插入” → “圖像”命令，彈出“選擇圖像源文件”對(duì)話框，在該對(duì)話框中選擇合適的圖像，單擊“確定”按鈕即可。 1 插入圖像 ? 2）插入占位圖像 ? 插入占位圖像的方法如下： ? （ 1）將鼠標(biāo)指針置于需要插入占位圖像的位置。 ? （ 2）選擇“插入” → “圖像對(duì)象” → “圖像占位符”命令，彈出“圖像占位符”對(duì)話框。 ? （ 3）在“名稱(chēng)”文本框中輸入占位圖像的名稱(chēng)。 ? （ 4）在“寬度”和“高度”文本框中輸入占位圖像的寬度和高度。 ? （ 5）單擊“顏色”按鈕，在彈出的顏色面板中選擇占位圖像的顏色。 ? （ 6）在文本框中輸入占位圖像的替換文本。 ? （ 7）單擊“確定”按鈕即可插入占位圖像。 ? 在發(fā)布站點(diǎn)之前，應(yīng)使用普通圖像替換所有的占位圖像，方法如下： ? （ 1）雙擊占位圖像。 ? （ 2）在彈出的對(duì)話框中選擇要替換占位圖像的普通圖像。 ? （ 3）單擊“確定”按鈕，即可將占位圖像替換掉， 1 插入圖像 ? 3）插入鼠標(biāo)經(jīng)過(guò)圖像 ? 鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看且使用鼠標(biāo)指針經(jīng)過(guò)時(shí)發(fā)生變化的圖像，這種圖像由主圖像和次圖像組成。 ? 在網(wǎng)頁(yè)中插入鼠標(biāo)經(jīng)過(guò)圖像的方法如下： ? （ 1）將鼠標(biāo)指針置于需要插入鼠標(biāo)經(jīng)過(guò)圖像的位置。 ? （ 2）選擇“插入” → “圖像對(duì)象” → “鼠標(biāo)經(jīng)過(guò)圖像”命令，彈出“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框。 ? （ 3）在“圖像名稱(chēng)”文本框中輸入鼠標(biāo)經(jīng)過(guò)圖像的名稱(chēng)。 ? （ 4）在“原始圖像”文本框中輸入主圖像所在的路徑，也可以單擊其右側(cè)的按鈕，在彈出的相應(yīng)對(duì)話框中進(jìn)行選擇。 ? （ 5）在“鼠標(biāo)經(jīng)過(guò)圖像”文本框中輸入次圖像所在的路徑，也可以單擊其右側(cè)的按鈕，在彈出的相應(yīng)對(duì)話框中進(jìn)行選擇。 ? （ 6）在“替換文本”文本框中輸入替換文本。 ? （ 7）在“按下時(shí)，前往的 URL”文本框中輸入單擊該圖像時(shí)所鏈接到的文件的路徑。 ? （ 8）單擊“確定”按鈕，完成鼠標(biāo)經(jīng)過(guò)圖像的插入。 ? （ 9）按 F12鍵，在瀏覽器中預(yù)覽效果。 主圖像 次圖像 2 設(shè)置圖像屬性 ? （ 1）更改圖像的大小 ? （ 2）為圖像添加邊框 ? （ 3）裁剪圖像 ? （ 4）調(diào)整圖像的亮度和對(duì)比度 ? （ 5）銳化圖像 3 創(chuàng)建圖像地圖 ? 圖像地圖就是在一幅圖像中創(chuàng)建多個(gè)鏈接區(qū)域，單擊鏈接區(qū)域可以跳轉(zhuǎn)到鏈接對(duì)象中，這種鏈接區(qū)域也稱(chēng)為熱點(diǎn)。選擇需要?jiǎng)?chuàng)建鏈接區(qū)域的圖像，打開(kāi)圖片“屬性”面板，其中的熱點(diǎn)工具如圖所示。 ? 在“地圖”文本框中設(shè)置圖像地圖的名稱(chēng)。 ? 使用指針熱點(diǎn)工具選中圖像熱點(diǎn)后，在“屬性”面板中將顯示熱點(diǎn)的相關(guān)屬性。 三、建立網(wǎng)頁(yè)鏈接 1 創(chuàng)建文字鏈接 2 創(chuàng)建圖像鏈接 3 創(chuàng)建錨點(diǎn)鏈接 4 創(chuàng)建電子郵件鏈接 三、建立網(wǎng)頁(yè)鏈接 ? 鏈接的類(lèi)型 ? 如果按鏈接目標(biāo)分類(lèi)，可以將超鏈接分為：內(nèi)部鏈接、外部鏈接、錨點(diǎn)鏈接和電子郵件鏈接。 ? 鏈接路徑 ? 有 3種類(lèi)型的鏈接路徑： ? （ 1）絕對(duì)路徑，為文件提供完全的路徑。 ? （ 2）相對(duì)路徑，相對(duì)路徑最適合網(wǎng)站的內(nèi)
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1