+ + + + +
Share/Save/Bookmark

2009-09-07

بداية لاااابد منها ... الجزء الاول




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

لذا , هذا الموضوع كان لابد من ان اطرحه فى بداية الدروس ولكن دعنا لا نبكى على " الشاى " المسكوب , ولنحاول كشف اسرار " التمبليت " وبدائيات كان لابد منها , واعد حضرتك انك بعد هذا الدرس سيكون لديك القدرة على اللعب بالقالب كما تلعب بالـ " الدومينو " .وربما ايضا تصنع القالب خالص بك بنفسك .

الكثير حاول استعمال قوالب جاهزة لكن باءت محاولته بالفشل ولم يتقبلها النظام لديه , والسبب كما اقول دائما ان هناك نوعين من القوالب احدهما " كلاسيك " والاخر " مودرن " , وواضح جدا ايهما الاحدث .

الفرق بينهما من ناحيه نظام الاكواد فى كل قالب , وايضا طريقة تنظيم القطع التى نراها كلنا فى صفحة الادوات page elements وهى قدرتك على تحريك قطعه من مكان لاخر بكل سهوله , انا فى الكلاسيك فلا يمكنك ذلك والامر يصير صعبا على غي الخبيرين بالموضوع .

لذلك اذا كان نظامك مودرن وتحاول ان تضع قالبا كلاسيكيا اعجبك تصميمه فلن يقبل النظام هذا القالب القديم وستضطر الى تحول نظامك الى النظام القديم اولا convert to classic - ستجد هذا الاوبشن فى صفحة صندوق الاكواد - ولا انصح بهذا لانه كما قلت هناك سهوله فى التحكم فى القطع فى النظام " المودرن " بينما لا يوجد فى الكلاسيك .
كما قلت انه يوجد اختلافات فى طبيعه اكواد القالب الحديث والقالب الكلاسيكى , لذا هناك تصميم معين واشياء معينه يمكنك ان تفعلها فى القالب الكلاسيك ولا يمكنك ان تفعهلا فى القالب الحديث و العكس صحيح .
فقط احببت ان اوضح تلك النقطتين لكثرةالاسئله بشأنهما .
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
القالب " او التمبليت " ماهو الا عباره عن اكواد يقراها المتصفح فينفذها ويعرضها بالظبط كما يقراها ليعطيك التصيم المطلوب , هذه حقيقة علميه .
القوالب الحديثة -التى يتعامل بها معظمنا - الاكواد فيها ليست مصنوعة بلغة اتش تى ام ال HTML بل بلغة XHTML وهى خليط من لغة HTML (Hypertext Markup Language) ولغة XML (Extensible Markup Language) فاصبحت لغة XHTML (Extensible Hypertext Markup Language) .
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
قواعد بسيطة ينبغى ان تتعرف عليها بخصوص لغه XHTML قبل البدء فى التعديل على القالب هى :
1- كل الاكواد يجب ان تكون ( سمول small) مش كابيتال Codes to be in lowercase
مثال <head> </head>
2- قيم هذه الاكواد يجب ان توضع بين علامتى تنصيص Attribute values to be in quotation marks
مثال id='sidebar' او id="sidebar"
3- الاكواد المذدوجه التى توضع بداخلها القيم يجب ان تقفل باوسمة الاغلاق Container elements must have closing tags
مثال : اذا بدأت قطعة الرأس بكلمة <head> فلابد ان تغلقها بنفس الكمة وقبلها شرطه مائله " سلاش " كما بالشكل </head>
4- الاكواد الفردية ايضا يجب ان تكون مقفله بنفس الطريقة Standalone elements to be closed
مثال
<br> ... </br>
<img> ... </img>
<input> ... </input>
<frame> ... </frame>
<hr> ... </hr>
<meta> ... </meta>
<link> ... </link>
5- الاكواد يجب ان تكتب بشكل مرتب Elements to be properly nested
نظام يدعى بنظام " التعشيش " وليس التحشيش هه , سنتعرف عليه فيما بعد .
6- كل الاكواد هاتلاقيها بين كلمتى <html> </html> لو نظرت صندوق الاكواد و ماعدا الاكواد التى تعلن عن التمبليت وهاتلاقيها فى اعلى التمبليت
______________________________
وبشكل عام اى قالب نستطيع ان نقسمه الى جزأين :
جزء الرأس head : وبه اكواد كل اجزاء المدونة , كل جزء على حده, يحدد فيها طبيعة هذا الجزء وخصائصه مثل لون الخلفيه ولون اللينكات وشكلها الخ الخ الخ
جزء الجسم body : وفيه نحدد التصميم الشجرى لاجزاء المدونة التى تحدثنا عنها فى منطقة الرأس ,ومهمة هذا التصميم الشجرى هو توضيح العلاقة بين تلك الاجزاء واماكنها فى صفحة المدونة تحديدا دقيقا .
ملاحظة مهمة جدا : تقسيم القالب الى راس وجسم لا يعنى جسم المدونة او راس المدونة, هذا التقيسم خاص بالقالب فقط , برجاء لا تربط بينه وبين تقسيم المدونة ككل الى راس وجسم وذيل واطر جانبيه , حسنا ؟
ــــــــــــــــــــــــــــــــــــــــــــــــــــــ
الدرس القادم ان شاء الله ساعرض هنا مثالا لقالب - من النوع الحديث - معين يستعمله الكثير منا , واشرح كل جزء فيه على حده , وصدقنى هذا سيجعلك قادر على التحكم الكامل بالقالب وربما ساغلق الحديث عن القوالب الى الابد لانه لن اجد شيئا اخر يمكننى التحدث عنه. وارجو كل من لديه استفسار ان يرجأه الى بعد الجزء الثانى لانه الاجابه عليه ستكون موجوده حتما , وارجو كل من يجد خطئا بكلامى ان ينبهنى اليه , اللى اللقاء فى الجزء الثانى ان شاء الله .



الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

9 اضف تعليق , التعليقات:

DayDreaming said...

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

خالد إسماعيل said...

مقالةمفيدة وعرض رائع استفدت .. وأخذت الكود ولصقته في مدونتي

MR Mohamed said...

فى الواقع دروس مفيده افادتنى وننتظر منك المزيد

steelbeauty said...

مش عارفة اشكرك ازاى انا كنت متعقدة اكتير من html لان كل الكتب اللى عندى معقدة الفهم ولكن شرحك رائع ومبسط وفهمت منك اكتير

osama algendy said...

والله أنا مش لاقي غير أقول
يا دكتور وائل يا عالمي
أنتا عمال تقولنا في مفاجئات
وأتمني من الله أني أقدملك مفاجئة قربيا أوي أن شاء الله

B A Z said...

شكرا على الدروس الرائعة ودى مدونتى http://baz-gamez.blogspot.com/

--((حـــبـــ وبكيت ـيـــت))-- said...

اللهم بارك حضرتك حاجه جميل جدا والله وربنا يجعله فى ميزان حسناتك وانا عمرى ما حاولت افتح مدونه اكتر من مرتين او ثلاثه لكن مع حضرتك فى فرق كبير والله اللهم بارك

زكرياء said...

هذاهو الدرس الثاني الذي اقأه بمدونتك الرائعة فعلا بدات الأمور تتضح

fnoontshkilia said...

ما شاء الله جهود جبارة تشكر عليها حبيبي

عندي بعض الأستفسارات

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

اضف تعليقك هنا

اضغط على عنوان البوست لتظهر التعليقات