تصميم قالب template جملة joomla بإحتراف [الجزء الأول] قنبلة المنتديات

[walid]

السلام عليكم ورحمة الله وبركاته،

سيتم شرح طريقة طريقة تصميم قالب template جملة joomla [ إحترافي ] من الألف إلى الياء .. ويعتبر هذا الشرح طريقة [حصريا فقط ] لمنتديات زووم إن.

أولا: متطلبات التصميم


برنامج فوتوشوب [ يفضل إستخدام الإصدار الجديد CS4 ]


ويمكن تحميله من هنـــا







http://z00m-n.com/link/497
http://z00m-n.com/link/498
http://z00m-n.com/link/499
http://z00m-n.com/link/500
http://z00m-n.com/link/501
http://z00m-n.com/link/502
http://z00m-n.com/link/503
http://z00m-n.com/link/504
http://z00m-n.com/link/505
http://z00m-n.com/link/506






برنامج دريم ويفر [ يفضل استخدام الإصدار Dreamweaver CS4 ]

ويمكن تحميله من هنـــا







http://z00m-n.com/link/507 (http://z00m-n.com/link/507)

http://z00m-n.com/link/508

http://z00m-n.com/link/509






الملحق الخاص بالدريم ويفر لتصميم قوالب جملة joomla


ويمكن تحميله من هنـــــا







http://z00m-n.com/up//view.php?file=7680d69523




-

القسم الأول من الشرح طريقة [ الإعدادات الأولية ]

أولا هذا مثال بسيط تطبيقا للشرح طريقة وإن شاءالله إبداعاتكم ستكون أفضل

www.z00m-n.com (http://z00m-n.com/)

بعد تثبيت setup البرامج السابقة .. قم بتصميم القالب template الخاص بك كما موضح في الصورة التالية:

http://z00m-n.com/up//uploads/images/z00m-nda7d8505d3.jpg


بعد تصميم القالب template قم بإختيار أداة تقطيع التصميم كما موضح في الصورة التالية:

http://z00m-n.com/up//uploads/images/z00m-n683452b9ac.jpg

بعد ذلك قم بتقطع التصميم كما موضح في الصورة التالية [لاحظ أن المستطيلات ذات اللون الأحمر هي مناطق تمدد]

http://z00m-n.com/up//uploads/images/z00m-n22ef497aeb.jpg

ملاحظة: المناطق الممدة تستخدم لجعل التصميم بإمتداد الصفحة بالكامل

قم بالإختيار من قائمة File كما موضح في الصورة التالية

http://z00m-n.com/up//uploads/images/z00m-nc9f49d5a03.jpg

ستظهر الصورة التالية قم بإتباعها




http://z00m-n.com/up//uploads/images/z00m-n5873d3e349.jpg

سيظهر مربع الحوار التالي .. قم بإختيار كما هو موضح في الصورة

http://z00m-n.com/up//uploads/images/z00m-nb00e4c0268.jpg

http://z00m-n.com/up//uploads/images/z00m-nabe23784ff.jpg

قم بعمل الإعدادت كما موضح في الصورة:

http://z00m-n.com/up//uploads/images/z00m-ndd01ce72e2.jpg

ثم قم بحفظ العمل وإختيار الاسم المناسب


الآن توجه إلى برنامج Dreamweaver CS4 وقم بعمل الإعدادات التالية:

من القائمة العلوية إختار Site ثم قم بإختيار New Site

http://z00m-n.com/up//uploads/images/z00m-ndb61f10cef.jpg

قم بعمل الإعدادات التالية بعد ظهور مربع الحوار التالي:

http://z00m-n.com/up//uploads/images/z00m-nc7d72d9fbd.jpg

بعد عمل الإعدادت ستظهر لك هذه القائمة في الجانب الأيمن من البرنامج:

http://z00m-n.com/up//uploads/images/z00m-n57881c5012.jpg

الآن قم بالضغط على خيارات الإضافة JTK 3

http://z00m-n.com/up//uploads/images/z00m-na153544d2c.jpg

وإتبع الصورة

http://z00m-n.com/up//uploads/images/z00m-n6742b3c76b.jpg

الآن قم بإختيار القائمة الثانية من الإضافة

http://z00m-n.com/up//uploads/images/z00m-n3992864e29.jpg

وقم بإتباع الشرح طريقة

http://z00m-n.com/up//uploads/images/z00m-ncb5d79f135.jpg

قم بتعبئة البيانات التالية:

http://z00m-n.com/up//uploads/images/z00m-n8ef47cd497.jpg

بعد ضبط الإعدادات ستظهر ملفات الـ CSS الخاصة بالقالب template في أعلى البرنامج كما موضح في الصورة

http://z00m-n.com/up//uploads/images/z00m-ndd7dd64764.jpg

قم بإضافة الكود code التالي أعلى الملف كما موضح في الصورة




رمز Code:
dir="rtl"


http://z00m-n.com/up/uploads/images/z00m-n2d07491ffb.jpg

قم بفتح ملف template.css بالضغط عليه من القائمة العلوية وأضف إليه الكود code التالي كما موضح في الصورة

الكود code:




رمز Code:
@import url (template_rtl.css);


http://z00m-n.com/up//uploads/images/z00m-n5af22d0d36.jpg

ستظهر لك ملفات CSS جديدة

http://z00m-n.com/up//uploads/images/z00m-n5b35ea5480.jpg


في الدرس مفصل القادم سيتم شرح طريقة طرق التعديل على خواص الـ CSS وشرخ أهم الخصائص المتعلقة بتصميم القوالب .. وفي حال وجود أي استفتسار قم بكتابته من خلال الموضوع

رجاء خاص: في حال نقل الدرس مفصل لمواقع أخرى الرجاء ذكر المصدر - منتديات زووم إن




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©