《网页制作FrontPage》教案

更新时间:2024-07-05 06:31:01 阅读量: 综合文库 文档下载

说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。

《网页制作FrontPage》教案

教师:张爱平

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

【教学内容】

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

使学生对网站及网页有一定的认识,激发学生学习网页设计的兴趣。 【教学重点】

网页设计中的若干术语。 【教学难点】

理解网页设计中的若干术语。 【教学方式】

讲授式、讨论式、案例分析式。 【教学参考】

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

Web是World Wide Web的简称,一般也称之为WWW或3W

1.1.2 Web的特点和结构

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

在浏览器和服务器之间应用HTTP(Hyper Text Transfer Protocol,超文本传输协议)作为网络应用层通信协议 1.1.3 URL URL的完整格式

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

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

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

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

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

2、XML语言

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

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

5、图形要附加文字说明,以便关闭图像时查看。 6、网页中引用的资料及商标(或图标),不能侵犯版权。 【课后小结】

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

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

第3、4课时 HTML的基本标志与格式标志

【教学内容】

讲解HTML基本标志对和格式标志。 【教学目的】

使学生标志对与格式标志对的使用。 【教学重点】 格式标志的使用。 【教学难点】 列表标志的使用。 【教学方式】

讨论式、案例分析式、练习式。 【教学参考】

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

2.1 HTML文档的基本结构 2.1.1 HTML语法 1、双标记 语法:

<标记>内容

2、单标记 语法:<标记>

最常用的单标记是
3、标记属性 语法

<标记 属性1 属性2 属性3 ? > 例子


例子

2.1.2 HTML文档的基本结构 【课后小结】

通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用

列表,有序列表,无序列表标志及属性。

第5、6课时HTML的文本、图片与超级链

接标志

【教学内容】

讲解HTML标准中的文本、图片与超级链接标志 【教学目的】

* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。 * 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图片。

* 使学生掌握超级链接标志的使用。 【教学重点】

* 字体、图片和超级链接标志的使用。 * 网页中特殊符号的输入 。 【教学难点】

* 理解特殊符号对应的标志。 * 理解img标志中属性的意义。 * 理解书签超级链接的意义 。 【教学方式】

讨论式、案例分析式、练习式。 【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。 3、《HTML网页制作教程》材义语编著 铁道出版社。 【新课内容】 2.2 插入文字 2.2.1划分段落 格式

段落内容

2.2.2插入标题文字 格式

2.2.3字号属性

设置基准字号: 网页内的其他文字,采用下面的格式来定义 ......

Size的有效范围是1(最大)到7(最小)。如果在Size的值前面带上“+”号或“-”号,则表示相对于基础字体增大或减小若干字号。 2.2.4颜色属性 两种方式

2.2.5字体属性

宋体,隶书,Time”> 2.2.6 文本修饰

......,文字以粗体显示。 ......,文字显示为斜体。 ......,显示下划线。

......,中心线贯穿文字。 < EM>......,强调文字,通常用斜体。

< STRONG>......,特别强调的文字,通常用黑体。 ......,以等宽体显示西文字符。

......,使文字大小相对于前面的文字增大一级。 ......,使文字大小相对于前面的文字减小一级。 ......,使文字成为前一个字符的上标。 ......,使文字成为前一个字符的下标。 ......,使文字显示为闪烁效果。 2.2.6 文本修饰 2.2.7 预格式化文本 使用预格式化标记

 

不再忽略在此之间的空格、制表符与回车符等元素 2.2.8转义字符与特殊字符

一般转义符都是以“&”开始,以“;”结束,一个转义符之间不能有空格

2.2.9文本强制换行和不换行 文本强制换行
不换行 2.2.10插入水平线 使用


标记

