شرح بالتفصيل عمل زر متحرك بتقنية Css

by شجون Thu Sep 16, 2010 1:34 am

. : : شرح عمل زر متحرك بتقنية Css : : .
البرنامج المستخدم
Microsoft Expression Web
-

شرح بالتفصيل عمل زر متحرك بتقنية Css

[ نتيجة الدرس ]
V

شرح بالتفصيل عمل زر متحرك بتقنية Css Attachment

. : : الشرح : : .
عند فتح صفحة Html
تكون الاكواد كذا :

[size=9]<!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>

-----------------------
نقوم بإضافة
رمز PHP:
<style>
style>

-----------------------
داخل الوسم :
رمز PHP:
<head>
head>

-----------------------
فيصبح الكود كاملاً كذا :
رمز PHP:
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>

-----------------------
الان
نضيف بين
رمز PHP:
<body>
body>

هذا الكود
رمز PHP:
<p>p>

-----------------------
و نعطي الكود كلاس خاص فيه
و سمينا الكلاس krak
فيصير :
رمز PHP:
<p class="krak">p>

-----------------------
و الكلام اللي بيكون بالزر
نكتب مثلا كـراك للتصميم
فيكون كذا :
رمز PHP:
<p class="krak">كراك للتصميمp>

و الان خلصنا من اكواد الزر
باقي اضافة الخصائص له
من الوان و حجم و حدود . . . . . الخ
----------------------------------------------
-----------------------
--------------
طبعا الخصائص تكون داخل الوسم :
رمز PHP:
<style>
style>

-----------------------
الان بنضيف له
خواص له
و بالترتيب
1 - الحدود .
2 - الطول .
3 - العرض .
4 - نوع الخط .
5 - حجم الخط .
6 - الخلفية .
7 - لون الخط .
8 - التباعد .
9 - المحاذاه .
10 - الموضع .
---
نفتح كتابة الخواص بـ
رمز PHP:
.krak{

ثم نكتب هذي الخواص :
رمز PHP:
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;

و نغلقها بـ
رمز PHP:
}

فيصير كود الصفحة كامل كذا :
رمز PHP:
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>

--------------------------------------------------------------------------------------------

و الان صار عندنا زر ثابت
لكن لا يوجد عليه رابط
ولا يوجد عليه تاثير عند المرور
الان
نبدا باضافة الخواص عند مرور الماوس عليه
+
نضيف له ارتباط تشعبي
---
نقوم باضافة هوفر للزر و اعطائه خواص له عند مرور الماوس عليه
طبعا
انا عطيته خاصية
1 - تغير لون الخط .
2 - تغير لون الخلفية .
3 - تسطير للخط .
و هذي هي الاكواد :
رمز PHP:
.krak:hover{
background:#FFFFCC;
color:#009933;
text-decoration:underline;
}

رمز PHP:
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>

-------

الان
ما بقى الا نضيف له ارتباط تشعبي
نروح لكود الزر [ الداف ]
و نضيف كلاس خاص للرابط
رمز PHP:
<p class="krak"><a class="rab6" href="http://www.www.com">a>كراك للتصميمp>

rab6 : هذا الكلاس للرابط .
--------------
الان
نعطي الرابط خصائص له
و بتكون هذي
اهم شي نعطيه نفس طول + عرض الزر
و بتكون كذا
رمز PHP:
a.rab6{
height:15px;
width:80px;
display:block;
position:absolute;
}

-------------
و هذي الاكواد كامله لدرسنا
رمز PHP:
[size=9] 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;
google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
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>