تصميم ديزاين كامل للموقع : التصحيح

شيفرة الصفحة النموذجية كاملة

آخر تحيين: 25-11-2014

html الجداول تفاصيل قلب و قدم الصفحة


سأعطيكم الشيفرات التي أنشأنا بها صفحتنا . و تبقى قابلة للتعديل و النقاش . لا تتردّدوا في طرح أي تساؤل أو تغيير أو تعديل في منتدى HTML-CSS


index.html

<!DOCTYPE html>
<html dir="rtl">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css">
 <!--[if lt IE 9]>
  <script  type="text/javascript" src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <style>
   .sidebar{float:right;}
   .contents{float:left;}
   .ie-clear{clear:both;}
   .main-content{display:inline-block;}
  </style>
 <![endif]-->
</head>

<body>
  <header class="header">   <!-- رأس الصّفحة -->
    <div class="fixed-header">
      <div class="middle-header drs-box">
	<h1 class="limes"> Adipisicing Elit Distinctio </h1>
        <p> Lorem ipsum dolor <span class="jaune-l">sit amet</span>, consectetur atumeur <span class="white">adipisicing</span> elit. 
             Distinctio, quos, fuganeque autem <span class="jaune-l">culpa numquam </span>adipisci  </p>
      </div>
      <div class="left-logo"></div>
      <div class="right-logo">
        <p>
         <a href="#"><img src="images/facebook.png" alt="Facebook"></a>
         <a href="#"><img src="images/twitter.png" alt="Twitter"></a>
         <a href="#">  <img src="images/flicker.png" alt="Flicker"></a>
         <a href="#"><img src="images/rss.png" alt="RSS"></a><br>
         <strong>dorossinet.com</strong>
        </p>
      </div>
    </div>
  </header>
<div id="wrapper">   <!--  قلب الصّفحة -->
 <nav  class="navbar">  <!-- القائمة الأفقية -->
  <ul>
   <li><a href="#" class="home">الرّئيسية</a></li>
   <li><a href="#" class="musica">الكون</a></li>
   <li><a href="#" class="poesie">الحياة</a></li>
   <li><a href="#" class="cinema">البيولوجبا</a></li>
   <li><a href="#" class="theatre">الجيولوجيا</a></li>
   <li><a href="#" class="architecture">مختلفات</a></li>
  </ul>
 </nav> 
 <div class="main-content">
  <aside class="sidebar">  <!-- العمود الأيمن للصفحة -->
    <div class="drs-box width-150"><h2> من نحن ؟ </h2></div>
     <div id="sidebarnav">
       <nav>
        <ul>
         <li><a href="#"> <span class="fleche">>> </span> الإستقبال</a></li>
         <li><a href="#"> <span class="fleche">>> </span> الخدمات</a></li>
         <li><a href="#"> <span class="fleche">>> </span> الإتصال بنا</a></li>
        </ul>
       </nav>
       <div class="drs-box width-150"><br><h3> آخر المواضيع </h3></div>
       <p>
         مستعل المقنتر غليت لي<a href="#"> الرابط إلى  </a>سشال التسيه  ، نم ابا لياتس كولر معيار نع. يض تاسيب <br> <a href="#"><img src="images/milky_way.jpg" alt=""></a> <br>  تاسيب غعثصر ال يسك غثقص لغهض بخغه فثعلا منك <a href="#"> الوصلة </a> .ستعل المقنتر غليت ليسشال التسيه ، نم ابا لياتس كولر
       </p>
     </div>
    </aside>
    <section class="contents"> <!-- المحتوى الرّئيسي -->
      <div class="auteur">
	<p>
         <img src="images/avatar.jpg" class="float-right" alt="">
           الكاتب : د.علاّمة عارف <br> البلد : درب التبانة <br>
        </p>
        <p> تاريخ النشر : 28-01-2014 </p>
       </div>
       <article>
        <p class="width-200 inline">
         <strong><u>المستعال بيسفقص</u></strong><br>
           مستعل المقنتر غليت ليسشال التسيه  ، نم ابا لياتس كولر معيار نع. يض تاسيب غعثصر ال يسك غثقص لغهض بخغه فثعلا منك  غليت ليسشال التسيه ، لياتس 
        </p>
        <p class="width-200 inline">
         <strong><u> من ذكرى ايلسشلات : </u></strong><br>
           مستعل المقنتر غليت ليسشال التسيه  ، نم ابا لياتس كولر معيار نع. يض تاسيب غعثصر ال يسك غثقص لغهض بخغه فثعلا منك  مستعل المقنتر غليت ليسشا
       </p>
       <p class="float-right"><img src="images/galaxie.jpg" alt=""></p>
       <h4> مجرة درب التبانة <small><q> د.علاّمة عارف </q></small></h4>
       <p>
        قنتر غليت ليسشال التسيه  ، نم ابا لياتس كولر معيار نع. يض تاسيب غ : قنتر غليت ليسشال التسيه  ، نم ابا لياتس كولر معيار نع. يض تاسيب غ معيار نع. يض تاسيب غعثصر ال يسك 
       </p><div  class="clearFix"></div><hr>
       <!--
         <video width="350px" controls>
            <source src="voyage_dans_l_univers.ogv" type="video/ogg">
        </video>
       -->
       <h3> كوكب الأرض </h3>
       <p>
       مستاسيب غعثصر ال يسك غثقص لغهض بخغه فثعلا منك ثصقيب البتعمة . تعل المقنتر غليت ليسشال التسيه  ، نم ابا لياتس كولر معيار نع. يض تاسيب غعثصر ال يسك غثقص لغهض بخغه فثعلا منك ثصقيب البتعمة .ستعل المقنتر غليت ليسشال التسيه  ، نم ابا لياتس كولر معيار نع. يض تاسيب غعثصر ال يسك غثقص لغهض بخغه فثعلا منك ثصقيب البتعمة .		 
       </p><hr>
       <div class="centrer">
	 <div class="drs-box width-150"> <h4> Venus </h4>
	   <p><img src="images/planetes/venus.jpg"  alt=""></p>
         </div>		
         <div class="drs-box width-150"> <h4>   Neptune  </h4>
           <p><img src="images/planetes/neptune.jpg"  alt=""></p>	
         </div>
         <div class="drs-box width-150"> <h4> Jupiter </h4>
           <p><img src="images/planetes/jupiter.jpg"  alt=""></p>
         </div>
         <div class="drs-box width-150"> <h4> Earth </h4>
           <p><img src="images/planetes/earth.jpg"  alt=""></p>
         </div>
         <div class="drs-box width-150"> <h4> Saturn </h4>
           <p><img src="images/planetes/saturn.jpg"  alt=""></p>
         </div>
	</div>
      </article>
    </section>
   </div>
</div>
<footer class="footer"> <!-- قدم الصفحة -->
 <nav>
  <ul>
    <li class="limes">Galleries</li>
    <li> Lorem ipsum </li>
    <li> sit amet </li>
    <li> consectetur </li>
    <li> adipisicing elit </li>
    <li> quos </li>
    <li> Distinctio </li>
  </ul>
  <ul>
    <li class="limes"> Slide show </li>
    <li>  dolor  </li>
    <li> sit amet </li>
    <li> consectetur </li>
    <li> adipisicing  </li>
    <li> quos </li>
    <li> Distinctio </li>
  </ul>
  <ul>
    <li class="limes"> Images </li>
    <li>  ipsum  </li>
    <li>  amet </li>
    <li> consectetur </li>
    <li>  elit </li>
    <li> quos </li>
    <li> Distinctio </li>
  </ul>
  <ul>
    <li class="limes"> Videos </li>
    <li> Lorem dolor  </li>
    <li> sit amet </li>
    <li> consectetur </li>
    <li>  elit </li>
    <li> quos </li>
    <li> Distinctio </li>
  </ul>
  <ul>
    <li class="limes"> Tools </li>
    <li> Lorem   </li>
    <li> sit amet </li>
    <li> consectetur </li>
    <li> adipisicing  </li>
    <li> quos </li>
    <li> Distinctio </li>
  </ul>	
 </nav>
 <section> Copyright<sup>©</sup> <a href="http://dorossinet.com" > dorossinet.com  </a>, 2014  </section>
</footer>
</body>
</html>

style.css

/*
 ** Designed by : http://dorossinet.com
 ** Source : http://dorossinet.com/developpement-web/tutorial/html5-css3/html5-css3-layout
 ** 14-01-2014
 ** Style chocolat .
 **
*/
html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, fieldset, form, label, legend {
  margin:0;
  padding:0;
  border:0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}

body {
   font-family:'Arabic Transparent','Arabic Fixed',Arial,Helvetica, sans-serif;
   color:#000;
   font-size:62%;
   background:url('images/body.png') repeat-y;
}
.header {
   width:100%;
   height: 120px;
   background: url('images/responsive-header.png') repeat-y;
   border-bottom:4px solid #5f554c;
}
.fixed-header{
   width: 980px;
   height: 120px;
   margin:0 auto;
   background: url('images/header.png') repeat-y;
}
.left-logo{
   width:200px;
   height:120px;
   float:left;
   background: url('images/logo.png') no-repeat;
}
.right-logo {
   padding-top:20px;
}
.right-logo strong {
   font-size:18px;
   padding-right:8px;
   color:#322101;
}
.middle-header {
   width:300px;
   position:absolute;
   top:20px;
   left:37%;
   text-align:left;
   font-size: 1.3em;
   font-family: 'Trebuchet Ms';
}
#wrapper{
   width: 980px;
   margin:0 auto;
   font-size: 1.6em;
   padding:0 5px;
}
.footer{
   width: 100%;
   font-size: 1.6em;
   height: 250px;
   color: #c9c2b9;
   text-align:left;
   font-family:'Times New Roman';
   background: url('images/footer.png') repeat-x;
   border-top:4px solid #7b736a;
}
.header, .footer{
   min-width: 985px;
}
h1
{
   font-size:2.2em;
   color:blue;
   margin-right:15px;
}

h2 
{
   font-size:1.8em;
   color:orange;
   padding-top:6px;       
}
h3 
{
   font-size:1.7em;
   color:green;
   margin:0;
}     
h4 
{
   font-size:1.6em;
   color:gray;
   text-align:right;
   margin:0;
}
hr 
{
   border-top:1px solid #e8dfd1;
   border-bottom:1px solid #fbf7ef;
   margin: 25px 0;
}
p {
   padding:5px;
   color:#6f624d;
}
.drs-box h1,.drs-box h2,.drs-box h3,.drs-box h4,.drs-box h5{
   color: #5d5135;
   font-size:17px;
   padding:6px 0;
   background:#c2d023;
   text-align:center;
   border-radius:6px;
   font-family:'Times New Roman';
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}
.header  h1,.header  h1 a , .header  h2,.header  h2 a {
   padding:0;
   margin:0;
   color:#4a463b;
   text-decoration:none;
}
.drs-box {
   display:inline-block;
}
.drs-box p{
   padding: 4px;
   color:#827c71;
   background:#36332e;
   border-radius:6px; 
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}
.navbar {
   height: 50px;
   font-size: 1.3em;
   background:#586328 url('images/responsive-header.png') repeat-y;
   -webkit-box-shadow:0 4px 20px rgba(15, 15, 15, 0.65);
   -moz-box-shadow:0 4px 20px rgba(15, 15, 15, 0.65);
   box-shadow:0 4px 20px rgba(15, 15, 15, 0.65);
   border-bottom:4px solid #7b736a;
}

.navbar ul {
   text-align: center;
}.navbar li {
   display: inline-block;
}
.navbar li a {
   color: #968f88;
   display: block;
   padding: 15px 0 26px 0;
   text-align: center;
   text-decoration: none;
}
.navbar li a:hover {
   color: #fff;
}
.navbar li,.navbar li a {
   width:140px;
   line-height:8px;
   border-left:1px groove #685d52;
}
.navbar li:last-child,.navbar li a:last-child{
  border-left:0;
}
.main-content {
   background-color:#fff;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   border-top-right-radius:0;
   border-top-left-radius:0;
   -webkit-box-shadow:0 4px 20px rgba(15, 15, 15, 0.65);
   -moz-box-shadow:0 4px 20px rgba(415, 15, 15, 0.65);
   box-shadow:0 4px 20px rgba(15, 15, 15, 0.65);
}
.sidebar {
   display: inline-block;
   vertical-align:top;
   width:150px;
   padding:10px 5px;
   line-height:14pt;
   color:#bd998a;
   font-family:Andalus;
   -webkit-box-shadow:0 1px 4px rgba(49, 50, 42, 0.35);
   -moz-box-shadow:0 1px 4px rgba(49, 50, 42, 0.35);
   box-shadow:0 1px 4px rgba(49, 50, 42, 0.35);
}
#sidebarnav ul li,#sidebarnav li ul a   {
   width:150px;    
   list-style-type:none;
}  
#sidebarnav li a {
   display:block;
   height:30px;
   color:#333;
   text-decoration:none;
   text-align:right;
   padding:10px 10px 2px;
   border-top:1px solid #f2ede8;
}
#sidebarnav li a:hover  {
   color:#d6cbb9;
   background-color: #796e5c;
}
.width-200 {width:200px;}
.width-150 {width:150px;}
.fleche {
   position:relative;
   right:85%;
   font-family:trebuchet Ms;
   color:#99d006;
}
.contents{
   display: inline-block;
   vertical-align:top;
   width:770px;
   padding:10px 20px 10px;
}
.contents  h1:before, .contents  h2:before, .contents  h3:before {
  content:url('images/earth.png');
}
article p {
   text-indent:40px;
}
.auteur {
   width:220px;
   height:100px;
   font-size:14px;
   font-family: Arial;
   float:left;
   padding:5px;
   background:silver;
   border-radius:10px;
   background:#f8f8fc;
   border-color:gray;
   -webkit-box-shadow:0 1px 4px rgba(11, 127, 2, 0.35);
   -moz-box-shadow:0 1px 4px rgba(11, 127, 2, 0.35);
   box-shadow:0 1px 4px rgba(11, 127, 2, 0.35);
}
.auteur img {padding-left:8px;}
.photos{max-width:500px;background:silver;}
.jaune-l{color: #dbee03;}
.white{color: #fff;}
.float-right{float: right;}
.inline {display:inline-block;}
p.inline {text-indent:0;margin:15px 20px;}
.clearFix{clear:both;}
.centrer p{text-indent:0;}
.centrer img {
   width:100px;
   height:100px;
   margin:auto;
   display:block;
   border-radius:10px;
 }
 .footer{
    width: 100%;
    font-size: 1.6em;
    height: 250px;
    color: #c9c2b9;
    text-align:left;
    font-family:'Times New Roman';
    background: url('images/footer.png') repeat-x;
    border-top:4px solid #7b736a;
}
.footer nav {text-align:center;}
.footer nav ul {display:inline-block;margin:20px 40px;}
.footer nav ul  li{display:block;line-height: 24px;font-weight:normal;text-align:left;}
.limes{
  color: #99cd00;
  font-size: 18px;
  font-family:'trebuchet Ms';
}
.footer section{
  text-align:center;
  color: #2f2b20;
  background:#bbb4ad;
  padding:10px;
  border-top:5px solid #7b736a;
}
سنعود للموضوع لاحقا في هذا الدرس لتحسين هذا التصميم و جعله مرنا يتناسب مع جميع أحجام الشاشات