单页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

继续阅读我的更多文章