第一篇:Dreamweaver教学大纲
www.xiexiebang.com
Dreamweaver3.0教学大纲
课程名称:边用边学Dreamweaver3.0 总学时:30
授课学时:14
实验学时:16
注:以一讲为一授课学时,实验学时不少于授课学时
使用教材:甘登岱、周水平主编,《边用边学Dreamweaver3.0》,人民邮电出版社,2000 先修课要求:Internet基础,边用边学Fireworks,边用边学Filsh,边用边学Windows 9.x等 教学目的:使学生通过本课程的学习,掌握Dreamweaver3.0的使用方法,学会使用Dreamweaver3.0制作Web网页的技术。
教学内容和教学要求:
第一章 初识Dreamweaver 学习指南:
学习软件的安装、设置过程。学习重点:
Dreamweaver3.0的人—机交互界面的组成与使用方法。学习难点:
理解站点、网站、网页及网页属性的概念。教学要求:
掌握Dreamweaver3.0的使用界面中各组成元素的名称与功能; 掌握打开与关闭工具窗口的方法;
理解站点、网站、网页及网页属性的概念; 了解Driamweaver3.0的汉化方法。
第二章 网页制作入门
学习指南:
要求先修Internet基础课。学习重点:
本章通过一个网页制作示例,比较全面的介绍了Web站点的创建过程,概括的介绍了使用Dreamweaver制作网页的主要方法。学习难点:
理解站点、网站、网页及网页属性的概念; 站点管理器的使用。教学要求:
掌握创建Web站点的基本方法与步骤;
熟悉网页制作过程中所涉及的一些基本概念与常识。
www.xiexiebang.com 第三章 站点管理
学习指南:
先修Internet基础,计算机网络基础。学习重点:
本章重点介绍了站点的创建、站点地图的使用以及文件的下载、上传与同步更新。学习难点:
站点管理器的使用。教学要求:
了解通过站点管理器规划、创建站点的方法与站点设置参数的意义和设置方法;
熟悉站点管理器的用途,学会利用站点地图查看、管理各网页之间的超链接关系;
掌握通过站点管理器发布站点的方法与上传、下载与同步更新站点内容的方法。
第四章 页面的基本设置
学习指南:
先修Internet基础课和Word2000。学习重点:
本章主要介绍制作网页的一些基本常识,例如:文档的创建、打开与保存,标尺与网格的使用,捕捉与辅助设计图片的应用等。
学习难点:
理解属性面板的概念。教学要求:
了解网格、捕捉与辅助设计图片的功能以及打开、关闭与设置其特性的方法; 掌握系统属性及网页属性的设置方法,及各设置参数的作用。
第五章 超链接与导航
学习指南:
先修Internet基础课。学习重点:
本章全面介绍了网页设计中使用的几种超级链接设置的方法与步骤,包括:E-mail,书签,脚本,跳转菜单和导航条的设置方法。学习难点:
理解导航条与跳转菜单 教学要求:
了解建立超级链接各目标参数的意义,掌握设置超级链接的方法; 掌握制作超级链接、E-mail链接、书签等形式的超级链接;
www.xiexiebang.com 掌握导航条与跳转菜单的特点与用法。
第六章 文本格式的设置与样式的运用
学习指南:
先修Internet基础课和Word2000。学习重点:
本章主要介绍手工设置文本格式的方法,文本的断行与缩进,以及如何利用HTML样式和CSS样式格式化文本的方法。学习难点:
使用HTML样式和CSS样式格式化文本 教学要求:
要求重点了解制作网页时的断行方法, 掌握使用HTML样式和CSS样式创建、编辑网页的方法。
第七章 使用水平线、日期对象及图片
学习指南:
先修Internet基础和边用边学Fireworkse等。学习重点:
本章全面介绍了在网页中插入水平线、日期、图片、反转图片的方法,以及如何制作图片映像和设置图形行为。学习难点:
图片的运用。教学要求:
掌握水平线、日期、图象对象的主要属性与设置方法; 掌握图象映像、反转图片对象等的特点、用途及设置方法。
第八章 使用表格
学习指南:
先修Internet基础、Excel2000、Word2000。学习重点:
本章全面介绍了在Dreamweaver中表格的创建、调整、单元格的编辑与属性设置等操作的方法。教学要求:
掌握表格的创建、结构调整与美化方法; 熟悉表格与单元格的主要属性及其设置方法; 掌握通过表格来进行网页页面的布局方法。
www.xiexiebang.com
第九章 使用层来灵活布置网页的布局
学习指南:
先修Internet基础。学习重点:
本章全面介绍了层的概念以及层的创建与修改方法。学习难点:
图层的概念与运用。教学要求:
掌握在网页中创建、修改层和嵌套层的方法; 掌握层的属性和编辑层属性的方法; 掌握移动、删除层的方法。
第十章 使用时间线制作动态网页
学习指南:
先修Internet基础和Flish。学习重点:
本章详细介绍了时间线的创建、编辑、行为设置等内容。学习难点:
时间线和动态网页的概念。教学要求:
掌握时间线的创建与调整方法;
学会通过如何为时间线增加行为等方式来控制时间线的播放效果; 掌握利用时间线制作网页动画的方法。
第十一章 使用框架设计网页
学习指南:
先修Internet基础 学习重点:
本章全面介绍了框架网页的特点、框架网页的创建、编辑、保存与应用方法。学习难点:
制作动态网页。教学要求:
了解框架网页与普通网页之间的区别与联系;
掌握框架网页在创建、选择、设置、存储与应用方面的特点; 掌握框架结构网页的制作方法。
www.xiexiebang.com
第十二章 使用行为制作交互式网页
学习指南:
先修Internet基础。学习重点:
本章介绍了行为、事件、动作的基本概念,以及如何利用行为面板为选定的对象设置行为。
学习难点:
行为的概念。教学要求:
了解行为、事件与动作的概念;
学会利用行为面板设置控制对象的行为;
会利用系统提供的主要行为,设置网页对象的行为从而实现交互式网页的设计。
第十三章 模板和库的使用
学习指南:
先修Internet基础。学习重点:
本章介绍了模板与库元素的特点、用途、制作与使用方法,以及如何利用模板控制面板及库控制面板来管理模板与库元素。学习难点:
模板和库的概念。教学要求:
要求掌握Dreamweaver中模板与库元素的概念与作用; 了解模板的固定区域与可编辑区域的区别和用途;
了解更改模板或库元素对使用选定的模板或包含选定库元素的网页的影响; 学会通过模板和库元素创建网页的方法。
第十四章 在网页中插入表单
学习指南:
先修Internet基础,JavaScrip。学习重点:
本章全面介绍了表单的创造、编码、处理方法,以及各种表单对象的特点与使用方法。
学习难点:
理解表单、表单欲的概念。
www.xiexiebang.com 教学要求:
学会使用Dreamweaver 中应用表单设计网页的方法, 全面掌握表单的创建、编辑、处理方法,以及各表单对象的功能、特点和用途(包括:复选框、下拉列表况、按钮)的特点与使用方法。
第十五章 可以在网页中插入的媒体元素
学习指南:
先修Internet基础、边用边学Fireworks、边用边学Flish。学习重点:
本章简要介绍了可以在网页中插入的媒体元素,如:Fireworks HTML、Java Applet 小程序、Sockwave电影、Flash 电影、ActiveX控件、音频或品视频文件。
学习难点:
理解在网页中插入多媒体对象的概念。教学要求:
要求学员掌握并了解可以在网页中插入Fireworks HTML电影、Flash电影、ActiveX.控件等多媒体对象的方法。
第十六章 站点制作的综合实例
学习指南:
先修Internet基础、边用边学Fireworks、边用边学Flish。学习重点:
本章通过一个站点综合实例的练习,全面介绍了站点创建的全过程。内容包括站点目录结构的规划,各网页的创建、布局以及设置方法。要求学员通过本章的学习,学会制作包含表单的交互式网页的制作,利用Fireworks处理图片、制作按钮与导航拦等网页的创作技巧。学习难点:
理解站点、网站、网页及网页属性的概念会向网页中插入多媒体信息。教学要求:
通过本章的学习全面掌握交互式网站的制作方法。
第二篇:Dreamweaver 8教学大纲1
Dreamweaver 8教学大纲
第一节
Dreamweaver的安装
网页与网站 网页类型(ASP,JSP,PHP,HTML) 网页的基本元素(文本、图片、超级链接、动画(GIF、FLASH)、表单、音视频) 网页布局(页面标题、标识(LOGO)、导航、页眉、内容、页脚) 网页代码
第二节
工作区的设置(以后可以窗口-----工作区布局) 标题栏 插入工具栏 文档工具栏 文档窗口 状态栏 属性面板
编码工具栏、样式呈现工具栏、标准工具栏(查看-----工具栏)
第三节 文本设置与HTML
第四节
新建站点(站点-----新建站点) 编辑站点
新建文件与文件夹
对文件的复制、删除、重命名
第五节
网站制作流程:
需求分析
网页的规划设计(版式、文字、导航)
版面设计(比例关系)
字体(标题与按钮可设为其它字体,正文一般不设为其它字体) 创意(准备期、孵化期(研究、分析、新创意)、启示期、形成期、) 创意策略(目标策略、) 网页标题 文件头
META标记(编码、作者、版权等) 关键字 说明和刷新
页面属性(修改----页面属性)
文本输入与编辑(还可直接导入WORD文档) 水平线
第六节 表格操作
作用:布局与精确定位
表格(表格宽度、表格粗细、单元格边距、单元格间距等) 单元格属性 插入行与列 删除行与列
表格代码分析(rules、frame(above、below、void)) 表格美化 第七节 表格操作
第八节 表格操作
第九节 链接与导航
第十节 链接与导航
第十一节 图像与媒体
插入图像(插入——图像)或通过代码 支持图像(JPEG、GIF、PNG) 图像的属性
鼠标经过图像实例(导航栏按钮) 图像占位符 导航条
第十二节 图像与媒体
FLASH影片(
/*透明背景*/) FLASH按钮 启动外部编辑器 插入FLASH内容
第十三 框架与框架集
第十四 CSS样式表与滤镜
新建CSS样式表规则(类、标签、高级) CSS样式表的应用与修改 导出、导入CSS样式表 超链接的样式定义 样式冲突
管理CSS规则
第十五节 CSS样式表与滤镜 将样式与XML结合 CSS滤镜
第十六节 CSS样式表与滤镜 第十七节 层
导入切割的图像 下拉菜单
第十八节 行为及动态站点的设置
行为是事件和由该事件触发的动作的组合。(行为代码是客户端JavaScript代码) 事件是浏览器生成的消息
动作是由预先编写的JavaScript代码 检查浏览器版本 播放音乐 状态栏信息 交换图像
事件轴行为(打开、关闭图像)
第二十五节 站点的测试与上传 检查链接(窗口----结果)
站点键接 站点报告 目标浏览器 验证 上传
申请域名与注册空间 远程信息 宣传
登录搜索网站
与其它的网站交换链接
第三篇:《中文版Dreamweaver CS6基础培训教程》教学大纲
《中文版Dreamweaver CS6基础培训教程》教学大纲
课程介绍:
本课程是一门概念性和实践性都很强的面向实际应用的课程。
Dreamweaver CS6是由Adobe公司开发的网页设计与制作软件。Adobe公司在Dreamweaver这一软件的版本上不断升级,是为了使广大从事网页制作和网页设计工作的用户拥有性能更完善的得力工具,同时也是为了使刚刚步入设计领域的初学者能够拥有更加优秀的学习软件。
本书内容均以课堂案例为主线,通过对各案例的实际操作,学生可以快速上手,熟悉软件功能和艺术设计思路。书中的软件功能解析部分使学生能够深入学习软件功能。课堂练习和课后习题,可以拓展学生的实际应用能力,提高学生的软件使用技巧。商业案例实训,可以帮助学生快速地掌握商业网页的设计理念和设计元素,顺利达到实战水平。
培训目标: 掌握Dreamweaver CS6的工作界面和网站的建设基础 掌握文本与文档的编辑
熟练掌握插入图像和多媒体的方法和技巧 掌握网页的超链接 熟练掌握表格的使用 熟练掌握ASP的使用 掌握层的使用方法
掌握层叠样式表(CSS)样式 掌握模板和库的使用方法 掌握使用表单的方法 了解行为的使用方法
掌握网页代码的编写和修改
学习时间:
64学时。
培训内容:
一、初识Dreamweaver CS6 1.2.3.4.掌握Dreamweaver CS6的工作界面; 掌握创建网页框架的方法;
熟练掌握对站点的打开、修改、复制、删除、导入、导出等操作; 掌握网页文件头的设置;
二、文本与文档
1、熟练掌握输入文本、编辑文本和文档的方法;
2、掌握设置项目符号或编号、插入日期和特殊字符的方法;
3、了解水平线、网格和标尺的使用方法。
三、图像和多媒体
1、熟练掌握插入图像并设置图像属性的方法;
2、掌握调整图文混排效果的方法;
3、熟练掌握在网页中插入多媒体的方法
四、超链接
1、了解超链接的概念与路径知识;
2、熟练掌握文本超链接和图像超链接的创建方法;
3、掌握创建命名锚记超链接的方法;
4、了解创建热点链接的方法。
五、使用表格
1、掌握插入表格的方法及对表格的简单操作;
2、掌握网页中数据表格的导入和导出;
3、了解复杂表格的排版;
六、ASP
1、掌握ASP动态网页基础;
2、掌握ASP内置对象的操作方法。
七、使用层
1、熟练掌握创建和编辑层的一些基本操作;
2、了解应用层设计表格的方法;
八、CSS样式
1、了解CSS样式的概念,掌握其控制面板及类型;
2、熟练掌握按照CSS的类型来创建和应用多种样式。
3、了解编辑CSS样式的方法;
4、掌握CSS样式属性的多种分类,包括类型、背景、区块、方框、边框、列表、定位和扩展。
5、了解CSS过滤器的使用。
九、模板和库
1、了解资源控制面板;
2、掌握创建、编辑和管理模板的方法;
3、掌握创建和更新库文件的方法;
十、使用表单
1、熟练掌握创建表单和插入文本域的方法;
2、掌握复选框和单选按钮的应用方法;
3、掌握在表单中创建列表和菜单的方法;
十一、使用行为
1、了解行为与事件,掌握行为控制面板及行为的应用;
2、掌握常用的动作功能及实现这些功能的方法;
十二、网页代码
1、掌握使用标签库编辑器创建源代码;
2、了解使用标签编辑器和检查器编辑代码;
3、掌握几种常用的HTML标签;
4、了解脚本语言及响应HTML事件的3种方法。
十三、商业案例实训
1、掌握Dreamweaver商业案例实训的操作方法和技巧。
第四篇:dreamweaver习题
(习题包括判断题和选择题以及实验题)单元1习题:(1)判断题
1、Dreamweaver 是美国Macromedia公司开发的集网页制作与管理网站于一身的网页编辑器和开发工具。√
2、一个WEB站点至少需要一个主页(home Page),可以有其他子页(二级页面等)。√
3、网页的交互是指浏览者单击栏目、超级链接等,以及鼠标经过或放于某处时,页面会作出相应的反应。√
4、网页是指采用超文本标记语言编写的,可以在浏览器下浏览的一种文档。√ 单元2习题:(1)判断题:
1、一个超级链接链接的地址为:this.html#x11,其中x11是this.html页中的某个锚点。√
2、Dreamweaver 支持在网页中插入各种图像,简单的方法是选择Insert(插入)菜单的中的image(图像)子菜单项。√
3、×
4、采用目录与锚点结合的办法,可以实现在长的网页文档内若某网页背景颜色设置为FFFFF,则背景的颜色为黑色。部跳转的功能。√
5、在网页设计过程中,有时需要将几个单元格进行合并,一般在Dreamweaver中操作方法是,拖动鼠标,将需要合并的单元格选中,然后点击属性工具栏中的“合并单元格”。√
6、选中表格后,Dreamweaver 中即可显示表格属性,即可对表格的对齐方式、高度、宽度,边框样式等进行设置。√7、8、在Dreamweaver中,非连续的单元格也可直接合并。× 对于框架网页的保存方法是,若要保存所有框架页,则在菜单项里选择“file(文件)”菜单下的“save(保存)”即可。×
9、一幅图像在网页中是作为一个独立的对象插入的,但是如果情况需要,则可以一幅图象中设置多个“对象点”完成特定的功能,这个就是图像热点。√
10、若需要对文件进行超级链接设定,只需选中文字,鼠标右键打开属性中在Link(链接)项中输入需要链接的URL即可。√
(2)不定项选择题:
1、在网页中录入文档的方法有: abc A)直接录入法。
B)从已有的文档中通过剪贴板复制剪切粘贴的方法。
C)修改录入的文档的方法。D)以上均不正确
2、关于Dreamweaver的操作界面,下列说法正确的是:abd A)工具箱包含了常用的工具,制作网页时用到这些工具。B)对象属性浮动工具栏,对网页制作时选择的对象相适应,用来设置对象的属性。C)状态栏,是表示出被编辑网页的效果。
D)状态栏,是表示出被编辑网页中正在被编辑的标记名。
(3)实验习题1:创建网站与网页布局
一.创建一个个人网站
1.创建一个本地站点,存放在E盘或F盘上;文件夹名用自己姓名拼音缩写。在该文件夹下创建一个图象文件夹(如Images),用于存放图形文件。
2.创建一个远程站点,存放在C:Inetpubwwwroot文件夹下,自己新建一个用于存放自己网站的文件夹,文件夹名mysite
二.制作网页,使用表格设计网页布局
3.在站点根文件夹下创建一个新文件,命名为default.htm,该页为主页,在标题栏输入网页标题(某某的网站)
4.新建 3-4 个网页文件,网页内容自定。
5.建立default.htm页与其它网页的链接
实验习题2:文本与图像制作 顶部
一.网页文字制作
1.建立文章网页,内容自己设计,进行文本的输入。在段落结尾处使用段落标记
(直接按回车键);在换行处使用换行符
(Shift+回车键)。
2.对当前网页中的文本设置字体、字号(在使用不属于系统基本字体时使用后备字体)
3.对当前网页中的文本设置颜色
4.对当前网页中的文本标题设置居中对齐
5.对当前网页中的文本进行缩进
6.对当前网页中的文本进行项目列表或与编号列表
二.在网页中进行图像的插入与处理
1.建立图象网页,插入图片
2.自己设置各种图片属性。可使用fireworks处理图象(如重新设置图像大小、剪裁、改变亮度、优化等)。
3.自选大小相同的图片,创建轮换图象。并建立与本站点网页的链接
4.插入一张图片,创建图象地图,并建立与本网站文件的链接
5.制作网站像册,制作缩略图到原图的链接。
实验习题3:超链接制作 顶部
1.新建一个网页,创建以下各种超链接。选择目标在新窗口打开
链接至网站
链接至当前站点网页文件
链接至图片文件
链接至word文档
链接至flash动画
链接至mp3声音文件
链接至应用程序文件
缩略图至大图的链接
2.制作文章网页,在各节开头处建立锚点;对各节标题建立至锚点的链接;在各节处建立返回到网页项部的锚点链接
3.在网页上建立一个信箱,创建给自己发送电子邮件的超链接。
4.制作一个推荐网站的跳转菜单,加入各网站的URL地址 单元3习题(1)判断题:
1、在制作网页显示时,若有一些网页,他们有共同的标题、共同的目录格式,只是某些内容部分不太相同,这时,可以应用框架网页来加快网页的显示速度,避免重复载入页面。√
2、WEB站点是指一系列可以通过Internet 浏览器浏览的,具有相互超级链接的多媒体文档的集合以及完成这些文档的存放、查找、搜索、发布的物理设备和其他相关软硬件系统的集合√
3、在制作框架网页时,如果需要保存所有框架网页,则只需要选择文件菜单中的SAVE即可保存所有框架网页。×(2)不定项选择题:
1下列不属于站点管理器的功能的是:ab E)可以实现快速超级链接。
B)可以自动纠正超级链接的更改。
C)可以自动发布制作好的网页。D)可以自动升级网站的WEB服务。
2在框架式网页中添加超级链接时,如果对象的“target(目标框架)”属性为以下时,则可以新窗口打开链接页。abd F)_blank
B)_parent
C)_self
D)_top
E)main
(3)实验习题:使用表格进行网页布局
1.新建一个网页,根据网页布局要求插入一个表格,行列数自定,宽度为780象素,边框为0
2.对以上建立的表格进行单元格合并或拆分;对表格行宽和列高进行适当调整; 对表格进行插入行或列的操作
3.对建立的表格的单元格中插入嵌套表格
4.对表格或单元格设置自选背景图象
5.在以上建立的表格中插入图象与文字;设置对各单元格水平居中对齐,垂直顶端对齐;设置单元格为“不换行 单元4习题(1)判断题:
1、作为网页定位技术的表格与层,相对来说表格更为通用,因为层需要浏览器的支持,而表格在任何浏览器下都没有问题。√
2、网页中引入层技术,在层中可以插入各种对象,而且各个层可以嵌套、重叠、交盖等,但不是所有的浏览器都支持层技术。√
3、表单网页中,一页表单,至少且只能有一个表单标记,至少有一个提交的按钮。×(2)不定项选择题
3、网页中的若有多层,下列哪个属性决定层的视觉关系。ac A)Z-index
B)Layer
C)Top
D)left
4、Dreamweaver 能实现的关于站点管理的内容有:abcd A)检查站点的超级链接
B)生成站点报告、错误查找和修改。
C)定义站点
D)测试站点
5、在网页中插入水平线,一般可以设置水平线的以下属性abc A)水平线的宽度。B)水平线的颜色。C)水平线的粗细程度。D)水平线的层叠次序。
6、网页中的超级链接可以链接到。abcd A)链接到本网站中的其他网页。
B)链接到本文件中某锚点位置。
C)可以其他站点中的某个位置。
D)可以链接到某网站中的某个文件对象。
7、在Dreamweaver MX 中,站点管理包括五大设置项,下列说法错误的是:bcd A)Local info 设置站点的名称、本地文件夹映射位置,站点在Internet 上的位置等。
B)Remote info 设置站点的远程信息,包括远程服务器的访问方式,帐号、密码等。
C)Design Notes 设置网页设计过程中是还否保持制作的记录等。
D)Quick View 设置站点网页显示效果。E)Site Map Layer 站点地图项,设置站点地图的显示方式等。(3)实验习题
.使用布局视图进行网页布局
1.使用Fireworks设计网页布局,文档大小760*700像素、导入或自己绘制网页所需图形。将各个图形分别导出,存放在自己站点图象文件夹中、将整个网页图象保存做为跟踪图。
2.新建一个网页存盘,修改页面属性,设置跟踪图象(使用Fireworks设计的网页布局图象作为跟踪图象),透明度为50%
3.进入布局视图,绘制布局表格与布局单元格。
4.根据网页的跟踪图象,对绘制的布局表格与单元格进行调整或移动
5.在布局单元格中插入图象
6.返回标准视图,设置为单元格背景、输入文字等。三.制作框架网页
1.新建一个框架网页(框架类型自选)
2.在各框架内插入内容或打开网页,保存各框架页与框架集
3.设置各框架属性(边框、滚动条等)
4.建立左框架与右框架文章中锚点的链接,要求目标框架为右边的框架
5)建立左边导航条中返回主页的链接,设置目标框架为top 单元5、6习题(1)判断题
1、网页制作中,层的“Z-index”属性表示层的层叠次序,数值大于0表示在页面的上面,数据小于0表示在页面的上面,数值越大就越先看见。×
2、在Dreamweaver里,层与表格之间是可以转换的,但要求层之间不能有重叠多层的情况
3、flash中的导线工具,在真正的层中显示时并不可见。×
4、GIF动画的文件大小相对较大,若用flash 导入后转换为矢量动画就可缩小。√
5、在追求速度为先的网页设计时,可以多用图象,在追求美观为先的网页设计时,可以多用文字。×
6、Dreamweaver模板可以在局部应用,但不能应用于整个站点。×
CSS样式的使用实验习题
一.制作文章页或诗词页,设置页面属性
1)新建或打开网页,设置页面默认字体。
2)设置页面上边距为0、左边距为10。
3)设置页面背景图片
4)设置链接颜色
二.创建自定义的CSS样式
1.创建自定义的CSS样式(存放在CSS样式表文件中)——标题
1、标题2等,使用类型面板设计字体样式,并应用到当前网页中。
2.创建自定义的CSS样式“正文”,字体大小为10点数,字体幼圆;行高为1.8倍行高,并应用到当前网页中。
三.重定义HTML标签
1.修改Body标签,使用背景面板设置背景图象.不重复、固定、自定位置
使用区块面板设置文本对齐为居中。
四.修改CSS样式.1.修改自己所建的标题1模式,使用区块面板设置文本对齐为居中
2.重定义“正文”模式,缩进2个字
3.修改标题模式,使用边框面板设置下边框为双线、颜色自选
五.附加CSS样式表
新建一个网页,附加以上建立的CSS样式表,并应用样式。
六.使用CSS样式中的过滤器
1.新建一个图片网页,使用表格布局后插入图片。
2.新建样式,仅应用该文档,设置Alpha透明度为50%(在扩展面板的滤镜下拉列表框中设置Alpha(Opacity=50)
3.新建一个样式invert,仅应用该文档,(在扩展面板的滤镜下拉列表框中选择invert)
4.建立样式gray,FlipH,Xray,5.对图片后分别设置以上新建的样式后在浏览器中查看效果
第五篇:dreamweaver笔记
弹出菜单
弹出菜单在网页制作中是一种非常常用的菜单方式,这种菜单不但制作简单,而且效果也很
好。
效果说明
本实例所要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 17-1
和图 17-2 所示。
创作思想
本实例首先在网页中输入一行文字,并对文字做一个特殊的超链接,然后利用
Dreamweaver MX 2004 自带的行为制作弹出菜单。
操作步骤
(1)输入文字并设置超链接。在网页中输入文字,因为单独的文本文字是无法添加行为的,按照 Dreamweaver 中的约定,将文字的超链接设置为“ javascript:;”才能够添加行为。所以将文字的超链接设为“ javascript:;”,并执行【显示弹出式菜单】行为,如图 17-3 所示。
(2)设置菜单项和子菜单项,并为菜单设置超链接,然后安排好各个菜单的次序,如图 17-4 所示。
(3)设置页面元素。将菜单设置为垂直菜单,并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态,如图 17-5 所示。
(4)设置【高级】标签。在【高级】标签选项中设置菜单的延迟时间,以及是否显示菜单边框。然后设置边框的宽度、颜色、阴影、高亮,如图 17-6 所示。
注意:【菜单延迟】中时间的单位是毫秒(ms),1000 毫秒等于 1 秒,在设置时
注意换算。
(5)设置的 x 轴和 y 轴参数。在【位置】标签选项中设置弹出菜单的 x 轴和 y 轴参数,这两个参数表示弹出菜单左上角到网页左上角的距离,如图 17-7 所示。
(6)保存网页文件,然后在浏览器中打开该网页,将鼠标光标移动到文字上方时即可看到有菜单弹出,本实例操作完毕。通过 Dreamweaver,可以快速制作出以往只能用复杂代码才能实现的弹出菜单,这样可以实现复杂菜单的弹出和收缩,方便使用又能让页面美
观、整洁。
滑动折叠菜单
在网页展示平面有限的情况下,折叠菜单是一个很不错的选择。这种菜单在一般情况下是折叠起来的,只有当浏览者将鼠标移动到菜单上时,菜单才会滑动展开。
效果说明
当鼠标不在菜单上时,菜单处于折叠状态,看起来是很普通的一个菜单栏,如图 18-1 所示。当鼠标移动到菜单栏上时,该菜单的子菜单就会慢慢滑动展开,如图 18-2 所示。
创作思想
先在一个图层中输入文字,形成菜单折叠时的状态,再使用图层展开时间轴动画来实现
滑动展开菜单的效果。
操作步骤
(1)新建文件并添加层。新建一个网页文件,在网页中添加一个父层(第一级的层)和一个子层(第二级的层),分别设置两个图层的大小和位置,如图 18-3 所示。
(2)设置表格和文字。在 layer1 层中插入表格,设置好表格的高度和背景,然后在表格内输入文字并设置好文字的格式,如图 18-4 所示。
3)设置 layer2 层。设置 layer2 层的背景颜色,然后在其上输入文本并设置超链接,再将 layer2 层添加到时间轴上,以后便可对 layer2 层进行时间轴动画操作,如图 18-5 所
示。
(4)新建一个时间轴 Timeline2,然后将 layer2 层添加到新的时间轴上,如图 18-6
所示。
提示:不同的时间轴可以实现对不同对象的控制,也可以实现多个不同动画。
(5)设置时间轴。分别对时间轴 Timeline1 的第 1 帧和时间轴 Timeline2 的第 15 帧进行设置(这里以第 15 帧作为动画的最后一帧),如图 18-7 所示。
提示:只需要改变时间轴的关键帧,就可以直接生成动画效果,本例将时间轴 Timeline1 第 1 帧中 Layer2 层的高设置为 0px,这样就生成了层慢慢滑出的动画效果。
(6)添加行为。选择表格中的第一个单元格,然后为单元格添加 onMouseOver(鼠标移到单元格上面时)时的行为到播放时间轴 Timeline1,如图 18-8 所示。
(7)继续添加行为。再为该单元格添加 4 个 onMouseOut(鼠标移开时)行为,参数设
置如图 18-9 所示。
(8)添加 2 个行为。选择 layer2 层,并分别添加两个 onMouseOver 和两个
onMouseOut,具体操作如图 18-10 所示。
(9)保存网页文件,然后在 IE 中进行预览,本实例操作完毕。通过时间轴上不同对象在不同时间的状态,再结合时间轴的播放、停止和跳转是 Dreamweaver 中实现动画效果的最基本方法,读者可以充分利用这些功能来实现更精彩的效果。
全景图浏览效果
是否有见过游戏中的全景图效果,充满动画与真实感,让人难以忘怀。在本例中就介绍如何
制作这样的网页。
效果说明
建立文件,选择一张全景图素材,然后插入少量的代码就可以实现全景图浏览效果,如图 43-1 所示。实际效果请浏览随书光盘中《源文件》目录下的相关文件。
创作思想
打开 Dreamweaver MX 2004 软件新建页面并插入表格,在表格的 HTML 代码中插入
操作步骤
(1)新建一个基本的 html 文件,然后保存页面为“ 43.htm ”。
(2)插入表格。要使全景图在指定的区域中走动,必须先插入表格,如图 43-2 所
示。
提示:图 43-2 中的第五步操作必须将高度设置得与图片一样高。
(3)插入标签。然后在工具栏中单击【标签选择器】图标,打开【标签选择器】对话框,在该对话框中设置参数,插入
提示:标签选择器对话框中汇集了一些常用的标签,如 HTML 标签、CFML 标签、ASP.NET 标签等,通过双击相应的代码标签,就可以很轻松地在代码视图中插入代码。
(4)设置参数。接着设置
(5)再接下来需要在代码视图里手动添加代码。回到代码面板,将光标切换到
for(t=1;t<=1000;t++)document.write(“”)
(读者可打开【光盘】|【源文件】|【实例 43 】|【 43.1.txt 】文件,直接复制
代码)
提示:
中第三步操作里的 HTML 代码进行调整。
(6)保存文件,完成操作。
全景图合适用于厂房、展厅等大型演示上,因为单一镜头图片不能让用户看到全景,通过全景图则能够让需要展示的大型场景一览无余。
随机播放背景音乐的网页
相信很多人在打开娱乐网站或个人主页时,经常都会听到一些音乐。本例将介绍如何实现在网页上随机播放背景音乐。
效果说明
建立文件,循环插入要播放的音乐,便可制作出动感的背景音乐,而且是随机的。实际效果请浏览随书光盘中【源文件】下的对应文件。
创作思想
打开 Dreamweaver MX 2004 软件新建页面,再选择【行为】面板下的【 + 】选项插播音乐,设置参数。然后重复此操作 4 次,就可以随机播放背景音乐。
操作步骤
(1)打开 Dreamweaver MX 2004 软件新建文件,并保存页面。
(2)选择好“标签”页,在“行为”面板中插入要播放的音乐文件,如图 55-1 所
示。
(3)接着选择插入的声音文件,打开参数窗口,设置其参数,如图 55-2 所示。
(4)重复执行图 55-1 和图 55-2 所示的操作 4 次,这样就添加了 4 种音乐,使得程序可以随机在这四种音乐中挑选其中一首来播放。因此,图 55-1 中所示的第四步操作
要选择不同的音乐文件。
(5)保存文件,完成操作。适当放置轻松的音乐背景,可以让用户感觉更轻松、愉
快。
网页滚动布告栏
如果想要在网页里显示最新信息、新闻、通知、布告等较长的文字信息,而又不想占用太多的网页空间,可以使用滚动报告栏。
滚动报告栏通常是通过利用 Javascript 技术控制网页中的层的滚动来实现的,然而手工编写 Javascript 代码进行制作肯定是比较复杂、困难的事情。使用 Dreamweaver 为用户提供的【 ScrollableArea 】插件可以快速便捷地制作出滚动报告栏。
效果说明
用户可以通过滚动栏上的【向上滚】和【向下滚】两个按钮控制报告栏文字的滚动速度和方向。实际效果请浏览随书光盘中【源文件】下的对应文件。
创作思想
在随书光盘中找到“ ScrollableArea ”插件,然后运行 Macromedia 的插件管理器安装插件。接着打开 Dreamweaver MX 2004, 在【命令】菜单中单击【 dHTML AP Scrollable Area 】选项,就可以开始设计滚动布告栏了。
操作步骤
(1)安装插件。首先在随书光盘中的【源文件】 / 【实例 56 】目录里面找到 Dreamweaver 的“ ScrollableArea.mxp ”插件,接着运行 Macromedia 的插件管理器“ Extension Manager.exe ”,Macromedia 的插件管理器是随 Dreamweaver 自动安装的,通常和 Dreamweaver 安装在同一目录下面的“ Extension Manager ”文件夹里面。
(2)选择插件管理器菜单栏上的【文件】菜单进行操作,如图 56-1 所示。
提示:如果插件文件已经和 Macromedia 的插件管理器建立了文件关连,那么直接双击插件文件就可以自动打开 Macromedia 的插件管理器安装插件了。
(3)单击【安装】按钮后会弹出一个安装协议窗口。单击安装协议窗口上面的【接
受】按钮完成安装。
(4)设置 滚动布告栏。安装完插件后运行 Dreamweaver MX 2004,打开或者新建一个 web 文档,进行如图 56-2、图 56-3 和图 56-4 所示的操作。
(5)经过上面的操作,基本完成了滚动布告栏的制作。在 Dreamweaver 中执行【文件】 / 【在浏览器中预览】 / 【 IE 浏览器】命令或者单击键盘上的 F12 键预览网页时,可能会出现不正常显示的情况,这是由于 ScrollableArea 产生的代码中没有设置图层位置的单位。执行如图 56-5 和图 56-6 所示的操作,即可解决这个问题。
(6)执行完如图 56-6 所示的操作后,在图 56-5 中所示的第 3 步再分别选择【# divDownControl 】、【# divContainer 】和【# divContent 】选项,然后再分别执行如图 56-6 所示的操作。给 4 种样式分别加上【像素】单位后测试网页,就可以看到如图
56-7 所示的滚动公告栏了。
(7)将鼠标光标分别移动到【 Scroll up 】和【 Scroll down 】上面,就可以看
到中间的文字上下滚动了。
Dreamweaver 的插件种类繁多,功能强大。善于发现和使用插件,可以制作出一些
Dreamweaver 本身望尘莫及的效果。
更多实例请阅读《Dreamweaver网