网页设计与制作十篇

网页设计与制作篇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

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

2网站设计分析

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

3网页制作

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

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

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

4结语

网页设计与制作篇3

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

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

1Div+CSS的布局技术

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

2网页设计的色彩搭配

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

2.1划分网页层次

网页设计与制作篇4

随着社会的快速发展和互联网的普及，计算机技术及其应用发挥着重要的作用。为了全面提高高校学生的网页设计能力，激发学生的网页设计兴趣，探索课程改革的几点思路，从而实现对高校学生的能力提高、兴趣培养和考核标准的改革，结合课程改革的《网页设计与制作》教学模式的研究显得极为重要。

【关键词】

网页设计；课程改革；教学模式

《网页设计与制作》是一门实践性极强的课程，也是为满足社会需求而设置的。网络是人们获取信息的重要来源，随着网络在人们生活中的地位逐渐上升，企事业单位和政府机构以及个人通过网页来宣传自己的单位和个人形象。因此，提高学生对网页设计的兴趣、培养学生自己开发网站的能力显得尤为重要。

1激发学习兴趣，鼓励创新精神

1.1案例教学古语讲“学起于思，思源于疑”，良好的学习兴趣是学习的先导。首先采取案例教学，摒弃传统的教学方法。在传统的课堂上，教师讲授理论知识，之后学生进行上机练习。往往会造成机房内操作过程中无处下手。因此，结合教学内容和目标选取典型的案例进行案例教学法能够很好的解决这个问题，提高教学效果。枯燥的理论与实际案例相结合，在课堂上及时展示网页设计的效果，必将为课堂带来全新的效果，对于学生熟悉理论知识和实际操作能力也能全面加强。激发学生的学习兴趣、鼓励创新精神，化被动为主动和提高学生解决实际问题的能力是网页设计课程改革的出发点。

1.2互动教学建立教学网站，开设相应的学习论坛。在网站上传课堂视频、经典课件、网页设计的学习资料以及课堂作业，加强师生的交流、资源共享。学生在课堂上不可能掌握教师所讲的所有内容，加强互动交流和平台建设这样有助于学生的课后复习巩固，清楚学生在课堂上的疑问。

2实验设计与大作业制作标准

制作一个主题网站，主要从下面三个主题中选择：个人网页、校园生活、文学。综合运用本课程所学的内容知识，导航、布局清晰、信息分类合理。可以从网上下载部分资料，但是不能超过整个内容的30%，绝对不允许直接从网上下一个网站，一经发现直接记0分，总的页数应超过8页。（一个包含主题内容的html文件或asp文件算一页。）具体要求如下：（1）站点结构清晰，站点内文件夹名、文件名命名规范，杜绝使用中文汉字。(5分)（2）页面布局可采用表格或者css+div。（10分）（3）创建模板，并根据模板至少创建1个页面。（10分）（4）为一个页面添加浮动框架，并有链接的页面显示到浮动框架部分。（10分）。（5）使用css样式美化网页。（10分）（6）网页中必须有插入图像、文字、鼠标经过图像等页面元素，并与主题相关。（10分）（7）要求首页中加载5种链接方法：内部链接，外部链接、邮件链接、锚点链接、图像链接。（15分）（8）网站中应用的方法和技巧的种类多少。（10分）（9）网站中无断掉的链接和孤立的文件。（10分）（10）制作一份网站设计说明书，放在站点总文件夹中，并用A4纸打印一份。（该说明书必须能够体现制作网站的过程，否则视为抄袭以0分计。）（10分）在网站制作过程中应注意以下几点事项：（1）建立站点，图片存放在文件夹images中。（2）所做网页的首页文件名必须为index.html。（3）不要忘记给每个页面命名。（4）所以文件和目录名全部使用英文字母和数字，不得汉字和全角字符。（5）网上下载的文字要注意删除多余的超级链接和？之类。（6）最好在每个页面加一个超级链接返回首页。（7）网页的总容量一般不要大于15mb。（8）如果网站制作粗糙，站点结构混乱，每个扣5-10分。（9）如果运用的动画、图片等不符合作品反映内容扣5-10分不等。将制作的网页及说明书压缩成一个文件，文件名为：学号_姓名_班级。

3团队协作

在网页制作过程中，鼓励学生进行分组讨论，以团队形式完成作业，培养学生的团队协作能力。在制作过程中，将同学们以5-7人分成一个课题小组，按照分工协作、组长负责的原则加强同学之间互相讨论、互相学习、取长补短，一个团队的同学共同思考完成一个网站的制作，锻炼学生的合作精神。设计多个题目供学生选择，学生可以自选题目，充分发挥学生的兴趣和主观能动性，在规定时间内完成最后进行网页设计汇报演示。

4《网页设计与制作》课程的考核标准

多数课程通常采用笔试的方法，然而计算机类课程考核的重点是实际操作能力而非单一的理论知识。《网页设计与制作》这门课程考核内容过多偏于死记硬背的记忆性知识考核，就恰恰忽略了课程本身的性质，因此应重点培养学生的实践能力。《网页设计与制作》的课程考核方式要全面反映学生的真实学习水平、激发学生的学习兴趣和制作灵感。为充分调动学生课堂以及课后完成网页制作的积极性，在具体的考核中平时成绩占总成绩的20%，期末大作业的网站设计占总成绩的80%。这样能够调动学生上课以及完成课堂练习和实验任务的积极性。

5结语

网页设计的人才培养目标和方案必须适应市场经济对人才的需求，培养具有能够自主思考、开拓创新和独立解决实际问题能力的学生，这也是高等教育的基本目标。结合课程改革的《网页设计与制作》教模式以学生为主题，发挥学生的主观能动性，鼓励团队协作和师生平台交流必将发挥重要的作用。

参考文献：

[1]马国德.对提高课堂教学质量的一点思考[J].青海教育,2002(04):18.

[2]刘显丽.网页制作课程的整合研究[J].辽宁教育行政学院学报,2005,(02):125-126.

[3]尹玉菡,杨万军.非计算机专业《网页设计制作》课程教学设计与实践[J].辽宁师专学报,2010,12(01):44-45.

[4]史科蕾，高咏欣.《网页设计与制作》课程的教与学[J].信息技术与信息化,2007(02):129-131.

[5]刘强,张阿敏,翁艳彬.网页设计与制作[M].北京:高等教育出版社,2010.

[6]DarcyDiNucci.WebSiteRedesigns[J].PearsonEducation,2001.

网页设计与制作篇5

关键词：网页设计与制作 教学 改革

随着万维网的迅速发展，网页已经成为网络世界进行信息传播的最主要载体，网页设计与制作人才的培养成为当务之急。由于社会和专业的需求，《网页设计与制作》课程广泛受到各大中专学校学生的喜爱，下面就《网页设计与制作》课程的教学与大家进行探讨。

1、课程性质和特点

在中等职业学校，《网页设计与制作》课程是计算机应用技术和计算机网络技术等专业的必修课程。它是一门工具性和实用性都比较强的实践课；不仅涉及计算机图像处理、文字版面处理等相关知识，而且需要对相关课程有一定的基础；是一门集成了多种计算机知识和技术的综合，其本身具有很强的实践性，是网站建设的基础，而网页本身是当今社会网络世界传播信息的最主要的载体，同时网站又是企业向用户和网民提供信息（包括产品和服务）的一种方式、是企业开展电子商务的基础设施和信息平台。

2、课程教学目标

本课程的教学目标是使学生了解HTML语言的语法规则，掌握文本、链接、列表、表格、表单、图像、多媒体、框架元素标志及属性，了解HTML、JavaScript脚本编程语言的基本语法知识，能独立设计小型WEB站点。

3、课程教学内容

根据前面对《网页设计与制作》课程的性质和特点以及课程教学目标分析，在制定教学大纲时，不应该拘泥于某一本或者某几本特定的教材，应着眼于当前网页制作技术发展的现状。网页制作过程中必然涉及到图片的处理、动漫制作等，若能应用好Photoshop和Flash也是网页设计的关键，此部分在我校计算机应用技术和计算机网络技术专业在学业生入学第一学期已经开设《图形图像处理软件Photoshop》、第二学期《图形图像处理软件Photoshop实训》和《二维动画制作Flash》，第三学期开设《二维动画制作Flash实训》和《网页设计与制作》，因此教学内容设计时不再重复这部分内容。另外，Fireworks同样也是作为网页制作的辅助工具，若学生能掌握，对网页的设计开发将起到画龙点睛的作用，因此这部分也安排了相应的学时。

《网页设计与制作》课程体现了网页设计与网页制作是紧密联系的，是完成网页作品流程中的两个阶段，但这两个阶段之间并没有严格的界限，往往是迭代进行的。网页通常都是图文并茂的，对页面的美观有一定的要求。也就是说合格的网页作品，在技术上不仅要符合相关的制作规范，还应考虑页面布局、图片放置、色彩搭配、下载速度等因素，这些因素都与用户体验密切相关。因此，在学生掌握了基本网页制作后，笔者安排了网页设计方面的内容学习，主要包括色彩、图像、布局等。在讲授的过程中，还展示了部分网站（以电子商务网站为主），让学生去分析总结各个网站的特点，使得学生对网页制作的内涵有进一步的理解。

4、选择教材和教学模式

这门课程，仅仅通过在多媒体教室中讲解理论知识、操作步骤和做典型范例是远远不够的。那样，一堂课下来学生只会做教师教的，不会融会变通，学生的创新意识得不到培养。我们只有突破传统的教学模式，才能培养学生自我探索、独立研究能力与自主创新精神。如何突破，并且取得良好的教学效果呢？通过几年的教学探索和总结，笔者认为，可以从以下几个环节来进行把握。

4.1 优选教材

合理安排教学内容一本教材的编排质量如何，会在一定程度上影响学生的学习兴趣和教学效果，特别是针对中职生这样一个特殊群体，我们更应该优选教材。我们应该选用在内容编排上由浅入深、由易到难的教材。

4.2 精心设计网页制作课程的教学模式

掌握一定的理论知识是做好实践的基础和前提。所以老师决不能忽视课堂教学。我校该课程教学采取的是教学做一体化的教学模式，充分体现理论知识与实践操作相结合。教学设计可采用“课堂案例分析――软件功能解析――课堂练习――课后拓展――作品展示”这一思路进行精心编排。课堂教学的案例、课堂实践的案例、独立实验的案例不仅涵盖教材中的实例，还引用了大量企业中的真实案例。

5、教学方法与手段

5.1 教学方法的改进

在教学过程中，根据学校的培养目标和本课程特点，结合多年来实际的教学经验，对教学方法实施了以下几方面的改进。

（1）教师演示制作网页案例，传授本节课所需掌握的知识点为了能激发和调动学生学习的积极性，避免“满堂灌”的传统教学模式，在教学过程中采用案例教学法。根据教学进度和教学要求设计案例并充分备课，讲授并解析与案例相关的理论和技能，分析案例讨论中可能出现的任何问题，而且案例要具有典型性和针对性，从适合学生的接受能力来选择和设计。（2）教与学相结合教学模式。在教师通过案例教授相关理论和操作基础后，要求学生能够按照案例的要求，通过上机及时模仿制作和案例相似的实验，巩固和加强学生掌握的教学中的知识点。

5.2 教学手段的改革

《网页设计与制作》是一门实践性很强而且广泛应用的技术，为了说明网页设计中的原理及其在实际中的应用，实时展示非常重要，因此在网络课程中的授课中接入Internet，随时将讲述的相关知识通过实实在在地网络来说明和解释，这样学生就不觉得枯燥和乏味，使学生明白了学习网页设计的重要性和实用性。

6、考核方式

该课程的考核内容应以实践操作为主。因此将考核方式定为考查，给出一定范围的主题，留给学生足够的时间完成作品的设计和制作，最后上交制作好的作品即可。留给学生足够的时间和发挥空间，可以使学生充分发挥他们的想象力和所学知识。这样的一种考核方式经过几届学生的实践，受到同学的好评，并且出现了相当一部分好的作品。

网页设计与制作篇6

[关键词]高职教学；网页设计与制作；课程改革

在高职院校教育中，网页设计与制作是计算机专业的重要课程，并且在非计算机专业也是重要的选修课程；在当今社会，计算机的应用越来越普及，与人们的生活、工作密切相关，因此网页设计与制作课程的重要性得到教师与学生的普遍认可。在新形势下，高职计算机教学工作应更好地适应社会发展需求，加快改革步伐，提高教学的实效性。以下将提出几点高职网页设计与制作课程改革的具体措施。

1创新计算机教学的内容

计算机技术的发展与变化非常迅速，如果教学不能做到与时俱进，当学生毕业参加工作后，在校期间所学的知识已经过时，失去了学习的意义。因此，在网页设计与制作教学中，教师应根据实际情况调整教学计划和教学内容，删减已经落后的知识内容，添加前沿知识。同时，教师要多关注社会变化与市场走向，培养的学生既要具备夯实的理论基础，也要具备丰富的实践经验。例如，根据网页设计与制作课程的教学目标，围绕“Dreamweaver”讲解相关的基础知识，并且培养学生理论与实践相结合的意识，给学生更多动手操作的机会。

2提高课程体系的实践性

高等职业学校的根本教育目标就是培养实用型人才，因此网页设计与制作课程改革要设计合理的课程体系，以培养更多的实用型人才。首先，课程体系建设要紧密围绕职业岗位的用人需求，着重开展实践教学，培养学生的实践运用能力；其次，由于计算机技术的类别较多、变化较快，因此教师在夯实学生基础知识的前提下，还要多引入拓展性教学内容，激发学生的拓展能力和创新能力，为学生的未来发展与就业做好准备。例如，在网页设计与制作课程的实践教学中，教师可多引入一些真题模拟练习，以某个公司企业的实际情况为案例进行题目设计，学生可以结合自己掌握的知识以及感兴趣的内容选择课题；也可邀请相关公司的工作人员实际安排任务，让学生真题真做，根据设计要求及设计步骤完成开发过程，这样在学生实际操作过程中，不仅能巩固所学的知识内容，客观认知自身的优势和不足，也能明确学习目标、制定学习计划，以此提高学习主动性与积极性，激发学习动力；学生只有将课堂学到的知识内容进行综合运用，才能真正适应未来就业与岗位需求，成为社会所需的人才；再有，教师设计的课堂教学内容要与高职学生的实际生活体验相贴近，不断调整和改进实践教学的内容与形式，保持课堂教学的新鲜感，调动学生的学习兴趣并提高教学质量。

3运用多样化的教学方法与教学手段

