網頁設計常用的專有名詞、英文詞彙解釋

什麼是layout？什麼是主選單？什麼是slider？什麼是footer？什麼是header？我們在這裡列出幾個網頁設計領域常用的專有名詞，用淺顯易懂+比喻的方式， ... 網頁設計作品公司網站分類ALL上市櫃公司集團官網產品代工公司網站生產設備公司網站加工技術公司網站客製服務公司網站生技醫療公司網站消費零售品牌官網學校教育單位網站宗教文化事業網站網頁設計分類ALL形象網站企業網站客製化系統平台RWD網頁設計多國語言版本商品及形象拍攝網路行銷優化最新網頁設計作品酷柏團購電商平台達洛維門窗形象官網設計ChenSource企業官網設計Klaymor形象官網設計通嘉科技集團網站設計LEX企業官網設計HarvestOne品牌形象網站認識網站設計洽詢網站報價前有哪些準備事項？網站製作會如何進行？有哪些流程？RWD響應式網頁設計是什麼意思？形象拍攝為什麼可以提昇網站價值？CMS網站後台有什麼行銷優勢？網站完成後如何進行SEO優化工作?RWD網頁設計什麼是RWD響應式網頁設計RWD響應式網頁設計作品案例RWD響應式網頁設計的趨勢與特點網頁設計服務形象網站設計企業網站設計客製化網站系統網站設計流程網站設計費用設計專欄網站企劃討論網站之前的5個準備工作官網設計有哪些重點？網站製作有哪些流程？公司網站要規劃哪些內容？網站架構表(範例檔下載)>>所有網站企劃文章網頁設計如果沒有RWD，手機版網頁會如何呈現？RWD常見的設計形式企業網站有哪些新的設計趨勢？透過攝影提昇網站質感>>所有網頁設計文章網站建置CMS系統建置網站有什麼好處？客製化、套版網頁設計比較網站建置重點工作網站改版前項目檢查>>所有網站建置文章數位行銷網站行銷SEO入門網站後台有哪些必備的SEO工具？SEO文章要怎麼寫？企業網站SEO網頁設計重點>>所有數位行銷文章聯絡我們 2021-09-30 EricWang 網頁設計常用的專有名詞、英文詞彙解釋 你是否曾經在跟網頁設計人員或執行網站專案時，聽不懂這些人講的某些專有名詞是什麼意思？就算技術人員用中文跟你解釋了，也還是有聽沒有懂？我們在這裡列出幾個網頁設計領域常用的專有名詞，用淺顯易懂+比喻的方式，讓你快速了解這些網頁設計外星文的意思。

  當你有機會與網頁設計公司合作、或是與網頁設計師一起工作時，你是否發現常常聽到一些滿頭問號的專有名詞，什麼是layout？什麼是主選單？什麼是slider？什麼是footer？什麼是header？隔行如隔山，這時候你可能需要一個網頁設計專有名詞的字典。

我們列出幾個外行人最常問的網頁設計名詞，讓你用最短的時間進入狀況。

  延伸閱讀：網頁設計公司怎麼挑？網站公司挑選守則五要點一篇整理！     目錄什麼是「網頁設計」？什麼是「網站設計」？什麼是RWD(響應式網頁)？什麼是Header(頁首)？什麼是Footer(頁尾)？什麼是Breadcrumb(麵包屑)？什麼是Copyright(版權所有)？什麼是Layout(版面設計)？什麼是切版？什麼是Slider(圖片輪播)？什麼是Overview頁(總覽頁)？List頁(列表頁)？什麼是Sitemap(網站導覽)？ 什麼是「網頁設計」？什麼是「網站設計」？ 通常「網頁」是的是單一個頁面，而「網站」則是由許多網頁所組成的一個站台。

所以當我們講「網頁設計」，通常指的是一個頁面的設計，而「網站設計」，則指的是整個網站、包含所有頁面的設計。

    什麼是RWD(響應式網頁)？ 簡單的說，就是同一個網頁，因應不同裝置寬度(電腦、平版、手機)而有不同的版面變化。

延伸閱讀：什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂手機版網站     什麼是Header(頁首)？ Header(頁首)，通常包含Logo(網站標誌)、Mainmenu(主選單)及其他放在網站最上方的相關元素。

網頁很容易因為一個點擊，就跑到其他網站去。

Header是一個網站最具識別性的區塊，它用來讓使用者了解是不是還在同一個網站，並透過Mainmenu(主選單)切換到網頁的其他頁面，就像百貨公司的樓層導覽一樣，讓你知道自己所在位置，以及是否還在同一棟百貨公司大樓。

    什麼是Footer(頁尾)？ Footer(頁尾)，指的是網頁最下方的區塊，通常包含頁尾導覽(footnav)、聯絡資訊、隱私權政策、回首頁等訊息，有些網站也會加上公司logo等具識別性的元素。

最近流行以Big-footer的設計方式，在頁尾加入像sitemap般的大型導覽設計，一來可以用來強化SEO的操作，二來可以當成sitemap，讓使用者連結至網站的其他頁面。

    什麼是Breadcrumb(麵包屑)？ Breadcrumb(麵包屑)，它曾經有很多不同的稱呼，網站導覽、層級導覽、瀏覽路徑、網頁路徑，都是指同一個東西。

後來因為從國外導入UI/UX的觀念，在網頁設計中就直接以英文名Breadcrumb直譯為麵包屑。

麵包屑源自於童話故事糖果屋，故事主角從沿路灑下的麵包屑回到家，因此又稱之為麵包屑導航，既直覺又容易理解。

    什麼是Copyright(版權所有)？ Copyright(版權所有)是寫在頁尾的一段文字Copyright©，用來說明這個網站的內容版權歸屬於哪一間公司或組織，一般來說只要放上公司抬頭或組織名稱即可。

延伸閱讀：版權宣告(Copyright©)應該怎麼寫？     什麼是Layout(版面設計)？ Layout(版面設計)指的是一個網頁從上到下的圖文編排。

網頁不是平面印刷品，網頁的每個文字和圖片都是可能有功能性的、可以連結的、可以互動的。

因此版面設計除了色彩、文字編排以外，也包含了網頁的版面配置、區塊功能、未來的互動設計。

Layout通常是採用靜態圖面的方式呈現，也就是JPG圖檔，它是沒有互動功能的，不能點擊，也沒辦法看到電腦版切換到RWD手機版的變化。

即便如此，我們通常還是需要用Layout來溝通整個頁面的視覺設計和互動設計，以做為下一階段切版的溝通基礎。

    什麼是切版？ 切版，指的是把版面設計(JPG圖檔)透過css、javascript和html編寫成真正的網頁，較為正式的講法則是「前端設計(Front-endDesign)」。

切版後的網頁可以有一些基本的互動，例：點擊、連結、放大圖。

切版完成後，就可以進入程式撰寫和資料庫整合的階段。

    什麼是Slider(圖片輪播)？ Slider(圖片輪播)，使用多張圖片在同一個區塊內輪流播放，可以讓網頁增添豐富又不佔空間，經常會運用在首頁的主視覺，它可以自動播放，也可以用手指拖拉瀏覽各個圖片或頁面。

即便它可能對SEO造成負面影響，也只有不到一半的人會瀏覽第二頁，但老闆們和部份行銷人員們還是很愛Slider。

    什麼是Overview頁(總覽頁)？List頁(列表頁)？ List頁指的是有多篇文章標題的頁面，常用於「產品列表」、「新聞列表」，點擊文章標題後，就會進入單一文章頁。

Overview頁則通常是分類列表頁，顧名思義讓使用者一進頁面就看到這間公司所有的產品主要分類，所以也叫總覽頁。

    什麼是Sitemap(網站導覽)？ Sitemap(網站導覽頁)，有人直譯為「網站地圖」，透過系統自動將網站選單架構列出清單，讓使用者快速了解一個網站的內容架構，但實質上很少人會認真去瀏覽Sitemap。

Sitemap的另一個用途是提供Google將網站內容索引至關鍵字資料庫。

然而隨著近來Google及各大搜尋引擎均可透過送出sitemap.xml或是在網站根目錄佈署sitemap.xml檔，讓Google收錄網站各頁面，實質的Sitemap頁在近年來已逐漸淡出，許多網站已慢慢捨棄Sitemap頁的建置。

  延伸閱讀：網站架構有什麼設計參考範例？來準備網站架設前的第一份文件     當你熟悉這些網頁設計專有名詞並不代表你了解網頁設計但它會讓你跟網頁設計師的關係更融洽     如果你對網頁設計還有什麼不了解的地方，歡迎詢問凱士       訂閱文章 想要收到CADIIS網頁設計公司的相關訊息嗎？ 我們會不定期更新最新網頁設計相關文章，歡迎訂閱凱士知識+。

  ＊歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司       網站設計服務諮詢 為什麼推薦台中網頁設計公司凱士數位？位於台中的凱士相對有機會接觸到各種不同的產業面向，擁有各種產業的網站設計經驗，幫助企業提升網路品牌形象，建立良好的使用體驗。

如果您有形象網站、企業網站、客製化網頁、網站改版相關需求，歡迎聯絡我們。

  您可以直接填寫諮詢表單，或撥打諮詢電話 04-22210688         EricWang 凱士網頁設計公司專案經理Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。

在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。

        網頁設計 網站企劃 相關文章 SEO網頁行銷必備：6個網站後台SEO管理工具 網站改版有哪些重點？網站製作前先看看是否做到這10件事 什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂手機版網站 好的形象網站設計，可以幫助公司提升品牌形象與企業價值，透過清楚的網站架構與視覺設計，造就良好的使用體驗與企業形象。

  需要網站設計服務嗎？ 凱士為您設計製作優質網站 形象網站、公司網站、企業網站、及各類型客製化網站系統平台   立即填表諮詢 首頁 / 設計專欄 / 網頁設計常用的專有名詞、英文詞彙解釋 想進一步了解網頁設計服務？ 立即洽詢