graphics academy



 
الرئيسيةالتسجيلدخول

شاطر | 
 

  نصائح لجعل موقعك متوافق مع المعاير القياسية

اذهب الى الأسفل 
كاتب الموضوعرسالة
graphics
Admin
Admin
avatar

عدد المساهمات : 594
نقاط : 4879
السٌّمعَة : 4
تاريخ التسجيل : 15/06/2010

مُساهمةموضوع: نصائح لجعل موقعك متوافق مع المعاير القياسية   الأحد يوليو 04, 2010 9:50 pm




كثير مننا يسمع المعاير القياسية وهناك ما يعلم ما هى وهناك ايضا لا يعلمها
اولا نبدأ بالموقع اللى بنعمل عليه بحث
فيه موقعيهم لازم يكونو فى المفضله للمصمم وديما يطابق تصميم بالمعاير بتاعتها
الموقع الاول
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
;
}










.

الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://neogeni.yoo7.com
 
نصائح لجعل موقعك متوافق مع المعاير القياسية
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
graphics academy :: منتدى نشر وتطوير المواقع وأشهارها-
انتقل الى: