يمكن لأي شخص وضع صور العطلة على موقعه على الويب، ولكن فقط أفضل منشئي الويب هم من سيقومون بتصميمها كعرض شرائح. وهو ليس عرض شرائح بسيطًا يحتوي على صورة واحدة وصفحة HTML واحدة، ولكنه عرض شرائح ديناميكي حقًا، حيث يتم تنزيل كل صورة إلى نفس صفحة HTML. سنعلمك كيفية استخدام HTML الديناميكي (DHTML) وأوراق الأنماط المتتالية (CSS) لإنشاء عرض الشرائح الشخصي الخاص بك والذي سيجعل أصدقائك وعائلتك وزملائك أكثر مللًا، أوه لا! إنه أكثر إثارة للإعجاب. لكن تذكر! نظرًا لأن عرض الشرائح هذا مكتوب بلغة DHTML، فلا يمكن عرضه إلا في إصدارات المتصفح 4.0 أو أعلى.
وبطبيعة الحال، هذا النوع من عرض الشرائح له استخدامات خطيرة. الأمر فقط أننا لم نفكر في الأمر بعد.
الخطوة الأولى
قم بتجميع الصور الموجودة لديك بالفعل على الويب وقم بقصها بنفس الحجم. تأكد من أن نطاق الحجم لا يزيد عن 640 × 480 بكسل، وحافظ على أبعاد البكسل نفسها في جميع الصور - سيكون الأمر مزعجًا للمشاهد إذا كانت الصور بأحجام مختلفة.
الخطوة 2
في علامة الرأس، أول ما عليك فعله هو الإشارة إلى أنك تستخدم CSS في علامة <STYLE>. في العلامة <STYLE>، قم بتعيين الموضع الذي تريد أن تظهر فيه الشريحة على الصفحة، وقرر ما إذا كنت تريد البدء بصورة خلفية فارغة، أو إظهار الشريحة الأولى مباشرةً. يرجى قص ولصق رمز البرنامج التالي في صفحتك، باستخدام إحداثيات الموقع التي تختارها:
<STYLE type="text/css"> <!-- .slides {position:absolute left: 25%; top:25%Visibility:hidden} --> </STYLE>
الخطوة 3
بعد ذلك، تعامل مع تفاصيل CSS فورًا، أو أدخل JavaScript في علامة الرأس. بعد var numSLides =، قم بتعيين عدد الشرائح التي سيتم عرضها (لا تقم بتعيين عدد كبير جدًا، لأن كل صورة ستضيف عددًا كبيرًا من كيلوبايت إلى الصفحة). هناك خمس صور في مثالنا. وفيما يلي رمز البرنامج:
<SCRIPT language="JavaScript1.2"> var numSlides = 5; varcurrentSlide = numSlides;
الخطوة 4
إذا كنت تريد إضافة نص توضيحي للصورة، فيمكنك استخدام كود البرنامج التالي لاستبدال نص الوصف الخاص بنا بنص الوصف الخاص بك:
var captionTxt = new Array(numSlides
function setUpCaptions() {)
;
captionTxt[1] = "مدخل إلى الرصيف 39."
captionTxt[2] = "أسود البحر تتجول بالقرب من الرصيف."
captionTxt[3] = "رست السفينة عند الرصيف."
captionTxt[4] = "جدارية الحوت للعالم تحت الماء."
captionTxt[5] = "جزر أو صخور في البحر."
}
الخطوة 5
الصق رمز البرنامج الموضح هنا في ملف HTML الخاص بصفحة الويب الخاصة بك، ضمن وصف JavaScript. نظرًا لأن Navigator 4.0 وIE 4.0 يفسران CSS بشكل مختلف، فإن البرنامج النصي الخاص بنا يستخدم اكتشاف الكائنات لتحديد وضع العرض. إذا كان الوضع المعروض هو Navigator، فلا يزال بإمكانه تعريف بعض الكائنات المحددة بحيث يظل رمز برنامج IE يعمل. بالإضافة إلى ذلك، هذه أيضًا نهاية كود البرنامج بأكمله، لذا يجب أن ينتهي بالعلامة </SCRIPT>:
إعداد الوظيفة () {
إذا (!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;
}
//-->
</script>
انتبه إلى التعليقات القريبة من نهاية كود البرنامج: إذا لم يكن لديك وصف، قم بإزالة السطر الموجود أسفله.
الخطوة 6
أغلق علامة الرأس باستخدام </HEAD>، ثم قم بلصق كود البرنامج التالي في الجزء الأساسي من ملف HTML لصفحة الويب. لاحظ أن كود البرنامج يحدد كل صورة بعلامة <DIV> منفصلة، والتي ترتبط بالتنسيق العادي <IMG src>:
<BODY onLoad="setUp()">
<B> عرض شرائح Builder.com!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src=" Second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
الخطوة 7
يتعين على جمهورك النقر فوق الشرائح بالسرعة التي تناسبهم، لذا يتعين عليك أن تزودهم بشيء يمكنهم النقر عليه. . يمكنك استخدام الارتباطات التشعبية القديمة البسيطة، ولكنها أكثر تعقيدًا باستخدام أزرار النقر الخاصة بـ GIF السابق والتالي. يستخدم نموذج التعليمات البرمجية للبرنامج جدولاً لربط next.gif وprevious.gif:
<DIV style="position:absolute; top:350px; left:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
إذا كنت لا تريد استخدام ملفات GIF لزري النقر السابق والتالي، فاستبدل علامات <IMG> أعلاه بالنص.
الخطوة 8
وأخيرًا، أدخل نص الوصف الذي سيتم عرضه في <TEXTAREA>. يمكنك تحديد حجم <TEXTAREA> كما تريد، فقط قم بتغيير الصفوف= والأعمدة= الأرقام. وفيما يلي رمز البرنامج:
<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>تعليق الصورة</B>
<اسم النموذج=forCaptions>
<TEXTAREA name="captionsText" Wrap="virtual"rows=25 cols=20"></TEXTAREA>
</فورم>
</DIV>