DreamWeaver簡介

DreamWeaver簡介11.DreamWeaver概況介紹2.各項功能介紹

a.整體主菜單簡介

b.各部分菜單簡介3.以制作一網站為范例簡介4.需要注意的一些細節問題1.DreamWeaver概況介紹2DreamWeaver概況介紹DreamWeaver是Macromedia公司開發出的用于設計、撰寫和開發網站、網頁及網絡應用程序的專業HTML編輯器。它集HTML程序代碼編緝器，頁面編緝器等多種視覺編輯環境于一體,能夠提供多種編輯環境。Dreamweaver中的視覺編輯功能在不撰寫任何一行程序代碼的情況下就可以快速建立網頁?？梢詸z視所有網站項目或資源，并將它們從方便使用的面板直接拖曳到文件中,也可以在MacromediaDreamWeaver概況介紹DreamWeaver是3Fireworks或其它圖形應用程序中建立和編輯影像,然后將它們直接匯入到Dreamweaver，或新增MacromediaFlash對象，來簡化開發工作流程。Dreamweaver也提供了功能完整的程序代碼撰寫環境,包括程序代碼編輯工具(如程序代碼色彩標示和標簽完成)以及HTML，階層式樣式表(CSS)JavaScript,ColdFusion標記語言(CFML),MicrosoftActiveServerPages(ASP)以及JavaServerPages(JSP)的參考數據。MacromediaRoundtripHTML技術不需要重新格式化程序碼,就可以匯入您手動撰寫的HTML文件，Fireworks或其它圖形應用程序中建立和編輯影4然后您可以使用偏好的格式樣式來重新格式化程式碼。Dreamweaver也能使用如CFML、ASP.NET、ASP、JSP和PHP等服務器技術，建立動態支持數據庫的網絡應用程序。Dreamweaver可以完全自訂。您可以根據個人喜好建立自己的對象和命令,修改快速鍵,甚至撰寫JavaScript用新的行為,屬性檢測器和網站報告來擴充Dreamweaver功能。然后您可以使用偏好的格式樣式來重新格式化程5操作界面DreamWeaverMX由兩個部分組成，即頁面編輯器和站點管理器。1.頁面編輯器:分為五個部分：菜單欄、頁面編輯區、工具欄、控制面板、狀態欄。其中控制面板有屬性面板、對象面板、設計面板、樣式面板幫助面板等。2.站點管理器:站點管理器窗口顯示了站點地操作界面DreamWeaverMX由兩個部分組成，即頁面6圖，和當前網站中的文件列表。一般來說，在建設一網站前,應先建立好站點，再開始制作網頁,這樣可以保證頁面內文件鏈接的正確性。圖，和當前網站中的文件列表。一般來說，在7DreamWeaver制作基礎一、創建網頁啟動DreamweaverMX，就會自動生成一個白色背景的文件工作區，這里就是設計和制作網頁的地方，在這里可以根據不同喜好來選擇程序源代碼編輯方式或頁面編輯方式,在頁面編輯方式中,可以直接輸入網頁設計過程中所需要的文字、圖片、表格、Flash動畫等。網頁的背景顏色的，以及文字的顏色都是可以通過“頁面屬性”來設置的。DreamWeaver制作基礎一、創建網頁8二、文字的編輯可以直接在網頁中輸入文字，可以在【Text】下設置文字的格式，如字體、字號、顏色、粗體、斜體，段落居左、居中及居右，添加項目符號及編號等。此外，還可以利用HTML樣式和CSS樣式表對文字進行頁面的統一格式設置。也可以通過屬性面板來更改文字的大小、顏色、字體等。二、文字的編輯9三、插入圖像在網頁中插入一幅圖片時，圖片文件必須位于當前站點中。在對象面板中選擇插入圖片圖標或者通過菜單中的“插入”“圖片”，此時系統將打開“選擇圖像源文件”對話框。找到需要插入的圖片文件，選擇“Select”,確定。Dreamwaver支持常用的網頁圖片格式有擴展名為“GIF”、“JPG”、“JPEG”、“PNG”的圖形文件。三、插入圖像10四、插入鼠標變換圖片該圖片對象的特點是當鼠標經過該圖片時,圖片內容會自動更新。實際上，它是由兩幅圖片組成的，一幅為主圖片，顯示在頁面中；一幅為滾動圖片，當鼠標經過圖片所在區域時顯示。單擊對象面板中的圖標，或者選擇【插入】菜單的“影像對象”子菜單中的“鼠標變換影像”命令可實現該操作。四、插入鼠標變換圖片11五、創建圖片熱點在插入的圖片上，可以是交換式圖片，可以把圖片分為若干個區域，每個區被稱為“熱點”，可以為每個熱點指定相關的鏈接。當單擊某個熱點時，系統顯示相關的網頁。當繪制完熱區后，屬性面板會顯示熱區的屬性。還可以調整熱點區尺寸。五、創建圖片熱點12六、插入水平線在對象面板中選擇按鈕，在頁面中點擊，畫面會自動生成一條水平線，在水平線上單擊,可以設置水平線的寬度、高度、對齊方式、是否有陰影等參數。七、插入郵件鏈接創建郵件鏈接的作用是當瀏覽者點擊該鏈接時，系統將自動啟動計算機中的郵件發送程序。DreamWeaver常用法簡介(課件)13八、插入日期在對象面板中選擇按鈕，在頁面中點擊，會彈出對話框，可以設置日期格式、星期格式、時間格式，點擊“OK”，就會在頁面中自動加上時間。九、插入Flash對象1．插入Flash影片2．3．八、插入日期14十、表格的應用1．插入表格2．表格屬性面板表格屬性面板中的設置項對整個表格起作用，如果想對表中的某一行單獨設置，首先選中表的某一行，再利用單元格屬性面板進行設置。3．表格的選取4．添加表格內容5．單元格的合并與拆分十、表格的應用15十一、層的應用層是網頁中的一種容器，它可定位在頁面上的任意位置，并且其中可包含文本、圖像、表單等所有可直接用于文檔的元素。1．創建層2．層的大小調整3．層的移動4．層的屬性面板5．層控制面板6．層的動態效果十一、層的應用16十二、框架的應用創建普通框架集利用框架屬性面板來設置該框架是否要邊線以及邊線的顏色、邊線寬度、框架的名稱和框架中所要顯示的源文件?？梢圆榭纯蚣芗奈募脑创a，這里面只保存了框架信息和它所對應的源文件。十二、框架的應用17十三、行為面板的使用通過行為面板可以在網頁上制作出一些簡單的交互效果。行為由兩個部分組成，即事件和動作，通過事件的響應執行對應的動作。事件是用于指明執行某項動作的條件，動作實際上是一段執行特定任務的預先寫好的JavaScript代碼，如打開窗口、播放聲音等都是動作。十三、行為面板的使用18十四、模板的運用1．準備模板2．定義區域3．應用模板十四、模板的運用19各項功能介紹1.整體主菜單簡介:各項功能介紹1.整體主菜單簡介:20檔案:其具體功用1.開啟新檔:用來建立一個新的設計版面2.開啟舊檔:用來打開已經存在的頁面3.存儲:用來保存正在編輯或已經編輯完成的頁面4.另存新檔:見將正開啟的頁面保存為其它新的頁面5.……檔案:其具體功用1.開啟新檔:用來建立一個新的設計版面21編輯:其具體功用1.還原:撤消上一步的具體動作2.重做:撤消還原的動作3.剪下:剪下選定的內容4.貼上:貼上剪下選定的內容5.復制:復制剪下選定的內容6.清除:清除選定的內容7.……編輯:其具體功用1.還原:撤消上一步的具體動作22檢視:其具體功用1.程序代碼:在編輯頁面顯示出來是html語言和其它源程序2.設計:在編輯頁面顯示出設計直觀效果3.程序代碼和設計:上述二者兼有4.表格模式:用來設計的三種樣式5.尺歸,網格線:在編輯文檔時的輔助標尺6.……檢視:其具體功用1.程序代碼:在編輯頁面顯示出來是ht23插入:其具體功用1.標簽:用來插入特定的html語法標記.如:

<b></b>,<I></I>2.影像:用來插入特定的圖片3.表格:用來在特定位置插入一表格4.超鏈接,郵件:用來在特定位置插入超鏈接和郵件5.……插入:其具體功用1.標簽:用來插入特定的html語法標24修改:其具體功用1.頁面屬性:指修改頁面的寬,高等等2.表格:指修改頁面中表格的具體元素.如:

欄和列的數目3.影像:指修改頁面中需要更改的圖片4.排列順序:指修改頁面中文字和圖片或其它元素的排列順序5.對齊:指頁面中特定元素的對齊方式6.……修改:其具體功用1.頁面屬性:指修改頁面的寬,高等等25文字:其具體功用1.對齊:指將頁面中文字以一特定參考物來對齊2.大小:指改變頁面中選定文字的大小3.顏色:指改變頁面中選定文字的顏色4.字體:指改變頁面中選定文字的字體5.樣式:指改變頁面中選定文字的樣式6.……文字:其具體功用1.對齊:指將頁面中文字以一特定參考物26窗口:其具體功用1.插入:用來顯示插入特定標記2.屬性:用來顯示屬性面板3.CSS樣式:用來顯示CSS屬性面板4.圖層:用來顯示圖層屬性面板5.行為:用來顯示行為屬性面板6.組件:用來顯示組件屬性面板7.資源:用來顯示資源屬性面板8.……窗口:其具體功用1.插入:用來顯示插入特定標記27建設網站大概步驟1.對網站整體進行需求分析1.規劃整個網站的布局2.搭建整個網站的框架3.制作整個網站的模板,配置網頁4.撰寫程序代碼,填充整個網站的可編輯區域5.建立動態網頁6.附上必要的版權標識7.對整個網站進行測試,修改8.網站的上傳建設網站大概步驟1.對網站整體進行需求分析28規劃整個網站根據網站的整體功用進行需求分析,得出需要將網站分成六大模塊,然后對整個網站架構進行構思,設計出六大相關菜單選項和有關模塊,然后進行相關草圖設計與制作及對相關模塊進行程序開發.規劃整個網站根據網站的整體功用進行需求分析,得29新建網站站點對于DreamWeaverMX可按照如下步驟建立網站：（1）選擇菜單中的“網站”—“管理網站”“新增”，就會彈出“網站”的對話框；（2）選擇“網站”—“管理網站”“新增”“網站”，會彈出“定義站點”窗口，輸入站點名稱和站點位置，其它選擇默認值，就可以了。新建網站站點對于DreamWeaverMX可按照如下步驟30搭建整個網站的框架搭建整個網站的框架31制作網站模板配置網頁1.將網站框架頁面另存為模板即可,即“檔案”“另存為模板”.2.配置可編輯區域,即選取特定區域后,按如下步驟執行即可.“插入”—“模板對象”—“可編輯區域”.效果如下:制作網站模板配置網頁1.將網站框架頁面另存為模板即可,32菜單設計架構圖圖(一)各部分詳細菜單:綜合查詢:文件窗體查訊,簽核狀況查詢綜合窗體:ISO文件,窗體目錄,窗體總覽,共享窗體,標準書申請作業:提出申請牽核作業:簽核處理,簽核查詢法律文書:雁過留聲:管理登錄:菜單設計架構圖圖(一)各部分詳細菜單:33菜單和彈出菜單制作過程(一)菜單的制作過程首先選取表格控件,在預定欄內填取所要制作框架的數字.具體祥情如圖(二)所示:菜單和彈出菜單制作過程(一)菜單的制作過程34(二).彈出菜單的制作過程1.在已制作好的菜單中選取特定的菜單選項,制作為超鏈接,選取該選項,打開“窗口”“標簽檢測器””行為”,點擊“+”,選取“顯示彈出式選單”,具體過程如圖(三)所示:(二).彈出菜單的制作過程35接著在彈出表框中填入特定子菜單選項,如下圖所示:接著在彈出表框中填入特定子菜單選項,如下圖所示:36最終效果如下圖所示:最終效果如下圖所示:37充實網頁內容美化頁面1.到不同的可編輯區域填充相應的內容2.根據整體效果來美化頁面3.建立不同的動態頁面4.附上相應的版權標識充實網頁內容美化頁面1.到不同的可編輯區域填充相應的內容38最終效果圖最終效果圖39需要注意的一些細節問題在動手做一個網站之先,需做系統需求分析,規劃網站的拓樸結構圖;2.在制做設計的過程中,應避免頁面色彩過多,字體太亂;3.當預計整個網站的頁面超過30頁時,最好套用模板,方便以后的維護;4.在制作頁面的過程中,盡量避免用到“層”,這是為了防止在不同的分辨率中出現頁面錯亂的情況;5.在運用圖片的時候,應避免用到過大的圖片,圖片過大時應將其分割成小圖片,以加快下載速度.需要注意的一些細節問題在動手做一個網站之先,需做系統需求分析406.在設置網站的目錄結構時，需要注意到幾點:（1）不要使用中文名字的目錄名。（2）不要使用過長的目錄名。（3）盡量使用意義明確的目錄名，盡量做到“見名知意”。（4）目錄的層次不要太多，建議不要超過3層DreamWeaver常用法簡介(課件)41DreamWeaver簡介

