کسانی که با استفاده از جدول (Table) به طراحی سایت میپردازند، هنوز باور ندارند که همه امکانات جدول در طراحی با CSS نیز میتوانند اجرا شوند. در انجمن های مختلفی که در رابطه با طراحی در آنها بحث میشوند یکی از دلایل استفاده نکردن از CSS را نحوه جایگیری عناصر می‌نامند و در اکثر مواقع نیز طراحی یک فرم تماس را مثال میزنند. آنها میگویند وقتی یک فرم تماس را با استفاده از CSS طراحی میکنند، نظم عناصر به هم ریخته و فرم ها درست بعد از نوشته قرار میگیرند که ظاهر خوبی به فرم طراحی شده نمیدهد.
اما در این مطلب قصد دارم روشی را آموزش دهم که تمامی عناصر به یک اندازه و به طور کاملا منظم در کنار یکدیگر قرار خواهند گرفت. برای مشاهده نمونه کار روی این لینک کلیک کنید.
اما در این مطلب قصد دارم روشی را آموزش دهم که تمامی عناصر به یک اندازه و به طور کاملا منظم در کنار یکدیگر قرار خواهند گرفت. برای مشاهده نمونه کار روی این لینک کلیک کنید.
شروع آموزش:
1. ابتدا باید یک فایل html بسازید. برای این کار میتوانید یک پرونده با Notpad ایجاد کنید.
2. کدهای زیر را داخل آن کپی کنید:
کار ساخت فرم تماس تمام شد و میماند مختصر توضیحی درباره کدهای بالا:
اما میرویم سراغ قسمت اصلی یعنی همان کدهای CSS . این کدها برای سبک دهی فرم ما هستند که هم میتوانند در فایل html جاسازی شوند هم میتوانند در یک فایل جداگانه قرار گرفته و آدرس آنها را در فایل html وارد کنیم.
از قسمت اول کدها شروع میکنیم:
شما میتوانید فرمهای دلخواهتان را با استفاده از نمونه بالا ایجاد کرده و سبک دهی کنید.
شما میتوانید نمونه این فرم را در این صفحه ببینید.
موفق و پیروز باشید.
1. ابتدا باید یک فایل html بسازید. برای این کار میتوانید یک پرونده با Notpad ایجاد کنید.
2. کدهای زیر را داخل آن کپی کنید:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>نمونه فرم تماس</title>
<style type="text/css">
body {
background: #fff;
margin: 0 auto;
padding: 0;
}
.contact {
width: 400px;
direction: rtl;
text-align: right;
font: normal 11px Tahoma, Geneva, sans-serif;
}
.contact h2 {
font: bold 11px tahoma;
padding: 8px 2px;
border-bottom: 1px solid #CCC;
}
.contact label {
width: 120px;
float: right;
margin: 5px 0 0 0;
}
.contact .form, .contact .form-ltr {
width: 200px;
float: right;
padding: 2px;
font: normal 11px Tahoma, Geneva, sans-serif;
margin: 5px 0;
}
.contact .form-ltr {
direction: ltr;
text-align: left;
}
.contact .text {
width: 250px;
height: 100px;
overflow: auto;
font: normal 11px/1.4 Tahoma, Geneva, sans-serif;
}
.contact .btn {
font: normal 11px Tahoma, Geneva, sans-serif;
margin: 5px 0;
}
</style>
</head>
<body>
<div align="center">
<div style="background:#111; padding: 6px;"><a style="color:
#fff; text-decoration: none;" href="#">Powered by
faroxa</a></div>
<div class="contact">
<h2>پیام خود را ارسال نمایید</h2>
<form method="post" action="">
<label for="name"> نام شما : </label>
<input type="text" value="" class="form" />
<br />
<label for="Email"> پست الکترونیکی : </label>
<input type="text" class="form-ltr" value="" />
<br />
<label for="subject"> موضوع : </label>
<input type="text" value="" class="form" />
<br />
<label for="text"> متن پیام : </label>
<textarea class="text"></textarea>
<br />
<label> </label>
<input type="submit" value="ارسال" name="submit" class="btn" />
<input type="reset" value="دوباره" name="reset" class="btn" />
</form>
</div><!--Contact-->
</div><!--Center-->
</body>
</html>3. پرونده را با نام contact.html ذخیره کنید.کار ساخت فرم تماس تمام شد و میماند مختصر توضیحی درباره کدهای بالا:
<div class="contact">
<h2>پیام خود را ارسال نمایید</h2>
<form method="post" action="">
<label for="name"> نام شما : </label>
<input type="text" value="" class="form" />
<br />
<label for="Email"> پست الکترونیکی : </label>
<input type="text" class="form-ltr" value="" />
<br />
<label for="subject"> موضوع : </label>
<input type="text" value="" class="form" />
<br />
<label for="text"> متن پیام : </label>
<textarea class="text"></textarea>
<br />
<label> </label>
<input type="submit" value="ارسال" name="submit" class="btn" />
<input type="reset" value="دوباره" name="reset" class="btn" />
</form>
</div><!--Contact-->توسط
کد بالا ما یک فرم ساده html تولید کردیم که با استفاده از CSS سبک دهی
شده اند. همانطور که میبینید در هیچ جای کد از واژه Table استفاده نشده
است.اما میرویم سراغ قسمت اصلی یعنی همان کدهای CSS . این کدها برای سبک دهی فرم ما هستند که هم میتوانند در فایل html جاسازی شوند هم میتوانند در یک فایل جداگانه قرار گرفته و آدرس آنها را در فایل html وارد کنیم.
از قسمت اول کدها شروع میکنیم:
body {
background: #fff;
margin: 0 auto;
padding: 0;
}در این قسمت، خصوصیات کلی صفحه را ایجاد کردیم که شامل رنگ صفحه و فاصله صفحه از کناره هاست..contact {
width: 400px;
direction: rtl;
text-align: right;
font: normal 11px Tahoma, Geneva, sans-serif;
}در
این قسمت، خواص کلی فرم از جمله اندازه، نوع قلم و نوع چینش فرم را تعیین
کردیم یعنی فرم ما قرار است در یک div با خصوصیات بالا ایجاد شود..contact h2 {
font: bold 11px tahoma;
padding: 8px 2px;
border-bottom: 1px solid #CCC;
}کد بالا، عنوان فرم را سبک دهی میکند..contact label {
width: 120px;
float: right;
margin: 5px 0 0 0;
}کد
بالا، اندازه برچسب ها را مشخص میکند. به عنوان مثال عبارت "نام شما" که
در فرم به کار رفته است، برچسبی برای فرم "نام شما" است. اگر خصوصیات بالا
را اعمال نکنیم، فرم ما از این نظم بیرون آمده و فرم ها به برچسب ها
میچسبند که ظاهر خوبی به طراحی ما نخواهد داد..contact .form, .contact .form-ltr {
width: 200px;
float: right;
padding: 2px;
font: normal 11px Tahoma, Geneva, sans-serif;
margin: 5px 0;
}
.contact .form-ltr {
direction: ltr;
text-align: left;
}
.contact .text {
width: 250px;
height: 100px;
overflow: auto;
font: normal 11px/1.4 Tahoma, Geneva, sans-serif;
}
.contact .btn {
font: normal 11px Tahoma, Geneva, sans-serif;
margin: 5px 0;
}کدهای
بالا هم برای سبکدهی و قالب بندی فرم های موجود به کار میروند. اگر کدهای
بالا را حذف کنید، مرورگرها تنظیمات دلخواهشان را روی فرم شما پیاده
خواهند کرد که کمی با زبان فارسی مشکل دارند.شما میتوانید فرمهای دلخواهتان را با استفاده از نمونه بالا ایجاد کرده و سبک دهی کنید.
شما میتوانید نمونه این فرم را در این صفحه ببینید.
موفق و پیروز باشید.
دسته بندی : سی اس اس - CSS، طراحی وب
