1、項目1 班級風采網站制作,本項目內容提要：本項目從清晰明確的任務訓練入手，講授了“班級風采”小型網站的規(guī)劃設計，應用中文Dreamweaver CS5、中文Fireworks CS5建立網站并制作網頁的全過程，并介紹了網站規(guī)劃設計及應用上述軟件進行網頁制作的相關知識。本項目能力目標：1 具備小型網站規(guī)劃設計的基本能力。2 掌握中文Dreamweaver CS5、中文Fireworks CS5最常用的基本操作，初步具備小型網站創(chuàng)

2、建與管理及網頁制作的基本能力。本項目知識目標：1 熟悉網站規(guī)劃設計的基本知識。2 掌握中文Dreamweaver CS5進行網頁設計制作的相關知識。,1.1 班級風采網站制作過程,1.1 班級風采網站制作過程,班級風采主頁效果如圖所示，下面詳述其制作過程,,任務1-1 設計規(guī)劃班級風采網站,網頁制作之前要進行規(guī)劃，內容包括：設置主題欄目，設計網頁結構，確定網站風格等等。設置主題欄目：本班級風采網站的主題欄目包括：班級檔案、組

3、織機構、榮譽殿堂、風采圖片、文體天地、學習園地、支部生活。設計網頁結構：網站主頁規(guī)劃的結構下頁圖所示。網站的主頁可采用簡單明了的板塊結構：采用上中下結構。上邊為標題區(qū)，用于存放網站標題等內容。中間為主頁主體區(qū)，主體區(qū)又分為左右兩部分，左邊窄，用堅式結構放置導航欄。右邊寬，存放班級簡介等內容。下邊為版權區(qū)。用于存放版權聲明信息。設計網站風格：由于是班級網站，可選簡明清新型。設計網頁盡寸：選擇1024×768規(guī)格,實際尺寸為

4、：980×***，(***代表768的倍數(shù))。寬度最好限定在一個幅面內，長度一般是不超過3個版面。,任務1-1 設計規(guī)劃班級風采網站,班級風采站點規(guī)劃布置圖,任務1-2 創(chuàng)建班級風采網站站點,【子任務1-2-1】設置本地站點文件夾本地站點文件夾用以確定存放所有站點文件的存儲位置。設置本地站點文件夾的操作步驟如下：（1）在桌面雙擊“我的電腦”圖標；（2）在“我的電腦”窗口中雙擊打開用于存儲站點的硬盤驅動器（例如為E盤）；

5、（3）使用【文件】→新建→文件夾命令，在硬盤中建立一個新文件夾。（4）在新文件夾上單擊右鍵，選擇“重命名”選項，在英文輸入法狀態(tài)下輸入站點名稱。例如輸入 “CLASS”，然后在空白處單擊確定。（見操作演示）,任務1-2 創(chuàng)建班級風采網站站點,【子任務1-2-2】建立一個名稱為“班級”的站點站點是對網站進行組織、維護和管理的功能集合。通過站點管理，用戶可以根據(jù)自己的需要設計出自己網站結構。操作步驟如下：（1）啟動Dreamwea

6、ver CS5（2）執(zhí)行“站點”菜單中的“新建站點”命令，彈出“站點設置對象”對話框。（3）在菜單中選擇“站點”選項， 在“站點名稱”文本框中輸入：“班級”，在“本地站點文件夾”中輸入E:\CLASS（或單擊瀏覽器按鈕，選擇“E:\CLASS”）作為本地根文件夾?！罢军c設置對象”對話框。（見操作演示）（4）單擊【保存】按鈕，完成“班級”站點創(chuàng)建。,任務1-2 創(chuàng)建班級風采網站站點,【子任務1-2-3】在“班級”站點中建立站點子文件

7、夾在已建好的網站中，一般還需要建立一些子文件夾，用于歸類存入網站中的圖像、網頁、動畫、模板等文件。操作步驟如下 ：（1）在文件面板中選擇“站點-班級（E:\class）”文件夾，單擊鼠標右鍵，在快捷菜單中選擇“新建文件夾”選項。（見操作演示）（2）單擊untitled文件夾的名稱部分，輸入image，將文件夾改名為image，此文件夾用于存放圖像文件；（3）參照步驟（1）和（2），依次建立文件夾“html”(用于存放非首頁的

8、其他網頁)、“music”（用于存放音樂文件），“swf”（存放Flash動畫）。（操作演示）（結果如圖“建立站點子文件夾結果 ”所示）,任務1-2 創(chuàng)建班級風采網站站點,建立站點子文件夾結果,任務1-2 創(chuàng)建班級風采網站站點,【子任務1-2-4】在“班級”站點中建立網頁文件建立網頁文件的方法為：先選中要放置網頁文件的文件夾，單擊鼠標右鍵，在彈出的快捷菜單中選擇“新建文件”命令?；驁?zhí)行“文件”→“新建文件”菜單命令，在彈出的“新建文檔

9、”對話框中選擇“基本頁”或“HTML”，單擊【創(chuàng)建】按鈕。編輯完成網頁內容后，以適當?shù)奈募Q保存到相應站點文件夾下（如保存到E:\class\html下面）。在操作時要注意以下問題：（1）主頁文件必須放在本地站點根目錄下，例如，本例應將首頁文件放在“E:\class”文件夾下。（2）網頁文件名、文件夾名和網站內的其他文件名最好全部使用英文小寫形式，因為Dreameaver不識別中文文件名，而且有些網站服務器要區(qū)分字母大小寫。,任

