模块二网页排版技术 单元1：站点建立及网页文档操作 Dreamweaver的工作环境 图2-1-1 Dreameaver工作环境 注： A、菜单烂、B、文档工具栏、C、编料区、D、界面风格远择菜单、E、 浮动面板组 F、CS LIVE、G、状态栏、H、属性面板、I、文件视图
模块二 网页排版技术 单元 1：站点建立及网页文档操作 一、Dreamweaver 的工作环境 图 2-1-1 Dreamweaver 工作环境 注： A、菜单栏、B、文档工具栏、C、编辑区、D、界面风格选择菜单、E、 浮动面板组 F、CS LIVE、G、状态栏、H、属性面板、I、文件视图
A菜单栏 主窗口中的菜单栏对整个环境下的所有窗口提供菜单控制。这些菜 单允许用户方便地管理整个主窗口的布局，配置Dreamweaver环境，获 得在线帮助。 “文件”菜单包含“新建”、“打开”、“保存”、“保存全部”，还包含 各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏 览器中预览”和打印代码”。 编辑”菜单包含选择和搜索命令，例如选择父标签”和查找和替 换”。“编辑”菜单还提供对DW菜单中“首选参数“的访问。 “查看”菜单使您可以看到文档的各种视图（例如“设计”视图和 “代码”视图)，并且可以显示和隐藏不同类型的页面元素和DW工具 及工具栏。 插入”菜单提供“插入”栏的替代项，用于将对象插入文档。 “修改”菜单使您可以更改选定页面元素或项的属性。使用此菜单， 您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不 同的操作。 “文本”菜单使您可以轻松地设置文本的格式
A.菜单栏 主窗口中的菜单栏对整个环境下的所有窗口提供菜单控制。这些菜 单允许用户方便地管理整个主窗口的布局，配置 Dreamweaver 环境，获 得在线帮助。 “文件”菜单 包含“新建”、“打开”、“保存”、“保存全部”，还包含 各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏 览器中预览”和“打印代码”。 “编辑”菜单 包含选择和搜索命令，例如“选择父标签”和“查找和替 换”。“编辑”菜单还提供对 DW 菜单中“首选参数”的访问。 “查看”菜单 使您可以看到文档的各种视图（例如“设计”视图和 “代码”视图），并且可以显示和隐藏不同类型的页面元素和 DW 工具 及工具栏。 “插入”菜单提供“插入”栏的替代项，用于将对象插入文档。 “修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜单， 您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不 同的操作。 “文本”菜单使您可以轻松地设置文本的格式
“命令”菜单提供对各种命令的访问：包括一个根据您的格式首选 参数设置代码格式的命令、一个创建相册的命令等。 “站点“菜单提供用于管理站点以及上传和下载文件的菜单项。 “窗口”菜单提供对DW中的所有面板、检查器和窗口的访问。 “帮助”菜单提供对Dreamweaver文档的访问，包括关于使用 Dreamweaver以及创建Dreamweaver扩展功能的指助系统，还包括各种 语言的参考材料。 B文档工具栏 文档工具栏中包含按钮，这些按钮可以快速切换文档的不同视图： “代码”视图、“设计“视图、同时显示“代码”和设计“视图的拆分视图。工 具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常 用命令和选项。 显示代码视图：仅在“文档”窗口中显示“代码”视图。 显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视 图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视 图选项”菜单中的在项部查看设计视图”选项变为可用。请使用该选项 指定在“文档”窗口的顶部显示哪种视图。 显示设计视图：仅在“文档”窗口中显示“设计“视图
“命令”菜单 提供对各种命令的访问；包括一个根据您的格式首选 参数设置代码格式的命令、一个创建相册的命令等。 “站点”菜单 提供用于管理站点以及上传和下载文件的菜单项。 “窗口”菜单 提供对 DW 中的所有面板、检查器和窗口的访问。 “帮助”菜单 提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种 语言的参考材料。 B.文档工具栏 文档工具栏中包含按钮，这些按钮可以快速切换文档的不同视图： “代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。工 具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常 用命令和选项。 显示代码视图：仅在“文档”窗口中显示“代码”视图。 显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视 图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视 图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项 指定在“文档”窗口的顶部显示哪种视图。 显示设计视图：仅在“文档”窗口中显示“设计”视图
标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏中。 如果文档已经有了一个标题，则该标题将显示在该区域中。 没有浏览器检查错误：使您可以检查跨浏览器兼容性。 文件管理：显示“文件管理弹出菜单。 在浏览器中预览调试：在浏览器中预宽或调试文档。从弹出菜单中 选择一个浏览器。 刷新设计视图：当您在“代码”视图中进行更改后刷新文档的“设计” 视图。 视图选项：允许您为“代码”视图和设计”视图设置选项。 C编辑区 允许在此区域直接对代码试图活着设计视图进行编辑与修改。 D,界面风格选择菜单 不同于以往版本，允许在此处直接途择Dreamweaver界面风格，如 设计器、编码器等。 E浮动面板组 Dreamweaver面板组中选定的而板显示为一个选项卡。每个而板组 都可以展开或折叠，并且可以和其它面板组停靠在一起（或取消停靠）。 面板组还可以停靠到集成的应用程序窗口中，这使得能够很容易地访问
标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏中。 如果文档已经有了一个标题，则该标题将显示在该区域中。 没有浏览器/检查错误：使您可以检查跨浏览器兼容性。 文件管理：显示“文件管理”弹出菜单。 在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中 选择一个浏览器。 刷新设计视图：当您在“代码”视图中进行更改后刷新文档的“设计” 视图。 视图选项：允许您为“代码”视图和“设计”视图设置选项。 C.编辑区 允许在此区域直接对代码试图活着设计视图进行编辑与修改。 D.界面风格选择菜单 不同于以往版本，允许在此处直接选择 Dreamweaver 界面风格，如 设计器、编码器等。 E.浮动面板组 Dreamweaver 面板组中选定的面板显示为一个选项卡。每个面板组 都可以展开或折叠，并且可以和其它面板组停靠在一起（或取消停靠）。 面板组还可以停靠到集成的应用程序窗口中，这使得能够很容易地访问
所需的面板，而不会使工作区变得混乱。用户可以通过“编辑/首选参数” 设置面板首选参数。 F.CSLive CS Live提供各种联机服务， G.状态栏 标签选择器：显示环绕当前选定内容的标签的层次结构。单击该层 次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。 窗口大小：弹出菜单（仅在“设计“视图中可见）用来将“文档”窗口 的大小调整到预定义或自定义的尺寸，“窗口大小”弹出菜单的右侧是页 面的文档大小和估计下载时间。 H属性面板 允许用户方便的在此处编辑结点属性，如颜色、字体等。 L文件视图 允许用户方便的在此处查看计算机或站点上的文件，并可对其进行 操作：同时可在此对站点进行管理。 二、设置站点 Wb站点是一组具有如相关主题、类似的设计、链接文档和资源。 Dreamweave:是一个站点创建和管理工具，因此使用它不仅可以创建单 独的文档，还可以创建完整的Wb站点。创建Web站点的第一步是
所需的面板，而不会使工作区变得混乱。用户可以通过“编辑/首选参数” 设置面板首选参数。 F.CS Live CS Live 提供各种联机服务。 G.状态栏 标签选择器：显示环绕当前选定内容的标签的层次结构。单击该层 次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。 窗口大小：弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口 的大小调整到预定义或自定义的尺寸。“窗口大小”弹出菜单的右侧是页 面的文档大小和估计下载时间。 H.属性面板 允许用户方便的在此处编辑结点属性，如颜色、字体等。 I.文件视图 允许用户方便的在此处查看计算机或站点上的文件，并可对其进行 操作；同时可在此对站点进行管理。 二、设置站点 Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。 Dreamweaver 是一个站点创建和管理工具，因此使用它不仅可以创建单 独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是
规划。为了达到最佳效果，在创建任何Wb站点页面之前，应对站点 的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页 面布局的外观以及页是如何互相连接起来的。 1,创建一个个人站点 选择站点>管理站点，出现“管理站点”对话框。单击“新建”，从弹 出式菜单中选择“站点”，如图21-2，在该对话框中输入站点名字，同时 可以设置站点文件夹， 是透金置单型 植 器 DNamnia站点是网洁中使月的新有文件和线添护速台，Daw 5拍制 年置 意可别在上洗为e枯括动深本灯饮扶和名移 达6名林：对 本地站殊来：白西 图2-1-2 选择“服务器”。首先点击弹出菜单的“+"号，输入服务器名称，选择 连接方式为“本地/网路”，设置“服务器文件夹”和Web URL”,如图2-1-3
规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点 的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页 面布局的外观以及页是如何互相连接起来的。 1．创建一个个人站点 选择站点-->管理站点，出现“管理站点”对话框。单击“新建”，从弹 出式菜单中选择“站点”，如图 2-1-2，在该对话框中输入站点名字,同时 可以设置站点文件夹。 图 2-1-2 选择“服务器”。首先点击弹出菜单的“+”号，输入服务器名称，选择 连接方式为“本地/网络”,设置“服务器文件夹”和“Web URL”，如图 2-1-3
址京时童时 6 犀器 体 自 后拉制 坚者名称： 年是说置 油方法：丰无猫 资州的杀足 餐骨器致件转： 袖愧：字 动 的 图2-1-3 选择“高级设置”。出现一个子菜单，选择“本地信总”，设置“默认图 片文件夹”和“链接相对于”选项，如图214所示
图 2-1-3 选择“高级设置”。出现一个子菜单，选择“本地信息”，设置“默认图 片文件夹”和“链接相对于”选项，如图 2-1-4 所示
达说重缘年◆名超随】 服转目 鞋图球克核：E西 拉市 H室超好：0文地c5球日 年新图 本物 wrh LRL:wapMocshos 仙 级计备在 件视西例 Cantrbutx 口区分大◆5腾你购7 暖 包自月中 07 屋登重家紧香星家 地 ☐有 图2-1-4 单击“保存”完成设置，此时，站点建立完成，完成后站点管理窗口 如图2-1-5，创建好后的站点在文件而板中的表现如图2-1-6。 营硅技 文体透 白ts转 ,本地视 新建国□ Cb00a☑ 回 本购文住 太内交型 文件其 夏制) 年山回 出) 导入 诚) 图2-1-5 站点管理窗口 图2-16文件面板 2.管理站点
图 2-1-4 单击“保存”完成设置，此时，站点建立完成，完成后站点管理窗口 如图 2-1-5，创建好后的站点在文件面板中的表现如图 2-1-6。 图 2-1-5 站点管理窗口 图 2-1-6 文件面板 2.管理站点
站点/管理站点，选择编辑命令“可以对站点设置进行修改，选择别 除”，站点将被刑除掉。 3站点内文档操作 站点建立好后，用户可以在文件面板里看到相应的站点信息。右键 点击站点名，可以在站点内新建文件和文件夹。同时也可以选择编辑命 令对建好的文件或文件夹进行别除等基本操作。 三、文档基本操作 1新建个人网页文档 通过文件菜单>新建命令创建文档，弹出如图如图2-7所示对话 框，途择【基本页】>【HTML】即可创建HTML文档。 0am□ 阳 4 血h短 想2日#6 054 图2-1-7
站点/管理站点，选择“编辑命令”可以对站点设置进行修改，选择“删 除”，站点将被删除掉。 3.站点内文档操作 站点建立好后，用户可以在文件面板里看到相应的站点信息。右键 点击站点名，可以在站点内新建文件和文件夹。同时也可以选择编辑命 令对建好的文件或文件夹进行删除等基本操作。 三、文档基本操作 1.新建个人网页文档 通过文件菜单--->新建命令创建文档，弹出如图如图 2-1-7 所示对话 框，选择【基本页】-->【HTML】即可创建 HTML 文档。 图 2-1-7
通过引导页也可以通过文件菜单米创建个人网页的TML文档，如 图如图2-1-8所示。 口华 边速人打 图2-1-8 3.保存个人网页文档为“index.htm”。效果如图如图2-l-9所示
通过引导页也可以通过文件菜单来创建个人网页的 HTML 文档，如 图如图 2-1-8 所示 。 图 2-1-8 3.保存个人网页文档为“index.htm”。效果如图如图 2-1-9 所示