第2章教育網(wǎng)站站點創(chuàng)建和管理

1、為了便于對制作中的網(wǎng)站進行組織和管理，在使用網(wǎng)站制作軟件Dreamweaver CS5制作單個頁面之前，必須首先創(chuàng)建一個站點，用來存儲所有Web網(wǎng)站文件和文檔的地方，通過對站點的設(shè)置，可以方便地實現(xiàn)對網(wǎng)頁統(tǒng)一的管理、在服務(wù)器上的遠程文件管理及文件傳輸。2.1.1 任務(wù)描述2.1.2 相關(guān)知識2.1.3 任務(wù)實施2.1.4 任務(wù)評價2.1.5 任務(wù)小結(jié)為了便于對制作中的網(wǎng)站進行組織和管理，在使用網(wǎng)站制作軟件Dreamweaver CS5制作單個頁面之前，必須首先創(chuàng)建一個站點，用來存儲所有Web網(wǎng)站文件和文檔的地方，通過對站點的設(shè)置，可以方便地實現(xiàn)對網(wǎng)頁統(tǒng)一的管理、在服務(wù)器上的遠程文件管理及文件傳

2、輸。在網(wǎng)站開發(fā)過程中，網(wǎng)站中所有文件、文件夾、圖片、CSS類的命名規(guī)范，應(yīng)做到見名知意、容易理解。現(xiàn)將網(wǎng)站開發(fā)中常用的命名規(guī)則總結(jié)如下：（1）網(wǎng)站文件夾命名規(guī)則在網(wǎng)站中，與文件緊密相關(guān)的另一個部分就是路徑，在網(wǎng)站開發(fā)中嚴禁將網(wǎng)站資源統(tǒng)一放在網(wǎng)站根目錄下，這樣會對后期網(wǎng)站編輯和維護中產(chǎn)生不便。網(wǎng)站資源應(yīng)該按照事先的規(guī)劃，按照不同目錄進行分類存放。一、網(wǎng)站開發(fā)常用的命名規(guī)則（1）網(wǎng)站文件夾命名規(guī)則表2-1 網(wǎng)站文件夾常用名稱一、網(wǎng)站開發(fā)常用的命名規(guī)則名稱說明images(image或img)存放圖像文件flash存放flash文件themes存放主題文件style（css）存放CSS樣式表文件js

3、存放JavaScript腳本文件video存放視頻文件sound存放音頻文件web（page）存放網(wǎng)頁文件resource存放資料文件（2）網(wǎng)站文件命名規(guī)則網(wǎng)頁文件命名規(guī)則：1.所有的文件名一律使用英文小寫；2.不要使用中文命名；3.不要在文件名中加入空格；4.避免在文件名字使用特殊符號，如“&”、“#”或者“？”。一、網(wǎng)站開發(fā)常用的命名規(guī)則表2-2 CSS樣式文件常用名稱一、網(wǎng)站開發(fā)常用的命名規(guī)則名稱說明index.css主頁CSS樣式表文件login.css登錄CSS樣式表文件pages.css頁面CSS樣式表文件layout.css布局、版面CSS樣式表文件font.css文字C

4、SS樣式表文件master.css主要CSS樣式表文件form.css表單CSS樣式表文件menu.css菜單CSS樣式表文件nav.css導(dǎo)航CSS樣式表文件search.css搜索CSS樣式表文件themes.css主題CSS樣式表文件Dreamweaver CS5的工作界面主要由標題欄、菜單欄、“插入”工具欄、“文檔”工具欄、“標準”工具欄、“文檔”窗口、“屬性”面板、“文件”面板組成。如圖2-1所示。二、認識Dreamweaver CS5的工作界面（1）標題欄標題欄顯示網(wǎng)頁的標題和網(wǎng)頁文檔的存儲位置。（2）菜單欄Dreamweaver CS5 的菜單欄包含10類菜單：文件、編輯、查看、

