كيفية تجميع صفحات الويب باستخدام DHTML

1 مقدمة

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

2 DHTML Simple

يمكنني الوصول إلى عدد كبير من صفحات الويب المكتوبة بلغة HTML ولغات البرمجة النصية في المتصفح. من أجل تسهيل التصفح، أطلقت العديد من الشركات المصنعة لأجهزة الكمبيوتر متصفحاتها الخاصة، وليس لدى هذه المتصفحات بعد معيار موحد لدعم HTML، ومن الواضح أن هذا لا يفضي إلى تطوير الإنترنت. لذلك، قام اتحاد شبكة الويب العالمية (W3C) بتطوير مواصفات مستقلة عن النظام الأساسي واللغة، وهي نموذج كائن المستند (DOM).
يجمع DOM بين HTML وCSS (أوراق الأنماط المتتالية) ولغات البرمجة النصية لتشكيل نموذج قابلية التشغيل البيني الذي يمكن لشخص واحد أو أكثر تنفيذه. قدم كل من Netscape وMicrosoft اقتراحات إلى W3C لتنفيذ DOM: استخدم HTML الديناميكي، أي DHTML (HTML الديناميكي) لحل المشكلة.
DHTML هو مصطلح عام للعديد من الوظائف الجديدة التي تم توسيعها مع الحفاظ على التوافق مع HTML الموجود. تشير هذه الميزات الجديدة بشكل أساسي إلى الميزات الديناميكية وميزات تحديد المواقع والقدرة على استخدام CSS.
هناك سببان لاستخدام DHTML: أولاً، يقوم DHTML بتقسيم كل عنصر في صفحة الويب إلى العديد من الكائنات المستقلة، ويتم تحديد خصائص هذه الكائنات من خلال CSS. ثانيًا، يفتح DHTML كل كائن في إطار لغة البرمجة والبرمجة النصية، ويمكن استخدام لغة البرمجة C++ لمعالجة الكائنات الموجودة على صفحة الويب، ويمكن أيضًا استخدام Java script وVBscript لمعالجة الكائنات الموجودة على صفحة الويب. وهذا يعني أن صفحة الويب وكل شيء عليها قابل للبرمجة، مما يضيف إمكانات جديدة إلى صفحة الويب. سنجد الفرق عندما نقوم بتنفيذ التطبيق: عندما كنا نقوم بتشغيل البرنامج على الويب، كان علينا الانتظار حتى يتم إعادة تنزيل صفحة الويب في كل مرة بعد عنصر واحد إذا كانت صفحة الويب تحتوي على عدد كبير من الكائنات المخفية، قد يستغرق الأمر ملء الشاشة، وستمر عملية الوصول إلى الخادم مرة أخرى باستخدام DHTML، ويمكنك النقر فوق صورة في الجزء العلوي من الشاشة لإنشاء الفقرات في الجزء السفلي تغيير الشاشة على الفور دون الحاجة إلى الوصول إلى الخادم مرة أخرى. ستصبح جميع الجداول قواعد بيانات حية، ويمكن للمستخدمين تصفية البيانات ديناميكيًا وفرزها. يؤدي هذا إلى تقليل عدد الطلبات المقدمة إلى الخادم، وبالتالي تقليل الحمل على الخادم وتحسين الأداء العام للعميل والخادم.

3 استخدام أوراق الأنماط CSS

أساس DHTML هو أوراق الأنماط المتتالية (يشير النمط المتتالي إلى مجموعة من سمات العرض وتحديد الموضع التي يحددها مؤلف صفحة الويب). أكبر ميزة في CSS هي تصميم الويب الموجه للكائنات، أي أن كل صفحة وكل فقرة وكل صورة وجدول تعتبر كائنًا. ثم أعلن عن كل مثيل لهذا الكائن. كل مثيل له نمط، وهو عبارة عن مجموعة من السمات أو تعليمات العرض. وطالما تم الإعلان عنها مرة واحدة، فسيتم استخدام هذه الخصائص في جميع أنحاء صفحة الويب بأكملها أو حتى الموقع بأكمله. يمكن إعطاء كل نمط اسمًا، مثل H1، Li. إذا كان اسم النمط هو نفس اسم عنصر (أو علامة) DHTML صالح، فسيتم تطبيق النمط تلقائيًا على كل مثيل للعنصر إذا تم تقديمه إذا تمت تسمية نمط بدون علامة DHTML المقابلة، فيجب تطبيق النمط يدويًا في المكان الذي تريده أن يظهر فيه.
3.1 تحديد واستخدام الأنماط الأساسية هناك نمطان في مقطع البرنامج التالي: H1 والمفضل H1 هو عنصر DHTML صالح. الجزء الذي يحمل علامة 〈H1〉〈／H1〉 في البرنامج سوف يرث جميع سمات النمط H1. ؛ صالح هو عنصر غير DHTML. عند تعريفه، يجب عليك إضافة نقطة أمامه، عند الرجوع إليه، يجب عليك استخدام للتعريف به في البرنامج /favor> سوف يرث النمط المفضل لجميع الخصائص.
〈HTML〉
〈الرأس〉〈العنوان〉اختبار〈／العنوان〉
〈نوع النمط=”نص+CSS〉
〈!--
H1 {نمط الخط: عادي؛
وزن الخط: غامق؛
اللون: أخضر؛
ارتفاع الخط: 20 نقطة} ／ تحديد النمط H1／
.صالح {نمط الخط: عادي؛
حجم الخط: 15 نقطة؛
صورة الخلفية:url(back.imag.gif);
textalign:center} ／تحديد النمط المفضل／
--〉


〈H1〉هذا اختبار!〈／H1〉／أسلوب الاستخدام H1／
〈P CLASS=”صالح”〉هل يعجبك هذا؟〈／P〉／استخدم النمط المفضل／

3.2 استخدام الأنماط الخارجية يمكن أيضًا تخزين أوراق الأنماط في ملفات خارجية، ويمكن أن يكون الاتصال بين هذا الملف والصفحة من خلال الاستيراد أو الارتباط على سبيل المثال، يتم تخزين ورقة الأنماط في الملف mysite.css، ويمكنك إدراج التعليمة البرمجية التالية في المستند لاستدعاء ورقة الأنماط الخارجية:
〈رابط REL=ورقة الأنماط
HREF=”mysite.css”
النوع = "نص ／css"
العنوان=”نمط الاختبار”〉

4 تحقيق الوظيفة التفاعلية

لا تحتوي CSS نفسها على وظيفة تفاعلية، لتحقيق التفاعل، من الضروري دمج الكائن المحدد بواسطة CSS مع نموذج المستند (DOM) وتحويل مستند الويب إلى مستند DHTML. يوفر DOM طريقة للغات البرمجة النصية للوصول إلى العناصر الموجودة على الصفحة. تختلف نماذج الكائنات التي تدعمها Microsoft وNetscape إلى حد ما.
في نموذج Microsoft، تتمتع لغات البرمجة النصية بإمكانية الوصول إلى جميع العناصر الموجودة في صفحة HTML، وتنعكس جميع العناصر ككائنات في document.all. يتم استخدام مقتطف البرنامج التالي لكتابة كافة العناصر الموجودة في الصفحة:
لـ (I=0;I {
document.write(document.all［I］.tagName+”＼n” );
}
في نموذج Netscape، يمكن للغة البرمجة النصية الوصول إلى مجموعة محددة من العناصر في صفحة HTML، مثل المحتوى الموجود في علامة . يتم استخدام مقطع البرنامج التالي لكتابة أسماء جميع الطبقات في الصفحة:
لـ (I=0;I {
document.write(document.layers［I］.name+”＼n”);
}

5 استخدام تقنية تحديد المواقع

في HTML، يكون موضع أي كائن دائمًا متعلقًا بأجزاء أخرى من بنية صفحة الويب، عندما نقوم بتجميع صفحات الويب، غالبًا ما نقوم بإخراج الصورة من الصفحة عن طريق إضافة جزء من النص. الآن، باستخدام تقنية تحديد المواقع الخاصة بـ DHTML، يمكن تثبيت الكائنات وتكديسها، أي يتم وضع صور متعددة في نفس الموضع على الصفحة، ثم يتم تعيين الكائن الموجود في الأعلى بشكل مستمر لتحقيق تأثيرات الرسوم المتحركة.
مثال:
*myback{لون الخلفية: شفاف}
*mypoit
الموقف:مطلق؛
أعلى: 5in؛
اليمين: 5 بوصة؛
العرض: 10 بوصة}
الجسم {خلفية الصورة: URL (／ الصورة ／ back.gif)؛}
〈class=.mypoint〉Img(src=”／image／a.gif)
〈DIV CLASS=”معرف الكومة”=”image1” نمط=”z-index:4”〉
〈DIV CLASS=”معرف الكومة”=”image2” نمط=”z-index:3”〉
〈DIV CLASS=”معرف الصنوبر”=”image3” نمط=”z-index:2”〉
〈DIV CLASS=”معرف الصنوبر”=”image4” نمط=”z-index:1”〉

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

6 الخلاصة

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

وي شياوتان طالب ماجستير في كلية النقل، جامعة جياوتونغ الشمالية، 100044، بكين.