如何避免用Dreamweaver做出來的模板面目全非

2011-12-07|HiShop
導(dǎo)讀有很多賣家都是自己制作促銷模板的,而且大多數(shù)都是使用Dreamweaver這個軟件,但是很多時候做出來的模板都回存在變形的情況。今天我為大家說說如何能預(yù)防這個是事情的發(fā)生。 一、消除任意縮放瀏覽器窗口對網(wǎng)頁的影響 一番辛苦做出來的網(wǎng)頁,在全屏狀態(tài)下瀏覽...

 有很多賣家都是自己制作促銷模板的,而且大多數(shù)都是使用Dreamweaver這個軟件,但是很多時候做出來的模板都回存在變形的情況。今天我為大家說說如何能預(yù)防這個是事情的發(fā)生。

    一、消除任意縮放瀏覽器窗口對網(wǎng)頁的影響

    一番辛苦做出來的網(wǎng)頁,在全屏狀態(tài)下瀏覽一切正常。但在改變?yōu)g覽窗口大小之后,網(wǎng)頁就變得"不堪入目"了,這是個很值得注意的問題。

    問題的根源還得從網(wǎng)頁的布局說起,在DW中,網(wǎng)頁內(nèi)容的定位一般是通過表格來實現(xiàn)的,解決表格的問題也就成功了大半。

    大家應(yīng)該注意到,在DW中表格屬性面板的高寬設(shè)定選擇上提供了兩種不同類型:百分比和像素值。百分比的使用將會產(chǎn)生前面說到的那個毛病。這里所說的百分比是指表格的高或?qū)捲O(shè)置為上層標(biāo)記所占區(qū)域高或?qū)挼陌俜直?,如在一個表格單元的寬度是600,在它里面嵌入了另外一個表格,表格寬度占表格單元的50%,則這個表格的寬度為300,依此類推,如果在一個表格不是嵌于另一個表格單元中,則其百分比是相對于當(dāng)時窗口的寬度的。IE瀏覽器中,隨便改動主頁窗口的大小時,表格的內(nèi)容也隨之錯位、變形,就是因為表格的百分比也要隨著窗口的大小而改變成相應(yīng)的百分比寬度。

    自然,解決這個問題的辦法就是將表格寬度設(shè)置成固定寬度(也就是像素值)。另外如果外層表格已做好固定寬度設(shè)置,內(nèi)層表格也可以適當(dāng)使用百分比設(shè)置。清楚這個原則以后,如果出現(xiàn)類似的問題大家也知道怎么解決。

    二、讓網(wǎng)頁居中

    說到了窗口大小就會順著路子想到分辨率的問題,在800×600分辨率下制作的網(wǎng)頁在1024×768分辨率的機器上打開,整個網(wǎng)頁就會跑到左邊;1024×768分辨率的網(wǎng)頁在800×600分辨率的機器上有時也會變得"不堪入目"。兩種分辨率各做一個吧?做起來費時,看起來也費勁。怎么辦呢?

    現(xiàn)在大多數(shù)網(wǎng)民都還在用800*600的分辨率,所以我們一般可以以此分辨率為主,要想讓網(wǎng)頁在1024*768時居中,只要在網(wǎng)頁原代碼的<body>后緊加一句<center>,</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下,第一個就是上面說到的百分比的問題,表格、單元格的寬度單位最好要使用像素單位,而不要用百分比。例如width=770。如果你的表格寬度設(shè)的是百分比,那么使用大于800×600的像素時,網(wǎng)頁就會拉寬,這樣網(wǎng)頁可能會變形。在<body>中加入leftmargin=0,即<bodyleftmargin=0>這種情況下,800×600支持的表格寬度為780像素時不會出現(xiàn)滾動條。還有一點要注意的是不能用DW中的層來定位。

    <HTML>

    <head></head>

    <bodytopmargin=0leftmargin=0>

    <center>

    <tablecellspacingcellpaddingwidth=760><tr><td></td></tr></table>

    </center>

    </body>

    </html>

    三、定義固定大小的文字

    大家都知道,在IE瀏覽器的功能設(shè)置中,有一個可以自由設(shè)置窗口內(nèi)容字體大小的功能,這樣由于不同訪問者的設(shè)置習(xí)慣不同,呈現(xiàn)在他們面前的網(wǎng)頁有時也會不不相同。比如你可能本來設(shè)計時用的是2號字體,結(jié)果由于用戶對瀏覽器的額外設(shè)定,變的更大了,這時你的網(wǎng)頁也可能變得"不堪入目"。雖然不是你的錯,但客戶是上帝。

    如果使用了網(wǎng)頁中的CSS樣式表技術(shù),就不會出現(xiàn)上述情況了。使用快捷鍵"Shift+F11"打開樣式表"CSSStyle"編輯器,在窗口中單擊鼠標(biāo)右鍵執(zhí)行"NewCSSStyle..."命令新建一個樣式表,然后在給出的列表中選擇"類型"選項,定義文字屬性參數(shù)(一般文字的大小選擇12px較為適宜)。完成后選擇網(wǎng)頁編輯窗中的文本,單擊新的樣式表名稱,可以看到選中的文本發(fā)生了變化。預(yù)覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。

    四、讓網(wǎng)頁適應(yīng)不同的瀏覽器

    瀏覽器的格局現(xiàn)在是兩分天下,一分是IE有很多賣家都是自己制作促銷模板的,而且大多數(shù)都是使用Dreamweaver這個軟件,但是很多時候做出來的模板都回存在變形的情況。今天我為大家說說如何能預(yù)防這個是事情的發(fā)生。 

【本站聲明】 1、本網(wǎng)站發(fā)布的該篇文章,目的在于分享電商知識及傳遞、交流相關(guān)電商信息,以便您學(xué)習(xí)或了解電商知識,請您不要用于其他用途; 2、該篇文章中所涉及的商標(biāo)、標(biāo)識的商品/服務(wù)并非來源于本網(wǎng)站,更非本網(wǎng)站提供,與本網(wǎng)站無關(guān),系他人的商品或服務(wù),本網(wǎng)站對于該類商標(biāo)、標(biāo)識不擁有任何權(quán)利; 3、本網(wǎng)站不對該篇文章中所涉及的商標(biāo)、標(biāo)識的商品/服務(wù)作任何明示或暗示的保證或擔(dān)保; 4、本網(wǎng)站不對文章中所涉及的內(nèi)容真實性、準(zhǔn)確性、可靠性負(fù)責(zé),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細(xì)的資訊,請您直接與該類商品/服務(wù)的提供者聯(lián)系。
重磅推薦:淘寶學(xué)院目錄

第一部分:極速推

第三部分:微詳情

第四部分:百億補貼

第五部分:淘金幣

第六部分:天天特賣

第七部分:淘寶直播

第八部分:淘寶特價版

第九部分:相關(guān)推薦