https://mwadah.com/images/imgcache/2010/04/192.gif
احبتي الكرام
بعد ان تعلمنا كيفية تصميم الهيدر والفوتر بالدرس الاول على هذا الرابط
هنااااا
ننتقل اليوم الى الدرس الثاني من تصميم ستايل لمنتديات الفي بي
نبدأ على بركة الله
ننشأ اولا مجلد افتراضي للستايل ونطلق عليه اي اسم تحب ان يكون للستايل مثلا moonsat
ويجب ان يكون اسم الستايل باللغة الانكليزية حصرا ثم نفتح مجلد الستايل وننشأ مجلد ىخر بداخل مجلد الستايل ونطلق عليه اسم images
ثم نفتح برنامج الفوتوشوب ومن قائمة file نضغط على كلمة open ثم بعدها نختار الصورة المحفوظة لديكم للهيدر
والتي تم حفظها بصيغة jpg ومن ثم نبدأ التقطيع بالاداة الموضحة بالصورة التالية
https://mwadah.com/images/imgcache/2010/04/95.png
ثم نبدأ بالقطع كما موضح بالصورة التالية
https://mwadah.com/images/imgcache/2010/04/96.png
أي يكون القطع من بداية الهيدر الى آخر مارسمناه او ما قمنا بتصميمه والصورة توضح اكثر
وهنا بعد ان قمنا بالتحديد للقطع ذهب الى قائمة edit ونضغط على كلمة cut اي قطع وكما موضح بالصورة التالية
https://mwadah.com/images/imgcache/2010/04/97.png
بعد الضغط على كلمة cut ننتقل الى قائمة file ونقوم بالضغط على كلمة new
ملاحظه :: هنا عند الضغط على كلمة new ستفتح نافذه بنفس حجم الصورة المقصوصه وبشكل آلي وعندها فقط اضغط على كلمة ok
تابع الصورة التالية
https://mwadah.com/images/imgcache/2010/04/98.png
https://mwadah.com/images/imgcache/2010/04/99.png
هنا بعد ان تفتح نافذة العمل الجديد نضغط على كلمة paste
شاهد الصورة التالية
https://mwadah.com/images/imgcache/2010/04/100.png
انظر للصورة المقصوصه بعد قطعها ولصقها
https://mwadah.com/images/imgcache/2010/04/101.png
الآن اصبح لك كل شئ واضح تماما .. تابع معي الصور المشروحة التالية
https://mwadah.com/images/imgcache/2010/04/102.png
وهنا وفي الصورة التالية سنبدأ بقطع الصورة التي ستستخدم كمنطقة تمدد تابع الصورة التالية
https://mwadah.com/images/imgcache/2010/04/103.png
طبعا جميع الصور نحفظها بداخل مجلد الستايل وبداخل مجلد images والذي قمنا بأنشائه على سطح المكتب شاهد الصورة التالية للتوضيح أكثر
https://mwadah.com/images/imgcache/2010/04/104.png
هنا اصبح لدينا هيدر مكون من صوره يمنى وصوره يسرى ونقطة تمدد وهذا الهيدر الذي يكون تصميمه من ثلاث صور فقط ويمكن كتابة اسم الموقع
على الصورة اليمنى وسأشرح قريبا الهيدر المكون من خمس قطع وتكون كتابة اسم الموقع في الصورة الوسطى
بعدها ننتقل الى برنامج الفرونت بيج ونفتح البرنامج ونجد بداخلة كود افتراضي نقوم بحذفه بالكامل .. شاهد الصورة التالية
https://mwadah.com/images/imgcache/2010/04/105.png
بعدها نضغط على كلمة تصميم اسفل البرنامج ونضغط بداخل الصفحه كليك يمين ونختار من القائمة خصائص الصفحه
ونجعل اتجاه الصفحه يمين يسار كالتالي
https://mwadah.com/images/imgcache/2010/04/106.png
https://mwadah.com/images/imgcache/2010/04/107.png
ثم من اعلى البرنامج نضغط على صندوق ادراج جدول ونختار جدول ذو ثلاث قطع .. شاهد الصورة التالية
https://mwadah.com/images/imgcache/2010/04/108.png
السبب في هذا لان الهيدر لدينا مكون مثلاث صور ( صورة يمنى ويسرى ومنطقة تمدد وهي الصورة الثالثة )
في هذه الصورة نقوم بوضع مؤشر الماوس في اي خلية من خلايا الجدول كليك يمين ونختار من النافذه خصائص الجدول
شاهد الصورة التالية
https://mwadah.com/images/imgcache/2010/04/109.png
تفتح لدينا نافذة خصائص الجدول ونعمل كما موضح بالصورة والمؤشر باللون الاحمر
https://mwadah.com/images/imgcache/2010/04/110.png
وأخيرا نضغط على موافق
فيكون شكل الجدول كالصورة التالية بعد تعديل خياراته .. تابع
https://mwadah.com/images/imgcache/2010/04/111.png
ثم نجعل مؤشر الماوس بداخل الخلية اليمنى ونضغط نقرة واحدة كليك يمين وتفتح نافذه نختار منها خصائص الخلية .. تابع
https://mwadah.com/images/imgcache/2010/04/112.png
هنا احب ان اذكر ان الهيدر ممتد بمعنى يجب ان يكون التمدد 100%
بمعنى آخر نجعل عرض الخلية اليمنى هي 1 % وعرض الخلية اليسرى هو 1% وعرض الخلية الوسطى والتي هي نقطة تمدد يكون 98%
يصبح المجموع هو 100% .. تابع الصور التالية
https://mwadah.com/images/imgcache/2010/04/113.png
وهنا الخلية الوسطى ( منطقة التمدد )
https://mwadah.com/images/imgcache/2010/04/114.png
وهنا الخلية اليسرى شاهد الذي باللون الاحمر
https://mwadah.com/images/imgcache/2010/04/115.png
ثم بعد تعديل خيارات الجدول والخلايا نذهب للخلية ايمنى ونضع مؤشر الماوس بداخلها ونضغط من اعلى البرنامج على ادراج صورة
لتفتح نافذه نذهب الى المكان الذي قمنا بحفظ صور الهيدر المقطوعه ونختار ادراج الصورة اليمنى كالتالي
https://mwadah.com/images/imgcache/2010/04/116.png
وبعدها نضغط على كلمة ادراج فيقوم البرنامج بادراج الصورة بالخلية المختارة شاهد الصورة التالية
https://mwadah.com/images/imgcache/2010/04/117.png
شاهد كيف تم ادراج الصورة بالخلية اليمنى ومن ثم نقوم بادراج الصورة اليسرى بنفس الطريقة السابقه
تابع الصورة التالية
https://mwadah.com/images/imgcache/2010/04/118.png
بعدها نضع مؤشر الماوس بداخل الخلية الوسطى اي منطقة التمدد ونضغط نقرة واحده كليك يمين ونختار خصائص الخلية كالتالي
https://mwadah.com/images/imgcache/2010/04/119.png
تفتح لنا نافذة خصائص الخلية ومن نافذة استعراض نجلب الصورة المختارة وهي منطقة التمدد ونضغط على كلمة ادراج
شاهد الصورة التالية
https://mwadah.com/images/imgcache/2010/04/120.png
ثم موافق
ليصبح الشكل بعد الضغط على موافق كالتالي
https://mwadah.com/images/imgcache/2010/04/121.png
ثم نقوم بالضغط على كلمة معاينة اسفل البرنامج لنشاهد العمل كاملا وبدون اخطاء تذكر .. شاهد الصورة التالية للتوضيح
https://mwadah.com/images/imgcache/2010/04/122.png
بعد التأكد من العمل بشكل كامل نضغط من اسفل البرنامج على كلمة تعليمات برمجية ونحدد كما هو موضح بالصورة لنغيير
مسارات الصور حتى يكون الستايل شغال على اي منتدى آخر يرفع الستايل .. شاهد الصورة التالية
https://mwadah.com/images/imgcache/2010/04/123.png
هنا نقوم بنسخ المحدد وبعدها نضغط كليك يمين بداخل الصفحه ونختار استبدال كالتالي
والصورة تشرح نفسها
https://mwadah.com/images/imgcache/2010/04/124.png
بعد ان ادرجنا اسم الستايل نضغط على كلمة استبدال الكل ليتم استبدال مسارات كافة الصور
شاهد الصورة التالية كيف اصبحت مسارات الصور بعد الاستبدال
https://mwadah.com/images/imgcache/2010/04/125.png
الان انتهينا من شرح تقطيع الهيدر وتركيبة على الفرونت بيج وتعديله ليصبح جاهز لتركيبه على هيدر المنتدى
الان ندخل الادارة ومن ثم خيارات الستايلات والقوالب
https://mwadah.com/images/imgcache/2010/04/126.png
ثم تفتح لنا صفحة الستايلات ونختار منها الستايل الافتراضي نقوم بالضغط بعدها على كلمة اذهب كالتالي
https://mwadah.com/images/imgcache/2010/04/127.png
بعدها سيفتح لنا ملف الستايل بالكامل
ونختار اول قالب وهو قالب الهيدر ونحذف مابداخله بالكامل كالتالي
https://mwadah.com/images/imgcache/2010/04/128.png
بعد حذف كامل كود الهيدر نضع بداخل الهيد الكود التالي
ثم ننتقل الى برنامج الفورنت بيج وننسخ الهيدر بالكامل ونضعه كما موضح بالصورة التاليةكود HTML:<!-- logo --> <a name="top"></a> <!-- /logo --> $spacer_open $_phpinclude_output $ad_location[ad_header_end]
https://mwadah.com/images/imgcache/2010/04/129.png
اي يكون الهيدر المنسوخ من برنامج الفرونت بيج بعد هذا الكود
ثم ننزل الى اخر الصفحه ونضغط على كلمة حفظ وبعدها نذهب الى الستايل لمشاهدة الهيدركود HTML:<!-- logo --> <a name="top"></a> <!-- /logo -->
بالنسبة للفوتر يكون العمل عليه بنفس الطريقة السابقه بالحرف الواحد
وبعدها بالدروس القادمة سنكمل معكم الاشياء التجميله وتجميل كافة قوالب الستايل ليظهر بالمظهر الجميل واللائق
أحبتي في الله
هذا الدرس اخذ مني الكثير من الوقت فقبل طرح استفسارك وسؤالك يجب قرآءة الدرس بوضوح ثم اطرح استفسارك
هذا مجهود شخصي لاتغيب عنه نسيان معلومه ما فالعذر والسموحه لذلك
وارجوا أن اكون وفقت في طرح مايفيدكم مستقبلا سائلآ الله سبحانه أن نرى منكم مصممين مميزين حتى لايذهب جهدي مع الرياح
رجاء عند نقل الدرس ذكر المصدر وهذا اقل شئ للشكر
اخوكم ومحبكم
علاء الفاتك
