Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کرده‎اند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفته‎اند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیت‎ها و توانایی‎های دو نسخه قبل را پوشش می‎دهد و رویه‎ای جدید در طراحی سایت بوجود می‎آورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب می‌شود. امکانات جدید و هیجان انگیزی ارائه می‌دهد، روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد. نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است. این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگ‌ها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل می‌شود. برای دیدن کاربرد هر کدام می‌توانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.

CSS3 امکاناتی را به شما می‌دهد که بوسیله آن می‌توانید صرفه جوبی قابل توجهی در زمان داشته باشید. این امکانات در حدی است که شما می‌توانید توانایی‌های (هرچند کوچک باشد!) پلتفرهای مبتنی بر جاوااسکریپت مانند جی کوئری، موتولز و .. را در صفحات بدون استفاده از آنها پیاده سازی کنید. در این میان، حالات و توانایی‌های جی کوئری بیشتر به چشم میخورد. اما با این حال اینجا تنها به صورت کلی بیان شده است. پیشنهاد می‌کنم برای دیدن توانایی‌های بیشتر آن به یکی دیگر از مراجع اصلی آن یعنی css3.com و همچنین 33 مقاله ای که حتما در مورد CSS3 باید بخوانید مراجعه کنید.

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

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

باید بدانید که مرورگرهای تحت وب تا سال 2022 مجبور به پشتیبانی کامل از HTML5 می‌شوند و تقریبا تمام اصول نمایش را بر اساس آن بنا می‌گذارند. در حال حاضر این نسخه، نسخه نهایی می‌باشد که تقریبا هیچ اشکالی بر آن وارد نشده است و زبانیست به شکل نهایی. در همین راستا Lachlan Hunt گسترش دهنده مرورگر اپرا برای HTML5 گفته است: “ما می‌خواهیم با این روش، کار را برای طراحان وب آسان تر کنیم به طوری که آنها مجبور به دوباره نویسی هر قسمت نشوند” دقیق ترین مفهومی که از این جمله می‌توان برداشت کرد همین است و بس که “HTML5 روش طراحی وب را کاملا تغییر می‌دهد.”

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

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

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

موفق باشید/.

مطالب مرتبط:

• چگونگی طراحی وب سایت های کاربر پسند
• فارسی سازی قالب با CSS
• چگونگی کار با CSS
• چگونه وبلاگتان را گرد کنید
• فنگ شویی در صفحات وب

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

برای انجام چنین کاری روش های بسیار مختلفی وجود دارد. در زبان های مختلف برنامه نویسی شما به راحتی می توانید چنین کاری را انجام دهید. اما در این پست به روش های انجام این کار در HTML و CSS می پردازیم.

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

سپس با استفاده از HTML یک جدول بسازید که دارای 3 قسمت باشد. برای بک گرند قسمت بالایی عکس شماره ی 1، و برای خانه ی پایینی نیز از عکس شماره 2 استفاده کنید. بک گرند خانه ی میانی را نیز با رنگی مشابه دو قسمت دیگر مقدار دهی کنید. با این تکنیک مزخرف و منسوخ که غیر از خودم کس دیگری را ندیدم از آن استفاده کند! شما می توانید یک محوطه با گوشه های گرد برای خودتان ایجاد کنید. البته واضح است که دستتان کاملن بسته است و به هیچ عنوان نمی توانید با دستکاری سورس، در اندازه ها تغییری ایجاد کنید. در ضمن خطوط سفید موجود در شکل را هم برای درک بیشتر موضوع قرار داده ام.

روش بعدی استفاده از CSS است و روش بسیار ساده ای است که البته فقط در فایرفاکس و سافاری قابل استفاده است. به مثال زیر توجه کنید:

#left_side {
margin-top: 10px;
padding-left:5px;
padding-right:5px;
font-family:tahoma;
float: left;
width: 160px;
-moz-border-radius: 0.8em;
background: #f1F6FE ;
}

شما به راحتی می توانید با اصافه کردن moz-border-radius: Xem- گوشه ی هر عنصری را له کنید! البته برای انجام این کار در سافاری، از دستور -webkit- به جای -moz- باید استفاده کنید. گوشه های ساید بار این وبلاگ نیز با این تکنیک گرد شده است. برای همین در مرورگر IE قابل مشاهده نمیباشد.

روش آخری که در این مقاله توضیح میدهم مجددن با استفاده از CSS است و بسیار حرفه ای تر از موارد بالا است و در همه ی مرورگر ها نیز قابل استفاده است. ابتدا باید در فتوشاپ یا نرم افزار های مشابه 4 گوشه گرد تر و تمیز درست کنید! درست مثل این 4 شکل!

حالا باید کد CSS لازم برای این کار را بنوسید. به کد زیر دقت کنید(بدون شماره های اولشان):

1 #corner_box {
background: #d9e5f8; }
2 #corner_top div {
background: url(pic1 url) no-repeat top left; }
3 #corner_top {
background: url(pic2 url) no-repeat top right; }
4 #corner_bottom div {
background: url(pic3 url) no-repeat bottom left; }
5 #corner_bottom {
background: url(pic4 url) no-repeat bottom right; }
6 #corner_top div, #corner_top, #corner_bottom div, #corner_bottom {
width: 100%;
height: 40px; }
7 #corner_content { margin: 0 30px; font-family: tahoma; text-align: justify; direction: rtl; }

کد کاملن واضح است. در خط 1 رنگ زمینه ی کل باکس را مشخص کرده ایم. در خط 2 تا 5 آن چهار گوشه ای که ساخته بودیم را سر جایشان قرار دادیم! در خط 6 اندازه ها را مشخص کرده ایم و در خط 7 نیز موقعیت و مشخصات متن موجود در جعبه مشخص شده است. البته شما می توانید هر تغییری که مایل هستید در این قسمت های ایجاد کنید.

اکنون باید در صفحه ی اصلی مورد نظرتان، از کد CSS بالا که نوشته اید استفاده کنید:

<div class=”corner_box”>
<div class=”corner_top”><div></div></div>
<div class=”corner_content”>
در این قسمت هر چیزی که مایل باشید می توانید قرار دهید. می توانید از این جعبه با اندازه ی مناسب، حتی به عنوان ساید بار استفاده کنید و تمامی محتوای وبلاگتان را در آن قرار دهید
</div>
<div class=”corner_bottom”><div></div></div>
</div>

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

اگر مایل به یادگیری بیشتر CSS هستید می توانید از پست های مشابه که در قسمت نظرات وجود دارد استفاده کنید.

مطالب مرتبط:

• با CSS3 و HTML5 آشنا شویم 
• دهکده آی‌تی و تجربه یک نویسنده دیگر!
• شروع به کار سایت تخصصی شبکه
• فراخوان انتخاب آدرس سایت
• از وبنا حمایت کنید

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

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

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

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

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

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

مطالب مرتبط:

• با CSS3 و HTML5 آشنا شویم 
• فارسی سازی قالب با CSS
• چگونگی کار با CSS
• یک توسعه دهنده وب، به چه تخصص هایی نیاز دارد؟
• چگونه وبلاگتان را گرد کنید

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

در ابتدای امر، دو مورد در قالب های خارجی نمود زیادی دارد. اول هماهنگ نبودن آن با زبان فارسی و دوم، که ممکن است برای بعضی ها آزار دهنده باشد، وجود منوی سایت در سمت چپ. شما با حل این دو مشکل قدم بسیار بزرگی را بر خواهید داشت. اتفاقا این کار به راحتی نیز ممکن است. شما برای اینکه مطالب را از راست به چپ تنظیم کنید چند راه پیش رو دارید:
راه اول این است که در قسمت body استایل قالب خود(CSS) این خط (direction: rtl) را اضافه کنید:

