网页设计报告范例

一、《ASP动态网页设计》的教学现状

在进行ASP动态网页设计学习过程中最忌讳的问题之一就是设计代码中出现单词拼写错误。这并不是一个严重性的问题，但是其会影响ASP动态网页的应用。这一问题出现的主要原因是中职学生英语水平低，未能有效的掌握ASP动态网页代码编写中需要运用的英语单词，在进行代码编写中就会出现英语单词拼写错误的情况。对于此种情况，中职学校一定要注重英语课程教学，在课程教学中插入一些关于ASP动态网页设计方面的英语知识、英语单词等，促使学生在进行ASP动态网页设计过程中不会再出现单词拼写错误的问题。

二、“一体化”教学方法的应用

“一体化”教学方法就是指教学内容、教学形式在“讲”和“练”两方面做到有机结合，专业理论与实践操作做到有机结合。让师生双方边教、边学、边做，边发现问题，边提高，把理论和实践紧密结合起来，不断提高学生技能水平，完成教学任务和目标。由ASP动态网页设计课程专业性强。涉及面广等特点所致，在运用“一体化”教学方法之前一定要就课程。学生、教学情况等方面进行详细的分析，进而制定有效的，合理的教学方案。需要注意的是要保证所设计的教学方案能够提高学生的学习兴趣，积极主动投入i到课程学习中。下面就教学案例的实施和教学过程说明如下：

（一）教学设备与场地

集中在计算机实验机房开展教学。设备配置保证能做到全部学生一人一台计算机，提供局域网环境进行、测试论坛。

（二）教学目标清晰，分阶段完成

摘要：西安翻译学院的面向非计算机专业本科学生所开设的“网页设计”课程是一门公共基础课，也是3个信息技术课程中的一门必修课，共计32课时（其中理论16课时、实践16课时）。如何让学生在有限的时间内全面提高信息技术的处理能力和素养水平，一直是本课程教学团队研究和探索的重要话题。文中主要从学情分析、线上线下的教学模式、过程考核及学生成绩这几方面来阐述本课程的改革内容及效果。

关键词：网页设计；混合式教学；教学模式；过程考核

0引言

在我校2017版本科专业人才培养方案的指导性意见中指出非计算机类专业的计算机应用类课程体系：计算机学习注重计算机应用能力培养与专业需求相结合，采用“必修＋选修＋自主学习”模式，即实行三层次教学，第一层次为必修课程，是为了加强学生对计算机基础知识、办公软件的学习能力以及程序设计能力培养；第二层次为选修课，为通用性技术基础教育；第三层次为了加强学生自主学习能力，采取“专业指导＋专门训练”模式，主要依据专业特点设置计算机应用类专题模块。我校的外语类专业的人才培养模式是“外语＋专业＋现代技能”，非外语类专业的人才培养模式是“专业＋外语＋现代技能”，无论哪个专业，其中计算机基础是现代化技能重要组成。

1该课程学生学习的现状

1．1“网页设计”课程定位。该课程是所有非计算机专业的通识必修公共基础课，是一门操作性和实践性很强的课程，学生在完成了先修课程“大学计算机基础”、“高级办公自动化”的学习后，掌握了计算机基本知识和原理以及一些办公应用软件的使用，本课程旨在以实用为原则，培养学生的计算思维、创造性思维、探究式学习等应用能力，以适应“互联网＋”时代社会对人才的需求［1］。其主要内容包括创建与管理站点；设计基本图文网页；使用图像、多媒体和超链接等技术制作网页；利用表格、层和Spry菜单、框架排列网页中的数据，设计使用CSS＋Div样式美化布局网页、给网页对象添加行为特效、创建表单网页、使用模板和库制作小型网站等。

1．2“网页设计”课程目标。以学生能独立完成静态网站开发和维护的实际工作能力为学习目标，要求学生掌握HTML语言的文档结构和基本标签使用，能综合应用DreamweaverCS6软件、HTML和CSS技术制作网页，掌握规划、开发、和管理静态网站的专业知识和技能。通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站，培养学生克服困难的精神、理论应用于实践和解决实际问题的能力，为今后的工作打下良好的基础［2］。通过本课程的学习，使学生掌握网络信息检索方面的知识；在网站制作的过程中要对站点进行建立并实时管理，具备文件及文件夹的整理及管理能力；不仅巩固了一年级学习的文档处理能力等一系列的过程，而且还综合利用本阶段所学知识在课堂上自主完成网站的需求分析、网站设计和网站测试，体现了对学生信息素养能力、计算思维能力和探究式学习能力的培养，有效发挥了考核的激励作用，为学生的终身学习奠定基础［3］。也使非计算机专业类本科学生的计算机知识在在校期间学习最后一门计算机课程“网页设计”中都能够融会贯通。

摘要：

本文分析电子商务专业学生学习网页设计与制作课程教学现状，并探讨了电子商务专业网页设计与制作课程教学设计、实施及考核环节，通过该课程教学改革提高学生学习兴趣，并能提升个人建设网站的综合能力和素质。

关键词：

电子商务；网页设计与制作；学习反馈；任务循环

1网页设计与制作课程教学现状

（1）学生欠缺计算机和美学设计基础知识。

没有计算机基础课程，且课程学习课时较少，对网页基础知识理解较为费解，美学设计的欠缺，导致网页设计能力差，虽然能够也能制作简单网页，往往布局不合理。审美能力弱，有时追求个性，制作的网页往往花里胡哨，内容和主题不一致，导致网页视觉效果差。

【摘要】基于翻转课堂的混合式教学模式是将翻转课堂和混合式学习进行有效整合、优势互补的一种新型教学模式。《网页设计与制作》课程具有很强的实践性和创造性，与翻转课堂广泛采用的研讨式、项目任务驱动式学习模式相吻合，笔者在课堂教学中对“基于翻转课堂的混合式教学模式”进行了有效的探索与实践，取得了较好的教学效果。

【关键词】翻转课堂；混合式学习；《网页设计与制作》课程；教学模式

近年来，由于信息技术和网络技术的不断发展和普及，涌现出了混合式教学、慕课、微课、翻转课堂等基于信息技术和网络的教学新模式及资源新类型[1]，为传统的教学模式带来了机遇和挑战，如何在“互联网+”时代实现信息化教育与传统教育优势互补是摆在一线教师面前的现实问题。基于翻转课堂的混合式教学是现今教学改革与实践的热门课题，为传统教学模式改革、数字化教学资源建设、创新性教学评价提供了技术支持与资源保障[2]。

一、基于翻转课堂的混合式教学模式简述

基于翻转课堂的混合式教学模式，是将翻转课堂和混合式学习进行有效整合、优势互补的一种新型教学模式。新媒体联盟和美国高校教育信息化协会共同的《地平线报告2016高等教育版》把翻转课堂视为高等教育领域一年内投入使用的技术，也是最常用的混合式教学模式之一[3]。

二、构建基于翻转课堂的《网页设计与制作》课程混合式教学模式的优势

（一)《网页设计与制作》课程教学存在的问题

摘要：基于Web技术的应用程序在网络中使用的越来越广泛，因此网页设计师及网站开发者越来越受到重视，并且对他们的需求量也急剧增加。本文讨论了网页设计师和网站开发者需要掌握的技能和知识，并从教学内容、教学方法和教学评价方法三个方面详细阐述了网页设计与开发课程体系的建设。该课程体系目前正在应用于当前的教学过程中，并取得了一些较好的效果。

关键词：课程体系建设；教学内容；教学方法；教学评价

随着计算机和网络的迅速发展和普及，越来越多的人喜欢通过网络获取信息，很多企业都想通过网站信息从而宣传自己。在这样的情况下，企业需要更多的网页设计师和网站开发人员为自己的公司建立网页，从而打造形象和销售产品。根据社会对人才的市场需求，高职院校确定其培养目标为培养高素质和高技能的应用型人才。如何设计具有创新风格的网页，成为高职计算机专业学生所必须掌握的技能。为了满足社会的需要，大多数高校都开设了网页设计与网站开发课程，该课程教授学生如何设计网页和开发网页网站。

一、网页设计与网站开发的岗位技术分析

网页设计和网站开发都需要有专业的技能，这些技能涉及网络技术、编程技术以及动画设计等知识。基于网页设计与网站的不同的社会需求，将职位划分为网页美工设计师、网页设计师、动态Web网站开发和网站维护人员。1.网页美工设计师。该职位强调网页的视觉设计，且设计师应该有比较好的审美能力和创新能力，并且对色彩和平面设计有自己独到的见解。网页美工设计师还可以规划网页的布局和设计独特的网页。2.网页设计师。网页设计师应具备一定的美术基础，熟悉网页开发的步骤和流程，并且应该精通HTML、XHTML、CSS、CSS+DIV和JavaScript等设计语言。3.动态Web开发人员。该职位旨在从后端数据库访问数据并显示这些数据。动态Web开发人员应该具有网页设计知识，可以开发后台应用程序并将其嵌入到HTML语句中。动态Web开发者还可以测试、上传和整个网站。另外，动态Web开发者也应该精通PHP、asp或jsp，而且熟悉SQLServer、MySQL或Oracle等数据库。4.网站维护人员。该职位的工作人员主要是处理和网站投入使用后的相关信息。网站维护人员必须处理网站在使用过程中所出现的所有问题。网站维护人员应具有一定的网页设计与动态网页开发知识和技能，并且能够提高网站的性能和可靠性，使用搜索引擎优化信息，推广网站。通过上面对网页设计与网站开发的职业分析，我们知道网页设计师和网站开发者应该具有设计网页能力、编程能力、艺术视觉能力和网站维护管理能力等。因此，我们应该构建一系列培养学生这些技能的课程体系，而不是一个单一的课程。这些课程是相互依存、相互贯通的，并构成了一个整体课程体系。

二、课程体系的内容

高职院校的目标是培养学生的职业能力，所以所开设的课程应该是以职业能力为本。根据网页设计和网站开发职位技能要求，设置为有关图形和图像、网页设计、动态Web开发、网站管理和维护的相关课程。不同的课程有不同的主题和内容，但是这些课程都专注于同样的目标———网页设计与网站开发。因为课程包含的知识点非常多，因此合理的整合与划分教学内容是有益于教学效果的。1.设置图形和图像课程。如今，一个内容丰富、富有创意的好网页能长时间的吸引顾客的目光。设计师喜欢使用图标、图片和动画美化他们的网页，因此在开始设计网站之前，学生应该有对图标、图片和动画的一些想法。根据所用的软件功能、适用性和难易程度，设置有关Photoshop、CorelDraw和Flash等图像处理软件如何使用的课程内容，通过这些课程，学生对图片的颜色和构图处理等就会有一些自己的想法，他们可以使用这些软件处理图像和制作动画。2.设置网页设计课程。网页设计的目的是使用一个有吸引力的网站风格来显示信息。HTML语言是网页设计的基础语言，该语言是贯穿在整个教学过程中的。事实上，理解了HTML语言是有益于熟练掌握使用Dreamweaver网页制作软件的，因此HTML对于一个好的网页设计师来说是必须掌握的。不过，一个专业的网站是不能仅仅依靠HTML就能制作出来的，因此作为目前广泛用于管理界面网页的设计，它有效的弥补了HTML的缺点，可以说，一个网站的内容和构架由HTML决定，而网站的表现形式却由CSS决定。类似的，Dreamweaver也是一款网页设计的非常好的软件，它能够提高网页设计的效率，也能有效地管理和组织网站文件。除此之外，JavaScript语言也是网页设计中一门非常重要的语言，JavaScript决定网页的动作行为，并产生一些特殊效果。3.设置动态Web开发课程。编程语言和数据库是动态Web开发课程中必学的两种技能。目前，比较流行的Web编程语言主要有jsp、asp和php，而广泛使用的数据库主要有Oracle、SQLServer、MySQL等数据管理系统。根据企业的需求，我们选择PHP作为Web编程语言，选择MySQL作为主要的数据管理系统。因此，动态Web开发课程主要包含的两门课程为PHP编程语言和MySQL数据库。对高职院校的学生来说，教授他们如何使用数据库比教授他们有关数据库的理论知识更重要，高职学生只需掌握如何创建数据库、连接数据库以及添加、删除、编辑、查询数据表单以形成数据库的相关技能。在教授这些课程时，可以选择网上购物项目作为教学项目的案例。4.设置网站管理和维护课程。企业网站在用户使用之后对网站的数据管理、维护、网站推广和网站优化等处理都是很重要的工作，网站管理和维护的相关课程分析了网站的设计和其构架的可改进意见。这些课程涉及的相关技术有搜索引擎优化（SEO）技术和一些著名搜索引擎的排序方法。

