بسم الله الرحمن الرحيم
الحمد لله رب العالمين, والصلاة والسلام على سيدنا محمد الصادق الوعد الأمين, اللهم لا علم لنا إلا ما علمتنا إنك أنت العليم الحكيم, اللهم علمنا ما ينفعنا, وانفعنا بما علمتنا, وزدنا علماً, وأرنا الحق حقاً, وارزقنا اتباعه, وأرنا الباطل باطلاً, وارزقنا اجتنابه, واجعلنا ممن يستمعون القول فيتبعون أحسنه, وأدخلنا برحمتك في عبادك الصالحين .
اللهم آمين
بعد بسم الله الرحمن الرحيم :
اليوم ساقدم لكم مشروع بسيط بعدة لغات وهي Html & Css & java script
طبعا اعرفا نه يوجد اشخاص كثير مستوى هذا المشروع صغير عليهم فخبرتهم اكبر من ذلك بكثير ولكن عن نفسي كنت اتمنى ان اجد مثل هذا الشرح طريقة لكي اتعلم منه فانا عائقي هو الانتقال من التعلم الى التنفيذ
ولله الحمد استطعت ان اصمم هذا المشروع الصغير من الصفر ودون حاجة او مساعدة احد ةهذا من فضل ربيي ومما علمني
اقتباس
ملاحظة بسيطة : انا كتب وجهزت هالموضوع والشرح طريقة
من قبل لان من شهر ونص ما عنا انترنت بحمص
مافي غي رعالموبايل وانا رح نزلو عن طريق الموبايل وبعرف رح يعذبني كتير
واذا في شي نقص انا بعتذر وان شاء الله بس اقدر احصل على انترنت سريع
رح ارفع المشروع امل مع الصفحات كاملة والصور
المشروع عبارة عن ثلاث اقسام
وهو عبارة عن موقع للألعاب مثلا او للأفلام او عرض منتج pluginات او .......
كل شخص يستطيع تغيير بما يريد به وما وضعته إلا رغبة في نشر العلم
وهو مقسم الى اربعة اقسام
القسم الاول وهي الواجهة interface الرئيسية
القسم الثاني الاقسام الداخلية
القسم الثالث المواضيع التي بداخل لاقسام
والرابع صفحة الاتصال والتواصل
صفحة الاتصال تحتاج الى php لكي تعمل ولكنني تركتهها لعدم كفابة علمي بها واتمنا من اي شخص ان يطورها ويشرح طريقةها لنا
نبدأ بعون الله :
ساضع الصفحة والمثال ثم الكود code وبعده الشرح طريقة وقد تجد اخي العزيز انيي اشرح طريقة اشياء بسيطة ولكنني احب ان اشرح طريقة كل شيئ لكي لا يواجه احد مشاكل واي سؤال انا حاضر وستجد اخي ان هناك بعض الاخطاء مثل :
اولا هناك صفات واضعها مباشرة في html وليس في css وانا قصدت ذلك لان هناك اناس لم تتعلم ال css بعد
يارب
اولا الصفحة الرئيسية وهي واجهة interface الموقع
الكود code :
رمز Code:
<html> <head> <!-- Title --> <title>BEST MOVIES 2014</title> <!-- meta --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- javascript --> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/custom.js" type="text/javascript"></script> <script src="js/js.js" type="text/javascript"></script> <!-- CSS --> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <!-- body page --> <body bgcolor="#333300" text="#FFFFFF" background="images/1.gif"> <!-- الترويسة --> <h1 ><center>BEST MOVIES 2014</center></h1> <marquee alien="center" bgcoloe="red" loof="10" hspace="4" vspace="4"> Coding and Desebin By :FENIX </marquee><br /> <!-- الافلام --> <br /><table cellpadding="4" cellspacing="4" align="center" border="3" background="images/body.gif"> <!-- Animation Movies --> <tr> <td align="center"><p>Animation Movies </p> <br /><a href="Animation/index.html" target="_self" title="Animation"><img src="Animation/index.jpg" width="33%" height="33%" /></a> </td> <!-- Action Movies --> <td align="center"><p>Action Movies</p> <br /><a href="Action/index.html" target="_self" title="Action movies"><img src="Action/index.jpg" width="33%" height="33%" /></a> </td> <!-- Romance & comedian --> <td align="center"><p>Romance & comedian</p> <br /><a href="Romance & comedian/index.html" target="_self" title="Romance & comedian"><img src="Romance & comedian/index.jpg" width="33%" height="33%" /></a> </td> </tr> </table> <br /> <table align="center"> <tr> <td> <a href="Contact.html"><img class="con" /></a></td> </tr> </table> <!-- نهاية الجدول --> <br /> <span style="color: red"><center>Coding and Desebin By : FENIX <sup>®</sup></center></span> <br /> </body> </html>
بعون اله سأبدأ بشرح طريقة الاكواد :
اولا الهيد
رمز Code:
<html> <head> <!-- Title --> <title>BEST MOVIES 2014</title> <!-- meta --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- javascript --> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/custom.js" type="text/javascript"></script> <script src="js/js.js" type="text/javascript"></script> <!-- CSS --> <link href="css.css" rel="stylesheet" type="text/css" /> </head>
سنبدأ باول سطر :
رمز Code:
<title>BEST MOVIES 2014</title>
وهو عنوان المشروع
رمز Code:
<!-- meta --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
وهنا الترميز الخاص ووضعته بالترميز العالمي utf -8
الن بعد ذلك ضمنت ثلالث ملفات وهي
رمز Code:
<!-- javascript --> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/custom.js" type="text/javascript"></script> <script src="js/js.js" type="text/javascript"></script>
وهي ملفات جيكويري من اجل الحركات وسنشرح طريقةها عندما ياتي دورها
وبعد ذلك باستدعاء ملف css من اجل التصميم
رمز Code:
<link href="css.css" rel="stylesheet" type="text/css" />
وسأشرح طريقةه بعون الله
الى هنا انتهينا من الهيد
رمز Code:
</head>
ناتي الان الى جسم الصفحة اي الي البدي
رمز Code:
<body>
رمز Code:
<body bgcolor="#333300" text="#FFFFFF" background="images/1.gif">
الان هنا لم استخدم css فيه حيث وضعت لون للخلفية #333300
ولون للخط #FFFFFF
وصورة للخلفية
background="images/1.gif"
رمز Code:
<h1 >BEST MOVIES 2014</h1>
وهنا الترويسة والتي ستكون عنوان الصفحة ووضعتها بوسم h1
من اجل ان يكون حجمها كبير
الان في ال css الخاص بال body
رمز Code:
body{ font-family: "Hobo Std"; font-size: 14px; border: 10px 10px 10px 10px; }
الخط المستخدم من نوع :Hobo Std
وحجم الخط بالبكسل 14
والتباعدات 10بكسل من كل الاطراف
رمز Code:
h1{ color:red; text-align: center;
هنا من اجل الترويسة
اللون احمر
وجعل المحاذاة في وسط الصفحة
الان
رمز Code:
<marquee alien="center" loof="10" hspace="4" vspace="4"> Coding and Desebin By :FENIX </marquee><br />
وسم marquee قد لا يعرفه اغلبنا وهو وصف قديم يستخدم لجعل النص متحرك واستخدمت فيه عدة صفات مثل
alien="center" : المحاذاة في الوسط
loof="10" عدد مرات التكرار
hspace="4" التباعد الافقي
vspace="4 التباعد العامودي
وافي ملف ال css استخدمت له
رمز Code:
marquee{ color: blue; direction: rtl; margin: 10px 0px 20px 0px; }
اللون ازرق
والمسار من اليمين الى اليسار
والمرجين 10px 0px 20px 0px
الان سنبدأ بمحتوى المشروع
قبل وضع الكود codeات ساعطي الفكرة
قمت بإنشاء جدول عبارة عن 3 اعمدة فقط وكل جدول سيكون للدخول الى قسم خاص
في الجدول قسمين الاول وسيكون العنوان وسيكون ترويسة H2
وفي الاسفل صورة عن الضغط عليها سيدخل الى القسم
لنشاهد الكود codeات
رمز Code:
<br /><table cellpadding="4" cellspacing="4" align="center" border="3" background="images/body.gif">
استخدمت وسم table ومعه الخصائص التالية :
cellpadding="4" و ellspacing="4"
يمكن وضع 3 ب 1 ولكن وضعته 4 من اجل اذا احب احد اي يضع اكثر من ثلاثة اقسام
سنبدء باول قسم والاقسام الثانية مشابهة تماما له
رمز Code:
<!-- Animation Movies --> <tr> <td align="center"><p>Animation Movies </p> <br /><a href="Animation/index.html" target="_self" title="Animation"><img src="Animation/index.jpg" width="33%" height="33%" /></a> </td> <!-- Action Movies --> <td align="center"><p>Action Movies</p> <br /><a href="Action/index.html" target="_self" title="Action movies"><img src="Action/index.jpg" width="33%" height="33%" /></a> </td>
سأبدء بالعنوان
رمز Code:
<td align="center"> <p>Animation Movies </p>
جعلت المحاذاة بالوسط
ووضعت الاسم بين وسمي p
وفي ملف css استخدمت
رمز Code:
p{ padding:2%; display: block; background-image: url(images/2.gif); height: 33px; background-repeat: repeat-x; }
والهوفر
البايدنغ 2 في المية
وجعلته بلوك
وضعت صورة للخللفية
مع التكرار على x
ووحددت الارتفاع بقدر 33 بكسل
جعلت له هوفر عن مرور الماوس
رمز Code:
p:hover{ color: #0099FF; background-image: url(images/4.gif); background-repeat: repeat-x; }
غيرت من الللون الى #0099FF
ووضعت رابط صورة الخلفية الجديدة
ووضعت التكرار على x
الان انتهينا من العنوان وسننتقل الى الصورة التي ستدخانا الى القسم عند الضغط عليها
رمز Code:
<br /><a href="Animation/index.html" target="_self" title="Animation"><img src="Animation/index.jpg" width="33%" height="33%" /></a>
وضع اولا وسم الرابط وهو <a>
وفي خياراته href وضعت رابط الذي اريد التوجه الليه عند الضغط
target="_self"
لكي يتم الفتح في نفس الصفحة ويمكن الاستغناء عنه
title
وهي للعنوان ويمكن استبدالها بالوسم alt
حيث عند تعذر الوصول للصورة يظهر
انتهينا من وسم لرابط <a>
الان الصورة وضعتها داخل للينك
استخدمت وصف الصورة <img>
وفيه الخصائص التالية src وهي رابط الصورة
width العرض
hieght الطول
وهكذا انتهينا من اول قسم
والااقسام الثانية مثلها
الان انتهينا من الجدول
رمز Code:
</table>
الان عملت جدول صغير لكي اضع به الاتصال بنا وهو خانة واحدة بها صورة واحدة
رمز Code:
<table align="center"> <tr> <td> <a href="Contact.html"><img class="con" /></a></td> </tr> </table>
وكما ترون الوصوق بسيطة ولكن
مع وسم ال img وضعت كلاس اسميته con
استدعيته في ملف الcss
رمز Code:
.con{ background-image: url(images/aa.png); height: 60px; width: 193px; }
جعلت صورة للخلفية
حددت الارتفاع والطول
وجعلت للصورة هوفر
رمز Code:
.con:hover{ background-image: url(images/bb.png); height: 60px; width: 193px; }
حيث عند مرور الماوس تظهر الصورة الثانية
الان الحقوق في الفوتور
رمز Code:
<span style="color: red"><center>Coding and Desebin By :FENIX <sup>®</sup></center></span>
استخدمت هنا عدو وسوم منها
span من اجل الفقرات ووضعت له في ال css خصائص هي
رمز Code:
span{ background-image: url(images/3.gif); background-repeat: repeat-x; }
الى هنا انتهينا من الصفحة الرئيسية
رمز Code:
<br /> </body> </html>
ولكن يجب ان اشرح طريقة وسم داخل ال css
ونا استخدمت لا css3
حيث جعلت ترانسفير للصورة
واستخدمت وسم ال sup لرفع الاشارة اعلا من النص
رمز Code:
img{-moz-transition: all 1.1s ease-in-out; -webkit-transition: all 1.1s ease-in-out; -o-transition: all 1.1s ease-in-out; -ms-transition: all 1.1s ease-in-out; transition: all 1.1s ease-in-out; border: medium; display: table; width: 300px; height: 500px; margin:-5px -5px 10px -5px; }
وجعلت هوفر من اجل التدوير
رمز Code:
img:hover{ -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); box-shadow: 0 0px 20px #000; border: medium; display: table; width: 300px; height: 500px; margin:-5px -5px 10px -5px; }
حيث جعلت الدوران بزاوية 45 درجة
هنا انتهيا من الصفحة الرئيسية الان سوف ننتقل الى الالقسام
وساشرح طريقة قسم لان لاقسام الثانية مشابهة له تماما ارجو من لله التوفيق
اولا الصفحة
رمز Code:
<html> <head> <!-- Title --> <title>BEST AcTion MOVIES 2014</title> <!-- meta --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- javascript --> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/custom.js" type="text/javascript"></script> <script src="../js/js.js" type="text/javascript"></script> <link href="../css.css" rel="stylesheet" type="text/css" /> <!-- CSS --> </head> <!-- body page --> <body bgcolor="#333300" text="#FFFFFF" background="1.gif"> <!-- الترويسة --> <h1 ><center>BEST AcTion MOVIES 2014</center></h1> <!-- الافلام --> <table cellpadding="4" cellspacing="4" align="center" border="3" background="body.gif"> <tr> <td> <a href="../Romance & comedian/index.html"><img class="memo1" /></a></td> <td> <center> <a href="../index.html"><img class="memo2" /></a> </center> </td> <td> <a href="../Animation/index.html"><img class="memo3" /></a> </td> </tr> <!-- الصف الاول --> <tr> <td align="center"><p>INCEPTION 2014</p> <br /><a href="INCEPTION.html" target="_self" title="INCEPTION 2014"><img src="INCEPTION 2014/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>Killer Elite 2014</p> <br /><a href="Killer.html" target="_self" title="Killer Elite 2014"><img src="Killer Elite 2014/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>Let Me In 2014</p> <br /><a href="Let.html" target="_self" title="Let Me In 2014"><img src="Let Me In 2014/poster.jpg" width="33%" height="33%" /></a> </td> </tr> <!-- الصف الثاني --> <tr> <td align="center"><p>Percy Jackson and the Olympians (2014)</p> <br /><a href="parcy.html" target="_self" title="Percy Jackson and the Olympians (2014)"><img src="Percy Jackson and the Olympians (2014)/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>Red 2014</p> <br /><a href="Red.html" target="_self" title="Red 2014"><img src="Red/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>saw</p> <br /><a href="saw.html" target="_self" title="saw"><img src="saw/poster.jpg" width="33%" height="33%" /></a> </td> </tr> <!-- الصف الثالث --> <tr> <td align="center"><p>Shutter Island (2014)</p> <br /><a href="Shutter.html" target="_self" title="Shutter Island (2014)"><img src="Shutter Island (2014)/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>Stonehenge Apocalypse JA</p> <br /><a href="Stonehenge.html" target="_self" title="Stonehenge Apocalypse JA"><img src="Stonehenge Apocalypse JA/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>The Expendables</p> <br /><a href="The Expendables.html" target="_self" title="The Expendables"><img src="The Expendables/poster.jpg" width="33%" height="33%" /></a> </td> </tr> <!-- الصف الرابع --> <tr> <td align="center"><p>THE PUNISHER </p> <br /><a href="THE PUNISHER.html" target="_self" title="THE PUNISHER"><img src="THE PUNISHER/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>The Sorcerer and the White Snake 2014</p> <br /><a href="The Sorcerer.html" target="_self" title="The Sorcerer and the White Snake 2014"><img src="The Sorcerer and the White Snake 2014/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>THE SORCERER'S APPRENTICE</p> <br /><a href="THE SORCERER'S.html" target="_self" title="THE SORCERER'S APPRENTICE"><img src="THE SORCERER'S APPRENTICE/poster.jpg" width="33%" height="33%" /></a> </td> </tr> <!-- الصف الخامس --> <tr> <td align="center"><p>The Tourist 2014</p> <br /><a href="The Tourist.html" target="_self" title="The Tourist 2014"><img src="The Tourist 2014/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>TRANSPOTER</p> <br /><a href="TRANSPOTER.html" target="_self" title="TRANSPOTER"><img src="TRANSPOTER/poster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>Undisputed 3 Redemption 2014</p> <br /><a href="Undisputed.html" target="_self" title="Undisputed 3 Redemption 2014"><img src="Undisputed 3 Redemption 2014/poster.jpg" width="33%" height="33%" /></a> </td> </tr> </table> <!-- نهاية الجدول --> <br /> <span style="color: red"><center>Coding and Desebin By : Mohamad Khalaf <sup>®</sup></center></span> <br /> </body> </html>
اولا الهيد
رمز Code:
<html> <head> <!-- Title --> <title>BEST ANIMATION MOVIES 2014</title> <!-- meta --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- javascript --> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/custom.js" type="text/javascript"></script> <script src="../js/js.js" type="text/javascript"></script> <link href="../css.css" rel="stylesheet" type="text/css" /> <!-- CSS --> </head>
سبق وان شرح طريقةته في الرئيسية ولكن هنا يوجد شيئ اريد شرح طريقةه مثلا
رمز Code:
<link href="../css.css" rel="stylesheet" type="text/css" />
وضعت في الرابط نقطتين ثم سلاش ثو الملف
واقصدب ../
ان يعود مجلد الى الخلف لكي يستدعي الملف
فانا وضعت ملف ال css في المجلد الرئيسي وليس في مجلد القسم
نبدأ بجسم الصفحة اي
رمز Code:
<body bgcolor="#333300" text="#FFFFFF" background="1.gif">
بسيطة وجميلة وتم شرح طريقةها منذ قليل
الان ترويسة القسم اي العنوان القسم
رمز Code:
<h1 ><center>BEST AcTion MOVIES 2014</center></h1>
تم شرح طريقةه ولكن اريد التنويه لمن يعرف css لن يحتاج وسم center
لان في تعرف ال css للوسك h1 وضعت
رمز Code:
h1{ color:red; text-align: center; }
نبدء بالصفحة
عملت جدول هنا عبارة عن 15 موضوع
3 مواضيع بالعرض و 5 بالطول
رمز Code:
<table cellpadding="4" cellspacing="4" align="center" border="3" background="../images/body.gif">
والكود code تم شرح طريقةه
جعلت البوردر 3 من اجل ان يظهر الجدول
الان هناك في بداية الجدول 3 ازرار
الاول يأخذك للقسم السابق
الثاني ياخذك للرئيسية التي تحوي الاقسام
الثالث ياخذك للقسم التالي
رمز Code:
<tr> <td> <a href="../Romance & comedian/index.html"><img class="memo1" /></a></td> <td> <center> <a href="../index.html"><img class="memo2" /></a> </center> </td> <td> <a href="../Action/index.html"><img class="memo3" /></a> </td> </tr>
الان سناخذ اول واحد وهو القسم السابق
رمز Code:
<td> <a href="../Romance & comedian/index.html"><img class="memo1" /> </a> </td>
الكود code بسيط جدا ومشابه للكود code الذي استخدمناه في الرئيسية حيث وضعنا رابط الى صورة والرابط هو رابط القسم السابق
وهنا وضعنا كلاس للصورة class="memo1"
اما خصائصه في ال css فهي
:
رمز Code:
.memo1{ background-image: url(images/last.png); height: 33px; width: 142px; float: left; background-repeat: no-repeat; border: 0px; margin: auto; }
وضعت به صورة للخلفيه وارتفاع وعرض ووضعت تكرار للخلفيه على x
ولم اضع بوردر جعلت قيمته 0 والتباعد تلقائس ولكن هنا وضعت
float: left;
حيث اجبرت العنصر على ان يكون في الجهة اليسرى
ووضعت هوفر
رمز Code:
.memo1:hover{ background-image: url(images/last2.png); height: 33px; width: 142px; float: left; background-repeat: no-repeat; margin: auto; }
اما الرئيسية فهو كالتالي
رمز Code:
<center> <a href="../index.html"><img class="memo2" /></a> </center>
وهي الرئيسية وخصائص ال css
رمز Code:
.memo2{ background-image: url(images/home.png); height: 33px; width: 142px; background-repeat: no-repeat; border: 0px; margin: auto; }
نفس الكود code السابق لكن هنا لم الزمه ان ياخذ اليسار او على اليمين فقد استخدمت في اهمتل <center>
وطبعا هوفر مع تغير الصورة
رمز Code:
.memo2:hover{ background-image: url(images/home2.png); height: 33px; width: 142px; background-repeat: no-repeat; margin: auto; }
الان الى زر القسم التالي
رمز Code:
<td> <a href="../Action/index.html"><img class="memo3" /></a>
اصبح لكم واضح وبسيط وهذه خصائص كلاس الصورة مع الهوفر
رمز Code:
.memo3{ background-image: url(images/next.png); height: 33px; width: 142px; background-repeat: no-repeat; border: 0px; float: right; margin: auto; } .memo3:hover{ background-image: url(images/next2.png); height: 33px; width: 142px; background-repeat: no-repeat; margin: auto; float: right; }
ولكن هنا جعلت float:right;
اي جعلته ان يكون على اليمين اجباري
انتهينا من الازرار ناتي الان الى المواضيع
اظن انن الجميع عرف كيف ساعمل المواضيع
ممتاز :
جدول + رابط + صورة
وهذه نهاية صفحة الموضوع
ههههههههه بسيط جدا فلننظر الى الكود code
رمز Code:
<!-- الصف الاول --> <tr> <td align="center"><p>Alvin and the Chipmunks The Squeakque</p> <br /><a href="alvin.html" target="_self" title="Alvin 2014"><img src="Alvin and the Chipmunks The Squeakquel/2.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>BRAVE 212</p> <br /><a href="BRAVE.html" target="_self" title="BRAVE 2014"><img src="BRAVE/boster.jpg" width="33%" height="33%" /></a> </td> <td align="center"><p>Frankenweenie</p> <br /><a href="frankenweenie.html" target="_self" title="frankenweenie 2014"><img src="frankenweenie/poster.jpg" width="33%" height="33%" /></a> </td> </tr> <!-- نهاية الصف الاول -->
بسيط جدا ولكن احب ان اشير انني في ملف ال css
قد ضبطت مقاس جميع الصور
رمز Code:
width: 300px; height: 500px;
لان كل صورة لها مقاس وابعاد مختلفة لذلك وحدت جميع المقاسات
الا انتهينا من صفحة المواضيع فجميع الموااضيع كالسابق تماما
الان ننتقل الى صفحة الموضوع الداخلية
الصفحة بسيطة عبارة عن صفحة بها صور متنوعة لمحتوى الموضوع ووصف وتحميل وفي النهاية 3 ازرار مثل الازرار السابقة
الزر الاول الانتقال للموضوع السابق وليس للقسم السابق
والزر الثاني للعودة للقسم
والزر السابق للموضوع التالي
رمز Code:
<html> <head> <title>Alvin and the Chipmunks The Squeakque</title> <!-- javascript --> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/custom.js" type="text/javascript"></script> <script src="../js/js.js" type="text/javascript"></script> <link href="../css topic.css" rel="stylesheet" type="text/css" /> </head> <body bgcolor="#333300" text="#FFFFFF" background="../images/3.gif"> <h2>Alvin and the Chipmunks The Squeakque</h2> <br /> <center> <table cellpadding="1" cellspacing="1" align="center" border="1" background="../images/body topic.gif" width="60%"> <tr> <td> <img src="Alvin and the Chipmunks The Squeakquel/2.jpg"/> <h3> <center>Alvin and the Chipmunks The Squeakque</center> </h3> <span> <h4><center>THis movie toking about 5 mousees sing a song ....<br /> Movie rate :7/10 from Imdb</center></h4> <br /> </span> <center> Screen shot :<br /><br /> <img src="Alvin and the Chipmunks The Squeakquel/1.jpg"/> <br /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <br /><br /> <img src="Alvin and the Chipmunks The Squeakquel/3.jpg"/> <h4>You Can Download This Moive Free from Here <br /> Just Click download now image </h4> <br /> <br /> <a href="#">DoWnlOad Now</a></center> </td> </tr> </table> </center> <table cellpadding="3" cellspacing="3" width="100%"> <tr> <td><a href="WALL·E.html"><img class="memo1" /></a></td> <td><a href="index.html"><img class="memo2" /></a></td> <td><a href="Barnyard.html"><img class="memo3" /></a></td> </tr> </table> </body> </html>
سنبدء بالازرار وهي كالتالي :
رمز Code:
<table cellpadding="3" cellspacing="3" width="100%"> <tr> <td><a href="WALL·E.html"><img class="memo1" /></a></td> <td><a href="index.html"><img class="memo2" /></a></td> <td><a href="Barnyard.html"><img class="memo3" /></a></td> </tr> </table>
قد تسال لماذا وضعتهم في جدول
السبب في ذلك من اجل تحديد الاماكن فمثلا لزرا الاول سيكون على آخر يسار الخلية الاولى
والثاني في وسط الخلية الثانية
والثالث على يمين الخلية الثالثة
وتعاريف ال css نفسها
الصفحة بسيطة جدا وقم شرح طريقة جميع محتواها من خلال الاقسام السابقة
وبها خصائص css مثل
رمز Code:
a{ color: #FF0066; border: 10px 10px 10px 10px; font-size: 20px; } a:hover{ color: #FFFFFF; }
وهي للروابط
اما الجدول فوضع ميرجن تلقائي
رمز Code:
table{ margin: auto; }
وهكذا تم الانتهاء من شرح طريقة جميع الصفحات والاقسام والرئيسية
الان ساشرح طريقة صفحة الاتصال Contact.html
رمز Code:
<html dir="rtl"> <head> <!-- Title --> <title>Do you Need some One else ???</title> <!-- meta --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- javascript --> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/custom.js" type="text/javascript"></script> <script src="js/js.js" type="text/javascript"></script> <!-- CSS --> <link href="css Contact.css" rel="stylesheet" type="text/css" /> <!-- css social --> <link href="soc.css" rel="stylesheet" type="text/css" /> <!-- css social --> </head> <!-- body --> <body bgcolor="#333300" text="#FFFFFF" background="images/1.gif"> <script language="javascript"> alert ("مرحبا بك عزيزنا الزائر في صفحة الطلبات فقط املأ البيانات التالية ونحن في خدمتك"
function S(){ alert ("شكرا ... سيتم تلبية طلبك في اقرب وقت ممكن رضائكم يهمنا "
} </script> <!-- ترويسة --> <h1><center>Send A Movie Reacqest</center></h1> <!-- النص المتحرك --> <marquee alien="center" bgcoloe="red" loof="10" hspace="4" vspace="4"> مرحبا بكم عزيزنا الزائر الموقع لك وصمم خصصيصا لاجلك ولذلك نضع بين يدين خدمة طلب الافلام التي تريدها فقط املأ الحقول التالية وسيتم تلبية طلبك </marquee> <!-- فورمات التسجيل او الطلب --> <form class="form" action="#" method="post"> <!-- هنا يوجد جدول لتنسيق الحقول --> <table align="center"> <!-- الجدول الاول الخاص بالاسم --> <tr> <td>Name :</td> <td><input type="text" maxlength="100" value="اسمك" class="m1" /><br /> </td> </tr> <!-- الجدول الثاني الخاص بالايميل --> <tr> <td>E-Mail :</td> <td><input type="text" maxlength="100" value="ضع هنا الايميل الخاص بك" class="m2" /> <br /></td> </tr> <!-- الجدول الثالث الخاص بختيار نوع الفلم --> <tr> <td>Movie type :</td> <td> <!-- هنا من اجل عمل قائمة منسدلة --> <select> <br /> <!-- انواع الافلام المتوفرة --> <option>نوع الفلم</option> <option>Animation Movie</option> <option>ACtion Movie</option> <option>Romance Movie</option> </select> </td> </tr> <!-- الجدول الثالث الخاص بختيار نوع الفلم --> <tr> <td>Tou are frome :</td> <td> <!-- هنا من اجل عمل قائمة منسدلة --> <select> <br /> <!-- البلدان--> <option>chose your Country</option> <option>Syria</option> <option>U A E </option> <option>Lebanon</option> <option>Jordan</option> <option>S K A</option> <option>Yaman</option> <option>china</option> <option>Koria</option> <option>U S A</option> <option>other</option> </select> </td> </tr> <!-- تحديد ان كان ذكر او انثى --> <tr> <td>Yor are : </td> <td>mail <input type="radio" readonly="readonly" /> femail <input type="radio" readonly="readonly" /></td> </tr> <!-- هنا مكان كتابة الرسالة او الطلب --> <tr> <td>your Reacqest or MsG : </td> <td><textarea rows="10" cols="60"></textarea></td> </tr> <tr> <!-- هنا للتأكيد --> <td>Are you sure ??</td> <td><input type="checkbox" /> Yes </td> </tr> </table> <!-- نهاية الجدول --> <!-- زر sumit --> <input type="submit" name="s" value="Submit"/> <!-- زر تفريغ الحقول --> <input type="reset" value="Reset" /> <!-- زر الطلب --> <input type="button" name="send" value="Order Now" onclick="S()" /> </form> <!-- نهاية الفورم --> <br /> <!-- هنا عبارة عن صور متحركة --> <marquee loof="10" hspace="10" vspace="10"> <!-- الجدول الذي يضم الصور --> <table align="center" border="1"> <tr> <!-- الصور --> <td><img src="Action/index.jpg" /></td> <td><img src="Animation/index.jpg" /></td> <td><img src="Romance & comedian/DEAR JOHN/poster.jpg" /></td> <td><img src="Action/Red/poster.jpg" /></td> <td><img src="Animation/Madagascar 3 Europe's Most Wanted/poster.jpg" /></td> <td><img src="Romance & comedian/Titanic/poster.jpg" /></td> <td><img src="Action/TRANSPOTER/poster.jpg" /></td> <td><img src="Animation/Rio/poster.jpg" /></td> <td><img src="Romance & comedian/Remember Me/poster.jpg" /></td> </tr> <!-- نهاية الجدول --> </table> <!-- نهاية الصور المتحركة --> </marquee> <!-- soc --> <div class="icon"> <a href="https://www.facebook.com/FENIXPRO" title="قم يزيارة صفحتنا على الفيس بوك"><ins><div class="fb"></div></ins></a><br/> <a href="location.href='http://twitter.com/fenixthelord" title="تابعنا على تويتر"><ins><div class="tw"></div></ins></a><br/> <a href="http://www.youtube.com" title="قناتنا على اليوتيوب"><ins><div class="yt"></div></ins></a><br/> <a href="http://www.mozilla.com/fr/firefox/" title="لافضل تصفح حمل آخر اصدار من فيرفوكس" ><ins><div class="fx"></div></ins></a> </div> <!-- soc --> </body> </html>
الصفحة بسيطة ساشرح طريقةها بعون لله
كما تعودنا سأبدء بالهيد
رمز Code:
<html dir="rtl"> <head> <!-- Title --> <title>Do you Need some One else ???</title> <!-- meta --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- javascript --> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/custom.js" type="text/javascript"></script> <script src="js/js.js" type="text/javascript"></script> <!-- CSS --> <link href="css Contact.css" rel="stylesheet" type="text/css" /> <!-- css social --> <link href="soc.css" rel="stylesheet" type="text/css" /> <!-- css social --> </head>
الكود code بسيط عنوان + استدعاء ملفات جافا + ملفات سي اس اس
وهنا وضعت ملفين css الاول خاص بالصفحة والثاني خاص بالروابط التي على اليمين واقصد روابط مواقع التواصل
فلناخذ رالملف
"js/js.js"
رمز Code:
$(function() { $('img').mouseover(function() { $(this).fadeTo('400' , 0.50); $(this).fadeTo('400' , 1); }); }); $(function() { $('img.tiefa').mouseover(function() { $(this).animate({rotate: '40deg'}); $(this).animate({rotate: '-=40deg'}); }); }); $(function() { $('img.tiefa').mouseover(function() { $(this).animate({rotate: '40deg'}); $(this).animate({rotate: '-=40deg'}); });
وهو كود code جافا مهمته عمل خفوت للصورة عند مرور الماوس عليها
تعبت من الشرح طريقة هههههه
نتابع بعون الله
الان نبدء بالبدي اي جسم الصفحة
رمز Code:
<!-- body --> <body bgcolor="#333300" text="#FFFFFF" background="images/1.gif"> <script language="javascript"> alert ("مرحبا بك عزيزنا الزائر في صفحة الطلبات فقط املأ البيانات التالية ونحن في خدمتك"
function S(){ alert ("شكرا ... سيتم تلبية طلبك في اقرب وقت ممكن رضائكم يهمنا "
} </script>
هذا عبارة عن كود code جافا سكريبت script
مقسم الى قسمين
الاول رسالة ترحيبية بالزائر تطلب منه ملئ البيانات
والثاني فانكشن اسمه s
مربوط بزر سيتم شرح طريقةه في الاخر مهمته عند الضغط على هذا الزر تظهر رسالة تخبر الزائر انه تم ارسال الطلب
نتابع ...........
كما تعودنا ترويسة العنوان
ووضعت نص متحرك
رمز Code:
<!-- ترويسة --> <h1><center>Send A Movie Reacqest</center></h1> <!-- النص المتحرك --> <marquee alien="center" bgcoloe="red" loof="10" hspace="4" vspace="4"> مرحبا بكم عزيزنا الزائر الموقع لك وصمم خصصيصا لاجلك ولذلك نضع بين يدين خدمة طلب الافلام التي تريدها فقط املأ الحقول التالية وسيتم تلبية طلبك </marquee>
الان ناتي الى الفورم
قمت بانشاء فورم من اجل البيانات
رمز Code:
<!-- فورمات التسجيل او الطلب --> <form class="form" action="#" method="post"> <!-- هنا يوجد جدول لتنسيق الحقول -->
وقمت باعطائه خصاءص في ال css وهي كالتالي
رمز Code:
.form{ text-align: center; margin: auto; color: #CC3366; width: 95%; border: #CC0099; background-image: url(images/body topic.gif); background-repeat: repeat-y; background-color: #C0C0C0; }
جعلت الجدول في الوسط
والتباعد تلقائي
وضعت له لون
وعرض يقدر ب 95% من حجم الصفحة الكلي
قد يسال البعض لماذا استخدمت % بدلا من البكسل والهدف من استخدامي انه تاخذ % من حجم الصفحة مهما تغي رمقاش الشاشة او الصفحة او المتصفح
ووضعت صورة للخلفية وتكرار
بعد ذلك وضعت جدول والجدول من عمودين من اجل ان تظهر الصفحة بشكل متناسق الجدول الاول وضعت بع الكتابة والثاني الحقول
نشاهد اول خانة وهي الاسم
رمز Code:
<table align="center"> <!-- الجدول الاول الخاص بالاسم --> <tr> <td>Name :</td> <td><input type="text" maxlength="100" value="اسمك" class="m1" /><br /> </td> </tr>
الكود code واضح ليدينا وشارح به نقطتين
رمز Code:
maxlength="100"
واقصد بها ان عدد الاحرف الاعظمي هي 10 حرف
ووضعت كلاس m1 من اجل لاستخدام عند البرمجة بال php
الحقل الثاني الايميل وهو مشابه تماما لسابقه
رمز Code:
<!-- الجدول الثاني الخاص بالايميل --> <tr> <td>E-Mail :</td> <td><input type="text" maxlength="100" value="ضع هنا الايميل الخاص بك" class="m2" /> <br /></td> </tr>
الان الجزء الثالث وهو قائمة منسدلة لنوع الفلبم حيث يختار النوع من هذه القائمة
رمز Code:
<!-- الجدول الثالث الخاص بختيار نوع الفلم --> <tr> <td>Movie type :</td> <td> <!-- هنا من اجل عمل قائمة منسدلة --> <select> <br /> <!-- انواع الافلام المتوفرة --> <option>نوع الفلم</option> <option>Animation Movie</option> <option>ACtion Movie</option> <option>Romance Movie</option> </select> </td> </tr> <!-- الجدول الثالث الخاص بختيار نوع الفلم -->
في البداية استخدمت وسم ال <secelct >
لانشاء القائمة ووضعت الخيارات ضمن وسم <option>
الان تحديد البلد وهو مشابه تماما لنوع الفلم
رمز Code:
<tr> <td>you are frome :</td> <td> <!-- هنا من اجل عمل قائمة منسدلة --> <select> <br /> <!-- البلدان--> <option>chose your Country</option> <option>Syria</option> <option>U A E </option> <option>Lebanon</option> <option>Jordan</option> <option>S K A</option> <option>Yaman</option> <option>china</option> <option>Koria</option> <option>U S A</option> <option>other</option> </select> </td> </tr>
الان تحديد عن اذا كان ذكر او انثى وذلك لتبيان خاصية الراديو
رمز Code:
<!-- تحديد ان كان ذكر او انثى --> <tr> <td>Yor are : </td> <td>mail <input type="radio" readonly="readonly" /> femail <input type="radio" readonly="readonly" /></td> </tr>
قمت بانشاء حقل بوسم input مع النوع راديو type="radio"
الان منطقة لكتابة الطلب او الرسالة
رمز Code:
<!-- هنا مكان كتابة الرسالة او الطلب --> <tr> <td>your Reacqest or MsG : </td> <td><textarea rows="10" cols="60"></textarea></td> </tr> <tr>
وهي وسم textarea
وخصائص css
رمز Code:
textarea{ background-color: #999999; color: #fff; width: 95%; }
وهنا زر للتاكيد لاظهار خاصية التشيك بوكس
رمز Code:
<!-- هنا للتأكيد --> <td>Are you sure ??</td> <td><input type="checkbox" /> Yes </td> </tr>
الان يوجد لدينا 3 ازار وهي كالتالي
رمز Code:
<!-- نهاية الجدول --> <!-- زر sumit --> <input type="submit" name="s" value="Submit"/> <!-- زر تفريغ الحقول --> <input type="reset" value="Reset" /> <!-- زر الطلب --> <input type="button" name="send" value="Order Now" onclick="S()" /> </form> <!-- نهاية الفورم -->
اول زر وهو زر ال Submit
ثاني زر وهو زر ال ريست حيث يفرغ الحقول
الزر الثالث وهو الاهم الطلب وهو الزر المساول عن الارسال حيث وضعت لهحدث في الجافا سكربت اسميته s()
وكما شاهدنا في بداية الصفحة عند الضغط يتم استدعاد الفانكشن s فتظهر الرسالة التي تخبر الزائر بانه تم ارسال الطلب
الان بعد الانتهاء من الفورم
قمت بعمل جدول متحرك يحوي مجموعة صور تعرض محتوى الموقع
والكود code خلال لاشرح طريقة
رمز Code:
<!-- هنا عبارة عن صور متحركة --> <marquee loof="10" hspace="10" vspace="10"> <!-- الجدول الذي يضم الصور --> <table align="center" border="1"> <tr> <!-- الصور --> <td><img src="Action/index.jpg" /></td> <td><img src="Animation/index.jpg" /></td> <td><img src="Romance & comedian/DEAR JOHN/poster.jpg" /></td> <td><img src="Action/Red/poster.jpg" /></td> <td><img src="Animation/Madagascar 3 Europe's Most Wanted/poster.jpg" /></td> <td><img src="Romance & comedian/Titanic/poster.jpg" /></td> <td><img src="Action/TRANSPOTER/poster.jpg" /></td> <td><img src="Animation/Rio/poster.jpg" /></td> <td><img src="Romance & comedian/Remember Me/poster.jpg" /></td> </tr> <!-- نهاية الجدول --> </table> <!-- نهاية الصور المتحركة --> </marquee>
لان ناتي الى شرح طريقة ايقونات التواصل الاجتماعي الظاهرة على اليمين
كود code ال HTML بسيط جدا
وضعت ديف وروابط دخله
رمز Code:
<div class="icon"> <a href="https://www.facebook.com/FENIXPRO" title="قم يزيارة صفحتنا على الفيس بوك"><ins><div class="fb"></div></ins></a><br/> <a href="location.href='http://twitter.com/fenixthelord" title="تابعنا على تويتر"><ins><div class="tw"></div></ins></a><br/> <a href="http://www.youtube.com" title="قناتنا على اليوتيوب"><ins><div class="yt"></div></ins></a><br/> <a href="http://www.mozilla.com/fr/firefox/" title="لافضل تصفح حمل آخر اصدار من فيرفوكس" ><ins><div class="fx"></div></ins></a> </div>
ووضعت كلاس لكل موقع
الان من ال css استخدمنا ما يلي :
ملاحظة مواقغع التواصل لديهم ملف css خاص بهم اسميته soc
رمز Code:
.icon{ position:fixed; top:20%; left:0; }
هذا الكود code للديف الرئيسي حيث عملت مثل بوكس ثابت وضعت له قيمة ان يبقي من الاعلى بنسبة 20%
وجعلته ثابتا على اليسار
لان ناتي لكل ايقونة وساشرح طريقة واحدة لان الباقي نفس الشيئ
رمز Code:
.fb{ background:url('images/fenix/fb.png')no-repeat top center ; width:150px; height:70px; background-repeat:no-repeat; border:none; }
كود code بسيط وجميل وضعت صورة للخلفية بدون تكرار والى لاعلى في الوسك
لالن وضعت طول وعرض ووضعت للاعلى من اجل ان آخذ نصف الصورة فقط
ووضعت هوفر
رمز Code:
.fb:hover { background:url('images/fenix/fb.png') no-repeat bottom center; }
الى هنا انتهيت بعون الله سبحانه من المشروع كاملا اتمنى من اله عز وجل ان يوقفني في الشرح طريقة فقد تعبت في هذا المشروع
ملاحظة جميلة :
لو ان شخصا ما اراني المشروع قبل ان انفذه ساقول له هذا صعب لا استطيع صنع مثله ولكن عندما تبدا بيدك ستصل الى اجمل من هذا
اي سؤال من هذا المشروع انا جاهز بعون الله
وهذه الصفحات وملفات ال css وملفات الجافا وكما قلت سابقا ساقوم برفع المشروع كاملا مع الصور والصفحات كاملة عند توافر انترنت سريع
واتمني التطوير لاتعلم واعلم
والسلام عليكم ورحمة الله وبركاته
اخوكم محمد
ظ…ط´ط±ظˆط¹ ط¨ط³ظٹط· ط¨ط¹ط¯ط© ظ„ط؛ط§طھ Html & Css & java script ظ…ط¹ ط§ظ„ط´ط±ط* ط§ظ„ظ…ظپطµظ„
رد مع اقتباس
