第四章网页元素的应用.ppt

第4章 网页元素的应用 学习在网页中添加文本、图像、超级链接等元素 本章提纲 本章内容 4.1 网页文本的应用 4.2 网页图像和Flash对象 4.3 超级链接 4.4 综合实例 本章重点与难点 文本 图像 创建超级链接 4.1 网页文本的应用 文本的插入 设置文本属性 文本滚动特效 水平线的插入 日期和版权的插入 一、 文本的插入 1.插入普通文本 1)方法 直接插入 复制粘贴 导入：文件|导入 2）文本的换行： Shift+Enter（HTML标记br） 3）文本的分段：按Enter键 2.插入特殊字符 方法1：在“插入工具栏”的“文本”选项卡中选择 方法2：单击“插入”|“HTML”|“特殊字符” 方法3：复制/粘贴 不换行空格:在文档中若要输入多个连续的空格效果,可单击”不换行空格”按钮；在全角输入法下连续按空格键；Ctrl+Shift+Space键；在代码 视图中输入多个nbsp 二、设置文本属性 文本属性即文字的大小、字形、颜色、段落等格式 1.标题 标题1~标题6（从大到小） HTML标记为hn…/hn 2.字体 设置字体：先添加字体才能选择字体 设置粗体/斜体 3.字体大小 4.字体颜色 5.段落 段落： 按Enter（HTML标记P……/P） 对齐方式 缩进与凸出 项目符号 三、文本滚动特效 文本滚动即让文本在页面中上下或左右运动的效果 1.滚动标记码 marquee behavior=“滚动方式” direction=“滚动方向” width=“m” onmouseover=“this.stop()” onmouseout=“this.start()” loop=“n” scrollamount=“v” scrolldelay=“x” …… /marquee 2.说明 marquee……/marquee:文字滚动的标记 省略号处为滚动的文本 Behavior:文字滚动的方式值如下 Alternate:来回运动 Scroll:向一个方向运动 Slide：文字到字幕边框时停止运动 滚动字幕代码说明 Direction：滚动方向，值如下 Down:由上往下 Left:由右往左 Right:由左往右 Up:由下往上 width，height:文本运动范围的宽度与高度 Onmouseover：鼠标移到滚动文本的事件，this.stop() 停止 Onmouseout：鼠标移出滚动文本的事件，this.start()—开始 Loop：滚动次数，n——数字，-1表示无限次 Scrolldelay:滚动文本停留的时间,单位”毫秒”,x——数字 Scrollamount:运动速度，v——数字（0静止） 3.设置方法 滚动文本的设置 切换为代码视图 定位光标到滚动文本的第一个字符前 输入滚动标记代码 注意：滚动标记代码可以根据需要选择使用，不一定全部输入。 四、水平线和日期版权的插入 1.水平线的插入 水平线用来分隔网页标题和正文 定位光标，插入面板|HTML|—— 设置属性 2.日期对象 打开”插入日期对话框“：“插入”|“日期” 选择日期时间格式 确定 3.插入版权 定位光标 输入 版权信息：Copyright?年月日公司名称All Rights Reserved 如:Copyright ?2009创意工作室 All Rights Reserved 4.2 网页图像和Flash对象 一、图像文件的类型 二、图像的插入 三、设置对象属性 1.选中图像 2.在属性面板中设置各属性 属性面板中的属性 四、Flash对象的插入 一、网页中图像文件的类型 1．GIF格式 采用无损压缩，图像不失真 体积（文件容量）小 ，下载速度快, 最多可用256色 适合制作徽标、图标、按钮和其他颜色风格比较单一的图片 支持动态图 2．JPEG格式 采用有损压缩，相当于GIF文件的1/4大 适合制作照片 可用上百万种颜色 压缩比例可调整 不支持隔行、透明显示和动态图 3．PNG格式 有两种类型：PNG-8和PNG-24 支持Alpha通道，透明度可任意更改,可呈现半透明效果 PNG-8有256色，PNG-24有1600万种颜色 浏览器版本要求高,不支持动画 二、图像的插入 1.网页图像 新建一HTML文档，定位光标到插入点 打开“选择图像源”对话框 菜单命令：“插入”|“图像”命令 单击图像按钮 拖动图像文件到页面的指定位置 选择图像的路径名，单击“确定”按钮 在询问“是否”将图片复制到当前站点文件夹中时单击“是”按钮 2. 插入图像占位符 定位光标 单击：“插入”|“图像”|“图像占位符”命令 设置图像占位符的名称、宽度、高度、颜色 输入替换文本 三、图像属性 图像：显示和修改图像的名称，脚本中