الموضوع: تصميم قالب جملة بإحتراف [الجزء الأول] قنبلة المنتديات
عرض مشاركة واحدة
  #1  
قديم 05-05-2009, 07:40 AM
الصورة الرمزية العاشق 2005  
رقـم العضويــة: 365
تاريخ التسجيل: Sep 2008
المشـــاركـات: 94,808
نقـــاط الخبـرة: 85
الأوسمة والجوائزالأوسمة
افتراضي تصميم قالب جملة بإحتراف [الجزء الأول] قنبلة المنتديات
السلام عليكم ورحمة الله وبركاته،

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

أولا: متطلبات التصميم
  • برنامج فوتوشوب [ يفضل إستخدام الإصدار الجديد CS4 ]
    • ويمكن تحميله من هنـــا
  • برنامج دريم ويفر [ يفضل استخدام الإصدار Dreamweaver CS4 ]
    • ويمكن تحميله من هنـــا
  • الملحق الخاص بالدريم ويفر لتصميم قوالب جملة
    • ويمكن تحميله من هنـــــا
[line]-[/line]

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

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

www.z00m-n.com

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




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



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



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

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



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



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





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



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


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

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



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



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



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



وإتبع الصورة



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



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



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



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



قم بإضافة الكود التالي أعلى الملف كما موضح في الصورة
رمز Code:
dir="rtl"



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

الكود:
رمز Code:
@import url (template_rtl.css);



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




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

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