❶ 前端拿到UI設計的圖 如何開始布局設計
前端拿到UI設計的圖 開始布局設計的方法
布局是頁面構成的前提，是後續展開交互和視覺設計的基礎。設計者在選擇布局之前，需要注意以下幾點原則：
明確用戶在此場景中完成的主要任務和需獲取的決策信息。
明確決策信息和操作的優先順序及內容特點，選擇合理布局。
一、常用布局
網站展示頁、Dashboard、列表頁、表格頁、詳情頁、表單頁。在設計前先了解這些模板有助於讓用戶快速找到適合自己產品的頁面布局。
1、網站展示頁
網站展示頁（即官網頁）通常是用戶了解網站或產品的第一步。這類頁面通常會包含產品展示圖，簡短的產品介紹信息，以及用戶登錄入口等。在設計時我們建議：
明確你要傳達的內容，保持簡短而清晰的文案。
搭配清晰、直觀的產品圖片，有助於加深用戶對產品的理解和記憶。
2、控制台頁
控制台頁（Dashboard）集合了大量多樣化的信息（如數字，圖形，文案等），需要一目瞭然地將關鍵信息展示給用戶。因此，如何將龐大復雜的信息精簡清晰地展示出來，是設計此類頁面的關鍵。在設計時要注意以下幾點：
按照信息的重要程度來組織頁面排版，突出展示關鍵信息。
將數據可視化，讓用戶可以直觀地了解關鍵信息及整體情況。
合理地使用顏色及柵格排版，減輕用戶的視覺負擔。
3、列表頁
列表設計是並列式展現信息，方便用戶能快速查看基本信息及操作。因此，信息的「可閱讀性」及「可操作性」是設計的關鍵。在設計時要注意以下幾點：
根據用戶需求來定義信息展示的等級，僅展示關鍵信息及操作。
當信息內容較為復雜時，可將次要的信息折疊或放到詳情頁面中，以遞進的方式讓用戶獲得更多的信息。
4、表格頁
表格作為多維信息展示的載體，使復雜的信息更易於閱讀與理解。它的易讀性，便捷性，易操作性對產品的體驗起著舉足輕重的作用。因此，我們在設計時要注意以下幾點：
構造清晰的表格布局，有利於提升讀者對信息的接收速度和理解程度。
更多地展示用戶所必須的信息，通過視覺上的調優突出展示重點信息。
當界面需要在一個很大的多縱行表格中展示數據，或每一橫列數據有多行信息時，可以巧妙地運用橫向或縱向斑馬條，使得信息條目之間更為分明，視覺上更易區分。
5、詳情頁
詳情頁面一般會承載大量的基本信息，擴展信息，或者狀態信息。對於信息效率和優先順序判定的要求會比較高。清晰的布局能幫助快速看到關鍵信息，提高決策效率。這設計時有以下幾點需要注意：
清晰的排版格式，易於閱讀的文本大小及間距，都是影響用戶獲取信息效率的關鍵因素。
圖文搭配比單文本展示信息能更好地提高用戶的理解。
6、表單頁
表單頁通常用來執行登錄、注冊、預定、下單、評論等任務，是產品中數據錄入必不可少的頁面模式。因此，舒適的表單設計，可以引導用戶高效地完成表單背後的工作流程：
考慮用戶的瀏覽方式，提供清晰的用戶視線瀏覽路徑；
內容是表單的核心，保證表單的內容精簡（盡量避免多餘的輸入項）；
標簽的命名要易於用戶閱讀和理解，避免模糊的描述給用戶造成困擾；
醒目的提交或完成按鈕，放在用戶的瀏覽線的終點更有利於用戶的完成操作。
二、柵格
我們通過定義網格、間距來呈現產品布局的最佳效果，設計師在設計時可按（移動：『頁面總寬 750px，內容區 750px』，PC：『頁面總寬 1440px，內容區 1208px』）來設定，並在此基礎上以 12等分的柵格來劃分整個設計建議區域。
建議橫向排列的區塊數量最多四個，最少一個，以保證視覺層面的舒適感。
註：圖中灰色部分為柵格的列，定義為『Column』，白色部分為柵格的間隔，定義為『Gutter』。
柵格公式：
我們為頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
網站展示頁和 Dashboard 的 Gutter 寬度為 24px。
列表、表格、詳情和表單頁面的 Gutter 寬度為 16px。
❷ 網頁製作的結構布局有哪些
布局就是以最合適瀏覽的方式將圖片和文字排放在頁面的不同位置。不同的製作者會有不同的布局設計。網頁布局有以下幾種常見結構：
1.「同」字型結構布局
所謂同字型就夠就是指頁面頂部為「網站標志+廣告條+主菜單」或主菜單，下方左側為二級欄目條，右側為鏈接欄目條，屏幕中間顯示具體內容的布局。
這種布局的優點是充分利用版面，頁面結構清晰，左右堆成，主次分明，信息量大；缺點是頁面擁擠，太規矩呆板，如果細節色彩上缺少變化調劑，很容易讓人感到單調缺乏。
2.「國」字型布局
「國」字型布局是在「同」字型布局基礎上演化而來的，在保留「同」字型的同時，在頁面的下方增加一橫條狀的菜單或廣告，是一些大型網站所喜歡的類型。一般最上面是網站標題及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是在網上見到的最多的一種結構類型。
這種布局的優點是充分利用版面，信息量大，與其他頁面的鏈接切換方便，缺點是頁面擁擠，四面封閉，令人感到憋氣。
3.T型布局
這是一個形象的說法，是指頁面的頂部是「網站標志+廣告條」，左面是主菜單，右面是主要內容。這種布局的優點是頁面結構清晰、主次分明，是初學者最容易上手的布局方法；缺點是頁面呆板，如果不注意細節上的色彩，很容易讓人「看之無味」。
4.「三」字型布局
這種布局多用於國外站點，國內用得不多。特點是在頁面上有橫向兩條色塊，將頁面整體分割為但部分，色塊中大多放廣告條、更新和版權提示。
5.對比布局
顧名思義，這種布局採用左右或者上下對比的方式：一半深色，一半淺色。一般用於設計型站點。優點是視覺沖擊力強；缺點是將兩部分有機地結合比較困難。
6.POP布局
POP引自廣告術語，是指頁面布局像一張宣傳海報，一一張精美的圖片作為頁面的設計中心。這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接，甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種布局大部分出現在企業網站和個人主頁，如果處理得好的話，會給人帶來賞心悅目的感覺。
7.Flash布局
這種布局是指整個或大部分幅面的網頁本身就是一個Flash動畫，它本身就是動態的，畫面一般不叫絢麗、有趣，是一種比較新潮的布局方式。其實這與封面型結構是類似的，只是差畢橡這種類型才採用了目前非常流行的Flash，與封面型不同的是，由於Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差於虛旁傳統的多媒體。不同性質的網站，其頁面內容安排是不同的。一般網頁的基本內容包括標題、網站標識圖案（LOGO）、頁眉、頁腳、主體內容、廣告欄等。下面簡單說明：A、頁面標題在站點的沒一個頁面中都有一個標題，用來提示頁面的主要內容，著一信息將出現在瀏覽器的標題欄中，而不是在頁面的布局中。它的重要作用就是引導訪問者清楚地瀏覽網站的各項內容，不至於迷失方向。標題的加入在HTML語言中比較簡單
電子商務網站的主頁內容布局授課：花小琴常見的網頁布局結構國字型布局——國字型布局由同字型布局進化而來，因布局結構與漢字國相似而得名。其頁面的最上部分一般放置網站的標志和導航欄或Banner廣告，頁面中間主要放置網站的主要內容，最下部分一般放置網站的版權信息和聯系方式等。常見的網頁布局結構T型布局——T型布局結構因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網站的標志或Banner廣告，下方左側是導航欄菜單，下方右側則用於放置網頁正文等主要內容。常見的網頁布局結構標題正文型——標題正文型布局的布局結構一般用於顯示文章頁面、新聞頁面和一些注冊頁面等。常見的網頁布局結構左右框架型布局——左右框架型布局結構是一些大型論壇和企業經常使用的一種布局結構。其布局結構主要分為左右兩側的頁面。左側一般主要為導航欄鏈接，右側則放置網站的主要內容常見的網頁布局結構上下框架型——上下框架型布局與前面的左右框架型布局類似。其區別僅在於是一種上下分為兩頁的框架。常見的網頁布局結構綜合框架型——綜合框架型布局是結合左右框架型布局和上下框架型布局的頁面布局技術常見的網頁布局結構POP布局——POP布局是一種頗具藝術感和時尚感的網頁布局方式。頁面設計通常以一張精美的海報畫面為布局的主體。常見的網頁布局結構FLASH布局——FLASH布局是指網頁頁面以一個或多個Flash作為頁面主體的學習前端第一步：劃分網頁結構，網頁的結構的劃分應該遵循哪些原則，如何去劃分網頁的結構呢？
對於一個前端初學者，第一步就是要學會如何劃分一個網頁的結構。當設計師給到你一張設計圖，你需要根據這張圖做出一個符合標準的頁面，這里所說的標准，即w3c標准，參考w3school在線教程。那麼做出一個完整的符合標準的網頁第一步就是要劃分網頁的結構。一般來講，網頁結構的劃分需要遵循幾個原則：
一、自上而下原則
因為瀏覽器在渲染一個網頁的順序是自上而下的。這里提到了渲染這一個詞，所謂的渲染就是瀏覽器將代碼轉換為頁面顯示內容的過程。瀏覽器會自上而下讀取你寫的代碼並自上而下的顯示。
二、從左至右原則
在自上而下的同時，同一行的內容是從左至右渲染，所以在劃分結構的時候有從左至右的順序。
三、一像素原則
這個原則對於初學者來說必須堅持，但也並不是說無論什麼時候都得死認這個道理。前期我們在劃分網頁的時候一定要劃分准確，尤其是橫向。試想，如果外面的盒子寬度是1200像素，裡面兩個盒子一個600像素另一個601像素，加起來超過了父級的寬度那麼必然第二個盒子會換到下一行進行顯示。
在說完上述三個原則過後有些人就會一味地追求遵循這些原則，比如在劃分結構的時候一定要分為上下部分，但是比如下面我截取這個網頁的一部分，圖片和文字其實是屬於一個整體，文字是對圖片的說明，所以就不應該分為上下，而應該水平方向劃分，每一個圖文作為一部分內容，水平分為四部分：
我們說一般網頁有header（頭部區）、banner（廣告橫幅區）、main（主體內容區）、footer（底部區），單頁並非所有網頁都是這樣，有些網頁沒有banner但是初學者容易將header下面那一部分硬劃分為banner，有些網頁除了這幾部分還會有比如icon等區域由喜歡將他們劃分到main中去。
說到main區，這個結構劃分就多種多樣了。有些網頁是有一個從左到右通欄的背景色甚至背景圖片，這樣我們結構的劃分也應該有外層一個通欄的盒子，將背景色或者背景圖給他，裡面再嵌套一個inner盒，給可視區域的固定寬度並居中。如果沒有通欄的背景那麼這個時候是不需要給通欄的盒子，直接main區給固定寬度居中就好了。
那麼在結構劃分的時候有些盒子區域之間的空隙怎麼去劃分這也是初學者最容易犯難的問題。其實嚴格意義來講這些空白在結構劃分的時候並不會造成影響，因為空白區域在都可以用代碼來實現。不過一些文字區域你不能貼著文字的上下來劃分，因為文字都是自帶行高的。
另外，有些地方可能會有一部分小圖片或者一部分內容覆蓋在外面大盒子上，這部分在劃分結構的時候可以不用管，因為後期在代碼實現的時候我們可以利用定位技術實現。
❸ 前端開發設計
1.用於UI設計的Sketch app
Sketch正在迅速取代Photoshop，用於從低保真線框到高保真模型和設計圖標的所有的UI設計任務。
Sketch app是一個專為web和移動設計人員製作的Mac應用程序。它的功能，靈活性和速度滿足了你對於一個輕量級，易於使用的軟體包的想像。有了這個app，你就可以專注於創作最佳的設計了。
它提供了一個順暢的工作環境，為任何界面提供工藝化的矢量元素，而且還有你想從Photoshop得到的許多功能，瞎蘆如文本效果和圖層樣式。
如果Sketch能夠繼續提供最佳的UI設計體驗，那麼它在2016年及以後必然還會繼續保持輝煌。
2.基於瀏覽器的IDE
桌面IDE已經存在了幾十年，從Notepad到Xcode和visual Studio。IDE通過提供建議和語法高亮等功能使得我們可以卜燃更容易地編寫代碼。在IDE中寫代碼非常簡單，而且很易於閱讀。
但傳統的IDE是作為桌面應用程序發布的。從過去的幾年裡，基於瀏覽器的雲IDE發生了戲劇性的變化。除了web瀏覽器，我們不再需要任何軟體，因為瀏覽器型神虛允許設備操作來自於任何有互聯網接入的計算機的代碼。
雲IDE的功能更像是web應用程序，你可以保存代碼到你的帳戶進行共享或個人存儲。CodePen是目前最流行的IDE，支持HTML/ CSS/JS，具備像Jade/Haml 和LESS/SCSS一樣自定義的預處理。
CodePen主攻web前端。它可以顯示你最近的創造，並從其他網路資源上得到反饋。為惱人的bug建立一個測試案例。你還可以從CodePen上為你的項目找到設計模式和靈感。
3.card layouts（卡片布局）
網站的卡片布局在幾年前通過Pinterest而普及，從此成為了內容繁多網頁的趨勢。免費插件，如jQuery Masonry可用來模仿這種布局風格，它的動畫卡片可適應不同的高度和寬度。
卡片布局最適合用在信息很多卻又希望能被瀏覽的頁面。Google Now就使用卡片布局來為它的app做廣告。
你可以將卡片式布局看成是很多動態的網格，網格中只呈現最簡明的重要內容，這些內容條目組合在一起就形成了基本的列表。在線雜志就是完美的例子，如UGSMAG和The Next Web，就使用了卡片布局來展示其最新懂得帖子和內容。
4.自定義的解說視頻
形狀各異的組織都趨向於自定義解說視頻。使用動畫，例如Crazy Egg來製作這些視頻。即使如此，不同的視頻依賴於真正的鏡頭，例如Instagram Direct。
解說視頻的目的是說明產品或服務是如何工作的。訪問者有可能在瀏覽了一系列功能之後，依然不知道如何操作這個產品。而可視化的視頻則可以在短短幾分鍾的時間內一一說明功能，並涵蓋所有重要的內容。最關鍵的是人們喜歡觀看視頻而不怎麼喜歡閱讀文章。他們可以很容易地從視頻中明白你想表達什麼。
如果你想自己嘗試做一個自定義的解說視頻，那麼可以閱讀Udemy課程。這是一個側重登陸頁面設計視頻講解的深入學習課程。Udemy課程不僅僅說明了如何使用動畫視頻軟體，它也會告訴你如何使用視頻來吸引和隱蔽訪問者。
5.實況產品預覽
登陸頁面設計因網路速度的提高和瀏覽器功能的擴大，而發生了令人難以置信的改變。我注意到一個重要趨勢是，就是主頁或自定義登陸頁面增加了實時產品預覽。
以Slack的產品頁面作為例子。一個視頻演示和矢量圖形覆蓋了它的界面。這些產品預覽是讓潛在用戶第一眼就知道產品是如何操作的。
不只是消息，所有的文件，圖像，PDF文件，文檔和電子表格都可以放到Slack，和你想要分享的任何人共享。你可以添加註釋，標注星號供以後參考，這一切完全都是可以搜索的。
6.自動化任務運行器
前端開發的世界，隨著一堆針對網站創新而出現的新的最佳實踐，發生了巨大的改變。任務運行器/構建系統，例如Gulp和Grunt，替代了以前事先需要大量手動去完成的任務，越來越被我們廣泛使用。
自動化是快速周轉和高質量代碼的命脈。眾所周知，機器不會出錯，所以自動化程度越高，產生的問題越少。
這些工具基本上運行的是JS代碼，可以自動化實現部分工作流程——無論是自定義的JS代碼還是其他人寫的腳本。
7.用於設計的協作工具
即時消息和群聊已經出現了十多年。人們喜歡這個功能，並在今後他們可以繼續使用此功能。然而，這些資源在傳統上依賴於純文本附加文件的一些功能。
但是，我們在討論的是未來，未來一個新出現的趨勢是，在聊天應用程序中共享實時設計文檔。Notable就是其中一個例子，創新和注釋可以被分層在文檔的頂部。通過快速迭代它提供了更好的界面。從草圖到完全編碼的網頁，Notable讓團隊在設計過程的每一步得到更快的反饋。
Slack是當下最流行的聊天應用程序，支持許多類似的功能。
8.響應式前端框架
前端框架，例如Bootstrap，已經存在了相當長的時間，並將繼續展現其價值。響應式設計，受其成為框架方式的制約，可以成為前端代碼，而不是僅僅只是後端（Django，Laravel，等等）。
邁入2016年，我認為我們會閱讀到更多關於響應式前端框架以及它們在web項目中的價值的內容。並且在接下來的一年時間里，可能會發布很多前端框架的app，比現在的功能更強大。許多設備正在急切等待Foundation 6以及Bootstrap4公共V1版本的發布。
9.更關注UX設計
UX設計是通過改進可用性，可訪問性，以及用戶和產品之間互動產生的愉悅感來加強用戶滿意度的過程。
用戶體驗設計領域將隨著更多設計師和開發者的關注而繼續快速增長。UI設計是UX設計的一部分，但不是最終目標。UI是手段而不是目的，最終目的是提供一個夢幻般的用戶體驗。
目前，針對這些目的的資源有UX Stack Exchange和free UX ebooks。如果你還沒有涉獵用戶體驗，那麼現在是學習和了解UX原則如何應用到所有數字界面窗口的最佳時機。
10.支持觸摸的網站功能
智能手機瀏覽器，支持所有站點的觸摸功能，以保持reverse similarity。我們也可以看到更多的插件和自定義元素添至站點，關注觸摸事件的特定對象。
我們希望網站可以實現觸摸功能。而且這種網站也會因為其獨特的功能而提升訪問量。如Photoswipe和Dragend.js等內置的插件可以處理觸摸屏上的滑動和點擊手勢。web開發人員不僅要會構建響應式網站，還得能構建具備觸摸功能的網站。
這些插件提供了觸摸功能，但是網站還需要具備其他的手勢功能。如果你多搜索一下的話，你會發現一些真正令人印象深刻的，針對web的，內置的，純粹依靠觸摸事件的功能。
這些就是3.0時代的Web設計趨勢，它們的到來和發展將使得構建網站變得更容易和更簡單。
❹ 網頁設計前端和後端的區別越詳細越好。
詳細的解釋一下web前後端的區別
1、
前台：呈現給用戶的視覺和基本的操作。
後台：用戶瀏覽網頁時，我們看不見的後台數據跑動。後台包括前端、後端。
前端：對應我們寫的html、css、javascript 等網頁語言作用在前端網頁。
後端：對應jsp、javaBean、層、action層和service層的業務邏輯代碼。（包括資料庫）
為什麼jsp是後端呢？主要是jsp的運行原理是在tomcat伺服器運行的。
2、
(1)javaweb是java開發中的一個方向 java有搞安卓的，搞web的，搞嵌入式的等。javaweb就是指搞web方向的，javaweb分兩塊，一塊是伺服器端叫後端，另一塊叫前端，也就是web前端。前端就是用戶能看到的部分，比如淘寶網，qq空間，網頁上你能看到的都是web前端做的。後端做的就是為前端的展示業務邏輯功能做處理。
(2)java web包括了jsp，servelt以及一些框架比如spring，structs以及與資料庫交互的知識，當然也涉及到了html，css等前端技術，但是更側重於後端的開發。web前端主要是html，css，javascript之類的技術。
jaweb是javaee的一個方向，Javaweb，由前端、Java代碼、和資料庫三個大方面組成，前端只是其中之一。
(3)在我們的機子上看到的界面，安裝的程序，給用戶看的，操作的就是前端；而你看不到的，幫你保存網路游戲數據，保存應用數據，處理數據的就是後端（伺服器）。比如說：我們在用的知乎就是前端，而保存這個問題，還有把這個問題推送給你的就是後端。
二、定義不同
一般來說，我們將網站分為前端和後端。前端主要負責頁面的展示，後端則是業務邏輯的實現。
1、Web前端:
顧名思義是來做Web的前端的。這里所說的前端泛指Web前端，也就是在Web應用中用戶可以看得見碰得著的東西。包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。
2、Web後端：
後端更多的是與資料庫進行交互以處理相應的業務邏輯。需要考慮的是如何實現功能、數據的存取、平台的穩定性與性能等。
三、需要掌握的技術不同
1、Web前端：
精通JS，能熟練應用JQuery，懂CSS，能熟練運用這些知識，進行交互效果的開發。
(1)精通HTML，能夠書寫語義合理，結構清晰，易維護的HTML結構；
(2)精通CSS，能夠還原視覺設計，並兼容業界承認的主流瀏覽器；
(3)熟悉JavaScript，了解ECMAScript基礎內容，掌握1-2種js框架，如JQuery；
(4)對常見的瀏覽器兼容問題有清晰的理解，並有可靠的解決方案；
(5)對性能有一定的要求，了解yahoo的性能優化建議，並可以在項目中有效實施。
2、Web後端：
後端開發人員：會寫Java代碼，會寫sql語句，能做簡單的資料庫設計，會Spring和iBatis，懂一些設計模式等。
(1)精通jsp，servlet，javabean，JMS，EJB，Jdbc，Flex開發，或者對相關的工具、類庫以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，對Web開發的模式有較深的理解；
(2)練使用oracle、sqlserver、mysql等常用的資料庫系統，對資料庫有較強的設計能力；
(3)熟悉maven項目配置管理工具，熟悉tomcat、jboss等應用伺服器，同時對在高並發處理情況下的負載調優有相關經驗者優先考慮；
(4)精通面向對象分析和設計技術，包括設計模式、UML建模等；
(5)熟悉網路編程，具有設計和開發對外API介面經驗和能力，同時具備跨平台的API規范設計以及API高效調用設計能力。
四、web後端和前端是怎麼連接的？
1、web伺服器（apache、tomcat等），網路協議（http、socket等），瀏覽器（chrome、FF、IE等）。瀏覽器發起建立連接請求，通過網路協議與伺服器建立連接，伺服器保持連接，獲取瀏覽器想要的數據，伺服器通過連接返回內容給瀏覽器，瀏覽器把數據呈現出來。
2、連接的協議一般是http，也有websocket。伺服器以服務的方式存在，就像外賣店，你打個電話過去，人家就把飯菜送上門來了。
3、web伺服器訪問資料庫一樣要使用網路連接，埠只是開放服務的入口而已，就像外賣的電話。
五、JavaWeb與web前端的區別？
1、web前端，主要是給網站做靜態頁面的，也就是說你平時瀏覽的網站所看到的頁面基本都出自web前端，不過網站版面可以是美工出圖。
web前端需要掌握的技術有：DIV+CSS，j，jQuery更高一層的是可以去使用一些框架去網站頁面。這樣的框架也有很多。如Bootstrap，UIkit，Kube等等。
2、javaweb一般涉及到前端。而web前端開發只是有可能涉及到java。
前端開發一般只涉及到js,html,css,有些可能會用flash,photoshop這些。框架就jquery,ext,jodo等這些。
web前端的話他的後端可能是java，也可能是.net或者php等都可能，但javaweb可以確定後端就是java，web前端其實都一樣。
前端和Javaweb的區別更多的在於一個主要負責前端的設計和效果，而Javaweb更專注於後端的內容。
3、剛開始從事web開發時，首先要選准學習方向，看是想從事前端部分還是後端程序部分。當然在工作的後期，就不會分的那麼細致了。做前端到後期也會懂一些後端的技術，反之，後端也是。
六、學習Web前端開發都需要掌握哪些技能？
1、學習html。這個是最簡單的,也是最基礎的.要熟練掌握div、form table、ul li 、p、span、font這些標簽,這些都是最常用的,特別是div和table,div用於布局、table也可以用於布局,但是不靈活,基本 table是用來和數據打交道。
2、學習css。這里說的css不包括css3,一般我們看到web前端開發工程師的要求裡面,有一個會使用css+html 或者 css+div 來進行界面布局,所以css是用於輔助html來布局和展示的,我們稱之為「css樣式」,為什麼會說css+div呢?因為我上面說了div就是 html主要用於布局的東西,所以div就是核心掌握的東西!那麼css肯定必須要配合div來使用才好.css要熟練掌握float、 position、width、height，以及對於的最大最小、會使用百分百、overflow、margin、padding等等,這些都是跟布局 有關系的樣式,一點要掌握。
3、學習js。可能前兩個大家覺得還過的去,看到js就傻眼了,其實吧,js入門很簡單的,不需要會很多東西的,只要會根據某個id、或者name拿到網頁dom或者樣式、或者值,然後會給某個id或者name的元素標簽賦值、或者追加數據、追html,這個是跟數據有關系的操作,然後數據邏輯判斷,效果方面的,無非就是跳轉、彈框、隱藏什麼的,把這些全部結合其他就是實際用途了,代碼一點都不難,會了這些基礎js,其他的直接網路就好了.然後看多了,用多了,就什麼都不是問題了。
4、學習jquery。jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少,jquery入門也很簡單,那些是入門需要學的和js一樣,只是換成了jq的代碼.其他的一樣網路就夠了。
5、最好會點後台語言,比如java、php,為什麼呢?因為前台界面的數據都是從後台來的,如果會點後台代碼,就知道怎麼跟後台交互數據是最好的, 這樣節約時間,也可以讓前端代碼更規范.不然可能因為你的寫法和後端給來的數據不能結合上,那麼前端代碼又得重新寫,那就更加麻煩了。
6、學習css3+html5,可能這個對於更接手的新人來說有點困難，需要較強的代碼知識與經驗，但是如果你們是准備專門搞前端,那麼最好還是學一下，這樣對於將來的工作會有更大的幫助。
七、從事Java後端開發都需要掌握哪些技能？
對於初學Java並且有志於後端開發的同學來說，需要重點關注以下幾個部分：
1、基礎：比如計算機系統、演算法、編譯原理等等
2、Web開發：主要是Web開發相關的內容，包括HTML/CSS/js（前端頁面）、 Servlet/JSP（J2EE）以及MySQL（資料庫）相關的知識。它們的學習順序應該是從前到後，因此最先學習的應該是HTML/CSS/JS（前端頁面）。還有一些前段框架比如easyui,還有js,jquery等技術。
3、J2EE：你需要學習的是Servlet/JSP（J2EE）部分，這部分是Java後端開發必須非常精通的部分，因此這部分是這三部分中最需要花精力的。關於Servlet/Jsp部分視頻的選擇，業界比較認可馬士兵的視頻。 4、資料庫：你需要學會使用資料庫，mysql是個不錯的入門選擇，而且Java領域里主流的關系型資料庫就是mysql。這部分一般在你學習Servlet/Jsp的時候，就會接觸到的，其中的JDBC部分就是資料庫相關的部分。你不僅要學會使用JDBC操作資料庫，還要學會使用資料庫客戶端工具，比如navicat，sqlyog，二選一即可。
5、開發框架：目前比較主流的是SSM框架，即spring、springmvc、mybatis。你需要學會這三個框架的搭建，並用它們做出一個簡單的增刪改查的Web項目。你可以不理解那些配置都是什麼含義，以及為什麼要這么做，這些留著後面你去了解。但你一定要可以快速的利用它們三個搭建出一個Web框架，你在搭建SSM的過程中，可能會經常接觸到一個叫maven的工具。這個工具也是你以後工作當中幾乎是必須要使用的工具，所以你在搭建SSM的過程中，也可以順便了解一下maven的知識。在你目前這個階段，你只需要在網路上了解一下maven基本的使用方法即可，一些高端的用法隨著你工作經驗的增加，會逐漸接觸到的。
6、你需要去看一些JDK中的類的源碼，也包括你所使用的框架的源碼。這些源碼能看懂的前提是，你必須對設計模式非常了解。否則的話，你看源碼的過程中，永遠會有這樣那樣的疑問，這段代碼為什麼要這么寫？為什麼要定義這個介面，它看起來好像很多餘？由此也可以看出，這些學習的過程是環環相扣的，如果你任何一個階段拉下來了，那麼你就真的跟不上了，或者說是一步慢步步慢。總而言之，這個階段，你需要做的是深入了解Java底層和Java類庫（比如並發那本書就是Java並發包java.concurrent的內容），也就是JVM和JDK的相關內容。而且還要更深入的去了解你所使用的框架，方式比較推薦看源碼或者看官方文檔。
希望對您有所幫助！~
❺ 前端頁面有哪三層構成，分別是什麼作用是什麼
最准確的網頁設計思路是把網頁分成三個層次，即：結構層、樣式層、行為層。
HTML：結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。正如房屋的框架為房屋的其他部分構建了一個堅實
的基礎，HTML的堅實基礎創建了一個可以在其上創建網站的平台。
結構層用於存儲客戶想要閱讀或查看的所有內容。HTML結構可以包含文本和圖像，它包括訪問者用
於瀏覽網站的超鏈接。這是在符合標準的HTML5中編碼的，可以包括文本，圖像和多媒體（視頻，音頻等）。
網站內容的每個方面都應該在結構層中表示。這允許關閉JavaScript的客戶或無法查看整個網站的
CSS訪問許可權的客戶（如果不是所有功能）。
CSS：樣式層
該層指示結構化HTML文檔如何看待網站的訪問者，並由CSS（層疊樣式表）定義。這些文件包含有
關如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基於屏幕大小和設備更改站點顯示的
媒體查詢。
網站的所有視覺樣式都應位於外部樣式表中。您可以使用多個樣式表，但請記住，每個CSS文件都需
要HTTP請求才能獲取它，從而影響站點性能。
JavaScript：行為層
行為層使網站具有交互性，允許頁面響應用戶操作或基於一組條件進行更改。JavaScript是行為層最
常用的語言，但CGI和PHP也經常被使用。
當開發人員引用行為層時，大多數都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與
DOM（文檔對象模型）進行交互。在內容層中編寫有效的HTML對於行為層中的DOM交互非常重
要。在構建行為層時，應該像使用CSS一樣使用外部腳本文件來優化速度和性能。
(5)前端演示頁面設計擴展閱讀：
分層的一些好處是：
共享資源：當您編寫外部CSS或JavaScript文件時，站點上的任何頁面都可以使用該文件。如果
您需要對該文件進行更改，也許更新網站上的某些排版樣式，則使用該樣式表的每個頁面都會得到
更改。沒有必要單獨編輯網站的每個頁面，這對於大型網站來說可能是一項艱苦的任務。
下載速度更快：首次由客戶下載腳本或樣式表後，Web瀏覽器會對其進行緩存。由於這些共享
資源現在包含在瀏覽器的緩存中，因此瀏覽器中請求的其他頁面載入速度更快，從而提高了整體頁
面速度和性能。
多人團隊：如果您有多個人同時在網站上工作，您可以使用允許文件簽入和簽出的系統，以確
保每個人都使用最新版本。如果樣式和行為與結構文檔交織在一起，那就更難了。
搜索引擎優化：一個明確分離風格和結構的網站可能會對搜索引擎有更好的表現，因為它們可以更有效地抓取內容並理解頁面而不會陷入視覺風格和行為信息。
輔助功能：外部樣式表和腳本文件更易於人們和瀏覽器訪問。屏幕閱讀器等軟體可以更輕松地
處理結構層中的內容，而無需處理無論如何都無法使用的樣式。
向後兼容性：使用單獨的開發層設計的站點更可能向後兼容，因為無法使用某些CSS樣式或禁
用了JavaScript的瀏覽器和設備仍然可以查看HTML。然後，您可以使用支持它們的瀏覽器的功能逐
步增強您的網站。
❻ 關於前端頁面，產品經理該如何理解/如何設計
前端頁面，意味著用戶的直接體驗過程，這當中包括了很多的技巧，我們不妨從下面幾個方面來考究這個問題
界面的美觀
愛美之心，人皆有之，前端頁面作為用戶的直接體驗，其美觀度無疑是是否能夠給頁面加分的一個重要點位，現在的用戶一般情況下，我見過最多的就是界面設計的一定要逗枝高大上，甚至是有一些花里胡哨的，有些時候，甚至功能還不如界面重要，比如大屏展示，要的就是要侍指銀炫，給人的感覺就是貌似要很高大上。也的確，有些時候就是要好看，其實用價值甚至不如審美價值！
頁面的交互
頁面的交互無疑是另外一個加分點，特別像管理系統之類的系統，涉及到很多用戶的交互，那麼多的交互都是要算工作量的，現在的人工作都很忙，那麼在系統界面上的設計就得考慮到這個方面，需要盡可能的智能，怎麼說呢，就是盡可能的減少用戶自己的操作，有很多可以通過代碼去解決的就不要用戶自己手動去操作，一方面用戶操作過多可能會出現未知問題，一方面用戶操作過多，直接體現就是工作量上的提升，作為用戶就是想偷懶，界面上的設計自然越智能越好。特別是現在的行業競爭相當的激烈，能夠從界面用戶的體驗上奪得加分項，那肯定能夠提升產品的競爭力度。
頁面的元素
頁面元素，說白了就是用戶在操作過程中使用到的頁面組件，這個和頁面的交互會有一定的交叉，用戶想以最少的步驟來完操作，那麼頁面上的交互組件的選擇就很重要，由於頁面就那麼大范圍，不同客戶的設備還有差別，手機，PC都會有不同的體驗，所以一款優秀的產品，在界面的組件選擇上肯定具備良好的體驗
產品的質量
產品的質量，可以從兩個角度來分析，一方面就是產品的功能，產品經理的工作就是需要深入的理解用戶的需求，需要以客戶的需求為中心，細細揣摩用戶的真正需求，有時候客戶表達的是一層意思，但是真正想要的確實另一層意思，這就需要產品經理去和客戶溝通，只有深入的理解了產品，才能設計出符合用戶需求界面出來；另一方面，不得不說的就是產品界面的bug，說的直白一點就是產品的穩定性，用戶實老宴用這個產品，能夠反饋給用戶的就是界面上的，那麼界面的bug能降低到最少無疑是必須的，這就需要不斷的測試去改進，再者，產品都是不斷改進的，有可能產品初期並不完美，那麼提供一個反饋界面可以供用戶填寫，這就能收集到用戶的直接反饋，那麼也就能夠從用戶反饋中去不斷的改進，當然這不僅僅是界面上，而是整個產品
總結
一款優秀的產品絕對是用戶口碑好的，就算產品再好，用戶的體驗不好也是無濟於事，產品的界面設計也是需要從多個方面考慮，以上僅代表個人的一些見解，並不一定準確。
❼ 前端做的程序都是哪方面的
每天我們打開電腦，看到各種各樣的Web前端頁面。你知道他們是如何製作的嗎？為了讓頁面更具有規范性，讓使用者更加方便，在製作頁面過程中必須遵循一定的設計流程。在這里就為大家詳細介紹一下製作一個Web前端頁面的設計流程及注意事項。
一：確定網站主題
每個網站都有自身以及對用戶的定位賀鬧。針對網站定位確定網站的主題是整個網站運營的核心。一般從網站建設的目標、網站用戶群體、網站產品內容以及企業服務四個方面確定網站主題。此外還需要注意，每個頁面不但要承載整體企業的定位，同時還要側重其中某一個特定主題。
二：網站整體規劃
為了提高用戶體驗以及提高網站在搜索引擎收錄率，在網站建設初期最好能夠理清網站機構，增加不同頁面之間的關聯性，從而更好規劃頁面的布局以及網站功能。一般情況下，產品經理在設計網站初期就會提供完整的業務邏輯圖，設計師和前端工程師根據業務邏輯架構完成相關頁面的設計開發。需要重點考慮的內容包括：網站的功能、網站的結構、拌面布局等等。尤其在網站功能需求較多的情況下，網站整體規劃更加重要告拍鍵。
三、整合素材
在網站整體架構完成後，就可以開始整合收集素材了。網站開發和網站內容籌備同步進行，可以大大提高網頁開發的效率。主要收集的素材包括文本素材（一般由公司內容運營提供相應的文字素材，需要注意的是，這些文字素材的准確性以及版權非唯一性）、圖片素材（現在很少有純文字性的網站，往往需要大量的圖片素材，甚至還有視頻素材等）。
四、網站開發與動態效果
前端頁面開發主要用到HTML、CSS、JavaScript技術。在確定網站結構以及頁面設計圖齊全的情況下，前端開發工程師就可以進行頁面開發了。這個過程中主要完成頁面搭建以及動態效果實現。
此外在前端頁面設計過程中還需要有一些常規的注意事項：襪巧頁面解析度設置，在設計網頁時，頁面的寬度盡量不要超過屏幕的解析度，否則頁面可能無法完全展示；注意頁面版心位置。目前比較流行的屏幕寬度解析度一般1200PX~1920px，為了適配不同解析度的顯示器，一般設計班型寬度在1000Px~1200Px之間。
這就是為大家分享的Web前端頁面製作流程以及注意事項。在不同的公司中，前端工程師的崗位職責是不同的，甚至在某些大型互聯網公司中，部分前端工程師僅僅做其中一個環節，即使如此作為前端工程師還是要多多學習大前端的技術知識，才能更好的適應企業人才需求。
❽ 如何製作一個優秀的網站前端頁面
在製作網站前端時，需要遵循一些設計規范；
①使用當前最流行的設計理念，2017年最流行設計是扁平化風格，卡片式布局；
②網頁特效更具有趣味性，建議使用目前最流行的H5流動效設計。
③如果是需要製作營銷型網站，那麼首頁內容要豐富，內頁頁面也不能沿用傳統的固定格局，可以考慮多單獨製版一些頁面，這樣更能體現公司實力。
④內頁設計與欄目名對應的主題圖片，應該每個欄目頁均有一張Banner圖；
⑤內頁左側製作相對應的二級欄目，增加訪客良好體驗；
⑥不出現文字錯誤和圖片錯誤；
⑦對於可預料的內容進行提前設置，比如圖片變形預案，字數多時頁面會換行的解決辦法；
⑧最後，網頁編碼時一定要按照W3C標准編寫代碼，這樣才能讓瀏覽器更好地閱讀和展現網頁。