5、插入、修改、格式、命令、站點、窗口和幫助，如圖2-2所示。二、認識Dreamweaver CS5的工作界面（2）菜單欄文件：用來管理文件，包括創(chuàng)建和保存文件、導(dǎo)入與導(dǎo)出文件、預(yù)覽和打印文件等。編輯：用來編輯文本，包括撤銷與重做、復(fù)制與粘貼、查找與替換等。查看：用來查看對象，包括代碼的查看、網(wǎng)格線與標尺顯示、面板的隱藏和工具欄的顯示等。插入：用來插入網(wǎng)頁元素，包括插入圖像、多媒體、層、框架、表格、表單、電子郵件鏈接、日期、特殊字符和標簽等。修改：用來實現(xiàn)對頁面元素修改的功能，包括頁面屬性、快速標簽編輯器、鏈接、表格、框架、導(dǎo)航條、排列順序、轉(zhuǎn)換、末班、庫和時間軸等。格式：用來對文本進行操作，包括

6、字體、大小、顏色、CSS樣式、段落格式、縮進、凸出、列表、對齊和檢查拼寫等。二、認識Dreamweaver CS5的工作界面（2）菜單欄命令：收集了所有的附加命令項，包括播放錄制命令、編輯命令列表、擴展管理、套用源格式、清理XHTML/Word生成的HTML、創(chuàng)建網(wǎng)站相冊、格式化表格和表格排序。站點：用于創(chuàng)建于管理站點，包括管理站點、新建站點、獲取、取出、上傳、顯示取出者和改變站點范圍的鏈接等。窗口：用于打開與切換所有的面板和窗口、包括插入欄、屬性面板、站點窗口和CSS樣式面板等。幫助：內(nèi)含Dreamweaver幫助、聯(lián)機注冊、Dreamweaver支持中心和關(guān)于Dreamweaver等。二、

7、認識Dreamweaver CS5的工作界面（3）“插入”工具欄Dreamweaver CS5 “插入”工具欄包含用于創(chuàng)建和插入對象的按鈕。通過“插入”工具欄可以在網(wǎng)頁中快速插入多種網(wǎng)頁元素，如圖像、動畫、表格、Div標簽、超級鏈接、表單和表單控件。二、認識Dreamweaver CS5的工作界面（3）“插入”工具欄常用：創(chuàng)建和插入最常用的對象，例如圖像和表格。 布局：插入表格、表格元素、div標簽、框架和Spry Widget。我們還可以選擇表格的兩種視圖：標準（默認）表格和擴展表格。 表單：創(chuàng)建表單和插入表單元素（包括Spry驗證Widget）。 數(shù)據(jù)：插入Spry數(shù)據(jù)對象和其它動態(tài)元素，

8、例如記錄集、重復(fù)區(qū)域以及插入記錄表單和更新記錄表單。 Spry：包含一些用于構(gòu)建Spry頁面的按鈕，包括Spry數(shù)據(jù)對象和Widget。 jQuery：包含使用jQuery移動的構(gòu)建站點的按鈕。 InContext Editing：包含供生成InContext編輯頁面的按鈕，包括用于可編輯區(qū)域、重復(fù)區(qū)域和管理CSS類的按鈕。 二、認識Dreamweaver CS5的工作界面（3）“插入”工具欄文本：用于插入各種文本格式和列表格式的標簽，如b、em、p、h1和ul。 收藏夾：用于將“插入”面板中最常用的按鈕分組和組織到某一公共位置。 服務(wù)器代碼：僅適用于使用特定服務(wù)器語言的頁面，這些服務(wù)器語言包

9、括ASP、CFML Basic、CFML Flow、CFML Advanced和PHP。這些類別中的每一個都提供了服務(wù)器代碼對象，您可以將這些對象插入“代碼”視圖中。 二、認識Dreamweaver CS5的工作界面（4）“文檔”工具欄“文檔”工具欄中包含用于切換文檔窗口視圖的“代碼”、“拆分”、“設(shè)計”、“實時視圖”按鈕、各種查看選項和一些常用操作。如圖2-4所示。二、認識Dreamweaver CS5的工作界面（5）“標準”工具欄點擊“查看”菜單，選擇“工具欄”命令，在彈出的子菜單中選擇“標準”項，即可顯示標準工具欄?！皹藴省惫ぞ邫谥邪W(wǎng)頁文檔的基本操作按鈕，如新建、打開、保存、剪切、復(fù)

10、制、黏貼等按鈕，如圖2-5所示。二、認識Dreamweaver CS5的工作界面（6）文檔窗口“文檔”窗口也成為文檔編輯區(qū)，該窗口所顯示的內(nèi)容可以是代碼、網(wǎng)頁，或者兩者的共同體。在【設(shè)計視圖】中，“文檔”窗口中顯示的網(wǎng)頁近似于瀏覽器中顯示的效果。如圖2-1所示。二、認識Dreamweaver CS5的工作界面（7）“屬性”面板“屬性”面板位于文檔窗口的下方，用來設(shè)置頁面上正被編輯內(nèi)容的屬性，可以通過執(zhí)行【窗口】|【屬性】命令或者按“Ctrl+F3”組合鍵打開或關(guān)閉“屬性”面板。如圖2-7所示。二、認識Dreamweaver CS5的工作界面（8）面板組Dreamweaver CS5包括多個面板

11、，這些面板都有不同的功能，將它們疊加在一起便形成了面板組。如圖2-8所示。二、認識Dreamweaver CS5的工作界面（9）“文件”面板網(wǎng)站是多個網(wǎng)頁、圖像、動畫、程序等文件有機聯(lián)系的整體，要有效地管理這些文件及其聯(lián)系，需要一個有效地工具，“文件”面板便是這樣的工具。點擊【窗口】| 【文】命令，可以打開“文件”面板。如圖2-10所示。二、認識Dreamweaver CS5的工作界面（10）標簽選擇器在文檔窗口底部的狀態(tài)欄中，顯示環(huán)繞當前選定內(nèi)容標簽的層次結(jié)構(gòu)，單擊該層次結(jié)構(gòu)中的任何標簽，可以選擇該標簽及網(wǎng)頁中對應(yīng)的內(nèi)容。在標簽選擇器欄還可以設(shè)置網(wǎng)頁的顯示比例。如圖2-11所示。二、認識Dr

12、eamweaver CS5的工作界面站點是一種文檔的磁盤組織形式，由文檔和文檔所在的文件夾組成。多個網(wǎng)頁文檔通過各種鏈接關(guān)聯(lián)起來就構(gòu)成了站點。站點可以小到一個網(wǎng)頁，也可以大到整個網(wǎng)站。三、站點的概念Dreamweaver CS5中站點提供了三類站點：本地站點、遠程站點和測試站點。（1）本地站點：用于存放用戶網(wǎng)頁、素材等本地文件夾，是用戶工作的目錄。在制作一般網(wǎng)頁時只建立本地站點即可。（2）遠程站點：可在本地計算機上管理遠程Web服務(wù)器中的文件。也可以通過本地站點和遠程站點在本地磁盤和Web服務(wù)器之間傳輸文件。（3）測試站點：主要用于對動態(tài)頁面進行測試。四、Dreamweaver CS5中站點分

13、類（1）在本地硬盤上新建一個文件夾或者選擇一個已經(jīng)存在的文件夾作為站點的文件夾，那么這個文件夾就是本地站點的根目錄。提示：錄入站點名稱和設(shè)置本地站點文件夾時候應(yīng)該按照網(wǎng)站命名規(guī)則進行“站點名稱”和“本地站點文件夾”命名。1、在Dreamweaver CS5 中使用向?qū)Т罱ㄕ军c，創(chuàng)建“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站本地站點（2）啟動Dreamweaver CS5程序，在菜單欄中，選擇【站點】|【管理站點】菜單項。如圖2-12所示。1、在Dreamweaver CS5 中使用向?qū)Т罱ㄕ军c，創(chuàng)建“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站本地站點（3）彈出【管理站點】對話框，如圖2-13所示，單擊【新建】按鈕。1、

14、在Dreamweaver CS5 中使用向?qū)Т罱ㄕ军c，創(chuàng)建“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站本地站點（4）彈出【站點設(shè)置對象效果】對話框，在對話框中，選擇【站點】選項卡，如圖2-14所示，【站點名稱】文本框中，輸入網(wǎng)站站點名稱。單擊【本地站點文件夾】右側(cè)的 按鈕 ，選擇準備使用的站點文件夾。1、在Dreamweaver CS5 中使用向?qū)Т罱ㄕ军c，創(chuàng)建“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站本地站點（5）在圖2-14左邊選擇【本地信息】項，如圖2-15所示。在【默認圖像文件夾】文本框輸入站點中圖像文件夾名稱。并可以通過選擇【鏈接相對于】確定網(wǎng)站相對地址。在【W(wǎng)eb URL】文本框中輸入網(wǎng)站完整網(wǎng)址。1、在D

15、reamweaver CS5 中使用向?qū)Т罱ㄕ军c，創(chuàng)建“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站本地站點（5）設(shè)置完畢，點擊【保存】按鈕。（6）在【管理站點】對話框中，顯示剛剛新建的站點，如圖2-16所示，單擊【完成】按鈕。此時，如圖2-17所示。在【文件】面板中，即可看到創(chuàng)建的站點文件完成使用【管理站點】向?qū)Т罱ㄕ军c的操作。1、在Dreamweaver CS5 中使用向?qū)Т罱ㄕ军c，創(chuàng)建“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站本地站點（1）啟動Dreamweaver CS5 ，執(zhí)行【站點】|【管理站點】命令，打開【管理站點】對話框，如圖2-18。2、在Dreamweaver CS5 中導(dǎo)出 “平頂山韓創(chuàng)教育咨詢公司

16、”網(wǎng)站站點（2）選擇需要導(dǎo)出的站點。在站點列表窗口中單擊需要導(dǎo)出的站點。（3）在【管理站點】對話框中單擊【導(dǎo)出】按鈕，打開如圖2-1所示的【導(dǎo)出站點】對話框，在該對話框中為導(dǎo)出的站點文件命名，如命名為yuchuang.ste，并選擇一個保存位置，然后單擊【保存】按鈕，即可完成站點的導(dǎo)出。2、在Dreamweaver CS5 中導(dǎo)出 “平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站站點（1）啟動Dreamweaver CS5 ，執(zhí)行【站點】|管理站點】命令，打開【管理站點】對話框。（2）在【管理站點】對話框中單擊【導(dǎo)入】按鈕，打開如圖2-20的【導(dǎo)入站點】對話框，在該對話框中選擇已導(dǎo)出的“平頂山韓創(chuàng)教育咨詢公司”

17、網(wǎng)站站點文件yuchuang.ste，然后單擊【打開】按鈕，完成站點的導(dǎo)入。3、在Dreamweaver CS5 中導(dǎo)入本地網(wǎng)站站點。（1）啟動Dreamweaver CS5 ，執(zhí)行【站點】|【管理站點】命令，打開【管理站點】對話框，如圖2-21所示。（2）如選中“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站站點，單擊【編輯】按鈕，打開【站點設(shè)置web對象】對話框，在該對話框中即可對站點信息進行編輯。4、編輯站點（1）新建文件或文件夾啟動Dreamweaver CS5 ，執(zhí)行【窗口】【文件】命令，在面板集中打開【文件】面板。在站點名稱列表框中選中所需站點，如yuchuang。在站點文件結(jié)構(gòu)窗口中單擊鼠標右鍵，

18、在彈出的框架菜單中執(zhí)行【新建文件夾】命令，如圖2-21和2-22所示。自動在站點根目錄下創(chuàng)建一個新的文件夾。5、管理站點（2）重命名文件。選中需要重命名的文件夾或文件并單擊鼠標右鍵，在彈出的快捷菜單中選中【編輯】|【重命名】命令，當名稱進入改寫狀態(tài)，此時輸入新的名稱即可完成修改。如圖2-23所示。5、管理站點（3）刪除文件夾或文件。通過“文件”面板，可以刪除站點中的某個文件或文件夾。選中欲刪除的文件或文件夾，單擊鼠標右鍵，在彈出的快捷菜單中選中【編輯】|【刪除】命令，在彈出的確認對話框中單擊【是】按鈕即可。如圖2-24所示。5、管理站點（1）打開【管理站點】對話框，在站點列表窗口中選中要刪除的

