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


لتصفح افضل

فايرفوكس

اعلانات

الدرس السادس من دوره توزيع الوجهات وقائمه جانبيه بطريقه اخرى

26 / 05 / 2010

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


السلام عليكم

اهلا بكم مره اخرى فى دوره توزيع الوجهات من مدونه فى بى ايجى التقنية

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

وان شاء الله الدرس القادم هو درس ختام الدوره ورئيه شكل التوزيع على الاكسبلور وتصحيح الاخطاء ان كان هناك اى خطأ

اول جزء 8 دقائق والثانى والثالث 10 والاخير 6 دقائق (ساعه الايقاف خرفت تقريبا :D )

الناتج الاخير لدرس اليوم هو

http://vbegy.info/blog/vbegy/Lesson_6


لمشاهده الدرس على اليوتيوب

للتحميل برابط مباشر

http://vbegy.info/blog/vbegy/6_cols2_copyrights_xhtml_css_part_1.zip

http://vbegy.info/blog/vbegy/6_cols2_copyrights_xhtml_css_part_2.zip

http://vbegy.info/blog/vbegy/6_cols2_copyrights_xhtml_css_part_3.zip

http://vbegy.info/blog/vbegy/6_cols2_copyrights_xhtml_css_part_4.zip

للتحميل من روابط اخرى

http://www.4shared.com/video/WmTgW_Z3/6_cols2_copyrights_xhtml_css_p.html

http://www.4shared.com/video/oUODHOje/6_cols2_copyrights_xhtml_css_p.html

http://www.4shared.com/video/Kmd-iZXT/6_cols2_copyrights_xhtml_css_p.html

http://www.4shared.com/video/tLDaUvsx/6_cols2_copyrights_xhtml_css_p.html

لتحميل ملفات الدرس

http://upload.vbegy.com/uploads/vbegy12749025491.zip

او من هنا

http://vbegy.info/blog/vbegy/Lesson_6.zip

الموضوع الاصلى
مدونه فى بى ايجى

عدد الزيارات : 1,148

22 التعليقات في الدرس السادس من دوره توزيع الوجهات وقائمه جانبيه بطريقه اخرى

  1. طآلب قال:

    السلام عليكم

    كيف حآلك اخوي

    عسآك بخير

    اخوي لو سمحت ياليت تحط درس اضافة صفحات فرعية للموقع

    بنفس الواجهه

    مثل موقعك كذآ

    لأني مبتدء وماعرف للأسف

    بأنتظارك

  2. وعليكم السلام
    اهلا بيك يا غالى
    الموضوع مش محتاج شرح
    فقط اعمل صفحه اخرى وسميها باى اسم وليكم vbegy.html وسيبها مربوطه بنفس صفحه ال css وبعدين ضع فيها نفس كود الرئيسية بس غير لما يناسبك علشان تعملها صفحه فرعيه

  3. طآلب قال:

    السلام عليكم اخووي

    حصلت لي مشكله بالاكسبلور

    الا وهي

    يصير فيه حق الي يروح يسآر ويمين

    كأن فيه كلام على اليسآر

    وهاذي ماتصير معاي الا بالموقع

    اما بالسيرفر كل شي ميه بالميه

    مثآل للمشكله

    http://a7alamy.eb2a.com/

    وشكراً

  4. احمد الخطيب قال:

    thanxxxxxxxxxxxxxxxxxxx
    شكرا يابطل

  5. العفو اخى الغالى
    بالتوفيق ان شاء الله

  6. Calar قال:

    تمام يا باشه قميل

    بص التصميم بتاعي

    http://www.calar.eb2a.com

    كلو تمام الهيدر زي الفل
    بس الفولتر مش ضاهر :(
    مع العلم انا حافظ التصميم عندي بالجهاز صفحه HTML وضاهر الفولتر وزي الفل
    دخلت على الكروم والاكسبلورار زي المشكلة

    والمشكلة التانية بص بالصورة دي الاول
    http://filaty.com/i/1011/10052/5.jpg

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

    الله يخليك محتاجك

  7. Calar قال:

    اخوي انا زبطت الفولتر تمام التمام بص
    http://www.calar.eb2a.com

    بس اعمل ايه بالاطارات مش عارف اضيفهم واللهي
    وشرحت لك المشكلة

  8. الاول تمام لحد دلوقتى
    شوف بقى مشكله الايطارات
    هتعمل ثلث ديفات ما بين الهيدر والفوتر

    1
    2
    3
    4
    5
    6
    7
    <div class="g1">
    <div class="g2">
    <div class="g2">

    </div>
    </div>
    </div>

    وبعدين فى اكواد ال css هيكون اول كلاس عادى اللون
    وهنيجى عن الكلام التانى العمود اللى على اليسار مثلا وهنعمل

    1
    2
    3
    4
    .g2 {
        background:url(images/(1).jpg) repeat-y left center;
        padding-left:20px;
    }

    وتضع مكان ال 20px عرض صوره التمدد اللى على اليسار
    ونفس الحكايه بالظبط فى اليمين

    1
    2
    3
    4
    .g3 {
        background:url(images/(2).jpg) repeat-y right center;
        padding-right:20px;
    }

    وتضع مكان ال 20px عرض الصوره اليمنى

  9. Calar قال:

    ربنا يخليك يا باشا

    http://www.calar.eb2a.com

    عملتها مزبوط

    بس مش عارف ايه الاكواد الجديدة دي ؟
    ممكن تشرحها بعد ازنك

    اقصد الـ padding-right والـ Center انت حاطط السنتر فوق هو بيفيد في إيه ؟

  10. شوف يا غالى
    اول حاجه بنحدد مسار الصور وبعدين left يعنى فى اليسار و center معناها فى الوسط بس الوسط هنا مش منتصف اليمين واليسار
    لا منتصف من اعلى واسفل يعنى يجيب نص الصوره بالظبط لاكثر دقه
    وبعدين ال pdding-left معناها الازاحه من ناحيه اليسار لانك لو معملتش دى هتلاى الكتابه بتظهر فوق العمود
    فاحنا بنعمل كده علشان الكتابه تتزاح من ناحيه اليسار بمسافه عرض الصوره
    اتمنى تكون فهمت قصدى

  11. Calar قال:

    ايوه يا باشه فهمت والله كلامك مزبوط
    10\10
    مشكور واللهي ربنا يخليك ويكرمك

  12. تمام بالتوفيق ان شاء الله

  13. Calar قال:

    اخوي شوف الموقف
    http://www.calar.eb2a.com

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

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

    بعدين

    منطقة الوسط وعباره عن ايطارات تتمدد وبالنص لون خلفية

    بعدين فولتر

    الديفات والاي دي تبعهم انا حطيتهم قبل ديفات منطقه الوسط عساس شغلي يجي بالوسط وزبوط
    بس والله حاولت فيه منفعش اعمل ايه ؟

  14. انت عاوزها تيجى يمين يعنى
    اعمل فى ال body

    1
    direction:rtl;
  15. Calar قال:

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

    بص الرابط
    http://www.calar.eb2a.com

    كلو تمام بس انا عاوز اكتب داخل المساحة البيضا
    العنوان
    انا جربت اكتب بس باض واتلغبط
    وكمان ازاي اخليه يبعد عن الايطار
    انا جربت الكودات تبع المساحه وحددتها بالارقام بس متحركشي
    :(

  16. هيكونو على الشكل

    1
    2
    3
    4
    5
    6
    7
    <div class="sbh1">        
        <div class="sbh2"></div>
        <div class="sbh3"></div>
        <div class="sbh4"></div>
        <div class="sbh5"></div>
        <div class="sbh6"><span>Ahmed Hassan</span></div>
    </div>

    وفى اعادات ال css هتعمل لل sbh6

    1
    2
    3
    color:#000;
    line-height:37px;
    text-align:center;
  17. Calar قال:

    http://www.calar.eb2a.com
    عملتة بالزبط مأصرتش واللهي
    اولا السبام بيعمل ايه ؟
    وغريبه ديف لحالة للكتابة

    المهم

    اتحلت المشكلة بس انا عاوز اعمل ازاحة او اي حاقة تخلي
    القائمة شوي تنزاح ناحية اليسار شوية بعيد عن الاطار
    وحاقة تانية
    النقاط
    *
    *
    *
    *
    ازاي ادخلها داخل القائمة ؟

  18. تقدر تحذف ال span عادى مفيش مشاكل
    والازاحه فى #SB
    اعمل margin-right:10px;
    او اى شئ انت تريده
    وللازاحه للداخل للنقاط

    1
    2
    3
    .abc3 ul li {
    list-style:inside;
    }
  19. Calar قال:

    ربنا يخليك والله قدع عمال اتعلم منك حاقات واللهي انته جامد اوي

  20. الله يخليك يا غالى
    والحمدلله انك استفدت
    بالتوفيق ان شاء الله

  21. mado قال:

    مشكور جدا بارك الله فيك

  22. العفو اخى الغالى

اكتب تعليق