項(xiàng)目1班級風(fēng)采網(wǎng)站制作教學(xué)課件

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

2、過程1.1 班級風(fēng)采網(wǎng)站制作過程班級風(fēng)采主頁效果如圖所示，下面詳述其制作過程 任務(wù)1-1 設(shè)計(jì)規(guī)劃班級風(fēng)采網(wǎng)站網(wǎng)頁制作之前要進(jìn)行規(guī)劃，內(nèi)容包括：設(shè)置主題欄目，設(shè)計(jì)網(wǎng)頁結(jié)構(gòu)，確定網(wǎng)站風(fēng)格等等。設(shè)置主題欄目：本班級風(fēng)采網(wǎng)站的主題欄目包括：班級檔案、組織機(jī)構(gòu)、榮譽(yù)殿堂、風(fēng)采圖片、文體天地、學(xué)習(xí)園地、支部生活。設(shè)計(jì)網(wǎng)頁結(jié)構(gòu)：網(wǎng)站主頁規(guī)劃的結(jié)構(gòu)下頁圖所示。網(wǎng)站的主頁可采用簡單明了的板塊結(jié)構(gòu)：采用上中下結(jié)構(gòu)。上邊為標(biāo)題區(qū)，用于存放網(wǎng)站標(biāo)題等內(nèi)容。中間為主頁主體區(qū)，主體區(qū)又分為左右兩部分，左邊窄，用堅(jiān)式結(jié)構(gòu)放置導(dǎo)航欄。右邊寬，存放班級簡介等內(nèi)容。下邊為版權(quán)區(qū)。用于存放版權(quán)聲明信息。設(shè)計(jì)網(wǎng)站風(fēng)格：由于是班級網(wǎng)

3、站，可選簡明清新型。設(shè)計(jì)網(wǎng)頁盡寸：選擇1024768規(guī)格,實(shí)際尺寸為：980*，(*代表768的倍數(shù))。寬度最好限定在一個(gè)幅面內(nèi)，長度一般是不超過3個(gè)版面。 任務(wù)1-1 設(shè)計(jì)規(guī)劃班級風(fēng)采網(wǎng)站班級風(fēng)采站點(diǎn)規(guī)劃布置圖任務(wù)1-2 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn)【子任務(wù)1-2-1】設(shè)置本地站點(diǎn)文件夾本地站點(diǎn)文件夾用以確定存放所有站點(diǎn)文件的存儲位置。設(shè)置本地站點(diǎn)文件夾的操作步驟如下：（1）在桌面雙擊“我的電腦”圖標(biāo)；（2）在“我的電腦”窗口中雙擊打開用于存儲站點(diǎn)的硬盤驅(qū)動(dòng)器（例如為E盤）；（3）使用【文件】新建文件夾命令，在硬盤中建立一個(gè)新文件夾。（4）在新文件夾上單擊右鍵，選擇“重命名”選項(xiàng)，在英文輸入法狀態(tài)下

4、輸入站點(diǎn)名稱。例如輸入 “CLASS”，然后在空白處單擊確定。（見操作演示）任務(wù)1-2 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn)【子任務(wù)1-2-2】建立一個(gè)名稱為“班級”的站點(diǎn)站點(diǎn)是對網(wǎng)站進(jìn)行組織、維護(hù)和管理的功能集合。通過站點(diǎn)管理，用戶可以根據(jù)自己的需要設(shè)計(jì)出自己網(wǎng)站結(jié)構(gòu)。操作步驟如下：（1）啟動(dòng)Dreamweaver CS5（2）執(zhí)行“站點(diǎn)”菜單中的“新建站點(diǎn)”命令，彈出“站點(diǎn)設(shè)置對象”對話框。（3）在菜單中選擇“站點(diǎn)”選項(xiàng)， 在“站點(diǎn)名稱”文本框中輸入：“班級”，在“本地站點(diǎn)文件夾”中輸入E:CLASS（或單擊瀏覽器按鈕，選擇“E:CLASS”）作為本地根文件夾?！罢军c(diǎn)設(shè)置對象”對話框。（見操作演示）（4）

5、單擊【保存】按鈕，完成“班級”站點(diǎn)創(chuàng)建。任務(wù)1-2 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn)【子任務(wù)1-2-3】在“班級”站點(diǎn)中建立站點(diǎn)子文件夾在已建好的網(wǎng)站中，一般還需要建立一些子文件夾，用于歸類存入網(wǎng)站中的圖像、網(wǎng)頁、動(dòng)畫、模板等文件。操作步驟如下 ：（1）在文件面板中選擇“站點(diǎn)-班級（E:class）”文件夾，單擊鼠標(biāo)右鍵，在快捷菜單中選擇“新建文件夾”選項(xiàng)。（見操作演示）（2）單擊untitled文件夾的名稱部分，輸入image，將文件夾改名為image，此文件夾用于存放圖像文件；（3）參照步驟（1）和（2），依次建立文件夾“html”(用于存放非首頁的其他網(wǎng)頁)、“music”（用于存放音樂文件），“s

6、wf”（存放Flash動(dòng)畫）。（操作演示）（結(jié)果如圖“建立站點(diǎn)子文件夾結(jié)果 ”所示）任務(wù)1-2 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn)建立站點(diǎn)子文件夾結(jié)果 任務(wù)1-2 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn)【子任務(wù)1-2-4】在“班級”站點(diǎn)中建立網(wǎng)頁文件建立網(wǎng)頁文件的方法為：先選中要放置網(wǎng)頁文件的文件夾，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件”命令?；驁?zhí)行“文件”“新建文件”菜單命令，在彈出的“新建文檔”對話框中選擇“基本頁”或“HTML”，單擊【創(chuàng)建】按鈕。編輯完成網(wǎng)頁內(nèi)容后，以適當(dāng)?shù)奈募Q保存到相應(yīng)站點(diǎn)文件夾下（如保存到E:classhtml下面）。在操作時(shí)要注意以下問題：（1）主頁文件必須放在本地站點(diǎn)根目錄下，例

7、如，本例應(yīng)將首頁文件放在“E:class”文件夾下。（2）網(wǎng)頁文件名、文件夾名和網(wǎng)站內(nèi)的其他文件名最好全部使用英文小寫形式，因?yàn)镈reameaver不識別中文文件名，而且有些網(wǎng)站服務(wù)器要區(qū)分字母大小寫。任務(wù)1-2 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn)【子任務(wù)1-2-4】在“班級”站點(diǎn)中建立網(wǎng)頁文件操作步驟如下： 打開站點(diǎn)窗口，在文件面板上單擊“展開”按鈕即可打開“站點(diǎn)”窗口。 選中“站點(diǎn)-班級（E:class）”文件夾，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件”命令。 單擊新文件名的名稱部分，將untitled.htm改名為index.htm(作為網(wǎng)站的首頁文件)； 選中“html”文件夾，單擊鼠標(biāo)右鍵

8、，在彈出的快捷菜單中選擇“新建文件”命令，建立網(wǎng)頁dangan.htm(班級檔案)；參照步驟，分別建立網(wǎng)頁xuexi.htm（學(xué)習(xí)園地）、wenti.htm（文體天地）、jigou.htm（組織機(jī)構(gòu)）、zhibu.htm（支部生活）、tupian.htm（風(fēng)彩圖片）、rongyu.htm（榮譽(yù)殿堂）。（見操作演示）。（結(jié)果如 “建立網(wǎng)站新文件結(jié)果 ”圖所示）任務(wù)1-2 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn)建立網(wǎng)站新文件結(jié)果 任務(wù)1-3 制作并添加網(wǎng)頁標(biāo)題欄【子任務(wù)1-3-1】制作網(wǎng)頁標(biāo)題圖像一個(gè)網(wǎng)頁通常有標(biāo)題部分，來訪者可以通過標(biāo)題了解網(wǎng)站的名稱及網(wǎng)站類型。標(biāo)題部分可以是文本，也可以是圖像。如果使用圖像標(biāo)題，

