آموزش product menu(قسمت دوم-پروژه دوم)

طراحی سایت اختصاصی | سید عباس حسینی 18 آبان 1399 0

آموزش product menu(قسمت دوم-پروژه دوم)

به نام خدا امروز اسلایدر و منوی فروشگاه.

برای اینکه بتوانیم یک اسلایدر ایجاد کنیم نیاز به آموزش زبان های دیگری داریم مانند جاوا و جی کوئری داریم. از آنجا که اکثر کسانی که آموزش ها را دنبال می کنند تازه زبان های نشانه گذاری را یادگرفته اند و نیاز به تمرین بیشتری دارند در این جلسه جایگزاری آن را انجام خواهیم داد و در پروژه های آینده آنها را ایجاد خواهیم کرد. برای همین یک تگ div ایجاد می کنیم این تگ محل اصلی اسلاید مارا نمایش می دهد و به آن کلاس خواهیم داد. سپس نیاز به تگ div دیگری داریم که صفحه های اسلایدر خودمان را در آن قرار دهیم و آنها را نمایش بگذاریم و دیگر صفحات نیز نمایش داده نشوند حالا ساخت صفحه های اسلایدر را شروع می کنیم. برای این کار نیاز به یک تگ div دیگر داریم در نظر داشته باشید زمانی که اسلایدر را راه اندازی کردیم نیاز نیست تگ های قبلی را ایجاد کنیم فقط لازم هست تگ هایی که برای صفحه ایجاد کردیم را کپی کنیم و محتوای آن را تغییر دهیم در حال حاضر یک تصویر پس زمینه برای این صفحه در نظر می گیریم اندازه آن را کامل قرار می دهیم. تا تمام اسلایدر ما را بگیرد. اکثر اسلایدر ها علاوه بر نمایش تصویر متنی را نیز هم زمان نمایش می دهند برای نمایش این متن نیاز به تگ div دیگری است که مکان و نمایش متن ما را روی اسلایدر مشخص کند. برای نمایش عنوان از یک تگ H1  استفاده می کنیم و برای نمایش متن و قرار دادن آن از تگ p استفاده می کنیم و یک دکمه که به صورت دلخواه می باشد قرار می دهیم که اگر مطلب ادامه دار بود و در یک اسلایدر قابل نمایش نیست بتوانند به صفحه دیگر کاربران را راهنمایی کنند تا بتوانند ادامه مطالب را در آن صفحه مشاهده و مطالعه نمایند.

مشاهده می کنید که متن و همینطور عنوان آن به بالای اسلایدر ما نزدیک است که این اصلا زیبا نیست و برای این کار به تگ div که فضای اسلایدر ما را مشخص می کند یک padding از بالا خواهیم داد تا محتوای ما از قسمت بالای صفحه فاصله داشته باشند همینطور برای بهتر نمایش دادن عنوان اسلایدر در صفحه وبسایت padding-bottom نیز به آن می دهیم تا از محتوای متنی که در پایین آن قرار دارد نیز فاصله داشته باشند متنی که قرار دارد متن اصلی هر مطلبی است که ما در اسلایدر نمایش می دهیم برای همین ما این متن را باید به گونه ای قرار دهیم که کاربر با نگاه اول علاقه مند به مطالعه آن شود برای همین رنگ آن را روشن قرار می دهیم و از کناره ها به یک اندازه فاصله برای آن ایجاد می کنیم نکته ای که برای عنوان استفاده کردیم یعنی فاصله از پایین را برای این متن نیز استفاده می کنیم زیرا باعث بهتر شدن کار ما خواهد شد.

ساخت نوار محصولات:

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

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

در قسمت اول این فضا یک فرم ایجاد می کنیم که کاربر بتواند محصولاتی که می خواهد را در آن جستجو کنند هر وبسایت فروشگاهی برای اینکه بتواند محصولات خود را به کاربر نمایش دهد یا به عبارتی نیاز کاربر را به آن نمایش دهد نیاز به این فرم جستجو دارد. و برای اینکه بتوانیم تگ input و button را کنار یکدیگر قرار دهیم و از دستورات کمتری استفاده کنیم به تگ form یک display با ویژگی flex خواهیم داد. این دستور باعث می شود که محتوای داخل یک تگ کنار یکدیگر قرار بگیرند.

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

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

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

برای دانلود کردن کدها و دستورات آن می توانید روی این قسمت کلیک کنید.

 

 

قسمت های دیگر این مجموعه:

آموزش طراحی وب سایت قسمت اول 

آموزش طراحی وب سایت قسمت سوم

آموزش طراحی سایت قسمت چهارم 

آموزش طراحی سایت قسمت آخر

 

 



دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *