آموزش طراحی قالب (فصل چهارم- جلسه دوم) : تکمیل محتوای HTML

در این جلسه از آموزش طراحی قالب، محتوای HTML را تکمیل خواهیم کرد.

پس از بخش Header شروع میکنیم.

header

اگر طرح فتوشاپ را در نظر بگیرید، هدر ما به دو بخش راست و چپ  تقسیم می‌شود.

پس برای اینکار کدمان را به شکل زیر توسعه می‌دهیم.

<!-- Start Header -->
<div id="header">
<div class="right">

</div>

<div class="left">

</div>
</div>
<!-- End Header -->

<!-- Start Header -->
<div id="header">
<div class="left">

</div>

<div class="right">

</div>
</div>
<!-- End Header -->

خب، در قسمت راست قالب ما دو قسمت دیگر به عنوان لوگو و توضیح داریم. و در قسمت چپ آیکون شبکه‌های اجتماعی و فرم جستجو. پس دوباره کد را به شکل زیر توسعه می‌دیم.

<!-- Start Header -->
<div id="header">
<div class="right">
<div id="logo">

</div>

<div id="tagline">

</div>
</div>

<div class="left">
<div id="sn-icons">

</div>

<div id="searchfrm">

</div>
</div>
</div>
<!-- End Header -->

حال باید هر قسمت را با تگ معیّنی در قسمت مورد نظر وارد کنیم که به ترتیب زیر است :

Logo : لوگوی سایت ، که در اینجا ما نام سایت را قرار داده ایم را با استفاده از تگ h1 می‌نویسیم

Title : توضیح سایت را به دلیل اینکه اهمیت کمتری نسبت به نام سایت دارد را با استفاده از تگ h2 می‌نویسیم.

Social Network icons : آیکون‌ها را با استفاده از تگ img وارد می‌کنیم.

Search : برای قسمت جستجو نیز از تگ form استفاده میکنیم.

با توجه به توضیحات بالا کد ما به شکل زیر تغییر خواهد کرد.

<!-- Start Header -->
<div id="header">
<div class="right">
<div id="logo">
<h1>وبسایت من</h1>
</div>

<div id="tagline">
<h2>یک سایت دیگر با ورد÷رس</h2>
</div>
</div>

<div class="left">
<div id="sn-icons">
<img src="images/facebook.png" width="32" height="32" alt="facebook" titمe="وبسایت من در فیسبوک" />
<img src="images/twitter.png" width="32" height="32" alt="twitter" title="وبسایت من در تویتر" />
<img src="images/google_plus.png" width="32" height="32" alt="google plus" title="وبسایت من در گوگل پلاس" />
<img src="images/rss.png" width="32" height="32" alt="rss" title="RSS وبسایت من" />
</div>

<div id="searchfrm">
<form action="#">
<input type="text" name="search" value="جستجو..." />
<input type="submit" value="" />
</form>
</div>
</div>
</div>
<!-- End Header -->

اگر همه کارها را به درستی انجام داده اید هنگام اجرای کد در مرورگر شاهد چنین نتیجه ای خواهید بود :

خب اگر دقت کنید آیکون‌های شبکه اجتماعی باید به صفحه ای لینک شوند اما ما اینجا فقط از تگ img استفاده کرده ایم برای اینکار تک تک تگ‌های img را درون تگ a مانند کد زیر قرار می‌دهیم.

<div id="sn-icons">
<a href="#"><img src="images/facebook.png" width="32" height="32" alt="facebook" title="وبسایت من در فیسبوک" /></a>
<a href="#"><img src="images/twitter.png" width="32" height="32" alt="twitter" title="وبسایت من در تویتر" /></a>
<a href="#"><img src="images/google_plus.png" width="32" height="32" alt="google plus" title="وبسایت من در گوگل پلاس" /></a>
<a href="#"><img src="images/rss.png" width="32" height="32" alt="rss" title="RSS وبسایت من" /></a>
</div>

البته چونکه فعلا لینک ما معلوم نیست، آدرس را # قرار می‌دهیم.

خب اگر به طرح psdمان برگردیم، قسمت منو را هم داشتیم که در پایین هدر قرار دارد پس برای اضافه کردن آن کد زیر را بعد تگ (.left) قرار می‌دهیم.

<ul id="menu">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">آموزش ها</a></li>
<li><a href="#">همکاری</a></li>
<li><a href="#">تبلیغات</a></li>
<li><a href="#">تماس با من</a></li>
<li><a href="#">درباره من</a></li>
<li><a href="#">نقشه سایت</a></li>
</ul>

