電子商務網(wǎng)頁制作項目網(wǎng)頁版式設計與布局培訓課程課件

DW項目五電子商務網(wǎng)頁制作網(wǎng)頁版式設計與布局DW項目五電子商務網(wǎng)頁版式設計與布局學習網(wǎng)頁版式設計的概念； 了解有關網(wǎng)頁造型和分辨率的知識； 了解網(wǎng)頁布局的原則和方法； 學習使用表格進行網(wǎng)頁布局。項目目標學習網(wǎng)頁版式設計的概念；項目目標看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞這是一種典型的橫向平鋪結構，瀏覽者拖動鼠標向下滾動頁面可以流暢地瀏覽頁面。由于網(wǎng)站主要經營白色家電，故采用白色系作為網(wǎng)站主色調，利用不同灰度的淺灰色塊將頁面巧妙分欄，使信息組織更加清晰有條理。整個頁面設計留白較多，空曠開闊的設計給人以高端大氣、品質優(yōu)良的感覺。瀏覽者在瀏覽網(wǎng)頁時，一般首先看網(wǎng)頁的上部中間位置，然后是上部左面、上部右面，最后看整個網(wǎng)頁的下面，因此網(wǎng)頁左上部和中上部是最佳視域，重要信息應安排在這個位置，例如購物車、賬戶信息、搜索引擎、導航條等放在整個網(wǎng)頁的上部?？匆豢础W(wǎng)頁設計欣賞這是一種典型的橫向平鋪結構，瀏覽者看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞

首先會看到一個Flash動畫的演示，然后正式進入主頁。主頁布局設計類似于一個家庭影院，讓人仿佛置身于生活中常見的體育賽事電視轉播情景中，畫面比例接近黃金分割，十分協(xié)調美觀。任意點擊頁面下方的鏈接，進入網(wǎng)站瀏覽。可以發(fā)現(xiàn)這里充滿了靈動的Flash動畫，引人入勝，滿足了青少年為主的客戶群的審美心理?？匆豢础W(wǎng)頁設計欣賞首先會看到一個Flash動畫的演示看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞

這是一個典型的采用FLASH動畫制作的封面型結構網(wǎng)站，頁面表達的信息十分豐富，視覺效果一流。請點擊導航欄上的鏈接圖片任意瀏覽，可以看到站內各個頁面保持了高度一致的風格，如圖5-2所示。采用醒目的紅色圖標作為導航區(qū)，強烈的視覺對比形成了鮮明的視覺效果。簡潔的頁面布局、生動的FLASH動畫，迎合了年輕消費者的審美心理?？匆豢础W(wǎng)頁設計欣賞這是一個典型的采用FLASH動畫制看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞

這是一個介紹江南古鎮(zhèn)的旅游網(wǎng)站。主頁設計采用了仿手機界面的形式，新穎別致。點擊圖標繼續(xù)瀏覽，將會看到整個網(wǎng)站頁面設計的無不透露著深厚的人文底蘊，獨具江南水鄉(xiāng)的魅力。頁面布局疏密有度，即平常所說的“密不透風，疏可跑馬”。頁面并沒有采用一種樣式，而是適當留白，運用空格，改變行間距、字符間距等，制造一些變化的效果，給人留下深刻印象。看一看——網(wǎng)頁設計欣賞這是一個介紹江南古鎮(zhèn)的旅游網(wǎng)站。主看一看——網(wǎng)頁設計欣賞

網(wǎng)頁布局最基本的目的就是對信息內容進行分類，重點突出地放置信息，在此基礎上形成網(wǎng)頁的外觀風格。在一些設計類網(wǎng)站中，經?？梢钥吹絻?yōu)秀網(wǎng)頁設計作品展示，這些作品著重體現(xiàn)的是設計的藝術性，但對于電子商務網(wǎng)站來說，藝術性絕不是第一位的，易用性、經濟性、可維護性才是最終的目標?；顒有〗Y看一看——網(wǎng)頁設計欣賞網(wǎng)頁布局最基本的目的就是對信息內容版式設計的含義網(wǎng)頁版式設計是將文字、圖形圖像、色彩、動畫、視頻等網(wǎng)頁界面的傳達要素，根據(jù)特定的內容和主題，在網(wǎng)頁所限定的范圍中，運用造型元素和形式原理進行視覺的關聯(lián)與配置，從而將設計意圖以視覺形式表現(xiàn)出來。版式設計是技術和藝術的高度統(tǒng)一，在設計時要運用統(tǒng)一、對比、對稱、均衡、節(jié)奏、韻律等形式原理，構造出和諧、流暢、自然的網(wǎng)頁界面。版式設計的含義網(wǎng)頁版式設計是將文字、圖形圖像、色彩、動畫分辨率與網(wǎng)頁尺寸

顯示器的分辨率，是指在計算機屏幕的水平和垂直方向上，各含有多少像素，如分辨率是800×600的屏幕，在水平方向上有800個像素點，而垂直方向上有600個像素點。顯示器的分辨率范圍，取決于顯示器和顯卡的性能，常用的屏幕分辨率有以下幾種：640×480、800×600、1024×768、1280×1024、1152×864。瀏覽者使用什么樣的分辨率瀏覽，網(wǎng)頁設計者是不可能知道的，所以在設計的時候必須考慮分辨率的問題。由于瀏覽器本身也會占去不少空間，所以顯示在瀏覽器窗口中的網(wǎng)頁尺寸就更小了。分辨率（像素×像素）網(wǎng)頁尺寸（像素×像素）640×480620×311800×600780×4281024×7681007×6001280×10241260×868分辨率與網(wǎng)頁尺寸顯示器的分辨率，是指在計算機屏幕的水平和分辨率與網(wǎng)頁尺寸800×600分辨率下的網(wǎng)頁顯示1024×768分辨率下的網(wǎng)頁顯示分辨率越高，網(wǎng)頁尺寸越大。另外，瀏覽器的工具欄也是影響網(wǎng)頁尺寸的原因，工具欄全部顯示和工具欄全部關閉的情況下，網(wǎng)頁的尺寸是不一樣的。分辨率與網(wǎng)頁尺寸800×600分辨率下的網(wǎng)頁顯示1024×7分辨率與網(wǎng)頁尺寸

為了給網(wǎng)頁增加更多的內容，必須采用延長網(wǎng)頁的辦法，瀏覽者向下拖動網(wǎng)頁，即可瀏覽下面的內容。然而過長的網(wǎng)頁會導致過多的滾動，這會讓瀏覽者眼花繚亂。因此，如果網(wǎng)頁長度超過三屏，應該在網(wǎng)頁中加入書簽鏈接，使瀏覽者能夠自如地在長網(wǎng)頁中來回跳轉。同時出現(xiàn)縱向滾動條和橫向滾動條的網(wǎng)頁顯示

通常瀏覽者習慣使用縱向滾動條上下拖動網(wǎng)頁，但不能忍受使用向滾動條左右拖動網(wǎng)頁，左圖所示的同時出現(xiàn)縱向和橫向滾動條的情況，是應該盡量避免的。小貼士分辨率與網(wǎng)頁尺寸為了給網(wǎng)頁增加更多的內容，必須采用延長網(wǎng)網(wǎng)頁布局的一般步驟1．構思根據(jù)網(wǎng)站的內容和整體風格，設計版面布局?？梢詤⒖计渌麅?yōu)秀的網(wǎng)站，調用自己的各種知識儲備，特別是藝術方面的積累，并在大腦中不斷地醞釀、碰撞，往往不經意間就有閃光的思想出現(xiàn)。這時就要抓緊時間把它變成文字的東西，用筆在紙上粗略地勾畫出布局的輪廓，不要講究細節(jié)，只要有一個輪廓就行。當然也可能有多種想法，盡量都把它們畫出來，然后再進行比較，采用一種比較滿意的方案。網(wǎng)頁布局的一般步驟1．構思網(wǎng)頁布局的一般步驟2．初步填充內容在填充內容時，要考慮到瀏覽者的瀏覽習慣，通常把最重要的內容放在窗口的中心位置，次重要的內容放在網(wǎng)頁頂部，最不重要的內容放在網(wǎng)頁左邊。網(wǎng)站的標志、廣告條、菜單、導航欄等，是需要重點突出的內容，應該放在最突出、最醒目的位置，然后再考慮其它元素的放置。此布局將屏幕分為5個區(qū)，從1~5重要性依次下降：1區(qū)放置最重要的和最新的信息，如廣告；2區(qū)放置公司標志和導航欄；3區(qū)放置更新的報導；4區(qū)放置用于閱讀的常規(guī)內容；5區(qū)用于放置用戶注冊和其他鏈接。網(wǎng)頁布局的一般步驟2．初步填充內容此布局將屏幕分為5個區(qū)網(wǎng)頁布局的一般步驟3．細化在將各主要元素確定好之后，就可以考慮文字、圖像、表格等網(wǎng)頁元素的排版布局了。可以先把草案做成一個簡略的網(wǎng)頁，當然對每一種元素所占的比例也要有一個詳細的數(shù)字，以便以后修改。網(wǎng)頁布局的一般步驟3．細化商務網(wǎng)站的布局原則商務網(wǎng)站在布局上和咨詢類網(wǎng)站有著很多相似的地方。多采用兩欄或3欄的布局。兩欄或三欄的布局給人一種開放大氣的感覺，適用于信息量大的網(wǎng)站。導航多以搜索為主，橫排在頁面上部，左側為欄目的內容區(qū)，右側以產品分類為主，可以運用對比和調和，對稱與平衡，節(jié)奏與韻律以及留白等手段。建立整體的均衡狀態(tài)，產生和諧的美感。商務網(wǎng)站在配色上多以動感且有活力的顏色為主，如藍色，洋紅，橙色，和黃色等，并且整體頁面的明度較高，由于商務網(wǎng)站的產品圖片比較多，圖片本身的色彩就十分豐富，所以網(wǎng)站的配色應當盡量的簡單。商務網(wǎng)站的布局原則商務網(wǎng)站在布局上和咨詢類網(wǎng)站有著很多相商務網(wǎng)站的布局原則在構思和設計網(wǎng)站布局的過程中，需要要掌握以下幾項原則：（1）功能第一，形式第二

