細(xì)品DW MX 2004表格設(shè)計(jì)_Dreamweaver教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
Dreamweaver MX 2004的強(qiáng)大功能以及更加完善的人性化設(shè)置已經(jīng)深受大家喜愛。在此筆者就談?wù)勗撥浖掳姹局械谋砀裨O(shè)計(jì)。
表格在網(wǎng)頁中的重要性不言而喻:網(wǎng)頁的框架、結(jié)構(gòu)都要通過合理的表格布局來完成和實(shí)現(xiàn)。
在Dreamweaver MX2004中(以下簡稱DW MX 2004),插入表格的界面和以前的對話框已經(jīng)起了很大的變化(圖1)。

其中的Table Size雖然變化不大,但是下邊新增加的功能著實(shí)方便了不少:例如新增加的表格標(biāo)題、布局功能以及附加信息顯示功能。
在Header中,假如選擇第一項(xiàng)None則與一般表格沒任何區(qū)別,選擇第二個(gè)Left呢?圖2是選擇Left后創(chuàng)建的表格。

其中的“表格”二字就是“Accessibility”中“Caption”處填入的表格標(biāo)題來看看代碼:
<table width=″50%″ border=″0″ cellspacing=″0″ cellpadding=″0″ summary=″新表格功能演示!″>
<caption>
表格
</caption>
<tr>
<th scope=″row″> </th>
</tr>
</table>
看出不同了吧,原來<td>的標(biāo)簽處變成了<th scope=″row″>,而且為表格寫入的摘要“新表格功能演示”也出現(xiàn)在表格的屬性當(dāng)中,在這個(gè)表格里輸入的文字都將會以默認(rèn)的居中粗體顯示出來(圖3)。

這樣對于要求標(biāo)題以默認(rèn)粗體顯示的表格,省去了每次手工執(zhí)行“加粗→居中”的步驟,提高了工作效率。以之相似,我們也可以自己定義表格的其他格式和風(fēng)格而無須借助于編寫復(fù)雜的CSS風(fēng)格表代碼的方法,非常方便。
新的表格輔助寬度顯示功能也很人性化。以前的Dreamweaver版本表格的寬度沒有一個(gè)直觀的表達(dá),在做圖以及布局時(shí)不能很好地把握。而現(xiàn)在當(dāng)你把鼠標(biāo)移到表格上時(shí),首先會發(fā)現(xiàn)有一個(gè)紅色的框(圖4)。

此時(shí)表明你已經(jīng)選定了一個(gè)表格,但這種選定只是DW MX 2004將你的鼠標(biāo)與表格進(jìn)行了綁定,而非“選定”,點(diǎn)鼠標(biāo)左鍵后才選中表格。老版本里常因?yàn)楸砀裉嗖荒軠?zhǔn)確選中,現(xiàn)在有了紅色框的幫助就方便多了!
當(dāng)選中表格后,輔助寬度顯示將自動(dòng)出現(xiàn)在表格的下方,顯示出當(dāng)前表格的寬度并以百分比和像素兩種數(shù)值顯示(圖5)。

點(diǎn)擊綠色倒置的小三角,在出現(xiàn)的下拉列表框中可以選中整個(gè)表格、清除所有的定義行高、清除所有的定義行寬以及設(shè)置所有寬度一致、隱藏輔助寬度顯示等功能,這些都是經(jīng)常用到的重要功能,過去需要自己手工調(diào)整,現(xiàn)在則整合在一個(gè)菜單里了。
如今在DW MX 2004中已經(jīng)可以很方便地對表格進(jìn)行拖放操作,而且假如你對表格分列,它會將該列的寬度顯示出來,這樣做一個(gè)和表格寬度相同的圖片就可以從這里直接取圖片尺寸值了,不用擔(dān)心做出來的圖片尺寸問題了!
最后介紹一下表格中的插入行和列的功能,在老版本中我們插入時(shí)行只能插入到當(dāng)前光標(biāo)行的上方,列則是插入到光標(biāo)列的左側(cè)�,F(xiàn)在DW MX 2004可要靈活多了,可以將行插于下方,也可以將列插入到光標(biāo)列的右側(cè),且只須進(jìn)行相關(guān)菜單操作即可(圖6)。
表格在網(wǎng)頁中的重要性不言而喻:網(wǎng)頁的框架、結(jié)構(gòu)都要通過合理的表格布局來完成和實(shí)現(xiàn)。
在Dreamweaver MX2004中(以下簡稱DW MX 2004),插入表格的界面和以前的對話框已經(jīng)起了很大的變化(圖1)。

其中的Table Size雖然變化不大,但是下邊新增加的功能著實(shí)方便了不少:例如新增加的表格標(biāo)題、布局功能以及附加信息顯示功能。
在Header中,假如選擇第一項(xiàng)None則與一般表格沒任何區(qū)別,選擇第二個(gè)Left呢?圖2是選擇Left后創(chuàng)建的表格。

其中的“表格”二字就是“Accessibility”中“Caption”處填入的表格標(biāo)題來看看代碼:
<table width=″50%″ border=″0″ cellspacing=″0″ cellpadding=″0″ summary=″新表格功能演示!″>
<caption>
表格
</caption>
<tr>
<th scope=″row″> </th>
</tr>
</table>
看出不同了吧,原來<td>的標(biāo)簽處變成了<th scope=″row″>,而且為表格寫入的摘要“新表格功能演示”也出現(xiàn)在表格的屬性當(dāng)中,在這個(gè)表格里輸入的文字都將會以默認(rèn)的居中粗體顯示出來(圖3)。

這樣對于要求標(biāo)題以默認(rèn)粗體顯示的表格,省去了每次手工執(zhí)行“加粗→居中”的步驟,提高了工作效率。以之相似,我們也可以自己定義表格的其他格式和風(fēng)格而無須借助于編寫復(fù)雜的CSS風(fēng)格表代碼的方法,非常方便。
新的表格輔助寬度顯示功能也很人性化。以前的Dreamweaver版本表格的寬度沒有一個(gè)直觀的表達(dá),在做圖以及布局時(shí)不能很好地把握。而現(xiàn)在當(dāng)你把鼠標(biāo)移到表格上時(shí),首先會發(fā)現(xiàn)有一個(gè)紅色的框(圖4)。

此時(shí)表明你已經(jīng)選定了一個(gè)表格,但這種選定只是DW MX 2004將你的鼠標(biāo)與表格進(jìn)行了綁定,而非“選定”,點(diǎn)鼠標(biāo)左鍵后才選中表格。老版本里常因?yàn)楸砀裉嗖荒軠?zhǔn)確選中,現(xiàn)在有了紅色框的幫助就方便多了!
當(dāng)選中表格后,輔助寬度顯示將自動(dòng)出現(xiàn)在表格的下方,顯示出當(dāng)前表格的寬度并以百分比和像素兩種數(shù)值顯示(圖5)。

點(diǎn)擊綠色倒置的小三角,在出現(xiàn)的下拉列表框中可以選中整個(gè)表格、清除所有的定義行高、清除所有的定義行寬以及設(shè)置所有寬度一致、隱藏輔助寬度顯示等功能,這些都是經(jīng)常用到的重要功能,過去需要自己手工調(diào)整,現(xiàn)在則整合在一個(gè)菜單里了。
如今在DW MX 2004中已經(jīng)可以很方便地對表格進(jìn)行拖放操作,而且假如你對表格分列,它會將該列的寬度顯示出來,這樣做一個(gè)和表格寬度相同的圖片就可以從這里直接取圖片尺寸值了,不用擔(dān)心做出來的圖片尺寸問題了!
最后介紹一下表格中的插入行和列的功能,在老版本中我們插入時(shí)行只能插入到當(dāng)前光標(biāo)行的上方,列則是插入到光標(biāo)列的左側(cè)�,F(xiàn)在DW MX 2004可要靈活多了,可以將行插于下方,也可以將列插入到光標(biāo)列的右側(cè),且只須進(jìn)行相關(guān)菜單操作即可(圖6)。
相關(guān)Dreamweaver教程:
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver網(wǎng)頁制作教程:定義站點(diǎn)
- Dreamweaver 入門:DW 8 的功能
- Dreamweaver網(wǎng)頁制作教程:層及其應(yīng)用
- 用Dreamweaver進(jìn)行網(wǎng)頁優(yōu)化
- 用Dreamweaver為網(wǎng)頁設(shè)計(jì)框架集
- 管理員頁面的實(shí)現(xiàn)-Dreamweaver構(gòu)建Blog全程實(shí)錄
- Dreamweaver MX進(jìn)階教程(十二)在居中頁面使用層
- 細(xì)品DW MX 2004表格設(shè)計(jì)
- 用Dreamweaver進(jìn)行數(shù)據(jù)庫操作
- 用Dreamweaver 8 搞定“web標(biāo)準(zhǔn)”
猜你也喜歡看這些
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-細(xì)品DW MX 2004表格設(shè)計(jì)
。