1. 前端頁面有哪三層構成,分別是什麼作用是什麼
最准確的網頁設計思路是把網頁分成三個層次,即:結構層、樣式層、行為層。
HTML:結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。正如房屋的框架為房屋的其他部分構建了一個堅實
的基礎,HTML的堅實基礎創建了一個可以在其上創建網站的平台。
結構層用於存儲客戶想要閱讀或查看的所有內容。HTML結構可以包含文本和圖像,它包括訪問者用
於瀏覽網站的超鏈接。這是在符合標準的HTML5中編碼的,可以包括文本,圖像和多媒體(視頻,音頻等)。
網站內容的每個方面都應該在結構層中表示。這允許關閉JavaScript的客戶或無法查看整個網站的
CSS訪問許可權的客戶(如果不是所有功能)。
CSS:樣式層
該層指示結構化HTML文檔如何看待網站的訪問者,並由CSS(層疊樣式表)定義。這些文件包含有
關如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基於屏幕大小和設備更改站點顯示的
媒體查詢。
網站的所有視覺樣式都應位於外部樣式表中。您可以使用多個樣式表,但請記住,每個CSS文件都需
要HTTP請求才能獲取它,從而影響站點性能。
JavaScript:行為層
行為層使網站具有交互性,允許頁面響應用戶操作或基於一組條件進行更改。JavaScript是行為層最
常用的語言,但CGI和PHP也經常被使用。
當開發人員引用行為層時,大多數都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與
DOM(文檔對象模型)進行交互。在內容層中編寫有效的HTML對於行為層中的DOM交互非常重
要。在構建行為層時,應該像使用CSS一樣使用外部腳本文件來優化速度和性能。
(1)前端頁面結構擴展閱讀:
分層的一些好處是:
共享資源:當您編寫外部CSS或JavaScript文件時,站點上的任何頁面都可以使用該文件。如果
您需要對該文件進行更改,也許更新網站上的某些排版樣式,則使用該樣式表的每個頁面都會得到
更改。沒有必要單獨編輯網站的每個頁面,這對於大型網站來說可能是一項艱苦的任務。
下載速度更快:首次由客戶下載腳本或樣式表後,Web瀏覽器會對其進行緩存。由於這些共享
資源現在包含在瀏覽器的緩存中,因此瀏覽器中請求的其他頁面載入速度更快,從而提高了整體頁
面速度和性能。
多人團隊:如果您有多個人同時在網站上工作,您可以使用允許文件簽入和簽出的系統,以確
保每個人都使用最新版本。如果樣式和行為與結構文檔交織在一起,那就更難了。
搜索引擎優化:一個明確分離風格和結構的網站可能會對搜索引擎有更好的表現,因為它們可以更有效地抓取內容並理解頁面而不會陷入視覺風格和行為信息。
輔助功能:外部樣式表和腳本文件更易於人們和瀏覽器訪問。屏幕閱讀器等軟體可以更輕松地
處理結構層中的內容,而無需處理無論如何都無法使用的樣式。
向後兼容性:使用單獨的開發層設計的站點更可能向後兼容,因為無法使用某些CSS樣式或禁
用了JavaScript的瀏覽器和設備仍然可以查看HTML。然後,您可以使用支持它們的瀏覽器的功能逐
步增強您的網站。
2. 前端布局需要學習什麼知識呀
css、html和table。
前端布局使用css,即層疊樣式表,控制頁面的顯示。以前是使用table進行布局的,但由於table布局不便於維護,每次修改的時候都需要更改頁面結構。所以後來就逐漸被css所代替,在需要使用表格的時候才使用table。
除了要使用css之外,還要使用html。html用來表明頁面的結構,css決定頁面結構的顯示方式。
3. 網頁製作的結構布局有哪些
學習前端第一步:劃分網頁結構,網頁的結構的劃分應該遵循哪些原則,如何去劃分網頁的結構呢?
對於一個前端初學者,第一步就是要學會如何劃分一個網頁的結構。當設計師給到你一張設計圖,你需要根據這張圖做出一個符合標準的頁面,這里所說的標准,即w3c標准,參考w3school在線教程。那麼做出一個完整的符合標準的網頁第一步就是要劃分網頁的結構。一般來講,網頁結構的劃分需要遵循幾個原則:
一、自上而下原則
因為瀏覽器在渲染一個網頁的順序是自上而下的。這里提到了渲染這一個詞,所謂的渲染就是瀏覽器將代碼轉換為頁面顯示內容的過程。瀏覽器會自上而下讀取你寫的代碼並自上而下的顯示。
二、從左至右原則
在自上而下的同時,同一行的內容是從左至右渲染,所以在劃分結構的時候有從左至右的順序。
三、一像素原則
這個原則對於初學者來說必須堅持,但也並不是說無論什麼時候都得死認這個道理。前期我們在劃分網頁的時候一定要劃分准確,尤其是橫向。試想,如果外面的盒子寬度是1200像素,裡面兩個盒子一個600像素另一個601像素,加起來超過了父級的寬度那麼必然第二個盒子會換到下一行進行顯示。
在說完上述三個原則過後有些人就會一味地追求遵循這些原則,比如在劃分結構的時候一定要分為上下部分,但是比如下面我截取這個網頁的一部分,圖片和文字其實是屬於一個整體,文字是對圖片的說明,所以就不應該分為上下,而應該水平方向劃分,每一個圖文作為一部分內容,水平分為四部分:
我們說一般網頁有header(頭部區)、banner(廣告橫幅區)、main(主體內容區)、footer(底部區),單頁並非所有網頁都是這樣,有些網頁沒有banner但是初學者容易將header下面那一部分硬劃分為banner,有些網頁除了這幾部分還會有比如icon等區域由喜歡將他們劃分到main中去。
說到main區,這個結構劃分就多種多樣了。有些網頁是有一個從左到右通欄的背景色甚至背景圖片,這樣我們結構的劃分也應該有外層一個通欄的盒子,將背景色或者背景圖給他,裡面再嵌套一個inner盒,給可視區域的固定寬度並居中。如果沒有通欄的背景那麼這個時候是不需要給通欄的盒子,直接main區給固定寬度居中就好了。
那麼在結構劃分的時候有些盒子區域之間的空隙怎麼去劃分這也是初學者最容易犯難的問題。其實嚴格意義來講這些空白在結構劃分的時候並不會造成影響,因為空白區域在都可以用代碼來實現。不過一些文字區域你不能貼著文字的上下來劃分,因為文字都是自帶行高的。
另外,有些地方可能會有一部分小圖片或者一部分內容覆蓋在外面大盒子上,這部分在劃分結構的時候可以不用管,因為後期在代碼實現的時候我們可以利用定位技術實現。
4. 網站前端開發常用的布局方式有哪些
實現網頁布局的方式方法比較多,布局方式可以大概分為這幾類。
布局種類:
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,畢竟需要它們兩者結合在一起才可以實現出可交互的前端頁面。
5. 前端的認識和理解
WEB前端是由網頁設計與製作發展而來的,隨著工作的細化,需要有人完成美工圖到網頁的製作,從而出現了WEB前端開發這個詞。WEB前端開發主要是使用HTML、CSS、JavaScript技術,將美工提供的美工圖轉化為網頁。同時,需要顧及SEO以及後台的數據。WEB前端,相當於是一個連接美工、後台以及用戶的中間平台。
想入門web前端的夥伴都不太清楚關於web前端開發是什麼意思,Web前端開發工程師,主要職責是利用(X)HTML/CSS/JavaScript/Flash等各種Web技術進行客戶端產品的開發。完成客戶端程序(也就是瀏覽器端)的開發,開發JavaScript以及Flash模塊,同時結合後台開發技術模擬整體效果,進行豐富互聯網的Web開發,致力於通過技術改善用戶體驗。WEB前端開發主要是使用HTML、CSS、JavaScript技術,將美工提供的美工圖轉化為網頁。
我覺得前端開發就是給企業搭建門戶類的網站,以後可以往設計或者更高級的開發師發展,也可以往技術類的管理發展,那麼對於未來兩年的計劃你可以在邊上班的時候利用空閑時間還可以多往更高層次的技術方面延伸,每天多學一點,因為技術是不斷的更新。
6. 網站前端開發慣用的布局方式有哪些
網站布局之「廠」字型
所謂的「廠」字型布局結構,就是指頁面頂部為橫條網站標識和廣告條,下方左面為主菜單,右面顯示內容的布局。菜單條與背景,整體效果類似「廠」字。「廠」布局是目前最常見的一種網頁布局方式。這種布局的優點是頁面結構清晰,主次分明。缺點是由於被使用得過多,顯得缺乏創意,略顯呆板。
網站布局之「三」字型
這種布局多用於國外站點,通常頁面上方橫向幾條色塊,將頁面整體分割為若幹部分,色塊中大多放廣告圖片或者Flash動畫。
網站布局之 「國」字型
「國」字型布局通常上下各有一個廣告條或者其他欄目條,左面是主菜單,右面放友情鏈接或者其他欄目等,中間是主要內容。這種布局的優點是充分利用版面,信息量大。缺點是頁面顯得比較擁擠和局促,不夠靈活。
網站布局之門戶型
這類網頁通常內容多,信息量大,通常沒有時顯的線條作為邊界,圖片用得也比較少,一般通過文字的排列產生視覺上的分區效果。
網站布局之區塊型
區塊型布局現在出現的越來越多,在網頁上各個區域具有封閉的邊界,經過合理放置顯得清晰美觀。其缺點是由於片面固定,各區域很難根據其中的內容的多少而調整大小,因此不適宜用於區域內容的長度經常變化的網頁。
網站布局之宣傳單型
宣傳單型布局頁面就像一張宣傳海報,以一張精美圖片作為頁面的設計中心,常用於個性類站點。其優點是漂亮吸引人;缺點就是頁面中大面積使用圖片,導致瀏覽速度相對較慢。所以這類頁面同是可以作為宣傳單使用。
7. 前端頁面由哪些頁面構成,作用是什麼
前端頁面構成:
結構(HTML)、樣式(CSS)、邏輯(JavaScript)
8. web前端頁面有哪三層構成,分別是什麼作用是什麼
最准確的網頁設計思路是把網頁分成三個層次,即:結構層、樣式層、行為層。
HTML:結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。
CSS:樣式層
該層指示結構化HTML文檔如何看待網站的訪問者,並由CSS(層疊樣式表)定義。
JavaScript:行為層
行為層使網站具有交互性,允許頁面響應用戶操作或基於一組條件進行更改
9. 前端頁面有哪三層構成,分別是什麼
最准確的網頁設計思路是把網頁分成三個層次,即:結構層、樣式層、行為層。
HTML:結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。
CSS:樣式層
該層指示結構化HTML文檔如何看待網站的訪問者,並由CSS(層疊樣式表)定義。
JavaScript:行為層
行為層使網站具有交互性,允許頁面響應用戶操作或基於一組條件進行更改
10. 前端需求分析,首頁面結構有哪些
大體上根據設計來,通常情況是有基本框架,然後一個顯示系統名稱,用戶,等等基本信息的banner,一個導航欄,還有就是主頁頁面主體了,頁面主體兩旁是否有側邊欄根據設計決定,最後就是公司信息,和其他鏈接的尾部。