منتدى استراحات زايد - [شرح] : تصميم قالب جملة بإحتراف [الجزء الثاني] قنبلة المنتديات من زووم إن

<div>إستكمالاً لدورة تصميم قالب جملة والتي إنفردنا بها على الرابط التالي:
تصميم قالب جملة بإحتراف [الجزء الأول] قنبلة المنتديات

نأتي إلى الجزء الثاني من الشرح:

بعد الإنتهاء من ظبط الإعدادات الأولية للقالب وبعد الإنتهاء من التصميم والتقطيع كما ورد ذكره في الجزء الأول من الدورة .. يأتي دورنا للتعديل على ملفات الـ CSS وإضافة الصور الخاصة بالتصميم إلى القالب.

نبدأ أولا بعمل الهيدر Header الموقع:

مايجب أن نعرفه أولا كيفية إضافة الـ Class أو الـ ID لملفات الـ CSS [ وبصورة مختصرة ومبسطة الـ Class و الـ ID هي إعدادات خاصة بالتصميم نقوم بعملها مره واحدة وإعطاءها مسمى معين .. ويكفي إضافة كود بسيط داخل أكواد الـ HTML ليعطي تأثير الـ Class دون الحاجة لعمل الإعدادات مرة أخرى ] .. لا تشغل بالك كثيراً في فهم هذه النقطة حالياً ستتعرف على المقصد لاحقاً أثناء التطبيق.

قم بإضافة بإختيار إحدى قوالب الـ CSS الموجودة في أعلى البرنامج وليكن مثلا قالب Template_rtl ثم قم بالضغط كما موضح في الصورة:

http://z00m-n.com/up/uploads/images/...da4d8b48c9.png

قم بإختيار نوع المتغير ID كما موضح في الصورة وإعطائه التسمية #header ( لا تنسى كتابة # قبل المسمى ):

http://z00m-n.com/up/uploads/images/...8227a76b95.png

إضغط على موافق Ok لتظهر لك نافذة خصائص المسمى قم بالضغط على خصائص الخلفية Background ثم قم بإختيار صورة الخلفية للهيدر [منطقة التمدد]:

http://z00m-n.com/up/uploads/images/...9969c8f066.png

http://z00m-n.com/up/uploads/images/...d058f32b2c.png

قم بتعديل أبعاد المتغير #header كما موضح في الصورة التالية:

http://z00m-n.com/up/uploads/images/...eab75cfb44.png

قمنا بإختيار العرض Width بقيمة 100% وهذا يعني أن الهيدر سيكون ممتد بعرض الشاشة كاملاً أما بالنسبة للطول Height فتم تحديده بقيمة ارتفاع صورة الخلفية.

بعد الإنتهاء من عمل الإعدادات السابقة ستكون النتيجة النهائية لشكل الكود كما هو موضح في الصورة:

http://z00m-n.com/up/uploads/images/...e4e664e398.png

نقوم بإضافة متغير أخر لوضع شعار الموقع للجانب الأيمن من الهيدر بنفس الطريقة السابقة بإستثناء وحيد وهو نوعية المتغير ستكون Class ونقوم بإعطاءه المسمى التالي:

رمز Code:
#header .right

http://z00m-n.com/up/uploads/images/...c0b1cb9014.png

ملاحظة: يمكن كتابة اي اسم للمتغيرات فهي إختيارية ولكن يفضل كتابتها باسماء واضحة ليسهل التعديل عليها لاحقها حينا الحاجة .. فكلمة Header تدل على ان هذا المتغير خاص بهيدر الموقع .. وكلمة right تعني يمين وهكذا.

نقوم بإختيار صورة الشعار من ملف صور القالب كما موضح [مع الإنتباه لأبعاد الصورة لأننا سنحتاجها للتعديل على أبعد المتغير]:

http://z00m-n.com/up/uploads/images/...168c2a59fc.png

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

http://z00m-n.com/up/uploads/images/...b5dadc2fc3.png

كما موضح في الصورة السابقة أننا قد إخترنا العرض Width بنفس قيمة عرض الصورة الأصلية للشعار وكذلك الطول Height والجديد في هذه الخطوة هو إختيار الأمر Float right وهذا يعني محاذاة الصورة إلى الجانب الأيمن.

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

http://z00m-n.com/up/uploads/images/...646941512f.png

الملاحظ في التصميم الخاص بي هو عدم وجود صورة في الجهة اليسرى للقالب [ وهذا يختلف من تصميم إلى تصميم] لذلك لم أقم بإختيار خلفية وأيضا قمت بجعل العرض الخاص بهذا المتغير Auto أي تلقائي بحيث يأخذ عرض المحتوى تلقائياً أما بالنسبة للطول فهو ثابت لكل الصور في الهيدر كما موضح في الصورة:

http://z00m-n.com/up/uploads/images/...7a643462dd.png

بعد الإنتهاء من التعديل على المسميات تذهب إلى قالب الـ HTML الرئيسي Source Code من القائمة العلوية للبرنامج ونبحث عن المتغير التالي ونضع تحته مباشرة الكود التالي:

<div align="left">

<div style="margin:20px; margin-top:5px"> رمز Code:

<div style="margin:20px; margin-top:5px"> رمز Code: