网页创作/调整网页以适应可视化浏览器
超文本标记语言 (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 中链接的页面。
将块级元素隔开的空行——行宽——失去控制——实践：字体系列——实践：斜体、粗体、字体大小——实践：行宽——实践：行高。
使用颜色进行简单品牌化——危险：色盲——危险：浏览器设置——解决方案：永远不要只使用颜色——解决方案：始终定义所有颜色——实践：将颜色应用于文本和链接——实践：将颜色应用于背景——实践：应用彩色边框。
打印样式表。
有关答案，请参阅 问题和练习的答案。