بسم الله الرحمن الرحيم
درس مفصل كيفية عمل قالب template جملة joomla باستخدام الدرس مفصلم ويفر والفوتوشوب مكون من ثلاثة أجزاء . حصريا من جملة joomla العرب :: الداعم العربي لجملة joomla .
كثرت التساؤلات .. وكثر الكلام ... وكثر الحديث .. كيف يمكنني عمل قالب template جملة joomla .. لدي الاستايل style psd واريد تقطيعه وعمله .. كيف هذا ؟؟؟
بفضل الله تعالى .. وبعد بحث وتجربة للأمر وجدنا شرح طريقة لهذه العملية ولكنه للنسخة 1.0 ولا يصلح بالمرة للنسخة 1.5 .. ولكن معنا ليس لليأس طريق ..
فاليوم نعرض لكم هذا الدرس مفصل الذي لطالما جاء ليحل أكبر مشكلة كانت تؤرق المستخدم العربي .. لما يتمتع به معظم العرب من خبرة في التصميم وصولات وجولات في تصميم الاستايل styleات واحتراف الفوتوشوب .
بداية الطريق .. تبدأ بوجود البرامج التالية
1- فوتوشوب .. او اي برنامج تعديل على الصور او الأهم برنامج لتقطيع الصورة التي سنجعلها قالب templateا
2- دريم ويفر ... أساسي جدا ولا غنى عنه في هذا الدرس مفصل
3- إضافة للدريم ويفر تساعد في وضع الموديلات اسمها Joomla Solution .. حملها من هنا .
خطواتنا في هذا الطريق :: الطريق الى قالب template جملة joomla بصنع ايدينا..
اولا نتوكل على الرحمن ونبدأ ....
نفتح برنامج الفوتوشوب ....
انا صممت شيء بسيط للتعريف والشرح طريقة فقط .. انما الابداع في التصميم تركناه لمن هم اهله .. تركناه لكم لتتحفونا به .
ما صممت وسيكون عليه درس مفصلنا هو
والآية الكريمة أعلاه ... لسبين .. اولهما لموقعنا وثانيهما واهمها أمتنا .. لعل المقصود القريب والبعيد قد وصل الى اذهانكم
في تصميمي قمت بعمل هيدر ولوجو وفوتر " تذييل "
وصنعنا تخيل بسيط لموقعنا من خلال موديلات
right -- Module -- Banner
ووضعناال body .. وهو المكان الذي يوضع فيه المحتوى الرئيسيي للموقع سواء كان المقالات او معرض صور مثلا او منتدى .. او اي تطبيق برمجي .

نفتح بالفوتوشوب الصورة ال psd الخاصة بقالب templateنا كما بالصورة ..ثم نعلم على اداة ال slice > اى تقطيع الصورة

بعدما نقوم بتقطيع الصورة مع ملاحظة تقطيع جسم الشيء اولا ثم وضع اركانه .. فمثلا ال body .. نقطع محتواه اولا ثم نقطع جانب ايمن له ثم جانب ايسر ثم الجزء العلوي والجزء السفلي وعمل اربعة اركان اعلى اليمين .. واعلى اليسار .. واسفل اليمين .. واسفل اليسار... لماذا ؟
لأن الخلفية يمكن ان تتمدد والجانب الايمن والايسر ايضا يتمددوا .. اما الاركان يجب ان تكون ثابتة .. حتى لا تتمدد وتفقد شكلها .

بعد الانتهاء من التقطيع .... نحفظ العمل عن طريق save for web ... وبهذا سينتج لنا ملف html ومجلد صور


بعدها ستظهر لنا هذه الصفحة نكمل مشوارنا ونضغط save.

ولكن هنا نقف وقفة عند الحفظ .. احفظ باسم index ... وفي خانة ال settings اضغط other فيحولك الى صفحة اخرى

هنا نختار saving file من خلال قائمة منسدلة بعدما تحولنا لهذه الصفحة .
ثم نعيد كتابة اسم مجلد الصور حيث يثم حفظه في
templates/joomlarab/images .. وسنوضح بالتفصيل فيما يلي
اولا templates وهو مجلد قوالب جملة joomla بموقعك .
ثانيا Joomlarab وهو اسم القالب template الذي نصممه .



ثالثا images وهو مجلد الصور بداخل القالب template .


وبهذه الخطوة نكون قد انتيهنا من العمل مع الفوتوشوب ..

الجزء الثاني من الدرس مفصل
ثم نذهب الى اضافة الدريم ويفر التي قمنا بتحميلها حملها من هنا .
ثم نفتحها فيظهر انه تم تنصيب setupها بنجاح . وتم اضافتها لى الدريم ويفر لديك .

بعد ذلك نقوم بفتح الدريم ويفر .. نجد الاضافة موجودة في شريط insert كما في الصورة .

نضغط على F6 لجعل الجداول تظهر متمددة ..
كما بالصورة
الآن نأتي لأخطر الخطوات والشغل الجد والمهم جدا جدا
التركيز مطلوب .. الصورة القادمة بها الخطوات وتتكون من 4 صور ب 4 خطوات
1- نعلم على الخلية او الصورة فيها .. نجد في proprerts في الدريم ويفر يظهر الشكل في الصورة رقم 1 .. نقوم بالتعليم على مسار الصورة المكتوب في scr
2- نقوم بمسح الصورة نفسها من داخل خلية الجدول ... ثم نعلم مكانها في خلية جدولها ..
3- يظهر لنا الشكل رقم 3 وفيه نقوم بعمل لصق لكود code مسار الصورة الذى اخذناه في الخطوة 1 ووضعه في المسار bg .. وهو مسار خلفية الجدول ..... لماذا ؟؟
لأنه لن يعمل القالب template اذا كانت الصورة موجودة لانه لن يتم وضع الكلام فوق الصورة والاثنين في طبقة واحدة لذا نجعل الصورة كخلفية لخلية الجدول .. فتتمدد مع تمدد الصفحة .
4- نكرر نفس الخطوات مع خلايا الصفة كلها ... ولا ننسى شيء منها .

في اضافة Joomla Solution التي اضفناها نجد هذه الايقونات .. حيث تكون كل ايقونة تمثل جزءا من القالب template ..فمثلا يوجد
مربع البحث .. مكان موديلات user1 , user2 , ومكان لل body ولكــــــــن احذر ..
هذه الضافة لقوالب جملة joomla 1.0 .. ولكن كما قلنا مع جملة joomla العرب لن تجد لليأس طريق .
في الجداول الأساسية عندنا في قالب templateنا .. في ال body سننشطه ونضغط على ايقونة ال body في شريط JoomlaSolution .
وفي مكان كل موديل نضغط على ايقونة كل موديل ووضعها في مكانها ...
في هذه الاضافة تعطيك user1 , user 2 فقط .. فلا يهمنا ذلك .. قم بتكرارهم كما تشاء .. ثم سنعدل عليهم في كود code قالب templateنا من خلال الدريم ويفر .
قبل ان ننتقل من هنا يجب علينا وضع ايقونات ال php التي وضعناها في جداول قالب templateنا كما في الصورة ال right , top
ويتم تعديلها من شريط properties اسفل .
الآن نضغط على ايقونة Code كود code في شريط الدريم ويفر .. ثم نحذف الكود code المشار اليه في الصورة التالية .. ونستبدله بكود code جملة joomla 1.5 وهو الكود code الملائم الي العمل مع محركات البحث وال sef وهو ليس الا مقدمة لصفحة ال php ..
الكود code المراد هو موجود في مقدمة اي قالب template جملة joomla لذا نأخذه وننسخه من القالب template الافتراضي لجملة joomla rhuk Milkawy وننسخ من المقمة اعلى ال head/ كما في الصورة .
مع مسح السطر الخاص بال dir اى اتجاه الصفحة لانه سيقلب اتجاه الجداول ويسيء المظهر .

الجزء الثالث

ثم نقوم الآن بتحويل قالب templateنا من جملة joomla 1.0 الى جملة joomla 1.5 ... عن طريق 4 خطوات ..
1- اولها تغيير الهيدر header في المود كما شارنا في الصورة السابقة.
2- تغيير سطر ال php الخاص بالموديلات <?php mosLoadModules ( 'header', -3 ); ?>
الى <jdoc:include type=&quot;modules&quot; name=&quot;header&quot; style=&quot;xhtml&quot; />
حيث header هو اسم الموديل ... وهنا style يمكن ان يكون لها 4 خيارات .. في قوالبنا يفضل none
فيمكن ان تكون xHtml .. وهي تأخذ تنظيم القالب template
rounded .. اى تكون دائرية .. ليس في الشكل ولكن ف المظهر العام حيث تحاط بدوال css لعرض صور حولها ونحن لا نحتاج لهذا الخيار لأننا صممناها بطريقة الجداول ..
table اى تكون جدول وهذا ما نحن عليه ..
او تكون outline اى محددة خارجيا بلون محدد من ال Css .
3- الخطوة الثالثة وهي تحويل ال Body من <?php mosMainBody(); ?
الى <jdoc:include type=&quot;component&quot; style=&quot;xhtml&quot;
هنا انا لم اضف ناهية السطر حتى تظهر في الموضع فيجب عليك اضافة في السطر الماضي />
4- نسخ محتويات قالب template جملة joomla 1.5 الأساسية الى مسار قالب templateنا ليكون مجلد القالب template كما بالشكل


حيث هذه الارقام تدل على مايلي
1- مجلد ال css لملفات القالب template .
2- مجلد الصور التي حصلنا عليها من قبل من برنامج الفوتوشوب .
3- ايقونة المفضلة التي تظهر بجانب عنوان موقعك في المتصفح .
4- صفحة index.html فارغة .
5- صفحة ال index للقالب template والتي بعد انتهاء تعديلنا قمنا بحفظها بهذا الاسم index.php
6- المتغيرات الخاصة بالقالب template .. لا يهم وجودها الا اذا ابدعنا عمل احترافي واخرجنا قالب template باكثر من استايل style وهنا يمكننا وضع المتغيرات والتي تظهر في صفحة ادارة القالب template .
7- الصورة المصغرة للقالب template.
8- ملف ال xml المعرف للقالب template .. ونقوم بتعديله بمايلي .


وهذا هو المحتوى
<name>joomlarab
<creationDate>21/03/09

<--------- اسم صاحب القالب template author>Dr Mohamed Fawzy
------- اسم بريد صاحب القالب template <authorEmail> adminjoomlarab.net هذا البريد الالكتروني محمى من المتطفلين , يجب عليك تفعيل الجافا سكر يبت لرؤيته \>
<authorUrl>http://www.joomlarab.net-------- الموقع صاحب القالب template
<copyright>---- حقوق القالب template
<- --- الاتفاقيةlicense>GNU/GPL\
<version>1.0.2 رقم الاصدار
<description>TPL_Joomlarab وصف القالب template .
وبعدها نضع تعريفات لاماكن الصور في القالب template كما هو في ملف ال xml ..
وبعدها قم بتنصيب setup قالب templateك كما تشاء من خلال لوحة التحكم .. او من خلال رفعها الى مجلد موقعك .
حيث بعد التنصيب setup تأكد انه يظهر هنا كما في الصورة .


ثم نجعله القالب template الافتراضي ونضغط معاينة ونشاهد قالب templateنا ... وهذا هو قالب templateي .. قالب template Joomlarab.
نلاحظ وجود الكتابة الى اليسار و المظهر لا يعجبك . وذلك لأننا استخدمنا ملف ال css للقالب template الأجنبي .. وجاري تحضير ملف css عربي أصيل من صنع ايدينا نحن جملة joomla العرب الداعم العربي لجملة joomla .

قبل ان ننهي .. يجب ان اذكر ان هذه الطريقة ليست هي المستخدمة من الشركات العالمية الكبرى .. لان هذه الطريقة تعارض ال web 2.0 . ولكن تبقى هي الأفضل لكل مصم عربي .
تم بحمدالله .. درس مفصل كيفية عمل قالب templateك في جملة joomla بدون وجود اي خبرة مع ادارة القوالب اكواد جملة joomla ..
ولكن لحظات قبل ان ننهي هذا الدرس مفصل ..
هل عرفت الآن من هو يدعمك دون مقابل .. هل علمت من يعمل ويعطيك كل ما عنده ...؟؟؟؟؟؟؟
هل عرفت الفرق الآن ..
عفوا سيدي الفاضل .. فالفرق كبيــــر .... و حسبنا الله وكفى به حسيباً .
نهاية ارجو من كل من انتفع بهذا الدرس مفصل انينفعنا بدعوته لنا وبتعليقه على عملنا لدعمنا الى الأمام لا للتحبيط والتقليل من اعمالنا .. والحمد لله وتعالى الله عما تصفون .

المصدر :: دائما وابدا :: داعمك العربي :: جملة joomla العرب :: www.JoomlArab.Net
مصدر دليل المقال


د\ محمد فوزي .






©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©