منتديات مصرية
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

اذهب الى الأسفل
avatar
ليدر
مدير الموقع
مدير الموقع
ذكر
رقم العضوية : 4
عدد المساهمات : 9777
التقييم : 402
تاريخ التسجيل : 07/11/2010
العمر : 57
http://leader-des.com/vb/

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

السبت 26 أبريل 2014, 12:46 pm
بسم الله الرحمن الرحيم
اخواني واخواتي يسعد اوقاتكم اينما كنتم
تحدثنا في الدرس السابق عن
[تصميم استايل احترافي + تقطيعه]
والان سوف نتحدث عن التكمله النهائية للدرس من حيث التوزيع في الفرونت بيج والتركيب في المنتدى

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

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

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

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

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


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


راح يكون بهذا الشكل
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-71


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


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


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

اللحين اختار من اليمين الى اليسار ثم اعتمد
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-74


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

طيب روح الى ايقونه الجداول واختر 9 جداول
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-75


راح تنزل في الفرونت بيج بهذا الشكل
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-76


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


اللحين اعطها القيم التاليه .... ثم اعتمد
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-78


راح يصير الجدول بهذا الشكل ... منقط خفي
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-79


لاحظ معاي هذي الصوره ولازم تركز عليها
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-80


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

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

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

عندنا اربعه زوايا = ادراج صوره نستخدم هذي الاداه
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-82


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

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

الصوره هذي ترجمه لما سيحصل في الجدول
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-81


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

اللحين نبدى ندرج اربع زوايا عن طريق هذي الصوره
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-82


شوف وشلون راح يصير الجدول
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-83


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

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

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

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

تعالوا نجرب الوسط العلوي ونضع الماوس عليه ونحط له خلفيه
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-84


اختار استعراض
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-85


راح تجيك الصور واختار اللي يفترض يكون خلفيه ثم فتح
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-86


ثم موافق
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-87


هذي الخلفيه وصلت واحلى ترحيب
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-88


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

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

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

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

نشوف النهايه وشلون تطلع
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-89


شد الاطراف يامال العافيه
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-90


وانشدت الاطراف
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-91


ركز معاي اللحين لاهنت
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-92


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

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

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

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

وللتذكير نشوفها اللحين (فيه صور مكتوب تحتها تجميليه)
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-81


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

وش قلت من شوي نختار التقسيم ونختار منه 3 اعمده
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-94


قسمنا الخليه الى ثلاثه اقسام
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-95


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

اللحين ندرج الصور التجميليه في الهيدر بواسطه هذه الاداره
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-82


شوف كيف راح تصير معانا
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-96


ونقسم الفوتر (بالماوس الايمن نختار تقسيم)
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-97


نختار 3 اعمده
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-98


اللحين ندرج الصور التجميليه في الفوتر بواسطه هذه الاداره
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-82


توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-99


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

باقي ايش؟

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

نروح للصوره التجميليه العلويه اليسرى ونعطيها محاذاه لليسار
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-100


نروح للصوره التجميليه العلويه اليمنى ونعطيها محاذاه لليمين
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-101


نروح للصوره التجميليه السفليه اليسرى ونعطيها محاذاه لليسار
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-102


نروح للصوره التجميليه السفليه اليمنى ونعطيها محاذاه لليمين
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-103


صار شكل الاستايل كذا 100%
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-104


اللحين في نفس الجداول نحط الماوس ونعطيه امر التنصيف
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-105


بواسطة هذي الاداه
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-106


ونروح نضغط على التعليمات البرمجيه من اسفل الفرونت بيج
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-69


عشان نشوف اكواد الاستايل
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-107


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

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


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

اللي محدد بالاصفر للهيدر واللي محدد بالازرق للفوتر
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-108


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

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

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

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

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

ومنها التحكم في الاستايلات
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-109


راح تظهر لك الاستايلات في الجهه اليسر بهذا الشكل
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-110


اضغط على القائمه المنسدله التابعه للاستايل واختر common templats
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-111


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

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

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

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

الصناديق الباقيه كانكم ماشفتوها
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-112


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

$spacer_open

$_phpinclude_output

توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-113


نروح للفرونت بيج وننسخ الجزء العلوي مثل ماهوي مشار في الصوره
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-114


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

$spacer_open

$_phpinclude_output

توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-115


ونروح للفرونت بيج وننسخ الجزء السفلي مثل ماهو مشار بالصوره
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-116


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

وين كلمة </script>
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-117


تحتها بالضبط

ثم حفظ
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-118


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

لكن

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


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

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

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

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


نخليها

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


عشان نشد
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-120


والاكيد انه شد
توزيع الستايل بالفرونت بيج و تركيبه بالمنتدى Img-121


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





http://www.nwahy.com/showlessons-400.html
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى