2013-01-15
单页WEBAPP设计浅谈
表示状态不佳.,整个人都快神经衰竭..
最近不是写代码就是做设计,我以为我能睡着,结果打游戏打到失眠,= =..
我的第一个单页WEB设计,是CFC的团队网站,在整理相当足够的资料后...
加上后期的设计与编程,便完成了CrazyForCode.org的整体效果...

下面和大家分享一点自己前端设计的一些思路....
单页WEB设计,是最近一两年兴起的一种网页设计模式,相对应传统的设计模式,单页设计模式以需要多少就给多少的原则进行数据传送...
所以数据和UI就分离开来,第一次请求时,基础HTML标记等传送到客户端,然后根据用户需要.....
使用Web Socket API或AJAX传送JSON和XML数据,动态更新HTML DOM,那可是节约相当多的带宽和数据访问请求啊...
这可都是金子啊...
所以这也会促进WEB程序的API化,像Twitter、Facebook这些大型网站都使用了单页设计元素,开放的API也是相当丰富....
再说到我们常用的QQ空间,在个人中心最底部一般都有查看更多,这就是单页元素...

单页的另一个优势在于它的展示性,和整体性,如CFC网站,从主页开始,像讲故事一样的把整个团队介绍给浏览者...
上图大体流程是这样的,我们使用什么什么,能做什么什么,又做了什么什么,最后关于我们....
所以具有流程式的展示网站可考虑这使用单页设计模式...
然后使用成熟的JQUERY框架和它的特效插件..
整合AJAX和DOM操作....
自己再合理设计网页的各个元素,色彩搭配,以及兼容性...
使用JS优化加载.....
基础单页也就完成了...
下面给出CFC单页HTML结构供参考...
Code:xml

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Crazy For Code</title>
</head>
<link rel="shortcut icon" href="CFC.png" />
<link href="CSS/Default.css" rel="stylesheet" />
<link href="CSS/ACHIVEMENT.css" rel="stylesheet" />
<script src="JavaScript/Loading.js"></script>
<body style="overflow-x:hidden;">
    <!--    ###PAGE   -->
    <div id="page">
        <!--   ###header   -->
        <div id="header">
        <!-- #include file="Link/header.html" -->
        </div>
        <!--  header End###-->

        <div id="Loading">
        <!-- #include file="Link/Loading.html" -->
        </div>

        <!-- ###SinglePage   -->
        <div id="SinglePage">

            <div id="C1"></div>

            <div id="HOME">
             <!-- #include file="Link/HOME.html" -->
            </div>


            <div id="C2">
                <div id="LC3"></div>
            </div>


            <div id="ACHIVEMENT">
            <!-- #include file="Link/ACHIVEMENT.html" -->
            </div>


        <div id="toABOUT"></div>
        <div id="C3"></div>


        <div id="ABOUT">
        <!-- #include file="Link/ABOUT.html" -->
        </div>


    </div>
    <!--  SinglePage  END###   -->

    <div id="footer">
            <!-- #include file="Link/footer.html" -->
    </div>

    </div> 
        <!--    PAGE END###    -->



</body>
</html>
<script src="JavaScript/jquery.js"></script>
<script src="JavaScript/jquery.scrollTo.js"></script>
<script src="JavaScript/jquery.smart3d.js"></script>
<script src="JavaScript/loopedSlider.js"></script>
<script src="JavaScript/jquery.easing.min.js"></script>
<script src="JavaScript/Start.js"></script>

BreezeDust    发表于  01:20:59    Tag: 技术应用
更多
表示无聊,来看看~~~~
Nano.Michael  |  发表于  2013-01-25    21:44:40      
姓名
Copyright (C) 2011-now  BreezeDust(Yang Li), All Rights Reserved  E-mail:BreezeDust@qq.com