網頁結構為何重要

在我們開啟評估網頁設計的是時候，結構是最先開始的地方，網頁結構是網頁的基礎，它決定了網頁的外觀和功能，也決定了網頁的可用性和可訪問性（a11y）。

線框稿

線框稿(Wireframe)可以很快的將我們的想法轉換成網頁的結構，它是一種低保真度的設計，通常是以簡單的線條和方塊來呈現，這樣的設計可以讓我們專注於網頁的結構，而不是花費太多時間在視覺設計上。 而在線框稿中，我們也可以同時設計不同的版型，例如手機版和桌機版，這樣可以讓我們更清楚的了解網頁在不同裝置上的呈現。

在這些討論過程中，不同的結構組合會被提出，我們可以從中找出最適合的結構，並且在討論過程中，我們也可以了解到網頁的功能和內容，這些都是我們在設計網頁時需要考慮的因素。

最佳實踐

理想上，我們對每一個結構應該都有一個最佳實踐的方法（就是 CSS 的配方）這些方法設計的目的是為了讓網頁更容易閱讀和維護，並且讓網頁更容易被搜尋引擎找到（正確的使用 tag） 除非是創意類網站設計，不然其實我們並不需要重新發明輪子，我們可以參考別人的做法，並且將它們套用在我們的網頁上即可。

結構的重要性

在前端各種技術層出不窮的今天，網頁結構已經被設計在後面，我們幾乎不會察覺他的存在，包括一些 No-code/Low-code 平台，或者我們熟悉的設計師最愛的 Figma（auto layout ） 背後的實作其實就是網頁結構。

不會破的畫面

很多人在初期無法掌握 CSS，很容易出現畫面破版的情況，這時候我們可以先將網頁的結構設計好，並且確保它不會破版，這樣我們就可以專注於 CSS 的設計，而不用擔心網頁的結構會被破壞。

忽略他的存在

一個好的網頁結構設計，你可以完全忽略他的存在，你只需要專注於網頁的內容和功能，而不用擔心網頁的結構會被破壞，這也是很多人喜歡使用 一些 CSS 框架的原因，因為事實上這些框架背後的設計都是網頁結構。

下一章節來看看常見的網頁結構有哪一些。