|
第五章：格式化文本
5.1 格式化文本基本方法
要格式化文本，先从最基本的HTML格式标签开始。可用菜单命令,如 Text
> Format（文本>格式）、 Text > Style（文本>样式）等。使用文本属性面板则更加方便快捷，如图1所示。
图1 文本属性面板
现在就详细讲解一下各种文本属性标签的作用。
1 段落标签和标题标签：选中要格式成段落的文本，然后选择Format下拉菜单中的选一项就完成定义 ，如以下是几种标题的使用样例：
标题样式Head1
标题样式Head2
标题样式Head3
标题样式Head4
2 改变字体大小：使用文本属性面板或者 Text （文本）菜单来改变文本的大小，如图2所示。
图2 用文本属性面板中的Size设置文字大小
3 改变文字颜色：点 后鼠标变成吸管，我们可从调色板上选取颜色，也可将吸管移向所能见到的任何地方以选取颜色，这里所提供的颜色对网页来说都是安全色。如图3所示。
图3 文本属性面板中的字体颜色设置可改变文字色彩
点击调色盘按钮 可以打开系统颜色窗口；点击擦除工具 可以清除当前的颜色。
4 设置字体集合：在菜单Text > Font （文本>字体）中或者字体属性巡查员中有一个字体集合的设置如图4所示。
图4 文本属性面板中的字体集合设置
5 将字体加粗变斜：用鼠标高亮需改变的文字，点 文字加粗，点 字体变斜。
6 文字的对齐：将光标移向需改变对齐方式的行，点 左对齐、点 居中、点 右对齐。
5.2 建立列
产生新的列的方式可以按如下方式操作：
1 将光标定位在需要增加列的地方。
2 点击属性面板上的 按钮，则产生的是有序列，点 则产生无序列。当然，也可以从菜单选择Text
> List 并在接下来的选项中选择其中一类，或者进行自定义。
3 输入列后，用回车就可以自动产生开始新的一列。
4 全部输入完了，就按回车两次，以后的文本就不再属于列了。
下面是从已经存在的文本中产生列的方法：
1 选中要制作成列的一段文本。
2 还是要在属性面板中将列操作按钮找到，选择列的排版方式或。
产生嵌套的列的方法：
1 在第一级列建立好以后，选好第二级要嵌套的列的文本。
2 直接点击属性面板上的缩进按钮 就可以了。菜单里也有直接操作的命令：Text
> Indent（文本>缩进）。
下面这个两层列的例子，大家可试试：
5.3 层叠样式表
5.3.1 认识层叠样式表
层叠样式表，我们也简称为CSS样式表。因为没有一个主要的浏览器开发者完全支持它们的规范，所以不很完善。
一个样式表是一组格式的属性集合。CSS样式表比HTML样式表的优越性在于通过将所有样式都置于同一个地方，或放置于一个独立的样式表中，我们可以让整个站点使用相同的字体格式，所以对文本进行格式化时也要快很多。
CSS样式表是通过名字或者HTML标签来标识的，允许你改变属性或者字体样式，改变后在对应的文本中可以马上看到所做的改变。 CSS样式表可以控制大多数传统的文字属性例如：font、size、alignment，还可以指定类似定位、特殊效果和鼠标热区的独特的HTML属性。
5.3.2 建立自己的CSS样式表
在Dreamweaver中可以很方便的做出功能强大的样式表，我们找到Dreamweaver的样式表编辑图标 ，会弹出一个样式面板，如图5所示。
图5 样式表面板
如果当前页面中没有使用任何样式表，面板中现有样式就会为空。点击右下角的小 出现样式编辑窗口，如图6所示。
图6 定义新样式表的类型
图6中提供了三种可选择的样式：“Make Custom Style(class)”(自定义样式)；“Redefine
HTML Tag”(重新定义HTML标记符)；“Use CSS Select”(使用CSS选择器)。假如选自定义样式，点OK出现设置框，如图7所示。
图7 样式表属性设置框
以下是对其中一些属性做一下介绍：
Category(种类)：
- Type（字体类型）：设置文本的字体(Font)，大小(Size)，粗体(Weight)，倾斜(Style)，小型大写字体（Variant），文本行高(Line
Height)，场合(Case)，颜色(Color)，下划线、闪烁等修饰(Decoration)。
- Background（背景）：文本背影颜色(Background)，文本的背景图象(Background Image)，滚动条等附加装置(Attachment)，水平线(Honizontal)，垂直线(Vertical)。
- Block（块设置）：字距(Word Spacing)，字母间隔(Letter Spacing)，水平对齐方式(Vertical
Alignment)，文本对齐方式(Text Align)，文本缩进(Text Indent)，空白区域(Whitespace)。
- Box（盒子）：填充方式(Padding)，页边空白设置(Margin)。
- Border（边界）：宽(Width)、颜色(Color)，边界样式(Style)。
- List（列）：列类型(Type)，如前9.2介绍建立列一节；图标方式(Bullet)；位置(Position)。
- Positioning（位置）：位置类型(Type)如相对、绝对等；可见度(Visibility)；Z轴位置(Z-Index)；溢出设置(Overfolw)；布置(Placement)；夹子(Clip)。
- Extensions（扩展）：分页符(Page Break)，视觉效果(Visual Effect)。
在以上选项中做好设置后，页面的源文件的头部会出现一个以你定义的名字命名的样式表，你可以在页面需要的地方引用它，方法是将段落高亮，再从样式表面板中选择一个已定义好的样式名就完成了。样式表除了可格式化文本外还有其它用途，下面我们来看一个使用自定义样式表改变光标的例子。
在浏览器中，当光标移动到页面的某一个超级链接上的时候就会变成一个手的形状，提示这是一个超级链接。我们能否改变这个手形状？可以，下面就来实现。
先在页面做一个连接，可以是图形链也可以是文字链。然后按下样式表的启动按钮，打开CSS控制面版，选择右下角的新建按扭建立新的样式表，在弹出的对话框中选择Type中的Make
Custom Style class，按OK。
接着打开样式编辑窗口，在Category项中选择Extensions，选中Extensions后，右半边窗口就相应地变为Extensions调整选项。有一个Visual
Effect选项，选择下面的Cursor，在后面的下拉选单中选择一个，选中一个后按OK，如图8所示。
图8自定义提示超级连接的光标
好了，我们来预览效果，按F12打开浏览器，再用鼠标指向链结，手状光标变成了你要的形状。
5.4 CSS风格与Html标记的转换
CSS样式表只能被Netscape Navigator 4.0以上版本和Microsoft Internet
Explorer 3.0以上的版本支持。那些要求制作的网页能在3.0版本的开发者和一些希望自己的站点在任何版本的浏览器中正常显示的网页制作者，就只有将CSS样式表转换成Html标记。
Dreamweaver提供了自动转换的功能，以下是操作步骤：
1.选择下拉菜单中的：File > Convert > 3.0 Browser Compatible（文件>转换>与3.0版本浏览器兼容）选项。
2.在出现的对话框中，选择“CSS Styles to HTML Markup（CSS样式表转换到HTML标记）”一项。其它还有两个选择，其中一个是“Layers
to Tables（层转换到标记）” ，这一项会将所有的层用一个按原页面布局划分的表格来代替。
3.确定转换后点击OK按纽即可。Dreamweaver 将会为转换后的文件开启一个新的编辑页面。
|
