آموزش ساخت Header(قسمت اول-پروژه سوم)

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

آموزش ساخت Header(قسمت اول-پروژه سوم)

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

وب سایت فروشگاهی

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

بالای صفحه وب سایت(Header)

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

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

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

شروع کدنویسی

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

قدم اول: ایجاد چارچوب اصلی قالب

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

<header>
    <section id="content_to_me">
    </section>
    <section class="middle_page" id="middle_header">
    </section>
    <nav>
    </nav>
</header>
header
{
    height:250px;
    display:grid;
    grid-template-columns:100%;
    grid-template-rows:50px 150px 50px;
    background-color:#000;
    color:#fff;
}
header a{color:inherit;}

قدم دوم: ایجاد ارتباط باما

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

<header>
    <section id="content_to_me">
        <div class="middle_page" id="top_header_txt">
        <p> شماره تماس :  </p>
        <p>09388996847</p>
        <p style="padding:0 10px;"> | </p>
        <p>  ایمیل :  </p>
        <p style="direction:ltr;"> abbashosseini1380@gmail.com </p>
        </div>
    </section>
    <section class="middle_page" id="middle_header">
    </section>
    <nav>
    </nav>
</header>
#content_to_me
{
    background-color:#f5535e;
}
#top_header_txt > p
{
    float:right;
    line-height:50px;
    font-size:12px;
    display:inline;
}

قدم سوم: ایجاد لوگو و جستجو

همینطور که مشاهد می کنید این بخش نیز به چند قسمت تقسیم می شود بخش های از جمله لوگو ، جستجو ، سبدخرید می باشد. این بخش ها را با استفاده ا ز دستور Display می توانیم در وب سایت ایجاد کینم دستور Display یکی از پرکاربردترین دستورات CSS به شمار می رود که مقادیر مختلفی دریافت می کند.

<header>
    <section id="content_to_me">
        <div class="middle_page" id="top_header_txt">
        <p> شماره تماس :  </p>
        <p>09388996847</p>
        <p style="padding:0 10px;"> | </p>
        <p>  ایمیل :  </p>
        <p style="direction:ltr;"> abbashosseini1380@gmail.com </p>
        </div>
    </section>
    <section class="middle_page" id="middle_header">
        <div>
            <button id="shop_cart"><a href="">سبد خرید</a></button>
        </div>
        <div>
            <form id="search_form">
                <button></button>
                <input type="text" name="">
            </form>
        </div>
        <div id="logo_box">
            <a href=""><img src="images/logo.png"></a>
        </div>
    </section>
    <nav>
    </nav>
</header>
#middle_header
{
    display:grid;
    grid-template-columns:20% 60% 20%;
    grid-template-rows:150px;
}
#shop_cart
{
    padding:2px 35px;
    height:40px;
    border:none;
    outline:none;
    border-radius:2px;
    margin-top:55px;
    background-image:url(images/shop.svg);
    background-repeat:no-repeat;
    background-size:30px;
    background-position:90% 50%;
    line-height:30px;
    color:#fff;
    background-color:#717171;
}
#search_form
{
    margin-top:55px;
}
#search_form > button
{
    float:right;
    height:40px;
    width:48px;
    border:none;
    outline:none;
    background-color:#f5535e;
    background-image:url(images/search.svg);
    background-repeat:no-repeat;
    background-size:40px;
    background-position:center;
    border-radius:0 2px 2px 0;
}
#search_form > input
{
    height:38px;
    border:none;
    outline:none;
    width:70%;
    border-radius:2px 0 0 2px;
}
#logo_box{margin-top:25px;}
#logo_box > a > img{width:100%;height:80%;}

قدم چهارم: ایجاد منوی اصلی یا منوی سربرگ وب سایت

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

<header>
    <section id="content_to_me">
        <div class="middle_page" id="top_header_txt">
        <p> شماره تماس :  </p>
        <p>09388996847</p>
        <p style="padding:0 10px;"> | </p>
        <p>  ایمیل :  </p>
        <p style="direction:ltr;"> abbashosseini1380@gmail.com </p>
        </div>
    </section>
    <section class="middle_page" id="middle_header">
        <div>
            <button id="shop_cart"><a href="">سبد خرید</a></button>
        </div>
        <div>
            <form id="search_form">
                <button></button>
                <input type="text" name="">
            </form>
        </div>
        <div id="logo_box">
            <a href=""><img src="images/logo.png"></a>
        </div>
    </section>
    <nav>
        <ul id="header_menu" class="middle_page">
            <li><a href="">صفحه اصلی </a></li>
            <li><a href="">محصولات</a></li>
            <li><a href="">تخفیفات</a></li>
            <li><a href="">تماس باما </a></li>
            <li><a href="">درباره ما </a></li>
            <li><a href="">عضویت</a></li>
        </ul>
    </nav>
</header>
#header_menu > li
{
    display:inline;
    float:right;
    padding-right:50px;
    background-image:url(images/down.svg);
    background-repeat:no-repeat;
    background-size:10px;
    background-position:70% 50%;
    line-height:50px;
}

اصلاح دستورات

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

نکته مهم

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

تگ های HTML پرکاربرد

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

خصوصیات تگ Nav

یکی از پرکاربرد ترین تگ های HTML تگ Nav می باشد این تگ زمانی به کار می رود که ما بخواهیم یک نوار در قسمتی از وب سایت خودمان ایجاد کنیم برای مثال می توان این نوار را در قسمت Header قرار دهیم و یا آن را در میانه تگ Body قرار دهیم در طراحی وب یکی از پرکاربرد ترین تگ ها به شما می رود.

خصوصیات تگ UL

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

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



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

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