网页制作教学课件2.pptVIP

第2篇 Dreamweaver CS4 第2章 初识Dreamweaver CS4 教学目标 通过本章学习，掌握Dreamweaver CS4的最新功能，了解安装最新版本软件对系统的要求，并能完成软件的安装和设置。熟悉Dreamweaver的工作环境，如文档窗口、插入面板、属性面板和浮动面板。掌握文档的常见操作，如命名、设置标题、切换视图模式等。 重点和难点 重点：软件的安装、软件环境的熟悉、自定义工具栏和工作面板。 难点：利用CSS布局建立页面，集成的AJAX的Spry框架。 高等职业教育“十二五”规划教材 Dreamweaver CS4是Adobe推出的最新版本，是一款专业的、优秀的网页设计工具，用于设计、开发和维护网站及Web应用程序。 (1)全新的用户界面设计。 (2)广泛融合与高效的工作流。 (3)实时视图。 (4)针对Ajax和JavaScript框架的代码提示。 (5) CSS 最佳做法 (6) HTML 数据集。 (7) 相关文件和代码导航器 (8) Adobe Photoshop? 智能对象 (9) Subversion 集成 (10) Adobe AIR 创作支持新增功能 (11) Adobe InContext Editing (预发布版) 高等职业教育“十二五”规划教材 1、Dreamweaver CS4 （1） 工作环境 图2-1 工作窗口 高等职业教育“十二五”规划教材 （2） CSS样式 CSS Advisor网站 CSS Advisor是Adobe公司网站中有关最新CSS问题信息的论坛。 图1-2 指向CSS Advisor的链接 CSS布局 Dreamweaver CS4提供了30多个可供选择的CSS布局，如图2-3所示，可以帮助用户快速设计页面并运行，并且在代码中提供了丰富的内联注释以便用户更好地了解CSS页面布局。另外，用户可以创建自己的CSS布局，并将它们添加到配置文件夹中，这样在“新建文档”对话框中选择HTML选项就可以使用自定义的布局方案。 高等职业教育“十二五”规划教材  高等职业教育“十二五”规划教材 图2-3 利用CSS布局创建页面  CSS管理 Dreamweaver CS4中的CSS管理功能使用户可以轻松地将CSS规则移动到不同位置。用户可以在文档之间、文档标题与外部表之间、外部CSS文件之间及更多位置之间移动 CSS 规则。此外，还可以将内联CSS转换为CSS规则。 CSS格式设置 在Dreamweaver CS4中还可以设置CSS的格式，选择“编辑”→“首选参数”→“代码格式”→CSS命令，打开如图2-4所示的对话框进行CSS的格式化。 高等职业教育“十二五”规划教材 图2-4 CSS格式设置对话框  （3） 动态网站 Dreamweaver CS4支持领先的Web 开发技术‘可以实现在动态网站开发中的所有功能。 Spry数据 使用XML从RSS服务或数据库将数据导入Web页中。 Spry窗口组件 使用Dreamweaver CS4可以将多个适用于AJAX的Spry框架的窗口组件 添加到Web页中。 Spry效果 利用Spry效果，可以方便地对页面元素添加动态变化效果 高等职业教育“十二五”规划教材  2、案例 Dreamweaver CS4安装过程 本案例将练习安装Dreamweaver CS4的全过程。 （1） 系统需求 以下为Windows系统下的最低配置要求： 1）Intel Pentium 4、Intel Centrino、Intel Xeon或Intel Core Duo（或兼容）处理器。 2）Microsoft Windows XP（含Service Pack 2）或Windows Vista Home Premium/ Business/Ultimate/Enterprise（已经过认证，支持32位版本）。 3）512MB以上的可用内存。 4）1GB以上的可用硬盘空间。 5）1024像素×768像素显示器分辨率，16位显卡。 6）其他根据用户需要，可以选择配置DVD-ROM驱动器和联网设备等。 高等职业教育“十二五”规划教材