網頁設計定義和術語

網頁設計已經存在一段時間了，它開發了一種複雜的、充滿行話的語言。只要您邁出網頁設計世界的最小一步，您就會開始聽到「您想使用什麼CMS？」、「您想要固定的CMS 嗎？」布局？」、「您想使用什麼虛擬主機？」 你會想知道這一切意味著什麼。我們知道，試圖找出所有關鍵的網頁設計定義和術語可能會讓人不知所措，特別是如果它是全新的。

 

網頁設計涵蓋了大量的工作，從編寫原始碼的網頁開發人員到從事界面工作的UI和UX設計師，再到負責網站外觀和感覺的網頁設計師。有很多人參與網頁設計。

了解網頁設計中的一些首字母縮略詞和行業術語的含義可以使與您的設計師和開發人員的合作變得更加容易，還可以幫助您了解自己的網站的實際運作方式。因此，無論您是聘請幫助還是自己動手，了解網頁設計和開發中最常用和最容易混淆的術語都可以派上用場。

 

網頁設計定義

無障礙

可訪問性是當今網頁設計的一個大問題。從本質上講，這意味著人們（包括任何有聽力或能見度障礙的人）可以訪問您的網站。在創建網站之前和創建網站時牢記這一點很重要。如果您不確定從哪裡開始，請查看這六個步驟，以使您的網頁設計易於訪問。

 

摺疊下方（和摺疊上方）

下折和上折是兩個起源於報紙的術語。「摺疊」是報紙摺疊的地方 上面和下面描述訊息是出現在摺疊的上半部分還是下半部分。對於網頁，「摺疊」通常定義為您必須開始滾動的點，但原理是相同的，摺疊上方的訊息（ATF）比摺疊下方的訊息（BTF）更易於訪問和可見.

 

彈性布局

彈性布局是一種設計網頁的方法，它將元素及其在頁面上的位置之間的關係描述為百分比，而不是專門設計的距離和大小。這意味著網頁更具適應性，無論是針對訪問者在字體大小和間距方面設置的首選項，還是在優化頁面以在智慧型手機或平板電腦上查看時。

如今，彈性布局是響應式設計方法的關鍵部分，但在響應式設計的概念出現之前，彈性布局提供了一種使網站具有適應性的簡單方法。

 

Ex

Ex是一種度量單位，它使用字體中的小寫「x」作為標準度量。此高度通常為字體尺寸的一半。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。

 

固定寬度（布局）

固定寬度布局是一種設計網頁的方法，設計師將指定網頁的大小以及元素將在其中顯示的確切位置。與彈性布局相比，這使設計人員可以更好地控制網頁的設計，但會使頁面對不同螢幕尺寸的適應性降低。

 

十六進位

十六進位，也稱為「十六進位」數字，是一種基數為 16 的數字系統，這意味著它們使用 16 個符號來定義顏色。十六進位數字使用從 0 到 9 的數字和從 A 到 F 的字母。每種顏色由三對十六進位數字定義。第一對數字或字母與紅色相關，第二對與綠色相關，第三對與藍色相關。

 

無限滾動

無限滾動是在您繼續滾動時加載新內容。這創造了一個「無限」、永無止境的捲軸。一些流行的例子是Facebook時間線、Pinterest 或Twitter提要。

 

視差滾動

這種滾動方法在網站設計中創造了一種深度感。當用戶滾動時，網站上的元素在用戶滾動時看起來處於不同的距離並以不同的速度行動。這會在平面網站上產生深度和距離的錯覺。

 

解析度

解析度是螢幕上顯示的像素數。它是網頁設計中用於指定圖像大小的標準方法。圖像品質通常用每英寸像素數來描述，像素數越多，圖像品質越高。

 

響應式/行動友好/行動優化

截 2025年，超過一半的網路流量發生在智慧型手機上。這意味著網站在行動裝置和桌面設備上的最佳外觀變得越來越重要。使網站具有響應性/行動友好/行動優化意味著設計和開發一個網站，以適應正在查看它們的設備或螢幕。

 

可用性

可用性是網頁設計中的一個概念，它描述了您的網站對其設計的訪問者的可用性。理想情況下，訪問者在第一次遇到您的網站時將能夠輕鬆使用您的網站，並且將障礙、挫折和尋求幫助的需求降至最低。了解可用性原則是構建優秀網站的關鍵一步。

 

UX（用戶研究）/UI（用戶界面）

UX 和 UI 設計是改善用戶體驗的工作。了解UX 和 UI的差異以了解它們如何協同工作非常重要。

 

UX，用戶研究，涉及用戶與網站互動的所有方面，從開始到結束。目標是提高用戶與網站之間的互動品質。

UI，用戶界面，側重於網站的視覺和互動元素，例如按鈕、圖標、排版。目標是改善網站的外觀和功能。

 

前端網站剖析

 

麵包屑

當網頁向用戶展示他們如何瀏覽網頁以及如何返回主頁時，通常是通過麵包屑導航完成的。這通常顯示為一系列嵌套類別，例如 Home > Category > Year > Month > Post。

 

圖標

