تلومني فيك
25-03-2008, 12:39 AM
بسم الله الرحمن الرحيم
سنكمل مابداناه من دروس في تصميم ستايل للمنتدى العربي MySmartBB حيث ان الدرس منقول من المنتدى الرسمي للمنتدى العربي MySmartBB ... شاكرين للاخ "طيف الابداع" على جهوده المبذوله ...
واستكمالا للدروس التي بداناها ...
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الأول"
http://www.gl3a.com/vb/showthread.php?t=39417
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الثاني"
http://www.gl3a.com/vb/showthread.php?t=39418
وعلى بركة الله نبدا الدرس الثالث في تصميم ستايل لمنتديات MySmartBB .. وهو الدرس قبل الاخير ...
نفتح برنامج الفرونت بيج:
http://www.mysbb-files.com/u/2088/5529/1.GIF
و نختر التبويب تعليمات برمجية:
http://www.mysbb-files.com/u/2088/5529/2.GIF
و نمسح كل ما فيها..
الآن بإمكاننا الإنتقال إلى عملية تركيب الستايل..
نقوم باختيار فتح و من ثم جديد..
و نقوم بنفس الخطوة السابقة أي نمسح كل ما في التعليمات البرمجية..
الآن ندخل مجلد الستايل الأساسي و ندخل المجلد
templates
ثم نقوم بفتح الهيدر
لاحظ الصور ستشرح نفسها:
http://www.mysbb-files.com/u/2088/5529/3.GIF
http://www.mysbb-files.com/u/2088/5529/4.GIF
http://www.mysbb-files.com/u/2088/5529/5.GIF
بعد أن نفتح الهيدر نقوم بنسخ كل المحتوى في القالب و نلصقه في التعليمات البرمجية بالفرونت بيج في إحدى الصفحتين التي قمنا بعملها..
و نختار التبويب تصميم:
http://www.mysbb-files.com/u/2088/5529/6.GIF
سيظهر لك كما في الصورة السابقة .
الآن ننتقل إلى الصفحة الثانية و نضيف جدول من ثلاث أعمدة لاحظ الطريقة:
http://www.mysbb-files.com/u/2088/5529/7.GIF
الآن نقوم بإضافة صور الهيدر إلى الجدول
لكن بالعكس أي أننا نضيف الصورة التي في يمين التصميم في الحقل الذي على يسار الجدول:
و الأمر نفسه مع الصورة الأخرى التي قمنا بتقطيعها انظر:
http://www.mysbb-files.com/u/2088/5529/9.GIF
الآن نريد و ضع صورة التمدد في الخلية التي في الوسط؟عم أتحدث أليس هذا ما تقول في نفسك..
لا عليك سأشرح لك..لقد أخذنا صوراً فارغة من الكلام و قلت انها مهمة هنا تكمن أهميتها..
الطريقة لاستخدامها انقر بالزر الأيمن للفأرة على الخلية التي في الوسط..
و اختر خصائص الخلية انظر الصورة:
http://www.mysbb-files.com/u/2088/5529/10.GIF
ستظر لك نافذة اختر منها التالي:
http://www.mysbb-files.com/u/2088/5529/11.GIF
و اختر صورة التمدد التي قطعناها مع الستايل:
http://www.mysbb-files.com/u/2088/5529/12.GIF
ستظهر لك الخلية على الشكل التالي:
http://www.mysbb-files.com/u/2088/5529/13.GIF
و هذا هو المطلوب..الآن لكي نلغي الحدود التي بين الصور ننفذ التالي ننقر بالزر اليمين على أي خلية و نختر خصائص الجدول:
http://www.mysbb-files.com/u/2088/5529/14.GIF
بعد أن تنفذ كالسابق تصبح لديك على الشكل التالي:
http://www.mysbb-files.com/u/2088/5529/15.GIF
الآن نقوم بإدراج جدول من ثلاث أعمدة و نقوم بتقسمي العمود الأوسط إلى ثلاث صفوف لاحظ الصورة:
http://www.mysbb-files.com/u/2088/5529/16.GIF
و الآن نقوم بتقسم الخلية لاحظ الطريقة:
http://www.mysbb-files.com/u/2088/5529/17.GIF
http://www.mysbb-files.com/u/2088/5529/18.GIF
ستصبح كالتالي:
http://www.mysbb-files.com/u/2088/5529/19.GIF
بعد هذا عليك أن تضيف الأعمدة في الخليتين الغير مقسمتين و على فكرة عليك أن تستخدم إضافة صورة و صورة الخلفية لكي تصبح بالقياس الصحيح لاحظ ما فعلت:
http://www.mysbb-files.com/u/2088/5529/20.GIF
الآن نقوم بالذهاب إلى الصفحة الثانية التي وضعنا بها الهيدر و نقوم بتحديد التعليمات البرمجية و ننسخ منها الكود الذي بآخر الهيدر أنظر الكود:
http://www.mysbb-files.com/u/2088/5529/21.GIF
و بعد أن ننسخ الكود نذهب إلى الصفحة السابقة و نحدد الخلية السفلى من الجدول الخاص بالأعمدة(لم أعبر جيداً لكن الصورة ستشرح):
http://www.mysbb-files.com/u/2088/5529/22.GIF
ثم نذهب إلى التعليمات البرمجية..و نقوم بلصق الكود:
http://www.mysbb-files.com/u/2088/5529/23.GIF
الآن إذا رأينا الستايل سيكون فيه جدول لا يحوي شيء لذ علينا أن نلغي حدود الجدول الذي لصقناه للتو:
http://www.mysbb-files.com/u/2088/5529/24.GIF
قد أتلقى منك سؤالاً الآن ما فائدة الجدول إذا كنا سنلغي حدوده؟
الجواب أني وضعت هذا الجدول فقط حتى تمتد الأعمدة و تصل الفوتر..
الآن نلغي الحدود التي في جدول الأعمدة بنفس الطريقة الاولى انظر كيف أصبح:
http://www.mysbb-files.com/u/2088/5529/25.GIF
جميل أليس كذلك هههههه لم ننتهي بعد..
نعود إلى صفحة الهيدر الأصلية و نقوم بنسخ التالي:
http://www.mysbb-files.com/u/2088/5529/26.GIF
و نذهب إلى صفحتنا السابقة..و نقوم بلصق ما نسخنا في الخلية المتوسطة التي في الوسط:
http://www.mysbb-files.com/u/2088/5529/27.GIF
الآن نقوم بنسخ الروابط و وضعها في خلية العلوية انظر:
http://www.mysbb-files.com/u/2088/5529/28.GIF
و نقوم بلصقها الآن انظر:
http://www.mysbb-files.com/u/2088/5529/29.GIF
و نقوم بالأمر نفسه مع جميع الروابط حتى تصبح الصفحة على الشكل التالي:
http://www.mysbb-files.com/u/2088/5529/30.GIF
الآن نقوم بنسخ الكود الخاص(عن طريق التعليمات البرمجية) بالهيدر الذي أنشأناه و نلصقه في قالب الهيدر القديم(الذي في مجلد التمبلايت).
سترى الستايل الآن على الشكل التالي:
http://www.mysbb-files.com/u/2088/5529/31.GIF
ههههههههههه أعرف أن هذا أحبطك لكن هذا بسبب خطأ في ملف السي اس اس بالمنتدى العربي لكن الحمد الله المشكلة محلولة من قبل الأخ الغالي المُعاصر...افتح ملف السي اس اس و قم بعمل كما في الصورة:
http://www.mysbb-files.com/u/2088/5529/32.GIF
ربما تسرعتُ في الحكم هي ليست خطأ إنما هي حدود بين الصور .
انظر الآن نتيجة عملك:
http://www.mysbb-files.com/u/2088/5529/33.GIF
أصبح الشكل مرضي على ما أظن!
لم ننتهي بعد قم بعمل نفس الخطوات مع الفوتر
footer . tpl
هذا اسمه و لاحقته باللغة الإنكليزية انظر ماذا عملت فيه أنا:
http://www.mysbb-files.com/u/2088/5529/34.GIF
هذا شكل الفوتر بالفرونت بيج لكن على المتصفح كيف سيظهر انظر بنفسك:
http://www.mysbb-files.com/u/2088/5529/35.GIF
إحباط مرة أخرى اليس كذلك هههههه لا عليك الحل بسيط إذهب إلى التعليمات البرمجية و في بداية الفوتر اكتب:
http://www.mysbb-files.com/u/2088/5529/36.GIF
و الآن انظر :
http://www.mysbb-files.com/u/2088/5529/37.GIF
هيك صار الحكي حلو مو..هههههههه ...
تم بحمد الله الإنتهاء من درس التركيب.
الآن انتظروا الدرس القادم التعديل على السي اس اس و تعديل روابط الصور بالإضافة إلى صناعة أيقونات خاصة بالستايل و هو آخر درس و راح يكون بالدرس مفاجئة حلوة جداً. :)
سنكمل مابداناه من دروس في تصميم ستايل للمنتدى العربي MySmartBB حيث ان الدرس منقول من المنتدى الرسمي للمنتدى العربي MySmartBB ... شاكرين للاخ "طيف الابداع" على جهوده المبذوله ...
واستكمالا للدروس التي بداناها ...
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الأول"
http://www.gl3a.com/vb/showthread.php?t=39417
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الثاني"
http://www.gl3a.com/vb/showthread.php?t=39418
وعلى بركة الله نبدا الدرس الثالث في تصميم ستايل لمنتديات MySmartBB .. وهو الدرس قبل الاخير ...
نفتح برنامج الفرونت بيج:
http://www.mysbb-files.com/u/2088/5529/1.GIF
و نختر التبويب تعليمات برمجية:
http://www.mysbb-files.com/u/2088/5529/2.GIF
و نمسح كل ما فيها..
الآن بإمكاننا الإنتقال إلى عملية تركيب الستايل..
نقوم باختيار فتح و من ثم جديد..
و نقوم بنفس الخطوة السابقة أي نمسح كل ما في التعليمات البرمجية..
الآن ندخل مجلد الستايل الأساسي و ندخل المجلد
templates
ثم نقوم بفتح الهيدر
لاحظ الصور ستشرح نفسها:
http://www.mysbb-files.com/u/2088/5529/3.GIF
http://www.mysbb-files.com/u/2088/5529/4.GIF
http://www.mysbb-files.com/u/2088/5529/5.GIF
بعد أن نفتح الهيدر نقوم بنسخ كل المحتوى في القالب و نلصقه في التعليمات البرمجية بالفرونت بيج في إحدى الصفحتين التي قمنا بعملها..
و نختار التبويب تصميم:
http://www.mysbb-files.com/u/2088/5529/6.GIF
سيظهر لك كما في الصورة السابقة .
الآن ننتقل إلى الصفحة الثانية و نضيف جدول من ثلاث أعمدة لاحظ الطريقة:
http://www.mysbb-files.com/u/2088/5529/7.GIF
الآن نقوم بإضافة صور الهيدر إلى الجدول
لكن بالعكس أي أننا نضيف الصورة التي في يمين التصميم في الحقل الذي على يسار الجدول:
و الأمر نفسه مع الصورة الأخرى التي قمنا بتقطيعها انظر:
http://www.mysbb-files.com/u/2088/5529/9.GIF
الآن نريد و ضع صورة التمدد في الخلية التي في الوسط؟عم أتحدث أليس هذا ما تقول في نفسك..
لا عليك سأشرح لك..لقد أخذنا صوراً فارغة من الكلام و قلت انها مهمة هنا تكمن أهميتها..
الطريقة لاستخدامها انقر بالزر الأيمن للفأرة على الخلية التي في الوسط..
و اختر خصائص الخلية انظر الصورة:
http://www.mysbb-files.com/u/2088/5529/10.GIF
ستظر لك نافذة اختر منها التالي:
http://www.mysbb-files.com/u/2088/5529/11.GIF
و اختر صورة التمدد التي قطعناها مع الستايل:
http://www.mysbb-files.com/u/2088/5529/12.GIF
ستظهر لك الخلية على الشكل التالي:
http://www.mysbb-files.com/u/2088/5529/13.GIF
و هذا هو المطلوب..الآن لكي نلغي الحدود التي بين الصور ننفذ التالي ننقر بالزر اليمين على أي خلية و نختر خصائص الجدول:
http://www.mysbb-files.com/u/2088/5529/14.GIF
بعد أن تنفذ كالسابق تصبح لديك على الشكل التالي:
http://www.mysbb-files.com/u/2088/5529/15.GIF
الآن نقوم بإدراج جدول من ثلاث أعمدة و نقوم بتقسمي العمود الأوسط إلى ثلاث صفوف لاحظ الصورة:
http://www.mysbb-files.com/u/2088/5529/16.GIF
و الآن نقوم بتقسم الخلية لاحظ الطريقة:
http://www.mysbb-files.com/u/2088/5529/17.GIF
http://www.mysbb-files.com/u/2088/5529/18.GIF
ستصبح كالتالي:
http://www.mysbb-files.com/u/2088/5529/19.GIF
بعد هذا عليك أن تضيف الأعمدة في الخليتين الغير مقسمتين و على فكرة عليك أن تستخدم إضافة صورة و صورة الخلفية لكي تصبح بالقياس الصحيح لاحظ ما فعلت:
http://www.mysbb-files.com/u/2088/5529/20.GIF
الآن نقوم بالذهاب إلى الصفحة الثانية التي وضعنا بها الهيدر و نقوم بتحديد التعليمات البرمجية و ننسخ منها الكود الذي بآخر الهيدر أنظر الكود:
http://www.mysbb-files.com/u/2088/5529/21.GIF
و بعد أن ننسخ الكود نذهب إلى الصفحة السابقة و نحدد الخلية السفلى من الجدول الخاص بالأعمدة(لم أعبر جيداً لكن الصورة ستشرح):
http://www.mysbb-files.com/u/2088/5529/22.GIF
ثم نذهب إلى التعليمات البرمجية..و نقوم بلصق الكود:
http://www.mysbb-files.com/u/2088/5529/23.GIF
الآن إذا رأينا الستايل سيكون فيه جدول لا يحوي شيء لذ علينا أن نلغي حدود الجدول الذي لصقناه للتو:
http://www.mysbb-files.com/u/2088/5529/24.GIF
قد أتلقى منك سؤالاً الآن ما فائدة الجدول إذا كنا سنلغي حدوده؟
الجواب أني وضعت هذا الجدول فقط حتى تمتد الأعمدة و تصل الفوتر..
الآن نلغي الحدود التي في جدول الأعمدة بنفس الطريقة الاولى انظر كيف أصبح:
http://www.mysbb-files.com/u/2088/5529/25.GIF
جميل أليس كذلك هههههه لم ننتهي بعد..
نعود إلى صفحة الهيدر الأصلية و نقوم بنسخ التالي:
http://www.mysbb-files.com/u/2088/5529/26.GIF
و نذهب إلى صفحتنا السابقة..و نقوم بلصق ما نسخنا في الخلية المتوسطة التي في الوسط:
http://www.mysbb-files.com/u/2088/5529/27.GIF
الآن نقوم بنسخ الروابط و وضعها في خلية العلوية انظر:
http://www.mysbb-files.com/u/2088/5529/28.GIF
و نقوم بلصقها الآن انظر:
http://www.mysbb-files.com/u/2088/5529/29.GIF
و نقوم بالأمر نفسه مع جميع الروابط حتى تصبح الصفحة على الشكل التالي:
http://www.mysbb-files.com/u/2088/5529/30.GIF
الآن نقوم بنسخ الكود الخاص(عن طريق التعليمات البرمجية) بالهيدر الذي أنشأناه و نلصقه في قالب الهيدر القديم(الذي في مجلد التمبلايت).
سترى الستايل الآن على الشكل التالي:
http://www.mysbb-files.com/u/2088/5529/31.GIF
ههههههههههه أعرف أن هذا أحبطك لكن هذا بسبب خطأ في ملف السي اس اس بالمنتدى العربي لكن الحمد الله المشكلة محلولة من قبل الأخ الغالي المُعاصر...افتح ملف السي اس اس و قم بعمل كما في الصورة:
http://www.mysbb-files.com/u/2088/5529/32.GIF
ربما تسرعتُ في الحكم هي ليست خطأ إنما هي حدود بين الصور .
انظر الآن نتيجة عملك:
http://www.mysbb-files.com/u/2088/5529/33.GIF
أصبح الشكل مرضي على ما أظن!
لم ننتهي بعد قم بعمل نفس الخطوات مع الفوتر
footer . tpl
هذا اسمه و لاحقته باللغة الإنكليزية انظر ماذا عملت فيه أنا:
http://www.mysbb-files.com/u/2088/5529/34.GIF
هذا شكل الفوتر بالفرونت بيج لكن على المتصفح كيف سيظهر انظر بنفسك:
http://www.mysbb-files.com/u/2088/5529/35.GIF
إحباط مرة أخرى اليس كذلك هههههه لا عليك الحل بسيط إذهب إلى التعليمات البرمجية و في بداية الفوتر اكتب:
http://www.mysbb-files.com/u/2088/5529/36.GIF
و الآن انظر :
http://www.mysbb-files.com/u/2088/5529/37.GIF
هيك صار الحكي حلو مو..هههههههه ...
تم بحمد الله الإنتهاء من درس التركيب.
الآن انتظروا الدرس القادم التعديل على السي اس اس و تعديل روابط الصور بالإضافة إلى صناعة أيقونات خاصة بالستايل و هو آخر درس و راح يكون بالدرس مفاجئة حلوة جداً. :)