یک طراح وب » css

بیایید کمی سربه‌سر دزدهای پوسته بگذاریم – یک کُد کوچولو!

علیها — Sun, 21 Feb 2010 16:14:55 +0000

ساعت‌ها وقت می‌گذاریم برای نوشتن دستورات ِ سی‌اس‌اس ِ پوسته‌مان. مسلماً دوست نداریم یک نفر بیاید در عرض چند ثانیه کدهای‌مان را کش برود. حالا ما می‌خواهیم یک کاری بکنیم که وقتی آقای دزد، پرونده‌ی سی‌اس‌اس را در مرورگرش باز کرد، به‌جای کدها، مثلاً یک شکلک عین بُز لبخند بزند برایش :)

برای این‌کار از پی‌اچ‌پی و اچ‌تی‌اکسس استفاده می‌کنیم.

فرض می‌کنیم یک صفحه‌ای داریم به‌نام index.php؛ کدهای اچ‌تی‌ام‌ال زیر را هم در آن داریم:






سلام جهان!

حالا کد پی‌اچ‌پی زیر را به بالای index.php اضافه می‌کنیم، یعنی قبل از شروع شدن باید قرار بگیرد:

با این‌کار برای کاربر در هنگام ورود یک سشن با نام csskey که برابر با user است، ست کردیم.

سپس یک فایل با نام style.php می سازیم و تکه‌کد پی‌اچ‌پی زیر را در ابتدای آن قرار می‌دهیم و بعد از آن، دستورات سی‌اس‌اس‌مان را اضافه می‌کنیم:



body {background-color: #000; color: #fff; direction: rtl;}

فکر کنم متوجه شده باشید که چه اتفاقی قرار است بی‌اُفتد. Content-type را از نوع text/css می‌گذاریم تا مرورگر آن را به‌عنوان یک فایل سی‌اس‌اس تفسیر کند.
سپس می‌گوییم اگر csskey برابر با user نبود، دستورات سی‌اس‌اس را بارگذاری نکن و در خروجی «:-)» را چاپ کن.
اما اگر csskey برابر با user بود، آن‌وقت دوباره csskey را برابر با somethingelse می‌کنیم و در خروجی دستورات سی‌اس‌اس را برمی‌گردانیم.

و در آخر فقط کافی است دو خط زیر را به فایل .htaccess اضافه کنیم:

RewriteEngine on
RewriteRule style.css style.php

درواقع ما عملاً هیچ فایلی به‌نام style.css نداریم و با کمک اچ‌تی‌اکسس style.php را تبدیل به style.css می‌کنیم.

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

این روش را ایشان ارائه کرده‌اند.

44 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس

علیها — Thu, 07 Jan 2010 11:27:25 +0000

با یک‌خط کد ِ سی‌اس‌اس می‌خواهیم یک افکت ِ جالب برای تصاویری که در صفحات وب قرار می دهیم درست کنیم. مراحل ِ کار بسیار ساده هست.

ابتدا در پرونده‌ی اچ‌تی‌ام‌ال‌مان یک همچین‌چیزی می‌نویسیم:

سپس فتوشاپ‌مان را آتیش می‌کنیم و یک سند جدید با طول و عرض مثلا 3 پیکسل ایجاد می‌کنیم و دقیقا در وسط ِ آن یک نقطه‌ی ریز با طول و عرض 1 پیکسل و رنگ ِ مشکی قرار می‌دهیم. به‌تر هست که شفافیت نقطه را تا حدودی کم کنیم. مثلا روی 60 درصد بگذاریم! البته این نقطه را من قبلا درست کرده‌ام و در فایلی که دریافت می‌کنید، موجود است، و می‌توانید از همان استفاده کنید.
خب، حالا این نقطه‌ای که طراحی کرده‌ایم را با پسوند ِ پی‌ان‌جی (png) ذخیره می‌کنیم. یادتان هم باشد که این نقطه نباید زمینه داشته باشد، یعنی Transparent باشد.

حالا نوبت به دستورات ِ سی‌اس‌اس می‌رسد:

#dot-effect {background: transparent url(dot.png) repeat; position: absolute; width: 500px; height: 374px;}

نقطه‌ای که درست کرده بودیم را در زمینه‌ی dot-effect قرار می‌دهیم. پوزیشنش را هم ابسُلوت می‌کنیم تا مستقل از عناصر ِ دیگر ِ صفحه شود و بی‌آید روی تصویر. طول و عرضش را هم برابر با طول و عرض ِ تصویرمان می‌کنیم.

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

نمونه‌ی این افکت را این‌جا ببینید و آن را از زیر دریافت کنید:

13 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا

علیها — Sat, 05 Dec 2009 13:55:57 +0000

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

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

خب، برگردیم سر ِ بحث ِ اصلی‌مان. برای اُپرا در حالت عادی، دستور اختصاصی وجود ندارد و باید از راه‌هایی که اصولا توصیه نمی‌شود، استفاده کرد. اما هک ِ زیر به ما در این مورد کمک بزرگی می‌کند و می‌‌توانیم خیلی راحت در بین دستورات سی‌اس‌اس، دستورات اختصاصی برای اُپرا بنویسیم:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

your css codes here..

}

یک مثال هم می‌زنم که کاملا متوجه‌ی ماجرا بشوید. به فرض، می‌خواهیم یک متن که در تگ P قرار دارد را در اُپرا با رنگ سبز نشان دهیم و در مرورگرهای دیگر با رنگ مشکی دیده شود. به این صورت عمل می‌کنیم:

p {
color: #000;
}

کد بالا، متن‌مان را مشکی می‌کند و کاری با نوع مرورگر ندارد.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

p {
color: #45c705;
}

}

واضح هست؟ با کد بالا گفتیم که متن موردنظر در اُپرا سبز باشد. همین :)

4 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری

علیها — Thu, 04 Jun 2009 13:38:37 +0000

همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.

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

1- ایجاد پنجره شناور متنی – نمایش نمونه

برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:

ابتدا این اسکریپت را دریافت کنید.

سپس در پرونده HTML ِ خود، در بین تگ head، کدهای زیر را قرار دهید:

با این کار، کتابخانه جی کوئری و اسکریپتی که دریافت کردید را به صفحه HTML معرفی کردیم.

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

#tooltip{
position:absolute;
border:1px solid #eee;
background:#f9f9f9;
padding:2px 5px;
color:#999;
display:none;
font: 11px Tahoma;
}

حالا کافی است یک لینک مانند زیر داشته باشیم:

یک طراح وب

هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.

2- ایجاد پنجره شناور تصویری – نمایش نمونه

اسکریپت آن را از اینجا دریافت کنید.

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

حالا دستورات سی اس اس زیر را باید اضافه کنیم:

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

سپس در پرونده HTML، کدهای زیر را قرار می دهیم:

همانطور که می بینید، یک لیست از چند تصویر ایجاد کردیم و به لینک شان، کلاس ِ preview دادیم.

پنجره شناور تصویری مان ایجاد شد :) می توانید به لینک های تصاویر، title هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.

فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(250 کیلوبایت):

25 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟

علیها — Fri, 10 Apr 2009 07:56:43 +0000

باید در بعضی استایل ها و پرونده های سی اس اس دیده باشید که در آخر بعضی دستورات از عبارت important! استفاده می کنند. مثلا:

float: right !important;

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

برای درک این قضیه، به این مثال توجه کنید:
فرض کنید ما یک تگ p داریم که دایرکشن اش چپ به راست است:

P {
direction: ltr;
}

حالا در استایلی جدا می خواهیم آن را راست به چپ کنیم:

P {
direction: rtl;
}

حالا ما برای این تگ p دو مقدار lrt و rtl داریم. مرورگر گیج می شود که :) مقدار موردنظر ما همان rtl است پس در آخر آن، یک important! می گذاریم تا مرورگر بی چون و چرا بلافاصله rtl را روی تگ p اجرا کند:

P {
direction: rtl !important;
}

همین دیگر :)

25 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

روش های خلاصه نویسی در سی اس اس

علیها — Tue, 24 Mar 2009 14:32:30 +0000

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

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

در ادامه ی این پست، فرض ِ من بر این است که شما می دانید سی اس اس دقیقا چیست و کمی آن را بلد هستید :)

برای شروع، یکی از دستورات ساده را انتخاب می کنم:

/*sample 1*/
body {
background: #ccc url(/images/bg.jpg) right fixed no-repeat;
}

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

/*sample 2*/
body {
background-color: #ccc;
background-image: url(/images/bg.jpg);
background-position: right;
background-attachment: fixed;
background-repeat: no-repeat;
}

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

/*sample 3*/
#content {
margin: 20px 10px 15px 10px;
padding: 10px 5px 10px 5px;
}

این، شکل خلاصه شده ی این دستورات است. درواقع به ترتیب، چهار جهت ِ top، right، bottom و left را در یک خط، مقدار دادیم. برای اینکه ترتیب جهت ها را درک کنید، به مثال زیر توجه کنید:

/*sample 4*/
margin: top / right / botoom / left;

دو روش دیگر برای خلاصه کردن مقدار های padding و margin وجود دارد که اولی به صورت زیر است:

/*sample 5*/
margin: 20px 10px;

این یعنی دو جهت ِ top و botoom دارای مقدار 20px هستند و دو جهت ِ right و left دارای مقدار 10px. متوجه شدید دیگر؟

آخرین روش خلاصه نویسی برای خاصیت های padding و margin به این شکل می باشد:

/*sample 6*/
margin: 20px;

به این معنی که هر چهار جهت ِ top، right، bottom و left دارای مقدار 20px می باشند.
تمامی موارد گفته شده ی بالا در مورد خاصیت padding نیز صدق می کند.

خب، قضیه ی padding و margin دیگر تمام شد. حالا یک روش نسبتا متفاوت را با هم امتحان می کنیم :)

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

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

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

/*sample 7*/
p, h3 {
background: #ccc;
color: #333;
font: 12px Tahoma;
margin: 10px;
padding: 5px;
}

در اینجا ما با گذاشتن یک (,) بین دو عنصر، این منظور را رساندیم که دستورات نوشته شده هم برای تگ p درنظر گرفته شود، هم برای تگ h3. این را هم بگویم که از این روش می توانید برای بی نهایت عنصر استفاده کنید و محدودیتی از این بابت نیست.

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

اولی در رابطه با خلاصه کردن کد رنگ است که از 6 کاراکتر به 3 کاراکتر تبدیل می شود.

/*sample 8*/
background-color: #cccccc;

در این مثال ما یک رنگ خاکستری ِ روشن تولید کردیم. همانطور که می بینید از 6 کاراکتر c استفاده کردم. حالا اگر به جای 6 کاراکتر c فقط از 3 کاراکتر استفاده کنم، باز همان رنگ خاکستری روشن تولید می شود.

/*sample 9*/
background-color: #ccc;

برای مورد آخر هم به خلاصه نویسی خاصیت فونت می پردازم. مثال زیر، خود گویای همه چیز است:

/*sample 10*/
#content {
font: bold 12px Tahoma;
}

ترتیب ِ قراردادن ِ مقدارها را باید رعایت کنید حتما:

/*sample 11*/
#content {
font: font-style and font-weight / font-size / font-family;
}

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

اگر سوالی بود، در خدمت هستم :)

12 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

استایل فارسی جدید برای فرندفید و چگونگی استفاده از آن

علیها — Sat, 14 Feb 2009 09:18:01 +0000

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

راه حل؟
خب همیشه برای هر مشکلی راه حلی هم پیش رو هست. می خواهیم با استفاده از استایلی که آماده کرده ام و انجام دادن چند مرحله ی بسیار ساده ی زیر، بیشترین لذت را از محیط فرندفید ببریم :)

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

چگونه از این استایل فارسی استفاده کنیم؟
مسلما اولین پیش نیاز شما داشتن مرورگر فایرفاکس است :)
مراحل بسیار ساده و آسان است. ابتدا افزونه ی Stylish را در فایرفاکس ِ خود نصب کنید. بعد از نصب، فایرفاکس را ری استارت کنید. سپس به این صفحه بروید و مانند تصویر زیر، در قسمت Install Options روی Load into Stylish کلیک کنید. در پنجره ی باز شده روی Save کلیک کنید.
حالا وارد فرندفید ِ خود شوید و لحظات خوشی در کنار دوستان تان داشته باشید :)

نکته: اگر از استایل های دیگری برای فرندفید استفاده می کنید، یادتان باشد که غیر فعال اش کنید تا این استایل به درستی کار کند!

پس نوشتت 1: استایل به روز شد و اشکالاتی که داشت همگی برطرف شدند و کدهای آن نیز بهینه تر شد! (+)

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

من در فرندفید

45 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

علیها — Wed, 08 Oct 2008 21:09:19 +0000

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

1. فلش
2. جاوا اسکریپت
3. سی اس اس

ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد.

1. فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “123 flash menu” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند و این مورد تا حدودی مشکلات سئو را برطرف میکند.

2. جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید!

3. سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی 6 به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد!

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

خب، چیزهایی که لازم داریم، اینها هستند: یک فایل سی اس اس، یک فایل اکس اچ تی ام ال و یک ویرایشگر متن، مثلا نوت پد ویندوز.
برای ساختن فایل سی اس اس، می توانید یک فایل متنی ایجاد کنید و پسوند آن را به css تغییر دهید و ترجیحا نام فایل را style بگذارید. یعنی در نهایت بشود:

style.css

ساختید فایل رو؟! خب، حالا بریم سراغ کدنویسی…
فایل سی اس اسی رو که ساختید، با کمک یک برنامه ی ویرایشگر متن، باز کنید.
ما باید با کمک لیست ها این منو را طراحی کنیم. فقط کافیست کمی با تگ های ul و li، بازی کنیم. پس در ابتدا یک سلکتور با نام nav می نویسیم و پدینگ و مارجین ِش رو صفر میکنیم و به list-styleش هم مقدار none می دیم:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

حالا یک اینتر بزنید و برید خط بعدی… اینبار باید به تگ li ای که در nav قرار می گیرد، دستورات زیر را بدهیم:

#nav li {
float: right;
position: relative;
width: 90px;
height: 20px;
background-color: #f6f6f6;
color: #f75801;
font: bold 70% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
direction: rtl;
border: 1px solid #e1e1e1;
text-align: center;
padding-top: 5px;
}

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

#nav li:hover {
background-color: #f1ff96;
}

باز هم اینتر بزنید. دستورات زیر هم وضعیت ظاهری لینک ها را تعیین می کنند:

#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
color: #868584;
}
#nav a:hover, #nav a:active {
display: block;
text-decoration: none;
color: #f75801;
}

اینتر لطفا! قسمت مهم اینجاست. باید محتوای منو (یعنی همان زیرمنو) را مخفی نگه داریم تا زمانی که کرسر موس رفت روی عناوین منو:

#nav ul {
display: none;
position: absolute;
padding-top: 7px;
}

خاصیت display که با none مقداردهی شده، درواقع دستور میدهد که قسمت زیر منو، مخفی و غیر قابل نمایش بماند!
اینتر بزنید باز هم! خب، حالا باید کمی ظاهر زیرمنو را سبک دهی کنیم. به زمینه و حاشیه اش رنگی بدهیم و موقعیتش را جمع و جور کنیم:

#nav ul li {
float: none;
border: 1px solid #dded6f;
background-color: #f1ff96;
font-size: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
}

اینتر فراموش نشه! باز هم با دستور زیر، رنگ زمینه ی گزینه های زیر منو ها را در زمان حرکت کرسر موس روی آن ها، تعیین می کنیم:

#nav ul li:hover {
background-color: #f9ffcf;
}

آخرین اینتر را بزنید که می خواهیم یک کار قشنگ بکنیم:) یادتان که هست چند خط بالاتر، دستور مخفی کردن زیرمنوها را دادیم؟! حالا باید دستور بدهیم که هر زمان کرسر موس روی یکی از عناوین منو رفت، بی چون و چرا زیرمنوی آن نمایش یابد! فقط کافیست بگوییم:

#nav li:hover ul {
display: block;
}

زیبا نیست؟! خب، فایل سی اس اس تان تکمیل شد. حالا برویم سراغ فایل اکس اچ تی ام ال! خسته که نشدید خدای ناکرده؟!
فایل اکس اچ تی ام ال را بسازید. برای ساختن آن مانند ساختن فایل سی اس اس عمل کنید و نام فایل را بگذارید menu. یعنی باید بشود:

menu.htm یا menu.html

خب. اول کدهای مربوط به هدر را می نویسیم:




creating menus with CSS | Demo!

حالا تگ بدنه رو باز می کنیم و لیست مورد نظر رو ایجاد می کنیم و سلکتور nav رو بهش نسبت می دهیم و بعد از اون، عناوین و زیرمنوها رو اضافه می کنیم:

واضح هست دیگه؟! در اینجا ما یک منو، دو عنوان به نام های “رنگ” و “آموزش ها” و برای هر عنوان، سه زیرمنو داریم. در آخر هم تگ html را ببندید!

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

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

