در جلسات قبل شما با بخش هدر و استايل قالب هاي تبيان اآشنا شديد در بخش شما را با بخش هايي مهم استايل و همينطور قسمت بدنه قالب آشنا مي كنم
خوب دوستان مثل هميشه وارد سايت زير بشويد و كدهاتون را در قسمت بالاي اون بنويسيد تا نمونه قالبتون در ستون پاينش نمايش داده بشه اين كار سرعت شما رو بالا مي بره
http://htmledit.squarefree.com
ساخت يك بلاك يا ستون
دوستان عزيز فرض كنيد مي خواهيد يك ستون براي موضوعات وبلاگتون ايجاد كنيد
من سعي مي كنم بخش هاي ايجاد اين ستون را با مثال قالب هاي تبيان براتون بزنم
خوب اول كدهاي اصلي كه بهشون مي گن html رو وارد مي كنيم
<html>
<head>
<style>
محل قرار گيري كدهاي تنظيمات ستون
<style/>
<head/>
<body>
محل قرار گيري كدهاي ستون براي نمايش در وبلاگ
<body/>
<html/>
همونطور كه مي بينيد كدهاي ستون ها در دو بخش style و body قرار مي دهيم
خوب حالا ما مي خواهيم يك ستون مثل عكس بالا ايجاد كنيم
اول در قسمت body يك متن به نام دسته ايجاد مي كنيم
<p1>دسته</p1>
حالا دوتا متن ديگه هم اضافه مي كنيم
<p2>موضوع اول</p2>
<p3>موضوع دوم</p3>
خوب حالا بايد بهشون استايل بديم
همونطور كه در تصوير بالا مي بينيد من براي هر بخش يك رنگ گذاشتم مثلا" رنگ سبز مي شه بالا سمت چپ
ستون ها از سه بخش تشكيل مي شه بالا وسط پايين
در قالب هاي تبيان يكم سخت تره چون قسمت بالايي دوباره از سه قسمت راست وسط وچپ تشكيل مي شه
قسمت پايين هم مثل بالا سه بخش داره ولي وسط ستون كه متن هامون قرار مي گيرند يك بخش داره
به اين ترتيب در مجموع شما بايد براي هفت قسمت استايل بنويسيد
خوب اول من شما را با چندلغت ساده انگليسي آشنا مي كنم
up يعني بالا
down يعني پايين
right راست
center وسط
left چپ
خوب اول استايل قسمت بالا
.Up{width:174px;}
width محل قرار گيري اون در صفحه وبلاگ دقت كنين اين عرض خود ستون نيست
بلكه ما داريم محل قرار گيري ستون رو مي نويسيم
حالا اگه يه وقت بخواهيد ارتفاع اون رو تغيير بدهيد بايد height را كم يا زياد كنيد
خوب حالا مي خواهيم يك گوشه براي بالا و سمت راست ستون وبلاگمون ايجاد كنيد
.Up .RightImage{float:right;background-color:#900;width:21px;height:36px}
همونطور كه در كد مي بينيد يك گوشه در سمت راست ستون به رنگ قرمز ايجاد مي شه اگه خواستيد بجاي رنگ
عكس بگذاريد بجاي
backdround-color:#900;
بنويسيد
background:url(http://آدرس اينترنتي عكس شما.jpg);
خوب دوستان شايد سوال بشه flot:right در كد بالا چيست ؟
<div class="CenterImage"><p1>دسته</p1></div>
<div class="LeftImage"></div>
</div>
<div class="Left"><p2>موضوع اول</p2></div>
<div class="Left"><p3>موضوع دوم</p3></div>
<div class="RightImage"></div>
<div class="CenterImage"></div>
<div class="LeftImage"></div>
</div>
<head>
<style>
.Up{width:174px;}
.Up .RightImage{float:right;background-color:#900;width:21px;height:36px}
.Up .LeftImage{float:right;background-color:#900;width:21px;height:36px}
.Up .CenterImage{float:right;background:#C32838;width:132px;height:31px;line-height:25px;font-family:Tahoma;font-size:11px;font-weight:600;color:#000;text-align:center;padding-top:5px}
.Bottom{width:174px;text-align:right;background:#EE2631;}
.Left ,.Left a{text-decoration:none;font-family:Tahoma;font-size:11px;color:#FFF;line-height:29px}
.Down{width:174px;}
.Down .RightImage{float:right;width:21px;background:url(http://Img.tebyan.net/TS/Persian/Weblog/Theme/weblog204/images/MFooterRight.jpg);height:15px;line-height:14px}
.Down .CenterImage{float:right;width:132px;background:#EE2136;height:15px;line-height:14px}
.Down .LeftImage{float:right;width:21px;background:url(http://Img.tebyan.net/TS/Persian/Weblog/Theme/weblog204/images/MFooterLeft.jpg);height:15px;line-height:14px}
</style>
</head>
<body>
<div class="Up">
<div class="RightImage"></div>
<div class="CenterImage"><p1>دسته</p1></div>
<div class="LeftImage"></div>
</div>
<div class="Bottom">
<div class="Left"><p2>موضوع اول</p2></div>
<div class="Left"><p3>موضوع دوم</p3></div>
</div>
<div class="Down">
<div class="RightImage"></div>
<div class="CenterImage"></div>
<div class="LeftImage"></div>
</div>
</body>
</html>
.: RASEKHOON.NET:.
