《FrontPage2003网页设计与制作》教学大纲[精选合集]

第一篇：《FrontPage2003网页设计与制作》教学大纲

计算机系教学大纲

FrontPage2003网页设计与制作

《FrontPage2003网页设计与制作》教学大纲

课程代码：

课程名称：FrontPage2003网页设计与制作 授课对象：专科音乐、体育、美术、蒙文专业 课程性质：本课程是专科音乐、体育、美术、蒙文专业的一门计算机基础课，是为专科音乐、体育、美术、蒙文专业学生开设的一门必修课。本课程先修课为《计算机应用基础》。本课程总学分数：2 教学目的：随着计算机软件技术的不断发展，制作用于传递信息的网页已经不再是专业制作人员的专利。如今，人们无需熟悉太多的HTML语言，使用所见即所得的方式就可以轻松自如地创建网页。本课程教学的主要目的和任务是使学生通过本课程的学习，能够掌握FrontPage2003网页设计与制作的基础知识，了解FrontPage2003网页制作方法，能够运用FrontPage2003设计与制作网页。

课程的教学原则和教学方法：

本课程是一门实践性很强的课程，要求教师运用多媒体教学手段在多媒体教室进行教学，对软件的使用进行现场操作讲解，以便使学生及时掌握所学的内容。

教师可以针对不同的教学内容采用课堂教学、课堂实践等多种方式组织教学。课程总学时：总学时数为72学时（18周），其中理论讲授占总学时的1/2，实践占总学时的1/2。

课程教学内容要点和建议学时分配：

网页设计与制作概论.（讲授2学时，实验2学时）

(1)什么是网页(2)WWW服务

(3)常用的网页制作工具(4)小结(5)实训 具体教学要求：

①了解有关网页的基础知识；

②了解Internet的基本知识；

③了解Internet的产生和发展过程；

④Internet的工作原理、服务方式和Internet 常用术语； ⑤了解最常用的网页制作工具和它们各自的特点； ⑥理解Web的工作原理； ⑦掌握Web浏览器的使用；

FrontPage 2003简介（讲授2学时，实验2学时）

(6)FrontPage 2003的基本功能(7)启动与退出FrontPage 2003(8)浏览窗口界面(9)小结(10)实训 具体教学要求：

①了解FrontPage 2003的系统运行环境； ②熟悉FrontPage 2003的窗口界面；

③掌握FrontPage 2003的启动和关闭方法以及自定义其工具栏和选项的方法；

-1-计算机系教学大纲

FrontPage2003网页设计与制作

设计一个简单的网页（讲授2学时，实验2学时）

(11)简单网页制作示例(12)网页文件操作(13)输入网页内容(14)预览网页

(15)查看编辑HTML源代码(16)使用模板制作网页(17)小结(18)实训 具体教学要求：

①掌握网页文件的基本操作； ②掌握网页文本基本操作；

③掌握使用模板创建网页及网页的预览； 设计网页布局（讲授4学时，实验4学时）

(19)网页布局示例(20)输入标题(21)修饰文本

(22)运用边框与底纹(23)使用列表(24)改变段落式样(25)小结(26)实训 具体教学要求：

①掌握文本格式化的基本方法； ②掌握几种列表的创建方法； ③掌握样式的使用和自定义样式； 网页装饰设计（讲授4学时，实验4学时）

(27)装饰设计示例(28)插入符号(29)添加图片(30)处理图片(31)使用水平线(32)插入注释和时间(33)修改网页背景(34)运用特殊效果(35)小结(36)实训 具体教学要求：

①了解在网页中添加图片并对图片进行编辑的基本方法和技能； ②了解Web图片的常用格式和使用原则；

③掌握在网页中添加图片、对图片进行编辑和属性设置的方法； ④掌握网页背景的设置方法；

创建超链接（讲授2学时，实验2学时）

(37)超链接应用示例

-2-计算机系教学大纲

FrontPage2003网页设计与制作

(38)认识超链接(39)创建超链接(40)使用书签链接(41)取消链接(42)使用导航栏(43)小结(44)实训 具体教学要求：

①掌握文本超级链接的设置多种方法；

②掌握图片进行超级链接和热点设置的方法； 巧用表格（讲授4学时，实验4学时）

