第三章讲稿 网页设计与制作.ppt

《网页设计与制作教程》 作者：孟显勇 北京理工大学出版社 第三章 Dreamweaver基础 Dreamweaver是一款功能强大的可视化网页设计和编程工具，它可以与其它网页设计软件有效的结合起来，提高网页设计开发的效率和质量。本章主要讲解Dreamweaver的基本功能和使用方法，熟悉使用Dreamweaver开发和测试网页的基本过程。 3.1 Dreamweaver软件基础介绍 Dreamweaver与Flash、Fireworks 称为网页制作“三剑客”，三者可以完美的结合，是一套强大的网页编辑工具。由Macromedia公司所设计，Adobe收购了Macromedia后，软件前冠名都以Adobe开头。较新的版本是CS（Creative Suite）版，意思是创意组件套装。 3.1 Dreamweaver软件基础介绍 教材选用Dreamweaver 8制作网页，Dreamweaver 8 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。可以用于手工编写代码，也可以利用可视化编辑环境编写代码，Dreamweaver 8提供大量的开发工具，让你拥有更加完美的 Web 创作体验。 3.1.1 Dreamweaver概述 Dreamweaver是一个网页集成开发环境，可以将Flash制作的动画和Fireworks制作的图片放到Dreamweaver中进行组合。 Dreamweaver提供了功能全面的编码环境，支持多种网页文件格式，例如，HTML、CSS、PHP、ASP、XML、ASP.NET 、JavaScript和VBScript等。Dreamweaver 还可以使用服务器技术（如 ASP.NET、ASP、JSP 和 PHP）生成由动态数据库支持的 Web 应用程序。 3.1.1 Dreamweaver概述 Dreamweaver可以自动完成代码编辑工作，可以根据设计视图的内容自动添加相应的标签和属性，并且提供了有关层叠样式表 (CSS)、JavaScript 和 ColdFusion 标记语言 (CFML) 等的语言参考资料。 3.1.1 Dreamweaver概述 Dreamweaver还可以对本地站点和远程站点进行管理，通过连接FTP服务器对远程站点进行维护。 3.1.1 Dreamweaver概述 Dreamweaver可以直接导入用Fireworks 或其他图形应用程序中创建和编辑的图像，或者将Flash开发的动画直接嵌入到网页中，无需编写任何代码，这些工作由Dreamweaver自动完成。 3.1.2 Dreamweaver的特点 随着Dreamweaver?CS3的发布，意味着它将与Adobe公司制作的其它CS（创意组件套装） 套件产品更好的结合。Dreamweaver已经成为最为流行的网页设计、开发工具，是因为它有以下几大优点： 3.1.2 Dreamweaver的特点 简单易用具有符合人体工学原理的面板设计，对常用快捷工具分类显示在工具栏里，代码编辑和站点管理都提供了向导式的服务。代码窗体与设计窗体支持无缝的同步功能，可视化的编辑环境，可以通过拖拉方式添加页面对象。 3.1.2 Dreamweaver的特点 可视化编程在设计窗体里可以直接创建网页对象，设计窗体还可以操作页面对象实现可视化布局，代码窗体会自动生成相应代码。 3.1.2 Dreamweaver的特点 高效的HTML代码生成在设计窗体里制作的对象，代码窗口里会生成与之对应的代码，Dreamweaver对每次修改都进行优化处理，将优化后的代码显示在代码窗体里。 3.1.2 Dreamweaver的特点 Dreamweaver可以定义元素库，对于重复使用的元素（代码段）独立定义，在设计中需要这些元素的地方可以直接插入。 3.1.2 Dreamweaver的特点 高效站点管理Dreamweaver提供了高效的本地站点管理工具，可以通过本地站点对文件和资源进行管理。 Dreamweaver还提供了强大的远程站点维护功能，拥有一个专业的FTP管理界面，可以有效的与远程的FTP服务器通信，实现对远程的Web站点内的数据和网页更新。 3.1.3 Dreamweaver 8界面简介 掌握Dreamweaver的特点之后我们了解一下Dreamweaver的界面，以Dreamweaver 8为例，如图3-1所示。 图3-1 Dreamweaver 8 编辑界面 3.1.3 Dreamweaver 8界面简介 Dreamweaver 8编辑界面主要包含菜单栏、插入栏、编码工具栏、属性查看器、文件面板、设计视图和代码视图等。主要栏目的作用是： 3.1.3 Dreamweaver 8界面简介 插入栏