i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
آگهی
article

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

web-design-two-side

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

ایجاد قالب های دو طرفه با جدول، روش قدیمی


یکی از روش های قدیمی طراحی قالب دوطرفه که به اصطلاح روش کار راه انداز هم می توان به آن لقب داد استفاده از جداول (تگ table) به عنوان لایه بندی کار است، جدول به دلیل استحکام و یکپارچگی خوبی که دارد ضمن افزایش سرعت کار پیچیدگی تعریف بلاک های تو در تو را ندارد، اما قبل از اینکه مثالی در این خصوص ارائه کنیم این نکته را باید یادآور شویم امروزه دیگر جداول در طراحی وب جایگاهی ندارند و این نوع طراحی تنها برای سایتهای به عنوان مثال دولتی و اداری توصیه می شود که نیاز به رقابت با سایر رقبا ندارند یا اینکه بحث زمان برای طراحی اهمیت حیاتی داشته باشد، اما برای سایت ها و وبلاگ هایی که تمایل دارند از رقبای خود از هر لحاظ پیشی بگیرند و ساختار بهتری داشته باشند، توصیه می شود که از بلاک های div به جای جداول استفاده کنند و تنها برای محتوای آماری و ردیف بندی شده، از جدول استفاده نمایند، این موضوع در مباحث سئو (SEO) همواره توصیه شده است.
به هر صورت، در مثال زیر ما یک جدول کلی با پنج بلاک درونی ایجاد کرده ایم که به فرض، بلاک بالا جهت هدر سایت، سه بلاک میانی جهت درج ستون های کناری و مطالب و نهایتا بلاک پائینی برای نوشتن فوتر، کپی رایت و... مورد استفاده قرار می گیرد، توصیه می کنیم قبل از اینکه به کدنویسی HTML قالب بپردازیم، ابتدا طرح کلی آن را در برنامه هایی نظیر فتوشاپ ترسیم کنیم تا الگوی بهتری در کدنویسی داشته باشیم چرا که طراحان حرفه ای معمولا طرح های اولیه خود را در فتوشاپ به شکل تصویری ترسیم می کنند و سپس آن را به صورت کدهای HTML و CSS تبدیل می کنند.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد قالب دو طرفه با جداول</title>
<!-- 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 آن در حین کار می توانیم استفاده کنیم، همچنین سرویس آنلاین سایت w3c در آدرس 
validator.w3.org
بدین منظور کاربرد دارد.
- می توانیم به راحتی با تعریف کلاس (Class) در CSS تنظیمات ظاهری مورد نظرمان را بر روی عناصر HTML صفحه اعمال کنیم.
- در وب مهم است که همیشه سعی کنیم با کوتاه ترین کدنویسی و با کم حجم ترین فایل ها، به هدفمان در طراحی قالب دست پیدا کنیم، چرا که صفحات وب به طور معمول از سرور راه دور به مرورگر کاربر ارسال و بارگذاری می شوند، لذا هرچه حجم اطلاعات کمتر باشد، سرعت کار افزایش پیدا خواهد کرد.
نکته: مجددا یادآور می شویم استفاده از تگ table در استانداردهای جدید صرفا برای نمایش اطلاعات آماری کاربرد دارد، بکارگیری این شیوه در طراحی قالب تنها یک راه حل به اصطلاح دم دستی و اضطراری است و نباید در حالت حرفه ای از آن استفاده شود.

ایجاد قالب های دو طرفه با بلاک های div، جایگزین table


همان طور که گفتیم، استفاده از جداول مدتهاست که دیگر در طراحی قالب های حرفه ای به کار نمی رود، یکی از دلایل این موضوع که عنوان می شود، قابلیت انعطاف پذیری پائین آن در دستگاههایی نظیر تلفن همراه یا تبلت است که کاربران را برای دیدن صفحات به زحمت می اندازد از طرفی سرعت بارگذاری و پردازش جداول در مقایسه با بلاک های div معمولا اندکی کمتر است، همچنین تگ table در مقایسه با div برای اعمال خواص CSS با محدودیت هایی مواجه است، به همین دلایل بهتر است مسیرمان را در طراحی وب با div جهت دهیم و هر کجا نیاز احساس شد از table استفاده کنیم.
برای ایجاد قالب های دوطرفه با لایه های div ناچار به تعریف آنها به صورت تو در تو هستیم و بعد از کدنویسی HTML باید با CSS به آنها فرم و شکل دهیم، مثال زیر به درک مطلب کمک خواهد کرد:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد قالب دو طرفه با بلاک های div</title>
<!-- 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 است، لذا فراگیری و تمرین آموزش های مقدماتی برای شروع طراحی وب الزامی خواهد بود.
- اگر احساس می کنید هنوز مهارت لازم را در استایل نویسی CSS کسب نکرده اید بهتر است ابتدا استایل ها را به صورت خطی بنویسید و سپس کلاس ها را تعریف و استایل را از حالت خطی به یک فایل CSS خارجی منتقل و آن را در صفحه به اصطلاح ایمپورت کنید، مثال:
گام اول (نوشتن استایل به صورت خطی):
<div style="width:800px; height:600px; border:1px #666 solid; display:block; margin-left:auto; margin-right:auto; text-align:center;">
گام دوم (انتقال استایل به یک فایل CSS جداگانه با نام دلخواه):
.main{
    width:800px;
    height:600px;
    border:1px #666 solid;
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
گام سوم (درج فایل CSS جداگانه در صفحه HTML):
<link type="text/css" href="template/style.css">
قاعدتا زمانی که در کدنویسی HTML و تعریف استایل CSS حرفه ای باشیم، می توانیم مستقیما تگ ها را نوشته و استایل را در فایل یا در صفحه تعریف کنیم.
- بلاک مربوط به کلاس clear در مثال بالا، صرفا نقش ایجاد یک خط نامرئی در صفحه را دارد که هر آنچه بعد از آن قرار می گیرد را در زیر خود نشان می دهد (گاهی مواقع استفاده از چنین تکنیک هایی در طراحی وب اجتناب ناپذیر است).
- با دقت در مقادیر کلاس ها، خواهیم دید که CSS تا چه حد کار طراحان وب را آسان کرده و به قدرت آن بیشتر پی خواهیم برد.

طراحی قالب های واکنش گرا (Responsive)


همان طور که دیدیم سیر تحول در شیوه طراحی قالب های وب از تگ table شروع و به استفاده از بلاک های div ختم می شود، اگرچه استفاده از div در حال حاضر روش متداول است اما این تگ با تکنیک های جدیدی همراه شده تا بیشترین سازگاری را به هنگام نمایش قالب های وب در دستگاه های مختلف (دسکتاپ، تبلت، فبلت، گوشی های تلفن همراه و...) داشته باشد، این تکنیک های جدید در مجموع با عنوان قابلیت واکنش گرا یا Responsive شناخته می شوند که به طور خلاصه یعنی قالب وبی طراحی کنیم تا در تمام دستگاه ها با هر اندازه صفحه نمایش و وضوح تصویری به خوبی فرمت بندی و نشان داده شود، به طور مثال اگر کد بالا را که با مقداردهی پیکسلی ثابت استایل نویسی شده در گوشی تلفن همراه خود مشاهده کنیم، احتمالا نیازمند به استفاده از بزرگنمایی یا اسکرول افقی خواهیم بود، اما با استفاده از تکنیک های طراحی قالب های واکنش گرا، همین قالب را تبدیل می کنیم به قالبی سازگار با گوشی های تلفن همراه، مثال:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#666" />
<title>وبگو | ایجاد قالب دو طرفه واکنش گرا با بلاک های div</title>
<!-- Webgoo.ir -->
<style type="text/css">
.main{
    display:block;
    width:100%;
    height:auto;
    border:1px #666 solid;
    direction:rtl;
}
.header{
    display:block;
    width:100%;
    height:100px;
    border-bottom:1px #666 solid;
}
.side-1{
    display:inline-block;
    width:25%;
    height:auto;
}
.center{
    display:inline-block;
    width:50%;
    height:auto;
    margin-right:-4px;
}
.side-2{
    display:inline-block;
    width:25%;
    height:auto;
    margin-right:-4px;
}
.side-1-inside, .center-inside, .side-2-inside{
    width:100%;
    height:100%;
    border:1px #666 solid;
}
.clear{
    clear:both;
}
.footer{
    display:block;
    width:100%;
    height:100px;
    border-top:1px #666 solid;
}
@media only screen and (max-width:800px) {
    .side-1{
        display:-block;
        width:100%;
    }
    .center{
        display:block;
        width:100%;
        margin-right:0;
    }
    .side-2{
        display:block;
        width:100%;
        margin-right:0;
    }    
}
</style>
</head>
<body>
<div class="main">
<div class="header">
Header
</div>
<div class="side-1"><div class="side-1-inside">Side-1</div></div>
<div class="center"><div class="center-inside">Center</div></div>
<div class="side-2"><div class="side-2-inside">Side-2</div></div>
<div class="clear"></div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
پیش نمایش
- منظور از قالب واکنش گرا (Responsive)، قالب وبی است که با توجه به اندازه صفحه نمایش، صفحه مرورگر یا وضوح تصویر رسانه کاربر که طیف وسیعی از دستگاه ها را شامل می شود، تغییر شکل داده و به عبارتی خود را با اندازه صفحه نمایش رسانه سازگار می کند.
- برای طراحی قالب های واکنش گرا از چند تکنیک مختلف در CSS استفاده می شود، به طور مثال این تکنیک ها می توانند شامل تعریف مقادیر مربوط به عرض، ارتفاع و... به صورت درصدی (%) به جای تعریف آنها با مقادیر ثابت مانند پیکسل (px) یا استفاده از مدیا کوئری (media) و تعریف استایل جداگانه برای اندازه صفحه نمایش های مختلف باشد، به فرض خط زیر
@media only screen and (max-width:800px)
تنها زمانی اجرا می شود که اندازه صفحه نمایش (یا صفحه مرورگر) مقدار 800 پیکسل یا کوچکتر باشد، به این صورت می توان استایل متفاوتی برای صفحه نمایش هایی با ابعاد مختلف در نظر گرفت.
- برای بکارگیری تکنیک های مختلف در طراحی قالب های واکنشگرا ابتدا باید HTML و CSS را فرا گرفته و سپس در هنگام طراحی و کدنویسی وب این تکنیک ها را لحاظ کنیم که در جای خود نیاز به آموزش جداگانه دارد، برای اطلاع بیشتر می توانیم در وب در این رابطه جستجو کنیم.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» زیبا سازی فرم های وب با CSS
» طراحی باکس جستجو با فتوشاپ و CSS
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» قابلیت های کاربردی CSS3 در طراحی وب
» طراحی قالب سه بعدی وب با فتوشاپ و CSS
commentنظرات (۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: میلاد
زمان: ۱۱:۳۷:۱۰ - تاریخ: ۱۳۹۱/۰۳/۲۳
سلام
میشه یکمی بیشتر توضیح بدین.توضیحات تون خیلی کمه!!ممنون میشم.
پاسخ: 
در مورد توضیح بیشتر، این مورد تا حدود زیادی به آشنایی و تسلط شما به 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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد سه بلاک در کنار هم</title>
<!-- 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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




8 × 2
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

هزینه و بازخورد مناسب