網(wǎng)頁(yè)制作與規(guī)劃實(shí)訓(xùn)報(bào)告

1、學(xué) 號(hào)： 實(shí) 訓(xùn) 報(bào) 告教 學(xué) 院課程名稱專 業(yè)班 級(jí) 姓 名指導(dǎo)教師2013年12月27日實(shí)訓(xùn)報(bào)告內(nèi)容一、 實(shí)訓(xùn)名稱網(wǎng)頁(yè)制作與規(guī)劃實(shí)訓(xùn)二、 實(shí)訓(xùn)時(shí)間第16-17周三、 實(shí)訓(xùn)地點(diǎn)K4-206四、 實(shí)訓(xùn)目的本實(shí)訓(xùn)的目標(biāo)是要求學(xué)生掌握網(wǎng)站設(shè)計(jì)的主要原則和網(wǎng)站制作的規(guī)范；掌握網(wǎng)站制作與設(shè)計(jì)的全過程；熟悉使用Dreamweaver對(duì)網(wǎng)頁(yè)進(jìn)行真題的布局和設(shè)計(jì)；掌握對(duì)網(wǎng)站進(jìn)行創(chuàng)建和管理等操作；培養(yǎng)學(xué)生的自主學(xué)習(xí)精神；提高學(xué)生思考問題、分析問題、解決問題的能力，適應(yīng)市場(chǎng)需求。需要了解以下知識(shí)。1. 了解組成網(wǎng)頁(yè)的基本元素2. 掌握文本元素的添加和編輯方法3. 掌握?qǐng)D像元素的添加和運(yùn)用技巧4. 掌握幾種鏈接的

2、具體創(chuàng)建方法5. 掌握?qǐng)D像元素的添加和運(yùn)用技巧五、 實(shí)訓(xùn)內(nèi)容實(shí)訓(xùn)一 站點(diǎn)的創(chuàng)建與基本HTML標(biāo)記的應(yīng)用任務(wù)一：在網(wǎng)頁(yè)中基本頁(yè)面元素的應(yīng)用實(shí)訓(xùn)步驟：1在c盤或其他盤新建一個(gè)文件夾作為站點(diǎn)文件夾，文件夾名稱為myweb3。復(fù)制給定的一個(gè)圖像文件夾images和一個(gè)網(wǎng)頁(yè)文件sx3-2.htm。2. 在默認(rèn)打開的網(wǎng)頁(yè)中選擇“修改”|“頁(yè)面屬性”菜單命令，設(shè)置使背景顏色為#CCCCCC，輸入網(wǎng)頁(yè)首行文本“老郵票知多少”，大小為48像素，顏色為#FFFF00，字體為“華文行楷”粗體，居中對(duì)齊。3. 在網(wǎng)頁(yè)第二行插入更新日期和版權(quán)信息，選擇“插入”l“日期”菜單命令，將當(dāng)前編輯日期插入網(wǎng)頁(yè)，輸入版權(quán)信息“版

3、權(quán)所有：DWeisohucom”整行文字大小為18像素，顏色為#000000，字體為默認(rèn)字體，粗體，居中對(duì)齊。4. 網(wǎng)頁(yè)第三行選擇“插入”|“水平線”菜單命令，插入一條水平線，高度為5，其他屬性取默認(rèn)值。5. 在網(wǎng)頁(yè)第四行、第七行各插入一行文本，內(nèi)容分別為“紀(jì)33(C33)：中國(guó)古代科學(xué)家、1955825發(fā)行600萬套、全套4枚、新票市場(chǎng)參考價(jià)￥550元?！焙汀凹o(jì)36(C36)：中國(guó)工農(nóng)紅軍勝利完成二萬五千里長(zhǎng)征二十周年、19551230發(fā)行600萬套、全套2枚、新票市場(chǎng)參考價(jià)￥850元?！蔽淖执笮?8像素，格式為“項(xiàng)目列表”，其他屬性取默認(rèn)值。6. 在網(wǎng)頁(yè)第五行選擇“插入”I“圖像”菜單命

4、令，插入四張郵票圖像，文件名分別為0637.jpg、0638.jpg、0639.jpg、0640.ipg。每張圖像的寬為110、高為150，其他屬性取默認(rèn)值。7. 在網(wǎng)頁(yè)第六行插入一條水平線，寬為400像素，其他屬性取默認(rèn)值。在網(wǎng)頁(yè)第八行插入兩張郵票圖像，文件名分別為0645.jPg、0646.ipg，圖像寬高分別為150110和110150，其他屬性取默認(rèn)值。8. 保存網(wǎng)頁(yè)。9. 打開并編輯給定的網(wǎng)頁(yè)文件sx32htm。10. 建立圖像熱點(diǎn)鏈接。為此選中網(wǎng)頁(yè)上方圖像，利用“屬性”檢查器中的熱點(diǎn)工具在圖像上建立兩個(gè)熱點(diǎn)。從左到右兩個(gè)熱點(diǎn)分別鏈接到sx3-2-1htm和sx3-2-2htm文件1

5、1. 插入命名錨記。為此將光標(biāo)放在網(wǎng)頁(yè)標(biāo)題“教育天地”后，選擇“插入”I命名錨i6'菜單命令，在輸入對(duì)話框中輸入錨記“A0"。依此方法在網(wǎng)頁(yè)右側(cè)文本“教養(yǎng)員”、“教員”、“特級(jí)教師”、“助教”、“講師”、“副教授”和“教授”處分別插入命名錨記，依次為A1A7。12. 創(chuàng)建錨點(diǎn)鏈接。為此分別創(chuàng)建左列目錄文本“教養(yǎng)員”、“教員”、“特級(jí)教師”、“助教”、“講師”、“副教授”和“教授”與右列命名錨記A1A7的錨點(diǎn)鏈接。然后再將各段下方的文本“返回”與標(biāo)題處錨記A0建立錨點(diǎn)鏈接。13. 創(chuàng)建無址鏈接。選中網(wǎng)頁(yè)上方文本“教師篇”，在“屬性”檢查器的鏈接欄中輸入“”即可。14. 創(chuàng)建郵件

6、鏈接。選中網(wǎng)頁(yè)最后一行文本“聯(lián)系”，然后在“屬性”檢查器的鏈接欄中輸入“mailto：abc163com'即可。15. 保存網(wǎng)頁(yè)。16. 新建一張網(wǎng)頁(yè)，輸入“名人看教育”，文件名為sx3-2-1.htm，保存在站點(diǎn)中。再新建一張網(wǎng)頁(yè)，輸入“教育話題”，文件名為sx3-2-2.htm，保存在站點(diǎn)中。17. 站點(diǎn)測(cè)試。任務(wù)二：HTML基本標(biāo)記的應(yīng)用1. 在C盤或其他盤符下新建一個(gè)工作夾，制作的所有頁(yè)面都保存在這個(gè)文件夾內(nèi)。將給定的圖像素材文件復(fù)制到工作文件夾中。2. 建立名稱為了test.html的HTML頁(yè)面，頁(yè)面標(biāo)題為“基本標(biāo)記測(cè)試”；頁(yè)面內(nèi)的所有標(biāo)題文字均為標(biāo)題2格式；單擊鏈接文字時(shí)

7、要求在新的瀏覽器窗口中，打開test.html頁(yè)面自身；圖片名稱為1gif，存放在工作文件夾中，與testhtm頁(yè)面位于同一位置；3. 建立名稱為loginhtm的HTMI。頁(yè)面，效果如圖42所示。頁(yè)面功能要求為：(1)頁(yè)面標(biāo)題為“表單標(biāo)記測(cè)試”；(2)“姓名”為單行文本框，寬10個(gè)字符，最多能填寫20個(gè)字符；(3)“性別”為單選按鈕，傳遞的值為“男”和“女”，第一個(gè)按鈕為默認(rèn)選中；(4)“職業(yè)”為下拉列表框，內(nèi)容有“教師”、“工人”和“職員”；(5)“愛好”為復(fù)選按鈕，傳遞的值分別對(duì)應(yīng)為1，2，3，4，第一個(gè)按鈕為默認(rèn)選中；(6)“留言”為多行文本框，大小為5行40列，默認(rèn)內(nèi)容為“說幾句吧!

8、”；(7)“提交”按鈕和“重置”按鈕分別完成提交表單功能和重置表單功能，表單提交方式為get；(8)頁(yè)面上的所有文字默認(rèn)為3號(hào)字。4. 頁(yè)面測(cè)試實(shí)訓(xùn)二 表格、表單和框架的應(yīng)用任務(wù)一：表格的應(yīng)用1.在c盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。輸入你想要的站點(diǎn)名稱，這里輸入myweb5。在此文件夾中新建一個(gè)圖像文件夾images，并將給定圖像素材復(fù)制到其中。2. 建立本地站點(diǎn)。3. 在默認(rèn)打開的網(wǎng)頁(yè)中，選擇“修改”l頁(yè)面屬性”菜單命令，設(shè)置背景顏色為#clclcl。在網(wǎng)頁(yè)中插入一個(gè)2行2列的表格。選中表格，在“屬性”檢查器的表格“高”輸入框中輸入100，單位為“”。將第一行兩個(gè)單元格合并為一個(gè)。

9、4. 利用“屬性”檢查器調(diào)整3個(gè)單元格的寬度和高度。將光標(biāo)放在第一行單元格內(nèi)，在“屬性”檢查器“高”輸入框中輸入110，“寬”不輸入；將光標(biāo)放在第二行第一個(gè)單元格內(nèi)，在“屬性”檢查器“寬”輸入框中輸入250，“高”不輸入；將光標(biāo)放在第二行第二個(gè)單元格內(nèi)，在“屬性”檢查器“寬”輸入框中輸入450，“高”不輸入。5. 按樣張?jiān)诘谝恍袉卧裰休斎搿帮嬍潮静荨?，文字大?0像素，字體“華文彩云”，前兩個(gè)字白色，后兩個(gè)字顏色為#009900。在文字下方插入一條水平線，屬性取默認(rèn)值。6. 在第二行第一個(gè)單元格內(nèi)插入一嵌套表格，表格相關(guān)屬性分別為8行1列、表格高度和寬度均為100、邊框粗細(xì)為0、單元格邊框?yàn)?/p>

10、0、單元格間距為0。7. 在第二行第二個(gè)單元格內(nèi)插入一嵌套表格，表格相關(guān)屬性分別為3行3列、表格高度和寬度均為100、邊框粗細(xì)為2、單元格邊框?yàn)?、單元格間距為0。在左側(cè)嵌套表格各行中分別輸入圖所示內(nèi)容，然后將8個(gè)單元格的高度均設(shè)置為50。文字大小為36，字體為“華文新魏”，然后將每行文字均創(chuàng)建無址鏈接。8. 在中側(cè)嵌套表格中分別插入5張文件夾images中的圖片，每張圖片的寬度和高度均為150，注意：當(dāng)圖片尺寸變小后，表格不會(huì)自動(dòng)縮小，這時(shí)可以選中整個(gè)表格，在“屬性”檢查器中單擊“清除行高”和“清除列寬”兩個(gè)按鈕來調(diào)整表格大小。9. 保存網(wǎng)頁(yè)。任務(wù)二：框架的應(yīng)用1. 在C盤或其他盤新建一個(gè)文

11、件夾，作為站點(diǎn)文件夾。并將給定的圖片文件和素材文件復(fù)制到站點(diǎn)文件夾中。2. 建立本地站點(diǎn)，在默認(rèn)打開的網(wǎng)頁(yè)中，選擇“插入”面板上的“布局選項(xiàng)卡。單擊框架按鈕的下拉箭頭，從下拉菜單中選擇命令。3. 將光標(biāo)置于頂端框架內(nèi)，選擇“修改”|“頁(yè)面屬性”菜單命令，設(shè)置背景顏色為#C1C1C1。同理將左框架和主框架的頁(yè)面背景色都設(shè)置為#C1C1C1。4. 選擇“窗口“|框架”菜單命令，將“框架”面板調(diào)出來。然后設(shè)置三個(gè)框架的大小。5. 在頂端框架內(nèi)輸入站點(diǎn)標(biāo)題飲食本草”，文字大小為80像素，字體為“華文彩云”，前兩個(gè)字白色，后兩個(gè)字顏色為#009900，居中對(duì)齊。6. 在左側(cè)框架內(nèi)插入一個(gè)表格，表格相關(guān)屬

12、性分別為9行1列、表格高度和為100、 寬度為100、邊框粗細(xì)為0、單元格邊框?yàn)?、單元格間距為0、對(duì)齊方式為右對(duì)齊。然后 將9個(gè)單元格的高度均設(shè)置為50，在其中輸入樣張中的文字，文字大小為36，字體為“華文 新魏”。7. 在右側(cè)主框架中插入一個(gè)表格，表格相關(guān)屬性分別為3行3列、表格高度和寬度任意、 邊框粗細(xì)為2、單元格邊框?yàn)?、單元格間距為0、居中對(duì)齊。按樣張效果在表格中分別插入5 張文件夾images中的圖片，每張圖片的寬度和高度均為150。注意：當(dāng)圖片尺寸變小后，要在“屬 性，檢查器中單擊cc清除行高和“清除列寬”兩個(gè)按鈕，使表格調(diào)整到最小。8. 保存框架網(wǎng)頁(yè)。9.按導(dǎo)航欄目分別建立8個(gè)

13、相關(guān)內(nèi)容的頁(yè)面，或者從提供的素材文件中獲取。在左側(cè)框架內(nèi)選擇“首頁(yè)”文字，在“屬性”檢查器的鏈接欄中設(shè)置目標(biāo)文件為本框架集頁(yè)面Indexhtm，目標(biāo)選擇“parent'。在左側(cè)框架內(nèi)選擇“谷物篇”文字，在“屬性”檢查器的“鏈接”欄中設(shè)置目標(biāo)文件為素材文件guwuhtm，“目標(biāo)”欄選擇右側(cè)主框架的名稱“mainframe”。同理，將左側(cè)框 架內(nèi)的各項(xiàng)導(dǎo)航內(nèi)容分別鏈接到對(duì)應(yīng)的素材文件，且“目標(biāo)”均設(shè)置為“mainframe”。再次選擇“文件”|“保存全部”菜單命令。10. 預(yù)覽和測(cè)試站點(diǎn)。實(shí)訓(xùn)三 網(wǎng)頁(yè)圖像和動(dòng)畫的設(shè)計(jì)與應(yīng)用任務(wù)一：gif動(dòng)畫1. 在c盤或其他盤新建一個(gè)文件夾，本次實(shí)訓(xùn)的內(nèi)容

14、將全部保存在該文件夾下。2. 打開Fireworks 8，在“開始頁(yè)”中選擇“新建Fireworks文件”，新建一個(gè)空白文件。在彈出的“新建文檔”中設(shè)置畫布的“寬”為360，“高”為400，畫布顏色選擇白色，然后單擊“確定”按鈕。選擇“文件”|另存為”菜單命令，將文件以“sx61png”為文件名保存在指定文件夾下。3. 選擇“文件”l導(dǎo)入”菜單命令，在“導(dǎo)入”對(duì)話框中選擇需要導(dǎo)入的圖片“畫框gif"。此時(shí)光標(biāo)的形狀變?yōu)閂-，在畫布上單擊鼠標(biāo)左鍵，即可將該圖片以原始大小導(dǎo)入(也可以按下左鍵拖放，將圖片以不同的大小導(dǎo)入)。此時(shí)可以在“層”面板中看到剛導(dǎo)入的對(duì)象。用相同的方法導(dǎo)入第二張圖片

15、“向日葵png”，將圖片的大小調(diào)整合適，放入畫框內(nèi)，并調(diào)整整個(gè)圖片的坐標(biāo)，到此這個(gè)圖片的制作就完成了。 單擊“主要”工具欄上的“保存”按鈕，保存文件。4. 選擇“窗口”l“優(yōu)化”菜單命令，打開“優(yōu)化”面板，如圖6-23所示的設(shè)置。選擇"文件”|“導(dǎo)出”菜單命令，在彈出的“導(dǎo)出”對(duì)話框中，“文件名”一欄輸入文件名“sx61jpg”，選擇侏存類型為“僅圖像”，單擊“保存”按鈕，該文件即可以JPEG的文件格式輸出。 選擇“文件”l礫存”菜單命令，保存源文件，單擊“預(yù)覽”按鈕預(yù)覽效果。5. 打開剛剛創(chuàng)建的向日葵畫框，即“sx61png”。在“幀”面板，選擇剛才已有的第一幀，將它拖到“新建重制

16、幀”按鈕上釋放，得到復(fù)制的一幀。將新復(fù)制的第二幀選中，將原有的向日葵圖片刪除，重新導(dǎo)入另一幅圖像“椰子樹jpg”，并調(diào)整大小使其居于畫框內(nèi)。這樣當(dāng)前文件具有兩個(gè)幀的畫面。6. 單擊位于工作窗口下方幀控制器的“播放”按鈕，觀看動(dòng)畫播放效果。單擊“停止”按鈕，停止播放。 7.導(dǎo)出，選擇導(dǎo)出的文件格式為“GIF動(dòng)畫”，然后再選擇“導(dǎo)出”按鈕，就可以導(dǎo)出GIF動(dòng)畫文件，文件名為“sx62gift。這樣可以在Fireworks之外，同樣看到動(dòng)畫效果。任務(wù)二：蒙版和動(dòng)畫的制作1. 在c盤或其他盤新建一個(gè)文件夾，將給定圖像素材復(fù)制到其中，本次實(shí)訓(xùn)的內(nèi)容將全部保存在該文件夾下。2. 新建空白文檔，大小、顏色均

17、默認(rèn)。選擇“文件”l“導(dǎo)入”菜單命令，將指定文件夾中的圖像導(dǎo)入文檔。選中圖片，在“屬性”檢查器中修改圖片的寬、高值(500×400)。然后單擊畫布之外，在“屬性”檢查器選擇“符合畫布”命令，使畫布和圖片一樣大且對(duì)齊。3. 制作矢量蒙版選擇橢圓工具，在窗口中畫一個(gè)橢圓。選擇“編輯”I“剪切”菜單命令，橢圓消失，用鼠標(biāo)再次選中導(dǎo)入的圖像，然后選擇“編輯”I“粘貼為蒙版”菜單命令，出現(xiàn)蒙版效果，打開“層”面板。單擊層中圖片與蒙版之間的鏈接標(biāo)記，可以使它消失，再次單擊又會(huì)出現(xiàn)。它的出現(xiàn)與消失決定著蒙版是否與圖片鏈接在一起。當(dāng)未鏈接時(shí)，單擊“層”面板中的蒙版圖標(biāo)，使它周圍出現(xiàn)綠框。4. 修改蒙

18、版效果，打開剛才新建的蒙版文件，在“層”面板選中蒙版。在“屬性”檢查器中，選擇“蒙版”為“灰度外觀”，將方式改為“放射狀”，并單擊旁邊的拾色器，將放射狀填充的中心調(diào)整為透明(白色)，邊緣調(diào)整為不透明(黑色)，在“屬性”檢查器中，將“邊緣”修改為“羽化”，值為“50'，“描邊”設(shè)置為“無”。5. 制作位圖蒙版，打開給定圖像文件0258.jpg，另存為sx9-2.jpg。把顯示的縮放比例調(diào)整為66%。單擊“層”面板的“添加蒙版”按鈕，并在“層”面板選中蒙版圖標(biāo)。在“工具”面板“顏色”部分中選擇“漸變”工具，然后按照?qǐng)D9-43設(shè)置蒙版的相關(guān)屬性。在圖像中間拖動(dòng)鼠標(biāo)，使填充呈由中心向四周的放射

19、形狀。圖像產(chǎn)生了蒙版效果，同時(shí)“層”面板的蒙版圖標(biāo)也發(fā)生了變化。6. 制作文本蒙版打開給定圖像文件0258.jpg，另存為sx9-3.jpg。把顯示的縮放比例調(diào)整為66%。在“工具”面板“矢量”部分中選取“文字”工具。輸入文字“熱帶風(fēng)情”，字體為華文行楷，大小150。選中文字，選擇“編輯”|“剪切”菜單命令，將其剪切。在“層”面板中選擇取位圖標(biāo)，然后選擇“編輯”|“粘貼為蒙版”菜單命令。圖像產(chǎn)生了蒙版效果，同時(shí)“層”面板也出出了文本蒙版圖標(biāo)。任務(wù)三：風(fēng)吹樹葉1. 新建Flash文件，修改背景顏色為“藍(lán)色”。使用“文本工具”按鈕，創(chuàng)建文字“風(fēng)吹效果”四個(gè)字，用工具選中文字并按【Ctrl】+【B】

20、一次，將四個(gè)字分解為個(gè)體。2. 再次用工具，選中“風(fēng)"字然后選擇“修改”|轉(zhuǎn)換為元件”菜單命令。在彈出轉(zhuǎn)換為符號(hào)"對(duì)話框中，將元件名稱改為“風(fēng)”。3. 重復(fù)步驟(4)，將剩下的三個(gè)字“吹”、“效”、“果”也依次做成圖形元件。4. 選中所有的文字，然后鼠標(biāo)右擊，在彈出的上下文菜單中選擇“分散到各層”，于是個(gè)字將分別處于四個(gè)不同的圖層。這樣做是為了動(dòng)畫漸變能夠正確的執(zhí)行。、5. 在時(shí)間軸中第1 5幀處，給各層“添加關(guān)鍵幀”，選中第15幀。6. 將四個(gè)字全部選中，使用鼠標(biāo)向上移動(dòng)一段距離，選擇“修改”|變形”|“水平翻轉(zhuǎn)”菜單命令，將四個(gè)字水平翻轉(zhuǎn)一下，然后調(diào)整字體的位置，用“對(duì)

21、齊面板排列字體。7. 選中所有元件，在“屬性，檢查器中將顏色“Alpha”值設(shè)為“O”。8. 在“吹”、“效”、“果”三個(gè)元件所在層的第1幀處創(chuàng)建動(dòng)畫補(bǔ)間。按住【Ctrl】鍵，選擇第二層的第2幀到最后一幀。按住鼠標(biāo)左鍵不放，將位置向后拖放一段距離。9. 參照步驟(1 0)內(nèi)容，將效”、“果”兩個(gè)元件所在層的位置分別后移。任務(wù)四：球的跳動(dòng)1. 在c盤或其他盤新建一個(gè)文件夾，并將給定的圖片文件和素材文件復(fù)制到站點(diǎn)文件夾中。本次初訓(xùn)的內(nèi)容將全部保存在該文件夾下。2. 打開Flash 8，在“開始頁(yè)”中選擇“新建Flash文件”，以新建一個(gè)空白文件。背景色為“白色。選擇“文件”|“保存”菜單命令，將文

22、件保存為ex3.fla文件。3. .元件的轉(zhuǎn)換 選擇“修改”|“轉(zhuǎn)換為元件”菜單命令，將圖片轉(zhuǎn)換為“圖形”元件，并命名為“球”。4. 將元件“球”拖放到場(chǎng)景1的圖層1中。在圖層1的第60幀處插入關(guān)鍵幀，在第1幀處添加動(dòng)畫補(bǔ)間。5. 在第1幀處處的“屬性”檢查器中，單擊“緩動(dòng)”旁邊的“編輯”按鈕，設(shè)置動(dòng)作的“緩入|緩出”效果(通過緩入緩出可以控制動(dòng)畫漸變的速度和狀態(tài))。在“自定義緩入緩出”對(duì)話框定義各個(gè)幀處的動(dòng)畫補(bǔ)間速度和方向。6.新建圖形元件，命名為“陰影”，設(shè)置筆觸色為“無”，填充色為“黑白漸變”，白色部分的alpha透明度為29。使用橢圓工具繪制一個(gè)橢圓，設(shè)置面板如圖13-38所示，繪制的

23、效果如圖所示。7. 在場(chǎng)景1中新建圖層2，將元件“陰影”拖放到第1幀處的恰當(dāng)位置(在球落下的下方)，并在第60幀插入關(guān)鍵幀。8. 在圖層2第1幀處設(shè)置元件“陰影”的A1pha透明度為20。在圖層2第1幀處設(shè)置補(bǔ)間動(dòng)作。打開圖層1第一幀“屬性”，檢查器的“自定義緩入緩出”面板，按鍵【Ctrl】+【c】復(fù)制緩動(dòng)效果。打開圖層2第一幀處的“自定義緩入緩出”面板，按I Ctrl 】+【V】組合鍵，將其粘貼到陰影動(dòng)畫補(bǔ)間中。9. 發(fā)布動(dòng)畫實(shí)訓(xùn)四 層疊樣式與層的應(yīng)用任務(wù)一：利用層制作彈出菜單1. 在c盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。將給定的素材文件存入其中。建立本地站點(diǎn)。2. 新建一個(gè)空白頁(yè)面，

24、選擇“修改”I“頁(yè)面屬性”菜單命令，設(shè)置頁(yè)面的背景顏色為#FFCC99，左邊距為0，上邊距為0。在文檔第一行插入一行文字“電子信息職業(yè)技術(shù)學(xué)院”作為站點(diǎn)標(biāo)題，字體為華文行楷，大小為48號(hào)字，顏色為#FF9933。在標(biāo)題的下一行插入一個(gè)l行5列的表格，表格寬度800像素，邊框粗細(xì)為l，高 度30，平均分配各列(每列寬度為160像素)，表格背景顏色為#9999FF。3. 在表格的各列分別寫入“首頁(yè)”、“學(xué)院概況”、“師資建設(shè)”、“系部設(shè)置”、“招生就業(yè)”，各單元格文字對(duì)齊方式為居中對(duì)齊，文字為粗體顯示。如圖1616所示。在“學(xué)院概況”列中添加一個(gè)圖層，命名為“Layerl”，注意不可見元素“層錨記

25、”應(yīng)在此列當(dāng)中。如果不在，可用鼠標(biāo)將其拖到此列中。然后在圖層中添加一個(gè)3行l(wèi)列的表格，表格寬度為160像素，各行高度為30像素，邊框粗細(xì)為1，單元格文字為居中對(duì)齊，表格背景顏色為#9999FF，文字為粗體顯示。三個(gè)單元格內(nèi)容為“學(xué)院簡(jiǎn)介”、“辦學(xué)思想”、“校園風(fēng)景”。4. 同樣在其他幾列中也分別添加圖層，各自命名為“Layer2'，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格屬性與Layerl中的相同，內(nèi)容為“隊(duì)伍建設(shè)、名師風(fēng)采、優(yōu)秀教師”；L,ayer3中插入5行l(wèi)列的表格，表格屬性與L,ayerl中的相同，內(nèi)容為“機(jī)電技術(shù)系、電子技術(shù)系、計(jì)算機(jī)應(yīng)用

26、系、計(jì)算機(jī)網(wǎng)絡(luò)系、計(jì)算機(jī)軟件系”；Layer4中插入2行1列的表格，表格屬性與Layerl中的相同，內(nèi)容為“招生信息、就業(yè)信息”。調(diào)整各層的位置。注意：層的調(diào)整非常重要，不同的瀏覽器窗口大小，不同的分辨率，層的位置顯示都不是一樣。即使在同一個(gè)機(jī)器上調(diào)整瀏覽器的窗口大小，都會(huì)出現(xiàn)位置的變動(dòng)。Dreamweaver中并不是所見即所得，需要我們來精確定位才會(huì)達(dá)到滿意的效罘。為此，首先固定表格的寬度，本例中將表格固定為寬度800，高度30。然后固定層的位置，這個(gè)位置需要計(jì)算一下，計(jì)算公式并不是很難。本例中表格總寬度為800，共有5列，這樣每列的橫坐標(biāo)起始位置的計(jì)算公式為：800÷5*(當(dāng)前列

27、一1) 對(duì)于“Layerl”，當(dāng)前列為2，所以結(jié)果為160。最后加上一個(gè)將要?jiǎng)?chuàng)建的層與原表格列偏移值，那么計(jì)算各列下屬的層的橫坐標(biāo)公式變?yōu)椋?800-5x(當(dāng)前列-1)+偏移量 這個(gè)偏移量需要通過大家試驗(yàn)來最終確定，因?yàn)椴煌淖煮w和寬度這個(gè)值是不同的。這里測(cè)試滿意的效果是-1，所示Layer1的實(shí)際工資起始橫坐標(biāo)為159據(jù)這個(gè)公式將各個(gè)層的位置設(shè)定好，最好不要用鼠標(biāo)禾移功定位。要使用“屬性”檢查器來設(shè)置。5. 打開“層，面板，將LayerlLayer4都設(shè)置為隱藏狀態(tài)。在窗口左下方選中第2列“學(xué)院概況”所在單元格的標(biāo)簽選擇器<td>，在“行為”面板中為其添加“顯示一隱藏層行為，將“

28、Layerl”設(shè)定為“顯示”。更改行為的觸發(fā)事件為“onMouseOver”。6. 再次選中第二列的標(biāo)簽選擇器<td>，在行為面板中為其添加“顯示一隱藏層”行為，設(shè)定圖層Layerl為隱藏”，并更改此行為的觸發(fā)事件為“onlMoluseOut”。重復(fù)步驟91l，為第三列、第四列、第五列添加顯示與隱藏圖層的行為。7. 保存與預(yù)覽。8. 為下拉菜單設(shè)置超級(jí)鏈接(1)根據(jù)菜單內(nèi)容，建立相應(yīng)的其他頁(yè)面文件。(2)為各菜單項(xiàng)設(shè)置跳轉(zhuǎn)到這些頁(yè)面的超級(jí)鏈接。(3)再次保存文件并預(yù)覽效果。任務(wù)二：時(shí)間軸1. 在C盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。在此站點(diǎn)中再建一個(gè)images子文件夾，將給

29、定的素材存入其中。建立本地站點(diǎn)。2. 打開給定的網(wǎng)頁(yè)文件sx17-1-1.htm，在網(wǎng)頁(yè)上插入一個(gè)層"Layerl",并將其位置調(diào)整好，然后在其中插入給定的圖片imglgif,圖片大小為64×64。打開“時(shí)間軸”面板，把圖層Layerl拖到“時(shí)間軸面板上，單擊最后一幀關(guān)鍵幀，并將其拖到第100幀的位置。再單擊圖層Layerl，將 Layerl水平拖動(dòng)到頁(yè)面的右側(cè)。3. 選中“時(shí)間軸”面板上的“自動(dòng)播放”和“循環(huán)”選項(xiàng)。4. 將文件另存為sxl7-1-3htm，并在瀏覽器中預(yù)覽。 5. 利用時(shí)間軸使層做軌跡運(yùn)動(dòng)，打開剛才保存的sxl7-1-3htm文檔，再插入一個(gè)圖

30、層Layer2，并將給定的圖片img2Gif插入其中，設(shè)置圖片和層的大小均為100*100。 6. 右擊“時(shí)間軸”面板的動(dòng)畫通道，在彈出的快捷菜單中選擇“添加時(shí)間軸”命令，新添加的時(shí)間軸為“Timeline2'。7. 選中頁(yè)面中的圖層Layer2，并單擊右鍵，在彈出的快捷菜單中選擇“記錄路徑”命令，緊接著用鼠標(biāo)拖動(dòng)層左上角的標(biāo)記在頁(yè)面上移動(dòng)繪制路徑，釋放鼠標(biāo)，在頁(yè)面上出現(xiàn)了一條灰色的路徑。同時(shí)，時(shí)間軸上也出現(xiàn)了一個(gè)有多個(gè)關(guān)鍵幀的動(dòng)畫條。8. 選中“時(shí)間軸”面板上的“自動(dòng)播放”和“循環(huán)”選項(xiàng)。保存文件，并在瀏覽器中預(yù)覽。9. 給移動(dòng)的小豬添加行為和超級(jí)鏈接，選中頁(yè)面中的Layer2，打開

31、“行為”面板，單擊“+”按鈕，從彈出的菜單中選擇“時(shí)間軸”I“停止時(shí)間軸”命令。然后從對(duì)話框中選擇“1'imeline2'，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseover。10. 再次單擊“行為”面板的“+”按鈕，從彈出的菜單中選擇“時(shí)間軸”“播放時(shí)間軸”命令。然后從對(duì)話框中選擇“Timeline2'，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseout。11. 選中Layer2層中的圖片，在“屬性”檢查器的鏈接欄中輸入“sxl7-1-2htm'(預(yù)先編輯好的網(wǎng)頁(yè))，在替代欄中輸入“單擊有驚喜”。12. 保存文件，并在瀏覽器中預(yù)覽

32、。任務(wù)三：利用CSS樣式改變頁(yè)面風(fēng)格1. 在c盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。將給定的網(wǎng)頁(yè)文件及素材文件夾存入該文件夾中，建立本地站點(diǎn)2. 自定義樣式的定義及應(yīng)用 (1)打開站點(diǎn)中給定的sx2011htm文檔。 (2)選擇“窗口”I樣式”菜單命令，將“CSS樣式”面板打開。 (3)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對(duì)話框。在選擇器類型處選擇“類(可應(yīng)用于任何標(biāo)簽)”，名稱處輸入“ysl”，定義在處選擇“僅對(duì)該文檔”。單擊“確定”按鈕。 (4)在彈出的“ysl的CSS樣式定義”對(duì)話框中，進(jìn)行如圖20-25所示的樣式定義(類型：字體為隸書，大小為36像素，顏

33、色為#0033FF；區(qū)塊：文字對(duì)齊為居中)。(5)用同樣的方法定義樣式“ys2”，定義內(nèi)容如圖20-26所示(類型：字體為華文新魏，大小為24像素；區(qū)塊：文字對(duì)齊為居中)。（6)用同樣的方法定義樣式“ys3”，定義內(nèi)容如圖2027所示(類型：字體為隸書，大小為36像素，粗細(xì)為粗體，#00CC33；區(qū)塊：文字對(duì)齊為居中)。(7)下面開始應(yīng)用已定義的樣式。選中第一行標(biāo)題“唐詩(shī)欣賞”，單擊右鍵，選擇“CSS樣式y(tǒng)sl，(或者用前面介紹的其他方法來應(yīng)用ysl)，這時(shí)標(biāo)題已變成所定義的樣式了。用同樣的方法，將每首詩(shī)的詩(shī)文內(nèi)容應(yīng)用ys2，將每首詩(shī)的標(biāo)題段落應(yīng)用“ys3”。效果如圖20-28所示。 (8)修

34、改頁(yè)面的背景風(fēng)格。首先為頁(yè)面設(shè)置背景圖像(站點(diǎn)中images文件夾中的bjjpg文件)，效果如圖20-29所示。由于選擇的背景圖像的尺寸不夠大，在頁(yè)面中圖像會(huì)以不斷重復(fù)的形式鋪滿整個(gè)頁(yè)面，視覺效果不夠理想。(9)在“CSS樣式”面板新建自定義樣式“ys4”，在樣式定義對(duì)話框中，背景樣式的設(shè)置如圖2030所示(背景：重復(fù)為不重復(fù)，附件為固定，水平位置為居中，垂直位置為居中)。(10)選擇文檔窗口左下方的標(biāo)簽選擇器<body>，然后單擊右鍵，從下拉列表中選擇“設(shè)置類，ys4”，文檔應(yīng)用樣式y(tǒng)s4后的效果如圖20-31所示。當(dāng)預(yù)覽時(shí)會(huì)發(fā)現(xiàn)背景圖像居中并不再重復(fù)，且當(dāng)用鼠標(biāo)滾動(dòng)游覽文字時(shí)，

35、背景圖像保持靜止，而不隨文字的滾動(dòng)而滾動(dòng)。3. 重定義特定標(biāo)簽外觀 (1)單擊“CSS樣式”面板下方的“新建(；SS樣式”按鈕，打開新建樣式對(duì)話框，選擇器類型處選擇“標(biāo)簽(重定義特殊標(biāo)簽的外觀)”，標(biāo)簽處下拉列表選擇“l(fā)n定義在處選擇“僅對(duì)該文檔”。單擊“確定”按鈕。 (2)在彈出的“l(fā)i的CSS樣式定義”對(duì)話框中，進(jìn)行如圖20-32所示的樣式定義(類型：字體為華文新魏，大小為24像素；列表：項(xiàng)目符號(hào)圖像為0001gif)。 (3)單擊“確定”按鈕，發(fā)現(xiàn)頁(yè)面列表外觀發(fā)生了變化。(4)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對(duì)話框，選擇器類型處選擇“標(biāo)簽(重定義特殊標(biāo)

36、簽的外觀)”，標(biāo)簽處下拉列表選擇“a”，定義在處選擇“僅對(duì)該文檔”。單擊“確定”按鈕。 (5)在彈出的a的cSS樣式定義”對(duì)話框中，進(jìn)行定義，其中類型分類中只將修飾選擇為無”。單擊“確定”后，頁(yè)面中超級(jí)鏈接的下劃線處的修飾沒有了，5. (1)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對(duì)話框，選擇器類型處選擇“高級(jí)(ID、偽類選擇器等)”，選擇器處下拉列表選擇“a：link”，定義在處選擇“僅對(duì)該文檔”。單擊“確定”按鈕。 (2)在彈出的“a：link的(；SS樣式定義”對(duì)話框中，進(jìn)行如圖2034所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#CC0099，修飾為無)。 (3)再次