هل تقومون الآن بتصميم
صفحة ويب خاصة بكم؟ أو هل لديكم صفحة ويب وترغبون بجعلها مميزة أكثر؟
الآن اجعل صفحتك كذلك أي مميزة وجميلة ورائعة بإضافة عنصر بسيط وظريف وهو ساعة
دائرية متحركة على صفحة الويب وتلاحق مؤشر الفأرة أينما ذهبت ويتحرك حولها
التاريخ واليوم.
المزايا الأساسية
في الساعة المتحركة
-
ساعة دائرية متحركة تحتوي على عقرب الساعة والدقيقة والثانية.
-
اليوم والتاريخ يدوران حول الساعة.
-
تتبع مؤشر الماوس (مؤشر الفأرة) وبتأثير التفكك والتجمع.
-
وهنالك سلبية هي أن
الساعة قد تصبح بطيئة وخصوصاً عن استعراض الصفحة في الأجهزة البطيئة أو
تعدد عناصر الـ Active والـ
Java والفلاش في الصفحة.
وفيما يلي الكود الخاص بالساعة و سأوضح كيفية إضافته على صفحة الويب في برنامج
Microsoft FrontPage تالياً:-
تستطيع الحصول على
الكود
من هنا
أيضاً
او هنا كملف مضغوط
-
انسخ الكود أعلاه.
-
قم بفتح صفحة الويب الخاصة بك التي تريد إضافة الساعة إليها باستخدام
برنامج فرونت بيج.
-
اذهب إلى قائمة "إدراج"
Insert ثم
"Web Component..." أو أنقر
الزر المخصص لهذا الأمر على الشريط "قياسي".
-
انقر على "عناصر تحكم متقدمة" من القائمة "نوع
المكون" تجدها في آخر القائمة.
-
اختر
"HTML" من قائمة "اختيار التأثير" ثم
إنهاء.
-
قم الآن بلصق الكود في المربع
"علامة HTML"
الذي سوف يظهر لك ثم "موافق".
عناصر الكود التي قد تهمك وفيها يمكنك أن تعدل في صفات الساعة:-
-
لتعديل ألوان الساعة:-
dCol='000099';//date colour.
fCol='668099';//face colour.
sCol='FF0000';//seconds colour.
mCol='000000';//minutes colour.
hCol='000000';//hours colour.
تمثل
ألوان الساعة حيث أن ..
القيمة dCol
تمثل لون واليوم
والتاريخ (النص الذي يدور حول الساعة).
القيمة
fCol تمثل لون
الأرقام.
القيمة sCol تمثل لون
عقرب الثواني.
القيمة mCol تمثل لون
عقرب الدقائق.
القيمة hCol تمثل لون
عقرب الساعات.
ولتغيير اللون قم بتغيير القيم التي بين إشارتيّ
' ' المكون من ستة قيم عبارة عن أرقام وقد يدخل
FF أو
CC التي تهمك أو أحرف
أخرى تتدخل في حال الألوان الأكثر دقة.
ولاحظ أنني ذكرت في تعريف كل قيمة أنها تمثل ألوان عناصر الساعة وهي في
الحقيقة تمثل الخصائص التي تستطيع الإضافة عليها مثل نوع الخط ولكن هنا نوع
الخط ونمطه ذكر في مواقع أخرى ألغت الحاجة لتعيينها.
** معلومة تهمك وتساعدك:-
ولتعرف أرقام الألوان اذهب إلى الإشارة الخاصة بتغيير لون النص أو التعبئة
أو غير ذلك في برنامج فرونت بيج وأختر ألوان إضافية ستظهر لك نافذة الألوان قم باختيار اللون الذي تريد
ثم أنضر في الزاوية العليا من النافذة ولاحظ القيمة التي داخل المربع الذي
يقابل كلمة "القيمة" أو
"Value"
قم باستخراج الأرقام فقط بدون الفواصل والأقواس أو أي شيء آخر وإذا ظهرت
القيمة FF فهي ضمن
إعدادات اللون لا تتجاهلها. مثال اللون الأحمر ستظهر القيمة Hex={FF,00,00}
الذي يهمك هو FF0000
وهذا يدلك على أن الستة قيم هي عبارة عن ثلاثة أزواج الزوج الأول ( من
اليسار إلى اليمين) يمثل اللون الأحمر الزوج الثاني يمثل اللون الخضر
والزوج الثالث يمثل اللون الأزرق والأرقام بشكل عام وهي شدة الضوء والقيمة
FF هي أن تفعيل اللون
بكامله (الحرف F
اختصار Full) القيمة
CC هي استعمال نصف
قيمة شدة اللون (الحرف C
اختصار لـ Center).
والقيمة 00
هي تعطيل اللون, على كل حال قد تكون
تفسيراتي للألوان خاطئة ولكن المهم أن تعرف كيف تتعرف الرمز الخاص بكل لون
باستخدام رموز تغيير اللون.
-
لتعديل موقع
الساعة وحجمها:-
ClockHeight=40;
تمثل طول الساعة فإذا قمت بزيادة القيمة
أصبحت الساعة إهليجية (بيضوية) الشكل رأسياً وتستطيع إنقاص القيمة
لتصبح الساعة إهليجية أفقياً.
ClockWidth=40;
تمثل عرض الساعة فإذا قمت بزيادة القيمة أصبحت الساعة إهليجية
(بيضوية) الشكل أفقياًً وتستطيع إنقاص القيمة لتصبح الساعة إهليجية
رأسياًً.
وفي كلا الحالتين يجب مراعاة النسبة بين الطول والعرض بحيث لا يزيد
الفرق بين القيمتين عن 15 - 25 ويفضل الزيادة على القيمة الموجودة
حاليا بدل الإنقاص في القيمة إذ أن القيمة 40 هي أقل قيمة ممكنة
تقريباً.
ClockFromMouseY=70; تمثل بعد
مركز الساعة عن مؤشر الفأرة رأسياً.
ClockFromMouseX=50;
تمثل بعد مركز الساعة عن مؤشر الفأرة أفقياً.
وهنا أود أن أقول أن لا تقل القيمتين عن 40 أو يجب علك مراعاة أن لا تتلامس
الساعة ومؤشر الفأرة إذا ما قمت بتغيير القيم الخاصة بحجم الساعة.
-
إعدادات أخرى:-
هنالك بعض الإعدادات الإضافية التي لا أنصح بتغييرها إلا بالشكل البسيط
جداً بالنسبة للقيم الصغيرة بالنسبة لعناصر معينة سأوضحها تالياً أو بتغيير
بعض البيانات بدقة وحذر مثل تغيير أسماء الأيام.
-
d=new Array
وما يتبعها
بين القوسين من أسماء الأيام بالانجليزية.
-
m=new Array وما يتبعها بين القوسين من أسماء الأشهر
بالإنجليزية.
في كلتا القيمتين إذا رغبت في تعريب البيانات فقم بتعريبها بتغيير كل اسم
على حدا وليس كل الذي بين القوسين مرة واحدة.
-
القيم التالية لا تقم
بالتغيير فيها أبداً إلا إذا كنت صاحب خبرة حيث أي تغيير سوف يقوم على فقد
جمالية الساعة (خربطة عقارب الساعة):-
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
-
speed=0.5; خاص بسرعة إعادة تجمع إلى بيانات بعد تحريك الفأرة وكلم
زدت القيمة زادت السرعة ولكن لا تقم بالتغيير عليها بشكل كبير لألا تفقد
جمالية التحريك.
-
step=0.06; خاص بسرعة دوران البيانات ولا تقم بزيادة القيمة أو
إنقاصها إلا في حدود الأجزاء من المائة.
-
أما باقي الخيارات والعناصر والقيم فأحرص على عدم التغيير فيها إلا إذا كنت
محترفاً أو إذا كنت تريد العبث بها للتسلية والتجريب.
وآمل
بذلك أني قدمت لكم الفائدة .
والحمد
لله رب العلمين