شرح بالصور تصميم استايل احترافي لمنتديات vb وتوزيعه وتركيبه

[فيروس خائف]

بسم الله الرحمن الرحيم
اخواني واخواتي يسعد اوقاتكم اينما كنتم
تحدثنا في الدرس السابق عن
[تصميم استايل احترافي + تقطيعه (http://www.de4school.com/vb/t19481.html)]
والان سوف نتحدث عن التكمله النهائية للدرس من حيث التوزيع في الفرونت بيج والتركيب في المنتدى

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

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

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

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-69.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-70.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-71.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-72.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-73.jpg


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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-74.jpg


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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-75.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-76.jpg

[فيروس خائف]

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

http://www.nwahy.com/images/stylevb/profional_style_B/img-77.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-78.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-79.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-80.jpg


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

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

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-82.jpg


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

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-81.jpg


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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-82.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-83.jpg

[فيروس خائف]

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

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

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

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-84.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-85.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-86.jpg


ثم موافق


http://www.nwahy.com/images/stylevb/profional_style_B/img-87.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-88.jpg

[فيروس خائف]

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

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

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

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-89.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-90.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-91.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-92.jpg


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

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

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

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-81.jpg


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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-94.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-95.jpg


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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-82.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-96.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-97.jpg


نختار 3 اعمده


http://www.nwahy.com/images/stylevb/profional_style_B/img-98.jpg

[فيروس خائف]

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-82.jpg


http://www.nwahy.com/images/stylevb/profional_style_B/img-99.jpg


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

باقي ايش؟

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-100.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-101.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-102.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-103.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-104.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-105.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-106.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-69.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-107.jpg

[فيروس خائف]

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



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


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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-108.jpg


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

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

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

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

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-109.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-110.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-111.jpg


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

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

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

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

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-112.jpg


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



$spacer_open

$_phpinclude_output


http://www.nwahy.com/images/stylevb/profional_style_B/img-113.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-114.jpg


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



$spacer_open

$_phpinclude_output


http://www.nwahy.com/images/stylevb/profional_style_B/img-115.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-116.jpg


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

وين كلمة </script>


http://www.nwahy.com/images/stylevb/profional_style_B/img-117.jpg


تحتها بالضبط

ثم حفظ


http://www.nwahy.com/images/stylevb/profional_style_B/img-118.jpg


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

لكن

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


http://www.nwahy.com/images/stylevb/profional_style_B/img-119.jpg


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

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

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



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


نخليها



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


عشان نشد


http://www.nwahy.com/images/stylevb/profional_style_B/img-120.jpg


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


http://www.nwahy.com/images/stylevb/profional_style_B/img-121.jpg


اخواني واخواتي
بهذا الدرس نقول انتهينا من دروس تصميم وتقطيع وتوزيع وتركيب الاستايلات العاديه والاحترافيه والرباعيه .

[بوسعد]

يعطيك الف الف عااافيه
ولك احلى ++

[ح ـــكـم القدر]

بارك الله فيك ...

[فيروس خائف]

نورت