當前位置:首頁 » 網頁前端 » 前端只會頁面布局
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端只會頁面布局

發布時間: 2022-06-23 15:46:01

1. 網頁設計中,前端主要是做什麼的

在互聯網行業,前端有WEB前端、HTML前端等,隨著互聯網技術發展,就業方向也有很多。web前端的就業方向有web架構師、web前端工程師、HTML前端開發工程師、網頁設計師等等。一般情況下,網頁設計和網頁美工也是前端工作的一部分。
HTML前端開發
與Web前端開發不同的是,使用HTML5不僅僅可以開發前端,還有網頁游戲,手機APP,使用瀏覽器進行3D渲染等一系列建立在HTML5標准與搭載其標准瀏覽器上的開發,而未來可能會有更多的功能分支並入HTML5標准。web前端工程師這個方向是目前從事Web前端開發的主要就業方向

2. 前端具體是做什麼

前端具體是製作網頁的。

前端即網站前台部分,運行在PC端,移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展,HTML5,CSS3,前端框架的應用,跨平台響應式網頁設計能夠適應各種屏幕解析度,合適的動效設計,給用戶帶來極高的用戶體驗。



核心技術

HTML、CSS、JavaScript,這三個是前端開發中最基本也是最必須的三個技能。前端的開發中,在頁面的布局時, HTML將元素進行定義,CSS對展示的元素進行定位,再通過JavaScript實現相應的效果和交互。

雖然表面看起來很簡單,但這裡面需要掌握的東西絕對不會少。在進行開發前,需要對這些概念弄清楚、弄明白,這樣在開發的過程中才會得心應手。

3. 前端拿到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。

4. 前端頁面設計有幾種分式

前端基本布局分大致5種,table布局,float 布局,absolute布局,flexbox布局,grid布局。假設高度已知,寫出三欄布局,其中左右寬度各為300px,中間自適應。

5. 前端布局的幾種方式

1.固定布局,靜態布局

傳統Web設計,網頁上的所有元素的尺寸一律使用px作為單位,網頁寬度一般為960px。網頁布局始終按照最初寫代碼時的布局來顯示,不受瀏覽器影響。如果瀏覽器寬度如果小於這個寬度就會出現滾動條,如果大於這個寬度則內容居中外加背景

2.流式布局

流式布局使用的是百分比,這位網頁提供了很強的可塑性和流動性,與固定寬度布局基本不同點 就在於對網站尺寸的側量單位不同。屏幕解析度變化時,頁面里元素的大小會變化而但布局不變,這可能導致如果屏幕太大或者太小都會導致元素無法正常顯示。

3.自適應布局

自適應布局的特點是分別為不同的屏幕解析度定義布局,即創建多個靜態布局,每個靜態布局對應一個屏幕解析度范圍。使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式,例如寬度960px是一種樣式,網頁寬度1440px是另一種樣式。改變屏幕解析度可以切換不同的靜態局部,但在每個靜態布局中,頁面元素不隨窗口大小的調整發生變化。

4.彈性布局

使用em 或 rem 單位進行相對布局,相對%百分比更加靈活,同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。這種布局中包裹文字的各元素的尺寸採用em/rem做單位,而頁面的主要劃分區域的尺寸仍使用百分數或px做單位。默認的文字大小16px就是1em。

5.響應式布局

每個屏幕解析度下面會有一個布局樣式,即元素位置和大小都會變,設計方法通常採用了媒體查詢+流式布局,使用@media媒體查詢給不同尺寸和介質的設備切換不同的樣式。為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。

6. WEB前端怎麼布局

在談WEB前端怎麼布局前,我們先梳理前端的布局類型,具體有以下幾種:
1.靜態布局:不管瀏覽器尺寸具體是多少,網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態(定寬度)布局的,也就是設置了min-width,這樣的話,如果小於這個寬度就會出現滾動條,如果大於這個寬度則內容居中外加背景,這種設計常見於pc端。
2.流式布局:布局特點是屏幕解析度變化時,頁面里元素的大小會變化而但布局不變。
3.自適應布局:自適應布局的特點是分別為不同的屏幕解析度定義布局,即創建多個靜態布局,每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局:布局特點是每個屏幕解析度下面會有一個布局樣式,即元素位置和大小都會變。
那麼我們如何布局呢?通過以下幾點來選擇布局。
1.如果只做電腦端,最好的選擇是靜態布局。
2.如果做移動端,且設計對高度和元素間距要求不高,那麼彈性布局(rem+js)是最好的選擇,通過一份css+一份js調節font-size就搞定。
3.如果電腦端,移動端要兼容,而且要求很高,那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計,響應式根據媒體查詢做不同的布局。

7. 前端布局需要學習什麼知識呀

css、html和table。
前端布局使用css,即層疊樣式表,控制頁面的顯示。以前是使用table進行布局的,但由於table布局不便於維護,每次修改的時候都需要更改頁面結構。所以後來就逐漸被css所代替,在需要使用表格的時候才使用table。
除了要使用css之外,還要使用html。html用來表明頁面的結構,css決定頁面結構的顯示方式。

8. #web前端開發#前端只擅長頁面布局和動效,不會數據交互是不是找不到工作了

分析:

現在前端大概分為下面幾種

  1. 交互設計師

  2. UI設計師

  3. 美工(靜態頁面和動畫居多)

  4. JS工程師

  5. node工程師

  6. 以上多個(後三個)

你的情況的話, 應該在官網和活動營銷頁比較受歡迎, 都是屬於酷炫+需要頻繁發布更新引流的頁面, 特別是活動營銷頁面的公司比較受歡迎

建議

現在大前端形式下, 還是會多種比較好(除非是在大公司專精一門, 例如你就是專精頁面布局和樣式規范性、合理性、優化等等), 目前大部分前端都會Vue/react/ng 其中一種mvvm前端框架,如果你沒做過類似的前端數據交互多一點的頁面, 我建議你從vue入手,vue 中文官網 可以學習基本語法, github上也有小項目可以學習和使用

進階

node是一個不錯了解後端思維和前後端交互的方式,和js語法差不多, 但是會更你更進一步

9. 前端開發是做網頁的頁面,其實就是布局,但後端呢什麼是後端學什麼

前端是實現頁面的效果,布局,樣式。而後台是實現它數據的交互,比如前端做出來,是一個頁面,能有各種點擊的那些效果,而後端則要把它們各個頁面的數據傳上去,傳到伺服器上面,還有比如一個頁面被訪問點擊了多少次,都是由後端負責做的

10. 前端頁面布局有幾種

常用flex布局,也有用浮動布局的,還有定位布局,表格布局