Dreamweaver+FlashCS6第5章--为网页添加元素课件.pptx

1、第5章 为网页添加元素普通高等学校计算机教育“十二五”规划教材网页设计与制作立体化教程（Photoshop+Dreamweaver+Flash CS6双色微课版）25.1 课堂案例：美化“酒店预订”网页内容导航5.2 课堂案例：链接“婚纱礼服”网页5.3 项目实训5.4 课后练习课堂案例：美化“酒店预订”网页为了丰富网页的内容，可为网页添加漂亮的图片或多媒体对象，并对这些图片和多媒体对象进行编辑。本例将对酒店预订网站的首页进行美化，完成后的参考效果如图所示。美化网站首页效果5.1.1插入与编辑图像图像是一个网站中必不可少的元素，设计出图文并茂的网页能提高浏览者的视觉效果，增加浏览量。下面将介绍

2、在“jdyd.html”网页中插入与编辑图像的方法，其具体操作如下。（1）选择图像（2）设置图像替换文本5.1.1插入与编辑图像（3）插入网页中的图像（4）调整图像尺寸5.1.2优化图像图像的效果在网页中呈现出来的感觉比预期差时，可利用Dreamweaver提供的美化和优化功能对图形做进一步处理。插入图片确认设置5.1.2优化图像调整亮度和对比度调整裁剪范围裁剪后的图像效果调整图像品质优化图像后的效果5.1.2优化图像添加其他图像后的效果选择表格并单击按钮新建CSS规则5.1.2优化图像设置表格背景图片查看效果5.1.3创建鼠标经过图像鼠标经过图像是指在浏览网页时，将鼠标指针移动到图像上，会立

3、刻显示出另一种效果，当鼠标指针移出后，图像又恢复为原始图像。浏览图像选择原始图像5.1.3创建鼠标经过图像设置鼠标经过图像鼠标经过图像的效果5.1.4插入Flash动画网页上常见的动态闪烁的文字、图片，以及轮播广告等对象基本上都是SWF动画，在Dreamweaver中可以很方便地插入该对象。（1）选择SWF动画（2）选择原始图像（3）设置SWF动画5.1.5添加背景音乐通过添加背景音乐的方式在网页中添加音乐，可在打开页面时自动播放音乐。（1）选择标签（2）设置背景音乐145.1 课堂案例：美化“酒店预订”网页内容导航5.2 课堂案例：链接“婚纱礼服”网页5.3 项目实训5.4 课后练习课堂案例

4、：链接“婚纱礼服”网页老洪告诉米拉，学会了制作单个网页后，还需要学会使用超链接将单个网页链接起来，组成完整的网站，因此老洪让米拉练习为婚纱礼服网站设置超链接，使网页灵活起来。完成后的参考效果如图所示。链接“婚纱礼服”网页效果5.2.1认识超链接1.超链接的组成（1）访问方案（4）路径（2）服务器（3）端口（5）文件（6）锚记5.2.1认识超链接2.超链接的种类相对链接绝对链接文件链接空链接电子邮件链接锚点链接5.2.2插入文本超链接文本超链接是网页中使用最多的超链接。下面在“xqy.html”网页中创建文本超链接。（1）选择文本（2）选择链接文件（3）完成超链接的创建5.2.2插入文本超链接（

5、4）修改超链接样式（5）修改超链接文本颜色5.2.3创建空链接空链接不产生任何跳转的效果，一般为了统一网页外观，会为当前页面对应的文本或图像添加空链接。（1）添加空链接（2）空链接效果5.2.5创建热点图片超链接热点图片超链接是一种非常实用的链接工具，它可以将图像中的指定区域设置为超链接对象，从而实现单击图像上的指定区域，跳转到指定页面的功能，其具体操作如下。（1）创建超链接（2）选择网页文件5.2.4创建图像超链接图像超链接也是一种常用的链接类型，其创建方法与文本超链接类似，其具体操作如下。（1）选择图像（2）指定链接的网页5.2.6创建锚点超链接利用锚点超链接可以实现在同一网页中快速定位的

6、效果，这在网页内容较多的情况下非常有用。（1）命名锚记（2）命名其他锚记5.2.6创建锚点超链接（3）输入锚点链接（4）创建其他锚点链接5.2.7创建电子邮件超链接在网页中创建电子邮件超链接，可以方便网页浏览者利用电子邮件给网站发送相关邮件。（1）选择文本并输入链接地址（2）电子邮件超链接效果5.2.8创建外部超链接外部超链接指链接到其他网站网页中的链接，这类链接需要完整的URL地址，因此需要通过输入的方式来创建。（1）选择文本并输入地址（2）查看效果5.2.9创建脚本链接脚本链接的设置较为复杂，但可以实现许多功能，让网页产生更强的互动效果。285.1 课堂案例：美化“酒店预订”网页内容导航5

7、.2 课堂案例：链接“婚纱礼服”网页5.3 项目实训5.4 课后练习5.3.1制作“科技产品”网页本实训的目标是制作“科技产品”网页，通过插入Flash文件、图像、图像占位符来直观地展示网页中的内容，并对图像进行编辑，最后输入文本。1实训目标 插入SWF文件 插入图片5.3.1制作“科技产品”网页在网页中添加的图像格式非常多，但需要注意的是，能在网页中使用的格式只有JPGE、GIF、PNG。2.专业背景3.操作思路 插入图像占位符5.3.2制作“订单”网页本实训的目标是制作“订单”网页，主要包括文本、图片、电子邮件、空链接等操作，并通过页面属性设置来设置超链接的属性。1实训目标 设置文本和空链

8、接5.3.2制作“科技产品”网页订单类的网页多用于有购物类的网站，需要将用户选择的物品添加相关的超链接，便于用户查看和对比，这类网页添加的超链接一般是文字超链接和图片超链接，并且最好设置超链接的样式。2.专业背景3.操作思路5.3.2制作“科技产品”网页 设置电子邮件链接 设置链接属性345.1 课堂案例：美化“酒店预订”网页内容导航5.2 课堂案例：链接“婚纱礼服”网页5.3 项目实训5.4 课后练习练习1：制作“服装”网页要求操作如下。l打开“index.html”网页，通过插入标签的方法在其中插入背景音乐“music.mp3”。l在导航文本上方选择【插入】/【图像】菜单命令插入素材文件“

9、top.jpg”。l在下方的位置插入图像占位符（可只插入一个图像占位符，然后通过复制与粘贴的方法来设置其他的图像，最后在图像下方输入并设置文本的格式）。练习2：制作“产品介绍”网页要求操作如下。l打 开“tea.html”素材网页，选择页面左侧的图片文件，在“属性”面板中的“链接”文本框中输入“pic.html”。然后为右侧的图片设置相同的链接文件。l选择文本“功效”，在“属性”面板中的“链接”文本框中输入“effect.html”，然后为下方的“更多”文本设置相同的链接文件。l选择文本“营养价值”，在“属性”面板中的“链接”文本框中输入“nutrition.html”，完成后保存网页并预览效果。37Thank you!海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务