chapter3制作简单网页

网页设计与制作——网页元素的添加制作简单网页学习目标理解和掌握如何在网页中添加各种常见的对象，并对这些对象的属性进行设置。通过学习，应能独立完成常见媒体的插入和修改，并能独立完成简单网页的制作。网页的基本操作新建常规文档：基本页、动态页、模板页、其他、CSS样式表、框架集设置文件头：设置网页编码、文档标题、定义关键字、描述文字等网页的基本操作使用文本1.添加文本：直接输入、导入已有文档2.设置文本格式（设置文本属性）注意：文字大小——一般网页中正文用9pt就可以了，一般的标题文本用12pt、16pt、18pt即可。网页的基本操作使用文本3.换行：自动换行段落换行换行符换行Shift+Enter网页的基本操作分段标记符用于将文档划分为段落，标记为P/P，其中结束标记符通常可省略。换行标记符用于在文档中强制断行，标记为一个单独的BR。网页的基本操作使用文本4.首行缩进插入☞“文本”☞“字符”☞“不换行空格”注意：我们之所以不直接在文字前面按空格键，是因为浏览器会忽略代码中的空格。在HTML中，空格的代码是 。网页的基本操作使用文本5.插入水平线插入☞“HTML”☞“水平线”添加水平线的标记符为HR网页的基本操作创建列表列表一般用于突出主题的重点或分类对象的属性。它常被用来格式化包含逻辑关系的文本信息。在DreamweaverMX2004文档窗口中，可以用现有文本或新文本创建编号列表（有序列表）、项目符号列表（无序列表）和定义列表。此外，列表还可以嵌套。网页的基本操作创建列表1.创建有序列表只要在开始时单击“编号列表”按钮即可。有序列表（Orderedlist）也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。网页的基本操作创建列表定义有序列表需要使用有序列表标记符OL/OL和列表项标记符LI/LI（结束标记符可省略），语法如下：–OL–LIListitem1–LIListitem2–/OL网页的基本操作创建列表2.创建无序列表只要在开始时单击“项目列表”按钮即可。无序列表（Unorderedlist）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。网页的基本操作创建列表定义无序列表需要使用无序列表标记符UL/UL和列表项标记符LI/LI（结束标记符可省略），语法如下：–UL–LIListitem1–LIListitem2–/UL网页的基本操作使用图像图像可以为站点增色不少，使站点更具有吸引力。目前，网页中使用的图像格式主要有GIF（图形交换格式）、JPEG（联合图像专家组标准，包括JPG和JPEG）和PNG（可移植网络图形）三种，而用得最广泛的是GIF和JPEG这两种格式。网页的基本操作使用图像1.插入图像操作图像必须位于当前站点内，否则图像的链接将会出现错误。2.改变图像大小3.设置图像的对齐属性4.设置图像的垂直边距与水平边距5.设置图像的替代文字6.设置图像边框网页的基本操作使用超级链接超级链接是Internet的核心，没有链接，就没有WorldWideWeb。一个完整的网站包含了相当多的超链接。网页的基本操作使用超级链接超链接基础：URL（UniformResourceLocator，即统一资源定位器）用于定位Web上的文档信息。网页的基本操作使用超级链接一个URL包括3部分：协议、计算机地址、文件路径。协议：//计算机/文件路径网页的基本操作使用超级链接1.绝对地址：如果要创建一个外部链接，就不可避免地要使用一个绝对URL地址。绝对URL是指某个文件在网络上的完整路径，包括协议、服务器、路径和文件名等。如：网页的基本操作使用超级链接2.相对地址：可分为文件相对地址和根目录相对地址。相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。网页的基本操作使用超级链接2.相对地址（1）文件相对地址：描述某个文件（或文件夹）相对于另一个文件（或文件夹）的相对位置。即使站点根目录位置发生了改变，这种形式的地址也不会受到任何影响。网页的基本操作使用超级链接2.相对地址使用相对URL时，经常使用两个与DOS类似的符号：–句点（.）表示当前目录–双重句点（..）表示当前目录的上一级目录网页的基本操作使用超级链接2.相对地址（2）根目录相对地址：描述某个文件（或文件夹）相对于根目录下的相对位置。如：“/news/pages/news01.htm”根目录相对地址只能由网站服务器来解释，在硬盘目录中打开一个带有根目录相对地址链接的网页时，上面的所有链接将是无效的。这是因为在硬盘目录中不存在站点根目录，而只有文件夹。网页的基本操作使用超级链接根据超链接的目标文件不同，分为：–网页之间的超链接–页面内的超链接–文件下载超链接–Email超链接–空超链接网页的基本操作使用超级链接根据超链接源对象的不同，分为：–文本超链接–图像超链接（包括图像映射）–对象超链接（例如Flash、Java小程序）网页的基本操作使用超级链接根据超链接实现方式的不同，分为：–HTML超链接–JavaScript超链接–对象超链接网页的基本操作创建超链接A标记符用于创建超链接（结束标记符不能省略），href属性用于指定超链接的目标文件。内部网页超链接：ahref=test.htmlink/a外部网页超链接：ahref=网页的基本操作创建超链接1.添加外部链接添加时“http://”不可以省略2.添加内部链接通过选择文件添加，通过拖放定位图标添加链接的网页或文件必须位于本地站点中，不可以在硬盘中随意选取！网页的基本操作创建超链接3.添加E-mail链接ahref=mailto:[e-mail]/a网页的基本操作创建超链接4.添加空链接指没有指定目标文件的链接，这样的超链接在单击时不进行任何跳转。建立空链接的目的就是为了应用行为，其他情况下不必建立。在“属性”面板中“链接”框中输入一个数值符“#”即可。网页的基本操作创建超链接5.添加下载链接只要将超链接所链接的目标文件设置为浏览器不能自动打开的文件格式（例如“.rar”、“.zip”、“.exe”等文件格式），那么就自动生成了文件下载链接。ahref=xxx.zip下载/a网页的基本操作创建超链接6.添加锚记链接使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。定义锚点应使用aname=锚点名称/a指向锚点的超链接为：ahref=#锚点名称link/a（若href属性的值为单独的#号，则表示为空链接。）网页的基本操作创建超链接6.添加锚记链接指向其他页面内锚点的超链接：ahref=页面的URL#该文件中的锚点link/aahref=#blanklink/a上机实训1.制作一个既包括文字链接，又包括图片链接的网页。要求单击相对应的文字或图片时都可以链接到指定页面，且该页面在新窗口中自动打开。2.制作导航条与鼠标经过图像。3.网页元素的快速定位。