设计和编码集成的Facebook应用程序：HTML + CSS

daique1908

关注

翻译最新推荐文章于 2026-06-06 09:33:38 发布 581 阅读 AI 写同款· GEO 优化 ›

欢迎回来！在本教程的这一部分中，我们将把我们的设计编码为HTML，并说明一些FacebookCSS样式属性，这些属性将使它具有原生的感觉。所以，请坚持我，让自己喝杯茶，享受快乐的编码！

介绍

欢迎来到我们设计的第2部分，并对本机Facebook应用进行编码。在上一篇文章中，我们在幕后回顾了创建本地外观Facebook应用程序涉及的一些思维过程。尽管我们没有在Photoshop中详细介绍它的实际设计；我们确实讨论了Facebook的设计原则如何帮助您设计应用程序。在我的示例中，我选择将webdesigntuts +博客重新创建为Facebook应用。我假设您在Photoshop中都足够舒适，可以复制或定制它来创建自己的原生外观设计。

我们将创造什么

在本教程的这一部分中，我们将把该设计编码为HTML，并说明一些FacebookCSS样式属性，这些属性将使它具有原生的感觉。所以，请坚持我，让自己喝杯茶，享受快乐的编码！

步骤1：未做好准备就是失败

从一些前瞻性计划开始总是一个好主意。你们中的某些人将要在Photoshop中设计布局，而你们中的一些人有信心将希望直接从线框跳到HTML / CSS标记中。我个人总是喜欢先将要编码的内容创建到Photoshop中，因为它使我对要编码的内容有了强烈的视觉理解。当您想更新应用程序时，将来也可以派上用场。与在代码编辑器中相比，在Photoshop中安排和概念化内容要容易得多。

有时我也喜欢打印线框并用笔在其上标注尺寸。当我编写代码时，这也使生活更轻松。随着您的前进，我相信您会想出自己的方法和做事方式，其中一部分就是寻找适合您的最佳方法。

步骤2：应用程式结构

我的文件夹结构如下（这几乎是我为每个项目进行设置的标准方法）。您只需在硬盘驱动器上创建此空白文件夹模板并在每次创建新项目时将其复制即可节省大量时间

CSS
js
图片
index.html

步骤3： HTML标记

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design and Code an integrated Facebook App</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/myjava.js" type="text/javascript"></script>


</head>

<body>
</body>
</html>

设置我们的包含

对于这个项目，我使用了HTML5文档类型，我认为大多数人现在应该已经尝试过了。对于我CSS重置，我已从其YUI库链接到YahooCSS重置。如果您不熟悉CSS重置，可以将其以最基本的形式描述为：

样式表，以减少浏览器在默认行高，页边距和标题字体大小等方面的不一致

在本教程中，我不会对此做太多详细介绍，但是您可以在下面的进一步阅读部分中找到有关此问题的更多信息。

重置后，我已经链接到我自己CSS文件，该文件名为“ style.css”。然后，紧接着是jQuery的最新包含和我自己的javascript文件的包含，我将其包含为“ myjava.js”（尽管我们将在本教程的下一部分中创建此文件）。此文件将使我们能够进行过滤器搜索并更改页面标签的内容

设置我们的页面

<body>
<div class="wrapper">

	<div class="maincontent">
    
    	<div class="tab_container">
     	</div><!--End Tab Container -->
    
	 </div><!--End Main Content-->
    
    <div class="sidebar">
    </div><!--End Sidebar-->

</div><!--End Wrapper -->


</body>

在创建我们的Facebook应用程序的html版本时，我希望将所有内容放入760px宽的包装器中。这只是为了确保我停留在760px以内； Facebook允许您的应用程序位于其中的画布的宽度。然后在将其放入Facebook之前，先删除此包装器和CSS。

设置好包含和“包装器”后，就该进入应用程序的主要构建模块了。在此示例中，它相对简单，因为我们只有“ maincontent”和“ sidebar” div。为此，我们将应用相同名称的类。如果愿意，可以使用“ id”而不是“ classs”，因为这些div实例将不会重复。但是，我总是选择的一种方法（尽管我敢肯定有些人会不同意）是在大多数项目上使用类。我很少使用id。我发现这样做对我来说很简单。我永远都不会怀疑我给了一个“ id”还是“ class”。这可能非常方便，尤其是当您开始将jQuery集成到您的应用程序中时。尽管在开始编码之前要考虑一下是否可行，但绝对不需要在任何地方使用id。

还建议您始终在结束标记的末尾添加注释，以说明标记的哪一部分已完成。这样，您就知道每个部分的结束位置。我必须承认，采用这种技术还很晚，事后看来，我本可以节省很多时间，不必费力地遍历代码堆，以找出某些块的开始和结束位置。

步骤4：主要内容

<div class="maincontent">
    
    	<div class="logo"><img src="images/logo.png" width="379" height="60" alt="webdesigntuts+ logo"></div>
        
        <ul class="tabs">
            <li><a href="#tab1">All</a></li>
            <li><a href="#tab2">About</a></li>
            <li><a href="#tab3">Write For Us</a></li>
            <li><a href="#tab4">Other Blogs</a></li>
		</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
    
          <div class="post">
        </div><!--End Blog Post-->
        
        <div class="post">
        </div><!--End Blog Post-->
        
    </div><!--End Tab 1-->
   
    <div id="tab2" class="tab_content">
   </div><!--End Tab 2 -->
    
    <div id="tab3" class="tab_content">
	</div><!--End Tab 3 -->
    
     <div id="tab4" class="tab_content">
	</div><!--End Tab 4 -->

</div><!--End Tab Container -->
    
  </div><!--End Main Content-->
    
    <div class="sidebar">
    </div><!--End Sidebar-->
</div><!--End Wrapper -->

对于此应用程序，我认为没有必要仅使用标头来容纳徽标，因此我将其放置在其自己的div中的“ maincontent” div的顶部，并带有一个名为“ logo”的类。然后是选项卡的无序列表。我给选项卡指定了一个类名；是的，您猜对了。这些将充当我们的标签菜单栏，将显示博客应用程序的不同页面。

我们博客应用程序的页面包装在div容器中，我给了它一个'tab_container'类。在此内部，我有四个div（每个标签/页面一个）。我给所有这四个类提供了一个名为“ tab_content”的类，每个类在页面中的位置都有自己的类。第一个选项卡有一个额外的类'tab1'，第二个'tab2'，第三个'tab3'等。当我们实现jQuery时，这些单独的类名将用于帮助我们识别教程下一部分中的每个选项卡。

步骤5：个人网志文章

<div class="tab_container">
    <div id="tab1" class="tab_content">
    

    
         <div class="post">
                <h3><a href="#">Designing For, and As, a Color-Blind Person</a></h3>
                <span class="postInfo">by <a href="#">Connor Turnbull</a> on Jul 22nd 2011 with 2 comments</span>
                <p>Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from...</p>
                <a class="more" href="#">Read More</a>
                <span class="line"></span>
                <a href="#">12 Likes 14 Comments Share</a>
                <span class="line"></span>
        </div><!--End Blog Post-->
        
    </div><!--End Tab 1-->

单个博客帖子具有一个名为“ post”的类，并且位于div中，类为“ tab1”，因为此选项卡将位于默认登录页面上。然后，它包含几个锚点和跨度标签，这将使我们能够使用原生的“ a la facebook”样式化日期和博客作者等项目。完成此“帖子” div后，我们可以简单地将其复制并粘贴到其余的帖子中。不要费力地将代码阻塞，将其保持在三到四个左右，因为这会使我们对代码的外观和感觉有所了解。我还使用“ line”类创建了一个跨度，该跨度只是一条水平线，我们将在整个应用程序中使用。

步骤6：其他页面标签

我们的其他页面标签主要由h3，锚点和段落标签组成：

<div id="tab2" class="tab_content">
    
    <h3>About</h3>
    <p>Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. We publish tutorials that not only produce great results and interfaces, but explain the techniques behind them in a friendly, approachable manner.</p>
    <p>Web design is a booming industry with a lot of competition. We hope that reading Webdesigntuts+ will help our readers learn a few tricks, techniques and tips that they might not have seen before and help them maximize their creative potential!</p>
    <p><strong>Webdesigntuts+ is part of the Tuts+ Network</strong></p>
	
    </div><!--End Tab 2 -->

步骤7：搜寻筛选器

<form action="" method="get">
            <input name="search" class="search" placeholder="Filter webdesigntuts+ posts">
            </form>

在侧边栏的顶部，我们有一个站点过滤器搜索-它是由一个简单的表格组成的。我们将在本教程的下一部分使用jQuery来实现此目的。然后，表格后面是另一条水平线以及一个跨度和段落文本，以显示“赞”计数。

步骤8： Facebook赞和按钮

<a class="button left" href="http://webdesign.tutsplus.com/" target="_blank"><span class="buttonimage left"></span>Website</a>
            <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=253432341349745&amp;xfbml=1"></script><fb:like href="http://apps.facebook.com/fbtuttts"layout="button_count" width="75" show_faces="true" action="like" font="lucida grande"></fb:like>
            <a class="button right" href="#"><span class="buttonimage left"></span>Logout</a>

对我们来说幸运的是，Facebook使将“赞”按钮集成到我们的应用程序变得非常简单。您可以在Facebook Developer Plugins上为自己的按钮或其他社交插件生成代码。生成代码后，将其带入html。您可能需要添加一些CSS来放置它，但是在这种情况下，这是不必要的

步骤9：标签页眉

<div class="tabHeader">Categories</div>
            
                <ul>
                    <li><a href="#">Sample Cat 1</a></li>
                    <li><a href="#">Sample Cat 2</a></li>
                    <li><a href="#">Sample Cat 3</a></li>
                    <li><a href="#">Sample Cat 4</a></li>
                    <li><a href="#">Sample cat 5</a></li>
                </ul>
            
            <div class="tabHeader">A Little Bit About Us</div>

如果您已经阅读了本教程的第一部分（如果到目前为止，我想您已经做到了），那么您将听到我在谈论可重用性。这些标签页标题比我们代码的其他任何部分都定义的更多。与Facebook一样，我们可以重用这些选项卡标题并轻松实现它们。如果您想在网站上添加一个快速的附加部分，它们将非常方便。

步骤10： CSS

Code Block showing tabs headers

现在是时候进入我们HTML的样式了。由于Facebook的样式简单，因此没有太多CSS。我将其分为几部分供您查看。同样重要的是要指出，在此阶段，Facebook在缓存CSS时进行测试和调整CSS可能会很烦人，这意味着当您上传样式表的新版本时，它仍然会呈现旧版本。虽然不完美；我使用的解决方法是在索引文件中包含的样式表的末尾添加'？version = 1'。每次对CSS进行更新并上传时，还必须更新索引文件中的版本号。

步骤11：设定

我们通过创建包装器和一些我经常添加的类来开始CSS，以便能够左右浮动项目。

/*-----------------------------------------------------------------------------------*/
/*	Setup
/*-----------------------------------------------------------------------------------*/
.wrapper{
width: 760px;
height:200px;
margin-left:auto;
margin-right:auto;
padding-top:20px;

	
}
.right{
float:right;	 /* A class I always add to float items right */
}
.left{
float:left;		 /* To float items left*/
}

步骤12：构建基块

我们主要内容的组成部分如下：

/*-----------------------------------------------------------------------------------*/
/*	Setup
/*-----------------------------------------------------------------------------------*/
.wrapper{
width: 760px;
height:200px;
margin-left:auto;
margin-right:auto;
padding-top:20px;

	
}
.right{
float:right;	 /* A class I always add to float items right */
}
.left{
float:left;		 /* To float items left*/
}

/*-----------------------------------------------------------------------------------*/
/*	Building Blocks
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*	Typography
/*-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/*	Tabs
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*	Buttons
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*	Extra Components
/*-----------------------------------------------------------------------------------*/

步骤13：排版

可能是我们Facebook应用程序中最重要CSS部分之一。弄错了，这会破坏您应用的本机效果。到Facebook看看，并根据您的要求选择最合适的字体大小。

/*-----------------------------------------------------------------------------------*/
/*	Typography
/*-----------------------------------------------------------------------------------*/

a{
cursor: pointer;
color: #3B5998;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
strong{
font-weight:bold;
}
em{
font-style:italic;
}
h3{
font-size: 16px;
font-weight:bold;
line-height: 1.1em;	
margin-bottom:5px;
}
.postInfo{
display:block; /* Spans are inline element so needs to be changed to block in order for the margin to work */
color:#808080;
margin-top:5px;
margin-bottom:10px;
}
p{
font-size: 12px;
line-height: 1.5em;
margin-bottom:18px;
}
.line{
display:block;
width:100%;
height:1px;
background-color:#ccc;
margin-top:5px;
margin-bottom:5px;
}
.more{
color:#3B5998;
font-weight:bold;

}
.likesCount{
font-size:16px;	
font-weight:bold;
}

步骤14：标签

/*-----------------------------------------------------------------------------------*/
/*	Tabs
/*-----------------------------------------------------------------------------------*/
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 19px; /*--Set height of tabs--*/
	border-bottom: 1px solid #E2E2E2;
	border-left: 1px solid #E2E2E2;
	width: 100%;
	margin-bottom:20px;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 18px; /*--Minus 1px from the height of  ul--*/
	line-height: 18px; /*--aligns text within the tab--*/
	border: 1px solid #E2E2E2;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #f2f2f2;
	margin-right:5px;
	min-width:73px;
	text-align:center;
	
}
ul.tabs li:first-child{ /*--Removes the left border from the first child of the list--*/
border-left:none;	
	
}
ul.tabs li a {
	text-decoration: none;
	color: #333333;
	display: block;
	font-size: 11px;

	padding-right:5px;
	padding-left:5px;

	outline: none;
}
ul.tabs li a:hover {
	background: #fff;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; 
	color:#3B5998;
}
ul.tabs li.active a{
	color:#3B5998;	
}

步骤15：按钮

按钮是Facebook应用程序CSS的另一个组成部分。我确定您会在您的应用程序中使用其中一些。我们不是使用按钮而是使用图像中的span类来创建锚标记。

/*-----------------------------------------------------------------------------------*/
/*	Buttons
/*-----------------------------------------------------------------------------------*/
.button{
	background-color:#ECEEF5;
	border:1px solid #CAD4E7;
	text-decoration:none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
padding: 2px 3px 2px 2px;
margin-right:5px;
}
.button:hover{
	border:1px solid #9DACCE;
	text-decoration:none;
	
}
.buttonimage{
background:url(../images/icon.png);
color: #3B5998;
display: block;
width:12px;
height:12px;
margin-right:3px;
margin-top:1px;
margin-bottom:1px;
margin-left:2px;
	
}

步骤16：额外的元件

/*-----------------------------------------------------------------------------------*/
/*	Extra Components
/*-----------------------------------------------------------------------------------*/
.logo{
width:379px;
height:60px;
margin-left:auto;
margin-right:auto;
margin-bottom:26px;
position: relative;
-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
}
.search{
padding: 1px 5px 2px 0;
margin-bottom:20px;
width:240px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
.tabHeader{
background-color: #F2F2F2;
border-top: solid 1px #E2E2E2;
padding: 4px 5px 5px;
margin-top:15px;
margin-bottom:10px;
}
.profileimage{
float:left;	
margin-right: 5px;
}

结论...

因此，有了它，我们现在将我们的Facebook应用程序编码为HTML / CSS。我希望您喜欢阅读本教程的这一部分，并且希望您现在对如何将Facebook的样式转换为CSS有了很好的了解。通过查看和使用Facebook的一些CSS属性，我们真的能够理解，在正确的位置中只有几行代码如何才能为我们的应用提供本机的外观和感觉，它们可以舒适地放置在Facebook内并遵守Facebook的设计原则。

在本教程的下一部分中，我们将学习如何将其实现为Facebook上的本地博客应用程序。我们将使用YQL和Facebook Graph API进行此操作。我还将向您展示一些提示和技巧，以使您的应用程序具有一些甜美的jQuery优点。所以，直到下一部分，快乐的编码偷看！