ط¨ط¯ط§ظٹط© طھطµظ…ظٹظ… ظ…ظˆظ‚ط¹ ط¨ط§ط³طھط®ط¯ط§ظ… Xhtml/css




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

لغة الـ CSS تعلمتها منذ حوالي السنة والنصف الآن وحتى الآن مازلت لا اجيد اتقانها بالكامل.



لكن ان شاء الله بالقريب العاجل بحاول اجيدها.

فيه هذا الموضوع راح اطرح كيفية تصميم صفحة باستخدام جداول الـ CSS و تقنياتها ومن دون الحاجة لاستعمال الفرونت بيج لتصميم الجداول!

في مواضيع سابقة قمت بطرحها في المنتدى forum يمكن التعرف على بعض خواص الـ CSS من خلال البحث في هذا القسم.
______________

في البداية يفضل ان تقوم بدراسة محتويات موقعك على ورقة وباستخدام القلم. نعم من دون كيبورد وماوس :biggrin:
السبب: ان العادة اذا جلس الانسان على الكمبيوتر ينشغل بالضغط على الصور و تتشتت افكاره.
و بكذا يضيع تركيزك عن مجال بحثك.

حاليا راح نفرض ان الموقع راح يتكون من الصفحات التالية :
الرئيسية - ملفي الشخصي - تصاميم - الاتصال بي.

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

اسم الموقع : موقع محمد
القائمة: الرئيسية , ملفي الشخصي, تصاميم , الاتصال بي

افتح صفحة جديدة باستخدام الفرونت بيج واذهب على الكود code, CODE او افتح مفكرة جديدة واعد تسميتها إلى index.html
الصق الكود code التالي :
رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;DTD/xhtml1-transitional.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-type&quot; content=&quot;text/html; charset=windows-1256&quot; /> <title>Mohamd.net | موقع محمد</title> </head> <body> <div id=&quot;container&quot;> <div id=&quot;top&quot;> <h1>موقع محمد</h1> </div> <div id=&quot;menu&quot;> <ul> <li><a href=&quot;#&quot;>الرئيسية</a></li> <li><a href=&quot;#&quot;>ملفي الشخصي</a></li> <li><a href=&quot;#&quot;>تصاميم</a></li> <li><a href=&quot;#&quot;>الاتصال بي</a></li> </ul> </div> <div id=&quot;content&quot;> <h2>أهلا وسهلا بك في موقعي</h2> <p> مرحبا بك! هذه الصفحة عبارة عن درس مفصل مقدم من قبل الغافلي من منتديات عرب نوكيا www.arabnokia.net في هذه الخانة تظهر المحتويات المراد اضافتها للصفحة والتي يمكن التعديل عليها واضافة القوالب و الصور لها بسهولة. </p> <p> مرحبا بك! هذه الصفحة عبارة عن درس مفصل مقدم من قبل الغافلي من منتديات عرب نوكيا www.arabnokia.net في هذه الخانة تظهر المحتويات المراد اضافتها للصفحة والتي يمكن التعديل عليها واضافة القوالب و الصور لها بسهولة. </p> </div> <div id=&quot;footer&quot;> نهاية الصفحة </div> </div> </body> </html>
بعد حفظ الصفحة وفتحها راح تطلع لنا على الشكل التالي :


القوالب اللي استعملناها هنا اسمها :
container اللي هو الصندوق الكبير اللي راح تدخل به جميع المحتويات.
top المستطيل العلوي الذي يحمل اسم الموقع
menu قائمة الموقع الرئيسية
content محتويات الموقع
footer نهاية الصفحة الرئيسية


سبب استخدامي لـ ID عن تعريف القالب template:
من احدى مميزات الـ CSS عن تصنيف القالب template كـ ID انه يقوم بعزلها, ويمنع استخدامها اكثر مرة بالموقع.
لذلك اذا فضلت ان تكرر صندوق معين مثل بموقعك او شكل معين لخط, يفضل استعمال الـ class

ويمكن تعريفه من خلال التالي مثلا:
رمز Code:
.highlight { color: yellow; }
واضافته على اي نص بالموقع لنفرض انا نريد ان نجعل كلمة : منتديات عرب نوكيا تضظهر بلون اصفر,
يمكنك تجديدها بالتالي :
رمز Code:
<span class='highlight'>منتديات عرب نوكيا</span>
وسوف تلاحظ ظهورها بالموقع باللون الاصفر

ان شاء الله تغالي سأقوم بتوفير مزيد من دروسي في الموقع بالقريب العاجل

وشكرا لكم,

تحياتي الغافلي
www.mohamd.net









©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©