《網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)》實(shí)訓(xùn)指導(dǎo)書

1、網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)實(shí) 訓(xùn) 指 導(dǎo) 書一、實(shí)訓(xùn)的目的及功能定位1. 應(yīng)用遠(yuǎn)程站點(diǎn)管理的識(shí)和技能；2. 應(yīng)用本地站點(diǎn)管理的知識(shí)和技能；3. 應(yīng)用網(wǎng)頁頁面設(shè)計(jì)的知識(shí)和技能；4. 應(yīng)用網(wǎng)頁制作的知識(shí)和技能；5. 培養(yǎng)以上知識(shí)和技能的綜合應(yīng)用能力。二、實(shí)訓(xùn)總體要求1. 自己負(fù)責(zé)作品的保存，注意存放到機(jī)房被誤刪；2. 可獨(dú)立完成也可2-3人合作完成，不可以從網(wǎng)上下載網(wǎng)頁直接交上來?？梢阅７履硞€(gè)網(wǎng)站；3. 站點(diǎn)設(shè)計(jì)合理、管理有序、無多余文件和文件夾、大小合適；4. 可以使用媒體（音頻和視頻文件）文件5. 首頁命名要規(guī)范，存放位置要正確，不可以是zhuye.htm、main.htm、我的主頁.htm等。主頁文件名應(yīng)

2、該使用index或default等。其他文件或文件名命名也要規(guī)范，不使用漢字或帶有空格的名稱。最好是符合各種系統(tǒng)命名規(guī)則；6. 站點(diǎn)至少要有二層結(jié)構(gòu)，頁面數(shù)不得少于3頁；7. 自選主題，主題內(nèi)容要合法、健康、實(shí)用；8. 網(wǎng)頁要有落款、版權(quán)說明；9. 要仔細(xì)考慮網(wǎng)站定位。分析面向的潛在訪客群體的需求特點(diǎn)，選擇內(nèi)容和版式；10. 網(wǎng)站主題突出、內(nèi)容豐富；11. 網(wǎng)站風(fēng)格統(tǒng)一，設(shè)計(jì)適合于主題的LOGO；12. 各頁面設(shè)計(jì)合理、美觀，有創(chuàng)意。不要太花哨或太孩子氣。要有網(wǎng)頁平面設(shè)計(jì)過程，不要只是各種元素的隨意拼湊；13. 圖片動(dòng)畫選用要適合主題，不要在網(wǎng)頁中插入不相干的圖片。適用于各種顯示器的分辨率和顏

3、色；14. 不要太寬，否則顯示器分辨率小時(shí)會(huì)出現(xiàn)水平滾動(dòng)條；15. 各個(gè)頁面之間的鏈接要合理有效，路徑要正確（相對(duì)路徑）；16. 合理使用css樣式。17. 注意網(wǎng)站的大小，圖片保存格式和圖片大小要合適；三、實(shí)訓(xùn)學(xué)時(shí)總學(xué)時(shí)30學(xué)時(shí)四、實(shí)訓(xùn)任務(wù) 實(shí) 訓(xùn) 一 1. 背景知識(shí)根據(jù)本單元所學(xué)的色彩應(yīng)用的知識(shí)，再結(jié)合本單元所學(xué)的Fireworks軟件操作的知識(shí)，制作靜態(tài)圖像及動(dòng)態(tài)圖像的效果圖，能夠獨(dú)立設(shè)計(jì)網(wǎng)頁平面圖。2. 實(shí)訓(xùn)準(zhǔn)備工作將實(shí)訓(xùn)的樣圖及相應(yīng)的圖像及文本素材發(fā)送到學(xué)生主機(jī)，以供學(xué)生參考使用。3. 實(shí)訓(xùn)要求（1） 設(shè)計(jì)web頁面要求：1) 布局頁面，規(guī)劃網(wǎng)頁內(nèi)容；2) 繪制頁面分區(qū)，填充網(wǎng)頁內(nèi)容

4、，切割圖片，導(dǎo)出網(wǎng)頁，如圖所示。圖 網(wǎng)站首頁的設(shè)計(jì)4. 課時(shí)安排：2課時(shí)5. 實(shí)訓(xùn)指導(dǎo)步驟1在上一個(gè)實(shí)訓(xùn)的基礎(chǔ)上繼續(xù)本實(shí)訓(xùn)的WEB頁面的制作。畫布大小更改為778*580。步驟2整個(gè)網(wǎng)頁的上半部分已經(jīng)設(shè)計(jì)好，只須對(duì)下半部分進(jìn)行設(shè)計(jì)。下面的規(guī)劃為分成兩大塊，左側(cè)是一個(gè)裝飾的菊花圖片，右側(cè)分為四塊，新聞快遞、學(xué)院地圖導(dǎo)航、招生咨詢、學(xué)習(xí)園地。用圖片、線框、色塊裝飾。步驟3用切片工具切割圖片，最后導(dǎo)出為網(wǎng)頁。實(shí) 訓(xùn) 二1. 背景知識(shí)根據(jù)本單元所學(xué)的色彩應(yīng)用的知識(shí)，再結(jié)合本單元所學(xué)的Fireworks軟件操作的知識(shí)，制作靜態(tài)圖像及動(dòng)態(tài)圖像的效果圖，能夠獨(dú)立設(shè)計(jì)網(wǎng)頁平面圖。2. 實(shí)訓(xùn)準(zhǔn)備工作將實(shí)訓(xùn)的樣圖

5、及相應(yīng)的圖像及文本素材發(fā)送到學(xué)生主機(jī)，以供學(xué)生參考使用。3. 實(shí)訓(xùn)要求(1) 處理一幅位圖效果要求：風(fēng)景、汽車、人物有機(jī)融合在一起，如圖所示。(2) 制作蘋果標(biāo)志矢量圖形要求：利用矢量工具繪制蘋果標(biāo)志，如圖所示圖 制作矢量圖形圖 位圖效果圖4. 課時(shí)安排：2課時(shí)5. 實(shí)訓(xùn)指導(dǎo) (1) 處理一幅位圖效果步驟1打開汽車圖像（car.jpg），用多邊形套索工具，把汽車摳出來，然后復(fù)制到風(fēng)光圖像（風(fēng)光.jpg）中，使用發(fā)光濾鏡（顏色為白色）。步驟2打開明星圖像（張柏芝.jpg），添加位圖蒙版，單擊“鉛筆”工具，沿人物圖像的邊緣繪制，最后閉合，然后單擊“油漆桶”工具，用黑色填充周圍區(qū)域，選中人像圖像復(fù)制

6、到風(fēng)光圖像中，克隆人像圖像，然后選中此圖像，在“屬性”面板中將混合模式改為屏幕，不透明度改為60，另一人像圖像縮小至50%，完成。 (2) 制作蘋果標(biāo)志矢量圖形步驟1畫一個(gè)正圓，上節(jié)點(diǎn)向下提五個(gè)像素，左右節(jié)點(diǎn)向外提五個(gè)像素，顯得蘋果較為豐滿，然后上下用一個(gè)小橢圓打孔，將上下節(jié)點(diǎn)的調(diào)節(jié)桿調(diào)節(jié)為一個(gè)水平節(jié)線。步驟2右側(cè)用一個(gè)小橢圓打孔，效果為大蘋果被咬了一口。步驟3蘋果把采用兩個(gè)圓的交集。步驟蘋果整個(gè)有一個(gè)濾鏡效果，為內(nèi)發(fā)光，顏色為綠色，高度為。步驟5然后蘋果上側(cè)和蘋果把上側(cè)泛白處，采用的是兩個(gè)圓的交集，然后填充為白色，有羽化，完成。實(shí) 訓(xùn) 三1. 背景知識(shí)根據(jù)本章所學(xué)的在網(wǎng)頁中嵌入多媒體對(duì)象的方

7、法，再綜合前面所學(xué)的創(chuàng)建站點(diǎn)及編輯網(wǎng)頁的知識(shí)，制作功能完善的多媒體站點(diǎn)。2. 實(shí)訓(xùn)準(zhǔn)備工作將相應(yīng)的網(wǎng)頁草圖和網(wǎng)頁素材，如：音頻、視頻、flash等文件，以及相關(guān)的軟件，如：flashpaper軟件準(zhǔn)備好，發(fā)送到學(xué)生主機(jī)中，以供學(xué)生參考使用。3. 實(shí)訓(xùn)要求(1) 制作多媒體站點(diǎn)首頁根據(jù)給定的網(wǎng)頁草圖及相關(guān)素材，布局頁面，然后填充網(wǎng)頁元素，首頁內(nèi)容包括：Flash影片、Flash文本、Flash按鈕、Flash元素等及修飾的一些圖像。首頁效果圖如圖所示。(2) 制作站點(diǎn)內(nèi)的其它網(wǎng)頁要求包括：嵌入視頻的網(wǎng)頁、Flash mtv網(wǎng)頁、Flash Video網(wǎng)頁、點(diǎn)播音樂的網(wǎng)頁，最后添加頁面之間的鏈接。

8、4. 課時(shí)安排：2課時(shí)5. 實(shí)訓(xùn)指導(dǎo)圖 多媒體站點(diǎn)首頁步驟1首先制作多媒體站點(diǎn)的首頁，首頁背景顏色為深藍(lán)色（#012F47），該網(wǎng)頁的布局可采用表格的方式。步驟2在第一行單元格中，插入Flash文本：悠悠在線視聽；在第二行單元格中，連續(xù)插入Flash按鈕，構(gòu)成導(dǎo)航條；在第三行插入一個(gè)圖像：images/001.jpg。第四行拆分為二個(gè)單元格，第一個(gè)單元格插入一幅圖像：images/once.jpg，并輸入文本：李玟：愛你在每一天，第二個(gè)單元格插入Flash元素：一組王菲的圖片切換顯示；最后一行插入一幅圖像：images/002.jpg；在代碼視圖中和添加背景音樂的代碼：。步驟3制作其它的多媒體

9、頁面l Flashvideo.htm：插入一個(gè)Flash視頻文件，fla/02.flv。l Flashmtv.htm：插入一個(gè)Flash影片文件，fla/liwenonce.swf。l Flashpaper.htm：插入一個(gè)FlashPaper文件，fla/flashpaper.swf。l Shiping.htm：插入二個(gè)視頻文件，shiping/xuruyun.wmv和shiping/anmei.rm。l Yinping.htm：插入一個(gè)音頻文件，yinping/halfmoon.mp3。步驟4打開首頁，選中某個(gè)Flash導(dǎo)航條按鈕，單擊“屬性”面板中“編輯”按鈕，打開“插入Flash按鈕”

10、對(duì)話框，添加鏈接地址，分別鏈接到相應(yīng)的頁面。 實(shí) 訓(xùn) 四1. 背景知識(shí)本任務(wù)所學(xué)的插入表單、表單對(duì)象以及Dreamweaver內(nèi)部行為的檢驗(yàn)表單等知識(shí)，再結(jié)合前面所學(xué)的網(wǎng)頁編輯、頁面排版的知識(shí)，制作反饋表單。2. 實(shí)訓(xùn)準(zhǔn)備工作實(shí)訓(xùn)素材及網(wǎng)頁樣圖，發(fā)送到學(xué)生的主機(jī)中，以供學(xué)生參考使用。3. 實(shí)訓(xùn)要求(1) 創(chuàng)建一個(gè)空白表單。插入表格，利用表格排版網(wǎng)頁，并插入圖片及應(yīng)用CSS樣式美化網(wǎng)頁。(2) 插入表單對(duì)象，并通過“屬性”面板設(shè)置其屬性。(3) 最后利用Dreamweaver內(nèi)部行為驗(yàn)證表單。4. 課時(shí)安排：2課時(shí)5. 實(shí)訓(xùn)指導(dǎo)步驟1 首先創(chuàng)建一個(gè)本地站點(diǎn)，在本地站點(diǎn)中新建一個(gè)文件夾images

11、，將圖像素材保存在此文件夾。創(chuàng)建一個(gè)網(wǎng)頁，保存網(wǎng)頁為biaodan.htm，插入一幅圖像，文件名為：images/bt.jpg。步驟2 單擊“插入”欄“表單”選項(xiàng)“表單”按鈕，插入一個(gè)表單，在“文檔”窗口中出現(xiàn)一個(gè)紅色的虛線框，在“屬性”面板中，動(dòng)作文本框中輸入：“mailto:電子郵件地址”。步驟4 單擊虛線框內(nèi)，然后插入一個(gè)表格，采用表格進(jìn)行排版。圖 反饋表單效果圖步驟5 插入一個(gè)“文本字段”對(duì)象，輸入標(biāo)簽文字為：您的姓名，選中“文本字段”對(duì)象，在“屬性”面板中設(shè)置文本字段的屬性，文本域?yàn)椋簄ame，類型為：?jiǎn)涡小２襟E6 同理繼續(xù)插入單選按鈕組、復(fù)選框組、滾動(dòng)列表、下拉菜單、文本域等，并設(shè)

12、置其屬性，然后插入“提交”按鈕和“重置”按鈕。l 選中文檔窗口左下角標(biāo)簽，選擇“窗口”菜單“行為”命令，打開“行為”面板，添加“檢查表單”行為，然后設(shè)置姓名和Email地址必需，Email地址按照Email格式填寫。保存網(wǎng)頁，并瀏覽網(wǎng)頁。 實(shí) 訓(xùn) 五1. 背景知識(shí)根據(jù)本任務(wù)所學(xué)的CSS樣式表的知識(shí)，再綜合前面所學(xué)的創(chuàng)建站點(diǎn)及編輯網(wǎng)頁的知識(shí)，制作精美的網(wǎng)頁及應(yīng)用CSS擴(kuò)展功能。2. 實(shí)訓(xùn)準(zhǔn)備工作實(shí)訓(xùn)素材、網(wǎng)頁元素及網(wǎng)頁樣圖，發(fā)送到學(xué)生的主機(jī)中，以供學(xué)生參考使用。3. 實(shí)訓(xùn)要求(1) 利用CSS樣式表制作精美的網(wǎng)頁，如圖所示。圖 網(wǎng)頁效果圖要求：根據(jù)給定的素材，首先設(shè)置頁面屬性其次定義特定 Id的

13、DIV標(biāo)簽的CSS樣式，然后插入DIV標(biāo)簽，在DIV中插入內(nèi)容，最后通過定義類，設(shè)置圖像CSS樣式。圖 濾鏡效果(2) 在網(wǎng)頁中添加CSS擴(kuò)展效果：濾鏡要求：制作：投影字體、發(fā)光字體 、圖像的透明效果、圖像的波浪效果等，如圖所示。4. 課時(shí)安排：2課時(shí)5. 實(shí)訓(xùn)指導(dǎo) (1) 利用CSS樣式表制作精美的網(wǎng)頁步驟1 新建一個(gè)本地站點(diǎn)，站點(diǎn)內(nèi)新建兩個(gè)子文件夾，images和CSS，將圖像素材保存到images文件夾。新建一個(gè)網(wǎng)頁，保存為index.htm。步驟2 頁面屬性的設(shè)置：?jiǎn)螕簟皩傩浴泵姘逯械摹绊撁鎸傩浴卑粹o，在“頁面屬性”對(duì)話框中，設(shè)置背景圖像：images/bg.jpg，頁邊距均為0，設(shè)置

14、字體大小為12像素，字體顏色為灰色（#666666）。步驟3 在“CSS樣式”面板中，單擊“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框，選擇器類型：高級(jí)，“選擇器”文本框中輸入#image01（這個(gè)區(qū)域用于放置圖像），定義在：“新建樣式文件”，保存樣式文件在css文件夾中，命名為main.css。彈出“#images01的CSS規(guī)則定義”對(duì)話框，單擊“方框”選項(xiàng)卡，寬度為200像素，浮動(dòng)為左對(duì)齊，填充均為3像素，邊界：上為500像素，左為30像素，右和下均為30，選擇“區(qū)塊”選項(xiàng)卡，文本對(duì)齊：居中。步驟4 新建一個(gè)#content選擇器樣式，定義在main.css文件。彈出“#cont

15、ent的CSS規(guī)則定義”對(duì)話框，單擊“類型”選項(xiàng)卡，行高為20像素，單擊“區(qū)塊”選項(xiàng)卡，文本縮進(jìn)：20像素，單擊“方框”選項(xiàng)卡，寬度：600像素，填充均為30像素，邊界：上為200像素，左為320，右和下均為30。步驟5 重定義標(biāo)簽H1：?jiǎn)螕簟邦愋汀边x項(xiàng)卡，字體大小24像素，行高35像素，粗細(xì)為特粗，顏色為深綠色009900。步驟6 重定義標(biāo)簽img：?jiǎn)螕簟胺娇颉边x項(xiàng)卡，填充均為3，邊框均設(shè)置：樣式：實(shí)線，寬度1像素，顏色為灰色（#999999）步驟7 插入兩個(gè)DIV標(biāo)簽，ID分別為image01和content，然后在image01中插入兩幅圖像，在content中輸入文本，完成。(3) 在

16、網(wǎng)頁中添加CSS擴(kuò)展效果：濾鏡步驟1新建一個(gè)類dropshadow，單擊“擴(kuò)展”選項(xiàng)卡，在“濾鏡”下拉列表中選擇dropshadow，參數(shù)設(shè)置DropShadow(Color=#000000,offx=2,offy=2,Positive=45)，可以設(shè)置為不同的參數(shù)效果不同。步驟2 插入一個(gè)表格，在單元格中輸入文字，選中單元格，在“屬性”面板中選擇類：dropshadow。步驟3新建一個(gè)類glow，參數(shù)設(shè)置為：Glow(Color=#ffff00, Strength=5)，然后在單元格中輸入文本，選中單元格，套用類的樣式。步驟4新建一個(gè)類wave，參數(shù)設(shè)置為：Wave(Add=0, Freq=

17、5, LightStrength=5,strength=5)，插入圖像，選中圖像套用類樣式。步驟5新建一個(gè)類chroma，參數(shù)設(shè)置為：Chroma(Color=#ff0000)，插入圖像，選中圖像套用類樣式。 實(shí)訓(xùn) 六1. 背景知識(shí)根據(jù)本任務(wù)所學(xué)的網(wǎng)頁布局、時(shí)間軸及行為的知識(shí)，再綜合前面所學(xué)的創(chuàng)建站點(diǎn)及編輯網(wǎng)頁的知識(shí)，進(jìn)行網(wǎng)頁不同排版方式的練習(xí)。2. 實(shí)訓(xùn)準(zhǔn)備工作實(shí)訓(xùn)素材和網(wǎng)頁草圖發(fā)送到學(xué)生的主機(jī)中，以供學(xué)生參考使用。3. 實(shí)訓(xùn)要求（1）根據(jù)網(wǎng)頁草圖，如圖所示，利用層設(shè)計(jì)網(wǎng)頁布局，并向?qū)又刑砑泳W(wǎng)頁元素。圖層排版網(wǎng)頁草圖(1) 在上一步的基礎(chǔ)上，利用時(shí)間軸和行為添加網(wǎng)頁動(dòng)態(tài)效果：飄動(dòng)的圖片、彈出

18、信息和打開瀏覽器窗口。(2) 根據(jù)網(wǎng)頁草圖，如圖所示，利用框架設(shè)計(jì)網(wǎng)頁布局，左框架中是導(dǎo)航條，上框架中插入圖片和FLASH動(dòng)畫，主框架中插入圖片和文本。圖 框架排版網(wǎng)頁草圖1. 課時(shí)安排：2課時(shí)。2. 實(shí)訓(xùn)指導(dǎo)(1)層設(shè)計(jì)網(wǎng)頁布局步驟1創(chuàng)建本地站點(diǎn)，創(chuàng)建一個(gè)HTML文檔，在“頁面屬性”中插入跟蹤圖像，單擊“插入”欄“布局”“繪制層”按鈕，共繪制7層，注意層的排列位置、疊放順序，如圖所示。層1層2層3層4層5層6層7圖 層布局圖步驟2根據(jù)草圖，在各層內(nèi)插入相應(yīng)的網(wǎng)頁元素。保存網(wǎng)頁，瀏覽網(wǎng)頁效果。(1) 在上一步的基礎(chǔ)上繼續(xù)制作網(wǎng)頁動(dòng)態(tài)效果1） 特效1隨時(shí)間飄動(dòng)的圖標(biāo)步驟1首先插入一個(gè)層，在層內(nèi)插

19、入一幅圖像。步驟2選中層，選擇“修改”菜單“錄制層路徑”命令，拖動(dòng)層隨心所欲地移動(dòng)，最后回到起點(diǎn)。步驟3在“時(shí)間軸”面板中選擇“自動(dòng)播放”和“循環(huán)”兩個(gè)復(fù)選框。2） 特效2彈出信息步驟1選擇“窗口”菜單“行為”命令，打開“行為”面板，選中特效1中已插入的層，單擊“行為”面板中的“添加行為”按鈕，選中“彈出信息”命令，在“彈出信息”對(duì)話框中輸入“歡迎光臨汽車沙龍”，單擊“確定”按鈕。步驟2在“行為”面板中，選中事件為“onclick”。3） 特效3打開瀏覽窗口步驟1新建一個(gè)網(wǎng)頁，在網(wǎng)頁中輸入文本，插入圖像，網(wǎng)頁內(nèi)容相對(duì)簡(jiǎn)單，集中在網(wǎng)頁的左上部，保存為guanggao.htm。步驟2打開（2）中用

20、層布局的網(wǎng)頁，單擊“文檔”窗口左下角的標(biāo)簽，單擊“行為”面板中“添加行為”按鈕，選擇“打開瀏覽器窗口”命令，在“打開瀏覽器窗口”對(duì)話框中，輸入網(wǎng)頁地址guanggao.htm，定義窗口大小及其它屬性，單擊“確定”按鈕。步驟3在“行為”面板中，選擇事件為“onload”。(3)框架設(shè)計(jì)網(wǎng)頁布局框架布局圖，如圖所示。步驟1分別制作三個(gè)網(wǎng)頁分別為：top.htm、left.htm、main.htm，注意這三個(gè)網(wǎng)頁中所包含的網(wǎng)頁內(nèi)容：top.htm包括的是標(biāo)志，left.htm包括的是導(dǎo)航條， main.htm包括的是文本和圖像內(nèi)容。步驟2選擇“文件”菜單“新建”命令，在“新建文檔”對(duì)話框中，單擊“常

21、規(guī)”選項(xiàng)卡，選擇“框架集”中的“上方固定，左側(cè)嵌套”的樣式。步驟3打開“框架”面板，然后選中topFrame框架，在“屬性”面板中設(shè)置“框架”屬性，在“源文件”文本框中輸入top.htm。同理選中l(wèi)eftFrame框架、mainFrame框架分別設(shè)置“框架”屬性，將網(wǎng)頁路徑分別為：left.htm和main.htm，將各個(gè)框架頁面鏈接到框架集中。mainFrame（包含的是main.htm）leftFrame（包含的是left.htm）topFrame（包含的是top.htm）圖 框架布局圖圖 top.htm步驟4單擊左框架內(nèi)，選中導(dǎo)航條按鈕，在“屬性”面板中添加超鏈接地址：main0.htm

22、，第二個(gè)導(dǎo)航欄按鈕的鏈接地址為：main.htm，這兩個(gè)超鏈接的鏈接目標(biāo)均為mainFrame。步驟5鼠標(biāo)指標(biāo)放在框架邊框處，調(diào)整各框架的顯示范圍，或選中“框架集”，在“屬性”面板中，設(shè)置框架的行高或列寬，調(diào)整框架顯示范圍。步驟6打開“框架”面板，選擇“文件”菜單“保存框架頁”或“框架集另存為”命令，保存框架集。實(shí)訓(xùn) 七3. 背景知識(shí)根據(jù)本任務(wù)所學(xué)的網(wǎng)頁布局、時(shí)間軸及行為的知識(shí)，再綜合前面所學(xué)的創(chuàng)建站點(diǎn)及編輯網(wǎng)頁的知識(shí)，進(jìn)行網(wǎng)頁不同排版方式的練習(xí)。4. 實(shí)訓(xùn)準(zhǔn)備工作實(shí)訓(xùn)素材和網(wǎng)頁草圖發(fā)送到學(xué)生的主機(jī)中，以供學(xué)生參考使用。5. 實(shí)訓(xùn)要求(3) 根據(jù)網(wǎng)頁草圖1，如圖所示，利用表格設(shè)計(jì)網(wǎng)頁布局，在單

23、元格中添加網(wǎng)頁元素。圖 表格排版網(wǎng)頁草圖6. 實(shí)訓(xùn)指導(dǎo)步驟1首先創(chuàng)建一個(gè)本地站點(diǎn)，新建一個(gè)文檔（其余幾個(gè)實(shí)訓(xùn)是一樣的，這是必須的一個(gè)步驟），然后單擊“屬性”面板中的“頁面屬性”按鈕，彈出“頁面屬性”對(duì)話框，單擊“跟蹤圖像”選項(xiàng)卡，將草圖導(dǎo)入到跟蹤圖像中，改變透明度為50%。步驟2選擇“插入”欄“布局”選項(xiàng)“布局模式”按鈕，切換到布局模式，單擊“布局表格”按鈕，繪制三個(gè)表格（上中下），表格的寬度與草圖總的寬度相同：853，每一個(gè)布局表格左側(cè)插入布局單元格，單元格的寬度與綠色色塊相同：161，如圖所示。步驟3插入網(wǎng)頁元素。最后打開“頁面屬性”對(duì)話框，刪除跟蹤圖像，保存網(wǎng)頁。綠色色塊公司標(biāo)志導(dǎo)航欄廣

24、告橫幅綠色色塊公司簡(jiǎn)介一個(gè)布局表格，左側(cè)插入一個(gè)布局單元格一個(gè)布局表格，左側(cè)插入一個(gè)布局單元格一個(gè)布局表格，左側(cè)插入一個(gè)布局單元格圖 利用表格布局網(wǎng)頁結(jié)構(gòu)圖5、 實(shí)訓(xùn)最終考核最終提交實(shí)訓(xùn)報(bào)告和作品（打包成文件夾，統(tǒng)一命名為 學(xué)號(hào)+姓名+班級(jí)的格式）實(shí)訓(xùn)報(bào)告分三個(gè)部分，直接在模板上繼續(xù)書寫即可。1. 設(shè)計(jì)方案（1） 網(wǎng)站主題：可根據(jù)推薦的主題選擇網(wǎng)站主題或自定義一個(gè)網(wǎng)站主題綜合門戶娛樂游戲卡通漫畫網(wǎng)絡(luò)數(shù)碼建筑裝飾美容時(shí)尚手機(jī)通訊學(xué)校教育生活購(gòu)物服飾品牌醫(yī)療保健食品飲料文化藝術(shù)金融財(cái)經(jīng)休閑體育交友社區(qū)公司展示個(gè)性展示兒童寵物汽車品牌影視音樂風(fēng)景旅游個(gè)人空間（2） 網(wǎng)站內(nèi)容與目錄結(jié)構(gòu)：（建議用圖展現(xiàn)）如圖所示首 頁公司簡(jiǎn)介產(chǎn)品介紹網(wǎng)上訂購(gòu)在線留言關(guān)于我們子頁面 2子頁面 3子頁面 1（3） 色彩搭配方案：色彩搭配根據(jù)網(wǎng)站主題特點(diǎn)，確定網(wǎng)站的色彩方案（4） 繪制網(wǎng)