網(wǎng)頁設計基礎知識

1、1安徽財經(jīng)大學 網(wǎng)頁制作基礎網(wǎng)頁制作基礎教程主主講講： 魏魏蘇蘇林林EmailEmail：wei_wei_第第1 1章章 網(wǎng)頁設計基礎知識網(wǎng)頁設計基礎知識3第1章 網(wǎng)頁設計基礎知識n1.1 網(wǎng)頁制作基礎知識n1.2 DreamWeaver界面介紹n1.3 創(chuàng)建站點n1.3 網(wǎng)頁文件的基本操作n1.4 設置頁面屬性n1.5 練習制作簡單的網(wǎng)頁站點41.1網(wǎng)頁制作基礎知識n網(wǎng)頁制作基礎知識：網(wǎng)頁制作基礎知識： 網(wǎng)頁和網(wǎng)站網(wǎng)頁和網(wǎng)站 HTMLHTML基礎知識基礎知識 WebWeb圖像的基礎知識圖像的基礎知識 網(wǎng)站設計基本流程網(wǎng)站設計基本流程5網(wǎng)頁的概念n網(wǎng)頁是由網(wǎng)頁是由HTMLHTML（超級文本標識

2、語言）或者其他語言編（超級文本標識語言）或者其他語言編寫的，通過寫的，通過IEIE瀏覽器編譯后供用戶獲取信息的頁面，瀏覽器編譯后供用戶獲取信息的頁面，它又稱為它又稱為WebWeb頁，其中可包含文字、圖像、表格、動畫頁，其中可包含文字、圖像、表格、動畫和超級鏈接等各種網(wǎng)頁元素。和超級鏈接等各種網(wǎng)頁元素。n網(wǎng)頁是展現(xiàn)各種信息的載體。網(wǎng)頁是展現(xiàn)各種信息的載體。6網(wǎng)站的概念n網(wǎng)站就是一個或多個網(wǎng)頁的集合。從廣義上講，網(wǎng)站網(wǎng)站就是一個或多個網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當網(wǎng)頁發(fā)布到就是當網(wǎng)頁發(fā)布到InternetInternet上以后，能通過瀏覽器在上以后，能通過瀏覽器在I Internetntern

3、et上訪問的頁面。上訪問的頁面。n網(wǎng)站是通過超鏈接連接起來的一些網(wǎng)頁的集合。網(wǎng)站是通過超鏈接連接起來的一些網(wǎng)頁的集合。 門戶網(wǎng)站門戶網(wǎng)站 職能網(wǎng)站職能網(wǎng)站 專業(yè)網(wǎng)站專業(yè)網(wǎng)站 個人網(wǎng)站個人網(wǎng)站7網(wǎng)頁的分類n按所處位置分類按所處位置分類 按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。8網(wǎng)頁的分類n按表現(xiàn)形式分類按表現(xiàn)形式分類 按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。9網(wǎng)頁中的常用術(shù)語n萬維網(wǎng)（萬維網(wǎng)（wwwwww） n瀏覽器瀏覽器 n統(tǒng)一資源定位符（統(tǒng)一資源定位符（URLURL） n超

4、文本傳輸協(xié)議（超文本傳輸協(xié)議（HTTPHTTP） nIPIP地址地址 n域名域名 n超級鏈接超級鏈接 n超級文本標記語言（超級文本標記語言（HTMLHTML） 10萬維網(wǎng)（www）n萬維網(wǎng)（萬維網(wǎng)（wwwwww）是）是World Wide WebWorld Wide Web的中文簡稱，也稱的中文簡稱，也稱為為3W3W網(wǎng)，它的本質(zhì)是一種基于超級文本技術(shù)的交互式網(wǎng)，它的本質(zhì)是一種基于超級文本技術(shù)的交互式信息瀏覽檢索工具，是信息瀏覽檢索工具，是InternetInternet提供的應用最普及、提供的應用最普及、功能最豐富、使用方法最簡便的信息服務，用戶可通功能最豐富、使用方法最簡便的信息服務，用戶可

5、通過它在過它在InternetInternet上瀏覽、編輯、傳遞超文本格式的文上瀏覽、編輯、傳遞超文本格式的文件（即件（即.html.html格式文件）。格式文件）。11瀏覽器n瀏覽器是用于閱讀網(wǎng)頁中信息的一種軟件工具，就像瀏覽器是用于閱讀網(wǎng)頁中信息的一種軟件工具，就像使用電腦必須有操作系統(tǒng)一樣。使用電腦必須有操作系統(tǒng)一樣。 Internet ExplorerInternet Explorer（IEIE） Netscape NavigatorNetscape Navigator（NENE） 騰訊騰訊TTTT瀏覽器瀏覽器 遨游瀏覽器遨游瀏覽器 FoxfireFoxfire火狐瀏覽器火狐瀏覽器 1