Sidebar

ستون‌های کناری ما دارای اجزاء کوچکتری به نام بلوک یا همان باکس‌ها هستند که عناوین مختلفی از جمله موضوعات، لینک ها، امکانات، اخرین مطالب، تبلیغات و.. می‌گیرند.

طبق طرحمان، ما فقط دو بلوک موضوعات و تبلیغات را داریم که موضوعات در ستون راست و تبلیغات در ستون چپ قرار می‌گیرد، اما بعضی از دوستان گفته بودند که چگونه سایر بلوک‌ها را هم اضافه کنیم؟ اگر به کدها دقت کنید متوجه خواهید شد چگونه اینکار را انجام دهید :

کد فعلی ما این است :

<!-- Start Container -->
<div id="container">
<!-- Start Right Sidebar -->
<div id="right-sidebar">

</div>
<!-- End Right Sidebar -->

<!-- Start Content -->
<div id="content">

</div>
<!-- End Content -->

<!-- Start Left Sidebar -->
<div id="left-sidebar">

</div>
<!-- End Left Sidebar -->
</div>
<!-- End Container -->

برای ایجاد بلوک یه div با کلاس block ایجاد می‌کنیم

<div class="block">

</div>

سپس قسمت عنوان بلوک و محتوای آن را نیز درست می‌کنیم  و آن را در ستون راست قرار می‌دهیم :

<!-- Start Right Sidebar -->
<div id="right-sidebar">
<div class="block">
<h4 class="block-title">موضوعات</h4>
<div class="block-content">

</div>
</div>
</div>
<!-- End Right Sidebar -->

می توان از تگ ul نیز برای ایجاد موضوع‌های سایت استفاده کرد :

<!-- Start Right Sidebar -->
<div id="right-sidebar">
<div class="block">
<h4 class="block-title">موضوعات</h4>
<div class="block-content">
<ul>
<li><a href="#">موضوع شماره 1</a></li>
<li><a href="#">موضوع شماره 2</a></li>
<li><a href="#">موضوع شماره 3</a></li>
</ul>
</div>
</div>
</div>
<!-- End Right Sidebar -->

می توان یک بلوک دیگر با عنوان آخرین مطالب را پس از بلوک موضوعات به شکل زیر ایجاد کرد :

<!-- Start Right Sidebar -->
<div id="right-sidebar">
<div class="block">
<h4 class="block-title">موضوعات</h4>
<div class="block-content">
<ul>
<li><a href="#">موضوع شماره 1</a></li>
<li><a href="#">موضوع شماره 2</a></li>
<li><a href="#">موضوع شماره 3</a></li>
</ul>
</div>
</div>

<div class="block">
<h4 class="block-title">آخرین مطالب</h4>
<div class="block-content">
<ul>
<li><a href="#">موضوع شماره 1</a></li>
<li><a href="#">موضوع شماره 2</a></li>
<li><a href="#">موضوع شماره 3</a></li>
</ul>
</div>
</div>
</div>
<!-- End Right Sidebar -->

ستون تبلیغات را نیز به همین شکل ایجاد می‌کنیم و بجای تگ ul از img برای وارد کردن تصاویر تبلیغات استفاده می‌کنیم.و یک بلوک دیگر با عنوان پیوندها نیز بعد از تبلیغات ایجاد می‌کنیم :

<!-- Start Left Sidebar -->
<div id="left-sidebar">
<div class="block">
<h4 class="block-title">تبلیغات</h4>
<div class="block-content">
<a href="#"><img src="images/ads-150.png" width="180" height="150" alt="تبلیغات" title="تبلیغات" /></a>
<a href="#"><img src="images/ads-300.png" width="180" height="300" alt="تبلیغات" title="تبلیغات" /></a>
</div>
</div>

<div class="block">
<h4 class="block-title">پیوندها</h4>
<div class="block-content">
<ul>
<li><a href="#">پیوند شماره 1</a></li>
<li><a href="#">پیوند شماره 2</a></li>
<li><a href="#">پیوند شماره 3</a></li>
</ul>
</div>
</div>
</div>
<!-- End Left Sidebar -->

بسیار خب اگر این کد را در مرورگر اجرا کنید باید چنین نتیجه ای رسیده باشید :

اگر مشکلی توی آموزش این جلسه واستون پیش اومده در قسمت نظرات مطرح کنید

نویسنده

طاها دریس