為了學習GitHub去下載Git，結果n次下載失敗，心態小崩，今天不學編程了，轉hTML5換換心情，按大佬們教的，學了一段時間的枯燥編程要換個方向換換口味，不然學習效率會變低。這一篇是基礎知識。

---

學前必看

對于網頁設計，你要明確學習的方向，因為網頁是分為靜態網頁和動態兩種的，這種靜態動態并不是指網頁有無動畫，而是指一種交互性，靜態網頁只能單純的進行瀏覽，不能發表評論等交互操作。而動態網頁，是取決于由用戶提供的參數，并根據存儲在數據庫中的網站上的數據中創建的頁面。因此每個人所看到的內容都是不一樣的。
對于不同的網頁，所使用的語言也不一樣的。例如我現在以HTML5入門靜態網頁，就專攻HTML5，就算以后會轉向PHP做動態網頁，也屆時再去學習，兩頭兼顧的方法并不適合每個人，踏踏實實學才是真。

文章目錄

• 學前必看
• 一、 網頁設計基本概念
• • （1） 網址
  • （2） 瀏覽器
  • （3） 網頁
  • （4） 網站
  • （5） 首頁
• 二、 常見網站類型
• • （1） 咨訊門戶類網站
  • （2） 企業品牌類網站
  • （3） 交易類網站
  • （4） 功能類網站
  • （5） 交互類網站
• 三、 網頁基本結構
• • （1） 網站Logo
  • （2） 網站名稱
  • （3） 導航菜單
  • （4） Banner （橫幅廣告）
  • （5） 網頁正文
  • （6） 網頁頁腳
• 四、 網頁基本構成元素
• • （1） 文本
  • （2） 圖像
  • （3） 超級鏈接
  • （4） 導航欄
  • （5） 動畫
  • （6） 表格
  • （7） 框架
  • （8） 表單
• 五、 網頁配色
• • （1） 色彩搭配原則
  • （2） 網頁色彩搭配方法

一、 網頁設計基本概念

（1） 網址

網址就是文件在互聯網上的網址?；ヂ摼W是個虛擬的系統，所有文件或網絡的位置就用網址表示。在互聯網上常用來表示網址的是==“IP”地址==、域名和“URL”。

• IP地址：為保證整個網絡的正常運行，每個網絡和每臺主機在互聯網上都有一個唯一的地址，稱為IP地址。每個IP地址由地址類型、網絡號與主機號三部分組成，通常用數字與小數點隔開表示。例如： 122.12.3.14； 62.5.48.4等。
• 域名地址：以層次化表示，一般由主機名、機構名、網絡名和最高層域名組成。例如：中國清華大學的域名地址為：www.tsinghua.edu.cn，它的四部分分別代表WWW服務器、校名即機構名、網絡名（edu為教育部門網絡）、國民（cn代表中國）。
• URL：要定位某一個文件在互聯網上的位置就必須使用URL，也就是統一資源定位器（Uniform Resource Locator）的格式由下列三部分組成：
  i. 第一部分就是文件打開的協議（或稱為服務模式）；
  ii. 第二部分是存有文件的主機IP地址（有時也包括端口號）；
  iii. 第三部分是文件的具體地址，如路徑、目錄和文件名等。

（2） 瀏覽器

瀏覽器是用來顯示在萬維網或局域網等內的文字、圖像及其他信息的軟件，它還可以讓用戶與這些文件進行交互操作。瀏覽器是電腦上網時經常使用到的應用軟件，瀏覽器正是Internet時代的產物，隨著電腦操作系統的普及、Internet的全球連接及人們對信息需求的爆炸式增長，為瀏覽器的誕生和興起提供了強大的動力，同時它也標志著互聯網時代的來臨
個人建議，學Web前端的，計算機上應配有IE瀏覽器、Edge瀏覽器、谷歌瀏覽器、火狐瀏覽器這四類基礎瀏覽器，IE的話是為了驗證網頁的兼容性，老師教的要要的，不確定過時與否，推薦安裝IE Tasker。

（3） 網頁

網頁是構成網站的基本元素，是承載各種網站應用的平臺。通俗地說，網站就是由網頁組成的。網頁是一個包含HTML標簽的純文本文件，它可以存放在世界某個角落的某一臺計算機中，是萬維網中的一“頁”，是超文本標記語言格式（標準通用標記語言的一個應用，文件擴展名為.html或.htm）。網頁通常用圖像檔來提供圖畫。網頁要通過網頁瀏覽器來閱讀。
歸根結底，網頁就是一個文本文檔，但是它又能超越文本來展示內容，因此叫超文本。

（4） 網站

網站(Website)是指在因特網上根據一定的規則，使用HTML（標準通用標記語言）等工具制作的用于展示特定內容相關網頁的集合。簡單地說，網站是一種溝通工具，人們可以通過網站來發布自己想要公開的資訊，或者利用網站來提供相關的網絡服務。網站是在互聯網上擁有域名或地址并提供一定網絡服務的主機，是存儲文件的空間，以服務器為載體。人們可通過瀏覽器等進行訪問、查找文件，也可通過遠程文件傳輸(FTP)方式上傳、下載網站文件。
網站的制作牽扯到太多技術，靜態網頁和動態網頁的制作，數據庫等等。路漫漫其修遠兮。

（5） 首頁

網站首頁是一個網站的入口網頁，故往往會被編輯得易于了解該網站，并引導互聯網用戶瀏覽網站其他部分的內容。這部分內容一般被認為是一個目錄性質的內容。大多數作為首頁的文件名是index、default、main或portal加上擴展名。
例如index.html、 index.aspx、 index.php、 index.asp 。

二、 常見網站類型

（1） 咨訊門戶類網站

以新聞、供求、產品、展會、行業導航、招聘為主的集成式網站，如新浪、騰訊新聞等。

（2） 企業品牌類網站

企業網站是企業在互聯網上進行網絡營銷和形象宣傳的平臺，相當于企業的網絡名片。例如Microsoft官網、Oracle官網等等。

（3） 交易類網站

提供網絡交易的站點，足不出戶即可購買到你所喜歡的商品。有B2B、B2C、C2C、C2B四種模式，像我們常用的淘寶、京東、蘇寧都屬于交易類網站。

（4） 功能類網站

網站提供某一種或者幾種功能，比如站長工具、電話手機號碼查詢、物流信息查詢、火車票購買等。功能性網站以實現某一種或者幾種功能為主要服務內容。用戶也是為了實現某一種功能來瀏覽該網站。

（5） 交互類網站

這類網站也較為常見，像論壇這類能夠提供用戶進行信息交流的站點都是交互類網站，CSDN就是一個交互類網站。

三、 網頁基本結構

（1） 網站Logo

LOGO是徽標或者商標的外語縮寫，起到對徽標擁有公司的識別和推廣的作用，通過形象的徽標可以讓消費者記住公司主體和品牌文化。網絡中的徽標主要是各個網站用來與其它網站鏈接的圖形標志，代表一個網站或網站的一個板塊。另外，LOGO還是一種早期的計算機編程語言，也是一種與自然語言非常接近的編程語言，它通過“繪圖”的方式來學習編程，對初學者特別是兒童進行寓教于樂的教學方式。

（2） 網站名稱

網站名稱類似于電視臺的名稱，網站名稱一般在網站首頁上，起到區別網站的目的。

（3） 導航菜單

導航菜單是指位于頁面頂部或者側邊區域的，也稱之為導航欄。在頁眉橫幅圖片上邊或下邊的一排水平導航按鈕，它起著鏈接站點或者軟件內的各個頁面的作用。

（4） Banner （橫幅廣告）

