دورة مطور لتصميم الاستايل styleات(درس مفصل تأطير الاقسام الرئيسية)

[admin]

http://www.dzbatna.com/images/icons/iconrote.gif ط¯ظˆط±ط© ظ…ط·ظˆط± ظ„طھطµظ…ظٹظ… ط§ظ„ط§ط³طھط§ظٹظ„ط§طھ(ط¯ط±ط³ طھط£ط·ظٹط± ط§ظ„ط§ظ‚ط³ط§ظ… ط§ظ„ط±ط¦ظٹط³ظٹط©) (http://www.dzbatna.com/t937984/)




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

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

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

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

الشرح طريقة فيديو

حمل الفيديو من هــــنا (http://www.zshare.net/download/170308776808c298/)

الحجم: 12 ميجا


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


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

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

http://www.mtwer.com/index.php?action=getfile&id=1187


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

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

1- forumhome
2- forumhome_forumbit_level1-nopost

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

http://www.mtwer.com/index.php?action=getfile&id=1188


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

http://www.mtwer.com/index.php?action=getfile&id=1189

http://www.mtwer.com/index.php?action=getfile&id=1190

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

http://www.mtwer.com/index.php?action=getfile&id=1191


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

http://www.mtwer.com/index.php?action=getfile&id=1192


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

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

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

شوف الصورة

http://www.mtwer.com/index.php?action=getfile&id=1193


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

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

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

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

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


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

http://www.mtwer.com/index.php?action=getfile&id=1194

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

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

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

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

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

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

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

http://www.mtwer.com/index.php?action=getfile&id=1195

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

######

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

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

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

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


http://www.mtwer.com/index.php?action=getfile&id=1196



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

http://www.mtwer.com/index.php?action=getfile&id=1198

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

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

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



http://www.mtwer.com/index.php?action=getfile&id=1197



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

########



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


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


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

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


http://www.mtwer.com/index.php?action=getfile&id=1199



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


نختار اى واحد


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


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



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

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

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





والحين

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

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



http://www.mtwer.com/index.php?action=getfile&id=1200



http://www.mtwer.com/index.php?action=getfile&id=1201


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

forumhome_forumbit_level1_nopost



http://www.mtwer.com/index.php?action=getfile&id=1202




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

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

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


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



http://www.mtwer.com/index.php?action=getfile&id=1203


والى هنا ينتهى الدرس مفصل


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






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/txt.gif FORUMHOME-2.txt (http://www.traidnt.net/vb/attachments/284960d1218932087-forumhome-2.txt) (7.2 كيلوبايت, عدد مرات المشاهدة 360 مرة)

http://www.traidnt.net/vb/images/attach/txt.gif forumhome_forumbit_level1_nopost-2.txt (http://www.traidnt.net/vb/attachments/284961d1218932087-forumhome_forumbit_level1_nopost-2.txt) (1.4 كيلوبايت, عدد مرات المشاهدة 388 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©