1、項目一項目一 創建你的第一個網站創建你的第一個網站第 2 頁中小型網站建設與管理中小型網站建設與管理n 項目簡介項目簡介 Dreamweaver CS3提供了強大的網頁制作功能，所見即所得的提供了強大的網頁制作功能，所見即所得的操作界面使那些掌握了文檔編輯能力的人可以輕松完成一張網頁的制操作界面使那些掌握了文檔編輯能力的人可以輕松完成一張網頁的制作。建立站點是制作網頁的第一步，要學會制作網頁，掌握站點建立作。建立站點是制作網頁的第一步，要學會制作網頁，掌握站點建立和編輯的方法尤為重要，所有的網頁都是基于站點建立的。和編輯的方法尤為重要，所有的網頁都是基于站點建立的。 通過鑒賞各類網頁和網站，領

2、略不同網站的布局與風格，然后動通過鑒賞各類網頁和網站，領略不同網站的布局與風格，然后動手建立一個簡單的手建立一個簡單的“個人網站個人網站”的站點，讓學生們了解的站點，讓學生們了解Dreamweaver CS3軟件的操作界面；并且通過具體的實例讓學生掌軟件的操作界面；并且通過具體的實例讓學生掌握站點素材及其制作工具的有關知識，合理規劃網站，掌握站點的建握站點素材及其制作工具的有關知識，合理規劃網站，掌握站點的建立立。第 3 頁中小型網站建設與管理中小型網站建設與管理n 項目目標項目目標 本項目以規劃本項目以規劃“我的個人網站我的個人網站”為例，讓學生了解為例，讓學生了解Dreamweaver C

3、S3的界面、掌握軟件的基本操作方法，了解網頁設的界面、掌握軟件的基本操作方法，了解網頁設計的基本概念，掌握站點的建立和管理，能夠根據要求建立和管理站計的基本概念，掌握站點的建立和管理，能夠根據要求建立和管理站點；掌握簡單網頁制作最基本的步驟點；掌握簡單網頁制作最基本的步驟。第 4 頁中小型網站建設與管理中小型網站建設與管理n 工作任務工作任務n 鑒賞網頁鑒賞網頁n 初識初識Dreamweaver CS3n 建立與管理站點建立與管理站點第 5 頁中小型網站建設與管理中小型網站建設與管理模塊一模塊一 鑒賞網頁鑒賞網頁學習目標學習目標 鑒賞各種不同的網頁，從中感受不同類別的網站的風格與特色鑒賞各種不

4、同的網頁，從中感受不同類別的網站的風格與特色。從而了解網站發展的歷史與現狀，并熟悉了解一些網站的相關基礎。從而了解網站發展的歷史與現狀，并熟悉了解一些網站的相關基礎知識知識。 第 6 頁中小型網站建設與管理中小型網站建設與管理任務一：鑒賞網頁；任務一：鑒賞網頁； 1、網站與網頁、網站與網頁（1）網頁是）網頁是Internet中最基本的信息單位，是構成網站的基本元素，是中最基本的信息單位，是構成網站的基本元素，是把文字、圖形、聲音及動畫等各種多媒體信息相互鏈接起來的一種信把文字、圖形、聲音及動畫等各種多媒體信息相互鏈接起來的一種信息表達方式，是承載各種網站應用的平臺。通常情況下，網頁中有文息表達

5、方式，是承載各種網站應用的平臺。通常情況下，網頁中有文字和圖像等基本信息，有些網頁中還有聲音、視頻和動畫等多媒體內字和圖像等基本信息，有些網頁中還有聲音、視頻和動畫等多媒體內容。網頁一般由網站容。網頁一般由網站LOGO、廣告欄、導航欄和信息欄等部分組成、廣告欄、導航欄和信息欄等部分組成。 在訪問一個網站時，首先映入眼簾的網頁一般稱為網站的首頁。在訪問一個網站時，首先映入眼簾的網頁一般稱為網站的首頁。首頁只是網頁的開場頁，單擊首頁上的文字或圖片，即可打開網站的首頁只是網頁的開場頁，單擊首頁上的文字或圖片，即可打開網站的主頁，而首頁也隨之關閉。主頁，而首頁也隨之關閉。第 7 頁中小型網站建設與管理

6、中小型網站建設與管理n 首頁首頁第 8 頁中小型網站建設與管理中小型網站建設與管理n 主頁主頁第 9 頁中小型網站建設與管理中小型網站建設與管理 （2）網站根據內容形式與功能結構的不同，基本可以分成）網站根據內容形式與功能結構的不同，基本可以分成9大類別：大類別：資訊門戶類網站、企業品牌類網站、交易類網站、社區網站、辦公及資訊門戶類網站、企業品牌類網站、交易類網站、社區網站、辦公及政府機構網站、互動游戲網站、有償資訊類網站、功能性網站和綜合政府機構網站、互動游戲網站、有償資訊類網站、功能性網站和綜合類網站等。類網站等。第 10 頁中小型網站建設與管理中小型網站建設與管理2、網站的風格與布、網站

7、的風格與布局局 網頁的風格是指網站給瀏覽者的整體形象，包括站點的網頁的風格是指網站給瀏覽者的整體形象，包括站點的CI（標（標志、色彩和字體）、版面布局、瀏覽方式、交互性、文字、內容及網志、色彩和字體）、版面布局、瀏覽方式、交互性、文字、內容及網站榮譽等諸多因素站榮譽等諸多因素。 常見的網頁的布局有常見的網頁的布局有“國國”字形布局、字形布局、“匡匡”字形布局、字形布局、“三三”字形布局、字形布局、“川川”字形布局、封面型布局、字形布局、封面型布局、Flash布局、標題文本布局、標題文本型布局、框架型布局和變化型布局等型布局、框架型布局和變化型布局等。第 11 頁中小型網站建設與管理中小型網站建

8、設與管理任務二任務二 學習相關概學習相關概1因特網因特網 因特網（因特網（Internet）又稱為互聯網，是一個把分布于世界各地的）又稱為互聯網，是一個把分布于世界各地的計算機用傳輸介質互相連接起來的網絡。計算機用傳輸介質互相連接起來的網絡。Internet主要提供的服務有主要提供的服務有萬維網（萬維網（WWW）、文件傳輸協議（）、文件傳輸協議（FTP）、電子郵件（）、電子郵件（E-mail）及）及遠程登錄（遠程登錄（Telnet）等）等。2萬維網萬維網 萬維網（萬維網（World Wide Web）簡稱）簡稱WWW或者或者3W，它是無數個網，它是無數個網絡站點和網頁的集合絡站點和網頁的集合。

9、 也是也是Internet提供的最主要的服務，它是由多媒體鏈接而形成的提供的最主要的服務，它是由多媒體鏈接而形成的集合，通常上網看到的就是萬維網的內容集合，通常上網看到的就是萬維網的內容。第 12 頁中小型網站建設與管理中小型網站建設與管理3瀏覽器瀏覽器 瀏覽器是指互聯網上的文本文檔（或其他類型的文件）翻譯成瀏覽器是指互聯網上的文本文檔（或其他類型的文件）翻譯成網頁，并讓用戶與這些文件交互的一種軟件工具，主要用于查看網頁網頁，并讓用戶與這些文件交互的一種軟件工具，主要用于查看網頁的內容。目前最常用的瀏覽器有兩種：美國微軟公司的的內容。目前最常用的瀏覽器有兩種：美國微軟公司的Internet E

10、xplorer，美國網景公司的，美國網景公司的Netscape Navigator。此外，國內的網。此外，國內的網絡公司也開發了一些瀏覽器，比如騰訊公司推出了新一代的網絡瀏覽絡公司也開發了一些瀏覽器，比如騰訊公司推出了新一代的網絡瀏覽器，騰訊瀏覽器正式從器，騰訊瀏覽器正式從QQ里剝離出來，成為一個獨立的工具，騰訊里剝離出來，成為一個獨立的工具，騰訊瀏覽器與瀏覽器與QQ一樣擁有一個親切而且朗朗上口的名字一樣擁有一個親切而且朗朗上口的名字騰訊騰訊TT，等，等等。等。第 13 頁中小型網站建設與管理中小型網站建設與管理4電子郵件電子郵件 電子郵件又稱電子郵件又稱E-mail，是目前，是目前Inter

11、net上使用最多、最受歡迎的上使用最多、最受歡迎的一種服務。電子郵件是利用計算機網絡的電子通信功能傳送信件、單一種服務。電子郵件是利用計算機網絡的電子通信功能傳送信件、單據、資料等電子媒體信息的通信方式，它最大的特點是人們可以在任據、資料等電子媒體信息的通信方式，它最大的特點是人們可以在任何地方、時間收發信件，大大提高了工作效率，為辦公自動化、商業何地方、時間收發信件，大大提高了工作效率，為辦公自動化、商業活動提供了很大的便利?；顒犹峁┝撕艽蟮谋憷?URL URL（Uniform Resource Locator）即統一資源定位器，也就）即統一資源定位器，也就是網絡地址，是在是網絡地址，是在

12、Internet上用來描述信息資源，并將上用來描述信息資源，并將Internet提供提供的服務統一編址的系統。簡單的來說，通常在的服務統一編址的系統。簡單的來說，通常在IE瀏覽器或瀏覽器或Netscape瀏覽器中輸入的網址就是瀏覽器中輸入的網址就是URL的一種。的一種。第 14 頁中小型網站建設與管理中小型網站建設與管理模塊二模塊二 初識初識Dreamweaver CS3學習目標學習目標 了解網頁設計的基本概念，掌握了解網頁設計的基本概念，掌握Dreamweaver CS3工作界面的工作界面的操作和設置操作和設置.第 15 頁中小型網站建設與管理中小型網站建設與管理任務任務一、初識一、初識Dr

13、eamweaver CS31安裝并啟動安裝并啟動 （1）安裝）安裝Dreamweaver CS3后，雙擊桌面圖標或者單擊后，雙擊桌面圖標或者單擊“開始開始程程序序Adobe Dreamweaver CS3”。 （2）進入）進入Dreamweaver CS3后，首先顯示其起始頁，通過起始頁可后，首先顯示其起始頁，通過起始頁可以直接打開最近使用過的文檔或其他文檔，也可以創建新文檔以直接打開最近使用過的文檔或其他文檔，也可以創建新文檔2.工作界面工作界面 （1）當在起始頁中單擊）當在起始頁中單擊“新建新建”列的第一項列的第一項“HTML”后，將會創建后，將會創建一個一個“.html”格式的新文檔，并

14、進入格式的新文檔，并進入Dreamweaver CS3工作界面，工作界面，如圖所示。如圖所示。第 16 頁中小型網站建設與管理中小型網站建設與管理菜單欄菜單欄標題欄標題欄“插入插入”欄欄“文檔文檔”工具欄工具欄文檔標簽文檔標簽面板組面板組屬性屬性面板面板標簽選擇器標簽選擇器狀態欄狀態欄第 17 頁中小型網站建設與管理中小型網站建設與管理 （2）由上圖可以看出，）由上圖可以看出，Dreamweaver CS3的工作界面由標題欄、菜的工作界面由標題欄、菜單欄、單欄、“插入插入”欄、欄、“文檔文檔”工具欄、文檔窗口、狀態欄、工具欄、文檔窗口、狀態欄、“屬性屬性”面板和面板組等組成。面板和面板組等組成

15、。3面板基本操作面板基本操作 （1）Dreamweaver CS3的工作界面并不是一成不變的，可根據實的工作界面并不是一成不變的，可根據實際需要，對其進行各種調整。例如，要關閉所有面板和面板組，可按際需要，對其進行各種調整。例如，要關閉所有面板和面板組，可按【F4】鍵；再次按【】鍵；再次按【F4】鍵，可恢復原來狀態?！挎I，可恢復原來狀態。 （2）如果要打開或關閉某個面板，可單擊）如果要打開或關閉某個面板，可單擊“窗口窗口”菜單下的相應選菜單下的相應選項。例如，可選擇項。例如，可選擇“窗口窗口文件文件”菜單打開或關閉菜單打開或關閉“文件文件”面板。另面板。另外，如果面板組包含了多個面板，則可以在

16、打開面板組后，通過單擊外，如果面板組包含了多個面板，則可以在打開面板組后，通過單擊面板標簽在各面板之間切換。例如，對于面板標簽在各面板之間切換。例如，對于“文件文件”面板組，可以通過面板組，可以通過單擊單擊“文件文件”和和“資源資源”標簽在兩個面板之間切換。標簽在兩個面板之間切換。第 18 頁中小型網站建設與管理中小型網站建設與管理 （3）面板組不僅可以關閉，還可以根據需要將它們任意移動和隱藏。）面板組不僅可以關閉，還可以根據需要將它們任意移動和隱藏。 （4）單擊面板組名稱左側的三角符號）單擊面板組名稱左側的三角符號 ,可將面板組隱藏，并且可將面板組隱藏，并且 符號變符號變為為 符號，此時單擊

17、符號，此時單擊 符號，可以重新顯示隱藏的面板組。符號，可以重新顯示隱藏的面板組。 （5）單擊面板組右上角的）單擊面板組右上角的 符號，在彈出的菜單中選擇符號，在彈出的菜單中選擇“關閉面板組關閉面板組”，可關閉面板組。，可關閉面板組。 （6）單擊面板區域左側）單擊面板區域左側 的符號，可隱藏整個面板區域，并且的符號，可隱藏整個面板區域，并且 符號變為符號變為 符號；如要重新顯示面板區域，可單擊符號；如要重新顯示面板區域，可單擊 符號。符號。第 19 頁中小型網站建設與管理中小型網站建設與管理4.網頁文檔基本操作網頁文檔基本操作（1）要新建網頁文檔，可選擇）要新建網頁文檔，可選擇“文件文件新建新建

