項(xiàng)目一認(rèn)識(shí)Dreamweaver8-PPT

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

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

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

4、種典雅的用戶界面的用戶界面設(shè)計(jì)是值得設(shè)計(jì)是值得借鑒的。借鑒的。 （一）了解網(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)頁格式的文件。件。 要想制作出精致美觀、豐富生動(dòng)的網(wǎng)頁，往往需要想制作出精致美觀、豐富生動(dòng)的網(wǎng)頁，往往需要多種軟件的互相配合，如網(wǎng)頁制作軟件要多種軟件的互相配合，如網(wǎng)頁制作軟件Dreamweaver，圖像處理軟件，圖像處理軟件Fireworks或或Photoshop，動(dòng)畫創(chuàng)作軟件，動(dòng)畫創(chuàng)作軟件Flash等。等。 1、概況、概況 Dreamweaver是美國(guó)是美國(guó)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è)級(jí)別的開發(fā)工具。成為專業(yè)級(jí)別的開發(fā)工具。2003年年9月，月，Macromedia發(fā)布發(fā)布Dreamweaver MX 2004，提供了對(duì)，提供了對(duì)CSS的支持，促進(jìn)了網(wǎng)頁專業(yè)人員對(duì)的支持，促進(jìn)了網(wǎng)頁專業(yè)人員對(duì)CSS的普遍采用。的普遍采用。2005年年8月，月，Macromedia發(fā)布發(fā)布Dreamweaver 8，加強(qiáng)了對(duì)，加強(qiáng)了對(duì)XML和和CSS的技術(shù)支持，并簡(jiǎn)化了工作流程。的技術(shù)支持，并簡(jiǎn)化了工作流程。2005年底，年底，Macro

7、media公司被公司被Adobe公司并購(gòu)，自此，公司并購(gòu)，自此，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)點(diǎn)、優(yōu)點(diǎn) 對(duì)于初學(xué)者來說，對(duì)于初學(xué)者來說，Deamweaver的可視的可視化效果讓用戶比較容易入門，具體表現(xiàn)在化效果讓用戶比較容易入門，具體表現(xiàn)在兩個(gè)方面：一是靜態(tài)頁面的編排，這和兩個(gè)方面：一是靜態(tài)頁面的編排，

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

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

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

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

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

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