网页设计与制作第4章 文本和样式

文本的应用
1. 文本的输入
所见即所得 将光标定位到要 输入文字的空白区 域 输入文字 换行回车
文本的应用
2. 编辑区域的设置
可编辑区域，即文字 或图片与网页的边距。 在网页任意位置，单 击鼠标右键 打开“页面属性”对 话框
文本的应用
3. 字符格式化
字符格式化主要是设置字体，字体大小， 文字的粗细、倾斜及文字的颜色等。 字符格式的设置主要是使用“文本”菜单 中的各种命令或者使用“属性面板”中的 各种快捷方式
文本的应用——段落格式化
(3) 选择不同的标题进行设置，其效果如图所示。
文本的应用——段落格式化

段落对齐有四种方式
左以齐 居中对齐 右对齐 两端对齐
CSS样式
CSS是 Cascading Style Sheet 的缩写，译 为“层叠样式表单” 作用：设置网页中文字的样式 与字符格式化区别

相同格式的文字设置 大量相同格式的文字样式的设置特别有效
CSS样式
样式分为三种，即类样式，标签样式， 高级样式 类样式 标签样式 高级样式 样式的两种保存方式:

在网页内部 在外部文件中(.css)
CSS样式

CSS样式的基本操作
自动创建样式 使用“CSS样式面板”创建样式

CSS样式的应用
建立新网页
1. 建立新网页的方 法
在Dreamweaver的 开始画面 执行“文件” →“新建”菜单 命令
建立 新网页
2. 保存网页
新网页的在 没有保存前的 默认名称是： Untitled-n 执行“文 件”→”保存 “菜单命令
建立新网页
3. 设置网页标题
网页的工具栏 上”标题”选项 输入标题
实训指导4
Step3:输入文字。 (1) 打开Dreamweaver,执行”文件” →”新建 “菜单命令，弹出“新建文档”窗口。 (2) 在“新建文档”窗口中选择“基本页”中的 “HTML”，再单击【创建】按钮,创建一个新网 页。 (3) 在网页中输入“静夜诗”的内容，并执行 “文件”→“保存”菜单命令。
CSS样式

CSS样式的应用 创建样式 样式的设置 应用到网页中的 文字
总结
新建网页的两种方式 文本格式化的内容:字体，字体大小，颜 色，粗体，倾斜 段落格式化的内容:左对齐，居中对齐， 右对齐,两端对齐 CSS样式的种类:类样式，标签样式，高 级样式

实训指导4
【实训项目1】某诗词鉴赏网站要制作一些古诗欣赏页 面，供广大读者欣赏，要求如下：页面内容可以是五言 绝句，七言绝句，宋词，元曲等。页面格式要求如下： (1) 每首诗、词、曲用一张网页显示，内容全部居中显 示。 (2) 要有标题，标题使用宋体，36号字,粗体，黑色。 (3) 内容使用楷书，使用28号字,蓝色。 (4) 因为要内容格式统一，要求使用CSS样式进行上述 格式的设置。
文本的应用——字符格式化
(1) 编辑字体
“编辑字体列表” 对话框中编辑网页 可用字体
文本的应用——字符格式化
(2) 设置字符格式
字体 字体大小 颜色 粗体 斜体
文本的应用——段落格式化
1.设置段落与标题 选中文字，可以将此文字设置为段落或标题，将一段独 立的台词设置为段落或标题，可以让整个网页显的有层 次感，网页标题分为6级。其操作步骤如下： (1) 在网页中选中相应的文字。 (2) 在“属性面板”中选择“格式”下拉列表，如图所 示。
实训指导4
操作步骤参考如下： Step1:建立站点SX9 (1) 启动Dreamweaver，执行“站点”→“新建站点”菜 单命令。 (2) 在打开的“未命名站点1的站点定义为“对话框中输 入站点名称sx9。 (3) 选择合适的位置放置站点文件。 Step2:建立网页，设置其属性 (1) 在Dreamweaver中执行“文件”→“新建”，打开 “新建文档”对话框。 (2) 选择“基本页”中的“HTML”部分，创建HTML网 页。 (3) 设置网页的标题。
实训指导4
Step4: 建立样式，并应用到网页中。 (1) 执行“窗口”→“CSS样式”，打开“CSS样式面 板”，设置标题的样式，样式名称为JinTitle。 (2) 在“CSS样式面板”上单击鼠标右键，在弹出的快捷 菜单中选择“新建”菜单命令，建立样式,并命名为 JinContent。 (3) 在编辑区域选中“静夜诗”，并在“属性面板”中选 择样式JinTitle。 (4) 在编辑区域选中其它文字 ，并在“属性面板”中选择 样式JinContent。
上一章回顾

Dreamweaver工作环境 站点创建与管理 制作一个简单的网页
制作网页标题 设置导航栏 设置网页内容 图像和文字的链接 设置页面属性 保存网页 浏览网页 设置首页及应用站点地图
本章目标
建立 新网页 文本的应用

文本的输入 文本的格式化 段落格式化
综合练习4
2. 填空题 (1) 为网页设置可编辑区域时，在”页面属性“对话框 中设置_______、_______、_______、________。 (2)对字符格式化时，可以设置字符的字体、颜色、字体 大小、________、_________。 3. 简答题 (1) 简述使用CSS样式的过程？ (2) 简述CSS的种类？
综合练习4
综合练习4 1. 选择题 (1) 在网页的设计中，对其中的文字进行格式化设置时，下列哪些不是对文字 格式化（ ）。 A. 粗体 B. 倾斜 C. 大小 D. 左对齐 (2) 在网页的设计中，设置段落格式时，可以将段落设置为（ ）。 A. 左对齐 B. 居中对齐 C. 两端对齐 D. 倾斜 (3) 新建网页时，在“新建文档”对话框中选择”基本页”中的（ ）来创建一 个HTML网页。 A. HTML模板 B. HTML C. CSS D. XSLT片段
实训指导4
Step5:浏览网页，查看效果。 (1) 保存网页，并按下快捷键F12，浏览网页内容，其效 果如图所示。
实训指导4
【实训项ห้องสมุดไป่ตู้2】设计一张网页，内容为个人简介 信息，要求对其中的文字进行格式化，使用宋体 12号字,加粗，颜色为蓝色,要写三段文字，分别 使用居中，左对齐，右对齐的方式显示。 【实训项目3】设计两张网页，内容为个人简介 信息和班级简介，要求对其中的文字进行格式化， 使用楷体14号字,斜体，颜色为蓝色,但要求使用 CSS样式。