Bakenam
03-16-2009, 10:28 PM
بسم الله الرحمن الرحيم
سنكمل مابداناه من دروس في تصميم ستايل للمنتدى العربي MySmartBB حيث ان الدرس منقول من المنتدى الرسمي للمنتدى العربي MySmartBB
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الأول" (http://www.traidnt.net/vb/showthread.php?t=752224)
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الثاني" (http://www.traidnt.net/vb/showthread.php?t=752238)
وعلى بركة الله نبدا الدرس الثالث في تصميم ستايل لمنتديات MySmartBB .. وهو الدرس قبل الاخير ...
نفتح برنامج الفرونت بيج:
و نختر التبويب تعليمات برمجية:
و نمسح كل ما فيها..
الآن بإمكاننا الإنتقال إلى عملية تركيب الستايل..
نقوم باختيار فتح و من ثم جديد..
و نقوم بنفس الخطوة السابقة أي نمسح كل ما في التعليمات البرمجية..
الآن ندخل مجلد الستايل الأساسي و ندخل المجلد
templates
ثم نقوم بفتح الهيدر
لاحظ الصور ستشرح نفسها:
بعد أن نفتح الهيدر نقوم بنسخ كل المحتوى في القالب و نلصقه في التعليمات البرمجية بالفرونت بيج في إحدى الصفحتين التي قمنا بعملها..
و نختار التبويب تصميم:
سيظهر لك كما في الصورة السابقة .
الآن ننتقل إلى الصفحة الثانية و نضيف جدول من ثلاث أعمدة لاحظ الطريقة:
الآن نقوم بإضافة صور الهيدر إلى الجدول
لكن بالعكس أي أننا نضيف الصورة التي في يمين التصميم في الحقل الذي على يسار الجدول:
و الأمر نفسه مع الصورة الأخرى التي قمنا بتقطيعها انظر:
الآن نريد و ضع صورة التمدد في الخلية التي في الوسط؟عم أتحدث أليس هذا ما تقول في نفسك..
لا عليك سأشرح لك..لقد أخذنا صوراً فارغة من الكلام و قلت انها مهمة هنا تكمن أهميتها..
الطريقة لاستخدامها انقر بالزر الأيمن للفأرة على الخلية التي في الوسط..
و اختر خصائص الخلية انظر الصورة:
http://www.mysbb-files.com/u/2088/5529/10.GIF
ستظر لك نافذة اختر منها التالي:
و اختر صورة التمدد التي قطعناها مع الستايل:
ستظهر لك الخلية على الشكل التالي:
و هذا هو المطلوب..الآن لكي نلغي الحدود التي بين الصور ننفذ التالي ننقر بالزر اليمين على أي خلية و نختر خصائص الجدول:
بعد أن تنفذ كالسابق تصبح لديك على الشكل التالي:
الآن نقوم بإدراج جدول من ثلاث أعمدة و نقوم بتقسمي العمود الأوسط إلى ثلاث صفوف لاحظ الصورة:
و الآن نقوم بتقسم الخلية لاحظ الطريقة:
ستصبح كالتالي:
بعد هذا عليك أن تضيف الأعمدة في الخليتين الغير مقسمتين و على فكرة عليك أن تستخدم إضافة صورة و صورة الخلفية لكي تصبح بالقياس الصحيح لاحظ ما فعلت:
الآن نقوم بالذهاب إلى الصفحة الثانية التي وضعنا بها الهيدر و نقوم بتحديد التعليمات البرمجية و ننسخ منها الكود الذي بآخر الهيدر أنظر الكود:
و بعد أن ننسخ الكود نذهب إلى الصفحة السابقة و نحدد الخلية السفلى من الجدول الخاص بالأعمدة(لم أعبر جيداً لكن الصورة ستشرح):
ثم نذهب إلى التعليمات البرمجية..و نقوم بلصق الكود:
الآن إذا رأينا الستايل سيكون فيه جدول لا يحوي شيء لذ علينا أن نلغي حدود الجدول الذي لصقناه للتو:
قد أتلقى منك سؤالاً الآن ما فائدة الجدول إذا كنا سنلغي حدوده؟
الجواب أني وضعت هذا الجدول فقط حتى تمتد الأعمدة و تصل الفوتر..
الآن نلغي الحدود التي في جدول الأعمدة بنفس الطريقة الاولى انظر كيف أصبح:
جميل أليس كذلك هههههه لم ننتهي بعد..
نعود إلى صفحة الهيدر الأصلية و نقوم بنسخ التالي:
و نذهب إلى صفحتنا السابقة..و نقوم بلصق ما نسخنا في الخلية المتوسطة التي في الوسط:
الآن نقوم بنسخ الروابط و وضعها في خلية العلوية انظر:
و نقوم بلصقها الآن انظر:
و نقوم بالأمر نفسه مع جميع الروابط حتى تصبح الصفحة على الشكل التالي:
الآن نقوم بنسخ الكود الخاص(عن طريق التعليمات البرمجية) بالهيدر الذي أنشأناه و نلصقه في قالب الهيدر القديم(الذي في مجلد التمبلايت).
سترى الستايل الآن على الشكل التالي:
ههههههههههه أعرف أن هذا أحبطك لكن هذا بسبب خطأ في ملف السي اس اس بالمنتدى العربي لكن الحمد الله المشكلة محلولة من قبل الأخ الغالي المُعاصر...افتح ملف السي اس اس و قم بعمل كما في الصورة:
ربما تسرعتُ في الحكم هي ليست خطأ إنما هي حدود بين الصور .
انظر الآن نتيجة عملك:
أصبح الشكل مرضي على ما أظن!
لم ننتهي بعد قم بعمل نفس الخطوات مع الفوتر
footer . tpl
هذا اسمه و لاحقته باللغة الإنكليزية انظر ماذا عملت فيه أنا:
هذا شكل الفوتر بالفرونت بيج لكن على المتصفح كيف سيظهر انظر بنفسك:
http://www.mysbb-files.com/u/2088/5529/35.GIF
إحباط مرة أخرى اليس كذلك هههههه لا عليك الحل بسيط إذهب إلى التعليمات البرمجية و في بداية الفوتر اكتب:
و الآن انظر :
هيك صار الحكي حلو مو..هههههههه ...
تم بحمد الله الإنتهاء من درس التركيب.
الآن انتظروا الدرس القادم التعديل على السي اس اس و تعديل روابط الصور بالإضافة إلى صناعة أيقونات خاصة بالستايل و هو آخر درس و راح يكون بالدرس مفاجئة حلوة جداً.
سنكمل مابداناه من دروس في تصميم ستايل للمنتدى العربي MySmartBB حيث ان الدرس منقول من المنتدى الرسمي للمنتدى العربي MySmartBB
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الأول" (http://www.traidnt.net/vb/showthread.php?t=752224)
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الثاني" (http://www.traidnt.net/vb/showthread.php?t=752238)
وعلى بركة الله نبدا الدرس الثالث في تصميم ستايل لمنتديات MySmartBB .. وهو الدرس قبل الاخير ...
نفتح برنامج الفرونت بيج:
و نختر التبويب تعليمات برمجية:
و نمسح كل ما فيها..
الآن بإمكاننا الإنتقال إلى عملية تركيب الستايل..
نقوم باختيار فتح و من ثم جديد..
و نقوم بنفس الخطوة السابقة أي نمسح كل ما في التعليمات البرمجية..
الآن ندخل مجلد الستايل الأساسي و ندخل المجلد
templates
ثم نقوم بفتح الهيدر
لاحظ الصور ستشرح نفسها:
بعد أن نفتح الهيدر نقوم بنسخ كل المحتوى في القالب و نلصقه في التعليمات البرمجية بالفرونت بيج في إحدى الصفحتين التي قمنا بعملها..
و نختار التبويب تصميم:
سيظهر لك كما في الصورة السابقة .
الآن ننتقل إلى الصفحة الثانية و نضيف جدول من ثلاث أعمدة لاحظ الطريقة:
الآن نقوم بإضافة صور الهيدر إلى الجدول
لكن بالعكس أي أننا نضيف الصورة التي في يمين التصميم في الحقل الذي على يسار الجدول:
و الأمر نفسه مع الصورة الأخرى التي قمنا بتقطيعها انظر:
الآن نريد و ضع صورة التمدد في الخلية التي في الوسط؟عم أتحدث أليس هذا ما تقول في نفسك..
لا عليك سأشرح لك..لقد أخذنا صوراً فارغة من الكلام و قلت انها مهمة هنا تكمن أهميتها..
الطريقة لاستخدامها انقر بالزر الأيمن للفأرة على الخلية التي في الوسط..
و اختر خصائص الخلية انظر الصورة:
http://www.mysbb-files.com/u/2088/5529/10.GIF
ستظر لك نافذة اختر منها التالي:
و اختر صورة التمدد التي قطعناها مع الستايل:
ستظهر لك الخلية على الشكل التالي:
و هذا هو المطلوب..الآن لكي نلغي الحدود التي بين الصور ننفذ التالي ننقر بالزر اليمين على أي خلية و نختر خصائص الجدول:
بعد أن تنفذ كالسابق تصبح لديك على الشكل التالي:
الآن نقوم بإدراج جدول من ثلاث أعمدة و نقوم بتقسمي العمود الأوسط إلى ثلاث صفوف لاحظ الصورة:
و الآن نقوم بتقسم الخلية لاحظ الطريقة:
ستصبح كالتالي:
بعد هذا عليك أن تضيف الأعمدة في الخليتين الغير مقسمتين و على فكرة عليك أن تستخدم إضافة صورة و صورة الخلفية لكي تصبح بالقياس الصحيح لاحظ ما فعلت:
الآن نقوم بالذهاب إلى الصفحة الثانية التي وضعنا بها الهيدر و نقوم بتحديد التعليمات البرمجية و ننسخ منها الكود الذي بآخر الهيدر أنظر الكود:
و بعد أن ننسخ الكود نذهب إلى الصفحة السابقة و نحدد الخلية السفلى من الجدول الخاص بالأعمدة(لم أعبر جيداً لكن الصورة ستشرح):
ثم نذهب إلى التعليمات البرمجية..و نقوم بلصق الكود:
الآن إذا رأينا الستايل سيكون فيه جدول لا يحوي شيء لذ علينا أن نلغي حدود الجدول الذي لصقناه للتو:
قد أتلقى منك سؤالاً الآن ما فائدة الجدول إذا كنا سنلغي حدوده؟
الجواب أني وضعت هذا الجدول فقط حتى تمتد الأعمدة و تصل الفوتر..
الآن نلغي الحدود التي في جدول الأعمدة بنفس الطريقة الاولى انظر كيف أصبح:
جميل أليس كذلك هههههه لم ننتهي بعد..
نعود إلى صفحة الهيدر الأصلية و نقوم بنسخ التالي:
و نذهب إلى صفحتنا السابقة..و نقوم بلصق ما نسخنا في الخلية المتوسطة التي في الوسط:
الآن نقوم بنسخ الروابط و وضعها في خلية العلوية انظر:
و نقوم بلصقها الآن انظر:
و نقوم بالأمر نفسه مع جميع الروابط حتى تصبح الصفحة على الشكل التالي:
الآن نقوم بنسخ الكود الخاص(عن طريق التعليمات البرمجية) بالهيدر الذي أنشأناه و نلصقه في قالب الهيدر القديم(الذي في مجلد التمبلايت).
سترى الستايل الآن على الشكل التالي:
ههههههههههه أعرف أن هذا أحبطك لكن هذا بسبب خطأ في ملف السي اس اس بالمنتدى العربي لكن الحمد الله المشكلة محلولة من قبل الأخ الغالي المُعاصر...افتح ملف السي اس اس و قم بعمل كما في الصورة:
ربما تسرعتُ في الحكم هي ليست خطأ إنما هي حدود بين الصور .
انظر الآن نتيجة عملك:
أصبح الشكل مرضي على ما أظن!
لم ننتهي بعد قم بعمل نفس الخطوات مع الفوتر
footer . tpl
هذا اسمه و لاحقته باللغة الإنكليزية انظر ماذا عملت فيه أنا:
هذا شكل الفوتر بالفرونت بيج لكن على المتصفح كيف سيظهر انظر بنفسك:
http://www.mysbb-files.com/u/2088/5529/35.GIF
إحباط مرة أخرى اليس كذلك هههههه لا عليك الحل بسيط إذهب إلى التعليمات البرمجية و في بداية الفوتر اكتب:
و الآن انظر :
هيك صار الحكي حلو مو..هههههههه ...
تم بحمد الله الإنتهاء من درس التركيب.
الآن انتظروا الدرس القادم التعديل على السي اس اس و تعديل روابط الصور بالإضافة إلى صناعة أيقونات خاصة بالستايل و هو آخر درس و راح يكون بالدرس مفاجئة حلوة جداً.