网页设计报告范文10篇

网页设计报告范文篇1

记得初到公司时，我对公司的了解仅仅局限于公司网站的简单介绍，除此之外，便一无所知了。但是，在领导和同事们的支持和帮助下，我不仅加深了对公司的了解，而且很快就掌握和熟悉本岗位工作的要求及技巧，严格做到按时按量完成产品终端页等页面的制作，保证页面的与效果图的一致性和页面在各个浏览器中的兼容性。同时，减少页面中冗余的代码，保证页面的加载速度。此外，注意用户体验问题，站在用户的角度浏览网页，发现问题、解决问题，以提高网站的浏览量。

自从担任网页制作以来，虽然在工作中取得了较好的成绩，但也还存在一些不足之处。例如：工作中没有充分领会领导的意图，有时会忽视公司的工作流程等等，这些都是由于工作态度和细节决定的。这些不足都需要在今后的工作中加以改进。

在今后的工作中，我将努力提高技术水平，克服不足，朝着以下两个方向努力：

1、在以后的工作中不断学习技术知识，通过多看、多学、多问、多练来不断的提高自己的各项业务技能。

2、提高自己解决实际问题的能力，并在工作过程中慢慢克服急躁情绪，积极、热情、细致地的对待每一项工作。

网页设计报告范文篇2

一、工作介绍

我工作的这家公司，从事网站开发工作的，公司在技术团队这部分是比较正规的，一般是五到六人为一个小组，小组中有明确分工，有负责联系客户接恰生意的，有专门做技术的，而在技术这块分为网站前台、后台开发，我在学校主要做的是后台开发，当然前台设计工作也还算熟练，但不是很精通。我们这个小组一般接下的活都是一些小型网站的开发工作，这样的网站技术难度不大，而且工作周期短，有相当一部分的，只需要通过cms软件就可以进行开发。但是有个别的网站开发时，我们还是需要进行一些手写代码工作的。

二、开发技术

做为一个刚毕业的大学生，我的知识储备肯定有不足的地方，毕竟学校教的东西肯定会有一部分和社会是脱节的，但好在我的领导对于我没有太多的要求，他只是要求我尽快的适应公司的工作和生活，在短时间内熟练的掌握相关技术，干好本职工作。

在大学里对一个学生来说什么是最重要的，那就是学习能力。要知道，这个世界上，知识在发展，人类在进步，每天都在进行日新月异的变化，我们的知识储备总会有不够的地方，但是一定要有学习能力，将不会知识快速掌握，只有这样才能占据主动，减少被动情况的尴尬发生，通过二个星期的时间，我成功的适应了公司的工作和生活节奏，每天早九点上班，晚17:30下班，中午休息一个半小时，每周还有两天假期。我利用业余时间，抓紧学习，将工作中所需要的技术进行了强化学习，其实这些东西在学校的时候就接触过，只是不精通。那个时候学的东西多，难免有个主次之分，这次工作了，才知道哪个应该多学点，但好在我都有学过，所以有个好的基础在这里，也就不怕了，比如说：flash，公司要求技术人员会做flash，flash这东西以前我在宿舍的时候经常玩的，可是后来在分析就业情况时，分析错了方向，以为这东西没有什么用处，结果就给荒废了。但好在还有印象，并且当初记了很多的笔记，所以说记笔记是很重要的事情。而其它像javascript、xml、数据库这些东西我都学过，只是实践能力稍差一点，但好在从前在学习方面用的功不是白费的。通过这种实战环境，和半个月的刻苦学习，我终于可以感上小组的工作进度了，已经可以很好的完成领导教给我的任务了。

像我这个组常用的是css+div排版，后台使用php技术进行开发，服务器平台采用，linux+apache+mysql+php,这种lamp组合，我很高兴在学校学的东西能学有所用。以前我们是用表格（table）进行排版，这种方式简单但是已经有些过时了，现在大部分网站都开始了重新构架，所以都采用css+div进行网页排版，我目前正在学习，掌握的还算比较快。而在后台开发部分，我们使用php来进行开发，我的工作是手写一些小模块。或者用javascript写一些特效小代码。

三、工作流程

小组分工时，我负责后台里小模块的开发工作，如：留言板或论坛，还有一部分javascript代码编写工作。前台部分的工作是和组里的丁珊珊做一些排版的工作，使用css+div技术。编写代码这种工作看起来有些枯燥，其实时间长了以后，还真有点厌烦，但是后来我明白，只有将自己的本职工作做好，提高自己的技术，做出优良的东西，这样自己才会有价值感，才会对自己的工作保持新鲜感。所以我每天都在工作后，记录下每天在技术上的不足之处，回家后，将强学习，这所谓：找出不会的地方，学会它，你就变的强大了。

php是现在比较流行的一种网站开发技术，由于它是开源的免费代码，并因良好的跨平台性能受到了大重的喜欢，我个人认为php很简单，适合初学者学习使用，但是在某些地方想要做好，就需要你认真的学习了。目前，我负责的只是技术性较低和规模较小的模块，不过，我觉得从简单处做起也挺好的，但是我在写代码时，还是经常犯些小错误，导致代码页面经常出错，而自己往往还找不到是哪错了，有几次急的都不行，不管怎么弄，结果就是错误，后来我才发现，原来只是一个小错误，小的不仔细察看，我都找不到。于是我明白，做开发工作，一定要细心，否则就会给自己和别人带来麻烦。

四、安全检查

安全检查是很重要的一个环节，就像你给人家盖房子，房子盖好了，可是门和窗不结实，那这种就必然不会安全的了。页站的制做也是同样的道理，在安全方面，有一个地方是和开发人员有很大的关系的。因为开发人员技术的高低决定了网站的安全性，有些人员在一些环节上的疏漏，很有可能导致网站在实际使用时，遭到黑客攻击，如果造成了经济损失就无法挽救了。

网页设计报告范文篇3

《Web应用技术》是我校计算机科学与技术专业为大一学生开设的一门专业选修课程，本课程性质为纯实验课程，总学时32。其教学目标是给出一个网站的具体需求，要求学生通过对实际问题的分析，运用HTML、CSS、JavaScript等技术完成网站的设计及开发。使学生在掌握Web技术的同时进一步提高自学能力、分析问题能力。通过近几年教学情况总结及学生反馈，发现目前该课程存在以下问题：

1)在以往的教学活动中，授课教师是借助于某一个网页设计工具如DreamWeaver、Frontpage等完成网页设计各个知识点的讲解，这种教学方法对高职高专类院校的学生来讲，可能效果较好。因为最终学生掌握了某一个网页设计工具的使用。但是这种教学方式不利于我校本专业学生对后继课程如.NET应用程序设计、软件工程实践等课程的学习，因为仅仅通过一门开发工具去实现网页设计忽视了学生自写HTML、CSS、搭建网页设计框架等能力的培养。借助于某个工具，很多网页代码都是自动生成的，导致学生对网页代码理解就比较肤浅。

2)Web应用技术方面的教材市场上比较多，但是很多只是介绍网页设计工具的使用方法，比如网络三剑客Flash、Dreamweaver、Firework等，缺少系统全面讲解网站开发的步骤、思路及方法，没有通过一个完整的网页开发案例贯穿其中，有些书籍虽然带有网页设计的案例，但是很多涉及到数据库知识，对于还未接触到数据库设计的大一同学来说非常吃力。因此，目前需要编写介绍网页设计开发实例的教材，在这些教材的指导下，学生的网页设计能力能有所提高。

3)在以往教学任务中，该课程主要是完成一个“个人博客网站”的制作。随着网络技术及时展，博客已经慢慢淡出人们的视野。为了紧跟时展，同时也调动学生学习该课程的积极性，在保证网站的功能要求不变的前提下，需要适当调整网站所完成的内容，比如男生可以选择自己喜欢的游戏做一个游戏专题网站，女生可以选择喜欢的影星做一个专题网站等等。因此，鉴于目前现状，我们申请了学校的教育教学改革项目，对《Web应用技术》课程的教学内容、教学方式方法进行改革。并以资助资金为支撑，自行编写了《Web应用技术》实验指导书。并完成《CSS+DIV网页设计案例》教材初稿的编写，预计明年3月份由清华大学出版社出版。

2《Web应用技术》课程的教学改革

2.1教学内容的安排

在教学内容安排上，一方面要充分考虑到学生学生对后继课程的学习基础，另一方面教学内容也要与时俱进，考虑到学生毕业后的就业需求。因此，为了锻炼学生自写网页能力，我们要求必须使用文本编辑器（UltraEdit、Editplus、记事本）编写网页，不能使用网页制作工具如DreamWeaver、FrontPage等生成网页；同时为培养良好的编程风格及习惯，HTML文件的后缀必须为.html；CSS、JS代码尽量不要直接写在HTML文件中，作为独立的.css、.js外部文件引入HTML文件中。在实际教学过程中，以一个实际项目或类似项目贯穿其中，包括项目需求分析、主体框架搭建、各功能模块设计开发、网站整体测试、网站等步骤，变“因材施教”为“因需施教”，充分调动学生学习的主观能动性。

2.2教学方法的改进

1)采用任务驱动教学，注重自学能力培养在教学方法方面，采用学生自学为主、老师从旁指导为辅的方式。首先将整个网站设计任务进行分解，每个阶段有明确的任务要求，老师对其中的关键知识点首先进行讲解，积极为学生提供免费的学习资源平台如，并讲授查阅资料方法。然后让学生自行完成每个阶段任务，对于实践中普遍出现的问题，老师再统一讲解、更正。实现任务驱动与教学的统一。

