前言
當你開始想要研究架設網站的細節時,在網站的規劃或與網頁設計公司討論時,是不是常常會遇到許多陌生名詞,聽的你滿腦子亂糟糟,頭上冒出很多問號?
例如在研究網站時,很常看到的 layout 、 htm l、 rwd、 slider … 等,這些到底是什麼意思呢?
除了不了解這些名詞可能導致溝通困難外,還有可能網站功能給想像有落差,導致最終得網站架設成果不如同想像中美好!
了解到隔行如隔山,這篇文整理了一些常見的網頁設計名詞,幫助你未來遇到時不再感到困惑!
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/4ec0c249-2ba7-4a93-ac30-65fbe623b8b6/alphabet-background-2023-11-27-05-32-47-utc-2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073724Z&X-Amz-Expires=3600&X-Amz-Signature=561c512b45e4879396d610bcf742565059ca8b4c5c48c5b3574997b688977402&X-Amz-SignedHeaders=host&x-id=GetObject)
網站規劃 名詞介紹
那就讓我們先來看看網站規劃時,最容易碰到的幾個名詞。
網域 Domain
網域是網站的網址,是網站的核心部分,像是住家地址一樣,是在網際網路中的門牌號碼。
它可以分為三個層級,以最常見的網址形式 https://www.xxxx.com.tw/ 為例,「.com.tw」為第一層網域,「xxxx」為第二層,「www」則是第三層網域,又稱子網域(Subdomain)。
網域是需要花錢租主機或買網址的,中華電信、遠傳…等公司都有提供此服務,
如果還在練習或評估階段,也有免費的網址、網路空間可以使用,給大家參考看看!
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/9351e5b6-4b53-4563-af86-80f37a7776b8/cropped-shot-of-seo-manager-using-tablet-with-webs-2023-11-27-05-18-46-utc-2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073724Z&X-Amz-Expires=3600&X-Amz-Signature=48ca726d0d8b0b30ea6d8c7d607c5a166935ef9d6d032fead4d7b60f8d94c5d6&X-Amz-SignedHeaders=host&x-id=GetObject)
內容/後台管理系統 CMS
CMS 是 Content Management System 的縮寫,指的是一套軟體系統或工具,用來支援內容管理。它主要應用於管理物品、文案或資料的儲存、掌管、修訂與文件發布等功能。
一般情況下,在提到 CMS 時,通常指的是網站的後台管理系統,也就是網站後台。
透過 CMS ,網站管理者只需要使用帳號密碼登入網站後台,就可以輕鬆管理網站前台的內容,
不需要懂網頁設計或程式語言,透過網站後台,管理者可以更新文字、圖片等資料至網站前台,
讓使用者和客戶可以瀏覽和閱讀。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/17cf00ae-fd9d-462f-b446-83b2ca3d2a0e/man-completing-a-checklist-of-online-digital-forms-2023-11-27-04-52-06-utc-2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073724Z&X-Amz-Expires=3600&X-Amz-Signature=790404dac43fd0cc4c9f16ef540552c78ea79b6dc73edcfadb6f0dd026624d4e&X-Amz-SignedHeaders=host&x-id=GetObject)
網頁設計 名詞介紹
接下來讓我們來看看,在做網頁設計時,會遇到的名詞吧!
使用者介面 UI
UI 的全名為 User Interface 使用者介面。 指的是使用者實際接觸產品的部分,他們操作使用者介面的選單或指令,來運用背後的程式。
實務開發上項目包含外觀、前端和互動設計…等,UI 又常和 UX(User Experience)設計搞混,
雖然都是產品設計,但 UX 著重的是整體流程的「體驗」,大多是無形的,而 UI 則著重在具體的功能和視覺安排上。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/7c3de307-4dd0-4461-b395-443deafe406c/closeup-of-two-young-women-in-office-and-holding-d-2023-11-27-05-19-37-utc-2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073724Z&X-Amz-Expires=3600&X-Amz-Signature=363687c8b5d6677e20dc283266de668b4b5b1008faa9136afb166f47f76af849&X-Amz-SignedHeaders=host&x-id=GetObject)
超文本標記語言 HTML
HTML 全名為 Hyper Text Markup Language,是用來建立網站的標準語言,將資訊結構化讓內容變得有意義,目的是組織架構呈現網頁內容。
通常會與 CSS 和 JavaScript 一起使用,用於網頁設計上的美化和增加互動性。
HTML 將網頁內容結構化,如標題、段落、列表等,這些結構都可以在一定程度上描述文件的意義,HTML的語言形式為<html>。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/b2f3ce94-1e71-49bc-8658-2e8e3ec9654b/closeup-screen-code-2023-11-27-04-50-54-utc-2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073724Z&X-Amz-Expires=3600&X-Amz-Signature=c2435ff92846f633a715a796490f9cd7a251b03c614750de29ecd88c2473d069&X-Amz-SignedHeaders=host&x-id=GetObject)
網站建置 名詞介紹
最後讓我們來看,在執行到尾聲時,跟網站建置有關的名詞吧!
快取 Cache
快取 Cache 是一種技術,用於臨時儲存資料用來減少延遲時間。
最初出現在電腦作業系統中,位於 CPU 和主記憶體之間,透過快取功能,CPU 可以直接從快取中獲取資料,不必每次都到主記憶體中抓取,適用於經常使用但不常更動的資料。
除了 CPU 和主記憶體之間的快取外,還有記憶體和硬碟之間的磁碟快取,以及硬碟和網站伺服器之間的網頁快取。當我們使用電腦瀏覽網站時,會使用到網頁快取,原理與前者相似,只是位置位於伺服器和用戶端之間。
每次用戶端向伺服器發送請求之前,會檢查是否有快取資料,如有則直接使用,沒有的話,才會向伺服器發送請求。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/b414296a-3f91-4eca-ae0b-12fb09caf800/modern-processor-and-motherboard-2023-11-27-05-02-00-utc-2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073725Z&X-Amz-Expires=3600&X-Amz-Signature=ffa69fa91802238e648dfaa1ff39c6655ac01814c9c792fc4b5aa55066fefef6&X-Amz-SignedHeaders=host&x-id=GetObject)
安全通訊協定 SSL
SSL 全名為 Secure Socket Layer ,他是一種加密技術,用於保護在網路上傳輸的敏感資料,
例如:信用卡號碼、身分證字號和地址等。
透過 SSL 加密的網站能夠有效保護用戶在網站內或網站間傳遞的資訊不被竊取,降低資料外洩的風險, SSL 數位憑證是專門針對 SSL 技術發放的證書,用戶可以通過確認網站是否具有 SSL 安全憑證來評估其在網站操作或輸入資料時的安全性。
SSL 證書分為多個等級,等級較高的 SSL 憑證能夠獲得用戶更高的信任度,讓用戶更加放心地使用網站和伺服器。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/7f2a4bc0-3125-42ce-ac5c-eb366d2c9e29/close-up-image-of-keyboard-magnifying-glass-and-n-2023-11-27-05-11-53-utc-2.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073725Z&X-Amz-Expires=3600&X-Amz-Signature=48478b6f11a996604da746097f1deb24fde6c397ae6765c58e1a6de17d56f5fd&X-Amz-SignedHeaders=host&x-id=GetObject)
沒有使用 SSL 的網站會碰到什麼問題嗎?
若網站不具備 SSL 安全憑證,搜尋引擎對此網站的信任度會下降,可能會導致 Google 較不願意推薦此網站給用戶,從而影響到網站的SEO排名。另外,網站不具備 SSL 安全憑證,將導致網站上的資料容易被有心人士入侵並盜用,有可能會碰到辛苦經營網站獲得的數據資料遭到竊取,或是用戶的個人資料被外流,無論何者對網站經營都是嚴重的打擊。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/6fe1bd11-a9fa-44c3-8b2c-6fe185df1924/encrypted-hard-disk-padlock-with-cipher-on-an-ope-2023-11-27-05-29-44-utc-2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073725Z&X-Amz-Expires=3600&X-Amz-Signature=df3e8f911bc7cb3eec3a84ba34dc6650b4c32bdc95f2f05a7af84b516f0bcab4&X-Amz-SignedHeaders=host&x-id=GetObject)
想詢問架設網站的相關問題?
Alion 公司提供 WEB/APP系統客製開發 服務,團隊擁有各界領域產業合作開發經驗,
可應對整合各類型的系統,且有與大型專案合作經驗。
若需要與其他團隊共同開發,可作為您的技術顧問,提出合作解決方案。
若對架設網站有任何問題,不知道自己適合什麼樣的網站,
或是有搞不懂的地方,都歡迎
聯絡 ALION 公司
ALION 公司會以最專業的角度,與您一同商討產業的面向以及需要的功能,
讓您用最符合經濟效益的成本預算,達到最符合需求的系統!
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/1aa7a5c8-c989-4328-add4-399f93484a20/2d2bc700-bc76-4921-80c4-e43eac34f1e5/%E6%88%AA%E5%9C%96_2024-02-29_%E4%B8%8B%E5%8D%885.34.12.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073725Z&X-Amz-Expires=3600&X-Amz-Signature=2bd8b70faa85312e8894cbfd4dca8b39a859385336cfab89172c28b79fd6fda5&X-Amz-SignedHeaders=host&x-id=GetObject)
*圖片來源:
ALION
總結
看完是不是對系統有近一步的認識呢?當你了解這些名詞時,就能夠更輕鬆地閱讀和理解相關的技術文件、教學和討論。
再來,了解專有名詞可以提高你的溝通效率,當你與其他網頁開發者、設計師交流時,使用正確的術語可以讓溝通更加清晰和準確,避免誤解和混淆。
最後,了解專有名詞還可以幫助你更好地應用相關工具和技術,當你熟悉這些名詞時,你會更容易理解新技術的工作原理,並能夠更有效地應用它們在自己的網站中,讓網站的設計能夠更貼近自己的想像。
總而言之,了解網頁的專有名詞不僅可以讓你了解更多知識外,還可以提高你的工作效率和溝通能力,如果還是覺得不太清楚的話,歡迎
聯絡 ALION
喔!
閱讀更多:
架設網站前,需要知道的「三」件事