項(xiàng)目1班級(jí)風(fēng)采網(wǎng)站制作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31、文本”右側(cè)的按鈕，彈出顏色面板。使用取色滴管選取文本顏色（例如黑色#000000）（見(jiàn)操作演示）。（3）單擊“鏈接”、“已訪(fǎng)問(wèn)鏈接”、“活動(dòng)鏈接”右側(cè)的按鈕，彈出顏色面板選項(xiàng)，分別設(shè)置鏈接顏色（例如黑色#000000）、已訪(fǎng)問(wèn)鏈接（例如紅色#FF0000）、活動(dòng)鏈接的顏色（例如蘭色#0000FF）。,任務(wù)1-7 設(shè)置頁(yè)面屬性,【子任務(wù)1-7-4】設(shè)置網(wǎng)頁(yè)頁(yè)面邊距通過(guò)設(shè)置頁(yè)面邊距，可以使網(wǎng)頁(yè)周?chē)舫鲆恍┚嚯x，也可以設(shè)置不留距離。操

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

48、部分是計(jì)算機(jī)號(hào),用以區(qū)分在同一網(wǎng)絡(luò)上的不同計(jì)算機(jī)。域名：Internet規(guī)定了一套命令機(jī)制，稱(chēng)為域名系統(tǒng)DNS（Domain Name System）。按域名系統(tǒng)定義的計(jì)算機(jī)名字稱(chēng)為域名。如：www.sjzu.edu.cn www.163.com當(dāng)用戶(hù)用域名來(lái)訪(fǎng)問(wèn)遠(yuǎn)程的計(jì)算機(jī)時(shí),必須由Internet的DNS的名字服務(wù)器(Name Server)將域名翻譯成對(duì)應(yīng)的32位IP地址,然后才能完成對(duì)遠(yuǎn)程計(jì)算機(jī)的訪(fǎng)問(wèn)。,知識(shí)點(diǎn)1-1

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

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

51、P工具有CuteFTP和LeapFTP等。,知識(shí)點(diǎn)1-1 網(wǎng)頁(yè)與網(wǎng)站的概念,（6）虛擬主機(jī)虛擬主機(jī)是使用特殊的軟、硬件技術(shù)把一臺(tái)服務(wù)器主機(jī)分成幾十個(gè)“虛擬”的服務(wù)器主機(jī)，每臺(tái)虛擬主機(jī)都具有獨(dú)立的域名和IP地址（或共亨的IP地址），具有完整的Internet服務(wù)器功能。虛擬主機(jī)之間完全獨(dú)立，在外界看來(lái)，每臺(tái)虛擬主機(jī)和一臺(tái)獨(dú)立的服務(wù)器主機(jī)完全一樣。多臺(tái)虛擬主機(jī)共亨真實(shí)主機(jī)的資源，這樣就可以把網(wǎng)絡(luò)的開(kāi)銷(xiāo)費(fèi)用均攤到每臺(tái)虛擬主機(jī)上。可利用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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