أخطر درس للتعامل مع الصور بcss من معرض صور وسلايد شو واخفاء وأشياء كثيرة

rootshell · رقم المشاركة : ( 1 ) 02-07-2010, 09:23 PM

درس اجتهدت فيه أتمنى يعجبكم وجمعت فيه كل الاشياء المهمة

أولا: خلونا نعرف عن اى شىء راح نتكلم فى هذا الدرس.....

انظر للصورة :

#صورة1

التعامل مع الصور يعتبر من الأشياء المهمة وتحتاج لتدريب كثير فى استخدامها واخضاغها لاى شىء تريده فى الصفحة

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

اولا أكيد لو أنا عندى مجموعة من الصورة فأعتقد أننا راح نحتاجها فى هذه الاشياء فى الغالب................

1- كيفية وضع صورة فى الصفحة والتحكم فى أبعادها.
2-كيفية عمل خلفيات للصفحة بالصور فى صفحات الويب وتحديد أبعادها.
3-كيفية عمل مجموعة صور على هيئة معرض صور .
4-كيفية عمل سلايد شو للصور وتحريكها واحده تلو الأخر على حسب رغبتك.

الحين راح أبدأ معكم بشرح الأسهل فالأصعب........

1- كيفية وضع صورة فى الصفحة والتحكم فى أبعادها!

أكيد نعرف انه فى html اذا اردنا وضع صورة راح نضعها بين وسم img

مثال:

كود:

<img src="banner.jpg" alt="vista-design" width="100" height="90" />

والwidth والheight للتحكم فى أبعادها..

خلونا نأخذ مثال:

صفحة html

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <**** ************"content-type" content="text/html; charset=iso-8859-1"> <**** name="author" content=""> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <title>Untitled 1</title> </head> <body> <img src="banner.gif" /> </body> </html>

الحين نريد التغيير على هذه الصورة بتأثيرات مختلفة :

1-عمل خفوت على هذه الصورة بمجرد ابعاد الماوس عنها :

راح تصير الكود هيك وراح نستخدم امر الخفوت opacity
وامر عمل التأثير عند المرور بالماوس onmouseover

كود:

<img src="banner.gif" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

ولاحظ ان قيمة الopacity كلما قلت كلما زادت درجة الخفوت

واكبر درجة للخفوت هى 0.1 واقل درجه هى 0.9 الى ان لا يوجد خفوت بالقيمة 1

مثال عملى :

2-كيفية عمل الصورة وجعلها خلفية backgorund بكامل الصفحة .

هذه النقطة كثير جدا من المصممين المحترفين لا يعرفها

لانك لو جربت توضع صورة كخلفية بطريقة تقليدية
راح تجد واحد من المشاكل الأتية :

1- وجود فراغ فى الجزء العلوى للصفحة
2- عدم اكتمال الصورة كخلفية او اقتطاع جزء منها

لذلك لنحل هذه المشكلة مع صورة تريد وضعها كخلفية

استخدام الاتى :

كود html

كود:

<div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="vistaultimate.jpg" alt=""/> </td> </tr> </table> </div> </div>

مع ملاحظة تغيير رابط الصورة vistaultimate.jpg

كود css:

كود:

* { margin: 0; padding: 0; } html, body, #bg, #bg table, #bg td { height:100%; width:100%; overflow:hidden; } #bg { position: fixed; } #bg div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; } #bg td { text-align:center; vertical-align:middle; } #bg img { margin:0 auto; min-height:50%; min-width:50%; }

3- كيفية عمل معرض للصور ب css:

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

اولا: صفحة الhtml

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <**** ************"content-type" content="text/html; charset=windows-1256"> <**** name="author" content=""> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <title>معرض صور مٌبسط </title> </head> <body> <div class="img"> <a target="_blank" href="http://vistacompany.org/"> <img src="gal.jpg" alt="vista" width="200" height="250" /> </a> <div class="desc">أكتب اى شىء تحت الصورة هنا</div> </div> <div class="img"> <a target="_blank" href="http://vistacompany.org/"> <img src="gal.jpg" alt="vista" width="200" height="250" /> </a> <div class="desc">أكتب اى شىء تحت الصورة هنا</div> </div> <div class="img"> <a target="_blank" href="http://vistacompany.org/"> <img src="gal.jpg" alt="vista" width="200" height="250" /> </a> <div class="desc">أكتب اى شىء تحت الصورة هنا</div> </div> <div class="img"> <a target="_blank" href="http://vistacompany.org/"> <img src="gal.jpg" alt="vista" width="200" height="250" /> </a> <div class="desc">أكتب اى شىء تحت الصورة هنا</div> </div> </body> </html>

كود css:

كود:

body{ } div.img { margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:right; text-align:center; } div.img img { display:inline; margin:3px; border:1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; }

نشرح الأن كيف تعدل على المعرض مثل ما تحب.....

1- كيف تغير رابط الصورة الخاص بك:

كود:

<img src="gal.jpg" alt="vista" width="200" height="250" />

راح تغير ال gal.jpg للصورة اللى تريدها
ولا تنسى ابعادها وانك تكون عارفها حتى تغير الwidth والheight الخاص بها

أنوه ان alt فى الكود وظيفتها انه لو فرضا الصورة لم تظهر او كان رابطها خطأ , فراح يظهر مكان الصورة كلمة vista

2- كيف تضع رابط على الصورة؟

كود:

<a target="_blank" href="http://vistacompany.org/">

وتغير الرابط فى href برابط موقعك

3- لكتابة شىء أسفل الصورة؟

كود:

<div class="desc">أكتب اى شىء تحت الصورة هنا</div>

بهيك انتهينا من معرض الصور.........

مثال عملى:

4- كيفية عمل السلايد شو؟

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

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

اولا: جميع ملفات السلايد شو مرفقة بالموضوع...
ثانيا: لرؤية مثال عملى للسلايد شو

ثالثا: كيفية الأستخدام؟

اولا: افتح ملف الاندكس index.htm وراح تجد الكود الاتى بالصفحة :

كود:

<ul> <li><img alt="abc defrg thysu ooip jkifbtg fff" src="http://www.mtwer.com/vb/images/cortina_gray.jpg" /></li> <li><img alt="abc defrg thysu ooip jkifbtg fff" src="http://www.mtwer.com/vb/images/cortina_heaven.jpg" /></li> <li><img alt="abc defrg thysu ooip jkifbtg fff" src="http://www.mtwer.com/vb/images/cortina_hell.jpg" /></li> <li><img alt="abc defrg thysu ooip jkifbtg fff" src="http://www.mtwer.com/vb/images/cortina_leaf.jpg" /></li>  <li><img alt="abc defrg thysu ooip jkifbtg fff" src="http://www.mtwer.com/vb/images/cortina_olive.jpg" /></li> </ul>

كل ما عليك هو تغيير رابط الصورة فقط

وأنا ظبطت بقية ملفات السلايد شو وجعلتها جاهزة للعمل علطول
بدون حاجة للتعديل .......

بهيك نكون انتهينا من هذا الدرس المٌطول

المطلوب من الاعضاء :

1-عمل صورة كخلفية صفحة
2-عمل معرض صور خاص به
3-عمل سلايد شو خاص به

ونرجو من الجميع التطبيق

وحاول تكتب الاكواد بأيدك وتعرف كيف تعمل

فى النهاية : للتذكرة :

جميع الأمثلة والأكواد التى تم شرحها فى الدرس مرفقة فى الموضوع

1-ملف تغيير خلفية الصفحة وعمل خفوت على الصورة
2-ملف معرض الصور
3-ملف السلايد شو

حملها من هـــــــــــــــنا

أخوكم rootshell