Dreamweaver网页设计与制作教程教学课件 杨继 第2章 网页设计基础.ppt

《Dreamweaver网页设计与制作教程教学课件 杨继 第2章 网页设计基础.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章网页设计基础——初识Dreamweaver82.1Dreamweaver简介Dreamweaver主要特点和功能所见即所得将设计和代码编辑器和二为一内置的图形编辑程序节省开发时间界面操作方便、功能强大完美的CSS支持完整的集成开发环境2.1Dreamweaver简介Dreamweaver主要特点和功能所见即所得行为工具丰富布局视图将表格和层结合实现页面排版强大的网站管理功能浏览器兼容检查常见格式的外部文档、代码可以嵌入Dreamweaver8的安装与启动Dreamweaver8的安装Dreamweaver8的启动方法：开始→程序→Micromedia→Dreamweaver8初次启动1

2、、工作布局的分类设计器编辑器双重屏幕【窗口】——工作区布局2、起始页3、工作区布局主菜单插入工具栏编码工具栏拆分视图属性面板文档工具栏代码编辑窗口设计窗口面板组状态栏3、工作区布局1.标题栏显示“MacromediaDreaweaver8”。如果新建或者打开网页，在后面会显示该网页的信息，如网页标题、所在目录以及文件名称。2.菜单栏Dreaweaver8菜单分为10种，包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。3.“插入”工具栏用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏

3、而使用“插入”菜单插入对象。3、工作区布局“常用”：可以创建和插入最常用的对象，例如图像和表格。“布局”：可以插入表格、div标签、层和框架。您还可以从三个表格视图中进行选择“标准”（默认）、“扩展表格”和“布局”。“表单”：包含用于创建表单和插入表单元素的按钮。“文本”：可以插入各种文本格式设置标签和列表格式设置标签。“HTML”：可以插入用于水平线、头内容、表格、框架和脚本的HTML标签。“应用程序”：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。“Flash元素”：可以插入Flash元素。“收藏”：可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。3、工作区布局4

4、.文档工具栏这些按钮可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。代码视图：仅在“文档”窗口中显示“代码”视图。设计视图：仅在“文档”窗口中显示“设计”视图。拆分视图：在“文档”窗口同时显示“代码”视图和“设计”视图。标题：可以直接在此处为文档设定标题，它将显示在浏览器的标题栏中。没有浏览器/检查错误：可以检查跨浏览器兼容性。在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。文件管理：显示“文件管理”弹出菜单。刷新：在“代码”视图中进

5、行更改后刷新文档的“设计”视图。视图选项：为“代码”视图和“设计”视图设置选项。3、工作区布局5.“文档”窗口“文档”窗口用于显示当前创建和编辑的文档。6.“属性”面板用于查看和更改所选对象或文本的各种属性。网页的内容形式多样，任何一种形式都可以称之为对象，比如：文字、图像、表格等。一般网页中的对象都有属性，如文字的字体、颜色、字号等，图像的高、宽、链接等。用户可以在属性面板中设置对象的属性，如图所示。属性面板的设置项目会根据选取对象的不同而变化。3、工作区布局7.“浮动面板组”“浮动面板组”用于分组在某个标题下面的相关面板的集合，节省屏幕空间。用鼠标单击面板组左边的小三角可以折叠或者展开一

6、个浮动面板，在浮动面板组最左边有一个折叠按钮，可以展开或者收缩所有面板,如图所示。折叠按钮3、工作区布局8.其他工具栏除前面介绍的工具栏外，Dreamweaver8还提供了样式呈现、标准和编码工具栏。选择“查看”→“工具栏”命令，在“工具栏”子菜单中勾选或者取消工具栏，可以改变工具栏的显示或隐藏方式。9.状态栏状态栏提供和创建文档有关的其它信息，显示标签选择器，选取按钮，手型工具，缩放工具，文档大小，下载时间等如图所示。3、工作区布局（1）标签选择器显示环绕当前选定内容的标签的层次结构，单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击可以选择文档的整个正文。（2）选

7、取按钮、手型工具、缩放工具按钮。分别用来选取对象、移动页面工作区域和缩放页面。按住ALT键，可以使用缩放工具缩小页面工作区域。（3）文档比例若要使页面看起来效果更好，可以单击下拉列表框右侧的小箭头，在弹出的下拉列表中选择一个比例。（4）窗口大小用来将“文档”窗口的大小调整到预定义或自定义的尺寸。“窗口大小”的右侧是页面的文档大小和估计下载时间。2.2创建和编辑本地站点站点概述站点：实质上是一个文件夹。文件夹中