<div>إستكمالاً لدورة تصميم قالب جملة والتي إنفردنا بها على الرابط التالي:
تصميم قالب جملة بإحتراف [الجزء الأول] قنبلة المنتديات
نأتي إلى الجزء الثاني من الشرح:
بعد الإنتهاء من ظبط الإعدادات الأولية للقالب وبعد الإنتهاء من التصميم والتقطيع كما ورد ذكره في الجزء الأول من الدورة .. يأتي دورنا للتعديل على ملفات الـ CSS وإضافة الصور الخاصة بالتصميم إلى القالب.
نبدأ أولا بعمل الهيدر Header الموقع:
مايجب أن نعرفه أولا كيفية إضافة الـ Class أو الـ ID لملفات الـ CSS [ وبصورة مختصرة ومبسطة الـ Class و الـ ID هي إعدادات خاصة بالتصميم نقوم بعملها مره واحدة وإعطاءها مسمى معين .. ويكفي إضافة كود بسيط داخل أكواد الـ HTML ليعطي تأثير الـ Class دون الحاجة لعمل الإعدادات مرة أخرى ] .. لا تشغل بالك كثيراً في فهم هذه النقطة حالياً ستتعرف على المقصد لاحقاً أثناء التطبيق.
إضغط على موافق Ok لتظهر لك نافذة خصائص المسمى قم بالضغط على خصائص الخلفية Background ثم قم بإختيار صورة الخلفية للهيدر [منطقة التمدد]:
قم بتعديل أبعاد المتغير #header كما موضح في الصورة التالية:
قمنا بإختيار العرض Width بقيمة 100% وهذا يعني أن الهيدر سيكون ممتد بعرض الشاشة كاملاً أما بالنسبة للطول Height فتم تحديده بقيمة ارتفاع صورة الخلفية.
رمز Code:
#header .right
ملاحظة: يمكن كتابة اي اسم للمتغيرات فهي إختيارية ولكن يفضل كتابتها باسماء واضحة ليسهل التعديل عليها لاحقها حينا الحاجة .. فكلمة Header تدل على ان هذا المتغير خاص بهيدر الموقع .. وكلمة right تعني يمين وهكذا.
كما موضح في الصورة السابقة أننا قد إخترنا العرض Width بنفس قيمة عرض الصورة الأصلية للشعار وكذلك الطول Height والجديد في هذه الخطوة هو إختيار الأمر Float right وهذا يعني محاذاة الصورة إلى الجانب الأيمن.
<div style="margin:20px; margin-top:5px"> رمز Code:
<div style="margin:20px; margin-top:5px"> رمز Code:
تصميم قالب جملة بإحتراف [الجزء الأول] قنبلة المنتديات
نأتي إلى الجزء الثاني من الشرح:
بعد الإنتهاء من ظبط الإعدادات الأولية للقالب وبعد الإنتهاء من التصميم والتقطيع كما ورد ذكره في الجزء الأول من الدورة .. يأتي دورنا للتعديل على ملفات الـ CSS وإضافة الصور الخاصة بالتصميم إلى القالب.
نبدأ أولا بعمل الهيدر Header الموقع:
مايجب أن نعرفه أولا كيفية إضافة الـ Class أو الـ ID لملفات الـ CSS [ وبصورة مختصرة ومبسطة الـ Class و الـ ID هي إعدادات خاصة بالتصميم نقوم بعملها مره واحدة وإعطاءها مسمى معين .. ويكفي إضافة كود بسيط داخل أكواد الـ HTML ليعطي تأثير الـ Class دون الحاجة لعمل الإعدادات مرة أخرى ] .. لا تشغل بالك كثيراً في فهم هذه النقطة حالياً ستتعرف على المقصد لاحقاً أثناء التطبيق.
- قم بإضافة بإختيار إحدى قوالب الـ CSS الموجودة في أعلى البرنامج وليكن مثلا قالب Template_rtl ثم قم بالضغط كما موضح في الصورة:
- قم بإختيار نوع المتغير ID كما موضح في الصورة وإعطائه التسمية #header ( لا تنسى كتابة # قبل المسمى ):
إضغط على موافق Ok لتظهر لك نافذة خصائص المسمى قم بالضغط على خصائص الخلفية Background ثم قم بإختيار صورة الخلفية للهيدر [منطقة التمدد]:
قم بتعديل أبعاد المتغير #header كما موضح في الصورة التالية:
قمنا بإختيار العرض Width بقيمة 100% وهذا يعني أن الهيدر سيكون ممتد بعرض الشاشة كاملاً أما بالنسبة للطول Height فتم تحديده بقيمة ارتفاع صورة الخلفية.
- بعد الإنتهاء من عمل الإعدادات السابقة ستكون النتيجة النهائية لشكل الكود كما هو موضح في الصورة:
- نقوم بإضافة متغير أخر لوضع شعار الموقع للجانب الأيمن من الهيدر بنفس الطريقة السابقة بإستثناء وحيد وهو نوعية المتغير ستكون Class ونقوم بإعطاءه المسمى التالي:
رمز Code:
#header .right
ملاحظة: يمكن كتابة اي اسم للمتغيرات فهي إختيارية ولكن يفضل كتابتها باسماء واضحة ليسهل التعديل عليها لاحقها حينا الحاجة .. فكلمة Header تدل على ان هذا المتغير خاص بهيدر الموقع .. وكلمة right تعني يمين وهكذا.
- نقوم بإختيار صورة الشعار من ملف صور القالب كما موضح [مع الإنتباه لأبعاد الصورة لأننا سنحتاجها للتعديل على أبعد المتغير]:
- نقوم بالتعديل على خصائص المسمى وتعديل الأبعاد بنفس أبعاد الصورة كما موضح:
كما موضح في الصورة السابقة أننا قد إخترنا العرض Width بنفس قيمة عرض الصورة الأصلية للشعار وكذلك الطول Height والجديد في هذه الخطوة هو إختيار الأمر Float right وهذا يعني محاذاة الصورة إلى الجانب الأيمن.
- بنفس الطريقة السابقة نقوم بعمل الجانب الأيسر من الهيدر كما موضح في الصورة التالية:
- الملاحظ في التصميم الخاص بي هو عدم وجود صورة في الجهة اليسرى للقالب [ وهذا يختلف من تصميم إلى تصميم] لذلك لم أقم بإختيار خلفية وأيضا قمت بجعل العرض الخاص بهذا المتغير Auto أي تلقائي بحيث يأخذ عرض المحتوى تلقائياً أما بالنسبة للطول فهو ثابت لكل الصور في الهيدر كما موضح في الصورة:
- بعد الإنتهاء من التعديل على المسميات تذهب إلى قالب الـ HTML الرئيسي Source Code من القائمة العلوية للبرنامج ونبحث عن المتغير التالي ونضع تحته مباشرة الكود التالي:
<div style="margin:20px; margin-top:5px"> رمز Code:
<div style="margin:20px; margin-top:5px"> رمز Code: