طراحی سایت ساناتک
سه شنبه 30 آبان 1396
0
زیرنویس عکس در html

جالب است بدانید که تگ مربوط به کپشنِ یک عکس، پیش‌تر در html نبوده است. اما حالا هست و نکته جالب‌تر اینکه برای کپشن دار کردن جداول از آن استفاده می شود نه عکس ها! در فصل بعدی به جدول‌ها خواهیم پرداخت. در حال حاضر روشی کاربردی و ساده برای کپشن عکس ها به شما پیشنهاد می دهیم که بر روی تمامی مرورگرها بدون مشکل عمل کند، در فصل 10 با نگاهی به بروزرسانی های صورت گرفته با html5 با تگ های جدید این مبحث را بازبینی خواهیم کرد.

1. در gallery.html پاراگراف های بسته و بازی که عکس لاک‌پشت را احاطه کرده اند را حذف کنید و به جای آن ها از تگ زیر استفاده کنید.

<div class="galleryphoto">
<img src="gallery/turtle-bite.jpg" width="400" height="258"
alt="A turtle swims comfortably among the coral, despite its old injury - a large shark bite on one side"/>
</div>

2. سپس بعد از عکس یک پاراگراف اضافه کنید(خاطرتان باشد حتما درون div این پاراگراف اضافه شود.) مانند زیر:

<p>This turtle was spotted swimming around the Great Barrier Reef (Queensland, Australia) quite gracefully, despite having had a large chunk taken out of its right side,
presumably in a shark attack. [Photographer: IanLloyd]
</p>

3. در آخر تگِ span-ای اطراف بخش photo credit ایجاد کرده تا بتوانیم آن را به شکلی دیگر style-دهی کنیم:

<p>This turtle was spotted swimming around the Great Barrier Reef (Queensland, Australia) quite gracefully, despite having had a large chunk taken out of its right side, presumably in a shark attack. <span class="photocredit">[Photographer: Ian Lloyd]</span></p>

4. gallery.html را ذخیره کرده و نتیجه را در مرورگر مشاهده نمایید، باید با چیزی مشابه عکس 5.11 روبه رو شده باشید.

کپشت تصویر در html

عکس 5.11: تصویر ما کپشن دارد، کپشنی style نشده

معمولا کپشن عکس ها با فونتی متفاوت نشان داده می شود، در اینجا می توان اندازه و ضخامت متن را تغییر داد، به نظر می رسد فاصله بین عکس و پاراگراف کپشن نیز اندکی زیاد باشد، با margin می توانیم این فاصله را تنظیم کنیم. در آخر هم می توانیم از یک جدا کننده مناسب استفاده کنیم تا در صورت اضافه شدن تصاویر بیشتر ظاهر کار را برای گالری ما حفظ کند.

1. style1.css را باز کرده و دستور css زیر را به آن اضافه کنید:

.galleryphoto p {

font-size: 65%;

font-weight: bold;

margin-top: 0;

width: 430px;

line-height: 1.4em;

}

این مارک-آپ تغییرات لازم را به فونت اضافه می کند، عرض کپشن را کاهش داده تا خواندنش ساده تر شود، فاصله بین عکس و پاراگراف را کم کرده و فواصل خالی بین خطوط پاراگراف را نیز برای ما کم می کند.

2. قانون جدیدی نیز برای photocredit class تعریف می کنیم:

.photocredit {

font-weight: normal;

color: gray;

}

این دستور تنها محتوای درون تگ span را هدف قرار می دهد.

راه دیگر اینست که شما می توانستید به جای تعریف کلاس photocredit و با استفاده از یک selector به هدف خود برسید، به کد زیر توجه کنید:

.galleryphoto p span {

font-weight: normal;

color: gray;

}

ترجمه دستور بالا اینگونه می باشد: برای هر span که درون یک p جای گرفته است، و آن تگِ p هم در یک المان قرار گرفته که کلاسِ galleryphoto بر آن اجرا می شود، فونت را ساده و خاکستری نشان بده. این روش را پیشنهاد دادیم تا در صورت نیاز به تعریف یک photocredit دیگر در سایت بتوانید با استفاده از selector آن را که در نظر دارید انتخاب کنید.

3. فایل css را ذخیره کنید، صفحه مرورگر خود را رفرش کرده و نتیجه کار را مشاهده نمایید، با عکس 5.12 چک کنید.

کپشن زیر تصویر

5.12: کپشنی جدید، بعد از اعمال قوانین style مورد نظر

به خاطر آورید که پیشتر اعمال حاشیه سفید چگونه به تمامی تصاویر موجود در سایت سرایت کرده بود، اما حالا تگِ img برای تصاویر گالری درون یک div جای گرفته که کلاسِ galleryphoto برایش تعریف شده است. پس حالا می توانیم این کلاس را در selector انتخاب کرده و به طور مستقیم هدف تغییرات خود قرار دهیم، تغییراتی از جمله تعریف حاشیه:

.galleryphoto img {

border: 15px solid white;

}

اگر تغییر بالا را به css اعمال کنید تنها تصاویر موجود در گالری حاشیه سفیدرنگ خواهند داشت. مشکل حل شد، css عالی است نه؟!

در آخر، به قانون .galleryphoto تغییراتی در رابطه با زیباسازی style اعمال می کنیم، هدف ما از این کار آن است که تغییرات را به div اعمال کرده تا به تمامی عکس ها و پاراگراف های موجود وارد شوند. این کلاس قرار است بین تصاویر زیادی که در سایت اضافه خواهند شد تمییز قائل شود و کار اعمال تغییرات جدید را برای ما ساده تر نماید.

1. کد زیر را به style1.css اضافه کنید:

.galleryphoto {

padding-bottom: 20px;

border-bottom: 1px solid navy;

margin-bottom: 10px;

}

2. css را ذخیره کرده و تغییرات را در مرورگر مشاهده نمایید:

حاشیه بین تصاویر در css

عکس 5.13: در اینجا از جداکننده ای برای قرار دادن بین تصاویر استفاده کرده ایم.

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

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