رفتن به مطلب

چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟

raya

توسط raya
در مسائل عمومی وب و اینترنت

 اشتراک گذاری

Recommended Posts

raya

raya 0

ارسال شده در
ارسال شده در

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


یکی از روش های قدیمی طراحی یک قالب دوطرفه که به قولی کار راه انداز هم می توان به آن لقب داد، استفاده از جداول به عنوان لایه بندی کار است، جدول به دلیل استحکام و یکپارچگی خوبی که دارد ضمن افزایش سرعت کار، دردسرهای بلاک های تو در تو را ندارد، اما قبل از اینکه مثالی در این خصوص ذکر کنیم این نکته را باید اضافه کنیم که امروزه دیگر جداول در طراحی وب جایگاهی ندارند و این نوع طراحی تنها برای سایتهای به عنوان مثال دولتی و اداری توصیه می شود که نیاز به رقابت با سایرین ندارند، ولی برای سایت ها و وبلاگ هایی که تمایل دارند از رقبای خود از هر لحاظ پیشی بگیرند و ساختار بهتری داشته باشند، توصیه می شود که از بلاک های div به جای جداول استفاده کنند (البته اهمیت این موضوع در سئو seo هنوز ثابت نشده است) و تنها برای محتوای آماری و ردیف بندی شده، از جدول استفاده نمایند.
به هر صورت، در مثال زیر ما یک جدول کلی با پنج بلاک درونی ایجاد کرده ایم که به فرض، بلاک بالا جهت هدر سایت، سه بلاک میانی جهت درج ستون های کناری و مطالب و نهایتا بلاک پائینی برای نوشتن فوتر و کپی رایت و... مورد استفاده قرار می گیرد، توصیه می کنیم قبل از اینکه به کدنویسی html قالب بپردازید، ابتدا طرحی کلی از آن در برنامه هایی نظیر فتوشاپ ترسیم کنید تا الگوی بهتری در کدنویسی داشته باشید، چرا که طراحان حرفه ای معمولا طرح های اولیه خود را در فتوشاپ به شکل تصویری ترسیم می کنند و سپس آن را به صورت html و css در می آورند.
<!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>
<!-- -->
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" height="100">Header</td>
</tr>
<tr>
<td>
<table width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="200" align="center" height="400">Side-1</td>
<td width="400" align="center" height="400">Center</td>
<td width="200" align="center" height="400">Side-2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" height="100">Footer</td>
</tr>
</table>
</body>
</html>
توضیح:
- برای ایجاد بلاک های درونی، در بیشتر مواقع ناچاریم از جداول آشیانه ای (تو در تو یا Nested Tables) استفاده کنیم که در این مثال نیز یک جدول دیگر در درون جدول اصلی برای سه بلاک میانی، ایجاد کرده ایم.
- برای اطمینان از اینکه کدنویسی شما معتبر است، از مرورگرهایی نظیر اُپرا یا پلاگین های Firefox و از قابلیت Validate آن در حین کار استفاده کنید.
- می توانید به راحتی با تعریف کلاس (class) در css، تنظیمات ظاهری مورد نظرتان را بر روی عناصر اعمال کنید.
- همیشه سعی کنید با کوتاه ترین کدنویسی و با کم حجم ترین فایل ها، به هدفتان در طراحی قالب دست پیدا کنید.
ایجاد قالب های دو طرفه با بلاک های div


همان طور که گفتیم، استفاده از جداول مدتهاست که در طراحی قالب های حرفه ای به کار نمی رود، یکی از دلایل این موضوع که عنوان می شود، قابلیت انعطاف پذیری پائین آن در دستگاههایی نظیر تلفن همراه است که کاربران را برای دیدن صفحات، بعضا به زحمت می اندازد و از طرفی سرعت بارگذاری جداول در مقایسه با بلاک های div معمولا کم تر است، البته باز یادآور می شویم که هنوز دلیل قانع کننده ای در این خصوص ارائه نشده است که واقعا جدول در مقابل div کارایی ندارد، ولی به هر صورت توصیه ای است که شده و بد نیست ما هم از ابتدا مسیرمان را با div جهت بدهیم و اگر نیاز شد از table استفاده کنیم.
برای ایجاد قالب های دوطرفه با لایه های div، ناچار به تعریف چندگانه آنها به صورت تو در تو هستیم و در مثال زیر ما از css برای شکل دهی به عناصر استفاده کرده ایم:
<!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>وبگو | ایجاد قالب دو طرفه با بلاک های div</title>
<!-- -->
<style type="text/css">
.main{
width:800px;
height:600px;
border:1px #666 solid;
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.header{
width:100%;
height:100px;
border-bottom:1px #666 solid;
display:block;
}
.side-1{
width:198px;
height:400px;
border:1px #666 solid;
display:block;
float:right;
}
.center{
width:398px;
height:400px;
border:1px #666 solid;
display:block;
float:right;
}
.side-2{
width:198px;
height:400px;
border:1px #666 solid;
display:block;
float:right;
}
.clear{
clear:both;
}
.footer{
width:100%;
height:100px;
border-top:1px #666 solid;
display:block;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
Header
</div>
<div class="side-1">
Side-1
</div>
<div class="center">
Center
</div>
<div class="side-2">
Side-2
</div>
<div class="clear"></div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
توضیح:
- کدنویسی با div و css شکیل تر و حرفه ای تر است، اما نیازمند داشتن تجربه کافی و آگاهی از قابلیت های css است.
- برای راحتی کار، بهتر است ابتدا استایل ها را به صورت خطی بنویسید و سپس کلاس ها را تعریف، و استایل را از حالت خطی به یک فایل خارجی منتقل و آن را در صفحه ایمپورت کنید.
- بلاک مربوط به کلاس clear در مثال بالا، صرفا نقش ایجاد یک خط نامرئی در صفحه را دارد که هر آنچه بعد از آن قرار می گیرد را در زیر خود نشان می دهد (گاهی مواقع استفاده از این چنین تکنیک هایی اجتناب ناپذیر است).
- با دقت در مقادیر کلاس ها، خواهیم دید که css تا چه حد کار طراحان وب را آسان کرده است و به قدرت آن بیشتر پی خواهیم برد.

لینک به دیدگاه
Share on other sites

به گفتگو بپیوندید

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

مهمان
ارسال پست در این تاپیک...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
 اشتراک گذاری
رفتن به لیست تاپیک‌ها
×
×
  • اضافه کردن...