网页制作与设计第1篇

项目一：个人网站的设计与制作。随着网络技术的不断发展，个人网站已成为人们展示自己的一种手段。本项目将通过制作一个简单的“鸿澜”个人网站，从任务资讯、任务决策与计划、任务实施、任务检查与评估和练习与提高五个方面进行描述，了解个人网站规划与设计的基本原则和主要内容，熟悉网站建设的基本流程，掌握Dreamweaver的基本操作和表格布局排版技术，认识HTML语言的基本结构和常用标记符<table>、<img>、<font>、<p>、<br>等使用方法，培养学生团队合作和独立思考的意识，养成良好的职业素养，为制作更加复杂的网站做好知识准备。项目二：电子商务类网站的设计与制作。21世纪以来，电子商务伴随着IT的成熟，逐渐发展壮大，成为网络经济的核心。企业通过电子商务网站实现了宣传公司形象、企业动态、产品展示、网上订单、网上交易等功能，与客户间的距离进一步贴近。本项目通过完成整个电子商务网站的设计与制作，相关内容层层展开，在学生头脑中形成“如何搭建整体网站”的概念。项目三：中小企业网站的设计与制作。作为企业类网站，主要实现的功能首先是具有较强的盈利能力。其次网站是企业树立形象和展现文化的重要窗口，是为顾客提供服务的一个工具，是企业整体营销战略的一部分。常见功能有企业信息、新闻中心、产品展厅、人力资源、会员中心、留言反馈等。本项目通过某一中小企业类网站的整体设计，培养学生在学习过程中发现问题、解决问题的能力，提高学习的主观能动性。项目四：主题网站的设计与制作。本项目给出网站设计与制作的如下要点：（1）建立网站站点；（2）建立网站页面（首页为：index.html），页面元素完整；（3）应用表格或者div、css布局页面；（4）在页面中插入文字，并用css美化文字大小、字体、颜色等效果；（5）在页面中添加超级链接，并用css美化超级链接；（6）建立模板，并制作其他页面；（7）至少完成8个及以上页面，页面标题栏、状态栏、版权等信息齐全；（8）页面中超级链接如没有链接页面以空链接（#）代替。学生根据以上设计要求，结合所学内容，从旅游类网站、时尚类网站、教育类网站、门户类网站等几个大类中选择某一项进行设计制作。教师将根据学生完成情况的复杂程度和实际效果给予评价，锻炼了学生的实践动手能力，增强了自信心和学习兴趣。

二、教学素材的选用方法

教学素材是以完成课堂教学任务为目的，以教师引导学生开展课堂活动的形式呈现的教学材料。1.合理性。以个人网站设计来说，文本的制作上讲求清晰、明了、突显个性化，Logo和导航的字体、字号设计可以依个人的喜好采取不规则式，选择跳跃感强的色彩。在图像的选取上也是以色彩丰富、形状多样的图案为主。2.整体性。选用的教学素材要能够自然、贴切地把各个知识点整合在一起，教学素材要服务于教学目标，要突出教学的重点。电子商务类网站以从事电子商务为主，对安全、稳定等性能要求较高，比较考验网站中运行的程序。在知识点上以表格嵌套、模版运用、脚本语言和行为语句为重点进行讲解。3.现实性和针对性。课堂教学中选取的素材要符合学生的认知水平和实际生活，教师可以从具体教学对象的特殊性出发，根据教学对象因人、因地、因时选材，为他们“量身定制”针对性较强的教学素材，如在教授电子商务专业学生时，素材的选取多以电子商务平台或某一个人网店为主，以便引导学生从自己熟悉的教学素材中直观体验获取知识、提高能力的喜悦。

三、教学模式在教材中的运用

在《网页设计与制作》校本教材的开发上主要采用“基于过程的项目式教学法”。即“在引导学习者融入有意义的项目完成的过程之中，让学习者积极地探究与发现，自主地进行知识的整合与建构，以现实的、学生生成的新知识和提高的完成项目任务的能力为主要成就目标，项目完成的过程也是学习者学习活动进行的过程”。为此，以项目作品开发为主线，把教材中的范例网站分解成若干个子任务，将课程标准中的图像处理、动画制作、音视频处理、网页页面设计制作、站点维护等多方面的知识点融入其中，在整个课堂教学实施中，教师根据网站设计开发的实际工作顺序安排，以作品演示的方式从头至尾带领学生操作，让其感受网站从无到有一步步制作的全过程，有助于提高学生的学习兴趣，培养其创新设计能力。

四、结语

网页制作与设计第2篇

【关键词】课程定位 可持续发展能力 课程内容 项目化

一、课程现状分析

随着网络技术的不断发展，计算机网络应用日趋丰富，已经渗透到人类社会的各个角落，网络在人们生活的作用也越来越大，利用Internet足不出户就可以获取所需的信息，实现购物、炒股、旅游和学习等。网页和网站是Internet的重要组成部分，拥有一个自己的网站是政府机关、企业、个人的共同需要，制作出精美的网页来吸引浏览者的眼球，提高网站的知名度，是大家追求的共同目标，而这一切都依赖于网页的设计和制作技术的运用。

因此，该课程的课程设置必须符合教育教学规律和学生成长成才规律，符合专业人才培养要求。按照创新型人才培养模式重新构建课程建设平台，整体优化课程内容，重组课程结构，构建以能力为核心的课程体系，更有利于学生可持续发展能力的培养。

二、课程定位与课程目标

与高职“网页设计与制作”课程相关的职业岗位主要有：网页设计、网页设计与制作、网页美工、网页制作、网站管理、界面设计等。

目前，许多高等院校都开设了《网页设计与制作》课程，它已成为软件技术、计算机多媒体技术、计算机网络技术、信息技术、信息管理、电子商务、计算机应用专业公共的必修课程，也受到了其他专业学生的喜欢，成为一门选修人数最多的课程之一。

（1）对于多媒体专业。本课程与《图形图像处理》、《动画制作》等必修课程相结合，主要用于设计与制作网页，对网页中的文本、图像、动画进行加工处理。本课程作为多媒体专业的专业课程之一，是多媒体专业实践体系的基本技能模块之一。

（2）对于软件技术、计算机信息管理、计算机网络、电子商务等专业。本课程为后续课程提供静态网页设计与制作的理论基础和操作技能。本课程作为一门专业基础课，侧重于学习静态网页的设计与制作、HTML语言、CSS样式、JavaScript等知识。

（3）对于非计算机类的专业。《网页设计与制作》也是非计算机类专业学生最受欢迎的一门全院性选修课，通过该课程的学习，扩展知识面，了解网页设计与制作的一些基本知识和技能。

课程培养总体目标是通过4个项目（2个基础项目，1个提高项目，1个综合项目），使学生掌握网站开发的过程及网页的设计制作方法，能开发静态的中小型网站，通过多个网站的分级开发实施，不断强化学生的网页设计与制作技能，积累网页设计与制作经验，激发学生学习兴趣并形成持久的学习动力，提升学生自主学习能力，满足职业岗位需求。

根据高职学生的特点我们将人才培养目标定位于主要从事网站建设、网站维护等一线工作的高性能人才。考虑到计算机专业更新换代很快，学校教育不仅仅要教给学生技能，更重要的要教给学生一种学习的方法，以维持学生职业的可持续发展。我们在教学过程中采取项目化教学，以学生为主体，着重培养学生自主学习能力、创新能力，培养学生养成良好的学习习惯，以期学生在以后的工作中能够快速、高效的接受新知识，新方法。

三、课程内容的选取与序化

根据对职业岗位的需求调研分析，高职《网页设计与制作》这门课程的教学内容主要选取以下内容：HTML、CSS、JavaScript、网页制作基础知识、站点创建与管理、页面的整体控制、文本与图像操作、网页的布局、网页中的动感元素、超级链接与导航栏、表单网页、网页特效、网站规划与网页设计原理、网站测试、与维护。

充分考虑学生的认知水平和认知能力，把握学生的认知规律，合理地组织教学内容。按照由简单到复杂、由局部到整体、由易到难循序渐进地学习知识、训练技能。

高职学生对知识的认知有其自身规律，但高职学生认知规律与网站开发的工作过程存在不一致、不同步的问题。为了适应岗位工作需求，教学内容序化时应充分考虑企业开发网站的工作流程，以“网站开发工作过程”为导向，提高岗位的适应性。

综合考虑“网站开发工作过程”和“高职学生的认知规律”，将高职网页设计与制作教学内容划分为五个教学阶段：

第一阶段：欣赏优美网页，留下直观印象，激发学习网页设计的兴趣。

第二阶段：学习网页制作的基础知识，熟悉网页制作工具，训练创建站点、制作网页的操作技能，形成制作网页的感性认识。

第三阶段：学习HTML语言，掌握美化网页、制作网页特效的方法，进一步提高网页制作的技能，深入了解网页制作的编程技术。

第四阶段：学习网站规划与开发的流程，熟悉网页设计的原理与技巧，掌握网站测试与的方法。使用读者的网页制作水平由操作应用层提高到设计规划层，由感性认识提高到理性认识，由简单操作提高到综合设计。

第五阶段：按照企业开发网站的工作过程全面熟悉网站开发的全过程，将前面所学习的知识，所掌握的技能应用到实际网站开发的实践中。

经过对课程内容的选取和序化，教学内容的主线为：网站赏析-基础知识-站点创建-网页整体控制-文字操作-图像操作-网页布局-动感元素-超级链接-导航栏-表单网页-HTML语言-CSS样式-JavaScript技术-网页特效-网站规划与网页设计-网站测试、与维护-网站开发。

四、开发“项目化”的实践任务

“项目化”的实践任务具有工学结合、点线面结合等特点，训练网页制作、设计、开发的技能，达到学以致用、强化职业能力的目的。优选了5个有特色的网站让学生欣赏，开发5个真实网站，用于实践教学和技能训练。

网页制作与设计第3篇

【关键词】Web标准；电子商务网站；设计与制作策略；分析

前言

互联网技术的推广与发展进程不断加快，对人们的日常生活与工作各方面都产生了重要影响。网页的设计与制作随着网络技术、科技水平的发展受到人们的高度重视，其主要是将网络作为主要载体，将各种信息以更加快捷、方便的形式传达给人们。根据相关数据统计显示，从事网页设计制作的人员达到了300万之多，但在网页设计发展过程中还存在诸多问题，因此应突破网页结构单一、空洞等问题才能将网页的设计与制作水平进一步提升[1]。

1Web标准技术概述

1.1Web标准内涵

Web标准不仅仅作为标准，其主要是对一系列标准进行组合。一般的网页中主要由结构、行为、表现三部分共同组成，并与XML、XHTML相对应，表现对应的标准可以将其成为CSS。1.1.1结构在结构中主要的技术可包含拓展超文本标记语言与可拓展标记语言，在网站王者设计中主要将其应用在网页数据分类以及整合方面。在两个标准中，XML的表现形式为源语言，其主要是让用户字自身的语言进行标记与重新定义，具备较强的数据转换功能。1.1.2行为在Web标准的行为中，主要包含ECMAScript[2]与对象模型。其在网页设计与制作中主要可以应用在交互式的操作网页文档方面。其可以将界面上操作对象实施的交互操作有效实施，利用DOM可对对象有效定义与修改，还可将对象之间存在的各种关系有效处理。1.1.3表现其中最主要的技术便是CSS，通常人们将其成为层叠样式表，在网站网页设计中可应用改在控制浏览器的显示方面，其也是决定网页设计风格的主要因素。

1.2基于Web标准前提下的网页设计流程（略）

2基于Web标准标准的电子商务网页设计与制作流程

在基于Web标准进行电子商务网站网页设计的过程中，主要包含内容分析、结构设计、方案设计三部分。在进行布局设计的过程中，可利用XHTML与CSS对页面进行合理布局，可实现网页布局的目标。在进行设局实际过程中，可利用CSS与美工设计元素互相结合，将设计方法转化为最终的网页。

2.1内容分析

网页设计作为视觉语言的主要表达方式，应进行合理的编排与布局，从而确保网页的布局更加清晰、合理、内容充实。在进行网页版面布局的过程中，应将网页设计的更加醒目，使用户在使用过程中对各项功能一目了然，其他部分的版面设计应与主页的风格保持一致。较为常见的布局模式包括国字型、厂字型等。本文将以汽车用品为主的销售网站作为案例分析，由于汽车商品类型多样[3]，在设计网页过程中，应将商品的导航以及产品展示作为重点。案例中采用的网页布局为框架型布局方式，可将页面分成各种模块。在网页左边为纵向的导航栏，右边则为商品的展示栏。在网页底部呈现了网站的基本信息与商家的联系方式等信息。在网页模板的顶部与底部都会出现在每一个网页的同一位置中。

2.2结构设计策略

在对汽车销售网站进行网页开发过程中，可将其乘坐为模板，将其抽象地分为不同区块，其中包含核心流程业务模块、展示功能模块等。在将模块开发完成后便可投入使用。在用户浏览、操作网页的过程中，程序员可通过后台进行可视化的管理与操作，用户可以将不同的模块进行拖放配置，构建个性化的网页布局设计，方便用户的使用与浏览。用户在操作汽车销售网页过程中，其中的框架作为页面的骨架，决定了页面的整体布局与模块摆放区域。框架通常采用的是HTML文件，其主要为了将页面进行区分，还会在适当的位置对模块进行放置，可用<{widgets}>代码进行表示，方便用户在使用过程中利用可视化编辑将模块进行合理配置。对于板块区来说，其能将汽车销售网站最为个性的地方进行呈现，可利用模块内容将网页的更新实现，在网页页面中的各个模块都有指定的ID，模块的区域能呈现竖向摆放的形式，或呈现多个商品内容。模块为独立形态，可对不同的边框进行切换，从而将呈现样式进行改变。在网页模块的顶部与底部都会出现在各个网页中的同一个位置，对于任何电子商务网站来说，应将网站顶部合理设计，才能拥有功能完善、结构清晰的网站顶部，从而提升网站的效益。

3结语

基于Web标准对电子商务网站网页进行设计与制作，可促进电子商务网站的运作效率，为用户提供巨大的便利，从而促进网站的使用效率与综合收益，还可提升电子商务网站的运行效率与性能。

参考文献

[1]朱淑琴，魏威，张嘉萌.基于Web标准的电子商务网站网页设计与制作[J].计算机与现代化，2012，03：106~109.

[2]王亚辉.Web标准的电子商务网站网页设计研究[J].电子商务，2015，05：49+82.

网页制作与设计第4篇

互联网作为连接世界各地计算机的全球性信息化网络，它的传输内容是非常丰富的，涉及到全球的各个领域，是人们了解世界、掌握信息的主要渠道之一。网站作为信息时代基层的一个重要窗口，是院务公开、公正、服务职工、惠及民生的重要手段。办好网站，对于保障职工合法权益、增加职工之间互相的透明性、加强自身建设、提升知名度和影响力都具有非常重要意义。

2网站设计分析

文字、图形、色彩是展示网站内容的重要组成部分，是构成网站传达信息不可或缺的手段，同时也是用户对网站第一印象和整体风格关注的主要内部分。要想设计出符合人性化需求的网站，只有多为用户着想，认真地以用户的切身体会出发去完成网站的整体设计。当然，在设计过程中需要考虑的因素很多，用户群因素和界面因素是首要考虑的两个方面。

3网页制作

3.1选择合适的网页设计软件当前能使用的网页设计类软件很多，而选择一个功能强大、操作简单的软件则会让你事半功倍。对于网页制作软件来说，初学者最常使用是Frontpage和Dreamweaver，Frontpage是微软公司出品的一款网页制作入门级软件，FrontPage使用方便简单，会用Word就能做网页，所见即所得是其特点，该软件结合了设计、程式码、预览三种模式。Dreamweaver是美国MACRO~EDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，利用它可以轻而易举地制作出充满动感的网页。此外，制作网站还要用到边缘性软件，如photoshop、flash等，网页设计过程中可根据自己的需要灵活运用这些软件。

3.2选择网页内容前期的框架设计好后，就要为这个网站选择内容了。网页内容影响着网站的成败，所以我们要多花一些心思在内容制作上。内容选择要选有新意的、独特的，这些可以从图书、报纸、互联网等信息媒介搜集素材，素材通常分为三类一一文字、图片、影像。素材准备得越多越好，再从这些素材中粗中取细，以备制作网站时可以随时拿来使用。总之，网页内容是网站的根本，如果内容空洞，页面制作的再怎么精美，仍然不会留住访问者。

3.3运用网页设计中的色彩不同的色彩搭配产生不同的效果，反映出不同网页的文化内涵。因为它能产生强烈的视觉冲击，所以确定网页的色彩是相当重要的一步。在网页的色彩设计上，除了要表现心理和感情联想之外，还要考虑色彩的对比明暗、轻重、冷暖、调和色和纯度对比色的应用等等。合理的用色可以让信息的传递更有价值，使网页更有效和准确地把信息传达给我们的视觉。

4结语

网页制作与设计第5篇

关键词：网页设计与制作；课程标准化；实施方案；标准

1基于标准化的课程内容分析

1.1了解技术标准，锁定课程框架任何一门课程，都应该是基于某种需求而存在，这种需求必定有一个标准。而对于网站建设也是如此，W3C标准对建站相关内容都制定了成熟与完整的标准。《网页设计与制作》课程作为建站的主干课程，所有课程内容都应该来源于W3C标准框架之中。1.2深入行业调研，熟知技术要求标准一旦制定，便不会轻易改动，而课程的完整内容也不会有太大变化。但对于内容的理解和使用却是随着技术和行业的发展而变化。尤其对于网页设计，技术更新更是迅速，例如由原来的表格布局发展到现在的DIV布局，甚至将来可能的响应式布局、弹性布局、网格布局等等。内容还是这个内容，只是它的作用和用法发生了变化。而这些都是需要我们深入企业一线去调研才能知道的。1.3充分探讨沟通，完善课程内容一旦对技术标准和行业要求有了深入的认识之后，就要确定合理的安排课程内容，无论课程内容如何，重点是教授这门课程的老师。相关老师集中对内容进行讨论，不仅可以更好的对课程内容进行设置和安排，同时也是一个学习和提高的过程。

2构建标准化的课程内容

通过对标准的解读和行业的调研后得知，《网页设计与制作》这门课程大体可分为3大部分来构建：网页结构、网页表现与网页行为。2.1网页结构（HTML）此部分内容以HTML标签为核心内容，根据需要创建的内容，使用具有较强可读性和可识别性的标签来进行表示，例如要创建一个段落，我们可以使用<p>来表示，如果要创建一个章节，则可以使用<section>。这样不仅可以实现网页内容的创建，同时也完成了对网站结构的优化。通过W3CSchool和W3School的内容参照，可将HTML内容分为基础教程、高级教程、HTML媒体及XHTML等内容，由于目前最新推出了HT⁃ML5，在新旧技术的过渡时期，尽量将新旧知识点分开讲解，有利于更加清楚的分层。2.2网页表现（CSS）此部分内容为网页制作里面最重要的一个技术环节，用于网页布局与网页美化，CSS是网页课程里面的一项重要组成内容，同样分为两个版本，CSS2.0与CSS3.0，依据W3C标准，将选择器、属性、hacks、单位等等归纳完整，分类清楚。通过W3CSchool和W3School的内容参照，可将CSS内容划分为CSS基础教程、CSS样式、CSS框模型、CSS定位、CSS选择器及CSS高级教程。目前行业正处在新旧技术交替状态，因而在内容制定上也要分开制定，使得层次递进更加分明。2.3网页行为（javascript）此部分内容为实现网页交互，网页中使用的主要技术为javascript。而javascript是属于客户端脚本语言的一种，它也成为web前端技术里面的重要成员。目前很多非程序员都在使用它，可见javascript是一门相对容易上手的技术。原生的javascript对于一般人来说是有难度的，但是对于理解js（之后都用于javascript简写）是十分必要的，目前有很多基于js的框架，例如jQuery是一款非常优秀的js库，因为此部分内容可以设定为原生javascript与jQuery两个部分的内容。上述3个方面，按照W3C标准严格制订内容，便可基本全部涵盖课程所有内容。

3加强关联课程建设，做好课程衔接

仅仅依靠《网页设计与制作》课程内容是无法满足岗位与技术要求的，它需要大量其他课程内容的知识来支持，才能更好地学习和掌握，例如：网页美工，除了要求掌握网页结构、网页表现外，还要会使用设计软件先对效果图进行设计，甚至在目前已经越来越多的企业还要求网页美工掌握网页行为部分的知识技能，因而根据整个行业体系，可将建站内容分成3个阶段：3.1网页美工主要针对网页效果图，网页元素设计，可将此部分内容加入到平面设计课程中例如Photoshop、AI等，且平面课程一定要在网页课程之前开设完成。此阶段的课程内容必须要有针对性，要求对网页的构成元素的设计，网页的配色、网页的风格设计，以及客户需求的分析制定相关内容。此阶段将很大程度上影响到后续课程内容的学习的效果。通过个人实际的教学中发现，做出一个好的效果图作品，将会极大的促进学生的学习积极性，也会无形中使得学生学习更加主动和自信。3.2web前端此阶段是紧跟上一阶段的，当学习完网页美工，制作出最后的效果图后，紧接着就是将图片效果先实现成静态网站。这里存在一个重要的环节，那就是切图。许多人对于切图并不太重视，但实际情况是，切图的好坏，直接影响到整个建站的效率。切图不好也会造成流量浪费及网速变慢等后果，这就需要美工与前端人员之间能够很好地进行沟通和合作，因而这个阶段并不是完全的独立存在。3.3网站后台开发当静态网站建站完毕后，此时网站只具备在客户端电脑浏览的基本功能，人机之间无法实现数据的传输。例如当需要在网站留言，并马上显示在网站中时候，当需要对网页的数据进行及时的更新修改的时候，这都需要服务器端技术的支持。目前建站的服务器端技术主要有PHP、JSP、ASP等。从过程可以看出，此阶段是必须承接上一个阶段的才能继续实施的，如果更好的实现对接，这就要求前端或美工人员与后台人员之间进行详细的沟通。上述3.1和3.3是可选内容，各专业可根据自身需要选取开设。

4完善教学资源，规范教学内容

完备的教学资源是课程标准化建设不可或缺的一部分。制定完课程内容后，如何学习课程是至关重要的。由于师资不同、专业不同等原因，同一门课程，教学内容却相差甚远，应该针对具体的知识点，制定统一的基础案例，也就是必讲案例，不分专业，不分教师，凡涉及某知识点，此对应的基础案例为必讲内容，然后可在此案例基础上，自由增加其他案例。这次既可保证课程内容的标准化，又可灵活变通。必备的主要课程资源大致有以下几种：4.1标准化的教学大纲此标准化教学大纲是课程学习的指导性文件，应该是针对课程内容统一制定，不区分教师，不区分专业，对每一个知识点都提出达到的目标要求。教学大纲不易经常性变动，它是一个完整的指导纲领，只有当内容发送实质性变化时，才会做出改变，最后由各专业针对自身特点从此教学大纲中有选择性的执行。4.2标准化的实训大纲如果说教学大纲是一个指导性的文件，那实训大纲就是实实在在的执行方案，针对每一个知识点都应该设定一个独立的案例，有详细的实现步骤及过程，也要对每一个案例提出明确的实训目标。实训案例不仅仅要针对一个个小知识点，更要有完整的案例，通过小案例的叠加，并最终能实现一个覆盖全部环节的完整案例。4.3视频教程仅仅有文字性的指导文件不够，配套的视频教程是必不可少的。课程内容的制定向来都是开放的，课程的学习应该是不受时间和空间的约束。视频可以很方便地将知识点清楚的呈现。视频的制定应尽量碎片化，按知识小节进行准备，时长在20分钟以内比较适宜。有了视频，学习者就可以更加方便的自学了。4.4反馈系统课程的内容的完善和优化，需要不断地在实践过程中发现问题，总结问题，通过反馈系统，将各种建议和意见进行收集整理，查缺补漏，不断完善和改进，此反馈系统可以通过网络手段，通讯手段等方式实现。4.5网络平台如何将课程内容更好的呈现和管理也是课程标准化建设的一项重要任务。可以建立一个网络平台，如专门建设此课程的网站，与优质课程，共享课程，精品课程看齐，将反馈平台、视频案例、教学大纲和实训大纲有组织地结合在一起，并实现资源的共享。

5创新考核方式，将考核落在实处

对于操作性极强的课程，使用传统的考核方式效果并不理想，如何创新考核方式呢？这里有以下几点想法：5.1以赛代考以比赛成绩作为课程考核成绩。通过比赛提高学生学习积极性，并将课程所学知识运用到实际大赛中，这样既考查了学生的学习情况，也可进一步提高学生的学习能力。5.2以证代考可鼓励学生参加相应职业资格证书考试，以职业标准来考查学生学习情况，以考证成绩作为课程考核成绩。5.3答辩式通过对所做案例进行详细分析和讲解，由专业老师和同学进行提问的方式进行考核，这样不仅可以促进学生的学习积极性，也可以加强对学生监督考查。5.4自荐式一个班级的学生能力总是有差异的，有的学生学习能力较强，在课程中期便已经掌握课程要点，为了促进学生学习积极性，充分体现差异化的教学特色，可由学生自己申请考试，便在学期中期就完成考核，以便学生可以更加自由的利用和分配时间。无论采用哪种考核方式，只要真正地把考核落在实处就是好的考核方式。

6结束语

当前对于教育的创新和改革不断地深化，无论是教学方法的创新还是教学模式的改革，都必须立足于课程的建设，《网页设计与制作》课程标准化建设不仅是对课程内容的重新梳理，更是一个自我提高和学习的过程，对于提升教学质量，促进专业发展都是很有意义的！

参考文献：

[1]郑伟,薛岚.高职院校图形类专业实践教学研究[J].科技资讯,2010(12):248-248.

[2]郑伟.高职院校非图形类专业《网页设计与制作》课程教学改革的探讨[J].福建电脑,2011,27(1):205-206.

网页制作与设计第6篇

关健词:网页设计;教学方法;特点分析

《网页设计与制作》是近年来计算机专业领域发展最快和应用最广泛的课程之一,社会的发展也急需计算机网页设计、面向不同应用层次的专业人才。但就是这样一门看似简单好学的技能课程,却往往得不到很好的教学效果。常常是在学生学过之后,不是不能独立地进行网站规划和页面设计,就是设计达不到应有的功能效果和视觉效果。为此,我在《网页设计与制作》课程的教学过程中,对教学内容、教学方法、教学手段等进行了长期的研究和实践,收到了非常好的效果。

一、课程的特点分析

《网页设计与制作》这门课是在学习了专业基础课之后的一门专业课,该课程的教学实践性较强,在教学中要极大的激发学生的参与性,锻炼学生的动手能力,培养学生的专业兴趣。注意引导学生学习理论与实践相结合,将理论应用于实践。这门课的典型特点是:易学易忘。所以在教材上我选用的是北京交通大学出版社出版的《网页设计与制作》。这本教材主要介绍利用Flash、Fireworks 、Dreamweaver制作网页元素并将网页元素制作成大型网站的过程。这本书深入浅出,图文并茂,采用大量直观、生动、实用的网页制作实例帮助学生理解。

二、课程的教学方法

(一)课前认真备课,选好实例。

网页制作技术不断地发展变化,新的技术、新的方法也在不断涌现,所以我们也需要将网页设计的最新、最实用的技术引用到课堂上去。课堂教学是传授知识的主要方式和场所,目的在于将书本知识转化为学生的知识和技能。为实现这一目的,我深入钻研教材,理清教材内容特点、编排次序和知识点之间的衔接关系,整理出一条条线索。如在上第一节课时,我会从网上下载一些经典的并具有代表性的网页给同学欣赏,在看的过程中一一的介绍并分解到书本的各个章节的知识点,提高学生们的兴趣与积极性。

(二)课堂的教学方法。

教学过程是教师与学生之间信息传递及反馈的过程。“我认为教学的艺术不在于传授本领,而在于激励、唤醒、鼓舞。”因此,在学习过程中,给学生明确的思路,激励学生积极主动参与思考,运用任务驱动法、模块教学法,案例教学法和项目教学法等教学手段,引导他们在解决问题的过程中体验到学习带来的成功感和愉悦感,使学习兴趣长久地保持下去。

1.任务驱动法。

“任务驱动”教学法是一种以学生自主学习,教师加以引导的一种教学方法。它打破了传统教学方法中注重学习的循序渐进和积累的老套路,不再按照教学内容的从易到难的顺序,而是以完成一个“任务”作为驱动来进行教学,完成教学任务。在教学过程中,以若干个具体任务为中心,通过完成任务的过程,介绍和学习基本知识和技能,培养学生的自学能力、创新精神和合作意识。学生在上机实践时,我会布置与课程相关联的小任务,那么这些任务都是学生感兴趣的,要有浓烈的生活气息,让学生在密切联系学习、生活经验和社会实际的情境中去完成。

2.模块教学法。

模块式教学(简称MES)是国际劳工组织在20世纪70年代开发出来的一种较为先进的培训模式。它是在深入分析每个职业(工种)和技能的基础上,严格按照工作标准(岗位规范),将教学大纲和教材开发成不同的教学模块,形成类似积木组合式的教学方式。

根据教材与教学的特点,将整个教学内容分为三个阶段,第一阶段使学生熟悉并熟练使用网页制作工具Dreamweaver8.0;第二阶段在网页制作过程中利用Flash制作动画;第三阶段在网页制作过程中利用Fireworks进行图片处理。每一阶段因材施教,分层次教学,提高模块化教学效果。每一阶段的教学内容完成后,在专业机房组织单元考核,以实现分阶段达标,最终使学生能独立设计小型WEB站点。

3.案例教学法。

案例教学法,即在教师指导下,根据教学目标的内容的需要,采用案例组织学生进行学习、研究、锻炼能力的方法。案例教学法可分为案例导入、案例例证、案例讨论、案例结尾和案例练习等多种方法。

在课堂上我采用是案例例证法,通过精心挑选案例,明确提出需要掌握的知识点及操作技能,以案例带动知识点,贯穿整个教学过程。具体做法是通过具体案例提出任务,将任务分解到每次的课堂教学中实现,教学过程中为了调动学生的学习积极性,教学过程中常常采用互动方式,即老师提出一种解决问题的思路,然后让学生采用其他方式来解决同一个问题。

4.项目教学法。

项目教学法是指通过实施一个完整的项目工作而进行的教学活动,采取小组讨论、协作学习的方式。

将课程中的各个知识点或技术点采用教师给出项目要求或参考项目需求的方式,让学生分组选择项目或者自己调研确定项目,小组合作进行项目规划和页面设计。通过“小组合作规划设计”,以“项目小组”为基本形式、小组成员之间的合作性活动为主体、完成小组项目为主要目标、小组整体水平为主要依据来评定成绩的考核形式,为学生创造一个良好的合作氛围。小组的每一个成员在这一过程中都有发挥自己优势和表现自己的机会,通过小组成员之间相互讨论、评价、反馈、倾听、激励以及互为师生、优势互补等合作形式,激发学生的学习兴趣,改进学生的学习方法与态度,增强学生的集体荣誉感和团队协作精神。

网页制作与设计第7篇

关键词：Div+CSS;网页设计；版面布局

纵观国内外众多大型商业门户网站、个人网站、行业网站、企业网站等，其不仅设计风格迥异，颜色布局多变，给人以完全不同的视觉冲击和美观享受，而且网站的开发与设计呈现出日新月异的发展趋势出来。伴随着互联网的发展与崛起，信息技术的不断成熟与革新，如今网页设计已经不再从前那般简洁朴素，界面丑陋，反而愈加注重网页的编排，平面元素的应用，与用户的交互等等。因而，本文试图探讨并介绍网页设计中利用CSS+DIV的布局方法，网页制作的色彩搭配，文字的编排搭配，以及在网页设计中经常用到的经典版面布局风格，来重点论述网页设计人员是如何将平面视觉元素运用到各大网站中的网页设计里来的。

1Div+CSS的布局技术

1）Div技术从其本质上而言，是将网页HTML文件当中混乱臃肿的文字、图片等内容通过Div元素将其分割成每一个单独的区域，以此来形成一种逻辑清晰，结构明确的模块组合体。Div元素，凭借其拥有众多具有独特作用的属性，经常被开发人员用来赋予特殊的值，并将网页内容的开头和结尾处放置DIV标签，以此来构成完成的一个模块。2）CSS是一种具有标记行的特殊语言，通过CSS，设计人员可以把对网页层级结构的设计样式和网页内容两者之间完全分离开来，独立存在，这样一来，不仅有利于对网站中各网页以统一设计风格的样式进行布局，而且还有利于提升网页的加载速度，缩短其响应时间。从当前CSS与Div在网页设计中的运用案例中来看，这种布局技术不仅可以使得网页设计人员通过属性值的设定精准的将各类网页内容精准的进行编排和定位，而且还能够使得文字和图片之间以精美的排版样式为网页的整体浏览效果增色不少。另一方面，由于网页内容同其设计样式两者之间互相分离，因而当网页设计人员需要对其网页样式重新编排，或者在CSS样式中的某几项属性值修改时，只需要在单独存在的CSS文件中对布局元素加以重新设计即可达到目的，从而使得页面的布局与后期迭代工作变得更加轻松简单。此外，由于内容样式的分离，使得网页本身不仅在代码内容上大为减少，而且极大程度上减少了网页重新改变版面布局的时间，使得网站部署的带宽成本节省不少。

2网页设计的色彩搭配

网页设计这项工作，从其技术角度来看，不仅要包含各种平面设计元素，而且还需要严格遵循其固有的设计原则。而且网页设计本身所体现出来的艺术高度通常决定着网页的浏览量和点击量，同时也是网站开发人员同互联网用户之间进行互动和交流的重要媒介。一个网站在色彩上的搭配和选用不仅有利于传递网页设计人员所要表达的主题及内容，而且可以为用户带来极为强烈的视觉冲击，增强其网站本身的观赏性。

2.1划分网页层次

网页制作与设计第8篇

在互联网蓬勃发展的大环境下，《网页设计与制作》已经成为众多高职院校中开设的课程，但是实际的教学效果往往差强人意。本文尝试从教学内容的角度对高职《网页设计与制作》教学提出一些看法，以期提高《网页设计与制作》课程的教学效果。

【关键词】

网页设计；高职；教学内容

随着互联网逐渐深入到经济生活的各个角落，涌现出越来越多的网站。相应的，各类单位、企业等用人单位对网页设计与制作人才的需求也开始变得普遍。而《网页设计与制作》也早已成为大多数高职院校普遍开设的课程，甚至在同一所高职院校中也有相当数量的专业开设了这一课程，这些现象都反映出了社会对网页设计与制作人才的需求。而互联网的不断发展也在推动着社会对网页设计与制作人才水平要求的不断提高，也对《网页设计与制作》的教学提出了新的挑战。

一、《网页设计与制作》教学内容存在的问题

1.教学内容与实际应用脱节。

目前，《网页设计与制作》的教学内容大致分为：网页设计基础知识、HTML语言基础、CSS样式基础、网页文本和图像、超链接、表格、框架、Div、多媒体网页、模板和库、站点管理维护。不同院校、不同专业在具体内容的选择上可能会有所差异，但大致都包括了这些内容。首先，在《网页设计与制作》教学中，往往会以Dreamweaver这一网页制作软件的使用作为主要内容，所有的操作都依赖于Dreamweaver，很少涉及对HTML代码的讲解，这导致学生无法熟练的查看、修改HTML代码，一旦离开了Dreamweaver，学生将无法制作、修改网页。而在实际应用中，HTML代码是在进行网页设计时无法绕过的一个知识点。因为在Dreamweaver的设计视图下操作是不能解决所有问题的，很多网页设计中出现的问题只有通过查看HTML代码才能发现并解决。此外，Dreamweaver也并不是计算机上的常用软件，学生应该具备在脱离Dreamweaver的环境中进行简单网页制作、修改的能力。其次，早期的页面布局以表格布局为主，但随着互联网技术与网页设计标准的不断发展，表格布局技术已经不再是主流，取而代之的是Div+CSS布局，也是所谓的内容与形式分开的布局方式。在这种布局方式下，页面元素的布局更加灵活、页面代码更加简洁。而更重要的是，采用这种布局方式的网站在整体风格的管理和后期维护上更加方便、效率更高。因此，《网页设计与制作》的教学内容应当给予Div+CSS足够的重视，加大其在教学内容中的比重，以增强与实际应用联系的紧密程度。再次，随着移动互联网的兴起，通过手机等移动终端访问互联网的用户数量已经超过了传统的通过PC访问互联网的用户数量，如何设计适合于移动终端浏览的页面，也应该作为《网页设计与制作》教学内容的一部分。

2.只重视“制作”忽略“设计”。

不同院校、不同专业对《网页设计与制作》课程的命名不尽相同，但大多带有“设计”二字。而在实际的教学内容安排中，却往往没有体现出“设计”的部分。网页设计是一门典型的交叉课程，既有计算机科学知识，又有人文社会科学知识。网页设计虽较多的依赖技术性手段，但并不代表在教学内容的安排上就要以技术为主导。学习Dreamweaver也是只是为了掌握一种工具而不是最终目的，成功的网页设计作品还要有美观的布局、配色和人性化的信息导航。

二、确定合理的《网页设计与制作》教学内容

1.加强对HTML基础的教学。

虽然Dreamweaver作为主流的“所见即所是”编辑工具，可以让使用者不接触HTML代码就能完成大部分网页制作的工作，但是只有真正理解HTML语言，才能理解网页工作的原理，才能真正深入到网页设计的核心，才能学习到其他优秀网页设计作品的内涵，为将来的能力提升铺平道路。

2.加强对Div+CSS内容的教学。

Div+CSS布局已经是成熟的主流网页布局技术，《网页设计与制作》的教学应该突出对该技术的侧重，将已经被淘汰的表格布局作为辅助。同时，对CSS的教学内容应该贯穿始终，因为CSS可以说是控制网页元素表现形式的关键，掌握了CSS就能根据需要轻松的设置页面元素的各种效果，从而为整个页面增色。

3.增加对艺术设计的教学。

目前网页设计行业内最缺乏的是具备优秀设计能力的高端网页设计人才，而目前《网页设计与制作》教学中最欠缺的就是对设计能力的培养，导致学生在学完课程后也只能进行简单的模仿和重复，无法进行有效的创新和设计。因此网页设计课程的教学应该以艺术设计为出发点，增加对传统艺术设计方面的教学内容，如构图、色彩、设计思维等知识，并进行相应的实践练习，以此培养学生基本的审美能力和在设计上的创新能力，这样才能让网页制作技术服务于网页设计，从而真正体现出“设计”，避免舍本逐末。

4.补充对主流技术的教学。

互联网的发展日新月异，新的技术不断涌现，作为《网页设计与制作》的任课教师，应该具备一定的判断能力，将未来网页设计技术发展的新趋势呈现给学生，帮助他们紧跟行业动态，为将来就业打下良好基础。

三、结束语

《网页设计与制作》作为一门开设多年的课程，在教学内容的设计上必须要关注行业的最新动态，同时明确课程的核心内容，才能培养出社会所需要的网页设计人才。

作者：韦喆哲 单位：广西经济管理干部学院信息管理系

参考文献：

网页制作与设计第9篇

关键词网页设计与制作网站网页中图分类号：G712文献标识码：A

1 技术与艺术的争论

“网页设计与制作”从课程的名字看，我们要对网页设计与制作进行反思，它到底是艺术问题还是技术问题？

互联网已经与当今的我们息息相关，网页的设计与制作过程一直伴随着技术和艺术的争论。为此，我们有必要在开课前就让我们的学生明确：在网页设计与制作过程中，到底是技术重要还是艺术重要？还是两者都重要？

在教学过程中，我们要不断地提醒学生反思以下几个问题：（1） 网页设计与制作是为谁做的？（2） 谁会来看你的网站？（3） 网页设计仅仅是能看就行吗？（4） 如何考虑受众更多地和更有效率地接受网页上的信息？（5） 网页设计与网页制作有区别吗?（6） 技术和艺术如何更好地服务于网站？

作为课程的教学者和学习者，需要大家都可以作为一个技术和艺术的全能者，虽然我们每个人在各个方面都有所侧重，但只有很好地在设计与制作过程中，多些反思技术与艺术的问题，才能避免我们偏离网页设计与制作的初衷。

在教学过程中，教师要不断地提醒学生反思这个部分的技术在他的网站作品中是否用到？千万别因为让学生为了炫耀技术而采用多种风格的动画，添加少美感或与主题完全不相关的东西。别因为大量的技术使用加重了浏览器的负担，浏览器受带宽的限制，要学会为浏览器减负。

2 网站与网页的分合

教师在讲课中也许会混用网站和网页，但是在设计与制作过程中，教师必须让学生对这两者有所共识：网页是一种可以在互联网上传输，能被浏览器认识和翻译成页面并显示出来的文件，网页是网站的基本构成元素。网站也叫做站点，是提供各种服务和信息的基地。

学生可以深入区分开两者的异同之后，需要养成先建立站点，之后再在此基础上创建网站所需的相关文档的习惯。

3 实用性与艺术性的思辨

网站的定位，对于网站的设计与制作有很大的影响，如何权衡网站的实用性和艺术性？也许我们要考量的有很多。网站的实用性和功能性固然重要，但不要忘记提升它的艺术高度。如何避免用教条的、形式化的方式设计网页，作品给人一种像是一个模子印出来的感觉。教师在教授学生模板使用的同时，也要提醒我们的学生，别因为使用了免费模板而自鸣得意，那些真正好的网页设计绝不是在免费模板的制作上而停步不前，一定是那些懂得如何发挥自身的创意思考，来积极创作属于自己风格，又能很好地宣传自己的网站的人才是真正的设计者。

4 系统性与适应性的融合

高职教学强调项目化教学模式和基于工作过程的教学法，如何让学生在把握基于工作流程的任务化项目式教学中，可以更加全面地适应当今不断变化的技术？从知识的整体性来看，也就是如何保证在工作过程中，他们学习到的知识内容的完整性、适应性和迁移性？

针对对高职学生技术技能型目标的定位，我们更多地需要不断为项目中加入挑战与扩展训练的模块来提高学生知识的完善性，弥补我们在项目化教学过程中的那些知识的缺陷，可能带给学生在今后工作发展中的盲目和无助感，也更好地拓展学生的独立思考和发散性思维能力。

在网站的信息结构方面，国外有信息结构专家，网站由信息结构设计师与网站创意设计师共同探讨、协作完成。国内网站策划由专业的市场行销、策划人员来做。面对刚刚学习此门课程的学生，这种网站的总体设计是需要他们学完本门课程之后才能具备，但怎么能在此时就让他们具备此方面的总体设计能力，需要学生搜集和分析与自己设计的网站相同类型的网站的相关导航和网站的栏目来获得，也在此基础上来揭开网站的总体设计环节，当然，也需要培养学生不断地适应修改完善现有的网站，不断明细网站的定位。

5 过程性与结果性的统一

每一个网站的开发必然经过一定的工作过程，才能完成整个站点的，从网站需求分析、总体设计、模板设计、首页设计、子页面设计、测试到设计总结，在我们的教学中如何以一个完整的项目为依托，而又同时指导学生完成自我开发的个性化的网站任务，是网页设计与制作课程需要解决的问题。

在教学过程中，学生也需要走从欣赏、模仿到创作的过程。教师需要通过案例教学，将一个个美观大方的网页呈献给学生，带领他们分析网页中的相关内容而开始每次课程的学生，让学生不断地发现其中的奥妙。引导学生学会模仿网页的整体布局，网页的LOGO设计，通过大量的模仿练习不断提炼，最终确定适合自己设计的网站的相关内容设计。

6 职业素养与职业能力的协调

很多人对网页设计师这个职业的质疑：他们仅仅是比平面设计师多懂点代码，比程序员多懂点设计，有时候他们还会搞点动画？仅仅如此吗？在国内的网页设计师，更多兼任着设计与制作两个方面的任务，尤其是对于中小型企业来说，更是如此。为了能够更好地在教学中通过项目、案例等内容来培养学生的职业能力，适应大中型与小型企业的需求。也不得不要求我们在全能中培养专才，在专才中注入全能的思想。从开始的网站策划阶段，培养学生的资料搜集能力，整理归纳能力。在网页设计布局阶段，不断地发挥学生的创新能力，自我发展与感悟能力。在网站的测试阶段，教师引导学生再次审视自己最初的规划目标是否真的实现了？达到最终的分析总结反思能力。

7 结论

高职《网页设计与制作》教学中，只有教师从多角度对课程内容和教学方法的思考，才能更好地引导学生的学习过程，也才能更有利于对于学生问题思考能力、职业技术和职业技能的培养与提升。

参考文献

[1]孙东梅. Dreamweaver完全实用手册[M].电子工业出版社,2011:3-4.