Ⅰ web界面設計規范有哪些
一、網頁尺寸
製作網頁時，我們選用的解析度是72像素/英寸，使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是：可辨識性和易讀性。
網頁的文字設計是系統默認的字體：宋體、微軟黑體、蘋果系統黑體，英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種：
12px是應用於網頁的最小字體，適用於非突出性的日期，版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。
Ⅱ web布局有包括哪些
網頁基本布局方式：
（1）流式布局
Fluid
流布局與固定寬度布局基本不同點
就在於對網站尺寸的側量單位不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。換句話說，通過設置百分比，我們不需要考慮設備尺寸或者屏幕寬度大小了，可以為每種情形找到一種可行的方案，應為你的設計尺寸將適應所有的設備尺寸。流布局與媒體查詢和優化樣式技術密切相關。
（2）固定布局 Fixed
在固定布局中，網頁的寬度是必須指定為一個像素值，一般為960px。過去，開發人員發現960px是最適合作為網格布局的寬度，因為960可以
整除
3，4，5，6，8，10，12和15。在今天，在
web開發
中還是比較普遍使用固定寬度布局的，因為這種布局具有很強的穩定性與可控性。但是同時也有一些劣勢，固定寬度必須考慮網站是否可以適用於不同的屏幕寬度。
（3）彈性布局
Elastic
彈性布局跟流布局很像，主要不同是大小單位。彈性布局的大小單位不是像素或者百分比，而是em或者rem，避免了根據px局部在高解析度下幾乎無法辨識的缺點，又相對於%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示，需要一段時間適應而且不易從其他布局轉換過來。
（4）伸縮
Flex
box
使用
css3
Flex系列屬性進行相對布局。對於
富媒體
和復雜排版的支持非常大，但是存在兼容性問題。
（5）響應式
使用@media媒體查詢給不同尺寸和介質的設備切換不同的樣式。優秀的響應范圍設計可以給適配范圍內的設備做好的體驗。
Ⅲ html布局的幾種方式有
1、HTML布局主要有兩種方式，一種是表格布局，一種是DIV布局。
2、HTML表格布局是WEB1.0時代主要使用的布局方式，即使用TABLE標簽進行布局，優點是布局比較簡單。
3、HTML DIV布局是WEB2.0時代主要使用的布局方式，優點是符合W3C標准，載入速度比較快，也比較便於做結構分離。
4、現在一般都是提倡使用DIV布局，但也不是說就淘汰表格布局了，視具體的場景需要，在很多場景中都是兩種混合使用的。
5、希望對你有幫助。
Ⅳ 網站前端開發常用的布局方式有哪些
實現網頁布局的方式方法比較多，布局方式可以大概分為這幾類。
布局種類：
1、table布局（網頁的興起，1995）
2、Flash布局（自由的黃金時代，1996）
3、div+css（CSS的誕生，1998）
4、柵格與響應式（移動端的興起，2007與2010）
當前WEB前端開發使用DIV+CSS的布局方式會比較多也比較常用吧，網頁布局看起來貌似簡單，但是它需要綜合使用很多HTML+CSS的知識，總的來說知識量是不小。如果想系統化的了解HTML+CSS方面的知識，建議你選擇一本比較不錯的HTML5相關書籍（主要看知識邏輯、知識的表達方式，比如《HTML5布局之路》）進行學習，讓自己的知識更扎實一些，不然學的零零散散的。
Tips：學習好HTML+CSS有利於後面學習JavaScript，畢竟需要它們兩者結合在一起才可以實現出可交互的前端頁面。
Ⅳ WEB前端怎麼布局
在談WEB前端怎麼布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2.流式布局：布局特點是屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局：布局特點是每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
那麼我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，最好的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。
Ⅵ web的標准包括那些組成部分
1.什麼是web標准？
首先要明確一個概念。我們本書講的web標准，不是指XML，而是指為了實現大量HTML信息向XML標準的過渡，W3C和ECMA制定的一系列的技術規范，目前主要包括XHTML1.0、CSS2.0、DOM1.0和ECMA JavaScrit。web標准不僅僅是一個規范，而是一系列規范的總稱。
按這些規范製作的網頁，符合XML格式規范，內容與表現相分離，將使你的頁面數據在以後可以被分享、交換和重用。
下面，讓我們一起了解一些重要的基礎知識。如果你已經掌握，可以跳過直接閱讀第二節
。
2. 什麼是w3c？
W3C是「World Wide Web Consortium」的縮寫，中文稱萬維網組織。是一個專注於「領導和發展web技術」的國際工業行業協會。它由萬維網發明者Time Berners-Lee領導，成立與1994年。W3C已經有超過500家的會員--包括微軟、美國在線(Netscape的母公司)、蘋果電腦、 Adobe、Macromedia、SUN 以及各類主流硬體、軟體製造商和電信公司。學會主要研究由三家學術機構主理--美國麻省理工學院(MIT)、法國的歐洲信息與數學研究論壇 (ERCIM)、日本的應慶大學(KEIO)。
W3C主要工作是研究和制定開放的規范(事實上的標准)，以便提高web相關產品的互用性。W3C的推薦規范的制定都是由來自於會員和特別邀請的專家組成的工作組完成。工作組的草案(Drafts)在通過多數相關公司和組織同意後提交給W3C理事會討論，正式批准後才成為「推薦規范 (Recommendations)」發布。更多的信息您可以訪問W3C的網站：www.w3.org
web標準的優勢
5.1 易用性
用web標准製作的頁面，對搜索引擎更加「透明」，因為良好清晰的結構使得搜索引擎能夠方便的判斷與評估信息，從而建立更精確的索引。按web標准製作的頁面也可以在更老版本的瀏覽器中正常顯示基本結構，即使CSS/XSL樣式無法解析，它也能顯示出完整的信息和結構。
符合web標準的頁面也很容易被轉換成其他格式文檔，例如資料庫或者word格式,也容易被移植到新的系統--硬體或者軟體系統，比如網路電視、PDA等等。這是XML天生具有的優勢。
符合web標準的頁面也具有天生的「易用性(accessibility)」,不僅僅是普通瀏覽器可以閱讀，那些有殘疾的人們也可以通過盲人瀏覽器、聲音閱讀器正常使用。
5.2 向後兼容性
使用web標准建立的頁面，將在未來的新瀏覽器或者新網路設備中很好的工作。我們只要修改CSS或者XSL定製相應的表現形式就可以了。
關於web標準的好處
1.科技在進步，網路帶寬越來越大，速度越來也快，節省那點位元組有意義嗎？
web標準的好處之一是：用web標准製作的頁面代碼量小，可以節省帶寬。這只是web標准附帶的好處，因為DIV的結構本身就比TABLE簡單，TABLE布局的層層嵌套造成代碼臃腫，文件尺寸膨脹。通常情況下，相同表現的頁面用DIV+CSS比用TABLE布局的節省2/3的代碼。這是web標准天生的好處。至於節省帶寬的意義並不主要針對普通用戶，而主要針對網站經營者，特別是中大型網站，類似新浪、網易這樣的站點。一個新聞首頁從500K縮小到170k，假設一天的pageview是3000萬(保守數字)，那麼節省的伺服器流量就是330k*30000000=9440G，這個成本的節約是可觀的。
2.我需要考慮殘障人士（盲人和弱視）嗎？
為殘障人士提供網路瀏覽方便是美國及歐洲一些國家的法律規定，由於web標准頁面的清晰結構、語義完整，一些相關設備能很容易的正確提取信息給殘障人士。因此，方便盲人閱讀信息也成為web標準的天生好處之一。至於有人說中國目前還有很多人為解決溫飽發愁，哪有時間考慮殘障人士。這是社會文明和社會道德問題，不在本書討論范疇。但如果你頁面按web標准製作了，就能達到這個效果，何樂而不為呢？
關於瀏覽器兼容
1.我不需要關心web標准，IE佔有99%的市場，我做的頁面只要IE能看就可以了。
「以用戶為核心」通常都是反對web標准者的檔箭牌，實際上這是虛偽的「以用戶為核心」。你不能保證IE永遠是壟斷瀏覽器市場，你也不能保證IE不做任何改變(事實上，微軟的IE7已經開始改善對 web標準的支持)。堅持用html+table布局製作的頁面將是「死」的信息，不方便搜索，無法重用與共享，從長遠來講，這才是對用戶最大的傷害。
2.為什麼web標準的頁面兼容性並不好？
我們說web標準的優勢是兼容性好，這個兼容是指向後兼容，向新瀏覽器、新設備兼容。對已有的瀏覽器來說，因為它們對web標準的支持程度不一樣，因此會出現不同瀏覽器下頁面變形的情況。我們必須採用一些"hack"技巧來實現不同瀏覽器的兼容。這是無奈、也是不可避免的，是web技術發展必然要經歷的一個過程，是我們向XML過渡必須克服的一個困難。
我想你和我一樣，都關心WEB的未來會是怎麼樣的，下一輪的新技術熱點在什麼方向。其實，要回答這個問題，沒有誰比W3C更有權威了。只要看看W3C在做什麼，正在研究什麼規范就知道WEB的走向和趨勢了。
W3C明確地告訴我們：XML是未來的趨勢毋庸置疑，開放和共享是互聯網的精神和根本動力。
蒂姆.貝納斯-李（Tim Berners-Lee），W3C領導人，萬維網之父，說到：XML提供了信息交換的手段，但這僅僅只是開始。我們的目標是web的語義化，即：使得web上的信息內容更加容易理解、更便於交換和共享，RDF和OWL語言將在這方面提供更強大的支持。
web技術即將迎接新一輪的變革和發展，如果你還在猶豫是不是需要學習web標准，那麼你將失去這次機會。
Ⅶ 網頁的布局類型有哪些
1、「國」字型
也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。
2、拐角型
這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。
3、標題正文型
這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。
4、封面型
這種類型基本上是出一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分是企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
5、「T」結構布局
所謂「T」結構布局，就是指網頁上邊和左邊相結合，頁面頂部為橫條網站標志和廣告條，左下方為主菜單，右面顯示內容，這是網頁設計中用得最廣泛的一種布局方式。在實際設計中還可以改變「T」結構布局的形式。
如左右兩欄式布局，一半是正文，另一半是形象的圖片、導航。或正文不等兩欄式布置，通過背景色區分，分別放置圖片和文字等。
這樣的布局有其固有的優點，因為人的注意力主要在右下角，所以企業想要發布給用戶的信，大都能被用戶以最大可能性獲取，而且很方便，其次是頁面結構清晰，主次分明、易於使用。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人「看之無味」。
6、「口」型布局
這是一個形象的說法，指頁面上下各有一個廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內容。
這種布局的優點是頁面充實、內容豐富、信息量大，是綜合性網站常用的版式，特別之處是頂部中央的一排小圖標起到了活躍氣氛的作用。
缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站使用多幀形式，只有頁面中央部分可以滾動，界面類似游戲界面。使用此類版式的有多維游戲娛樂性網站。
7、「三」型布局
這種布局多用於國外網站，國內用得不多。其特點是頁面上橫向兩條色塊，將頁面整體分割為4個部分，色塊中大多放廣告條。
8、 對稱對比布局
顧名思義，它指採取左右或者上下對稱的布局，一半深色，一半淺色，一般用於設計型網站。其優點是視覺沖擊力強，缺點是將兩部分有機地結合比較困難。
9、POP布局
POP源自廣告術語，指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用於時尚類網站，優點顯而易見：漂亮吸引人，缺點是速度慢。
網頁設計（web design，又稱為Web UI design，WUI design，WUI），是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的互聯網品牌形象至關重要。
網頁設計一般分為三種大類：功能型網頁設計（服務網站&B/S軟體用戶端）、形象型網頁設計（品牌形象站）、信息型網頁設計（門戶站）。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。
(7)web布局包括什麼擴展閱讀
網站伴隨著網路的快速發展而快速興起，作為上網的主要依託，由於人們使用網路的頻繁而變得非常的重要。由於企業需要通過網站呈現產品、服務、理念、文化，或向大眾提供某種功能服務。因此網頁設計必須首先明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。
專業的網頁設計，需要經歷以下幾個階段：
1、需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。
2、以業務目標為中心進行功能策劃，製作出欄目結構關系圖。
3、以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。
4、以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。
5、根據用戶反饋，進行頁面設計調整，以達到最優效果。
Ⅷ web前端幾種常見的網頁布局
現在的網頁差不多都採用分列布局，
常見的有單列布局（如網路首頁）、雙列布局、三列布局和混合布局，超過三列的布局很少見。
最簡單的要數單列布局了，這種布局適合各種搜索引擎主頁，干凈的界面和較少的干擾信息給用戶較好的體驗。
Ⅸ 網頁製作的結構布局有哪些
學習前端第一步：劃分網頁結構，網頁的結構的劃分應該遵循哪些原則，如何去劃分網頁的結構呢？
對於一個前端初學者，第一步就是要學會如何劃分一個網頁的結構。當設計師給到你一張設計圖，你需要根據這張圖做出一個符合標準的頁面，這里所說的標准，即w3c標准，參考w3school在線教程。那麼做出一個完整的符合標準的網頁第一步就是要劃分網頁的結構。一般來講，網頁結構的劃分需要遵循幾個原則：
一、自上而下原則
因為瀏覽器在渲染一個網頁的順序是自上而下的。這里提到了渲染這一個詞，所謂的渲染就是瀏覽器將代碼轉換為頁面顯示內容的過程。瀏覽器會自上而下讀取你寫的代碼並自上而下的顯示。
二、從左至右原則
在自上而下的同時，同一行的內容是從左至右渲染，所以在劃分結構的時候有從左至右的順序。
三、一像素原則
這個原則對於初學者來說必須堅持，但也並不是說無論什麼時候都得死認這個道理。前期我們在劃分網頁的時候一定要劃分准確，尤其是橫向。試想，如果外面的盒子寬度是1200像素，裡面兩個盒子一個600像素另一個601像素，加起來超過了父級的寬度那麼必然第二個盒子會換到下一行進行顯示。
在說完上述三個原則過後有些人就會一味地追求遵循這些原則，比如在劃分結構的時候一定要分為上下部分，但是比如下面我截取這個網頁的一部分，圖片和文字其實是屬於一個整體，文字是對圖片的說明，所以就不應該分為上下，而應該水平方向劃分，每一個圖文作為一部分內容，水平分為四部分：
我們說一般網頁有header（頭部區）、banner（廣告橫幅區）、main（主體內容區）、footer（底部區），單頁並非所有網頁都是這樣，有些網頁沒有banner但是初學者容易將header下面那一部分硬劃分為banner，有些網頁除了這幾部分還會有比如icon等區域由喜歡將他們劃分到main中去。
說到main區，這個結構劃分就多種多樣了。有些網頁是有一個從左到右通欄的背景色甚至背景圖片，這樣我們結構的劃分也應該有外層一個通欄的盒子，將背景色或者背景圖給他，裡面再嵌套一個inner盒，給可視區域的固定寬度並居中。如果沒有通欄的背景那麼這個時候是不需要給通欄的盒子，直接main區給固定寬度居中就好了。
那麼在結構劃分的時候有些盒子區域之間的空隙怎麼去劃分這也是初學者最容易犯難的問題。其實嚴格意義來講這些空白在結構劃分的時候並不會造成影響，因為空白區域在都可以用代碼來實現。不過一些文字區域你不能貼著文字的上下來劃分，因為文字都是自帶行高的。
另外，有些地方可能會有一部分小圖片或者一部分內容覆蓋在外面大盒子上，這部分在劃分結構的時候可以不用管，因為後期在代碼實現的時候我們可以利用定位技術實現。