1站点建立及网页文档的设计

第一讲站点建立及网页文档操作

【教学内容】

∙Dreamweaver界面

∙个人站点创建为例讲述静态站点的创建

∙个人网页为例讲述静态网页文档的基本操作

∙分析网页文档的HTML结构

【教学目的】

∙了解Dreamweaver工作界面

∙掌握静态站点的创建

∙掌握静态网页文档的基本操作

∙掌握HTML基本语法结构

【教学重、难点】

∙重点：掌握静态站点的创建、静态网页文档的基本操作、HTML基本语法结构∙难点：HTML基本语法结构

【教学方式】

采取讲授、讨论和案例分析相结合的方式。

【教学课时】5节

一、Dreamweaver的工作环境

图2-1-1 Dreamweaver工作环境

注：

①标题栏、②菜单栏、③插入栏

④文档工具栏、⑤状态栏、⑥浮动面板

1.标题栏

位于窗口顶端，它的最左边是Dreamweaver标记。

2.菜单栏

主窗口中的菜单栏对整个环境下的所有窗口提供菜单控制。这些菜单允许用户方便地管理整个主窗口的布局，配置Dreamweaver环境，获得在线帮助。

“文件”菜单包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。

“编辑”菜单包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。

“查看”菜单使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可

以显示和隐藏不同类型的页面元素和 DW工具及工具栏。

“插入”菜单提供“插入”栏的替代项，用于将对象插入文档。

“修改”菜单使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。

“文本”菜单使您可以轻松地设置文本的格式。

“命令”菜单提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。

“站点”菜单提供用于管理站点以及上传和下载文件的菜单项。

“窗口”菜单提供对DW中的所有面板、检查器和窗口的访问。

“帮助”菜单提供对Dreamweaver文档的访问，包括关于使用Dreamweaver以及创建Dreamweaver扩展功能的帮助系统，还包括各种语言的参考材料。

3.插入栏

“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。

“插入”栏按以下的类别进行组织：

“常用”类别使您可以创建和插入最常用的对象，例如图像和表格。

“布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。

“表单”类别包含用于创建表单和插入表单元素的按钮。

“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。

“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。

“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。

“应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。

“Flash 元素”类别使您可以插入 Flash 元素。

“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。

4.文档工具栏

文档工具栏中包含按钮，这些按钮可以快速切换文档的不同视图：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

显示代码视图：仅在“文档”窗口中显示“代码”视图。

显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。

显示设计视图：仅在“文档”窗口中显示“设计”视图。

标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。

没有浏览器/检查错误：使您可以检查跨浏览器兼容性。

文件管理：显示“文件管理”弹出菜单。

在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。

刷新设计视图：当您在“代码”视图中进行更改后刷新文档的“设计”视图。

视图选项：允许您为“代码”视图和“设计”视图设置选项。

5.状态栏

标签选择器：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。

窗口大小：弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。

6.浮动面板组

Dreamweaver面板组中选定的面板显示为一个选项卡。每个面板组都可以展开或折叠，并且可以和其它面板组停靠在一起（或取消停靠）。面板组还可以停靠到集成的应用程序窗口中，这使得能够很容易地访问所需的面板，而不会使工作区变得混乱。用户可以通过“编辑/首选参数”设置面板