2014-03-09 ~ المدونة الشاملة لكل المستويات

الجمعة، 14 مارس 2014

الدرس السابع من دورة html/الدخول الى عالم الجافا سكريبت/

السلام عليكم
لقد تعلمنا في الدروس السابقة HTML و CSS بشكل يجعلنا قادريين على تصميم صفحة بسيطة باستغلال مهارات محدودة .
وكما قلنا في بداية الدورة سنتطرق الى القسم الثالث من انواع البرمجة التي تساعد في تصميم صفحة مميزة ومتكاملة و ذات نسق منظم.
الدخول الى عالم الجافا سكريبت
1- كيف يمكننا ادراج او تعريف كود معين داخل صفحة HTML ؟
دائما لتعريف اي كود او اي نوع برمجة يجب علينا ان نتبع الاسلوب الاصح والانسب للتعريف بهذه الاكواد التي يتم ادراجها.
كما سبق بالنسسبة لاكواد CSS يتم التعرف عليها بداية من من التاج او الوسم : <STYLE> وتنتهي بوسم الاغلاق: <STYLE/>.
اما اكواد الجافا سكريبت Javasc فهي على النسق التالي<script>الكود يوضع هنا</script>

ومن الاكواد المشهورة كود alert message

يسمح لك باضهار رسالة عند النقر على مكان ما او عند دخولك للفحة ولنأخذ مثال توضيحي على هذا:

النتيجة المحصل عليها

نلاحظ ان الكود كتب بشكل معقد ولذا يبسط اكثر

اذ يمكننا الاستغناء عن التعريف الطويل ونكتب فقط

ويمكنك التعديل كيفما تشاء في الكتابة

كما يمكن كتابة اكواد الجافا سكريبت في ال body

<!doctype html>

<html>

<head>

</head>

<body>

alert("السلام عليكم")

</script>

</body>

</html>

وهناك كود اخر معروف وشائع وهوكود اعطاء الوقت بصفة عامة(العام .الشهر.اليوم.الساعة.................)

لنجرب الكود معا:

لنقوم بعمل مثال تلخيصي لكل مما سبق:

نلاحظ من الصورة ان الفحة مقسمة الى ثلاثة اقسام:

1-menu

2-logo

3-المحتوى/*الباقي الغير ملون*/

1-اكواد CSS

menu تصميم الــــ


.menu{

  width:100%;

  height:30px;

  background-color:#888888;

  font-family:andalus;

                text-shadow:2px 2px 2px #777777;

  font-size:16px;

  float:right;

                margerin:0px 0px 2px;

  padding:0px 0px 2px;

                border-radius: 15px 15px 0px 0px;

}

li تصميم القائمة


.menu li {

   display:block;

   position:relative;

   float:right;

   border: solid2px #ffffff;

   padding:2px 8px 8px 8px;

   margin:8px 8px 8px 8px;

                        background-color:#999999;

   border-radius: 15px 15px 0px 0px;

}

a تصميم روابط القائمة


 .menu li a {

   color:#aaaaaa;

   font-weight:bold;

   text-decoration:none;



  }

logo تصميم


#logo{ font-family:andalus;

  width:100%;

  height:150px;

  background-color:#999999;

  float:right;


  margin:0px 0px 2px;


  padding:0px 0px 2px;



}

2-اكواد HTML+javasc

body+javasc


<head>

<style>

اكواد CSS السابقة

</style>

<script >
alert("السلام عليكم ارجوا ان يكون الدرس مفيدا")
</script >

</head>

<body>

 <div class="menu">

  <li><a href="#">الدرس الاول</a></li>

  <li><a href="#">الدرس الثاني</a></li>

  <li><a href="#">الدرس الثالث</a></li>

                 <li><a href="#">الدرس الرابع</a></li>


 </div>

 <div id="logo">

  


  

                <script >

     var d=new Date();



     document.write(d);

                </script>

         </div>







</body>

النتيجة المحصل عليها

إقرأ المزيـــد

الاثنين، 10 مارس 2014

كيف أصنع قائمة منسدلة بإستخدام CSS و HTML فقط

11:31 م nabil40w لاتوجد تعليقات

كيف أصنع قائمة منسدلة بإستخدام CSS و HTML فقط.

كما جرت العادة للبداية بانشاء القائمة المنسدلة وبكل احترافية بإستخدام CSS و HTML فقط لابد لنا من تخطيط.

والتخطيط يجب ان يكون مرتكزا على خلفية مسبقة للقائمة المراد انشائها.لذا سنعتمد التخطيط الاولي لنا هو على الشكل التالي باستخدام HTML فقط:

نلاحظ ان القائمة جاءت عمودية ونحن بطبيعة الحال نريدها خطية افوقية لذا سنلجأ الى CSS ونضفي بعض التعديلات عليها كالخلفية والتموضع والتباعد:

القائمة+العرض+الابعاد

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;
}

نضيف المحتوى التالي في menu #

انحناء اطراف القائمة


-moz-box-shadow:inset 0px 0px 1px #edf9ff;

-webkit-box-shadow:inset 0px 0px 1px #edf9ff;

box-shadow:inset 0px 0px 1px #edf9ff;

نضيف المحتوى التالي في menu #

إضافة الوان خاصة بالقائمة يضاف مباشرة #menu في


background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

نضيف المحتوى التالي في menu # ويمكن الاستغناء عنها

إضفاء خاصية الضل لإعطاء القائمة ميزة البعد3

-moz-box-shadow:inset 0px 0px 1px #edf9ff;                                    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;                                 box-shadow:inset 0px 0px 1px #edf9ff;

نضيف المحتوى التالي في menu #

تحميل ملف CSS

الآن ننتقل الى الجزء الثاني

إلى حد الان لن تلاحظ اي تغير في القائمة لذا تابع الخطوات التالية

<li> لنتتقل الى الاقسام الفرعية


#menu li {

float:right;

display:block;

text-align:center;

position:relative;

margin-right:4px;

padding: 4px 10px 4px 10px;


margin-top:20px;


border:none;



}

نضيف المحتوى التالي في #li menu

نعطي للاقسام اللون والتدرج كما فيالقائمة السابقة


background: #F4F4F4;

background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

نعطيها الانحناءات للحواف


-moz-border-radius: 5px 5px 0px 0px;

-webkit-border-radius: 5px 5px 0px 0px;

border-radius: 5px 5px 0px 0px;

(mouse hover) نأتي الآن للروابط ومرور الفأرة


#menu li:hover {
border: 2px solid #543D3E;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
text-shadow: 1px 1px 1px #000;
}

نعطي الضل للكتابة عند مرور الفأرة


           #menu li:hover     يضاف في                                                     text-shadow: 1px 1px 1px #000;

تصميم خاص للروابط


#menu li a {

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

color: #EEEEEE;

text-decoration:none

display:block;

outline:0 ;

text-shadow: 1px 1px 1px #000;}

تصميم خاص للروابط


#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}

تصميم خاص للروابط


#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}

إقرأ المزيـــد

الدرس1/3 السادس من دورة HTML

1:38 م nabil40w لاتوجد تعليقات

السلام عليكم

لقد تطرقنا في الدروس السابقة الى الوسوم وكيفية التكويد لكن صادفتنا مشكلة التنسيق فاستعملنا CSS لكن لنستعمل هذا التنسيق بشكل منسق وافصل لابد من استمعل مصطلحين شائعيين وهما class و id.
لكن الكثير منا يستعمل المصطلحين ولا يعرف كيفية التعامل معهما ولا الفرق بينهما لذا تابع الشرح معنا.
أولا الفرق بين هذين المصطلحبن:
كل id يمكنك استخدامه مرة واحدة في الصفحة الواحدة.
أما الـ class فتستخدمه في أكثر من مكان .
وللتوضيح أكثر:

CSS

<style>

h2{

text-align:center;

color:#0000aa;

}

#cont1{

background-color:#aa0000;

font-size:36px;

text-align:right;

font-family:tohoma;

font-c

}

#cont2{

background-color:#00aa00;

font-size:36px;

text-align:right;

font-family:tohoma;

}

.header{

background-color:#00aa00;

font-size:16px;

text-align:right;

}

.imag{

display: block;

margin-left: auto;

margin-right: auto;

high:200px;

width:300px;

}

</style>

HTML

<p class="header"><a href="#">وصلة رئيسية أفقية</a>

<p class="header"><a href="#">وصلة رئيسية أفقية</a>

<p class="header"><a href="#">وصلة رئيسية أفقية</a>

<p class="header"><a href="#">وصلة رئيسية أفقية</a>

<div class="header">

<p><a href="#">وصلة رئيسية أفقية</a>

<p><a href="#">وصلة رئيسية أفقية</a>

<p><a href="#">وصلة رئيسية أفقية</a>

<p><a href="#">وصلة رئيسية أفقية</a>

</div>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJXHC2TermM4ZNBvgx97uJSqi5ds8opN65dVbii0fSwssUT1n2uuWQMlq9pRQ7mVdi29nmRhroY36i-Ff1VhMiLkPy0kck1M48AEKV2lPwmxwHOOiT9iYn1g9vfWsmeQoQ8QbQJhm3wrv/h120/3.jpg" class="imag">

<div id="cont1">

<h2> !CSS في class و id ماهو الفرق بين</h2>

</div>

<div id="cont2">

<h2> !HTML في class و id ماهو الفرق بين</h2>

</div>

لكن لاتستطيع أن تنشئ id واحد وتضعه لعدة وسوم .... لو فعلت ذلك ستظهر النتيجة مناسبة..
لكن هذا خطأ وينبغي ان نضع كل وسم وخاصية في مكانها الصحيح.
جاري العمل على 2/3 3/3 من الدروس انتظرونا

إقرأ المزيـــد

الأحد، 9 مارس 2014

الدرس الخامس من دورة HTML

9:27 م nabil40w لاتوجد تعليقات

الخاصية الجد رائعة التي تستعمل في جزء التنسيق CSS

()nth-of-type

التعريف بالخاصية:

هي ميزة تساعد المصمم على التحكم في الوسوم ككل

<div></div> حسب التكويد والاسطر اذ نتحكم في ميزات الوسوم حسب رقم السطر ويستعمل خاصية من خصائص الاعداد الطبيعية فمثلا تستغل ميزة العدد الزوجي والفردي

الفردي يرمزله بـــــ:(odd)

الزوجي يرمز له بــ:(even)

مثال توضيحي:

النتيجة كل <div></div> في السطر الفردي ياخذ اللون الازرق

النتيجة كل <div></div> في السطر الزوجي ياخذ اللون الاحمر

لنأخذ مثالا أكثر تعمقا

نستعمل ميزة المجالات او يمن تسميتها ميزة القفز بمقدار معين ولنأخذ القيمة التالية(5n+0):

ويمكن تغيير العدد 0 الى عدد معين مثلا (5n+1):

وهذا كود اثر تعقيدا كمثال عن استعمالاته:

<html>

<head>

<style>

h1{color:#00ffaa;}

div {

border-radius:50%;

position:absolute;

top:50%; left:75%;

}

div:nth-of-type(odd) { background:black; }

div:nth-of-type(even) { background:white; border:2px solid black; }

div:nth-of-type(11) {

height:10px; width:10px;

margin-top:-5px; margin-left:-5px;

-webkit-animation:slide 3s ease-in-out infinite;

animation:slide 3s ease-in-out infinite;

}

div:nth-of-type(10) {

height:20px; width:20px;

margin-top:-12px; margin-left:-12px;

-webkit-animation:slide 3s -2.7s ease-in-out infinite;

animation:slide 3s -2.7s ease-in-out infinite;

}

div:nth-of-type(9) {

height:40px; width:40px;

margin-top:-20px; margin-left:-20px;

-webkit-animation:slide 3s -2.4s ease-in-out infinite;

animation:slide 3s -2.4s ease-in-out infinite;

}

div:nth-of-type(8) {

height:60px; width:60px;

margin-top:-32px; margin-left:-32px;

-webkit-animation:slide 3s -2.1s ease-in-out infinite;

animation:slide 3s -2.1s ease-in-out infinite;

}

div:nth-of-type(7) {

height:80px; width:80px;

margin-top:-40px; margin-left:-40px;

-webkit-animation:slide 3s -1.8s ease-in-out infinite;

animation:slide 3s -1.8s ease-in-out infinite;

}

div:nth-of-type(6) {

height:100px; width:100px;

margin-top:-52px; margin-left:-52px;

-webkit-animation:slide 3s -1.5s ease-in-out infinite;

animation:slide 3s -1.5s ease-in-out infinite;

}

div:nth-of-type(5) {

height:120px; width:120px;

margin-top:-60px; margin-left:-60px;

-webkit-animation:slide 3s -1.2s ease-in-out infinite;

animation:slide 3s -1.2s ease-in-out infinite;

}

div:nth-of-type(4) {

height:140px; width:140px;

margin-top:-72px; margin-left:-72px;

-webkit-animation:slide 3s -0.9s ease-in-out infinite;

animation:slide 3s -0.9s ease-in-out infinite;

}

div:nth-of-type(3) {

height:160px; width:160px;

margin-top:-80px; margin-left:-80px;

-webkit-animation:slide 3s -0.6s ease-in-out infinite;

animation:slide 3s -0.6s ease-in-out infinite;

}

div:nth-of-type(2) {

height:180px; width:180px;

margin-top:-92px; margin-left:-92px;

-webkit-animation:slide 3s -0.3s ease-in-out infinite;

animation:slide 10s -0.3s ease-in-out infinite;

}

div:nth-of-type(1) {

height:200px; width:200px;

margin-top:-100px; margin-left:-100px;

-webkit-animation:slide 3s ease-in-out infinite;

animation:slide 10s ease-in-out infinite;

}

@keyframes slide {

0% { left:75% }

50% { left:25%; }

100% { left:75%; }

}

@-webkit-keyframes slide {

0% { left:75% }

50% { left:25%; }

100% { left:75%; }

}

</style>

</head>

<body><div><h1>لا معبود بحق الا الله</h1></div><div><h1>ذو الجلال والاكرام</h1></div><div><h1>لا حول ولا قوة الا بالله</h1></div>

<div><h1>سبحان ربي العظيم</h1></div>

<div><h1>الواحد الاحد</h1></div>

<div><h1>سبحان الله</h1></div>

<div><h1>الحمد لله</h1></div>

<div><h1>الله اكبر</h1></div>

<div><h1>هو الغفور</h1></div>

<div><h1>هو الرحيم</h1></div>

</body>

</html>

انسخ الكود كما هو وقم بتشغيل ملفك الناتج وسترى النتيجة

للمزيد والتعمق اكثر اذهب الىالرابط التالي

انتظرونا هناك المزيد

إقرأ المزيـــد

http://www.webestools.com/Navigation Bar Generator

المدونة الشاملة لكل المستويات

الجمعة، 14 مارس 2014

الدرس السابع من دورة html/الدخول الى عالم الجافا سكريبت/

menu تصميم الــــ

li تصميم القائمة

a تصميم روابط القائمة

logo تصميم

body+javasc

الاثنين، 10 مارس 2014

كيف أصنع قائمة منسدلة بإستخدام CSS و HTML فقط

كيف أصنع قائمة منسدلة بإستخدام CSS و HTML فقط.

القائمة+العرض+الابعاد

انحناء اطراف القائمة

إضافة الوان خاصة بالقائمة يضاف مباشرة #menu في

إضفاء خاصية الضل لإعطاء القائمة ميزة البعد3

<li> لنتتقل الى الاقسام الفرعية

نعطي للاقسام اللون والتدرج كما فيالقائمة السابقة

نعطيها الانحناءات للحواف

(mouse hover) نأتي الآن للروابط ومرور الفأرة

نعطي الضل للكتابة عند مرور الفأرة

تصميم خاص للروابط

تصميم خاص للروابط

تصميم خاص للروابط

الدرس1/3 السادس من دورة HTML

الأحد، 9 مارس 2014

الدرس الخامس من دورة HTML

الخاصية الجد رائعة التي تستعمل في جزء التنسيق CSS

مختاراتنا لكم

التسميات

أرشيف المدونة الإلكترونية

إعلانات مقترحة

إشترك معنا

معكم عبر المواقع الاجتماعية

الدورات المتاحة حاليا

المدونة الشاملة لكل المستويات

الجمعة، 14 مارس 2014

الدرس السابع من دورة html/الدخول الى عالم الجافا سكريبت/

menu تصميم الــــ

li تصميم القائمة

a تصميم روابط القائمة

logo تصميم

body+javasc

الاثنين، 10 مارس 2014

كيف أصنع قائمة منسدلة بإستخدام CSS و HTML فقط

كيف أصنع قائمة منسدلة بإستخدام CSS و HTML فقط.

القائمة+العرض+الابعاد

انحناء اطراف القائمة

إضافة الوان خاصة بالقائمة يضاف مباشرة #menu في

إضفاء خاصية الضل لإعطاء القائمة ميزة البعد3

<li> لنتتقل الى الاقسام الفرعية

نعطي للاقسام اللون والتدرج كما فيالقائمة السابقة

نعطيها الانحناءات للحواف

(mouse hover) نأتي الآن للروابط ومرور الفأرة

نعطي الضل للكتابة عند مرور الفأرة

تصميم خاص للروابط

تصميم خاص للروابط

تصميم خاص للروابط

الدرس*1/3* السادس من دورة HTML

الأحد، 9 مارس 2014

الدرس الخامس من دورة HTML

الخاصية الجد رائعة التي تستعمل في جزء التنسيق CSS

مختاراتنا لكم

التسميات

أرشيف المدونة الإلكترونية

إعلانات مقترحة

إشترك معنا

معكم عبر المواقع الاجتماعية

الدورات المتاحة حاليا

الدرس1/3 السادس من دورة HTML