المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الدرس الثاني تقطيع الهيدر وتركيبه على المنتدى برعاية علاء الفاتك


ابن الصحراء
17-04-2010, 07:39 AM
http://www.moonsat.net/vb/mwaextraedit4/extra/81.gif



احبتي الكرام
بعد ان تعلمنا كيفية تصميم الهيدر والفوتر بالدرس الاول على هذا الرابط


هنااااا (http://www.ibn3.com/vb/showthread.php?t=7107)

ننتقل اليوم الى الدرس الثاني من تصميم ستايل لمنتديات الفي بي

نبدأ على بركة الله

ننشأ اولا مجلد افتراضي للستايل ونطلق عليه اي اسم تحب ان يكون للستايل مثلا moonsat
ويجب ان يكون اسم الستايل باللغة الانكليزية حصرا ثم نفتح مجلد الستايل وننشأ مجلد ىخر بداخل مجلد الستايل ونطلق عليه اسم images

ثم نفتح برنامج الفوتوشوب ومن قائمة file نضغط على كلمة open ثم بعدها نختار الصورة المحفوظة لديكم للهيدر
والتي تم حفظها بصيغة jpg ومن ثم نبدأ التقطيع بالاداة الموضحة بالصورة التالية

http://www.moonsat.net/vb/upload/5_d_1.png

ثم نبدأ بالقطع كما موضح بالصورة التالية

http://www.moonsat.net/vb/upload/5_d_2.png (http://www.moonsat.net/vb/upload/5_d_2.png)

أي يكون القطع من بداية الهيدر الى آخر مارسمناه او ما قمنا بتصميمه والصورة توضح اكثر

وهنا بعد ان قمنا بالتحديد للقطع ذهب الى قائمة edit ونضغط على كلمة cut اي قطع وكما موضح بالصورة التالية

http://www.moonsat.net/vb/upload/5_d_3.png (http://www.moonsat.net/vb/upload/5_d_3.png)

بعد الضغط على كلمة cut ننتقل الى قائمة file ونقوم بالضغط على كلمة new
ملاحظه :: هنا عند الضغط على كلمة new ستفتح نافذه بنفس حجم الصورة المقصوصه وبشكل آلي وعندها فقط اضغط على كلمة ok
تابع الصورة التالية

http://www.moonsat.net/vb/upload/5_d_4.png

http://www.moonsat.net/vb/upload/5_d_5.png (http://www.moonsat.net/vb/upload/5_d_5.png)

هنا بعد ان تفتح نافذة العمل الجديد نضغط على كلمة paste
شاهد الصورة التالية

http://www.moonsat.net/vb/upload/5_d_6.png

انظر للصورة المقصوصه بعد قطعها ولصقها

http://www.moonsat.net/vb/upload/5_d_7.png

الآن اصبح لك كل شئ واضح تماما .. تابع معي الصور المشروحة التالية

http://www.moonsat.net/vb/upload/5_d_8.png (http://www.moonsat.net/vb/upload/5_d_8.png)

وهنا وفي الصورة التالية سنبدأ بقطع الصورة التي ستستخدم كمنطقة تمدد تابع الصورة التالية

http://www.moonsat.net/vb/upload/5_d_9.png (http://www.moonsat.net/vb/upload/5_d_9.png)

طبعا جميع الصور نحفظها بداخل مجلد الستايل وبداخل مجلد images والذي قمنا بأنشائه على سطح المكتب شاهد الصورة التالية للتوضيح أكثر

http://www.moonsat.net/vb/upload/5_d_10.png (http://www.moonsat.net/vb/upload/5_d_10.png)

هنا اصبح لدينا هيدر مكون من صوره يمنى وصوره يسرى ونقطة تمدد وهذا الهيدر الذي يكون تصميمه من ثلاث صور فقط ويمكن كتابة اسم الموقع
على الصورة اليمنى وسأشرح قريبا الهيدر المكون من خمس قطع وتكون كتابة اسم الموقع في الصورة الوسطى

بعدها ننتقل الى برنامج الفرونت بيج ونفتح البرنامج ونجد بداخلة كود افتراضي نقوم بحذفه بالكامل .. شاهد الصورة التالية

http://www.moonsat.net/vb/upload/5_d_14.png (http://www.moonsat.net/vb/upload/5_d_14.png)

بعدها نضغط على كلمة تصميم اسفل البرنامج ونضغط بداخل الصفحه كليك يمين ونختار من القائمة خصائص الصفحه
ونجعل اتجاه الصفحه يمين يسار كالتالي

http://www.moonsat.net/vb/upload/5_d_15.png

http://www.moonsat.net/vb/upload/5_d_16.png (http://www.moonsat.net/vb/upload/5_d_16.png)

ثم من اعلى البرنامج نضغط على صندوق ادراج جدول ونختار جدول ذو ثلاث قطع .. شاهد الصورة التالية

http://www.moonsat.net/vb/upload/5_d_17.png

السبب في هذا لان الهيدر لدينا مكون مثلاث صور ( صورة يمنى ويسرى ومنطقة تمدد وهي الصورة الثالثة )

في هذه الصورة نقوم بوضع مؤشر الماوس في اي خلية من خلايا الجدول كليك يمين ونختار من النافذه خصائص الجدول
شاهد الصورة التالية

http://www.moonsat.net/vb/upload/5_d_18.png (http://www.moonsat.net/vb/upload/5_d_18.png)

تفتح لدينا نافذة خصائص الجدول ونعمل كما موضح بالصورة والمؤشر باللون الاحمر

http://www.moonsat.net/vb/upload/5_d_19.png (http://www.moonsat.net/vb/upload/5_d_19.png)

وأخيرا نضغط على موافق

فيكون شكل الجدول كالصورة التالية بعد تعديل خياراته .. تابع

http://www.moonsat.net/vb/upload/5_d_20.png (http://www.moonsat.net/vb/upload/5_d_20.png)

ثم نجعل مؤشر الماوس بداخل الخلية اليمنى ونضغط نقرة واحدة كليك يمين وتفتح نافذه نختار منها خصائص الخلية .. تابع

http://www.moonsat.net/vb/upload/5_d_21.png

هنا احب ان اذكر ان الهيدر ممتد بمعنى يجب ان يكون التمدد 100%

بمعنى آخر نجعل عرض الخلية اليمنى هي 1 % وعرض الخلية اليسرى هو 1% وعرض الخلية الوسطى والتي هي نقطة تمدد يكون 98%
يصبح المجموع هو 100% .. تابع الصور التالية

http://www.moonsat.net/vb/upload/5_d_22.png (http://www.moonsat.net/vb/upload/5_d_22.png)

وهنا الخلية الوسطى ( منطقة التمدد )

http://www.moonsat.net/vb/upload/5_d_23.png (http://www.moonsat.net/vb/upload/5_d_23.png)

وهنا الخلية اليسرى شاهد الذي باللون الاحمر

http://www.moonsat.net/vb/upload/5_d_24.png (http://www.moonsat.net/vb/upload/5_d_24.png)

ثم بعد تعديل خيارات الجدول والخلايا نذهب للخلية ايمنى ونضع مؤشر الماوس بداخلها ونضغط من اعلى البرنامج على ادراج صورة
لتفتح نافذه نذهب الى المكان الذي قمنا بحفظ صور الهيدر المقطوعه ونختار ادراج الصورة اليمنى كالتالي

http://www.moonsat.net/vb/upload/5_d_25.png (http://www.moonsat.net/vb/upload/5_d_25.png)

وبعدها نضغط على كلمة ادراج فيقوم البرنامج بادراج الصورة بالخلية المختارة شاهد الصورة التالية

http://www.moonsat.net/vb/upload/5_d_26.png (http://www.moonsat.net/vb/upload/5_d_26.png)

شاهد كيف تم ادراج الصورة بالخلية اليمنى ومن ثم نقوم بادراج الصورة اليسرى بنفس الطريقة السابقه
تابع الصورة التالية

http://www.moonsat.net/vb/upload/5_d_27.png (http://www.moonsat.net/vb/upload/5_d_27.png)

بعدها نضع مؤشر الماوس بداخل الخلية الوسطى اي منطقة التمدد ونضغط نقرة واحده كليك يمين ونختار خصائص الخلية كالتالي

http://www.moonsat.net/vb/upload/5_d_28.png (http://www.moonsat.net/vb/upload/5_d_28.png)

تفتح لنا نافذة خصائص الخلية ومن نافذة استعراض نجلب الصورة المختارة وهي منطقة التمدد ونضغط على كلمة ادراج
شاهد الصورة التالية

http://www.moonsat.net/vb/upload/5_d_29.png (http://www.moonsat.net/vb/upload/5_d_29.png)

ثم موافق

ليصبح الشكل بعد الضغط على موافق كالتالي

http://www.moonsat.net/vb/upload/5_d_30.png (http://www.moonsat.net/vb/upload/5_d_30.png)

ثم نقوم بالضغط على كلمة معاينة اسفل البرنامج لنشاهد العمل كاملا وبدون اخطاء تذكر .. شاهد الصورة التالية للتوضيح

http://www.moonsat.net/vb/upload/5_d_31.png (http://www.moonsat.net/vb/upload/5_d_31.png)

بعد التأكد من العمل بشكل كامل نضغط من اسفل البرنامج على كلمة تعليمات برمجية ونحدد كما هو موضح بالصورة لنغيير
مسارات الصور حتى يكون الستايل شغال على اي منتدى آخر يرفع الستايل .. شاهد الصورة التالية

http://www.moonsat.net/vb/upload/5_d_32.png (http://www.moonsat.net/vb/upload/5_d_32.png)

هنا نقوم بنسخ المحدد وبعدها نضغط كليك يمين بداخل الصفحه ونختار استبدال كالتالي

والصورة تشرح نفسها

http://www.moonsat.net/vb/upload/5_d_33.png (http://www.moonsat.net/vb/upload/5_d_33.png)

بعد ان ادرجنا اسم الستايل نضغط على كلمة استبدال الكل ليتم استبدال مسارات كافة الصور

شاهد الصورة التالية كيف اصبحت مسارات الصور بعد الاستبدال

http://www.moonsat.net/vb/upload/5_d_34.png (http://www.moonsat.net/vb/upload/5_d_34.png)

الان انتهينا من شرح تقطيع الهيدر وتركيبة على الفرونت بيج وتعديله ليصبح جاهز لتركيبه على هيدر المنتدى

الان ندخل الادارة ومن ثم خيارات الستايلات والقوالب

http://www.moonsat.net/vb/upload/5_d_11.png

ثم تفتح لنا صفحة الستايلات ونختار منها الستايل الافتراضي نقوم بالضغط بعدها على كلمة اذهب كالتالي

http://www.moonsat.net/vb/upload/5_d_12.png (http://www.moonsat.net/vb/upload/5_d_12.png)

بعدها سيفتح لنا ملف الستايل بالكامل

ونختار اول قالب وهو قالب الهيدر ونحذف مابداخله بالكامل كالتالي

http://www.moonsat.net/vb/upload/5_d_13.png (http://www.moonsat.net/vb/upload/5_d_13.png)

بعد حذف كامل كود الهيدر نضع بداخل الهيد الكود التالي


<!-- logo -->


<a name="top"></a>

<!-- /logo -->

$spacer_open
$_phpinclude_output
$ad_location[ad_header_end]







ثم ننتقل الى برنامج الفورنت بيج وننسخ الهيدر بالكامل ونضعه كما موضح بالصورة التالية



http://www.moonsat.net/vb/upload/5_d_35.png (http://www.moonsat.net/vb/upload/5_d_35.png)



اي يكون الهيدر المنسوخ من برنامج الفرونت بيج بعد هذا الكود



<!-- logo -->




<a name="top"></a>

<!-- /logo -->




ثم ننزل الى اخر الصفحه ونضغط على كلمة حفظ وبعدها نذهب الى الستايل لمشاهدة الهيدر



بالنسبة للفوتر يكون العمل عليه بنفس الطريقة السابقه بالحرف الواحد



وبعدها بالدروس القادمة سنكمل معكم الاشياء التجميله وتجميل كافة قوالب الستايل ليظهر بالمظهر الجميل واللائق



أحبتي في الله



هذا الدرس اخذ مني الكثير من الوقت فقبل طرح استفسارك وسؤالك يجب قرآءة الدرس بوضوح ثم اطرح استفسارك



هذا مجهود شخصي لاتغيب عنه نسيان معلومه ما فالعذر والسموحه لذلك

وارجوا أن اكون وفقت في طرح مايفيدكم مستقبلا سائلآ الله سبحانه أن نرى منكم مصممين مميزين حتى لايذهب جهدي مع الرياح





رجاء عند نقل الدرس ذكر المصدر وهذا اقل شئ للشكر



اخوكم ومحبكم

علاء الفاتك





المصدر (http://www.moonsat.net/vb/showthread.php?t=35398)

الفتي
17-04-2010, 11:47 PM
مشكــــــــــــــــــــور على النقل المميز
موفق ودمت بالخير والمسرات