【Dreamweave CS4案例教程】第3章 编辑基本网页元素.ppt

第3章　编辑基本网页元素 文本输入与编辑 上机实践——设置“舞林报道”网页文本 使用图像 上机实践——在“拍拍”网页中插入图像 3.1 文本输入与编辑 在Dreamweaver中可以通过设置文本的字体、字号、颜色、字符间距与行距等属性来区别不同的文本。 网页中文本的使用原则如下： 现场解答1：如何输入文本 首先将光标定位在表格的某个单元格中，然后输入文本就可以了。 如果希望文本换行，可以按下【Shift＋Enter】组合键；如果希望文本换段，可以直接按【Enter】键。 现场解答2：如何设置文本的段落和字符格式 在Dreamweaver中，可以利用属性面板为文本设置默认格式化样式或者直接设置所选文本的字体、大小、颜色等。 1．设置字体列表 Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需求。我们可以通过设置字体列表来解决这一问题。 2．设置文本字体及大小 学会设置字体列表后，就可以随心所欲地设置文本的字体了。 3．设置段落缩进 通过设置段落缩进格式，可以更好的布局文档。 4．设置列表项 列表分为项目列表和编号列表，项目列表常应用在“列举”类型的文本中，编号列表常应用在“条款”类型的文本中，这种方式使得文本更直观、明了。 现场解答3：如何输入特殊符号和不换行空格 要插入特殊符号，可选择“插入”“HTML”“特殊字符”命令，然后在弹出的菜单中选择相应的特殊字符。 现场解答4：如何输入日期与水平线 在“插入”栏的“常用”类别中单击“日期”按钮 ，将打开“插入日期”对话框。 3.2 上机实践—设置“舞林报道”网页文本 本节我们以“舞林报道”网页为例，来练习网页文本的设置（具体操作见视频３-１ ）。 3.3 使用图像 目前在网页中只能使用JPEG、GIF和PNG格式的图像。 现场解答1：如何插入与编辑图像 在确定图像插入点后，单击“插入”面板“常用”类别中的“图像”按钮，打开“选择图像源文件”对话框。从中选择要插入的图像，然后单击“确定”按钮即可。 选中插入后的图像，可以利用属性面板对该图像的各项属性进行设置。 现场解答2：如何使用图像占位符 如果网页中的某个图像尚未制作好，可暂时用图像占位符来代替。待到制作好图像后，再用它置换图像占位符。 选择“插入”“图像对象”“图像占位符”菜单，可打开“图像占位符”对话框。 案例1 制作鼠标经过图像 当鼠标移动到某一图像上时，图像变成了另一幅图像，当鼠标移开时，又恢复成原来的图像，这就是我们通常所说的鼠标经过图像。 案例2 制作导航条 利用与制作鼠标经过图像类似的方法，可制作具有可变效果的导航条。下面来制作下图所示的可变导航条（具体操作见视频3-2）。 案例3 插入Fireworks HTML文件 Fireworks是网页制作三剑客之一，它主要用来处理网页图像，可以将优化后的图像和HTML文件导出并保存至站点的图像文件夹中，然后就可以在Dreamweaver中插入该文件。 3.4 上机实践——在“拍拍”网页中插入图像 　本节以制作“拍拍”网页为例，来练习网页文本的属性设置和图像的插入(具体操作见视频3-3)。 * * 单个页面中不要使用超过三种以上的字体。 不要用太大的字号。 不要使用不停闪烁的文字。 标题文字的字号应当比正文字号稍大。 输入文本后的设计视图 输入文本后的代码视图 “编辑字体列表”对话框 选中文本 设置字体和倾斜 设置字号 在“格式”下拉列表中选择“段落” 段落突出 段落缩进 选中文本 应用“项目列表”格式 要插入水平线，可以选择“插入”“HTML”“水平线”菜单。在插入水平线后，还可通过属性面板设置其宽、高、对齐和阴影等。 JPEG格式适于表现色彩丰富，具有连续色调的图像。该格式的优点是图像质量高，缺点是文件尺寸稍大（相对于GIF格式），且不能包含透明区。 GIF格式最多只能包含256种颜色，适合表现色调不连续或具有大面积单一颜色的图像。该格式的优点是图像尺寸小，可包含透明区，且可制成包含多幅画面的简单动画，缺点是图像质量稍差。 PNG格式集JPEG和GIF格式的优点于一身，既能处理照片式的精美图像，又能包含透明区域，且可以包含图层等信息，是Fireworks的默认图像格式。 设置图像名称 设置宽和高 设置图像文件路径 用于创建从图像到其他文件的链接 指定图像上、下、左、右空白的像素值 确定图像在单元格或页面中的对齐方式 图像处理按钮 裁切图像 确定图像边框的粗细 “图像占位符”对话框 插入的“图像占位符” 替换图像 原始图像 鼠标经过图像 “插入鼠标经过图像”对话框 “插入Fireworks HTML”对话框 * * * * *