آموزش ساخت پایین برگه وب سایت(قسمت آخر-پروژه دوم)

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

آموزش ساخت پایین برگه وب سایت(قسمت آخر-پروژه دوم)

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

درباره ما:

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

کدنویسی درباره ما:

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

تگ های درباره ما:

<!-- about_me -->
<section class="about_me_box">
    <div class="middle_page txt_about_me">
        <div class="back_res">
        <h1>مشاهده محصولات مشابه</h1>
        <p>
            برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
        </p>
        <button class="btn_show_more">مشاهده محصولات مشابه</button>
        </div>
    </div>
    <div class="img_box_in_about_me_box"><img src="images/img9.png" class="img_about_me"></div>
</section>
<!-- end about_me -->

دستورات درباره ما:

/*-about_me-*/
    .about_me_box
    {
        height:450px;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:100%;
    }
    .img_about_me
    {
        width:100%;
        height:100%;
        max-width:100%;
        max-height:100%;
    }
    .txt_about_me{position:relative;}
    .txt_about_me h1{color:#d59a62;padding:40px 0 20px 0;}
    .txt_about_me p{line-height:30px;color:#555;font-size:15px;}
/*-end about_me-*/

تصویر درباره ما:

پایین صفحه:

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

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

کدنویسی قسمت پایین صفحه:

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

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

دستورات پایین صفحه

/*-footer-*/
    footer
    {
        height:400px;
        background-color:#2b2a28;
    }
    footer a {color:#fff;}
    #footer
    {
        height:100%;
        display:grid;
        color:#fff;
        grid-template-columns:40% 20% 20% 20%;
        grid-template-rows:100%;
    }
    .icons
    {
        margin-top:140px;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        grid-template-rows:40px;
        grid-gap:20px 20px;
        width:200px;
    }
    .icons > li
    {
        display:inline;
        width:40px;
        height:40px;
    }
    .icons > li > img
    {
        width:40px;
        height:40px;
    }
    #title_in_footer
    {
        padding-bottom:20px;
    }
    #footer_menu > li
    {
        list-style-type:none;
        line-height:40px;
    }
    .end
    {
        background-color:#555;
        color:#fff;
        line-height:50px;
        height:50px;
        text-align:center;
    }
/*-end footer*/

تگ های پایین صفحه

<!-- footer -->
<footer>
    <main class="middle_page" id="footer">
        <div>
            <section class="middle_page">
                <br>
                <h1 id="title_in_footer">ارتباط با ما </h1>
                <p id="txt_in_footer">با استفاده  از  شبکه های اجتماعی میتوانید با ما همراه و در ارتباط باشید </p>
                <ul class="icons">    
                    <li id="icon1"><img src="images/ins.png"></li>
                    <li id="icon2"><img src="images/linkedin.png"></li>
                    <li id="icon3"><img src="images/whats.png"></li>
                    <li id="icon4"><img src="images/tel.png"></li>
                </ul>
            </section>
        </div>
        <div>
            <section class="middle_page">
                <br>
                <h1 id="title_in_footer">دسترسی آسان </h1>
                <ul id="footer_menu">
                    <li><a href="">صفحه اصلی </a></li>
                    <li><a href="">تماس با ما </a></li>
                    <li><a href="">درباره ما </a></li>
                    <li><a href="">صفحه محصولات</a></li>
                </ul>
            </section>
        </div>
        <div>
            <section class="middle_page">
            <br>
            <h1 id="title_in_footer">حساب کاربری شما </h1>
            <ul id="footer_menu">
                <li><a href="">سبد خرید</a></li>
                <li><a href="">پرداخت </a></li>
                <li><a href="">حساب کاربری </a></li>
                <li><a href="">مورد علاقه </a></li>
            </ul>
            </section>
        </div>
        <div>
            <section class="middle_page">
            <br>
            <h1 id="title_in_footer">حساب کاربری شما </h1>
            <ul id="footer_menu">
                <li><a href="">سبد خرید</a></li>
                <li><a href="">پرداخت </a></li>
                <li><a href="">حساب کاربری </a></li>
                <li><a href="">مورد علاقه </a></li>
            </ul>
            </section>
        </div>
    </main>    
<div class="end">
    طراحی و کدنویسی توسط سید عباس حسینی 
</div>
</footer>
<!-- end footer -->

 

دستورات مهم و پرکاربرد:

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

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

دستور فوق همان طور که می دانیم به معنی ارتفاع است و برای مشخص کرد ارتفاع هر عنصر از آن استفاده می کنیم. در این قسمت که مشاهده می کنید دستور height را تعریف کرده ایم و مشخص کردیم که  ارتفاع چه میزان باشد و این نکته وجود دارد که اگر میزان این ارتفاع تغییر کند آیا طرح ما دچار اختلال می شود و یا خیر ؟ در جواب این سوال باید گفت بله زیرا ارتفاع تعریف شده یک ارتفاع ثابت می باشد و بیشتر از آن را قبول نخواهد کرد برای همین باید مقدار و یا ویژگی height را auto قرار دهیم و همینطور برای اینکه محتوا اگر کمتر از حد معمول بود کار زیبایی خودش را از دست ندهد min-height نیز قرار دهیم.

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

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

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

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

نکته:

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

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

 

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

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

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

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

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

 

 

 

 

 

 



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

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