dreamweaver课程总结

2024-06-06

dreamweaver课程总结(精选11篇)

篇1:dreamweaver课程总结

Dreamweaver课程总结

Web静态页面与浏览器基础知识:

web静态页面:web静态页面是指在浏览器显示出来的一系列的文字和各种的表格图片的集合。web静态页面具有的优点是:1.相应快。在同等条件下。一个静态页面要比动态页面快得多。对于频繁访问的用户来书,静态页面的客户端缓存也有助于用户快速访问。2.服务器资源占用少。静态页面不需要数据库的支持。不需要服务器端应用程序的计算。3.对于大量的用户访问,生成静态页面的优势更明显。像新浪,网易等用户访问量很大的网站都采用生成静态页面的技术。4.用户看到页面和应用程序的分离。即使有应用程序方面的错误,访问的用户是看不到的。这样有利于后台数据的安全。

浏览器:维网(Web)服务的客户端浏览程序。可向万维网(Web)服务器发送各种请求,并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。网页浏览器是个显示网页服务器或档案系统内的文件,并让用户与此些文件互动的一种软件。它用来显示在万维网或局部局域网络等内的文字、影像及其他资讯。这些文字或影像,可以是连接其他网址的超链接,用户可迅速及轻易地浏览各种资讯。网页一般是HTML的格式。有些网页是需使用特定的浏览器才能正确显示。手机浏览器是运行在手机上的浏览器,可以通过GPRS进行上网浏览互联网内容,网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA的ECMAScript标准。

结构标准语言:(1)XML是(可扩展标识语言)的简写。目前推荐遵循的是W3C的XML1.0和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。

(2)XHTML是]可扩展标识语言的缩写。目前推荐遵循的是W3C,XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。2.表现标准语言CSS是层叠样式表的缩写。目前推荐遵循的是W3C,W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。3.行为标准DOM是文档对象模型的缩写。根据W3C DOM规范(2)ECMAScript是ECMA制定的标准脚本语言(JAVAScript)。

网页脚本:脚本是批处理文件的延伸,是一种纯文本保存的程序,可以不经编译而是解释执行,利于快速开发。脚本(Script),就是含有bind和alias等命令的集合,你可以把这个集合存为一个独立的文件然后在需要的时候执行,这样就可以方便你在CS中的使用。

VBScript即 Visual Basic 脚本语言。是asp动态网页默认的编程语言,配合asp内建对象和ADO对象,用户很快就能掌握访问数据库的asp动态网页开

发技术。在WSF、HTA和CHM文件中VBScript和JavaScript的程序码可以任意

混合。HTA文件实际上是加有VBS、JavaScript成分的HTML文件。CHM文件是

一种在线帮助,用户可以使用专门的编辑程序将HTML程序编辑为

CHM,JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚

本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML

网页添加动态功能,比如响应用户的各种操作。

Web动态页面与服务器基础知识:

Web动态页:动态的页面的优点是能够及时处理信息,你提交的页面马上显

示出来。动态页面是一种最常用的网站建设表达形式。它的优点在于可以根据先

前所制定好的程序页面,根据用户的不同请求从而返回其相应的数据,可以说是

一对多的关系,从而达到资源的最大利用和节省网站空间上的物理资源。如果今

后需要改变网站的风格,只需要重新制作前台所访问的页面即可。只要数据库结

构不变,可以很快地进行改版工作。动态页面的优点是效率高、更新快、移植性

强,从而快速地达到即见即所得的目的。

ASP是 “动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单、方便的编程工具。

ASP是一种服务器端脚本编写环境,可以用来创建和运行动态网页或Web应

用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件

等。利用ASP可以向网页中添加交互式内容(如在线表单),也可以创建

使用HTML网页作为用户界面的web应用程序。与HTML相比,ASP网页具

有以下特点:利用ASP可以实现突破静态网页的一些功能限制,ASP文件是包含在HTML

代码所组成的文件中的,易于修改和测试,ASP提供了一些内置对象,使用这些对象可以

使服务器端脚本功能更强。ASP可以使用服务器端ActiveX组件来执行各种各样的任务,ASP也不仅仅局限于与HTML结合制作WEB网站,而且还可以与XHTML和WML语言

结合制作WAP手机网站。但是其原理也是一样的。

ADO是一个用于存取数据源的COM组件。它提供了编程语言和统一数据访

问方式OLE DB的一个中间层。允许开发人员编写访问数据的代码而不用关心数

据库是如何实现的,而只用关心到数据库的连接。访问数据库的时候,关于SQL的知识不是必要的,但是特定数据库支持的SQL命令仍可以通过ADO中的命令对

象来执行。ADO被设计来继承微软早期的数据访问对象层,包括RDO和DAO。

服务器:从广义上讲,服务器是指网络中能对其它机器提供某些服务的计算

机系统。从狭义上讲,服务器是专指某些高性能计算机,能通过网络,对外提供

服务。相对于普通PC来说,稳定性、安全性、性能等方面都要求更高,因此在CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。服务器作为网

络的节点,存储、处理网络上80%的数据、信息,因此也被称为网络的灵魂。

我们与外界日常的生活、工作中的电话交流、沟通,必须经过交换机,才能到达

目标电话;同样如此,网络终端设备如家庭、企业中的微机上网,获取资讯,与

外界沟通、娱乐等,也必须经过服务器,因此也可以说是服务器在“组织”和“领

导”这些设备。服务器它是网络上一种为客户端计算机提供各种服务的高性能的计算机,它在网络操作系统的控制下,将与其相连的硬盘、磁带、打印机、Modem

及各种专用通讯设备提供给网络上的客户站点共享,也能为网络用户提供集中计

算、信息发表及数据管理等服务。它的高性能主要体现在高速度的运算能力、长

时间的可靠运行、强大的外部数据吞吐能力等方面。

Web技术最前沿:Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画。无需Flash。Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动

画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频

标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari

和IE9等各个平台。Adobe Edge的发布也引起了业界对Adobe公司战略的探

讨,AppMobi发布HTML 5开发工具XDK,AppMobi推出了全新开发工具XDK,使得开发者可以使用HTML5构建网络和移动平台的应用程序。最终代码既可以

用来进行HTML5应用程序开发,就如同现在在Chrome网络应用程序商店里看

到的那些程序一样,也可以用于多平台应用程序开发,Firebug1.8正式版发布

云计算(cloud computing),是一种基于互联网的计算方式,通过这种方

式,共享的软硬件资源和信息可以按需提供给计算机和其他设备。云其实是网络、互联网的一种比喻说法。云计算的核心思想,是将大量用网络连接的计算资源统一管理和调度,构成一个计算资源池向用户按需服务。提供资源的网络被称为

“云”。狭义云计算指IT基础设施的交付和使用模式,指通过网络以按需、易

扩展的方式获得所需资源;广义云计算指服务的交付和使用模式,指通过网络以

按需、易扩展的方式获得所需服务。这种服务可以是IT和软件、互联网相关,也可是其他服务。

移动互联网:就是将移动通信和互联网二者结合起来,成为一体。在最近几

年里,移动通信和互联网成为当今世界发展最快、市场潜力最大、前景最诱人的两大业务,它们的增长速度都是任何预测家未曾预料到的,所以移动互联网可以

预见将会创造怎样的经济神话。包括移动IPv4、移动IPv6、移动子网、移动

互联网安全和多播以及切换管理等的工作机理、设计思路及实现方案作solomo互联网术语:即社交(social)+本地化(local)+移动(mobile),由IT

风险投资人约翰·杜尔首次提出该概念。它是PC、移动设备和真实社会关系的外延,代表着未来互联网发展的趋势。是互联网未来发展模式,它将改变人们的交友方式和习惯;将改变零售和服务业的未来;将在中国广阔的舞台上流光溢彩。

SoLoMo概念风靡全球,被一致认为是互联网未来发展趋势。移动互联网将于5

年内超过桌面互联网。人们用移动设备接入互联网的时间显著上升。商业模式演

绎从Facebook到人人网这样的“SO”已经无处不在;而“LO”则代表着以

LBS(Location Based Service)为基础的各种定位和签到,它是Foursquare或者

街旁,也包括Facebook Places和人人报到;“MO”则是拜智能手机带来的各种

移动互联网应用。国内以人人网为例,其月度覆盖用户过亿,而每天有30%的用

户是通过手机访。这要归因于人人公司在手机产品上下的功夫--人人是全球首家

推出手机开放平台的互联网公司,甚至先于一直模仿的对象Facebook。web开发技术认识总结:Dreamweaver课程和Web的学习我对web技术有了一个完整的认识。Web静态页面和动态页面以及对ASP的脚本语言的内容有了一些认识,使我学到了很多网络技术方面的知识;其次对数据库基础知识,云计算,移动网络,社交网络有了一个更全面的认识,通过学习dreamweaver我对计算机网络的认识有了一个质的飞跃,我了解到网络工程,网络技术在我们的生活中的重要意义,认识到了网络在当今社会的重要性,作为当今社会的大学生应该认识到学习好网络技术的重要性,努力为社会的发展做出自己应有的贡献。

篇2:dreamweaver课程总结

新建文档 Ctrl+N

打开一个 HTML文件 Ctrl+O或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中 在框架中打开 Ctrl+Shift+O 关闭 Ctrl+W 保存 Ctrl+S

另存为 Ctrl+Shift+S 检查链接 Shift + F8 退出 Ctrl+Q

编辑菜单

撤消 Ctrl+Z

重复 Ctrl+Y 或 Ctrl+Shift+Z 剪切 Ctrl+X 或Shift+Del 拷贝 Ctrl+C 或Ctrl+Ins 粘贴 Ctrl+V 或Shift+Ins 清除 Delete 全选 Ctrl+A

选择父标签 Ctrl+Shift+< 选择子标签 Ctrl+Shift+> 查找和替换 Ctrl+F 查找下一个 F3

缩进代码 Ctrl+Shift+] 左缩进代码 Ctrl+Shift+[ 平衡大括弧 Ctrl+’ 启动外部编辑器 Ctrl+E 参数选择 Ctrl+U

页面视图

标准视图 Ctrl+Shift+F6 布局视图 Ctrl+F6 工具条 Ctrl+Shift+T

查看页面元素

可视化助理 Ctrl+Shift+I 标尺 Ctrl+Alt+R

显示网格 Ctrl+Alt+G

靠齐到网格 Ctrl+Alt+Shift+G 头内容 Ctrl+Shift+W 页面属性 Ctrl+Shift+J

代码编辑

切换到设计视图 Ctrl+Tab 打开快速标签编辑器 Ctrl+T 选择父标签 Ctrl+Shift+<平衡大括弧 Ctrl+’ 全选 Ctrl+A 拷贝 Ctrl+C

查找和替换 Ctrl+F 查找下一个 F3 替换 Ctrl+H 粘贴 Ctrl+V 剪切 Ctrl+X 重复 Ctrl+Y 撤消 Ctrl+Z

切换断点 Ctrl+Alt+B 向上选择一行 Shift+Up 向下选择一行 Shift+Down 选择左边字符 Shift+Left 选择右边字符 Shift+Right 向上翻页 Page Up 向下翻页 Page Down

向上选择一页 Shift+Page Up 向下选择一页 Shift+Page Down 选择左边单词 Ctrl+Shift+Left 选择右边单词 Ctrl+Shift+Right 移到行首 Home 移到行尾 End

移动到代码顶部 Ctrl+Home 移动到代码尾部 Ctrl+End

向上选择到代码顶部 Ctrl+Shift+Home 向下选择到代码顶部 Ctrl+Shift+End

编辑文本

创建新段落 Enter 插入换行 Shift+Enter

插入不换行空格 Ctrl+Shift+Spacebar

拷贝文本或对象到页面其他位置 Ctrl+拖动选取项目到新位置 选取一个单词双击

将选定项目添加到库 Ctrl+Shift+B

在设计视图和代码编辑器之间切换 Ctrl+Tab 打开和关闭[属性]检查器 Ctrl+Shift+J 检查拼写 Shift+F7

格式化文本

缩进 Ctrl+] 左缩进 Ctrl+[

格式>无 Ctrl+0(零)段落格式 Ctrl+Shift+P

应用标题1到6到段落 Ctrl+1 到 6 对齐>左对齐 Ctrl+Shift+Alt+L 对齐>居中 Ctrl+Shift+Alt+C 对齐>右对齐 Ctrl+Shift+Alt+R 加粗选定文本 Ctrl+B 倾斜选定文本 Ctrl+I 编辑样式表 Ctrl+Shift+E

查找和替换文本

查找 Ctrl+F

查找下一个/再查找 F3 替换 Ctrl+H

处理表格

选择表格(光标在表格中)Ctrl+A 移动到下一单元格 Tab

移动到上一单元格 Shift+Tab

插入行(在当前行之前)Ctrl+M

在表格末插入一行在最后一个单元格 Tab 删除当前行 Ctrl+Shift+M 插入列 Ctrl+Shift+A

删除列 Ctrl+Shift+(hyphen)

播放插件

播放插件 Ctrl+Alt+P 停止插件 Ctrl+Alt+X

播放所有插件 Ctrl+Shift+Alt+P 停止所有插件 Ctrl+Shift+Alt+X

处理模板

创建新的可编辑区域 Ctrl+Alt+V 插入对象

任何对象(图象,Shockwave影片等)文件从[资源管理器]或[站点]窗口拖动到[文档]窗口 图象 Ctrl+Alt+I 表格 Ctrl+Alt+T

Flash影片 Ctrl+Alt+F

Shockwave和Director影片 Ctrl+Alt+D 命名锚记 Ctrl+Alt+A

历史纪录面板

打开[历史纪录]面板 Shift F10 开始/停止录制命令 Ctrl+Shift+X 播放录制好的命令 Ctrl+P

打开和关闭面板

对象 Ctrl+F2 属性 Ctrl+F3 站点文件 F5 站点地图 Ctrl+F5 资源 F11

CSS样式 Shift+F11 HTML样式 Ctrl+F11 行为 Shift+F3

历史纪录 Shift+F10 时间轴 Shift+F9 代码检查器 F10 框架 Shift+F2 层 F2

参考 Ctrl+Shift+F1

显示/隐藏浮动面板 F4 最小化所有窗口 Shift+F4 最大化所有窗口 Alt+Shift+F4

获得帮助

使用Dreamweaver[帮助主题] F1 参考 Shift+F1

篇3:dreamweaver课程总结

关键词:原子物理,Dreamweaver,课程网站,网络教学

原子物理学是应用物理专业的一门重要必修基础课,主要研究物质在原子、原子核以及基本粒子等结构层次的性质、特点和运动规律,是物理学领域中最具活力的学科之一。在传统的课堂教学中,一般采用的是“教师-黑板-学生”的教学模式,由于原子物理的内容属于微观领域,许多知识点和内容与宏观不同,非常抽象,多数学生难以对教学内容进行及时有效地吸收消化,使所学知识显得晦涩难懂且枯燥乏味,从而影响教学效果。随着多媒体技术的迅猛发展和计算机网络的普及,多媒体计算机辅助教学技术被广泛应用于各类教学中,在深化教学改革和提高教学质量方面显现出重要作用。基于Web的交互式多媒体课件可以在校园网和互联网上运行,学生进行自主学习,研究性学习更为方便,将课堂教学延伸到课外,将传统教学与网络化学习有机结合,获得最佳教学效果。我们针对原子物理学课程特点,融合Dreamweaver、Photoshop、Flash等不同多媒体技术,制作了一套原子物理学网络多媒体教学软件,实践表明,使用该软件,教学效果好,教学质量高,并获得学校优秀课程。

1 课程网站设计

1.1 网站开发工具

基于TCP/IP协议的网络环境下,使用Windows XP为系统平台,开发工具分别为Ma c ro me d i a Dr e a mwe a v e r8.0、Ado b e PhotoshopCS、Macromedia Flsah8.0制作完成。Dreamweaver是Macromedia公司开发的一款专业网页制作软件,它具有很强的可视化特性,用户无须编写任何一句代码,就可以创建出所需要的网页,制作效果可以方便地通过IE浏览器浏览;其次,Dreamweaver还提供纯粹的代码编辑环境,包括html、CCS、JavaScript、Asp等语言代码编辑工具和参考资源;它允许用户个性化的工作环境,用户可以自己创建完全属于自己的对象和命令,可以编写代码扩充软件功能等。

Photoshop是Adobe公司开发的图形图像处理软件,广泛应用于设计平面图像的各个领域,如平面广告设计、照片处理,Ph o t o s h o p具有功能强大的选择工具、多种文字效果和各种滤镜;

Flash是Macromedia公司出品的平面动画制作软件,使用该软件制作平面动画十分方便,矢量图形不失真,只要有两个关键帧,就可以产生多幅连续运动、变形等动画,非常适合演示一些原理性的教学内容,用Flash制作的动画体积小,在网络上可以边下载边播放,非常适合网络教学,可以加入声音,增强表现力,能够被多种浏览器所接受,非常适合制作演示各种平面动画。

1.2 网站整体结构

基于我校原子物理教学实际和课程素材准备情况,设计出网站主页结构如下:(1)教学大纲:把理论课和实验课的教学大纲放在网上,给学生看,使学生对原子物理课程的教学目的、课程要求、课程内容以及学时分配做到清清楚楚;(2)教师简介:由于实行选课制,学生可以通过该页面了解各位任课教师的基本情况,自由选择适合自己的任课教师;(3)教学课件:任课教师把自己编写的电子课件放在网上,供学生事先预习和课后研读,指导学生掌握和理解各章节重要知识点和难点内容;(4)教学录像:本部分为视频教学录像,主要展示各位任课教师课堂教学特色和风采;(5)综合材料:主要包括参考文献、教学情况、课程特色、教学方法与手段、实验指导、教学研究与改革、实践性教学环境等内容,其中参考文献部分向学生推荐学习原子物理课程时,需要阅读的中英文书籍和相关的科技论文;课程特色中介绍本课程的特色和优势;实验指导部分主要有实验大纲和实验指导书等;教学研究与改革中主要是包括本课程教师承担的国家、省市、学校教学和科研项目、科研成果以及在国内刊物发表过的学术论文,取得的成就;实践性教学环境栏目包括开设三个层次的验证性实验、综合性实验和设计性实验,实验室软硬件条件等;(6)参考练习:提供与教材配套的练习题和答案,供学生在完成作业、自学和复习时参考;(7)教学论坛:为学习原子物理课程的学生,提供知识探究、辅导答疑、师生相互交流的平台。

2 课程网站的实现

根据教学网站的整体设计和具体内容,首先收集、制作网站所需要的多媒体素材,主要包括文本、图形图像、视频、音频等。文本和符号是网站最基本的素材,主要用于表现课件内容、标题、注释、菜单项目等;图形图像包括背景图、资料图片、示意图等,一方面可以利用扫描仪将一些教学插图转换成数字图像,另一方面可以充分利用网络资源和Photoshop的超强图像处理功能,制作一些与课程内容相关的图像内容;为了形象生动地表现一些微观、抽象问题和动态过程,加深对所学知识的理解,采用Flash软件制成平面动画,占用空间小,网络传播速度较快;音频和视频部分,音频主要用于解说、语音提示,视频则形成连续变化的影像,由于声音和画面同步,表现力强大,大大地提高了课堂教学的直观性和形象性效果。

各个模块文件建立之后,下一步的工作就是将先前收集整理好的资料整合成网页。教学网站的各版块之间采用平行结构,部分版块下面又设有子版块,结构清晰,组织严密。在这一步骤中,Dreamweaver主要通过对文本、图形图像、视频的处理,多方面、立体化地展现各版块的内容和特色。例如,在“教学课件”中提供了教师制作的PPT文件,学生可以在线阅读和下载,“教学录像”模块中制作出主讲教师高清晰的视频文件,结合学校网站的流媒体服务器技术,通过Dreamweaver加载到网页上,便于学生课后学习。

一个成功的网站往往不是一次性完成的,需要在使用的过程中不断调试和修改,要及时收集反馈信息,发现其中的不足之处,逐步充实、完善和更新。

3 结论

本文以原子物理课程内容为基础,采用Dreamweaver并融合各种多媒体技术,建立教学网站,开展网络教学,有助于原子物理课程的内涵深化和外延扩展。Dreamweaver作为当今网页制作中的主流软件,在很多方面具有得天独厚的优势。开展网络教学,改变了传统的教学模式,符合科学技术进步的时代要求,可以使学生在有限的时间掌握相关的理论、方法和技术,便于课后师生教学的互动性和积极性,取得了良好的教学效果。

参考文献

[1]高京熙.Dreamweaver 8从入门到精通[M].北京:中国青年出版社.2006

[2]郑世旺,李彦敏,王建波.多媒体技术在光学教学课件制作中的融合应用[J].商丘师范学院学报.2008,24(3):123-124

[3]王唯一,张腾,等.基于Dreamweaver网页编程技术的教学网站设计[J].计算机工程与技术.2008,29(16):4305-4307

篇4:dreamweaver课程总结

一、Dreamweaver网页设计课程的特点

高等学校计算机专业开设Dreamweaver课程,主要任务是介绍利用Dreamweaver开发工具进行网页设计,包括新建、编辑和设置一个Web站点;如何对页面属性进行基本的设置,如何设置、编辑CSS层叠式样式表;如何排版文字、表格和层;如何进行基本的图像处理;建立框架;模板和库的使用的编辑;网站的发布与维护等基本知识与应用。目的是通过本课程的学习,培养学生的实际动手能力和计算机的操作能力,能够运用所学的知识进行网页设计。

Dreamweaver网页设计课程的教学内容实践性较强,能极大地激发学生的参与性,锻炼学生的动手能力,培养学生的专业兴趣。教学中一定要注意理论与实践相结合,其中实践内容是教学的主线。学生应该有较充足的动手实践机会,能够较熟练地创作出实用的动态网页来。

理论教学服务于实践教学,实践教学反过来又作用于理论教学。从这一点上讲,此时的课程教学相当于一个完整的项目开发,任何一个细节都是为整体服务的。在教学过程中常有学生反映,上课能看懂、理解,不管是设计方法还是操作步骤,知其然也知其所以然,但课后就忘了,更不要说以后的实践了。这是本课程教学的最大特点:易学易忘。

二、Dreamweaver网页设计课程教学方法设计

1.根据任务驱动教学法进行Dreamweaver课程教学设计

任务驱动教学法是建立在建构主义学习理论基础上的一种教学模式。它强调学生的学习活动必须与任务相结合,以问题的探索来引导和维持学习者的学习兴趣和动机。

首先,教师应向学生布置本课程、本阶段、本单元、本节课的学习任务,要求学生带着任务和问题去学习。Dreamweaver网页制作是一门实用性、操作性很强的课程。在教学开始时,教师可推荐一些富有特色的网站供学生欣赏,将学生带入真实的学习情境中去,激发他们学习的热情,同时引导他们去思考如何建设网站、设计网页,由此确定课程的总体任务——建设一个完整网站。

然后,教师要针对课程中每一部分知识点将总体任务细分为若干大任务,如文本、图像、链接、表格、框架、CSS样式、层、时间轴、模板和库等,再将这些大任务进一步细分为一些小任务。任务应从易到难,小任务应紧密围绕总体任务去一个个地实现。教师要充分结合网页的特点创设可以引发学生学习兴趣的任务,为学生营造一个愉快的学习氛围,以使他们自觉主动地完成任务。

问题提出后,教师不要直接告诉学生如何去做,而应向学生提供解决该问题的线索。要以问题探索引起和维持学生的学习兴趣和动机。学生结合已有知识自行完成任务,通过自主探索或者协作开展探究活动,在完成任务的过程中掌握新知识,并将所学知识融会贯通,进而运用到实际设计中去。最好让学生自己去设计个性化网页,发挥学生的主体性,激发学生的创造性。完成任务的过程是学生有意识的技能运用过程,在这一过程中,学生围绕设计主题搜集资料,进行探索,深入学习,完成对问题的理解、知识的应用和意义的建构。比如,要求学生做一个公司的网站设计,学生就会去上网了解一些公司网站的设计思路及效果,然后再尝试自己设计。

2.加强上机实践教学的管理

(1)任课老师应编排好上机座位表,学生固定位置上机,便于师生沟通了解。

(2)进一步明确上机实践的要求与具体操作内容。每节课都明确强调上机实践的基本要求与具体操作内容,要求每个学生每一节课都保存好自己的创作内容,以利学生的后续创作,也方便老师的检查监督。

(3)加强指导与检查,及时解决学生上机创作中出现的问题。当然老师不可能也不应该包办代替,而是指出解决问题的方法思路让学生自己动手解决。

(4)进一步建立完善上网环境。网页创作需要有一个上网环境。IIS固然是一种建立网站、上传发布网页以及接收浏览网页的虚拟网络环境,但若有个人主页空间,真正建立起自己的网站,则效果会更好。目前免费个人主页空间的申请较难,建议有条件的学校在自己的空间内划出一个空间供学生在一定时间内使用,这对提高学生学习课程的兴趣以及实际建站操作训练都大有好处。

3.培养学生的页面制作审美观念,增强美学意识

网页不仅要实现一定的功能,还要体现出美学价值,符合人的审美习惯。一个成功的网站大都由一张张制作精美的网页组成。网页的布局合理,色彩搭配得当,网页间的层次清晰,内容别具特色,是其能够从众多网站中脱颖而出的重要原因。如果在网页的制作过程中只重视技术的实现,忽视网页的美感,则难以制作出成功的网页。

在Dreamweaver网页设计课程的教学过程中,教师的讲授不可以只停留在对技术的讲解上,而忽视学生美学观念的培养。实践证明,采用同样的技术制作的两张网页,由于布局和色彩等因素的处理不同,其产生的外在效果可能迥异。因此,强化学生的网页美学意识,对于其学习和成长是非常必要的。制作网页的过程,是学习者的主观美到客观美的外化过程,努力做好每一张网页,对于培养和提高学生的审美情趣大有裨益。

4.组成设计学习小组,引入竞争机制

在进行Dreamweaver课程的实践操作环节时,可以把学生分成若干个小组。小组内部成员之间相互启发,相互激励,共同进步,可以充分发挥小组合作学习的优点。小组之间则强调竞爭。小组划分采取自愿原则,自由组合,也可以由教师根据具体情况进行划分。每个小组的人数一般控制在3—5人。所划分的小组应当具有团队精神,成员之间真诚合作、相互帮助,共同进步,完成任务和实现目标。

5.加强创新意识

篇5:Dreamweaver删除站点

首先打开dreamweaver,在菜单栏中找到“站点”——“管理站点”,如下图所示。

打开“管理站点”对话框,我们可以选择需要修改的站点,如下图中的“duote”,选择站点后点击“删除”图标,如下图所示。

篇6:Dreamweaver对齐方式

1. 打开HTML文档,将光标插入到要对齐的段落中。

2. 点击“格式”菜单,选择“对齐”项,弹出子菜单。如下图所示:

篇7:dreamweaver入门基础

【DW MX 2004 MX 2004 的新功能简介】

▲简洁高效的设计和开发界面:界面更易于使用,可使您的工作效率和工作质量均得到提高。

▲“插入”栏的改进:简洁高效的新外观,占用更少的工作区空间。还新增加了一个“收藏”类别,您可以对“插入”栏进行自定义,将最常使用的对象放置在该栏上。

▲表格编辑可视化:在表格中进行列调整操作时能看到实际效果。

▲用户界面改进:可得到最大的可用工作区,更清晰地显示上下文和焦点,更易于使用和更具逻辑性。

▲起始页:使您能够访问最近使用过的文件,创建新文件和访问DW MX 2004资源。起始页会在您启动DW MX 2004 或尚未打开文档时显示。

▲保存桌面选项:使您可以选择当您重新启动DW MX 2004 时重新打开您上一次使用的文档。

▲完全支持 Unicode:DW MX 2004支持 Internet Explorer所支持的所有文本编码方式。您可以使用几乎所有您的系统中安装的语言字体,DW MX 2004 会正确地显示和保存这些字体。

▲安全 FTP:使您能够完全加密所有文件传输。

▲新式的页面布局和设计环境。

▲增强的 CSS 功能:提供了一个更为精巧的方法来进行样式设计及提高设计交互性。

▲动态跨浏览器验证:在您保存文档时自动检查当前文档的跨浏览器兼容性问题。

本教程针对DW MX 2004简体中文版进行讨论,供学习网页制作创建静态网站的朋友们参考。因本人水平有限,不当之处在所难免,欢迎批评指正。

【图象处理软件】

Photoshop:制作图文并茂的网页,需要处理图片, PS 是最好的图象处理软件。最新版为Photoshop CS(俗称8.0)版本。对初学者来说稍微专业了。您可以使用简单易学、功能强大的的 Photoshop Elements(即:PSE),对于网页图片文件制作PSE就足够用了。。

Fireworks:最新为 MX 2004版本,网页制作三剑客之一。能和DW无缝链接。该软件请您自行收集下载。

Flash: 最新为 MX 2004版本,网页制作三剑客之一。网上最火的动画制作软件。该软件请您自行收集下载。

Ulead GIF Animator:友立公司开发的功能强大的GIF动画软件。该软件请您自行收集下载。

【其他软件】

CuteFTP:是专业的FTP上传软件,用于往服务器端上传文件用。 Dreamweaver MX 2004 有此功能,而且功能强大。但是,不少人还是习惯用专业的FTP软件。该软件请您自行收集下载。

最终您还需要有一个网络空间。以便您的大作让更多的人浏览。

dreamweaver入门(2004版本):窗口布局:

窗口布局

Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中,全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人 员需求的布局。首次启动 Dreamweaver 时,会出现一个工作区设置对话框(如下图):

您可以从中选择一种工作区布局。如果您不熟悉编写代码,请您选择“设计者”。如果您以后想更改工作区,可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如下图:

【栏目说明】

“插入”栏(如下图):包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。每个对象都是一段 HTML 代码,允许您在插入它时设置不同的属性。例如,您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对 象。

“文档”窗口 显示您当前创建和编辑的文档。

“属性检查器”(如下图): 用于查看和更改所选对象或文本的各种属性。

“面板组”(如下图) 是分组在某个标题下面的相关面板的集合。若要展开一个面板组,请单击组名称左侧的展开箭头;若要取消停靠一个面板组,请拖动该组标题条左边缘的手柄。

“文件”面板(如下图) 使您可以管理您的文件和文件夹,无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件,类似于 Windows 资源管理器。

Dreamweaver MX 2004提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板,请使用“窗口”菜单。

dreamweaver入门(2004版本):菜单概述:

菜单概述

本节提供 Dreamweaver MX 2004中各菜单的简要说明。下图为菜单条:

以下分别叙述菜单选项:

文件菜单编辑菜单

“文件”菜单 包含“新建”、“打开”、“保存”、“保存全部”,还包含各种其他命令,用于查看当前文档或对当前文档执行操作,例如“在浏览器中预览”和“打印代码”。

“编辑”菜单 包含选择和搜索命令,例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。

查看菜单插入菜单

“查看”菜单 使您可以看到文档的各种视图(例如“设计”视图和“代码”视图),并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。

“插入”菜单提供“插入”栏的替代项,用于将对象插入您的文档。

修改菜单文本菜单

“修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜单,您可以编辑标签属性,更改表格和表格元素,并且为库项和模板执行不同的操作。

“文本”菜单使您可以轻松地设置文本的格式。

命令菜单站点菜单

“命令”菜单 提供对各种命令的访问;包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。

“站点”菜单 提供用于管理站点以及上传和下载文件的菜单项。

窗口菜单帮助菜单

“窗口”菜单 提供对 DW中的所有面板、检查器和窗口的访问。

“帮助”菜单 提供对 Dreamweaver 文档的访问,包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统,还包括各种语言的参考材料。

除了菜单栏菜单外,Dreamweaver 还提供多种右键显示上下文菜单,您可以利用它们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单,右击窗口中的某一项。

dreamweaver入门(2004版本):常用工具栏:

“插入”栏“插入”栏包含用于创建和插入对象(如表格、层和图像)的按钮。当鼠标指针滚动到一个按钮上时,会出现一个工具提示,其中含有该按钮的名称。 某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时,该选项将成为该按钮的默认操作。例如,如果从“图像”按钮的弹出菜单中选择“图像 占位符”,下次单击“图像”按钮时,Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时,该按钮的默认操作都会改变。

“插入”栏按以下的类别进行组织:

“常用”类别使您可以创建和插入最常用的对象,例如图像和表格。

“布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择:“标准”(默认)、“扩展表格”和“布局”。当选择“布局”模式后,您可以使用 Dreamweaver 布局工具:“绘制布局单元格”和“绘制布局表格”。

“表单”类别包含用于创建表单和插入表单元素的按钮。

“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。

“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。

“服务器代码”类别仅适用于使用特定服务器语言的页面,这些类别中的每一个都提供了服务器代码对象,您可以将这些对象插入“代码”视图中。

“应用程序”类别使您可以插入动态元素,例如记录集、重复区域以及记录插入和更新表单。

“Flash 元素”类别使您可以插入 Flash 元素。

“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。

文档工具栏

文档工具栏中包含按钮,这些按钮使您可以在文档的不同视图间快速切换:“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。

工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 以下对选项进行说明:

显示代码视图 仅在“文档”窗口中显示“代码”视图。

显示代码视图和设计视图 在“文档”窗口的一部分中显示“代码”视图,而在另一部分中显示“设计”视图。当选择了这种组合视图时,“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。

显示设计视图 仅在“文档”窗口中显示“设计”视图。

标题 允许您为文档输入一个标题,它将显示在浏览器的标题栏中。如果文档已经有了一个标题,则该标题将显示在该区域中。

没有浏览器/检查错误 使您可以检查跨浏览器兼容性。

文件管理 显示“文件管理”弹出菜单。

在浏览器中预览/调试 在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。

刷新设计视图 当您在“代码”视图中进行更改后刷新文档的“设计”视图。

视图选项 允许您为“代码”视图和“设计”视图设置选项。

状态栏

状态栏提供与您正创建的文档有关的其它信息 标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如:单击 可以选择文档的整个正文。

窗口大小 弹出菜单(仅在“设计”视图中可见)用来将“文档”窗口的大小调整到预定义或自定义的尺寸。

“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。

dreamweaver入门(2004版本):定义站点:

设置站点

Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果,在创建任何 Web 站点页面之前,应对站点的结构进行设计和规划。决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的。

请执行以下操作:

启动 Dreamweaver MX 2004:

选择“站点” >“管理站点”(即,从“站点”菜单选择“管理站点”)。 出现“管理站点”对话框。

在“管理站点”对话框中,单击“新建”,然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。

如果对话框显示的是“高级”选项卡,则单击“基本”。 出现“站点定义向导”的第一个界面,要求您为站点输入一个名称。

在文本框中,输入一个名称以在 Dreamweaver MX 2004中标识该站点。该名称可以是任何所需的名称。

单击“下一步”。出现向导的下一个界面,询问您是否要使用服务器技术。

选择“否”选项,指示目前该站点是一个静态站点,没有动态页。

单击“下一步”。出现向导的下一个界面,询问您要如何使用您的文件。

选择标有“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”的选项。 在站点开发过程中有多种处理文件的方式,初学网页制作的朋友请选择此选项。

单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。

单击“下一步”, 出现向导的下一个界面,询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 您可以稍后设置有关远程站点的信息。目前,本地站点信息对于开始创建网页已经足够了。单击“下一步”,该向导的下一个屏幕将出现,其中显示您的设置概要。

单击“完成”完成设置。 随即出现“管理站点”对话框,显示您的新站点。单击“完成”关闭“管理站点”对话框。

篇8:dreamweaver课程总结

随着科学技术的飞速发展, 计算机应用已渗透到社会各个领域, 促使当前社会对人才质量的要求逐年提高。作为中职学校, 首先要为学生考虑这个问题, 特别是计算机专业, 该专业毕业的学生, 不仅要面对人才的竞争, 还要面对层出不穷的“软件世界”, 如果没有一定的实用技能, 没有可持续发展能力, 不具备独立思考、创新能力, 将来会很难适应社会高速发展的需要。我国中职学校计算机专业从开设到现在已有10多年了, 虽为社会输送了大量的合格人才, 但同时也存在很多问题。如:目标定位模糊、教学方法单调等, 由于教学方法滞后, 限制了学生学习计算机知识的热情, 以及利用原有的知识进行综合、运用及创新能力的提高, 所以改革计算机专业应用课程教学方法势在必行, 传统的教学模式也必将被新型的教学模式所代替。

行为导向教学实践非常适合职业学校计算机操作课程教学, 它打破了传统学科本位的模式, 以工作任务为流程, 通过行动导向的教学模式, 使学生对学习有了新认识, 逐渐消除了畏惧的心理, 也激发了学生去思考、探索问题、分析和解决问题的兴趣和信心。行动导向下的计算机应用专业技能训练模式的依据是行动导向教学理论, 学生的全面素质和综合能力的提高来源于将各种心智能力、动手能力、职业素质等融入到实际生产活动中或模拟生产活动中, 在进行专业技能训练的同时, 潜移默化地完成综合素质的提高。而且与生产实际相结合的学习环境更有利于激发学生的学习兴趣和进行技能训练的动力。

二、行为导向教学中常用的教学方法

在行为导向教学法中常用的有以下几种教学方法:

1. 模拟教学法 (Simulations methode)

2. 案例教学法 (Fallstudiens methode)

3. 项目教学法 (Projekt methode)

4. 角色扮演法 (Rolenspiel methode)

三、行为导向教学法在Dreamw eaver中的应用

在我校, Dreamweaver课程属于网站前台开发的内容, 在本课程的学习当中, 学生们要掌握图像处理操作、动画制作操作, 而且通过本课程的学习, 不光要掌握Dreamweaver软件的学习, 还要掌握HTML语言和JAVA的基础知识, 能编写根据网页页面所需的小程序。根据这些要求, 采取以往的教学方法是行不通的, 因此必须将行为导向教学法引入到课堂教学当中。

在教学过程中, 应根据实际需要灵活应用以上教学方法, 首先根据情况创设情境阶段, 可以让学生们欣赏优秀的作品, 学生的创设兴趣很快被激发出来。通过欣赏作品, 也有要试一试的想法。在此基础上, 提出本次课的任务, 学生欣然接受。

在任务中要进行知识的综合, 笔者在学生创作之前带领学生适当对部分知识进行复习, 避免学生产生畏难情绪, 为学生的自主学习增加了兴趣, 提供了驱动力。

在完成任务的过程中, 各组组长组织本小组同学讨论商量, 确定创意方案, 确定分工。学生结合教师分析的要领进行制作, 通过分工合作的方式完成自己的作品。通过任务下达和小组分工配合, 实现分层次教学、体现差异, 因人施教, 提高学生素质。

完成作品后, 在教师的指导下, 小组按照附表所示学习质量监控表以自评的方式派出小组解说员对本小组的成员、创意、设计思想、制作技术进行简要介绍, 指出自己作品的优点和不足之处。之后, 进行小组间的互评, 能够让学生更好地理解和学习别的小组的成果和优点, 让学生互相学习, 共同提高。

在评价学习效果时, 笔者指导学生不仅要注重结果评价, 更应注重过程性评价。如:学习方法、学习过程、学习态度与动机, 指出每组学生的优点, 增强其自信心, 以鼓励性评价为主, 使每组学生都能体验成功。评价作品时大家都表现得很积极, 整个课堂气氛非常活跃, 取得了较好的学习效果, 全面提高了学生的操作能力和信息素养。

此次活动中的分组, 是在学生自愿分组结合的基础上, 根据以往出现的问题, 作了适当调整。尽可能让积极、活跃的学生分散到各组中去, 以促进小组的协作学习, 这在一定程度上避免了以往某些小组的惰性、不活跃等现象;并且成员的分工应每次随着项目的变化而转变, 避免有些学生总是承担简单的工作, 而得不到更多内容的锻炼。

行为导向教学法, 改变了传统的教学模式, 为学生提供了更加有效的良好的学习环境。只要我们在教学过程中大胆实践、勇于创新, 精心设计各种任务, 努力创设互动合作、探究创新的学习情境, 就一定能提高中职计算机课堂的教学效果, 进而提高学生实践动手能力, 增强综合运用能力, 适应现代社会的需要。

在Dreamweaver课堂教学中, 将基于工作岗位的任务引领到技能训练中, 在实际的教学过程中, 着眼于学生的学力, 将实际操作作为教学的重点, 提出问题并给出具体任务, 在任务中介绍有关的思路和方法。如此让学生自己动手, 享受学习的乐趣, 真正领悟所学要领, 解决实际生活或工作中的问题, 最终达到“职业教育就是就业教育”的教学目标。

摘要:本文对中等职业学校计算机专业课Dreamweaver的课堂教学方法进行了研究, 并对行为导向教学法在计算机专业课中的应用进行了探索, 阐述了行为导向教学法在Dreamweaver课程中应用的具体实施流程。

关键词:行为导向,Dreamweaver,计算机专业,教学方法

参考文献

[1]苑敏, 苏英志.行为导向教学法在专业课中的应用[J].教育与职业, 2008, (3) .

篇9:Dreamweaver菜单栏

“文件”菜单 包含“新建”、“打开”、“保存”、“保存全部”,还包含各种其他命令,用于查看当前文档或对当前文档执行操作,例如“在浏览器中预览”和“打印代码”。

“编辑”菜单 包含选择和搜索命令,例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。

“查看”菜单 使您可以看到文档的各种视图(例如“设计”视图和“代码”视图),并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。

篇10:Dreamweaver段落缩进

首先打开HTML文档,将光标插入到要缩进的一个或者多个段落中,然后选择下面的任一种方法进行操作:

1. 使用菜单命

点击“格式”菜单,选择“缩进”项,即可设置段落的缩进,如果想取消缩进,点击“格式”菜单,选择“凸出”项即可。

2. 使用属性面板

在“属性”面板中,也可以设置或者取消段落的缩进。如下图所示:

篇11:DREAMWEAVER电子教案

三、教学过程

1.1 Dreamweaver MX概述

1、直观的新工作区

2、更加强大的模板

3、广泛的代码库

4、新服务器技术

5、帮助初学者起步的示例内容

6、XML和WEB标准支持

7、改进的级联样式表(CSS)

8、高性能的新编码功能

9、高性能的新编码功能

10、优化COLDFUSION MX开发环境

使用 Dreamweaver 工作区

一、教学目的:认识DR的界面,了解各面板的组成,菜单的组成。

二、教学重点:各面板的组成。

三、教学过程:

选择工作区布局(仅适用于 Windows)在 Windows 中首次启动 Dreamweaver 时,会出现一个对话框让选择一种工作区布局。如果以后改变了主意,可以使用“参数选择”对话框切换到一种不同的工作区。

选择工作区布局:

选择下列布局之一: Dreamweaver MX 工作区

HomeSite/代码编写者样式的 Dreamweaver MX 工作区 Dreamweaver 4 工作区

在选择一种工作区后切换到另一种工作区:

Dreamweaver MX 工作区

浮动工作区布局(Windows 和 Macintosh)状态栏

“文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。调整“文档”窗口的大小

将“文档”窗口的大小调整为预定义的大小:

向“窗口大小”弹出式菜单中添加新的大小:

将“文档”窗口最大化(仅适用于 Windows 集成工作区):

使用快速启动条

快速启动条显示在状态栏中,包含用以打开和关闭各种面板、检查器和窗口的按钮。

若要显示快速启动条,请在“面板”参数选择中启用“在面板和启动器中显示图标”选项。可以指定在快速启动条中显示哪些项目。

使用文档工具栏

 “显示代码视图

“显示代码视图和设计视图” 

“显示设计视图

 “标题”

 “文件管理”

 “在浏览器中预览/调试”

“换行符”在插入点处插入一个换行符。还可以按下 Shift+Enter(Windows)“不换行空格”在插入点处插入一个不换行的空格()。“左引号”、“右引号”和“破折线”在插入点处插入标点符号。“英镑符号”、“欧元符号”和“日元符号”在插入点处插入货币符号。“版权”、“注册商标”和“商标”在插入点处插入相应的符号。“其它字符”

第二单元 文本的编辑与基本操作

一、教学目的:学习网页的组成对象 设计要素 文本的字体大小颜色,段落的格式,基本的编辑命令。

二、学教重点:文本编辑的基本操作

三、教学过程:

网页的组成比报纸和杂志复杂的多,因为它包含图、声、文、动画、控件等多媒体,另一大特点有超级链接。

1、文字

标题:一般为图形 尺寸 系统默认大小

样式:一般少用下划线

字体:一般为系统默认大小

颜色:以颜色来强调文章的重点

2、图形

一般为GIF 和 JPG 格式

3、超级链接

站内链接 和站外链接 网页的设计要素

不同浏览器的显示效果 网络的传输速度 屏幕的分辨率 颜色的显示

网页的基本操作 创建网页

文件――新建――对话框 打开文件类型 HTML SHTM SHTML XML文件

库文件LBI 模板文件 DWT

样式表文件 CSS 微软服务器端文件 ASP JAVA 服务器端文件 PHP文件 TXT文件

CFM模板文件

JSF

fireworks文件 LASSO 打开当前站点文件

从站点面板中打开 或 通过菜单-文件-打开命令 打开最近使用的文件

文件菜单下列出的文件名 从WORD中导入文件

先在WORD中将文件保存为HTML 文件 然后在DR 中 文件-导入-WORDHTML

还可打开后用命令-清除 保存网页 另存为模板 输入文本

直接输入 使用剪贴板

用ENTER 相当于插入

用SHIFT+ENTER 相当于插入
改变字体样式 改变字号

要使字体不随浏览器的字体设置而改变就要用到层叠样式(CSS Style)文本的颜色 选择文字

然后用下列两种方式  用文字属性面板中调整  

单击调色板中的右上角要将字体改为默认值点

按钮或菜单文本――颜色

上机练习:

段 落 格 式

创新新段落:

ENTER 分段落

在段落

格式下拉菜单选择一种格式 对齐段落:

居中对齐 左对齐 右对齐

缩进段落

取消缩进

或菜单 或选择段落后右击弹出菜单

项目符号: 每个段落前加一个项目符号 用

利用 插入分隔线

列表下拉选择各种不同的情况

修改分隔线的属性

改变长度 改变高度

改变对齐方式

插入特殊字符和符号

菜单插入|特殊字符|

弹出子菜单,进行所需要的项目选择

其中包括:

换行符 SHIFT+RETURN 不换行空格 CTREL+SHIFT+SPACE

用于行首 插入符号

E-mail 地址链接

插入|电子邮件链接|

其效果将看到“欢迎联系”字样并带下划线 可以发送邮件 插入日期时间:

插入注释文字

基本编辑命令 撤销和重复操作 查找和替换

移动和复制

直接用鼠标拖动

使用CUT

COPY

PASTE

灵活使用HISTORY 面板 SHIFT+F10

表示当前刚完成的操作

重放按钮 复制到剪帖板按钮保存命令按钮

弹出菜单按钮可清除历史记录等操作

上机练习,重复上述操作,记录快捷键

作业:做一个文字型的小网页,将学到的知识运用在上面。

第3单元网页中的图像链接

教学目的:掌握网页中插入图像、修改属性、插入交互图像以及创建交互图像的方法。教学重点:插入图像、控制图像 创建链接、插入交互图像的方法。插入图像操作:

1.在“文档”窗口中,将插入点放置在您要显示图像的地方,然后执行以下操作之一: o 在“插入”栏的“常用”类别中,单击“图像”图标。

在“插入”栏的“常用”类别中,将“图像”图标拖入“文档”窗口中(或者,如果您正处理代码,则拖入“代码”视图窗口中)。

o 选择“插入”>“图像”。

o 将图像从“资源”面板(“窗口”>“资源”)拖到“文档”窗口中的所需位置;然后跳到第 3 步。o 将图像从“站点”面板拖到“文档”窗口中的所需位置;然后跳到第 3 步。o 将图像从桌面拖到“文档”窗口中的所需位置;然后跳到第 3 步。

2.在出现的对话框中执行下列操作之一: o 选择“文件系统”以选择一个图形文件。o 选择“数据源”以选择一个动态图像源文件。3.浏览以选择您要插入的图像或内容源文件。o

如果您正在一个未保存的文档中工作,则 Dreamweaver 生成一个对图像文件的 file:// 引用。将文档保存到站点中的任何位置后,Dreamweaver 将该引用转换为文档相对路径。4.在属性检查器(“窗口”>“属性”)中,设置该图像的属性。设置图像属性

1.设置以下任一选项: o 使用缩略图下面的文本域设置名称,以便在使用 Dreamweaver 行为(例如“交换图像”)或脚本撰写语言(例如 JavaScript 或 VBScript)时可以引用该图像。o “宽”和“高”以像素为单位指定图像的宽度和高度。o

“源文件”指定图像的源文件。单击文件夹图标以浏览到源文件,或者键入路径。

“链接”指定图像的超链接。将“指向文件”图标拖到“站点”面板中的某个文件,单击文件夹图标浏览到站点上的某个文档,或手动键入 URL。有关创建链接的信息,“对齐”对齐同一行上的图像和文本。

“替代”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。对于使用语音合成器(用于只显示文本的浏览器)的有视觉障碍的用户,将大声读出该文本。在某些浏览器中,当鼠标指针滑过图像时也会显示该文本。“地图名称”和“热点工具”允许您标注和创建客户端图像地图。“垂直边距”和“水平边距”沿图像的边缘添加边距(以像素为单位)。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。“目标”指定链接的页应当在其中载入的框架或窗口。_blank,将链接的文件载入一个未命名的新浏览器窗口中。

_parent,将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件。

_self,将链接的文件载入该链接所在的同一框架或窗口中。此目标为默认值,因此通常不需要指定它。

_top,在整个浏览器窗口中载入所链接的文件,因而会删除所有框架。“边框”是以像素为单位的图像边框的宽度。默认为无边框。

“编辑”启动您在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。有关设置外部图像编辑器的信息,“重设大小” Control+代字号(~)

第四单元表格设计

教学目的:学习下列方法

 在“标准”视图中创建和修改表格  向表格添加颜色

 在“标准”视图中设置相对宽度的表格

教学重点:能进行表格设计 教学过程:

在“标准”视图中创建和修改表格 1.在 Dreamweaver 中,选择“文件”>“新建”。即出现“新建文档”对话框。

2.在“空文档”列表中,选择“HTML”,然后单击“创建”以创建一个新的 HTML 文档。3.在“文档”工具栏的“标题”文本域中,输入“表格设计”为文档添加一个标题。

4.选择“文件”>“保存”将该文档保存到本地站点文件夹中。将其命名为 tableModify.htm。

插入表格

现在就可以在文档中插入表格了。

1.在“文档”窗口,将插入点放到文档中,然后执行下列操作之一: o 选择“插入”>“表格”。o 在插入栏的“常用”类别中,单击“表格”图标。

出现“插入表格”对话框。

2.在该对话框中,设置下列选项:

o 在“行数”文本框中,键入 2。o 在“列数”文本框中,键入 2。o 在“宽度”文本框中键入 600,然后在“宽度”文本框右边的弹出式菜单中选择像素。将宽度设置为 600 像素将创建一个固定宽度的表格。稍后,我们将在本教程中更详细地讨论表格宽度。

o 在“边框”文本框中,键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。

3.单击“确定”。

Dreamweaver 将该表格插入到文档中。

4.执行下列操作之一来保存文档: o 选择“文件”>“保存”。o 按 Ctrl+S 组合键

修改表格

下一步,将修改表格的布局。将在表格中添加行和列,并且学习如何合并和拆分单元格以创建所需的页面布局。

1.在左上方的单元格中单击,然后向下拖动直到最下面的行以选择左边的一列。

2.选择“修改”>“表格”>“插入列”。现在该表格包含三列。

3.单击左下方的单元格,然后选择“修改”>“表格”>“插入行或列”。

即出现“插入行或列”对话框。提示: 如果想要插入特定数目的行或列,或者要选择在表格中插入行或列的位置,请选择“插入行或列”选项。

4.在该对话框中,设置下列选项: 对于“插入”,选择行。在“行数”框中,键入 2。对于“位置”,选择 所选之上。5.单击“确定”。

表格即会更新。现在的表格为四行三列。6.保存所做的更改(“文件”>“保存”)。合并和拆分单元格

通过合并和拆分单元格,可以自定义表格的设计以符合布局需要。接下来,将看到如何使用菜单选项或属性检查器来合并或拆分表格单元格。

1.在文档中,将指针从左上方的单元格拖到它下面的一个单元格,以选择表格左列的上面两个单元格。

2.选择“修改”>“表格”>“合并单元格”。

两个单元格合并成一个单元格。

3.单击第二列的第三行,然后向右向下拖动以选择第二列和第三列中的最后两行单元格。

4.在属性检查器中,单击“合并”按钮以合并单元格。选定的单元格合并为一个单元格。

可以拆分单个的单元格或列。

1.单击左上方的单元格。

2.在属性检查器中,单击“拆分单元格”按钮。“拆分单元格”对话框出现。

3.在该对话框中,设置下列选项: o 对于“把单元格拆分”,选择列。o 在“列数”框中,输入 2。4.单击“确定”。表格即被修改。

更改行高和列宽

现在调整该表格的尺寸。将要增加表格的行间距,并且调整表格列间距。

1.沿表格底部边框移动指针直到指针变成一个边框选择器,然后向下拖动以调整表格大小。

如果愿意,还可以使用此方法调整表格中的其他行高。

2.沿一个列的边框移动指针直到指针变成一个边框选择器,然后向左或向右拖动它以更改列宽。

3.调整完成后,保存文档。向表格添加颜色

可以向表格的任何部分添加颜色。将首先向整个表格添加背景颜色,然后对表格中的单元格应用不同的背景颜色。最后,将更改边框颜色。

1.在文档中,单击表格的任何一个单元格,然后在位于文档窗口左下方的标签选择器中单击

标签以选择整个表格。

2.如果属性检查器尚未打开,则打开属性检查器(“窗口”>“属性”)。属性检查器中出现所选表格的属性。

3.在属性检查器中,执行下列操作之一,在“背景颜色”文本框中选择一种颜色: o 单击颜色选择器弹出式菜单,然后从颜色选择器中选择一种颜色。o 输入一个十六进制的颜色值,例如 #CC9933。o 输入一个网页安全色名称,如 goldenrod。将一种背景颜色应用到表格。

4.用同样的方法可以将一种背景颜色应用到表格的单元格中。在左上方的单元格中单击,然后在属性检查器的“背景颜色”文本框中选择一种不同的颜色。5.如果需要,还可以向其他单元格中添加颜色。添加边框颜色

现在,将设置表格边框的颜色。边框颜色同时应用于表格的外边框和内边框。

1.在文档窗口中,选择表格。

2.在属性检查器的“边框”文本框中,使用颜色选择器为表格选择一种边框颜色。

3.完成后,请保存文档。

4.按 F12 键(仅限于 Windows)或者选择“文件”>“在浏览器中预览”,然后选择一种浏览器以查看文档。

在“标准”视图中设置相对宽度的表格

1.在 Dreamweaver 中,选择“文件”>“新建”。

2.在“新建文档”对话框中,已经选定了“基本页”类别;在“基本页”列表中,双击“HTML”创建一个新的 HTML 文档。文档在文档窗口中打开。

3.将该文件保存到本地站点文件夹。将其命名为 tableWidth。4.将插入点放置在文档中。5.在插入栏的“常用”选项卡中,单击“表”按钮。6.在出现的对话框中,设置下列选项: 在“行数”文本框中,键入 2。在“列数”文本框中,键入 3。

在“宽度”文本框中,键入 90,并在“宽度”文本框右边的弹出式菜单中选择百分比。在“边框”文本框中,输入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。7.单击“确定”。

表格即出现在文档中。

8.单击中间列最上方的单元格并拖动到最下方的单元格以选择中间列。

9.在属性检查器中,使用颜色选择器将一种背景颜色应用于该列。

创建其宽度基于像素的表格

现在将添加另外一个表格。其宽度基于像素的表格被设置为某个特定宽度,并且不会随着浏览器窗口大小的改变而改变。

1.在刚刚插入的表格后面插入一个段落回车。2.在插入栏的“常用”选项卡中,单击“表”按钮。3.在出现的对话框中,设置下列选项: 在“行数”文本框中,键入 2。在“列数”文本框中,键入 3。

在“宽度”文本框中,键入 600,然后在“宽度”文本框右边的弹出式菜单中选择像素。在“边框”文本框中,键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。4.单击“确定”。

表格即出现在文档中。

5.单击中间列的最上方单元格并向下拖动到最下方的单元格以选择中间列。

6.在属性检查器中,使用颜色选择器将一种背景颜色应用于该列。

7.按 F12 键(仅限于 Windows)或者选择“文件”>“在浏览器中预览”,然后选择一种浏览器以查看文档。

调整浏览器窗口大小以查看在浏览器窗口改变时,这两个表格是怎样变化的。基于像素的表格保持大小不变,而基于百分比的表格则调整大小以符合浏览器大小。8.文档查看完毕后,请关闭浏览器窗口。9.保存文档。创建和保存新文档

1.在 Dreamweaver 中,选择“文件”>“新建”。

2.在“新建文档”对话框中,已经选定“基本页”类别。在“基本页”列表中选择“HTML”,然后单击“创建”创建一个新的 HTML 文档。文档在文档窗口中打开。

3.将该文档保存到的本地站点文件夹中,并将其命名为 tableLayout.htm。

第五单元 版面设计

1.2.3.教学目的:能轻松地设计出合理的网页设计 教学重点:创建、布局和调整布局表格 课堂讲解:

创建布局表格和布局单元格

绘制布局表格:

如果要创建多个布局表格而又不想 每次都单击布局表格按钮,按住CTRL 再创建。

创建布局表格时会靠近页面边界<8个像时会自动对齐。取消对齐功能用按ALT键

绘制布局单元格: 在页面上制作一个单元格以后,会自动创建了一个包含这个布局单元格的布局表格,在一个布局表格里可以创建几个单元格。

组件绘制嵌套的布局表格:在一个表格里绘制另一个布局表格,称为布局表格的嵌套,在一个表格里可以创建多个嵌套布局表格

使用辅助网格线:菜单中

查看|网格|网格设置 显示网格 CTRL+ALT+G 捕捉网格 SHIFT+ALT+CTRL+G 在布局单 元格中添加内容:添加文本、添加图像、调整布局 表格和布局单元格

单击单元格的边框,或按住CTRL单击单元格中的任何位置,在布局单元格中的边框上会出现控制柄。拖动控制柄就可以改变布局单元格的大小。

移动布局单元格:1是选定,2是拖动或用方向键 每按一次移动一个像素。按住SHIFT键每按一次可移动10个像素。

设置布局单元格:选定单元格在属性面板中设置

设置布局表格:选定后在属性面板中设置

设置自动伸展宽度 设置指定宽度 使用间隔图

第六单元 框

架一、二、三、教学目的:学习框架集,框架集中保存及关联文件。教学重点:框架集的基本概念和基本操作 课堂讲解:

1、框架的作用

2、创建框架方法 用菜单方法

用拖动框架任一角,或一边。按ALT拖动边

框架拖出另一边合并

4、插入预定义框架集

5、嵌套的框架集

保存框架集文件

CTRL+S 只能保存当前页面。保存框架 保存全部

一定要搞清楚框架集和各框架的名字于其对应的关系。

框架与框架的属性

边框 属性 框架集命名

确定框架的大小 设置框架集的边框 改变框架背景的颜色

使用链接控制框架的内容

空白小结:能利用框架更好地规划页面 作业:利用框架作一网页

上级

自身

顶部

第7单元层的运用

一、教学目的:创建层,层的参数选择和属性设置,层的操作,改变层的堆栈顺序,改变层的可见性,层与表格。

二、教学重点:层的运用

三、课堂讲解:

打开“层”面板,请选择“窗口”>“其他”>“层”。F2

创建层:

设置层的可见性 层的名称

创建嵌套层:嵌套层是其代码包含在另一个层中的层。嵌套通常用于将层组织在一起。嵌套层随其父层一起移动,并且可以设置为继承其父级的可见性。

1.层的属性设置:设置以下任一选项:

层 ID 用于指定一个名称,以便在“层”面板和 JavaScript 代码中标识该层。请输入一个名称。只应使用标准的字母数字字符,而不要使用空格、连字符、斜杠或句号等特殊字符。每个层都必须有它自己的唯一名称。

左和上(左侧和顶部)指定层的左上角相对于页面(如果嵌套,则为父层)左上角的位置。宽和高指定层的宽度和高度。

层的移动与对齐: 选择层。

选择“修改”>“对齐”,然后选择一个对齐选项。

调整层大小:当处理页面布局时,可以对层进行选择、移动、大小调整和对齐。在对一个层进行移动、大小调整或对齐之前,必须先选择该层。

若要防止在对层进行移动和大小调整时使层相互重叠,请使用“防止重叠”选项 层与网格对齐: 设置网格显示和对齐,拖动层然后释放即对齐

改变层的顺序:用鼠标拖动上下位置

层与表格:可以转变,菜单 修改|转变|层到表格 表格到层 要防止层的重叠

作业:利用层作一网页排版

第八单元使用“时间轴”面板

“时间轴”面板显示层和图像的属性在一段时间内如何更改。选择“窗口”>“其他”>“时间轴”可打开“时间轴”面板。

“时间轴”弹出式菜单指定当前在“时间轴”面板中显示文档的哪些时间轴。播放栏显示当前在文档窗口中显示时间轴的哪一帧。

帧编号指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧编号。您可以通过设置帧的总数和每秒帧数(fps)来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率,可用于在通常的 Windows 和 Macintosh 系统上运行的大多数浏览器。备注: 较快的速率可能不会提高性能。浏览器始终会播放动画的每一帧,即使它们无法达到指定的帧速率。如果帧速率超过浏览器可以支持的速率,则将被忽略。上下文菜单包含各种与时间轴相关的命令。

“行为”通道是应该在时间轴中特定帧处执行的行为的通道。

动画条显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。关键帧是动画条中已经为对象指定属性(如位置)的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示关键帧。

“动画”通道显示用于制作层和图像动画的条。重命名时间轴

1.选择“修改”>“时间轴”>“重命名时间轴”。2.在“重命名时间轴”对话框中输入新的名称。时间轴制作层动画,请执行以下操作:

1.将层移至它在动画开始时应处于的位置。2.选择“窗口”>“其他”>“时间轴”。

3.选择您要制作动画的层。

4.在层中单击会将一个闪烁的插入点放入层中,但不会选定该层。5.选择“修改”>“时间轴”>“在时间轴上添加对象”,或者简单地将选定层拖至“时间轴”面板中。6.一个条将出现在时间轴的第一个通道中。层的名称将在该条中出现。7.单击位于条末端的关键帧标记。8.在页面上将层移至它在动画结束时应处于的位置。

9.将出现一条线,它显示文档窗口中动画的轨迹。10.如果要让层沿曲线移动,请选择其动画条,然后按住 Ctrl 键并单击(Windows)或按住 Command 键并单击(Macintosh)动画条中部的一个帧,从而在您单击的帧处添加一个关键帧,或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。11.重复此步骤,定义其他关键帧。12.按住“播放”按钮,预览页面上的动画。

 显示和隐藏层,而不是更改多图像动画的源文件。由于新的图像必须进行下载,所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐藏层中同时下载,将不会出现明显的停顿,并且不会缺少图像。 扩展动画条以创建更顺畅的动作。如果动画断断续续并且图像在不同位置之间跳动,请拖动该层动画条的结束帧,使动作延伸到更多的帧。通过延长动画条,可以在运动的开始点和结束点之间创建更多的数据点,同时也会使对象更为缓慢地移动。请尝试增加每秒帧数(fps)以提高速度,但应注意在普通系统上运行的大多数浏览器都不能支持超过 15 fps 的动画速度。请在不同的系统上用不同的浏览器对动画进行测试,以找到最佳的设置。 不要制作大型位图的动画。制作大型图像的动画会导致动画速度减慢。相反,应创建合成图像,并移动图像中较小的部分。例如,可以通过仅制作汽车轮胎的动画来显示汽车的运动。 创建简单的动画。不要创建对当前浏览器要求过高的动画。即使在系统或 Internet 性能降低时,浏览器始终会播放时间轴动画中的每一帧。多个时间轴:

1.若要新建时间轴,请选择“修改”>“时间轴”>“添加时间轴”。

2.若要删除选定的时间轴,请选择“修改”>“时间轴”>“删除时间轴”。这将永久删除选定时间轴中的所有动画。

3.若要重命名选定时间轴,请选择“修改”>“时间轴”>“重命名时间轴”,或者在“时间轴”面板的“时间轴”弹出式菜单中输入新的名称。

4.若要在“时间轴”面板中查看另一个时间轴,请从“时间轴”面板的“时间轴”弹出式菜单中选择一个新的时间轴。拖动轨迹来创建时间轴:

1.选择一个层。

2.将该层移至它在动画开始时应处于的位置。

确保您已选定该层;如果插入点位于该层中,则说明尚未选定该层。若要选择一个层,请单击层标记或层的选择柄,或者使用“层”面板。3.选择“修改”>“时间轴”>“记录层的轨迹”。4.在页面上拖动层以创建轨迹。

5.当到达动画应停止的点时释放该层。

Dreamweaver在时间轴上添加一个动画条,其中包含适当数量的关键帧。6.在“时间轴”面板中,单击“倒带”按钮;然后按住“播放”按钮预览动画。

第9单元行为1、2、3、教学目的:行为概述,自带的行为使用 教学重点:行为的使用 课堂教学

行为基础

在网页制作中,几乎所有的特效都是通过编写脚本语言来实现的。通常应用较多的脚本语言有两种:VBScript和JavaScript。其中JavaScript因为其简单易用和众多的支持者而在网页制作者中最为广泛流行。

在我们设计网页的时候,接受事件和响应事件的对象一般就是我们在前面章节中介绍的页面元素或浏览器本身。在HTML语言中,这些页面元素是用“Tag”(HTML标记)来表示的,下面列出了我们在这一章中可能用到的HTML标记: 定义文档正文; 定义链接; 定义图像;
定义表单;

定义表格; 定义表格的一行;

定义表格的单元格(表格的具体数据); 定义框架集; 定义框架; 定义块元素;

定义段落 ;

    定义有序列表;
      定义无序列表;
    • 定义列表元素;

      我们这一章可能用到的常见的事件有: onMouseOver:鼠标指针移到目标上时; onMouseUp:按下鼠标再放开左键时; onMouseOut:鼠标指针从目标移开时;

      onMouseDown:按下鼠标左键时(不需要放开左键); onClink:鼠标左键单击时; onDblClick:鼠标左键双击时; onLoad:载入网页时; onUnload:离开页面时;

      onResize:当浏览者改变浏览窗口的大小时; onScroll:当浏览者拖动滚动条的时; 行为面板

      依次单击菜单栏【Windows/Behaviors】(窗口/行为),或按快捷键『Shift+F3』,或单击“Show Behaviors”(显示行为面板)按钮,展开“Design/Behaviors”(设计/行为)面板(如图13-1):

      图13-1 “+”(添加行为按钮):单击该按钮添加行为(包括事件和动作),常见的动作如下: “Call JavaScript”(调用JavaScript):单击该选项可以调用自己制作的JavaScript脚本或第三方开发的JavaScript脚本;

      “Change Property”(改变属性):改变页面元素的各项属性;

      “Check Browser”(检查浏览器):同一个网页,在不同的浏览器上的显示可能大为不同;为了使我们的网页在各种不同的浏览器中都完美无缺,我们可以分别针对不同的浏览器将同一网页制作成几个不同页面,然后再调用Check Browser,根据访问者浏览器的不同自动进入相应的页面;

      “Check Plugin”(检查插件):比如你的网页上有一个Flash动画,而访问者的浏览器没有Flash播放插件时,利用此功能你可以按你的解决方案对访问者进行提醒;

      “Control Shockwave or Flash”(控制Shockwave或Flash):应用此功能我们可以在网页上做一些交互按钮,使用户可以控制动画的播放进程;

      “Drag Layer”(拖动层):用来制作随鼠标移动而移动的网页特效; “Go to URL”(转到URL):应用此项可以实现一些比较高级的跳转;比如:单击一个链接可以同时打开几个页面,打开一个页面后自动跳转到一个新的页面等;

      “Hide Pop-Up Menu”(隐藏弹出菜单):应用此功能可以在制作下拉菜单时隐藏菜单; “Jump Menu”(跳转菜单):应用此功能可以插入跳转导航菜单;前面已经讲述; “Jump Menu Go”(跳转菜单开始):应用此功能为跳转菜单增加一个“Go”按钮; “Open Browser Window”(打开浏览器窗口):应用此功能可以打开浏览器窗口并设置新窗口的大小、工具条显示情况等属性;

      “Play Sound”(播放声音):应用此功能可以为网页加入声音;

      “Popup Message”(弹出信息):应用此功能可以弹出消息框来显示预先设定好的文本; “Preload Images”(预先载入图像):应用此功能可以在页面载入时预先读入某些特效的图像,以避免事件发生时读取延迟和保持效果的连续性;

      “Set Nav Bar Image”(设置导航条图像):应用此功能可以制作有翻滚特效的导航条; “Set Text”(设置文字):应用此功能可以在特定的地方显示文字,其中: “Set Text of Frame”(设置框架文字):应用此功能可以在框架内显示信息; “Set Text of Layer”(设置层文字):应用此功能可以在层内显示信息;

      “Set Text of Status Message”(设置状态栏文字):应用此功能可在状态栏显示信息; “Set Text of Text Field”(设置文本域文字):应用此功能可以在文本框显示信息; “Show Pop-Up Menu”(显示弹出菜单):应用此功能可以在制作下拉菜单时显示菜单; “Show-Hide Layers”(显示-隐藏图层):应用此功能可以显示或隐藏图层;

      “Swap Image”(交换图像):应用此功能不仅可以建立一对一的翻滚图,还可以建立一对多等更为复杂的替换特效;

      “Swap Image Restore”(恢复交换图像):应用此功能可以将已经翻滚的图像还原;; “Timeline”(时间轴):应用此功能可以制作与时间轴有关的动画效果,其中: “Go to Timeline Frame”(转到时间轴帧):跳转到指定帧; “Play Timeline”(播放时间轴):播放动画; “Stop Timeline”(停止时间轴):停止动画;

      “Validate Form”(检查表单):应用此功能可验证用户提交的表单内容是否符合要求; “—”(删除行为按钮):选择一个行为后,单击该按钮删除所选行为(包括事件和动作); “▲/▼”:选择一个行为后,单击该按钮可以将所选行为上移或下移一行; “Events”(事件):显示为对象设置的事件; “Actions”(动作):显示与左侧事件对应的动作; 行为操作

      在这一节中,我们将通过具体实例讲述几个我们在网页设计中应用较多的交互效果。改变对象属性

      在页面上插入一个图层,在图层中输入一段文本,名称采用默认的“Layer1”,“Tag”(标记)采用默认的“DIV”,并保持该图层被选中(如图13-2):

      图13-2 单击“Behaviors”(行为)面板上的“+”按钮,在弹出对话框中选中“Change Properties”(改变属性)(如图13-3),弹出“Change Properties”(改变属性)对话框(如图13-4)。

      图13-3

      图13-4 “Type of Object”(对象类型):在右侧的下拉选单中选择标记,如“DIV”(和“Properties”(属性)面板中一致);

      “Named Object”(已命名的对象):从右侧下拉选单中选中对象名称,如“Layer1”; “Property”(属性):设置对象的属性,包括两个选项:

      “Select”(选择):从下拉选单中选择需要更改的属性;从最右侧的下拉选单中选中兼容的浏览器类型;

      “Enter”(输入):自己输入需要修改的属性;

      本例中我们选中“Select”,并选中“style.backgroundColor”(背景颜色); “New Value”(新值):为所选的属性值设置新值,如“green”(绿色);

      完成上述设置后,单击“OK”按钮保存并退出,这时我们可以发现“Behaviors”(行为)面板中已经出现了我们所设的行为(如图13-5):

      图13-5 Dreamweaver MX默认的事件为“onClick”(单击),单击“Events”(事件)列右侧的三角形按钮“▼”,在弹出菜单中选择“onMouseOver”(如图13-6,图13-7):

      图13-6

      图13-7 如果找不到所要地事件,可以选择最底部的“Show Events for”(显示事件),在子菜单中选择较高版本的浏览器(如图13-8):

      图13-8 按快捷键『F12』浏览,可以看到预料的效果(如图13-9):

      图13-9 13.3.2 检测浏览器

      为了使我们的网页在各种浏览器中的显示完美无缺,我们必须为同一网页制作几个适合相应类型浏览器的文件。在本例中,我们假设已经为某一页面制作了三个网页文件“ie.htm”、“netscape.htm”和“other.htm”,分别适用于IE、Netscape和其他类型的浏览器。由于使用IE的用户是大多数,我们将默认的页面设置为“ie.htm”,将检测浏览器的事件设置在“ie.htm”上。也就是说,默认的是“ie.htm”,然后在“ie.htm”加载时(“onLoad”(加载)事件),激发检测浏览器的动作(若用户浏览器为IE,则保持原来的页面不变;若用户浏览器为Netscape,则跳转到“netscape.htm”;若用户使用的是其他浏览器,则跳转到“other.htm”)。

      打开网页文件“ie.htm”,在状态栏上单击选中HTML标记“”(如图13-10),使之变为粗体(如图13-11)。

      图13-10

      图13-11 在“Behaviors”(行为)面板中单击“+”(添加行为)按钮,在弹出菜单中选中“Check Browser”(检测浏览器)(如图13-11),弹出“Check Browser”(检测浏览器)对话框(如图13-12):

      “Check Browser”(检测浏览器)对话是由一组条件语句组成的,根据判断的结果做出选择,在三个网页当中选其一。这个动作可以明确判断两种浏览器:Netscape 和IE,不是这两种浏览器一概做“Other Browsers”(其他浏览器)处理。判断每一种浏览器都会有三种选项:“Go to URL”(打开一个指定文件),“Go to Alt URL”(打开另一个指定文件),“Stay on this page”(停留在当前页面)。“URL”和“Alt URL”是定义“Go to URL”和“Go to Alt URL”所指向页面的。

      由于我们当前页面就是“ie.htm”,我们在这里将“URL”设为“netscape.htm”,将“Alt URL”设为“other.htm”。然后只需要将“Netscape Navigator”设为“Go To URL(netscape.htm)”,将“Internet Explorer”设为“Stay on this Page(ie.htm)”,其他所有的都设为“Go To Alt URL(other.htm)”就可以了(如图13-12)。

      图13-12 单击“OK”按钮保存并退出后,我们可以发现“Behaviors”(行为)面板中已经添加了我们刚才设置的行为:“Events”(事件)为“onLoad”(载入);“Actions”(动作)为“Check Browser”(检测浏览器)(如图13-13):

      图13-13 检测插件

      Flash动画不仅体积小、制作简便,而且具有交互功能。所以,如果在我们的网页上放上几个小Flash,将会使网页增色不少。但遗憾的是,运行Flash需要插件的支持,但并不是所有的用户的浏览器都安装了Flash插件。如果用户打开一个含有Flash的网页却显示不出来,那我们岂不是弄巧成拙!

      怎么解决这个问题呢?学过了上一节,读者也许有一点思路了。对了,我们可以为包含Flash的页面给出另外一个版本。当加载页面时(“onLoad”事件),执行检测Flash插件的动作:若用户安装了Flash插件,保持页面不变;否则跳转到另一个页面。

      在本例中,我们假设有一个含有Flash的页面“flash.htm”,我们已经给它另做了一个内容相同不含Flash的文件“html.htm”。打开“flash.htm”,单击选中任务栏上的“”标记,然后单击“Behaviors”(行为)面板上的“+”(添加行为)按钮,在弹出对话框中选择“Check Plugin”(检测插件)(如图13-14),弹出“Check Plugin”(检测插件)对话框(如图13-15)。

      图13-14

      图13-15 “Plugin”(插件):设置需要检测的插件,其中: “Select”(选择):在右侧的下拉菜单中选择所要检测的插件,如“Flash”; “Enter”(输入):直接输入第一项没有列出的插件,一般很少用;

      “If Found,Go To URL”(如果有,前往URL):设置如果检测时发现了目标插件时所要打开的页面;

      “Otherwise,Go To URL”(否则,前往URL):设置当检测时没有发现目标插件时所要打开的页面;

      “Always go to first URL if detection is not possible”(如果无法侦测,永远前往第一个URL):选中此项表示如果不能进行插件检查就进入第一个页面;一般不选;

      完成上述设置后,单击“OK”按钮保存并退出。我们可以发现“Behaviors”(行为)面板中已经添加了我们刚才设置的行为:“Events”(事件)为“onLoad”(载入);“Actions”(动作)为“Check Plugin”(检测浏览器)(如图13-16):

      图13-16 拖动层

      如果我们想在网页上作一个像拼图游戏、拖出菜单这类可以随用户的鼠标指针移动的页面元素,我们就需要应用“Drag Layer”(拖动层)行为了。

      插入一个图层并将需要移动的元素放入其中,选中该层(此时状态栏的标记“”变成粗体),单击“Behaviors”(行为)面板中的“+”按钮并从中选择“Drag Layer”(拖动层)命令(如图13-17),弹出“Drag Layer”(拖动层)对话框,默认为“Basic”(基本)选项卡(如图13-18)。

      图13-17

      图13-18 “Layer”(层):从右侧下拉选单中选择需要被拖动的层; “Movement”(移动):设置层可以拖动的范围,有两个选项: “Uncontrained”(不限制):选中此项可以任意拖动层;

      “Constrained”(限制):选中此项只能在所设范围内拖动层;在右侧的“Up”(上)、“Down”(下)、“Left”(左)和“Right”(右)文本域中设置相对于图层的起始位置的范围; “Drag Target”(放下目标):在“Left”和“Top”文本域中设置放置目标的位置;或单击“Get Current Position”(取得目前位置)按钮自动将当前图层的所在位置输入这两个文本域中。(放置目标指用户所拖动的层需放置的地方;当层的左上角坐标和我们设置的值相匹配时,即达到了放置目标,该值是相对于浏览器窗口的左上角而言)

      “Snap if Within”(靠齐距离):在文本域中输入值,指定图层与放置目标的靠近距离(即当拖动图层与放置目标的距离小于该值时,自动将图层与放置目标对齐); 如果还要定义图层的拖拽范围,可以单击“Advanced”(高级)标签,弹出“Advanced”(高级)选项卡(如图13-19):

      图13-19 “Drag Handle”(拖拽控制点):设置图层中用于拖动图层的区域,包括两个选项: “Entire Layer”(整个层);

      “Area Within Layer”(层内区域):在“Left”和“Top”文本域中设置拖拽区域左上角点的坐标;在“Width”和“Height”文本框中输入拖动区域的宽度和高度值; “While Dragging”(拖拽时):设置拖动时层的状态:

      “Bring Layer to Front”(将层移至最前):选中此项表示在拖动层时将层移动到最顶层; “then”(然后):设置放置层时层的叠放状态:

      “Leave on Top”(留在最上方):选中此项表示将层保留在最顶端; “Restore Z-Index”(还原Z序列):还原为原来的叠放顺序;

      “Call JavaScript”(呼叫JavaScript):设置拖动层时调用的JavaScript代码; “When Dropped”(放下时):设置放下时层的状态:

      “Call JavaScript”(呼叫JavaScript):设置放下层时调用的JavaScript代码; “Only if snapped”(只有在靠齐时):选中此项表示只有在靠齐时才调用JavaScript代码;

      完成上述设置后,单击“OK”按钮保存并退出。我们可以发现“Behaviors”(行为)面板中已经添加了我们刚才设置的行为:“Events”(事件)为“onClick”(载入);“Actions”(动作)为“Drag Layer”(检测浏览器)(如图13-20):

      图13-20 控制Shockwave或Flash 在“Insert/Common”(插入/标准)面板中单击“Flash”(插入Flash)按钮(如图13-21),选择一个Flash文件并将其命名为“flash1”(如图13-23)。

      图13-21 在“Insert/Forms”(插入/表单)面板中单击“Button”(插入按钮)按钮(如图13-22),插入几个按钮并将它们的“Action”(动作)设置为“none”(无),“Label”(标签)依次设置为“Play”(播放)、“Stop”(停止)、“Rewind”(返回)和“GoTo4”(转到第4帧)(如图13-23)。

      图13-22

      图13-23 选中一个按钮“Play”(播放),然后在“Behaviors”(行为)面板中单击“+”按钮,在弹出菜单中选中“Control Shockwave or Flash”(控制Shockwave或Flash)(如图13-24),弹出“Control Shockwave or Flash”(控制Shockwave或Flash)对话框(如图13-25)。

      图13-24

      图13-25 “Movie”(影片):从下拉选单中选择要控制的动画,如“flash1”; “Action”(动作):设置控制动画的动作,其中: “Play”(播放):选择该项表示播放动画; “Stop”(停止):选择该项表示停止动画;

      “Rewind”(倒带):选择该项表示使播放的动画返回初始位置;

      “Go to Frame”(前往帧):选择该项并在其后的文本框中数字表示将动画跳至指定帧; 完成上述设置后,单击“OK”按钮保存并退出。我们可以发现“Behaviors”(行为)面板中已经添加了我们刚才设置的行为:“Events”(事件)为“onClick”(单击);“Actions”(动作)为“Control Shockwave or Flash”(控制Shockwave或Flash)(如图13-26):

      图13-26 同样可以完成对其他按钮的设置,设置完成后按快捷键『F12』浏览即可看到预料的效果。转到URL 关于文字的链接我们前面讲得已经非常多了,但是应用“Go To URL”(转到URL)我们可以实现一些高级的跳转。我们下面就来讲一个单击一个链接同时打开几个页面的例子。单击“Insert/Frames”(插入/框架)面板上的“Left and Nested Top Frames”(左框架嵌套顶框架)按钮(如图13-27),插入一个嵌套框架集(如图13-29)。

      图13-27 单击“Insert/Forms”(插入/表单)面板上的“Button”(按钮)按钮(如图13-28),插入一个按钮(如图13-29)。

      图13-28 选中该按钮并将其“Action”(动作)设为“none”(无),单击“Design/Behaviors”(设计/行为)面板上的“+”按钮,选中“Go To URL”(转到URL)(如图13-29),弹出“Go To URL”(转到URL)对话框(如图13-30)。

      图13-29 “Open In”(打开在):设置链接的打开方式;列表框中列出了当前框架集中的所有框架的名字以及主窗口,如果页面没有框架,则只有“Main Window”(主窗口)一个选项。“URL”(URL):设置在选定窗口中打开的页面URL地址; 在本例中,我们为三个框架“leftFrame”、“topFrame”和“mainFrame”分别设置URL地址“http://”、“http://”和“http://www.5460.net”,设置好后单击“OK”按钮保存并退出(如图13-30):

      图13-30 这时我们可以发现“Behaviors”(行为)面板中已经添加了我们刚才设置的行为:“Events”(事件)为“onClick”(载入);“Actions”(动作)为“Go To URL”(转到URL)(如图13-31):

      图13-31 按快捷键『F12』浏览,即可看到我们预料的效果(如图13-32):

      图13-32 13.3.7 打开浏览器窗口 应用“Open Browser Window”(打开浏览器窗口)行为可以在用户触发该行为时打开一个新的浏览器窗口,在新窗口中载入指定URL地址上的网页。该选项还可以设定新窗口的各项属性,如窗口的大小、是否显示导航栏、状态条等。如果没有指定窗口的属性,则按启动窗口的属性和大小打开,一旦指定了窗口的任何属性,将自动关闭其他属性。

      下面我们就利用“Open Browser Window”(打开浏览器窗口)行为来实现在浏览网站时经常看到的广告窗口。

      首先准备一个页面如“advertise.htm”作为广告,然后在我们的主页上单击选中状态栏中的标记“”,单击“Behaviors”(行为)面板中的“+”按钮,选中“Open Browser Window”(打开浏览器窗口)(如图13-33),弹出“Open Browser Window”(打开浏览器窗口)对话框(如图13-34)。

      图13-33

      图13-34 “URL to Display”(要打开的URL):设置新窗口中所要打开的页面地址,如“advertise.htm”;

      “Window Width”(窗口宽度):设置新窗口的宽度; “Window Height”(窗口高度):设置新窗口的高度; “Attributes”(属性):设置新窗口的属性,其中: “Navigation Toolbar”(导航工具栏):选中此项表示在新窗口中显示导航工具栏; “Location Toolbar”(地址工具栏):选中此项表示在新窗口中显示地址工具栏; “Status Bar”(状态栏):选中此项表示在新窗口中显示状态栏; “Menu Bar”(菜单条):选中此项表示在新窗口中显示菜单栏;

      “Scrollbars as Needed”(需要时使用滚动条):选中此项当内容超出新窗口时显示滚动条;

      “Resize Handles”(调整大小手柄):选中此项表示允许用户调整新窗口大小; “Window Name”(窗口名称):设置新窗口的名称;

      由于广告窗口需要向用户传递的信息不多,所以一般尺寸较小,且不需要各种工具条。我们在此为其设置好尺寸后,其他都不设。单击“OK”按钮保存并退出,这时我们可以发现“Behaviors”(行为)面板中已经添加了我们刚才设置的行为:“Events”(事件)为“onLoad”(载入);“Actions”(动作)为“Open Browser Window”(打开浏览器窗口)(如图13-35):

      图13-35 按快捷键『F12』浏览,可以看到当主页打开后,立即弹出广告窗口(如图13-36):

      图13-36 播放声音

      调用“Play Sound”(播放声音)行为可以方便地在网页中加入音乐。

      单击“Insert/Forms”(插入/表单)面板上的“Button”(按钮)按钮(如图13-37),插入一个按钮(如图13-29)。

      图13-37 选中该按钮并将其“Action”(动作)设为“none”(无),单击“Design/Behaviors”(设计/行为)面板上的“+”按钮,选中“Play Sound”(播放声音)(如图13-38),弹出“Play Sound”(播放声音)对话框(如图13-39)。

      图13-38

      图13-39 “Play Sound”(播放声音):设置要加入网页的音乐文件即可(如果听不到声音,可能是浏览器不支持所选音乐格式)。

      设置完后单击“OK”按钮保存并退出。这时我们可以发现“Behaviors”(行为)面板中已经添加了我们刚才设置的行为:“Events”(事件)为“onClick”(点击);“Actions”(动作)为“Play Sound”(播放声音)(如图13-40):

      图13-40 这时我们可以发现页面中出现了一个“Plugin”(插件)图标(如图13-41)。选中该图标后,“Properties”(属性)面板的内容发生相应变化,单击“Parameters”(参数)按钮(如图13-41),弹出“Parameters”(参数)对话框,我们可以在该对话框中为声音播放设置各项参数(如图13-42)。

      图13-41

      图13-42

      1、APPLET2、3、第十单元插入多媒体对象

      教学目的:网页中插入FLASH SHOCKWAVE ACTIVE PLUGIN JAVA 教学重点:插入对象的具体方法 课堂教学

      插入FLASH按扭的对话框

      插入FLASH动画方法对话框

      插入FLASH文本

      修改属性

      添加SHOCKWAVE 对象

      java applte对象

      添加plugin

      属性对话框

      作业:在自己的网页上添加声音

      第12单元 模板和库

      一、教学目的:理解模板的作用,掌握模板的创建和应用。

      二、教学重点:模板的应用。

      三、内容: 模板的概念

      在制作一个网站的整套页面时,我们会发现大部分页面的基本格式都是相同的。比如说页面背景、文字样式、导航条、版权信息等。所以我们可以将页面先做成类似申请表一样的表格,将那些相同的内容固定下来,并留出一定的空白以供将来插入不同的内容。以后我们制作页面时就只需要在这个表格的基础上添加新的内容就可以了。一般网页的基本组成部分:

      “logo”:即网站的徽标,这是一个网站的标志,一般放在每个页面最顶部的左上角,其一般和标准大小为88px×31px;

      “banner”:即页面上的广告条,可放在页面的任意位置

      “Nav Bar”:即页面上的导航条,一般放在页面的顶部和底部,用来快捷地在网站各页面之间跳转

      “Location Bar”:即页面上的地址条,一般在导航条下面,用来告诉用户当前页面所属的类别和树型目录

      “content”:即页面的正文,这是每个页面区别于其他页面的地方;

      “copyright”:即页面上的版权信息,一般在页面的最底部模板中的元区域可以分为两类:锁定区域和可编辑区域。锁定区域是指在任何基于该模板的网页中都不可编辑或修改的区域,可编辑区域是指在基于该模板的网页中可以被编辑或修改的区域。当我们编辑模板本身时,二者皆可修改;但当我们编辑基于模板的文挡时,后者不可修改。

      在我们批量制作网页时,logo、导航条和版权信息往往是不变的,此外页面的背景和文字样式也可能需要统一,因此我们可以将这些元素设置为锁定区域。而地址条、正文和页面的标题往往是不同的,我们可以将这些元素设置为可编辑区域。创建模板文件

      【File/New】(文件/新建)(如图14-3),弹出“New Document”(新建文档)对话框(如图14-4)。在“General”(常规)选项卡的左边“Category”(类别)列表框中选中“Basic Page”(基本页面),然后在右边“Basic Page”(基本页面)列表框中选中“HTML Template”(HTML模板),然后单击“OK”按钮保存并退出

      新建文件窗口的标题栏中的文件名前出现了 [<