2)提倡案例教学，提高学生学习兴趣在每次学习一个新的内容或者技术之前（比如CSS技术），教师提供相关的案例进行简单讲解，使学生掌握技术应用的关键点。先达到能比照葫芦画瓢的目的，然后再进一步加深考核要求。

2.3考核方式的改进

在考核方式上，改变以前以知识点考核为主的考核标准，改为以实践动手能力为主。取消笔试考试，并将期末考核和过程考核相结合。学生的最终成绩由平时考核（20%）、网站设计效果考核（70%）、网站设计报告考核（10%）三部分组成。平时成绩主要包括日常考勤、学习态度、实验效果等。将原来的10%增加到现在的20%，从而调动学生上课以及完成实验任务的积极性。

3结论

网页设计报告范文篇4

一、Java系列课程组成

由于Java语言特点，它主要应用于B/S模式的应用系统中。而单靠Java语言自己是不能开发一个完整B/S应用程序，需要和其他技术合作来完成的，主要包括课程：数据库技术、网页设计、Java程序设计、JSP动态网页设计、Java应用框架以及移动设备客户端开发的Android开发技术等。这几门课构成了Java系列成组课。另外，专科生在升入专升本之前，一般只学习了C语言，如果直接学习面向对象的Java语言可能有些困难，所以，在学习Java语言之前，设置C++程序设计课程。因为有C语言基础学起来比较容易，可以顺利掌握面向对象思想，再进行Java学习能取得更好的效果。

二、课程设置

Java系列课程可以分为三部分：一类是先修课；一类是专业基础课；另一类是项目有关的专业技术课程。先修课为专业技术课打基础做铺垫，只有先学好先修课，才能顺利地进行专业基础课和专业技术课的学习。先修课有：数据库技术、网页设计、C++程序设计；专业基础课：Java程序设计、JSP动态网页设计，该两门课程使学生具备Java及动态网页编程基础；专业技术课：Java应用开发框架、Android开发技术，这两门课是在开发中常用的实际技术。在与现有市场技术相衔接上，设置了软件案例开发课程。该课程对市场当前的技术进行介绍，使学生能够开阔知识面，了解当前软件开发的一些常用的技术，例如Shiro框架、Activiti框架、layUI框架、Bootstrap框架、微信小程序等。该类课程随着时间的推移会发生改变，所以应该及时调整，灵活处理。（一）先修课课程教学设置。三门先修课之间从知识内容上没有过多联系，可以并行开出课程，也可以串行开出课程。考虑到专升本只有三个学期上课时间，不能采用完全串行安排。在实际教学中安排顺序是：C++程序设计和数据库技术并列开出，安排在第一学期前八周，随后在后八周开出网页设计课。在课程内容上，根据学生的具体情况和应用型人才培养的需要以及与后续课程的连续性，对课程内容做了相应调整。数据库技术的理论部分进行压缩，课时重点分配在具体DBMS及SQL语言应用上；C++程序设计基础部分占用学时很少，大部分学时分配给与类有关的知识点上；网页设计基本HTML标签、CSS的课时相应减少，对于表单标签多分配了较多学时，并加入HTML5中有关知识，其中插入相应式编程方法。（二）Java专业基础及技术课设置。在四门课中，Java程序设计是其它三门课程的基础，也是三门课程都会用到的，所以要先行开出。Java程序设计与网页设计两门课程没有联系，可以并行开出，实际教学中也安排在第一学期后八周。JSP动态网页设计在Java程序设计后开出，Java应用开发框架随后开出，顺序不能颠倒，实际教学中，JSP动态网页设计安排在第二学期的前八周，Java应用开发框架安排在第二学期后八周。Android开发技术与上两门课程联系不大，可以在Java程序设计后开出。实际教学中考虑到其它课程，这门课程在第三学期开出。课程内容上，四门课程也稍作调整。Java程序设计重点放在类、接口、JDBC应用、多线程、泛型与集合框架上，基本知识分配学时较少；JSP动态网页设计围绕MVC模式为重点展开，了解WEB编程的特点及所涉及的技术，每个技术的作用及它们相互之间的调用关系，详细介绍JSP+Servlet+JavaBean综合应用，各种标记及内置对象简单介绍；Java应用开发框架对内容进行了改革，由学习SSH框架替换成SSM框架，与软件公司开发工具对应；Android开发是开发移动设备程序的技术，核心是Java程序，重点放在用户界面设计、组件通信、数据存储与访问上。课程设置顺序分布学期见表1。（三）注重实践教学。由于受学时限制，各门课设置的总学时都是48学时。对于这几门课程来说，Java程序设计、Java应用开发框架、Android开发技术是不够的,可以适当增加学时。这些课程实践性较强，压缩讲授学时的同时，每门课开设对应的课设或实训，有些课程学完之后还设置了综合实践环节，在JSP动态网页之后设置了网站设计综合实训，可以把数据库技术、网页设计、JSP动态网页课程集成起来训练，对综合应用这些技术起到了较好效果，学生的软件开发能力显著提高。各门课程讲授学时与实验学时以及课设、实训设置如表2。

三、教学方式、方法

专升本软件工程专业学生是培养适应人才市场需求的应用型人才，相比四年制本科更注重这一点，主要是提高学生软件开发的技术技能。另外，因为学制为两年，受学时限制，教学方法、方式上也不尽相同。经过多年的教学实践，需采用以下系列方法。（一）多元教学。传统教学方式是采用课堂教学，老师在课堂上讲，学生在下面听，有限时间内学习，学生可能没有学会。课后老师答疑时间又有限，不利于学生掌握所学内容。为了学生多渠道学习，除了上课以外，还开设了相关MOOC，学生可以在MOOC中反复学习，另外，还建立了学习群，老师可以通过微信、QQ和学生互动、答疑，通过多种学习手段，保证了学习效果[2]。（二）实例引导。课程中的实验往往都是验证性的，学生只是按照指导书中的步骤、代码进行操作，不利实践技能的理解与提高。在课程中引入实际开发中常用的典型模块实例，例如设计实现一个安全有效的登录模块，再比如通过表格处理表数据等等，通过实例的锻炼，既调动了学生学习的积极性，也有利于提高实际开发能力。（三）项目驱动。在课程设计、实训中，积极引入实际项目，有意识地让学生参与其中，积累项目开发经验。横向科研中的医院管理、物流管理、公文审批管理等，都吸纳了多名学生参与。另外，积极鼓励学生参与各种软件竞赛，自拟题目，开发设计。这些项目的引入，学生积累了项目开发经验，教学效果良好[3]。（四）团队协作。原来的实训中，每个学生都是独立完成自己的任务，缺少团队协作能力培养。现在的软件规模大、技术涉及面广，一个人是不能胜任的，必须协同作战才能完成。在实训中，将4至5名学生分成一组，给他们分配一个综合性的项目，既各司其责，又相互协作，互相交流，在短期实训中，能够完成一个较为复杂一些的项目。学生在实训中能够学到更多的技能，也得到了团队协作的锻炼。（五）校企合作学校教育目标是培养符合企业需求的人才，在教学中寻找契机与企业合作。笔者所在的学院与祥云科技、恒大科技、滕泰科技等软件公司进行了教学合作。在实训中，邀请公司技术人员做技术报告，指导学生实训，学生既能了解企业的需求，也能掌握一些企业常用的开发技术。随着教学的进行以及市场人才需求的转变，要想培养更加符合企业需求的软件人才，学校和企业应当探索更深层次的合作。在校企合作进行毕业实习以及毕业设计方面进行联合，为学生就业创造更有利的条件。

四、成绩考核

Java系列课程具有较强的实践性，学生实践技能、动手能力的考核应为主体。课程中实验、课程设计、实训的结果必须实现，否则，不能通过。课程成绩由平时成绩与期末考试成绩组成，比例为1:1。平时成绩中，实验部分占50%，平时表现、出勤、作业等占50%。期末考试试卷中，有关编程技能方面比重偏多，理论方面偏少。课程设计、实训中，要对每位学生单独考核，对实现细节进行答辩，掌握学生技能掌握程度，以此作为成绩的主要依据。五、教学效果Java系列课程开出十多年来，不断地进行教学方法、教学手段的改革，密切关注软件人才市场需求，教学内容不断更新，取得了较好的效果。学生屡次在软件竞赛中表现优秀。毕业生对Java开发技术掌握也来越好，受到用人单位的欢迎，为以后工作打下了良好基础，实现了应用型软件人才的培养目标。

参考文献：

[1]欧阳宏基.Java技术的应用型人才培养模式研究[J].微型电脑应用,2019(9):14-16.

[2]时雷,司海平,张浩.Java程序设计课程开放式教学[J].计算机教育,2014(12):72-75.

网页设计报告范文篇5

关键词:信息化技术；网页设计与制作；高职学生；蓝墨云班课APP

1引言

网页设计与制作是一门有着广泛应用、实用性非常强的课程，面对具体的教学内容，少部分学生比较精通技术与理论知识，大部分学生则“百思不得其解”。针对这个问题，传统的授课方式已经不能满足要求。笔者充分运用信息化技术对课程教学模式进行改革，从高职学生的学习特点、信息化技术教学过程设计、教学改革效果等几个方面，谈谈信息化技术在教学过程中的运用及效果。

2高职学生的学习特点分析

在信息技术快速发展的今天，90后高职学生更喜欢从事实践活动，追求未知事物，热爱冒险，敢于创新[1]。他们还有另一个特点，即从小就受网络信息产品的影响，移动信息技术的发展变革带给他们更多选择娱乐方式的机会，各类网络游戏、富媒体信息很轻松地击败了不少学生的自控力，存在大量“手机不离手一族”。网络游戏、微信、QQ信息通信和网上购物都是90后学生休闲娱乐的平台，学生的平时生活和学习方式正在被网络信息技术改变。课堂上学生的手机管理问题一直是教师进行课堂教育研究的热点，学生课堂玩手机现象随处可见，虽然教师针对这个问题采用很多措施，但是学生课堂看手机现象一直存在，采取的措施很难剔除这个现象[1]。笔者在所授网页设计与制作课程教学中，尝试用移动网络和智能手机开展信息化技术教学，借助蓝墨云班课APP移动教学平台，构建“处处能学、时时能学”的教学网络平台，为学生提供移动手机上的课程基本信息、任务推送、课前课中测试、教学课件、教学辅助微课、教学视频等，使学生体验在娱乐的环境中学习理论知识和实践技术，学生学习更自由、有趣，教师教学更轻松。

3教学过程设计

在教学过程中，借助蓝墨云班课APP进行教学，结合模拟公司项目教学模式[2]，与学生在课前自主预习、课中知识学习与技术实践、课后拓展延伸等方面进行积极互动。为了方便展示具体的教学过程，笔者主要选取网页设计与制作课程模拟开发项目中的某校教务处网站办事指南模块来进行展示。课前自主预习课前自主预习主要包括教师课前准备教学资料、教师课前任务、学生课前预习工作。1）教师在蓝墨云班课APP移动端上传有关办事指南模块开发的相关教学资源，如课前学习任务单、微视频、课件、授课计划、教案等资源。2）教师针对办事指南模块开发，课前在蓝墨云班课APP班课上两个任务：①各小组调研某校教务处网站办事指南模块开发需求，形成调研报告，并将报告上传至蓝墨云班课APP班课讨论活动区域；②各小组根据各自调研的情况，网上收集办事指南建设模板，根据模板设计各自的办事指南模块，并将设计的作品以图片的形式上传至蓝墨云班课APP班课讨论活动区域。3）学生各小组主要做好四件事：①浏览蓝墨云班课APP班课上的教学资源，了解课程模块的教学意图；②完成办事指南模块开发的需求调研，撰写调研报告，并将报告上传至蓝墨云班课APP班课；③完成网上模板搜集，并根据小组调研的情况设计办事指南，将作品以图片的形式上传至蓝墨云班课APP班课；④各小组对提交的报告和作品进行点评和讨论。课中知识学习与技术实践1）课前导入，任务检验。教师先利用蓝墨云班课APP推送有关项目调研活动的测试活动，让学生根据掌握的知识和课前的调研情况完成测试；然后向学生展示课前各小组做的调研报告评价排名情况，抽查点评文本，结合各小组做的调研情况，跟学生一起分析测试题目。通过这个环节，学生就能明确本次课最终学习意图，就是设计完成某校教务处网站办事指南模块的开发工作。2）小组汇报，展示设计。通过蓝墨云班课APP上各小组对办事指南模块设计作品的评价情况，教师挑选做得比较好的两个小组进行设计展示和说明。被挑选的两个小组分别选派一名代表上台展示，主要从调研需求和技术两个层面来对设计作品进行说明。通过小组展示，学生能较直观接触办事指南模块作品初始原稿，为接下来的设计奠定基础。3）情境构建，任务分析。教师先通过蓝墨云班课APP推送一个某校教务处副处长针对网站办事指南功能提出要求的视频，在学生观看完视频后，跟他们共同分析任务，明确任务要求，理解任务需要解决的问题。这里的任务是开发符合要求的网站办事指南模块。教师先根据视频要求，跟学生一起修改调研报告，确定开发功能；接着跟学生一起分析在开发过程中要用到的技术，即网页脚本如何控制DIV层的显示。确定了功能需求和技术知识，学生就能正确进行模块设计。4）分组协作，小组互评。各小组讨论办事指南模块设计，有针对性参与蓝墨云班课APP班课设计讨论，各小组间进行设计交流；接着将各自设计的最终设计稿以图片的形式上传至蓝墨云班课APP班课，小组之间都可以在平台上进行互评。5）专家点评，教师总结。教师将某校教务处副处长设置为班课助教，利用移动网络远程视频功能，助教参与教学过程。根据各小组互评的结果，助教挑选两个小组设计的作品进行现场点评。点评后，教师结合助教的点评，总结办事指南设计要点，带领学生再次进入办事指南实践开发，进一步引导学生掌握设计要点。课后拓展延伸课堂教学活动结束后，首先，教师可以通过蓝墨云班课APP提供课后答疑和测试，测试的内容主要是有关网页脚本控制DIV层的显示的问题；同时，学生只要有问题，也可以通过答疑活动提问，提问形式多样，可以是图片、文本、语音和文件。其次，教师在蓝墨云班课APP推送课后任务，要求各小组继续完善教务处网站办事指南模块的开发，并将开发效果展示给某校教务处工作人员，各小组撰写好开发心得。最后，各小组将撰写好的开发心得和相关图片上传至蓝墨云班课APP班课课后任务活动，小组间对心得进行互相评价，相互促进和监督；针对主要评论问题，教师也给出一些评判标准或建议。通过课后活动环节，学生充分利用课余时间学习，继续交流技术实践，在蓝墨云班课APP班课上互动帮助，进一步提高学习质量。

4教学应用效果

网页设计与制作课程在实施信息化技术教学后，学生通过参与模拟实践项目活动，感受真实的工作环境和工作过程，掌握完成任务所需的技术知识和实践技能，提高职业能力。笔者自从2016年3月启用蓝墨云班课APP进行教学，创建班课《网页设计与制作》四个，学生累计139位，开展活动42次，班级的总平均出勤率达到97%，远远超过以往学生出勤率。在每个学期末，笔者都会借助蓝墨云班课APP对授课班级进行问卷调查，主要调查学生在自主学习能力、团队合作精神、工作责任意识、沟通能力和分析解决问题的能力提升方面的投票情况。调查结果显示：93%的学生认为在自主学习能力方面得到提升；96%的学生认同团队合作精神有所改善；86%的学生认为增强了工作责任意识；100%的学生认为提升了沟通能力；92%的学生认为在分析解决问题的能力方面得到增强。由此可见，借助蓝墨云班课APP开展信息化技术教学，受到学生欢迎，以往学生课堂上玩手机的现象逐渐消失，学生的学习积极性得到提高，特别是在自主学习能力、团队合作精神、工作责任意识等方面得到进一步增强。

5结语

网页设计报告范文篇6

1998年，Forsythe等人在《HumanFactorsandWebDevelopment》一书中提出了基于人机工程学可用性原则的网站设计方法学，该方法学强调要清楚了解客户的需要，即了解客户是什么样的群体，他们喜欢什么，需要做什么或想做

什么，他们使用的软件、硬件环境如何等等。这些原则同样适用于电子商务。那么客户一般喜欢什么样的站点呢?1999年美国网站在8600个网络客户中就此问题作了调查，结果发现，能吸引大多数Web客户(54%以上)重复访问的站点具有四个共同的特征:

1.1高质量的内容

客户访问电子商务站点是为了获取他感兴趣的商品或服务，所以网页的内容必须突出重点，避免夸张，装饰部分不宜太多，以免喧宾夺主。在计算机显示屏上阅读容易产生视觉疲劳，且阅读速度比看书约慢25%.所以网页设计与杂志美编有很大不同，高质量的网页在内容编排上必须简洁明了，便于浏览;如果涉及的信息数量比较大.则应使用超文本将其拆分成多个网页。信息显示格式也是必须仔细考虑的一个重要方面，如字符应足够大，尽量少用移动、Flash等动态显示方式，正文和背景的颜色对比要符合人的视觉特点等。

1.2经常更新

对于电子商务网站来说，要根据市场行情的波动随时更新网页上的价格信息，经常提供新的商品或服务，并搞些促销活动以刺激客户的购买欲。在内容更新的同时，还要注意保持网页在结构上的相对一致性，以使老客户能方便快速地找到所需要的各种信息。

1.3响应时间短

许多研究表明，网站用户的满意度和他对系统的控制感有密切关系，而用户的控制感在很大程度上取决于系统的响应速度。据Miller(1968)统计，用户觉得系统立即响应的时间范围是0.1-1秒，超出1秒钟会让用户注意到了延迟;若网页上的内容在1秒钟内得到更新，意味着用户在转换网页时没有遇到不适当的延迟。一般情况下，客户对当前网页上的内容能持续保持注意的时间长度约为10秒钟;若系统响应时间超过10秒，客户会在等待计算机完成当前操作时转向其他的任务。因此，系统要是不能立作出即响应，就应当及时向客户报告当前处理的进度，以使客户保持良好的控制感。

为缩短系统响应时间，比较简单的一种解决办法是尽量减少网页上的图片与多媒体(如动画、录像、闪烁等)的使用。但是作为电子商务站点，很多场合需要采用图示或多媒体演示，以至不得不适当降低系统响应速度。随着宽带网的普及，这一矛盾有望在一定程度上得到缓解。

1.4易于使用

也就是要最大限度地提高用户在网上的操作绩效，并尽量减少发生误操作的可能性。为此，在电子商务网站设计中需要解决好以下几个方面的问题:

1.4.1链接设计

