DREAMWEAVER_8.0_網頁制作教案

1、DREAMWEAVER 8.0 網頁制作教案（二）鄺翠珊 HYPERLINK mailto:cskuang cskuang 39322544-826復習：網頁制作的一些常用功能：定義站點、數據表格的制作（學習表格的插入、合并拆分與嵌套）、利用表格布局網頁、頁面屬性的設置、圖片插入、文字的插入、日期的插入、插入電子郵件鏈接、flash動畫插入 、插入水平線、練習1、練習上節(jié)課的內容：建立站點（包括站點文件）、用表格布局網頁、設置頁面屬性、圖片、文字、日期、電子郵件鏈接、flash動畫、水平線等的插入交換圖象效果的制作：（插入圖像對象鼠標經過圖象）鼠標經過圖象的效果是當鼠標指針經過或者按下按鈕的時

2、候，圖像或按鈕的形狀或顏色就會發(fā)生變化，如圖像變換，發(fā)光，或者陰影出現等等。是網頁變的生動活潑起來。看dreamweaver學習網站導航演示：鼠標移動到圖片上的時候，圖片變成了另外一幅，當鼠標移開后恢復到原來的圖象。制作步驟：1、光標移動到欲插入的位置，點擊菜單欄【插入】【圖像對象】【鼠標經過圖像】打開對話框：【圖像名稱】鼠標經過圖像的名稱，名稱是自定義的，只要不與同頁面另一個鼠標經過圖像名稱相同即可，也可以不填。【原始圖像】頁面開始時顯示的圖像【鼠標經過圖像】鼠標經過的時候顯示的圖像?！咎鎿Q文本】圖像無法正常顯示的時候出現的文本注釋，也是圖像正常顯示時鼠標指向鏈接時的說明，也可以不填。【前往

3、的URL】點擊鼠標后鏈接的目標。【預載鼠標經過圖像】瀏覽網頁時兩個圖片都同時被下載，當鼠標經過時無需從網上下載，而是調用預先下載的圖像，減少延遲，使效果平滑流暢。二、了解簡單的HTML：超文本標志語言，簡要的介紹網頁中使用的超文本標識語言HTML的基本概念和用途通過一個簡單的html示例（html.html）了解html的基本構成，介紹html的基本組成部分.如果深入了解可以參考： HYPERLINK /teaching/htmlbook/ /teaching/htmlbook/ 練習2、試在練習1中建立的網頁文件index.html中進行交換圖像的練習。三、制作滾動的公告文字在網頁上可以方便

4、地設置文字上下左右移動，控制文字移動的標點詞,如下格式：文字在移動在瀏覽器中顯示時，文字在移動這幾個字左右移動。還有一些重要的屬性。dirrction:控制移動方向，可取left,right,up,down四個值；behavior:移動方向，可取scroll (循環(huán)移動),slide(只走一圈),alternate(來回移動)；loop:指定循環(huán)次數，不輸入或-1表示無限循環(huán) height,width:移動區(qū)域的高和寬，單位像素scrollamount:移動的快慢，整數越大則越快scorlldelay:每移動一步之后的延時，單位毫米bgcolor:移動區(qū)域的背景色onmouseover=thi

5、s.stop() 鼠標覆蓋時停止?jié)L動 onmouseout=this.start() 鼠標離開時開始滾動如下面的代碼就是一個常見的實現向上滾動文字的原代碼；請各位老師上課時都把第一次的講義一起帶來。上課地點：實驗3號樓508授課教案下載：1、2、3 該學習站點整站下載 綜合作業(yè)要求 代碼中黃色斜體部分為滾動的內容。練習3、打開：index.html的文件，在此網頁中做滾動的公告文字的練習，四、設置網頁超鏈接（網頁是通過鏈接聯(lián)系起來的）簡稱鏈接鏈接是頁面與頁面之間一個單向的關聯(lián)關系。通過點擊鏈接，我們可以從一個頁面跳到另一個頁面。我們可以在文字、圖片建立鏈接。要正確創(chuàng)建連接，必須了解鏈接與被鏈接

6、之間的路徑關系，每一個網頁都有唯一的地址，稱為URL（統(tǒng)一資源定位符），外部鏈接：不同網站文檔之間的鏈接。 內部鏈接：在同一網站文檔之間的連接。 （一般創(chuàng)建內部鏈接，即在同一網站文檔之間的連接，不需要指定完整的URL，而是指定相對于當前文檔或站點的根文件夾間的路徑。）E-mail連接：打開填寫電子郵件表格的連接。 建立一個填好收件人地址的空白郵件鏈接，方便網絡溝通。文件鏈接：鏈接ppt、word、圖片等，以鏈接的方式提供下載服務。錨點鏈接：同一網頁或不同網頁的指定位置的連接。錨點可以給內容較多的頁面進行編號，方便快速訪問瀏覽。圖像鏈接同文字鏈接一樣，是網頁中常見的超級鏈接圖片熱區(qū)鏈接：可以為一

7、張圖片它設定不同的熱點區(qū)域，當在網頁圖片上的不同位置按下鼠標左鍵，此時就會連接至不同的網頁。 （可以將圖象分割為不同的鏈接源，這些鏈接源可以擁有獨立的鏈接目標。）圖片熱區(qū)鏈接制作方法：選中網頁中的圖片，在圖片的屬性面板中選擇矩形熱點工具，在圖象上畫出一個熱區(qū)，此時屬性面板中顯示為當前新建熱區(qū)的相關參數，在鏈接框中，設置鏈接網頁或其他的網絡資源在目標欄中設置打開網頁的方式，當需要選擇修改其他熱區(qū)時，可以使用指針熱區(qū)工具選擇目標熱區(qū)，然后在屬性面板修改相關鏈接設置。絕對路徑：完整的URL，稱作絕對路徑。例如在鏈接域輸入： HYPERLINK 或 HYPERLINK file:/F|/web/jin

8、gpin.htm file:/F|/web/jingpin.htm 地球，中國，廣州文檔相對路徑：以當前文檔所在位置為起點到被連接文檔經由的路徑。這是用于本地鏈接的最適宜的路徑。例如，dreamweaver/contents.html就是一個文檔相對路徑。當我們要把當前文檔與處在相同文件夾中的另一文檔鏈接，或把同一網站下不同文件夾中的文檔相互鏈接時，就可使用相對路徑。根相對路徑：根相對路徑是指從站點根文件夾到被鏈接文檔經由的路徑。一個根相對路徑以前斜杠開頭，它代表站點根文件夾。例如， /support/tips.html就是站點根文件夾下的support子文件夾中的一個文件（tips.html

9、）的根相對路徑。根相對路徑是指定網站內文檔鏈接的最好方法，因為在我們移動一個包含根相對鏈接的文檔時，無需對原有的鏈接進行修改。 認識鏈接的目標：（鏈接網頁打開的方式）1、_seft為本窗口； 2、_top為上級窗口（使用多級框架時）3、_blank為打開新窗口； 4、_parent為父窗口（使用框架時）； 5、默認的效果.第1和第5種情況是相同的，_self表示“相同窗口”。點擊鏈接后，地址欄不變。在網頁中沒有做設置時，網頁鏈接默認的窗口為_self。.第2和第4種情況，也是相同的。_top表示整頁窗口，_parent表示父窗口。實際使用中，它們沒有任何區(qū)別，地址欄會變化。._blank是最常

10、見的鏈接方式，表示超鏈接的目標地址在新建窗口中打開。練習4、打開：未做超鏈接.html的文件，在此網頁中做超鏈接的練習，參看文件超鏈接.htm。五、word和excel文檔的導入。六 、利用一個現有網頁制作其他網頁（相同的頁眉，導航，頁腳）例如利用首頁index.html制作課程介紹這一頁 kcjs.html步驟：打開index.html文件，把頁面中相同的部分如頁眉，導航，頁腳等保留，不同的地方刪除或更改，再保存為kcjs.html在需要更改的地方插入圖片等其他網頁內容。練習5、打開index.htm,利用這個網頁制作出幾個相同的頁眉，導航，頁腳的網頁。并設置這些網頁導航的鏈接，七、行為的簡

11、單運用：（一）利用行為創(chuàng)建彈出式菜單制作“彈出式菜單”的步驟如下： （1）在網頁上選擇要附加該行為的對象（導航欄按鈕、鏈接文本、圖片等）并打開“行為”面板。（2）單擊加號 (+) 按鈕并從“動作”彈出式菜單中選擇“顯示彈出式菜單”，彈出設置對話框，如圖14-13所示。圖14-13 設置彈出式菜單（3） 在出現的“顯示彈出式菜單”對話框中，使用以下標簽來設置彈出式菜單的選項： 內容：設置、更改單個菜單項的名稱、結構、URL 和框架目標。 外觀：設置菜單一般狀態(tài)和滑過狀態(tài)的外觀以及設置菜單項文本的字體選擇。 高級：設置菜單單元格的屬性。例如，可以設置單元格的寬度和高度、單元格顏色和邊框寬度、文本縮

12、進以及在用戶將鼠標指針移到觸發(fā)器上后菜單出現之前的延遲時間長度。 位置：設置菜單相對于觸發(fā)圖像或鏈接的放置位置。 （4）單擊“確定”，關閉對話框。（5）檢查默認事件是否是所需的事件。該行為的事件一般為“onMouseover”，即鼠標滑過時顯示菜單。（二）彈出消息框。（三）打開瀏覽窗口（1）選擇網頁中需要點擊的內容，在屬性面板上的鏈接欄上填上 # ，如下圖：（2）打開行為面板，點擊（+）按鈕并從動作彈出式菜單中選擇打開瀏覽器窗口；（3）在打開的瀏覽器窗口中點擊瀏覽選取需要鏈接的文件，或者輸入您需要顯示的URL地址。（4） 設置下列選項： 窗口寬度 指定以象素為單位的窗口寬度。 窗口高度 指定以

13、象素為單位的窗口高度。 導航工具欄 是一行瀏覽器按鈕包括前進，后退，主頁和刷新。 地址工具欄 是一行瀏覽器選項，其中包括地址域。 狀態(tài)欄 是瀏覽器窗口底部的區(qū)域，用于顯示信息（如剩余加載時間，和URL關聯(lián)的鏈接）。 菜單條 是瀏覽器窗口（Windows）或桌面（Macintosh）上菜單出現的區(qū)域。菜單包括如文件，編輯，查看，轉到，幫助等等。如果您需要來訪者可以從新窗口導航，那么您可以明確地設置該選項。如果您不設置該選項，來訪者在新窗口中將只能關閉或最小化窗口（Windows）或者關閉窗口或退出程序（Macintosh）。 需要時使用滾動條 指定如果內容超過可見區(qū)域時滾動條自動出現。如果您不明

14、確設置該選項，滾動條不會出現。如果調整大小手柄也被關閉，那么來訪者將沒有方便的辦法看見超過窗口原始大小的那部分內容。（雖然他們可能可以通過使用拖動窗口邊緣的辦法使窗口滾動。） 調整大小手柄 指定用戶是否可以調整窗口大小，無論是通過拖動窗口的右下角還是點擊右上角的最大化按鈕（Windows）或大小框（Macintosh）的辦法。如果該選項沒有明確設置，調整大小控制將不可用，而且右下角也是不可拖動的。 窗口名稱 就是新窗口的名稱。如果您想使用其作為鏈接目標或者用JavaScript控制它，那么您應該給新窗口命名。該名稱中不能包含空格或特殊字符。 （5）點擊確定。 （6）檢查默認事件是否是您需要的事件。 如果該事件不是您所需的，請從彈出式菜單中選擇另