chapter3制作简单网页

1、网页设计与制作,网页元素的添加 制作简单网页,学习目标,理解和掌握如何在网页中添加各种常见的对象，并对这些对象的属性进行设置。 通过学习，应能独立完成常见媒体的插入和修改，并能独立完成简单网页的制作。,网页的基本操作,新建常规文档：基本页、动态页、模板页、其他、CSS样式表、框架集 设置文件头：设置网页编码、文档标题、定义关键字、描述文字等,网页的基本操作,使用文本 1.添加文本：直接输入、导入已有文档 2.设置文本格式（设置文本属性） 注意： 文字大小一般网页中正文用9pt就可以了，一般的标题文本用12pt、16pt、18pt即可。,网页的基本操作,使用文本 3.换行： 自动换行 段落换行

2、换行符换行 Shift+Enter,网页的基本操作,分段标记符用于将文档划分为段落，标记为，其中结束标记符通常可省略。 换行标记符用于在文档中强制断行，标记为一个单独的。,网页的基本操作,使用文本 4.首行缩进 插入“文本”“字符”“不换行空格” 注意： 我们之所以不直接在文字前面按空格键，是因为浏览器会忽略代码中的空格。 在HTML中，空格的代码是 。,网页的基本操作,使用文本 5.插入水平线 插入“HTML”“水平线” 添加水平线的标记符为,网页的基本操作,创建列表 列表一般用于突出主题的重点或分类对象的属性。它常被用来格式化包含逻辑关系的文本信息。 在Dreamweaver MX

3、 2004文档窗口中，可以用现有文本或新文本创建编号列表（有序列表）、项目符号列表（无序列表）和定义列表。此外，列表还可以嵌套。,网页的基本操作,创建列表 1.创建有序列表 只要在开始时单击“编号列表”按钮即可。 有序列表（Ordered list）也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。,网页的基本操作,创建列表 定义有序列表需要使用有序列表标记符和列表项标记符 （结束标记符可省略），语法如下： List item 1 List item 2 ,网页的基本操作,创建列表 2.创建无序列表 只要在开始时单击“项目列表”按钮即可。 无序列表（Unordered list）

4、也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。,网页的基本操作,创建列表 定义无序列表需要使用无序列表标记符和列表项标记符（结束标记符可省略），语法如下： List item 1 List item 2 ,网页的基本操作,使用图像 图像可以为站点增色不少，使站点更具有吸引力。 目前，网页中使用的图像格式主要有GIF（图形交换格式）、JPEG（联合图像专家组标准，包括JPG和JPEG）和PNG（可移植网络图形）三种，而用得最广泛的是GIF和JPEG这两种格式。,网页的基本操作,使用图像 1.插入图像操作 图像必须位于当前站点内，否则图像的链接将会出现错误。 2.改变图像大小

5、3.设置图像的对齐属性 4.设置图像的垂直边距与水平边距 5.设置图像的替代文字 6.设置图像边框,网页的基本操作,使用超级链接 超级链接是Internet的核心，没有链接，就没有World Wide Web 。 一个完整的网站包含了相当多的超链接。,网页的基本操作,使用超级链接 超链接基础： URL（Uniform Resource Locator，即统一资源定位器）用于定位Web上的文档信息。,网页的基本操作,使用超级链接 一个 URL 包括 3 部分：协议、计算机地址、文件路径。 协议：/计算机/文件路径,网页的基本操作,使用超级链接 1.绝对地址：如果要创建一个外部链接，就不可避免地要

6、使用一个绝对URL地址。 绝对URL是指某个文件在网络上的完整路径，包括协议、服务器、路径和文件名等。 如： ,网页的基本操作,使用超级链接 2.相对地址：可分为文件相对地址和根目录相对地址。 相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。,网页的基本操作,使用超级链接 2.相对地址 （1）文件相对地址：描述某个文件（或文件夹）相对于另一个文件（或文件夹）的相对位置。 即使站点根目录位置发生了改变，这种形式的地址也不会受到任何影响。,网页的基本操作,使用超级链接 2.相对地址 使用相对URL时，经常使用两个与DOS类似的符号： 句点（.）表示

7、当前目录 双重句点（.）表示当前目录的上一级目录,网页的基本操作,使用超级链接 2.相对地址 （2）根目录相对地址：描述某个文件（或文件夹）相对于根目录下的相对位置。 如：“/news/pages/news01.htm” 根目录相对地址只能由网站服务器来解释，在硬盘目录中打开一个带有根目录相对地址链接的网页时，上面的所有链接将是无效的。这是因为在硬盘目录中不存在站点根目录，而只有文件夹。,网页的基本操作,使用超级链接 根据超链接的目标文件不同，分为： 网页之间的超链接 页面内的超链接 文件下载超链接 Email超链接 空超链接,网页的基本操作,使用超级链接 根据超链接源对象的不同，分为： 文本

8、超链接 图像超链接（包括图像映射） 对象超链接（例如Flash、Java小程序）,网页的基本操作,使用超级链接 根据超链接实现方式的不同，分为： HTML超链接 JavaScript超链接 对象超链接,网页的基本操作,创建超链接 A 标记符用于创建超链接（结束标记符不能省略），href 属性用于指定超链接的目标文件。 内部网页超链接：link 外部网页超链接：link,网页的基本操作,创建超链接 1.添加外部链接 添加时“http:/”不可以省略 2.添加内部链接 通过选择文件添加，通过拖放定位图标添加 链接的网页或文件必须位于本地站点中，不可以在硬盘中随意选取！,网页的基本操作,创建超链接

9、3.添加E-mail链接 Email,网页的基本操作,创建超链接 4.添加空链接 指没有指定目标文件的链接，这样的超链接在单击时不进行任何跳转。 建立空链接的目的就是为了应用行为，其他情况下不必建立。 在“属性”面板中“链接”框中输入一个数值符“#”即可。,网页的基本操作,创建超链接 5.添加下载链接 只要将超链接所链接的目标文件设置为浏览器不能自动打开的文件格式（例如“.rar”、“.zip”、“.exe”等文件格式），那么就自动生成了文件下载链接。 下载,网页的基本操作,创建超链接 6.添加锚记链接 使用页面内的超链接，首先需要定义锚点，然 后在超链接中指向该锚点。 定义锚点应使用 指向锚点的超链接为：link （若href属性的值为单独的#号，则表示为空链接。）,网页的基本操作,创建