第2章创建站点和网页文档

第2章创建站点和网页文档厦门软件学院熊锡义2007年3月课前复习Dreamweaver8的工作区元素Dreamweaver8的工作区布局打开“首选参数”对话框Dreamweaver8的工具栏Dreamweaver8的面板组使用Dreamweaver帮助系统本章要点：创建和设置本地站点创建和设置远程站点创建文档设置页面属性2.1站点的规划和创建步骤1.确定站点目标和主题2.创建站点的逻辑结构和物理结构3.规划页面的外观布局4.设计导航方案5.创建、收集和整理资源6.选择合适的制作工具7.制作网页8.上传测试9.推广宣传10.维护更新合理的结构设计对于网站的规划也是至关重要的。以下是三种常用的结构类型。①层状结构层状结构类似于目录系统的树型结构，主页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题主页页面1页面2页面3②线性结构线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。主页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题页面6③Web结构Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。2.2设置Dreamweaver站点2.2.1.关于Dreamweaver站点1．站点的组成。Dreamweaver站点由三部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型：1)本地站点本地站点是用户的工作目录。2)远端站点远端文件夹是存储文件的位置。一般说来，远端文件夹位于运行Web服务器的计算机上。本地站点和远端文件夹使用户能够在本地磁盘和Web服务器之间传输文件；这使用户可以轻松管理Dreamweaver站点中的文件。3)测试服务器测试服务器是Dreamweaver处理动态页的文件夹。2.2.2使用＂向导＂设置本地站点本地站点是Dreamweaver站点的工作目录。此文件夹可以位于本地计算机上，也可以位于网络服务器上。执行以下操作：1)选择“站点”“管理站点”。如图2-3所示。2)单击“新建”。出现“站点定义”对话框。如图2-4所示。完成站点设置过程例2_1使用基本设置创建本地站点＂厦门软件学院网站＂。2.2.2使用＂向导＂设置本地站点例2_1使用基本设置创建本地站点“厦门软件学院网站”。1.建立本地文件夹＂part2＂。2.＂站点＂＂管理站点＂＂新建＂＂基本＂。3.站点名称：厦门软件学院网站。4.选择文件存储在计算机上的位置：＂part2＂。单击＂下一步＂按钮。5.选择＂否，我不想使用服务器技术＂。单击＂下一步＂按钮。6.选择第一个选项＂编辑我的计算机上的本地副本…＂。单击＂下一步＂按钮。7.选择“无”单击“下一步”按钮。8.单击＂完成＂按钮。其他选择保持默认值。如图2-5所示。。2.2.3使用＂高级＂设置来设置站点1）选择“站点”“管理站点”。出现“管理站点”对话框。单击＂新建＂。出现＂站点定义＂对话框。如图2-4所示。单击＂高级＂按钮。2）＂本地信息＂类别：3）＂远端站点＂类别：2.2.3使用＂高级＂设置来设置站点例2_2使用高级设置创建站点“厦门软件职业技术学院网站”。1)在L盘建立本地文件夹＂part2web＂。2)在文件夹＂part2web＂内建立子文件夹＂images＂，并将准备好的图像文件保存在该文件夹内。3)＂站点＂＂管理站点＂＂新建＂＂高级＂。4)在窗口左边选择分类：＂本地信息＂。设置参数为：（1）站点名称：厦门软件职业技术学院网站。（2）本地根文件夹：part2web。（3）默认图像文件夹：part2web\images。其他参数使用默认选项。5）在窗口左边选择分类：＂远端信息＂。设置参数为：访问：本地。远端文件夹：part2web。其他参数使用默认选项。6)单击＂确定＂按钮。2.3创建新文档2.3.1创建新的空白文档1)选择＂文件＂＂新建＂。即出现＂新建文档＂对话框。＂常规＂选项卡已被选定。如图2-7所示。2)从＂类别＂列表中选择＂基本页＂、＂动态页＂、＂模板页＂、＂其他＂或＂框架集＂；然后从右侧的列表中选择要创建的文档的类型。3)单击＂创建＂按钮。新文档在＂文档＂窗口中打开。4)保存该文档。2.3创建新文档例2_3在厦门软件学院网站内创建网页index.htm。1）＂窗口＂＂文件＂，打开文件面板。2）在＂文件＂面板中，从弹出菜单（当前站点、服务器或驱动器显示在该菜单中）中选择＂厦门软件学院网站＂站点。3）选择＂文件＂＂新建＂。在＂新建文档＂对话框中选择＂基本页＂创建HTML文档。单击＂创建＂按钮。4）选择＂文件＂＂保存。对话框中，定位到part2文件夹。5）在＂文件名称＂文本框中，键入文件名＂index＂。6）单击＂保存＂。2.3创建新文档2.3.2创建基于设计文件的文档1)选择＂文件＂＂新建＂。即出现＂新建文档＂对话框。＂常规＂选项卡已被选定。2)在“类别”列表中，选择“CSS样式表”、“基于表格的布局”、“页面设计(CSS)”、“页面设计”或“页面设计（有辅助功能的）”，然后从右侧的列表中选择一个设计文件。3)单击＂创建＂按钮。新文档在＂文档＂窗口中打开。如果选择了一个页面设计(CSS)，三列左导航模式的网页，如图2-8所示，则＂文档＂窗口会显示三列左导航的网页,用户只需要修改其中的文档和图片，便容易完成一个网页。4)保存该文档。2.3创建新文档例2_4：打开厦门软件职业技术学院网站，并使用基于“页面设计CSS”，建立双列左导航模式的网页设计文件。1）＂窗口＂＂文件＂，打开文件面板。2）在＂文件＂面板中，从弹出菜单（当前站点、服务器或驱动器显示在该菜单中）中选择＂厦门软件职业技术学院网站＂。3）选择＂文件＂＂新建＂。即出现＂新建文档＂对话框。4）在＂类别＂列表中，选择＂页面设计CSS＂，然后从右侧的列表中选择双列左导航模式的网页设计文件。如图2-9所示.。5）单击＂创建＂按钮。6）打开了一个另存为对话框。在文件名文本框中输入文件名＂index＂。单击＂保存＂按钮。7）打开了一个复制相关文件对话框，单击＂复制＂按钮。8）打开了＂文档＂窗口会显示双列左导航的网页。9）在文档栏的标题文本框中输入网站标题＂厦门软件职业技术学院网站＂，完成一个网页。10）保存该文档。2.3创建新文档2.3.3通过模板创建文档1)选择＂文件＂＂新建＂。＂新建文档＂对话框随即打开。2)单击＂模板＂选项卡。3)在＂模板用于＂列表中，选择包含要使用的模板的站点，然后从右侧的列表中选择一个模板。如图2-10所示。4)单击＂创建＂。新文档在＂文档＂窗口中打开。5)保存该文档。2.3创建新文档例2_5：打开厦门软件职业技术学院网站，并通过模板创建文档。1）＂窗口＂＂文件＂，打开文件面板。2）在＂文件＂面板中，从弹出菜单中选择＂厦门软件职业技术学院网站＂。3)选择＂文件＂＂新建＂。单击＂模板＂选项卡。即出现＂从模板新建＂对话框。4)在＂模板用于＂列表中，选择包含要使用的模板的站点，然后从右侧的列表中选择一个模板xmstc。如图2-8所示。4)单击＂创建＂。2.3创建新文档2.3.4保存文档1)选择＂文件＂＂保存＂。在出现的对话框中，定位到要用来保存文件的文件夹。最好将文件保存在站点中。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.1设置背景图像或背景页面颜色1.打开页面属性面板：`对于创建的每一页，可以使用＂页面属性＂对话框（＂修改＂＂页面属性＂）指定布局和格式设置属性。在页面内点击鼠标右键，选择页面属性。如图2-12所示。按快捷键CTRL-J。2.使用＂页面属性＂对话框可以指定页面的默认字体家族和字体大小、背景颜色、边距、链接样式及页面设计的许多其他方面。可以为创建的每个新页面指定新的页面属性，也可以修改现有页面的属性。2.4页面属性的设置2.4.1设置背景图像或背景页面颜色1)选择＂修改＂＂页面属性＂，或从＂文档＂窗口的＂设计＂视图中的上下文菜单中选择＂页面属性＂。2)在＂页面属性＂对话框中选择＂外观＂类别。如图2-13所示。3)若要设置背景图像，单击“浏览”按钮，然后浏览并选择图像。或者，可以在“背景图像”对话框中输入背景图像的路径。4)若要设置背景颜色，单击＂背景＂颜色框并从颜色选择器中选择颜色。如图2-14所示。2.4页面属性的设置2.4.2设置文本和链接属性文本和链接为文本、链接、访问过的链接和活动链接定义默认颜色。也可以使用CSS样式表来控制这些颜色。左边距和顶部边距指定body标签中的页边距大小。要确保在任何一个浏览器中都不出现边距，将四个值都设置为0。在＂文档＂窗口中不显示页边距；若要查看边距，使用＂在浏览器中预览＂。使用＂左边距＂和＂顶部边距设置＂body标签中的页边距大小，要不出现边距，将值都设置为0。在＂文档＂窗口中不显示页边距；若要查看边距，使用＂在浏览器中预览＂。2.4页面属性的设置2.4.3更改文档标题1）文档打开时，执行下列操作之一：选择＂修改＂＂页面属性＂。在文档中的空白区域右键单击，然后选择＂页面属性＂。2）在＂标题＂文本框中，输入页面标题，然后按Enter键。如图2-15所示。本章小结本章主要介绍了如何创建和设置本地站点；创建和设置远程站点的方法；如何创建新的文档和文档的属性设置。一般来说，应该直接在网站内创建网页，或在创建网页之后将其保存在网站内，而不要单独创建并随意保存网页。本章的重点是创建网站和网页，在页面属性面板内设置网页的属性，这种设置将作用于站点内的所有网页。本章的难点创建和设置远程站点，理解远程站点作用，理解远程站点与本地站点之间的关系。作业1．填空题1）Dreamweaver站点由三部分____________________组成。2）＂本地站点＂位于____________________上，也可以位于____________________上。3）测试服务器是____________________的文件夹。4）一般说来，远端文件夹位于运行_____________上。2．简答题1）若要更改页面标题如何如何操作？2）简述通过模板创建文档的方法？3）简述创建和设置本地站点的步骤?