項目一認識Dreamweaver8-PPT

1、任務一任務一 網(wǎng)頁案例賞析網(wǎng)頁案例賞析任務二任務二 認識網(wǎng)頁制作工具認識網(wǎng)頁制作工具任務三任務三 制作一個簡單的網(wǎng)頁制作一個簡單的網(wǎng)頁實訓實訓 定義站點并創(chuàng)建網(wǎng)頁定義站點并創(chuàng)建網(wǎng)頁 本項目主要是讓讀者對網(wǎng)頁制作軟件本項目主要是讓讀者對網(wǎng)頁制作軟件Dreamweaver 8有一個總體認識。首先欣有一個總體認識。首先欣賞一些優(yōu)秀網(wǎng)頁案例，然后了解常用網(wǎng)頁賞一些優(yōu)秀網(wǎng)頁案例，然后了解常用網(wǎng)頁制作工具以及制作工具以及Dreamweaver的發(fā)展歷程、的發(fā)展歷程、基本功能和作用，最后通過制作一個簡單基本功能和作用，最后通過制作一個簡單的網(wǎng)頁來認識的網(wǎng)頁來認識Dreamweaver 8的工作界面，的工作界

2、面，并學習常用工具欄和面板的基本使用方法。并學習常用工具欄和面板的基本使用方法。 通過網(wǎng)頁案例欣賞，增強讀者對網(wǎng)頁設計通過網(wǎng)頁案例欣賞，增強讀者對網(wǎng)頁設計與制作的興趣。與制作的興趣。 1、北京大學主頁、北京大學主頁2、海信集團主頁、海信集團主頁3、網(wǎng)易體育主頁、網(wǎng)易體育主頁4、百度主頁、百度主頁結構清晰、結構清晰、布局簡潔，布局簡潔，充分結合了充分結合了現(xiàn)代教育理現(xiàn)代教育理念，將學習念，將學習與網(wǎng)絡合理與網(wǎng)絡合理地進行了整地進行了整合，實現(xiàn)了合，實現(xiàn)了教學對象廣教學對象廣泛、使用方泛、使用方便、時間自便、時間自由以及節(jié)約由以及節(jié)約成本等特點。成本等特點。 從內容上看，從內容上看，其注重宣傳企其

3、注重宣傳企業(yè)的品牌和形業(yè)的品牌和形象以及產(chǎn)品和象以及產(chǎn)品和服務。從結構服務。從結構上看，頁面比上看，頁面比較簡潔，內容較簡潔，內容布局合理，值布局合理，值得學習和借鑒。得學習和借鑒。 主體部分的主體部分的布局模式采布局模式采用的是左中用的是左中右三欄結構，右三欄結構，這也是常用這也是常用的網(wǎng)頁布局的網(wǎng)頁布局模式之一。模式之一。在欄目和內在欄目和內容較多時，容較多時，合理劃分欄合理劃分欄目結構是非目結構是非常重要。常重要。 頁面比較簡頁面比較簡潔，除了網(wǎng)潔，除了網(wǎng)站標志和頁站標志和頁腳信息，主腳信息，主體部分只有體部分只有簡單的一行簡單的一行文字和一些文字和一些表單域。百表單域。百度這種典雅度這

4、種典雅的用戶界面的用戶界面設計是值得設計是值得借鑒的。借鑒的。 （一）了解網(wǎng)頁制作工具（一）了解網(wǎng)頁制作工具 （二）了解（二）了解Dreamweaver 按工作方式不同，通?？梢詫⒕W(wǎng)頁制作軟件分為按工作方式不同，通?？梢詫⒕W(wǎng)頁制作軟件分為兩類，一類是所見即所得式的網(wǎng)頁編輯軟件，如兩類，一類是所見即所得式的網(wǎng)頁編輯軟件，如Visual Studio、Dreamweaver、FrontPage、HotMetal等，另一類是直接編寫等，另一類是直接編寫HTML源代碼的源代碼的軟件，如軟件，如Hotdog、Editplus、HomeSite等，也可等，也可以直接使用所熟悉的文字編輯器來編寫源代碼，以直

5、接使用所熟悉的文字編輯器來編寫源代碼，如記事本、寫字板等，但要保存成網(wǎng)頁格式的文如記事本、寫字板等，但要保存成網(wǎng)頁格式的文件。件。 要想制作出精致美觀、豐富生動的網(wǎng)頁，往往需要想制作出精致美觀、豐富生動的網(wǎng)頁，往往需要多種軟件的互相配合，如網(wǎng)頁制作軟件要多種軟件的互相配合，如網(wǎng)頁制作軟件Dreamweaver，圖像處理軟件，圖像處理軟件Fireworks或或Photoshop，動畫創(chuàng)作軟件，動畫創(chuàng)作軟件Flash等。等。 1、概況、概況 Dreamweaver是美國是美國Macromedia公司于公司于1997年發(fā)布的集網(wǎng)頁制年發(fā)布的集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得式的網(wǎng)頁編輯器。作和網(wǎng)

6、站管理于一身的所見即所得式的網(wǎng)頁編輯器。2002年年5月，月，Macromedia發(fā)布發(fā)布Dreamweaver MX，Dreamweaver一躍一躍成為專業(yè)級別的開發(fā)工具。成為專業(yè)級別的開發(fā)工具。2003年年9月，月，Macromedia發(fā)布發(fā)布Dreamweaver MX 2004，提供了對，提供了對CSS的支持，促進了網(wǎng)頁專業(yè)人員對的支持，促進了網(wǎng)頁專業(yè)人員對CSS的普遍采用。的普遍采用。2005年年8月，月，Macromedia發(fā)布發(fā)布Dreamweaver 8，加強了對，加強了對XML和和CSS的技術支持，并簡化了工作流程。的技術支持，并簡化了工作流程。2005年底，年底，Macro

7、media公司被公司被Adobe公司并購，自此，公司并購，自此，Dreamweaver就歸就歸Adobe公司所有。公司所有。2007年年7月，月，Adobe公司發(fā)布公司發(fā)布Dreamweaver CS3。2008年年9月發(fā)布月發(fā)布Dreamweaver CS4。2010年年4月發(fā)布月發(fā)布Dreamweaver CS5。2011年年4月發(fā)布月發(fā)布Dreamweaver CS5.5。 2、優(yōu)點、優(yōu)點 對于初學者來說，對于初學者來說，Deamweaver的可視的可視化效果讓用戶比較容易入門，具體表現(xiàn)在化效果讓用戶比較容易入門，具體表現(xiàn)在兩個方面：一是靜態(tài)頁面的編排，這和兩個方面：一是靜態(tài)頁面的編排，

8、這和Microsoft Office等辦公可視化軟件是類似等辦公可視化軟件是類似的；二是交互式網(wǎng)頁的制作，這是它與其的；二是交互式網(wǎng)頁的制作，這是它與其他網(wǎng)頁制作軟件不同的重要特征。利用他網(wǎng)頁制作軟件不同的重要特征。利用Deamweaver 8可以比較容易地制作交互式可以比較容易地制作交互式網(wǎng)頁，很容易鏈接到網(wǎng)頁，很容易鏈接到Access、SQL Server等數(shù)據(jù)庫。等數(shù)據(jù)庫。 （一）（一） 定義站點定義站點 （二）（二） 創(chuàng)建和保存文件創(chuàng)建和保存文件 （三）（三） 設置文本屬性設置文本屬性 （四）（四） 保存工作區(qū)布局保存工作區(qū)布局 需要掌握的內容主要有：需要掌握的內容主要有： 1、【起始

9、頁】對話框的構成和作用、【起始頁】對話框的構成和作用 2、定義靜態(tài)站點的基本過程、定義靜態(tài)站點的基本過程 其中有三其中有三項列表：項列表：【打開最近【打開最近項目】、項目】、【創(chuàng)建新項【創(chuàng)建新項目】和【從目】和【從范例創(chuàng)建】。范例創(chuàng)建】。 需要掌握的內容主要有：需要掌握的內容主要有： 1、創(chuàng)建文件的方法、創(chuàng)建文件的方法 2、保存文件的方法、保存文件的方法 3、Dreamweaver 8 窗口界面窗口界面 4、浮動面板組、浮動面板組 5、【標準】工具欄、【標準】工具欄 6、【文件】面板、【文件】面板 在【起始頁】對話框創(chuàng)建文件的基本方法是，單擊在【起始頁】對話框創(chuàng)建文件的基本方法是，單擊【創(chuàng)建新

10、項目】【創(chuàng)建新項目】【HTML】命令，創(chuàng)建一個空白的】命令，創(chuàng)建一個空白的HTML文檔。文檔。 （1）單擊【標準】工具欄中的【保存】按）單擊【標準】工具欄中的【保存】按鈕保存文件。鈕保存文件。 （2）選擇主菜單中的【文件】）選擇主菜單中的【文件】/【保存】命【保存】命令或【另存為】命令保存文件。令或【另存為】命令保存文件。 在在Dreamweaver 8窗口中的工具欄或各種面板，可以通窗口中的工具欄或各種面板，可以通過鼠標操作將它們從窗口中脫離出來成為浮動工具欄或過鼠標操作將它們從窗口中脫離出來成為浮動工具欄或面板。浮動面板的顯示與隱藏命令都集中在主菜單欄中面板。浮動面板的顯示與隱藏命令都集中

11、在主菜單欄中的【窗口】菜單中。的【窗口】菜單中。 選擇主菜單中的【查看】【工具欄】【標準】命令選擇主菜單中的【查看】【工具欄】【標準】命令顯示【標準】工具欄。顯示【標準】工具欄。 需要掌握的內容主要有：需要掌握的內容主要有： 1、【文檔】工具欄、【文檔】工具欄 2、【屬性】面板、【屬性】面板 3、【插入】面板、【插入】面板 4、水平線及其屬性設置、水平線及其屬性設置 （1）單擊【設計】按鈕將編輯區(qū)域切換到【設計】）單擊【設計】按鈕將編輯區(qū)域切換到【設計】視圖，在其中可以對網(wǎng)頁進行編輯。視圖，在其中可以對網(wǎng)頁進行編輯。 （2）單擊【代碼】按鈕，可以將編輯區(qū)域切換到）單擊【代碼】按鈕，可以將編輯區(qū)

12、域切換到【代碼】視圖，在其中可以編寫或修改網(wǎng)頁源代碼?！敬a】視圖，在其中可以編寫或修改網(wǎng)頁源代碼。 （3）單擊【拆分】按鈕，可以將編輯區(qū)域切換到）單擊【拆分】按鈕，可以將編輯區(qū)域切換到【拆分】視圖，在該視圖中整個編輯區(qū)域分為上下兩個【拆分】視圖，在該視圖中整個編輯區(qū)域分為上下兩個部分，上方為【代碼】視圖，下方為【設計】視圖。部分，上方為【代碼】視圖，下方為【設計】視圖。 如果沒有顯示【屬性】面板，在主菜單中選擇【窗口】如果沒有顯示【屬性】面板，在主菜單中選擇【窗口】【屬性】命令即可顯示。【屬性】命令即可顯示。 【插入】面板通常有兩種表現(xiàn)形式：制表符格式和菜【插入】面板通常有兩種表現(xiàn)形式：制表

13、符格式和菜單格式。單格式。 在【插入】在【插入】/【HTML】面板中單擊】面板中單擊 （水平線）（水平線）按鈕，或在主菜單中選擇【插入】按鈕，或在主菜單中選擇【插入】/【HTML】/ 【水平【水平線】命令插入一條水平線。線】命令插入一條水平線。 1、掌握保存工作區(qū)布局的方法、掌握保存工作區(qū)布局的方法 在主菜單欄中選擇【窗口】【工在主菜單欄中選擇【窗口】【工作區(qū)布局】【保存當前】命令。作區(qū)布局】【保存當前】命令。 2、掌握管理工作區(qū)布局的方法、掌握管理工作區(qū)布局的方法 在主菜單中選擇【窗口】在主菜單中選擇【窗口】【工作區(qū)布局】【管理】命令?！竟ぷ鲄^(qū)布局】【管理】命令。 下面通過實訓來增強讀者對下面通過實訓來增強讀者對Dreamweaver 8窗口的組成、窗口的組成、工具欄和面板的功能及基本操作的感性認識。工具欄和面板的功能及基本操作的感性認識。 要求：首先定義一個靜態(tài)站點，然后創(chuàng)建和編排網(wǎng)頁要求：首先定義一個靜態(tài)站點，然后創(chuàng)建和編排網(wǎng)頁文檔文檔。制作“送孟浩然之廣陵”網(wǎng)頁 本項目在對一些優(yōu)秀網(wǎng)頁進行賞析的基礎本項目在對一些優(yōu)秀網(wǎng)頁進行賞析的基礎上，介