http://www.dzbatna.com/images/icons/icon30.gif ط¨ط¯ط§ظٹط© طھطµظ…ظٹظ… ظ…ظˆظ‚ط¹ ط¨ط§ط³طھط®ط¯ط§ظ… Xhtml/css
http://www.mohamd.net/upimg/alsalam.gif
هذه من احدى المواضيع التي قمت بوضعها في احدى المنتديات التي اقوم بالاشراف على قسم الموقع فيها.. اتمنى ان يفيدك الدرس مفصل.
لغة الـ CSS تعلمتها منذ حوالي السنة والنصف الآن وحتى الآن مازلت لا اجيد اتقانها بالكامل.
لكن ان شاء الله بالقريب العاجل بحاول اجيدها.
فيه هذا الموضوع راح اطرح كيفية تصميم صفحة باستخدام جداول الـ CSS و تقنياتها ومن دون الحاجة لاستعمال الفرونت بيج لتصميم الجداول!
في مواضيع سابقة قمت بطرحها في المنتدى forum يمكن التعرف على بعض خواص الـ CSS من خلال البحث في هذا القسم.
______________
في البداية يفضل ان تقوم بدراسة محتويات موقعك على ورقة وباستخدام القلم. نعم من دون كيبورد وماوس :biggrin:
السبب: ان العادة اذا جلس الانسان على الكمبيوتر ينشغل بالضغط على الصور و تتشتت افكاره.
و بكذا يضيع تركيزك عن مجال بحثك.
حاليا راح نفرض ان الموقع راح يتكون من الصفحات التالية :
الرئيسية - ملفي الشخصي - تصاميم - الاتصال بي.
نبدأ بتصميم الشكل الرئيسي للصفحات وكيفية توزيع المحتويات بالموقع.
اسم الموقع : موقع محمد
القائمة: الرئيسية , ملفي الشخصي, تصاميم , الاتصال بي
افتح صفحة جديدة باستخدام الفرونت بيج واذهب على الكود code, CODE او افتح مفكرة جديدة واعد تسميتها إلى index.html
الصق الكود code التالي :
رمز Code:
Mohamd.net | موقع محمد موقع محمد
أهلا وسهلا بك في موقعي
مرحبا بك! هذه الصفحة عبارة عن درس مفصل مقدم من قبل الغافلي من منتديات عرب نوكيا www.arabnokia.net في هذه الخانة تظهر المحتويات المراد اضافتها للصفحة والتي يمكن التعديل عليها واضافة القوالب و الصور لها بسهولة.
مرحبا بك! هذه الصفحة عبارة عن درس مفصل مقدم من قبل الغافلي من منتديات عرب نوكيا www.arabnokia.net في هذه الخانة تظهر المحتويات المراد اضافتها للصفحة والتي يمكن التعديل عليها واضافة القوالب و الصور لها بسهولة.
بعد حفظ الصفحة وفتحها راح تطلع لنا على الشكل التالي :
http://www.mohamd.net/upimg/arb/webpic1_th.gif
القوالب اللي استعملناها هنا اسمها :
container اللي هو الصندوق الكبير اللي راح تدخل به جميع المحتويات.
top المستطيل العلوي الذي يحمل اسم الموقع
menu قائمة الموقع الرئيسية
content محتويات الموقع
footer نهاية الصفحة الرئيسية
سبب استخدامي لـ ID عن تعريف القالب template:
من احدى مميزات الـ CSS عن تصنيف القالب template كـ ID انه يقوم بعزلها, ويمنع استخدامها اكثر مرة بالموقع.
لذلك اذا فضلت ان تكرر صندوق معين مثل بموقعك او شكل معين لخط, يفضل استعمال الـ class
ويمكن تعريفه من خلال التالي مثلا:
رمز Code:
.highlight { color: yellow; }
واضافته على اي نص بالموقع لنفرض انا نريد ان نجعل كلمة : منتديات عرب نوكيا تضظهر بلون اصفر,
يمكنك تجديدها بالتالي :
رمز Code:
منتديات عرب نوكيا
وسوف تلاحظ ظهورها بالموقع باللون الاصفر http://www.dzbatna.com/images/smilies/shiny01.gif
ان شاء الله تغالي سأقوم بتوفير مزيد من دروسي في الموقع بالقريب العاجل http://www.dzbatna.com/images/smilies/cupidarrow.gif
وشكرا لكم,
تحياتي الغافلي
www.mohamd.net
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
