نوشته ها و نظرات شخصی من درباره سایت یتااهو
قرار بود: هدف «یتااهو» معرفی و شناساندن دین زرتشتی با نگاهی متفاوت از گذشته باشدنوشته ها و نظرات شخصی من درباره سایت یتااهو
قرار بود: هدف «یتااهو» معرفی و شناساندن دین زرتشتی با نگاهی متفاوت از گذشته باشدبخش چهارم: قرار دادن عکس در صفحه وب
کی از عناصری که باعث جذابیت در وب سایت میشود عنصر عکس یا همان 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 را دارد.
افزودن عکس به صفحه وب:
مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ و پایان دهنده هم ندارد. اما برای مشخص کردن فایل عکس و آدرس دهی آن باید از خصوصیت src=" " داخل تگ استفاده کنیم که اگر یک عکس داخل دایرکتوری وب سایت خودتان باشد دیگر نیازی به آدرس کامل نیست و فقط اسم دایرکتوری و اسم فایل با پسوند مشخصه آن عکس نوشته میشود ولی اگر میخواهید که عکسی را از وب سایت دیگری در صفحه خود بگذارید باید آدرس آن وب سایت و دایرکتوری که عکس در آن قرار گرفته و اسم کامل آن فایل را بنویسید
www.sitename.com/images/pic01.gif">
Height, Width
این تگ خصوصیات دیگری هم دارد، یکی از آنها که کاربرد زیادی هم دارد خصوصیات طول height و عرض width میباشد که توسط آنها اندازه یک عکس را داخل صفحه میتوانید کنترل کنید. مقیاس اندازه گیری طول و عرض بر حسب پیکسل Pixel میباشد، اگر شما این خصوصیات را کنترل نکنید عکس در اندازه اصلی خود ظاهر میشود. بطور مثال شما میخواهید عکسی را وارد کنید که در صفحه باید به اندازه 100×100 فضا اشغال کند:
این نکته را در نظر داشته باشید که سرعت کامل شدن عکس یعنی download شدن آن در صفحه بستگی به حجم آن دارد نه اندازه عکس، پس میتوانید اندازه های یک عکس را اضافه کنید ولی دقت کنید که کیفیت عکس خراب نشود. Alignment
شما میتوانید محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصیت align=" "تعیین کنید و میتوانید کلمات left,right,top,middle,bottom را برای این خصوصیت بکار برید. بر فرض میخواهید که یک متن بعد از عکس و در وسط قرار گیرد:
This is a text
در ضمن اگر میخواهید خود عکس در وسط صفحه قرارگیرد قبل از تگ استفاده کنید و بعد از آن را بنویسید: Border
اگر مایل هستید برای عکس کادر بگذارید میتوانید از خصوصیت border=" " استفاده کنید و آنرا برابر با یک عدد قرار دهید که هر چه این عدد بزرگتر باشد ، کادر دور عکس هم ضخیم تر است به صورت پیش فرض border="0" است یعنی هیچ کادری مشاهده نمیشود.Alt
تا حالا متوجه شدید که در یک وب سایت هنگامیکه نشانگر موس بر روی یک عکس که قرار میگیرد یک کادر متنی کوچک باز شده بنام tooltip و اطلاعاتی را راجع به آن عکس میدهد؟ پس شما هم اینکار را انجام دهید، خصوصیت alt=" " را داخل تگ گذاشته و هر متنی را که جلویش بنویسید در صفحه هنگامیکه موس بر روی عکس قرار گیرد ، زیرنشانگر نمایان میشود. بهتر است که شما همیشه این کار را انجام دهید چون مرورگرهایی وجود دارد که عکس را نمایش نمیدهد پس با اینکار بیننده از حضور آن عکس خبر دار میشود.
hspace, vspace
دو خصوصیت دیگر هست که حاشیه و فضای خالی دور عکس را کنترل می کند، hspace=" "برای حاشیه چپ و راست عکس وvspace=" " برای بالا و پایین. عددی را که وارد میکنید در مقیاس پیکسل است.
Image link
شما میتوانید یک عکس را به صورت لینک هم درست کنید یعنی هرگاه بیننده روی عکس کلیک کرد به صفحه یا سایت دیگر هدایت شود. در بخش قبل با درست کردن لینک آشنا شدید، در اینجا شما باید تگ لینک را قبل از تگ عکس بنویسید و تگ پایان دهنده لینک را بعد از تگ عکس وارد میکنید، بدین صورت:
ساخت نقشه تصویری ( image map )
Image map یکی از تکنیکهای ساخت عکس بصورت لینک است که گاهی اوقات به کمک ما میاید. بطور مثال ما نقشه ایران را در صفحه ای قرارداده و میخواهیم که بیننده سایت هرگاه روی یک استان کلیک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختیار کاربر قرار دهد. این حالت حجم عکس را افزایش نخواهد داد و بهتر است از عکسهایی با حجم بالا استفاده نکنیم که در این مورد به قسمت عکسها رجوع کنید.
خب حالا عکس مورد نظر را با استفاده از تگ درصفحه قراردهید، سپس خصوصیت usemap=" " را به تگ اضافه کنید که آنرا برابربا یک اسم واحد باید قرار دهیم تا از آن اسم در جای دیگر استفاده شود. این خصوصیت به مرورگر میفهماند که عکس را بصورت Image map میخواهیم بکار بریم.
به علامت # دقت کنید که باید نوشته شود. در حال حاضر عکس آماده است و باید تگهای نقشه را وارد کنیم.ابتدا تگ
