مشروع بسيط بعدة لغات وهي Html & Css & java script
المشروع عبارة عن ثلاث اقسام
وهو عبارة عن موقع للألعاب مثلا او للأفلام او عرض منتجات او .......
كل شخص يستطيع تغيير بما يريد به وما وضعته إلا رغبة في نشر العلم
وهو مقسم الى اربعة اقسام
القسم الاول وهي الواجهة الرئيسية
القسم الثاني الاقسام الداخلية
القسم الثالث المواضيع التي بداخل لاقسام
والرابع صفحة الاتصال والتواصل
صفحة الاتصال تحتاج الى php لكي تعمل ولكنني تركتهها لعدم كفابة علمي بها واتمنا من اي شخص ان يطورها ويشرحها لنا
نبدأ بعون الله :
ساضع الصفحة والمثال ثم الكود وبعده الشرح وقد تجد اخي العزيز انيي اشرح اشياء بسيطة ولكنني احب ان اشرح كل شيئ لكي لا يواجه احد مشاكل واي سؤال انا حاضر وستجد اخي ان هناك بعض الاخطاء مثل :
اولا هناك صفات واضعها مباشرة في html وليس في css وانا قصدت ذلك لان هناك اناس لم تتعلم ال css بعد
يارب
اولا الصفحة الرئيسية وهي واجهة الموقع
الكود :
وهو عبارة عن موقع للألعاب مثلا او للأفلام او عرض منتجات او .......
كل شخص يستطيع تغيير بما يريد به وما وضعته إلا رغبة في نشر العلم
وهو مقسم الى اربعة اقسام
القسم الاول وهي الواجهة الرئيسية
القسم الثاني الاقسام الداخلية
القسم الثالث المواضيع التي بداخل لاقسام
والرابع صفحة الاتصال والتواصل
صفحة الاتصال تحتاج الى php لكي تعمل ولكنني تركتهها لعدم كفابة علمي بها واتمنا من اي شخص ان يطورها ويشرحها لنا
نبدأ بعون الله :
ساضع الصفحة والمثال ثم الكود وبعده الشرح وقد تجد اخي العزيز انيي اشرح اشياء بسيطة ولكنني احب ان اشرح كل شيئ لكي لا يواجه احد مشاكل واي سؤال انا حاضر وستجد اخي ان هناك بعض الاخطاء مثل :
اولا هناك صفات واضعها مباشرة في html وليس في css وانا قصدت ذلك لان هناك اناس لم تتعلم ال css بعد
يارب
اولا الصفحة الرئيسية وهي واجهة الموقع
الكود :
رمز Code:
<html>
<head>
<!-- Title -->
<title>BEST MOVIES 2012</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 2012</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 2012</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 2012</title>
رمز Code:
<!-- meta --> <meta http-equiv="content-type" content="text/html; charset=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">
ولون للخط #FFFFFF
وصورة للخلفية
background="images/1.gif"
رمز Code:
<h1 >BEST MOVIES 2012</h1>
من اجل ان يكون حجمها كبير
الان في ال css الخاص بال body
رمز Code:
body{
font-family: "Hobo Std";
font-size: 14px;
border: 10px 10px 10px 10px;
}
وحجم الخط بالبكسل 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 />
alien="center" : المحاذاة في الوسط
loof="10" عدد مرات التكرار
hspace="4" التباعد الافقي
vspace="4 التباعد العامودي
وافي ملف ال css استخدمت له
رمز Code:
marquee{
color: blue;
direction: rtl;
margin: 10px 0px 20px 0px;
}
والمسار من اليمين الى اليسار
والمرجين 10px 0px 20px 0px
الان سنبدأ بمحتوى المشروع
قبل وضع الكودات ساعطي الفكرة
قمت بإنشاء جدول عبارة عن 3 اعمدة فقط وكل جدول سيكون للدخول الى قسم خاص
في الجدول قسمين الاول وسيكون العنوان وسيكون ترويسة H2
وفي الاسفل صورة عن الضغط عليها سيدخل الى القسم
لنشاهد الكودات
رمز Code:
<br /><table cellpadding="4" cellspacing="4" align="center" border="3" background="images/body.gif">
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;
}
ووضعت رابط صورة الخلفية الجديدة
ووضعت التكرار على x
الان انتهينا من العنوان وسننتقل الى الصورة التي ستدخانا الى القسم عند الضغط عليها
رمز Code:
<br /><a href="Animation/index.html" target="_self" title="Animation"><img src="Animation/index.jpg" width="33%" height="33%" /></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 2012</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 2012</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 2010</p>
<br /><a href="INCEPTION.html" target="_self" title="INCEPTION 2010"><img src="INCEPTION 2010/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Killer Elite 2011</p>
<br /><a href="Killer.html" target="_self" title="Killer Elite 2011"><img src="Killer Elite 2011/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Let Me In 2010</p>
<br /><a href="Let.html" target="_self" title="Let Me In 2010"><img src="Let Me In 2010/poster.jpg" width="33%" height="33%" /></a>
</td>
</tr>
<!-- الصف الثاني -->
<tr>
<td align="center"><p>Percy Jackson and the Olympians (2010)</p>
<br /><a href="parcy.html" target="_self" title="Percy Jackson and the Olympians (2010)"><img src="Percy Jackson and the Olympians (2010)/poster.jpg" width="33%" height="33%" /></a>
</td>
<td align="center"><p>Red 2010</p>
<br /><a href="Red.html" target="_self" title="Red 2010"><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 (2010)</p>
<br /><a href="Shutter.html" target="_self" title="Shutter Island (2010)"><img src="Shutter Island (2010)/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 2011</p>
<br /><a href="The Sorcerer.html" target="_self" title="The Sorcerer and the White Snake 2011"><img src="The Sorcerer and the White Snake 2011/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 2010</p>
<br /><a href="The Tourist.html" target="_self" title="The Tourist 2010"><img src="The Tourist 2010/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 2010</p>
<br /><a href="Undisputed.html" target="_self" title="Undisputed 3 Redemption 2010"><img src="Undisputed 3 Redemption 2010/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 2012</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 2012</center></h1>
لان في تعرف ال 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">
جعلت البوردر 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>
وهنا وضعنا كلاس للصورة 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;
}
ولم اضع بوردر جعلت قيمته 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>
رمز Code:
.memo2{
background-image: url(images/home.png);
height: 33px;
width: 142px;
background-repeat: no-repeat;
border: 0px;
margin: auto;
}
وطبعا هوفر مع تغير الصورة
رمز 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;
}
اي جعلته ان يكون على اليمين اجباري
انتهينا من الازرار ناتي الان الى المواضيع
اظن انن الجميع عرف كيف ساعمل المواضيع
ممتاز :
جدول + رابط + صورة
وهذه نهاية صفحة الموضوع
ههههههههه بسيط جدا فلننظر الى الكود
رمز Code:
<!-- الصف الاول -->
<tr>
<td align="center"><p>Alvin and the Chipmunks The Squeakque</p>
<br /><a href="alvin.html" target="_self" title="Alvin 2012"><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 2012"><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 2012"><img src="frankenweenie/poster.jpg" width="33%" height="33%" /></a>
</td>
</tr>
<!-- نهاية الصف الاول -->
قد ضبطت مقاس جميع الصور
رمز 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>
وهنا وضعت ملفين 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:
<!-- body -->
<body bgcolor="#333300" text="#FFFFFF" background="images/1.gif">
<script language="javascript">
alert ("مرحبا بك عزيزنا الزائر في صفحة الطلبات فقط املأ البيانات التالية ونحن في خدمتك")
function S(){
alert ("شكرا ... سيتم تلبية طلبك في اقرب وقت ممكن رضائكم يهمنا ")
}
</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"> <!-- هنا يوجد جدول لتنسيق الحقول -->
رمز 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:
maxlength="100"
ووضعت كلاس 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> <!-- الجدول الثالث الخاص بختيار نوع الفلم -->
لانشاء القائمة ووضعت الخيارات ضمن وسم <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>
الان منطقة لكتابة الطلب او الرسالة
رمز Code:
<!-- هنا مكان كتابة الرسالة او الطلب --> <tr> <td>your Reacqest or MsG : </td> <td><textarea rows="10" cols="60"></textarea></td> </tr> <tr>
وخصائص css
رمز Code:
textarea{
background-color: #999999;
color: #fff;
width: 95%;
}
رمز Code:
<!-- هنا للتأكيد -->
<td>Are you sure ??</td>
<td><input type="checkbox" /> Yes </td>
</tr>
رمز 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> <!-- نهاية الفورم -->
ثاني زر وهو زر ال ريست حيث يفرغ الحقول
الزر الثالث وهو الاهم الطلب وهو الزر المساول عن الارسال حيث وضعت لهحدث في الجافا سكربت اسميته s()
وكما شاهدنا في بداية الصفحة عند الضغط يتم استدعاد الفانكشن s فتظهر الرسالة التي تخبر الزائر بانه تم ارسال الطلب
الان بعد الانتهاء من الفورم
قمت بعمل جدول متحرك يحوي مجموعة صور تعرض محتوى الموقع
والكود خلال لاشرح
رمز 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>
لان ناتي الى شرح ايقونات التواصل الاجتماعي الظاهرة على اليمين
كود ال 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:
.fb{
background:url('images/fenix/fb.png')no-repeat top center ;
width:150px;
height:70px;
background-repeat:no-repeat;
border:none;
}
لالن وضعت طول وعرض ووضعت للاعلى من اجل ان آخذ نصف الصورة فقط
ووضعت هوفر
رمز Code:
.fb:hover
{
background:url('images/fenix/fb.png') no-repeat bottom center;
}
الى هنا انتهيت بعون الله سبحانه من المشروع كاملا
لمن استفاد من هدا الشرح يرجى زيارة صفحتنا فايسبوك وعمل لايك و شير
من هنا
