请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5实战 查看内容

HTML5 网站建设案例

2013-12-4 15:17| 发布者: admin| 查看: 1206| 评论: 0

摘要: 想必大家很想看看实际的HTML5应用是什么样子。现在,为了让大家有一个更好的体验,我们将使用一个HTML5网站的开发案例,向大家展示一个HTML5网站从需求分析到工程实践的全部过程。需求的提出公司安排小王按照领导要 ...
    想必大家很想看看实际的HTML5应用是什么样子。现在,为了让大家有一个更好的体验,我们将使用一个HTML5网站的开发案例,向大家展示一个HTML5网站从需求分析到工程实践的全部过程。

需求的提出

公司安排小王按照领导要求制作网站,公司领导要求:能够紧跟时代,视觉效果好,由于客户需要通过网站了解公司,因此时间上较为紧迫,限定3天内完成。
小王了解到:公司有很多客户都是欧美地区的,而且很多国外用户都使用iPhone和iPad上网浏览,小王自己又不会使用图片设计工具软件,也不会用Flash,但是由于HTML5和css3能够方便快捷地实现各种渐变和圆角,又能够简单实现动画和运动效果,再加上安全便捷的表单验证等,所以小王毫不犹豫地选择了最新的HTML5技术来实现任务。

需求分析

目标受众:欧美用户
使用语言:英文、中文
改版目标

 适应于所有平台和浏览器,具有通用性(这很难,几乎是不可能完成的任务。我们认为,这样的要求是不现实的,尤其是面对IE6、IE7、IE8等对HTML5支持不好的浏览器);
 表单的验证界面和代码要优化(这一块正好可以发挥Forms 2.0的强项);
 整体页面的代码简化,缩小文件大小(依赖CSS3和大量新增标签);
 字体更加美观(依赖CSS3);
 动画更加流畅和高效率(依赖CSS3);
 最好体现出交互性(依赖CSS3和JavaScript);
 要体现出与目前众多网页不同的地方。

综上分析,实现这些任务基本上就是一次重大突破,但仔细一分析,其实也没有应用太多的HTML5的技术,只不过就是融入Forms 2.0技术、各种HTML5标签和CSS3的特效。

系统分析

Web 2.0时代与HTML5时代的网站页面结构对比如下所示。

 HTML 4和Web 2.0本身没有HTML5标签上的细框架,只是一个泛泛的head区、body区。HTML5本身就有非常详细的标签上的框架定义,对于不同的位置和等级,都进行了详细的说明。
 HTML 4和Web 2.0本身极为强调容器(container)的概念。尽管这个概念已经发展了近7年,但在不同浏览器的兼容性上依然有很大的问题。HTML5已经突破了容器的概念,对于页面的控制完全可以依赖新增标签。另外,HTML5在写法上也会有巨大的改观。
 HTML 4和Web 2.0在样式文件上花费的时间越来越多。HTML5的样式写法有了简化,也有了增加。从完成一个项目来看,HTML5的样式代码一定会少于之前的写法。
 HTML 4和Web 2.0在动画上的表现很不如人意。HTML5样式可以自带动画和滤镜,效果惊炫,开发容易。
 HTML 4和Web 2.0在非系统字体上的表现完全依赖于图片。而由于CSS 3伪类定义特性,HTML5可以随时调用不同的网络字体,将原来需要用图片完成的文字效果直接用网络字体实现出来。

注意  
网络字体目前只适用于英文字体。汉字字体由于文件过大,只适用于局域网或高速网(平均带宽在400KB/s以上)。这是HTML5标准在设计时的缺陷,没有充分考虑拼音文字字库与象形文字字库的区别。用的时候千万要注意,如果非要用汉字字体,则需要使用离线缓存技术缓存字体文件,而且在移动设备上,不建议使用汉字网络字体,原因是移动设备的离线缓存空间不够。

工程实现
看了上述理论上的讲解和分析,本书将在此处提供一个局部工程实现供大家参考,更详细的内容在下面进行介绍。

1. 本实例的文件与文件夹布局
本例代码均在文件夹example_001中,目录分布如下所示,

下面简要介绍各文件夹的作用(其中\表示根目录)。
 \Audio\ 主要存放音频文件。
 \Images\ 主要存放图片素材。
 \Js\ 主要存放JavaScript代码。
 \Png\ 主要存放设计稿的图片。
 \Style\ 主要存放样式表文件。
 \Video\ 主要存放视频文件。
 Index.html表示网站的主索引页面。
 Register.html表示网站的注册页面。

2. 本例的文件与文件夹命名简易规则
在任何开发过程中,命名是非常重要的一个环节,这里提供一些简单的说明给大家参考。
 首字母大写,其余小写,多个词用下划线连接,如My_Page和Second_Page等。
 不同的文件夹用于分类存放各类网站元素(音频、视频、图片等)。
 每个文件的名字需望名知义。
 文件命名避免多重规则。
 不要中文拼音与英文混合使用。
 不要以纯数字命名。

3. 网站部分代码
本示例的部分代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>某公司的网站首页</title>
<meta name="keywords" content="HTML5">
<meta name="description" content="这是一个HTML5的试验页">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="author" content="Author:Adam">
<meta name="robots" content="ALL">
<meta name="copyright" content="HTML5 Developer Community">
<link href="style/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="container">
<header>
<div class="logo">XXX公司 <small>&nbsp;&nbsp;&nbsp;&nbsp;xxx
copration</small></div>
</header>
<nav>
<ul>
<li><a class="nav" href="/">首页</a>
<li><a class="nav" href="/A.html">栏目A</a>
<li><a class="nav" href="/B.html">栏目B</a>
<li><a class="nav" href="/C.html">栏目C</a>
<li><a class="nav" href="/D.html">栏目D</a>
<li style="margin-left:60px;">
<form action="/search" method="post">
<li><label for=key>站内搜索:<input type=search name=key requried ></label>
<li><label for=button><input type=submit name=button value="搜索"></label>
</form>
</ul>
</nav>
<section>
<aside class="aside_index_css">
<section>
<fieldset style="margin:0px;padding:0px;width:260px;height:400px;">
<form>
<legend style="font-family:'logo_font';color:#333;font-size:
20px;">用户登录与注册区域</legend>
<p>
<label for="uid">用户名:</label>
<input type="text" name="uid" class="user_input" required
autocomplete="true" placeholder="请填写用户名"pattern=
"[a-zA-Z0-9]{4,10}">
<p>
<label for="pwd">密码:</label>
<input name="pwd" type="password" class="user_input"
required autocomplete="true" placeholder="请填写密码">
<p>记住密码:<input type="checkbox" name="remember" checked=
"checked" value="1" id="remember" />
<a class="user_link" id="user_reg" title="忘记密码" href=#>
忘记密码</a>
<a class="user_link" id="user_reg" title="用户注册" href=#>
用户注册</a>
<p><input type="submit" value="登录网站" class="button">
</form>
</fieldset>
</section>
</aside>
<article>
<fieldset class="custmer_index">
<a class="article_link" href="/1.html">test for HTML5[2012-01-01]</a><br>
</fieldset>
</article>
</section>
<footer>
<small>版权所有:HTML5研究小组</a></small>
<address>Beijing RPC</address>
</footer>
</section>
</body>
</html>

运行结果


小结
HTML5使网页的代码量大大减少,开发效率大大提高,这给开发人员带来了巨大的机会。
但是我们也应该清醒的认识到:只有完整、全面地学习W3C公布的HTML5相关的技术标准,才能真正掌握HTML5。
我们从最浅的地方说起,最终目的就是希望让读者感觉到HTML5入手是非常容易的,是可以非常容易地让每个人参与起来的,更希望广大读者可以从宏观上了解HTML5的全局。

同时,我们总结了一些我们自己认为正确的观点和可靠的经验奉献给大家。

本例完整源码下载:

html5webdemo.zip



鲜花

握手

雷人

路过

鸡蛋
下一篇:HTML5版 404页面

相关阅读

最新评论

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-4-10 07:24 , Processed in 0.082221 second(s), 32 queries .

返回顶部