通过Dreamweaver_CS3学习HTML+DIV+CSS_第4章__网页文字Font.ppt

第4章网页文字Font 前面几章介绍了网页头部和网页主体相关的知识点 这些都是辅助内容 主体正文才是浏览者真正关心的对象 主体文字的大小 颜色 以及字体等因素是决定网页是否成功的关键因素 除此之外 文字的排放位置也不可忽视 本章将介绍网页文字标签的使用与设置 4 1文字外观 文字的外观包括文字的大小 颜色 字体及样式等 在网页中文字大小的设置是否妥当 直接影响到网页的美观和浏览者的阅读 4 1 1调整文字大小 前面了解了文字大小的重要性 现在介绍如何进行文字大小的设置 具体步骤如下 默认文字大小效果 文本 选项卡 4 1 1调整文字大小 选中所有的文字 然后单击 字体标签编辑器 按钮 弹出 标签编辑器 对话框 如图所示 标签编辑器 对话框 4 1 1调整文字大小 size属性值可以设置 6 6中间的数值 数值越大则文字越大 例如把size 3 改为size 6 其效果如图所示 修改文字大小效果 4 1 2修改文字颜色 前一章中介绍了用于整个网页文字默认颜色的设置方法 现在介绍在Dreamweaver中单独设置文字的颜色 具体步骤如下 文字颜色效果不同颜色效果 4 1 3设置文字字体 文字字体设置适当 不仅有利于浏览者进行阅读 而且还可以起到装饰美观的作用 设置文字字体的具体步骤如下 设置字体效果不同字体效果 4 1 3设置文字字体 在设置字体时 字体列表中的字体样式是有限的 用户可以根据需要添加字体 具体步骤如下 编辑字体列表 对话框 4 1 4格式化文字 格式化文字是把文字以一定的样式输出 如加粗 倾斜等 本小节将介绍如何格式化文字 具体步骤如下 未格式化文字文字加粗效果 格式化文字效果 4 2文字排放 网页中文字的排放形式多种多样 有的文字在页面中呈段落形式 有的呈列表形式 有的向左对齐 有的居中对齐 本节将介绍如何排放文字 从而使网页整体效果整齐有序 4 2 1设置段落文字 段落文字是区分文字之间的段落 它可以使网页内容的脉络更清晰 段落文字的具体设置步骤如下 新建基本页 在 设计 视图中输入一段文字 选中输入的文字 单击 段落 按钮 完成段落文字的设置 4 2 2设置已编排格式 在DreamweaverCS3的默认设置中 不允许输入多个空格 也不允许中途换行 除非遇到换行标签 如果需要设置成预先排好的格式 则使用已编排格式 具体步骤如下 已编排格式效果 4 2 3使用块引用格式 在网页设计时 有些内容是引用他人的 此时需要使用排放成块引用格式 具体步骤如下 新建基本页 设置为已编排格式 输入一段文字 并将其选中 单击 块引用 按钮 完成块引用格式的设置 效果如图所示 块引用格式的效果 4 2 4设置标题文字 任何形式的文章 总需要一个标题来点明文章的主旨 由此可见标题的重要性 标题文字设置的具体步骤如下 标题1效果标题设置效果 4 2 4设置标题文字 设置标题文字非常容易 但它的源码又会有怎样的变化 最终效果如图所示 全部标题文字效果 4 2 5设置文字对齐 网页内容的排放有时要求整齐统一 有时要求活泼大方 有时要求错落有致 从而可以看出对齐方式的设置对网页的重要性 如何进行文字对齐方式的设置 具体步骤如下 未设置对齐方式效果设置对齐方式效果 4 2 6使用项目列表 当页面中含有多个并列的内容时 可以使用项目列表 从而使页面中的内容显得整齐有序 设置项目列表的具体步骤如下 项目列表效果 4 2 7使用编号列表 项目列表可以使页面内容整齐有序 却不能显示出列表项之间的顺序 在此使用编号列表可以解决这一问题 设置编号列表的具体步骤如下 编号列表效果 4 2 7使用编号列表 除了单击 文本 选项卡区域中的 编号列表 按钮 还可以单击 属性 面板中的 编号列表 按钮 用户也可以先输入文字 后设置编号列表 设置编号列表属性效果嵌套效果 4 2 8定义列表 在网页中除了可以设置项目编号 还可以设置包含术语解释时使用的定义列表 设置定义列表的具体步骤如下 定义列表效果 4 3字符实体 HTML语言的标签中包含了等的一些特殊字符 如果要在网页中显示出这些特殊字符 就需要用到字符实体 4 3 1认识字符实体 单击 设计 按钮 切换到 设计 视图 效果如左图 从图中可以看出 没有任何显示 这是因为HTML把字符串当成了一个标签 如果要显示出输入的字符 需要使用字符实体进行转换 把用来代替 效果如右图所示 无字符实体效果字符实体效果 4 3 2换行字符 前面介绍了段落标签 但在使用了标签的两个段落之间会有一个空行 如果只想换行但不空行的话 具体步骤如下 换行效果 4 4专家总结 通过本章的学习 读者可以掌