網站自適應設計准則

1、簡述網頁設計的基本准則

要切合主題，符合各類網站應有屬性。網頁設計分很多種類的，有門戶網站、官網、專題網站、各種功能網站等，每種網站的風格是不一樣的。

簡潔而大氣，簡單而又不單調。

合適的配色方案。

注重用戶體驗。不能為了設計上的美觀而讓用戶操作不便，設計的目的是為了更好的滿足人們使用需求，而不是為了華而不實的東西。

結合當前的設計潮流。

以上來自個人多年的設計心得和對設計的理解，希望能對大家有所幫助

2、設計自適應網站頁面時應注意哪些事項

1、頁面內容要新穎

網頁內容的選擇要不落俗套，要重點突出一個「新」字，這個原則要求我們在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個獨一無二的網站。 放眼望去，網上的許多個人主頁簡直就是"雜貨店"，內容包羅萬象,題材千篇一律，人人都是"軟體下載",個個都有"網路導航"，從頭到尾找不出一絲「鮮」意。所以，我們在設計網頁時，要把功夫下在選材上。選材要盡量做到「少」而「精」,又必須突出「新」，如能堅持天天更新的話,我相信這樣的網頁一定會受到大家的歡迎。

2、網頁命名要簡潔

由於一個網站不可能就是由一個網頁組成，它有許多子頁面，為了能使這些頁面有效地被連接起來，用戶最後能給這些頁面起一些有代表性的而且簡潔易記的網頁名稱。這樣既會有助於你以後方便管理網頁，在向搜索引擎提交你的網頁時更容易被別人索引到。在給網頁命名時，最好使用自己常用的或符合頁面內容的小寫英文字母，這直接關繫到頁面上的連接。

3、要及時更新網頁

網頁製作好後，不能說萬事大吉了，其實事後的工作量更大。因為網頁製作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連接應該立即刪除掉，比如用戶無意中點擊了頁面中的一個連接，在苦苦的等待之後，換來的是無法訪問的結果，那麼他們會對你的網頁大失所望，可能以後再也不會光顧你的網頁了。若不能及時更新，也最好在主頁上發布信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。

4、注意視覺效果

設計Web頁面時，一定要用640×480和800×600的解析度來 分別觀察。許多瀏覽器使用640×480的解析度，盡管在800×600高解析度下一 些Web頁面看上去很具吸引力，但在640×480的模式下可能會黯然失色。作一點小小的努力，設計一個在不同解析度下都能正常顯示的網頁

5、隨時注意網站升級

時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計劃好你的升級計劃。

6、 網頁內容要易讀

網站設計最重要的訣竅，恐怕就是你的網頁要易讀 。這就意味著,你必須花點心思來規劃文字與背景顏色的搭配方案。 注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網頁來很費勁。一般來說，淺色背景下的深色文字為佳 。這個要點要求你最好別把文字的規格設得太小、也不能太大。文字太小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當代中文的閱讀習慣，文本大都居左的。當然，標題一般應該居中，因為這符合讀者的閱讀習慣。

7、善用表格來布局

不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。

8、 少用特殊字體

雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什麼。在你的計算機里看起來相當好的頁面，在另一個不同的平台上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯風格表CSS有助於解決這些問題，但是只有最新版的瀏覽器才支持CSS。

9、多學習和使用HTML

為了成功地設計網站，你必須理解HTML是如何工作的。大多數的網站設計者建議網路新手應從有關HTML的書中去尋找答案，用Notepad製作網頁。因為用HTML設計網站，可以控制設計的整個過程。但是，如果你僅僅是網站設計的新手，你應該尋找一個允許修改HTML的軟體包。HomeSite4是一個很好的Web設計工具。在設計過程中，HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式，以便你在把網站發送到Web之前，預覽你的網站。

10、盡量少用Java程序 不要使用大幅面的Java程序,能夠用javascript替代效果的則盡量不要使用java.因為目前來講java的運行速度實在慢的讓人無法忍受，往往使瀏覽者沒有耐心等頁面全部顯示出來，這樣你的精心設計便毫無效果啦。

3、自適應網站一屏式的設計規范是什麼？

自適應網站可以建成1920的寬度，一般都是用百分比來控制的，圖片寬度尺寸1920像素可以，最終會隨著屏幕的大小而自適應。
圖片具體的尺寸根據你每個模塊分割的尺寸來決定。
比如說首頁的輪播圖你想全屏顯示圖片寬度就設置1920PX，輪播圖的圖片以橫構圖為主。
一般都建議用橫構圖，豎構圖的話高度不好控制，除非你劃分了某個區域是豎構型的。

4、網站設計應遵循哪些基本的准則

網站的良好運營靠的是什麼？靠技術，肯定不是，因為技術的發展是一個相對的概念，不具有耐久性，缺乏凝聚力，如果僅僅靠這個，是不能維系整個網站發展的。網站其實就是企業，只不過它是提供給自己的客戶以不同的產品，即以網頁的形式展現給他們瀏覽、以交互的方式讓他們參與等等，既然網站是一個企業就不能迴避一個問題，就是盈利的問題，如果只顧向網站投錢，作虧本生意，是那個網站都不願意做的事情。所以網路如果要給自己帶來回報，就必須以高標准來要求，這樣就不得不提升到網站文化的高度。還是先來看一下企業文化的定義吧！

只要問一問任何一家一流的高科技企業，什麼使這些企業引以自豪，十家有八家或許會告訴你，它們引以自豪的是自己的產品或服務。剩下的兩家則會舉出一系列的東西，如它們的業務流程、它們的業務夥伴關系、它們的員工等等。總之，概括起來就是：企業文化。 什麼是企業文化呢？Terence E. Deal（特倫斯）和Allan A. Kennedy（阿倫）合著了一部頗具影響的專著，《企業文化》（Corporate Culture）。書中給企業文化的定義是，"用以規范企業人多數情況下行為的一個強有力的不成文規則體系。"

其實企業文化指的是一個企業中所有員工共有的一套觀念、信念、價值和行為准則，以及由此導致的行為模式。企業文化是以人為本的管理哲學，是把精神文明建設同企業特點和市場對企業發展的要求結合起來的一個重要形式，是藉助文化力量的管理方式，良好的企業文化能為企業保持數十年的競爭優勢。

可以說企業文化是企業的靈魂。一個沒有自己企業文化的企業其經營往往是隨波逐流的，其員工也沒有主人翁意識，這樣的企業是長不了的。縱觀國內外現代化企業管理已經從以物為中心的管理轉向以人為中心的管理，從而越來越突出人在企業生存和發展中的作用和力量。企業最重要的資源是知識，而知識是人的資源，所以重視人就是重視企業最重要的資源。IBM這樣一個老牌的大公司為什麼經歷如此多的風風雨雨至今仍然是藍色巨人？HP公司為什麼能保持20多年持續穩定的發展？其答案都很簡單：重視人的建設是他們立於不敗之地的保證。

雖然現在的網站賴以競爭的本錢並不是靠的自己的文化，而是一些比如機遇、技術、條件等，但是現在並不能代表以後，隨著社會經濟和網路技術的發展，外部條件都不是問題，如果僅靠這些，網站之間的差別將變得很小，這樣網站生存的價值就會變小。所以要能夠在競爭中立於不敗之地，就應該堅持以人為本，挖掘網站人的潛力，讓他們發揮自己的才能，使他們能夠不斷的超越自我，更好的凸現自己的價值。從而形成一種合力，使網站的發展形成一種良好的機制。
在這樣的情況下，網頁設計就被賦予了新的內容，要求也隨之提高，主要表現在幾個方面：

首先就是網站的整體形象，一個網站給人的第一印象就是主頁，但是絕不是說，只要主頁做好了，網站的整體形象就好，因為在用戶對整個網站的瀏覽的過程中，會自然而然的形成一種對網站的看法，這種看法是附帶有感情色彩的，比如喜歡、不喜歡、沒有什麼感覺等，這就是整體形象的體現，這是靠主頁和其它的頁面相配合來完成的，所以在製作網頁的時候要考慮怎麼將自己網站好的一面體現給自己的用戶，又要考慮體現的方式，側重點，不能一鍋端，都放在主頁上，造成雜亂的形象。而要給人以好的可以信賴的形象就必須從許多細節上入手，同時規范整個網站的外在表現，具體在於標志的設計、標准色彩的表達以及標准字體的設計。這些都是很重要的，有一個統一的、標準的形象是贏得自己用戶信賴的條件。

其次是如何在網頁設計中將整個網站的員工的精神風貌體現出來，每個企業的員工其實是一分寶貴的財富，所以能夠充分的將員工的精神風貌體現出來一方面可以激勵他們努力的工作，熱愛自己的工作，也是加強企業凝聚力的一個手段；同時也可以通過這樣的方法來贏得自己的客戶的支持，在網站林立的今天，贏得自己的用戶就是贏得了市場，就是獲得了生存的基本條件。

再次，在網頁設計的時候，需要結合網站本身的特點，提煉出自己的經營理念，擺脫低層次的網站運行模式，網站作為一個企業就必須在不斷的發展壯大的時候，結合自身的文化特色，提煉出一些深層次的東西，而這些東西就是企業的靈魂，很多世界知名品牌都有自己的獨特的經營理念，比如微軟是"成功訣竅 = 人才 + 創新，管理 = 合適的時間 + 應做的事"，惠普是"財富= 人才 = 資本 + 知識"，飛利普是"新產品 = 技術內涵 + 觀念創新"，東芝是"企業活力 = 智力×（毅力 + 體力 + 速度）"，麥當勞是"企業的活力 = 原材料×設備×人力資源人力資源 = 人數×能力×態度"。這樣就給網頁設計師提出了更高的要求，要求他們能夠深入的了解網站，同時將自己融入的到網站中，不斷的發掘具有閃光性的東西，同時找到合適的表達方式來加以強化。這樣才能夠使網站靠自身的優勢獲得用戶的好感。從而奠定良性運行的基礎。

既然網站文化給網頁設計師提出了更高的要求，那麼具體到網頁設計師身上該如何應對呢？提高自身的文化素質是必不可少的，假如自身素質不高的話，就無法領會到很多其中的內涵，這樣在自己的設計表達的時候就不可能到位，其實作品就是一面鏡子，在其中可以折射出設計者自身的素質，這是掩蓋不了的，所以提高自身的文化修養是很重要的，形成一種習慣，這樣在無形中就可以在設計的作品表現出來，所以這里沒有任何捷徑可以走，只有在平時的生活中點點滴滴的積累。同時要有一顆積極向上的心，對生活充滿熱情！這樣才可能在自己的網頁設計中挖掘出好的東西來，也給自己的用戶留下好的印象。

網站美工設計就是怎樣把網站設計的好看一些

5、如何進行自適應網頁設計

做網站讓頁面自適應大小方法代碼如下：

一、電腦站設置網站自適應方法

全屏寬度主要在於CSS代碼中，將width為100%，而不是一個固定的像素值，代碼如下。

手機網設置網自適應方法：

在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 

解釋：

6、如何去設計一個自適應的網頁設計或html5

如今移動互聯網隨著3G的普及，越來越火爆，更多需求跟隨而來！APP應用市場和APP應用數量成倍成倍的增長！從而給移動互聯網帶來新的挑戰！
移動設備正超過桌面設備，成為訪問互聯網的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁？
手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，並不是一件容易的事。
很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的復雜度。
於是，很早就有人設想，能不能」一次設計，普遍適用」，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局（layout）？
一、了解什麼是」自適應網頁設計」
自從2010年，Ethan Marcotte提出了 「自適應網頁設計」（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。
他製作了一個 範例，裡面是《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大於1300像素，則6張圖片並排在一行。
如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。
如果屏幕寬度在400像素到600像素之間，則導航欄移到網頁頭部。
如果屏幕寬度在400像素以下，則6張圖片分成三行。
mediaqueri.es上面有更多這樣的例子。
這里還有一個 測試小工具，可以在一張網頁上，同時顯示不同解析度屏幕的測試效果，我推薦安裝。
二、需要允許網頁寬度自動調整
「自適應網頁設計」到底是怎麼做到的？其實並不難。
首先，在網頁代碼的頭部，加入一行 viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。

三、在進行設計的時候不能使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
四、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
五、流動布局（fluid grid）或瀑布流
「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要非常小心。
六、選擇性載入CSS
「自適應網頁設計」的核心，就是CSS3引入的 Media Query模塊。
它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就載入tinyScreen.css文件。
如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。
除了用html標簽載入CSS文件，還可以在現有CSS文件中載入。
@import url(「tinyScreen.css」) screen and (max-device-width: 400px);
七、CSS的@media規則
同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
八、圖片的自適應（fluid image）
除了布局和文本，」自適應網頁設計」還必須實現圖片的 自動縮放。
這只要一行CSS代碼：
img { max-width: 100%;}
這行代碼對於大多數嵌入網頁的視頻也有效，所以可以寫成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好寫成：
img { width: 100%; }
此外，windows平台縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的 專有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的 imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementByIdx_x(「content」).getElementsByTagName_r(「img」);
imgSizer.collate(imgs);
});
不過，有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有 很多方法可以做到這一條，伺服器端和客戶端都可以實現。
只要遵循這8條設計准則，我相信你們可以很快的設計出自適應的網頁出來

7、網站設計要遵循哪些原則？

1、響應式布局：自適應PC、手機、平板端，網站的可訪問性非常重要，越來越多的人使用手機搜索訪問網站；
2、安全穩定：網站從本質上來說一款軟體，是軟體都會需要升級，因此使用專業的建站系統搭建網站除了功能完善，還可以在線升級
3、尊重知識產權：當前很多所謂的定製建站公司為了節省成本或受限於自己的技術水平，模仿抄襲建站行業的標桿企業模板或是模仿同行，從而會給公司埋下嚴重的侵權法律風險。

8、網站設計要遵循哪些原則

1、響應式布抄局：自適襲應PC、手機、平板端，網站的可訪問性非常重要，越來越多的人使用手機搜索訪問網站；
2、安全穩定：網站從本質上來說一款軟體，是軟體都會需要升級，因此使用專業的建站系統搭建網站除了功能完善，還可以在線升級
3、尊重知識產權：當前很多所謂的定製建站公司為了節省成本或受限於自己的技術水平，模仿抄襲建站行業的標桿企業模板或是模仿同行，從而會給公司埋下嚴重的侵權法律風險。