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

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

آخر تحيين: 29-01-2014

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


شيفرة html لقلب الصفحة

<div id="wrapper">   <!--  قلب الصّفحة -->
  <nav  class="navbar"> </nav>  <!-- القائمة الأفقية -->
 
   <div class="main-content">
      <aside class="sidebar">   <!-- العمود الأيمن -->

      </aside>

     <section class="contents"> <!-- المحتوى الرّئيسي -->

     </section>
   </div>
</div>

سنقوم أولا بتحديد تموضع الكتل الثلاث : القائمة الأفقية و العمود الأيمن ثم المحتوى الرّئيسي ، و بعدها سنضيف لها بعض الجمالية :

القائمة الأفقية navbar.

شيفرة html للقائمة الأفقية :

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

شيفرة CSS

.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;
}

ما يهم في كل هذه الشيفرة هو أنني استعملت الخاصية display للتحكم في عناصر اللائحة . بما أننا قمنا بتحديد طول القائمة ، يمكننا أيضا استعمال الخاصية float و ستعطي نفس النتيجة .
ما تبقّى من الشيفرة عبارة عن تنميق .



العمود الأيمن sidebar.

أولا لنضيف بعض المحتوى حتى يظهر عملنا .

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

قبل معالجة العمود الأيمن لنضيف بعض الأنماط لتزيين الوسم الأب

.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);
}

الخاصيات الثلاث الأولى هي المهمة ، و قد استعملت هنا أيضا الخاصية display ، لترصيف العمود الأيمن مع المحتوى الرّئيسي
ثم نضيف بعض الأنماط لتنظيم و تزيين المجتوى

#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;
}
h2 
{
   font-size:1.8em;
   color:orange;
   padding-top:6px;       
}
.width-200 {width:200px;}
.width-150 {width:150px;}
.fleche {
   position:relative;
   right:85%;
   font-family:trebuchet Ms;
   color:#99d006;
}


المحتوى الرّئيسي contents.

نفس الشيء ، سنضيف المحتوى دفعة واحدة ثم نقوم بتنظيمه :

<section class="contents"> <!-- المحتوى الرّئيسي -->
   <div class="auteur">
     <p>
        <img src="images/avatar.jpg" class="float-right" alt="">
         الكاتب : د.علاّمة عارف <br>البلد : درب التبانة <br>
     </p>
     <p>تاريخ النشر : 16-4-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>
     <hr class="clearFix">
     <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="venus"></p>		
       </div>		
       <div class="drs-box width-150"> <h4>   Neptune  </h4> 
         <p><img src="images/planetes/neptune.jpg"  alt="neptune"></p>		
       </div>		
       <div class="drs-box width-150"> <h4> Jupiter </h4> 
          <p><img src="images/planetes/jupiter.jpg"  alt="jupiter"></p>		
       </div>	
       <div class="drs-box width-150"> <h4> Earth </h4> 
          <p> <img src="images/planetes/earth.jpg"  alt="earth"></p>		
       </div>
       <div class="drs-box width-150"> <h4> Saturn </h4>
          <p><img src="images/planetes/saturn.jpg"  alt="saturn"></p>		
       </div>
     </div>
    </article>
</section>

نقوم بتنظيم المحتوى الرئيسي أولا

.contents{
   display: inline-block;
   vertical-align:top;
   width:770px;
   padding:10px 20px 10px;
}

ثم نظيف له الأنماط لتنميقه


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;
}
.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;
}
.fleche {
   position:relative;
   right:85%;
   font-family:trebuchet Ms;
   color:#99d006;
}
.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;
   display:block;
   margin:auto;
   border-radius:10px;
}


قدم الصفحة footer.

نفس الشيء لا جديد هنا نفس الخاصيات التي استعملناها سابقا

<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>
.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;
}


لتصحيح بعض تصرفات أنترنت إكسبلورر في إصداراتها القديمة ، أضيفوا هذه الشيفرة قبل وسم footer <div class="ie-clear"></div> ، ثم في أعلى الصفحة بين وسم head أضيفوا هذه الشيفرة

<head>

<!--[if lt IE 9]>
  ....
  <style>
    .sidebar{float:right;}
    .contents{float:left;}
    .ie-clear{clear:both;}
    .main-content{display:inline-block;}
  </style>
<![endif]-->

</head>
في الصفحة الموالية سأعطيكم شيفرة html و CSS كاملتين ، و إذا كان لديكم أي تساؤل ، أو تعديل ، يمكنكم مشاركتنا إياه في منتدىHTML-CSS