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



visibility  
mode_comment   ۸۵

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

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

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

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

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

comment دیدگاه کاربران
امید فیروزه replyپاسخ

سلام ….
لینک دانلود مشکل داره …

لقمان آوند

سلام
تست و دانلود کردم مشکلی نداره …

امید فیروزه

ببخشید مشکل از مرورگر من بود

مازیار replyپاسخ

با سلام
تشکر از شما استاد گرامی
استاد بنده عقب افتادم از جلسات شما.
فقط لطفا آن موارد درخواستی رو یادتون نره….
ممنون 😳

علی یوسفی replyپاسخ

در حال دانلود. ممنون. پروژه بعدی پروژه ی آخری هست ؟

لقمان آوند

بله، ولی در جلسه های بعدی اونا رو توسعه میدیم و روشون کار می کنیم .
پروژه بعدی پروژه خیلی جالبی خواهد بود .

علی یوسفی

تا اینجا که خیالمون بابت تدریس دوره ها راحت بوده. ممنون بابت همه چیز

لقمان آوند

ممنون از لطفتون

جعفر پیشدادی replyپاسخ

با سلام وتشکر از آموزشی که ارائه نمودید اگر از تگ article در قسمت پستها استفاده می نمودید بهتر نبود؟…اگر در قسمت مرتب نمودن وخطی نمودن ul بجای float از inline-block ایستفاده میشد مشکلی پیش می آمد

لقمان آوند

بله برای پست ها میشه از article استفاده کرد که از نظر معنایی بهتره .
برای ul هم به هر دو طریق میشه اینکارو کرد و مشکلی نداره …

yazda replyپاسخ

400 مگابایت؟ 😯 دو قسمتش میکردید خب 🙁

لقمان آوند

دیگه گفتیم کامل در اختیار شما قرار بدیم .

زمان الله ابراهیمی replyپاسخ

باسلام خسته نباشید استاد گرامی
میخواستم یک خواهشی ازشما داشته باشم توی جلسه بعدی که میخواهید آموزش بدهید
یک چیز مثل آمار سایت خود شما هست برای بند بگید که چطور درست کنم میخواستم برای نویسنده یک باکس درست کنم ممنون میشم

لقمان آوند

سلام
این بخش آمار ما با ایجکس لود میشه و نیاز به جاوااسکریپت و آشنایی با اون داره …

زمان الله ابراهیمی

یه همچین چیز نمیشه به cssدرست کرد مثل برای hover وقتی روی عکس نویسنده میره مشخصات نویسنده بیاد برون ممنون میشم که راهنمایی کنید

لقمان آوند

بله میشه
در جلسه css پیشرفته مثالش رو میاریم …

nader70 replyپاسخ

ایا در پروژه هایی با صفحات زیاد از یک فایل سی اس اس استفاده میشود یا از چند فایل لطفا در مورد نحوه کد نویسی سی اس اس همچین پروژه هایی هم توضیح دهید
با درود فراوان

لقمان آوند

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

امیر امینی replyپاسخ

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

لقمان آوند

سلام
چنین مشکلی رو من ندیدم، با چه مرورگری تست کردید ؟

امیر امینی

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

لقمان آوند

ممنون
یه min-width: 1000px روی به سلکتور های header و footer بدی درست میشه …

افشین زندی replyپاسخ

سلام استاد
ممنون بابت این جلسه ولی کاش یکم پروژه پیچیده تر بود چون اکثرا تموم کارایی که تو پروژه فصل سی اس اس کردیم همین رو تکرار کردیم فقط بجای استایل از عکس استفاده کردیم

لقمان آوند

سلام
تو این جلسه بیشتر هدف این بود که نحوه تبدیل طرح فتوشاپی رو یاد بگیرید
پروژه بعدی نکات و مباحث جدیدتری داره ضمن این که در ادامه سعی می کنیم اونا رو بهبود بدیم

کیان کیانی

داداش ی داستانی هستش ..
اونم اینکه شما ذهنیت به بحث پی اس دی تو اچ تی ام ال درست بشه ..
یعنی به همین سادگی هستش ک گفتی ..
همینه دیگه !!!! چیز شاخی نداره این مبحثه …

مرسی استاد ……

لقمان آوند

ممنون آقا کیان …
دقیقا همینه که گفتی …
وقتی html و Css رو خوب بلد بشی تبدیل psd به کد واقعا راحته …

ابراهیم عابدی replyپاسخ

استاد جلسه بعدی کی قرار داده می شه ؟

استاد پروژه طوری باشه که بعدا در دوره جاوا که قرار هست برگزار بشه بیایم با جاوا اسکریپت روی این پروژه ها که در این دوره داریم انجام می دیم کار کنیم البته این پیشنهاده

لقمان آوند

ممنون
برای دوره جاوااکریپت هم برنامه های خاصی داریم و به بهترین نحو اون رو پیش میبریم . نگران نباشید .

سامان جعفری replyپاسخ

استاد تخفیف نوروزی ندارید؟:)

لقمان آوند

ایشالله خواهیم داشت .
از طریق سایت اطلاع رسانی می کنیم …

ali agha replyپاسخ

عالی بود
ممنون ❓

Mahdi replyپاسخ

یه سوال
چطور میشه برای قرار دادن تصاویر در سایت اول همه تصاویر رو داخل یه تصویر قرار بدیم و بعدا اونا رو وارد سایت کنیم برای اینکه حجم بارگذاری صفحات بیاد پایین تر دقیقا مثل سایت خودتون…

وحید صالحی

می تونی از css sprite استفاده کنید .لینک های زیر رو ببینید:
لینک
لینک

miladwwe replyپاسخ

ی سوال لقمان جان
میشه بگید چه کسی این قسمت رو ضبط کرده؟ایا دلیل خاصی داره کسی دیگه اموزش داده؟
ممنون

لقمان آوند

سلام
آقای باقی از دوستان هستند و تسلطتشون در تبدیل psd به کد خوب هست . دلیلش هم علاوه بر تنوع و اشنایی با ایشون ، تسریع در انتشار جلسات بوده …

Abbas412 replyپاسخ

سلام
آقای باقی قول یه طرح PSD رو به ما دادند، که بعنوان تمرین بذارنش و ما خودمون به کد تبدیلش کنیم 😎
منتظر طرح باشیم؟

لقمان آوند

سلام
بله طرح آمادست و در جلسه آخر بهتون میدیم حتما …

ramin jalili replyپاسخ

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

وحید صالحی

سلام
بزودی مشکل برطرف خواهد شد…

hossein razavinazem replyپاسخ

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

وحید صالحی

سلام دوست عزیز لینک دانلود مشکلی نداره فقط چون فرمت این قسمت m4v هست شما هم مثل بعضی از دوستان با مشکل عدم دانلود مواجه بشید .
برای برطرف کردن این مشکل از نرم افزار internet download manager یا همون idm استفاده کنید ابتدا وارد نرم افزار شوید سپس وارد منوی downloads و بعد منوی option بشید و تب File types رو انتخاب کنید و در اولین کادر فرمت های مجاز برای دانلود موجوده چک کنید بین اونها فرمت m4v موجود باشه اگر نبود در انتهای فرمت ها کلیک کنید و با یک فاصله نام فرمت m4v رو وارد و روی ok کلیک کنید بهد نرم افزار بسته و دوباره اجرا کنید و فیال رو دانلود نمایید…
موفق باشید…

ramin jalili replyپاسخ

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

hossein razavinazem replyپاسخ

دوستان تمامی قسمت ها به درستی دانلود میشود همین قسمت 19 فقط idm نیاز است اگر ممکن است راهی دیگر برای دانلود فایل قرار دهید

لقمان آوند

مشکلی نداره و تست شده …
تنها مسئله ای که هست اینه که پسوند فایل جلسه 19 مثل بقیه جلسات mp4 نیست و m4v هست …

سمیرا replyپاسخ

سلام استاد وقت بخیر
دو تا سوال : آیا در طراحی این قالب فقط منظور تبدیل طرح PSD به HTML بوده ؟ یا ریزه کاریها هم اهمیت داشته ؟ مثلا دکمه عضویت یا ادامه مطلب پستهای سایت کلیک خور نیستند یا اسلایدر و متن متحرک نیستند .
2) بعضی جاها با دادن FLOAT و margin , padding محل قرار گیری یه باکس رو میشه تعیین کرد و دقیقا همان حالت رو میشه با position هم انجام داد. ایا راهی برای تشخیص روش صحیح هست ؟ یا برداشت من از پایه اشتباه هست و چنین چیزی اصولا درست نیست ؟

وحید صالحی

سلام 1-بله انجام شده2-شما بنا به تجربه و نیازتون باید از هر کدام از مواردی که ذکر کردید استفاده کنید

امین replyپاسخ

سلام خسته نباشید
واقعا فکر نمیکردم به همین راحتی باشه! عالی بود@ فقط یه سوال برام پیش اومد :
فرض کنید یک هدر header داریم شامل کلاس و لیست منو (main menu ul li) حالا میخوایم با css مقدار بدیم در قالب های مختلف دیدم چندین روش رو انجام دادن که در زیر نوشتم کدوم روش بهتره و تفاوتشون چیه؟

1
header .main ul li {…}
1
header>.main>ul>li {…}
1
header .main>ul>li {…}
1
header .main ul>li {…}
1
.main ul li {…}
1
.main li {…}
ممنون

وحید صالحی

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

yaser yousef panah replyپاسخ

با سلام..دوره بی نظیری بوده تا الان ..من هیچ اطلاعات اولیه ای نداشتم اما الان هرچیزی که مد نظرم میاد رو میتونم کد نویسی کنم که مدیون اموزش خوب شما هستم…
یه سوال بی مورد داشتم خواهشا جواب بدید این علامت سوال از ذهنم خارج شه فقط 😆
برای ساختن پنل مدیریت برای یک وبسایت باید php بلد باشی و براش پنل تعریف کنی،سوال من اینجاست به فرض صدتا سایت داریم باید برای تک تک بشینیم و پنل بنویسیم یا اگه یک پنل جامع بنویسیم با کمی تغییرات میتونیم اونو روی تمام سایت ها استفاده کنیم؟!!
با تشکر فراوان

وحید صالحی

خوشحالیم که مورد استفادتون قرار گرفته
برای پنل علاوه بر طراحی ظاهرش که با css و html هست برای داینامیک کردن و ارتباطش با دیتابیش بله باید php بلد باشید.ساختار پنل ها 80 درصد مشابه هست یک بار کدنویسی می کنید و بارها می تونید ازش در پروژه های مختلف استفاده کنید مخصوصا اگر بصورت شی گرایی و mvc کدنویسی کنید 20 درصد باقی مانده هم بنا به امکانت سایت می تونه متفاوت باشه که باید کدنویس بشه

yaser yousef panah

مهندس صالحی عزیز متشکرم بابت پاسخ کاملتون..فقط ی سوال دیگه؟
کدنویسی شی گرا یک زبان جدای از php هست و اگر هست همینجا دورش هست یا نه؟!!مرسی
در ضمن مشتاقانه منتظرم این دوره های طراحی وب تموم شه و یک کلاس فتوشاپ با شما بردارم 😀

وحید صالحی

خواهش می کنم نه جدای از php نیست بلکه میشه گفت یه روش و تکنیک برای کدنویسی هست و پایه و اساس اون بر حب کلاس ها و ارث بری از کلاس هایی هست که تعریف می کنیم

مسعود replyپاسخ

سلام .
ممنون بابت راهنمای قدم به قدم طراحی قالب .
فقط یه سوال .
جناب آوند برای تگهای Div از ID هم استفاده میکردن و تو Css براش # میذاشتن اما شما اصلا استفاده نکردین و همه رو Class زدین .
میخواستم بدونم فرقشون چیه ؟
فوق این 2 تا مثلا :
Div Class با Div ID

لقمان آوند

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

Masoud Azimi replyپاسخ

با سلام و تشکر بابت این جلسه. فقط یه سوال برام پیش اومد. تو زمان 1:42:00 وقتی خواستین به تگ a برای لیست منو پدینگ از همه جهت بدین از تمام جهات پدینگ عمل کرد ولی پدینگ بالا اعمال نشد. برا حل این مشکل از خصوصیت display:block برای تگ a استفاده شد و مشکل حل شد…. میشه بیشتر توضیح بدین؟

ممنون

لقمان آوند

تگ a یه تگ inline هست و پدینگ بالا و پایین نمی خوره. مگر اینکه شما display اون رو به block یا inline-block تغیر بدید. این موارد رو که تو دوره گفتیم …

Masoud Azimi replyپاسخ

سلام.

من سوالی رو 2 اردیبهشت پرسیدم. هنوز جواب نیومده!!!

لقمان آوند

ببخشید ندیده بودم .
پاسخ داده شد

mahdi moa replyپاسخ

سلام … لینک دانلود ویدیوی جلسه 19 خرابه و دانلود نمیکنه … ارور میده … چند بار امتحان کردم ولی نشد… ممنون میشم سریعتر اصلاح کنید.

لقمان آوند

تست کردیم
مشکلی نداره

مصطفی حسینی replyپاسخ

سلام
یک آموزش قدم به قدم و خیلی خوب که خیلی ازش لذت بردم و بعد این javascript و jquery رو هم باید تهیه کنم .
http://up.7learn.com/l/7Luin/demos/19/index.html
http://up.7learn.com/l/7Luin/demos/20/index.html
و یکی 24 رو نمیتونم ببینم
Not Found
The requested URL /l/7Luin/demos/20/index.html was not found on this server.
مشکل کجاست؟

لقمان آوند

لینکاشون در صفحه ثبت نام رو کلیک کنید مشکلی نداره و می بینید اونها رو …

Alireza Sajedi replyپاسخ

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

لقمان آوند

ممنون
تصحیح شد

مهرزاد خیری replyپاسخ

سلام
چرا استاد در جلسه 19 کلاس های زیادی را با نام main تعریف کردند آیا دلیل خاصی دارد
من هنگامی که می خواستم استایل دهی کنم برام خیلی مشکل پیش می آمد

وحید صالحی

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

ham kee replyپاسخ

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

لقمان آوند

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

itone replyپاسخ

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

وحید صالحی

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

it,one replyپاسخ

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

وحید صالحی

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

sana_esi replyپاسخ

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

وحید صالحی

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

حمیدرضا صفری replyپاسخ

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

لقمان آوند

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

حمیدرضا صفری

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

لقمان آوند

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

مهدی یار خزاعی replyپاسخ

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

mohammadali sedaghat replyپاسخ

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

مصطفی قدیمی

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

محمد شهرکی replyپاسخ

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

nilla abr replyپاسخ

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

حسین ملهم replyپاسخ

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

حامد امیری replyپاسخ

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.