الرئيسية | مركز المعلومات | مركز التحميل | للاعلان في مُطِّورْ | استخدم ختم مطور | قوِ موضوعك هام | وسام مطور جديد | افحص البيج رانك جديد

العودة   مطور , mtwer forum > مطور الدورات المتخصصة > إرشيف الدورات > دورة تصميم ستايلات منتديات الفي بي vBulletin

دورة تصميم ستايلات منتديات الفي بي vBulletin الدورة إنتهت
تضمن لك هذه الدورة أن تتعلم بأسلوب عملي وممتع وسهل الطرق الصحيحة للتمكن من تصميم استايلات منتديات الـ vBulletin بإتقان
ملقي الدورة: [vista-design]


عزيزي المطور ابتعد عن النقل، ولتكن مواضيعك جديدة وقيمة تعبر عن إبداعك وتميزك
موضوع مغلق
 
أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 14-07-2008, 03:48 PM
الصورة الرمزية vista-design
مسؤول قسم الدورات
 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,292
vista-design is on a distinguished road
Arrow الدرس الثالث: درس توزيع الصور على الفرونت بيج


الدرس الثالث: درس توزيع الصور على الفرونت بيج





نستكمل معكم مشوار الدورة

فى الجزء الاول كنا انتهينا من تقطيع الهيدر والفوتر, ونتج لنا ملف images بالصور

الحين راح نأتى للخطوة القادمة , وهى توزيع هذه الصور على الفرونت بيج, حتى ننتج كود الهيدر والفوتر اللى راح نضعه فى الاستايل اللى راح ننتجه فى النهاية

اولا: افتح برنامج الفرونت بيج2003 ,واول ما يفتح راح نقوم بحذف اى اكواد موجوده

شوف...........





ثم من أسفل اضغط على كلمة design

وانت على الصفحة اضغط كليك يمين , ثم خصائص الصفحة page properties

ثم راح نقوم بتغيير اتجاه الصفحة من اليمين لليسار , وحذف كل الحواف وجعلها صفر

شوف.......




شوف.........





الحين لو تتذكر لما قمنا بالتقطيع, قمنا بتطقطيع الهيدر الى ثلاثة اجزء , والفوتر كذلك لثلاثة أجزاء
1-جزء ايسر
2-جزء أوسط
3-جزء أيمن

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

وبين الثلاثة جداول العلوية , والسفلية , راح نقوم بأضافة جدول ويمثل محتوى المنتدى


شوف كيف راح نسوى ذلك.........



اولا : نضيف الجداول العلوية للهيدر
شوف......




ثانيا: نضيف تحته مباشرة جدول واحد لمحتوى المنتدى
شوف..........




ثالثا: نضيف الجداول السفلية للفوتر
شوف.......




والشكل النهائى راح يكون هكذا
شوف.......




الحين بدنا نرجع لمجلد images الذى نتج لما انتهينا من حفظ العمل فى الفوتوشوب

ولما نفتحه راح نجد الصور الاتية:
شوف............



الحين راح نقوم باضافة كل صورة للجدول الخاص بها

شوف......



الجزء الايسر:

نضغط على الجدول الايسر العلوى, ثم نضغط على ايقونة اضافة صورة ونضيف صورة الجزء الايسر للهيدر

شوف........




بالمثل

الجدول الاوسط , ونضيف له صورة الجزء الاوسط (نقطة التمدد)

وراح يكون هيك الشكل النهائى:




الحين راح نترك الجدول الاوسط فاضى , الواقع بين الثلاثة جداول العلوية والسفلية

وننزل للثلاثة جداول السفلية الخاصة بالفوتر, ونطبق بالظبط مثل ما سوينا بالهيدر

شوف الشكل النهائى........





الحين راح نقوم بظبط كل شىء حتى يتوافق ويركب على المنتدى....


اولا: نروح نزيل سمك الجداول

شوف...




نضغط على اى جدول علوى كليك يمين , ونختار table properties
ثم نظبط على الاعدادات الاتية:

شوف......





راح نجعل الاعدادات صفر مثل ما هو مشار بالسهم

ونطبق بالظبط هالكلام , على الجدول الاوسط الواقع بين الهيدر والفوتر
وايضا على جداول الفوتر

شوف الشكل النهائى







الحين بعد ما سوينا هيك راح نقوم بتوزيع الصور لتصبح على شكل خلايا

اولا:


بالنسبة لصورة الجدول الايسر العلوى
دبل كليك على الصورة -- راح يطلع لك مقاسات الصورة احفظها فى بالك
شوف.......





ثم كليك يمين على الصورة اليسرى , ونختار cell properties
وبعدين راح نضيف هالمقاسات مثل اللى بالصورة:

شوف......




بعدين نطبق الكلام بالظبط على الصورة الاتية
صورة الجزء الايمن --هيدر
صورة الجزء الايسر--فوتر
صورة الجزء الايمن -- فوتر

( لاحظ اننا تركنا صورة الجزء الاوسط للهيدر والفوتر)


الحين , بعد ماطبقنا الكلام السابق على الصور اللى قلنا عليها,
وطبعا لا تنسى انه كل صورة ليه مقاس مختلف , راح نحفظه ونحطه فى cell -properties

المهم, راح نرجع الحين لصورة الجزء الاوسط للهيدر والفوتر

شوف بالنسبة صورة الجزء الاوسط للهيدر

راح نضغط على صورة الجزء الاوسط دبل كليك......

شوف......






بعدين راح ننسخ مسار الصورة

شوف........



ثم كليك يمين على الصورة, ونختار cell-properties
وراح نلصق مسار الصورة فى المكان الاتى:

شوف.......




الحين نقوم بعمل ما قمنا به بالظبط على صورة الجزء الاوسط للفوتر

ويكون الشكل النهائى كالاتى:

شوف........




الحين انتهينا والحمدلله من التوزيع

راح نقوم بأخذ كود الهيدر والفوتر

لكن قبل هذا

قم بالظغط على الجدول الاوسط بين الهيدر والفوتر ثم نضغط على التوسيط
شوف
........




الحين نضغط فى اسفل البرنامج على كلمة code

وشوف كيف راح نأخذ كود الهيدر وكود الفوتر

شوف..........






الحين تمام خلصنا من كل شىء

الحين نروح لمنتدانا

وندخل للوحة التحكم

ومن الاستايلات والقوالب -- ثم التحكم بالاستايلات ثم اذهب


بالنسبة للهيدر
راح نقوم بحذف كل الكود الموجود فوق كلمة

$spacer_open

$_phpinclude_output


ونترك هذول (مهم جدا)

شوف ......



بالنسبة للفوتر


راح نترك الكود الموجود كله
وراح نضع الكود اللى حفظناه بالمفكرة مباشرة بعد الكود الموجود

شوف....



بعدين انزل لتحت واحفظ......


الحين روح شوف المنتدى

مبروك على تركيب الهيدر والفوتر



ملحوظه: صور الهيدر والفوتر لن تظهر وانت على متصفح فايرفوكس لاننا لسه ما جينا لتعديل الروابط
لذلك بفضل تشغل الانترنت الاكسبلورر حتى تشوف ناتج العمل


ملاحـــــــــــــــــــــظـــــــــــــه


للذين يعانون من اللغة مع انى مو شايف فيها مشكلة


table properties=خصائص الجدول
cell properties =خصائص الخلية
page setup=اعدادات الصفحة
width=العرض
lenght=الطول
centre=المنتصف

هذا يمكن اللى راح نستخدمه فى شغلنا

غير هيك ما فى


بالتوفيق






انتظروا الدرس الثالث

اعدادات الcss


اخوكم vista-design







توقيعى
أسم الشركـــه : فيستا للأستضافة والتصميم
رابط الشركة:www.vistacompany.org
صاحب الشركه : محمد أمين عبد المعبود
أداء الشركـــه :استضافة-تصميم وتطوير المواقع والمنتديات
بريد الشركـــه : admin[at]vistacompany.org
هاتف الشركه : 0020private in email

آخر تعديل بواسطة vista-design ، 01-08-2008 الساعة 06:21 PM


موضوع مغلق

العلامات المرجعية



مواضيع جديدة في قسم دورة تصميم ستايلات منتديات الفي بي vBulletin

أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are معطلة
Pingbacks are معطلة
Refbacks are معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
طلب مساعده \ ممكن شرح توزيع الستايل المتوسط على الفرونت بيج سلييط اللسان صيانة و دعم فني منتديات و حل مشاكل المواقع 2 15-12-2009 03:21 AM
مناقشة درس توزيع الصور على الفرونت بيج هنا vista-design دورة تصميم ستايلات منتديات الفي بي vBulletin 125 28-08-2008 07:53 AM
سجل الزوار...الدرس الثالث aymax.net 2 دورة برمجة الـ PHP (المستوى الأول) 0 23-08-2008 07:01 PM
مناقشة الدرس الثالث المحترف دورة ادارة السيرفرات (المستوى الأول) 156 19-08-2008 01:57 AM


قران كريم يوتيوب فيديو العاب بنات بلياردو العاب سيارات


جميع الأوقات بتوقيت GMT +3. الساعة الآن 10:01 PM.