salima
11-01-2013, بتوقيت غرينيتش 03:21 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط£ط®ط·ط± ط¯ط±ط³ ظ„ظ„طھط¹ط§ظ…ظ„ ظ…ط¹ ط§ظ„طµظˆط± ط¨css ظ…ظ† ظ…ط¹ط±ط¶ طµظˆط± ظˆط³ظ„ط§ظٹط¯ ط´ظˆ ظˆط§ط®ظپط§ط، ظˆط£ط´ظٹط§ط، ظƒط«ظٹط±ط© (http://www.dzbatna.com/t1463989/)
http://i44.tinypic.com/71mlgg.jpg
درس مفصل اجتهدت فيه أتمنى يعجبكم وجمعت فيه كل الاشياء المهمة
أولا: خلونا نعرف عن اى شىء راح نتكلم فى هذا الدرس مفصل.....
انظر للصورة :
#صورة1
http://i46.tinypic.com/2guff9w.jpg
التعامل مع الصور يعتبر من الأشياء المهمة وتحتاج لتدريب كثير فى استخدامها واخضاغها لاى شىء تريده فى الصفحة
وأنا سوف أعتمد فى درس مفصلنا على سهولة الشرح طريقة وكيف تحقق طلبك من اى صورة تريدها.....
اولا أكيد لو أنا عندى مجموعة من الصورة فأعتقد أننا راح نحتاجها فى هذه الاشياء فى الغالب................
1- كيفية وضع صورة فى الصفحة والتحكم فى أبعادها.
2-كيفية عمل خلفيات للصفحة بالصور فى صفحات الويب وتحديد أبعادها.
3-كيفية عمل مجموعة صور على هيئة معرض صور .
4-كيفية عمل سلايد شو للصور وتحريكها واحده تلو الأخر على حسب رغبتك.
الحين راح أبدأ معكم بشرح طريقة الأسهل فالأصعب........
1- كيفية وضع صورة فى الصفحة والتحكم فى أبعادها!
أكيد نعرف انه فى html اذا اردنا وضع صورة راح نضعها بين وسم img
مثال:
رمز Code:
<img src="banner.jpg" alt="vista-design" width="100" height="90" />
والwidth والheight للتحكم فى أبعادها..
خلونا نأخذ مثال:
صفحة html
رمز Code:
<!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-عمل خفوت على هذه الصورة بمجرد ابعاد الماوس عنها :
راح تصير الكود code هيك وراح نستخدم امر الخفوت opacity
وامر عمل التأثير عند المرور بالماوس onmouseover
رمز Code:
<img src="banner.gif" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.al pha.opacity=40" />
ولاحظ ان قيمة الopacity كلما قلت كلما زادت درجة الخفوت
واكبر درجة للخفوت هى 0.1 واقل درجه هى 0.9 الى ان لا يوجد خفوت بالقيمة 1
مثال عملى :
http://i49.tinypic.com/2evug6v.jpg
(http://advphp.com/web2/img/)
2-كيفية عمل الصورة وجعلها خلفية backgorund بكامل الصفحة .
هذه النقطة كثير جدا من المصممين المحترفين لا يعرفها
لانك لو جربت توضع صورة كخلفية بطريقة تقليدية
راح تجد واحد من المشاكل الأتية :
1- وجود فراغ فى الجزء العلوى للصفحة
2- عدم اكتمال الصورة كخلفية او اقتطاع جزء منها
لذلك لنحل هذه المشكلة مع صورة تريد وضعها كخلفية
استخدام الاتى :
كود code html
رمز Code:
<div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="vistaultimate.jpg" alt=""/> </td> </tr> </table> </div> </div>
مع ملاحظة تغيير رابط الصورة vistaultimate.jpg
كود code css:
رمز Code:
* { 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
رمز Code:
<!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>
كود code css:
رمز Code:
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- كيف تغير رابط الصورة الخاص بك:
رمز Code:
<img src="gal.jpg" alt="vista" width="200" height="250" />
راح تغير ال gal.jpg للصورة اللى تريدها
ولا تنسى ابعادها وانك تكون عارفها حتى تغير الwidth والheight الخاص بها
أنوه ان alt فى الكود code وظيفتها انه لو فرضا الصورة لم تظهر او كان رابطها خطأ , فراح يظهر مكان الصورة كلمة vista
2- كيف تضع رابط على الصورة؟
رمز Code:
<a target="_blank" href="http://vistacompany.org/">
وتغير الرابط فى href برابط موقعك
3- لكتابة شىء أسفل الصورة؟
رمز Code:
<div class="desc">أكتب اى شىء تحت الصورة هنا</div>
بهيك انتهينا من معرض الصور.........
مثال عملى:
http://i49.tinypic.com/2evug6v.jpg
(http://advphp.com/web2/gal/)
4- كيفية عمل السلايد شو؟
طبعا السلايد شو من أروع الاشياء التى تلفت الانتباه وتعطى انطباع رائع للموقع والبرمجية المستخدمة فيه
حقيقة يوجد الكثير من السلايد شو المختلفة التى يمكن استخدامها
ومن الأروع دمج مكتبة الjquery الرائعة معها لتضفى لمسة رائعة
على السلايد شو
وراح أعيطكم أفضل أنواع السلايد شو وشرح طريقة كيفية استخدامه....
اولا: جميع ملفات السلايد شو مرفقة بالموضوع...
ثانيا: لرؤية مثال عملى للسلايد شو
http://i49.tinypic.com/2evug6v.jpg
(http://advphp.com/web2/slideshow/)
ثالثا: كيفية الأستخدام؟
اولا: افتح ملف الاندكس index.htm وراح تجد الكود code الاتى بالصفحة :
رمز Code:
<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> <!-- eccetera --> <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-ملف السلايد شو
أخوكم vista-design
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif خلفية وصوره خفوت.zip (http://www.traidnt.net/vb/attachments/452689d1265463245-خلفية-وصوره-خفوت.zip) (267.1 كيلوبايت, عدد مرات المشاهدة 102 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif معرض الصور.zip (http://www.traidnt.net/vb/attachments/452690d1265463245-معرض-الصور.zip) (25.8 كيلوبايت, عدد مرات المشاهدة 48 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif سلايدشو.zip (http://www.traidnt.net/vb/attachments/452691d1265463245-سلايدشو.zip) (140.0 كيلوبايت, عدد مرات المشاهدة 178 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://i44.tinypic.com/71mlgg.jpg
درس مفصل اجتهدت فيه أتمنى يعجبكم وجمعت فيه كل الاشياء المهمة
أولا: خلونا نعرف عن اى شىء راح نتكلم فى هذا الدرس مفصل.....
انظر للصورة :
#صورة1
http://i46.tinypic.com/2guff9w.jpg
التعامل مع الصور يعتبر من الأشياء المهمة وتحتاج لتدريب كثير فى استخدامها واخضاغها لاى شىء تريده فى الصفحة
وأنا سوف أعتمد فى درس مفصلنا على سهولة الشرح طريقة وكيف تحقق طلبك من اى صورة تريدها.....
اولا أكيد لو أنا عندى مجموعة من الصورة فأعتقد أننا راح نحتاجها فى هذه الاشياء فى الغالب................
1- كيفية وضع صورة فى الصفحة والتحكم فى أبعادها.
2-كيفية عمل خلفيات للصفحة بالصور فى صفحات الويب وتحديد أبعادها.
3-كيفية عمل مجموعة صور على هيئة معرض صور .
4-كيفية عمل سلايد شو للصور وتحريكها واحده تلو الأخر على حسب رغبتك.
الحين راح أبدأ معكم بشرح طريقة الأسهل فالأصعب........
1- كيفية وضع صورة فى الصفحة والتحكم فى أبعادها!
أكيد نعرف انه فى html اذا اردنا وضع صورة راح نضعها بين وسم img
مثال:
رمز Code:
<img src="banner.jpg" alt="vista-design" width="100" height="90" />
والwidth والheight للتحكم فى أبعادها..
خلونا نأخذ مثال:
صفحة html
رمز Code:
<!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-عمل خفوت على هذه الصورة بمجرد ابعاد الماوس عنها :
راح تصير الكود code هيك وراح نستخدم امر الخفوت opacity
وامر عمل التأثير عند المرور بالماوس onmouseover
رمز Code:
<img src="banner.gif" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.al pha.opacity=40" />
ولاحظ ان قيمة الopacity كلما قلت كلما زادت درجة الخفوت
واكبر درجة للخفوت هى 0.1 واقل درجه هى 0.9 الى ان لا يوجد خفوت بالقيمة 1
مثال عملى :
http://i49.tinypic.com/2evug6v.jpg
(http://advphp.com/web2/img/)
2-كيفية عمل الصورة وجعلها خلفية backgorund بكامل الصفحة .
هذه النقطة كثير جدا من المصممين المحترفين لا يعرفها
لانك لو جربت توضع صورة كخلفية بطريقة تقليدية
راح تجد واحد من المشاكل الأتية :
1- وجود فراغ فى الجزء العلوى للصفحة
2- عدم اكتمال الصورة كخلفية او اقتطاع جزء منها
لذلك لنحل هذه المشكلة مع صورة تريد وضعها كخلفية
استخدام الاتى :
كود code html
رمز Code:
<div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="vistaultimate.jpg" alt=""/> </td> </tr> </table> </div> </div>
مع ملاحظة تغيير رابط الصورة vistaultimate.jpg
كود code css:
رمز Code:
* { 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
رمز Code:
<!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>
كود code css:
رمز Code:
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- كيف تغير رابط الصورة الخاص بك:
رمز Code:
<img src="gal.jpg" alt="vista" width="200" height="250" />
راح تغير ال gal.jpg للصورة اللى تريدها
ولا تنسى ابعادها وانك تكون عارفها حتى تغير الwidth والheight الخاص بها
أنوه ان alt فى الكود code وظيفتها انه لو فرضا الصورة لم تظهر او كان رابطها خطأ , فراح يظهر مكان الصورة كلمة vista
2- كيف تضع رابط على الصورة؟
رمز Code:
<a target="_blank" href="http://vistacompany.org/">
وتغير الرابط فى href برابط موقعك
3- لكتابة شىء أسفل الصورة؟
رمز Code:
<div class="desc">أكتب اى شىء تحت الصورة هنا</div>
بهيك انتهينا من معرض الصور.........
مثال عملى:
http://i49.tinypic.com/2evug6v.jpg
(http://advphp.com/web2/gal/)
4- كيفية عمل السلايد شو؟
طبعا السلايد شو من أروع الاشياء التى تلفت الانتباه وتعطى انطباع رائع للموقع والبرمجية المستخدمة فيه
حقيقة يوجد الكثير من السلايد شو المختلفة التى يمكن استخدامها
ومن الأروع دمج مكتبة الjquery الرائعة معها لتضفى لمسة رائعة
على السلايد شو
وراح أعيطكم أفضل أنواع السلايد شو وشرح طريقة كيفية استخدامه....
اولا: جميع ملفات السلايد شو مرفقة بالموضوع...
ثانيا: لرؤية مثال عملى للسلايد شو
http://i49.tinypic.com/2evug6v.jpg
(http://advphp.com/web2/slideshow/)
ثالثا: كيفية الأستخدام؟
اولا: افتح ملف الاندكس index.htm وراح تجد الكود code الاتى بالصفحة :
رمز Code:
<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> <!-- eccetera --> <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-ملف السلايد شو
أخوكم vista-design
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif خلفية وصوره خفوت.zip (http://www.traidnt.net/vb/attachments/452689d1265463245-خلفية-وصوره-خفوت.zip) (267.1 كيلوبايت, عدد مرات المشاهدة 102 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif معرض الصور.zip (http://www.traidnt.net/vb/attachments/452690d1265463245-معرض-الصور.zip) (25.8 كيلوبايت, عدد مرات المشاهدة 48 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif سلايدشو.zip (http://www.traidnt.net/vb/attachments/452691d1265463245-سلايدشو.zip) (140.0 كيلوبايت, عدد مرات المشاهدة 178 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
