said
11-01-2013, بتوقيت غرينيتش 07:12 AM
إستكمالاً لدورة تصميم قالب template جملة joomla والتي إنفردنا بها على الرابط التالي:
تصميم قالب template جملة joomla بإحتراف [الجزء الأول] قنبلة المنتديات (http://z00m-n.com/vb/t20638.html)
نأتي إلى الجزء الثاني من الشرح طريقة:
بعد الإنتهاء من ظبط الإعدادات الأولية للقالب template وبعد الإنتهاء من التصميم والتقطيع كما ورد ذكره في الجزء الأول من الدورة .. يأتي دورنا للتعديل على ملفات الـ CSS وإضافة الصور الخاصة بالتصميم إلى القالب template.
نبدأ أولا بعمل الهيدر header Header الموقع:
مايجب أن نعرفه أولا كيفية إضافة الـ Class أو الـ ID لملفات الـ CSS [ وبصورة مختصرة ومبسطة الـ Class و الـ ID هي إعدادات خاصة بالتصميم نقوم بعملها مره واحدة وإعطاءها مسمى معين .. ويكفي إضافة كود code بسيط داخل أكواد الـ HTML ليعطي تأثير الـ Class دون الحاجة لعمل الإعدادات مرة أخرى ] .. لا تشغل بالك كثيراً في فهم هذه النقطة حالياً ستتعرف على المقصد لاحقاً أثناء التطبيق.
قم بإضافة بإختيار إحدى قوالب الـ CSS الموجودة في أعلى البرنامج وليكن مثلا قالب template Template_rtl ثم قم بالضغط كما موضح في الصورة:
http://z00m-n.com/up/uploads/images/z00m-nda4d8b48c9.png
قم بإختيار نوع المتغير ID كما موضح في الصورة وإعطائه التسمية #header ( لا تنسى كتابة # قبل المسمى ):
http://z00m-n.com/up/uploads/images/z00m-n8227a76b95.png
إضغط على موافق Ok لتظهر لك نافذة خصائص المسمى قم بالضغط على خصائص الخلفية Background ثم قم بإختيار صورة الخلفية للهيدر [منطقة التمدد]:
http://z00m-n.com/up/uploads/images/z00m-n9969c8f066.png
http://z00m-n.com/up/uploads/images/z00m-nd058f32b2c.png
قم بتعديل أبعاد المتغير #header كما موضح في الصورة التالية:
http://z00m-n.com/up/uploads/images/z00m-neab75cfb44.png
قمنا بإختيار العرض Width بقيمة 100% وهذا يعني أن الهيدر header سيكون ممتد بعرض الشاشة كاملاً أما بالنسبة للطول Height فتم تحديده بقيمة ارتفاع صورة الخلفية.
بعد الإنتهاء من عمل الإعدادات السابقة ستكون النتيجة النهائية لشكل الكود code كما هو موضح في الصورة:
http://z00m-n.com/up/uploads/images/z00m-ne4e664e398.png
نقوم بإضافة متغير أخر لوضع شعار الموقع للجانب الأيمن من الهيدر header بنفس الطريقة السابقة بإستثناء وحيد وهو نوعية المتغير ستكون Class ونقوم بإعطاءه المسمى التالي:
http://z00m-n.com/up/uploads/images/z00m-nc0b1cb9014.png
ملاحظة: يمكن كتابة اي اسم للمتغيرات فهي إختيارية ولكن يفضل كتابتها باسماء واضحة ليسهل التعديل عليها لاحقها حينا الحاجة .. فكلمة Header تدل على ان هذا المتغير خاص بهيدر الموقع .. وكلمة right تعني يمين وهكذا.
نقوم بإختيار صورة الشعار من ملف صور القالب template كما موضح [مع الإنتباه لأبعاد الصورة لأننا سنحتاجها للتعديل على أبعد المتغير]:
http://z00m-n.com/up/uploads/images/z00m-n168c2a59fc.png
نقوم بالتعديل على خصائص المسمى وتعديل الأبعاد بنفس أبعاد الصورة كما موضح:
http://z00m-n.com/up/uploads/images/z00m-nb5dadc2fc3.png
كما موضح في الصورة السابقة أننا قد إخترنا العرض Width بنفس قيمة عرض الصورة الأصلية للشعار وكذلك الطول Height والجديد في هذه الخطوة هو إختيار الأمر Float right وهذا يعني محاذاة الصورة إلى الجانب الأيمن.
بنفس الطريقة السابقة نقوم بعمل الجانب الأيسر من الهيدر header كما موضح في الصورة التالية:
http://z00m-n.com/up/uploads/images/z00m-n646941512f.png
الملاحظ في التصميم الخاص بي هو عدم وجود صورة في الجهة اليسرى للقالب template [ وهذا يختلف من تصميم إلى تصميم] لذلك لم أقم بإختيار خلفية وأيضا قمت بجعل العرض الخاص بهذا المتغير Auto أي تلقائي بحيث يأخذ عرض المحتوى تلقائياً أما بالنسبة للطول فهو ثابت لكل الصور في الهيدر header كما موضح في الصورة:
http://z00m-n.com/up/uploads/images/z00m-n7a643462dd.png
بعد الإنتهاء من التعديل على المسميات تذهب إلى قالب template الـ HTML الرئيسي Source Code من القائمة العلوية للبرنامج ونبحث عن المتغير التالي <Body> ونضع تحته مباشرة الكود code التالي:
رمز Code:
<div ID="header">
رمز Code:
<div class="right"></div> <div class="left|></div> </div>
كما موضح في الصورة التالية:
http://z00m-n.com/up/uploads/images/z00m-n32fdb8d167.png
وسيكون الناتج كالتالي:
http://z00m-n.com/up/uploads/images/z00m-n6830266e11.png
كما نلاحظ في الصورة السابقة وجود مسافة خالية بين الهيدر header والمتصفح من الجهتين اليمنى واليسرى .. ولحل هذه المشكلة نقوم بالذهاب إلى قالب template template_rtl2.css من القائمة العلوية .. ونذهب للمتغير body ونقوم بالضغط عليه من القائمة الموجودة على يمين البرنامج بزر الماوس الأيمن وإختيار تعديل Edit ونذهب لخصائص Box ونقوم بالتعديل كما موضح في الصورة بوضع علامة صح في المربع الصغير أمام خيارات Margin:
http://z00m-n.com/up/uploads/images/z00m-n60b66af3d8.png
وهذا يعني أن المسافة بين حدود المتصفح ستكون صفر 0 في جميع الإتجاهات .. بمعنى اخر .. ان المسافة بين حدود المتصفح من الجهة اليمنى هي صفر ومن الجهة اليسرى صفر ومن الجهة العليا صفر ومن أسفل المتصفح صفر.
أما إذا كان التصميم غير متمدد وتريد توسيط الهيدر header .. فقم بإختيار Auto للجهة اليمنى والجهة اليسرى كما موضح في الصورة:
http://z00m-n.com/up/uploads/images/z00m-n0793f61ea9.png
لهنا يكون إنتهى الجزء الثاني من الشرح طريقة .. وستكون الأجزاء القادمة من الشرح طريقة أكثر تعقيداً لذلك يجب على الجميع فهم الجزء الأول والثاني أولا لكي يتمكن من المتابعة وتطبيق الأجزاء القادمة .. في إنتظار استفسارتكم
رجاء عدم نزع الحقوق الخاصة بالشرح طريقة .. فالشرح طريقة مقدم من منتديات زووم إن وفي حال نقل الموضوع الرجاء ذكر المصدر:
www.z00m-n.com/vb (http://z00m-n.com/vb)
ولمتابعة كامل الدورة مباشرة يمكنكم الدخول على الرابط التالي:
منتدي تصميم المواقع - منتديات زووم إن - زووم - ملتقى النجوم (http://z00m-n.com/vb/f28.html)
ملاحظة مهمة : فوجئت ببعض الأعضاء قاموا بالتسجيل في منتداي وقاموا بسبي ببعض الألفاظ وذلك لتأخري في إكمال الجزء الثاني .. وكأن ما أقوم به هو وظيفة أتقاضى عليها راتب .. ولكن كل ما أقوم به هو فقط لإفادة الجميع بما أعرفه ليس أكثر وليس إلزاماً لي وإنما حباً في الإفادة .. متناسيين أن لكل إنسان ظروف وإلتزامات في حياته أكثر وأهم من إستكمال الشرح طريقة قد تحول أو تأخر متابعة الدورة. لذلك أعتذر عن إستكمال الدورة وسأقوم بإنزالها في منتداي الخاص حين أجد الفرصة والوقت المناسب لكي لا أتعرض لنفس الموقف مرة أخرى .. ويمكن للجميع مشاهدة الدورة في منتدي دون التسجيل فهذا لن يكون عائق أمام الجميع للتعلم إن شاءالله .. وأعتذر عن الإطالة
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
تصميم قالب template جملة joomla بإحتراف [الجزء الأول] قنبلة المنتديات (http://z00m-n.com/vb/t20638.html)
نأتي إلى الجزء الثاني من الشرح طريقة:
بعد الإنتهاء من ظبط الإعدادات الأولية للقالب template وبعد الإنتهاء من التصميم والتقطيع كما ورد ذكره في الجزء الأول من الدورة .. يأتي دورنا للتعديل على ملفات الـ CSS وإضافة الصور الخاصة بالتصميم إلى القالب template.
نبدأ أولا بعمل الهيدر header Header الموقع:
مايجب أن نعرفه أولا كيفية إضافة الـ Class أو الـ ID لملفات الـ CSS [ وبصورة مختصرة ومبسطة الـ Class و الـ ID هي إعدادات خاصة بالتصميم نقوم بعملها مره واحدة وإعطاءها مسمى معين .. ويكفي إضافة كود code بسيط داخل أكواد الـ HTML ليعطي تأثير الـ Class دون الحاجة لعمل الإعدادات مرة أخرى ] .. لا تشغل بالك كثيراً في فهم هذه النقطة حالياً ستتعرف على المقصد لاحقاً أثناء التطبيق.
قم بإضافة بإختيار إحدى قوالب الـ CSS الموجودة في أعلى البرنامج وليكن مثلا قالب template Template_rtl ثم قم بالضغط كما موضح في الصورة:
http://z00m-n.com/up/uploads/images/z00m-nda4d8b48c9.png
قم بإختيار نوع المتغير ID كما موضح في الصورة وإعطائه التسمية #header ( لا تنسى كتابة # قبل المسمى ):
http://z00m-n.com/up/uploads/images/z00m-n8227a76b95.png
إضغط على موافق Ok لتظهر لك نافذة خصائص المسمى قم بالضغط على خصائص الخلفية Background ثم قم بإختيار صورة الخلفية للهيدر [منطقة التمدد]:
http://z00m-n.com/up/uploads/images/z00m-n9969c8f066.png
http://z00m-n.com/up/uploads/images/z00m-nd058f32b2c.png
قم بتعديل أبعاد المتغير #header كما موضح في الصورة التالية:
http://z00m-n.com/up/uploads/images/z00m-neab75cfb44.png
قمنا بإختيار العرض Width بقيمة 100% وهذا يعني أن الهيدر header سيكون ممتد بعرض الشاشة كاملاً أما بالنسبة للطول Height فتم تحديده بقيمة ارتفاع صورة الخلفية.
بعد الإنتهاء من عمل الإعدادات السابقة ستكون النتيجة النهائية لشكل الكود code كما هو موضح في الصورة:
http://z00m-n.com/up/uploads/images/z00m-ne4e664e398.png
نقوم بإضافة متغير أخر لوضع شعار الموقع للجانب الأيمن من الهيدر header بنفس الطريقة السابقة بإستثناء وحيد وهو نوعية المتغير ستكون Class ونقوم بإعطاءه المسمى التالي:
http://z00m-n.com/up/uploads/images/z00m-nc0b1cb9014.png
ملاحظة: يمكن كتابة اي اسم للمتغيرات فهي إختيارية ولكن يفضل كتابتها باسماء واضحة ليسهل التعديل عليها لاحقها حينا الحاجة .. فكلمة Header تدل على ان هذا المتغير خاص بهيدر الموقع .. وكلمة right تعني يمين وهكذا.
نقوم بإختيار صورة الشعار من ملف صور القالب template كما موضح [مع الإنتباه لأبعاد الصورة لأننا سنحتاجها للتعديل على أبعد المتغير]:
http://z00m-n.com/up/uploads/images/z00m-n168c2a59fc.png
نقوم بالتعديل على خصائص المسمى وتعديل الأبعاد بنفس أبعاد الصورة كما موضح:
http://z00m-n.com/up/uploads/images/z00m-nb5dadc2fc3.png
كما موضح في الصورة السابقة أننا قد إخترنا العرض Width بنفس قيمة عرض الصورة الأصلية للشعار وكذلك الطول Height والجديد في هذه الخطوة هو إختيار الأمر Float right وهذا يعني محاذاة الصورة إلى الجانب الأيمن.
بنفس الطريقة السابقة نقوم بعمل الجانب الأيسر من الهيدر header كما موضح في الصورة التالية:
http://z00m-n.com/up/uploads/images/z00m-n646941512f.png
الملاحظ في التصميم الخاص بي هو عدم وجود صورة في الجهة اليسرى للقالب template [ وهذا يختلف من تصميم إلى تصميم] لذلك لم أقم بإختيار خلفية وأيضا قمت بجعل العرض الخاص بهذا المتغير Auto أي تلقائي بحيث يأخذ عرض المحتوى تلقائياً أما بالنسبة للطول فهو ثابت لكل الصور في الهيدر header كما موضح في الصورة:
http://z00m-n.com/up/uploads/images/z00m-n7a643462dd.png
بعد الإنتهاء من التعديل على المسميات تذهب إلى قالب template الـ HTML الرئيسي Source Code من القائمة العلوية للبرنامج ونبحث عن المتغير التالي <Body> ونضع تحته مباشرة الكود code التالي:
رمز Code:
<div ID="header">
رمز Code:
<div class="right"></div> <div class="left|></div> </div>
كما موضح في الصورة التالية:
http://z00m-n.com/up/uploads/images/z00m-n32fdb8d167.png
وسيكون الناتج كالتالي:
http://z00m-n.com/up/uploads/images/z00m-n6830266e11.png
كما نلاحظ في الصورة السابقة وجود مسافة خالية بين الهيدر header والمتصفح من الجهتين اليمنى واليسرى .. ولحل هذه المشكلة نقوم بالذهاب إلى قالب template template_rtl2.css من القائمة العلوية .. ونذهب للمتغير body ونقوم بالضغط عليه من القائمة الموجودة على يمين البرنامج بزر الماوس الأيمن وإختيار تعديل Edit ونذهب لخصائص Box ونقوم بالتعديل كما موضح في الصورة بوضع علامة صح في المربع الصغير أمام خيارات Margin:
http://z00m-n.com/up/uploads/images/z00m-n60b66af3d8.png
وهذا يعني أن المسافة بين حدود المتصفح ستكون صفر 0 في جميع الإتجاهات .. بمعنى اخر .. ان المسافة بين حدود المتصفح من الجهة اليمنى هي صفر ومن الجهة اليسرى صفر ومن الجهة العليا صفر ومن أسفل المتصفح صفر.
أما إذا كان التصميم غير متمدد وتريد توسيط الهيدر header .. فقم بإختيار Auto للجهة اليمنى والجهة اليسرى كما موضح في الصورة:
http://z00m-n.com/up/uploads/images/z00m-n0793f61ea9.png
لهنا يكون إنتهى الجزء الثاني من الشرح طريقة .. وستكون الأجزاء القادمة من الشرح طريقة أكثر تعقيداً لذلك يجب على الجميع فهم الجزء الأول والثاني أولا لكي يتمكن من المتابعة وتطبيق الأجزاء القادمة .. في إنتظار استفسارتكم
رجاء عدم نزع الحقوق الخاصة بالشرح طريقة .. فالشرح طريقة مقدم من منتديات زووم إن وفي حال نقل الموضوع الرجاء ذكر المصدر:
www.z00m-n.com/vb (http://z00m-n.com/vb)
ولمتابعة كامل الدورة مباشرة يمكنكم الدخول على الرابط التالي:
منتدي تصميم المواقع - منتديات زووم إن - زووم - ملتقى النجوم (http://z00m-n.com/vb/f28.html)
ملاحظة مهمة : فوجئت ببعض الأعضاء قاموا بالتسجيل في منتداي وقاموا بسبي ببعض الألفاظ وذلك لتأخري في إكمال الجزء الثاني .. وكأن ما أقوم به هو وظيفة أتقاضى عليها راتب .. ولكن كل ما أقوم به هو فقط لإفادة الجميع بما أعرفه ليس أكثر وليس إلزاماً لي وإنما حباً في الإفادة .. متناسيين أن لكل إنسان ظروف وإلتزامات في حياته أكثر وأهم من إستكمال الشرح طريقة قد تحول أو تأخر متابعة الدورة. لذلك أعتذر عن إستكمال الدورة وسأقوم بإنزالها في منتداي الخاص حين أجد الفرصة والوقت المناسب لكي لا أتعرض لنفس الموقف مرة أخرى .. ويمكن للجميع مشاهدة الدورة في منتدي دون التسجيل فهذا لن يكون عائق أمام الجميع للتعلم إن شاءالله .. وأعتذر عن الإطالة
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
