网页的设计与制作精品(七篇)

序论：写作是一种深度的自我表达。它要求我们深入探索自己的思想和情感，挖掘那些隐藏在内心深处的真相，好投稿为您带来了七篇网页的设计与制作范文，愿它们成为您写作过程中的灵感催化剂，助力您的创作。

篇(1)

Photoshop在图片处理上具有强大的功能，尤其是对图像进行精细化操作，更是奠定了其在广告设计及美术创作中的坚实地位。当然，在网页制作模型设计上，Photoshop依然可以凭借其精细化、功能化优势来实现美轮美奂的网页规划效果。

【关键词】Photoshop 网页制作 模型设计 实现方法

1 引言

现代网络技术的发展，对网页制作提出越来越高的要求。Photoshop作为功能强大的图像处理软件，同样在网页制作设计中不容小觑。如在不同格式文件上兼容性强，图像处理精度高、误差少、视觉效果显著，更成为网页图像、动画、基于Web页面设计领域的优秀工具。

2 Photoshop在网页建模的独特优势

2.1 页面布局功能的灵活性

利用Photoshop来进行网页设计，主要是利用图层的特色功效，可以实现不同层次上不同元素的放置，且在进行移动时不会影响其他元素及整体视觉效果。当然，对于图层空间不仅可以放置单独页面要素，还可以放置链接，还可以进行叠加，确保不同图层上不同要素的色彩、亮度、大小等不会出现偏差。由此以来，在进行网页要素规划及布局上，可以依照设计者的思维进行灵活操作，增强了设计自由度。

2.2 修改功能的便捷性

由于网站在设计过程中因客户的要求而进行修改是常有的，而Photoshop因其便捷的修改功能，可以先通过Photoshop设计出效果图，然而结合需求变化来优化，最终获得客户的满意。对于其他软件则无法实现自由、从容的修改。

2.3 网页浏览的快速性

网页制作的目的在于浏览，而浏览体验不仅需要美观和规范的视觉效果，还要具有良好的网站交互能力。特别是对于大型网页架构，因加载项目过多，对网速要求过高。但对于Photoshop制作的网页，多采用裁切体积及文件格式转换，对系统资源占用率较低，从而能够保障快速的反应速度，提升浏览的流畅度。

3 Photoshop网页制作模型的设计与应用

3.1 Photoshop新建图像文件

根据网页设计模型基本框架要求，首先需要新建图像文件，以常规1280*800像素为例，可以设置浏览器的图像宽度、高度为1260*780，选择RGB色彩模式，便于在Photoshop中利用色彩的叠加营造五彩缤纷的视觉效果。

3.2 Photoshop设计网页布局

针对不同功能、不同用途的网站，其页面框架结构也不尽相同。通常情况下，对于视觉的热点效应多聚焦于左上角。在进行网页浏览时，左上部及上部为视觉中心，其后往下阅读，呈现出“F”形特征。因此，在页面布局上，围绕网站标识、站名、导航条、热点栏目、头条等页面布局要素，来重点优化左上部区域。如对于综合性网站，通常采用“国”字型页面布局，最上面为标示栏及广告条，其次为网站的主体内容，再次左右各一列小字号标题栏目，中间侧重于图文并茂的内容，最下面为基本信息，包括版权、联系方式等说明。因此，在设计上，利用Photoshop在页面上设置“T”型字，形成三块空间，最上面为标识、广告条等；左侧为导航栏，右侧为网站主体内容；接下来设置不同的页面图层，并在不同图层上进行绘制，结合Photoshop的图形、渲染功能来完成。

3.3 Photoshop网页模型集成

完整的网站需要具备Logo、广告栏Gif动画，背景底纹及导航按钮等。对于网站Logo，利用Photoshop丰富的图像设计功能来设计独特的富有个性的标识。如新浪网标识中的“i”通过进行艺术化处理，将之转换为活灵活现的眼睛，正是传达“世界在你眼中”的设计理念，增强了视觉动感；再如人人网的标识，利用对“人”字的抽象变形，代表每一个人；辅以圆圈，寓意人际圈，其共同的交集则象征着人与人的协作、分享、沟通。可见，对于标志的设计，既要从视觉审美上来表达生动的效果，还要从文化内涵彰显丰富的意蕴。Photoshop可以实现对矢量图形的任意变形而不失真，从而为我们进行自由创作和设计提供了无与伦比的设计环境。如可以利用钢笔工具来绘制矢量图，保存为JPG格式占用空间小，带来较快的响应速度。

广告栏多采用GIF动画，位置多居于网页的最醒目中间靠上，在动画内容上可以是企业精神、也可以是产品介绍，以图像自动切换等方式来呈现。利用Photoshop和ImageReady可以制作出简单、易用、低系统占用率的GIF动画，避免了传统SWF动画设计对插件的要求。举例来说明，以600*200像素广告栏为例，其操作过程如下：首先新建600*200像素文件，分别插入四张不同的图片到1，2，3，4个图层里，调整各图层中图形尺寸，使其保持和谐度；分别在4个图层新建文本图层，并打出不同的广告语，与相应图层进行合并；利用ImageReady，打开后点击“动画”面板，复制当前帧，连点3下，使帧数为4；分别对各帧进行操作，每一帧显示一个图层的内容；设置动画延时数值；转存为GIF动画格式，预览效果。

3.4 Photoshop设计底纹背景

在利用Photoshop进行背景设计时，可以利用无限填充功能，只要设计一个背景元素，将之无缝连接并填充整个背景页面即可。如可以设计一个1*2像素的条形状背景图，保存为JPG格式，并填充整个背景，而这个背景文件却仅有几k的大小。

3.5 Photoshop设计网页按钮

按钮是网页制作模型中的必要内容，在设计上要注意几点：一是大小尺寸要以像素为单位，避免图像失真；二是保存为JPG格式，对于有透明像素的需要改为GIF格式；三是利用Photoshop处理过的源文件要另存为PSD格式，便于后期修改；四是利用切片工具进行切割时要依靠参考线，保持页面布局一致性，避免爆边。

4 结语

总之，利用Photoshop进行网页制作模型设计，要从网页整体功能及展示特性上，积极挖掘Photoshop在网页图像、动画、WEB化页面设计中的优势，提升网页制作的应用效率。

参考文献

[1]王春艳，张彦芳.Photoshop在网页制作中的应用[J].电子制作，2014（02）.

[2]邓美玲.浅谈Photoshop在网页制作中的应用[J].无线互联科技，2015（01）.

篇(2)

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

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

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

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

一、提高教师的专业技能

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

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

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

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

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

（二）阶段测试训练

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

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

（三）拓展训练

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

（四）项目实战训练

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

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

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

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

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

四、结束语

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

参考文献：

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

篇(3)

在实际的教学中，主要从以下几个方面来进行。

1.选择适合的项目。项目的确定不是随便进行的。第一，所选择的项目要能够将大部分的知识点都包含在内，还有能够与较多的知识点相结合；第二，项目的难易程度的确定，要根据学生的实际水平来确定；第三，所选择的项目要能够被大多数的学生接受并且喜爱。因此，项目的选择是第一步，也是比较关键的一步。

2.项目的设计。对网页设计与制作专业的学生来说，他们主要的学习内容就是将网页进行美化以及实现网页的功能，要能够掌握基本的Html语言，要会使用Dreamweaver、Photoshop以及Flash等软件来进行美观并且实用的网页的设计。网站的建设可作为一个整体的项目，之下可以分出一些子项目。可以以“在线留言板”来作为课题。它包含了HTML、CSS以及VBScript这三个方面的内容，与学生的学习能力比较适宜，此外，它也是比较通用的，在很多的网站上都是不可或缺的，有应用价值。首先将学生分成小组，每一个组都要有一个组长，组长来进行项目任务的分配，每一个组员都要有专门的职责，并且要定期的进行会议的召开，来报告各自的工作进度。如果有哪一个人遇到了困难，小组之间要共同的解决。

3.项目信息的收集。在这个阶段，要使学生对项目进行熟悉。在教师将项目确定好之后每一个学生都要根据项目的要求以及自身的情况，来对相关的信息进行收集整理以及分析，然后确定工作的计划。

4.确定方案。学生经过分组讨论之后，要确定最佳的方案。将个人工作与小组工作相互结合，每个人要事先做好计划，小组间来进行讨论，小组的每一个成员都要提出自己的意见和看法，最终来确定最好的方案。在此过程中，教师要进行指导。

5.项目实施。计划方案确定之后，小组内的每一个学生都要按照计划方案来进行计划的实施。项目组长来将任务划分给每一个同学，每一个同学都负责不同的部分，并且要独立的完成任务。

6.教师检查项目。在项目完成之后，学生要对项目的结果进行检查，然后再由老师进行质量的检查。并且将其完成的作品进行公开的展示，让学生来找出优点以及缺点。要让学生进行自评以及互评。这样，可以使学生锻炼他们的责任心，提升他们的质量意识，并且可以学习评估的方法。教师不但要对内容检查，还要检查其实际的功能效果。

篇(4)

摘 要：随着Internet技术的迅猛发展，公司、企业和个人普遍使用网站对新产品进行，对企业形象进行推广，各种电子

>> 中职物流专业技能型人才需求现状调查与分析 高职会计专业课程体系与岗位能力需求适应性的调研分析 《网页设计与制作》 高职影视动画专业职业岗位的需求与发展调研 基于《网页设计与制作》骨干校课程开发的调研 如何使广告设计专业的课程设置与专业技能对接 服装专业岗位人才需求与中职技能竞赛的比较研究 职业技能大赛对《网页设计与制作》教学的启示 医药化工与分析检验专业技能化教室建设的探索与思考 高职应用电子技术专业技能抽查与行业人才需求紧密对接的探讨 高职模具设计与制造专业技能人才评价机制的研究 广告设计专业技能竞赛人才培养的探索与实践 高校音乐专业技能课教学考试网络管理系统的设计与运用 电脑艺术设计专业职业岗位群与职业能力调研分析 测绘工程专业技能培养的研究与实践 专业技能训练的实践与体会 高校学生身体素质与专业技能相结合的比较分析 高职工业分析与检验专业技能考核办法的研究 浅谈中小学音乐教师的知识与专业技能分析 推进专业技能、职业素养与企业需求“零距离”对接 常见问题解答 当前所在位置：l

[4]

[作者简介]刘悦（1979.3-），女，辽宁省辽阳市人，辽宁建筑职业学院教师，讲师，硕士，研究方向：计算机网络。

[课题项目]省十二五规划课题《高职网页设计人才培养模式的研究与实践》，主持人：王超

篇(5)

关键词：网页设计；微课；教学设计

在信息化、大数据时代的背景下，数字化的表现形式成为企业文化介绍、企业产品推荐、企业信息等的首选，因此企业对集文字、图象、动画、视频等多媒体数字资源有效集成的网站需求量大增，网页设计要求也逐步提高，对高校网页设计类专业人才的培养质量期待值也大幅提升。在传统计算机课程中，无法实现重复讲授操作演示的课堂教学模式，已经严重制约了学生的学习积极性和主动性，尤其是学生设计能力的培养，几乎成为空谈。微课这种信息技术与教育的结合物，由于文件体积较小，适于各传播途径，反复浏览，反复模仿操作的特性，使其快速的风靡了各大高校，成为了突破教学瓶颈的重要手段。

1微课的定义

微课的定义比较多，目前比较通用的定义是：教师在课堂内外教育教学过程中，为了保证学生获得最佳的学习效果，围绕某个知识点（重点难点疑点）或技能等单一教学任务，利用信息化手段和工具开展简短完整、生动有趣的教学活动。微课的特征主要以现在教学时间较短，教学时长一般为5—8分钟左右，最长不超过12分钟；教学学内容较少，一般围绕一个具体的知识点来开展，问题聚集，主题突出；表现形式多样化，可以是实物操作、教师讲授、学生表演、分组讨论、师生访谈等；教学组织完整，覆盖了“提出问题，探究问题，解决问题，教学反思”的教学组织全过程；成果传播多样性，适合网络教学、手机视频、微信讨论等多样性传播。

2微课的教学设计

以微课为主要表现形式的课堂组织，需要对所有的知识点进行细化和类化，按照课程的主线重构教学内容，教学设计是微课成败的最关键环节。本文选择网页设计与制作课程中网页布局学习情境中的神奇的圆角布局这个学习子情境来具体阐述。

2.1教学目标的制订

神奇的圆角布局学习子情境目标就是要让学生完成在网页布局中，如何实现单圆角、对称圆角、多圆角的设置，熟练掌握网页CSS中关键参数的名称和设置方法，能根据设计要求独立完成与网页效果图相一致的圆角表现形式。

2.2微课内容的确定

在两节课的课程时长下，所要讲述的内容比较多，包括网页DIV块的制作和设置、CSS设置、文字添加与编辑等。什么教学内容适合以微课形式体现呢？我们一般选择学生理解较难，操作步骤较多、容易遗忘的关键知识点进行微课设计。在本次微课中，笔者选择了CSS中圆角关键参数的设置作为微课的主要内容，对于DIV块的制作和文字编辑等内容，因为有前续课程和WORD操作课程的支撑，只在教师操作演示环节进行复习和强化。

2.3微课教学组织

微课的教学组织十分灵活，可以是课前的自主学习，可以是课中的教师授课，也可以是课后的学生复习，甚至是以上多种形式的结合。在神奇的圆角布局学习子情境教学中，采用的是课中教师授课和课后学生反复复习的结合形式。具体教学组织为教师案例展示，任务驱动—教师操作演示（非微课内容）—指导学生观看微课—学生解决问题。课后学生还可以反复观看微课内容，突破时间、空间的局限，反复练习，直到熟练掌握为止。

3微课的制作

微课的主要表现形式是视频，在制作过程中要关注内容的趣味性、价值性和完整性。在神奇的圆角布局微课中，首先以一段设计师作品一次次被公司否定，设计师痛不欲生的搞笑动画开头，吸引学生的注意力；其次分析该作品的不足，抛出圆角布局的设计理念，详细演示多种圆角的设计方法；最后给出详细设计任务和高年级学生的优秀作品，为学生提供设计灵感，培养学生举一反三的能力。整个微课时长9分钟。在制作微课过程中，需要使用到一些信息化工具与计算机软件，最基本的如耳麦(附带话筒)、录像软件CamtasiaStudio、视频后期处理软件会声会影等。

4微课的应用

在网页设计与制作课程中采用微课后，学生可以在课余反复观看微课内容，反复练习较难的操作细节，将传统的课堂教学延伸到了课后，64课时的课程时长无限扩大。经过教学实践证明，利用微课，在教学中实现了学中做、做中学、学做一体的教学合一，提高了学生的学习主动性和实践动手能力，极大提高了学生的分析问题和解决问题的能力，使学生很好的达到了网页设计从业人员的基本职业能力。微课在教学中的应用目前还处于实践的初期阶段，不同专业、不同课程在微课中的应用方式均有差别。探索微课的开发、应用还有很长的阶段，需要我们思考研究和长期的实践积累，进而不断提高教师的信息素养，制作出更多更优质的微课资源。

参考文献

[1]丁敏.微课在高职院校市场营销课程中的应用[J].当代教育实践与教学研究，2015（11）.

[2]陈亚枫.探微求知摸索提高———市场营销微课制作的实践与思考[J].职业教育（中旬刊），2014（10）

[3]胡铁生.高校微课建设的现状分析与发展对策研究[J].现代教育技术,2014(24)

[4]李爱武.“任务引领教学法”的实践[J].职业技术,2012(5).

篇(6)

关键词：网页设计制作；DreamweaverCs5；功能；应用；发展

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2013）24-5428-02

网站开发工具的出现是在1997年，随着时代的不断改革与变化，网站开发工具也有了新的突破。DreamweaverCs5网站开发工具为使用者进行网站设计制作提供了方便，节省了工作时间。它新增了很多功能，为广大使用者展现的是一种可视性网站工作界面，其操作性极强，有丰富的站点管理，它的出现提高了网页设计与制作的水平，丰富了网页设计的表现形式。

1 DreamweaverCS5在网页设计中的应用

DreamweaverCs5在现今网页设计与制作中得到了广泛应用，在网页设计制作中发挥着重要作用，对网页设计制作的发展具有一定的积极意义。

首先，DreamweaverCs5中的ASP功能较为强大，它是微软公司通过不断研发，开发出的一种代替CGI脚本程序的新程序。ASP主要在服务器端使用，它能够实现与数据库以及其他相关程序的交互工作，其编辑程序较为简便，减少了网页设计制作中的复杂程序，是网页设计与制作编程工作中的一大进步，提高了网页设计与制作的水平。

其次，ASP在网页运用中没有过多的局限性，它的文件格式为asp，在动态网站中得到了充分应用，它不限制在哪个网站中能使用，在哪个网站上不能使用，在使用中有较大的自由性，这也是它在网页设计与制作中常被用到的原因之一。

再者，ASP程序具有较大的灵活性，它能够在VisualInerdev＼UltraDEV等多种编辑器中使用，另外，客户端在进行网页设计与制作前期可以采取所见即所得的网页制作软件，对所要制作的网站进行整体框架设计，整个网页模板成型后再利用DreamweaverCs5中的JavaScript等多种脚本语言进行进一步的设计与修整，使网页设计更加精美。

DreamweaverCs5软件在网页设计与制作中的运用，实现了设计制作与网页观看的同步，它支持客户端在编辑网页的过程中及时查看效果，有利于客户端及时发现网页设计制作中的错误与不足，从而有效的进行改正，确保网页设计制作的质量，提高客户端网页设计制作的水平。

2 DreamweaverCS5的新增功能

DreamweaverCs5相对以往的网页制作编程软件有了明显的改变与突破，它又增加了很多新的功能，支持多种编辑器的交互使用，是网页设计与制作的好帮手。以下列举的就是DreamweaverCs5推出后的新增功能。

2.1 FTP程序的性能能到进一步完善

FTP是一种上传工具，它的主要作用是将网站文件传输到网站上。DreamweaverCs5中的FTP程序支持大型文件的上传，并且改良后的多线程FTP程序在传输文件时，速度较快，节省了大量时间。改良后的FTP传输工具性能极好，提高了FTP传输工具的上传速度，大大缩短了网页制作及上传的时间。

2.2 BusinessCatalyst 集成面板

新增的BusinessCatalyst 集成面板其主要作用是利用BusinessCatalyst 集成面板及AdobeBusinessCatalyst的有效连接，从而编辑建立网站，此集成面板进行电子商务的网站建设时，采用的是较为完善的托管解决方案，使网站的建立工作进一步完善。

2.3 自适应网格板面

DreamweaverCs5新增功能中实现了自适应网格板面，运用CSS3自适应网格版面，可以快速的建立网站交流平台，并支持多种浏览器查看网页设计，具有一定的兼容性，为客户端查看网页作品提供了方便。另外，运用CSS3自适应网格版面，确保了代码的正确性，将设计用简单且符合标准的代码表示出来，有利于客户端的随时查看，简易的代码客户端能够轻易的发现网页设计与制作中出现的问题，大大提高了网页设计与制作的效率。

2.4 jQuery 移动框架

新增的jQuery 移动框架功能在DreamweaverCs5软件编程中具有重要作用，它能够为iOS 以及Android网站平台提供性能良好的本地应用程序，为各网站之间的交流与共享提供了方便。

2.5 AdobePhoneGap 支持

AdobePhoneGap功能与jQuery 移动框架功能较为相似，它们都是为iOS 以及Android网站平台创建本地应用程序，而不同的是AdobePhoneGap功能创建起来更加轻松，简易。并且它不仅能够创建本地应用程序，还能够对本地应用程序进行封装。它创建本地应用程序主要是依靠改变网页中原有的HTML代码来实现的，另外，采用PhoneGap模拟器还能够对自身所设计的网页进行检查，提高了网页设计与制作的质量。

3 DreamweaverCS5的发展趋势

Dreamweaver是一种所见即所得的网站开发软件，客户端在网页编辑的过程中能够随时查看网页设计的状态，它支持多种浏览器预览网页设计作品，为客户端进行网页设计与制作提供了诸多方便。

最早Dreamweaver网站开发工具的出现是在1997年，这一年Macromedia公司推出了Dreamweaver1.0，它的出现为网页设计制作者提供了方便，引起了网页设计者的使用风暴，得到了广大使用者的青睐。随着网络设计水平的不断提高，Dreamweaver在2002又有了新发展，2002年5月Macromedia公司正式推出了DreamweaverMX编程开发具，DreamweaverMX与Dreamweaver1.0的不同点在于它能够对HomeSite中的重要程序代码进行编辑整合，从而形成Dreamweaver开发工具的核心环境，摆脱了以往单一的开发环境，它支持使用者可以根据自己的使用习惯来选择建立网站及应用程序的方式，使用者在使用中有了一定的选择自，是DreamweaverMX的一大亮点。后来，Macromedia公司合并后加入了Adobe 公司，两个公司共同在2005年5月研发出了新型的网站开发工具，也就是DreamweaverCS5，它的出现引起了客户端与使用者的轰动，原因在于DreamweaverCS5新增加了以往网站开发工具中所没有的功能，它能够运用CSS样式表进行网页设计，减少了编辑代码的繁琐，部分设计可以在CCS样式编辑器中进行代码编辑，避免了代码错误而导致的网页制作错误。它的出现使网站开发工具步入一个新台阶，不仅为使用者的网页设计制作工作提供了方便，还在一定程度上提高了工作效率，减少了网页设计制作中的失误。此外，它支持所见即所得，是一种可视化的开发界面，符合现代网页设计制作的流程，是网站开发工具的一大创新。

4 结束语

DreamweaverCS5在网页设计与制作中的广泛应用是当今的网站发展形势所趋，它相对于以往的开发工具而言，其新增功能较多，并且功能性极强，适应了网页设计与制作的需要及发展。DreamweaverCS5打破以往的局限，以一种可视性所见即所得的界面呈现在设计者面前，使设计者能够及时查看网页设计中的效果，有利于网页设计与制作的开展。

参考文献：

[1] 刘畅.DreamweaverCS5在网页制作中的应用[J].计算机光盘软件与应用，2012，21（32）：220-221.

[2] 邓文达，武国英.DreamweaverCS5网页设计与制作[J].清华大学出版社，20103（9）：277-278.

[3] 孙印杰.DreamweaverCS5的新增功能与改进[J].电子工业出版社，2008，3（3）：62-63.

篇(7)

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

中图分类号:G64 文献标识码:A 文章编号:1007-3973 (2010) 01-178-02

1根据专业特色确定教学目标

《网页设计与制作技术》是计算机类专业的一门基础课程,考虑到计算机类专业的学生缺少艺术设计基础,通常是以掌握静态网页的制作技术为教学目标。但是对于多媒体专业的学生来说仅仅掌握网页制作是不够的。

多媒体专业的任务是能够将图形、图像、文本、声音、视频、动画等多种媒体元素以合理的形式进行整合,为其设计美观的界面和人性化的交互方式,使之成为一个完整的多媒体系统。所以多媒体专业对学生在艺术设计水平和软件制作能力方面都提出了较高的要求,针对这一专业特点,《网页设计与制作技术》课程的教学目标放在了网页的“设计”和“制作”两方面。“设计”方面要求学生能够利用设计工具设计出符合商业需求的网页界面,能够对网站的信息进行重组,能够根据需要设计合理的交互方式;“制作”方面要求学生具备将网页界面设计稿采用合理的制作技术转换为真实网页的能力,能够制作可维护、可扩展的网站结构。

2依据教学目标制定教学内容

教学内容是依据教学的两个目标来制定的,总体分为两部分“网页设计”和“网页制作”。这两部分的内容对于多媒体专业的学生来说同样重要,授课时间上要给予合理的分配。

“网页设计”部分的内容主要包括:

2.1网页布局设计

由于受到显示屏幕的限制,网页具有区别于一般平面设计的布局结构,并且根据网页信息量、网站主题和风格的差异可以设计出千差万别的布局。学生应该具备根据实际合理设计网站布局的能力。

2.2网页色彩设计

网页的色彩创作拥有自身的设计规则,与其他视觉形式有着较大的差异。对于平面设计来说,色彩是静止的,色彩的分布根据固定的信息来编排。对于网页来说,信息是流动的,网页上的色彩也会跟着流动,因而,学生要掌握网页上的用色更需谨慎。

2.3网页界面元素设计

网页上包括的文字、图片、按钮、声音、动画等都需要经过精心设计来配合完成一个完整的网站。学生需要掌握各种软件来实现素材的设计与制作,这些软件可以是Photoshop、Fireworks、Flash、Cooledit等。

2.4网页导航设计

这一部分绝不仅仅是制作菜单,重点是对网站信息的组织。学生对网站信息的组织往往是随意的,他们没有意识去分析大量要在网页上出现的信息哪些重要,哪些是辅助的,重要信息应该出现在页面的什么位置,以及如何使用色彩来突出重要信息。

2.5交互设计

浏览者不仅要求网页具有良好的外部界面,也非常关心界面的组件、布局和风格,看它们是否能支撑有效的交互,浏览者是否能轻松使用网站的功能来快速寻找到所需要的信息,这是评价网站可用性的一个重要指标。

“网页制作”部分的内容主要包括:

(1) 使用XHTML+CSS实现网页布局。早期的网页制作大多采用表格嵌套的方法实现,这种方法制作的网页难以更新和扩展。现代的网页越来越多使用XHTML+CSS来实现,因为其具有良好的灵活性,同时也提出了一种全新的网页制作思路。

(2)利用模板快速生成网页。模板技术在XHTML+CSS流行的时代同样重要,能够帮助快速生成同类型的网页,也更易于后期的维护。

(3)使用框架构建网站。

(4)使用Flash辅助。Flash在制作导航条、按钮、动态图片等方面具有明显的优势,把Flash结合进来能让网页增添不少亮点。

3 根据现代学生的特点选择教学方法

现代的学生都有一些新的特点,比如喜欢拿手机发短信、喜欢通过网络获取知识多过于书籍、喜欢在网络上与他人沟通、喜欢使用博客、玩游戏等,思想认识上也与以前的学生有很大的不同。教学应该以学生的学习为中心,教师的任务是帮助学生提高学习兴趣,教学的过程要符合学习习惯。如何改变传统的教学方式来适应现代的学生是我们需要研究的课题。可以考虑在以下方面改进教学方法,从而加强对学生的学习引导:

3.1让学生在自由、轻松的课堂环境下学习

国外的一些研究表明,让学生在完全放松的状态下学习能够得到比严肃的课堂环境更好的教学效果,尤其对于需要发挥创意的课程来说更是如此。我们可以考虑将课堂从教室移至亭子、池塘边、树荫下等大自然的某个角落,或者重新布局教室,使它看起来象工作室、会客厅、休息室,或者通过课堂上给予学生充分的自由思考、自由交流的机会,教师的语言如果更具有幽默感和亲和力,就能更好地激发学生的兴趣和创造力。

3.2充分利用网络实现零距离教学

现代的学生对网络的使用非常普遍,通过网络获取知识的比例越来越大,所以利用网络进行课堂外的教学补充是非常有效的。通常可以使用网络课程、论坛、博客等形式为学生提供随时随地可以获取的学习资源;利用QQ等实时通讯工具实现教与学的零距离。

3.3注意调节课堂教学的节奏和气氛

学生在一堂课的学习过程中注意力有明显的变化规律,开始阶段学生的注意力是最高的,中间最容易分散,接近最后又会慢慢提高。建议老师在讲授知识的过程中可以利用这一规律,把重要的内容放在前面,中间要加一些提高注意力的环节(可以是一次小组活动、一点小幽默)重新激发学生的热情,需要强调和总结的内容要把握好最后的时间段。

4课程改革的进一步探讨

《网页设计与制作技术》是一门综合性的课程,根据学科的差别,可能会不同程度地涉及到网页布局、色彩、交互、数据库、服务器程序设计等内容。针对多媒体专业,本文没有涉及后台的数据库和服务器程序部分,对于前台的网页制作技术,如果学时充足,还可以考虑增加利用JavaScript实现网页特效的内容。随着网页制作技术的不断发展,新技术、新方法、新标准将会不断涌现,所以我们也需要将网页设计与制作的最新、最实用的技术反映到课堂教学中去。

5 结束语

网页的设计与制作更多的表现为一门艺术,要让学生学到网页设计的理念而不仅仅是网页制作的方法,这应该是该门课程在多媒体专业中承当的任务。上面所提到的教学目标、教学内容和教学方法都应该围绕这一核心任务展开,最终为培养既有设计能力又有动手能力的合格学生服务。

参考文献:

[1]尤彩虹.高职《网页设计与制作》课程建设实践与探索[J].中国科教创新导刊.2009,(2):183.