如何使用Dreamweaver方便快捷編輯網(wǎng)頁(yè)標(biāo)簽_Dreamweaver教程
不知各位是否有手寫(xiě)代碼的習(xí)慣。例如:要在一個(gè)單元格插入一段CSS代碼,或者一段Javascript代碼,怎么做才比較快捷方便呢?
雖然Dreamweaver已經(jīng)為我們提供了代碼視圖,可是必竟還要手工去查找,還要往返地切換。雖然也可以用代碼視圖與編輯視圖并存的方式,但還要占用一半的屏幕空間,使本來(lái)便不大的編輯區(qū)域更顯得擁擠。有沒(méi)有更好的辦法呢?答案是肯定的。
下面我們以Dreamweaver 8為例,假設(shè)大家Dreamweaver面板布局都為默認(rèn)的布局方式。查看一下屬性面板的上方是否有一行小標(biāo)簽。(假如您用的不是MX,標(biāo)簽在狀態(tài)欄中)例如:你新建一個(gè)空白的HTML文檔,上面的小標(biāo)簽應(yīng)該為<body>。請(qǐng)看下圖:

圖上畫(huà)紅框的地方,就是我們今天的主角了。我們先看一下“環(huán)繞標(biāo)簽”。在頁(yè)面上隨便打入幾個(gè)字,選中它們,在右鍵菜單中選擇“環(huán)繞標(biāo)簽”,在彈出的環(huán)繞標(biāo)簽對(duì)話框中輸入“<strong>”(不包括引號(hào)),然后回車(chē)。之前被選中的文字是不是已經(jīng)變成粗體了,到源代碼看一下,我們所選中的文字是不是已經(jīng)被<strong>標(biāo)簽包圍了?大家可以試著再加入其它的一些標(biāo)簽,如:<a>,<p>。這里也可以直接輸入屬性。如:<p style="color:#CC0000">。這里僅大概說(shuō)明一下,如有疑問(wèn),請(qǐng)查看Dreamweaver的幫助。
下面說(shuō)一下標(biāo)簽選擇器的應(yīng)用方法。
我們將光標(biāo)移動(dòng)到剛才加粗的文字里,會(huì)發(fā)現(xiàn)在<body>的后面多了個(gè)<strong>。這就是說(shuō)光標(biāo)所在處的這些文字的外面有<strong>的標(biāo)簽,在<strong>標(biāo)簽外有<body>標(biāo)簽。下面大家再添加一個(gè)表格,把光標(biāo)移動(dòng)到表格內(nèi),看看標(biāo)簽的結(jié)構(gòu)。相信對(duì)HTML有些基礎(chǔ)的朋友都應(yīng)該很輕易理解的。
假設(shè)我們現(xiàn)在要插入一個(gè)表格,并將這個(gè)表格用CSS來(lái)將它下移10個(gè)象素。先插入一個(gè)表格,然后交光標(biāo)移動(dòng)到表格內(nèi)。這時(shí)在標(biāo)簽選擇器上應(yīng)該可以看到這樣的字樣<body><table><tr><td>。然后在table標(biāo)簽上點(diǎn)鼠標(biāo)右鍵,會(huì)看到有四個(gè)選項(xiàng)。刪除標(biāo)簽、編輯標(biāo)簽、設(shè)置類(lèi)、設(shè)置ID。
刪除標(biāo)簽:即是將標(biāo)簽刪除。(有一些非凡的標(biāo)簽是不能刪除的。例如:<table>、<tr>、<td>、<body>...)
編輯標(biāo)簽:給標(biāo)簽附加屬性、修改屬性等。
設(shè)置類(lèi):給這個(gè)標(biāo)簽附予一個(gè)類(lèi)。(即CSS的類(lèi)別)
設(shè)置ID:給這個(gè)標(biāo)簽附予一個(gè)ID。(即CSS的ID)
在這里,我們選擇編輯標(biāo)簽,然后在后面加上屬性style="margin-top:10px"和正常書(shū)寫(xiě)源代碼的方式是一樣的。然后按下回車(chē)。就完成了編輯。假如在Dreamweaver里看不到效果,請(qǐng)用瀏覽器預(yù)覽。
還有另外一種方法,也許你會(huì)喜歡。選擇窗口→標(biāo)簽檢查器當(dāng)你選擇某一個(gè)標(biāo)簽后,這里會(huì)顯示出當(dāng)前選擇標(biāo)簽的所有屬性。也可以很快地在這里進(jìn)行編輯。在這里輸入的屬性不用包括引號(hào),編輯后按回車(chē)確定。
這里我們只將方法告訴大家,希望大家能夠從中受益。
- 用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中編寫(xiě)CSS需要掌握的技巧
- 詳解用Dreamweaver制作網(wǎng)頁(yè)中的表格
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- Dreamweaver MX 2004的PPT格式課件
- 用Dreamweaver實(shí)現(xiàn)ASP動(dòng)態(tài)網(wǎng)站建設(shè)
- 站點(diǎn)統(tǒng)計(jì)-Dreamweaver構(gòu)建Blog
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 充分利用Dreamweaver CS3的代碼片斷功能面板
- 細(xì)品DW MX 2004表格設(shè)計(jì)
- Dreamweaver8創(chuàng)建自定義代碼片段的方法
猜你也喜歡看這些
- Dreamweaver 8 大師系列教程- 高級(jí)篇
- java實(shí)例教程在線支付系統(tǒng)制作
- Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作完全手冊(cè)
- 呂聰賢dreamweaver教程
- div css視頻教程
- 精通JavaScript+jQuery視頻教程
- DreamweaverMX2004互動(dòng)網(wǎng)站百寶箱for PHP
- 呂聰賢網(wǎng)頁(yè)三劍客視頻教程FlashMX,DreamweaverMX,F(xiàn)i
- Dreamweaver 8+ASP構(gòu)造動(dòng)態(tài)網(wǎng)站實(shí)例與操作
- 美工之路系列視頻
- 相關(guān)鏈接:
- 教程說(shuō)明:
Dreamweaver教程-如何使用Dreamweaver方便快捷編輯網(wǎng)頁(yè)標(biāo)簽
。