6、2統(tǒng)一資源定位符（URL）nURLURL（Uniform Resource LocatorUniform Resource Locator）主要是用來指定）主要是用來指定協(xié)議（如協(xié)議（如HTTPHTTP或或FTPFTP）以及對象、文檔、萬維網(wǎng)網(wǎng)頁或）以及對象、文檔、萬維網(wǎng)網(wǎng)頁或其他目標在其他目標在InternetInternet的位置和存取方式。的位置和存取方式。 通信協(xié)議通信協(xié)議 主機名主機名 所要訪問的網(wǎng)頁路徑及名稱所要訪問的網(wǎng)頁路徑及名稱 13超文本傳輸協(xié)議（HTTPHTTP）n超文本傳輸協(xié)議超文本傳輸協(xié)議(HTTP(HTTP，HyperTextHyperText Transfer Pr

7、otoc Transfer Protocol)ol)是互聯(lián)網(wǎng)上應用最為廣泛的一種網(wǎng)絡協(xié)議。所有的是互聯(lián)網(wǎng)上應用最為廣泛的一種網(wǎng)絡協(xié)議。所有的WWWWWW文件都必須遵守這個標準。設計文件都必須遵守這個標準。設計HTTPHTTP最初的目的是最初的目的是為了提供一種發(fā)布和接收為了提供一種發(fā)布和接收HTMLHTML頁面的方法頁面的方法14IP地址nIPIP地址用來標識連接到地址用來標識連接到InternetInternet上電腦的指定編號，上電腦的指定編號，每一個每一個IPIP地址對應一臺電腦，這與用電話號碼標識電地址對應一臺電腦，這與用電話號碼標識電話網(wǎng)絡中的電話相同。話網(wǎng)絡中的電話相同。n電腦識別

8、的電腦識別的IPIP地址由地址由3232位二進制數(shù)值組成，電腦上以位二進制數(shù)值組成，電腦上以十進制數(shù)值來顯示，一組數(shù)值分為十進制數(shù)值來顯示，一組數(shù)值分為4 4部分，每一部分均部分，每一部分均不能大于不能大于255255，中間用，中間用“. .”分隔，如分隔，如99。15域名n域名就是常說的網(wǎng)址，它也具有惟一性，如百度的網(wǎng)域名就是常說的網(wǎng)址，它也具有惟一性，如百度的網(wǎng)址址、網(wǎng)易的網(wǎng)址、網(wǎng)易的網(wǎng)址等就是一等就是一個域名，域名由漢語拼音或英文字符加上數(shù)字表示，個域名，域名由漢語拼音或英文字符加上數(shù)字表示，在訪問網(wǎng)絡時，域名將通過域名服務器轉(zhuǎn)換成在訪問網(wǎng)絡時，域

9、名將通過域名服務器轉(zhuǎn)換成IPIP地址，地址，這種轉(zhuǎn)換是在后臺完成的。這種轉(zhuǎn)換是在后臺完成的。16超級鏈接n超級鏈接是網(wǎng)頁中最常用的元素之一，網(wǎng)頁就是通過超級鏈接是網(wǎng)頁中最常用的元素之一，網(wǎng)頁就是通過無數(shù)的超級鏈接才能組成一個網(wǎng)站。無數(shù)的超級鏈接才能組成一個網(wǎng)站。n超級鏈接可以鏈接到網(wǎng)站內(nèi)部頁面、對象，也可以鏈超級鏈接可以鏈接到網(wǎng)站內(nèi)部頁面、對象，也可以鏈接到其他網(wǎng)站，大大方便了用戶在各個頁面對象之間接到其他網(wǎng)站，大大方便了用戶在各個頁面對象之間實現(xiàn)跳轉(zhuǎn)。實現(xiàn)跳轉(zhuǎn)。17超級文本標記語言（HTML）nHTMLHTML（Hyper Text Markup LanguageHyper Text Mar

10、kup Language）是一種用戶與）是一種用戶與電腦之間進行交流的文本技術(shù)，各種網(wǎng)頁均是用電腦之間進行交流的文本技術(shù)，各種網(wǎng)頁均是用HTMLHTML語言來描述的，用語言來描述的，用HTMLHTML語言編寫的網(wǎng)頁文件的擴展名語言編寫的網(wǎng)頁文件的擴展名一般為一般為“* *. .htmhtm”或或“* *.html.html”。181.5 網(wǎng)頁設計的相關知識n設計網(wǎng)頁的原則設計網(wǎng)頁的原則 n網(wǎng)頁設計的一般步驟網(wǎng)頁設計的一般步驟 n網(wǎng)頁制作的常用工具網(wǎng)頁制作的常用工具19設計網(wǎng)頁的原則n整體規(guī)劃整體規(guī)劃 n鮮明的主題鮮明的主題n善用圖像善用圖像n醒目的導航醒目的導航n及時更新及時更新n易記的網(wǎng)站名

11、稱易記的網(wǎng)站名稱n動畫適量動畫適量20網(wǎng)頁設計的一般步驟n規(guī)劃網(wǎng)站規(guī)劃網(wǎng)站n收集整理資源收集整理資源n配置站點配置站點n創(chuàng)建頁面創(chuàng)建頁面n測試站點測試站點n發(fā)布站點發(fā)布站點 n維護、更新站點維護、更新站點21網(wǎng)頁制作的常用工具n網(wǎng)頁設計軟件網(wǎng)頁設計軟件 DreamweaverDreamweaver是目前使用最多的網(wǎng)頁設計軟件。是目前使用最多的網(wǎng)頁設計軟件。n圖像處理軟件圖像處理軟件 制作網(wǎng)頁圖像的軟件種類繁多，大多數(shù)網(wǎng)頁設計人員選擇的是制作網(wǎng)頁圖像的軟件種類繁多，大多數(shù)網(wǎng)頁設計人員選擇的是F Fireworksireworks或或PhotoshopPhotoshop。n動畫制作軟件動畫制作軟件

12、 網(wǎng)頁動畫制作中最常用的軟件非網(wǎng)頁動畫制作中最常用的軟件非FlashFlash莫屬。莫屬。n通常將通常將DreamweaverDreamweaver、 FireworksFireworks、 FlashFlash俗稱網(wǎng)頁俗稱網(wǎng)頁三劍客三劍客221.2 Dreamweaver 8簡介nMacromedia Dreamweaver 8Macromedia Dreamweaver 8是一款專業(yè)的是一款專業(yè)的HTMLHTML編輯器，編輯器，用于對用于對 Web Web 站點、站點、WebWeb頁和頁和 Web Web 應用程序進行設計、應用程序進行設計、編碼和開發(fā)。無論您是喜歡直接編寫編碼和開發(fā)。無論

13、您是喜歡直接編寫HTMLHTML代碼的駕馭代碼的駕馭感還是偏愛在可視化編輯環(huán)境中工作，感還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver Dreamweaver 8 8都會為您提供幫助良多的工具，豐富您的都會為您提供幫助良多的工具，豐富您的 Web Web 創(chuàng)作創(chuàng)作體驗。體驗。 Dreamweaver8Dreamweaver8的安裝與啟動的安裝與啟動 Dreamweaver Dreamweaver 的工作界面的工作界面 使用使用Dreamweaver8Dreamweaver8的幫助的幫助23Dreamweaver8的安裝24Dreamweaver 8.0Dreamweaver 8.0的啟

14、動和退出的啟動和退出1.1.啟動啟動Dreamweaver8.0Dreamweaver8.0在在WindowsWindows操作系統(tǒng)下，單擊左下角的操作系統(tǒng)下，單擊左下角的【開始開始】按鈕，從按鈕，從【程序程序】菜單中選擇菜單中選擇MacromediaMacromedia菜單，然后從子菜單菜單，然后從子菜單中單擊中單擊【Macromedia Dreamweaver 8Macromedia Dreamweaver 8】即可啟動，如即可啟動，如圖所示。圖所示。252.2.退出退出Dreamweaver 8.0Dreamweaver 8.0退出退出Dreamweaver 8.0Dreamweaver

15、 8.0的方法很簡單，我們可以有以下幾的方法很簡單，我們可以有以下幾種方式退出編輯界面：種方式退出編輯界面：（1 1）單擊）單擊Dreamweaver 8Dreamweaver 8窗口右上方的關閉按鈕；窗口右上方的關閉按鈕；（2 2）按下）按下“Alt+F4”Alt+F4”組合鍵；組合鍵；（3 3）選擇）選擇“文件文件”菜單中的菜單中的“退出退出”命令，或按快捷鍵命令，或按快捷鍵Ctrl+QCtrl+Q退出系統(tǒng)。退出系統(tǒng)。 26Dreamweaver 8.0Dreamweaver 8.0 的工作界面的工作界面nDreamweaver 8Dreamweaver 8的工作界面主要包括有標題欄、菜單

16、的工作界面主要包括有標題欄、菜單欄、文檔工具欄、文檔窗口、狀態(tài)欄、插入面版、屬欄、文檔工具欄、文檔窗口、狀態(tài)欄、插入面版、屬性面版和性面版和CSSCSS樣式面版。本節(jié)將主要介紹樣式面版。本節(jié)將主要介紹Dreamweaver Dreamweaver 8 8的工作界面。的工作界面。27標題欄nDreamweaver 8Dreamweaver 8的標題欄在應用程序的最上面，它的的標題欄在應用程序的最上面，它的左側(cè)用來顯示當前正在運行的應用程序名稱，它的右左側(cè)用來顯示當前正在運行的應用程序名稱，它的右側(cè)為最小化、最大化（還原）和關閉按鈕，如所示。側(cè)為最小化、最大化（還原）和關閉按鈕，如所示。n需要說明

17、的是，標題欄是默認的文檔標題需要說明的是，標題欄是默認的文檔標題Untitled DUntitled Documentocument，顯示的文件名為，顯示的文件名為Untitled-1Untitled-1。每當用戶創(chuàng)。每當用戶創(chuàng)建一個新的文檔時，建一個新的文檔時，Dreamweaver 8Dreamweaver 8就會自動以就會自動以UntitUntitledled給出一個默認的名字。當用戶保存文件時，系統(tǒng)會給出一個默認的名字。當用戶保存文件時，系統(tǒng)會提示用戶另外命名一個名字，當然用戶也可以以默認提示用戶另外命名一個名字，當然用戶也可以以默認的名字來保存。的名字來保存。28菜單欄n菜單欄，包括

18、有菜單欄，包括有“文件文件”、“編輯編輯”、“查看查看”、“插插入入”、“修改修改”、“文本文本”、“命令命令”、“站點站點”、“窗口窗口”、“幫助幫助”1010個菜單項。個菜單項。nDreamweaver 8Dreamweaver 8菜單選項有以下菜單選項有以下3 3種形式：種形式： （1 1）子菜單命令：該類命令的名稱后面帶有一個向右的小三角）子菜單命令：該類命令的名稱后面帶有一個向右的小三角箭頭，當鼠標移動到該類命令上時，就會打開一個子菜單。例箭頭，當鼠標移動到該類命令上時，就會打開一個子菜單。例如在如在“插入插入”菜單下的菜單下的“媒體媒體”菜單命令。菜單命令。 （2 2）開關命令：該

19、命令在命令執(zhí)行后，命令的左邊會加上）開關命令：該命令在命令執(zhí)行后，命令的左邊會加上“”的選擇標記。例如在的選擇標記。例如在“查看查看”菜單下的菜單下的“設計設計”菜單命令。菜單命令。 （3 3）對話框命令：該類命令的名稱后面帶有一個省略號，單擊）對話框命令：該類命令的名稱后面帶有一個省略號，單擊該類命令則會打開一個對話框。該類命令則會打開一個對話框。29文檔工具欄n“文檔文檔”工具欄中包含按鈕，這些按鈕使您可以在文工具欄中包含按鈕，這些按鈕使您可以在文檔的不同視圖間快速切換：檔的不同視圖間快速切換：“代碼代碼”視圖、視圖、“設計設計”視圖、同時顯示視圖、同時顯示“代碼代碼”和和“設計設計”視圖

20、的拆分視圖。視圖的拆分視圖。工具欄中還包含一些與查看文檔、在本地和遠程站點工具欄中還包含一些與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令和選項。間傳輸文檔有關的常用命令和選項。30文檔窗口n文檔窗口顯示當前文檔?？梢赃x擇下列任一視圖：文檔窗口顯示當前文檔。可以選擇下列任一視圖： （1 1）設計視圖：是一個用于可視化頁面布局、可視化編輯和快）設計視圖：是一個用于可視化頁面布局、可視化編輯和快速應用程序開發(fā)的設計環(huán)境。在該視圖中，速應用程序開發(fā)的設計環(huán)境。在該視圖中，Dreamweaver Dreamweaver 顯示顯示文檔的完全可編輯的可視化表示形式，類似于在瀏覽器中查看文檔的完全可編

21、輯的可視化表示形式，類似于在瀏覽器中查看頁面時看到的內(nèi)容。頁面時看到的內(nèi)容。 （2 2）代碼視圖：是一個用于編寫和編輯）代碼視圖：是一個用于編寫和編輯 HTMLHTML、JavaScriptJavaScript、服務器語言代碼（如服務器語言代碼（如PHPPHP或或ColdFusionColdFusion標記語言）以及任何其它標記語言）以及任何其它類型代碼的手工編碼環(huán)境。類型代碼的手工編碼環(huán)境。 （3 3）代碼和設計視圖：可以在單個窗口中同時看到同一文檔的）代碼和設計視圖：可以在單個窗口中同時看到同一文檔的代碼視圖和設計視圖。代碼視圖和設計視圖。n當文檔窗口有一個標題欄時，標題欄顯示頁面標題，并

22、當文檔窗口有一個標題欄時，標題欄顯示頁面標題，并在括號中顯示文件的路徑和文件名。如果您做了更改但在括號中顯示文件的路徑和文件名。如果您做了更改但尚未保存，尚未保存，Dreamweaver Dreamweaver 將在文件名后顯示一個星號。將在文件名后顯示一個星號。31插入面版n插入面版包含用于創(chuàng)建和插入對象（如表格、層和圖插入面版包含用于創(chuàng)建和插入對象（如表格、層和圖像）的按鈕，如圖像）的按鈕，如圖1-151-15所示。當鼠標指針滾動到一個所示。當鼠標指針滾動到一個按鈕上時，會出現(xiàn)一個工具提示，其中含有該按鈕的按鈕上時，會出現(xiàn)一個工具提示，其中含有該按鈕的名稱。這些按鈕被組織到幾個類別中，您可

23、以在名稱。這些按鈕被組織到幾個類別中，您可以在“插插入入”欄的左側(cè)切換它們。當前文檔包含服務器代碼時，欄的左側(cè)切換它們。當前文檔包含服務器代碼時，還會顯示其它類別。當您啟動還會顯示其它類別。當您啟動DreamweaverDreamweaver時，系統(tǒng)時，系統(tǒng)會打開您上次使用的類別。會打開您上次使用的類別。32屬性面版n屬性面版可以檢查和編輯當前選定頁面元素（如文本屬性面版可以檢查和編輯當前選定頁面元素（如文本和插入的對象）的最常用屬性。屬性面版中的內(nèi)容根和插入的對象）的最常用屬性。屬性面版中的內(nèi)容根據(jù)選定的元素會有所不同。例如，如果您選擇頁面上據(jù)選定的元素會有所不同。例如，如果您選擇頁面上的一

24、個圖像，則屬性面版將改為顯示該圖像的屬性如的一個圖像，則屬性面版將改為顯示該圖像的屬性如圖像的文件路徑、圖像的寬度和高度、圖像周圍的邊圖像的文件路徑、圖像的寬度和高度、圖像周圍的邊框等?？虻取?3使用Dreamweaver8的幫助n當我們在學習的過程出現(xiàn)問題難以解決時，一個最好當我們在學習的過程出現(xiàn)問題難以解決時，一個最好的辦法就是使用的辦法就是使用Dreamweaver 8Dreamweaver 8的在線幫助，下面我的在線幫助，下面我們介紹使用的在線幫助的方法。們介紹使用的在線幫助的方法。34打開幫助系統(tǒng)n選擇選擇“幫助幫助”菜單下的菜單下的“DreamweaverDreamweaver幫助

25、幫助”，就可，就可以打開以打開Dreamweaver 8Dreamweaver 8幫助系統(tǒng)。也可以直接按下幫助系統(tǒng)。也可以直接按下F1F1鍵打開幫助系統(tǒng)。鍵打開幫助系統(tǒng)。35使用幫助n使用幫助系統(tǒng)查找所需要的信息可以按以下方法進行：使用幫助系統(tǒng)查找所需要的信息可以按以下方法進行： 1 1、若要搜索產(chǎn)品中的幫助、若要搜索產(chǎn)品中的幫助(Windows) (Windows) ，請執(zhí)行以下操作：，請執(zhí)行以下操作：在在 Dreamweaver Dreamweaver 幫助中，單擊幫助中，單擊“搜索搜索”選項卡。選項卡。 在文本框中鍵入一個單詞或短語，然后單擊在文本框中鍵入一個單詞或短語，然后單擊“列出主

26、題列出主題”。 雙擊結(jié)果列表中的一個主題，可顯示該主題。雙擊結(jié)果列表中的一個主題，可顯示該主題。36使用幫助n使用幫助系統(tǒng)查找所需要的信息可以按以下方法進行：使用幫助系統(tǒng)查找所需要的信息可以按以下方法進行： 2 2、若要使用索引、若要使用索引 (Windows)(Windows)，請執(zhí)行以下操作：，請執(zhí)行以下操作：（1 1）在）在 Dreamweaver Dreamweaver 幫助中，單擊幫助中，單擊“索引索引”選項卡。選項卡。 （2 2）滾動到字母列表中的一個索引項，然后雙擊該項可顯示索引信）滾動到字母列表中的一個索引項，然后雙擊該項可顯示索引信息。息。37查看操作相關幫助n在編輯的過程中

27、，有時需要查看當前操作的幫助信息，在編輯的過程中，有時需要查看當前操作的幫助信息，這時可以按照如下方法操作：這時可以按照如下方法操作： （1 1）如果是在對話框中，要查看當前對話框的信息，可以單擊）如果是在對話框中，要查看當前對話框的信息，可以單擊對話框的對話框的“幫助幫助”按紐，啟動幫助系統(tǒng)后將直接跳轉(zhuǎn)到當前操按紐，啟動幫助系統(tǒng)后將直接跳轉(zhuǎn)到當前操作有關的幫助信息頁面上。例如在表格對話框中單擊作有關的幫助信息頁面上。例如在表格對話框中單擊“幫助幫助”按紐，則會顯示表格的幫助信息。按紐，則會顯示表格的幫助信息。 （2 2）如果是在使用浮動面版進行編輯的過程中，要查看幫助系）如果是在使用浮動面版

28、進行編輯的過程中，要查看幫助系統(tǒng)，可以單擊浮動面版上的統(tǒng)，可以單擊浮動面版上的 按紐，也可以啟動幫助系統(tǒng)，并直按紐，也可以啟動幫助系統(tǒng)，并直接跳轉(zhuǎn)到與當前操作相關的幫助頁面上。例如在屬性面版上單接跳轉(zhuǎn)到與當前操作相關的幫助頁面上。例如在屬性面版上單擊按紐，將會顯示屬性的相關幫助信息。擊按紐，將會顯示屬性的相關幫助信息。381.31.3創(chuàng)建站點創(chuàng)建站點n創(chuàng)建本地站點創(chuàng)建本地站點n管理站點管理站點n管理網(wǎng)站中的文件和文件夾管理網(wǎng)站中的文件和文件夾39創(chuàng)建本地站點創(chuàng)建本地站點n步驟步驟1 1：在本地硬盤上建立一個用來存放站點的文件夾，：在本地硬盤上建立一個用來存放站點的文件夾，命名為命名為“site

29、”site”，該文件夾就是本地站點的根目錄，該文件夾就是本地站點的根目錄，是為網(wǎng)站特別建立的一個文件夾。是為網(wǎng)站特別建立的一個文件夾。n步驟步驟2:2:打開打開Dreamweaver 8.0Dreamweaver 8.0，選擇，選擇“站點站點”菜單下菜單下的的“管理站點管理站點”命令，或者選擇文件面板中的命令，或者選擇文件面板中的“管理管理站點站點”命令，打開命令，打開 “ “管理站點管理站點”對話框。對話框。 40n步驟步驟3:3:單擊單擊“管理站點管理站點”對話框中的對話框中的“新建新建”按鈕，按鈕，在彈出菜單中選擇在彈出菜單中選擇“站點站點”命令。命令。41n步驟步驟4 4：單擊：單擊“

30、站點站點”命令后，系統(tǒng)會彈出窗口，這是命令后，系統(tǒng)會彈出窗口，這是一個定義站點的向?qū)?，選擇一個定義站點的向?qū)?，選擇“基本基本”選項卡，給網(wǎng)站選項卡，給網(wǎng)站定義一個名稱，例如定義一個名稱，例如“數(shù)學與計算機系數(shù)學與計算機系”。42n步驟步驟5 5：單擊：單擊“下一步下一步”按鈕，在窗口中設置網(wǎng)站是否按鈕，在窗口中設置網(wǎng)站是否使用服務器技術(shù)，例如：使用服務器技術(shù)，例如：ASPASP、PHPPHP等。由于我們要制等。由于我們要制作的是基本的靜態(tài)網(wǎng)站，所以選擇作的是基本的靜態(tài)網(wǎng)站，所以選擇“否，我不想使用否，我不想使用服務器技術(shù)服務器技術(shù)”單選按鈕。單選按鈕。43n步驟步驟6 6：單擊：單擊“下一步下

31、一步”按鈕，開始設置網(wǎng)頁的存儲方按鈕，開始設置網(wǎng)頁的存儲方法和存儲路徑。在上半部分的單選項中選擇第一項法和存儲路徑。在上半部分的單選項中選擇第一項“編輯我的計算機上的本地副本，完成后再上傳到服編輯我的計算機上的本地副本，完成后再上傳到服務器（推薦）務器（推薦）”。如果申請的網(wǎng)站空間支持在線編輯。如果申請的網(wǎng)站空間支持在線編輯功能，那么可以選擇功能，那么可以選擇“使用本地網(wǎng)絡直接在服務器上使用本地網(wǎng)絡直接在服務器上編輯編輯”單選項。單選項。44n步驟步驟7 7：完成以上的設置后單擊：完成以上的設置后單擊“下一步下一步”按鈕，在這按鈕，在這里選擇連接服務器的方式，以及網(wǎng)頁在服務器上的存里選擇連接服

32、務器的方式，以及網(wǎng)頁在服務器上的存儲位置。儲位置。 45n步驟步驟8 8：單擊：單擊“下一步下一步”按鈕。在這里選擇是否使用按鈕。在這里選擇是否使用“存回存回”和和“取出取出”。選中。選中“是，啟用存回和取出是，啟用存回和取出”選項，可以多人共同完成網(wǎng)站的維護工作。如果只需選項，可以多人共同完成網(wǎng)站的維護工作。如果只需一個就能夠完成網(wǎng)站的維護工作，可以選擇一個就能夠完成網(wǎng)站的維護工作，可以選擇“否否”。 46n步驟步驟9 9：至此完成了對網(wǎng)站的基本定義。單擊：至此完成了對網(wǎng)站的基本定義。單擊“下一步下一步”按鈕，按鈕，Dreamweaver 8.0Dreamweaver 8.0會彈出對話框詢問

