[AMV] چگونه برای وب خود قالب بسازیم ؟

[bita_r]

مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمهاین مطلب برای دوستانی هست که علاقه دارند برای وب خود قالب طراحی کنند
یکی از راه های ساخت قالب استفاده از سايت هایی مانند pichak.net است که در ان جا میتوان به صورت انلاین قالب طراحی کرد.
راه ديگر برای ساخت قالب :بعضی از قالب ها هستند که وقتی کد ان ها به شما داده میشود کد یک عکس در ان نوشته شده است شما میتوانید با اپلود یک عکس و کوپی کردن کد ان و گذاشتن ان به جای ان کد عکس پس زمینه یه قالب یا هر عکسی که در قالب هست را عوض کنید.

[bita_r]

يكي ديگر از راه هاي ساخت قالب براي وب استفاده از نرم إفزار هايي است كه برأي وب قالب طراحي ميكنند اما مطمئن باشيد كه هيچ كدام از اين نرم إفزار ها نميتوانند برأي شما قالبي طراحي كنند بسياري از سايت ها هستند كه شما ميتوانيد در ان جا قالب طراحي كنيد ولي نه به صورت رايگان بلكه بأيد برأي ساخت ان مبلغي پرداخت كنيد من به شما پيشنهاد ميكنم از سايت فارسي avazak.ir اين كار را انجام بديد زيرا سايت معتبري است قبل از پرداخت مبلغ برأي ساخت قالب اول اطلاعاتي از ان سايت بدست أوريد دوم اينكه مطمئن باشيد سايتي كه به ان مبلغي پرداخت ميكنيد معتبر بأشد سومن اگر ديديد مبلغ زيادي بأيد بابت ساخت يك قالب پرداخت كنيد ان را قبول نكنيد زيرا ممكن است ان سايت مبلغ زيادي از شما بگيرد و قالبي بدون امكانات به شما بدهد و اين به سود شما نيست.

[diablo]

ای بابا شرط می بندم از این هیچ کس هیچی نفهمه  چنتا اموزش درست حسابی دارم پیدا کردم میارم

[diablo]

این اموزش از یه وبلاگ کپی کردم حرف خودم تو ایناس { }

آموزش ساخت قالب وبلاگنیازی به مقدمه چینی و یادگیری جزئیات نیست...مطمئن باشید آخر این آموزش همتون میتونید قالب شخصی داشته باشید...پس با من پیش بیایید...
در ابتدا باید کمی فتوشاپ بلد باشید...هرچی حرفه ای تر باشد قالبتون خوشگل تر میشه...نرم افزار Macromedia Dreamweaver 8.0.1 و یا ورژن های بالاترش هم لازمه. {من با نرم افزار notepad کارم را افتاد فرقی نداره }

مرحله اول...
 ابتدا باید یک قالب مناسب رو از سایت هایی که قالب وبلاگ ارائه میدند انتخاب کنیم...(هر کس باید متناسب سرویس دهنده خودش قالب مربوطه رو انتخاب کنه،مثلا اونی که بلاگ اسکاییه باید از بین قالب هایی که مخصوص بلاگ اسکای هستش ،قالبی رو انتخاب کنه)مثلا از این سایت ها می تونید تهیه کنید

www.themzha.com

www.sibtheme.com

www.pichak.net

www.iranskin.com

www.weblogskin.com

مرحله بعد اینه که وارد نرم افزار دریم ویور بشید و از منو html رو انتخاب کنید و تمام نوشته هایی که در قسمت code به صورت پیش فرض نوشته رو پاک کنید و کد قالبی که از سایت قالب گرفتید رو اونجا paste کنید...
من برای نمونه این قالب رو از سایت سیب تم گرفتم...
مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمه

و کد اونرو به این صورت در دریم ویور وارد کردم:

 

مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمه

 

مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمه

خب حالا از سطر اول کد دنبال عبارت زیر یا مشابه اون یگردید...

این عبارت مربوط به استایل شیت قالب نمونه ایه که من انتخاب کردم ...برای شما هم مشابه همینه...

برای من از بالا شانزدهمین خط بود...
مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمه

خب توی این خطی که ما کشفش کردیم یه فایل وجود داره...نه؟

 

http://www.sibtheme.com/theme/99/m.css" type="text/css" rel="stylesheet">

 

این فایل رو  با دانلود منیجر دانلودش کنید

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

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

 

من اینکار رو کردم و این کدیه که از اون فایل دانلودی که نامش css هست به دست اومده...

body{margin:0;font-family: Tahoma;background:#efe5c0}
.Back-RM{width:1000;background:#ffffff}
A {TEXT-DECORATION: none; }

#Header-RM{width:1000;background:url('m.jpg') no-repeat top;height:350;vertical-align:top;direction:rtl;}
#Header-RM a{color:#1c4063;margin:0 6}
#Header-RM a:hover{color:#fcf5f9;}

#BlogTitle{color:#38383c;text-align:right;font-size:20pt;font-weight: bold;padding:60 30 0 0;font-family:Times New Roman;}
#BlogDescription{padding:0 30 0 0;direction:rtl;font-size:10pt;color:#38383c;text-align:right;}

.TopMenu{color:#daebf2;font-size:10pt;padding:144 70 0 0;text-align:right;}

.TopPost{width:540;height:68;background:url('post1.gif') no-repeat top right;direction:rtl;text-align:right;
font-size:8pt;}
.TopPost a{color:#38383c}
.TopPost2{padding:29 75 0 20;}
.CenterPost{width:540;background:url('post2.gif') repeat-y right;direction:rtl;text-align:right;color:#333333;font-size:8pt;;overflow:hidden}
.CenterPost2{padding:10 15 10 15}
.LowPost3{width:540;background:url('post3.gif') no-repeat top right;height:68;text-align:right}
.CPost3{padding:35 30 0 0}
.CenterPost a{color:#755f16}

.date{width:350px;float:right;direction:rtl;font-size:8pt;color:#243d3c;}
.date a{color:#2b3d20;}
.date a:hover{color:#fff;}
.Comment{width:120px;float:left;direction:rtl;font-size:8pt;color:#2b3d20;text-align:center;}
.Comment a{color:#2b3d20;}
.Comment a:hover{color:#755f16;}
.Comment{padding:0 0 0 10}

#rightmenu{width:210;float:left;}
#leftmenu{width:210;float:right;}

.TopSid{width:210;background:url('sid1.gif') no-repeat top right;height:50;direction:rtl;color:#38383c;font-size:8pt;}
.TopSid2{padding:24 58 0 0;text-align:right}
.CenterSid{width:210;float:left;direction:rtl;color:#444444;font-size:8pt;background:url('sid2.gif') repeat-y right;}
.CenterSid a{color:#444444;}
.CenterSid a:hover{color:#755f16}
.li-Sid{padding:2 25 0 5;background:url(li.gif) 190px 6px no-repeat}
.li-Sid2 span{color:#1192b0;font-size:8pt;font-weight:bold}
.li-Sid2{padding:0 10 5 10;}
.LowSid{width:210;background:url('sid3.gif') no-repeat top right;height:27;float:right}

#Page-RM{width:100%;float:right;text-align:center;font-size:8pt;color:#dddddd;direction:rtl;}
#Page-RM a{color:#4ecdea;font-size:9pt;}
#footer-RM{text-align:center;background:url('footer.gif') repeat-x top;font-size:8pt;color:#2e313f;direction:rtl;height:50}
#footer-RM a{color:#2e313f}
#footer-RM a:hover{color:#755f16}
#footer-RM{padding:16 20 5 10;}

 

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



 

[td]

 

body{margin:0;font-family: Tahoma;background:#efe5c0}

.Back-RM{width:1000;background:#ffffff}
A {TEXT-DECORATION: none; }

#Header-RM{width:1000;background:url('m.jpg') no-repeat top;height:350;vertical-align:top;direction:rtl;}

#Header-RM a{color:#1c4063;margin:0 6}
#Header-RM a:hover{color:#fcf5f9;}

#BlogTitle{color:#38383c;text-align:right;font-size:20pt;font-weight: bold;padding:60 30 0 0;font-family:Times New Roman;}
#BlogDescription{padding:0 30 0 0;direction:rtl;font-size:10pt;color:#38383c;text-align:right;}

.TopMenu{color:#daebf2;font-size:10pt;padding:144 70 0 0;text-align:right;}

.TopPost{width:540;height:68;background:url('post1.gif') no-repeat top right;direction:rtl;text-align:right;
font-size:8pt;}
.TopPost a{color:#38383c}
.TopPost2{padding:29 75 0 20;}
.CenterPost{width:540;background:url('post2.gif') repeat-y right;direction:rtl;text-align:right;color:#333333;font-size:8pt;;overflow:hidden}
.CenterPost2{padding:10 15 10 15}
.LowPost3{width:540;background:url('post3.gif') no-repeat top right;height:68;text-align:right}
.CPost3{padding:35 30 0 0}
.CenterPost a{color:#755f16}

.date{width:350px;float:right;direction:rtl;font-size:8pt;color:#243d3c;}
.date a{color:#2b3d20;}
.date a:hover{color:#fff;}
.Comment{width:120px;float:left;direction:rtl;font-size:8pt;color:#2b3d20;text-align:center;}
.Comment a{color:#2b3d20;}
.Comment a:hover{color:#755f16;}
.Comment{padding:0 0 0 10}

#rightmenu{width:210;float:left;}
#leftmenu{width:210;float:right;}

.TopSid{width:210;background:url('sid1.gif') no-repeat top right;height:50;direction:rtl;color:#38383c;font-size:8pt;}
.TopSid2{padding:24 58 0 0;text-align:right}
.CenterSid{width:210;float:left;direction:rtl;color:#444444;font-size:8pt;background:url('sid2.gif') repeat-y right;}
.CenterSid a{color:#444444;}
.CenterSid a:hover{color:#755f16}
.li-Sid{padding:2 25 0 5;background:url(li.gif) 190px 6px no-repeat}
.li-Sid2 span{color:#1192b0;font-size:8pt;font-weight:bold}
.li-Sid2{padding:0 10 5 10;}
.LowSid{width:210;background:url('sid3.gif') no-repeat top right;height:27;float:right}

#Page-RM{width:100%;float:right;text-align:center;font-size:8pt;color:#dddddd;direction:rtl;}
#Page-RM a{color:#4ecdea;font-size:9pt;}
#footer-RM{text-align:center;background:url('footer.gif') repeat-x top;font-size:8pt;color:#2e313f;direction:rtl;height:50}
#footer-RM a{color:#2e313f}
#footer-RM a:hover{color:#755f16}
#footer-RM{padding:16 20 5 10;}

 

[/td]

خب نصف راهو اومدیم حالا باید این آدرس های ناقص رو کامل کنیم...

به این صورت:

اون فایل اولیه یادتونه؟...

 

http://www.sibtheme.com/theme/99/m.css" type="text/css" rel="stylesheet">

 با اضافاتش که کاری نداریم...پس اون ها رواک میکنیم...

 

http://www.sibtheme.com/theme/99/m.css

حالا این قسمتی که آبی میکنم رو بذارید قبل اون آدرس های ناقصی که گفته بودم...http://www.sibtheme.com/theme/99/m.css

من اینکارو کردم اینم نتیجه اش:

[td][td] 

body{margin:0;font-family: Tahoma;background:#efe5c0}
.Back-RM{width:1000;background:#ffffff}
A {TEXT-DECORATION: none; }

#Header-RM{width:1000;background:url('http://www.sibtheme.com/theme/99/m.jpg') no-repeat top;height:350;vertical-align:top;direction:rtl;}
#Header-RM a{color:#1c4063;margin:0 6}
#Header-RM a:hover{color:#fcf5f9;}

#BlogTitle{color:#38383c;text-align:right;font-size:20pt;font-weight: bold;padding:60 30 0 0;font-family:Times New Roman;}
#BlogDescription{padding:0 30 0 0;direction:rtl;font-size:10pt;color:#38383c;text-align:right;}

.TopMenu{color:#daebf2;font-size:10pt;padding:144 70 0 0;text-align:right;}

.TopPost{width:540;height:68;background:url('http://www.sibtheme.com/theme/99/post1.gif') no-repeat top right;direction:rtl;text-align:right;
font-size:8pt;}
.TopPost a{color:#38383c}
.TopPost2{padding:29 75 0 20;}
.CenterPost{width:540;background:url('http://www.sibtheme.com/theme/99/post2.gif') repeat-y right;direction:rtl;text-align:right;color:#333333;font-size:8pt;;overflow:hidden}
.CenterPost2{padding:10 15 10 15}
.LowPost3{width:540;background:url('http://www.sibtheme.com/theme/99/post3.gif') no-repeat top right;height:68;text-align:right}
.CPost3{padding:35 30 0 0}
.CenterPost a{color:#755f16}

.date{width:350px;float:right;direction:rtl;font-size:8pt;color:#243d3c;}
.date a{color:#2b3d20;}
.date a:hover{color:#fff;}
.Comment{width:120px;float:left;direction:rtl;font-size:8pt;color:#2b3d20;text-align:center;}
.Comment a{color:#2b3d20;}
.Comment a:hover{color:#755f16;}
.Comment{padding:0 0 0 10}

#rightmenu{width:210;float:left;}
#leftmenu{width:210;float:right;}

.TopSid{width:210;background:url('http://www.sibtheme.com/theme/99/sid1.gif') no-repeat top right;height:50;direction:rtl;color:#38383c;font-size:8pt;}
.TopSid2{padding:24 58 0 0;text-align:right}
.CenterSid{width:210;float:left;direction:rtl;color:#444444;font-size:8pt;background:url('http://www.sibtheme.com/theme/99/sid2.gif') repeat-y right;}
.CenterSid a{color:#444444;}
.CenterSid a:hover{color:#755f16}
.li-Sid{padding:2 25 0 5;background:url(http://www.sibtheme.com/theme/99/li.gif) 190px 6px no-repeat}
.li-Sid2 span{color:#1192b0;font-size:8pt;font-weight:bold}
.li-Sid2{padding:0 10 5 10;}
.LowSid{width:210;background:url('http://www.sibtheme.com/theme/99/sid3.gif') no-repeat top right;height:27;float:right}

#Page-RM{width:100%;float:right;text-align:center;font-size:8pt;color:#dddddd;direction:rtl;}
#Page-RM a{color:#4ecdea;font-size:9pt;}
#footer-RM{text-align:center;background:url('http://www.sibtheme.com/theme/99/footer.gif') repeat-x top;font-size:8pt;color:#2e313f;direction:rtl;height:50}
#footer-RM a{color:#2e313f}
#footer-RM a:hover{color:#755f16}
#footer-RM{padding:16 20 5 10;}

 [/td][/td]

[Princess Kimia]

کاری نداره من خودم میسازم
این سایتا همش چرته

[Shinoa]

(2015/04/19 10:21 PM)'Princess Kimia' نوشته شده توسط:  کاری نداره من خودم میسازم
این سایتا همش چرته

 

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