电子商务UI设计 DreamWeaver 3.3.1dreamweaver软件操作界面介绍.pptx

DW软件介绍1 Dreamweaver可以做什么 作为网页三剑客的重要一员，Dreamweaver在网页设计领域具有强大的功能，但它不能简单地定位为网页设计软件。 Web站点架设 可以方便地实现站点架设、管理与维护，简单地发布站点至网络网站空间，实施远端维护等操作。 网页内容排版 在所见即所得的工作环境中，可轻松创建表格、层和框架，对网页资料进行完美编排。 网页特效制作 可以通过简单的图像转换、动态行为、时间轴和层的结合实现具有各种视觉特效的网页。 网页应用程序开发 可以开发coldfusion、asp、asp.net、php等类型的动态网页。菜单栏面板组插入工具栏文档工具栏编辑区状态栏标签选择器属性检查器 Dreamweaver的操作界面由菜单栏、文档工具栏、插入工具栏、状态栏、快捷菜单、属性检查器等部分组成。第 页1 Dreamweaver的工作界面1、菜单栏包括“文件”、“编辑”、“查看”等10个菜单2、文档工具栏使用“ 文档” 窗口工具栏包含的按钮可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。1 Dreamweaver的工作界面第 页代码：显示Html源代码视图。拆分：同时显示Html源代码和“设计”视图。设计：只显示“设计”视图。提示：如果处理的是XML、JavaScript、CSS或乾其他基于代码的文件类型，则无法在“设计”视图中查看文件，而且“设计”和“拆分”按钮将会变暗。实时视图：类似于“设计”视图，“实时”视图更逼真地显示文档在浏览器中的表示形式，并使您能够像在浏览器中那样与文档进行交互。“实时”视图不可编辑。但可以在“代码”视图中进行编辑，然后刷新“实时”视图来查看所做的更改。（ 显示不可编辑的、交互式的、基于浏览器的文档视图）实时代码：仅当在“实时”视图中查看文档时可用。“实时代码”视图显示浏览器用于执行该页面的实际代码，当在“实时”视图中与该页面进行交互时，它可以动态变化。“实时代码”视图不可编辑。1 Dreamweaver的工作界面第 页多屏幕：借助“多屏幕预览”面板，为智能手机、平板电脑和台式机进行设计。使用媒体查询支持,为各种不同设备设计样式并将呈现内容可视化。（查看页面，就如同页面在不同尺寸的屏幕中显示。）在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。文件管理：显示“文件管理”弹出菜单。W3C验证：用于验证当前文档或选定的标签。检查浏览器兼容性：用于检查 CSS 是否对于各种浏览器均兼容。可视化助理：可以使用各种可视化助理来设计页面。刷新“设计”视图：在“代码”视图中对文档进行更改后刷新该文档的“设计”视图。在执行某些操作（如保存文件或单击此按钮）之后，在“代码”视图中所做的更改才会自动显示在“设计”视图中。文档标题：为文档输入一个标题，显示在浏览器的标题栏中。1 Dreamweaver的工作界面第 页3、文档编辑窗口“文档”窗口显示当前文档。若要切换到某个文档，请击它的选项卡。4、属性面板（属性检查器）可以检查和编辑当前页面选定元素的最常用属性，它的内容根据选定的元素的不同会有所不同。在“属性面板”中提供了HTML和CSS两种类型的属性设置。默认情况下，属性检查器位于工作区的底部边缘，但是可以将其取消停靠并使其成为工作区中的浮动面板。在顶部“属性”的右边，按下鼠标左键，即可拖动属性检查器为浮动面板，按照同样的方法，还可以将它拖回到底部，停靠在工作区下面。重新执行“窗口属性”命令或者点击属性检查器右上角，可以关闭属性检查器。1 Dreamweaver的工作界面第 页5、浮动面板工作界面的右侧排列着一些浮动面板，包括“插入”、“CSS”、“文件”、“资源”等。“插入”面板：其中的按钮被分为９个类别。“文件”面板：是站点管理器的缩略图，可以创建文件夹和文件，也可以上传或下载服务器端的文件。这些面板集中了网页编辑和站点管理中常用的工具按钮。这些面板被集中到面板组中，每个面板都可以展开或折叠，并且可以和其他面板一起或取消停靠。1 Dreamweaver的工作界面第 页1 Dreamweaver的工作界面创建站点哟后的状态没有创建站点的状态第 页文件面板：1 Dreamweaver的工作界面第 页6、状态栏标签选择器：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。选取工具：启用和禁用手形工具。手形工具：对于尺寸大的文档，可以用该工具任意拖动文档的显示区域。缩放工具、设置缩放比率：可以为文档设置缩放比率。窗口大小：此工具在“代码”视图中不可用。使用此工具，可以将“文档”窗口的大小调整到预定义或自定义的尺寸。更改设计视图或实时视图中页面的视图大小时，仅更改