第二章创建和管理站点PPT课件

1、1,第二章 创建站点,内容提要： DREAMWEAVER8软件简介和设置 定义站点、页面属性与超链接 学习目标： 了解DREAMWEAVER的作用，基本界面布局，以及各功能区的应用范围，了解控制软件界面和文档的基本方法。 掌握如何去建立和管理一个新站点，掌握如何在地图模式搭建网站结构，学习如何在页面设置的HTML和CSS模式下修改各项参数。 掌握链接的各种状态的设置，链接的组成结构，以及链接的多种创建方法，能够创建功能完整的EMAIL链接，内部和外部锚链接。,2020/8/2,2,2.1 DREAMWEAVER8 软件简介和设置,功能： 创建和编辑网页元素 编辑HTML代码 管理站点 插入Fi

2、reworks文件和Flash动画 强大的模板功能 启动和编辑外部媒体定制和扩展功能,2020/8/2,3,工作区布局,Dreamweaver 8 的工作界面继承了Dreamweaver系列产品一贯的简洁、高效和易用性，大多数功能都能在工作界面中很方便地找到。 首次启动Dreamweaver8时，会弹出“工作区设置”对话框。在该对话框中，提供了“设计器”与“编码器”两种布局风格，用户可以根据需要从中选择一种工作区布局。系统默认为“设计器”方式。,2020/8/2,4,设计器是一个使用了多文档界面的集成工作区，其中全部文档窗口和面板被集成在一个应用窗口中。 编码器也是一个集成的工作环境，但更加适

3、应手工编码人员使用。,2020/8/2,5,起始页,在打开的文档窗口中，可以看到起始页对话框，该对话框由三个栏目组成。如果想重新调回起始页，点编辑/首选参数/常规，选择显示起始页，然后点击确定即可。,2020/8/2,6,界面概览,2020/8/2,7,7,（1）标题栏 标题栏位于程序窗口的顶端，主要显示Dreamweaver 8的图标、名称、当前文档的标题和名称等按钮。 （2）菜单栏 菜单栏提供了所有的菜单命令，是提供软件最完整功能的方式。,2020/8/2,8,8,（3）插入面板 Dreamweaver 8的“插入”面板提供了创建各种对象的快捷按钮，包括常用、布局、表单、文本、HTML、应

4、用程序、Flash元素、收藏夹插入面板等。单击“插入”面板左侧的下拉按钮，可以在各插入面板之间切换。,2020/8/2,9,9,（4）工具栏 工具栏提供了常用命令的快捷启动方式。Dreamweaver 8的工具栏有两个，一个是“文档”工具栏，一个是“标准”工具栏。“文档”工具栏提供了视图切换、设置文档标题、浏览器检查错误、文件管理、预览网页、视图管理等功能。“标准”工具栏可以实现新建文档、保存文档、剪切、复制、粘贴、撤销和重做等功能。 （5）文档窗口 文档窗口是用来显示、创建和编辑当前文档的地方。,2020/8/2,10,10,（6）状态栏 状态栏上包括标记符选择器、窗口设置等工具。 （7）“

5、属性”面板 “属性”面板上显示的是被选取对象和文本的各种属性，使用户可以随时修改，大大方便了编辑工作。要显示或隐藏“属性”面板，应选择“窗口”菜单中的“属性”命令或者直接按“Ctrl+F3”。 “属性”面板的右下角有一个三角形图标，单击该图标，可以展开或折叠属性面板。,2020/8/2,11,11,（8）其他面板 Dreamweaver 8提供了多种设置面板，如“文件”面板、“行为”面板、“层”面板等。默认情况下，它们停靠在窗口右侧，用户可以用鼠标将其拖动到窗口的任意位置，从而成为浮动面板。单击面板名称，可以展开或隐藏该面板；单击面板右上角的按钮，利用弹出的下拉菜单可以实现多种相关操作。,20

6、20/8/2,12,12,视图,作为一种所见即所得的网页编辑软件，Dreamweaver自动在用户创建网页时生成底层的HTML代码，同时提供了很好的HTML代码编辑功能。使用工具栏中的视图切换按钮可以很方便地切换到代码视图，以便查看当前编辑网页的HTML源代码。 如果需要同时查看代码视图和设计视图，可以单击工具栏上的显示代码和设计按钮，此时Dreamweaver将同时在窗口中显示代码视图和设计视图。,2020/8/2,13,获取帮助,帮助文档 选择“帮助”菜单中的“帮助”可以打开帮助文档，在文档中包含有“目录”、“索引”、“搜索”、“书签”4个标签。 参考”面板 “参考”面板为用户提供了标记语

7、言、编程语言和 CSS 样式的快速参考工具。它提供了有关用户在“代码”视图（或代码检查器）中处理的特定标签、对象和样式的信息。“参考”面板还提供了可粘贴到文档中的示例代码。,2020/8/2,14,站点概述 Dreamweaver站点可组织与Web站点相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到Web服务器。若要充分利用Dreamweaver的功能，需要定义一个站点。也可以在不设置Dreamweaver站点的情况下编辑文件。,2.2 创建和管理本地站点,2020/8/2,15,站点构成： 本地文件夹： 是用户的工作目录。Dreamweaver将该文件夹称为本地站点。本

8、地文件夹一般位于本地计算机上，用于存储正在编辑的网页文档及其相关文件。 注意：只需建立本地文件夹即可定义Dreamweaver站点。若要向Web服务器传输文件或开发Web应用程序，还需添加远程站点和测试服务器信息。,2020/8/2,16,远程文件夹： 是存储文件的位置，这些文件用于测试、生产、协作和发布等。远程文件夹一般位于运行Web服务器的计算机上，Dreamweaver将此文件夹称为远程站点。 本地文件夹和远程文件夹使用户能够在本地磁盘和Web服务器之间传输文件，可以轻松管理Dreamweaver站点中的文件。 测试服务器： 是Dreamweaver处理动态网页的文件夹。如果运行Web服

9、务器的计算机上同时运行应用程序服务器，则测试服务器文件夹与远程文件夹可指定为同一文件夹。,2020/8/2,17,站点规划 规划站点是指利用不同的文件夹，将不同的网页内容分门别类地保存，合理地组织站点结构。它是设计站点的必要前提。 在规划站点结构时，用户应在本地磁盘上创建一个文件夹作为站点的根目录，根据站点内容，所有被创建和编辑的网页都保存在该文件夹或下属子文件夹中。发布站点时，只需将站点文件夹中所有内容上传到Web服务器上即可。,2020/8/2,18,内容分类 一是将素材按类型分，如分为图像、动画、文字资料等。 二是按照网站相关的内容进行分类。（如农大网站） 文件、文件夹名称 合理的文件、

10、文件夹名称在站点规划中也是比较重要的，一个好的名称很容易让人理解，一看就知道网页要表述的内容。在对文件及文件夹命名的时候，应回避中文和长文件名，最好使用小写等等。,2020/8/2,19,创建站点 在Dreamweaver中选择“站点”菜单中的“管理站点”命令，打开“管理站点”对话框。 在对话框中单击“新建”按钮，从弹出菜单中选择“站点”选项，打开“站点定义”对话框。执行下列操作之一： 单击“基本”选项卡以使用“站点定义”向导，它将引导用户逐步完成设置过程。 单击“高级”选项卡以使用“高级”设置，它使用户可以根据需要分别设置本地、远程和测试文件夹。（后续课件采用）,2020/8/2,20,20

11、,设置本地站点,2020/8/2,21,设置说明： 站点名称：Dreamweaver站点的名称，显示在“文件”面板和“管理站点”对话框中。 本地根文件夹：本地磁盘中存储站点文件、模板和库项目的文件夹。 默认图像文件夹：本地站点用来默认存放图像的文件夹。 HTTP地址：已完成的Web站点将使用的URL。输入该地址使Dreamweaver能够验证站点中使用绝对URL或站点根目录相对路径的链接。,2020/8/2,22,设置说明： 访问：选择“本地/网络”表示连接到本地计算机或局域网上运行的Web服务器。 远端文件夹：远程站点的根文件夹。,设置远程站点-本地/局域网环境,2020/8/2,23,设置

12、远程站点-广域网环境,2020/8/2,24,设置说明： 访问：向远程文件夹上传文件，或从其中下载文件时使用的访问方法。 FTP主机：提供上传/下载服务的FTP主机。 注意：输入主机名时不要带任何其他的文本，尤其是不要在主机名前面添加协议名。 主机目录：FTP主机上存储站点文档的目录，即远程文件夹。 登录&密码：用于连接到 FTP 主机的登录名和密码。,注意：远程文件夹所在的计算机可以同时提供Web服务和FTP服务。,2020/8/2,25,设置说明： 服务器模型：服务器端动态网页技术。 URL前缀：用户在浏览器地址栏中输入的用来打开Web应用程序的URL。,设置测试服务器,2020/8/2,

13、26,用户可以利用“管理站点”对话框维护站点信息。 复制站点 编辑站点 删除站点 导入导出站点 可以将站点导出为带STE扩展名的XML文件来备份设置好的站点信息。在需要的时候可以将其导入 Dreamweaver。,管理站点,2020/8/2,27,可以使用“文件”面板或“文档”窗口来从本地站点上传文件到远程站点，从远程站点获取文件到本地站点。 上传文件,上传整个本地站点,上传当前文档,上传与获取文件,2020/8/2,28,获取文件,获取（下载）整个站点,将选定的本地文件的远程版本复制到本地站点,2020/8/2,29,可以将Dreamweaver站点的本地文件夹视作链接的图标的视觉地图，此视

14、觉地图称为站点地图。可以使用站点地图将新文件添加到Dreamweaver站点，或者添加、修改或删除链接。 站点地图从主页开始显示两个级别深度的站点结构。站点地图将页面显示为图标，并按在源代码中出现的顺序来显示链接。 站点地图仅适用于本地站点。若要创建远程站点的地图，可将远程站点的内容复制到本地磁盘上的一个文件夹中，然后使用“管理站点”命令将该站点定义为本地站点。,创建站点地图,2020/8/2,30,创建站点地图的步骤如下： 定义站点的主页 在显示站点地图之前，必须先定义站点的主页。站点的主页可以是站点中的任意页面，不必是站点的主要页面。在这种情况下，主页只是地图的起点。,2020/8/2,3

15、1,显示站点地图,在折叠的“文件”面板中显示站点地图,在展开的“文件”面板中显示包含本地文件结构的站点地图,2020/8/2,32,保存站点地图,2020/8/2,33,Dreamweaver提供了多项功能以帮助用户测试站点，其中包括预览页面和检查浏览器兼容性，还可以运行各种报告。下面主要介绍两种测试站点的方法。 运行站点报告 检查链接,站点测试,2020/8/2,34,用户可以对当前文档、选定的文件、整个站点的工作流程或HTML属性（包括辅助功能）运行站点报告。 具体操作步骤如下： 选择“站点”菜单中的“报告”命令，打开“报告”对话框。,运行站点报告,2020/8/2,35,设置“报告”对话

16、框选项。,如果选择工作流程报告，可单击“报告设置”按钮,运行结果,2020/8/2,36,“检查链接”功能用于在当前文档、本地站点的某一部分或者整个本地站点中查找断掉的链接和孤立的文件（文件仍然位于站点中，但没有其它文件链接到该文件）。 检查当前文档中断掉的链接 1、在“文档”窗口中打开要检查链接的文档；2、选择“文件”“检查页”“检查链接”，在“结果”面板组的“链接检查器”面板中显示检查结果。,检查链接,2020/8/2,37,检查站点中的外部链接,检查站点中的孤立文件,2020/8/2,38,新建网页 打开网页 保存网页 设置页面属性 添加页面内容,2.3 编辑网页,2020/8/2,39

17、,超链接是组成网站的基本元素，是它将千千万万个网页组织成一个个网站，又是它将千千万万个网站组织成了风靡全球的WWW，因此可以说超链接就是Web的灵魂。本节首先介绍超链接的基本概念，然后介绍如何创建和管理网页中的超链接。,2.4 超链接,2020/8/2,40,概念,所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。,2.

18、4.1 超链接简介,2020/8/2,41,合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。建议： 避免孤立文件的存在 在网页中避免使用过多的超链接 网页中的超链接不要超过4层 页面较长时可以使用书签 设置主页或上一层的链接,合理安排超链接,2020/8/2,42,内部链接：即在同一个站点内的不同页面之间相互联系的超链接。一般是连接本地文件，通常使用相对链接地址。 锚点链接：可以链接到网页中某个特定位置的链接。 外部链接：把网页与Internet中的目标相联系的链接,一般用绝对地址。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E

