Web前端職位分為：1 網(wǎng)頁制作、 2 前端制作工程師、 3 網(wǎng)站重構(gòu)工程師、 4 前端開發(fā)工程師”、5 資深前端開發(fā)工程師 6 前端架構(gòu)師。 一般來說，幾個人的小團(tuán)隊這個職位的名稱沒有那么嚴(yán)格了，叫網(wǎng)頁制作或者前端制作什么的；規(guī)模較小的UED中的Web前端團(tuán)隊，叫做“網(wǎng)頁制作工程師”或者“Web前端制作工程師”； 騰訊的Web前端設(shè)置比較特殊，他們的規(guī)模較大，不叫UED，而是叫做ISD，他們的分工一般來說也是只負(fù)責(zé)Web頁面的HTML和CSS部分，可能也包含少部分的JavaScript代碼，而他們的這個職位叫做“Web重構(gòu)工程師”。 而類似淘寶UED這種比較大的UED團(tuán)隊，其Web前端人員的職責(zé)范圍也更大一些，他們的Web前端人員不僅要做HTML和CSS，還要做全部的JavaScript或者ActionScript，并且進(jìn)一步擴(kuò)展到Ajax甚至PHP等腳本語言的范圍，而其相關(guān)的職位則主要分為“前端開發(fā)工程師”、“資深前端開發(fā)工程師”以及“前端架構(gòu)師”。

個人覺得現(xiàn)在的自助建站系統(tǒng)都很火，沒有必要去用軟件制作，如discuz系統(tǒng)，新云系統(tǒng)，pageadmin系統(tǒng)，都是比較不錯的，我自己的網(wǎng)站是用pageadmin建站的，總體來說很簡單。

一個是偏向于設(shè)計，一個是偏向于代碼。如果是網(wǎng)頁設(shè)計，剛開始可能是模仿別人的網(wǎng)頁，但是到了最后會出現(xiàn)慢慢的偏重于美術(shù)，心理學(xué)，色彩，繪畫等。這些藝術(shù)方面，表面你能看到的，如果你是學(xué)計算機(jī)的接觸過網(wǎng)頁設(shè)計，并喜歡網(wǎng)頁設(shè)計，我建議不要偏向這個方面，因為到后來讓你自己獨(dú)立設(shè)計網(wǎng)頁時，色彩搭配是很難的，還有整體布局，以及是否符合當(dāng)下潮流等?，F(xiàn)在的網(wǎng)頁千變?nèi)f化，設(shè)計也要不斷學(xué)習(xí)，并且能跟得上。 對于web前端開發(fā)這個就是把別人設(shè)計好的自己用div+css+js去實現(xiàn)的，一個簡單的網(wǎng)頁可能就是div+css把它寫出來，但是這里面是充滿經(jīng)驗的。web前端的發(fā)展過程中到了最后就是頭疼的兼容性問題，因為要確保一個頁面在任何瀏覽器當(dāng)中能正常顯示是很不容易的，瀏覽器廠商那么多，各自還有自己的專屬屬性，而且有的還要求在手機(jī)中能夠顯示，能夠自適應(yīng)屏幕等。單純的css無法來控制，就需要學(xué)習(xí)javascript, web前端看似簡單其實要學(xué)習(xí)的東西很多，經(jīng)驗也特別重要，接觸后臺后你會更明白前端的重要性。

前端開發(fā)和網(wǎng)頁制作不是一個職位，即前端開發(fā)包含網(wǎng)頁制作。網(wǎng)頁制作：一般意義上的網(wǎng)頁制作可以分為兩部分，即網(wǎng)頁設(shè)計和網(wǎng)頁排版，僅從技術(shù)上來說，學(xué)會兩個軟件就夠了，Photoshop和Dreamweaver。前者負(fù)責(zé)設(shè)計效果圖和切圖即網(wǎng)頁設(shè)計，后者負(fù)責(zé)編寫html代碼以及css樣式表文件，也就網(wǎng)頁排版，將切割后的圖重新按照效果圖的樣子擺放在網(wǎng)頁對應(yīng)的位置上。如果對網(wǎng)頁制作下個定義，就是用網(wǎng)頁制作工具制作網(wǎng)頁。前端開發(fā)：到目前為止沒有一個明確的定義，甚至將后臺的某部分引入到前端開發(fā)之中，但是聽起來也不無道理。下面給出一個前端開發(fā)工程師需要掌握的技能表：前端開發(fā)工程師的核心技能：1、開發(fā)語言。核心掌握的語言有html+css+JavaScript。html發(fā)展歷史有出現(xiàn)有二十多年，歷經(jīng)多次版本更新，JavaScript作為最難的語言之一，許多編程高手對之也不敢妄自菲薄自封精通。許多人都說前端開發(fā)要掌握的技能太簡單，這是對html語言的一種誤解。之前由于工具和沒有較強(qiáng)邏輯性，大部分人對前端開發(fā)很輕視。導(dǎo)致前端開發(fā)在國內(nèi)的發(fā)展異常緩慢。即使是現(xiàn)在，許多在前端開發(fā)的人員還不知道為什么要有html5和css3，這兩項技術(shù)能帶來什么革新就更不必問了。由于JavaScript與html的差異性，以及靜動態(tài)分開處理的一些好處。在大公司編寫靜態(tài)效果和動態(tài)效果往往是分開由不同的人完成的。小公司因為需要壓縮成本，就要求每個人會的越多越好。至于php等一些后臺語言，則是前端開發(fā)的擴(kuò)展語言，想要成為前端開發(fā)項目經(jīng)理，必須要懂得后臺實現(xiàn)的思路，并能夠?qū)懗鲞m合后臺修改的模板，不會讓他們頭大的想砸電腦。試想在DW生成的一個1MB多的頁面里出現(xiàn)了錯誤，什么時候才能找到錯誤的根源并解決?2、瀏覽器調(diào)試電腦上的瀏覽器，有IE6\7\8，F(xiàn)irefox，chrome，opera，safari，遨游，包括國內(nèi)主流的搜狐，騰訊TT，360，世界之窗。從內(nèi)核上講主要有IE的，遨游版IE，safari，firefox以及opera的。每種內(nèi)核對代碼的解析是不完全一樣的，即使同樣內(nèi)核也可能存在很大差異，如IE和遨游版的IE。不說非主流的瀏覽器，就主流的8個瀏覽器，要做到完全兼容，并不是那么輕松的。需要長時間的積累測試，需要前端開發(fā)工程師對前端開發(fā)的熱愛和激情。3、hack技術(shù)這項技術(shù)其實沒必要單獨(dú)列出來，前端開發(fā)人員往往要給別的人去擦屁股，這時候hack技術(shù)就能大顯神威，提高工作效率。雖然寫代碼都要求按照標(biāo)準(zhǔn)來，不寫hack代碼，但實際工作中給別人擦屁股是免不了的。所以這也應(yīng)該是每個前端開發(fā)人員必備的技能。4、業(yè)內(nèi)標(biāo)準(zhǔn)這些標(biāo)準(zhǔn)代表了互聯(lián)網(wǎng)發(fā)展的方向，也代表了前端開發(fā)的一種信仰。寫的代碼，都要100%通過標(biāo)準(zhǔn)驗證，為通過標(biāo)準(zhǔn)驗證而感到自豪。這種推動業(yè)界發(fā)展的自豪感，是許多后臺工作人員所不能體會到的。此外一些PS等一些知識也要掌握掌握以上技能，可以說只能算是一個合格的前端開發(fā)人員，能夠參與到一個大的項目中，或者自己獨(dú)立寫出一個網(wǎng)頁。此時和網(wǎng)頁制作設(shè)計的區(qū)別不是特別明顯，效果上來看，都是制作網(wǎng)頁的，但實際上，技術(shù)上所超于的已經(jīng)是幾個檔次的東西了。而這些，恰恰是一個普通網(wǎng)頁制作設(shè)計所做不到的事情。因為不懂DW背后的代碼，也有部分人說懂得手寫代碼，只能說，不在手寫代碼中實踐、解決問題，根本不能領(lǐng)會到手寫代碼的精髓。顯然一個好的前端開發(fā)人員是連通和設(shè)計和代碼之間的一個橋梁。既要有理工的嚴(yán)謹(jǐn)又要有文藝的情懷。既要懂得交互設(shè)計，提高用戶體驗，又要具有美術(shù)基礎(chǔ)和審美能力，而在此基礎(chǔ)之上，還要對已完成的頁面進(jìn)行維護(hù)和以及網(wǎng)站前端性能做相應(yīng)的優(yōu)化。而網(wǎng)頁制作只是這整個前端開發(fā)過程的一個組成部分，所以真正的前端開發(fā)人員是一個很厲害的角色。

Web前端開發(fā)技術(shù)主要包括三個要素：HTML、CSS和JavaScript！它要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識，而且要學(xué)會運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識，包括代碼的可維護(hù)性、組件的易用性、分層語義模板和瀏覽器分級支持等。如何學(xué)習(xí)前端知識？我們生活在一個充滿規(guī)則的宇宙里面。社會秩序按照規(guī)則運(yùn)行，計算機(jī)語言幾乎全部是規(guī)則的集合。計算機(jī)前輩們定義規(guī)則，規(guī)則約束我們，我們用規(guī)則控制數(shù)據(jù)。大部分時候，對數(shù)據(jù)的合理控制，來自于你對規(guī)則的掌握?，F(xiàn)在很多小伙伴喜歡在互聯(lián)網(wǎng)上找視頻資料學(xué)習(xí)網(wǎng)頁制作，但是光看視頻你是不可能學(xué)會網(wǎng)頁制作的，沒有人指導(dǎo)你，而且很多視頻已經(jīng)過時了 ，并沒有什么用!  如果你真的想學(xué)習(xí)網(wǎng)頁制作這門技術(shù)，你可以來這個裙，前面是6 1 1，中間是四 貳 八，最后是壹  ④ 二！ 在這里有最新的HTML課程 免費(fèi)學(xué)習(xí) 也有很多人指導(dǎo)你進(jìn)步，不需要你付出什么，只要你是真心想學(xué)習(xí)的，隨便看看的就不要加了，加了也是浪費(fèi)大家的時間 。學(xué)習(xí) HTML，CSS 應(yīng)該先跟著書仔細(xì)、扎實的學(xué)一遍。然后就需要做大量的練習(xí)，做各種常規(guī)的、奇怪的、大量的布局練習(xí)來捆固、理解自己的知識。而學(xué)習(xí) Javascript 首先要知道這門語言可以做什么，不能做什么，擅長做什么，不擅長做什么！如果你只想當(dāng)一個普通的前端程序員，你只需要記住大部分 Javascript 函數(shù)，做一些練習(xí)就可以了。如果你想當(dāng)深入了解Javascript，你需要了解 Javascript 的原理，機(jī)制。需要知道他們的本源，需要深刻了解Javascript 基于對象的本質(zhì)。還需要 深刻了解 瀏覽器宿主 下 的 Javascript 的行為、特性。因為歷史原因，Javascript一直不被重視，有點像被收養(yǎng)的一般！ 所以他有很多缺點，各個宿主環(huán)境下的行為不統(tǒng)一、內(nèi)存溢出問題、執(zhí)行效率低下等問題。作為一個優(yōu)秀的前端工程師還需要深入了解、以及學(xué)會處理 Javascript 的這些缺陷。Web前端：1）精通HTML，能夠書寫語義合理，結(jié)構(gòu)清晰，易維護(hù)的HTML結(jié)構(gòu)。2）精通CSS，能夠還原視覺設(shè)計，并兼容業(yè)界承認(rèn)的主流瀏覽器。3）熟悉JavaScript，了解ECMAScript基礎(chǔ)內(nèi)容，掌握1~2種js框架，如JQuery4）對常見的瀏覽器兼容問題有清晰的理解，并有可靠的解決方案。5）對性能有一定的要求，了解yahoo的性能優(yōu)化建議，并可以在項目中有效實施。6）......Web后端：1）精通jsp，servlet，java bean，JMS，EJB，Jdbc，F(xiàn)lex開發(fā)，或者對相關(guān)的工具、類庫以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，對Web開發(fā)的模式有較深的理解2）練使用oracle、sqlserver、mysql等常用的數(shù)據(jù)庫系統(tǒng)，對數(shù)據(jù)庫有較強(qiáng)的設(shè)計能力3）熟悉maven項目配置管理工具，熟悉tomcat、jboss等應(yīng)用服務(wù)器，同時對在高并發(fā)處理情況下的負(fù)載調(diào)優(yōu)有相關(guān)經(jīng)驗者優(yōu)先考慮4）精通面向?qū)ο蠓治龊驮O(shè)計技術(shù)，包括設(shè)計模式、UML建模等5）熟悉網(wǎng)絡(luò)編程，具有設(shè)計和開發(fā)對外API接口經(jīng)驗和能力，同時具備跨平臺的API規(guī)范設(shè)計以及API高效調(diào)用設(shè)計能力6）......從幾個公司的招聘要求可以看到，做Web開發(fā)，對前端和后端的要求是各自所不同的。而我們目前的實際情況，也和這個差不多，但是，我們無論在知識的掌握程度上，還是知識掌握的寬度上，都是不夠的。首先，我們在前端缺乏積累，沒有沉淀，專業(yè)的前端技術(shù)的積累是從去年才開始的，同時，在前端也缺乏支撐與高手，所以，走起來比較困難。同時，前端人員培養(yǎng)的較少，一個原因是對前端了解太少，另外一個原因就是對前端與后端的工作比例估計不足。所幸，我們在這一年也在前端有了很快的進(jìn)步，培養(yǎng)了幾個優(yōu)秀的開發(fā)人員，有意識的解決了前端的用戶體驗，這都是可喜的。今年，需要更進(jìn)一步，專業(yè)化。其次，我們在后端發(fā)展的不夠?qū)?，后端的知識體系已經(jīng)比較完善，但是，很多應(yīng)用點都沒有涉及到。同時，對現(xiàn)有技術(shù)框架的理解都不夠深入，太浮躁。我們目前的設(shè)計團(tuán)隊在解決互聯(lián)網(wǎng)高并發(fā)、大數(shù)據(jù)量的存取上經(jīng)驗與能力都還不足，需要正視這些問題。后端技術(shù)的發(fā)展需要更加的精進(jìn)，以解決實際存在的問題為主。最后，我們在前端、后端都缺乏熟練工，這會影響到開發(fā)的速度，同時，也不利于后期技術(shù)的研究。

根據(jù)屏幕不同大小，縮小窗口出橫向滾動條在所難免，但理想情況下，頁面應(yīng)該能適應(yīng)不同客戶端瀏覽器和分辨率。實際操作通常又有三種情況：版面自適應(yīng)、視覺自適應(yīng)、內(nèi)容自適應(yīng)。在windows系統(tǒng)任務(wù)欄空白處單擊右鍵，有如下圖的菜單，分別提供有“橫向平鋪窗口、縱向平鋪窗口”的功能，根據(jù)激活窗口個數(shù)按需切分屏幕。如果沒記錯的話，自win2000就已經(jīng)用了，更早沒試過。雖然那會我們用的顯示器大些才17′，但在多窗口工作時確實方便。版面上自適應(yīng)Information Architects Japan在06年提出 web設(shè)計95%是排版 的觀點，如果精確理解，指呈現(xiàn)部分信息架構(gòu)之下“信息設(shè)計”的范疇，俗稱排版。因為我們都了解廣義上的web design不僅要看還得有動，其實有個很大的 知識框架 做支撐。web排版相較平面的優(yōu)勢在于數(shù)據(jù)靈活性，理論上可以實現(xiàn)只維護(hù)單個頁面，然后通過web技術(shù)來實現(xiàn)多種排版表現(xiàn)。在實踐中獲取點滴信息設(shè)計基礎(chǔ)之后再來看這個問題，感觸頗深?，F(xiàn)實網(wǎng)站中，越重要的頁面模塊越多，排版難度也就越大。比如門戶網(wǎng)站首頁，我很少看到自適應(yīng)的，大概是雅虎網(wǎng)站改版開了先河。分別使用narrow layout和wide layout兩種模式，適應(yīng)800和1024px分辨率，根據(jù)客戶端請求分析再輸出，即在自定義基礎(chǔ)上實現(xiàn)了自適應(yīng)。

前端開發(fā)工程師獨(dú)立出來主要就是做數(shù)據(jù)交互、后臺處理、SEO優(yōu)化等工作，要熟練各種腳本語言和運(yùn)行環(huán)境，熟悉XML、SQL、ORACLE等數(shù)據(jù)庫，熟悉AJXA、Jquery、Slivelight、Struct2、CSS4、Html5等網(wǎng)站處理技術(shù)。網(wǎng)頁設(shè)計（web design，又稱為Web UI design，WUI design，WUI），是根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。網(wǎng)頁設(shè)計一般分為三種大類：功能型網(wǎng)頁設(shè)計（服務(wù)網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁設(shè)計（品牌形象站）、信息型網(wǎng)頁設(shè)計（門戶站）。設(shè)計網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計方案。網(wǎng)頁設(shè)計的工作目標(biāo)，是通過使用更合理的顏色、字體、圖片、樣式進(jìn)行頁面設(shè)計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網(wǎng)頁設(shè)計甚至?xí)紤]到通過聲光、交互等來實現(xiàn)更好的視聽感受。網(wǎng)頁設(shè)計主要以Adobe產(chǎn)品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。

可以使用background-size: cover來適應(yīng)DIV元素的高度和亮度。代碼如下：<style> div{background:url(圖片地址) no-repeat;width:100%;height:auto;background-size:cover;} </style> <div>這里是內(nèi)容</div>background-size 屬性規(guī)定背景圖像的尺寸,IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。