نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

تراز کردن افقی عکس ها

align

خصوصیت align معمولاً به این منظور مورد استفاده قرار می گیرد تا نشان دهد که قسمت های دیگر یک صفحه چگونه در اطراف تصویر قرار می گیرند. این خصوصیت در HTML5 وجود ندارد و در طراحی سایت ها جدیداً از CSS برای ترازبندی تصاویر در طراحی سایت استفاده می شود.

ما در این مقاله به این دلیل از این ویژگی یاد کردیم که ممکن است هنوز بعضی از ویرایشگران ویژوال از آن استفاده می کنند.

این ویژگی مقادیر افقی زیر را می گیرد:

left

این مقدار تصویر را به سمت چپ می برد (به متن اجازه می دهد که در سمت راست آن قرار بگیرد).

right

این مقدار تصویر را به سمت راست می برد (به متن اجازه می دهد که در سمت چپ آن قرار بگیرد).

<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="left" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys. </p>

<hr />

<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="right" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter   irregular journeys. </p>

وقتی که متن به لبه تصویر نزدیک می شود، خوانایی آن کم می شود. شما نحوه اضافه کردن فاصله بین متن و تصاویر را در CSS و با استفاده از ویژگی  marginخواهید آموخت.

سه قانون برای ایجاد تصاویر

سه قانون که باید برای ایجاد تصاویر و استفاده تصاویر در طراحی سایت به یاد داشته باشید:

1. تصویر را با فرمت صحیح ذخیره کنید

در طراحی سایت ها عمدتا از تصاویر در قالب JPEG، GIF، یا PNG استفاده می کنند. اگر فرمت تصویر اشتباه را انتخاب کنید، ممکن است تصویر شما نمایش داده نشود یا اینکه سرعت بارگذاری صفحه، پایین بیاید.

زمانی که در یک عکس چندین عکس مختلف وجود دارد، باید از فرمت JPEG استفاده کرد. مانند تصویر زیر:

هنگامی که از تعداد کمی رنگ استفاده شود یا اینکه یک رنگ منطقه وسیعی از عکس را پوشش دهد از فرمت های GIF یا PNG استفاده شود.

2. تصاویر را در اندازه مناسب ذخیره کنید

شما باید تصویر را با همان عرض و ارتفاعی که در وبسایت نمایش داده می شود، ذخیره کنید. اگر عرض یا ارتفاع آن کمتر باشد، ممکن است عکس کشیده شود. و اگر اندازه تصویر بزرگ تر از اندازه ای باشد که در سایت قرار می دهید، سرعت بارگذاری صفحه را کمتر می کند.

3. از وضوح (resolution) صحیح استفاده کنید

صفحه نمایش کامپیوتر از نقاطی به نام پیکسل تشکیل شده است. تصاویر مورد استفاده در وب نیز از نقاط کوچک تشکیل شده است. وضوح،  به تعداد نقاط در اینچ اشاره می کند و اکثر صفحه نمایش کامپیوترها صفحات وب را تنها با 72 پیکسل در هر اینچ نشان می دهند. بنابراین ذخیره تصاویر با وضوح بالاتر موجب می شود تصاویری که بزرگتر از حد لازم باشند، دانلود طولانی تری داشته باشند.

ابزارهای ویرایش و ذخیره تصاویر

چندین ابزار شما می توانید برای ویرایش و ذخیره تصاویر به اطمینان حاصل شود که آنها حق اندازه، فرمت، و حل و فصل وجود دارد.

چندین ابزار وجود دارد که شما می توانید برای ویرایش و ذخیره عکس از آن ها استفاده کنید و از اندازه، فرمت و وضوح صحیح تصاویر اطمینان حاصل کنید.

محبوب ترین ابزار در میان کسانی که طراحی سایت انجام می دهند، Adobe Photoshop است (برخی از طراحان سایت از این نرم افزار برای طراحی کل سایت استفاده می کنند). نسخه های کامل فتوشاپ گران است، اما نسخه های ارزان تری از فتوشاپ نیز هستند که نیازهای طراحان وب مبتدی را برآورده می کند.

نرم افزارهای دیگر

Adobe Fireworks

Pixelmator

PaintShop Pro

Paint.net

Figure و Figure Caption در HTML5

<figure>

تصاویر معمولاً با زیرنویس ها می آیند. HTML5 یک المان جدید به نام <figure>، معرفی کرده است که برای در بر گرفتن تصویر و عنوان آن که با هم مرتبط هستند، می باشد.

شما می توانید چندین عکس در المان <figure> داشته باشید، تا زمانی که همه آن ها یک عنوان داشته باشند.

<figcaption>

برای اضافه کردن عنوان به عکس، HTML5 این المان را معرفی کرده است. قبل از ایجاد این عناصر هیچ راهی برای مرتبط کردن عکس با عنوان آن وجود نداشت.

<figure>

<img src="images/otters.jpg" alt="Photograph of two sea otters floating in water">

<br />

<figcaption>Sea otters hold hands when they sleep so they don't drift away from each other. </figcaption>

</figure>

در مقاله بعد با چگونگی رسم جداول در طراحی سایت اسپیناس آشنا خواهید شد.