網(wǎng)站設(shè)計(jì)公司告訴你經(jīng)常用到的版面布局形式有哪些

2019-11-14

次

　　網(wǎng)站設(shè)計(jì)公司告訴你經(jīng)常用到的版面布局形式有哪些

1）“口”型布局；2）“三”型布局；3）“對(duì)稱對(duì)比”布局；4）T結(jié)構(gòu)布局：就是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志和廣告條，下方左側(cè)為主菜單，整體效果類似英文字母T，所以被稱為T形布局。這是網(wǎng)頁(yè)設(shè)計(jì)中用得最廣泛的一種布局方式。這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰、主次分明，是初學(xué)都最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人看之無味。

　　在排版的時(shí)候應(yīng)注意什么：1）為了加快下載的速度，整個(gè)頁(yè)面應(yīng)盡量拆分成多個(gè)表格；2）單一表格的結(jié)構(gòu)要整齊；3）表格的嵌套層次不要過于復(fù)雜。

　　什么是網(wǎng)頁(yè)頁(yè)面尺寸：一般分辨率在800×600像素的情況下，頁(yè)面的顯示尺寸為780×428像素；分辨率在640×480像素的情況下，頁(yè)面的顯示尺寸為620×311像素；分辨率在1024×768像素的情況下，頁(yè)面的顯示尺寸為1007×600像素。在網(wǎng)頁(yè)設(shè)計(jì)過程中，向下拖動(dòng)頁(yè)面是給頁(yè)增加更多內(nèi)容的方法。除非能肯定站點(diǎn)的內(nèi)容吸引大家拖動(dòng)，否則不要讓訪問者拖動(dòng)頁(yè)面超過三屏。如果需要在同一頁(yè)面顯示超過三屏的內(nèi)容，那么最好在網(wǎng)頁(yè)頂部加上頁(yè)面內(nèi)部鏈接，以方便訪問者瀏覽。

　　在表格“屬性”面板中，寬和高的單位有“像素”和%兩種，兩者有什么不同：表格大小有相對(duì)和絕對(duì)之分，通過百分比方式表示的表格大小是相對(duì)大小，通過像素方式表示的表格大小是絕對(duì)大小。如果通過百分比方式設(shè)置表格的大小，在改變版面大小后，表格大小也跟著調(diào)整，將表格的寬和高設(shè)置為100%，則無論版面窗口多大，表格都將充滿整個(gè)窗口。如果通過像素方式設(shè)置表格大小，在改變版面大小后，表格大小不會(huì)跟著調(diào)整，在不同的版面大小中，表格大小固定不變，當(dāng)將版面變大時(shí)，表格相對(duì)于版面來說似乎變小了，但表格的實(shí)際大小不變。

網(wǎng)站設(shè)計(jì)公司告訴你經(jīng)常用到的版面布局形式有哪些

　　在表格“屬性”面板中，“填充”和“間距”文本框分別用于設(shè)置表格的什么屬性：“填充”文本框用于設(shè)置單元格中插入的對(duì)象到單元格邊框之間的距離，“間距”文本框用于設(shè)置表格中兩個(gè)單元格之間的距離。

　　為什么改變不了表格高度：用鼠標(biāo)拖動(dòng)表格線，想把一個(gè)表格的高度縮小，可是無論怎么拖動(dòng)目標(biāo)，表格高度就是不變。出現(xiàn)這種情況一般是因?yàn)楸砀裰械哪硞€(gè)單元格設(shè)置了一個(gè)數(shù)值較大的行高所致，刪除該單元格的行高值即可解決問題。如果表格過大，也可以在源代碼編輯器中查找<tr>或<td>標(biāo)簽內(nèi)的行高屬性，然后將此屬性清除即可。

　　如何實(shí)現(xiàn)表格的亮邊框和暗邊框：表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個(gè)屬性，把表格邊框設(shè)為1像素，亮邊框（bordercolorlight）設(shè)為北景色，暗邊框（bordercolordark）設(shè)為需要的實(shí)際邊框顏色就可以了。如下面的代碼：<table border=”1” cellpadding=”0” cellpacing=”0” width=320 height=97 bordercolorlight=”#000000” bordercolordark=”#FFFFFF”><tr><td></td></tr></table>

　　如何使兩個(gè)表格并排：在文檔中插入了兩個(gè)表格，卻發(fā)現(xiàn)第二個(gè)表格跑到第一個(gè)表格下面去了。要讓這兩個(gè)表格在同一行，可選中第一表格，然后打開“屬性”面板，在“對(duì)齊”下拉列表框中選擇“左對(duì)齊”選項(xiàng)即可。用同樣的方法還可以設(shè)置表格和文字、表格和圖形、圖形和圖形在一行，或者更多的表格和圖片混排。

　　如何制作圓角表格：制作網(wǎng)頁(yè)的時(shí)候?yàn)榱嗣阑W(wǎng)頁(yè)，常常把表格邊框的拐角處設(shè)計(jì)成圓角，這樣可以避免直接使用表格直角的生硬，使得網(wǎng)頁(yè)整體更加美觀，下面就介紹一中制作圓角表格的常用方法。1）先用photoshop等作圖軟件繪制一個(gè)圓角矩形，再用矩形選框工具選取左上角的圓角部分，并復(fù)制它；2）不要取消選區(qū)，直接新建一幅圖像，photoshop會(huì)根據(jù)選取部分的高度、寬度自動(dòng)設(shè)置新建圖像的大小，將復(fù)制的圖像粘貼后，保存為Web所用格式即可。分別用水平翻轉(zhuǎn)工具和垂直翻轉(zhuǎn)工具，制作出另外三個(gè)方向的圓角；3）在Dreamweaver中插入一個(gè)一行三列的表格，設(shè)置其邊框、單元格邊距均為0。在第一列插入圖片bj1.gif；第三列插入圖片bj2.gif；并設(shè)置單元格的高度和寬度與圖片一致。設(shè)置第二列的背景顏色為與圓角圖片一致的顏色，設(shè)置切換到代碼視圖，刪除這列中的字符“ ”（Dreamweaver會(huì)自動(dòng)在每個(gè)單元格中插入此字符，若不刪除會(huì)撐大表格）。按照前面的操作制作好下半部分的圓角。至此，一個(gè)圓角表格就做好了。

　　在Dreamweaver中插入極細(xì)邊框表格的方法：1）先插入一個(gè)1×1的表格，設(shè)置其邊距為0，邊框?yàn)?，間距為0，邊框?yàn)樗{(lán)色，然后選中此表格，切換到顯示代碼和視圖狀態(tài)，在表格屬性代碼中插入以下語(yǔ)句：bordercolordark=ffffff；2）插入一行一列的表格；在表格中插入先期制作好的1×1的透明圖片；然后選中此表格填上你喜歡的背景顏色；最后將表格的高度設(shè)為1。

　　如何使用1×1像素的透明圖像固定單元格寬度：插入一個(gè)2行3列，寬度為200像素，邊框?yàn)?，單元格邊距和間距均為0的表格，當(dāng)在表格中輸入文字時(shí)，表格出現(xiàn)了變形，這時(shí)使用Dreamweaver自帶的1×1像素的透明圖像，可以固定單元格的大小，方法如下：1）單擊“編輯”|“首選參數(shù)”命令，在彈出對(duì)話框的“分類”列表中選擇“布局模式”選項(xiàng)；2）單擊“創(chuàng)建”按鈕創(chuàng)建一個(gè)1×1像素的透明圖像，這時(shí)將彈出一個(gè)對(duì)話框，要求設(shè)置該透明圖像的名稱和保存位置；3）在被插入表格第一行的三個(gè)單元格中分別插入創(chuàng)建的透明圖像，并在“屬性”面板中設(shè)置其寬度為68像素，再輸入文字，可以看到單元格寬度不再變化。

　　如何制作表格陰影：可以將以下代碼添加到<body></body>之間：

　　<style>

　　table{filter:progid:DXImageTransform.Microsoft.Shadow

　　(Color=#333333,Direction=120,strength=5)}

　　</style>

　　<tr>

　　在網(wǎng)頁(yè)中制作表格虛線：1）制作一個(gè)1×2像素的圖像，兩個(gè)像素分別為黑和白；2）插入一個(gè)表格，在表格中插入前面制作的圖像；3）將表格的高度設(shè)置為1；4）在表格中定義背景為前面制作的圖像，即可制作出虛線表格。

　　如何創(chuàng)建可拖動(dòng)的表格：在Dreamweaver中，給表格增加CSS定位，表格就變得像“層”一樣可拖動(dòng)了。方法如下：1）在文檔中插入一個(gè)表格，選中表格；2）在CSS樣式表中選“編輯樣式”的新建，在彈出的對(duì)話框中的“類型”中選擇“創(chuàng)建自定義樣式”，在“定義在”中選擇“僅對(duì)該文檔；3）在再次彈出的對(duì)話框中的“分類”中選擇“定位”，在右側(cè)的“類型”下拉列表框中選擇“絕對(duì)”選項(xiàng)，在“置入”選項(xiàng)區(qū)的“左”和“上”數(shù)值框中輸入任意數(shù)值，單擊“確定”按鈕關(guān)閉對(duì)話框。這時(shí)在文檔中表格就像層一樣可以拖動(dòng)了。

　　如何解決在表格的寬度設(shè)置為100%，但瀏覽時(shí)仍不能滿屏顯示的問題：為了使頁(yè)面適應(yīng)不同的分辨率，通常將表格的大小按百分比設(shè)置。但已經(jīng)將表格的寬度設(shè)置為100%，在瀏覽器上還是不能滿屏顯示，四周總有一圈空白。單擊“修改”|“頁(yè)面屬性”命令，在彈出的對(duì)話框中設(shè)置“左邊距”和“上邊距”為0即可。

　　如何在網(wǎng)頁(yè)中插入背景音樂：首先準(zhǔn)備好一首MIDI音樂，如music.mid，存放在網(wǎng)站根目錄下。將以下代碼插入在<head> </head>之間：<embed src=sound/qd.mp3 autostart="false" loop=true width=300 height="45"></embed>，其中autostart="false"表示不自動(dòng)播放，loop=true表示無限循環(huán)，也可以指定次數(shù)（如loop=3），width和height表示顯示控制面板的寬和高，當(dāng)兩個(gè)參數(shù)均為0時(shí)，表示隱藏控制面板。

　　如何導(dǎo)出表格中的內(nèi)容：選中要導(dǎo)出的表格，單擊“文件”|“導(dǎo)出”|“表格”命令，在彈出的對(duì)話框中單擊“導(dǎo)出”按鈕，設(shè)置導(dǎo)出文件保存位置、名稱，然后依次單擊“確定”按鈕進(jìn)行導(dǎo)出即可。

　　如何導(dǎo)入Excel文檔：將光標(biāo)置于要導(dǎo)入Excel文檔的位置，將要導(dǎo)入的EXCEL文件另存為文本文件，單擊“文件”|“導(dǎo)入”|“Excel文檔”命令，在彈出的對(duì)話框中選擇要導(dǎo)入的Excel文檔，單擊“打開”按鈕即可將其導(dǎo)入。

　　為什么把單元格高度設(shè)置為1后沒有效果：Dreamweaver生成表格時(shí)，會(huì)自動(dòng)在每個(gè)單元格中填充一個(gè)“ ”代碼，即空格代碼。如果有這個(gè)代碼存在，那么把該單元格寬度或高度設(shè)置為1就沒有效果，實(shí)際預(yù)覽時(shí)該單元格會(huì)占據(jù)10像素左右的寬度。如果把“ ”代碼去掉，再把單元格的寬度或高度設(shè)置為1，就可以在IE中看到預(yù)期的效果。但是在NS中該單元格不會(huì)顯示，就好像表格中缺了一塊，在單元格內(nèi)放一個(gè)透明的GIF圖，然后將寬度和高度都設(shè)置為1，這樣就可以同時(shí)兼容IE和NS了。

　　使用層布局網(wǎng)頁(yè)有什么優(yōu)勢(shì)：盡管使用表格可以布局網(wǎng)頁(yè)，將網(wǎng)頁(yè)中的元素對(duì)象控制在特定位置，但是有些網(wǎng)頁(yè)元素實(shí)在太難控制，尤其是在精確定位方面。這時(shí)，層作為一種新的網(wǎng)頁(yè)元素定位技術(shù)應(yīng)運(yùn)而生，使用層可以以像素為單位精確定位頁(yè)面元素。層可以放置在頁(yè)面的任意位置，這樣在層中放置的元素也就可以定位于頁(yè)面中的任意位置，如此一來，可以使頁(yè)面布局更整齊、更美觀。

　　如何制作網(wǎng)頁(yè)中的豎線：要在網(wǎng)頁(yè)中制作豎線，方法如下：插入一個(gè)1×1的表格，設(shè)置表格邊框?yàn)?。將表格的背景設(shè)置為豎線需要的顏色，將表格寬度設(shè)置為1像素，高度為豎線高度。選中該表格，切換到代碼視圖，將代碼“&nbsp；”刪除即可。