
در این جلسه از دوره آموزش طراحی وب به تبدیل یک قالب شیک و فلت PSD به کدهای html و css خواهیم پرداخت و نکات ریز و درشت مربوط به این تبدیل رو به شما آموزش خواهیم داد . این جلسه از آموزش رو دوست خوبم آقا جواد باقی در خدمت شما هستند .
دموی قالب تبدیل و طراحی شده در این جلسه
عموم مطالب مطرح شده در این جلسه عبارتند از :
- مقدمه اولیه برای تبدیل قالب فتوشاپ به کد
- ذکر معایت و مزیت های کدنویسی مستقیم در مقالب طراحی با فتوشاپ
- پیشنیازهای تبدیل قالب فتوشاپ به کد
- تشریح روند و مراحل کلی تبدیل قالب به کد
- نمایش قالب انتخابی و توضیح ساختار آن
- شروع تبدیل قالب از بالا به پایین
- کدنویسی هدر قالب
- کدنویسی اسلایدر
- کدنویسی سایدبار و محتوای قالب
- کدنویسی فوتر قالب
- نمایش قالب تبدیل شده و توضیحات نهایی
:: توجه
این مطلب یک جلسه از آموزش طراحی وب سایت می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.
سلام خدمت شما.
فایل این جلسه موجود نیست، میشه این مشکل رو حل بفرمایید
سلام وقتتون بخیر آقای آوند
ممنونم بابت وقت و تمرکزی که گذاشتید برای تهیه این دوره ی فوق العاده
دو سوال برام از مباحث این جلسه پیش آمده ممنون میشم اگر جواب بدین :
۱. زمانی که استایل دهی اسلایدر انجام می شد وقتی به اون دایره های سلکت پایین اسلایدر رسیدیم. با این که لینک زده بودیم براشون ولی حالت لینکی نداشتن و اقای باقی گفتن این مشکل بخاطر اینه که position متفاوت هست در اونجا و این مشکل رو آمدن با تعریف یه سلکتور برای اون لینک ها و قراردادن position : absolute و width و height هم اندازه با Li ها برطرف کردن . دلیل این مورد رو درست متوجه نمیشم و ممنون میشم اگر بیشتر راجبش توضیح بدین که این لینک دار نبودن اون سلکت ها چه ربطی به position داشت؟
۲. توی استایل دهی اسلایدر اینبار برای اون دکمه های عقب و جلو وقتی background تعریف کردن آمدن مثلا برای دکمه ی عقب position رو هم گذاشتن left top در background در حالی که اگر این position ها رو حذف هم کنیم مشکلی پیش نمیاد در ظاهر . نکته ی خاصی داشت استفاده از این مورد یا نه ؟
سلام آموزشها تا این جلسه فوق العاده بوده و اصلا آدم لذت میبره با شما کار کنه. میخوام دوره های دیگه هم ازتون بخرم و پیشرفت کنم
با درود بیکران
دکتر آوند و مهندی باقی عزیز
از آموزش شما در خصوص تبدیل فایل psd به html بسیار سپاسگزارم واقعا عالی بود.
سلام استاد خسته نباشید؛ توی این جلسه برای لود فونت ها آقای باقی بصورت جدا جدا فونت ها رو لود کردند اما شما کد ها رو در جلسه 12 به صورت یکجا استفاده کردید. کدوم روش بهتره؟
منتظر جوابتون هستم …
با سلام . من در قسمت کد نویسی دکمه ی عضویت برام سوال پیش اومده. وقتی border:0 قرار دادیم دیگه قابل کلیک نمیشه و مانند یک باکس معمولی دیده میشه.
میشه توضیح بدید برای رفع این مشکل باید چیکار کرد ؟
سلام قرار بود یک psdبه عنوان تمربن بدید ما کد بزنیم جلسه نوزدهم چیشد؟
سلام آقای آوند
از برنامه Adobe Muse برای طراحی سایت استفاده میشه، برای پیاده سازی طرح کلی و اولیه مناسب هست؟
adobe muse برای سهولت فرایند طراحی سایت به کمک برنامه نویس های صفحات وب می آید. کاربرد adobe muse در صفحات وب خلاصه نمی شود و برای برنامه نویسی اندروید هم کاربرد دارد.
سلام استاد آوند عزیز.
بنده یه چیزی رو میخواستم بپرسم.
یک سری عکس ها تو سایت های مختلف هست که همراه با رفتن اسکرول به پایین عکس به بالا حرکت میکنه،نمیدونم منظورمو خوب رسوندم ولی مثلا این سایت:https://aminbahrami.ir صفحه اصلیش همش از این نوع عکس هاست.
با تشکر از آموزش خوبتون.
با سلام خدمت استاد عزیز
استاد من فایلهای آموزشی رو تا همین جلسه نگاه کردم و این پروژه رو کامل کد زدم اما برای تمرین بیشتر یک فایل
psd لایه باز دانلود کردم و کدنویسی کردم ممنون میشم نگاه کنید و برای اولین کارم نظرتونو بگید
http://etc.zarup.com/102922-download-home.zip
سلام
دیدم خیلی خوب کار کردید.
فقط سایز فونت های تاریخ در منوی سمت راست رو می تونید کوچیک تر کنید و به وسط بیارید که متناسبتر بشه
موفق باشید
بله حق با شماست استاد .
اگه اولین کار من به نظر شما خوبه به واسطه تدریس خوب شماست استاد، راستش من خیلی وقت بود
به طراحی وب علاقه داشتم ولی هیچ وقت به طور جدی دنبال نکردم. تا زمانی که با سایت شما آشنا شدم و نحوه آموزشتونو دیدم الان دیگه واقعا خیلی علاقه ام بیشتر شده و دارم جدی دنبال میکنم
و در پایان هم میخوام بابت اهمیتی که به دانشجوهاتون میدید با وجود تمام مشغلهاتون سپاسگزاری کنم.
موفق و پایدار باشید 🙂
ممنون از شما لطف دارید
براتون آرزوی موفقیت می کنم
سلام. وقت بخیر. یه سوال داشتم.
فرض کنید ما یه اسلایدر داریم که داخل اون اسلایدر یه عکس هست، متن هست، دکمه عقب جلو هست.خلاصه اینکه چندین المان توی اون اسلایدر وجود داره. سوالم اینه که توی قسمت نوشتن تگ ها، آیا اصولی برای به ترتیب نوشتن تگ ها هست یا نه؟ همینجوری میشه شروع کرد و تگ نوشت یا باید طبق قاعده ای پیش رفت، اول کدوم و بعد کدومو …؟
با تشکر
خیر اصولی نداره چون برای تمام موارد بجز تصویر از خاصیت absolute استفاده میشه که باعث شناور شدن اجزا مختلف و حرکت اونها روی هم میشه
اگر به چنید عنصر بخواهیم یک استایل مشابه اعمال کنیم یک کلاس با پراپرتی مشخص و مورد نظر می نویسم و با سایر عناصر اعمالش می کنیم
بله از float استفاده کنید بعضی مواقه هم برای اینکه تسلطتتون بیشتر بشه بصورت آزمون و خطا پراپرتی های که فکر می کنید می تونه کار کنه رو امتحان کنید اینجوری مباحث رو بهتر و سریع تر یاد می گیرید
موفق باشید
از پراپرتی direction براشون استفاده کنید