這里的功能也可以指內容。在制作網(wǎng)站前一定要了解瀏覽者來到網(wǎng)站的目的，比如上百度是為了搜索信息，上淘寶是為了購物，試想如果百度失去了搜索功能，淘寶失去了購物功能，那么這些網(wǎng)站對于瀏覽者還有什么意義呢？可見功能是第一位的，而布局屬于形式，形式是溝通瀏覽者與網(wǎng)站之間的橋梁，通過形式的優(yōu)化，讓瀏覽者更易于了解并使用網(wǎng)站。（2）服務用戶

無論是門戶網(wǎng)站、企業(yè)網(wǎng)站，還是盈利性、非盈利性的網(wǎng)站，直接目的都是服務用戶，如果沒有瀏覽者的訪問和支持，那么網(wǎng)站就失去了意義，可以說瀏覽者是網(wǎng)站實現(xiàn)一切目標的核心，有了用戶才有一切。通過在布局上合理優(yōu)化，可以讓用戶很清楚地快速瀏覽頁面，找到需要的信息。商務網(wǎng)站的布局原則在構思和設計網(wǎng)站布局的過程中，需要要掌握以商務網(wǎng)站的布局原則在構思和設計網(wǎng)站布局的過程中，需要要掌握以下幾項原則：（3）層次清晰、主次分明

布局可以分為兩種形式，一種是整體的布局，只繪制出頁面的大結構；一種是局部的布局，包括文字圖像之間的排列即排版。整體布局要讓瀏覽者知道哪些板塊重要，引導瀏覽者關注，而局部的排版是要在具體的板塊中實現(xiàn)內容表述的清晰、美觀。（4）突出特點

瀏覽者決定網(wǎng)站的成敗，擁有的瀏覽者越多，網(wǎng)站就越成功。如何在數(shù)不清的網(wǎng)站中脫穎而出，給瀏覽者留下深刻印象、讓瀏覽者過目難忘呢？挖掘網(wǎng)站特點是一個好的方法，個人網(wǎng)站要突出個性風格；企業(yè)網(wǎng)站要體現(xiàn)企業(yè)特點和企業(yè)理念；商務網(wǎng)站商品內容要詳實，瀏覽者的購物操作要安全、方便。商務網(wǎng)站的布局原則在構思和設計網(wǎng)站布局的過程中，需要要掌握以表格布局概述表格是常用的網(wǎng)頁布局工具，它簡單實用，易于掌握，使用表格布局對于初學者來說是一個很好的方法。使用DreamweaverCS5的表格能幫助親輕松完成網(wǎng)頁的布局。在實際應用中，通常使用表格來進行網(wǎng)頁布局，對網(wǎng)頁元素進行精確定位。例如在制作商品列表頁面時，如果不用表格而直接將商品圖像插入網(wǎng)頁中，很難精確控制圖像的位置，商品的文字描述更是難以和相應圖片對齊：表格布局概述表格是常用的網(wǎng)頁布局工具，它簡單實用，易于掌表格布局概述

在此可以使用一個2行4列的表格來對此商品列表頁面進行布局，每個單元格內嵌套一個1行2列的表格分別放置商品圖像和文字描述，如圖5-12所示，效果會好很多：使用表格布局的商品列表表格布局概述在此可以使用一個2行4列的表格來對此商品列表表格布局概述

在DreamweaverCS5中，表格分為兩種：原始表格和布局表格。原始表格和布局表格在本質上都是網(wǎng)頁表格，都是由行、列、單元格組成，在DreamweaverCS5“代碼”視圖中，它們的代碼也都是一樣的。區(qū)別在于它們是DreamweaverCS５在設計表格時所用到的兩種不同的模式或方法。

原始表格和布局表格是Dreamweaver處理表格的兩種模式，即“標準模式”和“布局模式”，二者之間可以隨意切換。在“標準模式”下為原始表格，一般是通過對話框和屬性面板對表格的尺寸、對齊、背景等屬性進行設置；在“布局模式”則為布局表格，可以由設計者手工繪制表格和單元格，其大小可以手工調整。在布局時使用布局表格更為直觀和簡單。小貼士表格布局概述在DreamweaverCS5中，表格分為表格布局的方法1．使用布局表格布局

打開“查看”菜單，選擇“表格模式”子菜單中的“布局模式”命令，或者按快捷鍵<Alt>+F6，可以切換到布局模式。在“布局模式”下，設計者可以在頁面中所見即所地手工繪制布局表格和布局單元格，從而直觀地進行網(wǎng)頁布局。在插入欄中選擇“布局”類別，運用“繪制布局表格”和“繪制布局單元格”按鈕可以繪制布局表格和布局單元格。表格布局的方法1．使用布局表格布局表格布局的方法通常要先繪制一個布局表格，然后在布局表格中繪制布局單元格，在“設計”視圖中，布局表格外框為綠色，而布局單元格外框為藍色。如果不在布局表格中繪制布局單元格，DreamweaverCS5會自動創(chuàng)建一個布局表格以容納該單元格，所以，布局單元格不能獨立存在于布局表格之外。布局表格和布局單元格具有自動吸附功能，當新繪制的布局表格或布局單元格距離另一個布局表格或布局單元格的邊界很近時，就會自動吸附。如果要取消該功能，可以在繪制時按住Alt鍵。表格布局的方法通常要先繪制一個布局表格，然后在布局表格中表格布局的方法2．使用原始表格布局除使用布局表格工具進行布局外，直接插入原始表格同樣可以進行網(wǎng)頁布局。創(chuàng)建表格時須注意除了要設置表格的行數(shù)、列數(shù)和寬度以外，還需要將“邊框粗細”、“單元格邊距”、“單元格間距”都設置為0，這樣創(chuàng)建的表格沒有邊框和間距，也適合用于網(wǎng)頁布局。表格布局的方法2．使用原始表格布局表格布局的方法3．相臨表格之間的位置關系不論表格的寬度是多少，兩個相臨的表格必然是上下的位置關系，因此，在使用表格布局時，可以根據(jù)功能將頁面劃分為若干個區(qū)塊，每個區(qū)塊使用一個表格。如圖5-16所示為一個上中下結構的布局，可以分別使用三個表格完成header區(qū)、主體區(qū)和頁腳區(qū)的布局。表格布局的方法3．相臨表格之間的位置關系表格布局的方法４．設置布局表格的屬性這里主要是根據(jù)實際需要設置表格的行數(shù)、列數(shù)、寬度、高度，對齊方式、背景等屬性，從而實現(xiàn)網(wǎng)頁內容的布局。特別是表格以及單元格的寬度和高度，它們決定了網(wǎng)頁布局內容的尺寸。

