اول درس في تصميم الاستايلات : كيفية تصميم برواز للمنتدى من البداية والى النهاية

[free]

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

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

على العموم انا قمت بتركيب منتدى على سيرفري الشخصي :
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

المهم سنبدء في تصميم بروازنا ... انا مسهل كل شي ... لذلك اتبع الصور ... ولن اكثر من الكلام :

افتح الفوتشوب وقم بعمل جديد بمقاس 400*400

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

واتبع الآتي :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ننشء طبقة جديدة ... ونغطيها باللون الابيض ... ونظع عليه ضل

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

هناك خطء قمت بعمله في باقي الدرس ... ولكني سانوه عنه هنا ...

وهو اجعل خلفية العمل بالكامل رصاصي : رمادي ... كما في هذه الصورة :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

الان نكمل :

الان قم باستخدام اداة التقطيع المختارة ... وابدء بالتقطيع كما هو مبين لك ... الزوايا وغيرها :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

الان نذهب الى كل قطعة ونختار التالي بالضغط على الزر اليمين على القطعة :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ونجعل الطول والعرض لكل قطعة متساوي 30*30

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ونقوم طبعا بعمل هذا على كل القطعة ... وعددهم 8

ثم نقوم بالتالي :
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

انظر ... الزوايا جاهزة :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

نفتح برنامج الفرونت بيج :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

لو تلاحظون ... هناك جهتي في البرنامج ... الجهة العلوية تظهر كود الصفحة ... والجهة السفلية تبين ديزاين الصفحة .

قم بمسح كل شيء :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

بعد ذلك قم بعمل جدول بعدد هذه الخلايا

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

ونقوم باضافة التالي :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

dir = direction ... وهذه اختصار للاتجاه ... وهنا نحن نقلب اتجاه الصفحة ... على العموم قم بتجربة الحالتين لكي تتظح لديك الصورة .

بعد ذلك نتجه الى خصائص الجدول
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

غير كالآتي :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

الان ... نقوم بادراج الزوايا هذه

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

في الجدول ... وسيصبح الشكل كالآتي :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
أضغط على الصورة لعرضها بحجمها الطبيعي في نافذة جديدة .



الآن نقوم بترتيب الجدول ... الخطوة الآولى نقوم بالذهاب الى الزوايا ... وهي 4 زوايا بالطبع ... وليست الزوايا التي بالنصف ... اقصد التي على الجوانب العلوية والسفلية ... ونقوم بعم الآتي :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

اخترنا خصائص الخلية وثبتنا الطول والعرض ... كما قصصناها بالفوتشوب 30*30

وسيصبح الشكل كالآتي :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
أضغط على الصورة لعرضها بحجمها الطبيعي في نافذة جديدة .



الان نذهب الى الزوايا الأخرى ... التي في النصف ( العمدان ... ونجعل الصور خلفية للخلية )

كالتالي :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

في الصورة السابقة ظغطنا ظغطتين على الصورة ... واخذنا مسار الصورة على الجهاز كما هو في الأعلى ... ثم نظغط ok

بعد ذلك :

نذهب الى الخلية الخاصة بالصورة ... وندخل الى الخصائص ... ونظعها كخلفية لها :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ثم اظغط ok

سيكون الشكل كالآتي :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
أضغط على الصورة لعرضها بحجمها الطبيعي في نافذة جديدة .



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

وهذه هي شكل الجدول مع التمدد :

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
أضغط على الصورة لعرضها بحجمها الطبيعي في نافذة جديدة .



الأن اعد كل شيء الى الوراء ... يعني امسح ال enter الى ضغطته ... خليها كما كانت ...

واظغط على الخلية الفارغة بالنصف ... واختار توسيط للكلام :
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
أضغط على الصورة لعرضها بحجمها الطبيعي في نافذة جديدة .



ستجد الآن في الكود مكتوب &nbsp; وهذا معناه فراغ ... فاتركه ... الان سنتولى ام ال </td><td>

لو لاحظت لونت الكود بلونين ... القسم الاول هو للهدر headr الثاني لل footer ... الاول للجزء العلوي من المنتدى والثاني للجزء السفلي من المنتدى .

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
أضغط على الصورة لعرضها بحجمها الطبيعي في نافذة جديدة .



واترك ال &nbsp; على جنب .

الان ندخل الى لوحة تحكم المنتدى ...

الإستايلات والقوالب
التحكم بالإستايلات

اختار الاستايل الذي تريد ان تقوم بالتعديل عليه .. واظغط على اذهب

الان ما نريده هو القوالب الشائعة :

كما في الصورة ... نقوم بمسح كل شيء ما عدا

$spacer_open

$_phpinclude_output

ونظع الكود الأول فيه ... فوق العبارتين

وننزل الى ال
footer

ونظيف الكود الثاني في آآآآآآآخره ... يعني بعد

// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</XXX>

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]


بعد ذلك ... بامكانك التوجه للمنتدى ... لترى البرواز ... وهذ البرواز هو نفسه الذي استخدمته في الاستايل pxll light

وها هو العمل النهائي

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]



وقريبا نبدء بالدرس الثاني [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]