網頁創作/調整網頁以適應視覺化瀏覽器
超文字標記語言 (HTML) 允許您為文字新增結構和超連結。這反過來允許網路瀏覽器以對使用者有用的方式顯示該文字。您使用的標記與文字的顯示幾乎沒有關係：這使得能夠在各種裝置上顯示超文字。
網路瀏覽器必須在您提供的標記和顯示屬性之間進行轉換。例如，標題可以在圖形瀏覽器中以粗體、大字型顯示，並在語音瀏覽器中大聲朗讀等等。
通常，網路瀏覽器的製造商會做出明智的選擇。作為訓練有素的讀者，我們知道在一大塊正常大小的文字之上，一行粗體大字型文字很可能是它的標題。因此，當瀏覽器呈現這樣的標題時，我們往往會將其識別為標題，甚至不會思考。列表項前面有列表項標記，例如數字或“專案符號”，強調文字以粗體或斜體列印等等。
圖形網路瀏覽器的製造商甚至考慮到從螢幕上閱讀很困難：段落用空行分隔，文字通常（預設情況下）使用相對較大的字型大小列印，並且超連結以不同的顏色和下劃線或周圍的線（後者是影像的情況下）清楚地標記。
然而，當前的網路瀏覽器有兩件事做錯了。一是它們以相同的方式顯示每一個網頁；二是它們通常無法以美觀的方式呈現網頁。
當然可以說，瀏覽器製造商不能對這些問題負責。
為什麼網路瀏覽器的製造商不能因為渲染所有網頁都一樣而受到指責？為什麼他們不能因為以美觀的方式顯示網頁而受到指責？如果你喜歡，你也可以反駁。
訪問者可能瞭解網頁質量的幾個線索之一是由一個稱為網站的概念提供的。網站是一個屬於同一個整體的網頁集合。因為它們屬於同一個整體，所以它們為訪問者提供了一個有力的暗示，即在一個網站頁面上承諾的資訊，可能會在該網站的另一個頁面上找到。類似地，如果訪問者接受網頁作者的聲音為權威，那麼該作者的其他網頁可能會為進一步訪問提供一個有趣的目標。
作者可以明確表示網頁是同一個整體網站的一部分的幾種方法。其中一種方法已經討論過：透過使用合理的title文字，作者可以表明頁面屬於同一個整體。此頁面的標題“調整網頁以適應視覺化瀏覽器 - 華夏公益教科書”，有助於強調這一點。華夏公益教科書網站上的所有頁面都有以“- 華夏公益教科書”結尾的標題。如果你想閱讀其他教科書，資訊很清楚：你應該在這個網站上。
另一種建議網頁之間關係，即建議網站的方法是策略性地使用統一資源定位符 (URL)，即網頁的地址，它通常顯示在網路瀏覽器的位址列中。您可以為類似網頁使用類似地址。
第三種建議網頁之間關係的方法可能是最有用的：您可以使用統一的視覺樣式來向訪問者表明他們身處哪個網站。
最初，HTML 是圖形顯示標記和結構標記的大雜燴。這聽起來可能比實際情況更糟：只有少數元素保留用於視覺呈現，例如B用於粗體文字，I用於斜體文字。此外，PRE 允許作者使用“純文字格式”顯示文字（如前所述），BR 強制圖形瀏覽器在新行開始顯示後續文字，IMG 允許您在文字中的某個位置顯示影像。
這一切實際上並沒有那麼糟糕。它並沒有導致可訪問性的大幅下降，而是允許圖形客戶端網頁的作者（自網路誕生以來或多或少預設的客戶端）“美化”他們的網頁，並使它們對訪問者更具吸引力。
然而，透過在原本與顯示無關的語言中允許僅顯示元素，蒂姆·伯納斯-李為瀏覽器製造商的濫用打開了大門。
建立美觀網頁的可能性使網路成為一個更吸引人的地方。就像 DTP 革命讓每個人都認為自己是圖形設計師（大多數情況下是錯誤的）一樣，圖形網路也為讓形式凌駕於內容打開了大門。
當網路在使用者中越來越受歡迎時，它自然也越來越受到企業的青睞。實際上，已經成立了專門生產網路瀏覽器的企業，這在之前幾乎聞所未聞。其中最成功的是 Netscape。
Netscape 很快意識到，漂亮網頁的即時吸引力與其他更可靠的吸引力一樣具有說服力，甚至更具說服力，例如成為自己出版商的承諾，或者能夠遍歷關聯的想法景觀。
然而，Netscape 只能控制瀏覽器，而無法控制網路本身或其底層的 HTML 語言。因此，Netscape 所做的是讓其網路瀏覽器 Navigator 識別擴充套件版的 HTML。例如，框架是 Netscape 的發明，JavaScript 和FONT元素也是如此。使用這種策略，Netscape Navigator 很快成為網路上使用最多的瀏覽器。有了它，網路（以及網路的網際網路）成為一個公共空間，而不是它之前的學術空間。
唯一完全錯過網際網路浪潮的軟體公司是微軟。在撰寫本文時，微軟仍然不理解網際網路：他們不將其視為運營的空間，而是將其視為需要擁有的東西。在開始時，他們甚至試圖用自己的“網際網路”MSN 替換它；這當然毫無意義，因為網際網路不是一個原子網路。它是一個網路的網路。MSN 應該是網際網路的一部分，這讓比爾·蓋茨和他的團隊感到非常沮喪。
與此同時，Netscape 看得更遠。對他們來說，網際網路是獲得對“桌面”控制的工具，這是 20 世紀 80 年代作業系統用來描述自己的隱喻。如果每個人都安裝了 Netscape Navigator，並且 Netscape Navigator 是這個通用的工具，可以用於從玩遊戲到文字處理的任何事情，那麼它下面執行的是哪個作業系統並不重要。
微軟最初對網際網路和網路的蔑視，突然使其存在的基本理由受到威脅。然後，它做出了一個戰略決策，將自己帶到了網際網路的中心：它將構建自己的瀏覽器。
微軟的瀏覽器叫做 Internet Explorer，它開啟了所謂的瀏覽器大戰。微軟開始模仿 Netscape 的做法。它首先支援了幾乎所有 Netscape 的 HTML 擴充套件，並添加了一些自己的擴充套件，並以一種使其工作效果略微更好的方式改變了一些元素的行為。
網路正面臨著碎片化的威脅：將網路劃分為如此小的部分，以至於處理網路，尤其是編寫網頁，將成為一項折磨，對於作者和衝浪者來說幾乎太難了。
作者突然不得不決定支援哪些瀏覽器，或者他們是否應該支援特定的瀏覽器。將網路視為純視覺媒體的可能性，將錯誤的思想植入了許多人的心中，即網頁應該在任何地方看起來都一樣。
就在這時，全球資訊網聯盟介入，並開始呼籲更嚴格的標準，以及文件結構和文件佈局的劃分。W3C 最聰明的舉動是讓瀏覽器製造商加入進來。微軟和 Netscape 都可以直接決定下一版 HTML 的外觀，因此它們成為利益相關者，對建立有用的網路語言感興趣。
W3C 引入了一種程式語言，用於向網路瀏覽器建議某些佈局，稱為 CSS。該縮寫代表層疊樣式表。樣式表有幾個優點。最重要的是，它們承諾了一種“編寫一次，到處檢視”的網頁創作方法。這對 W3C 有好處，因為這種方法正是 HTML 的初衷。對作者也有好處，因為他們現在不必學習每個網路瀏覽器的怪癖。
CSS 從一開始就具有其他優勢
- 它們可以儲存在單獨的檔案中，因此整個網站的樣式可以儲存在一個樣式表中；
- 它們允許連結（“級聯”）樣式表，以便網站的一部分可以擁有與其網站其餘部分不同的獨特樣式，同時仍然看起來是網站的一部分；並且
- 它們實現了 Netscape 和微軟還沒有實現的一些技巧，例如對文字樣式的更多控制。
可以說，在超文字語言中允許一些圖形顯示元素是一個明智之舉。它普及了網路，並隨之普及了網際網路。它讓大量作者接觸到了網路。然而，如今許多作者將網路視為一種視覺媒體，而不是它真正意義上的（超）文字媒體。使這些人擺脫他們的錯誤觀念可能是一項不可能的任務。
正如我們之前所看到的，網頁是網路的一部分，因為它們連結到其他頁面，或者因為其他頁面連結到它們。換句話說，網頁並不存在於真空中。例如，當您在郵箱中收到一個披薩外送服務的資料夾時，沒有任何上下文。您通常不會同時收到競爭對手服務的副本，或者顯示送貨服務位置的地圖，或者告訴你披薩歷史的百科全書。
網頁確實帶有這樣的上下文。例如，如果您訪問一個允許您訂購披薩的網頁，您可能之前訪問過一個允許您從多個披薩外送服務中選擇的頁面。此外，訂購頁面可能會連結到地圖，或者連結到關於披薩歷史的文章。即使它沒有這樣做，網路瀏覽器也可能會為您提供額外的功能。例如，如果您在 Firefox 網路瀏覽器中選擇了披薩的名稱，然後右鍵單擊，會出現一個選單項，允許您在後臺的新標籤頁中搜索 Google 中選定的文字。
儘管所有網頁都具有這樣的上下文，但只有您提供的那些處於您的控制之下。當您將多個相關的網頁分組在一起時，這樣的分組稱為網站。網頁可能出於多種原因形成一個網站；因為它們屬於同一個主題，因為它們託管在同一個伺服器上，因為它們位於同一個域上，或者因為它們是由同一個人或組織建立的。
例如，http://www.nasa.gov 上的網頁集合構成了美國國家航空航天局 NASA 的網站。它們可能不都由同一個伺服器提供服務，它們也不都是由同一個人建立的，但它們位於同一個域上，試圖成為 NASA 在網路上的代言人，並處理與 NASA 相關的主題。
當然，一個人或一個組織可能擁有多個網站；在這種情況下，所謂的網站並不真正重要。
網站通常以以下特徵為特點
- 主要的網站導航（“選單”，超連結在每個網頁上重複，並指向重要的部分），
- 跨網頁的一致視覺風格，包括徽標和圖示，
- 一致的頁面名稱，例如在標題元素中重複網站名稱，
- 網站在主題和子主題中的自然劃分。
所有這些線索告訴您，在從一個頁面到另一個頁面之後，您要麼在同一個網站上，要麼已經離開到另一個網站。大多數網頁作者至少部分地做對了這些線索，大多數網頁訪問者能夠知道他們身處哪個網站。
網頁的一個有趣的特點是，它包含的資訊是作者想要用該特定網頁表達的核心內容，但它也包含了訪客在特定網站上的資訊，他們在網站上的位置，他們可以去哪裡，等等。
大多數網頁將包含許多與該頁面主題相關的資訊，以及關於網站本身的一些資訊。例外被稱為主頁；主頁是關於它們所屬的網站的。
“主頁”是網站的主頁。它用作網站其餘部分的中心樞紐。當訪問未指定文件的網路地址時，例如 http://www.example.com/，將顯示此檔案。它通常命名為 index.html、index.htm、default.html 或 default.htm。
主頁具有一系列功能以及一系列它應該遵守的規則和啟發式方法。主頁的功能是
- 為網站提供導航幫助
- 提供有關網站主題的資訊
- 建立網站的品牌標識（例如網站頁面的外觀）
- 為訪問者提供重新定位自己的方法
- 為網頁作者提供最少的連結位置
- 位於易於記憶的位置
讓我們回顧一下這些。
當訪問者遵循資訊線索來到您的網頁時，該網頁可能會或可能不會滿足訪問者的資訊願望。在後一種情況下，訪問者要麼希望回溯，要麼繼續遵循線索。
正如我們所指出的，網頁是網站一部分的指示為訪問者提供了一個有力的暗示，即撰寫該網頁的聲音也撰寫了其他可能與主題類似的網頁。一個在當前網頁上沒有成功，或者已經成功，但現在已經改變目標的訪問者，可能希望進一步探索您的網站。
例如，如果您收集笑話，而訪問者認為您的第一個笑話很有趣，他們可能希望閱讀您更多的笑話。
網頁上指向相關網頁的連結非常有用；但有時這些連結缺失，或者它們以不利於您的訪問者的方式措辭，或者它們沒有明確表明它們指向同一網站的部分；而且網頁通常不會顯示作者對網站的意圖，網站的新鮮度等等。
主頁應該提供這種資訊，或者至少指向它。大型主頁也應該提供替代的導航方式。這可以透過以下方式完成
- 搜尋功能
- 主選單
- 目錄
- 突出顯示的網頁
連結到主頁的一種常見方式是使用徽標或網站名稱作為超連結，或者從麵包屑導航中連結到它。
為了找出您身處哪個網站，您需要訪問該網站上的至少兩個網頁：一個用於確定使用了特定風格，另一個用於驗證該風格。網站上的任何網頁都可以用於第二個功能，但主頁必須始終能夠以這種方式使用。
網站的主頁應該始終清楚地說明網站的用途，就像網頁應該始終清楚地說明該網頁的用途一樣。
在沒有其他指定位置讓訪問者檢視網站的頁面是否已新增或更新的情況下，主頁應該定期更新以表明網站仍然“活著”。常用的方法是顯示指向最近新聞項的連結，定期更改突出顯示的專案，或者定期對主頁的佈局進行簡單的更改。其他方法是在主頁中引入季節性元素。例如，您可以使用您的主頁來祝賀訪問者節日快樂。
其他指定允許您評估網站活躍度的頁面包括新聞頁面，例如維基百科的最近更改頁面。您可以使用這些頁面代替主頁進行情景反饋，只要訪問者明確知道需要檢視其他地方，例如您明確連結到新聞部分。
通常情況下，您希望讓世界瞭解特定的網頁，而不是您的網站。但是，在某些情況下，後者是可取的。對於這些情況，如果主頁易於查詢和訪問，將非常有用。實現這一點的一種方法是將主頁放在最短的 URL 中。如果您的網頁位於 http://www.example.com/~wily/friends.html、http://www.example.com/~wily/album.html 和 http://www.example.com/~wily/contact.html，那麼您的主頁應該位於 http://www.example.com/~wily/。（當遇到對目錄而不是檔案的請求時，Web 伺服器通常會開始尋找具有特定名稱的檔案，例如 index.html、index.php、welcome.html 等。此行為因 Web 伺服器而異，但 index.html 通常是為您的主頁提供的非常安全的檔名。）
此外，當您忘記連結到主頁，或當連結難以找到時，訪問者會使用一種稱為目錄遍歷攻擊的技巧。儘管它有令人毛骨悚然的名字，而且在英國是一種犯罪行為，但這仍然是一件完全道德和正當的事情。它透過猜測主頁地址中多餘的 URL 部分來實現。
例如，如果您位於 http://www.example.com/~wily/friends.html，從 Web 瀏覽器的位址列中刪除 "friends.html" 或 "~wily/friends.html"，可能會導致此網頁站點的首頁。
本質上，首頁提供了有關網站的情景知識。它應該向訪問者展示該網站是關於什麼的，其主要主題是什麼，如何到達那裡，該網站有多新鮮等等。
CSS（層疊樣式表）是一種用於“設定”標記（如 HTML）樣式的語言。CSS 是一個規則集，每個規則都有三個部分：選擇器、屬性和值。
a {
color: red;
font-style: italic;
}
在此示例中，“a” 是選擇器。它選擇文件中的所有錨點（“連結”）。每個影響錨點的規則都包含在跟隨選擇器的括號 ({}) 中。在這裡，兩個屬性是“color” 和“font-style”。“color” 用於設定文字的顏色，“font-style” 用於設定字型的種類。錨點將以紅色、斜體文字形式顯示。
有三種方法可以將 CSS 新增到網頁，但第三種方法被認為在大多數情況下是最好的。
1) 作為標籤屬性。屬性的名稱是“style”。
<a style="color: red; font-style: italic;">示例連結</a>
在大多數情況下，這被認為是最糟糕的新增樣式的方法。原因是它很難維護。如果您想更改網站上錨點的顏色，則必須在每個網頁中的每個“a”元素中找到並替換屬性，這可能發生數百次甚至數千次，具體取決於網站的大小。
2) 作為 style 元素。此元素放置在 head 標籤內。
<stlye>
a {
color: red;
font-style: italic;
}
</style>
在大多數情況下，這被認為是第二糟糕的新增樣式的方法。雖然維護起來沒有第一種方法那麼困難，但您仍然必須同步所有文件中的所有 style 元素，並且隨著您的網站發展，這會變得越來越笨拙。
3) 作為連結文件。文件以 .css 結尾（例如“styles.css”。在大多數情況下，這被認為是最好的方法，因為它是最容易維護的。要將您的網頁連結到您的樣式表，請在您的 head 標籤中新增以下內容
<link rel="stylesheet" href="styles.css" />
現在，如果您想更改錨點外觀的任何部分，您只需要編輯一個檔案，它將影響網站上所有包含該 head 中連結的頁面。
將塊級元素隔開的空行——行寬——失去控制——實踐：字體系列——實踐：斜體、粗體、字型大小——實踐：行寬——實踐：行高。
使用顏色進行簡單品牌化——危險：色盲——危險：瀏覽器設定——解決方案：永遠不要只使用顏色——解決方案：始終定義所有顏色——實踐：將顏色應用於文字和連結——實踐：將顏色應用於背景——實踐：應用彩色邊框。
列印樣式表。
有關答案，請參閱 問題和練習的答案。