DreamWeaver簡介421.DreamWeaver概況介紹2.各項功能介紹

a.整體主菜單簡介

b.各部分菜單簡介3.以制作一網站為范例簡介4.需要注意的一些細節問題1.DreamWeaver概況介紹43DreamWeaver概況介紹DreamWeaver是Macromedia公司開發出的用于設計、撰寫和開發網站、網頁及網絡應用程序的專業HTML編輯器。它集HTML程序代碼編緝器，頁面編緝器等多種視覺編輯環境于一體,能夠提供多種編輯環境。Dreamweaver中的視覺編輯功能在不撰寫任何一行程序代碼的情況下就可以快速建立網頁?？梢詸z視所有網站項目或資源，并將它們從方便使用的面板直接拖曳到文件中,也可以在MacromediaDreamWeaver概況介紹DreamWeaver是44Fireworks或其它圖形應用程序中建立和編輯影像,然后將它們直接匯入到Dreamweaver，或新增MacromediaFlash對象，來簡化開發工作流程。Dreamweaver也提供了功能完整的程序代碼撰寫環境,包括程序代碼編輯工具(如程序代碼色彩標示和標簽完成)以及HTML，階層式樣式表(CSS)JavaScript,ColdFusion標記語言(CFML),MicrosoftActiveServerPages(ASP)以及JavaServerPages(JSP)的參考數據。MacromediaRoundtripHTML技術不需要重新格式化程序碼,就可以匯入您手動撰寫的HTML文件，Fireworks或其它圖形應用程序中建立和編輯影45然后您可以使用偏好的格式樣式來重新格式化程式碼。Dreamweaver也能使用如CFML、ASP.NET、ASP、JSP和PHP等服務器技術，建立動態支持數據庫的網絡應用程序。Dreamweaver可以完全自訂。您可以根據個人喜好建立自己的對象和命令,修改快速鍵,甚至撰寫JavaScript用新的行為,屬性檢測器和網站報告來擴充Dreamweaver功能。然后您可以使用偏好的格式樣式來重新格式化程46操作界面DreamWeaverMX由兩個部分組成，即頁面編輯器和站點管理器。1.頁面編輯器:分為五個部分：菜單欄、頁面編輯區、工具欄、控制面板、狀態欄。其中控制面板有屬性面板、對象面板、設計面板、樣式面板幫助面板等。2.站點管理器:站點管理器窗口顯示了站點地操作界面DreamWeaverMX由兩個部分組成，即頁面47圖，和當前網站中的文件列表。一般來說，在建設一網站前,應先建立好站點，再開始制作網頁,這樣可以保證頁面內文件鏈接的正確性。圖，和當前網站中的文件列表。一般來說，在48DreamWeaver制作基礎一、創建網頁啟動DreamweaverMX，就會自動生成一個白色背景的文件工作區，這里就是設計和制作網頁的地方，在這里可以根據不同喜好來選擇程序源代碼編輯方式或頁面編輯方式,在頁面編輯方式中,可以直接輸入網頁設計過程中所需要的文字、圖片、表格、Flash動畫等。網頁的背景顏色的，以及文字的顏色都是可以通過“頁面屬性”來設置的。DreamWeaver制作基礎一、創建網頁49二、文字的編輯可以直接在網頁中輸入文字，可以在【Text】下設置文字的格式，如字體、字號、顏色、粗體、斜體，段落居左、居中及居右，添加項目符號及編號等。此外，還可以利用HTML樣式和CSS樣式表對文字進行頁面的統一格式設置。也可以通過屬性面板來更改文字的大小、顏色、字體等。二、文字的編輯50三、插入圖像在網頁中插入一幅圖片時，圖片文件必須位于當前站點中。在對象面板中選擇插入圖片圖標或者通過菜單中的“插入”“圖片”，此時系統將打開“選擇圖像源文件”對話框。找到需要插入的圖片文件，選擇“Select”,確定。Dreamwaver支持常用的網頁圖片格式有擴展名為“GIF”、“JPG”、“JPEG”、“PNG”的圖形文件。三、插入圖像51四、插入鼠標變換圖片該圖片對象的特點是當鼠標經過該圖片時,圖片內容會自動更新。實際上，它是由兩幅圖片組成的，一幅為主圖片，顯示在頁面中；一幅為滾動圖片，當鼠標經過圖片所在區域時顯示。單擊對象面板中的圖標，或者選擇【插入】菜單的“影像對象”子菜單中的“鼠標變換影像”命令可實現該操作。四、插入鼠標變換圖片52五、創建圖片熱點在插入的圖片上，可以是交換式圖片，可以把圖片分為若干個區域，每個區被稱為“熱點”，可以為每個熱點指定相關的鏈接。當單擊某個熱點時，系統顯示相關的網頁。當繪制完熱區后，屬性面板會顯示熱區的屬性。還可以調整熱點區尺寸。五、創建圖片熱點53六、插入水平線在對象面板中選擇按鈕，在頁面中點擊，畫面會自動生成一條水平線，在水平線上單擊,可以設置水平線的寬度、高度、對齊方式、是否有陰影等參數。七、插入郵件鏈接創建郵件鏈接的作用是當瀏覽者點擊該鏈接時，系統將自動啟動計算機中的郵件發送程序。DreamWeaver常用法簡介(課件)54八、插入日期在對象面板中選擇按鈕，在頁面中點擊，會彈出對話框，可以設置日期格式、星期格式、時間格式，點擊“OK”，就會在頁面中自動加上時間。九、插入Flash對象1．插入Flash影片2．3．八、插入日期55十、表格的應用1．插入表格2．表格屬性面板表格屬性面板中的設置項對整個表格起作用，如果想對表中的某一行單獨設置，首先選中表的某一行，再利用單元格屬性面板進行設置。3．表格的選取4．添加表格內容5．單元格的合并與拆分十、表格的應用56十一、層的應用層是網頁中的一種容器，它可定位在頁面上的任意位置，并且其中可包含文本、圖像、表單等所有可直接用于文檔的元素。1．創建層2．層的大小調整3．層的移動4．層的屬性面板5．層控制面板6．層的動態效果十一、層的應用57十二、框架的應用創建普通框架集利用框架屬性面板來設置該框架是否要邊線以及邊線的顏色、邊線寬度、框架的名稱和框架中所要顯示的源文件。可以查看框架集的文件的源代碼，這里面只保存了框架信息和它所對應的源文件。十二、框架的應用58十三、行為面板的使用通過行為面板可以在網頁上制作出一些簡單的交互效果。行為由兩個部分組成，即事件和動作，通過事件的響應執行對應的動作。事件是用于指明執行某項動作的條件，動作實際上是一段執行特定任務的預先寫好的JavaScript代碼，如打開窗口、播放聲音等都是動作。十三、行為面板的使用59十四、模板的運用1．準備模板2．定義區域3．應用模板十四、模板的運用60各項功能介紹1.整體主菜單簡介:各項功能介紹1.整體主菜單簡介:61檔案:其具體功用1.開啟新檔:用來建立一個新的設計版面2.開啟舊檔:用來打開已經存在的頁面3.存儲:用來保存正在編輯或已經編輯完成的頁面4.另存新檔:見將正開啟的頁面保存為其它新的頁面5.……檔案:其具體功用1.開啟新檔:用來建立一個新的設計版面62編輯:其具體功用1.還原:撤消上一步的具體動作2.重做:撤消還原的動作3.剪下:剪下選定的內容4.貼上:貼上剪下選定的內容5.復制:復制剪下選定的內容6.清除:清除選定的內容7.……編輯:其具體功用1.還原:撤消上一步的具體動作63檢視:其具體功用1.程序代碼:在編輯頁面顯示出來是html語言和其它源程序2.設計:在編輯頁面顯示出設計直觀效果3.程序代碼和設計:上述二者兼有4.表格模式:用來設計的三種樣式5.尺歸,網格線:在編輯文檔時的輔助標尺6.……檢視:其具體功用1.程序代碼:在編輯頁面顯示出來是ht64插入:其具體功用1.標簽:用來插入特定的html語法標記.如:

