南京工业大学

网页设计课程设计报告

个人网站分析报告

             学院：   经济管理学院    

             专业： 信息管理与信息系统

             学号：    P2202100117   

             姓名：      邵宇劼       

成绩： 优秀

20##年12月

个人网站设计报告

一、  选定的2家标杆网站名录

二、  标杆网站分析（目标定位、版面的总体设计和栏目设置、提供的内容信息是否准确、网页的制作结构、色彩和导航、交互设计是否合理方便等方面对其进行评析比较，请配合截图）

美丽说（图1）

    目标定位：城市中的年轻、时尚、爱美的白领女性，商品全部是中高档女装及其相关产品，以时尚和高端品牌为主体。

版面的总体设计和栏目设置：版面以大图片展示产品为主，真人穿着照展示服装效果。栏目设置分为个人主页、翻杂志、站内搜索、逛宝贝、达人搭配、福利社、手机客户端等等功能。如图（2）

图（2）

提供的内容信息是否准确：内容比较准确，每一幅图片都配有相应文字说明描述产品特征。每类产品采用九宫格方式尽可能多的展示了不同颜色和样式。如图（3）

图（3）

    网页的制作结构：如图（4）

如图（4）

色彩和导航：色彩以粉色和白色为主，片中女性更喜欢的颜色，整体页面给人简洁温馨感觉，如图（5）

如图（5）

导航和标签也采用想通配色方案，显得简洁明快，文字按钮易于辨认。粉色突出重点推荐商品，黑色为普通商品分类链接。如图（6）

           如图（6）

交互设计是否合理方便：交互模式采用近似社区化模式，更接近真实购物体验，在购物时分享感受，有别于传统电商网站，是网站的特色功能。导航和搜索功能都比较符合用户使用习惯。

蘑菇街（图7）

目标定位： 90后对时尚敏感度高的女生为主，以淘货为目标，主要瞄准当季的盛行元素。相比美丽说，目标商品更为廉价流行。

版面的总体设计和栏目设置：主体页面是微博的形式的展现，强调了互动功能。除了采用微博形式外，在社区形态上也应用了小组的形式，每个用户都有一个主页,将二者结合起来。如图（8）

如图（8）

提供的内容信息是否准确：内容提供相对准确，产品描述加个人购物体验评价，更准确的描述了商品。

网页的制作结构：如图（9）

如图（9）

色彩和导航：配色同样选择了粉色作为主色调，翠绿色标注重点强调文字和链接，整体感觉简洁明快，富有活力，较容易吸引年轻女孩分享购物体验，参与互动。如图（10）

如图（10）

交互设计是否合理方便：整合微博和社区的讨论模式分享购物体验，简单的操作设计，方便多数微博和社区用户上手参与讨论分享信息。不提供独立购物平台，但笼络了对一些商品感兴趣的人群。

第二篇：制作个人网站

《制作个人网站》教学设计

摘要：本节课在建构主义教学思想的指导下，遵循在教师指导下的以“学生”为中心的学习模式，给学生真实的、具有挑战性的任务（任务驱动法），以此带动教学全过程，进而实现学生对知识的意义建构。

标题：《制作个人网站》

课程：《信息技术》（全一册）

学段：高一年级

一、 一、 目的：1、知识目标：（1）熟悉FrontPage 2000的软件

环境，掌握该环境下的文字处理方法；（2）掌握插入剪贴画的

方法，掌握使用表格，网站内部的超链接，应用掌握的知识制

作表达一定主题、包含文字、图片的个人网站。

2、素质目标：制作网页要应用到多方面的知识，同时给学

生提供了自由发挥的空间，学生可以充分发挥自身的创造力与

想象力，培养学生综合运用知识的能力。

二、活动概述：

首先以学校要建校园网站为引言，激发学生要自己制作个人主页的兴趣，然后给学生布置任务，同时激发学生的创造欲望；接下来是学生带着制作网页这个任务，开始自主学习的过程，完成学习任务；最后进行评价与自我评价，完成整个教学任务。

三、教学和学习活动过程记录：

（一） （一） 准备工作

教案附后，局域网要能正常运行，教师与学生机器上都要装有Win98、FrontPage 2000

（二） （二） 教学和和学习活动过程记录

本节课在建构主义教学思想的指导下，遵循在教师指导下的以“学生”为中心的学习模式，给学生真实的、具有挑战性的任务（任务驱动法），以此带动教学全过程，进而实现学生对知识的意义建构。

<一>、教学目标分析

1、知识目标：

网页有三个基本要素：文字、图片与超链接。它们的关系及知识点如下所示：

输入文字 文字 字体属性 对齐方式 插入图片 文字与图片的定位------使用表格 图片

7.1.2 编辑图片 图文并列 网站内部链接 网站外部链接 7.1.3 超链接

7.2.3

按照知识的逻辑关系与所涉及的知识点，这节课的知识目标定为两点：（1）熟悉FrontPage 2000的软件环境，掌握该环境下的文字处理方法；（2）掌握插入剪贴画的方法，掌握使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。

2、素质目标：

制作网页要应用到多方面的知识，培养学生的知识迁能力，同时给学生提供了自由发挥的空间，学生可以充分发挥自身的创造力与想象力，培养学生综合运用知识的能力。

<二>、情境创设

通过前一段时间对Word 2000（第四章、第五章）、上网、浏览网页查资料（第六章）的学习，学生已经基本掌握了OFFICE 2000操作的使用以及从网上获取信息的方法，同时对网页有了初步的印象。这节课从建设校园网站导入，启发学生要自己制作网站，展示自我并与其他人交流的想法，调动起学生的创作兴趣，培养学生知识的迁移能力，完成学生对知识的意义建构。

<三>、学习资源设计

这节课的教学内容是学习应用FrontPage2000这个工具软件来制作简单的网页，因此设计了一个提供FrontPage2000学习资料的教学课件来引导学生的学习。课件是用FrontPage2000设计的一个网站，此网站只有4个网页组成（一个主页和下挂三个子网页）。网页上已经包括这节课的学习内容：插入文字、图片、表格和超级链接。因而它本身就体现了这节课知识应用的效果，这个课件并不是真正意义的课件，只是任务驱动教学法中的任务，要求学生完成这个任务，在完成任务中主动探索，积极对知识的意义建构。每个软件中的“帮助”是一个非常好的学习资源同时也是很好的老师，Word 2000

等软件中的帮助学生已经熟练应

用，这为我们学习其它软件提供一个很好的方法同时也是能力的培养。因而我把FrontPage 2000中的“帮助”作为一个主要的学习资源，培养学生自学的能力。 <四>、教学过程设计

教学模式是以学生自主学习为主体，老师以指导者的身份在学生学习的过程中给予适当的建议，并适时进行指导。

1、导入

首先以学校要建校园网站为引言，校园网站下挂有教师个人网站、班级网站、学生个人网站等，激发学生要自己制作个人主页的兴趣，然后给学生布置任务，要求网站必须有同学们亲手制作的网页，才能真正成为的校园网站，提供大量的制作网页的素材（如图片、声音、动画、视频等），同学们可以自由地发表自己的想法和观点，开阔学生的思路，同时激发学生的创造欲望。

2、教学内容

教师简单分析教学课件的要素，将Office中的Word 2000知识迁移到此，将任务进行分解成为若干个小任务，如制作一个网站，必须制作若干个网页，而一个网页可能由文字、图片、超链接等构成，因而就有要完成插入文字、插入图片、插入超级链接等小任务。具体的任务要求是：文字要有不同的字体、颜色、字号、对齐方式；图片要求大小调节合适、位置摆放合适；表格要有合并与拆分，表格内要有文字、图片；主页与子网页之间要有超级链接并为双向的。然后简单演示一个网站内部的超级链接。引导学生轻松愉快、主动去解决问题，完成任务，进而达到自身对知识的意义建构。

接下来就是学生开始自主学习的过程。学生带着制作网页这个任务，并由此而产生对网页中的文字处理与图片等知识的需求，由内在的需要促使学生去主动探索、学习相应的知识，并通过自己主动探索来解决问题。在此过程中，教师巡视查看学生的学习过程，了解学生的学习情况、进度，以指导者的身份对个别学生的问题进行单独交流、指导；如：有的学生问网页之间的超级链接如何去做，有的学生问如何利用表格对文字、图片的定位等。学生之间可以互相交流、互相学习、互帮互助、团结协作；对大多数学生的共性问题，教师给予广播式指导解决。对于理解能力、动手能力以及综合应用能力强的同学指导他们进一步学习扩展内容，发展他们的个性，培养他们的积极创新精神。如对某些学的快的学生给予引导如何用表格套表格的再定位方法准确地定位文字、图片。

3、教学评估

在规定的时间内学生基本完成了学习任务，下面是给学生一个展示自我的机会，从学生制作的网页中挑选出有代表性的作品，由学生自己介绍、演示，这样可以锻炼学生的表达能力，然后让学生互相讨论，发表意见、看法，实现相互

交流、学习的目的。教师在此过程中以实现预定的教学目标为目的，适当地引导讨论方向。这一个过程是非常重要的过程，是一个再学习再提高的过程。对于知识掌握较好的学生正是表现自我的时候，是最有成就感的时候，对于少数知识掌握不太好的学生，真是一个再学习的过程，完成对知识的意义建构。

4、课堂总结

教师总结本节课的教学内容，对学生的制作成果表扬鼓励，并提出新的问题，留下悬念，激发学生继续学习的兴趣。如要使自己的网页更美观、内容更充实，具有“商业网站”的味道，我们就必须要对网页进行美化进行装饰，如何去才能实现呢？这是我们下一节要完成的任务。

（三） （三） 本次教学的必要条件

1．1．主要的教学地点：机房。

2．2．本次教学对教师的基本技术要求：

教师应能熟练使用：多媒体教学网（或大屏幕投影仪）、

FrontPage 2000。

3．3．本次教学对学生的基本技术要求：

学生应能熟练使用：Word 2000等。

4．4．硬件：

（1） （1） 教师用计算机1台，配置：P166以上/32M/1G以上

硬盘；

（2） （2） 学生用计算机配置：P166以上/32M/1G以上硬盘；

（3） （3） 局域网：需要。

5．5．软件：

（1） （1） 通用软件：Win98、FrontPage 2000；

（2） （2） 学科素材/资源库：Office 2000剪贴库、FrontPage 2000

自带的“帮助

（4）本次教学教师是否必须自编课件：必须；

课件是用FrontPage2000设计的一个网站，此网站只有4个

网页组成（一个主页和下挂三个子网页）。网页上已经包括这节课

的学习内容：插入文字、图片、表格和超级链接。因而它本身就体

现了这节课知识应用的效果，这个课件并不是真正意义的课件，只

是任务驱动教学法中的任务。

四、教学评价：

评价的三个方面：

1. 1. 对插入文字、图片的方面的评价；

2. 2. 对插入表格、定位文字图片的评价；

3. 3. 对网页之间的插入超级链接的评价。

评价的尺度：

插入文字——要求学生插入文字并对它的属性进行设置（如字体、颜色、字号等），

对齐方式要有应用，方法要熟练。文字的多少不作要求，只要有

就行；

插入图片——要求学生能熟练插入图片并能调节图片的大小与对齐方式即可，对

插入的图片的内容不作要求；

插入表格与定位——能熟练插入表格，能对表格的属性进行简单的设置，熟练的

修改表格（如合并、拆分），熟练的在表格内插入文字、图片并进

行定位；

网站内的超级链接——要求学生能熟练地在网页之间插入超级链接并为双向的。

即从主页链接到某子页并从此子页返回到主页。

评价方法：课堂评价与课后评价相结合的方法。

课堂评价：根据对教师布置的任务完成的情况，选取若干名学生上来自我演示并

讲解，由大家参与共同评比，老师辅助给出评定的等级。

课后评价：在服务器上建立每一个学生自己的文件夹，每次完成任务的情况——

“作品”都存放在里面，老师课后给没有评比的学生进行评价，对能完成任务的学生给予“B”等级；在“B”等级的基础上再对页面布局好并有扩展知识点的给予“A”或“AA”等级；对缺一或更多个小任务没有完成的给予“C”等级，在下一节课或其它时间内给予单独辅导。在评价过的“作品”上插入特制的等级图片——“AA”级、“A”级、“B”级、“C”级，并在数据库里记载这些等级。学生在上课前都能浏览到自己“作品”上的特殊标记。

五、教学反思和回顾：

本次教学采用的教学理念和教学方式是在建构主义的教学理论指导下，采用“任务驱动教学法”，让学生这种“带着任务自主学习”的探究模式下实现知识的意义建构。

学生在这种学习过程中处于积极主动的主体地位，从而可以充分发挥学生的学习主动性和创造性，使学生自主地获取知识。在探索式学习中，重要的不只是仅对任务完成的学习，而是学习者对知识的探索过程，是学习者在探索知识过程中的思维飞跃，是个性化发展的极好过程。同时，自主学习可以使每一位学生

根据自己的知识基础与学习方法自定步调进行个别化学习，克服了传统课堂教学中压制个性化发展而采用“一刀切”的人为现象。

在这种学习过程中，学生自学能力、创新能力都得到发展，学生的知识综合应用能力也得到加强。

在教学过程中，教学的评价过程是非常重要的一个环节，同时也是最能调动学生积极性的一个环节。从心理学角度可以看出：每个人都有非常强烈的荣誉感和成功感，需要大家的承认和自我个性化的展示，尤其是对“差生”更是如此，需要大家给予更多的鼓励和肯定，需要更多的展示自我的机会。这是我们教师非常值得注意的一点。

经验之谈：学生综合能力的培养是知识迁移、自习和创新等能力培养的综合。而这些能力的培养需要很长的时间过程，不是几节课就可以实现的，千万急不得。对学生的学习评价不能只看一节或几节课的学习，而要看一个阶段的学习并多给予“差生”的鼓励和肯定。

注意的问题和应对的建议：

这节课的教学设计没有按照教材的章节顺序和大纲的课时安排，为什么要这样设计呢？是因为前阶段的铺路工作做得好。如果没有前阶段的铺路工作，就不可能这样去设计这节课。下面谈几个注意的问题，由于学生长期在传统应试的课堂里受教育，学生的学习方法形成定式：1.大多数学生缺少主动探索知识的意识，老师指到哪学到哪，不敢越雷池一步；2.大多数学生缺少独立钻研的习惯，遇到不会的问题马上问老师、问同学，不通过自己的思考、实践来解决问题；三、大多数学生的自学意识很弱，还是习惯老师传统的讲授，从老师那里获取定论式的知识。为了能使学生适应新的教学模式下的探索式的学习，我把大纲的课时安排作了调整，前一阶段用较多的时间去转变学生的学习观念，培养学生主动学习、积极探索、勇于创新的意识。学习的知识量少于大纲要求，后一阶段，学生学习观念被转变，学习的效率大大地提高，课堂的学习容量增加，完成整个教材的学习任务是没问题的。主要的做法是：从第二章的玩“纸牌”开始，让学生去玩“纸牌”，必须去玩。不会怎么办？教师指导学生在“纸牌”的“帮助”里去找答案，学生很有兴趣，但都不习惯在“帮助”里去找答案，大约用了两课时，学生基本上会用“帮助”了，“纸牌”也玩得很好。布置下两节课的任务是继续玩游戏，不过要作为测试并记录成绩，学生兴趣高涨。游戏是Win98自带的三种游戏（《红心大战》、《空当接龙》、《扫雷》），测试的规则是不准问老师或同学并不准带有关资料，只允许利用相应游戏里的。谁把三种游戏的规则都掌握并能较熟练去玩，就能通过测试，若有多余的时间还可以去玩老师给的附加游戏（《拖拉机》），但必须自己去在“帮助”里找玩牌规则。经后两节课的训练，学生都通过测试，大

多数都玩到了附加的游戏。学生的最深感受是要充分利用“帮助”找规则学技巧，就能完成任务。在下节课的“画图”学习中仍采用“任务驱动学习法”，学生很自觉去查看“帮助”，自主学习、积极探索。从此，每节课逐渐增加对学生学习的评价，有较多时间让学生进行自我展示。逐渐改变学生的学习观念。

从第四章《制作调查报告》开始，除培养学生的自学能力和积极探索学习外，还培养学生协作意识，将学生分成5个人一小组，把任务分给小组去完成，成绩记在小组头上。只有在小组完成任务的情况下，此组的成员才有资格成为“先进个人”。经过这一章的学习，学生基本上习惯于协作共进，积极创新。再经过

第五章、第六章的训练，学生已经基本具有充分利用相应软件的“帮助”进行自学、积极探索、协作意识强、个性得到发展、勇于创新。

由于学生的学习效率提高，学习方法恰当，所以对后面的章节的教学就可以加快，课堂容量就可以加大。这节课就是在这样的背景下设计出来的。

附：

教 案

学科：《信息技术》

课题：《制作个人网站》

课时：1

年级：高一

教学重点、难点：使用表格定位文字、图片，网站内部的超链接。 教学时间分配：1.心课导入与布置任务（用时6～7分钟）

2.学生自主学习（用时27分钟）

3.教学评价（用时10分钟）

4.教学总结（用时1～2分钟）

教学目标：

1、知识目标：

（1）熟悉FrontPage 2000的软件环境，掌握该环境下的文字处理方法；

（2）掌握插入剪贴画的方法，掌握使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。

2、素质目标：

制作网页要应用到多方面的知识，培养学生的知识迁能力，同时给学生提供了自由发挥的空间，学生可以充分发挥自身的创造力与想象力，培养学生综合运用知识的能力。

教学过程：

1、导入

首先以学校要建校园网站为引言，校园网站下挂有教师个人网站、班级网站、学生个人网站等，激发学生要自己制作个人主页的兴趣，然后给学生布置任务，要求网站必须有同学们亲手制作的网页，才能真正成为的校园网站，提供大量的制作网页的素材（如图片、声音、动画、视频等），同学们可以自由地发表自己的想法和观点，开阔学生的思路，同时激发学生的创造欲望。

2、教学内容

教师利用多媒体教学网（或大屏幕投影仪）简单分析教学课件的要素，将Office中的Word 2000知识迁移到此，将任务进行分解成为若干个小任务，如制作一个网站，必须制作若干个网页，而一个网页可能由文字、图片、超链接等构成，因而就有要完成插入文字、插入图片、插入超级链接等小任务。具体的任务要求是：文字要有不同的字体、颜色、字号、对齐方式；图片要求大小调节合适、位置摆放合适；表格要有合并与拆分，表格内要有文字、图片；主页与子网页之间要有超级链接并为双向的。然后简单演示一个网站内部的超级链接。引导学生轻松愉快、主动去解决问题，完成任务，进而达到自身对知识的意义建构。

接下来就是学生开始自主学习的过程。学生带着制作网页这个任务，并由此而产生对网页中的文字处理与图片等知识的需求，由内在的需要促使学生去主动探索、学习相应的知识，并通过自己主动探索来解决问题。在此过程中，教师巡视查看学生的学习过程，了解学生的学习情况、进度，以指导者的身份对个别学生的问题进行单独交流、指导；如：有的学生问网页之间的超级链接如何去做，有的学生问如何利用表格对文字、图片的定位等。学生之间可以互相交流、互相学习、互帮互助、团结协作；对大多数学生的共性问题，教师给予广播式指导解决。对于理解能力、动手能力以及综合应用能力强的同学指导他们进一步学习扩展内容，发展他们的个性，培养他们的积极创新精神。如对某些学的快的学生给予引导如何用表格套表格的再定位方法准确地定位文字、图片。

3、教学评估

在规定的时间内学生基本完成了学习任务，下面是给学生一个展示自我的机会，从学生制作的网页中挑选出有代表性的作品，由学生自己介绍、演示，这样可以锻炼学生的表达能力，然后让学生互相讨论，发表意见、看法，实现相互

交流、学习的目的。教师在此过程中以实现预定的教学目标为目的，适当地引导讨论方向。这一个过程是非常重要的过程，是一个再学习再提高的过程。对于知识掌握较好的学生正是表现自我的时候，是最有成就感的时候，对于少数知识掌握不太好的学生，真是一个再学习的过程，完成对知识的意义建构。

4、课堂总结

教师总结本节课的教学内容：掌握文字处理方法、插入剪贴画、使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。对学生的制作成果表扬鼓励，并提出新的问题，留下悬念，激发学生继续学习的兴趣。如要使自己的网页更美观、内容更充实，具有“商业网站”的味道，我们就必须要对网页进行美化进行装饰，如何去才能实现呢？这是我们下一节要完成的任务。

5、课后小记

绝大多数学生能积极主动地去探索知识，并在有限的时间里完成任务，达到“B”等级或以上；只有两位学生欠缺点，有一项削任务没完成。