收藏夾圖標是一個顯示在瀏覽器標籤欄中的小圖標。它們通常為16×16像素（這確實非常小），並保存為 .ico、.gif 或 .png 圖像。您幾乎可以使用任何您喜歡的圖像作為網站圖標，只要它的大小合適並以正確的格式保存。

 

焦點

網頁上的焦點是您的眼睛被吸引到的頁面部分。設計師將花費大量時間確保他們設計出真正吸引觀眾注意力的焦點，然後將頁面上最重要的東西放在焦點上。這確保它被儘可能多的人看到。

 

前端

這些都是人們第一次訪問您的網站時會看到的所有元素，如圖像、文本、頁面。它本質上是人們將在網站上進行互動和參與的內容。

 

漢堡包圖標

漢堡包圖標是指在最近的程序中常見的選單圖標。它具有三個水平條（因此稱為「漢堡包」）並將傳統導航選單隱藏在單個圖標後面。

 

登陸頁面

這是您網站的訪問者將看到的第一個頁面。在許多網站上，為了從訪問者那裡引出一些東西（例如共享他們的電子郵件地址，或專門用於產品的頁面），使用特殊的登錄頁面。您的著陸頁是您網站上最重要的頁面之一，您應該花大量時間對其進行優化。

 

導航

導航是用於在網頁元素之間行動的系統，並且是任何網頁中最重要的元素之一。這就是為什麼了解網站導航的關鍵原則很重要的原因。最清晰的導航示例是出現在大多數網頁上的選單。但也要密切注意頁面的組織方式以及它們之間的連結。這些還可以使訪問者更輕鬆地瀏覽網頁。

 

後端網站剖析

 

後端

這是您的系統中有效運行您的網站的部分，但對訪問者是隱藏的。有許多不同的後端可用，但它們通常都包含相同的內容——應用程式、訊息結構和您的CMS。

 

內容管理系統

內容管理系統——這是一個後端工具，用於運行您網站的內容、添加用戶、管理評論等等。如果您曾經使用WordPress構建網站，那麼您就使用過CMS。CMS使設計和構建網頁變得更加容易，因為它隱藏了網站運行的大部分原始原始碼。

 

電子商務

電子商務代表「電子商務」。就像「電子郵件」代表「電子郵件」一樣。您通常會在您的網站上添加一個電子商務商店，該商店將處理產品描述、購買和銷售以及客戶數據。

 

HTTP / HTTPS

這是處理瀏覽器、伺服器和Web應用程式之間數據交換的系統。它定義了數據必須如何打包和發送。

HTTPS是HTTP的擴展，能夠通過SSL（安全套接字層）建立連接。這是一種更安全的在線數據交換方式。如果網站使用標準HTTP而不是 HTTPS，許多現代Web瀏覽器會警告您。

作為網站所有者，您可以從各種提供商處購買SSL證書（使用HTTPS所需）。添加後，這將使您的網站更加安全並與您的客戶建立信任。

 

插件

位於基本網站之上的一小部分軟體，用於提供附加的安全功能。插件適用於大多數流行的 CMS平台，可用於多種功能，從自動化博客文章到管理客戶線索。

 

模板

模板在網頁設計中的使用方式與它們用於文檔和圖像的方式大致相同——以提供跨許多不同頁面的設計一致性。大多數CMS台都會為您的網站提供一組模板，這將有助於使您的頁面和設計在它們之間保持一致。

 

技術網路和網際網路術語

 

錨文字

錨文字是一個短語或幾個單詞，其中包含一個超連結。像這樣一個：錨文字解釋。使用正確的錨文字可以對您的頁面在搜尋引擎排名中的表現產生巨大影響。

 

反向連結

這些是從其他網站到您網站的連結。例如，當另一個網站連結到您的網站以將其讀者定向到某個資源時，您就收到了反向連結。在提高搜索排名方面，反向連結非常重要，因為來自受信任網站的多個反向連結將提高您網站的知名度。

 

頻寬

頻寬是一個在許多不同上下文中使用的術語，但它本質上是指在給定時間段內發送或接收的數據量。它可用於描述您的網際網路速度，例如，通常以千比特每秒(kbs) 為單位引用。但有時，它用於描述您每月可以使用多少數據作為您的網路託管包的一部分。

 

緩存

緩存是由Web瀏覽器保存的數據集合。這意味著下次用戶訪問該網站時，頁面加載速度會更快，因為它是從本地內存加載的。

 

DNS

DNS代表「網域服務」。這是您的網路瀏覽器用來查找網頁位置的系統。當您鍵入iware.com.tw 時，您的瀏覽器將查看「DNS 表」，該表將這個人性化的地址轉換為電腦友好的地址（即由數字組成）。DNS 系統會跟蹤世界上所有網頁的位置，以便您的瀏覽器可以找到它們。

 

網域

這是您網站的名稱。您可以從許多公司購買網域。它們最多可以是63個字符。例如，iware.com.tw是我們的網域。

 

FTP

FTP 代表「文件傳輸協議」，是一種將文件和數據從本地存儲（例如，在您的電腦上）傳輸到 Web 伺服器的系統。為了使用 FTP，您需要下載一個稱為FTP客戶端的小軟體。

 

永久連結

一個永久連結，允許您指定一個地址，該地址將始終指向特定的博客文章或頁面，無論您如何更改圍繞它的網站結構。如果您正在使用博客文章來提高網站的流量，這將非常有用，因為如果您決定重新設計網站或更改網域，則不必手動更改數十（或數百）個連結。

 

網址

指定可以在何處找到特定頁面或其他資源的地址。

 

虛擬主機

網路主機是運行存儲您網站的伺服器的公司。正如我們在關於什麼是網路託管的文章中所解釋的那樣，網路託管服務商提供的服務水平差異很大。一個好的網路主機將能夠向您保證您的網站在 99.9%的時間內都可以訪問，並且還將為您提供確保其安全和有效的工具。

 

網路伺服器

Web伺服器是實際存儲您的網頁的電腦。它可能位於您的網路主機擁有的伺服器安裝中，但也可以運行您自己的伺服器。

 

Web 開發術語

CSS

CSS代表級聯樣式表， HTML一起，這些表是任何網頁的最基本部分。十年前，網頁上使用的格式（例如標題有多大或圖片是否有邊框）是在HTML原始碼本身中定義的。這意味著更改格式是一個費力的過程，需要遍歷頁面的每個元素並更改原始碼。

有了CSS，事情就簡單多了。頁面的樣式包含在一個（或多個）CSS文件中，這些文件定義了標題的外觀、圖像的顯示方式以及許多其他元素。這些告訴瀏覽器如何呈現網站。這樣，只需切換一段原始碼就可以調整整個網站的格式。

 

DHTML

DHTML代表動態超文本標記語言。這是一種將多種網頁設計語言（HTML、JavaScript 和 CSS）融合為一種用於Web開發的超級語言的語言的術語。這通常是現代Web開發人員用來為您創建網站的方法。

 

文檔類型

在 HTML中，文檔類型是對網頁使用的 HTML類型和版本的描述。瀏覽器使用它來檢查頁面的完整性，如果錯誤，可能會引發安全錯誤。

 

Em

Em 用於描述與頁面上使用的「父」字體相關的字體大小。1Em表示字體（或有時其他元素）與其父元素的大小相同，2em表示它們的大小是其兩倍，依此類推。

 

嵌入式樣式

儘管 CSS（見上文）可用於一次描述整個頁面的格式，但有時您只需要更改一頁上的樣式。這是使用嵌入式樣式的時候。嵌入樣式是一段寫入網頁標題的CSS原始碼，它僅影響該頁面上的元素，而不影響整個網站的元素。

 

字體系列/樣式/粗細

Web 設計人員和開發人員通常不使用特定字體，因為不同的瀏覽器並不總是共享完全相同的字體。這就是為什麼在CSS文檔中，您會看到要使用的字體被定義為一個字體系列——一組可以使用的字體，而不是一個特定的字體。除了這個定義，CSS文檔還將定義字體樣式（斜體、下劃線等）和粗細（粗體、淺色等）。

 

HTML

超文本標記語言——這是網際網路的基礎。所有網頁至少在某種程度上都是用HTML編寫的，HTML被開發為儘可能容易編寫。這可能是非常有益的，事實上，嘗試一個HTML原始碼教程，看看它是否容易編寫——你會驚訝於你能在幾個小時內實現什麼！

 

元數據

元數據是包含在網頁標題中的數據。這些數據可用於您的瀏覽器，但不會作為您正在查看的網頁的一部分顯示——您必須查看原始碼才能訪問它們。

 

開源

開源軟體由用戶維護，可以免費使用和修改。這與由特定公司擁有和維護的專有軟體形成對比。大多數Web開發人員會使用開源軟體，至少在某些時候是這樣，因為它不僅更便宜，而且更安全。如今，大多數Web開發人員將通過使用以開源語言編碼的容器來最大程度地減少安全漏洞。

 

臨時網站

暫存網站是製作網站的幾乎最終副本的過程，然後在推出網站的實時版本之前對其進行測試。大多數Web開發人員會在網站發布之前「暫存」網站，以檢查一切是否正常工作。通常情況下，網站的重大更改會發生在臨時網站而不是實時網站上。

 

有效的

在網頁設計中，有效的網頁是那些沒有錯誤的網頁。實際上，這意味著網頁符合W3C 發布的HTML規範中規定的標準W3是為Web開發制定標準的社區。

 

XML

XML代表可擴展標記語言。XML是網頁設計的基本部分，因為它充當「元語言」，將一種語言的元素轉換為另一種語言。這意味著可以使用多種不同的語言構建網頁，每種語言都通過 XML進行通信。

 

最後一句話

當然，開始設計網站時無需了解所有這些網頁設計定義和術語——無論是您自己還是在幫助下。歸根結底，網頁設計是一個學習過程，最好的設計是迭代的藝術作品，隨著您學習新事物而不斷改進。

也就是說，擁有一份有關有時複雜的網頁設計世界的指南會非常有幫助，尤其是在您剛開始時。我們專業的網頁設計師可以幫助您開始激動人心的網頁設計世界。