10、務1-2 創(chuàng)建班級風采網站站點,【子任務1-2-4】在“班級”站點中建立網頁文件操作步驟如下：① 打開站點窗口，在文件面板上單擊“展開”按鈕即可打開“站點”窗口。② 選中“站點-班級（E:\class）”文件夾，單擊鼠標右鍵，在彈出的快捷菜單中選擇“新建文件”命令。③ 單擊新文件名的名稱部分，將untitled.htm改名為index.htm(作為網站的首頁文件)；④ 選中“html”文件夾，單擊鼠標右鍵，在彈出的快捷菜單中選

11、擇“新建文件”命令，建立網頁dangan.htm(班級檔案)；⑤參照步驟，分別建立網頁xuexi.htm（學習園地）、wenti.htm（文體天地）、jigou.htm（組織機構）、zhibu.htm（支部生活）、tupian.htm（風彩圖片）、rongyu.htm（榮譽殿堂）。（見操作演示）。（結果如 “建立網站新文件結果 ”圖所示）,任務1-2 創(chuàng)建班級風采網站站點,建立網站新文件結果,任務1-3 制作并添加網頁標題欄,【子任

12、務1-3-1】制作網頁標題圖像一個網頁通常有標題部分，來訪者可以通過標題了解網站的名稱及網站類型。標題部分可以是文本，也可以是圖像。如果使用圖像標題，我們可以用Fireworks CS5自己制作。操作步驟如下：（1）啟動Fireworks CS5，選擇畫布寬度為980，高度為80，畫布顏色自定義為黑色。單擊【確定】按鈕，進入到Firework主界面。（見操作演示）（2）在畫面中間用“文本”工具輸入“班級風采”，在屬性面板中設置：

13、字體大小為80，顏色為淡蘭色（#00FFFF），字體為隸書。（見操作演示）。（3）在畫布左邊用“文本”工具輸入“計算機多媒體”，在屬性面板中設置：字體大小為22，顏色為白色，字體為黑體。（4）在畫布右邊用“文本”工具輸入“Computer Multimedia” ，在屬性面板中設置：字體大小為22，顏色為白色，字體為黑體。（5）單擊保存按鈕，給出保存位置（如E:\class\image）及文件名（擴展名為.png），以便以后修改。

14、（6）執(zhí)行“文件”菜單中的“圖像預覽”命令，設置文件格式為GIF，單擊“導出”按鈕。（見操作演示）（7）在“導出”對話框中選擇保存在：e:\class\image，文件名為：bjbt，單擊“保存”按鈕。（見操作演示）,標題圖像制作效果圖如下：,任務1-3 制作并添加網頁標題欄,【子任務1-3-2】添加主頁標題圖像“班級風采”操作步驟如下：（1）在Dreamweaver應用程序窗口中執(zhí)行“站點”→“管理站點”菜單命令，在彈出的對話

15、框中選中需要打開的站點名稱。例如：班級。單擊【完成】按鈕，“班級”站點顯示在文件面板中。（2）雙擊打開需要制作的網頁文件。例如，雙擊打開主頁文件index.htm。首頁文件打開，此時是空白頁。（3）執(zhí)行“插入”菜單中的“圖像”命令，或單擊“常用”工具欄中的【圖像】按鈕，彈出“選擇圖像源文件”對話框（見操作演示）。如果“常用”工具欄未打開，可按快捷鍵【Ctrl】+【F2】打開。（4）在指定文件夾中找到標題圖像文件，選擇標題圖像文件后

16、，對話框右側將顯示該圖像的預覽圖，單擊【確定】按鈕，插入結束。,任務1-3 制作并添加網頁標題欄,【子任務1-3-3】添加水平分割線為了將標題區(qū)與正文內容分隔開，通常在標題下面插入一條水平分隔線。操作步驟如下：（1）將光標移到需要插入分隔線的地方（如標題圖像下方）。（2）執(zhí)行“插入”菜單“HTML”下“水平線”命令。（3）標題圖像的下面出現(xiàn)一條水平分隔線，并處于選中狀態(tài)，在屬性面板中設置其屬性，如寬度、高度、對齊方式、陰影等。

17、這里設置寬度為980，陰影。（見操作演示）,任務1-3 制作并添加網頁標題欄,圖4-14 添加網頁標題圖片及水平線后效果圖,任務1-4 設置導航欄,導航欄的作用是與其他網頁鏈接，從而輕松地進入下一個頁面，導航既可以使用文字，也可以使用圖像。這里我們使用文字制作導航，并且使用表格布局導航欄?！咀尤蝿?-4-1】插入導航表格操作步驟如下：（1）在水平分隔線下單擊鼠標，出現(xiàn)光標插入點。（2）執(zhí)行“插入”菜單中“表格”命令，或在插入面板

18、上單擊“常用”工具欄中的【表格】按鈕，彈出表格對話框，設置“行數(shù)”為7，“列數(shù)”為1，“寬度”為25，單位為“百分比”，（見操作演示）（3）單擊【確定】按鈕，表格插入。此時表格處于選中狀態(tài)，拖動控制點（黑點）可以調整表格的大?。ㄒ姴僮餮菔荆?）在屬性面板中設置表格的背景顏色為#CCFFCC。,任務1-4 設置導航欄,【子任務1-4-2】添加導航文本（1）在表格的第一個單元格里單擊鼠標，出現(xiàn)光標插入點，通過鍵盤輸入文字“班級檔案”

19、。（2）選中文字“班級檔案”，在屬性面板中單擊CSS按鈕，出現(xiàn)CSS屬性面板。（見操作演示）（3）單擊字體大小中的下拉按鈕，第一次使用字體設置會出現(xiàn)“新建樣式規(guī)則”對話框，“輸入選擇器名稱”為font1，“選擇器類型”為“復合選擇器（基于選擇內容）”，“選擇定義規(guī)則的位置”為“僅限該文檔”，（見操作演示）（4）單擊“確定”按鈕，在屬性面板中設置其字體為默認、大小為18、對齊方式為居中對齊。（見操作演示）。（5）參照步驟（2）～

20、（4），輸入并設置其他導航欄：“組織機構”、“榮譽殿堂”、“風彩圖片”、“文體天地”、“學習園地”、“支部生活”。 如圖所示。,任務1-4 設置導航欄,設置導航欄效果圖,任務1-5 設置網頁主體內容,為使網頁內容設置更靈活，可以借助“層”來定位文字區(qū)域?！咀尤蝿?-5-1】設置網頁主體文字區(qū)域并添加文字操作步驟如下：（1）在“插入”面板的“布局”工具欄上，單擊【繪制AP Div】按鈕。（2）在頁面需要放文字的地方，按住鼠標左鍵拖

21、動出一個矩形區(qū)域（見操作演示）。（3）此時層處于選中狀態(tài)，通過拖動控制點可以調整層的大小。將鼠標放在層的邊緣線上，鼠標呈“十字”箭頭時，拖動鼠標可以移動層的位置。（4）應用層屬性面板可設置層屬性，如背景顏色為#CCFFCC等（見操作演示） 。,任務1-5 設置網頁主體內容,【子任務1-5-2】添加網頁主體文字（1）在層內單擊鼠標，出現(xiàn)插入點后，即可輸入文字內容“我們的班級，計算機多媒體××班，40顆年輕的心。我

22、們來自五湖四海，操著不同的口音，懷著青春的夢想！共同撐起同一片藍天，一起遨游知識的海洋。讓我們揚帆出海，勝利起航。我們是快樂的一家人，我們是自信的一家人?。。??！保?）編輯文字，選中文本，在CSS屬性面板的目標規(guī)則中選擇新建規(guī)則，在新建CSS樣式規(guī)則對話框中，選擇器名稱設為line1，單擊確定后出現(xiàn)“l(fā)ine1的CSS規(guī)則定義”對話框，設置字體為宋體、字號為24、行距為200%。（見操作演示）。（3）單擊“確定”按鈕后，文本內容將按

23、line1定義呈現(xiàn)。（見設置網頁主體內容之后效果圖）。,任務1-5 設置網頁主體內容,設置網頁主體內容之后的效果,任務1-6 制作版權區(qū),本網站雖然不大，但也應體現(xiàn)完整性，所以也應設置版權區(qū)?！咀尤蝿?-6-1】制作版權區(qū)操作步驟如下：（1）將光標置于末行起始點，執(zhí)行“插入”菜單“HTML”下“水平線”命令。出現(xiàn)一條水平分隔線，并處于選中狀態(tài)，在屬性面板中設置其屬性，如寬度、高度、對齊方式、陰影等。這里設置寬度為980，陰影。（操

24、作演示）（2）在下一行輸入“Copyright@2012-2016 班級風采工作”（3）選中輸入的版權內容文本，設置對齊方式為居中對齊（首次使用對齊方式應用新建CSS規(guī)則，如選擇器名稱為center1。操作步驟與前述新建CSS規(guī)則類似），字號為16。設置效果如圖“版權區(qū)的設置”所示。（操作演示）,任務1-6 制作版權區(qū),版權區(qū)的設置,任務1-7 設置頁面屬性,網頁頁面屬性主要包括頁面標題、網頁背景圖像與顏色、文本與超級鏈接顏色、頁

25、邊距等。網頁標題可以標識和命名文檔；網頁背景圖像與顏色可以設置文檔的外觀；文本顏色可以幫助瀏覽者區(qū)分普通文本和具有超級鏈接的文本，并且可以識別已經訪問過和尚未訪問過的超級鏈接。,任務1-7 設置頁面屬性,【子任務1-7-1】添加網頁文檔標題“班級風采”網頁標題非常重要，它可以幫助瀏覽者在瀏覽網頁時了解正在訪問的內容，以及在歷史記錄和書簽列表中標識頁面。如果頁面沒有標題，則網頁將作為“無標題文檔”在文檔窗口、瀏覽器窗口、歷史記錄和書

26、簽列表中出現(xiàn)（見操作演示）在Dreamweaver中有多種方法為網頁添加文檔標題。操作步驟如下：方法1：直接在Dreamweaver文檔工具欄中的“標題”框中輸入新標題。例如，輸入“班級風采”。然后按【Enter】鍵確定。如果工具欄沒有顯示，可通過“查看”菜單打開工具欄。方法2：單擊文檔工具欄上的【代碼】按鈕，然后在和標簽之間輸入新標題，（見操作演示）。方法3：執(zhí)行“修改”→“頁面屬性”菜單命令，或在網頁空白處單擊鼠標右鍵，選

27、擇“頁面屬性”選項，然后在“頁面屬性”對話框的“分類”中選中“標題/編碼”，在“標題”框中輸入新標題，單擊【確定】按鈕。（見操作演示）。,任務1-7 設置頁面屬性,【子任務1-7-2】設置網頁背景圖像和顏色使用“頁面屬性”對話框可以設置網頁的背景圖像或背景顏色。如果同時設置了背景圖像和背景顏色，則背景顏色不能顯現(xiàn)。如果背景圖像有透明像素，則背景顏色才能顯示。操作步驟如下：（1）打開“頁面屬性”對話框，在“分類”中選中“外觀（CS

28、S）”選項，單擊“背景圖像”文本框右側的【瀏覽】按鈕，彈出“選擇圖像源文件”對話框，在“選擇圖像源文件”對話框中選擇一個圖像文件（例如image/bj1.gif），單擊【確定】按鈕；或者在“背景圖像”文本框中直接輸入圖像文件名與路徑，（見操作演示）。（2）單擊“頁面屬性”對話框中的【應用】按鈕，背景圖像將應用到網頁中。（3）在“頁面屬性”對話框中單擊“背景顏色”右側的按鈕，鼠標變?yōu)榈喂苄螤?，并彈出一個顏色面板，可以使用取色滴管在顏色

29、面板中選取一種顏色。也可以直接輸入顏色值，如#CCC。（見操作演示）,任務1-7 設置頁面屬性,【子任務1-7-2】設置網頁背景圖像和顏色注意：同時設置背景圖像和背景顏色的原因是當網絡速度較慢時，背景圖像可能顯示遲緩，背景顏色將首先出現(xiàn)，讓瀏覽者明白這是有圖片的頁面，需要稍加等候。背景圖像的文件名不能使用中文名稱。如果背景圖像的尺寸小于文檔窗口的大小，則Dreamweaver將重復排列背景圖像直至填滿文檔窗口。系統(tǒng)默認的網頁

30、背景顏色是白色。,任務1-7 設置頁面屬性,設置背景色與背景圖頁面屬性,任務1-7 設置頁面屬性,【子任務1-7-3】設置網頁文本顏色及鏈接顏色設置了背景圖像和顏色之后，還需要設置網頁中文本的字體、大小與顏色。在“頁面屬性”對話框中既可以設置普通文本的默認顏色與字體，也可以設置超級鏈接、已訪問鏈接和活動鏈接的默認顏色與字體。操作步驟如下：（1）打開“頁面屬性”對話框，在“分類”中選中“外觀（HTML）”選項。。（2）單擊“

31、文本”右側的按鈕，彈出顏色面板。使用取色滴管選取文本顏色（例如黑色#000000）（見操作演示）。（3）單擊“鏈接”、“已訪問鏈接”、“活動鏈接”右側的按鈕，彈出顏色面板選項，分別設置鏈接顏色（例如黑色#000000）、已訪問鏈接（例如紅色#FF0000）、活動鏈接的顏色（例如蘭色#0000FF）。,任務1-7 設置頁面屬性,【子任務1-7-4】設置網頁頁面邊距通過設置頁面邊距，可以使網頁周圍留出一些距離，也可以設置不留距離。操

32、作步驟如下：（1）打開“頁面屬性”對話框，在“分類”中選中“外觀（HTML）”選項。（2）直接在邊界框中輸入邊距數(shù)值，（見操作演示）。 左邊距：0（文檔中左側邊緣的空白數(shù)值）。上邊距：0（文檔中上側邊緣的空白數(shù)值）。右邊距：（文檔中右側邊緣的空白數(shù)值）。下邊距：（文檔中下側邊緣的空白數(shù)值）。,任務1-8  制作子網頁,這里以組織機構子網頁制作為例，簡述其制作過程?！咀尤蝿?-8-1】制作“組織機構”子網頁操作步

33、驟如下：（1）在文件面板中展開HTML文件夾，雙擊jigou.html，組織機構子網頁jigou.html出現(xiàn)在文檔窗口中。（2）參照任務5的操作方法，輸入文本“計算機多媒體121班組織機構”，設置字體為黑體、字號為36、居中對齊。（3）參照任務5的操作方法，創(chuàng)建2個繪制層，用于輸入班委會和團支部成員名單。設置字體為黑體、字號為16、居中對齊，層背景色為#999900等。（4）參照任務7，設置網頁文檔標題為：“組織機構”，背景圖

34、像為image\bg3.jpg（5）單擊“在瀏覽器中預覽”按鈕，效果不滿意可進行修改，效果滿意后，執(zhí)行“文件”菜單中的“保存”命令將文件存盤。“組織機構”子網頁核心部分效果如圖所示?！咀尤蝿?-8-2】其它子網頁制作其它子網頁參照子任務1-8-1進行制作，這里不再詳述。,任務1-8  制作子網頁,組織機構子網頁核心部分效果圖,任務1-9 建立網頁之間的鏈接,【子任務1-9-1】建立文字導航的超級鏈接超級鏈接可以是一段文

35、本、一幅圖像或者其他的網頁元素。這里以文字導航為例來建立鏈接。操作步驟如下：（1）首先選中設置超級鏈的文字，如“組織機構”。（2）單擊屬性面板中的“瀏覽文件”圖標，彈出“選擇文件”對話框（如圖示），雙擊打開“html”文件夾，。單擊選中與“組織機構”相鏈接的網頁文件jigou.html，單擊【確定】按鈕后，在屬性面板的鏈接框內顯示出鏈接的網頁文件及路徑。也可以在“鏈接”框中直接輸入需要鏈接的網址或文件路徑。（見操作演示）（3）建

36、立超級鏈接的文字顏色默認呈藍色，并且出現(xiàn)一條下劃線。（4）參照步驟（1）～（3），設置其他導航欄的文字鏈接。,任務1-9 建立網頁之間的鏈接,“選擇文件”對話框,任務1-10 瀏覽網頁,一個網頁制作完成后，可以在瀏覽器中預覽，并根據(jù)預覽效果再對網頁進行調整?！咀尤蝿?-10-1】在瀏覽器中預覽“班級風采”主頁操作步驟如下：（1）執(zhí)行“文件”→“在瀏覽器中預覽”→“預覽在IExplore”菜單命令，或按快捷鍵【F12】啟動IE

37、瀏覽器，并將當前編輯的網頁顯示在窗口中。也可單擊文檔工具欄上的【在瀏覽器中預覽】按鈕，再執(zhí)行“預覽在IExplore”命令。（2）將鼠標指向鏈接的文字或圖像時，鼠標形狀變?yōu)槭中?，狀態(tài)欄將顯示被鏈接文件的名稱，單擊即可切換到鏈接的頁面。,任務1-11 保存網頁,隨時保存文件是編輯任何文檔時應該有的良好習慣。在制作網頁的過程中，隨時有可能發(fā)生斷電或機器故障，而Dreamweaver編輯器沒有自動保存的功能。因此，要經常地保存正在編輯的網頁

38、，以避免由于意外而導致辛勤勞動付之東流?！咀尤蝿?-11-1】保存網頁操作步驟如下：（1）執(zhí)行“文件”→“保存”菜單命令，或單擊標準工具欄上的【保存】按鈕，或按快捷鍵【Ctrl】+【S】（2）如果網頁文件已經建好或以前保存過，則文件繼續(xù)保存；如果文件從未保存過，則彈出“另存為”對話框，（3）在“保存在”列表中選擇一個文件路徑（注意：網頁文件應保存在站點文件夾內），在“文件名”文本框中輸入文件名，“保存類型”選擇html文件，最

39、后單擊【保存】按鈕。,任務1-11 保存網頁,“另存為”對話框,1.2 班級風采網站制作相關知識,知識點1-1 網頁與網站的概念,1. 網頁的概念Web，直譯過來就叫“網”，它的含義是通過超級鏈接將各種文檔連接起來，形成一個大規(guī)模的信息集合。網頁(即Web頁)是能夠被瀏覽器軟件識別的文本文件，擴展名一般為.htm或.html。是使用網頁制作工作編輯生成或使用HTML語言編寫的超文本，網頁里可以包含文字、表格、圖像、聲音和視頻等網

40、頁元素。每個網頁都是磁盤上的一個文件，可以單獨瀏覽。網頁是組成網站的特殊成分，圖像、聲音、和視頻等文件均需要通過網頁才能讓瀏覽者看到。,知識點1-1 網頁與網站的概念,2．網站的概念與分類（1） 網站的的概念網站，也稱作站點，英文的名稱是WebSite。從邏輯上講網站就是一個建構在網絡上、具有獨立名稱的邏輯上的獨立體。再簡單來講，就是一組具有特殊連接方式的頁面群，表現(xiàn)出來就是我們常說的一個網站，比如網易、搜狐、新浪、百度等知名網

41、站。我們個人做的網站雖然規(guī)模上不能和大站相比，但它在結構上也是完全獨立的。從物理意義上講，所有的網站都架構在連接到因特網的服務器上，其具體網頁文件都存放在一個網站文件夾中。（2） 網站的分類網站的分類方式有多種，這里我們僅就網站的內容與網站的交互性兩方面來分類。① 按內容分類搜索引擎式網站：以搜索引擎為主要功能。如百度、一搜、Google等。綜合性門戶網站：以新聞信息、娛樂資訊等為主要功能。如搜狐、新浪、網易、雅虎等。電子

42、商務網站：主要用于網上交易。如：阿里巴巴、易趣等。即時通訊網站：用于實時性網上通訊交流。如騰迅QQ、雅虎等。小型專題或個人網站：多以宣傳創(chuàng)建者自身，提供信息，或就某一專題提供最新資訊、歷史資料及相關論壇等內容為主要形式。小型企事業(yè)網站或個人網站大多采用這種形式。② 按網站交互性來類單向傳遞：這類網站重點在宣傳自身、介紹產品、發(fā)布新聞等。與傳統(tǒng)媒體的傳播方式相類似，主要是提供資料供用戶瀏覽，其它交流功能則較少。雙向交流：更注重網

43、絡與用戶間信息的互動，網站可按用戶的需求提供各種形式的檢索，并且用戶在網上獲取信息的同時，網站也可接收到來自用戶的信息，實現(xiàn)信息共享，用戶還可加入各種網上互動活動，如參加論壇討論，進行在線游戲等。,知識點1-1 網頁與網站的概念,3. 網頁是如何被瀏覽的網頁瀏覽是通過瀏覽器來實現(xiàn)的，瀏覽器是專門用于瀏覽網頁的軟件，常用的瀏覽器軟件有Microsoft的IE和Netscape的Navigator等。HTML文件中還定義了網頁中的各種

44、對象（如：文字，圖片，聲音，圖像，動畫）的位置，外形和色彩，各種圖像，聲音，動畫等文件則是網頁的素材。瀏覽網頁屬于Internet所提供的WWW服務。網頁瀏覽者在瀏覽網頁時，實際上是將HTML文件及相關的文本、圖像、聲音等文件下載到自已本地計算機中，然后由瀏覽器程序對HTML文件進行解釋后顯示網頁內容。,知識點1-1 網頁與網站的概念,4. 網頁制作常用術語（1） HTML文件用超文本標記語言編寫的超文本文件稱為HTML（Hyp

45、erText Mark-up Language）文件，它能不受各種操作系統(tǒng)限制，獨立地運行于各種操作系統(tǒng)平臺之上。HTML文件作用：HTML語言主要用于靜態(tài)網頁設計，自1990年起HTML語言就一直被用作World Wide Web（WWW）上的信息表示語言，用于描述網頁的格式，設計它與WWW上其它主頁的鏈接信息。HTML文件是網頁的源文件，是一個放置了標記的ASCII文本文件，通常以.htm或.html為擴展名。（2） 服務器和

46、客戶機瀏覽者在訪問網頁時，是由瀏覽者本地的計算機向存放網頁的遠程計算機發(fā)出一個請求。遠程計算機在收到請求后，將所需要的瀏覽內容（即網頁）發(fā)送給本地計算機。那么本地的計算機被稱為客戶計算機（Client），遠程存放網頁的計算機被稱為服務器（Server），根據(jù)服務器上運行的程序類型及服務器與客戶所使用的通信協(xié)議作用的不同，服務器可分為WWW服務器，F(xiàn)TP服務器等。（3） IP地址和域名IP地址：為了使連接在Internet上的計算機

47、能夠互相識別并進行通信，每臺連入Internet的計算機必須有個“標識號”，這個標識號便是計算機在Internet中的地址。這個地址是由IP協(xié)議進行處理的，故稱為計算機的IP地址。IP地址是一個32位的二進制數(shù)，IP地址的寫法是按8位為一組分成4組，組與組之間用小數(shù)點分隔，每組數(shù)值用十進制數(shù)表示。如:某臺計算機的IP地址為202.121.160.78。IP地址包含兩部分:一部分是網絡號,用以區(qū)分在Internet上互聯(lián)的各個網絡;另一

48、部分是計算機號,用以區(qū)分在同一網絡上的不同計算機。域名：Internet規(guī)定了一套命令機制，稱為域名系統(tǒng)DNS（Domain Name System）。按域名系統(tǒng)定義的計算機名字稱為域名。如：www.sjzu.edu.cn www.163.com當用戶用域名來訪問遠程的計算機時,必須由Internet的DNS的名字服務器(Name Server)將域名翻譯成對應的32位IP地址,然后才能完成對遠程計算機的訪問。,知識點1-1

49、 網頁與網站的概念,（4） 統(tǒng)一資源定位器（url）統(tǒng)一資源定位器（Uniform Resource Locator）是全球WWW網服務器資源的標準尋址定位源碼，用于確定資源相應的位置及所需檢索的文件。其優(yōu)點是用字符串來指向所需的信息，從而進行資料的檢索。URL 由3部分組成:Internet協(xié)議 域名 主機路徑及文件名例如：http://www.online.ln.cn/index.htm協(xié)議有：http://超文本傳輸

50、協(xié)議ftp: 文本傳輸協(xié)議telnet:遠程登陸協(xié)議（5） 文件傳輸協(xié)議(FTP)文件傳輸協(xié)議(FTP)(File Transfer Protocol) 用于網絡節(jié)點間文件的雙向傳輸,是實現(xiàn)資源共享的重要方式和有效手段之一。FPT 是支持用戶實現(xiàn)把文件從一臺計算機中傳輸?shù)搅硪慌_計算機中,并且能保證傳輸?shù)目煽啃?。用戶在本地計算機上做好的主頁除了用Dreamweaver上傳之外。還可以用FTP上傳到達遠程的主機中。常用的FT

51、P工具有CuteFTP和LeapFTP等。,知識點1-1 網頁與網站的概念,（6）虛擬主機虛擬主機是使用特殊的軟、硬件技術把一臺服務器主機分成幾十個“虛擬”的服務器主機，每臺虛擬主機都具有獨立的域名和IP地址（或共亨的IP地址），具有完整的Internet服務器功能。虛擬主機之間完全獨立，在外界看來，每臺虛擬主機和一臺獨立的服務器主機完全一樣。多臺虛擬主機共亨真實主機的資源，這樣就可以把網絡的開銷費用均攤到每臺虛擬主機上?？衫?/p>

52、虛擬主機技術建立個人主頁，在大型網站上（提供存放主頁的免費空間，提供免費域名）申請主頁空間和域名（免費或收費），獲得成功后，把你制作的網頁存放在虛擬主機上，這樣你就好象在Internet上擁有了自己的服務器和網站。,知識點1-1 網頁與網站的概念,（7）網站的發(fā)布網站制作好后還需要發(fā)布才能被瀏覽者瀏覽。網站的性質不同，發(fā)布方式也不同。① 企業(yè)級商業(yè)網站的發(fā)布如果企業(yè)有足夠的資金和技術支持，可以考慮創(chuàng)建自己的網絡中心。硬件方面需要

53、有性能穩(wěn)定的服務器、路由器、交換機，并要向當?shù)氐碾娦挪块T申請網絡專線。同時需要有一定數(shù)量的專人對網站進行維護和管理。② 中小企業(yè)級或小型組織社團的網站發(fā)布如果沒有條件創(chuàng)建獨立的網站硬件環(huán)境，或者網站規(guī)模并不大，不需要創(chuàng)建獨立的網站硬件環(huán)境，可以選擇以下幾種小型網站的解決方案。租賃虛擬主機：如果網站的內容不是很多，也不需要大量的服務器空間支持數(shù)據(jù)庫，可以采用這種發(fā)布方式，也就是租用ISP主機服務器的一定空間來發(fā)布網站，一年需要支付

54、少量費用，就可以建立一個功能比較強大的網站。目前，這是大多數(shù)中小企業(yè)和社會團體、較具規(guī)模的各種組織網站多采用的模式。服務器托管：如果在網站里需要大量數(shù)據(jù)庫支持，可以采用這種方式。將網絡服務器主機存放在某個ISP的網絡中心里，借用他們的通信系統(tǒng)接入因接網。ISP的人員還可代為維護，這樣既可以節(jié)省相當?shù)木W絡管理人員和許多通信設備，又能保證網站的性能要求。DDN專線接入：這種方式有些類似于服務器托管，就是也有自己的服務器，但不是存入放

55、在ISP網管中心，而是存放在自己的機房中，利用DDN或其他專線接入方式與ISP的通訊系統(tǒng)相連，由ISP連入因特網，這種方式的費用也很高，因為專線多是每月要收比較貴的月租費，而且還有一個容量問題，如果專線容量較小，網站所能被訪問的人數(shù)就會較少。③免費主頁空間如果只是想建立一個小型的、功能簡單的網站，當然也可采用以上形式，但這需要有相應有費用支持，投資與效益的比例關系需要權衡。如果目前還不想投資太多，那么免費主頁空間將是較好的選擇。但現(xiàn)

56、在較好的免費主頁空間不多，且一般不支持ASP、JSP、CGI等高級功能。,知識點1-1 網頁與網站的概念,（8）超文本、超媒體、超鏈接超文本文件（Hyper　Text）就是指在文本中包含了與其他文本的鏈接的文件。超級鏈接文本下方帶有下劃線。超媒體（Hypermedia）進一步擴展了超文本所鏈接的信息類型。超媒體文件就是一種文字、影像、圖片、動畫、聲音綜合在一起的文件。超鏈接（Hyperlink）是WWW上使用最多的一種技術，是

57、網頁的靈魂，它的作用是建立網頁之間的聯(lián)系。通過超級鏈接，瀏覽者能夠方便自由地在網頁、網站乃至整個因特網上遨游。在網頁中，當鼠標移到超鏈接處，會呈現(xiàn)手的形狀，表示單擊該處，可以鏈接到該提示所指的頁面。（9）主頁網站向用戶提供的最初起始頁面叫主頁（Homepage），也稱為首頁。主頁是進入網站的門戶，一般是整個網站的第一頁，是網站中所有網頁文件的起點和交點。主頁中通常包括通向其他相關頁面的超級鏈接，還應包括站點的基本信息和主要內容，使瀏

58、覽者一目了然地了解站點的基本主題，了解站點的信息是否對自己有用。,知識點1-2 網站設計與制作流程,確定主題搜集材料規(guī)劃網站制作網頁測試評估正式上傳推銷網站維護更新網站規(guī)劃----網站制作-----后期維護網站設計是一個系統(tǒng)工程，具有特定的工作流程，遵循這個流程，才能設計出令人滿意的網站。網站設計制作主要分為網站規(guī)劃、網站制作、后期維護三個階段。,知識點1-2 網站設計與制作流程,1. 網站規(guī)劃制作網頁如同潑墨作畫，

59、首先要進行構思，然后再加以實現(xiàn)。這種構思就是網站規(guī)劃。網站規(guī)劃的總體原則有兩個：一是為讀者提供有用信息，二是要美觀。（1） 確定網站的主題與名稱網站的主題是指建立的網站所要包含的主要內容。例如，教育、旅游、體育、新聞、醫(yī)療、時尚、娛樂、搜索等。其中每一大類又可細分為若干小類。一般來說，確定網站主題應遵循以下原則： ① 主題鮮明；② 明確設立網站的目的；③ 體現(xiàn)自己的個性。網站的名稱起著很重要的作用，它在很大程度上決定了整個網站的

60、定位。一個好的名稱必須簡潔、有概括性、有特色、容易記，還要符合自己主頁的主題和風格。（2） 搜集材料確定網站主題后，要圍繞主題搜集材料，作為自己制作網頁的素材。,知識點1-2 網站設計與制作流程,（3） 規(guī)劃網站規(guī)劃網站就象設計師設計大樓一樣，只有圖紙設計好了，才能建成一座漂亮的樓房。規(guī)劃網站時，首先應把網站的內容列舉出來，根據(jù)內容列出一個結構化的藍圖，根據(jù)實際情況設計各個頁面之間的鏈接。規(guī)劃網站的內容應包括：欄目的設置、目錄結構

61、、網站的風格（即顏色、搭配、網站標志Logo、版面布局、圖像的運用）等。① 主題欄的設置在設計網站的主題欄與版塊時應注意以下幾個問題：突出主題，把主題欄放在最明顯的地方，讓瀏覽者更快、更明確地知道網站所表現(xiàn)的內容。設計一個最近更新欄目，讓瀏覽者一目了然地知道更新內容。欄目不要設置太多，一般不超過10個。② 目錄結構設計目錄結構設計一般應注意以下問題：按欄目內容建立子目錄。每個欄目下分別為圖像文件創(chuàng)建一個子目錄image

62、（圖像較少時可不創(chuàng)建）目錄的層次不要太深，主要欄目最好能直接從首頁到達。盡量使用意義明確的非中文目錄。③ 顏色搭配合理的應用色彩是非常關鍵的，不同的色彩搭配產生不同的效果，并能影響瀏覽者的情緒。網頁選用的背景應和頁面的色調相協(xié)調，色彩搭配要遵循和諧、均衡、重點突出的原則。,知識點1-2 網站設計與制作流程,（3） 規(guī)劃網站④ 網站標志LogoLogo最重要的作用就是表達網站的理念，便于人們識別，廣泛地用于站點鏈接和宣傳。如同

63、商標一樣，Logo是站點特色和內涵的集中體現(xiàn)。如果是企業(yè)網站，最好是在企業(yè)商標的基礎上設計，保持企業(yè)形象的整體統(tǒng)一。設計Logo的原則是：以簡潔、符號化的視覺藝術把網站的形象和理念展示出來。⑤ 版面布局網頁頁面的整體布局是不可忽視的。要合理地運用空間，讓網頁疏密有致、井井有條。版面布局一般應遵循的原則是：突出重點、平衡和諧，將網站標志（Logo）、主菜單等最重要的模塊放在突出的位置，然后再排放次要模塊（例如搜索、計數(shù)器、版權信息

64、、E-mail地址等）。此外，其他頁面的設計應和首頁保持相同的風格，并有返回首頁的鏈接。⑥ 圖像的運用網頁上應適當?shù)靥砑右恍﹫D像，使用圖像一般應注意以下幾個問題：圖像是為主頁的內容服務的，不能讓圖像喧賓奪主。圖像要兼顧大小和美觀。圖片不僅要好看，還應在保證圖片質量的情況下盡量縮小圖片的大?。醋止?jié)數(shù)）。圖像過大會影響網頁的傳輸速度。合理地采用JPEG和GIF圖像格式。顏色較少的（256色以內）圖像，可處理為GIF格式，色彩比

65、較豐富的圖像，最好處理為JPEG格式。,知識點1-2 網站設計與制作流程,2 網站制作（1） 制作網站制作網站主要包括以下步驟：① 建立本地站點。建立站點根文件夾，用于存放首頁、相關網頁和網站中用到的其他文件。② 在站點根文件夾下創(chuàng)建子文件夾。為了使文件安排比較清晰，將頁面文件和圖像文件分開存放。③ 向站點添加所需要的空網頁。④ 設計網頁盡寸。頁面大小一般可選擇800×600或1024×768規(guī)格。⑤

66、 設計網頁屬性，包括頁面標題、背景圖像、背景顏色、鏈接顏色、文字顏色等。⑥ 向網頁中插入文本、圖像、動畫等對象。⑦ 建立所需要的超級鏈接。⑧ 預覽和保存網頁。（2）上傳與測試測試評估與正式上傳是不可分割的兩部分。制作完畢的網頁，必須進行測試。測試評估主要包括上傳前的兼容性測試、鏈接測試和上傳后的實地測試。完成上傳前所需要的測試后，利用FTP工具將網頁發(fā)布到所申請的主頁服務器上。網站上傳后，繼續(xù)通過瀏覽器進行實地測試，發(fā)現(xiàn)問題

67、，及時修改，然后再上傳測試。,知識點1-2 網站設計與制作流程,3后期維護（1） 推銷網站網頁上傳后，需要不斷地進行宣傳，以便讓更多的朋友認識它，從而提高網站的訪問率與知名度。推廣網站的方法很多，例如，利用E-mail、新聞組、與別的網站交換鏈接（友情鏈接）、到搜索引擎上注冊、加入交換廣告等。（2） 維護更新網站必須定期維護、定期更新，只有不斷地補充新內容，才能吸引瀏覽者。同時，隨著軟硬件的進步，網頁的設計也應由文字向多媒體、由

68、平面圖像向立體動畫或影片、由單向傳播向交互式發(fā)展。,知識點1-3 初步認識Dreamweaver CS5,1. 中文Dreamweaver CS5工作環(huán)境中文Dreamweaver CS5提供可視化的網頁開發(fā)環(huán)境,具有所見即所得的功能。它的工作窗口簡潔明了，功能面板及工具欄中幾乎集中了所有的重要功能，屬性面板放在窗口底部外，其他面板放在窗口的右邊，可隨時打開與關閉，這樣就克服了以往版本浮動面板位置較亂，有時會影響網頁編輯的不足。中文