一、表格的作用

     二,、層的作用

     三,、用表格制作各種顏色的線條

     四,、網(wǎng)頁的動(dòng)態(tài)過渡效果

     五,、動(dòng)畫效果代碼“Marquee”

     六,、簡單對(duì)網(wǎng)頁進(jìn)行加密

一、表格的作用

        1）表格的基本作用

       表格在網(wǎng)頁中是用途非常廣泛的一種網(wǎng)頁元素,，他的重要作用之一是可以用于有序地排列數(shù)據(jù),，與Microsoft Office Word 2000/2003軟件的作用完全相同。

       表格的插入方法是：選“插入”－》“表格”,，出現(xiàn)“表格”對(duì)話框,，并可以設(shè)置表格的一些屬性，如表格的行數(shù),、列數(shù),、表格的寬度、邊框的線寬等等,。

     （注意：表格的寬度有相對(duì)寬度“百分比”和絕對(duì)寬度“像素”兩種顯示方式?。∷侵笧g覽器在某分辨率下,，顯示的表格寬度,，如果是相對(duì)寬度，則表示表格在該分辨率下以相對(duì)的寬顯示,，與表格的像素多少無關(guān),；而絕對(duì)寬度是指表格的寬度有多少像素就顯示多寬的表格，與瀏覽器所用分辨率無關(guān)?。?/P>

2）表格的布局作用

        表格在網(wǎng)頁制作中,，他的另一個(gè)重要作用就是：進(jìn)行布局。也就是利用表格的特點(diǎn),，可以精確地定位文本元素,、圖像元素、及其他的元素等,。用表格來布局,，技術(shù)上的熟練程度將直接影響到網(wǎng)頁設(shè)計(jì)的外觀。

       方法是：首先用鉛筆在草稿紙上畫出網(wǎng)頁的布局方案圖,，要注意表格內(nèi)的單元格,，是可以任意分隔和合并的（在表格的屬性面板中設(shè)置！）,，也可以插入表格,。另外，表格是用于布局的,，所以,，在“屬性”面板中的“邊框”（或“邊框粗細(xì)”文本欄）一定要輸入數(shù)值“0”，即是無邊框。

3）分析“酷男孩工作室”網(wǎng)頁

               分析方法是：首先將該網(wǎng)頁保存到指定的站點(diǎn)內(nèi),，注意文件名不能用中文名,！再用“Dreamweaver MX 2004”軟件打開該網(wǎng)頁文件，即可顯示出所有的技術(shù)細(xì)節(jié),。

            請(qǐng)同學(xué)們自己分析“歡迎到巧克力的主頁來!”網(wǎng)頁?。∥募麨椤癶ydqkldzyl.HTL”??！

二、層的作用

   用表格來布局,，可以看到一個(gè)特點(diǎn),，就是表格的定位十分準(zhǔn)確,，也很嚴(yán)謹(jǐn),。但是，非常不靈活,，而且用表格來對(duì)頁面元素進(jìn)行定位實(shí)在太難掌握了,。

          在許多圖形圖像軟件中，都有“層”這個(gè)概念及其運(yùn)用,。但是,，對(duì)于Dreamweaver MX 2004軟件來說，“層”有所不同,，一是他用于網(wǎng)頁元素的布局及其他技巧運(yùn)用,如下拉菜單等,；二是用于設(shè)計(jì)動(dòng)態(tài)的效果（層與時(shí)間軸及行為是密切結(jié)合的！）,。

   用層來布局,，其特點(diǎn)是，他可以游離在網(wǎng)頁元素之上,，從而可以利用他來靈活而精確地定位其他的網(wǎng)頁元素,。

        要布局某個(gè)網(wǎng)頁元素，其方法是：首先選“窗口”菜單,，使“插入”打勾,，出現(xiàn)插入面板；在插入面板中,，選中“布局”選項(xiàng)卡,，并確定是“標(biāo)準(zhǔn)”模式；再在“插入”菜單中選“布局對(duì)象”－》“層”命令,，即可,；最后，點(diǎn)擊該層內(nèi)部，再插入其他的網(wǎng)頁元素后,，拖動(dòng)層到合適的位置,。

二、層的作用

   1）層用于做立體字

          方法：新建立一個(gè)圖層,，在里面輸入文字“SCHOOL”?。☆伾珵楹谏,?！

            再建立一個(gè)圖層，用相同的大小輸入以上文字,，顏色為紅色?。?/P>

            最后將兩個(gè)圖層進(jìn)行疊加,，注意前后的關(guān)系,！

2）用層制作頁中頁

          電視有個(gè)畫中畫功能，當(dāng)網(wǎng)頁的內(nèi)容較多且比較分散時(shí),，可以把它分類,，再用下面介紹的方法做一個(gè)或幾個(gè)內(nèi)嵌式窗口（也就是所謂的“頁中頁”），把同類的內(nèi)容放在一個(gè)窗口中,，這樣整個(gè)頁面看起來將簡煉的多

          頁中頁的制作方法：把鼠標(biāo)移到需插入內(nèi)嵌式窗口的地方點(diǎn)一下,，插入一個(gè)圖層，在其內(nèi)部點(diǎn)擊以下,，再插入一個(gè)圖層,，這樣插入的圖層的特點(diǎn)是：第一次插入的圖層是“父層”，第二次插入的圖層是“子層”,。而且都是使用相對(duì)坐標(biāo)定位,，圖層在與表格混合排版時(shí)定位不準(zhǔn)，其原因是它使用了絕對(duì)坐標(biāo)定位

        用對(duì)象面板插入的圖層都是用絕對(duì)坐標(biāo)定位的,，而用“插入”菜單插入的圖層是在沒拖動(dòng)時(shí)是使用相對(duì)坐標(biāo),，一旦用鼠標(biāo)拖動(dòng)就改為絕對(duì)坐標(biāo)了，而“子層”永遠(yuǎn)用相對(duì)坐標(biāo)（相對(duì)“父層”）,。為了減少誤拖動(dòng)“父層”,，從而給定位帶來麻煩，把“父層”的“寬”和“高”均設(shè)置為“1”,。把“子層”拖到合適的位置,，瀏覽時(shí)就在這個(gè)位置顯示“頁中頁”。設(shè)置好圖層屬性面板的參數(shù),。

       在“子層”的圖層屬性面板上設(shè)置好“寬”和“高”,，圖層的“寬”和“高”也就是內(nèi)嵌式窗口的“寬”和“高”,，把“溢出”選擇為“Auto”，就是最為主要的一步,，否則在窗口中就沒有滾動(dòng)條了,。

        在“子層”上面輸入“頁中頁”的網(wǎng)頁元素內(nèi)容，如文字,、圖片等,，由于圖層支持所有網(wǎng)頁制作技術(shù)，因此可以大膽地在“頁中頁”上發(fā)揮你的創(chuàng)意,，現(xiàn)在完成了,，可用瀏覽器來瀏覽了。

           在“頁中頁”制作過程中,，由于圖層是疊加在頁面上的,，可能影響你編輯網(wǎng)頁的其它內(nèi)容，這時(shí)你可以在圖層的屬性面板上把“可見性”選擇為“hidden”（隱藏圖層）,，這樣圖層就看不見了,，當(dāng)然也就不會(huì)影響編輯其它內(nèi)容了，但在網(wǎng)頁全部制作完后,，不要忘記把“可見性”改回來,，否則，它在瀏覽時(shí)也看不見了,。

        圖層隱藏后可用圖層面板（按F11鍵），上面有當(dāng)前網(wǎng)頁的所有圖層,，在隱藏圖層前面有一只眼睛,，是閉著的，可用鼠標(biāo)點(diǎn)一下,，眼睛睜開了,，圖層也就取消了隱藏屬性；再點(diǎn)一下,，眼睛圖標(biāo)沒有了,，這時(shí)圖層的顯示屬性取默認(rèn)值；再點(diǎn)一下,，又是一個(gè)閉著眼睛的圖標(biāo)出現(xiàn)了,，圖層又被隱藏了。所以不在圖層屬性面板上而是在圖層面板上也可以隱藏圖層,。

        注意：隨著“頁中頁”中內(nèi)容的增加,，圖層越拉越長，這沒關(guān)系,，請(qǐng)一定保持原來子層的寬和高的尺寸,，在瀏覽時(shí)還是按原定義的窗口大小顯示,。

三、用表格制作各種顏色的線條

   制作水平細(xì)線方法：

         在 Dreamweaver 中,，插入一個(gè)單行單列的表格,，設(shè)置 border="0"、cellspacing="0",、cellpadding="0" ,。然后在屬性面板中設(shè)置表格的背景色。

         進(jìn)入源代碼窗口,，把<td></td>中間的系統(tǒng)自動(dòng)加入的“ ”刪除,、height設(shè)置為"1"。

          當(dāng)把“ ”刪除后,，表格就收縮了,，設(shè)置的背景顏色也成了水平細(xì)線的顏色。

         必須注意的是,，最好在設(shè)定了背景顏色時(shí)再把“ ”刪除,，否則，在設(shè)計(jì)窗口中再改動(dòng)顏色就不太方便了,。

          請(qǐng)同學(xué)們考慮如何制作各種顏色的垂直細(xì)線?。?！

,、

四、網(wǎng)頁的動(dòng)態(tài)過渡效果

           當(dāng)從一張網(wǎng)頁點(diǎn)擊超級(jí)鏈接到下一張網(wǎng)頁時(shí),，將出現(xiàn)過渡效果,。

        方法：打開A網(wǎng)頁，點(diǎn)擊“插入”－》“HTML”－》“文件頭標(biāo)簽”－》“Meta(M)”命令??！

         其中，參數(shù)為：

     屬性為 “HTTP-EQUIVALENT”,；

      值為     “PAGE-ENTER”,；

      內(nèi)容為

           “REVEALTRANS(DURATION=3,TRANSITION=2)”。

         注意：延時(shí)不要太長,；效果值在0到23之間?。?/P>

五,、動(dòng)畫效果代碼“Marquee”

        1）基本語法

                    <marquee> ... </marquee>

          基本用法：把該代碼插入到“</body>”之前?。?/P>

          如：“<marquee>啦啦啦,，我會(huì)移動(dòng)耶,！</marquee>”?。?/P>

                    該代碼自動(dòng)從右到左移動(dòng)??！

        例子：

          “<marquee direction=left>啦啦啦，我從右向左移,！</marquee> ”,；

          “<marquee direction=right>啦啦啦，我從左向右移,！</marquee>”,。

          其中：direction為方向（值為“l(fā)eft、right,、up,、down”）！

動(dòng)畫效果代碼“Marquee

1）基本語法

         例子：

         “<marquee behavior=scroll>啦啦啦,，我一圈一圈繞著走,！</marquee> ”；

         “<marquee behavior=slide>啦啦啦,，我只走一次就歇了,！</marquee>”；

          “<marquee behavior=alternate>啦啦啦,，我來回走耶,！</marquee>”！,！

         其中：behavior為方式（行為）?。?/P>

1）基本語法

        例子：

        “<marquee loop=3 width=50% behavior=scroll>啦啦啦,，我只走 3 趟喲！</marquee>”,；

        “<marquee loop=3 width=50% behavior=slide>啦啦啦,，我只走 3 趟喲！</marquee> ”,；

        “<marquee loop=3 width=50% behavior=alternate>啦啦啦,，我只走 3 趟喲！</marquee>”??！

           其中： loop為循環(huán)次數(shù)；width為寬度??！

基本語法

            例子：設(shè)置背景色

          “<marquee bgcolor=aaaaee>啦啦啦,，我會(huì)移動(dòng)耶！</marquee>”??！

         其中：bgcolor為背景色，為16 進(jìn)制數(shù)碼（值在000000－－FFFFFF之間）??！

基本語法

           例子：限定高寬空間

           “<marquee height=40 width=50% bgcolor=aaeeaa>

啦啦啦，我會(huì)移動(dòng)耶,！</marquee>”?。?/P>

           “<marquee height=40 width=50% bgcolor=aaeeaa direction=up> 啦啦啦,，我會(huì)移動(dòng)耶,！</marquee>”！,！

            其中：height為高度,；width為寬度！,！數(shù)值加％為相對(duì)數(shù),，寬度一般為相對(duì)值、而高度一般為絕對(duì)值??！數(shù)值單位默認(rèn)為象素！,！

基本語法

           例子：延時(shí)和速度

           “<marquee scrollamount=20>啦啦啦,，我走得好快喲！</marquee>”??！

           “<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步,，停一停,！</marquee>”！,！

     其中：scrolldelay為延時(shí),；單位為毫秒！,！

                scrollamount為速度?。挝粸楹撩?/P>

2）背景音樂

           基本用法：把該代碼插入到“</body>”之前??！

           例子：

           “<bgsound src="1747.mid" loop=3>”?。?/P>

            其中：LOOP為循環(huán)次數(shù)（可以不用該參數(shù)?。?；

                       SRC為MIDI音樂文件的地址（可以是其他格式音樂文件）！,！

六,、簡單對(duì)網(wǎng)頁進(jìn)行加密

           思想是：為了防止網(wǎng)頁內(nèi)容被拷貝，可以對(duì)整個(gè)網(wǎng)頁添加彈出信息行為,！

             效果是：當(dāng)網(wǎng)頁下載后,，就彈出“該網(wǎng)頁只能看看！哈哈??！”信息窗口！,！另外,，當(dāng)用戶用鼠標(biāo)點(diǎn)擊網(wǎng)頁中任何位置（左或右擊），就彈出“該網(wǎng)頁只能看看,！哈哈?。　毙畔⒋翱冢,?！鍵盤快捷鍵等！,！

             做法是：為了使加密效果更好,，可以使用若干行為！,！

              選中網(wǎng)頁編輯左下角的“<BODY>”按鈕?。?/P>

              在行為面板上點(diǎn)擊“＋”按鈕,，選中“彈出信息”行為?。≡谙⑤斎肟蛑休斎胛淖帧霸摼W(wǎng)頁只能看看,！哈哈！,！”?。?/P>

                             請(qǐng)思考：可用的事件有那些,？,？

                  提示：如“下載”,、“鼠標(biāo)”和“鍵盤”相關(guān)事件等！

          表單通常由兩部分組成：描述表單的源代碼（如HTML或ASP等）,、處理瀏覽者在表單中輸入信息的應(yīng)用程序（如可以是服務(wù)器端或客戶端的應(yīng)用程序

第八張網(wǎng)頁的制作方法

      首先安裝“小旋風(fēng)asp服務(wù)器”軟件,；

      在“wwwroot”文件夾中刪除文件“INDEX.ASP”！,！

      再確定本地計(jì)算機(jī)的IP地址?。?/P>

           第九張網(wǎng)頁“如虎添翼之深藍(lán)軍事論壇”的特點(diǎn)：

           該網(wǎng)頁是一種交互式網(wǎng)頁?。o態(tài)網(wǎng)頁技術(shù)模擬的）,。

           用戶可以模擬的輸入文字、多項(xiàng)選項(xiàng),、單項(xiàng)選項(xiàng),、提交動(dòng)作等（要真正能提交，就必須學(xué)習(xí)ASP和數(shù)據(jù)庫）,。

           創(chuàng)建與使用表單來創(chuàng)建交互式頁面：如登陸系統(tǒng),、調(diào)查表、上傳文件表單等??！

                                  如下圖！,！

第八章網(wǎng)頁的制作方法

            1,、啟動(dòng)Dreamweaver，進(jìn)入編輯界面??！

         2、插入Banner：進(jìn)入“布局”狀態(tài)，點(diǎn)擊“布局”按鈕,，進(jìn)入布局模式：如圖

               屬性中設(shè)置為：居中對(duì)齊,。

           單擊“         ”布局表格按鈕，在編輯區(qū)任意拖出一個(gè)區(qū)域,，就是一個(gè)布局表格,。屬性設(shè)置為：

         寬為“固定”，值為754,；高為108,。

、點(diǎn)擊“               ”繪制布局單元格按鈕,，在上面的布局表格中任意拖出一個(gè)區(qū)域,。屬性為：

        寬為“固定”，值為754,；高為108,。水平為居中對(duì)齊，垂直為頂端,。

        點(diǎn)擊布局單元格內(nèi),，點(diǎn)擊“插入”－－》“圖像”，插入文件名為：“09-01.JPG”,。

第一次保存文檔?。∥募欢ㄒ谩癐NDEX.HTM”??！保存到“wwwroot”文件夾中！?。ㄗ⒁猓喝绻嬖谝粋€(gè)“INDEX.HTM”文件,，就把他改名為“INDEX－8.HTM”）

        以后隨時(shí)進(jìn)行保存！（按“Ctrl+S”鍵?。?/P>

        保存后就可以瀏覽設(shè)計(jì)的效果了?。?/P>

         用通用本地地址“HTTP://127.0.0.1”,；

         或本地IP地址?。?/P>

制作導(dǎo)航欄：

              再次在上一個(gè)布局表格之下,，利用布局表格,，拖出一個(gè)布局表格。屬性為：

          寬為“固定”,，值為756,；高為56；背景顏色為#cccccc。

           在該布局表格內(nèi),，利用繪制布局單元格來任意繪制一個(gè)區(qū)域，屬性為：

            寬為“固定”,，值為756,；高為25；垂直為居中,；背景顏色為#006699,。

4、制作導(dǎo)航欄：

          點(diǎn)擊該單元格內(nèi),，設(shè)置頁面屬性：

           1）外觀選項(xiàng)卡中,，大小為14；文本顏色#ffffff,；

           2）鏈接選項(xiàng)卡中,，“鏈接顏色”、“已訪問鏈接”,、“活動(dòng)鏈接”都設(shè)置為#ffffff,；“變換圖像鏈接顏色”為#ff9933；“下劃線樣式”為“僅在變換圖像時(shí)顯示下劃線”,。

            最后確定,。

、制作導(dǎo)航欄：

          點(diǎn)擊該單元格內(nèi),，輸入相應(yīng)的文字,，并用空格來布局文字！,！

         并對(duì)文字設(shè)置超級(jí)鏈接?。】梢匀我庠O(shè)置??！

創(chuàng)建“列表/菜單”：

          利用“繪制布局單元格”按鈕，再次在上面余下的布局表格中繪制一個(gè)區(qū)域,。屬性為：寬為“固定”,，值為756；高為14,。（起到分隔作用?。。?/P>

          利用“繪制布局單元格”按鈕,，再次在上面余下的布局表格中繪制一個(gè)區(qū)域,。屬性為：寬為“固定”，值為140；高為17,。

         在該單元格區(qū)域中,，輸入相應(yīng)文字，如“歡迎進(jìn)入模擬軍事論壇”,。文字屬性為：文本顏色#006666,。

創(chuàng)建“列表/菜單”：

           利用“繪制布局單元格”按鈕，再次在上面余下的布局表格中繪制一個(gè)區(qū)域,，全部區(qū)域,。

         點(diǎn)擊該區(qū)域內(nèi)，點(diǎn)擊“插入”－－》“表單”－－》“列表/菜單”命令,。就插入了一個(gè)表單元素,。

         點(diǎn)擊“列表/菜單”表單元素，設(shè)置屬性為：類型為菜單,；

         點(diǎn)擊“列表值”：分別輸入文字內(nèi)容?。∪纭皶?huì)員名”,、“郵箱名”,、“IP地址”等。

創(chuàng)建“文本”域：

           點(diǎn)擊以上的表單區(qū)域內(nèi),，點(diǎn)擊“插入”－－》“表單”－－》“文本字段”命令,。就插入了一個(gè)文本字段表單元素。

           點(diǎn)擊“文本字段”表單元素,，設(shè)置屬性為：類型為單行,；字符寬度為10；初始值為文字“請(qǐng)輸入”,。

         點(diǎn)擊該文本字段表單元素的后面,，輸入文字內(nèi)容：如“密碼”；

         并設(shè)置文字屬性：文本顏色為#006666

6,、創(chuàng)建“文本”域：

         在“密碼”之后,，再插入一個(gè)“文本字段”表單元素。

           點(diǎn)擊“文本字段”表單元素,，設(shè)置屬性為：類型為密碼,；字符寬度為12；初始值為文字“123456789”,。

7,、創(chuàng)建“跳轉(zhuǎn)菜單”域：

         在“密碼”“文本字段”表單元素之后,，插入一個(gè)“跳轉(zhuǎn)菜單”表單元素,，并設(shè)置其屬性：在對(duì)話框中設(shè)置：

          選項(xiàng)為“菜單之后插入前往按鈕”；

         第一條“文本”輸入“陸軍論壇”,；“選擇時(shí)，轉(zhuǎn)到URL：”輸入任意地址,；點(diǎn)擊“+”按鈕,；

         第二條“文本”輸入“空軍論壇”,；“選擇時(shí),，轉(zhuǎn)到URL：”輸入任意地址,；點(diǎn)擊“+”按鈕；....

         可以輸入若干條跳轉(zhuǎn)地址

8,、制作論壇情況調(diào)查表：

       1）插入論壇標(biāo)志圖像

            點(diǎn)擊“布局表格”按鈕，在下面任意拖動(dòng)出一個(gè)區(qū)域,，即布局表格區(qū)域,。寬為756,！

            點(diǎn)擊“繪制布局單元格”按鈕,，在該布局表格內(nèi)的左邊,，拖出一布局單元格,。寬為210,！

            在該布局單元格內(nèi)插入圖像，如“09-02.gif”,。

            點(diǎn)擊該布局單元格,，設(shè)置背景顏色為#006699??！

、制作論壇情況調(diào)查表：

       2）創(chuàng)建單選按鈕

            點(diǎn)擊圖像之下的空白處，插入－》表單－》單選按鈕,，回車兩次??！

            再插入三個(gè)單選按鈕，之間加入空格?。?/P>

          輸入文字“你認(rèn)為深藍(lán)軍事論壇”,！居中,，加粗！,！

          在每個(gè)單選按鈕之后,，輸入文字，如“很好”,、“較好”、“一般”,、“差”等?。?/P>

3）創(chuàng)建文本表單按鈕

            在文字“差”之后，插入－》表單－》按鈕,，共插入兩個(gè)！,！

            點(diǎn)擊第一個(gè)按鈕,，設(shè)置屬性：動(dòng)作為“提交表單”！

            點(diǎn)擊第二個(gè)按鈕,，設(shè)置屬性：動(dòng)作為“重設(shè)表單”,！

、制作論壇情況調(diào)查表：

       4）創(chuàng)建復(fù)選框

            在“重置”按鈕之后,，回車一次?。?/P>

            輸入文字“你最喜歡的軍事論壇是”??！屬性為：居中,，加粗！,！         再次回車?。?/P>

            插入－》表單－》復(fù)選框,，請(qǐng)插入5個(gè)?。?/P>

             在每個(gè)復(fù)選框之后,，輸入文字,，如“陸軍論壇”、“海軍論壇”,、“空軍論壇”,、“二炮論壇”,、“熱點(diǎn)論壇”！,！

                插入－》表單－》按鈕,，共插入兩個(gè)！,！

            點(diǎn)擊第一個(gè)按鈕,，設(shè)置屬性：動(dòng)作為“提交表單”！

            點(diǎn)擊第二個(gè)按鈕,，設(shè)置屬性：動(dòng)作為“重設(shè)表單”,！

5）制作論壇文本格式

              點(diǎn)擊繪制布局單元格，在右邊繪制四列區(qū)域??！寬為：546！,！

              第一列高為：20,；第二、三,、四列高為100?。?/P>

           在第二列中,，插入水平線，及其文字??！

           在第三列中，輸入文字??！

           在第四列中，輸入文字??！

6）制作論壇提交表單

           點(diǎn)擊繪制布局單元格，在下面邊繪制一列區(qū)域??！寬為：546；高自定??！

            輸入文字“回復(fù)本論題”！,！   居中,；加粗?。?/P>

             插入－》表單－》文本字段??！插入兩次！,！

          在第一個(gè)文本字段之前,，輸入文字“文章主題”！,！

          在第二個(gè)文本字段之前,，輸入文字“電子郵件”！,！

          點(diǎn)擊第一個(gè)“文本字段”按鈕,，設(shè)置屬性：類型為單行；字符寬度為50??！

            點(diǎn)擊第二個(gè)“文本字段”按鈕，設(shè)置屬性：類型為單行,；字符寬度為20,；初始值為“@”！,！

6）制作論壇提交表單

           在下一行,，輸入文字“文本內(nèi)容                              （最多字?jǐn)?shù)不得超過5000字）”！,！

         在之后插入提交表單按鈕,！

         在之下插入文本區(qū)域，屬性為：

      類型為多行,；字符寬度為70,；行數(shù)為5！,！