(45)表格设计示例(46)插入表格(47)操作单元格(48)填充单元格

(49)修改表格的行与列(50)设置表格属性(51)小结(52)实训 具体教学要求：

①了解在FrontPage 2003中如何使用表格组织数据，如何使用表格进行网页布局； ②掌握创建、编辑表格和对表格进行属性设置的基本方法； ③掌握使用表格组织网页数据和进行页面布局的方法； 表单设计（讲授4学时，实验4学时）

(53)表单设计示例(54)认识表单(55)表单内容编辑(56)验证性表单字段(57)表单处理程序(58)小结(59)实训 具体教学要求：

①了解表单的创建及其属性设置等内容；

②理解表单的基本概念、主要作用和使用原则； ③掌握利用模板创建表单和手工创建表单； ④掌握表单属性设置的方法； 框架网页（讲授4学时，实验4学时）

(60)框架网页应用示例(61)认识框架网页(62)创建框架网页(63)保存框架网页

(64)框架网页的打开与编辑(65)调整框架布局

(66)框架网页的属性设置

-3-计算机系教学大纲

FrontPage2003网页设计与制作

(67)框架网页的有关视图(68)目标框架(69)小结(70)实训 具体教学要求：

①了解在网页中使用框架的基本方法和技能； ②理解框架网页的基本概念；

③掌握框架网页的创建、编辑和保存；

③掌握框架属性和框架网页超链接的设置等内容； 插入Web组件（讲授2学时，实验2学时）

(71)组件应用示例(72)动态HTML(73)使用字幕(74)搜索表单(75)进行网站统计(76)插入包含网页(77)插入Flash动画(78)使用Java小程序(79)使用音频

(80)使用ActiveX控件(81)小结(82)实训 具体教学要求：

①了解FrontPage 2003动态组件以及音频、视频和Flash动画在网页中的应用； ②掌握FrontPage 2003动态组件的种类和使用方法； ③掌握网页中常用音频文件和视频文件的格式；

④掌握音频、视频和Flash等多媒体元素在网页中的应用； ⑤掌握动态效果的设置；

连接数据库（讲授2学时，实验2学时）

(83)数据库应用示例(84)设置Web服务器(85)创建ODBC数据源(86)获得数据库信息(87)编辑数据库信息(88)小结(89)实训 具体教学要求：

①掌握设置Web服务器的方法； ②掌握创建ODBC数据源的方法；

③掌握获得数据库信息和编辑数据库信息的方法； 网站管理与维护（讲授4学时，实验4学时）

(90)网站的基本操作(91)网站中的文件管理(92)网站设置

-4-计算机系教学大纲

FrontPage2003网页设计与制作

(93)文件的签入与签出(94)网站的发布与管理(95)修改网站(96)维护网站(97)小结(98)实训 具体教学要求：

①了解站点发布、管理和维护的基本知识；

②掌握Web站点的发布、管理和维护的基本方法；

教材和教学参考书：

教材

吕何新 陈伟 沈淦编《FrontPage2003网页设计与制作》 教学参考书

(99)徐国平主编 网页设计与制作教程 高等教育出版社

(100)刘艳丽主编 网页设计与制作教程 高等教育出版社 课程考核与评估方法：

本课程的考核采取提交课件的形式，包括阶段性课件和最终课件，阶段性课件占总成绩的30％，最终课件占总成绩的50％，平时成绩总成绩的20%。

大纲编写修改时间：2009年11月21日 教学大纲编写教师：冯荣 计算机系审查教师； 教务处审查人签字： 分管教学校长签字：

第二篇：Frontpage网页制作经验总结

【摘要】Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的。

【关键字】Frontpage创建站点、新建页面、文字、超链接

现在流行的网页制作软件有很多，如Macromedia公司的Dreamweaver、微软公司的Frontpage、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。其中Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。

工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。现在就让我们从第一步的建立站点来踏上建造网上家园之旅。

用FRONTPAGE创建站点是很容易的。首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点” 图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，FRONTPAGE就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。

在文件列表里除了主页之外，还有文件夹。新建站点时，FRONTPAGE都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。

尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是FRONTPAGE提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。

同样的，尽管站点的风格千差万别但是有许多站点的功能和结构都是一样的，如果我们从头开始建立站点的话，就要做许多重复劳动，这时，我们就可以使用模板或向导来建立站点。模板和向导的作用就好像盖房子的图纸一样，我们不必每次建立站点时都从头开始。我们单击“个人站点”图标，用它可以迅速创建一个个人站点，输入站点所在的位置，单击“确定”按钮，这样我们刚就创建了个人站点。个人站点模板已经为我们规划好了站点的目录和建立了相关的页面。现在我们点击一下“文件夹”按钮，双击index.htm图标，看，这就是我们的个人站点的主页。哎，好象有许多文字都不对，没关系，这些文字都是可以改变的，现在写的是文字的用途，比如“主题”文字就是用来写网站标题的地方，我们只要把它改为自己喜欢的标题就可以了。返回到“文件夹”模式，双击photo.htm。也可以把风景图片换成自己的照片，只要在新建站点的基础上进一步修改就可以做出自己的个人站点了。这不仅节省了许多力气，同时也给了初学者一个良好的出发点。

那么模板和向导有什么区别呢？我们安装软件时，一步步的用对话框提示我们完成安装过程的程序就是一个向导。在FRONTPAGE里，向导也是一种模板，不过它是一种特殊的模板，它会以对话框的形式辅助你完成站点的创建过程。

现在我们选择“文件”菜单的“新建”选项，单击“站点”命令，你看，FRONTPAGE提供了两个向导：公司展示向导、讨论站点向导，使用起来都很方便，你有兴趣也可以利用向导建立一个站点。

创建页面最简单的就是单击FRONTPAGE“常用”工具栏的“新建”按钮。它的右方有一个向下的小箭头，它是用来选择要新建什么，可以用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。

如果要新建网页，可以不用向下箭头键选择，而直接单击“新建”按钮。不过使用文件菜单的“新建”命令来新建网页能够有更大的选择。单击文件菜单的“新建”命令，选择“新建网页”，在“新建”对话框里，可以看到FRONTPAGE提供的许多网页模板，我们可以用这些模板来建立相应的网页。在右下角的预览框里可以看到选中模板的外观。选择“两栏正文”网页，这样就创建了一个新的分为两栏的网页了。然后点确定。使用模板可以不用总是从空白网页开始编辑，这样就省力很多。

网上几乎所以的网页都使用图片加以点缀，在网页中插入适当的图片，能够产生图文并茂的效果。

如果有一个图形，怎么把它放到网页上呢？

首先要看你的图形是什么格式的，也就是它扩展名是什么 只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅广泛，而且有利于节省存贮空间。如果图形不是这种格式，使用了其它格式的图形文件，在保存网页时FRONTPAGE会提示做格式转换，FRONTPAGE可以自动进行格式转换。

现在可我们看看怎么插入图形 选择“插入”菜单的“图片”命令，单击“来自文件”按钮。

在默认情况下，FRONTPAGE认为你要插入的图片总是放在你建立的站点的目录或它的子目录下的。可以说,站点就是一个目录。我们把编辑的许多网页文件放在同一个目录下，我们称这个目录为站点的主目录。这些网页引用的图形一般也放在这个目录下。当然，我们也可以在这个目录下建立其他的子目录，再把所有的图形放在子目录里。所以搜索下拉列表只允许在主目录和主目录下的子目录进行选择。

如果要插入的图片不在主目录下, 在“选择文件”对话框中进行选择。选择好文件以后，单击“确定”按钮，回到“图形”对话框。单击“确定”按钮，图形就插入了。现在单击“常用”工具栏的“保存”按钮。在“另存为”对话框中输入新的web页文件的名字，单击“保存”按钮。出现了一个对话框, 因为我们刚才插入的文件不在站点内，现在FRONTPAGE要把它复制到站点内，可是使用什么名字，放在站点的哪个目录下呢，就要在这设置了，单击“改变文件夹”按钮，另外这儿还在需要时对图形的格式进行转换。单击“位置”按钮，在默认情况下，图形被保存在站点的主目录下，现在我们选择IMAGE目录，单击“确定”按钮。回到“嵌入式文件”窗口，再单击“确定”。这样，图形就保存在站点内了

我们还可以从INTERNET上插入一个图形。选择“插入”菜单的“图片”命令，在URL栏内输入图片的地址，单击“确定”按钮。由于是插入网上的图片，因此在插入图形以后，应该保存一下网页，使图形存到站点内。

您可能说,我不会画画，插入图片容易，可是编辑图片就不容易了。没关系，FRONTPAGE自己带有许多剪贴画，你可以把它们插入到自己的网页。选择“插入”菜单的“图片”命令，选择“剪贴画”。你看，各种剪贴画都分类放好了。你可以自由地选

择。不过，插入后别忘了保存网页，把剪贴画复制到站点目录下。

一般我们插入的图形总是和文本在一起的，所以调整图形和文本的对齐方式很重要。在默认情况下，图形自动与文本的底部对齐。这一个网页，由于默认的对齐效果，页面出现了大量的空白。这时就要调整图形的对齐属性。在图形上单击鼠标右键，选择“图片属性”，选择“外观”选项卡我们把对齐方式调整为“左对齐”。使用图形可以使网页更加丰富多彩，而且我们还可以用图形来建立超链接，使网页相互联系起来。怎么用图形来建立链接呢？ 其实图形超链接只要在建立超链接时选择图形就可以了。首先选中超链接的图形，单击箭头图形，单击“常用”工具栏“超链接”按钮，选择主页文件“页面

1.htm”，单击“确定”按钮.在普通模式中，按住CTRL键，单击箭头图形，就跳到主页页面了。

如果我们要在图片上加上文字，单击图形工具栏“文本”按钮，现在图形中就出现了一个文本框，输入：“机软件”按一下Esc键，取消文字编辑，就选中文字框了，调整文本框到合适的位置，单击页面其他区域，文字就添加成功了。

如果我要修改 单击一下要修改的文字，这时文字作为一个整体被选中了，再点一下文字，这时文本框里有光标闪烁，你可以编辑文本了，重新输入：“计算机硬件”，在页面其他区域单击。文字就修改完成了。

怎样使文字更丰富、活泼呢？一个简单的就是使用“格式”工具栏。

字体设置：选上文字，打开格式工具栏的“字体”下拉列表框，在里面选择相应的字体就可以了。如果浏览网页的人使用的计算机没有设置的字体？浏览器会用系统默认的字体代替你设置的字体。不过，使用常用字体是一个好习惯。

字号设置：在“格式”工具栏“字号”下拉列表框中选择相应字体就可以了

工具栏上的B、I、U图标的作用是：

按下B按钮，被选中的文字就会变为粗体

按下I按钮，被选中的文字就会变为斜体

按下u按钮，被选中的文字就会带下画线

字的颜色：单击“格式”工具栏“字体颜色”按钮旁的向下箭头，选择适当的颜色，字的颜色就改变了。

还可以对字体进行一些其他设置。选择“格式”菜单的“字体”命令，在这里我们还可以作进一步的设置。这里除了“格式”工具栏可以做的设置以外，还可以设置许多效果。“字符间距”选项卡：它是用来设置文字的间距的。单击“间距”下拉列表，可以选择字符的间距是普通、扩充还是紧缩的。选择扩充，这时预览框的文字间距就变大了。也可以调整间距大小来改变间距，输入10，文字的间距就更大了。

“定位”下拉列表：在FRONTPAGE中每一行都有一个底线，定位就是指文字相对于底线的距离。也就是把文字上下移动，现在选择“上移”，文字就向上移动了。预览框中的黑线就是行的底线。

设计好的页面，应该检查它在浏览器中是否显示正常。

方法是，一般只要切换到预览模式就可以了。单击“预览”选项卡，在这个预览模式下的显示和在浏览器中的显示是一样的。但这并不意味着我们就不必用浏览器来检查编辑的网页了。因为即使是同一个页面，可能在不同的浏览器中显示会不太一样。比如在INTERNET EXPLORER中是这样显示的，但是在NETSCAPE中又是那样显示的。所以，我们要在自己的机器上多装几个浏览器，用来检查网页的兼容性。

那么为什么不用不同的浏览器来检查呢？选择“文件”菜单的“在浏览器中预览”选项，在浏览器列表框中选择不同的浏览器。（以INTERNET EXPLORER 5.0为例）单击“确定”

按钮。就可以看到新建页面在浏览器中的效果了。

