اللهم لك الحمد ، ومنك الفرج ، واليك المشتكي ، وأنت المستعان ، ولا حول ولا قوة الا بك ..
 
  الصحيفة التقنية  | الصفحة الرئيسية  | مركز تحميل مطور  | استخدم ختم مطور  | قوِ موضوعك هام |  أعلن في مُطِّورْ   | شرح السي بانل جديد |  افحص البيج رانك  | دعم فني مجاني RSS Facebook twitter Youtube




العودة   مطور Mtwer > أقسام دورات و دروس مطور المتخصصة > قسم الدروس والدورات العام > إرشيف الدورات > دورة تصميم ستايلات منتديات الفي بي vBulletin


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

عزيزي المطور ابتعد عن النقل، ولتكن مواضيعك جديدة وقيمة تعبر عن إبداعك وتميزك
موضوع مغلق
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 14-07-2008, 03:50 PM
الصورة الرمزية vista-design
:: + عضو شرف + ::
الرتبةالرتبةالرتبةالرتبة
 

vista-design يستحق التميز

بيانات موقعي :
اصدار المنتدى : لا أملك منتدى
تعلم تصميم الاستايلات، الدرس السادس :شرح تأطير الاقسام الرئيسية للمنتدى

تعلم تصميم الاستايلات (تعلم تصميم الاستايلات، الدرس السادس :شرح تأطير الاقسام الرئيسية للمنتدى)، في مطور تعلم تصميم الاستايلات باحترافية، دورة تصميم الاستايلات على مطور تقدم لك فرصة مميزة لكي، تعلم تصميم استايل بسهولة و تعلم تصميم استايلات في بي المختلفة والمتنوعة و تعلم تصميم استايل في بي او تعلم تصميم استايل منتدى على مطور يمنحك الفائدة والمتعة، لنبدأ دروس دورة تعلم تصميم منتدى

الدرس الخامس:شرح تأطير الاقسام الرئيسية

بسم الله الرحمن الرحيم

نستكمل معكم ما بدأنا به
ونأتى لدرس تأطير الاقسام

اولا: شرح كيفية عمل التأطير على الفوتوشوب + تقطيعه +تصديره ضمن درس تعلم تصميم الاستايلات

الشرح فيديو

حمل الفيديو من هــــنا


او رابط مباشر على سيرفر مطور من هــــــــــنـــــــا

الحجم: 12 ميجا


ملاحظه هامه: بعد الانتهاء من العمل اللى فى الفيديو, لا تنسى وتحفظ العمل الذى قمت به على هيئة ملف psd لاننا راح نستخدمه لاحقا فى هذا الدرس درس تعلم تصميم الاستايلات


ثانيا: توزيع صور التأطير على الفرونت بيج حول الاقسام ضمن درس تعلم تصميم الاستايلات

1- نروح نفتح الفرونت بيج
2-نضغط على code ثم نحذف كل مابه




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

قم بتحميل القالبين من المرفقات واسماء القوالب هى

1- forumhome
2- forumhome_forumbit_level1-nopost

4- افتح بالمفكرة القالب الثانى forumhome_forumbit_level1-nopost
ثم انسخ كل الكود , وقم بلصقه فى الفرونت بيح بدل الكود اللى حذفناه




5- الحين اضغط بالماوس بالمنطقة المشار اليها كما بالصورة, ثم
قم بأضافة ثلاثة جداول علوية





6- بالمثل نقوم بأضافة ثلاثة جدول سفلية اصفل القالب مباشرة




7- الحين راح يكون الشكل هيك:




8- تابع معنا درس تعلم تصميم منتدى، الحين راح نقوم بتوزيع الصور الخاصة بالتأطير اللى قم بعملها فى شرح الفيديو فوق......

ولكن لاحظ (مهم) اننا راح نقوم بعكس التوزيع للصور

يعنى اللى فى اليسار راح نضفيه للجدول اليمين والعكس

شوف الصورة




شوفت ,التوزيع بالعكس ,

طبعا كل جدول راح تستودر الصوره الخاصة به

وتسوى مثل ما شرحنا فى تصميم الهيدر ( لكن بالعكس)

وحتى تعرف ارقام الصور اللى راح تضفها لكل جدول

افتح ملف psd اللى كنا حفظناه وشوف كل رقم قطعه , واستورد الرقم الخاص بالصورة فى الجدول المناسب لها ( لا تنسى بالعكس )


الحين بعد ما اضفنا الصور راح يكون الشكل هيك



الحين نأتى للظبط

9- اولا/
شوف الصور 4و2
والصور 9 و11

راح نجعلهم خلية

راح أعطى مثال على صورة واحدة وتطبق الباقى على الصور الباقية

الحين دبل كليك على الصورة رقم 4 ثم نحفظ ارقام المقاسات

الحين وانت على نفس الصورة(4) , اضغط كليك يمين ثم اختار cell properties

ثم راح نلصق المقاسات كما فى الصورة الاتيه:



طبق الكلام السابق على الصور 2 و 9 و 11

######

والحين نأتى للصور 3و10 اللى فى الوسط

وهذه راح نجلعها خلفية

طبعا هالموضوع شرحته من قبل فى درسنا السابق(تصميم الهيدر والفوتر) ضمن دورة تعلم تصميم منتدى
يعنى الفكرة واحده

شوف راح نضغط دبل كليك على الصوره
ثم نضغط على general فوق وننسخ رابط الصورة فوق






ثم قم بحذف الصوره هذه



ثم وانت على الجدول الاوسط اللى حذفنا منه الصوره

كليك يمين ثم اختار cell properties

ثم نلصق مسار الصورة







ونطبق السابق بالمثل على الصورة الوسطى السفلى رقم 10 ضمن درس تعلم تصميم استايل منتدى

########



10- ثم نقوم بعمل الاتى لنختم عملنا
وهو ازالة حدود الجداول


على اى جدول علوى


كليك يمين -- ثم table properties

شوف راح نصفر ونوسط القيم






بالمثل نسوى ذلك على الجداول السفلية


نختار اى واحد


كليك يمين ثم اختار table properties


ونصفر ونوسط القيم كالسابق



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

ونقوم بنسخ الكود كله ....

ونحفظه فى مفكرة


والحين

للوحة تحكم المنتدى ثم الاستايلات والقوالب ثم البحث قفى القوالب

ثم نقوم بالبحث عن قالب forumhome_forumbit










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

forumhome_forumbit_level1_nopost








بالمثل نروح نبحث فى القوالب عن قالب forumhome ثم نمسح الكود الموجود ونستبدله بالقالب المرفق اللى اسمه forumhome

طبعا انا استخدمت هالقالب , لان الاقسام مفصولة عن بعضها

لذا تتطلب تعديل لهالقالبين


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






والى هنا ينتهى الدرس


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

وانا تعمدت انى ما اطلع الشغل بالظبط
حتى تجرب انت

ولا ليش انت داخل الدروة

اشكر الجميع في ختام هذا الموضوع ضمن دورة
تعلم تصميم الاستايلات (تعلم تصميم الاستايلات، الدرس السادس :شرح تأطير الاقسام الرئيسية للمنتدى)، في مطور تعلم تصميم الاستايلات باحترافية، على متابعتهم لدورة تصميم الاستايلات على مطور حيث نقدم لك فرصة مميزة لكي تعلم تصميم استايل بسهولة و تعلم تصميم استايلات في بي المختلفة والمتنوعة و تعلم تصميم استايل في بي او تعلم تصميم استايل منتدى على مطور يمنحك الفائدة والمتعة، لتحترف دروس دورة تعلم تصميم منتدى
الملفات المرفقة
نوع الملف: txt FORUMHOME-2.txt‏ (7.2 كيلوبايت, المشاهدات 1067)
نوع الملف: txt forumhome_forumbit_level1_nopost-2.txt‏ (1.4 كيلوبايت, المشاهدات 1118)
التوقيع :
عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

----------------
اول برمجياتى,اسكربت AraDown العملاق لاشهار المواقع وزيادة دخلك من ادسنس

http://aradown.info

آخر تعديل بواسطة vista-design ، 04-09-2010 الساعة 01:50 AM.
قديم 14-08-2008, 09:44 PM   رقم المشاركة : [2]
مطور جديد
الرتبة
الصورة الرمزية shnaidr_8
 

shnaidr_8 يستحق التميز

بيانات موقعي :
إسم الموقع :
اصدار المنتدى :
مشكور اخي vista-design على مجهودك ... وننتظروا باقي دروسك يا مبدع ...


التوقيع:

عضو جديد في معهد مطور التطويري - Mtwer.com/vb
يمكنك تعديل التوقيع من خلال لتوحة تحكمك الخاصة عبر الرابط التالي : لوحة التحكم

shnaidr_8 غير متواجد حالياً  
موضوع مغلق

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

الكلمات الدلالية (Tags)
تعلم تصميم منتدى, تعلم تصميم الاستايلات, تعلم تصميم استايل, تعلم تصميم استايل منتدى, تعلم تصميم استايل في بي, تعلم تصميم استايلات في بي, تعيلم تصميم الاستايلات, دورة تصميم الاستايلات

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

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

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

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

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

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
دورة الفيس بوك، شرح عناصر القائمة الجانبية للصفحة الرئيسية (انشاء قوائم الأصدقاء)-[الدرس السادس] SEO Master الفيس بوك Facebook بدأت دورة شرح الفيس بوك الآن! 24 12-05-2011 05:14 PM
[الدرس الثاني] شرح اهم الخيارات + عمل الاقسام + تركيب الهاكات و الاستايلات . ابن الجزائر قسم تطوير منتديات vb3.8.0 1 13-05-2010 05:17 AM
مشكله في تقسيم الاقسام في الصفحة الرئيسية للمنتدى zainvb دعم فني ، و صيانة المنتديات مجاناً 4 07-10-2009 03:20 PM




Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.5.2
new notificatio by 9adq_ala7sas
الحقوق محفوظة لكل المطورين والمواقع العربية

Security team


المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد مطور ولا نتحمل أي مسؤولية قانونية حيال ذلك ( ويتحمل كاتبها مسؤولية النشر )

جميع الأوقات بتوقيت GMT +3. الساعة الآن 07:24 AM.