ابو محاله
07-12-2003, 11:58:08 PM
مسيكم بالخير يا وجوه الخير
درسنا اليوم هو كيفيه تلوين السكرول بار ( شريط تحريك الصفحه ) لمتصفح الزائر اثناء تصفحه موقعك
الدرس سهل جدا ولكنه يحتاج الى قليل من التركيز
اولا يتم ذلك من خلال تقنيه الانماط المتعاقبه ( CSS ) وهذه التقنيه توفر لنا خيارين لعمل ذلك وهما :
* زرع اوامر CSS في نفس الصفحه التى يتم استعراضها من قبل الزائر وذلك بين واصفتي هيدر ( head) في شفره الـ html للصفحة .
* او جلب ملف خارجي الىالصفحه بامتداد CSS يتم وضع الاوامر به وهو الخيار الافضل طبعا .
سوف اشرح الطريقتين .. ولكن دعونا نتعرف على اوامر الـ CSS التى نحتاجها لعمل التلوين للسكرول بار ..
هذه هي الاوامر كما هو موضح بالشفره التالية :
SCROLLBAR-FACE-COLOR: #2a5f89; // لون مزلاق الشريط
SCROLLBAR-HIGHLIGHT-COLOR: #1A3953; // لون الاضاءه على حافة مزلاق الشريط
SCROLLBAR-SHADOW-COLOR: #1A3953; // لون الظل على مزلاق الشريط
SCROLLBAR-3DLIGHT-COLOR: #2a5f89; // لون الاضاءه على مزلاق الشريط لجعله ثلاثي الابعاد
SCROLLBAR-ARROW-COLOR: #e27c00; // لون الاسهم في المزلاق
SCROLLBAR-DARKSHADOW-COLOR: #2a5f89; // لون ظل المزلاق على ميناء الشريط
SCROLLBAR-TRACK-COLOR: #2a5f89; // لون ارضية او ميناء الشريط
كل ما عليك هو تغيير ارقام الالوان لما يناسبك في كل امر
الان ناتي لكيفيه استخدام الكود في موقعنا حسب الطريقتين انفتا الذكر :
اولا : زرع اوامر CSS في شفر الـ HTML للصفحه ويتم ذلك باستخدام الكود التالي :
<style type = "text/css">
هنا سيتم ادراج اوامر css
التى قمنا بشرحها اعلاه
</style>
* ماهي وظيفه هذه الشفره ؟؟؟
وظيفتها هو اعلام المتصفح بان ما هو مدرج بينها هي اوامر css لكي يقوم المتصفح بترجمتها وتطبيق الوظائف التى طلبناها من خلال تقنيه الانماط المتعاقيه ( css )
حسناً الان دعونا نلقي نظره على شكل الكود كاملاً ومكان زرعه في الصفحه
سيصبح الكود بهذا الشكل بعد زرعه في شفره الـ html في الصفحة :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<!-- ATHCO GRAPHICS www.athco.com.sa -->
<meta http-equiv="Content-Language" content="ar-sa">
<title>اسم الصفحة</title>
<!-- بداية الكود -->
<style type = "text/css">
body {
SCROLLBAR-FACE-COLOR: #2a5f89;
SCROLLBAR-HIGHLIGHT-COLOR: #1A3953;
SCROLLBAR-SHADOW-COLOR: #1A3953;
SCROLLBAR-3DLIGHT-COLOR: #2a5f89;
SCROLLBAR-ARROW-COLOR: #e27c00;
SCROLLBAR-DARKSHADOW-COLOR: #2a5f89;
SCROLLBAR-TRACK-COLOR: #2a5f89;
}
</style>
<!-- نهاية الكود -->
</head>
من اراد استخدام هذه الطريقه وضعت له جميع الاوامر بالملف المرفق قم بتحميله واتبع التعليمات المذكورة بداخله
يتبع شرح طريقه جلب ملف خارجي يحتوي على اوامر css
درسنا اليوم هو كيفيه تلوين السكرول بار ( شريط تحريك الصفحه ) لمتصفح الزائر اثناء تصفحه موقعك
الدرس سهل جدا ولكنه يحتاج الى قليل من التركيز
اولا يتم ذلك من خلال تقنيه الانماط المتعاقبه ( CSS ) وهذه التقنيه توفر لنا خيارين لعمل ذلك وهما :
* زرع اوامر CSS في نفس الصفحه التى يتم استعراضها من قبل الزائر وذلك بين واصفتي هيدر ( head) في شفره الـ html للصفحة .
* او جلب ملف خارجي الىالصفحه بامتداد CSS يتم وضع الاوامر به وهو الخيار الافضل طبعا .
سوف اشرح الطريقتين .. ولكن دعونا نتعرف على اوامر الـ CSS التى نحتاجها لعمل التلوين للسكرول بار ..
هذه هي الاوامر كما هو موضح بالشفره التالية :
SCROLLBAR-FACE-COLOR: #2a5f89; // لون مزلاق الشريط
SCROLLBAR-HIGHLIGHT-COLOR: #1A3953; // لون الاضاءه على حافة مزلاق الشريط
SCROLLBAR-SHADOW-COLOR: #1A3953; // لون الظل على مزلاق الشريط
SCROLLBAR-3DLIGHT-COLOR: #2a5f89; // لون الاضاءه على مزلاق الشريط لجعله ثلاثي الابعاد
SCROLLBAR-ARROW-COLOR: #e27c00; // لون الاسهم في المزلاق
SCROLLBAR-DARKSHADOW-COLOR: #2a5f89; // لون ظل المزلاق على ميناء الشريط
SCROLLBAR-TRACK-COLOR: #2a5f89; // لون ارضية او ميناء الشريط
كل ما عليك هو تغيير ارقام الالوان لما يناسبك في كل امر
الان ناتي لكيفيه استخدام الكود في موقعنا حسب الطريقتين انفتا الذكر :
اولا : زرع اوامر CSS في شفر الـ HTML للصفحه ويتم ذلك باستخدام الكود التالي :
<style type = "text/css">
هنا سيتم ادراج اوامر css
التى قمنا بشرحها اعلاه
</style>
* ماهي وظيفه هذه الشفره ؟؟؟
وظيفتها هو اعلام المتصفح بان ما هو مدرج بينها هي اوامر css لكي يقوم المتصفح بترجمتها وتطبيق الوظائف التى طلبناها من خلال تقنيه الانماط المتعاقيه ( css )
حسناً الان دعونا نلقي نظره على شكل الكود كاملاً ومكان زرعه في الصفحه
سيصبح الكود بهذا الشكل بعد زرعه في شفره الـ html في الصفحة :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<!-- ATHCO GRAPHICS www.athco.com.sa -->
<meta http-equiv="Content-Language" content="ar-sa">
<title>اسم الصفحة</title>
<!-- بداية الكود -->
<style type = "text/css">
body {
SCROLLBAR-FACE-COLOR: #2a5f89;
SCROLLBAR-HIGHLIGHT-COLOR: #1A3953;
SCROLLBAR-SHADOW-COLOR: #1A3953;
SCROLLBAR-3DLIGHT-COLOR: #2a5f89;
SCROLLBAR-ARROW-COLOR: #e27c00;
SCROLLBAR-DARKSHADOW-COLOR: #2a5f89;
SCROLLBAR-TRACK-COLOR: #2a5f89;
}
</style>
<!-- نهاية الكود -->
</head>
من اراد استخدام هذه الطريقه وضعت له جميع الاوامر بالملف المرفق قم بتحميله واتبع التعليمات المذكورة بداخله
يتبع شرح طريقه جلب ملف خارجي يحتوي على اوامر css