HTML5+JavaScript节课总结.docx

HTML5+JavaScript节课总结.docx

《HTML5+JavaScript节课总结.docx》由会员分享，可在线阅读，更多相关《HTML5+JavaScript节课总结.docx（5页珍藏版）》请在冰豆网上搜索。

HTML5+JavaScript节课总结

河南理工大学

HTML5+JavaScript

网页设计与网页特效制作

作品设计说明文档

2014—2015学年第2学期

课程名称HTML5+JavaScript网页设计与网页特效制作

作品题目河南理工大学宣传网页

学生姓名

学号

专业班级电信1303班

联系电话

指导教师赵英刚

2015年7月5日

1.作品整体构思及网站（网页）的主体构想1

2.作品总体设计方案及制作思路1

3.主要技术及知识点的运用，难点问题的解决3

4.作品制作完成后的总结与感受4

5.谈谈你对HTML5、CSS3、JavaScript等web前端知识的认识5

6.学完本门课程后你对任课教师的意见和建议6

7.学生诚信承诺书7

8.教师成绩评定8

1.作品整体构思及网站（网页）的主体构想

我的网站的构思是建一个基于HTML5，JavaScript和CSS3的网页开发应用技术的宣传网页，网站的主题思想是宣传河南理工大学。

网站包括主页，学校介绍，图片欣赏，学院设置，以及联系我们。

网站最大的特点是借助了CSS3的网页页面布局的应用技术是的网页的界面更具有可读性，从而使得网页的宣传力度更大，能够达到网页最终的目的。

2.作品总体设计方案及制作思路

该网站属于企业机构宣传网站，网站包含外部网站的链接，例如通过网站左上角的connect可连接到河南理工大学的首页，包括部分的图片包含的学校官方网站的其他链接。

在做网页之前，我确定了做网页的五个步骤：

一、确定网站主题：

网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。

在这里我的网站主题就是宣传或者传销类网站。

二、搜集材料：

明确了网站的主题以后，你就要围绕主题开始搜集材料了。

材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

在这里我搜集了好多关于河南理工大学的图片，信息，并且去官网进行了详细的了解。

三、规划网站：

一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计一座大楼一样，图纸设计好了，才能建成一座漂亮的楼房。

网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。

也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

在规划方面我将网站的结构做成一页包含所有的内容，栏目的设置和大多数常见的网站并没有什么差别，但总体网站的风格还是比较新颖的，比如，网站的排版是经过精心的设计，而且采用了CSS3网页排版技术来达到完美的效果，通过点击网站的顶端的栏目，可以马上翻到该栏目的详细介绍中。

我认为这是该网页最吸引人的特效。

四、选择合适的制作工具：

尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。

在该网页设计中由于采用了CSS3的网页开发技术，所以没有选择老师上课中使用的软件。

我使用的是当今的开发网页的主流软件—AdobeDreamweaverCS6。

DreamweaverCS6是世界顶级软件厂商adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。

由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页（通常是标准通用标记语言下的一个应用HTML），对于初级人员，你可以无需编写任何代码就能快速创建web页面。

其成熟的代码编辑工具更适用于web开发高级人员的创作！

cs6新版本使用了自适应网格版面创建页面，在发布前使用多屏幕预览审阅设计,可大大提高工作效率。

改善的ftp性能，更高效地传输大型文件。

“实时视图”和“多屏幕预览”面板可呈现html5代码，更能够检查自己的工作。

五、制作网页：

材料有了，工具也选好了，下面就需要按照规划，一步一步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。

所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。

所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。

在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

网站包括主页，学校介绍，图片欣赏，学院设置，以及联系我们。

制作思路，参照一些网页的排版，以及相应的代码拼组在一块，并且注入自己的编程设计，理解。

组成你所看到的宣传网页。

3.主要技术及知识点的运用，难点问题的解决

这里我讲述下网页制作过程中运用的主要技术及知识点，难点问题的解决。

1.网页的整体布局设计

网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。

版式设计通过文字图形的空间组合，表达出和谐与美。

一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。

尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如宣传，以我所编辑的网页为例讲述下，它所提供学校的主页，学校的介绍，学校的图片欣赏，学院的设置以及联系我们等介绍信息。

应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对事物（学校）的了解，促成他的认可，加入。

2.网页设计中色彩的运用

色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。

根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。

色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。

所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。

另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。

在色彩的运用过程中，还应注意的一个问题是：

由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。

如：

儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。

在设计中要考虑众多因素。

在我的网页设计中了绿色为主，衬托出绿色生机勃勃的校园。

3.网页形式与内容相统一

要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。

运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内

4.作品制作完成后的总结与感受

总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。

也希望老师在今后的日子里多指导。

网页设计还有更多的技巧，有待于我们去挖掘和研究。

由于平时课程比较繁忙，学习时间比较少，对于网页设计软件的强大功能运用得还不够。

不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。

5.谈谈你对HTML5、CSS3、JavaScript等web前端知识的认识

HTML5:

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改,网页前端的标准书写；越来越多的行业巨头正不断向HTML5示好。

除苹果、微软、黑莓之外，谷歌的Youtube已部分使用HTML5；Chrome浏览器宣布全面支持HTML5；Facebook则不遗余力地为HTML5进行着病毒式传播。

一切正如正益无线总裁王国春所说：

“HTML5代表了移动互联网发展的趋势，总有一天它将成为主流技术。

CSS即层叠样式表（CascadingStyleSheet）。

在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。

以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。

这些模块包括：

盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

6.学完本门课程后你对任课教师的意见和建议（不少于300字）

我之前也休了一门类似课程，就是android开发与应用，再者就是我是电子信息工程的学生，硬件编程以及搭建是我们主要的课程之一，我学过51单片机，并且做了大量的51单片机的外置扩展。

我很清楚我最大的感受就是理论不用于实践终究是理论，止于理论的学习，将来是没多少成绩的，即使有前途发展的话也必将是少了更为之锦上添花的一笔。

当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本的，但没有根基怎么能建好别墅呢?

所以说基础知识是很重要的，我们在学习过程中不能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。

过这次设计，我发现一个很普遍的问题：

我们往往是眼高手低，学习这些知识时觉得它就是小菜一桩，但现在真的验证了“看花容易绣花难”这句话，当我们着手实践时就不像我们想象中的那么简单了，每一个细节都需要注意，稍有不慎页面就在预览中变了样，因此更需要我们细心和耐心地去完成，也就两个字概括——认真，只有认真对待才会从骨子里学到东西，才学到心里去了。

最后，我想对赵老师说，感谢你诲人不倦的教导让我又学到了一门新的知识，网页开发设计是一门非常有意思的课程，我会继续学下去，我会经常看一些好的视频教程进行自学，就像此次设计中我用到的CSS3网页技术应用就是自己从网络视频中学到的。

尽管网页开发技术应用和我们专业没多大的挂钩，但兴趣才是最好的老师，所以我会继续下去的，就像之前修的安卓设计与开发一样。

最后我想对您说的是您是一位很令人喜爱的一位老师，看得出大家都很喜欢你。

我对您的建议是希望老师可以不辞辛苦的将自己的课程录制几集视频，每上完一节课将该视频课程发给同学们，让同学下去可以自学。

因为对于这样的课程想在短短的四周学习完，对于同学们是很难的，课上老师也讲的比较快，这样的话同学很快会失去对这门课程的兴趣。

而有了每节课的视频就不一样了。

这是我在实验室时，我们的老师的方法，效果很不错。

7.学生诚信承诺书

任课老师在课堂上已经明确告知，本门课程的期末考核作品不允许大篇幅抄袭他人作品，一经发现可能面临本门课程考核成绩不及格的风险。

本人承诺，本作品的主体部分是本人在消化吸收课堂内容基础上独立制作完成的，不包含大篇幅原样抄袭他人作品的成分，否则愿意承担由此引起的一切后果。

学生本人签名：

2015年7月5日

8.教师成绩评定（任课教师填写）

教师评语：

评阅教师签名：

年月日