الدرس الأول: في شرح الصفحات المُنسقة css !

[it.7]

في البدء نسأل الله العلي القدير أن يوفقنا نحن وجميع الأخوان في سوالف على تقديم ما ينفعنا في الدنيا والآخرة.

..

من المعروف أن الكثير من المواقع الأجنبية والعربية اأيضاً قد عانت الكثير من مشاكل التنسيق والحدود والجدوال وإلخ في صفحاتها ..
فتم إنشاء فكرة الـ css ,وهي إختصار ( Cascading Style Sheets ) ولسنا بصدد دراسة تاريخها الآن :funny: !

ففكرة التنسيق جاءت من باب التسهيل والترتيب الإضافي .فليس هُناك داعي لإضافة إسم الخط المُراد الكتابة به عند كل حرف يتم تغيير نوع الخط به
فالوضع الآن يترتب على وضع سطر يحوي (تنسيقات الخط وحجمه ونوعه) لنحصل بالنهاية على صفحة قد تم تنسيقها بنفس نمط الصفحة اللتي قُمنا بتخصيص خطوطها
بعيداً عن النصوص والشروح المملة والطويلة .سنبدأ بإذن الله دورتنا الأولى في هذه (المُنسقات)

كمثل الكثير من المطورين .نحتاج دائماً إلى أدوات لبدء عملنا ,لكن بعكس العديد من الدورات فلن نحتاج إلى أدوات عديدة فهذه الأدوات تكفي بإذن الله

Microsoft Office FrontPage 2003
TopStyle Pro 3
.Notepad (98 or higher)xp
Internet Explorer (4.5 org higher)6.0

واحد من البرامج السابقة غير متوفر مع أنظمة Microsoft Windows Xp. أو سابقاتها من الأنظمة
و هو TopStyle Pro 3 (غير مجاني أكيد) .وإليكم رابط التحميل من الشركة المُنتجة

http://www.bradsoft.com/download/dlo...e=topstyle.exe

وبسم بالله على بركة الرحمن نبدأ بعرض بعض النقاط حول البرنامج ولغة(تنسيق الصفحات)
بعد أن نقوم بتشغيل البرنامج .إبدأ بصفحة html فارغة كما في الصورة التالية



لاحظ أن البرنامج سيقوم بكتابة سطر في الصفحة ,ليس عليك سوى مسحه :con2:



كما رأيت في الصورة السابقة .فأوامر الـ html كما هي في أغلب المواقع اللتي تستخدم تلك اللغة



تجاهل كما ورد في الصورة الخط الأحمر حالياً ,لكن عليك معرفة أين ومتى تضع ما تحتويه الصفحة (المنطقة الخضراء لمن يسأل !!)



صحيح ,فالآن قد تحدثت مع المتصفح بسبب إخباره بإنك سُوف تستخدم لغة الـ css بين سطور صفحته
قم بوضع مؤشر الفارة على المنطقة الحمراء وأنظر إلى جهة اليمين الآن



وسنقُوم الآن بإضافة بعض الأوامر والأسطر البسيطة فقط .لفهم كيفية عمل (أوامر تنسيق الصفحات)



سيصبح من الصعوبة الآن تحرير الصفحة بلغة الـ html عن طريق الأوسمة والأوامر .عليك بنقل النص كاملاً إلى محرر الـ FronPage



الآن أصبح لدينا صفحة مُنسقطة عن طريق الـ css .وتستطيع إضافة بعض الخيارات الموجودة في البرنامج وإضافتها لاحقاً إلى المحرر !!

* إذا كُنا سنستخدم أوامر التنسيق كثيراً في الصفحات ,وسنعاني من طولها والخُوف من كثرتها في الصفحة فنستخدم طريقة سهلة جداً
سنقوم بإدخال جميع أوامر (التنسيق) المطلوبة ضمن ملف file_name.css وطلبه عن طريق المُتصفح بإستخدام الآمر التالي

<link rel="stylesheet" href="file_name.css" type="text/css" />

بهذا ولله الحمد إنتهى درسنا الأول في التعامل مع (الصفحات المُنسقة) و(البسيطة) حتى الآن

..
{ سبحانك اللهم وبحمدك ,أشهد أن لا إله إلا أنت ,أستغفرك وأتوب إليك }

/ دُمتم على خير ..

[النعيمي]

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

[alsahernet]

جزاكم الله خير ..

[it.7]

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

..

مع إني لم أفهم سؤالك اأخوي محمد
لكن اأظن سؤالك كان على النقطة التالية

<STYLE type="text/css">
<!--
BODY {
	font-family: Tahoma;
	font-size: 10px;
	text-align: center;
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-top: 10px;
}
-->
</STYLE>

إذا كُنت تريد تغييرها ليس عليك سوى تغيير القيم الموجودة أمام الخيار .و إليك المثال التالي

<STYLE type="text/css">
<!--
BODY {
	font-family: Arial black;
	font-size: 18px;
	text-align: left;
	margin-left: 0;
	margin-bottom: 50px;
	margin-right:75px;
	margin-top: 50px;
}
-->
</STYLE>

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

..

/ دُمتم يا سوالف ..

[النعيمي]

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

[ham2002]

مليون شكر لك ياغالي وبارك الله فيك ومنتظرين الدروس الباقية يادكتور css

[it.7]

جزاكم الله خير ..

..

وياك اأخي الكريم ,و وفقنا الباري في إتمام بقية الدروس بإذن الله
أشكر لك ردك الغالي .و اأسأل الله أن يجعل دروسنا في ميزان أعمالنا !
دعواتك أخي الكريم لنا .في اأيام لا يجرؤ الإنسان فيها إلا على (الدعاء)

..

/ دُمتم يا سوالف ..

[it.7]

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

..

محمد .مُستعجل دائماً على رزقك كما يقولون ( :funny: )
في الدروس المقبلة بإذن الله .هُناك تخصيص الصفحة وتحويلها إلى عدة جدوال وعلوية وسفلة
بهذه الطريقة نستطيع تخصيص كل منطقة بلون مُعين وبخط مُعين وبجدول معين اأيضاً !!
سأذكر لك المثال التالي: فعندما تريد كتابة قصيدة في مُنتصف الصفحة .فإنك تحتاج إلى جدول ,ولنجعل إسمه table1
سنلحق بالإضافة إلى كُود الـ css .كُود (التنسيق) الخاص بالجدول table1
* للمعلومية محمد: إستخدام المُنسقات دائماً يكون بالغالبية المُراد تنسيقها !!
عالم الـ css مُمتع صدقني .لكن ينقصه الدعم العربي من (خبرائه)

ham2002 .. العفو مليون مررة لك اأخوي الغالي !
كم اأسعدني ردك بصراحة .وبإذن الله سنصل جميعاً إلى مرحلة مُرتفعة من إستعياب وتطبيق (الصفحات المُنسقة) في مواقعنا
اأكرر شكري لك ولشخصك الكريم .

..

/ دُمتم على صباح ..