基于Html5的web前端开发—甜品店网页设计

题目：基于Html5的web前端开发—甜品店网页设计

目录

关于HTML5的网页设计与实现

一、引言及什么是html ............................................... 5

二、网页制作........................................................7

一、引言 ................................................................................................................................... 4

二、网页制作 ........................................................................................................................... 5

（一）、制作步骤 ................................................................................................................... 5

（二）、网页布局 ................................................................................................................... 5

（三）、常用工具介绍 ........................................................................................................... 6

三、HTML5的改进特性 .......................................................................................................... 8

（一）HTML5新元素.............................................................................................................. 8

（二）异常处理 ..................................................................................................................... 9

1

四、案例描述-甜品店网页设计 .............................................................................................. 9

1、考核知识点 ....................................................................................................................... 10

2、练习目标 ........................................................................................................................... 10

3、需求分析 ........................................................................................................................... 10

4、案例展示 ........................................................................................................................... 10

4.1、布局及定义基础样式 .................................................................................................... 11

4.3页面布局 ........................................................................................................................... 12

4.3定义公共样式 ................................................................................................................... 13

4.4网页制作 ........................................................................................................................... 14

1、制作头部模块.................................................... 14

五、 结束语 ........................................................................................................................... 27

2

摘要

随着Internet的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。

关键词:HTML5;网页制作;HBuilder

3

一、引言

随着互联网的不断发展，互联网对人们的生活也在不断地发展和加强，人们渐渐开始习惯于互联网带来的各类服务和应用，便利和丰富。随着互联网的基础用户和开发者不断增多，人们不断地去创造和完善它的速度也越来越快，无论从技术层面还是商业层面，新的模式和方法层出不穷，整个行业新陈代谢不断加速，新的应用和新的公司不断地挑战着新的技术和新的模式。毕竟整个互联网是一个开放的环境，大家需要一种标准，所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。

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

什么是HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5

支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果。

W3C 指 World Wide Web Consortium，万维网联盟。

WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在

2006 年，双方决定进行合作，来创建一个新版本的 HTML。

4

二、网页制作

（一）、制作步骤

网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。

设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一张报约或者一份杂志来进行排版布局。

1. 草稿 新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。

2. 粗略布局 在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。

3. 定稿 定稿即将粗略布局精细化、具体化，完成整个页面的设计。

页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。

（二）、网页布局

常见网页版式布局结构有以下几种：

两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结果非常清晰，内容一目了然，便于信息的查询。上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。Flash型主要采用现在流行的Flash技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。

（三）、常用工具介绍

用来制作效果图的软件并没有明确的规定。可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。

HBuilder是一款非常好用的平面设计软件。由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。所以，在很多的的广告、出版、软件公司，HBuilder都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。

Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver配合做网页。对处理一般的网页图片比较实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。

三、HTML5的改进特性

（一）HTML5新元素

HTML5提供了一些新的元素和属性，例如