基于web标准的网页设计与制作教学设计

营销型网站建设实训

课程标准

课程编号：适用专业：电子商务课程类别：专业基础课程修课方式：必修教学时数：64学时总学分数：4学分

一、课程定位

1. 课程性质《网页设计与制作》是以计算机专业为主体，辐射计算机网络技术专业、计算机应用技术专业、电子商务专业、多媒体设计与制作专业等计算机类专业的理论实践一体化课程，是计算机专业的专业基础课程，也是电子商务的一门核心技能课程。

围绕电子商务专业的培养目标，该课程的定位为：

.懂专业：掌握Web国际标准基础知识；基于W3C网页设计标准，熟悉和掌握静态网页设计与制作及小型网站建设与维护的基本知识。

.精技能：掌握综合运用网页编辑软件、图像处理软件(fireworks)设计和制作网页的技能，熟练掌握DIV+CSS网页布局设计方法，能熟练运用XHTML、CSS(及后续课程JavaScript)进行网站客户端开发，熟悉Web国际标准，掌握小型网站策划、分析、设计、布局、测试的职业能力；坚持手写代码，形成良好的代码规范编写习惯。

.高素质：在课程学习中培养学习和工作的方法能力，培养与人协作和做人的社会能力。

2. 课程作用《网页设计与制作》是面向“网站美工、网站维护”职业岗位的领域课程，也是满足职业岗位任职要求的基本能力课程。

通过该课程的学习，实现以下专业知识、职业能力、职业素质目标，为今后职业生涯发展打好基础。

知识目标：

•熟悉和掌握静态网页设计与制作的基本知识；

•掌握Web国际标准基础知识；

•了解和熟悉HTML语言；

•掌握静态网页设计与制作的知识；

•掌握网页中DIV+CSS网页布局方法；•掌握网页中图片设计和处理、动画导入的知识；•掌握网站检查与发布的知识；

•坚持手写代码，形成良好的代码规范编写习惯。

能力目标：

•具备信息收集、处理、准备、加工的能力；

•具备网页设计及网页中图形设计、动画导入的基本能力，能独立设计并制作一个内容完整、图文并茂、技术运用得当的小型静态网站；

《网页设计与制作》课程开发与设计

摘要：

随着信息技术的不断发展，网页设计成为了互联网时代最重要的一环。好的网页设计可以增强用户的阅读体验，提高品牌的可信度和形象。因此，本文通过对《网页设计与制作》课程的开发与设计进行研究，探讨了如何有效地开展该课程，提升学生的实际能力，以及如何设计出优秀的课程体系与教学资源，以期为该领域的教育与教学提供一些有益的参考。

关键词：网页设计，课程开发，课程设计，教学资源，学生能力

一、 前言

互联网进入大众视线以来，网页成为了人们获取信息的主要途径，因此网页设计也就逐渐成为了相当热门的专业领域。随着互联网技术的不断发展与创新，网页设计也越来越成熟，其已经不仅仅是页面布局与颜色设计，更是必须关注用户体验、信息呈现与实现的综合考量。而如何培养出具有广泛知识与较高技能的网页设计人才，也就成为了各高校以及培训机构共同面临的教育难题。

本文旨在围绕《网页设计与制作》这一课程展开深入研究，探讨如何优化其教学内容、教学资源以及实际操作能力。文中通过对《网页设计与制作》课程的分析与建设，提出了具体的教学模式与课程设计思路，为网页设计这一富有挑战性和活力的专业领域的教育和教学提供新的思路与经验。

二、 课程开发

1. 教学目标

《网页设计与制作》课程的教学目标主要分为以下几方面：

（1）学习网页设计的基础知识和技能。

（2）掌握网页设计的流程与规范，能够进行网页设计与制作。

（3）提高学生的想象力、创造力和审美能力，能够独立设计和制作出具有良好用户体验的网页。

（4）了解网页设计的最新发展动态和趋势。

2. 教学内容

《网页设计与制作》课程的教学内容按照不同的学习阶段划分如下：

（1）基础知识阶段：介绍HTML、CSS和JavaScript等基础知识，以及网页设计的基本概念、设计原则和流程等。

（2）设计实践阶段：通过实例演示和练习，让学生了解网页设计的实际操作过程，掌握设计工具的使用方法，例如PhotoShop、DreamWeaver和Fireworks等。

《网页设计与制作》课程教学体系的构建与研究

《网页设计与制作》是一门基于理论且操作性、实践性、综合性较强的课程，对学生动手能力要求高。为了提高课程的教学效果，改革与充实教学内容，构建课程教学体系都是必然需求。深入《网页设计与制作》课程教学体系的构建与研究，培养学的综合技能和素质，培养学生学习的主动性、创新思维和合作精神，从而提高个人的综合竞争力和适应力。

网页设计与制作教学体系体系结构

1 课程现状分析

网页是承载互联网信息的平台，已经成为实现信息交流和沟通最直接的载体。也是互联网的重要成员之一。这对全国高等院校的网页设计课程教学带来前所未有的契机，同时也提出新的挑战。特别是民办院校，在教学中，如何有效地让学生掌握网页设计的理论知识和网页设计的具体运作方式、相关技能；如何提高学生的动手操作能力，确立面向应用，重视实践，培养学生的综合技能和素质，达到人才培养计划的要求。

11课程教学现状分析

111实践环节和理论环节脱节

目前，学校的网页设计课程都是理论和实践同步进行，最常见的授课过程是，老师先讲解，师范操作，然后提出练习任务，让学生再练习、验证。本课程实践性、操作性、应用性较强，这种授课过程的弊端是，由于每周只上课一次，每次课程的时间间隔（一般5至7天），加上学生不善于做笔记，等到下一次上课的时候，已经忘记了上一节课的内容，导致学生的基本功不扎实，操作困难，学习积极性不高。

112不同学生不能分层教育

学生计算机基础参差不齐，主要原因是生源不同，有的来自城市，有的来自农村，造成学生对计算机操作的接受能力差异很大，这给学生学习计算机类课程造成了一定的困难。在开展教学活动时要考虑到学生的差异性，做到“因材施教”。

113教材的局限影响课堂

《网页设计与制作》的大多数教材，侧重于Dreamweaver

软件或相关软件的使用方法，使得教学内容零散、陈旧，没有很好的融合。结果使得学生只是学会运用网页设计与制作的相关工具，而不是从网页设计者的角度出发去规划和建设网站。即使是完成的综合作品也达不到应有的功能效果和视觉效果。这种在课程内容上“重知识、轻应用”和“重技术、轻设计”的现象，容易导致学生眼高手低，做不出东西，不利于学生从全局的角度进行网站的开发和设计。

网页设计与制作教案

教案标题：网页设计与制作

教学目标：

1. 了解网页设计与制作的基本概念和原理。

2. 掌握常用的网页设计工具和制作技巧。

3. 能够设计和制作符合需求的基本网页。

教学内容：

1. 网页设计与制作的基本概念介绍。

2. 网页设计工具的选择与使用。

3. 网页布局和排版设计。

4. 前端开发技术的基础知识。

5. 网页制作的常见问题和解决方法。

教学过程：

第一课：网页设计与制作概述

1. 介绍网页设计与制作的概念和发展历史。

2. 讲解网页设计的基本原则和流程。

3. 分析和评价一些经典网页设计案例。

第二课：网页设计工具的选择与使用

1. 介绍常用的网页设计软件和工具，如Adobe Photoshop、Adobe Dreamweaver等。

2. 演示使用网页设计工具进行网页设计的基本操作。

3. 学生进行实践操作，设计一个简单的网页。

第三课：网页布局和排版设计

1. 介绍网页布局和排版的基本原理和技巧。

2. 演示如何使用HTML和CSS进行网页布局和排版。

3. 学生进行实践操作，制作一个有合理布局和排版的网页。

第四课：前端开发技术的基础知识

1. 介绍HTML、CSS和JavaScript等前端开发技术的基本概念和用法。

2. 演示使用HTML、CSS和JavaScript制作网页的基本操作。

3. 学生进行实践操作，制作一个包含基本交互功能的网页。

第五课：网页制作的常见问题和解决方法

1. 分析网页制作中常见的问题和bug，并提供解决方法。

2. 学生进行实践操作，改进自己设计和制作的网页。

教学评估：

1. 设计一个小组项目，要求学生团队合作设计并制作一个完整的网站。

2. 通过学生的作品和答辩评估学生对网页设计和制作的掌握程度。

教学资源：

1. 电脑、投影仪等多媒体设备。

2. 网页设计和制作相关的书籍、教程、案例和网站。

教学总结： 通过该教学过程，学生能够基本掌握网页设计与制作的基础知识和技巧，能够独立设计和制作简单的网页。同时，培养学生团队合作和解决问题的能力，为今后深入学习和研究网页设计与制作打下基础。