مستندات[تنسيق الصفحات بلغة css]

jiko · 02-07-2009, 11:54 PM

التحكم فى العناصر المربعة box model display & position

درسنا الكثير فى الدرس السابق عن طرق التحكم بمظهر
العناصر المربعة box models والتحكم بأبعاده

وانهينا الدرس بتعريف خاصية الـ margin

قبل ان نكمل فى استعراض خصائص التحكم بتنسيق هذه العناصر (من حيث مكانها بالصفحة)

سوف نلقى نظرة على خاصية الـ display وإعدادتها.

كما تعرف عن عناصر الـ XHTML

انها تنقسم الى نوعين block و inline
النوع الأول (من امثاله الـ p و div)

يتم اضافة سطر فارغ قبله وسطر فارغ بعده.

والنوع الثانى inline (من امثاله الـ em و الـ span)

يتم وضعه بنفس السطر.

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

كل هذا يتم عن طريق الخاصية display

انظر الكود التالى لتفهم المقصد.
كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<**** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
<style type="text/css">
.block span{
width: 50%;
display:block;
border:#999999 1px solid;
}
.inline span{
display:inline;
border:#999999 1px solid;
}
</style>
</head>
<body>
<p class="block"><span>My</span> <span>Name</span> <span>Is Pepo</span></p>
<p class="inline"><span>My</span> <span>Name</span> <span>Is Pepo</span></p>
</body>
</html>

اتمنى يكون كل شئ اصبح واضح الأن.
مع العلم ان خاصية الـ display
لها قيم اخرى غير الـ block والـ inline
لكنى افضل ان اتركك انت تكتشفها بنفسك.

ننتقل للجزء الثانى من هذا الدرس
تحديد الأماكن او الـ positions

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

نستخدم خاصية الـ position لتحديد مكان العنصر بالنسبة لبقية الصفحة

خاصية الـ position لها عدة قيم سوف نلقى نظرة عليهم.

القيمة static

وهى القيمة الإفتراضية لمكان اى عنصر.
وهى تعنى ان مكانه ثابت, مثلما تم وضعه بين بقية عناصر الصفحة.

القيمة relative
هذه القيمة تعنى ان العنصر, يمكن ان يتم تحريكه من مكانه, مع مراعاة ترك مكانه الأساسى فارغ.
بمجرد ان يتم إعداد position: relative الى احد العناصر
يمكنك ان تستخدم الخصائص left, right, top, bottom
لتحديد مكانه الجديد.
مثلا عندما تجعل قيمة الخاصية left هى 10 بيكسل
هذا يعنى, ان نضع مسافة 10 بيكسل بين العنصر وبين الجانب الأيسر الخارجى له.

اظن تعرف هذا الأمر شئ ليس سهل بالكلام, لذلك اليك المثال التالى وان شاء الله يوضح كل شئ.
(ملحوظة: جرب الكود مع الفايرفوكس, لأن الإنترنت اكسبلورار 6 به مشكلة مع الإعداد relative للخاصية position )
كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<**** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
<style type="text/css">

p{
padding-right: 10px;
}
.a , .b , .c{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.a_r, .b_r, .c_r{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.b_r{
position: relative;
top: 25px;
right: 20px;
}
</style>
</head>
<body>
<h1>العنصر بشكله الأساسى</h1>
<p><span class="a">نص</span> <span class="b">مزيد من النص</span> <span class="c">مزيد اضافى</span></p>
<h1>العنصر بعد التلاعب به</h1>
<p><span class="a_r">نص</span> <span class="b_r">مزيد من النص</span> <span class="c_r">مزيد اضافى</span></p>
</body>
</html>

القيمة absolute

كما ذكرنا عن الـ relative فهى تترك مكان العنصر الأصلى فارغ.

لكن القيمة absolute لا تفعل ذلك.
فهى تضع العنصر بأقرب مكان كان يمكن ان يوضع به (وهذا يختلف على حسب محتوى الصفحة)

لكن مرة اخرى, يمكننا ان نستخدم الـ top و left و right و bottom
لتحديد مكانه الجديد.

انظر الكود التالى لتوضيح الصورة اكثر.
كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<**** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
<style type="text/css">

p{
padding-right: 10px;
}
.a , .b , .c{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.a_r, .b_r, .c_r{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.b_r{
position: absolute;
bottom: 30%;
}
</style>
</head>
<body>
<h1>العنصر بشكله الأساسى</h1>
<p><span class="a">نص</span> <span class="b">مزيد من النص</span> <span class="c">مزيد اضافى</span></p>
<h1>العنصر بعد التلاعب به</h1>
<p><span class="a_r">نص</span> <span class="b_r">مزيد من النص</span> <span class="c_r">مزيد اضافى</span></p>
</body>
</html>

القيمة fixed

مثلها مثل الـ absolute الا انها لا تتحرك مع الإسكرول بار.
لكنها غير مدعومة فى الأنترنت اكسبلورار 6
يمكنك معاينة المثال التالى فى الفايرفوكس او الإنترنت اكسبلورار 7
كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<**** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
<style type="text/css">

p{
padding-right: 10px;
}
.a , .b , .c{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.a_r, .b_r, .c_r{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.b_r{
position: fixed;
bottom: 30%;
}
</style>
</head>
<body>
<h1>العنصر بشكله الأساسى</h1>
<p><span class="a">نص</span> <span class="b">مزيد من النص</span> <span class="c">مزيد اضافى</span></p>
<h1>العنصر بعد التلاعب به</h1>
<p><span class="a_r">نص</span> <span class="b_r">مزيد من النص</span> <span class="c_r">مزيد اضافى</span></p>
</body>
</html>

هناك خاصية اخرى اظن هذا افضل توقيت لإلقاء نظرة عليها.
وهى خاصية z-index

هذه الخاصية يمكن ان نطلق عليها "اهمية الظهور" لكل عنصر.
مامعنى اهمية الظهور؟

مثلا اذا كان لدينا عنصرين, قمنا بالتلاعب بأماكنهم بحيث يظهروا الأثنين بمكان واحد مثلا.

(او جزء من العنصر p يغطى جزء من العنصر div مثلا)

فكيف نختار اى العنصرين سيظهر فوق الأخر؟ هذا يتم عن طريق الخاصية z-index

وكاتوضيح لكيفية استخدام الخاصية.
مثلا العنصر صاحب القيمة 5 لخاصية الـ z-index سوف يظهر فوق العنصر صاحب القيمة 3 لخاصية الـ z-index
والعنصر صاحب القيمة 1 سوف يظهر تحت العنصر صاحب القيمة 3
وهكذا, يعنى العنصر الذى وضعنا قيمة الـ z-index له اعلى, سوف يظهر اولا, والأصغر يظهر تحته.

خاصية الـ float

طريقة اخرى لتحريك العنصر.
الخاصية float يمكن ان تأخذ احد القيمتين, left و right
العنصر الذى نضع له الخاصية float:left

يتم وضعه اقصى اليسار (واذا كان العنصر داخل عنصر اخر, يتم وضعه اقصى يسار هذا العنصر)

ونفس الشئ بالنسبة لـ float:right

الميزة فى الـ float انها تجعل بقية العناصر التى حولها تدور حوليها.

كالمثال التالى مثلا.
كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
</head>

<body>
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext
<p style="float:left; top:0px; right:0px; border:1px #000000 solid; width:100px; height:105px;">left text box here</p>
<p style="float:right; top:0px; right:0px; border:1px #000000 solid; width:200px; height:105px;">right text box here</p>
<br />teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
</body>
</html>

ماذا اذا اردنا ان نضع عنصر داخل صفحة بها عنصر اخر له الإعداد float:left لكننا لا نريد العنصر ان يلتف حول العنصر الذى طبق عليه الـ float ؟

نستخدم لهذا الأمر الخاصية clear
إذا استخدمنا clear:left هذا سيلغى الإلتفاف حول العنصر الذى تم عمل float:left له, ونفس الشئ لـ right
لكننا يمكننا استخدام clear:both ايضا, وارجح ان تستكشفها بنفسك.

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

jiko · 02-07-2009, 11:55 PM

خاتمة دورتين الـ XHTML و الـ CSS
ربما يتسائل البعض
ويقول هل هكذا انا تعلمت الـ CSS والـ XHTML ؟

الإجابة المختصرة هى "نعم انت كذلك"

الإجابة الحقيقية.

كما نعرف جميعا, ان اى اشياء دقيقة فى التعامل معها, لا يمكن تعلمها بشكل حقيقى, الا بالممارسة

يعنى, يمكن ان اقوم انا او غيرى بوضع كل شئ عن الـ XHTML والـ CSS

بالتفصيل ولا اترك حرف الا واشرحه.

لكن هل تظن حقا ان هذا سيفى بالغرض وانك ستتعلم بهذه الطريقة؟

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

لأنك كما ذكرت سترى اشياء لا تشعر بقيمتها وفائدتها.

تخيل معى انك تقرأ 10 دروس لا تشعر بقيمتها, هل ستستطيع المواصلة وقرائتهم؟

اظنك اجبت حالا وقلت لماذا اضيع وقتى فى اشياء لا ارى لها اى قيمة.

اتمنى ان اكون وفقت فى نقل وجهة نظرى فى هذا الأمر.

اذن السؤال الأن كيف ستتعلم؟

الإجابة المختصرة, هى انك ستتعلم عند الحاجة للتعلم.

الأجابة الحقيقية. مامعنى سأتعلم عند الحاجة للتعلم؟ (بالمناسبة هذه هى الطريقة التى تعلمت بها والكثير غيرى)

ربما يكن لديك علم ان كل من الـ XHTML والـ CSS
هما من الفئة التى تسمى Client Side او بمعنى اخر, يجب ان يتم معالجة هذه الأكواد من خلال المتصفح لديك لكى يتم عرضها.

وما الفائدة من هذا؟

الفائدة من هذا انك تستطيع رؤية تصميم اى صفحة تزورها.
ومن هنا نتعلم جميعا. مثلا, انت دخلت صفحة منتدى او موقع ما.

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

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

يعنى ببساطة واختصار لما سبق.

بعد الـ 12 درس الذى تم وضعهم لكل من دورتين الـ XHTML والـ CSS

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

كل ماعليك البدأ به, هو محاولة تنفيذ بعض الأفكار التى تحب ان تنفذها.

وعندما تقف امامك اى نقطة توجه على الفور لقسم الـ [عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]
بمنتديات الدعم العربى, وسوف اكون انا وبقية الأعضاء معك نستجيب لتسائلك بإذن الله.

كما يمكنك (اذا احببت تزويد رصيد معلوماتك)

البحث عن كتب الـ HTML والـ CSS.
او تصفح الأقسام المطلوبة بهذا الموقع
[عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]

كيف اكتشف معيار جودة الصفحات التى اصممها واتأكد من عدم وجود اخطاء بها؟

يمكنك ان تذهب للرابط التالى
[عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]
ووضع محتوى الصفحة التى تحتاج لتصحيحها به, او وضع رابط الصفحة.

وفى حالة وجود اخطاء تعجز عن حلها يمكنك استخدام قسم [عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]
للحصول على مساعدة فى حلها.

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

شئ اخير عنى انا شخصيا.

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

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

ولست متأكد انى موهوب بها.

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

واتمنى من الله ان اكون وفقت بإعداد الدورات بشكل مقبول.

واظن انى ارشدتك مرتين حتى الأن للمكان الذى يمكننا مناقشة الأمور الواسعة به (القسم الموجود بالمنتدى)

اما خاصية التعليقات الموجودة هنا. فهى فقط لمناقشة اى شئ بالدرس نفسه,

يعنى التعليق على اى درس يكون لنقاش شئ معين بالدرس نفسه, وليس لمناقشة الأمور بشكل عام.

واتمنى من الله التوفيق الدائم والمبهر لكم جميعا.

jiko · 02-07-2009, 11:57 PM

الدورة منقولة من

[عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]
وشكرا لمن سهر عليها وقدمها

الشبح الدموي · 02-08-2009, 03:47 PM

شكرا لك اخي jiko على الدرس كنا في حاجة له

THE SAD HACKER · 03-02-2009, 11:32 AM

مجهود رائع مشكوور

02-08-2009, 03:47 PM	رقم المشاركة : [9]
الشبح الدموي ::.مشرف مدرسة البرمجة.::	رد: مستندات[تنسيق الصفحات بلغة css] شكرا لك اخي jiko على الدرس كنا في حاجة له
الشبح الدموي ::.مشرف مدرسة البرمجة.::	التوقيع :

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
الدرس الثالث:الصفحات المزوره بطريقة سريعة..	THE SAD HACKER	دورة اختراق الايميل	10	03-27-2010 05:34 PM
كود تحويل الصفحات الخاطئة او الغير موجودة الى الرئيسية	DannY.IraQi	تطوير الويب و المنتديات - Developing Web & Forums	0	01-29-2010 12:05 PM
[أداة بلغة php] لاستخراج اليوزرات فقط من الملف etc / passwd	sniper code	مستودع الأدوات	1	09-07-2009 01:07 PM
استخدام ملف php لحقن الصفحات	jiko	Videos	8	11-09-2008 07:13 PM

خدمات وأدوات

مستندات[تنسيق الصفحات بلغة css]

لغات البرمجة - Programming