《網頁制作》課件-項目一 認識Dreamweaver 8

Dreamweaver8中文版

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

任務一案例賞析

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

2、海信集團主頁其內容豐富，門類眾多。主體部分的布局模式采用的是左右兩欄結構，這也是一種常用的網頁布局模式。由于門戶網站眾多的欄目和內容，因此，在設計網頁時合理地劃分欄目結構是非常重要的一項工作。

3、網易主頁頁面比較簡潔，除了網站標志和頁腳信息，主體部分只有簡單的一行文字和一些表單域。讀者在學習網頁制作時，百度這種典雅的用戶界面設計是值得借鑒的。4、百度主頁任務二了解Dreamweaver8

1、基本概況

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

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

3、應用領域

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

1、【起始頁】對話框的構成和作用

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

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

需要掌握的內容主要有：

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

2、保存文件的方法

3、Dreamweaver8窗口界面

4、浮動面板組

5、【標準】工具欄

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

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

需要掌握的內容主要有：

1、【文檔】工具欄

2、【屬性】面板

3、【插入】面板

4、水平線及其屬性設置

1、【文檔】工具欄

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

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

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

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

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

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

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