网页设计与制作 工业和信息化普通高等教育“十二五”规划教材立项项目 作者 雷伟军 第4章 制作文本.pptVIP

第4章 制作文本 4.1创建文档 4.1.1 新建文档 启动Dreamweaver CS5后将出现的起始页，在基本页中单击“html”就能创建一个html网页文档。 选择主菜单中的“文件→新建”命令，此时系统就会弹出新建文档对话框。 在外观中还可以对新建文档的页面属性进行设置。 也可以在起始页中利用模板创建网页。建立模板面板如图4-1所示： 4.1.2 保存文档 选择主菜单的“文档→保存”命令，就会打开“保存为”对话框。 文档建立并保存后，选择“文件→在浏览器中预览，在IE浏览器中预览命令可以预览新建的网页。 保存网页文档有以下2种方法： 1.在Dreamweaver CS5主窗口中，单击标准工具栏中（菜单）“文件”→“保存”或“全部保存”菜单命令，保存文档。 2.按“Ctrl+S”组合键保存文档。 4.2 文本编辑 4.2.1 输入文本 1.在编辑文本框中直接输入文本， 2.对输入的文本进行剪切、复制、粘贴等基本操 作。 4.2.2 设置文本格式 可以直接从HTML语言入手，也可以通过Dreamweaver功能来实现，我们先介绍基于HTML语言的设置方法。 1.通过HTML语言设置 HTML语言对文本格式的设置主要是通过HTML的H1,…,H6元素来实现的。 2.通过Dreamweaver来设置 可以通过Dreamweaver的属性面板来设置格式，如图4-2所示。 4.2.3 设置文本样式 1.通过HTML语言设置 HTML语言对文本样式的设置主要是通过HTML的font元素来实现的。 基本表达方式如下： font如何表达文字/font ①face属性，文字的字型属性face是用来设定文字的字体——（属性值有“宋体”，“黑体”，“楷体”，“仿宋”，……等等）。 基本格式：font face=属性值 ②size属性，文字的大小属性size是用来设定文字的字号——（属性值是从1到7或是从+1到+7，或是从-1到-7）。 基本格式：font size=属性值 ③color属性，文字的颜色属性color是用来设定文字的色彩——（属性值不仅可以是英文的颜色单词，而且也可以是十六进制代码）。 基本格式：font color=属性值 2.通过Dreamweaver设置 通过Dreamweaver可以很容易的设置字体的样式。可以选中文本后点击右键，在出现的菜单中选择“样式”进行设置。如图4-3所示；也可以通过属性面板来设置，如图4-4所示。 3.CSS设置文本样式， 层叠样式表(CSS)是一系列格式设置规则，它们被用来控制Web页面内容的外观。在使用CSS设置页面格式时，内容和表现形式是相互分离的。使用CSS设置规则可以非常灵活地控制页面的外观，更好地控制从精确的布局定位到特定的字体和样式等。 CSS规则定义了两个属性：font和font-family，这两个属性就是为了设置字体类型 。 在Dreamweaver中可以通过工具来定义文本样式，如在“CSS样式”面板中，单击位于面板右下角的“新建CSS规则”。效果如图4-5所示： 在“定义在”弹出式菜单中，选择cafe_townsend.css样式，该文件默认也应该是选中的。效果如图4-6所示： 单击“确定”后就会出现“CSS规则定义”对话框，这代表你正在cafe_townsend.css文件中创建一个名字为bold的类样式。此时就可以看到，Dreamweaver已经将bold类样式添加到在外部样式表中定义的规则列表中了。 4.附加样式表 当你想要将样式表附加到Web页面中时，则在样式表中定义的规则都会应用到页面上的相应元素。 4.2.4 段落编辑 段落是一段文本的布局，网页段落的编辑可以通过HTML语言来实现，也可以通过Dreamweaver来编辑。 1.用P标记定义段落 P的主要属性有以下几种： align－用来设定能对齐方式（属性值有居中 center,左对齐left,右对齐right) class/id－用来设定应用类/id br/是用来定义换行。 hr/用来定义一条水平线。 hr/的主要属性： width－用来设定宽度 size－用来设定高度 color－用来设定颜色 2.通过Dreamweaver来设置段落 使用Dreamweaver可以设置段落的对齐方式等段落格式，如图4-7所示。 4.2.5 为文本添加其他页面元素 1.内容注释 2.插入图像 3.网页背景 4.插入水平线 4.3