《Dreamweaver 8精品教程》教学课件 第9章
- 格式:ppt
- 大小:652.00 KB
- 文档页数:10


第9章 制作网页特效
在制作网页时,为了丰富网页内容,可以为网页添加特殊效果。这样制作出来的网页,不但新颖,有风格,而且也增加了网站访问量。制作网页特效主要应用Dreamweaver
8中自带的行为以及在网页中添加JavaScript代码来完成。行为丰富了网页的交互功能,它允许访问者通过与页面的交互来改变网页内容,或者让网页执行某个动作,Dreamweaver 8自带的行为种类多样、功能强大,而且这些行为都是开放的。
JavaScript语言在实际设计网页的过程中也非常有用,运用它可以设计出一些丰富多彩的网页。JavaScript的出现,使得信息和用户之间不仅是显示和浏览的关系,而且也实现了实时的、动态的、可交互式的表达。本章将详细介绍一些相关的行为和JavaScript对文字、图像等网页对象的操作。
本章学习要点:
行为概念
行为的应用
JavaScript概念
JavaScript的操作
248 Dreamweaver 8网页制作与网站开发标准教程
9.1 行为概述
行为是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。使用行为可以使访问者与网页之间产生一种交互,来改变页面或触发任务。Dreamweaver 8中的行为是一个带有面向对象设计思想的工具。它事实上是由预先编写好的JavaScript代码构成。一个行为是由一个事件和一个动作构成。任何一个动作都需要一个事件激活,两者相辅相成。动作是一段已编辑好的JavaScript代码,而这些代码的特定事件是在被激发时执行。
9.1.1 行为概念
9.1.2 行为面板
表9-1 行为面板中各按钮名称及功能描述
图标 名称
功能描述
显示设置事件 显示添加到当前文档的事件
显示所有事件 显示所有可用的事件
添加行为 选择快捷菜单中的选项添加行为
删除事件 从当前动作列表中删除选中的行为
增加事件值 动作项向前移,改变执行顺序
第9章 Dreamweaver8.0基础实验
实验一 在Dreamweaver8.0中建立一个站点
一、实验目的
1、掌握Dreamweaver8的操作界面。
2、掌握站点创建的方法。
3、能够自定义工作环境。
4、进行一个简单的网页设计。
二、实验内容
建立一个以自己名字命名的站点,该站点包含三个文件夹,images,music,flash,四个网页,分别为index.html,word.html,table.html,picture.html,设置主页index.html的标题为“本站主页”。其中index.html页面效果图如9-1-1所示。
图9-1-1 index.html页面效果图
三、实验步骤
1、创建本地站点步骤:
(1) 打开DREAMWEAVER,选择菜单下[站点]/[管理站点]|/[新建]/|[站点]命令.弹出如图9-1-2所示对话框。
(2) 在弹出“站点定义”对话框的“高级”标签中输入如下信息。
图9-1-2 “站点定义”对话框
(3) “站点名称”——输入站点名称如“myweb”。
(4) “本地根文件夹”——选择本地文件夹如“D\myweb”
(5) “自动刷新本地文件列表”——选中是否每次拷贝文件到本地站点时都自动更新本地文件夹列表,选中该选项。
(6) “默认图像文件夹”——选择图像所放置的文件夹如“‘D\myweb\images”
注意:图像文件夹一定要在站点文件夹下,且一般命名为image或images。
(7) “HTTP地址”——输入实用的完整网站的URL,以便Dreamweaver能检验使用绝对URL网站链接。
(8) “缓存”——选择是否创建一个缓存以提高链接和网站维护任务的速度。选中该选项。
(9) 设置完毕,点击“确认”按钮。
(10) 在Dreamweaver的工作界面右侧“浮动面板组”中的“文件”面板中的“文件”标签下就能看到刚才新建的站点myweb,如图9-1-3所示。
中等职业学校教案
教 研 室:
课程名称:Dreamweaver 8中文版网页制作
任课教师:
XXXX学校教务处 制 中等职业学校教案
第9次课 讲授4学时 实践4学时
章 节 第9章 使用CSS和Div标签
讲授主
要内容 1. CSS样式的类型和属性。
2. 创建和应用CSS样式的方法。
3. 插入Div标签的方法。
4. 使用CSS样式与Div标签进行网页布局的方法。
重 点
难 点 创建和应用CSS样式的方法
使用CSS样式与Div标签进行网页布局的方法
要求掌握
的知识点 【CSS样式】面板、CSS样式的类型、定义CSS样式的方法、CSS的【类型】等属性对话框、创建超级链接的高级CSS样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式、插入Div标签、使用CSS样式与Div标签进行网页布局
1、教学思路
2、教学手段
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
作业布置 作业:一~三
主 要
参考资料
备注
课程教案
授课内容
项目四 制作文化公司网站
授课班级 授课学时 12课时
教学方法与手段 讲授法、演示法、讨论法。多媒体教学
项目内容 广州皇翼文化发展有限公司是一家拥有丰富资源的新生代文化传播公司,本公司主要从事舞台艺术、演艺演出、展览展示、活动推广等业务。本项目的工作内容就是为该公司建设网站,公司要求如下:
1. 简洁美观的全版欢迎页面。
2.内容页可以使用色彩对比强烈的风格,少量文字版面内容,以图片显示的版块为主。
3. 图片展示是重点,在访客查看图片的时候,图片要有特色的显示链接效果。
4. 网站栏目之间有明确的链接。
要完成上述任务要求,网站制作必须应用超链接和行为技术。超链接是网站中最重要的组成部分,它指向要访问的目标文档或其他元素,从而使一个网页可以跳转到另一个网页或打开“下载文件”对话框等。利用行为可以实现浮动广告、滚动字幕,以及收缩、放大图像等效果。
教学目标 学生通过本项目的学习,能:
1、 熟练掌握设置各种超链接的方法
2、 掌握跳转菜单的设置方法
3、 熟练掌握各种行为的设置方法
教学重点与难点 教学重点:
1、熟练掌握设置各种超链接的方法
2、掌握跳转菜单的设置方法
3、熟悉“行为”面板
教学难点:
熟练掌握各种行为的设置方法
教学过程设计 项目效果
【任务一】为首页和子页设置链接——应用超链接
超链接包括很多种,最常用的是常规超链接,另外还有图片链接、下载链接、电子邮件链接等。
(一)设置常规超链接
常规超链接包括内部超链接和外部超链接。内部超链接是指目标文件位于站点内部的链接;外部超链接可实现网站与网站之间的跳转,也就是从本网站跳转到其他网站。
1. 内部超链接
内部超链接的设置非常灵活,在选中要设置超链接的文本或图像后,可以在“属性”面板上的“链接”编辑框中直接输入要链接到的网址或网页名称;也可以通过单击“属性”面板上“链接”编辑框后的“浏览文件”按钮,在弹出的“选择文件”对话框中选择要链接到的文件。