آموزش تبدیل فایل psd به قالب html (جلسه اول)

آموزش

در این آموزش قصد داریم مراحل گام به گام تبدیل یک فایل psd به قالب html را بدون استفاده از فریمورک هایی مانند Bootstrap یا Zurb را بصورت کامل توضیح دهیم.

در ابتدا شما نیاز به یک نرم افزار ویرایشگر متن مانند Notepad++ ،UltraEdit ،EditPlus و نرم افزار Photoshop دارید.

طرح مورد نظر را که به صورت فایل psd است در فتوشاپ باز میکنیم.

یک پوشه جدید با نام پروژه ایجاد کنید و درون آن دو پوشه css(برای فایل های css) و images (برای تصاویر) درست کنید.

در ویرایشگر متن خود یک فایل index.html در پوشه پروژه که صفحه اصلی قالب است و یک فایل style.css در پوشه css ایجاد کنید. در ادامه کد زیر را که یک کد ساده است در فایل index بنویسید.

در این کد با استفاده از تگ <!doctype html> به مرورگر اطلاع میدهیم که این فایل html5 میباشد

با این کد فایل را به دایرکتوری css متصل مکنیم.

اگر شما از مرورگرهایی مانند اینترنت اکسپلورر ۸ یا قدیمی تر استفاده میکنید به این کد نیاز دارید در غیر اینصورت میتوانید از این کد چشم پوشی کنید.

حالا اگر فایل index.html را در صفحه مرورگر باز کنید متن “Sample text.”  را مشاهده میکنید.

ادامه آموزش در مطالب بعدی مطرح میشود.

این مطلب را به اشتراک گذارید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشهد، میدان دلاوران
09159280092 - 09159036961