菱形網頁設計_請問一下HTML網頁框架如何設計成不一樣的圖形例如菱形梯形三角

1、網頁布局結構有哪些？

1.整體造型

什麼是造型，造型就是創造出來的物體形象。這里是指頁面的整體形象，這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對於頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。

對於不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規則，你注意到很多ICP和政府網頁都是以矩形為整體造型；圓形帶表著柔和，團結，溫暖，安全等，許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權威，牢固，侵略等，許多大型的商業站點為顯示它的權威性常以三角形為頁面整體造型；菱形代表著平衡，協調，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網頁製作多數是接合多個圖形加以設計，在這其中某種圖形的構圖比例可能占的多一些。

2.頁面尺寸

由於頁面尺寸和顯示器大小及解析度有關系，網頁的局限性就在於你無法突破顯示器的范圍，而且因為瀏覽器也將佔去不少空間，留下給你的頁面范圍變得越來越小。一般解析度在800x600的情況下，頁面的顯示尺寸為：780x428個象素；解析度在640x480的情況下，頁面的顯示尺寸為:620X311個象素；解析度在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數據可以看出，解析度越高頁面尺寸越大。

瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那麼當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。

在網頁設計過程中，向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家除非你能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容，那麼你最好能在上面做上頁面內部連接，方便訪問者瀏覽。

3.頁頭

頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什麼內容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協調性。頁頭常放置站點名字的圖片和公司標志以及旗幟廣告。

4.文本

文本在頁面中出現都數以行或者塊(段落)出現，它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面製作技術的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經可以按照自己的要求放置到頁面的任何位置。

5.多媒體

除了文本和圖片，還有聲音，動畫，視頻等等其它媒體。雖然它們不是經常能被利用到，但隨著動態網頁的興起，它們在網頁布局上也將變得更重要。

6.頁腳

頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置製作者或者公司信息的地方。你能看到，許多製作信息都是放置在頁腳的。

7.圖片

圖片和文本是網頁的兩大構成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而你的布局思維也將體現在這里。

最開始，網頁呈現在你面前的時侯，它就好像一張白紙，它需要你任意揮灑你的設計才思。在開始的時侯，你需要明白，雖然你能控制一切你所能控制的東西，但假如你知道什麼是一種約定俗成的標准或者說大多數訪問者的瀏覽習慣，那麼你可以在此基礎上加上自己的東西。你當然也可以創造出自己的設計方案，但如果你是初學者，那麼最好明白網頁布局的基本概念。

2、80分真心懸賞html 網頁製作大作業

參考意見：首先網頁排版的基本是要懂得DIV+CSS，通過合理的利用DIV+CSS可以利於搜索引擎的抓取，個人感覺DIV+CSS作為製作網頁，美化網頁的一個重要輔助，它是很強大方便的，可以彌補table製作框架和表格時的很多不足和美工上的缺點。下面是網站製作者必須知道的排版技巧：

1、CSS盒子（CSSbox）

CSS中沒有box這個屬性。CSS的盒子（box）是由以下幾個部分組成的：內容（content）、填充（padding）、邊框（border）和邊界（margin）。盒子的內容當然是必須有的，而填充、邊框和邊界都是可選的。如果把CSS的盒子看做現實生活中的盒子，那麼內容就是盒子里裝的貨物；而填充就是怕貨物損壞而添加的泡沫或者其它抗震的東西；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能與其他物體緊挨在一起，而必須有一段空隙。當然了，CSS中的盒子是平面的。

CSS邊框（border）

border主要有以下參數：none：無邊框；hidden：隱藏邊框；dotted：點線；dashed：虛線；solid：實線邊框；double：雙線邊框；groove：3D凹槽；ridge：菱形邊框；inset：3D凹邊；outset：3D凸邊。

邊框的值將是四個，如果提供全部四個參數值，將按上－右－下－左的順序作用於四個邊框。

如果只提供一個，將用於全部的四條邊。

如果提供兩個，第一個用於上－下，第二個用於左－右。

如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。

邊框（border）和邊界（margin）主要用來定位，它們將以上下左右四個值來定義。

2、鏈接（a）

CSS鏈接有四個屬性：其中a：link、a：visited、a：hover和a：active分別對應未訪問的鏈接、已經訪問過的鏈接、滑鼠懸停的鏈接和激活的滑鼠鏈接（按下滑鼠左鍵的時候）。這幾個樣式的順序不能顛倒，否則可能造成部分樣式無法正常顯示。每個樣式里可以更改字體屬性、下劃線、背景等等。

3、CSS加入網頁方法

主要分為三種：內部樣式表、行內樣式表（內嵌樣式表）、外部樣式表。內部樣式表主要定義在<head>內；行內樣式表可直接使用style屬性定義在標簽內部；使用外部樣式表時，CSS文件與網頁文件（html）是分離開來的，分開的文件要用<linkrel="stylesheet"type="text/css"href="文件位置/你的CSS文件名。css"/>鏈接起來，這主要針對CSS樣式表較多的網頁中，特別是要與DIV結合的網頁。

4、DIV+CSS排版中如何設定文字字體、顏色、大小——使用font

font-style設定斜體，比如font-style：italic；

font-weight設定文字粗細，比如font-weight：bold；
font-size設定文字大小，比如font-size：12px；（或者9pt，不同單位顯示問題參考CSS手冊）

line-height設定行距，比如line-height：150%；

color設定文字顏色（不是font-color），比如color：red；

font-family設定字體，比如font-family："LucidaGrande"，Verdana，Lucida，Arial，Helvetica，宋體，sans-serif；（這是通用的寫法）

以上都可以寫在一行font屬性里（除了color屬性需要單獨寫）：

font：italicbold12px/150%"LucidaGrande"，Verdana，Lucida，Arial，Helvetica，宋體，sans-serif；

5、DIV+CSS排版中如何控制段落排版——使用margin，text-align

中文段落使用<p>標簽，左右（相當於縮進）、段前段後的空白，都可以用margin。比如：

01.p{
02.margin：18px6px6px18px；
03./*分別是上、右、下、左，十二點開始的順時針方向*/
04.}

文字的對齊方式用text-align，比如：

01.p{
02.text-align：center；/*居中對齊*/
03.}
04.
對齊方式還有left、right和justify（兩端對齊）

PS.談起margin，我習慣於在寫CSS的時候為所有的標簽定義margin：0；因為時而出現由於默認的margin值導致頁面排版問題，而自己找不到原因（特別注意的是ul/ol/p/dt/dd等標簽）

6、DIV+CSS排版中豎排文字——使用writing-mode

writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認的左-右、上-下，後者是上-下、右-左。比如：

01.p{
02.writing-mode：tb-rl；
03.}
04.

可以結合direction排版。

7、項目符號的問題——使用list-style

在CSS里項目符號有disc（實心圓點）、circle（空心圓圈）、square（實心方塊）、decimal（阿拉伯數字）、lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。比如設定一個列表（ul或ol）的項目符號為方塊，如：

01.li{
02.list-style：square；
03.}
04.

另外list-style還有一些值，比如可以採用一些小圖片作為項目符號，在list-style下直接寫url（「圖片地址」）就可以了。注意如果一個項目列表的左外補丁（margin-left）設為零的時候，list-style-position：outside（默認是outside）的項目符號不會顯示。可惜的是上述的項目符號似乎並不能設定大小，圓點和方塊始終是那麼點。並且不能設定垂直方向上的對齊。
希望對您有幫助
8、DIV+CSS排版中首字下沉——使用：first-letter

偽對象：first-letter配合font-size、float可以製作首字下沉效果。

比如：

p：first-letter{
padding：6px；
font-size：32pt；
float：left；
}

9、設置背景屬性

background屬性包含很多子屬性，如background-color設置背景顏色；background-image設置背景圖片；background-repeat設置背景圖片的重復設置，background-repeat：no-repeat為不重復，background-repeat：repeat-x為只水平方向重復，background-repeat：repeat-y為只垂直方向重復；background-position設置背景圖片的顯示位置，background-attachment為固定圖片在某個位置顯示。

3、進行網頁布局的一般步驟是什麼？

網頁布局一般有七個步驟如下：
1.頁面尺寸：頁面尺寸和顯示器大小及解析度有關系，網頁的局限性就在於無法突破顯示器的范圍，而且因為瀏覽器也將佔去不少空間，留下的頁面范圍就變得越來越小。一般，解析度在1024×768的情況下，頁面的顯示尺寸為1007×600；解析度在800×600的情況下，頁面的顯示尺寸為780×428個象素；解析度在640×480的情況下，頁面的顯示尺寸則為620×311個象素。從以上數據可以看出，解析度越高頁面尺寸越

大。瀏覽器的工具欄也是影響頁面尺寸的原因，目前的瀏覽器的工具欄都可以取消或者增加，那麼當顯示全部的工具欄和關閉全部工具欄時，頁面的尺寸是不一樣的。
在網頁設計過程中，向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。要提醒家。除非能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容，那麼最好能在上面做上頁面內部連接，以方便訪者瀏覽。
2.整體造型：什麼是造型，造型就是創造出來的物體形象。頁面的整體形象，應該是一個整體，圖形與文本的接合應該層疊有序，有機統一。雖然，顯示器和瀏覽器都是矩形，但對於頁面的造型，可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。
對於不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規則，注意到很多ICP和政府網頁都是以矩形為整體造型；圓形代表著柔和，團結，溫暖，安全等，許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權威，牢固，侵略等，許多大型的商業站點為顯示它的權威性常以三角形為頁面整體造型；菱形則代表著平衡，協調，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網頁製作多數是結合多個形狀加以設計，其中又以某種形狀為主。
3.頁頭：頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什麼內容。頁頭是整個頁面設計的關鍵，它將涉及到下面的更多設計和整個頁面的協調性。頁頭常放置站點名字的圖片或公司標志以及旗幟廣告等。
4.文本：文本在頁面中多數以「行」或者「塊」(段落)出現，它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面製作技術的局限，文本放置位置的靈活性非常小，而隨著DHTML的興起，文本已經可以按照自己的要求放置到頁面的任何位置。
5.頁腳：頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳則是放置製作者或者公司信息的地方。能看到，許多此類信息都是放置在頁腳的。
6.圖片：圖片和文本是網頁的兩大構成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而布局思維也將體現在這里。
7.多媒體：除了文本和圖片，還有聲音，動畫，視頻等等其它媒體。雖然不是經常能被利用到，但隨著動態網頁的興起，它們在網頁布局上也變得更重要起來。

4、網頁設計基礎問題。。

我了個去啊，您這是一點不會吧?你確定這樣你要做個人網站。。。還不如直接找個人幫你做掉算了，真是，，，，讓我想到的是考試答卷啊。您這個╮(╯▽╰)╭

1、試描述建設個人網站的基本步驟。

前期准備工作，你要有一個域名和域名空間，好了不要問我什麼是域名，域名空間就是你文件的存放地。

之後，設計-網頁基礎排版和圖像處理；靜態頁面-html+css靜態頁面編輯；程序-把做好的靜態頁面嵌套到程序裡面，你就可以通過後台進行管理了。

最後調試，測試網站鏈接等無問題後上傳網站到空間，正式發布運行。

2為什麼製作網頁時要遵循使用標准字體、標准色彩的原則？

首先網站是不支持除標准字體之外的字體的，除非你使用的字體恰好瀏覽者的字體庫也有這種字體否則都會變成「宋體」，所以使用標准字體之外的字體也就毫無意義了。

當然有一種叫做@font-face的字體，可以將外部字體載入到網頁，但是他有一個致命的缺陷——針對中文字體相當的不完善。而且使用這種方法你要將字體轉換成.eot、.svg、.ttf、.woff四種格式字體，並在樣式中定義字比如：

@font-face {
    font-family: '953-cai978regular';
    src: url('../font/953-cai978-webfont.eot');
    src: url('../font/953-cai978-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/953-cai978-webfont.woff2') format('woff2'),
         url('../font/953-cai978-webfont.woff') format('woff'),
         url('../font/953-cai978-webfont.ttf') format('truetype'),
         url('../font/953-cai978-webfont.svg#953-cai978regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

至於顏色，你可以查下相關web安全色的問題，我就不多給你解釋了。

3使用表格和框架布局網頁有什麼不同之處？試描述二者結合布局網頁的優勢

表格和框架的話，我不想說太多了，這個根本是本質上的區別，沒啥好解釋的，就簡單說下方便你理解就算了。

表格的話你可以理解為Excel差不多，就是在html頁面上建立一個table表格，把需要的內容放在相應的單元格就可以，不過html中的表格可以做布局用（現在很少有人用了）。

框架的話，不建議你去研究，這個基本上在網頁製作中很時候用到了，不過像現成的QQ客服代碼和API地圖代碼插入就是框架結構。

這個兩個你都不需要知道他們的優勢，因為基本不用這兩種進行布局。現在大多數是採用div+css的布局，而且現在html5+css3的技術很強大了。

另外框架有個致命缺點就是會出現內部滾動條，你要是不明白我說的是什麼意思，你自己做一個頁面只用框架並且把高度和寬度撐開你就知道了，太影響美觀了有木有啊o(>﹏<)o

4回答關於文本和圖像的使用的下列問題：
（1）如何輸入無行距回車和連續多個空格？

不是很清楚你說的無行距回車是啥，如果是像word一樣的換行的話只要一個<br />就搞定了，單個空格是   多個空格我們基本不用，大多數採用 margin/padding 直接控制幾個像素的距離。

（2）什麼是替換文本，替換文本在圖片正常瀏覽和非正常瀏覽時如何表現？

替換文本就是字面的意思，比如我在當前位置插入一個圖片，但是由於不明原因它不能顯示了（360急速模式下默認是一個裂圖，你懂的），現在替換文本就會顯示出來了。也就是說我設置了替換文本是「你看不到我」，那麼當圖片不顯示的時候你就看到這句話了（前面說了360顯示裂圖，IE是這樣的，你要是一定要顯示這句話就要牽扯到瀏覽器默認格式的問題了，現在先不和你說有點小復雜）。

如果圖片正常情況下你是看不到替換文本。

值得注意的是替換文本是屬性是alt ，瀏覽器本身具有糾錯性很多人用alt顯示提示信息，其實這個不是title才是，alt的作用是替換文本。不過現行的主流瀏覽器都默認支持這種錯誤。

5按照鏈接源端，網頁中的超鏈接可以劃分為哪幾種？按照鏈接目的端又可以分為哪幾
種？

額~這個問題我也不是很清楚，我不明白你說的源端是什麼。

你可以自己在w3c school上關於a標簽這節內容上看看。

http://www.w3school.com.cn/html/html_links.asp

（你要是想系統的學html也可以上w3c school 上學，挺全面的）

6什麼是圖像熱點？如何創建圖像熱點鏈接？

熱的就是。。。專業解釋是啥我也忘了。就你能聽懂的方法說吧，網頁上的文字和圖形都可以創建鏈接，問題來了，網頁上的圖形不管你做成啥樣也就只能是正方形或是矩形（flash做的不算），那如果我想要一個菱形或是圓形的鏈接怎麼辦？熱點就有用了。

你要是不用軟體想自己創建一個熱點鏈接就算了，省省力氣吧，語法倒是不難。

但是，你看那x1、y1的了嗎，算坐標算死了，還不一定找的准。使用軟體直接操作，語法也不用你寫，很方便的。

7使用CSS樣式有哪些優勢

css樣式就是把定義文本、圖像、布局等一系列的代碼全部放在一個統一的「附加樣式表」里，這樣整個html文檔看起來會很乾凈。

而且，有些樣式是重復調用的，如果有一個統一的樣式表只要該一個class即可，就不需要去找每一行的內嵌樣式，省時省力。

所以css優勢就是：增強代碼可讀性、便於修改。

8什麼是內部樣式表，什麼是外部樣式表？試舉例說明如何使用外部樣式

好吧，這個其實和上面是一樣的，看下面代碼，插入css樣式的三種方式：

9行為是由事件和動作組成的。什麼是事件？什麼是動作？它們之間有什麼關系？試以一個行為為例說明

這個不想理你，你想知知道的太寬了，現在和你說了你也理解不了。

這個事件的問題你還是放在以後有時間在考慮了解吧，太簡單的沒用，難的你現在也做不到。以後你要是想學JS的時候用到的會比較多。

不過現在JS很多開源代碼給你抄，你不會也沒關系，也可以做出你想要的效果。

不要一下想把所以的東西都學會這是不科學的，o(╯□╰)o 我也是學了有1年不到才開始不會出現兼容問題的。

5、懸賞html網頁製作

說下要求吧，看能不能做

137858115

6、請問一下HTML網頁框架如何設計成不一樣的圖形？例如菱形，梯形，三角

用photoshop設計畫圖

7、有哪些炫酷好玩兒的網頁導航設計

Jova

Jova的網站設計非常清爽，導航欄的設計均衡並且結構妥帖

設計師使用細線構成的線框柵格來構建網站導航，經典的黑白配色，加上清晰銳利的英文字體，構建出優雅迷人的外觀，在柔和的背影映襯之下，給人深刻的印象。

Beloesuhoe

Beloesuhoe 的設計團隊巧妙地使用布景構建出了一個獨一無二的網頁導航，非常抓人眼球。這個網站乍一看好象就是一個背景圖，但是實際上，網頁上脈動的小紅點會提示你導航的存在，它並不是看起來那麼簡單。將滑鼠移動到小紅點上，你會發現這些導航點是可交互的，並且將你引導到特定的頁面。這種「沉浸式」的導航欄設計是個非常有趣的解決方案，可拓展的空間也相當大。

First Person

First Person 整站使用了單頁滾動設計，並且通過左上方的菜單欄來進行導航引導。但是這並不是它的突出之處，當你在首頁向下滾動的時候，能夠看到一個精心製作的3D場景，整個場景會隨著白天黑夜變換主題，並且當你滑鼠移動到3D場景的特定點上的時候，能夠激活組件，進行交互，瀏覽信息，絕對別出心裁。雖然整站導航不算突出，但是這個3D場景的導航設計，簡直帥酷爆表。

Mint Design Company

說 Mint Design Company 的導航設計精美絕倫完全不是過譽。設計師幾乎是用漂亮的手繪插畫完成了整個網頁的設計，導航欄所使用的手繪圖標更是精緻，滑鼠移動到導航欄圖標處會有好玩兒的動效出現，最關鍵的是每個動效都不盡相同。

Vive Latino

Viva Latino的設計團隊充分利用塗鴉的獨特效果，讓整著陸頁在同類設計中脫穎而出。干凈的單色頁面上，漂亮的手繪排版設計和獨具個性的小人錯落混拍在一起，營造出節日的氣氛，最關鍵的是，這樣的設計也創造出獨具一格的導航模式。

Pete Nottage

這個名為Pete Nottage 的網站以五彩繽紛的插畫而著稱，也使得整個網站充滿了創造性和積極的氛圍。這些扁平風的插畫以城市場景為主題，並且還是作為網站導航而存在

為了讓這個導航欄更加好玩，網站的設計師和開發者將許多動態的元素加入到插畫中，比如移動的汽車和遊艇，那些看似靜態的景物其實也是可交互的，當你點擊它們的時候，有些建築會抖動甚至消失!這種引人入勝的設計賦予了網站獨特的氣質，讓人流連忘返樂此不疲。

Mathilde Jacon

Mathilde Jacon 的這個個人作品展示頁使用了更加獨特的導航模式：嵌套環形可互動式導航欄，環形的每一段都會導向一個作品。原來導航還可以這樣做啊!

Moira Young

Moira Young 的網站採用了一套自然風的主題，導航設計則以優雅的輻射狀的閃光來呈現，當你滑鼠移到這些微光之上，導航內容便會呈現，漂亮而微妙。

Bancolombia

和許多之前的網站導航設計思路相近，漂亮的插畫和動態視覺元素共同構建起了它的導航欄。網站唯一與時代脫節的地方在於，它採用了Flash來實現這些功能，而非HTML5。

Nat-Ant

值得一提的是，使用極簡設計風其實也可以作出別出心裁的導航欄的。正如你所看到，網頁的著陸頁非常干凈，背景大量留白，幾個控制項散落在頁面上用作導航，不同尋常。

Love Carmen Rose

Love Carmen Rose 的網頁設計也個性十足，精雕細琢的背景圖其實承載著它獨有的導航模式，雖然看起來不太顯眼，但是復雜的導航和背景圖也足夠它脫穎而出了，不是么?

Orillo

用戶打開 Orillo 網站的時候，能看到低調沉穩的背景上用簡約線條勾勒出來的控制中心。用戶可以藉助這個獨特的導航欄做很多事情，唯一可惜的是它僅能在桌面端瀏覽器上呈現，移動端頁面則使用的是另外一個相對簡單的版本。

OK Kid

OK Kid的網頁充分運用了視頻背景的特性來設計它們的基礎導航體系。設計團隊採用視覺優先的設計原則，最終結果也並沒有令人失望。

The Colors of Motion

網頁採用運動的色彩來呈現經典的美國精神，帶你開始一段旅程。結合影片劇情，設計團隊展現了一個原創而吸引人的導航設計，雖然沒有任何標識，但是那些細細的條紋會帶你走完這個旅程

HelloNicolas

從你打開這個網頁的第一秒開始，頁面所展示的作品就會吸引住你的全部注意力。網站的視覺設計非常大膽，整體布局導航通過相對較寬的可交互區域來展現，每一塊完成不同的工作。

Grimouville

想不想通過Grimouville 開始一段短暫而難忘的旅程?打開這個網站就可以了。網站中那些有趣的互動元素能讓你在城市的大街小巷中實現這個夢想。

Leidgens Piscines

網站的著陸頁令人難以忘懷：壯觀的視頻背景和風格化明顯的導航欄，這些設計不僅讓你愉悅，還能更為高效地探索網站。雅緻的菱形導航欄中，每個區塊包含著不同的功能和相應的短片。

Soppo

基於柵格的導航系統配合可愛的圖片營造出網站的整體氛圍，純色和圖片的錯落排布，不同區塊中獨特的效果，會讓你記住這個網站的。

Visit Brazil

這是一個真正意義上的概念網站。通過有趣的交互，你可以在這個網站知道關於巴西這個國家許多有趣的故事。

Alexandru Nastase

網站的設計師巧妙的利用排版和簡約的外觀，呈現出了網站有趣的氛圍。密集而大膽的標題周圍，圍繞著相對較小的文字導航，塑造出獨特的形式感。

8、網頁怎麼製作

日誌寫日誌 | 管理日誌編輯 | 刪除怎樣製作網頁
翱翔戰鷹發布於： 2007-12-15 18:40【精】做第一個網站
發表時間：2005年10月7日 16時39分20秒評論/閱讀(43/248)
這一節就來說說一個網站是如何做出來的。在你開始想作網站到付諸於實施，有一個准備的過程比較重要。因為准備好了，作起來就會得心應手，作到心中有數。一般來說，作網站需要明白你要作什麼樣的網站。可別告訴我，你要作綜合門戶，雖說不是不行，但也不是現在能辦到的事情。所以，花點時間想想自己想作什麼樣的網站。
想好了要作什麼樣的網站後，就要開始准備相關的材料了，比如文章，圖片，視頻等等，越多越好，這樣選擇范圍也大的多。為什麼要做這一步呢？我想道理很明顯，准備的越充足，做起事來也越順利。目前來說，我們能找到的材料除自己的少量以外，多數以轉載為多，比如看者網路上一篇文章不錯，轉載過來為己所用。雖說，這網路復制是很容易的，但千萬別忘記版權問題。當然，如果你僅僅因為是個人興趣並且聲明了轉載的地方，那就問題不大了。不過最好能和擁有者打個招呼，一般都是會同意的。
這材料也准備好了，接下來該選擇好的工具了。當然，這工具的選擇是很多的。作為初學者可以使用FrontPage Express，雖說它是FrontPage的簡化版，但功能一樣不少，而且還是免費的。再說，這網頁製作都有互通性，學會了FrontPage Express的使用，其它也大同小異。
工具也選好了，該規劃網站以及設計頁面的布局了。一個網站是一個整體，它所包含的網頁都是互相鏈接起來的。從每一個頁面都能跳轉到另一個頁面。我們知道，這作網站就象辦一份雜志，雜志就該有標題，講明這雜志是什麼名字；雜志有目錄，讓讀者可以選擇感興趣的內容直接去讀；雜志還有出版者的信息。這些和作網站差不多，一個網站要包含以下內容
1.網站標題；
2.網站目錄，又稱導航欄；
3.網站首頁，引導訪問者瀏覽你的網站；
4.網站製作者的信息。
如圖65.jpg顯示了一個網站首頁的組成。
這里有個概念要給大家說清楚，首頁其實有兩種說法：其一，伺服器默認的首頁，文件名稱一般是：index.htm，index.html或者default.htm。伺服器是裝載你的網站的地方，它們能24小時都連接在網路上。網站都有一個地址，比如：http://www.itiantao.com/。那麼當你在瀏覽器敲入這個地址的時侯，伺服器會自動尋找上面提到的三個文件，至於是那一個文件根據伺服器要求會有不同；其二，網站首頁，你的網站應該有個首頁來引導訪問者瀏覽站點，那麼這個首頁的文件名可以自行指定。比如你為網站指定首頁名為:zgr.htm，那麼當你要讓別人訪問的時侯，就得告訴它地址是：http://www.itiantao.com/index.html。目前我們製作網站的首頁，都是合而為一了，即網站首頁就是伺服器首首頁。
首頁的製作很重要，而且它的樣式應該和其它頁面有所區別。首頁上放置的都是最吸引人的東西，這樣訪問者才有興趣留下來訪問網站其它頁面。至於首頁，沒有一個什麼規定的樣式，以能說明問題最根本。一般首頁不要超過三屏，這樣免得讓訪問者看起來很累人。
除了首頁，其它的都是與首頁相連接的分頁了。分頁的內容是從首頁定義而來，比如你有個欄目是自我介紹，那麼必定有個分頁是關於你自己介紹的內容，那麼訪問者單擊這一頁後，就能跳轉到該分頁來。分頁必須有個鏈接指向首頁，這樣，無論訪問者如何看你的網站，它都能很容易的回到網站的首頁。
這里有個建議個大家，就是在開始製作網站和網頁的時侯，最好能畫個圖出來，把網站的結構和網頁的布局都畫出來，這樣作起來就心中有數了。

如果你的網站最開始就構思的很復雜，可能真正作起來就很費時間，每一個鏈接都不能出錯了，不然改起來真是很麻煩。另外，大家在作網站的時侯，應該把所有網頁，圖片，聲音文件，視頻文件都放置到一個目錄里，這樣當你以後發布網站的時侯，就不會顯示不出內容了。比如，你的網頁全部放在A目錄里，但有一張圖片卻放置在B目錄，當你發布A目錄網頁後，B目錄的圖片就不會顯示出來了。因為伺服器沒有B目錄。

經過你的努力，網站有了雛形了。接下來就該學學如何上傳網頁，以及維護更新和宣傳網站了。

【精】網頁布局設計基礎
發表時間：2005年10月7日 16時50分16秒評論/閱讀(17/228)
正如你現在所看到的一樣，網頁的布局設計變得越來越重要。訪問者不願意再看到只注重內容的站點。雖然內容很重要，但只有當網頁布局和網頁內容成功接合時，這種網頁或者說站點才是受人喜歡的。取任何一面你都無法留住太過"挑剔"的訪問者。
一.網頁布局的基本概念
最開始，網頁呈現在你面前的時侯，它就好像一張白紙，它需要你任意揮灑你的設計才思。在開始的時侯，你需要明白，雖然你能控制一切你所能控制的東西，但假如你知道什麼是一種約定俗成的標准或者說大多數訪問者的瀏覽習慣，那麼你可以在此基礎上加上自己的東西。你當然也可以創造出自己的設計方案，但如果你是初學者，那麼最好明白網頁布局的基本概念。
1.頁面尺寸：
如果你擁有更大的顯示器，比如21英寸，那麼你能在屏幕上看到更多的網頁內容。但事實上不是人人都擁有這樣的顯示器。頁面尺寸和顯示器大小及解析度有關系，網頁的局限性就在於你無法突破顯示器的范圍，而且因為瀏覽器也將佔去不少空間，留下給你的頁面范圍變得越來越小。一般解析度在800x600的情況下，頁面的顯示尺寸為：780x428個象素；解析度在640x480的情況下，頁面的顯示尺寸為:620X311個象素；解析度在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數據可以看出，解析度越高頁面尺寸越大。
瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那麼當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。
在網頁設計過程中，向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家除非你能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容，那麼你最好能在上面做上頁面內部連接，方便訪問者瀏覽。
2.整體造型：
什麼是造型，造型就是創造出來的物體形象。這里是指頁面的整體形象，這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對於頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。
對於不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規則，你注意到很多ICP和政府網頁都是以矩形為整體造型；圓形帶表著柔和，團結，溫暖，安全等，許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權威，牢固，侵略等，許多大型的商業站點為顯示它的權威性常以三角形為頁面整體造型；菱形代表著平衡，協調，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網頁製作多數是接合多個圖形加以設計，在這其中某種圖形的構圖比例可能占的多一些。
3.頁頭：
頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什麼內容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協調性。頁頭常放置站點名字的圖片和公司標志以及旗幟廣告。
4.文本：
文本在頁面中出現都數以行或者塊(段落)出現，它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面製作技術的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經可以按照自己的要求放置到頁面的任何位置。
5.頁腳：
頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置製作者或者公司信息的地方。你能看到，許多製作信息都是放置在頁腳的。
6.圖片
圖片和文本是網頁的兩大構成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而你的布局思維也將體現在這里。
7.多媒體
除了文本和圖片，還有聲音，動畫，視頻等等其它媒體。雖然它們不是經常能被利用到，但隨著動態網頁的興起，它們在網頁布局上也將變得更重要。
二.網頁布局的方法
網頁布局的方法有兩種，第一種為紙上布局；第二種為軟體布局。下面分別加以介紹：
1.紙上布局法
許多網頁製作者不喜歡先畫出頁面布局的草圖，而是直接在網頁設計器里邊設計布局邊加內容。這種不打草稿的方法不能讓你設計出優秀的網頁來。所以在開始製作網頁時，要先在紙上畫出你頁面的布局草圖來。
准備一若干張白紙和一隻鉛筆，你要設計一個時尚站點。
*尺寸選擇：
目前一般800X600的解析度為約定俗成的瀏覽模式。所以為了照顧大多數訪問者，你頁面的尺寸以800X600的解析度為准。
*造型的選擇：
先在白紙上畫出象徵瀏覽器窗口的矩形，這個矩形就是你布局的范圍了。選擇一個形狀作為整個頁面的主題造型，我們選擇圓形，因為它代表者柔和，和時尚流行比較相稱，然後在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會發現很亂。其實，如果你一開始就想設計出一個完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點，你不要擔心你設計的布局是否能夠實現。事實上，只要你能想到的布局都能靠現今的HTML技術實現。(圖1,2)
考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個矩形(也可以是一條線段)。
　*增加頁頭：
圖3是我們從圖1和2得到的布局造型，那麼我們該增加頁頭了。一般頁頭都是位於頁面頂部，所以我們為圖3增加了一個頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個矩形頁頭並讓頁頭相交與左邊的弧線。
*增加文本：
頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯，所以文本放置在空白部分不會因為左邊的弧線而顯得不協調。
圖片是美化頁面和說明內容必須的媒體。在這里把圖片加入到適當的地方。
經過以上的幾個步驟，一個時尚頁面的大概布局就出現了。當然，它不是最後的結果，而是你以後製作時的重要參考依據。
2.軟體布局法
如果你不喜歡用紙來畫出你的布局意圖，那麼你還可以利用軟體來完成這些工作。這個軟體就是Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網頁布局上更顯得心應手。不像用紙來設計布局，利用Photoshop可以方便的使用顏色，使用圖形，並且可以利用層的功能設計出用紙張無法實現的布局意念。
　三.網頁布局的技術
1.層疊樣式表布局
在新的HTML4.0標准中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS對於初學者來說顯得有點復雜，但它的確是一個好的布局方法。你曾經無法實現的想法利用CSS都能實現。目前在許多站點上，層疊樣式表的運用是一個站點優秀的體現。你可以在網上找到許多關於CSS的介紹和使用方法。
2.表格布局
表格布局好像已經成為一個標准，隨便瀏覽一個站點，它們一定是用表格布局的。表格布局的優勢在於它能對不同對象加以處理，而又不用擔心不同對象之間的影響。而且表格在定點陣圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響。對於表格布局，你可以隨便找一個站點的首頁，然後保存為HTML文件，利用網頁編輯工具打開它(要所見即所得的軟體)，你會看到這個頁面是如何利用表格的。
3.框架布局
不知道什麼原故，框架結構的頁面開始被許多人不喜歡，可能是因為它的兼容性。但從布局上考慮，框架結構不失為一個好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。
結尾
我今天來介紹的布局指南並不是全部的網頁布局技術，從某種意義上來說，我想引導你在製作網頁的時侯，怎樣把圖片和文本放置的恰到好處，而且如何擁有一個跳越的設計思維。好，就到這里。
【精】淺談個人主頁之網頁優化
發表時間：2005年10月7日 16時51分55秒評論/閱讀(58/234)
網頁做的是否成功，除了要考慮外觀設計，內容組織外，最重要的是當一位訪客瀏覽你的網頁時，能快速地看到內容，而不是等待，等待，再等待。
個人主頁安家多在提供該項服務的伺服器上，所以在硬體上我們選擇的餘地不多，但我們可以在軟體上下功夫，提高網頁的下載速度，而今天我就從以下幾個方面來談談網頁的優化問題。
一.不該要的就不要
我們在製作個人網頁時，都想提供最多、最新的內容給訪客，因為這是吸引他們的有力工具。但貪得無厭會使自己的網頁過於臃腫，別人等待半天，什麼也沒有看到，所以我們在製作網頁時要記住，不該要的東西就不要。這並不是一個技巧，但往往被人忽略。
在一些網頁上聚集著很多小圖標，也就是廣告交換LOGO，大小一般為88x31，容量一般為3K在右，在有些人看來，這並不會影響下載的速度，因為它們的容量都很小。下載一個88x31的LOGO標准時間需要1秒鍾，如果伺服器速度有問題，很可能要2秒以上，假使你網頁上有5個這樣的LOGO，那麼下載完全需要5-10秒，你覺得很短嗎，的確是，但訪客的容忍限度是20-30秒，也就是說如果在這段時間里，還沒有看到網頁或者網頁的全部內容，那麼訪客很可能離去。還有一個問題是，往往有些網友放置了一些"毫無意義"的LOGO，比如IE4.0下載圖標，很少有人會點擊它。除非你的網頁沒有LOGO可用了，不然就刪除這些LOGO。不管是網頁製作者還是訪問者，都會有這樣的經驗，不會完全等到頁面所有內容下載完後，去選擇鏈接單擊，你設計的絢麗多姿的內容，可能別人還沒有看就從他視覺里消失了，而如果有同樣的選擇，訪客會去一連接就能出現內容的網頁，而不是去你那等待。
我知道，大家都喜歡用GIF動畫來裝飾網頁，它的確很吸引人，但我們在選擇時，是否能確定必須用GIF動畫，如果答否，那麼就選擇靜止的圖片，因為它的容量要小得多。同樣的88x31的LOGO，GIF動畫的容量有5K，而靜止LOGO的只有3K。雖然只有2K之差，但多起來，就會影響下載的速度，所以，如果有些不是必須的，就選擇最小的。同樣我們在選擇是否用JavaScript時，也要如此問自己，是否需要。總之，在我們製作網頁時，要有"積少成多"的意識，也就是說，小的東西多起來就會變成了大的，不管是一幅圖片或者一個按鈕，都要把它設計到最小，這樣節約下來的下載時間是很可觀的，而不要把任何沒有經過處理的對象放置到網頁上，這點很重要。
二.圖形的問題
圖形是網頁必須要的，一副圖片完全可以表達大量文字所代表的意義，但圖片也是影響網頁下載速度的罪魁禍首。我們在製作網頁時，GIF與JPEG是打交道最多圖片格式，而在使用它們也有一些技巧。首先來簡單了解一下這兩種圖片格式的性質。GIF圖片格式顏色允許最大256色，而JPEG允許16萬色，而GIF支持動畫格式，JPEG不支持，但它們都可以交織顯示，也就是從模糊到清楚。了解了兩種格式的性質後，在使用它們時，該怎樣選擇呢，專家有這樣的建議，當你要顯示照片或者要圖片具有某種水印效果，模糊效果，那麼選擇JPEG，如果你需要動畫、黑白圖片、透明圖片，那麼就選擇GIF。
GIF圖片格式顏色最大允許256色，但在選擇GIF調色板時，可以設置256顏色以下的顏色，比如188，204等，大家如果使用Photoshop這樣的圖片處理軟體就會發現在保存GIF圖片時，會讓你選擇保存的顏色數，一般來說，你可以選擇256色以下的，因為它可以減少圖片容量。
GIF圖片的優勢在於顯示小圖標時，比如公司圖標，廣告圖標，也就是為什麼現在廣告LOGO都是GIF圖片格式。而在與JPEG圖片相比較，當它們顯示同一副圖片時，會發現GIF圖片格式和網頁背景融合的更好，而JPEG圖片會發現四周的暈邊，而且GIF可以處理成透明圖片，和網頁背景有更好的融合。但如果處理大的圖片，會發現GIF圖片的大小比保存至JPEG格式的圖片要大的多，所以，處理大的圖片，最好用JPEG格式，它有高的壓縮比。
我們在使用這兩種圖片格式時，要注意圖片的尺寸，選擇過大的圖片尺寸，會使得網頁下載速度過慢，增加WEB伺服器的負荷，目前網路速度慢的原因，有很大原因是訪客等待圖片的下載，所以，對於圖片，要選擇更合適的尺寸。而且在製作網頁過程中，要給圖片指定高度和寬度，因為有時候我們會把本來尺寸很大的圖片設置成小尺寸的圖片，雖然圖片本身沒有改變，但指定小尺寸後，就會減少下載時間。也可以在原圖片下載之前，指定一個小容量的圖片，因為小容量的圖片會先顯示，然後在顯示原來的圖片，如果你使用FrontPage98工具，那麼可以在圖片設置欄里設置，你也可以按以下HTML代碼設置:<IMGSRC="1.gif"LOWSRC="2.gif">
這時候，2.gif會先1.gif顯示。
目前在網路上又出現了一種圖片格式-PNG，它具有以上兩種圖片格式的優點，無失真，高壓縮，透明支持，真彩色，但因為現在的瀏覽器對它的支持不夠，所以使用的人不是很多，但以後新的瀏覽器會支持它。
圖片問題是網頁製作中最復雜的問題，我們在利用圖片時，要精，而不要隨便就把沒有經過處理的圖片放到網頁上。
三.網頁設計
在瀏覽網頁時，一般要經過：下載、完善、可視三個視覺步驟，而下載是最關鍵的一個步驟。如果連接半天還沒有返回頁面，那麼訪客會離開，所以，提高下載速度是網頁優化的關鍵。在設計網頁時，會利用許多老的或新的技術，但當你使用某一項技術時，有可能因為瀏覽器的兼容問題，會使得網頁下載變得非常緩慢。有時，只出現了網頁背景，內容卻遲遲不出現，這就是因為瀏覽器在解釋網頁文件時，出現了問題，所以，在網頁設計上一定要注意。
目前利用表格製作網頁成為流行，因為它具有完備的布局功能，可以指定文檔或圖片在某一個地方出現。但在利用表格過程中，要注意一些問題，筆者利用FrontPage98表格功能做的一個網頁，在IE4瀏覽器可以非常快速的瀏覽，但利用網景瀏覽器時，發現背景出現了而內容遲遲沒有露面，經過分析發現是因為表格的緣故。因為表格嵌套過深，也就是在一個表格里，還包含數個其它表格，我們知道，當瀏覽器遇到表格時，會首先解釋最里層的表格，然後再解釋外層的表格，順序是從里到外，最後再解釋表格里含有的內容，也就是說，當你使用一個大的表格，而其中又包含其它表格時，瀏覽器的解釋將變得十分麻煩，它將一層層解釋表格，然後瀏覽器本身含有不兼容的的問題，就會照成頁面內容沒有出現，但數據還在傳輸。如果要避免這個問題，專家建議不嵌套超過三層的表格。你也可以把網頁分成幾個表格進行設計，比如標題導航一個表格，內容目錄一個表格，然後製作信息一個表格，這樣做可以使得瀏覽器分開解釋表格，它可以解釋完一個表格就出現表格里的內容，然後再解釋下一個表格。
網頁製作技術發展十分迅速，但相關的標准卻遲遲定不下來，這當然主要是兩大瀏覽器公司為各自利益相爭的緣故，使得瀏覽器的兼容性大大降低，往往在某一個瀏覽器瀏覽十分好，但使用另一家瀏覽器時，頁面是一團糟，所以，當我們製作完網頁後，要進行測試，下面就談談這個問題。
四.測試網站
當完成網頁的製作，測試網頁是必須的，因為你可以首先發現網頁的問題，比如下載的速度。
1.確定自己的想法
我們製作網頁，會有自己的想法，比如提供給別人什麼。那麼，我們就要確定自己的某些想法，自己能忍受的網頁下載速度是多少秒，10秒，還是30秒，再看看你的網頁是否達到了這個標准，如果沒有達到，分析一下，網頁上什麼影響了下載速度，你可以試著取消某一個圖片，再看看，當然，這些測試不能在本地，而要把網頁上載到伺服器上。
2.人工測試網站
要測試網站，首先把網頁上載到伺服器上，然後打開瀏覽器，把緩沖里的資料全部刪除。因為如果沒有刪除，瀏覽器請求頁面時，會讀取緩沖里已含有的內容。你也要選取所有的功能支持，比如JavaScript，CSS。然後在瀏覽器里填寫請求的URL，如果你有一個跑表或者某一個能夠計秒的工具，在請求的開始，開始計秒，等到出現了頁面的整體框架時，停止計秒，看看下載的時間。這時候，你並沒有獲得網頁的全部內容，所以第二次測試，將是看看下載完全的網頁，所需要的時間，重復以上所有過程，而到網頁的內容全部下載後，停止計秒，然後再看看所花的時間，經過以上的步驟，你就會對自己網頁的下載時間做到心中有數了。當然，還有些問題要注意，比如測試網站的時間，晚間就較快，而白天就較慢；還有伺服器的問題，不同的瀏覽器，不同的數據機，測試網站時都要考慮，你也可以在不同條件下進行測試。當然，這些測試只能取得一個附合大多數訪客的標准，要附合每一位訪客的要求，那是非常困難的。
3.第三方測試
是否覺得人工測試很麻煩，那麼你可以試試第三方測試，也就是請你的朋友測試，詢問他們的感覺。當然，最好選擇不同地域的朋友一起來測試，讓他們回復你，告訴你請求網頁時的時間等等，因為，做網頁就是給人訪問的，所以訪客就是權威。
你可以試試某些網站提供的服務，只需在網站上填寫一張表格，然後就可以靜候網站對你的評價了，如果填寫了自己的電子郵件地址，那麼它會把測試結果發送到郵箱里。而該測試的內容也是豐富的，比如HTML代碼是否精煉，GIF及JPEG的圖片使用是否有效率等等，的確值得一試，但我們也不能完全相信，因為這種服務多數都在國外，不可避免的產生某些問題。如果需要，可以連接至某些網站進行測試:
文章寫到這里，我也知道這並不是提高網頁訪問速度技術的全部，因為，要提高自己網頁的訪問速度需要自己在實踐中去總結，去不停地修改。如果你從來都沒有重視過這個問題，那麼現在開始去注意它，因為自己發現缺陷，總比別人發現好，你說呢？

9、怎樣讓你的網站令人眼前一亮？

網站設計怎樣才吸引人

網站，對於我們這些互聯網從業者來說，是一個再熟悉不過的詞眼。當然對於絕大部分普通民眾來說，提起網站，大家可能會首先想到百度、淘寶等知名度較高的網站。為什麼大家首先都會想到這些網站呢?是它們網站設計得很漂亮嗎?我想不全是這樣的，百度作為中國搜索領域老大、淘寶作為中國最大的購物交易平台，它們各有各值得我們關注的地方。然而數字立方今天要討論的話題卻不是這些他們引以自豪的地方，而是著重分析如何建設網站來給人眼前一亮的感覺。

先看看下面兩個網站的對比

網站建設網頁設計

(圖一)

網站建設網頁設計

(圖二)

同樣為工程建設網站，我相信99%的人都會第一眼被國外版的網站所吸引。為什麼會出現這種現象呢?

數字立方總結主要有以下幾點：

1.頁面布局、框架選擇

時下HTML5已成為網站建設流行趨勢，響應式的網站越來越多，頁面布局樣式也層出不窮。我們在建設網站的時候要多多參考其他優秀作品案例，不要將思維停留在十年以前甚至更遠。但是要基於一個原則，通常來說頁面越簡潔越好。不要鋪天蓋地的特效;不要繁瑣的內容，越簡潔，越給人一種清新舒服之感。另外，對於頁面尺寸：頁面尺寸和顯示器大小及解析度有關系，網頁的局限性就在於你無法突破顯示器的范圍，而且因為瀏覽器也將佔去不少空間，留下給你的頁面范圍就變得越來越小。一般，解析度在1024768的情況下，頁面的顯示尺寸為1008600;解析度在800600的情況下，頁面的顯示尺寸為780428個象素;解析度在640480的情況下，頁面的顯示尺寸則為620311個象素。從以上數據可以看出，解析度越高頁面尺寸越大。

在網頁設計過程中，向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家，除非你能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容，那麼你最好能在上面做上頁面內部連接，以方便訪問者瀏覽。對於整體造型：造型就是創造出來的物體形象。頁面的整體形象，應該是一個整體，圖形與文本的接合應該層疊有序，有機統一。雖然，顯示器和瀏覽器都是矩形，但對於頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。

2.色彩搭配

網頁色彩搭配可是一門大學問，光是介紹其原理的書籍都有成千上萬。這里我們不談深奧的，只談淺顯易懂的，我們在具體的網站建設過程中可以多准備幾套色彩方案進行測試，聽取大家的修改意見。這樣的好處在於能夠以小見大，使之符合大眾化的色彩審美品味。當然還要注意色彩的選擇要貼近網站主題，加之以各種特效，營造出令人舒服的瀏覽體驗。大家可以多了解了解配色的相關知識，就不會使自己的網站配色顯得不夠檔次了。

3.廣告

最好不要有彈出廣告，因為這很影響瀏覽體驗。不過如果你能把彈出廣告也做得吸引人的話那就另當別論了。用戶也不想一進你的網站就鋪天蓋地的廣告來襲，用戶的要求很簡單：瀏覽你的網站，找到自己所需的信息並享受整個訪問過程。如果時不時的被廣告所打擾，那用戶就有可能關閉頁面，你也就損失了訪問流量。

在筆者看來，覺得蠻重要的還是色彩的搭配。網頁就像一張白紙，你可以在上面由著內心隨意塗抹，當然這樣的隨意是基於一定色彩搭配原理的，不然就是鬼畫符了。現在HTML5技術這么流行，可以實現任何你天馬行空的想像，我們缺少的不是技術，而是創意。如何將你的網站打造成為人們眼前一亮的典範，這值得我們好好研究與實踐。以上的粗略經驗分享希望對大家的網站建設有所幫助，如果你能學到新的一點點東西，那麼對於筆者來說就是最大的鼓勵了。

文章來源：數字立方(http://www.028cube.com/Profession/2973.html)

10、網頁頁面在布局時應注意哪些方面的問題

http://article.pchome.net/content-7253-1.html
這里講的很全面，這里給你摘要一些

最開始，網頁呈現在你面前的時侯，它就好像一張白紙，它需要你任意揮灑你的設計才思。在開始的時侯，你需要明白，雖然你能控制一切你所能控制的東西，但假如你知道什麼是一種約定俗成的標准或者說大多數訪問者的瀏覽習慣，那麼你可以在此基礎上加上自己的東西。你當然也可以創造出自己的設計方案，但如果你是初學者，那麼最好明白網頁布局的基本概念。

1、頁面尺寸
由於頁面尺寸和顯示器大小及解析度有關系，網頁的局限性就在於你無法突破顯示器的范圍，而且因為瀏覽器也將佔去不少空間，留下給你的頁面范圍變得越來越小。一般解析度在800x600的情況下，頁面的顯示尺寸為：780x428個象素；解析度在640x480的情況下，頁面的顯示尺寸為:620X311個象素；解析度在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數據可以看出，解析度越高頁面尺寸越大。
瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那麼當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。
在網頁設計過程中，向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家除非你能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容

2、整體造型
什麼是造型，造型就是創造出來的物體形象。這里是指頁面的整體形象，這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對於頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。
對於不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規則，你注意到很多ICP和政府網頁都是以矩形為整體造型；圓形帶表著柔和，團結，溫暖，安全等，許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權威，牢固，侵略等，許多大型的商業站點為顯示它的權威性常以三角形為頁面整體造型；菱形代表著平衡，協調，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網頁製作多數是接合多個圖形加以設計，在這其中某種圖形的構圖比例可能占的多一些。

3、頁頭
頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什麼內容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協調性。頁頭常放置站點名字的圖片和公司標志以及旗幟廣告。

4、文本
文本在頁面中出現多數以行或者塊(段落)出現，它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面製作技術的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經可以按照自己的要求放置到頁面的任何位置

5、頁腳
頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置製作者或者公司信息的地方。你能看到，許多製作信息都是放置在頁腳的。

二.網頁布局的方法

網頁布局的方法有兩種，第一種為紙上布局；第二種為軟體布局。下面分別加以介紹：

1.紙上布局法

許多網頁製作者不喜歡先畫出頁面布局的草圖，而是直接在網頁設計器里邊設計布局邊加內容。這種不打草稿的方法不能讓你設計出優秀的網頁來。所以在開始製作網頁時，要先在紙上畫出你頁面的布局草圖來。

准備一若干張白紙和一隻鉛筆，你要設計一個時尚站點。

*尺寸選擇：

目前一般800X600的解析度為約定俗成的瀏覽模式。所以為了照顧大多數訪問者，你頁面的尺寸以800X600的解析度為准。

*造型的選擇：

先在白紙上畫出象徵瀏覽器窗口的矩形，這個矩形就是你布局的范圍了。選擇一個形狀作為整個頁面的主題造型，我們選擇圓形，因為它代表者柔和，和時尚流行比較相稱，然後在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會發現很亂。其實，如果你一開始就想設計出一個完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點，你不要擔心你設計的布局是否能夠實現。事實上，只要你能想到的布局都能靠現今的HTML技術實現。

考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個矩形(也可以是一條線段)。

*增加頁頭：

.jpg是我們從.jpg和2.jpg得到的布局造型，那麼我們該增加頁頭了。一般頁頭都是位於頁面頂部，所以我們為.jpg增加了一個頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個矩形頁頭並讓頁頭相交與左邊的弧線。

*增加文本：

頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯，所以文本放置在空白部分不會因為左邊的弧線而顯得不協調。

*增加圖片：

圖片是美化頁面和說明內容必須的媒體。在這里把圖片加入到適當的地方。

經過以上的幾個步驟，一個時尚頁面的大概布局就出現了。當然，它不是最後的結果，而是你以後製作時的重要參考依據。

2.軟體布局法

如果你不喜歡用紙來畫出你的布局意圖，那麼你還可以利用軟體來完成這些工作。這個軟體就是Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網頁布局上更顯得心應手。不像用紙來設計布局，利用Photoshop可以方便的使用顏色，使用圖形，並且可以利用層的功能設計出用紙張無法實現的布局意念。

三.網頁布局的技術

1.層疊樣式表的應用

2.表格布局

3.框架布局

導航:首頁 > 萬維百科 > 菱形網頁設計

菱形網頁設計

與菱形網頁設計相關的知識