《网页制作FrontPage》教案

本文格式为Word版，下载可任意编辑——《网页制作FrontPage》教案《网页制作FrontPage》教案

教师：张爱平

第1、2课时网页设计概述

讲解网页设计的相关术语及网站制作的基本流程。

使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。

网页设计中的若干术语。

理解网页设计中的若干术语。

讲授式、探讨式、案例分析式。

1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。2、《Internet网页工场》Wittime工作室重庆出版社。3、《WEB网站设计》JoelSklar著高等教育出版社。4、《HTML网页制作教程》材义语编著铁道出版社。1.1和URL1.1.1Web的起源

Web是WorldWideWeb的简称，一般也称之为或3W

1.1.2Web的特点和结构

Web最大的特点是使用了超文本（Hypertext）采用C/S（客户机/服务器）工作模式

在浏览器和服务器之间应用HTTP（HyperTextTransferProtocol，超文本传输协议）作为网络应用层通信协议1.1.3URLURL的完整格式

协议://主机名或IP地址：端口号/路径名/文件名1.2IE5的使用

Web浏览器是浏览Internet资源的客户端软件

在Windows环境下使用的浏览器主要有InternetExplorer、NetscapeNavigator、Mosaic等1.2.1IE5的界面1.2.2IE5的使用1.3网页中所使用的技术1.3.1HTML语言和XML语言1、HTML语言

?HTML只使用SGML中很小一部分标记

?HTML语言（HyperTextMarkupLanguage超文本标记语言）?HTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具

2、XML语言

XML（eXtensibleMarkupLanguage）1.3.2动态网页1.3.3多媒体技术的应用1.3.4Web服务器端程序1.4制作网页的基本方法1.4.1制作网页的基本步骤1、确定网页的内容2、设计网页的组织结构3、资料的收集与整理4、选择网页的设计方法1.4.2制作网页时要注意的问题1、网页的标题要简单，明确。

2、在文本中要使用水平线，以分割不同部分。3、对重点段落要强调显示。4、网页中插入的图片要尽量的小。

5、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标），不能侵扰版权。

通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。

阐述网页制作的一般方法？

*理解表单中相应元素对应标志及属性的含义。案例分析式、项目教学

1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。2、《WEB网站设计》JoelSklar著高等教育出版社。3、《HTML网页制作教程》材义语编著铁道出版社。2.5插入表格

2.5.1在网页中插入表格

表格的基本构成元素：表头，单元格，列，行

第一行第一列第一行其次列

其次行第一列其次行其次列2.5.2嵌套的表格

2.5.3表格的属性设置2.5.4单元格属性设置2.6表单的应用

表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。2.6.1创立表单

2.6.2用定义用户交互（1）单行文本输入区（2）密码输入区（3）单项选择框（4）复选框（5）隐蔽区域（6）按钮

2.6.3定义下拉式菜单你选修的课程：

2.6.4定义多行文字输入区域请输入你的详细介绍：

2.7框架窗口

框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最终形成充满整个窗口的网页。2.7.1框架的定义2.7.2框架属性设置

2.7.3子窗口属性设置

很道歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。

2.7.6内部框架

表格在网页设计中应用广泛，熟练把握表格的基本标志及协同使用的属性的意义，是灵活运用表格的基础。表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替。

框架结构是布局网页的一种常用方式，要把握框架及其嵌套的实现，

以及在框架中设置超级链接时目标框架位置的设置。

表单是网页实现交互处理的工具,熟练把握表单中元素的标志和属性，是设计表单网页关键。

第9、10课时HTML标志综合运用案例

综合运用所学过的HTML标志书写网页。

使学生能够书写简单的HTML网页。

使用所学的HTML标志书写网页。HTML的综合运用。

练习一:制作以上这张简介的表单网页

注意：首先要插入一个空表单，为了排版便利，可以再插入一张表格（6行2列），最终插入表单元素了解有关表单的HTML代码

表单＜formname=\method=\action=\＞...＜/form＞

文本框＜name=\＞文本域＜textareaname=\＞＜/textarea＞密码框＜inputtype=\＞单项选择＜inputtype=\＞

复选＜inputtype=\＞提交按钮＜inputtype=\提交\＞重置按钮＜inputtype=\重置\＞普通按钮＜inputtype=\按钮\＞下拉列表

＜selectname=\＞

＜optionvalue=\＞高一＜/option＞＜optionvalue=\＞高二＜/option＞＜optionvalue=\＞高三＜/option＞＜/select＞

三、理解表单及表单元素的属性设置

表单属性：

表单名称：不太常用，一般用于网络编程动作：指接收数据的后台程序，必需正确填写

方法：指向后台传递数据的方法，有GET和POST二种方法，默认为GET。

使用何用方法，由后台程序决定。

文本框属性：

名称：必需正确填写，注意大小写。当提供数据时，其实就是提供一组赋值语句。a=XXXb=YYY等

练习一：百度探寻(百度素材下载分析：根据分析百度探寻网页，知道

后台程序为)

http://.http://.//使用的数据传递方法为GET文本框名为“wd〞

另有一个隐蔽域，名称为“cl〞，值为3(隐蔽域是一种向后台隐敝地传递数据的方法)

思考题：能不能根据练习二，通过分析GOOGLE的网页，设计一个

google探寻页（google）素材下载

4.1.2VBScript程序运行和编辑环境

运行:在任何安装IE或Navigator浏览器的计算机上

编辑：可以用任何文本文件编辑器（如Notepad、WordPad、WPS、DOS的EDIT命令等）进行编辑，也可以用网页制作工具编辑4.1.3把VBScript代码嵌入HTML文档

4.1.3把VBScript代码嵌入HTML文档

VBScript是程序开发语言VisualBasic家族的最新成员，可以将灵活的脚本应用于更广泛的领域，包括MicrosoftInternetExplorer中的Web客户端脚本和MicrosoftInternetInformationServer中的Web服务器端脚本。把握VBScript是开发动态网站的必要条件。

1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。2、《WEB网站设计》JoelSklar著高等教育出版社。

3、《Dreamweaver网页设计案例教程》白煜编著清华大学出版社。4、《DreamweaverMX2023完美网页设计与制作》姜楠编著中国青年出版社。一、框架入门

所谓框架就是把屏幕分成几个部分，如左右型框架，T字型框架，在框架的不同部位分别显示不同的网页，一个框架的网页，一定包括N＋1张网页，如左右型框架包含左右二张网页和一张总的框架页。框架是由框架集和单个框架组成的，框架集定义一组框架的布局和属性，包括框架的数目、大小和位置以及在每个框架中初始显示的页面的URL。框架实例二、创立框架

练习一：做一个最简单的左右型框架网页（如网页）第一步：开启DW软件，新建一张空白网页

其次步：选择“文件〞——“框架〞或者直接单击框架面板第三步：拖动框架左边框，向右拖，把屏幕分成左右二半（一般左小右大）

第四步：分别在左右二个框架内输入文字

注意如何删除框架？

答：将光标放在框架的边框上，当光标分为双向箭头时按住鼠标左键，将框架的边框拖出父框架或页面之外。三、保存框架

练习二：保存框架，每个框架页代表一个单独的网页，所以在保存文件时必需保存各个子框架。

第一步：保存左框架，鼠标移入左框架内，单击“文件〞——“保存〞，选择“保存框架〞，可保存为D：\\lx\\left.htm。

其次步：保存右框架，鼠标移入右框架内，单击“文件〞——“保存〞，选择“保存框架〞，保存为D：\\lx\\right.htm。

第三步：保存框架页，鼠标点击框架的边框线，即选中框架组，然后单击“文件〞——“保存〞，保存为D：\\lx\\index.htm。

第四步：开启总的框架页index.htm，就会自动开启相关的框架子页。四、框架属性

练习三：创立方才创立好的框架属性，按住ALT键的同时，单击某边框架页，即可以选中此框架页

第一步：把左框架页名称设置为leftfm，框架边框颜色为蓝色，边界宽度为30像素

其次步：把右框架页名称设置为rightfm，当框架内的内容显示不下时要求有滚动条

第三步：设置框架集边框设置为有，边框宽度为3，左框架列宽为

180像素

五、链接框架内容

练习四：做一个有链接的左右型框架网页，要求单击左边的链接后，内容在右边显示。（只有已经命名的框架才能正确设置链接。）第一步：做好三个链接网页a1.htm，a2.htm，a3.htm

其次步：选中左边的“第一章〞链接文字，把它链接到a1.htm，并把“目标〞设为右框架的名称rightfm

第三步：依次设置其它，其次章链接到a2.htm，第三章链接到a3.htm，并目标设为右框架名称rightfm第四步：保存各个框架和框架页

第五步：也可以选择“保存全部〞来进行总的保存

六、学生练习（练习下载）练习一：做一个T字型框架，把它保存在d:\\kj文件夹中

练习二：练习做书本上的实例P273图10.2

练习三：建立如下所示的第一张网页，特别要注意一定要把左边栏目的链接全部设置好，再修改右边的内容后，另存为其次、第三??网页。

这样做的一组网页有一个缺点，假使想修改左边栏目中的文字，必需修改全部网页，所以说网页更新不太便利。

了解动态网页的含义，本节详细的介绍了如何在DreamweaverMX2023中实现与数据库的连接。动态网页是当今的主流，学好动态网页的制作是必需的。

第17、18课时Dreamweaver综合性网页设

计案例

实例讲解利用Dreamweaver进行留言本的制作。

使学生把握利用Dreamweaver作出简单的动态站点。

动态站点的制作流程。

数据库的创立、连接与显示。

讲授式、项目模块式、演示教学。

1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。2、《WEB网站设计》JoelSklar著高等教育出版社。

3、《Dreamweaver网页设计案例教程》白煜编著清华大学出版社。4、《DreamweaverMX2023完美网页设计与制作》姜楠编著中国青年出版社。

1、制定网站设计方案。2、建立数据库。

3、在DreamweaverMX2023中创立站点。4、在DreamweaverMX2023中连接数据库。5、发表、编辑、删除留言部分制作。6、管理留言

在一个网站中，往往会有好多张子页会用同一种风格来制作，此时往往用模板是最有效，并且也是最快的方法。模板实质上就是作为创立其他文档的基础文档。

案例分析式、探讨式、练习式。

1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。2、《WEB网站设计》JoelSklar著高等教育出版社。3、《HTML网页制作教程》材义语编著铁道出版社。

1、用记事本书写HTML网页。

2、利用案例进行HTML网页的综合讲解。3、要求学生按规定书写一个完整的HTNL网页。1>、立体化表格

立体表格一般是通过颜色对比达到立体效果的，可以使表格具有更加美丽的外观视觉。下面通过制作一个具有立体效果的，使我们更加简单地把握如何设置表格的属性，以及编辑表格的标签和查看表格的标签属性。

源码如下：

it365cn

it365cnit365cnit365cn

cnbrucecnbrucecnbrucecnbruce

具体方法见书本p137页。

练习一：请大家做出如下立体凸出表格：

思考：请做出如下凹进表格：

二、格式化表格（P136）

执行“命令〞－“格式化表格〞，在“格式化表格〞对话框中选择你要的方案。三、圆角表格（P139）四、请完成以下网页

作业：完成后请以“电脑报〞链接到作业本第三周。

HTML是目前制作网页时必需把握的一种语言，学好HTML语言