网站制作与教学应用

网站制作与教学应用现代教育技术中心 高小惠

2013-7-29

教学网站概述

教学网站分为两大类： 1.网络教学(网络学院、网络选修课)教学一般是建立在教 学平台上 2.辅助教学(课程内容的复习和知识的扩展) 教学网站的功能: 要使学习者通过学习和运用教学网站上的模块，替代部分教 学活动 教学网站模块主要包含： 学习内容、内容讲解(多媒体)、学习导航、案例分析、学习 反馈、思考活动、布置作业、学习建议、学习进度管理(网 络教学辅助平台或编辑动态网页)2013-7-29

教学网站概述

网页制作一般采用 Dreamweaver 和 Frontpage 软件 软件 Frontpage 版本说明 Frontpage 2000 版本是全国计算机考试所确定的版本。

学校服务器：ftp://202.116.161.194 ( 账号、密码均为train)培训软件文件夹 中有 Microsoft Office2000 安装软件。下载后在本机安装时只选择安装 frontpage即可。参考网站：

http://202.116.160.98:8000/course/FrontPage2000/fp2k0101.htm

2013-7-29

Frontpage 2000 概述●FrontPage 2000的启动与退出

FrontPage 2000的启动与退出的方法与其它的Windows应用程序相同。 (1)启动操作 (2)退出操作 ● FrontPage 2000的用户界面

FrontPage 2000的主窗口界面由：标题栏、菜单栏、工具栏、视图栏、编辑器、状态栏组成。

2013-7-29

Frontpage 2000 概述FrontPage 2000支持6种不同的视图，它们分别是：l网页视图：可以用不同的方式编辑网页或浏览网页。 l文件夹视图：可以按照文件夹的形式查看站点中的文件组成情况。 l报表视图：该视图下显示的是当前站点的统计数据。其内容涉及到所有的文件、 图片、未链接与已链接的文件等的数量、大小及简要说明。 l超链接视图：超链接是Web站点中最重要的部分，在网页中通常少不了超链接。 l 任务视图：这是FrontPage 2000为制作复杂网站提供的一种有力工具，通过它，

设计人员可以根据工作安排制定详细的任务列表。

2013-7-29

网页制作

创建网站的一般过程由以下几个步骤构成：(1) 需求分析 (2) 规划网站 (3) 收集内容 (4) (5) (6) (7) (8)

设计阶段

建立Web站点 制作网页 根据网站的建设规划，制作网站的主页面及其它页面 测试网站及网页 发布网站 维护与更新

从设计阶段来说，最为重要的就是做好网站的规划、收集建立网站需要的 资料及制作网页。

2013-7-29

网页制作

规划网站(1)确定站点结构根据Web站点的需要，明确建立站点的目标，确定站点 的组成部分及各页面间的层次关系，除此之外，制作网 页所需要的各类型的素材应建立相应的素材文件夹以统 一管理。 (2)创建Web站点

规划好站点后，需要在FrontPage 2000中制作

出相应的 网站结构

2013-7-29

① 层状结构 层状结构(如图1.8所示)类似于目录系统的树体结构，由网站 文件的主页开始，依次划分为一级标题、二级标题等等，逐级细 化，直至提供给浏览者具体信息。主页

页面1

页面2

页面3

一级标题

页面4

页面5

页面6

页面7

二级标题

图1.8 层状结构2013-7-29

② 线性结构 线性结构(如图1.9所示)类似于数据结构中的线性表，用于 组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地 浏览整个网站文件。这种结构一般都用在意义是平行的页面上。 通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样 可以充分利用两种结构各自的特点，使网站文件既具有条理 性、规范性，又可同时满足设计者和浏览者的要求。

主 页

页 面 1

页 面 2

页 面 3

图1.9 线性结构2013-7-29

③ Web结构 Web结构(如图1.10所示)类似于Internet的组成结构，各网 页 之间形成网状连接，允许用户随意浏览。主页

页面1

页面2

页面3

一级标题

页面4

页面5

页面6

页面7

页面8

二级标题

图1.10 Web结构2013-7-29

网页制作制作网页规划好网站的结构后，即将开始网站的内的网页制作。 网页是站点中最基本的文档，它是用HTML语言编写的。 由于FrontPage具有所见即所得的特性，并能自动创建 HTML 代 码 ， 所 以 在 不 很 了 解 HTML 语 言 的 情 况 下 ， 用 FrontPage创建出多种格式的网页。 1)创建网页 2)保存网页 新的网页建立后，要以HTML的格式进行保存，直接选 择文件菜单下的“保存”选项，即可弹出“另存为”对 话框，与其它Office系列软件一样，我们可以在此处选 择文件保存的位置，并对文件进行命名。2013-7-29

网页制作网页中的表格在所有的网页制作软件中，表格的作用不仅是可以直观地描述数据，

还可利用表格来划分网页的页面布局。1)表格的插入与编辑 在FrontPage 2000里，表格的操作与Word类似。

2)利用表格进行布局在FrontPage 2000里，表格可以用来进行页面布局。所谓页面布局， 就是利用表格来确定文本、图片等网页元素的位置，作为表布局用

的表格，其边框一般是不显示出来的，否则会影响页面的美观。

2013-7-29

以一个常见的网页结构为例介绍表格布局，此页面由顶部的 Logo和Banner区，导航菜单区，页面内容区，底部版权区组 成。如下图：

2013-7-29

嵌套表格。为了满足页面的需要，常常需要进行表格嵌套，进行表格嵌套只需 …… 此处隐藏：1114字，全部文档内容请下载后查看。喜欢就下载吧 ……