دسته بندی محصولات(قسمت چهارم-پروژه دوم)

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

دسته بندی محصولات(قسمت چهارم-پروژه دوم)

به نام خدا با آموزش دسته بندی محصولات(قسمت چهارم-پروژه دوم) در خدمت شما عزیزان هستیم.

بنر در وب سایت:

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

دسته بندی و بخش بندی محصولات:

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

شروع کدنویسی:

ساخت بنر:

برای اینکه بتوانیم این قسمت را ایجاد کنیم ابتدا نیاز داریم به یک تگ که تمامی تگ های خودمان را داخل آن قرار دهیم و این عمل را می توانیم با تگ های اصلی مانند <Main><Div><Section> انجام دهیم و در این قسمت مناسب ترین تگ <Main> است که قرار داده شده است و عناصر خودمان را درون آن قرار می دهیم.

<!-- banner -->
<main class="banner">
  <h1>تخفیف بهاره</h1>
  <p>با استفاده از کد تخفیف ما می توانید کالا خود را ارزان تر خریداری نمایید.</p>
</main>
<!-- end banner -->

 

تگ های خودمان را در این قسمت ایجاد کرده ایم حال زمان آن است که دستورات CSS را نیز اضافه کنیم.

دستورات CSS قسمت اول:

/*-banner-*/
    .banner
    {
        height:150px;
        background-color:#2b2a28;
        color:#fff;
        text-align:center;
    }
    .banner h1{color:#d59a62;padding-top:20px;}
    .banner p
    {
        width:80%;
        height:auto;
        margin:0 auto;
    }
/*-end banner-*/

 

خصوصیات دستور Height:

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

خصوصیات دستور Background-color:

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

اولین قسمت در ایجاد رنگ پس زمینه:

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

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

حروف و اعدادی که کدرنگ را تشکیل می دهند از یک تا نه و از حرف a انگلیسی تا f هستند هرچه به سمت f نزدیک تر شوند روشن تر هستند برای مثال #fff رنگ سفید را برای ما نشان می دهد این نکته را باید بدانیم که کد رنگ را با علامت # شناسایی می شود و متشکل از شش عدد و حروف است که برای هر رنگ دو عدد و یا حروف قرار دارد که می توانیم آنها را ایجاد کنیم(در ادامه توضیح بیشتر در خصوص تفکیک کردن رنگ ها خواهیم داد).

دسته بندی محصولات:

<!-- season_sale -->
<section class="middle_page season_sale">
  <div class="header_of_season_sale">
    <div class="middle_page txt_box_of_seasons">
      <h1>با استفاده از کد تخفیف </h1>
      <p>با استفاده از کد تخفیف ما می توانید کالا خود را ارزان تر خریداری نمایید.با استفاده از کد تخفیف ما می توانید کالا خود را ارزان تر خریداری نمایید.</p>
    </div>
    <div>
      <button class="tablink" onclick="openCity('season1', this, '#d59a62', '#555')" id="defaultOpen">بهار </button>
      <button class="tablink" onclick="openCity('season2', this, '#d59a62', '#555')">تابستان</button>
      <button class="tablink" onclick="openCity('season3', this, '#d59a62', '#555')">پاییز </button>
      <button class="tablink" onclick="openCity('season4', this, '#d59a62', '#555')">زمستان</button>    
    </div>
  </div>
  <main class="body_of_season_sale">
<div id="season1" class="tabcontent">
  <main class="box_of_season_post">
    <div>
        <a href="" class="image_in_post"><img src="images/img4.png"></a>
        <div class="txt_silider_popular">
          <h1><a href="">محصول نمونه </a></h1>
          <p><a href="">قیمت : 25.000 تومان</a></p>
        </div>
    </div>
    <div>
        <a href="" class="image_in_post"><img src="images/img6.png"></a>
        <div class="txt_silider_popular">
          <h1><a href="">محصول نمونه </a></h1>
          <p><a href="">قیمت : 25.000 تومان</a></p>
        </div>
    </div>
    <div>
        <a href="" class="image_in_post"><img src="images/img1.png"></a>
        <div class="txt_silider_popular">
          <h1><a href="">محصول نمونه </a></h1>
          <p><a href="">قیمت : 25.000 تومان</a></p>
        </div>
    </div>
    <div>
        <a href="" class="image_in_post"><img src="images/img2.png"></a>
        <div class="txt_silider_popular">
          <h1><a href="">محصول نمونه </a></h1>
          <p><a href="">قیمت : 25.000 تومان</a></p>
        </div>
    </div>
    <div>
        <a href="" class="image_in_post"><img src="images/img7.png"></a>
        <div class="txt_silider_popular">
          <h1><a href="">محصول نمونه </a></h1>
          <p><a href="">قیمت : 25.000 تومان</a></p>
        </div>
    </div>
    <div>
        <a href="" class="image_in_post"><img src="images/img9.png"></a>
        <div class="txt_silider_popular">
          <h1><a href="">محصول نمونه </a></h1>
          <p><a href="">قیمت : 25.000 تومان</a></p>
        </div>
    </div>
    <div>
        <a href="" class="image_in_post"><img src="images/img10.png"></a>
        <div class="txt_silider_popular">
          <h1><a href="">محصول نمونه </a></h1>
          <p><a href="">قیمت : 25.000 تومان</a></p>
        </div>
    </div>
    <div>
        <a href="" class="image_in_post"><img src="images/img12.png"></a>
        <div class="txt_silider_popular">
          <h1><a href="">محصول نمونه </a></h1>
          <p><a href="">قیمت : 25.000 تومان</a></p>
        </div>
    </div>
  </main>
  <button class="btn_show_more">مشاهده محصولات مشابه</button>
</div>
</main>
</section>

 

حالا در خصوص مهم ترین قسمت این بخش یعنی ساخت محصولات و  دسته بندی آنها صحبت خواهیم کرد. اولین نکته ای که وجود دارد این قسمت که این قسمت را با استفاده از دستورات js نوشته شده است و برای همین در این قسمت فقط توضیحات HTML&CSS داده می شود زیرا اکثر کسانی که از این دستورات استفاده می کنند مبتدی هستند و تازه شروع به یادگیری کرده اند و برای اینکه کسانی که مطالب ابتدایی را می دانند نیز بتوانند استفاده کنند دستورات js را نیز در فایل قرار خواهیم داد.

/*-season_sale-*/
    .season_sale
    {
        height:auto;
    }
    .header_of_season_sale
    {
        height:200px;
        display:grid;
        grid-template-columns:60% 40%;
        grid-template-rows:100%;
    }
    .txt_box_of_seasons h1
    {
        padding-top:40px;
        color:#d59a62;
    }
    .txt_box_of_seasons p
    {
        color:#555;
        line-height:35px;
    }
    .body_of_season_sale
    {
        height:auto;
    }
/*--*/
.tablink {

    outline:none;
    padding:10px 20px;
    margin-top:70px;
    border:1px solid #d59a62;
    color:#d59a62;
    font-size:16px;
    background-color:#fff;
}
.tabcontent
{
  display: none;
  padding-bottom:40px;
  height:auto;
  position:relative;
}
.box_of_season_post
{
  height:900px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:420px 420px;
  grid-gap:15px 15px;  
}
.box_of_season_post > div
{
    background-color:#d59a62;
    display:grid;
    position:relative;
    grid-template-columns:100%;
    grid-template-rows:350px 70px;
}
.btn_show_more
{
    padding:10px 20px;
    border:1px solid #d59a62;
    color:#d59a62;
    position:absolute;
    background-color:#fff;
    margin:0 auto;
    transition:.5s ease-in-out;
    bottom:0;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn_show_more:hover
{
    background-color:#d59a62;
    color:#fff;
}
/*--*/
/*-end season_sale-*/

 

خصوصیات دستور display:

اولین قسمت و مهم ترین قسمت در خصوص این بخش تقسیم بندی است که با دستور display انجام شده است خصوصیت grid این امکان را به ما می دهد که بتوانیم قسمت های مورد نظر را بخش بندی کنیم و به اصطلاح شبکه بندی کنیم کلمه grid در زبان انگیسی به توری و یا شبکه های تور گفته می شود. بعد از انتخاب display زمان آن است که بخش های خودمان را مشخص کنیم که چند ردیف و ستون داشته باشد. که این عمل را با دستورات cloumns  و rows انجام می دهیم.

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

 

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

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

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

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

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

 

 



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

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