1色彩

①淘宝网页采用的主色调是：黑白桔———桔色标题栏，白底，蓝色字体。整体颜色搭配合理，但是色彩的亮度及饱和度不高，给人一种陈旧的感觉，在淘宝网站看东西，网页产品、产品介绍字样的色彩都比较暗淡，给人一种山寨的感觉，相比较而言，聚美优品的网页产品、产品介绍字样的色彩相对都比较明亮，给人清新认真的感觉，映衬出聚美优品不卖假产品的理念，然人们放心。改进方法与建议：增加网页图片的饱和度和亮度，是网页产品图片看起来更清新明亮，给顾客以美好的视觉感受。②产品介绍字迹的颜色变化：当鼠标选中一个产品文字介绍的时候，产品文字介绍就会变成橙色，这种颜色不够宣明，需要人们集中更大的精力去收集这些信息。其次，如图所示凸显在图片之上的方框文字介绍有画蛇添足的嫌疑。改进方法与建议：a看这些颜色较浅的文字时需呀注意力很集中，将产品的文字介绍黑色字体加粗颜色加深，使之涵盖的信息易于被客户吸收，减少因读取信息而产生的视觉疲劳；b当鼠标放在文字上时，字体颜色变为深红色，相应的图片放大呈现在原图片的上方。

2视觉

淘宝网页上推荐产品时一个页面排布密集，展示的产品过多，也达不到所要想达到的目的。造成视觉盲区。改进方法与建议：产品排列不要过于密集，根据最佳视域的原理横排不应展示超过5个产品。

3页面布局

淘宝网网页布局页面下方经常太过拥挤，动态图片过多，另一方面淘宝内容较多、页面过长、推荐较多，容易使用户产生烦闷情绪，失去浏览网页内容的耐心。切换页面有两个，上下两个让人“目不暇接”，抓不住图片内容，容易让人烦躁。此外，网页不分人群、性别盲目提送，让不少顾客感到厌烦，抱怨电商智商不高，例如作为一个男生，一般情况下，对女性美容美妆用品不感兴趣，因此淘宝账户推送给该产品很不高明。改进方法与建议：采取切换页面一个，在图片上方设置有文字提示选项，电商可以自动向顾客展示，顾客也可以自行选择要看的内容，就像商场里需要服务员的时候她在，不需要的时候她也不会缠着你一样，没有绑架的推荐更容易让顾客欣然接受，交易完成的几率也就比较大。分类页面采取横排更加清晰整洁，更符合人人因工程视觉搜索的要求，字迹得得大小更符合人因工程的要求。下方空白处的图画更人亲切感，不会那么的枯燥。

4logo

1传统教学存在的问题

1．1知识点孤立，教学效果较差

传统的网页设计课程是按照教材的内容，讲解HTML语言和DreamWeaver工具的使用。学生往往不能将所学知识联系起来。学期结束后，学生对整个网站的构建缺乏清晰的概念，提交的作品质量较差。在对学生进行期中课程质量问卷调查中，80％的学生都认为课程所学内容可以理解，但是当教师要求学生动手完成网站时，90％的学生都不能很好完成。这正是因为在传统教学中一般采用讲授法和实验法，一周2学时的理论讲解，2学时的实验课。教师按照教材章节进行教学并布置实验内容，这样就造成了学生只对单一章节知识的理解，难以将所学内容联系在一起。

1．2教材过时，影响教学效果

网页设计课程是一门应用极强的课程，技术和工具的更新换代较快。而与之矛盾的却是教材的出版周期较长，往往跟不上技术发展的脚步。例如，当前，DreamweaverCS6已经成为主流网页设计的软件，但是一些教材还停留在讲解Dreamweav－erCS3上，导致学生的兴趣不高，不利于学生创造能力的培养，违背了教学目标的要求。同时，按照教材的内容讲解也限制了教师的教学，目前高校中使用的网页设计教材分为两种，一种是基于理论性质的，单纯讲解HTML，一种是介绍Dreamweaver网页开发的。前一种不适合非计算机专业学生学习，内容比较枯燥，学生在没有计算机程序语言的基础上很难理解。一般高校对非计算机专业学生都选择使用第二种介绍Dreamweaver的教材，而该教材则会造成学生的开发水平较低，过度依赖工具，无法解决实际问题。

1．3教学方法单一，学生学习兴趣不高

对于公共课来说，学习兴趣是学生是否能学好课程的重要因素。对于计算机应用能力较差的非计算机专业学生来说，在学习网页设计这门课程时，如何提高学生的兴趣至关重要。传统的网页设计课程的教学采用2学时理论和2学时实验课的形式进行，学生缺少动手的机会，往往使学生对课程缺乏兴趣，这阻碍了学生的能动性与创造性的发挥。对学生进行调查问卷中，70％的学生都提出课程设置实验时间较少，应将课程都安排在实验室等问题，还有一些学生认为网页设计课程应以提高学生兴趣为出发点。这些都说明了学生对于增加自己实践机会的渴望。

【摘要】

目前，生态化的需求不仅仅局限于自然环境领域，已慢慢渗透到社会生活的各个方面，教育领域也不例外。教学模式作为教学活动中的重要组成部分，教育生态化要想实现，教学生态模式的实现必不可少。随着慕课逐渐进入日常的课程教学中，应用慕课这种形式，并将与日常的课堂教学方式相结合，这种形式猛烈冲击了传统的课堂教学模式。而在将慕课与网页设计课程的相结合，并以此来构建教学生态模式的过程中，如何解决教学内容与各教学模式之间的对应关系、教师与学生在此过程中的地位和作用以及学习方式等成为急需解决的问题。

【关键词】

慕课；网页设计课程；构建策略；教学生态模式

在信息时代，各种各样的新技术和新理念对课程资源和教学模式产生巨大的冲击。在混合学习和移动学习的大背景下，多种样式的新课程形式在这一大环境下应运而生，其中也包括规模大的、在线的、低门槛的课程形式———慕课，慕课的出现对传统的知识传输形式产生一定的影响。本文从慕课这一课程形式出发，以教学生态为理论基点，结合社会对网页设计人员的实际要求，来探讨网页设计课程的教学生态模式的构建策略。

1．慕课与网页设计课程的教学生态的相关性分析

慕课与网页设计课程教学生态的相关性分析可大致划分为以下几个方面：慕课与教学生态理念相互影响的大背景、学习辅助环境分析和网页设计课程的教学与市场需求之间的矛盾等三个方面。