آموزش ساخت image slide(قسمت دوم- پروژه سوم)

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

آموزش ساخت image slide(قسمت دوم- پروژه سوم)

به نام خدا سید عباس حسینی هستم با آموزش ساخت image slide و محصولات ویژه در خدمت شما عزیزان هستم.

وردپرس چیست؟

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

شروع آموزش

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

قدم اول: ساخت عکس نمایشی

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

<!-- big image -->
<div class="big_image"></div>
<!-- end big image -->
/*big_image*/
    .big_image
    {
        height:550px;
        background-image:url(images/image.PNG);
        background-repeat:no-repeat;
        background-size:100% 100%;
        background-position:center;
    }
/*end big_image*/

 

 

قدم دوم: ساخت محصولات ویژه

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

<!-- images_for_man -->
<main class="middle_page" id="images_for_man">
    <!-- <div> --><h1 id="title_in_body">محصولات ویژه </h1><!-- </div> -->
<br>
</main>
<!-- end images_for_man -->
#images_for_man
    {
        position:relative;
        height:auto;
    }
    #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;		
    }

 

قدم سوم: قرار دادن تصاویر ویژه محصولات

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

با استفاده از دستور Display که به آن مقدار GRID را داده ایم می توانیم تکه های مساوی ایجاد کنیم ولی برای این قسمت نیاز به یک سری دستورات تفاوت دهی در مقدار عنصر های داخل این مجموعه داریم که دستورات آن را در قسمت پایین برای شما عزیزان قرار داده ام.

<!-- images_for_man -->
<main class="middle_page" id="images_for_man">
    <!-- <div> --><h1 id="title_in_body">محصولات ویژه </h1><!-- </div> -->
<br>
    <main id="box_of_images">
        <div id="image1"><a href=""><img src="images/pic1.png"></a></div>
        <div id="image2"><a href=""><img src="images/pic2.png"></a></div>
        <div id="image3"><a href=""><img src="images/pic3.png"></a></div>
        <div id="image4"><a href=""><img src="images/pic4.png"></a></div>
    </main>
</main>
<!-- end images_for_man -->
#box_of_images
{
    display:grid;
    height:600px;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
}
#box_of_images > div
{
    width:100%;
    height:300px;
}
#box_of_images > div > a > img
{
    opacity:.5;
    width:100%;
    height:100%;
}

 

قدم چهارم: لینک کردن تصاویر و تغییر رنگ پس زمینه

برای ایجاد این قسمت از چند روش می توانیم استفاده نماییم اولین روش این است که به هرکدام یک ID بدهیم و این عمل را انجام دهیم و یا اینکه با استفاده از SELECTOR

CHILD در CSS این قسمت را طراحی کنیم. در این قسمت از روش اول استفاده شده است وبا استفاده از ID برای هر کدام این عمل انجام شده است.

برای شناخت بهتر ID و SELECTOR ها پیشنهاد می کنم این مقاله را مطالعه نمایید.

#image1
    {
        grid-column: 1 / 3; 
        background-color:#000;
    }
    #image2{background-color:#27ae60;}
    #image3{background-color:#c0392b;}
    #image4
    {
        grid-column: 2 / -1;
        background-color:#ffb142;
    }

 

 

تگ ها و دستورات کاربردی:

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

خصوصیات دستور grid-column:

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

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

 

 



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

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