方便快捷的h5页面制作方法

不论想要哪一种网站建设，首先要能够跟上整个行业的发展，这样才能保证网站可以适应不同的需求，就像现在很多人进行网站建设时都会选择h5语言。如果你让这些人说它有哪些优点，我相信有大部分人都无法回答，但市场的规则就是这样，大家都想要得的效果，作为服务商必须要能够做出来。而今天我们为大家介绍如何制作简单的h5网页。

第一步.确定h5页面的布局

网站建设过程都是最初一个想法开始的。在这个阶段设计师通常会使用像Photoshop这样的程序来处理细节，看看这些框架如何融合在一起是否合适。然后我们就可以手工编写HTML和CSS框架，比如网站的背景颜色和字体，到内容部分的细节工作。

第二步.h5网页制作流程

其实至今HTML5仍然是一个正在进行更新的语言。不过大家可以放心有些标准的某些部分是完整的，我们可以立即使用。

在本教程中我们使用了HTML5中的一些标签：

1.创建你的页面标题;

2.创建页面页脚;

3.将内容分成不同的部分（如主区域，侧边栏等）;

4.将单独的文章与页面的其余部分分开;

5.包含您的导航菜单;

6.通常包含用作您的文章的插图的图像。

h5页面头部制作

这些标签可以通过div进行完成。不同之处在于这些标签在语义上组织你的页面。换句话说您可以以各种方式展示您的内容，以便您可以更轻松地确定您网页的主题。不过今天使用HTML5也有一些障碍。其中最值得一提的是IE浏览器系列，它不支持这些标签（尽管它可以用一个简单的JavaScript包含文件来解决）。而这也是你应该把你的决定转移到你的网站的受众上的HTML5。而为了这个目的

您可以在第一行注意到新的，它告诉浏览器该页面是用HTML5标准创建的。它也比旧的文档类型更容易记住。在指定文档和标题的编码之后，我们继续添加一个特殊的JS文件，使得Internet Explorer都能正确呈现HTML5标签。但如果访问者使用的IE禁用JavaScript，那页面将无法显示。这就是为什么，要根据您的受众考虑网站模板的常规XHTML版本，因为该版本可在任何浏览器中使用。

h5正文部分制作

在正文中我们可以使用新的部分标签，将您的页面分成不同的语义部分。最外层是#page部，其被设置为宽960像素在样式表（注意与旧计算机显示器相当标准的宽度）。在这之后是标题标记和导航标记。

注意链接的href属性，在＃符号之后的部分对应于我们要滚动的文章的链接。

h5网页的文章部分

 

上面的标记在所有文章之间共享。首先是分界线（最好的解决方案在语义上是一个

---

行，它在HTML5中增加了一个逻辑分隔元素的作用，但不幸的是它不可能以跨浏览器的方式进行样式化，所以我们将坚持一个DIV）。在此之后我们通过文章的链接，在导航页面中进行滚动。

h5页脚部分的制作

最后我们要对页脚标签进行创建。页面底部包含了其余部分的JS程序，而且我们可以添加一些常用的插件等程序，以方便在接下来的设计中使用。