21. 給文字施加行為(
Behavior),制作動(dòng)態(tài)文字特效
在
Dreamweaver中普通的文字是以字符為單位的,不能作為對(duì)象,即一些非常有用的
JavaScript事件不能賦予文字。因?yàn)槲淖植幌駡D片和
其他控件有具體的
“標(biāo)記
”,所以文字與很多特效失之交臂。為了給文字添加特效,只有把文字做成超鏈接來(lái)處理。這樣文字就成為了對(duì)象,可以施加行為了。但是這樣又帶來(lái)了一些不需要的超鏈接屬性,比如下劃線,以及
hover、
visited等顏色變化。
要想單純?yōu)槲淖痔砑犹匦?,可以先把所想設(shè)置的文字做成超鏈接,然后再在它的上面添加行為,最后我們?cè)侔殉溄愚D(zhuǎn)變?yōu)槠胀ㄎ淖?。具體的步驟如下:
選中你想編輯的文字,在鏈接目標(biāo)框里隨便填入幾個(gè)字符。選中這個(gè)鏈接,單擊窗口(
Windows)
→行為(
Behaviors),彈出行為面板。按下
“+”添加你想要的行為,如
play sound等。打開(kāi)
Dreamweaver的超文本編輯器,找到這個(gè)鏈接,把改為,把改為。最后把
“href=...”刪掉。保存此頁(yè)。按
F12預(yù)覽一下。效果還不錯(cuò)吧!
22. 精確定位網(wǎng)頁(yè)中各個(gè)元素的位置
精確定位網(wǎng)頁(yè)中各個(gè)元素的位置有兩種方法:使用表格或?qū)?。使用表格是目前比較通用的做法,具體方法是:先在網(wǎng)頁(yè)中建立一個(gè)表格,注意表格的邊框?qū)挾葢?yīng)為0。然后再把各個(gè)元素按照你的要求放在各個(gè)表格單元之中。仔細(xì)調(diào)整表格單元的大小以及表格邊框的位置,這時(shí)在表格單元中的元素也會(huì)隨之移動(dòng)位置。這樣你就可以比較精確地定位網(wǎng)頁(yè)中各個(gè)元素的位置了。使用表格的優(yōu)點(diǎn)是通用,幾乎各個(gè)版本的瀏覽器可以致支持表格。它的缺點(diǎn)是使用起來(lái)比較麻煩,需要仔細(xì)進(jìn)行調(diào)整,而且定位不十分精確。層在網(wǎng)頁(yè)中可以隨意放置,因此我們可以使用層來(lái)進(jìn)行精確定位。使用方法是,在網(wǎng)頁(yè)中插入一個(gè)層,然后把你想要定位的元素放在層里,接著我們就可以把層放到所想要任何位置了。此外,你還可以借助標(biāo)尺和網(wǎng)格進(jìn)行精確的定位。因?yàn)閷又辉谧钚碌臑g覽器中被支持,所以為了兼容舊的瀏覽器,我們可以把層轉(zhuǎn)變?yōu)楸砀瘛7椒ㄊ沁x擇
“修改
(Modify)→版面布局模式
(Layout Mode) →把層轉(zhuǎn)化成表格
(convert layers to table)”即可。注意這時(shí)的層不能有重疊,我們可以在插入層之前選擇
“查看
(view) →防止層交錯(cuò)
(prevent layer overlaps)”來(lái)避免層的重疊。一般來(lái)說(shuō)轉(zhuǎn)換后的頁(yè)面可能會(huì)有一些變化,還需要我們手工進(jìn)行調(diào)整。最后有一點(diǎn)要注意,在進(jìn)行表格和層的相互轉(zhuǎn)換時(shí),最好不要在一個(gè)頁(yè)面中同時(shí)使用層與表格,那樣可能會(huì)把你的頁(yè)面弄得一團(tuán)糟。
23. 改變?yōu)g覽者的鼠標(biāo)形狀
這是通過(guò)編輯樣式表來(lái)實(shí)現(xiàn)的。具體方法是:選擇
“文字(
text)
→定制樣式(
CSS Style)
→編輯樣式表(
Edit Style Sheet)
”,彈出編輯樣式表窗口,在其中選擇
“新建(
new)
”。接著選擇
“建立一個(gè)定制的樣式(
Make custom style)
”,給這個(gè)樣式表起名,單擊確定。編輯該樣式表,選擇擴(kuò)展項(xiàng)
(extension),在右邊的光標(biāo)項(xiàng)(
Cursor)中選擇要出現(xiàn)的指針效果即可。
24. 去掉超鏈接文字之下的下劃線
這一效果是通過(guò)編輯樣式表來(lái)實(shí)現(xiàn)的。具體方法是:
“點(diǎn)擊文字(
text)
→定制樣式(
CSS Style)
→編輯樣式表(
Edit Style Sheet)
”,出現(xiàn)編輯樣式表窗口,選擇
“新建(
new)
”。接著選擇重定義
HTML標(biāo)記(
Redefine HTML Tag),并在下面的標(biāo)記
(Tag)選單中選擇
a。編輯該樣式表,選擇類(lèi)型
(type),在右邊的裝飾(
decoration)中選中無(wú)(
none )即可。
25. 制作一個(gè)跟著頁(yè)面走的圖像
這一效果是通過(guò)
JavaScript實(shí)現(xiàn)的。一般來(lái)說(shuō)完成這樣一個(gè)效果需要一定的編程能力,但現(xiàn)在我們可以通過(guò)
Dreamweaver的插件輕易地實(shí)現(xiàn)。你可以到
http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip下載這個(gè)插件。插件的安裝方法:解壓縮后拷貝到
Dreamweaver下的文件夾
Configuration\Objects內(nèi)的一個(gè)新建文件夾里面即可。重新啟動(dòng)
Dreamweaver之后,我們就可以在對(duì)象面板之中找到新安裝的插件了。點(diǎn)擊插件的圖標(biāo),在彈出的對(duì)話框中填入圖像的存放地址以及圖像的顯示位置就可以了。
26. 制作鼠標(biāo)移上去后有變化的動(dòng)態(tài)菜單
所謂動(dòng)態(tài)菜單其實(shí)是兩幅圖,一幅是鼠標(biāo)不放在上面所顯示的,另一副是鼠標(biāo)移上去所顯示的。我們可以利用
Dreamweaver提供的行為之中的
swap image來(lái)實(shí)現(xiàn)這個(gè)效果。首先插入一副圖片,用鼠標(biāo)單擊它,在屬性面版的連接欄內(nèi)輸入要連接的網(wǎng)頁(yè)。然后打開(kāi)行為面板添,點(diǎn)擊
“+”號(hào),選擇
swap image。接著出現(xiàn)一個(gè)窗口,要你選擇鼠標(biāo)移上去后所顯示的圖片,在此選擇第二副圖片,點(diǎn)擊
“確定
”。好了,效果完成了,多簡(jiǎn)單。
27. 用
Dreamweaver制作出一個(gè)類(lèi)似于下拉菜單的效果
制作一個(gè)類(lèi)似于下拉菜單的效果需要用到層的隱藏和顯示特性。具體的方法是:在頁(yè)面中插入一個(gè)單行多列的表格,作為你的菜單條。表格的列數(shù)由菜單選項(xiàng)的多少?zèng)Q定。插入一個(gè)層,在層中輸入第一個(gè)下拉菜單的內(nèi)容,并把這個(gè)層移動(dòng)到表格第一列的下面。同理,對(duì)其他菜單項(xiàng)也作如上的操作,插入相應(yīng)的層。把所有層的顯示屬性
(vis)改為隱藏(
Hidden)。
選擇表格的第一個(gè)單元,單擊窗口(
Windows)
→行為(
Behaviors),彈出行為面板。按下
“+”添加行為
Show-Hide layers,并將第一個(gè)層(
Layer1)屬性改為顯示
(Show),其他層的屬性改為隱藏
(Hide)。接著在行為面板中編輯這個(gè)行為,將它的觸發(fā)事件
(events)改為
onMouseover。這樣,當(dāng)鼠標(biāo)移動(dòng)到第一個(gè)表格單元之上時(shí),第一個(gè)下拉菜單就會(huì)顯示出來(lái)。接著再添加一個(gè)行為
Show-Hide layers,并將所有層的屬性改為隱藏。接著在行為面板中編輯這個(gè)行為,將它的觸發(fā)事件
(events)改為
onMouseout。這樣當(dāng)鼠標(biāo)從第一個(gè)表格單元之上移開(kāi)時(shí),第一個(gè)下拉菜單就會(huì)隱藏起來(lái)。對(duì)其他的菜單項(xiàng)重復(fù)上述操作。但要注意設(shè)置
“菜單二
”時(shí),第二層顯示,其他層隱藏;設(shè)置
“菜單三
”時(shí),第三層顯示,其他層隱藏;依此類(lèi)推下去。好了,做好了,按
F12看看吧。
28. 輕松制作下載文件
用
Dreamweaver其實(shí)很簡(jiǎn)單,把要讓瀏覽者下載的文件名寫(xiě)上,然后拖動(dòng)鼠標(biāo)選取這段文字,在文本的屬性面板上
“Link”的屬性輸入框中寫(xiě)上文件名就行了。注意:若被下載的文件與該網(wǎng)頁(yè)不在同一目錄下,則文件名必須包含相對(duì)路徑,否則在下載時(shí)將提示找不到文件。
29. 利用
Dreamweaver的書(shū)簽制作跳轉(zhuǎn)鏈接
利用
Dreamweaver的書(shū)簽我們可以實(shí)現(xiàn)這個(gè)功能。具體方法是:將光標(biāo)移到你想跳轉(zhuǎn)到的地方,選擇菜單中的
“插入(
Insert)
→書(shū)簽(
Name Anchor)
”,輸入書(shū)簽的名稱。接下來(lái),在你想調(diào)用鏈接的鏈接目標(biāo)框中填入
“#書(shū)簽名稱
”,這樣一個(gè)頁(yè)面內(nèi)的跳轉(zhuǎn)鏈接就做好了。在這里,如果我們?cè)跁?shū)簽名稱前填入網(wǎng)頁(yè)的名稱,就會(huì)跳轉(zhuǎn)到其他頁(yè)面中的書(shū)簽處。
比如說(shuō)我們?cè)?FONT face="Times New Roman">Link處填入
“index.htm#top”,當(dāng)瀏覽者點(diǎn)擊這個(gè)鏈接時(shí)就會(huì)跳轉(zhuǎn)到
index頁(yè)面中的
top書(shū)簽處。
30. 去掉圖片和表格接觸地方的空隙
要使圖片和表格接觸的地方不留空隙,僅在表格屬性面板上把外框線(
border)設(shè)為
0是不行的,還需要在表格的屬性面板上把單元格的兩個(gè)屬性設(shè)為
0(即
cellspacing="0"和
cellpadding="0")。
31. 用
TracingImage幫助定位網(wǎng)頁(yè)中各元素的位置
TracingImage是
Dreamweaver一個(gè)非常有效的功能,它允許用戶在網(wǎng)頁(yè)中將原來(lái)的圖案設(shè)計(jì)作為輔助的背景。這么一來(lái),用戶就可以非常方便地定位文字、圖像、表格、層等網(wǎng)頁(yè)元素在該頁(yè)面中的位置了。
TracingImage的具體使用是這樣的:首先使用各種繪圖軟件作出一個(gè)想象中的網(wǎng)頁(yè)排版格局圖,然后將此圖保存為網(wǎng)絡(luò)圖像格式(包括
gif、
jpg、
jpeg和
png)。用
Dreamweaver打開(kāi)你所編輯的網(wǎng)頁(yè),在頁(yè)面的空白區(qū)單擊右鍵,選擇
“Page Properties...”,然后在彈出的對(duì)話框中的
Tracing Image項(xiàng)中輸入剛才創(chuàng)建的網(wǎng)頁(yè)排版格局圖所在位置。再在
Image Transparen中設(shè)定
TracingImage的透明度,
OK。這樣你就可以在當(dāng)前網(wǎng)頁(yè)中方便地定位各個(gè)網(wǎng)頁(yè)元素的位置了。使用了
TracingImage的網(wǎng)頁(yè)在用
Dreamweaver編輯時(shí)不會(huì)再顯示背景圖案,但當(dāng)使用瀏覽器瀏覽時(shí)正好相反,
TracingImage不見(jiàn)了,所見(jiàn)的就是經(jīng)過(guò)編輯的網(wǎng)頁(yè)(當(dāng)然能夠顯示背景圖案)。
32. 關(guān)于
“Convert Table widths to Pixels”和
“Convert Table widths to Percent”
“Convert Table widths to Pixels”和
“Convert Table widths to Percent”是
Dreamweaver兩個(gè)設(shè)置表格寬度的重要功能。當(dāng)你打開(kāi)一個(gè)帶有表格的網(wǎng)頁(yè)時(shí),在狀態(tài)欄中點(diǎn)中〈
table〉標(biāo)簽,在隨后顯示出的表格屬性工具面板中就能看到這兩個(gè)按鈕了。顧名思義
“Convert Table widths to Pixels”就是將表格中所有單元的寬度以像素表示,而
“Convert Table widths to Percent”是將表格中所有單元的寬度以百分比表示。仔細(xì)想想他們的作用,如果將一個(gè)表格的寬度全以像素表示,但瀏覽窗口被放大時(shí),表格就不會(huì)隨之放大單元格的寬度。而使用了
“Convert Table widths to Percent”后能夠使你在
640×480分辨率下建立的
100%寬的表格在更高的分辨率下依舊保持
100%的寬度。所以活用這兩個(gè)功能可以使網(wǎng)頁(yè)排版事半功倍。
33. 調(diào)用
Style而不致使網(wǎng)頁(yè)原代碼混亂不堪
調(diào)用
Style的方法很多,你可以單擊右鍵選擇
Custon Style來(lái)調(diào)用
Style規(guī)范,也可以在狀態(tài)欄中的元素列表上單擊右鍵來(lái)調(diào)用
Style。雖然不同的方法達(dá)到的效果看似一樣,但實(shí)際上產(chǎn)生的
HTML代碼則完全不同。比如用
Custon Style來(lái)調(diào)用
Style規(guī)范,在網(wǎng)頁(yè)代碼中就生成一個(gè)〈
span〉標(biāo)簽,這樣標(biāo)簽一多就會(huì)使文件十分臃腫而且影響瀏覽器的解析速度,所以我建議盡量使用狀態(tài)欄中的元素列表來(lái)調(diào)用
Style。還有一個(gè)小技巧,如果你要使用一個(gè)
Style定義某表格單元中的所有文字,只要在〈
td〉標(biāo)簽中調(diào)用
Style就行了,而不需要在一個(gè)個(gè)定義〈
p〉標(biāo)簽。注意這個(gè)方法不適用于〈
table〉標(biāo)簽,因?yàn)樵凇?FONT face="Times New Roman">table〉標(biāo)簽中用
Style定義的文字格式會(huì)被
Netscape忽略。
34. 使用定制窗口功能測(cè)試網(wǎng)頁(yè)在不同分辨率下的效果
誰(shuí)都不希望看見(jiàn)自己辛辛苦苦做的網(wǎng)頁(yè)在不同的分辨率下面目全非,所以測(cè)試網(wǎng)頁(yè)在不同分辨率下的瀏覽效果是網(wǎng)頁(yè)制作中很重要的一步。我們可以在
Dreamweaver的操作界面中的狀態(tài)欄中間,選擇需要的分辨率來(lái)調(diào)節(jié)窗口大小,從而實(shí)現(xiàn)在不同分辨率下測(cè)試網(wǎng)頁(yè)效果。
35. 上傳網(wǎng)站時(shí)無(wú)需使用第三方
FTP軟件
Dreamweaver中融入了
FTP功能,而且為網(wǎng)站上傳作了優(yōu)化。我們可以做一個(gè)簡(jiǎn)單的比較,當(dāng)你使用一般的
FTP軟件上傳網(wǎng)站時(shí),是不是都按本地機(jī)上的網(wǎng)站目錄在服務(wù)器中新建目錄,然后再一個(gè)個(gè)文件上傳。這種做法實(shí)在沒(méi)錯(cuò),但由于本地機(jī)中的網(wǎng)站目錄中并不是每個(gè)文件都被網(wǎng)頁(yè)調(diào)用(比如在建網(wǎng)頁(yè)時(shí)留下的備份文件),所以篩選文件的繁重工作量只有用戶自己知道。但使用
Dreamweaver上傳網(wǎng)頁(yè)就可以方便得多,由于
FTP功能在幕后為用戶進(jìn)行了許多必要的工作,所以用戶只要將網(wǎng)站地圖內(nèi)相關(guān)的
HTML文件上傳,
Dreamweaver就會(huì)自動(dòng)將與此
HTML文件相關(guān)的所有其他本地文件一并上傳(如圖像、
ZIP文件、
FLASH文件甚至是各種
REAL文件)。使用
Dreamweaver內(nèi)帶的
FTP功能的具體做法是:編輯已經(jīng)定義過(guò)的
SITE,在
“Site Definition for...”面板中選擇
“Web Server Info”。如果網(wǎng)頁(yè)是通過(guò)
FTP方式上傳的話,將
“Server Access”設(shè)為
FTP,在
FTP Host中添入
FTP服務(wù)器的地址,在
Host Directory中添入遠(yuǎn)程登入目錄,在
Login中添入用戶名,再填好
Password。經(jīng)過(guò)了以上的設(shè)定,就可以在
Site面板中按
Connect按鈕,當(dāng)
Dreamweaver成功連入服務(wù)器后,
Connect按鈕會(huì)自動(dòng)變?yōu)?FONT face="Times New Roman">Disconnect,并且在一旁亮起一個(gè)小綠燈。接著要做的事就是在要上傳的
HTML文件上單擊右鍵,選擇
“Put”即可。當(dāng)此
HTML文件上傳成功后,狀態(tài)條中將顯示
Put Depanding File,說(shuō)明
Dreamweaver正在上傳這個(gè)
HTML文件所調(diào)用的其他本地文件。不僅如此,
Dreamweaver還可以直接下載服務(wù)器上的文件進(jìn)行修改,方法么,只要使試試
Put旁的
Get按鈕就明白了。
36. 實(shí)現(xiàn)用鼠標(biāo)指向鏈接時(shí)出現(xiàn)下劃線的效果
有些網(wǎng)頁(yè)的鏈接,原先沒(méi)有下劃線,你把鼠標(biāo)指向鏈接處,才會(huì)出現(xiàn)下劃線,鼠標(biāo)移掉下劃線就又沒(méi)有了。這種效果其實(shí)可以用層疊樣式表(
CSS)來(lái)實(shí)現(xiàn),在
Dreamweaver中編輯層疊樣式表不用編寫(xiě)代碼,具體操作方法如下:
(
1)在快速啟動(dòng)欄中點(diǎn)擊層疊樣式表按鈕(就是把鼠標(biāo)放上去顯示
“show css styles”的那個(gè)按鈕),在彈出的
CSS Styles面板上雙擊(
none);
?。?FONT face="Times New Roman">2)此時(shí),可看到彈出的
Edit Style Sheet 面板,在該面板上按
New按鈕;
(
3)再在彈出的
New Style 面板上點(diǎn)取
Redefine HTML Tag(重新定義
HTML標(biāo)記)再在
Tag中選擇
“a”(超級(jí)鏈接標(biāo)記)標(biāo)記后按
OK按鈕;(
4)這時(shí)可看到彈出的
Style dehinition for a 的對(duì)話框,在此對(duì)話框中可以設(shè)置超級(jí)鏈接的許多屬性,你可以按你的意愿設(shè)置,但我們這里主要是要去掉那討厭的下劃線,所以我們?cè)?FONT face="Times New Roman">decoration 屬性中選擇
“none”,這樣就把下劃線去掉了;然后我們?cè)龠x擇顏色為:
#339966。按OK按鈕返回到
Edit Style Sheet 面板;
?。?FONT face="Times New Roman">5)在
Edit Style Sheet 面板上再按
New按鈕;
?。?FONT face="Times New Roman">6)在彈出的
New Style 面板上點(diǎn)取
Use CSS Selector ,再在該面板上的
selector選擇框中選擇
“a:hover”(定義當(dāng)鼠標(biāo)在超級(jí)鏈接上時(shí)鏈接的屬性),按
OK按鈕;
?。?FONT face="Times New Roman">7)在彈出的
Style dehinition for a:hover 的對(duì)話框中,我們?cè)?FONT face="Times New Roman">decoration 屬性中選擇
“underline”,這樣就把下劃線又加上了;然后我們?cè)龠x擇顏色為:
#FF3300。按
OK按鈕返回到
Edit Style Sheet 面板;
?。?FONT face="Times New Roman">8)在
Edit Style Sheet 面板上再按
Don按鈕,至此所有設(shè)置結(jié)束。