橫幅廣告（Banner Ad.）是網絡廣告最早采用的形式，也是目前最常見的形式。橫幅廣告又稱旗幟廣告，它是橫跨于網頁上的矩形公告牌，當用戶點擊這些橫幅的時候，通?？梢枣溄拥綇V告主的網頁。

（5） 網頁正文

即網頁的主體內容。

（6） 網頁頁腳

網頁頁腳是網頁中每個頁面的底部的區域。常用于顯示附加信息。如作者、備案號等。

四、 網頁基本構成元素

（1） 文本

文本是網頁上最重要的信息載體和交流工具，網頁中的主要信息一般都以文本形式為主。

（2） 圖像

圖像元素在網頁中具有提供信息并展示直觀形象的作用。
而圖像也分為兩種：

• 靜態圖像：在頁面中可能是光柵圖形或矢量圖形。通常為GIF，JPEG或PNG；或矢量格式，如SVG或Flash。
• 動畫圖像：通常動畫為GIF和SVG。
  對的，GIF并不一定要是動畫，它也可以不動！

（3） 超級鏈接

超鏈接是從一個網頁指向另一個目的端的鏈接，超鏈界的目的端可以是網頁，也可以是圖片、電子郵件地址、文件和程序等（標準的“換頁”反應。分為URL、URI、URN），是網頁重要的構成元素。

（4） 導航欄

導航欄在網頁中是一組超鏈接，其連接的目的端是網頁中重要的頁面。

（5） 動畫

動畫（flash動畫）在網頁中的作用是有效地吸引訪問者更多的注意。

（6） 表格

表格是在網頁中用來控制面業信息的布局方式。

（7） 框架

通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。

（8） 表單

表單可以用來在網頁中發送數據，特別是經常被用在聯系表單-用戶輸入信息然后發送到Email中。

五、 網頁配色

（1） 色彩搭配原則

特色鮮明

一個網站的用色必須要有自己獨特的風格，這樣才能顯得個性鮮明，給瀏覽者留下深刻的印象。例如順豐官網的黑紅配色就給人一種穩重的商務感。

搭配合理

因為網頁是設計給人看的，因此在遵從藝術規律的同時，還考慮人的生理特點，色彩搭配一定要合理，給人一種和諧、愉快的感覺，避免采用純度很高的單一色彩，這樣容易造成視覺疲勞。

講究藝術性

網站設計也是一種藝術創作，如何抓住瀏覽者的目光，需要進行藝術創新，設計出既符合網站要求，又有一定藝術特色的網站。

（2） 網頁色彩搭配方法

同種色彩搭配
同一色相的色彩進行變化統一，形成不同明暗層次的色彩，是只有明度變化的配色，給人以親和感。盡管網站設計要避免采用單一色彩，以免產生單調的感覺，但通過調整色彩的飽和度和透明度也可以產生變化，使網站避免單調。

鄰近色
色環上相鄰色變化統一配色，能給人以融合、親近感，可以構成平靜、調和而又有變化的色彩效果。采用鄰近色設計網頁可以使網頁避免色彩雜亂，易于達到頁面的和諧統一。

對比色彩搭配
不同相貌的色彩被運用到一起，會產生豐富的色彩效果，能夠引起人們的關注。通過合理使用對比色能夠使網站特色鮮明、重點突出。在設計時一般以一種顏色為主色調，對比色作為點綴，可以起到畫龍點睛的作用。

暖色色彩搭配
以紅、橙、黃等暖色為主調的色彩搭配。這種搭配能給人以熱烈、溫暖、激情等感覺。

冷色色彩搭配
冷色調是以藍、綠等冷色為主色調的色彩搭配。這種搭配能給人以清涼、冷靜、親和的印象。

有主色的混合色彩搭配

文字內容的顏色與網頁的背景色對比要突出

---

有問題歡迎指出糾正。
轉載注明出處。

總結

以上是生活随笔為你收集整理的网页设计初了解-基础知识篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。