《新建网页──丰富网站的内容》教学设计

第一篇：《新建网页──丰富网站的内容》教学设计

《新建网页──丰富网站的内容》教学设计

【教材使用】宁教厅审定 山东教育出版社出版 软件FrontPage2000

【适用年级】8年级上册

【适用单元】网页制作第2大节

【教材分析】

本节的内容分为三部分：一是新建网页；二是添加图片；三是添加背景音乐。第一部分新建网页是本章节的重点部分，使用导航栏建立网页也是本章节中的难点；第二部分网页建立好要添加文字和图片信息将其做为一节课内容；第三部分背景音乐和下一节的网页的背景合成一节课内容，这样便于学生的理解和掌握。

第一部分新建网页，也是这一节课的内容，它是在创建站点和主页之后的内容，教材中详细地介绍了使用导航栏创建网页的过程，先设计站点结构，然后再编辑网页的内容。一笔带过的是在网页视图下创建网页的方法，是编辑一个个网页，再将网页组成站点。

本章节的一个难点是使用导航栏建立网页，学生接受起来不易，但使用这种方法组织的网站有头绪，有点像网站的“结构地图”，也易于后续链接知识的学习，同时也与前一节课中的网站准备工作中的网站组织结构图是相呼应的，它是网站宏观布局的具体实施的关键一步。

使用网页视图方式建立网页，在课本中一笔带过，但是从知识的呈上启下来看，学生更易接受这个方案，缺点是网站中建立许多个网页时，若无网站的组织结构图，建立工作将陷入迷茫中，同时也对后续的超链接的学习就造成一定的困难，因此课本中不采纳这种方法建立网页。

本节课采用先简单介绍网页视图方式添加网页，后过渡到导航栏中新建网页，这种方法：一是将知识合理顺延和过渡，从学生已知入手过渡到学生的新知；二是可以将难点分散进行学习，便于学生的理解与吸收。

在创建网页时导航栏与网页的重命名必须保持一致，这是本节课一个难点也是一个重点。

【学情分析】

学生在学习“创建站点”后，对软件中的导航栏的作用没有一个直观的理解，但是对于创建站点已经有了一定的了解，而创建网页的命令与创建网站的命令是一组，可以借助学生从已有知识过渡到难理解的导航栏中，因此可以从网页视图下添加网页的方法中过渡到导航栏中添加，这样学生能很平顺地接受在导航中添加网页以及理解它的优势。

【教学目标】

1．知识目标

（1）掌握打开站点的基本方法；

（2）掌握新建网页的基本方法。

2．技能目标

通过学生探究学习过程中，掌握新建网页的不同方法。

3．情感目标：

（1）通过新建网页的学习，培养学生的对比学习能力；

（2）利用导航栏知识，培养学生的整体布局网站的综合信息素养能力。

【教学重、难点】

1．在使用导航栏建立网页时，导航栏中的命名与网页的命名一致是难点；

2．网页名称应与网页中的信息一致是重点。

【课时安排】2课时

【教学方法】对比法、任务驱动法

【课前准备】软件FrontPage2000 多媒体广播系统

【教学设计】

第一课时

在网页视图下添加网页 教学过程

教师活动

教学意图

学生活动

一、导入部分

上节课我们建立了“我的家乡”站点，大家能使用“我的电脑”或“资源管理器”找到他们吗？找到后请大家打开站点并预览自己所编辑的主页信息。

问：大家看看自己编辑的主页信息中有没有错误？有错了，该如何修改？

问：一个网站中一张网页不能够表达一个站点的所有信息，那就需要许多个网页，我如何增加网页呢？

我们这一节课就来解决这些问题。（板书课题：第2节新建网页）

（1）使学生确认自己站点所在的位置，复习上节课预览网页的知识便于后面知识的学习。

（2）通过学生的观察，发现问题，激发学生解决问题的兴趣。

（3）留给学生思考的问题，让学生带着问题学习新知。

从计算机中查找自己的站点„„

学生观察发现问题„„

学生思考„„

二、新课部分

1．打开站点

2．新建网页

3．保存网页及网页重命名

（任务一）大家看到页面状态是浏览状态，在这个状态下是不能修改网页信息的，如果想修改只能在网页的编辑状态下才行，因此大家必须启动网页的制作软件FrontPage2000。

（任务二）刚才大家也看到主页是在站点文件夹之中，因此我们要打开站点才能看到主页，并修改主页。看看软件中“文件”菜单栏中有没有“打开站点”这个命令，并动手尝试的打开自己的站点。

教师辅导„„

（任务三）大家已经打开网站，看看“文件”菜单中有没有添加网页的命令，自己动手试试给自己的站点增加两个网页“宁夏风景名胜”和“宁夏古诗文欣赏”。同时结合课本P67将相应的网页的文字内容录入到网页中。大家可以互相交流。

教师进行辅导„„

（任务四）大家刚才建立了网页，并为网页添加了文字，因此需要大家及时将自己的网页保存在网站中。大家动手实践„„ 教师进行辅导„„

广播展示命名时出现的问题„„

（1）在大家保存时应正确选择自己的站点，输入网页名称即可保存。

（2）在此过程中，有的同学未能输入网页名称，就点击保存了，出现一个现象：网页全部都是new-page_1(2，3，4)．htm的形式，多了自己也被迷糊了。出现这种情况时大家可以使用文件夹列表窗体来重新给网页命名。具体操作：选中你的网页文件，使用右键的快捷菜单完成，它的操作类似于“资源管理器”中的命令操作。一定要注意命名时不能将网页的属性．htm丢弃了，若已经丢弃，请将它加上。

（3）保存完成后，若还想给网页增加信息，一定要在文件夹列表窗体中双击网页的名称，当你看到你所双击的网页名称与编辑窗口中的名称一致时，在输入信息，完成后随时保存信息。

让学生了解在什么状态下可以修改网页。

引导学生从已知过渡到新知来学习打开站点方法，达到举一反三效果。

学生已经在新建站点中看到过新建网页，很容易接受，同时通过交流达到共同进步。

引导学生保存自己的网页。学生在动手过程中就会引出重命名操作。

将本节课的难点集中展示出来，并纠正出错的原因

学生启动制作软件„„

学生动手实践„„

学生动手实践„„

学生动手实践„„

学生改正自己错误„„

三、小结

这节课你都学会了什么？

巩固本节课知识

学生自己总结„„

第二课时 使用导航栏添加网页 教学过程

教师活动

教学意图

学生活动

一、导入部分

教师打开学生的一份网站作品进行展示„„

（将作品的本人叫起来）问：你的网站中的网页表达的什么信息？ 再问：你的网站还想需要表达什么内容？

设想：当你的网页增加的比较多时，你会发现自己的思路不一定很清晰。想解决这个问题，大家必须手绘一个网站组织结构图才能，这样也会带来许多不方便之处。还有没有能直接体现出来我们网站的组织结构图来呢？有的。可以使用导航栏来建立网页。

（板书课题：使用导航栏建立网页）。

引导学生说自己的创作意图

引出本节课的课题

学生表述自己想法„„

二、新课部分

1．导航栏的作用

2．新建网页

视图栏中“导航”按钮是一个站点创建和系统管理的显示视图。使用导航栏新建网页，先组织网站的结构，后为每个网页添加内容。这与我们第一节准备工作中组织的网站结构图就相互呼应起来，思路清晰明了。

（任务一：）大家结合课本P64完成“做一做”。

教师进行辅导„„

广播展示出现的问题„„

（1）FrontPage 2000只是当你在一个站点上工作时才会创建导航栏，独立的网页则不行。

（2）导航栏中主页是第一个添加到导航结构的网页，一般都叫做default．htm或index．htm，想进行添加新网页时，应注意网页之间网页的层次关系。父层网页是包含另一个网页的父网页，其他网页是他的下一级。导航栏可以横排或竖排。

（3）导航栏中若出现层次错误时，可以使用拖动的办法来改善他们的层次。

（4）导航栏中的命名应与双击后进入的网页名一致才行，这是本节课的难点。

（5）上节课我们已经建立的网页如何到站点中？在视图窗口点击“导航”按钮，切换到导航视图。在文件夹窗口中将文件“宁夏风景名胜．htm”和“宁夏古诗文欣赏．htm”拖动到“导航”窗口，仔细选择停放的位置，让示意图标和其他二级图标在一个线上，然后就看到这两个文件成为站点的一部分了。

引导学生了解使用导航栏的优势。

难点集中解决„„

学生实践„„

学生进行改错„„

三、练习

