【正文】 ? 同時(shí)設(shè)置背景圖像和背景顏色的原因是當(dāng)網(wǎng)絡(luò)速度較慢時(shí)，背景圖像可能顯示遲緩，背景顏色將首先出現(xiàn)，讓瀏覽者明白這是有圖片的頁面，需要稍加等候。 操作步驟如下： （ 1）打開“頁面屬性”對話框，在“分類”中選中“外觀（ CSS）”選項(xiàng)，單擊“背景圖像”文本框右側(cè)的 【 瀏覽 】 按鈕，彈出“選擇圖像源文件”對話框，在“選擇圖像源文件”對話框中選擇一個(gè)圖像文件（例如 image/），單擊 【 確定 】 按鈕；或者在“背景圖像”文本框中直接輸入圖像文件名與路徑，（見操作演示）。（見操作演示）。然后按 【 Enter】 鍵確定。 任務(wù) 17 設(shè)置頁面屬性 【 子任務(wù) 171】 添加網(wǎng)頁文檔標(biāo)題“班級風(fēng)采” 網(wǎng)頁標(biāo)題非常重要，它可以幫助瀏覽者在瀏覽網(wǎng)頁時(shí)了解正在訪問的內(nèi)容，以及在歷史記錄和書簽列表中標(biāo)識(shí)頁面。操作步驟與前述新建 CSS規(guī)則類似），字號為 16。 【 子任務(wù) 161】 制作版權(quán)區(qū) 操作步驟如下： （ 1）將光標(biāo)置于末行起始點(diǎn)，執(zhí)行“插入”菜單“ HTML”下“水平線”命令。（見操作演示）。我們來自五湖四海，操著不同的口音，懷著青春的夢想！共同撐起同一片藍(lán)天，一起遨游知識(shí)的海洋。 （ 3）此時(shí)層處于選中狀態(tài)，通過拖動(dòng)控制點(diǎn)可以調(diào)整層的大小。 如圖所示。 （ 2）選中文字“班級檔案”，在屬性面板中單擊 CSS按鈕，出現(xiàn) CSS屬性面板。 【 子任務(wù) 141】 插入導(dǎo)航表格 操作步驟如下： （ 1）在水平分隔線下單擊鼠標(biāo)，出現(xiàn)光標(biāo)插入點(diǎn)。 （ 3）標(biāo)題圖像的下面出現(xiàn)一條水平分隔線，并處于選中狀態(tài)，在屬性面板中設(shè)置其屬性，如寬度、高度、對齊方式、陰影等。 （ 4）在指定文件夾中找到標(biāo)題圖像文件，選擇標(biāo)題圖像文件后，對話框右側(cè)將顯示該圖像的預(yù)覽圖，單擊 【 確定 】 按鈕，插入結(jié)束。例如，雙擊打開主頁文件。（見操作演示） 標(biāo)題圖像制作效果圖如下： 任務(wù) 13 制作并添加網(wǎng)頁標(biāo)題欄 【 子任務(wù) 132】 添加主頁標(biāo)題圖像“班級風(fēng)采” 操作步驟如下： （ 1）在 Dreamweaver應(yīng)用程序窗口中執(zhí)行“站點(diǎn)” → “管理站點(diǎn)”菜單命令，在彈出的對話框中選中需要打開的站點(diǎn)名稱。 （ 4）在畫布右邊用“文本”工具輸入“ Computer Multimedia” ，在屬性面板中設(shè)置：字體大小為 22，顏色為白色，字體為黑體。單擊 【 確定 】按鈕，進(jìn)入到 Firework主界面。（結(jié)果如 “建立網(wǎng)站新文件結(jié)果 ”圖所示） 任務(wù) 12 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn) 建立網(wǎng)站新文件結(jié)果 任務(wù) 13 制作并添加網(wǎng)頁標(biāo)題欄 【 子任務(wù) 131】 制作網(wǎng)頁標(biāo)題圖像 一個(gè)網(wǎng)頁通常有標(biāo)題部分，來訪者可以通過標(biāo)題了解網(wǎng)站的名稱及網(wǎng)站類型。 任務(wù) 12 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn) 【 子任務(wù) 124】 在“班級”站點(diǎn)中建立網(wǎng)頁文件 操作步驟如下： ① 打開站點(diǎn)窗口，在文件面板上單擊“展開”按鈕即可打開“站點(diǎn)”窗口?；驁?zhí)行“文件” → “新建文件”菜單命令，在彈出的“新建文檔”對話框中選擇“基本頁”或“ HTML”，單擊 【 創(chuàng)建 】 按鈕。 任務(wù) 12 創(chuàng)建班級風(fēng)采網(wǎng)站站點(diǎn) 【 子任務(wù) 123】 在“班級”站點(diǎn)中建立站點(diǎn)子文件夾 在已建好的網(wǎng)站中，一般還需要建立一些子文件夾，用于歸類存入網(wǎng)站中的圖像、網(wǎng)頁、動(dòng)畫、模板等文件。 操作步驟如下： （ 1）啟動(dòng) Dreamweaver CS5 （ 2）執(zhí)行“站點(diǎn)”菜單中的“新建站點(diǎn)”命令，彈出“站點(diǎn)設(shè)置對象”對話框。 （ 4）在新文件夾上單擊右鍵，選擇“重命名”選項(xiàng)，在英文輸入法狀態(tài)下輸入站點(diǎn)名稱。 設(shè)計(jì)網(wǎng)頁盡寸：選擇 1024 768規(guī)格 ,實(shí)際尺寸為： 980 ***， (***代表 768的倍數(shù) )。右邊寬，存放班級簡介等內(nèi)容。 設(shè)計(jì)網(wǎng)頁結(jié)構(gòu)：網(wǎng)站主頁規(guī)劃的結(jié)構(gòu)下頁圖所示。 本項(xiàng)目知識(shí)目標(biāo)： 1 熟悉網(wǎng)站規(guī)劃設(shè)計(jì)的基本知識(shí)。項(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 CS中文 Fireworks CS5建立網(wǎng)站并制作網(wǎng)頁的全過程，并介紹了網(wǎng)站規(guī)劃設(shè)計(jì)及應(yīng)用上述軟件進(jìn)行網(wǎng)頁制作的相關(guān)知識(shí)。 2 掌握中文 Dreamweaver CS5進(jìn)行網(wǎng)頁設(shè)計(jì)制作的相關(guān)知識(shí)。網(wǎng)站的主頁可采用簡單明了的板塊結(jié)構(gòu)：采用上中下結(jié)構(gòu)。下邊為版權(quán)區(qū)。寬度最好限定在一個(gè)幅面內(nèi)，長度一般是不超過 3個(gè)版面。例如輸入 “ CLASS”，然后在空白處單擊確定。 （ 3）在菜單中選擇“站點(diǎn)”選項(xiàng)， 在“站點(diǎn)名稱”文本框中輸入：“班級”，在“本地站點(diǎn)文件夾”中輸入E:\CLASS（或單擊瀏覽器按鈕，選擇“ E:\CLASS”）作為本地根文件夾。 操作步驟如下 ： （ 1）在文件面板中選擇“站點(diǎn) 班級（ E:\class）”文件夾，單擊鼠標(biāo)右鍵，在快捷菜單中選擇“新建文件夾”選項(xiàng)。編輯完成網(wǎng)頁內(nèi)容后，以適當(dāng)?shù)奈募Q保存到相應(yīng)站點(diǎn)文件夾下（如保存到 E:\class\html下面）。 ② 選中“站點(diǎn) 班級（ E:\class）”文件夾，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件”命令。標(biāo)題部分可以是文本，也可以是圖像。（見操作演示） （ 2）在畫面中間用“文本”工具輸入“班級風(fēng)采”，在屬性面板中設(shè)置：字體大小為 80，顏色為淡蘭色（ 00FFFF），字體為隸書。 （ 5）單擊保存按鈕，給出保存位置（如 E:\class\image）及文件名（擴(kuò)展名為 .png），以便以后修改。例如：班級。首頁文件打開，此時(shí)是空白頁。 任務(wù) 13 制作并添加網(wǎng)頁標(biāo)題欄 【 子任務(wù) 133】 添加水平分割線 為了將標(biāo)題區(qū)與正文內(nèi)容分隔開，通常在標(biāo)題下面插入一條水平分隔線。這里設(shè)置寬度為 980，陰影。 （ 2）執(zhí)行“插入”菜單中“表格”命令，或在插入面板上單擊“常用”工具欄中的 【 表格 】 按鈕，彈出表格對話框，設(shè)置“行數(shù)”為 7，“列數(shù)”為 1，“寬度”為 25，單位為“百分比”，（見操作演示） （ 3）單擊 【 確定 】 按鈕，表格插入。（見操作演示） （ 3）單擊字體大小中的下拉按鈕，第一次使用字體設(shè)置會(huì)出現(xiàn)“新建樣式規(guī)則”對話框，“輸入選擇器名稱”為 font1，“選擇器類型”為“復(fù)合選擇器（基于選擇內(nèi)容）”，“選擇定義規(guī)則的位置”為“僅限該文檔”，（見操作演示） （ 4）單擊“確定”按鈕，在屬性面板中設(shè)置其字體為默認(rèn)、大小為 1對齊方式 為居中對齊。 任務(wù) 14 設(shè)置導(dǎo)航欄 設(shè)置導(dǎo)航欄效果圖 任務(wù) 15 設(shè)置網(wǎng)頁主體內(nèi)容 為使網(wǎng)頁內(nèi)容設(shè)置更靈活，可以借助“層”來定位文字區(qū)域。將鼠標(biāo)放在層的邊緣線上，鼠標(biāo)呈“十字”箭頭時(shí)，拖動(dòng)鼠標(biāo)可以移動(dòng)層的位置。讓我們揚(yáng)帆出海，勝利起航。 （ 3）單擊“確定”按鈕后，文本內(nèi)容將按 line1定義呈現(xiàn)。出現(xiàn)一條水平分隔線，并處于選中狀態(tài)，在屬性面板中設(shè)置其屬性，如寬度、高度、對齊方式、陰影等。設(shè)置效果如圖“版權(quán)區(qū)的設(shè)置”所示。 如果頁面沒有標(biāo)題，則網(wǎng)頁將作為“無標(biāo)題文檔”在文檔窗口、瀏覽器窗口、歷史記錄和書簽列表中出現(xiàn)（見操作演示） 在 Dreamweaver中有多種方法為網(wǎng)頁添加文檔標(biāo)題。如果工具欄沒有顯示，可通過“查看”菜單打開工具欄。 任務(wù) 17 設(shè)置頁面屬性 【 子任務(wù) 172】 設(shè)置網(wǎng)頁背景圖像和顏色 使用“頁面屬性”對話框可以設(shè)置網(wǎng)頁的背景圖像或背景顏色。 （ 2）單擊“頁面屬性”對話框中的 【 應(yīng)用 】 按鈕，背景圖像將應(yīng)用到網(wǎng)頁中。 ? 背景圖像的文件名不能使用中文名稱。 在“頁面屬性”對話框中既可以設(shè)置普通文本的默認(rèn)顏色與字體，也可以設(shè)置超級鏈接、已訪問鏈接和活動(dòng)鏈接的默認(rèn)顏色與字體。 （ 3）單擊“鏈接”、“已訪問鏈接”、“活動(dòng)鏈接”右側(cè)的按鈕，彈出顏色面板選項(xiàng)，分別設(shè)置鏈接顏色（例如黑色 000000）、已訪問鏈接（例如紅色 FF0000）、活動(dòng)鏈接的顏色（例如蘭色 0000FF）。 左邊距： 0（文檔中左側(cè)邊緣的空白數(shù)值）。 任務(wù) 18 制作子網(wǎng)頁 這里以組織機(jī)構(gòu)子網(wǎng)頁制作為例，簡述其制作過程。設(shè)置字體為黑體、字號為 1居中對齊，層背景色為 999900等。 任務(wù) 18 制作子網(wǎng)頁 組織機(jī)構(gòu)子網(wǎng)頁核心部分效果圖 任務(wù) 19 建立網(wǎng)頁之間的鏈接 【 子任務(wù) 191】 建立文字導(dǎo)航的超級鏈接 超級鏈接可以是一段文本、一幅圖像或者其他的網(wǎng)頁元素。單擊選中與“組織機(jī)構(gòu)”相鏈接的網(wǎng)頁文件 ，單擊 【 確定 】 按鈕后，在屬性面板的鏈接框內(nèi)顯示出鏈接的網(wǎng)頁文件及路徑。 任務(wù) 19 建立網(wǎng)頁之間的鏈接 “選擇文件”對話框 任務(wù) 110 瀏覽網(wǎng)頁 一個(gè)網(wǎng)頁制作完成后，可以在瀏覽器中預(yù)覽，并根據(jù)預(yù)覽效果再對網(wǎng)頁進(jìn)行調(diào)整。 任務(wù) 111 保存網(wǎng)頁 隨時(shí)保存文件是編輯任何文檔時(shí)應(yīng)該有的良好習(xí)慣。 任務(wù) 111 保存網(wǎng)頁 “另存為”對話框 班級風(fēng)采網(wǎng)站制作相關(guān)知識(shí) 知識(shí)點(diǎn) 11 網(wǎng)頁與網(wǎng)站的概念 ? 1. 網(wǎng)頁的概念 ? Web，直譯過來就叫“網(wǎng)”，它的含義是通過超級鏈接將各種文檔連接起來，形成一個(gè)大規(guī)模的信息集合。網(wǎng)頁是組成網(wǎng)站的特殊成分，圖像、聲音、和視頻等文件均需要通過網(wǎng)頁才能讓瀏覽者看到。我們個(gè)人做的網(wǎng)站雖然規(guī)模上不能和大站相比，但它在結(jié)構(gòu)上也是完全獨(dú)立的。如百度、一搜、 Google等。如：阿里巴巴、易趣等。小型企事業(yè)網(wǎng)站或個(gè)人網(wǎng)站大多采用這種形式。 知識(shí)點(diǎn) 11 網(wǎng)頁與網(wǎng)站的概念 ? 3. 網(wǎng)頁是如何被瀏覽的 ? 網(wǎng)頁瀏覽是通過瀏覽器來實(shí)現(xiàn)的，瀏覽器是專門用于瀏覽網(wǎng)頁的軟件，常用的瀏覽器軟件有 Microsoft的 IE和Netscape的 Navigator等。 知識(shí)點(diǎn) 11 網(wǎng)頁與網(wǎng)站的概念 ? 4. 網(wǎng)頁制作常用術(shù)語 ? （ 1） HTML文件 ? 用超文本標(biāo)記語言編寫的超文本文件稱為 HTML（ HyperText Markup Language）文件，它能不受各種操作系統(tǒng)限制，獨(dú)立地運(yùn)行于各種操作系統(tǒng)平臺(tái)之上。遠(yuǎn)程計(jì)算機(jī)在收到請求后，將所需要的瀏覽內(nèi)容（即網(wǎng)頁）發(fā)送給本地計(jì)算機(jī)。 ? IP地址是一個(gè) 32位的二進(jìn)制數(shù)， IP地址的寫法是按 8位為一組分成 4組，組與組之間用小數(shù)點(diǎn)分隔，每組數(shù)值用十進(jìn)制數(shù)表示。 ? 域名： Inter規(guī)定了一套命令機(jī)制，稱為域名系統(tǒng) DNS（ Domain Name System）。其優(yōu)點(diǎn)是用字符串來指向所需的信息，從而進(jìn)行資料的檢索。還可以用 FTP上傳到達(dá)遠(yuǎn)程的主機(jī)中。多臺(tái)虛擬主機(jī)共亨真實(shí)主機(jī)的資源，這樣就可以把網(wǎng)絡(luò)的開銷費(fèi)用均攤到每臺(tái)虛擬主機(jī)上。 ① 企業(yè)級商業(yè)網(wǎng)站的發(fā)布 如果企業(yè)有足夠的資金和技術(shù)支持，可以考慮創(chuàng)建自己的網(wǎng)絡(luò)中心。 租賃虛擬主機(jī)： 如果網(wǎng)站的內(nèi)容不是很多，也不需要大量的服務(wù)器空間支持?jǐn)?shù)據(jù)庫，可以采用這種發(fā)布方式，也就是租用 ISP主機(jī)服務(wù)器的一定空間來發(fā)布網(wǎng)站，一年需要支付少量費(fèi)用，就可以建立一個(gè)功能比較強(qiáng)大的網(wǎng)站。 ISP的人員還可代為維護(hù)，這樣既可以節(jié)省相當(dāng)?shù)木W(wǎng)絡(luò)管理人員和許多通信設(shè)備，又能保證網(wǎng)站的性能要求。但現(xiàn)在較好的免費(fèi)主頁空間不多，且一般不支持 ASP、 JSP、 CGI等高級功能。 ? 超媒體文件就是一種文字、影像、圖片、動(dòng)畫、聲音綜合在一起的文件。 ? （ 9）主頁 ? 網(wǎng)站向用戶提供的最初起始頁面叫主頁（ Homepage），也稱為首頁。網(wǎng)站設(shè)計(jì)制作主要分為網(wǎng)站規(guī)劃、網(wǎng)站制作、后期維護(hù)三個(gè)階段。 ? （ 1） 確定網(wǎng)站的主題與名稱 ? 網(wǎng)站的主題是指建立的網(wǎng)站所要包含的主要內(nèi)容。 ? 網(wǎng)站的名稱起著很重要的作用，它在很大程度上決定了整個(gè)網(wǎng)站的定位。規(guī)劃網(wǎng)站時(shí)，首先應(yīng)把網(wǎng)站的內(nèi)容列舉出來，根據(jù)內(nèi)容列出一個(gè)結(jié)構(gòu)化的藍(lán)圖，根據(jù)實(shí)際情況設(shè)計(jì)各個(gè)頁面之間的鏈接。 ? 欄目不要設(shè)置太多，一般不超過 10個(gè)。 ? ③ 顏色搭配 ? 合理的應(yīng)用色彩是非常關(guān)鍵的，不同的色彩搭配產(chǎn)生不同的效果，并能影響瀏覽者的情緒。如果是企業(yè)網(wǎng)站，最好是在企業(yè)商標(biāo)的基礎(chǔ)上設(shè)計(jì)，保持企業(yè)形象的整體統(tǒng)一。 ? 版面布局一般應(yīng)遵循的原則是：突出重點(diǎn)、平衡和諧，將網(wǎng)站標(biāo)志（ Logo）、主菜單等最重要的模塊放在突出的位置，然后再排放次要模塊（例如搜索、計(jì)數(shù)器、版權(quán)信息、 Email地址等）。圖片不僅要好看，還應(yīng)在保證圖片質(zhì)量的情況下盡量縮小圖片的大?。醋止?jié)數(shù)）。 知識(shí)點(diǎn) 12 網(wǎng)站設(shè)計(jì)與制作流程 ? 2 網(wǎng)站制作 ? （ 1） 制作網(wǎng)站 ? 制作網(wǎng)站主要包括以下步驟： ? ① 建立本地站點(diǎn)。 ? ③ 向站點(diǎn)添加所需要的空網(wǎng)頁。 ? ⑥ 向網(wǎng)頁中插入文本、圖像、動(dòng)畫等對象。 ? 制作完畢的網(wǎng)頁，必須進(jìn)行測試。 知識(shí)點(diǎn) 12 網(wǎng)站設(shè)計(jì)與制作流程 ? 3后期維護(hù) ? （ 1） 推銷網(wǎng)站 ? 網(wǎng)頁上傳后，需要不斷地進(jìn)行宣傳，以便讓更多的朋友認(rèn)識(shí)它，從而提高網(wǎng)站的訪問率與知名度。 知識(shí)點(diǎn) 13 初步認(rèn)識(shí) Dreamweaver CS5 ? 1. 中文 Dreamweaver CS5工作環(huán)境 ? 中文 Dreamweaver CS5提供可視化的