Xacker
04-04-03, 12:20 PM
الموضوع رد على استفسار الاخت شيماء المصرية وقد وضع في موضوع جديد لتعم الفائدة ([اخي العزيز ،، يتوجب عليك اضافة رد لرؤية الرابط])
شو على الموعد :D لا للاسف تاخرت 3 ارباع الساعة سوري
قومي بتحميل الملف [اخي العزيز ،، يتوجب عليك اضافة رد لرؤية الرابط] اللي سلفا محملتيه بس للاعضاء الاخرين اللي حابين يقروا الطريقة كمان
هلق فكي الضغط عنه
الان قومي بفتح ملف index.html بالفرونت بيج
(بالنسبة لي فتحته بالمفكرة)
قومي باستعراض شفرته الان والتي ستظهر بالشكل
<html>
<!-- START HEAD -->
<head>
<title>Your Title Goes Here</title>
<!-- this page has been created by Fatal-Terror for educational purposes only, ENJOY -->
<!-- CSS CODES START HERE -->
<style type=****/css>
body {font-family:verdana; font-size: 12px; color:white; overflow:hidden}
.button { font-family:verdana; border: 1 solid #A3A3D6 }
.button-Over { background-color: #A3A3D6; border: 1 solid #FFFFFF }
td { font-family:verdana; font-size:11px;}
ul { MARGIN-TOP: 3px; MARGIN-BOTTOM: 3px;}
A
{
COLOR: white;
****-DECORATION: none
}
.copy a
{
COLOR: Black;
****-DECORATION: none
}
A:hover
{
color: #FFCC00;
****-DECORATION: none
}
</style>
<!-- CSS CODES ENDS HERE -->
</head>
<!-- START BODY -->
<body bgcolor=black>
<table border=1 cellpadding=0 cellspacing=1 width="103%" height="100" style="position:absolute; top:0px; left:-2px;">
<tr><font color=white face=verdana,tahoma,arial size=1>
<td align=center width="25%"><A href="link1.html" target="main">link 1</a></td>
<td align=center width="25%"><a href="link2.html" target="main">link 2</a></td>
<td align=center width="25%"><a href="link3.html" target="main">link 3</a></td>
<td align=center width="25%"><a href="link4.html" target="main">link 4</a></td>
</font>
</tr>
</table>
<br>
<table border=0 cellpadding=0 cellspacing=1 width="103%" height="100" style="position:absolute; top:101px; left:-2px;">
<iframe src="body.html" name=main width="102%" height="600" frameborder=0 scrolling=auto></iframe>
</body>
<!-- END BODY -->
</html>
<!-- END PAGE -->
شرح شفرة الصفحة:
----------------
<!-- START HEAD -->
هذا ليس بكود ولكنه تعليق او ملاحظة فكل كلام يوضع بين
<!-- -->
لا يظهر في التصفح وهو عبارة عن ملاحظة او تعليق او حتى مرشد في حال كنت مصمم صفحات ويب مجانية ان اردت وضعه او لا فهذا يعود اليك
اقوم انا باستخدامه في حال كانت الشفرة طويلة واردت الوصول مثلا الى نهاية كود الجسم فابحث عن
<!-- END BODY -->
مثلا (ليس بالضرورة الكود نفسه لكني استخدم ملاحظات مميزة واحفظها واستخدمها لكافة صفحاتي هيك مفيش عندي اي مشكل بالتنقل ضمن الكود
------------------------------------
<style type=****/css>
body {font-family:verdana; font-size: 12px; color:white; overflow:hidden}
.button { font-family:verdana; border: 1 solid #A3A3D6 }
.button-Over { background-color: #A3A3D6; border: 1 solid #FFFFFF }
td { font-family:verdana; font-size:11px;}
ul { MARGIN-TOP: 3px; MARGIN-BOTTOM: 3px;}
A
{
COLOR: white;
****-DECORATION: none
}
.copy a
{
COLOR: Black;
****-DECORATION: none
}
A:hover
{
color: #FFCC00;
****-DECORATION: none
}
</style>
لا اعتقد ان الفرونت بيج يقدم خدمة اكواد
CSS
مجانا ولا آبه لذلك صراحة المهم لاقوم بشرح الكود لك
<style type=****/css>
يحدد المعرف style ان هذا الكود هو من نوع لغة
css عندما اعطيه الخاصة
type=****/css ليس من الضروري كتابتها ويكن الاستغناء عنها فقط ب
<style> كون المتصفحات الحالية لا تدعم كافة معرفات لغة CSS
(قمت بشرح بسيط عن افكار لغة CSS في اربع دروس سابقة توقفت الان كون الامر سيحتاج وقت وصبر طويل لها ومن اراد تعلمها فليقم بتصفح اكواد الصفحات ويقراها بعناية ولمراجعة الدروس الاربعة انقري الرابط التالي
[اخي العزيز ،، يتوجب عليك اضافة رد لرؤية الرابط]
)
نتابع
body {font-family:verdana; font-size: 12px; color:white; overflow:hidden}
تحدد الخاصة body ان كافة التاثيرات والقيم التي سيتم اعطاؤها لها ستؤثر على ما يحويه معرف الجسم
<body>تؤثر على المحتويات هنا</body>
font-family:verdana; تحدد هذه الخاصة ان نوع الخط الذي سيتم استخدامه لعرض محتويات الصفحة هو خط verdana
يمكن تعديل الخاصة الى الشكل
font-family:verdana,ms sans serif,tahoma,arial; يقوم بهذه الحالة باستخدام خط verdana فان كان الخط مفقودا يقوم باستخدام الخط الذي تم تحديده بعده وهو خط ms sans serif وهكذا
مع ملاحظة ان كل خاصة يجب انهاؤها بالفاصلة المنقوطة (;) قبل وضع خاصة بعدها
font-size:12px; يقوم بتحديد حجم الخط لما يحويه الجسم ويقوم بتحديد القيمة بالبكسل (px) فـ 12 بكس تقابل تقريبا حجم 2
size=2
color:white يقوم بتحديد اللون للنص في الجسم ويمكن اعطاؤه قيمة لونية بالشكل (ffffff) والتي ترمز الى اللون الابيض او اسم اللون مثلا white black red الخ او قيمة RGB بالشكل
RGB(0,0,0) مثلا لكن يفضل استخدام الاسم او القيمة بالهكس
overflow:hidden يقوم باخفاء شريط التمرير في المتصفح ويملك احدى قيمتين overflow للاخفاء و auto باعتقادي (لم اجربها) لاظهار الشريط فقط في حال يوجد كلام يزيد عما يتسع في الشاشة
سبب اخفائه هنا هو قيامي باستخدام صفحة ضمن صفحة وشريط التمرير سيؤذي مظهر الصفحة جربي وشوفي بنفسك لانه ان وجد وبجانبه وجد شريط تمرير الصفحة الاخرى بصير المشهد مروع
.button { font-family:verdana; border: 1 solid #A3A3D6 } لا اعرف لم استخدمته ربما ان قمت باستخدام فورم لملئ استمارة مثلا عندها يقوم هذا الكود بالتاثير على شكل ازرار الفورم او اي زر في الصفحة ان وجد مثلا في حال استخدام كود جافا سكريبت
المهم ساشرح ما خفي فيه
border: 1 solid #A3AD6
الخاصة border تحدد اطار الزر يعني حده الخارجي
القيمة 1 هو عرض الاطار الخارجي للزر (الاطار الابيض اللي بيظهر شفاف حوله)
القيمة solid تظهره بشكل عادي مستقيم هناك قيم اخرى لم اقم بالبحث عنها لكنا تشبه القيم الموجودة في فيجوال بيسك اعتقد اسمها dots و و و مش متاكد
القيمة اللونية تحدد لون الاطار
.button-Over { background-color: #A3A3D6; border: 1 solid #FFFFFF } بنفس الطريقة لكن هنا تقومين باعطاء الزر الخاصة
class=button.Over عندها يقوم الكود السابق بالتاثير عليه
(راجعى دروس ال css اللي كتبتها لمزيد من المعلومات حول class=)
td { font-family:verdana; font-size:11px;} يقوم بالتاثير على معرف الخلية في الجداول
شو على الموعد :D لا للاسف تاخرت 3 ارباع الساعة سوري
قومي بتحميل الملف [اخي العزيز ،، يتوجب عليك اضافة رد لرؤية الرابط] اللي سلفا محملتيه بس للاعضاء الاخرين اللي حابين يقروا الطريقة كمان
هلق فكي الضغط عنه
الان قومي بفتح ملف index.html بالفرونت بيج
(بالنسبة لي فتحته بالمفكرة)
قومي باستعراض شفرته الان والتي ستظهر بالشكل
<html>
<!-- START HEAD -->
<head>
<title>Your Title Goes Here</title>
<!-- this page has been created by Fatal-Terror for educational purposes only, ENJOY -->
<!-- CSS CODES START HERE -->
<style type=****/css>
body {font-family:verdana; font-size: 12px; color:white; overflow:hidden}
.button { font-family:verdana; border: 1 solid #A3A3D6 }
.button-Over { background-color: #A3A3D6; border: 1 solid #FFFFFF }
td { font-family:verdana; font-size:11px;}
ul { MARGIN-TOP: 3px; MARGIN-BOTTOM: 3px;}
A
{
COLOR: white;
****-DECORATION: none
}
.copy a
{
COLOR: Black;
****-DECORATION: none
}
A:hover
{
color: #FFCC00;
****-DECORATION: none
}
</style>
<!-- CSS CODES ENDS HERE -->
</head>
<!-- START BODY -->
<body bgcolor=black>
<table border=1 cellpadding=0 cellspacing=1 width="103%" height="100" style="position:absolute; top:0px; left:-2px;">
<tr><font color=white face=verdana,tahoma,arial size=1>
<td align=center width="25%"><A href="link1.html" target="main">link 1</a></td>
<td align=center width="25%"><a href="link2.html" target="main">link 2</a></td>
<td align=center width="25%"><a href="link3.html" target="main">link 3</a></td>
<td align=center width="25%"><a href="link4.html" target="main">link 4</a></td>
</font>
</tr>
</table>
<br>
<table border=0 cellpadding=0 cellspacing=1 width="103%" height="100" style="position:absolute; top:101px; left:-2px;">
<iframe src="body.html" name=main width="102%" height="600" frameborder=0 scrolling=auto></iframe>
</body>
<!-- END BODY -->
</html>
<!-- END PAGE -->
شرح شفرة الصفحة:
----------------
<!-- START HEAD -->
هذا ليس بكود ولكنه تعليق او ملاحظة فكل كلام يوضع بين
<!-- -->
لا يظهر في التصفح وهو عبارة عن ملاحظة او تعليق او حتى مرشد في حال كنت مصمم صفحات ويب مجانية ان اردت وضعه او لا فهذا يعود اليك
اقوم انا باستخدامه في حال كانت الشفرة طويلة واردت الوصول مثلا الى نهاية كود الجسم فابحث عن
<!-- END BODY -->
مثلا (ليس بالضرورة الكود نفسه لكني استخدم ملاحظات مميزة واحفظها واستخدمها لكافة صفحاتي هيك مفيش عندي اي مشكل بالتنقل ضمن الكود
------------------------------------
<style type=****/css>
body {font-family:verdana; font-size: 12px; color:white; overflow:hidden}
.button { font-family:verdana; border: 1 solid #A3A3D6 }
.button-Over { background-color: #A3A3D6; border: 1 solid #FFFFFF }
td { font-family:verdana; font-size:11px;}
ul { MARGIN-TOP: 3px; MARGIN-BOTTOM: 3px;}
A
{
COLOR: white;
****-DECORATION: none
}
.copy a
{
COLOR: Black;
****-DECORATION: none
}
A:hover
{
color: #FFCC00;
****-DECORATION: none
}
</style>
لا اعتقد ان الفرونت بيج يقدم خدمة اكواد
CSS
مجانا ولا آبه لذلك صراحة المهم لاقوم بشرح الكود لك
<style type=****/css>
يحدد المعرف style ان هذا الكود هو من نوع لغة
css عندما اعطيه الخاصة
type=****/css ليس من الضروري كتابتها ويكن الاستغناء عنها فقط ب
<style> كون المتصفحات الحالية لا تدعم كافة معرفات لغة CSS
(قمت بشرح بسيط عن افكار لغة CSS في اربع دروس سابقة توقفت الان كون الامر سيحتاج وقت وصبر طويل لها ومن اراد تعلمها فليقم بتصفح اكواد الصفحات ويقراها بعناية ولمراجعة الدروس الاربعة انقري الرابط التالي
[اخي العزيز ،، يتوجب عليك اضافة رد لرؤية الرابط]
)
نتابع
body {font-family:verdana; font-size: 12px; color:white; overflow:hidden}
تحدد الخاصة body ان كافة التاثيرات والقيم التي سيتم اعطاؤها لها ستؤثر على ما يحويه معرف الجسم
<body>تؤثر على المحتويات هنا</body>
font-family:verdana; تحدد هذه الخاصة ان نوع الخط الذي سيتم استخدامه لعرض محتويات الصفحة هو خط verdana
يمكن تعديل الخاصة الى الشكل
font-family:verdana,ms sans serif,tahoma,arial; يقوم بهذه الحالة باستخدام خط verdana فان كان الخط مفقودا يقوم باستخدام الخط الذي تم تحديده بعده وهو خط ms sans serif وهكذا
مع ملاحظة ان كل خاصة يجب انهاؤها بالفاصلة المنقوطة (;) قبل وضع خاصة بعدها
font-size:12px; يقوم بتحديد حجم الخط لما يحويه الجسم ويقوم بتحديد القيمة بالبكسل (px) فـ 12 بكس تقابل تقريبا حجم 2
size=2
color:white يقوم بتحديد اللون للنص في الجسم ويمكن اعطاؤه قيمة لونية بالشكل (ffffff) والتي ترمز الى اللون الابيض او اسم اللون مثلا white black red الخ او قيمة RGB بالشكل
RGB(0,0,0) مثلا لكن يفضل استخدام الاسم او القيمة بالهكس
overflow:hidden يقوم باخفاء شريط التمرير في المتصفح ويملك احدى قيمتين overflow للاخفاء و auto باعتقادي (لم اجربها) لاظهار الشريط فقط في حال يوجد كلام يزيد عما يتسع في الشاشة
سبب اخفائه هنا هو قيامي باستخدام صفحة ضمن صفحة وشريط التمرير سيؤذي مظهر الصفحة جربي وشوفي بنفسك لانه ان وجد وبجانبه وجد شريط تمرير الصفحة الاخرى بصير المشهد مروع
.button { font-family:verdana; border: 1 solid #A3A3D6 } لا اعرف لم استخدمته ربما ان قمت باستخدام فورم لملئ استمارة مثلا عندها يقوم هذا الكود بالتاثير على شكل ازرار الفورم او اي زر في الصفحة ان وجد مثلا في حال استخدام كود جافا سكريبت
المهم ساشرح ما خفي فيه
border: 1 solid #A3AD6
الخاصة border تحدد اطار الزر يعني حده الخارجي
القيمة 1 هو عرض الاطار الخارجي للزر (الاطار الابيض اللي بيظهر شفاف حوله)
القيمة solid تظهره بشكل عادي مستقيم هناك قيم اخرى لم اقم بالبحث عنها لكنا تشبه القيم الموجودة في فيجوال بيسك اعتقد اسمها dots و و و مش متاكد
القيمة اللونية تحدد لون الاطار
.button-Over { background-color: #A3A3D6; border: 1 solid #FFFFFF } بنفس الطريقة لكن هنا تقومين باعطاء الزر الخاصة
class=button.Over عندها يقوم الكود السابق بالتاثير عليه
(راجعى دروس ال css اللي كتبتها لمزيد من المعلومات حول class=)
td { font-family:verdana; font-size:11px;} يقوم بالتاثير على معرف الخلية في الجداول