همه چیز درباره CSS

[شايان]

با توجه به همه گیر شدن طرح های مبتنی بر CSS در ابعاد وسیع، امروزه هر طراح باید بکوشد تا شگردها و ترفندهای این مقوله، یا به عبارتی راه کارهای بهینه سازی استفاده از CSS را فراگیرد و تنها به استفاده از آن در طرح هایش بسنده نکند. در مباحث قبلی نکاتی به اجمال بیان شد. در این پست قصد داریم نکاتی در باب مختصر نویسی کدهای CSS را، با هم مرور کنیم.
اغلب افراد برخی از این مختصر نویسی ها را می دانند اما عده کثیری از آن ناآگاهند. با این راهکار، چندین مشخصه در یک خط خلاصه می شود. بنابراین نه تنها مختصر نویسی صفت ها و عناصر CSS، موجب کاهش حجم فایل و بارگذاری زودتر آن می شود، بلکه تا حد قابل ملاحظه ایی از شلوغی و نامرتبی فایل می کاهد (درمورد نکته دوم در پست های آینده مفصل بحث خواهد شد) چندین ویژگی برای مختصر نویسی موجود است. برای جزئیات بیشتر پیشنهاد می کنم مشخصات W3C CSS را مطالعه کنید (این بدبخت بیچاره W3C چرا فیلتر شده؟ البته بدبخت ماییم که نمی توانیم از امکانات آن استفاده کنیم)
در اولین مبحث به رنگ ها می پردازیم. بهترین روش عمومی برای کاربرد رنگ در CSS استفاده از آن در مبنای شانزده (هگزادسیمال) بین 00 تا FF است، که قبل از آن نیز علامت پوند (#) می آید. هر رنگ 6 رقم طول دارد، دو رقم برای هر بایت.
دو رقم اول برای درجه رنگ قرمز، دو رقم دوم درجه رنگ سبز و و دو رقم آخر شدت رنگ آبی را نشان می دهد. نکته ای که بیشتر افراد نمی دانند این است که هر رنگ مبنای 16 از سه جفت تشکیل شده است، شما می توانید یک رقم از هر جفت رنگ امن را حذف کنید. برای مثال مقدار 336699 با 369 برابر خواهد شد.
همان گونه که می دانید تنظیم یک رنگ امن به سادگی با انتخاب ترکیبی از مقدارهای امن مبنای 16 انجام می شود. در این حالت FF9966 یک رنگ امن مبنای 16 است اما DB9370 این چنین نیست، خوشبختانه اکثر ابزارهای طراحی وب نظیر dreamweaver ماکرومدیا دارای سلکتور رنگ های امن هستند.
هر چند تنظیم یک رنگ نا امن به نزدیکترین رنگ امن نسبتا ساده است، فقط هر یک از مقادیر قرمز، سبز یا آبی را به نزدیکترین مقدار امن بالا یا پایین گرد کنید. برای مثال رنگ نا امن 85A0C9 را می توان به رنگ امن 8899CC تبدیل و معادل آن یعنی 89C را جایگزین کرد. در این مثال 85 به بالا گرد شده یعنی 88 و A0 به پایین یعنی 99 و در آخر C9 را به بالا یعنی CC گرد کرده ایم.
مبحث رنگ های امن، موضوع بسیار جالبی است. اگر از این مفاهیم چیزی نمی گیرید، نگران نباشید، سعی می شود در آینده مفصل تر بیان شود. در مورد بعدی به سراغ مختصر نویسی مشخصه های ابعاد یه باکس می رویم. برای برخی از صفت های یک باکس می توان حداقل یک و حداکثر 4 مقدار در نظر گرفت. برای درک بیشتر نمود زیر را ببینید که در آن برای صفت اول یک مقدار، برای صفت دوم دو مقدار و همین طور تا صفت چهارم، که برایش 4 مقدار در نظر گرفته شده است:

property:value1; 
property:value1 value2; 
property:value1 value2 value3; 
property:value1 value2 value3 value4;

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

padding-top:1em; 
padding-right:0; 
padding-bottom:2em; 
padding-left:0.5em;

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

padding:1em 0 2em 0.5em;

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

border-width:1px; 
border-style:solid; 
border-color:#000;

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

border:1px solid #000;

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

border-top-width:1px; 
border-right-width:0; 
border-bottom-width:1px; 
border-left-width:0;

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

 [COLOR=#000000]border-width:1px 0 1px 0;  [/COLOR]

البته خصوصیات دیگری جدای از عرض، سبک و رنگ برای صفت border تعیین شده که دارای پیشوند –moz- است اما بخشی از مشخصات رسمی CSS نمی باشند، ولی توسط سبک های مرورگرهای نت اسکیپ و موزیلا پذیرفته شده اند و ممکن است در نهایت قسمتی از 3 CSS شوند.
یکی دیگر از مواردی که می توانید مختصر نویسی را در آن بکار برید، پس زمینه یا به عبارتی همان background است. بجای آنکه از صفات تکی background-color برای رنگ پس زمینه، background-image برای تصویر پس زمینه، background-repeat برای تعیین اینکه آیا پس زمینه تکرار شود یا خیر و چگونه تکرار شود، background-attachment برای تعیین اینکه آیا تصویر پس زمینه در طول سند حرکت کند یا در مکانی ثابت باشد و background-position برای اینکه وقتی تصویر پس زمینه ای تعیین شده باشد، این صفت محل اولیه را نسبت به کادری که محتویات مولفه را در برگرفته است مشخص می کند، استفاده کنیم، می توانیم تمام این صفات را به طور مختصر در صفت background بگنجانیم. برای مثال مورد زیر را در نظر بگیرید

background-color:#f00; 
background-image:url(bg.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0;

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

background:#f00 url(bg.gif) no-repeat fixed 0 0;

این صفات تنها جزئی از اختصارات بود. موارد دیگری برای صفت هایی همچون font، list و outline موجود است که در حوصله این مقاله نمی گنجد. انشا الله در پست های آتی در موردشان بحث خواهد شد. این مقاله اقتباسی است از یادداشت های جناب Roger Johansson در اینجا بعلاوه افزودنی ها و کاستنی های فراوان.

http://weblog.alvanweb.com/2005/08/17/css-shorthand/

 

[شايان]

افزایش سرعت بارگزاری صفحات یکی از مسائل مهم در طراحی صفحات وب می‌باشد. در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد، معمولا" کاربران از مشاهده آن صفحه صرف نظر می‌کنند و دیگر به آن باز نمی‌گردند این به معنی از دست دادن کاربران سایت می‌باشد که برای مدیران یک سایت اصلا" خوشایند نیست. در ادامه ده روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان می‌شود.
1. استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table
CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری می‌شوند:
مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور می‌کنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن.
جداول (Tables) در یک مرحله بر روی صفحه به نمایش در می‌آیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمی‌شوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.
عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا" با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت می‌پذیرد.
بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.
تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) می‌شود. اما قالب‌های ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار می‌شوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.
با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی می‌توان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا" کاربران سایت شما را خوشحال خواهد کرد.
برای آشنایی بیشتر با CSS و کارهای جالبی که می توان با آن در یک سایت انجام داد می توانید از آموزشهای خوب و مفید سایت HTML Dog استفاده کنید.
2. از تصاویر برای نمایش متن استفاده نکنید
در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید:

a:link, a:visited, a:active {
width: 7em;
font: bold 0.8em Georgia;
text-decoration: none;
display: block;
margin-left: 0;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-left: 1px solid #6cf;
border-bottom: 1px solid #068;
border-right: 1px solid #068;
padding: 0.25em 0.5em 0.4em 0.75em;
border-top: 1px solid #6cf;
}
a:hover {
background: #28b;
padding: 0.35em 0.35em 0.25em 0.9em;
border-top: #069;
border-right: #6cf;
border-bottom: #6cf;
border-left: #069;
}

با استفاده از این کد می‌توانید یک کلید جذاب ایجاد کنید که با رفتن موس بر روی آن پایین می‌رود. اگر به نحوه ایجاد این گونه کلیدها علاقمند هستید می‌توانید مقالات بخش CSS سایت A List Apart را مطالعه کنید.
3. فراخوانی تصاویر تزیینی بوسیله CSS
با CSS می‌توان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر 200x۲٠٠ را می‌توان بصورت زیر نمایش داد:

کد HTML <div class="pretty-image"></div> 
کد CSS 
.pretty-image {
background: url(filename.gif);
width: 200px;
height: 200px
}

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

<image src="spacer.gif" class="pretty-image" alt="description" />

در اینجا spacer.gif یک تصویر 1x1 پیکسل شفاف (transparent) است که 50 بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری می‌شود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری می‌شود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب می‌باشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمی‌باشند.
4. استفاده از انتخاب کننده‌های (selectors) مناسب
به کد نامناسب زیر توجه کنید:

<p class="text">This is a sentence</p>
<p class="text">This is another sentence</p>
<p class="text">This is yet another sentence</p>
<p class="text">This is one more sentence</p>
.text {
color: #03c;
font-size: 2em
}

به جای اختصاص دادن مقدار به هر پاراگراف، می‌توان همه را در یک تگ <div> قرار داده و مقدار را به آن اختصاص دهیم:

<div class="text">
<p>This is a sentence</p> 
<p>This is another sentence</p>
<p>This is yet another sentence</p>
<p>This is one more sentence</p> 
</div>
.text p {
color: #03c;
font-size: 2em
}

در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به راحتی 20% از حجم فایل شما کم خواهد شد. همچنین شاید توجه کرده باشید که مقادیر مربوط به رنگها کوتاه‌تر از حالت عادی است. 03c# کوتاه شده مقدار 0033cc# است شما می‌توانید از این روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار دارند استفاده کنید.
5. استفاده از خلاصه نویسی خصوصیات در CSS
در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده می‌کنید:

font: 1em/1.5em bold italic serif 
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif
Font 
border: 1px black solid 
border-width: 1px;
border-color: black;
border-style: solid
Border 
background: #fff url(image.gif) no-repeat top left 
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Background 
margin: 2px 1px 3px 4px (top, right, bottom, left) 
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px 
Margin 
margin: 5em 1em 3em (top, left and right, bottom) 
margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em 
Margin 
margin: 5% 1% (top and bottom, left and right) 
margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1% 
Margin

این قوانین بطور عملی برای border و padding نیز قابل استفاده است.
6. استفاده از فراخوانی نسبی
سعی کنید از آدرس دهی مطلق پرهیز کنید زیرا فضای بیشتری را اشغال می‌کند و تغییر دادن آنها در آینده مشکل است. یک مثال از فراخوانی مطلق بصورت زیر است: <a href="http://www.URL.com/filename.htm"> که بهتر است به این صورت باشد: <a href="filename.htm">. اما اگر فایل‌ها در فهرست‌های مختلف باشند از خلاصه نویسی‌های زیر استفاده کنید:

<a href="/filename.html">: فراخوانی [URL="http://www.url.com/filename.html"]http://www.URL.com/filename.html[/URL] 
<a href="/directory/filename.html">: فراخوانی [URL="http://www.url.com/directory/filename.html"]http://www.URL.com/directory/filename.html[/URL] 
<a href="./">: فراخوانی index.html در فهرست جاری 
<a href="../">: فراخوانی index.html از یک فهرست بالاتر 
<a href="../filename.html">: فراخوانی filename.html از یک فهرست بالاتر 
<a href="../../">: فراخوانی index.html از دو فهرست بالاتر

8. حذف تگ‌های غیر ضروری META و مقادیر درون آن
بسیاری از تگهای META غیر ضروری هستند و کار زیادی انجام نمی‌دهند. در صورت علاقه می‌توانید لیست تگهای META را در این آدرس مشاهده کنید. تگ‌های METAی با اهمیت برای موتورهای جستجو تگ‌های keywords و description هستند. البته استفاده نادرست و بیش از اندازه از آنها به تازگی باعث کاهش اهمیت آنها شده است. در هنگام استفاده از هرکدام از این تگ‌ها سعی کنید حجم محتوای آنها برای هر یک کمتر از 200 کاراکتر (حرف) باشد. هر مقداری بیش از این باعث افزایش حجم صفحه شما خواهد شد. متا تگ‌های طولانی برای موتورهای جستجو مناسب نیستند زیرا کلمات کلیدی شما را کم رنگ می‌کنند.
9. انتقال JavaScript و CSS درون صفحه به فایلهای مستقل
برای استفاده از CSS که در فایل خارجی قرار دارد از کد زیر استفاده کنید:

<link type="text/css" rel="stylesheet" href="filename.css" />

و برای استفاده از JavaScript که در فایل خارجی قرار دارد از کد زیر استفاده کنید:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

هر فایل خارجی یک بار فراخوانی شده و بعد از آن در کامپیوتر کاربر (برای استفاده‌های بعدی) ذخیره می‌شود. بجای قرار دادن JavaScript و CSS در تک تک صفحات HTML آنها را برای یک بار در یک فایل خارجی قرار دهید و از آن درون صفحات استفاده کنید. فراموش نکنید که هیچ محدودیتی برای استفاده از این فایل‌های خارجی وجود ندارد. برای مثال بجای ساختن یک فایل CSS بزرگ، یک فایل برای قسمتهای یکسان در تمام صفحات و چند فایل هم برای قسمت‌هایی که در صفحات خاص استفاده می‌شوند بسازید.
10. استفاده از / در انتهای آدرس فهرست‌ها:
بجای استفاده از این کد:

<a href="[URL="http://www.url.com/directoryname"]http://www.URL.com/directoryname[/URL]" >

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

<a href="[URL="http://www.url.com/directoryname/"]http://www.URL.com/directoryname/[/URL]" >

زیرا اگر از / در انتهای آدرس استفاده نکنید سرور متوجه نخواهد شد که اشاره به فایل شده یا فهرست. اما با اضافه کردن / سرور فورا" متوجه می‌شود که به یک فهرست اشاره شده و آنرا نمایش می‌دهد.

http://www.zabet.ir/learen/Css-003.asp

 

[شايان]

همونطور که می‌دونید يکی از بخش‌های مهمی که تقریبا در اکثر وب سايت‌ها وجود داره منوی Navigation اونه. حتما تا حالا در برخورد با سايت‌های مختلف با ايده‌های متفاوتی در طراحی اين بخش مواجه شديد. به نظر من پرطرفدارترين و در عين حال ساده‌ترين روش‌ برای ساختن Navigation، منو‌هایی شبیه به منوی پائینی معروف به Tab Menu هستن:

کاری که ديزاينرها از قديم‌ الايام(!) انجام می دادن اين بوده که برای هرکدوم از Tabهای اين منو دو تا عکس جداگانه که معرف حالت‌های «فعال» و «غيرفعال» صفحه‌ی مربوط به اون بوده رو طراحی می‌کردن و در صفحه‌های مناسب خودشون قرار می دادن. ولی خب این روش به نوع خودش روش بسیار طاقت فرسا و دیزاینرکُشی(!) محسوب میشه، از اونجايی که ممکنه ساختار منوی ما عوض بشه يا بخوايم يه آيتم جديد رو به اون اضافه يا از اون حذف کنيم…
کاری که الان می‌خوايم انجام بديم، طراحی همون منوی بالا به وسيله ابزار قدرتمند CSS و به صورتی هست که بعد از طراحی فقط با نوشتن يک تگ ساده می‌تونيم به راحتی منوی خودمون رو تغيير بديم… از جمله قابليت‌های فوق‌العاده‌ای که اين منو داره اينه که به راحتی می‌تونيم فونت نوشته‌ی Tabمون رو کوچيک و بزرگ کنيم بدون اينکه در ساختار و شکل اون تغييری بوجود بياد.
مؤلف اصلی اين مقاله اسم تکنيکی رو که ازش استفاده می‌کنه Sliding Doors (درهای کشویی) گذاشته. دليلش رو هم شکل زير مشخص می کنه.

ما می‌خوايم از عکسها به کمک CSS طوری استفاده کنيم که به اندازه‌ی طول نوشته‌ی Tabما، کشيده و یا جمع بشن. پس Label‌ها در روش ما یه Text ساده هستن، نه جزئی از عکس…
همونطوری که تو شکل زیر مشخصه، تمام چيزی که ما بهش نياز داريم دوتا عکس هست که يکی از اونا قسمت سمت چپ Tab ما رو شکل ميده و دومی سمت راست اون رو. اين قسمت دوم بسته به طول Label‌ بزرگ و کوچيک ميشه.

از اونجايی که قرار شد Label‌های ما صرفا Text باشن و Tabها نسبت به سايز اونا بزرگ و کوچيک شن، بايد عکس‌های Background (همون عکسهای چپ و راست که صحبتش شد) به قدری بزرگ انتخاب بشن که توی تغييرات اندازه‌ی فونت که ما اينجا نهايتا ۳۰۰٪ اون رو فرض می‌کنيم شکل منو رو بهم نريزن. به عنوان مثال عکس سمت راستمون رو 400x150 px و سمت چپی رو 9x150 px می‌گیریم.
به این نکته‌ی مهم دقت داشته باشيد که بر خلاف HTML، در CSS اگه برای يک ناحيه Background تعريف کنيم، اون عکس به اندازه‌ی Containerش درمياد. پس اگه Doorway ما یعنی حجمی که Label یک Tab اشغال می‌کنه، کوچکتر از عکسی باشه که ما براش درنظر گرفتیم، به صورت خودکار اینقدری کوچیک میشه که فقط در همون حجم جا بشه. توی شکل زیر می‌تونید این نکته رو ببینید:

و با بزرگتر شدن فونت به اين حالت در مياد:

پس کاری که ما می‌کنيم درست کردن يک Tab در بدترين حالت (‌بزرگترين فونت) هست. این کار رو با Photoshop مثل چيزی که در پائين هست انجام می‌ديم و دو قسمت موردنظر رو جدا می‌کنيم. برای حالت فعال Tab يعنی حالتی که صفحه‌ی مربوط به همون Tab باز شده کمی رنگش رو عوض می‌کنيم که با حالت معموليش تفاوت داشته باشه.

پس ما کلا به چهار تا عکس نياز داريم که اونها رو به اين صورت ذخيره می‌کنيم:
[right.gif] [left.gif] [right_on.gif] [left_on.gif]
بعد از همه‌ی این مقدمات تازه می‌خوايم يه Tag رو Customize کنيم که با اون بتونيم منوی خودمون رو شکل بديم. تگ Unsorted List يا <ul> انتخاب خوبيه! ولی چطوری اون رو به صورت افقی دربياريم؟!
راه حل مناسبی که به درد ما بخوره استفاده از قابلیت Float بودن در CSS هست. اونم طوری که چند آیتم Float در هم قرار می‌گیرن! اولش یخورده درکش سخته…!
به کد پائین یه نگاهی بندازین، تمام کد HTML ای هست که ما برای ساختن منو باید بنویسیم:

<div id="header">
<ul>
     <li><a href="#">Home</a></li>
     <li id="current"><a href="#">News</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
</ul>
</div>

کار رو با شکل دادن به header# شروع می کنيم. همونطور که در کد بالا کاملا مشخصه، منوی ما در همين header# قرار داره میگیره. اون رو float در نظر می‌گيريم و بهش عرض ۱۰۰٪ می‌ديم. يه رنگ زمينه‌ی زرد هم براش در نظر می‌گیریم برای اينکه ناحيه کارمون رو بتونيم ببينيم.

#header {
     float:left;
     width:100%;
     background:yellow;
     font-size:93%;
     line-height:normal;
}

برای همين ابتدای کار، حاشيه‌های Unsorted List و List Item رو صفر در نظر می‌گيريم و اون نقطه‌ای که قبل از هر کدوم از <li> ها مياد رو حذف می‌کنيم. به اين شکل:

#header ul {
     margin:0;
     padding:0;
     list-style:none;
}
#header li {
     float:left;
     margin:0;
     padding:0;
}

در مرحله‌ی بعدی اون عکس زمينه‌ی سمت راست (right.gif) رو به تگ list item اضافه می‌کنيم:

#header li {
     float:left;
     background:url("right.gif")
     no-repeat right top;
     margin:0;
     padding:0;
}

قبل از اينکه عکس زمينه‌ی سمت چپ رو اضافه کنيم اجازه بديد ببينيم تا حالا چیکار کردیم. Example 1.
خب، حالا نوبت اينه که عکس زمينه‌ی سمت چپ رو اضافه کنيم. اين کار رو توی تگ <a> که داخل تگ <li> هست انجام ميديم. (به Padding اعمال شده هم دقت کنيد)

#header a {
     display:block;
     background:url("left.gif")
     no-repeat left top;
     padding:5px 15px;
}

نتيجه کار رو ببينيد: Example 2.
ما Tab فعال هم داشتيم ديگه؟ اونها رو در کدمون با <li id=current> مشخص می‌کنيم و در Styling به اين صورت فقط عکس زمينه‌شون رو عوض می‌کنيم. هیچ تغيير ديگه‌ای نياز نيست.

#header #current {
     background-image:url("right_on.gif");
}
#header #current a {
     background-image:url("left_on.gif");
}

ما به يه خط نازک زير Menu برای جدا کردن اون از متن صفحه نياز داريم. اين کار رو نمی‌تونيم با استفاده از مشخصه Border و قرار دادن اون در header# انجام بديم. چون برای Tabهای فعال که نمی‌خوايم Border زیرشون داشته باشن به مشکل برمی‌خوريم (‌به اولین شکل همین مقاله دقت کنید). کاری که ما انجام ميديم استفاده از عکس زمينه پائين با حاشیه نازک مورد نظرمون برای header# هست. (‌به جای اون رنگ زرد که اول انتخاب کرده بودیم)

