Dreamweaver表格經(jīng)驗(yàn)談
- 發(fā)布于:2020-07-24
- 共 272 人圍觀
經(jīng)驗(yàn)(一):為什么說(shuō)表格比圖層排版要好?
一開(kāi)始學(xué)DW的朋友,都比較喜歡用圖層排版,其主要原因是圖層可以把對(duì)象放到你想放的任意位置,并且只需拖動(dòng)鼠標(biāo),看起來(lái)非常輕松,但用F12預(yù)覽就面目全非,后悔了吧?還是用表格排版吧。層的定位方式與表格的不同,層采取的定位方式是動(dòng)態(tài)定位方式(引自《Dreamweaver3 網(wǎng)頁(yè)設(shè)計(jì)》),它的定位*的是兩個(gè)參數(shù)Left和Top,這兩個(gè)參數(shù)設(shè)置層框架與瀏覽器的邊框的的距離,無(wú)論你是在最大化,還是在不同的分辨率下他都始終在一個(gè)位置,而表格在不同的情況下它將有所變化。尤其當(dāng)你用表格的同時(shí)又用圖層排版,這樣的效果會(huì)讓你痛苦一輩子。圖層沒(méi)用嗎?當(dāng)然有用,一般用它來(lái)做一些特效,用的好可以讓你的主頁(yè)錦上添花。本站有一個(gè)DW圖層應(yīng)用的教程,有興趣可以看看。
經(jīng)驗(yàn)(二):如何消除分辨率的差異?
這是一個(gè)比較老套的話題,但總有人問(wèn)。我們現(xiàn)在的網(wǎng)頁(yè)最佳瀏覽分辨率大多是800*600,但有不少的兄弟用的是640*480或1024*768,怎樣讓你的網(wǎng)頁(yè)兼容性更好,你只需把表格的寬度設(shè)為100%即可該決這個(gè)問(wèn)題。
經(jīng)驗(yàn)(三):為什么我的表格在預(yù)覽時(shí)發(fā)生變化?
我們經(jīng)常會(huì)在做完表格排版后預(yù)覽,發(fā)現(xiàn)表格的樣子變了,不是有的高度變長(zhǎng)了,就是寬度變寬了。出現(xiàn)這個(gè)情況的原因是,你在排版的時(shí)候,把表格高度或長(zhǎng)度用鼠標(biāo)拖長(zhǎng)或拖短過(guò),這樣DW就會(huì)在你網(wǎng)頁(yè)代碼中自動(dòng)加入一些寬的長(zhǎng)度代碼或高度代碼。由于在排版的過(guò)程中,經(jīng)常會(huì)這樣做,所以你的網(wǎng)頁(yè)代碼加了許多的這些高和寬的代碼,當(dāng)你預(yù)覽的時(shí)候?yàn)g覽器就會(huì)按這些代碼來(lái)顯示,于是就會(huì)出現(xiàn)表格樣子發(fā)生變化。好在DW為你提供了決辦法,按Ctrl+F3后用鼠標(biāo)點(diǎn)擊表格邊框出來(lái)表格屬性面板,點(diǎn)屬性面板的Clear row heiht(除掉表格中定義高度的Html語(yǔ)句) ,而Clear Column Wedths(除掉表格中定義寬度的Html語(yǔ)句)你最好少用,用不好會(huì)弄巧成拙,如果你的網(wǎng)頁(yè)中用到割過(guò)的圖片,此時(shí)用它來(lái)消除圖片間的空隙 S行А?
經(jīng)驗(yàn)(四):關(guān)于表格背景圖片的一個(gè)技巧。
大家都知道在一個(gè)較大的表格中放入背景圖片,背景圖片就會(huì)重復(fù)填充直到整個(gè)頁(yè)面。我們可以利用表格的這個(gè)特性來(lái)減小我們網(wǎng)頁(yè)中圖片的大小,比如下面的一個(gè)漸變圖,你看上去像是一整張圖片,它其實(shí)用的就是表格背景重復(fù)填充特性,而用的圖片就是右邊的那張,大小只有1.3k,在此如果要用一張大的圖片是很不劃算的。你若要插入一根水平線,用這方法也很有效。
經(jīng)驗(yàn)(五):如何使鼠標(biāo)指到表格,表格背景變色?
這個(gè)特效用的是表格樣式表,要達(dá)到此效果你只需在<td>代碼中加入onmouseout="this.style.backgroundColor="" "alt="this.style.backgroundColor="#FFcccc"" ,
例:<td onmouseout="this.style.backgroundColor=""" alt="this.style.backgroundColor="#FFcccc"">,“#ffccc”是你鼠標(biāo)指到表格上要變的顏色,你可以根據(jù)自己需要改變顏色。
經(jīng)驗(yàn)(六):如何利用表格實(shí)現(xiàn)畫(huà)中畫(huà),也就是頁(yè)中頁(yè)效果?
網(wǎng)頁(yè)的排版大多使用表格,利用一個(gè)表個(gè)單元可以嵌入一個(gè)網(wǎng)頁(yè),你知道嗎?這樣做有很多好處,比如你把經(jīng)常更新的區(qū)域劃分一個(gè)表格單元,然后在這個(gè)表格單元中嵌入你想要更新的內(nèi)容,今后更新主頁(yè)只需上傳這個(gè)被嵌套的頁(yè)面就可以了,沒(méi)有必要對(duì)首頁(yè)進(jìn)行更新,是不是很方便。我寫(xiě)個(gè)最簡(jiǎn)單的例子代碼:
?。糷tml>
?。糷ead>
?。紅itle>范例</title>
?。糱ody>
<table border="1" width="100%">
?。紅r>
<td>
?。糏FRAME src="example.htm" width="300" heitht="100"></IFRAME>
?。?td>
?。?tr>
?。?table>
</body>
?。?html>
插入被嵌入頁(yè)的關(guān)鍵代碼是:<IFRAME src="example.htm" width="300" heitht="100"></IFRAME>。example.htm是被嵌入的頁(yè)面,標(biāo)簽<IFRAME>還有一些可用的參數(shù)設(shè)置如下:
marginwidth:網(wǎng)頁(yè)中內(nèi)容在表格右側(cè)的預(yù)留寬度;例如:marginwidth="20",單位是pix,下同。
marginheight:網(wǎng)頁(yè)中內(nèi)容在表格頂部預(yù)留的高度;
hspace:網(wǎng)頁(yè)右上角的的橫坐標(biāo);
vspace:網(wǎng)頁(yè)右上角的縱坐標(biāo);
frameborder:是否顯示邊緣;填"1"表示"是",填"0"表示"否"
scrolling:是否出現(xiàn)滾動(dòng)條;填"1"表示"是",填"0"表示"否"
經(jīng)驗(yàn)(七):在使用表格中應(yīng)注意那些問(wèn)題?
1.整個(gè)表格不要都套在一個(gè)表格里,盡量拆分成多個(gè)表格。
2.表格的嵌套層次盡量要少,最好嵌套表格不超過(guò)3層。
3.單一表格的結(jié)構(gòu)盡量整齊。
轉(zhuǎn)載請(qǐng)說(shuō)明出處:六百號(hào)技術(shù) - SEO優(yōu)化,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)絡(luò)編程,軟件技巧,網(wǎng)絡(luò)知識(shí),系統(tǒng)技術(shù) ? Dreamweaver表格經(jīng)驗(yàn)談
標(biāo)簽: