آموزش و طراحي صفحات وب و نرم افزارهاي طراحي صفحات وب
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
CSS چيست؟
CSS مخفف سه کلمه Cascading Style Sheets و نوعي كدنويسي تحت وب است که امروزه طراحی صفحات وب در جهان را متحول کرده است. CSS زمانی برتري خود را به ديگر كدنويسي هاي تحت وب نشان میدهد که شما صفحه ای با حجم نسبتا زیادي از متون و تصاوير داشته باشيد , طبيعي است كه چنانچه شما از جداول براي طراحي وب سايت خود استفاده کنید، مخاطبان شما بايد تا لود كامل جداول و محتويات آن صبر كنند, اما با استفاده از CSS، هرچقدر اطلاعات لود شده باشد، در همان لحظه بر مرورگر كاربر ظاهر شده و ضمن صرفه جويي در زمان وي, امكان كليك كاربر بر كليد Close مرورگر را به حداقل ممكن ميرساند.
استايل ها كاربردهاي فراواني دارند كه از آن ها ميتوان به صرفه جويي در كدنويسي , اعمال صفات مشترك به اشياء, رنگي كردن اسكرول بار مرورگر ها , ايجاد كليد هاي متحرك و زيبا و بسياري ديگر اشاره كرد.
ما در اين بخش قصد داريم شما را با نرم افزاري آشنا كنيم كه قادر است با استفاده از CSS كليد هاي متحرك ايجاد كند!
CSS Tab Designer نرم افزاري رايگان اما قدرتمند از كمپاني Highdots است كه شما را قادر ميسازد بدون نياز به آگاهي پيرامون كدنويسي CSS در كمترين زمان ممكن براي وب سايت يا وبلاگ خود كليد ها و هاي گرافيكي زود لود, موسوم به Tab ايجاد كنيد. استفاده از اين برنامه حتي براي كاربراني كه هيچ اطلاعاتي از CSS ندارند بسيار ساده است , چرا كه اين نرم افزار كاربر را كاملا از كدنويسي جدا كرده و پس از دريافت سفارش شما كليه برنامه نويسي ها را خود انجام داده و در خروجي, كد و اشياء مورد نياز را تحويل ميدهد!
محيط كاربري CSS Tab Designer همچون برنامه Front Page از 2 بخش Code و Preview تشكيل شده كه اولي جهت كد نويسي و دومي جهت مشاهده نتيجه كار در سمت مخاطب, بكار ميرود, علاوه بر آن شامل بيش از 60 قالب آماده و متنوع است كه جهت ايجاد سريع منوها بكار ميروند. CSS Tab Designer با 7 مرورگر رايج دنيا سازگار بوده و قادر است منوهاي ايجاد شده را در هر يك از آن ها به نمايش گذارد, همچنين با ويندوز هاي 98 / ME / 2000 / XP / 2003 سازگار است.
قالب تيک تاک بلاگر رو به درخواست تعدادي از دوستان به بلاگفا ترجمه اش کردم
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
نصب قالب اصلی وبلاگ :
1. وارد سایت بلاگفا شده ٬ نام کاربری و کلمه عبور خود را وارد کنید و وارد کنترل پنل وبلاگتان شوید.
2. به قسمت ویرایش قالب رفته و تمام کدهای موجود را پاک کنید.
3. کدهای زیر را کپی کرده و جایگزین کدهای بلاگفا کنید.
<!--Tic Tac-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><-BlogAndPostTitle-></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription->">
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs, Blogs">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
<style>
<!--
body{font-family:Tahoma;font-size:8pt;padding:0px;margin:0px;color:#555;backgro und:#e0e0e0}
a, a:visited{color:#69c;text-decoration: none}a:hover{color:#693;text-decoration: none}
#page{background:url('http://rezagraph.persiangig.com/templates/tic-tac/bg-page.gif') center repeat-y;width:825px}img{border:none}
#header{height:114px;background:url('http://rezagraph.persiangig.com/templates/tic-tac/bg-header.jpg') no-repeat}
#header div{color:white;font-family:verdana;font-size:21pt;font-weight:bold;text-align:center;padding-top:43px}
#header div p{margin-top:5px;margin-bottom:0px;color:white;font-family:Tahoma;font-size: 9pt;font-weight:normal;text-align:center;direction:rtl}
#headerb{height:16px;background:url('http://rezagraph.persiangig.com/templates/tic-tac/header-bottom.gif') no-repeat}
#content{padding:0px 30px}
#main{float:right;width:506px;text-align:right;overflow:hidden}
#post{padding:0 15px;text-align:right}
#postdate{background: url('http://rezagraph.persiangig.com/templates/tic-tac/date_ico.gif') right no-repeat;padding-right:15px;margin-top:20px;font-size:8pt;font-weight:600;color:#f90;direction:rtl}
#posttitle{padding:15px 15px 0 0;font-size:9pt;font-weight:bold;color:#f60;direction:rtl}
#postbody{padding:15px 15px 15px 0;font-size:9pt;color:black;line-height:1.5em;direction:rtl}
#postbody p{margin-top:10px;margin-bottom:0px}
#postbody img{padding:6px;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #c0c0c0;border-right:1px solid #c0c0c0}
#postdesc{background: url('http://rezagraph.persiangig.com/templates/tic-tac/pbullet.gif') right no-repeat;padding-right:15px;color:#999;direction:rtl}
#space{height:20px;margin:0 10px;border-bottom:1px solid #ddd}
#sidebar{float:left;background:url('http://rezagraph.persiangig.com/templates/tic-tac/bg-about.png') no-repeat;width:259px;padding-top:25px;line-height:1.5em;text-align:right}
#sidebar h2{margin:0px;background:url('http://rezagraph.persiangig.com/templates/tic-tac/mtitle.gif') right no-repeat;padding:20px 28px 20px 0;margin-right:15px;color:#666;font-size:8pt;font-weight:600}
#sidebar ul{list-style-type: none;margin: 0px;padding:0 20px 10px 20px;border-bottom: 1px solid #ddd}
#sidebar li {padding-right:15px;background: url('http://rezagraph.persiangig.com/templates/tic-tac/bullet.gif') right no-repeat;line-height:1.8em;direction:rtl}
#photo{padding-bottom:2px;text-align:center}
#photo img{padding:4px;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #c0c0c0;border-right:1px solid #c0c0c0;background:#fff}
#about{text-align: justify;padding:5px 20px 10px 20px;color:#888;border-bottom: 1px solid #ddd;direction:rtl}
#feed{margin:0px;padding-bottom:10px;border-bottom: 1px solid #ddd;text-align:center}
#custom{width:259px;overflow:auto;margin:10px 0;text-align:center;direction:rtl}
#footer{height:62px;background:url('http://rezagraph.persiangig.com/templates/tic-tac/bg-footer.jpg') no-repeat;clear:both}
-->
</style>
<script lang ="javascript">
function GetBC(lngPostid)
{
intTimeZone=<-BlogTimeZone->;
strBlogId="<-BlogId->";
intCount=-1;
strResult="";
try {
for (i=0;i<BlogComments.length;i+=2)
{
if (BlogComments[i]==lngPostid)
intCount=BlogComments[i+1] ;
}
} catch( e) {
}
if ( intCount==-1) strResult="آرشیو نظرات";
if ( intCount==0) strResult="نظر بدهید";
if ( intCount==1) strResult="یک نظر";
if ( intCount>1) strResult=intCount + " نظر" ;
strUrl="http://commenting.blogfa.com/?blogid=" +strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone ;
strResult ="<a href=\"javascript:void(0)\" onclick=\"javascript:window.open('" + strUrl + "','blogfa_comments','status=yes,scrollbars=yes,to olbar=no,menubar=no,location=no ,width=500px,height=500px')\" >" + strResult + " </a>" ;
document.write ( strResult ) ;
}
function OpenLD()
{
window.open('LinkDump.aspx','blogfa_ld','status=ye s,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px');
return true;
}
</script>
</head>
<body>
<div align=center>
<div id=page>
<div id=header><div><-BlogTitle-><p><-BlogDescription-></div></div>
<div id=headerb></div>
<div id=content>
<div id=main>
<BLOGFA>
<div id=post>
<div id=postdate><-PostDate-></div>
<div id=posttitle><-PostTitle-></div>
<div id=postbody><-PostContent-><BlogExtendedPost><br><a href="<-PostLink->">ادامه مطلب</a></BlogExtendedPost></div>
<div id=postdesc>نوشته شده توسط <-PostAuthor-> در <-PostTime-><BlogComment> | <span dir="rtl" ><script type="text/javascript">GetBC(<-PostId->);</script></span></BlogComment> | <a href="<-PostLink->" title="Link to this post">لینک به این مطلب </a></div>
<div id=space></div>
</div>
</BLOGFA>
</div>
<div id=sidebar>
<BlogProfile>
<h2>درباره وبلاگ</h2>
<BlogPhoto><div id=photo><img src="<-BlogPhotoLink->"></div></BlogPhoto>
<div id=about><-BlogAbout-></div>
</BlogProfile>
<h2>فهرست اصلی</h2>
<ul>
<li><a href="<-BlogUrl->">صفحه نخست</a></li>
<li><a href="mailto:<-BlogEmail->">پست الکترونیک</a></li>
<li><a href="<-BlogArchiveLink->">آرشیو مطالب</a></li>
</ul>
<BlogLinkDumpBlock>
<h2>پیوندهای روزانه</h2>
<ul>
<BlogLinkDump><li><a target="_blank" href="<-LinkUrl->" title="<-LinkDescription->"><-LinkTitle-></a></li></BlogLinkDump>
<li><a href="javascript:void(0)" onclick ="OpenLD();">آرشیو پیوندهای روزانه</a></li>
</ul>
</BlogLinkDumpBlock>
<h2>نوشته های پیشین</h2>
<ul>
<BlogArchive><li><a href="<-ArchiveLink->"><-ArchiveTitle-></a></li></BlogArchive>
</ul>
<BlogCategoriesBlock>
<h2>آرشیو موضوعی</h2>
<ul>
<BlogCategories><li><a href="<-CategoryLink->"><-CategoryName-></a></li></BlogCategories>
</ul>
</BlogCategoriesBlock>
<BlogAuthorsBlock>
<h2>نویسندگان</h2>
<ul>
<BlogAuthors><li><a href="<-AuthorLink->"><-AuthorName-></a></li></BlogAuthors>
</ul>
</BlogAuthorsBlock>
<h2>پیوندها</h2>
<ul>
<BlogLinks><li><a target="_blank" href="<-LinkUrl->"><-LinkTitle-></a></li></BlogLinks>
<li><a target="_blank" href="http://theme.blogfa.com">:: قالب ساز ::</a></li>
</ul>
<h2>آمار وبلاگ</h2>
<ul style="border:none">
<li>افراد آنلاين: <script src="http://tools.majidonline.com/online.php?site=<-BlogUrl->"></script></li>
<li>تعداد بازديدها: <script src="http://fastwebcounter.com/secure.php?s=<-BlogUrl->"></script></li>
</ul>
<p id=feed>
<a href="<-BlogXmlLink->"><img src="http://rezagraph.persiangig.com/templates/tic-tac/rss.gif" width="36" height="14"></a>
</p>
<h2>ترجمه قالب</h2>
<p style="text-align:center;margin:0">
<a href="http://theme.blogfa.com" target="_blank"><img src="http://www.blogfa.com/Photo/theme.gif" width="88" height="31"></a><br>
Powered By<br><a href="http://blogfa.com" style="color:#ff5000;font-weight: bold">BLOGFA.COM</a>
</p>
<div id=custom><-BlogCustomHtml-></div>
</div>
</div>
<div id=footer></div>
</div></div>
</body>
<!-- © This Template Designed By Reza Aminzadeh - Theme.blogfa.com -->
</html>
نصب قالب آرشیو وبلاگ :
1. به قسمت ویرایش قالب آرشیو رفته و تمام کدهای موجود را پاک کنید.
2. کدهای زیر را کپی کرده و جایگزین کدهای بلاگفا کنید
<!--Tic Tac Archive-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><-BlogAndPostTitle-></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription->">
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs, Blogs">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
<style>
<!--
body{font-family:Tahoma;font-size:8pt;padding:0px;margin:0px;color:#555;backgro und:#e0e0e0}
a, a:visited{color:#69c;text-decoration: none}a:hover{color:#693;text-decoration: none}
#page{background:url('http://rezagraph.persiangig.com/templates/tic-tac/bg-page.gif') center repeat-y;width:825px}img{border:none}
#header{height:114px;background:url('http://rezagraph.persiangig.com/templates/tic-tac/bg-header.jpg') no-repeat}
#header div{color:white;font-family:verdana;font-size:21pt;font-weight:bold;text-align:center;padding-top:43px}
#header div p{margin-top:5px;margin-bottom:0px;color:white;font-family:Tahoma;font-size: 9pt;font-weight:normal;text-align:center;direction:rtl}
#headerb{height:16px;background:url('http://rezagraph.persiangig.com/templates/tic-tac/header-bottom.gif') no-repeat}
#content{padding:0px 30px}
#main{float:right;width:506px;text-align:right;overflow:hidden}
#post{padding:0 15px;text-align:right}
#postdate{background: url('http://rezagraph.persiangig.com/templates/tic-tac/date_ico.gif') right no-repeat;padding-right:15px;margin-top:20px;font-size:8pt;font-weight:600;color:#f90;direction:rtl}
#posttitle{padding:15px 15px 0 0;font-size:9pt;font-weight:bold;color:#f60;direction:rtl}
#postbody{padding:15px 15px 15px 0;font-size:9pt;color:black;line-height:1.5em;direction:rtl}
#postbody p{margin-top:10px;margin-bottom:0px}
#postbody img{padding:6px;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #c0c0c0;border-right:1px solid #c0c0c0}
#postdesc{background: url('http://rezagraph.persiangig.com/templates/tic-tac/pbullet.gif') right no-repeat;padding-right:15px;color:#999;direction:rtl}
#space{height:20px;margin:0 10px;border-bottom:1px solid #ddd}
#sidebar{float:left;background:url('http://rezagraph.persiangig.com/templates/tic-tac/bg-about.png') no-repeat;width:259px;padding-top:25px;line-height:1.5em;text-align:right}
#sidebar h2{margin:0px;background:url('http://rezagraph.persiangig.com/templates/tic-tac/mtitle.gif') right no-repeat;padding:20px 28px 20px 0;margin-right:15px;color:#666;font-size:8pt;font-weight:600}
#sidebar ul{list-style-type: none;margin: 0px;padding:0 20px 10px 20px;border-bottom: 1px solid #ddd}
#sidebar li {padding-right:15px;background: url('http://rezagraph.persiangig.com/templates/tic-tac/bullet.gif') right no-repeat;line-height:1.8em;direction:rtl}
#photo{padding-bottom:2px;text-align:center}
#photo img{padding:4px;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #c0c0c0;border-right:1px solid #c0c0c0;background:#fff}
#about{text-align: justify;padding:5px 20px 10px 20px;color:#888;border-bottom: 1px solid #ddd;direction:rtl}
#feed{margin:0px;padding-bottom:10px;border-bottom: 1px solid #ddd;text-align:center}
#custom{width:259px;overflow:auto;margin:10px 0;text-align:center;direction:rtl}
#footer{height:62px;background:url('http://rezagraph.persiangig.com/templates/tic-tac/bg-footer.jpg') no-repeat;clear:both}
-->
</style>
</head>
<body>
<div align=center>
<div id=page>
<div id=header><div><-BlogTitle-><p><-BlogDescription-></div></div>
<div id=headerb></div>
<div id=content>
<div id=main>
<BLOGFA>
<div id=post>
<div id=postdate>نوشته های پیشین</div>
<div id=postbody><BlogArchive><a href="<-ArchiveLink->"><-ArchiveTitle-></a><br></BlogArchive></div>
</div>
</BLOGFA>
</div>
<div id=sidebar>
<BlogProfile>
<h2>درباره وبلاگ</h2>
<BlogPhoto><div id=photo><img src="<-BlogPhotoLink->"></div></BlogPhoto>
<div id=about><-BlogAbout-></div>
</BlogProfile>
<h2>فهرست اصلی</h2>
<ul>
<li><a href="<-BlogUrl->">صفحه نخست</a></li>
<li><a href="mailto:<-BlogEmail->">پست الکترونیک</a></li>
<li><a href="<-BlogArchiveLink->">آرشیو مطالب</a></li>
</ul>
<h2>پیوندها</h2>
<ul>
<li><a target="_blank" href="http://theme.blogfa.com">:: قالب ساز ::</a></li>
</ul>
<h2>آمار وبلاگ</h2>
<ul style="border:none">
<li>افراد آنلاين: <script src="http://tools.majidonline.com/online.php?site=<-BlogUrl->"></script></li>
<li>تعداد بازديدها: <script src="http://fastwebcounter.com/secure.php?s=<-BlogUrl->"></script></li>
</ul>
<p id=feed>
<a href="<-BlogXmlLink->"><img src="http://rezagraph.persiangig.com/templates/tic-tac/rss.gif" width="36" height="14"></a>
</p>
<h2>ترجمه قالب</h2>
<p style="text-align:center;margin:0">
<a href="http://theme.blogfa.com" target="_blank"><img src="http://www.blogfa.com/Photo/theme.gif" width="88" height="31"></a><br>
Powered By<br><a href="http://blogfa.com" style="color:#ff5000;font-weight: bold">BLOGFA.COM</a>
</p>
<div id=custom><-BlogCustomHtml-></div>
</div>
</div>
<div id=footer></div>
</div></div>
</body>
<!-- © This Template Designed By Reza Aminzadeh - Theme.blogfa.com -->
</html>
