IT Village

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

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

برای انجام چنین کاری روش های بسیار مختلفی وجود دارد. در زبان های مختلف برنامه نویسی شما به راحتی می توانید چنین کاری را انجام دهید. اما در این پست به روش های انجام این کار در 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 هستید می توانید از پست های مشابه که در قسمت نظرات وجود دارد استفاده کنید.

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

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

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

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

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

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

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

خوشبختانه پستی که چند مدت پیش در مورد 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 می توانید به هدف خود برسید!

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

در حال حاضر، طراحی یک وب سایت، بدون استفاده از CSS ها، کاریست بس بیهوده. همان طور که دوستان می دانند، مهمترین قابلیت زبان HTML نمایش متن بر روی مرورگر است و برای صفحه آرایی و طراحی یک صفحه، امکانات خوبی را در اختیار طراح قرار نمی دهد. برای همین منظور، در سال 1996، 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 سری بزنید. امیدوارم این مقاله تا حدی به دوستانی که سوال کرده بودند و همچنین دیگر دوستان، کمک کرده باشد و اگر باز هم سوالی بود مطرح کنید.