在向單元格內添加內容時，比如添加一張圖片，如果圖片尺寸比單元格的尺寸大，將會把單元格“撐大”，這樣可能會破壞頁面的整體外觀，所以在創(chuàng)建表格以及設置單元格尺寸時，要預先算好尺寸，留出合適的空間以存放內容小貼士表格布局的方法４．設置布局表格的屬性在向單元格內添加內容表格布局的方法５．嵌套表格的應用在使用表格布局時，大的功能區(qū)塊內部還有小的區(qū)塊，各小區(qū)塊內部還有更具體的內容需要放置，這些情況都需要使用嵌套表格來實現(xiàn)。簡而言之，使用嵌套表格可以將大的區(qū)塊劃分為小的區(qū)塊，也可以將小區(qū)塊劃分更小的區(qū)域，從而實現(xiàn)網(wǎng)頁元素的精確定位。如下圖中使用一個1行2列的嵌套表格將主體區(qū)劃分為左、右兩個子區(qū)塊。

使用嵌套表格時，要注意內層表格的寬度不能超過其外層單元格的寬度，否則會將外層單元格“撐大”而引起外層表格變形。小貼士表格布局的方法５．嵌套表格的應用使用嵌套表格時，要注意內項目總結

本項目介紹了網(wǎng)頁版式設計與布局的基礎知識。網(wǎng)頁版式設計能夠將文字和圖形圖像等視覺元素進行組合配置，使瀏覽者對網(wǎng)頁的內容一目了然，并獲得悅目的視覺效果，從而實現(xiàn)信息傳達的最佳效果，因此，版式設計在網(wǎng)頁設計中具有非常重要的作用。表格布局具有易于使用，布局效果好的特點。運用表格把網(wǎng)頁分為大的區(qū)塊，再通過嵌套表格將大區(qū)塊劃分為小的區(qū)塊，從而實現(xiàn)對網(wǎng)頁元素的布局和精確定位。項目總結本項目介紹了網(wǎng)頁版式設計與布局的基礎知識。網(wǎng)頁版推薦資源推薦資源謝謝觀賞！謝謝觀賞！DW項目五電子商務網(wǎng)頁制作網(wǎng)頁版式設計與布局DW項目五電子商務網(wǎng)頁版式設計與布局學習網(wǎng)頁版式設計的概念； 了解有關網(wǎng)頁造型和分辨率的知識； 了解網(wǎng)頁布局的原則和方法； 學習使用表格進行網(wǎng)頁布局。項目目標學習網(wǎng)頁版式設計的概念；項目目標看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞這是一種典型的橫向平鋪結構，瀏覽者拖動鼠標向下滾動頁面可以流暢地瀏覽頁面。由于網(wǎng)站主要經營白色家電，故采用白色系作為網(wǎng)站主色調，利用不同灰度的淺灰色塊將頁面巧妙分欄，使信息組織更加清晰有條理。整個頁面設計留白較多，空曠開闊的設計給人以高端大氣、品質優(yōu)良的感覺。瀏覽者在瀏覽網(wǎng)頁時，一般首先看網(wǎng)頁的上部中間位置，然后是上部左面、上部右面，最后看整個網(wǎng)頁的下面，因此網(wǎng)頁左上部和中上部是最佳視域，重要信息應安排在這個位置，例如購物車、賬戶信息、搜索引擎、導航條等放在整個網(wǎng)頁的上部?？匆豢础W(wǎng)頁設計欣賞這是一種典型的橫向平鋪結構，瀏覽者看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞

首先會看到一個Flash動畫的演示，然后正式進入主頁。主頁布局設計類似于一個家庭影院，讓人仿佛置身于生活中常見的體育賽事電視轉播情景中，畫面比例接近黃金分割，十分協(xié)調美觀。任意點擊頁面下方的鏈接，進入網(wǎng)站瀏覽?？梢园l(fā)現(xiàn)這里充滿了靈動的Flash動畫，引人入勝，滿足了青少年為主的客戶群的審美心理?？匆豢础W(wǎng)頁設計欣賞首先會看到一個Flash動畫的演示看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞

這是一個典型的采用FLASH動畫制作的封面型結構網(wǎng)站，頁面表達的信息十分豐富，視覺效果一流。請點擊導航欄上的鏈接圖片任意瀏覽，可以看到站內各個頁面保持了高度一致的風格，如圖5-2所示。采用醒目的紅色圖標作為導航區(qū)，強烈的視覺對比形成了鮮明的視覺效果。簡潔的頁面布局、生動的FLASH動畫，迎合了年輕消費者的審美心理?？匆豢础W(wǎng)頁設計欣賞這是一個典型的采用FLASH動畫制看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞看一看——網(wǎng)頁設計欣賞