9、我們可以用Fireworks CS5自己制作。操作步驟如下：（1）啟動(dòng)Fireworks CS5，選擇畫布寬度為980，高度為80，畫布顏色自定義為黑色。單擊【確定】按鈕，進(jìn)入到Firework主界面。（見操作演示）（2）在畫面中間用“文本”工具輸入“班級風(fēng)采”，在屬性面板中設(shè)置：字體大小為80，顏色為淡蘭色（#00FFFF），字體為隸書。（見操作演示）。（3）在畫布左邊用“文本”工具輸入“計(jì)算機(jī)多媒體”，在屬性面板中設(shè)置：字體大小為22，顏色為白色，字體為黑體。（4）在畫布右邊用“文本”工具輸入“Computer Multimedia” ，在屬性面板中設(shè)置：字體大小為22，顏色為白色，字體為

10、黑體。（5）單擊保存按鈕，給出保存位置（如E:classimage）及文件名（擴(kuò)展名為.png），以便以后修改。（6）執(zhí)行“文件”菜單中的“圖像預(yù)覽”命令，設(shè)置文件格式為GIF，單擊“導(dǎo)出”按鈕。（見操作演示）（7）在“導(dǎo)出”對話框中選擇保存在：e:classimage，文件名為：bjbt，單擊“保存”按鈕。（見操作演示） 標(biāo)題圖像制作效果圖如下：任務(wù)1-3 制作并添加網(wǎng)頁標(biāo)題欄【子任務(wù)1-3-2】添加主頁標(biāo)題圖像“班級風(fēng)采”操作步驟如下：（1）在Dreamweaver應(yīng)用程序窗口中執(zhí)行“站點(diǎn)”“管理站點(diǎn)”菜單命令，在彈出的對話框中選中需要打開的站點(diǎn)名稱。例如：班級。單擊【完成】按鈕，“班級”

11、站點(diǎn)顯示在文件面板中。（2）雙擊打開需要制作的網(wǎng)頁文件。例如，雙擊打開主頁文件index.htm。首頁文件打開，此時(shí)是空白頁。（3）執(zhí)行“插入”菜單中的“圖像”命令，或單擊“常用”工具欄中的【圖像】按鈕，彈出“選擇圖像源文件”對話框（見操作演示）。如果“常用”工具欄未打開，可按快捷鍵【Ctrl】+【F2】打開。（4）在指定文件夾中找到標(biāo)題圖像文件，選擇標(biāo)題圖像文件后，對話框右側(cè)將顯示該圖像的預(yù)覽圖，單擊【確定】按鈕，插入結(jié)束。任務(wù)1-3 制作并添加網(wǎng)頁標(biāo)題欄【子任務(wù)1-3-3】添加水平分割線為了將標(biāo)題區(qū)與正文內(nèi)容分隔開，通常在標(biāo)題下面插入一條水平分隔線。操作步驟如下：（1）將光標(biāo)移到需要插入分

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

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

14、建樣式規(guī)則”對話框，“輸入選擇器名稱”為font1，“選擇器類型”為“復(fù)合選擇器（基于選擇內(nèi)容）”，“選擇定義規(guī)則的位置”為“僅限該文檔”，（見操作演示）（4）單擊“確定”按鈕，在屬性面板中設(shè)置其字體為默認(rèn)、大小為18、對齊方式為居中對齊。（見操作演示）。（5）參照步驟（2）（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)頁主體內(nèi)容為使網(wǎng)頁內(nèi)容設(shè)置更靈活，可以借助“層”來定位文字區(qū)域?！咀尤蝿?wù)1-5-1】設(shè)置網(wǎng)頁主體文字區(qū)域并添加文字操作步驟如下：（1）在“插入

15、”面板的“布局”工具欄上，單擊【繪制AP Div】按鈕。（2）在頁面需要放文字的地方，按住鼠標(biāo)左鍵拖動(dòng)出一個(gè)矩形區(qū)域（見操作演示）。（3）此時(shí)層處于選中狀態(tài)，通過拖動(dòng)控制點(diǎn)可以調(diào)整層的大小。將鼠標(biāo)放在層的邊緣線上，鼠標(biāo)呈“十字”箭頭時(shí)，拖動(dòng)鼠標(biāo)可以移動(dòng)層的位置。（4）應(yīng)用層屬性面板可設(shè)置層屬性，如背景顏色為#CCFFCC等（見操作演示） 。任務(wù)1-5 設(shè)置網(wǎng)頁主體內(nèi)容【子任務(wù)1-5-2】添加網(wǎng)頁主體文字（1）在層內(nèi)單擊鼠標(biāo)，出現(xiàn)插入點(diǎn)后，即可輸入文字內(nèi)容“我們的班級，計(jì)算機(jī)多媒體班，40顆年輕的心。我們來自五湖四海，操著不同的口音，懷著青春的夢想！共同撐起同一片藍(lán)天，一起遨游知識的海洋。讓我們

16、揚(yáng)帆出海，勝利起航。我們是快樂的一家人，我們是自信的一家人！?！保?）編輯文字，選中文本，在CSS屬性面板的目標(biāo)規(guī)則中選擇新建規(guī)則，在新建CSS樣式規(guī)則對話框中，選擇器名稱設(shè)為line1，單擊確定后出現(xiàn)“l(fā)ine1的CSS規(guī)則定義”對話框，設(shè)置字體為宋體、字號為24、行距為200%。（見操作演示）。（3）單擊“確定”按鈕后，文本內(nèi)容將按line1定義呈現(xiàn)。（見設(shè)置網(wǎng)頁主體內(nèi)容之后效果圖）。任務(wù)1-5 設(shè)置網(wǎng)頁主體內(nèi)容設(shè)置網(wǎng)頁主體內(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í)行“

17、插入”菜單“HTML”下“水平線”命令。出現(xiàn)一條水平分隔線，并處于選中狀態(tài)，在屬性面板中設(shè)置其屬性，如寬度、高度、對齊方式、陰影等。這里設(shè)置寬度為980，陰影。（操作演示）（2）在下一行輸入“Copyright2019-2019 班級風(fēng)采工作”（3）選中輸入的版權(quán)內(nèi)容文本，設(shè)置對齊方式為居中對齊（首次使用對齊方式應(yīng)用新建CSS規(guī)則，如選擇器名稱為center1。操作步驟與前述新建CSS規(guī)則類似），字號為16。設(shè)置效果如圖“版權(quán)區(qū)的設(shè)置”所示。（操作演示）任務(wù)1-6 制作版權(quán)區(qū)版權(quán)區(qū)的設(shè)置任務(wù)1-7 設(shè)置頁面屬性網(wǎng)頁頁面屬性主要包括頁面標(biāo)題、網(wǎng)頁背景圖像與顏色、文本與超級鏈接顏色、頁邊距等。網(wǎng)頁

18、標(biāo)題可以標(biāo)識和命名文檔；網(wǎng)頁背景圖像與顏色可以設(shè)置文檔的外觀；文本顏色可以幫助瀏覽者區(qū)分普通文本和具有超級鏈接的文本，并且可以識別已經(jīng)訪問過和尚未訪問過的超級鏈接。任務(wù)1-7 設(shè)置頁面屬性 【子任務(wù)1-7-1】添加網(wǎng)頁文檔標(biāo)題“班級風(fēng)采”網(wǎng)頁標(biāo)題非常重要，它可以幫助瀏覽者在瀏覽網(wǎng)頁時(shí)了解正在訪問的內(nèi)容，以及在歷史記錄和書簽列表中標(biāo)識頁面。如果頁面沒有標(biāo)題，則網(wǎng)頁將作為“無標(biāo)題文檔”在文檔窗口、瀏覽器窗口、歷史記錄和書簽列表中出現(xiàn)（見操作演示）在Dreamweaver中有多種方法為網(wǎng)頁添加文檔標(biāo)題。操作步驟如下：方法1：直接在Dreamweaver文檔工具欄中的“標(biāo)題”框中輸入新標(biāo)題。例如，輸入

19、“班級風(fēng)采”。然后按【Enter】鍵確定。如果工具欄沒有顯示，可通過“查看”菜單打開工具欄。方法2：單擊文檔工具欄上的【代碼】按鈕，然后在和標(biāo)簽之間輸入新標(biāo)題，（見操作演示）。方法3：執(zhí)行“修改”“頁面屬性”菜單命令，或在網(wǎng)頁空白處單擊鼠標(biāo)右鍵，選擇“頁面屬性”選項(xiàng)，然后在“頁面屬性”對話框的“分類”中選中“標(biāo)題/編碼”，在“標(biāo)題”框中輸入新標(biāo)題，單擊【確定】按鈕。（見操作演示）。任務(wù)1-7 設(shè)置頁面屬性【子任務(wù)1-7-2】設(shè)置網(wǎng)頁背景圖像和顏色使用“頁面屬性”對話框可以設(shè)置網(wǎng)頁的背景圖像或背景顏色。如果同時(shí)設(shè)置了背景圖像和背景顏色，則背景顏色不能顯現(xiàn)。如果背景圖像有透明像素，則背景顏色才能顯

20、示。操作步驟如下：（1）打開“頁面屬性”對話框，在“分類”中選中“外觀（CSS）”選項(xiàng)，單擊“背景圖像”文本框右側(cè)的【瀏覽】按鈕，彈出“選擇圖像源文件”對話框，在“選擇圖像源文件”對話框中選擇一個(gè)圖像文件（例如image/bj1.gif），單擊【確定】按鈕；或者在“背景圖像”文本框中直接輸入圖像文件名與路徑，（見操作演示）。（2）單擊“頁面屬性”對話框中的【應(yīng)用】按鈕，背景圖像將應(yīng)用到網(wǎng)頁中。（3）在“頁面屬性”對話框中單擊“背景顏色”右側(cè)的按鈕，鼠標(biāo)變?yōu)榈喂苄螤?，并彈出一個(gè)顏色面板，可以使用取色滴管在顏色面板中選取一種顏色。也可以直接輸入顏色值，如#CCC。（見操作演示）任務(wù)1-7 設(shè)置頁面

21、屬性【子任務(wù)1-7-2】設(shè)置網(wǎng)頁背景圖像和顏色注意：同時(shí)設(shè)置背景圖像和背景顏色的原因是當(dāng)網(wǎng)絡(luò)速度較慢時(shí)，背景圖像可能顯示遲緩，背景顏色將首先出現(xiàn)，讓瀏覽者明白這是有圖片的頁面，需要稍加等候。背景圖像的文件名不能使用中文名稱。如果背景圖像的尺寸小于文檔窗口的大小，則Dreamweaver將重復(fù)排列背景圖像直至填滿文檔窗口。系統(tǒng)默認(rèn)的網(wǎng)頁背景顏色是白色。任務(wù)1-7 設(shè)置頁面屬性設(shè)置背景色與背景圖頁面屬性 任務(wù)1-7 設(shè)置頁面屬性【子任務(wù)1-7-3】設(shè)置網(wǎng)頁文本顏色及鏈接顏色設(shè)置了背景圖像和顏色之后，還需要設(shè)置網(wǎng)頁中文本的字體、大小與顏色。在“頁面屬性”對話框中既可以設(shè)置普通文本的默認(rèn)顏色與字體，也

22、可以設(shè)置超級鏈接、已訪問鏈接和活動(dòng)鏈接的默認(rèn)顏色與字體。操作步驟如下：（1）打開“頁面屬性”對話框，在“分類”中選中“外觀（HTML）”選項(xiàng)。（2）單擊“文本”右側(cè)的按鈕，彈出顏色面板。使用取色滴管選取文本顏色（例如黑色#000000）（見操作演示）。（3）單擊“鏈接”、“已訪問鏈接”、“活動(dòng)鏈接”右側(cè)的按鈕，彈出顏色面板選項(xiàng)，分別設(shè)置鏈接顏色（例如黑色#000000）、已訪問鏈接（例如紅色#FF0000）、活動(dòng)鏈接的顏色（例如蘭色#0000FF）。 任務(wù)1-7 設(shè)置頁面屬性【子任務(wù)1-7-4】設(shè)置網(wǎng)頁頁面邊距通過設(shè)置頁面邊距，可以使網(wǎng)頁周圍留出一些距離，也可以設(shè)置不留距離。操作步驟如下：（1

23、）打開“頁面屬性”對話框，在“分類”中選中“外觀（HTML）”選項(xiàng)。（2）直接在邊界框中輸入邊距數(shù)值，（見操作演示）。 左邊距：0（文檔中左側(cè)邊緣的空白數(shù)值）。上邊距：0（文檔中上側(cè)邊緣的空白數(shù)值）。右邊距：（文檔中右側(cè)邊緣的空白數(shù)值）。下邊距：（文檔中下側(cè)邊緣的空白數(shù)值）。任務(wù)1-8 制作子網(wǎng)頁這里以組織機(jī)構(gòu)子網(wǎng)頁制作為例，簡述其制作過程。【子任務(wù)1-8-1】制作“組織機(jī)構(gòu)”子網(wǎng)頁操作步驟如下：（1）在文件面板中展開HTML文件夾，雙擊jigou.html，組織機(jī)構(gòu)子網(wǎng)頁jigou.html出現(xiàn)在文檔窗口中。（2）參照任務(wù)5的操作方法，輸入文本“計(jì)算機(jī)多媒體121班組織機(jī)構(gòu)”，設(shè)置字體為黑體

24、、字號為36、居中對齊。（3）參照任務(wù)5的操作方法，創(chuàng)建2個(gè)繪制層，用于輸入班委會(huì)和團(tuán)支部成員名單。設(shè)置字體為黑體、字號為16、居中對齊，層背景色為#999900等。（4）參照任務(wù)7，設(shè)置網(wǎng)頁文檔標(biāo)題為：“組織機(jī)構(gòu)”，背景圖像為imagebg3.jpg（5）單擊“在瀏覽器中預(yù)覽”按鈕，效果不滿意可進(jìn)行修改，效果滿意后，執(zhí)行“文件”菜單中的“保存”命令將文件存盤?！敖M織機(jī)構(gòu)”子網(wǎng)頁核心部分效果如圖所示?！咀尤蝿?wù)1-8-2】其它子網(wǎng)頁制作其它子網(wǎng)頁參照子任務(wù)1-8-1進(jìn)行制作，這里不再詳述。任務(wù)1-8 制作子網(wǎng)頁組織機(jī)構(gòu)子網(wǎng)頁核心部分效果圖 任務(wù)1-9 建立網(wǎng)頁之間的鏈接【子任務(wù)1-9-1】建立文

25、字導(dǎo)航的超級鏈接超級鏈接可以是一段文本、一幅圖像或者其他的網(wǎng)頁元素。這里以文字導(dǎo)航為例來建立鏈接。操作步驟如下：（1）首先選中設(shè)置超級鏈的文字，如“組織機(jī)構(gòu)”。（2）單擊屬性面板中的“瀏覽文件”圖標(biāo)，彈出“選擇文件”對話框（如圖示），雙擊打開“html”文件夾，。單擊選中與“組織機(jī)構(gòu)”相鏈接的網(wǎng)頁文件jigou.html，單擊【確定】按鈕后，在屬性面板的鏈接框內(nèi)顯示出鏈接的網(wǎng)頁文件及路徑。也可以在“鏈接”框中直接輸入需要鏈接的網(wǎng)址或文件路徑。（見操作演示）（3）建立超級鏈接的文字顏色默認(rèn)呈藍(lán)色，并且出現(xiàn)一條下劃線。（4）參照步驟（1）（3），設(shè)置其他導(dǎo)航欄的文字鏈接。任務(wù)1-9 建立網(wǎng)頁之間的

26、鏈接“選擇文件”對話框 任務(wù)1-10 瀏覽網(wǎng)頁一個(gè)網(wǎng)頁制作完成后，可以在瀏覽器中預(yù)覽，并根據(jù)預(yù)覽效果再對網(wǎng)頁進(jìn)行調(diào)整。【子任務(wù)1-10-1】在瀏覽器中預(yù)覽“班級風(fēng)采”主頁操作步驟如下：（1）執(zhí)行“文件”“在瀏覽器中預(yù)覽”“預(yù)覽在IExplore”菜單命令，或按快捷鍵【F12】啟動(dòng)IE瀏覽器，并將當(dāng)前編輯的網(wǎng)頁顯示在窗口中。也可單擊文檔工具欄上的【在瀏覽器中預(yù)覽】按鈕，再執(zhí)行“預(yù)覽在IExplore”命令。（2）將鼠標(biāo)指向鏈接的文字或圖像時(shí)，鼠標(biāo)形狀變?yōu)槭中危瑺顟B(tài)欄將顯示被鏈接文件的名稱，單擊即可切換到鏈接的頁面。任務(wù)1-11 保存網(wǎng)頁隨時(shí)保存文件是編輯任何文檔時(shí)應(yīng)該有的良好習(xí)慣。在制作網(wǎng)頁的過

27、程中，隨時(shí)有可能發(fā)生斷電或機(jī)器故障，而Dreamweaver編輯器沒有自動(dòng)保存的功能。因此，要經(jīng)常地保存正在編輯的網(wǎng)頁，以避免由于意外而導(dǎo)致辛勤勞動(dòng)付之東流?！咀尤蝿?wù)1-11-1】保存網(wǎng)頁操作步驟如下：（1）執(zhí)行“文件”“保存”菜單命令，或單擊標(biāo)準(zhǔn)工具欄上的【保存】按鈕，或按快捷鍵【Ctrl】+【S】（2）如果網(wǎng)頁文件已經(jīng)建好或以前保存過，則文件繼續(xù)保存；如果文件從未保存過，則彈出“另存為”對話框，（3）在“保存在”列表中選擇一個(gè)文件路徑（注意：網(wǎng)頁文件應(yīng)保存在站點(diǎn)文件夾內(nèi)），在“文件名”文本框中輸入文件名，“保存類型”選擇html文件，最后單擊【保存】按鈕。任務(wù)1-11 保存網(wǎng)頁“另存為”對

28、話框1.2 班級風(fēng)采網(wǎng)站制作相關(guān)知識知識點(diǎn)1-1 網(wǎng)頁與網(wǎng)站的概念1. 網(wǎng)頁的概念Web，直譯過來就叫“網(wǎng)”，它的含義是通過超級鏈接將各種文檔連接起來，形成一個(gè)大規(guī)模的信息集合。網(wǎng)頁(即Web頁)是能夠被瀏覽器軟件識別的文本文件，擴(kuò)展名一般為.htm或.html。是使用網(wǎng)頁制作工作編輯生成或使用HTML語言編寫的超文本，網(wǎng)頁里可以包含文字、表格、圖像、聲音和視頻等網(wǎng)頁元素。每個(gè)網(wǎng)頁都是磁盤上的一個(gè)文件，可以單獨(dú)瀏覽。網(wǎng)頁是組成網(wǎng)站的特殊成分，圖像、聲音、和視頻等文件均需要通過網(wǎng)頁才能讓瀏覽者看到。知識點(diǎn)1-1 網(wǎng)頁與網(wǎng)站的概念2網(wǎng)站的概念與分類（1） 網(wǎng)站的的概念網(wǎng)站，也稱作站點(diǎn)，英文的名稱是

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

30、網(wǎng)易、雅虎等。電子商務(wù)網(wǎng)站：主要用于網(wǎng)上交易。如：阿里巴巴、易趣等。即時(shí)通訊網(wǎng)站：用于實(shí)時(shí)性網(wǎng)上通訊交流。如騰迅QQ、雅虎等。小型專題或個(gè)人網(wǎng)站：多以宣傳創(chuàng)建者自身，提供信息，或就某一專題提供最新資訊、歷史資料及相關(guān)論壇等內(nèi)容為主要形式。小型企事業(yè)網(wǎng)站或個(gè)人網(wǎng)站大多采用這種形式。 按網(wǎng)站交互性來類單向傳遞：這類網(wǎng)站重點(diǎn)在宣傳自身、介紹產(chǎn)品、發(fā)布新聞等。與傳統(tǒng)媒體的傳播方式相類似，主要是提供資料供用戶瀏覽，其它交流功能則較少。雙向交流：更注重網(wǎng)絡(luò)與用戶間信息的互動(dòng)，網(wǎng)站可按用戶的需求提供各種形式的檢索，并且用戶在網(wǎng)上獲取信息的同時(shí)，網(wǎng)站也可接收到來自用戶的信息，實(shí)現(xiàn)信息共享，用戶還可加入各種網(wǎng)上

31、互動(dòng)活動(dòng)，如參加論壇討論，進(jìn)行在線游戲等。知識點(diǎn)1-1 網(wǎng)頁與網(wǎng)站的概念3. 網(wǎng)頁是如何被瀏覽的網(wǎng)頁瀏覽是通過瀏覽器來實(shí)現(xiàn)的，瀏覽器是專門用于瀏覽網(wǎng)頁的軟件，常用的瀏覽器軟件有Microsoft的IE和Netscape的Navigator等。HTML文件中還定義了網(wǎng)頁中的各種對象（如：文字，圖片，聲音，圖像，動(dòng)畫）的位置，外形和色彩，各種圖像，聲音，動(dòng)畫等文件則是網(wǎng)頁的素材。瀏覽網(wǎng)頁屬于Internet所提供的WWW服務(wù)。網(wǎng)頁瀏覽者在瀏覽網(wǎng)頁時(shí)，實(shí)際上是將HTML文件及相關(guān)的文本、圖像、聲音等文件下載到自已本地計(jì)算機(jī)中，然后由瀏覽器程序?qū)TML文件進(jìn)行解釋后顯示網(wǎng)頁內(nèi)容。知識點(diǎn)1-1 網(wǎng)頁與

32、網(wǎng)站的概念4. 網(wǎng)頁制作常用術(shù)語（1） HTML文件用超文本標(biāo)記語言編寫的超文本文件稱為HTML（HyperText Mark-up Language）文件，它能不受各種操作系統(tǒng)限制，獨(dú)立地運(yùn)行于各種操作系統(tǒng)平臺之上。HTML文件作用：HTML語言主要用于靜態(tài)網(wǎng)頁設(shè)計(jì)，自1990年起HTML語言就一直被用作World Wide Web（WWW）上的信息表示語言，用于描述網(wǎng)頁的格式，設(shè)計(jì)它與WWW上其它主頁的鏈接信息。HTML文件是網(wǎng)頁的源文件，是一個(gè)放置了標(biāo)記的ASCII文本文件，通常以.htm或.html為擴(kuò)展名。（2） 服務(wù)器和客戶機(jī)瀏覽者在訪問網(wǎng)頁時(shí)，是由瀏覽者本地的計(jì)算機(jī)向存放網(wǎng)頁的遠(yuǎn)

33、程計(jì)算機(jī)發(fā)出一個(gè)請求。遠(yuǎn)程計(jì)算機(jī)在收到請求后，將所需要的瀏覽內(nèi)容（即網(wǎng)頁）發(fā)送給本地計(jì)算機(jī)。那么本地的計(jì)算機(jī)被稱為客戶計(jì)算機(jī)（Client），遠(yuǎn)程存放網(wǎng)頁的計(jì)算機(jī)被稱為服務(wù)器（Server），根據(jù)服務(wù)器上運(yùn)行的程序類型及服務(wù)器與客戶所使用的通信協(xié)議作用的不同，服務(wù)器可分為WWW服務(wù)器，F(xiàn)TP服務(wù)器等。（3） IP地址和域名IP地址：為了使連接在Internet上的計(jì)算機(jī)能夠互相識別并進(jìn)行通信，每臺連入Internet的計(jì)算機(jī)必須有個(gè)“標(biāo)識號”，這個(gè)標(biāo)識號便是計(jì)算機(jī)在Internet中的地址。這個(gè)地址是由IP協(xié)議進(jìn)行處理的，故稱為計(jì)算機(jī)的IP地址。IP地址是一個(gè)32位的二進(jìn)制數(shù)，IP地址的寫法是

34、按8位為一組分成4組，組與組之間用小數(shù)點(diǎn)分隔，每組數(shù)值用十進(jìn)制數(shù)表示。如:某臺計(jì)算機(jī)的IP地址為8。IP地址包含兩部分:一部分是網(wǎng)絡(luò)號,用以區(qū)分在Internet上互聯(lián)的各個(gè)網(wǎng)絡(luò);另一部分是計(jì)算機(jī)號,用以區(qū)分在同一網(wǎng)絡(luò)上的不同計(jì)算機(jī)。域名：Internet規(guī)定了一套命令機(jī)制，稱為域名系統(tǒng)DNS（Domain Name System）。按域名系統(tǒng)定義的計(jì)算機(jī)名字稱為域名。如： 163當(dāng)用戶用域名來訪問遠(yuǎn)程的計(jì)算機(jī)時(shí),必須由Internet的DNS的名字服務(wù)器(Name Server)將域名翻譯成對應(yīng)的32位IP地址,然后才能完成對遠(yuǎn)程計(jì)算機(jī)的訪問。知識點(diǎn)1-1 網(wǎng)頁與網(wǎng)站的概念（4） 統(tǒng)一資源定

35、位器（url）統(tǒng)一資源定位器（Uniform Resource Locator）是全球WWW網(wǎng)服務(wù)器資源的標(biāo)準(zhǔn)尋址定位源碼，用于確定資源相應(yīng)的位置及所需檢索的文件。其優(yōu)點(diǎn)是用字符串來指向所需的信息，從而進(jìn)行資料的檢索。URL 由3部分組成:Internet協(xié)議 域名 主機(jī)路徑及文件名例如：online.ln/index.htm協(xié)議有：超文本傳輸協(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 是支持用戶實(shí)現(xiàn)把文件從

36、一臺計(jì)算機(jī)中傳輸?shù)搅硪慌_計(jì)算機(jī)中,并且能保證傳輸?shù)目煽啃?。用戶在本地?jì)算機(jī)上做好的主頁除了用Dreamweaver上傳之外。還可以用FTP上傳到達(dá)遠(yuǎn)程的主機(jī)中。常用的FTP工具有CuteFTP和LeapFTP等。知識點(diǎn)1-1 網(wǎng)頁與網(wǎng)站的概念（6）虛擬主機(jī)虛擬主機(jī)是使用特殊的軟、硬件技術(shù)把一臺服務(wù)器主機(jī)分成幾十個(gè)“虛擬”的服務(wù)器主機(jī)，每臺虛擬主機(jī)都具有獨(dú)立的域名和IP地址（或共亨的IP地址），具有完整的Internet服務(wù)器功能。虛擬主機(jī)之間完全獨(dú)立，在外界看來，每臺虛擬主機(jī)和一臺獨(dú)立的服務(wù)器主機(jī)完全一樣。多臺虛擬主機(jī)共亨真實(shí)主機(jī)的資源，這樣就可以把網(wǎng)絡(luò)的開銷費(fèi)用均攤到每臺虛擬主機(jī)上?？衫锰?/p>

37、擬主機(jī)技術(shù)建立個(gè)人主頁，在大型網(wǎng)站上（提供存放主頁的免費(fèi)空間，提供免費(fèi)域名）申請主頁空間和域名（免費(fèi)或收費(fèi)），獲得成功后，把你制作的網(wǎng)頁存放在虛擬主機(jī)上，這樣你就好象在Internet上擁有了自己的服務(wù)器和網(wǎng)站。知識點(diǎn)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)絡(luò)中心。硬件方面需要有性能穩(wěn)定的服務(wù)器、路由器、交換機(jī)，并要向當(dāng)?shù)氐碾娦挪块T申請網(wǎng)絡(luò)專線。同時(shí)需要有一定數(shù)量的專人對網(wǎng)站進(jìn)行維護(hù)和管理。 中小企業(yè)級或小型組織社團(tuán)的網(wǎng)站發(fā)布如果沒有條件創(chuàng)建獨(dú)立的網(wǎng)

38、站硬件環(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ù)庫，可以采用這種發(fā)布方式，也就是租用ISP主機(jī)服務(wù)器的一定空間來發(fā)布網(wǎng)站，一年需要支付少量費(fèi)用，就可以建立一個(gè)功能比較強(qiáng)大的網(wǎng)站。目前，這是大多數(shù)中小企業(yè)和社會(huì)團(tuán)體、較具規(guī)模的各種組織網(wǎng)站多采用的模式。服務(wù)器托管：如果在網(wǎng)站里需要大量數(shù)據(jù)庫支持，可以采用這種方式。將網(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)站的性能

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

40、-1 網(wǎng)頁與網(wǎng)站的概念（8）超文本、超媒體、超鏈接超文本文件（HyperText）就是指在文本中包含了與其他文本的鏈接的文件。超級鏈接文本下方帶有下劃線。超媒體（Hypermedia）進(jìn)一步擴(kuò)展了超文本所鏈接的信息類型。超媒體文件就是一種文字、影像、圖片、動(dòng)畫、聲音綜合在一起的文件。超鏈接（Hyperlink）是WWW上使用最多的一種技術(shù)，是網(wǎng)頁的靈魂，它的作用是建立網(wǎng)頁之間的聯(lián)系。通過超級鏈接，瀏覽者能夠方便自由地在網(wǎng)頁、網(wǎng)站乃至整個(gè)因特網(wǎng)上遨游。在網(wǎng)頁中，當(dāng)鼠標(biāo)移到超鏈接處，會(huì)呈現(xiàn)手的形狀，表示單擊該處，可以鏈接到該提示所指的頁面。（9）主頁網(wǎng)站向用戶提供的最初起始頁面叫主頁（Homepa

41、ge），也稱為首頁。主頁是進(jìn)入網(wǎng)站的門戶，一般是整個(gè)網(wǎng)站的第一頁，是網(wǎng)站中所有網(wǎng)頁文件的起點(diǎn)和交點(diǎn)。主頁中通常包括通向其他相關(guān)頁面的超級鏈接，還應(yīng)包括站點(diǎn)的基本信息和主要內(nèi)容，使瀏覽者一目了然地了解站點(diǎn)的基本主題，了解站點(diǎn)的信息是否對自己有用。知識點(diǎn)1-2 網(wǎng)站設(shè)計(jì)與制作流程確定主題搜集材料規(guī)劃網(wǎng)站制作網(wǎng)頁測試評估正式上傳推銷網(wǎng)站維護(hù)更新網(wǎng)站規(guī)劃網(wǎng)站制作后期維護(hù)網(wǎng)站設(shè)計(jì)是一個(gè)系統(tǒng)工程，具有特定的工作流程，遵循這個(gè)流程，才能設(shè)計(jì)出令人滿意的網(wǎng)站。網(wǎng)站設(shè)計(jì)制作主要分為網(wǎng)站規(guī)劃、網(wǎng)站制作、后期維護(hù)三個(gè)階段。知識點(diǎn)1-2 網(wǎng)站設(shè)計(jì)與制作流程1. 網(wǎng)站規(guī)劃制作網(wǎng)頁如同潑墨作畫，首先要進(jìn)行構(gòu)思，然后再加以

42、實(shí)現(xiàn)。這種構(gòu)思就是網(wǎng)站規(guī)劃。網(wǎng)站規(guī)劃的總體原則有兩個(gè)：一是為讀者提供有用信息，二是要美觀。（1） 確定網(wǎng)站的主題與名稱網(wǎng)站的主題是指建立的網(wǎng)站所要包含的主要內(nèi)容。例如，教育、旅游、體育、新聞、醫(yī)療、時(shí)尚、娛樂、搜索等。其中每一大類又可細(xì)分為若干小類。一般來說，確定網(wǎng)站主題應(yīng)遵循以下原則： 主題鮮明； 明確設(shè)立網(wǎng)站的目的； 體現(xiàn)自己的個(gè)性。網(wǎng)站的名稱起著很重要的作用，它在很大程度上決定了整個(gè)網(wǎng)站的定位。一個(gè)好的名稱必須簡潔、有概括性、有特色、容易記，還要符合自己主頁的主題和風(fēng)格。（2） 搜集材料確定網(wǎng)站主題后，要圍繞主題搜集材料，作為自己制作網(wǎng)頁的素材。知識點(diǎn)1-2 網(wǎng)站設(shè)計(jì)與制作流程（3） 規(guī)

43、劃網(wǎng)站規(guī)劃網(wǎng)站就象設(shè)計(jì)師設(shè)計(jì)大樓一樣，只有圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。規(guī)劃網(wǎng)站時(shí)，首先應(yīng)把網(wǎng)站的內(nèi)容列舉出來，根據(jù)內(nèi)容列出一個(gè)結(jié)構(gòu)化的藍(lán)圖，根據(jù)實(shí)際情況設(shè)計(jì)各個(gè)頁面之間的鏈接。規(guī)劃網(wǎng)站的內(nèi)容應(yīng)包括：欄目的設(shè)置、目錄結(jié)構(gòu)、網(wǎng)站的風(fēng)格（即顏色、搭配、網(wǎng)站標(biāo)志Logo、版面布局、圖像的運(yùn)用）等。 主題欄的設(shè)置在設(shè)計(jì)網(wǎng)站的主題欄與版塊時(shí)應(yīng)注意以下幾個(gè)問題：突出主題，把主題欄放在最明顯的地方，讓瀏覽者更快、更明確地知道網(wǎng)站所表現(xiàn)的內(nèi)容。設(shè)計(jì)一個(gè)最近更新欄目，讓瀏覽者一目了然地知道更新內(nèi)容。欄目不要設(shè)置太多，一般不超過10個(gè)。 目錄結(jié)構(gòu)設(shè)計(jì)目錄結(jié)構(gòu)設(shè)計(jì)一般應(yīng)注意以下問題：按欄目內(nèi)容建立子目錄。每

44、個(gè)欄目下分別為圖像文件創(chuàng)建一個(gè)子目錄image（圖像較少時(shí)可不創(chuàng)建）目錄的層次不要太深，主要欄目最好能直接從首頁到達(dá)。盡量使用意義明確的非中文目錄。 顏色搭配合理的應(yīng)用色彩是非常關(guān)鍵的，不同的色彩搭配產(chǎn)生不同的效果，并能影響瀏覽者的情緒。網(wǎng)頁選用的背景應(yīng)和頁面的色調(diào)相協(xié)調(diào)，色彩搭配要遵循和諧、均衡、重點(diǎn)突出的原則。知識點(diǎn)1-2 網(wǎng)站設(shè)計(jì)與制作流程（3） 規(guī)劃網(wǎng)站 網(wǎng)站標(biāo)志LogoLogo最重要的作用就是表達(dá)網(wǎng)站的理念，便于人們識別，廣泛地用于站點(diǎn)鏈接和宣傳。如同商標(biāo)一樣，Logo是站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)。如果是企業(yè)網(wǎng)站，最好是在企業(yè)商標(biāo)的基礎(chǔ)上設(shè)計(jì)，保持企業(yè)形象的整體統(tǒng)一。設(shè)計(jì)Logo的原則

45、是：以簡潔、符號化的視覺藝術(shù)把網(wǎng)站的形象和理念展示出來。 版面布局網(wǎng)頁頁面的整體布局是不可忽視的。要合理地運(yùn)用空間，讓網(wǎng)頁疏密有致、井井有條。版面布局一般應(yīng)遵循的原則是：突出重點(diǎn)、平衡和諧，將網(wǎng)站標(biāo)志（Logo）、主菜單等最重要的模塊放在突出的位置，然后再排放次要模塊（例如搜索、計(jì)數(shù)器、版權(quán)信息、E-mail地址等）。此外，其他頁面的設(shè)計(jì)應(yīng)和首頁保持相同的風(fēng)格，并有返回首頁的鏈接。 圖像的運(yùn)用網(wǎng)頁上應(yīng)適當(dāng)?shù)靥砑右恍﹫D像，使用圖像一般應(yīng)注意以下幾個(gè)問題：圖像是為主頁的內(nèi)容服務(wù)的，不能讓圖像喧賓奪主。圖像要兼顧大小和美觀。圖片不僅要好看，還應(yīng)在保證圖片質(zhì)量的情況下盡量縮小圖片的大小（即字節(jié)數(shù)）。圖

46、像過大會(huì)影響網(wǎng)頁的傳輸速度。合理地采用JPEG和GIF圖像格式。顏色較少的（256色以內(nèi)）圖像，可處理為GIF格式，色彩比較豐富的圖像，最好處理為JPEG格式。知識點(diǎn)1-2 網(wǎng)站設(shè)計(jì)與制作流程2 網(wǎng)站制作（1） 制作網(wǎng)站制作網(wǎng)站主要包括以下步驟： 建立本地站點(diǎn)。建立站點(diǎn)根文件夾，用于存放首頁、相關(guān)網(wǎng)頁和網(wǎng)站中用到的其他文件。 在站點(diǎn)根文件夾下創(chuàng)建子文件夾。為了使文件安排比較清晰，將頁面文件和圖像文件分開存放。 向站點(diǎn)添加所需要的空網(wǎng)頁。 設(shè)計(jì)網(wǎng)頁盡寸。頁面大小一般可選擇800600或1024768規(guī)格。 設(shè)計(jì)網(wǎng)頁屬性，包括頁面標(biāo)題、背景圖像、背景顏色、鏈接顏色、文字顏色等。 向網(wǎng)頁中插入文本、

47、圖像、動(dòng)畫等對象。 建立所需要的超級鏈接。 預(yù)覽和保存網(wǎng)頁。（2）上傳與測試測試評估與正式上傳是不可分割的兩部分。制作完畢的網(wǎng)頁，必須進(jìn)行測試。測試評估主要包括上傳前的兼容性測試、鏈接測試和上傳后的實(shí)地測試。完成上傳前所需要的測試后，利用FTP工具將網(wǎng)頁發(fā)布到所申請的主頁服務(wù)器上。網(wǎng)站上傳后，繼續(xù)通過瀏覽器進(jìn)行實(shí)地測試，發(fā)現(xiàn)問題，及時(shí)修改，然后再上傳測試。知識點(diǎn)1-2 網(wǎng)站設(shè)計(jì)與制作流程3后期維護(hù)（1） 推銷網(wǎng)站網(wǎng)頁上傳后，需要不斷地進(jìn)行宣傳，以便讓更多的朋友認(rèn)識它，從而提高網(wǎng)站的訪問率與知名度。推廣網(wǎng)站的方法很多，例如，利用E-mail、新聞組、與別的網(wǎng)站交換鏈接（友情鏈接）、到搜索引擎上注

48、冊、加入交換廣告等。（2） 維護(hù)更新網(wǎng)站必須定期維護(hù)、定期更新，只有不斷地補(bǔ)充新內(nèi)容，才能吸引瀏覽者。同時(shí)，隨著軟硬件的進(jìn)步，網(wǎng)頁的設(shè)計(jì)也應(yīng)由文字向多媒體、由平面圖像向立體動(dòng)畫或影片、由單向傳播向交互式發(fā)展。知識點(diǎn)1-3 初步認(rèn)識Dreamweaver CS51. 中文Dreamweaver CS5工作環(huán)境中文Dreamweaver CS5提供可視化的網(wǎng)頁開發(fā)環(huán)境,具有所見即所得的功能。它的工作窗口簡潔明了，功能面板及工具欄中幾乎集中了所有的重要功能，屬性面板放在窗口底部外，其他面板放在窗口的右邊，可隨時(shí)打開與關(guān)閉，這樣就克服了以往版本浮動(dòng)面板位置較亂，有時(shí)會(huì)影響網(wǎng)頁編輯的不足。中文Dream

49、weaver CS5工作環(huán)境即中文Dreamweaver CS5應(yīng)用程序窗口，該應(yīng)用程序窗口由菜單欄、文檔工具欄、文檔編輯窗口、浮動(dòng)面板等組成，文檔編輯窗口由文檔標(biāo)題欄、頁面編輯區(qū)、狀態(tài)欄等組成，浮動(dòng)面板包括屬性面板、面板組等，面板組包括插入面板、CCS樣式/AP元素面板、文件/資源面板等。中文Dreamweaver CS5工作環(huán)境如圖所示：知識點(diǎn)1-3 初步認(rèn)識Dreamweaver CS5中文Dreamweaver CS5工作環(huán)境 知識點(diǎn)1-3 初步認(rèn)識Dreamweaver CS5(1) 菜單欄和其他應(yīng)用軟件基本相同，菜單欄中的每一項(xiàng)都有一個(gè)下拉式菜單，Dreamweaver CS5中大

50、部分操作都可以通過菜單項(xiàng)的下拉菜單來實(shí)現(xiàn)。(2) 文檔工具欄文檔工具欄包含可在代碼視圖、設(shè)計(jì)視圖、拆分視圖之間快速切換的按鈕，并包含一些與選定視圖有關(guān)的常用命令。選擇【查看】【工具欄】菜單命令，可以在窗口中顯示或隱藏文檔工具欄?！按a”按鈕：在文檔中顯示代碼視圖。在代碼視圖中，可以直接查看和編輯HTML源代碼?！安鸱帧卑粹o：同時(shí)顯示代碼視圖與設(shè)計(jì)視圖。在代碼視圖顯示在左側(cè)，設(shè)計(jì)視圖顯示在右側(cè)?！霸O(shè)計(jì)”按鈕：在文檔中顯示設(shè)計(jì)視圖。設(shè)計(jì)視圖是中文Dreamweaver CS58編輯過程中的默認(rèn)方式，可以達(dá)到所見即所得的效果?！皹?biāo)題”文本框：顯示或編輯當(dāng)前網(wǎng)頁的標(biāo)題?！霸跒g覽器中預(yù)覽/調(diào)試”按鈕：在

51、瀏覽器中預(yù)覽網(wǎng)頁效果或檢查錯(cuò)誤?！拔募芾怼卑粹o：查看文件的上傳、下載的狀態(tài)?！八⑿略O(shè)計(jì)視圖”按鈕：刷新設(shè)計(jì)視圖。“視圖選項(xiàng)”按鈕：為不同的視圖設(shè)置選項(xiàng)。(3) 文檔窗口文檔窗口包括文檔標(biāo)題欄、頁面編輯區(qū)、狀態(tài)欄文檔標(biāo)題欄可顯示建立或打開的多個(gè)網(wǎng)頁文檔標(biāo)題，單擊標(biāo)題標(biāo)簽可切換到相應(yīng)網(wǎng)頁的編輯狀態(tài)。頁面編輯區(qū)用于設(shè)置和編輯頁面內(nèi)的文本、圖形和表格等。狀態(tài)欄用于選擇標(biāo)記、設(shè)置窗口大小及調(diào)整文件的下載速度。知識點(diǎn)1-3 初步認(rèn)識Dreamweaver CS5(4) 面板中文Dreamweaver CS5提供了多種多樣的、具備不同功能的面板，大量操作可通過面板方便地完成。面板包括：屬性面板、插入面板、

52、站點(diǎn)文件管理器、資源面板、行為面板、CSS樣式面板、代碼檢查器、框架面板、歷史記錄面板、層面板、庫面板、參考面板、模板面板、時(shí)間軸面板等。所有面板都可以由“窗口”菜單控制顯示或隱藏。下面介紹一些常用面板。面板的具體操作方法，將在后面使用相應(yīng)面板的實(shí)例中再進(jìn)行介紹。插入面板插入面板，也可稱作插入工具欄。選擇【窗口】【插入】菜單命令或按快捷鍵【Ctrl】+【F2】可顯示或隱藏插入面板。（操作演示）插入面板是中文Dreamweaver CS5中最重要的面板之一，所包含的內(nèi)容均為網(wǎng)頁設(shè)計(jì)最常用的工具按鈕。有標(biāo)簽與兩種顯示方式。在隱藏標(biāo)簽顯示方式下，將鼠標(biāo)放在某個(gè)工具按鈕上，可顯示該工具按鈕的名稱。標(biāo)簽

53、顯示方式可直接顯示按鈕功能標(biāo)簽。插入面板集成了“插入”菜單中的選項(xiàng)，主要包括常用、布局、表單、文本、數(shù)據(jù)等。在標(biāo)簽顯示方式下（操作演示），單擊“常用”右邊的下拉按鈕可選擇不同工具類型，如常用、布局、表單、數(shù)據(jù)、文本等，默認(rèn)是常用工具類型。屬性面板屬性面板是使用頻率最高的一個(gè)浮動(dòng)面板，一般被放置在窗口的下邊。屬性面板中的項(xiàng)目會(huì)隨著網(wǎng)頁中選定對象的不同而改變的。在屬性面板中，詳細(xì)地列出了所選對象的屬性參數(shù)，用戶可以通過屬性面板查看或修改這些參數(shù)。選擇【窗口】【屬性】菜單命令或按快捷鍵【Ctrl】+【F3】， 可顯示或隱藏屬性面板。其他面板一般面板在打開時(shí)都顯示在窗口的右側(cè)，如文件/資源面板、CSS

54、樣式/AP元素面板、框架面板、行為面板等。使用“窗口”菜單中的相應(yīng)面板選項(xiàng)，可以顯示或隱藏相應(yīng)面板。在面板標(biāo)題上單擊右鍵，在快捷菜單中選擇“關(guān)閉面板組”，也可關(guān)閉相應(yīng)面板。各種面板的具體應(yīng)用性操作可結(jié)合具體任務(wù)進(jìn)一步熟悉。知識點(diǎn)1-3 初步認(rèn)識Dreamweaver CS52. 站點(diǎn)建立在開始制作網(wǎng)頁之前，一般需要先定義一個(gè)本地站點(diǎn)，然后再進(jìn)行后續(xù)操作。作為一個(gè)網(wǎng)站，里面一定有很多圖片、網(wǎng)頁文件、音樂文件、Flash動(dòng)畫等，如果不進(jìn)行管理分類，分散在硬盤的各個(gè)地方就無法進(jìn)行網(wǎng)頁發(fā)布了。因此，站點(diǎn)的實(shí)質(zhì)就是硬盤上的一個(gè)目錄，網(wǎng)頁的所有文件都放在該目錄之中，創(chuàng)建站點(diǎn)就是在硬盤上建立一個(gè)目錄，把所有

55、的網(wǎng)頁及相關(guān)文件都放在里面，以便進(jìn)行網(wǎng)頁的制作與管理。啟動(dòng)Dreamweaver CS5，執(zhí)行“站點(diǎn)”“新建站點(diǎn)”菜單命令，彈出站點(diǎn)設(shè)置對象對話框，其中一些選項(xiàng)說明如下：站點(diǎn)名稱：輸入站點(diǎn)名稱，該名稱可以使用戶直接進(jìn)入定義為本地站點(diǎn)的文件夾中，建立好的站點(diǎn)會(huì)出現(xiàn)在“文件”面板中。本地站點(diǎn)文件夾：指定本地站點(diǎn)所使用的文件夾。設(shè)置完畢，單擊【確定】按鈕，新的站點(diǎn)就建立好了。知識點(diǎn)1-3 初步認(rèn)識Dreamweaver CS53. 管理已有站點(diǎn)對于已經(jīng)建立過的站點(diǎn)，可通過站點(diǎn)管理對話框進(jìn)行管理。包括新建站點(diǎn)、編輯站點(diǎn)、復(fù)制站點(diǎn)、刪除站點(diǎn)等。【實(shí)例1-1】打開所建立過的“班級”站點(diǎn)。操作方法1：啟動(dòng)D

56、reamweaver CS5，在文檔窗口中執(zhí)行“站點(diǎn)”“管理站點(diǎn)”菜單命令，選中需要打開的“班級”站點(diǎn)名稱，單擊【完成】按鈕，即可打開相應(yīng)站點(diǎn)。（操作演示）操作方法2：在文件面板中，打開下拉列表，單擊所需要的站點(diǎn)名稱“班級”，即可打開相應(yīng)站點(diǎn)。 （操作演示）知識點(diǎn)1-4 Dreamweaver文本編輯與格式化1文本的輸入（1） 文本的輸入網(wǎng)頁創(chuàng)建好后，就可以在頁面中輸入文字了，Dreamweaver CS5是一款可視化的網(wǎng)頁設(shè)計(jì)軟件，即在網(wǎng)頁中輸入什么樣的效果就可以在瀏覽器中原樣顯示。在網(wǎng)頁中輸入蠟筆小新中的臺詞，其效果如圖（“在網(wǎng)頁中輸入文字”）所示。其操作步驟如下（操作演示） 將光標(biāo)定位到

57、要輸入文字的空白區(qū)域。 輸入蠟筆小新臺詞。 如需換行，則在需換行的地方鍵入回車鍵。知識點(diǎn)1-4 Dreamweaver文本編輯與格式化在網(wǎng)頁中輸入文字 知識點(diǎn)1-4 Dreamweaver文本編輯與格式化1文本的輸入（2） 編輯區(qū)域的設(shè)置在網(wǎng)頁中輸入文字，插入圖像時(shí)，可以先設(shè)置整個(gè)網(wǎng)頁的可編輯區(qū)域，即文字或圖片與網(wǎng)頁的邊距?！緦?shí)例1-2】設(shè)置網(wǎng)頁邊距操作步驟如下： 在網(wǎng)頁任意位置，單擊鼠標(biāo)右鍵。 在彈出的快捷菜單中選擇“頁面屬性”，打開“頁面屬性”對話框。 在“頁面屬性”對話框中選擇“分類”列表中的“外觀(CSS)”。 在“外觀(CSS)”中設(shè)置左邊距，右邊距，上邊距，下邊距分別為100px,

58、(操作演示)。這樣就設(shè)置了整個(gè)頁面的可編輯區(qū)域，其效果如圖（“設(shè)置頁邊距后的網(wǎng)頁 ”）所示。知識點(diǎn)1-4 Dreamweaver文本編輯與格式化設(shè)置頁邊距后的網(wǎng)頁 知識點(diǎn)1-4 Dreamweaver文本編輯與格式化2字符格式化在網(wǎng)頁中輸入了蠟筆小新的臺詞后，需要為字符設(shè)置相應(yīng)的格式，以讓其顯的活潑與充滿樂趣。字符格式的設(shè)置主要是使用“文本”菜單中的各種命令或者使用“屬性面板”中的各種快捷方式?！皩傩悦姘濉狈譃镠TML與CSS兩種，如圖（設(shè)置HTML的“屬性面板”）和圖（設(shè)置CSS的“屬性面板”）所示。字符格式化主要是設(shè)置字體，字體大小，文字的粗細(xì)、傾斜及文字的顏色等。 設(shè)置HTML的“屬性”

59、面板 設(shè)置CSS的“屬性”面板知識點(diǎn)1-4 Dreamweaver文本編輯與格式化（1） 編輯字體要設(shè)置字體首先要選擇符合要求的字體，但在“屬性面板”中并沒有加載所有的字體，那么需要增加相應(yīng)的字體，【實(shí)例1-3】增加相應(yīng)的字體操作步驟如下： 選擇“屬性面板”中“字體”旁的默認(rèn)字體下拉列表，在彈出的下拉列表中選擇“編輯字體列表“，彈出”編輯字體列表“對話框（操作演示） 在“編輯字體列表”對話框中單擊按鈕，在“字體列表”區(qū)域中會(huì)出現(xiàn)“在以下列表中增加字體”項(xiàng)（如果原來已有“在以下列表中添加字體”可省略這一步）。 在“編輯字體列表”對話框中的“可用字體”區(qū)域中選擇一種字體，如“華文彩云”，然后單擊按

60、鈕，將選擇的字體增加到“選擇的字體”區(qū)域中，（操作演示） 要增加其它字體，重復(fù)，兩個(gè)步驟。 最后“在編輯字體列表”對話框中單擊“確定”按鈕。 最后在“屬性面板”的“字體“旁的下拉列表就出現(xiàn)了增加的字體，（操作演示）知識點(diǎn)1-4 Dreamweaver文本編輯與格式化（2） 設(shè)置字符格式在Dreamweaver CS5中，字符格式的設(shè)置一般要通過設(shè)定與選擇CSS目標(biāo)規(guī)則來完成。第一次使用某種字體、字號等格式時(shí)都要設(shè)置CSS目標(biāo)規(guī)則?！緦?shí)例1-4】設(shè)置“臘筆小新經(jīng)典臺詞”字符格式操作步驟如下： 選中要設(shè)置字體的文字。選擇“屬性面板”中“字體”旁邊的某種字體，如“華文彩云”，將出現(xiàn)新建CSS樣式對話