Follow us on Facebook Follow us on Twitter Linked In Flickr Watch us on YouTube My Space Blogger
التسجيل
صفحة 2 من 3 الأولىالأولى 123 الأخيرةالأخيرة
النتائج 16 إلى 30 من 35

دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

هذا الموضوع : دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS داخل الويب وتطوير المواقع | Websites Design & Developmentالتابع الي قسم المنتديات التقنية : السلام عليكم و رحمه الله و بركاته اخى العزيز الى قلبى ايمن اعتذر جدا جدا على تاخر التطبيق فانا اعمل ...

  1. #16
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    السلام عليكم و رحمه الله و بركاته
    اخى العزيز الى قلبى ايمن
    اعتذر جدا جدا على تاخر التطبيق فانا اعمل فيه منذ نزول المرحله الرابعه حتى الان
    و لكن ما اخرنى انى بدات مرحله التكويد(المرحله الثالثه و الرابعه) غيبيا على قدر استطاعتى حتى يزداد فهمى اكثر

    و ايضا انتهيت من كتابه ال css تقريبا منذ امس و لكن المشكله ان عندى فى كل سطر 5 اسئله تقريبا

    لذلك انا متاخر لانى احاول تحليل كل سطر و تغير القيم و رؤيه النتائج و اغير مره اخى و هكذا(try and error learning method)

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

    تقبل مرورى و انتظر تطبيقى قريبا اليوم او غدا

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

    و لكن انت وضعت كل ذلك فى صفحه واحده دسمه جدا

    فانت جمعت كل قواعد ال html, css فى صفحتين فقط باسلوب بسيط و واضح تحياتى على ذلك

    اعذرنى فالمرحله الرابعه دسمه جدا تحتاج لمزيد من الوقت منى و التجارب(try and error)

    دمت بود


  2. #17
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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



    تخيل أن هناك استايل واحد فقط لهذه المجموعة من الصور ليتم تنسيقها ؟
    أعتقد أنى لم أقم باختباركم بعد فى مرحلتى التكويد وهذه المرحلة ومن حقى أن أقوم بوضع سؤال للأجابة عليه
    منتظر اجاباتكم عن ماهو هذا الاستايل أو الكود الوحيد اللذى من خلاله سيتم تنسيق مجموعة الصور لتصبح مثل التصميم على الفوتوشوب ؟؟
    الاجابه:-


    [high]

    .imagemain{
    padding-top :5px;
    margin: 10px;
    }
    [/high]

  3. #18
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    تطبيقى

    http://sites.google.com/site/pscours...newwebsite.rar

    على فكره انا كتبت كود الفوتر كمان ارجوا مراجعه الكود و ابدا رايك فيه و اذا كان هناك اى خطا فى الكود كله او خطا فى كود الفوتر

    بانتظار ردك





  4. #19
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

    و لكن انا عندى مشاكل مع كود menu.css

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




    رابط – خدمات – هو الرابط الرئيسي لمجموعة القوائم اللتى تندرج تحته وهذه المجموعة مختفيه لا تظهر الا عند المرور بالماوس
    حتى الآن ممتاز فكيف سنخفى هذه المجموعة ؟؟
    سنستخدم أوامر أو أكواد الاستايل display و position ، الأول الظهور والثانى الموضع
    وسنستخدم للـ display طريقتين الأولى none أى عدم ظهور والثانية block أى بلوك أو ثابت وبهذين الأمرين سيكون الثابت ظاهر بعد تحرير المختفى عن طريق المرور بالماوس كمعادلة مادة الرياضيات تماما
    وسنستخدم للوضع position الوضع الثابت محله أو مكانه بالأمر absolute
    هذه هى المعادلة بكل بساطة لكن تحتاج إلى تركيز وفهم
    فالظهور display والموضع position يتم جمع قيمهما معا لينتج لدينا قائمة مخفية وأخرى ستظهر بعد المرور بالماوس
    نعيد هذه الجزئية مرة أخرى بطريقة أخرى
    سنعطى الـ ul اللتى تحتوى بداخلها على مجموعة قوائم أخرى نريدها مخفية سنعطيها position:absolute أى ثابتة لا تتحرك، وسنعطيها عدم ظهور عن طريق display:none ، هذه أول معادلة
    سنعطى عناصر القائمة اللتى بداخل الـ ul سنعطيها حاصل ضرب الـ display فى الـ position وهو display:block
    البلوك أو block تشابه القيمة absolute فى الهدف منها لكنها تأتى مع display ، وهذه ثانى معادلة
    احفظها أو افهمها لا فارق أو كنسلها بالكلية
    لنكمل نمذجة هذه القوائم سأعطيك الاكواد الخاصة بالاستايل كالتالى

    يا اخى الكود ملىء بالاكود الغامضه التى لم تتعرض لها بالشرح من قريب او بعيد و لا فى هذا الدرس و لا الدروس السابقه حتى


    فكيف سافهم كود مكون من 83 سطر بدون اى شرح او مساعده

    ففى شرحك السابق القواعد التى كنت تعمل بها

    #id{}

    .class{}

    object-property:value;

    اعذرنى اذا سهوت و نسيت قاعده
    اما فى الملف menu.css
    فالقواعد مختلفه تماما

    على سبيل المثال



    1. #mainmenu_ul {
    2. background-color: #356aa0;
    3. padding: 15px;
    4. }
    5. .mainmenu_li {
    6. display: inline;
    7. margin-right: 10px;
    8. margin-left: 10px;
    9. }


    فى السطر رقم واحد
    استخدمت id يدعى #mainmenu_ul و class يدعى .mainmenu_li

    فى الملف default.htm
    انت لم تعرف اى class or id يسمى mainmenu_ul او mainmenu_li
    هل mainmenu_ul او mainmenu_li كلمات محجوزه فى لغه ال css
    اذا كانت كلمات محجوزه اذا يجب الا استخدم هذه الكلمات لتعريف اى كلاس او id

    كيف سافهم هذا وحدى بدون شرح او توضيح
    ام mainmenu هى الكلمه المحجوزه و ul and li هنا مجرد child للكلمه المحجوزه mainmenu


    و القاعده هنا هى parent object_child object

    كيف سافهم هذا وحدى بدون شرح او توضيح

    فانا لم استطع استنتاج اى قاعده لما كتبه فى السطر رقم 1 و 5

    --------------------------------------------------------------------------------------------------------------------


    فى السطور رقم 20 و 27 و 30 استخدمت الكلمات و .menu li و .menu li a .menu ul

    ما القاعده هنا فانت لم تعلمنا كيف نكتب الكلاس ثم مسافه ثم عنصر ابن ما القاعده هنا



    -----------------------------------------------------------------------------------------------------------------

    استخدمت كثير من الكلمات الجديده على التى لم تتعرض لها بالشرح او الذكر حتى كامثال



    1. border:none;
    2. border:0px;


    list-style:none;

    text-decoration:none;



    1. filter:alpha(opacity=95);
    2. opacity:0.95;


    ----------------------------------------------------------------------------------------------------------------------

    ما هى

    z-index:200;


    هل يوجد فى لغه css معاملات امثال

    y-index

    x-index
    ---------------------------------------------------------------------------------------------------------------------

    كيف سافهم كل هذا بدون ايضاح و شرح منك

    اقسم بالله منذ تاريخ كتابه المرحله الرابعه و انا عاكف تقريبا على الكود menu.css احاول فك طلاسمه حتى لا ارهقك معى و حتى اتجنب كتابه هذه المشاركه لانى اكره قول كلمه انا فشلت او انا عجزت

    و لكن فعلا حاولت الايام السابقه فك طلاسم menu.css و فعلا انا فشلت و استفذت كل وسائلى و طرقى لفهمها و لا يوجد نتيجه

    -----------------------------------------------------------------------------------------------------------------

    ارجو افراد موضوع جديد لشرح كود menu.css

    او على الاقل (اضعف الايمان كما يقال) اعد كتابه الكود menu.css
    و لكن بجوار كل سطر تعليق comment يشرح ما فائده هذا السطر و ما اهميته و لماذا وضع هنا و ايضا شرح القواعد و الكلمات المفتاحيه الجديده علينا التى لم نتعرض لها فى الدروس السابقه




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

    اخوك

    حاتم

  5. #20
    الصورة الرمزية osama
    مصمم متميز

    الحالة
    غير متصل
    تاريخ التسجيل
    Jul 2006
    الدولة
    مصر
    المشاركات
    1,386
    Thanks
    0
    Thanked 0 Times in 0 Posts
    الصور
    10
    معدل تقييم المستوى
    43

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

    .floatleft {
    float: left;
    width: 65%;
    margin-top: 20px;
    }




    http://www.m5zn.com/uploads/2010/7/1...hzl542a4cw.jpg

    وده التصميم على الفوتوشوب


    http://www.m5zn.com/uploads/2010/7/1...cchkdyu9di.jpg
    التعديل الأخير تم بواسطة osama ; 20 / 07 / 2010 الساعة 33 : 05 AM

  6. #21
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

    موقعى الشخصى
    www.Real-Idea.Net



  7. #22
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    اقتباس المشاركة الأصلية كتبت بواسطة Last Soul مشاهدة المشاركة
    الله يكرمك استاذي

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

    اجبتُ عليه بالملف المرفق اتمنى ان يكون الحل سليم

    ---
    بالاضافة لهذا الاستفسار إن أمكن

    س1: على اي اساس اضع النسبة المئوية مع العلم ان العمود الايسر وضعته 65 % فكانت النتيجة نقل الصورة وما تحتها للأسفل فاضطررت لتقليل الى 64 % بالمحاولة والخطأ وكانت النتيجة سليمة
    هل تعتمد الطريقة على المحاولة والخطأ أم ان هناك قاعدة ما لها ؟

    وفقكم الرحمن
    الأخت الكريمة صاحبة أفضل تطبيق
    لا تعتمد الطريقة على المحاولة والخطأ أبدا
    ممكن فى حالات أخرى
    لكن فى حالتنا فالعرض الـ 100% قسمناه جزئين 35% و 65%
    لو كان حسابنا بقيم ثابتة بالبكسل لكان هناك احتمالية المحاولة والخطأ
    لكنها نسبة مئوية تتغير بتغير مقدار عرض الشاشة
    وبناءا على العرض الثابت الاصلى 950 بكسل
    يتم حساب هذه النسب
    وبالمناسبة قمت بتحميل ملفاتك واختبرتها وغيرت القيمة المئوية لديكى الى 65% وكانت النتيجة ايجابية مثل الدرس تماما
    ...................
    بالنسبة لسؤال الاختبار فاسمحى لى بعرض الكود

    [high]
    .mainimages{
    float: left;
    width: 45%;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 2px;
    }
    [/high]

    سأقوم بتحليل هذه الأكواد أولا
    * الـ padding كما شرحت فى هذه المرحلة يقوم بازاحة العناصر بداخل التاج ، وأنتى قمتى بعمل ممتاز هنا لكن ليست هى الاجابة
    * الـ width : لماذا قمتى بتحديد مقاسات الصور ؟ فهى لها مقاس بالفعل سوف يفرض نفسه فى هذه المساحة تماما مثلما لم نعط أيقونة علامة الاستفهام، فلا داعى لهذا الاستايل
    * الـ floating : أيضا لم قمتى بفرض اتجاه الصور لليسار ؟ أنا متأكد أنكى كنتى تقصدين الـ div اللذى يحتويهم مثلا !! لكن هذا الكلاس يأتى مع الصور لكل صورة كلاس ، وتأثيره هنا هو عكس اتجاه الصور نفسها فالصورة اللتى على اليمين ستنقلب لليسار
    لو أزلتى كل هذه الأكواد ماعدا padding فلن يحدث تغيير للتصميم
    وأهنئك على وضع قيم الـ padding لكن ليست هى المطلوبة هنا وستعرفين لماذا فى المرحلة المقبلة ان شاء الله

  8. #23
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    اقتباس المشاركة الأصلية كتبت بواسطة hatemgoda مشاهدة المشاركة
    السلام عليكم و رحمه الله و بركاته
    الاجابه:-
    [high]

    .imagemain{
    padding-top :5px;
    margin: 10px;
    }
    [/high]
    ممتاز جدا وموفق فى الأداء ماشاء الله
    أعتب عليك فى أمر الـ padding-top
    لسنا بحاجة له
    طبعا أنت تريد أن تبعد مجموعة الصور كلها من القائمة فاضطررت لوضع هذا الاستايل
    وممكن لم تكن تقصد
    لكن نظرا لأنك قمت بازاحتها من الأعلى top فاتضح لى ذلك
    كان من الممكن لو أنك كنت تريد فعلا ابعاد مجموعة الصور عن القائمة قليلا أن تقوم باعطاء الكلاس floatleft نفسه هذا الاستايل
    موفق جدا فى اختيار الـ margin للصور فهى أفضل من padding
    سوف أقول لك لماذا فى المرة القادمة

    اقتباس المشاركة الأصلية كتبت بواسطة hatemgoda مشاهدة المشاركة
    السلام عليكم و رحمه الله و بركاته
    انا عندى مشاكل مع كود menu.css
    هذا الكود انت لم تتعرض له بالشرح من قريب او بعيد الا بهذه الكلمات البسيطه
    الكود ملىء بالاكود الغامضه التى لم تتعرض لها بالشرح من قريب او بعيد و لا فى هذا الدرس و لا الدروس السابقه حتى
    فكيف سافهم كود مكون من 83 سطر بدون اى شرح او مساعده

    فى السطر رقم واحد
    استخدمت id يدعى #mainmenu_ul و class يدعى .mainmenu_li

    فى الملف default.htm
    انت لم تعرف اى class or id يسمى mainmenu_ul او mainmenu_li
    هل mainmenu_ul او mainmenu_li كلمات محجوزه فى لغه ال css
    اذا كانت كلمات محجوزه اذا يجب الا استخدم هذه الكلمات لتعريف اى كلاس او i
    d
    .................................................. .......

    فى السطور رقم 20 و 27 و 30 استخدمت الكلمات و .menu li و .menu li a .menu ul
    ما القاعده هنا فانت لم تعلمنا كيف نكتب الكلاس ثم مسافه ثم عنصر ابن ما القاعده هنا

    القاعده هنا هى parent object_child object

    ارجو افراد موضوع جديد لشرح كود menu.css
    وعليكم السلام ورحمة الله وبركاته
    أولا شكرا لك لتنبيهى قمت الآن بازالة mainmenu_ul الكلاس والآيدى
    عذرا لقد كنت أقوم بعمل عدة اختبارات ونسيت أن أحذفهم
    تم التعديل على الموضوع الأصلى أيضا
    جزاك الله خيرا على تنبيهى
    ............
    بالنسبة للشق الثانى من الاقتباس فأنت قد قمت بوضع القاعدة بنفسك
    وقد كنت سأقوم بأى حال من الأحوال بعمل ديفديهات لأشرح فيها الـ css شرحا تفصيليلا
    فقط تابعنى فى خلال الأيام المقبلة فى رمضان بأمر المولى عز وجل
    وهذا بالنسبة لشرح كود menu.css أيضا
    لكنه سيكون مفصلا فى الديفيديهات
    يا حاتم قم بنسخ الملف ومن خلال الدورة والدورات القادمة سوف يتضح لك كل شيء
    فاذا أنا قمت الآن بشرح الشفافية مثلا opacity أو طبقات اللايرات z-index الآن فلن تتابع وستجد الأمر صعبا
    احتمال أن يكون هذا الكلام لا يخصك لكن هناك مشتركين ومتابعين سيهجروا المعلومة من صعوبتها وتفرعاتها خاصة فى مرحلة البدء بالتعلم
    وأنا لا أقوم فى هذه الدورة بشرح مبادئ وأساسيات بل أقوم باعطاؤك المعلومة عن طريق تطبيق كامل ومن خلال عدة تطبيقات سوف تجد نفسك تعلمت بسرعة قطارين
    قطار الاساسيات وقطار التطبيقات
    وأنا أحب أن أقود القطارين بسهولة ويسر وكما كانت طريقة تعلمى ممن علمنى كانت طريقة تعليمى لمن أعلمه

  9. #24
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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



    ممتاز جدا وموفق فى الأداء ماشاء الله
    أعتب عليك فى أمر الـ padding-top
    لسنا بحاجة له
    فعلا لا نحتاجه لانه خاص بكودى انا و ليس بالاجابه لانى ان اردت ان يكون الكلام اعلى من الصور ب 7 بيكسل
    و كان فى نيتى عند وضع الاجابه حذفه و لكن من كثر ارهاقى نسيت حذفه من الاجابه سهوا





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

    فانت استخدمت الاوامر
    .menu ul{

    .menu li{
    .menu li a{

    لانك اساسا لم تعرف كلاسات للعناصر li , ul فى هذ ال div

    حيث ان الكلاس menu هو الجد و العنصر ul هو الابن و العنصر li هو الحفيد و العنصر a هو ابن الحفيد

    هل كلامى السابق صحيح ام به خطا ؟؟؟


    اذا كان صحيح اذن كان يجب مناداه العنصر li هكذا .menu ul li و ليس .menu li كما كتبت فى الكود

    حيث يجب انا اناديهم بالترتيب الجد ثم الابن ثم الحفيد li


    عذرا هذه القاعده مشوشه عندى هل يمكنك ازاله التشويش؟؟؟؟

    -----------------------------------------------------------------
    استفسار اخر

    العنصر a هل يمكن ان اعرف كلاس له مثال على كلامى

    [high]

    <a href="#" class ="link"> خدمات الشركة </a>

    [/high]------------------------------------------------------------------

    استفسار اخر

    هل استطيع عمل nested class كلاسات متداخله او nested id معرفات متداخله

    او هل استطيع عمل class تحتوى على id داخلها مثال على كلامى


    1- nested class

    [high]

    <div class="right_column" >

    <img src ="images_folder/slogan.jpg" class ="qustion_mark" alt="" title=""/>

    </div>

    [/high]2- nested id

    [high]


    <div id="right_column" >

    <img src ="images_folder/slogan.jpg" id ="qustion_mark" alt="" title=""/>

    </div>

    [/high]3-class have id inside it

    [high]

    <div class="right_column" >

    <img src ="images_folder/slogan.jpg" id ="qustion_mark" alt="" title=""/>

    </div>
    [/high]ما هو المسموح و ما هو الغير مسموح فى الامثله السابقه ؟؟

    -------------------------------------------------------------------------------------------





    1. <link rel="stylesheet" href="style_folder/layout.css" type="text/css" media="screen" />
    2. <link rel="stylesheet" href="style_folder/reset.css" type="text/css" />
    3. <link rel="stylesheet" type="text/css" href="style_folder/menu.css" />


    لماذا استخدمت media="screen" مع الملف layout.css فقط ؟؟ لماذا لم تستخدمه مع الملفات reset.css و menu.css ؟؟؟
    ما فائده media و هل لها قيم اخرى غير screen و اذا كان هناك قيم اخرى ما هى القيم الاخرى؟؟


    --------------------------------------------------------------------------------


    لماذا استخدمت الامر

    background-image: url(../images_folder/header.jpg);

    فى ملف ال layout.css


    و لم تستخدم الامر

    [high]


    <div id="banner">

    <img src ="images_folder/header.jpg" class ="banner" alt="" title=""/>

    </div><!--end banner-->



    [/high]فى الملف default.htm

    هل هنا حكمه من هذا ام مجرد استعراض لجميع الطرق ؟؟؟


    -----------------------------------------------------------------------------------------------------------

    [high]


    #containerdiv {
    margin: auto;
    width: 950px;
    }
    #banner {
    background-image: url(../images_folder/header.jpg);
    height: 176px;
    margin: auto;
    }

    [/high]لقد استخدمت الامر
    margin: auto ;
    فى الجد (#container_div ) و الابن (#banner )

    لماذا هذا التكرار كان يكفى فى الجد (#banner ) فقط

    هل يوجد حكمه او سبب هنا ام هو تكرار على سبيل السهو ؟؟

    ----------------------------------------------------------------------------------------
    لو استخدمت خاصيه فى الجد و الحفيد و لكن بقيم مختلفه اولويه التاثير لمن ؟؟ للجد ام الحفيد ؟؟
    مثال لتوضيح كلامى


    [high]

    #container_div {
    float: left;
    }

    #right_column {
    float: right;


    }


    [/high]ما القيمه الذى سيتاثر بها العود الايمن هنا القيمه left فى الجد container_div ام القيمه right فى الحفيد right_column

    ------------------------------------------------------------------------------------------

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

    --------------------------------------------------------------------------

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

  10. #25
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    حاتم قم بنسخ الملف ومن خلال الدورة والدورات القادمة سوف يتضح لك كل شيء
    فاذا أنا قمت الآن بشرح الشفافية مثلا opacity أو طبقات اللايرات z-index الآن فلن تتابع وستجد الأمر صعبا
    احتمال أن يكون هذا الكلام لا يخصك لكن هناك مشتركين ومتابعين سيهجروا المعلومة من صعوبتها وتفرعاتها خاصة فى مرحلة البدء بالتعلم

    لو سمح وقتك ياريت تضع شرح مفصل للكود menu.css بعيد عن الشرح الاساسى و بعيد عن المشاركه الاولى

    ضعه هنا بعد مشاركتى هذه حتى لا نشوش على باقى الاعضاء باكواد معقده و نفس الوقت من يريد فهم الكود مثلى من الاعضاء يستطيع فهمه

    من الاخر الكود menu.css عجبنى جدا و داخل دماغى و نفسى افهمه

    اشرحهولنا سطر سطر كده بمزاج و كل سطر بيعمل ايه علشان نبنى هذه القائمه الرائعه

    ده لو سمح وقتك فقط

  11. #26
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    انت استخدمت الاوامر
    .menu ul{

    .menu li{
    .menu li a{

    لانك اساسا لم تعرف كلاسات للعناصر li , ul فى هذ ال div
    حيث ان الكلاس menu هو الجد و العنصر ul هو الابن و العنصر li هو الحفيد و العنصر a هو ابن الحفيد
    هل كلامى السابق صحيح ام به خطا ؟؟؟
    اذا كان صحيح اذن كان يجب مناداه العنصر li هكذا .menu ul li و ليس .menu li كما كتبت فى الكود
    حيث يجب انا اناديهم بالترتيب الجد ثم الابن ثم الحفيد li
    عذرا هذه القاعده مشوشه عندى هل يمكنك ازاله التشويش؟؟؟؟
    طريق الجرافيك - عرض مشاركة واحدة - دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS
    الاخ محمد الحضرمي
    لمزيد من شرح لسؤالك عن الكلاس شاهد الصورة



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

    ----------------------------------------------------------------

    استفسار اخر
    العنصر a هل يمكن ان اعرف كلاس له مثال على كلامى

    [high]

    <a href="#" class ="link"> خدمات الشركة </a>

    [/high]
    بكل تأكيد يمكنك
    ------------------------------------------------------------------


    استفسار اخر
    هل استطيع عمل nested class كلاسات متداخله او nested id معرفات متداخله
    او هل استطيع عمل class تحتوى على id داخلها
    ما هو المسموح و ما هو الغير مسموح فى الامثله السابقه ؟؟
    الأمر لا يكون هكذا
    الافتراضى أن تقول nested elements وتطلق لفظة متداخل أو nested لآخر عنصر يأخذ كلاس أو آيدى بالفعل بمعنى!!

    [high]
    #mainbody #container #header #toprightsearch .searchbox {}
    [/high]

    فى المثال السابق لدينا كلاس اسمه searchbox يأخذ ستايل بالفعل لكننا نريد تمييزه عن بقية العناصر اللتى تأخذ نفس الكلاس فماذا نفعل ؟؟
    نقوم بجلب كل العناصر اللتى فوقه حتى نصل اليه وبهذا حددنا كلاس واحد من الجميع
    هذه العناصر نطلق عليها عناصر متداخله nested
    فى أمثلتك لم أرى قصدك لكن أضطررت أن أقوم بشرح nested أولا
    وبالعموم فما قمت بعمله فى المثال هو أمر طبيعى جدا أن أقوم بتعريف أى عنصر تحت أى عنصر هذا آيدى وهذا كلاس والعكس
    هل قرأت المرحلة الرابعة ؟


    -------------------------------------------------------------------------------------------

    لماذا استخدمت media="screen" مع الملف layout.css فقط ؟؟ لماذا لم تستخدمه مع الملفات reset.css و menu.css ؟؟؟
    ما فائده media و هل لها قيم اخرى غير screen و اذا كان هناك قيم اخرى ما هى القيم الاخرى؟؟
    سؤال جميل وممتاز
    ما معنى media=screen ؟؟
    أى أن أقوم باستخدام هذا الملف حين عرض الموقع من خلال الشاشة - سواء بالتصفح أو أخذ لقطة كصورة وليس عند طباعة الصفحة
    اذا أردت أن أصمم تصميما آخر مهئيا للطباعة أستطيع أن أحدد الآن أى تصميم سوف يعرض للشاشات وأيهما سوف يعرض للطباعة من خلال تغيير screen الى print
    فالطباعة مثلا لا تتطلب وجود البانر مثلا فى حساباتى ولا أى خلفيات لونية
    أقوم بعمل ملف آخر وأقوم بتغيير العارض media الى print
    --------------------------------------------------------------------------------


    لماذا استخدمت الامر
    background-image: url(../images_folder/header.jpg);
    فى ملف ال layout.css
    و لم تستخدم الامر

    [high]

    <div id="banner">

    <img src ="images_folder/header.jpg" class ="banner" alt="" title=""/>

    </div><!--end banner-->

    [/high]

    فى الملف default.htm
    هل هنا حكمه من هذا ام مجرد استعراض لجميع الطرق ؟؟؟
    مجرد استعراض طرق
    -----------------------------------------------------------------------------------------------------------

    [high]

    #containerdiv {
    margin: auto;
    width: 950px;
    }
    #banner {
    background-image: url(../images_folder/header.jpg);
    height: 176px;
    margin: auto;
    }

    [/high]

    لقد استخدمت الامر
    margin: auto ;
    فى الجد (#container_div ) و الابن (#banner )
    لماذا هذا التكرار كان يكفى فى الجد (#banner ) فقط
    هل يوجد حكمه او سبب هنا ام هو تكرار على سبيل السهو ؟؟
    القسم الأول
    توسيط الصفحة
    containerdiv

    بالرجوع الى تكويد الصفحة default.htm سنجد أننا قمنا بوضع كامل الصفحة فى div وسميناه containerdiv لكى يحتوى على جميع أجزاء الصفحة من البانر والعمود الأيمن والأيسر والفوتر وهكذا
    اذا فلنقم بتوسيط الصفحة عن طريق إعطاء هذا الـ div قيمة auto أى توسيط تلقائى له دون كافة محتوياته


    ----------------------------------------------------------------------------------------
    لو استخدمت خاصيه فى الجد و الحفيد و لكن بقيم مختلفه اولويه التاثير لمن ؟؟ للجد ام الحفيد ؟؟
    مثال لتوضيح كلامى

    [high]

    #container_div {
    float: left;
    }

    #right_column {
    float: right;
    }

    [/high]

    ما القيمه الذى سيتاثر بها العود الايمن هنا القيمه left فى الجد container_div ام القيمه right فى الحفيد right_column
    ماكان هناك اذا من سبب لأعطاء كل div آيدى أو كلاس اذا كانوا سيتأثرون بأبوهم containerdiv
    وتفصيلا لو لم يكن هناك آيدى لكان هناك تأثير

    ------------------------------------------------------------------------------------------

    جزاك الله خيرا انك تعلمنا كما علمت
    هذا يدل على حسن خلقك و حبك للعطاء و مساعده اخوانك
    التعديل الأخير تم بواسطة RealIdea ; 20 / 07 / 2010 الساعة 55 : 08 PM سبب آخر: التنسيق

  12. #27
    الصورة الرمزية RealIdea
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Mar 2010
    الدولة
    مــصــر
    العمر
    39
    المشاركات
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    15

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

  13. #28
    الصورة الرمزية osama
    مصمم متميز

    الحالة
    غير متصل
    تاريخ التسجيل
    Jul 2006
    الدولة
    مصر
    المشاركات
    1,386
    Thanks
    0
    Thanked 0 Times in 0 Posts
    الصور
    10
    معدل تقييم المستوى
    43

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    ملف العمل
    ww os

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

  14. #29
    مصمم مشارك

    الحالة
    غير متصل
    تاريخ التسجيل
    Jun 2010
    المشاركات
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

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

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

    باذن الله ربنا يشفيك و ترجعلنا تانى معافى


    صدقنى من كل قلبى سنفتقدك حتى ترجع

    اسف على الاسئله لو كنت اعلم انك مريض ما كنت ارسلت لك سؤال واحد حتى سامحنى

  15. #30
    الصورة الرمزية Last Soul
    مصمم جديد

    الحالة
    غير متصل
    تاريخ التسجيل
    Feb 2009
    الدولة
    ....
    المشاركات
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    معدل تقييم المستوى
    0

    رد: دورة تعلم بناء صفحات الانترنت - المرحلة الرابعة ملف الانماط الانسيابية CSS

    الف سلامة عليك أخي وربي يجزيك الخير للتوضيح

    لي عودة بعد دراسة الدرس بتأني اكثر

    اسال المولى العظيم رب العرش العظيم ان يشفيك


 

 
صفحة 2 من 3 الأولىالأولى 123 الأخيرةالأخيرة

المواضيع المتشابهه

  1. دورة تعلم بناء صفحات الانترنت المرحلة الثانية و الثالثة - التكويد -
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 62
    آخر مشاركة: 24 / 01 / 2012, 41 : 08 PM
  2. دورة تعلم بناء صفحات الانترنت من الفوتوشوب إلى Html + CSS
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 81
    آخر مشاركة: 22 / 01 / 2012, 53 : 04 AM
  3. التصويت على تسجيل دورة تعلم بناء صفحات الانترنت بالفيديو
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 15
    آخر مشاركة: 04 / 12 / 2010, 54 : 04 AM
  4. دورة تعلم بناء صفحات الانترنت
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 38
    آخر مشاركة: 07 / 09 / 2010, 30 : 05 AM
  5. تطبيقات المشتركين فى دورة بناء صفحات الانترنت المرحلة الأولى - على الفوتوشوب -
    بواسطة RealIdea في المنتدى الويب وتطوير المواقع | Websites Design & Development
    مشاركات: 12
    آخر مشاركة: 21 / 08 / 2010, 44 : 07 PM

الكلمات الدلالية لهذا الموضوع

المفضلات

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

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
الساعة الآن 57 : 09 PM
Powered by vBulletin® Version 4.2.3
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
Search Engine Optimization by vBSEO