داشتن یه صفحه وب رنگارنگ کار خیلی راحت و وسوسه انگیزی است. اما آیا گزینه‌های دیگری هم برای کاربرد رنگ در طراحی وجود داره؟

طرح‌های تک رنگ (Monochromatic Design)
همانطور که از اسمش معلومه، طرح تک رنگ طراحی با یک رنگه. یه رنگ رو به عنوان پایه انتخاب می‌کنید و سفید و سیاه رو بهش اضافه می‌کنید تا سایه‌های متفاوت از اون رنگ بسازید. در این حالت طرحتون منحصراً یک پالت تک رنگ داره و چندین سایه‌ی رو به سفید یا تیره شدن. شکل زیر این بیان رو می‌تونه کاملاً مشخص کنه:

مزایای طرح‌های تک‌ رنگ
ساخت یک پالت تک رنگ خیلی ساده است. رنگ دلخواه رو انتخاب کنید و سیاه و سفید رو بهش اضافه کنید. همین!

وقتی از یک رنگ واحد استفاده می‌کنید، رنگ‌ها هرگز نمی تونن برخورد داشته باشند. اگر رنگ‌ها رو بطور ناگهانی انتخاب کنید، طرح تک رنگ نسبتاً یه گزینه ایمن برای انتخابه.

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

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

معایب طرح‌های تک رنگ
تغییر ناچیز در طرح. نبود تنوع و تباین، دلبستگی دیداری طرح رو کم می‌کنه. اما در مقابل گزینه سادگی طرح رو داره که می‌تونه یه طرح رو از شلوغی نجات بده.

سختی در خواندن متن. اغلب بین رنگ متن نوشته و رنگ پس زمینه کنتراست خیلی کمی وجود داره و خواندن متون دشوار می‌شه. بهتره در این حالت تیرگی رو نسبت به پس زمینه بیشتر کرد.

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

نمونه‌ایی از طرح‌ تک رنگ

طرح های بی رنگ (Achromatic Design)
در طرح‌های بی‌رنگ هیچ رنگی وجود نداره جز سایه‌های ساده‌ای از تیرگی. مزایا و معایب طرح‌های بی‌ رنگ مشابه طرح‌های تک رنگ بالا هستن اما یه خورده بیشتر. مثلا عنوان کردیم با طرح‌های تک رنگ حالت ساده ای رو داریم که آرامش رو تداعی می کنه باید بگم یه طرح بی رنگ می تونه این حالت رو بیشتر بوجود بیاره یا همانطور که یک طرح تک رنگ می تونه متمایز از رنگارنگ بودن باشه یک طرح بی رنگ می تونه خیلی بیشتر این تمایز رو دارا باشه.

یافتن طرح‌های بی‌رنگ خالص روی وب مشکله. بیشترشون کمی قانون شکنی می‌کنند و کمی از رنگ دیگری رو اضافه می کنند. البته منحصراً برای تاکید روی یک المان‌های معین و برای اینکه بی تنوعی رو از بین ببرند. طرح زیر می‌تونه جز این دسته باشه:

نتیجه‌گیری
لزوماً استفاده از رنگ‌های بیشتر مساوی یه طرح بهتر نیست. اگر طرح نیازی به اون رنگ نداره لزومی نداره با رنگ‌های گوناگون جاذبه رو بیشتر کنید.

اگر نوشته‌های وبلاگتون ساده و بدون تکلفه، یه طرح تک رنگ یا بدون رنگ می‌تونه اثر‌گذاری بیشتری روی خوانندگان و بازدیدکنندگان داشته باشه. در کل این طرح‌ها مناسبه برای وبلاگ‌های شخصی و وبلاگ‌هایی که به نوعی لایف استایل هستن.

پس بهتره همیشه به فکر طرح‌های رنگارنگ نباشید و وب رو اندکی کم‌رنگ تر کنید.

قبلاً هم در مورد طرح های بدون آلایش در اینجا نوشتم. از اونجایی که به طرح‌های تک رنگ علاقه زیادی دارم، پست تخصصی Michael Martin در آخرین یادداشت وبلاگش در این مورد، این پست وبلاگ من رو ساخت.راستی بنظر شما الوان وب جز کدوم یکی از این طرح‌هاست؟

SitePoint افزونه‌ای بنام Dust-Me Selectors برای فایرفاکس منتشر کرده است که به شما کمک می‌کند به راحتی این سلکتورها را شناسایی کنید.

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

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

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

+ برای ساخت Sitemap می توانید از این سرویس استفاده کنید. وردپرسی ها هم می‌توانند با سرویس گوگل به کمک این پلاگین Sitemap بسازند.

Aptana را در کار با فریم‌ورک‌های جاوا اسکریپت پیشنهاد می‌کنم اما اگر هنوز از Dreamweaver استفاده می‌کنید و از عدم پشتیبانی از فریم‌ورک‌های جاوا اسکریپت خسته شده‌اید، دیگر نگران نباشید. Chris Charlton افزونه‌ای برای Dreamweaver نوشته است که مشکل را حل می‌کند.

این افزونه برای دو فریم‌ورک jQuery و Prototype از اینجا قابل دریافت است. گویا پشتیبانی از سایر کتابخانه‌ها از جمله MooTools و YUI نیز در حال انجام است.

درهمین رابطه:
+ تنظیمات مربوط به پکربندی فریم‌ورک jQuery را برای Aptana می‌توانید در اینجا بیابید.
+ Spket را هم فراموش نکنید، نحوه بکارگیری jQuery در این IDE هم اینجاست.

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

فکر می‌کنم برای مقدمه تا همین اندازه از فریمورک بدانید کافی باشد برای اطلاعات بیشتر می‌توانید مقاله “فریمورک برای طراحان” نوشته Jeff Croft را بخوانید. به گفته نویسنده سی‌اس‌اس فریمورک، همین مقاله باعث شده است تا به فکر ایجاد یک فریمورک عمومی برای سی‌اس‌اس بیفتد. برویم سراغ اصل مطلب که همان سی‌اس‌اس فریمورک و پروژه Blueprint است.

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

در نسخه جدید (0.4) که چند روز پیش منتشر شد، قابلیت‌های بیشتری به آن اضافه شده است و با استقبالی که از آن صورت گرفته، پیش‌بینی می‌شود این روند همچنان ادامه داشته باشد. تنها مشکلی که فکر می‌کنم ما کاربران فارسی زبان در استفاده از آن داشته باشیم نوع فونت بکار رفته در مشخصه‌ی font-family و همچنین نوع چیدمان باشد که با کمی وارسی سورس فریمورک قابل حل است.

+ برای اطلاعات بیشتر در مورد این فریمورک اینجا را ببینید. اگر Google code اجازه دریافت فایل را به شما نمی‌دهد، نسخه 0.4 (آخرین نسخه در زمان نگارش این مطلب) را از اینجا دریافت کنید.

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

افزودن توضیح در CSS بسیار ساده است. یک توضیح در CSS با علامت */ شروع و با /* خاتمه می‌یابد. این نوع از توضیح‌نویسی به عنوان C style شناخته می‌شود چرا که در زبان برنامه‌نویسی C این متد کاربرد دارد. توضیحات می‌توانند در یک یا چند خط باشند و در هر جایی در کنار کد قرار بگیرند:

/* Body Styles */
body {
font-size: 67.5%; /* Set the font size */
}

افزودن توضیحات ساختاری
اولین توضیحی که معمولاً در سرآیند یک فایل CSS قرار می‌گیرد نشان می‌دهد که این استایل برای چیست، همچنین تاریخ ایجاد و شماره نسخه، نام و وب آدرس نویسنده را نیز در بر می‌گیرد:

/*–––––––––––––––––––––––––––––––––––––––––––––––––
Basic Style Sheet (for version 4 browsers)
version: 1.0
author: morteza alvani
email: info@example.com
website: http://www.alvanweb.com/
–––––––––––––––––––––––––––––––––––––––––––––––––*/

سپس کدها را به طور مشهود از هم تفکیک می‌کنیم. معمولاً این‌کار با قواعد عمومی نظیر تایپوگرافی، عناوین (headlines) و لینک‌ها شروع می‌شود. پس از آن وارد زیر ساخت پایه و جزیی می‌شویم به طور مثال می‌توانیم استایل طرح را به قسمت‌های: محتوای اصلی (main content)، محتوای فرعی (secondary content)، هدایت‌گر اصلی (main nav) و فرعی و در نهایت پانویس (footer) تقسیم کنیم. نظیر بخش اول از الگویی مثل زیر برای جداسازی قسمت‌های مختلف استفاده می‌کنیم. بزرگ بودن این توضیح باعث خواهد شد تا از لحاظ دیداری زودتر قسمت مربوطه را بیابیم:

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––*/

این یک مدل خیلی ساده و در عین حال جزئی است شما می‌توانید این قسمت‌ها را به زیر مجموعه‌های کوچک‌تری نیز تقسیم کنید که باعث سهولت در فهم و جستجوی آسان خواهد شد. کد‌نویسی یک سایت بزرگ این موضوع را به وضوح نشان خواهد داد. حتی در برخی موارد نمی‌توان به مورد فوق هم بسنده کرد و نیاز خواهیم داشت تا از یکسری کاراکتر اضافی پیش از توضیحی که در مورد کدها می‌نویسیم استفاده کنیم. چرا که ممکن است فایل‌های CSS ساختارهای مشابهی داشته باشند. به طور نمونه الگوی زیر را در نظر بگیرید:

/* =Typography
–––––––––––––––––––––––––––––––––––––––––––––––––*/

در این مثال جستجو برای ” typ= ” شما را مستقیماً به قسمت تایپوگرافی هدایت خواهد کرد. بنابراین با این روش می‌توانید در پروژه‌های یزرگ زمان جستجو را به حداقل کاهش دهید. بیشتر طراحان یک مدل اولیه دارند و از آن برای نظم دهی به استایل در همه طرح‌هایشان استفاده می‌کنند بنابراین نیازی ندارند تا در هر پروژه جدید مجدداً به توضیح‌نویسی کامل بپردازند.

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

/*Use the star selector hack to give IE a different font size http://tinyurl.com/5hf69*/
* html body {
font-size: 75%;
}

همچنین برای اینکه توضیحات خود را معنی‌دار تر کنید می توانید از واژه‌های کلیدی برای توضیحات مهم استفاده کنید. بالفرض از TODO برای یادآوری آنچه باید تغییر کند، از BUG برای مشکلی که وجود داشته است و از KLUDGE برای بیان راه حلی که استفاده کرده‌اید:

/* :TODO: Remember to remove this rule */
/* :KLUDGE: Setting a small negative margin but it's not pretty */
/* :BUG: Rule breaks in IE 5.2 Mac */

همچنین می توانید از واژه TRICKY برای هشدار به سایر توسعه‌دهندگان در مورد پیچیدگی قسمتی از کد استفاده کنید. در قوانین برنامه‌نویسی، این واژه‌های کلیدی Gotcha به معنی I caught you نامیده می‌شوند و می‌توانند در مراحل بعدی توسعه خیلی مفید باشند.

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

بهترین گزینه شاید فعال کردن فشرده‌سازی سمت سرور باشد. اگر شما از سرور آپاچی استفاده می‌کنید با مسئول هاست خود در مورد نصب mod_gzip و mod_deflate صحبت کنید. بسیاری از مرورگرهای مدرن می توانند فایل‌های فشرده شده با GZIP را پردازش کنند و آن‌ها را در کسر کوچکی از زمان از حالت فشرده خارج کنند. این ماژول‌های آپاچی می‌توانند تشخصی دهند که آیا مرورگر می‌تواند این قبیل فایلها را پردازش کند یا خیر، اگر بتواند، یک نسخه فشرده شده از فایل را ارسال می‌کند. فشرده سازی سمت سرور می تواند تا حدود 80 درصد از حجم فایل‌های XHTML و CSS را کاهش دهد، در نتیجه پهنای باند مصرفی را کاهش می‌دهد و صفحات سریع‌تر بارگذاری خواهند شد. اگر شما دسترسی به این ماژول‌ها ندارید، می توانید با استفاده از این آموزش فایل‌هایتان را فشرده کنید. قبلا روش ترکیب PHP و فشرده‌سازی CSS در اینجا توضیح داده شده است.

• + CSS Mastery book (Chapter 1: SETTING THE FOUNDATIONS)
  + CSS Management and Optimization
  + Gzipping your CSS

+ منابعی که در تدوین این مقاله از آنها استفاده کرده‌ام.

این مجله 35 طراح و کمپانی برتر در سرتاسر جهان را در ماه مارس انتخاب کرده و از آن‌ها خواسته تا به 5 سئوال در رابطه با طراحی پاسخ‌ دهند تا از این طریق دانش و تجربه‌هایشان را با دیگر توسعه‌دهندگان تقسیم کنند. پنج سئوال به این صورت بوده است:

• 1- یک جنبه از طرح که بیشترین ارجحیت را به آن می‌دهید.
  2- یکی از مفیدترین تکنیک‌های CSS که اغلب از آن استفاده می‌کنید.
  3- یک فونت که اغلب در پروژه‌ها بکار می‌برید.
  4- یک کتاب عالی در زمینه طراحی که خواندن آن را توصیه می‌کنید.
  5- یک مجله در زمینه طراحی که بصورت روانه یا هفتگی می‌خوانید.

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

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

تغییر سایز متن بدون استفاده از واحد پیکسل
(در این پست سعی می کنم بیشتر در مورد تایپوگرافی بنویسم) قدیما هر وقت طرح های حرفه ای رو نگاه می کردم می دیدم بیشترشون برای سایز متن ها از واحد em بجای px استفاده می کنن. حالا دلیل این کار بماند آخر مقاله؟ اما جالب اینجا بود که اگر المانی رو که مثلا اندازش 12px بود رو می خواستی معادل کنی به واحد em بجاش می نوشتن 1.2em یعنی تقسیم بر ده می کردنش. کار ساده ای به نظر می رسید. ما هم گفتیم همه المان هایی که به واحد پیکسل هستند رو بر ده تقسیم و بجاش از em استفاده می کنیم. ولی دیدم خیلی سایزش متفاوت شد. دو تا کلاس ساده به شکل زیر ایجاد کنید:

<div class="test1">Hello Morteza</div>
<div class="test2">Hello Morteza</div>

این هم سورس سی اس اس کلاس ها، یکی سایز فونتش به واحد px و دیگری به واحد em
(نوع فونت هم مهم نیست):

.test1 { font-size: 1.5em; }
.test2 { font-size: 15px; }

اگر مدل بالا رو امتحان کنید نتیجه دو نوع نوشته با فونت سایزهای متفاوت خواهد بود. (یقینا نوع مرورگر هم بی تاثیر است). برای حل مشکل فوق تنها کافیه برای مشخصه body در فایل سی اس اس، سایز فونت رو برابر با 62.5% قرار بدین. به غیر از این عدد هر عددی رو که انتخاب کنید دو سایز با هم متفاوت خواهند بود. (البته این حالت هم مقدار ناچیزی خطا داره که به چشم نمیاد) کد زیر رو به فایل سی اس اس خودتون انتقال و نتیجه رو مشاهده کنید:

body { font-size: 62.5%; }

پس هر جا دیدید طرف اندازه فونت رو در body برابر 62.5 درصد قرار داده، تعجب نکنید این از کجا اومد. اما چرا بجای px از em استفاده کنیم؟ ببینید اگر جهان وب یک نمونه ایده آل و یکسان بود یقینا از پیکسل استفاده می کردیم. اما این جور نیست، ما مرورگرهایی داریم که برخی فرآیندها رو نقض می کنن. اینترنت اکسپلرر ویندوز (IE/Win) به خوانندگانش اجازه نمی ده که المان هایی رو که سایزشون بر مبنای واحد پیکسل تنظیم شده، تغییر اندازه بدن. همون مثال فوق رو در نظر بگیرید هر دو واحد رو مثلا به 15px بنویسید در IE به منوی Viwe و از اونجا Text Size رو تغییر بدین، آیا تغییری مشاهده می کنید؟!

چه لزومی داره که خوانندگان فونت نوشته رو تغییر سایز بدهند؟ شاید خواننده ای نزدیک بین باشه، شاید از این لب تاب های خنده دار با رزولیشن بالا استفاده کنه یا واقعا با سایزی که شما انتخاب کردید چشمهاش خسته بشه. بنابراین مگر اینکه شما بدانید (فکر نکنید) که مخاطبان شما از IE استفاده نمی کنن یا هرگز تمایل ندارند سایز نوشته هایتان را تغییر بدهند. اما وقتی از em استفاده می کنید قابلیت تغییر سایز متن برای همه مروگرها وجود خواهد داشت.

کمی آن طرف تر:
نمی دونم تا چه حد با مفاهیم parent و child در المان های آشنا هستید. اما همین قدر بدونید که المان هایی که تحت یک المان دیگه واقع می شن یا به عبارتی زیر مجموعه ای از سری بالاتر قرار می گیرند child و خود سری اصلی رو parent می نامند. بنظرم این مفاهیم آشنا باشه و نیازی به شرح بیشتر نیست. تنها برای روشن تر شدن قضیه مثال زیر رو در نظر بگیرید:

<div id="page">
<h1>Hello Morteza</h1>
</div>

در الگوی بالا مشخصه page رو parent و تگ عنوان H1 رو child تعریف می کنیم. در مرورگرهایی که مبنی بر موزیلا (Mozilla) هستند هرگاه المان های عنوان یا سر فصل نظیر h1، h2 تا h6 یا بعبارتی heading elements ها به عنوان child در نظر گرفته بشن، فونت سایز المان parent رو به ارث می برند. اما سایر مرورگرها از این متد تبعیت نمی کنند و heading ها رو در اندازه های متفاوت نشون می دن. راه حل همه اینه که بیایم به المان های عنوان ها فونت سایزهای از پیش تععین شده نسبت بدیم. اما اینکه چه سایزی رو بر حسب واحد em انتخاب کنیم کمی مشکل خواهد بود.

فرض کنید در مثال بالا سایز فونت المان page برابر 12px باشه. شما می خواهید عنوان h1 فونت سایزی برابر 24px داشته باشه. چکار کنیم؟ چه طور بر حسب em تبدیلش کنیم؟ حتما می گید تقسیم بر ده می کنیم و بجاش می نویسیم 2.4em البته 62.5% رو هم در body لحاظ می کنیم. نه این اشتباهه ! امتحان کنید چرا که فونت سایز المان h1 تحت تاثیر فونت سایز المان page قرار خواهد گرفت. برای اینکه این واحد را به em معادل کنید یه فرمول خیلی جالب هست و اون اینکه فونت سایز المان child رو بر مبنای px بر فونت سایز المان parent بر مبنای px تقسیم می کنیم، فونت سایز المان child بر مبنای em بدست خواهد آمد. یعنی در این مثال فونت سایز المان h1 رو که به عنوان child لحاظ شده (عدد 24 پیکسل) بر فونت سایز المان page که به عنوان parent واقع شده (عدد 12 پیکسل) تقسیم می کنیم در نهایت فونت سایز المان h1 برمبنای em به صورت 2em خواهد بود.

موضوع رو گرفتید؟! امیدوارم. حرف هایی که بالا زده شد در مورد المان های تیتر یا عنوان یا همان heading ها بود. برای درک بیشتر موضوع به سراغ لیست آیتم ها ( آیتم های لیست شده) می رویم. قاعده زیر را در نظر بگیرید این به ما می گوید که تمام آیتم هایی که در زیر مجموعه المان page قرار دارند باید سایزشان 10px باشد. (فراموش نکنید فونت سایز المان page همان 12px مثال بالا در نظر گرفته شده است)

#page li { font-size:0.8333em }

چرا 10px؟ طبق فرمول 10px تقسیم بر 12px می شود 0.8333 em اما به نظر شما وقتی یک لیست در زیر مجموعه یک لیست دیگر قرار بگیرد چه اتفاقی خواهد افتاد؟ کوچکتر خواهد شد اما چرا؟ چون قاعده بالا به ما می گه هر لیست آیتمی که در زیر مجموعه المان page واقع بشه، باید 0.8333 ام سایز المان parent خودش باشه. بنابراین دوباره ما به یک قاعده ای نیاز داریم که تاثیر این کاهش ارثی رو از بین ببره. الگوی زیر این کار رو انجام می ده:

li li {font-size:1em}

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

li li, li P, TD P, BLOCKQUOTE P {
font-size:1em
}

اگر این پست رو تا آخر خوندین و چیزی هم یاد گرفتید یا از قبل یاد داشتید و از یادتون رفت حتما در نظرات مطرح کنید تا کیفیت مطالب رو تغییر بدم. اگر قسمتی از این پست رو هم متوجه نشدین همین جا مطرح کنید بهتر از ایمیل زدن خواهد بود. موفق باشید.

• + How to size text using ems
  + Effective Style with em
  + CSS Font Size Explained
  + Font Sizing by Eric Meyer
  + Sitepoint Forums: Best Practice for font-size
  + Webmaster world forums: PX to em and more

+ لیست منابعی که در این آموزش بیشتر کمکتان خواهند کرد.

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

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

   
   

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

پیشنهاد می کنم برای خوب درک کردن این موضوع یک صفحه وب رو بدون کاربرد اجزا گرافیکی و عناصر زمینه دار و رنگی و بدون هیچ حاشیه ای (border) ایجاد کنید. یادتون باشه به هموزنی و تعادل نواحی مختلف صفحه توجه کنید و تنها مجازید از متن استفاده کنید.

+ اصل این مقاله را می توانید در اینجا بخوانید.

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

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

معروفترین آن ها دو عنصر before و after است. اما قبل از توضیح این دو لازم است عنصر content را نیز بشناسید. این عنصر در CSS2 تعریف شده و به طور خودکار محتویات را قبل یا بعد از یک انتخابگر CSS پیوست می کند. به عبارت دیگر نوع مولفه را تعیین و متعاقبا چگونگی نمایش آن را بیان می کند و همیشه با before و after بکار می رود.

اما خود before و after برای کنترل مقدار عنصر content به کار می رود. به طوری که after مقدار را بعد از مولفه قرار می دهد و before مقدار را قبل از آن. معروفترین مقادیری که عنصر content می تواند اختیار کند به شرح زیر است:

String : همانطور که از نامش پیداست یک رشته را اختیار می کند که می تواند یک علامت خاص یا یک واژه باشد. نمونه زیر را ببینید، عنصر نامبرده علامت ~ را اختیار کرده است. به طوری که این علامت قبل از مولفه li قرار می گیرد:

li:before {
content: "~";
}

Url : پرکاربرد ترین مقدار برای عنصر content است و به محتوای که بر روی وب موجود است اشاره می کند. اغلب اوقات این محتوا یک فرمت تصویری یا صوتی است که بسته به پشتیبانی مرورگر می تواند فرمت های دیگری هم داشته باشد. در نمونه زیر تصویر آدرس داده شده بعد از مولفه li قرار می گیرد:

li:after {
content: url("link_sign.gif");
}

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

open-quote and close-quote
no-open-quote and no-close-quote
attr(X) and counter()

نادر از آن جهت که آدرس های URL ما آنچنان گویا ی نام دقیقی نیست که با تایپ آن بتوان به آن دست یافت، هر چند با رشد سریع صفحات وب این امر، آنچنان دور از ذهن نیست. فراموش نکنید 1- ما کاربری را در نظر گرفته ایم که برای اولین بار وبلاگ شما را مشاهده میکند، بحث ویزیتورهای قدیمی شما جداست. 2- از وبلاگ حرف می زنیم نه وب سایت، اشتباه نگیرید.

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

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

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

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

در نهایت، همیشه به خاطر بسپارید که هدایت مسیری برای رساندن کاربر به انتهاست نه خود انتها. به طور کلی کاربران نمی خواهند از زیبایی های سیستم هدایت تان شگفت زده شوند، احتمالا وبلاگ شما را یک توقف کوتاه در سفر بزرگتری که روی وب دارند در نظر می گیرند.

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

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

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

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

حال با گفتن همه مزایای اندازه های ثابت صفحه، چه اندازه ای مناسب است؟ ابتدا یک کاغذ، سایز نامه را در نظر بگیرید. این یک اندازه استاندارد 11×½8 اینچ است. روی یک سیستم با درجه وضوح 72dpi این به شکل 612 پیکسل در 792 پیکسل در خواهد آمد. مرورگری مانند اینترنت اکسپلرر می تواند محتویات را در سه صفحه با دقت 640×480 و یا در دو صفحه یا بیشتر با دقت 600×800 یا یک صفحه و نیم با دقت 768×1024 پرکند و در انتها کل صفحه با 1280×1024 کامل می شود.

حال این اعداد و ارقام بیانگر چه چیزی برای ماست؟ این مساله به ما می گوید که مشکل اصلی، صفحه نمایش کاربر است. حال سئوال بزرگتر این است که اندازه صفحه نمایش چقدر باشد؟ ابتدا سیستم های کامپیوتری را در نظر بگیرید، اندازه صفحه نمایش معمولی شامل 640×480 ، 600×800، 1024×767، 1024×1280 و 1600×1200 است. سایز های دیگری نیز مهم هستند مثل اندازه صفحه نمایش های MSNTV و پالم.

اندازه صفحه نمایش آن قدر که طراحان تصور می کنند مهم نیست، حتی اگر کاربران وضوح خاصی داشته باشند سایز مرورگرشان را با کل صفحه نمایش تنظیم نمی کنند و نمی خواهند این کار را انجام دهند. رنگ مرورگرهای رایج فضای صفحه نمایش را می گیرد. سیستم عامل های گوناگون همانند ویندوز به هر حال کمی فضا اشغال می کنند. حتی اگر فرض را بر این بگیریم که کاربران درجه وضوح 640×480 داشته باشند، قبل از حرکت نوار پیمایشی فقط 570 تا 580 پیکسل از عرض صفحه نمایش و 280 تا 300 پیکسل از طول آن، بسته به نگارش رورگر قابل استفاده است.

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

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

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

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

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

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

چند راهنمایی اساسی در مورد استفاده خوب از رنگ ها : 1) فقط از چند رنگ متفاوت بر روی یك صفحه استفاده كنید . 2) از مقدار زیادی از رنگ ها استفاده نكنید. 3) رنگ های سرد و گرم را با یكدیگر استفاده كنید .

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

در نهایت سیاه و سفید مطلق ، به اضافه یك رنگ آسانترین هارمونی است . با وجودی كه كمی خسته كننده است ، اما مورد اطمینان می باشد و دوست داشتنی و دلپذیر به نظر می رسد ، بخصوص اگر رنگ مورد استفاده روشن باشد و این برای نشان دادن تضاد بین دو رنگ سفید و سیاه خنثی است .

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

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

در انتها جالبه از معنای مخفی رنگ ها هم آگاه بشید . در حقیقت هر رنگی در ادبیات و فرهنگ جامعه معنای خاصی داره ولی اغلب معنی رنگ ها اینجور تعریف می شن :

قرمز : گرما ، شادابی ، شهامت ، ایست ، اخطار . صورتی : موئنث ، ملیح ، پشمك . نارنجی : گرم ، پاییز ، جشن هالیوون . زرد : خوشحال ، شاد و بشاش ، كاهش. قهوه ای : گرم ، پاییز ، كثیف. سبز : حسادت ، بی تجربه ، خلاقیت ، تازگی. آبی : آ رامش ، ناراحتی ، آب . بنفش: شكوه ، شیك ،تجمل . سیاه : شیطانی ، سرد ، ترسناك ، مرگ ، غم و غصه . خاكستری : ابری ، افسرده ، ناامیدی ، دوران پیری . سفید : باكره ، پاك ، بی گناه ، سرد . منبع : كتاب مرجع طراحی و ساخت صفحات وب نوشته ی جناب توماس پاول

Rollover هم همون جور كه مطلع هستید یه مكانیزم برای نشان دادن اینكه چیزی فعال است ، می باشد و یك پیوند Rollover هم پیوندی است كه در بعضی مدها ، معمولا با یك رنگ یا تغییر شكل ، وقتی موس كاربر روی آن قرار می گیرد فعال می شود . فكر نكنم كسی تا به حال این جور پیوندی ندیده باشه . چون استفاده از اون ها تحت وب آن قدر رایجه كه به صورت كلیشه ای در آمدند .

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

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

اول با استفاده از جاوا اسكریپت . این كد جاوا اسكریپت نسبتا به سادگی نوشته می شود ، و در ابتدا فقط نیازمند تصاویری جهت بارگذاری است و پشتیبانی از شی JavaScript Image باید وجود داشته باشد . كد زیر این rollover پایه را نشان می دهد :

<script type="text/javascript">
if (document.images)
{
homeon = new Image(85, 48);
homeon.src = "images/homeon.gif";
homeoff = new Image(85, 48);
homeoff.src = "images/homeoff.gif";
}
function rollon (imgname)
{
if (document.images)
document [imgname].src = eval(imgname + "on.src");
}
function rolloff (imgname)
{
if (document.images)
document [imgname].src = eval(imgname + "off.src");
}
</script>

برای تست عملكرد این كد شما باید كد اسكریپت بالا رو در میان تگ <head></head> صفحه قرار دهید یا محتویات اسكریپت را در یك فایل با پسوند js ذخیره كنید و سپس آن را در صفحه خود در تگ مذكور فراخوانی كنید و كدهای پایین رو در میان تگ <body></body> قرار دهید :

<a href="home.htm" onMouseOver="rollon('home')" onMouseOut="rolloff('home')">
<img src="images/homeoff.gif" border="o" alt="home" name="home" id="home" />
</a>

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

حال به سراغ CSS می رویم تا به كمك آن نمونه ایی از منوی فوق را طراحی كنیم . اگر به شكل و شمایل منو نگاه كنید می بینید فقط گوشه های اون یه خورده انحنا داره . به طور كلی منظور اینه كه این منو از سه تیكه تشكیل شده دو قسمتش مخصوص گوشه های چپ و راست و در میان اون ها یه مستطیل .

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

#navigation a {
color: #000;
background: #fb0 url("images/left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px }

خوب عناصر به كار رفته كاملا واضحه فقط یه نكته در مورد padding-left ، اون هم اینكه مقدار داده شده به این رشته نشون دهنده فاصله از ابتدای خمیده گی است . چون ما یه منحنی داریم و عنوان بك گراند بكار رفته ( گوشه سمت چپ ) برای این كه نوشته ما زیر انحنا درست قرار بگیره از این رشته اسفاده كردیم . می تونید حذفش كنید و تاثیرش رو مشاهده كنید .

در ادامه كار گوشه سمت راست رو به تگ span نسبت می دیم برای این هم مانند مرحله قبل ، رشته ی padding-right رو تعیین می كنیم . كه در حقیقت فاصله متن رو از انحنای سمت راست مشخص می كنه :

#navigation a span {
background: url("images/right-tab.gif") right top no-repeat;
padding-right: 10px
}

تا اینجا ما حالت نرمال و معمولی پیوند رو ایجاد كردیم . در ادامه كار و برای بكاربردن اون كافیه كدهای زیر رو در تگ <body></body> صفحه خودتون قرار بدید :

<div id="navigation"><a href="/"><span>Home</span></a></div>

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

#navigation a:hover {
color: #fff;
background: #26a url("images/left-tab-hover.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a:hover span {
background: url("images/right-tab-hover.gif") right top no-repeat;
padding-right: 10px }

كار به پایان رسید حالا شما یه منوی Rollover دار گرافیكی دارید كه می تونید اون رو آزمایش كنید و در طرح هاتون از اون استفاده كنید . با استفاده از دو تگ <ul> و <li> كه به نظر من زیباترین تگ ها دنیای html هستن می تونید یه نوار از این منو ها رو ایجاد كنید . برای راهنمایی بیشتر در این زمینه به اینجا رجوع كنید . در ضمن كلیه تصاویر و گوشه های به كار رفته در این آموزش به همراه اسكریپت ها مربوطه رو جهت تمرین بیشتر می تونید از اینجا دانلود كنید . شاد و خرم پیروز باشید ، مرتضی الوانی

راه حل مایكروسافت Open Type نامیده می شود و از نگارش 4 در اینترنت اكسپلرر ساخته شده است . مرورگرهای نت اسكیپ 4.x از فناوری قلم معمولی به صورت بومی استفاده كردند . متاسفانه مرورگرهای اپرا ، 6.7 نت اسكیپ و موزیلا 1 قلم های قابل دریافت از اینترنت را در بر نمی گیرند ، بنابراین استفاده از قلم در پلت فرم های مختلف می تواند دشوار باشد .

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

سپس از Microsofts Web Embedding Font Tool (WEFT) كه در اینجا در دسترس است برای تحلیل كاربرد قلم بر روی صفحه استفاده كنید . این برنامه باید یك فایل .eot كه شامل قلم های جایگزین شده می باشد را ایجاد كند . سپس ، اطلاعات استفاده از قلم را به صفحه و به شكل قوانین CSS كه در CSS2 به طور اساسی تعریف شده اند اضافه كنید ، همان گونه كه در زیر نشان داده شده است :

<style type="text/css">
@font-face {
font-family: Ransom;
font-style: normal;
font-weight: normal;
src: url(fonts/ransom.eot);
}
.special {
font-family: Ransom;
color: #009900;
font-size: 28pt;
}
</style>

به مثال توجه كنید كه چگونه انتخابگر @font-face به شما اجازه ی آوردن هر تعداد قلم را به درون صفحه می دهد . شاید تعریف راهنمای قلم ها درون وب سایت شما برای ذخیره كردن فایل های قلم مفید و موثر باشد ، شبیه ذخیره فایل های تصویری برای استفاده در سایت . هم چنین توجه كنید كه چگونه می توانید از قوانین معمولی شیوه نامه نظیر class در كنار برچسب <font> معمولی استفاده كنید :

<font face="Ransom" size="+6">Example Ransom Note Font</font>
<br/>
<span class="special">This is also in ransom</span>

برای كسب اطلاعات بیشتر در مورد قلم ها ی نهفته شده در اینترنت اكسپلرر و اتصال به ابزار ایجاد كننده فایل قلم مانند WEFT ( ابزار قلم گنجانده شده در وب ) می توانید سایت Microsoft Typography را ببینید . با وجودی كه فناوری قلم قابل دریافت از اینترنت در حال بهبود و پیشرفت است ، ولی باید مواظب سازگاری مرورگرها باشید .

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

به محض تكمیل شدن ، فناوری قلم قابل دریافت از اینترنت به شدت استفاده از تایپ در وب را تغییر می دهد و كاربران را قادر به ایجاد صفحات زیبا و نیز استفاده از انواع قلم بازنویسی شده می كند . منبع : كتاب جناب توماس پاول ترجمه ی آقای احمد شیدا

در آخر ، بعضی از طراحان از این حقیقت آگاه هستند كه از آنجایی كه تصاویر jpeg خیلی زیاد فشرده می شوند . زمان صرف شد برای باز كردن تصویر یا فایل می تواند یك عامل مهم باشد . با وجود كامپیوتر های پرقدرت تر و خط های پرسرعت تری كه این روز ها وجود دارد ( البته ما ها كه هوز دومیش رو به طور رسمی نداریم ) ، زمان باز كردن یك فایل jpeg خیلی وقت ها مشكل ایجاد نمی كند . اگر یك JPEG بی اندازه بزرگ بسازید و ان را به شدت فشرده كنید ، متوجه تاخیر خواهید شد . البته اگر از یك GIF استفاده كرده باشید ، تصویری بدتر كه ممكن است همان اندازه را هم داشته باشد خواهید داشت .

قالب گرافیك قابل حمل شبكه ( PNG ) یكی از قالب های آشكاری است كه تمام ویژگی های GIF را به علاوه چندین ویژگی دیگر به همراه دارد . اول اینكه ، الگوریتم فشرده سازی png تا اندازه ایی بهتر از فشرده سازی gif به نظر می آید . اما تنها این مساله باعث نمی شود كه از تصاور gif دست بكشیم ، مشكلات سازگاری مرور گرها هنوز باعث درد سر قالب است . png تا اندازه كمی نمایش تصویر به صورت بافتی یا مشبك را نیز بهبود می بخشد .

تصاویر PNG مانع رنگ هشت بیتی كه در تصاویر gif به طور عادی وجود داشت را شكسته است ، اما با وجود درجه ی فشرده سازیی كه در png های امروزی موجود است عاقلانه به نظر نمی رسد كه فایل png را در همه ی حالات نسبت به Jpeg ترجیح دهیم . از امكانات چشمگیری كه در مورد تصاویر PNG وجود دارد ، شفاف سازی بهبود یافته را می توان نام برد . فایل های PNG بیشتر از انكه بخواهند محدود به تنها یك رنگ برای ماسك های شفافیت باشند ، می توانند تا 256 رنگ در یك ماسك استفاده كنند . بنابراین آن ها لبه های شفاف خود را صاف و اثرات سایه را از بین می برند .

یكی دیگر از مشكلاتی كه PNG به وجود می آورد ، تغییر رنگ آشكار در تصاویری است كه در سیستمی با یك گاما یا مقدار درخشندگی ساخته می شوند و سپس در سیستمی با مقدار گامای متفاوتی نمایش داده می شوند . در این شكل توجه كنید كه چگونه تصاویر در مقادیر گامای متفاوت ، شبیه به هم به نظر نمی رسند . PNG از این مساله اجتناب می كند . در نهایت ، PNG تصویر متحرك را از طریق MNG پشتیبانی می كند ، كه چیزی است كه در تصویرهای متحرك GIF دیده می شود .

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

اگر چه این بحث ظاهرا به پایان رسید اما فرمت های تصویری دیگری از جمله فلش ، BMP ، XPM و … وجود داره اما چون فعلا حس و حالش نیست و خیلی كمتر در طراحی به كار می رن از شرح اونا خودداری می كنم و اگر در آینده لازم بود مطرح خواهد شد . منبع : كتاب جناب توماس پاول ترجمه ی آقای احمد شیدا

هرچند استفاده ی بیش از حد از هنرهای گرافیكی می توان بر روی سایت های غیر قابل استفاده اثر و نتیجه ی منفی داشته باشد . استفاده ی صحیح از تصاویر در وب سلیقه ایی نیست ، بلكه احتیاج به فهم كامل از فرمت های فایل های مختلفی مانند GIF , JPEG , PNG دارد . هدف اصلی طراحان این است كه كیفیت تصاویر را با اندازه فایل بارگذاری شده متعادل كنند .

چون شاخصه های هر یك از فرمت های فوق نیاز به توضیحات مفصل دارد ، توضیح به صورت یكجا مقدور نیست بنابراین در این پست به بررسی شاخصه های فرمت GIF می پردازیم و ما بقی آن ها را به پست های آینده موكول می كنیم .

تصاویر GIF در وب به طور وسیعی پشتیبانی می شوند . در آغاز توسط كامپیوسرو ( و گاهی اوقات به عنوان CompuServe GIFs به آن اشاره می شود ) معرفی شدند . قالب GIF در واقع داری دو نوع است : GIF 89a و GIF 87 . هر دو قالب رنگ هشت بیتی را پشتیبانی می كنند . امروزه وقتی از GIF صحبت می شود همیشه در نظر می گیریم كه قالب GIF 89a در حال استفاده است و هیچ گونه تفاوتی بین این قالب ها قائل نیستیم .

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

ونه كه ذكر شد تصاویر GIF فقط رنگ هشت بیتی را برای حداكثر 256 رنگ در تصویر پشتیبانی می كنند . در نتیجه ، بعضی از ضایعات به هنگام ارائه رنگ واقعی تصاویر ، مانند عكس ها ، غیر قابل اجتناب است .نوعا وقتی كه یك تصویر از پالتی با تعداد رنگ های زیاد به یك پالت رنگ كوچك تر نگاشت بشود ، در هم ریختگی اتفاق می افتد . در هم ریختگی سعی می كند رنگی كه از پالت بیرون است را خلق كند . این كار را بدین صورت انجام می دهد كه دو رنگ یا بیشتر از پالت را می گیرد و جایگزین طرح شطرنجی یا نقطه نقطه می كند به طوری كه مشابه رنگ اصلی را به وجود می آورد .

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

با وجود اینكه داشتن عمق رنگ فقط 8 بیتی به نظر مسئله ساز می آید ، اما در بعضی مواقع طراحان عمق بیت فایل GIF را به صورت نزولی تنظیم می كنند تا اندازه فایل كاهش یابد . به خاطر داشته باشید كه هر چه عمق بیت در یك تصویر بیشتر باشد ، رنگ ها و همچنین مقدار اطلاعات لازم بیشتر خواهد بود . ممكن است این مسئله عاقلانه به نظر بیاید كه تا آنجا كه ممكن است با محدود كردن تعداد رنگ ها ، بدون كاهش كیفیت تصویر ، فایل های كوچك زیادی به وجود آورید .

تنها راه برای انجام این كار آن است كه در تصاویر از رنگ های كافی استفاده كنید كه بدین وسیله از آن چه آنجا وجود دارد یا هر چه كه برای در هم ریختگی مناسب است بتوان پشتیبانی كرد . استاندارد GIF های 8 بیتی شامل 256 رنگ است ، 7 بیت 128 رنگ ، 6 بیت 64 رنگ ، 5 بیت 32 رنگ و … .
بیشتر برنامه های گرافیكی مانند Fireworks یا فتوشاپ همراه با ImageReady ، در هنگام ذخیره ی تصویر به طور مستقیم از كاهش رنگ پشتیبانی می كنند . شكل های اینجا نمونه ای از یك كاهش اندازه ی فایل را با استفاده از كاهش رنگ GIF نشان می دهد .

تصاویر GIF همچنین از مفهوم شفافیت ( Transparency ) نیز پشتیبانی می كنند . یك بیت شفاف كه در آن یك رنگ می تواند شفاف باشد مجاز شمرده می شود . شفافیت اجازه می دهد پس زمینه ایی كه یك تصویر روی آن جایگزین می شود تا نمایش دادن ، مجموعه ی متنوعی از جلوه های پیچیده را ممكن بسازد . برای آن كه با نمونه هایی از شفافیت آشنا شوید ، به اینجا مراجعه كنید .

مشكل اساسی شفافیت یك بیتی هموار سازی لبه های كنگره دار است . برای این كار از رنگ های متغیر استفاده می شود تا بتوان لبه های دندانه دار و ناصاف یك تصویر را محو و صاف كرد . به خاطر داشته باشید كه هر چیزی كه بر روی صفحه ی نمایش نشان داده می شود از پیكسل تشكیل شده است .

این پیكسل ها مربع شكل هستند . به وجود آوردن تصویری كه لبه های آن گرد شده باشد ممكن است مشكلاتی به وجود آورد . هموار كردن ناصافی ها به ما این اجازه را می دهد كه تصویر مبهمی از لبه های صاف و گرد شده به وسیله ی پركردن پیكسل های لبه و یا به عبارتی آمیختن تصویر با پس زمینه به وجود آوریم .

تصاویر GIF از یك ویژگی دیگری به نام بافتی ( interlacing ) پشتیبانی می كنند . این ویژگی به كاربران این امكان را می دهد كه بفهمند تصویر قبل از اینكه به طور كامل بارگذاری بشود چگونه است . بنابراین باعث می شود كه كاربر در طول بارگذاری تصویر دلسرد و نا امید نشود . در جایی كه سرعت بارگذار یاغلب یك مشكل محسوب می شود ( ایران ما ) پیش نمایش بافتی در وب بسیار مفید است .

با وجود اینكه نمایش بافتی یك تصویر GIF عموما ایده خوبی است ، اما اغلب با عیبی نیز همرا هاست . تصاویر مشبك شده ممكن است از تصاویر دیگر بزرگتر شوند . بنابراین از عمل interlacing برای تصاویری كه دارای متن هستند نباید استفاده كرد ، زیرا متن تا موقعی كه كامل بارگذاری نشده باشد قابل خواندن نخواهد بود . برای مشاهده عمل interlacing به اینجا مراجعه كنید .

در آخر ، قالب GIF از انیمیشن نیز پشتیبانی می كند . این امر از طریق دسته كردن و انباشتن GIF ها روی هم انجام می شود . گسترش انیمیشن همچنین زمانبندی و قابلیت تكرار را به تصاویر اضافه می كند . استفاده از GIF های متحرك یكی از مشهورترین راه هایی است كه به وسیله ی آن نقاشی متحرك ساده ایی را به صفحات وب اضافه می كنند ، زیرا تقریبا هر مرورگری از آن ها پشتیبانی می كند .

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

از آن جا كه نقاشی متحرك در اصل به صورت تصویر بعد از تصویر است ، بنابراین اندازه ی فایل ، جمع كل تصاویر درون نقاشی متحرك است . این امر می تواند باعث به وجود آمدن تصویر بزرگتری نسبت به آن تصویری كه استفاده كننده انتظارش را دارد بشود . یك نگرش برای متراكم كردن فایل این است كه تصویر را از طریق جایگزین كردن بخش متحرك هر قاب بهینه كنیم . این عمل اغلب بهینه سازی تعویض چهارگوش نامیده می شود .

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

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

اما باید دانست كه زبان های نشانه گذاری مانند HTML در ارائه خیلی خوب نیستند . این تقصیر فناوری نیست . بلكه به این خاطر است كه HTML برای این عمل طراحی نشده است . در واقع ، ظاهر صفحه باید توسط طراحی عناصر موجود در CSS كنترل شود .در برخی مواقع ، بخصوص وقتی كه از یك زبان XML استفاده می كنید ، ممكن است برای ایجاد شكل مناسب ارائه تبدیل نشانه گذاری نیز مورد نیاز باشد ، بنابراین XSL ( زبان شیوه ای قابل استفاده ) نیز استفاده خواهد شد .

CSS ( شیوه نامه ی آبشاری ) یا همان Cascading Style Sheet برای مشخص كردن ظاهر صفحه وب به كار می رود . این فناوری حداقل تا حدودی در مرورگرهای قدیمی نظیر اینترنت اكسپلرر 3 ارائه شده است ، ولی به دلیل كمبود پشتیبانی با ثبات از مرورگر و ابزار ، در كنار بی اطلاعی تولید كننده ، مدت زمان زیادی است كه طرح مبتنی بر HTML استفاده می شود . با ارائه نسل 6.X از مرورگرها ، در نهایت CSS یك روش امكان پذیر برای طرح صفحه می شود .

شیوه نامه های مبتنی بر CSS قوانینی را مشخص می كنند كه ارائه نوعی از یك تایپ یك گروه ، یا صحیح تر ، طبقه ای از برچسب ها – یا یك برچسپ تكی كه توسط صفت id خودش نشان داده می شود را تعریف می كند . قوانین شیوه نامه می تواند برای تعریف انواع جنبه های بصری اشیا صفحه ، شامل رنگ ، اندازه و محل ، به كار رود . قوانین حالت گوناگون می تواند بسته به استفاده از برچسب ها با هم تركیب شوند . دلیل اصلاح آبشاری برای این فناوری از همین خاصیت ناشی می شود . مثالی از CSS را در شكل زیر مشاهده می كنید :

XSL یكی دیگر از فناوری های شیوه نامه است كه در وب به كار می رود . عمدتا برای حالت دادن به زبان های XML به كار می رود . این كار معمولا از طریق تبدیل ( XSL Transformation ) XSL ( XSLT ) انجام می شود ، كه غالبا برای تبدیل XML به زبان نشانه گذاری دیگر ( اكثرا XHTML یا HTML به علاوه ی CSS می باشد ) به كار می رود

همچنین احتمال دارد از اشیا قالب بندی XSL برای حالت دادن به محتوا استفاده شود ، ولی ، ظاهرا به نظر نمی رسد كه این كار جنبه ی كاربردی رایج XSL باشد . بنابراین ، وقتی تولیدكنندگان از XSL حرف می زنند ، غالبا درباره XSLT صحبت می كنند .

به طور كلی ، تبدیل XSL در قسمت سرویس دهنده انجام می شود ، ولی ممكن است XSL در سمت سرویس گیرنده نیز همزمان با ادامه ی پیشرفت مرورگرها گسترده شود . چنانچه اطلاعات بیشتری در این مورد نیاز دارید به اینجا مراجعه كنید . منبع : كتاب جناب توماس پاول ترجمه ی آقای احمد شیدا

در ابتدای كار به بررسی فناوری های هسته وب می پردازیم كه می تواند شامل : مرورگرهای وب ، زبان های نشانه گذاری ( Markup Language ) ، فناوری های شیوه نامه ( Style Sheet ) و فناوری های برنامه نویسی باشد . حال به بررسی مرورگرهای وب كه نقش مهمی در طراحی دارد می پردازیم و سایر عوامل انشا الله در پست های آینده مطرح خواهند شد .

مرورگر وب تفسیر كننده ی سایت های ماست. دانستن مرورگر وبی كه پشتیبانی می شود و توانایی های آن از اهمیت بالایی برخوردار است . دو مرورگری كه در این زمان از بقیه رایج تر است عبارت اند از : مایكروسافت اینترنت اكسپلرر ( كه شامل اكثریت مرورگرهای كاربران می شود ) و نت اسكیپ كامیونیكیتور ( ناویگیتور ). با وجودی كه این دو مرورگر اكثر كاربرانی كه دسترسی به سایت های وب عمومی دارند را پوشش می دهند ، ولی انواع بیشماری از مرورگرها در حال استفاده هستند .

شكل های دقیق مرورگرها در وب سایت های عمومی به طور مستمر تغییر می كند و توسط چندین سایت به همراه سایت های مروط به مرورگر مانند این پیگیری و دنبال می شود . بنابراین بهتر است از شكل های منتشر شده از مرورگرها آگاه و مطلع باشید ! استفاده واقعی از مرورگر را در سایت خود دنبال كنید .

نكته بعدی كه باید در نظر داشته باشید این است كه از چه مرورگرهایی باید آگاهی داشته باشید . این كار مستلزم آن است كه مرورگرهای استفاده شده توسط افراد استفاده كننده از سایت را بشناسید ، پس فایل های ثبت وقایع خود را نگاه كنید . در كل سایت های عمومی باید تا حد امكان مرورگرها را در نظر بگیرند ، طراحان باید از خانواده ی مرورگرها كه در زیر آمده است آگاه باشند .

مرورگرهای مفید جهت آزمایش كردن :

Internet Explorer : سه نگارش آخر این مرورگر عمومی را داشته باشید . توجه كنید كه این كار ممكن است نیاز به داشتن چندین سیستم یا گزینه های بوت داشته باشد تا نگارش های متعدد اكسپلرر را اجرا كند .

NetScape : با چنین تعداد زیادی از نگارش های مرورگر ، از آخرین نگارش هر كدام از نمونه ها ی اصلی استفاده كنید: 2.x , 3.x , 4.x , 4.5 , 4.6 , 4.7 , 6 , 6.1 , 6.2

Mozilla : مرورگر پشت صحنه ی پروژه ی نت اسكیپ كه مرورگر نسل 6.x را می سازد همیشه باید به عنوان یك پیش نمایش از آنچه به زودی خواهد آمد و همچنین برای تست استانداردهای وب مورد ، تبعیت قرار گیرد .

Opera : این مرورگر سریع و مطابق استانداردهای خیلی عمومی می شود و ممكن است گزینه ی سوم محكمی برای بعضی كاربران باشد .

America Online : به تنهایی یك مرورگر وب نیست ، ولی استفاده از مرورگر وب تحت AOL و AOL TV غالبا بسیار مشكل زاست . تولید كنندگان باید به سایت های عمومی تحت AOL با دقت زیاد نگاه كنند .

Lynx : تست كردن Lynx كه یك مرورگر فقط متنی است ، مفید است تا بفهمید كه یك صفحه بدون گرافیك چگونه نمایش داده می شود .

Amaya : یك مرورگر واقعی برای كاربران نیست ، ولی مرورگر تست W3C است كه اغلب امكانات مربوط به استانداردهای مورد علاقه را قبل از مرورگرهای تجاری پیاده سازی می كند . برای تجربه ی مشخصات مفید است . از تست واقعی با آن اجتناب كنید .

با داشتن تعداد مرورگرهای موجود و تفاوت های آشكاری كه در تست كردن پیكربندی ها بسیار متفاوت در نظر گرفته شده است تا فقط مطمئن شویم كه یك سایت تحت محیط های با دیدگاه مشترك ، خوب دیده می شود ، بعضی ایجاد كنندگان تصمیم به نوشتن برای یك نگارش مرورگر خاص می گیرند یا نشان می دهند كه یك مرورگر بخصوص ترجیحا بهتر است .

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