《网页设计与制作 项目式 教学课件 ppt 作者 冯文惠 田源 模块四》由会员分享，可在线阅读，更多相关《网页设计与制作 项目式 教学课件 ppt 作者 冯文惠 田源 模块四（30页珍藏版）》请在金锄头文库上搜索。
1、模块四,编辑网页元素,学习目标,1、熟练地插入文本及列表； 2、熟练地在文档中插入图像、轮转图和Flash动画等； 3、使用图文混排技术设置图像和文本的对齐方式。 4、了解超级链接的基本知识 5、掌握给文字或图片添加链接的方法。,任务1,在网页中使用文本和列表,任务导入,要求制作一个网页介绍新产品，对新产品做一个排序，并对产品的特点、烹饪方法等做介绍，整个页面排列整齐，层次分明，效果如图4-1所示,知识指导,一. 插入文本 1.方法： 直接将文本键入页面； 从其他文档复制和粘贴文本或从其他应用程序拖放文本； 还可以从其他文档类型导入文本或超级链接 2.类型 ASCII文本文件、RTF文件和Mi
2、crosoft Office文档,二. 文本的属性 1基本样式设置 包括：格式、字体、大小、颜色、加黑和倾斜等 举例：,2段落属性设置 主要包括对齐方式、缩进与凸出等 设置对齐方式 缩进与凸出,三. 列表的使用 列表是指将具有先后顺序或相似特性的几行文字进行对齐排列。 1列表的实现 创建方法（二选一） 执行“格式”“列表”“编号列表”命令 单击属性面板的“HTML”分类上的“编号列表”按钮 结束方法（二选一） 连续按两次【Enter】键 再次单击编号列表按钮即可 创建嵌套的列表的方法 选择要缩进的某些项， 然后单击文本缩进按钮,2更改列表的属性 （1）定位 （2）单击属性面板的“列表项目”按钮
3、 （3）修改相应参数,四. 特殊字符（二选一） 插入的方法： 执行“插入”“HTML”“特殊字符”命令实现的 切换到“代码”视图，在需要插入特殊字符的代码中输入“&” 特殊的使用方法： 空格的输入（中文全角/在代码视图下输入&） 换行（shift）和段落（ ）的输入,任务2,在网页中使用多媒体对象,任务导入,要求制作一个公司简介页面，在页面中插入文字、图像、SWF动画等，效果如图4-17所示,知识指导,一图像 1. 图像文件类型 GIF图像：体积小，下载速度快 ；颜色少 JPEG图像 ：体积小，颜色多；不支持透明 PNG图像：颜色多，支持透明； PSD图像：效果好；体积大,2. 插入图像对象
4、（1）单击“插入面板”上的 按钮； （2）在“选择图像源”对话框中选择要置入的图片； （3）出现“是否将图片拷贝到本地文件夹下”的信息框时，单击“是”； （4）设置图片文件保存的路径。,提示：在网页中插入一幅图像时，不是真的把图像插入到文档中，而是一个引用。为了保证该引用正确，图像文件必须位于当前的站点中。,3. 设置图像属性 改变大小 拖动图像上的控制点； 或在属性面板上输入图像的尺寸； 恢复图像的原始尺寸 提个醒： 尽量不要在DW中直接修改图像大小，应在图像编辑软件中修改后再加载到网页上。 对齐 与普通的文本对齐相比，增加了更多的对齐选择，其中的左和右方式可以使图文混合排列。,二. 鼠标经
5、过图像 特点： 当浏览者将鼠标指针移动到某个图像上时，图像就会发生变化；而当移开鼠标指针时图像又会恢复原状。 方法： （1）单击“插入面板”上的“鼠标经过图像”按钮； （2）设置“原始图像”和“鼠标经过图像”,三. Flash动画 1文件格式 FLA文件（.fla）是flash的源文件 SWF文件（.swf）是FLA文件的编译版本 FlashPaper 是一个工具，快捷地将Word和PPT等文档转换成SWF FLV文件是包含经过编码的音频和视频数据,2插入Flash动画 方法（其一） “插入”面板的“常用”选项卡中的“媒体”列表中，单击SWF按钮 执行“插入”“媒体”“SWF”命令。 3设置F
6、lash动画对象的属性,四其他对象 1创建网站相册 方法： （1）保存将要显示的所有图像。 （2）执行“命令”“创建网站相册”命令 （3）在对话框中添加相册标题、副标信息、选择源图像文件夹和目标文件夹等其他属性。 2. 水平线 方法（其一） 在“插入”面板的“常用”选项卡中单击“水平线”按钮； 执行“插入”“HTML”“水平线”命令,3日期对象 方法 （1）在“插入”面板的“常用”选项卡中选择“日期”按钮，或者执行“插入”“日期”命令 （2）选择插入的星期格式、日期格式及时间格式,任务3,在网页中使用超级链接,任务导入,制作如图4-29包含有图像的热区链接、鼠标经过图像链接、导航条链接以及锚点
7、链接的网页,知识指导,一超级链接的概念 1超级链接的分类 内部链接：链接到本站点中的其他文档。 外部链接：链接到本站点以外的其他文档。 E-mail链接：发送E-mail。 链接到特定“锚记”：这种链接允许跳转到同一页或其他页的特定位置。 虚拟链接（Null链接）及脚本链接：它允许用户附加行为至对象或创建一个执行JavaScript代码的链接。,2. 绝对路径与相对路径 绝对路径：该路径提供了链接文档的完整URL地址，其中包括所使用的协议（如http）。 例如，http:/ 当需要链接到其他服务器的网页时，应采用绝对路径。 文档相对路径：本地链接时最常使用的链接方式 例如：using/inde
8、x.html 根目录相对路径：该路径为从站点根文件夹到文档的路径，该方式在实际应用中很少被采用。,二. 创建通用链接 方法： （1）选择文本或图像等对象； （2） 在“属性”面板中，执行如下操作之一： 直接在“链接”文本框中输入路径或完整的URL地址 单击“链接”文本框右侧的“浏览文件”按钮，选择链接文件 单击“指向文件”图标，将其拖到“文件”面板中的某个文件 （3）从“目标”下拉列表中选择链接文档打开的位置 _blank：将链接的文件载入一个新浏览器窗口中。 _parent：将链接的文件载入含有该链接框架的父框架集或父窗口中。 _self：将链接的文件载入该链接所在的同一框架或窗口中 _to
9、p：将链接的文件载入整个浏览器窗口中,三. 创建图像热点链接 在一幅图像的不同部分设置不同的超级链接 步骤： （1）选择图像 （2）在“属性”面板中单击某一热点工具 “指针热点”：可以在图像上移动热点，改变热点的大小等。 “矩形热点”或“椭圆形热点”：创建矩形或椭圆形的热点，使用方法是在图像上单击并拖动鼠标。 “多边形热点”：创建不规则形状的热点，使用方法是在图像上顺时针或逆时针单击，在结束的位置双击。 （4）选择建好的热点，在“属性”面板设置链接,四. 建立链接到文档中命名位置的链接 前提：当网页篇幅较长时 ，一屏显示不完 1创建“锚记”位置 步骤： （1）将光标定位在一个位置。 （2） 执
10、行“插入”“命名锚记”命令，或单击“插入”面板的“命名锚记”按钮。 （3）在“锚记名称”文本框中输入锚记名称。 注意：在命名锚记时可以使用字母、数字、下划线等，但不能使用汉字。,2设置到“锚记”位置的链接 方法（选其一） 要设置到“锚记”的链接，只需在选择链接对象后，在“属性”面板中的“链接”文本框中输入“#锚记名称”即可。 选择文字或图像后，直接在“属性”面板中单击“链接”文本框右侧的“指向文件”图标，然后将其拖至“锚记” 。 在选择文字或图像后，按住【Shift】键，然后单击并拖动光标至“锚记”来创建链接。,五. 创建E-mail链接 当浏览者单击该链接时，系统将自动启动计算机中的邮件发送程序，并将邮件地址放在“收件人”一栏。 方法一： （1）选择准备作为邮件链接的文字 （2）执行“插入”“电子邮件链接”命令，或单击“插入”面板“电子邮件链接”按钮 （3）在对话框的“文本”文本框中输入邮箱地址 方法二： 在“属性”面板中的“链接”文本框中输入“mailto：邮件地址”,六. 其它链接 1虚拟链接 方法： 选定文字或图像后，在属性面板的“链接”文本框中输入一个“#”即可 2脚本链接 方法： 在属性面板的“链接”文本框中输入Javascript加上代码或函数调用 3下载文件链接 方法： 同普通链接的创建方法一样，下载文件链接选择的是一个非网页文件做为目标文件,
