項目1班級風采網(wǎng)站制作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

46、客戶機瀏覽者在訪問網(wǎng)頁時，是由瀏覽者本地的計算機向存放網(wǎng)頁的遠程計算機發(fā)出一個請求。遠程計算機在收到請求后，將所需要的瀏覽內(nèi)容（即網(wǎng)頁）發(fā)送給本地計算機。那么本地的計算機被稱為客戶計算機（Client），遠程存放網(wǎng)頁的計算機被稱為服務器（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地址包含兩部分:一部分是網(wǎng)絡號,用以區(qū)分在Internet上互聯(lián)的各個網(wǎng)絡;另一

48、部分是計算機號,用以區(qū)分在同一網(wǎng)絡上的不同計算機。域名：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、 網(wǎng)頁與網(wǎng)站的概念,（4） 統(tǒng)一資源定位器（url）統(tǒng)一資源定位器（Uniform Resource Locator）是全球WWW網(wǎng)服務器資源的標準尋址定位源碼，用于確定資源相應的位置及所需檢索的文件。其優(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) 用于網(wǎng)絡節(jié)點間文件的雙向傳輸,是實現(xiàn)資源共享的重要方式和有效手段之一。FPT 是支持用戶實現(xiàn)把文件從一臺計算機中傳輸?shù)搅硪慌_計算機中,并且能保證傳輸?shù)目煽啃?。用戶在本地計算機上做好的主頁除了用Dreamweaver上傳之外。還可以用FTP上傳到達遠程的主機中。常用的FT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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