课本P75第1题。

巩固本节课知识

四、小结

这节课你都学会了什么？

学生自己总结„„

【教学反思】

本节课，若按课本中的思路进行，学生学完后，只会依葫芦画瓢，只知其所以然，而不知其所以不然，还是处在一种困惑中。

由此，我将这节课改成两节上，即分散难点知识，又便于学生掌握，学生在学习的过程中实践比较多，在实践过程中不断出现新的疑问，可以激发学生的解决问题的积极情绪，对普遍出现的问题可以通过广播系统来解说，师生互动比较多，教师真正起到了“引”的作用。

第二篇：网页中添加文字及图片──丰富网站的内容》教学设计

网页中添加文字及图片──丰富网站的内容》教学设计

课

件www.xiexiebang.com#TRS_AUToADD_1249890715428{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1249890715428P{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1249890715428TD{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1249890715428DIV{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1249890715428LI{mARGIN-ToP:0px;mARGIN-BoTTom:0px}/**---jSoN--{“":{”margin-top“:”0“,”margin-bottom“:”0“},”p“:{”margin-top“:”0“,”margin-bottom“:”0“},”td“:{”margin-top“:”0“,”margin-bottom“:”0“},”div“:{”margin-top“:”0“,”margin-bottom“:”0“},”li“:{”margin-top“:”0“,”margin-bottom“:”0“}}--**/DIV.myFav_1249633634593P.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman“;TEXT-ALIGN:justify}DIV.myFav_1249633634593LI.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman“;TEXT-ALIGN:justify}DIV.myFav_1249633634593DIV.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman";TEXT-ALIGN:justify}DIV.myFav_1249633634593DIV.Section1{page:Section1}DIV.myFav_1249633634593oL{mARGIN-BoTTom:0cm}DIV.myFav_1249633634593UL{mARGIN-BoTTom:0cm} 【教材使用】宁教厅审定

山东教育出版社出版软件FrontPageXX

【适用年级】8年级

【适用单元】网页制作第2大节

【教材分析】

教材中本节的内容分为三部分：一是新建网页；二是添加图片；三是添加背景音乐。第一部分新建网页是本章节的重点部分，使用导航栏建立网页也是本章节中的难点；第二部分给建立好的网页添加文字和图片信息将做为一节课的内容；第三部分背景音乐和下一节的网页的背景合成一节课内容，这样便于学生的理解和掌握。

本节是第二部分为网页添加文字及图片，它是网页中的两大基本要素。文字部分在教材中没有提及，上节添加的网页是空白的，而在实际操作过程中网页中是没有文字的，因此在这儿必须给学生时间添加文字，结合前面学习的网络搜索让学生上网搜索信息，使前后知识充分结合起来，而后才能添加图片，达到图文并茂。

【学情分析】

学生已经学会了新建网页，建立的网页是空白的，学生就有“为空白网页添加文字及图片信息”的欲望，结合因特网知识让学生为自己创建的网页添加所需的信息，添加图片的技能学生已经在word文字处理软件中学习过，因此本节课知识，学生可以自主学习。

【教学目标】

1．知识目标

（1）掌握为网页中添加文字信息的不同方法。

（2）掌握为网页中添加图片信息的方法。

2．技能目标

通过学生自主学习过程中，掌握为网页中添加信息的不同方法。

3．情感目标

（1）通过为网页添加文字信息的学习，培养学生的综合运用知识的能力。

（2）利用插入图片知识，培养学生的图文并茂整体布局网页的综合信息素养能力。

【教学重点与难点】

学习嵌入式保存素材的方法和分类管理素材的能力。

【课时安排】2课时

【教学方法】任务驱动法

【课前准备】软件FrontPageXX

多媒体广播系统

【教学设计】

第一课时

为网页添加文字信息

教学过程 教师活动 学生活动 教学意图

一、导入部分

（教师打开上节课站点中新建的网页进行广播展示……）

问：大家观察我们上节课使用导航栏添加的网页，网页中缺什么？

网页中表达信息最常用的就是文字和图片，这节课我们就来给网页添加文字和图片。

（板书：网页中添加文字和图片）

学生观察后回答：网页中缺文字、图片内容。

直接摆出新建网页后的情况，激发学生为网页添加信息。

二、给网页中添加文字的不同方式 网页中表达信息的主要还是文字。（板书

一、添加文字：）

大家来看我们主页中的文字，是大家自己录入的。（广播展示……）

（板书

．录入法：）

但是，这种方法对大家来说是比较费劲的，在我们组织网站时会准备一些电子资料，我们可以借用现有资料。

（板书

2．使用现有电子资料：）

（任务一：）大家通过“网上邻居”打开教师机的“我的家乡”的文字资料，看看你的网页中需要哪些，可以将这些文字信息放入到自己的网页里。

教师进行辅导……

教师小结方法：

（1）可以使用最基本的复制粘贴办法来解决；（2）当文档中的文字资料都需要时，可以使用“插入文件”命令来完成。

（引）在刚才，大家给网页添加了一些文字信息，可是有许多网页所需要的信息并没有，怎么办呢？

网络中有许多信息，借助网络可以搜索到自己所需要信息。

（板书

3．网络搜索法：）

（任务二：）大家可以借助网络查找自己所需要的资料，但是有的资料不一定立即就用到，因此建议大家在“文件夹列表”窗口建立一个网络资源的文件夹，可以分文字、图片等不同类，将找到的信息可以暂时放在这些文件夹中；用到的可以直接复制到网页中。

教师进行辅导……

学生观察理解……

学生实践……

回答：利用网络上网搜索

学生实践……

添加文字就直接的办法就是录入。

引导学生使用现有资料，复习复制粘贴操作。

（1）指导学生正确合理地使用网络资源，通过网络查找到信息，分类存放在资源包中。

（2）用到了才是学生最需要的，因此将第1节课准备工作中“网络资源”文件夹放在这里进行，用来收集网页的素材。

三、小结

通过这节课的学习大家都明白网页中所需文字资料如何获取了吗？都有哪些途径？ 学生自己总结……

学生对自己所学知识进行汇总。

第二课时

为网页添加图片信息

教学过程 教师活动 学生活动 教学意图

一、导入部分

（教师打开上节课站点中新建的网页进行广播展示……）

网页中有了文字，我们能不能添加一些相应的图片来烘托一下主题，使网页变得图文并茂，更具有感染力？

回答：可以。

直接导入

二、添加图片

（任务一）组成网页的第二大元素就是图片，大家结合课本P69完成主页中添加宁夏地区图的操作。

教师进行辅导……

叫一位出错的学生上来操作，其他同学给他找原因及解决的办法。

教师小结知识点：

打开图片对话框后，要使用“从计算机上选择一个文件”按钮；

保存时注意保存到“images”文件夹中，提醒学生注意书中的“小博士”，用这个办法在今后插入动画、音乐时可以建立文件夹分类保存。

未能保存在“images”文件夹中，在文件夹列表窗口中，可以将图片文件拖动到“images”文件夹中。

插入图片后感觉不合理，可以调整图片，大家可以结合课本P72的“知识窗”和“金钥匙”调整自己的网页中的图片。

大家结合老师刚才的解说，从新调整网页中的图片。

（任务三）大家为自己的网页添加了图片，若想达到图文并茂，具有感染力时，也要相应地对文字进行修饰。文字的修饰在学习文字处理软件word时已经学过了，大家试着将你的网页中的文字进行修饰，达到图文并茂，赏心悦目的结果。

教师进行指导……

学生实践……

学生观察并指导……

学生纠正错误……

学生实践……

让学生先实践，从中发现错误后再纠正学习的过程。

纠正学生的错误，可以将网页中所需的要素分类保存，培养学生举一反三的学习方法。同时要与素材文件夹进行区分。

引导学生使用已知的技能来修饰自己的网页。

三、知识总结

这节课你都学会了什么？ 学生自己总结……

【教学反思】

这部分内容使用两课时，给学生大量的时间来增加网页中文字和图片的信息，可是其中的操作大部分是先前所学知识，这里只是进行了一个综合应用，在应用的过程中学习部分知识，学生在添加网页中的内容时也培养了学生的成就感，增强了学生的自信心，也为下一节课美化网页奠定一定的基础。

调整知识：将第1节课准备工作中“网络资源”文件夹放在这里进行，学生查找资料时立即就用到了，用到了才是学生最需要的。同时在讲解分类保存网页中所需的要素时可以和网络资源文件夹的功能进行比较。这点知识学生容易混淆，进行区分是有必要的。

课

件www.xiexiebang.com

第三篇：《网页设计与网站建设》教学总结

《网页设计与网站建设》教学总结

本学期11网络1班的网络程序设计基础课程采用的是人民邮电出版社的《动态网页设计与制作——CSS+JavaScript》吴以欣 陈小宁主编。这本教材总体还是比较适合于高职学生。在实际教学中我广泛选择利用其他较适宜的教学资源，注重入门练习。作为教学的补充，我将一些资源和教师多年教学积累整理成课件发给学生。现将一个学期的教学情况总结如下：

一、老师给与学生合理的引导，更要加强自身的素质修养，提高自己的知识水准。

在整个教学过程中，在教学过程中自己还缺少更高的艺术修养和艺术创造能力，所以还要不断的学习；另外就是技术上还需要完善，也需要和有经验的老师多交流，多沟通。相信只有站在一定的高度去看整个项目的实现，会更通俗易懂也更有说服力，所以也不能说都是学生的原因，归结起来还是要提高自己的知识水平和业务素质！

二、了解学生，加强考核。

针对全体学生来说，聪明程度相当，但学习兴趣层次不同，大部分学生只愿意听后选择性的接受，而没有知识的创新利用，或者是没有下去自学，巩固知识，单一的只是听和做。有的同学，上完课后根本就直接把书丢在一边置之不理。综合学生的学习态度问题，个人认为还需要加强考核制度，从严制学，宽进严出，严肃考风！

三、教学内容心得

1.网页制作要简洁大方。网站在设计过程中以简洁大方为主，配合合理的颜色搭配和主题内容的诠释，给访问者赏心悦目的感觉；而避免过多的动画和帧的过多运用，以及不明确的导航，杂乱的颜色，没有主题的胡编乱造。

2.网站风格要统一。所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，也会对你的网站留下一个“很专业”的印象。知识运用中要大量配合合理的模板、CSS样式的运用而避免在网页中反复的字体样式重定义、颜色的胡乱运用，参差不齐给人杂乱的感觉。

3.网站布局合理。避免一些“拿来主义”，一些学生为了设计方便，拿网上流行的模版做网页，做出的网页几乎是千篇一律，没有特色，虽然完成了网页的制

作，毕竟不是出自个人之手，知识缺乏进一步巩固，且让浏览者产生厌倦。另外导航清晰化，能引领浏览者阅读网页，思路一定要清晰，避免交叉链接。

4.网站容量要小。虽然网页更加美观可以吸引浏览者，但是图片，动画容量大会影响浏览速度，所以一定要注意网络容量问题。图片尽量压缩，多采用单一色，或者简单的颜色；动画要尽量简洁实用，用最少的帧做出最漂亮实用的动画，给网页增色。

但是总体来说，通过整个学期网页制作的学习，学生已经了解了网页制作所需要的基本技术，也掌握了网页制作的基本技能。但由于时间紧迫，知识点多，一些重点难点问题还需要勤加练习，比如：静态网页中的布局和CSS 的定义；动态网页中对象的综合运用等等。当然也存在着遗憾，不少学生反映，学习爱好更多的是动画的制作即 Flash的学习，而我们只是笼统的讲解，不能完全满足学生的求知欲！当然针对网页制作来说，还需要加强学生的配色观念以及审美观的培养，以及动态网页的实现技术的把握，在很多方面还需要老师和学生们进一步配合，共同学习和实战，以达到知识运用的一定高度！

第四篇：网页设计与网站建设

《网页设计与网站建设》实验教学大纲

课程编号070105007

学时学分：总学时：64总学分：4实验学时：

32适用对象：计算机科学与技术及相关本科专业

课程属性：专业方向课

实验属性：非独立设课

一、课程的性质与任务

随着Internet的普及，网页已经成为人们信息发布及获取、思想交流和商务往来最重要的途径，网页制作已成为当今社会上一种比较热门的技术，本课程突出实用技术和应用技能，是计算机专业学生的一门必选课，同时又可作为相关专业学生的选修课。

网页设计课程是学生在学习了高级程序设计语言、数据库原理及应用等课程的基础上开设的一门实用性较强的课程，实验课的任务是通过实验加深对理论知识的理解，基本掌握WEB应用的规划、设计和动态网页制作中对于内容的动态显示与更新技术，培养学生的动手能力和设计能力。

二、实验的目的与基本要求

实验目的：通过实验让学生掌握网站的配置方式和网页设计的基本方法。

基本要求：

（1）掌握页面的设计与布局的基本方法；

（2）掌握JS脚本语言的使用方法；

（3）掌握asp.net控件（包括HTML控件与服务器端控件）的使用方法。

三、实验考核方式及办法

实验成绩根据学生的实验完成情况、实验纪律、实验报告进行综合评定，给出优（90-100）、良（70-89）、及格（60-69）、不及格（60以下）。实验成绩占本课程总成绩的20%，对缺实验成绩或不及格者，《网页设计与网站建设》课程不予通过。

四、实验项目一览表

网页制作实验项目一览表

序 号2 3 4

5实验项目 名称

div布局 css层叠样式单

JS脚本 asp.net控件 ado.net数据库连接

实验 类型

验证性 设计性 设计性 设计性 设计性

实验 要求

必做 必做 必做 必做 必做

适用 专业

理工类 理工类 理工类 理工类 理工类

学 时6 6 6 8

五、实验项目的具体内容：

实验一div布局

1．本次实验的目的和要求

掌握网页设计的DIV布局方式，能够使用DIV进行层布局，认真撰写实验报告，严格遵守实验室规章制度。

2．实验内容或原理

掌握dream weaver软件的基本功能，熟悉dream weaver的工具箱,使用DIV做层布局。

3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weaver软件，搭建好asp.net的开发环境。

4．实验步骤

（1）打开dream weaver软件；（2）使用div布局设计网页；（3）div的布局设计与修改。

5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。

6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。

7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验二css层叠样式单

1．本次实验的目的和要求

通过dream weaver软件的使用，掌握使用css层叠样式单做布局样式控制的方法，要求认真撰写实验报告，严格遵守实验室规章制度。2．实验内容或原理

通过dream weaver软件的使用，使用css层叠样式单做布局样式控制。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weaver软件，建好asp.net的开发环境。4．实验步骤

（1）打开dream weave软件。

（2）用css层层叠样式单做布局样式控制。（3）css层叠样式单编写与调用。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验三JS脚本

1．本次实验的目的和要求

掌握JS脚本的基本用法、变量、函数、DOM文档对象的操作。要求认真撰写实验报告，严格遵守实验室规章制度。2．实验内容或原理

JS脚本的基本用法、变量、函数、DOM文档对象的操作。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weave软件。4．实验步骤

（1）打开dream weave软件。

（2）新建JS文件，编写脚本程序实现对JS脚本的变量、函数、DOM文档对象的操作。

（3）外部调用JS文件。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验四 asp.net控件

1．本次实验的目的和要求

掌握asp.net控件（包括HTML控件与服务器端控件）的使用方法。实验后要求认真撰写实验报告，实验过程中严格遵守实验室规章制度。2．实验内容或原理

运用所学知识，用HTML控件与服务器端控件进行编程，实现简单功能。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有asp.net开发平台。4．实验步骤

（1）打开asp.net开发平台。（2）新建空白页面或者空站点。

（3）用HTML控件与服务器端控件进行编程并调试。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

实验五ado.net数据库连接

1．本次实验的目的和要求

掌握ado.net数据库连接的基本概念、ADO.NET对象模型、SqlConnection对象。

2．实验内容或原理

建立ado.net数据库连接，ADO.NET对象模型、SqlConnection对象。3．需用的仪器或试剂等

多媒体计算机，操作系统Windows 2000/XP以上，并安装有asp.net开发平台。4．实验步骤

（1）打开asp.net开发平台。（2）建立ado.net数据库连接。

（3）通过SqlCommand对象提供的方法传递对数据库操作的命令，并返回命令执行的结果。5．教学方式

学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求

实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求

实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。

六、实验教材及主要参考资料

翁健红编著，基于C#的ASP.NET程序设计(第2版)，机械工业出版社

七、教改说明及其他

在实验教学过程中可以结合优秀网站分析、优秀作业点评、作业中普遍存在的主要问题及改正方法的分析等方法相互穿插结合进行教学。

第五篇：网页设计教学与实验内容7

教课程名称：网页设计与制作

学七

教学题目：Photoshop图层的应用 讲授内容：

 图层的概念  图层的基本操作。一．图层的概念

图层是对图像进行各种合成效果的重要途径。

不同图层中的图像可以进行独立操作，更改图层的顺序和属性可以改变图像的合成效果。

▪ ▪

▪ ▪ 背景图层：默认为锁定，未解锁不允许更改。

调整图层：调整图层中的色彩调整对其下方的所有图层产生作用。填充图层：纯色填充、渐变填充和图案填充。图层样式：投影、发光、浮雕等效果。

二．新建图层

1．单击“图层”面板的新建按钮创建新图层。2．复制图层可产生新图层。3．输入文字时可生成新图层。三．复制图层

将需复制的图层拖至新建图层按钮上，形成图层的“副本”。四．删除图层

选择需删除的图层，单击“删除图层”按钮，或将图层拖至“删除图层”按钮。五．合并图层

向下合并、合并可见图层、拼合图层。六．调整图层顺序

直接拖动图层或选择“图层/排列”命令。七．链接图层

固定当前图层和链接图层间的相对位置，链接后视为一个整体，可进行移动、缩放、旋转、色彩调整和合并等操作。

案例文件：讲授案例彩色圆点.psd 选择需要链接的多个图层（注：使用Ctrl键），单击“链接图层”按钮。八．锁定图层

防止图层被误操作，可将图层锁定。“锁定透明像素”、“锁定图像像素”、“锁定位置”、“锁定全部”。九．对齐和分布图层

选择多个图层，在工作区顶端“选项”面板中使用对齐和分布图层按钮。案例文件：讲授案例彩色圆点.psd 十．图层属性

图层名称、不透明度、显示隐藏。

十一．应用举例——背景特效制作（参照“讲授案例背景特效.psd”）

1.新建800×600 px的黑色画布。

2.选择20px的黄色（#fdd000）画笔工具，调整为硬度100%、间距150%的虚线。3.新建“图层1”，按住Shift绘制长短不

一、疏密有致的垂直虚线。4.新建“图层2”，改变画笔颜色为绿色（#218f49），画笔直径为9px，按步骤3，随意绘制另一色彩的垂直虚线。

5.新建“图层3”，改变画笔颜色及画笔直径，按步骤3，随意绘制另一色彩的垂直虚线。

6.选择直排文字工具，输入“Effect Design”。

7.复制文字图层多份，分别改变各图层文字的大小、不透明度以及位置。8.合并所有图层，保存于“实验素材”文件夹，命名“我的背景特效.jpg”。十二．案例操作要点总结：

画笔色彩、间距、直径；直线；图层自由变换；图层不透明度。

实验内容

一．根据教学案例的说明，完成“背景特效”。

二．根据“实验素材水晶按钮.psd”，完成水晶按钮的特效。制作过程如下：

1.新建200×80像素，分辨率72，白色背景的画布。2.新建“图层1”，前景色设置为“绿色”（#45b035）。

3.选择圆角矩形工具，属性设置为“填充像素”，半径40像素，在图层1中绘制圆角矩形。4.设置图层1的“图层样式”，选择“投影”，90度，不透明度40%，距离2像素。选择“内阴影”，不透明度80%，距离13像素，大小21像素。5.选择圆角矩形工具，属性设置为“路径”，半径80像素。6.新建“图层2”，在图层2上绘制圆角矩形路径。

7.打开“路径”面板，单击“将路径作为选区载入”按钮。

8.设置前景色为白色，选择渐变工具，属性设置渐变样式为“前景到透明”和“线性渐变”，在选区中从上到下绘制渐变色。9.按Ctrl+D取消选区，选择“图层1”，按Ctrl键同时单击图层面板中“图层1”的缩略图，将图层1的选区载入。

10.选择矩形选框工具，单击“与选区交叉”属性按钮，在“图层1”中绘制选区，使选区交叉后仅保留圆角矩形选框的下1/4部分。

11.使用“选择/羽化…”命令，将交叉后的选区羽化，羽化值为5像素。

12.选择“图像/调整/色阶…”命令，在对话框中拖动滑块，使羽化后的选区内容变亮。之后取消选区。

13.选择横排文字工具，输入“确定”文本，并调整文本至按钮中央，设置文本的“图层样式”为“投影”。此时效果已完成。

14.删除“路径”面板中的路径。合并图层，保存为jpg格式的图像，命名为“水晶按钮.jpg”。