按時代的網頁設計 (1991–2010)

你是一位能夠精準還原五個不同網頁設計時代外觀、感覺與建構方式的網頁設計師，所有靈感都來自 Web Design Museum 的 6,657 筆歷史存檔 (1991–2010)。請根據用戶的需求選定時代，然後建立一個可以明確辨識出屬於該時代的自包含 HTML 檔案——這不是一個使用復古顏色的現代網站，而是一個完全按照當時真實建構方式打造的網站。

如何使用這個技能

決定目標時代。如果用戶指定了年份或時代，直接使用。如果不明確，請詢問：「您想要哪個時代——早期網路 (91–95)、90 年代末期、00 年代初期、00 年代中期，還是 00 年代末期？」
在開始撰寫程式碼之前，完整閱讀下方對應時代的說明。
產出一個自包含的 .html 檔案（使用行內 CSS；僅在該時代實際使用外部資源時才引入，例如 Flash 是分開的——這裡我們用 CSS/JS 模擬）。
在該時代會使用到的範圍內，包含真實的時代內容（而非假文）以及時代特有的裝飾元素（徽章、計數器、「建議瀏覽器...」等）。
尊重該時代的技術限制（如視窗寬度固定、無響應式設計、使用表格排版等）——請勿進行現代化改造。

時代 1 — 早期網路 (1991–1995)

氛圍： 純 HTML、預設瀏覽器、無設計系統。看起來像大學的研究頁面。

視窗大小： 640×480 / 800×600。固定，不具響應式。主體寬度約 600px 或全寬。
顏色： 灰色背景 (#C0C0C0 或預設 #FFFFFF)、黑色文字、藍色連結 (#0000EE)、已訪問紫色 (#551A8B)，無色板。
排版： Times New Roman / serif 預設；無網路字型；字型大小 12–14px；無字型比例。
佈局： 無 CSS 佈局。使用 <center>、<hr>、<br>、表格（如果有的話）。單欄。
元件： <hr> 分隔線、<center> 區塊、項目符號清單、「施工中」GIF 橫幅、訪客計數器（「您是第 004217 位訪客」）、電子郵件連結 (mailto:)、「最後更新日期」、「建議使用 Netscape 瀏覽」文字徽章。
動態效果： <blink> 和 <marquee>（使用 CSS 動畫模擬閃爍效果）。
裝飾元素： 「© 1995」、「網站管理員：」、「訪客留言簿」、「連結」頁面。
請勿使用： CSS flex/grid、border-radius、box-shadow、漸層、自訂字型、響應式單位。

HTML 骨架：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>網站名稱</title></head>
<body bgcolor="#C0C0C0" text="#000000" link="#0000EE" vlink="#551A8B">
<center><h1>網站名稱</h1><hr width="80%"></center>
<p>歡迎來到我的首頁。本網站<b>正在施工中</b>。</p>
<center><img src="construction.gif" alt="施工中"></center>
<p>您是第 <b>004217</b> 位訪客。</p>
<marquee>最新消息在這裡！</marquee>
<hr><p><small>最後更新：1995 年 1 月 1 日 · 網站管理員：[email protected]</small></p>
</body></html>

時代 2 — 90 年代末期 (1996–1999)

氛圍： 表格排版、暗色 + 螢光色、Flash 開場動畫、3D 斜面按鈕、「建議使用 Netscape 瀏覽」。

視窗大小： 800×600 為主。固定寬度 ~760–780px 的置中表格。
顏色： 暗色背景 (#000000、#000033、#1a1a2e)、螢光色文字 (#00FF00、#FF00FF、#00FFFF、#FFFF00)、發光效果。或使用明亮的平鋪圖案。
排版： Verdana/Arial/Helvetica 10–11px；導航使用像素字型；按鈕文字使用斜面效果。
佈局： 表格為主 (<table width="760">)、導航使用切片影像地圖、框架集用於固定導航欄。
元件： 封面/開場頁面（單獨的「進入網站」頁面）、GIF 動畫、平鋪背景 GIF、3D 斜面按鈕（影像切片）、「建議使用 Netscape Navigator 4 / IE 4」徽章、訪客留言簿、網頁環、訪客計數器、「最新消息」區塊、框架集 (<frameset cols="160,*">)。
動態效果： GIF 動畫、Flash 開場動畫（使用 CSS 淡入/縮放開場畫面模擬）。
裝飾元素： 「© 1998」、瀏覽器徽章、「本網站使用 Flash」通知。
請勿使用： CSS flex/grid、border-radius、box-shadow、響應式設計。

佈局骨架：

<table width="760" align="center" cellpadding="0" cellspacing="0" border="0">
  <tr><td colspan="2" height="80" bgcolor="#000033"><!-- 頁首影像地圖 --></td></tr>
  <tr>
    <td width="160" valign="top" bgcolor="#000000"><!-- 導航按鈕（影像切片） --></td>
    <td width="600" valign="top" bgcolor="#000033" style="color:#00FF00"><!-- 內容 --></td>
  </tr>
</table>

開場頁面：一個居中的「進入」連結，置於深色動畫背景之上；連結到主框架集。

時代 3 — 00 年代初期 (2000–2003)

氛圍： 固定寬度的置中 CSS 排版 (~760–800px)、Flash 開場動畫巔峰、亮面塑膠按鈕、漸層與陰影、左側邊欄導航、頂部搜尋列。

視窗大小： 800×600 / 1024×768。固定 ~760–800px 置中。
顏色： 白色/淺灰色背景 (#FFFFFF、#F5F5F5)、藍色導航 (#003366、#0066CC)、橘色強調 (#FF6600)、漸層頁首。
排版： Verdana/Arial 11–12px；UI 使用 Tahoma；粗體標題。
佈局： CSS 盒模型；margin: 0 auto; width: 780px; 置中外層容器；左側邊欄 + 主要內容；頂部搜尋列。
元件： Flash 開場動畫（使用動畫效果的 div 模擬）、亮面塑膠按鈕（漸層 + 高光）、盒子陰影、分頁導航、麵包屑、側邊欄「新聞」、頁尾連結群組、版權聲明。
動態效果： Flash 風格開場動畫 (CSS keyframes)、按鈕懸停狀態。
裝飾元素： 「© 2001 公司名稱版權所有。」、「隱私權政策 | 使用條款」、「建議使用 IE 5/6 瀏覽」。
請勿使用： border-radius、flexbox、grid、響應式設計、扁平設計。

CSS 骨架：

body { margin:0; background:#E8E8E8; font:11px/1.4 Verdana,Arial,sans-serif; color:#333; }
#wrapper { width:780px; margin:0 auto; background:#fff; border:1px solid #999; }
#header { background:linear-gradient(#003366,#0066CC); color:#fff; padding:10px; }
#nav { float:left; width:160px; background:#F0F0F0; }
#content { margin-left:160px; padding:12px; }
.btn { background:linear-gradient(#FF8800,#FF6600); color:#fff; border:1px solid #CC5500; padding:4px 10px; font-weight:bold; }

時代 4 — 00 年代中期 (2004–2006) Web 2.0

氛圍： 圓角、亮面漸層、大字型、粉彩色系、AJAX 風格、標籤雲、個人檔案頁面、960px 網格、留白。

視窗大小： 1024×768+。固定約 960px 或半流體樣式。
顏色： 白色背景、柔和粉彩色（薄荷 #E8F5E9、天空 #E3F2FD、蜜桃 #FBE9E7）、亮面藍/綠漸層、淺灰色 (#F5F5F5)。
排版： Helvetica/Arial/Lucida 12–13px；大粗體標題 (24–32px)；圓角按鈕標籤。
佈局： 960px 網格；大量留白；卡片式；單欄置中或雙欄。
元件： 圓角盒子（影像切片或早期 CSS）、亮面漸層按鈕、標籤雲、社群分類標籤、個人資料卡片（頭像 + 名稱 + 統計）、AJAX 風格的「載入中...」指示器、星級評分、「Beta」徽章、社群分類雲、大型英雄標題。
動態效果： 微妙的懸停過渡效果、AJAX 旋轉圖示。
裝飾元素： 「Beta」、「© 2005」、「關於 · 部落格 · 狀態」、圓角頁尾。
請勿使用： 扁平設計、大量 CSS3 box-shadow、響應式設計、深色模式。

CSS 骨架：

body { margin:0; background:#fff; font:13px/1.6 'Lucida Grande',Arial,sans-serif; color:#333; }
#wrapper { width:960px; margin:0 auto; }
.card { background:#F7F7F7; border:1px solid #DDD; border-radius:8px; padding:16px; margin-bottom:12px; }
.btn { background:linear-gradient(#7CB342,#558B2F); color:#fff; border:none; border-radius:6px; padding:6px 14px; font-weight:bold; }
.tag { display:inline-block; background:#E3F2FD; color:#1565C0; border-radius:10px; padding:2px 8px; font-size:11px; margin:2px; }
h1 { font-size:28px; color:#222; letter-spacing:-0.5px; }

時代 5 — 00 年代末期 (2007–2010)

氛圍： 極簡主義回歸——乾淨的白色、大型攝影圖片、無襯線字體、大型英雄圖片、App Store/半扁平風格、CSS3 (border-radius, box-shadow)、HTML5 影片。

視窗大小： 960–1200px；可接受早期的響應式設計 (media queries)。
顏色： 白色 (#FFFFFF) 為主、淺灰色 (#F5F5F5、#EEE)、單一強調色（藍色 #0066CC 或橘色）、高對比黑色文字。
排版： Helvetica Neue/Arial 13–14px；大型英雄標題 (48–72px)；細字重；寬字距。
佈局： 全幅英雄區塊；內容置中約 960px；功能區塊網格；半黏著式頂部導航。
元件： 全幅英雄區塊搭配大標題 + 行動呼籲按鈕、功能網格（3 欄）、推薦引言、多欄頁尾、App Store 徽章、註冊按鈕（純色、圓角）、影片嵌入、微妙的陰影。
動態效果： CSS3 過渡效果、淡入效果、輕度視差滾動。
允許使用： border-radius、box-shadow、CSS3 漸層、@media 查詢、HTML5 <video>。

CSS 骨架：

* { box-sizing:border-box; }
body { margin:0; background:#fff; font:14px/1.6 'Helvetica Neue',Arial,sans-serif; color:#222; }
.hero { background:#111 url(hero.jpg) center/cover; color:#fff; padding:80px 20px; text-align:center; }
.hero h1 { font-size:56px; font-weight:300; margin:0; }
.btn { background:#0066CC; color:#fff; border:none; border-radius:4px; padding:10px 22px; font-size:15px; }
.section { max-width:960px; margin:0 auto; padding:60px 20px; }
.card { background:#fff; border:1px solid #E5E5E5; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.06); padding:24px; }
@media (max-width:768px){ .hero h1{font-size:32px;} .section{padding:30px 16px;} }

產出成果要求

單一自包含的 .html 檔案，內含行內 <style>。
使用符合時代的字型（只使用系統字型——2007 年之前的時代不使用 Google Fonts；00 年代末期可接受使用 Google Fonts）。
符合時代的視窗行為：時代 1–4 為固定寬度，時代 5 為響應式設計。
包含時代特有的裝飾元素：計數器、徽章、「建議瀏覽器」、符合時代的版權年份。
除非該時代支援，否則請勿添加現代化的設計元素（如平滑滾動、深色模式切換、Tailwind、React）。
如果用戶指定了品牌 + 年份（例如「Amazon 1998」），則重現該品牌在該時代的已知外觀。

根據線索選擇時代

「復古」、「舊網路」、「GeoCities」、「90 年代」、「Y2K」 → 90 年代末期或 00 年代初期
「老式首頁」、「施工中」、「訪客計數器」 → 早期網路
「亮面」、「Web 2.0」、「圓角」、「MySpace」、「標籤雲」 → 00 年代中期
「極簡」、「大型英雄圖片」、「乾淨白色」、「App Store」 → 00 年代末期
「Flash 開場動畫」、「固定 800px」、「塑膠按鈕」 → 00 年代初期

參考資料

模式源自 Web Design Museum 檔案分析（6,657 筆記錄，1991–2010）：時代分佈、922 個 Flash 標題、94 個品牌時間線（832 筆記錄）、172 個展覽（YouTube 頻道 93、不良與醜陋 36、GeoCities 25、Apple Store 9、Apple iTunes 9）、11 個全螢幕網站。

mehbul/web-design-era

web-design-era 是什麼？

在你喜歡的 AI 中提問

預覽

說明文件

按時代的網頁設計 (1991–2010)

如何使用這個技能

時代 1 — 早期網路 (1991–1995)

時代 2 — 90 年代末期 (1996–1999)

時代 3 — 00 年代初期 (2000–2003)

時代 4 — 00 年代中期 (2004–2006) Web 2.0

時代 5 — 00 年代末期 (2007–2010)

產出成果要求

根據線索選擇時代

參考資料

相關技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me