درس كيفية تركيب ستايل بالفرونت بيج

بسم الله الرحمن الرحيم
اخواني واخواتي يسعد اوقاتكم اينما كنتم
تحدثنا في الدرس السابق عن
[تصميم استايل احترافي + تقطيعه] الجزء الاول
والان سوف نتحدث عن التكمله النهائية للدرس من حيث التوزيع في الفرونت بيج والتركيب في المنتدى
يفضل تصفح هذا الدرس على شاشه 1024 لروئيته بشكل واضح

=================================
الدرس اللي قبل هذا كان يتكلم عن التصميم والتقطيع وهذا الدرس التوزيع والتركيب
طيب نجي ونوزع على الفرونت بيج مثل ماقلت لكم في الدروس التمهيديه السابقه
اللي مايعرف يوزع اللحين ارجوه رجاء خاص يراجع الدروس في المبتدئين + درس توزيع الاستايل رباعي الاطراف
عشان لايتعبني ولا اتعبه
ملاحظه
اشوف ناس تاركه كل الدروس وجايه على دروس الاحتراف ويجي يطرح اسئله لا لها اول ولا تالي
ياخوي او ياختي روح للدروس السابقه التمهيديه عشان تقدر تفهم هذي الدروس
طلوع الدرج من اسفله ماهو من اعلاه :bleh:

================================

التوزيع في الفرونت بيج

ولابد ان يكون تصفح الشاشه على 1024 حتى يكون الشد مضبوط

افتح الفرونت بيج (Microsoft Office FrontPage)
وانزل على اسفله وبتشوف مثل هذي الصوره

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

راح يكون بهذا الشكل

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

ومن على سطح الفرونت بيج اضغط على خصائص الصفحه (طبعا بطرف الماوس الايمن)

اخترت خصاص الصفحه

اللحين اختار من اليمين الى اليسار ثم اعتمد

قلبت الشاشه من اليمين الى اليسار اوكيه

طيب روح الى ايقونه الجداول واختر 9 جداول

راح تنزل في الفرونت بيج بهذا الشكل

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

اللحين اعطها القيم التاليه .... ثم اعتمد

راح يصير الجدول بهذا الشكل ... منقط خفي

لاحظ معاي هذي الصوره ولازم تركز عليها

تشوف الصوره اللي من شوي

ابغاك تنتبه لها مضبوط لاني عانيت من حيث دروس المبتدئين
ناس تقول وين الخلفيه وكيف اشد

انتبهوا الله يرحم والديكم

عندنا اربعه زوايا = ادراج صوره نستخدم هذي الاداه

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

====================

الصوره هذي ترجمه لما سيحصل في الجدول

====================

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

شوف وشلون راح يصير الجدول

خلصنا الاربع زوايا

اللحين نروح نحط صور الاوساط

اللي يتذكر انا وش قلت من شوي

قلت نحط للاوساط خلفيات باستخدام الماوس الايمن ونختار خصائص الخلفيه

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

اختار استعراض

راح تجيك الصور واختار اللي يفترض يكون خلفيه ثم فتح

ثم موافق

هذي الخلفيه وصلت واحلى ترحيب

طيب خلصنا اربع زوايا صح!

وخلصنا وسط علوي

باقي وسط سفلي + وسط جانبي ايمن + وسط جانبي ايسر

نضع كل خلفيه للوسط اللي يفترض تكون فيه

نشوف النهايه وشلون تطلع

شد الاطراف يامال العافيه

وانشدت الاطراف

ركز معاي اللحين لاهنت

اللحين بتضغط بطرف الماوس الايمن وراح تختار

التقسيــــــــــم عارفين ليه

لوضع الصور التجميليه

اللي حطيتها من شوي

وللتذكير نشوفها اللحين (فيه صور مكتوب تحتها تجميليه)

نكمل عشان مانتلخبط

وش قلت من شوي نختار التقسيم ونختار منه 3 اعمده

قسمنا الخليه الى ثلاثه اقسام

طبعاً اللي راح ينطبق على الهيدر .. راح ينطبق على الفوتر من حيث التقسيم الى 3 اعمده

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

شوف كيف راح تصير معانا

ونقسم الفوتر (بالماوس الايمن نختار تقسيم)

نختار 3 اعمده

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

هاه انتيهنا والا مانتيهنا :santa_1:

باقي ايش؟

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

نروح للصوره التجميليه العلويه اليسرى ونعطيها محاذاه لليسار

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

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

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

صار شكل الاستايل كذا 100%

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

بواسطة هذي الاداه

ونروح نضغط على التعليمات البرمجيه من اسفل الفرونت بيج

عشان نشوف اكواد الاستايل

وهذا امر التنصيف اللي اعطينا الخليه الوسطيه

<p align="center"> </td>

اللحين لونت لكم الاكواد بلونين ازرق واصفر (نصراوي ) :bleh:

اللي محدد بالاصفر للهيدر واللي محدد بالازرق للفوتر

انتهى التوزيع في الفرونت بيج

:::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::

التركيب في المنتدى

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

واختر الاستايلات& قوالب

ومنها التحكم في الاستايلات

راح تظهر لك الاستايلات في الجهه اليسر بهذا الشكل

اضغط على القائمه المنسدله التابعه للاستايل واختر common templats

راح يطلع معاك ثلاث صناديق

الصندوق الاول header مطلوب

الصندوق الثاني headinclude غير مطلوب

الصندوق الثالث footer مطلوب

الصناديق الباقيه كانكم ماشفتوها

نمسك الصدوق الاول الـ header ونمسح كل مافيه ومانبقى الا

$spacer_open

$_phpinclude_output

نروح للفرونت بيج وننسخ الجزء العلوي مثل ماهوي مشار في الصوره

ونلصقه بالهيدر فوق هذي العباره

$spacer_open

$_phpinclude_output

ونروح للفرونت بيج وننسخ الجزء السفلي مثل ماهو مشار بالصوره

ونلصقه في اخر الفوتر

وين كلمة </script>

تحتها بالضبط

ثم حفظ

نروح المنتدى ونشاهده بسم الله عليه يخزي العين عم بيجنن :nosweat:

لكن

فيه تباعد بالاطراف ولاهو ممسوك في جدار المنتدى :tears:

وشو الحل ياجماعه

الحل نروح ونضغط على متغيرات الاستايل ونختار منها المتغير Body (Customized in this Style

وراح تكون القيم فيه

margin: 5px 10px 10px 10px;
padding: 0px;

نخليها

margin: 0px 0px 0px 0px;
padding: 0px;

عشان نشد

والاكيد انه شد

:::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::