parsgreen.com
article

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

web-design-two-side

طراحی قالب برای سایت یا وبلاگ، بسته به میزان حوصله، صرف وقت و مهارت طراح قالب، ممکن است کاری لذت بخش و در عین حال وقت گیر و پردردسر باشد، طراحی یک قالب زیبا و کاربر پسند معمولا نیاز به، به کارگیری عناصر و المان هایی است که چینش منظم و همگون آنها در کنار یگدیگر، به میزان زیادی به حس زیبایی شناختی و تجربه بستگی دارد، از این گذشته کاربران معمولا تمایل دارند از حداقل فضا و امکانات موجود، حداکثر استفاده را ببرند و معمولا قالب های دوطرفه (با دو سایدبار) را به قالب های عادی و یک طرفه ترجیح می دهند، از این رو در این مطلب نگاهی خواهیم داشت به روش های کلی ایجاد قالب های دو طرفه به کمک 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>
<!-- http://webgoo.ir -->
</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>
<!-- http://webgoo.ir -->
<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 تا چه حد کار طراحان وب را آسان کرده است و به قدرت آن بیشتر پی خواهیم برد.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» زیبا سازی فرم های وب با css
» نحوه ساخت باکس گوشه گرد در فتوشاپ و css
» طراحی باکس جستجو با فتوشاپ و CSS
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» طراحی هدر قالب سایت و وبلاگ با فتوشاپ و css
commentنظرات (۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: میلاد
زمان: ۱۱:۳۷:۱۰ - تاریخ: ۱۳۹۱/۰۳/۲۳
سلام
میشه یکمی بیشتر توضیح بدین.توضیحات تون خیلی کمه!!ممنون میشم.
پاسخ: 
سلام.
درمورد توضیح بیشتر، این مورد تا حدود زیادی به آشنایی و تسلط شما به css برمی گردد، کار طراحی قالب معمولا بیشتر به سلیقه طراح بستگی دارد، این آموزش هم صرفا جهت معرفی یک الگو است، اگر به نظرتان پیچیده می رسد، توصیه می کنیم مهارتهای خود را در زمینه css از ابتدا و گام به گام افزایش دهید؛ چون بدون تسلط بر استایل نویسی، نمی توانید قالب طراحی کنید.
نویسنده: فرشید
زمان: ۰۰:۰۳:۲۶ - تاریخ: ۱۳۹۱/۰۴/۱۱
ممنون کارمون رو تا حدودی راه انداختین
نویسنده: محمد
زمان: ۰۴:۵۹:۱۹ - تاریخ: ۱۳۹۲/۰۵/۱۳
سلام. ممنون از زحماتی که میکشین...
بنده رو طرحی تقریبا شبیه طرح این سایت کار می کنم.
www.stclick.ir
مشکلی که دارم اینه که نمیدونم چجوری باید بلاک های کناری رو درست کنم تا اندازه عرضشون (width) به صورت داینامیک باشه. بلاک اصلی هم وسط باشه و بلاک های کناری هم اندازه باشن. تو این سایت سمت راست یه نوار قرمز رنگ هست (روش نوشته ورود مهمان) که نصفش (نیمه چپش) یک تصویر ثابت هست ولی نیمه راستش یه تصویر کوچک قرمز رنگه که به حالت بک گراند تکرار شده. دقیقا می خوام بدونم که اون نیمه راست نوار قرمز رو چجوری تو css تعریف کنم. که عرضش اتوماتیک و متناسب با زوم مرورگر باشه.
خیلی ممنون
پاسخ: 
سلام
مشکل شما یک مورد جزئی نیست تا بتوانیم دقیقا کمکتان کنیم، در واقع باید تجربه کافی در طراحی قالب و کار با خاصیت های مختلف CSS را داشته باشید، چون هر عنصر در صفحه در تعامل با عناصر دیگر شکل و فرم می گیرد، یعنی از اسکلت بندی کار باید بدانید که خاصیت های مختلف چه تاثیری بر همدیگر و در نهایت بر کل ساختار قالب دارند، این کار هم صرفا با تمرین و تکرار قبلی حاصل می شود و کاری نیست که در کوتاه مدت بتوان آموزش داد، باید از طراحی قالب های کوچک شروع کنید، با نحوه ایجاد المان های تو در تو آشنا باشید، همین طور با نحوه مقدار دهی پیکسلی، درصدی و...
نویسنده: محمد
زمان: ۰۲:۴۶:۱۸ - تاریخ: ۱۳۹۲/۰۵/۱۴
پررویی بنده رو ببخشین که دست بردار نیستم، خیلی نیاز دارم به این هر جا گشتم پیدا نکردم.
فکر کنم سوال بنده رو درست متوجه نشدین! به نظرم جواب سوالم باید خیلی ساده باشه. متاسفانه در کامنت قبلی سوالم رو خیلی بد مطرح کردم! ساده تر بگم بنده می خوام سه تا بلاک ایجاد کنم. یکیش وسطیه که اندازه عرضش ثابته (956 پیکسل). دو تا بلاک دیگه هم که عرضاشون (width ) ثابت نیست و در کناره ها قرار می گیرن. دقیقا سوالم این بود که عرض دو تا کلاس right-side و left side چی باشه که متناسب اندازه صفحه باشن.
.block{
position:absolute;
bottom:0px;
top:0px;
right:0px;
left:0px;
height:auto;
background-color: yellow;
}
.main-block{
width: 956px;
height: 900px;
margin-right: auto;
margin-left: auto;
background-color: green;
}
.left-side{
position:absolute;
top:0px;
left:0px;
bottom: 0px;
background-color: red;
width: ؟؟؟;
}
.right-side{
position:absolute;
top:50px;
left:0px;
bottom: 0px;
background-color: red;
width:؟؟؟ ;
}
این هم کد اج تی ام ال:
<div class="block">
<div class="left-side"></div>
<div class="main-block"></div>
<div class="right-side"></div>
</div>
پاسخ: 
شاید توضیح روش حل این مشکل به جهت نیاز به داشتن تسلط و تجربه قبلی در مباحث CSS، در اینجا مقدور نباشد، اما احتمالا الگوی زیر مد نظر شما است:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | ایجاد سه بلاک در کنار هم</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
margin:0;
padding:0;
}
#content-wrapper{
float:left;
width:100%;
margin-left:-40%;
}
#left-block{
margin:0 190px 0 40%;
background:#69C;
text-align:right;
}
#main-block{
float:left;
width:190px;
margin-left:-190px;
background:#F90;
}
#right-block{
float:left;
width:40%;
background:#699;
}
.content-block{
margin:20px;
margin-top:0;
}
</style>
</head>
<body>

