网站的建立与基本操作.PPT

第3章 網站的建立與基本操作 認識Dream weaver 設定預覽畫面的瀏覽器 Dreamweaver的面板操作 步驟記錄面板 以Dreamweaver建立網站 相對路徑與絶對路徑 Dreamweaver的基本操作善用 Dreamweaver的輔助資源 建立網站架構圖 啟動Dreamweaver 由「開始」功能表 執行「所有程式」指令，並由軟體選單中點選「Adobe Dreamweaver CS3」項目，開啟Dreamweaver。 認識Dreamweaver視窗環境(1) 認識Dreamweaver視窗環境(2) 功能表 放置Dreamweaver中各項編輯指令的區域，不過許多功能指令你也可以透過滑鼠右鍵所顯示的彈出式選單來執行。 插入列 插入列上的每一個圖示都代表著網頁畫面的組成元素，只要點選插入列中的功能圖示就可以將相關效果放置到頁面上。 文件視窗 屬於頁面內容的編輯區域，這裡就是主要的工作區域，設計出的網頁畫面也會與實際上線時的呈現效果幾乎一模一樣。 認識Dreamweaver視窗環境(3) 文件列 提供使用者切換到不同模式的編輯環境，以及一些網頁的管理與檢查功能，可以執行功能表中的「檢視/工具列/文件」來將其關閉或開啟。 屬性面板 對頁面中的各種組成元素進行調整及編輯。當你在頁面上點選不同的組成元素時，屬性面板的畫面內容也會對應顯示。 其他工作面板 是安排各種輔助編輯的工作面板，畫面上所看到「CSS」、「應用程式」、「標籤檢視窗」及「檔案」是在Dreamweaver預設啟動的工作面板。 面板的啟動與類型 Dreamweaver中所有面板都可以經由「視窗」功能表來啟動。 當點選功能表後，就可繼續在下方的面板清單中選取所要啟動的面板名稱。 目前在視窗上所看到的面板陳列，則是Dreamweaver預設啟動的面板功能。 面板內容的調整(1) 展開及收合面板群組 面板內容的調整(2) 調整面板群組的大小 面板內容的調整(3) 調整面板群組的位置 面板內容的調整(4) 調整面板群組的標籤內容 面板內容的調整(5) 使用面板功能表 面板內容的調整(6) 儲存面板畫面 面板內容的調整(7) 插入列的內容切換 開始建立網站 網站的管理及匯入(1) 網站管理視窗 視窗中的各個按鈕功能如下： 網站的管理及匯入(2) 多個網站之間的切換管理 網站的管理及匯入(3) 網站的匯入方式 建置網頁檔案及資料夾(1) 新增網頁檔案 建置網頁檔案及資料夾(2) 設為首頁 建置網頁檔案及資料夾(3) 新增網站資料夾 建置網頁檔案及資料夾(4) 新增網頁或資料夾時的注意事項 1.不要使用中文檔名 目前大部份的網站伺服器主機都還是使用英文系統，此時若使用中文檔名會產生系統處理上的問題而發生無法瀏覽的情況。 2.採用小寫的英文字母 有些系統會區分大小寫的英文字母，為了避免不必要的問題產生，一律使用小寫英文是最好的方式。 3.網站資料夾部份 在Windows系統中的「桌面」及「我的文件」也是屬於中文名稱，所以也請勿在此處建立網站資料夾，否則在使用瀏覽器預覽時也可能發生錯誤。 網頁檔案管理(1) 網頁檔案的編輯 網頁檔案管理(2) 網頁的開啟及儲存 切換頁面的編輯模式 頁面編輯前的設定(1) 設定頁面的編碼方式 頁面編輯前的設定(2) 調整頁面編輯區的大小 頁面編輯前的設定(3) 設定頁面字體大小的預設值 頁面編輯前的設定(4) 網頁的背景效果及標題文字 1.頁面背景效果 網頁的背景效果可以使用「單色」及「影像檔案」，在二者同時使用的情況下會以「影像檔案」為優先顯示。 2.頁面標題文字 頁面標題文字是顯示於瀏覽器視窗左上角的標題文字。 建立網站架構圖(1) 1.切換到「地圖檢視」畫面 建立網站架構圖(2) 2.開始建立網站架構圖 3.顯示頁面上的連結文字 4.移除連結頁面 設定預覽畫面的瀏覽器 步驟記錄面板 相對路徑與絕對路徑(1) 1.加入圖片與路徑的關係 由於Dreamweaver是採用網頁畫面及圖片分開設計的方式，因此圖片影像的來源位置並不一定會在網站資料夾之中，而是位於電腦中的其他資料夾（以C:\WebImage為例），在這種情況下如果我們將影像加入到頁面中時就會看到如圖的視窗畫面。 目前編輯的頁面與存放圖片的「images」資料夾都是「相對於」網站資料夾之下，所以不需要特別去指定圖片檔案的正確路徑位置「C:\education\images\beeman.jpg」，只要註明「images\ beeman.jpg」Dreamweaver就能判斷圖片檔案的正確位置，以上的觀念就是「相對路徑」。 相對路徑與絕對路徑(2) 2.