第3章網(wǎng)站的建立與基本操作

1、第3章 網(wǎng)站的建立與基本操作,認識Dream weaver 設(shè)定預覽畫面的瀏覽器 Dreamweaver的面板操作 步驟記錄面板以Dreamweaver建立網(wǎng)站 相對路徑與絶對路徑Dreamweaver的基本操作善用 Dreamweaver的輔助資源建立網(wǎng)站架構(gòu)圖,啟動Dreamweaver,由「開始」功能表 執(zhí)行「所有程式」指令，並由軟體選單中

2、點選「Adobe Dreamweaver CS3」項目，開啟Dreamweaver。,,3-1 認識Dreamweaver,,,,,3-1 認識Dreamweaver,,,這裡可選擇要建立的新檔案格式。按下「HTML」項目，接下來的教學會先以它來作為範例。,點選「開啟」鈕，可開啟舊檔案。若最近有使用過的檔案，也會詳列於此。,勾選此項目，以後將不會顯示此歡迎畫面。,此區(qū)可選擇現(xiàn)成的範本來編輯網(wǎng)頁。,,,,,認識Dreamweaver視

3、窗環(huán)境(1),,3-1 認識Dreamweaver,,,功能表,插入列,文件檔案名稱,文件列,文件視窗,屬性面板,其他工作面板,,,,,,,,認識Dreamweaver視窗環(huán)境(2),功能表放置Dreamweaver中各項編輯指令的區(qū)域，不過許多功能指令你也可以透過滑鼠右鍵所顯示的彈出式選單來執(zhí)行。插入列插入列上的每一個圖示都代表著網(wǎng)頁畫面的組成元素，只要點選插入列中的功能圖示就可以將相關(guān)效果放置到頁面上。文件視窗屬於頁面內(nèi)

4、容的編輯區(qū)域，這裡就是主要的工作區(qū)域，設(shè)計出的網(wǎng)頁畫面也會與實際上線時的呈現(xiàn)效果幾乎一模一樣。,,3-1 認識Dreamweaver,認識Dreamweaver視窗環(huán)境(3),文件列提供使用者切換到不同模式的編輯環(huán)境，以及一些網(wǎng)頁的管理與檢查功能，可以執(zhí)行功能表中的「檢視/工具列/文件」來將其關(guān)閉或開啟。屬性面板對頁面中的各種組成元素進行調(diào)整及編輯。當你在頁面上點選不同的組成元素時，屬性面板的畫面內(nèi)容也會對應(yīng)顯示。其他工作面板

5、是安排各種輔助編輯的工作面板，畫面上所看到「CSS」、「應(yīng)用程式」、「標籤檢視窗」及「檔案」是在Dreamweaver預設(shè)啟動的工作面板。,,3-1 認識Dreamweaver,,,,3-1 認識Dreamweaver,,執(zhí)行「檢視/工具列/標準」,,,加入顯示的「標準」工具列,,面板的啟動與類型,Dreamweaver中所有面板都可以經(jīng)由「視窗」功能表來啟動。當點選功能表後，就可繼續(xù)在下方的面板清單中選取所要啟動的面板名稱。

6、目前在視窗上所看到的面板陳列，則是Dreamweaver預設(shè)啟動的面板功能。,,3-2 Dreamweaver的面板操作,,,3-2 Dreamweaver的面板操作,,,,面板標籤,面板群組名稱,點選不同面板標籤可切換面板,,,,,,,3-2 Dreamweaver的面板操作,面板內(nèi)容的調(diào)整(1),展開及收合面板群組,,3-2 Dreamweaver的面板操作,,,,點選此三角形，展開面板,再按一次三角形可關(guān)閉面板,展開後的面

7、板,,,,面板內(nèi)容的調(diào)整(2),調(diào)整面板群組的大小,,3-2 Dreamweaver的面板操作,,,當滑鼠變成雙箭頭符號時，以滑鼠拖曳面板與文件視窗間的框線，可調(diào)整面板的大小。,,,,,3-2 Dreamweaver的面板操作,,當滑鼠變成雙箭頭符號時，拖曳面板間的框線，可調(diào)整各個面板的大小。,,面板內(nèi)容的調(diào)整(3),調(diào)整面板群組的位置,,3-2 Dreamweaver的面板操作,,,按住面板左上角，拖曳到視窗中間。,,,,,3-

8、2 Dreamweaver的面板操作,,,原本在群組中的面板已獨立成一個面板視窗,,,,,3-2 Dreamweaver的面板操作,,按住面板左上角，拖曳面板回到群組中。,,面板內(nèi)容的調(diào)整(4),調(diào)整面板群組的標籤內(nèi)容,,3-2 Dreamweaver的面板操作,,,,移動到CSS面板群組的檔案面板,2.執(zhí)行此指令,1.在面板標籤上點選滑鼠右鍵,,,,面板內(nèi)容的調(diào)整(5),使用面板功能表,,3-2 Dreamweaver的面板操

9、作,,2.展開此面板的功能清單,1.點選此圖示,,,,面板內(nèi)容的調(diào)整(6),儲存面板畫面,,3-2 Dreamweaver的面板操作,,,「程式碼撰寫者」版面配置,,,,,3-2 Dreamweaver的面板操作,,「設(shè)計師」版面配置,面板內(nèi)容的調(diào)整(7),插入列的內(nèi)容切換,,3-2 Dreamweaver的面板操作,,點選「版面」標籤後，底下的元件立即跟著改變,點選插入列上方索引標籤，可切換顯示的元件,,,開始建立網(wǎng)站,,,3-

10、3 以Dreamweaver建立網(wǎng)站,,執(zhí)行「網(wǎng)站/新增網(wǎng)站」指令，建立新網(wǎng)站,,,,,3-3 以Dreamweaver建立網(wǎng)站,,,點選此項目,1.點選此項目,2.點選此圖示，指定剛才所建立的「Education」資料夾，來作為檔案存放的位置,,,,,,,3-3 以Dreamweaver建立網(wǎng)站,,,按下「完成」鈕，完成建置新網(wǎng)站的設(shè)定工作,這裡會顯示前面步驟設(shè)定的所有資訊,下拉選單，指定遠端伺服器為「無」，暫時不連接網(wǎng)站伺服器

11、，先以單機作業(yè)為主。,,,,,,,3-3 以Dreamweaver建立網(wǎng)站,,成功建立新網(wǎng)站後，會在「檔案」面板中出現(xiàn)網(wǎng)站資訊,,網(wǎng)站的管理及匯入(1),網(wǎng)站管理視窗,,3-3 以Dreamweaver建立網(wǎng)站,,執(zhí)行「網(wǎng)站/管理網(wǎng)站」指令,,,視窗中的各個按鈕功能如下：,,3-3 以Dreamweaver建立網(wǎng)站,,網(wǎng)站的管理及匯入(2),多個網(wǎng)站之間的切換管理,,3-3 以Dreamweaver建立網(wǎng)站,,,完成編輯網(wǎng)站的切

12、換動作,下拉選單，點選另一個網(wǎng)站名稱,,,網(wǎng)站的管理及匯入(3),網(wǎng)站的匯入方式,,3-3 以Dreamweaver建立網(wǎng)站,,,選擇要匯入管理的網(wǎng)站資,輸入網(wǎng)站名稱,執(zhí)行「新增/網(wǎng)站」指令,,,,,,,3-3 以Dreamweaver建立網(wǎng)站,,,可從清單中選擇匯入的網(wǎng)站名稱來進行管理與編輯,匯入完成的網(wǎng)站,,,建置網(wǎng)頁檔案及資料夾(1),新增網(wǎng)頁檔案,,3-4 Dreamweaver的基本操作,,,新增的HMTL檔案。點選此檔

13、案，按下「F2」鈕變更檔名為「index.html」,2.執(zhí)行「開新檔案」指令,1.在此處按下滑鼠右鍵,,,,建置網(wǎng)頁檔案及資料夾(2),設(shè)為首頁,,3-4 Dreamweaver的基本操作,,2.執(zhí)行「設(shè)成首頁」指令,1.在index.html上按滑鼠右鍵,,,建置網(wǎng)頁檔案及資料夾(3),新增網(wǎng)站資料夾,,3-4 Dreamweaver的基本操作,,,新建立的資料夾，請將它改名為「Sound」,在網(wǎng)站根目錄上按滑鼠右鍵，並在彈出式

14、選單中執(zhí)行「新增資料夾」指令,,,建置網(wǎng)頁檔案及資料夾(4),新增網(wǎng)頁或資料夾時的注意事項1.不要使用中文檔名目前大部份的網(wǎng)站伺服器主機都還是使用英文系統(tǒng)，此時若使用中文檔名會產(chǎn)生系統(tǒng)處理上的問題而發(fā)生無法瀏覽的情況。2.採用小寫的英文字母有些系統(tǒng)會區(qū)分大小寫的英文字母，為了避免不必要的問題產(chǎn)生，一律使用小寫英文是最好的方式。 3.網(wǎng)站資料夾部份在Windows系統(tǒng)中的「桌面」及「我的文件」也是屬於中文名稱，所以也請勿在此處

15、建立網(wǎng)站資料夾，否則在使用瀏覽器預覽時也可能發(fā)生錯誤。,,3-4 Dreamweaver的基本操作,網(wǎng)頁檔案管理(1),網(wǎng)頁檔案的編輯,,3-4 Dreamweaver的基本操作,,,2.點選「編輯」指令，展開功能清單。,1.在欲編輯的檔案上按滑鼠右鍵,,,網(wǎng)頁檔案管理(2),網(wǎng)頁的開啟及儲存,,3-4 Dreamweaver的基本操作,,,,在文件工作區(qū)開啟文件。,按下此箭頭按鈕，可收合屬性面板。,在檔案名稱上按兩下滑鼠，即可開

16、啟檔案。,,,,,,,3-4 Dreamweaver的基本操作,,,,1.點選網(wǎng)站，按滑鼠右鍵。,建立兩個新網(wǎng)頁，檔名分別為page1.html及page2.html。,2.執(zhí)行「新增檔案」指令，建立新網(wǎng)頁。,,,,,,,3-4 Dreamweaver的基本操作,,2.接著在清單中選擇所需要的編輯指令,1.先在標籤名稱上點取滑鼠右鍵,,,切換頁面的編輯模式,,3-4 Dreamweaver的基本操作,,,,,,,3-4 Drea

17、mweaver的基本操作,,程式碼檢視窗,,頁面編輯前的設(shè)定(1),設(shè)定頁面的編碼方式,,3-4 Dreamweaver的基本操作,,執(zhí)行「修改/頁面屬性」指令,,,,,3-4 Dreamweaver的基本操作,,2.選擇「Unicode(UTF-8)」,1.點選「標題/編碼方式」項目,,,頁面編輯前的設(shè)定(2),調(diào)整頁面編輯區(qū)的大小,,3-4 Dreamweaver的基本操作,按下此鈕，讓文件視窗由「最大化」變更為「視窗化」。,

18、,,,,3-4 Dreamweaver的基本操作,,,,1.點選狀態(tài)列此位置,2.若沒有合適的尺寸時，可點選「編輯大小」,,,在此處輸入新的頁面尺寸,,頁面編輯前的設(shè)定(3),設(shè)定頁面字體大小的預設(shè)值,,3-4 Dreamweaver的基本操作,,,2.由此可修改字體大小,1.先點選「字體」,,,頁面編輯前的設(shè)定(4),網(wǎng)頁的背景效果及標題文字1.頁面背景效果網(wǎng)頁的背景效果可以使用「單色」及「影像檔案」，在二者同時使用的情況下會

19、以「影像檔案」為優(yōu)先顯示。,,3-4 Dreamweaver的基本操作,,在此處可設(shè)定背景顏色及影像,,,2.頁面標題文字頁面標題文字是顯示於瀏覽器視窗左上角的標題文字。,,3-4 Dreamweaver的基本操作,,,1.點選「標題/編碼方式」,2. 輸入標題文字,按下此鈕，可開啟瀏覽器預覽網(wǎng)頁效果。,在這裡也可以輸入標題文字,,,,,,,,3-4 Dreamweaver的基本操作,,瀏覽器上的標題文字,,建立網(wǎng)站架構(gòu)圖(1)

20、,1.切換到「地圖檢視」畫面,,3-5 建立網(wǎng)站架構(gòu)圖,,,,,首頁index.html會自動顯示於畫面中（如果沒有的話請參考3-4-1小節(jié)）,先從清單中選擇「地圖檢視」,再點取此圖示以展開視窗畫面,,,,建立網(wǎng)站架構(gòu)圖(2),2.開始建立網(wǎng)站架構(gòu)圖,,3-5 建立網(wǎng)站架構(gòu)圖,1.先點取首頁圖示,2.將此圓點圖示往右拖曳到「news.html」的頁面圖示上,,,,,,3-5 建立網(wǎng)站架構(gòu)圖,,繼續(xù)完成架構(gòu)圖中的其他頁面,這裡可以選

21、擇架構(gòu)圖的顯示比例,,,,3.顯示頁面上的連結(jié)文字,,3-5 建立網(wǎng)站架構(gòu)圖,,,Index.htm的頁面上顯示會自動加入的超連結(jié)文字,,,4.移除連結(jié)頁面,,3-5 建立網(wǎng)站架構(gòu)圖,,2.執(zhí)行「移除連結(jié)」指令,1.在要移除的頁面上點取滑鼠右鍵,,,設(shè)定預覽畫面的瀏覽器,,,3-6 設(shè)定預覽畫面的瀏覽器,,,1.輸入瀏覽器的名稱,點選此項目,2.勾選「主要瀏覽器」,3.點取選擇FireFox的主程式後再按下確定鈕,,,,,,,,3

22、-6 設(shè)定預覽畫面的瀏覽器,,新增完成的瀏覽器名稱,,因為是設(shè)定為「主要瀏覽器」，所當按下「F12」鍵時會自動開啟Firefox,,,步驟記錄面板,,,3-7 步驟記錄面板,,,1.建立新空白網(wǎng)頁,2.執(zhí)行「視窗/操作記錄」指令,,,,,,3-7 步驟記錄面板,,,,按下Enter鍵，輸入「Dreamweaver」文字。,1.在頁面輸入文字,繼續(xù)記錄剛才操作的步驟,2.此時面板中會列出剛才的操作步驟,,,,,,,,3-7 步驟記

23、錄面板,,,,往下拖曳則可以取消,將此箭頭往上拖曳可一次復原多個步驟,,,相對路徑與絕對路徑(1),1.加入圖片與路徑的關(guān)係由於Dreamweaver是採用網(wǎng)頁畫面及圖片分開設(shè)計的方式，因此圖片影像的來源位置並不一定會在網(wǎng)站資料夾之中，而是位於電腦中的其他資料夾（以C:\WebImage為例），在這種情況下如果我們將影像加入到頁面中時就會看到如圖的視窗畫面。,,3-8 相對路徑與絶對路徑,,,目前編輯的頁面與存放圖片的「images

24、」資料夾都是「相對於」網(wǎng)站資料夾之下，所以不需要特別去指定圖片檔案的正確路徑位置「C:\education\images\beeman.jpg」，只要註明「images\ beeman.jpg」Dreamweaver就能判斷圖片檔案的正確位置，以上的觀念就是「相對路徑」。,,3-8 相對路徑與絶對路徑,,這裡會顯示圖檔的「絕對位置」,,相對路徑與絕對路徑(2),2.加入超連結(jié)與路徑的關(guān)係若我們在網(wǎng)站資料夾新增一個網(wǎng)頁檔案，而且在檔案

25、還未儲存時就在頁面上建立超連結(jié)的話，會看到如圖中的訊息視窗。,,3-8 相對路徑與絶對路徑,,,當各位點取 以後，在屬性面板上會顯示 這表示目前所使用的是「絶對路徑」，主要是因為目前頁面還未儲存，所以Dreamweaver無法判斷目前頁面與超連結(jié)之間的路徑關(guān)係，只好暫時使用「絶對路徑