body {
text-align: center;
direction: rtl;
font-family:tahoma;
margin-top:10px;
margin-bottom:10px;
color:#666666;
background-color: #E0E0E0;
{

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

#content {
margin-top: 20px;
margin-bottom: 0px;
direction:rtl;
text-align:right;
margin-left: 180px;
margin-right: 180px;
font-family: tahoma, arial, sans-serif;
font-size: 11px;
line-height: 15px;
color: #333333;
{

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

دقت کنید هر جایی که از direction: rtl استفاده کردید، باید از text-align:right نیز استفاده کنید تا مطالب را راست چین کند. با انجام این کار ها، لااقل محتوای سایت شما به درستی به نمایش در خواهد آمد.
کار دیگری که باید بکنید، این است که فونت ها را به Tahoma تغییر دهید. علت این امر هم که کاملا واضح است! برای اینکه منو ی سایت نیز به سمت راست بیاید، می توانید در قسمت مربوطه که معمولا با عناوینی مانند side# مشخص می شود، از تگ float: right استفاده نمایید. به احتمال زیاد جواب خواهید گرفت.

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

input, textarea {
direction: rtl;
text-align: right;
font-family:tahoma;
margin: 1px;
{

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

حال یک سوال پیش میاید و آن اینکه ما چگونه بفهمیم هر قسمت از قالب که قصد انجام تغییر در آن را داریم، با چه id مشخص شده است؟ این سوال دو جواب دارد. اول اینکه اگر کمی وارد باشید و با قالب ور بروید، خودتان می توانید id مربوطه را پیدا می کنید! اما علاوه بر اینکه این راه وقت گیر است، ممکن است عده ای، زیاد به این کار وارد نباشد. راه حل بهتر در استفاده از مرورگر فایرفاکس و استفاده از افزونه ی Web Developer نهفته است. شما می توانید با استفاده از این افزونه مدت ها ذوق زده باشید! البته من نحوه ی استفاده از قسمت های مختلف این افزونه را به خودتان واگذار می کنم اما یک توضیح برای پیدا کردن id ها بدهم. بعد از نصب این افزونه، از طریق گزینه ی information و انتخاب Display ID & Class Dtails می توانید به هدف خود برسید!

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

مطالب مرتبط:

• با CSS3 و HTML5 آشنا شویم 
• چگونگی طراحی وب سایت های کاربر پسند
• چگونگی کار با CSS
• چگونه وبلاگتان را گرد کنید
• فنگ شویی در صفحات وب

CSS یا Cascading Style Sheets در واقع نحوه ی نمایش عناصر را در صفحه مشخص می کند و به شما اختیار می دهد تمام قسمت ها و عناصر موجود در یک صفحه را به کنترل خود در بیاورید. شما در استفاده از CSS ها یا شیوه نامه ی آبشاری، دو راه پیش رو دارید. هم می توانید مستقیم از آن در داخل کد ها ی صفحه استفاده کنید و هم می توانید به صورت خارجی از آن استفاده کنید. در صورتی که راه اول را انتخاب کنید، کد شما به صورت زیر در خواهد آمد:

<P style=”font-style: tahoma; font-weight: bold; letter-spacing: 5em;”s>

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

body {
font-size: 8pt; font-family: Tahoma, Arial;
} A:hover {
font-weight: normal; color: #0000C0; text-decoration: none;s
}s

و بعد باید در صفحه ی مورد نظر، بدین صورت به این شیوه نامه ارجاع می دهید:

<link href=”style.css” type=”text/css” rel=”stylesheet”s>

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

W3C CSS2.1 Spec و The Box Model به درد کسانی می خورد که هنوز با مفاهیمی از جمله Padding و یا Margin آشنایی ندارند. در این دو سایت شما به صورت خیلی ساده، با این مفاهیم آشنا می شوید.
Clearing floats ، Faux Columns و Creating Liquid Faux Columns شما را با نحوه ی مرتب کردن عناصر در جهت های مختلف صفحه آشنا می کنند.

در IE 6 و نسخه ی های قبل از آن، شما نمی توانید فونت ها را با استفاده از px بزرگ و کوچک کنید و برای این منظور باید از ems استفاده کنید. How to size text using ems ، Elastic Design و Fixed or fluid width? Elastic شما را چگونگی انجام این کار آشنا می کنند. چون یکی از مهمترین دغدغه های طراحان سایت، هماهنگی سایت طراحی شده با همه ی مرورگر ها می باشد و برای این منظور شما باید با این نکات ریز آشنا باشید.

شما در Revised Image Replacement با چگونگی استفاده از تصاویر آشنا می شوید و نحوه ی به کار گیری آنها را در هر جای صفحه از جمله بک گرند خواهید آموخت.

شما می توانید با سر زدن به Floatorial تمام مطالب بالا و همچنین بسیاری از مطالب دیگر مربوط به CSS را فرا بگیرید. زیرا دارای آرشیو بسیار خوبی در این زمینه است. همچنین فراموش نکنید که سایت های معرفی شده تنها برای کمک به شما به منظور درک بیشتر از CSS بوده. وگرنه کاملترین مرجع برای همه ی ما، W3C می باشد. همچنین Learning CSS که متعلق به W3C است، را از دست ندهید. جدا از تمام اینها، بهترین و جامع ترین آموزش CSS را می توانید در اینجا پیدا کنید.

در پایان اگر یک CSS نوشتید و می خواهید آن را چک کنید، به CSS Validation service سری بزنید. امیدوارم این مقاله تا حدی به دوستانی که سوال کرده بودند و همچنین دیگر دوستان، کمک کرده باشد و اگر باز هم سوالی بود مطرح کنید.

مطالب مرتبط:

• با CSS3 و HTML5 آشنا شویم 
• چگونگی طراحی وب سایت های کاربر پسند
• فارسی سازی قالب با CSS
• چگونه وبلاگتان را گرد کنید
• فنگ شویی در صفحات وب

برای تهیه نسخه ی پشتیبان از دیتابیس خود، نیاز به phpMyAdmin دارید. phpMyAdmin در واقع یک ابزار مدیریتی بانک های اطلاعاتی MySql است که اغلب سرویس دهندگان هاست (Hosting providers) به مشتریان خود ارائه می دهند.(البته غیر از سرویس دهنده ی هاست من!!) این ابزار شامل قسمتی برای تهیه نسخه ی پشتیبان از دیتابیس شما می باشد. اگر کمی دقت کنید، روند کار را بسیار ساده خواهید یافت.

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

ابتدا باید بدانید که شما دو راه پیش رو دارید:
1- از تمام دیتابیس بک آپ بگیرید.
2- تنها از جداول بک آپ بگیرید.

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

مراحل کار:

ابتدا وارد کنترل پنل سایت خود شوید و به قسمت MySql database بروید. سپس phpMyAdmin را باز کنید. در این صفحه اگر می خواهید از دیتا بیس خود بک آپ بگیرید بر روی گزینه ی Export link from the home page کلیک نمایید و اگر می خواهید تنها از جداول بک آپ بگیرید ابتدا بر روی Database کلیک کرده و سپس بر روی گزینه ی Export link for exporting the tables کلیک نمایید. و دیتابیس مورد نظرتان را انتخا کنید.

بعد از انتخاب دیتابیس خود، از زبانه های موجود، Export را انتخاب کنید.

3- بعد از این کار باید صفحه ی Export ظاهر شود که دارای چندین منو است. شما می توانید طبق عکس زیر اقدام به انتخاب گزینه ها کنید.

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

Structure
– add DROP TABLE
– Add AUTO_INCREMENT value
– Enclose table and field names with backquotes

Data
– Use hexadecimal for binary fields

Save as file
[use default File name template]
– “gzipped”

4- بر روی گزینه ی GO کلیک کنید و اجازه دهید تا فایل بر روی کامپیوترتان ذخیره شود. در اینجا تهیه نسخه ی پشتیبان به اتمام رسیده است.

بازگرداندن بانک اطلاعاتی:

1- برای باز گرداندن جداول در صفحه ی اصلی phpMyAdmin، از لیست کشویی دیتابیس مورد نظر خود را که یک دیتابیس خالی باید باشد، انتخاب کنید و بر روی آیکون SQL(ستون سمت چپ) کلیک کنید.

2- در صفحه ی جدید بر روی گزینه ی Import files کلیک کنید.
3- به وسیله ی دکمه ی Browse فایل مورد نظر را از کامپیوتران انتخاب کرده و مطمئن باشید که گزینه ی gzipped انتخاب شده باشد.

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

منابع: 1 - 2
در ضمن قصد دارم به زودی این وبلاگ را هم به وردپرس انتقال دهم. بدجوری وردپرس در این مدت مزه کرده است به دهانم!!

مطالب مرتبط:

• یک دیتابیس، چند وبلاگ در وردپرس

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

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

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

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

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

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

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

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

مطالب مرتبط:

• با CSS3 و HTML5 آشنا شویم 
• چگونگی طراحی وب سایت های کاربر پسند
• فارسی سازی قالب با CSS
• چگونگی کار با CSS