19、站點，單擊【刪除】按鈕。（2）系統(tǒng)會彈出提示對話框，提示執(zhí)行該操作后將不能撤銷，如圖2-25所示。6、網(wǎng)站站點刪除（3）單擊【是】按鈕確認刪除，返回到【管理站點】對話框可以看到該站點已被刪除。單擊【完成】按鈕完成站點的刪除操作?！咎崾尽吭凇竟芾碚军c】窗口中刪除站點只是刪除Dreamweaver CS5 同本地站點文件的連接關(guān)系，并沒有從硬盤上刪除本地站點的文件，可以單擊【管理站點】窗口中的【新建】按鈕重新創(chuàng)建站點。6、網(wǎng)站站點刪除 通過本任務(wù)的學(xué)習(xí)，掌握Dreamweaver CS5中本地站點創(chuàng)建和管理基本操作，掌握站點文件和文件夾的命名規(guī)則，掌握Dreamweaver CS5中站點文件夾和文

20、件的創(chuàng)建和管理基本操作，完成“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站站點創(chuàng)建和管理操作。2.2.1 任務(wù)描述2.2.2 相關(guān)知識2.2.3 任務(wù)實施2.2.4 任務(wù)評價2.2.5 任務(wù)小結(jié)在對網(wǎng)站站點的概念和功能有了一定的了解的基礎(chǔ)上，本任務(wù)說明如何使用Dreamweaver CS5 設(shè)置遠程站點，并完成“平頂山韓創(chuàng)教育咨詢公司”網(wǎng)站遠程站點建立和管理操作。網(wǎng)站空間（Webhost）。主要指存放網(wǎng)站內(nèi)容的空間。網(wǎng)站空間也稱為虛擬主機空間，通常企業(yè)做網(wǎng)站都不會自己架服務(wù)器，而是選擇以虛擬主機空間做為放置網(wǎng)站內(nèi)容的網(wǎng)站空間。網(wǎng)站空間指能存放網(wǎng)站文件和資料，包括文字、文檔、數(shù)據(jù)庫、網(wǎng)站的頁面、圖片等文件的容量

21、。網(wǎng)絡(luò)上提供的網(wǎng)站空間有兩種形式：收費網(wǎng)站空間和免費的網(wǎng)上空間。收費的網(wǎng)站空間提供的服務(wù)更全面一些，主要體現(xiàn)在提供的空間容量更大、支持應(yīng)用程序技術(shù)、提供數(shù)據(jù)庫空間等。免費網(wǎng)站空間不支持應(yīng)用程序技術(shù)和數(shù)據(jù)庫技術(shù)。一、 網(wǎng)站空間域名（Domain Name）。域名是由一串用點分隔的名字組成的Internet上某一臺計算機或計算機組的名稱，用于在數(shù)據(jù)傳輸時標識計算機的電子方位（有時也指地理位置）。域名是由若干英文字母和數(shù)字組成，由“.”分隔成幾部分，如就是域名。一個域名的目的是便于記憶和溝通的一組服務(wù)器的地址（網(wǎng)站，電子郵件，F(xiàn)TP等），因此域名的字符組成要便于記憶。域名分國內(nèi)域名和國際域名兩種，國

22、內(nèi)域名由中國互聯(lián)網(wǎng)中心（http:/）管理和注冊。注冊申請域名首先在線填寫申請表，收到確認信息后，提交申請表，交費。國際域名主要申請網(wǎng)址為http:/。二、 域名（1）在www.3v.cm網(wǎng)站上申請一個免費的網(wǎng)站空間，在免費空間申請頁面。進入用戶協(xié)議條款界面。如圖2-26所示。三、申請免費網(wǎng)站空間與注冊域名。（2）單擊【同意】按鈕，進入用戶名注冊界面。如圖2-27所示。三、申請免費網(wǎng)站空間與注冊域名。（3）單擊【下一步】按鈕，進入會員注冊信息填寫界面，在這個界面中填寫用戶個人信息。如圖2-28所示。三、申請免費網(wǎng)站空間與注冊域名。（4）單擊【下一步】按鈕，進入注冊成功界面，獲取網(wǎng)站空間用戶名、密碼、域名、FTP服務(wù)器地址，為后續(xù)遠程站點創(chuàng)建及管理奠定基礎(chǔ)。如圖2-29所示。三、申請免