الدرس الثاني تقطيع الهيدر وتركيبه على المنتدى برعاية علاء الفاتك
احبتي الكرام
بعد ان تعلمنا كيفية تصميم الهيدر والفوتر بالدرس الاول على هذا الرابط
هنااااا
ننتقل اليوم الى الدرس الثاني من تصميم ستايل لمنتديات الفي بي
نبدأ على بركة الله
ننشأ اولا مجلد افتراضي للستايل ونطلق عليه اي اسم تحب ان يكون للستايل مثلا moonsat
ويجب ان يكون اسم الستايل باللغة الانكليزية حصرا ثم نفتح مجلد الستايل وننشأ مجلد ىخر بداخل مجلد الستايل ونطلق عليه اسم images
ثم نفتح برنامج الفوتوشوب ومن قائمة file نضغط على كلمة open ثم بعدها نختار الصورة المحفوظة لديكم للهيدر
والتي تم حفظها بصيغة jpg ومن ثم نبدأ التقطيع بالاداة الموضحة بالصورة التالية
ثم نبدأ بالقطع كما موضح بالصورة التالية
أي يكون القطع من بداية الهيدر الى آخر مارسمناه او ما قمنا بتصميمه والصورة توضح اكثر
وهنا بعد ان قمنا بالتحديد للقطع ذهب الى قائمة edit ونضغط على كلمة cut اي قطع وكما موضح بالصورة التالية
بعد الضغط على كلمة cut ننتقل الى قائمة file ونقوم بالضغط على كلمة new
ملاحظه :: هنا عند الضغط على كلمة new ستفتح نافذه بنفس حجم الصورة المقصوصه وبشكل آلي وعندها فقط اضغط على كلمة ok
تابع الصورة التالية
هنا بعد ان تفتح نافذة العمل الجديد نضغط على كلمة paste
شاهد الصورة التالية
انظر للصورة المقصوصه بعد قطعها ولصقها
الآن اصبح لك كل شئ واضح تماما .. تابع معي الصور المشروحة التالية
وهنا وفي الصورة التالية سنبدأ بقطع الصورة التي ستستخدم كمنطقة تمدد تابع الصورة التالية
طبعا جميع الصور نحفظها بداخل مجلد الستايل وبداخل مجلد images والذي قمنا بأنشائه على سطح المكتب شاهد الصورة التالية للتوضيح أكثر
هنا اصبح لدينا هيدر مكون من صوره يمنى وصوره يسرى ونقطة تمدد وهذا الهيدر الذي يكون تصميمه من ثلاث صور فقط ويمكن كتابة اسم الموقع
على الصورة اليمنى وسأشرح قريبا الهيدر المكون من خمس قطع وتكون كتابة اسم الموقع في الصورة الوسطى
بعدها ننتقل الى برنامج الفرونت بيج ونفتح البرنامج ونجد بداخلة كود افتراضي نقوم بحذفه بالكامل .. شاهد الصورة التالية
بعدها نضغط على كلمة تصميم اسفل البرنامج ونضغط بداخل الصفحه كليك يمين ونختار من القائمة خصائص الصفحه
ونجعل اتجاه الصفحه يمين يسار كالتالي
ثم من اعلى البرنامج نضغط على صندوق ادراج جدول ونختار جدول ذو ثلاث قطع .. شاهد الصورة التالية
السبب في هذا لان الهيدر لدينا مكون مثلاث صور ( صورة يمنى ويسرى ومنطقة تمدد وهي الصورة الثالثة )
في هذه الصورة نقوم بوضع مؤشر الماوس في اي خلية من خلايا الجدول كليك يمين ونختار من النافذه خصائص الجدول
شاهد الصورة التالية
تفتح لدينا نافذة خصائص الجدول ونعمل كما موضح بالصورة والمؤشر باللون الاحمر
وأخيرا نضغط على موافق
فيكون شكل الجدول كالصورة التالية بعد تعديل خياراته .. تابع
ثم نجعل مؤشر الماوس بداخل الخلية اليمنى ونضغط نقرة واحدة كليك يمين وتفتح نافذه نختار منها خصائص الخلية .. تابع
هنا احب ان اذكر ان الهيدر ممتد بمعنى يجب ان يكون التمدد 100%
بمعنى آخر نجعل عرض الخلية اليمنى هي 1 % وعرض الخلية اليسرى هو 1% وعرض الخلية الوسطى والتي هي نقطة تمدد يكون 98%
يصبح المجموع هو 100% .. تابع الصور التالية
وهنا الخلية الوسطى ( منطقة التمدد )
وهنا الخلية اليسرى شاهد الذي باللون الاحمر
ثم بعد تعديل خيارات الجدول والخلايا نذهب للخلية ايمنى ونضع مؤشر الماوس بداخلها ونضغط من اعلى البرنامج على ادراج صورة
لتفتح نافذه نذهب الى المكان الذي قمنا بحفظ صور الهيدر المقطوعه ونختار ادراج الصورة اليمنى كالتالي
وبعدها نضغط على كلمة ادراج فيقوم البرنامج بادراج الصورة بالخلية المختارة شاهد الصورة التالية
شاهد كيف تم ادراج الصورة بالخلية اليمنى ومن ثم نقوم بادراج الصورة اليسرى بنفس الطريقة السابقه
تابع الصورة التالية
بعدها نضع مؤشر الماوس بداخل الخلية الوسطى اي منطقة التمدد ونضغط نقرة واحده كليك يمين ونختار خصائص الخلية كالتالي
تفتح لنا نافذة خصائص الخلية ومن نافذة استعراض نجلب الصورة المختارة وهي منطقة التمدد ونضغط على كلمة ادراج
شاهد الصورة التالية
ثم موافق
ليصبح الشكل بعد الضغط على موافق كالتالي
ثم نقوم بالضغط على كلمة معاينة اسفل البرنامج لنشاهد العمل كاملا وبدون اخطاء تذكر .. شاهد الصورة التالية للتوضيح
بعد التأكد من العمل بشكل كامل نضغط من اسفل البرنامج على كلمة تعليمات برمجية ونحدد كما هو موضح بالصورة لنغيير
مسارات الصور حتى يكون الستايل شغال على اي منتدى آخر يرفع الستايل .. شاهد الصورة التالية
هنا نقوم بنسخ المحدد وبعدها نضغط كليك يمين بداخل الصفحه ونختار استبدال كالتالي
والصورة تشرح نفسها
بعد ان ادرجنا اسم الستايل نضغط على كلمة استبدال الكل ليتم استبدال مسارات كافة الصور
شاهد الصورة التالية كيف اصبحت مسارات الصور بعد الاستبدال
الان انتهينا من شرح تقطيع الهيدر وتركيبة على الفرونت بيج وتعديله ليصبح جاهز لتركيبه على هيدر المنتدى
الان ندخل الادارة ومن ثم خيارات الستايلات والقوالب
ثم تفتح لنا صفحة الستايلات ونختار منها الستايل الافتراضي نقوم بالضغط بعدها على كلمة اذهب كالتالي
بعدها سيفتح لنا ملف الستايل بالكامل
ونختار اول قالب وهو قالب الهيدر ونحذف مابداخله بالكامل كالتالي
بعد حذف كامل كود الهيدر نضع بداخل الهيد الكود التالي
ثم ننتقل الى برنامج الفورنت بيج وننسخ الهيدر بالكامل ونضعه كما موضح بالصورة التاليةكود HTML:<!-- logo --> <a name="top"></a> <!-- /logo --> $spacer_open $_phpinclude_output $ad_location[ad_header_end]
اي يكون الهيدر المنسوخ من برنامج الفرونت بيج بعد هذا الكود
ثم ننزل الى اخر الصفحه ونضغط على كلمة حفظ وبعدها نذهب الى الستايل لمشاهدة الهيدركود HTML:<!-- logo --> <a name="top"></a> <!-- /logo -->
بالنسبة للفوتر يكون العمل عليه بنفس الطريقة السابقه بالحرف الواحد
وبعدها بالدروس القادمة سنكمل معكم الاشياء التجميله وتجميل كافة قوالب الستايل ليظهر بالمظهر الجميل واللائق
أحبتي في الله
هذا الدرس اخذ مني الكثير من الوقت فقبل طرح استفسارك وسؤالك يجب قرآءة الدرس بوضوح ثم اطرح استفسارك
هذا مجهود شخصي لاتغيب عنه نسيان معلومه ما فالعذر والسموحه لذلك
وارجوا أن اكون وفقت في طرح مايفيدكم مستقبلا سائلآ الله سبحانه أن نرى منكم مصممين مميزين حتى لايذهب جهدي مع الرياح
رجاء عند نقل الدرس ذكر المصدر وهذا اقل شئ للشكر
اخوكم ومحبكم
علاء الفاتك
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة يـازين سامحني
مواقع النشر (المفضلة)