<div id="content-wrapper">
<div id="left-block">
<div class="content-block">بلاک چپ</div>
</div>
</div>

<div id="main-block">
<div class="content-block">بلاک اصلی</div>
</div>

<div id="right-block">
<div class="content-block">بلاک راست</div>
</div>

</body>
</html>
نویسنده: محمدرضا
زمان: ۱۸:۰۵:۴۴ - تاریخ: ۱۳۹۲/۰۹/۰۹
سلام
ببخشید میشه به من بگید چطوری میتونم footer قالبم که به هم ریخته رو درست کنم
خدایی این دفعه رو کمک کنید و یادداشت منو حذف نکنید وبلاگم رو درست کردم ولی فوتر ظاهرش رو خیلی بد ریخت کرده
ممنون میشم
پاسخ: 
سلام
منظورتان از بهم ریختن و بد ریخت شدن مشخص نیست، سوالتان را کمی دقیق تر و با جزئیات بیشتر مطرح کنید، دقیقا فوتر باید چگونه باشد؟
نویسنده: لیلا
زمان: ۱۹:۳۳:۰۸ - تاریخ: ۱۳۹۲/۱۰/۰۶
لطفا توضیحاتتون رو به زبان ساده تری بیان کنید .......
پاسخ: 
این آموزش جزء مطالب قدیمی سایت است که در آینده مورد بازنگری قرار خواهد گرفت!
نویسنده: مردان علی
زمان: ۱۹:۰۴:۱۰ - تاریخ: ۱۳۹۳/۰۱/۰۲
با سلام یک سوال داشتم قالبی را خودم طراحی کردم وقتی که آن را در وبلاگ می اندازم قبول نمی کند می گوید با این پسوند وارد کنید.<blogfa> وارد نماید چگونه این مشکل را حل کنم....
پاسخ: 
سلام
قالبتان با بلاگفا سازگار نیست، لطفا به راهنمای تگ های اختصاصی بلاگفا (در قسمت ویرایش کد قالب) مراجعه یا از یک قالب آماده الگوبرداری کنید.




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

4 × 1
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...