تکنیک ها و ترفندها - ایجاد منوی وبسایت ها

دسته بندی: آموزش
زمان مطالعه: ۲ دقیقه
۰۸ اسفند ۱۳۹۳

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

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

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

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

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

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

hashem

یعنی 97000 تومن پول خرید این بسته به اندازه 1000.000 تومن فقط تو هر جلستون انرژی می زارین واقعاً شما ترکها رو باید اسطوره مملکت دونس استاد آوند عزیز

D4rk Sky

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

وحید صالحی

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

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 باشه چون این عرض در نمایشگرهای مختلف خوب نشون داده میشه. کوچکترین مانیتور ها الان دیگه این عرضو دارند و اسکرول نمی خورن. برای دستگاه های موبایل هم که باید رسپانسیو کنید.

بهرام آزادی

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

لقمان آوند

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

امین

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

لقمان آوند

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

Seyedali Zia

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

لقمان آوند

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

امین

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

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

وحید صالحی

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

بهادر

با سلام بنده یه سوال داشتم:
وقتی که می خواهم استایل یک تولتیپ رو تغییر دهم مشکلم اینجاست که نمی توانم اون تولتیپ رو توسط ابزار بازرسی بگیرم و ماوس باید روی تکست باشه تا اون نمایش داده بشه و درکل اینجور ابزار شناور رو چطور باید انتخاب نماییم تا استایلشان را تغییر دهیم
با تشکر!

لقمان آوند

بالا سمت راست کدهای css فکر کنم یه بخشی وجود داره که حالت hover رو فعال کنید که بتونید اینجور موارد رو بهتر ببینید. در عین حال برای این موارد خاص ممکنه نشه خیلی خوب بازرسی کرد .

roohi b

سلام من هر کاری میکنم تو اینسپکت المنت نمیتونم این منو رو بسازم میشه برام کداشو تو یه فایل واسم بفرستین رو ایمیلم از همون ایکونا هم استفاده کنید چون دوس دارم ایکون و متن باشه دقیق همون باشه ایکوناش و کد html+css رو بفرستین بی زحمت مرسی
اینه ادرسشhttp://www.tooptarinha.com

لقمان آوند

سلام
کدهایی که تو ویدیو گفتیم تو فایل های همین جلسه هست. دانلود کنید و ببینید.

roohi b

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

لقمان آوند

ببخشید متوجه نشدم
این که یه منوی سادست که با چند تا لینک ساده ساخته شده. تو هر لینک یه متن و عکس هست و در hover اون رنگ آبی و بوردر بالای آبی می گیره !
جداسازی منو رو خودتون انجام بدید که یه تمرین خوب هم هست براتون. بنده الان وقت انجام اینکارو ندارم و تعداد سوالات دوستان زیاد هست …

وحید صالحی

خیلی خوبه

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل