منتديات هبوب الجنوب - درس تصميم ستايل ثابت (غير متمدد) الجزء (b) ,؟

السلام عليكم

http://maestroooo.201mb.com/style/m1.jpg

http://maestroooo.201mb.com/style/m2.jpg

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

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

http://ad-webhost.com/vb/images/stat.../wol_error.gifتم تصغير هذه الصورة. اضغط هنا لمشاهدة الحجم الكامل. أبعاد الصورة الاصلي هو 706*84 و بحجم 25 كيلوبايت.
http://maestroooo.201mb.com/style/f11.jpg
و اضغط "حفظ"
و رح يكون كل شي تمام و الهيدر و الفوتر متوافقين مع عرض المنتدى و متناسقين ...
و رح تصبح الصور متناسقة مع شكل المنتدى ...
اعتقد هنا صار الستايل 70 % خالص، باقي لنا نضيف بعض اللمسات لحتى يصير الستايل كامل و" الكمال لله" http://www.rawabetvb.com/vb/images/smilies/smile.gif

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

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

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

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

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

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

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

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

ثم نقوم بالتالي..
من لوحة التحكم- التحكم بالستايلات- نروح للستايل لي رح نحط عليه الخلفية و نحتار css رئيسي
http://maestroooo.201mb.com/style/st15.jpg
و في خانة الخلفية نضع اللون و بعدها الرابط التالي
كود:
url(XXXX/XXX.jpg) repeat-y fixed center top
مع مراعاة التغيير الى ما يناسب اسم الستايل
و الصورة التالية توضح مدى اهمية css في التعديل على الستايل

http://ad-webhost.com/vb/images/stat.../wol_error.gifتم تصغير هذه الصورة. اضغط هنا لمشاهدة الحجم الكامل. أبعاد الصورة الاصلي هو 712*370 و بحجم 58 كيلوبايت.
http://maestroooo.201mb.com/style/st16.jpg

لي يهمنا هو الخلفية و لون الخط و حجمه ... و رح ارفق لكم في نهاية الدرس الخطوط المتوافقة مع الاكسبلورر 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
دمتم في رعاية الله و حفظه :::