网页设计与制作

张泉 老师

目录

  • 1 《网页设计与制作》概要
    • 1.1 课程标准
    • 1.2 课程考核方案
    • 1.3 课程任务汇总
  • 2 项目一  HTML语言
    • 2.1 网站和网页
    • 2.2 网站策划书
    • 2.3 HTML标识语言1--标签格式
    • 2.4 HTML标识语言2--属性和标题
    • 2.5 HTML标识语言3-段落排版和图片
    • 2.6 HTML标识语言4--链接和表格
    • 2.7 HTML标识语言5--样式和css
    • 2.8 HTML标识制作页面-简单排版
    • 2.9 HTML标识制作页面-链接及多页面
    • 2.10 HTML复习题
  • 3 项目二 DM软件制作页面和站点
    • 3.1 Dreamweaver  工作流程和工作区
    • 3.2 Dreamweaver  工作区2 --工具栏
    • 3.3 Dreamweaver  站点
    • 3.4 Dreamweaver  创建页面
    • 3.5 Dreamweaver  管理资源库
    • 3.6 Dreamweaver  CSS样式
    • 3.7 Dreamweaver  表格
Dreamweaver  站点

设置 Dreamweaver  站点

关于 Dreamweaver  站点

在 Dreamweaver  中,术语 “ 站点 ” 指属于某个 Web  站点的文档的本地或远程存储位置。 Dreamweaver  站点提供了一种方法,使您可以组织和管理您所有的 Web  文档,将您的站点上传到 Web  服务器,跟踪和维护您的链接以及管理和共享文件。应定义一个站点以充分利用 Dreamweaver  的功能。

注: 若要定义 Dreamweaver  站点,只需设置一个本地文件夹。若要向 Web  服务器传输文件或开发 Web  应用程序,还必须添加远程站点和测试服务器信息。

Dreamweaver  站点由三个部分 (或文件夹)组成,具体取决于开发环境和所开发的 Web  站点类型:

本地根文件夹 存储您正在处理的文件。 Dreamweaver  将此文件夹称为 “ 本地站点 ” 。此文件夹通常位于本地计算机上,但也可能位于网络服务器上。

远程文件夹 存储用于测试、生产和协作等用途的文件。 Dreamweaver  在 “ 文件 ” 面板中将此文件夹称为 “ 远程站点 ” 。远程文件夹通常位于运行 Web  服务器的计算机上。远程文件夹包含用户从 Internet  访问的文件。

通过本地文件夹和远程文件夹的结合使用,您可以在本地硬盘和 Web  服务器之间传输文件,这将帮助您轻松地管理Dreamweaver  站点中的文件。您可以在本地文件夹中处理文件,希望其他人查看时,再将它们发布到远程文件夹。

测试服务器文件夹 Dreamweaver  在其中处理动态页的文件夹。

了解本地和远程文件夹的结构

如果希望使用 Dreamweaver  连接到某个远程文件夹,可在 “ 站点定义 ” 对话框的 “ 远程信息 ” 类别中指定该远程文件夹。指定的远程文件夹 (也称为 “ 主机目录 ” )应该对应于您的 Dreamweaver  站点的本地根文件夹。(本地根文件夹是您的Dreamweaver  站点的顶级文件夹。) 与本地文件夹一样,远程文件夹可以具有任何名称,但 Internet  服务提供商通常会将各个用户帐户的顶级远程文件夹命名为 public_html 、 pub_html  或者与此类似的其它名称。如果您亲自管理自己的远程服务器,并且可以将远程文件夹命名为所需的任意名称,则最好使本地根文件夹与远程文件夹同名。

在下例中,左侧为一个本地根文件夹示例,右侧为一个远程文件夹示例。本地计算机上的本地根文件夹直接映射到 Web  服务器上的远程文件夹,而不是映射到远程文件夹的任何子文件夹或目录结构中位于远程文件夹之上的文件夹。


 上例显示的是本地计算机上的一个本地根文件夹和远程 Web  服务器上的一个顶级远程文件夹。但是,如果要在本地计算机上维护多个 Dreamweaver  站点,则在远程服务器上需要等量个数的远程文件夹。这时上例便不再适用,而应在 public_html

文件夹中创建不同的远程文件夹,然后将它们映射到本地计算机上各自对应的本地根文件夹。

当首次建立远程连接时, Web  服务器上的远程文件夹通常是空的。之后,当您使用 Dreamweaver  上传本地根文件夹中的所有文件时,便会用您所有的 Web  文件来填充远程文件夹。远程文件夹应始终与本地根文件夹具有相同的目录结构。(也就是说,本地根文件夹中的文件和文件夹应始终与远程文件夹中的文件和文件夹一一对应。) 如果远程文件夹的结构与本地根文件夹的结构不匹配, Dreamweaver  会将文件上传到错误的位置,站点访问者可能无法看到这些文件。此外,如果文件夹和文件结构不同步,图像和链接路径会很容易断开。

Dreamweaver  要连接到的远程文件夹必须存在。如果未在 Web  服务器上指定一个文件夹作为远程文件夹,则应创建一个远程文件夹或要求服务器管理员为您创建一个远程文件夹。



设置新站点

设置 Dreamweaver  站点是一种组织所有与 Web  站点关联的文档的方法。您可在 “ 站点设置 ” 对话框中为 Dreamweaver  站点指定设置。

若要打开 “ 站点设置 ” 对话框,请选择 “ 站点 ”>“ 新建站点 ” 。

站点类别

仅需填写 “ 站点设置 ” 对话框的 “ 站点 ” 类别,即可开始处理 Dreamweaver  站点。此类别允许您指定将在其中存储所有站点

文件的本地文件夹。此本地文件夹可以位于本地计算机上,也可以位于网络服务器上。

准备好后,可以在 “ 站点设置 ” 对话框中填写其它类别,包括 “ 服务器 ” 类别,您可以在其中指定远程服务器上的远程文件夹。

注: 如果本地根文件夹位于运行 Web  服务器的系统中,则无需指定远程文件夹。这意味着该 Web  服务器正在您的本地计算机上运行。

站点名称 显示在 “ 文件 ” 面板和 “ 管理站点 ” 对话框中的名称;该名称不会在浏览器中显示。

本地站点文件夹 本地磁盘上存储站点文件、模板和库项目的文件夹的名称。在硬盘上创建一个文件夹,或者单击文件夹图标浏览到该文件夹。当 Dreamweaver  解析站点根目录相对链接时,它是相对于该文件夹来解析的。

服务器类别“ 服务器 ” 类别允许您指定远程服务器和测试服务器。


设置 FTP  连接的选项

如果使用 FTP  连接到 Web  服务器,请使用此设置。

1 选择 “ 站点 ”>“ 管理站点 ” 。

2 单击 “ 新建 ” 以设置新站点,或选择现有的 Dreamweaver  站点并单击 “ 编辑 ” 。

3 在 “ 站点设置 ” 对话框中,选择 “ 服务器 ” 类别并执行下列操作之一:

• 单击 “ 添加新服务器 ” 按钮,添加一个新服务器

• 选择一个现有的服务器,然后单击 “ 编辑现有服务器 ” 按钮

下图显示了已填充文本字段的 “ 服务器 ” 类别的 “ 基本 ” 屏幕。


“ 站点设置 ” 对话框的 “ 服务器 ” 类别的 “ 基本 ” 屏幕。

4 在 “ 服务器名称 ” 文本框中,指定新服务器的名称。该名称可以是所选择的任何名称。

5 从 “ 连接方法 ” 弹出菜单中,选择 “FTP” 。

6 在 “FTP  地址 ” 文本框中,输入要将网站文件上传到其中的 FTP  服务器的地址。

FTP  地址是计算机系统的完整 Internet  名称,如 ftp.mindspring.com 。请输入完整的地址,并且不要附带其它任何文本。特别是不要在地址前面加上协议名。

如果不知道 FTP  地址,请与 Web  托管服务商联系。

注: 端口 21  是接收 FTP  连接的默认端口。可以通过编辑右侧的文本框来更改默认端口号。保存设置后, FTP  地址的结尾将附加上一个冒号和新的端口号 (例如, ftp.mindspring.com:29 )。

7 在 “ 用户名 ” 和 “ 密码 ” 文本框中,输入用于连接到 FTP  服务器的用户名和密码。

8 单击 “ 测试 ” ,测试 FTP  地址、用户名和密码。

注: 对于托管站点,必须从托管服务商的系统管理员处获取 FTP  地址、用户名和密码信息。其他人无权访问这些信息。确切按照系统管理员提供的形式输入相关信息。

9 默认情况下, Dreamweaver  会保存密码。如果您希望每次连接到远程服务器时 Dreamweaver  都提示输入密码,请取消选择 “ 保存 ” 选项。

10 在 “ 根目录 ” 文本框中,输入远程服务器上用于存储公开显示的文档的目录 (文件夹)。

如果不能确定应输入哪些内容作为根目录,请与服务器管理员联系或将文本框保留为空白。在有些服务器上,根目录就是您首次使用 FTP  连接到的目录。若要确定这一点,请连接到服务器。如果出现在 “ 文件 ” 面板 “ 远程文件 ” 视图中的文件夹具有像

public_html 、 www  或您的用户名这样的名称,它可能就是您应该在 “ 根目录 ” 文本框中输入的目录。

11 在 “Web URL” 文本框中,输入 Web  站点的 URL (例如, http://www.mysite.com )。 Dreamweaver  使用 Web URL创建站点根目录相对链接,并在使用链接检查器时验证这些链接。

12 如果仍需要设置更多选项,请展开 “ 更多选项 ” 部分。

13 如果代理配置要求使用被动式 FTP ,请选择 “ 使用被动式 FTP” 。

“ 被动式 FTP” 使您的本地软件能够建立 FTP  连接,而不是请求远程服务器来建立它。如果不确定是否使用被动式 FTP ,请向

系统管理员确认,或者尝试选中和取消选中 “ 使用被动式 FTP” 选项。

有关详细信息,请参阅 Adobe  网站上的 TechNote 15220 ,网址: www.adobe.com/go/tn_15220_cn 。

14 如果使用的是启用 IPv6  的 FTP  服务器,请选择 “ 使用 IPv6  传输模式 ” 。

15 如果希望指定一个代理主机或代理端口,请选择 “ 使用代理 ” 。

有关详细信息,请单击链接转到 “ 首选参数 ” 对话框,然后从 “ 首选参数 ” 对话框的 “ 站点 ” 类别中单击 “ 帮助 ” 按钮。

16 单击 “ 保存 ” 关闭 “ 基本 ” 屏幕。然后在 “ 服务器 ” 类别中,指定刚添加或编辑的服务器为远程服务器、测试服务器,还是同时为这两种服务器。

管理和编辑站点

使用 “ 管理站点 ” 对话框创建新站点、编辑站点、重制站点、删除站点或者导入或导出站点设置。

1 选择 “ 站点 ”>“ 管理站点 ” ,从左侧的列表中选择一个站点。

2 单击一个按钮选择以下选项之一,并单击 “ 完成 ” 。

新建 使您可以创建新站点。

编辑 使您可以编辑现有站点。

复制 创建所选站点的副本。副本将出现在站点列表窗口中。

删除 删除所选站点;此操作无法撤消。

导出 使您可以将站点设置导出为 XML  文件 (*.ste) 。

导入 使您可以选择要导入的站点设置文件 (*.ste) 。