网页制作(二) 计算机文化基础 计算机与信息管理中心
计算机文化基础 计算机与信息管理中心 网页制作（二）
内容提要 C网页布局 》表格布局 》框架组织页面 C网页外观的统一方法 》主题、共享边框、导航栏 C发布网站 C网页特效制作 》动态GIF素材的制作 》 JavaScript语言 C计算机文化基础 httpllccf.tsinghua.edu.cn 2
计算机文化基础 http://ccf.tsinghua.edu.cn 2 内容提要 表格布局 框架组织页面 网页布局 网页外观的统一方法 主题、共享边框、导航栏 发布网站 网页特效制作 动态GIF素材的制作 JavaScript语言
网页的布局 表格和框架是网页布局的常用工具。 表格在网页制作中的作用已经超越了传统意乂上的存放数 据,表格已成为组织数据、排列网页元素空间位置最为灵 活的方法。 框架也是一种常用的网页布局方法,它将浏览器窗口划分 为功能独立的多个区域,每个框架显示一个网页内容,并 且通过框架中的超链接可以更改显示在另一个框架中的网 页文件 C计算机文化基础 httpllccf.tsinghua.edu.cn 3
计算机文化基础 http://ccf.tsinghua.edu.cn 3 网页的布局 表格和框架是网页布局的常用工具。 表格在网页制作中的作用已经超越了传统意义上的存放数 据，表格已成为组织数据、排列网页元素空间位置最为灵 活的方法。 框架也是一种常用的网页布局方法，它将浏览器窗口划分 为功能独立的多个区域，每个框架显示一个网页内容，并 且通过框架中的超链接可以更改显示在另一个框架中的网 页文件
表格的创建 C菜单命令“表格”/手绘表格” 先绘制出表格的轮廓,然后绘制表格的单 元格,由此可以创建一个不规则的表格。 插入表格 ①菜单命令“表格”/插入”/表格”数彐mF 布局 用指定表格属性的方式创建表格, 对齐方式④:默认 指定宽度 这些属性包括表格的行数和列数、 边框粗细) 像素 百分比) 表格宽度、对齐方式、边框粗细, 单元格边距① 单元格间距 以及单元格边距和间距。 样式 匚确定取消 C使用“插入表格”按钮 通过指定列数和行数来快速创建一个规则的空表。 3乘4表格 C计算机文化基础 httpllccf.tsinghua.edu.cn
计算机文化基础 http://ccf.tsinghua.edu.cn 4 表格的创建 菜单命令“表格”/“手绘表格” 使用“插入表格”按钮 菜单命令“表格”/“插入”/“表格” 先绘制出表格的轮廓，然后绘制表格的单 元格, 由此可以创建一个不规则的表格。 用指定表格属性的方式创建表格， 这些属性包括表格的行数和列数、 表格宽度、对齐方式、边框粗细， 以及单元格边距和间距。 通过指定列数和行数来快速创建一个规则的空表
表格的编辑 单元格的合并与拆分 设置表格属性 创建不规则的表格 表格在网页中的编排方式 布局 对齐方式):郾认口-指定宽度) C像索〖 认 G百分比) 单元格边距 彐厂指定高度G 设置单元袼属性 单元格间距①) 框 C百分比C 单元格内文本的编排方式 粗细〖 彐亮边框) 自动 暗边框):「■自动 单元格属性一览表 水平左对齐水平右对齐「水平中间对齐 颜色) 垂直靠上 使用背景图片Qp 垂直居中 相对底边对齐 样式6,」确定取消应用)」 跨距为两列一行 C计算机文化基础 httpllccf.tsinghua.edu.cn 5
计算机文化基础 http://ccf.tsinghua.edu.cn 5 表格的编辑 单元格的合并与拆分 设置单元格属性 设置表格属性 表格在网页中的编排方式 单元格内文本的编排方式 创建不规则的表格
表格布局 要用表格来布局网页,首先应决定表格在水平方向和垂直 方向上所需的单元格数量,然后为需要跨越多行或多列的 对象合并单元格。 大多数网页布局采用了带有不可见边框的表格。 显示器的结构主要 由电子枪、荧光屏 遮罩和荧光屏三部 分构成。 你喜欢 硬盘 软盘 可写光盘 那 3寸软盘5寸软盘 款 C计算机文化基础 httpllccf.tsinghua.edu.cn 6
计算机文化基础 http://ccf.tsinghua.edu.cn 6 表格布局 要用表格来布局网页，首先应决定表格在水平方向和垂直 方向上所需的单元格数量，然后为需要跨越多行或多列的 对象合并单元格。 大多数网页布局采用了带有不可见边框的表格
框架布局 框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集 定义每个框架的大小、位置、名称和初始网页,普通网页提供每个框架的 内容。一个框架的超链接可以更改显示在另一个框架中的网页。 框架集是一种特殊的网页,该网页定义了整体的框架布局,但不提供实 际内容。 艰难的 框架集 从ENAC 第一代计算机 框架名称初始网页 亡代社算机 二代让算机 rtop com-t. html 用电子管作为 体积大、能耗高、速废慢、客量小、价格昂 三代计算机 基本物理器件 贵,应用限于科学计算和军事 ma口 第四代计篁机 bottom comm. html 史上第一台全自动的电子数字计算机是1943年英国人制成的 画国画黑 Left coml. htm 的ARK一是世界上第一台通用程序控制计 1944年直告完工并在哈佛投 5899ooooox lmaRk 一白过算机AR=互在算机发展 空们有着重 C计算机文化基础 httpllccf.tsinghua.edu.cn 7
计算机文化基础 http://ccf.tsinghua.edu.cn 7 框架布局 框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集 定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的 内容。一个框架的超链接可以更改显示在另一个框架中的网页。 框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实 际内容。 框架名称 初始网页 rtop com-t.html rbottom com-m.html Left com-1.htm 框架集
框架的创建和保存 C框架组成 边框、滚动条、网页 B直分 C新建框架网页 “文件”/“新建”/“网 页”,选择“框架网页” 标签 在框架中加入网页 属存住囊□如 如国c四·工风4 1)建立新网页 的 □文说课考试 2)指定已经存在的网页 保存框架页 FIGEN B Facs t “文件”/另存为” M保①F了 C计算机文化基础 httpllccf.tsinghua.edu.cn 8
计算机文化基础 http://ccf.tsinghua.edu.cn 8 框架的创建和保存 新建框架网页 框架组成 在框架中加入网页 边框、滚动条、网页 1）建立新网页 2）指定已经存在的网页 保存框架页 “文件” /“另存为” “文件”/“新建”/“网 页” ，选择“框架网页” 标签
框架属性设置 框架/框架属性 框架属性 ?区 网页名称边距 名称Q 初始网页): index-1htm 浏览 初始网页·滚动条 框架大小 宽度 49彐「像家 框架大小·框架的可调整性高 边距 间距 宽度〔 相对大小:1和4 高度G I彐 选项 20 卩可在浏览器中调整大小B) 框架网页吧) 显示滚动条):从 样式,」 确定 取消 30%70%80% 相对大小:3和7 C计算机文化基础 httpllccf.tsinghua.edu.cn 9
计算机文化基础 http://ccf.tsinghua.edu.cn 9 框架属性设置 框架/框架属性 •网页名称 •初始网页 •框架大小 •边距 •滚动条 •框架的可调整性 •间距 30% 70% 80% 20% 相对大小：1和4 相对大小：3和7
框架之间的超链接 在框架网页中,单击某框架内网页上的超链接时,被超链接所 指定的网页通常在另一个框架中打开,这个框架称为目标框架。 插入超链接 创建链接 当前框架网页①) 公用的目标区C) 留值 名称 unsaved: ///new_pag..Kew Page 1 Hew Page 2 目标设置①) UrLoD:http:// 回团 厂设置为网项的默认值① 书签0):「G无 目标框架①:网默认值 确定]「取消参①)」「样式⑤,」 匚确定取消 C计算机文化基础 httpllccf.tsinghua.edu.cn 10
计算机文化基础 http://ccf.tsinghua.edu.cn 10 框架之间的超链接 在框架网页中，单击某框架内网页上的超链接时，被超链接所 指定的网页通常在另一个框架中打开，这个框架称为目标框架。 插入/超链接