صفحة 1 من 3 123 الأخيرةالأخيرة
النتائج 1 إلى 15 من 43

الموضوع: الدرس الأول: سلسلة دروس تصميم المواقع باستخدام الCSS

  1. #1
    عضو نشيط
    تاريخ التسجيل
    Jun 2004
    المشاركات
    261

    الدرس الأول: سلسلة دروس تصميم المواقع باستخدام الCSS



    السلام عليكم و رحمة الله و بركاته...

    تحية طيبه إلى أعضاء سوالف سوفت جميعاً...

    في هذه السلسلة و كما تم الذكر في المقدمه سأقوم بوضع عدد من الدروس في كيفية بناء صفحة ويب كاملة باستخدام السي اس اس، و بدول أي جدول.

    الهدف من هذه السلسلة هو تعليم مصممي المواقع العرب الطريقة الصحيحة في بناء المواقع باستخدام السي اس اس، بعيداً عن الجداول و التعقيدات التي تخلقها و عدم المرونه الموجوده فيها.

    لنبدأ الآن في درسنا الأول على بركة الله..
    ____________________________________________________________________


    هذا الدرس سيتطلب منك معرفه سابقه في التقنيات التاليه:
    - XHTML
    - CSS

    تصميم الموقع الذي سنبنيه سوياً هو التالي:



    هذا الموقع يحتوي على 4 أقسام رئيسية و هي:
    1- رأسية (header)
    2- القائمة الرئيسية (navigation)
    3- محتويات الموقع (content)
    4- قاع الموقع (footer)

    قد يبدو هذا الموقع بسيطاً بعض الشيء، و لكننا سنبدأ في هذه السلسلة بتعلم بسائط الأمور أولاً و من ثم نتدرج لما هو أصعب و أعقد منها.

    سنحتاج في هذا التصميم إلى ستة "صناديق" (الترجمة السريعه التي سأستخدمها لكلمة div) كما هو موضع بالصورة التالية:



    الصندوق الاول للرأسية
    الصندوق الثاني للقائمه
    الصندوق الثالث للمحتويات
    الصندوق الرابع لقاع الموقع
    الصندوق الخامس ليحتوي الصندوق الثاني و الثالث (وسط الموقع)
    الصندوق السادس ليحوي جميع الصناديق السابقه (الحاويه)


    اذا لنبدأ بالعمل:

    أولاً: ملف الـ HTML
    في ملف الإتش تي إم إل سنقوم ببناء هيكل الصفحة، و سنضع بداخلها محتويات موقعنا بدون أي أمور أخرى، أي أن الملف سيحتوي على المحتويات و حسب.

    أول سطر في هذا الملف سيكون الDOCTYPE و هو الأمر الذي يعرف المتصفح على نوع الملف، و في حالتنا هنا سيكون XHTML من التصنيف strict فيكون الكود المطلوب هو التالي:
    كود HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    و من ثم سنبني الهيكل الأساسي لأي صفحة HTML...
    كود HTML:
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar">
     <head>
       <title>موقعي الشخصي | تم بناء هذا الموقع لأهداف تعليمية و حسب</title>
       <meta http-equiv="Content-Type" content="text/html;charset=windows-1256" />
     </head>
     <body>
     </body>
    </html>
    لاحظ وسم الmeta الذي أضفناه بداخل الhead لتعريف المتصفح بلغة الترميز التي نريد استخدامها.

    ما تبقى علينا الآن هو أهم شيء و هو محتويات وسم الـ body:

    مثلما إتفقنا، فإننا سنبني صندوقاً ليحوي جميع الصناديق الأخرى بداخله. هذا الصندوق سنعطيه الإسم "container" فيكون الكود اللازم لبناءه هو:
    كود HTML:
    <div id="container">
    <!--الصناديق الأخرى-->
    </div>
    الصندوق التالي هو رأسية الموقع، و سنسميه header، و سيحوي بداخله العنوان "موقعي الشخصي":
    كود HTML:
    <div id="header">
       <h1>موقعي الشخصي</h1>
    </div>
    و من ثم سنبني الصندوق الثالث و هو الصندوق المتوسط. هذا الصندوق سيحتوي على صندوقين آخرين بداخله و هما صندوق القائمه و صندوق المحتويات:
    كود HTML:
    <div id="middle">
    <!-- صندوقي القائمة و المحتويات-->
    </div>
    صندوق القائمه سيحوي على قائمه غير مرقّمه و بها ستكون قائمة موقعنا كالتالي:
    كود HTML:
    <div id="navigation">
       <ul id="navlist">
          <li><a href="#">الصفحة الرئيسية</a></li>
          <li><a href="#">من أنا؟</a></li>
          <li><a href="#">أعمالي</a></li>
          <li><a href="#">مقالاتي</a></li>
          <li><a href="#">اتصل بي</a></li>
       </ul>
    </div>
    أما صندوق المحتويات فسيكون به أولاً عنوان محتواه "أهلا و سهلاً بكم في موقعي" و ثلاث فقرات أخرى كالتالي:
    كود HTML:
    <div id="content">
    	   <h1>أهلا و سهلا بكم في موقعي</h1>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	  </div>
    أما الصندوق الأخير فهو لقاع الموقع، و سيحتوي على فقرة وحيده بها عبارة الحقوق:
    كود HTML:
    <div id="footer">
      <p>&copy; جميع الحقوق محفوظه لـ موقعي الشخصي 2005</p>
    </div>
    فيكون كامل محتوى الصفحة هو التالي:
    كود HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar">
     <head>
       <title>موقعي الشخصي | تم بناء هذا الموقع لأهداف تعليمية و حسب</title>
       <meta http-equiv="Content-Type" content="text/html;charset=windows-1256" />
     </head>
     <body>
      <div id="container">
        <div id="header">
    	  <h1>موقعي الشخصي</h1>
    	</div>
    	<div id="middle">
         	 <div id="navigation">
    	   <ul id="navlist">
    	     <li><a href="#">الصفحة الرئيسية</a></li>
    	 	 <li><a href="#">من أنا؟</a></li>
    		 <li><a href="#">أعمالي</a></li>
    		 <li><a href="#">مقالاتي</a></li>
    		 <li><a href="#">اتصل بي</a></li>
    	   </ul>
    	 </div>
         	 <div id="content">
    	   <h1>أهلا و سهلا بكم في موقعي</h1>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	  </div>
    	</div>
        	<div id="footer">
    	  <p>&copy; جميع الحقوق محفوظه لـ موقعي الشخصي 2005</p>
    	</div>
      </div>
     </body>
    </html>
    بعد بناء هذه الصفحه و عرضها على المتصفح، النتيجه ستكون بالصوره التاليه:



    بهذا نكون قد انتهينا من بناء ملف الـ HTML.. خطوتنا التاليه الآن هي بناء ملف السي اس اس...
    _________________________________

    يتبع....





    __________________
    معاً لإنترنت عربية أفضل...

    معلومات مهمة عن أدوار فريق العمل في مواقع الويب
    http://www.swalif.net/softs/showthread.php?t=120925


  2. #2
    عضو نشيط
    تاريخ التسجيل
    Jun 2004
    المشاركات
    261


    ثانياً: ملف السي اس اس:

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

    الستايل الأول سيكون لوسم الـbody:
    كود:
    body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464;text-align: right;}
    في هذا الستايل سنقوم أولا بتحديد الإتجاه الذي نريد أن يكون عليه المستند و هو "من اليمين إلى اليسار".
    الأمر الثاني سيكون margin:0 و الذي سيزيل الحواشي الإفتراضيه التي تكون موجوده في صفحة الويب عند بنائها.
    الأمر الثالث الذي سنحدده هنا هو خلفيه الصفحه، هذه الخلفيه ستكون عباره عن صوره تتوسط الصفحه، و باقي الخلفيه ستكون اللون:#DCDCDC. أما باقي الأوامر فهي لتحديد نوع الخط و حجمه و لونه.

    الستايل الثاني سيكون للصندوق Container و هو الصندوق الأكبر و الحاوي لجميع الصناديق الأخرى:
    كود:
    #container{width:524px; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;}
    هذا الستايل يحتوي على أمرين أساسيان و حسب، و هما العرض الذي نريده لذاك الصندوق و الذي سيكون 524 بكسل، و الأمر الآخر هو الحواشي، و ستكون كالتالي:
    - الحاشية العلويه ستكون مساوية للصفر، أي أننا لا نريد اي حاشيه،
    - الحاشية السفليه ستكون كالعلوية، أي أننا لا نريد أي حاشية سفليه أيضاً،
    - الحاشية اليمنى و اليسرى سيحتويان على القيمة auto لنقوم بوضع هذا الصندوق بمنتصف الصفحه.

    الستايل الثالث هو لصندوق رأسية الموقع header:
    كود:
    #header{width:500px; height:100px; background-color:#F5F5F5; border-bottom:1px solid #A7A7A7; margin-right:4px; margin-left:6px; margin-bottom:35px; padding-top:32px; padding-right:15px;text-align: right;}
    هذا الستايل قد يبدو طويلاً نسبياً، لكنه بسيط و ليس فيه أي شكل من التعقيد:
    - الأمرين الأول و الثاني لتحديد عرض (500 بكسل) و طول (100 بكسل) الصندوق
    - الأمر الثالث لتحديد لون خلفية الصندوق
    - الأمر الرابع لإخبار المتصفح أننا نريد وضع حد أو border في الجزء السفلي من الصندوق و نقوم بتحديد عرضه و نوعه و أخيراً لونه.
    - بالنسبه للحواشي فإننا نريد وضع حاشيه يمنى (5 بكسل) و يسرى (5 بكسل) و أخيره في الأسفل (35 بكسل)
    - لوضع عنوان الموقع بالمكان المحدد الذي نريده، علينا وضع بعض الحواشي الداخليه باستخدام الأمر padding. سنحتاج هنا لوضع حاشية داخليه علويه بمقدار 32 بكسل و أخرى بالجهة اليمنى بمقدار 15 بكسل. يمكنك تغيير هذه المقاييس حسب حاجتك و ذوقك!
    - آخر أمر هنا هو إتجاه النص نريده يكون من الجهة اليمين.

    الآن نريد تحديد حجم العنوان الرئيسي للموقع من خلال الستايل التالي:
    كود:
    #header h1{ font-size:2em;}
    فيكون حجم العنوان بداخل الصندوق header هو 2em


    نأتي الآن إلى صندوق middle و هو كما ذكرنا في السابق فإنه يحتوي على صندوقين بداخله و هما صندوق القائمه الرئيسية و صندوق المحتويات. في هذا الصندوق (middle) سنقوم فقط بوضع الحواشي اليمنى و اليسرى اللازمه لإبعاد الصندوقين الذين بداخله عن حافة الصندوق الأكبر (Container)، و نقوم بعمل هذا كالتالي:
    كود:
    #middle{margin-right:35px; margin-left:35px;}
    الآن سنبدأ في صندوق القائمة الرئيسية للموقع و المسمى Navigation، في هذا الصندوق سنقوم سنقوم بوضع ثلاثة أوامر، و ستكون على الشكل التالي:
    كود:
    #navigation{width:125px; float:right;text-align: right;}
    هذه الأوامر الثلاثه هي:
    - عرض الصندوق و الذي يساوي هنا القيمة 125 بسكل
    - float:right.... و هذا الأمر يخبر المتصفح أننا نريد أن نضع هذا الصندوق في الجهة اليمنى من الصندوق الأكبر الذي هو بداخله و هو الصندوق middle. هذا الأمر (float) يعتبر من أهم الأوامر في عملية ترتيب الصناديق المستخدمه في بناء الموقع، فهو الذي يقوم بإخبار المتصفح عن الأماكن التي نريد أن نضع فيها صناديقنا دون أن نضع قيم ثابته (position:absolute) لتحديد مكان ظهور الصندوق.
    - الأمر الأخير هو لتحديد إتجاه النصوص.

    بداخل هذا الصندوق يوجد لدينا القائمه الرئيسية. هذا القائمه قمت بعمل ستايل لها لتظهر صورة السهم على الجانب الأيمن من كل رابط بدلاً من الدائرة الممله التي نراها عند قيامنا ببناء قوائم غير مرقمه <ul>.
    الستايل الذي سيلزمنا للقيام بذلك هو التالي:
    كود:
    #navlist{margin-right:0; padding-right:0; list-style: none;}
    #navlist li{padding-right:20px; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position: center right;}
    الصندوق التالي الذي سنقوم بعمل الستايل الخاص به هو صندوق المحتويات (content)، و سيكون بالشكل التالي:
    كود:
    #content{width:310px; float:left; margin-bottom:50px; text-align: right;}
    هذا الستايل يحتوي على أربعه أوامر:
    - أمر عرض الصندوق و سيحتوي على القيمة 310 بكسل
    - الأمر float و هو الذي تحدثنا عنه سابقاً في ستايل صندوق القائمه. لكننا سنقوم الآن باستخدامه لوضع هذا الصندوق في الجهة اليسرى من الصندوق middle.
    - الحاشية السفليه للصندوق و ستحوي القيمة 50 بكسل
    - أخيراً إتجاه كتابة النصوص

    بالنسبه للعنوان في هذا الصندوق فسنقوم بتحديد حجمه باستخدام الستايل التالي:
    كود:
    #content h1{font-size:1.5em;}
    اذا فحجمه سيكون 1.5em


    الستايل التالي الذي سنطبقه سيكون على صندوق قاع الموقع footer، و به سيكون لدينا 3 أوامر كالتالي:
    كود:
    #footer{clear:both; margin-right:25px;text-align: right;}
    - الأمر الأول هنا (clear:both هو الأهم لدينا، فهو يقوم بإنزال الصندوق المطبق عليه هذا الإمر إلى السطر التالي. مثلاً لو كان لدينا قبل هذا الصندوق صندوق آخر عرضه 100 بكسل، فسيكون عندنا بهذه الحاله مكان كافي لوضع هذا الصندوق بجانبه، و لكننا لا نريد فعل ذلك، لهذا سنقول للمتصفح أننا نريد هذا الصندوق أن ينزل تحت الصندوق السابق مهما كان عرض او قيمة حاشية ذاك الصندوق.
    - الأمر الثاني هو للحاشية اليمنى و التي نريدها أن تكون 35 بكسل. تذكر هنا أننا خرجنا الآن من الصندوق middle أي أن هذه الحاشيه ستكون بين هذا الصندوق و الصندوق الحاوي لجميع الصناديق container.
    - الأمر الثالث و الأخير هو لتحديد مسار النص بداخل هذا الصندوق.


    آخر ستايل سيكون للروابط و هو كالتالي:
    كود:
    a:link, a:visited{color:#646464; text-decoration:none;}
    a:hover{text-decoration:underline;}
    لا أظن أنه يحتاج إلى أي شرح..

    النتيجه النهائيه لجميع الأوامر السابقه هي:
    كود:
    body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464; text-align: center;}
    #container{width:524px; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;}
    #header{width:500px; height:100px; background-color:#F5F5F5; border-bottom:1px solid #A7A7A7; margin-right:4px; margin-left:6px; margin-bottom:35px; padding-top:32px; padding-right:15px;text-align: right;}
    #header h1{ font-size:2em;}
    #middle{margin-right:35px; margin-left:35px;margin-bottom:50px;}
    #navigation{width:125px; float:right;text-align: right;}
    #navlist{margin-right:0; padding-right:0; list-style: none;}
    #navlist li{padding-right:20px; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position: center right;}
    #content{width:310px; float:left;text-align: right;}
    #content h1{font-size:1.5em;}
    #footer{clear:both; margin-right:25px;text-align: right;}
    a:link, a:visited{color:#646464; text-decoration:none;}
    a:hover{text-decoration:underline;}
    بهذا نكون قد انتهينا من بناء ملف السي اس اس.

    الأمر الوحيد الذي بقي علينا عمله هو وصل ملف السي اس اس بملف الإتش تي إم إل، و سيكون بإحدى الطرق التاليه:

    إما عن طريق وضع هذه الستايلات بداخل الوسم head في صفحة الـ html كالتالي:
    كود HTML:
    <head>
       <title>موقعي الشخصي | تم بناء هذا الموقع لأهداف تعليمية و حسب</title>
       <meta http-equiv="Content-Type" content="text/html;charset=windows-1256" />
       <style type="text/css" media="screen">
         	 body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464; text-align: center;}
    
    ... باقي الستايلات
    	 
       </style>
     </head>
    أو عن طريق وضع هذه الستايلات بملف خارجي و لنسمه styles.css و وضعه في المجلد ذاته الذي يحوي ملف الhtml، فنضع بهذه الحاله وصله له في وسم الhead كالتالي:
    كود HTML:
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    و بهذا نكون قد انتهينا من العمل، و أصبح موقعنا جاهزاً..

    يمكنك إلقاء نظره على العمل النهائي من الرابط التالي:

    كود HTML:
    http://www.isader.com/SSS1/css01.html
    http://www.isader.com/SSS1/css01.html

    ملاحظه: بحال كان الشرح غير كافي على أحد النقاط، أرجو من الجميع عدم التردد في طرح الأسئله.

    ملاحظه أخرى: للأشخاص الذين هم على دراية بكيفية تصميم المواقع باستخدام السي اس اس، و وجدوا أن هناك خطأ في أحد الملفات السابقه، أو أن هناك طريقه أفضل لعمل المطلوب، الرجاء عدم التردد في طرحها و إفادتنا بها.

    أتمنى أن يكون هذا الدرس مفيداً و أدى الغرض المطلوب منه

    تحيتي للجميع...


    عماد الصدر
    معاً لإنترنت عربية أفضل





    __________________
    معاً لإنترنت عربية أفضل...

    معلومات مهمة عن أدوار فريق العمل في مواقع الويب
    http://www.swalif.net/softs/showthread.php?t=120925

  3. #3
    عضو نشيط جدا
    تاريخ التسجيل
    Feb 2004
    المشاركات
    332


    جزاك الله ألف خير ... شرح واضح ومفهووم ..





    __________________

    سبحان الله وبحمده . سبحان الله العظيم .

    عدد خلقه ورضاء نفسه وزنة عرشه ومداد كلماته

  4. #4

    تاريخ التسجيل
    Apr 2002
    المشاركات
    1,272


    ماشاء الله شرح مبسط وجميل وللامانه استفدت من الكثير

    شكرا لك





    __________________
    ......................
    ابوناصر

    My NicName : RED_LINE

  5. #5
    مـراقـب
    تاريخ التسجيل
    Apr 2001
    المشاركات
    4,264


    شرح جميل يعطيك العافية





    __________________
    لاَ اِلَهَ اِلاَّ اَنْتَ سُبْحَانَكَ اِنِّي كُنْتُ مِنَ الظَّالِمِينَ

  6. #6
    عضو سوبر نشيط
    تاريخ التسجيل
    Feb 2004
    المشاركات
    677


    بسم الله الرحمن الرحيم

    قوي ورائع وفي الصمييييييييييييييييم

    بارك الله فيك أخي الكريم
    وفي إنتظار التالي





    __________________
    Eng.Hossam El-Kady
    People911 Co-founder
    Cellular: 002-010-206-33000
    helkady@ppl911.com
    ( رابط ) www.ppl911.com

  7. #7
    عضو سوبر نشيط
    تاريخ التسجيل
    Nov 2003
    المشاركات
    601


    يعطيك العافيه انتظرنا بداية السلسله التعليميه
    وماتأخرت علينا بالدرس الأول
    يعطيك العافيه ..
    بالنسبه لي ماني من اصحاب الخبره في هالمجال
    لكن اضل مبتدئ وفي اول الخطوات نحو ال css





    __________________
    سحر الفنون http://www.sehralfnon.com
    مواقع ستايلات منتديات شعارات
    مونتاج فديو لوقو انيمشن بروشور
    admin@sehralfnon.com
    مؤسسة سعودية رسميه

  8. #8
    عضو فعال جدا
    تاريخ التسجيل
    Apr 2004
    المشاركات
    2,477


    شكرا على الدرس الرائع والمفيد للتصميم وفى انتظار تكملة سلسلة الدروس
    تقبل تحياتى





    __________________
    ماشاء الله و لا حولا و لاقوة إلا بالله .
    ويب إيفوليوشن WEC : عندما تمتلك العصا التي تفعل بها كل شيء
    معاينة الإصدارة 1.0.6

  9. #9
    فضلاً اكتب اسمك الحقيقي هنا
    زائرداعية


    جزاك الله خيرا
    أتمنى أن تواصل الدروس لنرتقي بالمستخدم العربي

    وفقك الله






  10. #10
    عضو فعال جدا
    تاريخ التسجيل
    Dec 2004
    المشاركات
    4,037


    ماشاء الله ممتاز .. جزاك الله خيرا وسوف أضيف الصفحة للمفضلة للرجوع إلى الدرس مرة أخرى وتطبيقه ..
    لا تتأخر علينا





    __________________
    ....
    محمد حسام
    انترنت بلس

  11. #11
    عضو سوبر نشيط
    تاريخ التسجيل
    Jul 2004
    المشاركات
    774


    جزاك الله ألف خير على الشرح الوافي و الكافي
    انا حفظت الدرس عندي بالجهاز لأجل التطبيق
    بس سؤال على الماشي
    وش اللي يميز ال xhtml عن ال html
    و هل في صعوبة في التعامل مع الغة الجديدة ؟؟





    __________________
    لك الحق في التزام الصمت و كل ما تقوله قد يستخدم ضدك في المحكمة .

  12. #12
    عضو نشيط جدا
    تاريخ التسجيل
    Sep 2003
    المشاركات
    374


    بارك الله فيك يا عماد على بدابة الدروس ,,

    درس رائع صراحه واقترح انه ترفق لكل درس الملفات للـ CSS والصفحات واذا كان في صور وانت براحتك

    وبالتوفيق

    وفي امان الله





    __________________
    سبحان الله وبحمده سبحان الله العظيم

  13. #13
    عضو فعال
    تاريخ التسجيل
    Dec 2004
    المشاركات
    1,020


    بااااارك الله فيك
    ومشكور على الدرس الرائع

    طبقت الدرس لكن هذه النتيجة :funny:
    http://www.mudares.com/css223

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

    كود HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1-transtional.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar">
     <head>
       <title>اول تجربة CSS</title>
       <meta http-equiv="Content-Type" content="text/html;charset=windows-1256" />
       <style type="text/css" media="screen">
        	 body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464; text-align: center;}
    	 #container{width:524px; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;}
    	 	#header{width:500px; height:100px; background-color:#F5F5F5; border-bottom:1px solid #A7A7A7; margin-right:4px; margin-left:6px; margin-bottom:35px; padding-top:32px; padding-right:15px;text-align: right;}
    	 #header h1{ font-size:2em;}
    	 #middle{margin-right:35px; margin-left:35px;margin-bottom:50px;}
    	 #navigation{width:125px; float:right;text-align: right;}
    	 #navlist{margin-right:0; padding-right:0; list-style: none;}
        	 #navlist li{padding-right:20px; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position: center right;}
    	 #content{width:310px; float:left;text-align: right;}
    	 #content h1{font-size:1.5em;}
    	 #footer{clear:both; margin-right:25px;text-align: right;}
    	 a:link, a:visited{color:#646464; text-decoration:none;}
    	 a:hover{text-decoration:underline;}
       </style>
     </head>
     <body>
     <div id"container">
     <div id"header">
     <h1>اول تجربة CSS</h1>
     </div> 
     <div id"middle">
     <div id"navigation">
     <ul id="navlist">
     <li><a href="index.htm">الصفحة الرئيسية</a></li>
     <li><a href="index.htm">من انا</a></li>
     <li><a href="index.htm">من علمني البرمجة</a></li>
     <li><a href="index.htm">قريباً (رابط)</a></li>
     <li><a href="index.htm">اتصل بي</a></li>
     </div>
     <div id"content">
     	   <h1>أهلا و سهلا بكم في موقعي</h1>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
    	    <p>أهلا و سهلا بكم في موقعي الشخصي. في هذا الموقع سأعرفكم أكثر عن نفسي و عن أعمالي، بالإضافة إلى مالاتي. أخيراً بحال كان عندكم أي شكوى أو اقتراح أو سؤال، أتمنى منكم مراسلتي من صفحة اتصل بي.</p>
     </div>
     </div>
     <div id"footer">
     <p>&copy; جميع الحقوق محفوظه لـ موقعي الشخصي 2005</p>
     </div>
    </div>
     </body>
    </html>






    __________________
    _Mudares_

    °‿°



  14. شو هذا كله

    فعلا انك رائع

    شكرا لك عل ى هذه الدروس المفيدة






  15. #15
    عضو فعال
    تاريخ التسجيل
    Dec 2004
    المشاركات
    1,224


    جزاك الله ألف خير ... شرح واضح ومفهووم





    __________________
    لمراسلتي إضغط هنا
    php4arabs@hotmail.co.uk

صفحة 1 من 3 123 الأخيرةالأخيرة




ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
0
أضف موقعك هنا