s3cTur3.dll
°ˆ~*¤®§(*§الأداَره §*)§®¤*~ˆ°
المشاركات : 749
تاريخ الميلاد : 14/04/1998
تاريخ التسجيل : 13/09/2010
العمر : 26
الجنس : 
 |  موضوع: :: دوره تصميم أستايلات في بي :: الدرس السادس :: شرح تأطير الاقسام الرئيسية للمنتدى  السبت مارس 05 2011, 20:20 | |
| الدرس الخامس:شرح تأطير الاقسام الرئيسية
بسم الله الرحمن الرحيم
نستكمل معكم ما بدأنا به
ونأتى لدرس تأطير الاقسام
اولا: شرح كيفية عمل التأطير على الفوتوشوب + تقطيعه +تصديره ضمن درس تعلم تصميم الاستايلات
الشرح فيديو
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
او رابط مباشر على سيرفر مطور من [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
الحجم: 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
طبعا انا استخدمت هالقالب , لان الاقسام مفصولة عن بعضها
لذا تتطلب تعديل لهالقالبين
الحين نروح للمنتدى ونشوف
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
والى هنا ينتهى الدرس
والحين بدى اشوف الجميع تطبق هذا الدرس من دروس تعلم تصميم استايل منتدى , وتضع الشغل اللى سويته
وانا تعمدت انى ما اطلع الشغل بالظبط
حتى تجرب انت
ولا ليش انت داخل الدروة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
| |
|