19、-mail链接、锚点链接、多媒体文件链接、空链接等。,类型,2020/8/2,43,类型： 绝对路径：是包含服务器协议（对于网页来说通常是http:/或ftp:/）的完全路径。 和根目录相对的路径：是从当前站点的根目录开始的路径。站点上所有可公开的文件都存放在站点的根目录下。 和文档相对的路径：是指和当前文档所在的文件夹相对的路径。,2.4.2 建立文本超链接,2020/8/2,44,在浏览网页时，鼠标指针经过某些文本时，指针的形状发生变化，同时文本也会发生变化（如出现下划线、文本的颜色发生变化、字体发生变化等），提示这是带链接的文本。此时点击鼠标，就会打开所链接的网页，这就是文本超链接。,2

20、020/8/2,45,步骤 在网页上选择需要添加超链接的文本，打开文本 的属性面板。 在属性面板上指定文字的链接目标。 在“目标”下拉列表框中选择目标文件打开的方式。 设置结束后，在网页中被选择的文字改变了颜色，且在文字底部出现一条下划线，即文字的超链接设置完成。在键盘上按“F12”键，即可将网页在浏览器中打开。单击链接的文字，即可打开目标文件。,2020/8/2,46,方法 输入法：直接在链接栏输入想链接的文件地址。 指向法：选择文字，按住属性面板上的“指向文件”按钮，并拖动鼠标指向某个想链接的文件。 快捷法：选中文字，按住SHIFT键，在文字上直接拉出一条线，对某个文件进行链接。 插入法：

21、在常用工具栏中选择“超链接”。然后进行文本、链接、目标、标题的设置，后两项选默认设置即可。 代码法：点击“代码”，可以直接输入， 红色的网页。 插入标签法：选中文字，点击“插入标签/HTML标签/页元素/A”，然后点击“插入”，这里输入链接，打开窗口的目标，点击确定。 环绕标签法：选中文字，按下CTRL+T，出现环绕标签，选择A，点击“HREF”，在引号中输入地址，回车即完成链接。,2020/8/2,47,编辑文本超链接 设置文本链接的状态 一个未被访问过的链接与一个被激活的链接在形式上肯定会有所区别，链接被访问过了也会发生变化，提示用户这是一个已经点击过的链接，所有这些都是链接的状态。通过设

22、置不同的文本颜色可以使各个状态区别开来。,2020/8/2,48,删除文本超链接 在Dreamweaver 8中要删除一个文本超链接很容易，先用鼠标选定文本对象，将光标定位于属性面板的“链接”文本框中，用“BackSpace”键或“Delete”键，将其显示的超链接对象文件名删除，再回车，或选择“修改”|“移除链接”命令，都可以删除超链接而保留原文本对象。,2020/8/2,49,步骤 选中需要建立超链接的图像，此时属性面板显示图像的属性 。 在属性面板中为图像添加文档相对路径的链接。 按“F12”预览网页。,删除图像超链接,删除图片超链接与删除文本超链接的方法相同 。,2.4.3 创建图片超

23、链接,2020/8/2,50,锚点，也称为书签或锚记，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置，免去浏览者翻阅网页寻找信息的麻烦。在网页中加入锚点包括两方面的工作，一是在网页中创建锚点，另一个就是为锚记建立链接。,2.4.4 创建锚点超链接,2020/8/2,51,步骤 将光标移到需要加入锚点的地方，一般是将光标放置在一行或是一段文字的开头部分。 单击插入“常用”面板上的按钮 ，或是选择主窗口的菜单“插入”|“命名锚点”命令，将弹出“命名锚点”对话框。 在对话框的“锚点名称”文本框输入锚点的名称。 单击“确定”按钮。,创建锚点,2020/8/2,52,命名 只能使用字母和数字，锚点命名不支持中文。虽然在插入锚点对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚点添加链接的时候，也无法工作。 锚点名称的第1个字符最好是英文字母，一般不要以数字作为锚点名称的开头。 锚点名称区别英文字母的大小写。 锚点名称间不能含有空格，也不能含有特殊字符。,2020/8/2,53,创建锚点后，还必须链接锚点。选择想要链接到锚点的文字或图片，然后按如下方法中的任意一种进行操作。,在属性面板上的“链接”文本框中输入符号#和锚点名称。 选择文字或图片后，按住Shift键，然后