السلام عليكم
اسف على التاخير فى الموضوع بسبب الجهاز كل شويه نسخه ويندوز
المهم
الدرس ده هيكون الاخير من الدوره ان شاء الله
واى درس انتو تتطلبوه فقط فى قسم الشكاوى وسوف يتم الرد عليه وشرح الدرس ان
شاء الله
كثير مننا يسمع المعاير القياسية وهناك ما يعلم ما هى وهناك ايضا لا يعلمها
اولا نبدأ بالموقع اللى بنعمل عليه بحث
فيه موقعيهم لازم يكونو فى المفضله للمصمم وديما يطابق تصميم بالمعاير
بتاعتها
الموقع الاول
http://validator.w3.org/وهو للبحث والمطابقه للمعاير من حيث ال xhtml
والموقع الثانى
http://jigsaw.w3.org/css-validator/وهو المطابقه لل css
دلوقتى هنعمل اى بحث عن اى استايل من استايلاتى
وليكن الاستايل
http://vbegy.info/vb/?styleid=16
وبعدين هنعمل مطباقه للمعاير
الاول xhtml الثانى css
مش هنلاقى ولا خطأ الحمدلله
دلوقتى بالشرح اللى انا شرحته فى الدروس السابقه اللى هيتبعه هيلاقى نفس
النتيجه على استايله
بس فى ناس هتلاقى اخطأء عندهم
الاول هنصلح شئ بسيط كان خطأ فى الشرح يسبب عدم توافق فى المعاير القياسية
الجديد
بعد صدور css3 اصبحت غير متوافقه
وهى فى الاعمده للايطارات مناطق التمدد لها
كود
PHP:
.f_g_2{
background:url('sweet_style/images/style_f_06.gif') repeat-y left;
height:100%;
}
.f_g_3{
background:url('sweet_style/images/style_f_09.gif') repeat-y right;
height:100%;
padding-left:36px;padding-right:37px;
}
ده الشكل اللى احنا كنا بنشرح بيه
الاختلاف هيكون بشكل بسيط جدا ان شاء الله
كود
PHP:
.f_g_2{
background-image: url("sweet_style/images/style_f_06.gif");
background-repeat: repeat-y;
background-position: left;
padding-left:36px;
}
.f_g_3{
background-image: url("sweet_style/images/style_f_09.gif");
background-repeat: repeat-y;
background-position: right;
padding-right:37px;
}
طبعا ركز فى المكتوب ومش هتلاقى اى صعوبه فى التعديل على
تصميمك السابق
دلوقتى بعد لما تعمل مطابقه للمعاير القياسية هنلاقى عندنا اخطاء
عدده اسباب
ممكن تكون عامل حاجه غلط مش مظبوطه فى الشرح
ممكن يكون من هاك
علشان ننتاكد اذا كانت من الهاكات ولا لا نعطل الهاكات ونشوف لو فيه مشكله
لسه يبقى مش من الهاكات
لو مفيش مشكله يبقى المشلكه من الهاكات نعطل هاك هاك ونعمل بحث حتى نصل الى
الهاك ونستبدله بهاك نظيف من الشركه الام (طبعا مش شرط كل هاكات الشركه
الام مطابقه للمعاير القياسية )
ممكن يكون السبب من بعض الجماليات اللى احنا بنعملها فى المنتدى
مثل تلوين وصف القسم
مثل وضع الملاحظات وكله بيعملها بالفرونت بيج
وقيس على كده الكثير من الحاجات اللى احنا بنعملها فى المنتدى
طيب الحل ايه كده احنا مش هنعمل الجماليات دى
لا طبعا فيه حل وكمان هنعملها بال css
طيب الاول نيجى للوصف
هنعدل مع بعض على وصف قسم اخبار فى بى ايجى
الوصف فى المنتدى هنا عادى جدا
هنا اخر الاخبار من منتديات فى بى ايجى التطويرية
بدول اى الوان او غيره
احنا مثلا عاوزين نعمله احمر
هنخش فى الوصف ونكتب الوصف على الشكل
كود PHP:
<p class="Ahmed">هنا اخر الاخبار من منتديات فى بى ايجى التطويرية</p>
وبعدين نروح فى اعدادات ال css الرئيسية وننزل تحط خالص فى
تعاريف
CSS الإضافية/Additional CSS Definitions
ونحط
كود PHP:
.Ahmed {
color: #F00;
}
وهكذا اى حاجه عاوزين نضيفيها يعنى عاوزين نعمل النص سميك
كود PHP:
.Ahmed {
color: #F00;
font-weight: bold;
}
وهكذا
طيب دلوقتى عاوزين نحط نص وعليه رابط فى الملاحظات برضه بال css
كود PHP:
<p class="yhoooo
"><strong><a href="http://vbegy.info/vb/f45.html"> تابعو
معنا دوره تصميم الاستايلات بتقنيه (css) </a></strong></p>
وفى ال css الرئيسية
كود PHP:
.yhoooo
{
text-align: center;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
وكله بنفس النظام كده
طيب عاوزين نحط صوره فى الملاحظات ونوسطها
كود PHP:
<div style="background-image:url(http://vbegy.info/vb/Ahmed_vbegy/Banner3.gif);
background-repeat:no-repeat;
height:60px;
width:468px;
margin:0px auto;"></div>
طيب احنا هنا اختصرنا بدل ما نحط اعدادت الديف فى اعدادات ال
css
عملنها مع الديف نفسه
طيب عاوزين نحط على الصور رابط
كود PHP:
<div style="background-image:url(http://vbegy.info/vb/Ahmed_vbegy/Banner3.gif); background-repeat:no-repeat; height:60px; width:468px; margin:0px auto; position:relative;"><a class="Ahmed" href="http://vbegy.info/vb" title="فى بى ايجى"></a></div>
بس هنا هنحط فى ال css الرئيسيى
كود
PHP:
a.Ahmed{
height:60px;
width:468px;
position:absolute;
border:none;
}
ودلوقتى نهايه الدرس والدوره
اتمنى تكون دوره كانت خفيفه على الجميع والكل استفاد بيها ان شاء الله
