طراحی سایت ساناتک
چهارشنبه 24 آبان 1396
0
افزودن گالری تصاویر به سایت

یکی از لذت‌های بزرگ غواصی، بودن در بین موجودات شگفت انگیز اقیانوس‌ها است. سایت ما فرصتی تکرار نشدنی برای نشان دادن این زیبایی باورنکردنی برای کاربران فراهم میاورد.

زمان آن فرا رسیده که سایت خود را اندکی وسیع‌تر کنیم، می خواهیم یک صفحه جدید به سایت اضافه کنیم: یک گالری عکس ساده.

بروزرسانی بخش آدرس

1. فایل index.html را درون برنامه ویرایشگر خود باز کنید.

2. بخش آدرس را یافته و لینکی دیگر به سایر لینک های این قسمت اضافه کنید:

<div id="navigation">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="contact.html">Contact Us</a></li>

<li><a href="gallery.html">Image Gallery</a></li>

</ul>

</div><!-- end of navigation div -->

3. فایل را ذخیره کنید، سپس درون مرورگر نگاهی به نتیجه کار بیاندازید تا از صحت لینک ها اطمینان حاصل کنید.

4. مراحل بالا را برای about.html و contact.html تکرار کنید.

بخش آدرس در تمامی صفحات سایت باید به صورت نشان داده شده در شکل زیر باشد.

اضافه کردن گالری به سایت

عکس 5.7: افزودن گالری تصاویر به بخش لیست آدرس‌ها

تنها یک مشکل باقی می ماند، هنوز صفحه گالری تصاویری در کار نیست! بیایید باهم این صفحه را به وجود آوریم.

افزودن صفحه گالری تصاویر به سایت

1. فایل contact.html را کپی کرده و نام آن را به gallery.html تغییر دهید، اگر به خاطر داشته باشید چنین کاری را در فصل دوم نیز انجام دادیم.

2. صفحه گالری جدید را در برنامه ,ویرایشگر خود باز کنید و عنوان نوع (h2) را به "Image Gallery" تغییر دهید.

3. پاراگراف قبلی زیرِ عنوان را حذف کرده و با پاراگراف جدید آورده شده جایگزین کنید:

<p>Below are some of the great views that club members have

captured on film (or digital memory) on various dive

trips.</p>

<p>Please do drop me a line (that's Bob) if you would like to

<a href="mailto:bob@bubbleunder.com">submit an image</a> to

this gallery.</p>

4. محتوای تیتر را تغییر دهید:

Image Gallery_Underwater Photography from Bubble Under’s members

5. در نهایت صفحه را ذخیره کرده و در مرورگر مشاهده نمایید.

 

در قسمت بعد اضافه کردن تصاویر به این صفحه را پی می گیریم.

تعداد بازدید: 35
مطالب دیگر آموزش طراحی سایت
زیرنویس عکس در htmlتغییرات فرمت عکس به وسیله CSSآرشیو تصاویر در سایتفرمت های مختلف تصاویرمزایای خصوصیت alt تصاویر
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید