《网页制作FrontPage》教案

1、网页制作FrontPage教案 教师：张爱平第1、2课时 网页设计概述【教学内容】讲解网页设计的相关术语及网站制作的基本流程。【教学目的】使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】网页设计中的若干术语。【教学难点】理解网页设计中的若干术语。【教学方式】讲授式、讨论式、案例分析式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、Internet 网页工场Wittime工作室 重庆出版社。3、WEB网站设计Joel Sklar著 高等教育出版社。4、HTML网页制作教程材义语编著 铁道出版社。【新课内容】1.1 WWW和URL1.1.1

2、Web的起源Web是World Wide Web的简称，一般也称之为WWW或3W1.1.2 Web的特点和结构Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议1.1.3 URLURL的完整格式协议:/主机名或IP地址：端口号/路径名/文件名1.2 IE5的使用Web浏览器是浏览Internet资源的客户端软件在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、

3、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 制作网页的基本方

4、法1.4.1制作网页的基本步骤1、确定网页的内容2、设计网页的组织结构3、资料的收集与整理4、选择网页的设计方法1.4.2制作网页时要注意的问题1、网页的标题要简洁，明确。2、在文本中要使用水平线，以分割不同部分。3、对重点段落要强调显示。4、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标），不能侵犯版权。【课后小结】通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。【作业】阐述网页制作的一般方法？ 第3、4课时 HTML的基本标志与格式标志【教学内容】讲解HTML基本标志对和格式标志。

5、【教学目的】使学生标志对与格式标志对的使用。【教学重点】格式标志的使用。【教学难点】列表标志的使用。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】2.1 HTML文档的基本结构2.1.11、双标记 语法： 内容2、单标记语法：最常用的单标记是3、标记属性语法例子4、注释语句格式例子 2.1.2 HTML文档的基本结构【课后小结】通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用列表,有序列

6、表,无序列表标志及属性。 第5、6课时HTML的文本、图片与超级链接标志【教学内容】讲解HTML标准中的文本、图片与超级链接标志【教学目的】* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。* 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图片。* 使学生掌握超级链接标志的使用。【教学重点】* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入 。【教学难点】* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义 。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业

7、出版社。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 文本修饰，文字以粗体显示。，文字显示为斜体。，显示下划线。，中心线贯穿文字。，强调文字，通常用斜体。 ，特别强调的文字，通

8、常用黑体。 ，以等宽体显示西文字符。，使文字大小相对于前面的文字增大一级。，使文字大小相对于前面的文字减小一级。，使文字成为前一个字符的上标。，使文字成为前一个字符的下标。，使文字显示为闪烁效果。2.2.6 文本修饰2.2.7 预格式化文本使用预格式化标记不再忽略在此之间的空格、制表符与回车符等元素2.2.8转义字符与特殊字符一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格2.2.9文本强制换行和不换行文本强制换行 不换行 2.2.10插入水平线使用标记属性：Width，Size，Align，Noshade，color2.2.11使用列表1、无序列表 列表条目1列表条目22、

9、有序列表 列表条目1列表条目23、定义列表列表条目1条目1的说明列表条目2条目2的说明2.3 插入图片2.3.1在网页中插入图片基本格式2.3.2图片的属性2.4 建立超级链接2.4.1指向一个目标1、建立超级链接字符串 2、为图片建立超级链接 3、链接到邮件和多媒体文件链接到邮件请与我联系2.4.2使用锚点使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。建立锚点：锚点文字使超级链接指向已定义的锚点。文字文字2.4.3新窗口和基准链接1、打开新窗口开一个新窗口2、基准链接在 与 之间设定 2.4.4图像地图图像地图的格式为：2.4.4图像地图【课后小结】本节介绍了在网页中加入

10、文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。 第7、8课时HTML表格、表单与框架标志【教学内容】讲解HTML中制作表格、表单与框架的标志。【教学目的】使学生掌握简单表格、表单与框架的制作。【教学重点】* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。* 理解表单中相应元素对应标志及属性的

11、含义。【教学方式】案例分析式、项目教学【教学参考】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）密码

12、输入区（3）单选框（4）复选框（5）隐藏区域（6）按钮2.6.3定义下拉式菜单你选修的课程： 计算机 英语 逻辑学 心理学2.6.4定义多行文字输入区域请输入你的详细介绍：文字2.7 框架窗口框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。2.7.1框架的定义2.7.2框架属性设置 2.7.3子窗口属性设置 2.7.4常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分 （3）目录和标题，分为左上、左下、右三部分（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分2.7.5不支持

13、框架的网页 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。 2.7.6内部框架【课后小结】表格在网页设计中应用广泛，熟练掌握表格的基本标志及配合使用的属性的意义，是灵活运用表格的基础。表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替。框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在框架中设置超级链接时目标框架位置的设置。表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性，是设计表单网页关键。 第9、10课时 HTML标志综合运用案例【教学内容】综合运用所学过的HTML标志书写网页。【教学目

14、的】使学生能够书写简单的HTML网页。【教学重点】使用所学的HTML标志书写网页。【教学难点】HTML的综合运用。【教学方式】案例分析式、讨论式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】1、用记事本书写HTML网页。2、利用案例进行HTML网页的综合讲解。3、要求学生按规定书写一个完整的HTNL网页。1、立体化表格立体表格一般是通过颜色对比达到立体效果的，可以使表格具有更加美丽的外观视觉。下面通过制作一个具有立体效果的，使我们更加容易地

15、掌握如何设置表格的属性，以及编辑表格的标签和查看表格的标签属性。 源码如下：it365cnit365cnit365cnit365cncnbrucecnbrucecnbrucecnbruce具体方法见书本p137页。练习一：请大家做出如下立体凸出表格： 思考：请做出如下凹进表格： 二、格式化表格（P136）执行“命令”“格式化表格”，在“格式化表格”对话框中选择你要的方案。三、圆角表格（P139）四、请完成以下网页作业：完成后请以“电脑报”链接到作业本第三周。 【课后小结】HTML是目前制作网页时必须掌握的一种语言，学好HTML语言是为以后对网页设计这门课程更深入的学习打下扎实的基础。 第11、

16、12课时Dreamweaver中简单WEB站点建立与管理【教学内容】讲解Dreamweaver的工作界面和基本操作。【教学目的】使学生掌握网页制作工具Dreamweaver的基本操作方式。【教学重点】网页制作工具Dreamweaver的界面和基本基本操作。【教学难点】掌握一个新的开发工具。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著中

17、国青年出版社。【新课内容】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用Dreamw

18、eaver创建和管理站点1、创建本地站点“站点”“新建站点”2、管理站点“站点”“定义站点”3、上传和下载文件【课后小结】Dreamweaver是一款由Macromedia公司开发的专业HTML编辑器，用于对WEB站点、WEB页面和WEB应用程序进行设计、编码和开发。无论是刚接触网页设计的初学者还是专业的WEB开发人员，Dreamweaver都在前卫的设计理念和强大的软件功能方面给予了充分可靠的支持。因此学好Dreamweaver对以后的网页设计有很大的帮助。第13、14课时 Dreamweaver中静态网页设计【教学内容】讲解利用Dreamweaver进行静态页面的制作。【教学目的】使学生掌

19、握利用Dreamweaver对页面进行文本、图象、超级链接、表格以及框架等的编辑。【教学重点】通过对工具软件Dreamweaver的操作，制作出完整的静态页面。【教学难点】了解静态网页的含义【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著中国青年出版社。【新课内容】3.2 在页面中加入文字和图像3.2.1文字的添加和处理（1）文字属性面板

20、的使用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地址。利用对象面板

21、插入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）添加文本域“插入”“表单对象”“文本域”设置

22、TextField，字符宽度，最多字符，类型（2）添加选择域 在表单中插入单选按钮。“插入”“表单对象”“单选按钮” 在表单中插入复选按键。“插入”“表单对象”“复选钮”（3）添加列表和下拉式菜单（4）添加按钮（5）添加文件域【课后小结】了解静态网页的含义，利用Dreamweaver MX 2004的强大功能制作出各色各样的页面，为以后的学习打下坚实的基础。 第15、16课时Dreamweaver中动态网页设计【教学内容】讲解利用Dreamweaver进行动态页面的制作。【教学目的】使学生掌握利用Dreamweaver作出简单的动态页面。【教学重点】理解动态页面的含义以及数据库的使用。【教学难

