《網(wǎng)頁制作》課件-項(xiàng)目一 認(rèn)識(shí)Dreamweaver 8

Dreamweaver8中文版

網(wǎng)頁制作基礎(chǔ)項(xiàng)目一認(rèn)識(shí)Dreamweaver8任務(wù)一案例賞析任務(wù)二了解Dreamweaver8任務(wù)三制作一個(gè)簡(jiǎn)單的網(wǎng)頁實(shí)訓(xùn)制作“送孟浩然之廣陵”網(wǎng)頁本項(xiàng)目主要是讓讀者對(duì)網(wǎng)頁制作軟件Dreamweaver8有一個(gè)總體認(rèn)識(shí)。首先欣賞一些優(yōu)秀案例，然后學(xué)習(xí)Dreamweaver8的功能和作用，最后通過制作一個(gè)簡(jiǎn)單的網(wǎng)頁來認(rèn)識(shí)Dreamweaver8的工作界面，并學(xué)習(xí)常用工具欄和面板的基本使用方法。

任務(wù)一案例賞析

下面來欣賞幾個(gè)優(yōu)秀網(wǎng)頁，希望通過欣賞，讀者能夠增強(qiáng)對(duì)網(wǎng)頁設(shè)計(jì)與制作的興趣。1、北京大學(xué)主頁2、海信集團(tuán)主頁3、網(wǎng)易主頁4、百度主頁結(jié)構(gòu)清晰、布局簡(jiǎn)潔，充分結(jié)合了現(xiàn)代教育理念，將學(xué)習(xí)與網(wǎng)絡(luò)合理地進(jìn)行了整合，實(shí)現(xiàn)了教學(xué)對(duì)象廣泛、使用方便、時(shí)間自由以及節(jié)約成本等特點(diǎn)。1、北京大學(xué)主頁從內(nèi)容上看，其注重宣傳企業(yè)的品牌和形象以及產(chǎn)品和服務(wù)。從結(jié)構(gòu)上看，頁面比較簡(jiǎn)潔，內(nèi)容布局合理，值得學(xué)習(xí)和借鑒。

2、海信集團(tuán)主頁其內(nèi)容豐富，門類眾多。主體部分的布局模式采用的是左右兩欄結(jié)構(gòu)，這也是一種常用的網(wǎng)頁布局模式。由于門戶網(wǎng)站眾多的欄目和內(nèi)容，因此，在設(shè)計(jì)網(wǎng)頁時(shí)合理地劃分欄目結(jié)構(gòu)是非常重要的一項(xiàng)工作。

3、網(wǎng)易主頁頁面比較簡(jiǎn)潔，除了網(wǎng)站標(biāo)志和頁腳信息，主體部分只有簡(jiǎn)單的一行文字和一些表單域。讀者在學(xué)習(xí)網(wǎng)頁制作時(shí)，百度這種典雅的用戶界面設(shè)計(jì)是值得借鑒的。4、百度主頁任務(wù)二了解Dreamweaver8

1、基本概況

Dreamweaver是美國(guó)Macromedia公司（1984年成立于美國(guó)芝加哥，2005年被Adobe公司并購）開發(fā)的集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得式網(wǎng)頁編輯器，是針對(duì)專業(yè)網(wǎng)頁設(shè)計(jì)師而設(shè)計(jì)的視覺化網(wǎng)頁開發(fā)工具，它可以讓設(shè)計(jì)師輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁。由Macromedia公司開發(fā)的Dreamweaver與Flash、Fireworks一起被稱為網(wǎng)頁三劍客，在Macromedia公司被Adobe公司并購后，2007年由Adobe公司發(fā)布的網(wǎng)頁三劍客是指Dreamweaver、Flash和Photoshop。

2、優(yōu)點(diǎn)對(duì)于初學(xué)者來說，Deamweaver的可視化效果讓用戶比較容易入門，具體表現(xiàn)在兩個(gè)方面：一是靜態(tài)頁面的編排，這和MicrosoftOffice等辦公可視化軟件是類似的；二是交互式網(wǎng)頁的制作，這是它與其他網(wǎng)頁制作軟件不同的重要特征。利用Deamweaver8可以比較容易地制作交互式網(wǎng)頁，很容易鏈接到Access、SQLServer等數(shù)據(jù)庫。

3、應(yīng)用領(lǐng)域

