電子教案-動態(tài)網(wǎng)站設計制作與維護

動態(tài)網(wǎng)站設計制作與維護

1、參考書目《Dreamweaver8完美網(wǎng)頁設計—白金案例篇》

中國電力出版社何海霞編著《Dreamweaver網(wǎng)頁設計與制作100例》人民郵電出版社

4U2V工作室編著《ASP動態(tài)網(wǎng)頁設計與應用》電子工業(yè)出版社沈大林編著2、參考網(wǎng)站

/

//參考資料課程主要內容主要內容項目一規(guī)劃網(wǎng)站項目二環(huán)境的搭建與調試項目三主頁的設計與制作項目四分支頁的設計與制作項目五網(wǎng)站的測試、發(fā)布與維護知識技能目標1、欣賞優(yōu)秀網(wǎng)頁，學習他人之長；3、清楚網(wǎng)頁的組成元素及網(wǎng)站的建設流程；4、會規(guī)劃網(wǎng)站，會書寫網(wǎng)站建設方案；2、分析優(yōu)秀網(wǎng)頁的布局結構、顏色搭配、視覺效果；工作任務列表任務一：欣賞優(yōu)秀網(wǎng)站任務二：規(guī)劃班級網(wǎng)站，書寫網(wǎng)站建設方案任務一：欣賞優(yōu)秀網(wǎng)站一、公司類網(wǎng)站欣賞欣賞海爾集團的網(wǎng)站：啟動IE瀏覽器，輸入網(wǎng)址：

該首頁給人以清新、爽朗的感受，首頁的整體布局為“上、中、下”三個版塊，中間的主體內容又分為“左、右”二個版塊。顏色上主要采用玫瑰紅色為主，玫瑰紅給人溫馨、浪漫的感受，并與網(wǎng)站的logo標志顏色達到和諧統(tǒng)一的效果。首頁題頭的動化效果為Haier公司的產品廣告,既達到了產品宣傳的目的，又達到了美化的效果。導航欄的顏色鮮明，文字仍采用玫瑰紅色，文字與背景色對比強烈，引人注目。二級導航采用橫式排列，占據(jù)了中間主體部分。海爾網(wǎng)站首頁特色任務一：欣賞優(yōu)秀網(wǎng)站二、旅游類網(wǎng)站欣賞欣賞“虎丘旅游網(wǎng)”的網(wǎng)站：啟動IE瀏覽器，輸入網(wǎng)址：http://

網(wǎng)站帶有引導頁：任務一：欣賞優(yōu)秀網(wǎng)站將虎丘的名景點以動畫的形式顯示在頁面的右方蘇軾的題詞以動畫的形式緩慢展示出來蝴蝶的翩翩起舞與金魚的自由自在的暢游結合在一起，給人一種清閑之感各種語言（簡體中文、繁體中文、日本語、英語等）的引導框顯示在右下方當欣賞完引導頁的優(yōu)美意境后，默認進入簡體中文主頁面。虎丘引導頁特色任務一：欣賞優(yōu)秀網(wǎng)站任務一：欣賞優(yōu)秀網(wǎng)站虎丘主頁虎丘主頁特色各類邊框體現(xiàn)了古典的特色

題頭的圖片和文字的動畫效果展示了虎丘景點的級別及多角度的美景展示主頁的整體布局為“上、中、下”三個版塊，中間的主體內容又分為“左、右”二個版塊，布局清晰任務一：欣賞優(yōu)秀網(wǎng)站三、體育類網(wǎng)站欣賞欣賞“中國大眾體育網(wǎng)”的網(wǎng)站：啟動IE瀏覽器，輸入網(wǎng)址：任務一：欣賞優(yōu)秀網(wǎng)站

背景、字體為紅色，給人以陽光、活力向上的感覺。在字體的運用上有大有小，有長有短，顯得有對比，莊重。圖片的動態(tài)效果突出主題，產生運動的視覺感受。該網(wǎng)站的首頁整體視覺感受清晰、和諧。整體顏色采用紅色，既統(tǒng)一又有變化，主體突出。中國大眾體育網(wǎng)主頁特色任務一：欣賞優(yōu)秀網(wǎng)站四、新聞類網(wǎng)站欣賞欣賞“新浪網(wǎng)站新聞頁”：啟動IE瀏覽器，輸入網(wǎng)址：/任務一：欣賞優(yōu)秀網(wǎng)站

各類新聞用標題欄加以劃分，簡潔明了、排列整齊，使得較大的信息量顯示有條有理。顏色的搭配上主要采用藍色，左右兩側版塊的字體大小相同，字體顏色為藍色，給人以清新、和諧的視覺美感。該網(wǎng)頁給人的視覺感受是和諧美觀，在模塊的劃分上比較明顯，采用“左、中、右”三個版塊，內容充實。新浪網(wǎng)站新聞頁特色任務一：欣賞優(yōu)秀網(wǎng)站1．瀏覽以下站點，對所瀏覽網(wǎng)站首頁的特色和不足進行賞析說明，主要包括頁面布局結構、顏色搭配、導航欄、文字效果、圖片效果、動畫效果、音頻效果等。（1）獅子林網(wǎng)站：/（2）清華大學網(wǎng)站：/（3）太平洋電腦網(wǎng)：http://2．通過上述站點中頁面的欣賞，請說出網(wǎng)頁的基本構成元素有哪些？

任務一課堂實踐任務二：規(guī)劃班級網(wǎng)站，書寫網(wǎng)站建設方案1、熟悉網(wǎng)站建設的流程

建立一個網(wǎng)站就像蓋一幢大樓一樣，它是一個系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設計出一個滿意的網(wǎng)站。設計與制作網(wǎng)站的五大步驟：步驟1：規(guī)劃站點

需求分析－總體設計,書寫建設方案－確定網(wǎng)站的目錄結構－規(guī)劃和收集資料

－選擇網(wǎng)頁制作工具步驟2：環(huán)境的搭建與調試步驟3：網(wǎng)站主頁的設計與制作步驟4：分支頁面的設計與制作、后臺的建設及測試

步驟5：設置鏈接、測試、發(fā)布、推廣、維護網(wǎng)站

任務二：規(guī)劃班級網(wǎng)站，書寫網(wǎng)站建設方案2、網(wǎng)站建設遵循的規(guī)范（1）尺寸規(guī)范

頁面標準在800*600像素分辨率下，網(wǎng)頁寬度保持在760-780像素以內，就不會出現(xiàn)水平滾動條，高度則視版面和內容決定。頁面標準在1024*768像素分辨率下，網(wǎng)頁寬度保持在980-1003像素以內，一般按1003像素制作，就不會出現(xiàn)水平滾動條，高度則視版面和內容決定。頁面高度原則上不超過3屏，寬度不超過1屏。每個標準頁面為A4幅面大小，即8.5*11英寸。任務二：規(guī)劃班級網(wǎng)站，書寫網(wǎng)站建設方案（2）網(wǎng)站目錄結構規(guī)范

不要將所有文件都存放在根目錄下建立子目錄（子文件夾）對文件進行分類存放目錄名不采用中文命名（切忌），采用具有一定含義的英文、數(shù)字組合進行命名在每個子目錄下都建立獨立的images目錄目錄的層次不要太深，建議不要超過3層模板（Library）和庫(Templates)文件夾一定要位于站點根目錄之下并不能被更名，否則在使用模板和庫就會出錯

任務二：規(guī)劃班級網(wǎng)站，書寫網(wǎng)站建設方案（3）主頁文件命名規(guī)范

主頁文件的命名，一般用index.htm（index.htmlindex.aspindex.jspindex.php等），或default.htm(html、asp、jsp、php)，放在站點的根目錄下。用index作為主文件名，index表示“索引”（指首頁放滿了去網(wǎng)站其他地方的鏈接），一般網(wǎng)站發(fā)布時服務器默認識別index，所以采用index作為主頁文件主名。3、對自己的班級網(wǎng)站進行規(guī)劃，并書寫網(wǎng)站建設方案任務二：規(guī)劃班級網(wǎng)站，書寫網(wǎng)站建設方案表XXXX網(wǎng)絡有限公司《客戶需求說明書》企業(yè)（單位）名稱所屬行業(yè)企業(yè)（單位）地址郵政編碼聯(lián)系人電話傳真電子信箱其他聯(lián)系方式企業(yè)（單位）簡介主要產品與服務網(wǎng)站名稱擬建網(wǎng)站的名稱建站類型注冊域名擬注冊的域名，如：主要欄目希望網(wǎng)站開設的主要欄目其他需求（希望借鑒的網(wǎng)站）將希望借鑒的網(wǎng)站URL寫在此處，我們建站過程中給予適當借鑒?？蛻舸_認簽字（蓋章）年月日任務二：規(guī)劃班級網(wǎng)站，書寫網(wǎng)站建設方案瀏覽器Web服務器Internet表XXXX班級網(wǎng)站建設方案項目背景班級介紹（自己完成）系統(tǒng)名稱：XXXX班級網(wǎng)站開發(fā)負責人：XXX（自己的姓名）網(wǎng)站建設的目標 寫出自己建設網(wǎng)站的目標網(wǎng)站建設的架構

這是目前得到廣泛的一種標準結構。在這種結構中，用戶使用標準的瀏覽器（如IE瀏覽器）通過Internet和http協(xié)議訪問服務方提供的Web服務器，Web服務器分析用戶瀏覽器提出的請求，如果是頁面請求，則直接用Http協(xié)議向用戶返回要瀏覽的頁面。系統(tǒng)采用WindowsXP的IIS作為服務器。任務二：規(guī)劃班級網(wǎng)站，書寫網(wǎng)站建設方案網(wǎng)站主頁首頁班級新聞班級相冊留言板通訊錄班級活動XXXXXXXXX網(wǎng)站風格將網(wǎng)站中主要使用的色彩做說明。如：網(wǎng)站用白色配綠色、藍色系，設計以白色為主。因為藍色具有清涼、自由的感覺，使人們容易聯(lián)想到天空、海洋；而綠色具有新鮮、清爽的感覺，容易聯(lián)想到大自然、春天；和白色搭配，就會感覺清新、爽快，從而給人一種健康的感覺。網(wǎng)站建設進度

寫出自己建設網(wǎng)站的進度安排相關網(wǎng)站借鑒：

在設計的過程中都借鑒了哪些網(wǎng)站，在這里列出。站點設計（網(wǎng)站頁面結構）任務二課堂實踐規(guī)劃自己的班級網(wǎng)站，并在作業(yè)本上書寫網(wǎng)站建設方案總結與作業(yè)作業(yè)總結1、清楚網(wǎng)站設計與制作的步驟；2、熟悉網(wǎng)頁的組成元素；3、會書寫網(wǎng)站建設方案。P9、P16同步訓練；完成未完成班級網(wǎng)站建設方案，收集素材項目二環(huán)境的搭建及調試

知識技能目標1、會本地靜、動態(tài)站點的創(chuàng)建；2、會本地靜、動態(tài)站點的管理；工作任務列表任務一：創(chuàng)建本地站點（重點）子任務1：建立本地靜態(tài)站點class子任務2：建立本地動態(tài)站點MyClass(以ASP作為動態(tài)網(wǎng)頁開發(fā)技術)（采用兩種方法完成）任務二：管理本地站點class任務一創(chuàng)建本地站點子任務1：創(chuàng)建本地靜態(tài)站點class我們將使用DreamweaverCS3完成網(wǎng)站站點的創(chuàng)建工作步驟1：檢查C:\ClassWeb文件夾是否存在，不存在則創(chuàng)建該文件夾。步驟2：啟動DreamweaverCS3。法一：“開始”/“程序”/“AdobeDreamweaverCS3”/“AdobeDreamweaverCS3”；法二：若桌面上有DreamweaverCS3快捷方式，雙擊快捷方式即可完成啟動工作。步驟3：建立本地靜態(tài)站點“class”。（1）使用菜單“站點”/“新建站點”命令，在彈出的“站點定義”向導對話框。選擇“基本”選項卡。如下圖所示：任務一創(chuàng)建本地站點（2）在“你打算為您的站點起什么名字？”標簽下面的文本框中輸入要創(chuàng)建的站點名稱：“class”。其它選項取默認設置，單擊“下一步”按鈕。任務一創(chuàng)建本地站點（3）在彈出的是否使用服務器技術對話框中，由于我們此處創(chuàng)建的是靜態(tài)站點，所以選取“否，我不想使用服務器技術”一項，單擊“下一步”按鈕。如下圖所示：任務一創(chuàng)建本地站點（4）在彈出的“在開發(fā)過程中，你打算如何使用你的文件？”中選取“編輯我的計算機上的本地副本，完成后再上傳到服務器”，選項。（5）在窗口下方的“您把文件存儲在計算機上的什么位置？”下方的文本框中輸入或選取保存站點的文件夾，此處我們選取C：\ClassWeb文件夾，單擊“下一步”按鈕。如下圖所示：任務一創(chuàng)建本地站點（6）在彈出的設置是否與遠程服務器相連的對話框中的“您如何連接到遠程服務器”下的下拉列表框中選取“無”，設置為不與遠程服務器相連。如下圖所示。任務一創(chuàng)建本地站點（7）單擊“下一步”按鈕，便會顯示在站點定義向導中所選擇設置的詳細報告，若感覺滿意，單擊“完成”按鈕，完成本網(wǎng)站的創(chuàng)建，如圖所示，否則單擊“上一步”按鈕重新修改各項設置。任務一創(chuàng)建本地站點任務一創(chuàng)建本地站點子任務2：創(chuàng)建本地動態(tài)站點MyClass(以ASP作為動態(tài)網(wǎng)頁開發(fā)技術)該任務是創(chuàng)建名為MyClass的本地動態(tài)站點。創(chuàng)建動態(tài)站點，需安裝和配置Web服務器，所以本任務的實現(xiàn)由下述幾個步驟完成：1、安裝服務器端腳本ASP的工作環(huán)境IIS（InternetInformationServer）2、設置Web服務器3、創(chuàng)建名為MyClass的動態(tài)站點4、測試動態(tài)站點IIS是ASP運行時的工作環(huán)境，我們要建立動態(tài)站點，必須先安裝與設置IIS（InternetInformationService）步驟1：IIS的安裝Windows2000Server、Windows2000AdvancedServer以及Windows2000Professional的默認安裝都帶有IIS

。但WindowsXP、Windows2003server等操作系統(tǒng)，默認情況下不會安裝IIS，需要進行手工安裝。以WindowsXP為例，講解安裝步驟：IIS安裝步驟：（1）選擇“開始”→“設置”→“控制面板”，雙擊“控制面板”窗口中的“添加/刪除程序”圖標，打開“添加或刪除程序”窗口，如圖所示。任務一創(chuàng)建本地站點任務一創(chuàng)建本地站點（2）單擊圖左邊的【添加/刪除Windows組件】選項，彈出【W(wǎng)indows組件向導】對話框，進入選取組件對話框，如圖所示。任務一創(chuàng)建本地站點（3）單擊“詳細信息”按鈕，確保選中“Internet信息服務管理單元”和“萬維網(wǎng)服務”等內容，如圖所示。任務一創(chuàng)建本地站點（4）然后根據(jù)向導單擊“下一步”按鈕，在安裝過程中系統(tǒng)會提示你插入WindowsXP的安裝光盤，此時你將其路徑指向WindowsXP安裝程序的I386目錄下即可。（5）組件配置完成之后，單擊【完成】按鈕，完成IIS的安裝。（6）安裝完IIS后，檢測安裝是否成功的方法：在地址欄中輸入http://localhost/，若出現(xiàn)下面如圖示的IIS的歡迎界面和幫助文件界面則安裝成功。任務一創(chuàng)建本地站點步驟2：啟動IIS，設置Web服務器，將IIS的主目錄設置為C:\ClassWeb，設置啟用默認文檔為index.html

（1）啟動IIS：在控制面板的經(jīng)典視圖下：打開“控制面板”--

雙擊“管理工具”

--

再雙擊“Internet信息服務”。在控制面板的分類視圖下：打開“控制面板”--

雙擊“性能和維護”

--

雙擊“管理工具”

--

再雙擊“Internet信息服務”。任務一創(chuàng)建本地站點思考：不設主目錄是否可以？（2）將IIS的主目錄設置為C:\ClassWeb①右擊“默認網(wǎng)站”，在彈出的快捷菜單中選“屬性”命令；如圖所示：任務一創(chuàng)建本地站點②在彈出的“默認網(wǎng)站屬性”對話框中，選中其中的“主目錄”選項卡，將本地路徑后的文本框中變?yōu)镃:\ClassWeb文件夾，其它選項選默認設置，如下圖所示，這樣就把主目錄設置成了自己的文件夾。任務一創(chuàng)建本地站點（3）設置啟用默認文檔為index.html

選中“文檔”選項卡，修改瀏覽器默認主頁為index.html及調用順序，若在文檔欄中沒有所要設置的文件，則單擊右側的【添加】按鈕，將所需文件添加入文檔欄中，并設置其調用順序，將“index.html”設置為頂端第一個。這樣設置后，在使用http://localhost來訪問本地主機Web站點時，將顯示W(wǎng)eb站點下index.htm的內容。到這里，設置Web服務器完成。任務一創(chuàng)建本地站點步驟3：在DreamweaverCS3中建立本地動態(tài)站點“MyClass”

。創(chuàng)建動態(tài)站點與創(chuàng)建靜態(tài)站點類似，有兩種方法可以完成方法一：使用【站點定義】對話框的基本選項卡完成方法二：使用【站點定義】對話框的高級選項卡完成方法一（使用基本選項卡）完成步驟：（1）使用菜單“站點”/“新建站點”命令，在彈出的“站點定義”向導對話框。選擇“基本”選項卡。（2）在“你打算為您的站點起什么名字？”標簽下面的文本框中輸入要創(chuàng)建的站點名稱：“MyClass”。其它選項取默認設置，單擊“下一步”按鈕。任務一創(chuàng)建本地站點（3）在彈出的是否使用服務器技術對話框中，由于我們此處制作的是動態(tài)網(wǎng)頁，所以選取“是，我想使用服務器技術”一項，在哪種服務器技術下的下拉列表框中選取“ASPVBScript”，單擊“下一步”按鈕。如下圖所示：任務一創(chuàng)建本地站點（4）在彈出的“在開發(fā)過程中，你打算如何使用你的文件？”中選取“在本地進行編輯和測試（我的測試服務器是這臺計算機）”選項。（5）在窗口下方的“您把文件存儲在計算機上的什么位置？”下方的文本框中輸入或選取保存站點的文件夾，此處我們選取C:\ClassWeb文件夾，單擊“下一步”按鈕。任務一創(chuàng)建本地站點（6）在彈出的“您應該使用什么URL來瀏覽站點的根目錄？”選項中選取默認選項，并使用“測試URL”按鈕測試其是否成功，成功后單擊“下一步”按鈕。如下圖所示。任務一創(chuàng)建本地站點（7）在彈出的“是否要使用遠程服務器”選項中選取“否”選項。我們采取將整個站點制作完成后再上傳的方法，所以這里選取“否”，如下圖所示。任務一創(chuàng)建本地站點（8）單擊“下一步”按鈕，便會顯示在站點定義向導中所選擇設置的詳細報告，若感覺滿意，單擊“完成”按鈕，完成本網(wǎng)站的創(chuàng)建；否則單擊“上一步”按鈕重新修改各項設置。任務一創(chuàng)建本地站點方法二（使用高級選項卡）完成步驟（1）使用菜單“站點”/“新建站點”命令，在彈出的“站點定義”向導對話框。選擇“高級”選項卡。（2）從“分類”列表框中選擇“本地信息”選項（默認選取項）。設置“本地信息”的各參數(shù)，如圖所示。任務一創(chuàng)建本地站點①站點名稱：為網(wǎng)站起一個名字，這個名字只在本地起識別作用，與網(wǎng)站發(fā)布后真實的名字無關。這里我們起“MyClass1”(為了和基本選項卡中定義的MyClass區(qū)分開來)②本地根文件夾：設置網(wǎng)站在本地硬盤的位置。這里輸入C:\ClassWeb，或者單擊右側的文件夾圖標瀏覽到該文件夾。③自動刷新本地文件列表：指定每次將文件復制到本地站點時Dreamweaver是否自動刷新本地文件列表，選中表示每次均自動刷新。④默認圖像文件夾：它是為Dreamweaver8在使用外部圖像時，制定一個“默認圖像文件夾”，這樣更便于管理圖像。⑤緩存：選中該項時可以使文件的移動、更名、查找等站點管理操作速度加快其它選項取默認設置任務一創(chuàng)建本地站點（3）從“分類”列表框中選擇“遠程信息”選項中選取“無”。（4）從“分類”列表框中選擇“測試服務器”選項，并設置其各參數(shù)，設置完畢后按“確定”按鈕，如圖所示。任務一創(chuàng)建本地站點①服務器模型：從下拉列表框中選取“ASPVBscript”。②訪問：設置服務器的訪問類型，選取“本地/網(wǎng)絡”。③測試服務器文件夾：是用來存放網(wǎng)站源代碼的根目錄，這里選取。④URL前綴：選取默認的http://localhost?！按_定”按鈕按下后即完成動態(tài)站點的創(chuàng)建。任務一創(chuàng)建本地站點步驟5：測試動態(tài)站點在站點MyClass下新建空白文檔“test.asp”,并在文件的代碼視圖中輸入如下內容并檢查網(wǎng)頁內容。今天的日期是<%=date()%>（1）新建空白文檔test.asp：右擊“文件面板”中的站點MyClass，在彈出的快捷菜單中選“新建文件”命令，輸入文件名“test.asp”

即可。（2）輸入內容：雙擊剛才新建的test.asp文件，在左側的文檔編輯窗口中選取“代碼”二字，進入“代碼視圖”中；在代碼<body></body>間輸入上述內容，存盤。任務一創(chuàng)建本地站點（3）檢查網(wǎng)頁內容：法一：單擊文檔編輯窗口的右上方的“在瀏覽器中預覽/調試”選項，在彈出的菜單中選“預覽在IExplore”命令，如下圖所示。法二：使用快捷鍵F12。法三：打開IE瀏覽器，在地址欄中輸入http://localhost/test.asp,檢查網(wǎng)頁內容。任務一創(chuàng)建本地站點法四：進入Internet信息服務對話框中，選中“默認網(wǎng)站”選項，鼠標右擊“index.asp”文件，在彈出的快捷菜單中選“瀏覽”命令。任務一創(chuàng)建本地站點若結果顯示為“今天的日期是XXXX”（其中XXXX為系統(tǒng)的當前日期），則表示動態(tài)站點創(chuàng)建成功。任務二管理本地站點class任務將靜態(tài)站點Class復制，將復制后的站點重命名為class(static)，刪除MyClass1站點操作步驟：（1）執(zhí)行“站點”→“管理站點”命令，彈出“管理站點”對話框，如圖所示。任務二管理本地站點class（2）選中class站點，單擊上圖右側【復制】按鈕，完成站點的復制，復制后的站點名稱為“class復制”。（3）選中“class復制”，單擊右側【編輯】按鈕，在彈出的對話框“您打算為您的站點起什么名字？”下的文本框中將站點名稱改為“class(static)”，如圖所示。任務二管理本地站點class（4）單擊各個對話框中出現(xiàn)的【下一步】按鈕，如圖2-41所示，單擊【完成】按鈕，完成站點的重命名。（5）選中站點管理對話框中的“MyClass”，單擊右側的【刪除】按鈕，在彈出的確認是否要刪除選中的站點對話框中，按【是】按鈕，完成站點地刪除。HTML文件結構<HTML><HEAD><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標題文檔</title></HEAD><BODY>HTML文件的正文寫在這里......</BODY></HTML>

HTML相關知識點（拓展知識）Meta標記，記錄有關當前頁面的信息，表示顯示的網(wǎng)頁內容類型；TXT或HTML格式，字符編碼方式為GB2313總結與作業(yè)作業(yè)總結1、會創(chuàng)建本地靜、動態(tài)站點。2、會編輯與管理本地靜、動態(tài)站點。P43、P46同步訓練；項目三主頁的設計與制作子項目3-1：主頁效果圖設計（1）

。知識技能目標1、會進行站點素材的查找與分類管理；2、會使用Photoshop進行網(wǎng)站主頁的版面設計；3．能將設計好的效果在Dreamweaver中進行預覽。工作任務列表任務二：使用Photoshop作出規(guī)劃好的主頁效果圖，并以class.psd為文件名存于C:\ClassWeb文件夾下任務三：將制作好的主頁效果圖保存為網(wǎng)頁形式，并以文件名index.html存于C:\ClassWeb文件夾下，同時在Dreamweaver中進行預覽任務一：準備工作(創(chuàng)建動態(tài)站點、設置主目錄)完成步驟（1）在C盤下創(chuàng)建ClassWeb文件夾，并將其設為主目錄。（2）創(chuàng)建名為“MyClass”的動態(tài)站點。由于機房機器安裝了還原卡，所以從這次課開始，每次下課后都要將ClassWeb文件夾打包上傳到教師機，同時自己帶走一份。以后在每次上課前需要做如下三項工作：將帶走的壓縮包拷貝到C盤上，解壓；將C:\ClassWeb文件夾設為主目錄；

創(chuàng)建名為“MyClass”的動態(tài)站點。

任務一準備工作具體要求根據(jù)規(guī)劃方案，在作業(yè)本上畫出布局草圖，使用Photoshop作出規(guī)劃好的主頁效果圖，以class.psd為文件名存于C:\ClassWeb文件夾下。完成步驟1、進入?yún)⒖颊军c，從平面構成和色彩兩方面對要借鑒的頁面進行分析；2、依據(jù)規(guī)劃及借鑒完成主頁的版面布局，畫出布局草圖；3、采用借鑒與創(chuàng)新相結合的方法進行網(wǎng)站主頁效果圖設計；任務二主頁效果圖制作（1）啟動PhotoshopCS，新建文檔。啟動PhotoshopCS，執(zhí)行“文件”→“新建”命令，在彈出的“新建”對話框的名稱框中輸入：班級網(wǎng)站主頁效果圖，寬度：1003像素，高度：850像素，分辨率：72像素/英寸，顏色模式：RGB顏色，背景內容：白色，如圖所示。（注意高度要視內容和版面而定，一般情況下不超過3屏為宜）任務二主頁效果圖制作（2）設計網(wǎng)頁Logo、Banner和整體效果圖。下圖僅為參考：任務二主頁效果圖制作用于制作輪番滾動圖片效果制作圖片無縫滾動效果任務二主頁效果圖制作大家可以參考優(yōu)秀網(wǎng)站的結構、版式設計、色彩搭配進行自己的主頁設計。必須包含的部分：導航欄中必須包含班級新聞、班級相冊、留言板三個部分；主頁頁面中必須包含公共欄、管理員登錄、班級新聞、用于制作圖片輪番滾動的圖片部分以及用于制作圖片無縫滾動效果的一組圖片、網(wǎng)絡導航、版權信息欄（上包含加入收藏和聯(lián)系我們項），但形式不拘泥于一種，可自行發(fā)揮創(chuàng)造。

在對話框中圖像格式選取GIF。4、效果圖制作完畢，進行文件保存及效果預覽（1）先將效果圖以“class.psd”為文件名存于C:\ClassWeb文件夾下；（2）再使用“文件”/“存儲為web所用格式”命令，將彈出的“存儲為web所用格式”對話框，如圖所示：任務二主頁效果圖制作（3）單擊“存儲”按鈕，在彈出的“將優(yōu)化結果存儲為”對話框中進行各項的設置，存儲位置為自己的站點文件夾，文件名取為index.html，“保存類型”

選“HTML和圖像（*.html）”,選好后，單擊“保存”按鈕即可保存網(wǎng)頁。（4）在dreamweaver打開剛才存儲的index.html，使用F12鍵檢查網(wǎng)頁效果是否滿足需要，若不滿足，再到class.psd文件中進行修改，直到滿意為止。任務二主頁效果圖制作班級網(wǎng)站的設計要求（1）網(wǎng)站主頁設計新穎別致，能夠突出班級特征。（2）內容豐富、健康充實，思想積極向上，能夠反映班級風貌。（3）不但要反映出班級整體風貌，還要體現(xiàn)出班級中的每一位成員都是這個大家庭中不可缺少的一份子。（4）色彩搭配和諧，網(wǎng)頁布局合理。（5）鏈接準確無誤（6）寫出設計方案。（7）最后要剔除網(wǎng)站中未使用的素材和未鏈接的網(wǎng)頁任務二主頁效果圖制作總結與作業(yè)作業(yè)總結1、使用PS進行效果圖的制作2、主頁效果圖另存為網(wǎng)頁形式1、將自己規(guī)劃的班級網(wǎng)站布局草圖畫于作業(yè)本上；2、繼續(xù)完成效果圖的制作，并加以完善項目三主頁的設計與制作子項目3-1：主頁效果圖設計（2）

知識技能目標3、會將切片處理后的文件進行存儲管理及網(wǎng)頁效果的預覽。1、會使用Photoshop中的切片工具對效果圖進行切片處理;2、會進行切片的屬性設置;工作任務列表任務一：用實例圖練習切片的使用及存儲管理任務二：將自己制作好的班級網(wǎng)站效果圖進行切片處理,并進行效果預覽準備工作1、將ClassWeb壓縮包拷貝到C盤上，解壓；2、將ClassWeb設置為主目錄；3、建立名為MyClass的動態(tài)站點。（一）利用Photoshop切割網(wǎng)頁圖片應遵循的原則

1、最好依靠參考線。切圖時更要用好參考線。參考線能保證我們切出圖在同一表格中的尺寸統(tǒng)一協(xié)調，有效避免“留白”和“爆邊”。2、Logo和Banner必切。如果效果圖中存在Logo和Banner,我們必須切片這部分，主要是為預先設計的Logo和Banner留下空間，在DreamWeaver整合時最好不用Logo和Banner的切片，而是直接用Logo和Banner原文檔，這是提高Logo和Banner效果的需要。完成工作任務所需知識點（P65）3、虛線和轉角形狀必切。虛線和轉角形狀在DreamWeaver不能實現(xiàn)，只能使用Photoshop切片。4、漸變必切。這也是DreamWeaver實現(xiàn)不了的。5、大圖必切。大的圖像必須切分成均勻圖，這樣可以提高網(wǎng)頁下載速度。6、特殊文字效果必切。除黑體和宋體外，其他字體必須切片。DreamWeaver下最有效的字體只有宋體和黑體，其它字體瀏覽器也可能不兼容。

完成工作任務所需知識點（P65）7、導航條必切。一般情況下導航條都是特別設計的，其效果在DreamWeaver下不能實現(xiàn)，因此必須形成切片供后期使用。8、有效存儲切片。存儲切片的文件夾必須位于站點的根目錄下，文件夾名必須是英文名字（站點文件夾名）。存儲切片時用“文件—存儲為web所用格式”命令。切片存儲格式要求一般存為Gif格式。Gif占用體積小。要求較高的圖像存儲為JPEG格式，JPG格式顯示更多的圖片細節(jié)。完成工作任務所需知識點（P65）（二）切片的種類

1、切片的分類依據(jù)切片是否是自動生成而劃分為如下兩類：（1）用戶切片：用戶使用切片工具創(chuàng)建的切片（圖標為藍色）。

（2）自動切片：用戶在創(chuàng)建切片時由軟件自動形成的切片（圖標為灰色）。

2、兩種切片的區(qū)別（P66）

完成工作任務所需知識點（P65）3、自動切片轉換為用戶切片

建議在進行效果圖切片處理時，都切分成用戶切片。也可以將自動切片轉換成用戶切片。方法有兩種：法一：選擇這個切片，使用切片選項工具欄中【提升到用戶切片】按鈕，如圖所示。法二：右擊選擇的自動切片，在彈出的快捷菜單中選擇“提升到用戶切片”命令。完成工作任務所需知識點（P64）利用Photoshop中的切片工具對下發(fā)的網(wǎng)頁效果圖進行切片處理

將C盤根目錄下的exercise1.psd和exercise2.psd文件進行切片處理。準備工作：在站點文件夾ClassWeb下新建文件夾exercises1和exercises2

（一）exercise1.psd進行切片處理的步驟1、利用PhotoshopCS打開exercise1.psd文件;2、選取左側工具箱里的切片工具，如下圖所示：任務一切片練習3、使用“切片工具”在標題部分的左右各切一刀，使用“切片選取工具”雙擊右側部分（或右擊這部分，在彈出的快捷菜單中選取“編輯切片選項”），在彈出的面板中設置切片類型為無圖像。因為該部分是純色，為了在網(wǎng)頁中顯示效果相同，在“切片選項”對話框的下側“切片背景類型”下拉列表框中選取其他，用工具箱中的吸管工具吸取效果圖中02切片的顏色，從而設置切片背景與效果圖中切片顏色一致，這樣該部分輸出成網(wǎng)頁后將由透明占位符和同色背景色代替，如圖所示（見下頁）。

任務一切片練習注意這里選項的選取任務一切片練習4、切割的導航條按鈕：由于導航條上各按鈕大小基本相同，選取切片工具選項工具欄中的“切片樣式”為固定大小，設置寬度為“115px”，高度為“42px”，如圖所示。注意將切片和被切對象對齊。切的時候要小心，可放大圖像，避免切片之間重疊。任務一切片練習提示：若切割的過程中發(fā)現(xiàn)切片錯誤，使用鍵盤上的【delete】鍵刪除當前選區(qū)。

5、設置切片選項工具欄中的樣式為“正常”，切割方法同上，完成左側圖像的切割，形成切片16，同樣方法完成右側的切割，完成切片17、18和19，其中切片18為單色，處理方法同切片02，這樣在輸出成網(wǎng)頁后將由透明占位符和同色背景色代替，加快網(wǎng)頁速度。6、將上方產生的一些自動切片提升為用戶切片，并將為單色的切片進行處理，處理方法同切片02，這樣在輸出成網(wǎng)頁后將由透明占位符和同色背景色代替，加快網(wǎng)頁速度。任務一切片練習7、切割圖像左下角部分（牡丹所在部分），經(jīng)觀察發(fā)現(xiàn)，圖層的大小正好與切片的大小一致，如果某個圖層的范圍正好是要切割的大小，則選中要切割的圖層，執(zhí)行“圖層”→“基于圖層的切片”命令，從而完成切片的切割。8、采用合適的方法完成“墨妙亭”、“弇山堂”和“版權所有”區(qū)域的切割。

提示：一定要使用“放大工具”檢查各切片間是否有重疊現(xiàn)象。任務一切片練習9、完成導航欄中【休閑】按鈕的超鏈接。超鏈接的設置方法有多種，在完成切片的切割后，可以完成其超鏈接工作。方法：選取工具欄中的“切片選取工具”，雙擊【休閑】按鈕所在的切片，彈出“切片選項”對話框，并在對話框內完成參數(shù)的設置，由于“休閑”頁面還未完成，這里我們設置空鏈接（#），目標為_blank，表示在新窗口中打開該鏈接

。任務一切片練習10、切片輸出。執(zhí)行“文件”→“存為Web所有格式”命令，此時將優(yōu)化的文件以GIF格式進行存儲，在“將優(yōu)化結果存儲為”對話框中，選取C:\ClassWeb\exercises1文件夾，將優(yōu)化后的結果存儲在該文件夾中，各選項的設置為：文件名：exercises1.html

保存類型：HTML和圖像（*.html）設置：默認設置切片：所有切片任務一切片練習11、按下【保存】按鈕后，即可在exercises1文件中產生一個網(wǎng)頁文件exercieses1.html，及一個保存切片圖片文件的文件夾images。打開images文件夾，不難發(fā)現(xiàn)各切片圖片文件名有數(shù)字序號01、02……等作為標記。12、啟動Dreamweaver，在Dreamweaver中打開exercise1.html，按下【F12】鍵進行效果圖預覽。任務一切片練習1、將C盤根目錄下的exercises2.psd文件進行切片處理，并將切片處理好的文件以exercises2.html為文件名存于C:\ClassWeb\exercises2文件夾下注意：切割時切片的編號2、將自己制作好的班級網(wǎng)站主頁效果圖利用切片工具進行切割。并將切片處理好的文件以index.html為文件名存于C:\ClassWeb文件夾下課堂實踐總結與作業(yè)作業(yè)總結使用Photoshop對效果圖進行切片處理及存儲1、繼續(xù)完善班級網(wǎng)站主頁效果圖，并對班級網(wǎng)站效果圖進行切片，同時進行效果預覽2、P71同步訓練二、習題項目三主頁的設計與制作子項目3-2：主頁制作（特殊效果的制作）

4、會使用Javascript代碼完成圖片輪番顯示、無縫滾動效果的制作知識技能目標3、會利用AP元素、時間軸和行為技術完成運動廣告的制作。1、會使用行為技術完成主頁中背景音樂的插入；2、會使用Marquee標簽制作滾動字幕；;工作任務列表任務一：為主頁插入背景音樂任務二：制作滾動公告欄任務四：制作圖片輪番顯示效果任務五：制作圖片連續(xù)滾動效果任務三：制作運動廣告效果展示準備工作1、將帶走的ClassWeb壓縮包解壓,并設ClassWeb文件夾為主目錄；2、建立名為“Myclass”的動態(tài)站點；3、在站點文件夾下新建media文件夾，并在media文件下新建music文件夾；4、利用搜索引擎搜索自己喜歡的背景音樂（mid格式或wav格式，不要采用mp3格式），將搜索到的背景音樂以bg.mid（或bg.wav）為文件名存于music文件夾下。給網(wǎng)站主頁插入背景音樂步驟1、在DreamWeaver中打開存于站點文件夾ClassWeb下的index.html文件，進入“設計”視圖方式，然后選擇頁面左下角的<body>標簽，以選中整個頁面（表示將行為添加給整個文檔body部分）；步驟2、執(zhí)行“窗口”/“行為”命令，在窗口的右側打開行為面板。在行為面板中單擊按鈕，在彈出的菜單中選擇”建議不在使用”/“播放聲音”命令，彈出“播放聲音”對話框，如圖所示。工作任務一—為主頁插入背景音樂步驟3、單擊“播放聲音”對話框中的“瀏覽”按鈕，彈出“選擇文件”對話框，在對話框中選擇存放于music文件夾中的bg.mid(或bg.wav)文件，單擊“確定”按鈕。步驟4、檢查“行為”面板中的事件是否為“onLoad”（表示主頁加載就播放聲音），若不是，在事件下拉列表框中選取該事件。

工作任務一—為主頁插入背景音樂步驟5、選擇插入的聲音文件（一般位于所插背景音樂的主頁下方），在“屬性”面板中單擊“參數(shù)”按鈕，打開參數(shù)窗口，設置其參數(shù)，后按“確定”按鈕，如圖所示。工作任務一—為主頁插入背景音樂1、選取該聲音文件2、單擊“參數(shù)”按鈕3、設置以下參數(shù)各參數(shù)的含義：LOOP音樂是否循環(huán)播放AUTOSTART音樂是否自動播放MASTETSOUND允許將多個<embed>標識組合起來，作為一個進行控制HIDDEN是否完全隱藏媒體播放器，若沒有隱藏，則會顯示出系統(tǒng)默認的媒體播放插件工作任務一—為主頁插入背景音樂認識行為：1、什么是行為？

行為的特點是強大的網(wǎng)頁交互功能。它是事件與動作的彼此結合。是基于JavaScript來實現(xiàn)動態(tài)網(wǎng)頁和交互的。一個行為是由一個事件觸發(fā)一個動作組成的，因此行為的基本元素有兩個：事件和動作。

例如，插入背景音樂，此時的頁面加載稱為事件，播放音樂稱為動作，一般的行為都是要由事件來激活動作。

完成工作任務一所需的知識

2、行為面板

：

在Dreamwaever中，對行為的添加和控制主要通過“行為”面板來實現(xiàn)。選擇“窗口”/“行為”命令，打開行為面板，如圖所示。

顯示設置事件完成工作任務一所需的知識

3、添加行為

：

用戶可以將行為添加給整個文檔（body部分），也可以添加給鏈接、圖像、表單等對象或任何其他HTML元素。每個事件可以指定多個動作。動作按順序列表依次發(fā)生。各事件的含義如下表所示：完成工作任務一所需的知識常見行為事件及含義事件（Events）說明OnBlur取消選中對象時OnClick單擊對象OndblClick雙擊對象OnError發(fā)生錯誤時OnFocus選中指定對象時OnKeyDown按下任意鍵盤鍵時OnKeyPress按下并釋放任意鍵盤鍵時OnKeyUp按下鍵盤鍵后釋放時OnLoad圖像或頁面載入完成時OnMouseDown按下光標鍵時OnMouseMove光標在指定對象上移動時OnMouseOut光標離開指定對象時OnMouseOver光標剛開始指向指定對象時OnMouseUp釋放按下的光標鍵OnSubmit提交表單時onUnload離開頁面時注：NS表示NetscapeNavigator,IE表示InternetExplorer,√表示選中項。完成工作任務一所需的知識4、編輯行為

：

在添加了行為以后，可以改變觸發(fā)動作的事件、添加或刪除動作以及改變動作的參數(shù)等。修改事件：只需在事件下拉列表框中進行選取即可修改動作：在行為面板中右擊（或雙擊）欲修改的動作，在彈出的快捷菜單中選取“編輯行為”命令，在彈出的窗口中進行修改即可。完成任務所需的知識工作任務一課堂實踐

為自己的班級網(wǎng)站主頁添加彈出信息窗口，使之在主頁面加載時即彈出信息，如下圖所示。制作滾動公告欄步驟1、將需制作滾動通知處的原來切片刪除，在刪除之前記下其高度和寬度；步驟2、選擇“插入記錄”/“標簽”命令，在HTML標簽下的頁元素右側選取marquee，單擊“插入”按鈕，如圖所示。工作任務二—制作滾動公告欄步驟3、切換到代碼視圖方式，將光標定位于<marquee></marquee>標簽之間，輸入滾動的文字,當滾動的文字多行時，每一行文字后加html換行標識符<br>；步驟4、使用“窗口”/“標簽檢查器”命令，單擊“屬性”選項卡，單擊“屬性”中“未分類”前的“+”，展開marquee標簽的屬性，進行屬性設置，如圖所示。屬性值各參數(shù)設置如下：behavior：alternatedirection：rightloop：-1style：font:14px;color:red;工作任務二—制作滾動公告欄direction參數(shù)：表示滾動的方向，默認為left工作任務二—制作滾動公告欄Behavior參數(shù)：表示滾動的方式工作任務二—制作滾動公告欄loop

表示循環(huán)的次數(shù)，值是正整數(shù)，默認為無限循環(huán)，默認值為無限。“-1”也為無限工作任務二—制作滾動公告欄scrollamount

表示運動速度，值是正整數(shù)，單位為像素，默認為6，即每次移動6像素的距離,數(shù)值越小移動速度越慢。Scrolldelay用于設定兩次滾動操作之間的間隔時間，單位為毫秒。如果要讓滾動看起來流暢，數(shù)值應該盡量小。height、width

表示運動區(qū)域（滾動字幕）的高度和寬度，值是正整數(shù)（單位是像素）或百分數(shù)，默認width=100%height為標簽內元素的高度。Style設置字幕內容的樣式。如設置字幕文字大小為12像素，則輸入“font:12px;”。工作任務二—制作滾動公告欄步驟5、設置鼠標放上去時字幕停止，移開時字幕流動的效果。各參數(shù)設置完畢，設置鼠標行為。進入“行為”面板，單擊“顯示所有事件”按鈕，出現(xiàn)事件，選取其中的onMouseOver和onMouseOut兩個事件顯示所有事件按鈕onMouseOver事件設置鼠標移動到滾動字幕時的動作，常設置為停止?jié)L動。設置為this.stop();

onMouseOut事件設置鼠標離開滾動字幕時的動作，常設置為開始滾動。設置為this.start();

工作任務二—制作滾動公告欄制作運動廣告(需用到AP元素和時間軸)1、制作簡單路徑的運動廣告步驟1、準備工作：自己制作或網(wǎng)上搜索二幅用來制作運動廣告效果的圖片，將其以move1和move2為文件主名存于站點根目錄（ClassWeb）下的images文件夾中；步驟2、打開需放置運動廣告的網(wǎng)頁文件：打開index.html網(wǎng)頁文件；步驟3、插入AP元素：選擇“插入對象”/“布局對象”/“APDiv”命令，在網(wǎng)頁文件中插入AP元素；（插入AP元素的另一種方法：選擇“窗口”/“插入”命令，在文檔編輯窗口的上方將出現(xiàn)如下圖所示的工具欄，選中其中的“布局”項，選取其中的“繪制APDiv”按鈕）工作任務三—運動廣告的制作繪制AP元素按鈕就是我步驟4：向AP元素中插入圖像：選中AP元素，使用“插入記錄”/“圖像”命令，在彈出的“圖像標簽輔助功能屬性”對話框的“替換文件”框中輸入文本（也可以不輸），詳細說明框中可根據(jù)需要進行輸入或不輸，這里我們在替換文本框中輸入“班級文學”后按“確定”按鈕。工作任務三—運動廣告的制作步驟5：將圖像移入AP元素中，調整AP元素的大小與圖像的大小一致；步驟6：選中AP元素及其內的圖像，使用“修改”/“時間軸”/“添加對象到時間軸”命令（或選中AP元素及其內的圖像，右擊，在彈出的快捷菜單中選取“添加到時間軸”命令），此時將在窗口下方彈出“時間軸”屬性對話框；工作任務三—運動廣告的制作步驟7：插入一個關鍵幀：將最后一幀拖長到50幀，將“播放頭”拖到10幀處，右擊動畫條，在彈出的菜單中選“增加關鍵幀”命令（或按下Ctrl鍵，在動畫條上單擊，這時就在10幀處插入了一個關鍵幀）。同樣的分別在20幀、30幀和40幀處增加關鍵幀。步驟8：選中第10幀，將AP元素（包括圖像）拖向合適位置；在時間軸上選第20幀，將AP元素（包括圖像）拖向另一合適位置；在時間軸上選第30幀，將AP元素（包括圖像）拖向另一合適位置；在時間軸上選第40幀，將AP元素（包括圖像）拖向另一合適位置；在時間軸上選第50幀，將AP元素（包括圖像）拖回起始位置。步驟9：若希望有更復雜的動畫路徑，可多定義一些關鍵幀及在畫面中的位置。工作任務三—運動廣告的制作步驟12：按中時間軸中部的“

”按鈕，即可觀察動畫效果。步驟13：按F12鍵預覽效果思考：我們發(fā)現(xiàn)廣告圖像運動的速度較快，如何改變運動的速度呢？工作任務三—運動廣告的制作步驟11：勾選時間軸屬性中的自動播放和循環(huán)兩個選項。步驟15：給時間軸加入交互（當鼠標放到圖像上時，圖像停止運動，當鼠標離開圖像時，圖像繼續(xù)運動）（1）選中動畫條，打開行為面板，單擊行為面板中的添加行為按鈕“

”，在彈出的快捷菜單中選“播放時間軸”動作，從彈出的“播放時間軸”對話框中選擇要播放的時間軸，單擊“確定”按鈕，如圖所示：工作任務三—運動廣告的制作步驟14：改變廣告運動的速度：將時間軸屬性欄中的Fps(Framepersecond)框中的值改?。J值為15），即可改變運動速度。（2）將默認的鼠標事件改變?yōu)閛nMouseOut事件（即鼠標離開時，圖像運動）。同樣操作，再次選“停止時間軸”動作，改變onclick事件為onMouseOver事件。（即鼠標放到圖像上時，圖像停止運動）；這樣就完成了當鼠標指針移到圖像上時，圖像停止，當鼠標移開圖像時，圖像運動，完成交互的效果。步驟16：完成廣告圖片的交替變換效果（1）選中要交替圖像的AP元素及圖像。（2）在“行為”面板中單擊“添加行為”按鈕，在彈出的快捷菜單中選擇“交換圖像”命令。工作任務三—運動廣告的制作（3）在彈出的交換圖像對話框中，單擊“瀏覽”按鈕，把當鼠標移上后替換的圖像選中。勾選“預先載入圖像”復選框，如圖所示。工作任務三—運動廣告的制作要確保這項出現(xiàn)喲！工作任務三—運動廣告的制作（4）再次單擊“添加行為”按鈕，在彈出的快捷菜單中選“恢復交換圖像”，從而完成鼠標離開后又變回原來的圖章像；步驟17為運動廣告加入超鏈接，使之鏈接到對應的頁面中。（1）選中AP元素內的圖像。

（2）在圖像“屬性”面板的“鏈接”后的文本框中單擊瀏覽按鈕，選中所要鏈接的網(wǎng)頁文件，若想鏈接到其他網(wǎng)站中，在文本框內輸入網(wǎng)址即可，如要鏈接到新浪網(wǎng)，則在文本框中輸入即可。

2制作復雜路徑的動畫若按上述方法創(chuàng)建一個復雜路徑的動畫，創(chuàng)建一個個關鍵幀的方法比較麻煩，我們通過使用錄制AP元素的時間軸運動路徑的方法來完成：步驟1

使用“插入記錄”/“布局對象”/“AP元素”命令，插入一個新AP元素；步驟2

選中剛插入的AP元素，使用“插入記錄”/“圖像”命令，依據(jù)圖像的大小調整AP元素的大?。?若是在同一頁面上對不同的AP元素圖像進行動畫的設置，需新建時間軸：使用“修改”/“時間軸”/“添加時間軸”)步驟3

保持AP元素處于被選擇狀態(tài)；步驟4

使用“修改”/“時間軸”/“記錄AP元素路徑”選項；工作任務三—運動廣告的制作步驟5

在頁面上拖動AP元素（包含圖像在內的AP元素），創(chuàng)建想要的運動路徑；這樣Dreamweaver便自動添加一個動畫條到時間軸中，同時也添加了適當數(shù)量的關鍵幀；步驟6

在“時間軸”面板中，單擊“回首幀”按鈕，勾選“自支播放”和“循環(huán)”選項，即完成復雜路徑動畫的制作。3廣告圖片的交替變換同前工作任務三—運動廣告的制作在網(wǎng)頁中實現(xiàn)圖片輪番顯示法一：代碼+flash步驟1：進入/wz/dw/000.htm網(wǎng)站，網(wǎng)站提供了在Dreamweaver中制作圖片輪番顯示效果的十種方法，選擇其中一種來制作圖片輪番顯示效果，這里我們選擇第九種方法。

步驟2:將效果圖中需設置圖片輪番顯示的切片刪除，刪除之前記下要刪切片的高和寬；步驟3:根據(jù)主頁效果圖中放置圖片輪番顯示處的位置的大小，把要輪番顯示的幾幅圖片在photoshop中進行裁切，要求大小一樣

；工作任務四—圖片輪番滾動步驟4:將裁切好的圖片分別以01.jpg;02.jpg……等為文件名保存于站點文件夾ClassWeb下的images文件夾中；步驟5:在站點文件夾ClassWeb\media文件夾下新建flash文件夾，把在網(wǎng)站中下載的flash文件（focus.swf）放置到該文件夾中。步驟6:將網(wǎng)站中用于實現(xiàn)輪番顯示的代碼復制到記事本中，并將代碼中設置的圖片的高度、寬度依據(jù)切片的高與寬進行設置，去除其中不需要的功能代碼，并依據(jù)flash文件夾的放置位置對代碼進行更改。步驟7:光標置于刪除切片的圖片框中，切換到代碼視圖中，將記事本中修改好后的代碼復制到光標所在位置處。

工作任務四—圖片輪番滾動法二：單純用flash制作

可參考網(wǎng)址/web/wtp/pmflash01.htm自己制作工作任務四—圖片輪番滾動實現(xiàn)圖片無縫滾動顯示工作任務四—圖片無縫滾動效果步驟1：光標定位于要設置圖片滾動的圖片處，切換到代碼視圖狀態(tài)；選擇“插入記錄”/“標簽”命令，在HTML標簽下的頁元素右側找到marquee標簽，在圖片兩側加入marquee標簽，即用marquee標簽將圖片所在的<img>處的代碼包圍起來；步驟2：存盤后瀏覽，觀察發(fā)現(xiàn)，在滾動的過程中有空隙，不是我們想要的效果。設置圖片無縫滾動，單獨用marquee標簽無能為力，需使用代碼完成。使用代碼的方法設置圖片無縫滾動的方法步驟為：步驟1:將效果圖中需設置圖片無縫滾動顯示的切片刪除，刪除之前記下要刪除的切片的高度和寬度。步驟2：使用搜索引擎搜索使得圖片無縫滾動的代碼，將代碼復制下來，并根據(jù)需要將代碼進行修改，圖片的大小，存放位置等都需根據(jù)自己的情況進行修改。垂直無縫滾動參考網(wǎng)址：/web_div_css/blog/item/3341c9a611a380fc9052eefe.html水平無縫滾動參考網(wǎng)址：

/article/916.htm工作任務四—圖片無縫滾動效果步驟3：將光標置于刪除切片圖像的框內，切換到代碼視圖狀態(tài)，將修改后的代碼復制進來；步驟4：存盤預覽效果工作任務四—圖片無縫滾動效果完成工作任務三所需的知識點AP元素1、AP元素的概念：

AP元素是一種HTML頁面元素，是一種網(wǎng)頁元素定位技術。可以將它定位在頁面上的任意位置?？梢栽贏P元素里放置文本、圖像等對象甚至其他層。AP元素可以使頁面上元素進行重疊和復雜的布局。

“AP元素”可以比作一張透明的紙，網(wǎng)頁的元素可以畫在這張紙上，當將多張這樣的紙重疊在一起，上層有元素的地方，就會遮住下層，下層的元素可以透過上層透明的地方顯示出來。2、AP元素的基本操作（1）創(chuàng)建AP元素（插入AP元素）插入一個AP元素方法一：使用“插入對象”/“布局對象”/“APDiv”命令方法二：使用布局工具欄的“繪制APDiv”工具按鈕。完成工作任務三所需的知識點連續(xù)繪制多個AP元素方法：單擊布局工具欄的“繪制APDiv”工具按鈕，然后按下ctrl鍵不放，在所需多個AP元素的頁面上繪制即可（2）選擇AP元素：

選擇一個AP元素法一：在文檔窗口中單擊AP元素的標志（若AP元素標記不可見，執(zhí)行“查看”/“可視化助理”/“不可見元素”命令，即可出現(xiàn)）法二：單擊AP元素邊界

法三：在窗口右側的“AP”面板中單擊AP元素的名稱

完成工作任務三所需的知識點

選擇多個AP元素法一：按住shift鍵在兩個、多個AP元素內或邊界上單擊法二：在窗口右側的“AP元素”面板上按住shift鍵單擊兩個或多個AP元素的名稱當多個AP元素被選擇時，最后選擇的AP元素的手柄以藍色突出顯示，其他AP元素的手柄以白色突出顯示。

完成工作任務三所需的知識點（3）改變AP元素的大?。?/p>

通過過周圍的黑色調整柄拖動控制AP元素的大?。?）移動AP元素的位置：

拖動AP元素左上角的選擇柄可以移動AP元素的位置（5）插入AP元素對象：

光標移動AP元素內，就可以在AP元素內插入對象（元素），如插入圖像、AP元素、表單、文本或表格等其他元素（6）對齊AP元素：

頁面上有多個AP元素時，我們要對齊這些AP元素選擇要對齊的AP元素使用“修改”/“排列順序”菜單中的對齊選項對齊時以最后選定的那一個AP元素作為依據(jù)對齊完成工作任務三所需的知識點（7）AP元素面板的認識執(zhí)行菜單“窗口”/“AP元素”，顯示出AP元素面板，左邊（小眼睛）為控制AP元素的顯示/隱藏，缺省為顯示。“張開眼睛”圖標為顯示，“合上眼睛”為隱藏。單擊左列可控制眼睛的開合，達到控制AP元素的顯示/隱藏的目的。名稱apDiv1、apDiv2……為AP元素的名稱，右邊顯示的是AP元素的Z值。通過數(shù)值的調整可控制AP元素重疊的順序。完成工作任務三所需的知識點（8）AP元素與表格的轉換把AP元素轉換成表格的目的是為了與3.0及其以下版本的瀏覽器兼容。對于高版本的瀏覽器無需將AP元素轉換成表格。

AP元素與表格是可以相互轉換的，通過執(zhí)行菜單“修改”/“轉換”，可以選擇“將表格轉換為APDiv”也可以選擇“將APDiv轉換為表格”，可以實現(xiàn)表格與AP元素的相互轉換。但AP元素轉為表格時，必須清楚不存在有重疊、嵌套，否則轉換將無法進行。完成工作任務三所需的知識點（9）設置AP元素的屬性使用“窗口”/“屬性”選項，打開屬性面板，選中需設置屬性的AP元素（選中一個AP元素或多個AP元素），“屬性”面板中隨即顯示出AP元素的常用屬性。剪輯當AP元素內的對象（如圖片）尺寸大于AP元素的大小時，使用剪輯設置其顯示的區(qū)域。完成工作任務三所需的知識點Z軸指定AP元素的索引（或堆疊順序號），編號較大的AP元素出現(xiàn)在編號較小的AP元素的上面。編號可正可負，也可以是0左和上指AP元素的位置寬和高指定AP元素的寬度和高度可見性

決定AP元素的初始顯示狀態(tài)。本屬性有以下選項

default（缺?。┎恢付?，由瀏覽器的默認值決定；

inherit(繼承)子AP元素將繼承父AP元素的屬性；

visible(可見)顯示AP元素的內容，將AP元素設為可見狀態(tài)；

hidden(隱藏)隱藏AP元素的內容

完成工作任務三所需的知識點背景圖像指定AP元素的背景圖像。單擊瀏覽圖標，可瀏覽并選擇一個圖像文件，或直接在文本框中輸入圖像文件的路徑背景顏色指層的背景顏色，此選項為空時指定透明背景溢出指定AP元素的內容超過了AP元素的大小將發(fā)生的事件如下

scroll（滾動）給AP元素添加滾動條，不管內容是否超過了層大小；

auto(自動)在AP元素的內容超過它的邊界時自動顯示滾動條；

visible(可見)增加AP元素的大小，以便層的所在內容可見。層向下或向右擴大；

hidden(隱藏)保持AP元素的大小，并剪掉與層大小不符的任何內容，不顯示滾動條完成工作任務三所需的知識點完成工作任務三所需的知識點時間軸1、時間軸的概念：時間軸通過隨時間的變化改變AP元素的位置、大小、可見性和疊放順序來創(chuàng)建動畫。這就是動態(tài)HTML的表達方式，也是Dreamweaver強于其它網(wǎng)頁編輯器的地方。時間軸只能移動AP元素，因此想讓圖象或文本對象移動，就須先創(chuàng)建AP元素，然后在AP元素中插入對象。

2、時間軸面板時間軸描述了層和圖像的屬性隨時間變化的情況。選擇“窗口”/“時間軸”選面，將打開時間軸面板。

在時間軸面板中：

“時間軸”下拉列表框：指定當前在“時間軸”面板中顯示文檔的哪些時間軸播放欄：指示在網(wǎng)頁中顯示的是哪一幀。

動畫通道：顯示動畫層的地方。

完成工作任務三所需的知識點

關鍵幀：動畫條中的小圓圈是關鍵幀。

自動播放：當網(wǎng)頁載入到瀏覽器時使當前時間軸自動播放。

循環(huán)：當網(wǎng)頁載入到瀏覽器時使當前時間軸無限循環(huán)播放。

Fps:每秒幀數(shù)，可以通過設置幀的總數(shù)和Fps來控制動畫的持續(xù)時間。每秒15幀是默認設置。完成工作任務三所需的知識點3、創(chuàng)建時間軸動畫由于時間軸只能移動AP元素，因此如果要移動圖像或文本，則要創(chuàng)建一個AP元素，然后在該AP元素中插入圖像、文本或其它類型的內容。

步驟見前面的實例4、使用多個時間軸

在網(wǎng)頁中用一個時間軸控制所有動作不如用多個時間軸分別控制網(wǎng)頁的不同部分簡單。要管理多個時間軸，請使用以下選項：要創(chuàng)建新的時間軸，選擇“修改”/“時間軸”/“增加時間軸”。要刪除時間軸，選擇“修改”/“時間軸”/”刪除時間軸”。要為時間軸重新命名，選擇“修改”/“時間軸”/“重新命名時間軸”。完成工作任務三所需的知識點總結與作業(yè)作業(yè)總結Dreamweaver中行為、AP元素、時間軸的使用1、在自己的班級網(wǎng)站主頁上完成課堂中所講的特殊效果2、預習管理員登錄部分內容項目三主頁的設計與制作子項目3-3：主頁制作（管理員登錄部分的設計與制作（1））

知識技能目標1、了解表單的一般工作流程，會在網(wǎng)頁中制作表單；2、會使用JavaScript腳本代碼完成客戶端信息完整性的檢查；工作任務列表任務一：建立登錄表單，并將表單提交給logincheck.asp處理。任務二：使用JavaScript腳本代碼完成客戶端表單輸入數(shù)據(jù)不能為空的檢查準備工作1、將ClassWeb文件夾解壓縮，并設其為主目錄；2、建立名為“MyClass”的動態(tài)站點；3、啟動Dreamweaver,在站點文件夾ClassWeb下新建文件夾login，并在login文件夾下新建文件login.asp。任務：建立登錄表單，將表單提交給logincheck.asp進行處理。工作任務一建立登錄表單實現(xiàn)步驟：步驟1、雙擊login.asp文件，進入“設計”視圖狀態(tài)；步驟2、創(chuàng)建表單

表單，其作用就是把各對象作為一個整體進行處理，一個頁面可以包含多個表單，在同一表單中的對象是一個整體，與另一個表單中的對象一般是不相干的。創(chuàng)建表單，只需按以下步驟：工作任務一建立登錄表單（1）在插入工具欄中選擇“表單”，以顯示出表單工具欄（若插入工具欄不出現(xiàn)，可以使用“窗口”/“插入”命令來調出）（2）單擊“表單”控件，即可以在頁面中出來一個紅色虛線圍住的區(qū)域，就是表單。若沒有看到創(chuàng)建的表單，通過“查看”/“可視化助理”/“不可見元素”命令，來隱藏或顯示表單。工作任務一—建立登錄表單表單控件就是我步驟3、表單中插入表格在表單中插入一個四行二列的表格，表格的大小根據(jù)主頁效果圖登錄表單中切片的大小來確定。在表格屬性面