<b></b>,<I></I>2.影像:用來插入特定的圖片3.表格:用來在特定位置插入一表格4.超鏈接,郵件:用來在特定位置插入超鏈接和郵件5.……插入:其具體功用1.標簽:用來插入特定的html語法標65修改:其具體功用1.頁面屬性:指修改頁面的寬,高等等2.表格:指修改頁面中表格的具體元素.如:

欄和列的數目3.影像:指修改頁面中需要更改的圖片4.排列順序:指修改頁面中文字和圖片或其它元素的排列順序5.對齊:指頁面中特定元素的對齊方式6.……修改:其具體功用1.頁面屬性:指修改頁面的寬,高等等66文字:其具體功用1.對齊:指將頁面中文字以一特定參考物來對齊2.大小:指改變頁面中選定文字的大小3.顏色:指改變頁面中選定文字的顏色4.字體:指改變頁面中選定文字的字體5.樣式:指改變頁面中選定文字的樣式6.……文字:其具體功用1.對齊:指將頁面中文字以一特定參考物67窗口:其具體功用1.插入:用來顯示插入特定標記2.屬性:用來顯示屬性面板3.CSS樣式:用來顯示CSS屬性面板4.圖層:用來顯示圖層屬性面板5.行為:用來顯示行為屬性面板6.組件:用來顯示組件屬性面板7.資源:用來顯示資源屬性面板8.……窗口:其具體功用1.插入:用來顯示插入特定標記68建設網站大概步驟1.對網站整體進行需求分析1.規劃整個網站的布局2.搭建整個網站的框架3.制作整個網站的模板,配置網頁4.撰寫程序代碼,填充整個網站的可編輯區域5.建立動態網頁6.附上必要的版權標識7.對整個網站進行測試,修改8.網站的上傳建設網站大概步驟1.對網站整體進行需求分析69規劃整個網站根據網站的整體功用進行需求分析,得出需要將網站分成六大模塊,然后對整個網站架構進行構思,設計出六大相關菜單選項和有關模塊,然后進行相關草圖設計與制作及對相關模塊進行程序開發.規劃整個網站根據網站的整體功用進行需求分析,得70新建網站站點對于DreamWeaverMX可按照如下步驟建立網站：（1）選擇菜單中的“網站”—“管理網站”“新增”，就會彈出“網站”的對話框；（2）選擇“網站”—“管理網站”“新增”“網