《Dreamweaver网页设计与网站开发》第一章.ppt

Companyname主讲：Dreamweaver网页设计与网站开发第一章DreamweaverCS6概述第一节DreamweaverCS6的功能介绍一、DreamweaverCS6的主要功能及优势（一）最佳的网页制作效率（二）网站管理（三）无可比拟的控制能力（四）所见即所得（五）梦幻样版和XML（六）全方位的呈现（七）集成多种开发语言（八）链接远程服务器第一节DreamweaverCS6的功能介绍二、DreamweaverCS6新增功能（见图1-1）（一）针对平板电脑和智能手机的设计在使用DreamweaverCS6软件建立移动应用程序时，用户可利用新增的jQueryMobile和PhoneGap的支持来缩短制作时间（见图1-2）。另外，DreamweaverCS6提供的“流体网格”布局和“多屏预览”面板，可以同时为手机、平板电脑和计算机等终端设计网页。1．提供jQueryMobile和PhoneGap支持2．流体网格布局与多屏预览（见图1-3、图1-4）3．支持CSS3/HTML5第一节DreamweaverCS6的功能介绍（二）高效创建复杂项目1．BusinessCatalyst集成2．动态相关文件3．改良的FTP（见图1-5）4．站点特定的代码提示（见图1-6）5．AdobeBrowserlab集成DreamweaverCS6软件集成了AdobeBrowserlab（一种新的CSLive在线服务），该服务为跨浏览器兼容性测试提供了快速、准确的解决方案。AdobeBrowserlab还提供了如下功能：（1）标尺和辅助线。（2）快捷键。（3）截屏延迟。（4）保存到本地。AdobeBrowserlab还提供了水平两栏对比和洋葱皮（OnionSkin）对比两种模式，可以在不同网页渲染模式下将结果重叠在一起，以便用户查看不同浏览器下网页显示效果的区别。6．扩展的Dreamweaver社区第一节DreamweaverCS6的功能介绍（三）运用尖端技术1．全面的CSS支持（1）CSS过渡效果（见图1-7）。（2）CSS起始页（见图1-8）。（3）CSS检查（见图1-9）。第一节DreamweaverCS6的功能介绍2．Subversion（见图2-10）3．PHP自定义代码提示4．简化的站点设置（见图1-11）5．集成的FLV内容6．W3C验证第二节DreamweaverCS6的系统组成与操作界面一、DreamweaverCS6工作界面（见图1-12）（一）菜单栏用户通过执行菜单栏中的命令，几乎可以完成所有操作。在操作过程中，菜单栏包括多个菜单，分别是【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】。单击任意一个菜单将弹出下拉菜单，从中选择不同的命令可以完成不同的操作。（二）文档窗口（三）欢迎界面（四）浮动面板（五）【属性】面板第二节DreamweaverCS6的系统组成与操作界面二、文档窗口（见图1-13）【显示“代码”视图】单击此按钮，可以在【文档】窗口中显示【代码】视图。【显示“代码”视图和“设计”视图】/【显示“设计”视图】可以在【文档】窗口的一部分显示【代码】视图，而在另一部分显示【设计】视图。当选择这种组合视图时，【视图选项】菜单中的【在顶部查看设计视图】选项变为可用。【将设计视图切换到实时视图】为了能够快节奏地制作网页，DreaweaverCS6提供了实时视图功能。实时视图与传统设计视图的不同之处在于，它提供了页面在某一浏览器中不可编辑且更逼真的效果。在设计视图中随时可以打开实时视图功能。打开实时视图功能后，设计视图为不可编辑状态，代码视图保持可编辑状态，用户可以继续更改代码，然后刷新实时视图以查看更改是否生效。【多屏幕】Dreamweaver中的多屏预览功能支持当前编辑页面在不同屏幕分辨率的设备上的显示效果预览。若要打开【多屏预览】面板，执行菜单栏中的【文件】→【多屏预览】命令即可。【在浏览器中预览/调试】单击此按钮或按快捷键【F12】，可在浏览器中预览或调试文档。从弹出式菜单中选择一个浏览器。【文件管理】主要用来查看文件和文件夹（无论这些文件和文件夹是否与站点相关联），以及执行标准文件维护操作（如打开和移动文件）。【W3C验证】使用W3C联机验证服务，以确保标准网页设计的精确性。