اجعل صفحة الويب الخاصة بك تنبض بالحياة

توفر مواصفات HTML 4.0 الجديدة التي حددتها منظمة W3C ( www.w3c.org ) أدوات أكثر قوة لكل مصمم ويب، وهذا تغيير يؤثر على جميع مطوري ومصممي الويب الذين فكروا في التأثيرات الديناميكية في الماضي يمكن الآن تحقيق ما لا يمكن تصوره بسهولة بمساعدة DHTML وCSS. فيما يلي وصف تفصيلي لتنفيذ بعض التأثيرات أثناء عملية تجميع صفحة الويب، وآمل أن تتمكن من استخدامه لإضفاء الحيوية على صفحة الويب الخاصة بك.

* تقنية القائمة

إذا كان الأشخاص الذين زاروا مواقع Microsoft وMacromedia حريصين، فسوف يلاحظون بالتأكيد تقنية القائمة. انقر لعرض قائمة فرعية، ثم انقر مرة أخرى لإخفاء القائمة الفرعية، فهي مثيرة للاهتمام وعملية للغاية. قام المؤلف بتنزيل هاتين الصفحتين على التوالي، وبعد تحليل الكود المصدري، وجدت أنهما لم يستخدما نفس الطريقة، ولكلا الطريقتين إيجابيات وسلبيات خاصة بهما.

يستخدم Macromedia تقنية متعددة الصفحات. وهذا يعني أولاً إنشاء صفحة قائمة رئيسية بدون عناصر موسعة، ثم إنشاء صفحة لكل عنصر قائمة رئيسية موسعة. ما هو عدد الصفحات الفرعية المطلوبة لتتوافق مع عدد العناصر في القائمة الرئيسية. ولنضرب مثالا بسيطا للتوضيح:

انقر هنا!

انقر هنا!

القائمة 1

القائمة 2

القائمة 3

انقر فوق انقر هنا في الشكل 1 وسيظهر تأثير الشكل 2. أثناء التنفيذ المحدد، يجب الانتباه إلى تعريف واستخدام العلامة ، وتحقيق المراسلات الفردية، وإلا فسيكون الأمر فوضويًا. بالإضافة إلى ذلك، عندما يكون هناك العديد من عناصر القائمة، تذكر أنه يتم تعريف القائمة الفرعية المدرجة حاليًا فقط بـ ، ويجب ربط عناصر القائمة الرئيسية الأخرى بالصفحات الموسعة المقابلة لها.

المنتجات والخدمات

onclick="window.event.cancelBubble = true;">

كتالوج المنتجات

الدعم الفني

الأحداث والندوات

التدريب والاعتماد

الإحالات إلى أطراف ثالثة

في الكود المصدري، يعد .NV1 و.NV2 تعريفات لخطوط CSS، وتتحكم وظيفة clikker في عرض عناصر القائمة وإخفائها، ويتحكم المتغير b في الصور (لا يظهر في الصورة بسبب التنزيل غير الكامل). في التطبيق الفعلي، يرجى الانتباه إلى النطاق المحدد بواسطة div وعدم إخفاء عناصر القائمة الرئيسية الأخرى عند النقر.

تعد طريقة التنفيذ التي تقدمها Microsoft ذكية نسبيًا، كما أنها سريعة وبسيطة الإنشاء نسبيًا، ولا تتطلب سوى صفحة واحدة. العيب هو أنه يتطلب على الأقل دعم IE 4.0 أو NN 4.0 أو أعلى.

كلتا الطريقتين لهما إيجابيات وسلبيات خاصة بهما، أي منهما تختاره يعتمد على طبيعة صفحتك الرئيسية ودعم المتصفح.

* تغيير لون النص

هذه هي التقنية الأكثر شيوعًا على الويب عندما يتحرك الماوس فوق عنصر ما، يتغير لون العنصر فورًا ويصدر صوتًا في بعض الأحيان، تمامًا مثل البرامج التعليمية متعددة الوسائط. إذا قمت بخلط الألوان جيدًا، ستكون الصفحة ممتعة جدًا للعين.

هناك العديد من الطرق لتحقيق تغيير لون النص، ونقدم هنا اثنتين منها فقط بشكل مختصر.

الطريقة الأولى هي استخدام تقنية CSS. حاليًا، يدعم IE 4.0 هذه التقنية فقط. رمز العينة الخاص به هو كما يلي.

<أتش تي أم أل>

هذا هو أبسط مثال لاستخدام تقنية CSS للتحكم في لون النص.

في هذا المثال، يتم عرض نص الارتباط في البداية باللون الأحمر، ويتحول إلى اللون الأزرق عندما يتحرك الماوس فوق النص، ويتغير إلى اللون الأرجواني عند النقر عليه للوصول، ويتحول إلى اللون العنابي بعد الوصول. نظرًا لأن Netscape لا يدعم بعد سمات CSS مثل الارتباط والزيارة والتمرير، فلن تتمكن من رؤية هذه التأثيرات إذا كنت تستخدم Communicator.

الطريقة الثانية هي استخدام JavaScript لكتابة برنامج نصي صغير للتشغيل لتحقيق غرض تغيير اللون. رمز العينة الخاص به هو كما يلي.

onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')">

تغيير لون النص.

بما أن IE 4.0 وNN 4.0 لهما آليات تحكم مختلفة للكائنات، فأنت بحاجة إلى التحقق من المتصفح أولاً ثم إجراء ذلك التعامل المقابل مع. تطبق الدالة MM_changeProp() طريقة تغيير لون النص هذه. تتطلب هذه الطريقة تحديد المعرف بالامتداد وإضافة onmouseover وonmouseout في كل مكان يجب تغييره فيه، وهو أمر أكثر إزعاجًا من الطريقة الأولى. لذلك، إذا لم يكن لديك رأي قوي ضد مايكروسوفت، فمن الأفضل استخدام الطريقة الأولى.

* الأزرار الديناميكية

الأزرار الديناميكية هنا ليست رسومًا متحركة بتنسيق .gif ولا أزرار التأثيرات الخاصة المتنوعة المتوفرة في FrontPage. أعتقد أنك واجهت هذا الموقف: عندما يتحرك الماوس فوق زر معين، فإنه يتحرك فجأة، ويبدو أنه يغريك بالنقر فوقه. إنه أمر مثير للاهتمام، أليس كذلك؟ دعونا ننفذها أدناه.

أولاً، يجب عليك إعداد صورتين نظرًا لأنهما عبارة عن أزرار، فلا يجب أن تكونا كبيرتين جدًا ولا يجب أن تكون الألوان خيالية جدًا صورتين حتى لا تظهرا بعد النقل. فيما يلي صورتان قمت بإنشائهما.

بعد ذلك، دعونا نلقي نظرة على كيفية تحقيق التأثيرات الديناميكية. كود المصدر الخاص به هو كما يلي.

< a href=http://www.microsoft.com

onMouseover = "img_act('toc1')"

onMouseout = "img_inact('toc1')">

width=100 height=50 border=0 name ="toc1">

هناك شيئان يجب ملاحظتهما:

1. تأكد من تعيين اسم لـ img، ثم قم بتطبيق هذا الاسم على تعريف الصورة المصدر.

2. انتبه إلى الرموز المختلفة في الملف المصدر، وخاصة علامات الاقتباس، وانتبه أيضًا إلى مسار ملف الصورة المصدر، ومن الأفضل استخدام مسار نسبي لمنع عدم عرض الموقع بشكل صحيح بعد التحميل. وبطبيعة الحال، تتطلب هذه الطريقة لتبادل الصور أيضًا دعم إصدار المتصفح 4.0 أو أعلى. إذا كنت لا تزال تستخدم إصدار المتصفح 3.0، فقم بالترقية في أقرب وقت ممكن!

* إذا طُلب منك ذلك،

ضع الماوس على الصورة وستظهر معلومات المطالبة، تمامًا مثل أزرار العديد من البرامج التي توفر مطالبات وظيفية. هذه الوظيفة سهلة التنفيذ في تحرير صفحة الويب، فلنلقي نظرة على تأثيرها.

من السهل تحقيق هذا التأثير، ما عليك سوى إلقاء نظرة على الكود المصدري.

......

ONMOUSEOVER = "img_act ('who')"

BORDER = "0" WIDTH = "113" الارتفاع = "45 ">

< /tr>

...

الجزء الذي تحته خط من الكود هو كيفية القيام بذلك. سمة العنوان مفيدة جدًا! يمكن استخدامه في كافة العناصر باستثناء BASE وBASEFONT وHEAD وHTML وMETA وPARAM وSCRIPT وSTYLE وTITLE لتحديد المعلومات السريعة عند مرور الماوس فوقها.

لقد ناقشنا أعلاه بالتفصيل بعض النصائح في عملية تجميع صفحات الويب. هناك العديد من الصفحات المصممة بشكل جميل والمتقدمة تقنيًا على الويب، ويعد تحليل كود المصدر الخاص بها طريقة جيدة للتعلم. تتقدم تكنولوجيا الكمبيوتر باستمرار. في مواجهة هذه التقنيات الجديدة التي تأتي الواحدة تلو الأخرى: DHTML، CSS، XML... لا يمكننا إلا مواجهة الصعوبات وإتقانها وتطبيقها على صفحات الويب الخاصة بنا لجعل صفحات الويب الخاصة بنا أكثر نشاطًا.

(مكتب السياحة تيانجين جيشيان 301900 جيا هيجينغ)