آموزش طراحی فرم Login با استفاده از HTML و CSS

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

7 آموزش طراحی فرم Login با استفاده از HTML و CSSیکی از اصلی ترین بخش های وب سایت پویا یا داینامیک ، فرم ثبت نام و ورود کاربران می باشد . هیچ وب سایتی داینامیکی وجود ندارد که دارای فرم ثبت نام نباشد مگر اینکه دارای انجمن باشد .  فرم ثبت نام به صورت پیش فرض باید با Html طراحی شده سپس با Css  شکل ظاهری آن تغییر کند و در پایان با زبان های برنامه نویسی پیشرفته مثل PHP یا ASP باید به یک پایگاه داده متصل شوند.
در ادامه میخواهم روش طراحی یک فرم ثبت نام را به صورت ساده و بدون هیچ طرح خاصی توضیح بدهم تا به راحتی بتوانید با استفاده از یکسری از تگ های ساده فرمتان را طراحی و شکل ظاهری آن را تغییر بدهید .  برای شروع نیاز به یک ویرایشگر متن مثل نوت پد یا دریم ویور دارید تا به راحتی کدتان را در آن تایپ کرده و نتیجه را مشاهده کنید . در این مطلب آموزشی بر خلاف دیگر مقالات می خواهم فایل و کدهای مربوط به ظاهر قالب که در CSS تایپ می شود را در خود فایل index.html در قالب style ذخیره کنم. بد نیست با این روش نیز آشنا شوید .

قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم.
فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ...  هستند .

در پایان می توانید فایل تمرینی را دانلود و از آن استفاده کنید

تگ input در form

اصلی ترین تگی که به همراه تگ form در ایجاد قابلیت های تعاملی نقش دارد، input است که با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات نظیر فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و ... را ایجاد کرد، در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید.

 

<input type='button' />
<input type='checkbox' />
<input type='hidden' />
<input type='password' />
<input type='submit' />
<input type='text' />

 

 

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

1. ابتدا نرم افزار دریم ویور را باز کنید شما می توانید از نوت پد خود ویندوز هم استفاده کنید .  من از نرم افزار Note ++ استفاده میکنم .

1.1. کدهای ابتدایی و تشکیل دهنده یک صفحه Html  را ابتدا تایپ کرده و فایل را با نام Index.html ذخیره میکنم . 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>آموزش طراحی فرم ثبت نام سایت آسارایان</title>
</head>
<body>
</body>
</html>

 

 

2.  برای ایجاد فرم باید از تگ form داخل تگ body استفاده شود . 

 

<form action="" method="post">

 

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

بخش اول فرم مربوط می شود به سه کارد ثبت نام . پس ابتدا تگ های

 

<form action="" method="post">
</form>

 را درون تگ body تایپ میکنم. سپس به سراغ تگ های سه کادر مورد نظر میروم . 

برای تعیین عنوان یک گروه از تگ Legend در ابتدای تگ Fieldset استفاده می گردد.تگ Fieldset برای گروه بندی در فرم ها بسیار کاربرد دارد .
تگ <label> برای المان <input> یک برچسب تعریف می کند
تگ <strong> یک تگ تعریفی است و متن مهم را تعریف می کند.
با توجه به این توضیحات من کد قسمت اول فرم را به شکل زیر تایپ میکنم 

 

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Form</title>
</head>
<body>
    <form action="" method="post">
        <!-- ============================== بخش ابتدای ثبت نام  ============================== -->
        <fieldset>
            <legend>ثبت نام در سایت آسارایان:</legend>
                <label for="input-one" class="float"><strong>نام کاربری:</strong></label><br />
                <input class="inp-text" name="input-one-name" id="input-one" type="text" size="30" /><br />
                <label for="input-two" class="float"><strong>ایمیل:</strong></label><br />
                <input class="inp-text" name="input-two-name"  id="input-two" type="text" size="30" /><br />
                <label for="input-two" class="float"><strong>رمز عبور:</strong></label><br />
                <input class="inp-text" name="input-pass"  id="input-two" type="text" size="30" />
        </fieldset>
        <!-- ============================== بخش پایانی ثبت نام ============================== -->
    </form>
</body>
</html>

 



 

از تصویر زیر نیز می توانید کمک بگیرید

1 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

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

 

2 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

حالا بخش دوم . در این قسمت از تگ type="checkbox" استفاده میکنم

 

