过渡的艺术!20个精巧微妙的渐变色网页设计[五篇材料]

第一篇：过渡的艺术!20个精巧微妙的渐变色网页设计

过渡的艺术！20个精巧微妙的渐变色网页设计

作者: 一网学 最后更新时间：2015-07-23 14:05:40

在扁平化刚刚兴起的时候，纯色的运用似乎将纹理和渐变都打入了设计的冷宫。然而在随后的发展中，这种“纯粹的扁平”似乎并不理想，纹理、阴影、渐变正在一点一滴地回归并坚定地占据着属于他们自己的位置。

在这些曾经被打上“拟物”标签的设计手法中，渐变是上一个时代中运用的最广泛也最有代表性的一种。那么在设计风格愈发现代，简约大行其道的今天它是否还有市场呢？下面的20个微妙而有趣的案例会告诉你它回归的理由。VO2 Group

VO2是一个典型的例子，简约的风格很典型，充满力度的鲜艳字体，灰色的背景和动态的人物动作，装饰性的三角形元素采用的渐变的色彩，令整个设计层次梯度都展现出来了。Melanie F – Look Book

使用不完全对称的非衬线体来作为标题是目前时尚类网站中越来越流行的手法。而字体下方的彩色背景使用了绿色到蓝紫色的渐变，不仅消解了单调感，而且让文字标题更加容易被注意到。Adoratorio

这家设计机构对渐变的运用截然不同，他们将渐变色用作文字而与纯白的背景形成对比，炫酷而创新。Qards

Designmodo 所推的设计工具Qards在其子页面的着陆页上也同样采用了渐变色的设计。不同的板块使用不同的渐变色作为背景，而图中所示的渐变橙色中，还在底色中加入了一些图形元素，整体显得更加饱满。Symodd

Symodd的介绍页也同样使用了由橙过度到粉色的渐变色背景，由于色调控制得非常微妙，确保了可读性的同时还非常令眼睛讨喜。Inc

Inc 在渐变色的使用上和其他的几个案例稍有不同，蓝紫渐变色叠加到背景图片上，营造出融入感十足的设计，色彩变化幅度微妙，与图片的融合毫无违和感。Pho

蓝紫色渐变似乎非常为设计师所青睐，这个网站采用了相似的设计。低饱和度的色彩和鲜艳的文字构成明显的对比，视觉效果挺不错的。Impossible Bureau

Impossible Bureau 使用了极为鲜艳的色彩来构建这个过渡色彩的对比。而这个页面最酷的地方在于，页面其他的元素都加载完成之后，过渡色彩就逐渐变的不那么晃眼了。Customeed

Customeed 的整体设计给人感觉非常舒服，页面的背景渐变色使用的绿色，这样的渐变色使用并不多见，相比之下，更多的网站设计师会选择蓝色、紫色和红色。Webflow

相比于其他的网站，Webflow并未将渐变用作主要的设计，黑色背景使用了lowpoly效果，视觉上并不单调，作为注册/登录的表单背景，由紫到蓝的渐变背景条和整个大背景形成了对比，效果不错。Product to Profit

这个页面的着陆页使用了微妙的渐变色，采用的也是色彩和背景图叠加的手法。这在做法最大的特色是让整个页面氛围更令人舒适。Table Hero

如果你不仔细看，可能会觉得这个页面的背景是纯色的，实际上只是它的色彩变化梯度并不太明显而已。有意思的是，这在设计配合着1px宽的细线构成的字体和图标，使得背景更有质感。GoGoRo

这个页面使用了典型的极简设计，白色的背景上一辆摩托车的侧面特写配合一个硕大的“GO”，文字很简单且单薄，但是设计师将渐变色彩叠加到文字之后，使得整个页面鲜亮起来了。Segment

深灰色的背景被用作上半部分的背景，显得特别沉稳，而下半段如同霓虹一般的绿色让整个设计亮了起来。Mapbox

简约的设计，直观的布局，微妙的渐变蓝色，清爽而令人舒适，你还想要什么呢？

Gradients, motherfucker.这其实是一个非常搞笑的文章，如果你英文够好的话。当你滚动页面的时候，它的渐变背景会逐渐改变，看起来非常炫酷。Pitney Bowes

这个网站的设计其实也挺大胆的。渐变的背景加上了水波纹纹理，和白色的文字形成对比。Stripe

Stripe 最近的一次更新将网站的设计更换成目前的样子，由深蓝渐变成绿色，整个色调显得深沉而富有质感，和前景的文字、手机图片形成了良好的搭配。One John St

这是一个位于布鲁克林的公寓的网站的着陆页，这个网站的有趣的地方在于它的色彩会随着每天的时间而变化。Wake

毫无疑问，使用流行的蓝紫渐变色是一个流行而确定可靠的设计方案。结论

渐变色同样可以构建出有趣而令人兴奋的设计。虽然有的例子会有一些反差，可以大胆直观，也可以柔和而细腻，它们和这个时代的设计可以融入得非常好，重要的是这个度的控制。

点击：2关键字： 渐变色彩应用 渐变网页设计扁平化设计

第二篇：第十二课 建立个网页 教学设计

第十二课

建立个人网页

教学设计

教材简析

《建立个人网页》是第四单元的基础，是提高学生信息素养的一课，本课主要指导学生启动与退出FrontPage 2000、在网页中输入美化文字、插入图片等知识，操作技能比较强。从教材内容上来看，跟以前学习Word内容相似。为了防止学生在制作网页时出现盲目性、随意性，这节课的教学主要采用“任务驱动教学法”与“协作学习”相结合，充分将信息技术知识的学习与其他课程进行整合，这样既提高了学生学习信息技术知识的兴趣，同时又培养了学生制作网页的能力。为下节课的教学打下良好基础。

教学目标 1．知识目标

学会启动与退出FrontPage 2000； 学会在网页中输入和美化文字； 学会在网页中插入图片； 掌握打开、保存网页的方法。2．能力目标

让学生学会认识FrontPage 2000软件、建立简单网页，掌握网页文字的输入、编辑、保存等方法，通过学生的操作和协作探讨，培养学生的自主学习、协作学习的能力；通过知识的再现培养学生的创新能力和创新意识。3．情感目标

通过作品展示和评价，让学生体验成功的喜悦，激发学生的创造热情；通过小组的协作，培养学生的合作精神和集体主义精神。

教学重点

学会在网页中输入和美化文字； 学会在网页中插入图片。

教学难点

学会在网页中输入和美化文字； 学会在网页中插入图片。

学情分析

本课面向六年级学生，由于因特网的普及，学生已具备网页概念，已初步掌握了网络通信的基础知识，因特网的信息服务，网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。再加上由于FrontPage 2000跟Word的操作界面大致相同，学生容易产生轻视心理，自行操作，动手操作愿望强烈。在本课教学过程中，尽量尊重学生的兴趣和操作欲望。积极引导学生，解决本课重点难点。培养学生获取信息、处理信息、整合信息应用的能力，培养学生的信息素养和独立分析问题、解决问题的能力，提高学生创新能力、自学能力、理论联系实践能力，增强学生独立意识和团体协作精神。

教学方法

情景导入法、任务驱动法、比较教学法。所用课时

2课时。

教学环境

多媒体机房。4人为一个小组，每个小组选出一名学生出任组长。教师针对学生的能力水平进行适当调整，以达到各个小组的力量均衡。本课教学应至少一人或两人一机，投影机一台或机房配备广播系统，整个机房以宽带的形式接入因特网，网速较快。

教学过程

一、创设教学情景，激发学生学习兴趣

师：我们常常畅游在网络世界里，欣赏图片、下载歌曲，甚至可以及时地与人聊天、视频。网络给我们提供了丰富的资源，成了我们与别人交流的重要手段。我们也可以利用网页展示自我，与更多的朋友交流。制作网页的软件工具有多种，FrontPage 2000就是其中的一种。由于FrontPage 2000与Word 2000的界面非常相似，会用Word的同学学起来会觉得很轻松。今天我们就来学习FrontPage 2000。（板书：初识FrontPage 2000。）

师：首先请同学们启动FrontPage 2000，启动FrontPage 2000后可以直接在编辑区内编辑网页了。

教师演示操作启动FrontPage 2000，向同学们介绍FrontPage 2000界面。

二、讲授新课

（一）建立简单网页 输入文字

师：与编辑Word文档相似，我们可以直接在编辑区输入文字。（板书：输入文字。）教师演示操作在编辑区输入文字。

（二）提供机会，学生实践探究

投影广播任务：请同学们在FrontPage 2000中，输入以下文字： 宝贝小猪的家 个人档案 姓名：××× 昵称：××× 网名：宝贝小猪；

爱好：电脑、上网、科技小制作、足球； 理想：做个电脑工程师，遨游太空； 最喜欢的人：爸爸、妈妈； 最崇拜的科学家：爱迪生； 最喜欢的球星：贝克汉姆； 喜欢的卡通片：《宝贝猪》、《机器猫》、《猫和老鼠》； 最爱吃的零食：果冻；

最喜欢的运动：游泳、骑自行车、踢足球。教师随堂检查并指导学生。

学生练习时，教师提醒学生注意：在输入文字时，当一行的长度超过窗口的显示范围时，FrontPage 2000会自动换行；没有超过窗口显示范围，想要另起一行时，在Word中按“Enter”键就可以了，而在FrontPage 2000中要用“Shift+Enter”键，如果直接按下“Enter”键，则会空一行，重新开始一个段落。教师展示学生作品。修饰文字

师：在网页中输入文字后，我们再来看看如何修饰文字。在FrontPage 2000中对文字的修饰与在Word中基本相同。但要注意，由于网页是在网络上给其他浏览者观看的，如果浏览者的计算机中没有安装相应的字体，网页中的文字可能显示不出来，那样我们漂亮的网页就会显得混乱了。所以，制作网页时最好使用标准字体，少用一些特殊、新奇的字体。下面请同学们修饰文字。

（三）提供机会，学生实践探究

投影广播任务：将文字设置成以下效果。

教师随堂检查并指导学生。学生完成后展示学生作品。图片插入和调整

师：修饰好文字后，我们还可以在网页中插入图片，利用图片会使我们的网页更生动，在FrontPage 2000中插入图片的方法与在Word 2000中插入图片的方法基本相同。但调整图片位置的方法略有不同。请同学们跟老师一起操作。（板书：图片插入和调整。）教师演示操作：

步骤1：插入图片后，选定要调整的图片，右键单击“图片属性”。步骤2：在打开的“图片属性”对话框中选择“外观”。步骤3：选择合适的参数，直到将图片调整到合适的位置。步骤4：点击文件中的“保存文件”，将网页命名为“宝贝小猪的家.htm”。网页文件的扩展名是“.htm”，我们可以使用网页浏览器打开网页文件。

（四）提供机会，学生实践探究

投影广播任务：请同学们在网页右上角再插入一幅图片，并将图片调整到合适的大小。结束语

师：同学们，在这节课中我们认识了FrontPage 2000，学习在网页中插入和美化文字图片。为我们今后的网页制作打下了坚实的基础。今后，你们肯定会制作出更加漂亮的个人网站。

三、授课完毕，课程总结

本节课主要讲了以下几个知识点： 1．学会启动与退出FrontPage 2000； 2．学会在网页中输入和美化文字； 3．学会在网页中插入图片； 4．掌握打开、保存网页的方法。

四、课堂作业 投影广播任务：

1．到网上寻找其他小朋友的个人主页，看看它们各有些什么特色； 2．选择自己感兴趣的主题，创建一个简单的网页。

教学反思

Frontpage 2000是Office家族中的一员。在开展教学时，应该注重将Word 2000所学制作网页的知识迁移过来，降低学习难度，同时在学习过程中，要注意引导学生比较Frontpage网页设计与Word做网页的区别，从而让学生在知识迁移中有重点有针对性地开展学习。因此，本课的内容主要依靠学习者的自主探究和任务解决，教师在学生探究之后给予总结性知识，使学生有一个整体的把握，同时帮助学生对所学的知识进行查漏补缺。此外，笔者觉得在教学的时候要注意以下几点：（1）课堂教学内容要减少，理论性要降低。（2）要有足够的时间让学生上网查资料、阅读资料，并思考。（3）增加师生互动的机会和时间，加强学生的探究学习，充分利用网络优势，开展网上讨论，可以使许多学生同一时刻在网上发表自己的意见。设计的任务应该要充分尊重学生的个性，并有利于学生个性的发挥。此外，教师应该给学生强调做网站应该先建立站点，要有整体的规划。