第2章网页设计基础讲义.ppt

第2章 网页设计基础 ——初识Dreamweaver 8 2.1 Dreamweaver 简介 Dreamweaver主要特点和功能 2.1 Dreamweaver 简介 Dreamweaver主要特点和功能 Dreamweaver 8的安装与启动 Dreamweaver 8的安装 Dreamweaver 8的启动 方法： 开始→程序→ Micromedia → Dreamweaver 8 1、工作布局的分类 2、起始页 3、工作区布局 3、工作区布局 1.标题栏 显示“Macromedia Dreaweaver 8”。如果新建或者打开网页，在后面会显示该网页的信息，如网页标题、所在目录以及文件名称。 2.菜单栏 Dreaweaver8菜单分为10种，包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。 3.“插入”工具栏 用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。 3、工作区布局 “常用”：可以创建和插入最常用的对象，例如图像和表格。 “布局”：可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择“标准”（默认）、“扩展表格”和“布局”。 “表单”：包含用于创建表单和插入表单元素的按钮。 “文本”：可以插入各种文本格式设置标签和列表格式设置标签。 “HTML”：可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 “应用程序”：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。 “Flash 元素”：可以插入 Flash 元素。 “收藏”：可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。 3、工作区布局 4. 文档工具栏 这些按钮可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 代码视图：仅在“文档”窗口中显示“代码”视图。 设计视图：仅在“文档”窗口中显示“设计”视图。 拆分视图：在“文档”窗口同时显示“代码”视图和“设计”视图。 标 题：可以直接在此处为文档设定标题，它将显示在浏览器的标题栏中。 没有浏览器/检查错误：可以检查跨浏览器兼容性。 在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。 文件管理：显示“文件管理”弹出菜单。 刷 新：在“代码”视图中进行更改后刷新文档的“设计”视图。 视图选项：为“代码”视图和“设计”视图设置选项。 3、工作区布局 5.“文档”窗口 “文档”窗口用于显示当前创建和编辑的文档。 6.“属性”面板 用于查看和更改所选对象或文本的各种属性。网页的内容形式多样，任何一种形式都可以称之为对象，比如：文字、图像、表格等。一般网页中的对象都有属性，如文字的字体、颜色、字号等，图像的高、宽、链接等。用户可以在属性面板中设置对象的属性，如图所示。属性面板的设置项目会根据选取对象的不同而变化。 3、工作区布局 7.“浮动面板组” “浮动面板组”用于分组在某个标题下面的相关面板的集合，节省屏幕空间。用鼠标单击面板组左边的小三角可以折叠或者展开一个浮动面板，在浮动面板组最左边有一个折叠按钮，可以展开或者收缩所有面板,如图所示。 3、工作区布局 8.其他工具栏 除前面介绍的工具栏外，Dreamweaver 8还提供了样式呈现、标准和编码工具栏。选择“查看”→“工具栏”命令，在“工具栏”子菜单中勾选或者取消工具栏，可以改变工具栏的显示或隐藏方式。 9. 状态栏 状态栏提供和创建文档有关的其它信息，显示标签选择器，选取按钮，手型工具，缩放工具，文档大小，下载时间等如图所示。 3、工作区布局 （1）标签选择器 显示环绕当前选定内容的标签的层次结构，单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 body 可以选择文档的整个正文。 （2）选取按钮、手型工具、缩放工具按钮。 分别用来选取对象、移动页面工作区域和缩放页面。按住ALT键，可以使用缩放工具缩小页面工作区域。 （3）文档比例 若要使页面看起来效果更好，可以单击下拉列表框右侧的小箭头，在弹出的下拉列表中选择一个比例。 （4）窗口大小 用来将“文档”窗口的大小调整到预定义或自定义的尺寸。 “窗口大小” 的右侧是页面的文档大小和估计下载时间。 2.2 创建和编辑本地站点 站点概述 站点：实质上是一个文件夹。文件夹中涵盖一系列文档，这些文档通过各种链接关联起来，利用浏览器就可