• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

ساخت قالب3ستونه-آموزش جامع

S

sky boy

متخصص بخش برنامه نویسی

با سلام خدمت دوستان
بدون حاشيه و مقدمه ميخوايم ساخت قالب سه ستونه براي سرويس بلاگفا رو با هم قدم به قدم
جلو بريم طوري که قول ميدم اگه فکر و حواستون اينجا باشه در پايان براي هميشه مستقل
قالب خواهيد ساخت با پيش فرض قرار دادن همين قالب ابتکار هم ميتونيد بخرج بديد.
​
گفتم پيش فرض !بله اين قالب که ميسازيم طبق استانداردهاي وب نويسي خواهد بود و تماما سعي کردم که بدون کم و کاست باشه
نکات رو توضيح ميدم و بعضي ها شايد توضيح داده نشن که اگه براتون سوال شد بگيد تا شفاف سازي کنم

سخت نگيريد ، براي شروع حتي نادپد هم خوبه ولي با یه برنامه که مثله میز کارتون باشه خب بهتره
و من برنامه htmlpad رو براي شروع توصيه ميکنم يا هر برنامه اي که دوست داريد ! خوبي اين برنامه ها يکيشون اينه که کدهاي

مختلف وب رو با رنگ خاصي نشون ميدن و ... به هر حال اینجا جزیی ترین سوالات هم جواب داده میشه




يه قالب 3ستونه عرض استانداردش رو ميتونيم 980 انتخاب کنيم(980 پيکسل)
​
پس موارد لازم برای کار که باید از قبل بفکرشون باشیم و آماده کنیم تا راحت تر بتونیم کار کنیم :
عکس هدر:یه عکس در اندازه 980 عرض به سلیقه خودتون 200 الی 250 معقوله ولی بیشتر هم باشه ایراد نداره ولی حرفه ای نیست
نیاز نیست که همین الان برید دنبال هدر اصلی که میخواید ،موقتا یه عکس ساده و هر شکلی که بود:خنده2:
در اندازه گفته شده آماده کنید در فواصل کار که اشاره میکنم میتونید تغییر بدید فقط عکس رو عوض کنید و عکس اصلی که میخواید بذارید چیزی تغییر نمیکنه!

براتون یه عکس ساده پیوست کردم 200×980 موقتا خوبه




​
 

پیوست ها

  • Heder.jpg
    Heder.jpg
    20.8 کیلوبایت · بازدیدها: 4
S

sky boy

متخصص بخش برنامه نویسی

مهم ** قبل از هر چیز یه پوشه بسازید و تمام مطالب و عکسها که برای قالب هستند رو ذخیره کنید

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


**دقت کنید به این قسمت که میگم:**
1-عکس اول بالای کادر ما قرار میگیره -اندازه اش 50 × 210 با پاینت ویندوز ساختمش خیلی ساده شما هم میتونید
میتونید 50 رو بیشتر کنید ولی 210 اصلا نباید تغییر کنه(من تو آموزش210 در 50 ذکر میکنم)
یا اگر در جایی چیز دیگه ای سراغ دارید و.. به خودتون بستگی داره ولی اندازه همینی که گفتم باشه یا ادیتش کنید
موقتا همین رو هم میتونید دستکاری کنید یا تغییر رنگ بدید بعدا سر فرصت عکس رو عوض کنید
نکته:به حاشیه عکس نگاه کنید!!این حاشیه در لابه لای کادرهای شماست پس میتونید تیره کنید یا هر طور که خواستید
52577b8a921.png

اسم این عکس یا عکس انتخابی خودتون برای این رو بذارید sid1
sid مخفف سایدبار هست و زمانی که داریم قالب رو میسازیم وقتی گفتم جای sid1 اینجاست انوقت این رو باید بذارید



2-یه عکس باریک برای میانه کار 6 × 210 یا 7 یا 8 همین جورها خوبه ولی 210 باید میزون باشه(این هم حاشیه داره ولی اینجا دیده نمیشه)


83e0b248e41.png

اسم این عکس رو بذارید sid2




3- ودر پایان کادر عکسی که اسمش رو sid3 میذاریم
25×210
میتونید 25 رو بیشتر کنید ولی 210 اصلا نباید تغییر کنه(من تو آموزش210 در 25 ذکر میکنم)
33dba8f5982.jpg


توضیحات:سعی کنید طرحی که در آخر میذارید در خور مطالبتون باشه و به کنتراست رنگ ها هم توجه کنید تا یکنواخت نباشند و زیاد متفات هم نباشند
به حاشیه دقت کنید و ازش غافل نشید!!!مثلا من اگه این 3 عکس رو پشت سر هم بذارم خط حاشیه ها باید مساوی باشند:

52577b8a921.png


83e0b248e41.png


33dba8f5982.jpg


52577b8a921.png

83e0b248e41.png

33dba8f5982.jpg


خب حالا 3عکس sid1-2-3 و عکس هدر هم که داریم همه رو سیو کنیدتا آخرین چیزی که مورد نیاز هست رو هم اماده کنیم..
​

 
آخرین ویرایش:
S

sky boy

متخصص بخش برنامه نویسی
حالا کادر پست رو هم باید 3 تا عکسش رو بسازیم
دیگه توضیح نمیدم بالا رو اگه خونده باشید باید این رو هم بدونید

1-عکس بالای کادر پست 67×540

67 رو میشه تغییر بدید ولی 540 اصلا نباید تغییر کنه(من تو آموزش540 در 67 ذکر میکنم چون عکسی که اینجا گذاشتم 67 بوده)


33dba8f5983.png

اسمش رو بذارید post1

2-عکس میانی و اسمش رو post2 بذارید

post2.png




3-و پایین کادر پست اسمش رو که باید بدونید چی میشه post3

be632708a81.png


توضیحاتی که در پست قبلی دادم برای کادرها ،اینجا هم رعایتش کنید
​
 

پیوست ها

  • post1.png
    post1.png
    2.3 کیلوبایت · بازدیدها: 0
  • post2.png
    post2.png
    976 بایت · بازدیدها: 0
  • post3.png
    post3.png
    2.4 کیلوبایت · بازدیدها: 0
S

sky boy

متخصص بخش برنامه نویسی
خب کار رو شروع میکنیم
خب کسانی که از نادپد استفاده میکنند،میدونید که چطور سیو کنید درسته؟سیو اس رو میزنید و نام دلخواه .html بذارید و گزینه txt رو allfile قرار بدید تا بصورت
صفحه وب ذخیره بشه اگر هم واضح تر خواستید بگید تا تصویری نشون بدم!

برای شروع این کدها رو سیو کنید ودر پایین توضیحش رو بخونید
​




<!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" />
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription->" />
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->,photo,image,wallpaper" />
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
<title><-BlogAndPostTitle-></title>
<style type="text/css">
خالی بذارید
</style>
<script type="text/javascript" language="javascript">
<!--
function GetBC(lngPostid) {
var intTimeZone="<-BlogTimeZone->", strBlogId="<-BlogId->", intCount=-1, strResult="";
try {
for (i=0;i<BlogComments.length;i+=2) {
if (BlogComments==lngPostid)
intCount=BlogComments[i+1] ;
}
} catch(e) {}
if (intCount == -1) strResult="آرشیو نظرات";
if (intCount == 0) strResult="نظر بدهید";
if (intCount == 1) strResult="یک نظر";
if (intCount > 1) strResult=intCount + " نظر";
var strUrl = "http://commenting.blogfa.com/?blogid=" + strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone;
var strResult = "<a href=\"javascript:void(0)\" target=\"_self\" onclick=\"javascript:window.open('"+strUrl+"','blogfa_comments','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,width=500px,height=500px')\" >"+strResult+"</a>" ;
document.write(strResult);
}
function OpenLD() {
window.open('LinkDump.aspx','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px');
return true; }
// -->
</script>
</head>
<body >
تمام چیزهایی که در صفحه دیده میشه در اینجا هست(نوشته من رو پاک کنید)
</body>
</html>

​

قسمتی رو که رنگ بنفش پررنگ میبینید متا تگها هستند که بسیار نقش مهمی دارند.متا تگهای بیشتری وجود دارند و مطالب در موردشون هست در انجمن ،ولی من واجب ها رو گذاشتم

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

این متا تگ بسیار واجبه برای پشتیبانی از زبان فارسی

<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription->" />

در این متا تگ توضیح کوتاه از اونچه که در وب شما موجوده میتونید بذارید یا همینی که گذاشتم <-BlogAndPostTitle-> - <-BlogDescription-> این ها "بلاک"های بلاگفا هستند من پیش فرض بلاگفا رو قرار دادم تا خودکار قرار بگیرند

<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->,photo,image,wallpaper" />

متا تگ کی ورد خیلی مهمه و میتونید کلمات کلیدی که در وب شما موجوده رو خودتون قرار بدید برای مثال از بلاک های بلاگفا استفاده کردم و فرض بر اینکه وبلاگ عکس داریم 3تا کلمه کلیدی گذاشتمphoto,image,wallpaper توجه کنید که بین کلمات از , استفاده باید بشه و تعداد بیشتر و صحیح بذارید و کلمات دروغین بکار نبرید

این رو هم که با رنگ روشن تر گذاشتم
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />

rss هستش و پیش فرض بلاگفا رو قرار دادم

قسمتی رو سبز رنگ گذاشتم
<style type="text/css">
خالی بذارید
</style>

اینجا استایل های خودمون رو تعریف میکنیم ،به هیچ وجه چیزی ننویسید داخلش و به موقع میگم که چکار باید کرد در اینجا از زبان css استفاده میشه وبسیار دلپذیره:خنده2:

قسمت قرمز رنگ رو هم دستی نزنید بهش !! اسکریپت پیش فرض بلاگفا برای نظر دادن بازدید کنندگانه و این پایینی که گذاشتم جاییه که باهاش سرو کار داریم

<body >
تمام چیزهایی که در صفحه دیده میشه در اینجا هست(نوشته من رو پاک کنید)
</body>


اگر میخواید پس زمینه وب شما که پیش فرض سفیده، رنگی داشته باشه این طوری بذارید

<body bgcolor="#000000">

</body>


نکته:در تمامی قسمتهایی که مقداری رو تعریف میکنیم در html اول و آخر مقدارمون " هست مثله الان "#000000"که من کد رنگ سیاه رو گذاشتم،پس " مهمه
(کد رنگها رو براحتی میتونید پیدا کنید توی آفیس هم موجوده)برای قرمز FF0000 برای آبی0000FF سبز روشن00FF00 و..

و اگه عکس میخواید بذارید پس زمینه صفحه اینطوری بذارید


<body background="link.jpg">

</body>


سوالی بود بگید در غیر اینصورت میریم جلو


 
آخرین ویرایش:
S

sky boy

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

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

<!-- اینجا -->

حالا من وقتی کد مربوط به هدر رو میذارم مثلا:اول کد و آخرش کامنت میذارم

<!--شروع هدر -->
کدهای هدر
<!--پایان هدر -->


یا


<!--شروع سایدبار چپ -->
کدهای سایدبار چپ
<!--پایان سایدبار چپ -->


پس با کامنت آشنا شدید،ولی به مرور زمان که کدهای خودتون رو شناختید و مشکلی نداشتید برشون دارید
یا یه کم حرفه ای ترش کنید مثلا


<!--header weblog -->
کدهای هدر
<!--End header weblog -->

​
 
S

sky boy

متخصص بخش برنامه نویسی
نکته دوم: تعریفها یا class که در کد style میگم و میذارید بر پایه زبان CSS هستش و به
نکاتی در مورد نحوه نوشتنش(هر چند من آماده بهتون میدم و شما زحمتی براش نخواهید داشت)فقط بدونید که از چه قراره:

