1、項目一 創(chuàng)建“夕照臺”房產(chǎn)網(wǎng)站 ,一、學習目標 二、理論指導 三、任務實踐,一、學習目標,了解網(wǎng)頁的構成元素，網(wǎng)頁的本質，以及動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的區(qū)別。 了解IP地址、域名和網(wǎng)址的概念，以及網(wǎng)站管理與網(wǎng)頁制作相關軟件，XHTML語言和網(wǎng)站建設流程。 認識Dreamweaver CS5的界面元素。 掌握規(guī)劃網(wǎng)站結構以及在Dreamweaver中定義和管理站點的方法。 掌握網(wǎng)頁文檔和文件夾的命名規(guī)則，以及在Dreamweaver中新建、打開、保存和預覽網(wǎng)頁的方法，另外還要學會使用“文件”面板管理站點文件和文件夾。,二、理論指導,（一）認識網(wǎng)站和網(wǎng)頁,網(wǎng)頁就是我們上網(wǎng)時在瀏覽器中打開的一個個畫面，網(wǎng)

2、站則是一組相關網(wǎng)頁的集合。一個小型網(wǎng)站可能只包含幾個網(wǎng)頁，而一個大型網(wǎng)站則可能包含成千上萬個網(wǎng)頁。 打開某個網(wǎng)站時顯示的第一個網(wǎng)頁被稱為網(wǎng)站的主頁（或首頁）。,1網(wǎng)頁的構成元素,我們可以將網(wǎng)頁中的元素按功能分為站標、導航條、廣告條、標題欄和按鈕等，如圖1-1所示。,站標,導航條,廣告條,按鈕,標題欄,（1）站標,站標也叫Logo，是網(wǎng)站的標志，其作用是使人看見它就能夠聯(lián)想到企業(yè)。因此，網(wǎng)站Logo通常采用企業(yè)的Logo。 Logo一般采用蘊含企業(yè)文化和特色的圖案，或是與企業(yè)名稱相關的字符或符號及其變形，當然也有很多是圖文組合，如下圖所示。,（2）導航條,導航條是一組鏈接到網(wǎng)站內主要頁面的超鏈接

3、組合，通過單擊這些超鏈接，瀏覽者可以輕松找到網(wǎng)站中的各個頁面。設計導航條時，應遵循以下原則：,對于一般的企業(yè)網(wǎng)站，如果網(wǎng)站內容不多，可根據(jù)網(wǎng)站風格靈活擺放導航條，也可以使用圖片或Flash動畫等顯示導航條，如下圖所示。,對于像搜狐、網(wǎng)易等大型門戶類網(wǎng)站，網(wǎng)站欄目都很多，一般將導航條分為多排放置在Logo的下方或右側。為便于查看，可為各排設置不同的底色，如下圖所示。,（3）廣告條,廣告條又稱Banner，其功能是宣傳網(wǎng)站或為其他商品做廣告。Banner的尺寸可以根據(jù)內容或版面需要來安排。 在制作Banner時，有以下幾點需要注意。,Banner可以是靜態(tài)的，也可以是動態(tài)的。 Banner的體積不

4、宜過大，盡量使用GIF格式圖片與動畫或Flash動畫。 Banner中的文字不要太多。 Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動畫，要避免出現(xiàn)顏色的漸變和光暈效果。,（4）標題欄,此處的標題欄不是指整個網(wǎng)頁的標題欄，而是網(wǎng)頁上各版塊的標題欄，是各版塊內容的概括。它使得網(wǎng)頁內容的分類更清晰、明了，大大地方便了瀏覽者。 標題欄可以是文字加不同顏色的背景，也可以是圖片，這由網(wǎng)站的整體風格決定。,（5）按鈕,按鈕通常是啟動某些裝置或機關的開關。網(wǎng)頁中的按鈕也不例外，單擊它，網(wǎng)頁會實現(xiàn)相應的操作，比如跳轉到其他頁面，或提交數(shù)據(jù)等。,2網(wǎng)頁的本質,在瀏覽器中選擇“文件”“另存為”菜單，

5、將網(wǎng)頁保存到磁盤中，便可看到網(wǎng)頁的組成文件。,3動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁,從制作技術的角度來講，網(wǎng)頁可分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。完全采用HTML技術制作的網(wǎng)頁稱為靜態(tài)網(wǎng)頁；使用HTML、編程語言和數(shù)據(jù)庫共同完成，需要與數(shù)據(jù)庫實時交互的網(wǎng)頁稱為動態(tài)網(wǎng)頁。,（二）網(wǎng)站開發(fā)基礎,1IP地址、域名和網(wǎng)址,（1）IP地址,互聯(lián)網(wǎng)是全世界范圍內的計算機聯(lián)為一體而構成的通信網(wǎng)絡?；ヂ?lián)網(wǎng)上連接了不計其數(shù)的服務器和客戶機，每一個主機在互聯(lián)網(wǎng)上都有一個唯一的地址，我們稱這個地址為IP地址（Internet Protocol Address）。IP地址由4個小于256的數(shù)字組成，數(shù)字之間用點間隔。例如，“61.135.15

6、0.126”就是一個IP地址。,（2）域名,由于IP地址在使用過程中難于記憶和書寫，人們又發(fā)現(xiàn)了一種與IP地址對應的字符來表示地址，這就是域名。每一個網(wǎng)站都有自己的域名，并且域名是獨一無二的。例如，我們只需要在瀏覽器地址欄中輸入搜狐網(wǎng)站的域名“”，然后按回車鍵就可以訪問搜狐網(wǎng)站了。,（3）網(wǎng)址,網(wǎng)址又叫URL，英文全稱是“Uniform Resource Locator”，即統(tǒng)一資源定位符。它是網(wǎng)絡上通用的一種地址格式，用于標識網(wǎng)頁文件在網(wǎng)絡中的位置。 一個完整的網(wǎng)址由通信協(xié)議名稱、域名或IP地址、網(wǎng)頁在服務器中的路徑和文件名4部分組成。,2網(wǎng)站管理與網(wǎng)頁制作相關軟件,Dreamweaver是

7、目前最常用的網(wǎng)站管理和網(wǎng)頁制作軟件，其功能全面、操作靈活、專業(yè)性強。另外，它還可以作為動態(tài)網(wǎng)站的開發(fā)環(huán)境。 在制作網(wǎng)頁時，除Dreamweaver外還需要用到Fireworks、Flash、Photoshop等輔助軟件。,3網(wǎng)頁制作基礎XHTML語言,XHTML是Extensible HyperText Markup Language(可擴展超文本標記語言)的英文縮寫，它的前身是HTML。由于HTML代碼煩瑣，結構松散，所以推出了XHTML。也可以說，XHTML是HTML的一個升級版本。 XHTML語言的核心是標簽（或者稱為標記）。也就是說，我們在瀏覽網(wǎng)頁時看到的文字、圖像、動畫等在XHTML

8、文檔中都是用標簽來描述的。,4網(wǎng)站建設流程,網(wǎng)站建設流程是指從企業(yè)計劃建設網(wǎng)站到網(wǎng)站建設完成的一套規(guī)范化運作過程。,（三）初識Dreamweaver CS5,1啟動Dreamweaver CS5,安裝Dreamweaver CS5后，單擊桌面左下角的“開始”按鈕 ，選擇“所有程序”“Adobe Dreamweaver CS5”，就可以啟動Dreamweaver CS5了。,2Dreamweaver CS5界面元素簡介,Dreamweaver CS5的工作界面由應用程序欄、文檔標簽、文檔工具欄、文檔窗口、標簽選擇器、狀態(tài)欄、屬性檢查器和面板組等組成。,（1）應用程序欄,應用程序欄位于工作區(qū)頂部，

9、左側顯示菜單欄，右側包含工作區(qū)切換器、“CS Live”按鈕和程序窗口控制按鈕。,（2）文檔標簽欄,文檔標簽欄位于應用程序欄下方，左側顯示當前打開的所有網(wǎng)頁文檔的名稱及其關閉按鈕（標簽）；右側顯示當前文檔在本地磁盤中的保存路徑以及向下還原按鈕；下方顯示當前文檔中的包含文檔以及鏈接文檔。當用戶打開多個網(wǎng)頁時，通過單擊文檔標簽可在各網(wǎng)頁之間切換。另外，單擊下方的包含文檔或鏈接文檔，可打開相應文檔。,（3）文檔工具欄,文檔工具欄位于文檔標簽下方，包括各種可對文檔進行操作的按鈕。,（4）狀態(tài)欄,狀態(tài)欄位于文檔窗口底部，它提供了與當前文檔相關的一些信息。,（5）屬性檢查器,使用“屬性檢查器”可以檢查和設

10、置當前選定頁面元素（如文本和插入對象）的最常用屬性。“屬性檢查器”中的內容會根據(jù)選定元素的變化而變化。,（6）面板組,默認狀態(tài)下，面板組位于文檔窗口右側。面板組中包含各種類型的面板，Dreamweaver中的大部分操作都需要利用面板來實現(xiàn)。其中最常用的有“插入”面板、“文件”面板和“CSS樣式”面板，后面將陸續(xù)用到。,（四）在Dreamweaver中定義和管理網(wǎng)站,1定義網(wǎng)站,定義網(wǎng)站的目的是把本地磁盤中的站點文件夾同Dreamweaver建立一定的關聯(lián)，從而方便用戶使用Dreamweaver管理站點和編輯站點中的網(wǎng)頁文檔，以及上傳或下載站點內容等。,2管理網(wǎng)站,定義站點后，如果需要修改站點屬

11、性、復制或刪除站點等，可執(zhí)行下面的操作。,（五）網(wǎng)頁文檔基本操作,1網(wǎng)頁文檔和文件夾命名規(guī)則,靜態(tài)的首頁文件一般命名為“index.html”。 不要使用中文命名網(wǎng)站中的文件和文件夾。 文件名中不要使用大寫英文字母。 運算符符號不能用在文件名的開頭。 比較長的文件名可以使用下劃線“_”來隔開多個單詞或關鍵字。 在大型網(wǎng)站中，分支頁面的文件應存放在單獨的文件夾中。 在動態(tài)網(wǎng)站中，用來存放數(shù)據(jù)庫的文件夾一般命名為“data”或者“database” 。,2新建和保存網(wǎng)頁文檔,在Dreamweaver CS5中可以創(chuàng)建兩種格式的網(wǎng)頁文檔，一種是直接創(chuàng)建空白網(wǎng)頁文檔，另一種是通過Dreamweaver

12、 CS5內置的模板文檔創(chuàng)建具有一定內容和樣式的網(wǎng)頁文檔。,3打開、預覽和關閉網(wǎng)頁文檔,若要對已有的文檔進行編輯，就需要在Dreamweaver中打開該文檔。另外，在Dreamweaver中打開網(wǎng)頁文檔并執(zhí)行相應操作后，如果想查看它在瀏覽器中的效果，可執(zhí)行預覽操作。,4、利用“文件”面板管理站點文件和文件夾,一般在定義站點后，都會利用“文件”面板來創(chuàng)建、重命名或打開站點中的網(wǎng)頁文檔和文件夾。,三、任務實踐,任務一 夕照臺網(wǎng)站的建設流程,本任務中，我們將以夕照臺房產(chǎn)網(wǎng)站為例，學習一般網(wǎng)站的建設流程。,收集網(wǎng)站建設需求及素材。 制作網(wǎng)站策劃書。 網(wǎng)頁美術設計。 美術與程序整合。 測試和發(fā)布網(wǎng)站。 推廣和維護網(wǎng)站。,任務二 調整Dreamweaver CS5工作界面,使用Dreamweaver制作或編輯網(wǎng)頁時，經(jīng)常需要打開、關閉某個面板，或對其工作界面進行各種調整。為方便