创建网页像Windows 8开始屏幕（新手）

首先，我是一个高中生和一个非常新的程序员（认为CS101级）。在我的空闲时间（可悲的是有限的），我想尝试一些项目来鼓励我学习更多，并且我有一个有趣的想法。创建网页像Windows 8开始屏幕（新手）

我不确定这是否是正确的地方问，但我想知道是否有人能让我指出正确的方向。我想创建一个类似于Windows 8 Start Screen的网站（如果出于某种原因，您不知道它是什么样的，那么这是一个link to an image）。

这个想法具有不同长度的块状对象（可能不像Windows 8那样整齐），可以水平滚动，并且可以在它们上面有一些“活动”的东西。点击一个可以使用一些AJAX技术来改变到另一个菜单，或者在页面上打开一个信息窗口。有点像Outlook/Hotmail如何在无需重新加载的情况下更改屏幕。箱子物品的信息可能来自数据库。

我在PHP，MySQL和JavaScript方面有很少的经验 - 足以理解一些代码并编写简单的脚本。我应该如何专注于学习我对项目的想法？我只是在寻找要学习的东西路线图。

谢谢！

来源

2012-11-13 LaserWraith

不幸的是，这是因为过于开放性的，这不是问题的好地方。堆栈溢出与技术问题有关，您可以在其中显示代码并获得有关某些功能无法正常工作的帮助。这将是当你有如下特定问题：“我应该使用一张表来显示不同长度的块如Windows 8”，或者“这种翻转效果不符合我的需求”。 –

@JuanMendes我认为这是事实，但我不确定是否有更好的地方。超级用户似乎没有多少关于编程，“程序员”网站是专业人士。我真的不想去雅虎！答案... – LaserWraith

您可以尝试http://jacedc.deviantart.com/#/d5oqhvq，但其未完成且不包含响应式设计。浏览器行为也有很大不同，但它仍然是一个未完成的项目。（P.S.对不起，有点晚了，只是认为我把它扔到那里：P） – ModernDesigner

你可以嘲笑了win8的外观与CSS和图像2的宽度和正常或宽的项目是否它只是添加额外类的风格。使用jQuery，您可以制作图标/页面拖动功能等，您可以通过一些工作简单地测量宽度并通过ajax加载更多内容，就像延迟加载但水平一样，使用ondblclick=""启动加载应用程序/内容，这是我在30分钟内提出的。 Source & images

enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>basic win8</title> 
<style> 
*{font-family: "Segoe UI", Frutiger, "Frutiger Linotype";} 
body{background-image:url('Win8Background.jpg');} 

#wrapper { 
    width: 70%; 
    padding: 0px; 
    margin-left:auto; 
    margin-right:auto; 
} 
.sortable-list li { 
    padding: 4px; 
    margin: 4px; 
    float: left; 
    border: 1px solid black; 
    list-style-image: none; 
    list-style: none; 
    list-style-type: none; 
    background-color:#204558; 
} 

#dashboard-layout .item.normal { 
    width: 100px; 
    height: 100px; 
} 

#dashboard-layout .item.wide { 
    width: 224px; 
    height: 100px; 
} 

.item.normal p{ 
margin:0px; 
padding: 0px; 
} 

.item.wide p{ 
margin:0px; 
padding: 0px; 
} 

h1{color:white;} 

#left_head{width:45%; float:left;} 
#right_head{width:45%; float:right; text-align:right;margin-right:15px;} 
</style> 

<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"></script> 
<script type="text/javascript"> 
function update_columns() { 
    var positions = [] 
    $("#dashboard-layout .item").each(function() { 
     var $item = $(this); 
     positions.push($item.attr('id')); 
    }); 
    $.post("./", { 'positions[]': positions }, 
     function(data) { 
      alert("Update Success - New positions:" + positions); 
     } 
    ); 
} 

$(function() { 
    $("ul.sortable-list").sortable({ 
     connectWith: "#wrapper", 
     placeholder: 'ui-state-highlight', 
     tolerance: 'pointer', 
     revert: true, 
     forcePlaceholderSize: true, 
     forceHelperSize: true, 
     update: update_columns, 
    }).disableSelection(); 
}); 
</script> 

</head> 

<body> 

<div id="left_head"><h1>Start</h1></div> 
<div id="right_head"><h1>Lawrence Cherone</h1></div> 
<div style="clear:both;"></div> 

<div id="wrapper"> 

<ul class="sortable-list" id="dashboard-layout"> 

    <li id="a" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px"> 
    content a 
    </li> 

    <li id="b" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px"> 
    content b 
    </li> 

    <li id="c" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px"> 
    content c 
    </li> 

    <li id="d" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px"> 
    content d 
    </li> 

    <li id="e" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px"> 
    content e 
    </li> 

    <li id="f" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px"> 
    content f 
    </li> 

    <li id="g" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px"> 
    content g 
    </li> 

    <li id="h" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px"> 
    content h 
    </li> 

    <li id="i" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px"> 
    content i 
    </li> 

    <li id="j" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px"> 
    content j 
    </li> 

    <li id="k" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px"> 
    content k 
    </li> 
</ul> 

</div> 

</body> 
</html>

来源

2012-11-13 05:05:58

感谢您花费的时间！我认为我正在与jQuery走向正确的方向，但并不完全确定。 – LaserWraith

假设您网站上的每个“Block”代表数据库中的单个行（意味着没有继承的父 - 子关系），使用CSS3创建块非常容易，jQuery可以实现翻转效果（徘徊，因为我们面对它，移动的鱼真棒）。

集成jQuery和Ajax将允许您将PHP作为平面文件或OOP进行数据库调用。

可能还想查看嵌套查询，因为如果您想要做一些疯狂的事情，比如在一个页面上有2个“块”，并且您需要从2个表中获取数据到上面页。

好运

来源

2012-11-13 04:24:22 John

“通过PHP将数据库调用为平面文件或OOP。”我已经阅读了一些关于使用单独的.php文件来查询数据库的内容，但是你在说什么“OOP”？我假设你的意思是面向对象的编程，但不知道它是如何应用在这种情况下，或不同于这里使用的技术：http://openenergymonitor.org/emon/node/107 – LaserWraith

Flat File = <代码代码代码代码> require_once（ 'File.php'）<---包含过程逻辑等 <代码代码代码> OOP方法： require_once（'DBCon.php）; require_once（'DBQueries.php）; require_once（'Application-Blocks.php'）; 这些文件中的每一个都具有多种功能，所以当需要更改“网页”时，您只需运行一些简单的行，如 $ dbConn = new dbConn（）; $ dbConn-> dbConnect（）; $ dbConn-> dbQueries-> loadAppConfig（）; 非常粗糙，但希望你会明白。使用OOP可以创建准备好的功能，几乎可以在任何地方访问。 – John

创建网页像Windows 8开始屏幕（新手）

回答

相关问题