《网页设计教程04-06插入和编辑网页基本元素-创建网页超链接与页面布局讲述ppt课件》由会员分享，可在线阅读，更多相关《网页设计教程04-06插入和编辑网页基本元素-创建网页超链接与页面布局讲述ppt课件（99页珍藏版）》请在金锄头文库上搜索。
1、第4章 插入和编辑网页基本元素,教学目标,掌握文本的插入、属性的设置 掌握图像的插入、属性的设置 掌握Flash的插入、属性的设置 掌握多媒体的插入、属性的设置 了解其他网页元素的插入、属性的设置,4.1 插入文本与修改属性,4.1.1 插入文本 1、直接输入文本 HTML只允许字符之间包含一个空格，若要在文档中连续输入多个空格，则可按照如下方法进行操作： （1）在中文输入法的全角状态下输入空格。 （2）使用快捷键Ctrl+Shift+空格。 （3）选择“编辑”菜单中的“首选参数”，打开“首选参数”对话框，在“常规”类别中选中“允许多个连续的空格”选项。 2、复制文本 3、导入文档,4.1.2
2、 设置文本属性,1字体设置 2字号设置 3颜色设置 4标题格式 5段落格式设置 6应用列表,1字体设置,有时设置字体时，在文本的“属性”面板中，默认没有显示所需要的字体，此时则需要将使用的某种字体添加到字体列表中。,2字号设置,通过“属性”面板中的“大小”下拉按钮，用户可以根据设计需要选择合适的文本字号，来对选中文本进行设置字号大小。,3颜色设置,网页中文本的颜色默认是黑色，但是为了使文本颜色符合网页设计风格，达到更好的视觉效果，则可以按照要求设置文本的颜色。 单击“属性”面板中的“文本颜色”按钮 ，此时鼠标变成“吸管”形状，然后在打开的颜色选择器中选择所需要的字体颜色。,4标题格式,通常情况
3、下，网页中文本标题是文本内容的主题，因此对标题格式的设置也是不可缺少的。,5段落格式设置,段落格式化是指对选定的段落进行排版，主要包括该段落的对齐、缩进、行间距、段间距等，要对某个段落进行处理，需要先将光标定位于该段落中。,（1）段落的对齐方式,段落的对齐方式有以下四种：左对齐、右对齐、居中对齐和两端对齐。在Dreamweaver中默认的是左对齐，可以根据用户需要来设置相应的对齐方式，先选中所需对齐的文本，或把光标置于该文本的开头处，然后单击“属性”面板中相应的对齐按钮即可。,（2）段落缩进,在“属性”面板的对齐方式下方有两个按钮，“文本凸出”和“文本缩进”，单击它们就能实现文本的缩进，单击一
4、次移动两个单位，并且会将标签应用于文本段落。,（3）段落间距,段落间距包括段间距和行间距，在Dreamweaver CS3中，提供了三种方式添加段落间距，即进行文本换行。 自动换行：输入文本时，当一行的长度超多屏幕显示的范围，文字将自动在下一行进行显示。 使用Enter键：按回车键时会自动添加一个新的段落，段落间出现一个空白行。 使用Shift+Enter键：同时按下这两个按键，插入换行符，不会添加新的段落，两行之间也不会出现空白行。,6应用列表,（1）应用项目列表 如果网页中的文本内容不需要按顺序排列时，则使用项目列表。使用“属性”面板上的“项目列表”按钮 进行设置。 （2）应用编号列表 当
5、网页中的文本内容需要进行按顺序排列时，则使用编号列表。使用“属性”面板上的“编号列表”按钮进行设置。,（3）设置列表属性,应用了列表之后可以更改列表的类型、样式及编号列表的计数等。可以单击“文本”菜单中的“列表”选项中的“属性”，打开“列表属性”对话框进行修改。 列表类型：有四种，项目列表、编号列表、目录列表和菜单列表 样式：设置列表每行前面的列表符号。 开始计数：设置编号列表每行开始的编号。,4.2 插入图像与修改属性,4.2.1 插入图像 插入图像是一个非常简单的操作，只需要将光标定位在需要插入图像文件的位置，然后执行下列操作之一。 方法一：选择菜单“插入记录”“图像”命令 方法二：在“常
6、用”工具栏中，单击“图像”按钮右边的三角按钮 ，在下拉列表中选择“图像”,4.2.2 修改图像属性,1图像的基本属性 （1）宽和高：以像素为单位指定图像的宽度和高度，用来设置图像的大小。 （2）源文件：指定图像的源文件，设置引用图像的路径。 （3）链接：设置图像的超级链接。 （4）替换：与在“图像标签辅助功能属性”对话框设置的效果相同，对于某些浏览器，在浏览网页时鼠标移动到图像上时显示的文字。,1图像的基本属性,（5）地图和热点工具：设置热区。 （6）垂直边距和水平边距：以像素为单位，设置图像边沿的边距。“垂直边距”沿图像的顶端和底部；“水平边距”沿图像的左侧和右侧。 （7）边框：以像素为单位
7、，图像边框的宽度，默认为无边框。 （8）对齐按钮：在边框右侧的三个按钮 ，左对齐、居中和右对齐，设置图像相对浏览器的左对齐、居中或右对齐。 （9）对齐：对齐同一行上的图像和文本，设置图像和文本的排版方式。,各对齐方式的含义,2图像的编辑,通过属性检查器，除了可以设置图像的基本属性，还可以对图像进行相关的编辑，包括有：调整图像大小、优化图像、裁剪图像、调整图像的亮度和对比度、锐化图像等。,4.2.3 创建鼠标经过图像,在Dreamweaver CS3中，系统为用户提供了制作简单图像特效的功能，使用这些特效能够使设计的网页更生动，更具浏览性。“鼠标经过图像”就是其中一种特效。 创建“鼠标经过图像”
8、必须使用两个图像，一个是主图像，即当页面刚加载时显示的“原始图像”；另一个是次图像，鼠标滑过主图像时显示的“鼠标经过图像”。,4.3 插入Flash对象,Flash动画是一种矢量动画，具有体积小、图像质量高等特点，是当今最流行的网页动画格式，而目前在浏览器中集成了播放Flash动画的插件或控件，用户不需要安装Flash播放器也都能欣赏到Flash动画。 ,可以使用下面两种方法之一在网页中插入Flash动画。,方法一：选择菜单“插入记录”“媒体”“Flash”命令 方法二：在“常用”工具栏中，单击“媒体”按钮右边的三角按钮，在下拉列表中选择“Flash” 在“参数”的下方，在出现的文本框中输入参
9、数“wmode”，然后再单击“值”的下方，设置其值为“transparent” ，可以进行flash透明化。,4.3.2 插入Flash按钮,在插入Flash按钮时要注意，Dreamweaver的安装路径和创建的站点不能含有中文。 ,4.3.3 插入Flash文本,Flash文本是Flash按钮的另一种表现形式，在Dreamweaver CS3中，Flash文本的效果显示比较简单，即在浏览页面时，当鼠标移动经过或离开该文本时会改变文本颜色和背景颜色。 ,4.4 插入多媒体对象,4.4.1 插入音频文件 4.4.2 插入视频文件,4.4.1 插入音频文件,Dreamweaver中支持多种类型的音
10、频文件，比如MIDI、MP3、WAV、Real Audio等格式都能插入到网页中。插入的声音可以用作背景音乐，但有时访问者可能不希望听到音频内容，所以也可以提供声音播放控件，由访问者自行控制。 ,4.4.2 插入视频文件,Dreamweaver提供的插件功能，可以实现在网页中添加音乐，也可以添加一些视频文件，视频文件类型可以包括wmv、avi、mpeg、rmvb等。 ,4.5 插入其他对象,文本、图像、Flash、音频和视频文件等元素的使用，可以丰富整个网站，但还有一些功能是这些元素无法实现的，此时需要插入其他对象，如水平线、日期、特殊字符、头部标记、表格和表单等，本节将要介绍关于此类对象的使
11、用。,4.5.1 插入水平线,水平线可以划分网页页面的层次，分割文档内容，方便浏览。在页面上，可以使用一条或多条水平线来组织内容信息。 ,4.5.2 插入日期和时间,4.5.3 插入特殊字符,在网页中输入文本时，有时需要使用一些无法通过键盘正常输入的特殊字符，此时可以利用Dreamweaver提供的插入特殊字符来插入所要字符。,4.5.4 插入头部标记,插入头部标记包括有插入META、关键字、说明、刷新、基础及链接等。,2插入网页自动刷新功能,自动刷新功能是指设定在一定时间自动对页面进行刷新，可以刷新该页面或跳转到另外一个页面。,4.5.5 插入表格和表单,在Dreamweaver中根据需要还
12、可以插入表格和表单。,本章小结,文本和图像是设计网页的最基本也是最重要的元素，除了这两者，还可以添加其他的基本元素如音频、动画、视频等，还有一些其他对象如水平线、日期等。合理的使用这些元素可以提高网页的视觉效果，延长浏览者浏览时间，从而增强网站的目的性。本章主要介绍了在Dreaweaver CS3中如何插入和编辑文本、图像、flash对象、多媒体对象、水平线、头部标记等网页基本元素，只有掌握这些操作，灵活的使用，才能更好的设计出一个高水准的网站。,实训,完成实训第4章 插入和编辑网页基本元素实训,第5章 创建网页超链接,教学目的,介绍了超链接的概念 掌握超链接和导航条的创建方法 会在网页中灵活
13、使用超链接,5.1 超链接的基本概念,一个网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的，没有意义的。为了建立起网页之间的联系我们需要实现从一个网页指向另一个目标的跳转，这个目标可以是另一个网页，也可以是同一个网页上的不同位置，还可以是一张图片、一个电子邮件地址、一个文件或一个绝对定位的元素，甚至是一个应用程序，这就是所谓的超链接。在创建超链接之前，首先要弄清楚目录和路径的关系，只有这样才可以轻松管理网站的链接，创建出结构清晰明确的网站。,5.1.1 URL概述,URL（统一资源定位器）主要用于指定网上资源的位置和方法。 URL一般由三个部分组成，
14、即协议、主机和域 （1）协议，又成服务方式，如http、ftp、telnet等。 （2）主机：即存放资源的主机的IP地址，有时也包括端口号，如： (3)域：主机的具体地址，包括路径和文件名等。,5.1.2 绝对路径,绝对路径就是被链接文档的完整的URL，而且包含服务器协议。这个地址是精确地址而不用考虑文件的位置，如果目标文件被移动，则链接无效。创建外部链接时必须用绝对路径。,5.1.3 相对路径,相对路径是指以当前文件所在位置为起点到被链接文件经由的路径。,5.1.4 根路径,根路径是指从站点目录到文档所在位置的路径，以一个正斜杠“/”开始，该斜杠表示站点根文件夹。 根路径综合了绝对路径和相对
15、路径的优点，除了链接时和当前文档位置无关，还可以在本地站点中进行测试。,5.2创建超链接,5.1创建内部超链接 内部链接主要是链接站点内部的文件，一般使用相对路径。常见的有文本链接、图像链接和热点链接 1.文本链接 2.图像链接 3.图像热区链接,5.2.2 创建锚记超链接,如果一个网页上的内容过长，那么通过滚动条需找需要的内容并不是一件容易的事。应用锚记链接可以在页面内或不同页面内快速定位，找到所需的内容。创建锚记连接的具体操作步骤如下： 1.插入命名锚记 2.创建锚记链接,5.2.3 创建邮件超链接,邮件超链接是一种特殊的链接方式，其链接对象为邮箱地址。 1.使用“插入”菜单创建邮件链接
16、2.直接给文档创建邮件链接,如果需要在网页中提供下载资料，就需要为文件提供下载链接。如果链接指向的不是一个网页文件，而是其他格式的文件，如.rar、 .mp3 、 .exe等，单击链接的时候就会弹出是否选中下载文件的对话框。,5.2.4 创建下载超链接,5.2.5 创建脚本超链接,脚本超链接是一种特殊类型的链接，通过单击带有脚本超链接的文本或对象，可以运行相应的脚本代码及函数。,5.2.6 创建空链接,空链接是指没有指定链接对象的链接。利用空链接可以向网页上的对象或文本附加行为，以便当鼠标指针滑过该链接时 ，交换图像或显示层等动作。,5.3管理超链接,5.4创建跳转菜单,跳转菜单是页面中的弹出式菜单，在菜单中列举出链接到文件或文件夹的选项。,5.5创建导航条,导航条由按钮、图像或一组图像组成。导航条就像网站的桥梁，网站通过它把站点中的各个页面联系起来，使浏览者更加方便清晰地在各个页面间进行切换，是网站的结构更加层次分明。,思考题,1绝对路径和相对路径有什么区别？ 2. 如何创建不同形状的热点超链接？ 3. 如何创建邮件超链接？ 4. 创建脚本链接有什么作用?