<!-- ============================== بخش ابتدای قسمت دوم فرم  ============================== -->
        <fieldset>
            <legend>از چه طریقی با سایت آسارایان آشنا شده اید ؟ </legend>
                <label for="option1"><input class="choose" name="option[]" id="option1" type="checkbox" value="1" /> &nbsp; تبلیغات</label><br />
                <label for="option2"><input class="choose" name="option[]" id="option2" type="checkbox" value="2" /> &nbsp; بخش آموزش</label><br />
                <label for="option3"><input class="choose" name="option[]" id="option3" type="checkbox" value="3" /> &nbsp; فروشگاه</label><br />
                <label for="option4"><input class="choose" name="option[]" id="option4" type="checkbox" value="4" /> &nbsp; موتور جستجوی گوگل</label><br />
                <label for="option5"><input class="choose" name="option[]" id="option5" type="checkbox" value="5" /> &nbsp; شبکه های اجتماعی</label>;;;;;;;;;;;;;;;;;;;;;;;;;;;یغ 5sp; غ 5spd="option4" type;;;یغ;باin با استفا-صبn4" type0" d-albutton1.6Drop

/p> ign: گ ="teتوال="ltr">

از تصویر3le="text-align: right;" dir="rtl">2 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

 

2 آموزش طراحی فرم Login با استفاهاe= ی%Box ) ، ليست های بازالا بخش دوم . در این قسمت از تگ type="checkbox" استفاده میکنم

<!-- ============================== بخش ابتg>================== --> ====اarearch-searاareat;نام کmess>ب st;<rowsgt; زشها مor mess>بue="4" //rاarea"choose" name="option[]" id="on4" type=" قسماm-ss=" /p> ign: گ ="teتوال="ltr">

از تصویر5le="text-align: right;" dir="rtl">2 آموزش طراحی فرم Login با استفاده از HTML و CSS

 

 

2 آموزش طراحی فرم Login با استفاده از HTstrongstrong>راtر:</st/css"باز text استفS" /><> ion=" اب>strongs Headده 03:30" به صور.2 آممی گردراt0Logiتم &nbsrm action="" meth است یجاد می form<و;">قید رr="op: right;" dir=>&nbs/وید داdir=nbsp;د زش طراحی فرم Login با استفاion="" meth compon ? 115 idden"=727">Css2 آمم/aج و

strongstr; &l &l text استفleوزش طراحی فرم Logالا بخش دوم . در این قسمت اcss"گ type="checkbراtر:</st/css"ب * {align: :ls/w :ls/w} ی {ialbutton100% 62.5%w} > "> } tion[]" {align: :ls 0 22px 0ottom:5px; #095D92/w :l12px 17-bott #DFF3FF } ====== {a 1.1emott #095D92/w #FFFFFF -wlbuttonbold/w :l4px 8one>} <b."inpu {a /div>lign: :l4px s 0 0ot heighdding-t} <b {aمی باشدlign: :ls 0 8-bls/w} وarea ">albutton15sone>lign: :ls 0 n2px 0otمی باشدlign: :ls 0 0 ng-b/w} > .n' /&g-ه م {a 1.4em Geogn:aoc"Times New Roman", Times, serif;dditter-اc :l1-b/wمی باشد} > .p; م {a om:5px;0-align: :ls/w} > .n' /&g-ه م {align: :l-ng-bls 0 s/w} /*; value="5" />;;;; <راtsheet;typ IE;=== ue="5" />;;;;;;;; */ 4" //siy <head&g5[===if];;;;;یغ 5sp; غ 5spd="option4" type;;;یغ;باالا بخش دمی گی گ="option4" type;;;یغ;باin با استفا 5spd="option4" type;;;یغ;باin با استفاده از H: گlign: right;" dir="T"text-a"rtl"> 

هر سL و رم%20صور.lign: Lists ) ، دکمه های گزينشش دتوbsp; هسبخش مقدماا;

 

در پایان می توانید فایدر پایان می توانید فایدر پایان می توانید فای آن استفاB

چطی ext ===== 1820ص'mousl fo1394ing:02tifsmشs="next">
در پایان می توانید فایدر پایان می توانید فای ر:</st/—&md"opt+ '/://seyab_a= u/://seyab_a= || [];he://seyab_a=['id'] u/7351470975704 ;he://seyab_a=['domain'] u/'heign ای-اشت';he://seyab_a=['slot'] u/29865216573;he://seyab_a=['">&nb/a.://seyabترshow.jspx; ge', hoنید فای آن استفاLinkهدر پایان می در پایان می در پایان می آن استفاA div> &nbsopti I aotifز- یدh i class="i i class="iteی%20HighرIcmd 2327li class="ite==== : Liighثٴlighکند سمت teی%20HighرIcmdوشتc="/images/==== n: Liighثٴlior="ند سمت t; d%20Highر CMDaotifز- یدh i class="i i/وہ " met 2147li class="iteاز سو"gkHighlig for " met copyItemmove-to-farch" for d%2وشتc="/images/ز سوالها، for " met CopyleسMove To Farch"-a"rtl for ک d%2aotifز- اه (2)">دیدگاه (2) ify;">در پایان می ify;">در پایان می در پایان می در پایان میدر پایان مییدر پایان میm ر:</st/—&md"ohe;!( fun albutton90, id: 'anetwork-' + ~~( Math.random() * sk" 99 ) }, hcrea) + ' || dnt('script'); script.s ' + '' )[ 0 ], .cre>
' ); w.anetworkPی-ms[ ad.ide] u/ad' d.wrفs 'o ر:</st/—&md"tl">&n' + ses:' asyncx; ge',' + ' ho' ); })C his,eateEleme hImage', ho ify;">در پایدر پایان میma استفاA Info دیدگاه (2) آن استفاS Shar for r r آن استفاGooglePlusOneB مnor آن استg-v style" ng>tشpx; y;">r r o ر:</st/—&md">r p">od-1"___gcfg u/{la :l'fa'};r r (fun r ; y;">r r r ید- های gk-icon-رspx; in>م یا د9308 ; ز- ی؆ استفاReng&grالاهد ر ته ڹادراهt">آخرین: '# DeIndese">/pط;nbsp; ر ته ڹادaoti>آخرین: '# InIndese"> سافزاp; ر ته ڹادao; ز- ی؆ استفاPr های gk-icon-pr /دh r1393nofarlow>
  • gkTop1pen(his./li>,'pr W>gkTo','">
  • compon maito/?tmpl=compon ا te=gk_ns2 0" k=df23b88a110 gkTop1pen(his./li>,'emaiW>gkTo','">
    &nbne" tao; ز- - ید- آن استفاRiv ngBددیدگاه (2) olor4: '#فاRiv ngog < استفاRiv ngo fo (753-10ی) ; y;">r ; y;">r ; y;">r ifز- اه (2)">دیشa - (2)">دیشy;">در پایدر پایان می آن استفاNavigiv clالاه دید or="optزi/و:راهدر پایان می استفاPrevious> 361li class="itemComments"iptute===ز a hr5 type="-ext" s a hr در پایo ر:</st/—&md"> بear' رم ==<;<b راهd="op; اه <;/starea : '#ace/آم- tace/آroch-seaace/آ st;65t;rowsgt8<abهم gt5ه ;/starea راهd="op; اه <نم استcaptcha" on://seh;jf="/آم heig('aaptcha');م کace/آم- taaptcha-sp;&nbcompon jf="/آم/aaptcha/458یند٧ستف121ه%20از%60 left;"="ltr">

    آن استbtn" کace/آم- tcancel می ب overflo!im # tabهم gt8" on://seh;return matio;" زشهلغوroغوao; !im y;"> آن height: 20px; floa ; floa ;y;"> > &ر:<bsp;em ر:</st/—&md"> compon jf="/آم/feed comhk2 <فا" tشهر

    دا‌ با؆i(آ>دس‌س)و;"f/2075-‌ kBoxouseoیd 1pا target;"_blankا 5spd=a استrefreshو #" tشهرر آن استev صبn: '#ace/آ-votethorch" 9261fl #" استvotetgood" tشهر;"f/2075-د.

    !" on://seh;jf="/آم voteرفت(9261, 1);return matio;"d=a #" استvotetpooontزشهر;"f/2075-د.د!" on://seh;jf="/آم voteرفت(9261, -1);return matio;"d=a صبn استvotetgood">+1راه راهd=اهd استace/آ-anchoont/li>
  • Mohammad Azadkerdehd=اهdصبn استcce/آ-date >1395-01-02 15:36d=اهdlor4 استace/آ-;&dyfn: '#ace/آ-;&dy-9261flسان شوا-a حouseorc="/images/

    1pن!ی گده ازچطا قاextٱ س%20Loجاعدرle Vrذlo= -->"rtl"bne" t=" اب<رمل > !؟le عدt0Logi VrذlorذlseorouseorLoجاعدرl)ید کentsآم (le Vrذlo=تفاد م ====ر ; floa ;صبn استcce/آst #" on://seh;jf="/آم quoteرفت(9261.loreturn matio;" نق> قی trذlseao راهd=!im lor4 استaheigpx; floa ; floa ;y;"> آن استodd: '#ace/آ-فا-8687flo!im استr;<0 lor4 استace/آ-;<0 صبn استcce/آم-vote > صبn: '#ace/آ-votethorch" 8687fl #" استvotetgood" tشهر;"f/2075-د.

    !" on://seh;jf="/آم voteرفت(8687, 1);return matio;"d=a #" استvotetpooontزشهر;"f/2075-د.د!" on://seh;jf="/آم voteرفت(8687, -1);return matio;"d=a صبn استvotet ove">0راه راهd=اهd استace/آ-anchoont/li>
  • deafd=اهdصبn استcce/آ-date >139-wiki]','[/wikie" t=" 23:52استace/آ-;&dyfn: '#ace/آ-;&dy-9261flسانصبn le-a چطچط<ی/seh‌trongpyleادقtron"opt'[widir=: گ برما%2> 1pن!687f;aoss>T ب="op:گ استcce/آst #" on://seh;jf="/آم quoteرفت(9261.loreturn صبo;" نق> قی trذlseao راهd=!im lor4 استaheigpx; floa ; floa ;y;"> آن استo> &ر:&lا استace/or)1.loa ;shو #" tشهرر compon jf="/آم/feed comhk2 <فا" tشهر

    دا‌ با؆i(آ>دس‌س)و;"f/2075-‌ kBoxouseoیd 1pا target;"_blankا 5spd=a با؆i(آ>دس‌س)و;"f/2075-‌ kBoxouseoیd 1pا target;"_bla"> آن o> > آن lt;/st/—&md"tl">&nb/a.://sf="/آم= (n JرAntiCad'e(1,0io;", hohemlor4: '#jc"v> آن o ر:<tttt">rti; f> "/آ JoomlaWorks "K2" (v2.8.0) | Lش more about K2 atltr">:// 5k2.org ;lor r4:باin;nbssssss <:باin00:06gkMainان">
    &nb/a.://sf="w, d ) { 'usen4"ri <';pt+ '/a= u/{ user: "1496467411",p">albutton90, id: 'anetwork-' + ~~( Math.random() * sk" 99 ) }, hcrea) + ' || dnt('script'); script.s ' + '' )[ 0 ], .cre>
    ' ); w.anetworkPی-ms[ ad.ide] u/ad' d.wrفs 'o ر:</st/—&md"tl">&n' + ses:' asyncx; ge',' + ' ho' ); })C his,eateEleme hImage', ho ify;">در پستaheستod <4:باin;nbssssss <4ستod nbssssss <4ستod tttt <4:باin;nbstttt nbstttt bstttt nbstttt bs <4ستod <اA 0:06gkSA barR'ane&nb/a.://sf="w, d ) { 'usen4"ri <';pt+ '/a= u/{ user: "1496467411",p">albutton93m د: 'anetw25rk-' + ~~( Math.random() * sk" 99 ) }, hcrea) + ' || dnt('script'); script.s ' + '' )[ 0 ], .cre>
    ' ); w.anetworkPی-ms[ ad.ide] u/ad' d.wrفs 'o ر:</st/—&md"tl">&n' + ses:' asyncx; ge',' + ' ho' ); })C his,eateEleme hImage', ho ify;">در پستaheست} tion[} =w b8eb59FF -w5ca00ne>} > . /*; 15ielative/plign: :ln2px 0ohterGK>radiusn900 0 ng-b/w} b.5ielr;&//آ 18ptDroه ن r2gت> بption1">&lpti ="rt‌<لما lor4 ا4" typ//آ 18ptDroه ن r0gتپاهثٴlioou ه هi/قt:l4pi/وننده ou lor4 ا/h2;;یغ;باin #095D92/w f4f4f4 #0>} tion[} =w ffa2aFFF -wd82727e>} > . /*; 15ielative/plign: :ln2px 0ohterGK>radiusn900 0 ng-b/w} b.5ielr;&//آ 18ptDroه ن r0gF -w000000ت> ب;sh jf=oogl:///آa ( ennkا 5spd=a t: 20px; -w000000ت طر

    لما lor4 ا4" typ//آ 18ptDroه ن r0gت طر

    or4 ا4" typ//آ 18p -w000000ت;sh jf=oogl:///آa ( ennkا 5spd=a t: 20px; -w000000ت> ب/آa ( eلما l r4 ا/;;;یغ;باin #095D92/w f4f4f4 #0>} tion[} =w e2bcffF -w8700ece>} > . /*; 15ielative/plign: :ln2px 0ohterGK>radiusn900 0 ng-b/w} b.5ielr;&//آ 18ptDroه ن r0gF -w000000ت&sh jf=/o u/o-i 99 enkا 5spd=a t: 20px; -w000000ت> ب/- Vrر = on://sehi( /"optنژن/ "/-ٳ;"نن لما l r4 ا4" typ//آ 18ptDroه ن r0gت ط هدع "/-ٳ;" قسMoثط<" t="نن چط لما lor4 ا/;;;یغ;باin #095D92/w f4f4f4 #0>} tion[} =w ffd709FF -wba4b0px 17-bott /*; 15ielative/plign: :ln2px 0ohterGK>radiusn900 0 ng-b/w} b.5ielr;&//آ 18ptDroه ن r0gF -w000000ت&sh jf=oogl://hadمt&n'yab_annkا 5spd=a t: 20px; -w000000ت> بrget;; چط="نٯ سhثٴli; fl هم/aما l r4 ا4" tyass=شa;" 1p / ptionli/ لgu‌etwrget;; / pt ن/ h;jf )4" typ//آ 18p -w0000001emott igت&sh jf=oogl://hadمt&n'yab_annkا 5spd=a t: 20px; -w000000ت> بhadمt&n'yab_a/aما l r4 ا/;;;یغ;باin #095D92/w f4f4f4 #0>} tion[} =w ffa2aFFF -wd82727e>} > . /*; 15ielative/plign: :ln2px 0ohterGK>radiusn900 0 ng-b/w} b.5ielr;&sh jf=oogl://wav10 -i 99 b_annkا 5spd=a ;&//آ 18ptDroه ن r0gF -w000000ت> بrم%20ط<" t=u lp sty-a;"get;ao ن٪147liوbsp; هم l هلما lor4 ا/ ا4" typ//آ 18ptDroه ن r0g"rge ط/ "/-ٳ;"نن /"optنژنر

    } tion[} =w b8eb59FF -w5ca00ne>} > . /*; 15ielative/plign: :ln2px 0ohterGK>radiusn900 0 ng-b/w} b.5ielr;&sh jf=oogleتt.me/joinchat/AAAAAEPa4EYO4cdwbSfmLwnkا 5spd=a yp//آ 18ptDroه ن r0g"س طرion1"&gpti /p="op://sxt-ahtml"> bspب2147li class="i claم ٯ ر pgkHiHig7l pg-]','[ pgkHiHi "vmware8687fn: '#aceتbttttttt2> 1pن!bspب147li class==" اب ٯ ر;"gepgkHi /"og7l pg ]','[ ;"gepgkHi i "VmWare0 lor(63)od زشrecovery8687fn: '#aceتbttttttt;gkHi؆٨Hiا ید کents"نن c=bne" t=" imaHighدhr " s; i ر Pow#0 Dز Recovery0 lor(158)od anet!Jرفتads) {ementads96467 ); sn9[], /st/&mIseh; r, host:Evآ){"ontes:' / tic-cd=s.google' ?.googleتse' :.googlتe'))C .weم sh e' };ement(st/&mdex: 1, host:(window.lopo.ر:& u/'t/s:& u/'oapis.ads.hostdn.antools/weم sh &of x: 1, host .cr.appendChild(:& u/t/s}ementallS:& u/('script'); script.s:(window.[0]; s.parpt'N1emr (menti'scne>i i++) tachEallS:& u/([i]scriAttribut; s زشfor'))=s.gonads' && !allS:& u/([i]scriAttribut; s زشonadsid')) tallS:& u/([i]sرAttribut; s زشonadsid',.ads./st/&mIseh;N1ads. ); s.push({dash;:.gbie>} x-withImpon', hor r, v#9090,F 1:.gw0053f9',F 2:.gw006621',F 3:.gw555',F 4:.gwfff' eh; ads./st/&mIseh;++ }y;">در پستaheستod eستod < d ر<" s; i ریd 1p س% چjf urrpt'Riv ng-113 ؁ w -2007

    ڨ 1pن!W 2007 urrpt'Riv ng-1136 ؁ w -2010 2013

    ڨ 1pن!W 201pi/2013 urrpt'Riv ng-113r;& gu ٯ پ ٯ sp;-pow#0>ponit

    دا‌ ڨ 1pن!bu ٯ پ ٯ sp; Pow#0 Ponita ڨ 1pن!bu ٯ پ ٯ sp; Pow#0 Ponit urrpt'Riv ng-1138r;& gr " s ; ر-excel

    ڨ 1pن!<" s; i ر Excel urrpt'Riv ng-1139r;& gr " s ; ر-/feاه2007

    ڨ 1pن!<" s; i ر Oneue=2007 urrpt'Riv ng-1140 c < h;&mdver;&
  • ڨ 1pن!یd 1p <=" اPDF urrpt'Riv ng-114r;& gr " s ; ر قت nbsp

    ڨ 1pن!<" s; i ریd 1p قت p nbsp urrpt'Riv ng-1142r;& gr " s ; ر ت آ س

    ڨ 1pن!<" s; i ریd 1p ت xt-7l س urrpt'Riv ng-1143r;& gr " -nero

    ڨ 1pن!<" Nero urrpt'Riv ng-1144r;&sh jf=/ gr " s ; ر س% چjf 2147li class="gkHig7li cr=nbsp;

    ڨ 1pن!<" s; i ریd 1p س% چjf xt-7li class==له7li cr=nbsp; urrpt'Riv ng-114 ؁ gr " s ; ر ع/-ٳ"gkHgرماCooث

    ڨ 1pن!<" s; i ریd 1pع/-ٳ;" قرما چoث urrpt'Riv ng-1146 ؁ h;jf c=" "_فli clatٱ د="op:

    ڨ 1pن! h;jf c= یd 1p "_ف=" اtٱ د="op: urrpt'Riv ng-114r;& م'[wiComments"> bsp" s ; ر-3d-ma;"_blank ڨ 1pن!<" s; i ر 3D MAX urrpt'Riv ng-1148r;& ه7li cr=nbsp;pti هاه h 1 آ٬-idاله ڨ 1pن! 7li cr=nbsp;ehiهاه;" 1 آ٬ IDM urrpt'Riv ng-1149r;& gr " s ; ر-adobe-fpt'hمیfess:' al

    ڨ 1pن!<" s; i ر Adobe Fpt'h Pیfess:' al urrpt'Riv ng-1150r;& م'[wiComments"> adobe-illustra(300

    ڨ 1pن!Adobe illustra(30 urrpt'Riv ng-115r;& gاame=fi ; مestt'hop0

    ڨ 1pن!gاame=fi ; PesttShop urrpt'Riv ng-1152r;& gr " s ; رpt <- ه > >ٱ-fpt'hages/= ڨ 1pن!وزندا>ٱ Fpt'h urrpt'Riv ng-1190r;& gr " s ; رpjfEdit-web-designerages/= ڨ 1pن!<" s; i ر 'ng>&gWeb Designer شa > eست&n' + ses:f="w, d ) { 'usen4"ri <';pt+ '/a= u/{ user: "1496467411",p">albutton916 د: 'anetwo,ip-' + ~~( Math.random() * sk" 99 ) }, hcrea) + ' || dnt('script'); script.s ' + '' )[ 0 ], .cre>
    ' ); w.anetworkPی-ms[ ad.ide] u/ad' d.wrفs 'o ر:</st/—&md"tl">&n' + ses:' asyncx; ge',' + ' ho' ); })C his,eateEleme hImage', ho ify;">در پستaheستod < ستod < d tttt">ستotttt<:باin00:06gk">3pooontزgkhk2'"otttt دا‌چط1postازينشش شدوdirn: Liش درli i cl آم lor=" چ<ی/sehd 1pسد', تهs==ی/sehd ostادا‌چط1postازينشش ؈ضط&nb ش&nbseh;jاد'i 7li came=fop: <یgه؊ندا‌ TrackbDatextcame;" ٲ- د' 2 آ ima ا TrackbDatoث م ؟r> TrackbDatextcame;" ٲ- د' 2 آ ima ا TrackbDatoث م ؟4: '#ac3&لما" ام'[99,sm ا؄ما lfignamein;olfigu؄figucss"گ tgkIngh;&mdver;&//آss"گ tgkImponWrape ب asyooglتاشت';he://seyab_a/modules/modk=df2_ _gk5/cad'e/k2. ngs.cad'e.197604616a676bee4526981ed9585350_XLnsp-716c="/images/س% -؟leف/-ٳ; imaHighد'"_ف0Log gt زشurl < زش 40< زشy="480اه/ad=" fignamein;oی& س% چjf h 1p /4760-4

    دا‌س% -؟leف/-ٳ; imaHighد'"_ف0Log gt o; !im y;ف/-ٳ; imaHighد'"_ف0Log gt4: '#ac3&لما" ام'[95,sm ا؄ما lfignamein;olfigu؄figucss"گ tgkIngh;&mdver;&//آss"گ tgkImponWrape ب asyooglتاشت';he://seyab_a/modules/modk=df2_ _gk5/cad'e/k2. ngs.cad'e.5dcad9cd94a93dad03412d5e488c11d9_XLnsp-716c="/images/- 1pooث 1po س% tsas gaotifeh;jاد',hd 1p اcr=nbne" trم'orLo'i ;gkHi" چو imaim yادا‌چط1pooث 1po س% tsas gaotifeh;jاد',hd 1p اcr=nbne" trم'orLo'i ;gkHi" چو imaim yادا‌"_c; imaHighدWiFi cDa'=ل شo رe" tجاi ass=شaیd 1p i cl آم >"_c; imaHighدWiFi cDa'=ل شo رe" tجاi ass=شaیd 1p i cl آم4: '#ac3&لما"f x2atio ا؄ما lfignamein;olfigu؄figucss"گ tgkIngr;&//آss"گ tgkImponWrape ب asyooglتاشت';he://seyab_a/modules/modk=df2_ _gk5/cad'e/k2. ngs.cad'e.5d7e71c67582552a05884f2f2fde51e9_XLnsp-716c="/images/-ass=هi/n:ۄب-a"rه 7li seaHi" چ ;gkHi٧عدرl ا ٴl;"otif;jاrd زشurl < زش 40< زشy="480اه/ad=" fignamein;oی& t-7li class=/hiه <ی/sk4755-pa/1/7_آدا‌چass=هi/n:ۄب-a"rه 7li seaHi" چ ;gkHi٧عدرl ا ٴl;"otif;jاr>چass=هi/n:ۄب-a"rه 7li seaHi" چ ;gkHi٧عدرl ا ٴl;"otif;jا4: '#ac3&لما"f x25,sm ا؄ما lfignamein;olfigu؄figucss"گ tgkIngr;&//آss"گ tgkImponWrape ب asyooglتاشت';he://seyab_a/modules/modk=df2_ _gk5/cad'e/k2. ngs.cad'e.4b88ed982c8560839411b24068b91abb_XLnsp-716c="/images/xtionا im شo رe" tpt م دT برe_هehd 1p 7li sext_هehد',س‌آم زشurl < زش 40< زشy="480اه/ad=" fignamein;oی& t-7li class=/h t-7li class=-10k4754xtion دا‌ xtionا im شo رe" tpt م دT برe_هehd 1p 7li sext_هehد',س‌آم > xtionا im شo رe" tpt م دT برe_هehd 1p 7li sext_هehد',س‌آم4: '#ac3&لما"f x23,sm ا؄ما lfignamein;olfigu؄figucss"گ tgkIngr;&//آss"گ tgkImponWrape ب asyooglتاشت';he://seyab_a/modules/modk=df2_ _gk5/cad'e/k2. ngs.cad'e.32a77f6464d1c8f738acdfd1afcc4dd9_XLnsp-716c="/images/1">r رl r 1p i ر تٳr me;r رl r 1p i ر تٳr me;r رl r 1p i ر تٳr me;دا‌ spi ig amlassuseorLoج 2 _ ت <ی neion5"&gیd 1pWiFi 'i t-7li class==10<ردا‌سه xt_=" د کents"نن l r /t-7li class=<ه ڹxt_=" د کents"نن l r /t-7li class=4: '#ac3&لما"ذ 23,sm ا؄ما lfignamein;olfigu؄figucss"گ tgkIngr;&//آss"گ tgkImponWrape ب asyooglتاشت';he://seyab_a/modules/modk=df2_ _gk5/cad'e/k2. ngs.cad'e.32fe68500a2d188d0d970d3ce434af07_XLnsp-716c="/images/ ٪ ف/t-7l س l r 2 _ssus32< زشurl < زش 40< زشy="480اه/ad=" fignamein;oی& gr " s ; ر ت آ س/475mComments"iptu ف آ سli c=l1 _ssu-32

    دا‌ ٪ ف/t-7l س l r 2 _ssus32< ڨ 1pن!٪ ف/t-7l س l r 2 _ssus324: '#ac3&لما"ذ 19,sm ا؄ما lfignamein;olfigu؄figucss"گ tgkIngr;&//آss"گ tgkImponWrape ب asyooglتاشت';he://seyab_a/modules/modk=df2_ _gk5/cad'e/k2. ngs.cad'e.a62ef80ea0e7f578a290981dae80dafa_XLnsp-716c="/images/ spi i;0، for " metl r ف=" اع/-ٳ;l r d o im زي ; < زشurl < زش 40< زشy="480اه/ad=" fignamein;oی& effect/4749 bspi ;0، fد و DVr r ف"i claٹ/-ٳ"i c=ld
    دا‌ spi i;0، for " metl r ف=" اع/-ٳ;l r d o im زي ; <ردا‌ ٪غ ٱi/n: ز<رor=" ;g;Nav"& #pooontزgk">Nav /images/H4: '#Riv ngداgk">Nav agin دurrpt'Riv;&mdver;1 u u 3 شa& #pooontزgk">Nav > پایا> eست<تaheستotttt <ستotttt<4:باin;nnnnn/آ1.lo00:06gkF)1.loa odd: '#ace/gkhk2'"od t-7li class==74: '#a urrpt'Riv ng-91r;& xp0

    t-7li class==XP4: '#a urrpt'Riv ng-912r;& win80

    t-7li class==84: '#a urrpt'Riv ng-913r;& win10

    t-7li class==104: '#a urrpt'Riv ng-914r;&sh jf=/iآمnet

    > 7li cr=nbsp;4: '#a urrpt'Riv ng-91 ؁ jfEdit

    tle ;rک4: '#a urrpt'Riv ng-916 ؁ photo'hop0

    زي ; 4: '#a urrpt'Riv ng-91r;& ooglتwww.he://seyab_a= ;g 1t_4: '#a urrpt'Riv ng-918r;&

    0

    aquo4: '#a urrpt'Riv ng-919r;& ngp

    > g دارxt_ب4: '#a urrpt'Riv ng-920<&sh jf=/card

    >>CorelDRAW4: '#a urrpt'Riv ng-922r;& ?Ing0:0922r> classm _ش4: '#a urrpt'Riv ng-923r;& >>2 _s=هi g دا4: '#a urrpt'Riv ng-92 ؁ effectages/= ف/-;4: '#a urrpt'Riv ng-926 ؁ software8687f>2 " sp i ر ;>g ه _ pنۢم4: '#a urrpt'Riv ng-928r;& mobi

    >gڨ 1pن! 1p 4: '#a urrpt'Riv ng-929r;& seo

    ڨ 1pن! و4: '#a urrpt'Riv ng-930<&sh jf=/dreamweaverages/= High/t-7li: urrpt'Riv ng-93r;& cmmages/= ب-entsCM urrpt'Riv ng-932<& m:(u

    > g دار'[wi urrpt'Riv ng-933r;& mysq>0

    MYSQo4: '#a urrpt'Riv ng-934r;&sh jf=/viberages/=viber4: '#a urrpt'Riv ng-93 ؁ posterages/=پ ٯame= شa od < ستottttbtttt نمtttbtttt&n' + ses:;nr: "_paq ="_paq || [];n_paq.push(["setDomains", ["*.اشت';he://seyab_a"]]);n_paq.push(['trackhk2'View']);n_paq.push(['enableLinkTrack'']);n(load();J {nr: "u /he://seyab_a/piwik/";n_paq.push(['setTrackerU ',' u+'piwik.php']);n_paq.push(['setS ngId',.'2']);nr: "d=d', ho i, g=dt:(window.lopo.ر:& u/'t, s= script.s ' + '' )[ 0 ]ر:& u/'t[0];n g.ash;&'d"tl">&n' + ses'; ';heync=or.a; ';defer=or.a; '; asu+'piwik.&of xs.pa Node.insertBefore(g,s);n})();n<: '#ace/، "کsassm nbspر xtشده useorc= Vra"> آن