【培訓(xùn)課件】網(wǎng)頁(yè)設(shè)計(jì)與制作教程

網(wǎng)頁(yè)設(shè)計(jì)與制作教程網(wǎng)頁(yè)設(shè)計(jì)與制作教程1第一章第一章2§1.1Internet概述一、什么是InternetInternet原意是互聯(lián)網(wǎng)，又稱因特網(wǎng)、國(guó)際互聯(lián)網(wǎng)，它不是一個(gè)單一的網(wǎng)絡(luò)，它是一個(gè)巨大的、全球范圍的計(jì)算機(jī)網(wǎng)絡(luò)，它是借助于現(xiàn)代通信和計(jì)算機(jī)技術(shù)實(shí)現(xiàn)全球信息傳遞的一種快捷、有效、方便的工具?！?.1Internet概述一、什么是Internet31、Internet的現(xiàn)狀I(lǐng)nternet的前身是美國(guó)國(guó)防部高級(jí)研究規(guī)劃局的ARPA網(wǎng)，成立于1969年12月，從八十年代開(kāi)始發(fā)展，經(jīng)過(guò)20年的發(fā)展，已取得了巨大的成功，現(xiàn)在已成為世界上規(guī)模最大、用戶最多、資源最豐富的網(wǎng)絡(luò)互聯(lián)系統(tǒng)。迄今全球Internet網(wǎng)民已達(dá)3億多,據(jù)估計(jì)到2005年網(wǎng)民將達(dá)10億?；贗nternet的電子商務(wù)交易額也將從97年的80億美元增到2003年的10000億美元。1、Internet的現(xiàn)狀I(lǐng)nternet的42、信息高速公路與下一代Internet信息高速公路以高速度、大容量和高精度的聲音、數(shù)據(jù)、文字、圖形和影像等的交互式多媒體信息服務(wù)，來(lái)最大幅度和最快速度地改變著人類的生活面貌和社會(huì)景觀。實(shí)質(zhì)是一個(gè)多媒體信息交互高速通信的廣域網(wǎng)，它可以實(shí)現(xiàn)實(shí)時(shí)電視點(diǎn)播等的多媒體的通信服務(wù)。借助于光纖和光電技術(shù)，傳輸速率能達(dá)到Gbps數(shù)量級(jí)，并且將會(huì)達(dá)到Tbps(1012b/s),它與Internet并不是等同的。下一代Internet（NGI，Ipng)IPv4,IPv62、信息高速公路與下一代Internet信息高速公路以高速度5二、Internet與TCP/IP協(xié)議TCP/IP：傳輸控制協(xié)議/網(wǎng)際協(xié)議，是互聯(lián)網(wǎng)絡(luò)信息交換的規(guī)則、規(guī)范的集合體，包含了100多種協(xié)議。TCP的主要功能：對(duì)網(wǎng)絡(luò)中計(jì)算機(jī)和通信設(shè)備的管理，規(guī)定了信息包應(yīng)該怎樣分層、分組，又怎樣在收到信息包以后充組數(shù)據(jù)，以何種方式在線路上傳輸信號(hào)。IP：定義了Internet上計(jì)算機(jī)之間的路由選擇，向傳輸層提供統(tǒng)一的報(bào)文。如：電子郵件傳輸、文件傳輸、新聞網(wǎng)絡(luò)的新聞發(fā)布、訪問(wèn)全球網(wǎng)。IP地址：是網(wǎng)上的通信地址，是計(jì)算機(jī)、服務(wù)、路由器的端口地址，每一個(gè)IP地址在全球是唯一的，是運(yùn)行TCP/IP協(xié)議的唯一標(biāo)識(shí)。二、Internet與TCP/IP協(xié)議TCP/IP：傳輸控制6三、Internet網(wǎng)絡(luò)地址商業(yè)軍事教育網(wǎng)絡(luò)機(jī)構(gòu)政府機(jī)構(gòu)非贏利組織commiledunetgovorg三、Internet網(wǎng)絡(luò)地址商業(yè)軍事教育網(wǎng)絡(luò)機(jī)構(gòu)政府7四、連接Internet的方式1、撥號(hào)連接2、ISDN接入（一線通）傳輸速率：64Kbps或128Kbps3、企業(yè)級(jí)用戶的接入技術(shù)4、其他的用戶級(jí)接入技術(shù)CableModem、WebTV、ADSL(1,8M)、手機(jī)上網(wǎng)、Lan(100,100M)四、連接Internet的方式1、撥號(hào)連接8§1.2Web服務(wù)器瀏覽器GGI中間件數(shù)據(jù)庫(kù)服務(wù)器HTTPLAN/WANSQLHTML§1.2Web服務(wù)器瀏覽器GGI中間件數(shù)據(jù)庫(kù)HTTPL92、HTTP超文本傳輸協(xié)議3、WebServer的性能由流量、響應(yīng)時(shí)間來(lái)衡量4、影響WebServer的因素硬件方面：CPU、內(nèi)存、硬盤軟件方面：HTTP服務(wù)進(jìn)程、TCP/IP實(shí)現(xiàn)、文件系統(tǒng)、數(shù)據(jù)庫(kù)、GGI程序。2、HTTP超文本傳輸協(xié)議10二、WindowsWeb服務(wù)器的建立參見(jiàn)教材P10—P15二、WindowsWeb服務(wù)器的建立參見(jiàn)教材P10—P1511網(wǎng)頁(yè)設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)

12一、基礎(chǔ)知識(shí)（一）基本概念1、網(wǎng)頁(yè)網(wǎng)頁(yè)就是在瀏覽器上看到的一頁(yè)信息，類似于書中的一頁(yè)，也稱為Web頁(yè)。2、網(wǎng)站將大量的網(wǎng)頁(yè)放置在服務(wù)器上供人瀏覽，就構(gòu)成了一個(gè)網(wǎng)站。3、主頁(yè)每個(gè)網(wǎng)站都有一個(gè)最基本的網(wǎng)頁(yè)，叫主頁(yè)。一、基礎(chǔ)知識(shí)（一）基本概念13（二）網(wǎng)頁(yè)制作軟件1、網(wǎng)頁(yè)設(shè)計(jì)軟件a、DreamweaverDreamweaver是目前設(shè)計(jì)網(wǎng)頁(yè)最好的軟件，它能生成高效簡(jiǎn)潔的HTML源代碼，支持動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，也可插入JavaScript程序。b、FrontpageFrontpage只能制作一些簡(jiǎn)單的、質(zhì)量不高的網(wǎng)頁(yè)。（二）網(wǎng)頁(yè)制作軟件142、圖象處理軟件a、專門網(wǎng)頁(yè)圖象處理軟件PhotodrawFireworksb、其它圖象處理軟件PhotoshopCoreldreawFreeHand3、動(dòng)畫制作軟件Flash2、圖象處理軟件15（三）Internet概述1、Internet的概念2、Internet的起源3、IP地址和域名連接在Internet上的電腦，都叫做主機(jī)，每臺(tái)主機(jī)都有一個(gè)唯一的號(hào)碼，這便是IP地址。IP地址有四組數(shù)構(gòu)成，每組8位，共32位（二進(jìn)制），每組范圍0—255，在IP地址的4組數(shù)字中，包含了兩部分信息：網(wǎng)絡(luò)代號(hào)和主機(jī)代號(hào)。在Internet上共有A、B、C、三類網(wǎng)絡(luò)類型。（三）Internet概述16用w.x.y.z表示一個(gè)IP地址IP地址分類類型W值網(wǎng)絡(luò)ID主機(jī)ID網(wǎng)絡(luò)總數(shù)一個(gè)網(wǎng)絡(luò)中主機(jī)總數(shù)A1--126wx.y.z12616777214B128--191w.xy,.z1638465534C192--223w.x.yz2097151254域名域名是用英文來(lái)表示IP地址。域名的一般格式為：主機(jī)名.機(jī)構(gòu)名.類別名.地區(qū)名用w.x.y.z表示一個(gè)IP地址類型W值網(wǎng)絡(luò)ID主機(jī)ID網(wǎng)絡(luò)17

Dreamweaver4

Dreamweaver4

18一、Dreamweaver簡(jiǎn)介1、Dreamweaver是Macromedia公司的出品的一款"所見(jiàn)即所得"的網(wǎng)頁(yè)編輯工具。與Frontpage不同，Deamweaver采用的是Mac機(jī)浮動(dòng)面版的設(shè)計(jì)風(fēng)格，對(duì)于初學(xué)者來(lái)說(shuō)可能會(huì)感到不適應(yīng)。但當(dāng)你習(xí)慣了其操作方式后，就會(huì)發(fā)現(xiàn)Dreamweaver的直觀性與高效性是Frontpage所無(wú)法比擬的。

一、Dreamweaver簡(jiǎn)介1、Dreamweaver是19一、Dreamweaver簡(jiǎn)介2、Dreamweaver對(duì)于DHTML（動(dòng)態(tài)網(wǎng)頁(yè)）的支持特別好，可以輕而易舉地做出很多眩目的互動(dòng)頁(yè)面特效。插件式的程序設(shè)計(jì)使得其功能可以無(wú)限的擴(kuò)展。Dreamweaver與Flash、Firework并稱為Macromedia的網(wǎng)頁(yè)制作三劍客，由于是同一公司的產(chǎn)品，因而在功能上有著一個(gè)非常緊密的結(jié)合。因此，說(shuō)Dreamweaver是高級(jí)網(wǎng)頁(yè)制作的首選并不為過(guò)。

一、Dreamweaver簡(jiǎn)介2、Dreamweaver對(duì)20一、Dreamweaver簡(jiǎn)介3、Dreamweaver最新的版本為:Dreamweaver4.0和DreamweaverUltraDev4.0。后者支持ASP、JSP等程序的編寫與調(diào)試。對(duì)于初學(xué)者來(lái)講，這兩個(gè)版本的Dreamweaver在使用上不會(huì)有太大的差別。而本書則以最新的Dreamweaver4.0為基準(zhǔn)。一、Dreamweaver簡(jiǎn)介3、Dreamweaver21二、初步認(rèn)識(shí)Dreamweaver1、Dreamweaver的啟動(dòng)Dreamweaver的安裝過(guò)程非常簡(jiǎn)單，一但成功安裝后，就可以在開(kāi)始菜單找到Dreamweaver的選項(xiàng)：二、初步認(rèn)識(shí)Dreamweaver1、Dreamweav22二、初步認(rèn)識(shí)Dreamweaver2、編輯窗口第一次啟動(dòng)Dreamweaver，首先看到的是Dreamweaver的編輯窗口：主菜單：在這里可以找到編輯窗口的的絕大部分功能工具欄：是Dreamweaver4的新增功能對(duì)象面板（Objects）：在網(wǎng)頁(yè)編輯的過(guò)程中，通過(guò)單擊對(duì)象面板的按鈕來(lái)為網(wǎng)頁(yè)添加相應(yīng)的元素，如圖片、表格、層、Flash。我們稱這些元素為為對(duì)象。單擊對(duì)象面板上的向下箭頭，能插入其他類型的對(duì)象，如特殊字符（Characters）、表單Froms）等。屬性面板：用于顯示所選中的網(wǎng)頁(yè)元素的屬性，并可在屬性面板上修改。選擇不同的網(wǎng)頁(yè)元素，屬性面板所顯示的內(nèi)容也有所不同，例如圖片和表格所顯示的屬性是不一樣的。此外，點(diǎn)擊屬性面板右下角的小三角可以根據(jù)使用的需要，縮小或展開(kāi)屬性面板，建議一般情況下都設(shè)置為展開(kāi)模式。面板組（又稱可?？扛?dòng)面板）：Dreamweaver還有很多很多其他的浮動(dòng)面板，我們可以根據(jù)自己的喜好，將不同的浮動(dòng)面板重新組合，這就是所謂的面板組。在Photoshop中，也有類似的概念。:快速啟動(dòng)欄（又稱啟動(dòng)面板）：用于顯示或隱藏響應(yīng)的浮動(dòng)面板。啟動(dòng)面板與右下角的微型啟動(dòng)欄一一對(duì)應(yīng)；其中是切換到站點(diǎn)管理器，是切換到行為面板，是查看網(wǎng)頁(yè)源代碼編輯區(qū)域：以“所見(jiàn)即所得”的方式顯示被編輯網(wǎng)頁(yè)內(nèi)容二、初步認(rèn)識(shí)Dreamweaver2、編輯窗口主菜單：在這23二、初步認(rèn)識(shí)Dreamweaver3、【提示1】如果屏幕上的浮動(dòng)面板位置過(guò)于凌亂，甚至超出了桌面范圍而不便操作的時(shí)候（在改變了顯示器的分辨率后尤其容易出現(xiàn)這種情況），可以選取主菜單中的“Window>ArrangePanels”自動(dòng)重排浮動(dòng)面板。【提示2】以下是幾個(gè)常用的浮動(dòng)面板的快速打開(kāi)和關(guān)閉的熱鍵，好好記住，因?yàn)閷?huì)再制作過(guò)程中被頻繁地使用：

Properties屬性面板：Crtl+F3

CSSStyles樣式面板：Shift+F11

Behaviors行為面板：Shift+F3

Objects對(duì)象面板：Crtl+F2二、初步認(rèn)識(shí)Dreamweaver3、【提示1】如果屏幕24二、初步認(rèn)識(shí)Dreamweaver

4、站點(diǎn)窗口

站點(diǎn)窗口是Dreamweaver另一個(gè)重要的窗口，左半部是遠(yuǎn)程站點(diǎn)的目錄，一般顯示為空，只有在FTP連通狀態(tài)下才有顯示內(nèi)容；右半部是當(dāng)前編輯中的本地目錄，站點(diǎn)窗口的作用其實(shí)就是直觀而方便地讓你讓像管理硬盤里的文件一樣管理的你的站點(diǎn)二、初步認(rèn)識(shí)Dreamweaver25

在以后網(wǎng)頁(yè)制作的過(guò)程中，將會(huì)頻繁地在編輯窗口和站點(diǎn)窗口之間切換。

26三、制作前的準(zhǔn)備工作——定義網(wǎng)站在正式開(kāi)始制作網(wǎng)頁(yè)之前，最好先定義一個(gè)新網(wǎng)站，這是為了更好地利用站點(diǎn)窗口對(duì)站點(diǎn)文件進(jìn)行管理。定義的方法

方法一：在站點(diǎn)窗口的下拉菜單選擇最后一項(xiàng)DefineSites，如下圖。三、制作前的準(zhǔn)備工作——定義網(wǎng)站在正式開(kāi)始制作網(wǎng)頁(yè)之前，最好27

三、制作前的準(zhǔn)備工作——定義網(wǎng)站此時(shí)會(huì)彈出一個(gè)新的對(duì)話框，點(diǎn)擊New按鈕是定義一個(gè)新網(wǎng)站，如果日后需要對(duì)舊有網(wǎng)站重新定義，可以在左邊的網(wǎng)站列表中選中你需要重新定義的網(wǎng)站，然后點(diǎn)擊Edit按鈕便可。

28

三、制作前的準(zhǔn)備工作——定義網(wǎng)站方法二：選擇命令菜單Site>NewSite選項(xiàng)。基本設(shè)置在接著看到的對(duì)話框中，要進(jìn)行以下三步簡(jiǎn)單的設(shè)置：

①SiteName（網(wǎng)站名稱）：為你的網(wǎng)站起一個(gè)名字，這個(gè)名字只起著識(shí)別的作用，與網(wǎng)站發(fā)布后真實(shí)的名字無(wú)關(guān)，例如這里的名字是：“我的網(wǎng)站”，而實(shí)際上我的網(wǎng)站叫“上網(wǎng)指南”；

②LocalRoot（本地根目錄）：設(shè)置網(wǎng)站在本地硬盤的位置，點(diǎn)擊后面的文件夾圖標(biāo)可以選擇硬盤的任意目錄作為存放網(wǎng)站文件的目錄；

③Cache（緩存）：建立緩存可以使文件的移動(dòng)、改名、查找等站點(diǎn)管理的操作速度大大提升，因此建議大家在這里打上鉤。完成后，回到站點(diǎn)窗口，就可以看到如下類似的畫面：

29三、制作前的準(zhǔn)備工作——定義網(wǎng)站三、制作前的準(zhǔn)備工作——定義網(wǎng)站30

三、制作前的準(zhǔn)備工作——定義網(wǎng)站

可以看到，“我的網(wǎng)站”的名稱已經(jīng)出現(xiàn)在站點(diǎn)窗口了，因?yàn)槭切陆ǖ囊粋€(gè)站點(diǎn)，所在在本地目錄看到的一片空白。站點(diǎn)定義完畢之后，就可以正式制作屬于你自己的網(wǎng)頁(yè)了

31演講完畢，謝謝觀看！演講完畢，謝謝觀看！32網(wǎng)頁(yè)設(shè)計(jì)與制作教程網(wǎng)頁(yè)設(shè)計(jì)與制作教程33第一章第一章34§1.1Internet概述一、什么是InternetInternet原意是互聯(lián)網(wǎng)，又稱因特網(wǎng)、國(guó)際互聯(lián)網(wǎng)，它不是一個(gè)單一的網(wǎng)絡(luò)，它是一個(gè)巨大的、全球范圍的計(jì)算機(jī)網(wǎng)絡(luò)，它是借助于現(xiàn)代通信和計(jì)算機(jī)技術(shù)實(shí)現(xiàn)全球信息傳遞的一種快捷、有效、方便的工具?！?.1Internet概述一、什么是Internet351、Internet的現(xiàn)狀I(lǐng)nternet的前身是美國(guó)國(guó)防部高級(jí)研究規(guī)劃局的ARPA網(wǎng)，成立于1969年12月，從八十年代開(kāi)始發(fā)展，經(jīng)過(guò)20年的發(fā)展，已取得了巨大的成功，現(xiàn)在已成為世界上規(guī)模最大、用戶最多、資源最豐富的網(wǎng)絡(luò)互聯(lián)系統(tǒng)。迄今全球Internet網(wǎng)民已達(dá)3億多,據(jù)估計(jì)到2005年網(wǎng)民將達(dá)10億?；贗nternet的電子商務(wù)交易額也將從97年的80億美元增到2003年的10000億美元。1、Internet的現(xiàn)狀I(lǐng)nternet的362、信息高速公路與下一代Internet信息高速公路以高速度、大容量和高精度的聲音、數(shù)據(jù)、文字、圖形和影像等的交互式多媒體信息服務(wù)，來(lái)最大幅度和最快速度地改變著人類的生活面貌和社會(huì)景觀。實(shí)質(zhì)是一個(gè)多媒體信息交互高速通信的廣域網(wǎng)，它可以實(shí)現(xiàn)實(shí)時(shí)電視點(diǎn)播等的多媒體的通信服務(wù)。借助于光纖和光電技術(shù)，傳輸速率能達(dá)到Gbps數(shù)量級(jí)，并且將會(huì)達(dá)到Tbps(1012b/s),它與Internet并不是等同的。下一代Internet（NGI，Ipng)IPv4,IPv62、信息高速公路與下一代Internet信息高速公路以高速度37二、Internet與TCP/IP協(xié)議TCP/IP：傳輸控制協(xié)議/網(wǎng)際協(xié)議，是互聯(lián)網(wǎng)絡(luò)信息交換的規(guī)則、規(guī)范的集合體，包含了100多種協(xié)議。TCP的主要功能：對(duì)網(wǎng)絡(luò)中計(jì)算機(jī)和通信設(shè)備的管理，規(guī)定了信息包應(yīng)該怎樣分層、分組，又怎樣在收到信息包以后充組數(shù)據(jù)，以何種方式在線路上傳輸信號(hào)。IP：定義了Internet上計(jì)算機(jī)之間的路由選擇，向傳輸層提供統(tǒng)一的報(bào)文。如：電子郵件傳輸、文件傳輸、新聞網(wǎng)絡(luò)的新聞發(fā)布、訪問(wèn)全球網(wǎng)。IP地址：是網(wǎng)上的通信地址，是計(jì)算機(jī)、服務(wù)、路由器的端口地址，每一個(gè)IP地址在全球是唯一的，是運(yùn)行TCP/IP協(xié)議的唯一標(biāo)識(shí)。二、Internet與TCP/IP協(xié)議TCP/IP：傳輸控制38三、Internet網(wǎng)絡(luò)地址商業(yè)軍事教育網(wǎng)絡(luò)機(jī)構(gòu)政府機(jī)構(gòu)非贏利組織commiledunetgovorg三、Internet網(wǎng)絡(luò)地址商業(yè)軍事教育網(wǎng)絡(luò)機(jī)構(gòu)政府39四、連接Internet的方式1、撥號(hào)連接2、ISDN接入（一線通）傳輸速率：64Kbps或128Kbps3、企業(yè)級(jí)用戶的接入技術(shù)4、其他的用戶級(jí)接入技術(shù)CableModem、WebTV、ADSL(1,8M)、手機(jī)上網(wǎng)、Lan(100,100M)四、連接Internet的方式1、撥號(hào)連接40§1.2Web服務(wù)器瀏覽器GGI中間件數(shù)據(jù)庫(kù)服務(wù)器HTTPLAN/WANSQLHTML§1.2Web服務(wù)器瀏覽器GGI中間件數(shù)據(jù)庫(kù)HTTPL412、HTTP超文本傳輸協(xié)議3、WebServer的性能由流量、響應(yīng)時(shí)間來(lái)衡量4、影響WebServer的因素硬件方面：CPU、內(nèi)存、硬盤軟件方面：HTTP服務(wù)進(jìn)程、TCP/IP實(shí)現(xiàn)、文件系統(tǒng)、數(shù)據(jù)庫(kù)、GGI程序。2、HTTP超文本傳輸協(xié)議42二、WindowsWeb服務(wù)器的建立參見(jiàn)教材P10—P15二、WindowsWeb服務(wù)器的建立參見(jiàn)教材P10—P1543網(wǎng)頁(yè)設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)

44一、基礎(chǔ)知識(shí)（一）基本概念1、網(wǎng)頁(yè)網(wǎng)頁(yè)就是在瀏覽器上看到的一頁(yè)信息，類似于書中的一頁(yè)，也稱為Web頁(yè)。2、網(wǎng)站將大量的網(wǎng)頁(yè)放置在服務(wù)器上供人瀏覽，就構(gòu)成了一個(gè)網(wǎng)站。3、主頁(yè)每個(gè)網(wǎng)站都有一個(gè)最基本的網(wǎng)頁(yè)，叫主頁(yè)。一、基礎(chǔ)知識(shí)（一）基本概念45（二）網(wǎng)頁(yè)制作軟件1、網(wǎng)頁(yè)設(shè)計(jì)軟件a、DreamweaverDreamweaver是目前設(shè)計(jì)網(wǎng)頁(yè)最好的軟件，它能生成高效簡(jiǎn)潔的HTML源代碼，支持動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，也可插入JavaScript程序。b、FrontpageFrontpage只能制作一些簡(jiǎn)單的、質(zhì)量不高的網(wǎng)頁(yè)。（二）網(wǎng)頁(yè)制作軟件462、圖象處理軟件a、專門網(wǎng)頁(yè)圖象處理軟件PhotodrawFireworksb、其它圖象處理軟件PhotoshopCoreldreawFreeHand3、動(dòng)畫制作軟件Flash2、圖象處理軟件47（三）Internet概述1、Internet的概念2、Internet的起源3、IP地址和域名連接在Internet上的電腦，都叫做主機(jī)，每臺(tái)主機(jī)都有一個(gè)唯一的號(hào)碼，這便是IP地址。IP地址有四組數(shù)構(gòu)成，每組8位，共32位（二進(jìn)制），每組范圍0—255，在IP地址的4組數(shù)字中，包含了兩部分信息：網(wǎng)絡(luò)代號(hào)和主機(jī)代號(hào)。在Internet上共有A、B、C、三類網(wǎng)絡(luò)類型。（三）Internet概述48用w.x.y.z表示一個(gè)IP地址IP地址分類類型W值網(wǎng)絡(luò)ID主機(jī)ID網(wǎng)絡(luò)總數(shù)一個(gè)網(wǎng)絡(luò)中主機(jī)總數(shù)A1--126wx.y.z12616777214B128--191w.xy,.z1638465534C192--223w.x.yz2097151254域名域名是用英文來(lái)表示IP地址。域名的一般格式為：主機(jī)名.機(jī)構(gòu)名.類別名.地區(qū)名用w.x.y.z表示一個(gè)IP地址類型W值網(wǎng)絡(luò)ID主機(jī)ID網(wǎng)絡(luò)49

Dreamweaver4

Dreamweaver4

50一、Dreamweaver簡(jiǎn)介1、Dreamweaver是Macromedia公司的出品的一款"所見(jiàn)即所得"的網(wǎng)頁(yè)編輯工具。與Frontpage不同，Deamweaver采用的是Mac機(jī)浮動(dòng)面版的設(shè)計(jì)風(fēng)格，對(duì)于初學(xué)者來(lái)說(shuō)可能會(huì)感到不適應(yīng)。但當(dāng)你習(xí)慣了其操作方式后，就會(huì)發(fā)現(xiàn)Dreamweaver的直觀性與高效性是Frontpage所無(wú)法比擬的。

一、Dreamweaver簡(jiǎn)介1、Dreamweaver是51一、Dreamweaver簡(jiǎn)介2、Dreamweaver對(duì)于DHTML（動(dòng)態(tài)網(wǎng)頁(yè)）的支持特別好，可以輕而易舉地做出很多眩目的互動(dòng)頁(yè)面特效。插件式的程序設(shè)計(jì)使得其功能可以無(wú)限的擴(kuò)展。Dreamweaver與Flash、Firework并稱為Macromedia的網(wǎng)頁(yè)制作三劍客，由于是同一公司的產(chǎn)品，因而在功能上有著一個(gè)非常緊密的結(jié)合。因此，說(shuō)Dreamweaver是高級(jí)網(wǎng)頁(yè)制作的首選并不為過(guò)。

