第三章 网页中的基本元素 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（机械工业出版社）

网页设计与制作 第三章 网页中的基本元素 通常情况下，构成网页的元素有文本、图像、多媒体等，这些基本元素可以通过表格的方式布局到网页上。网页的各构成要素在网页中担当着各自的角色，共同保证信息的有效传达，是网页发挥整体作用不可缺少的部分。 3.1 文本及其常用格式设置 3.1.1 复制和粘贴文本 1.在文件面板中，找到要插入的文本所在的文件，在Dreamweaver中打开。 2.选择要复制的内容，在网页中进行粘贴。 提示：建议事先准备好文字素材，这样有利于团队合作，能够做到分工明确。 3.1 文本及其常用格式设置 3.1.2 分段和换行 段落标签<p></p> 换行标签<br/> 分段直接按<Enter>键即可，而换行要按<Shift>+<Enter>组合键。 3.1 文本及其常用格式设置 3.1.3 插入空格及文本缩进方法 1.插入空格 Dreamweaver在默认的状态下是不能连续输入空格的，可以通过下面的设置使页面可以输入连续空格：打开【编辑】菜单下的【首选参数】，在“常规”选项卡中把“允许多个连续空格”的复选框选中。 2.文本缩进方式：可以使用文本凸出和文本缩进按钮 来缩进和调整段落和文本块的首行缩进。 3.2 图形图像及其常用设置 网页图像的格式主要有以下三种： 1.GIF 2.JPEG 3.PNG 3.2 图形图像及其常用设置 3.2.1 插入图像 1.将插入点放置在要显示图像的地方。 2.单击【常用】工具栏的【图像】按钮 ，打开【选择图像源文件】对话框，从图像文件夹中选择图像文件，单击【确定】按钮。 注意：插入的图像必须位于当前站点内，同时引用文件路径的文件夹层数最好不要超过三层，如果文件不在站点内或文件夹层数过多，会造成图像无法显示。 3.2 图形图像及其常用设置 3.2.2 设置图像属性 图像属性面板包括以下部分 1.【图像标记名称】：在这个文本框中输入图像标记的名称。 2.【宽】、【高】：设置图像的宽度和高度，单位为px（像素）。注意：这里只是网页中显示效果的大小的改变，图像文件并不发生变化，改变图像大小时，应当使用图像处理软件Photoshop或Fireworks来处理。 3.【源文件】：指定图像的URL路径。当需要替换图片时，单击右侧的【浏览】按钮 ，打开对话框，从磁盘上选择文件来实现，也可拖动【指向文件】按钮 指向站点中要插入的图片。 3.2 图形图像及其常用设置 3.2.2 设置图像属性 4.【链接】：用来输入超链接的URL地址。 5.使用图像编辑软件裁剪及美化图像 6.【替换】：当鼠标停留在图像上时，会显示替换文本框中输入的说明文字。 7.【类】：为图像设置CSS样式。 8.【热点地图】：用于在一幅图像上创建多个链接热区。 9.【垂直】、【水平】边距：设置图像垂直方向和水平方向上的空白间距。 10.【低解析度源】：指定在载入主图像之前应该载入的图像。 11.【边框】：设置图像边框的宽度，单位为px（像素），默认无边框。 12.【对齐】按钮：设置图像水平方向显示位置。 13.【对齐】下拉列表：对齐同一行上的图像和文本。 14.【折叠】按钮：可以展开和折叠属性面板。 3.2 图形图像及其常用设置 3.2.3 插入图像占位符 网站能够让用户免费访问，很大程度上依赖于广告来支撑成本。网页设计人员有时并不需要动手设计广告，只需给广告留下位置，等到专业设计师把广告设计完成，直接插入即可，这样可以很大程度上提高网站的开发效率。这个位置可以通过图像占位符来实现。 3.2 图形图像及其常用设置 3.2.4 插入鼠标经过图像 鼠标经过图像也称“翻转图像”是当用户的鼠标指针经过时产生某种变化的图像，同时还可以在图像内加入链接，常用于点击时打开另一个网页的按钮。 3.3 动画及声音及其常用设置 3.3.1 插入SWF动画 3.3.2插入Flash按钮 3.3.3插入Flash文本 www.1ppt.com 3.3 动画及声音及其常用设置 3.3.4插入图片查看器 可以使用插入图片查看器的方法实现多张图片的循环播放，具体方法如下： 1.双击打开文件，光标在页面行首定位，选择【插入记录】—【媒体】—【图像查看器】命令，打开【保存flash元素】对话框 2.设置flash保存的路径和文件名，单击【保存】按钮，此时会自动在页面中生成一个swf文件。对应该文件，在右侧打开一个FLASH元素面板，如右图所示进行设置： 3.3 动画及声音及其常用设置 3.3.5插入视频及音频 网络中常见的视频格式有MPEG、AVI、WMV、RM和MOV等。 网络中常用的音频格式有MIDI、MP3和RA等。 设置视频或音频文件的属性如右图： 3.4 表