Dreamweaver集建立站點(diǎn)、布局網(wǎng)頁、開發(fā)應(yīng)用程序、編輯代碼和發(fā)布網(wǎng)站等功能于一體，可輕松地完成網(wǎng)站開發(fā)的所有工作，因此，在各個(gè)行業(yè)領(lǐng)域都得到了廣泛的應(yīng)用，如個(gè)人網(wǎng)站、教育科研網(wǎng)站、企業(yè)網(wǎng)站、商業(yè)網(wǎng)站、政府網(wǎng)站、公益性網(wǎng)站以及其他網(wǎng)站等。任務(wù)三制作一個(gè)簡(jiǎn)單的網(wǎng)頁（一）定義站點(diǎn)（二）創(chuàng)建和保存文件（三）設(shè)置文本屬性（四）保存工作區(qū)布局（一）定義站點(diǎn)需要掌握的內(nèi)容主要有：

1、【起始頁】對(duì)話框的構(gòu)成和作用

2、定義靜態(tài)站點(diǎn)的基本過程1、【起始頁】對(duì)話框的構(gòu)成和作用

其中有三項(xiàng)列表：【打開最近項(xiàng)目】、【創(chuàng)建新項(xiàng)目】和【從范例創(chuàng)建】。2、定義靜態(tài)站點(diǎn)的基本過程(二）創(chuàng)建和保存文件

需要掌握的內(nèi)容主要有：

1、創(chuàng)建文件的方法

2、保存文件的方法

3、Dreamweaver8窗口界面

4、浮動(dòng)面板組

5、【標(biāo)準(zhǔn)】工具欄

6、【文件】面板1、創(chuàng)建文件的方法在【起始頁】對(duì)話框創(chuàng)建文件的基本方法是，單擊【創(chuàng)建新項(xiàng)目】／【HTML】命令，創(chuàng)建一個(gè)空白的HTML文檔。2、保存文件的方法

（1）單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕保存文件。（2）選擇主菜單中的【文件】/【保存】命令或【另存為】命令保存文件。3、Dreamweaver8窗口界面4、浮動(dòng)面板組在Dreamweaver8窗口中的工具欄或各種面板，可以通過鼠標(biāo)操作將它們從窗口中脫離出來成為浮動(dòng)工具欄或面板。浮動(dòng)面板的顯示與隱藏命令都集中在主菜單欄中的【窗口】菜單中。5、【標(biāo)準(zhǔn)】工具欄選擇主菜單中的【查看】／【工具欄】／【標(biāo)準(zhǔn)】命令顯示【標(biāo)準(zhǔn)】工具欄。6、【文件】面板（三）設(shè)置文本屬性

需要掌握的內(nèi)容主要有：

1、【文檔】工具欄

2、【屬性】面板

3、【插入】面板

4、水平線及其屬性設(shè)置

1、【文檔】工具欄

（1）單擊【設(shè)計(jì)】按鈕將編輯區(qū)域切換到【設(shè)計(jì)】視圖，在其中可以對(duì)網(wǎng)頁進(jìn)行編輯。（2）單擊【代碼】按鈕，可以將編輯區(qū)域切換到【代碼】視圖，在其中可以編寫或修改網(wǎng)頁源代碼。（3）單擊【拆分】按鈕，可以將編輯區(qū)域切換到【拆分】視圖，在該視圖中整個(gè)編輯區(qū)域分為上下兩個(gè)部分，上方為【代碼】視圖，下方為【設(shè)計(jì)】視圖。2、【屬性】面板

如果沒有顯示【屬性】面板，在主菜單中選擇【窗口】／【屬性】命令即可顯示。3、【插入】面板

【插入】面板通常有兩種表現(xiàn)形式：制表符格式和菜單格式。4、水平線及其屬性設(shè)置在【插入】/【HTML】面板中單擊（水平線）按鈕，或在主菜單中選擇【插入】/【HTML】/【水平線】命令插入一條水平線。（四）保存工作區(qū)布局

1、掌握保存工作區(qū)布局的方法

在主菜單欄中選擇【窗口】／【工作區(qū)布局】／【保存當(dāng)前】命令。

2、掌握管理工作區(qū)布局的方法

在主菜單中選擇【窗口】／【工作區(qū)布局】／【管理】命令。實(shí)訓(xùn)制作“送孟浩然之廣陵”網(wǎng)頁下面通過實(shí)訓(xùn)來增強(qiáng)讀者對(duì)Dreamweaver8窗口的組成、工具欄和面板的功能及基本操作的感性認(rèn)識(shí)。要求：首先定義一個(gè)靜態(tài)站點(diǎn)，然后創(chuàng)建和編排網(wǎng)頁文檔。制作