25、网页构建全攻略

网页构建全攻略

1. 链接与书签

在网页构建中，除了链接到特定文档，还能链接到文档的特定部分。例如，在关于 Writer 的页面里，可能会有针对学生、上班族和书籍设计师的不同部分，通过在首页添加直接指向这些部分的链接，能让浏览者无需滚动页面寻找所需内容。

1.1 设置链接与书签的步骤

设置链接到文档特定部分是一个分两步走的过程：
1. 定义目标文档中的位置 ：打开目标页面，创建标题（如使用 Heading 1 样式），并粘贴一些随机文本。选中第一个部分的标题，选择“插入” - “书签”，在弹出的“插入书签”对话框中输入书签名称。要确保书签命名逻辑一致，因为可能会有很多书签，需便于区分。对页面的每个部分都重复此操作，这些书签将作为其他页面上链接的锚点。
2. 定义到这些位置的链接 ：有两种添加从 Writer 文档到索引页面书签链接的方法：
- 拖放法 ：同时打开两个页面并并排摆放。在第二个文档中，打开“导航器”（选择“编辑” - “导航器”或按 F5），点击“书签”旁边的展开图标，会看到之前创建的书签。将其中一个书签拖到索引文档的适当位置，会以书签名称创建一个链接。若要更改链接名称，选中链接，选择“插入” - “超链接”，在对话框的“文本”部分添加不同文本。
- 超链接对话框法 ：选择“插入” - “超链接”，在对话框中正常添加包含书签的页面路径，然后在“文档中的目标”部分输入书签名称。这些部分的 URL 应具有以下格式： dppl6++sss*oepaj]ia*_ki*l]ca*dpih^kkgi]ngj]ia 。

定义好链接后，保存文档并在网页浏览器中预览，确保一切按预期工作。点击第一个书签链接应跳转到 Writer 页面顶部，后续链接应打开该页面并将链接部分显示在浏览器窗口顶部。

1.2 下载链接

在 Writer 中探索链接的最后一部分是定义一个页面上的链接，用于将文档下载到浏览者的计算机以供后续查看。这可以是普通的 *k`p 文件、PDF、视频、音频文件、电子表格或演示文稿等。与之前讨论的图像链接类似，可以将这些链接设置为指向本地文件（发布页面后会上传到网站）或其他服务器上的远程文件。

设置下载链接的步骤如下：
1. 选择将作为链接的元素（如图像或文本），然后选择“插入” - “超链接”。
2. 在弹出的对话框中选择“文档”，点击“浏览”按钮，导航到要下载的文件所在位置（如 + ksjhk] o 文件夹），该文件夹会在 Web 服务器上镜像。
3. 根据需要使用“其他设置”部分添加更多详细信息。

在链接到可下载文件时，建议在链接旁边添加简短说明，告知用户预期下载的文件大小和类型，例如“Link No1 (2.3MB PDF)”。

1.3 操作总结

1.4 流程图

graph LR
    A[开始] --> B[设置文档特定部分链接]
    B --> B1[定义目标文档位置]
    B --> B2[定义到位置的链接]
    B2 --> B21[拖放法]
    B2 --> B22[超链接对话框法]
    A --> C[设置下载链接]
    C --> C1[选择链接元素并插入超链接]
    C --> C2[选择文档并浏览文件位置]
    C --> C3[添加详细信息]
    B --> D[保存文档并预览]
    C --> D
    D --> E[结束]

2. 图像映射

图像映射是一种在单个图像的不同区域应用链接的技术，可用于创建网站横幅广告、有趣的电子邮件签名、虚拟名片或更直观的导航系统。构建图像映射分为两个阶段：在 Draw 中创建作为项目基础的图像，然后使用 OO.o 的 ImageMap 编辑器创建映射本身。

2.1 创建图像

从一个宽 480 像素、高 300 像素的图像开始，根据公式换算，页面尺寸为 11.18cm x 6.99cm。将各边的边距减小到 0，因为此项目不需要边距。使用“格式” - “页面”可以更改背景颜色，添加渐变、阴影图案或位图。选择渐变后，关闭“自动增量”选项，并将中间颜色数量增加到 128，使渐变更平滑。

2.2 创建图像映射

在 Writer 中创建一个新的网页（选择“文件” - “新建” - “HTML 文档”）或打开之前创建的网页。点击文档中要放置横幅的位置，选择“插入” - “来自文件”，导航到之前创建的图像。放置图像后，选择“编辑” - “图像映射”，打开一个带有所选图像的小应用程序。界面主要由两个工具栏和一个工作区组成：
- 顶部工具栏 ：主要用于定义图像中可点击的热点，分为文件操作、热点创建、热点编辑、撤销/重做和链接属性五个部分。
- 底部工具栏 ：用于定义这些链接的行为。

2.3 添加热点和链接

添加热点和链接的步骤如下：
1. 添加矩形热点 ：选择工具栏第二部分的第二个按钮（矩形按钮），在图像中要成为链接的元素上绘制矩形。拖动时按住 Shift 键可强制形状为完美正方形。
2. 创建其他形状热点 ：使用其他形状按钮创建圆形（按住 Shift 键保持圆形比例）、多边形（围绕对象点击添加点并创建形状，双击闭合形状）和自由多边形（类似手绘形状工具）。
3. 编辑热点 ：创建形状后，可使用工具栏第一部分的箭头工具移动热点，使用“编辑”部分编辑点，编辑方式与 Draw 中的节点编辑工具类似，可用于创建复杂形状。
4. 添加链接 ：选择一个区域以启用链接定义部分。在“地址”部分，可以添加完整的 URL（如 dppl6++sss*iusa^oepa*_ki+snepan*dpih ）或本地文件地址。点击“地址”栏右侧的小箭头，会显示最近打开文件的列表供选择。“文本”栏用于定义用户鼠标悬停在链接上时显示的工具提示，这很重要，因为根据底层图像，通常可能没有文本信息，而且对于使用屏幕阅读器的视障访问者，它能提供额外信息。还可以设置“框架”选项，让链接在新页面或当前页面打开。链接可以指向同一网站内的页面、不同服务器上的页面或可下载文档。
5. 激活链接 ：定义链接后，点击工具栏最后一部分的第一个按钮（活动按钮）使链接生效。还可以点击最右侧的“属性”图标添加更多详细信息，如链接名称和描述。
6. 保存图像映射 ：为所有热点添加链接后，点击“保存”图标（磁盘）。此项目使用 StarView ImageMap ( oel) 格式（客户端格式），从“格式”下拉列表中选择该格式并点击“保存”，保存的文件可稍后编辑。
7. 应用图像映射 *：如果所有可用热点都定义了链接，“应用”按钮将可用。点击此按钮将映射应用到所选图像，然后使用标题栏上的“关闭”图标关闭窗口。虽然页面上的图像看起来不变，但查看代码视图（选择“视图” - “HTML 源代码”）会发现有很多代码用于定义热点和链接，圆形和多边形热点会有很长的数字字符串，因为需要用数字定义每条线上的每个点。

2.4 服务器端与客户端图像映射

图像映射有服务器端和客户端两种类型：
- 服务器端图像映射 ：依赖于网络空间提供商可能不允许访问的额外程序，且需要使用鼠标，对于不使用鼠标的用户，内容将无法访问。
- 客户端图像映射 ：将热点位置和点击时应执行的操作信息嵌入图像代码本身。定义热点和链接后，无需担心外部应用程序、服务器可用性或鼠标使用问题，因为可以使用 Tab 键导航链接，且更易于创建和管理。

2.5 操作总结

2.6 流程图

graph LR
    A[开始] --> B[创建图像]
    B --> B1[设置图像尺寸和边距]
    B --> B2[更改背景颜色和添加渐变]
    B --> C[创建图像映射]
    C --> C1[在 Writer 中插入图像]
    C --> C2[打开图像映射编辑器]
    C --> D[添加热点和链接]
    D --> D1[添加不同形状热点]
    D --> D2[编辑热点]
    D --> D3[添加链接]
    D --> D4[激活链接]
    D --> D5[保存图像映射]
    D --> D6[应用图像映射]
    D --> E[结束]

3. 输出网页

完成网页构建后，最后一项任务是使用 HTML 格式保存文件。如果使用本地文件，只需选择 HTML 作为文档类型即可。若使用远程图形链接，生成的 HTML 文件可直接上传到 Web 服务器并正常工作。但使用本地图形时，需要额外操作确保网站的每个元素都能正确上传到服务器。

3.1 前提条件

假设你有具有 FTP 访问权限的 Web 空间，并已在服务器上配置文件夹以匹配本地方案，即有一个名为 Dkia 的根文件夹，其中包含 ei]cao 和 ksjhk] o 两个文件夹。同时，你需要有有效的互联网连接以及通过 FTP 更新 Web 空间所需的所有详细信息。

3.2 使用 FTP 保存网页

OO.o 开发者将 FTP 功能集成到了应用程序中，要将网页（包括所有本地图形）保存到 Web 服务器，只需以正确格式提供相关信息。选择“文件” - “另存为”，在“文件名”空间中使用以下格式：
bpl6++qoanj]ia6l]ooskn <dkopj]ia+l]pd+pk+ej at*dpih

该格式的具体含义如下：
- bpl6++ ：定义用于传输文件的协议。
- qoanj]ia6l]ooskn ：用于访问网站的用户名和密码。若未提供这些详细信息，应用程序将使用匿名用户，并弹出密码请求对话框。
- <dkopj]ia ：服务器的 URL，可以是真实名称（如 sa^ol]_a._ki ）或点分十进制格式的 IP 地址（如 . - 0*--/*--*-10 ）。
- l]pd+pk+ej at*dpih` ：文件的路径和文件名。

3.3 后续操作

通过“另存为”操作打开连接后，在编辑文档时连接将保持打开状态，因此后续通过“文件” - “保存”或 Ctrl + S 进行的每次保存都会保存到服务器。只要之前选择了“将本地图形保存到互联网”选项，页面中嵌入的任何图像都会上传到 Web 空间，并且文档中访问图像的路径会自动更新。

若要重新打开文档，可以在“文件” - “打开”对话框中输入与上述相同格式的完整 URL，或者从最近打开文档的下拉列表中选择相应条目。

3.4 注意事项

需要注意的是，Web 空间的用户名和密码应保密。由于在打开远程文件时这些信息容易获取，OO.o 在这方面可能存在一定不足。

3.5 操作总结

3.6 流程图

graph LR
    A[开始] --> B[准备工作]
    B --> C[保存网页]
    C --> C1[选择“文件” - “另存为”]
    C --> C2[输入特定格式文件名]
    C --> D[后续保存]
    D --> D1[编辑文档]
    D --> D2[保存自动上传]
    C --> E[重新打开文档]
    E --> E1[输入完整 URL]
    E --> E2[从列表选择]
    E --> F[结束]
    D --> F

4. 网页向导

对于需要将一系列文档发布到互联网，但不关心页面设计的用户，OO.o 提供了网页向导功能。网页向导可以将一系列文件转换为可在任何 Web 浏览器中查看的格式，并创建一个目录，方便访问这些文件。

4.1 启动网页向导

选择“文件” - “向导” - “网页”即可启动网页向导。

4.2 操作步骤

1. 定义要添加的文档 ：任何 OO.o 可以读取的文档都可用。使用“添加”按钮添加文档后，点击“下一步”。
2. 选择目录布局 ：部分选项使用框架，以便在一个框架中选择文档并在另一个框架中查看。选择后点击“下一步”。
3. 优化浏览体验 ：“布局详细信息”屏幕允许针对特定屏幕尺寸优化浏览体验，并定义网站中每个文件要显示的信息类型。这些详细信息（如作者姓名）从文件的元数据中获取。
4. 定义内容页面样式 ：从下拉列表中选择一系列样式，并可使用每个选项旁边的按钮选择背景和图标集进行增强。
5. 输入网站信息 ：在“网站信息”部分输入网站或页面的基本信息，如描述、作者详细信息和版权信息。
6. 最终操作 ：在最后一个屏幕中，可以点击“预览”按钮在系统默认浏览器中查看最终网站的样子。还可以设置软件创建网站的本地副本（即存储在使用的机器上）、创建压缩 ZIP 存档，并使用提供的凭据将整个网站上传到 Web 服务器。

4.3 操作总结

4.4 流程图

graph LR
    A[开始] --> B[启动向导]
    B --> C[定义文档]
    C --> C1[添加文档]
    C --> C2[点击下一步]
    C --> D[选择布局]
    D --> D1[选择目录布局]
    D --> D2[点击下一步]
    D --> E[优化体验]
    E --> E1[针对屏幕尺寸优化]
    E --> E2[定义文件信息]
    E --> F[定义样式]
    F --> F1[选择内容页面样式]
    F --> F2[添加背景和图标集]
    F --> G[输入信息]
    G --> G1[输入网站基本信息]
    G --> H[最终操作]
    H --> H1[预览网站]
    H --> H2[设置创建本地副本等]
    H --> I[结束]

通过以上介绍的链接与书签设置、图像映射创建、网页输出以及网页向导使用等内容，你可以构建出功能丰富、布局合理的网页。希望这些技巧能帮助你在网页构建的道路上更加得心应手。