walid
11-01-2013, بتوقيت غرينيتش 03:58 PM
http://www.dzbatna.com/images/icons/iconrote.gif [CSS]-[POSITION PROPERTY] ط´ط±ط* ط¹ط±ط¶ ط¬ط²ط، ظ…ظ† طµظˆط±ط© ط¨ط§ط³طھط®ط¯ط§ظ… css ظ„طھط³ط±ظٹط¹ ط§ظ„ظ…ظˆط§ظ‚ط¹ (ظ‚ظˆظٹ ط¬ط¯ط§) (http://www.dzbatna.com/t1439262/)
نبسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخواني في منتديات ديزاد باتنة الكرام
وخاصة رواد قسم لـــغـــات الـــــبـــــــرمــــــجة الاعزاء
اليوم اقدم لكم درس مفصل حصري لمنتديات ديزاد باتنة ، اشرح طريقة لكم فيه طريقة عرض جزء معين من صورة باستخدام تقنية CSS
عنوان الدرس مفصل:
[CSS]-[POSITION PROPERTY] شرح طريقة عرض جزء من صورة باستخدام css لتسريع المواقع (قوي جدا)
الان نبدأ مع الدرس مفصل على بركة الله
بسم الله على الله توكلنا
راح ابدأ الدرس مفصل عن طريق استعراض تطبيق مباشر على الطريقة
ثم نفهم المقصود من العنوان
لاني حاسس انه العنوان مبهم بعض الشي او على الاقل لدى البعض
ثم نبدأ بشرح طريقة المثال اللي اعددته لكم
:::::::::::::::::::::::::::::::::::
من احد صناديق محررات النصوص المستخدمة
صندوق اسمه nicedit
هو فعلا جميل
وهو يعمل على التكست اريا مهما كان عرضها
لاحظ الصورة وشوف شكل المحرر
http://www.dzbatna.com/attachments/444394d1263339278-image.gif
جميل صحيح؟
اعرف ستقول نعم لكن ليس هذا المهم
لان موضوعنا ليس صناديق التحرير ولا اشكالها ولا ميزاتها
نكمل
لنفرض اننا نزلنا ملفات صندوق التحرير واردنا ان ننظر الى ملفاته
سنجد ان الايقونات الصورية الموجودة في الملفات صورة واحدة فقط وهي الصورة التالية
http://www.dzbatna.com/attachments/444395d1263339368-niceditoricons.gif
قد يقول البعض، وما الغريب، انها صورة الايقونات
نعم الان دقق في الصندوق في الاعلى وفي صورة الايقونات
في الصندوق بدا باليسار بايقونة سمك الخط B وبالصورة هي ثالث خيار
في الصندوق اخر خيار هو صورة الورقة الزرقاء القلم
لو نظرنا الى الايقونات لوجدناها اول ايقونة من الايقونات
ثم لو نظرت الى الصندوق لوجدت ان الادوات مقسومة لاكثر من سطر
لكن الايقونات في سطر واحد
اذن هذا ما سنتعرف عليه في هذا الدرس مفصل
وهو كيفية عرض جزء صغير من صورة كبيرة باستخدام css
اذن انا في هذا المثال لا يهمني اي شي بالصندوق
فقط استخدمت الصندوق كمثال لاوصل معنى عنوان الدرس مفصل لانني احسست انها مبهم وغريب بعض الشي
اذن الحل في خاصية
Position في لغة css القوية
التي كل يوم نكتشف ميزة من ميزاتها الغزيرة الكثيفة
لنفرض انني اريد ان اصمم ثلاثة ازرار في صفحة معينة
وكل زر يختلف لونه عن الزر الاخر
وايضا لا اريد ان اصمم ثلاث صور
اريد ان اصمم صورة واحدة
والفائدة من ذلك هي تسريع التصفح وتقليل كمية البيانات المتناقلة
لنفرض انني قمت بتصميم الازرار الموضحة في الصورة التالية
http://www.dzbatna.com/attachments/444399d1263339873-buttons.gif
ولكني اريد ان اظهر الازرار بجانب بعضهم البعض وليس اسفل بعضهم
يعني مثلا اريد ان اظهرهم على الشكل التالي
http://www.dzbatna.com/attachments/444400d1263339927-image2.gif
كيف نقوم بذلك الحل بسيط جدا جدا
في كلاس css الذي سنستخدمه نضع التالي
رمز PHP:
<code style="white-space:nowrap"> <code> background:url(buttons.gif) no-repeat ;
</code> </code>
هذه ستقوم بعرض الصورة كلها ، ونحن لا نريد هذا
اذن كيف نظهر جزء منها
عن طريق اضافة السطر التالي اسفل السطر الذي وضعناه قبل قليل
رمز PHP:
<code style="white-space:nowrap"> <code> background-position: 100px 200px;
</code> </code>
السطر الاول مسؤول عن جلب الصورة ووضعها كخلفية وهذا ما فيه خلاف والكل عارفه
اما السطر الثاني
استخدمنا الخاصية background-position
وهي بدورها تاخد رقمين بعدها
الرقم الاول 100px
والرقم الثاني 200px
اذن هذا الكود code سيقوم بعرض الخلفية على بعد 100px على المستوى الافقي
وعلى بعد 200px على المستوى العمودي
لذلك يتوجب علينا معرفة كل زر ما احداثياته من الصورة
الاحداثيات السينية صفر طبعا لكافة الازرار لانها جميعا لها نفس العرض وتبدا من اقصى يسار الصورة
اما الابعاد العمودية فعن طريق الفتوشوب نجدها
اذن الان نأتي لتطبيق مثالنا الذي يحتوي على 3 ازرار
انا استخدمت div لكل زر
هذا كود code html المسؤول عن الdiv الثلاثة اللي استخدمتها
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="top" align="center"><br />المنطقة الاولى</div>
<div id="center" align="center"><br />المنطقة الثانية</div>
<div id="bottom" align="center"><br />المنطقة الثالثة</div>
</code> </code>
نلاحظ فقط انها عبارة عن ديفات اعطيناها قيمة بداخلها واعطينها id مختلف لكل واحد
الان نأتي للمهم ، وهو كود code الcss
ناخذ كود code احد الازرار وانا راح اخد كود code الزر الاخضر اللي موجود في الوسط
رمز Code:
#center { font:bold 10pt tahoma; color:#ffffff; background:url(buttons.gif); background-position: 0px -48px; height:45px; width:250px; float:left; }
في البداية وضعنا الايدي
ثم بدانا بتعريفات css لون الخط ونوعه والخ هذا مش مهم
المهم السطرين الثالث والرابع من تعريف css
نجد ان ابعاد الزر الافقي 0 اتفقنا عليها بالاعلى
اما البعد العمودي هو -48
بما ان الزر الاوسط يتواجد في وسط الصورة
ونحن نعرضه باعلى الصفحة
اذن نريد ان نرفعه للاعلى قليلا لذلك وضعنا السالب
اما لو اردنا انزاله للاسفل لا نضع اشارة السالب
هذا التعريف بالنسبة للزر الاوسط
عند المعاينة سيظهر معنا كما في الصورة اللي فوق
الزرين الثانيين نفس الشي لكن اختلفت الابعاد
وهذا كود code الصفة كامل
رمز Code:
<html dir="rtl"> <style type="text/css"> #top { font:bold 10pt tahoma; color:#ffffff; background:url(buttons.gif) ; background-position: 0px -95px; height:45px; width:250px; float:left; } #center { font:bold 10pt tahoma; color:#ffffff; background:url(buttons.gif); background-position: 0px -48px; height:45px; width:250px; float:left; } #bottom { font:bold 10pt tahoma; color:#000000; background:url(buttons.gif) no-repeat ; background-position: 0px 0px; height:45px; width:250px; float:left; } </style> <div id="top" align="center"><br />المنطقة الاولى</div> <div id="center" align="center"><br />المنطقة الثانية</div> <div id="bottom" align="center"><br />المنطقة الثالثة</div>
والنتيجة راح تكون كالتالي
http://www.dzbatna.com/attachments/444400d1263339927-image2.gif
اذن استطعنا عرض 3 اقسام مختلفة من صورة واحدة كما قلنا في بداية الدرس مفصل
الفائدة ان الصفحة ستحمل صورة واحدة لمرة واحدة بدل 3 صور
مرفق لكم الدرس مفصل كامل
للي يجد انه لم يفهم جيدا يراجع الملفات المرفقة
وحياكم الله
نلقاكم ان شاء الله في دروس اخرى
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif Desktop.zip (http://www.traidnt.net/vb/attachments/444406d1263341035-desktop.zip) (5.5 كيلوبايت, عدد مرات المشاهدة 63 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
نبسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخواني في منتديات ديزاد باتنة الكرام
وخاصة رواد قسم لـــغـــات الـــــبـــــــرمــــــجة الاعزاء
اليوم اقدم لكم درس مفصل حصري لمنتديات ديزاد باتنة ، اشرح طريقة لكم فيه طريقة عرض جزء معين من صورة باستخدام تقنية CSS
عنوان الدرس مفصل:
[CSS]-[POSITION PROPERTY] شرح طريقة عرض جزء من صورة باستخدام css لتسريع المواقع (قوي جدا)
الان نبدأ مع الدرس مفصل على بركة الله
بسم الله على الله توكلنا
راح ابدأ الدرس مفصل عن طريق استعراض تطبيق مباشر على الطريقة
ثم نفهم المقصود من العنوان
لاني حاسس انه العنوان مبهم بعض الشي او على الاقل لدى البعض
ثم نبدأ بشرح طريقة المثال اللي اعددته لكم
:::::::::::::::::::::::::::::::::::
من احد صناديق محررات النصوص المستخدمة
صندوق اسمه nicedit
هو فعلا جميل
وهو يعمل على التكست اريا مهما كان عرضها
لاحظ الصورة وشوف شكل المحرر
http://www.dzbatna.com/attachments/444394d1263339278-image.gif
جميل صحيح؟
اعرف ستقول نعم لكن ليس هذا المهم
لان موضوعنا ليس صناديق التحرير ولا اشكالها ولا ميزاتها
نكمل
لنفرض اننا نزلنا ملفات صندوق التحرير واردنا ان ننظر الى ملفاته
سنجد ان الايقونات الصورية الموجودة في الملفات صورة واحدة فقط وهي الصورة التالية
http://www.dzbatna.com/attachments/444395d1263339368-niceditoricons.gif
قد يقول البعض، وما الغريب، انها صورة الايقونات
نعم الان دقق في الصندوق في الاعلى وفي صورة الايقونات
في الصندوق بدا باليسار بايقونة سمك الخط B وبالصورة هي ثالث خيار
في الصندوق اخر خيار هو صورة الورقة الزرقاء القلم
لو نظرنا الى الايقونات لوجدناها اول ايقونة من الايقونات
ثم لو نظرت الى الصندوق لوجدت ان الادوات مقسومة لاكثر من سطر
لكن الايقونات في سطر واحد
اذن هذا ما سنتعرف عليه في هذا الدرس مفصل
وهو كيفية عرض جزء صغير من صورة كبيرة باستخدام css
اذن انا في هذا المثال لا يهمني اي شي بالصندوق
فقط استخدمت الصندوق كمثال لاوصل معنى عنوان الدرس مفصل لانني احسست انها مبهم وغريب بعض الشي
اذن الحل في خاصية
Position في لغة css القوية
التي كل يوم نكتشف ميزة من ميزاتها الغزيرة الكثيفة
لنفرض انني اريد ان اصمم ثلاثة ازرار في صفحة معينة
وكل زر يختلف لونه عن الزر الاخر
وايضا لا اريد ان اصمم ثلاث صور
اريد ان اصمم صورة واحدة
والفائدة من ذلك هي تسريع التصفح وتقليل كمية البيانات المتناقلة
لنفرض انني قمت بتصميم الازرار الموضحة في الصورة التالية
http://www.dzbatna.com/attachments/444399d1263339873-buttons.gif
ولكني اريد ان اظهر الازرار بجانب بعضهم البعض وليس اسفل بعضهم
يعني مثلا اريد ان اظهرهم على الشكل التالي
http://www.dzbatna.com/attachments/444400d1263339927-image2.gif
كيف نقوم بذلك الحل بسيط جدا جدا
في كلاس css الذي سنستخدمه نضع التالي
رمز PHP:
<code style="white-space:nowrap"> <code> background:url(buttons.gif) no-repeat ;
</code> </code>
هذه ستقوم بعرض الصورة كلها ، ونحن لا نريد هذا
اذن كيف نظهر جزء منها
عن طريق اضافة السطر التالي اسفل السطر الذي وضعناه قبل قليل
رمز PHP:
<code style="white-space:nowrap"> <code> background-position: 100px 200px;
</code> </code>
السطر الاول مسؤول عن جلب الصورة ووضعها كخلفية وهذا ما فيه خلاف والكل عارفه
اما السطر الثاني
استخدمنا الخاصية background-position
وهي بدورها تاخد رقمين بعدها
الرقم الاول 100px
والرقم الثاني 200px
اذن هذا الكود code سيقوم بعرض الخلفية على بعد 100px على المستوى الافقي
وعلى بعد 200px على المستوى العمودي
لذلك يتوجب علينا معرفة كل زر ما احداثياته من الصورة
الاحداثيات السينية صفر طبعا لكافة الازرار لانها جميعا لها نفس العرض وتبدا من اقصى يسار الصورة
اما الابعاد العمودية فعن طريق الفتوشوب نجدها
اذن الان نأتي لتطبيق مثالنا الذي يحتوي على 3 ازرار
انا استخدمت div لكل زر
هذا كود code html المسؤول عن الdiv الثلاثة اللي استخدمتها
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="top" align="center"><br />المنطقة الاولى</div>
<div id="center" align="center"><br />المنطقة الثانية</div>
<div id="bottom" align="center"><br />المنطقة الثالثة</div>
</code> </code>
نلاحظ فقط انها عبارة عن ديفات اعطيناها قيمة بداخلها واعطينها id مختلف لكل واحد
الان نأتي للمهم ، وهو كود code الcss
ناخذ كود code احد الازرار وانا راح اخد كود code الزر الاخضر اللي موجود في الوسط
رمز Code:
#center { font:bold 10pt tahoma; color:#ffffff; background:url(buttons.gif); background-position: 0px -48px; height:45px; width:250px; float:left; }
في البداية وضعنا الايدي
ثم بدانا بتعريفات css لون الخط ونوعه والخ هذا مش مهم
المهم السطرين الثالث والرابع من تعريف css
نجد ان ابعاد الزر الافقي 0 اتفقنا عليها بالاعلى
اما البعد العمودي هو -48
بما ان الزر الاوسط يتواجد في وسط الصورة
ونحن نعرضه باعلى الصفحة
اذن نريد ان نرفعه للاعلى قليلا لذلك وضعنا السالب
اما لو اردنا انزاله للاسفل لا نضع اشارة السالب
هذا التعريف بالنسبة للزر الاوسط
عند المعاينة سيظهر معنا كما في الصورة اللي فوق
الزرين الثانيين نفس الشي لكن اختلفت الابعاد
وهذا كود code الصفة كامل
رمز Code:
<html dir="rtl"> <style type="text/css"> #top { font:bold 10pt tahoma; color:#ffffff; background:url(buttons.gif) ; background-position: 0px -95px; height:45px; width:250px; float:left; } #center { font:bold 10pt tahoma; color:#ffffff; background:url(buttons.gif); background-position: 0px -48px; height:45px; width:250px; float:left; } #bottom { font:bold 10pt tahoma; color:#000000; background:url(buttons.gif) no-repeat ; background-position: 0px 0px; height:45px; width:250px; float:left; } </style> <div id="top" align="center"><br />المنطقة الاولى</div> <div id="center" align="center"><br />المنطقة الثانية</div> <div id="bottom" align="center"><br />المنطقة الثالثة</div>
والنتيجة راح تكون كالتالي
http://www.dzbatna.com/attachments/444400d1263339927-image2.gif
اذن استطعنا عرض 3 اقسام مختلفة من صورة واحدة كما قلنا في بداية الدرس مفصل
الفائدة ان الصفحة ستحمل صورة واحدة لمرة واحدة بدل 3 صور
مرفق لكم الدرس مفصل كامل
للي يجد انه لم يفهم جيدا يراجع الملفات المرفقة
وحياكم الله
نلقاكم ان شاء الله في دروس اخرى
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif Desktop.zip (http://www.traidnt.net/vb/attachments/444406d1263341035-desktop.zip) (5.5 كيلوبايت, عدد مرات المشاهدة 63 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