18、”菜單，打開菜單，打開“新建文檔新建文檔”對話框。在左側的對話框。在左側的“文檔類型文檔類型”列表中選擇第一項列表中選擇第一項“空白頁空白頁”，在，在“頁面類型頁面類型”列表中選擇列表中選擇“HTML”，在，在“布局布局”列表中選擇列表中選擇“無無”。（2）設置完后單擊）設置完后單擊“創建創建”按鈕，就創建了一個默認為按鈕，就創建了一個默認為“Untitled-1”的新文檔。的新文檔。第 20 頁中小型網站建設與管理中小型網站建設與管理 （3）要保存網頁文檔，可選擇）要保存網頁文檔，可選擇“文件文件保存保存”菜單，或按【菜單，或按【Ctrl+S】組合鍵，彈出組合鍵，彈出“另存為另存為”對話框，

19、在該對話框的對話框，在該對話框的“保存在保存在”下拉列表下拉列表中選擇保存文檔的文件夾，在中選擇保存文檔的文件夾，在“文件名文件名”編輯框中輸入文檔名。設置編輯框中輸入文檔名。設置完后單擊完后單擊“保存保存”按鈕，就將文檔保存在了選擇的文件夾中。按鈕，就將文檔保存在了選擇的文件夾中。 （4）關閉文檔的操作相當簡單，只需要單擊相應文檔右上方的）關閉文檔的操作相當簡單，只需要單擊相應文檔右上方的“關閉關閉”按鈕按鈕 （或按【（或按【Ctrl+W】組合鍵）即可。執行該操作時，如果文檔】組合鍵）即可。執行該操作時，如果文檔已被修改，系統會彈出提示框，詢問是否保存修改。如果文檔未命名已被修改，系統會彈出

20、提示框，詢問是否保存修改。如果文檔未命名，此時系統還會打開，此時系統還會打開“另存為另存為”對話框，提示用戶命名文檔。對話框，提示用戶命名文檔。第 21 頁中小型網站建設與管理中小型網站建設與管理模塊三模塊三 建立與管理站點建立與管理站點學習目標學習目標 通過本模塊的學習掌握站點的建立和管理，并使同學們能夠根通過本模塊的學習掌握站點的建立和管理，并使同學們能夠根據不同的要求建立和管理站點據不同的要求建立和管理站點。第 22 頁中小型網站建設與管理中小型網站建設與管理任務一任務一 建立與管理站點建立與管理站點1、確立站點目錄結構、確立站點目錄結構2、建立站點、建立站點 （1）首先在本地磁盤上創建

21、一個文件夾，并重命名文件夾為你需要）首先在本地磁盤上創建一個文件夾，并重命名文件夾為你需要的名稱（此處為的名稱（此處為“mysite”），將其作為站點根文件夾。），將其作為站點根文件夾。 （2）啟動）啟動Dreamweaver CS3后，選擇后，選擇“站點站點新建站點新建站點”菜單，菜單，打開打開“未命名站點未命名站點1的站點定義為的站點定義為”對話框，單擊對話框，單擊“基本基本”選項卡，選項卡，在上面的編輯框中輸入在上面的編輯框中輸入“mysite”作為站點名稱，然后單擊作為站點名稱，然后單擊“下一步下一步”按鈕。按鈕。 （3）由于我們創建的是靜態網站，因此，在接著彈出的對話框中選）由于我們

22、創建的是靜態網站，因此，在接著彈出的對話框中選擇擇“否，我不想使用服務器技術否，我不想使用服務器技術”單選按鈕，然后點擊單選按鈕，然后點擊“下一步下一步”按按鈕。鈕。第 23 頁中小型網站建設與管理中小型網站建設與管理 （4）在接下來彈出的對話框中選擇）在接下來彈出的對話框中選擇“編輯我的計算機編輯我的計算機”單選按單選按鈕，單擊鈕，單擊“您將把您將把”編輯框后的文件夾圖標，在打開的選擇根文編輯框后的文件夾圖標，在打開的選擇根文件夾對話框中選擇站點文件夾，然后單擊件夾對話框中選擇站點文件夾，然后單擊“選擇選擇”按鈕。按鈕。 （5）回到）回到“mysite的站點定義為的站點定義為”對話框，單擊對話框，單擊“下一步下一步”按鈕，按鈕，由于現在只是在本地編寫和調試網頁，故不需要連接到遠程服務器，由于現在只是在本地編寫和調試網頁，故不需要連接到遠程服務器，在在“您如