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

آموزش برنامه نویسی و مهارتهای وب

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 دسته بندی: مهارتهای وب - مهارتهای وب طراحی وب -


یکشنبه 13 مهر 1393

نظرات ()


پنجشنبه 16 شهریور 1396 01:49 ب.ظ
Greetings! Very helpful advice within this post! It is the little changes that will make the greatest changes.
Thanks for sharing!
پنجشنبه 16 شهریور 1396 01:45 ب.ظ
Greetings! Very helpful advice within this post! It is the little changes that will make the greatest changes.
Thanks for sharing!
یکشنبه 15 مرداد 1396 09:44 ب.ظ
May I just say what a relief to find someone that actually understands what they are discussing
on the web. You actually know how to bring an issue to light and make it important.
A lot more people need to check this out and understand this
side of your story. I was surprised you
aren't more popular given that you surely possess the gift.
شنبه 14 مرداد 1396 04:09 ب.ظ
Hey I am so delighted I found your webpage, I really found you by accident, while I was looking on Askjeeve for something
else, Anyways I am here now and would just like to say thanks for a fantastic post and a all round thrilling blog (I also love the theme/design), I don’t have
time to read it all at the minute but I have saved it and also added
your RSS feeds, so when I have time I will be back to read more, Please do
keep up the great jo.
یکشنبه 13 فروردین 1396 01:06 ب.ظ
BHW
Because the admin of this web site is working, no doubt very soon it will be
renowned, due to its quality contents.

نظر خود را ثبت کنید:

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



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )