http://www.dzbatna.com/images/icons/icon30.gif ط¯ط±ط³ ط¨ط§ظ„طµظˆط± ظˆط§ظ„ط´ط±ط* ط§ظ„ظ…ظ…ظ„ طھط£ط·ظٹط± ط±ط¨ط§ط¹ظٹ ظ„ظ‚ط§ظ„ط¨ ط§ظ„ظ†ط§ظپط¨ط§ط± Navbar ظˆظ‚ط§ظ„ط¨ ط§ظ„ظپظˆط±ظ… ظ‡ظˆظ… Fotumhome
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اسعد الله مساءكم جميعا
اخواني الكرام ...
في الآونة الأخيرة قد تمت اضافتي على اميلات عديدة
يطلبون الأخوة الكرام مني شرح طريقة تأطير رباعي لقالب template الـ Navbar وقالب template الـ Forumhome
هذا لتوفيق من الله عز وجل في درس مفصل شرح طريقة التأطير العادي !
همسة : حتى تخرج من الدرس مفصل بفائدة بإذن الله اقرأ كل الكلام .
لا اريد ان اطيل عليكم فـ
" خير الكلام ما قل ودل "
http://upload.dzbatna.net/upfiles/6zW20140.jpg
نبدأ بسم الواحد الأحد ....
نقوم أولا بتصميم الإطار المراد
حسب الرغبة
وهذا مثال :
http://upload.dzbatna.net/upfiles/C8d61979.jpg
---------------------------------------------------------------------------------
الآن نأتي لتقطع التصميم
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/mk762115.jpg
ملاحظات على الصورة السابقة :
الآن بعد ان انتهينا من التقطيع نقوم بالحفظ على شكل صفحة ويب
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/9Pz62179.jpg
نكمل الصورة التالية :
http://upload.dzbatna.net/upfiles/GDR62365.jpg
حتى يصبح بعد الحفظ لدينا
صفحة html + مجلد صور ( وهو المطلوب )
وهذا مجلد الصور وفيه الصور التي قمنا بتقطيعها
http://upload.dzbatna.net/upfiles/dpJ62503.jpg
---------------------------------------------------------------------------------
الآن نذهب الى قائمة إبدأ ونفتح برنامج لـ فرونت بيج | Front Page
http://upload.dzbatna.net/upfiles/Cfs62823.jpg
نذهب الى قائمة تعليمات برمجية
اسفل الفرونت بيج :
http://upload.dzbatna.net/upfiles/eml62894.jpg
الآن نقوم بحذف الكود code الذي تحتويه الصفحة في التعليمات البرمجية
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/Jh962968.jpg
بعدها نعود الى قائمة تصميم
ايضا اسفل الفرونت بيج بجانب قائمة تعليمات برمجية
http://upload.dzbatna.net/upfiles/jDh63003.jpg
نقوم بإنشاء جدول حسب التصميم الذي قمنا بتقطيعه ( وحسب عدد الصور )
http://upload.dzbatna.net/upfiles/evn63037.jpg
الآن نقوم بتعديل إعدادات الجدول :
http://upload.dzbatna.net/upfiles/yqD63069.jpg
نقوم بتعديل الإعدادات حسب الصورة التالية :
http://upload.dzbatna.net/upfiles/8x763098.jpg
الآن نذهب الى أول خلية من القائمة اليسار ونضع فيها الصورة التالية :
http://upload.dzbatna.net/upfiles/JrM63163.jpg
الآن نقوم بسحب حد الخلية إلى نهاية الجدول :
http://upload.dzbatna.net/upfiles/oFa63189.jpg
حتى تصبح بالشكل التالي :
http://upload.dzbatna.net/upfiles/UBT63214.jpg
نقوم الآن بوضع الصور الغير متمددة بأماكنها وسحب كل حد حسب مكانه كالصورة التالية:
http://upload.dzbatna.net/upfiles/tJi63255.jpg
الآن هناك حدود زائدة ولا فائدة لها من وجودها حتى يصبح الشكل صحيحا
نأخذ اداة الممحاة من قائمة الجداول
http://upload.dzbatna.net/upfiles/xYx63320.jpg
ونقوم بمسح الحدود التالية :
http://upload.dzbatna.net/upfiles/brv63390.jpg
حتى يصبح الشكل كالتالي " لاحظ جيدا " :
http://upload.dzbatna.net/upfiles/yej63412.jpg
الن نأتي لمنطقة التمدد بالأعلى :
http://upload.dzbatna.net/upfiles/yvG63480.jpg
اتبع الصورة التالية :
http://upload.dzbatna.net/upfiles/eL663547.jpg
نختار الصورة الخاصة بمنطقة التمدد
http://upload.dzbatna.net/upfiles/XQI63602.jpg
ونقوم بعمل مناطق التمدد جميعها وهي :
http://upload.dzbatna.net/upfiles/mk762115.jpg
مناطق التمدد هي : ( 3 ، 6 ، 8 ، 10 )
حتى ننتهي من الجدول بأكمله
راح احيانا نلاقي مشكلة في الجدول بعد وضعيه الـ ( معاينة )
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/hju63665.jpg
والمشكلة حلها معي
وهي أن نضع الصورة الخاصة بمنطقة التمدد رقم ( 10 ) فوق الخلفية
نختار الصورة نفسها
حيث أن : اصبح في الخليه السفلي التي تحتو منطقة تمدد رقم ( 10 ) خلفية للخلية متمددة ، والصورة نفسها غير متمددة ، فالصورة لا تؤثر ، فقط تقوم بالتعديل .
http://upload.dzbatna.net/upfiles/rUU64161.jpg
وبعد هيك نعمل معاينة
راح نلاقي المشكلة انحلت
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/Nki64203.jpg
الآن نذهب مرة أخرى الى منطقة : تعليمات برمجية ، لتغير مسار الصور
http://upload.dzbatna.net/upfiles/eml62894.jpg
ونقوم بتحديد المسار تاع الكمبيوتر حتى نضع بدلا منه مسار مجلد صور الستايل style الرسمي
وبعد هيك نضغط على
Ctrl + H
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/nLP64277.jpg
سوف تظهر لنا الآن قائمة
ونقوم بعمل التالي :
http://upload.dzbatna.net/upfiles/3QS64318.jpg
ملاحظات على الصورة السابقة :
الآن نعود الى قائمة ( تصميم ) :
http://upload.dzbatna.net/upfiles/jDh63003.jpg
سنشاهد الجدول بالشكل التالي :
http://upload.dzbatna.net/upfiles/K1I64370.jpg
همسة هامّة : يجب ان نحتفظ في هذه الصفحة لأننا سنحتاجها بقالب template الـ Navbar والـ Forumhome واي قوالب اخرى نريد أن نعمل لها تأطير .
---------------------------------------------------------------------------------
الآن نحضر قالب template الـ Navbar من المنتدى forum
ومن ثم نذهب الى قائمة التعليمات البرمجية في برنامج الفرونت بيج ونحذف الكود code كله ونلصق كود code الـ Navbar
الآن بعد أن الصقنا كود code الـ Navbar نعود الى قائمة الـ تعليمات البرمجية بالأسفل
http://upload.dzbatna.net/upfiles/eml62894.jpg
الآن نريد أن نأخذ كود code الـ Navbar المرد إحاطته بالتأطير :
اتبع الصورة التالية بدقة ...
http://upload.dzbatna.net/upfiles/KTc64412.jpg
شرح طريقة الصورة السابقة :
نقوم بـ قص الكود code من السطر رقم ( 3 ) حتى السطر رقم ( 129 ) .
الآن اصبح الكود code المراد إحاطته بالـ تأطير مقصوص من كود code النافبار واحتفظنا به من خلال النسخ ....
الآن نعود الى الصفحة الأخرى الموجود بها جدول الإحاطة
بعد أن نذهب إليه وهو بوضع الـ ( تصميم ) نضع مؤشر الماوس في الـ خلية الوسط
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/OWQ20019.jpg
بعدها نعود الى قائمة الـ تعليمات برمجية
http://upload.dzbatna.net/upfiles/eml62894.jpg
الآن نقوم بـ لصق الكود code المنسوخ في مكان المؤشر تلقائيا كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/AL164443.jpg
شرح طريقة بسيط للصورة السابقة :
نقوم لصق كود code الـ Navbar في مكان المؤشر دون ان نعمل اي شيء
الآن عندما نعود الى قائمة الـ (تصميم) نلاحظ أن الجدول أصبح هكذا :
http://upload.dzbatna.net/upfiles/bhz19876.jpg
الآن نحن بالصفحة التي يوجد فيها جدول التأطير
نرجع الى قائمة التعليمات البرمجية وننسخ الكود code بأكمله .
بعدما أن نسخنا الكود code نعود الي الصفحة التي تحتوي على قالب template الـ Navbar
ونلصق الكود code بأكمله في مكان الكود code الذي قمنا بقصه قبل
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/ORq64548.jpg
نسخ كود code قالب template الـ Navbar بأكمله ونعود الى لوحة تحكم المنتدى forum ونلصقه بدلا من قالب template الـ Navbar القديم
همسة : يجب أن نكون قد حمّلنا مجلد الصور في مكانه الصحيح.
الآن نستعرض المنتدى forum في متصفح اكسبلورر فنجد النتيجة هكذا
http://upload.dzbatna.net/upfiles/86w64610.jpg
---------------------------------------------------------------------------------
الآن نذهب لـ قالب template الـ Forumhome
مثلما فعلنا بقالب template الـ Navbar تماما
فقط اريد ان اريكم كود code أقسام المنتدى forum ، وكود code إحصائيات المنتدى forum
نحضره في صفحة جديدة بالفرونت بيج
الآن نأتي لقص كود code أقسام المنتدى forum
كما بالصورة التالية :
http://upload.dzbatna.net/upfiles/svV64642.jpg
نقوم بنسخ الكود code من السطر رقم : ( 32 ) ، و حتى السطر رقم ( 58 ).
ونعمل فيه كما عملنا بقالب template الـ Navbar .
---------------------------------------------------------------------------------
الآن نريد تأطير منطقة احصائيات المنتدى forum في قالب template الـ Forumhome
نقوم بنسخ الكود code التالي :
http://upload.dzbatna.net/upfiles/LUs64718.jpg
نقوم بنسخ الكود code من السطر رقم ( 64 ) ، وحتى الكود code رقم ( 161 ).
ونعمل به كما عملنا بقالب template الـ Navbar .
http://upload.dzbatna.net/upfiles/6zW20140.jpg
---------------------------------------------------------------------------------
وبهيك قد انتهينا من الدرس مفصل والحمد لله رب العالمين
ولكن ...... هذا الدرس مفصل تعبت عليه كتير كتير والله ،،
فالمطلوب منكم :
والأهم من ذلك كله :
www.TRAIDNT.net
اخوكم ومحبكم : محمد الحلبي
" KHALED_3316 "
KR332http://www.dzbatna.com/images/mail.gifhotmail.com
الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif shareh.zip (1.96 ميقابايت, عدد مرات المشاهدة 661 مرة) [/TR]
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
