در این جلسه از دوره آموزش طراحی وب به تبدیل یک قالب شیک و فلت PSD به کدهای html و css خواهیم پرداخت و نکات ریز و درشت مربوط به این تبدیل رو به شما آموزش خواهیم داد . این جلسه از آموزش رو دوست خوبم آقا جواد باقی در خدمت شما هستند .
دموی قالب تبدیل و طراحی شده در این جلسه
عموم مطالب مطرح شده در این جلسه عبارتند از :
این مطلب یک جلسه از آموزش طراحی وب سایت با HTML , CSS می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.
سلام ….
لینک دانلود مشکل داره …
سلام
تست و دانلود کردم مشکلی نداره …
ببخشید مشکل از مرورگر من بود
با سلام
تشکر از شما استاد گرامی
استاد بنده عقب افتادم از جلسات شما.
فقط لطفا آن موارد درخواستی رو یادتون نره….
ممنون 😳
در حال دانلود. ممنون. پروژه بعدی پروژه ی آخری هست ؟
بله، ولی در جلسه های بعدی اونا رو توسعه میدیم و روشون کار می کنیم .
پروژه بعدی پروژه خیلی جالبی خواهد بود .
تا اینجا که خیالمون بابت تدریس دوره ها راحت بوده. ممنون بابت همه چیز
ممنون از لطفتون
با سلام وتشکر از آموزشی که ارائه نمودید اگر از تگ article در قسمت پستها استفاده می نمودید بهتر نبود؟…اگر در قسمت مرتب نمودن وخطی نمودن ul بجای float از inline-block ایستفاده میشد مشکلی پیش می آمد
بله برای پست ها میشه از article استفاده کرد که از نظر معنایی بهتره .
برای ul هم به هر دو طریق میشه اینکارو کرد و مشکلی نداره …
400 مگابایت؟ 😯 دو قسمتش میکردید خب 🙁
دیگه گفتیم کامل در اختیار شما قرار بدیم .
باسلام خسته نباشید استاد گرامی
میخواستم یک خواهشی ازشما داشته باشم توی جلسه بعدی که میخواهید آموزش بدهید
یک چیز مثل آمار سایت خود شما هست برای بند بگید که چطور درست کنم میخواستم برای نویسنده یک باکس درست کنم ممنون میشم
سلام
این بخش آمار ما با ایجکس لود میشه و نیاز به جاوااسکریپت و آشنایی با اون داره …
یه همچین چیز نمیشه به cssدرست کرد مثل برای hover وقتی روی عکس نویسنده میره مشخصات نویسنده بیاد برون ممنون میشم که راهنمایی کنید
بله میشه
در جلسه css پیشرفته مثالش رو میاریم …
ایا در پروژه هایی با صفحات زیاد از یک فایل سی اس اس استفاده میشود یا از چند فایل لطفا در مورد نحوه کد نویسی سی اس اس همچین پروژه هایی هم توضیح دهید
با درود فراوان
سلام
از یک فایل مشترک معمولا استفاده میشه .
پیچیدگی خاصی نداره …
سلام استاد خسته نباشی
یه مشکل وقتی سایز سایت رو کوجیک میکنیم دو قسمت مشکی منو و فوتر خراب میشه کامل صفحه رو نمیگیره چیکار باید کرد
سلام
چنین مشکلی رو من ندیدم، با چه مرورگری تست کردید ؟
هم کروم هم فایرفاکس برای من به این صورت نمایش میده
مرورگر رو مینی مایز کنین بعد اسکرول کنین به سمت چپ
ممنون
یه min-width: 1000px روی به سلکتور های header و footer بدی درست میشه …
سلام استاد
ممنون بابت این جلسه ولی کاش یکم پروژه پیچیده تر بود چون اکثرا تموم کارایی که تو پروژه فصل سی اس اس کردیم همین رو تکرار کردیم فقط بجای استایل از عکس استفاده کردیم
سلام
تو این جلسه بیشتر هدف این بود که نحوه تبدیل طرح فتوشاپی رو یاد بگیرید
پروژه بعدی نکات و مباحث جدیدتری داره ضمن این که در ادامه سعی می کنیم اونا رو بهبود بدیم
داداش ی داستانی هستش ..
اونم اینکه شما ذهنیت به بحث پی اس دی تو اچ تی ام ال درست بشه ..
یعنی به همین سادگی هستش ک گفتی ..
همینه دیگه !!!! چیز شاخی نداره این مبحثه …
مرسی استاد ……
ممنون آقا کیان …
دقیقا همینه که گفتی …
وقتی html و Css رو خوب بلد بشی تبدیل psd به کد واقعا راحته …
استاد جلسه بعدی کی قرار داده می شه ؟
استاد پروژه طوری باشه که بعدا در دوره جاوا که قرار هست برگزار بشه بیایم با جاوا اسکریپت روی این پروژه ها که در این دوره داریم انجام می دیم کار کنیم البته این پیشنهاده
ممنون
برای دوره جاوااکریپت هم برنامه های خاصی داریم و به بهترین نحو اون رو پیش میبریم . نگران نباشید .
استاد تخفیف نوروزی ندارید؟:)
ایشالله خواهیم داشت .
از طریق سایت اطلاع رسانی می کنیم …
عالی بود
ممنون ❓
یه سوال
چطور میشه برای قرار دادن تصاویر در سایت اول همه تصاویر رو داخل یه تصویر قرار بدیم و بعدا اونا رو وارد سایت کنیم برای اینکه حجم بارگذاری صفحات بیاد پایین تر دقیقا مثل سایت خودتون…
می تونی از css sprite استفاده کنید .لینک های زیر رو ببینید:
لینک
لینک
ی سوال لقمان جان
میشه بگید چه کسی این قسمت رو ضبط کرده؟ایا دلیل خاصی داره کسی دیگه اموزش داده؟
ممنون
سلام
آقای باقی از دوستان هستند و تسلطتشون در تبدیل psd به کد خوب هست . دلیلش هم علاوه بر تنوع و اشنایی با ایشون ، تسریع در انتشار جلسات بوده …
سلام
آقای باقی قول یه طرح PSD رو به ما دادند، که بعنوان تمرین بذارنش و ما خودمون به کد تبدیلش کنیم 😎
منتظر طرح باشیم؟
سلام
بله طرح آمادست و در جلسه آخر بهتون میدیم حتما …
سلام خسته نباشید این قسمت مشکل داره و نمیتوان دانلود کرد لطفا رسیدگی کنید ممنونم
سلام
بزودی مشکل برطرف خواهد شد…
عرض ادب و ارزوی سالی خوش
قسمت نوزده دانلود با مشکل روبه رو است
لطف کنید اصلاح بفرمایید
سپاس
سلام دوست عزیز لینک دانلود مشکلی نداره فقط چون فرمت این قسمت m4v هست شما هم مثل بعضی از دوستان با مشکل عدم دانلود مواجه بشید .
برای برطرف کردن این مشکل از نرم افزار internet download manager یا همون idm استفاده کنید ابتدا وارد نرم افزار شوید سپس وارد منوی downloads و بعد منوی option بشید و تب File types رو انتخاب کنید و در اولین کادر فرمت های مجاز برای دانلود موجوده چک کنید بین اونها فرمت m4v موجود باشه اگر نبود در انتهای فرمت ها کلیک کنید و با یک فاصله نام فرمت m4v رو وارد و روی ok کلیک کنید بهد نرم افزار بسته و دوباره اجرا کنید و فیال رو دانلود نمایید…
موفق باشید…
دستتون درد نکنه مشکل این نبود چون تو لیست که گقتین اون فرمت رو خود دانلودر داشت ممنونم شاید از هاست بود که حل شد ممنونم
دوستان تمامی قسمت ها به درستی دانلود میشود همین قسمت 19 فقط idm نیاز است اگر ممکن است راهی دیگر برای دانلود فایل قرار دهید
مشکلی نداره و تست شده …
تنها مسئله ای که هست اینه که پسوند فایل جلسه 19 مثل بقیه جلسات mp4 نیست و m4v هست …
سلام استاد وقت بخیر
دو تا سوال : آیا در طراحی این قالب فقط منظور تبدیل طرح PSD به HTML بوده ؟ یا ریزه کاریها هم اهمیت داشته ؟ مثلا دکمه عضویت یا ادامه مطلب پستهای سایت کلیک خور نیستند یا اسلایدر و متن متحرک نیستند .
2) بعضی جاها با دادن FLOAT و margin , padding محل قرار گیری یه باکس رو میشه تعیین کرد و دقیقا همان حالت رو میشه با position هم انجام داد. ایا راهی برای تشخیص روش صحیح هست ؟ یا برداشت من از پایه اشتباه هست و چنین چیزی اصولا درست نیست ؟
سلام 1-بله انجام شده2-شما بنا به تجربه و نیازتون باید از هر کدام از مواردی که ذکر کردید استفاده کنید
سلام خسته نباشید
واقعا فکر نمیکردم به همین راحتی باشه! عالی بود@ فقط یه سوال برام پیش اومد :
فرض کنید یک هدر 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 {…}
ممنون
تمامشون درست هستند بهترین روش اینه که با خلاصه ترین راه و کد نویسی کم استایل رو اعمال کنید
با سلام..دوره بی نظیری بوده تا الان ..من هیچ اطلاعات اولیه ای نداشتم اما الان هرچیزی که مد نظرم میاد رو میتونم کد نویسی کنم که مدیون اموزش خوب شما هستم…
یه سوال بی مورد داشتم خواهشا جواب بدید این علامت سوال از ذهنم خارج شه فقط 😆
برای ساختن پنل مدیریت برای یک وبسایت باید php بلد باشی و براش پنل تعریف کنی،سوال من اینجاست به فرض صدتا سایت داریم باید برای تک تک بشینیم و پنل بنویسیم یا اگه یک پنل جامع بنویسیم با کمی تغییرات میتونیم اونو روی تمام سایت ها استفاده کنیم؟!!
با تشکر فراوان
خوشحالیم که مورد استفادتون قرار گرفته
برای پنل علاوه بر طراحی ظاهرش که با css و html هست برای داینامیک کردن و ارتباطش با دیتابیش بله باید php بلد باشید.ساختار پنل ها 80 درصد مشابه هست یک بار کدنویسی می کنید و بارها می تونید ازش در پروژه های مختلف استفاده کنید مخصوصا اگر بصورت شی گرایی و mvc کدنویسی کنید 20 درصد باقی مانده هم بنا به امکانت سایت می تونه متفاوت باشه که باید کدنویس بشه
مهندس صالحی عزیز متشکرم بابت پاسخ کاملتون..فقط ی سوال دیگه؟
کدنویسی شی گرا یک زبان جدای از php هست و اگر هست همینجا دورش هست یا نه؟!!مرسی
در ضمن مشتاقانه منتظرم این دوره های طراحی وب تموم شه و یک کلاس فتوشاپ با شما بردارم 😀
خواهش می کنم نه جدای از php نیست بلکه میشه گفت یه روش و تکنیک برای کدنویسی هست و پایه و اساس اون بر حب کلاس ها و ارث بری از کلاس هایی هست که تعریف می کنیم
سلام .
ممنون بابت راهنمای قدم به قدم طراحی قالب .
فقط یه سوال .
جناب آوند برای تگهای Div از ID هم استفاده میکردن و تو Css براش # میذاشتن اما شما اصلا استفاده نکردین و همه رو Class زدین .
میخواستم بدونم فرقشون چیه ؟
فوق این 2 تا مثلا :
Div Class با Div ID
هر دو رو میشه برای استایل دهی در css استفاده کرد. منتهی آیدی منحصر به فرده و در یه صفحه نمی تونه تکراری باشه ولی کلاس اینطوری نیست.
با سلام و تشکر بابت این جلسه. فقط یه سوال برام پیش اومد. تو زمان 1:42:00 وقتی خواستین به تگ a برای لیست منو پدینگ از همه جهت بدین از تمام جهات پدینگ عمل کرد ولی پدینگ بالا اعمال نشد. برا حل این مشکل از خصوصیت display:block برای تگ a استفاده شد و مشکل حل شد…. میشه بیشتر توضیح بدین؟
ممنون
تگ a یه تگ inline هست و پدینگ بالا و پایین نمی خوره. مگر اینکه شما display اون رو به block یا inline-block تغیر بدید. این موارد رو که تو دوره گفتیم …
سلام.
من سوالی رو 2 اردیبهشت پرسیدم. هنوز جواب نیومده!!!
ببخشید ندیده بودم .
پاسخ داده شد
سلام … لینک دانلود ویدیوی جلسه 19 خرابه و دانلود نمیکنه … ارور میده … چند بار امتحان کردم ولی نشد… ممنون میشم سریعتر اصلاح کنید.
تست کردیم
مشکلی نداره
سلام
یک آموزش قدم به قدم و خیلی خوب که خیلی ازش لذت بردم و بعد این 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.
مشکل کجاست؟
لینکاشون در صفحه ثبت نام رو کلیک کنید مشکلی نداره و می بینید اونها رو …
با سلام و درود
لینک دموی طراحی شده مشکل دارد لطفا پیگیری کنید.
ممنون
تصحیح شد
سلام
چرا استاد در جلسه 19 کلاس های زیادی را با نام main تعریف کردند آیا دلیل خاصی دارد
من هنگامی که می خواستم استایل دهی کنم برام خیلی مشکل پیش می آمد
اگر به چنید عنصر بخواهیم یک استایل مشابه اعمال کنیم یک کلاس با پراپرتی مشخص و مورد نظر می نویسم و با سایر عناصر اعمالش می کنیم
سلام استاد واقعا مرسی بابت ابن آموزش همین الان میخوام بشینم اولین قالبمو طراحی کنم
الان ی سوال دارم
فرض کنید ما بالای صد تا پست داریم و نمیخوایم همه پست ها در صفحه اصلی نمایش داده شه بلکه میخواهیم فقط سه پست در صفحه اصلی باشه و بقیه به صورت صفحه بندی باشه یعنی در انتها بلوک های پست ها شماره صفحه باشه و کاربر به هر صفحه ای بره. این چیزی که گفتم مربوط به مکانیزم قالب های وبلاگ هست
چجوری میتونم این کارو انجام بدم؟؟؟؟
مرسی
سلام
این کار با این دوره قابل انجام نیست و باید با یه زبان سمت سرور پیاده سازی بشه.
توی دوره php این مورد رو تدریس کردیم . می تونید این دوره رو بعدا ببینید.
سلام استاد اوند عزیز
ببخشیدم ن اگه بخام اون لوگوی بالایی که استاد باقی به صورت html ,cssکد بزنم به چه صورته ؟/
میخام یه h1داشته باشه که تایتل اصلیه و یه دونه h3که description هستش ؟
میشه راهنمایی کنین ممنون 😆
باید از float استفاده کنم دیگه بله ؟؟
بله از float استفاده کنید بعضی مواقه هم برای اینکه تسلطتتون بیشتر بشه بصورت آزمون و خطا پراپرتی های که فکر می کنید می تونه کار کنه رو امتحان کنید اینجوری مباحث رو بهتر و سریع تر یاد می گیرید
موفق باشید
سلامی دیگر 🙄
استاد موقعی که میخاستیم قسمت شبکه های مجازی رو استایل بدیم از float استفاده کردیم اگه بخایم از display:inline-block ;
استفاده کنیم همونطور که استاد باقی اشاره کردند تمام ایتم ها بر عکس میشن ایا راهکاری برای این وجود داره ؟ ❗
که برعکس نشه ؟؟
و پایداریشو حفظکنه ؟
از پراپرتی direction براشون استفاده کنید
سلام. وقت بخیر. یه سوال داشتم.
فرض کنید ما یه اسلایدر داریم که داخل اون اسلایدر یه عکس هست، متن هست، دکمه عقب جلو هست.خلاصه اینکه چندین المان توی اون اسلایدر وجود داره. سوالم اینه که توی قسمت نوشتن تگ ها، آیا اصولی برای به ترتیب نوشتن تگ ها هست یا نه؟ همینجوری میشه شروع کرد و تگ نوشت یا باید طبق قاعده ای پیش رفت، اول کدوم و بعد کدومو …؟
با تشکر
خیر اصولی نداره چون برای تمام موارد بجز تصویر از خاصیت absolute استفاده میشه که باعث شناور شدن اجزا مختلف و حرکت اونها روی هم میشه
با سلام خدمت استاد عزیز
استاد من فایلهای آموزشی رو تا همین جلسه نگاه کردم و این پروژه رو کامل کد زدم اما برای تمرین بیشتر یک فایل
psd لایه باز دانلود کردم و کدنویسی کردم ممنون میشم نگاه کنید و برای اولین کارم نظرتونو بگید
http://etc.zarup.com/102922-download-home.zip
سلام
دیدم خیلی خوب کار کردید.
فقط سایز فونت های تاریخ در منوی سمت راست رو می تونید کوچیک تر کنید و به وسط بیارید که متناسبتر بشه
موفق باشید
بله حق با شماست استاد .
اگه اولین کار من به نظر شما خوبه به واسطه تدریس خوب شماست استاد، راستش من خیلی وقت بود
به طراحی وب علاقه داشتم ولی هیچ وقت به طور جدی دنبال نکردم. تا زمانی که با سایت شما آشنا شدم و نحوه آموزشتونو دیدم الان دیگه واقعا خیلی علاقه ام بیشتر شده و دارم جدی دنبال میکنم
و در پایان هم میخوام بابت اهمیتی که به دانشجوهاتون میدید با وجود تمام مشغلهاتون سپاسگزاری کنم.
موفق و پایدار باشید 🙂
ممنون از شما لطف دارید
براتون آرزوی موفقیت می کنم
سلام استاد آوند عزیز.
بنده یه چیزی رو میخواستم بپرسم.
یک سری عکس ها تو سایت های مختلف هست که همراه با رفتن اسکرول به پایین عکس به بالا حرکت میکنه،نمیدونم منظورمو خوب رسوندم ولی مثلا این سایت:https://aminbahrami.ir صفحه اصلیش همش از این نوع عکس هاست.
با تشکر از آموزش خوبتون.
سلام آقای آوند
از برنامه Adobe Muse برای طراحی سایت استفاده میشه، برای پیاده سازی طرح کلی و اولیه مناسب هست؟
adobe muse برای سهولت فرایند طراحی سایت به کمک برنامه نویس های صفحات وب می آید. کاربرد adobe muse در صفحات وب خلاصه نمی شود و برای برنامه نویسی اندروید هم کاربرد دارد.
سلام قرار بود یک psdبه عنوان تمربن بدید ما کد بزنیم جلسه نوزدهم چیشد؟
با سلام . من در قسمت کد نویسی دکمه ی عضویت برام سوال پیش اومده. وقتی border:0 قرار دادیم دیگه قابل کلیک نمیشه و مانند یک باکس معمولی دیده میشه.
میشه توضیح بدید برای رفع این مشکل باید چیکار کرد ؟
با درود بیکران
دکتر آوند و مهندی باقی عزیز
از آموزش شما در خصوص تبدیل فایل psd به html بسیار سپاسگزارم واقعا عالی بود.
سلام آموزشها تا این جلسه فوق العاده بوده و اصلا آدم لذت میبره با شما کار کنه. میخوام دوره های دیگه هم ازتون بخرم و پیشرفت کنم