DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> DW建站建頁終極教程四
DW建站建頁終極教程四
編輯:Dreamweaver相關     

十九、用框架布局頁面

框架由兩個主要部分組成——框架集和單個框架。
1、 點擊插入中的框架,即顯示出已定義的13種框架的樣式。我們上—中—下結構為例。
2、 點擊“上—中—下”框架結構的圖標,此時在頁上插入上下兩個框架,將整個頁面分割成了3部分。我們分別在上面輸入“上”,在中間輸入“中”,在下面輸入“下”。
3、 先保存一下。點擊菜單中的文件/保存全部。這時首先保存框架集文件,可以自己修改名字,如kuangjia.htm。然後將分別保存框架集中的其他頁面。在保存對應的頁面的時候,該部分會以虛線框起來,這樣可將上面部分保存為shang.htm。下面部分保存為xia.htm。中間部分保存為zhong.htm。
4、 至此,我們保存了四個頁面,分別是框架集,和組成框架集的上、中、下三個頁面。所以,其實這個框架是由四個頁面組成的,所以用框架會降低一點用戶浏覽的速度。
5、 點擊窗口/其他/框架,打開框架的面板。在這裡單擊某個框架,即可選中該框架。當框架被選中時,編輯窗口中對應的框架出現虛線。
6、 如:選中上面topframe,此時屬性面板上顯示的是上面這個框架的屬性。同樣選中中間框架和下面框架,也可以分別設置它們的屬性。
7、 在編輯窗口中,將鼠標放在兩框架之間的邊框上,光標將變成上下箭頭形,此時點擊邊框,選中的是整個框架集。
8、 此時屬性面板上出現的是整個框架組的屬性。可以在此設置框架集是否有邊框、寬度及顏色等。不過最為重要的是可以在這裡設置框架集中各個框架的大小。
9、 在屬性面板的右面的圖示上選中上面框架,設置它的行為80像素,邊框為0。
10、選中下面框架,設置行高為30像素,邊框為0。
11、選中中間框架,設置行高為1,單位為相對。(相對的意思是:當前行相對於其他行所占的比例。設為1就是指占據除上和下以後的所有浏覽窗口剩余空間。
12、舉例:將光標置於上面框架topFrame上,右鍵選頁面屬性,設置背景色為#FF6600。然後插入/表格,插入一個1行2列,邊框邊距都為0的表格。設置第1個單元格的寬度為116像素,然後插入一張圖片。將第2個單元格設置為水平對齊方式為居中,垂直排列方式為底部,然後依次輸入“獅子座”、“魔蠍座”、“雙子座”字樣。
13、將光標置於中部框架mainFrame中,右鍵選頁面屬性,設置背景色為#FFFFCC。然後插入一張大圖像。
14、將光標置於下面框架bottomFrame中,右鍵選頁面屬性,設置一個背景圖像。
15、另外做好三個頁面,作為“獅子座”、“魔蠍座”、“雙子座”所要鏈接的頁面。
16、選中“獅子座”,在屬性中為它設置好要鏈接的頁面,然後在“目標”裡選“mainframe”,即該內容在中間那個框架中顯示。
17、同樣設置“魔蠍座”、“雙子座”的鏈接。

二十、跳轉菜單

1、 點擊主菜單中的插入/表單對象/跳轉菜單,也可以用插入/表單,中的跳轉菜單圖標,來調出跳轉菜單設置窗口。
2、 首先在“文本”一欄裡輸入“請選擇相關網站”字樣。然後點擊窗口上的“+”號按鈕。這時菜單裡多了一個選項,這個選項沒有鏈接,僅作為跳轉菜單的說明文字。
3、 在文一欄裡輸入需要的網站,如“新浪”,然後在“選擇時,前往URL”一欄裡輸入網站鏈接地址http://www.sina.com.cn,此時,菜單項一欄裡又多了一個選項,這個選項對應一個網的鏈接地址。
4、 使用同樣方法,在菜單中添加其他一些選項及對應的鏈接。還可以用“上”“下”的按鈕,來調整它們的順序。
5、 設置窗口的“菜單之後插入前往按鈕”一項先不要選擇。選中“更改URL後選擇第一個項目”一項,這樣當使用跳轉菜單到某個頁面後,如果返回到跳轉菜單頁面,此時頁面中的跳轉菜單默認顯示的依舊是第1項內容。
6、 設置完畢後點擊“確定”即可。
****因為跳轉菜單是一個表單,所以其實是先插入了表單(紅色虛線區域),然後在表單中再插入了下拉菜單。
7、 想修改選項,可以選中頁面上的下攔菜單,此時點擊屬性面板中的“列表值”,即可修改各項內容了。

8、 當選中跳轉菜單時,行為窗口中也出現行為。雙擊該行為,也可以進入設置窗口,可以重新對其進行設置。
9、 如果“菜單項”裡的第一項就是鏈接,而不是上面所說的一句提示的話,那麼就要選中“選項“中的“菜單之後插入前往按鈕”。添加一個“前往”按鈕。

二十一、運用插件(Dreamweaver功能擴展)

1、 首先下載好需要的插件,此處舉例用的是Animate Browser Window。這是一個動態改變窗口的大小的插件。打開Dreamweaver Extension Manager,安裝下載好的插件。
2、 啟動Dreamweaver,在做好的頁面上,右擊左下角〈body>,然後點擊行為窗口中的“+”號按鈕,在其中選擇“Animate Browser Window”,然後在其中做相應的設置。這裡設置窗口打開之前高寬均為0,打開後為填滿屏幕。觸發條件為onLoad。

二十二、滾動字幕

1、把光標插入點放在需要插入滾動字幕的地方。
2、點擊插入面板的“標簽選擇器 ”。
3、選擇 marquee標簽,點擊“插入”按鈕。然後關閉“標簽選擇器 ”。
4、轉換到代碼視圖。把光標插入點放在 兩個marquee標簽之間。
5、選擇“窗口”/“標簽檢查器”。可以在“標簽檢查器”中設置標簽的各種用法。
6、點擊behavior設置項右邊的下拉箭頭,選擇滾動字幕內容的運動方式。其中三個選項意思分別是:Alternate:內容在相反兩個方向滾來滾去。Scroll:內容向同一個方向滾動。Slide:內容接觸到字幕邊框就停止滾動。
7、direction屬性設置字幕內容的滾動方向。四個選項意思為:down:向下運動。Left:向左運動。Right:向右運動。Up:向上運動。
8、scrollamount屬性設置字幕滾動的速度。一般設為1。
9、scrolldelay屬性設置字幕內容滾動時停頓的時間,單位為毫秒。如果要讓滾動看起來流暢,數值應該盡量小。實例中設置為1毫秒。
10、width屬性設置滾動字幕的寬度。這個任意,比如設置為300。
11、onMouseOver事件設置鼠標移動到滾動字幕時的動作,常設置為停止滾動。onMouseOut事件設置鼠標離開滾動字幕時的動作,常設置為開始滾動。這個兩項不能選,只能手工輸入。在onMouseOver後面輸入“this.stop();” 在onMouseOut後面輸入“this.start();”
12、style屬性設置字幕內容的樣式。實例中設置字幕文字大小,也要手工輸入“font:12px;”。
13、loop屬性設置字幕內容滾動次數,默認值為無限。“-1”也為無限。
14、全部

12下一頁
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved