网页 模板 教案（共7篇）.docx

《网页 模板 教案（共7篇）.docx》由会员分享，可在线阅读，更多相关《网页 模板 教案（共7篇）.docx（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页 模板 教案（共7篇）篇：网页教案DW安装应用在学网页创建中，有一款非常重要的软件叫软件，它件全称：reamweaver，被称为网页三剑客之一软件学习内容：.软件下载安装.创建文档和样式表并将二者关联起来.软件的应用.文档的创建.打开软件.如果想创建一个文档，只要点击“新建”下面的，这个就完成了一个文档的创建。.在当前页面点击“代码”，就可以看到我们新建一个文档的时候，包括“声明”、“标签”、“根元素”还有标签及里面的和第2篇：网页教案3第二章：一简单的网页（5节，含上操作课）一、表格的处理1、表格的宽度原则：在任何一台电脑上不应出现水平滚动条（垂直滚动条则允许），760。2、表格的对齐方

2、式：隐含表格的对齐方式应设为：居中对齐3、表格边框的粗细：隐含表格（边框的值为0）4、表格相应单元格“自动扩张”的解决二、水平线的设置1、利用标签Align:对齐方式Center:居中Right:右对齐left:左对齐color:水平线的颜色width：水平线的宽度（即线有多长）size：水平线的厚度（即线有多粗）noshade：是否有阴影2、利用Photoshop制作水平线单的水平线（垂直线）混色水平线（垂直线）三、文字的输入及编辑1、空格的输入2、换行1）硬换行：Enter（前后两个段落）2)软换行：Shift+Enter（前后为一个段落）四、图片与文字混排1、加载图片2、文字输入项目符号

3、和编号3、图片和文字的排列方式五、波浪线的制作六、加载日期（不会自动更新，仅是最近保存网页的系统日期）七、给文字增加滚动条1、层的应用2、层与表格的混合应用注意：1）先加载表格2）向表格中插入层，调整层的大小（也就是文本要显示的区域）3）将层的溢出属性设置为：AutoPosition:relative(相对定位)Left:0pxTop:0px八、利用Photoshop处理图片1、抓取图片2、裁切图片3、在图片上添加文字4、保存图片九、设置页面属性上机实验一、实验题目：制作一个简单的网页二、实验目的：熟悉水平线的制作方法、体会表格在网页布局中的作用，当多个元素被加载在页面中时如何排版。三、实验要

4、求：1、利用层将文本区域增加滚动条2、设置水平线3、对图片和文字进行排版4、增加系统日期三、实验步骤（请写出在网页中对文本区域设置滚动条时的操作步骤）第3篇：网页教案2注意：做为一个优秀的网站工作者及维护者应该有很强的逻辑思维能力（即所有的文件都放在什么位置自己心里要有谱，管理维护起来能够得心应手），不能让打开你网站的用户感到“乱的一塌糊涂”。第一章：站点的管理及文本的应用（15节，含上机操作课）一、站点的操作1、新建站点（a）：新建一个网站，所有资源手动放置在站点所对应的文件夹（或者子文件夹）下面。2、新建站点（b）：网站已事先做好，新建一个站点是为了维护网站的方便，即修改网页内容的方便。3

5、、删除站点：站点所对应的主文件夹及里面的资源依然存在。4、编辑站点：若改变站点所对应的路径，则文件夹里面的资源将丢失。二、为什么要引入“站点”的概念1、管理维护的方便2、解决文件调用时绝对路径（站点根目录）和相对路径（文档）的问题3、一般情况下，站点与网站的主文件夹是一一对应的，不能出现冗余的情况。三、建立站点时应注意1、站点名称、网站对应的主文件夹及主文件夹下所对应的所有资源的名称一律不能用汉字命名2、本地根文件夹书写时避免发生以下错误：1）D;toyato2)D:/toyato3)D:/toyato4)D:toyato(不要留有空格)5）D：toyato3、能够正确区分站点名称与本地根文件

6、夹（网站所对应的主文件夹）的异同4、切忌将所有的资源全部放在根文件夹下，合理利用子文件夹5、文件夹的层次不要太深，一般合理就行四、文本字体的输入及属性的设置1、文本的输入2、空格的输入3、标点符号的输入4、如何将文本类型设置为特殊字体（操作系统中默认没有的字体）五、将文本设置为动态文本1、将文本放置在和之间2、中参数的设置及输入方法3、中参数的意义1）behavior：滚动方式Alternate：左右或者上下交替滚动Scroll：循环滚动Slide：滚动一次到达边界后静止2）bgcolor：滚动区域的背景颜色3）height、width：滚动区域高度及宽度4）direction：文本的滚动方向

7、up：向上滚动down：向下滚动left：向左滚动right：向右滚动5）onClick(单击)、onDblClick（双击）、onMouseOut（鼠标移开）、onMouseOver（鼠标经过）时文本的运动状态例如：onMouseOut=this.stop()onMouseOver=this.start()说明：this.stop()：当前的对象停止运动this.start()：当前的对象开始运动6）scrollamount：设定活动字幕的滚动速度，单位为像素7）scrolldelay：设定活动字幕两次之间的延迟时间，单位为毫秒，值大了会有一步一停的效果。8）loop：循环滚动的次数若值为-

8、1，无限循环注意：N(n=o)，循环n次后停止滚动，若n为小数，则自动取整，为去掉小数点后的整数上机实验一、实验题目：1、熟悉站点的常规操作2、文本的输入及属性设置二、实验要求：1、建立一个站点，并将所有文件放在站点对应的文件夹下2、建立一个网页，向其中输入文本3、对文本的属性进行设置4、将文本设置为滚动文本，当鼠标经过文本时停止滚动，鼠标移开文本时开始滚动。三、实验步骤（请写出在对文本进行相关设置后，“代码视图”中关于文字修饰的相应代码）第4篇：网页教案1网页制作-序言(理论课：1节)一、常用网页制作工具1、FontPage2000（Office办公软件）2、DreamweaverMX200

9、4二、美化网页的工具1、Flash动画（动画制作工具）2、PhotoShop(图像处理工具)3、Premiere(非线性视频处理工具，音乐和视频剪辑工具)三、网页类型1、静态网页2、动态网页四、常用概念1、网页、网站2、站点、文件夹3、客户端、服务器端五、DreamweaverMX2004启动1、桌面2、开始按钮3、我的电脑六、DreamweaverMX2004工作界面1、标题栏2、菜单栏3、常用快捷钮4、视图类型5、编辑区6、面板组七、建立站点的方法注意：1、自己建立网站所用到的文件（网页、图片、声音、动画、视频等）必须放在站点所对应的文件夹下2、站点与文件夹的名字可相同，也可不同3、网页的

10、测试方法实验实验题目：1、熟悉DreamweaverMX2004的工作界面2、建立站点（包含网页、图像、动画及文件夹）第5篇：网页制作教案第一节制作简单的网页（一）对象分析学生在学习本内容前，已经学习了利用Word制作简单的网页，并且初步掌握了制作网页的一般流程及基本操作，具有进一步学习的能力。（二）教学目标1、了解Frontpage的界面组成及基本功能。2、掌握在Frontpage中编辑文字、插入图像的方法。3、掌握在Frontpage中设置电子邮件超链接的方法。4、培养学生在获取信息的能力，使学生学会利用计算机和网络搜集与准备网页素材。5、培养学生的知识迁移能力。（三）教学重点利用Fron

11、tpage制作简单的网页（四）教学方法和手段教学方法：以学生自学为主，教师辅导为辅。教学手段：多媒体网络教学。（五）教学过程1、创设情境，导入新课：展示几幅优秀的网页作品，激发学生学习专业网页制作软件的愿望。Frontpager功能主要体现在：1、网页编辑功能。2、网站管理功能。一、启动Frontpagei.ii.启动FrontpageFrontpage窗口组成二、用Frontpage制作网页1、输入文字2、设置字体、字号3、插入剪贴画4、创建电子邮件超链接三、保存网页四、预览网页反馈操作情况情况第二节插入表格（一）教学目标了解Frontpage中使用表格的作用。掌握在Frontpage中插入

12、表格的方法。能熟练在表格中输入文字、插入图片。（二）教学重点在Frontpage中利用表格组织网页结构。（三）教学过程导入新课，表格是网页中经常使用的一种形式，表格里不仅可以存放文字、图像等数据，还可以作为组织网页内容的框架，使网页整齐、美观。新课讲授：1、插入空表格2、在表格中插入图片3、设置图片属性4、输入文字5、设置表格属性6、插入表格标题7、保存网页、预览网页本课第三节创建表单（一）教学目标了解表单的功能。掌握在Frontpage中创建表单的方法。掌握在Frontpage中插入表单域的方法。（二）教学重点表单网页的结果处理。（三）教学过程复习1、如何制作图文并茂的网页？2、表格在网页中

13、的主要作用？3、在网页中插入表格有几种方法？导入新课、创设情境展示几幅含有表单域的网页作品，例如调查表、申请表、提问：表单与表格的异同点？讲授新课一、利用表单网页向导创建表单1、建立表单2、修改表单3、处理表单结果4、利用表单确认模板制作表单确认页面二、制作网页背景反馈操作情况本课总结课后任务：利用菜单栏中的命令在网页中插入表单域。第四节利用框架制作首页（一）教学目标了解框架的功能掌握在Frontpage中使用框架的方法。掌握在Frontpage中建立超链接的方法。（二）教学重点利用框架制作首页（三）教学过程复习：1、如何制作表单页？2、表单的主要作用？导入新课、创设情境：展示模范的网页作品，

14、激发学生学习的兴趣。讲授新课：一、利用框架制作首页1、新建框架网页2、设置右框中的初始网页3、保存网页4、建立左框中的网页二、建立超链接二、制作网页背景保存网页、游览网页反馈操作情况本课总结课后任务：练习其他几种超链接方式。宛善网页。第五节站点管理（一）教学目标了解站点的基本知识。掌握利用Frontpage建立站点的方法。掌握向站点中导入网页的方法。（二）教学重点导入超链接（三）教学过程复习：导入新课、创设情境：Frontpage不仅具有强大的网页编辑功能，而且具有强大的管理站点的功能。讲授新课：一、建立站点二、导入网页三、导入超链接本课总结第六节发布站点（一）教学目标了解发布站点的一般流程（

15、二）教学重点把站点发布到因特网上是本节的重点。（三）教学过程复习：导入新课、创设情境：展示因特网上的优秀个人网站。讲授新课：一、把站点发布到本机二、测试网站的表单功能三、把网站发布到因特网上（介绍）本课总结第6篇：网页制作教案网页制作与设计教案第一讲网页设计概述.31.1WWW和URL.31.2IE5的使用.31.3网页中所使用的技术.41.4制作网页的基本方法.4第二讲HTML的基本标志与格式标志.42.1HTML文档的基本结构.5第三讲HTML的文本、图片与超级链接标志.52.2插入文字.62.3插入图片.82.4建立超级链接.8第四讲HTML表格、表单与框架标志.92.5插入表格.92.

16、6表单的应用.102.7框架窗口.10第五讲HTML标志综合运用案例.11第六讲DREAMWEAVER中简单WEB站点建立与管理.123.1DREAMWEAVER概述.12第七讲DREAMWEAVER中静态网页设计.133.2在页面中加入文字和图像.143.3超级链接的运用.143.4.表格的应用.143.5.在网页中创建表单.15第八讲DREAMWEAVER中动态网页设计.15第九讲DREAMWEAVER综合性网页设计案例.16第十讲VBSCRIPT概述.174.1VBSCRIPT语言简介.17第十一讲VBSCRIPT的基本元素与输入输出.184.2.基本数据类型.184.2.表达式和运算符

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

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

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

20、标志及属性。第三讲HTML的文本、图片与超级链接标志【教学内容】讲解HTML标准中的文本、图片与超级链接标志【教学目的】*使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。.，强调文字，通常用斜体。.，特别强调的文字，通常用黑体。.，以等宽体显示西文字符。.，使文字大小相对于前面的文字增大一级。.，使文字大小相对于前面的文字减小一级。.，使文字成为前一个字符的上标。.，使文字成为前一个字符的下标。.，使文字显示为闪烁效果。2.2.6文本修饰2.2.7预格式化文本使用预格式化标记不再忽略在此之间的空格、制表符与回车符等元素2.2.8转义字符与特殊字符一般转义符都是以“&”开始，以“；”结束

21、，一个转义符之间不能有空格2.2.9文本强制换行和不换行文本强制换行不换行2.2.10插入水平线使用标记属性：Width，Size，Align，Noshade，color2.2.11使用列表1、无序列表列表条目1列表条目2.2、有序列表列表条目1列表条目2.3、定义列表列表条目1条目1的说明列表条目2条目2的说明.2.4.4图像地图【课后小结】本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。第四讲HTML表格、表单与框架标志【教学内容】讲解HTM

22、L中制作表格、表单与框架的标志。【教学目的】使学生掌握简单表格、表单与框架的制作。【教学重点】*表格中单元格的合并以及表格嵌套和叠加操作。*框架的嵌套使用。*表单元素标志与属性。【教学难点】*理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。*理解框架属性name、target的意义。*理解表单中相应元素对应标志及属性的含义。【教学方式】案例分析式、项目教学【教学参考】1、网页设计与制作杨尚森曲宏山贾文峰等著电子工业出版社。2、WEB网站设计JoelSklar著高等教育出版社。3、HTML网页制作教程材义语编著铁道出版社。【新课内容】2.5插入表格2.5.1在网页中插

23、入表格表格的基本构成元素：表头，单元格，列，行第一行第一列第一行第二列第二行第一列第二行第二列FrameSpacing=2“BorderColor=#008000“2.7.3子窗口属性设置2.7.4常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分（3）目录和标题，分为左上、左下、右三部分（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分2.7.5不支持框架的网页很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。第7篇：网页制作教案信息技术第三册新课程标准教案制作第一个网页(网页诞生了)教学目的1通过浏览几个精彩

24、网页，激发学生制作网页的学习兴趣。2熟练掌握启动Frontpage2000，熟悉Frontpage2000文件菜单和常用工具的使用方法，新建“只有一个网页的站点”的操作步骤，从中认识Frontpage2000的主界面，理解创建网站的意义3网页的基本步骤，了解创建网页的过程学会在网页中输入文字、编辑文字、插入图片的方法，培养学生搜集、处理信息的能力。4作网页，培养学生学习制作网页的兴趣教学重点创建网站的过程，制作、编辑网页的基本方法。Frontpage2000的窗口组成，教学难点保存网页文件的方法，创建网站的意义教法设计演示、练习、讲授、启发引导、任务驱动导入新课在因特网上，我们可以用IE浏览器

25、获取万维网中各种有价值的信息。同时看到许多组织机构甚至个人都在万维网上拥有自己的网页。让学生打开“网上邻居”的“网页”文件夹，浏览从网上下载的几个精彩网页。你们有没有想过自己制作一个网页呢?把自己想要表述的内容，自己喜欢的作文、图片通过网页展示给同学或更多的朋友观看、欣赏、浏览。讲授新课制作第一个网页网页制作不是一件简单的事情，而是按一定的顺序一步步进行的。请同学们回忆制作网页前应作哪些准备工作?现在开始创建网页我们选用功能强大，操作简单的工具Frontpage2000来制作。一启动Frontpage2000进入到Frontpage2000界面后，比比看，这个软件与以前学过的Word2000与

26、Excel2000有什么相同与不同之处呢?(展示两软件界面的图片)相同之处是：窗口相似，都有常见的标题栏、菜单栏和工具栏。不同的是：多了一个如教材的图222所示：1编辑模式标签卡2视图框。二建立只有一个网页的站点为什么不新建一个网页，而要新建一个站点呢?新建FrontPage2000中“个人站点”来启发引导一般来讲，网页文件总是存放在特定的站点中便于管理。因此，第一次制作网页之前需建立一个存放网页文件的专用站点。教材P76试试看对于初学者，通常选用“只有一个网页的站点”，今后根据需要可以向网站中添加新的网页。看书P76页图2-2-6，仔细观察文件夹列表中唯一的一个网页名称是什么?(它是什么文件

27、?)indexhtm被命名为主页，即进入网站时看到的第一个网页。三在主页面编辑模式下插入文字，插入图片。我们知道文字，图片，动画是网页组成的基本元素。教案设计：陡埠中学彭荣兵信息技术第三册新课程标准教案今天我们就在空白的主页中加入文字和图片，制作一个简单的网页。打开主页文件，在右边主页页面编辑窗，中完成如下任务：1将准备好的介绍班集体的文字(主题和正文)插入(复制，粘贴)到页面中。2从计算机E盘里找到存储的“集体照”图片插入到网页中。复习WORD中学过的文字编辑、排版，插入图片的方法。问题：学生插入图片后将其移动到合适的位置及调整图片大小1老师引导，讲解；2学生演示；3学生相互讨论。四预览网页

28、编辑工作完成后就能观看制作的效果了可以保存之后在IB浏览器中观看，也可以直接通过预览模式标签卡预览、浏览请同学们参考教材的图示切换“预览”标签卡，预览制作的网页。评选出网页制作的“速度奖”、“设计奖”、“美观奖”。五、保存制作的网页网页制作完成，需要将它保存下来请同学们按照教材P78页上的操作步骤将网页文件分别存放在images和_private文件夹中。今天用网页制作工具Frontpage2000创建了一个只有一个网页的站点，在主页中加入了文字和图片，制作了一个简单的网页这只是网页制作的第一步，精彩的网页还要不断地加工、美化和修饰，例如：配上美丽的背景，加上好看的花边和配上动听的音乐，使之变得更完美。本着以学生为主体的原则，我在本课的教学中设计先让学生浏览网上下载的精彩网页，借以激发他们学习制作网页的兴趣，然后从启动Frontpage2000开始，直至网页制作完成，老师只是一步步的启发引导，起着主导的作用，大部分时间都是学生自己动手动脑操作，整堂课课堂气氛活跃，收到了较好的教学效果。