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

首选参数。

二、设置站点

Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。

1．创建一个个人站点

选择站点-->管理站点，出现“管理站点”对话框。单击“新建”，从弹出式菜单中选择“站点”，出现“站点定义”对话框，如图2-1-2，在该对话框中输入站点名字。

图2-1-2

单击“下一步”。出现向导的下一个界面，询问用户是否要使用服务器技术。选择“否”选项，指示目前该站点是一个静态站点，没有动态页，如图2-1-3。

图2-1-3

继续“下一步”。出现向导的下一个界面，询问用户要如何使用文件，如图2-1-4。选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。并设置好站点文件夹存放的位置。

图2-1-4

单击“下一步”，出现向导的下一个界面，询问用户如何连接到远程服务器。从弹出式菜单中选择“无”,如图2-1-5。

图2-1-5

单击“下一步”，该向导的下一个屏幕将出现，其中显示用户站点设置概要，如图2-1-6。

图2-1-6

单击“完成”完成设置，此时，站点建立完成，完成后站点管理窗口如图2-1-7，创建好后的站点在文件面板中的表现如图2-1-8。

图2-1-7 站点管理窗口图2-1-8 文件面板

2.管理站点

站点/管理站点，将出现管理站点对话框，如图2-1-7，选择“编辑命令”可以对站点设置进行修改，选择“删除”，站点将被删除掉。

3.站点内文档操作

站点建立好后，用户可以在文件面板里看到相应的站点信息，如图2-1-7 。右键点击站点名，可以在站点内新建文件和文件夹。同时也可以选择编辑命令对建好的文件或文件夹进行删除等基本操作。

三、文档基本操作

1.新建个人网页文档

通过引导页也可以通过文件菜单来创建个人网页的HTML文档，如图如图2-1-9所示。

图2-1-9

通过文件菜单--->新建命令创建文档，弹出如图如图2-1-10所示对话框，选择【基本页】-->【HTML】即可创建HTML文档。

图2-1-10

3.保存个人网页文档为“index.htm”。效果如图如图2-1-11所示

图2-1-11

选择文件/另存为，在“另存为”对话框中，浏览到站点本地根文件夹下，填入文件名，保存退出。（注意：网页文档的保存格式为“*.htm或/&.html”）

2.个人网页文档为“index.htm”的HTML框架结构分析

点击文档工具栏的“拆分”视图模式，把index.htm切换到混合模式视图，查看空白页面的HTML 代码。如图2-1-12所示。

图2-1-12

HTML文档分为文件头（HEAD）和文件体（BODY）两部分。文件头对这个文件进行了一些必要的定义，而文件体的部分才是要显示在网页中的各种信息。HTML文档的框架结构如下：

标记是告诉浏览器这是HTML文件的开始，最后一个用来告诉浏览器HTML文档的终止位置。

与标记之间是文件的头部信息，在浏览器中，头部信息是不被显示的，他能显示在浏览器的标题栏里。

与标记之间的程序是正文部分。他们显示在浏览器窗口内。因此，凡是要在网页中显示的信息，相应的程序要写在该对标记之间。

【课后小结】

本讲主要讲述了Dreamweaver工作界面、管理站点的管理和静态网页文档的基本操作，以及网页文档的基本语法格式。

【练习题】

填空：

1.HTML(超文本标志语言)是英文____________________的缩写。

2.__________标志用于HTML文档的最前边，用来标识HTML文档的开始。

3.HTML文档的扩展名为____________________或者____________________

选择题：

1. HTML是一种页面()型的语言。A. 程序设计 B. 执行 C. 编译 D. 描述

2. 为了标识一个HTML文档应该使用的HTML标记是()。

A.

与

B. 与

C. 与

D.

与

3.HTML中，用来表示主题标签的是（）。

A．〈head〉〈/head〉B．〈body〉〈/body〉C．〈title〉〈/title〉D．〈html〉〈/html〉问答题：

1.熟悉Dreamweaver界面，掌握站点管理及站内HTML文档的创建。

2.什么是HTML？一个简单的HTML文档至少应该包括哪些标记？

模仿练习

模仿本讲课内容，创建自己的个人站点，并制作简单的一句话网页，切换网页试图模式为“拆分试图”，观察起文档基本语法格式。