رنگارنگ ازدانستنیهای مفید

تاريخ : چهارشنبه 19 مهر 1391 | 1:41 AM | نويسنده : Mohammad ali Hajian

طراحی قالب سایت شماره 2 با HTML و CSS

آموزش طراحی سایت مرحله به مرحله
روز قبل طراحی قالب شماره 2 را در نرم افزار فتوشاپ مرحله به مرحله برای شما توضیح داده ام. امروز می خواهم قالبی که دیروز در فتوشاپ طراحی کرده بودم با Html وCss تبدیل به یک قالب سایت کنم .تفاوت این قالب با طراحی شماره یک این هست که می خواهم غیر از صفحه اصلی صفحات دیگر را نیز طراحی کنم .حتما بازدید کنندگانیکه از آموزش دیدن می کنند نظرات خودشان را برای ما ارسال کنند تا کیفیت آموزش در بخش پشتیبانی سایت سنجیده شود.

بسیار خوب در ابتدا
1. یک فولدر به نام tem2 ایجاد و دو فولدر با نام های Images وcss ایجاد کنید .
2. در مرحله بعد نوت پد را باز کنید یکبار فایل را با نام Index.html در پوشه اصلی ویکبار بانام Style.css درپوشه Css ذخیره کنید .

ادامه مطلب

نظرات 0

طراحی قالب سایت در فتوشاپ (قسمت اول)

تاريخ : چهارشنبه 19 مهر 1391 | 1:37 AM | نويسنده : Mohammad ali Hajian

طراحی قالب سایت شماره 2 در فتوشاپ (قسمت اول)

هفته پیش اولین آموزش طراحی سایت در محیط فتوشاپ و بعد تبدیل فایل PSD به HTML وCSS را به طور کامل یاد دادم.امروز می خواهم قالب شماره 2 را در محیط فتوشاپ طراحی کرده سپس روز بعد فایل PSD را تبدیل به فایل HTML ,CSS کنم . از علاقه مندان به طراحی وب سایت بعد از خواندن آموزش درخواست دارم تا نظرات خودشان را در قالب تیکت ارسال کنند تا اگر مشکلی وجود داره آن را رفع کنم. بسیار خوب می خواهم طراحی شماره 2 را در محیط فتوشاپ شروع کنم .

1. فتوشاپ را اجرا و یک صفحه به ابعاد 530×780 ایجاد کنید .

ادامه مطلب

نظرات 0

17روش شادزیستن

تاريخ : یک شنبه 16 مهر 1391 | 12:40 AM | نويسنده : Mohammad ali Hajian

ما با ارایه این مقاله قصد نداریم شما را مدام شاد نگاه داریم، بلکه بیشتر مایلیم تا به جای احساس ناراحتی ...

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

در حال زندگی کنید

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

بلند بخندید

پیش بینی احساس شادی، میزان هورمون "اندروفین" و هورمون های دیگری را که به خوشی و آرامش شما می انجامد افزایش می دهد و در عین حال تولید هورمون اضطراب را کاهش می دهد. دانشمندان دانشگاه کالیفرنیا 16 نفر را که همگی معتقد بودند، تماشای یک فیلم برای آنها خنده دار بود را مورد بررسی قرار دادند. سه روز قبل به نیمی از آنها گفته بودند که این فیلم کمدی است. این دسته از افراد قبل از تماشای این فیلم متوجه تغییرات بیولوژیکی در بدنشان شدند. وقتی به تماشای فیلم پرداختند، میزان هورمون اضطراب در بدنشان به طور چشم گیری کاهش یافت. این در حالی بود که میزان هورمون های شادی بخش افزایش داشت.

خوب بخوابید

بهتر است که روزانه برای مدتی کوتاه استراحت کنید و شب ها هم در حالی که کتاب می خوانید و حداکثر تا ساعت 10 شب، به رختخواب بروید و بخوابید. این راهکار برای بهبود خلق و خو و نیز چشم اندازتان نسبت به زندگی مؤثر است.

ادامه مطلب

نظرات 1

شروع آموزش طراحي قالب وب

تاريخ : یک شنبه 16 مهر 1391 | 12:35 AM | نويسنده : Mohammad ali Hajian

در اين قسمت از آموزش قصد دارم مهمترين قسمت از طراحي قالب براي وبلاگ تبيان را

توضيح بدهم كه بعد از اين آموزش مي توانيد راحت قالب هاي بلوگفا و پرشين بلوگ و ميهن بلاگ

... را براي تبيان تغيير بدهيد

براي مثال من يكي از قالب هاي سايت mytheme را مي خواهم تغيير بدهم

اينم لينك دريافت قالب

http://www.mytheme.ir/view_themes.php?no=40

اينم عكس قالب

شما هم مثل من قالب بلاگ اسكاي را انتخواب كنيد

دريافت قالب از عكس لينك دار زير

خوب دوستان وارد سايت زير بشويداين سايت دو قسمت بالا و پايين دارد

و كدها را در قسمت بالاي سايت وارد كنيد

http://htmledit.squarefree.com

نمونه قالب در پايين سايت نمايش داده مي شود

خوب دوستان حالا وارد پنل مديريتي وبلاگتون در تبلاگ تبيان بشويد و قسمت ايجاد قالب جديد

كليك كنيد

روي دكمه راهنما در عكس زير با رنگ قرمز مشخص شده كليك كنيد يك صفحه باز مي شود

براي نمايش بزرگتر عكس راست كليك + veıw ımage

يكسري تگ هاي اختصاصي تبلاگ رو شما مي بينيد كه بايد جايگزين تگ هاي بلاگ اسكاي كنيد

من اول يه توضيحي درباره اين تگ ها به شما مي دهم بعد مي رويم سراغ تغيير قالب

هر سيستم وبلاگدهي يكسري تگ اختصاصي دارد

مثلا" براي اينكه هربار از قسمت مديريتي وبلاگتون اقدام به تغيير نام وبلاگ كرديد اين عمليات

بر روي وبلاگ هم اعمال مي شود اگر از تگ هاي خود سيستم استفاده نكنيد عمليات ها اعمال

نمي شود

اين تگ ها مثل يك لينك عمل مي كنند

بعضي ها يك قسمتي هستند مثل <-BlogUrl-> آدرس وبلاگ و مارو به صفحه اول وبلاگ هدايت

مي كنه

بعضي ها دو قسمتي هستند كه يك قسمت آدرس لينك و قسمت ديگر متن لينك مثل تگ عنوان

مطلب ارسال شده

<-PostTitle-> متن يا تيتر پست

<-PostLink-> آدرس يا لينك پست

بعضي از اين تگ ها تگ شروع و پايان دارند مثلا" ستون يا بلاك آرشيو مثل زير است

<BlogArchive>

<-PageTitle-><-PageUrl->

<BlogArchive/>

خوب حالا مي روم سراغ تغيير قالب براي تبيان

تغيير منو قالب

به قسمت <body> كدهاي قالب بلاگ اسكاي برويد اين كدها را پيدا كنيد

<div class="s5">
<div class="s4 , text10"><a href="<BlogSky:Weblog URL />">صفحه نخست</a></div>
<div class="s4 , text10"><a href="<BlogSky:Weblog MobileHRef />" target="_blank">نسخه موبايل</a></div>
<div class="s4 , text10"><a href="<BlogSky:Weblog PostsHRef />">عناوين مطالب</a></div>
<div class="s4 , text10"><a href="javascript:void(0)" onclick="window.open('<BlogSky:Profile ContactHRef />','_blank','width=450, height=460, scrollbars=yes, resizable=yes');">ارتباط با ما</a></div>
<div class="s4 , text10"><a href="http://www.mytheme.ir" target="_blank">طراح قالب</a></div>
</div><a href="http://www.blogskin.ir" target="_blank">قالب وبلاگ</a></div></div>

اين كدهاي منوي قالب است اگر اين كدها را پيدا نكرديد كليدهاي ctrl + f را در كيبورد فشار دهيد

و در كادر كوچكي كه باز مي شود بنويسد صفحه نخست و اينتر را بزنيد

ما فقط بايد لينك ها را تغيير بديم مثلا"

اونجايي كه نوشته <BlogSky:Weblog URL /> ما تگ <-BlogUrl-> تبلاگ را جايگزين آن مي كنيم

خوب حالا اين لينك مطابق سيستم تبلاگ تنظيم شد

عناوين مطالب نقشه سايت طراح قالب مي توانيد متن ها شون رو تغيير بدهيد و لينك هاي دلخواه بگذاريد

براي ارتباط با ما مي توانيد از تگ ايميل استفاده كنيد براي اينكار در قسمت راهنمايي تبلاگ به

جستجوي تگ ايميل برويد

خوب دوستان اينم تگ ايميل <-BlogEmail-> اين تگ رو جايگزين كنيد

اما قسمت ديگر همون آر آر اس است كه مي تونيد از اين تگ تبلاگ استفاده كنيد

<-BlogXmlLink->

تغيير نام و توضيحات وبلاگ

براي تغيير در نام وبلاگ به قسمت <head> هدر وبلاگ برويد و بعد تگ هاي لازم رو از قسمت

راهنماي تبلاگ انتخاب كنيد و و جايگزين كنيد

عنوان وبلاگ . مانند: وبلاگ آزمايشي <-BlogTitle->

توضيحات وبلاگ كه معمولا معرفي كننده نوع مطالب وبلاگ است. <-BlogDescription->

نكته : اين قسمتها در قالب بالا نيومده

تغيير ستونها و بلاك هاي وبلاگ

تغيير ستون درباره وبلاگ

اين بلاك براي تعيين جايگاه و نحوه نمايش تصوير نويسنده وبلاگ و يا لوگو وبلاگ و همچنين

توضيحاتي است كه نويسنده وبلاگ درباره خود يا محتواي وبلاگ خود داده است.تمام كدها و

محتوايي كه داخل اين بلوك باشد تنها موقعي نمايش داده خواهد كه يا تصوير و يا توضيحات

وبلاگ توسط نويسنده وبلاگ تعيين شده باشد

اين بلاك با تگ <BlogProfile> شروع و با تگ <BlogProfile/> پايان و بسته مي شود

بين اين دو تگ بايد تگ هاي زير را وارد كنيد

توضيحات در مورد نويسنده و يا وبلاگ <-BlogAbout->

تصوير نويسنده وبلاگ و يا لوگو وبلاگ <-BlogPhoto->

نمونه كد مي شه مثل تگ زير

<BlogProfile>
درباره وبلاگ

<img src="<-BlogPhotoLink->">
<-BlogAbout->
</BlogProfile>

تغيير بلاك موضوعات

ما در بلاگ اسكاي داريم

<BlogSky:Category Body><div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">موضوعات</font></div></div>
<div class="mdiv341 , text1"><ul>
<BlogSky:Category Categories><li><a href="<BlogSky:Category HRef />"><BlogSky:Category Title /></a> (<BlogSky:Category PostCount />)</li></BlogSky:Category Categories>
</ul></div><div class="mdiv30"></div>
</div></BlogSky:Category Body>

در تبلاگ مي شود

<BlogCategories><div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">موضوعات</font></div></div>
<div class="mdiv341 , text1"><ul>
<li><a href="<-CategoryLink->"><-CategoryName-></a></li>
</ul></div><div class="mdiv30"></div>
</div></BlogCategories>

براي مثال من قسمت آمار وبلاگ را هم براتون تغيير مي دهم
در بلاگ اسكاي داريم

<div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">آمار وبلاگ</font></div></div>
<div class="mdiv341 , text1"><ul>
<li>كل بازديدها: <pb:BlogTotalVisit/></li>
</ul></div><div class="mdiv30"></div>
</div>

در تبلاگ مي شود

<div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">آمار وبلاگ</font></div></div>
<div class="mdiv341 , text1"><ul>
<li>كل بازديدها: <-PostCount-></li>
</ul></div><div class="mdiv30"></div>
</div>

يعني ما <-PostCount-> تبيان را جايگزين <pb:BlogTotalVisit/> بلاگ اسكاي كرديم

تغيير قسمت پست هاي وبلاگ

اين قسمت از مهمترين بخش هاي وبلاگ مي باشد
تگ هاي زيادي در اين قسمت وجود دارند از جمله تگ پست عنوان پست نظرات پست ادامه

مطلب پست تاريخ و نويسنده پست و ...

نمونه اين قسمت مثل كد زير است

نكته : كدهاي زير به ترتيب قالب هاي تبلاگ قرار گرفتند

تگ شروع پست ها
<BlogPost>

تگ عنوان و آدرس پست
<a href="<-PostLink->"><-PostTitle-></a>

تگ صفحه و پست هاي بعدي
<BlogNextPostBlock>
<a href="<-BlogUrl->viewPost.aspx?PostID=<-PostNext->" ><span class="Next"
title="پست بعدي"></span></a> </BlogNextPostBlock>

تگ پرينت و فرستادن پست
<-PostPrint-><-PostSend->

تگ صفحه و پست قبلي
<BlogPreviousPostBlock>
<a href="<-BlogUrl->viewPost.aspx?PostID=<-PostPrevious->" > <span
class="Back" title="پست قبلي"></span> </a>
</BlogPreviousPostBlock>

تگ متن پست
<-PostContent->

تگ ادامه مطلب پست
<BlogExtendedPost>
<a href="<-PostLink->"> ادامه مطلب</a>

</BlogExtendedPost>

temlog.tebyan.net

ادامه مطلب

نظرات 0

آموزش طراحي قالب قسمت اول

تاريخ : یک شنبه 16 مهر 1391 | 12:30 AM | نويسنده : Mohammad ali Hajian

تگ نظر دادن به پست
<BlogComment><div class="First"><a href="javascript:void(0)"

Class="TitleAndStyle" onclick="javascript:window.open

('http://www.tebyan.net/weblog/<-BlogId->/ViewOpinion.aspx?PostID=<-PostId->',

null,

'height=530,width=500,status=yes,toolbar=no,menubar=no,location=no,resizable=

no,scrollbars=no')">(<-Count->) نظر</a></div></BlogComment>

نكته :كدهاي بالا باعث باز شدن پنجره جديدي به ابعاد 500 در 530 مي شود

تگ نمايش دسته يا موضوع پست
دسته ها : <-PostCategory->

تگ هاي نمايش زمان و تاريخ ايجاد پست <-PostDate-> <-PostTime->

تگ پاياني پست ها
</BlogPost>

گذاشتن تگ هاي آغازين و پاياني پست ها اجباري است وگرنه پست ها نمايش داده نمي شوند
خوب دوستان اينم از آموزش امروز من نمونه قالب اموزشي بالا رو به صورت كامل براي تبيان
مي گذارم فقط بعضي از قسمت هاش رو خودتون تغيير بدهيد
خدانگهدارتون

نمونه قالب براي تبيان

كدها را انتخاب كنيد و در ويرايش قالب كپي كنيد

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="fa">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Theme-Designer" content="www.MyTheme.ir">
<script src="http://mytheme.ir/themes/script.js" language="javascript"></script>
<meta name="keywords" content="<pb:BlogKeyWords/>">
<meta name="description" content="<pb:BlogDescription/>" />
<link rel="alternate" type="application/rss+xml" title="<-BlogUrl->" href="<-BlogUrl->" />
<link href="http://mythemes.ir/t40/style.css" type="text/css" rel="stylesheet">

<link rel="stylesheet" href="http://mythemes.ir/t40/nivo-slider.css" type="text/css">
<link rel="stylesheet" href="http://mythemes.ir/t40/skin.css" type="text/css">

<script type="text/javascript" src="http://mythemes.ir/t40/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://mythemes.ir/t40/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
var jq=jQuery.noConflict();
jq(window).load(function() {
jq('#slider').nivoSlider();
});
</script>

<script type="text/javascript" src="http://mythemes.ir/t40/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
var jq2=jQuery.noConflict();
function mycarousel_initCallback(carousel) {
    jq2('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jq2.jcarousel.intval(jq2(this).text()));
        return false;
    });
    jq2('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll = jq2.jcarousel.intval(1);
        return false;
    });
    jq2('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });
    jq2('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};

jq2(document).ready(function() {
    jq2('#mycarousel1').jcarousel({
        auto: 2,
        vertical: true,
        scroll: 1,
       wrap: 'circular'
    });
   jq2('#mycarousel2').jcarousel({
        auto: 2,
        vertical: true,
        scroll: 1,
       wrap: 'circular'
    });
   jq2('#mycarousel3').jcarousel({
        auto: 2,
        vertical: true,
        scroll: 1,
       wrap: 'circular'
    });
});

</script>

<title><-BlogTitle-></title>

</head>

<body>

<div align="center">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="div2">
<div class="div00">
<div class="div0">
<div class="div000">

<div class="div60">
<div class="div101">
<div class="div10"><font class="title"><pb:BlogTitle/></font></div></div>
<div class="div11">
<div class="div12"><font class="des"><pb:BlogDescription/></font></div></div>
</div>

<div id="wrapper">
<div class="hsl"></div>
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">



<img src="http://mythemes.ir/t40/pic1.jpg" alt="گروه طراحي قالب من" width="780" height="220" border="0">
<img src="http://mythemes.ir/t40/pic2.jpg" alt="گروه طراحي قالب من" width="780" height="220" border="0">
<img src="http://mythemes.ir/t40/pic3.jpg" alt="گروه طراحي قالب من" width="780" height="220" border="0">
<img src="http://mythemes.ir/t40/pic1.jpg" alt="گروه طراحي قالب من" width="780" height="220" border="0">
<img src="http://mythemes.ir/t40/pic2.jpg" alt="گروه طراحي قالب من" width="780" height="220" border="0">



</div>
</div>
</div>

<div class="ss">
<div class="s1"><form method="Get" action="http://google.com/search"><input name="sitesearch" value="<pb:BlogUrl/>" type="hidden">
<div class="s2">
<input type="text" name="q" size="32" style="border: 0px none; background: none; font-family:Tahoma; font-size:9pt; direction:ltr; color:#fff;"></div>
<div class="s3"><input type="image" src="http://mythemes.ir/t40/blank.gif" width=25 height=22></div>
</form></div>

<div class="s5">
<div class="s4 , text10"><a href="<-BlogUrl->">صفحه نخست</a></div>
<div class="s4 , text10"><a href="">عناوين مطالب</a></div>
<div class="s4 , text10"><a href="">نقشه سايت</a></div>
<div class="s4 , text10"><a href="<-BlogEmail->">ارتباط با ما</a></div>
<div class="s4 , text10"><a href="" target="_blank">طراح قالب</a></div>
</div>

<div class="mytheme">
<div class="mytheme4">
<g:plusone size="medium"></g:plusone>
<script type="text/javascript">
window.___gcfg = {lang: 'fa'};
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
</div>

</div>

<div class="div170">

<BlogProfile><div class="div24">
<div class="div35">
<div class="div25"><font class="text5">درباره وبلاگ</font></div></div>
<div class="div341 , text1">
<div class="sm"></div>
<div class="div32"><center><a href="<-BlogAbout->"><img src="<-BlogPhoto->" style="width: 120px;" border="0" vspace="8"></a><br><br>
<pb:ItemDesc/></center></div>
</div><div class="div30"></div>
</div></BlogProfile>

<pb:BlogPagesBlock><div class="div24">
<div class="div35">
<div class="div25"><font class="text5">صفحات وبلاگ</font></div></div>
<div class="div341 , text1"><ul>
<pb:BlogPages><li><a href="<pb:ItemLink/>"><pb:ItemText/></a></li></pb:BlogPages>
</ul></div><div class="div30"></div>
</div></pb:BlogPagesBlock>

<pb:BlogAuthorsBlock><div class="div24">
<div class="div35">
<div class="div25"><font class="text5">نويسندگان</font></div></div>
<div class="div341 , text1"><ul>
<pb:BlogAuthors><li><a href="<pb:ItemPostsLink/>"><pb:ItemText/></a> (<pb:ItemCount/>)</li></pb:BlogAuthors>
</ul></div><div class="div30"></div>
</div></pb:BlogAuthorsBlock>

</div>

<div class="div20">

<BlogPost><div class="div54">
<div class="div15">
<div class="div015"></div>
<div class="div18"><font class="text6"><a href="<-PostLink->"><-PostTitle-></a></font></div>
</div>
<div class="div21">
<div class="div55"></div>
<div class="div56"><font class="text4">

<-PostContent->
<BlogExtendedPost><br><br><b><a href="<-PostLink->">ادامه مطلب ...</a></b></BlogExtendedPost></font></div></div>
<div class="div26">
<div class="div270">
<div class="s27"></div>
<div class="m20"><a href="http://reddit.com/submit?url=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m21"><a href="http://www.myspace.com/Modules/PostTo/Pages/?u=<BlogSky:Weblog URL /><BlogSky:Post HRef />&t=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m22"><a href="http://digg.com/submit?phase=2&url=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m23"><a href="http://blogger.com/?url=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m24"><a href="http://www.stumbleupon.com/submit?url=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m25"><a href="http://www.youtube.com/?url=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m26"><a href="http://www.facebook.com/share.php?u=<BlogSky:Weblog URL /><BlogSky:Post HRef />&t=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m27"><a href="http://delicious.com/post?url=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m28"><a href="www.flickr.com/?url=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m29"><a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m30"><a href="http://www.linkedin.com/shareArticle?mini=true&url=<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
<div class="m31"><a href="http://twitter.com/home?status=Reading+this:+<BlogSky:Weblog URL /><BlogSky:Post HRef />&title=<BlogSky:Post Title />" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" width="20" height="20" border="0" alt="" title="اين مطلب را به اشتراك بگذاريد"></a></div>
</div>
<div class="div27"><font class="text8"><BlogComment>
<a href="javascript:void(0)" class="TitleAndStyle" onclick="javascript:window.open('http://www.tebyan.net/weblog/<-BlogId->/ViewOpinion.aspx?PostID=<-PostId->', null, 'height=530,width=500,status=yes,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=no')">(<-Count->) نظر</a>
</BlogComment></font></div>
<div class="div58"><font class="text7"><a href=""><-PostAuthor-></a></font></div>
<div class="div581"><font class="text7"><-PostDate-> :: <-PostTime-></font></div>
</div>
</div></BlogPost>

<div class="div29"></div>
<div class="div28"><font class="text9">
<pb:PagingBlock><pb:Paging><a href="<pb:ItemLink/>" title="<pb:ItemDesc/>"><pb:ItemText/></a>   </pb:Paging></pb:PagingBlock><br></font>
</div>
</div>

<div class="mdiv170">

<BlogCategories><div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">موضوعات</font></div></div>
<div class="mdiv341 , text1"><ul>
<li><a href="<-CategoryLink->"><-CategoryName-></a></li>
</ul></div><div class="mdiv30"></div>
</div></BlogCategories>

<div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">لينك دوستان</font></div></div>
<div class="mdiv341 , text1"><ul>
<BlogArchive><li><a target="_blank" href="<-ArchiveLink->" title="<-ArchiveTitle->"></a></li></BlogArchive>
</ul></div><div class="mdiv30"></div>
</div>

<div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">آمار وبلاگ</font></div></div>

<div class="mdiv341 , text1"><ul>
<li>تعداد بازديد : <-VisitCount-></li>
<li>تعداد نوشته ها : <-PostCount-></li>
<li>تعداد نظرات : <-OpinionCount-></li>
</ul></div><div class="mdiv30"></div>
</div>

<div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">كدهاي كاربر</font></div></div>
<div class="mdiv341 , text1">
<div class="msm"></div>
<div class="mdiv32"><center><-BlogCustomHtml-></a></center></div>
</div>
<div class="mdiv30"></div>
</div>

</div>
</div></div></div>
</td>
</tr>
<tr>
<td class="b2" valign="top">
<div class="div00">
<div class="divm">

<div class="d6">
<div class="div600 , text13">
<marquee width="650" height="30" scrollamount="3" scrolldelay="0" direction="right" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()">به سايت ما خوش آمديد</marquee></div></div>

<div class="fft">
<div class="ft1">
<form action="http://mythemes.ir/t40/send-mail.php" method="post">
<input type="hidden" name="to" value="<pb:BlogEmail/>">

<div class="pm1"><input type="text" name="nm" size="26" style="border: 0px none; color:#c7c7c7; background: none; font-family:Tahoma; font-size:9pt; direction:rtl"></div>
<div class="pm2 , text1">نام و نام خانوادگي      </div>

<div class="pm1"><input type="text" name="ma" size="26" style="border: 0px none; color:#c7c7c7; background: none; font-family:Tahoma; font-size:9pt; direction:ltr"></div>
<div class="pm2 , text1">آدرس ايميل      </div>

<div class="pm3"><textarea name="txt" cols="35" rows="2" style="border: 0px none; color:#c7c7c7; background: none; font-family:Tahoma; font-size:9pt; direction:rtl" onFocus="if(this.value=='پيام خود را اينجا بنويسيد')this.value='';" onBlur="if(this.value=='')this.value='پيام خود را اينجا بنويسيد';" type="text" value="پيام خود را اينجا بنويسيد">پيام خود را اينجا بنويسيد</textarea></div>

<div class="pm4"><input type="image" src="http://mythemes.ir/t40/blank.gif" width=100 height=35></div>

</form>
</div>

<div class="ft2">
<pb:BlogArchiveBlock>
<ul id="mycarousel1" class="jcarousel jcarousel-skin-tango , text11">
<pb:BlogArchive><li><div class="ic"></div><div class="im"><a href="<pb:ItemLink/>"><pb:ItemText/></a></div></li></pb:BlogArchive>
</ul>
</pb:BlogArchiveBlock>
</div>

<div class="ft2">
<pb:BlogLinksBlock>
<ul id="mycarousel2" class="jcarousel jcarousel-skin-tango , text11">
<pb:BlogLinks><li><div class="ic"></div><div class="im"><a target="_blank" href="<pb:ItemLink/>"><pb:ItemText/></a></div></li></pb:BlogLinks>
<li><div class="ic"></div><div class="im"><a target="_blank" href="http://www.mytheme.ir/domain.php">تبديل وبلاگ به سايت</a></div></li>
<li><div class="ic"></div><div class="im"><a target="_blank" href="http://www.mytheme.ir">قالب وبلاگ</a></div></li>
</ul>
</pb:BlogLinksBlock>
</div>

<div class="ft2">
<pb:TitleListBlock>
<ul id="mycarousel3" class="jcarousel jcarousel-skin-tango , text11">
<pb:TitleList><li><div class="ic"></div><div class="im"><a href="<pb:ItemLink/>"><pb:ItemText/></a></div></li></pb:TitleList>
<li><div class="ic"></div><div class="im"><b><a href="<pb:TitleListLink/>">ليست آخرين مطالب</a></b></div></li>
</ul>
</pb:TitleListBlock>
</div>
</div>

<div class="ft5">
<div class="ft50"><a href="http://www.mytheme.ir" target="_blank"><img src="http://mythemes.ir/t40/blank.gif" border=0 width=200 height=40></a></div>
<div class="ft51 , text11">كليه حقوق اين وبلاگ براي <b><a href="/"><pb:BlogTitle/></a></b> محفوظ است</div>
</div>

</div></div>
</td>
</tr>
</table>
</div>

</body>

</html>

temlog.tebyan.net

ادامه مطلب

نظرات 1

آموزش طراحي قالب قسمت دوم

تاريخ : یک شنبه 16 مهر 1391 | 12:15 AM | نويسنده : Mohammad ali Hajian

در جلسات قبل شما با بخش هدر و استايل قالب هاي تبيان اآشنا شديد در بخش شما را با بخش هايي مهم استايل و همينطور قسمت بدنه قالب آشنا مي كنم

خوب دوستان مثل هميشه وارد سايت زير بشويد و كدهاتون را در قسمت بالاي اون بنويسيد تا نمونه قالبتون در ستون پاينش نمايش داده بشه اين كار سرعت شما رو بالا مي بره

http://htmledit.squarefree.com

ساخت يك بلاك يا ستون

دوستان عزيز فرض كنيد مي خواهيد يك ستون براي موضوعات وبلاگتون ايجاد كنيد

من سعي مي كنم بخش هاي ايجاد اين ستون را با مثال قالب هاي تبيان براتون بزنم

خوب اول كدهاي اصلي كه بهشون مي گن html رو وارد مي كنيم

<html>

<head>

<style>

محل قرار گيري كدهاي تنظيمات ستون

<head/>

<body>

محل قرار گيري كدهاي ستون براي نمايش در وبلاگ

<body/>

<html/>

همونطور كه مي بينيد كدهاي ستون ها در دو بخش style و body قرار مي دهيم

خوب حالا ما مي خواهيم يك ستون مثل عكس بالا ايجاد كنيم

اول در قسمت body يك متن به نام دسته ايجاد مي كنيم

حالا دوتا متن ديگه هم اضافه مي كنيم

<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 در كد بالا چيست ؟

وقتي به يك المان در كد خود float به سمت چپ يا راست ميدهيد ، المان مورد نظر به آن سمت خاص ميرود و بقيه المان هايي كه بعد از تگ مذكور آمده اند و float ندارند به سمت مخالف رانده ميشوند و اطراف المان مورد نظر را فرا مي گيرند.

خوب حالا براي سمت چپ بالاي ستون هم مثل بالا عمل مي كنيم فقط اسم سلكتورمون را LeftImage مي گذاريم

.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;}

در قسمت بالاي text-align:right; كه موجب مي شود متن شما راست چين شود

حالا مي خواهيم قسمت پاييني ستون را ايجاد كنيم اول اندازه عرض را مي نويسيم بايد با عرض قسمت بالا يكي باشه

.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}

خوب استايل ها تمام شد حالا مي رويم داخل بدنه وبلاگ و اونها رو براي متن ها فراخواني مي كنيم جلسه قبل گفتم اينكار را به وسيله كلاس ها انجام مي دهيم

براي نمايش استايل هاي بالا بايد كلاس هاي اونها رو بنويسيم

مثلا براي پاراگراف اول p1كه متن وسطش دسته بود اين كلاس ها رو قرار مي دهيم

همانطور كه مي بينيد كلاس up اول اومده و كلاسهاي گوشه هاي سمت راست و وسط و چپ بعد از اون وارد شدند p1 هم چون متن ما هست در قسمت وسط در كلاس CenterImage قرار خواهد گرفت

اگر توجه كنيد چهار تا div داريم ديو up چون مي خواهيم براي قسمت هاي راست و چپ و وسط عمل كنه پس در آخر كار بسته مي شود

حالا براي پاراگراف هاي و موضوعات اول و دوم هم كه يك كلاس داشت رو قرار مي دهيم

<div class="Bottom">
<div class="Left"><p2>موضوع اول</p2></div>
<div class="Left"><p3>موضوع دوم</p3></div>

</div>

براي قسمت پايين ستون چون متني نداريم همون كلاسهاي خودشونو رو مي نويسيم

خوب دوستان تمام شد حالا من كد كامل توضيحات بالا را براتون مي گذارم تا استفاده كنيد

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

temlog.tebyan.net

ادامه مطلب

نظرات 0

آموزش طراحي قالب قسمت سوم

تاريخ : یک شنبه 16 مهر 1391 | 12:11 AM | نويسنده : Mohammad ali Hajian

شما هم مثل من قالب بلاگ اسكاي را انتخواب كنيد

دريافت قالب از عكس لينك دار زير

اونجايي كه نوشته <BlogSky:Weblog URL /> ما تگ <-BlogUrl-> تبلاگ را جايگزين آن مي كنيم

خوب حالا اين لينك مطابق سيستم تبلاگ تنظيم شد

ادامه مطلب

نظرات 0

آموزش طراحي قالب وب قسمت چهارم

تاريخ : یک شنبه 16 مهر 1391 | 12:05 AM | نويسنده : Mohammad ali Hajian

تغيير نام و توضيحات وبلاگ

براي تغيير در نام وبلاگ به قسمت <head> هدر وبلاگ برويد و بعد تگ هاي لازم رو از قسمت

راهنماي تبلاگ انتخاب كنيد و و جايگزين كنيد

عنوان وبلاگ . مانند: وبلاگ آزمايشي <-BlogTitle->

