|
درس تصميم ستايل ثابت (غير متمدد) الجزء (b) ,؟
السلام عليكم
و هذا لي رح يصير بعد ما نركب الصورة على الهيدر و الفوتر رح يطلع في تباعد بين الصورة و عرض المنتدى يعني بتكون الصورة اصغر من العرض، في هذه الحالة وش هو الحل????
الحل بسيط
تروح لمتغيرات الستايل و تحط القيمة التالية في عرض الجدول الاساسي
 تم تصغير هذه الصورة. اضغط هنا لمشاهدة الحجم الكامل. أبعاد الصورة الاصلي هو 706*84 و بحجم 25 كيلوبايت.
و اضغط "حفظ"
و رح يكون كل شي تمام و الهيدر و الفوتر متوافقين مع عرض المنتدى و متناسقين ...
و رح تصبح الصور متناسقة مع شكل المنتدى ...
اعتقد هنا صار الستايل 70 % خالص، باقي لنا نضيف بعض اللمسات لحتى يصير الستايل كامل و" الكمال لله" 
طيب حطينا صورة للهيدر و حدة ثانية للفوتر، لكن بيبقى فراغ و انا ما ودي يبقى لان حابب اعمل خلفية جميلة تتناسب و تحسن من شكل المنتدى ...
اخواني الخلفية لازم نصممها بالفوتوشوب و نصممها على كيفنا و ذوقنا طبعا مع مراعاة شكل الستايل و الوانه
لتصميم خلفيه مناسبة على مقاس الاستايل
:: المقاسات المناسبة ::
الارتفاع 1 X العرض 1575
الارتفاع 829 X العرض 1200
نذهب للفوتوشوب وننشئ صورة جديدة على تلك المقاسات التاليه
ونصمم جزئين ايسر وايمين لكي يظهر منظر مميز ورائع
بس لازم يكون الجزء الايمن يساوي الجزء الايسر حتي يكون مظبوط
ثم نخفظ الصورة بضيغة JPEG او بضيغة gif
ثم نقوم بالتالي..
من لوحة التحكم- التحكم بالستايلات- نروح للستايل لي رح نحط عليه الخلفية و نحتار css رئيسي
و في خانة الخلفية نضع اللون و بعدها الرابط التالي
كود:
url(XXXX/XXX.jpg) repeat-y fixed center top
مع مراعاة التغيير الى ما يناسب اسم الستايل
و الصورة التالية توضح مدى اهمية css في التعديل على الستايل
تم تصغير هذه الصورة. اضغط هنا لمشاهدة الحجم الكامل. أبعاد الصورة الاصلي هو 712*370 و بحجم 58 كيلوبايت.
لي يهمنا هو الخلفية و لون الخط و حجمه ... و رح ارفق لكم في نهاية الدرس الخطوط المتوافقة مع الاكسبلورر 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
دمتم في رعاية الله و حفظه :::
|