1.1 个人简历——网页文本排版
通过“个人简历”网页的内容制作，我们可以了解到最简单的网页文本的排版技术，本节涉及行、段落、列表等一些专业网页文本技术。
1.1.1 文本行
所谓“文本行”是指多个文本字符组成的一行字符串。文本行在网页设计中有两种表现形式：一种是因受文本所在区域的宽度规定的限制，当文本即要超出该范围时，文本将自动折行至下一行，这种情况称之为“自动换行”；另一种就是当前文本尚未完成本行所占空间，即被强制换行至下一行，这种情况称为“强制换行”。
01 如图1-1所示，在Dreamweaver中新建或打开一个网页文档。
图1-1 文本自动换行的页面输入
02 在文档窗口中单击鼠标，使得光标在文档中闪动，表示将在该处插入文本。
03 文本的输入是很自然顺畅的，保持这样的节奏文本将会在规定的网页范围之内自动换行。
自动换行在网页设计时是随当前Dreamweaver的文档窗口大小而适应换行范围，在网页浏览时则是随当前浏览器窗口的大小而适应换行范围。如图1-2所示为文本自动换行在网页浏览器中的显示情况，和图1-1比较就很容易看出自动换行的表现。
图1-2 文本自动换行在网页浏览器中的显示情况
当在网页中要使用“强制换行”时，可使用【Ctrl】+【Enter】组合键输入一个强制换行符。如图1-3所示，在文档中使用了两次强制换行。
注：直接按【Enter】键时将是段落换行，此时应注意其与强制换行的区别。
图1-3 在页面中进行强制换行
1.1.2 文本段落
段落和行的概念是包含的关系，段落可以由一行或多行组成。一个段落内的多行可以是自动换行也可以是强制换行。而段落与段落之间也有换行，我们称之为“段落换行”。在Dreamweaver网页设计中，直接按下【Enter】键即可实现段落换行，如图1-4所示。
图1-4 在页面中进行段落间换行
可以发现，为了阅读时对内容的区别，段落间换行通常要比段落内换行的行距要大。这同时也就是【Enter】段落换行与【Ctrl】+【Enter】软换行最明显的视觉表现。
当然，还可以切换文档窗口至【代码】视图，从HTML代码上看出它们之间的最根本区别。段落内的强制换行，在【代码】视图下查看是显示为“<br />”的标签；而段落间的换行，则是使用一组“<p>…</p>”标签表示一个完整的段落。这也就是段落内换行和段落间换行最本质的区别。
1.1.3 项目列表
如图1-5所示，在【插入】面板中单击【文本】选项卡，单击【ul项目列表】按钮，即在文档窗口中显示为黑色实心圆，此时直接输入文本内容即为“项目列表”的一个“列表项”。
若需要完成当前“列表项”，换行输入另一个“列表项”，则按【Enter】键一次即可。若需要完成当前“项目列表”的所有“列表项”的输入，另起输入其他内容，则按【Enter】键两次即可“跳出”当前“项目列表”。
图1-5 插入项目列表
对于已输入到文档中的“列表项目”，可以进行列表样式的修改。例如，将列表项前的“实心圆形”替换使用“正方形”来表示：
01 如图1-6所示，鼠标光标定位在当前“项目列表”的任一“列表项”内，打开【属性】面板。
02 单击【列表项目】按钮，弹出【列表属性】对话框。
03 在【列表类型】下拉列表框中选择 “项目列表”选项，在【样式】下拉列表框中选择“正方形”选项。
04 单击【确定】按钮完成对当前“文本样式”列表项的样式修改。
注：“列表”的形式除了【ul】项目列表外，还有【ol】编号列表、【dl】自定列表。按照本小节的示例，我们可以自行在Dreamweaver中尝试使用这些列表的功能及其属性设置。
图1-6 列表项目属性
1.1.4 个人简历示例
通过个人简历的示例，我们可以掌握文本在网页中的多种应用。在创建个人简历的网页页面时，为了表达出简历描述的层次分类，通常需要对文字进行规范化定义，这些对文字的定义就是网页文本的格式化了。
首先简历分两部分内容：一是描述简历所需相关的各类标题，一是简历相关的具体内容。针对这两部分就可以通过对文本的格式化表示出不同的视觉效果，也让简历阅读者对简历的阅读一目了然，达到简历所表达之目的。
01 如图1-7所示，在“个人简历”的网页文档窗口中首先输入简历的大标题“某某某的个人简历”。
图1-7 输入文本并进行格式化
02 在输入完简历大标题之后，按【Enter】键进行段落的换行。
03 继续输入个人信息相关内容，这些信息包括“姓名”、“生日”、“电话”、“手机”、“邮件”、“主页”等相关信息。因这些信息同属于“个人信息”，所以这些信息属于同一段落。同时又为了表达信息之间的区别以及在阅读上的可读性，必须将这些信息进行段落内的强制换行。所以，每输入完一个单项的个人信息之后，按【Ctrl】+【Enter】组合键进行强制换行。
04 对于简历大标题“某某某的个人简历”实时进行文字的格式化。选择简历大标题的所有文本，同时打开【属性】面板，在【格式】下拉列表框中选择“标题1”选项即可。
注：“标题1”在【代码】视图下表现为“<h1>…</h1>”的一组标签，相应的，“标题2”则表现为“<h2>…</h2>”的一组标签，而<h1>到<h6>代表了6层标题，分别是最重要的<h1>到最不重要的<h6>。一般而言，在一张网页中只有一个“标题 1”，同时这也是当前网页文本所描述内容的总纲。这些对于网页的主题的主次说明以及网页的规范化处理都是很重要的。
01 如图1-8所示，在个人简历中表示“个人信息”的段落之后按下【Enter】键进行段落换行。
图1-8 输入文本并进行格式化
02 另起的一行中输入“个人能力说明”文本，表示有别于“个人信息”的又一个人简历信息标题描述。
03 选择“个人能力说明”文本，在其【属性】面板的【格式】下拉列表框中选择“标题2”选项。
注：选择“标题2”既是有区别于简历的大标题“某某某的个人简历”，同时也是对当前“个人能力说明”的标题所属地位的肯定。因为除了简历大标题，当前的“个人能力说明”就是第二重点的简历标题说明了。
01 如图1-9所示，在“个人能力说明”的文本之后继续按【Enter】键换行输入新的内容。
图1-9 插入项目列表
02 打开【属性】面板，同时单击其上的【项目列表】按钮
，在新换行的这一行上出现了实心的圆，并且相对窗口边缘对齐的文本向右进行了缩进。
03 在缩进了的实心圆后直接输入描述“个人能力说明”的文本“网页设计能力”。
01 如图1-10所示，在“个人能力说明”的第一项“网页设计能力”的文本之后继续按【Enter】键进行换行。
图1-10 “嵌套”的项目列表
02 此时将会出现第二行的缩进了的实心圆，但此时需要对“个人能力说明”的第一项进行进一步的详细分类说明，所以此时按【Tab】键，将出现再次缩进了的空心圆。
03 在再次缩进了的空心圆之后输入“网页设计能力”的具体条目，输入一条“网页设计能力说明”之后，按【Enter】键一次继续输入另一条“网页设计能力说明”。
04 按【Enter】键两次将完成对“网页设计能力”的细则输入。
05 继续输入“个人能力说明”的第二项内容“网页程序能力”，同时重复01→04的步骤完成能力的细则输入。
注：当在“项目列表”的列表项中选择按【Tab】键将会嵌套一个“项目列表”在该列表项中，多次按击将会多次嵌套。退出当前的“文本列表”，只需多按【Enter】键一次即可。同时，项目列表的定义除了在【插入】面板的【文本】标签下的【项目列表】按钮，在文本的【属性】面板中也可以进行定义。
01 如图1-11所示，通过按击多次的【Enter】键，可使鼠标光标脱离 “个人能力说明”所在的列表项。另起了一行，输入文本“个人工作经历”。
02 选择文本“个人工作经历”，在【属性】面板的【格式】下拉列表框中选择“标题 2”选项。
03 【Enter】键回车换行输入具体的“个人工作经历”项目，单击【项目列表】按钮
，输入“工作经历”的第一项目。
04 回车换行继续输入“工作经历”的第二项目，若退出“工作经历”列表项，则再按【Enter】键即可。
05 在完成“个人简历”的文字信息录入之后，按【Ctrl】+【S】组合键可保存当前网页。同时按【F12】键还可以在浏览器中查看所制作网页的浏览效果。
图1-11 完善个人简历并在浏览器中预览
而如图1-12所示，即是对网页进行了相关修饰了之后的页面效果。这些修饰包括定义字体大小、颜色，增加图片做点缀等，这些修饰通常是通过CSS来定义的。
图1-12 经过CSS样式定义后的个人简历页面
而关于CSS是一个什么样的技术，本书在后面部分将会有详细说明。鉴于CSS在网页中的运用是无处不在，这也就提醒我们，CSS作为网页的修饰和定义是一门重要技术，这将会贯穿整个网页以及本书的所有章节。
注：或许，有些读者现在还不能理解图1-11到图1-12只需要定义一个CSS样式就能完成的方法，但相信在阅读完本书之后，一定要回到这里仔细阅读一番。很显然，所有的网页初始状态均是如图1-11所示的样式效果，这里只有网页的结构和内容；而图1-12的表现则是仅仅定义了CSS就完成了网页的布局，这正是CSS的强大之处，也是“内容与表现想分离”的最理想表现。
始终提醒我们大家，尤其是敬告刚进入网页制作神奇之旅的读者，在制作网页时，大体上是分3个步骤的：（1）设计网页样本并进行网页的结构定义；（2）定义网页结构的内部填充内容，比如输入文本、插入图像、加入音视频等；（3）对网页的结构进行CSS布局以及网页中的文本图像等元素进行CSS定义。当然，这3个步骤是可以同步混合进行，但读者必须明白网页的结构内容和网页的布局表现已经分离了。