《Dreamweavercs网页制作教程全册.pptx》由会员分享，可在线阅读，更多相关《Dreamweavercs网页制作教程全册.pptx（26页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第1章章Dreamweaver CS5Dreamweaver CS5Dreamweaver CS5Dreamweaver CS5概述概述第1页/共26页第一节第一节 认识认识Dreamweaver Dreamweaver Dreamweaver是由Macromedia公司推出的一款网页制作软件，它具具具具有有有有可可可可视视视视化化化化编编编编辑辑辑辑界界界界面面面面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。（安装说明）（安装说明）21 二月 20232第2页/共26页第二节第二节 熟悉熟悉Dreamw
2、eaverCS5DreamweaverCS5主界面主界面当启动Dreamweaver CS5，“开开始始”页页会出现在工作环境中。“开始”页使用户可以快速访问Dreamweaver 教程、最近的打开过的文件、创建新项目或定义新网站。若要禁用“开始”页，可在“开始”页打开时选中“不再显示”复选框。第3页/共26页21 二月 20234创建新的文件或者Dreamweaver站点前往ADOBE功能介绍网站官方的重要信息教学网站与资源连接打开最近编辑的文件是否禁用开始项第4页/共26页21 二月 20235文文档档工工具具栏栏文文档档窗窗口口状状态态栏栏属属性性面面板板菜单栏菜单栏应用程序栏应用程序栏
3、工作区切换器工作区切换器插插入入面面板板文文件件面面板板第5页/共26页菜菜 单单 栏栏：包 括 10个 菜 单，基 本 上 能 够 实 现Dreamweaver的所有功能。应用程序栏应用程序栏：包含相应的管理按钮。文文档档窗窗口口：显示当前创建和编辑的网页文档，是用户在Dreamweaver设计网页的主要工作区。在该工作区中可以进行输入文字、插入图片等多媒体资源、设置超链接等工作，也可以对整个页面进行处理。第6页/共26页文文档档工工具具栏栏：包含3种文档窗口视图按钮、各种查看选项和一些常用的操作。通过单击这些按钮可在文档的不同视图间进行快速切换。代码视图代码视图代码和设计视图代码和设计视图
4、设计视图，可视设计视图，可视化视图化视图文档标题文档标题刷新刷新选项选项可视化助理可视化助理检查检查预览预览文件管理文件管理第7页/共26页文档代码、拆分、设计视图模式间的快速切换。文档代码、拆分、设计视图模式间的快速切换。设设计计视视图图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境，类似于在浏览器中查看页面时看到的内容。“所见即所得”代代码码视视图图：一个用于编写和编辑HTML、JavaScript、服务器语言（如PHP、ColdFusion标记语言CFML)以及任何其他类型语言的手工编码环境。拆拆分分视视图图：又称代码和设计视图，可以在窗口中同时看到文档的代码视图和设计
5、视图。第8页/共26页状态栏状态栏：位于文档窗口底部，包括3个功能区：标标签签面面板板（又称为：标签选择器，显示和控制文档当前插入点位置的HTML源代码标签，可查看网页内容的代码标签，也可以单击标签，选中该元素。）手形工具手形工具标签选择器标签选择器窗口大小窗口大小缩放工具缩放工具文档大小和估计文档大小和估计下载时间下载时间选取工具选取工具第9页/共26页 标签标签选择选择器器用来显示环绕当前选定内容的标签的层次结构。若单击该层次结构中的任何标签，则选定该标签全部内容。如单击状态栏的标签，则选定文档中整个正文。选取工具选取工具用于启动和禁用手形工具。手形工具手形工具用于在文档窗口中单击并拖动文
6、档。第10页/共26页 缩放工具缩放工具单击状态栏中的【缩放工具】，单击页面上需要放大的位置，可以放大文档页面，且每单击一次，文档页面会放大一次。也可按下鼠标左键在屏幕上需要放大的区域上拖出一个框，松开鼠标即可放大选中区域配合Alt键，可以缩小当前页面显示大小。且每单击一次，页面会缩小一次。第11页/共26页窗窗口口大大小小弹弹出出菜菜单单（显示页面大小，允许将文档窗口的大小调整到预定义或自定义的尺寸）下载指示器下载指示器（估计下载时间，查看传输时间）。注意：“8“8秒秒钟钟原原则则”：一般来说，大多数用户浏览网页时等待一个页面的时间不会超过8秒。所以要随时注意网页的大小，超过8秒，要及时优化
7、。Web页下载时间和大小的设计应遵从该原则。第12页/共26页“属性属性”面板面板：属性检查器属性检查器用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。双击“属性”面板标题栏，可将“属性”面板折叠起来，再次双击，则可展开“属性”面板。面板控制菜单面板控制菜单第13页/共26页工工作作区区切切换换器器：单击该按钮右侧的下拉箭头，选择相应命令即可更改页面的布局。第14页/共26页“插插入入”面面板板：包含将各种网页元素（如图像、超链接、多媒体和表格等）插入到网页文档的快捷按钮。这些按钮被分类组织到各个选项卡中。显示显示“插入插入”面板面板：选择“窗口”“插入”命令第15页/共26
8、页21 二月 202316 改改变变插插入入面面板板的的显显示示方方式式：拖动名称处至工具栏处即变为工具栏形式，拖动至面板组处即变为面板形式。模板模板标签选择器标签选择器 超级链接超级链接 命名锚记命名锚记图像图像表格表格第16页/共26页21 二月 202317“文文件件”面面板板：用于管理文件和文件夹，无论它们是 Dreamweaver站点的一部分还是位于远程服务器上。通过“文件”面板可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器 第17页/共26页二、二、Dreamweaver的工作区的工作区1 1调整工作区布局调整工作区布局方法：单击工作区切换按钮，选择一种布局方式。
9、或者：“窗口”“工作区布局”21 二月 202318第18页/共26页三、改变界面显示三、改变界面显示1 1、显示与隐藏所有面板、显示与隐藏所有面板在“窗口”或者“查看”菜单中选择“显示/隐藏面板”。或者按下按下“F4F4”。2 2、显示与隐藏单个面板、显示与隐藏单个面板在“窗口”菜单中单击欲显示或隐藏的面板名称。3 3、整体隐藏或显示右侧面板组、整体隐藏或显示右侧面板组单击面板组标题栏上的双箭头。另外，也可以将各面板拖出原来所处的位置。21 二月 202319第19页/共26页4 4、面板显示方式的转换、面板显示方式的转换面板有两种显示方式：面板组显示方式、浮动面板显示方式面板组显示方式、浮
10、动面板显示方式方方法法：在在面面板板标标题题栏栏上上按按下下鼠鼠标标左左键键拖拖动动，即即可可将将面面板板从从面面板板组组中中拖拖动动出出来来成成为为浮浮动动面面板板，也也可可将将浮动面板拖动回面板组中。浮动面板拖动回面板组中。21 二月 202320第20页/共26页21 二月 202321四、设置便利的操作环境四、设置便利的操作环境 方法：“编辑”“首选参数”，打开“首选参数”对话框，对20个项目进行设置，使其最符合个人操作习惯。第21页/共26页第三节第三节 使用使用DreamweaverCS5DreamweaverCS5辅助工具辅助工具一、标尺一、标尺选择“查看”菜单的“标尺”中的“显示”。第22页/共26页二、网格二、网格选择“查看”菜单的“网格设置”中的“显示网格”。第23页/共26页三、辅助线三、辅助线选择“查看”菜单的“辅助线”中的“显示辅助线”。辅助线直接从标尺栏上拖出来：从水平标尺上拖出水平辅助线，从垂直标尺上拖出垂直辅助线。第24页/共26页四、四、“历史记录历史记录”面板面板显示显示：选择“窗口”菜单中的“历史面板”。用于记录所作的操作，拖动历史面板左侧的标尺可以返回以前的某一步或者某几步。第25页/共26页21 二月 2023教育学院26感谢您的欣赏！第26页/共26页