تكون مربعات InDesign بسيطة مثل النقر والسحب. تسمح طبقات Photoshop للون الرسام بالألوان في أي مكان يرغبون فيه. لكن التخطيط مع HTML و CSS هي لعبة من التحفيز والتتالي.

يحدث ذلك كل يوم: يستهزأ مدراء الفن المحترفون في Photoshop بالتصاميم ، ويزيدون من تباعدهم ، ويختارون بعناية الخطوط والألوان المناسبة. وهم يوزعون أعمالهم على مطور HTML متلهف ، يعلن عن أن التصميم سيستغرق على الأرجح أيامًا ليتحول إلى HTML / CSS. الأسوأ من ذلك ، أنها ستجري تغييرات على حسابات أحجام الشاشات المختلفة. التوقيت هو لغز لكلا الطرفين. هل سيستغرق المطور ساعة أو أسبوعًا لتحويل PSD إلى HTML / CSS يعمل؟

يمكن فهم أساسيات تخطيط الويب - الممكن ، والعملية ، والإمكانيات - بسهولة. مثل التصميم نفسه ، فإن فهم المبادئ سيساعد أي مصمم لإنتاج تصميمات أفضل وتسريع عملية بناء الموقع.

كتلة عناصر كومة ، تدفق العناصر المضمنة

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

• عناصر الكتلة هي مستطيلات. انهم يحبون لملء المساحة الأفقية.
• تكون العناصر المضمنة مستطيلة ، إلا أنها قد تلتف.

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

تعتمد العناصر المضمّنة على تنسيق النص. فهي لا تكسر تدفق النص ، وتتوسع أبعادها لتلائم محتوياتها. لن يعمل عنصر مضمّن للاحتفاظ بعرض 200 بكسل. ملء مع النص سوف.

افتراضيا ، كل عنصر في هو إما عنصر مضمّن أو كتلة. يمكن للمصممين تغيير طبيعتهم باستخدام القليل من CSS - لنقل ، تحويل مجموعة من عناصر القائمة (كتل بشكل أصلي) إلى صف ، أو سلسلة من الروابط الأفقية (مضمنة أصلاً) إلى مكدس رأسي. وهذا يعني أنه يمكن استخدام أي عنصر مرئي للتخطيط. ما إذا كان ينبغي أن يعتمد على التخطيط المعني.

تتضمن عناصر الكتلة الأصلية ما يلي:

• الانقسامات
• الفقرات

• قوائم
  • العناصر في القائمة
  • العناوين

    -

  • الجداول
    كتلة الاقتباس

    المنظمون في HTML5

    ، ،
    الجسم نفسه

    تتضمن العناصر المضمنة:

    • المراسي (الارتباطات التشعبية)
    • بالخط العريض و
    • مائل و
    • صور
    • اقتباسات
    • اكتب التصميم
    • تسميات النماذج
    • هذا يعود إليك

    العلامات الشائعة التي لا تحجب أو مضمنة:

    • عنوان الوثيقة