| دورة تصميم المواقع بإسلوب المحترفين web2.0 دورة تصميم المواقع بإسلوب المحترفين web2.0
ملقي الدورة: [vista-design] |
  |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
04-01-2010, 01:58 AM
| |||||
| |||||
 [الدرس الثانى]مقدمة فى xhtml+css الجزء الأول
 [الدرس الثانى]مقدمة فى xhtml+css الجزء الأول بعد ان تعرفنا على مفهوم web 2.0 بشكل صحيح دعونا نبدأ بأول دروس الدورة وهى اعطاء نبذة عن xhtml+css بما يخدم دورتنا. والنبذة راح أركز فيها على ما يهمنا لان الكلام قد يطول كثيرا فى التحدث عن xhtml+css ولكن دعونا نعطيكم الخلاصة من خلال ما توصلت له وراح اشرح الموضوع بشكل ممتع ان شاء الله ولكن قبل ان تبدأ عليك ان تعرف أساسيات بشكل أساسى لذا أنصح بالتوجه لدورة html على مطور فهى راح تفيدك كثير تنبيه قبل البدأ : لابد وحتما والزاما ان تعود نفسك على كتابة وحفظ الاكواد بنفسك وليس نسخ ولصق, لان الابداع لن يأتى الا من حفظ الكود وطريقة عمله ........ ننطلق بمثال عملى حتى نفهم بشكل أوسع : اولا: افتح الرابط الاتى: اضغـــــط هـــنا قم بعمل كليك يمين وأنت واقف على الصفحة , واختيار عرض مصدر هذه الصفحة view source code راح نشوف السورس البرمجى لهذه الصفحة كما بالصورة : #صورة 1  وهذا هو السورس الخاص بها: كود: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>درس تخطيط وتصميم الزوايا المستديرة</title> <**** ************"content-type" content="text/html;charset=windows-1256" /> <**** name="keywords" content="css tutorial"></****> <**** name="description" content=""></****> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <div id="container"> <div id="header"> <h1><a href="http://vistacompany.org" title="درس عمل تخطيط وزوايا مستديرة ">vista-design</a></h1> </div> <div id="content"> <h2>المحتوى</h2> <p >ماذا يمكن أن أفعل بتقنية CSS؟ CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، </br> صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثير ة، انتظر فقط وسترى! </br> HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمو اقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم. </br> </div> <div id="footer"> coded by <a href="http://vistacompany.org.com" title="css xhtml valid">vistacompany.org</a> </div> </div> </body> </html> ملاخظه: جزء من الكود مٌشفر هنا فى مطور للحماية لذلك يفضل رؤية سورس الصفحة بعمل عرض لمصدر الصفحة كما قلت دعونا نحلل هذه الصفحة : كود: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> هذه الجملة مهمة جدا ولابد من وضعها فى بداية اى صفحة , ووظيفتها انها تقوم بجعل نسق الصفحة مٌوحد على جميع المتصفحات طبقا لw3 المؤسس للhtml فمثلا قد تجد موقع فى الهيدر فوقه فراغ على الاكسبلور وعلى الفايرفوكس يعمل بشكل سليم , وهذا بسبب ان هذه الجملة قد لاتدعم الانترنت اكسبلورر 6 نكمل....... لو تلاحظ انه بين وسمى head تم وضع الاتى: كود: <title>درس تخطيط وتصميم الزوايا المستديرة</title> #صورة 2  كود: <**** ************"content-type" content="text/html;charset=windows-1256" /> لاحظ ان windows-1256 هو الترميز الخاص بالصفحة والمناسب للغة العربية ويوجد أنواع ترميز اخرى ك utf-8 وiso-8859-1 تخيل مثلا اننا قمنا بتغيير ترميز هذهة الصفحة ل iso-8859-1 شوفوا اللخبطة اللى راح تحصل: #صورة 3  اكيد عرفتوا الحين اهمية هذه الجملة  نكمل...... كود: <link rel="stylesheet" href="style.css" media="screen" /> يمكنك رؤية هذا الملف من هذا الرابـــــط بهيك انتهى ما بين وسم head , ولاحظ ان هذه الاكواد لابد وان تٌوضع بين هذا الوسم وليس فى اى مكان اخر نأتى الان لوسم الbody وهو خاص بجسم الصفحة ومحتواها.... كود: <div id="container"> <div id="header"> <h1><a href="http://vistacompany.org" title="درس عمل تخطيط وزوايا مستديرة ">vista-design</a></h1> </div> <div id="content"> <h2>المحتوى</h2> <p>ماذا يمكن أن أفعل بتقنية CSS؟ CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، </br> صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثير ة، انتظر فقط وسترى! </br> HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمو اقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم. </br> </div> <div id="footer"> coded by <a href="http://vistacompany.org.com" title="css xhtml valid">vistacompany.org</a> </div> </div> لاحظ ان هذا الجملة تم وضعها بين وسم اسمه div وسم <div></div> مهم جدا وراح يستخدم بشكل مكرر  وفائدته انه يعتبر اشارة للمنطقة اللى راح نعدل عليها من خلال ملف css ما فهمت!!!! أقولك أنا لاحظ فى بداية وسم div كود: <div id="container"> شوف ملف الcss وراح تفهم قصدى: #صورة 4  فهمنا الحين ان الid بيقولنا انه فى ملف css راح نشير له باستخدام علامة # وهى تعنى الid لكى نقوم بتغيير هذه المنطقة من الصفحة من حجم الخطوط والصور والزوايا .....الخ نشوف اخر الصفحة مثال اخر لوسم ال div كود: <div id="footer"> coded by <a href="http://vistacompany.org.com" title="css xhtml valid">vistacompany.org</a> </div> اى اننا فى ملف css عندما نشير له كالاتى: كود: #footer{
padding:50px 60px;
background:url(steps_10.gif) no-repeat 0 0;
color:#ffffff;
} بهيك يكون اخذنا مثال عملى للجزء الاول من التعرف على html+css وانبه واكرر, لابد من القاء نظرة على دورة html حتى تضح لك الصورة أكثر.......... بالتوفيق أخوكم vista-design توقيعي عالم مطورى الويب لتعليم برمجة وتصميم المواقع www.advphp.com آخر تعديل بواسطة vista-design ، 25-01-2010 الساعة 12:24 AM |
|
#2
23-01-2010, 01:27 PM
| |||||
| |||||
| |
|
| العلامات المرجعية |
 مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0 |
| |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
|
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| الدرس الثاني عشر Exercise Part2 تمرين الجزء الثاني [دروس فيديو] | مُجَاهِد | لغات برمجة مواقع PHP, ASP, Java Script, Perl | 0 | 14-02-2010 02:32 AM |
| مناقشة الدرس الثـــالُُث مقدمة فى xhtml+css الجزء الثانى | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 32 | 04-02-2010 11:29 PM |
| مناقشة الدرس الثـــانى مقدمة فى xhtml+css الجزء الأول | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 52 | 02-02-2010 08:49 PM |
| [الدرس الثالث]مقدمة فى xhtml+css الجزء الثانى | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 1 | 23-01-2010 01:28 PM |
دخول الاعضاء
العرض العادي
