با سلام دوباره خدمت شما دوستان و هواداران تک پی سی که ما رو همیشه با نظرات خوبتون دلگرم می کنید.راستش قبل از پرداختن به آموزش می خوام ی درد دلی بکنم و اون اینکه یک چند وقتی هست که مثل اینکه یکسری سایت ها و وبلاگ ها امدن به سمت قالب سازی این جور چیز ها خوب تا اینجا موردی نیست ولی وقتی می بینی طرف میاد کلا سایت تو رو کپی میکنه این واقعا زوره
آخی یکی نیست بگه آخه بابا تو که قالب سایت خودت رو خودت نمیتونی بسازی و از این و اون کپی می کنی تو رو چه به قالب ساخت برای بقیه.
حالا بگذریم بریم سروقت آموزش:در دو جلسه قبل با دو موضوع آموزش
کلی قالب سازی و
چگونگی کار با برنامه فتوشاپ توضیح دادم حالا بریم سراغ طراحی استیل و قالب سایت به صورت html.
اول من یک چیزی رو بگم واون اینکه شما کدهایی که یک سرویس وبلاگ دهنده میده مثل تگ
<-BlogAndPostTitle-> که این کد برای نمایش اسم سایت رو مثلا بهترین و جدیدترین قالب ساز بلاگفا رو نشون میده رو با کدهای html قاطی نکنید شما در اول اصلا لازم نیست از این سری تگ ها استفاده کنید.شما در ابتدا فقط برای طراحی به کدهای
<div> و در بعضی موارد به
<table> نیاز دارید.بگذارین براتون یه مثال بزنم شما مثالا الان گرافیک سایت رو آماده کردین و حالا میخواین اونو html کنید برای این کار شما اول باید یه تگ
<div> بزارین برای اینکه چهار چوپ سایت رو بسازین منظور از چهار چوب اینکه کل سایت در درون اون باشه
یک نکته :تگ با این <div> شروع و با <div/> تمام میشود شما می توانید به تعداد نامحدودی تگ <div/><div> در بین اونها قرار بدید برای مثالا شما برای ساخت قسمت منوی آرشیو وبلاگ به 3 تگ نیاز دارید یک تگ به عنوان بدنه, یک تگ برای نمایش عنوان منو و یک تگ برای نمایش آرشیو.
نکته : شما میتوانید برای هر <div> استیل تعریف کنید(یعنی اینکه رنگ خط اطراف منو یا همن بوردر یا عکس پس زمینه عنوان برای اون بسازید.)
تعریف استیل به 2 صورت انجام میشود.
1-ساده ترین حالت اضافه کردن استیل به تگ <div> به این صورت است که استیل ما بین تگ قرار می گیرد مثل زیر:
<div style="FLOAT:right;WIDTH:135px">
2-ساخت آیدی و کلاس و نسبت دادن آن به تگ <div> :به این صورت می باشد که برای تگ یک اسم به عنوان آیدی و یا کلاس تعریف میکنیم و بعد استیل آن رو به جای اینکه در بین تگ<div> قرار دهیم در بین تگ <head></head> در بالای سایت قرار میدهیم برای راحتتر شدن مطلب به مثال زیر توجه کنید:
نکته تمام استیل ها مابین <style></style> قرار میگیرد.
مزایای روش دوم نسبت به اول:شما درمورد های تکراری لازم نیست دوباره استیل تکراری بنویسید که مثلا برای ساخت منوی آرشیو و پیوندها و یا لینکدونی میتوانید از یک دایو و استیل استفاده کنید منتها بجای قسمت عنوان آرشیو میگذارید لینکدونی یا هر چیزی که بخواهید و همین طور درقسمت تکست بجای کدهای آرشیو کدهای لینکدونی رو میگذارید.
حالا بیا یک بار دیگه همون منو آرشیو رو بسازیم.
1.سه تا <div> می سازیم با اسم های :
1-1.دایو اول که به عنوان بدنه به کار می ره <div class=bodymenu></div>
1-2.دایو دوم که عنوان منو هست <div class=topmenu>منوی آرشیو</div>
1-3.دایو دوم برای قرار گیری آرشیو در منو <div class=Textmenu><کدهای شما></div>
نکته:چون دایو bodymenu به عنوا بدنه بکار میره نیازی به نوشته مابین تگ نیست.
نکته:نوشته و کدهای خود را باید ما بین تگ های دایو قرار دهید.
نکته:دایو های topmenu و Textmenu باید مابین دایو bodymenu قرار گیرد.
<head>
<style>
<!--
.bodymenu{width:690px;height:60px}
.topmenu{width:690px;height:60px}
.Textmenu{width:690px;height:60px}
-->
</style>
</head>
<body>
<div class=bodymenu>
<div class=topmenu>منوی آرشیو</div>
<div class=Textmenu><کدهای شما></div>
</div>
<body/>
<html/>
خوب امیدوارم این مطلب رو بخوبی یادگرفته باشید نظر یادتون نره که همین نظرات شما ست که باعث دلگرمی ماست.
زکات علم آموختن آن به دیگران است.
