《Dreamweaver网页制作教程 第2章 创建站点和网页文档.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver网页制作教程 第2章 创建站点和网页文档.ppt（27页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第2章创建站点和网页文档章创建站点和网页文档课前复习课前复习n nDreamweaver 8的工作区元素 n nDreamweaver 8的工作区布局 n n打开“首选参数”对话框 n nDreamweaver 8的工具栏 n nDreamweaver 8的面板组 n n使用 Dreamweaver 帮助系统 n n本章要点：n n创建和设置本地站点n n创建和设置远程站点n n创建文档n n设置页面属性 2.1站点的规划和创建步骤站点的规划和创建步骤 1.1.确定站点目标和主题确定站点目标和主题确定站点目标和主题确定站点目标和主题2.2.创建站点的逻辑结构和物理结构创建站点的逻辑结构和物理
2、结构创建站点的逻辑结构和物理结构创建站点的逻辑结构和物理结构3.3.规划页面的外观布局规划页面的外观布局规划页面的外观布局规划页面的外观布局4.4.设计导航方案设计导航方案设计导航方案设计导航方案5.5.创建、收集和整理资源创建、收集和整理资源创建、收集和整理资源创建、收集和整理资源6.6.选择合适的制作工具选择合适的制作工具选择合适的制作工具选择合适的制作工具 7.7.制作网页制作网页制作网页制作网页 8.8.上传测试上传测试上传测试上传测试9.9.推广宣传推广宣传推广宣传推广宣传 10.10.维护更新维护更新维护更新维护更新 合合理理的的结结构构设设计计对对于于网网站站的的规规划划也也是是
3、至至关关重重要要的的。以下是三种常用的结构类型。以下是三种常用的结构类型。层状结构层状结构 层状结构类似于目录系统的树型结构，层状结构类似于目录系统的树型结构，主主 页页页页面面1页页面面2页页面面3 线性结构线性结构 线线性性结结构构类类似似于于数数据据结结构构中中的的线线性性表表，用用于于组组织织本本身身的的线线性性顺顺序序形形式式存存在在的的信信息息，可可以以引引导导浏浏览览者按部就班地浏览整个网站文件。者按部就班地浏览整个网站文件。主主 页页页面页面1页面页面2页面页面3页面页面4页面页面5页面页面7页面页面8一级标题一级标题二级标题二级标题页面页面6 WebWeb结构结构 WebWe
4、b结结构构类类似似于于InternetInternet的的组组成成结结构构，各各网网页页之之间形成网状连接，允许用户随意浏览。间形成网状连接，允许用户随意浏览。2.2 设置设置Dreamweaver站点站点2.2.1.2.2.1.关于关于关于关于DreamweaverDreamweaver站点站点站点站点1 1站点的组成。站点的组成。站点的组成。站点的组成。Dreamweaver Dreamweaver 站点由三部分（或文件夹）组成，具体取决于开发环境和站点由三部分（或文件夹）组成，具体取决于开发环境和站点由三部分（或文件夹）组成，具体取决于开发环境和站点由三部分（或文件夹）组成，具体取决于开
5、发环境和所开发的所开发的所开发的所开发的 Web Web 站点类型：站点类型：站点类型：站点类型：1)1)本地站点本地站点本地站点本地站点本地站点是用户的工作目录。本地站点是用户的工作目录。本地站点是用户的工作目录。本地站点是用户的工作目录。2)2)远端站点远端站点远端站点远端站点远端文件夹是存储文件的位置。一般说来，远端文件夹位于运行远端文件夹是存储文件的位置。一般说来，远端文件夹位于运行远端文件夹是存储文件的位置。一般说来，远端文件夹位于运行远端文件夹是存储文件的位置。一般说来，远端文件夹位于运行 Web Web 服服服服务器的计算机上。务器的计算机上。务器的计算机上。务器的计算机上。本地
6、站点和远端文件夹使用户能够在本地磁盘和本地站点和远端文件夹使用户能够在本地磁盘和本地站点和远端文件夹使用户能够在本地磁盘和本地站点和远端文件夹使用户能够在本地磁盘和 Web Web 服务器之间传输文服务器之间传输文服务器之间传输文服务器之间传输文件；这使用户可以轻松管理件；这使用户可以轻松管理件；这使用户可以轻松管理件；这使用户可以轻松管理 Dreamweaver Dreamweaver 站点中的文件。站点中的文件。站点中的文件。站点中的文件。3)3)测试服务器测试服务器测试服务器测试服务器测试服务器是测试服务器是测试服务器是测试服务器是 Dreamweaver Dreamweaver 处理动
7、态页的文件夹。处理动态页的文件夹。处理动态页的文件夹。处理动态页的文件夹。2.2.2使用向导设置本地站点使用向导设置本地站点本地站点是 Dreamweaver 站点的工作目录。此文件夹可以位于本地计算机上，也可以位于网络服务器上。执行以下操作：1)1)选择“站点”“管理站点”。如图2-3所示。2)2)单击“新建”。出现“站点定义”对话框。如图2-4所示。完成 站点设置过程 例2_1 使用基本设置创建本地站点厦门软件学院网站。2.2.2使用向导设置本地站点使用向导设置本地站点例例2_1 2_1 使用使用基本基本设置创建本地站点设置创建本地站点“厦门软件学院网站厦门软件学院网站”。1.1.建立本地
8、文件夹建立本地文件夹part2part2。2.2.站点站点 管理站点管理站点 新建新建 基本。基本。3.3.站点名称：厦门软件学院网站。站点名称：厦门软件学院网站。4.4.选择文件存储在计算机上的位置：选择文件存储在计算机上的位置：part2part2。单击。单击下下一步一步按钮。按钮。5.5.选择否，我不想使用服务器技术。选择否，我不想使用服务器技术。单击下一步单击下一步按钮。按钮。6.6.选择第一个选项编辑我的计算机上的本地副本选择第一个选项编辑我的计算机上的本地副本。单击下一步按钮。单击下一步按钮。7.7.选择选择“无无”单击单击“下一步下一步”按钮。按钮。8.8.单击完成按钮。其他选择
9、保持默认值。如图单击完成按钮。其他选择保持默认值。如图2-52-5所示。所示。2.2.3使用高级设置来设置站点使用高级设置来设置站点1 1）选择）选择“站点站点”“管管理站点理站点”。出现出现“管管理站点理站点”对话框。单对话框。单击新建。击新建。出现出现站点定义对话框。站点定义对话框。如图如图2-42-4所示。单击所示。单击高级按钮。高级按钮。2 2）本地信息类别：）本地信息类别：3 3）远端站点类别：）远端站点类别：2.2.3使用高级设置来设置站点使用高级设置来设置站点例例2_2 2_2 使用使用高级高级设置创建站点设置创建站点“厦门软件职业技术学院网站厦门软件职业技术学院网站”。1)1)
10、在在L L盘建立本地文件夹盘建立本地文件夹part2webpart2web。2)2)在文件夹在文件夹 part2webpart2web 内建立子文件夹内建立子文件夹imagesimages，并将准备好的图像文件，并将准备好的图像文件保存在该文件夹内。保存在该文件夹内。3)3)站点站点 管理站点管理站点 新建新建 高级。高级。4)4)在窗口左边选择分类：本地信息。设置参数为：在窗口左边选择分类：本地信息。设置参数为：（1 1）站点名称：厦门软件职业技术学院网站。）站点名称：厦门软件职业技术学院网站。（2 2）本地根文件夹：本地根文件夹：part2webpart2web。（3 3）默认图像文件夹：
11、）默认图像文件夹：part2web imagespart2web images。其他参数使用默认选项。其他参数使用默认选项。5 5）在窗口左边选择分类：远端信息。设置参数为：）在窗口左边选择分类：远端信息。设置参数为：访问：本地。访问：本地。远端文件夹：远端文件夹：part2webpart2web。其他参数使用默认选项。其他参数使用默认选项。6)6)单击确定按钮。单击确定按钮。2.3 创建新文档创建新文档2.3.1 2.3.1 创建新的空白文档创建新的空白文档1)1)选择文件选择文件 新建。新建。即出即出现新建文档对话框。现新建文档对话框。常规选项卡已被选定。如常规选项卡已被选定。如图图2-7
12、2-7所示。所示。2)2)从类别列表中选择基本页从类别列表中选择基本页、动态页、模板页、动态页、模板页、其他或框架集；、其他或框架集；然后从右侧的列表中选择要然后从右侧的列表中选择要创建的文档的类型。创建的文档的类型。3)3)单击创建按钮。单击创建按钮。新文档在新文档在文档窗口中打开。文档窗口中打开。4)4)保存该文档。保存该文档。2.3 创建新文档创建新文档例例2_3 2_3 在厦门软件学院网站内创建网页在厦门软件学院网站内创建网页index.htmindex.htm。1 1）窗口）窗口 文件，打开文件面板。文件，打开文件面板。2 2）在文件面板中，从弹出菜单（当前站点、服务器或）在文件面板
13、中，从弹出菜单（当前站点、服务器或驱动器显示在该菜单中）中选择厦门软件学院网站站驱动器显示在该菜单中）中选择厦门软件学院网站站点。点。3 3）选择文件）选择文件 新建。新建。在新建文档对话框中选择在新建文档对话框中选择基本页创建基本页创建 HTML HTML 文档。文档。单击创建按钮。单击创建按钮。4 4）选择文件）选择文件 保存。对话框中，定位到保存。对话框中，定位到part2part2文件夹。文件夹。5 5）在文件名称文本框中，键入文件名）在文件名称文本框中，键入文件名indexindex。6 6）单击保存。）单击保存。2.3 创建新文档创建新文档2.3.2 2.3.2 创建基于设计文件的
14、文档创建基于设计文件的文档1)1)选择文件选择文件 新建。新建。即出现新建文档对话框。常即出现新建文档对话框。常规选项卡已被选定。规选项卡已被选定。2)2)在在“类别类别”列表中，选择列表中，选择“CSS CSS 样式表样式表”、“基于表格的布基于表格的布局局”、“页面设计页面设计 (CSS)”(CSS)”、“页面设计页面设计”或或“页面设计页面设计（有辅助功能的）（有辅助功能的）”，然后，然后从右侧的列表中选择一个设从右侧的列表中选择一个设计文件。计文件。3)3)单击创建按钮。单击创建按钮。新文档在文档窗口中打开。如新文档在文档窗口中打开。如果选择了一个果选择了一个 页面设计页面设计(CSS
15、)(CSS)，三列左导航模式的网页，三列左导航模式的网页，如图如图2-82-8所示，则文档窗所示，则文档窗口会显示三列左导航的网页口会显示三列左导航的网页,用户只需要修改其中的文档用户只需要修改其中的文档和图片，便容易完成一个网和图片，便容易完成一个网页。页。4)4)保存该文档。保存该文档。2.3 创建新文档创建新文档例例2_42_4：打开厦门软件职业技术学院网站，并使用基于：打开厦门软件职业技术学院网站，并使用基于“页面设计页面设计CSS”CSS”，建立双，建立双列左导航模式的网页设计文件。列左导航模式的网页设计文件。1 1）窗口）窗口 文件，打开文件面板。文件，打开文件面板。2 2）在文件
16、面板中，从弹出菜单（当前站点、服务器或驱动器显示在该菜单）在文件面板中，从弹出菜单（当前站点、服务器或驱动器显示在该菜单中）中选择中）中选择厦门软件职业技术学院网站厦门软件职业技术学院网站。3 3）选择文件）选择文件 新建。新建。即出现新建文档对话框。即出现新建文档对话框。4 4）在类别列表中，选择页面设计）在类别列表中，选择页面设计CSSCSS，然后从右侧的列表中选择双列左，然后从右侧的列表中选择双列左导航模式的网页设计文件。如图导航模式的网页设计文件。如图2-92-9所示所示.。5 5）单击创建按钮。）单击创建按钮。6 6）打开了一个另存为对话框。在文件名文本框中输入文件名）打开了一个另存
17、为对话框。在文件名文本框中输入文件名indexindex。单击。单击保存按钮。保存按钮。7 7）打开了一个复制相关文件对话框，单击复制按钮。）打开了一个复制相关文件对话框，单击复制按钮。8 8）打开了文档窗口会显示双列左导航的网页。）打开了文档窗口会显示双列左导航的网页。9 9）在文档栏的标题文本框中输入网站标题厦门软件职业技术学院网站）在文档栏的标题文本框中输入网站标题厦门软件职业技术学院网站 ，完，完成一个网页。成一个网页。1010）保存该文档。）保存该文档。2.3 创建新文档创建新文档2.3.3 2.3.3 通过模板创建文档通过模板创建文档1)1)选择文件选择文件 新建。新建。新建文档对
18、话框随即打开。新建文档对话框随即打开。2)2)单击模板选项卡。单击模板选项卡。3)3)在模板用于列表中，选择包含要使用的模板在模板用于列表中，选择包含要使用的模板的的 站点，然后从右侧的列表中选择一个模板。站点，然后从右侧的列表中选择一个模板。如图如图2-102-10所示。所示。4)4)单击创建。单击创建。新文档在文档窗口中打开。新文档在文档窗口中打开。5)5)保存该文档。保存该文档。2.3 创建新文档创建新文档例例2_52_5：打开厦门软件职业技术学：打开厦门软件职业技术学院网站，并通过模板创建文院网站，并通过模板创建文档。档。1 1）窗口）窗口 文件，打开文件文件，打开文件面板。面板。2
19、2）在文件面板中，从弹出菜）在文件面板中，从弹出菜单中选择厦门软件职业技单中选择厦门软件职业技术学院网站。术学院网站。3)3)选择文件选择文件 新建。新建。单击单击模板选项卡。模板选项卡。即出现即出现从模板新建对话框。从模板新建对话框。4)4)在模板用于列表中，选择包在模板用于列表中，选择包含要使用的模板的含要使用的模板的 站点，然站点，然后从右侧的列表中选择一个后从右侧的列表中选择一个模板模板xmstcxmstc。如图。如图2-82-8所示。所示。4)4)单击创建。单击创建。2.3 创建新文档创建新文档2.3.4 保存文档1)选择文件保存。在出现的对话框中，定位到要用来保存文件的文件夹。最好
20、将文件保存在 站点中。2)在文件名称文本框中，键入文件名。3)单击保存。2.3 创建新文档创建新文档2.3.5设置新文档 1设置默认的新文档类型可以在首选参数对话框设置新文档默认的新文档类型。2设置新建的HTML文档的默认文件扩展名可以定义创建的 HTML 文档的默认文件扩展名。例如，可以将.htm 或.html 扩展名用于所有的新建 HTML 文档。如图2-11所示。2.3 创建新文档创建新文档2.3.6打开现有文档1)选择文件打开。2)出现打开对话框。也可以使用文件面板来打开文件。3)定位到并选择要打开的文件。4)单击打开。2.4 页面属性的设置2.4.12.4.1设置设置背景图像或背景页
21、面颜色背景图像或背景页面颜色 1.1.打开页面属性面板：打开页面属性面板：n n 对于创建的每一页，可以使用页面属性对话框（对于创建的每一页，可以使用页面属性对话框（修改修改 页面属性）指定布局和格式设置属性。页面属性）指定布局和格式设置属性。n n在在 页面内点击鼠标右键，选择页面属性。如图页面内点击鼠标右键，选择页面属性。如图2-122-12所示。所示。n n按快捷键按快捷键CTRL-JCTRL-J。2.2.使用页面属性对话框可以指定页面的默认字体家族和使用页面属性对话框可以指定页面的默认字体家族和字体大小、背景颜色、边距、链接样式及页面设计的许多字体大小、背景颜色、边距、链接样式及页面设
22、计的许多其他方面。可以为创建的每个新页面指定新的页面属性，其他方面。可以为创建的每个新页面指定新的页面属性，也可以修改现有页面的属性。也可以修改现有页面的属性。2.4 页面属性的设置2.4.1 2.4.1 设置设置背景图像或背景页面颜色背景图像或背景页面颜色1)1)选择修改选择修改 页面属性，页面属性，或从文档窗口的设计或从文档窗口的设计视图中的上下文菜单中选择视图中的上下文菜单中选择页面属性。页面属性。2)2)在页面属性对话框中选择在页面属性对话框中选择外观类别。如图外观类别。如图2-132-13所示。所示。3)3)若要设置背景图像，单击若要设置背景图像，单击“浏览浏览”按钮，然后浏览并选择
23、图像。按钮，然后浏览并选择图像。或者，可以在或者，可以在“背景图像背景图像”对对话框中输入背景图像的路径。话框中输入背景图像的路径。4)4)若要设置背景颜色，单击背景若要设置背景颜色，单击背景颜色框并从颜色选择器中选颜色框并从颜色选择器中选择颜色。如图择颜色。如图2-142-14所示。所示。2.4 页面属性的设置2.4.22.4.2设置文本和链接属性设置文本和链接属性n n文本和链接为文本、链接、访问过的链接和活动链接定义文本和链接为文本、链接、访问过的链接和活动链接定义默认颜色。也可以使用默认颜色。也可以使用 CSS CSS 样式表来控制这些颜色。样式表来控制这些颜色。n n左边距和顶部边距
24、指定左边距和顶部边距指定 body body 标签中的页边距大小。要确标签中的页边距大小。要确保在任何一个浏览器中都不出现边距，将四个值都设置为保在任何一个浏览器中都不出现边距，将四个值都设置为 0 0。在文档窗口中不显示页边距；若要查看边距，使。在文档窗口中不显示页边距；若要查看边距，使用在浏览器中预览。用在浏览器中预览。n n使用左边距和顶部边距设置使用左边距和顶部边距设置body body 标签中的页边距标签中的页边距大小，要不出现边距，将值都设置为大小，要不出现边距，将值都设置为 0 0。在文档窗口。在文档窗口中不显示页边距；若要查看边距，使用在浏览器中预览中不显示页边距；若要查看边距
25、，使用在浏览器中预览。2.4 页面属性的设置2.4.3 2.4.3 更改文档标题更改文档标题1 1）文档打开时，执行下列操）文档打开时，执行下列操作之一：作之一：选择修改选择修改 页面属性。页面属性。在文档中的空白区域右键单击，在文档中的空白区域右键单击，然后选择页面属性。然后选择页面属性。2 2）在标题文本框中，输）在标题文本框中，输入页面标题，然后按入页面标题，然后按 Enter Enter 键。如图键。如图2-152-15所示。所示。本章小结本章小结 本章主要介绍了如何创建和设置本地站点；创建和本章主要介绍了如何创建和设置本地站点；创建和设置远程站点的方法；如何创建新的文档和文档设置远程
26、站点的方法；如何创建新的文档和文档的属性设置。一般来说，应该直接在网站内创建的属性设置。一般来说，应该直接在网站内创建网页，或在创建网页之后将其保存在网站内，而网页，或在创建网页之后将其保存在网站内，而不要单独创建并随意保存网页。本章的重点是创不要单独创建并随意保存网页。本章的重点是创建网站和网页，在建网站和网页，在页面属性面板内页面属性面板内设置网页的属设置网页的属性，这种设置将作用于站点内的所有网页。本章性，这种设置将作用于站点内的所有网页。本章的难点创建和设置远程站点，理解远程站点作用，的难点创建和设置远程站点，理解远程站点作用，理解远程站点与本地站点之间的关系。理解远程站点与本地站点之间的关系。作业作业1 1填空题填空题1 1）Dreamweaver Dreamweaver 站点由三部分站点由三部分_组成组成。2 2）本地站点位于本地站点位于_上，也可以位上，也可以位于于_上。上。3 3）测试服务器是测试服务器是_的文件夹。的文件夹。4 4）一般说来，远端文件夹位于运行一般说来，远端文件夹位于运行 _上上。2 2简答题简答题1 1）若要更改页面标题如何如何操作？）若要更改页面标题如何如何操作？2 2）简述通过模板创建文档的方法？）简述通过模板创建文档的方法？3 3）简述创建和设置本地站点的步骤）简述创建和设置本地站点的步骤?