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

عرض كامل الموضوع : [ د-م-1 | 8 ] - دورة تصميم ستايل منتديات - تعديلات واضافات بالمنتدى



X100
03-08-2010, 13:48
بسم الله الرحمن الرحيم


السلآم عليكم ورحمة الله وبركاته


كيف حالكم جميعاً ؟

ان شاء الله بخير وصحة وعافية




أقدم لكم أخيراً الدرس النهائي والختامي من دورة تصميم ستايلات منتديات الـ vb ::سعادة::

نأسف على التأخير مرة أخرى :ميت: ، انتهى اشتراك النت لدي واضطررت الآن الى التوجه الى أحد المقاهي :D


http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427


الدرس هذا سنتحدث فيه عن برمجة الـ CSS

يعني أن كل عملنا تقريباً سيكون باعدادات المنتدى الداخلية ، وسيكون الدرس على شكل فقرات :) .

http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427


الفهرس :


• اصلاح الفراغ

• تلوين الخلفية

• تركيب خلفية ◄ خارجية - داخلية

• مجلدات الصور

• تأطير / تلوين داخلي للقوالب

• تقليص المنتدى

• حفظ الستايل




http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427

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




{ اصلاح الفراغ }


- بعد فتح المنتدى ستلاحظون وجود فراغ بسيط يظهر على حواف الستايل ، مثل الصورة التالية :

http://www.mexat.com/vb/attachment.php?attachmentid=1297964&stc=1&d=1288868262



* لإصلاحها نتبع الآتي :

- بعد الدخول على لوحة تحكم الإدارة نختار التحكم بالاستايلات

http://www.mexat.com/vb/attachment.php?attachmentid=1297965&stc=1&d=1288868262



- نختار " اذهب " على الستايل الذي نود تعديله

http://www.mexat.com/vb/attachment.php?attachmentid=1297966&stc=1&d=1288868262



- بعد النزول الى أسفل قليلاً .. واذا وجدنا المستطيل المسمى " خلفية المنتدى / Body "

نعدل " خواص CSS الإضافية بحيث نجعل جميع الأرقام الموجودة الى 0 .. ثم ننزل آخر الصفحة ونختار " حفظ "

http://www.mexat.com/vb/attachment.php?attachmentid=1297967&stc=1&d=1288868262



- والنتيجة اختفاء الفراغات ::جيد::

http://www.mexat.com/vb/attachment.php?attachmentid=1297968&stc=1&d=1288868262


http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427


{ تلوين الخلفية }


الخلفية هي الفراغات البيضاء الظاهرة أمامكم عند فتح الستايل :

http://www.mexat.com/vb/attachment.php?attachmentid=1297986&stc=1&d=1288869478



لهذا أولاً ، نفتح أي جزء من صور الستايل بالمنتدى والذي يحمل لون الخلفية الذي نريده .. ثم نختار هذه الأداة http://www.mexat.com/vb/attachment.php?attachmentid=1297987&stc=1&d=1288869478



سيظهر اللون في المربعين الصغيرين . نضغط عليه http://www.mexat.com/vb/attachment.php?attachmentid=1297988&stc=1&d=1288869478



ننسخ الكود الظاهر امامنا

http://www.mexat.com/vb/attachment.php?attachmentid=1297989&stc=1&d=1288869478



ثم نذهب الى لوحة تحكم الإدارة

http://www.mexat.com/vb/attachment.php?attachmentid=1297965&stc=1&d=1288868262


http://www.mexat.com/vb/attachment.php?attachmentid=1297966&stc=1&d=1288868262



ثم ننزل للأسفل حتى نجد القالب المسمى " خلفية الصفحة / Page Background " ونضع الكود بدون مسح الـ #

http://www.mexat.com/vb/attachment.php?attachmentid=1297990&stc=1&d=1288869478




ثم نذهب الى آخر الصفحة ونختار " حفظ " .. ونذهب الى المنتدى ونرى النتيجة :



http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427



{ تركيب الخلفية }

[ تركيب خلفية خارجية ]


الخلفية الخارجية هي الخلفية التي تقع على حدود الستايل ، وتقريباً هذه الطريقة لا تفيد الا بالستايل الخالي من مناطق التمدد او الستايلات المقلّصة العرض ..

وهي الموجودة برقم واحد بالصورة التالية :

http://www.mexat.com/vb/attachment.php?attachmentid=1302666&stc=1&d=1289469404



لتركيب صورة للخلفية نتبع الآتي :

ندخل على لوحة تحكم الإدارة ونختار التحكم بالاستايلات :

http://www.mexat.com/vb/attachment.php?attachmentid=1297965&stc=1&d=1288868262



نختار " اذهب " على الستايل الذي نود تركيب الخلفية فيه

http://www.mexat.com/vb/attachment.php?attachmentid=1297966&stc=1&d=1288868262



ننزل للأسفل حتى نرى الجدول " خلفية المنتدى / Body "

وتحديداً المحدد باللون البرتقالي ..

http://www.mexat.com/vb/attachment.php?attachmentid=1302706&stc=1&d=1289471091



في الفراغ الموجود ،
#E1E1E2 نضيف بعدها مسافة ثم نلصق هذا الكود بعد تعديل ما يأتي :


url(Folder Name/Background Name.jpg) repeat-y fixed center topالـ Folder Name نغيره ونجعله اسم مجلد الستايل الموجود بداخل ملف الـ vb
اما الـ Background Name فنغيره ونجعله اسم صورة الخلفية الموجودة بداخل ملف الستايل ،
اما الـ jpg فنغيرها الى صيغة صورة الخلفية التي صممناها
وأيضاً اذا كان اسم المجلد او الصورة يحتوي على مسافة فتكتب المسافة على شكل 20%

- واضيف أيضاً انه يفضل ان تكون صورة الخلفية بعرض 1280 بكسل ان أمكن .. او أياً كان عرض شاشة جهازك ..

بعد التعديل :


url(New%20Style/Background.jpg) repeat-y fixed center tophttp://www.mexat.com/vb/attachment.php?attachmentid=1302668&stc=1&d=1289469404




ثم والخطوة الأخيرة نضع صورة الخلفية بداخل ملف الستايل الذي نريده .. وانا وضعته بمجلد الـ New Style



النتيجة :

http://www.mexat.com/vb/attachment.php?attachmentid=1302699&stc=1&d=1289470325



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



http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427


[ تركيب خلفية داخلية ]


الخلفية الداخلية هي الخلفية البيضاء والمحددة برقم 2 بالصورة :

http://www.mexat.com/vb/attachment.php?attachmentid=1302666&stc=1&d=1289469404



لتعديلها ندخل الى لوحة تحكم الادارة ، ونختار التحكم بالاستايلات

http://www.mexat.com/vb/attachment.php?attachmentid=1297965&stc=1&d=1288868262




ثم نختار الستايل الذي نود التعديل عليه ونضغط " اذهب "

http://www.mexat.com/vb/attachment.php?attachmentid=1297966&stc=1&d=1288868262



ننزل الى الأسفل حتى نجد القالب المسمى " خلفية الصفحة / Page Background "

http://www.mexat.com/vb/attachment.php?attachmentid=1302686&stc=1&d=1289469758



وبعد كود اللون
#FFFFFF نضيف مسافة ثم الكود التالي :


url(File Name/Background name.jpg) repeat-y fixed center topالـ Folder Name نغيره ونجعله اسم مجلد الستايل الموجود بداخل ملف الـ vb
اما الـ Background Name فنغيره ونجعله اسم صورة الخلفية الموجودة بداخل ملف الستايل ،
اما الـ jpg فنغيرها الى صيغة صورة الخلفية التي صممناها
وأيضاً اذا كان اسم المجلد او الصورة يحتوي على مسافة فتكتب المسافة على شكل 20%

- واضيف أيضاً انه يفضل ان تكون صورة الخلفية بعرض 1280 بكسل وطول 800 بكسل ان أمكن .. او أياً كان حجم شاشة جهازك ..

بعد التعديل :


url(New%20Style/Background.jpg) repeat-y fixed center tophttp://www.mexat.com/vb/attachment.php?attachmentid=1302677&stc=1&d=1289469507


ثم نختار " حفظ " من آخر الصفحة



ثم والخطوة الأخيرة نضع صورة الخلفية بداخل ملف الستايل الذي نريده .. وانا وضعته بمجلد الـ New Style





النتيجة :

http://www.mexat.com/vb/attachment.php?attachmentid=1302685&stc=1&d=1289469758



طبعاً انا استخدمت نفس الصورة في الخلفية الخارجية والداخلية لتظهر وكأنها خلفية واحدة :D




http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427






يتبع

X100
03-08-2010, 13:48
{ مسار مجلد الصور }

هذه الفقرة هي من الفقرات الأساسية والمهمة بالستايل.. وهي تصميم الأيقونات و أزرار المنتدى..


اولا و كـ خطوة أساسية نذهب الى ملف الـ vb وننسخ الملف المسمى images ..ثم نلصقه بداخل مجلد الستايل الخاص بنا .. وبعدها :

بعد الدخول الى لوحة تحكم الادارة و اختيار الستايل ..

ننزل للأسفل حتى نجد الجدول المسمى " مسار مجلد الصور / ImagePaths "


http://www.mexat.com/vb/attachment.php?attachmentid=1304710&stc=1&d=1289701412



سيكون عملنا الآن على هذه النقطة ،،

في كل الفراغات التالية .. نأخذ مثلآ مجلد الأزرار
images/buttons .. نكتب قبل images اسم مجلد الستايل الخاص بنا ثم / .. أي ستصبح بهذا الشكل :


New%20Style/images/buttons- أذكركم بأن المسافات بين الكلمات تكتب 20%


نفعل هذا بكل الفراغات لتصبح :


http://www.mexat.com/vb/attachment.php?attachmentid=1302713&stc=1&d=1289473185


ثم نختار حفظ من آخر الصفحة ..


بعدها لنبدأ العمل كـ مثال اولا على " مجلد صور الأزرار "

لنفهم محتواه .. يجب علينا اولا الدخول على هذا الملف .. نذهب الى مجلد الـ vb ثم الى ملف الستايل الخاص بنا .. ثم ملف images الذي نسخناه .. ثم buttons وهو اسم مجلد الأزرار ..الصور الموجودة به مثل :

اضافة رد - اقتباس - مغلق ... الخ .. نصمم هذه الأزرار بأنفسنا .. ثم نسميه مثل الاسم الموجود بالملف .. ونستبدله .. كمثال :-

انا صممت زر " موضوع جديد " وهذا هو :
(((((يجب أن يكون بصيغة gif )))))

http://www.mexat.com/vb/attachment.php?attachmentid=1304665&stc=1&d=1289688220





ننقل الزر الى ملف الـ buttons الخاص بالستايل

http://www.mexat.com/vb/attachment.php?attachmentid=1304666&stc=1&d=1289688220



نبحث عن الزر المشابه ، ثم نعمل نسخ للاسم ..

http://www.mexat.com/vb/attachment.php?attachmentid=1304667&stc=1&d=1289688220



نحذف الزر الأصلي ..

http://www.mexat.com/vb/attachment.php?attachmentid=1304668&stc=1&d=1289688220



نلصق اسم الزر الاصلي بالزر الذي صممناه

http://www.mexat.com/vb/attachment.php?attachmentid=1304669&stc=1&d=1289688220



الآن بمجرد الذهاب الى المنتدى نجد أن الزر قد تغير :

http://www.mexat.com/vb/attachment.php?attachmentid=1304678&stc=1&d=1289689992




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

أتمنى أن يكون شرحي واضح ، ومن لم يفهم فلآ بأس بإعادة الشرح :o



http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427


{ التأطير الداخلي للقوالب }


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

يجب ان تفهموا طرييقة الاكواد التي شرحناها بـ خطوة تركيب الخلفية


ندخل الى ملف images ثم الى gradients .. ونضع الصور هناك ، ثم نكمل ...


اولا لتغيير أي تأطير ندخل الى لوحة تحكم الادارة > التحكم بالاستايلات ، ونختار الستايل


ثم ننزل الى الجداول التي بالأسفل ..


1- جدول (الأقسام الرئيسية/Category Strips)


http://www.mexat.com/vb/attachment.php?attachmentid=1305002&stc=1&d=1289743711

وهو هذا القالب :

http://www.mexat.com/vb/attachment.php?attachmentid=1304998&stc=1&d=1289743711


يفضل ان يكون التصميم بطول 28 بكسل ، اما العرض فلا مشكلة به ، ولكن يجب ان يكون قابل للتمدد ..
مثل :

http://www.mexat.com/vb/attachment.php?attachmentid=1304999&stc=1&d=1289743711



2- جدول (رأس الجدول/Table Header)

http://www.mexat.com/vb/attachment.php?attachmentid=1305003&stc=1&d=1289743711

وهذا هو القالب :

http://www.mexat.com/vb/attachment.php?attachmentid=1305004&stc=1&d=1289743711


يفضل ان يكون التصميم بطول 34 بكسل ، اما العرض فلا مشكلة به ، ويجب ان يكون قابل للتمدد ..
مثل :

http://www.mexat.com/vb/attachment.php?attachmentid=1305009&stc=1&d=1289744193





3- جدول (نهاية الجدول/Table Footer)

http://www.mexat.com/vb/attachment.php?attachmentid=1305011&stc=1&d=1289744428

وهو هذا القالب :

http://www.mexat.com/vb/attachment.php?attachmentid=1305010&stc=1&d=1289744389

يفضل ان يكون التصميم بطول 25 بكسل ، اما العرض فلا مشكلة به ، ويجب ان يكون قابل للتمدد
مثل :


http://www.mexat.com/vb/attachment.php?attachmentid=1305013&stc=1&d=1289744498



النتيجة بالمنتدى :


http://www.mexat.com/vb/attachment.php?attachmentid=1305312&stc=1&d=1289778758



ارأيتم كيف اصبح المنتدى رائعاً بعد التعديلات :لقافة: ؟



وهكذا اخوتي في كل الجداول والقوالب الباقية ..

تستطيعون ايضاً تغيير الخط - اللون - الحجم .. في كل الجداول ..

أي سؤال او استفسار فلا مانع ..:o



http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427


{ تقليص عرض المنتدى }

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


بعد الدخول الى لوحة تحكم الادارة >> التحكم بالاستايلات ، واختيار الستايل الذي تودون تعديله

ننزل للاسفل حتى نجد الجدول المسمى " مقاسات عرض المنتدى + مسار الصور الخاصة بالإستايل "

نعدل الخيار الأول من 100% الى 800 بكسل مثلا ،،

لجعل الحجم بالنسبة المئوية يكتب الرقم ثم اشارة الـ %
لجعل الحجم بالبكسل ، يكتب الرقم فقط

http://www.mexat.com/vb/attachment.php?attachmentid=1304680&stc=1&d=1289690052



بعد الضغط على حفظ ، النتيجة :

http://www.mexat.com/vb/attachment.php?attachmentid=1304681&stc=1&d=1289690052





http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427



{ الستايل / حفظه - تحميله }

[ حفظ الستايل ]


ندخل اولا على " رفع / تحميل الاستايل "

http://www.mexat.com/vb/attachment.php?attachmentid=1304706&stc=1&d=1289701323



نتبع الشرح مثلما هو موضح بالصورة ، ثم نختار " تحميل "

http://www.mexat.com/vb/attachment.php?attachmentid=1304707&stc=1&d=1289701323



ستظهر رسالة لحفظ الملف بصيغة xml ، نحفظها

http://www.mexat.com/vb/attachment.php?attachmentid=1304708&stc=1&d=1289701323



النتيجة :

http://www.mexat.com/vb/attachment.php?attachmentid=1304709&stc=1&d=1289701323




http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427




[ تحميل الستايل ]


نضغط على choose file

http://www.mexat.com/vb/attachment.php?attachmentid=1304711&stc=1&d=1289701930



نختار ملف الستايل - ويجب ان يكون بصيغة xml -

http://www.mexat.com/vb/attachment.php?attachmentid=1304712&stc=1&d=1289701930




نختار " استيراد "

http://www.mexat.com/vb/attachment.php?attachmentid=1304713&stc=1&d=1289701930



نختار " تم "

http://www.mexat.com/vb/attachment.php?attachmentid=1304714&stc=1&d=1289701930



النتيجة :

http://www.mexat.com/vb/attachment.php?attachmentid=1304715&stc=1&d=1289701930




http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427


نتيجة المنتدى الأخيرة :D :

http://img99.imageshack.us/img99/7113/77496208.jpg


لمن أراد تحميل هذا الاستايل اضغط هنا ::جيد:: (http://www.mediafire.com/download.php?xyabrnr2ulkaa24)



http://www.mexat.com/vb/attachment.php?attachmentid=1304682&stc=1&d=1289690427




وبهذا اخواني واخواتي ننتهي من دورة تصميم ستايلات الـ vb ::سعادة::

آسف على تقصيري في جميع الدروس وارجو المعذرة ^^"

أي سؤال او استفسار فلا تترددوا حالياً ، وبإذن الله لن أخذلكم ::جيد::


يرجى ارفاق صورة لمنتداكم بعد درس اليوم لنرى نتيجة الدورة ::سعادة::


تم بحمدالله



في امان الله ورعآيته