网页设计教案标准模板

《网页设计教案标准模板》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、教学内容批注第1章Dreamweaver介绍1.1Dreamweaver新增功能简介Dreamweaver是Macromedia公司推出的主页编辑工具。它是一个所见即所得网页编辑器，支持最新的DHTML和CSS标准。采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。值得称道的是，Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的创作工具。在学习使用Dreamweaver之前，我们先了解Dreamweaver的一些新增功能。1．独特的往返HTML功能这个功能

2、可以同步访问设计视图（DesignView）和HTML源代码，可以打开用其他编辑器编辑的文档，但它不会改写手工输入的HTML标记或第三方标记。这就使得Dreamweaver自动生成的代码与手工输入的代码融为一体。2．整合文本编辑器现在Dreamweaver增加了以代码为中心的新特性。手工编写代码就如设计视图环境一样方便，可以自动缩排、标点平衡、选择多行后一次缩进。可以在使用代码视图工具栏（CodeViewToolbar）的下拉列表定义的JavaScript函数之间轻松导航。对于使用JavaScript编程的专业人员来说，这种代码导航无疑是一种高效的导航帮助。输入代码时Dreamwe

3、aver自动对HTML和JavaScript代码使用不同的颜色显示。3．把主窗口分割为代码视图和设计试图可以把Dreamweaver的主窗口分割为代码视图和设计试图。能够查看整页代码而无需离开文档窗口。这样，就可以在同一个窗口同时查看代码视图和设计视图，同时编辑多个文档的代码。4．JavaScript调试器使用新增的JavaScript调试器，可以直接在浏览器中调试客户端JavaScript脚本，观察JavaScript的执行，就像它在Netscape或IE浏览器中一样，因而能够更好地了解每种浏览器是怎样执行JavaScript的。可以设置断点调试代码，然后在逐步执行代码的过程中观

4、察变量的变化，及时发现编程错误。5．编辑非HTML文档可以把Dreamweaver当作文本编辑器编辑非HTML文档，直接在代码视图（CodeView）中编辑JavaScript，XML和其他文本文件。1.1Dreamweaver的工作环境Dreamweaver提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人员需求的布局。启动Dreamweaver时，会出现一个工作区设置对话框（如下图）：您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使

5、用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑“首选参数”对话框如下图：　　“插入”栏（如下图）：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段HTML代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。　　“文档”窗口显示您当前创建和编辑的文档。　　“属性检查器”（如下图）：用于查看和更改所选对象或文本的各种属性。　　“面板组”（如下图）是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个

6、面板组，请拖动该组标题条左边缘的手柄。　　“文件”面板（如下图）使您可以管理您的文件和文件夹，无论它们是Dreamweaver站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于Windows资源管理器。　　Dreamweaver提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。1.1常用工具栏　“插入”栏　“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的

7、默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。“插入”栏有以下几个类别：“常用”：使您可以创建和插入最常用的对象，例如图像和表格。“布局”：使您可以插入表格、div标签、层和框架。您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用Dreamweaver布局工具：“绘