在Dreamweaver中插入有顏色的直線_Dreamweaver教程
在dreamweaver中,假如插入 Horizontal Rule (水平線),默認(rèn)情況下這根線只是灰色,在很多情況下,這并不符合我們的要求。假如想要插入其他顏色的直線(甚至細(xì)到一個(gè)像素),該怎么辦呢?
首先,在document window(網(wǎng)頁(yè)編輯窗口)中的適當(dāng)位置,插入Horizontal Rule,
按ctrl F3 調(diào)出 Property inspector(屬性面板),

在這個(gè)屬性面板中,把shading(陰影)前的勾去掉。在W中輸入像素值(pixels)或者百分比,可以設(shè)置這條線的長(zhǎng)度。在H中,輸入1,都可以使這根線變得很細(xì),細(xì)到一個(gè)像素。假如想要的是粗線,可以在H中,輸入更大的值。這樣細(xì)線就插好了,但你會(huì)發(fā)現(xiàn),這根線是灰色的,在屬性面板中,并不可以設(shè)置顏色。假如想要設(shè)置其他顏色,可以通過(guò)css來(lái)控制。在DreamWeaver中可以非常輕易地設(shè)置css,你甚至完全不需要了解css的語(yǔ)法。
選擇Text菜單下的CSS style | New Style ,

在“New Style (新樣式)”對(duì)話框中,在name(名稱)欄中輸入一個(gè)名稱,如"colorline",并在Define(定義)單選框中選擇“This document only(只用于此頁(yè))”,然后點(diǎn)ok。隨后會(huì)彈出的Style definition for .colorline對(duì)話框:

在type項(xiàng)目中,選擇想要的顏色,比如說(shuō)紅色,然后點(diǎn)ok,再點(diǎn)done,于是一個(gè)新的樣式就建好了。選定網(wǎng)頁(yè)編輯窗口中的細(xì)線,點(diǎn) Text | CSS style | colorline(colorline就是剛才建立的那個(gè)新樣式),在網(wǎng)頁(yè)編輯窗口中,線的顏色依然還是灰色,但按F12預(yù)覽,在瀏覽器中就可以看到所插入細(xì)線的顏色已經(jīng)變成了你想要的紅色。
還有一種辦法可以插入有顏色的細(xì)線,甚至細(xì)到一個(gè)像素.首先在網(wǎng)頁(yè)編輯窗口中插入一個(gè)一行一列的表格,然后在這個(gè)表格中插入一個(gè)1pixel × 1Pixel的透明圖像(在dreameaver4中控制頁(yè)面布局所使用的spacer image正是這樣的圖像,所以假如你不會(huì)用軟件制作這樣的圖像,可在dreameaver4中如此生成:

Object面板 首先點(diǎn)選Objiect面板的View 中的layout view(布局視圖),再點(diǎn)draw layout table,在網(wǎng)頁(yè)編輯窗口中拖動(dòng)生成一個(gè)布局表格(layout table),點(diǎn)表格頭的下拉菜單中的Add spacer image,

創(chuàng)建并保存spacer image,這個(gè)spaceer image 就是一個(gè)1像素× 1像素的透明圖像)。然后在表格的屬性中設(shè)置為:H(高度)為1 pixel(1像素),W(寬度)為想要的寬度(可輸入像素值或者百分比),cellpad、 cellspace、border中都輸入0,然后在Bg Color(背景顏色)中選擇想要的顏色,帶顏色的水平細(xì)線就這樣被插入了。

假如把H值增大,那么這條線會(huì)變粗。假如要插入帶顏色的垂直細(xì)線,則把H設(shè)置為想要的高度值,W設(shè)置為0,其他設(shè)置同上,即可插入垂直細(xì)線。在網(wǎng)頁(yè)編輯窗口中,這的顏色仍是灰色的,但按F12預(yù)覽,在瀏覽器中就可以看到所插入的細(xì)線的顏色已經(jīng)變成了你想要的顏色。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫(xiě)CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫(xiě)CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver中CSS樣式表的應(yīng)用實(shí)例
- Dreamweaver MX進(jìn)階教程(一)可視化操作iframe
- 用Dreamweaver精細(xì)化網(wǎng)頁(yè)中表格的外觀
- 如何像表格table一樣對(duì)層div進(jìn)行輕松布局
- 數(shù)據(jù)庫(kù)的設(shè)計(jì)和連接-Dreamweaver構(gòu)建Blog
- 使用Dreamweaver來(lái)詳細(xì)了解CSS的多樣性
- Dreamweaver開(kāi)發(fā)ASP實(shí)例視頻教程修改數(shù)據(jù)庫(kù)記錄
- 用DW制作網(wǎng)頁(yè)時(shí)關(guān)于文字自動(dòng)換行的小技巧
- Dreamweaver中層的應(yīng)用技巧
- 去除DW MX 2004表格寬度輔助
- 相關(guān)鏈接:
- 教程說(shuō)明:
Dreamweaver教程-在Dreamweaver中插入有顏色的直線
。