30 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » سه

علیها — Thu, 25 Sep 2008 16:43:45 +0000

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

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

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

2. دقت در بررسی: باید با دقت هرچه تمام به مشکلی که پیش آمده نگاه کنید. ببینید که کدام قسمت از قالب دارای مشکل هست و کدهای مربوط به همان قسمت را بررسی نمایید تا مشکل را پیدا کنید!

3. تایید پرونده ی سی اس اس: روش دوم کمی وقت گیر و غیر اصولیست. روش راحت تر و سریع تر و معمول تر آن است که به سایت w3c بروید و پرونده ی سی اس اس خود را به تاییدکننده ی سی اس اس بدهید تا مشکلات را پیدا و به شما نشان دهد!

4. تایید پرونده ی اکس اچ تی ام ال: ممکن است مشکل پیش آمده به دستورات سی اس اس ارتباطی نداشته باشد و اشکال در کدهای اکس اچ تی ام ال باشد. بنابر این بد نیست که پرونده ی اکس اچ تی ام ال خود را نیز در تایید کننده ی اکس اچ تی ام ال سایت w3c مورد بررسی قرار دهید.

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

1. جداسازی: آن قسمت از کدهایی که مشکل ایجاد کرده اند را از مابقی کدها جدا کنید! تک تک خاصیت های به کار رفته را بررسی کنید. مقدارهای مختلف را امتحان کنید. تا شاید بالاخره راه حل را پیدا کردید! اما این پایان کار نیست! راه های زیادی هنوز هستند که شما را به جواب نزدیک تر میکنند… (توصیه میکنم که تا پایان کار این مورد یعنی جداسازی کدهای مشکل ساز از دیگر کدها را رعایت کنید تا کارتان راحت تر شود).

2. جستجو: سایت های زیادی هستند که ترفتدها و راه حل هایی برای رفع مشکلات مختلف ارائه میکنند. می توانید در این سایت ها به دنبال راه حلی برای مشکلات خود باشید. در زیر تعدادی از این سایت ها را می توانید ببینید:

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

7 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » دو

علیها — Wed, 17 Sep 2008 21:42:40 +0000

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

همونطور که میدونید مونیتورهای نسل جدید، اکثرا عریض (wide) شده اند و رزولوشن در آنها افزایش یافته. این مورد بسیار مهم و قابل اهمیت است! چرا که اگر شما در مقدار دهی به حاشیه بلوک های اصلی قالب، از واحد مناسبی استفاده نکنید، قطعا دچار مشکل می شوید!
واضح تر میگویم. به عنوان مثال مونیتور شما دارای رزولوشن 1024×768 هست! قالب خود را طراحی میکنید. بعد همین قالب را در رزولوشن 1200×800 نگاه میکنید! بر خلاف انتظارتان محتوای قالب به سمت چپ یا سمت راست صفحه نزدیک شده است! در صورتی که در حالت عادی باید وسط صفحه قرار داشته باشد! اما نگران نباشید! خیلی راحت میشود مشکل را برطرف کرد. درواقع شما واحد مناسبی را برای مقداردهی به حاشیه ها (margin) انتخاب نکرده اید! مثلا از واحد px یا em استفاده کرده اید!
حالا چکار باید بکنیم؟!
باید از واحد درصد – % – استفاده کنید! مثلا بجای اینکه بگویید:

Margin-left: 370px;

بگویید:

Margin-left: 30%;

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

در تصویر زیر، طراح با استفاده از واحد پیکسل، به بلوک ها فاصله داده. در رزولوشن 1024×768، هیچ مشکلی دیده نمیشه و همه چیز سر جاش هست:

اما همین طرح در رزولوشن 1200×800، به سمت راست نزدیک شده:

طراح به اشتباه خودش پی برد و واحد درصد – % – رو جایگزین واحد پیکسل – px – کرد:

با تغییر رزولوشن، هیچ جابجایی ای در قالب ایجاد نشد و همه چیز همونطور هست که باید باشه:

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

ضمنا یک موردی رو هم بگم. استفاده از واحد em برای مقداردهی به حاشیه ها و غیره، اصلا توصیه نمیشه. کاربرد این واحد بیشتر برای تعیین اندازه ی فونت است!

خب، برای این قسمت، تا همینجا کافیه. اگر جالب نبود، بگذارید به حساب بی تجربگی بنده ;)

10 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.