ساخت محصولات (قسمت سوم-پروژه سوم)

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

ساخت محصولات (قسمت سوم-پروژه سوم)

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

بررسی طرح:

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

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

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

<!-- brands -->
<section class="brands">
    <main class="top_brands">
        <div id="brands_1"></div>
        <div id="brands_2"></div>
        <div id="brands_3"></div>
    </main>
    <main class="middle_brands">
        <div id="brands_4"></div>
        <div id="brands_5"></div>
    </main>
    <button id="btn_for_brands">مشاهده کامل </button>
</section>
<!-- end brands -->

 

ایجاد قسمت محصولات:

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

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

<h1 id="title_in_body">محصولات</h1>

 

#title_in_body
{
    text-align:center;
    padding:5px 10px;
    border-bottom:2px solid #f5535e;
	width:20%;
	margin:0 auto;
    margin-bottom:10px;
    font-weight:normal;		
}

 

<!-- products -->
<main class="middle_page" id="products_box">
    <h1 id="title_in_body">محصولات</h1>
    <section class="grid_porducts">
<!--  -->
        <div class="post_product">
            <img src="images/img1.png" class="image_of_post_product">
            <div class="txt_post_product">
                <h1>z234</h1>
                <h2>250000 تومان</h2>
                <p id="stars"></p>
                <a href="">خرید</a>
            </div>
        </div>
<!--  -->
<!--  -->
        <div class="post_product">
            <img src="images/img2.png" class="image_of_post_product">
            <div class="txt_post_product">
                <h1>c264</h1>
                <h2>350000 تومان</h2>
                <p id="stars"></p>
                <a href="">خرید</a>
            </div>
        </div>
<!--  -->
<!--  -->
        <div class="post_product">
            <img src="images/img3.png" class="image_of_post_product">
            <div class="txt_post_product">
                <h1>z235</h1>
                <h2>450000 تومان</h2>
                <p id="stars"></p>
                <a href="">خرید</a>
            </div>
        </div>
<!--  -->
    </section>
    <button id="btn_for_brands">مشاهده کامل </button>
</main>

 

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

ایجاد کردن استایل ها:

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

قدم اول: استایل دادن قسمت نمایش همکاران

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

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

/*brands*/
    .brands
    {
        height:500px;
        position:relative;
        background-color:#ddd;
    }
    .top_brands
    {
        height:200px;
        width:50%;
        margin:0 auto;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows:200px;
        grid-gap:20px 20px;
    }
    .top_brands > div,
    .middle_brands > div
    {
        background-repeat:no-repeat;
        background-position:center;
        background-size:70% 70%;
    }
    .middle_brands
    {
        height:200px;
        width:35%;
        margin:0 auto;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:200px;
        grid-gap:20px 20px;
    }
    #brands_1{background-image:url(images/a1.png);}
    #brands_2{background-image:url(images/a2.png);}
    #brands_3{background-image:url(images/a3.png);}
    #brands_4{background-image:url(images/a4.png);}
    #brands_5{background-image:url(images/a5.png);}
    #btn_for_brands
    {
        color:#fff;
        background-color:#f5535e;
        padding:12px 28px;
        border-radius:30px;
        outline:none;
        border:none;
        position: absolute; 
        font-weight:bold;
        left: 50%;
    	transform: translate(-50%, 0);
    }
/*end brands*/

 

قدم دوم: ایجاد استایل محصولات

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

/*products_box*/
    #products_box
    {
        height:auto;
        position:relative;
    }
    .grid_porducts
    {
        display:grid;
        height:500px;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows:400px;
        grid-gap:30px 30px;
    }
    .post_product
    {
        display:grid;
        grid-template-columns:100%;
        grid-template-rows:60% 40%;
    }
    .post_product > img
    {
        width:100%;
        height:60%;
        -webkit-box-shadow: 0 0 2px 2px rgba(200,200,200,1);
        border-radius:2px;
        -moz-box-shadow: 0 0 2px 2px rgba(200,200,200,1);
        box-shadow: 0 0 2px 2px rgba(200,200,200,1);
    }
    .txt_post_product
    {
        text-align:center;
        line-height:30px;
    }
    .txt_post_product > h1,
    .txt_post_product > h2{font-weight:normal;}
    .txt_post_product > h1{margin-top:5px;}
    .txt_post_product > h2{margin-bottom:4px;color:#f5535e;}
    .txt_post_product > a
    {
        background-color:#f5535e;
        border-radius:30px;
        text-align:center;
        padding:10px 28px;
        color:#fff;
    }
    #stars
    {
        height:30px !important;
        background-image:url(images/stars.svg);
        background-repeat:no-repeat;
        background-size:120px;
        margin-bottom:15px;
        background-position:center;
    }
/*end products_box*/

 

 

تجربه:

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

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



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

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