網頁設計與制作第二章DreamweaverMX2.ppt

第2章 Dreamweaver MX 2004,本章要點 初識Dreamweaver MX 2004 創(chuàng)建站點 Dreamweaver MX 2004基本操作,啟動與退出Dreamweaver MX 2004,安裝好Dreamweaver MX 2004后就可以使用它進行網頁制作了。接下來就講解怎樣啟動與退出Dreamweaver MX 2004。,啟動Dreamweaver MX 2004,啟動Dreamweaver MX 2004可選擇“開始/所有程序/Macromedia/Macromedia Dreamweaver MX 2004”命令。也可雙擊Dreamweaver MX 2004的桌面快捷方式。,啟動Dreamweaver MX,啟動Dreamweaver MX 2004,首次啟動Dreamweaver MX 2004時，將彈出“工作區(qū)設置”對話框。在該對話框中可選擇工作區(qū)布局，對于初學者來說，基本上不會涉及代碼編寫，可選擇 單選按鈕。,啟動Dreamweaver MX 2004,以上是首次啟動Dreamweaver MX 2004所需進行的操作，以后啟動會直接進入工作 界面。,退出Dreamweaver MX 2004,在結束網頁編輯后若需退出Dreamweaver MX 2004，操作很簡單，直接單擊操作窗口右上角的 按鈕或選擇“文件/退出”命令即可。,Dreamweaver MX 2004的工作界面,啟動Dreamweaver MX 2004后即可進入其工作界面。,Dreamweaver MX2004的工作窗口,標題欄,菜單欄,編輯區(qū),文檔欄,屬性面板,面板組,Dreamweaver MX 2004的工作界面,菜單欄 起始頁 工具欄 文檔編輯窗口 屬性面板 面板組,創(chuàng)建站點, 規(guī)劃站點 創(chuàng)建站點 打開站點 編輯站點 ,規(guī) 劃 站 點,進行網頁制作之前需創(chuàng)建站點，利用站點的管理功能可對站點中的文件進行管理或測試。創(chuàng)建站點前首先應規(guī)劃站點，再通過Dreamweaver MX 2004的站點管理功能創(chuàng)建站點的框架，包括主頁、分支頁面和相應的文件夾等。,規(guī) 劃 站 點,站點的概念 規(guī)劃站點結構 創(chuàng)建導航草圖 應用舉例規(guī)劃“誠與”廣告公司站點,站點的概念,多個網頁文檔通過各種鏈接關聯(lián)起來就構成了站點，站點可以小到一個網頁，也可以大到整個網站。 Dreamweaver MX 2004提供了3類站點：本地站點、遠程站點和測試站點。用戶可通過本地站點和遠程站點在本地磁盤和Web服務器之間傳輸文件，測試站點可用于對動態(tài)站點的測試。 本地站點 遠程站點 測試站點,規(guī)劃站點結構,設計站點的必要前提是規(guī)劃站點結構。規(guī)劃站點結構是指利用不同的文件夾將不同的網頁內容分門別類地保存，合理地組織站點結構，可提高工作效率，加快對站點的設計。 在制作站點時通常先在本地磁盤上創(chuàng)建一個文件夾，將所有在制作過程中創(chuàng)建和編輯的網頁內容都保存在該文件夾中。在發(fā)布站點時，直接將這些文件夾上傳到Web服務器上即可。如果站點內容較多或站點較大，則還需建立子文件夾以存放不同類型的網頁內容。,規(guī)劃站點結構,在站點規(guī)劃過程中，需使用合理的文件名稱、文件夾名稱，好的名稱容易理解、記憶，能夠表達出網頁的內容。通常在命名時，可以采用與其內容相同的英文或拼音進行命名，應避免使用長文件名和中文，如電影文件夾可以命名為movie或dianying。 制作網頁所需的圖片或動畫等文件的存放位置也是規(guī)劃站點結構時應考慮的。如果是大型站點，可分別創(chuàng)建相應的文件夾在各個類別的文件夾下，如在站點根目錄下創(chuàng)建一個名稱為picture的文件夾用以存放主頁中用到的圖片和動畫。如果站點內容較少，可以只在站點的根目錄下創(chuàng)建一個文件夾。,創(chuàng)建導航草圖,做好了站點的規(guī)劃后，就可根據(jù)規(guī)劃制作出一個導航草圖便于理清思路，制作時可直接在紙上粗略繪出導航草圖。,創(chuàng)建導航草圖,應用舉例規(guī)劃“誠與”廣告公司站點,將為一個名為“誠與”的廣告公司網站進行站點結構的規(guī)劃。,規(guī)劃誠與廣告公司站點結構圖,【實例1】創(chuàng)建一個站點 使用菜單“站點”“管理站點”打開站點管理對話框，進行操作,創(chuàng)建站點,打開站點和編輯站點信息,打開站點 編輯站點,使用“高級”方式定義站點,在“定義站點”向導進行的任意一個步驟，選擇對話框上部的“高級”標簽，可打開高級站點定義對話框。,Dreamweaver MX2004的基本操作,實例二、制作一個簡單的網頁,設置工作界面,關閉面板 標尺和網格 輔助顯示 首選參數(shù)的設置,對象的大小和顏色,1.修改文字大小 在屬性面板上的大小中選擇文字的大小，文字大小可設置絕對尺寸、相對尺寸、長度、百分比,2.修改文字顏色 在默認的情況下，文本在瀏覽器窗口內顯示為黑色。在屬性面板的文本顏色按鈕 上單擊可打開調色板，選擇要設置的顏色。,設置圖像大小的多種操作方式,1.拖動改變大小 拖動圖像下邊、右邊、右下角的三個控制點可快速改變圖像大小。,2.使用屬性面板 在屬性面板的寬、高欄輸入寬、高的像素值，可改變圖像大小。,3.使用右鍵菜單 在圖像上面單擊右鍵，在彈出菜單中選擇“改變大小”可重設圖像大小。,6.使用面板組的屬性面板 使用菜單“窗口”“屬性”或單擊“標簽檢查器”面板組打開屬性面板，在編輯窗口中選中要設置大小的圖片，再單擊“常規(guī)”前面的加號，列出圖片的各種屬性，在width和height中設置圖片大小的值 。,4.使用系統(tǒng)菜單 使用菜單