 |  |  |  |  |  |  |  |  |  |
| |  |  | |||||||
 |
 |  |  |  |  |  |  |  |  |
| Ma3ali Tube | Be Happy | الجـوال | Ma3ali flickr | الغرفة الصوتية | البطاقات | الصـوتيـات | مركز التحميل | مجلة أجيال |
  |
  |
| |||||||
| مسار الواعدين هنا نُرحّب بالمبتدئين . . |
 |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
08-12-2007, 11:52 AM
| #1 |
   |  * * * بـسـم الله الـرحـمـن الـرحـيـم * * *  * * * الـحـمـد لله رب العالمـين و الصلاة والسـلام على أشرف المرسلين * * * مرحبـاً بكـم أعزائي أعضـاء الفريق في المرحلـة الثالثة للفريق نبدأ هذه المرحلة بدرس تـم تأجيله سابقـاً عندمـا كنا نتعلم الـHTML الا و هو HTML Styles وهي تعني الـCSS الـCSS هي إختصار لـ Cascading Style Sheets وبالعربي صفحات الأنماط الإنسيابية لتقريب فكرة الـCSS للأذهان .. إذا قمت بعمل 10 صفحات بخط معين لكل فقرة و لون معين لكل فقرة وحددت إستايل خاص بالصفحات الـ10 جميعهـا وبعد أن إنتهيت وجدت أن حجم الفقرات صغير أو اللون غير مناسب للزوار فمـا العمل الأن ؟؟ ستقوم بالدخول على شفرة كل صفحة من الصفحات الـ10 وتبحث داخل الشفرة المتشابكة الى أن تجد الخاصية المحددة و تغيرها .. ثم تقوم مرة أخرى برفع الصفحات جميعها على الانترنت طبعـاً هذا مثال صغير على 10 صفحات فقط و هو متعب فكيف إن كان موقع يحتوي على 50 صفحة  هذه من ناحيـة و ناحيـة أخرى لو أردت وضع عدد من الاستايلات لموقعك مثـلاً كالإستايلات اللي في المنتديات هل من المعقول أن تقوم بإعادة تصميم كل صفحات موقعك على حسب كل إستايل .. !! وكذلك في بعض المواقع تجد ثلاث مربعات كل مربع فيه لون واذا ضغط على اللون يتحول لون الصفحة الى ذلك اللون .. وكذلك تجده واضع أزارير في الصفحة تكبر لك الخط أو تصغره كل هذا وغيره معتمد على الـCSS هـل علمت الأن مافائدة الـCSS عمل الـCSS ببساطه توفير خواص معتددة و كثير لكل عنصر ( وسم ) في الـHTML لكي لا تحصل لخبطة بين المتصفحات في التعامل مع العناصر و الخواص المستنكرة وكذلك تعمل الـCSS على جعل صفحة الـHTML مرتبة و بسيطة و وضع جميع الخواص و التنسيقات في ملف خارجي يسهل تعديله ~~~~~~~~~~~ لكـي تكتب شفرة CSS لديك ثـلاث طرق الطريقـة الأولى : كتابة شفرة الـCSS في ملف خارجي يكون بإمتداد .css و وضع رابط ملف الـCSS في صفحـة الـHTML بهذه الطريقـة : كود: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> وكتابة الخاصيـة rel و الخاصية type مثل ماهي في المثال أعلاه ووضع رابط ملف الـcss كقيمة للخاصية href هذه الطريقة تفيد إذا كان موقعك مكون من صفحات متعددة مثـال : إضغط هنا الطريقـة الثانيـة : كتابة شفرة الـCSS في أعلى مستند الـHTML بين وسم البداية و النهاية للعنصر head بهذا الشكل : كود: <head> <style type="text/css"> هنـا تكتب الخواص </style> </head> هذه الطريقة تفيد إذا كان موقعك عبارة عن صفحة أو أن كل صفحة في موقعك لها إستايل خاص مثـال : إضغط هنا الطريقـة الثالثـة : كتابة شفرة الـCSS كخاصية للعنصر (الوسم) بهذا الشكل : (مثـلاً) كود: <p style="color: red; margin-left: 20px"> This is a paragraph </p> هذه الطريقة تستخدم إذا أردنـا إستايل مخصص لعنصر ما مثـال : إضغط هنا ~~~~~~~~~~~ لا تقلق إن كنت الى الأن لم تستطع التفريق بين الطرق فمع الممارسه بإذن الله تعرف الطريقـة الأمثـل قد يسـأل البعض .. لو تـم إستخدام الطريق الثـلاثـة سويـاً .. المتصفح سيعتمد على أي منها ؟؟ المتصفح يمشي بخطوات كتالي : يذهب الى ملف الـCSS الخارجي (الطريقة الأول) ويأخذ مافيه من خواص ثـم يأتي على شفرة الـCSS الموجودة أعلى مستند الـHTML (الطريقة الثانية ) فإن وجد مايعارض ما جاء به من الملف الخارجي يرمي ما جاء به ويأخذ ما هو موجود في أعلى مستند الـHTML ثم يذهب الى كل عنصر في مستند الـ HTML إن وجد في خواص العنصر شفرة CSS (الطريقة الثالثة) يوجد بها ما يعارض ماجاء به يرمي ماجاء به و يأخذ ما هو موجود في خواص العنصر إذا نستلخص من ما سبق أن الأوليه تكون كالتالي : 1- Inline Styles ( الطريقة الثالثة .. شفرة الـCSS خاصية للعنصر ) 2- Internal Style Sheet ( الطريقة الثانية .. شفرة الـCSS أعلى مستند الـHTML ) ه 3- External Style Sheet ( الطريقة الأولى .. شفرة الـCSS في مستند خارجي ) ~~~~~~~~~~~~~~ بهذا نكون أنهينـا أساسيات الـCSS أوصيكـم بقراءة هذا الكتاب الصغير ( عربي ) تـم تأليفـة من قبـل أستاذة في جامعة أم القرى و مديرة الموسوعة العربية للكمبيوتر والانترنت عملت هذا الكتاب عندمـا كانت طالبـة أ.تهاني السبيت الكتاب حجمة صغير جدا و مفيد جداً وسيسهل عليك بإذن الله جميع الدروس القادمة لتحميـل : إضغط هنا أو من هنا .......... مثـال لصفحـات عملت بإستخدام الـCSS و XHTML فقط .. http://forum.ma3ali.net/t392892.html بإذن الله بعد أن تتقنوا درس اليوم سنتعلم كيفية إستخدام عنصرين مهمـين همـا الـdiv و span وهما عنصران في الHTML ولكـن لن ننتقـل الا بعد الإنتهـاء مـن هذا الدرس و من كتاب الموجود أعلاه !! ::: الواجب ::: قراءة الكتاب الذي أشير له في الدرس و هو بسيط وبإمكانك قراءته في نصف ساعة الى ساعة بالكثير والإجابة عن جميع الاختبارات الصغيرة و هي عبارة عن أسئلة قليلة جداً وسهله نتقبـل في هذه الدرس جميع الأسئلة حول ما شرح في الدرس وعما هو موجود في الكتاب .. معلومـة .. دائمـاً يعرف الطالب المميز عن غيره بكونـه مشارك يثير الأسئلـة ولا يترك نقطـة في الدرس تفوته ولا يكتفي فقط بقول شكراً درس واضح و سهل ! * * * إن أصبت فمن الله وحدة و إن أخطأت فمن نفسي و الشيطان * * * * * * والسـلام علـيكـم و رحمـة الله وبـركـاتـه * * * .. |
| التعديل الأخير تم بواسطة زهرة البيلسان ; 05-10-2009 الساعة 11:20 PM. | |
  1
|
 | |||
| منتديات مسلمة النسائية | مساحة إعلانيه | ||
|
08-12-2007, 05:19 PM
| #2 |
| | . . ما شاء الله . . بداية موفقة . . رفع الله قدركم . . أعضاء الفريق . . الكرام دفتر التحضير المبعثر والمرتب والجدول . . سيتم تأخيرهما قليلاً . . كمسألة تنظيم . . أحسن الله إليكم . . جميعاً . . . |
| |
|
08-12-2007, 05:29 PM
| #3 |
| | . . أ. تهاني السبيت . . ما شاء الله . . بارك الله في وقتها وعلمها . . ونفع بها . . |
| |
|
08-12-2007, 06:21 PM
| #4 |
| | بسم الله  ،،نبدأ على بركة الله ،، الدرس موب سهل ولا واضح  ،،كذا زين ؟؟جاري قراءة الكتاب ،، وفقك الله أستاذي أبو سارة ،، |
| |
|
08-12-2007, 06:28 PM
| #5 |
| | . . ماشاء الله درس ممتع .. قمت بتصفح الكتاب .. خفيف و مبسط .. غدًا سأقوم بقراءته بإذن الله .. (( لديّ امتحان غدًا )) .. جزيتم خيًرا .. . . |
| |
|
08-12-2007, 06:46 PM
| #6 |
   |
بارك الله في جهودك أبا سارة
|
| |
|
08-12-2007, 07:50 PM
| #7 |
| | جاري قراءة الكتاب .. وبعدها نعود بالمناقشة بإذن الله .. ريفان متى تقريباً سيتم وضع الدفتر ، اتمنى أن لا يكون الدرس الذي كُلفت به خلال هذا الأسبوع لدي اختبارات كثيرة :/ |
| |
|
08-12-2007, 07:51 PM
| #8 |
| | السلام عليكم جهد طيب وبداية قوية ستتم قراءة الكتاب في وقت أوسع لا حرمك الله الأجر أخي الكريم أبوسارة |
| |
|
08-12-2007, 07:59 PM
| #9 |
| | . . الواجب . . إجابة السؤال الأول . . يشير الاختصار CSS إلى Cascading Style Sheets . . إجابة السؤال الثاني . . الصيغة العامة الصحيحة للـ CSS {"\القيمة\":المتغير} وسم هتمل . . إجابة السؤال الثالث . . الجواب الأول والثاني صحيح . . إجابة السؤال الرابع style . . إجابة السؤال الخامس . . الصيغة العامة لشبه الفئة {"\القيمة\":المتغير}شبة الفئة:وسم هتمل . . إجابة السؤال السادس . . id . . . إجابة السؤال السابع . . الحجم . . 3 . . |
| |
|
08-12-2007, 08:25 PM
| #10 |
| | . . تطبيق . . استخدمت طريقتين في بداية الصفحة وعلى وسم مستقل . . التطبيق هنا سؤال . . عندما أكتب صفحة مستقلة . . . هل تبدأ بوسم <html> و<head> أم مباشرة style . . |
| |
|
08-12-2007, 09:47 PM
| #11 |
| | جاري قراءة الكتب و حل الواجب ,, و ربما أعود ببعض الاسئلة ,, بارك الله فيكم ,, |
| |
|
08-12-2007, 10:15 PM
| #12 | |
| | جزاكم الله خيرا تم تحميل الكتاب وحفظ الدرس بإذن الله سيتم قراءة الدرس والكتاب و إجراء تطبيقات على الدرس وحل الواجب.... لكن قد أحتاج إلى مهلة من الوقت
| |
| |
|
08-12-2007, 10:48 PM
| #13 |
| | :: أخطـاء في كتاب صفحات الأنماط الإنسيابية للأستاذة تهاني السبيت :: في الصفحـة رقم 2 : مكتوب : تشير الأحرف في إسم اللغة الى الأحرف الأولى من العبارة الإنجليزية التالية : Sheets Style Cascading وهذا خطـأ ... والصواب : Cascading Sheets Style ~~~~~~~ في الصفحة رقم 4 : مكتوب : كما تضح هذه الصيغة تماماً : {"القيمة" : المتغير } : وسم هتمل كما نلاحظ فإن الصيغة تقتضي كتابة وسم هتمل الذي سيطبق عليه النمط ثم نقطتان رأسيتان ثم قوسين معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتين رأسيتين أخريتين . وهذا خطأ .. والصواب : كما تضح هذه الصيغة تماماً : {"القيمة" : المتغير } وسم هتمل كما نلاحظ فإن الصيغة تقتضي كتابة وسم هتمل الذي سيطبق عليه النمط ثم قوسين معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتين رأسيتين أخريتين . ~~~~~~~~~ في الصفحة رقم 5 : مكتوب : (خيارات حل السؤال) "\}القيمة\" : المتغير : وسم هتمل} "\القيمة\" : المتغير : وسم هتمل "\}القيمة\" : المتغير } : وسم هتمل "\}القيمة\" = المتغير } : وسم هتمل طبعـاً جميـع الخيارات خاطئـة و الصواب ماذكرته الأخت ريفان في حلها للواجب : {"\القيمة\":المتغير} وسم هتمل ~~~~~~~~~~~ كمـا أن هنـاك بعض الأخطاء الإملائيـة البسيطه ... ~~~~~~~~~~~ الأخطـاء تـأكد أن من ألف الكتـاب أخطأ مـع العجلـة و ليس نقص منـه لذلك ندعوا لهـا بان يبارك الله فيهـا وفي علمهـا وأن يزيدهـا من فضلـه |
| |
|
08-12-2007, 11:06 PM
| #14 | |
| |
أولاً سأعلق على التطبيق .. لابد في جميـع الصفحـات العربية كتابة وسم الـme ta الخاص بترميز الصفحة بالعربي ( أتمنى عدم نسان الأمر هذا مرة أخرى لأهميتـه ) لابد (كذلك) في جميع الصفحات العربية كتابة الخاصيـة dir الخاصة بتحويل إتجاه نص الصفحة من اليمين الى اليسار ( أتمنى عدم نسان الأمر هذا مرة أخرى لأهميتـه ) بالنسبـة لسؤالك لو دققتي النظر في الصفحة ال6 و 9 و 11 و 12 في الكتاب لوجدتي أن ملف الـCSS الخارجي يكتب مباشرة وهذا هو المفروض لأن عنصر الـhtml يدل على أن المستند هو مستند html !! وهذا عكس الواقع حيث أن المستند مستند CSS وكذلك عنصر الـhead هو عبارة عن تقسيم مستند الـHMTL وليس له دخل بالـCSS سـؤالك مهم ويدل على أنك مهتمـة .. بارك الله فيـكِ بالمناسبـة .. أدخلي على موقع : W3Schools Online Web Tutorials إذا نظرتي على شفرة الموقع ستجدين أنـه معتمد على ملف css خارجي فهـل بإمكانـك معرفة رابط ملف الـCSS الخارجي كامل؟ هذا هو الرابط كامل : http://www.w3schools.com/stdtheme.css أدخلي عليـة وشاهدي كيف تمت كتابة الملف وأنتظر منك إن كان لديـك و قت الطريقة الثالثـة فقد عملتي الصفحة بطريقتين فقومي بعمل الثالثه بـارك الله فيكِ | |
| |
|
08-12-2007, 11:08 PM
| #15 |
| | . . لا حظت الأخطاء البسيطة في الكتاب التي ذكرتموها . . أخطاء إملائية لا غير . . بارك الله في الجميع . . أما تطبيقي . . فركزت على ما أخذنا مؤخراً . . بإذن الله . . سأنتبه لها في مرات قادمة . . . . |
| التعديل الأخير تم بواسطة ريفــــــــــــــــان ; 09-12-2007 الساعة 01:15 PM. | |
| |
|
09-12-2007, 01:09 PM
| #16 |
| | لدي سؤال لمن قرأ الكتـاب .. سـؤال قد يكون محير بعض الشيء !! متـى نستخدم الـ(فئات classes) و متى نستخدم الـ(معرف id) ?  |
| |
|
09-12-2007, 01:22 PM
| #17 |
| | . . الفئات نستخدمها إذا كان الوسم الواحد له أكثر من تنسيق بمعنى آخر إذا كان الوسم كل مرة نريد له تنسيق مختلف المعرف إذا كنا نريد أن نخصص تنسيق معين لأكثر من وسم أي يمكن أن نطبقه على أي وسم يقابلنا . . بمعنى آخر إذا كانت الفقرة نريدها بالوسط ونريد العنوان بالوسط إذن نعرف id في الأعلى بأنه توسيط بدون تحديد أية وسوم وعند كتابة الوسم داخل الـ body فإننا نستدعي الـ id للوسمين p و h1 لكن الفئات لا تنفع إلا مع وسم معين حددناه في الاعلى . . شرح ركيك . . فعذراً .. |
| |
|
09-12-2007, 01:37 PM
| #18 |
| | بالعكس شرح ممتاز .. جزاك الله خير ولكـن .. أنظري الصورة المقتبسة من الكتاب :  الا يعـارض هذه شيء مما ذكرتي ؟؟!! |
| |
|
09-12-2007, 04:42 PM
| #19 |
| | جاري قراءة الكتاب والتطبيق ... موفقين ... |
| |
|
09-12-2007, 05:16 PM
| #20 |
| | أيـن حـل الواقب يـاقمـاعـة !!  |
| |
|
| مواقع النشر (المفضلة) |
« XHTML ( الدرس السابع ) : خواص XHTML و HTML القياسية
|
CSS (الدرس الثاني) : الألوان والخلفيات والروابط »
| الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
الأعضاء الذين قرؤوا الموضوع منذ 30 يوم ( أيام ) : 0 .
| |
| الموضوع لم يُقرأ بعد |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
العرض العادي
| |
الساعة الآن 04:15 AM.
