第2章节 Dreamweaver基础.ppt

第2章 Dreamweaver基础 第2章 Dreamweaver基础 2.1 站点管理 2.2 添加网页元素 2.3 表格布局 2.4 使用超链接 2.5 表单应用 2.6 框架布局网页 学习目标 介绍了Dreamweaver工具的基本使用方法，包括站点管理、网页元素编辑、表单应用、网站的框架结构设计和网页的布局等。通过本章学习，读者可以熟练地利用Dreamweaver工具开发网站。通过本章学习，读者可以达到以下目标： 掌握网站与网页的设计； 掌握网页的基本编辑； 了解网页的布局方式； 掌握框架的设计以及表格布局。 2.1 站点管理 网站即站点是由网页构成的，而网页是一个文件。因此，站点是一种文档的磁盘组织形式，由文档和文档所在的文件夹组成有机整体。 2.1.1 创建站点 创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页面间是如何互相连接起来的。 【例2-1】创建一个站点“MyWebSite”。 2.1.2 站点管理 2.2 添加网页元素 建立好网站后要做的工作就是如何来构建这个网站，使得我们能够有效地将自己的信息发布到网站，其他人也能够从我们建立的网站接收我们的信息。网站的基本构成元素是网页，因此，站点建立后的后期工作就是如何通过网页来组织我们的信息。 2.2.1创建网页 在Dreamweaver中。可以创建一个以上的站点，但是在同一时刻只能够打开一个站点，并且只能够对当前打开的站点内的文件进行编辑等操作。因此在创建网页之前要打开一个站点，当然也可以单独创建一个网页。 【例2-2】创建并编辑一个网页。 2.2.2 文本格式设置 1. 文本字体设置 在HTML网页中，字体的设置标记符号font，用于设置文本的字体、大小和颜色的设置，其语法格式如下： font face=?“字体列表” size=“数字” color=?“颜色”插入的文本内容/font face——表示一种字体或者一个字体列表 size——指定文本的大小 color——设置文本的颜色 【例2-3】对例2-2中网页的字体进行设置。 2.添加字体 在设置字体的过程中，如果刚开始使用Dreamweaver工具，我们可以看到其中默认的字体很少，中文字体只有宋体和新宋体，满足不了我们的要求，为此应该在工具中添加新字体. 3. 字符样式设置 文本字符除了要设置字体、颜色等之外，还有加粗、斜体、下划线等其他样式的设置，下面以继续对图2.17中的字体进行样式设置。 【例2-3】对例2-3中网页的字体进行样式设置。 2.2.3 文本排版 1. 添加空格 在网页中需要分段，按照常规，每段的首行要缩进，需要输入多个空格，但是默认状况下在Dreamweaver中无法连读输入几个空格，为了能够输入连续的空格，我们必须对Dreamweaver进行设置. 2. 换行与分段 换行与分段是大文本排版必须实现的功能，这在网页中，换行与分段区别比较大： 在HTML中换行与分段是用不同的表示符号表示的，分段常用p/p标签，即段落的开始用p，段落的结束用/p标签。某些网页分段时省略了/p，即作为单标签使用，而换行符是br/表示。 分段的间距大，换行的间距小。 在Dreamweaver中，分段直接Enter键分段即可以实现，换行是通过Shift+Enter键实现的。 3. 设置文字对齐方式 段落中的文字在某些时候需要有不同的对齐方式，默认对齐方式是左对齐。p标签的对齐属性为align，通过设置align为left、right或center值可分别实现左对齐、右对齐和居中对齐。在属性面板中图标就是分别用于进行左对齐、居中对齐、右对齐和两端对齐的。设置方式就是选中所需要设置的文本，然后单击相应的工具栏即可。 4. 添加水平分隔线 HTML提供了修饰段落的水平分隔线，在很多场合中可以轻松使用，不需要另外作图。平分隔线的标签是单标签hr /，默认情况下占一行。 5. 重命名样式 设置文本格式时，Dreamweaver 将跟踪每个页面中创建的样式，并生成可以重复使用的样式库。这使得对文本块应用相同的格式变得更加简单. 6. 插入日期 Dreamweaver 提供了一个方便的日期对象，该对象使您可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），您可以选择在每次保存文件时都自动更新该日期。注意:“插入日期”对话框中显示的日期和时间不是当前日期，也不反映访问者在显示您的站点时所看到的时期/时间。 7. 插入特殊字符 某些特殊字符在 HTML 中以名称或数字的形式表示，它们称为实体。HTML 包含版权符号 (?)、“与”符号 ()、注册商标符号 (?) 等字符的实体名