6:02 صباحًا السبت 15 ديسمبر، 2018

درس تاطير الاقسام


صور درس تاطير الاقسام

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

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

اولا: شرح كيفيه عمل التاطير على الفوتوشوب تقطيعه تصديره

الشرح فيديو

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

الحجم: 12 ميجا

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

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

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

راح نستخدم قالبين جاهزين للعمل عليهم

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

1 forumhome
2 forumhome_forumbit_level1-nopost

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

و قم بلصقه في الفرونت بيح بدل الكود اللي حذفناه
5 الحين اضغط بالماوس بالمنطقه المشار اليها كما بالصورة, ثم
قم باضافه ثلاثه جداول علوية
6 بالمثل نقوم باضافه ثلاثه جدول سفليه اصفل القالب مباشرة
7 الحين راح يكون الشكل هيك:
8 الحين راح نقوم بتوزيع الصور الخاصه بالتاطير اللي قم بعملها في شرح الفيديو فوق……

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

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

شوف الصورة
شوفت ,

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


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

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

افتح ملف psd اللي كنا حفظناه و شوف كل رقم قطعه ,

و استورد الرقم الخاص بالصوره في الجدول المناسب لها لا تنسي بالعكس p)
الحين بعد ما اضفنا الصور راح يكون الشكل هيك
الحين ناتي للظبط

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
طبعا انا استخدمت هالقالب ,

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

145 views

درس تاطير الاقسام