網站設計公司告訴你經常用到的版面布局形式有哪些

2019-11-14

次

　　網站設計公司告訴你經常用到的版面布局形式有哪些

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

　　在排版的時候應注意什么：1）為了加快下載的速度，整個頁面應盡量拆分成多個表格；2）單一表格的結構要整齊；3）表格的嵌套層次不要過于復雜。

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

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

網站設計公司告訴你經常用到的版面布局形式有哪些

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

　　為什么改變不了表格高度：用鼠標拖動表格線，想把一個表格的高度縮小，可是無論怎么拖動目標，表格高度就是不變。出現這種情況一般是因為表格中的某個單元格設置了一個數值較大的行高所致，刪除該單元格的行高值即可解決問題。如果表格過大，也可以在源代碼編輯器中查找<tr>或<td>標簽內的行高屬性，然后將此屬性清除即可。

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

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

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

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

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

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

　　<style>

　　table{filter:progid:DXImageTransform.Microsoft.Shadow

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

　　</style>

　　<tr>

　　<td><a href="http://homepage.***.com/"><http://homepage.***.com/"><font color=white>網頁改版啦</font></a></td></tr></table>

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

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

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

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

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

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

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

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

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