怎样才能自己做的网页相互联系起来呢?也就是说让别人点页面上的图形或文本就跳转到其他页面呢？

在网页里，我们把这种点击后会进行页面切换的网页界面元素叫超链接。先来看一下用文字来建立链接。

首先创建一个指向站点内其他网页的超链接。

选择“插入”菜单的“超链接”命令，在文件列表框内选择“页面1.htm”文件，注意在URL文本框中显示了该文件的地址。单击“确定”按钮.超链接就制作成功了。我们切换到预览模式（单击预览按钮），当我们把鼠标指向“主页”两字时鼠标变成手形，单击它，我们就切换到主页了。

那么为什么不在普通模式下试呢？：因为普通模式主要是用来编辑网页的，当我们在普通模式把鼠标指向“主页”两字时鼠标没有变成小手状，因此不能进行页面切换。不过如果按住CTRL键，鼠标就变成了小手状。这时单击就可以进行切换了。也就是说在普通模式中按住CTRL键才能激活超链接。

我们也可以将超链接指向其他站点的网页。选中作为超链接的文本，单击“常用”工具栏的“超链接”按钮，这和选择插入菜单的超链接命令是一样的。在“创建超链接”对话框里，在URL地址栏直接输入要连接的网页或网站的地址。如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜就可以用浏览器在INTERNET上查找要链接的网页，FRONTPAGE会自动记录你找到的地址。单击“确定”按钮就可以了。我们还可以改变已经设置好的超链接。首先确认是普通模式，在要改变的超链接下单击鼠标右键，选择“超链接属性”命令，输入新的URL地址就可以了。要想取消超链接，删除所有URL地址框里的就可以了。还有一种超链接，可以链接邮件。这样可以使你的网上朋友通过Email及时与你联系，这是一个网站站长和网友交流的重要手段。先选中要作为超链接的文本，一般文本就是你的邮箱地址，单击“超链接”按钮，单击“信封”按钮，输入你的邮箱地址，单击“确定”按钮，退出对话框，选择“确定”，这时超链接就建立好了。我们试一下，切换到预览模式，单击邮件链接。

这样我们就差不多完成了网页的制作步骤，最后可将它发布到Web服务器上。站点发布前还要对它进行检查工作，包括超链接，页面等。

【】

〈1〉乔春源，樊天岳等。信息技术。江苏技术出版社，2001年7月。

〈2〉李振格。Office入门与提高。清华大学出版社，2001年2月。

〈3〉王超锋。网页制作。人民邮电出版社，2001年10月。

第三篇：frontpage网页制作教案

Frontpage网页制作导学案

青州一中

刘志韩

文件——新建——网页 【学习目标】

1、包括网页制作基础知识

2、站点的规划和创建

3、网页文本和图片的处理、表格和框架的应用 【学习重难点】

1、建立一个主题网站

2、建设一个网站的步骤

3、网页的美化与特效的制作 【课前预习】

思考一下多媒体信息集成的方式有哪些？

【自主学习】

1、在www中，________是信息的主要组织和表现形式。

2、用________语言编写的网页实际上是一种文本文件，以.HTML或者.HTM为扩展名，可以使用任何文本处理软件（如记事本、word等）创作或修改。

3、制作网页常用的软件有_________________和_________________。

4、网页文件的扩展名有哪些？

5、网站开发的基本过程：

网站的规划——（）——（）——网站的发布与管理——网站的评价 【合作探究与指导】

三、网站的制作

1、创建站点

文件——新建——站点（选择或创建存储站点的文件夹）

2、网页的创建与编辑

3、插入对象 水平线 图片 字幕 悬停按钮

4、创建超级链接

在对象上右击选择超级链接——选择链接的目标。

5、使用表格

表格——插入（在制作网页的过程中用表格来布局网页）

6、在站点中查看网页的编辑及网页之间的链接情况。

分步骤操作练习题：

1、新建一个站点，只有一个空白网页的站点。

2、在首页上插入“我最喜爱的明星”，然后进行修饰。

3、再新建一个空白网页。重新命名为“周杰伦”。

4、插入图片“周杰伦”，文本“周杰伦”，排版设置后保存网页。

5、再建立一张空白的网页，重新命名为“刘亦菲”。

6、插入图片“刘亦菲”，文本“刘亦菲”，排版设置后保存网页。

7、分别在首页和“周杰伦”“刘亦菲”网页建立超级链接。操作练习： 【拓展任务】

以环保为主题，利用文件夹“环保”中的素材，制作一个5页的网站。

【当堂检测】

1.在网页制作中，我们经常用下列（）办法进行页面布局。

A.文字

B.表格

C.表单

D.图片 2.使用浏览器访问网站时，第一个被访问的网页称为（）。

A.网页

B.网站

C.HTML语言

D.主页 3.网页中可使我们进行选择性浏览的称为（）。

A.文字

B.图片

C.声音

D.超链接

4.在FrontPage2000中，要建立同一个网页内的链接点，让你点选某一链接后，迅速跳到同一网页内的另一个特定位置，应采用（）链接。

A.单元格

B.表单

C.书签

D.表格 5.FrontPage 2000中，下述关于图片与链接的关系表述正确的是（）。

A.图片不能建立链接

B.一张图片只能建立一个链接

C.图片要建立链接需经过处理

D.通过设置热区，一张图片可建立多个链接 6.在FrontPage 2000“网页”视图模式下，单击“普通”标签后，在出现的“普通”窗口中，可直接进行（）。

A.网页编排

B.观察网页在浏览器中的效果

C.编辑HTML代码

D.下载图片 7.网页制作的超文本标记语言称为（）。

A.VB语言

B.HTML语言

C.BASIC语言

D.ASCII 8.在Frontpage2000网页视图方式下，单击（）标签可直接编辑HTML代码？

A.普通

B.HTML

C.预览

D.编辑 9.在FrontPage 2000中，我们想要文字左右交替移动的效果，是下列（）效果。

A.字体

B.DHTML效果

C.字幕

D.悬停按钮 10.在FrontPage 2000表格单元格中，（）项目不能输入。

A.表格

B.图形

C.背景

D.声音

作业：以我们寒假生活为主题，从互联网上搜索的素材制作一个网站。

【阅读材料】

网站设计

建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。

二、搜集材料

明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

三、规划网站

网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。

四、选择合适的制作工具

网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，五、制作网页

材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。

六、上传测试

网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。

七、推广宣传

网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

八、维护更新

第四篇：《网页设计与制作》教学大纲

《网页设计与制作》教学大纲

一、课程基本信息

课程编号：

中文名称：网页设计与制作

英文名称：Web Design and Production 课程类别：选修课 适用专业：所有专业

开课学期：2011-2012第2学期 总学时：24学时 总学分：1 课程简介：

本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：

1、网页设计与制作教程，熊前兴 闵联营，科学出版社;

2、网站与网页设计，张贵明，清华大学出版社;

3、网页美术设计原理及实战策略，王晓峰 焦燕，清华大学出版社;

4、网站建设典型案例，张枭，清华大学出版社；

二、课程教学目标：

网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。

三、理论教学内容与要求

第一章、网页的基础知识（1学时）（1）Internet基础知识

（2）www简介

（3）网页制作的技术和工具介绍

第二章、超文本编辑语言HTML（8学时）（1）HTML文件的基本结构（2）文字和段落标记

（3）列表标记

（4）图片标记（5）表格标记（6）超链接标记（7）表单标记（8）框架标记

第三章、JavaScript语言（4学时）（1）JavaScript语言简介（2）JavaScript编程基础（3）基于对象的JavaScript语言（4）JavaScript程序实例

第四章、层叠样式表CSS（1学时）（1）CSS概述（2）CSS属性

第五章、可视化网页设计工具Dreamvawer8.0（1）网页的基本操作（2）图像、表格与超链接（3）表单与框架（4）添加网页元素（5）发布站点

第六章、动态网页设计语言ASP（4学时）（1）ASP简介（2）VBScript脚本基础（3）ASP的内置对象（4）实用Global.asa文件

4学时）（第七章、利用AD0访问数据库（1学时）（1）数据库的连接（2）数据库的检索（3）数据库的操作

总结复习（1学时）

四、实验教学内容与要求

五、作业

六、考核方式

期末考核每个同学为自己设计制作一个博客网站。

七、成绩评定

1.自制网站（80%）2.平时考勤、作业(20%)平时成绩分配：

平时考勤5次，每次2分，共占10% 作业5次，每次2分，共占10%

八、执行大纲时应注意的问题

根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

执笔人：邢雁平

第五篇：网页制作与设计教学大纲

《网页制作与设计》教学大纲

课程编号：

总学时数：36学时（其中讲授：20学时，实验：16学时）

一、课程性质、目的和要求

本课程是我系各专业必修专业课程之一。该课程以Dreamweaver和CSS为蓝本，全面介绍与网页设计制作有关的知识，向学生阐明Web基本工作机制，并使学生具有解决静态网页制作和设计等方面问题的能力。通过对WWW的基本概念、网页设计的基本原则、网页设计编程的基本技术与技巧的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。

在网络技术迅速发展的今天，网页制作已成为当今社会上一种比较热门的技术，也是计算机专业学生的一门必修课，通过课程学习要求学生能够掌握静态网页的制作工具的使用以及HTML标记语言的运用，并基本掌握JavaScript脚本语言编程的常用方法与技巧。通过与前期课程的融会，运用掌握的Flash等其他制作工具软件，在具体的网页设计过程中要很好的将几者结合起来使用，从而能够生成功能强大、丰富多彩、生动活泼的高质量的网页。通过本门课程的学习，学生能够具备以下能力：网站建设、网络广告、多媒体课件、网络游戏、汇报材料，MTV等。同时培养学生以下素质：服务意识：能够为他人提供优质的服务；文明法制意识：网站内容应积极健康向上，不做违法的事；合作精神：能够与他人进行合作，具有协调工作能力和组织管理能力；较强的自我知识及技术更新能力：快速跟踪网页制作的新技术及市场应用动态。

二、教学内容、要点和课时安排

第一章 Dreamweaver MX概述 1．Dreamweaver MX简介

2．Dreamweaver MX的工作界面介绍

3．窗口和面板

4．Dreamweaver MX的新特性

要求：熟悉Dreamweaver MX的操作界面，DreamweaverMX版本的最新特性，掌握如何自行设置具有独特的工作环境，对Dreamweaver MX的主界面认识透彻，便于以下课程的深度学习。

第二章 创建站点 1．站点的规划

2．创建本地站点 3．创建ASP站点 4．连接数据库

2学时

2学时 5．站点的管理与维护 6．发布站点 要求：了解站点的基本概念，熟悉掌握使用DreamweaverMX定义站点的方法，能根据自己的实际情况定义站点，定义ASP站点，掌握通过DreamweaverMX软件连接简单数据库的方法。

第三章 文本及其格式化 1．文本及其格式化概述 2．文本的输入 3．创建文本列表 4．CSS样式文件的创建

5．将文档中的样式导出为CSS样式文件 6．文本格式化综合实例

要求：学习如何插入文本、设置字体类型、大小、颜色和对齐属性，使用层叠样式表创建和应用自定义样式。通过学习掌握利用CSS样式格式文本，掌握导出和使用CSS样式文件的基本方法。

第四章 图像

2学时

2学时

1．常用图像文件格式 2．插入图像 3．设置图像的属性

要求：通过学习，学生必须完全掌握如何在DreamweaverMX软件中插入图像、修改图像的属性，利用外部图象处理软件编辑图像以及创建图像地图等方法。实现图像与文本的完美结合。

第五章 表格 1．概述

2．表格的基本操作 3．表格及其属性设置 4．表格排序

要求：掌握使用DreamweaverMX建立表格、设置表格以及使用表格对网页进行布局和美化。通过表格定位文本和图像在页面出现的位置。对表格的修改主要是添加内容、修改表格或单元格行/列属性，复制或者粘贴多个单元格等操作。

第六章 框架 1．创建框架

2．框架和框架页的基本操作

3．设置框架和框架页的属性、大小及背景色

2学时

2学时 4．框架及框架页综合实例

要求：掌握框架的创建、保存以及框架属性的设置，难点在于框架的链接设置，掌握框架结构的主要功能在于导航。注意框架和框架集的区别。

第七章 页面布局视图的使用

1．布局单元格和布局表格 2．绘制布局表格和布局单元格 3．布局表格和布局单元格的基本操作

4．设置布局宽度

