يمكن لأي شخص وضع صور العطلة على موقعه على الويب، ولكن فقط أفضل منشئي الويب هم من سيقومون بتصميمها كعرض شرائح. وهو ليس عرض شرائح بسيطًا يحتوي على صورة واحدة وصفحة HTML واحدة، ولكنه عرض شرائح ديناميكي حقًا، حيث يتم تنزيل كل صورة إلى نفس صفحة HTML. سنعلمك كيفية استخدام HTML الديناميكي (DHTML) وأوراق الأنماط المتتالية (CSS) لإنشاء عرض الشرائح الشخصي الخاص بك والذي سيجعل أصدقائك وعائلتك وزملائك أكثر مللًا، أوه لا! إنه أكثر إثارة للإعجاب. لكن تذكر! نظرًا لأن عرض الشرائح هذا مكتوب بلغة DHTML، فلا يمكن عرضه إلا في إصدارات المتصفح 4.0 أو أعلى.
وبطبيعة الحال، هذا النوع من عرض الشرائح له استخدامات خطيرة. الأمر فقط أننا لم نفكر في الأمر بعد.
الخطوة الأولى
قم بتجميع الصور الموجودة لديك بالفعل على الويب وقم بقصها بنفس الحجم. تأكد من أن نطاق الحجم لا يزيد عن 640 × 480 بكسل، وحافظ على أبعاد البكسل نفسها في جميع الصور - سيكون الأمر مزعجًا للمشاهد إذا كانت الصور بأحجام مختلفة.
الخطوة 2
في علامة الرأس، أول ما عليك فعله هو الإشارة إلى أنك تستخدم CSS في علامة
الخطوة 3
بعد ذلك، تعامل مع تفاصيل CSS فورًا، أو أدخل JavaScript في علامة الرأس. بعد var numSLides =، قم بتعيين عدد الشرائح التي سيتم عرضها (لا تقم بتعيين عدد كبير جدًا، لأن كل صورة ستضيف عددًا كبيرًا من كيلوبايت إلى الصفحة). هناك خمس صور في مثالنا. وفيما يلي رمز البرنامج:
:
إعداد الوظيفة () {
إذا (!document.all) {
document.all = document;
for (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
}
تبديل الشريحة(1);
}
وظيفة تبديل الشريحة (sDir) {
newSlide = currentSlide + sDir;
إذا (!newSlide) newSlide=numSlides;
إذا (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].
style.visibility='hidden';
// إذا كنت لا تريد نص الوصف، قم بإزالة السطر التالي:
document.all["captions"].document.forCaptions.captionsText.
value=captionTxt[newSlide];
currentSlide = newSlide;
}
//-->
انتبه إلى التعليقات القريبة من نهاية كود البرنامج: إذا لم يكن لديك وصف، قم بإزالة السطر الموجود أسفله.
الخطوة 6
أغلق علامة الرأس باستخدام ، ثم قم بلصق كود البرنامج التالي في الجزء الأساسي من ملف HTML لصفحة الويب. لاحظ أن كود البرنامج يحدد كل صورة بعلامة
الخطوة 7
يتعين على جمهورك النقر فوق الشرائح بالسرعة التي تناسبهم، لذا يتعين عليك أن تزودهم بشيء يمكنهم النقر عليه. . يمكنك استخدام الارتباطات التشعبية القديمة البسيطة، ولكنها أكثر تعقيدًا باستخدام أزرار النقر الخاصة بـ GIF السابق والتالي. يستخدم نموذج التعليمات البرمجية للبرنامج جدولاً لربط next.gif وprevious.gif:
إذا كنت لا تريد استخدام ملفات GIF لزري النقر السابق والتالي، فاستبدل علامات أعلاه بالنص.
الخطوة 8
وأخيرًا، أدخل نص الوصف الذي سيتم عرضه في