頁設計基礎

隨著互聯網技術的不斷發展和普及，網絡與現實生活的結合越來越緊密，網站代表了企業和個人的形象，網頁如同個人的社交名片，不可或缺。越來越多的人開始學習和制作網頁，更多的企業和個人把自己的“家”搬到網上。

應該說，設計精美的頁面效果，需要用戶掌握一定的技術，了解相關的知識，初步積累網頁設計素養，同時還應該熟悉網站開發的流程。

熟悉網頁設計概念

網站是互聯網上一個信息小站，網頁是互聯網上顯示的信息頁面，如果說網站是一本書，那么網頁就是生活中的一頁書，是展示信息的最小單元。在網頁中包含文字、圖像、多媒體等內容，通過這些內容向瀏覽者傳達一定的信息。

網頁和網站

網站就是由網頁組成的，網頁是構成網站的基本元素，是承載各種應用的平臺。一個網站如果沒有網頁，將是一個空站，如果只有域名和虛擬主機而沒有制作任何網頁的話，任何人都無法訪問網站。

網頁類型

網頁可以分為多種類型，但是由于分類方法不同，也會有不同的類型，根據是否使用了服務器技術，人們把網頁分為靜態網頁和動態網頁。

網頁構成

網頁內可以包含很多內容，如文本、圖像、動畫等內容，這些信息構成了網頁的基本內容，如圖1.4所示。實際上網頁包含的元素是很多的，有些元素可以直觀地看到，而有的元素可能看不到，只有通過代碼才能夠看到。

HTML

HTML是一種語言，全稱為Hypertext Markup Language，即超文本標識語言，是用于描述網頁文檔的一種工具。由HTML語言編寫的文檔，就是網頁文檔，這種文檔可以被網頁瀏覽器識別并解析，然后把網頁效果呈現出來。如果沒有瀏覽器的解析，我們所看到的網頁文檔由大量的HTML標簽和文本信息組成，

學習DIV結構

DIV是<div>標簽的習慣性稱呼，因為設計師主要使用<div>標簽構建網頁的結構，使用CSS設計網頁樣式，故把網頁設計簡稱為DIV+CSS布局。

在HTML文檔中，頁面會被劃分為很多區域，不同區域顯示不同的內容，如標題欄、廣告位、導航條、新聞列表、正文顯示區域、版權信息區域等。

學習CSS

有了網頁結構和內容，還需要CSS來美化。CSS是一種語言，與HTML一樣，是一種描述性語言，全稱Cascading Style Sheet，可譯為層疊樣式表或級聯樣式表，它定義如何顯示HTML標簽，用于控制網頁外觀布局和樣式設計。當網頁缺少CSS時，是非常丑陋的，也不適合閱讀和欣賞，

學習JavaScript

網頁設計的動態化和智能化是一種大趨勢，而如果要趕上這個趨勢，JavaScript是一種腳本語言，但是它包含編程語言的大部分特性和功能，掌握JavaScript編程，你就能夠駕馭網頁動態特效的設計，就能夠把網頁設計得更聰明、更富有人性化。

JavaScript在頁面特效中的應用

與HTML、CSS學習相比，JavaScript學習難度要大很多，當然一旦當你掌握了JavaScript，網頁設計水平會達到一個新的高度，此時自己就不是一個簡單的網頁設計師，而應該是一個前端開發工程師的高級技術師。

網頁設計任務

成功的設計作品一般都很藝術化。但藝術只是設計的手段，而并非設計的任務。設計的任務是要實現設計者的意圖，而并非創造美。

網頁設計的任務，是指設計者要表現的主題和實現的功能。站點的性質不同，設計的任務也不同。根據網站性質，可以把網頁設計任務分為3類：

　資訊類網站，這類網站以內容為主，提供大量的信息，因此網頁設計就需要注意頁面的分割、結構的合理、頁面的優化、網頁的親和力等問題。

　形象類網站，這類網站以宣傳為主，網站規模較小，頁面少，信息少，功能也較為簡單，網頁設計的主要任務是突出企業形象。因此對設計者的美工水平要求較高。

　應用類網站，這類網站在設計上要求較高，網頁信息不求大而全，但是頁面設計追求簡潔、精致、大方，既要保證網站的可操作性，同時還要保證應用的靈活性，突出鮮明的應用特性。

網頁設計原則

網頁設計是有原則的，無論使用什么方法對網頁元素進行組合，都必須要遵循基本原則，

　統一原則：就是指設計作品的整體性、一致性。設計作品的整體效果是至關重要的，在設計中切勿將各組成部分孤立分散，那樣會使畫面呈現出一種枝蔓紛雜的凌亂效果。

　連貫原則：就是指要注意頁面的相互關系。設計中應利用各組成部分在內容上的內在聯系和表現形式上的相互呼應，并注意整個頁面設計風格的一致性，實現視覺上和心理上的連貫，使整個頁面設計的各個部分極為融洽，猶如一氣呵成。

　分割原則：就是指將頁面分成若干小塊，小塊之間有視覺上的不同，這樣可以使觀者一目了然。在信息量很多時為使觀者能夠看清楚，就要注意到將畫面進行有效的分割。分割不僅是表現形式的需要。換個角度來講，分割也可以被視為對于頁面內容的一種分類歸納。

　對比原則：就是通過矛盾和沖突，使設計更加富有生氣。對比手法很多，例如，多與少、曲與直、強與弱、長與短、粗與細、疏與密、虛與實、主與次、黑與白、動與靜、美與丑、聚與散等。在使用對比的時候應慎重，對比過強容易破壞美感，影響統一。

　和諧原則：就是指整個頁面符合美的法則，渾然一體。如果一件設計作品僅僅是色彩、形狀、線條等的隨意混合，那么作品將不但沒有“生命感”，而且也根本無法實現視覺設計的傳達功能。和諧不僅要看結構形式，而且要看作品所形成的視覺效果能否與人的視覺感受形成一種溝通，產生心靈的共鳴。這是設計能否成功的關鍵。

【Web前端開發 】html+css前端零基礎入門教程 2022新 最全前端學習路線規劃含前端框架項目（資料含源碼+課件）_前端_編程入門_嗶哩嗶哩_bilibili

為久經沙場的打工人，我們肯定經歷過一次次難忘的面試，這其中有愉快的交談，也有尷尬的對話，甚至還會有崩潰的瞬間...可以說，人類的面試悲歡喜樂，并不相通！近日看到一位程序員網友發帖吐槽：前端面試太難了，問啥啥不會，都快面哭了。

即使隔著手機屏幕，都已經感覺到了這位小伙伴的“崩潰瞬間”。當面對面試官的連環問題而完全不知所云，無法解答的時候，可能那時的我們只求找個地縫鉆進去吧。

其實，上面這位網友的尷尬遭遇，在面試的時候并不少見。很多情況下是由于我們的技術基礎并不扎實，也沒有形成自己的知識體系，導致我們在面對新行業、新領域的問題時，無法快速適應和解決。

就拿前端學科舉例，隨著新形勢下企業對于前端的綜合能力要求更加高，物聯網、大數據可視化、云計算、VR/AR、5G等新技術接踵而至，現在的前端工程師更是承擔了更多責任，而這些都取決于扎實的基礎之上，沒有系統的理論基礎，沒有成體系的技術架構，完全無法真正形成自己的技術競爭力。

因此推薦所有的前端er一門必備的課程《浠浠呀老師html+css前端入門教程，快樂學習，小白必看》。課程由浠浠呀老師為小白入門前端傾力打造的前端基礎教程。是零基礎小白入門前端開發的不二之選。

先來隆重介紹一下浠浠呀老師吧：

千鋒教研院執行院長，千鋒學科部總監，小獅視覺總監，前端培訓屆扛把子-千鋒HTML5大前端學科創建者。 畢業于布列斯特普希金國立大學，曾任北京市屬高校師資培訓中心特邀講師，多年擔任北京市屬高校師資培訓工作。著有《HTML5從入門到精通》、《Jquery從入門到實戰》、《PhotoShop CC實戰入門》、《Unity虛擬現實開發實踐》、《數據結構與算法（C語言篇）》、《Nginx 高性能 Web 服務器應用與實戰（微課版）》等多本書籍，被500多所高校選用，深受好評。 深耕IT職業教育行業十多年，學生遍布各大互聯網大廠，熱愛教育事業。對于教學研究、教學管理工作有深刻的理解。

視頻不同于以往傳統的前端教學視頻。摒棄了傳統教程填鴨式課堂講授的方式，用最直觀的動畫效果解釋原理，用最真實的案例鞏固知識。是一種全新的講課方式，對小白友好，能讓前端入門變得清晰簡單。

課程從最基礎開始，講解無廢話不反復，節奏明快，直擊痛點，直截了當地輸出干貨。將復雜的前端問題拆解成簡單的知識點。將前端知識點系統整理，結合實用案例，以講解+動畫的形式展現，讓學生真正地看到即學到。

課程設計十分用心，認真分析了小白們的日常學習習慣，思維習慣，知識背景。甚至對每一個小白可能出現疑問的地方做了預判。每個案例都悉心打磨，簡單而典型。用前期大量的教研時間換取學生們的接收知識時間。

本課程共包括2季，內容涵蓋，HTML，CSS和HTML5、CSS3。本次發布視頻第一季上半部分——HTML。課程共 50 集，16個部分，58個知識點，30個案例。