网页正文的工作流程

The workflow for producing correctly formatted body copy for the web can be broken down to three major steps:

为Web生成格式正确的正文副本的工作流程可分为三个主要步骤：

在文字处理器中编写您的正文 (Write your body copy in a word processor)

• The majority of HTML editors – including Notepad, TextEdit andDreamWeaver – do not understand the subtlties of typography, while word processors, such as Microsoft Word and OpenOffice, do. They will correctly encode the majority of our body text, including correct apostrophes and hyphens.

  大多数HTML编辑器(包括Notepad ， TextEdit和DreamWeaver)不了解字体的精妙之处，而文字处理程序(例如Microsoft Word和OpenOffice )可以理解。 它们将正确编码我们大部分的正文，包括正确的撇号和连字符。

• Word processors also give the advantage of checking your work inline – that is, “on the fly”, as you type, for grammar and spelling errors.
  文字处理器还具有内联检查您的工作的优势–即在您键入时“即时”检查语法和拼写错误。

• Word processors formats are understood by clients. Most have an option to “track changes”, allowing you to tell when a client alters or adds body copy in the document. This is a lot easier than communicating changes via phone or eMail.

  客户端可以理解文字处理器格式。 大多数都具有“跟踪更改”的选项，可让您知道客户何时在文档中更改或添加正文。 这比通过电话或电子邮件传达更改要容易得多。

If you are working for yourself, developing body copy and markup at the same time is feasible (and allows you to skip the next step) but it should still be done in a typography-aware tool that has inline spellcheck. My current personal preference is Macdown.

如果您是为自己工作，则可以同时开发正文复制和标记(并且可以跳过下一步)是可行的，但仍应在具有内嵌拼写检查功能的字体识别工具中完成。 我当前的个人偏好是Macdown 。

通过复制和粘贴将该正文复制到HTML文档中 (Transfer this body copy into your HTML document via copy-and-paste)

Apply appropriate markup manually, or generate tags using an online utlity like Word to Clean HTML or DreamWeaver’s built-in Word text conversion tools.

手动应用适当的标记，或使用在线实用程序(如Word来生成标签) 来清理HTML或DreamWeaver的内置Word文本转换工具。

Inevitably you will have to edit and further clean up the resulting code. There are several tags that produce semantic and typographical changes:

不可避免地，您将不得不编辑并进一步清理生成的代码。 有几个标签会产生语义和印刷上的变化：

• The inline element <q> is used for short quotations, and will produce the correct opening and closing “smart” quotes.

  内联元素<q>用于短引号，并将产生正确的开始和结束“智能”引号。

• <blockquote>, a block tag, wraps around a larger quotation from a source. (For this reason, text inside the <blockquote> is often divided up into several paragraphs). <blockquote> indents the enclosed text by default, but remember it is the meaning that counts, not its default appearance. <blockquote> does not automatically produce quote marks, although it can be made to do so via CSS.

  <blockquote> (一个块标记)环绕着来自源的较大引用。 (因此， <blockquote>内的文本通常分为几段)。 <blockquote>默认使包含的文本缩进，但请记住，这才是最重要的含义，而不是其默认外观。 <blockquote>不会自动产生引号，尽管可以通过CSS产生引号。

• <hr> introduces a horizontal rule, a visual break between text elements.

  <hr>引入了水平尺，即文本元素之间的视觉中断。

• <cite> is for an inline citation of a book, film, article or other work. In terms of presentation, it italicizes content by default.

  <cite>用于在线引用书籍，电影，文章或其他作品。 在表示方面，默认情况下它以斜体显示。

在适当的地方将HTML实体添加到正文中。 (Add HTML Entities into the body copy where appropriate.)

For the most part the previous steps will take care of most basic typography issues. There are, however, a few characters that can be tricky to generate in a word processor if you don’t know how: for example, the correct characters for feet and inches (they’re not single and double quotes: use the HTML entities ″ and ′ instead; note that HTML entities are case-sensitive), the character for degree (as in “It’s 39°C outside.”: °), how to do a correct common fraction.

在大多数情况下，前面的步骤将解决大多数基本的排版问题。 但是，如果您不知道某些字符，可能很难在文字处理器中生成这些字符：例如，正确的英尺和英寸字符(它们不是单引号和双引号：使用HTML实体) ″和′相反，请注意HTML实体区分大小写)，度数的字符(如“外面39°C。”： ° )，如何进行正确的公共分数运算 。

资源资源 (Resources)

A few really useful resources on web typography:

有关网络排版的一些非常有用的资源：

• A very good article on Typographic Etiquette from Smashing Magazine

  Smashing Magazine上有关印刷礼节的一篇非常好的文章

• The book Explorations in Typography by Carolina de Bartolo and Erik Spiekermann, which was a strong influence on the design revision of this site in January 2012.

  卡罗来纳州·德·巴托洛和埃里克·斯皮克曼写的《版式探索 》一书对2012年1月对该网站的设计修订产生了重大影响。

翻译自: https://thenewcode.com/206/Workflow-for-web-page-body-text