داخل کد style (همون که در چند پست قبل براتون سبز رنگ گذاشتم ) کلاس مورد نظر نوشته میشه بعد تمامیه
تعاریف داخل یه آکولاد { } قرار میگیره ، بعد هر تعریف این علامت : و بعد از نوشتن مقدار حتما و حتما باید این علامت بشه ; تمام
اگه استایلها رو فشرده بذارم یعنی پشت سر هم ممکنه فک کنید این دیگه چیه به همین خاطر بصورت باز و سمبلیک تر میذارم
این نمونه رو ببینید و تو ذهنتون داشته باشید

attachment.php


دیگه نکات تمام و از پست بعد نوشتن کدها رو آغاز میکنم


2013-01-18_205015.jpg

​
 
S

sky boy

متخصص بخش برنامه نویسی
خب شروع میکنیم ;

کدی که در پست 4 گذاشتم رو که سیو کردید باز کنید و درون تگ body این کدها رو اضافه کنید و سیو کنید بعد در پایین توضیحاتش رو هم ببینید



<!-- شروع هدر -->
<table width="980" height="200" background="header.jpg" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="35">



</td>
</tr>
<tr>
<td>

<table width="980" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="537" height="60" class="TitleWeblog"><-BlogTitle-></td>
<td width="443" > </td>
</tr>
<tr>
<td height="30" class="AboutWeblog"><-BlogDescription-></td>
<td> </td>
</tr>
</table>

</td>
</tr>
</table>
<!-- پایان هدر -->

​
کد مربوط به هدر هستش که درون تگ table قرار دادم و همونطور که میبینید کامنت گذاشتم در اول و آخرش که توضیح دادم و باید بدونید و توجه کنید که width 980 گذاشتم که عرض استانداردمون از ابتدا بوده و هست و height رو 200 گذاشتم
این بستگی به عکس هدر هم داره که من عکسی که پیوست کرده بودم 200 در 980 بود پس عکستون هر ارتفاعی داره اینجا باید مطابق بشه
background هم مقدارش باید لینک عکس هدر باشه که من header.jpg گذاشتم تا حواستون باشه
align=center موقعیتش در وسط صفحه و border و مابقی مربوط به خطوط دور عکس هستش که مقدارشون رو 0 گذاشتم تا به هیچ عنوان خطی دور عکس قرار نگیره

دو کد آبی و قرمز میبینید که اون رنگش کردم تا متوجه بشید چی هستندclass=TitleWeblog استایلی که قراره بهتون بگم در ادامه و قرارش بدید در کد style که برای عنوانه وبلاگه
که عنوان وبلاگ اینه <-BlogTitle-> این بلاک پیش فرض بلاگفا هست که خودش عمل میکنه حتی میتونید خودتون عنوانتون رو قرار بدید
و class=AboutWeblog استایلی که بهتون میگم در ادامه برای توضیح وبلاگ که زیر عنوان قرار میگیره و بلاک مخصوص بلاگفا اینه <-BlogDescription->
خب نیازی به دست کاریش ندارید بغیر عکس هدر و class ها رو هم میذارم عجله نکنید و تا اینجای کار رو سیو کنید

 
S

sky boy

متخصص بخش برنامه نویسی
حالا بعد از هدر که یادم نبود یه منو هم میذاریم ولی خب الان میگم،بعد هدر یه منو که پس زمینه اش میشه رنگ گذاشت ولی من یه عکس میذارم
برای نمونه شما هم میتونید ار هر چیز مناسبی استفاده کنیددر همون عرض 980 و ارتفاع 40 مناسبه ولی به میل خودتون میتونید بیشترش کنید
که مطابقش عکس هم باید همون مقدار باشه!
این عکسی که پیوست کردم

Menu.jpg
حالا در ادامه ی کدهایی که در بادی گذاشتیم(که آخرین کامنت پایان هدر بود)در ادامه اش کد پایین رو قرار بدید

​



<!-- شروع منو -->
<table width="980" class="HeaderMenu" background="menu.jpg" height="40" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<td> </td>
<td width="75"><a href="<-BlogXmlLink->" >RSS</a></td>
<td width="75"><a href="<-BlogProfileLink->" >پروفایل</a></td>
<td width="75"><a href="ymsgr:sendIM?<-BlogEmail->" >تماس با مدیر</a></td>
<td width="90"><a href="/posts" >عناوین مطالب</a></td>
<td width="80"><a href="لینک وب شما" >صفحه اصلی</a></td>
<td> </td>
</tr>
</table>
<!-- پايان منو -->

​
توضیحات:
از کامنت در ابتدا و آخر کد استفاده کردم
برای منو از کلاس استفاده کردم که در بالا رنگ آبی مشخصه(در پست بعد کلاسهایی که تا الان گفته شد رو میذارم) بک گراند هم لینک عکس مونه
نقاط قرمز رنگ بلاک های مربوطه بلاگفا هستند که خودشون عمل میکنند rss- پروفایل و ایمیل که میتونید عنوان و لینکی خودتون به همین روش اضافه کنید به اینها
حال اینها رو هم که به کدهای قبل اضافه کردید سیو کنید تاclass هایی که تا الان گفتیم رو قرار بدیم


 
آخرین ویرایش:
S

sky boy

متخصص بخش برنامه نویسی
تا اینجای کار 3 تا class بکار برده شد
class=TitleWeblog

class=AboutWeblog

class=HeaderMenu

+
کلاسی که برای بادی میخوام قرار بدم.
خب برید به داخل کد style و داخلش این کدها رو کامل کپی و درونش پیست کنید و در پایین توضیحاتش رو بخونید



body {
margin:0px;
padding:0px;
}
.HeaderMenu {
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
font-size: 13px;
color: #FFFFFF;
text-align: center;
}
.HeaderMenu a{
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
font-size: 13px;
color: #FFFFFF;
}
.HeaderMenu a:hover{
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
font-size: 13px;
color: #FF0000;
}
.TitleWeblog {
font-family: Georgia, Times, serif;
font-size: 30px;
color: #FFFFFF;
text-align: center;
direction: rtl;
}
.AboutWeblog {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #000000;
text-align: center;
direction: rtl;
}


​
برای body مقدار margin و padding برابر با 0 گذاشتم این دو برای حاشیه های کناری و دور هستند که 0 گذاشتم تا ایجاد نشند
بعدش HeaderMenu که آبی رنگ کردم تا مشخص بشه برای منو هستش دومی HeaderMenu a که a نشانه لینکه یعنی لینکهای موجود در هدر منو
وHeaderMenu a:hover که a:hover یعنی زمانی که موس روی لینک قرار داره،داخل هر کدوم تعریفهایی گذاشتم پیش فرض و خودتون میتونید تغییر بدید
font-family: Tahoma, Geneva, sans-serif برای فونت که 3تا گذاشتم(در صورت عمل نکردن فونت بعدی عمل میکنه برای بازدید کنندگان وب که فونت مورد نظر در سیستمشون نباشه
و با , جدا کنید-text-decoration رو none گذاشتم که به هیچ وجه زیر لینک خط دار نشه-فونت سایز که مشخصه 13 گذاشتم و color هم رنگ فونته که لینک رو سفید و a:hover رو قرمز گذاشتم
گزینه های دلخواه میتونید بهش اضافه کنید(در صورتی که نمیدونید بگید تا جزیی تر بگم)
TitleWeblog برای عنوان وAboutWeblog برای توضیح وبلاگه که قرمزشون کردم برای مشخص بودن دیگه میدونید فونت- سایزش-color هم رنگ فونت که دلخواهشون کنید فقط direction رو بگم که میشه سمن نوشتار
کهrtl گذاشتم راست به چپ برای چپ به راست ltl بذارید و text-align هم برای موقعیت نوشته هست که وسط گذاشتم
بعد از وارد کردن سیو کنید تا بریم سراغ ادامه صفحه
 
S

sky boy

متخصص بخش برنامه نویسی
خب دوستان اگه میبینید که آموزش نیمه کاره مونده دلیل موجه ای داشته بزودی ادامه اش رو کامل میکنم
​
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا