قرار دادن عکس در صفحه وب
یکی از عناصری که باعث جذابیت در وب سایت میشود عنصر عکس یا همان image است. عکسها زیبایی خاصی به صفحات میبخشند ولی از طرف دیگر تولید دردسر هم میکنند، اگر شما تعداد زیادی عکس در یک صفحه بگذارید یا از عکسهایی با حجم زیاد استفاده کنید آن موقع است که بیننده باید مدت طولانی را صرف کند تا صفحه سایت شما را به طور کامل ببیند و همین موضوع باعث از دست دادن یک بیننده و یک نمره منفی به حساب میاید. همانطور که میدانید در کشور عزیزمان ایران سرعتهای اینترنت خیلی پایین هست و دیدن صفحات سنگین بسیارعذاب آور است البته بماند که بعضی وقتها همان یک ذره سرعت هم نداریم. پس همیشه تا جایی که میتوانید صفحه را سبک کنید تا برای بیننده خسته کننده نباشد. یک سایت موفق سایتی است که بیننده زیاد داشته باشد.
فرمتهای عکس در وب:
خب بپردازیم به ادامه بحث ، عکسها دارای فرمتهای زیادی میباشند ولی فرمتهایی که در وب بکار برده میشوند، عبارتند از:
.gif (Graphic Interchange Format)
.jpeg (Joint Photographic Experts Group)
.png (Portable Network Graphics)
عکسها با فرمت .gif بیشترین استفاده را در وب دارند و محبوبترین نوع عکس است. این نوع فرمت 256 رنگ را پشتیبانی میکند و از ویژگیهای دیگر آن animation, transparency, interlacing است . البته محبوبیت آن بیشتر برای حجم کم آن است.
Transparency به شفافیت یک عکس میگویند که آنرا پشت نما هم مینامند. این ویژگی است که یک عکس آنقدر شفاف است که شما میتوانید تا تصویر ، متن یا رنگ زیر آن عکس را ببینید.
Interlacing گاهی وقتها شما منتظر میشوید تا یک عکس به دلیل بزرگی اندازه بارگذاری شود بعد آنرا ببینید اما اگر عکسی این ویژگی را داشته باشد کم کم عکس کامل خواهد شد یعنی خط به خط به عکس اضافه میشود تا کامل بارگذاری شود.مثال
Animation عکسهای متحرک را می گویند وفقط این فرمت هست که از متحرک سازی عکس حمایت میکند.
عکسهایی با فرمت .jpeg حدود 16 میلیون رنگ را پشتیبانی میکنند ، نسبت به فرمت .gif از حجم بالاتری برخوردار است ولی کیفیتش بهتر است ، تمام ویژگیهای gif را دارد به غیر از Animation . فرمت .png نسبت به قبلیها جدیدتر است و مخلوطی از آنهاست یعنی کیفیت jpeg و حجم کم gif را دارد.
مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ <img>و پایان دهنده هم ندارد. اما برای مشخص کردن فایل عکس و آدرس دهی آن باید از خصوصیت src=" " داخل تگ استفاده کنیم که اگر یک عکس داخل دایرکتوری وب سایت خودتان باشد دیگر نیازی به آدرس کامل نیست و فقط اسم دایرکتوری و اسم فایل با پسوند مشخصه آن عکس نوشته میشود ولی اگر میخواهید که عکسی را از وب سایت دیگری در صفحه خود بگذارید باید آدرس آن وب سایت و دایرکتوری که عکس در آن قرار گرفته و اسم کامل آن فایل را بنویسید مانند:
<img src="images/pic01.gif">
<img src="www.sitename.com/images/pic01.gif">
این تگ خصوصیات دیگری هم دارد، یکی از آنها که کاربرد زیادی هم دارد خصوصیات طول height و عرض width میباشد که توسط آنها اندازه یک عکس را داخل صفحه میتوانید کنترل کنید. مقیاس اندازه گیری طول و عرض بر حسب پیکسل Pixel میباشد، اگر شما این خصوصیات را کنترل نکنید عکس در اندازه اصلی خود ظاهر میشود. بطور مثال شما میخواهید عکسی را وارد کنید که در صفحه باید به اندازه 100×100 فضا اشغال کند:
<img src="images/pic01.gif" height="100" width="100">
این نکته را در نظر داشته باشید که سرعت کامل شدن عکس یعنی download شدن آن در صفحه بستگی به حجم آن دارد نه اندازه عکس، پس میتوانید اندازه های یک عکس را اضافه کنید ولی دقت کنید که کیفیت عکس خراب نشود.
شما میتوانید محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصیت align=” “تعیین کنید و میتوانید کلمات left,right,top,middle,bottom را برای این خصوصیت بکار برید. بر فرض میخواهید که یک متن بعد از عکس و در وسط قرار گیرد:
<img src="images/pic01.gif" align="middle"> This is a text
در ضمن اگر میخواهید خود عکس در وسط صفحه قرارگیرد باید از تگ<center> قبل از تگ <img> استفاده کنید و بعد از آن </center> را بنویسید:
<center><img src="pic01.gif"></center>
اگر مایل هستید برای عکس کادر بگذارید میتوانید از خصوصیت border=” “ استفاده کنید و آنرا برابر با یک عدد قرار دهید که هر چه این عدد بزرگتر باشد ، کادر دور عکس هم ضخیم تر است به صورت پیش فرض border=”0” است یعنی هیچ کادری مشاهده نمیشود.مثال
تا حالا متوجه شدید که در یک وب سایت هنگامیکه نشانگر موس بر روی یک عکس که قرار میگیرد یک کادر متنی کوچک باز شده بنام tooltip و اطلاعاتی را راجع به آن عکس میدهد؟ پس شما هم اینکار را انجام دهید، خصوصیت alt=" " را داخل تگ گذاشته و هر متنی را که جلویش بنویسید در صفحه هنگامیکه موس بر روی عکس قرار گیرد ، زیرنشانگر نمایان میشود. بهتر است که شما همیشه این کار را انجام دهید چون مرورگرهایی وجود دارد که عکس را نمایش نمیدهد پس با اینکار بیننده از حضور آن عکس خبر دار میشود.مثال
دو خصوصیت دیگر هست که حاشیه و فضای خالی دور عکس را کنترل می کند، hspace=” “برای حاشیه چپ و راست عکس وvspace=” “ برای بالا و پایین. عددی را که وارد میکنید در مقیاس پیکسل است.مثال
Image link
شما میتوانید یک عکس را به صورت لینک هم درست کنید یعنی هرگاه بیننده روی عکس کلیک کرد به صفحه یا سایت دیگر هدایت شود. در بخش قبل با درست کردن لینک آشنا شدید، در اینجا شما باید تگ لینک را قبل از تگ عکس بنویسید و تگ پایان دهنده لینک را بعد از تگ عکس وارد میکنید، بدین صورت:
<a href="www.sitename.com"><img src="images/sitelogo.gif"></a>
بر روی لوگوی زیر کلیک کنید تا به صفحه اصلی سایت هدایت شوید
در ضمن میشود برای قسمتهای مختلف یک عکس لینکهایی به جاهای مختلف درست کرد. به فرض مثال ما یک عکس از نقشه ایران داریم و میخواهیم که روی هر استان کلیک شود ، آن قسمت لینک شود به صفحه مورد نظر. این حالت را Image map می گویند که در بخش بعد آنرا توضیح خواهم داد.
