让企业赢在全网营销时代
当前位置: 主页 > 建站知识 > 移动建站 >
联系我们
电话咨询:15066004201
E-mail:727661179@qq.com
地址: 山东省东营市西城区

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

作者:admin 点击量:次 2018-07-25

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

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

简单的h5页面制作方法

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

第二步.h5网页制作流程

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

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

1.创建你的页面标题;

2.创建页面页脚;

3.将内容分成不同的部分(如主区域,侧边栏等);

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

5.包含您的导航菜单;

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

h5页面头部制作

h5页面头部制作

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

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

h5正文部分制作

h5正文部分制作

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

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

h5网页的文章部分

 

上面的标记在所有文章之间共享。首先是分界线(最好的解决方案在语义上是一个<hr>行,它在HTML5中增加了一个逻辑分隔元素的作用,但不幸的是它不可能以跨浏览器的方式进行样式化,所以我们将坚持一个DIV)。在此之后我们通过文章的链接,在导航页面中进行滚动。

h5页脚部分的制作

h5页脚部分的制作

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