|
درس بالصور والشرح الممل تأطير رباعي لقالب النافبار Navbar وقالب الفورم هوم Fotumhome بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته اسعد الله مساءكم جميعا اخواني الكرام ... في الآونة الأخيرة قد تمت اضافتي على اميلات عديدة يطلبون الأخوة الكرام مني شرح تأطير رباعي لقالب الـ Navbar وقالب الـ Forumhome هذا لتوفيق من الله عز وجل في درس شرح التأطير العادي ! همسة : حتى تخرج من الدرس بفائدة بإذن الله اقرأ كل الكلام . لا اريد ان اطيل عليكم فـ " خير الكلام ما قل ودل " http://www.hadfcom.com/shareh/navbar...me/hadfcom.jpg نبدأ بسم الواحد الأحد .... نقوم أولا بتصميم الإطار المراد حسب الرغبة وهذا مثال : http://www.hadfcom.com/shareh/navbar-forumhome/1.jpg --------------------------------------------------------------------------------- الآن نأتي لتقطع التصميم كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/2.jpg ملاحظات على الصورة السابقة :
الآن بعد ان انتهينا من التقطيع نقوم بالحفظ على شكل صفحة ويب كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/3.jpg نكمل الصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/4.jpg حتى يصبح بعد الحفظ لدينا صفحة html + مجلد صور ( وهو المطلوب ) وهذا مجلد الصور وفيه الصور التي قمنا بتقطيعها http://www.hadfcom.com/shareh/navbar-forumhome/5.jpg --------------------------------------------------------------------------------- الآن نذهب الى قائمة إبدأ ونفتح برنامج لـ فرونت بيج | Front Page http://www.hadfcom.com/shareh/navbar-forumhome/6.jpg نذهب الى قائمة تعليمات برمجية اسفل الفرونت بيج : http://www.hadfcom.com/shareh/navbar-forumhome/7.jpg الآن نقوم بحذف الكود الذي تحتويه الصفحة في التعليمات البرمجية كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/8.jpg بعدها نعود الى قائمة تصميم ايضا اسفل الفرونت بيج بجانب قائمة تعليمات برمجية http://www.hadfcom.com/shareh/navbar-forumhome/9.jpg نقوم بإنشاء جدول حسب التصميم الذي قمنا بتقطيعه ( وحسب عدد الصور ) http://www.hadfcom.com/shareh/navbar-forumhome/10.jpg الآن نقوم بتعديل إعدادات الجدول : http://www.hadfcom.com/shareh/navbar-forumhome/11.jpg نقوم بتعديل الإعدادات حسب الصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/12.jpg الآن نذهب الى أول خلية من القائمة اليسار ونضع فيها الصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/13.jpg الآن نقوم بسحب حد الخلية إلى نهاية الجدول : http://www.hadfcom.com/shareh/navbar-forumhome/14.jpg حتى تصبح بالشكل التالي : http://www.hadfcom.com/shareh/navbar-forumhome/15.jpg نقوم الآن بوضع الصور الغير متمددة بأماكنها وسحب كل حد حسب مكانه كالصورة التالية: http://www.hadfcom.com/shareh/navbar-forumhome/16.jpg الآن هناك حدود زائدة ولا فائدة لها من وجودها حتى يصبح الشكل صحيحا نأخذ اداة الممحاة من قائمة الجداول http://www.hadfcom.com/shareh/navbar-forumhome/17.jpg ونقوم بمسح الحدود التالية : http://www.hadfcom.com/shareh/navbar-forumhome/18.jpg حتى يصبح الشكل كالتالي " لاحظ جيدا " : http://www.hadfcom.com/shareh/navbar-forumhome/19.jpg الن نأتي لمنطقة التمدد بالأعلى : http://www.hadfcom.com/shareh/navbar-forumhome/20.jpg اتبع الصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/21.jpg نختار الصورة الخاصة بمنطقة التمدد http://www.hadfcom.com/shareh/navbar-forumhome/22.jpg ونقوم بعمل مناطق التمدد جميعها وهي : http://www.hadfcom.com/shareh/navbar-forumhome/2.jpg مناطق التمدد هي : ( 3 ، 6 ، 8 ، 10 ) حتى ننتهي من الجدول بأكمله راح احيانا نلاقي مشكلة في الجدول بعد وضعيه الـ ( معاينة ) كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/23.jpg والمشكلة حلها معي http://www.hadfcom.com/vb/images/smilies/tongue.gif وهي أن نضع الصورة الخاصة بمنطقة التمدد رقم ( 10 ) فوق الخلفية نختار الصورة نفسها حيث أن : اصبح في الخليه السفلي التي تحتو منطقة تمدد رقم ( 10 ) خلفية للخلية متمددة ، والصورة نفسها غير متمددة ، فالصورة لا تؤثر ، فقط تقوم بالتعديل . http://www.hadfcom.com/shareh/navbar-forumhome/24.jpg وبعد هيك نعمل معاينة راح نلاقي المشكلة انحلت كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/25.jpg الآن نذهب مرة أخرى الى منطقة : تعليمات برمجية ، لتغير مسار الصور http://www.hadfcom.com/shareh/navbar-forumhome/7.jpg ونقوم بتحديد المسار تاع الكمبيوتر حتى نضع بدلا منه مسار مجلد صور الستايل الرسمي وبعد هيك نضغط على Ctrl + H كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/26.jpg سوف تظهر لنا الآن قائمة ونقوم بعمل التالي : http://www.hadfcom.com/shareh/navbar-forumhome/27.jpg ملاحظات على الصورة السابقة :
الآن نعود الى قائمة ( تصميم ) : http://www.hadfcom.com/shareh/navbar-forumhome/9.jpg سنشاهد الجدول بالشكل التالي : http://www.hadfcom.com/shareh/navbar-forumhome/28.jpg همسة هامّة : يجب ان نحتفظ في هذه الصفحة لأننا سنحتاجها بقالب الـ Navbar والـ Forumhome واي قوالب اخرى نريد أن نعمل لها تأطير . --------------------------------------------------------------------------------- الآن نحضر قالب الـ Navbar من المنتدى ومن ثم نذهب الى قائمة التعليمات البرمجية في برنامج الفرونت بيج ونحذف الكود كله ونلصق كود الـ Navbar الآن بعد أن الصقنا كود الـ Navbar نعود الى قائمة الـ تعليمات البرمجية بالأسفل http://www.hadfcom.com/shareh/navbar-forumhome/7.jpg الآن نريد أن نأخذ كود الـ Navbar المرد إحاطته بالتأطير : اتبع الصورة التالية بدقة ... http://www.hadfcom.com/shareh/navbar-forumhome/29.jpg شرح الصورة السابقة :
الآن اصبح الكود المراد إحاطته بالـ تأطير مقصوص من كود النافبار واحتفظنا به من خلال النسخ .... الآن نعود الى الصفحة الأخرى الموجود بها جدول الإحاطة بعد أن نذهب إليه وهو بوضع الـ ( تصميم ) نضع مؤشر الماوس في الـ خلية الوسط كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/29-1.jpg بعدها نعود الى قائمة الـ تعليمات برمجية http://www.hadfcom.com/shareh/navbar-forumhome/7.jpg الآن نقوم بـ لصق الكود المنسوخ في مكان المؤشر تلقائيا كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/30.jpg شرح بسيط للصورة السابقة :
jpg"> نقوم لصق كود الـ Navbar في مكان المؤشر دون ان نعمل اي شيء الآن عندما نعود الى قائمة الـ (تصميم) نلاحظ أن الجدول أصبح هكذا : http://www.hadfcom.com/shareh/navbar-forumhome/31.jpg الآن نحن بالصفحة التي يوجد فيها جدول التأطير نرجع الى قائمة التعليمات البرمجية وننسخ الكود بأكمله . بعدما أن نسخنا الكود نعود الي الصفحة التي تحتوي على قالب الـ Navbar ونلصق الكود بأكمله في مكان الكود الذي قمنا بقصه قبل كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/32.jpg نسخ كود قالب الـ Navbar بأكمله ونعود الى لوحة تحكم المنتدى ونلصقه بدلا من قالب الـ Navbar القديم همسة : يجب أن نكون قد حمّلنا مجلد الصور في مكانه الصحيح. الآن نستعرض المنتدى في متصفح اكسبلورر فنجد النتيجة هكذا http://www.hadfcom.com/shareh/navbar-forumhome/33.jpg --------------------------------------------------------------------------------- الآن نذهب لـ قالب الـ Forumhome مثلما فعلنا بقالب الـ Navbar تماما فقط اريد ان اريكم كود أقسام المنتدى ، وكود إحصائيات المنتدى نحضره في صفحة جديدة بالفرونت بيج الآن نأتي لقص كود أقسام المنتدى كما بالصورة التالية : http://www.hadfcom.com/shareh/navbar-forumhome/34.jpg نقوم بنسخ الكود من السطر رقم : ( 32 ) ، و حتى السطر رقم ( 58 ). ونعمل فيه كما عملنا بقالب الـ Navbar . --------------------------------------------------------------------------------- الآن نريد تأطير منطقة احصائيات المنتدى في قالب الـ Forumhome نقوم بنسخ الكود التالي : http://www.hadfcom.com/shareh/navbar-forumhome/35.jpg نقوم بنسخ الكود من السطر رقم ( 64 ) ، وحتى الكود رقم ( 161 ). ونعمل به كما عملنا بقالب الـ Navbar . http://www.hadfcom.com/shareh/navbar...me/hadfcom.jpg --------------------------------------------------------------------------------- --------------------------------------------------------------------------------- وبهيك قد انتهينا من الدرس والحمد لله رب العالمين ولكن ...... هذا الدرس تعبت عليه كتير كتير والله ،، فالمطلوب منكم :
الدعاء لي ولوالدي بالمغفرة . أن لا تنسوا التقييم +++++. والأهم من ذلك كله :
فمعهد هدفكم قمت بإنشائه لإفادة المسلمين والعرب أجمعين ، وقريبا جدا دورة تصميم ستايل احترافي . وستقام دروس عدة إن شاء الله جميع حقوقها محفوظة لأصحابها فشعار معهد هدفكم هو .. " كل ما يُعرض في معهد هدفكم من تصاميم وبرمجيات وأعمال ، حقوقه محفوظة لصاحبه وليس لـ معهد هدفكم . " www.hadfcom.com/vb اخوكم ومحبكم : محمد الحلبي " ابو الوفا " [email protected] |
| الساعة الآن 01:34 PM |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By
Almuhajir