网页设计326331.pptVIP

第3章第3章 网页元素的基本操作 ●掌握文本的插入和格式化 ●掌握图片的插入和美化 ●掌握多媒体文件的插入方法 本章学习知识点 上一张 下一张 返回 本章内容目录 3.1 文本处理 3.2 图片处理 3.3 多媒体处理 3.1 文本处理 3.1.1 在网页中添加文本 3.1.2 美化和格式化文本 3.1.3 使用列表 3.1.4 使用特殊字符 3.1.5 插入日期 3.1.6 使用水平线 3.1.1 在网页中添加文本新建网页或者打开网页的时候，鼠标光标在编辑窗口中，此时可以直接输入文本内容，如图3-1所示。 图3-1 输入文本在输入文本时，有两种换行方法：一是直接按下Enter键，分段换行，效果等于开始一个新段落，新输入的文本与上一行文本之间有行间距，如图3-2所示；另一种是按下Shift＋Enter组合键，不分段换行，在新的一行中输入的文本与上一行中的文本之间没有行间距，如图3-3所示。 图3-2 分段换行 图3-3 不分段换行在通常的情况下，Dreamweaver 8不允许连续输入多个空格，只能输入一个空格，即无论按下多少次空格键，都只插入一个空格。要输入连续的多个空格，可以连续按Shift＋Ctrl＋SPACE组合键输入，还可以在输入法状态提示框中单击 按钮使其变为 ，即把“半角模式”改为“全角模式”，此时就可以按空格键连续输入多个空格了。 3.1.2 美化和格式化文本文本是大多数网页的主体，文本的外观格式是否美观大方很大程度的影响着网页的整体外观效果，可以通过文本的“属性”面板对文本进行属性设置，文本的“属性”面板如图3-4所示。 图3-4 文本的“属性”面板 3.1.3 使用列表列表常用于将一组信息以某种格式显示在页面上，使内容更明朗直观。Dreamweaver 8中提供了以下3种列表形式： 1．项目列表 2．编号列表 3．定义列表 1．项目列表项目列表也称无序列表，项目之间没有次序，项目之前使用符号标识，如图3-5所示。 图3-5 项目列表 2．编号列表编号列表用于列举显示一组有次序的内容，项目前通常使用数字作为标识符，可以使用罗马数字、英文字母和阿拉伯数字，如图3-6所示。 图3-6 编号列表 3．定义列表定义列表没有任何标识符，它把用户输入的文本以缩进的形式表现次序关系，常用来做词汇的注释或者术语解释等说明类文字中，如图3-7所示。 图3-7 定义列表 3.1.4 使用特殊字符在制作网页时，常常需要输入一些特殊字符，如注册商标符号?、版权符号?和英镑符号￡等。将鼠标光标定位至要插入特殊字符的位置，选择主菜单“插入”→HTML→“特殊字符”命令，在弹出的菜单中选择相应的命令即可插入特殊字符。通常都是通过“文本”插入栏来插入特殊字符，如图3-8所示。 图3-8 “文本”插入栏单击“文本”插入栏最右侧的“字符”按钮 ，在弹出的菜单中选择相应的命令即可插入相应的特殊字符，如右图所示。如果需要的特殊字符没有在菜单中，还可以选择菜单中的“其他字符”命令，打开“插入其他字符”对话框，如图3-9所示。 图3-9 “插入其他字符”对话框 3.1.5 插入日期在Dreamweaver 8中，可以直接插入日期，选择“插入”→“日期”命令，打开“插入日期”对话框，如图3-10所示。插入日期的效果如图3-11所示 图3-10 “插入日期”对话框 图3-11 插入日期 3.1.6 使用水平线网页中的各种元素是分块布局的，有一定的层次感才会比较美观，便于用户浏览。使用水平线可以方便的将不同的内容分隔开。将鼠标光标定位至要插入水平线的位置，选择主菜单“插入”→HTML→“水平线”命令，或者单击插入栏中的HTML标签切换到HTML插入栏，在HTML插入栏中单击“水平线”按钮 ，即可插入一条水平线。选中水平线，在水平线的“属性”面板中可设置水平线的属性，如图3-12所示。 图3-12 水平线的“属性”面板 3.2 图片处理 3.2.1 了解网页图片 3.2.2 在网页中添加图片 3.2.3 设置图片属性 3.2.4 图像占位符 3.2.5 鼠标经过图像 3.2.1 了解网页图片网页中的图片受网络速度的影响，不仅要求图片本身的质量，还对图片的下载速度有很高的要求，过久的等待是大多数人所不能忍受的。对于图片比较多的网页，每个图片大小最好不要超过10K，图片较少的也最好限制在50K以下。通常在网页中使用以下3种格式的图片： 1． GIF：即Graphics Interchange Format。 2． JPEG：即Joint Photographic Group。 3． PNG：即Portable Network Graphic。GIF图像常用于对色彩要求不高的平面