這篇為2022年重新撰寫的內容，教你在網站架設前，準備好四件事情，算是網站架設前的起手式。跟之前另一篇文章的版本內容，有60%以上的差異，因此，我強烈建議觀看這一篇，還有這部影片。也許在螢幕前的你，您剛接下公司網站製作的專案窗口，或是你正打算自己製作一個"個人網站"，不管你基於哪個理由，你就是網站建置的那個專案負責人。那麼，網站建置前，你應該先準備四件事情，才能讓你的網站架設更為順利。那麼是哪四件事情呢？分別為：畫好網站架構圖、準備網站內容素材、以及把這些素材進行處理過、最後就是擬定好網頁名稱、關鍵字與meta description的資訊內容。有關「網站架構圖」、「網頁的佈局設計」怎麼進行？由於要花比較多篇幅來說明，因此我把它抽出來，另外製作一集。【進一步閱讀/觀看：網站規劃篇─架設網站前的第一式：畫好網站架構圖】。

一、網站架構圖 (骨頭)：整個網站畫出架構、各主題網頁畫出佈局(Layout) 

二、網站內容素材的資料包 (血肉)：包含了圖文、表格和影片與鏈結等，依架構圖分門別類歸檔 

三、圖文素材處理：資料夾、文字檔案、和圖片命名要有規則性，圖片也要壓縮過 

四、網頁名稱、關鍵字、meta描述欄資訊、圖片的替代文字的準備

一、 畫好網站架構圖 (骨幹)： 

好了，我們先進入第一個部份，網站架構圖。由於網站有分一頁式網站，或是多頁式網站。一頁式網頁需要準備這個頁面的layout(佈局)，把你這一個頁面想要放哪些區塊，從上到下組合起來，如果你是用Strikingly或Weebly架站平台，這樣會讓你更有邏輯地去找到相關板塊模組。 

而多頁式網站也需要畫出整個站的架構，有點像組織圖這樣，接近像sitemap網站地圖的概念，多頁式網站的第一層網頁，大多會列在功能列(導航)上，像是關於我們、聯絡我們、產品與服務這些，都是最基本需要的。功能列(導航)下，通常會配置一個Banner作為這一頁的主題視覺，Banner下方就是內容面，會有幾個板塊的組合。畫好網站架構圖，就像是蓋房子一樣，先把鋼筋結構先建起來，而建鋼筋結構前就是要先畫好藍圖，根據藍圖來蓋房子。 

二、網站內容素材的資料包 (血肉)： 

第二個部分，網站內容素材的資料包。如果說架構圖是骨幹的藍圖，那麼圖片、文字、與影片和鍊結等，就是準備要堆疊的紅磚、填充在牆面與地面的水泥。以人體來說，我們的骨骼就像網站架構，而我們的頭部、胸部、下半身等，就相當於板塊位置，血與肉就是填充在這個骨骼裡的元素。 

素材根據網站架構(Landscape)來進行資料整理 

而我們的這些素材，我們要根據畫好的網站架構(Landscape)，來準備相關資料。比方，我的網站架構是這樣，功能列(導航)也就是Function Bar的地方有Product、Solution、Support、News、Event、About和Contact，對應到我電腦裡的資料夾，加上首頁，要有這些項目的資料夾，舉例來說，我們看到News這個項目有下拉式選單，選單中有三個項目，分別為Press Release、Application Story以及White Paper，那麼，在News的資料夾中，也要有這三個項目，此外，由於網站上的新聞稿內容是一篇一篇的，根據時間來發布，因此點進Press Release的資料夾，會有每個發布日期的新聞稿文檔與圖片素材。 

素材也根據網頁佈局(Layout)來進行資料整理 

一個網頁裡該有的內容，也對應網頁佈局(Layout)，把文字與圖片整理到資料夾中。這裡以網站首頁為例，先看到我的網站首頁的Layout是這樣：會有Banner、ProductShowcase、Application、BrandStory、Spotlight、以及Footer的資訊。你的網站首頁的資料夾中，就根據你的網頁layout，分門別類地去放置相關素材，你可以看到我的資料夾就是比照網站首頁的結構，並且加上編號，顯示網頁從上到下的各板塊主題，點進資料夾，你可以看到我按照「文字」和「圖片」兩種資料夾存放模式。 

以上是網站建置前的第二步，網站內容素材資料包的整理方式。 

三、圖文素材處理： 

1. 文字的準備 

上述的素材準備好後，接著你要對素材進行處理，這裡分文字和圖片進一步說明。文字的部分，你寫好在Word檔中的內容，你先把標題和特點的部分，用粗體或大size字體標示，到時候你貼到網站後台時，才會知道哪些是要用標題1、標題2，在網路世界中就是H1與H2等，有好的設定，對你的網站SEO會有加分效果。 

2. 圖片的壓縮處理 

其次，有的圖片檔案很大，比方有些圖片原始檔解析度很高，檔案大小可能高達8Mb，這對網站的瀏覽速度有影響，觀眾開個網頁可能會開很久，不利於閱讀。所以圖片最好有壓縮過，保持在一個檔案1Mb以內。不知道圖片怎麼壓縮嗎？你可以使用這個線上免費圖片壓縮的平台：https://free.com.tw/squoosh/，我把這個連結也放在影片下方的說明欄。另外，有些圖片也要調整尺寸，以符合網站圖片的建議尺寸，才不會圖像變形。 

四、網頁名稱、關鍵字、meta描述欄資訊、圖片的替代文字的準備 

這部分主要針對多頁式網站，你要把每一個page的網頁標題、關鍵字、Meta Description網頁說明文字、以及圖片的替代文字內容準備好。有準備這部份，就可以加快你網站建置的速度，也有利於網站SEO排名往前。這裡要特別說明的是，如果你有上傳圖片，記得要在描述欄位，填寫這張圖片的替代文字(alt)，這不管你是多頁式還是一頁式網站，都最好要寫。 

以上就是製做網站前你必須作的四件事情，我們總結一下，這四件事情包含：第一，用ppt或其他工具，畫好你的網站架構圖與網頁Layout；第二，準備網站內容素材，根據架構圖與Layout來存放資料夾的圖片與文檔；第三，圖片要壓縮大小與尺寸調整，文字標題先以粗體顯示；第四，準備好各個網頁名稱、關鍵字與meta描述欄和圖片替代文字的資訊內容。我們這集影片到這邊結束，感謝您今天的收看，我們下次見，掰。  

----------------------------------------------------------------------- 

Strikingly網站架設平台：https://www.strikingly.com/a/pRKcCS 

線上免費圖片壓縮的平台：https://free.com.tw/squoosh/​