Dreamweaver-cs5-网页制作教程ppt全册

1、网站建设,主讲：韩维良,2020年6月,第1章,Dreamweaver CS5概述,第一节 认识Dreamweaver Dreamweaver是由Macromedia公司推出的一款网页制作软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。 （安装说明）,2020年6月24日星期三,教育学院,3,第二节 熟悉DreamweaverCS5主界面 当启动Dreamweaver CS5，“开始”页会出现在工作环境中。 “开始”页使用户可以快速访问Dreamweaver 教程、最近的打开过的文件、

2、创建新项目或定义新网站。 若要禁用“开始”页，可在“开始”页打开时选中“不再显示”复选框。,2020年6月24日星期三,教育学院,5,创建新的文件或 者Dreamweaver站点,前往 ADOBE功能 介绍网站,官方的重要信息,教学网站与 资源连接,打开最近 编辑的文件,是否禁用开始项,2020年6月24日星期三,教育学院,6,文档工具栏,文档窗口,状态栏,属性面板,菜单栏,应用程序栏,工作区切换器,插入面板,文件面板,菜单栏：包括10个菜单，基本上能够实现Dreamweaver的所有功能。 应用程序栏：包含相应的管理按钮。 文档窗口：显示当前创建和编辑的网页文档，是用户在Dreamweave

3、r设计网页的主要工作区。在该工作区中可以进行输入文字、插入图片等多媒体资源、设置超链接等工作，也可以对整个页面进行处理。,文档工具栏：包含3种文档窗口视图按钮、各种查看选项和一些常用的操作。 通过单击这些按钮可在文档的不同视图间进行快速切换。,文档代码、拆分、设计视图模式间的快速切换。 设计视图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境，类似于在浏览器中查看页面时看到的内容。“所见即所得” 代码视图：一个用于编写和编辑HTML、JavaScript、服务器语言（如PHP、ColdFusion标记语言CFML)以及任何其他类型语言的手工编码环境。 拆分视图：又称代码和设计视

4、图，可以在窗口中同时看到文档的代码视图和设计视图。,状态栏：位于文档窗口底部，包括3个功能区： 标签面板（又称为：标签选择器，显示和控制文档当前插入点位置的HTML源代码标签，可查看网页内容的代码标签，也可以单击标签，选中该元素。）, 标签选择器 用来显示环绕当前选定内容的标签的层次结构。若单击该层次结构中的任何标签，则选定该标签全部内容。 如单击状态栏的标签，则选定文档中整个正文。 选取工具 用于启动和禁用手形工具。 手形工具 用于在文档窗口中单击并拖动文档。, 缩放工具 单击状态栏中的【缩放工具】，单击页面上需要放大的位置，可以放大文档页面，且每单击一次，文档页面会放大一次。也可按下鼠标左

5、键在屏幕上需要放大的区域上拖出一个框，松开鼠标即可放大选中区域 配合Alt键，可以缩小当前页面显示大小。且每单击一次，页面会缩小一次。,窗口大小弹出菜单（显示页面大小，允许将文档窗口的大小调整到预定义或自定义的尺寸） 下载指示器（估计下载时间，查看传输时间）。 注意： “8秒钟原则”：一般来说，大多数用户浏览网页时等待一个页面的时间不会超过8秒。 所以要随时注意网页的大小 ，超过8秒，要及时优化。 Web页下载时间和大小的设计应遵从该原则。,“属性”面板：属性检查器 用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。 双击“属性”面板标题栏，可将“属性”面板折叠起来，再次双击，

6、则可展开“属性”面板。,面板控制菜单,工作区切换器：单击该按钮右侧的下拉箭头，选择相应命令即可更改页面的布局。,“插入”面板：包含将各种网页元素（如图像、超链接、多媒体和表格等）插入到网页文档的快捷按钮。这些按钮被分类组织到各个选项卡中。 显示“插入”面板：选择“窗口”“插入”命令,2020年6月24日星期三,教育学院,17,改变插入面板的显示方式：拖动名称处至工具栏处即变为工具栏形式，拖动至面板组处即变为面板形式。,2020年6月24日星期三,教育学院,18,“文件”面板：用于管理文件和文件夹，无论它们是 Dreamweaver站点的一部分还是位于远程服务器上。 通过“文件”面板可以访问本地

7、磁盘上的全部文件，类似于 Windows 资源管理器,二、Dreamweaver的工作区 1调整工作区布局 方法：单击工作区切换按钮，选择一种布局方式。 或者：“窗口”“工作区布局”,2020年6月24日星期三,教育学院,19,三、改变界面显示 1、显示与隐藏所有面板 在“窗口”或者“查看”菜单中选择“显示/隐藏面板”。或者按下“F4”。 2、显示与隐藏单个面板 在“窗口”菜单中单击欲显示或隐藏的面板名称。 3、整体隐藏或显示右侧面板组 单击面板组标题栏上的双箭头。 另外，也可以将各面板拖出原来所处的位置。,2020年6月24日星期三,教育学院,20,4、面板显示方式的转换 面板有两种显示方式： 面板组显示方式、浮动面板显示方式 方法：在面板标题栏上按下鼠标左键拖动，即可将面板从面板组中拖动出来成为浮动面板，也可将浮动面板拖动回面板组中。,2020年6月24日星期三,教育学院,21,2020年6月24日星期三,教育学院,22,四、设置便利的操作环境 方法：“编辑”“首选参数”，打开“首选参数”对话框，对20个项目进行设置，使其最符合个人操作习惯。,第三节 使用DreamweaverCS5辅助工具 一、标尺 选择“查看”菜单的“标尺”中的“显示”。,二、网格 选择“查看”菜单的“网格设置”中的“显示网格”。,三、辅助线 选择“查看”菜单的“辅助线