一、Dreamweaver簡(jiǎn)介2、Dreamweaver對(duì)52一、Dreamweaver簡(jiǎn)介3、Dreamweaver最新的版本為:Dreamweaver4.0和DreamweaverUltraDev4.0。后者支持ASP、JSP等程序的編寫與調(diào)試。對(duì)于初學(xué)者來(lái)講，這兩個(gè)版本的Dreamweaver在使用上不會(huì)有太大的差別。而本書則以最新的Dreamweaver4.0為基準(zhǔn)。一、Dreamweaver簡(jiǎn)介3、Dreamweaver53二、初步認(rèn)識(shí)Dreamweaver1、Dreamweaver的啟動(dòng)Dreamweaver的安裝過(guò)程非常簡(jiǎn)單，一但成功安裝后，就可以在開(kāi)始菜單找到Dreamweaver的選項(xiàng)：二、初步認(rèn)識(shí)Dreamweaver1、Dreamweav54二、初步認(rèn)識(shí)Dreamweaver2、編輯窗口第一次啟動(dòng)Dreamweaver，首先看到的是Dreamweaver的編輯窗口：主菜單：在這里可以找到編輯窗口的的絕大部分功能工具欄：是Dreamweaver4的新增功能對(duì)象面板（Objects）：在網(wǎng)頁(yè)編輯的過(guò)程中，通過(guò)單擊對(duì)象面板的按鈕來(lái)為網(wǎng)頁(yè)添加相應(yīng)的元素，如圖片、表格、層、Flash。我們稱這些元素為為對(duì)象。單擊對(duì)象面板上的向下箭頭，能插入其他類型的對(duì)象，如特殊字符（Characters）、表單Froms）等。屬性面板：用于顯示所選中的網(wǎng)頁(yè)元素的屬性，并可在屬性面板上修改。選擇不同的網(wǎng)頁(yè)元素，屬性面板所顯示的內(nèi)容也有所不同，例如圖片和表格所顯示的屬性是不一樣的。此外，點(diǎn)擊屬性面板右下角的小三角可以根據(jù)使用的需要，縮小或展開(kāi)屬性面板，建議一般情況下都設(shè)置為展開(kāi)模式。面板組（又稱可?？扛?dòng)面板）：Dreamweaver還有很多很多其他的浮動(dòng)面板，我們可以根據(jù)自己的喜好，將不同的浮動(dòng)面板重新組合，這就是所謂的面板組。在Photoshop中，也有類似的概念。:快速啟動(dòng)欄（又稱啟動(dòng)面板）：用于顯示或隱藏響應(yīng)的浮動(dòng)面板。啟動(dòng)面板與右下角的微型啟動(dòng)欄一一對(duì)應(yīng)；其中是切換到站點(diǎn)管理器，是切換到行為面板，是查看網(wǎng)頁(yè)源代碼編輯區(qū)域：以“所見(jiàn)即所得”的方式顯示被編輯網(wǎng)頁(yè)內(nèi)容二、初步認(rèn)識(shí)Dreamweaver2、編輯窗口主菜單：在這55二、初步認(rèn)識(shí)Dreamweaver3、【提示1】如果屏幕上的浮動(dòng)面板位置過(guò)于凌亂，甚至超出了桌面范圍而不便操作的時(shí)候（在改變了顯示器的分辨率后尤其容易出現(xiàn)這種情況），可以選取主菜單中的“Window>ArrangePanels”自動(dòng)重排浮動(dòng)面板?！咎崾?】以下是幾個(gè)常用的浮動(dòng)面板的快速打開(kāi)和關(guān)閉的熱鍵，好好記住，因?yàn)閷?huì)再制作過(guò)程中被頻繁地使用：

Properties屬性面板：Crtl+F3

CSSStyles樣式面板：Shift+F11

Behaviors行為面板：Shift+F3

Objects對(duì)象面板：Crtl+F2二、初步認(rèn)識(shí)Dreamweaver3、【提示1】如果屏幕56二、初步認(rèn)識(shí)Dreamweaver

4、站點(diǎn)窗口

站點(diǎn)窗口是Dreamweaver另一個(gè)重要的窗口，左半部是遠(yuǎn)程站點(diǎn)的目錄，一般顯示為空，只有在FTP連通狀態(tài)下才有顯示內(nèi)容；右半部是當(dāng)前編輯中的本地目錄，站點(diǎn)窗口的作用其實(shí)就是直觀而方便地讓你讓像管理硬盤里的文件一樣管理的你的站點(diǎn)二、初步認(rèn)識(shí)Dreamweaver57

在以后網(wǎng)頁(yè)制作的過(guò)程中，將會(huì)頻繁地在編輯窗口和站點(diǎn)窗口之間切換。