dreamweaver45個(gè)經(jīng)典技巧-資料下載頁(yè)
2025-04-16 12:29本頁(yè)面
【正文】 的翻轉(zhuǎn)圖片？ 在許多網(wǎng)頁(yè)中，我們經(jīng)常會(huì)看到一些欄目標(biāo)題，當(dāng)鼠標(biāo)滑過(guò)時(shí)，能變成另外的樣子。其實(shí)它們中很多是通過(guò)兩張不同的圖片來(lái)實(shí)現(xiàn)的，也就是所謂的“翻轉(zhuǎn)圖片”效果。 當(dāng)然首先你要提前準(zhǔn)備兩張大小完全一樣的圖片，以確保翻轉(zhuǎn)時(shí)不會(huì)有什么視覺(jué)上的不適，單擊“Object”面板上的“Rollover Image” 彈出“翻轉(zhuǎn)圖片設(shè)置”窗口，分別單擊“Browse”按ト范ā癘riginal image”和“Rollover image”的地址，注意一定要選中下面的“Preload Rollover image”復(fù)選框，否則在鼠標(biāo)滑過(guò)的瞬間，會(huì)產(chǎn)生一定的下載延遲而影響效果。 38如何制作“漫天飛舞”的圖片？ 在許多大型商業(yè)網(wǎng)站的首頁(yè)中，你經(jīng)常會(huì)看到不少來(lái)回飄來(lái)飄去的廣告圖片，點(diǎn)擊后可以鏈接到指定的地址，在DW中這點(diǎn)是通過(guò)Timelines來(lái)實(shí)現(xiàn)的。 首先在網(wǎng)頁(yè)中插入目標(biāo)圖片，同時(shí)選中它，單擊快速啟動(dòng)板中的“Timelins”按鈕進(jìn)入“時(shí)間線”窗口，在時(shí)間軸1frame的位置鼠標(biāo)右擊，選擇 “Add Object”,這時(shí)時(shí)間軸上會(huì)出現(xiàn)一蘭色色條（默認(rèn)115frame），將鏡頭停在15frame處，同時(shí)移動(dòng)頁(yè)面內(nèi)圖片到運(yùn)動(dòng)的終點(diǎn)位置。 現(xiàn)在一個(gè)簡(jiǎn)單的運(yùn)動(dòng)動(dòng)畫(huà)已經(jīng)完成了，你可以通過(guò)在中間添加keyframe的方法調(diào)整路徑的曲折度。單擊上方的右箭頭按鈕預(yù)覽效果。 39怎樣制作在頁(yè)面中“靜態(tài)懸浮”的圖片？ 所謂的“靜態(tài)懸浮”也就是圖片總是試圖停留在網(wǎng)頁(yè)中的某個(gè)位置，因此在視覺(jué)上有種跟著頁(yè)面“走”的感覺(jué)，象懸浮著一樣。 該效果的實(shí)現(xiàn)是通過(guò)javascript來(lái)完成的，一般要求有一定的編程能力。好在DW提供了制作該效果的固定插件，因此就顯得簡(jiǎn)單多了。 首先你必須先下載stav插件,將里面的兩個(gè)文件(其中包括圖片文件Cross Browser Static Browser Static )都拷貝到DW安裝目錄Configuration\Objects\Common下。 重新啟動(dòng)DW,在Object(對(duì)象)面板中,你會(huì)看到最底部已經(jīng)多了SI項(xiàng),選中它在彈出的窗口中設(shè)定浮動(dòng)層到上邊和左邊的距離,然后在圖層中插入指定的內(nèi)容（這里為圖片）即可。 40如何使文字和圖片內(nèi)容共處？ 我們都知道，在DW中，圖片對(duì)象往往是獨(dú)占一行的，那么文字內(nèi)容只能在與其平行的一行的位置上，怎么樣才可以讓文字圍繞著圖片顯示呢？ 選中圖片，在屬性面板的右上方你能看到一個(gè)“Align”的屬性選單，選擇“Left”，這時(shí)你會(huì)發(fā)現(xiàn)文字已經(jīng)均勻的排列在圖片的右邊了。 41實(shí)現(xiàn)多個(gè)窗口的連接? 面板設(shè)計(jì)一直是DW的一大特色，到了DW4版本，所用到的面板已經(jīng)相當(dāng)多了，那么我們?nèi)绾尾拍芨咝У睦盟兀?“窗口連接”就是一種方便大家自定義的技術(shù)功能，簡(jiǎn)單的說(shuō)，就是可以根據(jù)需要將兩個(gè)或更多個(gè)面板放到一個(gè)窗口中來(lái)。鼠標(biāo)點(diǎn)擊拖動(dòng)一個(gè)面板的Tab欄到兩一個(gè)面板上，當(dāng)你看到一個(gè)黑色邊框時(shí)，松開(kāi)鼠標(biāo)，這時(shí)兩個(gè)面板已經(jīng)合二為一了。 42如何制作一條寬度為1的細(xì)線？ 在DW中，盡管水平線是以“Line”形式出現(xiàn)的，但在制作細(xì)線時(shí)，它表現(xiàn)的并不盡如人意，主要是過(guò)粗，沒(méi)有需要的細(xì)膩感！ 那么我們可以采取變通的方法以表格的應(yīng)用來(lái)實(shí)現(xiàn)。 在網(wǎng)頁(yè)中插入一個(gè)1行1列的表格，將表格的“cellpadding”“cellspacing”都設(shè)置為“0”，同時(shí)將單元格的“bgcolor”設(shè)定為紅色，當(dāng)然你也可以使用其他的顏色來(lái)代替，“Height”設(shè)定高度為1。 還有最關(guān)鍵的一步，查看源代碼，將 td /td中的“ ”去掉即可。 43如何制作一個(gè)邊框?yàn)?的方格？ 很明顯，我們現(xiàn)在還是要通過(guò)表格的設(shè)置來(lái)完成。 或許你會(huì)說(shuō)，這還不簡(jiǎn)單嘛！建立一個(gè)1行1列的表格，然后將它的“Border”值設(shè)為1不就可以了。實(shí)際上，用這種方法制作的表格根本不是所說(shuō)的邊框?yàn)?的方格，而是要“粗”的多！ 同樣先插入一個(gè)1行1列的表格，將表格的“border”、“cellpadding”設(shè)置為“0”，“cellspacing”設(shè)置為“1”。設(shè)定表格的“bgcolor”為紅色（即為邊框的顏色），同時(shí)設(shè)定單元格的“bgcolor”為白色（即同背景色），OK了。 44怎樣設(shè)置根據(jù)不同的瀏覽器，返回不同的頁(yè)面？ 瀏覽器不同，它所支持的技術(shù)和效果也不同。因而我們所設(shè)計(jì)的網(wǎng)頁(yè)并不是在所有的瀏覽器中都能正常顯示或最佳顯示。這時(shí)一個(gè)判斷瀏覽器的跳轉(zhuǎn)就很必要了。 當(dāng)用戶(hù)用不同類(lèi)型或版本的瀏覽器打開(kāi)時(shí)，可以返回不同的頁(yè)面，以保證用戶(hù)的正常瀏覽。 單擊快速啟動(dòng)板中的“Behavior”按鈕，點(diǎn)“+”號(hào)，在下拉列表中選擇“Check Browse”。 45網(wǎng)頁(yè)中可以隨便拖動(dòng)的對(duì)象是怎么建立的？ 訪問(wèn)網(wǎng)站時(shí)，經(jīng)常能見(jiàn)到不少可以用鼠標(biāo)拖動(dòng)的元素，其中以圖片居多，比如，一張廣告圖片擋住了你想瀏覽的內(nèi)容，你完全可以用鼠標(biāo)選中把它扔到一邊去！ 制作這種效果是通過(guò)圖層的“Drag Layer”行為實(shí)現(xiàn)的，單擊Behavior面板中“+”號(hào)，選擇“Drag Layer”，當(dāng)然之前你必要保證目標(biāo)圖層處于選中狀態(tài)，進(jìn)行簡(jiǎn)單設(shè)置后就OK了16 / 16
教學(xué)教案相關(guān)推薦
鄂ICP備17016276號(hào)-1