网页设MG体育计论文范文6篇

发布时间：2023-09-20 丨 浏览次数：

　　MG体育现如今，就我国当前网页设计现状来看，由于缺乏相对完善的设计原则和标准规范体系，导致其在实际的设计过程中难免会出现一些不必要的麻烦，近而影响设计质量。因此，本文就具体归纳了在网页设计中应该注意的几点原则。

　　第一，网页设计人员在对网页进行设计时，一定要保证网页命名的简单明了，这是因为每一个网站室友多个网页共同组成的，如果不对其进行简化处理，很容易使人们产生一种混乱错杂的观感。因此，为了提高页面的连贯性，使其能够很好的链接在一起，设计人员应该对不同的页面设计具有代表性的名字，这样不仅能够减轻管理人员的工作任务量，还极大方便了人们的快速检索。并且MG体育，通过设置多项的关键词，让使用者更多更快的找到自己所需的信息内容。

　　第二，当用户登录到页面时，第一感官印象是非常重要的。因此，设计人员还要充分考虑到视觉效果问题，并对反差效果进行合理的应用。其次，还要保证网页结构和排版的流畅性。尽量在网页设计中插入大量的表格形式，以此来增强整个网页布局的均匀性，重点凸显该网站的主要内容，第一时间就能够抓住人们的注意力。此外，设计人员还要对页面的长度进行严格的控制，不宜过长，这是因为大多数使用者并不喜欢一直拉动滚动条，如果页面长度非常长，就会让用户失去耐心。同时，为了提高网页的视觉效果，无论是图像、背景、还是文字、标题，都应该保持风格一致，只有这样，才不会给用户带来混乱的观赏感。

　　第三，设计人员在对一个网页进行设计时，必须清楚认知到一点问题，那就是，并不是所有的用户都可以了解网站的各项设计，正是因为这一点错误的意识MG体育，很多设计人员往往忽视了网页导览的重要性，这就给不熟悉网页的用户造成了极大的不便。为此，网页设计者为每一位用户提供网页浏览地图。这样一来，用户就可以在主页搜索栏中输入所需信息，从而逐步提高网页的实用性。

　　第四，我们都知道，在一个网站中，有着大量的文字信息的图片，为了方面用户的使用，设计人员要在每一张的图片下面，加注详细的说明。并且，当图片处于缓冲阶段时，用户可以事先通过加注的文字信息来了解图片中的内容，这样不仅就可以有效减少用户的等待时间，避免用户出现厌烦的情绪。

　　第五，文字作为网页中主要的信息输出方式，其准确率的高低对于网页质量的好坏有着至关重要的影响，更是用户对网页评价标准的基本前提。若是网页设计人员不注重这一问题，导致网页中出现了大量的错别字，即使网页设计的再漂亮，也会在用户印象中大大折扣。所以，设计人员必须高度重视这一问题，并对所有的文字拼写进行认真仔细的检查，从而确保网页各方面设计都能够达到完美。

　　第六，网页设计人员要定期对网页链接情况进行测定，确保其始终处于有效性的状态，这样才能保证用户可以在第一时间寻找到页面。另外，还可以为用户提供其所需要信息的相关联系方式，使其能够更深入的了解信息内容，以此来增强用户对网页的依赖性。

　　（1）首先要准备大量的资料。在网页设计之初，应该准备大量的资料，这些资料必须是有价值的，不能违反著作权的相关规定。大量的资料对后期合理的排版，架构的调整，内容的丰富有着很重要的作用。

　　（2）注意每页档案大小。建议每个网页尽量在15k以下，如果可以缩减到12k，甚至10k那就更好，但是不能在5k以下。其实我们都知道，搜索引擎最佳化的目的，实际上是为了使用者，而不是为了搜索引擎本身。

　　（3）内容搭配要合理。在网页设计的过程里，合理编排内容显得尤为重要。要让一篇文章表达出想要表达的意义，让用户在查阅时清楚的知道设计者想要表达的内容，关键词尤为重要。而关键词如何放置才能起到这样的效果呢?拿出你的关键字，在下列六个地方各使用一次：标题、标签、网址里面、粗体关键字、页面上半部。

　　（4）当网页设计完成以后，设计人员要对网页进行随时的跟踪调查，观察用户更注重网页中的哪些部分，对哪一栏的信息量浏览率最多。并对用户发出评价表，具体了解用户对网页设计中的不满意之处，以此来对网页进行不断的优化调整，进一步提高信息的利用率，加入更多用户所需要的信息，追求精益求精的设计目标，从而逐步提高网页设计的高品质。

　　图形元素的存在大大美化了网页设计，它拥有强烈的艺术美感和视觉冲击力，是文字之后最早被引入到网页设计中的元素，它所传递信息的直观性远胜于文字。图形设计中的色彩搭配、元素构成、版式布局都要符合浏览者的审美心理，才能使得网页在短时间内给受众留下深刻的印象。网页设计中的图片提供导向和链接的功能。根据人机心理学研究，人们的视线在浏览网页时，会首先垂直的落在屏幕中心，然后向四周游动。决定了设计师要将重要的信息安排在注视点高的区域，所以设计师要根据视觉流程来合理安排图片的适度位置。网页设计中的图片是要经过网络下载才可以最后看到，受到宽带的限制，所以要求图形文件量尽可能的小。在图片大小固定的情况下，文件量越低说明图片分辨率要越低。对于显示器上的图片而言，分辨率为72dpi是大多数图片的最佳选择。

　　色彩的配色设计直接影响网站的整体定位、风格。作为设计中不可缺少的元素，它建立在文字图形的基础上，依靠眼睛的功能，通过感觉的视觉冲击力对心理起作用。每一种颜色都有不同的心理暗示。冷色中的蓝色代表平静，暖色中的红色代表激动；黑色给人沉重感，浅色则让物体轻盈；色彩从色调、饱和度、明度三个方面影响着网页，我们可以找到很多运用广泛的色彩配色方案，来作为实际学习和工作中的向导。

　　网页设计中的色彩元素需要符合国际色彩的标准，因为互联网络是建立在国际互联网统一的平台上的。最简单的说就是采用网页安全色，不能毫无节制的运用太多颜色，一般情况下先根据总体风格的要求定出主色调和辅助色进行色彩的搭配。网页色彩模式一般采取RGB模式。网页设计是通过显示器来进行展示的，目前显示器大都采用RGB颜色标准，这与RGB颜色模式的原理分不开。RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于两者亮度之总和，越混合亮度越高，即加法混合。在显示器上，通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的。

　　1.1文字的动态控制网页动态设计中往往以文字和影像为主，这两者在视觉上依靠其本身的形态和动态的画面效果可以起到很强的吸引力，动态的文字表现形式在完美的编排下会形成一定的律动感，通过这种律动感来讲主体信息传递给观众，所起到的效果往往是不可估量的，甚至可以说，观众在接受信息传递时内心是喜悦的，是主动自愿去接受的。因此,设计中对于文字的动态控制显得十分重要，要求对其相互间的位置关系进行动态变化的把控，注重其上下、左右、前后的动态变化，要做到其动态的走势能够良性地引导观众的视线，不易过快，特效要尽量单一，不易过多，不易复杂。

　　1.2文字的识别性和可读性网页设计中对于文字的选择都是根据其重要性的程度进行了一定的取舍，对字体的大小、颜色、显示效果、动态方向及效果等都有极高的设计编排要求，要充分考虑在有限的屏幕中大量的数字信息融合在一起所造成的信息辨别，一旦设计编排过于复杂，设计者追求多元化的表现手法，在文字效果上加入了过多繁杂的设计表现，往往会使观者无法辨别信息的主次，甚至于不能有效取得设计所要求表达的理念和效果。在现代平面设计中，如何提高观者的阅读效率是设计者应该着重考虑的问题，融入动态的文字设计仅仅是为了凸显信息的主次和吸引观众的注意力，起到引导阅读的效果，要着重考虑到字体的选择、显示屏的精度、运动的速度、文字量、句子长短、特效等各种因素的整体整合，要提高文字的可读性。

　　1.3屏幕的无限性及开放性二维的平面设计在效果呈现时往往以立体的三维效果来给予呈现，在屏幕两端留有空白给人以无限的延伸空间，而动态文字的设计与编排则给人一种进深的立体感，因此观众可以在具有动态效果的二维设计中感受到屏幕空间的无限大，这在一定程度上打破了媒介空间有限性的束缚，即在有限的空间内所要表现的却是无限的空间延伸，这一无限性则取决于设计者对文字形态、色彩、格式等方面的设计。

　　2.1形态的变化空间与动态是网页设计中文字动态的体现，是基于字体基础上对文字外部进行形态的处理与设计来实现的，在文字动态的设计中，一方面可以根据字体的本身结构对其进行变形处理;另一方面可以让字体的形态随着时间的变化而发生改变，例如最近比较热门的《舌尖上的中国》，其在影片开场前的设定上便十分动人，第一部以水墨画延伸出来的画面实际上是美食的结构，而字体的铺设则是由水墨画中毛笔笔尖的恣意挥洒而成，带给观众极强的美感和想象空间，观众在接受到这一视觉效果时所表现的心境便是平和且愉悦的。

　　2.2材质的构成现代计算机技术为动态文字的构成和质感提供了许多有效的技术处理，使得动态的文字能够实现在光影中的流动，富有肌理，极具美感和质感。现代电影开始广泛运用这种特效文字处理方式，以此来引起观众的共鸣，增强影片的氛围及烘托影片的主题，在3D技术渐渐普及的今天，以3D字体来进行网页设计和编排也渐渐成为设计的潮流，在网页设计中，裸眼3D文字及图像将慢慢渗入到人们的视线之中。

　　2011年艺术学升格为新的门类，有效促进了设计学科的发展，其下8个二级学科除了艺术设计学专业之外，其余如视觉传达设计专业（下文简称为“视传”）等专业，均侧重以理论为基础的实践型人才培育。而近年来，随着网络和信息技术逐渐渗透到社会经济生活的方方面面，设计领域也受到巨大影响，毕竟当代设计就是工业化、信息化的产物[1]。上述实践型艺术设计专业纷纷开设如网页设计、交互设计等相关课程，既满足学生知识技能提升的渴望，也应对市场和职业化需求。因此，探讨此类课程的教学思路和内容设计，成为非常迫切而重要的任务。

　　本文以视传专业的网页设计课程作为切入点，但结论对于其他应用实践型艺术设计专业同样适用。很多文献都分析过艺术设计类专业中的网页设计课程的具体情况[2][3]，大体来说，此课程一方面涉及较多编程知识（HTML+CSS+JavaScript）；另一方面，则需要良好的逻辑思维能力（网页的逻辑结构等）。一般来说，视传专业的生源大多来自艺考生，他们较之其他普通高考生，在计算机方面的知识、技能和思维模式处于较为薄弱的境况，而入学之后也不接触数学或非普及性质的计算机类课程。作为少数特例之一，浙江大学曾在艺术设计类专业中将计算机编程类课程设置为必修课，但由于通过率实在过低而且学生多有怨言，因此从2016级开始取消。因此，目前的网页设计课程存在三个亟待解决的问题。第一，虽然已有学者意识到网页设计与平面设计的联系[4]，但很多开设在视觉传达设计专业的网页设计课程还是直接照搬计算机专业的课程教学模式、内容、方法，这直接导致课程极为技术化。视传学生即便不产生厌学逃避情绪MG体育，也难以跟上教程进度。所以学校必须专门根据视传学生的特点进行课程建设，才能让学生愿意学、可以学，并学有所成。第二，传统的网页设计课程往往将重点全部放在各种技术细节上，没有充分强调网页设计的逻辑思维模式，即网页标记语言的“形式与内容相分离”原则和网页的DOM结构特性等，视传学生无法从本质意义上获得对网页设计的总体认识和深入了解。因此，要明确提出并且通过各种方式重复强调上述思维模式，并安排大量练习以巩固认知。第三，传统的网页设计课程虽然并未忽略网页设计的审美，却将之放在次要位置。实际上，视传作为艺术设计领域中的一员，对审美强调尤甚，艺术设计领域的每一门课中，教师最重要的任务之一就是让学生认识到美，本课程也不应例外。

　　综观课程始终，新的网页设计课程设计方案应遵循如下原则：第一，强调视觉设计的重要性，让视传学生从感性上存有喜爱和欣赏之情，认同这门技术性较强的课程与其专业的互通性和一致性，有自发的动力去完成课堂和课外作业。第二MG体育，以案例式教学为核心的团队合作，不采用“参考手册式教学”，即那种将知识点从头到尾罗列至尽的讲法，让学生反感和疲倦。应使用案例法引入知识技能点集群，并采取团队合作方式完成。[5][6]第三，强调思维模式的培养，但并非钻入技术琐碎细节的牛角尖之中。思维模式，尤其与数学逻辑思维相关的思维模式，是无法简单复制粘贴的。若能在教师的指引下于课堂上培养，则功莫大焉。第四，不断重复重要的技术知识点，即将重点、要点重复讲授、重复练习。在理工科的教学设计中，教师往往是避免这一点的，一是浪费时间精力，二来学生也不需要——他们举一反三的能力相对比较强。但这个原则对于视传学生非常重要，考虑到其薄弱的计算机基础，只有这样做才能落实教学内容。第五，将本课程与视传专业的其他专业课程相结合，使学生把握网页设计知识技能在其整个知识技能体系中的位置和相互关系，并借助其他专业课的所学所知，完成本课程的作业要求[7]。下面笔者以16次课、每次课3学时为例，简要阐述具体教学内容。第1次课：网页设计的现状与设计审美，通过精彩实例激发学生兴趣；书写第一个简单网页；网页设计的“内容与形式分离”，用海报设计为例探讨异同。第2次课：基本的HTML网页标签；完成一个简单案例，了解CSS的一般规则，并从视觉设计角度进行评价。第3次课：重复关于网页编程的基本要点；借助一个新闻列表网页案例，了解网页DOM结构的含义，分析DIV和SPAN这两个逻辑标签的用途。第4次课：初步认识CSS的盒子模型；完善新闻列表网页案例，获得两个不同的视觉效果；初步认识网页定位的概念。第5次课：重复网页设计思路和原则；了解BLOCK和INLINE元素的意义，用一种定位方式完成“工字形”网页案例。第6次课：用另外两种定位方式继续完成“工字形”网页案例，总结三种定位方式；学生完成“圣杯形”网页案例。第7次课：学习CSS选择器的第一部分内容；在分析过程中重复了解和掌握网页DOM。第8次课：学习CSS选择器的第二部分内容；学生自行设计视觉效果，提交新作品。第9次课：重复认识HTML的基本知识，学习网页表单；学生完成表单案例，初步体验JavaScript。第10次课：重复CSS知识点，对表单案例进行视觉美化；初步学习JavaScript的基本知识点。第11次课：重复HTML+CSS的基本要点，学生自行拟定一个小型网站（3至5个页面）的主题和视觉设计。第12次课：在上次课基础上，介绍第三方JavaScript库并予以应用。第13次课：重复HTML+CSS+JavaScript设计理念，介绍和应用第三方框架。第14次课：重点讲授和帮助学生规划、修改网页视觉设计稿，充分利用其他专业课相关技能，获得有一定专业水准的设计方案。第15次课：整合并重复课程前期知识要点，在第三方框架和第三方库的基础上进行中型网站建设，包括结构设计、视觉设计和代码设计。第16次课：针对所得网站，学生团队相互评价，教师评价，同时修改和完善；初步介绍网站的运行和维护，初步介绍迭代设计策略及其实施，准备迎接交互设计课程。

　　比较可知，本文提出的网页设计课程改革方案，与大部分传统课程设计都有较大差别，与一些创新性较强的课程改革方案也不尽相同[8]。课程设计并不遵循已有惯例，将教学要点以阶梯上升式的重复节奏，安排在整个教学过程中，并处处体现出强调视觉设计和逻辑思维模式这两个原则，还将案例式教学渗透到每一环节。通过这一门常规课时数的课程，视传专业的学生便已能从零基础出发，充分了解网页设计与平面设计的异同，并在此基础上规划、设计和编写从简单到中等复杂程度的网页、网站，不仅完成了教学目标，而且能持有一种主动的、探索的心态去面对原本令人畏惧的计算机技术世界，结合个人所长继续学习。在此，本文在褒义上使用“眼高手低”来总结网页设计背后的教学思维：眼界必须高，要在一开始意识到宏观抽象层面的“网页”到底是什么、网页逻辑结构是什么、网页设计又是什么，给予学生开阔的视野；动手可以低，因为网页设计所涉及的编程知识，其实在本课程层面上并不需要严格地识记背诵，对于需要完成的案例也不需有太高要求，点到为止——毕竟往后还有机会再做深入，而且网上有海量的资料可供查询或直接使用，但倘若触发了学生对计算机技术的逃避和抵触心态，就得不偿失了。这个观点，其实同样适用于各门设置在艺术设计类专业中的计算机和网络技术相关课程。当然，其中的不足偏颇之处，还有待教师同行进一步切磋探讨。

　　[2]段芸.艺术设计专业《网页设计》课程实践研究[D].沈阳师范大学，2013.

　　[3]李霞.计算机网页设计课程教学模式的改革研究[J].信息与电脑（理论版），2018（1）.

　　[4]郑丹青.项目教学法在动态网页设计课程中的教学应用[J].中央民族大学学报（自然科学版），2014（2）.

　　[5]张家军.论案例教学的本质与特点[J].中国教育学刊，2004（1）.

　　[6]马松.基于案例教学在计算机网页设计教学中的应用[J].亚太教育，2015（25）.

　　[7]朱松岩.现代网页设计与印刷类平面设计比较研究[D].苏州大学，2006.

　　Flash二维动画的制作软件，它与其他动画软件虽有相通之处，但是还有很多独特的特点，并且在网站中具有不可取代的地位。Flas相比于其他基于其他设计的动画的优点是交互功能，通过键盘等工具，能够将各个画面进行不受约束的跳转。并且它的语言脚本已经提供了强大的交互性的动画基础。因为这些优点，Flas才会被大范围的被运用到网站设计中，更有甚者直接制作纯flash的网站。

　　现在，在网络设计中，Flash技术已经有了广阔的拓展天地。这就表明了网页设计者必须具备Flas的技术，才能够适应当前的发展。Flash技术从简单的文字呈现到多媒体的flash网站的形成，从而标志着flash技术已经与网站设计完全融合。

　　2.1.1主题的突出静态网页中，主要是用文字和图片的方式来突出网站的重要信息，而用了Flash之后，就会吸引人的注意力，不但是色彩和动态的呈现上给人一种撼动人心的作用，而且还会给人焕然一新的感觉。并且运用在主题上面，很容易给人留下深刻的印象。2.1.2动态交互Flash重组功能再结合脚本语言和流程的调控，这三者相结合，让浏览着运用鼠标键盘进行画面切换，从而完成动画的交相呼应的职能。2.1.3数据库支持Flash具有把数据库连接起来的功能，这就更加丰富了网站的内容和动态呈现。Flash与HTML等内容相结合，能够制作出前台为Flash，而后台是数据库和asp技术的数据连接措施。Flash和asp结合之后，将网页所表现出的效果提升了一个高度，二者再与数据库相结合之后，不但对数据的支持力度上升，而且比较完善的交互界面也诞生在网页运用中。

　　网页设计者从网站中的建立目的和用户的需求等各方面为出发点，来对Flash技术进行在网站中的配比。信息查询的网站中，即使以Flash为引导界面，如果Flash效果太多，就会造成主次不分的恶性效果。而在娱乐版面中，Flash的篇幅应该加大，这些都要以互相交流为主，增加浏览者观看的兴趣。2.2.1部分应用在网页设计中，Flash进行展示的应当是突出主题的内容，这部分不应该过多，这样就做到点石成金的效果，这样不但把主题突出，还可以调动起阅览者的兴致。2.2.2整个网站的应用在广告、传媒、游戏等设计类网站，为了能够把本网站的个性化表现出来，而把Flash运用到整个网站，用单一的Flash来表现出其活跃和动态性。纯flash网站，从简单的文字、图片等设计，到复杂的音视频、广告、游戏还包括本网站的注册页面和登陆页面，已经导航栏链接等等，全部都是用Flash来装扮的，这就把网站的个性化、灵动性凸显出来，给人带来视觉上的享受。

　　这一点主要是针对于一个群体，有可提供的是Google地图的自主性的旅游的导航功能。在网络上各种旅游信息的传播，让一部分不想受到约束的旅游者提供了便利MG体育，而本方案是通过Google地图的自主导航功能，把旅游者想要去的地方，进行吃住行玩的一个整合，让旅游者提供了便利。而旅游者也可以在游玩的时候，在地图上进行评论，从而为他人提供旅游帮助。

　　制作单一的flash的状态，全部都是Flash制作的内容，而搜索的引擎并不会很少的识别出来这到底是表达的什么，从而导致网站无法做到很好的向浏览者展示，宣传和推动力不够。

　　ActionScript脚本语言在功能化比较多的基础上，缺点是有漏洞。而这种漏洞就促使了一些含有病毒的恶意代码随之攻击Flash的访问者的电脑，所以电脑的安全性受到辖制。所以有些访问者为了避免恶意病毒的入侵就把Flas全部都屏蔽，这样从而使网页设计者预定的效果。

　　我校选修课程一般总课时为36节，一周2节，共18周完成，只有计算机专业学生学习课时的一半左右。严重不足的课时，致使学生在基础性知识点的学习上浅尝辄止，练习时间极少，知识难点难于学习。

　　大部分艺术类专业的中职学生，在初中阶段只接触过简单的计算机应用操作，对网页设计的相关基础知识处于空白状态，如：基础编程、脚本的概念、HTML和文件管理等，而这些都直接影响着课堂的学习质量。倘若教师在原本有限的课时中，再分出一定的时间去解析文件路径、html和脚本等相关知识，就必然会导致学生的实操课时严重被压缩，最终无法真正掌握课堂的精髓。显然，课时不足、学生基础知识薄弱，教学方法传统等已经成为了阻碍该课程有效实施的突出问题，亟需探索新的教学方法，从本质上改变现状。而任务驱动法教学无疑是最适合的选择。其通过教师提出生动有趣的任务，最大限度地激发学生的学习热情，促使学生在完成任务的过程中掌握学习新知识的方法，并利用新知识完成任务，在课余或课堂上主动学习网页设计的相关知识。

　　传统的《网页设计与制作》课程教学大多只注重基础知识的教授，缺乏对学生实践能力的培养。同时作为选修课，很少能与学生自身专业相结合。实施任务驱动的艺术类专业《网页设计与制作》选修课的设置：

　　掌握网页布局技巧。基于艺术类学生所做的静态网站与计算机专业学生的动态网站相比没有任何竞争力。因此，本课程不以网站制作为最终教学目标。针对艺术类学生对“美”的认识普遍比工科类学生要强，并且艺术专业学生有学习Photoshop、CorelDRAW等软件的基础，笔者认为培养艺术类学生为网站进行布局和美工设计会更为恰当。因此，艺术类学生的网页设计课程的教学目的主要以掌握网页布局技巧为主。

　　结合该课程以及教学对象的特点，教学任务可分为两种：一种是有明确要求和统一模板的，学生只需按步骤重复老师的演示过程。这种任务适合学习的初始阶段，可在任务中认识网页设计的基本操作。另一种任务则是给出一些限制性的条件，让学生自由发挥完成。这类任务的关键在于激起学生的学习兴趣，从而激发学生主动利用周边资源，在教师的帮助或引导下，主动学习课程中相关知识，完成任务。学生从中获得满足感并渴望完成下一个任务，造成一个良性的循环。

　　在课程开始之初，首先通过演示等方式，让学生全面了解网页设计。并展示出往届学生优秀并吸引学生效仿的网站作品，从而提起学生学习的兴趣与自信。与此同时，引导学生逐一完成“诗歌排版”、“图文并茂”、“时空隧道——超链接”等几个简单并富有趣味性的基础小任务，让学生快速学会在网页中插入文字、图片和超链接等基础操作，以帮助学生建立学习该课程的信心，保持其继续学习的欲望。

　　在学生完成基础小任务后，设下课程的核心任务——制作有特色的个人网站。然后带着完成核心任务的目的去接受日常小任务的练习。当然，此时提出核心任务，是比较打击学生的学习自信的。所以在提出核心任务的同时，老师可将往届生完成的激趣小任务成果展示出来，并现场通过超链接拼凑，快速完成往届生的个人网站制作。并引导鼓励学生，接下来只要紧跟脚步，完成任务；最后即可快速完成核心任务。

　　通过完成“隐形的表格”、“多变的框架”、“神秘的样式——CSS基础”和“精准的定位——DIV”等任务，让学生自主学习和熟悉网页布局的技巧的同时，掌握文件路径和简单的CSS、DIV脚本阅读与修改能力。

　　在学生完成了几个任务之后，引导学生分小组协作完成自由度更大的任务。如：制作有5个不同内容的网页，其中一个为导航页，并可用超链接浏览其他页面。要求页面不会随窗口大小变化而改变内容位置，色彩、排版要配搭恰当，如网页有框架、声音、相册、Flash按键、CSS技术、DIV技术则加分。其他页面可以是团队介绍、兴趣爱好、组员的服装专业作品的介绍或展示、旅行回忆等页面内容。在小组分组成功之后，需要小组长带领组员讨论网站的设计以及所需的技术，并在纸上作出草图。如遇到小组的设计过于简单，教师需引导其丰富设计内容。在确定草图后，教师及时引导并鼓励学生自主学习，获取所需知识，完成任务。小组任务完成后，互相演示并说明制作中所用到的技术，同时组织学生进行小组相互点评。通过不断多种的任务驱动，逐渐引导学生独立完成美观的、实用的和使用较多网页布局技术（如：表格、框架、CSS和DIV等技术）的网站。