المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الطريقه الصحيحه في جعل تصميمك متوافق مع W3.org


said
11-01-2013, بتوقيت غرينيتش 06:17 PM
السلام عليكم

انا راح اشرح طريقة لكم الطريقه اللي أنا استخدمها في جعل الستايل style متوافق

لكن تبقى بعض الأخطأ البسيطه تحلها باحترافك في هذا المجال

الان قبل أن تبدأ التصميم على الستايل style الأفتراضي للمنتدى يفترض ان تكون الأخطأ خاليه ويعتبر الستايل style الافتراضي متوافق

لكن اذا صممت هايدر وفوتر وبديت في الفرنت بيج فانها سوف تأتيك عدة أخطأ

ولحل هذه الاأخطأ قبل وضع ما صصمته للهايدر في الفرنت بيج تابع الدرس مفصل وطبقه على تصميمك

وهذا تصميم بسيط للتوضيح طريقة جعل التصميم متوافق
والدرس مفصل هنا ليس درس مفصل تصميم ولكن لجعل التصميم متوافق


وسوف اوضح لكم في هذا التصميم

رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html dir=&quot;rtl&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;ar&quot; xml:lang=&quot;sa&quot;> <head> <meta http-equiv=&quot;Content-Language&quot; content=&quot;ar-sa&quot;> <title>صفحة التجربه ديزاد باتنة</title> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1256&quot;> <meta name=&quot;copyright&quot; content=&quot;dzbatna.net&quot;> <meta name=&quot;author&quot; content=&quot;dzbatna.net&quot;> <meta name=&quot;description&quot; content=&quot;خريطة الموقع ، موقعي ، منتديات ، برامج&quot;> <meta name=&quot;keywords&quot; content=&quot;مواقع ، خدمات ، برامج ، اقسام &quot;> <meta name=&quot;generator&quot; CONTENT=&quot;عنوان الصفحه&quot;> <style> <!-- .page { background: #FEF8FC; color: #4D0A50; } .navbar { color: #4D0A50; font: bold 11px tahoma, arial, helvetica,verdana; } .navbar { font: bold 8pt Tahoma; }--> </style> <body background=&quot;http://upload.dzbatna.net/upfiles/tz753035.gif&quot;> <p align=&quot;center&quot;><font size=&quot;6&quot;>السلام عليكم ورحمة الله وبركاته</font></p> <p align=&quot;center&quot;>&nbsp;</p> <p align=&quot;center&quot;><font size=&quot;6&quot;>هذي تجربة الصفحه اللذي قمنا بتطبيقها بالدرس مفصل</font></p> <p align=&quot;center&quot;>&nbsp;</p> <p align=&quot;center&quot;><a href=&quot;http://www.dzbatna.net/vb/&quot;> <span style=&quot;text-decoration: none&quot;><font size=&quot;6&quot; color=&quot;#CC0099&quot;>منتديات ديزاد باتنة</font></span></a></p>
لنفحص هذا التصميم من الرابط هذا
http://validator.w3.org/#validate_by_input

فالنتيجه تكون 25 خطأ
Result: 25 Errors

لحل هذه الأخطأ في الفرنت بيج تابع الصورة التالية

http://www.bnitamem.com/uploadcenter/files/9844.gif (http://www.bnitamem.com/uploadcenter/index.php?action=viewfile&id=9844)

هذه هي البرمجة بعد ما عدلنها

رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html dir=&quot;rtl&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;ar&quot; xml:lang=&quot;sa&quot;> <head> <meta http-equiv=&quot;Content-Language&quot; content=&quot;ar-sa&quot; /> <title>صفحة التجربه ديزاد باتنة</title> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1256&quot; /> <meta name=&quot;copyright&quot; content=&quot;dzbatna.net&quot; /> <meta name=&quot;author&quot; content=&quot;dzbatna.net&quot; /> <meta name=&quot;description&quot; content=&quot;خريطة الموقع ، موقعي ، منتديات ، برامج&quot; /> <meta name=&quot;keywords&quot; content=&quot;مواقع ، خدمات ، برامج ، اقسام &quot; /> <meta name=&quot;generator&quot; CONTENT=&quot;عنوان الصفحه&quot; /> <style> <!-- .page { background: #FEF8FC; color: #4D0A50; } .navbar { color: #4D0A50; font: bold 11px tahoma, arial, helvetica,verdana; } .navbar { font: bold 8pt Tahoma; }--> </style></head> <body background=&quot;http://upload.dzbatna.net/upfiles/tz753035.gif&quot;> <p align=&quot;center&quot;><font size=&quot;6&quot;>السلام عليكم ورحمة الله وبركاته</font></p> <p align=&quot;center&quot;>&nbsp;</p> <p align=&quot;center&quot;><font size=&quot;6&quot;>هذي تجربة الصفحه اللذي قمنا بتطبيقها بالدرس مفصل</font></p> <p align=&quot;center&quot;>&nbsp;</p> <p align=&quot;center&quot;><a href=&quot;http://www.dzbatna.net/vb/&quot;> <span style=&quot;text-decoration: none&quot;><font size=&quot;6&quot; color=&quot;#CC0099&quot;>منتديات ديزاد باتنة</font></span></a></p></body></html>
والان لو نسخنا البرمجه وفحصناها مره اخرى بتكون النتيجه




ثلاثة أخطأ
Result: 3 Errors

وهذه الثلاثة أخطأ على حسب احتراف اللي بيحلها

وكل شيء يسجلونه لك

الخطأ الأول

<meta name=&quot;generator&quot; CONTENT=&quot;عنوان الصفحه&quot; />

والخطأ الثاني هو نفسه
<meta name=&quot;generator&quot; CONTENT=&quot;عنوان الصفحه&quot; />

وحلها هي ان CONTENT كتبت بحروف كبتل والصحيح تكتب بحروف سمول content

والخطأ الثالث
<style>
المفروض ما تكون إلا على صيغتين

اما تكون على الصيغة التالية
<style type=&quot;text/css&quot;>

او تكون على الصيغة التالي
<style type=&quot;text/javascript&quot;>

لكن الصيغة الثانية لو كانت البرمجة التي بداخلها javascript
وانا الصيغة الأولى فتكون لبرمجة CSS

وتصميمنا هذا فيه برمجة CSS فتكون على الصيغة الأولى
<style type=&quot;text/css&quot;>

ونفحص التصميم بعد تعديل الثلاث أخطأ

رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html dir=&quot;rtl&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;ar&quot; xml:lang=&quot;sa&quot;> <head> <meta http-equiv=&quot;Content-Language&quot; content=&quot;ar-sa&quot; /> <title>صفحة التجربه ديزاد باتنة</title> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1256&quot; /> <meta name=&quot;copyright&quot; content=&quot;dzbatna.net&quot; /> <meta name=&quot;author&quot; content=&quot;dzbatna.net&quot; /> <meta name=&quot;description&quot; content=&quot;خريطة الموقع ، موقعي ، منتديات ، برامج&quot; /> <meta name=&quot;keywords&quot; content=&quot;مواقع ، خدمات ، برامج ، اقسام &quot; /> <meta name=&quot;generator&quot; content=&quot;عنوان الصفحه&quot; /> <style type=&quot;text/css&quot;> <!-- .page { background: #FEF8FC; color: #4D0A50; } .navbar { color: #4D0A50; font: bold 11px tahoma, arial, helvetica,verdana; } .navbar { font: bold 8pt Tahoma; }--> </style></head> <body background=&quot;http://upload.dzbatna.net/upfiles/tz753035.gif&quot;> <p align=&quot;center&quot;><font size=&quot;6&quot;>السلام عليكم ورحمة الله وبركاته</font></p> <p align=&quot;center&quot;>&nbsp;</p> <p align=&quot;center&quot;><font size=&quot;6&quot;>هذي تجربة الصفحه اللذي قمنا بتطبيقها بالدرس مفصل</font></p> <p align=&quot;center&quot;>&nbsp;</p> <p align=&quot;center&quot;><a href=&quot;http://www.dzbatna.net/vb/&quot;> <span style=&quot;text-decoration: none&quot;><font size=&quot;6&quot; color=&quot;#CC0099&quot;>منتديات ديزاد باتنة</font></span></a></p></body></html>
فتكون النتيجه
This document was successfully checked as XHTML 1.0 Transitional!
Result: Passed

خالي من الأخطأ
ويستحق الوسم
http://www.w3.org/Icons/valid-xhtml10-blue



واذا عدلت اخطأ الستايل style فسوف تعيقك بعض المشاكل البسيطه لكن بخبرتك واحترافك يمكنك حلها

واحذر ان تعدل ستايل styleك من جديد وتاخذ تمبلت الهوم فروم وتعدله بالفرنت بيج فسوف يعطيك أخطاء عظيمة وتخرب عندك كل الدوال الشرطيه if

اللي لديه اي سؤال يسأل

تحياتي http://www.dzbatna.com/images/smilies/shiny01.gif
عبدالله التميمي




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى