جلسه اول آموزش طراحی وب سایت فروشگاهی از پروژه چهارم

طراحی سایت اختصاصی | سید عباس حسینی 14 بهمن 1399 0

جلسه اول آموزش طراحی وب سایت فروشگاهی از پروژه چهارم

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

وب‌ سایت فروشگاهی چیست:

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

نقش طراحان وب سایت در رشد کسب و کار اینترنتی:

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

شروع طراحی وب سایت:

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

بررسی طرح اصلی وب:

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

قدم اول: ساخت نوار بالایی وب سایت

برای این کار ابتدا باید چارچوب بالایی را نشانه گذاری کنیم و برای ایجاد آن ابتدا نیاز به تگ <header> خواهیم داشت تگ فوق مانند بیشتر تگ های HTML دارای شروع و پایان می باشد. حالا زمان ایجاد نوار بالایی می باشد یک تگ <nav> ایجاد می کنیم و محتوای خودمان را درون آن مانند نمونه زیر قرار می دهیم.

    <nav class="top_header">
        <div class="middle_page middle_of_top_header">
            <div class="contact_us_icons">
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
            <div class="contact_us_number">
                <p id="phone_header">09388996847</p>
                <p id="email_header">abbashosseini1380@gmail.com</p>
            </div>
        </div>
    </nav>

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

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

حالا با اضافه کردن دستورات CSS می توانیم حالت اصلی تصویر خودمان را ایجاد کنیم.

.top_header
{
    height:50px;
    background-color:#212934;
}
.middle_of_top_header
{
    display:grid;
    height:50px;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:100%;
}
.contact_us_icons
{
    width:250px;
    height:15px;
    margin-top:15px;
    display:grid;
    grid-gap:15px 15px;
    grid-template-columns:repeat(4,15px);
    grid-template-rows:15px;
}
.contact_us_icons a
{
    background-repeat:no-repeat;
    background-size:15px 15px;
    background-position:center;
}
.contact_us_icons a:nth-child(1){background-image:url(images/ins.png);}
.contact_us_icons a:nth-child(2){background-image:url(images/linkedin.png);}
.contact_us_icons a:nth-child(3){background-image:url(images/tel.png);}
.contact_us_icons a:nth-child(4){background-image:url(images/whats.png);}
.contact_us_number
{
    direction:ltr;
    color:#fff;
    display:flex;
}
.contact_us_number > p
{
    line-height:50px;
    padding-right:40px;
    background-repeat:no-repeat;
    background-size:20px 20px;
    background-position:95% 50%;
}
#email_header{background-image:url(images/post.png);}
#phone_header{background-image:url(images/phone.png);background-position:90% 50% !important;}

علت اینکه محتوای ما را در حالت اول نشان نمی داد درحالی که به درستی ثبت شده بودند این بود که محتوای ما هنوز style و سبک ساختاری دریافت نکرده بود و همینطور ما تصاویر آیکون های شبکه های اجتماعی را ما با دستورات CSS طراحی کرده ایم. برای ایجاد این تصاویر از دستور Background-image استفاده شده است.

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

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

function myFunction() {
   document.getElementById("myDIV").style.backgroundImage = "url(img_tree.gif)";
}

ایجاد کردن قسمت دوم سربرگ:

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

برای ایجاد این قسمت ابتدا از یک تگ <div> برای چارچوب بندی اصلی خودمان استفاده می کنیم و به آن کلاس مورد نیاز و همینطور کلاسی را که نام آن (middle_page) است را قرار می دهیم این کلاس این امکان را می دهد که محتوای ما از کناره وب سایت فاصله بگیرد و نیاز به نوشتن دوباره دستورات تکراری نباشد.

تقسیم بندی کردن قسمت دوم سربرگ:

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

<div class="bottom_header middle_page">
    <div class="need_c_icons">
        <a href="" id="user_icon"></a>
        <a href="" id="cart_icon"></a>
        <a href="" id="search_icon"></a>
    </div>
        <ul class="header_menu">
            <li><a href="">خانه</a></li>
            <li><a href="">درباره ما </a></li>
            <li><a href="">فروشگاه</a></li>
            <li><a href="">ارتباط با ما</a></li>
        </ul>
    <div>
        <h1 id="logo">AllowSHop</h1>
    </div>
</div>

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

.bottom_header
{
    height:100px;
    display:grid;
    grid-template-columns:20% 60% 20%;
}
.need_c_icons
{
    display:grid;
    grid-template-columns:repeat(3,30px);
    grid-template-rows:30px;
    grid-gap:15px 15px;
}
.need_c_icons > a
{
    background-repeat:no-repeat;
    background-size:30px 30px;
    background-position:center;
    padding-top:90px;
}
#user_icon{background-image:url(images/person.png);}
#cart_icon{background-image:url(images/cart.png);}
#search_icon{background-image:url(images/search.png);}
.header_menu
{
    color:#555;
}
.header_menu > li
{
    transition:.5s ease-in-out;
    display:inline;
    direction:rtl;
    line-height:100px;
    padding-left:20px;
    font-size:18px;
}
.header_menu > li:hover{color:#59ab6e;}
.header_menu > li a{color:inherit;}
#logo
{
    font-size:42px;
    text-align:center;
    line-height:100px;
    color:#59ab6e;
}

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

 



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

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