论文部分内容阅读
【摘 要】网页前端技术主要有HTML、CSS、JavaScript，是一个集美工布局、后台程序等诸多技术为一体的技术。网页前端的开发语言各有特色，对代码质量的要求也不同，它们之间有着相辅相成互相互补调和的关系。本文从这三种技术展开讨论，论述了网页制作的方法及其优化方式。
【关键词】网页制作；HTML；优化；CSS
0.概述
随着互联网技术的不断发展，越来越多的企业都拥有自己的网站，有的用来展示他们的产品，有的用来宣传他们的业务。由于网站架起了用户之间的桥梁，近年来被各大企业公司所青睐，而且，为了满足市场用人的需求，各大高职院校也纷纷开设网页开发课程，网页开发的人才辈出。
网页前端技术是由网页制作演变而来的，名称上具有明显的时代特征。网页制作是Web 1.0时代的产物，网站以静态内容显示，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web2.0时代，Ajax带来无刷新数据交互，缩减网页跳转的次数。网页前端技术应用会在减少网页的跳转方面做更进一步的努力，在单个页面即能完成更多功能，由前端技术驱动代替数据展现驱动。
1.网页制作的主要技术
1.1 HTML（超文本标记语言）
HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。超文本标记语言（HTML）5结构上更加清晰和明确，取消了一些过时的标记，将内容和展示进行分离，改进相关结构后，生成的网页更干净和易于管理，提升了用户体验，有利于搜索引擎和屏幕阅读器进行抓取。移动设备上HTML5将具有更大的优势，因此更适合如Web操作系统一类的RIA应用的前端开发。
1.2 CSS（层叠样式表）
CSS，中文译作“层叠样式表单”（Cascading Style Sheet）是一系列格式规则，它们控制网页内容的外观。使用 CSS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。
它用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它有以下几个显著优势：表现和内容相分离；提高页面浏览速度；易于维护和改版。
1.3 JavaScript
JavaScript是Netscape公司的产品，开发目的是为了扩展Netscape Navigator的功能，是一种介于Java和HTML之间、能嵌入Web页面中基于对象和事件驱动的解释性的编程语言。
JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应，使网页更好地与用户交互；在利用客户端个人电脑性能资源的同时，适当减小服务器端的压力，并减少用户等待时间。
2.网页制作的优化方法
2.1网页的色彩和布局
制作优秀网页须要三项前台技术，包括网页的色彩搭配、网页素材的制作与积累以及网页的整体布局。一个优秀的网站的配色应具备如下特点：色彩鲜艳靓丽，视觉效果强烈，吸人眼球；色彩要精心地设计，有独特的风格，使浏览者无千篇一律之感；色彩的使用要契合所在网页的内容和氛围，通过构建色彩更好地体现网页主题，强化网页内涵。
2.2减少HTTP请求
这条策略基本上是最重要最有效的。一个完整的HTTP请求要包含DNS寻址、建立和服务器的连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。用户需要看到或 “感受”到资源是必须要等待这个过程结束的，占据一定的时间成本，因为每个请求都必须携带数据，所以每个请求都需要占用带宽资源。而浏览器进行并发请求的请求数是具有一定上限的，当请求数超出上限后，浏览器需要分批进行请求，用户的等待时间进一步增加，用户会有站点速度慢的印象，即使也许用户可视的第一屏资源都已请求结束，但浏览器的进度条会一直存在。减少请求的方法有：合并文件（将多个CSS文件或JavaScript文件合并成一个）；图片地图（在一个图像上划分不同区域映射不同的链接）；内联图像（让图像与文本一起下载和显示）；CSS Sprites（利用 CSS background 相关元素进行背景图绝对定位）等。
2.3使用JSP增强网页的动态效果
JSP基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。而且JSP有多样化和功能强大的开发工具支持。另外，web应用需要强大的服务器端组件来支持，开发人员需要利用其他工具设计实现复杂功能的组件供web页面调用，以增强系统性能。JSP还可以使用成熟的JAVA BEANS组件来实现复杂商务功能，增加网页与用户的完美交互。
2.4禁止拷贝特效
为了避免网页作品出现版权方面的纠纷，在网页制作中增加防网页抄袭技术是非常必要的，这样才能使更多的好作品出现在网络。 我们知道，通常复制内容是在别人网页上把要复制的内容全选，然后点击鼠标右键来复制文章内容，或者直接使用快捷键ctrl+c复制下来。那么我们知道是如何复制的，就完全可以采取方法，屏蔽这种方法复制。在网页源代码中使用一些简单的语句，就能实现禁止选择对象、屏蔽右键使用、屏蔽复制快捷键等功能特效。如，在标签中加入onselectstart=”return false”，该语句的作用是使鼠标不能选择文本，有了这个命令，试图复制文字的人将无法选定内容。再如，onload=”look（）”语句，禁止的是ctrl键的使用等。还有人在文字结尾增加干扰码（与背景颜色相同的字），用以干扰别人复制。实际上大多的设计者为保护自己的版权不被侵犯，通常都采用多种方式组合起来使用，以阻止擅长拷贝的人对其原创文字型网页内容的复制。
3.结束语
网页设计的一个基本特色便是吸引浏览者，一个美观漂亮的页面不管内容多么空洞，也会有人欣赏，反之一个内容充实但页面简陋却往往不会有人去浏览。从博客开始到现在的各种前端技术的开发与应用都离不开Web本身，近来以HTML5为代表的新一代移动Web技术是Web前端技术的重大发展创新，将大幅提升Web应用在交互、系统能力调用、富媒体、语义化等方面的能力，使用户无需安装纷繁的插件而获得更为丰富的Web应用。在不久的将来，Web应用将与原生应用优势互补、并行发展，共同构成移动互联网的应用生态系统。
【参考文献】
[1]曹刘阳.编写高质量代码：Web前端开发修炼之道[M].北京：机械工业出版社，2010.
【关键词】网页制作；HTML；优化；CSS
0.概述
随着互联网技术的不断发展，越来越多的企业都拥有自己的网站，有的用来展示他们的产品，有的用来宣传他们的业务。由于网站架起了用户之间的桥梁，近年来被各大企业公司所青睐，而且，为了满足市场用人的需求，各大高职院校也纷纷开设网页开发课程，网页开发的人才辈出。
网页前端技术是由网页制作演变而来的，名称上具有明显的时代特征。网页制作是Web 1.0时代的产物，网站以静态内容显示，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web2.0时代，Ajax带来无刷新数据交互，缩减网页跳转的次数。网页前端技术应用会在减少网页的跳转方面做更进一步的努力，在单个页面即能完成更多功能，由前端技术驱动代替数据展现驱动。
1.网页制作的主要技术
1.1 HTML（超文本标记语言）
HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。超文本标记语言（HTML）5结构上更加清晰和明确，取消了一些过时的标记，将内容和展示进行分离，改进相关结构后，生成的网页更干净和易于管理，提升了用户体验，有利于搜索引擎和屏幕阅读器进行抓取。移动设备上HTML5将具有更大的优势，因此更适合如Web操作系统一类的RIA应用的前端开发。
1.2 CSS（层叠样式表）
CSS，中文译作“层叠样式表单”（Cascading Style Sheet）是一系列格式规则，它们控制网页内容的外观。使用 CSS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。
它用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它有以下几个显著优势：表现和内容相分离；提高页面浏览速度；易于维护和改版。
1.3 JavaScript
JavaScript是Netscape公司的产品，开发目的是为了扩展Netscape Navigator的功能，是一种介于Java和HTML之间、能嵌入Web页面中基于对象和事件驱动的解释性的编程语言。
JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应，使网页更好地与用户交互；在利用客户端个人电脑性能资源的同时，适当减小服务器端的压力，并减少用户等待时间。
2.网页制作的优化方法
2.1网页的色彩和布局
制作优秀网页须要三项前台技术，包括网页的色彩搭配、网页素材的制作与积累以及网页的整体布局。一个优秀的网站的配色应具备如下特点：色彩鲜艳靓丽，视觉效果强烈，吸人眼球；色彩要精心地设计，有独特的风格，使浏览者无千篇一律之感；色彩的使用要契合所在网页的内容和氛围，通过构建色彩更好地体现网页主题，强化网页内涵。
2.2减少HTTP请求
这条策略基本上是最重要最有效的。一个完整的HTTP请求要包含DNS寻址、建立和服务器的连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。用户需要看到或 “感受”到资源是必须要等待这个过程结束的，占据一定的时间成本，因为每个请求都必须携带数据，所以每个请求都需要占用带宽资源。而浏览器进行并发请求的请求数是具有一定上限的，当请求数超出上限后，浏览器需要分批进行请求，用户的等待时间进一步增加，用户会有站点速度慢的印象，即使也许用户可视的第一屏资源都已请求结束，但浏览器的进度条会一直存在。减少请求的方法有：合并文件（将多个CSS文件或JavaScript文件合并成一个）；图片地图（在一个图像上划分不同区域映射不同的链接）；内联图像（让图像与文本一起下载和显示）；CSS Sprites（利用 CSS background 相关元素进行背景图绝对定位）等。
2.3使用JSP增强网页的动态效果
JSP基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。而且JSP有多样化和功能强大的开发工具支持。另外，web应用需要强大的服务器端组件来支持，开发人员需要利用其他工具设计实现复杂功能的组件供web页面调用，以增强系统性能。JSP还可以使用成熟的JAVA BEANS组件来实现复杂商务功能，增加网页与用户的完美交互。
2.4禁止拷贝特效
为了避免网页作品出现版权方面的纠纷，在网页制作中增加防网页抄袭技术是非常必要的，这样才能使更多的好作品出现在网络。 我们知道，通常复制内容是在别人网页上把要复制的内容全选，然后点击鼠标右键来复制文章内容，或者直接使用快捷键ctrl+c复制下来。那么我们知道是如何复制的，就完全可以采取方法，屏蔽这种方法复制。在网页源代码中使用一些简单的语句，就能实现禁止选择对象、屏蔽右键使用、屏蔽复制快捷键等功能特效。如，在标签中加入onselectstart=”return false”，该语句的作用是使鼠标不能选择文本，有了这个命令，试图复制文字的人将无法选定内容。再如，onload=”look（）”语句，禁止的是ctrl键的使用等。还有人在文字结尾增加干扰码（与背景颜色相同的字），用以干扰别人复制。实际上大多的设计者为保护自己的版权不被侵犯，通常都采用多种方式组合起来使用，以阻止擅长拷贝的人对其原创文字型网页内容的复制。
3.结束语
网页设计的一个基本特色便是吸引浏览者，一个美观漂亮的页面不管内容多么空洞，也会有人欣赏，反之一个内容充实但页面简陋却往往不会有人去浏览。从博客开始到现在的各种前端技术的开发与应用都离不开Web本身，近来以HTML5为代表的新一代移动Web技术是Web前端技术的重大发展创新，将大幅提升Web应用在交互、系统能力调用、富媒体、语义化等方面的能力，使用户无需安装纷繁的插件而获得更为丰富的Web应用。在不久的将来，Web应用将与原生应用优势互补、并行发展，共同构成移动互联网的应用生态系统。
【参考文献】
[1]曹刘阳.编写高质量代码：Web前端开发修炼之道[M].北京：机械工业出版社，2010.