第三章网页元素的添加.pptVIP

网页设计与制作 主讲：李玉娟 邮箱：267448939@ li8448@163.com 第三章：网页元素的添加 ---文字、图像和链接 本章主要介绍如何在网页中添加文字、图像并设置超级链接。重点介绍文本格式编排、CSS样式表的创建及其对版面的控制与美化，插入图像和建立超级链接，其中CSS样式表是本章的难点。 第三章：网页元素的添加 ---文字、图像和链接 插入文本 插入空格 文本格式编排 查找和替换 插入图像 设置超级链接 CSS样式表的应用 编辑文字 一个网页最离不开的是文字。文字是网页的灵魂，是构成网页的重要表达工具。 Dreamweaver的文本编辑方法与Word等程序相似，我们这里重点介绍的是Dreamweaver特有的文本编辑方法。 添加文本 直接输入方式 剪切、复制和粘贴方式 从其他文档中导入文本方式 注：在字符间添加空格 插入换行符和特殊字符 添加空格 Dreamweaver 8中的文档格式都是以HTML编码形式存在的，而HTML编码中只允许字符之间包含一个空格，所以在Dreamweaver 8中无论按多少次空格键都只会输入一个空格。  添加多个空格： 选择菜单“编辑|首选参数”，然后在“常规”类别中选中“允许多个连续的空格” 在“插入”栏中，选择“文本”子工具栏，然后单击“字符”按钮，在弹出的菜单中选择“不换行空格”命令； 按“ctrl+shift+space”组合键； 将输入法切换到全角状态，直接按space键。 插入水平线 水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。在文档中插入水平线的方法很简单，只要将插入点放在要插入水平线的位置，然后执行下列操作之一： l??选择菜单命令“插入 | HTML | 水平线” l? 在“插入”栏的“HTML”类别中单击 （水平线）按钮 若要修改水平线，选择水平线后可利用“属性”面板根据需要对该水平线的属性进行修改。 插入日期 将当前日期插入到文档中，可以按如下方法操作。 ① 在“文档”窗口中，将插入点放在要插入日期的位置。 ② 选择菜单命令“插入 | 日期”或者在“插入”栏的“常用”类别中，单击 （日期）按钮。 ③ 在出现的“插入日期”对话框中（如图所示），选择星期格式、日期格式和时间格式。 ④ 如果希望在每次保存文档时都更新插入的日期，请选择“储存时自动更新”。如果希望日期在插入后变成纯文本并永远不自动更新，则取消选择该项。 ⑤ 单击“确定”按钮。 段落格式的设置 段落是指具有统一格式的一段文本，而标题是用于强调段落主题的文本。段落格式的设置主要包括：设置标题格式、段落对齐方式以及设置段落缩进。 字符格式的设置 字符格式包括字体大小、字体类型（如宋体、楷体）、颜色及字符样式（如粗体、斜体、下划线）等。字符格式可以应用于所选文本、段落和文本块。 在网页中添加图像 图像可以为站点增色不少，使站点更具有吸引力。目前，图象格式有GIF、JPEG（包括JPG和JEPG）和PNG三种，而用得最广泛的是GIF和JPEG这两种格式。 GIF：最多只能显示256种颜色，适合于色彩要求较低的导航条、按钮、图标和项目符号等。 JEPG：压缩率很高，可显示数百万种颜色。适合于对色彩要求较高的风景画、照片等。 PNG：是一种替代 GIF 格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。PNG文件具有较大的灵活性并且文件较小，对于几乎任何类型的Web图形都是最适合的。 图像插入 选择[插入]?[图像]菜单命令。 单击插入栏的“常用”选项卡中的按钮。 按【Ctrl+Alt+I】键。 设置图像属性 在网页中插入图像后可通过属性面板对其属性进行修改等设置。 图像命名 为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。 图像大小 在Dreamweaver 8中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。 编辑图片 在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了Fireworks，那么Fireworks将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像。 源文件设置 在属性面板的“源