网页设计与制作教程 第2章 Dreamweaver CS3基础.pptVIP

第2章 Dreamweaver CS3基础 第2章 Dreamweaver CS3基础 Dreamweaver CS3的工作环境。 建立本地站点 在Dreamweaver中制作第一个网页 开 始 Dreamweaver是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。Dreamweaver中的可视化编辑功能和功能强大的编码环境，使不同层次的网页制作者都能拥有更加完美的Web创作体验。 本章主要内容： 2.1.1 开始页 2.1.2 Dreamweaver软件界面 2.1.3 自定义软件界面 2.1.4 Dreamweaver的视图模式 返回本章首页 2.1 Dreamweaver CS3的工作环境 与Dreamweaver前面的版本相比，Dreamweaver CS3包含有一个崭新、高效的工作环境，且功能也得到了较大的改进。 2.1.1 开始页 返回本节 运行【开始】→【程序】→【Adobe】→【Adobe Dreamweaver CS3】程序，启动Dreamweaver软件，因为是首次启动Dreamweaver，会出现一个“默认编辑器”对话框，如图2-1所示。在这个对话框中可以设置哪些文件类型默认用Dreamweaver打开进行编辑。 图2-1 “默认编辑器”对话框 2.1.1 开始页 返回本节 单击【确定】按钮后，开始初始化操作。完成初始化后，屏幕上出现一个“Adobe Dreamweaver CS3”窗口，如图2-2所示。 图2-2 “Adobe Dreamweaver CS3” 窗口 在此窗口中显示一个开始页，在其中可以快速地选择以何种方式来使用Dreamweaver软件。例如打开最近使用过的文件或已有文件；或是创建某一类型新文件；或是从模板创建文件等。 专家点拨：如果要隐藏“开始页”，可以单击选择“不再显示”复选框，然后在弹出的对话框单击“确定”按钮。这样下次再启动Dreamweaver软件时，就不再显示开始页。如果要再次显示开始页，可以通过选择“编辑”|“首选参数”命令，打开“首选参数”对话框，然后在“常规”类别下的“文档选项”中勾选“显示欢迎屏幕”复选框即可。 2.1.2 Dreamweaver软件界面 返回本节 在“开始页”中，单击【新建】列表中的【HTML】项，打开Dreamweaver软件窗口，如图2-3所示。Dreamweaver CS3软件窗口主要由5部分组成，分别是菜单栏、工具栏、【属性】面板、面板组和文档编辑区。 菜单栏 工具栏 文档编辑区 属性面板 面板组 图2-3 Dreamweaver CS3窗口 2.1.3 自定义软件界面 针对不同的用户需要，Dreamweaver CS3提供了多种预定义的界面方案。例如，选择【窗口】|【工作区布局】|【编码器】命令，这种界面比较适合习惯编写代码的用户使用，如图2-9所示。 返回本节 图2-9 “编码器”界面方案 专家点拨：如果想返回到默认的设计器界面，可以选择【窗口】|【工作区布局】|【设计器】命令即可。 如果用户自己对界面进行了自定义，并且希望自己的界面定义能够保留下来，可以选择【窗口】|【工作区布局】|【保存当前】命令，在弹出的【保存工作区布局】对话框中设置【名称】为“我的界面布局”，然后单击【确定】按钮，如图2-10所示。 图2-10 保存工作区布局 2.1.4 Dreamweaver的视图模式 返回本节 【文档】工具栏位于新建或者打开的网页文档上方，如图2-11所示。这个工具栏主要由3个部分组成，最左边的3个按钮用来切换视图模式；中间的文本框显示页面标题，可以直接输入文字进行编辑；最右边是一些常用的文件管理功能，比如文件兼容性检查、预览网页以及上传下载等。 图2-11 【文档】工具栏 在【文档】工具栏中单击【代码】按钮 ，可以切换到代码视图模式，编辑区将显示页面的HTML代码，如图2-12所示。 图2-12 代码视图 专家点拨：在代码视图中，可以直接输入网页代码，或者利用Dreamweaver提供的代码工具编辑网页代码。 2.1.4 Dreamweaver的视图模式 返回本节 在【文档】工具栏中单击【设计】按钮 ，可以切换到设计视图模式，编辑区将显示网页的预览效果，如图2-13所示。 图2-13 设计视图 专家点拨：在设计视图中，以所见即所得的方式编辑网页。制作者只需利用Dreamweaver提供的设计工具直接插入和编辑网页中的元素，系统会自动生成HTML代码。 2.1.4 Dreamweaver的视图模式 返回本节