計(jì)算機(jī)網(wǎng)絡(luò)應(yīng)用技能教程課件第6章 網(wǎng)頁制作基礎(chǔ)

返回主目錄第5章網(wǎng)絡(luò)安全技術(shù)6.1網(wǎng)頁制作的基礎(chǔ)知識6.2認(rèn)識DreamWeaver6.3流媒體開發(fā)技術(shù)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)6.4制作“我的大學(xué)”個人主頁返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)工作任務(wù)：認(rèn)識與網(wǎng)頁制作相關(guān)的一些基本概念及網(wǎng)頁的構(gòu)成元素；認(rèn)識網(wǎng)站設(shè)計(jì)開發(fā)的流程。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.1.1任務(wù)一認(rèn)識網(wǎng)頁與網(wǎng)站

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．網(wǎng)頁與網(wǎng)站2．Web服務(wù)器與瀏覽器3．統(tǒng)一資源定位器（URL）4．網(wǎng)頁的基本元素返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)網(wǎng)頁也稱為Web頁，是人們通過瀏覽器瀏覽網(wǎng)絡(luò)資源時看到的頁面。每個網(wǎng)頁實(shí)際是一個文件，它存放在網(wǎng)絡(luò)服務(wù)器中。網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與存取，當(dāng)用戶在瀏覽器輸入網(wǎng)址后，經(jīng)過域名系統(tǒng)的解析，再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，展示到用戶屏幕上。網(wǎng)頁通常由文字、表格、圖片、聲音、視頻及各種功能按鈕等組成。人們看到的網(wǎng)頁主要是以HTML擴(kuò)展名結(jié)尾的表態(tài)網(wǎng)頁文件。還有其他類型的動態(tài)網(wǎng)頁文件，如CGI、ASP、PHP、JSP文件等。網(wǎng)頁與網(wǎng)站返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)網(wǎng)站是存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體，它包含一個或多個網(wǎng)頁，通過站內(nèi)鏈接把這些網(wǎng)頁有機(jī)結(jié)合起來，構(gòu)成一個內(nèi)容完成、資源豐富的信息庫。網(wǎng)站的第一個頁面，通常稱為首面或主頁，它是整個網(wǎng)站的起始點(diǎn)和匯總點(diǎn)，是用戶開始瀏覽站點(diǎn)的“入口處”。一個網(wǎng)站主要有由域名（俗稱網(wǎng)址），網(wǎng)站空間和網(wǎng)站源程序三部分構(gòu)成。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)Web技術(shù)的獨(dú)特之處是采用超鏈接和多媒體信息。Web服務(wù)器使用超文本標(biāo)記語言描述網(wǎng)絡(luò)的資源，創(chuàng)建網(wǎng)頁，各種網(wǎng)站資源被保存在服務(wù)器上，以供Web瀏覽器閱讀。Web服務(wù)器管理著網(wǎng)絡(luò)中的各種資源，其基本功能是提供網(wǎng)絡(luò)通信服務(wù)、管理和提供網(wǎng)絡(luò)共享資源。Web瀏覽器（WebBrowser）是一個用于文檔檢索和顯示的客戶應(yīng)用程序，并通過協(xié)議與Web服務(wù)器相連。目前，流行的InternetExplorer和NetscapeNavigator除提供基本的文檔檢索、顯示和導(dǎo)航特性外，還支持HTML的高級顯示（如表和幀）以及ActiveX、Java、JavaScript等特性。Web服務(wù)器與瀏覽器返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)是“UniformResourceLocator”的縮寫，即通常所說的網(wǎng)址，是指信息資源在Internet上的惟一地址，它提供在Web上訪問資源的惟一方法和路徑。統(tǒng)一資源定位器從左到右主要由Internet資源類型（WWW客戶程序用來操作的工具，如“http：//”表示W(wǎng)WW服務(wù)器，“ftp：//“表示FTP服務(wù)器，而“new：”表示Newgroup新聞組。）、服務(wù)器地址（指出WWW頁所在的服務(wù)器域名）、資源文件的位置（指明服務(wù)器上某資源的位置）組成。例如，黑龍江畜牧獸醫(yī)職業(yè)學(xué)院網(wǎng)址統(tǒng)一資源定位器（URL）返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)/index.asp中，http代表所使用的資源類型，服務(wù)器地址，index.asp為要訪問的主頁的路徑和文件名。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)設(shè)計(jì)網(wǎng)頁的目的主要是發(fā)布信息，超級鏈接是Web的核心，它將萬維網(wǎng)中無數(shù)的網(wǎng)頁鏈接在一起。網(wǎng)頁中包含多種元素，如圖6-1所示。文本：是網(wǎng)頁中常見的元素，是用來向用戶傳達(dá)信息的媒介。文字雖然不如圖像那樣能夠很快引起瀏覽者的注意，但卻能準(zhǔn)確地表達(dá)消息的內(nèi)容和含義，為了克服文字固有的缺點(diǎn)，人們可以設(shè)置網(wǎng)頁文本的一些屬性，如字體、字號、顏色等，突出顯示重要的內(nèi)容。此外，用戶還可以在網(wǎng)頁中設(shè)計(jì)各種各樣的樣式，來清晰表達(dá)一系列項(xiàng)目。網(wǎng)頁的基本元素返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)圖片：圖片在網(wǎng)頁中具有提供信息、展示作品、裝飾網(wǎng)頁、表達(dá)個人情調(diào)和風(fēng)格的作用。網(wǎng)頁中的圖片是GIF、JPEG、PNG等壓縮格式的圖片。在網(wǎng)頁中使用最廣泛的是JPEG和GIF格式，這倆種格式的圖片都可以在不同的操作系統(tǒng)支持的瀏覽器上顯示。動畫：網(wǎng)頁中使用動畫可使網(wǎng)頁效果更加突出，充分利用動畫的表現(xiàn)力使得網(wǎng)頁更加令人賞心悅目，同時，利用動畫也會增加網(wǎng)頁的交互功能。目前網(wǎng)頁中使用的動畫主要有GIF、Flash等。因Flash生成的文件較小，傳輸速度快，可以實(shí)現(xiàn)實(shí)時播放流，而不必等等整個文件傳輸完后傳輸完后再進(jìn)行播放，該動畫流暢，功能較強(qiáng)，已成為業(yè)界動畫標(biāo)準(zhǔn)。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.1.2任務(wù)二網(wǎng)站設(shè)計(jì)與開發(fā)流程

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．定義站點(diǎn)2．建立網(wǎng)站結(jié)構(gòu)3．確定網(wǎng)站的主題和建立網(wǎng)站結(jié)構(gòu)風(fēng)格4．設(shè)計(jì)網(wǎng)站的欄目和版塊5．設(shè)計(jì)和制作主頁及其他網(wǎng)頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)開發(fā)網(wǎng)站的首要工作就是要定義該站點(diǎn)。在該項(xiàng)工作中，要明確建立網(wǎng)站的目的，在站點(diǎn)建立的開始，要為站點(diǎn)制訂相應(yīng)的目標(biāo)，確定網(wǎng)站提供的內(nèi)容，以及搜集網(wǎng)站資料。定義站點(diǎn)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)在此階段中，要規(guī)劃出網(wǎng)站的外觀及其工作方式。首先建立網(wǎng)站結(jié)構(gòu)流程圖，在該流程圖中包括網(wǎng)站的所有關(guān)鍵頁面及其與其他網(wǎng)頁的關(guān)系，技術(shù)要點(diǎn)和主要的鏈接也應(yīng)在其中給出。建立網(wǎng)站的結(jié)構(gòu)時，將自己所希望的網(wǎng)頁內(nèi)容全部加入進(jìn)去，然后再和其他參與網(wǎng)站開發(fā)的人員一起研究、討論，融入其他人員的意見。最后將網(wǎng)站結(jié)構(gòu)圖確定下來。建立網(wǎng)站結(jié)構(gòu)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)設(shè)計(jì)一個網(wǎng)站，首先遇到的問題就是如何定位網(wǎng)站的主題。網(wǎng)站的主題也就是網(wǎng)站的題材。網(wǎng)站的題材主要有網(wǎng)上求職、網(wǎng)上聊天/即時信息、網(wǎng)上社區(qū)、娛樂、計(jì)算機(jī)技術(shù)、教育、生活等大類，每個大類都可以繼續(xù)細(xì)分，如娛樂類可再分為明星新聞、在線播放、在線游戲、下載電影等。還有一些是專業(yè)的題材，如中醫(yī)、天氣預(yù)報(bào)等，這里不再細(xì)分。對于題材的選擇，應(yīng)注意以下3個問題：確定網(wǎng)站的主題和建立網(wǎng)站結(jié)構(gòu)風(fēng)格返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．主題要小而精。定位要小，內(nèi)容要精。不可以幻想制作一個包羅萬象的站點(diǎn)，而更應(yīng)該突出特色。網(wǎng)站的最大特點(diǎn)就是新和快，目前最熱門的個人主頁都是天天更新甚至幾小時更新一次。網(wǎng)絡(luò)上的“主題站”比“萬全站”更受人們喜愛。2．題材最好是你自己擅長或者喜愛的內(nèi)容。例如，如果是平面設(shè)計(jì)人員，就可以建立一個平面設(shè)計(jì)之家網(wǎng)站；如果是一個教師，可以建立一個教學(xué)網(wǎng)站，及時反映教學(xué)情況和進(jìn)行實(shí)時教學(xué)。這樣在制作時，才會激發(fā)個人的熱情，才不會覺得無聊或者力不從心，才能設(shè)計(jì)制作出優(yōu)秀的網(wǎng)站。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)網(wǎng)站的主題和風(fēng)格確定完畢，在收集和組織了許多相關(guān)的資料內(nèi)容后，動手制作網(wǎng)站之前，一定要做好網(wǎng)站的規(guī)劃，確定合理的欄目版塊。欄目的實(shí)質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細(xì)考慮，合理安排。網(wǎng)站欄目安排一定記住要緊扣主題，同時要設(shè)一個最近更新或網(wǎng)站指南欄目、設(shè)定一個可以雙向交流的欄目、設(shè)一個下載或常見問題回答欄目。設(shè)計(jì)網(wǎng)站的欄目和版塊返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)版塊比欄目的概念要大一些，每個版塊都有自己的欄目。例如中國教育和科研計(jì)算機(jī)網(wǎng)站點(diǎn)分中國教育、教育資源、科研發(fā)展、教育信息化等版塊，每個版塊下面有各有自己的主欄目。設(shè)置版塊應(yīng)注意各版塊要有相對獨(dú)立性，各版塊要有相互關(guān)聯(lián)，版塊的內(nèi)容要圍繞站點(diǎn)主題。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)主頁的制作者需要先繪制一張草圖，草圖應(yīng)包括網(wǎng)站的標(biāo)志、廣告條、菜單、導(dǎo)航欄等一些基本元素。草圖設(shè)計(jì)好后，就可以開始動手制作主頁了。主頁制作好以后，就開始按著目錄結(jié)構(gòu)設(shè)計(jì)和制作其他頁面，在制作中其他頁面要和主頁保持相同的風(fēng)格，要有返回主頁的鏈接，目錄結(jié)構(gòu)不要超過三層。設(shè)計(jì)和制作主頁及其他網(wǎng)頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)工作任務(wù)：安裝DreamWeaver8，啟動后熟悉其工作界面和編輯環(huán)境；認(rèn)識靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的基本概念及二者的區(qū)別；在網(wǎng)頁中輸入和編輯文本，插入圖象，插入影片和添加聲音，插入和編輯表格；創(chuàng)建和使用層；布局表格和單元格；在網(wǎng)頁中添加和刪除框架，設(shè)置框架屬性；認(rèn)識CSS的概念，創(chuàng)建CSS樣式；創(chuàng)建與應(yīng)用表單。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.2.1任務(wù)一熟悉DreamWeaver的工作環(huán)境

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)工作任務(wù)：安裝DreamWeaver8，啟動后熟悉其工作界面和編輯環(huán)境；認(rèn)識靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的基本概念及二者的區(qū)別；在網(wǎng)頁中輸入和編輯文本，插入圖象，插入影片和添加聲音，插入和編輯表格；創(chuàng)建和使用層；布局表格和單元格；在網(wǎng)頁中添加和刪除框架，設(shè)置框架屬性；認(rèn)識CSS的概念，創(chuàng)建CSS樣式；創(chuàng)建與應(yīng)用表單。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．安裝DreamWeaver82．熟悉DreamWeaver8的工作界面返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．運(yùn)行DreamWeaver8安裝程序，出現(xiàn)“歡迎使用MacromediaDreamWeaver8InstallShieldWizard”界面2．單擊【下一步】按鈕，打開“許可證協(xié)議”對話框，如圖6-3所示。3．單擊【下一步】按鈕，彈出如圖6-4所示的“目標(biāo)文件夾和快捷方式”對話框，單擊【更改】按鈕，彈出如圖

6-5所示的“更改當(dāng)前目的地文件夾”對話框，選擇D盤為安裝路徑，單擊【確定】按鈕繼續(xù)。4．單擊【下一步】按鈕，彈出“默認(rèn)編輯器”對話框安裝DreamWeaver8返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)5．單擊【下一步】按鈕，彈出“已做好安裝程序的準(zhǔn)備”對話框，單擊【安裝】按鈕開始安裝程序。安裝完成后彈出“InstallShieldWizard完成”對話框，如圖6-7所示。單擊【完成】按鈕，完成程序的安裝。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．執(zhí)行【開始】→【所有程序】→【Macromedia】→【MacromediaDreamWeaver8】命令，啟動DreamWeaver軟件。（如果是第一次啟動，將會出現(xiàn)“工作區(qū)設(shè)置”對話框，如圖6-8所示，對于初學(xué)者，建議使用默認(rèn)的“設(shè)計(jì)者”布局。）2．選擇設(shè)計(jì)器工作區(qū)，彈出“選擇建立文件類型”窗口熟悉DreamWeaver8的工作界面返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.2.2任務(wù)二熟悉DreamWeaver的編輯環(huán)境

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)主菜單：使用菜單欄基本上能夠?qū)崿F(xiàn)絕大部分功能。其功能包含在“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“命令”、“站點(diǎn)”、“窗口”和“幫助”菜單中。插入工具欄：包含將各種類型的“對象”插入到文檔中的按鈕。每個對象都是一段HTML代碼，允許在插入時設(shè)置不同的屬性。默認(rèn)的“插入”工具欄為“常用”工具欄，單擊“插入”按鈕，彈出下拉菜單，在下拉菜單中可以選擇其他工具欄。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)文檔工具欄：包含視圖轉(zhuǎn)換按鈕，這些按鈕可在文檔的不同視圖間快速切換。包括三個文檔視圖，分別是“代碼”視圖、“設(shè)計(jì)”視圖、“代碼和設(shè)計(jì)”視圖，。屬性面板：用于顯示所選中的網(wǎng)頁元素的屬性，并且可以在屬性面板上修改。選擇不同的網(wǎng)頁元素，屬性面板所顯示的內(nèi)容也有所不同。文檔窗口：用于顯示創(chuàng)建或編輯的文檔。有三種顯示模式，即設(shè)計(jì)視圖、代碼視圖、設(shè)計(jì)和代碼視圖，用戶可以根據(jù)需要使用文檔工具欄中的視圖按鈕隨意切換顯示模式。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.2.3任務(wù)三區(qū)別靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．靜態(tài)網(wǎng)頁2．動態(tài)網(wǎng)頁3．二者區(qū)別返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)靜態(tài)網(wǎng)頁是相對于動態(tài)網(wǎng)頁而言，是指沒有后臺數(shù)據(jù)庫、不含程序和不可交互的網(wǎng)頁，常見的擴(kuò)展名為.htm、.html、.shtml、.xml，在靜態(tài)網(wǎng)頁上也可以出現(xiàn)各種動態(tài)的效果，如.gif格式的動畫、Flash動畫和滾動字幕等。靜態(tài)網(wǎng)頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)動態(tài)網(wǎng)頁是指網(wǎng)頁內(nèi)含有程序代碼，并會被服務(wù)器端執(zhí)行的網(wǎng)頁，常見的擴(kuò)展名為.asp、.php、.jsp。靜態(tài)網(wǎng)頁是設(shè)計(jì)者做好的固定的網(wǎng)頁。動態(tài)網(wǎng)頁就是可以進(jìn)行交互的網(wǎng)頁，它可以根據(jù)不同用戶的操作作出不同的反映。把用戶的不同的操作發(fā)送到服務(wù)器后用程序代碼進(jìn)行處理。動態(tài)網(wǎng)頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)別在于Web服務(wù)器對它們的處理方式不同。當(dāng)Web服務(wù)器接收到對靜態(tài)網(wǎng)頁的請求時，服務(wù)器直接將該頁發(fā)送給客戶瀏覽器，不進(jìn)行任何處理。如果接收到對動態(tài)網(wǎng)頁的請求，則從Web服務(wù)器中找到該文件，并將它傳遞給一個稱為應(yīng)用程序服務(wù)器的特殊軟件擴(kuò)展，由它負(fù)責(zé)解釋和執(zhí)行網(wǎng)頁，將執(zhí)行后的結(jié)果傳遞給客戶瀏覽器。動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量。采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊、用戶登錄、搜索查詢、用戶管理、訂單管理等。動態(tài)網(wǎng)頁并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁文件，只有當(dāng)用戶請求時服務(wù)器才返回一個完整的網(wǎng)頁。二者區(qū)別返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.2.4任務(wù)四網(wǎng)頁中文本與多媒體的處理

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．創(chuàng)建文檔并設(shè)置屬性2．處理網(wǎng)頁中的文本3．處理網(wǎng)頁中的圖像4．添加聲音5．插入Flash影片6．創(chuàng)建與管理超級鏈接返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.2.5任務(wù)五網(wǎng)頁布局技術(shù)

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．插入并編輯表格2．創(chuàng)建與使用層3．布局表格和布局單元格返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)插入表格：在文檔窗口中，將光標(biāo)放在需要創(chuàng)建表格的位置，單擊【常用】快捷欄中的表格按鈕，彈出【表格】對話框，指定表格的屬性后，在文檔窗口中插入設(shè)置的表格。選擇單元格對象：選擇整個表格：把鼠標(biāo)放在表格邊框的任意處，當(dāng)出現(xiàn)這樣的標(biāo)志時單擊即可選中整個表格，或在表格內(nèi)任意處單擊，然后在狀態(tài)欄選中<table>標(biāo)簽即可。選中某一單元格：按住Ctrl鍵，鼠標(biāo)在需要選中的單元格單擊即可。插入并編輯表格返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．將插入點(diǎn)放置在要創(chuàng)建層的地方。2．執(zhí)行【插入】→【布局對象】→【層】命令，在文檔中創(chuàng)建一個層，并在層中輸入文本“Hello”。3．選中層中文本，在文本的屬性面板中單擊居中對齊按按鈕，在【大小】下拉列表框中輸入70。4．選擇該層，在層的屬性面板的“寬”文本框中輸入300，“高”文本框中輸入80。創(chuàng)建與使用層返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)5．執(zhí)行【編輯】→【復(fù)制】命令，然后單擊文檔，執(zhí)行【編輯】→【粘貼】命令，這樣就制作出了兩個相同的層。6．選擇第一個層中的文本，將文本的屬性面板中的【文本顏色】設(shè)置為#99999。7．選擇其中任意一個層，用方向鍵將該層移動到適當(dāng)?shù)奈恢谩?．保存并預(yù)覽網(wǎng)頁。創(chuàng)建與使用層返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．單擊【布局】切換到布局視圖，激活【布局表格】和【布局單元格】按紐。2．單擊插入欄【布局】分類中的【繪制布局單元格】按鈕，將光標(biāo)指向要繪制單元格的位置，然后拖動鼠標(biāo)創(chuàng)建布局單元格。布局表格和布局單元格返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.2.6任務(wù)六應(yīng)用框架

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．增加新框架2．刪除框架3．框架屬性返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)按住Ctrl鍵，將鼠標(biāo)放在框架邊框上，當(dāng)鼠標(biāo)變?yōu)樯舷录^時，可把邊框拖到一個新位置，當(dāng)松開鼠標(biāo)按鈕時，一個新的空白內(nèi)容的框架就形成了。增加新框架返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)單擊該框架，執(zhí)行【框架】→【刪除框架】命令即可。刪除框架返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．選中框架，執(zhí)行【框架】→【框架屬性】，則彈出【框架屬性】對活框。2．在對話框的【名稱】文本框中輸入框架名；在【選項(xiàng)】區(qū)域中，若選中【在瀏覽器中可以調(diào)大小】復(fù)選框，則客戶在瀏覽站點(diǎn)時，可重新定義框架尺寸，通過在【顯示滾動條】下拉列表框中選擇不同的描述項(xiàng)，設(shè)置讓滾動條是否出現(xiàn)。3．在【框架大小】區(qū)域中，設(shè)置框架大小，定義一個絕對像素值或相對于瀏覽器窗口的百分比，若要用瀏覽器來設(shè)置相對于該頁面中框架的尺寸，選【相對】；在【邊距】區(qū)域中，設(shè)置內(nèi)容頁面與框架邊框分隔的像素?cái)?shù)值。修改框架屬性返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)4．在【原始網(wǎng)頁】文本框中輸入一個新的頁面名字或URL。5．執(zhí)行【框架網(wǎng)頁】命令，則彈出【網(wǎng)頁屬性】對話框。6．在該對話框的【框架】選項(xiàng)卡中，在【框架間距】文本框中，可輸入以像素為單位的邊框?qū)挾龋蝗粢箍蚣苓吙蛳?，則不選中【顯示邊框】復(fù)選框。7．單擊【確定】按鈕，關(guān)閉【網(wǎng)頁屬性】對話框，再單擊【確定】按鈕，關(guān)閉【框架屬件】對話框，完成框架屬性設(shè)置。修改框架屬性返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.2.7任務(wù)七應(yīng)用CSS樣式表

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．CSS概述2．創(chuàng)建新的

CSS

樣式返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。

用CSS不僅可以做出美觀工整令瀏覽者賞心悅目的網(wǎng)頁，還能給網(wǎng)頁添加許多特殊效果。創(chuàng)建CSS樣式表的過程，就是對各種CSS屬性的設(shè)置過程，所以了解和掌握屬性設(shè)置非常重要。在DW

MX

2004的CSS樣式里包含了W3C規(guī)范定義的所有CSS1的屬性，把這些屬性分為：類型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展等八個部分。CSS概述返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．選擇插入的位置，執(zhí)行【新建

CSS

樣式】命令，彈出【新建

CSS

樣式】對話框。2．在【CSS

樣式】面板中，單擊面板右下角區(qū)域中的【新建

CSS

樣式】按鈕。3．在文本屬性檢查器中，執(zhí)行【管理樣式】命令，在彈出的對話框中單擊【新建】。

4．單擊【相關(guān)

CSS】選項(xiàng)卡，單擊右鍵，然后從菜單中選擇【新建規(guī)則】。

創(chuàng)建新的

CSS

樣式返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)5．執(zhí)行【文本】→【CSS

樣式→【新建】命令，彈出【新建

CSS

樣式】對話框。6．選擇要創(chuàng)建的

CSS

樣式的類型。7．選擇定義樣式的位置。8．單擊【確定】。創(chuàng)建新的

CSS

樣式返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.2.8任務(wù)八表單與行為的應(yīng)用

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．創(chuàng)建表單2．添加文本域3．添加復(fù)選框4．單選按鈕及單選按鈕組5．添加行為返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．在打開的文檔中，將鼠標(biāo)光標(biāo)定位在要插入表單的位置。2．選擇【插入記錄】→【表單】→【表單】命令，即可以插入一個表單。創(chuàng)建表單返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．將鼠標(biāo)光標(biāo)定位在表單中要添加文本域的位置。2．在插入欄的【表單】選項(xiàng)卡中單擊按鈕，即可在指定位置添加文本域。添加文本域返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．將鼠標(biāo)光標(biāo)定位在要添加復(fù)選框的位置。2．在插入欄的【表單】選項(xiàng)卡中單擊按鈕，即可在指定位置添加復(fù)選框。添加復(fù)選框返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．將鼠標(biāo)光標(biāo)定位在要添加單選按鈕的位置。2．在插入欄的【表單】選項(xiàng)卡中單擊按鈕，在指定位置添加單選按鈕。若單擊按鈕，可打開【單選按鈕組】對話框，添加單選按鈕組。3．設(shè)置完成后，單擊【確定】按鈕。單選按鈕及單選按鈕組返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)按【Shift+F4添加行為】組合鍵打開【行為】面板。通過【行為】面板，將行為添加到頁面元素中，即可實(shí)現(xiàn)相應(yīng)的操作。添加行為返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)工作任務(wù)：認(rèn)識流媒體的概念，以及流媒體傳輸?shù)墓ぷ髟?；遠(yuǎn)程教學(xué)過程中流媒體傳輸技術(shù)的應(yīng)用；認(rèn)識Real流媒體處理技術(shù)的工作過程及原理。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.3.1任務(wù)一認(rèn)識流媒體傳輸技術(shù)

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)流媒體：采用流式傳輸?shù)姆绞皆贗nternet播放的媒體格式，如音頻、視頻或多媒體文件。流媒體在播放前并不下載整個文件，只將開始部分內(nèi)容存入內(nèi)存，在計(jì)算機(jī)中對數(shù)據(jù)包進(jìn)行緩存并使媒體數(shù)據(jù)正確地輸出。此時多媒體文件的剩余部分將在后臺的服務(wù)器內(nèi)繼續(xù)下載。與單純的下載方式相比，這種傳輸方式不僅使啟動延時大幅度地縮短，而且對系統(tǒng)緩存容量的需求也大大降低，并且極大地減少了用戶等待的時間。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.3.2任務(wù)二應(yīng)用流媒體傳輸技術(shù)

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)在IP網(wǎng)上開展遠(yuǎn)程教學(xué)活動，需要解決兩個基本問題：音頻、視頻流信息的傳送以及它們與數(shù)據(jù)之間的同步。流媒體技術(shù)在解決上述問題時有很大的優(yōu)勢。此外，由于在教學(xué)過程中教師會經(jīng)常使用電子教案來輔助教學(xué)，比如用PowerPoint，而電子教案的展示與音頻、視頻流之間有嚴(yán)格的時間同步關(guān)系，這就要求在傳輸過程中我們?nèi)匀灰３炙鼈冎g的同步關(guān)系。這里以Microsoft的WindowsMediaService例來分析基于IP網(wǎng)的遠(yuǎn)程實(shí)時教學(xué)系統(tǒng)的基本構(gòu)成和主要功能。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)系統(tǒng)的工作過程如下：輸入的視頻和音頻信號將送給MPEG4的編碼器進(jìn)行編碼，編碼器輸出的節(jié)目流既可以存入存儲設(shè)備也可以直接送給媒體服務(wù)器。媒體服務(wù)器的主要功能是完成節(jié)目流的播出。媒體服務(wù)器播出的節(jié)目有三個來源，它可能是保存在存儲設(shè)備中的ASF文件，也可以是Encoder實(shí)時傳送來的節(jié)目，其次，它播出的節(jié)目還可以從其它的媒體服務(wù)器上獲取。普通的用戶可以通過LAN或通過無線網(wǎng)絡(luò)接入到該系統(tǒng)之中參加遠(yuǎn)程實(shí)時教學(xué)。第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.3.3任務(wù)三熟悉Real流媒體處理技術(shù)

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)Real流媒體技術(shù)的實(shí)現(xiàn)需要3個軟件的支持。1．RealPlayer播放器。2．RealProducer編輯制作。3．RealServer服務(wù)器。RealPlayer：是媒體播放軟件，從早期的RealPlayer發(fā)展到RealPlayer8.0，RealPlayer9.0，現(xiàn)在已經(jīng)升級到RealOne和RealOnePlayerGold版本。Real所特有的格式為*.rm，*.ra，*.ram。所占空間小，并且有較好的影音質(zhì)量，應(yīng)用廣泛。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)工作任務(wù)：收集與大學(xué)生活相關(guān)的素材；設(shè)計(jì)網(wǎng)站的流程圖；在本地計(jì)算機(jī)上創(chuàng)建“mycollege”站點(diǎn)；編輯、刪除與復(fù)制站點(diǎn)；打開我的大學(xué)主頁，設(shè)置頁面屬性；在主頁中新建CSS樣式及CSS樣式文件；制作一個專題欄目，在該欄目下制作“我的大學(xué)”、“我的高中”、“我的初中”、“我的檔案”、“我的簡歷”、“社會生活”鏈接；為網(wǎng)頁設(shè)置背景音樂；在標(biāo)志和標(biāo)語區(qū)域插入一幅圖片；在圖片區(qū)域插入熱門圖片；在網(wǎng)頁中制作一個動態(tài)圖層，制作90幀的時間軸動畫；利用模板創(chuàng)建“個人檔案”、“相冊”、“音樂”三個欄目網(wǎng)頁；為網(wǎng)頁添加播放聲音行為；創(chuàng)建彈出信息對話框行為；設(shè)置添加狀態(tài)欄文本對話框行為；測試與發(fā)布網(wǎng)站。返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.4.1任務(wù)一收集素材與規(guī)劃網(wǎng)站

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．收集素材2．規(guī)劃網(wǎng)站返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)收集和我的大學(xué)網(wǎng)頁相關(guān)的素材，查找并收集有關(guān)的文字、圖片、聲音、影像等素材，并對所收集的素材進(jìn)行整理、處理。根據(jù)網(wǎng)頁的需求，對素材進(jìn)行編輯、處理。對圖片進(jìn)行截取、編輯，并將圖片的格式轉(zhuǎn)換成JPG格式，文字材料進(jìn)行重新編排，將聲音和影視資源轉(zhuǎn)換成RM或WMV等流媒體格式。收集素材返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)確定網(wǎng)站目標(biāo)，通過本站的設(shè)計(jì)，展現(xiàn)學(xué)生在大學(xué)的學(xué)習(xí)、生活、事物等方面的情況，展現(xiàn)大學(xué)生的個性、風(fēng)采和精神面貌，并具有實(shí)用性，能夠記錄學(xué)習(xí)的成績、科目、學(xué)習(xí)時間、學(xué)習(xí)心得和學(xué)習(xí)內(nèi)容等方面的內(nèi)容。規(guī)劃網(wǎng)站返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.4.2任務(wù)二創(chuàng)建和管理“我的大學(xué)”站點(diǎn)

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．建立一個站點(diǎn)2．管理與編輯站點(diǎn)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．打開“我的電腦”窗口，在D盤中新建一個文件夾mycollege。2．啟動DreamWeaver8軟件。執(zhí)行【站點(diǎn)】→【管理站點(diǎn)】命令，打開如圖6-16所示的“管理站點(diǎn)”對話框，單擊【新建】按鈕，選擇“站點(diǎn)”選項(xiàng)?！肮芾碚军c(diǎn)”對話框“站點(diǎn)定義”對話框

3．在彈出的“站點(diǎn)定義”對話框中輸入站點(diǎn)的名字“我的大學(xué)”建立一個站點(diǎn)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)4．單擊【下一步】按鈕，在彈出的對話框中選擇“是，我想使用服務(wù)器技術(shù)”，在“哪種服務(wù)器技術(shù)？”下拉列表框中選擇“ASPVBscript”。5．單擊【下一步】按鈕，在彈出的對話框中選擇“在本地進(jìn)行編輯和測試（我的測試服務(wù)器是這臺計(jì)算機(jī)）（E）”選項(xiàng)，在“您將把文件存儲在計(jì)算機(jī)上的什么位置？”文件夾列表選擇存放站點(diǎn)的位置為“D:\mycollege”文件夾建立一個站點(diǎn)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)6．單擊【下一步】按鈕，在彈出的對話框中，在“您應(yīng)該使用什么URL來瀏覽站點(diǎn)的根目錄”列表使用默認(rèn)值（http://localhost）。選擇是否使用服務(wù)器技術(shù)選擇存放站點(diǎn)的位置對話框

7．單擊【下一步】按鈕，在彈出的對話框中選擇“否（O）”單選項(xiàng)。8．單擊【下一步】按鈕，在彈出的對話框中檢查各項(xiàng)設(shè)置是否正確。如果確認(rèn)無誤，則單擊【完成】按鈕，完成“我的大學(xué)”個人站點(diǎn)的定義。在創(chuàng)建站點(diǎn)之后，在窗口右側(cè)的“文件”面板將會看到剛才定義的“我的大學(xué)”站點(diǎn)，目前該站點(diǎn)為，沒有任何文件和文件夾建立一個站點(diǎn)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．執(zhí)行【站點(diǎn)】→【管理站點(diǎn)】命令“管理站點(diǎn)”對話框。2．選擇要重新編輯的站點(diǎn)名，單擊【編輯】按鈕，打開“站點(diǎn)定義”對話框，在該對話框中可以對站點(diǎn)重新編輯。3．單擊【確定】按鈕，返回“管理站點(diǎn)”對話框，單擊【完成】按鈕，完成編輯操作。管理與編輯站點(diǎn)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)4．選擇要復(fù)制（本例選擇“我的大學(xué)”進(jìn)行練習(xí)）的站點(diǎn)，單擊【復(fù)制】按鈕，即可復(fù)制一個站點(diǎn)。新復(fù)制的站點(diǎn)名顯示在“管理站點(diǎn)”對話框中。5．選擇要刪除的站點(diǎn)（“我的大學(xué)復(fù)制”），單擊【刪除】按鈕，彈出如圖6-23所示的“刪除提示”對話框。6．單擊【是（Y）】按鈕，即可刪除站點(diǎn)。管理與編輯站點(diǎn)返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.4.3任務(wù)三設(shè)置頁面屬性

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．打開“我的大學(xué)”站點(diǎn)，打開index.asp網(wǎng)頁文件?！绊撁鎸傩浴睂υ捒?/p>

2．執(zhí)行【修改】→【頁面屬性】命令（或在工作窗口右鍵單擊，在彈出的快捷菜單中選擇“頁面屬性”選項(xiàng)）打開頁面屬性對話框。3．在“分類”列表中單擊“外觀”選項(xiàng)，設(shè)置“頁面字體”為宋體、“大小”為9、“文本顏色”為＃000000，左、右、上、下邊距均為0像素。設(shè)置頁面屬性返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)4．在“分類”列表中單擊“鏈接”選項(xiàng)，設(shè)置“活動鏈接”顏色為＃0000FF，“下劃線樣式”為始終無下劃線，如圖6-25所示。網(wǎng)頁中已訪問過的超級鏈接的文字顏色不變，正在訪問的超級鏈接的文字顏色為藍(lán)色，訪問過的鏈接不帶下劃線。5．在“分類”列表中單擊“標(biāo)題/編碼”選項(xiàng)，設(shè)置標(biāo)題為“個人主頁—我的大學(xué)”，如圖6-26所示。單擊【確定】完成“頁面屬性”的設(shè)置。6．執(zhí)行【文件】→【保存】命令，對修改后的網(wǎng)頁進(jìn)行保存。設(shè)置頁面屬性返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.4.4任務(wù)四建立樣式表

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．創(chuàng)建CSS樣式2．創(chuàng)建CSS樣式文件返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．打開“我的大學(xué)”站點(diǎn)，打開index.asp網(wǎng)頁文件。2．打開“設(shè)計(jì)”面板組中的“CSS樣式”面板，單擊面板右下方的“新建CSS規(guī)則”按鈕，打開“新建CSS樣式”對話框，如圖6-27所示。3．在“新建CSS規(guī)則”對話框中輸入名稱“標(biāo)題”，選中“僅對該文檔”單選按鈕，如圖6-28所示，單擊【確定】按鈕。創(chuàng)建CSS樣式返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)4．在彈出的“標(biāo)題的CSS規(guī)則定義”對話框中設(shè)置字體為黑體、大小為12px、顏色為＃FF0000，單擊【確定】按鈕完成標(biāo)題CSS規(guī)則定義。5．單擊面板右下方的“新建CSS規(guī)則”按鈕，打開“新建CSS樣式”對話框，在“名稱”文本框中輸入正文單擊【確定】按鈕。6．在彈出的“正文的CSS規(guī)則定義”對話框中設(shè)置字體為宋體、大小為12px。創(chuàng)建CSS樣式返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．打開“我的大學(xué)”站點(diǎn)，打開index.asp網(wǎng)頁文件。2．新建CSS規(guī)則，打開對話框，選擇定義在“（新建樣式表文件）”選項(xiàng)，單擊【確定】按鈕，彈出“保存樣式表文件為”對話框，在文件名后輸入“mycollege”。3．單擊新建的“mycollege”樣式表文件，新建欄目、標(biāo)題、正文、版塊等樣式。創(chuàng)建CSS樣式文件返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.4.5任務(wù)五制作“我的大學(xué)”網(wǎng)站首頁

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．打開“我的大學(xué)”站點(diǎn)，打開index.asp網(wǎng)頁文件?！拔业拇髮W(xué)”個人網(wǎng)站首頁

2．在“首頁”下方的單元格中輸入“專題欄目”，在“屬性”面板的單元格選項(xiàng)中設(shè)置“水平”為居中對齊，設(shè)置“垂直”為居中，設(shè)置“背景顏色”為#FFCC33。3．選擇中“專題欄目”文字。在“屬性”面板的樣式列表框中選擇“版塊”。4．在“專題欄目”文字前單擊，執(zhí)行【插入】→【圖像】命令，在彈出的“選擇圖像源文件”對話框中選擇“images”文件夾，選擇圖片“bj-3.gif”。單擊選中剛插入的圖片。設(shè)計(jì)版塊標(biāo)題返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)5．分別在指定位置輸入各個版塊的名稱，即專題欄目、我的大學(xué)生活感悟、熱點(diǎn)文章、友情鏈接、熱點(diǎn)圖片、用戶登錄等各個版塊名稱，并且設(shè)置樣式為“版塊”，同時按照圖6-31所示，分別插入圖片“book1.gif”、“heart3.gif”、“bj-3.gif”、“1.gif”6．選擇“我的大學(xué)生活感悟”單元格，單擊“屬性”面板“背景”的單元格背景URL按鈕，在彈出的“選擇圖像源文件”對話框中選擇背景圖片為menu_bg.jpg。同樣，設(shè)置“熱點(diǎn)圖片”單元格的背景圖片也為menu_bg.jpg。設(shè)計(jì)版塊標(biāo)題返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)7．設(shè)置“熱點(diǎn)文章”和“用戶登錄“單元格背景圖片為menu_l.jpg8．執(zhí)行【文件】→【保存】命令，把改進(jìn)的內(nèi)容保存到文件中。設(shè)計(jì)版塊標(biāo)題返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.4.6任務(wù)六修飾“我的大學(xué)”網(wǎng)站首頁

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．添加圖像2．設(shè)計(jì)動畫返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．繼續(xù)上一步的操作，單擊選中導(dǎo)航欄上面的單元格，執(zhí)行【插入】→【圖像】命令，在彈出的“選擇圖像源文件”對話框中選擇選擇圖片“zy-1.jpg”。單擊選中剛插入的圖片，在“屬性”面板的“對齊”列表框中選擇“絕對居中”。2．在熱點(diǎn)圖片下方的三個單元格中分別插入圖片“rm1.jpg”、“rm2.jpg”、“rm1.jpg”。3．執(zhí)行【文件】→【保存】命令，把改進(jìn)的內(nèi)容保存到文件中。添加圖像返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．繼續(xù)上一步的操作，光標(biāo)移動網(wǎng)頁的左上方，執(zhí)行【插入】→【布局對象】→【層】命令，在頁面上出現(xiàn)一個藍(lán)色的框，即圖層layer1。2．在框中輸入“歡迎來到“我的大學(xué)”個人網(wǎng)站！”，在“屬性”面板中設(shè)置“字體”為宋體加粗，“字號”為24。設(shè)置文字顏色為#FF0000，設(shè)置圖層的“背景顏色”為#99FFFF。3．執(zhí)行【窗口】→【時間軸】命令，打開“時間軸”面板，選中文字層layer1，把它拖到時間軸中。設(shè)計(jì)動畫返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)4．在時間軸上單擊鼠標(biāo)選中第15幀，拖動該關(guān)鍵幀到第90幀。選擇文字圖層，拖運(yùn)圖層到屏幕右上方，制作直線運(yùn)動動畫。5．鼠標(biāo)單擊第30幀，右鍵彈出快捷菜單，單擊【增加關(guān)鍵幀】，則第30幀變?yōu)殛P(guān)鍵幀，同樣，增加第60幀為關(guān)鍵幀。6．鼠標(biāo)單擊第30幀，選擇文字圖層，拖運(yùn)圖層到屏幕左下方。鼠標(biāo)單擊第60幀，選擇文字圖層，拖運(yùn)圖層到屏幕右下方。設(shè)計(jì)動畫返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)7．選中時間軸面板上自動播放復(fù)選框，使時間軸動畫在網(wǎng)頁打開時自動播放。8．執(zhí)行【文件】→【保存】命令，把改進(jìn)的內(nèi)容保存到文件中。設(shè)計(jì)動畫返回章目錄第6章網(wǎng)頁制作基礎(chǔ)第5章網(wǎng)絡(luò)安全技術(shù)返回章目錄6.4.7任務(wù)七制作“我的大學(xué)”網(wǎng)站其他頁

返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．創(chuàng)建模板2．制作“個人檔案”頁3．制作“相冊”頁4．制作“音樂”頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．打開“我的大學(xué)”站點(diǎn)，打開index.asp網(wǎng)頁文件?！傲泶婺０濉睂υ捒?/p>

2．執(zhí)行【文件】→【另存為模板】命令，打開“另存為模板”對話框，輸入模板名稱為mycollege，如圖6-32所示，單擊【保存】按鈕，在隨后彈出的提示框中選擇“是（Y）”按鈕以更新鏈接創(chuàng)建模板返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)3．在導(dǎo)航欄下方工作區(qū)中，單擊右健，在彈出的快捷菜單中執(zhí)行【模板】→【新建可編輯區(qū)域】命令（或執(zhí)行【插入】→【模板對象】→【可編輯區(qū)域】命令。4．在彈出的“新建可編輯區(qū)域”對話框中輸入名稱為Edit1，單擊【確定】按鈕。

5．執(zhí)行【文件】→【保存】命令，把改進(jìn)的內(nèi)容保存到文件中，完成模板的創(chuàng)建。創(chuàng)建模板返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．啟動Dreamweaver程序，單擊“新建文檔”對話框。2．在該對話框中選擇“模板”選項(xiàng)卡，切換到“從模板新建”對話框。3．單擊選中“mycollege”模板，選中“當(dāng)模板改變時更新頁面”復(fù)選框，單擊【創(chuàng)建】按鈕，利用模板創(chuàng)建一新的網(wǎng)頁。4．執(zhí)行【文件】→【另存為】命令，在彈出的另存為對話框中選擇“grda”文件夾，在文件名后的文本框中輸入“grda.html”，單擊【保存】按鈕保存網(wǎng)頁。制作“個人檔案”頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)5．制作一個6行1列的表格，分別設(shè)計(jì)并輸入“個人基本情況”、“興趣與特長”、“教育經(jīng)歷”等版塊標(biāo)題，同時設(shè)置樣式為“版塊”。6．輸入表格內(nèi)容，調(diào)整表格至合適為止。7．執(zhí)行【文件】→【保存】命令，把改進(jìn)的內(nèi)容保存到grda.html文件中。制作“個人檔案”頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．將要生成網(wǎng)頁相冊的圖像全部放在站點(diǎn)根文件夾外的一個文件夾中。2．在編輯窗口下執(zhí)行【命令】→【創(chuàng)建網(wǎng)站相冊】命令，彈出如圖6-35所示的文件夾。3．在“相冊標(biāo)題”文本框中輸入網(wǎng)站相冊的標(biāo)題為“世界各地美麗的風(fēng)光”，設(shè)置網(wǎng)站相冊副標(biāo)題為“美不勝收”。4．單擊“源圖像文件夾”后的【瀏覽】按鈕，在彈出的“請選擇一個文件夾”對話框中選擇源圖像所在的文件夾。制作“相冊”頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)5．單擊“目標(biāo)文件夾”后的【瀏覽】按鈕，在彈出的“請選擇一個文件夾”對話框中設(shè)置放置網(wǎng)頁相冊的圖像和網(wǎng)頁的文件夾。6．在“縮略圖大小”列表框中設(shè)置縮略圖大小為100×100。7．選中“顯示文件名稱”前面的復(fù)選框，設(shè)置圖像下方顯示圖像的文件名。8．設(shè)置完畢后，單擊【確定】按鈕，自動優(yōu)化圖像，同時生成網(wǎng)頁文件。制作“相冊”頁返回章目錄第6章網(wǎng)頁制作基礎(chǔ)返回章目錄第5章網(wǎng)絡(luò)安全技術(shù)1．利用模板新建網(wǎng)頁另存為“yingyue.hmtl”。2．插入