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

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

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

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

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

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

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

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

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

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

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

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

12、換動(dòng)作,下拉選單，點(diǎn)選另一個(gè)網(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)站名稱來(lái)進(jìn)行管理與編輯,匯入完成的網(wǎng)站,,,建置網(wǎng)頁(yè)檔案及資料夾(1),新增網(wǎng)頁(yè)檔案,,3-4 Dreamweaver的基本操作,,,新增的HMTL檔案。點(diǎn)選此檔

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

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

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

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

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

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

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

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

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

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

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

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

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