网页设计基础教程与上机指导第版插入网页对象.ppt

第3章 插入网页对象,教学提示和教学目标3.1 插入文本3.2 使用列表3.3 在网页中插入文件头部内容3.4 插入图像3.5 插入媒体对象3.6 插入其他对象,教学提示和教学目标,教学提示：文本和图像是网页中最重要的两种元素。在网页的适当位置放置一些图像，不仅可使内容清晰易懂，而且可使网页更具吸引力。网页中除了能够插入文本和图像之外，还有一些多媒体元素是非常重要的。本章主要讲述文本的插入、使用列表、在网页中插入文件头部内容、插入图像、插入媒体对象和插入其他对象等。教学目标：掌握文本的插入掌握列表的使用掌握插入文件头部内容掌握图像的插入掌握插入媒体对象对象创建图文混和网页插入Java Applet制作特效网页,3.1 插 入 文 本,文本是网页中不可缺少的内容之一，担负着传递信息的重要任务，虽然图像及多媒体在网页中所占的比例越来越大，但是在网站中文字的主导地位仍然是不可替代的。3.1.1 插入普通文本3.1.2 设置文本属性3.1.3 插入特殊字符,3.1.1 插入普通文本,在网页中可直接输入文本信息，也可以将其他应用程序中的文本直接粘贴到网页中，此外还可以导入已有的Word文档。插入普通文本的方法非常简单，具体操作步骤如下。(1)打开网页文档。(2)将鼠标指针置于要输入文本的位置，输入文本。,3.1.2 设置文本属性,输入文本后，在文本【属性】面板中可以设置文本的各项属性，具体操作步骤如下。(1)打开网页文档。(2)选中要设置属性的文本，在【属性】面板中的【字体】下拉列表框中选择【编辑字体列表】选项，弹出【编辑字体列表】对话框。(3)在对话框中的【可用字体】列表框中选择【宋体】，单击按钮，添加到【选择的字体】列表框中。(4)单击【确定】按钮，将网页文本字体设置为【宋体】，将字体【大小】设置为14像素。(5)单击【文本颜色】按钮，弹出颜色调色板，在调色板中将【文本颜色】设置为#FF3F8B。,3.1.3 插入特殊字符,特殊字符包含换行符、不换行空格、版权、注册商标等特殊字符，网页中经常用到特殊字符。下面讲述在网页中插入版权符号的方法，具体操作步骤如下。(1)打开网页文档。(2)将鼠标指针置于要插入特殊字符的位置，选择【插入】|【HTML】|【特殊字符】|【版权】命令，弹出Dreamweaver提示框。(3)单击【确定】按钮，插入版权符号。(4)保存文档，按F12键在浏览器中预览效果。,3.2 使 用 列 表,在网页中使用列表可以清晰地创建可识别的大纲和目录结构。Dreamweaver 8中常用的列表分为有序列表和无序列表两种形式。3.2.1 插入项目列表3.2.2 插入编号列表,3.2.1 插入项目列表,如果项目列表之间是并列关系，则需要生成项目符号列表。插入项目列表的具体操作步骤如下。(1)打开网页文档。(2)将鼠标指针置于要插入项目列表的位置，选择【文本】|【列表】|【项目列表】命令，即可插入项目列表。,3.2.2 插入编号列表,编号列表主要用于把文本内容设置为文本列表清单。插入编号列表的具体操作步骤如下。打开网页文档，将鼠标指针置于要插入编号列表的位置，选择【文本】|【列表】|【编号列表】命令，即可插入编号列表。,3.3 在网页中插入文件头部内容,文件头标签也就是通常说的META标签，文件头标签在网页中是看不到的，它包含在网页中.标签之间。所有包含在该标签之间的内容在网页中都是不可见的。文件头标签主要包括META、关键字、说明、刷新、基础和链接等内容，下面学习常用的文件头标签的使用。3.3.1 插入META信息3.3.2 设置基础3.3.3 插入关键字3.3.4 插入说明文字3.3.5 设置刷新,3.3.1 插入META信息,META元素用来描述网页文件自身的信息。META元素是网页中非常重要的元素，它可以记录有关当前页面的信息，也可以用来向服务器提供信息。插入META信息的具体操作步骤如下。(1)选择【插入】|【HTML】|【文件头标签】|【META】命令，弹出META对话框。(2)在对话框中进行相应的设置，然后单击【确定】按钮，在代码视图中就可以看到插入的META信息。在META对话框中可以进行如下设置。【属性】：在其下拉列表框中包括【名称】和【http-equivalent】两个选项。【名称】主要用于说明网页，对应于网页内容，以便于搜索引擎查找。http-equivalent相当于HTTP文件头的作用，可以直接影响网页的传输。【值】：表示META的类型。【内容】：【值】选项所对应的具体的META中的信息,3.3.2 设置基础,基础就是指在文件头中添加一个脚本的链接，该网页文档中所有的链接都以此链接为基准，而其他网页中的链接与该网页中的基准链接无关。设置基础的具体操作步骤如下。(1)选择【插入】|【HTML】|【文件头标签】|【基础】命令，弹出【基础】对话框。(2)在对话框中进行相应的设置，然后单击【确定】按钮，完成设置。在【基础】对话框中可以进行如下设置。Href：填入一个地址作为超级链接的基本地址，或单击【浏览】按钮选择一个链接地址。【目标】：在下拉列表框中可选择链接的打开方式。【空白】是以新窗口的形式打开；【父】是在父窗口中打开；【自身】是在原来的窗口中打开；【顶部】是在页面的顶部窗口打开。,3.3.3 插入关键字,关键字也就是与网页的主题内容相关的简短而有代表性的词汇，这是给网络中的搜索引擎准备的。关键字一般要尽可能地概括网页内容，这样浏览者只要输入很少的关键字，就能最大程度地搜索网页。插入关键字的具体操作步骤如下。(1)选择【插入】|HTML|【文件头标签】|【关键字】命令，弹出【关键字】对话框。(2)在对话框中的【关键字】文本框中输入有关网页的关键字，单击【确定】按钮，即可插入关键字。,3.3.4 插入说明文字,关键字忌讳的是词汇的冗长，而说明则忌讳词汇过于简短。说明为设计者提供了可以详细说明网页内容的机会，而关键字是为了让搜索引擎最大程度地捕捉到网页。插入说明文字的具体操作步骤如下。(1)选择【插入】|【HTML】|【文件头标签】|【说明】命令，弹出【说明】对话框。(2)在对话框中的【说明】文本框中输入有关网页的说明，单击【确定】按钮即可。,3.3.5 设置刷新,(1)选择【插入】|HTML|【文件头标签】|【刷新】命令，弹出【刷新】对话框(2)在对话框中进行相应的设置，然后单击【确定】按钮，完成设置。在【刷新】对话框中可以进行如下设置。【延迟】：网页被浏览器下载后所停留的时间，以秒为单位。【转到URL】：通过单击右侧的【浏览】按钮来输入动作所转向的网页或文档的URL。【刷新此文档】：重新将当前的网页从服务器载入，将更新的网页显示在浏览器中。,3.4 插 入 图 像,一幅幅图像和一个个漂亮的按钮、标记不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。可见，图像在网页中的作用是非常重要的。3.4.1 插入图像3.4.2 设置图像属性3.4.3 插入翻转图像,3.4.1 插入图像,在Dreamweaver中插入图像非常简单，具体操作步骤如下。(1)打开网页文档，将鼠标指针置于要插入图像的位置。(2)选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择图像。(3)单击【确定】按钮，即可插入图像。,3.4.2 设置图像属性,插入图像后，其四周会出现可编辑的缩放手柄，这说明该图像被选择，同时【属性】面板中显示出关于图像的属性设置，这时就可以根据需要设置图像属性。在图像【属性】面板中主要可以进行如下设置。【宽】和【高】：以像素为单位设定图像的宽度和高度。当用户在网页中插入图像时，Dreamweaver 8自动使用图像的原始尺寸。用户可以使用单位点、英寸、毫米和厘米指定图像大小。在HTML源代码中，Dreamweaver将这些值转换为以像素为单位。【源文件】：指定图像的具体路径。单击按钮选择源文件或直接在文本框中输入源文件路径。【链接】：为图像设置超级链接。可以单击按钮浏览选择要链接的文件，或者直接在文本框中输入URL路径。【目标】：链接时的目标窗口或框架。在其下拉列表框中包括四个选项：【替换】：图片的注释。当用户的浏览器不能正常显示图像时，便在图像的位置用这个注释代替图像。【编辑】：启动【外部编辑器】首选参数中指定的图像编辑器，并使用该图像编辑器打开选定的图像。编辑共包含以下六种方式。【地图】：名称和【热点工具】标注和创建客户端图像地图。【垂直边距】：设置图像在垂直方向与文本域或其他页面元素的间距。【水平边距】：设置图像在水平方向与文本域或其他页面元素的间距。【低解析度源】：指定在载入主图像之前应该载入的图像。【边框】：设置以像素为单位的图像边框的宽度。默认为无边框。【对齐】：设置图像和文字的对齐方式。,3.4.3 插入翻转图像,翻转图像就是浏览网页时，当鼠标经过图像时，原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的：原始图像(页面显示时的图像)和鼠标经过图像(当鼠标经过时显示的图像)。(1)打开网页文档，将鼠标指针置于要插入翻转图像的位置。(2)选择【插入】|【图像对象】|【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框。(3)在对话框中单击【原始图像】文本框右侧的【浏览】按钮，弹出Original Images对话框，在对话框中选择图像。(4)单击【确定】按钮，添加到【原始图像】文本框中。单击【鼠标经过图像】文本框右侧的【浏览】按钮，在弹出的Rollover Images对话框中选择图像，单击【确定】按钮，添加到【鼠标经过图像】文本框中。(5)单击【确定】按钮，插入鼠标经过图像。选中图像，在【属性】面板中将【对齐】设置为【右对齐】。(6)保存文档，按F12键在浏览器中预览效果,3.5 插入媒体对象,在网页中插入Flash动画、Flash按钮和Flash文本等，可以增加网页的动感效果，使网页更具吸引力，因此多媒体元素在网页中的应用越来越来广泛。3.5.1 插入Flash动画3.5.2 插入Flash按钮对象3.5.3 插入Flash文本对象3.5.4 插入Java Applet,3.5.1 插入Flash动画,Flash动画是在专门的Flash软件中完成的，在Dreamweaver中能将现有的Flash动画插入到文档中。在Flash【属性】面板中可以进行如下设置。【名称】：用来标识影片的名称。【宽和高】：以像素为单位设置影片的宽和高。【文件】：指定Flash文件的路径。单击按钮可以浏览并选择某一文件，或直接在文本框中输入文件的路径。【源文件】：指向Flash源文件的路径。【循环】：选择该选项，动画将在浏览器端循环播放。【自动播放】：选择该选项，则文档被浏览器载入时，自动播放Flash动画。【垂直边距】和【水平边距】：指定影片上、下、左、右边距空白的像素数。【品质】：在影片播放期间控制失真。设置越高，影片的观看效果就越好，但需要更快的处理器的支持以使影片在屏幕上能够正确显示。【比例】：用来设定显示比例，有【默认(全部显示)】、【无边框】和【严格匹配】3个选项。【对齐】：设置Flash影片的对齐方式。【背景颜色】：为当前Flash动画设置背景颜色。,3.5.2 插入Flash按钮对象,Dreamweaver 8中内置了很多Flash按钮样式，可以使用户自定义并插入已设计好的Flash按钮，而不必在Flash软件中制作动画，然后保存成文件，再将Flash动画插入到网页中。在【插入Flash按钮】对话框中可以进行如下设置。【样式】：在列表框中列出了所有可选的Flash按钮。【按钮文本】：在文本框中输入显示在按钮上的文字。【字体和大小】：设置文字的字体和字号。【链接】：单击【浏览】按钮，从弹出的对话框中选择按钮链接的目标。【目标】：选择打开链接的目标位置，在下拉列表框中包含以下四个选项。-blank：在新的未命名浏览器窗口中打开链接文件。-parent：在父框架组或包含该链接的框架窗口中打开链接文件。-self：在链接所在的框架或窗口中打开链接文件，本选项是默认的，通常无需指定。-top：将链接的文件在整个浏览器窗口中打开。【背景色】：用于设置Flash按钮的背景色。【另存为】：设置保存该按钮的路径及文件名，必须将该按钮名保存在站点中。【应用】：在网页中将会显示出按钮的样式。【获取更多样式】：从Adobe网站获得更多的按钮样式。,3.5.3 插入Flash文本对象,在网页中插入Flash文本对象，可以利用【插入Flash文本】对话框来完成。,3.5.4 插入Java Applet,Java是一种允许开发并可以嵌入Web页面的编程语言。Java Applet是在Java的基础上演变而成的应用程序，它可以嵌入到网页中用来执行一定的任务。Java Applet小程序创建以后，Dreamweaver 8将它插入到HTML文档中，Dreamweaver 8使用Applet标签来标识对小程序文件的引用。在Applet【属性】面板中可以进行如下设置。【Applet名称】：指定进行脚本撰写时用来标识Applet的名称。【宽】和【高】：以像素为单位设置Applet的宽度和高度。【代码】：指定该Applet的Java代码的文件路径。单击按钮可以浏览并选择某一文件，或直接在文本框中输入文件的路径。【基址】：标识包含选定Applet的文件夹。选择了一个Applet后，此文本框将被自动填充。【对齐】：设置Applet在文档中的对齐方式。【替换】：指定如果用户的浏览器不支持Java Applet或者已经禁用Java，将要显示的替换内容。如果输入文本，Dreamweaver将插入该文本，将其作为Applet的alt属性的值。【垂直边距】和【水平边距】：以像素为单位指定Applet上、下、左、右边距空白的像素数。【参数】：单击此按钮，将弹出一个对话框，可在其中输入传递给Applet的附加参数。,3.6 插入其他对象,在页面中添加的文本，除了可以是汉字、英文和其他语言以外，还可以输入一些无法直接输入的特殊字符，如￥、$、#等。在Dreamweaver中，可以利用系统自带的符号集合，方便快捷地插入一些常用的特殊字符，如版权、货币符以及数字运算符等。在3.1.3节我们已学习过插入版权符号的方法，下面我们将学习插入日期的方法。3.6.1 插入日期3.6.2 插入水平线,3.6.1 插入日期,我们经常会在网页上会看到最近一次修改网页的时间，这说明网页是在不断更新的，从而吸引访问者下次再来光顾。Dreamweaver 8提供了一个方便的日期对象，该对象可以以任何格式插入当前日期。,3.6.2 插入水平线,在HTML文档中经常用到水平线，它主要用于分隔文档的内容，使文档结构清晰明了。有时候，合理使用水平线可以获得非常好的版面效果。一篇内容复杂的文档，如果放置几条水平线，可能就会变的层次分明，便于阅读。水平线【属性】面板中可以进行如下设置。【宽】和【高】：以像素为单位或以页面尺寸百分比的形式设置水平线的宽度和高度。【对齐】：设置水平线的对齐方式，包括默认、左对齐、居中对齐和右对齐4个选项。只有当水平线的宽度小于浏览器窗口的宽度时，对齐设置才适用。【阴影】：设置水平线是否带阴影。,