《网页设计与制作》讲解.ppt

第5章 Dreamweaver CS4基础 　　Dreamweaver CS4在“设计器模式”下的工作界面如图所示。 5.1.3 Dreamweaver CS4工作界面介绍 标题栏 菜单栏 文档工具栏 主工作区 “属性”面板 “插入”面板 面板组 第5章 Dreamweaver CS4基础 　　Dreamweaver CS4的工作区有8种布局模式，可以通过“窗口”→“工作区布局”菜单命令，更换Dreamweaver CS4的工作区模式。 （1）“应用程序开发人员”模式：该模式下，面板组被安排在窗口的左侧，上方是“数据库”面板、“服务器行为”面板等，左下方是“文件”面板、“资源”面板等，“文件”面板中显示为站点文件的树形列表，右边是当前文档的编辑窗口。这种布局可以方便程序开发人员组织和管理本地站点和远程站点中的文件。 （2）“应用程序开发人员（高级）”模式：此布局与“应用程序开发人员”的不同在于窗口的右边放置了插入栏、CSS样式栏和AP元素栏，以方便开发人员插入相应的组件。 （3）“经典”模式：该模式下，面板组被集中放置在窗口的右侧，窗口左侧是主工作区，同时主工作区的上方放置“标准”工具栏和“编码”工具栏。 5.1.3 Dreamweaver 工作界面介绍 第5章 Dreamweaver CS4基础 （4）“设计器”模式：该模式下，采用一个MDI（多文档界面）的集成工作区，其中全部文档和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。这也是系统默认的工作区布局模式。 （5）“设计人员（紧凑）”模式：该模式下，面板组被缩小，以工具栏的形式停靠在窗口的右侧，窗口左侧是分割成上下两栏的文档窗口，分别用于显示当前文档的代码和设计窗口。 （6）“编码器”模式：采用与“设计器”模式相同的集成工作区，但是它将面板组停靠在左侧，文档窗口默认显示代码视图。 （7）“编码人员（高级）”模式：采用与“经典”模式相同的集成工作区，文档窗口默认显示代码视图。 （8）“双重屏幕”模式：该模式下，文档窗口被分割成上下两层，上层是文档的代码视图，下层是设计视图。面板组和代码检查器被设计成可以任意停靠的窗口，可在工作区任意放置停靠。 5.1.3 Dreamweaver 工作界面介绍 第5章 Dreamweaver CS4基础 5.2 创建并保存简单的HTML文档 执行 “文件”→“新建”命令，或者在标准工具栏中选择“新建”按钮，或按Ctrl+N组合键，弹出如图所示的“新建文档”对话框，在此对话框中可新建文档。 5.2.1 创建网页文档　 第5章 Dreamweaver CS4基础 单击“属性”面板右下角的“页面属性”按钮，或执行“修改”→“页面属性”命令，弹出“页面属性”设置对话框，如图所示，可以在此集中设置当前网页页面的属性。 5.2.2 设置页面属性　 第5章 Dreamweaver CS4基础 1. 保存网页 　　网页编辑完成后，需要及时保存。对于新建的网页文档，如果用户第一次选择菜单“文件”→“保存”命令，就会弹出 “另存为”对话框。此后，用户再使用“保存”命令时，系统将不再出现“另存为”对话框，而是直接保存当前的文档。 　　在“文件名”下拉列表框中输入需要保存的文档的文件名，在“保存类型”下拉列表框中选择需要保存的文件的类型，然后单击“保存”按钮即可。此处选择的文档类型可以是.html或.htm。 　　文件保存后，如果需要换名保存，可以选择菜单“文件”→“另存为”命令，弹出“另存为”对话框，进行重新命名并保存。 　　2.预览网页 　　网页编辑完成后，为了浏览网页的效果，可以选择在网页浏览器中预览网页。单击文档工具栏中的“在浏览器中预览”按钮，即可实现网页预览。 5.2.3 保存并预览网页文档　 第5章 Dreamweaver CS4基础 5.3 创建和管理站点 Dreamweaver的本地站点是一个管理网页文档的场所，它是一个存放网页文档的文件夹，网站上的所有网页图片文档和图片的资源文件都存放在站点文件夹下。Dreamweaver的本地站点也是网站设计人员临时存放网页和资源文件的地方。 　　通常，网站设计人员为了方便制作网页，都会在本地新建一个文件夹，用于存放在网页设计过程中新建或修改的网页资源文件，制作完成后，再将该目录下的文件全部导入远程的Web服务器，以保证在编辑和修改网页文档时不会影响用户对已有网站内容的访问。 　　Dreamweaver的本地站点是与Web站点完全同步的文件夹，它与远程服务器上目录的层次和结构完全相同。网站设计人