電子商務(wù)網(wǎng)頁制作項(xiàng)目網(wǎng)頁版式設(shè)計(jì)與布局培訓(xùn)課程課件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用嵌套表格時(shí)，要注意內(nèi)層表格的寬度不能超過其外層單元格的寬度，否則會(huì)將外層單元格“撐大”而引起外層表格變形。小貼士表格布局的方法５．嵌套表格的應(yīng)用使用嵌套表格時(shí)，要注意內(nèi)項(xiàng)目總結(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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