高职网页设计与制作课程教学中，教师应运用各种各样的教学方法与教学手段吸引学生的注意力，给课堂教学注入活力，让学生在轻松、愉快的氛围中掌握知识。一方面，案例教学法是课堂常用形式，不仅能考核学生对所学知识的掌握情况，也可引导学生进行实践演练，灵活运用教材中的知识内容，让学生形成更为直观的学习体验。教师在课堂教学之前，组织学生进行有效的预习，将教学内容及预习资料发放到学生的邮箱中，便于学生课前准备；或者教师也可在教学中录制视频资料，课下备份给学生或上传到学校网站，这样学生在课堂没有理解的内容，可以在课下自行学习；为了方便学习讨论，教师还要组织学生开设班级交流QQ群，学生在课下可以互相学习或随时随地向教师、同学请教问题，更好地记忆、理解和运用所学知识；另一方面，网页设计与制作教学的关键在于实践环节，教师要多组织学生参加课外活动，如定期举办网页设计与制作交流会、网页设计与制作大赛等，让学生以个人或者团体的形式参加比赛，采取初赛、复赛、总决赛等晋级方法，激发学生的竞争意识与团队合作能力，最终获胜者可获得精神奖励与物质奖励，并将评选的优秀作品在学校计算机系统中展示。通过丰富多彩的课外活动，极大激发学生的学习主动性，教师也可趁机了解学生对专业知识的掌握情况，以此作为调整教学计划和教学内容的参考。

4改变课程的考核方式

由于网页设计与制作课程具有实践性特征，所以传统的考试模式不能如实反映学生的学习水平，教师要改变过去的考试形式，设计实践操作课题，让学生根据所学的知识点进行实际操作并创新设计网页内容；因此，针对高职网页设计与制作的课程考核，应将学生的课堂学习表现与期末作品评价相结合，其中平时出勤率占20%，网页设计专业性占40%，网页创意占40%，通过这种考核方式才能更好地反馈学生学习态度、体现学生能力水平。

5改善教学条件和教学设施

高职网页设计与制作课程的开展，离不开良好的教学条件与教学设施保障，包括专业的师资队伍、完善的实训基地等。首先，选择一支专业水平良好的教师队伍，尤其着重培养青年教师或者计算机专业教师，根据高职学生能力水平与社会发展需要，设定合理的教学改革方案；其次，完善实训基地建设，为学生创设一个真实的学习环境，不仅有利于实现网页设计与制作课程的教学目标，也能让学生提前适应社会环境，更好地融入社会岗位中。由上可见，新形势下实现高职网页设计与制作课程改革具有必要性和重要性，作为教育工作者应转变教学观念，积极投身于教学改革工作，及时发现以往教学中存在的问题与缺陷，围绕现代社会的实际需要，培养更多高水平、高素质的计算机专业人才，体现高职教育的培养特色。

[参考文献]

[1]刘杰逾.高职《网页设计与制作》课程现状及改革措施[J].山东工业技术.2015（23）.

网页设计与制作篇7

关键词：网页设计与制作；教学平台；FileZilla；配置文件；批量创建用户

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2013）09-2135-04

网页设计与制作是高等学校计算机基础教育的主干课程之一，是覆盖面较广的一门实践性非常强的计算机基础课程。学生在课程中学习从网页的制作到完整网站的建立的系统的内容。教学过程中的重点一般放在网页的制作这一阶段，忽略了网站、网站展示的后一阶段的过程，使得学生缺乏对创建网站的全面了解。我们通过FTP服务和Web服务的结合，建立了网页设计与制作教学平台，弥补了网站和网站展示环节的空缺，使得学生可以获得创建网站的完整体验。同时，在这一过程中，通过开发相应的扩展程序，简化了为大量学生创建教学环境的工作，使得教学工作能够顺利展开，在实际教学中取得了良好的效果。

1 网页设计与制作教学平台的框架

网页设计与制作教学平台通过提供一个真实的网站和展示的空间，使得学生能够体会完整的网站的过程，从而获得与实际接轨的实践能力。我们使用FileZilla服务器作为学生上传网站作品的FTP服务器。在FileZilla服务器上可以创建用户，并可以给用户分配主目录，设置访问权限。但是FileZilla本身不支持批量用户的创建。我们在FileZilla的基础上，分析了FileZilla的配置文件的格式以及各参数的语义，开发了批量生成FTP用户的扩展程序。它能够依据学生的学号，快速地在FileZilla中创建用户，并为每个用户在服务器上自动生成对应的根目录。我们还开发了自动生成学生网站作品展示界面的前端页面生成器程序，从而使得学生能够完整的体验网站的过程。

网页设计与制作教学平台的框架如图 1所示。

其中各部分的功能如下：

FileZilla FTP服务器：负责接受用户以FTP方式上传的网站内容。

Apache Web 服务器：负责把用户上传的网站内容以WWW的形式向外。

存储：负责存储用户上传的网站内容。FTP服务器和Web服务器共享相同的网站内容空间。

FileZilla扩展：负责批量地创建FTP用户

前端页面生成器：负责根据学生信息自动创建学生作品的展示页面。

2 FTP服务器平台的建立

2.1 FileZilla的配置信息

FileZilla服务器使用“FileZilla Server.xml”作为它的配置文件，其中记录了FileZilla的监听端口以及FileZilla的用户信息等内容。一个FileZilla用户的配置信息大致如下：

其中各行配置的含义如下：

1：用户user01的配置信息起始处

2：用户的密码

3：用户所属的组。同一组用户拥有组的相同的配置，从而减少配置的工作量。

4-6：限制来自某些IP地址的用户不能访问服务器。

7：用户的主目录，即用户登录后进入的目录。

8：用户读文件的权限。如果值为1，则拥有读文件的权限。

9：用户写文件的权限。如果值为1，则拥有写文件的权限。

10：用户删除文件的权限。如果值为1，则拥有删除文件的权限。

11：用户追加文件的权限。如果值为1，则拥有追加文件的权限。

12：用户创建文件夹的权限。如果值为1，则拥有创建文件夹的权限。

13：用户删除文件夹的权限。如果值为1，则拥有删除文件夹的权限。

14：用户列出文件夹的权限。如果值为1，则拥有列出文件夹的权限。

16：用户user01的配置信息结束处

通过对FileZilla配置信息的解读，为自动建立配置信息文件奠定了基础。

2.2 FileZilla扩展的开发

我们使用开发了FileZilla批量用户生成扩展工具。通过循环读取学生的学号，使用这一信息作为学生FileZilla服务器上的用户名。根据2.1节的配置信息的含义，自动为每个用户生成相应的配置信息。工具的使用界面如图2所示。

当点击“生成配置信息”后，通过如下的代码批量地生成所有用户的配置信息。

2.3 用户主目录的自动创建

根据学生的学号，我们开发了在服务器上自动创建学生在FileZilla服务器上的根目录的功能。

通过循环读取学生的学号，使用“puter.FileSystem”对象在服务器上创建以学生的学号为文件夹名称的学生在FileZilla服务器上的根目录。

2.4 配置信息的生效

关于所有学生的配置信息生成后，通过先把“FileZilla服务”停止，然后把自动生成的配置文件“FileZilla Server.xml”拷贝到FileZilla服务软件所在的文件夹，并重新启动“FileZilla服务”，批量创建的用户即可生效。

3 Web服务器平台的建立

当学生通过FTP客户端使用自己的用户名和密码登录FileZilla服务器并上传网站作品后，需要通过Web服务把各个学生上传的网站作品展示出来。我们把学生的主目录映射到Web服务器Apache的虚拟目录，并开发了自动生成展示界面的前端页面生成器程序。其中，为学生的每次上传的作品生成对应的通过Web服务器的链接。

4 结束语

网页设计与制作是一门注重实践的课程。该文借助FTP服务平台和Web服务平台以及相应的辅助扩展程序的开发，建立了面向网页设计与制作的教学平台，弥补了通常教学环境中由于不具备实际的网站环境从而无法为学生提供完整的网站建设过程讲解的缺陷，使得学生能够获得与实际接轨的完整的网页设计制作的经验。

参考文献：

[1] Bradley J C，Millspaugh A C.Visual 程序设计[M].李旭，译.北京：清华大学出版社，2008.

[2] Randolph N.Visual Studio 2010高级编程[M].任鸿，译.北京：清华大学出版社，2012.

[3] Powers L，Snell M.Visual Studio技术大全[M].刘彦博，译.北京：人民邮电出版社，2009.

[4] FileZilla project[EB/OL].http：//.

网页设计与制作篇8

关键词：网页设计与制作；实训；拓展训练；项目实战

中图分类号：TP393 文献标识码：A 文章编号：1674-7712 （2012） 16-0138-01

《网页设计与制作》是一门实践性、操作性和创新性很强的课程，它能很好地锻炼学生的动手能力和团队协作能力，并且还能紧贴市场，做到以典型工作过程为导向，进行实际项目的开发训练，使学生应聘的时候不再只是有理论知识，而没有任何实践经验。以此来真正做到理论、实践并行，与企业的工作需求接轨，培养应用型的专业人才。

《网页设计与制作》课程是我院多个专业的核心课程，如计算机应用技术、网络技术以及广告设计等专业都开设了此门课程，该课程对学生的操作练习有较高的要求，实训的教学内容都是融入在课堂教学中，由于课程安排的比较分散，不能有效地集中训练学生的动手操作能力以及策划设计网页的能力，学生在学完该课程之后，有的不能独立地完成网站规划和页面设计，有的设计效果不能达到预想的功能和视觉效果。因此，实训课程在《网页设计与制作》教学中起着比较重要的作用。根据《网页设计与制作》课程的这一特点以及我的个人教学经验，下面对《网页设计与制作》实训教学谈一下自己的意见和看法。

一、提高教师的专业技能

作为一名教师，他既是课堂的领路人，又是学生学习的辅导者，教师的专业水平直接影响着学生各方面能力的提高。职业教育传授的不仅仅是理论知识，还要传授学生操作技能，培养学生的动手能力。在高职的教学中《网页设计与制作》的实训课程主要就是培养学生的实践动手能力，要求学生能够通过所学知识做出优秀的作品，因此这门课程对学生的动手实践能力要求是非常高的，这就要求教师首先要具有较强的实践操作能力，只有教师具有了一定的项目实践经验，才能充分地指导学生完成优秀的网页作品。因此，教师平时就要注重理论与实践相结合，加强自己的企业实践，在补充自身理论知识的同时，还要不断提高自身的专业技能和实践能力。

二、多种教学模式相结合，培养学生学习兴趣

（一）通过优秀作品赏析，激发学生的学习兴趣

在授课初始阶段，准备一些精彩的网站案例，在课堂上演示。在展示优秀网站案例的同时，学习网页制作技术之前首先让学生欣赏优美网页，教师分析网站的整体设计、网页的结构布局以及颜色搭配，让学生边欣赏网站，边听教师讲解，在美的熏陶中，让学生能够感觉到一个好的网站不仅仅有宣传推广的作用，它更是一件艺术品，完成它是需要倾注心血的。

每个教学单元中都去展示相应的网站案例，并且在网站案例展示的同时，引导学生去思考网站的美工、布局以及样式等都是怎样完成的，自己能否通过努力完成这样优秀的作品。几节课下来，就有不少学生跃跃欲试，从而有效地调动学生的积极性，激发学生的学习兴趣。

（二）阶段测试训练

通过过程考核，提高学生学习的紧迫感，巩固学生的阶段性学习成果。

首先教师布置本次课的实训任务，并分析其实训要点；然后学生根据本次任务开始制作网页，教师进行辅导；实训完成后教师对实训过程中出现的问题进行分析解决，并选几位学生的网页作品进行展示，其他学生对其进行点评。

（三）拓展训练

可以通过课外兴趣小组集体活动等形式，提高学生的人文素养。课余时间充分利用网络资源进行课外拓展实践，如果遇到疑难问题学生可以通过”E-mail”和“QQ留言”的方式与辅导教师取得联系、化解难题。利用课外拓展实践的方法对于能力强的学生可以进一步提高他们的操作技能；对于能力差的学生可以解决他们存在的问题。

（四）项目实战训练

将实际项目引入进教学，并对其进行任务分解。

例如让学生制作各行业的门户网站，首先教师以客户的角色为学生布置项目，学生进行市场调研，撰写需求分析报告；然后学生自己制定项目实施计划，进行项目设计实施；教师再以客户的角色验收项目，进行评价；最后学生撰写项目总结。以这样一个过程让学生在开发实际项目中提高职业能力，培养他们的工程意识。

三、增加实训课程的课时，提高学生的动手能力

实训课程主要是在强化理论知识的同时提高学生的操作技能，因此实训课程必须是以学生操作为主，教师辅导为辅，在实训过程中帮助学生解决遇到的问题。从网站的策划、素材的搜集到网站页面的设计布局、网页的制作以及网站的测试与等等，学生都要自己独立去完成，在整个实训过程中学生会遇到不同程度的问题，教师可以在旁协助。学生就在这样一个不断遇到问题、解决问题的过程中提高自己的能力。实训结束后有不少学生会感慨到实训一个礼拜比上一个学期的课学到的知识要多很多。因此实训不仅仅是学生制作网站的过程，更是学生自我学习，自我提高，自我评价的过程。

同时实训的环境也是非常重要的，实训课程基本都是在微机室完成的，在微机室里学生可以实现一人一机，并且每台电脑都直接与互联网相连，学生在实训过程中，可以上网查找相关资料，搜集所需素材，解决实训中遇到的问题，同时还可以直接通过教师、同学的帮助快速解决问题。

四、结束语

《网页设计与制作》是一门专业性很强的课程，在教学过程中突破传统理论教学和讲解为主的模式，把课程中的理论内容，合理地穿插到实践教学中，把原来枯燥、单调的讲解通过实践环节让学生消化和掌握。通过实训达到高职高专学生的培养目标。体现以学生为本，最大限度地调动学生自主学习的积极性，培养了学生的综合能力，使学生掌握一门技巧，这样对教师也是一种锻炼和提高。

参考文献：

[1]瞿江.浅谈网页制作实训教学[J].电脑知识与技术，2011，26.

网页设计与制作篇9

“网页设计与制作”课程正逐渐成为各高校近年来计算机专业领域发展最快和应用最广泛的课程之一，作为对学生实践动手能力要求较高的课程，该课程在许多高校已经采用了实验课堂的教学形式并受到了学生的普遍欢迎。那么，如何提高该课程的实验课堂教学质量，真正增强学生的动手实践能力则是摆在各位任课教师面前的首要问题。我们经过近五年的实验教学观察和总结，将从教学内容、教学方法以及教学效果三个方面阐述如何解决该课程发展面临的问题。

2.存在的问题

“网页设计与制作”作为许多高校计算机专业的专业基础课或者选修课，在实际教学过程中，经常面临的问题有：

⑴任课教师对新技术的把握能力不够。由于技术的发展日新月异，Html标准也发展到了Html5，一些任课教师显得无所适从。

⑵部分院校教学形式仍然采取理论和实验分堂教学。采取理论和实验分堂教学，在教学过程中学生理论课程听起来枯燥，在实验课又翻开书按部就班，学生掌握知识成效甚微。

⑶单纯工具型教学。学习任何一门课程的目的应该都要做到学以致用，简单的工具教学只能满足学生会不会的问题，要制作出优秀的网页还需要学生对艺术设计等相关知识有一定的了解。

3.实验教学改革

3.1 教学内容

根据制定的人才培养方案，该课程在我校开设一共32学时，全部采用实验课堂教学。经过对本课程的不断摸索和总结，我们将学生需要掌握及完成的教学内容分为六大模块：模块一，掌握网页、网站基础入门知识。根据“先总体后具体”的原则，总体讲述网站的概念以及网站上线的流程，要求学生不会做网页但要先会搭网站，计划2学时；模块二，掌握基本网页语言标签。通过对一些典型的小型网站来讲解并要学生掌握HTML语言各类标记符的使用方法，计划10学时；模块三，掌握网页布局，学会层叠样式表（CSS）。通过案例，要求学生学会样式控制并布局网站，计划10学时；模块四，掌握制作网页相关工具软件的使用。结合具体的实例介绍并掌握Dreamweaver、Microsoft Visual Studio、Photoshop等软件的使用方法，计划4学时；模块五，网页设计进阶学习。通过对优秀网站的鉴赏和分析，提高学生的学习兴趣，使学生头脑里形成设计的概念、网站规划的思路及流程，同时介绍网站的总体结构、风格定位、色彩的应用以及版式的设计等方面的知识，计划6学时；模块六，网页综合设计。学生自行选择一个积极健康的主题设计一个综合类网站，该内容在课堂外完成，可在课程中期开始同步进行。

3.2 教学方法

通过长期的教学实践，我们可以将教学方法归纳为以下几点：

（1）采用实验课堂教学，实践为主，讲授为辅

该课程的操作性较强，实践综合性也较强，课程学时也较紧凑，采用理论课堂教学，学生势必在有限的学时内收获较少，故采用实验课堂教学。在具体实验教学过程中，采取实践为主，讲授为辅的教学形式，如在教学内容模块一里面，计划2学时，可以1/3时间讲授基础入门知识，2/3时间学生根据教师精心准备的教学材料动手搭建成型网站，现学现用，学生记忆深刻，能较快掌握相关知识及技能。

（2）采用典型案例实验教学

该门课程强调实践动手能力，所以在实验课堂讲授时必须围绕案例进行教学，离开案例教学则该门课程又将倒退回理论教学的层面。要采用案例教学，需要从宏观上进行教学设计：可将互联网上较热的实际案例引入实验课堂教学体系中，每个重要知识点均与实际应用结合起来，在实际教学中，多引用实例，提高学生的学习兴趣，让学生主动去模仿、分析、创新等，同时也能帮助学生加强深对网站网页的理解，使其能够灵活运用所学的知识，从而获得一种成就感。该案例教学方法可以贯穿于教学内容的模块二至模块六，如在模块三掌握网页布局过程中，可以选用学生比较熟悉的淘宝、京东等知名企业网站进行讲解，可以由浅入深，从简单的登录网页到复杂的网站首页一步步剖析架构，特别是对于诸如margin、padding等容易出错的问题进行重点讲解，让学生能模仿并自己重新设计主题书写网页。

（3）拓展课堂、多元一体化辅助实验教学

要想真正让学生的动手能力达到质的飞跃，达到学以致用的目的，仅靠有限的课堂学时是远远不够的，但单纯增加学时又是不太现实和最不可取的方法。在实验教学过程中，我们不断摸索，总结出我们认为行之可效的方法：拓展课堂、多元一体化辅助实验教学。具体表现在以下几个方面：

①借用现代化多媒体手段学生自主学习。在教学过程中，学生除了按照任课教师的要求和准备的教学材料进行学习外，还应在任课教师指导下，充分利用现代多媒体等手段进行网上学习，如在基础知识模块学习过程中，可充分借助W3C学院（W3Cschool）进行辅助学习及实践练习。

②举办课堂外网页设计进阶讲座。在实验课堂教学过程中，模块五涉及到一些进阶的学习，但学生要借此在网页设计上有所造诣是远远不够的。我们在教学过程中，针对不同的学生对象，采取学生自愿的原则，免费举办一些网页设计进阶讲座，讲座的主题包括网页设计涉及的一些前言技术、美工素养及技能、学生创新创业思维的训练等。通过这些进阶讲座，学生提高了网页设计与制作的综合能力，同时也开拓了眼界。

③鼓励学生参加网页设计竞赛。在每学年学校或者全市、全国举办的网页设计等竞赛中，我们积极鼓励并指导学生参赛，从而进一步激发了学生的学习兴趣。

3.3 教学成效

经过近五年的实验教学摸索总结，在近三年的教学中，该课程保持了良好的教学效果，在学生之间口碑较佳，也得到了其他后续专业课程任课教师高度的认可，在学校的教学评分中也一直位于所有课程前20%之列。同时，课堂外的免费讲座、培训以及开展的各项相关比赛也极大鼓舞了学生的学习兴趣，为学生创新创业指明了方向，学生最终完成了该课程“学什么”、“怎么学”、“作什么”的关键问题，为今后的进一步深造学习打下了坚实的基础。

网页设计与制作篇10

关键词 案例教学 网页设计

网页设计作为一门综合性、实践性、应用性极强的课程，在教学的方法上应有别于一般的基础理论课程，原来那种照本宣科填鸭式教学已经不适应高职教育的需要，必须改进传统的课堂教学方法，引入现代教学理念，提升学生学习的主动性，提高学生实际动手能力是教学关键。

基于以上特点，“网页设计与制作”这门课程设要以学生实际出发， 以“教师为主导， 学生为主体”的符合这门学科特点的教学与管理模式， 让学生在教师的指导下， 对所学的课程进行探索、分析、研究。

一、案例教学法的思想和特点

案例教学法也被称为“实例式教学”或“基于问题的教学，其原型是抛锚式教学。这种教学方法要求建立在有感染力的真实事件或真实问题的基础上，学生要想完成对所学知识的最好办法是让学生到现实世界的真实环境中去感受、体验（即通过获取直接经验来学习），而不是仅仅聆听教师关于这种经验的介绍和讲解。与传统的以教师讲授为主的被动灌输式教学相比，案例教学法是一种注重师生互动的开放式研究型的教学方法，注重学生动手能力的培养，是一种具有针对性、实践性、启发性、研究性和时效性的教学方法，能开发学生智力，培养学生分析问题解决问题的能力，提高学生素质。符合高职教育的特点。

二、案例教学法运用在课堂教学中

《网页制作》是一门实践性和综合性很强的课程，涵盖Dream Weaver网页制作软件、Flas制作软件、Photoshop图形图像处理软件、脚本语言等多方面的内容，知识点非常丰富。笔者从事该门学科教学多年，摸索出一套案例教学方案，使用案例教学法可以大大地提高学生的积极性。案例教学方法如下：

1、兴趣激励阶段

这一阶段主要采用优秀作品展示教学法，其目的是：提高学生的兴趣、让学生了解一些基本的网站布局。作品来源：一个是网络上的一些优秀的网页；二是往届学生的优秀作品；三是跟学生的生活相关的网站，如校院主页等。

2、基础知识学习阶段

在这一阶段，学生要学习一些网页设计的基本知识和基本技能，即根据不同的知识点，来设计出与之配套和相适应的案例，这些案例的编排要遵循由浅入深、由易向难、循序渐进的原则。网页设计课程教学中，教师可以选取一二个典型的网站进行简化设计，将有关网页设计的基本内容、基本概念包括在内，学生在教师指导下，自主地完成相关案例网站的设计，从而掌握网页设计的基本技能，可以达到良好的教学效果。

3、技能强化阶段

在这一阶段主要采用较为简单的中小型案例教学法。其目标是，让学生在复习旧知识点的过程中学习新的内容；将上一阶段的的案例整合成为一个具有一定雏形的完整网站，让学生来进行尝试，这样就使得学生在熟悉的环境中学习了整合能力。

4、综合网站制作阶段

这一阶段主要采用综合案例教学法。本阶段主要是为了提高学生综合网站开发的技能水平，同时也为了检验学生的学习成果。在此阶段中，教师可以让学生自己选择一个主题，利用所学知识和技术开发一个网站，要求学生独立完成，通过相应的方式上传到WEB服务器上，作为学生的最终考试成绩。总之，这个阶段对于学生知识的巩固和技能的提升是大有裨益的，同时也可以充分发挥学生的主动性，锻炼学生动手能力，培养求异思维。

三、在实施案例教学过程中必须注意的问题

1、选择合适的教学案例

教师要根据教学进度和教学要求设计案例， 选择的案例必须具有针对性、代表性、实践性、系统性的特点。（1）案例应具有针对性，这样做容易突出授课目标，不易偏离授课内容；（2）案例应具有代表性，学生能够从该案例得到启发，进行拓展性思考；（3）案例应具有系统性，前后相互联系，相互渗透，后续阶段的案例尽可能涵盖前面的内容，以加深和巩固所学知识；（4）案例应具有真实性，从实际出发，根据学生的特点，尽可能设计一些学生感兴趣的、贴近生活工作的案例，通过生动有趣的案例教学激发学生的学习兴趣，加强学生的动手能力和创新能力的培养；（5）案例应循序渐进，从易到难的递进方式设计，一方面是有利于调动学生的积极性；另一方面是便于学生对项目分解的理解，从而掌握整个项目的核心思想和构建步骤。

2、组织课堂讨论及案例总结

组织案例讨论旨在分析问题， 提出解决问题的途径和方法。教师应对整个案例的特点、主要知识点进行分析、解剖、归纳并及时组织学生对案例实施过程及其中的网页技术进行讨论，使学生对所学的、所做的案例有全面的认识，对设计步骤、设计思想有比较完整的认识。

案例经过学生的讨论后， 教师应该及时做出讲评。这样做有利于学生把要求掌握的知识记牢，同时， 我们要改革课程成绩的评价方式， 提高平时成绩的比例， 刺激学生上课的积极性。

3、实践教学环节—采用任务驱动法

任务驱动教学是建立在一定理论基础上的一种教学模式，它强调学生的学习活动必须与任务相结合， 以问题的探索来引导和维持学习者的学习兴趣和动机。教师应创建真实的教学情境， 让学生带着真实的任务去学习， 以使学生拥有学习的主动权， 掌握网站设计与网页制作的知识与技能。

四、结束语

总之，在高职院校计算机专业《网页设计与制作》课程教学中运用案例教学法，在实践环节实施“任务驱动”教学法，有利于学生实践能力的提高和理论知识的掌握。案例教学法只是现代教学方法中的一种，要优化课堂教学，应要综合运用多种教学法，每个教师都应根据教学大纲、教学内容和学生实际情况的不同选择和运用不同的教学方法，只有这样才能真正提高课堂教学效果，提高教学质量，培养符合时展要求的新型高素质应用型人才。

参考文献：