توضيحات وبلاگ كه معمولا معرفي كننده نوع مطالب وبلاگ است. <-BlogDescription->

نكته : اين قسمتها در قالب بالا نيومده

تغيير ستونها و بلاك هاي وبلاگ

تغيير ستون درباره وبلاگ

اين بلاك براي تعيين جايگاه و نحوه نمايش تصوير نويسنده وبلاگ و يا لوگو وبلاگ و همچنين

توضيحاتي است كه نويسنده وبلاگ درباره خود يا محتواي وبلاگ خود داده است.تمام كدها و

محتوايي كه داخل اين بلوك باشد تنها موقعي نمايش داده خواهد كه يا تصوير و يا توضيحات

وبلاگ توسط نويسنده وبلاگ تعيين شده باشد

اين بلاك با تگ <BlogProfile> شروع و با تگ <BlogProfile/> پايان و بسته مي شود

بين اين دو تگ بايد تگ هاي زير را وارد كنيد

توضيحات در مورد نويسنده و يا وبلاگ <-BlogAbout->

تصوير نويسنده وبلاگ و يا لوگو وبلاگ <-BlogPhoto->

نمونه كد مي شه مثل تگ زير

<BlogProfile>
درباره وبلاگ

<img src="<-BlogPhotoLink->">
<-BlogAbout->
</BlogProfile>

تغيير بلاك موضوعات

ما در بلاگ اسكاي داريم

نكته : كدهاي زير به ترتيب قالب هاي تبلاگ قرار گرفتند

تگ شروع پست ها
<BlogPost>

تگ عنوان و آدرس پست
<a href="<-PostLink->"><-PostTitle-></a>

تگ صفحه و پست هاي بعدي
<BlogNextPostBlock>
<a href="<-BlogUrl->viewPost.aspx?PostID=<-PostNext->" ><span class="Next"
title="پست بعدي"></span></a> </BlogNextPostBlock>

تگ پرينت و فرستادن پست
<-PostPrint-><-PostSend->

تگ صفحه و پست قبلي
<BlogPreviousPostBlock>
<a href="<-BlogUrl->viewPost.aspx?PostID=<-PostPrevious->" > <span
class="Back" title="پست قبلي"></span> </a>
</BlogPreviousPostBlock>

تگ متن پست
<-PostContent->

تگ ادامه مطلب پست
<BlogExtendedPost>
<a href="<-PostLink->"> ادامه مطلب</a>

</BlogExtendedPost>

نكته :كدهاي بالا باعث باز شدن پنجره جديدي به ابعاد 500 در 530 مي شود

تگ نمايش دسته يا موضوع پست
دسته ها : <-PostCategory->

تگ هاي نمايش زمان و تاريخ ايجاد پست <-PostDate-> <-PostTime->

تگ پاياني پست ها
</BlogPost>

نمونه قالب براي تبيان

كدها را انتخاب كنيد و در ويرايش قالب كپي كنيد

ادامه مطلب

نظرات 0

چیپس با طعم لیمو یا مرگ مورچه؟

تاريخ : چهارشنبه 12 مهر 1391 | 2:07 AM | نويسنده : Mohammad ali Hajian

این مطلب نشونه اینه که ما به جون خودمون علاقه نداریم چون اگر داشتیم این همه هشدار در مجلات و روزنامه ها و شبکه های تلویزیونی و غیره و غیره را نادیده نمی گرفتیم. شما رو نمیدونم اما من نادیده گرفتم. آقاجون چیپس از نوع کارخانه ای با افزودنی های ناکجا آبادی + پفک یا انواع مشابه که از مواد افزودنی زردکی و امثالهم استفاده می کنند سرطان زا و مرگبار هستند. Ok ؟

ادامه مطلب

نظرات 0

جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید

تاريخ : چهارشنبه 12 مهر 1391 | 1:52 AM | نويسنده : Mohammad ali Hajian

درباره‌ی جی‌کوئری پیش‌تر صحبت کرده‌ایم. کتاب‌خانه‌ی جاوااسکریپتی که کار را برای‌مان چندین‌برابر راحت کرده است و به سادگی می‌توان کارهای بزرگی را در کم‌تر از چند دقیقه پیاده نمود. نمی‌خواهم از جی‌کوئری بگویم که می‌دانم کم و بیش با آن آشنایید.

ادامه مطلب

نظرات 0

آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری

تاريخ : چهارشنبه 12 مهر 1391 | 1:50 AM | نويسنده : Mohammad ali Hajian

همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.

tooltip-23213

ادامه مطلب

نظرات 0

هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا

تاريخ : چهارشنبه 12 مهر 1391 | 1:48 AM | نويسنده : Mohammad ali Hajian

فکر می‌کنم با دستورات اختصاصی مرورگرها آشنا باشید. زمانی از این دستورات اختصاصی استفاده می‌کنیم که بخواهیم بعضی از دستورات ِ سی‌اس‌اس‌مان، در مرورگری خاص، متفاوت باشد.

css-hack-for-opera

ادامه مطلب

نظرات 0

گرادینت متن با سی اس اس

تاريخ : چهارشنبه 12 مهر 1391 | 1:43 AM | نويسنده : Mohammad ali Hajian

در پایین یک راه تر و تمیز برای گرادینت کردن متن با سی اس اس مشاهده می‌کنید که البته فقط در موتور وب کیت (webkit) کار خواهد کرد. یعنی مرورگرهایی چون کروم و سافاری.

			
							1
						
							h1 {
					
							2
						
							background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));
					
							3
						
							-webkit-background-clip: text;
					
							4
						
							-webkit-text-fill-color: transparent;
					
							5
						
							}

در این روش من ابتدا به المنت موردنظر یک بک‌گراند با گرادینت می‌دهم (خط ۲).

ادامه مطلب

نظرات 0

دستورات Reset در سی‌اس‌اس به چه دردی می‌خورند؟!

تاريخ : چهارشنبه 12 مهر 1391 | 1:38 AM | نويسنده : Mohammad ali Hajian

چند روز پیش یکی از دوستان ازم پرسید که فایل Reset.css واسه چیه و چرا بعضی ها ازش استفاده میکنن؟! من هم توضیحاتی دادم، اما دیدم بهتره پستی رو در همین رابطه منتشر کنم!

ببینید… هر مرورگری، یک سری استایل های پیش فرض درونی داره که صفحات رو بر اساس اون استایل ها نشون میده…!

یعنی چی؟! یعنی اینکه مثلا مرورگر IE، ممکنه تگ P رو با مارجین ۴ پیکسل نشون بده اما مرورگر Opera همین تگ رو با مارجین ۵ پیکسل نمایش بده!

ادامه مطلب

نظرات 1

آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت سوم)

تاريخ : چهارشنبه 12 مهر 1391 | 1:34 AM | نويسنده : Mohammad ali Hajian

در ادامه آموزش طراحی صفحات وب استاندارد به کمک css امروز یک نوع صفحه پایه ی طراحی css که فارسی شده و برای نوشتن مطالب فارسی مناسب می باشد را برای دانلود در اختیارتان قرار میدهم. با کلیک روی تصویر پایین، آن را دانلود و کار را آغاز کنید.

فایلی را که دانلود کرده اید یک فایل zip. است که بعد از extract شدن (خارج شدن از حالت zip ) فولدری را در اختیارتان قرار میدهد که حاوی سه فایل میباشد:

2-column.htm

reset.css

styles.css

فایل اول با پسوند htm. همان صفحه اصلی است که در وب به نمایش در می آید. فایل دوم فایل reset.css است لطفا برای دریافت اطلاعات در این مورد به این اینجا مراجعه کنید. فایل سوم فایل style.css است که به صفحه htm. دستور میدهد که چگونه محتویاتش را نمایش دهد.

صفحه htm. و styles.css را که دانلود کرده اید در یک ویرایشگر صفحه وب مانند frontpage باز کنید. در حال حاضر صفحه ای مانند تصویر زیر را در اختیار دارید که برای سهولت در ارائه توضیحات، ستونها را با خطوط (border) کاملا واضح مشخص کرده ام.

ادامه مطلب

نظرات 0

.: RASEKHOON.NET:.

تعداد کل صفحات : 2 :: 1 2

تقویم شمسی

کد تماس با ما

دانلود صوت و فیلم