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

تفاصيل رأس الصفحة

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

تفاصيل قلب و قدم الصفحة الهيكل الأساسي للصفحة


رأس الصفحة

سأضع أمامكم التقسيم الذي اعتمدته لرأس الصفحة :

<header class="header">   <!-- رأس الصّفحة -->
   <div class="fixed-header">
      <div class="middle-header drs-box"></div>
      <div class="left-logo"></div>		
      <div class="right-logo"></div>
   </div>
</header>

قمت بتقسيم header إلى ثلاث مناطق :

  • middle-header : محتوى وسط رأس الصفحة
  • left-logo : شعار يسار الكتلة
  • right-logo : يمين الكتلة
  • و هذه الكتل الثلاث وضعتها كلها داخل كتلة "fixed-header"
    لنظيف قليلا من المحتوى داخل كل كتلة ، و بعدها سنقوم بالتحكم في نمطها .

      <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>
            <strong>dorossinet.com</strong>
          </p>
        </div>
      </div>
      </header>

    fixed-header

    .fixed-header{
       width: 980px;
       height: 120px;
       margin:0 auto;
       background: url('images/header.png') repeat-y;
    }

    left-logo, middle-header, right-logo

    لتموضع هذه الكتل بشكل أفقي ، لديكم عدة خيارات ، كاستعمال الخاصية display أو float أو position .
    في مثالي استعملت الخاصية float على left-logo و بالتالي فالكتلة right-logo ستتموضع تلقائيا يمين الصفحة .

    .left-logo{
       width:200px;
       height:120px;
       float:left;
       background: url('images/logo.png') no-repeat;
    }

    ما يهمنا في هذه الشيفرة هو الخاصية float و صورة شعار الموقع .
    بعدها أضفت بعض التنميق لكتلة right-logo :

    .right-logo {
       padding-top:20px;
    }
    .right-logo strong {
       font-size:18px;
       padding-right:8px;
       color:#322101;
    }

    بقي لنا تموضع الكتلة middle-header وسط الصفحة :

    .middle-header {
       width:300px;
       position:absolute;
       top:20px;
       left:37%;
       text-align:left;
       font-size: 1.3em;
       font-family: 'Trebuchet Ms';
    }

    استعملت الخاصية position و أعطيتها القيمة المطلقة absolute . ثم قمت بتحديد تموضعها الأفقي بالنسبة المؤية .


    يمكنكم استعمال الخاصية display لتحديد تموضع الكتل الثلاث أفقيا .

    الأهم تم إنجازه لم يبقى لكم إلا إضافة قليل من الأنماط من باب التنميق ، أضيفوا هذه الشيفرة ، و حاولوا على الأقل فهم محتواها

    h1
    {
       font-size:2.2em;
       color:blue;
       margin-right:15px;
    }
    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;
    }
    .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;
    }
    .header h1, .header h1 a, .header h2, .header h2 a {
       padding:0;
       margin:0;
       color:#4a463b;
       text-decoration:none;
    }
    .limes{
      color: #99cd00;
      font-size: 18px;
      font-family:'trebuchet Ms';
    }
    .jaune-l{color: #dbee03;}
    .white{color: #fff;}