要求：重点掌握如何创建布局表格和布局单元格，掌握布局视图的切换方法，掌握布局表格和布局单元格属性的设置和意义。

第八章 链接

3学时

3学时

1．链接、路径与锚

2．建立链接 3．建立特殊链接

要求：了解链接、路径与锚的使用条件、掌握链接的几种设置方法和他们的区别，学会使用特殊链接（书签、电子邮箱、网站URL）,理解掌握链接目标的指定。

第九章 表单 1．表单概述 2．创建表单 3．表单对象 4．客户注册表单 5．网上调查表单

要求：掌握如何创建表单，以及如何在表单中添加表单对象，掌握常见的表单对象的功能和使用方法，理解表单处理的原理，能够完成基本的表单设计。

第十章 层

1．关于层

2．创建层

3．显示隐藏层实例

4．下列菜单实例 5．层综合应用实例

要求：让学生掌握层的概念和层的分类，掌握关于层的属性，掌握建立层的基本方法，掌握层的各种属

2学时

2学时 性的设置。

第十一章 行为

1．什么是行为

2．行为面板的用法

3．行为的基本操作

4．使用Dreamweaver自带的行为

5．行为应用实例

要求：重点掌握DreamweaverMX自带的行为的使用方法，掌握这些常用行为事件的设置，了解行为的意义以及行为面板的使用方法，能根据具体的行为设置对应的行为事件，能对所使用的行为事件进行修改。

第十二章 时间轴与动画

1．时间轴面板

2．使用时间轴创建动画

3．修改时间轴

4．创建录制路径动画 5．在时间轴中改变对象属性

6．在时间轴中使用行为

7．时间轴动画实例

要求：掌握如何使用时间轴创建时间线动画，重点掌握如何修改时间线及其对象的属性，添加和删除祯、修改动画的起始时间、修改动画路径的位置等。

第十三章 Dreamweaver MX程序设计

1．Dreamweaver MX程序设计基础 2．建立数据库连接 3．定义记录集

4．动态数据绑定 5．应用服务器行为

要求：掌握基本的术语和如何建立数据库连接，掌握如何建立记录集，以及记录集中数据的绑定，了解各类服务器行为的功能，重点掌握如何定义记录集和应用服务器行为，掌握WEB应用程序的构建。

第十四章 模板与库

1．什么是模板和库

2．创建模板

3．定义可编辑区域

2学时

2学时

2学时

2学时 4．应用模板建立网页 5．应用模板更新站点 6．库的使用

7．模板的创建与设置实例

要求：掌握模版和库的原理和优势，掌握掌握如何建立和使用模版，掌握库的使用和添加到库文件。第十五章 代码片断

1．使用代码片断 2．代码片断的创建

3．代码片断的使用

4．代码片断的创建与使用综合实例

要求：理解代码片断的概念，掌握创建代码片断的方法，掌握如何使用代码片断。第十六章 经典实例

1．个人网站 2．网站论坛

要求：了解页面的整体设计，掌握表格的高级应用技巧，了解交互网站的运行机制，掌握服务器行为的应用，学生通过锻炼，掌握创建网站的全部过程和机制，能够独立网站一个小型的全面的个人网站。

4学时

2学时

三、教学方法

要求：

1、结合DreamweaverMX软件使用的特点，以上机演示教学方法为主，辅之教学课件等方法进行教学。

2、结合本学科特点在教学过程中，使学生形成多动手、积极探究、勤于思考、学会学习等良好的学习习惯，培养学生搜集和整理素材的能力、理解实验能力、分析和解决程序设计中的问题的能力等。

四、成绩考核方法：

要求：

1、课后试验作业每周一次。

2、期末考试采取理论考试为主、大作业（完整的个人网站）为辅的形式。

3、平时成绩30%、期末成绩70%，期末考试（笔试70%，大作业30%）。

五、教材与主要参考书目

教材：

路甬祥：《DreamweaverMX职业技能培训教程》，电子科技大学出版社，2004年3月。参考书： 位元文化：《CSS/HTML网页设计》，中国铁道铁道出版社，2002年2月。

刘洪武：《网页设计与制作（高职教材）》，大连理工大学出版社，2003年7月。李卓玲：《java程序设计语言》，大连理工大学出版社，2003年8月。

执笔人： 审订人：