A. 微信前端h5商城UI設計規范標注與切圖是具體規范是什麼,我切的二倍圖,前端說我的圖大了字體也不對,求解
前端的問題,你給前端圖片的外部容器的寬以百分比的形式存在就行了。
B. 前端通用組件設計
調用組件庫的API相信很多人都會用,但是如何封裝一個高復用的組件並不是每個人都能做到,而這也是檢驗一個前端開發人員的一個標准。
說到開發組件,首先需要考慮一個問題,一個可復用的組件都需要具備哪些必要條件。
1. 細粒度考量
看過設計模式的朋友應該有了解過很多設計原則,其中一個就是 單一職責原則 ,這個原則放在開發組件中也同樣適用。在原則上一個組件就只負責一件事,這就是單一原則所帶來的好處也非常明顯,就是可以更大可能的復用組件。但如果職責過於單一,也會造成組件碎片化嚴重,過於抽象。
因此我們需要考慮,所謂的單一職責原則是建立在可復用的基礎上的。否則,可以做為獨立組件的內部組件進行使用。
2. 組件通用性考量
組件設計之初是為了當時的頁面設計進行封裝設計的,那麼之後的頁面設計極大可能是與之前不同的,那麼之前設計的組件就不能用了。
而一旦發生這樣的情況,就說明我們之前所設計的組件是不通用的,需要重新設計了。就像Antd組件庫那樣,預留了dropdownRender進行組件渲染。
通用性的設計就代表著將放棄對DOM的操作權,暴露給開發者進行操作,組件開發者本身只負責底層邏輯和基本的DOM結構。這也是開發通用型組件的秘訣之一。
3. 技術選型
css存在著許多的弊端,例如樣式易沖突(沒有作用域的概念)、書寫繁瑣(不支持嵌套)、缺少變數(不便於一件更換主題)等等。而解決這些問題的方案也是層出不窮,從最早的css預處理,到後來的Postcss,再到後來的styled-compontent,各種方式任君選擇。
4. 打包工具
產品的設計思想固然是核心,但是也需要一堆輔助工具來來幫助我們開發,例如編譯工具、測試工具、打包工具。
說到打包工具,就不得不提一下如今非常火爆的,需要配置工程師專門配置的webpack了。但是他也有一個強大的競爭對手 rollup。
rollup更適合用於組件庫的打包,優勢如下:
設計一個輪播圖組件
學以致用,學了就肯定要實踐一下。輪播圖是一個比較常見的組件,每個組件庫中都封裝的有,接下來我們也來介紹一下如何設計一個輪播圖組件。
1. 輪播圖原理
通常情況下我們使用輪播圖是這樣編寫的
那麼為什麼放入了四個div盒子卻只顯示一個呢,這是因為可視區域是固定的,只需要移動div盒子就可以顯示出後面的盒子,這樣就達到了輪播的效果。
為了是觀看效果更好,我們都會隱藏掉可視區域之外的內容,這樣就是大家經常看到的輪播圖了。組件就可以這樣設計:
可以通過transform: translateX()不斷改變SlideList的位置,就可以達到輪播的效果了。
2. 輪播圖的基礎實現
知道了基礎原理就可以進行組件的實現了,這里以移動端輪播圖為例。
首先,獲取移動端可視窗口的寬度。
------- 未完待續 --------
C. 網頁設計前端和後端的區別越詳細越好。
詳細的解釋一下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的相關內容。而且還要更深入的去了解你所使用的框架,方式比較推薦看源碼或者看官方文檔。
希望對您有所幫助!~
D. 前端功能的詳設評審
就是要讓你自己明白在這個過程中可能會耗得時間比較長,但是把整個過程思考透徹的話,自己在開發的時候就一目瞭然了,自己測試或者別人測試的時候也會很清晰,降低給別人給自己挖坑的概率。
HTML、CSS、JavaScript這三個是前端開發中最基本也是最必須的三個技能。前端的開發中,在頁面的布局時, HTML將元素進行定義,CSS對展示的元素進行定位,再通過JavaScript實現相應的效果和交互。
前端技術一般分為前端設計和前端開發,前端設計一般可以理解為網站的視覺設計,前端開發則是網站的前台代碼實現 。
E. 設計師需要了解哪些前端知識
但凡從事互聯網的人基本都會寫幾行 html,用過 Word 的人用 Dreamweaver 也能做出規整的頁面,所以大部分人會很自然地認為「頁面的開發沒什麼技術含量,很簡單」。但實際上這種認知是錯誤的,隨著頁面內容的豐富,設計風格的發展,交互復雜性的增加,AJAX 的應用,瀏覽器的更新換代,前段設計不僅僅是頁面的布局還有許多其他的內容工作。
下面總結一下作為一名前端設計師應該具備的知識:
1、實現效果圖,把視覺稿通過頁面代碼的方式表現出來包含了兩個基本訴求:1.能夠真實反映視覺稿;2.能夠通 過瀏覽器的兼容。這兩個訴求的達成需要我們有追求細節的態度和一定的頁面功底,能完成這兩個內容就可以初步進入頁面前端的從業者行列了。
2、實現良好的頁面結構,頁面結構的編寫好壞會直接影響到 CSS 代碼的質量、js 開發、後台開發還會影響到以後的頁面拓展、迭代和頁面調整。所以實現良好的頁面結構的能力尤為重要。
3、能寫初優美的代碼,現在很多 web 項目功能復雜,代碼規模也會變得很龐大,如何更好地進行協同開發和維護是我們面臨的一個問題。需要考慮完善統一的規劃,還有要養成良好的代碼開發習慣才會在面臨各種情況時游刃有餘。翻閱頁面代碼,看到合理的標簽使用、良好的注釋、清晰的代碼結構、用意准確的 css 不僅猶如欣賞一個藝術品,更為下游開發和協同開發降低了不小的溝通成本。
以上這些知識都是一個優秀的前段人員必備的能力,如有遺漏後期補充。
F. web前端設計難學嗎
相較於其它編程類技術,前端開發是最易學的一門技術。可以這么理解,Web前端開發技術是一個先易後難的過程,它主要包括三個大的技術架構是:HTML、CSS、JavaScript。
HTML是一種超文本標記語言,就是結構標簽,並不會涉及到復雜高深的技術邏輯,更多時候是需要牢記、背下來一些標簽的作用。所以這個學習階段主要考驗的是記憶力,如果記憶力不好也沒關系,可以多記筆記,需要用到什麼功能的時候看筆記就可以,時間長了代碼練習多了自然就記住了。
CSS的學習方式和HTML大同小異,它的作用是樣式配置,更多時候也是一個死記硬背的過程,不涉及太復雜的邏輯。
比較有難度的是學習JavaScript的過程,這個階段需要接觸到很多復雜的邏輯。HTML和CSS需要互相結合學習,只學習這兩個只能展現一個靜態界面,如果想要增加動態的效果就必須要學習JavaScript。靜態頁面是比較容易就可以實現的,功能全面的動態頁面需要很多復雜邏輯技術的支撐,JavaScrip就是實現這些功能的主要技術。
Web前端技術相較於時下流行的編程語言如:Java、Python、C、C++、C# 等來講,是最容易學習的,也是最容易入門找工作的。但是想要達到高級前端開發工程的水準,並不是一件容易的事,需要在工作崗位上很多年不間斷的學習新技術,付出很大努力才行。
G. UI設計前端主要學些什麼
UI設計不一定需要精通前端,但是如果UI設計了解前端可以減少和開發人員溝通的技術成本,讓團隊協作更加高效。那UI設計如何學習前端,需要學習到什麼程度呢?
我們分享一個前端教程-網頁鏈接,這裡面詳細講解了UI設計中的Web前端設計規則及工具,可以幫助大家深入理解Web前端UI設計方法。
1、HTLM基礎認知DIV框架及CSS樣式
首先要了解HTLM基礎、CIV框架以及CSS樣式, HTML稱為超文本標記語言,是一種標識性的語言。它包括一系列標簽.通過這些標簽可以將網路上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。DIV元素是用來為HTLM文檔內大塊的內容提供結構和背景的元素。 CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字型大小樣式,擁有對網頁對象和模型樣式編輯的能力。
2、浮動原理、Margin認知
Margin,是CSS的語法,這個簡寫屬性用於在一個聲明中設置所有當前或者指定元素所有外邊距的寬度,或者設置各邊上外邊距的寬度。
3、框架應用搭建
框架很多,在這個教程中選擇一個主流框架帶大家看看前端框架如何搭建。
4、插入圖片、文字標簽和版頭、導航欄
編寫的網頁中插入圖片,可以使瀏覽網頁的用戶得到更好的體驗效果。在這一部分會講解插入圖片、文字標簽以及版頭和導航欄如何實現。
5、Banner塊插入、內容文字排版、內聯元素、A標簽和Banner鏈接定位
Banner是網路廣告最早採用的形式,也是目前最常見的形式。它是橫跨於網頁上的矩形公告牌,當用戶點擊這些橫幅的時候,通常可以鏈接到廣告主的網頁。而網頁中的文字內容排版也直接影響著網頁的美觀以及網頁的用戶體驗。
6、錨點標簽、超鏈接標簽、固定定位和絕對定位、相對定位
<a> 標簽用於定義超鏈接,用於從一張頁面鏈接到另一張頁面。用於設置錨點,用於頁面定位。
7、導航二級菜單顯示隱藏
很多網頁中的二級菜單欄不直接顯示,需要滑鼠移動到一級菜單或者點擊一級菜單才會展開顯示二級菜單。
8、input表單
input表單可以獲取用戶的信息,做出對應的動作,教程中直觀的展示input表單的應用方法。
其實以上教程只是web前端很小的一部分,UI設計如果能夠了解前端知識,在設計中可以更好的考慮實現問題,也能夠更好的和開發人員交流,也能夠提高團隊協作的效率,加速項目的進度。
H. 如何製作一個優秀的網站前端頁面
網站首頁是用戶進入你網站看到的第一面,如果這第一面給用戶的印象不好,不夠吸引,那樣會讓用戶沒有了繼續瀏覽的慾望。一個不夠吸引人的網站首頁,就算你網站推廣做的再好,IP量再高,但是往往就是因為網站首頁設計的不夠好、不夠精緻、不夠吸引,從而導致了網站轉化率不高。網站首頁的設計不但在網站建設過程中很重要,在網站優化中也起到了關鍵作用。那麼一個優質的網站首頁該怎麼樣設計呢?一個震撼的網站首頁用什麼設計呢?
網站首頁無論是放在網站設計,還是網站建設和網站優化中都是首要針對的步驟。不管是企業網站、個人網站,還是商城網站、分銷網站。網站首頁都要足夠精緻、獨特、設計風格鮮明,這樣才能讓瀏覽的用戶視覺上的沖刺,從而可以觸發用戶的消費慾望或者繼續瀏覽的念頭。
I. 前端設計以後可以從事什麼樣的工作
前端平面設計可以從事互聯網,軟體行業的美工,也可以去廣告公司去做設計。