【正文】 1 2 前言 同學(xué)們你們喜歡上網(wǎng)嗎？你知道那么多絢麗的網(wǎng)頁(yè)時(shí)怎么做出的嗎？你想制作自己的網(wǎng)站嗎？ 那么跟我一起學(xué)習(xí) Dreamweaver 吧！ Dreamweaver 是美國(guó) 一家 公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。 DREAMWEAVER、 FLASH 以及在 DREAMWEAVER 之后推出的針對(duì)專業(yè)網(wǎng)頁(yè)圖像設(shè)計(jì)的 FIREWORKS，三者被 俗 稱為 網(wǎng)頁(yè)三劍客。 隨著互聯(lián)網(wǎng) (Inter) 的家喻戶曉， 網(wǎng)頁(yè) 技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁(yè)編輯器，從網(wǎng)頁(yè)編輯器基本性質(zhì)可以分為所見(jiàn)即所得網(wǎng)頁(yè)編輯器和非所見(jiàn)即所得網(wǎng)頁(yè)編輯器（則原始代碼編輯器），兩者各有千秋。所見(jiàn)則所得網(wǎng)頁(yè)編輯器的優(yōu)點(diǎn)就是直觀性，使用方便，容易上手，您在所見(jiàn)即所得網(wǎng)頁(yè)編輯器進(jìn)行網(wǎng)頁(yè)制作和在 WORD 中進(jìn)行文本編輯不會(huì)感到有什么區(qū)別。 Dreamweaver 是在網(wǎng)頁(yè)設(shè)計(jì)與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強(qiáng)大的軟件，隨著 Dreamweaver 8 的發(fā)布，更堅(jiān)定 Dreamweaver 在該領(lǐng)域的地位。它集網(wǎng)頁(yè) 設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)和站點(diǎn)管理功能于一身，具有可視化、支持多平臺(tái)和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計(jì)、開(kāi)發(fā)、制作的首選工具。 Dreamweaver 是一種所見(jiàn)即所得的 HTML 編輯器，可實(shí)現(xiàn)頁(yè)面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫(xiě)，同時(shí)亦保證了其專業(yè)性和兼容性，并且可以對(duì)內(nèi)部的 HTML 編輯器和任何第三方的 HTML 編輯器進(jìn)行實(shí)時(shí)的訪問(wèn)。無(wú)論用戶習(xí)慣手工輸入 HTML 源代碼還是使用可視化的編輯界面， Dreamweaver 都能提供便捷的方式使用戶設(shè)計(jì)網(wǎng)頁(yè)和管理網(wǎng)站變得更容易。 Dreamweaver 可以方便地加 入 動(dòng)畫(huà)、聲音圖片及其他的媒體。讓你的 3 網(wǎng)站豐富多彩，功能強(qiáng)大。 4 第一 課 網(wǎng)絡(luò)基礎(chǔ)知識(shí) 5 第二課 Dreamweaver 操作環(huán)境 9 第三課 站點(diǎn)的搭建及管理 14 第四課 文本的插 入與編輯 20 第五課 插入圖像 25 第六課 插入圖像 29 第七課 插入并編輯表格 34 第八課 插入并編輯表格 38 第九課 插入并編輯表格 42 第十課 插入 Flash 動(dòng)畫(huà) 46 第十一課 插入 Flash 動(dòng)畫(huà) 50 第十二課 插入聲音 54 第十三課 創(chuàng)建鏈接關(guān)系 58 第十四課 創(chuàng)建鏈接關(guān)系 62 第十五課 創(chuàng)建模板 67 5 第一課 網(wǎng)絡(luò)基礎(chǔ)知識(shí) 隨著網(wǎng)絡(luò)的普及，越來(lái)越多的電腦愛(ài)好者開(kāi)始接觸網(wǎng)絡(luò)，面對(duì)一個(gè)又一個(gè)精彩紛呈的網(wǎng)站，眾多的電腦愛(ài)好者都按捺不住內(nèi)心的憧憬開(kāi)始接觸網(wǎng)頁(yè)設(shè)計(jì)和制作。而這項(xiàng)工作也不再象它的啟蒙階段那樣，需要直接面對(duì)枯燥的代碼，反復(fù)的在程序語(yǔ)言和最終界面之間來(lái)回切換。隨著一些具有可視化操作界面，所見(jiàn)即所得工作窗口軟件的不斷出現(xiàn)和升級(jí)，讓進(jìn)入網(wǎng)頁(yè)制作的門(mén)檻不再那么高不可及。 Dreamweaver 無(wú)疑是這些 軟件當(dāng)中的佼佼者，可以說(shuō)它是現(xiàn)在最為普及和成功的一個(gè)網(wǎng)頁(yè)制作軟件。通過(guò)Macromedia 公司的不斷改進(jìn)和升級(jí)，它已經(jīng)變得日益強(qiáng)大和完善。 IP 地址與域名地址 IP 地址， Inter 上的每臺(tái)主機(jī)都有一個(gè) 唯一 的 IP 地址，如 。域名地址 就是網(wǎng)站的網(wǎng)址，域名的目的是讓別人能夠訪問(wèn)到一個(gè)網(wǎng)站 ,如 舉例來(lái)說(shuō) ip 地址像是人的身份證，每個(gè)人都有自己唯一的身份證號(hào)，而域名地址就像人的名字，我們平時(shí)稱呼我們的同學(xué)都是用他 的名字而不是用他的身份證號(hào)。 什么是 HTTP、什么是 WWW？ ① 我們?cè)跒g覽網(wǎng)站的時(shí)候經(jīng)常會(huì)看到 ，那么什么是 看一看 學(xué)習(xí)目標(biāo) 1. 知識(shí)目標(biāo) ： 學(xué)生初步了解網(wǎng)絡(luò)的一些基本概念 IP 地址、域名地址、 URL 地址等。 2. 技能目標(biāo)：能夠查找 URL 地址等 3. 情感、態(tài)度和價(jià)值觀目標(biāo) ： 培養(yǎng)學(xué)生對(duì)網(wǎng)站制作的興趣 6 呢？ 指的是超文本傳輸協(xié)議，所謂超文本顧名思義指的是超出文本包括聲音、圖片、 視頻、動(dòng)畫(huà)等當(dāng)然也包括文本。 ② WWW 是 Word Wide Web 的建成 ,在域名中是國(guó)際域名 ,像 網(wǎng)站 首先前面有 說(shuō)明該網(wǎng)站可以傳輸圖像、視頻等，后面ＷＷＷ國(guó)際域名， sina 是網(wǎng)站的名字 , 是后 綴 ,我們常見(jiàn)的后綴還有g(shù)ov、 edu、 等 ，像 gov 指的是政府網(wǎng)站， edu 指的是教育網(wǎng)站 ,指的是中國(guó)網(wǎng)站。 url 地址 指的是統(tǒng)一資源定位器，通俗的說(shuō)就是某個(gè)資源（圖片，文字，視頻等）的詳細(xì)地址。下面來(lái)查看下某張圖片的 url 地址： 第一步，我們首先來(lái)打開(kāi)一個(gè)網(wǎng)站 第二步：如圖所示 把鼠標(biāo)放在圖片上 ,右鍵單擊 圖片 ,在彈出的菜單上選擇屬 性 . 第三步： 7 評(píng)一評(píng) 打開(kāi)一個(gè)網(wǎng)頁(yè) 你能找到你自己電腦的 IP 地址嗎？ 你知道臨沂市六小的域名地址嗎？ URL 地址嗎？ 同學(xué)們，你這節(jié)課的表現(xiàn)怎么樣呢？快來(lái)評(píng)一評(píng)吧！ 評(píng)價(jià)內(nèi)容 自評(píng) 互評(píng) 師評(píng) 做一做 8 第二課 Dreamweaver8 界面 合作探究 知識(shí)掌握 學(xué)習(xí)態(tài)度 發(fā)現(xiàn)思考 學(xué)習(xí)效果 注： 評(píng)價(jià)時(shí)用 “ ☆ ” 表示，優(yōu)是 3 個(gè) “ ☆ ” ，良是 2 個(gè) “ ☆ ” ，達(dá)標(biāo)是 1 個(gè) “ ☆ ” 看一看 9 從今天開(kāi)始準(zhǔn)備向大家介紹 Dreamweaver 軟件 版的強(qiáng)大功能，本教程希望以規(guī)范化的網(wǎng)站制 作流程為線索，指導(dǎo)同學(xué)們以正確的步驟來(lái)逐漸接觸和掌握 Dreamweaver 軟件的主要功能。我個(gè)人認(rèn)為，作為一個(gè)網(wǎng)頁(yè)制作的愛(ài)好者，需要有一個(gè)良好的工作習(xí)慣，很多朋友在學(xué)習(xí)時(shí)喜歡隨心所欲的實(shí)驗(yàn)軟件的各種功能，而缺乏系統(tǒng)的、正確的工作方式。同時(shí)網(wǎng)頁(yè)制作面對(duì)的不是一個(gè)個(gè)孤立的頁(yè)面，而是一組互相關(guān)聯(lián)的某個(gè)站點(diǎn)中的文件群，因此本教程將從網(wǎng)站的角度來(lái)串講 Dreamweaver 中的各項(xiàng)主要功能。 在首次啟動(dòng) Dreamweaver8 時(shí)會(huì)出現(xiàn)一個(gè)“工作區(qū)設(shè)置”對(duì)話框，在對(duì)話框左側(cè)是 Dreamweaver8 的設(shè)計(jì)視圖，右側(cè)是Dreamweave 8 的代碼視圖。 Dreamweaver8 設(shè)計(jì)視圖布局提供了一個(gè)將全部元素置于一個(gè)窗口中的集成布局。我們選擇面向設(shè)計(jì)者的設(shè)計(jì)視圖布局。 在 Dreamweave 8 中首先將顯示一個(gè)起始頁(yè)，可以勾選這個(gè)窗口下面的“不在顯示此對(duì)話框”來(lái)隱藏它。在這個(gè)頁(yè)面中包括“打開(kāi)最近項(xiàng)目”、“創(chuàng)建新項(xiàng)目”“從范例創(chuàng)建” 3 個(gè)方便實(shí)用的項(xiàng)目，建議大家保留。 新建或打開(kāi)一個(gè)文檔，進(jìn)入 Dreamweaver8 的標(biāo)準(zhǔn)工作界面。學(xué)習(xí)目標(biāo) 1 、 知 識(shí) 目 標(biāo) ： 了 解 網(wǎng) 頁(yè) 制 作 工 具dreamweaver8。 技能目標(biāo) :了解 dreamweaver8 的工作界面的組成 : 標(biāo)題顯示、菜單欄、插入面板組、文檔工具欄、標(biāo)準(zhǔn)工具欄、文檔窗口、狀態(tài)欄、屬性面板和浮動(dòng)面板組。 情感、態(tài)度和價(jià)值觀目標(biāo) :通過(guò)對(duì)網(wǎng)頁(yè)制作工具的認(rèn)識(shí)，培養(yǎng)學(xué)生對(duì)網(wǎng)頁(yè)的興趣和對(duì)網(wǎng)頁(yè)的了解 。 10 Dreamweaver8 的標(biāo)準(zhǔn)工作界面包括：標(biāo)題顯示、菜單欄 、插入面板組、文檔工具欄、標(biāo)準(zhǔn)工具欄、文檔窗口、狀態(tài)欄、屬性面板和浮動(dòng)面板組。 標(biāo)題顯示欄 啟動(dòng) Macromedia Dreamweave 8 后，標(biāo)題欄將顯示文字Macromedia Dreamweave ，新建或打開(kāi)一個(gè)文檔后，在后面還會(huì)顯示該文檔所在的位置和文件名稱。 菜單欄 Dreamweave 8 的菜單共有 10 個(gè)，即文件、編輯、視圖、插入、修改、文本、命令、站點(diǎn)、窗口和幫助。其中，編輯菜單里提供了對(duì) Dreamweaver 菜單中 [首選參數(shù) ]的訪問(wèn)。 文件：用來(lái)管理文件。例如新 建，打開(kāi)，保存，另存為，導(dǎo)入，輸出打印等。 編輯：用來(lái)編輯文本。例如剪切，復(fù)制，粘貼，查找，替換和參數(shù)設(shè)置等。 查看：用來(lái)切換視圖模式以及顯示、隱藏標(biāo)尺、網(wǎng)格線等輔助視圖功能。 插入：用來(lái)插入各種元素，例如圖片、多媒體組件，表格、 11 框架及超級(jí)鏈接等。 修改：具有對(duì)頁(yè)面元素修改的功能，例如在表格中插入表格，拆分、合并單元格，對(duì)其對(duì)象等。 文本：用來(lái)對(duì)文本操作，例如設(shè)置文本格式等。 命令：所有的附加命令項(xiàng)