早期的網頁幾乎都是手工打造，設計師和開發者得一行一行寫HTML、CSS和JavaScript，才能把網頁做出來。這種做法彈性很大，但對沒有程式背景的人來說門檻相當高。後來網際網路越來越普及，做網站的需求跟著變多，第一代網頁設計工具如Microsoft FrontPage和Macromedia Dreamweaver（後來被Adobe收購）陸續出現。製作網頁的過程因此變得直觀許多，也容易上手得多。
Microsoft FrontPage
Microsoft FrontPage是微軟在1996年推出的網頁設計工具，它讓網頁的製作方式有了明顯的轉變。FrontPage最大的特點是所見即所得（WYSIWYG, What You See Is What You Get）編輯器：設計師在編輯時就能直接看到網頁最後的樣子，不必先把程式碼寫完再切去預覽。
直觀的設計界面
FrontPage提供圖形化的使用者介面，用拖放的方式就能加入、排列文字、圖片、表格和超連結等網頁元素。這種操作方式讓沒寫過程式的人也能很快上手，做出基本的網頁。
模板和主題
FrontPage內建多種網頁模板和主題，使用者挑一個接近需求的版型再修改，可以省下不少設計的時間和力氣。整個網站套用同一組模板和主題，也比較容易維持一致的風格，看起來更專業。
即時預覽功能
在設計過程中，FrontPage可以即時預覽網頁效果，使用者能隨時檢查、隨時調整，確認成品符合預期。改了馬上看得到結果，做起來自然更有效率，也比較不容易出錯。
Macromedia Dreamweaver
Macromedia Dreamweaver和FrontPage一樣是所見即所得的網頁設計工具，不過功能更完整，彈性也更大。它在1997年首次推出，很快就成為許多專業網頁設計師和開發者愛用的工具之一。
強大的編輯功能
Dreamweaver除了所見即所得編輯器，也有完整的程式碼編輯功能。使用者可以在圖形化介面和程式碼編輯器之間自由切換，需要細部控制或自訂功能的專業設計師用起來相當順手。Dreamweaver也支援HTML、CSS、JavaScript、PHP等多種程式語言，一套軟體就能處理不同類型的網頁工作。
內建的程式碼提示和自動完成
Dreamweaver內建程式碼提示和自動完成，寫程式碼的速度變快，打錯的機會也少了。這對新手特別有幫助，邊寫邊看提示，學習和掌握程式設計的速度會快上不少。
即時同步和預覽
在Dreamweaver裡，使用者可以一邊設計一邊同步預覽網頁效果，隨時檢查、調整，讓成品更接近預期。它也支援多種裝置的預覽，這一點對今天的響應式設計來說相當重要。
整合的FTP功能
Dreamweaver內建FTP（File Transfer Protocol）功能，使用者在軟體裡就能直接上傳和管理網站檔案，網站的部署和日常維護都因此省事許多。
第一代網頁工具的影響
FrontPage和Dreamweaver這些第一代網頁設計工具，對網頁設計這一行的影響很深。它們降低了做網頁的門檻，讓更多人有機會動手參與；它們也提升了設計的效率和品質，讓網頁做得更專業、更一致。建立和維護網站變得簡單又快速，也連帶推動了網際網路的快速發展。
回顧第一代網頁工具的發展，可以看出好工具讓做網站變容易，但網站要好用，關鍵仍在規劃與實作的功力。今天企業架設官網，除了版面美觀，也要兼顧響應式設計、載入速度與後續維護，找一家熟悉前後端技術的高雄網頁設計公司協助規劃，會比較踏實。