网易公开课网页设计制作

网易公开课网页设计制作

一、实践目的

1.提高掌握设计过程的熟练程度,把握网页设计的方法和思路,更好地将技术与艺术相结合

2.将所学的基础理论、专业知识和基本技能综合运用于实践,提高实际能力和整体素质

3.深化课程内容的掌握,将分散的知识点综合性的运用于一个整体的实例项目，培养综合运用和灵活运用所学知识的能力

4.强化网页设计应用技能的练习在所学内容的基础,鼓励创意的个性,培养创新意识

二、实践内容

1、整体规划1讨论网页主题2进行主页设计3布局设计4画面设计5综合优化6网页测试

2、准备工作1确定网页主题2收集资料

3、开始制作

三、实践过程在实践过程中，我们分解了目标图所需要的语法结构，并按照不同的部分实现了其功能，最后通过调整和优化，不断接近目标图

四、实践体会技术呈现指数型地蓬勃发展给我们人类世界带来了无数的革命性进步，不可不提的是我们处在即将到来的第三次网络信息革命的浪潮之中，06年以来智能手机的第一次被苹果公司像一件时尚单品一样推向大众的面前，10多年过去了,到如今的2019,加之中国5G技术的崛起，，电子设备无处不在，其内容无所不包无所不有，信息网络不再只是人们生活中不可或缺的一部分，智能手机、平板、手提电脑一一它们已经是新型人类必不可少的一个“器官”，我们每天和自己信息采集器一块学习生活，而尤其对于我们信息专业的学生来说，不好好了解一下最了解自己的信息采集且就太说不过去了在实践周的学习中，我们从网页设计的角度出发，从极大丰富了我们生活的网页的后台入手一一就是想贴近这些原来对我们而言既熟悉又陌生的“朋友”老师在课上提到网页对于我们来说是什么,他上学的年代，它只是单一的文字和图片的承载者，但对我们而言网页是我们探索整个世界、与人交流、发现信息、传递信息、表达自己以及与人社交等的必备窗口从Webl.0技术所只能实现的单向的信息传递到Web

2.0技术带给我们的文件之间的共享再到如今的Web

3.0——它宣扬“交互”，不单纯是两台设备间的沟通交流而是使得全球数以亿计的上网设备的互相连接成为可能入今我们在谈Web技术时我们在谈什么，我们在设想一个不仅提供给极客技术人员的平台，而是在设想一个所用用户都能深度参与到他们日常生活中的网络体验之中，这不仅从网络的角度上丰富了它的信息维度，也同时直接或间接丰富促进了我们人类社会的发展历程好在Web前端开发的应用入门真的不难，与别的服务器端语言，它容易上手，即使在最开始学习的时候可能会被一大堆术语吓倒，但随着学习的深入，加之对应用软件的兴趣被逐渐培养，我们的学习曲线只会呈现不断向上的趋势过去，他们使用Photoshop和Dreamweaver来制作网页，但随着需要的开发难度更大以及开发方式更多样，现在的网页制作不再是专注前端而是接近类似于网站后台开发，故不再称之为网页制作，而成了Web前端开发这一工种产品开发环节也使得Web前端的开发技术得到越来越多的重视，需要专业的前端工程师做好工作这方面的专业人士很受欢迎Web前端开发在这个层面上显得极其特殊，因其需要的知识面非常广博，还要求精准的技术，和简洁的理念一般来说,它就是做好把网站的界面完美地呈现给用户这一工作如果我们同学希望要做一位到位地前端开发工程师，掌握前端的各种技术肯定是不够的，其它技术的掌握不仅是必要的而且越多越好，比如说掌握一点后台的技术，或者了解一些网站构架都是可行的，如果还要更进一步，可以学习SE0网站优化技术，学到这些并运用好才可以称自己为一名“优秀的web前端开发工程师”当然也不能局限于技术领域，我们要在更多方面沉淀自己我相信大型企业都希望把资深的优秀web前端开发工程师抢到自己公司里去我听说业内人士说过，现在的这个工种非常吃香，薪酬高待遇好而且奇怪的是它的需求是源源不断地所以再次总结一下如何才能做得更好呢？首先，掌握基本的Web前端开发技术是必须的,比如说:CSS、SEO、HTTL、Ajax、JavaScript HbuilderSPSS等，掌握这些技术的同时，因为要运用到不同地浏览器上去所以还要看它们的兼容能力、渲染是否成功以及Bug的存在其次，想要组成一名及格的前端工程师的知识架构，必须掌握网站性能优化、SE0和服务器端的基础知识再其次，还得进行辅助开发，这又需要一些辅助工具的运用最后，理论层面的知识要有机的结合技术层面的知识，比如代码可否维护、组件是否易用、分层语义模板的高低和浏览器分级支持是否允许等虽然前端开发涉及的知识面的范围很广泛，但一切要从小事做起一一在实践周的的页面设计课程中，我们首先了解了网页设计的基础知识和信息架构，然后学习到了HBuilder的应用在学习之外，我查阅了关于网页制作的书籍和相关的知识信息，多学习到了一些关于建设网站和制作网页的理论知识网页设计属于视觉语言的范畴，它有着所有视觉语言都具备的的特征，其不同点在于网页设计最讲究的是它的编排和布局，加上网页设计的基本特点也就是交互性，单是观看网页上的文字图形的空间组合，也许就能给人带来丰富的心里感受之美而我学到关于网页的视觉引导尤其有趣，其内容主要是关于常常一些小的变换却会由于人的心理因素等原因带来不同的影响一一

（1）大小不同，事物的大小和被观察的程度成正相关；

（2）形状不同，与众不同和被观察的程度成正相关；

（3）颜色不同，从生物角度而言，大脑里的锥状细胞负责感知光强光弱以及色变，而杆状细胞能分别色的明暗程度；

（4）空间不同，立体的东西会让人更加过目不忘；

（5）疏密不同，大脑会用批量处理的方法来过滤看到的事物，所以信息密度越大会引起更多的关注，两个事物离得距离远，那么大脑会自动判断这些没有联系，也就是说更多的关注其实会节约大脑资源所以，Web前端工作者排版页面布局时，不仅板块与板块之间的距离，元素与元素之间的排列也要合适，这样才能对良好的阅读效果和有效的对用户的引导做出保障；

（6）标题不同，包装过才更容易让人注意到；

（7）图片不同，吸引眼球的图片结合“劲爆”的标题搭配效果更佳；

（8）图形元素不同，有暗示性的图形比如说上文提到的三维标识更容易获得瞩目；

（9）动静不同，动态有时很占优势，比如说瀑布流技术效果表示很赏心悦目，但其逻辑性较弱，所以有时候也要注意静态技术的配合使用o

（10）技术不同，Flash技术逻辑性很强，可惜下很难兼容所有的搜索引擎，要选用兼容性强的技术比如JQuery Ajax页面框架技术，它们不仅功能性强，而且贴近普通大众，容易上手操作，是更加适合网页前端设计的应用同时其实要看到各种技术应用上的限制，比如说经常发生应用之间的插件版本在不同浏览器上的各种不兼容，这是非常常见的，虽然在不同插件运用间的切换会降低浏览器的效率，但最终还是为了给用户呈现出最好的效果，是在所难免的通过前述这些知识的学习，我对网页前端的设计和后台的程序了解得更为深厚，对于网页设计也有了更浓厚的兴趣在实践的过程中，我们小组选择了网易公开课的页面设计来观察学习，网易公开课的界面风格古朴文雅，与它所提供的课程内容相辅相成一一进入网易公开课后，首先会显示“网易公开课欢迎画面”的推荐页面在页面最上角会显示推荐的课程名称，然后分门别类地显示开课的学校和课时等，它的界面排列整齐，而在手机端用户可以通过左右滑动屏幕来浏览其它课程（我们暂时没有涉及到手机端的程序学习）在观察学习中，我们认识到好的页面设计才能传递其包含的内容一一网易公开课有着哈佛、耶鲁、牛津、剑桥等’全球名校视频公开课丰富的内容资源，而正是其结合稳重的界面设计和人性化的操作，才能使得用户真正实现与名校零距离接触，无成本、无障碍地了解世界前沿的新知、新思有了好的模范对象，我们先试图提炼出像网易公开课版面样式此类优秀页面设计的基本原则

（1）简洁实用是最非常重要的，网络时代尤其到了现在的5G时代,用户追求高效率，用户所要想得到的信息传送给他最迅捷的就是最好的，冗余的东西非去不可，不能为我们所容忍；

（2）使用方便，使用者的要求要摆在第一位，网页符合用户的审美才是我们要慎重考虑的；

（3）整体性强，网站作为一个整体，要对这个整体负责，基于这个整体对其添砖加瓦，由此之外增添的细节才能给我们工作额外加分，否则都只是画蛇添足；

（4）网站形象与众不同，如果只是标准以下流于庸俗的网站，哪个初学者都可以模仿并做出来，一个卓越的顶尖的网站第一步就是其立意要，审美在走在庸俗文化的前面，才能不被流行文化所驾驭引领，才最终不会被用户所抛弃，人人都追求雅俗共赏，但要把握好俗与雅之间的距离，搞清楚它们的主次要矛盾，这样才不会产生冲突，反而会在俗与雅之间产生更加独特的风格；

（5）最重要的是交互性强，让用户有一种强烈的参与感，即我们页面设计师提供的布局等设计不仅仅是冰冷冷技术而能使得用户产生共情，让它们在登上网页的过程中产生一种自己主宰的玩家心态，而不是傻傻地简单地被技术人员所操控，交互在于共情，也才会产生更加强烈地用户联系，进而用用户的不断反馈形成让我们技术人员进步的正循环除此之外我们还总结了，具体到设计一个优秀的页面也要注意这些细节

（1）构思，我们平时要多学习多浏览好的作品，来培养自己潜意识，所谓灵感其实都是日常的积累中生发出的一种特殊根据自己经验的特殊排列组合，至于要特别关注的构思，可以是好的页面的版式或者色调或者任何让人眼前一亮值得记录下来的细节，而运用自己记录下来的灵感再对比具体的需要进行取舍就能极大的提高我们构思的效率；

（2）草图，设计师能文能武，不仅会码字的技术也要像一个艺术家一样，比如说当灵感呈现为一副具体的图案的时候，一手好的手绘能力会极大地帮助我们实现自己灵感地初步加工，手绘或者再在电脑上绘图，可以用Photoshop进行详细地反复更改；

（3）色调，根据颜色心理学，人不同同时关注三个以上的颜色同时使用，尤其是多种颜色地色彩之间地强烈冲突还有可能给人额带来眩晕恶心地感受，所以首先不要选择过多的颜色运用，如果需要强调的部分必须运用的多种颜色加以分别，可以从同种色系中找到不强烈冲突的相近色，尽量让用户再观看时舒服自然；

（4）主题字设计，字体的设计往往是大家都忽略的东西，所以也是一个可以区别于其他网站的亮点之一，我们常看都英文字体有多种优美的变形，比如说乔布斯当年就靠着自己对苹果字体的坚持区分开了Mac与Microsoft的竞争，咱们中文字体五千年文化历经多种文字优美的变形,所以这方面的选择比起英文字体的选择其实更为丰厚，所以选择我们网站独特的字体绝对是用户最为关注的点之所在

（5）素材运用，素材不同于上文提到的灵感，灵感是对整体的抽象把握，而素材是我们可以扎扎实实记录下来，抄在自己小本子上面，对它们进行生动详细地模仿运用怎么也不过分地材料，我素材地记录一定要分门别类，以后在运用的时候才能尽快找出来，而选择素材地标准每个人都不同，相同点都要以审美为出发点，其次一些细节可以是像素高，精度好,有创意或简洁实践的过程的细节就不再赘述了，在此我想提出的是，在实践中最重要的一步是最后的修改一一页面完成后我们可以选择找3个对象来验收

（1）对象一:自己设计完基础的页面后首先要自我审视，查看到显而易见的错误，自己也会不舒服自己永远是一切的出发点，虽然有些时候难免过于主观，但对于程序原来说，她的大量时间都在与自己独处，并只能不断地拷问自己这样到底行不行，这样能修炼出自己对事物的敏感度

（2）对象二产品经理（这是针对步入职场后的专业领域的负责对象，在我们小组内属于相互审视）产品经理看的更多的是从产品的实用性、用户的可接受度出发，是一个整体方面，而非细节，但有时产品经理也会提出一些难以实现的内容，到那种境况需要的是积极的沟通而不是消极的抵抗，多一个人的意见有时会让人豁然开朗，并找到更多的可能性；

（3）对象三普通网民我们没有像调查问卷式的方法调查身边的人对自己制作页面的接受程度，但基于这个原理，我们小组成员找到身边的朋友或家人，根据他们的直观感受来评判这个网页好不好用最后我想说的是，我们常常会在不断重复的练习中感到疲惫和烦躁，但我们一定要坚持下来就像是当我觉得页面已经完成时，一定可以再深入因为有些问题不是一目可及，一遍两遍三遍，无数遍地修改才会有最终版本地出现大学生活成长，要学会理论联系实际，不断实践才能让我们把基础知识掌握得更牢靠,也才会不断地推陈出新，使自己的知识水平、思想境界、工作能力等方面都迈上了一个新的台阶实践周的学习是一次难忘的经历，是一种独特人生的体验在实践周的学习以及自己的练习过程中，我才发觉世界之大无奇不有这句话不是一句空话，所谓学的越多觉得自己浅薄，在短短接触页面设计这些知识的过程中，我走入了平时我们常用的页面的后台，发掘到了平常人接触不到的网络信息背后的一面，让我看到了知识的多样性和世界的可能性，真的就像是打开了另一扇大门，希望以后能更加尽力地遨游在知识地海洋中，探索更多的可能与不可能，像这般努力，让未来为今天的自己喝彩。