سم
الله الرحمن الرحيم
السلام عليكم
ورحمة الله وبركاته
اسعد الله
مساءكم جميعا
اخواني الكرام ...
في الآونة الأخيرة قد تمت اضافتي على اميلات عديدة
يطلبون الأخوة الكرام مني شرح تأطير رباعي لقالب الـ Navbar
وقالب الـ Forumhome
هذا لتوفيق من الله عز وجل في درس شرح التأطير العادي !
همسة : حتى تخرج من الدرس بفائدة
بإذن الله اقرأ كل الكلام .
لا اريد ان اطيل عليكم فـ " خير الكلام ما قل ودل " 
نبدأ بسم الواحد الأحد ....
نقوم أولا بتصميم الإطار المراد
حسب الرغبة
وهذا مثال :
---------------------------------------------------------------------------------
الآن نأتي لتقطع التصميم
كما بالصورة التالية :
ملاحظات
على الصورة السابقة :
يجب أن تكون القطع ( 1 ، 6 ، 9 ) متساوية في العرض في
التقطيع.
يجب أن تكون القطع ( 5 ، 8 ، 11 ) متساوية في العرض في
التقطيع.
بالنسبة للصور ( 2 ، 3 ، 4 ، 7 ، 10 ) لا مشكلة في
التقطيع بشرط أن تكون المنطقة ( 3 ، 10 ) مناطق تمدد .
يجب ان تكون المنطقتا ( 6 ، 8 )
مناطق تمدد يعني يجب مراعاة الألوان فيها.
الآن بعد ان انتهينا من التقطيع نقوم بالحفظ على شكل صفحة
ويب
كما بالصورة التالية :
نكمل الصورة التالية :
حتى يصبح بعد الحفظ لدينا
صفحة html + مجلد صور (
وهو المطلوب )
وهذا مجلد الصور وفيه الصور التي قمنا بتقطيعها
---------------------------------------------------------------------------------
الآن نذهب الى قائمة
إبدأ ونفتح برنامج لـ
فرونت بيج |
Front Page 
نذهب الى قائمة
تعليمات برمجية اسفل الفرونت بيج :
الآن نقوم ب
حذف الكود الذي تحتويه الصفحة في
التعليمات البرمجية
كما بالصورة التالية :
بعدها نعود الى قائمة
تصميمايضا اسفل الفرونت بيج بجانب قائمة تعليمات برمجية
نقوم بإنشاء جدول حسب التصميم الذي قمنا بتقطيعه ( وحسب عدد الصور )
الآن نقوم بتعديل إعدادات الجدول :
نقوم بتعديل الإعدادات حسب الصورة التالية :
الآن نذهب الى أول خلية من القائمة اليسار ونضع فيها الصورة التالية :
الآن نقوم بسحب حد الخلية إلى نهاية الجدول :
حتى تصبح بالشكل التالي :
نقوم الآن بوضع الصور
الغير متمددة بأماكنها وسحب
كل حد حسب مكانه كالصورة التالية:
الآن هناك حدود زائدة ولا فائدة لها من وجودها حتى يصبح الشكل صحيحا
نأخذ اداة
الممحاة من قائمة الجداول
ونقوم بمسح
الحدود التالية :
حتى يصبح الشكل كالتالي "
لاحظ جيدا " :
الن نأتي لمنطقة التمدد بالأعلى :
اتبع الصورة التالية :
نختار الصورة الخاصة بمنطقة التمدد
ونقوم بعمل مناطق التمدد جميعها وهي :
مناطق التمدد هي
: ( 3 ، 6 ، 8 ، 10 )
حتى ننتهي من الجدول بأكمله
راح احيانا نلاقي مشكلة في الجدول بعد وضعيه الـ (
معاينة )
كما بالصورة التالية :
والمشكلة حلها معي
وهي أن نضع الصورة الخاصة بمنطقة التمدد رقم
( 10 ) فوق الخلفية
نختار الصورة نفسها
حيث أن : اصبح في الخليه السفلي التي تحتو منطقة تمدد رقم
( 10 ) خلفية للخلية متمددة ، والصورة نفسها غير متمددة ، فالصورة لا تؤثر ، فقط
تقوم بالتعديل .
وبعد هيك نعمل معاينة
راح نلاقي المشكلة انحلت
كما بالصورة التالية :
الآن نذهب مرة أخرى الى منطقة :
تعليمات برمجية ،
لتغير مسار الصور
ونقوم بتحديد المسار تاع الكمبيوتر حتى نضع بدلا منه
مسار
مجلد صور الستايل الرسمي
وبعد هيك نضغط على
Ctrl + H كما بالصورة التالية :
سوف تظهر لنا الآن قائمة
ونقوم بعمل التالي :
الصورة السابقة :
مربع
( البحث عن : ) هو مربع فيه الكود الذي قمنا بتحديده في هذه الصورة (+).
مربع ( استبدال بـ : ) هو مربع
فيه اسم مجلد الستايل الذي سنقوم برفعه على الاف تي بي.
ومن ثم نضغط على كلمة (
استبدال الكل ).
ومن ثم نضغط على كلمة ( اغلاق ).
الآن نعود الى قائمة (
تصميم ) :
سنشاهد الجدول بالشكل التالي :
همسة هامّة :
يجب ان نحتفظ في هذه الصفحة لأننا سنحتاجها
بقالب الـ Navbar والـ Forumhome واي قوالب اخرى نريد أن نعمل لها تأطير .
---------------------------------------------------------------------------------
الآن نحضر قالب الـ
Navbar من المنتدى
ومن ثم نذهب الى قائمة التعليمات البرمجية في برنامج الفرونت بيج و
نحذف الكود كله ونلصق كود الـ
Navbar الآن بعد أن الصقنا كود الـ
Navbar نعود الى
قائمة الـ تعليمات البرمجية بالأسفل
الآن نريد أن نأخذ كود الـ
Navbar المرد إحاطته
بالتأطير :
اتبع الصورة التالية بدقة ...
شرح الصورة السابقة :
- الآن
؛ حتى نأخذ الكود المراد إحاطته بالتأطير :
نقوم بـ قص الكود من السطر رقم ( 3 )
حتى السطر رقم ( 129 ) .
الآن
اصبح الكود المراد إحاطته بالـ تأطير
مقصوص من كود النافبار واحتفظنا به من خلال النسخ ....
الآن نعود الى الصفحة الأخرى الموجود بها جدول الإحاطة
بعد أن نذهب إليه وهو بوضع الـ (
تصميم ) نضع مؤشر الماوس في الـ
خلية الوسط كما بالصورة التالية :
بعدها نعود الى قائمة الـ
تعليمات برمجية الآن نقوم بـ
لصق الكود المنسوخ في مكان المؤشر
تلقائيا كما بالصورة التالية :
شرح بسيط للصورة السابقة :
- عندما وضعنا مؤشر الماوس في الخلية الوسط
للجدول ،، ومن ثم ضغطنا على قائمة الـ تعليمات برمجية نجد أن مؤشر الماوس
تلقائيا سوف يأتي بالجانب الأيمن للكود .
كود:
jpg">
نقوم لصق كود الـ
Navbar في مكان المؤشر دون ان
نعمل اي شيء
الآن عندما نعود الى قائمة الـ (
تصميم) نلاحظ أن
الجدول أصبح هكذا :
الآن نحن بالصفحة التي يوجد فيها جدول التأطير
نرجع الى قائمة
التعليمات البرمجية ون
نسخ الكود بأكمله .
بعدما أن نسخنا الكود نعود الي الصفحة التي تحتوي على قالب الـ
Navbar ونلصق الكود بأكمله في مكان الكود الذي قمنا بقصه قبل
كما بالصورة التالية :
نسخ كود قالب الـ
Navbar بأكمله ونعود الى لوحة
تحكم المنتدى ونلصقه بدلا من قالب الـ
Navbar القديم
همسة : يجب أن نكون قد حمّلنا مجلد الصور في مكانه الصحيح.
الآن نستعرض المنتدى في متصفح
اكسبلورر فنجد النتيجة هكذا
---------------------------------------------------------------------------------
الآن نذهب لـ قالب الـ
Forumhome مثلما فعلنا بقالب الـ
Navbar تماما
فقط اريد ان اريكم كود أقسام المنتدى ، وكود إحصائيات المنتدى
نحضره في صفحة جديدة بالفرونت بيج
الآن نأتي
لقص كود أقسام المنتدى
كما بالصورة التالية :
نقوم بنسخ الكود من
السطر رقم :
( 32 ) ، و حتى
السطر رقم
( 58 ). ونعمل فيه كما عملنا بقالب الـ
Navbar .
---------------------------------------------------------------------------------
الآن نريد تأطير منطقة احصائيات المنتدى في قالب الـ
Forumhome نقوم بنسخ الكود التالي :
نقوم بنسخ الكود من
السطر رقم
( 64 ) ، وحتى
الكود رقم
( 161 ). ونعمل به كما عملنا بقالب الـ
Navbar .
---------------------------------------------------------------------------------
---------------------------------------------------------------------------------
وبهيك قد انتهينا من الدرس والحمد لله رب العالمين
ولكن ...... هذا الدرس تعبت عليه كتير كتير والله ،،
فالمطلوب منكم :
الدعاء لي ولوالدي بالمغفرة .
أن لا
تنسوا التقييم +++++.
والأهم من ذلك كله
: فمعهد هدفكم قمت بإنشائه لإفادة المسلمين والعرب أجمعين ،
وقريبا جدا دورة تصميم ستايل احترافي .
[right]وستقام دروس عدة إن شاء الله جميع حقوقها محفوظة
لأصحابها
[right]فشعار معهد هدفكم هو ..
[/right]
[/right]
