【正文】 水平“右對(duì)齊”，垂直“居中”的布局單元格，插入圖像“”。50、右邊的網(wǎng)頁內(nèi)容做好了，將光標(biāo)定位網(wǎng)頁的版權(quán)信息區(qū)，繪制一個(gè)寬“783px”，高“34px”，顏色為“cccc33”，水平“居中對(duì)齊”，垂直“居中”的布局單元格，輸入文字“Copyright 169。5將“插入”欄中的“布局”選項(xiàng)卡改為“文本”選項(xiàng)卡，單擊“換行符”按鈕，光標(biāo)自動(dòng)定位到下一行，輸入文字“E—mail：*********制作者：**********”。5選中最外面的表格，切換到“標(biāo)準(zhǔn)”模式，打開“屬性面板”，將對(duì)齊改為“居中對(duì)齊”。思考題：很多同學(xué)在做完這個(gè)實(shí)驗(yàn)后，預(yù)覽網(wǎng)頁時(shí)，頁腳區(qū)（版權(quán)信息）與上面的主體區(qū)不能很好的結(jié)合起來，中間會(huì)有空隙，怎么解決這個(gè)問題呢？ 實(shí)驗(yàn)七 利用層進(jìn)行網(wǎng)頁布局一、實(shí)驗(yàn)?zāi)康恼莆諏拥睦L制、選擇、移動(dòng)和對(duì)齊；掌握“層”屬性面板的設(shè)置； 掌握利用層來設(shè)計(jì)網(wǎng)頁的版面；掌握層的顯示和隱藏；掌握層的堆疊和刪除。圖271三、 實(shí)驗(yàn)步驟 繪制層繪制層有如下3種方法：(1)將插入點(diǎn)放置在“文檔”編輯窗口中，然后選擇[插入]\[布局對(duì)象]\[層]菜單命令將自動(dòng)在插入點(diǎn)插入一個(gè)層。(3)在“插入欄”的“布局”插入欄中單擊“繪制層”按鈕，在文檔編輯窗口中單擊鼠標(biāo)可繪制一個(gè)層。將光標(biāo)放在層layer1內(nèi)，然后按下繪制層按鈕，當(dāng)光標(biāo)變成“十字形”時(shí)，按Alt鍵直接在層layer1內(nèi)繪制一個(gè)嵌套層layer2，插入圖像“”。選擇層單個(gè)層的方法有3種。(2)在層中單擊鼠標(biāo)左鍵，再單擊該層的選擇柄。注意：此時(shí)如果沒有出現(xiàn)“層”面板，則選擇[窗口]\[層]菜單，在右側(cè)的浮動(dòng)面板中就會(huì)出現(xiàn)“層”面板。選擇多個(gè)層有2種方法。(2)按住【Shift】鍵，在“層”面板中單擊要選擇的多個(gè)層的名稱。 選擇“l(fā)ayer2”和“l(fā)ayer4”，執(zhí)行[修改]\[排列順序]\[右對(duì)齊]，所有選定層的右邊框會(huì)與最后一個(gè)選定層的右邊框處于同一垂直位置。 將光標(biāo)放在層“l(fā)ayer8”內(nèi)，然后同時(shí)按下Alt鍵和“繪制層”按鈕，繪制層“l(fā)ayer9”，使得層“l(fā)ayer9”處于頂端的正中間位置，插入圖像“”。1 在層“l(fā)ayer8”的左邊，層“l(fā)ayer7”的下方，繪制層“l(fā)ayer11”，然后選擇[插入]/[表格]菜單命令，插入一個(gè)6行1列，有邊框的表格，插入后調(diào)整表格的大小，使得它跟層“l(fā)ayer11”的大小一致。1 層“l(fā)ayer11”的下方再繪制層“l(fā)ayer12”，層“l(fā)ayer12”的寬度與層“l(fā)ayer1”的寬度一致。1 “層”面板最終效果如圖273所示。思考題：做完這個(gè)實(shí)驗(yàn)后，很多同學(xué)會(huì)發(fā)現(xiàn)，該網(wǎng)頁的內(nèi)容不能在窗口的中間顯示，怎么解決這個(gè)問題？實(shí)驗(yàn)八 行為和圖層的應(yīng)用一、實(shí)驗(yàn)?zāi)康恼莆招袨榈母拍?；掌握添加、修改和刪除行為；掌握 “顯示隱藏層”行為的應(yīng)用；掌握“時(shí)間軸”行為的應(yīng)用；掌握“拖動(dòng)層”行為的應(yīng)用；掌握利用行為創(chuàng)建下拉菜單；二、實(shí)驗(yàn)內(nèi)容浮動(dòng)廣告的制作：制作如圖281所示的網(wǎng)頁，要求網(wǎng)頁載入時(shí)該廣告就在網(wǎng)頁上面不斷的漂浮，“金庸群俠傳3”廣告圖像移動(dòng)的位置為：網(wǎng)頁窗口的左上角——網(wǎng)頁窗口的底部中間——網(wǎng)頁窗口的右上角。圖282 圖像拖動(dòng)的制作：制作如圖283所示的網(wǎng)頁，要求選中某個(gè)水果，可以將該水果放到籃子中，放入籃后就看不見該水果了，圖284為把蘋果放到籃子的效果圖。圖285三、 知識(shí)點(diǎn)分解實(shí)驗(yàn)1涉及到的知識(shí)點(diǎn)有層和時(shí)間軸行為，利用層+時(shí)間軸實(shí)現(xiàn)動(dòng)畫效果；實(shí)驗(yàn)2涉及到知識(shí)點(diǎn)有層，層的定位，層的嵌套，顯示隱藏層行為，利用表格來實(shí)現(xiàn)層的定位，使層顯示在文檔窗口的正中間，利用層的嵌套實(shí)現(xiàn)父層移動(dòng)子層也隨之移動(dòng)的效果，利用層+顯示隱藏層行為實(shí)現(xiàn)層的出現(xiàn)還是消失的效果；實(shí)驗(yàn)3涉及到的知識(shí)點(diǎn)有層和拖動(dòng)層行為，利用層+拖動(dòng)層行為實(shí)現(xiàn)在物品在網(wǎng)頁上的隨意拖動(dòng)。注意：該圖像的大小為800600，所以設(shè)為背景圖像時(shí)會(huì)呈現(xiàn)平鋪的效果。 將光標(biāo)定位在layer1層內(nèi)，選擇[插入]/[圖像]菜單，（“海底世界”四個(gè)字圖像）插入帶該層，調(diào)整層的大小，使之適應(yīng)圖像的大小。 選擇[窗口]/[時(shí)間軸]，調(diào)出“時(shí)間軸面板”，如圖285所示。 此時(shí)大家會(huì)發(fā)現(xiàn)該層的運(yùn)動(dòng)路徑是條直線，現(xiàn)在我們要將其運(yùn)動(dòng)路徑改為曲線。 單擊第15幀，選中l(wèi)ayer2層，將其拖到網(wǎng)頁窗口的底部中間。圖286 勾選時(shí)間軸面板上的“自動(dòng)播放”復(fù)選框，會(huì)彈出如圖287所示的對(duì)話框，說明該時(shí)間軸動(dòng)畫播放時(shí)會(huì)循環(huán)，單擊“確定”按鈕。圖2881 按【F12】鍵，預(yù)覽。 單擊每個(gè)單元格，打開屬性面板，設(shè)置單元格寬“130px”，高“30px”。 將光標(biāo)定位在layer1層，選擇[插入]/[圖像]，將圖像“”插入到layer1層中。 重復(fù)步驟4，在第三個(gè)單元格內(nèi)插入層layer3，將圖像“” 插入到layer3層中。 將光標(biāo)定位在層layer4中，單擊“布局”工具欄中的“插入表格”按鈕，插入4行1列的表格，在第1個(gè)單元格中插入圖像“”，第2個(gè)單元格中插入圖像“”，第3個(gè)單元格中插入圖像“”，第4個(gè)單元格中插入圖像“”。 將光標(biāo)定位在層layer5中，單擊“布局”工具欄中的“插入表格”按鈕，插入2行1列的表格，在第1個(gè)單元格中插入圖像“”，第2個(gè)單元格中插入圖像“”。1 將光標(biāo)定位在層layer6中，單擊“布局”工具欄中的“插入表格”按鈕，插入3行1列的表格，在第1個(gè)單元格中插入圖像“”，第2個(gè)單元格中插入圖像“”， 第3個(gè)單元格中插入圖像“”，最終效果如圖289所示。圖28101 選中層圖像“”，在“行為”面板中單擊“添加行為”按鈕，在彈出的菜單中選擇“顯示隱藏層”，打開“顯示隱藏層”對(duì)話框，如圖2811所示，選中層layer4，單擊“顯示”按鈕，再單擊“確定”按鈕。1再單擊“添加行為”按鈕，在彈出的菜單中選擇“顯示隱藏層”，打開“顯示隱藏層”對(duì)話框，選中層layer4，單擊“隱藏”按鈕，再單擊“確定”按鈕，然后回到“行為”面板，將事件改為“onMouseOut”。1再單擊“添加行為”按鈕，在彈出的菜單中選擇“顯示隱藏層”，打開“顯示隱藏層”對(duì)話框，選中層layer5，單擊“隱藏”按鈕，再單擊“確定”按鈕，然后回到“行為”面板，將事件改為“onMouseOut”。再單擊“添加行為”按鈕，在彈出的菜單中選擇“顯示隱藏層”，打開“顯示隱藏層”對(duì)話框，選中層layer6，單擊“隱藏”按鈕，再單擊“確定”按鈕，然后回到“行為”面板，將事件改為“onMouseOut”。2按【F12】鍵，預(yù)覽。選擇層layer2，layer3，layer4，選擇[修改]/[排列順序]/[左對(duì)齊]菜單，設(shè)置這3層垂直方向?qū)R。單擊網(wǎng)頁空白處，打開“行為”面板。圖2812單擊“基本”選項(xiàng)卡，將“層”設(shè)為“l(fā)ayer2”，再單擊“高級(jí)”選項(xiàng)卡，將“拖動(dòng)控制點(diǎn)”設(shè)為“整個(gè)層”,”拖動(dòng)時(shí)”，勾選“將層移至最前，然后”，“恢復(fù)Z軸”，如圖2813所示，再單擊“確定”按鈕。重復(fù)步驟4，5，6兩次，分別將“層”設(shè)為“l(fā)ayer3”，“l(fā)ayer4”即可。內(nèi)容4的步驟： 打開要實(shí)現(xiàn)下拉菜單效果的文檔。圖2814 添加菜單項(xiàng) 完成了菜單項(xiàng)的添加后，切換到【外觀】選項(xiàng)卡，在對(duì)應(yīng)的面板中設(shè)置下拉菜單的字體、大小、顏色、背景顏色等參數(shù)，如圖2815所示。 圖2815 設(shè)置下拉菜單的外觀 圖2816 【高級(jí)】選項(xiàng)卡 切換到【位置】選項(xiàng)卡，在對(duì)應(yīng)的面板中可以設(shè)置下拉菜單的坐標(biāo)位置。 單擊【確定】按鈕完成本實(shí)例制作，這是【行為】面板如圖2818所示。二、實(shí)驗(yàn)內(nèi)容利用框架制作如下圖所示的頁面效果，其中：； 圖292 單擊左側(cè)“動(dòng)物類”的網(wǎng)頁效果圖；圖293 單擊左側(cè)“插花類”的網(wǎng)頁效果圖；圖294 單擊左側(cè)“海洋類”的網(wǎng)頁效果圖；圖295 單擊左側(cè)“郵票類”的網(wǎng)頁效果圖；圖296 單擊左側(cè)“詩歌”的網(wǎng)頁效果圖，其中詩歌內(nèi)容在“”文檔中；圖297 單擊左側(cè)“散文”的網(wǎng)頁效果圖，其中散文內(nèi)容在“”文檔中。四、實(shí)驗(yàn)步驟 選擇[文件]/[新建]菜單命令。從“框架集”列表選擇相應(yīng)的框架集，如圖298所示。 選擇[查看]/[可視化助理]/[框架邊框]菜單命令，則在文檔中就會(huì)出現(xiàn)框架的邊框。 注意：對(duì)于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道該文件對(duì)應(yīng)與該框架集中的哪個(gè)框架。，將“插入”欄中的“常用”選項(xiàng)卡改為“布局”選項(xiàng)卡，此時(shí)就出現(xiàn)“布局”工具欄，切換到“布局”模式，單擊“布局表格”按鈕，繪制一個(gè)寬：350px高：88px，“居中對(duì)齊”的表格，再在該表格內(nèi)繪制一個(gè)同樣大小的單元格，并將該單元格背景圖像設(shè)為“”，水平“居中對(duì)齊”，垂直“居中”，再在該單元格內(nèi)寫上文字“我的收藏”，并將該文字設(shè)為：字體“隸書”，大小“16px”，顏色“993300”。接著上面表格的下方再繪制一個(gè)表格，并將其寬設(shè)為“自動(dòng)伸展”，高：8，背景圖像設(shè)為“”。1，將“插入”欄中的“常用”選項(xiàng)卡改為“布局”選項(xiàng)卡，此時(shí)就出現(xiàn)“布局”工具欄，切換到“布局”模式，單擊“布局表格”按鈕，繪制一個(gè)寬：162px，高：40px，背景顏色“FFCCCC”，“右對(duì)齊”的表格。1按【Ctrl+S】保存該網(wǎng)頁。1單擊“布局單元格”按鈕，從表格的左下角開始繪制一個(gè)寬：112px，高：268px的單元格，輸入文字“收藏精美的圖片，凄美、憂郁、壯麗的文章是我最大的愛好，它們能帶給我無窮的樂趣，無限的遐想。1切換到“標(biāo)準(zhǔn)”模式，單擊“繪制層”按鈕，繪制一個(gè)層，選中表格，將表格拖到該層內(nèi)，選中層，打開屬性面板，設(shè)置：左“84px”，上“29px”。1新建一個(gè)文檔，將“插入”欄中的“常用”選項(xiàng)卡改為“布局”選項(xiàng)卡，此時(shí)就出現(xiàn)“布局”工具欄，單擊“繪制層”按鈕，繪制一個(gè)層，打開屬性面板，設(shè)置：左“84px”，上“29px”。合并第1行的單元格，設(shè)置該行高：83px，邊框：FF99CC，輸入文字“動(dòng)物類：”，字體為“黑體”。2按【Ctrl+S】。2新建一個(gè)文檔，粘貼到該文檔中，選中所有文字，設(shè)為“居中對(duì)齊”，選中標(biāo)題“獻(xiàn)給我的同代人”，設(shè)置顏色“990000”。2新建一個(gè)文檔，將“”導(dǎo)入到該文檔中，選中所有的文字，設(shè)置“左對(duì)齊”，將光標(biāo)定位到標(biāo)題“愛情人生”，敲“回車鍵”，選中該文字，設(shè)置顏色“FF0000 ”，“居中對(duì)齊”。2，選中文字“動(dòng)物類”，打開屬性面板，設(shè)置鏈接：，目標(biāo)：mainFrame。選中文字“詩歌”，打開屬性面板，設(shè)置鏈接：，目標(biāo)：leftFrame或_self。3按【Ctrl+S】保存該網(wǎng)頁。思考題：創(chuàng)建完框架集后，選擇“文件|保存全部”，、而是保存為默認(rèn)的文件，、發(fā)現(xiàn)框架頁顯示“該頁無法顯示”，問題出在哪？怎么修改？實(shí)驗(yàn)十 利用模板制作網(wǎng)頁一、實(shí)驗(yàn)?zāi)康?掌握模板的創(chuàng)建； 掌握模板的的編輯； 掌握基于模板創(chuàng)建網(wǎng)頁。 圖2101 圖2102 圖2103 圖2104 圖2105 圖2106 圖2107 圖2108 圖2109 圖21010 三、知識(shí)點(diǎn)分解由上圖可知，所有頁面的頁眉、導(dǎo)航和頁腳區(qū)域的內(nèi)容都是一致的，只要主題區(qū)不一致，所以我們可以利用模板來創(chuàng)建這些頁面，該模板的頁眉、導(dǎo)航和頁腳區(qū)域都是固定區(qū)域，只有主體區(qū)是可編輯區(qū)域，在主體區(qū)域我們可以繪制2個(gè)表格，每個(gè)表格內(nèi)創(chuàng)建1個(gè)可編輯區(qū)域，同時(shí)設(shè)置左邊表格的背景顏色和右邊表格的背景圖像。因此，對(duì)于該實(shí)驗(yàn)我們需要?jiǎng)?chuàng)建2個(gè)模板。單擊“布局表格”按鈕，從該表格的左上角起，繪制一個(gè)寬：780，高：120的表格。單擊“布局單元格”按鈕，接著上面的單元格的右邊繪制一個(gè)寬：640，高：120的單元格.將光標(biāo)定位在單元格內(nèi)，選擇[插入]/[媒體]/[Flash]菜單命令，打開“選擇文件”對(duì)話框。居中，背景顏色：CC3333的單元格，輸入文字：首頁　個(gè)人簡(jiǎn)介 文學(xué)作品 繪畫作品 動(dòng)畫作品　視頻作品　學(xué)習(xí)心得　給我留言　寫信給我，設(shè)置文字格式：字體“宋體”，大小“14px”。居中，背景顏色：0066FF的單元格。居中，背景圖像：。居中，背景顏色：000000的單元格，輸入文字：2006年12月20日最后更新 169。1回到“標(biāo)準(zhǔn)”模式，將光標(biāo)定位到第8步創(chuàng)建的單元格內(nèi)，選擇[插入]/[模板對(duì)象]/[可編輯區(qū)域]菜單命令，彈出如圖21011所示的對(duì)話框，單擊“確定”按鈕，則在該單元格內(nèi)就出現(xiàn)了一個(gè)名為“EditRegion1”的可編輯區(qū)域。 圖21012 模板的效果圖 圖21013 “另存為模板”對(duì)話框1刪除可編輯區(qū)域里面的文字“EditRegion1”，“EditRegion2”。1選擇[文件] /[新建]菜單命令，彈出如圖21014所示的“從模板新建”對(duì)話框，選擇“模板”選項(xiàng)卡，單擊該站點(diǎn)下的模板“xiaohui”，單擊“創(chuàng)建”按鈕，即創(chuàng)建了一個(gè)新