دوره مجازی طراحی وب (جلسه 18): تکنیک ها و ترفندها - ایجاد منوی وبسایت ها

- visibility ۵۴ mode_comment

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

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

  • ذکر نکته های کاربردی و مهم در طراحی صفحات وب
  • نحوه انتخاب عرض مناسب برای قالب ها و صفحات وب
  • بررسی رزولوشن مانیتور ها و آنالیز عرض آن ها برای انتخاب عرض صحیح قالب
  • بررسی علل ایجاد اسکرول افقی و راه های پرهیز از اتفاق افتادن آن
  • مقایسه انتخاب عرض قالب به صورت تمام عرض در مقابل عرض ثابت
  • نکاتی در مورد استفاده از ویژگی max-width برای ایجاد حد ماکزیمم
  • نکته های مفید در تراز کردن عمودی و افقی متن ها و اشیاء در صفحات وب
  • نحوه چیدن تگ ها و المان های بلاکی در کنار هم
  • چیدن تعداد خاصی باکس در یک سطر
  • مینی پروژه : پیاده سازی کامل منوی بالای سایت حاوی زیر منوهای تو در تو
info توجه

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

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

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

سلام خسته نباشید
– ببخشید این منو بصورت ریسپانسیو نبود ریسپانسیوشم در قسمتای بعدی میگین؟ اون دموی قالب ریسپانسیو رو دیدم ولی منوش ساده بود و زیر منو نداشت

*** مشکل live edit در phpstorm با استفاده از این راهنما به راحتی حل میشه و خودمم مشکل داشتم که حل شد و الان کار میکنه هر کی مشکل داره با راهنمای زیر بره مشکلش حل میشه :
https://confluence.jetbrains.com/display/PhpStorm/Live+Edit+in+PhpStorm

وحید صالحی

بله دوست عزیز ممنون از شما

Seyedali Zia

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

لقمان آوند

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

امین

سلام استاد
ببخشید من الان منوی ریسپانسیو درست کردم فقط میخوام در حالت نمایش با موبایل کاربر بجای اینکه با hover کردن موس روی لیست ها زیرمنوش نشون داده بشه با کلیک کردن نشون داده بشه با همون جی کوئری کدی که دادین در جلسه 24 تست کردم برای زیر منوی اول درست میشد اما زیرمنوی دوم هر کار کردم نشد الان میخوام تقریبا مثل منوی سایت سون لرن باشه که وقتی کاربر کلیک میکنه براش همون زیرش باز شه یا توی یه صفحه جدا مثل سایت شما باز شه از چه تکنیک و کدی باید استفاده کنم؟
ممنون

لقمان آوند

همون کاری که با جی کوئری برای منوی اصلی کردید رو برای زیر منو ها هم انجام بدید . یه کلاس به اونها بدید و با جی کوئری تعین کنید اگه روش کلیک شد محتوای درونش نمایش داده بشه …

بهرام آزادی

سلام
دو تا سوال داشتم
یکی اینکه اگر اطلاع داشته باشید در phone gap از این پلاگین های css و jquery میشه استفاده کرد و یا اینکه شرایط در اونجا متفاوت خواهد بود؟
و دوم اینکه وقتی برای تگ div ی که کل محتوای صفحه رو در بر گرفته و معمولا آی دی main میگیرد اگر عرض را به صورت درصدی در نظر بگیریم و مثلا 100% و بخواهیم بردر برای آن تعیین کنیم
آیا باید box-sizing:border-box را نیز تعیین نمود؟

لقمان آوند

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

itone

خسته نباشید استاد اوند
من این قضیه رزولوشن رو نفهمیدم راستش نمیدونمم کجاشو نفهمیدم و چه جوری سوالمو مطرح کنم 😳 😳 😳 😳 😳 😳 😳 ❗ 😥

چند تا سوالی که الان به ذهنم رسید
1- الان اگه بخایم قالب تمام عرض درست کنیم width رو 100 درصد بگذاریم توی مانیتور های بزرگ کش میاد ..
و توی مانیتور های کوچیک هم اسکرول میخوره
اینجور که از اموزش فهمیدم باید max-width بگذاریم ولی max-width رو چی بگذاریم ؟؟؟؟؟
1024 فکر کنم گفتین ؟؟
چرا 1024 ؟؟

الان قالب من با اینکه 100% هستش
http://s7.picofile.com/file/8265566284/2016_08_29_13_06_53.png
max-width اعمال شده

ببخشید کاملا قاطی کردم !!!!!!!!!!
😳 🙁 😕 😥 😐 😡

لقمان آوند

برای این گفتیم حول و حوش 1000 باشه چون این عرض در نمایشگرهای مختلف خوب نشون داده میشه. کوچکترین مانیتور ها الان دیگه این عرضو دارند و اسکرول نمی خورن. برای دستگاه های موبایل هم که باید رسپانسیو کنید.

D4rk Sky

سلام استاد جواب من رو ندادید
پرسیدم برای navigation bar که زیر منو دارن با css میشه بهش افکت داد یا باید از جی کوری استفاده کرد؟؟
مثلا موس رو میبریم رویه منو دوره های ویژه با یه انیمیشن نمایش داده بشه از کم رنگ پررنگ شه از پایین بیاد بالا و غیره اگر با css میشه بگید چطور میشه من هرکاری کردم نتونستم
با تشکر

وحید صالحی

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

نیاز به لاگین

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