计算机文化基础计算机文化基础计算机与信息管理中心计算机与信息管理中心网页制作（二）网页制作（二） 计算机文化基础计算机文化基础 2 内容提要内容提要8表格布局表格布局8框架组织页面框架组织页面网页布局网页布局网页外观的统一方法网页外观的统一方法8 主题、共享边框、导航栏主题、共享边框、导航栏发布网站发布网站网页特效制作网页特效制作8动态动态GIFGIF素材的制作素材的制作8JavaScriptJavaScript语言语言 计算机文化基础计算机文化基础 3 网页的布局网页的布局表格和框架是网页布局的常用工具表格和框架是网页布局的常用工具表格在网页制作中的作用已经超越了传统意义上的存放数表格在网页制作中的作用已经超越了传统意义上的存放数据，表格已成为组织数据、排列网页元素空间位置最为灵据，表格已成为组织数据、排列网页元素空间位置最为灵活的方法活的方法框架也是一种常用的网页布局方法，它将浏览器窗口划分框架也是一种常用的网页布局方法，它将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页内容，并为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一个框架中的网且通过框架中的超链接可以更改显示在另一个框架中的网页文件。
页文件 计算机文化基础计算机文化基础 4 表格的创建表格的创建菜单命令菜单命令菜单命令菜单命令““““表格表格表格表格”/“”/“”/“”/“手绘表格手绘表格手绘表格手绘表格””””使用使用使用使用““““插入表格插入表格插入表格插入表格””””按钮按钮按钮按钮菜单命令菜单命令菜单命令菜单命令““““表格表格表格表格”/“”/“”/“”/“插入插入插入插入”/“”/“”/“”/“表表表表格格格格””””先绘制出表格的轮廓，然后绘制表格的单先绘制出表格的轮廓，然后绘制表格的单元格元格, 由此可以创建一个不规则的表格由此可以创建一个不规则的表格用指定表格属性的方式创建表格，用指定表格属性的方式创建表格，这些属性包括表格的行数和列数、这些属性包括表格的行数和列数、表格宽度、对齐方式、边框粗细，表格宽度、对齐方式、边框粗细，以及单元格边距和间距以及单元格边距和间距通过指定列数和行数来快速创建一个规则的空表通过指定列数和行数来快速创建一个规则的空表 计算机文化基础计算机文化基础 5 表格的编辑表格的编辑单元格的合并与拆分单元格的合并与拆分单元格的合并与拆分单元格的合并与拆分 设置单元格属性设置单元格属性设置单元格属性设置单元格属性设置表格属性设置表格属性设置表格属性设置表格属性表格在网页中的编排方式表格在网页中的编排方式单元格内文本的编排方式单元格内文本的编排方式创建不规则的表格创建不规则的表格 计算机文化基础计算机文化基础 6 表格布局表格布局要用表格来布局网页要用表格来布局网页，，首先应决定表格在水平方向和垂直首先应决定表格在水平方向和垂直方向上所需的单元格数量，然后为需要跨越多行或多列的方向上所需的单元格数量，然后为需要跨越多行或多列的对象合并单元格。
对象合并单元格大多数网页布局采用了带有不可见边框的表格大多数网页布局采用了带有不可见边框的表格 计算机文化基础计算机文化基础 7 框架布局框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法框架集框架集框架集框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容一个框架的超链接可以更改显示在另一个框架中的网页一个框架的超链接可以更改显示在另一个框架中的网页框架集框架集框架集框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容框架名称框架名称框架名称框架名称 初始网页初始网页初始网页初始网页rtoprtoprtoprtop com-t.htmlcom-t.htmlcom-t.htmlcom-t.htmlrbottom rbottom rbottom rbottom com-m.htmlcom-m.htmlcom-m.htmlcom-m.htmlLeft Left Left Left com----1.htmhtmhtmhtm框架集框架集框架集框架集 计算机文化基础计算机文化基础 8 框架的创建和保存框架的创建和保存新建框架网页新建框架网页新建框架网页新建框架网页框架组成框架组成框架组成框架组成在框架中加入网页在框架中加入网页在框架中加入网页在框架中加入网页 边框、滚动条、网页边框、滚动条、网页1）建立新网页）建立新网页2）指定已经存在的网页）指定已经存在的网页保存框架页保存框架页保存框架页保存框架页“文件文件” /“另存另存为为”“文件文件” /“新建新建” /“网页网页” ，选择，选择“框架网框架网页页”标签标签 计算机文化基础计算机文化基础 9 框架属性设置框架属性设置框架框架框架框架/ / / /框架属性框架属性框架属性框架属性•网页名称网页名称•初始网页初始网页•框架大小框架大小•边距边距•滚动条滚动条•框架的可调整性框架的可调整性•间距间距30%70%80%20%相对大小：相对大小：1 1和和4 4相对大小：相对大小：3 3和和7 7 计算机文化基础计算机文化基础 10 框架之间的超链接框架之间的超链接在框架网页中，单击某框架内网页上的超链接时，被超链接所在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架。
指定的网页通常在另一个框架中打开，这个框架称为目标框架插入插入插入插入/ /超链接超链接超链接超链接 计算机文化基础计算机文化基础 11 给予网页一致性外观给予网页一致性外观主题主题主题主题共享边框共享边框共享边框共享边框导航栏导航栏导航栏导航栏 计算机文化基础计算机文化基础 12 主题主题主题主题主题主题是一组可应用在网页上的设计元素和颜色方案，其中包括字体、是一组可应用在网页上的设计元素和颜色方案，其中包括字体、图形、背景、导航栏、水平线和其他网页元素图形、背景、导航栏、水平线和其他网页元素主题赋予网页一致和引人注目的外观使用主题是快速、容易地加主题赋予网页一致和引人注目的外观使用主题是快速、容易地加入精采的网页内容和赋予网页专业外观的方法入精采的网页内容和赋予网页专业外观的方法FrontPage FrontPage 包含很包含很多可以立即使用的主题，也可以修改这些主题以满足个体的需求多可以立即使用的主题，也可以修改这些主题以满足个体的需求 “格式格式格式格式” /“” /“主题主题主题主题” ”ü加入主题加入主题ü实现主题实现主题ü修改主题修改主题 计算机文化基础计算机文化基础 13 共享边框共享边框共享边框是站点上一个或多个网页共享的区域。
共享边框是站点上一个或多个网页共享的区域共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类似于网页页脚）、左边或右边的区域似于网页页脚）、左边或右边的区域格式格式” /“共享边框共享边框” 计算机文化基础计算机文化基础 14 导航栏导航栏导航栏导航栏导航栏导航栏是一组文本或按是一组文本或按钮超链接，通过它们浏钮超链接，通过它们浏览者可以到达站点中的览者可以到达站点中的某一个网页某一个网页典型的导航栏具有指向典型的导航栏具有指向站点主页和主要上层网站点主页和主要上层网页的按钮当我们在网页的按钮当我们在网页中添加一个导航栏时，页中添加一个导航栏时，FrontPage 将根据导航将根据导航视图下设置的导航结构视图下设置的导航结构自动生成导航超链接自动生成导航超链接 计算机文化基础计算机文化基础 15 创建和使用表单创建和使用表单表单能够向网页中添加文本框、表单能够向网页中添加文本框、单选按钮、复选框、按钮等用单选按钮、复选框、按钮等用户界面控件户界面控件每个网页可以包含一个或多个表每个网页可以包含一个或多个表单，每个表单占据网页中的一个单，每个表单占据网页中的一个特定区域。
特定区域表单中必须有一个元素作为表单中必须有一个元素作为““提交提交””按钮单击单击““提交提交””按钮后，浏览器将数据传送给服务器，站点服务器按钮后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理程序可能将数据保存在需要某种程序读取这些数据并进行处理程序可能将数据保存在文件或数据库中，也可能作为电子邮件发出等等文件或数据库中，也可能作为电子邮件发出等等 计算机文化基础计算机文化基础 16 使用网页层次组件使用网页层次组件组件是组件是FrontPageFrontPage提供的智能对象，制作人员使用它们来增提供的智能对象，制作人员使用它们来增加站点的功能加站点的功能大部分组件需要将网页保存到大部分组件需要将网页保存到FrontPageFrontPage站点才会生效，或站点才会生效，或者需要站点服务器运行特殊的软件者需要站点服务器运行特殊的软件横幅广告管理器横幅广告管理器横幅广告管理器横幅广告管理器: : : :自动产生动画效果自动产生动画效果, ,类似街道上类似街道上 的广告牌的广告牌滚动字幕滚动字幕滚动字幕滚动字幕: : : :在一个方框中在一个方框中, ,里面的文字不停地沿一个里面的文字不停地沿一个 方向滚动或来回滚动方向滚动或来回滚动悬停按钮：悬停按钮：悬停按钮：悬停按钮：一种可以变化的按钮一种可以变化的按钮网站计数器：网站计数器：网站计数器：网站计数器：显示站点被访问的次数显示站点被访问的次数 计算机文化基础计算机文化基础 17 发布站点发布站点准备工作：在浏览器上进行预览，在报表视图下，检准备工作：在浏览器上进行预览，在报表视图下，检查所有文件的状态，选择要发布的文件。
查所有文件的状态，选择要发布的文件发布站点：使用菜单命令发布站点：使用菜单命令““文件文件” / “” / “发布站点发布站点”” http://http://http://http://ccfccfccfccf.tsinghua..tsinghua..tsinghua..tsinghua.eduedueduedu. . . .cncncncn/student/00class/student/00class/student/00class/student/00classftp://ftp://ftp://ftp://ccfccfccfccf.tsinghua..tsinghua..tsinghua..tsinghua.eduedueduedu. . . .cncncncn/student/00class/student/00class/student/00class/student/00class 计算机文化基础计算机文化基础 18 免费网页存放空间免费网页存放空间广州网易：广州网易：东方网景东方网景: : 网虫之家网虫之家: : 首都首都: : 中国人中国人: : 国内外有一些公司提供一种免费服务，在他们国内外有一些公司提供一种免费服务，在他们的服务器上提供一定的硬盘空间，存放网页。
的服务器上提供一定的硬盘空间，存放网页 计算机文化基础计算机文化基础 19 动态动态gifgif图片制作图片制作动画的形成是由连续显示数张图片所造的视觉效果，其原理动画的形成是由连续显示数张图片所造的视觉效果，其原理与卡通影片是一样的，我们可以设定每张图片所停滞时间，与卡通影片是一样的，我们可以设定每张图片所停滞时间，从而造成不同的动画显示速度从而造成不同的动画显示速度当要制作一张动画时，可使用有支持当要制作一张动画时，可使用有支持GIFGIF格式的绘图软件来格式的绘图软件来制作图像制作图像( (或扫描进来的影像或扫描进来的影像) )，将这些构成动画的连续数张，将这些构成动画的连续数张图像分别储存成不同档名的图像分别储存成不同档名的GIFGIF档，然後再使用动画制作软档，然後再使用动画制作软件，如件，如GIF Construction SetGIF Construction Set或或UleadUlead GIF Animator GIF Animator动画制动画制作软件来整合这些图像，针对每张图像设定相关的属性作软件来整合这些图像，针对每张图像设定相关的属性( (如如显示的停滞时间显示的停滞时间) )，以完成一幅动画的制作，且在这些软件，以完成一幅动画的制作，且在这些软件中就可以直接观看动画的显示，中就可以直接观看动画的显示， 计算机文化基础计算机文化基础 20 动态动态gifgif图片制作图片制作1 1））））使使使使用用用用向向向向导导导导快快快快速速速速制制制制作作作作动动动动画画画画：：在在启启动动uleadulead gifanimatorgifanimator 程程序序时时，，会会显显示示一一个个启启动动向向导导来来引引导导我我们们创创建建动动画画。
在在制制作作GIF动动画画前前要要找找素素材材，，同同时时也也可可以以自自己己设设计计素素材材我我们们可可以以通通过过一一些些图图像像处处理理功功能能软软件件来来对对动动画画的的每每一一帧帧进进行行细细致致的的刻刻画画，，例例如如Photoshop、、Firkworks和和Freehand等等，，然然后后通通过过ulead GIF Animator中中的的动动画画向向导导功功能能就就可可以以制制作作出出专专业级的动画业级的动画2 2）快速制作横幅）快速制作横幅）快速制作横幅）快速制作横幅：： 先创建一个空白的动画文档，然后在图先创建一个空白的动画文档，然后在图层菜单中选择添加横幅文字，在子菜单中可以选层菜单中选择添加横幅文字，在子菜单中可以选择五种横幅效果：简易、霓虹、渐变、边框、择五种横幅效果：简易、霓虹、渐变、边框、自定义动画自定义动画 计算机文化基础计算机文化基础 21 网页特效制作网页特效制作许多主页的特殊效果都是用许多主页的特殊效果都是用JavascriptJavascript来装点的不懂点编来装点的不懂点编程知识人要想使用这些特效就有些困难了，因此国内共享软程知识人要想使用这些特效就有些困难了，因此国内共享软件作者便写了许多便于使用的件作者便写了许多便于使用的Javascript模式程序，呼吸小模式程序，呼吸小秘书就属于这类软件。
秘书就属于这类软件呼吸小秘书包含了窗口、鼠标、文字、菜单、其他等五类共呼吸小秘书包含了窗口、鼠标、文字、菜单、其他等五类共27种特效为了便于用户的使用您既为了便于用户的使用您既可以先对已生成的代码进可以先对已生成的代码进行效果预览，也可以直接行效果预览，也可以直接修改代码修改完成后复修改代码修改完成后复制到剪切板上，就可以插制到剪切板上，就可以插入到目标页面中了入到目标页面中了 计算机文化基础计算机文化基础 22网网页页特特效效制制作作 / / /javascriptjavascriptjavascriptjavascript/index./index./index./index.htmhtmhtmhtm 计算机文化基础计算机文化基础 23 参考资料参考资料参考教材网站资源8教材第9章8上机指导手册第7、8、9章8第八次大课电子讲稿（网页制作）8基本操作演示课件8常见问题列表（ FAQ分类）8优秀作业赏析（样例素材） 。