شات
شات صوتي
دردشه صوتيه
درس مهم للمبتدئين تركيب الاستايل في الفرونت بيج - مجتمع روابط في بي

تسجيل الدخول / إنتساب




العودة   مجتمع روابط في بي > ‫روابط تطوير ودعم منتديات ( VBulletin ) > رابط تعليم تصميم الستايلات لمنتديات VBulletin


إضافة رد
 
LinkBack أدوات الموضوع انواع عرض الموضوع
قديم 31-10-2008, 11:23 PM   #1

الصورة الرمزية AL_ZAEEM_07
AL_ZAEEM_07
رابط فعال
  • التسجيل: 31 / 10 / 2008
  • المشاركات: 8
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 0
  • AL_ZAEEM_07 رابط متميز
AL_ZAEEM_07 غير متصل
درس مهم للمبتدئين تركيب الاستايل في الفرونت بيج

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

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

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

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

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

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



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



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



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



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



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

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



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

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



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



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



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



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




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



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

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

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

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

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

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

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



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

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

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




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

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

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

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

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



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



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



ثم موافق



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



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

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

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

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

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




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



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



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



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

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

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

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

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




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

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




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



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

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

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



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



نختار 3 اعمده



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



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

باقي ايش؟

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

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



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



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



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




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



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



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



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



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



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

<p align="center">&nbsp;</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;

عشان نشد



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





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

منقول للاهمية والامانه
 
رد مع اقتباس
قديم 01-11-2008, 07:48 PM   #2

الصورة الرمزية jnoOon
jnoOon
رابط مبدع
  • التسجيل: 09 / 03 / 2008
  • الدولة: دنيآكـَ دَنًيآيَ
  • المشاركات: 263
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 9
  • jnoOon رابط متميز
jnoOon غير متصل
افتراضي

شرح روووعة

واسلوب راووع


والله وصلت المعلومة كووويس بس للاسف

برنامج الفورنت بيج مو عندي


بس يرجع الاب توب من الصيانة :)


توقيع : jnoOon
منتدى عآلم جنون مصمم http://des-jnoon.com/vb
ll.. لطلبآت تصميم الاستآيلآت -- مزاجات -- وسائط -- واجهات -- مداخل على البريد التآلي..~ des-jnoon@hotmail.com
 
رد مع اقتباس
قديم 02-11-2008, 11:22 PM   #3

الصورة الرمزية أمير الجزيرة
أمير الجزيرة
رابط نشيط
  • التسجيل: 23 / 04 / 2008
  • الدولة: في قلب روابط في بي
  • المشاركات: 2,764
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 11
  • أمير الجزيرة رابط متميز
أمير الجزيرة غير متصل
افتراضي

شرح اكثر من رائع اخوي بارك الله فيك ما قصرت


توقيع : أمير الجزيرة منتديات بلاك بيري السعودي

بلاك بيري عالم من اختياري

ستجدون كل ما تحتاجون فقط اصحاب البلاك بيري
 
رد مع اقتباس
قديم 03-11-2008, 01:14 AM   #4

الصورة الرمزية فارس
فارس
رابط نشيط
  • التسجيل: 24 / 08 / 2006
  • الدولة: السعودية بلادي
  • المشاركات: 19,818
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 66
  • فارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبيفارس رابط مبدع وذهبي
فارس غير متصل
افتراضي

يعطيك العافيه على هالنقل الجميل


توقيع : فارس يمنع : إضافة عروض الإشــهار او تلميح فسوف تحذف
يمنع : إضافة عروض التنشيط او تلميح فسوف تحذف
يمنع : وضع اكثر من عرض واحد باليوم او اضافة موضوعين باليوم
يمنع : يمنع الاعلان عن دورات خارج المعهد او داخله دون أخذ الاذن من ادارة المعهد
يمنع : الرد على المواضيع المخالفه في الاقسام الخطاء
يمنع : طرح عرض دون ايميل رسمي يمثل الشركه
دعاء : اللهم لا تجعل الدنيا أكبر همنا

معهد روابط : روابط ...مجتمع مترابط
مصر والسعودية ( للمصريين )
 
رد مع اقتباس
قديم 19-11-2008, 06:37 PM   #5

الصورة الرمزية femtolayer.com
femtolayer.com
رابط مشارك
  • التسجيل: 30 / 10 / 2008
  • المشاركات: 153
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 8
  • femtolayer.com رابط متميز
femtolayer.com غير متصل
افتراضي

مشكور علي النقل المهم
 
رد مع اقتباس
قديم 10-12-2008, 09:46 AM   #6

الصورة الرمزية حسن علي
حسن علي
رابط مبدع
  • التسجيل: 17 / 08 / 2008
  • المشاركات: 662
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 10
  • حسن علي رابط متميزحسن علي رابط متميز
حسن علي غير متصل
افتراضي

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


توقيع : حسن علي اسم الشركه : Support Alazdhar-ar
صاحب الشركه : حسين أحمد .
أداء الشركـــه : دعم فني وتطوير المواقع والمنتديات.
بريد الشركـــه : zd@alazdhar-ar.com -wabmaster@alazdhar-ar.com
الدعم الفنــــي : http://alazdhar-ar.com/dam/index.php
 
رد مع اقتباس
قديم 10-12-2008, 05:16 PM   #7

الصورة الرمزية تمر الايام
تمر الايام
رابط فعال
  • التسجيل: 30 / 09 / 2008
  • الدولة: الرياض
  • المشاركات: 74
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 9
  • تمر الايام رابط متميز
تمر الايام غير متصل
افتراضي

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

بس عندي سؤال

الحين حنا ركبنا الفوتر والهيدر .. طيب الجداول ليه مااستبدلناه !؟


بإنتظار الرد

حافظك ربــي


توقيع : تمر الايام
منتديات اجمل احساس تطلق اكبر عرض للاستضافة المميزه
منتدى + موقع + ستايل مع جميع الهاكات المحمية + شات كتابي بالاضافة الى دعم فني شامل لمدة اربعة شهور _ كل هذا بـ 800 ريال سعودي
رابط الموضوع الاصلي
شعارنا
|| لاتقل فشلت _ قل لم انجح بعـــد ||
 
رد مع اقتباس
قديم 10-12-2008, 05:52 PM   #8

الصورة الرمزية Design
Design
رابط مبدع
  • التسجيل: 04 / 11 / 2008
  • المشاركات: 196
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 11
  • Design رابط مبدعDesign رابط مبدعDesign رابط مبدعDesign رابط مبدع
Design غير متصل
افتراضي

مشكور اخوي الغالي


توقيع : Design
Design
تفضل لأنشاء تصميمك
 
رد مع اقتباس
قديم 16-01-2009, 04:13 AM   #9

الصورة الرمزية غاوي مشاكل
غاوي مشاكل
رابط مبدع
  • التسجيل: 10 / 12 / 2008
  • الدولة: ارض لا يسكنها الضعفاء
  • المشاركات: 467
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 8
  • غاوي مشاكل رابط متميز
غاوي مشاكل غير متصل
افتراضي

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


اخوك الداعي لك بوافر الصحه والعافيه


غاوي مشاكل


توقيع : غاوي مشاكل


 
رد مع اقتباس
قديم 19-01-2009, 10:41 AM   #10

الصورة الرمزية the_expert2010
the_expert2010
رابط فعال
  • التسجيل: 04 / 05 / 2008
  • الدولة: مصــر أم الدنيــا
  • المشاركات: 105
  • ملفات حملتها: 0
    ملفات رفعتها: 0
  • تقييم المستوى: 9
  • the_expert2010 رابط متميز
the_expert2010 غير متصل
افتراضي

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


توقيع : the_expert2010
من يريد منتدى مجانى يراسلنى
ويعطينى بياناتة وراح انفذ لة الطلب بأذن اللهmy_only_love91(@)yahoo
ter7zen(@)hotحيثـ يكونـ للمعرفهـ عنوانــ
أذا لم اتواجد فى الموضوع لفترة سوى اضافة
وأطلب ماتريد (سورى لذلك بسبب الدراسة)
 
رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is .
كود HTML معطلة
Pingbacks are .
Refbacks are .



الساعة الآن 11:34 AM


RawabetVB, Blog, Downloads, Uploads, Facebook, Google+ and twitter .

Powered by vBulletin® Version 3.8.7
Copyright ©2011 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO

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

وكل من يبحث عن حل او مساعده خارج نطاق مواضيع المعهد فلا نتحمل أي مسؤولية حيال مايحدث لموقعه

Adsense Management by Losha