33、設置的信會彈出對話框詢問設置的信息是否準確，單擊息是否準確，單擊“完成完成”按鈕，本地站點就創(chuàng)建成按鈕，本地站點就創(chuàng)建成功了。功了。47管理站點管理站點1.1.切換站點切換站點Dreamweaver 8.0Dreamweaver 8.0中可以同時存在多個站點，在文件面板中可以同時存在多個站點，在文件面板左邊的下拉列表框中選中某個已創(chuàng)建的站點，就可切左邊的下拉列表框中選中某個已創(chuàng)建的站點，就可切換到對這個站點進行操作的狀態(tài)。換到對這個站點進行操作的狀態(tài)。482 2編輯站點編輯站點如果要對站點進行編輯，可以在如果要對站點進行編輯，可以在“管理站點管理站點”對話框中，對話框中，選擇要編輯的站點，然后

34、用鼠標單擊選擇要編輯的站點，然后用鼠標單擊“管理站點管理站點”對對話框中的話框中的“編輯編輯”按鈕，重新打開按鈕，重新打開“站點定義站點定義”向?qū)В驅(qū)?，根?jù)需要一步一步修改站點的屬性即可。根據(jù)需要一步一步修改站點的屬性即可。493 3刪除站點刪除站點如果不需要某個站點時，可以將其從站點列表中刪除。如果不需要某個站點時，可以將其從站點列表中刪除。選擇選擇“站點站點”菜單下的菜單下的“管理站點管理站點”命令，打開命令，打開“管管理站點理站點”對話框，在該對話框中選擇一個站點，單擊對話框，在該對話框中選擇一個站點，單擊“刪除刪除”按鈕，即可刪除一個站點，對某一個站點進按鈕，即可刪除一個站點，對某一

35、個站點進行刪除操作后，網(wǎng)站的文件仍保存在硬盤原來的位置行刪除操作后，網(wǎng)站的文件仍保存在硬盤原來的位置上，并沒有從硬盤上刪除。上，并沒有從硬盤上刪除。50管理網(wǎng)站中的文件和文件夾管理網(wǎng)站中的文件和文件夾1 1創(chuàng)建文件夾和文件創(chuàng)建文件夾和文件文件面板通常顯示站點中的所有文件和文件夾，但新建文件面板通常顯示站點中的所有文件和文件夾，但新建的站點中不包含任何文件或文件夾。所有的文件和文的站點中不包含任何文件或文件夾。所有的文件和文件夾都需要新建，在文件面板中站點根目錄上單擊鼠件夾都需要新建，在文件面板中站點根目錄上單擊鼠標右鍵，然后從彈出的快捷菜單中單擊菜單項標右鍵，然后從彈出的快捷菜單中單擊菜單項“

36、新建新建文件夾文件夾”或或“新建文件新建文件”，接著給新的文件夾或文件，接著給新的文件夾或文件命名。命名。512 2重命名文件夾或文件重命名文件夾或文件先選中需要重命名的文件夾或文件，然后單擊右鍵，在彈出的快捷菜單中先選中需要重命名的文件夾或文件，然后單擊右鍵，在彈出的快捷菜單中單擊單擊“編輯編輯”選項的下級菜單中的選項的下級菜單中的“重命名重命名”命令或者按命令或者按【F2F2】快捷快捷鍵，文件夾或文件的名稱變?yōu)榭删庉嫚顟B(tài)，重新輸入新的名稱，按鍵，文件夾或文件的名稱變?yōu)榭删庉嫚顟B(tài)，重新輸入新的名稱，按EntEnterer鍵確認即可。鍵確認即可。3 3移動和復制文件移動和復制文件從從“文件文件

37、”面板的本地站點文件列表中，選中要移動或復制的文件夾或文面板的本地站點文件列表中，選中要移動或復制的文件夾或文件，如果要進行移動操作，在彈出的快捷菜單中單擊件，如果要進行移動操作，在彈出的快捷菜單中單擊“編輯編輯”選項的選項的下級菜單中的下級菜單中的“剪切剪切”命令；如果要進行復制操作，則執(zhí)行命令；如果要進行復制操作，則執(zhí)行“編輯編輯”選項的選項的“拷貝拷貝”命令，然后執(zhí)行命令，然后執(zhí)行“編輯編輯”選項下的選項下的“粘貼粘貼”命令，將命令，將文件夾或文件移動或復制到相應的文件夾中。文件夾或文件移動或復制到相應的文件夾中。4 4刪除文件夾或文件刪除文件夾或文件要從本地站點文件列表中刪除文件夾或文

38、件，先選中要刪除的文件夾或文要從本地站點文件列表中刪除文件夾或文件，先選中要刪除的文件夾或文件，然后執(zhí)行件，然后執(zhí)行“編輯編輯”選項同上的選項同上的“刪除刪除”命令或按命令或按DeleteDelete鍵，這時鍵，這時系統(tǒng)會彈出一個提示對話框，詢問是否要真正刪除文件夾或文件，單系統(tǒng)會彈出一個提示對話框，詢問是否要真正刪除文件夾或文件，單擊擊“是是”按鈕確認后即可將文件夾或文件從本地站點中刪除。按鈕確認后即可將文件夾或文件從本地站點中刪除。521.3 1.3 網(wǎng)頁文件的基本操作網(wǎng)頁文件的基本操作n創(chuàng)建網(wǎng)頁和打開網(wǎng)頁創(chuàng)建網(wǎng)頁和打開網(wǎng)頁n保存網(wǎng)頁保存網(wǎng)頁n在瀏覽器中預覽網(wǎng)頁在瀏覽器中預覽網(wǎng)頁53創(chuàng)建網(wǎng)

39、頁和打開網(wǎng)頁創(chuàng)建網(wǎng)頁和打開網(wǎng)頁1.1.新建網(wǎng)頁新建網(wǎng)頁單擊單擊“文件文件”菜單下菜單下“新建新建”命令，即可彈出命令，即可彈出“新建文新建文檔檔”對話框。從對話框。從“類別類別”列表框中選擇列表框中選擇“基本頁基本頁”選選項，然后選擇項，然后選擇“基本頁基本頁”列表框中的列表框中的“HTML”HTML”選項。選項。單擊單擊“創(chuàng)建創(chuàng)建”按鈕，即可新建一個空白的按鈕，即可新建一個空白的HTMLHTML網(wǎng)頁文網(wǎng)頁文檔。檔。 542.2.打開網(wǎng)頁打開網(wǎng)頁單擊單擊“文件文件”菜單選擇菜單選擇“打開打開”命令，彈出命令，彈出“打開打開”對對話框。在該對話框內(nèi)選中要打開的話框。在該對話框內(nèi)選中要打開的HTM

40、LHTML文檔，單擊文檔，單擊“打開打開”按鈕，即可將選定的按鈕，即可將選定的HTMLHTML文檔打開。也可以文檔打開。也可以在在“文件文件”面板上，雙擊面板上，雙擊“站點目錄站點目錄”中的網(wǎng)頁文件中的網(wǎng)頁文件也可以打開網(wǎng)頁文件。也可以打開網(wǎng)頁文件。55保存網(wǎng)頁保存網(wǎng)頁在完成創(chuàng)建、編輯的網(wǎng)頁之后，關鍵的一步就是保存網(wǎng)在完成創(chuàng)建、編輯的網(wǎng)頁之后，關鍵的一步就是保存網(wǎng)頁，否則一切都是徒勞的，保存網(wǎng)頁有如下幾種方法：頁，否則一切都是徒勞的，保存網(wǎng)頁有如下幾種方法：n單擊單擊“文件文件”菜單選擇菜單選擇“保存保存”命令，可以原名字原命令，可以原名字原路徑保存當前的文檔。路徑保存當前的文檔。n單擊單擊“

41、文件文件”菜單選擇菜單選擇“另保存另保存”命令，可彈出命令，可彈出“另另存為存為”對話框。利用該對話框可以將當前的文檔以其對話框。利用該對話框可以將當前的文檔以其他名字保存。他名字保存。n單擊單擊“文件文件”菜單選擇菜單選擇“保存全部保存全部”命令，可將當前命令，可將當前正在編輯的所有文檔以原名保存。正在編輯的所有文檔以原名保存。 56在瀏覽器中預覽網(wǎng)頁在瀏覽器中預覽網(wǎng)頁n單擊標準工具欄上的預覽按鈕或按單擊標準工具欄上的預覽按鈕或按“F12”F12”可在瀏覽器可在瀏覽器中預覽所編輯的網(wǎng)頁。中預覽所編輯的網(wǎng)頁。571.4 1.4 設置頁面屬性設置頁面屬性n步驟步驟1 1：打開：打開Dreamweaver8.0Dreamweaver8.0，新建一個網(wǎng)頁，或者，新建一個網(wǎng)頁，或者打開一個現(xiàn)有的網(wǎng)頁，選擇打開一個現(xiàn)有的網(wǎng)頁，選擇“修改修改”菜單下的菜單下的“頁面頁面屬性屬性”命令，或者單擊屬性面板中的命令，或者單擊屬性面板中的“頁面屬性頁面屬性”按按鈕，打開鈕，打開“頁面屬性頁面屬性”對話框。對話框。58n步驟步驟2 2：在：在“頁面屬性頁面屬性”對話框中設置對話框中設置“外觀外觀”參數(shù)，參數(shù)，選擇選擇“頁面屬性頁面屬性”中的中的“外觀外觀”選項同，在右側(cè)可能選項同，在右側(cè)可能設置具體的參數(shù)。設置具體的參數(shù)。59