پروژه : تبدیل قالب PSD فتوشاپ به کدهای html و CSS

دسته بندی: آموزش
زمان مطالعه: ۱ دقیقه
۱۰ اسفند ۱۳۹۳

در این جلسه از دوره آموزش طراحی وب به تبدیل یک قالب شیک و فلت PSD به کدهای html و css خواهیم پرداخت و نکات ریز و درشت مربوط به این تبدیل رو به شما آموزش خواهیم داد . این جلسه از آموزش رو دوست خوبم آقا جواد باقی در خدمت شما هستند .
دموی قالب تبدیل و طراحی شده در این جلسه

عموم مطالب مطرح شده در این جلسه عبارتند از :

  • مقدمه اولیه برای تبدیل قالب فتوشاپ به کد
  • ذکر معایت و مزیت های کدنویسی مستقیم در مقالب طراحی با فتوشاپ
  • پیشنیازهای تبدیل قالب فتوشاپ به کد
  • تشریح روند و مراحل کلی تبدیل قالب به کد
  • نمایش قالب انتخابی و توضیح ساختار آن
  • شروع تبدیل قالب از بالا به پایین
  • کدنویسی هدر قالب
  • کدنویسی اسلایدر
  • کدنویسی سایدبار و محتوای قالب
  • کدنویسی فوتر قالب
  • نمایش قالب تبدیل شده و توضیحات نهایی
:: توجه

این مطلب یک جلسه از آموزش طراحی وب سایت می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش طراحی وب سایت

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

محمد امین فرهادیان

سلام وقتتون بخیر آقای آوند
ممنونم بابت وقت و تمرکزی که گذاشتید برای تهیه این دوره ی فوق العاده
دو سوال برام از مباحث این جلسه پیش آمده ممنون میشم اگر جواب بدین :
۱. زمانی که استایل دهی اسلایدر انجام می شد وقتی به اون دایره های سلکت پایین اسلایدر رسیدیم. با این که لینک زده بودیم براشون ولی حالت لینکی نداشتن و اقای باقی گفتن این مشکل بخاطر اینه که position متفاوت هست در اونجا و این مشکل رو آمدن با تعریف یه سلکتور برای اون لینک ها و قراردادن position : absolute و width و height هم اندازه با Li ها برطرف کردن . دلیل این مورد رو درست متوجه نمیشم و ممنون میشم اگر بیشتر راجبش توضیح بدین که این لینک دار نبودن اون سلکت ها چه ربطی به position داشت؟
۲. توی استایل دهی اسلایدر اینبار برای اون دکمه های عقب و جلو وقتی background تعریف کردن آمدن مثلا برای دکمه ی عقب position رو هم گذاشتن left top در background در حالی که اگر این position ها رو حذف هم کنیم مشکلی پیش نمیاد در ظاهر . نکته ی خاصی داشت استفاده از این مورد یا نه ؟

حامد امیری

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

حسین ملهم

با درود بیکران
دکتر آوند و مهندی باقی عزیز
از آموزش شما در خصوص تبدیل فایل psd به html‌ بسیار سپاسگزارم واقعا عالی بود.

RezaDehghani

سلام استاد خسته نباشید؛ توی این جلسه برای لود فونت ها آقای باقی بصورت جدا جدا فونت ها رو لود کردند اما شما کد ها رو در جلسه 12 به صورت یکجا استفاده کردید. کدوم روش بهتره؟

seperate code:
@font-face {
    font-family: BYekan;
    src: url(../fonts/BYekan.eot);
}

@font-face {
    font-family: BYekan;
    src: url(../fonts/BYekan.ttf);
}

@font-face {
    font-family: BYekan;
    src: url(../fonts/BYekan.woff);
}

With:
@font-face {
    font-family: MuseoSans-500;
    src: url("../fonts/MuseoSans-500.eot") format("eot");
    url ("../") format("woff")
    url ("../fonts/MuseoSans-500.ttf") format("truetype")
}
RezaDehghani

منتظر جوابتون هستم …

nilla abr

با سلام . من در قسمت کد نویسی دکمه ی عضویت برام سوال پیش اومده. وقتی border:0 قرار دادیم دیگه قابل کلیک نمیشه و مانند یک باکس معمولی دیده میشه.
میشه توضیح بدید برای رفع این مشکل باید چیکار کرد ؟

محمد شهرکی

سلام قرار بود یک psdبه عنوان تمربن بدید ما کد بزنیم جلسه نوزدهم چیشد؟

mohammadali sedaghat

سلام آقای آوند
از برنامه Adobe Muse برای طراحی سایت استفاده میشه، برای پیاده سازی طرح کلی و اولیه مناسب هست؟

مصطفی قدیمی

adobe muse برای سهولت فرایند طراحی سایت به کمک برنامه نویس های صفحات وب می آید. کاربرد adobe muse در صفحات وب خلاصه نمی شود و برای برنامه نویسی اندروید هم کاربرد دارد.

مهدی یار خزاعی

سلام استاد آوند عزیز.
بنده یه چیزی رو میخواستم بپرسم.
یک سری عکس ها تو سایت های مختلف هست که همراه با رفتن اسکرول به پایین عکس به بالا حرکت میکنه،نمیدونم منظورمو خوب رسوندم ولی مثلا این سایت:https://aminbahrami.ir صفحه اصلیش همش از این نوع عکس هاست.
با تشکر از آموزش خوبتون.

حمیدرضا صفری

با سلام خدمت استاد عزیز
استاد من فایلهای آموزشی رو تا همین جلسه نگاه کردم و این پروژه رو کامل کد زدم اما برای تمرین بیشتر یک فایل
psd لایه باز دانلود کردم و کدنویسی کردم ممنون میشم نگاه کنید و برای اولین کارم نظرتونو بگید
http://etc.zarup.com/102922-download-home.zip

لقمان آوند

سلام
دیدم خیلی خوب کار کردید.
فقط سایز فونت های تاریخ در منوی سمت راست رو می تونید کوچیک تر کنید و به وسط بیارید که متناسبتر بشه
موفق باشید

حمیدرضا صفری

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

لقمان آوند

ممنون از شما لطف دارید
براتون آرزوی موفقیت می کنم

sana_esi

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

وحید صالحی

خیر اصولی نداره چون برای تمام موارد بجز تصویر از خاصیت absolute استفاده میشه که باعث شناور شدن اجزا مختلف و حرکت اونها روی هم میشه

it,one

سلامی دیگر 🙄
استاد موقعی که میخاستیم قسمت شبکه های مجازی رو استایل بدیم از float استفاده کردیم اگه بخایم از display:inline-block ;
استفاده کنیم همونطور که استاد باقی اشاره کردند تمام ایتم ها بر عکس میشن ایا راهکاری برای این وجود داره ؟ ❗
که برعکس نشه ؟؟
و پایداریشو حفظکنه ؟

وحید صالحی

از پراپرتی direction براشون استفاده کنید

وحید صالحی

اگر به چنید عنصر بخواهیم یک استایل مشابه اعمال کنیم یک کلاس با پراپرتی مشخص و مورد نظر می نویسم و با سایر عناصر اعمالش می کنیم

وحید صالحی

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

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

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