dreamweaver网页制作 第1章 DreamWeaver简介
- 格式:doc
- 大小:293.00 KB
- 文档页数:7
第1章体验Dreamweaver 8梦幻境界Dreamweaver 8是Macromedia公司最新推出的一个功能强大的网页制作工具。
与Dreamweaver MX 2004相比,其功能有很多改进和增强。
本章将带你进入Dreamweaver 8所构建的梦幻世界。
本章首先要介绍网站开发的基础知识,然后讲述Dreamweaver 8的新增功能、编辑环境以及面板等内容。
本章学习要点:了解网站及开发技术的基础知识认识Dreamweaver 8的新增功能熟悉Dreamweaver 8的编辑环境初步认识Dreamweaver 8的面板2Dreamweaver 8网页制作与网站开发标准教程1.1 Internet与Web基础知识Internet是一个全球性的计算机互联网络,它是将不同地区而且规模大小不一的网络互相连接而成。
所有人都可以通过网络的连接来共享和使用Internet中各种各样的信息。
随着Internet的快速发展,它已经深刻地影响和改变着我们的生活和世界。
1.1.1 万维网和浏览器1.1.2 IP地址和域名表1-1机构域名表1.1.3 统一资源定位器(URL)1.2 网站开发技术简介网站开发人员必须掌握一定的Web开发技术和相应的开发工具才能“构造”出真正的Web网站。
本节就一些常用的网站开发技术做一个简单的介绍,让我们在开发网站之前先对该领域的开发工具有一个大致地了解。
1.2.1 HTML第1章第1章体验Dreamweaver 8梦幻境界31.2.2 CSS1.2.3 ASP1.2.4 PHP1.2.5 JSP1.3 Dreamweaver 8新增功能网页制作爱好者都翘首以盼的Dreamweaver 8终于问世了,它增加了许多新特性,在原来的Dreamweaver MX 2004的基础上,更加凸现了功能灵活而又强大的作风。
1.3.1 Dreamweaver发展简介1.3.2 缩放、手形、选取工具1.3.3 辅助线工具1.3.4 扩展的CSS支持4Dreamweaver 8网页制作与网站开发标准教程1.3.5 代码折叠1.3.6 其他新功能1.4 Dreamweaver 8工作环境第1次使用Dreamweaver 8时,可以执行【开始】|【程序】|Macromedia|Macromedia Dreamweaver 8命令启动Dreamweaver 8。
Dreamweaver网页设计从零开始Chapter 1:认识DreamweaverDreamweaver是一款由Adobe公司开发的专业网页设计软件。
它集成了丰富的功能和工具,为用户提供了一种简便而高效的方式来创建和编辑网页。
Dreamweaver支持多种开发语言,包括HTML、CSS、JavaScript和PHP等,使得用户可以灵活地设计和开发网页。
Chapter 2:Dreamweaver的基本设置在开始使用Dreamweaver之前,我们需要进行一些基本的设置。
首先,我们可以选择合适的界面布局,例如工作区布局、代码布局或设计布局,以便于我们更好地编写和编辑代码。
其次,我们可以根据自己的需求设置代码提示和自动补全功能,提高工作效率。
Chapter 3:创建网页模板在设计网页时,使用模板可以让我们更加方便地保持风格的一致性。
Dreamweaver提供了创建网页模板的功能。
我们可以先设计一个主模板,包含网页的共同元素,例如页眉、页脚和导航栏等。
然后,我们可以基于这个主模板创建其他页面,只需要修改页面中的内容,而不必每次都从头开始设计。
Chapter 4:网页布局设计网页的布局设计是网页设计中的重要一环。
Dreamweaver提供了多种布局工具和功能,例如网格系统和响应式布局。
网格系统可以帮助我们将网页划分为几个等分,有助于页面元素的排列和对齐。
而响应式布局可以根据不同的设备屏幕大小自动调整网页的布局,保证用户在不同设备上都能有良好的浏览体验。
Chapter 5:网页元素的设计与编辑在Dreamweaver中,我们可以方便地设计和编辑网页的元素。
例如,我们可以使用图像编辑工具对图片进行裁剪、调整大小和优化处理,以便网页加载更快。
我们还可以使用CSS样式对文字、链接和按钮等元素进行美化。
此外,Dreamweaver还提供了预设的网页元素模板,可以快速插入常用元素,如表格、表单和轮播图等。
Chapter 6:添加动态效果动态效果能够增加网页的互动性和视觉效果。
学会使用AdobeDreamweaver进行网页动画制作第一章:Adobe Dreamweaver简介Adobe Dreamweaver是一款功能强大的网页设计和开发工具,由Adobe公司开发。
它集成了网页制作所需的各种工具和功能,能够帮助用户创建出精美、功能丰富的网页。
Dreamweaver具有直观的界面和强大的编辑器,使得用户可以轻松地编辑和调整页面布局、添加多媒体元素等。
同时,它还支持网页动画制作,提供了丰富的动画特效和工具,方便用户创建出生动有趣的网页。
第二章:了解网页动画网页动画是指在网页中使用图像、文字或其他元素进行动态效果展示的技术。
通过使用网页动画,可以使网页更加吸引人,增强用户的视觉体验,提高网页的互动性和吸引力。
常见的网页动画效果包括渐变、旋转、缩放、动态图像切换等。
在使用Dreamweaver制作网页动画之前,我们需要了解不同的网页动画效果以及如何选择合适的效果来展示我们的内容。
第三章:使用Dreamweaver制作基础网页动画在Dreamweaver中制作网页动画非常简单。
首先,我们可以使用内置的动画特效库来选择我们所需的动画效果,如文本闪烁、图像飞入等。
只需要简单的拖拽和设置一些参数,就能够在网页中实现这些动画效果。
另外,Dreamweaver还提供了可视化的时间轴编辑器,方便用户调整动画的持续时间、延迟时间和循环次数等。
第四章:自定义网页动画效果除了使用Dreamweaver内置的动画特效库,我们还可以通过自定义代码来创造独特的网页动画效果。
Dreamweaver支持HTML、CSS和JavaScript的编辑和预览,我们可以使用这些语言来编写我们所需的动画效果代码。
通过控制元素的位置、大小、颜色和透明度等属性,以及使用CSS3的过渡和动画效果,我们可以实现更加丰富多样的网页动画效果。
此外,还可以结合JavaScript的能力,实现更高级的动画效果,如拖拽、碰撞效果等。
Dreamweaver概述:dreamweaver简介一、dreamweaver的简介1、简单介绍将flash和fireworks整合为网站的概念(他们既是分开的软件,但又有一体性,flash广告以及fireworks效果图主要是在dreamwerver 中进行实现的变成网页格式)2、讲解网站的概念:谈到网站,那么它是在什么上面实现的呢?所有网站都是在服务器上实现的,服务器(是指硬件产品的一种高端配置)一般都是24小时运转的。
网址的查找都是在URL(是指全球资源定位器)上查找的是在地址栏输入地址可以链接的地址那么提到网页,我们经常见到的几种分类:……html……htm……asp……jsp……php……xhml……xml(http代表超级文本传输协议.那么我们经常见到网址前都带www是代表什么意思呢(代表万维网的意思).其后缀…….cn代表中国区域…….com代表公司…….net代表工艺性网站…….org代表组织、团体…….gov代表政府…….mav代表军事网3、网页的构成:是由图片、文字、动画、脚本(指小的程序段)、多媒体组成。
以上内容又是由表格、图层来定位的。
在网页中dreamweaver并不是唯一的制作网页的工具,利用frompage(适用于自学,功能没有dreamweaver强大),记事本也可以生成网页(*.txt不可被病毒攻击,为最安全的模式,所以一般写程序都在记事本中编辑),还包括word也可以生成网页(不过局限性大),photoshop也可以生成网页。
那么我制作网页是用来干什么的呢,是为了经济效益,是一种视觉眼球经济,既然是经济那么我们就要针对不同的人群来制作相应的内容:大体上在城市一般以过度色,或单色、冷色调为主(因为城市喧闹的原因)城乡一般则以暖色调或鲜艳的颜色为主。
第一章Dreamweaver8概述1-1Dreamweaver8简介Dreamweaver8是Macromedia公司最新推出的一款功能强大的网页制作软件,它继承了以前版本易学易用的特点,同时又增加了许多特点,比如图形的编辑、CSS样式表、表格的嵌入、FTP上传与支持建立网站应用程序等新功能。
它将可视布局工具,应用程序开发功能和代码编辑支持组合为一个功能强大的工具系统,使每个级别的开发人员和设计人员都可利用它快速地创建网页界面。
Dreamweaver8支持ActiveX、Javascript、Flash、ShockWave等特性。
用于对Web 站点,Web页面和Web应用程序进行设计、编码和开发。
由于Dreamweaver采用了Roundtrip HTML技术。
这项技术使得网页在Dreamweaver和HTML代码编辑器之间可以进行自由转换,HTML句法及结构不变。
这样,专业设计者可以在不改变原有编辑习惯的同时,充分享受到可视化编辑带来的益处。
由于其强大的功能特性,它已成为一款不可多得的网页制作利器。
1-2Dreamweaver8的新功能1.改进的工作流程2.扩展的CSS支持3.快速的文件传输4.对XML/XSLT的远景支持5.样式渲染工具栏6.放大工具7.改进的站点同步和登记/注销8.比较文件9.特殊粘贴1-3 Dreamweaver8的界面简介1.选择工具界面当第一次启动Dreamweaver8时,将出现“工作区设置”,左边是“设计器”,右边是“编码器”工作区布局。
我们选择设计器工作区模式。
“设计器”工作区布局采用多文档界面形式,将所有文档窗口以及面板模式集合到主窗口中,并将面板组叠放在窗口的右边,以方便用户操作。
“设计器”默认一开始是弹出标尺的,如果您不习惯,可以在标尺上点击右键,隐藏标尺,或者快捷键Ctrl+Alt+R.“编码器”工作模式主要针对喜欢用代码编写网页的用户而设计的。
2.Dreamweaver8的窗口组成它由七个部分组成:标题栏、菜单栏、快捷插入面板、工具栏、文档窗口、属性面板和面板组组成。
Dreamweaver网页制作教案第一章:Dreamweaver概述1.1 课程介绍了解Dreamweaver作为网页制作工具的优势熟悉Dreamweaver的工作界面1.2 创建和管理网页创建新文档打开和保存网页管理标签库1.3 实践操作制作一个简单的网页学会使用Dreamweaver的实时视图和代码视图第二章:网页基本结构2.1 网页元素文本图像表格表单2.2 排版和格式化字体和大小颜色和样式段落对齐和间距2.3 实践操作制作一个包含文本、图像和的网页学习使用Dreamweaver的排版和格式化工具第三章:CSS样式3.1 CSS介绍了解CSS的作用和优势熟悉CSS的基本语法3.2 创建和应用CSS样式创建样式表应用样式到网页元素编辑和删除样式3.3 实践操作制作一个使用CSS样式的网页学习使用Dreamweaver的CSS面板第四章:网页布局4.1 布局技术表格布局CSS布局框架布局4.2 常用布局方法固定布局可变布局响应式布局4.3 实践操作制作一个使用表格布局的网页学习使用CSS布局和响应式布局第五章:表单和交互5.1 表单元素表单标签输入框选择框文件5.2 验证和提交表单表单验证方法提交表单到服务器接收服务器返回的数据5.3 实践操作制作一个简单的表单页面学习表单的验证和交互功能第六章:Dreamweaver 网站管理6.1 网站结构规划了解网站结构的重要性学习如何规划网站结构熟悉网站的目录和文件组织方式6.2 站点设置和管理创建和定义站点管理站点文件和目录更新和网站文件6.3 实践操作规划并创建一个简单的网站结构配置和管理Dreamweaver 站点第七章:Dreamweaver 模板和框架7.1 模板的概念和应用理解模板的作用学习如何创建和使用模板掌握模板的插入点和使用技巧7.2 框架和框架集了解框架和框架集的概念学习如何创建和编辑框架掌握框架的布局和内容管理7.3 实践操作创建一个简单的模板文件使用模板创建网站的多个页面制作一个使用框架的网页布局第八章:Dreamweaver 动画和多媒体8.1 动画技术概述了解Dreamweaver 支持的视频和动画格式学习如何插入和编辑动画元素8.2 多媒体元素的应用插入图像、音频和视频设置多媒体属性和行为掌握交互式多媒体元素的制作8.3 实践操作制作一个包含动画和多媒体元素的网页学习使用Dreamweaver 的行为面板为网页添加交互功能第九章:Dreamweaver 网页编程9.1 行为和事件理解行为和事件的概念学习如何使用行为为网页添加功能掌握常见行为的使用方法9.2 JavaScript 基础了解JavaScript 的基本概念学习如何在Dreamweaver 中编写JavaScript 代码掌握Dreamweaver 的JavaScript 调试工具9.3 实践操作编写简单的JavaScript 代码为网页添加功能学习使用Dreamweaver 的JavaScript 面板和调试工具第十章:Dreamweaver 网站发布和维护10.1 网站测试学习网站在不同浏览器和设备上的测试方法掌握网站性能测试和优化技巧10.2 网站发布了解网站发布的流程和注意事项学习如何使用Dreamweaver 发布网站10.3 网站维护和更新学习网站的日常维护和更新技巧掌握网站安全和备份方法10.4 实践操作对一个网站进行全面的测试和优化发布和维护一个简单的网站第十一章:Dreamweaver 数据库和动态内容11.1 数据库基础了解数据库的概念和作用学习如何连接和操作不同类型的数据库11.2 动态内容创建学习如何创建动态网页和表单掌握Dreamweaver 内置的服务器模型和数据源11.3 实践操作连接一个数据库并创建一个动态表单使用Dreamweaver 插入动态内容到网页第十二章:Dreamweaver 扩展性和高级技巧12.1 扩展Dreamweaver学习如何安装和使用Dreamweaver 插件和扩展掌握Dreamweaver 扩展的创建和分享12.2 高级网页技术学习如何使用CSS3 和HTML5掌握响应式设计和移动网页制作技巧12.3 实践操作制作一个使用CSS3 和HTML5 的网页创建一个响应式设计的网页layout第十三章:Dreamweaver 与其他工具的集成13.1 图像和图形编辑工具学习如何使用Adobe Photoshop 和Fireworks 与Dreamweaver 协同工作掌握图像和图形的导入和编辑技巧13.2 代码编辑和调试工具学习如何使用Dreamweaver 的代码编辑功能掌握使用外部代码编辑器和调试工具的技巧13.3 实践操作使用Photoshop 和Fireworks 制作网页素材在Dreamweaver 中导入和应用图像和图形第十四章:Dreamweaver 项目管理和团队协作14.1 项目管理学习如何管理Dreamweaver 项目文件和资源掌握Dreamweaver 项目的备份和版本控制14.2 团队协作了解团队协作的重要性学习如何在团队中使用Dreamweaver 和版本控制系统14.3 实践操作管理一个Dreamweaver 项目并实现版本控制在团队中使用Dreamweaver 进行协作第十五章:Dreamweaver 综合实战项目15.1 项目规划和设计学习如何进行项目规划和设计熟悉项目的时间管理和资源分配15.2 项目实施学习如何实施Dreamweaver 项目掌握项目的时间管理和问题解决技巧15.3 项目评估和优化学习如何评估Dreamweaver 项目的效果掌握项目的优化和维护技巧15.4 实践操作完成一个Dreamweaver 综合实战项目进行项目评估和优化以提高网站质量和性能重点和难点解析重点:Dreamweaver的工作界面和基本操作网页基本结构元素的插入和编辑CSS样式的创建和应用网页布局技术,包括表格布局、CSS布局和响应式布局表单的创建和交互功能的实现网站的管理和站点的设置模板和框架的使用动画和多媒体元素的插入网页编程,包括行为和事件的应用、JavaScript基础网站的测试、发布和维护数据库连接和动态内容的创建扩展性和高级技巧的运用与其他工具的集成和项目管理的实践团队协作和综合实战项目的实施难点:CSS样式的复杂应用和调试网页布局的高级技巧,如响应式布局的实现表单验证和交互逻辑的编写网站管理和站点配置的细节处理模板和框架的精细操作JavaScript代码的编写和调试数据库连接和动态内容的管理扩展性和高级技巧的深入应用团队协作和项目管理的策略制定综合实战项目的规划和实施通过理解和掌握这些重点和难点,学生将能够熟练使用Dreamweaver进行网页制作,并能够应对真实世界的网页设计挑战。
网页设计Dreamweaver教案第一章:Dreamweaver简介1.1 课程目标了解Dreamweaver的发展历程和版本更新掌握Dreamweaver的基本功能和操作界面熟悉Dreamweaver在网页设计中的应用场景1.2 教学内容Dreamweaver的起源和发展历程Dreamweaver的版本更新及特点Dreamweaver的操作界面及功能介绍Dreamweaver在网页设计中的应用案例1.3 教学方法讲授与示范相结合,让学生了解Dreamweaver的发展历程和版本更新实践操作,让学生掌握Dreamweaver的基本功能和操作界面案例分析,让学生熟悉Dreamweaver在网页设计中的应用场景1.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例1.5 教学评估课后作业:让学生制作一个简单的网页,巩固所学内容课堂讨论:引导学生分享自己在网页设计中使用Dreamweaver的经验和心得第二章:创建和管理网页2.1 课程目标掌握Dreamweaver的网页创建和管理功能熟悉网页编辑区的基本操作了解网页、描述和关键词的设置方法2.2 教学内容Dreamweaver的网页创建和管理功能介绍网页编辑区的基本操作网页、描述和关键词的设置方法2.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver的网页创建和管理功能实践操作,让学生熟悉网页编辑区的基本操作案例演示,让学生了解网页、描述和关键词的设置方法2.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例2.5 教学评估课后作业:让学生创建一个简单的网页,并设置网页、描述和关键词课堂讨论:引导学生分享自己在网页设计中关于网页、描述和关键词设置的经验和心得第三章:编辑和排版文本3.1 课程目标掌握Dreamweaver中文本的编辑和排版功能熟悉字体、颜色、大小和样式的设置方法了解文本对齐、行间距和段落格式的设置方法3.2 教学内容Dreamweaver中文本的编辑和排版功能介绍字体、颜色、大小和样式的设置方法文本对齐、行间距和段落格式的设置方法3.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中文本的编辑和排版功能实践操作,让学生熟悉字体、颜色、大小和样式的设置方法案例演示,让学生了解文本对齐、行间距和段落格式的设置方法3.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例3.5 教学评估课后作业:让学生编辑和排版一个文本内容丰富的网页课堂讨论:引导学生分享自己在网页设计中关于文本编辑和排版的经验和心得第四章:添加图像和媒体元素4.1 课程目标掌握Dreamweaver中图像和媒体元素的操作功能熟悉图像和媒体元素的插入、编辑和格式设置方法了解图像和媒体元素在网页设计中的应用场景4.2 教学内容Dreamweaver中图像和媒体元素的操作功能介绍图像和媒体元素的插入、编辑和格式设置方法图像和媒体元素在网页设计中的应用场景4.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中图像和媒体元素的操作功能实践操作,让学生熟悉图像和媒体元素的插入、编辑和格式设置方法案例分析,让学生了解图像和媒体元素在网页设计中的应用场景4.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例4.5 教学评估课后作业:让学生添加图像和媒体元素到一个网页中,提升网页视觉效果课堂讨论:引导学生分享自己在网页设计中关于图像和媒体元素应用的经验和心得第五章:创建和应用超5.1 课程目标掌握Dreamweaver中超的创建和应用功能熟悉超的类型和创建方法了解超的目标设置和命名规则5.2 教学内容-第六章:表格和布局6.1 课程目标掌握Dreamweaver中表格的创建和编辑功能熟悉表格的布局和样式设置方法了解表格在网页设计中的应用场景6.2 教学内容Dreamweaver中表格的创建和编辑功能介绍表格的布局和样式设置方法表格在网页设计中的应用场景6.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中表格的创建和编辑功能实践操作,让学生熟悉表格的布局和样式设置方法案例分析,让学生了解表格在网页设计中的应用场景6.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例6.5 教学评估课后作业:让学生创建一个表格布局的网页,展示信息列表课堂讨论:引导学生分享自己在网页设计中关于表格布局的经验和心得第七章:表单和动画7.1 课程目标掌握Dreamweaver中表单的创建和编辑功能熟悉表单元素和属性的设置方法了解动画在网页设计中的应用场景和创建方法7.2 教学内容Dreamweaver中表单的创建和编辑功能介绍表单元素和属性的设置方法动画在网页设计中的应用场景和创建方法7.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中表单的创建和编辑功能实践操作,让学生熟悉表单元素和属性的设置方法案例分析,让学生了解动画在网页设计中的应用场景和创建方法7.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例7.5 教学评估课后作业:让学生创建一个包含表单和动画的网页,实现用户互动课堂讨论:引导学生分享自己在网页设计中关于表单和动画应用的经验和心得第八章:CSS样式和模板8.1 课程目标掌握Dreamweaver中CSS样式的创建和应用功能熟悉CSS选择器和属性的设置方法了解模板在网页设计中的应用场景和创建方法8.2 教学内容Dreamweaver中CSS样式的创建和应用功能介绍CSS选择器和属性的设置方法模板在网页设计中的应用场景和创建方法8.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中CSS样式的创建和应用功能实践操作,让学生熟悉CSS选择器和属性的设置方法案例分析,让学生了解模板在网页设计中的应用场景和创建方法8.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例8.5 教学评估课后作业:让学生创建一个CSS样式和模板应用的网页,提升网页美观度课堂讨论:引导学生分享自己在网页设计中关于CSS样式和模板应用的经验和心得第九章:网站发布和管理9.1 课程目标掌握Dreamweaver中网站的发布和管理功能熟悉FTP协议和网站方法了解网站维护和优化的基本方法9.2 教学内容Dreamweaver中网站的发布和管理功能介绍FTP协议和网站方法网站维护和优化的基本方法9.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中网站的发布和管理功能实践操作,让学生熟悉FTP协议和网站方法案例分析,让学生了解网站维护和优化的基本方法9.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例9.5 教学评估课后作业:让学生将所学网页发布到服务器,进行实际操作课堂讨论:引导学生分享自己在网站发布和管理中的经验和心得第十章:网页设计案例分析10.1 课程目标分析实际网页设计案例了解网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.2 教学内容分析实际网页设计案例讨论网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.3 教学方法讲授与示范相结合,让学生分析实际网页重点和难点解析1. 章节一和二:Dreamweaver简介和创建与管理网页重点解析:理解Dreamweaver的历史和发展,熟悉其操作界面和基本功能,以及如何有效地创建和管理网页。
《Dreamweaver网页设计》教案第一章:Dreamweaver简介1.1 课程目标:了解Dreamweaver的发展历程和功能特点掌握Dreamweaver的基本操作界面1.2 教学内容:Dreamweaver的历史和发展Dreamweaver的功能特点Dreamweaver的操作界面及基本操作1.3 教学方法:讲解与演示相结合学生实际操作练习1.4 教学资源:PowerPoint课件Dreamweaver软件1.5 教学评估:课堂问答学生操作练习情况第二章:网页制作基础2.1 课程目标:掌握HTML标签的使用学会使用Dreamweaver的代码视图2.2 教学内容:HTML标签的基本概念和使用方法Dreamweaver代码视图的操作方法常用的HTML标签及其功能2.3 教学方法:讲解与演示相结合学生实际操作练习2.4 教学资源:PowerPoint课件Dreamweaver软件2.5 教学评估:课堂问答学生操作练习情况第三章:图像和多媒体的使用3.1 课程目标:学会在网页中插入图像和多媒体文件了解图像和多媒体文件的基本属性设置3.2 教学内容:图像和多媒体文件在网页中的作用在Dreamweaver中插入图像和多媒体文件的方法图像和多媒体文件的基本属性设置3.3 教学方法:讲解与演示相结合学生实际操作练习3.4 教学资源:PowerPoint课件Dreamweaver软件图像和多媒体文件素材3.5 教学评估:课堂问答学生操作练习情况第四章:超的使用4.1 课程目标:学会创建和设置超了解超的类型及应用场景4.2 教学内容:超的概念和作用在Dreamweaver中创建和设置超的方法超的类型及应用场景4.3 教学方法:讲解与演示相结合学生实际操作练习4.4 教学资源:PowerPoint课件Dreamweaver软件超素材4.5 教学评估:课堂问答学生操作练习情况第五章:表格的使用5.1 课程目标:学会使用Dreamweaver创建和编辑表格了解表格的基本属性设置5.2 教学内容:表格在网页中的作用在Dreamweaver中创建和编辑表格的方法表格的基本属性设置5.3 教学方法:讲解与演示相结合学生实际操作练习5.4 教学资源:PowerPoint课件Dreamweaver软件表格素材5.5 教学评估:课堂问答学生操作练习情况第六章:CSS样式应用6.1 课程目标:掌握CSS样式的概念和作用学会在Dreamweaver中创建和应用CSS样式6.2 教学内容:CSS样式的基本概念Dreamweaver中的CSS面板操作创建和应用CSS样式的方法CSS选择器及属性设置6.3 教学方法:讲解与演示相结合学生实际操作练习6.4 教学资源:PowerPoint课件Dreamweaver软件CSS样式素材6.5 教学评估:课堂问答学生操作练习情况第七章:布局页面7.1 课程目标:学会使用Dreamweaver进行页面布局了解常用的页面布局方法7.2 教学内容:页面布局的基本概念使用Dreamweaver的布局工具进行页面布局常用的页面布局方法(如:固定布局、百分比布局、弹性布局等)7.3 教学方法:讲解与演示相结合学生实际操作练习7.4 教学资源:PowerPoint课件Dreamweaver软件页面布局素材7.5 教学评估:课堂问答学生操作练习情况第八章:表单的使用8.1 课程目标:学会在网页中创建和使用表单了解表单的基本属性设置8.2 教学内容:表单在网页中的作用在Dreamweaver中创建和编辑表单的方法表单的基本属性设置表单元素(如:文本框、复选框、单选按钮等)的使用8.3 教学方法:讲解与演示相结合学生实际操作练习8.4 教学资源:PowerPoint课件Dreamweaver软件表单素材8.5 教学评估:课堂问答学生操作练习情况第九章:Dreamweaver与服务器端编程9.1 课程目标:了解Dreamweaver与服务器端编程的关系学会在Dreamweaver中插入服务器端代码9.2 教学内容:服务器端编程语言(如:PHP、JavaScript等)的基本概念在Dreamweaver中插入服务器端代码的方法Dreamweaver与服务器端代码的交互方式9.3 教学方法:讲解与演示相结合学生实际操作练习9.4 教学资源:PowerPoint课件Dreamweaver软件服务器端代码素材9.5 教学评估:课堂问答学生操作练习情况第十章:综合案例实训10.1 课程目标:学会运用所学知识完成一个完整的网页设计项目提高实际操作能力和网页设计水平10.2 教学内容:网页设计项目的需求分析网页设计的基本流程综合运用所学知识完成网页设计项目10.3 教学方法:学生分组进行实际操作教师指导与解答疑问10.4 教学资源:Dreamweaver软件案例素材及设计工具10.5 教学评估:学生完成的项目成果展示重点和难点解析第一章:Dreamweaver简介1. Dreamweaver的功能特点2. Dreamweaver的操作界面及基本操作难点解析:Dreamweaver功能特点的深入理解,特别是与其它网页编辑器的区别。
第1章DreamWeaver CS5简介
1.1 Dreamweaver CS5的启动和退出
1.1.1 Dreamweaver CS5的启动
在安装Dreamweaver CS5之后,安装程序会自动在Windows的“开始”菜单中创建程序组。
打开“开始”菜单,选择“程序”,选择“Adobe Master Collection CS5”程序组,再选择“Adobe Dreamweaver CS5”命令,即可启动Dreamweaver CS5。
首次启动Dreamweaver CS5,显示的界面如图1-1所示。
可以打开最新的项目,也可以新建各种类型的网页文件,点新建“HTML“,系统会自动新建一个空白的网页文件等候编辑。
图1.1-1 Dreamweaver CS5首次启动界面
另一个更常见的方法是在Windows的窗口或资源管理器中先找到要编辑的网页文档,选中要编辑的网页文件,即HTML文件图标,然后单击鼠标右键,打开右键快捷菜单,在“打开方式“选择中选择“Abode Dreamweaver CS5”,如图1.1-2所示,即可启动Dreamweaver CS5,并载入要编辑的HTML文件。
图1.1-2 启动Dreavweaver CS5同时载入网页文件
1.1.2 Dreamweaver CS5的退出
Dreamweaver CS5的退出与一般的Windows应用程序退出方式一样,可以点窗口右上角的“关闭”小按钮;也可以点“文件”菜单,选择“退出”功能;还可以按组合热键[Alt]+[F4]等等,都可以退出Dreamweaver CS5。
如果当前正在编辑的文件尚未保存,系统会弹出一个询问是否保存退出的警告提示小窗口,让我们选择保存、放弃保存或者取消退出操作。
1.2 Dreamweaver CS5的运行界面
Dreamweaver CS5的主要功能是网页设计、代码编写、应用程序开发等,相应的面板也是这样分类的。
用户也可以根据自己喜好来调整面板布局。
Dreamweaver CS5的工作界面与Dreamweaver 以前版本有所差别,主要由菜单栏、文档工具栏、编辑区、状态栏、属性检查器、面板组等部分组成,而插入栏则整合在面板组中,如图1.2-1所示。
1
1.2.1 菜单栏
菜单栏主要包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等菜单。
单击菜单栏中的命令,在弹出的下拉菜单中选择要执行的命令,如图2.2所示。
1.2.2 插入栏
* “插入”工具栏在之前的版本均在菜单栏下方,CS4版本将其整合在右部面板组中,使用起来更为灵活方便,插入栏按以下的类别进行组织:
* “常用”类别可以创建和插入最常用的对象,例如图像和Flash等。
* “布局”类别主要用于网页布局,可以插入表格、div 标签、层和框架。
* “表单”类别包含用于创建表单和插入表单元素的按钮。
* “数据”类别可以插入Spry数据对象和其它动态元素,例如记录集、重复区域、显示区域以及插入记录和更新记录等。
* “Spry”类别包含一些用于构建Spry 页面的按钮,例如Spry文本域、Spry菜单栏等。
* “文本”类别可以插入各种文本格式设置标签和列表格式设置标签。
* “收藏夹”类别可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
1.2.3 文档工具栏
* 文档工具栏中包含一些按钮可以在文档的不同视图间快速切换,例如:“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。
文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项,如:“在浏览器中预览/调试”、“文件管理”、“验证标记”、“检查浏览器兼容性”等。
* 注意:单击“查看”|“工具栏”|“文档”命令菜单,就会在Dreamweaver CS4中显示文档工具栏。
若去掉“文档”选项前的对勾,就可以隐藏文档工具栏。
1.2.4 状态栏
* 状态栏提供与您正创建的文档有关的其它信息。
其中“标签选择器”显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签以选择该标签及其全部内容。
比如:单击<body> 可以选择文档的整个正文。
“缩放工具”可以设置当前页面的缩放比率。
“窗口大小”用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
状态栏最右侧显示当前页面的文档大小和估计下载时间。
1.2.5 面板组
* Dreamweaver CS4将各种工具面板集成到面板组中,包括插入面板、行为面板、框架面板、文件面板、CSS样式面板、历史面板等。
用户可以根据自己的需要,选择隐藏和显示面板。
单击菜单栏“窗口”命令,在下拉菜单中选择“历史记录”,将展开历史面板,如图2.3所示。
1.3使用Dreamweaver站点
1.4 创建和打开文档
Macromedia Dreamweaver MX 2004 为处理各种Web 设计和开发文档提供了灵活的环境。
除了HTML文档以外,您还可以创建和打开各种基于文本的文档,如CFML 、ASP 、JavaScript 和CSS。
Dreamweaver还支持源代码文件,如Visual Basic .NET、C#、和Java。
Dreamweaver 为创建新文档提供了若干选项。
您可以创建以下任意文档:
* 新的空白文档或模板
* 基于Dreamweaver 附带的某预定义页面布局的文档
* 基于某现有模板的文档
另外还支持其它一些文档。
例如,如果经常使用某种文档类型,可以将其设置为创建的新页面的默认文档类型。
在Dreamweaver 中,可以在“设计”视图或“代码”视图中轻松定义文档属性,如meta 标签、文档标题、背景颜色和其他几种页面属性。
1.4.1 文件的创建
* 使用Dreamweaver既可以创建空白页和空白模板,也可以创建基于模
板的页面以及基于Dreamweaver示例的页面。
读者可以根据自身需要创建文档,并将文档保存在站点下。
1.4.2 Dreamweaver的文件类型
* 在Dreamweaver中,可以创建多种文件类型,最常用的文件类型是HTML文件,其扩展名为“.html”或“.htm”。
此外,Dreamweaver还支持其他文件类型。
* HTML模板文件:Dreamweaver的模板文件可以编辑可编辑区域,文件扩展名为“.dwt”。
* CSS文件:CSS是Cascading style Sheets (层叠样式表)的缩写,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
其文件扩展名为“.css”。
* JavaScript文件:JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。
它是通过嵌入或调入到标准的HTML语言中实现的。
文件扩展名为“.js”。
* XML文件:XML是The Extensible Markup Language (可扩展标识语言)的缩写。
XML 最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。
文件扩展名为“.xml”。
* 动作脚本文件:ActionScript是Macromedia为其Flash产品开发的,是一种完全的面向对象的编程语言,功能强大,类库丰富,语法类似Java,多用于Flash互动性、娱乐性、实用性开发,网页制作和RIA应用程序开发。
文件扩展名为“.as”。
* ASP文件:ASP是Active Server Page的缩写,是微软公司开发的代替CGI脚本程序的一种应用它可以与数据库和其它程序进行交互,是一种简单、方便的编程工具。
ASP的网页文件的格式是“.asp”。
* JSP文件:JSP是JavaServer Pages的缩写,是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。
JSP技术有点类似ASP技术,它是在传统的网页HTML 文件(*.htm,*.html)中插入Java程序段和JSP标记,从而形成JSP文件(*.jsp)。
* PHP文件:PHP是一种服务器端、跨平台、HTML嵌入式的脚本语言。
其实,它和大家所熟知的ASP一样,是一门常用于Web编程的语言。
PHP的网页文件的格式是“.php”。
1.5 一个简单例子小结
习题。