《站點(diǎn)設(shè)計(jì)與》PPT課件.ppt

第二章 站點(diǎn)設(shè)計(jì)與管理,韋妍,網(wǎng)頁(yè)設(shè)計(jì)與制作,第二章 站點(diǎn)設(shè)計(jì)與管理,教學(xué)任務(wù),學(xué)習(xí)Dreamweaver CS4的操作環(huán)境,學(xué)會(huì)創(chuàng)建一個(gè)新的網(wǎng)站,1,2,第二章 站點(diǎn)設(shè)計(jì)與管理,教學(xué)重點(diǎn)與難點(diǎn),學(xué)會(huì)創(chuàng)建一個(gè)新的網(wǎng)站,2,第二章 站點(diǎn)設(shè)計(jì)與管理,4,2.1Dreamweaver CS4簡(jiǎn)介,Dreamweaver CS4是由美國(guó)Adobe公司推出的，一個(gè)可視化網(wǎng)頁(yè) 設(shè)計(jì)和網(wǎng)站管理工具軟件。 Dreamweaver CS4是一套網(wǎng)頁(yè)編輯軟件，就算沒有制作網(wǎng)頁(yè)的 基礎(chǔ)，也能很輕松地利用它制作出漂亮的網(wǎng)頁(yè)，只要從菜單、面 板中直接套用就可以了，免除了學(xué)習(xí)HTML標(biāo)簽命令的困擾，也 節(jié)省了很多編寫源代碼的時(shí)間。 Dreamweaver CS4有強(qiáng)大的網(wǎng)站管理功能，當(dāng)修改文件名、移動(dòng) 或刪除文件時(shí)，它自動(dòng)修改相關(guān)的鏈接；它內(nèi)置FTP功能，可以 直接將文件上傳到網(wǎng)站服務(wù)器，在網(wǎng)站窗口中可以看到本地端和遠(yuǎn)程 網(wǎng)站的文件，隨時(shí)檢查兩端的差異。,第二章 站點(diǎn)設(shè)計(jì)與管理,5,2.1Dreamweaver CS4簡(jiǎn)介,1、啟動(dòng)Dreamweaver CS4 啟動(dòng)Dreamweaver CS4的操作很簡(jiǎn)單，和其它軟件的啟動(dòng)方式基本一致。 (1)單擊“開始”菜單按鈕，在程序組中選擇【程序】【Adobe Dreamweaver CS4】命令，即可啟動(dòng)Dreamweaver CS4軟件，如圖所示。,第二章 站點(diǎn)設(shè)計(jì)與管理,6,(2)首次啟動(dòng)Dreamweaver CS4時(shí)，會(huì)彈出【默認(rèn)編輯器】對(duì)話框，用戶可為Dreamweaver CS4設(shè)置編輯器，如圖所示。,第二章 站點(diǎn)設(shè)計(jì)與管理,7,(3)在此保持默認(rèn)設(shè)置，單擊【確定】按鈕，此時(shí)將打開Adobe Dreamweaver CS4歡迎屏幕，如圖所示。,第二章 站點(diǎn)設(shè)計(jì)與管理,8,提示：選擇歡迎屏幕下方的“不再顯示”復(fù)選框，再次啟動(dòng)歡迎屏幕即關(guān)閉，在菜單欄中選擇【編輯】【首選參數(shù)】【常規(guī)】【顯示歡迎屏幕】命令，即可以在下次啟動(dòng)該軟件時(shí)將重新顯示歡迎屏幕。,第二章 站點(diǎn)設(shè)計(jì)與管理,9,2.1 Dreamweaver CS4的操作環(huán)境,和以前版本相比，Dreamweaver CS4的工作界面煥然一新，可以說是做了一次脫胎換骨的改進(jìn)，從界面中可以看到更多的設(shè)計(jì)元素。另外，Dreamweaver CS4的操作環(huán)境非常靈活，用戶完全可以根據(jù)自己的習(xí)慣進(jìn)行定制。下面對(duì)Dreamweaver CS4的操作環(huán)境進(jìn)行詳細(xì)介紹。 Dreamweaver CS4的工作界面由標(biāo)題欄、菜單欄、插入面板、文檔工具欄、文檔編輯區(qū)、狀態(tài)欄、屬性面板、面板組、擴(kuò)展管理器等組成，如圖所示。,第二章 站點(diǎn)設(shè)計(jì)與管理,10,第二章 站點(diǎn)設(shè)計(jì)與管理,11,工作界面定制: 用戶可以根據(jù)各自的習(xí)慣進(jìn)行工作界面的定制，在窗口的標(biāo)題欄右側(cè)面有一個(gè)【設(shè)計(jì)器】按鈕，單擊它會(huì)彈出一個(gè)下拉菜單，可以定制【應(yīng)用程序開發(fā)人員】、【經(jīng)典】、【編碼器】、【設(shè)計(jì)器】等不同的工作界面。,第二章 站點(diǎn)設(shè)計(jì)與管理,12,2.2創(chuàng)建一個(gè)新的網(wǎng)站,1.3.1 新建站點(diǎn) 一個(gè)網(wǎng)站由許多相互關(guān)聯(lián)的網(wǎng)頁(yè)組成，制作網(wǎng)頁(yè)的根本目的就是制作一個(gè)完整的網(wǎng)站。因此在制作網(wǎng)頁(yè)之前，應(yīng)該先在本地計(jì)算機(jī)的磁盤上建立一個(gè)網(wǎng)站，然后把這個(gè)網(wǎng)站發(fā)布到Web服務(wù)器上，放在本地的網(wǎng)站稱為本地站點(diǎn)，處于internet中的web服務(wù)器上的網(wǎng)站稱為遠(yuǎn)程站點(diǎn)。Dreamweaver CS4有一套專業(yè)的創(chuàng)建和管理站點(diǎn)的工具，方便設(shè)計(jì)人員對(duì)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)進(jìn)行管理。,第二章 站點(diǎn)設(shè)計(jì)與管理,13,在新建站點(diǎn)之前，首先要進(jìn)入【站點(diǎn)定義】對(duì)話框，進(jìn)入【站點(diǎn)定義】對(duì)話框方法有下列幾種： 1文件面板 （1）文件面板中右上方的【管理站點(diǎn)】鏈接，如圖所示。,第二章 站點(diǎn)設(shè)計(jì)與管理,14,（2）單擊文件面板左上方的箭頭按鈕 ，選擇彈出的下拉列表底部的【管理站點(diǎn)】，如圖所示。,第二章 站點(diǎn)設(shè)計(jì)與管理,15,從上述（1）（2）方法中任選一方法都可進(jìn)入【管理站點(diǎn)】 對(duì)話框，執(zhí)行【新建】【站點(diǎn)】，即可彈出【站點(diǎn)定義】 對(duì)話框。,第二章 站點(diǎn)設(shè)計(jì)與管理,16,第二章 站點(diǎn)設(shè)計(jì)與管理,17,2站點(diǎn)菜單 （1）執(zhí)行【站點(diǎn)】菜單【新建站點(diǎn)】命令，即可進(jìn)入【站點(diǎn)定義】對(duì)話框。,第二章 站點(diǎn)設(shè)計(jì)與管理,18,（2）執(zhí)行【站點(diǎn)】菜單【管理站點(diǎn)】命令，【管理 站點(diǎn)】對(duì)話框，再執(zhí)行“新建站點(diǎn)”命令，也可進(jìn)入 【站點(diǎn)定義】對(duì)話框。,第二章 站點(diǎn)設(shè)計(jì)與管理,19,3、進(jìn)入【站點(diǎn)定義】對(duì)話框后，定義本地站點(diǎn)的方法有下列兩種： （1）利用【基本】選項(xiàng)卡的站點(diǎn)定義向?qū)А?（2）利用【高級(jí)】選項(xiàng)卡，這種方法比較直觀快速。,第二章 站點(diǎn)設(shè)計(jì)與管理,20,下面詳細(xì)介紹一下利用【基本】選項(xiàng)卡，根據(jù)站點(diǎn)定義向?qū)崾径x本 地站點(diǎn)的步驟： (1)進(jìn)入【站點(diǎn)定義】對(duì)話框后，選擇【基本】選項(xiàng)卡（如圖所示）；,第二章 站點(diǎn)設(shè)計(jì)與管理,21,(2)設(shè)置站點(diǎn)名稱為“好可工作室”，在站點(diǎn)的URL文本框中輸入網(wǎng)站的域名或IP地址，如果要?jiǎng)?chuàng)建本地站點(diǎn)，則此處可以留空。單擊【下一步】按鈕。 (3)彈出的對(duì)話框中詢問是否使用服務(wù)器技術(shù)，如圖所示。由于建立的是靜態(tài)網(wǎng)站，選擇“否，我不想使用服務(wù)器技術(shù)”單選按鈕，單擊【下一步】按鈕。,第二章 站點(diǎn)設(shè)計(jì)與管理,22,第二章 站點(diǎn)設(shè)計(jì)與管理,23,(4)在下一步對(duì)話框中，選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器”單選 按鈕?？梢詥螕?按鈕設(shè)置站點(diǎn)的本地根文件夾的位置，若根文件夾沒預(yù)先建立好，可此時(shí)新建。如圖所示。選擇設(shè)置好后，單擊【下一步】按鈕。,第二章 站點(diǎn)設(shè)計(jì)與管理,24,第二章 站點(diǎn)設(shè)計(jì)與管理,25,(5)在下一步對(duì)話框中，顯示選擇遠(yuǎn)程服務(wù)器連接方式的界面。在“您如 何連接到遠(yuǎn)程服務(wù)器”下拉列表框中選擇“無(wú)”選項(xiàng)，如圖所示。單擊 【下一步】按鈕。,第二章 站點(diǎn)設(shè)計(jì)與管理,26,(6)此時(shí)，出現(xiàn)確認(rèn)信息界面，顯示前面已經(jīng)設(shè)置完成的內(nèi)容，單擊 【完成】按鈕，如圖所示。,第二章 站點(diǎn)設(shè)計(jì)與管理,27,(7)返回到【管理站點(diǎn)】對(duì)話框，如圖所示。單擊【完成】按鈕，本地站點(diǎn)創(chuàng)建完成，在【文件】面板中的【本地視圖】窗口中會(huì)顯示該站點(diǎn)的名稱和根文件夾。,第二章 站點(diǎn)設(shè)計(jì)與管理,28,2.3項(xiàng)目實(shí)訓(xùn),1、上網(wǎng)瀏覽網(wǎng)頁(yè)，了解該網(wǎng)站的布局和內(nèi)容。 2、從網(wǎng)上下載一些自己喜歡的動(dòng)畫、圖片，為網(wǎng)頁(yè)制作做準(zhǔn)備。 3、創(chuàng)建本地站點(diǎn)，并把自己收集到的資源放到該站點(diǎn)中。,第二章 站點(diǎn)設(shè)計(jì)與管理,29,4.實(shí)訓(xùn)案例效果,第二章 站點(diǎn)設(shè)計(jì)與管理,30,2.4本章小結(jié),本章介紹了網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)。講解了網(wǎng)頁(yè)的相關(guān)概