دوره مجازی طراحی وب (جلسه 19): پروژه : تبدیل قالب PSD فتوشاپ به کدهای html و CSS

- visibility ۷۸ mode_comment

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

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

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

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

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

comment دیدگاه کاربران
itone

سلام استاد اوند عزیز
ببخشیدم ن اگه بخام اون لوگوی بالایی که استاد باقی به صورت html ,cssکد بزنم به چه صورته ؟/
میخام یه h1داشته باشه که تایتل اصلیه و یه دونه h3که description هستش ؟
میشه راهنمایی کنین ممنون 😆
باید از float استفاده کنم دیگه بله ؟؟

وحید صالحی

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

it,one

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

وحید صالحی

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

sana_esi

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

وحید صالحی

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

حمیدرضا صفری

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

لقمان آوند

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

حمیدرضا صفری

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

لقمان آوند

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3 4