通用教学网站的设计

通用教学网站的设计（通用5篇）

通用教学网站的设计 篇1

1 系统设计

1.1 设计原则

该精品课程网站系统主要依据国家对精品课程网站的建设要求进行设计, 是基于web的网络应用系统, 采用三层浏览器/服务器 (B/S) 的结构, 在设计时至少应该遵循网络系统软件设计的安全性原则、适应性 (兼容性) 原则、实用性原则以及开放性原则。

1.2 系统结构设计

按照B/S模式的特点, 我们首先将整个系统划分成显示层、逻辑层和数据层。系统的三层结构如下图1-1所示:

1.3 系统模块设计

在此基础上, 考虑到系统在实现时的高效性, 以及今后在使用中的安全性、扩展性和易维护性, 按照系统的功能需求, 我们又再次细化分为多个子模块, 各子模块及其具体功能如下:

1.3.1 用户管理模块

此模块主要是包含对用户的信息进行注册、修改和删除等管理功能, 同时还能够在用户在登录时对其身份进行验证, 并根据不同的身份赋予其不同的访问或管理权限。就本系统而言, 主要有四种不同身份用户, 分别是系统管理员、本校老师、本校学生、以及游客, 他们各自的权限大致如下:

1) 游客只能浏览课程相关的介绍和课程资源, 但无法下载, 也无法使用系统的如互动交流, 在线测试, 讨论发言等功能;

2) 学生除了可以浏览、查询和下载所有的课程资源外, 还能够使用系统提供的所有的在线学习、交流和评价的功能;

3) 教师在具备学生功能的基础上, 还被赋予了某一门课程资源的管理功能以及对该门课留言和评价的管理等功能;

4) 系统管理员为超级管理员具备该系统的所有功能。

1.3.2 栏目管理模块

课程栏目管理模块主要实现对精品课程网站的栏目和相关教学资源的建设和管理功能。包括对课程描述、课程特色、课程简介、电子教案、教学计划、教学大纲、教学录像、教材建设、实验指导等课程相关栏目及内容的添加、修改、删除等操作, 并通过后台设置, 按需求生成动态栏目菜单, 该模块同时还支持对课程资源进行批量导入、分类、维护等快捷操作, 使得在课程网站的内容和课程资源的建设上更加方便可靠。

1.3.3 界面管理模块

由于不同课程对于网站界面的需求是不同的, 为了实现快速美观的为网站“换装”, 此精品课程网站系统选择套用模板的方式对网站外观进行统一设置和管理, 由专业人员和任课教师课程充分沟通后, 按需求进行模板设计, 而任课教师在后台方便的进行网站皮肤和网站布局模式的选择和切换, 可以充分满足各课程对于界面设计不同的要求。

1.3.4 课程浏览模块

本模块的功能是将精品课程中所有相关的内容和信息展示出来, 供用户浏览, 内容可以是多种形式的, 如文本、图片、视频、表格、动画等等, 考虑到浏览的方便性和查询的快捷性, 我们将用树状导航结合分页的方式来组织和编排内容, 并呈现给浏览者, 这种方式显示的内容层次结构清晰, 资源定位一目了然。

1.3.5 消息发布模块

教师可以通过该模块可以布置课程作业, 发布考试信息、教师调课通知, 而学生可以通过该功能发布活动通知 (需审核) 等, 管理员与教师具备对这些信息进行审核、修改和删除的功能。

1.3.6 交互交流模块

交互交流模块主要为教师和学生提供实时的和非实时的在线交互功能, 如论坛、留言板、聊天室等等, 交流时不但可以一对一, 也可以一对多, 多对多, 交流可以是公开的, 也可以是私下的, 不同形式的交互方式形成了网上立体互动空间, 可以尽可能的满足在学习交流中的各种需求。

1.3.7 在线自测模块

在线自测模块主要为学生提供网上自行测试的功能, 并能实时的统计出学生的客观题成绩, 题库可由任课教师自行收集上传, 也可以统一购买后批量导入, 学生能够根据自身情况, 设置个性化的测试范围和测试题型, 测试可以是计时的也可以是练习性质的, 且具有记忆功能, 一次做不完的, 下次可以选择接着上次的练习继续做。

1.4 系统数据库设计

数据库是精品课程网站系统的重中之重, 在本系统中, 我们选择了微软公司的大型数据库管理系统SQLServer2005, 相比以前的版本, 它具有更高的安全性, 以及更加易于使用和维护, 而且支持专门的管理员链接, 即使因为某些原因, 该服务器被锁定了或不能使用时, 管理员也能通过这个链接, 接通正在运行的服务器并通过诊断功能, 即使发现问题并找到解决的方法。

精品课程网站上的所有课程资源和和数据在数据库中统一存放和组织, 而数据库主要是由精品课程资源表、用户及用户分组信息表、管理员表、精品课程信息表、网站模板表、课程题库表等多个数据表组成, 如何设计这些数据表的数据关联逻辑和字段结构便是数据库设计的关键。在本系统的数据库中, 我们首先采用了E-R图的方法来设计数据库结构, 再通过创建多个数据表的模式来创建数据库服务器所支持实际数据模型, 完成精品课程网站数据库的逻辑设计。

下图1-2展示了该精品课程网站系统中的课程信息表设计方案:

2 系统实现

该精品课程网站生成系统是典型的浏览器/服务器 (B/S) 模式, 使用windows 2003sever和Microsoft SQLServer2005作为服务器操作系统及数据库系统, 用Visual Studio 2008基于ASP.NET平台进行开发。

考虑到系统的复杂性和今后扩展的方便性以及易维护性, 我们在实现该精品课程网站生成系统时, 将整个系统按功能划分成多个的小模块, 首先分别实现各个功能模块, 如精品课程网站系统中有一个用户管理模块, 该模块主要是提供对网站的系统管理员、本校老师、本校学生、以及游客这四类用户进行用户信息管理和权限管理的功能, 其中用户信息管理主要包括注册、修改、删除、以及批量导入导出等, 而权限管理主要实现不同类别用户访问和管理权限的设置和修改, 该模块同时还要实现对登录用户身份进行验证并根据身份赋予其相对应的访问或管理权限的功能。在实际开发时我们分别对四类身份设计了相对应的程序, 并把他们封装起来形成组件, 这些组件它们各自包括自己类别的属性、管理接口、管理类、实体接口、实体类等。最后将分别实现的各个小模块通过程序和接口有机的整合起来从而实现了整个精品课程系统。

3 小结

精品课程网站是网络精品课程资源共享以及互动教学的重要平台。本文阐述了基于.NET平台和B/S三层结构的通用的精品课程网站系统的设计原则、系统结构、系统模块以及系统数据库的设计, 并就如何具体实现提出了建议。

摘要：本文从精品课程建设的实际需求出发, 对基于.NET平台, 利用ASP.NET和三层B/S架构技术来设计和实现一个通用的精品课程网站提出了建议。

关键词：精品课程,网站建设,实现

参考文献

[1]朱丽莉, 刘跟萍.精品课程网络通用平台的设计与开发.中国科教创新导刊, 2008.

[2]梁婷婷, 邓广彪.通用的精品课程网站的设计与开发.计算机时代, 2009.

[3]樊凌.精品课程网站建设研究.苏州教育学院学报, 2009.

通用教学网站的设计 篇2

关键词：J2EE框架,通用性,网站建设

目前国内外企业网站建设方面来看，大部分企业网站开发在特定的环境下仅适合该企业的单一用途网站，不仅受平台的限制，而且不能广泛应用，部分网站功能重复开发，从而浪费大量的时间和精力。为了解决以上问题，研究J2EE商业级开发框架作为开发平台，进行通用性商业网站的建设，实现商业网站普适性的规划与管理，节约了人力和财力资源，大大降低了企业成本。

1 J2EE开发框架[1]

J2EE包含各类组件、服务架构及技术层次，均有共通的标准及规格，可依循J2EE架构的不同平台之间，存在良好的兼容性。J2EE开发框架主要有Hibernate,Spring,Struts2,EXTJS,Json。本网站建设基于J2EE框架主要是Hibernate,Spring,Struts2三大框架应用。Hibernate是一个开放源代码的对象关系映射框架，应用范围包括JDBC场合，Java客户端程序，Servlet/JSP的Web应用及在EJB的J2EE架构中取代CMP，完成数据持久化的重任。Spring的架构基础是基于使用JavaBean属性的Inversion of Control容器，Spring提供了唯一的数据访问抽象，包括简单和有效率的JDBC框架，极大的改进效率并且减少可能的错误，主要还提供了可以和IoC容器集成的强大而灵活的MVC Web框架。Apache Struts2是具有良好稳定性，可扩展的JAVA EE web框架，框架设计的目标贯穿整个开发周期，从开发到发布，包括维护的整个过程。

2 项目开发技术方案

基于J2EE(Java)企业级开发框架作为开发平台，进行网站前台设计和后台设计相结合，实现企业级商业门户网站的通用性模版[2]，具有一般企业的各种业务功能，包括产品发布，新闻发布，顾客留言等功能，同时管理员可以在后台管理自主更新前台模版，即管理员可以动态更改网站的名称、公司简介、网站的风格、首页模块布局等相应信息，从新搭配出一个全新的网站。

2.1 项目的技术创新点

与传统的开发网站的技术特征相比，本项目突出主要的技术特征为先进性、通用性、可扩展性。

先进性：1)基于J2EE框架构建[3]。以现阶段功能强大的Java为开发语言,采用B/W/D系统模式进行开发。MySQL作为现今常用的数据库管理系统，具有良好的效率、稳定性和安全性，在服务端采用SSH(Spring+Struts+Hibernate)与MySQL技术相结合，不但运行效率极高，并且在安全性、稳定性、可维护性和易扩展性方面具有良好的保障。2)基于三层B/S模式的动态网页数据库应用程序设计。客户端和应用服务器之间加入一个WEB服务器，就形成了一种特殊的B/S结构—Browser/Server，只在客户端安装一浏览器软件即可，节省人力和物力的，使用灵活，维护方便。

通用性：基于J2EE框架以前台管理和后台管理通用功能模块和数据库设计相结合，完善通用性网站的建立，实现管理员可以根据企业的需要选择栏目和模块，方便快捷地规划网站结构和信息管理，从而制作出含有本公司特色的效果各不相同的网站。

可扩展性：本项目可适应需求的变化，DBMS不仅限于MySQL，同时可用Oracle或其他数据库管理系统代替。

2.2 项目可行性技术方案

项目可行性技术方案分析主要采用的是调查研究结合实验的方法，主要使用了应用服务器Tomcat6.0、PowerDesigner进行数据库建模[4]、数据库管理系统MySQL、工作流制定Together等产品搭建网站，并开发原型进行验证。本项目中的开发框架都是现今技术比较成熟稳定且主流的开发框架，进行有机的整合实现满足广泛商业网站需求，如配置表1，运行环境表2。

3 项目主要功能模块设计

3.1 项目总体功能结构图设计

图1为总体功能结构图。

3.2 前后台管理的登录模块实现

登录模块包括后台管理员登录和前台顾客登录，这个功能是由通过提交表单的方式来实现的，即登录页面包含一个表单，要求用户输入账号和密码，并填写验证码，然后点击“提交”，提交过后，该表单的参数被传递到验证处理页面。在验证处理页面，系统将会把提交的账号和密码与数据库存储的账号和密码进行连接，通过查询方式查看提交的信息是否正确，如果正确，系统将会提示登录成功，并转到相应的的请求页面;否则，提示错误信息，返回到初始页面。前台后台登录模块功能如图2，图3。

关键代码如下：

3.3 通用性网站功能关键模块

通用性网站操作功能实现主要是由后台管理的模块功能确定，其中后台管理模块中前台页面管理子模块为关键的功能模块，如前台管理子模块功能结构图图4。

3.3.1 数据库设计中关键的表单

1)前台样式表———logo表和style表(style表与logo完全相同)。

2)网站功能通用性主题表Subject表。

3.3.2 hibernate.cfg.xml文件配置

基于J2EE框架中hibernate为开发框架之一，以hibernate.cfg.xml进行文件配置，配置与数据库连接相关的所有参数，包括数据库驱动类，连接路径URL，数据库用户名和密码，数据库所使用的方言等其他参数，提高网站操作的稳定性，为通用性功能建立奠定数据文件调用基础。实现的关键代码：

3.3.3 通用性网站操作过程实现

先登录后台管理系统，选择菜单中的前台管理子菜单，载入自主设计网站的内容。如图5至7。

前台管理能够管理整个网站的内容，即网站的名称，样式布局，色调搭配，系统公告，公司版权，友情链接等更多内容，以此操作来实现通用性功能，如图8;将其设为主题即可在前台显示出你设置的各种样式，让网页焕然一新，如图9。

4 项目测试

本项目最终实现的目标是通用性的企业级门户网站，既有普通企业的基本业务功能，如新闻动态、产品动态以及客户留言等。本项目的主要创新点是实现网站通用性功能，自主设计网站主题，包括网站名称，公告，关键字，公司简介，以及友情链接和公司的版权等相关信息，同时可以选择公司的logo(通过上传)，网页的色调，以及首页的模块布局，通过搭配构造出一个全新的网站。

本项目普通功能，并且通过了测试，在此着重测试网站的通用性功能的过程与实现。测试时使用了两套logo，两套样式表(即蓝色和黄色)，两套主题(长虹集团和sony公司)，由此实现搭配出几种不同风格的网站。

测试结果：

在开发的通用性网站模版上可以随意更换主题，模块布局等自主设计。

1)主题为sony公司，样式表为黄色的网站通用性自主设计的对比。

2)主题为长虹集团公司，样式表为蓝色的网站通用性自主设计的对比。

2)通用性网站模版不同主题的自主设计对比。

5 总结

基于J2EE框架通用性企业网站的研究实现功能上建立通用的企业网站模版，用户可以根据对企业的不同需求，在模块的设计中，还可以加入各式各样的功能模块，网站风格个性化，与传统的网站更具灵活性，扩展的功能实用性。

参考文献

[1]王磊杰.J2EE开发指南[M].北京:人民邮电出版社,2007.

[2]王夕宁.JSP通用模块及典型系统开发实例导航[M].北京:人民邮电出版社,2006.

[3]陈松.J2EE电子商务系统开发[M].北京:清华大学出版社,2007.

[4]明日科技.JSP开发技术大全[M].北京:人民邮电出版社,2007.

网站设计与开发课程教学的探索 篇3

(一) 网站设计与开发课程的主要内容

主要包括静态网页设计和动态网页开发教学两部分。1.静态网页设计。静态网页是指纯粹HTML格式的网页, 包括HTML文档结构、文字处理、超链接、列表、框架、表格、层、表单、CSS样式表控制网页外观、CSS+DIV网页布局、模板和库文件、页面元素的布局技术, 时间轴、交互式表单、Java Script脚本, HTML、Banner广告等技术。2.动态网页开发。静态网页的内容是“固定不变”的, 内容的更新、维护等都需要手动进行, 维护起来工作量是相当大的。动态网页以数据库技术为基础, 可以大大降低网站维护的工作量, 采用动态网页技术的网站可以实现与用户的交互。目前的动态网页技术包括ASP、ASP.net、PHP、JSP、CGI等, 其中比较流行的为ASP.net、JSP和PHP。

(二) 网站设计与开发课程教学中存在的问题

1. 网站设计与开发课程涉及的知识面广, 内容零散, 课堂时间不够。

课程涵盖面广, 从基本的HTML到动态编程语言再到目前的热门AJAX技术, 每一个技术都有相当多的内容需要学生去学习理解。在设计中要求学生要掌握设计工具的使用, 并了解各个标记的作用。在课堂时间内是不可能将这些标记及其属性一一讲给学生的, 只能够将最常用的一些标记告诉学生, 动态网页设计中需要调试, 数据库操作还要求学生掌握数据库连接的相关知识等, 课堂时间少, 只能要求学生在课堂外的时间进行自主学习。

2. 教材不能很好的满足教学需求。

目前市面上关于网页设计的教材颇多, 但是基本上都是讲DEAMWEAVER和FRONTPAGE的使用。这些教材都侧重于设计, 对HTML语言基本知识讲得很少, 这样容易使学生产生:“只要DREAMWEVER或FRONTPAGE就可以做网页了”的错误思想, 从而忽视了对编程的学习。

3. 学生在学习中知识遗忘率高。

上课过程中教师发现学生对学过的知识经常会想不起在哪里见过, 特别是一些函数的使用方法、参数、功能, 这往往需要教师回过头来再讲解, 使得有限的教学时间变得更短。同时也使得同学在课后自己开发设计中困难重重, 举步维艰。

4. 实践教学方法、教学手段、考核方式不能适应时代的需求。

本课程是一门实践性很强的课程, 要求学生自己动手去进行开发。因此, 在课程教学中要避免学生像学习其他课程一样对知识点进行强记, 同时考核方式也要进行改进, 避免学生为了一味追求高分, 进行考前突击记忆。

(三) 有效教学方法与实践

1. 兴趣是先导。

教育心理学指出兴趣是人对客观事物的选择性态度, 表现为人力求认识和获得某种事物并且力求参与相应活动。兴趣是通过情绪反应来影响一个人的行为积极性, 既是凡是从事自己感兴趣的学习和工作, 人就会觉得心情舒畅和愉快, 效率也就高;相反, 如果从事自己不感兴趣的事, 则可能心理动力不够, 缺乏激情, 效率也就低。由此可见, 在教学中培养学生的学习兴趣的重要性。在教学的开始, 要让学生了解到什么是网页设计、网页设计的内涵、网页设计的发展、网页设计的就业形势, 可以满足学生的好奇心并能对网页设计进行更多的思考, 产生兴趣。

2. 利用合适的教材, 多种课堂教学方法相结合。

在教材选用上, 要选用知识比较完整的教材, 在课堂教学中要加大讲解编程的比重, 促进学生养成良好的编程习惯。采用启发式的教学方法, 让学生主动的进行思考, 不仅可以促进学生对知识点的记忆, 更重要的是使学生有一种成就感, 有利于课程的教学。在课堂上必须做到重点突出、详略得当, 要将用的比较多的、具有代表性的东西教给学生, 一来可以节约课堂时间, 二来给学生留下自主学习的空间。除此之外, 可以采用设置问题情景、故意设错、组织讨论、演示法、练习法、发现法、自学辅导法等教学方法来诱导学生学习。总之, 要充分的师生互动, 调动学生的积极性, 必须注意课堂秩序, 避免因维护秩序而使用有效的教学时间缩减。

3. 模块化知识点、模块化教学。

模块化就是将知识点按其功能作用分为小的知识部分, 比如将HTML语言分为文字处理、表格处理、表单处理、CSS等多个小点, 将这些点结合起来教学, 重点掌握其中一个小点。目标式教学实际上就是在模块化的基础上提出的, 要求教师在上课前要将学习任务详告学生, 包括长期任务和本次课堂任务, 帮助学生确立学习目标、实现学习目标, 使学生明确自己要学什么, 什么时候学什么, 怎么样才算学会。

4. 实践性教学。

实践也是检验学生自主学习的手段, 但是在和他们的交流中, 教师发现他们的实践不够, 因为他们不清楚做什么样的实践才能将所学知识结合起来使用。这就要求教师需要对学生的实践进行引导, 不同的教学阶段、不同的学习水平是不一样的。在开始学习静态网页时候应该引导学生做一些能够充分利用HTML标记的网页;动态网页设计的学习最好是能够领着学生做项目。可以按照学生的不同兴趣对学生进行分组, 给不同的小组不同的项目让学生去设计开发。教师可以对学生进行大体设计方法的指导, 以学生自主学习设计为主体, 在实践过程中培养学生软件开发的思路, 提高动手能力, 培养团队意识, 为以后的工作做一个充分的准备。学生通过实践不仅可以将所学的知识巩固, 更是可以体验到收获的喜悦, 学习兴趣自然而然的就更加浓厚了。

5. 充分利用资源。

架设了校园网的学校可以在学校内部建立一个小的交流网站, 教师和学生可以通过网站进行交流, 及时的解答学生在设计中遇到的问题, 学习动态网页时候可以将部分空间留给学生学习。没有架设校园网的学校, 学生可以在网上搜索免费空间进行网页的发布管理, 不过目前国内免费空间基本上都是静态空间, 在学习动态网页实践中可以采用国外免费空间。学生通过在网上展示自己的成果, 势必会得到提高。

6. 变革考核方式。

网页设计不同于其它课程, 根据其实践性强这一特点, 难以用具体的考试题目来考查学生的掌握程度。教师可以提前让学生先提交一个网站的总体设计思路 (需求分析和设计大纲) , 让其在一定的时间内完成, 设计完成后, 教师可以根据网站的完整性、美观性、实用性等方面给出课程设计成绩, 部分为实践成绩;机试中可以让学生完成简单的作品, 对一些网页设计的基本知识进行解答, 避免学生死记硬背。总成绩中, 出勤率占10%, 课堂表现占5%, 课程设计成绩占总成绩的45%, 机试成绩占总成绩的40%。教师自身要注意自身知识的扩充, 在课堂上将比较新的技术穿插的讲讲;多和学生进行交流, 给予其鼓励和指导;教师之间也要经常进行交流, 共同提高教学质量。

21世纪需要高素质的人才, 要求具有良好的创新意识和团队合作精神。这对教育提出更高的要求, 所以要转变“以教师为中心、以课堂为中心、以书本为中心”的落伍观念, 树立“以教育为主线、以学生为主体、以实践为手段、以信息化为依靠”新型教学观念, 充分调动每一位学生的主观能动性, 激发学生创新的潜能, 全面提高学生素质, 为社会培养“德才兼备”的人才。

参考文献

[1]卢成均, 罗章涛, 田芯安.动态网页设计课程教学改革研究[J].重庆文理学院学报 (自然科学版) , 2006 (5) .

[2]张良, 周长胜.实验教学在计算机基础教学中的改革与实践[J].高校论坛, 2008 (3) .

通用技术课堂教学设计 篇4

一根据实际创设情境, 激发学生兴趣

1. 创设教学情境

恰当的教学情境会使课堂的气氛活跃。如在讲解什么是控制时, 我提前准备好教具, 让学生们现场选派代表进行投篮比赛。这个游戏使学生亲身感受到控制就在我们身边, 并使他们从游戏中体会到控制的目的及手段。好的教学情境激发了学生的兴趣, 我讲的什么是控制这节课在省电教优质课评选中获得了三等奖。在讲解设计与技术的关系时, 我发给学生一张A4纸, 让学生自己动手, 通过折、叠、裁等方法做成一件物品, 来理解什么是设计, 教师再因势利导引入课题内容, 激发了学生的兴趣, 提高了学生的学习积极性, 使学生在轻松愉快的环境中获得了知识。

2. 充分利用多媒体进行教学

在教学过程中, 视频的使用能激发学生的好奇心和求知欲。在讲解了解流程时播放《纸张制作流程》的视频。然后向学生提出问题:纸张制作由几个小过程组成?学生分组讨论, 教师总结:纸张制作由8个小过程组成, 这8个小过程一环接一环, 环环相扣, 缺一不可, 它们共同完成, 制作出合格的纸张, 这些小过程称为环节;这些环节按照一定的时间顺序先后出现、完成, 这个时间顺序称为时序, 学生瞬间就掌握了流程的两大特征, 这个视频案例的使用, 引起了学生学习流程的兴趣, 培养了学生的求知欲。

3. 利用好教学案例, 充分展示课堂内容

通用技术这门课的性质决定了它是立足实践的一门课程, 生活中的案例俯拾皆是。在教学内容的安排上, 可以把一些生活案例填充到教学内容中。在讲解技术是综合知识的结晶时, 我列举了我国成功发射神舟飞船的案例, 并进一步提问, 飞船发射受天气影响吗?飞船升空需要燃料吗?飞船到达预定轨道需要进行控制吗?如何控制?通过教师一步步提问, 引发学生一层层思考, 使学生认识到航天技术是多学科知识的综合运用, 涉及材料科学、数学、物理学、天文学、空气动力学、气象学等等, 充分说明技术是综合知识的结晶。因此, 教师在教学过程中把现实生活中的技术以案例的形式充实到课堂教学中, 能引起学生对技术问题的思考, 丰富学生的知识, 使学生在掌握基础知识和基本技能的同时, 领略到技术就在我们身边, 从而使学生产生学习技术的兴趣。

二在课堂教学中注重学生创新精神和实践能力的培养

设计是所有技术活动的基础, 教师应该采取有效的教学方法, 诱发学生构思, 启迪学生的思维, 激发创造激情, 让学生在实践中体验技术的魅力。如在工艺的一般过程与制作这一节教学中, 我具体安排了两个课时, 第一课时对设计的一般过程的各个环节做理论阐述, 通过学习使学生从整体上了解设计的一般过程, 并布置第二课时内容: (1) 五人为一个小组单位; (2) 制作什么作品自定; (3) 材料自选, 如塑料瓶、木头、彩纸、硬纸板等等; (4) 制作工具及辅助材料自备, 并带到课堂上。在第二课时, 学生踊跃参与, 热情高涨, 大部分学生根据设计的一般过程进行具体的实践操作, 基本都能做出自己设计的作品。一节课下来, 作品五花八门、种类繁多, 有挂衣架、有笔筒、有相框等, 作品形式不拘一格。在学习的过程中, 我有意识地要求学生对自己的产品进行过程性评价, 找出不足, 适时改进, 确保设计产品的完美。让学生在学中做, 在做中学。在学生完成产品设计的过程中, 让学生真正动起来, 使他们感受到学习是快乐的事。通过实践活动, 调动了学生学习的积极性, 创新精神和实践能力也得到了培养和提高。

三改变教学模式, 构建新型课堂

传统的教学方式以“老师讲, 学生听”为主, 这种授课方式学生的能动性极低, 教学效果一般。因此, 课堂上应改变学生被动等教的局面。新型课堂要呈现主动性、生动性, 就要让学生真正成为学习的主体。如在学习了技术应用的两面性后, 我组织了一场辩论:技术既可以给人们带来福音, 也可以给人们带来危害。以我们县某造纸厂为例, 它的生产一方面给当地增加了财政收入, 增加了就业;一方面对环境造成了污染, 给当地居地的身体带来了不利影响。它的存在是好是坏?辩题事先布置, 课堂上学生积极性非常高, 课前准备了大量的资料, 有该厂农民工、大学生就业人数统计, 年年创税的数额, 工人的年平均工资等, 还有该厂周边居民反映的厂旁河流水质、空气质量、农作物栽培管理等情况。辩手在辩论中激情高昂, 有理有据, 同学们掌声不断。在这样的课堂上, 学生既学到了知识, 提高了能力, 又有利于学生情感态度与价值观的形成。

通用教学网站的设计 篇5

网站设计是一个把软件需求转换成用软件网站表示的过程, 就是指在因特网上, 根据一定的规则, 使用D ream w eaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。

由于网站的后台技术和特定的编程语言有密切联系, 本文主要针对网站开发的前台技术做具体分析, 选择出适合教学的模块。

一、现状分析

目前高职院校都开设了网站设计的课程, 前端设计的教学模块主要由以下2个方面组成:1) D ream w eaver设计, 负责构建页面;2) Photoshop设计, 负责构建图片资源;

但这样教学内容已无法适应目前的网站开发需求了, 因为随着目前技术的发展, 网站前端技术发生了很多的变化, 再按照以前的教学模式, 将无法适应现代网站的开发。

二、课程模块设计思路

网页最重要的作用就是向用户展示页面效果, 具体由结构、表现和行为组成。

网页的结构层由H TM L或者X H TM L之类的标记语言负责创建。目前, 主要采用H TM L5来描述网页, H TM L5不是一种编程语言, 而是一种标记语言, 标记语言是一套标记标签, H TM L使用标记标签来描述网页标签, 对网页内容的语意含义做出了描述, 但这些标签不包含任何关于如何显示有关内容的信息。

网页的表示层由C SS负责创建。C SS定义如何显示H TM L元素, 用于控制W eb页面的外观。通过使用C SS实现页面的内容与表现形式分离, 极大提高了工作效率。在网页制作时采用层叠样式表技术, 可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制, 便于网站整体风格的控制。

行为主要由Java Script实现。Java Script是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言, 同时也是一种广泛用于客户端W eb开发的脚本语言, 常用来给H TM L网页添加动态功能, 比如响应用户的各种操作, 为用户提供更流畅美观的浏览效果。通常Java Script脚本是通过嵌入在H TM L中来实现自身的功能的。

因此, 在网页制作过程中, 我们通常使用 (X) H TM L去搭建文档的结构;使用C SS去设置文档的呈现效果;使用D O M脚本去实现文档的行为。

但是, 单纯的使用这种制作方式存在很大的问题:

首先, 目前由于各个浏览器存在较大的差异性, H TM L5、C SS3和Java Script在各个平台上表现出巨大的差异, 尤其是一些老版本的浏览器, 对新出的技术完全不支持;其次, 采用这种原生的技术来制作网页, 不光不便于维护, 开发效率也低下;最后, 目前不光存在PC终端, 平板电脑、手机等各种终端层出不穷, 使得原生技术开发的网页很难兼顾各种平台和终端。

因此, 现在衍生出一些流行的Java Script库和一些前端框架, 这些技术消除了平台上绝大多数的兼容性问题, 也兼顾到各个平台, 这些技术在实际的网站开发、网页制作过程中使用的非常广泛。

(一) Bootstrap

B ootstrap, 来自Tw itter, 是目前很受欢迎的前端框架。B ootstrap是基于H TM L、C SS、JA V A SC R IPT的, 它简洁灵活, 使得W eb开发更加快捷。B ootstrap提供了优雅的H TM L和C SS规范, 它即是由动态C SS语言Less写成。

目前, PC、平板、手机等设备都可以访问网站, 但各种终端设备的屏幕分辨率不同导致访问同一个网站显示效果不一致。B ootstrap支持响应式布局, 就是一个网站能够兼容多个终端———而不是为每个终端做一个特定的版本。

所以, 掌握B ootstrap的使用, 可以大幅度加速网站页面的开发, 提高网站开发的效率。

(二) j Query

JQ uery是轻量级的js库, 它兼容C SS3, 还兼容各种浏览器。j Q uery使用户能更方便地处理H TM L、events、实现动画效果, 并且方便地为网站提供A JA X交互。JQ uery核心理念是写得更少, 做得更多, 由此可见, JQ uery的使用, 可以不用太考虑浏览器的兼容性问题, 同时它提供的功能也大大方便了我们日常的网站开发。

(三) Ext Js

Ext JS主要用来开发R IA富客户端的A JA X应用, 主要用于创建前端用户界面, 与后台技术无关的前端ajax框架。因此, 可以把Ext JS用在任何开发语言开发的应用中。

更为重要的是, 在Ext JS中引入了M V C (M odel V iew C ontroller模型-视图-控制器) 设计模式, M V C分层有助于管理复杂的应用程序, 同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。

因此, 采用了M V C来设计我们的网页, 整个设计逻辑将更为清晰。

三、课程实施

从上面的分析, 可以看出符合目前网页开发的前端技术, 在教学中, 可以按照以下的教学体系进行讲授:

首先, 进行网页美工的学习。无论什么样的网页制作, 都会需要图片资源来美化网页。其次, 进行前端技术的学习。重点需要放在C SS的使用上, 而H TM L和Java Script做一般的了解即可。因为在前端框架中, 很多内容框架已经帮我们进行了封装, 我们所需要的就是对框架的功能进行调用。最后, 要进行框架的学习。B oot Strap作为一个开源的前端框架, 其光栅系统、响应式布局完全兼顾了各种终端的使用, 是我们布局制作的首选工具;其次, j Q uery已经成为很多前端框架需要引用的依赖库, 其快捷的选择器、链式编程等特性, 将帮助我们更方便的操纵网页中的元素;如果开发PC客户端的应用, 我们可以选择Extjs来开发应用界面, 如果开发移动端的应用, 我们可以选取j Q uery M obile等其他框架来进行界面开发;如果需要数据交互, 选择JSO N技术也是非常不错的。

四、小结

通过上面的分析, 在目前的前端技术中, 很多能帮我们快速、高效的开发网站。而这些技术也广泛的应用于企业的实际开发中, 因此, 在高职院校的课程模块设计中, 应该紧随开发趋势, 将最新的、成熟的模块应用于课程教学中, 培养出企业需要的相关人才。

参考文献

[1]陆凌牛.html5与css3权威指南.机械工业出版社, 2011.