這是一個介紹江南古鎮(zhèn)的旅游網(wǎng)站。主頁設計采用了仿手機界面的形式，新穎別致。點擊圖標繼續(xù)瀏覽，將會看到整個網(wǎng)站頁面設計的無不透露著深厚的人文底蘊，獨具江南水鄉(xiāng)的魅力。頁面布局疏密有度，即平常所說的“密不透風，疏可跑馬”。頁面并沒有采用一種樣式，而是適當留白，運用空格，改變行間距、字符間距等，制造一些變化的效果，給人留下深刻印象?？匆豢础W(wǎng)頁設計欣賞這是一個介紹江南古鎮(zhèn)的旅游網(wǎng)站。主看一看——網(wǎng)頁設計欣賞

網(wǎng)頁布局最基本的目的就是對信息內容進行分類，重點突出地放置信息，在此基礎上形成網(wǎng)頁的外觀風格。在一些設計類網(wǎng)站中，經?？梢钥吹絻?yōu)秀網(wǎng)頁設計作品展示，這些作品著重體現(xiàn)的是設計的藝術性，但對于電子商務網(wǎng)站來說，藝術性絕不是第一位的，易用性、經濟性、可維護性才是最終的目標。活動小結看一看——網(wǎng)頁設計欣賞網(wǎng)頁布局最基本的目的就是對信息內容版式設計的含義網(wǎng)頁版式設計是將文字、圖形圖像、色彩、動畫、視頻等網(wǎng)頁界面的傳達要素，根據(jù)特定的內容和主題，在網(wǎng)頁所限定的范圍中，運用造型元素和形式原理進行視覺的關聯(lián)與配置，從而將設計意圖以視覺形式表現(xiàn)出來。版式設計是技術和藝術的高度統(tǒng)一，在設計時要運用統(tǒng)一、對比、對稱、均衡、節(jié)奏、韻律等形式原理，構造出和諧、流暢、自然的網(wǎng)頁界面。版式設計的含義網(wǎng)頁版式設計是將文字、圖形圖像、色彩、動畫分辨率與網(wǎng)頁尺寸

顯示器的分辨率，是指在計算機屏幕的水平和垂直方向上，各含有多少像素，如分辨率是800×600的屏幕，在水平方向上有800個像素點，而垂直方向上有600個像素點。顯示器的分辨率范圍，取決于顯示器和顯卡的性能，常用的屏幕分辨率有以下幾種：640×480、800×600、1024×768、1280×1024、1152×864。瀏覽者使用什么樣的分辨率瀏覽，網(wǎng)頁設計者是不可能知道的，所以在設計的時候必須考慮分辨率的問題。由于瀏覽器本身也會占去不少空間，所以顯示在瀏覽器窗口中的網(wǎng)頁尺寸就更小了。分辨率（像素×像素）網(wǎng)頁尺寸（像素×像素）640×480620×311800×600780×4281024×7681007×6001280×10241260×868分辨率與網(wǎng)頁尺寸顯示器的分辨率，是指在計算機屏幕的水平和分辨率與網(wǎng)頁尺寸800×600分辨率下的網(wǎng)頁顯示1024×768分辨率下的網(wǎng)頁顯示分辨率越高，網(wǎng)頁尺寸越大。另外，瀏覽器的工具欄也是影響網(wǎng)頁尺寸的原因，工具欄全部顯示和工具欄全部關閉的情況下，網(wǎng)頁的尺寸是不一樣的。分辨率與網(wǎng)頁尺寸800×600分辨率下的網(wǎng)頁顯示1024×7分辨率與網(wǎng)頁尺寸

為了給網(wǎng)頁增加更多的內容，必須采用延長網(wǎng)頁的辦法，瀏覽者向下拖動網(wǎng)頁，即可瀏覽下面的內容。然而過長的網(wǎng)頁會導致過多的滾動，這會讓瀏覽者眼花繚亂。因此，如果網(wǎng)頁長度超過三屏，應該在網(wǎng)頁中加入書簽鏈接，使瀏覽者能夠自如地在長網(wǎng)頁中來回跳轉。同時出現(xiàn)縱向滾動條和橫向滾動條的網(wǎng)頁顯示

通常瀏覽者習慣使用縱向滾動條上下拖動網(wǎng)頁，但不能忍受使用向滾動條左右拖動網(wǎng)頁，左圖所示的同時出現(xiàn)縱向和橫向滾動條的情況，是應該盡量避免的。小貼士分辨率與網(wǎng)頁尺寸為了給網(wǎng)頁增加更多的內容，必須采用延長網(wǎng)網(wǎng)頁布局的一般步驟1．構思根據(jù)網(wǎng)站的內容和整體風格，設計版面布局。可以參考其他優(yōu)秀的網(wǎng)站，調用自己的各種知識儲備，特別是藝術方面的積累，并在大腦中不斷地醞釀、碰撞，往往不經意間就有閃光的思想出現(xiàn)。這時就要抓緊時間把它變成文字的東西，用筆在紙上粗略地勾畫出布局的輪廓，不要講究細節(jié)，只要有一個輪廓就行。當然也可能有多種想法，盡量都把它們畫出來，然后再進行比較，采用一種比較滿意的方案。網(wǎng)頁布局的一般步驟1．構思網(wǎng)頁布局的一般步驟2．初步填充內容在填充內容時，要考慮到瀏覽者的瀏覽習慣，通常把最重要的內容放在窗口的中心位置，次重要的內容放在網(wǎng)頁頂部，最不重要的內容放在網(wǎng)頁左邊。網(wǎng)站的標志、廣告條、菜單、導航欄等，是需要重點突出的內容，應該放在最突出、最醒目的位置，然后再考慮其它元素的放置。此布局將屏幕分為5個區(qū)，從1~5重要性依次下降：1區(qū)放置最重要的和最新的信息，如廣告；2區(qū)放置公司標志和導航欄；3區(qū)放置更新的報導；4區(qū)放置用于閱讀的常規(guī)內容；5區(qū)用于放置用戶注冊和其他鏈接。網(wǎng)頁布局的一般步驟2．初步填充內容此布局將屏幕分為5個區(qū)網(wǎng)頁布局的一般步驟3．細化在將各主要元素確定好之后，就可以考慮文字、圖像、表格等網(wǎng)頁元素的排版布局了。可以先把草案做成一個簡略的網(wǎng)頁，當然對每一種元素所占的比例也要有一個詳細的數(shù)字，以便以后修改。網(wǎng)頁布局的一般步驟3．細化商務網(wǎng)站的布局原則商務網(wǎng)站在布局上和咨詢類網(wǎng)站有著很多相似的地方。多采用兩欄或3欄的布局。兩欄或三欄的布局給人一種開放大氣的感覺，適用于信息量大的網(wǎng)站。導航多以搜索為主，橫排在頁面上部，左側為欄目的內容區(qū)，右側以產品分類為主，可以運用對比和調和，對稱與平衡，節(jié)奏與韻律以及留白等手段。建立整體的均衡狀態(tài)，產生和諧的美感。商務網(wǎng)站在配色上多以動感且有活力的顏色為主，如藍色，洋紅，橙色，和黃色等，并且整體頁面的明度較高，由于商務網(wǎng)站的產品圖片比較多，圖片本身的色彩就十分豐富，所以網(wǎng)站的配色應當盡量的簡單。商務網(wǎng)站的布局原則商務網(wǎng)站在布局上和咨詢類網(wǎng)站有著很多相商務網(wǎng)站的布局原則在構思和設計網(wǎng)站布局的過程中，需要要掌握以下幾項原則：（1）功能第一，形式第二

這里的功能也可以指內容。在制作網(wǎng)站前一定要了解瀏覽者來到網(wǎng)站的目的，比如上百度是為了搜索信息，上淘寶是為了購物，試想如果百度失去了搜索功能，淘寶失去了購物功能，那么這些網(wǎng)站對于瀏覽者還有什么意義呢？可見功能是第一位的，而布局屬于形式，形式是溝通瀏覽者與網(wǎng)站之間的橋梁，通過形式的優(yōu)化，讓瀏覽者更易于了解并使用網(wǎng)站。（2）服務用戶

無論是門戶網(wǎng)站、企業(yè)網(wǎng)站，還是盈利性、非盈利性的網(wǎng)站，直接目的都是服務用戶，如果沒有瀏覽者的訪問和支持，那么網(wǎng)站就失去了意義，可以說瀏覽者是網(wǎng)站實現(xiàn)一切目標的核心，有了用戶才有一切。通過在布局上合理優(yōu)化，可以讓用戶很清楚地快速瀏覽頁面，找到需要的信息。商務網(wǎng)站的布局原則在構思和設計網(wǎng)站布局的過程中，需要要掌握以商務網(wǎng)站的布局原則在構思和設計網(wǎng)站布局的過程中，需要要掌握以下幾項原則：（3）層次清晰、主次分明

布局可以分為兩種形式，一種是整體的布局，只繪制出頁面的大結構；一種是局部的布局，包括文字圖像之間的排列即排版。整體布局要讓瀏覽者知道哪些板塊重要，引導瀏覽者關注，而局部的排版是要在具體的板塊中實現(xiàn)內容表述的清晰、美觀。（4）突出特點

瀏覽者決定網(wǎng)站的成敗，擁有的瀏覽者越多，網(wǎng)站就越成功。如何在數(shù)不清的網(wǎng)站中脫穎而出，給瀏覽者留下深刻印象、讓瀏覽者過目難忘呢？挖掘網(wǎng)站特點是一個好的方法，個人網(wǎng)站要突出個性風格；企業(yè)網(wǎng)站要體現(xiàn)企業(yè)特點和企業(yè)理念；商務網(wǎng)站商品內容要詳實，瀏覽者的購物操作要安全、方便。商務網(wǎng)站的布局原則在構思和設計網(wǎng)站布局的過程中，需要要掌握以表格布局概述表格是常用的網(wǎng)頁布局工具，它簡單實用，易于掌握，使用表格布局對于初學者來說是一個很好的方法。使用DreamweaverCS5的表格能幫助親輕松完成網(wǎng)頁的布局。在實際應用中，通常使用表格來進行網(wǎng)頁布局，對網(wǎng)頁元素進行精確定位。例如在制作商品列表頁面時，如果不用表格而直接將商品圖像插入網(wǎng)頁中，很難精確控制圖像的位置，商品的文字描述更是難以和相應圖片對齊：表格布局概述表格是常用的網(wǎng)頁布局工具，它簡單實用，易于掌表格布局概述

在此可以使用一個2行4列的表格來對此商品列表頁面進行布局，每個單元格內嵌套一個1行2列的表格分別放置商品圖像和文字描述，如圖5-12所示，效果會好很多：使用表格布局的商品列表表格布局概述在此可以使用一個2行4列的表格來對此商品列表表格布局概述

在DreamweaverCS5中，表格分為兩種：原始表格和布局表格。原始表格和布局表格在本質上都是網(wǎng)頁表格，都是由行、列、單元格組成，在DreamweaverCS5“代碼”視圖中，它們的代碼也都是一樣的。區(qū)別在于它們是DreamweaverCS５在設計表格時所用到的兩種不同的模式或方法。

原始表格和布局表格是Dreamweaver處理表格的兩種模式，即“標準模式”和“布局模式”，二者之間可以隨意切換。在“標準模式”下為原始表格，一般是通過對話框和屬性面板對表格的尺寸、對齊、背景等屬性進行設置；在“布局模式”則為布局表格，可以由設計者手工繪制表格和單元格，其大小可以手工調整。在布局時使用布局表格更為直觀和簡單。小貼士表格布局概述在DreamweaverCS5中，表格分為表格布局的方法1．使用布局表格布局

打開“查看”菜單，選擇“表格模式”子菜單中的“布局模式”命令，或者按快捷鍵<Alt>+F6，可以切換到布局模式。在“布局模式”下，設計者可以在頁面中所見即所地手工繪制布局表格和布局單元格，從而直觀地進行網(wǎng)頁布局。在插入欄中選擇“布局”類別，運用“繪制布局表格”和“繪制布局單元格”按鈕可以繪制布局表格和布局單元格。表格布局的方法1．使用布局表格布局表格布局的方法通常要先繪制一個布局表格，然后在布局表格中繪制布局單元格，在“設計”視圖中，布局表格外框為綠色，而布局單元格外框為藍色。如果不在布局表格中繪制布局單元格，DreamweaverCS5會自動