c - تركيب الاستايل على الفرونت بيج

BAH®ANEY · 08-06-2009, 10:43 PM

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

بسبب بعد المشاكل عندي في الجهاز

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

أول شي أفتح برنامج الفرونت بيج
طبعا الكل عنده البرنامج

أفتح البرنامج في الاسفل يوجد التعليمات البرمجيه + التصميم
هذا الى الذي يستخدم برنامج با للغة العربيه
للأسف انا استخدم برنامج با اللغة الانجليزيه

طبعا اول ماتفتح البرنامج انتقل الى التعليمات البرمجيه
قم بحذف المحدد في الصوره التاليه

فقط قم بوضع التالي

<html dir="rtl">

الان أنتقل الى التصميم
الخيارات تجدها في الاسفل شاهد الصوره
التاليه

الان في الخيارات التي في الاعلى قم بأنشاء جداول التصميم
قم بعمل 3 جداول عموديه كما في الصوره التاليه

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

هذا الخيار
لتغير بيانات الجداول
الان قم بعمل كما موجود في الصوره
التاليه

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

الان لاحظ الجدول العلوي قم بوضع خلفية تمدد الهيدر
و في الجدول السفلي قم بوضع خلفية تمدد الفوتر

لاحظ

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

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

قم بوضع التقسيم الى 3 جداول
كما في الصوره
التاليه

الان شاهدة الشكل بعد تقسم الجدول العلوي

الان قم بعمل نفس التقسيم الى الجدول
السفلي

الا مهم
لاحظ الجدول العلوي و السفلي هوا
الهيدر و الفوتر
لاحظ التقسيم هوا عملناه
يسار - يمين - وسط
يسار لوضع الصوره اليسار
يمين لوضع صورة اليمين
وسط لا تضع شي فهوا منطقة التمدد

الان بختيار الاداة التاليه

قم بوضع الصورة التجميلة الى الهيدر
صورة اليسار
لاحظ الصورة التاليه

الان قم بعمل السابق على جميع الاستايل لاحظ الصوره بعد الانتهاء

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

عند وضع صورة في اتجاهها ولم تضع
صحيح قم بعمل التالي

اضغط با المواس يمين على الصوره
و أختر التالي

سوف تلاحظ ان القيمه المحدد سوف تكون 3 قم بوضعها 0
و أعمل حفظ

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

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

الان توجه الى التعليمات البرمجيه وقم بتغير مسار الصور
لاحظ الصوره التاليه

قم بحذف رابط الصورة التي في جهازك لاحظ طريقة الرابطة بعد الحذف

<td background="swalf-vb/swalf-vb_03.gif" width="33%">

فقط قم بوضع أسم مجلد الصور و أسم الصورة

الان في التعليمات البرمجيه بعد توسيط الجدول الوسطي
لاحظ الهيدر و الفوتر

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

الان توجه الى لوحة تحكم المنتدى

قم بختيار التحكم با الاستيلات

طبعا أفضل شي تعمل الاستايل على الاستايل الافتراضي
لاحظ خيارت جميع الاستايلات
اضغط على اذهب

الان القالب الاول هوا (header)

سوف يكون هكذا

 <a name="top"></a> <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center"> <tr> <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td> <td align="$stylevar[right]" id="header_right_cell"> <if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else /> </if> </td> </tr> </table>   $spacer_open $_phpinclude_output $ad_location[ad_header_end]

قم بحذف جميع محتوى القالب فقط ضع

$spacer_open $_phpinclude_output $ad_location[ad_header_end]

الان بعد حذف محتوى قالب الهيدر قم بوضع الكود الذي في الفرونت بيج
في الاعلى أعلى الكودات الثلاثه التي لم تحذفها

الان توجه الى قالب

footer

لا تحذف اي شي فيه فقط قم بوضع القالب الذي في
الفرونت بيج في أسفل القالب الموجود
من غير حذف اي شي

الصوره توضح العمل

الان قم بعمل حفظ
وقم برفع صور الاستايل الى مجلد المنتدى

النتيجه

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

تحياتي لكم
الموضوع الأصلي : هنا||المصدر : http://swalf-vb.com/vb/

سع‘ـود · 08-06-2009, 11:12 PM

الله يعطيك العافيه يالغالي

واحلاا تقيم لك

بالتوفيق لك

BAH®ANEY · 09-06-2009, 12:07 AM

الله يعافيك منور ياغلا

عبدالله ابراهيم · 09-06-2009, 12:37 AM

ممتاز والله مبدع تستاهل

BAH®ANEY · 09-06-2009, 01:20 AM

تسلم ياغالي على المرور الطيب و على التقيم

علي الزيدي · 09-06-2009, 07:37 AM

شكرا لك أخوي

سجدة المصريه · 09-06-2009, 07:52 AM

BAH®ANEY · 09-06-2009, 10:31 AM

مشكورين ع المرور الطيب

è 7 ŝ ά ŝ · 09-06-2009, 12:14 PM

جازاك الله كل خير وبارك الله فيك اخوي وهآذه هي الطريقة المعتمدة في تصآميمي ..

ahmed-dz · 09-06-2009, 12:18 PM

ما شاء الله تستاهل التقييم بارك الله فيك

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

c - تركيب الاستايل على الفرونت بيج

السلام عليكم ورحمة الله وبركاته بسبب بعد المشاكل عندي في الجهاز وان شاء الله ماتتكرر اليوم اشرح لكم طريقة تركيب