در این قسمت از درس به سراغ کار با فونتها و اندازه آنها می رویم.

اندازه فونت را می توان با دستور زیر تعیین کرد:

به جای «x» عددی با علامت منفی یا مثبت قرار می گیرد. وقتی که می خواهیم یک متن بزرگتر دیده شود از علامت مثبت و زمانی که می خواهیم متن کوچکتر شود از علامت منفی استفاده می کنیم. به مثال زیر توجه کنید:

این هم نتیجه تغییر سایز فونت:

این متن بزرگتر دیده می شود

برای کوچکتر کردن متن نیز به همین صورت عمل می کنیم:

این هم متن کوچک شده:

این متن کوچکتر دیده می شود

در این آموزش یک دکمه زیبا را ابتدا قدم به قدم در فتوشاپ طراحی کرده و سپس دکمه گرافیکی طراحی شده را به صورت کاملا" عملی برای استفاده در صفحات وب سایت توسط HTML و CSS پیاده سازی کنیم. برای اینکه یک دکمه سه بُعدی با ظاهری واقعی داشته باشیم ، در طراحی به جزئیات نیز پرداخته میشود. کلیه مراحل به صورت تصویری و به ساده ترین نحوه بیان شده است. در این آموزش با تکنیک هایی در فتوشاپ و CSS آشنا خواهید شد که میتوانید از آنها در تمام پروژه های طراحی وب بهره بگیرید.

مشاهده نمونه کامل دکمه ساخته شده توسط فتوشاپ ، CSS و HTML

این دکمه سه وضعیت دارد : در حالت عادی رنگ داخلی متن دکمه آبی است و هنگامی که ماوس روی آن قرار میگیرد متن دکمه بنفش خواهد شد ، با فشردن دکمه یک افکت طبیعی به آن اعمال می شود که دکمه همانند یک دکمه فشرده شده در دنیای واقعی به نظر میرسد.

بخش اول : طراحی ظاهر دکمه در فتوشاپ

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

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

حقایقی در مورد فرمت های گوناگون تصاویر

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

در مورد تصاویر، دو نوع فشرده سازی وجود دارد:

• Loosy : در این نوع فشرده سازی، هرگاه بخواهیم عکس فشرده شده را از حالت فشرده خارج کنیم، هرگر به کیفیت عکس اصلی نخواهیم رسید؛ هرچند ممکن است این تمایز از فاصله دور مشخص نباشد و شما تصور کنید که عکس اُفت کیفیتی نداشته است. این روش فشرده سازی تصاویر، مناسب برای استفاده در صفحات وب است. تصاویری که به این صورت فشرده شده اند، با وجود اینکه حافظه بسیار کوچکی را طلب میکنند، از کیفیتی مناسب برای انتشار در اینترنت برخوردار هستند.
• Lossless : تصویری که از این نوع فشرده سازی استفاده میکند، هر زمان که از حالت فشرده خارج شود، دقیقا کیفیتی برابر با تصویر اصلی خواهد داشت. در این نوع فشرده سازی تصاویر به مقدار بیشتری از حافظه نیاز دارند، بنابراین برای استفاده در اینترنت مناسب نیستند.

JPEG

JPEG نام یک فرمت برای ذخیره سازی تصاویر است و .jpg یک بسط از این فرمت است. این فرمت از نوع Loosy استفاده می کند و هنگام فشرده سازی آن می توان کاملا به میزان فشرده شدن تصویر کنترل داشت. این فرمت برای ذخیره سازی تصاویری که در آنها از میلیون ها رنگ استفاده شده است مانند عکس های گرفته شده توسط دوربین عکاسی و یا تصاویری که از طیف های رنگی زیاد و یا از گرادینت استفاده کرده اند، مناسب است.

GIF

Gif یک فرمت نقشه بیتی است. بدین معنا که تصویر از یک جدول با پیکسل هایی در خانه های مربعی جدول، تشکیل میشود. سپس اطلاعات مربوط به هر پیکسل بطور جداگانه ذخیره میشود. شما در این ساختار می توانید اطلاعات 256 رنگ را ذخیره کنید و پیکسل ها نیز میتوانند شفاف و بی رنگ (Transparent) باشند. بنابراین این فرمت Lossless است چراکه اطلاعات پیکسل ها همواره ذخیره شده و قابل بازیابی است.

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

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

PNG

از آنجا که فرمت تصویری gif یک فرمت غیر رایگان با حقوق محفوظ و ثبت شده بود، فرمت PNG به صورت رایگان به منظور بهبود خاصیت های gif به وجود آمد. فرمت تصویری PNG دارای طیف رنگی وسیع تری نسبت به gif است. ساختار PNG توانایی ذخیره پیکسل های شفاف را به صورت فشرده داراست و توانایی فشرده سازی این فرمت نسبت به gif بیشتر است.

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

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

در اکثر نرم افزارهای ویرایش تصاویر گزینه ذخیره سازی برای وب (Save for web) در منوی فایل قرار دارد. ممکن است در سایر ویرایشگرهای مشابه این گزینه در منوی فایل و زیر منوی Export قایل دسترسی باشد. 

دکمه چاپ صفحات وب سایت یکی از قابلیت هایی است که بر حسب نیاز و نوع محتوا می تواند به وب سایت شما افزوده شود. شاید برخی از کاربران از نحوه پرینت گرفتن توسط امکانات پیش فرض مرورگر خود بی اطلاع باشند و نتوانند محل دکمه Print (کلید میانبر Ctrl+P) را به راحتی پیدا کنند و یا اینکه دکمه چاپ پیش فرض در مرورگر علاوه بر متن اصلی مورد نظر آنها، عناصر غیر ضروری دیگری مانند منوها، تبلیغات و غیره را در نسخه پرینت نشان میدهد. در این شرایط وجود یک دکمه پرینت که محتوای اصلی صفحه را تمیز و مرتب برای چاپ در اختیار آنها قرار دهد، کاربر را از سردرگمی و یا کارهای زمانبر نجات خواهد داد. در این آموزش چگونگی انجام اینکار توسط کدهای CSS و جاوااسکریپت نشان خواهم داد.

روش های استفاده شده برای چاپ صفحات وب زیاد هستند اما شما به دو طریق ساده می توانید محتوای بخش های مورد نظر خود را در نسخه قابل چاپ نمایش دهید:

روش اول : در این روش شما بخش های اضافه که نمی خواهید در نسخه چاپی ظاهر شوند را شناسایی و در یک فایل Css به طریقی که در ادامه شرح خواهم داد معرفی و حذف خواهید کرد. سپس بخش های باقیمانده را در همان فایل CSS برای چاپ با ظاهر دلخواه استایل دهی می کنیم. سپس توسط کد جاوااسکریپت محتوای باقیمانده برای چاپ ارسال می شوند. این روش رایجترین راه اضافه کردن قابلیت پرینت به وبسایتها است.

فایل CSS

ابتدا تمامی استایل هایی را که میخواهید بر روی نسخه چاپی اعمال شود را در یک فایل CSS جداگانه نوشته و به صورت زیر به بخشheader کدهای صفحه وب خود آن را ضمیمه نمائید:

نکته قابل توجه در خط بالا پارامتر media="print" می باشد. ��ین پارامتر به صفحه وب سایت ما میگوید که فایل css ضمیمه شده تنها برای استایل دهی عناصر نسخه پرینت می باشد و در سایر موارد از استایل های اصلی صفحه استفاده شود.

توجه کنید برای حذف عناصری که نمی خواهید در نسخه پرینت نشان داده شوند باید با استفاده از id و یا class مربوط به آن عنصر، با نوشتن دستور زیر آن را در صفحه پرینت مخفی نمائید. این دستورات در فایل css مربوط به پرینت نوشته می شوند:

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

برای این منظور کافیست تکه کد css زیر را برا روی تصویر ممورد نظر خود اعمال نمائید:

به عنوان نمونه نتیجه اعمال دستور فوق بر روی لوگوی وبسایتها به صورت زیر است:

حالت عادی :

حالت قرینه :

بمب شبکه های اجتماعی در گوگل
در حالی که اغلب افراد از کاربرد  شبکه های اجتماعی آگاه می باشند اما تنها تعداد کمی از افراد از نقش شبکه های اجتماعی در موتورهای جستجو و مقوله سئو مطلع می باشند. بسیاری از شرکت ها در زمینه سئو بر این باور بوده اند که کلمات کلیدی و لینک ها تنها عوامل تاثیرگذار در رنکینگ وب سایت و سئو وب سایت می باشند.

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