تعلم تصمم استايل لنسخة Mysmartbb من الالف للياء

[Bakenam]

السلام عليكم

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

فحببت ان تعم الفائدة



بسم الله الرحمن الرحيم:
الدرس الأول من دورة تصميم ستايلات
MySmartBB
السلام عليكم:
كيف الأعضاء الطيبين ان شاء الله تكونوا بأحسن حال..اليوم الدرس الأول بالدورة بعنوان(تصميم الستايل على الفوتوشوب).
يا جماعة قبل ما نبدأ الدرس أحب ان تدعولي و لوالدي و لجميع المسلمين في كل مكان.
***********نبدأ على بركة الله********
نفتح برنامج الفوتوشوب:
http://majidoh.awardspace.com/drs1/1/images/1.GIF
و نختار التبويب ملف و نختار من القائمة (جديد) :
http://majidoh.awardspace.com/drs1/1/images/2.GIF
فتظهر لها النافذة التالية نجعل الإعدادات كما في الصورة:
http://majidoh.awardspace.com/drs1/1/images/3.GIF
بعد ان نجعل الإعدادات كالسابق ننقر على موافق..
و من ثم نختار من لوح الألوان:
http://majidoh.awardspace.com/drs1/1/images/4.GIF
لونين متناسقين مثلاً سأختار لون أزرق فاتح و غامق كالتالي
http://majidoh.awardspace.com/drs1/1/images/5.GIF
و الآن إلى اللون الغامق:
http://majidoh.awardspace.com/drs1/1/images/6.GIF
و ننقر بالفأرة على موافق فنكون بهذا قد إخترنا اللونان..انظر:
http://majidoh.awardspace.com/drs1/1/images/7.GIF
الآن نختار اللون الفاتح و نستخدم أداة الدهان:
http://majidoh.awardspace.com/drs1/1/images/8.GIF
و نلون الخلفية باللون الفاتح:
http://majidoh.awardspace.com/drs1/1/images/9.GIF
الآن ننشأ شفيفة جديدة انظر الصورة:
http://majidoh.awardspace.com/drs1/1/images/1-1.GIF
و من بعدها نختار أداة التحديد المستطيل:
http://majidoh.awardspace.com/drs1/1/images/1-2.GIF
و نحدد في الأعلى مستطيلاً كالتالي:
http://majidoh.awardspace.com/drs1/1/images/1-3.GIF
بعد هذا نختار أداة التدرج و نلون المستطيل:
http://majidoh.awardspace.com/drs1/1/images/1-4.GIF
http://majidoh.awardspace.com/drs1/1/images/1-5.GIF
و ننشأ شفيفة جديدة مرة أخرى و نصنع كالمستطيل السابق لكن في الـأسفــل:
http://majidoh.awardspace.com/drs1/1/images/1-6.GIF
و الآن نقوم بتجميل الستايل باتباع الصور التالية:
http://majidoh.awardspace.com/drs1/1/images/1-7.GIF
http://majidoh.awardspace.com/drs1/1/images/1-8.GIF
http://majidoh.awardspace.com/drs1/1/images/1-9.GIF
http://majidoh.awardspace.com/drs1/1/images/2-1.GIF
و نقوم بعمل نفس الأمر مع الفوتر...(المربع السفلي).
ثم نكتب ما نشاء من اسم المنتدى و اسم المصمم:
http://majidoh.awardspace.com/drs1/1/images/2-2.GIF
الآن أنا متأكد من أن التصميم لم يعجبك!!أليس كذلك؟
لا تقلق اتبع الطريقة التالية:
عد إلى الشفيفة الخاصة بالهيدر:
http://majidoh.awardspace.com/drs1/1/images/2-3.GIF
و من بعدها نذهب إلى القائمة ملف ثم نختار فتح تظهر لنا نافذة و نختار منها صورة مناسبة للتصميم:
http://majidoh.awardspace.com/drs1/1/images/2-4.GIF
http://majidoh.awardspace.com/drs1/1/images/2-5.GIF
بعد أن نفتح الصورة نستخدم أداة التحديد المستطيل..و نحدد جزأً من الصورة كالتالي:
http://majidoh.awardspace.com/drs1/1/images/2-6.GIF
و نضغط من لوحة المفاتيح(نسخ):
ctrl+c
و نغلق الصورة و نذهب إلى صورة الستايل القديمة ثم نضغط
ctrl+v (لصق)
لاحظ:
http://majidoh.awardspace.com/drs1/1/images/2-7.GIF
بعد ان نلصق الصورة نضغط من لوحة المفاتيح
ctrl + g
فتصبح كالتالي:
http://majidoh.awardspace.com/drs1/1/images/2-8.GIF
الآن نقوم بتحريك الصورة إلى أن تصبح تحت اسم المنتدى:
http://majidoh.awardspace.com/drs1/1/images/2-9.GIF
بعد أن تفعل كما رأيت تضغط من لوحة المفاتيح
ctrl+u
فتظهر لك النافذة كالتالية:
http://majidoh.awardspace.com/drs1/1/images/3-1.GIF
إفعل كما فعلت أنا او اذا كنت تستخدم ألوانا أخرى فحدد تتعريف و قم بتحريك إشباع حتى تصبح ألوان الصورة كما اخترت انظر نتيجة العمل حتى الآن:
http://majidoh.awardspace.com/drs1/1/images/3-2.GIF
ننتقل الآن إلى استخدام قناع الشفيفة انظر الصور و ستفهم:
http://majidoh.awardspace.com/drs1/1/images/3-3.GIF
الآن ستتحول الألوان في لوح الألوان إلى الأبيض و الأسود لا تقلق ستعود الألوان بعد أن تقوم بالتالي:
http://majidoh.awardspace.com/drs1/1/images/3-4.GIF
إختر أداة التدرج كما في السابق و نذهب إلى الصورة و نقوم كما بالصورة التالية:
http://majidoh.awardspace.com/drs1/1/images/3-5.GIF
قد تسألني ماذا فعلت أجاوبك و أقول اخترت في البداية التدرج الشعاعي لاحظ الصورة السابقة من ثمة استخدمت أداة التدرج حتى صنعت شكلاً جميلاً
(ملاحظة: أظن الصورة التي إخترتُها لم تكن جميلة هع هع).
الآن تقوم بعمل تعديلات كما تشاء على الستايل بحيث يصبح كالتالي(استخدم الطرق السابقة):
http://majidoh.awardspace.com/drs1/1/images/3-6.GIF
بعد أن تقوم بكل هذا عليك أن تصنع أعمدة اتبع الصور ستشرح نفسها:
http://majidoh.awardspace.com/drs1/1/images/3-8.GIF
http://majidoh.awardspace.com/drs1/1/images/3-7.GIF
و الآن نقوم باستخدام الأداة لصنع عمود انظر:
http://majidoh.awardspace.com/drs1/1/images/3-9.GIF
نقوم بالتعديل في خيارات الدمج..
ثم نقوم بمضاعفة الشفيفة عن طريق النقر بالزر الأيمن للفأرة على كلمة الشفيفة و نختر من القائمة مضاعفة:
http://majidoh.awardspace.com/drs1/1/images/4-1.GIF
و نقوم بسحب العمود الثاني إلى الطرف الآخر من الصورة حتى يصبح على الشكل التالي:
http://majidoh.awardspace.com/drs1/1/images/4-2.GIF










**
الدرس: (تقطيع الستايل)
*/*/*
نقوم بفتح برنامج الفوتوشوب و نفتح عملنا القديم و نختار أداة الشرائح:
http://majidoh.awardspace.com/drs2/2/images/1.GIF
و حتى نضمن تقطيعاً سليماً للستايل لا بد من إظهار الشبكة و لإظهارها نتبع التالي
ننقر على التبويب عرض ثم نختار من القائمة إظهار ثم نختار من إظهار نختار الشبكة..انظر الصورة:
http://majidoh.awardspace.com/drs2/2/images/2.GIF
تظهر لك شبكة كما ترى في الصورة:
http://majidoh.awardspace.com/drs2/2/images/3.GIF
نقوم بالتقطيع المتساوي طولاً للهيدر و الفوتر و المتساوي عرضاً للأعمدة:
http://majidoh.awardspace.com/drs2/2/images/4.GIF
الصورة السابقة تبين طريقة تقطيع الهيدر و التالية تبين تقطيع الفوتر:
http://majidoh.awardspace.com/drs2/2/images/5.GIF
يجب مراعاة أخذ جزء فارغ من المؤثرات الجانبية للصورة في الهيدر و الفوتر لاحظ الهيدر و الفوتر في الأعلى.
و تقطيع العمودين كالتالي:
http://majidoh.awardspace.com/drs2/2/images/6.GIF
يعني الشكل كلو على بعضو يكون كالتالي:
http://majidoh.awardspace.com/drs2/2/images/7.GIF
الآن نقوم باختيار ملف ثم حفظ للنسيج العالمي(للويب, save for *** ) .
http://majidoh.awardspace.com/drs2/2/images/8.GIF
بعدها ستظهر لك نافذة لا تكترث لها و انقر فوق موافق..
تظهر لك نافذة قم بفعل التالي:
http://majidoh.awardspace.com/drs2/2/images/9.GIF



طبعاً بعد أن نكون قد نصبنا السيرفر الشخصي و ركبنا المنتدى(لن أشرح ذلك لأن الشرح متوفر في أكثر من موضوع)
نفتح برنامج الفرونت بيج:

و نختر التبويب تعليمات برمجية:

و نمسح كل ما فيها..
الآن بإمكاننا الإنتقال إلى عملية تركيب الستايل..
نقوم باختيار فتح و من ثم جديد..
و نقوم بنفس الخطوة السابقة أي نمسح كل ما في التعليمات البرمجية..
الآن ندخل مجلد الستايل الأساسي و ندخل المجلد
templates
ثم نقوم بفتح الهيدر
لاحظ الصور ستشرح نفسها:

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



سيظهر لك كما في الصورة السابقة .
الآن ننتقل إلى الصفحة الثانية و نضيف جدول من ثلاث أعمدة لاحظ الطريقة:

الآن نقوم بإضافة صور الهيدر إلى الجدول
لكن بالعكس أي أننا نضيف الصورة التي في يمين التصميم في الحقل الذي على يسار الجدول:



و الأمر نفسه مع الصورة الأخرى التي قمنا بتقطيعها انظر:


الآن نريد و ضع صورة التمدد في الخلية التي في الوسط؟عم أتحدث أليس هذا ما تقول في نفسك..
لا عليك سأشرح لك..لقد أخذنا صوراً فارغة من الكلام و قلت انها مهمة هنا تكمن أهميتها..
الطريقة لاستخدامها انقر بالزر الأيمن للفأرة على الخلية التي في الوسط..
و اختر خصائص الخلية انظر الصورة:

ستظر لك نافذة اختر منها التالي:

و اختر صورة التمدد التي قطعناها مع الستايل:

ستظهر لك الخلية على الشكل التالي:

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

بعد أن تنفذ كالسابق تصبح لديك على الشكل التالي:


الآن نقوم بإدراج جدول من ثلاث أعمدة و نقوم بتقسمي العمود الأوسط إلى ثلاث صفوف لاحظ الصورة:

و الآن نقوم بتقسم الخلية لاحظ الطريقة:


ستصبح كالتالي:


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


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

و بعد أن ننسخ الكود نذهب إلى الصفحة السابقة و نحدد الخلية السفلى من الجدول الخاص بالأعمدة(لم أعبر جيداً لكن الصورة ستشرح):

ثم نذهب إلى التعليمات البرمجية..و نقوم بلصق الكود:

الآن إذا رأينا الستايل سيكون فيه جدول لا يحوي شيء لذ علينا أن نلغي حدود الجدول الذي لصقناه للتو:

قد أتلقى منك سؤالاً الآن ما فائدة الجدول إذا كنا سنلغي حدوده؟
الجواب أني وضعت هذا الجدول فقط حتى تمتد الأعمدة و تصل الفوتر..
الآن نلغي الحدود التي في جدول الأعمدة بنفس الطريقة الاولى انظر كيف أصبح:


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


و نذهب إلى صفحتنا السابقة..و نقوم بلصق ما نسخنا في الخلية المتوسطة التي في الوسط:

الآن نقوم بنسخ الروابط و وضعها في خلية العلوية انظر:

و نقوم بلصقها الآن انظر:

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


الآن نقوم بنسخ الكود الخاص(عن طريق التعليمات البرمجية) بالهيدر الذي أنشأناه و نلصقه في قالب الهيدر القديم(الذي في مجلد التمبلايت).
سترى الستايل الآن على الشكل التالي:


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

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

أصبح الشكل مرضي على ما أظن!
لم ننتهي بعد قم بعمل نفس الخطوات مع الفوتر
footer . tpl
هذا اسمه و لاحقته باللغة الإنكليزية انظر ماذا عملت فيه أنا:


هذا شكل الفوتر بالفرونت بيج لكن على المتصفح كيف سيظهر انظر بنفسك:


إحباط مرة أخرى اليس كذلك هههههه لا عليك الحل بسيط إذهب إلى التعليمات البرمجية و في بداية الفوتر اكتب:
:









نبدأ:
بعد أن قمنا بتركيب الصور بالفرونت بيج حان الوقت للتعديل على الأيقونات و الأيقونات التي سنعدل عليها هي التالية:
(موضوع جديد,رد جديد,رسالة جديد,أخذ نسخة , منتدى يحوي على مشاركات جديدة,منتدى لا يحوي على مشاركات جديد,منتدى مغلق).
تابعوا الشرح:
نقوم بفتح برنامج الفوتوشوب و نفتح الصورة التي اسمها
add.gif
من مجلد images في الستايل:

بعد فتح الصورة يتوجب علينا جعل ألوانها ألوان الشاشة حتى نستطيع التعامل مع الصورة انظر الطريقة:

الآن نختار اداة التحديد المستطيل و نسمح كل ما في الصورة:

المسح يكون بتحديد كل ما في الصورة و ضغط من لوحة المفاتيح زر
Delete
الآن نختار أداة المستطيل دائري الزوايا و ننشئ مستطيلاً في الصورة ثم نبدأ بالتأثير عليه عن طريق اختيارات الدمج لاحظ التأثيرات التي قٌمتُ بها:

لاحظ كيف أصبح شكل الصورة:

الآن نقوم بكتابة كلمة موضوع جديد (و لا داعي لشرح الطريقة لأن ذلك مشروح في الدورة أكثر من مرة)
و الآن نختار من ملف حفظ بإسم و نقوم بحفظها بصيغة gif فوق الصورة
add القديمة

بعد الحفظ لا تغلق الصورة...بل عدل على موضوع جديد و اجعلها أضف رد و قم بحفظها فوق الصورة
reply.gif
و بعد الحفظ قم بتغيير الكلمات من أضف رد إلى رسالة جديدة و قم بحفظها فوق
new_pm.gif
و بعدها قم بتعديل الصورة إلى أخذ نسخة و احفظها فوق
take_copy.gif
الآن تستطيع إغلاق الصورة.
افتح بعدها صورة منتدى يحوي مواضيع جديد و قم بالتعديل عليها كالطريقة السابقة إنما على الشكل التالي إتبع الصور:

الآن كتبنا جديد في مربع مع تكبير الصورة..اعمل كما فعلنا في الصور (موضوع جديد رد جديد,,إلخ)
و قم بحفظ الصور على الشكل التالي:
جديد icon-67_new
قديم icon-67_old
مغلق icon-67_lock
وصلة audit
الآن جاء دور التعديل على التدرجات المستخدمة في المنتدى افتح الصورة gradient_tcat و قم بعمل تدرج كالتالي طبعاً بعد أن تجعلها ألوان الشاشة:

و قم بحفظها و اعمل الأمر ذاته مع الصورة
gradient_thead.gif
****الآن انتهينا من المرحلة الأولى في درسنا****
نبدأ المرحلة الثانية على بركة الله تعالى:
هذه المرحلة هي التعديل على السي اس اس و لن اكتب الا قليلاً و سأترككم مع الصور تشرح نفسها:

الصورة السابقة هي في بداية السي اس اس و هي الذي يجب أن نعدل عليها بداية ..أترى الكود المحدد عليك أن تغيره إلى لون خلفية ستايلك للحصول على اللون اتبع التالي:
افتح الفرونت بيج..
امسح كل ما في التعليمات البرمجية في الصفحة...
الآن اكتب كلمة ما و قم بتحديدها و اتبع الصور:

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

طبعاً انسخ من عند # إلى آخر حرف بالكود و قم بلصقه مكان الكود القديم المحدد في السي اس اس.
الآن دور تلوين الجداول لتلوينها علينا اختيار لون محدد بعد ان نختار لوناً نذهب إلى السي اس اس و نتبّع الصورة:

و هناك أشياء أخرى بالسي اس اس اكتشفها بنفسك او استعن بالشرح الذي قدمه
ff5006
جزاه الله خيراً على كل حال ما سأشرح بالسي اس اس الآن هو لتعديل روابط الصور tcat thead
اتبع التالي:
في السي اس اس ترى خمس روابط تراها على الشكل التالي:
styles/main/images/photoname.gif
هذا يعني ان تظهر الصورة من مجلد main أي الستايل الرئيسي و نحن نريد أن تظهر صور ستايلنا ذاتها لذا نعدل الرابط من Main إلى اسم مجلد الستايل مثلاً ستايلي هذا اسم مجلده dora سوف أعدل جميع الروابط التي بالسي اس اس بحيث تصبح كالتالي:
styles/dora/images/photoname.gif

هكذا نكون قد انهينا التعديل على السي اس اس بنجاح و الحمد لله الآن نحفظ السي اس اس و نتابع الشرح النهائي.
**الجزء الثالث من الدرس: (تعديل مسارات الصور في القوالب)**
في هذا الجزء سوف نعدل مسارات الصور التي في القوالب بحيث نغير المسار كاملاً الشرح:
افتح مجلد
images
الخاص بستايلك و افتح مجلدات الصور التي استخدمتها بالستايل و قم بنسخ كل صورة استخدمها و الصقها في مجلد images ,
شاهد الصورة:

الآن نذهب إلى مجلد images الخاص بالستايل و نلصق الصور و نحذف الصور التالية أسمائها:
footer.gif
logo.jpg
background.gif
background.jpg
بعد هذا نفتح قالب الهيدر و نلصقه بالفرونت بيج
و نستعرض التعليمات البرمجية فنرى كود الهيدر بالإضافة إلى روابط الصور نحن لا نقوم بفعل أي شي مع الكود و لكن نقوم بالتعديل على روابط الصور بحيث تصبح كالتالي:
{$image_path}/imagename.gif
الصورة توضح:

نقوم بالأمر ذاته مع كل روابط قالب الهيدر و الفوتر.
J
---***--انتهت سلسلة تصميم الستايلات انظر الآن إلى عملك و ادعلينا***---***

الحمد لله الذي بنعمته تتم الصالحاتJ