属性:Width,Size,Align,Noshade,color 2.2.11使用列表 1、无序列表

      3、定义列表

      列表条目1 条目1的说明 列表条目2 条目2的说明 ??

      2.3 插入图片

      2.3.1在网页中插入图片 基本格式

      2、为图片建立超级链接

      3、链接到邮件和多媒体文件 链接到邮件

      2.4.2使用锚点

      ?使用锚点可以使用户在一个较长的文档中跳转,方便地找到要阅读的内容。 ?建立锚点:

      ?

      ?使超级链接指向已定义的锚点。 ? ? 2.4.3新窗口和基准链接 1、打开新窗口

      Target=\开一个新窗口 2、基准链接

      在 与 之间设定

      2.4.4图像地图 【课后小结】

      本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性,熟练运用这些标志是制作多媒体网页的基础。超级链接标志中,书签

      链接是一类特殊的链接方式,理解和使用书签链接学习HTML中超级链接标志的难点。

      第7、8课时HTML表格、表单与框架标志

      【教学内容】

      讲解HTML中制作表格、表单与框架的标志。 【教学目的】

      使学生掌握简单表格、表单与框架的制作。 【教学重点】

      * 表格中单元格的合并以及表格嵌套和叠加操作。 * 框架的嵌套使用。 * 表单元素标志与属性。 【教学难点】

      * 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。

      * 理解框架属性name、target的意义。

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

      1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。 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子窗口属性设置

      Name=\

      SRC=\

      MarginWidth=\

      Noresize

      MarginHeight=\Scrolling=\FrameBorder=\

      FrameSpacing=\ 2.7.4常见的框架窗口划分方法

      (1)标题和正文,分为上下两部分 (2)层次结构,分为上中下三部分

      (3)目录和标题,分为左上、左下、右三部分 (4)标题、目录和正文,分为上、左下、右下三部分 (5)嵌套目录,分为左、右上、右下三部分 2.7.5不支持框架的网页

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

      2.7.6内部框架 【课后小结】

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

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

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

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

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

      【教学内容】

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

      使学生能够书写简单的HTML网页。 【教学重点】

      使用所学的HTML标志书写网页。 【教学难点】 HTML的综合运用。

      【教学方式】

      案例分析式、讨论式、练习式。 【教学参考】

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

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

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

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

      源码如下:

      it365cn

      it365cn it365cn it365cn

      cnbruce cnbruce cnbruce cnbruce

      具体方法见书本p137页。

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

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

      二、格式化表格(P136)

      执行“命令”-“格式化表格”,在“格式化表格”对话框中选择你要的方案。 三、圆角表格(P139) 四、请完成以下网页

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

      【课后小结】

      HTML是目前制作网页时必须掌握的一种语言,学好HTML语言是为以后对《网页设计》这门课程更深入的学习打下扎实的基础。

      第11、12课时Dreamweaver中简单WEB

      站点建立与管理

      【教学内容】

      讲解Dreamweaver的工作界面和基本操作。 【教学目的】

      使学生掌握网页制作工具Dreamweaver的基本操作方式。 【教学重点】

      网页制作工具Dreamweaver的界面和基本基本操作。 【教学难点】

      掌握一个新的开发工具。 【教学方式】

      讲授式、项目模块式、演示教学。 【教学参考】

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

      3、《Dreamweaver网页设计案例教程》白煜编著清华大学出版社。 4、《Dreamweaver MX 2004完美网页设计与制作》姜楠编著中国青年出版社。 【新课内容】 3.1 Dreamweaver概述 3.1.1 Dreamweaver的工作界面

      3.1.2 Dreamweaver4的基本操作 1、直接建立新网页 “文件”→“新建”(Ctrl+N) 2、打开已有的网页 “文件”→“打开” 3、保存编辑过的网页

      “文件”→“保存”,直接保存 “文件”→“另存为”,换名保存 4、预览正在编辑的网页 “文件”→“在预览器中预览” 5、设置网页属性 “修改”→“页面设置” (1)标题 (2)背景图像 (3)背景色 (4)文字颜色 (5)超级链接颜色 (6)左边界上边界 (7)文件编码方式 (8)网页蓝图 6、导入Word文件

      “文件”→“导入” →“导入Word HTML”

      3.1.3用Dreamweaver创建和管理站点 1、创建本地站点 “站点” →“新建站点” 2、管理站点 “站点” →“定义站点” 3、上传和下载文件 【课后小结】

      Dreamweaver是一款由Macromedia公司开发的专业HTML编辑器,用于对WEB站点、WEB页面和WEB应用程序进行设计、编码和开发。无论是刚接触网页设计的初学者还是专业的WEB开发人员,Dreamweaver都在前卫的设计理念和强大的软件功能方面给予了充分可靠的支持。因此学好Dreamweaver对以后的网页设计有很大的帮助。

      第13、14课时 Dreamweaver中静态网页设计 【教学内容】

      讲解利用Dreamweaver进行静态页面的制作。 【教学目的】

      使学生掌握利用Dreamweaver对页面进行文本、图象、超级链接、表格以及框架等的编辑。 【教学重点】

      通过对工具软件Dreamweaver的操作,制作出完整的静态页面。 【教学难点】 了解静态网页的含义 【教学方式】

      讲授式、项目模块式、演示教学。 【教学参考】

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

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

      3.2 在页面中加入文字和图像 3.2.1文字的添加和处理 (1)文字属性面板的使用 3.2.2插入和优化图像 (1)准备图像

      把网页中所用到的图像文件预先拷贝到站点文件夹中 (2)插入图像 (3)设置图像属性 (4)创建图像地图 3.3 超级链接的运用

      3.3.1插入超级链接

      (1)直接在属性面板的链接项填入链接的地址。

      (2)在属性面板单击浏览文件按钮打开浏览窗口来选择链接的网页。 (3)利用指向文件图标创建链接。 3.3.2超级链接的运用 (1)链接其他网站 在链接栏填写URL

      选择目标网页显示的窗口。 _blank、parent、_self、_top (2)链接其他文件 输入网页文件名外

      使用属性面板上的指向文件图标,创建内部链接 (3)链接E-mail

      直接在链接栏填写E-mail地址。 利用对象面板插入E-mail (4)锚点链接

      建立锚点:“隐藏” → “插入命令锚点” → 填入锚点的名称 建立锚点链接:在链接栏中输入符号“#”和锚点名称。 3.4. 表格的应用 3.4.1表格的创建 A.创建表格

      (1)使用菜单“插入”→“表格”。

      (2)单击对象面板上的子菜单中插入表格按钮。

      (3)按CTRL+ALT+T组合键。 B.选择表格元素 (1)选取整个表格 (2)选择行和列 (3)选择单元格 3.4.2表格属性的设置 1、表格整体属性设置 2、行列和单元格属性设置 3.5. 在网页中创建表单 A创建表单

      “插入”→“表单”

      使用菜单“窗口”调出“对象”面板, “表单” →“插入” B添加表单元素 (1)添加文本域

      “插入”→“表单对象”→“文本域” 设置TextField,字符宽度,最多字符,类型 (2)添加选择域

      ① 在表单中插入单选按钮。“插入”→“表单对象”→“单选按钮” ② 在表单中插入复选按键。“插入”→“表单对象”→“复选钮” (3)添加列表和下拉式菜单 (4)添加按钮 (5)添加文件域

      【课后小结】

      了解静态网页的含义,利用Dreamweaver MX 2004的强大功能制作出各色各样的页面,为以后的学习打下坚实的基础。

      第15、16课时Dreamweaver中动态网页设

      【教学内容】

      讲解利用Dreamweaver进行动态页面的制作。 【教学目的】

      使学生掌握利用Dreamweaver作出简单的动态页面。 【教学重点】

      理解动态页面的含义以及数据库的使用。 【教学难点】 了解动态网页的含义。 【教学方式】

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

      【教学参考】

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

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

      所谓框架就是把屏幕分成几个部分,如左右型框架,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

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

      这样做的一组网页有一个缺点,如果想修改左边栏目中的文字,必须修改全部网页,所以说网页更新不太方便。

      【课后小结】

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

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

      计案例

      【教学内容】

      实例讲解利用Dreamweaver进行留言本的制作。 【教学目的】

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

      【教学重点】 动态站点的制作流程。 【教学难点】

      数据库的创建、连接与显示。 【教学方式】

      讲授式、项目模块式、演示教学。 【教学参考】

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

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

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

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

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

      模板的优点:

      1、风格一致,看起来比较系统,也省去了制作同一面页的麻烦。 2、如果要修改共同的页面不必一个一个修改,只要更改应用于它们之上的模板就可以了。

      3、免除了以前没有此功能时还要常常“另存为”,一不小心就会覆盖重要档案的困扰。

      模板的优点还有它也不是一成不变的,即使是在已经使用一个模板创建文档之后,也还可以对该模板进行修改。当更新模板时,文档中的锁定区都会被更新,与模板的修改相匹配。

      请看模板实例:

      请大家思考:1、请大家找出例子中网页的相同地方和不同地方。 2、例子中风格接近的网页可以有几种方法制作? (框架?用另存为???)

      再考虑:如果用以上两种方法做的话,万一网页的共同部分要改动的话,是否每张都要改动过?

      能不能一次修改,所有网页就会自动更新呢,方法就是使用模板!

      一、如何创建模板

      步骤一:建立站点,在站点内创建一张有共性的网页(也可先建一张有共性的网页,再把网页所在目录定义为站点,由于模板依赖于站点,所以必须有站点)。

      步骤二:在DW中把刚才建立的网页“另存为模板”,如何网页中有链接,DW会询问是否更新链接,请选择“是”。

      步骤三:选中网页中个性部分(一般通过表格来选择,如选择td、tr、table等),单击菜单“插入-模板对象-可编辑区域”,并给可编辑区域起个名字。 步骤四:保存模板 二、如何运用模板新建网页

      步骤一:在DW中选择菜单“文件-新建-模板”

      步骤二:修改网页中的可编辑区域,同时我们也注意到,可编辑区域外的地方我们是无法修改的。(在模板方式下,不推荐使用代码视图直接改可编辑区外的区域)重复以上步骤,建立多张网页。 练习一: 制作模板实例。 三、修改模板

      当需要对网页的公共部分进行修改时,需要修改的模板。如果还没建站点,要先把站点建好。

      可以像修改网页一样修改模板,注意在最后保存模板时,DW会提示是否更新网页,选“是”即可。 练习二:

      修改模板(给模板加链接),观察网页是否同步更新。

      作业: 请用模板完成下面网站,并以“中华企业会员录”链接到作业本上。(素材下载)

      【课后小结】

      通过具体实例的讲解剖析,使学生更加直观的了解了动态网站的制作流程。留言本是一个典型的并且简单的动态站点案例,上手容易。

      第19、20课时VBScript概述

      【教学内容】

      讲解VBScript的基本概念及其特点。 【教学目的】

      使学生对VBScript有个初步的了解。 【教学重点】 什么是VBScript。

      【教学难点】

      如何在HTML页面中添加VBScript代码。 【教学方式】

      讲授式、项目模块式、演示教学。 【教学参考】

      1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》张锦祥主编 科学出版社。

      3、《网页编程技术与实例》谭浩强主编 人民邮电出版社。 【新课内容】 预习作业:

      1、网页中表单的作用是什么? 2、常用的表单元素有哪些?

      3、试着建一个含有“文本框、单选、复选、按钮”的简介表单 一、认识表单 1、表单概念

      所有用于收集资料的表单内容都必须放在一组统一的标记里面,这组标记叫做“表单”。其中每一个给用户填写或选择的区域叫做表单域。

      2、表单技术要点

      表单的作用是从访问WEB站点的用户那里获得信息。访问者在表单中的文本域、列表框、复选框以及单选按扭等表单对象中输入信息,然后单击“提交”按钮提交所填写的信息给处理程序。 2、表单对象:

      文本域,隐藏域,文件上传域,复选框,单选按钮组,列表和菜单,跳转菜单,文本表单按钮,图形提交按钮。 姓名 口令 性别 男 女 爱好 体育 音乐 文学 班级

      二、什么是前台、后台

      表单的作用是把来自用户的信息提交给后台服务器,如在用户注册时,把用户的姓名、密码等信息提交给服务器。含有文本框、单元框等元素的网页我们就称为表单网页,也称为前台界面,而后台程序一般用ASP、PHP、JSP等网络编程语言来设计,所以表单是实现用户与网站沟通的桥梁。 常用的表单元素有 文本框 密码框

      单选 群众 团员 党员 复选 体育 音乐 下拉 按钮

      本文来源:https://www.bwwdw.com/article/8pq.html

Top