基于HTML5、JavaScript和CSS3的网页开发应用技术的网页

**

1.作品整体构思及网站(网页)的主体构想

**
我的网站的构思是建一个基于HTML5、JavaScript和CSS3的网页开发应用技术的网页，网站的主题思想是同舟共济六十载、民族团结一家亲。网站包括主页、成就、广西福利、民族活动、展望未来以及关于。网站最大的特点是借助了CSS3的网页页面布局的应用技术是的网页的界面更具有可读性，从而使得网页具有亲和力。

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

在做网页之前，我确定了做网页的五个步骤：
一、确定网站主题：网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。在这里我的网站主题就是同舟共济六十载、民族团结一家亲。
二、搜集材料：明确了网站的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。在这里我搜集了好多关于广西成立60周年的图片，信息，并且去官网进行了详细的了解。
三、规划网站：一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计一座大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。在规划方面我将网站的结构做成一页包含所有的内容，栏目的设置和大多数常见的网站并没有什么差别，但总体网站的风格还是比较新颖的，比如，网站的排版是过精心的设计，而且采用了CSS3网页排版技术来达到完美的效果，通过点击网站的顶端或底端的栏目，可以马上翻到该栏目的详细介绍中。我认为这是该网页最吸引人的特效。
四、选择合适的制作工具：尽管选择什么样的工具并不会影响你设计网页的但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页设计中由于采用了CSS3的网页开发技术。我使用的是当今的开发网页的主流软件WebStorm。WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。由于它支持智能的代码补全，支持不同浏览器的提示，还包括所有用户自定义的函数(项目中)，代码补全包含了所有流行的库，比如：JQuery、 YUI、 Dojo、 Prototype、 Mootools and Bindows。代码格式化，代码不仅可以格式化，而且所有规则都可以自己来定义。html提示，大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。而且html里面还能有js提示。联想查询，只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义；可以全项目查找函数或者变量，还可以查找使用并高亮。代码导航和用法查询，代码重构，这个操作有些像Resharper，熟悉Resharper的用户应该上手很快，支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。代码检查和快速修复，可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。代码调试，支持代码调试，界面和IDEA相似，非常方便。代码结构浏览，可以快速浏览和定位。代码折叠，功能虽小，不过胜在方便高效包裹或者去掉外围代码，自动提示包裹或者去掉外围代码，一键搞定。
五、制作网页：材料有了，工具也选好了，下面就需要按照规划，一步一步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵，活运用模板，这样可以大大提高制作效率。
网站包括主页、成就、广西福利、民族活动、展望未来以及关于。制作思路，参照一些网页的排版，以及相应的代码拼组在一块，并且注入自己的编程设计，理解，组成所看到的网页。

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

这里我讲述下网页制作过程中运用的主要技术及知识点，难点问题的解决。
3.1 网页的整体布局设计
网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现主题时，更要注意为了达到最佳的视觉表现效果，亡讲究整体布局的合理性，比如广西成立60周年，以我所编辑的网页为例讲述下，它所提供广西的主页，广西的成就，广西的福利，广西的民族活动，展望我们的未来以及关于等介绍信息。应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对事物的了解，促成他的认可、加入。
3.2 网页设计中色彩的运用
色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质，如红色象征血、太阳、中国以及民族；蓝色象征大海、天空和水面等。所以如果我们在对民族活动设计时，应使用红火而活泼的颜色，使人心理上感觉亲近和平，增强人们的爱广西心理，使得在视觉上达到很好的效果。另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调。在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。在设计中要考虑众多因素。在我的网页设计中了红色为主，衬托出红色代表着发展壮大。
3.3 网页形式与内容相统一
要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均 衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内

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

总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。也希望老师在今后的日子里多指导。网页设计还有更多的技巧，有待于我们去挖掘和研究。由于平时课程比较繁忙，学习时间比较少，对于网页设计软件的强大功能运用得还不够。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。

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

HTML5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改，网页前端的标准书写；越来越多的行业巨头正不断向HTML5示好。除苹果、微软、黑莓之外，谷歌的Youtube已部分使用HTML5；Chrome浏览器宣布全面支持HTML5；Facebook则不遗余力地为HTML5进行着病毒式传播。一切正如正益无线总裁王国春所说：“HTML5代表了移动互联网发展的趋势，总有一天它将成为主流技术。”
CSS即层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一-些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一-些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
JavaScript一种直译式脚本语言，是一-种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML5网页增加动态功能。

如图展示

来源：翠玲的菜园子