整个Web实际上就是一个的巨大的信息空间。由于空间过大，并且各节点之间的链接关系错综复杂，用户上网浏览时有可能发生“迷路”现象。1998年美国“图形、可视化和可用性研究中心”(Graphic,Visualization&UsabilityCenter,GVU)第9次所作的WWW用户调查发现，由于导航不当，用户上网搜索信息时在将近58%的时间里不能找到所需的信息。Elm和Woods(1985)研究发现，用户在网上“迷路”的程度与不熟悉文档结构有直接关系。他们总结出有三种不同形式的“迷路”:(1)不知道下一步该去哪里;(2)知道该去哪里，但不知道该如何去;(3)不知道当前处于整个文档结构中的哪一个位置。Foss(1989)发现，用户在网上“迷路”时，往往也受到其它一些问题的困扰;比如，到达了文档中的某个特定位置，却忘了到该处要做什么;忘了从偏离目标的路径中返回;不知道文档中有没有其它相关的结构;忘记文档中那些节点已经访问过等。Foss还发现，超文本系统中“迷路”现象产生的原因是多方面的，但大体上可分为三类。第一类主要与认知负荷有关。与普通文本相比，超文本的一个最显著的特点就是具有灵活的结构。因此，用户从超文本中搜寻所需要的信息时必须选择相应的路径，但在选择过程中又有可能发现新的感兴趣的题材而改变路径，以至逐渐远离主题任务。这样用户既要记住原先所要搜索的目标和曾经走过的路径，又要选择去向，从而认知负荷比较重;同时，迷路本身也会增加认知负荷而占用心理资源。第二类是由于用户对超文本的网络结构或概念组织形式不熟悉而产生迷路。第三类主要是由于缺乏在超文本系统中浏览的经验。一些研究者认为.用户关于超文本的心理模型与迷路现象也有着密切关系，而用户心理模型又与多种因素有关，如个人的知识经验、阅读习惯、练习次数、信息反馈等等。如果用户关于超文本的心理模型不够准确，就很有可能发生“迷路”。

为减少和避免出现“迷路”现象，通常可采用两种策略:一是改警用户界面，如采用导航地图、多窗口显示等技术;二是对文本进行分析，改替超文本的结构及链接设计。实践证明，与前一种策略相比，提高超文本设计质量能更有效地减少用户“迷路”现象。近年来，许多学者在改善超文本的结构和链接设计方面作了大盘的研究。Thistlewaite(1995)在分析和总结前人工作的基础上，指出超文本设计中应避免出现以下几种情况:(1)同一个系统内建立链接的标准不相一致。这种不一致性将导致用户难以对链接的目标节点进行预侧，从而发生“迷路”。(2)链接不当，即在内容不相关的节点之间建立链接。在客户的期望中，形成链接的节点其内容必定在语义上是相近的;若链接不当、与用户的预期不符，就会造成不同程度的混乱。(3)链接不完备。与前一种情况相反，在语义相近的内容之间未建立起用户所期望的链接，以致用户无法找到相关的信息;在避免出现这一问题的同时，还应当适当控制链接的数量，以减轻用户的认知负荷。

关于链接设计的质量，目前一般采用图论的方法进行评价。一个超文本系统可以看作是一个有向图，它由多个节点和边构成，其中的边是有方向性的(从源节点到目标节点)。Botafogo(1992)等人根据图论提出了一些用来描述层次性超文本的大小和复杂度等方面特性的童化指标，如紧凑度(compactness)、层(stratum)等。这些指标对改善超文本的编写有指导作用。Blustein(1997)等在前人研究基础上提出了一种评价超文本链接质盘的新方法，以图论的连通度(connectivity)来衡量链接的完备性，以有链接关系的文档间的语义相近程度来反映链接的健全程度。采用这种方法，可由计算机按一定的算法自动完成对超文本链接质量的评价。

1.4.2隐喻

隐喻原本是语言学中的一种修辞方法，通常是指借用表示某物的词或词组来指代他物，从而暗示它们之间的相似之处。在人类的学习过程中，隐喻起着很重要的作用，特别是在学习新知识、新事物时，必须通过隐喻将其和原有的知识联系起来才能理解接受。在人机界面中使用隐喻，以人们熟悉的事物(喻体)来类比、解释陌生的技术环节(本体)，可以增强学习效果，从而提高界面可用性。但是，使用隐喻有时也会带来一些问题，这是由于人们在知识经验、文化背景等方面存在差异，而对同一个概念可能产生不同的理解和联想。例如，在电子商务网站中出现的货币图标，对客户来说，可理解为代表付款，也可理解为代表标价、打折、或币种。再比如“购物车”，根据生活经验，客户有可能认为购买4份同样物品的方法是重复4次把一个物品放到“购物车”中，而实际上这种虚拟的购物车可让客户编辑所要购买的物品数量，若需要删除已放人“购物车”的某一物品，只要将数字栏中的数目置为零即可。为了确保电子商务网页中隐喻的使用效果，避免产生歧义和破坏概念的一致性，Hudson(2000)提出了一些有益的建议。他认为，隐喻不一定要照搬喻体的所有细节，但要给客户提供准确的线索;隐喻中本体所代表的事物之间的关系应当和喻体所代表的相一致或近似;在使用隐喻时首先要了解和注愈人们在知识经验、文化背景等方面的差异。

1.4.3界面一致性

在电子商务网页设计中，界面一致性也是必须加以仔细考虑的一个重要因素。一般认为，界面一致性主要体现在三个方面:即隐喻产生的效果、系统的轴人与输出之间的关系、界面的外观或视觉效果。一些研究表明，增强界面一致性有利于提高用户的操作绩效和满意度，同时还可减少操作错误。但也有人报道，界面一致性有时会和界面的易用性及易学性发生矛盾。所以在电子商务网页设计中应当综合考虑各方面因素，而不是一味地强调提高界面一致性。

1.4.4美观

Tractinsky(2000)等人报道，界面美观水平与使用者对界面可用性的主观评价呈正相关，与操作绩效也呈正相关。Schenkman(2000)等通过大t实验，总结出衡量网页外观设计质童的四个主要指标，即美观、图文比例、结构和总体布局。其中，美观这一指标最为重要。

1.4.5显示器与浏览器

电子商务网页设计还需要适应客户使用的各种类型的显示器。因为无法知道客户的计算机显示屏幕有多大，所以需要按所有不同的屏幕分辨率进行设计，即不要限于固定的屏幕大小，而应使用可用空间的百分比来规定布局。现在常用的网页浏览器一般为Netscape和InternetExplorer，如果操作系统是文本命令式界面，则诸如Lynx,Links之类的超文本浏览器就会在这种情况下使用。这些浏览器都有新旧版本。有时同一个网页在不同浏览器或同一浏览器的不同版本上会产生很不相同的显示效果，甚至有些网页功能无法正常实现。作为电子商务网站，不可能要求所有客户使用统一的浏览器、统一的版本，所以也应注意网页在这方面的兼容性。

网页设计报告范文篇7

论文摘要：网页的内容通常是由图片和文字组成。由文字构成网页的主体，而图片则能够美化和增色你的网页。那些包含了设计精美图片的网站，往往能让浏览者流连忘返。因此，有漂亮的图片是你的网页能吸引人的一个有力保证。

一、介绍

超链接是网页中最活泼、最有吸引力的一种元素。表单用于特殊的信息，使用户和网站进行交互，使你找到用户的详细信息。表格在许多工作中有着广泛的应用。

框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的Web页面，使用Web页面显示一致的用户界面和灵活的页面内容。

网页制作的高级技术包括：在网页中插入FLASH动画利用Java或者javascript制作网页的动态效果。网页中使用插件，视频等Web组件以及创建、和管理站点等技术。

Web页面往往是具有各种各样的页面元素、丰富的内容和复杂的布局。因此仅仅使用到一种或者两种网页制作技术，不可能创作出一个优秀的Web页面，一个美观而实用的Web页面往往需要综合利用各种技术。

二、概述

1.网站名称：“济南中天环保设备有限公司”

2.步骤：

(1)确立主题

(2)收集资料

(3)创建网站

(4)编辑网页

(5)美化网页

三、目的

运用已经掌握的知识完成一个环境保护企业网站。通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweaver制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。

四、要求

根据公司的要求，设计一个企业站点，以达到宣传该公司及其产品的目的。有整体框架结构，表格定位等，布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。

五、设计工具

Dreamweaver、Flash、Photoshop等。

六、站点构思

1.整体构思：

本网站主题为：济南中天环保设备有限公司。总共有网页24个。主页是一个总目录的网页，里面加有网页动画效果“滚动字幕”及Flash动画，本站几个主要分网页分别为：公司简介、资质认证、产品介绍、业务范围、经营业绩、联系方式。还有许多子网页。

2.页面构思：

下面介绍一下网站中的几个网页的制作。

业务范围中的二氧化氯发生器产品公司服务承诺页面，背景色采用跟主页一样的蓝色，淡蓝色的背景给人以干净大方的感觉，与环保网站的主旨相一致。上方为Flash动画与链接页，左下方是用Photoshop

处理过的图片，与主页是一致的。右边的标题是用Photoshop制作的图片，小标题采用斜体加黑，这样制作丰富了页面内容，使整个页面条理清晰。服务承诺分条目标示，一目了然。最后的“空气净化服务范围”标题，即可以链接到空气净化服务范围页面。

标题“服务范围和承诺”是用Photoshop制作的，先用油漆桶工具把背景色填充为与页面相同的淡蓝色，调整文字的大小与位置，两边分别加上符号“【”、“】”和“≡”，使图片看起来更加美观。

经营业绩页面，背景色与Flash动画，链接页与主页保持一致。这一页的主要内容是用表格形式来固定的，边框设置为1，颜色为淡灰色。表格宽度与Flash宽度一致。整个页面清晰有致，比较大方，浏览者可以清楚的看到公司近年来的经营业绩。

联系方式页面，左下方的图片与右边的标题都是用Photoshop制作的，在联系方式中还添加了一个outlookexpress电子邮件，方便用户与公司的联系，用户可以直接点击给公司发送邮件。outlookexpress作为全球范围内的联机通讯软件，已经被越来越多的人所接受，无论是与同事和朋友交换电子邮件，还是加入新闻组进行思想与信息的交流，OutlookExpress都已成为不可或缺的助手。联系方式中除了电子邮件，还列出了公司地址，电话，传真，邮编。

左边的图片是在Photoshop中，先用椭圆选框工具选中所要的部分，放置新建的画布中，再用油漆桶工具把空白处填充为与页面背景相同的蓝色并对画面进行淡化处理。右边的标题是在Photoshop中，用油漆桶工具填充背景色，然后写上“联系方式”，调整其大小与位置，“方式”二字较“联系”稍小一些，左右分别加上符号“≡”，“「”，“」”，“≡”，使图片放置页面中显得美观，更突出了主题内容。

FLS－系列风淋室，净化空调厂房，中效送风机组，各种医疗器械设备及实验室设备等页面由页面“产品介绍”链接的，并且均以淡蓝色为背景底色。页面大部分有图片和文字两部分组成。文字部分由表格固定，表格边框设为零，图片是用Photoshop制作成的。

所有页面整齐划一，设计风格保持一致，加上淡蓝色的背景，给人简洁、明了、大方的感觉。

七所用各技术的特点

1.Dreamweaver:Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。

Dreamweaver的主要特点：

最佳的制作效率

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

网站管理

使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有链接。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

无可比拟的控制能力

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。

所供即所得

Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所供即所得的功能，让您不需要透过浏览器就能预览网页。

梦幻样版和XML

Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部分，内容提供者可直接编辑以样式为主的内容，却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出XML内容。

全方位的呈现

利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascadingstylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站下载它的描述档，便可得知详尽的成效报告。

2.Photoshop:Adobephotoshop在绘图、色彩调整等诸多方面有着出色的功能，集成度高、适应面广和操作简便。他不仅提供强大的绘图工具，可以直接绘制艺术图形，还能直接从扫描仪，数码相机等设备中采集图像，并对他们进行编辑、修复、以及调整效果，同时可以改变图像的颜色模式，并能在图像中制作艺术文字等。Photoshop中的高级绘图工具，可自动生成背景纹理、图层效果，多种特殊效果滤镜，可创建多种艺术效果和绚丽的web图形并可直接在photoshop中定义和编辑切片的工具透明控制，包括用于混合到任意背景中的边缘的仿色透明度。强大的彩色校正工具——修复画笔，可在消除瑕疵的同时保留色调和纹理图层。Photoshop的强大工具可以使操作者不管制作任何图像都游刃有余。对于设计网页，photoshop是不可或缺的工具，是强大的图片处理工具。

3.FlashMX:Macromedia公司出品的Flash是制作网页动画的利器。严格来说，F1ash是网络多媒体制作工具而不是网页编辑工具。F1ash是制作动感网页的权威。对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动画。可以让制作者随心所欲地实现各种创意，并且可以和javascript一起创作出具有强大交互性的网页动画。

Flash是一种绘制矢量图形和创作互动多媒体动画的软件。它可以用少量的矢量数据就可以描述相当复杂的对象，所以生成的文件尺寸小，便于在网上传输。Flash创建的动画集可以插入到html文档中，也可以单独制作网页。使网页的效果更加完美。

八网页制作的优缺点

比较明确，风格统一。并运用了一些其它的设计软件加以辅助设计。使网页更加具有动感，形式丰富。就内容而言，比较丰富。大量运用了图片，并进行了文字说明，做到了图文并茂。但是由于我们刚接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。

九代码

1．滚动字幕

<tdheight="167"><MARQUEEid=newsonmouseover=this.stop()

style="FONT-WEIGHT:normal;LEFT:0px;MARGIN-LEFT:1px;TOP:1px;TEXT-ALIGN:center"

onmouseout=this.start()scrollAmount=1scrollDelay=50

direction=upbehavior=loopwidth=250height=150background="">

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-21.htm"target=_blank>二氧化氯的发展史</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-22.htm"target=_blank>二氧化氯对健康的影响</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-23.htm"

target=_blank>二氧化氯作为水体消毒剂的特性</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-24.htm"

target=_blank>二氧化氯的主要应用领域：用于造纸、用于饮用水处理、用于环境废物处理、用于油田......</A></P>

</MARQUEE>&nbsp;</td>

2．链接站点

<selectclass=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=select>

<optionselected>→友情链接站点←</option>

<option

value=>新浪网</option>

<option

value=>网易</option>

<option

value=>搜狐网</option>

<option

value=>新视听</option>

<option

value=>中华网</option>

<option

value=>雅虎</option>

<option

value=>263首都在线</option>

<option

value=>索易</option>

</select>

</p>

<palign="center"><fontcolor="#333333"size="2">

<select

class=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=number1>

<optionselected>→环境保护站点←</option>

<option

value=/>国家环境保护总局

<option

value=/>北京市环境保护局

<option

value=/>山东环境

<option

value=/default.aspx>济南市环境保护局

<option

value=www.hisun-/>青岛海晟环保技术

</select>

3．下拉列表

<selectclass=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=select>

<optionselected>→→产品介绍←←</option>

<option

value="Untitled-6.htm"target="_blank">二氧化氯发生器-WPR型</option>

<option

value="Untitled-7.htm"target="_blank">二氧化氯发生器-WPRⅠ型</option>

<option

value="Untitled-8.htm"target="_blank">二氧化氯发生器-WPRⅡ型</option>

<option

value="Untitled-18.htm"target="_blank">二氧化氯发生器型号说明</option>

<option

value="Untitled-9.htm"target="_blank">破氰、除铬一体化设备</option>

<option

value="Untitled-10.htm"target="_blank">ZT系列空气净化工作台</option>

<option

value="Untitled-11.htm"target="_blank">ZT系列百级层流罩</option>

<option

value="Untitled-12.htm"target="_blank">ZT系列高效自净器</option>

<option

value="Untitled-13.htm"target="_blank">ZT系列高效空气过滤器</option>

<option

value="Untitled-14.htm"target="_blank">FLS-系列风淋室</option>

<option

value="Untitled-15.htm"target="_blank">净化空调厂房</option>

<option

value="Untitled-16.htm"target="_blank">中效送风机组</option>

<option

value="Untitled-17.htm"target="_blank">各种医疗器械设备及实验室</option>

</select>

参考文献

1.魏洪斌《DreamweaverMX网页设计》清华大学出版社

2.马波《DreamweaverMX完美网页设计与制作》中国青年出版社

3.黄梦《DreamweaverMX完全征服手册》中国青年出版社

4.周明涛《DreamweaverMX网页设计指南》机械工程出版社

5.陈青、刘时燕、macromedia《FlashMX标准案例教材》人民邮电出版社

6.刘淼《FlashMX入门与提高》人民邮电出版社

7.李伟《FlashMX动画制作实例教程》清华大学出版社

8.刘睿、陈志宇《Photoshop6.0实用教程》山东科学技术出版社

网页设计报告范文篇8

论文摘要：网页的内容通常是由图片和文字组成。由文字构成网页的主体，而图片则能够美化和增色你的网页。那些包含了设计精美图片的网站，往往能让浏览者流连忘返。因此，有漂亮的图片是你的网页能吸引人的一个有力保证。

一、介绍

超链接是网页中最活泼、最有吸引力的一种元素。表单用于特殊的信息，使用户和网站进行交互，使你找到用户的详细信息。表格在许多工作中有着广泛的应用。

框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的Web页面，使用Web页面显示一致的用户界面和灵活的页面内容。

网页制作的高级技术包括：在网页中插入FLASH动画利用Java或者javascript制作网页的动态效果。网页中使用插件，视频等Web组件以及创建、和管理站点等技术。

Web页面往往是具有各种各样的页面元素、丰富的内容和复杂的布局。因此仅仅使用到一种或者两种网页制作技术，不可能创作出一个优秀的Web页面，一个美观而实用的Web页面往往需要综合利用各种技术。

二、概述

1.网站名称：“济南中天环保设备有限公司”

2.步骤：

(1)确立主题

(2)收集资料

(3)创建网站

(4)编辑网页

(5)美化网页

三、目的

运用已经掌握的知识完成一个环境保护企业网站。通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweaver制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。

四、要求

根据公司的要求，设计一个企业站点，以达到宣传该公司及其产品的目的。有整体框架结构，表格定位等，布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。

五、设计工具

Dreamweaver、Flash、Photoshop等。

六、站点构思

1.整体构思：

本网站主题为：济南中天环保设备有限公司。总共有网页24个。主页是一个总目录的网页，里面加有网页动画效果“滚动字幕”及Flash动画，本站几个主要分网页分别为：公司简介、资质认证、产品介绍、业务范围、经营业绩、联系方式。还有许多子网页。

2.页面构思：

下面介绍一下网站中的几个网页的制作。

业务范围中的二氧化氯发生器产品公司服务承诺页面，背景色采用跟主页一样的蓝色，淡蓝色的背景给人以干净大方的感觉，与环保网站的主旨相一致。上方为Flash动画与链接页，左下方是用Photoshop

处理过的图片，与主页是一致的。右边的标题是用Photoshop制作的图片，小标题采用斜体加黑，这样制作丰富了页面内容，使整个页面条理清晰。服务承诺分条目标示，一目了然。最后的“空气净化服务范围”标题，即可以链接到空气净化服务范围页面。

标题“服务范围和承诺”是用Photoshop制作的，先用油漆桶工具把背景色填充为与页面相同的淡蓝色，调整文字的大小与位置，两边分别加上符号“【”、“】”和“≡”，使图片看起来更加美观。

经营业绩页面，背景色与Flash动画，链接页与主页保持一致。这一页的主要内容是用表格形式来固定的，边框设置为1，颜色为淡灰色。表格宽度与Flash宽度一致。整个页面清晰有致，比较大方，浏览者可以清楚的看到公司近年来的经营业绩。

联系方式页面，左下方的图片与右边的标题都是用Photoshop制作的，在联系方式中还添加了一个outlookexpress电子邮件，方便用户与公司的联系，用户可以直接点击给公司发送邮件。outlookexpress作为全球范围内的联机通讯软件，已经被越来越多的人所接受，无论是与同事和朋友交换电子邮件，还是加入新闻组进行思想与信息的交流，OutlookExpress都已成为不可或缺的助手。联系方式中除了电子邮件，还列出了公司地址，电话，传真，邮编。

左边的图片是在Photoshop中，先用椭圆选框工具选中所要的部分，放置新建的画布中，再用油漆桶工具把空白处填充为与页面背景相同的蓝色并对画面进行淡化处理。右边的标题是在Photoshop中，用油漆桶工具填充背景色，然后写上“联系方式”，调整其大小与位置，“方式”二字较“联系”稍小一些，左右分别加上符号“≡”，“「”，“」”，“≡”，使图片放置页面中显得美观，更突出了主题内容。

FLS－系列风淋室，净化空调厂房，中效送风机组，各种医疗器械设备及实验室设备等页面由页面“产品介绍”链接的，并且均以淡蓝色为背景底色。页面大部分有图片和文字两部分组成。文字部分由表格固定，表格边框设为零，图片是用Photoshop制作成的。

所有页面整齐划一，设计风格保持一致，加上淡蓝色的背景，给人简洁、明了、大方的感觉。

七所用各技术的特点

1.Dreamweaver:Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。

Dreamweaver的主要特点：

最佳的制作效率

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

网站管理

使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有链接。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

无可比拟的控制能力

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。

所供即所得

Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所供即所得的功能，让您不需要透过浏览器就能预览网页。

梦幻样版和XML

Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部分，内容提供者可直接编辑以样式为主的内容，却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出XML内容。

全方位的呈现

利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascadingstylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站下载它的描述档，便可得知详尽的成效报告。

2.Photoshop:Adobephotoshop在绘图、色彩调整等诸多方面有着出色的功能，集成度高、适应面广和操作简便。他不仅提供强大的绘图工具，可以直接绘制艺术图形，还能直接从扫描仪，数码相机等设备中采集图像，并对他们进行编辑、修复、以及调整效果，同时可以改变图像的颜色模式，并能在图像中制作艺术文字等。Photoshop中的高级绘图工具，可自动生成背景纹理、图层效果，多种特殊效果滤镜，可创建多种艺术效果和绚丽的web图形并可直接在photoshop中定义和编辑切片的工具透明控制，包括用于混合到任意背景中的边缘的仿色透明度。强大的彩色校正工具——修复画笔，可在消除瑕疵的同时保留色调和纹理图层。Photoshop的强大工具可以使操作者不管制作任何图像都游刃有余。对于设计网页，photoshop是不可或缺的工具，是强大的图片处理工具。

3.FlashMX:Macromedia公司出品的Flash是制作网页动画的利器。严格来说，F1ash是网络多媒体制作工具而不是网页编辑工具。F1ash是制作动感网页的权威。对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动画。可以让制作者随心所欲地实现各种创意，并且可以和javascript一起创作出具有强大交互性的网页动画。

Flash是一种绘制矢量图形和创作互动多媒体动画的软件。它可以用少量的矢量数据就可以描述相当复杂的对象，所以生成的文件尺寸小，便于在网上传输。Flash创建的动画集可以插入到html文档中，也可以单独制作网页。使网页的效果更加完美。

八网页制作的优缺点

比较明确，风格统一。并运用了一些其它的设计软件加以辅助设计。使网页更加具有动感，形式丰富。就内容而言，比较丰富。大量运用了图片，并进行了文字说明，做到了图文并茂。但是由于我们刚接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。

九代码

1．滚动字幕

<tdheight="167"><MARQUEEid=newsonmouseover=this.stop()

style="FONT-WEIGHT:normal;LEFT:0px;MARGIN-LEFT:1px;TOP:1px;TEXT-ALIGN:center"

onmouseout=this.start()scrollAmount=1scrollDelay=50

direction=upbehavior=loopwidth=250height=150background="">

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-21.htm"target=_blank>二氧化氯的发展史</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-22.htm"target=_blank>二氧化氯对健康的影响</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-23.htm"

target=_blank>二氧化氯作为水体消毒剂的特性</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-24.htm"

target=_blank>二氧化氯的主要应用领域：用于造纸、用于饮用水处理、用于环境废物处理、用于油田......</A></P>

</MARQUEE>&nbsp;</td>

2．链接站点

<selectclass=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=select>

<optionselected>→友情链接站点←</option>

<option

value=>新浪网</option>

<option

value=>网易</option>

<option

value=>搜狐网</option>

<option

value=>新视听</option>

<option

value=>中华网</option>

<option

value=>雅虎</option>

<option

value=>263首都在线</option>

<option

value=>索易</option>

</select>

</p>

<palign="center"><fontcolor="#333333"size="2">

<select

class=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=number1>

<optionselected>→环境保护站点←</option>

<option

value=/>国家环境保护总局

<option

value=/>北京市环境保护局

<option

value=/>山东环境

<option

value=/default.aspx>济南市环境保护局

<option

value=www.hisun-/>青岛海晟环保技术

</select>

3．下拉列表

<selectclass=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=select>

<optionselected>→→产品介绍←←</option>

<option

value="Untitled-6.htm"target="_blank">二氧化氯发生器-WPR型</option>

<option

value="Untitled-7.htm"target="_blank">二氧化氯发生器-WPRⅠ型</option>

<option

value="Untitled-8.htm"target="_blank">二氧化氯发生器-WPRⅡ型</option>

<option

value="Untitled-18.htm"target="_blank">二氧化氯发生器型号说明</option>

<option

value="Untitled-9.htm"target="_blank">破氰、除铬一体化设备</option>

<option

value="Untitled-10.htm"target="_blank">ZT系列空气净化工作台</option>

<option

value="Untitled-11.htm"target="_blank">ZT系列百级层流罩</option>

<option

value="Untitled-12.htm"target="_blank">ZT系列高效自净器</option>

<option

value="Untitled-13.htm"target="_blank">ZT系列高效空气过滤器</option>

<option

value="Untitled-14.htm"target="_blank">FLS-系列风淋室</option>

<option

value="Untitled-15.htm"target="_blank">净化空调厂房</option>

<option

value="Untitled-16.htm"target="_blank">中效送风机组</option>

<option

value="Untitled-17.htm"target="_blank">各种医疗器械设备及实验室</option>

</select>

参考文献

1.魏洪斌《DreamweaverMX网页设计》清华大学出版社

2.马波《DreamweaverMX完美网页设计与制作》中国青年出版社

3.黄梦《DreamweaverMX完全征服手册》中国青年出版社

4.周明涛《DreamweaverMX网页设计指南》机械工程出版社

5.陈青、刘时燕、macromedia《FlashMX标准案例教材》人民邮电出版社

6.刘淼《FlashMX入门与提高》人民邮电出版社

7.李伟《FlashMX动画制作实例教程》清华大学出版社

8.刘睿、陈志宇《Photoshop6.0实用教程》山东科学技术出版社

网页设计报告范文篇9

关键词：泛雅平台；混合式教学；微视频资源；教学设计；教学反思

“互联网+教育”是一个热门话题，MOOC教学、翻转课堂、混合式教学等模式已成为当前教育改革的重要发展趋势。2019年在教育部的工作会议上提出各学校应积极促进信息技术与教育教学的深度融合，究其本质是推动教育信息化全面升级的同时，教师的思维观念、创新意识、信息素养也要同步提升，促进课堂教学高质量完成。因此，必须充分利用现有信息化教学手段，改革创新固有的教学思维方式，提升课程教学质量的有效路径。适逢我校“智慧校园”“高水平现代化职业学校”项目创建，我们与超星公司进行合作，多次去其总部零距离培训学习，借助他们优秀的泛雅网络教学平台进行信息化教学与研究，在“边学边做，边做边用”中探索《网页设计与制作》课程的教学模式的实施方案，希望能有效提高课堂教学质量，对中职信息化教学模式改革提供参考。

1中职《网页设计与制作》课程现状

本课程是中职计算机应用、计算机网络等专业的一门专业基础课程，《国家职业教育改革实施方案》中“职教20条”要求推行“1+X证书”制度，其中“Web前端开发”即是“网页设计与制作”课程的核心内容，考取该证书的学生可从事Web前端开发、网页设计、网站建设等职业工种。它亦是对口单招班计算机应用专业学生的高考必考科目，在学生的升学考试中起到举足轻重的作用。从近几年本校《网页设计与制作》课程的教学情况看，由于采用的是传统填鸭式的教学模式，缺点显而易见，知识点枯燥乏味，学生被动接受，甚至有学生出现抵触情绪，教学效果必然不理想。因此，该课程的教学创新改革已箭在弦上。本校是江苏省首批智慧校园建设单位，无线网络全校覆盖，教室已安装智慧黑板、交互式教学一体机，学生智能终端设备齐全，泛雅平台可无缝对接，完全可以全天候进行网络自主学习，混合式学习的软、硬件条件完全具备。

2泛雅平台课程资源建设

为更好地融合国规和校本教材开展混合式教学，本校计算机教研组将《网页设计与制作》课程划分为5个项目，13个任务，知识点串联起来，采用项目引领、任务驱动的教学策略，教学模块以项目中的知识点来划分，每个模块的资源包含微课视频、课件、教案、学案、测试模块等形式。在具体课程中分别穿插短视频、Flash动画、案例背景以激发学生的学习兴趣、促进知识重、难点的有效解决。每次课程中均配有测试模块，学生首先应进行课前测试，只有测试合格后方可进入下一环节内容的学习。同时，重要的模块设置了讨论环节或头脑风暴，学生可对学习过程中遇到的各种难点、困惑点进行课前的在线交流，教师可在线答疑和进行针对性的辅导。其中微课视频资源的建设可采取以下几点原则：

2.1内容布局合理

在进行微视频资源设计时，其内容一是讲究具体直观，二是必须是该章节的重、难点。同时，微课的设计也应具备科学性，既要形象生动，又要符合学生的认知发展规律。

2.2内容短小精悍

微课资源需要在网络平台播放，在设计时，需短小精悍，且一个视频资源只讲解一到两个知识点，不宜冗长，通常不要超过5分钟。其涉及的教学主题和资源容量均要小，才适合学生碎片化时间来学习。

2.3以学生为中心

建构主义理论强调学生经验世界的丰富性，学生并非一张白纸，而是有巨大潜力的鲜活个体。作为教师应清醒认识到这一点，在微视频资源的开发和具体教学活动时，体现以学生为中心的原则。首先，视频资源材料要从学习者的实际需要出发，发挥学习者的主观能动性，通过激发学生好奇、兴趣来探究和发现问题；其次，教师、学校、家庭三方要能提供全面微学习服务条件，尤其是校外家庭的督促非常重要，这样学生学习的外部环境即可得到保障。

3全程教学过程实施

泛雅平台的优点是告别传统授课模式，利用前沿技术引领课堂教学革新，以课程为中心、教师为主导、学生为主体，充分关联教室已有硬件，覆盖多种课堂教学模式。老师可以更加便捷地进行签到、选人、抢答、分组教学、主题讨论等教学活动的发放，做到线上课程及资源的实时调用，将传统课堂变为智慧课堂。

3.1教学关节环环紧扣

基于泛雅平台的计算机教学过程设计和实施应以课前、课中及课后三个环节进行。课前，根据教学大纲和课程标准的要求，教研组教师集体备课，共同协作，编写教学计划和教案，精心制作微课、PPT课件、习题，准备上课所需的各类资源，上传到泛雅平台并发消息通知到班级学生，学生登录平台进行课前的线上自主学习完成规定的学习任务，掌握低难度的知识，比如HTML标签认知，几种超链接技术一看便会，同时也可了解其产生的背景和相关技术发展的历程和趋势。课前泛雅平台上，教师负责引导和督促学生，所有学生均可通过平台提出疑问，教师和其他在线同学解答；课中是教师主导、全体学生参与的“舞台”，混合式教学模式大放异彩，师生之间、生生之间的合作交流，共同完成高阶任务的学习，实现知识的内化吸收，上交作品并在线完成课堂学习评价反馈；课后，师生、生生通过在线交流讨论，分享学习体验，订正并完善作品，提交泛雅空间。每一个模块教学后，教师依据学生提交的作品、测试成绩、课堂活跃度、大数据分析报告等指标，客观评出学生的平时单项成绩。

3.2分层教学提升质量

学生的接受水平、学习能力各有不同，尤其是中职课堂，可将学生按照个体差异划分成若干个教学小组，并对不同的小组提出相应的教学目标和要求，施以不同的教学方式，以达到提高教学效果的目的。如对接受能力强、基础好的学生，可鼓励其以自学为主，学会后自己尝试用同一技术做不同界面效果的网页；对接受能力一般的学生，可采用任务驱动的方法，循序渐进，逐步增加知识点难度；对基础水平较差的学生，可采用小师傅（已学会的同学担当小师傅）演示操作方法，有针对性地教学，保证这部分学生也能掌握相关计算机基础知识，同时也能进一步强化学生之间的合作意识，将不同层次的学生进行有机组合，形成不同合作学习小组，在提升学生的网页设计水平的同时，对表现好的同学给予激励和表扬，调动了他们的积极性，不同层次的同学均能体会到成功的喜悦。

4教学评价设计

当学习者使用智能终端学习时，所涉及的学习操作包括听课、写笔记、做作业、实践、讨论问题、参加线上活动等都将成为教育大数据的来源。基于泛雅网络平台的混合式教学通过组内自评、小组互评、教师点评等评价形式，从多视角客观评价了学生在课前、课中、课后的学习表现，这种方式有利于全方位检验学生的真实学习力，有益于学生自主分析和解决问题，有助于学生综合能力的提高。积极打造过程性评价与结果性评价相结合的考评策略。在学生完成不同模块的学习后，根据专业设置和职业技能的要求，分别对学生的学习态度、学习能力和合作能力等进行过程性评价。比如，平时成绩包括学生的学习态度、作业完成情况、出勤次数、课堂提问、上机操作、作品展示、合作学习等方面，教师每次上课时，对学生的表现及时给予激励加表扬，调动其积极性，端正其学习态度；期末闭卷考核，则注重考核学生灵活运用知识的能力和解决实际问题的能力。终结考核总成绩以平时考核加上期末闭卷考核占不同比例来综合计算，构成了全方位客观的评价体系。

5教学管理“四化”

在《网页设计与制作》课程的教学实施过程中，发现教学方法和经验具备项目化、图形化、数据化、个性化的“四化”优势。项目化是指课程的实施可以采取知识点归纳到一个一个的项目中去，像游戏闯关一样逐个地去实现；图形化是指整个教学过程均记录在泛雅平台上，像流程图一样可随时呈现出来；数据化是指每一次模块化教学的内容，如考勤、讨论、作业、考试的记录会自动汇集成考核数据，供领导或教师直观分析；个性化是指学习不是千篇一律，而是由学生自己掌握，学习不懂的地方可反复回看。另外，泛雅还有优质的线上课程，提供了比书本更丰富的知识和素材，学生可根据自己掌握情况自主选择学习。

6应用效果反思

经过一段时间的研究、探索和实践，对泛雅平台的混合式教学模式等有了深层次的掌握，以此为基础对课堂应用效果进行实证检验，虽取得一定成效，但也有值得反思的地方。本模式革新传统教学模式，通过线上、线下学习方式，充分调动学生的积极性，发挥学生的主动性，提高了学生的参与度。实施该模式后，教学的重、难点迎刃而解，有效提高了学习效率，取得了令人满意的教学效果。当然，在设计和实践教学过程中还需把以下两个方面做到位：

6.1高质量的微课资源

微课资源的开发对教师的业务水平提出了很高的要求，在涵盖知识点的同时具备趣味性，既要吸引学生，又要能够在规定教学时间段内掌握特定知识点。另外，微课资源还要有配套的导学案和试题检验，有助于学生厘清思路和各知识点间的关系，课后及时测验学习效果。

6.2互动强的课堂活动

丰富多彩的课堂活动是衡量一节课是否成功的重要因素，教师应合理分配活动时间和划分活动小组，通过小组内的协作和小组间的竞争，让更多学生能够展示自己，增强他们的自信心和成就感。要特别关注的是学困生和性格内向的学生，全力帮助他们克服胆怯心理和畏难情绪，提升学习效果。

7结语

中职课堂，特别是操作性极强、更新速度极快的计算机教学，如果还是延续传统的教学模式，必然导致教学效果差、效率低，学生掌握知识不理想。应尝试革新思路，在课程中充分利用泛雅平台、蓝墨云班课、雨课堂等信息化学习平台辅助教学，使用前沿、创新的教学模式激活课堂。本教学模式适应中职学生的学习规律和习惯，有效解决师生之间的沟通障碍。每个教学模块的授课情况和学生签到率、任务完成质量、上课活跃度、测试成绩等信息在泛雅平台上精准呈现，供后期分析并制定下一步计划。学生在课后遇到难题，可以随时观看视频解决，难点甚至可以反复回放。这样既掌握了知识，又能提升他们自主解决问题的能力，对学生的课堂学习和今后职业发展十分重要。

参考文献：

[1]许兴梅.基于泛雅平台的混合式教学过程——以中职计算机平面Photoshop课程为例[J].天工,2019(8):86.

[2]周奎,徐建俊,徐耀.基于云课程平台的智慧型课堂探索与实践[J].中国教育信息化·基础教育,2018(12):83-85.

[3]陈大伟,斯小琴,吴约.基于超星泛雅平台大学物理翻转课堂在线课程资源建设与应用实践[J].青海师范大学学报(自然科学版),2019,35(1):77-82.

[4]郭培粉.基于泛雅平台的基础英语翻转课堂教学模式构建研究[J].高教学刊,2019(20):119-121.

网页设计报告范文篇10

论文摘要：网页的内容通常是由图片和文字组成。由文字构成网页的主体，而图片则能够美化和增色你的网页。那些包含了设计精美图片的网站，往往能让浏览者流连忘返。因此，有漂亮的图片是你的网页能吸引人的一个有力保证。

一、介绍

超链接是网页中最活泼、最有吸引力的一种元素。表单用于特殊的信息，使用户和网站进行交互，使你找到用户的详细信息。表格在许多工作中有着广泛的应用。

框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的Web页面，使用Web页面显示一致的用户界面和灵活的页面内容。

网页制作的高级技术包括：在网页中插入FLASH动画利用Java或者javascript制作网页的动态效果。网页中使用插件，视频等Web组件以及创建、和管理站点等技术。

Web页面往往是具有各种各样的页面元素、丰富的内容和复杂的布局。因此仅仅使用到一种或者两种网页制作技术，不可能创作出一个优秀的Web页面，一个美观而实用的Web页面往往需要综合利用各种技术。

二、概述

1.网站名称：“济南中天环保设备有限公司”

2.步骤：

(1)确立主题

(2)收集资料

(3)创建网站

(4)编辑网页

(5)美化网页

三、目的

运用已经掌握的知识完成一个环境保护企业网站。通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweaver制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。

四、要求

根据公司的要求，设计一个企业站点，以达到宣传该公司及其产品的目的。有整体框架结构，表格定位等，布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。

五、设计工具

Dreamweaver、Flash、Photoshop等。

六、站点构思

1.整体构思：

本网站主题为：济南中天环保设备有限公司。总共有网页24个。主页是一个总目录的网页，里面加有网页动画效果“滚动字幕”及Flash动画，本站几个主要分网页分别为：公司简介、资质认证、产品介绍、业务范围、经营业绩、联系方式。还有许多子网页。

2.页面构思：

下面介绍一下网站中的几个网页的制作。

业务范围中的二氧化氯发生器产品公司服务承诺页面，背景色采用跟主页一样的蓝色，淡蓝色的背景给人以干净大方的感觉，与环保网站的主旨相一致。上方为Flash动画与链接页，左下方是用Photoshop

处理过的图片，与主页是一致的。右边的标题是用Photoshop制作的图片，小标题采用斜体加黑，这样制作丰富了页面内容，使整个页面条理清晰。服务承诺分条目标示，一目了然。最后的“空气净化服务范围”标题，即可以链接到空气净化服务范围页面。

标题“服务范围和承诺”是用Photoshop制作的，先用油漆桶工具把背景色填充为与页面相同的淡蓝色，调整文字的大小与位置，两边分别加上符号“【”、“】”和“≡”，使图片看起来更加美观。

经营业绩页面，背景色与Flash动画，链接页与主页保持一致。这一页的主要内容是用表格形式来固定的，边框设置为1，颜色为淡灰色。表格宽度与Flash宽度一致。整个页面清晰有致，比较大方，浏览者可以清楚的看到公司近年来的经营业绩。

联系方式页面，左下方的图片与右边的标题都是用Photoshop制作的，在联系方式中还添加了一个outlookexpress电子邮件，方便用户与公司的联系，用户可以直接点击给公司发送邮件。outlookexpress作为全球范围内的联机通讯软件，已经被越来越多的人所接受，无论是与同事和朋友交换电子邮件，还是加入新闻组进行思想与信息的交流，OutlookExpress都已成为不可或缺的助手。联系方式中除了电子邮件，还列出了公司地址，电话，传真，邮编。

左边的图片是在Photoshop中，先用椭圆选框工具选中所要的部分，放置新建的画布中，再用油漆桶工具把空白处填充为与页面背景相同的蓝色并对画面进行淡化处理。右边的标题是在Photoshop中，用油漆桶工具填充背景色，然后写上“联系方式”，调整其大小与位置，“方式”二字较“联系”稍小一些，左右分别加上符号“≡”，“「”，“」”，“≡”，使图片放置页面中显得美观，更突出了主题内容。

FLS－系列风淋室，净化空调厂房，中效送风机组，各种医疗器械设备及实验室设备等页面由页面“产品介绍”链接的，并且均以淡蓝色为背景底色。页面大部分有图片和文字两部分组成。文字部分由表格固定，表格边框设为零，图片是用Photoshop制作成的。

所有页面整齐划一，设计风格保持一致，加上淡蓝色的背景，给人简洁、明了、大方的感觉。

七所用各技术的特点

1.Dreamweaver:Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。

Dreamweaver的主要特点：

最佳的制作效率

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

网站管理

使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有链接。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

无可比拟的控制能力

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。

所供即所得

Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所供即所得的功能，让您不需要透过浏览器就能预览网页。

梦幻样版和XML

Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部分，内容提供者可直接编辑以样式为主的内容，却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出XML内容。

全方位的呈现

利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascadingstylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站下载它的描述档，便可得知详尽的成效报告。

2.Photoshop:Adobephotoshop在绘图、色彩调整等诸多方面有着出色的功能，集成度高、适应面广和操作简便。他不仅提供强大的绘图工具，可以直接绘制艺术图形，还能直接从扫描仪，数码相机等设备中采集图像，并对他们进行编辑、修复、以及调整效果，同时可以改变图像的颜色模式，并能在图像中制作艺术文字等。Photoshop中的高级绘图工具，可自动生成背景纹理、图层效果，多种特殊效果滤镜，可创建多种艺术效果和绚丽的web图形并可直接在photoshop中定义和编辑切片的工具透明控制，包括用于混合到任意背景中的边缘的仿色透明度。强大的彩色校正工具——修复画笔，可在消除瑕疵的同时保留色调和纹理图层。Photoshop的强大工具可以使操作者不管制作任何图像都游刃有余。对于设计网页，photoshop是不可或缺的工具，是强大的图片处理工具。

3.FlashMX:Macromedia公司出品的Flash是制作网页动画的利器。严格来说，F1ash是网络多媒体制作工具而不是网页编辑工具。F1ash是制作动感网页的权威。对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动画。可以让制作者随心所欲地实现各种创意，并且可以和javascript一起创作出具有强大交互性的网页动画。

Flash是一种绘制矢量图形和创作互动多媒体动画的软件。它可以用少量的矢量数据就可以描述相当复杂的对象，所以生成的文件尺寸小，便于在网上传输。Flash创建的动画集可以插入到html文档中，也可以单独制作网页。使网页的效果更加完美。

八网页制作的优缺点

比较明确，风格统一。并运用了一些其它的设计软件加以辅助设计。使网页更加具有动感，形式丰富。就内容而言，比较丰富。大量运用了图片，并进行了文字说明，做到了图文并茂。但是由于我们刚接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。

九代码

1．滚动字幕

<tdheight="167"><MARQUEEid=newsonmouseover=this.stop()

style="FONT-WEIGHT:normal;LEFT:0px;MARGIN-LEFT:1px;TOP:1px;TEXT-ALIGN:center"

onmouseout=this.start()scrollAmount=1scrollDelay=50

direction=upbehavior=loopwidth=250height=150background="">

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-21.htm"target=_blank>二氧化氯的发展史</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-22.htm"target=_blank>二氧化氯对健康的影响</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-23.htm"

target=_blank>二氧化氯作为水体消毒剂的特性</A></P>

<Pstyle="MARGIN-TOP:5px;MARGIN-BOTTOM:5px"><A

href="http://Untitled-24.htm"

target=_blank>二氧化氯的主要应用领域：用于造纸、用于饮用水处理、用于环境废物处理、用于油田......</A></P>

</MARQUEE>&nbsp;</td>

2．链接站点

<selectclass=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=select>

<optionselected>→友情链接站点←</option>

<option

value=>新浪网</option>

<option

value=>网易</option>

<option

value=>搜狐网</option>

<option

value=>新视听</option>

<option

value=>中华网</option>

<option

value=>雅虎</option>

<option

value=>263首都在线</option>

<option

value=>索易</option>

</select>

</p>

<palign="center"><fontcolor="#333333"size="2">

<select

class=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=number1>

<optionselected>→环境保护站点←</option>

<option

value=/>国家环境保护总局

<option

value=/>北京市环境保护局

<option

value=/>山东环境

<option

value=/default.aspx>济南市环境保护局

<option

value=www.hisun-/>青岛海晟环保技术

</select>

3．下拉列表

<selectclass=ourfont

style="MARGIN:0px;COLOR:#000000;BACKGROUND-COLOR:#ffffff"

onChange=javascript:window.open(this.options[this.selectedIndex].value)

size=1name=select>

<optionselected>→→产品介绍←←</option>

<option

value="Untitled-6.htm"target="_blank">二氧化氯发生器-WPR型</option>

<option

value="Untitled-7.htm"target="_blank">二氧化氯发生器-WPRⅠ型</option>

<option

value="Untitled-8.htm"target="_blank">二氧化氯发生器-WPRⅡ型</option>

<option

value="Untitled-18.htm"target="_blank">二氧化氯发生器型号说明</option>

<option

value="Untitled-9.htm"target="_blank">破氰、除铬一体化设备</option>

<option

value="Untitled-10.htm"target="_blank">ZT系列空气净化工作台</option>

<option

value="Untitled-11.htm"target="_blank">ZT系列百级层流罩</option>

<option

value="Untitled-12.htm"target="_blank">ZT系列高效自净器</option>

<option

value="Untitled-13.htm"target="_blank">ZT系列高效空气过滤器</option>

<option

value="Untitled-14.htm"target="_blank">FLS-系列风淋室</option>

<option

value="Untitled-15.htm"target="_blank">净化空调厂房</option>

<option

value="Untitled-16.htm"target="_blank">中效送风机组</option>

<option

value="Untitled-17.htm"target="_blank">各种医疗器械设备及实验室</option>

</select>

参考文献

1.魏洪斌《DreamweaverMX网页设计》清华大学出版社

2.马波《DreamweaverMX完美网页设计与制作》中国青年出版社

3.黄梦《DreamweaverMX完全征服手册》中国青年出版社

4.周明涛《DreamweaverMX网页设计指南》机械工程出版社

5.陈青、刘时燕、macromedia《FlashMX标准案例教材》人民邮电出版社

6.刘淼《FlashMX入门与提高》人民邮电出版社

7.李伟《FlashMX动画制作实例教程》清华大学出版社

8.刘睿、陈志宇《Photoshop6.0实用教程》山东科学技术出版社