23、点】了解动态网页的含义。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著中国青年出版社。【新课内容】一、框架入门所谓框架就是把屏幕分成几个部分，如左右型框架，T字型框架，在框架的不同部位分别显示不同的网页，一个框架的网页，一定包括N1张网页，如左右型框架包含左右二张网页和一张总的框架页。框架是由框架集和单个框架组成的，框架集定义一组框架的

24、布局和属性，包括框架的数目、大小和位置以及在每个框架中初始显示的页面的URL。框架实例 二、创建框架练习一：做一个最简单的左右型框架网页（如网页）第一步：打开DW软件，新建一张空白网页第二步：选择“文件”“框架”或者直接单击框架面板第三步：拖动框架左边框，向右拖，把屏幕分成左右二半（一般左小右大）第四步：分别在左右二个框架内输入文字注意如何删除框架？答：将光标放在框架的边框上，当光标分为双向箭头时按住鼠标左键，将框架的边框拖出父框架或页面之外。三、保存框架练习二：保存框架，每个框架页代表一个单独的网页，所以在保存文件时必须保存各个子框架。第一步：保存左框架，鼠标移入左框架内，单击“文件”“保存

25、”，选择“保存框架”，可保存为D：lxleft.htm。第二步：保存右框架，鼠标移入右框架内，单击“文件”“保存”，选择“保存框架”，保存为D：lxright.htm。第三步：保存框架页，鼠标点击框架的边框线，即选中框架组，然后单击“文件”“保存”，保存为D：lxindex.htm。 第四步：打开总的框架页index.htm，就会自动打开相关的框架子页。四、框架属性练习三：创建刚才创建好的框架属性，按住ALT键的同时，单击某边框架页，即可以选中此框架页第一步：把左框架页名称设置为leftfm，框架边框颜色为蓝色，边界宽度为30像素第二步：把右框架页名称设置为rightfm，当框架内的内容显示不

26、下时要求有滚动条第三步：设置框架集边框设置为有，边框宽度为3，左框架列宽为180像素五、链接框架内容练习四：做一个有链接的左右型框架网页，要求单击左边的链接后，内容在右边显示。（只有已经命名的框架才能正确设置链接。）第一步：做好三个链接网页a1.htm，a2.htm，a3.htm第二步：选中左边的“第一章”链接文字，把它链接到a1.htm，并把“目标”设为右框架的名称rightfm第三步：依次设置其它，第二章链接到a2.htm，第三章链接到a3.htm，并目标设为右框架名称rightfm第四步：保存各个框架和框架页第五步：也可以选择“保存全部”来进行总的保存六、学生练习（练习下载）练习一：做一

27、个T字型框架，把它保存在d:kj文件夹中练习二：练习做书本上的实例P273图10.2练习三：建立如下所示的第一张网页，特别要注意一定要把左边栏目的链接全部设置好，再修改右边的内容后，另存为第二、第三网页。 这样做的一组网页有一个缺点，如果想修改左边栏目中的文字，必须修改全部网页，所以说网页更新不太方便。 【课后小结】了解动态网页的含义，本节详细的介绍了如何在Dreamweaver MX 2004中实现与数据库的连接。动态网页是当今的主流，学好动态网页的制作是必须的。 第17、18课时 Dreamweaver综合性网页设计案例【教学内容】实例讲解利用Dreamweaver进行留言本的制作。【教学

28、目的】使学生掌握利用Dreamweaver作出简单的动态站点。【教学重点】动态站点的制作流程。【教学难点】数据库的创建、连接与显示。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著中国青年出版社。【新课内容】1、制定网站设计方案。2、建立数据库。3、在Dreamweaver MX 2004中创建站点。4、在Dreamweaver MX 2

29、004中连接数据库。5、发表、编辑、删除留言部分制作。6、管理留言在一个网站中，往往会有好多张子页会用同一种风格来制作，此时往往用模板是最有效，并且也是最快的方法。模板实质上就是作为创建其他文档的基础文档。 模板的优点：1、风格一致，看起来比较系统，也省去了制作同一面页的麻烦。2、如果要修改共同的页面不必一个一个修改，只要更改应用于它们之上的模板就可以了。3、免除了以前没有此功能时还要常常“另存为”，一不小心就会覆盖重要档案的困扰。模板的优点还有它也不是一成不变的，即使是在已经使用一个模板创建文档之后，也还可以对该模板进行修改。当更新模板时，文档中的锁定区都会被更新，与模板的修改相匹配。请看模

30、板实例： 请大家思考：1、请大家找出例子中网页的相同地方和不同地方。 2、例子中风格接近的网页可以有几种方法制作？ (框架？用另存为？)再考虑：如果用以上两种方法做的话，万一网页的共同部分要改动的话，是否每张都要改动过？能不能一次修改，所有网页就会自动更新呢，方法就是使用模板！一、如何创建模板步骤一：建立站点，在站点内创建一张有共性的网页（也可先建一张有共性的网页，再把网页所在目录定义为站点，由于模板依赖于站点，所以必须有站点）。步骤二：在DW中把刚才建立的网页“另存为模板”，如何网页中有链接，DW会询问是否更新链接，请选择“是”。步骤三：选中网页中个性部分（一般通过表格来选择，如选择td、t

31、r、table等），单击菜单“插入模板对象可编辑区域”，并给可编辑区域起个名字。步骤四：保存模板二、如何运用模板新建网页步骤一：在DW中选择菜单“文件新建模板”步骤二：修改网页中的可编辑区域，同时我们也注意到，可编辑区域外的地方我们是无法修改的。（在模板方式下，不推荐使用代码视图直接改可编辑区外的区域）重复以上步骤，建立多张网页。练习一：制作模板实例。三、修改模板当需要对网页的公共部分进行修改时，需要修改的模板。如果还没建站点，要先把站点建好。可以像修改网页一样修改模板，注意在最后保存模板时，DW会提示是否更新网页，选“是”即可。练习二：修改模板(给模板加链接)，观察网页是否同步更新。作业：请

32、用模板完成下面网站，并以“中华企业会员录”链接到作业本上。（素材下载） 【课后小结】通过具体实例的讲解剖析，使学生更加直观的了解了动态网站的制作流程。留言本是一个典型的并且简单的动态站点案例，上手容易。 第19、20课时VBScript概述【教学内容】讲解VBScript的基本概念及其特点。【教学目的】使学生对VBScript有个初步的了解。【教学重点】什么是VBScript。 【教学难点】如何在HTML页面中添加VBScript代码。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计张锦祥主编 科学出版社。3

33、、网页编程技术与实例谭浩强主编 人民邮电出版社。【新课内容】预习作业：1、网页中表单的作用是什么？2、常用的表单元素有哪些？3、试着建一个含有“文本框、单选、复选、按钮”的简介表单 一、认识表单1、表单概念 所有用于收集资料的表单内容都必须放在一组统一的标记里面，这组标记叫做“表单”。其中每一个给用户填写或选择的区域叫做表单域。2、表单技术要点表单的作用是从访问WEB站点的用户那里获得信息。访问者在表单中的文本域、列表框、复选框以及单选按扭等表单对象中输入信息，然后单击“提交”按钮提交所填写的信息给处理程序。2、表单对象： 文本域，隐藏域，文件上传域，复选框，单选按钮组，列表和菜单，跳转菜单，

34、文本表单按钮，图形提交按钮。姓名 口令 性别 男 女 爱好 体育 音乐 文学 班级 二、什么是前台、后台表单的作用是把来自用户的信息提交给后台服务器，如在用户注册时，把用户的姓名、密码等信息提交给服务器。含有文本框、单元框等元素的网页我们就称为表单网页，也称为前台界面，而后台程序一般用ASP、PHP、JSP等网络编程语言来设计，所以表单是实现用户与网站沟通的桥梁。常用的表单元素有文本框 密码框 单选 群众 团员 党员 复选 体育 音乐 下拉 按钮 练习一:制作以上这张简介的表单网页 注意：首先要插入一个空表单，为了排版方便，可以再插入一张表格（6行2列），最后插入表单元素了解有关表单的HTML代码表单form name=form1 method=post action=a1.php./form文本框name=logi