كيفاش نصاوب واجهة على شكل موقع التواصل الإجتماعي فيسبوك الجزء الاول

imadbelasri Html
HC

فهاد الدرس غادي نشوفو كيفاش نقادو الواجهة ديال موقع للتواصل الإجتماعي على شكل فيسبوك بإستعمال Html & Css المشروع عبارة عن design يعني مكاينش تواصل مع قاعدة البيانات الهدف ديالو هوكيفاش تنمي القدرات ديالك فhtml & css.


نظرة سريعة بالفيديو


- إنشاء الملفات الأساسية

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه Social_Network فهاد المجلد غادي تزيد 5 ديال المجلدات css و js و includes و fonts وimages من بعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css والملف bootstrap.min.js ف js و الملفات لي فالمجلد fonts ف fonts من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php وآخر تسميه navigation.php وآخر main.php وsidebar.php تزيدهم فincludes الملف main.php الكود ديالو هو :

                                                    
                                                        <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>Réseau Social Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>


                                                    
                                                

- الملف header.php

الملف header.php غادي يكون هو الأساس ديال كل الصفحات ديالنا ولي غادي يربط ملفات css بالملفات ديالنا و فالمجلد css غادي نزيد واحد الملف نسميه style.css غادي يكون الكود ديالهم هو:

                                                        
                                                            <header>
  <div class="container">
    <form class="form-inline">
        <div class="form-group">
          <label class="sr-only" for="exampleInputEmail3">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
        </div>
        <div class="form-group">
          <label class="sr-only" for="exampleInputPassword3">Mot de passe</label>
          <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Passe">
        </div>
        <button type="submit" class="btn btn-default">Connexion</button><br>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Restez connecté
          </label>
        </div>
    </form>
  </div>
</header>

//includes/style.css code

header{
  background-image: linear-gradient(#04519b,#044687 60%,#033769);
  color:#fff;
  min-height: 100px;
  padding-top: 25px;
}
header form{
  float: right;
}
.panel-heading{
    background-image: linear-gradient(#04519b,#044687 60%,#033769);
    color:#fff !important;
}
.comment-avatar img{
  width: 50px;
  margin-right: 5px;
}
.friends li{
  list-style: none;
  padding: 0 5px;
  display: inline;
  float: left;
}
.friends img{
  width: 55px;
}
.bubble{
  position: relative;
  width: 500px;
  min-height: 65px;
  padding: 15;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.bubble::after{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #fff;
  display: block;
  width: 0;
  z-index: 1;
  margin-top: -15px;
  left: -15px;
  top: 50px;
}
.bubble::before{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  display: block;
  width: 0;
  border-color: transparent #ccc;
  z-index: 0;
  margin-top: -15px;
  left: -16px;
  top: 50px;
}
.post-actions{
  margin: 5px;
}
.pointer p{
  padding: 10px 10px 10px 10px;
}
.comment-form .form-group{
  width: 90%;
}
.comment-form  input[type='text']{
  width: 100%;
}
.comment{
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 3px;
  margin: 5px 0;
  overflow: auto;
  width: 100%;
}
.groups img{
  width: 80px;
  float: left;
  margin-right: 15px;
}
.group-item{
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  overflow: auto;
}
footer{
  background: #f4f4f4;
  height: 90px;
  color: #04519b;
  font-weight: bold;
  text-align: center;
  padding-top: 40px;
  margin-top: 30px;
  border-top: 7px solid #04519b;
}
.members .member-row{
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.members img{
  margin-bottom: 5px;
}
@media(min-width:991px){
  .members p{
    padding-top: 40px;
  }
}
.profile li{
  list-style: none;
  line-height: 1.9em;
}
.photos{
  margin: 0;
  padding: 0;
}
.photos li{
  list-style: none;
  float: left;
  margin: 5px;
  width: 23%;
}
.photos img{
  width: 100%;
}

                                                        
                                                    

- الملف footer.php

هاد الملف غادي يكون هو الأساس ديال كل الصفحات ديالنا ولي غادي يربط ملفات js بالملفات ديالنا.

                                                        
                                                             <footer>
       <div class="container">
          <p>Darija Coding  © 2016</p>
       </div>
 </footer>
</div><!-- /.container -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ekko-lightbox.min.js"></script>
    <script>
        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
             event.preventDefault();
             $(this).ekkoLightbox();
        });
    </script>
  </body>
</html>
                                                        
                                                    

- الملف navigation.php

هاد الملف غادي تكون فيه القائمة لي غادي تمكن من تصفح جميع الصفحات.

                                                        
                                                            <nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">Accueil</a></li>
        <li><a href="members.php">Membres</a></li>
        <li><a href="groups.php">Groups</a></li>
        <li><a href="profile.php">Profile</a></li>
        <li><a href="photos.php">Photos</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
                                                        
                                                    

- الملف sidebar.php

هاد الملف غادي يكون هو الأساس ديال كل الصفحات ديالنا ولي غادي يزيد واحد الجزء فجنب الصفحات ديالنا كيتضمن بعض المعلومات المشتركة ما بين كل الصفحات الكود ديالو هو :

                                                        
                                                            <div class="col-md-4">
	<div class="panel panel-default friends">
	  <div class="panel-heading"><div class="panel-title">Amis</div></div>
	  <div class="panel-body">
	    <ul>
	      <li><a href="profile.html" class="thumbnail"><img src="images/user.png" alt=""></a></li>
	        <li><a href="profile.html" class="thumbnail"><img src="images/user.png" alt=""></a></li>
	          <li><a href="profile.html" class="thumbnail"><img src="images/user.png" alt=""></a></li>
	            <li><a href="profile.html" class="thumbnail"><img src="images/user.png" alt=""></a></li>
	              <li><a href="profile.html" class="thumbnail"><img src="images/user.png" alt=""></a></li>
	                <li><a href="profile.html" class="thumbnail"><img src="images/user.png" alt=""></a></li>
	    </ul>
	    <div class="clearfix"></div>
	    <a href="#" class="btn btn-primary">Voir tous les amis</a>
	  </div>
	</div>
	<div class="panel panel-default groups">
	  <div class="panel-heading"><h3 class="panel-title">Mes Groupes</h3></div>
	  <div class="panel-body">
	    <div class="group-item">
	      <img src="images/groupe.jpg"  class="thumbnail" alt="">
	      <h4><a href="#">Goupe Amis</a></h4>
	      <p></p>
	    </div>
	    <div class="clearfix"></div>
	    <div class="group-item">
	      <img src="images/groupe.jpg" class="thumbnail" alt="">
	      <h4><a href="#">Goupe Amis</a></h4>
	      <p></p>
	    </div>
	    <div class="clearfix"></div>
	    <div class="group-item">
	      <img src="images/groupe.jpg"  class="thumbnail" alt="">
	      <h4><a href="#">Goupe Amis</a></h4>
	      <p></p>
	    </div>
	  </div>
	</div>
</div>