《dreamweaver cs 教案参考》由会员分享，可在线阅读，更多相关《dreamweaver cs 教案参考（80页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver教程前言随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器。从网页编辑器基本性质上可以分为所见即所得网页编辑器和非所见即所得网页编辑器（即源代码编辑器），两者各有千秋。所见即所得网页编辑器的优点就是直观、使用方便、容易上手，在所见即所得网页编辑器中进行网页制作和在Word中进行文本编辑不会感到有什么区别，但它同时也存在难以精确达到与浏览器完全一致的显示效果的缺点。也就是说在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构及精确定位）中便可体现出来
2、。非所见即所得的网页编辑器，就不存在这个问题，因为所有的HTML代码都在用户的监控下产生，但是，非所见即所得编辑器的先天条件注定了它的工作效率太低。如何实现两者的完美结合，既能产生干净、准确的HTML代码，又具备所见即所得的高效率、直观性，这一直是网页设计师的梦想。Dreamweaver基本上解决了以上的问题，是一个非常优秀的所见即所得网页编辑器。Dreamweaver可以满足Web开发人员的各种需要。使用Dreamweaver，在大大提高网页设计人员的生产效率的同时，还可以保持对源代码的完全控制。对于网页设计的新手，也可以快速提高他们的工作效率，因为使用Dreamweaver，可以轻松地可视
3、化编辑加入网页的相关对象。Dreamweaver这门课主要是通过Dreamweaver来有效学习html标记语言、css样式、div层等网页前台制作的相关知识和技能，并且能够在学习的最后阶段手写代码，并使学生在学习中提高思维能力，这是软件工程专业中的一门基础课程之一。而本书内容丰富、条理清楚、通俗易懂、即学即会。内容安排由浅入深，由易到难，包含丰富的实例。读者只要按照实例，边阅读边上机实践，再加上能够举一反三地灵活运用，即可做到理论与实践相结合，定能设置出页面美观、功能强大的网页。希望我们的学员们通过对本书的学习和实际操作，都能对前台页面有很好的掌握。目录第1章DREAMWEAVER介绍31.
4、1 Dreamweaver新增功能简介31.2 Dreamweaver的工作环境41.3 常用工具栏71.4 标尺和网格91.5 快捷键101.6 建立站点141.7 创建页面16第2章页面制作182.1引例182.2 超链接212.3滚动字幕252.4列表302.4.1有序列表302.4.2无序列表362.4.3定义列表402.5 表 格412.6 创建导航条472.7表单492.8框 架52第3章CSS563.1什么是CSS563.2引入CSS573.3 CSS 结构和规则593.4 CSS 属性603.4.1 字体属性603.4.2 颜色及背景属性643.4.3 文本属性663.4.4
5、方框属性673.4.5 单位733.4.6 区块753.4.7 列表76第1章 Dreamweaver介绍1.1 Dreamweaver新增功能简介Dreamweaver是Macromedia公司推出的主页编辑工具。它是一个所见即所得网页编辑器，支持最新的DHTML和CSS标准。采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。值得称道的是，Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的创作工具。在学习使用Dreamweaver之前，我们先了解Dreamweave
6、r的一些新增功能。1独特的往返HTML功能这个功能可以同步访问设计视图（Design View）和HTML源代码，可以打开用其他编辑器编辑的文档，但它不会改写手工输入的HTML标记或第三方标记。这就使得Dreamweaver自动生成的代码与手工输入的代码融为一体。2整合文本编辑器现在Dreamweaver增加了以代码为中心的新特性。手工编写代码就如设计视图环境一样方便，可以自动缩排、标点平衡、选择多行后一次缩进。可以在使用代码视图工具栏（Code View Toolbar）的下拉列表定义的JavaScript函数之间轻松导航。对于使用JavaScript编程的专业人员来说，这种代码导航无疑是一
7、种高效的导航帮助。输入代码时Dreamweaver自动对HTML和JavaScript 代码使用不同的颜色显示。3把主窗口分割为代码视图和设计试图可以把Dreamweaver的主窗口分割为代码视图和设计试图。能够查看整页代码而无需离开文档窗口。这样，就可以在同一个窗口同时查看代码视图和设计视图，同时编辑多个文档的代码。4JavaScript调试器使用新增的JavaScript调试器，可以直接在浏览器中调试客户端JavaScript脚本，观察JavaScript的执行，就像它在Netscape或IE浏览器中一样，因而能够更好地了解每种浏览器是怎样执行JavaScript的。可以设置断点调试代码，
8、然后在逐步执行代码的过程中观察变量的变化，及时发现编程错误。5编辑非HTML文档可以把Dreamweaver当作文本编辑器编辑非HTML文档，直接在代码视图（Code View）中编辑JavaScript，XML和其他文本文件。1.2 Dreamweaver的工作环境Dreamweaver提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人员需求的布局。启动Dreamweaver 时，会出现一个工作区设置对话框（如下图）：您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后
9、想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑“首选参数”对话框如下图： “插入”栏（如下图）：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。“文档”窗口 显示您当前创建和编辑的文档。 “属性检查器”（如下图）： 用于查看和更改所选对象或文本的各种属性。“面板组”（如下图） 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停
10、靠一个面板组，请拖动该组标题条左边缘的手柄。“文件”面板（如下图） 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。Dreamweaver提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。1.3 常用工具栏“插入”栏 “插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认
11、操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。“插入”栏有以下几个类别：“常用”：使您可以创建和插入最常用的对象，例如图像和表格。 “布局”：使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择： “标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。 “表单”：包含用于创建表单和插入表单元素的按钮。 “文本”：使您可以插入各种文本格式
12、设置标签和列表格式设置标签。“HTML”：使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 “应用程序”：使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。“Flash 元素”：使您可以插入 Flash 元素。“收藏”：使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。文档工具栏 文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。以下对图中的指引进行说明：代码视图：仅在“文档”窗口中显
13、示“代码”视图。设计视图：仅在“文档”窗口中显示“设计”视图。拆分视图：在“文档”窗口同时显示“代码”视图和“设计”视图。标 题： 可以直接在此处为文档设定标题，它将显示在浏览器的标题栏中。没有浏览器/检查错误：使您可以检查跨浏览器兼容性。在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。文件管理：显示“文件管理”弹出菜单。刷 新 ：当您在“代码”视图中进行更改后刷新文档的“设计”视图。视图选项：允许您为“代码”视图和“设计”视图设置选项。 状态栏 状态栏提供与您正创建的文档有关的其它信息。标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以
14、选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。窗口大小 弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。1.4 标尺和网格在网页排版的过程中，如果希望对元素精确定位，则标尺和网格是非常有用的工具。1显示标尺在文档窗口中，默认状态下不显示标尺，如果需要显示标尺，以便排版，可使用以下方法：在文档窗口中，选择“视图选项”命令，选中“标尺”。如图：2显示网格在文档窗口中，默认状态下不显示网格，如果需要显示网格，以便精确布局，可使用以下方法。在文档窗口中，选择“视图选项”命令，选中“标尺”，则在
15、文档窗口中显示网格。显示网格之后的文档窗口如图所示：1.5 快捷键在运用Dreamweaver的过程中，熟练的使用快捷键，能达到事半功倍的效果，而且是“高手”的体现在这里我把Dreamweaver的快捷方式整理出来，希望对学员熟练掌握Dreamweaver有所帮助。文件菜单 新建文档Ctrl+N 打开文件Ctrl+O或者将文件从文件管理器或站点窗口拖动到文档窗口中 在框架中打开 Ctrl+Shift+O 关闭 Ctrl+W 保存 Ctrl+S 另存为Ctrl+Shift+S 检查链接Shift + F8 退出Ctrl+Q 编辑菜单 撤消Ctrl+Z 重复Ctrl+Y 或 Ctrl+Shift+Z 剪切Ctrl+X 或Shift+Del
