campaign-edianeh-98

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



visibility  
mode_comment   ۵۴

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

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

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

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

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

comment دیدگاه کاربران
nader70 replyپاسخ

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

لقمان آوند

ممنون
سعی می کنم در جلسات آینده این مورد رو در نظر بگیرم
متشکرم

jalal ahmadian replyپاسخ

در حال دانلود …. ❓ ممنون استاد…..

لقمان آوند

خواهش می کنم
موفق باشید

asipool lika replyپاسخ

هیجده همون هجدهه؟ یا یه جلسه جدید که من دانلود نکردم؟ 😉

لقمان آوند

جلسه 18 هست. اشتباه تایپی بود که اصلاح شد . دیشب منتشر شده .

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

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

لقمان آوند

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

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

سلام خسته نباشید …
واقعا این جلسه خیلی خوب بود …
درضمن جلسه 19 کی منتشر میشه استاد …

لقمان آوند

سلام
ایشالله فردا …

دانشجو replyپاسخ

با سلام و تشکر استاد آوند عزیز

در مورد ثابت نگه داشتن منوها که گفتید فک کنم باید z-index هم بهش بدیم که موقع اسکرول زیر المانهای دیگه نره بعد در این مورد توی بعضی قالبها دیدم که منو در حالت اول در همون قسمت مثلا زیر هدر سایت قرار داره و بعد از اینکه سایت اسکرول میخوره از اون بخش جدا میشه و در قسمت بالای سایت فیکس میمونه در این مورد هم اگه فرصت بود توضیح بدید که به چه شکلی هست.
ممنونم

لقمان آوند

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

دانشجو replyپاسخ

یه نمونه از نگه داشتن منو در بالای سایت پیدا کردم با استفاده از جیکوئری هست میذارم شاید به کار دوستان هم بیاد دموش توی سایت هست
http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

Abbas412 replyپاسخ

سلام
یه مشکلی هست
فایل های جلسه 17 و 18 رو که من دانلود کردم؛ توی هر دو جلسه، اسلایدر قالب که کار نمیکنه (حتی اون navigation هم اصلا قرار داده نشده)
همینطور پلاگین prettyPhoto هم کار نمیکنه؛ رو عکسا کلیک میکنم عکس ها تو تب جدید باز میشن، پلاگینه کار نکرد 🙁

لقمان آوند

مشکلی نداره
فقط دقت کنید که فایل jquery.min.js از پوشه common لود شده و ببینید که مسیر انتخابی برای جی کوئری صحیح باشه …
در عین حال من جی کوئری رو به فایل های این دو جلسه اضافه کرده باشم که این مشکلو نداشته باشید . می تونید دوباره دانلودشون کنید .

Mani Soft replyپاسخ

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

لقمان آوند

پس زمینه li اصلی و ul درون اون رو هنگامی که موس روش میره (hover) یه چیز یکسان بزار …

Mani Soft replyپاسخ

فکر میکنم منظورم رو خوب نرسوندم
در همین سایت شما در منوها بالا وقتی موس رو روی دوره های ویژه می برین و سپس روی یکی از زیر منوها مثل آموزش طراحی وب می رین بکگراند هر دوتاشون مثل هم هست
در این مورد راهنمایی کنید

لقمان آوند

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

Mani Soft replyپاسخ

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

لقمان آوند

کد منویی که دارین برام ایمیل کنید و تو ایمیل بگید میخواید چه تغیری کنه که براتون تصحیح کنم .

سمیرا

من با این تغییر تونستم رنگ منو اصلی و لینک زیر منو فعال رو یکی کنم :

} topmenu ul > li : hover #
background-color:blue !important
{

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

سلام استاد عزیز فقط استاد من هر کاری کردم مثل این http://androidzoom.ir/ سایت منوی
درست کنم نشود شما یک بار به این سایت سر بزنید اگه راهنمایی کنید ممنون میشم استاد عزیز 😆

لقمان آوند

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

محمد صباغی replyپاسخ

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

لقمان آوند

کد مشکلدارتو برام ایمیل کن و مشکل رو هم بگو

میوند replyپاسخ

سلام
زیر منو های وردپرس را اضافه کردم کمی هم تغیرات آوردم ملاحضه فرمایید مشکل داشت بگید
ممنون
لینک

مازیار replyپاسخ

سلام
تشکر بابت حذف نظر بنده و پاسخ ندادن به ایمیل؟

لقمان آوند

سلام
نظری از شما حذف نشده . ایمیلم رو چک کردم و از شما نبود چیزی …
دوباره برام بفرستید .

hossein replyپاسخ

سلام استاد
در طراحی منو اگر br قبل مطالب که در زیر منو اومدن برداریم باز هم میرن زیر قسمت منو (علت نیومدن مطالب الآن فقط به خاطر استفاده از br و فونت درشت بوده) راه حل چیست؟
ممنون

لقمان آوند

دقیقا منظورتون رو متوجه نمی شم. کدتون رو برام ایمیل کنید و دقیق توضیح بدید که مشکل چیه پاسخ میدم.

miladcr7 replyپاسخ

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

لقمان آوند

سلام
خود زیر منو کل عرضش 100% هست دیگه ! حالا به اندازه کل عرضش از سمت راست که فاصله بگیریم دقیقا میریم به سمت چپش! فاصله از بالا هم که صفر هست که همتراز نمایش داده بشن …

miladcr7

ممنون جناب اوند عزیز.گرفتم چی شد

hojat replyپاسخ

تکنیک های خوبی بود.
من سه تا منو طراحی کردم دوتا بصورت افقی و یک عمودی
منو افقی یک :http://tikpix.persiangig.com/7learn/test2.html
منو افقی دو: http://tikpix.persiangig.com/7learn/test3.html
منو عمودی سه : http://tikpix.persiangig.com/7learn/test5.html
اینا رو گذاشتم شاید بدرد کسی بخوره مخصوصا منوی عمودی

وحید صالحی

خیلی خوبه

roohi b replyپاسخ

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

لقمان آوند

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

roohi b

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

لقمان آوند

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

بهادر replyپاسخ

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

لقمان آوند

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

امین replyپاسخ

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

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

وحید صالحی

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

Seyedali Zia replyپاسخ

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

لقمان آوند

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

امین replyپاسخ

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

لقمان آوند

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

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

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

لقمان آوند

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

itone replyپاسخ

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

چند تا سوالی که الان به ذهنم رسید
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 replyپاسخ

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

وحید صالحی

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

ارسال نظرات

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