الرئيسية
الأعلانات
مركز التحميل
الانضمام للشركات
تنشيط عضويتك
الشكاوي والملاحظات
استعادة كلمة السر
أتصل بنا

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


درس تصميم ستايل ثابت (غير متمدد) الجزء (b)

درس تصميم ستايل ثابت (غير متمدد) الجزء (a) اقتباس: ركبت الهيدر و الفوتر و عملت مثل ما قتلي لكن ????


إضافة رد
 
LinkBack أدوات الموضوع انواع عرض الموضوع
قديم 25-09-2008, 09:57 PM   رقم المشاركة : 1
MaesTrOoOo
:: عضو شرف ::
 
الصورة الرمزية MaesTrOoOo





MaesTrOoOo غير متصل

MaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبي



بيانات موقعي:
إسم الموقع : http://
إصدار المنتدى : لا أملك منتدى

افتراضي درس تصميم ستايل ثابت (غير متمدد) الجزء (b)


اقتباس:
ركبت الهيدر و الفوتر و عملت مثل ما قتلي لكن ????

شوف الصورة توضحلك ...



اقتباس:
و الله يا خوي خطوط المنتدى عندي زغيرة جدا و ما تنشاف و ودي اغيرها لكن ما عرفت الحل، لو عندك طريقة قولي !!!!



السلام عليكم





و هذا لي رح يصير بعد ما نركب الصورة على الهيدر و الفوتر رح يطلع في تباعد بين الصورة و عرض المنتدى يعني بتكون الصورة اصغر من العرض، في هذه الحالة وش هو الحل????

الحل بسيط
تروح لمتغيرات الستايل و تحط القيمة التالية "777" في عرض الجدول الاساسي


و اضغط "حفظ"
و رح يكون كل شي تمام و الهيدر و الفوتر متوافقين مع عرض المنتدى و متناسقين ...
و رح تصبح الصور متناسقة مع شكل المنتدى ...
اعتقد هنا صار الستايل 70 % خالص، باقي لنا نضيف بعض اللمسات لحتى يصير الستايل كامل و" الكمال لله" :)

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

:: المقاسات المناسبة ::

الارتفاع 1 X العرض 1575

الارتفاع 829 X العرض 1200

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

ونصمم جزئين ايسر وايمين لكي يظهر منظر مميز ورائع

بس لازم يكون الجزء الايمن يساوي الجزء الايسر حتي يكون مظبوط

ثم نخفظ الصورة بضيغة JPEG او بضيغة gif

ثم نقوم بالتالي..
من لوحة التحكم- التحكم بالستايلات- نروح للستايل لي رح نحط عليه الخلفية و نحتار css رئيسي

و في خانة الخلفية نضع اللون و بعدها الرابط التالي

كود:
url(XXXX/XXX.jpg) repeat-y fixed center top
مع مراعاة التغيير الى ما يناسب اسم الستايل
و الصورة التالية توضح مدى اهمية css في التعديل على الستايل


لي يهمنا هو الخلفية و لون الخط و حجمه ... و رح ارفق لكم في نهاية الدرس الخطوط المتوافقة مع الاكسبلورر 7

و هيك اخواني نكون خلصنا الجزء الثاني من تصميم ستايل غير متمدد "ثابت"



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

اقتباس:
خلفية المنتدى/Body (التخصيص في هذا الستايل)

اقتباس:


حجم الخط : 10pt
نوع الخط :tahoma, arial, helvetica,verdana

---------------------------------------------

خلفية الصفحة/Page Background (التخصيص في هذا الستايل)

نجعله فاضي


---------------------------------------------

<td>, <th>, <p>, <li>

حجم الخط : 10pt
نوع الخط :tahoma, arial, helvetica,verdana

--------------------------------------------

حدود الجدول (التخصيص في هذا الستايل)

نجعله فاضي


-------------------------------------------

الأقسام الرئيسية/Category Strips (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdana

-------------------------------------------

رأس الجدول/Table Header (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana

-------------------------------------------

نهاية الجدول/Table Footer (التخصيص في هذا الستايل)

حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdana

-------------------------------------------

لون التوزيع الأول/First Alternating Color (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط : 16px
نوع الخط : arial, helvetica,verdana

-------------------------------------------

لون التوزيع الثاني/Second Alternating Color (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط : 16px
نوع الخط : arial, helvetica,verdana

-------------------------------------------

محرر WYSIWYG (يجب أن يكون عادةً متماثل مع 'لون التوزيع الأول/First Alternating Color' أو 'خلفية الكتابة/Input Fields')

حجم الخط : 10pt
نوع الخط : arial, helvetica,verdana

-------------------------------------------

خلفية الكتابة/Input Fields (التخصيص في هذا الستايل)

حجم الخط : 10pt
نوع الخط : tahoma, arial, helvetica,verdana

-------------------------------------------

الأزرار/Buttons (التخصيص في هذا الستايل)

حجم الخط : 12px
نوع الخط : Tahoma,Verdana,Arial,Helvetica,sans-serif

-----------------------------------------

قوائم <select> (التخصيص في هذا الستايل)

حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana

-----------------------------------------

الخط الصغير (التخصيص في هذا الستايل)

حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana

-----------------------------------------

لون الوقت (التخصيص في هذا الستايل)

حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana

-----------------------------------------

نص شريط العنوان/Navbar **************** (التخصيص في هذا الستايل)

شكل الخط : bold
حجم الخط :11px
نوع الخط :tahoma, arial, helvetica,verdana

------------------------------------------

الخط المبرز /Highlighted

شكل الخط : bold

-----------------------------------------

إبراز عنصر السطر الإداري/Inline Moderation Element Highlight (التخصيص في هذا الستايل)


نتركه فاضي

------------------------------------------

محيط اللوحة/Panel Surround (التخصيص في هذا الستايل)

نتركه فاضي


----------------------------------------

اللوحة (الأشكال)/Panel Forms (التخصيص في هذا الستايل)

نتركه فاضي

---------------------------------------

<legend> (التخصيص في هذا الستايل)

حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana

---------------------------------------

التحكم بالقوائم المنبثقة/Popup Menu Controls (التخصيص في هذا الستايل)

شكل الخط :bold
حجم الخط:11px
نوع الخط :tahoma, arial, helvetica,verdana

--------------------------------------

جسم قائمة الإنبثاق/Popup Menu Body (التخصيص في هذا الستايل)

نتركه فاضي

-------------------------------------

خيار صف قائمة الإنبثاق/Popup Menu Option Row (التخصيص في هذا الستايل)


حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdanaf

-----------------------------------

خيار سطوع القوائم المنبثقة/Popup Menu Highlighted Option (التخصيص في هذا الستايل)

حجم الخط : 8pt
نوع الخط :tahoma, arial, helvetica,verdana



دمتم في رعاية الله و حفظه ::: اخوكم في الله






التوقيع :

آخر تعديل MaesTrOoOo يوم 05-08-2009 في 08:11 PM.
رد مع اقتباس
قديم 26-09-2008, 02:22 AM   رقم المشاركة : 2
بروق الشعر
رابط مبدع





بروق الشعر غير متصل

بروق الشعر رابط متميز


افتراضي

ألله يعطيك ألف مليوون عـآفيه خيوو صرآحه كفيت ووفيت







التوقيع :
هيـه

انت رجـآل

أضغط هنـآ طيب
رد مع اقتباس
قديم 27-09-2008, 02:21 AM   رقم المشاركة : 3
مخاوي الليل
رابط مبدع
 
الصورة الرمزية مخاوي الليل






مخاوي الليل غير متصل

مخاوي الليل رابط متميز


إرسال رسالة عبر MSN إلى مخاوي الليل

بيانات موقعي:
إسم الموقع : حُوسه
إصدار المنتدى : VB 3.8.3

افتراضي

الله يجزاك الجنـه والديك يالـ غ ــلا ويوفقك بالدنيا والاخرهـ

سلمت لي يمينك يا بعد قلبي ولاهنت ولا عدمنآك يا رب

وان شاء الله بجرب ونشوف التطبيق

بس الصور كيف احطهآ اللي تجي فوق الاقسآم وتحتـه والا ما تأيد فيه


كـل الود يالغلا







التوقيع :
* حياكم الله بمنتديات حُوسه
* زيارتكم شرف لنآ
* رابط البنرللتبادل الاعلاني
رد مع اقتباس
قديم 27-09-2008, 03:14 AM   رقم المشاركة : 4
MaesTrOoOo
:: عضو شرف ::
 
الصورة الرمزية MaesTrOoOo





MaesTrOoOo غير متصل

MaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبي



بيانات موقعي:
إسم الموقع : http://
إصدار المنتدى : لا أملك منتدى

افتراضي

اقتباس:
المشاركة الأصلية كتبت بواسطة مخاوي الليل مشاهدة المشاركة
   وان شاء الله بجرب ونشوف التطبيق


ان شاء الله اخوي و ناطرين ابداعك

اقتباس:
المشاركة الأصلية كتبت بواسطة مخاوي الليل مشاهدة المشاركة
  
بس الصور كيف احطهآ اللي تجي فوق الاقسآم وتحتـه والا ما تأيد فيه

ان شاء الله عن قريب احط لكم درس تاطير الاقسام :)






التوقيع :

رد مع اقتباس
قديم 30-09-2008, 02:21 AM   رقم المشاركة : 5
مخاوي الليل
رابط مبدع
 
الصورة الرمزية مخاوي الليل






مخاوي الليل غير متصل

مخاوي الليل رابط متميز


إرسال رسالة عبر MSN إلى مخاوي الليل

بيانات موقعي:
إسم الموقع : حُوسه
إصدار المنتدى : VB 3.8.3

افتراضي

اقتباس:
ان شاء الله عن قريب احط لكم درس تاطير الاقسام

الله يجزاك كل الخير يالــ غ ــلاآ






التوقيع :
* حياكم الله بمنتديات حُوسه
* زيارتكم شرف لنآ
* رابط البنرللتبادل الاعلاني
رد مع اقتباس
قديم 02-10-2008, 02:15 AM   رقم المشاركة : 6
مخاوي الليل
رابط مبدع
 
الصورة الرمزية مخاوي الليل






مخاوي الليل غير متصل

مخاوي الليل رابط متميز


إرسال رسالة عبر MSN إلى مخاوي الليل

بيانات موقعي:
إسم الموقع : حُوسه
إصدار المنتدى : VB 3.8.3

افتراضي

اقتباس:
:: المقاسات المناسبة ::

الارتفاع 1 x العرض 1575


الارتفاع 829 x العرض 1200

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

ونصمم جزئين ايسر وايمين لكي يظهر منظر مميز ورائع

بس لازم يكون الجزء الايمن يساوي الجزء الايسر حتي يكون مظبوط

ثم نخفظ الصورة بضيغة jpeg او بضيغة gif



الحين عندنا مقاسين نختار واحد والا نسويهم كلهم ؟
اذا اخترنا المقاس 829 × 1200 هل نسوي صورتين نخلي وحده اليمين وحده اليسار والا نخلي فراغ بالنص

وانا قاعد اطبق معك وطلع كلش تمام الا هالصوره احترت فيهآ :$

وياليت تعطينا صوره مثال لو سمحت






التوقيع :
* حياكم الله بمنتديات حُوسه
* زيارتكم شرف لنآ
* رابط البنرللتبادل الاعلاني
رد مع اقتباس
قديم 02-10-2008, 02:25 AM   رقم المشاركة : 7
MaesTrOoOo
:: عضو شرف ::
 
الصورة الرمزية MaesTrOoOo





MaesTrOoOo غير متصل

MaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبي



بيانات موقعي:
إسم الموقع : http://
إصدار المنتدى : لا أملك منتدى

افتراضي

اقتباس:
المشاركة الأصلية كتبت بواسطة مخاوي الليل مشاهدة المشاركة
  
الحين عندنا مقاسين نختار واحد والا نسويهم كلهم ؟
اذا اخترنا المقاس 829 × 1200 هل نسوي صورتين نخلي وحده اليمين وحده اليسار والا نخلي فراغ بالنص

وانا قاعد اطبق معك وطلع كلش تمام الا هالصوره احترت فيهآ :$

وياليت تعطينا صوره مثال لو سمحت

بالمرفقات صورة الخلفية و ننتظر ستايلك عن قريب ان شاء الله






الصور المصغرة للصور المرفقة
back-t1.jpg  

التوقيع :

آخر تعديل MaesTrOoOo يوم 20-08-2009 في 05:25 PM.
رد مع اقتباس
قديم 02-10-2008, 09:38 AM   رقم المشاركة : 8
ولد الفجيرة
:: عضو شرف ::
 
الصورة الرمزية ولد الفجيرة






ولد الفجيرة غير متصل

ولد الفجيرة رابط مبدع بلاحدودولد الفجيرة رابط مبدع بلاحدودولد الفجيرة رابط مبدع بلاحدودولد الفجيرة رابط مبدع بلاحدودولد الفجيرة رابط مبدع بلاحدود


إرسال رسالة عبر AIM إلى ولد الفجيرة

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

افتراضي

الله يخليك يالغالي
ابدعت بارك الله فيك
وماشاء الله عليك
ربي يحفظك ويخليك
ونشوف ابداعاتك بالمعهد
كل الشكر , اخوك احمد







التوقيع :
BB PIN : 28FA828A
Twitter : @Fajrawy
Phone : 00971509381999
YouTube : xXxFujairahxXx
رد مع اقتباس
قديم 03-10-2008, 04:05 AM   رقم المشاركة : 9
مخاوي الليل
رابط مبدع
 
الصورة الرمزية مخاوي الليل






مخاوي الليل غير متصل

مخاوي الليل رابط متميز


إرسال رسالة عبر MSN إلى مخاوي الليل

بيانات موقعي:
إسم الموقع : حُوسه
إصدار المنتدى : VB 3.8.3

سوري ع الازعاج اخوي لكن اللي طلع معي

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

وكمان بين الاقسام وحد الاستايل مع اني حاط عرض الجدول الأساسي 777

وبرفق لك الصورهـ تشوف :(







الصور المصغرة للصور المرفقة
3.jpg  

التوقيع :
* حياكم الله بمنتديات حُوسه
* زيارتكم شرف لنآ
* رابط البنرللتبادل الاعلاني
رد مع اقتباس
قديم 03-10-2008, 06:28 PM   رقم المشاركة : 10
MaesTrOoOo
:: عضو شرف ::
 
الصورة الرمزية MaesTrOoOo





MaesTrOoOo غير متصل

MaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبيMaesTrOoOo رابط مبدع وذهبي



بيانات موقعي:
إسم الموقع : http://
إصدار المنتدى : لا أملك منتدى

افتراضي

اقتباس:
المشاركة الأصلية كتبت بواسطة مخاوي الليل مشاهدة المشاركة
   سوري ع الازعاج اخوي لكن اللي طلع معي

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

وكمان بين الاقسام وحد الاستايل مع اني حاط عرض الجدول الأساسي 777

وبرفق لك الصورهـ تشوف :(


حلها سهل ان شاء الله يا خوي
تروح لوحة تحكم الادارة ثم الى الستايلات و القوالب ثم الى css رئيسي الستايل
اول خيار رح تلقاه لي هو خلفية المنتدى ثم اتجه الى الخواص الاضافية عينها كلها الى اصفار :)

خواص CSS الإضافية
margin: 0px 0px 0px 0px;padding: 0px;
بالتوفيق






التوقيع :

رد مع اقتباس
إضافة رد

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

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

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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة



الساعة الآن 04:26 AM


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

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

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


F.T.G.Y 3.0 BY: D-sAb.NeT © 2011