linnou
10-30-2013, بتوقيت غرينيتش 09:43 PM
http://www.dzbatna.com/images/icons/idea.gif ط*طµط±ظٹط§ظ‹ : ط´ط±ط* ط¨ط§ظ„طھظپطµظٹظ„ ط¹ظ…ظ„ ط²ط± ظ…طھط*ط±ظƒ ط¨طھظ‚ظ†ظٹط© Css . [ ط¯ط±ط³ ط¨ط³ظٹط· ] . (http://www.dzbatna.com/t1403210/)
بسم الله الرحمن الرحيم
. : : السلام عليكم و رحمة الله و بركاته : : .
! اليوم عندي لكم شرح طريقة !
. : : شرح طريقة عمل زر متحرك بتقنية Css : : .
البرنامج المستخدم
Microsoft Expression Web
-
[ نتيجة الدرس مفصل ]
V
http://www.dzbatna.com/attachments/432918d1259885729-ظƒط±ط§ظƒ-ظ„ظ„طھطµظ…ظٹظ….jpg
. : : الشرح طريقة : : .
عند فتح صفحة Html
تكون الاكواد كذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>32كـراك للتصميم</title>
</head>
<body>
</body>
</html>
</code> </code>
-----------------------
نقوم بإضافة
رمز PHP:
<code style="white-space:nowrap"> <code> <style>
</style>
</code> </code>
-----------------------
داخل الوسم :
رمز PHP:
<code style="white-space:nowrap"> <code> <head>
</head>
</code> </code>
-----------------------
فيصبح الكود code كاملاً كذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>32 كـراك للتصميم</title>
<style>
</style>
</head>
<body>
</body>
</html>
</code> </code>
-----------------------
الان
نضيف بين
رمز PHP:
<code style="white-space:nowrap"> <code> <body>
</body>
</code> </code>
هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <p></p>
</code> </code>
-----------------------
و نعطي الكود code كلاس خاص فيه
و سمينا الكلاس krak
فيصير :
رمز PHP:
<code style="white-space:nowrap"> <code> <p class="krak"></p>
</code> </code>
-----------------------
و الكلام اللي بيكون بالزر
نكتب مثلا كـراك للتصميم
فيكون كذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <p class="krak">كراك للتصميم</p>
</code> </code>
و الان خلصنا من اكواد الزر
باقي اضافة الخصائص له
من الوان و حجم و حدود . . . . . الخ
----------------------------------------------
-----------------------
--------------
طبعا الخصائص تكون داخل الوسم :
رمز PHP:
<code style="white-space:nowrap"> <code> <style>
</style>
</code> </code>
-----------------------
الان بنضيف له
خواص له
و بالترتيب
1 - الحدود .
2 - الطول .
3 - العرض .
4 - نوع الخط .
5 - حجم الخط .
6 - الخلفية .
7 - لون الخط .
8 - التباعد .
9 - المحاذاه .
10 - الموضع .
---
نفتح كتابة الخواص بـ
رمز PHP:
<code style="white-space:nowrap"> <code> .krak{
</code> </code>
ثم نكتب هذي الخواص :
رمز PHP:
<code style="white-space:nowrap"> <code> border:1px #999999 dashed;
border:1px #999999 dashed;
height:15px;
width:80px;
font-family:Tahoma;
font-size:12px;
background:#F8F8F8;
color:#CC0099;
padding:0px 0px 0px 0px;
text-align:center;
position:relative;
</code> </code>
و نغلقها بـ
رمز PHP:
<code style="white-space:nowrap"> <code> }
</code> </code>
فيصير كود code الصفحة كامل كذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>كـراك للتصميم</title>
<style>
.krak{
border:1px #999999 dashed;
height:15px;
width:80px;
font-family:Tahoma;
font-size:12px;
background:#F8F8F8;
color:#CC0099;
padding:0px 0px 0px 0px;
text-align:center;
position:relative;
}
</style>
</head>
<body>
<p class="krak">كراك للتصميم</p>
</body>
</html>
</code> </code>
--------------------------------------------------------------------------------------------
و الان صار عندنا زر ثابت
لكن لا يوجد عليه رابط
ولا يوجد عليه تاثير عند المرور
الان
نبدا باضافة الخواص عند مرور الماوس عليه
+
نضيف له ارتباط تشعبي
---
نقوم باضافة هوفر للزر و اعطائه خواص له عند مرور الماوس عليه
طبعا
انا عطيته خاصية
1 - تغير لون الخط .
2 - تغير لون الخلفية .
3 - تسطير للخط .
و هذي هي الاكواد :
رمز PHP:
<code style="white-space:nowrap"> <code> .krak:hover{
background:#FFFFCC;
color:#009933;
text-decoration:underline;
}
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>كـراك للتصميم</title>
<style>
.krak{
border:1px #999999 dashed;
height:15px;
width:80px;
font-family:Tahoma;
font-size:12px;
background:#F8F8F8;
color:#CC0099;
padding:0px 0px 0px 0px;
text-align:center;
position:relative;
}
.krak:hover{
background:#FFFFCC;
color:#009933;
text-decoration:underline;
}
</style>
</head>
<body>
<p class="krak">كراك للتصميم</p>
</body>
</html>
</code> </code>
-------
الان
ما بقى الا نضيف له ارتباط تشعبي
نروح لكود code الزر [ الداف ]
و نضيف كلاس خاص للرابط
رمز PHP:
<code style="white-space:nowrap"> <code> <p class="krak"><a class="rab6" href="http://www.www.com"></a>كراك للتصميم</p>
</code> </code>
rab6 : هذا الكلاس للرابط .
--------------
الان
نعطي الرابط خصائص له
و بتكون هذي
اهم شي نعطيه نفس طول + عرض الزر
و بتكون كذا
رمز PHP:
<code style="white-space:nowrap"> <code> a.rab6{
height:15px;
width:80px;
display:block;
position:absolute;
}
</code> </code>
-------------
و هذي الاكواد كامله لدرس مفصلنا
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>كـراك للتصميم</title>
<style>
.krak{
border:1px #999999 dashed;
height:15px;
width:80px;
font-family:Tahoma;
font-size:12px;
background:#F8F8F8;
color:#CC0099;
padding:0px 0px 0px 0px;
text-align:center;
position:relative;
}
.krak:hover{
background:#FFFFCC;
color:#009933;
text-decoration:underline;
}
a.rab6{
height:15px;
width:80px;
display:block;
position:absolute;
}
</style>
</head>
<body>
<p class="krak"><a class="rab6" href="http://www.www.com"></a>كراك للتصميم</p>
</body>
</html>
</code> </code>
أخـوكم
:
كـراك للتصميم
-
عبدالله
www.krak4des.com (http://www.krak4des.com)
و ارجوا عند النقل ذكر المصدر
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
. : : السلام عليكم و رحمة الله و بركاته : : .
! اليوم عندي لكم شرح طريقة !
. : : شرح طريقة عمل زر متحرك بتقنية Css : : .
البرنامج المستخدم
Microsoft Expression Web
-
[ نتيجة الدرس مفصل ]
V
http://www.dzbatna.com/attachments/432918d1259885729-ظƒط±ط§ظƒ-ظ„ظ„طھطµظ…ظٹظ….jpg
. : : الشرح طريقة : : .
عند فتح صفحة Html
تكون الاكواد كذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>32كـراك للتصميم</title>
</head>
<body>
</body>
</html>
</code> </code>
-----------------------
نقوم بإضافة
رمز PHP:
<code style="white-space:nowrap"> <code> <style>
</style>
</code> </code>
-----------------------
داخل الوسم :
رمز PHP:
<code style="white-space:nowrap"> <code> <head>
</head>
</code> </code>
-----------------------
فيصبح الكود code كاملاً كذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>32 كـراك للتصميم</title>
<style>
</style>
</head>
<body>
</body>
</html>
</code> </code>
-----------------------
الان
نضيف بين
رمز PHP:
<code style="white-space:nowrap"> <code> <body>
</body>
</code> </code>
هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <p></p>
</code> </code>
-----------------------
و نعطي الكود code كلاس خاص فيه
و سمينا الكلاس krak
فيصير :
رمز PHP:
<code style="white-space:nowrap"> <code> <p class="krak"></p>
</code> </code>
-----------------------
و الكلام اللي بيكون بالزر
نكتب مثلا كـراك للتصميم
فيكون كذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <p class="krak">كراك للتصميم</p>
</code> </code>
و الان خلصنا من اكواد الزر
باقي اضافة الخصائص له
من الوان و حجم و حدود . . . . . الخ
----------------------------------------------
-----------------------
--------------
طبعا الخصائص تكون داخل الوسم :
رمز PHP:
<code style="white-space:nowrap"> <code> <style>
</style>
</code> </code>
-----------------------
الان بنضيف له
خواص له
و بالترتيب
1 - الحدود .
2 - الطول .
3 - العرض .
4 - نوع الخط .
5 - حجم الخط .
6 - الخلفية .
7 - لون الخط .
8 - التباعد .
9 - المحاذاه .
10 - الموضع .
---
نفتح كتابة الخواص بـ
رمز PHP:
<code style="white-space:nowrap"> <code> .krak{
</code> </code>
ثم نكتب هذي الخواص :
رمز PHP:
<code style="white-space:nowrap"> <code> border:1px #999999 dashed;
border:1px #999999 dashed;
height:15px;
width:80px;
font-family:Tahoma;
font-size:12px;
background:#F8F8F8;
color:#CC0099;
padding:0px 0px 0px 0px;
text-align:center;
position:relative;
</code> </code>
و نغلقها بـ
رمز PHP:
<code style="white-space:nowrap"> <code> }
</code> </code>
فيصير كود code الصفحة كامل كذا :
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>كـراك للتصميم</title>
<style>
.krak{
border:1px #999999 dashed;
height:15px;
width:80px;
font-family:Tahoma;
font-size:12px;
background:#F8F8F8;
color:#CC0099;
padding:0px 0px 0px 0px;
text-align:center;
position:relative;
}
</style>
</head>
<body>
<p class="krak">كراك للتصميم</p>
</body>
</html>
</code> </code>
--------------------------------------------------------------------------------------------
و الان صار عندنا زر ثابت
لكن لا يوجد عليه رابط
ولا يوجد عليه تاثير عند المرور
الان
نبدا باضافة الخواص عند مرور الماوس عليه
+
نضيف له ارتباط تشعبي
---
نقوم باضافة هوفر للزر و اعطائه خواص له عند مرور الماوس عليه
طبعا
انا عطيته خاصية
1 - تغير لون الخط .
2 - تغير لون الخلفية .
3 - تسطير للخط .
و هذي هي الاكواد :
رمز PHP:
<code style="white-space:nowrap"> <code> .krak:hover{
background:#FFFFCC;
color:#009933;
text-decoration:underline;
}
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>كـراك للتصميم</title>
<style>
.krak{
border:1px #999999 dashed;
height:15px;
width:80px;
font-family:Tahoma;
font-size:12px;
background:#F8F8F8;
color:#CC0099;
padding:0px 0px 0px 0px;
text-align:center;
position:relative;
}
.krak:hover{
background:#FFFFCC;
color:#009933;
text-decoration:underline;
}
</style>
</head>
<body>
<p class="krak">كراك للتصميم</p>
</body>
</html>
</code> </code>
-------
الان
ما بقى الا نضيف له ارتباط تشعبي
نروح لكود code الزر [ الداف ]
و نضيف كلاس خاص للرابط
رمز PHP:
<code style="white-space:nowrap"> <code> <p class="krak"><a class="rab6" href="http://www.www.com"></a>كراك للتصميم</p>
</code> </code>
rab6 : هذا الكلاس للرابط .
--------------
الان
نعطي الرابط خصائص له
و بتكون هذي
اهم شي نعطيه نفس طول + عرض الزر
و بتكون كذا
رمز PHP:
<code style="white-space:nowrap"> <code> a.rab6{
height:15px;
width:80px;
display:block;
position:absolute;
}
</code> </code>
-------------
و هذي الاكواد كامله لدرس مفصلنا
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>كـراك للتصميم</title>
<style>
.krak{
border:1px #999999 dashed;
height:15px;
width:80px;
font-family:Tahoma;
font-size:12px;
background:#F8F8F8;
color:#CC0099;
padding:0px 0px 0px 0px;
text-align:center;
position:relative;
}
.krak:hover{
background:#FFFFCC;
color:#009933;
text-decoration:underline;
}
a.rab6{
height:15px;
width:80px;
display:block;
position:absolute;
}
</style>
</head>
<body>
<p class="krak"><a class="rab6" href="http://www.www.com"></a>كراك للتصميم</p>
</body>
</html>
</code> </code>
أخـوكم
:
كـراك للتصميم
-
عبدالله
www.krak4des.com (http://www.krak4des.com)
و ارجوا عند النقل ذكر المصدر
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
