网页设计 第4章在网页中插入基本元素 共九章ppt

第4章在网页中插入基本元素本章学习目标熟悉普通文本、特殊文本的插入方法，项目列表和文本格式化的方法;掌握图像插入、属性设置的方法和网站相册的制作。掌握各种媒体的插入方法、不同媒体相关参数的具体设置、系统集成Flash按钮和文本的插入以及加入音乐的技巧。4.1文本元素的插入4.1.1文本元素的插入1．普通文本的插入2．特殊文本的插入3.在字符之间添加空格4.1.2格式化文本Dreamweaver中的文本格式设置与使用标准字处理程序类似。可以为文本块设置默认格式化样式（段落、标题1、标题2等），更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体、等宽字体和下划线等）。对字体的属性进行设置一般有属性面板法和菜单命令两种方法，使用菜单命令时，只需要选择“文本”菜单下的相应命令，然后进行具体的设置即可。“文本”属性面板中各选项含义及设置方法如下。格式。设置所选文本（一般是标题文本）的段落样式。样式。显示当前应用于所选文本的类样式。粗体。将b或strong标签应用于选定的文本，即对所选文本加粗。斜体。将i或em标签应用于选定的文本，即对所选文本进行倾斜设置。字体。对所选的文本进行字体设置，默认情况下中文字体是“宋体”。要设置文本的“字体”，在“字体”下拉列表中选择一种字体即可。大小。对所选文本进行字体大小的设置。颜色。“#00ff00”形式的颜色代码是RGB颜色，必须以“＃”字符开头。对齐方式。对文本段落进行对齐设置。链接。对所选的文本建立超级链接。4.1.3项目列表1．有序列表有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字符，也可以是阿拉伯数字、英文字母、罗马数字等符号。2．无序列表无序列表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字符。3．定义列表定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。4．用现有文本创建列表5．创建嵌套列表6．列表属性设置使用“列表属性”对话框可以设置整个列表或个别列表项的外观，如设置编号样式、重置计数、设置个别列表项或整个列表的项目符号样式选项。列表类型。指定列表属性；列表项目。指定列表中的个别项。使用弹出式菜单选择项目符号、编号、目录或菜单列表。根据所选的“列表类型”，对话框中将出现不同的选项；样式。确定用于编号列表或项目列表的编号、项目符号的样式。所有列表项都将具有该样式，除非为列表项指定新样式；开始计数。设置第一个编号列表项的值。4.1.4插入文本及美化在本例中，将在已有基本框架的“科技学院招生网”网站的首页页面中添加一些文本、项目列表，并对它们进行设置，如缩进、加粗、倾斜、大小、颜色等，最终效果如图所示。4.2图像元素在网页的制作中图像的格式有一定的要求，一般用于网页的图像要求是GIF、JPEG或PNG3种格式中的一种。4.2.2插入图像1．直接插入图像2．用占位符插入图像4.2.3插入Fireworks图片Fireworks可以将优化后的图像和HTML文件导出并保存到所需的Dreamweaver站点文件夹中。4.2.4实例12：制作网站相册在Dreamweaver中内置了创建网站相册的命令，但此命令实际是调用了Fireworks的图片处理功能，因此，如要创建网站相册，必须先安装Fireworks软件。另外，为了创建网站相册，还需收集建立相册的图片。在开始创建相册之前，将相册的所有图像放置在一个文件夹中（该文件夹不必位于站点中）。另外，确保图像文件名是以.gif、.jpg、.jpeg、.png、.psd、.tif或.tiff为扩展名，并不能以中文命名。4.3交互对象4.3.1各种媒体的来源1．系统集成2．网络下载3．从素材库导入4．自己制作4.3.2Flash动画1．插入Flash影片“Flash影片”属性面板Flash。用于设置Flash影片的名称，以便在脚本中引用。宽和高。用于设置Flash影片的宽度和高度。文件。用于设置Flash影片文件的路径。源文件。用于指定Flash影片源文件。对齐。用于设置影片的对齐方式。背景颜色。用于设置影片区域的背景颜色。垂直边距和水平边距。用于设置影片上下和左右空白区域的像素值，可以在数值框中输入单位是像素的间距值。品质。用于设置Flash影片的显示质量。比例。用于设置Flash影片的显示比例。有“全部显示”、“无边框”和“严格匹配”3个选项。选中该复选框，则影片会循环播放。选中该复选框，则当装载网页时即自动播放动画。单击该按钮将自动打开Flash软件对源文件进行处理，但要确定有源文件，并已经在源文件属性中指定了其路径。用于恢复Flash影片的原始尺寸。用于在设计视图中播放Flash影片。用于打开“参数”对话框，在该对话框中可以输入一些附加参数。类。用于为Flash影片提供一种样式。2．插入Flash按钮3．插入Flash文本4.3.3插入其他动态元素1．插入Shockwave影片2．插入Applet3．插入ActiveX控件4．插入插件4.3.4为网页加入音乐1．背景音乐（1）添加背景音乐代码（2）通过插入插件来添加背景音乐2．页面音乐的链接和嵌入（1）在页面中单击要链接声音文件的网页元素，例如：文本或图像等。（2）在属性面板中的Link文本框中输入声音文件即可。4.3.4实例13：插入FLASH按钮