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

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۱۵ تیر ۱۳۹۲

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

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

header

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

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

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

</div>

<div class="left">

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

نکته :

دقت کنید که در قالب‌های rtl، (راست به چپ) قسمت راست بر قسمت چپ مقدم‌تر است، اما در قالب‌های ltr (چپ به راست) این قضیه برعکس است،

به عنوان مثال اگر قالبمان انگلیسی بود کد ما به شکل زیر تغییر می‌کرد :

<!-- 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 -->

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

نکته :

دلیل اینکه value دکمه جستجو را خالی گذاشتیم این است که بعدا می‌خواهیم بجای دکمه از آیکون استفاده کنیم.

خب اگر دقت کنید آیکون‌های شبکه اجتماعی باید به صفحه ای لینک شوند اما ما اینجا فقط از تگ 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 -->

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نظرات کاربران

محمد

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

mohammad nikkhah

سلام
ایا میشه فایل pdf اموزش طراحی قالب رو به صورت کامل بر روی سایت قرار دهید ممنون

سجاد دریس

سلام.
وجود داره.
توی صفحه کاربران vip

n0n0sh

سایتتون حرف ندارههههه

Abbas412

سجاد جان ممنون بابت آموزشت
همه چی عالی بود
فقط یه سوال
تصاویر شبکه های اچتماعی رو که توی تگ a گذاشتم، بینشون یه خط تیره اومده؛ اونا رو چطوری حذف کنم؟؟
تصویرو ببین، زوم کردم تا بهتر متوجه بشی
http://upload7.ir/imgs/2014-03/88789048699784220841.jpg

سجاد دریس

سلام. از این خصوصیت برای تگ های a استفاده کنید.

text-decoration: none;
زمان الله

باسلام خسته نباشید ممنون این سایت خوب وآموزنده تان یک سوال داشتم میشه بگیدکه کدهای منو درکجا قرار می گیرند من متوجه نشودم ممنون میشم که جواب من رابدهید

سجاد دریس

سلام.
بعد از تگ بسته div با کلاس left قرار می گیره

mm021

سلام خسته نباشید من اون کد های با لا رو نوشتم بد تو بخش هدر اون چهار تا عکس فیسبوک/توییتر/ گوگل پلاس/rss عکس هاش نمیاد چرا کد ها رو هم درست نوشتم مثل شما 😕

سجاد دریس

سلام.
مطمئنید که آدرس تصاویر صحیحه؟

mm021

درستش کردم

mm021

اره درسته

jafar_2002

سلام آقا تشکر بسیار قشنگ و واضح بود آموزش.

فرزاد حیات بخش

سلام
خیلی عالی بود فقط یه نکته:در اون قسمت که گفتید “حال باید هر قسمت را با تگ معیّنی در قسمت مورد نظر وارد کنیم که به ترتیب زیر است :” در کد بعدی این نوشته یه اشتباه کوچیک کردید:نوشتید “titمe =”وبسایت من در فیسبوک” / > ”
امیدوارم فهمیده باشید
با تشکر

سجاد دریس

سلام.
آفرین به این دقت.! 😉

meyti pugo

سجاد جان کاش که با html 5 طراحی میکردی.. طراحی با html5 رحت تر شده…

سجاد دریس

سلام.
از5 html استفاده کردم

الهام

ممنون آقا سهیل دقیقا به سوالای من جواب دادین

از جناب دریس ام خیلی ممنوم بخاطر آموزشهای ساده و روانشون

کیوان علی محمدی

برای درست نوشتن فارسی بهتره آپدیت کنید،برای تنظیمات رنگ ها هم از منوی Edit گزینه Preferences رو انتخاب کنید و بعدش گزینه Code coloring رو انتخاب کنید،توی اون بخش شما زبان های مختلف (Document type) رو میبینید که با انتخاب زبان مورد نظر و انتخاب گزینه Edit Coloring Scheme می تونید رنگ بندی دلخواه رو برای کد مورد نظر اعمال کنید.

......

از cs4 استفاده میکنم.
اگه میشه بگین تنظیمات موردنظر کدوم قسمته

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.