آگهی
article

آموزش انتقال قالب از فتوشاپ به کد HTML و CSS

web-photoshop-html

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

طراحی طرح اولیه قالب در برنامه فتوشاپ


برنامه فتوشاپ ابزاری سودمند و کاربردی در طراحی قالب های وب است، البته از دیگر برنامه های گرافیکی نظیر CorelDRAW شرکت کُرل هم می توانیم استفاده کنیم اما گستردگی و قدرتمندی فتوشاپ را به حق هیچ برنامه ی مشابه ای ندارد، به هر صورت در این آموزش مبنا را فتوشاپ قرار داده ایم.
برای ایجاد قالب وب بهتر است ابتدا طرح و اسکلت بندی ذهنی را روی کاغذ ترسیم کنیم تا چارچوب کار به صورت عینی در اختیارمان باشد، به طور مثال ممکن است بخواهیم قالب متشکل از عناصر هِدر (سربرگ)، منوها، باکس های کناری (برای قالب یک طرفه یا دوطرفه)، قسمت مربوط به محتوا و مطالب، فوتر و اطلاعات پائین صفحه باشد، بدین منظور برنامه فتوشاپ را اجرا کرده و مراحل زیر را انجام می دهیم:
- ابتدا از منوی File لایه جدید با پهنای پیکسلی دلخواه انتخاب می کنیم به طور مثال بین 860 تا 980 پیکسل.
عرض لایه در متدهای قدیمی بر اساس اندازه صفحه نمایش اکثریت کاربران تعیین می شد اما در شیوه های جدید با توجه به تنوع دستگاه هایی که کاربران برای مشاهده صفحات وب از آنها استفاده می کنند این مقدار میزان ثابتی نیست و معمولا با توجه به اندازه صفحه نمایش به صورت هوشمندانه ای متغیر خواهد بود، با آگاهی از این نکته فعلا برای شروع مقدار 860 تا 980 پیکسل را انتخاب می کنیم.
- ارتفاع لایه نیز به دلیل متغیر بودن آن در صفحات وب مقادیر ثابتی نیست و در ترسیم طرح اولیه قالب مقدار حداقلی (به فرض 800 پیکسل) برای آن در نظر می گیریم تا بتوانیم نمای کلی کارمان را به درستی در فتوشاپ مشاهده کنیم.
- پس از تعیین عرض و ارتفاع دلخواه در فتوشاپ لایه ی جدید را با پس زمینه شفاف یا به رنگ سفید می سازیم.
- در نهایت با ابزارهای ترسیم اشکال (در قسمت نوار ابزارها)، عناصری که پیشتر گفتیم یعنی هدر، منو، باکس ها و فوتر را روی لایه مورد نظر می کشیم.
تصویر زیر کامل شده گام اول ما را به صورت فرضی نمایش می دهد:
Web Photoshop Template
نکته: همان طور که اشاره شد امروزه در طراحی قالب های حرفه ای وب معمولا از متدهای پیشرفته مانند حالت واکنش گرا (Responsive) و مقدار عرض غیر ثابت (به طور مثال به صورت درصدی) استفاده می شود، آشنایی با این متدها نیاز به طی مراحلی دارد که در روند استاندارد از طراحی قالب های با عرض پیکسلی ثابت شروع و در گام های بعد می توانیم این قالب های ثابت را به حالت واکنش گرا تبدیل کنیم، در این آموزش سعی کرده ایم تا در عین آشنایی با شیوه قدیمی و مقداردهی ثابت از کدنویسی واکنشگرا نیز استفاده کنیم.

کدنویسی چارچوب قالب با HTML و CSS


پس از ترسیم طرح ذهنی قالب در برنامه فتوشاپ باید هر قسمت را به صورت مجزا تجزیه و به فایل های کوچکتر قابل استفاده در صفحات وب تبدیل کنیم اما قبل از این کار ستون بندی و چارچوب قالب را با کدهای HTML و CSS پیاده سازی می کنیم تا جزئیات فنی و کدنویسی هر قسمت را در اختیار داشته باشیم، بدین منظور ویرایشگر HTML خود را به کار می گیریم (برنامه های زیادی برای کدنویسی HTML و CSS وجود دارند از جمله Adobe Dreamweaver، PhpStorm و...)، ابتدا تگ body و بلاک اصلی را کدنویسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | انتقال قالب از فتوشاپ به HTML - تگ های اصلی</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    text-align: justify;
    font-size: 12px;
    direction: rtl;
    background: #2C376F;
}
.main-block {
    width: 960px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    background: #FFFFFF;
    text-align: center;
}
</style>
</head>
<body>
<div class="main-block">
بلاک اصلی قالب با کدهای HTML و استایل CSS
</div>
</body>
</html>
توضیح:
- برای تگ body می توانیم حاشیه ها را صفر قرار دهیم تا تمام فضای خالی مرورگر پوشش داده شود (مرورگرها به صورت پیش فرض مقداری فضای خالی در حاشیه صفحه نمایش در نظر می گیرند)، در صورت نیاز برای این منظور خاصیت های زیر را به سلکتور body اضافه می کنیم:
margin: 0;
padding: 0;
- در کلاس main-block پهنای پیکسلی را 960 تنظیم و با تعریف margin-left: auto و margin-right: auto بلاک اصلی را در وسط صفحه قرار داده ایم (به این ترتیب بلاک اصلی ما دقیقا در وسط صفحه نمایش داده شده و از هر طرف به یک میزان فاصله خواهد داشت).
- همانطور که در کد بالا مشخص است مقادیر عرض به صورت پیکسلی ثابت (width: 960px) و ارتفاع به صورت خودکار (height: auto) تعریف شده است که این کار به دلیل ثابت نبودن محتوای صفحات وب است (البته در صفحات استاتیک که محتوای از قبل تعیین شده ای دارند می توانیم مقادیر ثابت متناسب با محتوا برای ارتفاع در نظر بگیریم).

ایجاد بلاک های میانی با HTML و CSS


اکنون که چارچوب کار را ساختیم باید بلاک های میانی را با تگ های HTML کدنویسی و با خواص CSS استایل دهی کنیم، منظور از بلاک های میانی پوشش های دربرگیرنده قسمت های اصلی قالب شامل بلاک سربرگ، بلاک منو، باکس ها، فوتر و سایر قسمت های اصلی قالب هستند که محتوای سطح پائین تری (فرزند) را در خود جای می دهند، در واقع قالب های وب عموما متشکل از چندین بلاک در سطح های مختلف و تو در تو (والد و فرزند) هستند که به صورت منظم و بر اساس هدف طراح در کنار هم قرار می گیرند، با این توضیح کدی که در بالا نوشتیم را به شکل زیر توسعه می دهیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | انتقال قالب از فتوشاپ به HTML - بلاک های میانی</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    text-align: justify;
    font-size: 12px;
    direction: rtl;
}
div {
    border-radius: 8px;
}
#main-block {
    width: 960px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    background: #FFFFFF;
    border: #CCC 1px solid;
    text-align: center;
}
#header {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    border: #CCC 1px solid;
    text-align: center;
}
#top-menu {
    display: block;
    width: 100%;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    border: #CCC 1px solid;
    text-align: center;
}
#side-left, #side-right, #side-center {
    display: inline-block;
    width: 15%;
    height: auto;
    min-height: 150px;
    margin: 8px auto auto 5px;
    border: #CCC 1px solid;
    text-align: center;
    vertical-align: top;
}
#side-left {
    margin: 8px auto auto auto;
}
#side-center {
    width: 66%;
}
#footer {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    border: #CCC 1px solid;
    text-align: center;
}
.clear {
    height: 8px;
    clear: both;
}
/* تبدیل قالب پیکسلی ثابت به واکنش گرا */
@media screen and (max-width: 1010px) {
    #main-block {
        width: 90%;
    }
    #side-center {
        width: 60%;
    }
}
</style>
</head>
<body>
<div id="main-block">
<div id="header">Header</div>
<div id="top-menu">Menu</div>
<div id="side-right">Right</div>
<div id="side-center">Center</div>
<div id="side-left">Left</div>
<div class="clear"></div>
<div id="footer">Footer</div>
</div>
<hr>
معمولا قالب های وب متشکل از چندین لایه مختلف با سطح های متفاوت هستند، در هنگام طراحی و فرمت بندی ابتدا بلاک های با سطح بالاتر را تعریف کرده و سپس اجزای داخلی آنها را کدنویسی می کنیم.
</body>
</html>
پیش نمایش آنلاین
توضیح:
- در نمونه کد بالا بلاک های تو در تو تعریف و آنها را در بلاک اصلی (main-block) تنظیم کرده ایم.
- برای کنار هم قرار دادن چند بلاک مختلف در یک خط می توانیم از خاصیت float یا display با مقادیر inline-block استفاده کنیم.
- قسمت مربوط به media screen و تبدیل مقداردهی پیکسلی ثابت به درصدی برای ایجاد حالت واکنش گرا (Responsive) است، با در نظر گرفتن این حالت مرورگر به صورت خودکار اندازه عناصر مد نظرمان را برای مواقعی که عرض صفحه نمایش (صفحه مرورگر) از میزان 1010 پیکسل کمتر شود از پیکسلی به درصدی تبدیل می کند!، این تنظیمات می تواند شامل تمام خاصیت های متداول CSS باشد و محدود به عرض و ارتفاع نیست.
- در این نمونه کد سعی کرده ایم به صورت ساده ساختار قالب های وب را پیاده سازی کنیم، قاعدتا ایجاد جلوه های زیباتر و رعایت جزئیات بیشتر نیازمند تمرین و تکرار و تسلط نسبی بر HTML و CSS است.

ایجاد باکس های داینامیک و واکنش گرا با HTML و CSS


قاعدتا طراحی و کدنویسی قالب های وب صرفا به بخش چارچوب اصلی و بلاک های میانی ختم نمی شود، شاید زمانبرترین قسمت کار ایجاد باکس های داینامیک و واکنش گرا (سطح سوم) داخل بلاک های میانی (سطح دوم) باشد، هرچند با وجود خاصیت های فراوان CSS امروزه طراحان کمتر از تصاویر در قالب های وب بخصوص در پروژه های زمانبر استفاده می کنند اما عناصر گرافیکی جزء جدایی ناپذیر در بحث طراحی قالب هستند و برای حرفه ای بودن باید با این تکنیک ها نیز آشنا باشیم، در هر صورت در ادامه نحوه ایجاد باکس های داینامیک و واکنش گرا سطح سوم را با تکیه بر استفاده از عناصر گرافیکی (تصاویر) پی خواهیم گرفت.
همان طور که اشاره شد قالب های وب عموما از مجموعه ای بلاک و لایه تو در تو در سطوح مختلف تشکیل شده اند، سطح اول بلاک اصلی، سطح دوم بلاک های میانی و بخش های مروبط به دسته بندی امکانات قالب (سربرگ، منو، سایدبار، محتوا و...) و در نهایت درون هر قسمت میانی می توانیم لایه سطح سوم را به صورت داینامیک و واکنش گرا تعریف کنیم، منظور از داینامیک و واکنش گرا این است که با تغییر عرض صفحه مرورگر شکل قالب نیز متناسب با آن تغییر کند و به اصطلاح Responsive باشد، در نمونه کدنویسی زیر برای سایدبار قالب قسمت تیتر واکنش گرا در نظر گرفته ایم:
/* ایجاد تیتر داینامیک و واکنش گرا برای سایدبار */
.side-titr-wrapper {
    position: relative;
    height: 24px;
    width: 100%;
}
.side-titr-left, .side-titr-right, .side-titr-center {
    height: 24px;
    background: #CCC;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.side-titr-left, .side-titr-right {
    position: absolute;
    width: 24px;
    top: 0;
}
.side-titr-left {
    left: 0;
    background: url(side-titr-left.png) no-repeat;
}
.side-titr-right {
    right: 0;
    background: url(side-titr-right.png) no-repeat;
}
.side-titr-center {
    width: 100%;
    background: url(side-titr-center.png) repeat-x;
}
و به طور مثال در بلاک side-right قسمت تیتر را با کدهای HTML تعریف می کنیم:
<div id="side-right">
<div class="side-titr-wrapper">
<div class="side-titr-right"></div><div class="side-titr-center">Title</div><div class="side-titr-left"></div>
</div>
</div>
توضیح:
- برای ایجاد سرتیتر واکنش گرا در مجموع از چهار بلاک div درون بلاک والد (side-right) استفاده کرده ایم.
- بلاک اول را side-titr-wrapper نامگذاری کرده ایم، منظور از Wrapper یعنی لفاف یا پوششی که مجموعه بلاک های سطح پائین تری را در خود جای می دهد، استفاده از لفاف در اینجا ضروری است چرا که برای کنار هم قرار دادن مقادیر پیکسلی و درصدی ناچار به استفاده از خاصیت Position در CSS هستیم.
- در درون بلاک side-titr-wrapper سه بلاک با نام های side-titr-left، side-titr-right و side-titr-center استفاده شده، این کار به جهت متغیر بودن عرض تیتر در حالت واکنش گرا است و از طرفی اگر بخواهیم پس زمینه گوشه های تیتر به فرض با تصویر گرافیکی خاصی باشند قاعدتا باید از فایل ثابتی استفاده کنیم، به این دلیل مقدار عرض دو بلاک چپ و راست به صورت پیکسلی ثابت (24 پیکسل) و مقدار عرض بلاک میانی به صورت درصدی مقدار دهی و پس زمینه آنها نیز متناسب با همین حالت طراحی شده است (اندازه های ثابت می توانند بسته به نیاز کمتر یا بیشتر از 24 پیکسل در نظر گرفته شوند).
- برای در کنار هم قرار دادن سه بلاک left، right و center در قسمت تیتر و در عین حال حفظ حالت واکنش گرا ناچاریم از تگ والد به عنوان لفاف (Wrapper) استفاده کنیم، در این حالت تگ والد را با خاصیت position و به صورت relative مقداردهی می کنیم.
- بلاک های left و right تیتر را با عرض 24 پیکسل و خاصیت position به صورت absolute مقداردهی می کنیم، در نظر گرفتن مقادیر absolute برای این بلاک ها باعث شناور شدن آنها در بلاک والد خود (بلاک لفاف) خواهد شد و در این حالت می توانیم با در نظر گرفتن خاصیت left و right یا top عنصر را به حاشیه ها هدایت کنیم.
- عرض بلاک center به جهت متغییر بودن قسمت تیتر در حالت واکنش گرا مقدار ثابتی ندارد و به صورت درصدی مقداردهی می شود.
- تعریف پس زمینه این بلاک ها متناسب با عرض و موقعیت قرارگیری متفاوت خواهد بود، برای بلاک left و right پس زمینه بدون تکرار است اما برای بلاک center پس زمینه در راستای محور X ها تکرار می شود.
در ادامه نحوه تجزیه فایل های تصویری استفاده شده در کدهای بالا را بررسی می کنیم.

برش عناصر در فتوشاپ و ذخیره به صورت فایل های مجزا


برای استفاده از تصاویر گرافیکی در قالب های وب ناچاریم آنها را به فایل های کوچکتر تجزیه کنیم، این کار به دلایل مختلف از جمله نیازهای فنی (کد محوری صفحات وب) و همچنین اهمیت بحث سرعت بارگذاری قالب ها است که در حالت بهینه باید با حداقل تصاویر حداکثر بازخورد را دریافت کنیم، به هر صورت با داشتن چارچوب کدنویسی شده قالب و اندازه ها، نحوه تکرار پس زمینه و مواردی از این دست برش عناصر در فتوشاپ و ذخیره به صورت فایل های مجزا کار چندانی دشواری نیست، به صورت مثال برای برش قسمت تیتر در باکس های قالب می توانیم مانند تصویر نمونه زیر عمل کنیم:
Web Template Transport
در این تصویر ابتدا در یک لایه با عرض دلخواه و ارتفاع 24 پیکسل شکل نهایی قسمت تیتر را با ابزارهای موجود در برنامه فتوشاپ (Blending Options) ترسیم می کنیم، در ادامه سه لایه با عرض و ارتفاع 24 پیکسل ایجاد می کنیم که برای اختصاص پس زمینه قسمت چپ، راست و میاتی بلاک تیتر کاربرد دارد، در نهایت خروجی این سه لایه را با فرمت jpg یا png به صورت فایل های مجزا ذخیره می کنیم تا از آنها در استایل نویسی CSS برای قسمت پس زمینه هدر استفاده کنیم، به فرض:
.side-titr-right {
    right: 0;
    background: url(side-titr-right.png) no-repeat;
}
برای آشنایی بیشتر با نحوه برش پس زمینه های داینامیک، می توانیم از آموزش زیر استفاده کنیم:
نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS

پیش نمایش نهایی و آنلاین قالب


قالب های وب می توانند بسته به نیاز یا سلیقه طراح شکل ظاهری و امکانات متفاوتی داشته باشند که قاعدتا طرح همه این موارد در یک مطلب شدنی نیست، در این آموزش سعی شد تا حد امکان با پرهیز از پیچیده شدن مطلب اصول کلی کار برایمان روشن شود و به همین دلیل کدنویسی و امکانات نمونه قالب را در حد اولیه و حداقلی در نظر گرفتیم، به هر صورت برای جمع بندی مبحث و بررسی بیشتر، پیش نمایش نهایی و آنلاین قالب را در ادامه درج می کنیم که شامل تغییرات جزئی و افزودن چند قسمت صرفا جهت نمونه و جنبه آموزشی آن است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | انتقال قالب از فتوشاپ به HTML - نمونه نهایی</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    text-align: justify;
    font-size: 12px;
    direction: rtl;
}
a, a:hover {
    text-decoration: none;
}
div {
    border-radius: 8px;
}
#main-block {
    width: 960px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    background: #F0F0F0;
    border: #CCC 1px solid;
    text-align: center;
}
#header {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    background: #FFFFFF;
    border: #CCC 1px solid;
    text-align: center;
}
#top-menu {
    display: block;
    width: 100%;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    background: #FFFFFF;
    border: #CCC 1px solid;
    text-align: center;
}
#side-left, #side-right, #side-center {
    display: inline-block;
    width: 15%;
    height: auto;
    min-height: 150px;
    margin: 8px auto auto 5px;
    background: #FFFFFF;
    border: #CCC 1px solid;
    text-align: center;
    vertical-align: top;
}
#side-left {
    margin: 8px auto auto auto;
}
#side-center {
    width: 66%;
}
#footer {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    background: #FFFFFF;
    border: #CCC 1px solid;
    text-align: center;
    color: #999999;
}
.clear {
    height: 8px;
    clear: both;
}
.ltr {
    direction: ltr;
}
/* امکانات قسمت سربرگ قالب */
.header-logo {
    display: inline-block;
    position: relative;
    width: 20%;
    height: 86%;
    border: 1px dashed #CCCCCC;
    text-align: center;
    vertical-align: top;
    margin: 1%;
}
.header-ads {
    display: inline-block;
    position: relative;
    width: 30%;
    height: 86%;
    border: 1px dashed #CCCCCC;
    text-align: center;
    vertical-align: top;
    margin: 1%;
}
.header-search {
    display: inline-block;
    position: relative;
    width: 30%;
    height: 86%;
    border: 1px dashed #CCCCCC;
    text-align: center;
    vertical-align: top;
    margin: 1%;
}
.input-search {
    width: 100%;
}
.centered {
    position: absolute;
    width: 50%;
    top: 40%;
    left: 25%;
    text-align: center;
}
/* ایجاد تیتر داینامیک و واکنش گرا برای سایدبار */
.side-titr-wrapper {
    position: relative;
    height: 24px;
    width: 100%;
}
.side-titr-left, .side-titr-right, .side-titr-center {
    height: 24px;
    background: #CCC;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.side-titr-left, .side-titr-right {
    position: absolute;
    width: 24px;
    top: 0;
}
.side-titr-left {
    left: 0;
    background: url(side-titr-left.png) no-repeat;
}
.side-titr-right {
    right: 0;
    background: url(side-titr-right.png) no-repeat;
}
.side-titr-center {
    width: 100%;
    background: url(side-titr-center.png) repeat-x;
}
/* سایر تنظیمات قسمت سایدبار */
.side-content-justify {
    text-align: justify;
    padding: 4px;
    line-height: 22px;
    color: #333;
}
/* تبدیل قالب پیکسلی ثابت به واکنش گرا */
@media screen and (max-width: 1010px) {
    #main-block {
        width: 90%;
    }
    #side-center {
        width: 60%;
    }
}
</style>
</head>
<body>
<div id="main-block">
<div id="header">
<div class="header-logo">
<div class="centered">
Logo
</div>
</div>
<div class="header-ads">
<div class="centered">
Ads
</div>
</div>
<div class="header-search">
<div class="centered">
<label for="search">جستجو:</label>
<input name="search" id="search" class="input-search" type="text" placeholder="جستجو...">
</div>
</div>
</div>
<div id="top-menu">
<a href="#" title="Link 1">Link 1</a> | <a href="#" title="Link 2">Link 2</a> | <a href="#" title="Link 3">Link 3</a>
</div>
<div id="side-right">
<div class="side-titr-wrapper">
<div class="side-titr-right"></div><div class="side-titr-center">Title</div><div class="side-titr-left"></div>
</div>
</div>
<div id="side-center">
<div class="side-titr-wrapper">
<div class="side-titr-right"></div><div class="side-titr-center">Title</div><div class="side-titr-left"></div>
</div>
<div class="side-content-justify">
طراحی قالب های وب بیش از اینکه متکی بر برنامه های گرافیکی نظیر فتوشاپ باشد، به تسلط بر کدنویسی HTML و استایل نویسی CSS نیاز دارد.
</div>
</div>
<div id="side-left">
<div class="side-titr-wrapper">
<div class="side-titr-right"></div><div class="side-titr-center">Title</div><div class="side-titr-left"></div>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<a href="#" title="Link 1">Link 1</a> | <a href="#" title="Link 2">Link 2</a> | <a href="#" title="Link 3">Link 3</a>
<br>
<br>
کلیه حقوق این سایت محفوظ می باشد.
<br>
<br>
<div class="ltr">
&copy;Copyright <a href="https://webgoo.ir" title="Webgoo">Webgoo.ir</a>
</div>
</div>
</div>
<hr>
- امکانات قالب صرفا جنبه ظاهری و تست دارد!
<br><br>
- با تغییر اندازه پنجره مرورگر می توانیم حالت واکنش گرا (Responsive) قالب را بررسی کنیم.
</body>
</html>
پیش نمایش آنلاین

نکات کلی در انتقال قالب از فتوشاپ به کد HTML و CSS


و در پایان چند نکته در خصوص انتقال قالب از برنامه فتوشاپ به کد HTML و CSS:
- تسلط بر CSS لازمه طراحی وب و انتقال قالب به صورت صحیح از فتوشاپ به صورت کد HTML است.
- برای شروع بهتر است با قالب های ساده و تک ستونه کار کنیم.
- خاصیت های مختلف CSS را با آزمون و خطا امتحان کنیم تا مهارتهایمان در این خصوص به تدریج افزایش پیدا کند.
- از نوشته های راهنما در کدنویسی خود استفاده کنیم، این کار موجب قابل فهم تر شدن سورس کدها شده و در هنگام اعمال تغییرات بعدی و توسعه برنامه کاربرد فراوان دارد.
- قالب های طراحی شده خود را حتی المقدور با مرورگرهای مختلف تست و سازگار کنیم، مرورگرهای وب برخی خاصیت ها را به شکل واحد پردازش نمی کنند!
- پس از تسلط نسبی در طراحی قالب وب، می توانیم قبل از ایجاد طرح اولیه در برنامه فتوشاپ ابتدا کدنویسی کار را انجام دهیم، سپس المان های مورد نیاز را مورد به مورد طراحی کرده و خروجی بگیریم، این شیوه باعث افزایش سرعت کار می شود.
- طراحی وب تا حدود زیادی کاری سلیقه ای است، سعی کنیم شیوه مورد علاقه خودمان را پیدا کرده و با تمرین و تکرار آن را توسعه دهیم، الگوبرداری از طرح های موجود نیز می تواند در خلق ایده های جدید راهگشا باشد.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
» قابلیت های کاربردی CSS3 در طراحی وب
» چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
» طراحی قالب سه بعدی وب با فتوشاپ و CSS
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
commentنظرات (۶۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: هادی
زمان: ۰۲:۲۸:۱۸ - تاریخ: ۱۳۹۱/۰۶/۰۶
با سلام
تنها سایتی هستین که تونستم رک و راست به جواب سوالهام برسم...اجرتون با خدا
یا حق
نویسنده: محمد
زمان: ۱۳:۱۴:۰۲ - تاریخ: ۱۳۹۱/۰۶/۱۲
ممنون ازاین کارتان
نویسنده: falcao
زمان: ۱۵:۲۳:۰۴ - تاریخ: ۱۳۹۱/۰۶/۱۹
دمتون گرم به جرات میتونم بگم تنها سایتی هستین که چنین واضح و روشن تبدیل قالب رو توضیح دادین من که به شخصه هیچ کجا نتونستم جواب بگیرم امیدوارم پایدار و پیروز باشین
نویسنده: بهار
زمان: ۰۴:۳۶:۲۰ - تاریخ: ۱۳۹۱/۰۷/۲۷
با سلام و خسته نباشید
من برای وبلاگم با فتوشاپ قالب طراحی کردم ولی نمی تونم تبدیلش کنم گیج شدم چی کار باید بکنم؟
اگه بخوام واسه پشت زمینه وبم عکس بذارم هم جز قالب وبلاگه و جداگانه نمیشه؟
ممنون
پاسخ: 
طراحی قالب وب تقریبا دو بخش دارد، گرافیک و کدنویسی HTML و CSS، اینکه کدام بخش را اول انجام دهید مهم نیست اما اینکه بدانید چگونه این دو را با هم ترکیب کنید نیاز به تمرین و تجربه است، برای شروع و جلوگیری از سردرگمی، از قالب های خیلی کوچک شروع کنید. در مورد قرار دادن تصویر پس زمینه این آموزش را مطالعه کنید:
چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
نویسنده: نیک
زمان: ۰۸:۴۵:۵۷ - تاریخ: ۱۳۹۱/۰۸/۰۸
سلام خسته نباشید ببخشید آموزش شما عالی بود ولی هر کاری می کنم درست نمیشه میشه به صورت آنلاین برام درستش کنید ممنون میشم فقط یک زمانی رو نت هستید بگید با تشکر نیک این وبلاگم هستش در هدر تصویرش میخوام عکس اسکلت را با عکس موتور عوض کنم عکس موتور رو آپلود کردم همه چیز آماده هستش فقط هر کاری می کنم پیغام خطا میده.
پاسخ: 
باید استایل CSS قالب وبلاگ را ویرایش کنید و آدرس تصویر فعلی قالب را با تصویر مورد نظر تعویض نمایید، لطفا در مورد خطایی که دریافت می کنید هم کمی بیشتر توضیح دهید.
نویسنده: h
زمان: ۰۰:۲۷:۱۹ - تاریخ: ۱۳۹۱/۰۸/۱۱
سلام
یه سوال در مورد درست کردن قاب جدول ها که در سایت ها هست در فتوشاپ و کد نویسی در html چطوری می تونیم فرضا یک قاب رو به چند قسمت کنیم بعد اون رو در html طوری کد نویسی کنیم که گوشه های قاب کاملا به هم متصل شوند......
و سوال دومم اینکه برای درست کردن یک سایت که موضوعش شرکت هواپیمایی باشه و به صورت تبلیغاتی باشه در کل چه جوری میشه چنین سایتی رو طراحی کرد...خیلی ممنون و خیلی عذر می خوام که سوالم طولانی شد.
پاسخ: 
اصولا طراحی و گرافیک در وب دو بخش دارد، گرافیک مبتنی بر نرم افزار مانند فتوشاپ و گرافیک مبتنی بر کدنویسی و CSS، برای هر کار مربوط به طراحی در وب باید با هر دوی این موارد و مخصوصا بخش کدنویسی و CSS آشنا باشید، در غیر این صورت توضیح اینکه چگونه می توانید موارد مورد نظرتان را ایجاد کنید واقعا دشوار می شود. در مورد سوال دوم و سایت تبلیغاتی برای شرکت هواپیمایی، راه های مختلفی برای ایجاد آن وجود دارد، از CMS های متن باز مانند جوملا، وردپرس و... گرفته تا کدنویسی و طراحی برنامه های مدیریت محتوای شخصی، انتخاب هر کدام از موارد بستگی به سطح آشنایی، تسلط بر برنامه نویسی وب و سلیقه و نیازهای شما دارد.
نویسنده: محمدرضا
زمان: ۱۴:۴۵:۳۰ - تاریخ: ۱۳۹۱/۰۸/۱۴
سلام ببخشيد من سنم واسه اين ساخت قالب كمه ميشه با ايميل واسم ارسال كنين من فقط 13 سالمه
و نمي تونم كد بسازم!!!
پاسخ: 
این قالب کاربردی نیست، تنها یک نمونه و صرفا جهت آموزش طراحی شده است.
نویسنده: مهدي
زمان: ۰۲:۰۹:۳۷ - تاریخ: ۱۳۹۱/۰۹/۰۶
عالي بود. منم در سايت هاي مختلف اين آموزش رو خونده بودم ولي خيلي پيچيدش مي كردن و نمونه هم نميذاشتن. در اينجا خيلي ساده و واضح هم آموزش داديد و هم در پاسخگويي توضيح داديد.
فقط يه نظري داشتم: اگر كدهاي CSS‌ رو بصورت كدهاي خارجي در آموزش ميذاشتين،‌ بنظرتون كاربرا بهتر از اين متوجه نميشدن؟
بازم تشكر و خدا خيرتون بده
پاسخ: 
ممنون از نظر لطف شما، تا جایی که امکان داشت سعی کرده ایم آموزش ساده و قابل فهم باشد، به هر صورت دوستانی که می خواهند طراح قالب شوند باید با موارد پیشرفته تر نیز سر و کار داشته و با کدنویسی آشنا باشند.
نویسنده: سمانه
زمان: ۱۹:۰۶:۵۰ - تاریخ: ۱۳۹۱/۱۰/۰۵
سلام
آموزشتون عالی بود مرسی
یه سوال داشتم :
اگه بخوام عین بلاک side-right رو زیر همین بلاک داشته باشم چکار کنم؟
ممنون
پاسخ: 
مشابه سوال شما قبلا مطرح شده، همانطور که در مثال ها ملاحظه می کنید، سه بلاک زیر یک باکس کوچک ایجاد می کنند:
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
کپی دوباره آنها زیر هم یک باکس دیگر ایجاد می کند و...
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
<!-- باکس دوم -->
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
نویسنده: ofogh
زمان: ۱۷:۱۶:۴۹ - تاریخ: ۱۳۹۱/۱۱/۰۷
سلام استاد من یه کد دارم که می خوام به css تبدیلش کنم چیکار باید کنم؟؟؟
اینم کد:
/*
Theme Name: 420
Theme URI: http://avazak.ir
Author: mohsen
Author mail: http://www.info@avazak.ir
Seo by: avazak.ir
*/
* {
margin: 0;
padding: 0;
}
body {text-align:Center;color:#fff;font-family: Tahoma; font-size: 8pt;margin:0 0 5px 0;background:#5f1f06;}
table{text-align:Center;}
A, A:visited{color:#fff;text-decoration: none;}
A:hover{color:#8e4104;text-decoration: none;font-size: 9pt;}
.page{float:Center;margin:0px;padding:0px;width:1000px;background: url('http://s2.uplod.ir/files/2/c7nje6yilvy2dk/111.jpg ') no-repeat Top Left;height:385px;}img{border:none}
.Avazak {width:1000px;background:#000;margin:0px}
.Footer{width:1000px;height:100px;color:#8e4104;text-align:Left;font-family: Tahoma; font-size: 8pt;float:Center;background: url('http://Avazak.ir/Theme/style/image/420-8.jpg') no-repeat bottom Left;padding:0px 0 0 115px}
.Footer a, .Footer a:visited {color:#fff;text-decoration: none;}
.Footer a:hover {color:#8e4104;text-decoration: none;font-size: 8pt;}
.header{float: Center;margin:0;padding:0px;width:1000px;height:355px;position:relative}
.header h1{height:30px;font-family: Arial;font-size:19pt;color:#fff;font-weight:bold;text-align:Right;margin:50px 30px 20px 0px;}
.header .subtitle{height:15px;font-family: Tahoma;font-size: 9pt;color:#fff;text-align:Right;margin:5px 30px 0 0px;}
.header .menu{text-align:Center;Padding:0px;margin:230px 0px 20px 0px;color:#e98537;font-size:8pt;font-family: Tahoma;}
.header .menu a, .header .menu a:visited {color:#fff;text-decoration: none;font-size:8pt;font-family: Tahoma;padding:0 5px;}
.header .menu a:hover {color:#e98537;text-decoration: none;}
.sidebar-r{float: Right;width:200px;font-family: Tahoma; font-size: 8pt;text-align:Center;line-height:2em;background: url('http://Avazak.ir/Theme/style/image/420-5.jpg') repeat-Y Top Right;padding:0px; margin-left:0; margin-right:12px; margin-top:0; margin-bottom:0}
.sidebar-r h1{width:200px;margin:0;font-family: Tahoma; font-size:8pt;font-weight:bold;text-align:Center;color:#fff;background:url('http://Avazak.ir/Theme/style/image/420-7.jpg') no-repeat Top Right;padding:6px 0}
.sidebar-l{float: Left;width:200px;font-family: Tahoma; font-size: 8pt;text-align:Center;line-height:2em;background: url('http://Avazak.ir/Theme/style/image/420-5.jpg') repeat-Y Top Right;padding:0; margin-left:12px; margin-right:0px; margin-top:0; margin-bottom:0}
.sidebar-l h1{width:200px;margin:0px;font-family: Tahoma; font-size:8pt;font-weight:bold;text-align:Center;color:#fff;background:url('http://Avazak.ir/Theme/style/image/420-7.jpg') no-repeat Top Right;padding:6px 0}
.FooterSid{width:200px;height:50px;background:url('http://Avazak.ir/Theme/style/image/420-6.jpg') no-repeat Bottom Right;margin:0px;padding:0px}
.Link{width:180px;line-height:1.4em;text-align: Right;background: url('http://Avazak.ir/Theme/style/image/420-9.jpg') no-repeat Top Right;margin-left:0; margin-right:5px; margin-top:10px; margin-bottom:0; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}
.About{color:#fff;line-height:1.5em;text-align: justify;padding:5px 7px 0 7px}
.About img{text-align: Center;Padding-Top:3px;}

.bodyposts{float: Left;text-align: right;width:550px;margin:0px 13px;overflow:hidden}
.post{width:550px;padding:0px;text-align:right;background:url('http://Avazak.ir/Theme/style/image/420-3.jpg') repeat-Y Top Right;}
.Post a, .Post a:visited {color:#8e4104;text-decoration: none}
.Post a:hover {text-decoration: none;color:#fff;font-size: 8pt;}
.post .Title{height:70px;font-size: 9pt;margin:0px;font-family: Tahoma;font-weight:bold;color:#fff;background:url('http://Avazak.ir/Theme/style/image/420-2.jpg') no-repeat Top Right;padding:25px 85px 0 0;}
.post .Content{font-family: Tahoma;color:#fff; font-size: 8pt;line-height:1.5em;margin:0px;direction:rtl;padding:0px 10px 0px 10px;}
.post .date{height:100px;text-align: Right;width:550px;font-family: Tahoma;color:#8e4104;font-size: 8pt;background:url('http://Avazak.ir/Theme/style/image/420-4.jpg') no-repeat bottom Right;margin:0px;padding:30px 10px 0 0;}
.post .date a, .post .date a:visited {color:#fff;text-decoration: none;}
.post .date a:hover {color:#8e4104;text-decoration: none;}
.post .r{float:right;text-align: Right;margin:0px;padding:23px 10px 0 0;}
.post .l{float:left;text-align: Right;margin:0px;padding:23px 0 0 20px;}
.number{width:550px;text-align:Center;font-family: Tahoma;margin:25px 0px 20px 0px;}
.number a, .number a:visited {color:#fff;text-decoration: none;}
.number a:hover {color:#8e4104;text-decoration: none;}
.custom{color:#000;margin:0px;text-align:Right;direction:rtl;overflow:hidden;}
پاسخ: 
کدی که قرار داده اید CSS است و نیازی به تبدیل مجدد ندارد!
نویسنده: pna.group.eng@gmail.com
زمان: ۲۱:۰۰:۲۵ - تاریخ: ۱۳۹۲/۰۱/۰۵
معذرت می خوام
آیا میشه یک قالب psd به Artisteer 3 انتقال داد و چگونه
ممنون
پاسخ: 
منظور از انتقال قالب در وب، تبدیل (تصویر) قالب طراحی شده به صورت کدهای HTML و CSS است، لذا این کار تنها توسط کدنویسی امکان پذیر است و برنامه ای برای (ترجمه خودکار) آن وجود ندارد.
نویسنده: samira
زمان: ۱۴:۲۴:۱۱ - تاریخ: ۱۳۹۲/۰۱/۰۸
با سلام ممنون از سايت مفيدتون
من يه قالب با نرم افزار phpdesigner درست كردم داخل خود نرم افزار كه run ميكنم و همچنين تو اينترنت اكسپلورر قالب درست نمايش داده ميشه ولي با firefox قالب بهم ريخته ديده ميشه اگه ميشه راهنماييم كنين.ممنون
پاسخ: 
برخی از خاصیت های CSS در مرورگرهای مختلف، متفاوت پردازش می شوند، لذا در هنگام طراحی قالب باید خاصیت های CSS را طوری استفاده نمائید که نتیجه کار با تمام مرورگرها سازگار باشد که این کار نیازمند آزمایش و خطای هم زمان با طراحی است.
نویسنده: مینا
زمان: ۱۶:۱۸:۱۶ - تاریخ: ۱۳۹۲/۰۱/۱۲
سلام ممنون از مطالب مفیدتون
می خواستم بدونم آیا همه این کارهایی که گفتد می شه بدون کدنویسی و با استفاده از نرم افزار دریم ویور انجام داد؟
اگه می شه لطفا راهنمایی کنید
پاسخ: 
خیر، بدون کدنویسی تنها می توانید از طرح های آماده ساده استفاده کنید، نمی توانید قالبی سفارشی داشته باشید.
نویسنده: Niloofar
زمان: ۲۲:۳۰:۱۷ - تاریخ: ۱۳۹۲/۰۱/۲۱
خدا خیرتون بده من از سایتتون برای پروژه دانشگاهم استفاده میکنم واقعا هر چی از خدا میخواین بهتون بده
نویسنده: امیر
زمان: ۲۳:۱۲:۵۹ - تاریخ: ۱۳۹۲/۰۱/۲۲
سلام و تشکر از مطالب خوبتون.
2 تا سوال داشتم: 1- آیا همه قالبها باید با برنامه هایی مثل فتوشاپ و امثال اینها طراحی بشه و سپس تبدیل بشه به css و html؟
2- در تکمیل سوال اول آیا بهتر نیست مثلا سایت خود را با نرم افزار ویژوال استودیو و css , jquery و ... بدون دخالت زیاد نرم افزارهای گرافیکی (به جر برای موارد معدودی مثل لوگو و ...) طراحی کنیم؟ مثلا به جای اینکه با فتوشاپ slide show بسازیم از slide show آماده استفاده کنیم و محل قرارگیری را خودمان تنظیم کنیم؟ آیا این روش بهتره؟
تشکر از لطفتون
پاسخ: 
در پاسخ به سوال شما باید عرض کنیم بله می توان با المان ها و برنامه های آماده هم کار کرد، اما مسلما خلاقیت و سفارشی سازی در این روش به حد زیادی کاهش خواهد یافت، ضمن اینکه به جای اینکه المان ها در خدمت طراحی و ایده ذهنی شما باشند، شما باید از ویژگی های آنها پیروی کنید، در مورد جی کئوری هم تفاوت هایی وجود دارد، جی کئوری معمولا حجم کلی کار را افزایش می دهد، از طرفی مبتنی بر جاوا اسکریپت است (که اگر این امکان در مرورگری غیر فعال باشد مسلما جی کئوری نیز کار نخواهد کرد)، در کل کدنویسی و کار گرافیکی باعث می شود قدرت و انعطاف پذیری بیشتری در خلق ایده هایتان داشته باشید، اما روش های آماده کمی محدودتر و البته آسان تر هستند.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




2 × 5
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form مجید بیگلوئی
در:
با سلام میخوام فایل پیوست بسازم برای اسکریپت وبلاگ از کد زیر استفاده میکنم تا فایل را آپلود و اطلاعات را به دیتابیس ارسال...
۱۰:۰۲:۵۸ ۱۳۹۸/۱۲/۰۶

form پیمان نقی پور
در:
سلام میخواستم بدونم فیلتر نویسی بورس هم با همین زبان جاوا انجام میشه؟ چطور میشه شرطی تعیین کرد تا نتیجه فیلتر در هنگام...
۱۸:۲۱:۳۲ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، css رو تسلط کامل دارم تا حدودیش هم به لطف شما و جاوا اسکریپت هم چند روزی میشه شروع کردم به آموزش...
۱۵:۴۸:۳۳ ۱۳۹۸/۱۲/۰۵

form amin
در:
با سلام آدرس مطالب سایت وبگو بعد از ای دی پست عنوان فارسی هست ولی زمانی که به سورس کد پست نگاه میکنیم قسمت فارسی...
۱۴:۵۹:۴۴ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، لینک آموزش مقدماتی جاوا اسکریپت توی منوی بالایی خرابه ، به وظیفه شهروندیم عمل کردم :)
۱۵:۰۹:۰۰ ۱۳۹۸/۱۲/۰۴

form aseman
در:
با سلام . میخوام هر وقت توی تکس باکسم عدد 1 وارد شد در خروجی تگ p معادل حروفی یک رو بهم بده. مثلا:...
۱۴:۴۵:۲۹ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد ، گذاشتمش توی این وبلاگ رمزش هم ******* هستش ، واقعیت فهمیدم که میشه درستش کرد ولی چجوریشو نفهمیدم :) خیلی ممنون...
۱۳:۲۰:۱۴ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد، وبلاگ ندارم، اینا رو برای یادگیری و یه هدف دیگه دارم سوال میکنم، مطالب مرتبط رو پیدا کردم راهشو، فقط قسمت ارسال نظر...
۲۰:۱۵:۰۲ ۱۳۹۸/۱۲/۰۳

form نیما
در:
سلام. من میخوام با استفاده از یک input مقدار عددی رو از کاربر دریافت کنم و بعد از ضرب در عددی خاص که خودم تعیین...
۱۸:۰۷:۰۴ ۱۳۹۸/۱۲/۰۳

form وحید
در:
سلام وقت بخیر حدود شش ماه هست با فیلتر شکن کار میکنم به اسم Lightvpn. یک روز هست این خطا رو میده و...
۱۸:۰۰:۰۶ ۱۳۹۸/۱۲/۰۳

form mahdi
در:
سلام ، استاد شرمنده یه سوال دیگه هم داشتم مثل قبلی ، مطالب مرتبط که انتهای هر پست میاد رو چطوری با جاوا اسکریپت توی...
۲۳:۴۶:۲۳ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد عزیز ، توی لوکس بلاگ میشه چیزی مثل پست های شاخص که توی وردپرس هست با جاوا اسکریپت درست کنیم که مثلا داخل...
۲۳:۱۴:۴۰ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد ، بخش نظرات قالب لوکس بلاگ یعنی طرح کل صفحش رو چطوری دسترسی داشته باشیم که خودمون بتونیم طراحیش کنیم ؟ منظورم اینه...
۱۸:۱۱:۳۳ ۱۳۹۸/۱۲/۰۱

form علیرضا سهیلی
در:
سلام من وقتی میخوام شارژ بزنم این کد واسم میاد معنیش یعنی چی
۱۴:۳۳:۱۴ ۱۳۹۸/۱۲/۰۱

form mahdi
در:
سلام استاد ، فهمیدم چطوریه نیازی به پاسخ نیست، چقدرم ساده بود :) مرسی
۰۹:۴۸:۴۹ ۱۳۹۸/۱۱/۳۰
آگهی