《DreamweaverCS网页设计与制作》Dreamweaver基础知识刘敏娜主编分析.ppt

Dreamweaver基础知识 Dreamweaver基础知识 2.1 Dreamweaver cs3简介 2.2 Dreamweaver的工作界面 2.3 站点的部署 2.4 文本的处理 2.5 建立超级链接 2.6 在网页中使用图像 2.7 在网页中使用多媒体 Dreamweaver基础知识 2.8 使用表格结构布局 2.9 使用AP Div布局页面 2.10 使用层叠样式表 2.11 使用框架布局页面 2.12 使用模板和库 2.13 使用行为 2.14 使用表单 2.15 Spry控件 2.1 Dreamweaver cs3简介 Dreamweaver被称为梦幻工厂，它具有“所见即所得”的编辑方式，在网页中可以引入行为，样式，模板等技术，所以在制作网页时体验非常好。由于它具备可视化编辑功能，用户可以快速地创建页面而不需要掌握专业的html语言。在查看站点元素和资源时，能够直接的进行拖拽，操作非常直观。另外还可以直接将photoshop，fireworks中创建和编辑的图像导入到dreamweaver中，使资源得到整合。也可以在其中编辑asp、php、jsp等动态网站。所以说，dreamweaver在网站建设中起着不可替代的作用。 2.2 Dreamweaver的工作界面 在Dreamweaver的工作区域中集合了一系列的窗口、面板和检查器，在进行网页制作之前先要来对Dreamweaver的工作区有一定的了解，指导如何使用检查器和面板进行设置适合用户风格的界面。 2.2.1界面布局 窗口的各组成要素 菜单栏 有10个主菜单，在其中包括了Dreamweaver的所有功能，通过菜单栏可以对对象进行任意的设置。菜单栏是按照功能的不同进行了划分，方便用户的使用。 插入栏 插入栏以选项卡形式展示，占了屏幕很小的区域，在其中包含了各种网页元素（图像、表格、层）插入到网页的按钮。 窗口的各组成要素 文档工具栏 文档工具栏上有视图切换的按钮，另外还包含文件管理功能，上传下载，浏览器预览等功能按钮。 文档窗口 显示用户正在编辑的网页文档。 属性浮动面板 可以查看和编辑当前选定的网页元素的属性，此面板中的内容会随着选中对象的不同而变化，比如当前选中了文字，面板中就会显示文字相关的属性，如字体，大小，样式等。 窗口的各组成要素 面板组 组合在一个标题下面的多个相关的面板的集合。可以通过单击组名称左侧的展开箭头将这多个面板在折叠或展开之间切换。 文件面板 这个面板组非常重要，用来管理文件和文件夹，还可以对站点进行操作，查看站点中的资源。 标签选择器 处于文档底部的状态栏中，用来显示当前选定html对象标签的层次结构，单击其中的任何标签，就可以选中该标签及其内容。 2.2.2窗口和面板 1、欢迎界面 2.2.2窗口和面板 2、文档工具栏 单击文档工具栏左边的3个按钮，可以在“代码视图”，“设计视图”和“拆分”视图之间切换。另外在工具栏中还有添加网页标题，文件管理，在本地和远程站点间传送文档等命令。如下图所示。 2.2.2窗口和面板 3、标准工具栏 标准工具栏中包括“文件”和“编辑”菜单中的常用的操作按钮。如新建、打开、保存、打印代码、剪切、复制、撤销等按钮。在默认的界面下此工具栏是不显示的，如果需要显示，可以通过“查看-工具栏-标准”命令打开。 2.2.2窗口和面板 4、编码工具栏 此工具栏只出现在编码视图中，并且以垂直方式显示在文档窗口的左侧。其中包含多种标准编码操作的按钮。例如高亮显示无效代码、应用删除注释、缩进代码以及插入最近使用的代码片断。在使用编码工具栏时，不能把它移动，但是可以把它隐藏起来。 2.2.2窗口和面板 5、状态栏 状态栏位于窗口的底部，主要用来提供与当前文档相关的信息。这部分包括选择标签、选取工具、手形工具、缩放工具等。其中的选择标签用来显示环绕当前选定内容html标签的层次结构，单击任何标签可以选择该标签及其全部内容。 2.2.2窗口和面板 6、使用插入栏 插入栏位于菜单栏和文档工具栏的中间位置，它几乎覆盖了网页制作时的所有的操作。在插入栏中包括了插入对象的按钮，这些按钮根据类型被组织到不同的选项卡中。 2.2.3管理面板和面板组 1、展开折叠面板组：在面板组的左上角的小三角符号上单击可以折叠或展开面板。 2、拖动面板组：将光标放在需要拖动的面板组左上角，按下左键进行拖动，可以将面板从面板组中脱离。如果要拖回原来的位置，需要重复拖出的方法（将光标放在需要拖回的面板组左上角，按下左键拖动到面板组中）。 3、查看面板组的“选项”菜