قناص جوبا
30-12-2009, 03:50 صباحاً
السلام عليكم
اسف على التاخير فى الموضوع بسبب الجهاز كل شويه نسخه ويندوز
المهم
الدرس ده هيكون الاخير من الدوره ان شاء الله
واى درس انتو تتطلبوه فقط فى قسم الشكاوى وسوف يتم الرد عليه وشرح الدرس ان شاء الله
كثير مننا يسمع المعاير القياسية وهناك ما يعلم ما هى وهناك ايضا لا يعلمها
اولا نبدأ بالموقع اللى بنعمل عليه بحث
فيه موقعيهم لازم يكونو فى المفضله للمصمم وديما يطابق تصميم بالمعاير بتاعتها
الموقع الاول
http://validator.w3.org/
وهو للبحث والمطابقه للمعاير من حيث ال xhtml
والموقع الثانى
http://jigsaw.w3.org/css-validator/
وهو المطابقه لل css
دلوقتى هنعمل اى بحث عن اى استايل من استايلاتى
وليكن الاستايل
http://vbegy.info/vb/?styleid=16 (http://vbegy.info/vb/?styleid=16)
وبعدين هنعمل مطباقه للمعاير
الاول xhtml (http://validator.w3.org/check?uri=http%3A%2F%2Fvbegy.info%2Fvb%2F%3Fstylei d%3D16&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654) الثانى css (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fvbegy.info%2Fvb%2F%3Fst yleid%3D16&profile=css21&usermedium=all&warning=1&lang=en)
مش هنلاقى ولا خطأ الحمدلله
دلوقتى بالشرح اللى انا شرحته فى الدروس السابقه اللى هيتبعه هيلاقى نفس النتيجه على استايله
بس فى ناس هتلاقى اخطأء عندهم
الاول هنصلح شئ بسيط كان خطأ فى الشرح يسبب عدم توافق فى المعاير القياسية الجديد
بعد صدور css3 اصبحت غير متوافقه
وهى فى الاعمده للايطارات مناطق التمدد لها
.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;
}
ده الشكل اللى احنا كنا بنشرح بيه
الاختلاف هيكون بشكل بسيط جدا ان شاء الله
.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
طيب الاول نيجى للوصف
هنعدل مع بعض على وصف قسم اخبار فى بى ايجى
الوصف فى المنتدى هنا عادى جدا
هنا اخر الاخبار من منتديات فى بى ايجى التطويرية
بدول اى الوان او غيره
احنا مثلا عاوزين نعمله احمر
هنخش فى الوصف ونكتب الوصف على الشكل
<p class="Ahmed">هنا اخر الاخبار من منتديات فى بى ايجى التطويرية</p>
وبعدين نروح فى اعدادات ال css الرئيسية وننزل تحط خالص فى تعاريف CSS الإضافية/Additional CSS Definitions
ونحط
.Ahmed {
color: #F00;
}
وهكذا اى حاجه عاوزين نضيفيها يعنى عاوزين نعمل النص سميك
.Ahmed {
color: #F00;
font-weight: bold;
}
وهكذا
طيب دلوقتى عاوزين نحط نص وعليه رابط فى الملاحظات برضه بال css
<p class="yhoooo
"><strong><a href="http://vbegy.info/vb/f45.html"> تابعو
معنا دوره تصميم الاستايلات بتقنيه (css) </a></strong></p>وفى ال css الرئيسية
.yhoooo
{
text-align: center;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
وكله بنفس النظام كده
طيب عاوزين نحط صوره فى الملاحظات ونوسطها
<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
عملنها مع الديف نفسه
طيب عاوزين نحط على الصور رابط
<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 الرئيسيى
a.Ahmed{
height:60px;
width:468px;
position:absolute;
border:none;
}
ودلوقتى نهايه الدرس والدوره
اتمنى تكون دوره كانت خفيفه على الجميع والكل استفاد بيها ان شاء الله
-------------------------------------------
(تعديل)
كنت طرحت فى الدرس السادس من الدوره كفيه تركيب فلاش بتقنيه ال css
والطريقه كانت تمام على كل المتصفحات ماعدا الاكسبلور للاسف
هنا تعديل لجعها تتوافق مع الكل
كنا وصلنا ان شكل الكلاس النهائى
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;">
<param name="wmode" value="transparent" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;">
<param name="wmode" value="transparent" />
</object>
</div>
وشكل الاكواد النهائى
.h1{
background-image:url('3eed_Alkber/images/3eed1_02.gif');
height:225px;
background-repeat:repeat-x;
}
.h2 {
background-image: url('3eed_Alkber/images/3eed1_03.gif');
height: 225px;
width: 263px;
background-repeat: no-repeat;
float: right;
}
.h3 {
background-image: url('3eed_Alkber/images/3eed1_01.gif');
height: 225px;
width: 313px;
background-repeat: no-repeat;
float:left;
} التعديل هنا هيكون على جزء الكلاس
هنزود الجزء ده
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />
بحيث يصبح الشكل دلوقتى للكلاس
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie14.swf" />
<param name="quality" value="High" />
</object>
</div>
وبعدين هنضيف الجزء ده علشان يسرع الجوده للفلاش وسرعه التحميل
type="application/x-shockwave-flash"بحيث كده انتهينا ويصبح الشكل النهائى
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie14.swf" />
<param name="quality" value="High" />
</object>
</div>
ودلوقتى المثال للتاكد من الشرح على الاستايل العيد من هنا
http://vbegy.info/vb/?styleid=14 (http://vbegy.info/vb/editpost.php?styleid=14)
منتديات فى بى ايجى
http://vbegy.info/vb
الموضوع الاصلى (http://vbegy.info/vb/t823.html)
اسف على التاخير فى الموضوع بسبب الجهاز كل شويه نسخه ويندوز
المهم
الدرس ده هيكون الاخير من الدوره ان شاء الله
واى درس انتو تتطلبوه فقط فى قسم الشكاوى وسوف يتم الرد عليه وشرح الدرس ان شاء الله
كثير مننا يسمع المعاير القياسية وهناك ما يعلم ما هى وهناك ايضا لا يعلمها
اولا نبدأ بالموقع اللى بنعمل عليه بحث
فيه موقعيهم لازم يكونو فى المفضله للمصمم وديما يطابق تصميم بالمعاير بتاعتها
الموقع الاول
http://validator.w3.org/
وهو للبحث والمطابقه للمعاير من حيث ال xhtml
والموقع الثانى
http://jigsaw.w3.org/css-validator/
وهو المطابقه لل css
دلوقتى هنعمل اى بحث عن اى استايل من استايلاتى
وليكن الاستايل
http://vbegy.info/vb/?styleid=16 (http://vbegy.info/vb/?styleid=16)
وبعدين هنعمل مطباقه للمعاير
الاول xhtml (http://validator.w3.org/check?uri=http%3A%2F%2Fvbegy.info%2Fvb%2F%3Fstylei d%3D16&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654) الثانى css (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fvbegy.info%2Fvb%2F%3Fst yleid%3D16&profile=css21&usermedium=all&warning=1&lang=en)
مش هنلاقى ولا خطأ الحمدلله
دلوقتى بالشرح اللى انا شرحته فى الدروس السابقه اللى هيتبعه هيلاقى نفس النتيجه على استايله
بس فى ناس هتلاقى اخطأء عندهم
الاول هنصلح شئ بسيط كان خطأ فى الشرح يسبب عدم توافق فى المعاير القياسية الجديد
بعد صدور css3 اصبحت غير متوافقه
وهى فى الاعمده للايطارات مناطق التمدد لها
.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;
}
ده الشكل اللى احنا كنا بنشرح بيه
الاختلاف هيكون بشكل بسيط جدا ان شاء الله
.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
طيب الاول نيجى للوصف
هنعدل مع بعض على وصف قسم اخبار فى بى ايجى
الوصف فى المنتدى هنا عادى جدا
هنا اخر الاخبار من منتديات فى بى ايجى التطويرية
بدول اى الوان او غيره
احنا مثلا عاوزين نعمله احمر
هنخش فى الوصف ونكتب الوصف على الشكل
<p class="Ahmed">هنا اخر الاخبار من منتديات فى بى ايجى التطويرية</p>
وبعدين نروح فى اعدادات ال css الرئيسية وننزل تحط خالص فى تعاريف CSS الإضافية/Additional CSS Definitions
ونحط
.Ahmed {
color: #F00;
}
وهكذا اى حاجه عاوزين نضيفيها يعنى عاوزين نعمل النص سميك
.Ahmed {
color: #F00;
font-weight: bold;
}
وهكذا
طيب دلوقتى عاوزين نحط نص وعليه رابط فى الملاحظات برضه بال css
<p class="yhoooo
"><strong><a href="http://vbegy.info/vb/f45.html"> تابعو
معنا دوره تصميم الاستايلات بتقنيه (css) </a></strong></p>وفى ال css الرئيسية
.yhoooo
{
text-align: center;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
وكله بنفس النظام كده
طيب عاوزين نحط صوره فى الملاحظات ونوسطها
<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
عملنها مع الديف نفسه
طيب عاوزين نحط على الصور رابط
<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 الرئيسيى
a.Ahmed{
height:60px;
width:468px;
position:absolute;
border:none;
}
ودلوقتى نهايه الدرس والدوره
اتمنى تكون دوره كانت خفيفه على الجميع والكل استفاد بيها ان شاء الله
-------------------------------------------
(تعديل)
كنت طرحت فى الدرس السادس من الدوره كفيه تركيب فلاش بتقنيه ال css
والطريقه كانت تمام على كل المتصفحات ماعدا الاكسبلور للاسف
هنا تعديل لجعها تتوافق مع الكل
كنا وصلنا ان شكل الكلاس النهائى
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;">
<param name="wmode" value="transparent" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;">
<param name="wmode" value="transparent" />
</object>
</div>
وشكل الاكواد النهائى
.h1{
background-image:url('3eed_Alkber/images/3eed1_02.gif');
height:225px;
background-repeat:repeat-x;
}
.h2 {
background-image: url('3eed_Alkber/images/3eed1_03.gif');
height: 225px;
width: 263px;
background-repeat: no-repeat;
float: right;
}
.h3 {
background-image: url('3eed_Alkber/images/3eed1_01.gif');
height: 225px;
width: 313px;
background-repeat: no-repeat;
float:left;
} التعديل هنا هيكون على جزء الكلاس
هنزود الجزء ده
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />
بحيث يصبح الشكل دلوقتى للكلاس
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie14.swf" />
<param name="quality" value="High" />
</object>
</div>
وبعدين هنضيف الجزء ده علشان يسرع الجوده للفلاش وسرعه التحميل
type="application/x-shockwave-flash"بحيث كده انتهينا ويصبح الشكل النهائى
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie14.swf" />
<param name="quality" value="High" />
</object>
</div>
ودلوقتى المثال للتاكد من الشرح على الاستايل العيد من هنا
http://vbegy.info/vb/?styleid=14 (http://vbegy.info/vb/editpost.php?styleid=14)
منتديات فى بى ايجى
http://vbegy.info/vb
الموضوع الاصلى (http://vbegy.info/vb/t823.html)