اينم کدش:

#header {
     float:left;
     width:100%;
     background:#DAE0D2 url("bg.gif")
     repeat-x bottom;
     font-size:93%;
     line-height:normal;
}
#header ul {
     margin:0;
     padding:10px 10px 0;
     list-style:none;
}

برای کامل کردن منو گفتيم که Tab فعال بايد روی اون حاشيه‌ی نازک رو بگيره. شايد بعضی‌ها اين به ذهنشون برسه که برای عکسهای زمینه‌ی Tabهای غیرفعال، يه حاشيه به رنگ حاشيه زمينه‌ی header# و برای Tabهای فعال حاشيه سفيد بذارن. خب اين راه حل خوبيه، ولی برای اونهايی که تک تک پيکسل‌ها براشون مهمه اشکال زير رو بوجود مياره. به عکسها دقت کنيد:

اين اشکال رو با کم کردن Padding پائین تگ <a> به اندازه‌ی یک پیکسل برطرف می‌کنیم:

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
background-image:url("norm_left_on.gif");
padding-bottom:5px;
}

تا اينجا نتيجه چی شد؟! Example3.
گوشه‌های عکسهای سمت چپ و راستمون Transparent نبودن و اين هم مشکليه! اين مشکل رو هم در مثال بعدی برطرف می‌کنيم و برای نرم بودن اين گوشه‌ها از يه رنگ Matt هماهنگ با زمينه‌ی اصلی صفحه‌مون استفاده می‌کنيم. Example 4 .
توی مثال بعدی ديگه خط زير لينک‌ها رو که بصورت پيش فرض بوده برمی‌داريم. برای لينک‌ها رنگ Hover تعيين و همزمان Boldشون می‌کنيم. Example 5.
در آخر هم یک نمونه‌ی کامل شده از اون. Final Example.
پ.ن.۱. همونطور که می‌بینید، با روشی که گفتم عملا حجم گرافیکی سایت به طور چشمگیری پائین میاد و طبیعتا زمان خیلی کمتری برای لود شدن صفحه لازمه. سعی کنید روی سورسش دقیق بشید و کاملا درکش کنید. چیز سختی نداره.
پ.ن.۲. CSS را دریابید!
پ.ن.۳. آخ دستم!
منبع: ALA


http://welbog.mohsentaleb.com/index.php?p=178

 

[شايان]

فیلتر Drop Shadow يا سايه انداختن زير يه عکس يکی از پرکاربردترین فيلترهايی هست که معمولا هر طراحی از اون در کارهاش استفاده می‌کنه. خیلی از برنامه‌های گرافیکی مثل Photoshop این فیلتر رو در خودشون دارن و اعمالش هم بسیار ساده‌ست.

(Layer > Layer Style > Blending Options > Drop Shadow)

تا اینجای مطلب چیز جديدی نبود! کاری که ما می‌خوايم انجام بديم پياده‌سازی اين فيلتر برای عکسهامون در صفحات وب هست طوری که قرار نباشه برای تک تک عکسها این فیلتر رو مثلا در همون Photoshop اعمال کنیم و تصویر آماده شده رو در صفحه قرار بدیم!
برای اين کار بازهم دست به دامن CSS ميشيم!
یه کلاس به اسم img-shadow با مشخصاتی که الان میگم تعریف می‌کنیم و تگ <img>مون رو بین <div> نسبت داده شده به این کلاسمون قرار می‌دیم. به این صورت:

<div class="img-shadow">
  <img src="baby.gif" />
</div>

برای درک اينکه اين کلاس دقیقا چه مشخصاتی داره تکنيک شکل گرفتن اون رو توضيح می‌دم:

در مرحله اول ما به یه عکس سايه خورده‌ی ساده نیاز داریم که می‌تونیم به راحتی توی Photoshop با انتخاب کردن یک ناحیه روی یک تصویر سفید و اعمال کردن فیلتر Drop Shadow اون رو بسازیم و با نام shadow.gif ذخيره‌ش کنيم.
نکته‌ی مهمی که اینجا بايد بهش توجه کرد اينه که اين تصوير ما به اندازه‌ی کافی بزرگ انتخاب شده باشه که برای بزرگترین عکس صفحه هم بتونه به عنوان Background ست بشه. (سایزی که ما به عنوان حد بالا انتخاب می‌کنیم 800x800 هست چون معمولا عکسهای استفاده شده در صفحه‌ی ما بزرگتر از این سایز نیستن)
برای عکسهایی با سایزهای کوچکتر مشکلی نداريم چون همونطور که می‌دونيد در CSS عکسی که به عنوان Background برای یک Element انتخاب ميشه به اندازه همون Element تغيير اندازه پيدا می‌کنه.

در مرحله‌ی دوم تصوير سايه رو به عنوان background عکسمون قرار می‌ديم.

background: url(images/shadow.gif) no-repeat bottom right;

​

شاید بگین چرا ديده نميشه پس الان؟! خب چون دقيقا پشت عکس قرار می‌گيره دیگه!

اشکال مرحله‌ی قبل رو با جابجا کردن عکس به سمت بالا و چپ برطرف می‌کنيم. اين کار رو با تنظيم کردن Margin به اندازه‌ی ناحيه سايه خورده انجام می‌ديم. چون عرض سايه‌ی ما 6px هست پس تنظيمات Margin به اين صورت در مياد:

margin: -6px 6px 6px -6px;

​

در مرحله‌ی آخر به کلاسمون يه Float هم اضافه می‌کنيم. دليلش هم اينه که اگه Float نباشه و سايز عکس هم مشخص نشده باشه اون Background در طور سطری که عکس قرار داره کشیده ميشه. (امتحانش کنيد)

float:left;

​

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

.img-shadow {
   float:left;
   background: url(shadow.gif) no-repeat bottom right;
   margin: 10px 0 0 5px;
}
 
.img-shadow img {
   display: block;
   position: relative;
   background-color: #fff;
   border: 1px solid #a9a9a9;
   margin: -6px 6px 6px -6px;
   padding: 4px;
}

​

منبع: ALA: CSS Drop Shadows (با تلخيص عکسهاش، چون خيلی ضايع بودن به نظرم!)

http://welbog.mohsentaleb.com/index.php?p=198

 

[شايان]

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


فکر می‌کنم این خط رو زیاد در بالای صفحه‌هاتون دیدین…

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

​

اگه تا حالا نمی‌دونستين چيه بايد بگم اين DOCTYPE که از Document Type Declaration گرفته شده يکی از موارد کليدی برای Valid شدن صفحه‌ی استاندارد شماست. بدون اين، مرورگر نمی‌تونه تشخيص بده که شما از چه نسخه‌ی HTML يا XHTMLای استفاده می کنيد و در نتيجه، درج نکردن کامل اون در بالای صفحه می‌تونه باعث درست Render نشدن صفحه‌ی شما بشه.
برای مثال بدون اون، مرورگرهایی مثل IE که از روش backward–compatible برای Render کردن صفحه‌ها استفاده می‌کنن، استایل‌های CSS شما رو تاحدی که IE4 ساپورتشون می‌کنه نمایش می‌ده!
اين DOCTYPE شامل يک URL ميشه که به آدرس يه فايل dtd. اشاره می‌کنه. محتویات این فايل همون اطلاعات لازم برای درست Render شدن صفحه‌ی شما توسط مرورگر هستن.


خيلی از نرم افزارهای طراحی صفحات وب (که متاسفانه Dreamweaver هم جزءشون هست) نسخه‌ی ناقصی از اين تگ رو در صفحه می‌ذارن که شبيه اين هست و آدرس فایل مورد نظر در اون درج نشده: (قابل توجه بروبچه‌های iProDev. یه نگاهی به صفحه‌ی indexتون بندازین)

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

​

این هم یه لیست از نسخه‌های معتبر این تگ با توجه به ورژن HTML یا XHTML و نوع صفحه‌تون:

HTML 4.01 Strict, Transitional, Frameset​

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

​

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset​

​

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

​

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

​

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

​

XHTML 1.1 DTD​

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

​

پ.ن. توی منبع يه لينکی هم به مقاله‌ی دیگه‌شون داده بود که نحوه تغيير دادن نرم‌ افزار Dreamweaver رو برای درج درست آدرس Doctype توش گفته
اضافه شده: در تکمیل این مطلب، چه موقع کدام DOCTYPE؟.

http://welbog.mohsentaleb.com/index.php?p=187

 

[شايان]

در CSS به طور کلی ۲ نوع مقياس‌ اندازه‌گيری داریم:

• مقياسهای نسبی (Relative Length)
  • پیکسل: px
  • ام: em
  • اکس: ex
  • درصد: %
• مقياسهای ثابت (Absolute Length)
  • اینچ: in
  • سانتی‌متر: cm
  • میلی‌متر: mm
  • پوینت: pt
  • پیکاس: pc

مقياس‌های نسبی يعنی مقياس‌هايی که در کامپيوترهای مختلف با Resolutionهای متفاوت با هم فرق می کنن. مثلا سايز يک پيکسل در کامپيوتری با Resolution تصويری 1024x768 با سايز يک پيکسل در Resolution تصويری 800x600 متفاوتن.
يک em اندازه‌ی ارتفاع حرف بزرگ لاتين M در سايز پيش فرض يه فونت هست. يک ex هم به همين ترتيب اندازه‌ی ارتفاع حرف کوچک لاتين x. درصد هم که مشخصه چیه. مثلا ۲۰۰٪ يک فونت ۲ برابر اندازه پيش فرض اون فونته.

به عنوان یه مثال برای پی بردن به رابطه‌ی اين مقياسها اگه شما بخواين فونتتون به اندازه‌ی ۱۵۰٪ حالت پيش فرض اون فونت نمايش داده بشه، می‌تونيد از استايل زير استفاده کنيد:

font-size: 1.5em

​

درک مقياس‌های ثابت از اونجايی که اندازه‌شون به کامپیوتر و محيطش بستگی نداره خيلی ساده تره. اینچ و سانتی‌متر و ميلی‌متر که فکر نمی‌کنم نياز به توضيح نداشته باشن…
اين هم رابطه بين «پوينت» و «پيکاس» و «اينچ»:

1pt = 1.72in
1pc = 12pt

http://welbog.mohsentaleb.com/index.php?p=184
​

 

[شايان]

CSS با شعار No More Tables وارد دنیای طراحی صفحات وب شد! (قال المحسن! ™

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

کدی که برای تولید خروجی بالا نوشته شده اینه. همونطور که می‌بینید از هیچ Tableی استفاده نشده.

<div class="thumbnail">
<img src="image.gif" alt="" width="60" height="60"><br>
Caption 
</div>
<div class="thumbnail">
<img src="image.gif" alt="" width="60" height="60"><br>
Caption 
</div>
<div class="thumbnail">
<img src="image.gif" alt="" width="60" height="60"><br>
Caption 
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="image.gif" alt="" width="60" height="60"><br>
Caption 
</div>
<div class="thumbnail">
<img src="image.gif" alt="" width="60" height="60"><br>
Caption 
</div>
<div class="thumbnail">
<img src="image.gif" alt="" width="60" height="60"><br>

​

اگه يخورده دقت کرده باشيد در طراحی استايلش از ۲ تا Class بيشتر استفاده نشده. يکی thumbnail و يکی ديگه clearboth. بذاريد مشخصات و Propertyهای جفتشون رو توضيح بدم.

در کلاس thumbnail تنها چیزی که می‌تونه مهم باشه «float کردن چپ» اونه که به طور واضح در شکل پیاده‌سازی شده‌ش می بینید. در بقیه Propertyها به ترتیب: عرض ناحیه، خط حاشیه‌ی مورد نظر و رنگش، تو رفتگی داخلی، و فاصله خارجی با عنصر بعدی تعریف شدن که فکر نمی‌کنم نیاز به توضیح داشته باشن.

.thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

​

اصل این کد توی Class بعدی خلاصه ميشه که یک خط هم بیشتر نیست. يه نگاهی بهش بندازين:

.clearboth { clear: both; }

​

همونطور که توی کد HTML ديديد ما برای رفتن به يه سطر ديگه برای چيدن عکسهای بيشتر از يک تگ <br> با کلاس clearboth استفاده کرديم. مشخصات اين کلاس رو هم ديدين. مشخصه clear در CSS که می‌تونه مقادير Both و Left و Right و None رو بگيره برای اين استفاده ميشه که به يک عنصر اجازه بده که در بلاک یا خط عناصر float شده قبلی قرار بگيره يا نه.
در مثال بالا ما با استفاده از مقدار Both که مجموعی هست از Left و Right به مرورگر اين رو گفتيم که از اين به بعد عکسهای float شده رو نه در سمت راست و نه نه سمت چپ عناصر قبلی قرار بده. در واقع اونها رو در خط ديگه‌ای float کن. همونطور که دیدید تا قبل از استفاده از اين مشخصه،‌ عکسها در سطر اول به دنبال هم و در سمت چپ float ميشدن.

برای درک کردن بهتر اين مشخه، دو تا کد پائين رو در يه مرورگر امتحان کنيد:

<img src="yedoone_aks.gif" style="float:right ">
<h1 style="clear:right">salam</h1>

​

<img src="yedoone_aks.gif" style="float:right ">
<h1>salam</h1>

http://welbog.mohsentaleb.com/index.php?p=180

​

 

[شايان]

به عنوان يک ديزاينر، شايد خيلی وقتها برای طرحتون نياز به Tableهايی با لبه‌های گرد شده داشتين و اون رو با درنظر گرفتن يک جدول ۳x۳ و قرار دادن گوشه‌های گرد شده‌ی اون در قالب عکسهای خيلی کوچيک و در هرکدام از گوشه‌های جدول ساختين. (شکل پائین)

​

اين لبه‌های گرد رو با تکنيک‌های مختلفی ميشه درست کرد. همونطور که می‌بینید توی شکل پائين با حذف کردن يک پيکسل از گوشه‌های مستطیل، در نمای %100 لبه گردی تجسم ميشه.

​

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

​

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

​

تا اینجا مطلب خاصی رو نگفتیم! با این مقدمه و با استفاده از ابزار قدرتمند CSS می‌خوایم تگهای HTML خودمون رو طوری Customize کنیم که به راحتی و با صرف کمترین هزینه در طراحيمون به اين مستطيل‌ها با رنگهای مختلف برسيم.
با گفتن تکنیک اول در همون ابتدای مطلب (ساختن یه جدول ۳x۳)، شايد متوجه شده باشيد که برای ايجاد جدولهايی با رنگهای مختلف در یک صفحه بايد يک Set کامل (هر ۴ لبه‌ی گرد شده) از رنگ موردنظرمون رو داشته باشيم. خب اين کار وقت گيريه…! با روشی که میگم دیگه نیازی به انجام این کار نیست و حجم تصاویر استفاده شده در صفحه به مراتب کمتره.
در این روش فقط رنگ Background صفحه‌ی ما (که من اینجا از سفید استفاده می کنم) مهمه. کاری که ما انجام ميديم اینه که يه تصوير Transparent به اندازه‌ی عرض جدول موردنظرمون باز می‌کنيم و به جای ساختن گوشه‌های گرد، فقط معکوس اونها رو با رنگ زمينه صفحه‌مون رنگ می‌کنيم. اگه دقیقا متوجه نشدید، شکل زير همه‌ چيز رو به وضوح نشون ميده. (دقت کنید که ۲۴۰ پیکسل به صورت دلخواه انتخاب شده، عرض جدول شما می‌تونه هرچیز دیگه‌ای باشه)

اين تصوير رو به عنوان Background قسمت بالای مستطيل‌مون در نظر می‌گيريم و برای قسمت پائين اون همين تصوير رو قرينه می‌کنيم. به عنوان آخرین مرحله اين تکنيک رو برای تگ <DL> یا Definition List پیاده‌سازی می کنیم. این هم کد CSS اون:

dl {
width: 240px;
margin: 0 0 20px 20px;
background: #999 url(box_bottom.gif) »
no-repeat bottom left;
}
 
dt {
margin: 0;
padding: 10px;
background: #999 url(box_top.gif) »
no-repeat top left;
}
 
dd {
margin: 0;
padding: 10px;
}

​

همانطور که می‌بینید، در این روش برای عوض کردن رنگ مستطيل فقط کافيه مقدار BACKGROUND-COLOR رو برای تگهای <DL> و <DT> عوض کنيم. نمونه‌ی کاملی از اين مثال با رنگهای مختلف رو می تونيد از اينجا ببينيد.
منبع: ALA

http://welbog.mohsentaleb.com/index.php?p=174