《Dreamweaver CS入门学习教程.pptx》由会员分享，可在线阅读，更多相关《Dreamweaver CS入门学习教程.pptx（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1 Dreamweaver的工作界面第 1 页菜单栏文档工具栏浮动面板文档编辑窗口状态栏属性面板第1页/共18页1 Dreamweaver的工作界面1、菜单栏包括“文件”、“编辑”、“查看”等10个菜单2、文档工具栏使用“文档”窗口工具栏包含的按钮可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。第2页/共18页1 Dreamweaver的工作界面代码：显示Html源代码视图。拆分：同时显示Html源代码和“设计”视图。设计：只显示“设计”视图。提示：如果处理的是XML、JavaScript、CSS或乾其他基于代码的文件类型，则无法
2、在“设计”视图中查看文件，而且“设计”和“拆分”按钮将会变暗。实时视图：类似于“设计”视图，“实时”视图更逼真地显示文档在浏览器中的表示形式，并使您能够像在浏览器中那样与文档进行交互。“实时”视图不可编辑。但可以在“代码”视图中进行编辑，然后刷新“实时”视图来查看所做的更改。（显示不可编辑的、交互式的、基于浏览器的文档视图）实时代码：仅当在“实时”视图中查看文档时可用。“实时代码”视图显示浏览器用于执行该页面的实际代码，当在“实时”视图中与该页面进行交互时，它可以动态变化。“实时代码”视图不可编辑。第 3 页第3页/共18页1 Dreamweaver的工作界面多屏幕：借助“多屏幕预览”面板，为
3、智能手机、平板电脑和台式机进行设计。使用媒体查询支持,为各种不同设备设计样式并将呈现内容可视化。（查看页面，就如同页面在不同尺寸的屏幕中显示。）在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。文件管理：显示“文件管理”弹出菜单。W3C验证：用于验证当前文档或选定的标签。检查浏览器兼容性：用于检查 CSS 是否对于各种浏览器均兼容。可视化助理：可以使用各种可视化助理来设计页面。刷新“设计”视图：在“代码”视图中对文档进行更改后刷新该文档的“设计”视图。在执行某些操作（如保存文件或单击此按钮）之后，在“代码”视图中所做的更改才会自动显示在“设计”视图中。文档标题：为文档
4、输入一个标题，显示在浏览器的标题栏中。第 4 页第4页/共18页1 Dreamweaver的工作界面3、文档编辑窗口“文档”窗口显示当前文档。若要切换到某个文档，请击它的选项卡。4、属性面板（属性检查器）可以检查和编辑当前页面选定元素的最常用属性，它的内容根据选定的元素的不同会有所不同。在“属性面板”中提供了HTML和CSS两种类型的属性设置。默认情况下，属性检查器位于工作区的底部边缘，但是可以将其取消停靠并使其成为工作区中的浮动面板。在顶部“属性”的右边，按下鼠标左键，即可拖动属性检查器为浮动面板，按照同样的方法，还可以将它拖回到底部，停靠在工作区下面。重新执行“窗口属性”命令或者点击属性检
5、查器右上角，可以关闭属性检查器。第 5 页第5页/共18页1 Dreamweaver的工作界面5、浮动面板工作界面的右侧排列着一些浮动面板，包括“插入”、“CSS”、“文件”、“资源”等。“插入”面板：其中的按钮被分为个类别。“文件”面板：是站点管理器的缩略图，可以创建文件夹和文件，也可以上传或下载服务器端的文件。这些面板集中了网页编辑和站点管理中常用的工具按钮。这些面板被集中到面板组中，每个面板都可以展开或折叠，并且可以和其他面板一起或取消停靠。第 6 页河北金融学院第6页/共18页1 Dreamweaver的工作界面第 7 页第7页/共18页1 Dreamweaver的工作界面文件面板：第
6、 8 页创建站点哟后的状态没有创建站点的状态第8页/共18页1 Dreamweaver的工作界面6、状态栏标签选择器：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。选取工具：启用和禁用手形工具。手形工具：对于尺寸大的文档，可以用该工具任意拖动文档的显示区域。缩放工具、设置缩放比率：可以为文档设置缩放比率。窗口大小：此工具在“代码”视图中不可用。使用此工具，可以将“文档”窗口的大小调整到预定义或自定义的尺寸。更改设计视图或实时视图中页面的视图大小时，仅更改视图大小的尺寸，而不更改文档大小。下载文件大小/下载时间：显示页面(包括所有相关文件，如：图像和其
7、它媒体文件)的预计文档大小和预计下载时间。编码格式：显示当前文档的文本编码。第 9 页第9页/共18页1 Dreamweaver的工作界面7、自定义工作区布局类型 默认情况下，采用设计器布局模式。切换布局模式，单击标题栏右侧的布局模式切换下拉按钮，在弹出的下拉菜单中选择；或选择“窗口”/“工作区布局”下的子菜单命令。应用程序开发人员（高级）布局：主要针对Web应用程序开发人员而设计，偏重于代码编写。经典布局：与设计器布局方式基本一致，不同之处在于该布局方式将“插入”面板还原到老版本的“插入”栏形式。编码人员（高级）布局：主要针对习惯于通过直接编写代码来生成网页的用户以及经常从事CSS和JS脚本
8、编写的人员。双重屏幕布局：可以同时查看页面设计效果和具体代码（通过“代码检查器”窗口），还将常用的“CSS样式”、“文件”等面板独立显示，适合对网页的调试和修改。第 10 页第10页/共18页2 站点的搭建与管理Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器，测试网站。站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。第 11 页第11页/共18页2.1 创建本地站点在制作页面之前，首先要在
9、Dreamweaver中创建站点。一开始只需制作本地站点，这个位于本地硬盘中的文件夹被当成一个远程站点的镜像，完成本地站点的制作后，即可将本地站点上传至远端服务器，作为远程站点。在菜单栏中，选择“站点”“新建站点”菜单项。弹出“站点设置对象”对话框，在对话框中，选择“站点”选项卡，在“站点名称”文本框中，输入准备使用的名称，单击“本地站点文件夹”右侧的“浏览文件夹”按钮，选择准备使用的站点文件夹，单击“选择”按钮。单击“保存”按钮。此时，在“文件”面板中，即可看到创建的站点文件，通过以上步骤即可完成使用“管理站点”向导搭建站点的操作。第 12 页第12页/共18页2.2 管理站点打开dream
10、weaver，单击“站点”按钮，找到“管理站点”，或者在菜单栏中找到“站点”“管理站点”。第 13 页删除站点编辑站点复制站点导出站点导入站点第13页/共18页2.2 管理站点删除站点：删除站点信息，但不会删除站点中的文件复制站点：如果即将新建的站点和已经存在的站点有许多参数设置相同，可以通过“复制站点”的方式进行复制。用处不多。编辑站点：对站点信息进行更改。比如站点名称、本地站点文件夹等。导出站点：导出站点信息。导入站点：导入站点信息。第 14 页第14页/共18页2.2 管理站点注意：导出/导入站点能将站点设置传输到其它计算机和产品版本中，与其他用户共享站点设置，以及备份站点设置。导入/导
11、出功能不会导入或导出站点文件。它仅会导入/导出站点设置以便省下在 Dreamweaver 中重新创建站点的时间。定期导出站点设置，这样如果该站点出现意外，还有它的备份副本。第 15 页第15页/共18页2.3 管理站点中的文件网站每个栏目中的所有文件被统一存放在单独的文件夹内，根据包含的文件多少，又可以细分到子文件夹里。一、新建文件打开站点，右击右下角“站点”文件夹，在右击菜单中点击“新建文件夹”选项或“新建文件”选项。在“文件”面板中，鼠标右击文件夹，在快捷菜单中选择。二、复制和移动文件在“文件”面板中右击需要复制的文件，在右击菜单中选择“编辑”下的“复制”或“剪切”按钮。复制：将文件复制在同一目录下。拷贝：可以选择文件拷贝到的目录。第 16 页第16页/共18页2.3 管理站点中的文件三、重命名文件夹鼠标右键单击要重命名的文件夹或文件，在弹出的快捷菜单中选择“编辑”/“重命名”。四、删除文件夹或文件鼠标右键单击要删除的文件夹或文件，在弹出的快捷菜单中选择“编辑”/“删除”，或选中要删除的文件夹或文件，然后按“Delete”键。五、保存文档选择菜单命令“文件”/“保存”。第 17 页第17页/共18页河北金融学院第 18 页感谢您的观看。第18页/共18页