轻 松 的Web 设 计


Internet小窍门

---- 现 在， 有 神 奇 的Web 设 计 工 具 在 手， 建 立 网 页 不 再 是 什 么 高 深 的 学 问。 了 解 一 些HTML 的 基 本 知 识 以 及 如 何 摆 弄HTML 代 码 也 许 对 您 会 有 所 帮 助。

建 立 简 单 的 页 面 格 式

---- 只 用 花 上 几 分 钟， 您 就 可 以 创 建 一 个 简 单 的 主 页。 在 此 部 分 结 束 时， 您 将 可 以 把 自 己 的 网 页 发 布 到Web 服 务 器， 这 样 别 人 就 可 以 浏 览 了。 如 果 您 还 没 有Web 服 务 器， 可 以 与Internet 服 务 商 联 系， 租 用 他 们 的 服 务 器 或 硬 盘 空 间。

---- 您 可 定 义 一 个 文 件index.html， 并 且 输 入 以 下 简 单 内 容： 

     < HTML >
      < HEAD >
      < TITLE >Bob and jeannes's House of Insurance< /TITLE >
      < /HEAD >
      < BODY >
      < H1 >Your Title Text for the Page Here< /H1 >
      < P >< B >Sample text goes here< /B >< /P >
      < /BODY >
      < /HTML >
---- 注 意， 如 果 您 使 用Word 5.0 或6.0， 别 忘 了 将 其 存 为 文 本； 如 果 您 使 用Word 97， 就 可 以 直 接 将 文 档 存 为HTML 文 件。

---- 在Word 中 打 开 一 个HTML 文 件 时， 文 件 是 作 为 网 页 显 示 的， 而 不 是 显 示 其 文 本 方 式 下 的 代 码。 要 查 看 并 修 改 文 本 代 码， 您 必 须 用 文 本 编 辑 器 打 开HTML 文 件。

---- 一 旦 文 件 存 入 磁 盘， 就 可 以 在 浏 览 器 中 浏 览 它。 只 需 在 地 址 栏 中 简 单 地 敲 入 该 文 件 的 名 称 及 路 径 即 可。

---- 您 可 能 已 发 现 网 页 中 用 了 加 粗 的 字 体， 如 果 要 将 其 改 为 斜 体， 您 可 以 将 上 面 的< B> 和< /B> 分 别 替 换 成< I> 和< /I>。 其 他 标 号 可 参 见“HTML 入 门 基 础”， 每 个 单 元 都 在 用 尖 括 号 括 起 来， 而 且， 结 尾 的 单 元 还 带 有 斜 杠“/”。

---- 不 论 标 号 用 大 写 还 是 小 写 字 母， 其 结 果 是 相 同， 但 是 必 须 前 后 一 致。

---- 如 果 您 在Internet 上 看 到 非 常“ 酷” 的 网 页 布 局， 可 以 将 其HTML 代 码 拷 贝 下 来， 这 是 完 全 合 法 的。 要 拷 贝 其 代 码， 可 在 浏 览 器 中 选 择“View”*“Page Source”（ 在Navigator 中） 或“View”*“Source”（ 在Internet Explorer 中）。

插 入 图 片

---- 如 果 没 有 扫 描 仪， 您 可 以 从 网 上 抓 取 现 成 的 图 片。 在 浏 览 器 中， 右 击 中 意 的 图 片， 选 择“Save Image As”（ 在Navigator 中） 或“Save Picture As”（ 在Internet Explorer 中）， 将 该 文 件 以bio.gif 保 存。 别 忘 了 图 片 是 有 版 权 的， 未 经 授 权 的 图 片 不 能 随 便 复 制。

---- 打 开index.html， 将 其 以bio.html 存 盘， 从 而 创 建 一 个 新 的HTML 文 件。 将 倒 数 第 三 行 改 为：

---- < P > Thanks for checking our biograhics< /P >
---- < IMG SRC=“bio.gif” ALIGN ＝“LEFT” WIDTH ＝“180” HEIGHT ＝“225” ALT ＝“ 示 例 图 片” >

---- 此 图 片 是 向 左 对 齐， 其 他 的 对 齐 方 式 有“RIGHT”、“BOTTOM”、 “TOP” 和“CENTER”。 设 置 图 片 的 高 度 和 宽 度 是 让 浏 览 器 为 图 片 留 出 适 当 的 空 间。

增 加 链 接

---- 下 面 我 们 给 网 页 加 入 超 链 接。 打 开index.html， 将 倒 数 第 三 行 改 为：

---- < P >We're certain that you'll want read our < A HREF=“bio.html” >biographics。< /A >< /P >

---- < P >Need More insurance info ？Just < A HREF=“mailto:emailaddress@goes_here.com” >e-mail< /A >us.< /P >

---- 这 样 用 户 可 以 在index.html 的 页 面 上 通 过 单 击 词 组“biographics” 跳 到bio.html 页 面， 当 然 还 可 以 在index.html 页 面 中 点 击“e-mail” 来 发 电 子 邮 件。

创 建 表 格

---- 表 格 是 以 单 元 的 形 式 显 示 信 息， 它 也 支 持 在 网 页 上 对 文 本 与 图 片 的 精 确 定 位。 您 可 以 按 如 下 的 模 式 在 网 页 中 将 文 本 与 图 片 组 织 到 一 起。

---- 创 建 一 个 新 的HTML 文 件bob.html， 并 添 入 下 列 文 本： 

	< HTML >
	< HEAD >
	< TITLE >Info You've Just Got to Know About Bob< /TITLE >
	< /HEAD >
	< BODY >
	< H1 >Very Important Bob Info< /H1 >
	< TABLE BORDER=“0”  CELLSPACING ＝“10”
         CELLPADDING=“10” >
    < TR >
      < IMG SRC=“bio.gif” ALIGN=“LEFT”
       WIDTH=“180” HEIGHT=“225”
       ALT=“Bob and Jeane Image：24K” >
          < /TD >
      < TD >Bob was born in 1969.He and his wife Janne have 
             been married for 5 years.< /TD >
    	< /TR >
      < /TABLE >
      < /BODY >
      < /HTML >
---- “BORDER” 属 性 指 边 框 线 宽 所 占 用 的 像 素 个 数；“CELLSPACING” 属 性 是 指 一 个 单 元 与 相 邻 另 一 个 单 元 的 距 离（ 以 像 素 个 数 计）；“CELLPADDING” 属 性 是 指 单 元 的 边 框 与 单 元 中 的 内 容 的 距 离（ 以 像 素 个 数 计）。

创 建 可 点 击 图 片 或 图 片 地 图

---- 创 建 可 点 击 图 片 的 最 简 单 办 法 是 使 用 共 享 工 具 软 件， 如MapEdit。 您 只 需 打 开 一 个 图 像 文 件， 将 图 片 分 成 若 干 区 域， 给 每 个 区 域 加 上 一 个URL 即 可。 当 用 户 点 击 某 个 区 域 时， 浏 览 器 就 打 开 相 应 的URL。 下 面 是 具 体 实 现 方 法。
  1. 启 动MapEdit， 弹 出“Open/Create Map” 对 话 框。 单 击“Browse”， 在 弹 出 的“File of type” 菜 单 上 选 择“HTML Pages”， 找 到 文 件bio.html 并 单 击“Open” 按 钮。
  2. 程 序 将 询 问 把 哪 张 图 片 制 成 图 片 地 图。 选 择“Images/bio.gif”， 并 单 击“OK”， 在“Open/Create Map” 对 话 框 中 再 次 单 击“OK”。
  3. 单 击 绿 色 的 长 方 形 选 择 工 具， 选 择Bob 的 脸 部， 使 其 可 点 击。
  4. 程 序 将 询 问 把 哪 个URL 与 该 区 域 联 系 起 来， 可 以 选 择bob.html， 然 后 单 击“OK”。
  5. 单 击MapEdit 窗 口 右 上 角 的 关 闭 按 钮， 当 程 序 访 问 是 否 想 保 存 修 改 时， 选 择“Yes”。
---- 这 样， 您 的 网 页 上 有 了 一 个 可 点 击 的 图 片。 当 您 点 击Bob 的 脸 部（ 热 点 区 域） 时， 浏 览 器 会 打 开bob.html。

插 入JavaScript

---- JavaScript applet 是 插 在HTML 文 件 源 代 码 中 的 小 程 序， 用 来 扩 充HTML 的 功 能。 下 面 的 简 单 例 子 可 以 提 供 当 前 日 期 和 时 间， 您 只 需 在index.html 中 的< /HEAD > 之 后 插 入 如 下 内 容： 
< SCRIPT  LANGUAGE=
"Javascript" >
   //Array of day names var dayNames=new Array("Sunday","Monday",
"Tuesday","Wednesday",
"Thursday","Friday",
"Saturday");
   //Array of month Names var monthNames=new Array
     ("January","February","
March","April","May","June",
"July","August","September","October","November","December");
      var now =new Date();document.write(dayNames[now.getDay()]
+","+monthNames[now.getMonth()]+""+now.getDate()+",19"+
now.getYear());
       < /SCRIPT >
---- 注 意： 如 果 网 页 中 使 用 了 许 多 动 画、Java 或JavaScript， 那 么 网 页 的 传 输 时 间 会 变 得 较 长。

把 网 页 发 布 到Web 服 务 器 上

---- 最 简 单 的 发 布 网 页 的 办 法 是 用 软 件， 如WS_FTP。 下 面 是 使 用WS_FTP 发 布 网 页 的 基 本 过 程。
  1. 单 击“Connect”， 然 后 单 击“New”。
  2. 在“Profile Name” 中 输 入 文 件 名。
  3. 在“Host Name” 框 中， 输 入 服 务 器 的 名 称， 如：“ftp.yourserver.com”。
  4. 在“User ID” 和“Password” 中 分 别 输 入 用 户 名 和 密 码。
  5. 单 击“OK”， 联 接 服 务 器。
  6. 在 随 后 出 现 的 窗 口 右 边， 浏 览 您 将 要 放 置 文 件 的 目 录。 在 左 边 的 窗 口 中， 找 到 本 地 盘 上 的 目 录 和 文 件。
  7. 单 击 中 部 指 向 右 方 箭 头 的 按 钮， 传 送 所 有 选 择 的 文 件。 完 毕 之 后， 关 闭WS_FTP， 并 打 开 浏 览 器。
  8. 输 入Web 站 点 的URL， 该URL 应 该 由 您 的Internet 服 务 商 提 供。

中国计算机世界出版服务公司版权所有