تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: اكتشاف تقنيات تخطيط أخرى


الصفحة السابقة

اليوم ، Flexbox هو أداة التخطيط التي أوصي بها ... ولكن يجب أن تعرف دائمًا تقنيات التخطيط الأخرى التي سأقدمها في هذا الفصل. التقنيات القديمة ، لديهم ميزة التعرّف على الإصدارات القديمة من المتصفحات. أخيرًا ، إذا كان عليك إدارة كود "قديم" ، فستحتاج إلى معرفة تقنيات تخطيط المواقع هذه!

من المحتمل أن يكون هذا الفصل أكثر فائدة إذا كنت بحاجة إلى إدارة المواقع القديمة. إذا كنت تعمل في مشروع جديد ، فإنني أوصي باستخدام تخطيط يستند إلى Flexbox بدلاً من ذلك!

تحديد الاماكن العائمة


هل تتذكر الخاصية float؟ استخدمناها لتعويم صورة حول النص (الشكل التالي).

css html text

تطفو الصورة حول النص مع خاصية التعويم

اتضح أن هذه الخاصية تستخدم اليوم من قِبل غالبية المواقع الإلكترونية ... لعمل التصميم ! في الواقع ، إذا كنا نريد وضع قائمة على اليسار ومحتوى صفحة على اليمين ، فهذه مبدئيا طريقة جيدة. أقول مبدئيا لأنه في الأساس ، لم يتم تصميم هذه الخاصية لتخطيط التصميم وسنرى أن لديها بعض العيوب الصغيرة. دعنا نعود إلى كود HTML المهيكل الذي رأيناه منذ بضعة فصول:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Zozor - Le Site Web</title>
    </head>

    <body>
        <header>
            <h1>Zozor</h1>
            <h2>Carnets de voyage</h2>
        </header>
        
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">CV</a></li>
            </ul>
        </nav>
        
        <section>
            <aside>
                <h1>À propos de l'auteur</h1>
                <p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p>
            </aside>
            <article>                
                <h1>Je suis un grand voyageur</h1>
                <p>Bla bla bla bla (texte de l'article)</p>
            </article>
        </section>
        
        <footer>
            <p>Copyright Zozor - Tous droits réservés<br />

            <a href="#">Me contacter !</a></p>
        </footer>
        
    </body>
</html>      

أذكرك أنه بدون CSS ، فإن التخطيط يشبه الشكل التالي.

css html text

صفحة HTML بدون CSS

سنحاول وضع القائمة على اليسار وبقية النص على اليمين. لهذا ، سنقوم بتعويم القائمة على اليسار وترك بقية النص على اليمين. نريد أن تكون القائمة 150 بكسل. سنضيف أيضًا حدًا أسود حول القائمة وحدًا أزرق حول الجسم (عند العلامة <section> لتمييزها)

nav
{
    float: left;
    width: 150px;
    border: 1px solid black;
}

section
{
    border: 1px solid blue;
}

هنا هي النتيجة في الشكل التالي. ليس الأمر كذلك بعد.

css html text

القائمة في وضع جيد ولكن تمسك بالنص

هناك عيبان (بصرف النظر عن حقيقة أنه لا يزال قبيحًا):

  • يمس نص الصفحة حدود القائمة. يفتقد هامش صغير ...
  • أكثر مزعج لا يزال: بقية النص يمر ... تحت القائمة!

نريد وضع تذييل الصفحة ("Copyright Zozor") أسفل القائمة ، لكن من ناحية أخرى ، نود أن يتكون نص الصفحة بالكامل من كتلة واحدة على اليمين.

لحل هاتين المشكلتين في وقت واحد ، يجب إضافة هامش خارجي إلى يسار <section> ، والذي يجب أن يكون أكبرمن عرض القائمة. إذا كانت قائمتنا 150 بكسل ، فسنقدم على سبيل المثال الهامش الأيسر الخارجي البالغ 170 بكسل لقسم صفحتنا (الشكل التالي) ، هنا في السطر 10.

nav
{
    float: left;
    width: 150px;
    border: 1px solid black;
}

section
{
    margin-left: 170px;
    border: 1px solid blue;
}     

css html text

يتم محاذاة نص الصفحة إلى يمين القائمة

هذا كل شيء ، يتم الآن محاذاة محتوى الصفحة بشكل صحيح.

من ناحية أخرى ، قد تفضل أيضًا وضع عنصر أسفل القائمة. في هذه الحالة ، سيكون من الضروري استخدام ... clear: both;، التي اكتشفناها ، مما يفرض استمرار وضع النص تحت العنصر العائم.

تحويل العناصر الخاصة بك مع DISPLAY


سوف نتعلم هنا كيفية تعديل قوانين CSS

هناك خاصية CSS قوية جدا: display. إنها قادرة على تحويل أي عنصر من صفحتك من نوع إلى آخر. باستخدام هذه الخاصية السحرية ، يمكنني على سبيل المثال إجبار الروابط (أصلاً من النوع المضمن) على الظهور ككتل:


a
{
    display: block;
}     

في هذه المرحلة ، سيتم وضع الروابط أسفل بعضها البعض (مثل الكتل العادية) ويصبح من الممكن تعديل أبعادها

فيما يلي بعض القيم الرئيسية التي يمكن أن تأخذها الخاصية display في CSS (لا يزال هناك آخرون)

قيمة أمثلة وصف
inline <a>، <em>، <span>... عناصر خط. بجانب بعضهم البعض.
block <p>، <div>، <section>... عناصر على شكل كتلة. يتم وضعها تحت بعضها البعض ويمكن تغيير حجمها.
inline-block <select>،<input> العناصر الموضوعة بجانب بعضها البعض (مثل الخطوط المضمنة) والتي يمكن تغيير حجمها (مثل الكتل).
none <head> العناصر غير المعروضة.

لذلك يمكننا أن نقرر إخفاء عنصر الصفحة بالكامل بهذه الخاصية. على سبيل المثال ، إذا أردت إخفاء العناصر التي تحتوي على الفئة "secret" ، فسوف أكتب:


.secret
{
    display: none;
}    

لجعل هذه العناصر تظهر لاحقًا ، سيتعين عليك استخدام . JavaScript تستخدم بعض مواقع الويب هذه التقنية بشكل تلقائي لإخفاء القوائم الفرعية التي يتم عرضها فقط عند استعراض القوائم.

وما هو هذا النوع الجديد الغريب inline-block؟ إنه خليط؟

نعم ، هذا النوع من العناصر هو في الواقع مزيج من العناصر المضمنة والكتل. إنها أفضل ما في العالمين: تظهر العناصر جنبًا إلى جنب ويمكن تغيير حجمها.

يتم عرض بعض العلامات مثل هذا تلقائيا ، خاصةً حالة عناصر استماراة (forms) (مثل التي سنكتشفها لاحقًا).

على العكس ، مع الخاصية display، سنكون قادرين على تحويل العلامات الأخرى إلى inline-block، مما سيساعدنا على تحقيق تصميمنا.

تموقع INLINE-BLOC


تثبت عمليات التلاعب المطلوبة بواسطة تحديد المواقع العائمة في بعض الأحيان أنها صعبة بعض الشيء على المواقع المعقدة. بمجرد وجود أكثر من مجرد قائمة بسيطة لوضعها في الصفحة ، يخاطر المرء باللجوء إلى تلك clear: both;التي تؤدي إلى كود الصفحة بسرعة. هناك طريقة أفضل لتحويل العناصر الخاصة بك إلى inline-block و ذلك بفضل الخاصية display

بعض التذكيرات الصغيرة حول عناصر كتلة مضمّنة:

  • يتم وضعهم بجانب بعضهم البعض (بالضبط ما نريد لكي نضع قائمتنا وجسم صفحتنا!).
  • يمكننا منحهم أبعاد دقيقة (مرة أخرى ، بالضبط ما نريد!).

سوف نقوم بتحويل العنصرين اللذين نريد وضعهما جنبًا إلى جنب: قائمة التنقل والقسم الأوسط للصفحة.


nav
{
    display: inline-block;
    width: 150px;
    border: 1px solid black;
}

section
{
    display: inline-block;    
    border: 1px solid blue;
}   

الذي يعطينا نتيجة الشكل التالي.

css html text

القائمة والجسم جنبًا إلى جنب ... ولكن يتم وضع القائمةا في الأسفل!

أوووووووووووه!

ليس بالضبط ما أردنا. وفي الواقع ، إنه أمر طبيعي: يتم وضع عناصر الكتلة المضمّنة على نفس خط الأساس (يسمى baseline )، في الأسفل

لحسن الحظ، بعد أن تحولت العناصر يسمح inline-bloc لنا باستخدام خاصية جديدة، عادة ما تحجز للجداول vertical-align تتيح لك هذه الخاصية تغيير المحاذاة العمودية للعناصر. فيما يلي بعض القيم المحتملة لهذه الخاصية:

  • Baseline : محاذاة قاعدة العنصر مع قاعدة العنصر الأصل (تلقائي) ؛
  • Top : يحاذي في الأعلى ؛
  • Middle : يوسط عموديا.
  • Bottom : يحاذي الى الاسفل ؛
  • (القيمة بالبكسل أو٪): محاذاتها على مسافة معينة من الأساس.

كل ما بقي علينا القيام به هو صف عناصرنا في الجزء العلوي ، وهذا كل شيء (الشكل التالي)!


nav
{
    display: inline-block;
    width: 150px;
    border: 1px solid black;
    vertical-align: top;
}

section
{
    display: inline-block;    
    border: 1px solid blue;
    vertical-align: top;
}  
css html text

تتم محاذاة القائمة والجسم في الجزء العلوي وجنباً إلى جنب

ستلاحظ أن القسم (<section>) لا يأخذ العرض بالكامل. في الواقع ، لم يعد كتلة . يحتل القسم فقط المكان الذي يحتاج إليه. إذا كان هذا لا يناسبك للتصميم الخاص بك يمكنك تغيير حجم القسم مع width . وهذا كل شيء! لا داعي للقلق مع الهوامش ، ولا توجد مخاطرة في أن يصبح النص ضمن القائمة ... باختصار ، إنه مثالي!

المواقع المطلقة والثابتة والنسبية


هناك بعض التقنيات الخاصة الأخرى لتحديد المواقع بدقة على الصفحة:

  • الموضع المطلق : يسمح لنا بوضع عنصر في أي مكان على الصفحة (أعلى اليسار ، أسفل اليمين ، الوسط ، إلخ).
  • الموضع الثابت : مطابق للموضع المطلق ، ولكن هذه المرة ، يظل العنصر مرئيًا ، حتى لو تم الانتقال إلى أسفل الصفحة. إنه نفس المبدأ background-attachment: fixed; إذا كنت لا تزال تتذكر.
  • الموضع النسبي : يتحول العنصر حسب وضعه الطبيعي.

كما هو الحال مع العائمات ، تعمل المواضع الثابتة و المطلقة والنسبية أيضًا على العلامات المضمنة. ومع ذلك ، سترى أنه يتم استخدامها في كثير من الأحيان على علامات كتل أكثر من العلامات المضمنة.

أولاً عليك أن تختار بين أوضاع تحديد المواقع الثلاثة المتاحة. لهذا ، نستخدم خاصية CSS position التي نعطيها إحدى هذه القيم:

  • Absolute : تحديد المواقع المطلقة ؛
  • Fixed : تحديد المواقع الثابتة ؛
  • Relative : تحديد المواقع النسبية.

سوف ندرس واحدا تلو الآخر كل من هذه المواقف.

المواقع المطلقة

يسمح لك تحديد الموقع المطلق بوضع عنصر (فعليًا) في أي مكان على الصفحة. لاستعمال موضع مطلق ، يمكن أن نكتب:


element
{
    position: absolute;
} 

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

  • Left : الموضع بالنسبة إلى يسار الصفحة ؛
  • Right : الموضع بالنسبة إلى يمين الصفحة ؛
  • Top : الموضع بالنسبة لأعلى الصفحة ؛
  • Bottom : الموضع بالنسبة لأسفل الصفحة.

يمكننا منحهم قيمة بالبكسل ، مثل 14 بكسل ، أو قيمة النسبة المئوية ، مثل 50٪.

إذا لم يكن الأمر واضحًا جدًا بالنسبة للبعض ، فيجب أن يساعدك الشكل التالي في الفهم.

css html text

الموضع المطلق للعنصر على الصفحة

مع هذا ، يجب أن تكون قادرًا على وضع الكتلة بشكل صحيح. وذلك باستخدام خاصية position واحدة على الأقل من الخصائص الأربعة المذكورة أعلاه top) ، left، rightأو (bottom إذا كتبنا على سبيل المثال:


element
{
    position: absolute;
    right: 0px;
    bottom: 0px;
}

... هذا يعني أنه يجب وضع الكتلة في أسفل اليمين (0 بكسل من يمين الصفحة ، 0 من أسفل الصفحة). إذا حاولنا وضع كتلتنا

الخلاصة


  • أحدث وأقوى تقنية تخطيط مواقع هي Flexbox هذا ما يجب أن تستخدمه إذا كانت لديك الفرصة.
  • لا تزال تقنيات التخطيط الأخرى مستخدمة ، خاصة في المواقع القديمة: تحديد المواقع وتحديد المواقع العائمة inline-block من المستحسن أن نعرفهم.
  • يعد تحديد المواقع العائمة (مع الخاصية (float أحد أكثر التقنيات استخدامًا في الوقت الحالي. يسمح على سبيل المثال بوضع قائمة على يسار أو يمين الصفحة. ومع ذلك ، لم يتم تصميم هذه الخاصية في الأصل لهذا ومن الأفضل ، إن أمكن ، تجنب هذه التقنية.
  • تحديد المواقع inline-block هو عن تخصيص نوع inline-block لعناصرنا من خلال الخاصية display سوف تتصرف مثل الخطوط المضمنة (الموضع من اليسار إلى اليمين) ولكن يمكن تغيير حجمها ككتل (مع widthو (height هذه التقنية هي الأفضل لتحديد المواقع العائمة.
  • يسمح لك تحديد الموقع المطلق بوضع عنصر حيث تريد على الصفحة ، إلى أقرب بكسل.
  • الموضع الثابت هو نفسه الموضع المطلق ، ولكن العنصر سوف يكون دائمًا مرئيًا حتى لو نزلت الى اسفل الصفحة.
  • يجعل الوضع النسبي من الممكن تحويل كتلة نسبة إلى وضعها الطبيعي.
  • سيتم وضع عنصر A في وضع مطلق داخل عنصر آخر B (يتم وضع نفسه في مطلق أو ثابت أو نسبي) فيما يتعلق بالعنصر B ، وليس فيما يتعلق بالزاوية في الجزء العلوي الأيسر من الصفحة.