关于HTML5的网页设计实现分析

1、-. z.信息商务学院网页制作技巧与实战大作业题目：关于HTML5的网页设计与实现院(系)别建筑工程系专业工程造价班级 ZB造价161 * 8 *王非指导教师董智勇2016年11月27日目录关于HTML5的网页设计与实现一、引言及什么是html5二、网页制作7 TOC o 1-3 h z u HYPERLINK l _Toc468027172一、制作步骤 PAGEREF _Toc468027172 h 3HYPERLINK l _Toc468027173页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面

2、的都经客户确定后，完成网页的制作进程，交给程序员添加程序。 PAGEREF _Toc468027173 h 3HYPERLINK l _Toc468027174二、网页布局 PAGEREF _Toc468027174 h 3HYPERLINK l _Toc468027175三、常用工具介绍 PAGEREF _Toc468027175 h 3HYPERLINK l _Toc468027176三、HTML5的改良特性 PAGEREF _Toc468027176 h 3HYPERLINK l _Toc468027177一HTML5新元素 PAGEREF _Toc468027177 h 3HYPERL

3、INK l _Toc468027178二异常处理 PAGEREF _Toc468027178 h 3HYPERLINK l _Toc468027179四、完毕语 PAGEREF _Toc468027179 h 3摘要随着Internet的诞生和开展，许多人不再仅仅局限于网上冲浪，而是参与到建立中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就建立与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布

4、局、色彩构置，框架构造等相关事项做以下论述。关键词:HTML5;网页制作;HBuilder-. z.一、引言随着互联网的不断开展，互联网对人们的生活也在不断地开展和加强，人们渐渐开场习惯于互联网带来的各类效劳和应用，便利和丰富。随着互联网的根底用户和开发者不断增多，人们不断地去创造和完善它的速度也越来越快，无论从技术层面还是商业层面，新的模式和方法层出不穷，整个行业新代不断加速，新的应用和新的公司不断地挑战着新的技术和新的模式。毕竟整个互联网是一个开放的环境，大家需要一种标准，所以HTML5这种更加新的标准和技术体系在不断地革新中开展壮大。HTML5成为不断被提及的热门话题，不少人预言HTML

5、5的开展将给移动互联网产业带来革命性的深刻变化。HTML5是几十年来Web标准最巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。尽管HTML5还有很长的路要走，但HTML5正在改变Web。另外，目前的互联网不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷开展，人们可以通过手机和平板电脑等各类移动设备来获取信息和使用更加丰富的应用。什么是HTML5？HTML5 将成为 HTML、*HTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞

6、生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大局部现代浏览器已经具备了*些 HTML5 支持。HTML5 是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果。W3C 指 World Wide Web Consortium，万维网联盟。WHATWG 指 Web Hyperte*t Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 *HTML 2.0。在 2006 年，双方决定进展合作，来创立一个新版本的 HTML。-. z.二、网页制作一、制

7、作步骤是网页的集合，一个站点用的所有网页构成一个，网页是的表现形式，网页设计是指对整体页面的设计，包括页面风格、配色、布局、容等。网页设计包含的容非常多，大体分为两个方面：一方面是纯本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是的延伸设计，包括主题、浏览群的定位、智能交互、制作筹划、形象包装和宣传营销等。设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一报约或者一份杂志来进展排版布局。1. 草稿新页面就像一白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。这是原创阶段，你不必讲究细腻工整，你也可在

8、草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。2. 粗略布局在草稿的根底上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将标志、导航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。3. 定稿定稿即将粗略布局精细化、具体化，完成整个页面的设计。页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。二、网页布局常见网页版式

9、布局构造有以下几种：两栏式构造，即页面顶部为标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种乏味的感觉。三栏式构造是一些大型常用的布局构造，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条容或者广告条。三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是常用的一种布局形式。三型构造，这种构造多用于国外或者视频类，其特点是分类清晰，展示方便。左右框架型，是企业或论坛常用的布局，页面分为左右两局部，左边一般为导航局部，右边是与导航相对应的容。左右框架型的结果非常清晰，容一目了然，便于信息

10、的查询。上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个显得简洁明亮，这种构造适合于信息量不大，主要靠图片展示容的。Flash型主要采用现在流行的Flash技术，页面表达的容较为丰富，给人视觉和听觉上很大的冲击，处理得当会到达Web页面难以到达的效果。三、常用工具介绍用来制作效果图的软件并没有明确的规定。可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。HBuilder是一款非常好用的平面设计软件。由Adobe公司开发

11、设计，其用户界面易懂、功能完善、性能稳定，是比拟专业的图像处理软件，它具有强大的滤镜功能。所以，在很多的的广告、出版、软件公司，HBuilder都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、*键迅速切换前风光和背风光等，灵活的运用快捷键，可以使设计的速度大大提高。Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver配合做网页。对处理一般的网页图片比拟实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。-. z.三、HTML5的改良特性一HTML5新元素HTML5提供了一些新的元

12、素和属性，例如导航块和。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如和标记。1.取消了一些过时的HTML4标记其中包括纯粹显示效果的标记，如和，它们已经被CSS取代。HTML5 吸取了*HTML2 一些建议，包括一些用来改善文档构造的功能，比方，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使容创作者更加语义地创立文档，之前的开发者在实现这些功能时一般都是使用div。2.将容和展示别离b 和 i 标签依然保存，但它们的意义已经和之前有所不同，这些标签的意义只

13、是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。3.一些全新的表单输入对象包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注容的方法，使语义Web 的处理更为简单。总的来说，这些与构造有关的改良使容创立者可以创立更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。4.全新的，更合理的Tag 多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。5.本地数据

14、库这个功能将嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。6.Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。7.浏览器中的真正程序将提供 API 实现浏览器的编辑，拖放，以及各种图形用户界面的能力。容修饰Tag 将被剔除，而使用CSS。Html5取代Flash在移动设备的地位。二异常处理HTML 5(te*t/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够平安的忽略掉新的HTML 5代码。与HTML 4.01相比