網(wǎng)站前端網(wǎng)頁設計的結構關系

最早的網(wǎng)頁制作，需要負責網(wǎng)頁設計和網(wǎng)頁制作兩種工作，隨著行業(yè)的不斷向前發(fā)展，網(wǎng)頁制作崗位和網(wǎng)頁設計崗位開始分離開，網(wǎng)頁制作崗位發(fā)展成了“WEB前端開發(fā)工程師（或HTML5開發(fā)工程師）”，只負責網(wǎng)頁的開發(fā)、代碼編寫方面的工作。

而網(wǎng)頁設計，主要負責設計網(wǎng)頁（成品是psd版本的高保真原型圖-設計圖）。
對于當前的前端開發(fā)工程師（HTML5開發(fā)工程師），并不需要掌握網(wǎng)頁設計方面的知識，但是需要掌握PS的基本知識，并能夠?qū)崿F(xiàn)網(wǎng)頁的切圖。把網(wǎng)頁設計師提供的設計圖轉(zhuǎn)換為最終的網(wǎng)頁。

在網(wǎng)頁設計行業(yè)工作的人將web前端網(wǎng)站開發(fā)比作三角形金字塔，其中包括結構，風格和行為。

為什么要分層？

當您創(chuàng)建網(wǎng)頁時，其結構應該降級為HTML，CSS視覺樣式和腳本行為，分離層的一些好處是：

共享資源：當您編寫外部CSS或JavaScript文件時，站點上的任何頁面都可以使用該文件。如果您需要對該文件進行更改，也許更新網(wǎng)站上的某些排版樣式，則使用該樣式表的每個頁面都會得到更改。沒有必要單獨編輯網(wǎng)站的每個頁面，這對于大型網(wǎng)站來說可能是一項艱苦的任務。

下載速度更快： 首次由客戶下載腳本或樣式表后，Web瀏覽器會對其進行緩存。由于這些共享資源現(xiàn)在包含在瀏覽器的緩存中，因此瀏覽器中請求的其他頁面加載速度更快，從而提高了整體頁面速度和性能。

多人團隊： 如果您有多個人同時在網(wǎng)站上工作，您可以使用允許文件簽入和簽出的系統(tǒng)，以確保每個人都使用最新版本。如果樣式和行為與結構文檔交織在一起，那就更難了。

搜索引擎優(yōu)化： 一個明確分離風格和結構的網(wǎng)站可能會對搜索引擎有更好的表現(xiàn)，因為它們可以更有效地抓取內(nèi)容并理解頁面而不會陷入視覺風格和行為信息。

輔助功能： 外部樣式表和腳本文件更易于人們和瀏覽器訪問。屏幕閱讀器等軟件可以更輕松地處理結構層中的內(nèi)容，而無需處理無論如何都無法使用的樣式。

向后兼容性：使用單獨的開發(fā)層設計的站點更可能向后兼容，因為無法使用某些CSS樣式或禁用了JavaScript的瀏覽器和設備仍然可以查看HTML。然后，您可以使用支持它們的瀏覽器的功能逐步增強您的網(wǎng)站。

HTML：結構層

網(wǎng)頁的結構或內(nèi)容層是該頁面的基礎HTML代碼。正如房屋的框架為房屋的其他部分構建了一個堅實的基礎，HTML的堅實基礎創(chuàng)建了一個可以在其上創(chuàng)建網(wǎng)站的平臺。

結構層用于存儲客戶想要閱讀或查看的所有內(nèi)容。HTML結構可以包含文本和圖像，它包括訪問者用于瀏覽網(wǎng)站的超鏈接。這是在符合標準的HTML5中編碼的，可以包括文本，圖像和多媒體（視頻，音頻等）。

網(wǎng)站內(nèi)容的每個方面都應該在結構層中表示。這允許關閉JavaScript的客戶或無法查看整個網(wǎng)站的CSS訪問權限的客戶。

CSS：樣式層

該層指示結構化HTML文檔如何看待網(wǎng)站的訪問者，并由CSS（層疊樣式表）定義。這些文件包含有關如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基于屏幕大小和設備更改站點顯示的媒體查詢。

網(wǎng)站的所有視覺樣式都應位于外部樣式表中。您可以使用多個樣式表，但請記住，每個CSS文件都需要HTTP請求才能獲取它，從而影響站點性能。

JavaScript：行為層

行為層使網(wǎng)站具有交互性，允許頁面響應用戶操作或基于一組條件進行更改。JavaScript是行為層最常用的語言，但CGI和PHP也經(jīng)常被使用。

當開發(fā)人員引用行為層時，大多數(shù)都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與DOM（文檔對象模型）進行交互。在內(nèi)容層中編寫有效的HTML對于行為層中的DOM交互非常重要。在構建行為層時，應該像使用CSS一樣使用外部腳本文件來優(yōu)化速度和性能。

本文題目：網(wǎng)站前端網(wǎng)頁設計的結構關系
本文路徑：http://bm7419.com/news/165367.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、App開發(fā)、網(wǎng)站內(nèi)鏈、App設計、域名注冊、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)