>

    آموزش طراحی Menu سایت با HTML5 و CSS مطلب ویژه

    توسط 08 فروردين, 1394 6108 دیدگاه (22)

    در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

    2 آموزش طراحی Menu سایت با HTML5 و CSS

    با یکی دیگر از آموزشهای سایت آسارایان با عنوان "آموزش طراحی Menu سایت با HTML5 و CSS" در خدمت شما هستم .تمام وب سایتهای اینترنتی دارای Menu می باشند و منو اصلی ترین بخش یک قالب وب سایت به شمار می آید که اگر بدرستی تنظیمات و رنگ آن انتخاب نشود ، دسترسی به قسمت های مختلف سایت تقریبا امکان پذیر نمی باشد .  در این مقاله آموزشی با استفاده از Html5 و Css یک منوی افقی برای شما طراحی می کنم و آموزش آن را همراه با کد و تصاویری که در ادامه آماده کرده ام قرار میدهم. برای درک بهتر می توانید ابتدا دمو را مشاهده کرده و فایل اصلی را در پایان آموزش دانلود کنید . سعی کنید ابتدا یک بار آموزش را دقیق بخوانید سپس دمو را مشاهده و اگر به نتیجه نرسیدید از فایل اصلی استفاده کنید . سطح این آموزش متوسط ، پیشرفته می باشد و تگها به صورت کامل توضیح داده نمی شود . کاربرانی که می خواهند کاربرد تگ های CSS را بدانند باید به بخش مقدماتی سایت مراجعه کنند .

     دموی آموزش

    1. نرم افزار دریم ویور یا نوت پد را باز کنید و تگهای تشکیل دهنده صفحه  HTML را همانند تصویر زیر داخل آن کپی کنید .  اگر کار با نرم افزار نوت پد را دوست ندارید از ویرایشگر NotePad++ استفاده کنید .
    حتما با تگهای ابتدایی HTML  آشنایی دارید . تگ هایی که وقتی در کنار هم قرار می گیرند یک صفحه ساده وب سایت را میسازند . همانطورکه میدانید برای تغییرات شکل ظاهری قالب که مربوط به رنگ پس زمینه و فونتها ، نوع فونت و نحه قرار گیری آن در چیدمان صفحه از دستورات Css استفاده می شود .


    برای تغییرات ظاهری منو هم باید یک فایل Styles.css ایجاد کرده و تگ آن را در بین تگ head همانند کدهای زیر قرار بدهیم . برای ایجاد فایل Styles.css کافیست ویرایشگر دریم ویور یا نوت پد را باز کرده و بدون وارد کردن هیچ کدی فایل را با نام Styles.css ذخیره کنید . 
    عنوان وب سایت یا قالب که در مرورگر نمایش داده می شود بین تگ title قرار میگیرد .

     

    <!doctype html>
    <html >
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <link rel='stylesheet' href='/styles.css' type='text/css' />
    <title>آموزش طراحی Menu سایت با HTML5 و CSS</title>
    </head>
    <body>
    </body>
    </html>

     

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

     

    <header>
    <h1>CSS3 Animated Navigation Menu- AsaRayan.Com</h1>
    <h2><a href="http://learning.asarayan.com">&laquo; Read and download on Tutorialzine</a></h2>
    </header>

     

    کد کلی به این شکل می باشد .

     

    <!doctype html>
    <html >
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <link rel='stylesheet' href='/styles.css' type='text/css' />
    <title>آموزش طراحی Menu سایت با HTML5 و CSS</title>
    </head>
    <body>
    <header>
                  <h1>CSS3 Animated Navigation Menu- AsaRayan.Com</h1>
                  <h2><a href="http://learning.asarayan.com">&laquo; Read and download on Tutorialzine</a></h2>
    </header>
    </body>
    </html>

      

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

     

            <nav>
                <ul class="fancyNav">
                    <li id="home"><a href="http://asarayan.com" class="homeIcon">Home</a></li>
                    <li id="news"><a href="http://asarayan.com">News</a></li>
                    <li id="about"><a href="http://asarayan.com">About us</a></li>
                    <li id="services"><a href="http://asarayan.com">Services</a></li>
                    <li id="contact"><a href="http://asarayan.com">Contact us</a></li>
                </ul>
            </nav>

     

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

     

    <footer>Copyright 2013 AsaRayan.Com All Right Reserved <b>Read and download on Tutorialzine <a href="http://learning.asarayan.com">AsaRayan.com</a></b></footer>

      

    کد کلی صفحه Html را برای شما قرار میدهم تا بعد از آن به سراغ دستورات Css برویم  . 

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />        
            <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>        
            <!-- Our CSS stylesheet file -->
            <link rel="stylesheet" href="/assets/css/styles.css" />       
        </head>    
        <body>
            <header>
                <h1>CSS3 Animated Navigation Menu- AsaRayan.Com</h1>
                <h2><a href="http://learning.asarayan.com">&laquo; Read and download on Tutorialzine</a></h2>
            </header>        
            <nav>
                <ul class="fancyNav">
                    <li id="home"><a href="http://asarayan.com" class="homeIcon">Home</a></li>
                    <li id="news"><a href="http://asarayan.com">News</a></li>
                    <li id="about"><a href="http://asarayan.com">About us</a></li>
                    <li id="services"><a href="http://asarayan.com">Services</a></li>
                    <li id="contact"><a href="http://asarayan.com">Contact us</a></li>
                </ul>
            </nav>        
            <footer>Copyright 2013 AsaRayan.Com All Right Reserved <b>Read and download on Tutorialzine <a href="http://learning.asarayan.com">AsaRayan.com</a></b></footer>            
        </body>
    </html>

     

    در این مرحله باید کدها را با عنوان index.html ذخیره کنید . صفحه شما باید همانند تصویر زیر در مرورگر نمایش داده شود .

    1 آموزش طراحی Menu سایت با HTML5 و CSS

     

    حالا فایل Styles.css را با یک ویرایشگر باز کنید و کدهای زیر را در آن قرار بدهید . برای تغییر رنگ پس زمینه من یک پوشه با عنوان img ایجاد کرده ام و تصاویری که مربوط به پس زمینه می باشد را در آن کپی کرده ام سپس از طریق css به این پوشه لینک میدهم . دقت داشته باشید که شما باید یک پوشه با عنوان Css و یک پوشه با عنوان img ابتدا ایجاد کنید تا در مسیر دهی که در فایل css من قرار میدهم با مشکل مواجه نشوید . سعی کنید کدهای css را مرحله به مرحله تایپ کنید تا دقیق متوجه شوید که هر کد چه کاری را بر روی تگ های اصلی اعمال میکنه .

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

     

    *{
        margin:0;
        padding:0;
    }
    html{
        background:url('../img/bg_tile.jpg') #333d43;
        
    }
    body{
        background:url('../img/bg_head.jpg') repeat-x top center, url('../img/bg_vert.jpg') repeat-x;
        min-height:500px;
        font:14px/1.3 tahoma;
        color:#888;
        padding:10px;
    }
    /*----------------------------
        CSS3 Animated Navigation
    -----------------------------*/
    .fancyNav{
        /* Affects the UL element */
        overflow: hidden;
        display: inline-block;
    }
    .fancyNav li{
        /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
        background-color: #f0f0f0;
        background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
        background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
        background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
        background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
        background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
        border-right: 1px solid rgba(9, 9, 9, 0.125);
        /* Adding a 1px inset highlight for a more polished efect: */
        box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
        -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
        -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
        position:relative;
        float: left;
        list-style: none;
    }
    .fancyNav li:after{
        /* This creates a pseudo element inslide each LI */    
        content:'.';
        text-indent:-9999px;
        overflow:hidden;
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:1;
        opacity:0;
        /* Gradients! */
        background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
        background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
        background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
        background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
        background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
        /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
        box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        /* This will create a smooth transition for the opacity property */
        -moz-transition:0.25s all;
        -webkit-transition:0.25s all;
        -o-transition:0.25s all;
        transition:0.25s all;
    }
    /* Treating the first LI and li:after elements separately */
    .fancyNav li:first-child{
        border-radius: 4px 0 0 4px;
    }
    .fancyNav li:first-child:after,
    .fancyNav li.selected:first-child:after{
        box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
        -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
        -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
        border-radius:4px 0 0 4px;
    }
    .fancyNav li:last-child{
        border-radius: 0 4px 4px 0;
    }
    /* Treating the last LI and li:after elements separately */
    .fancyNav li:last-child:after,
    .fancyNav li.selected:last-child:after{
        box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
        -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
        -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
        border-radius:0 4px 4px 0;
    }
    .fancyNav li:hover:after,
    .fancyNav li.selected:after,
    .fancyNav li:target:after{
        /* This property triggers the CSS3 transition */
        opacity:1;
    }
    .fancyNav:hover li.selected:after,
    .fancyNav:hover li:target:after{
        /* Hides the targeted li when we are hovering on the UL */
        opacity:0;
    }
    .fancyNav li.selected:hover:after,
    .fancyNav li:target:hover:after{
        opacity:1 !important;
    }
    /* Styling the anchor elements */
    .fancyNav li a{
        color: #5d5d5d;
        display: inline-block;
        font: 18px/1 tahoma;
        padding: 12px 35px 14px;
        position: relative;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
        z-index:2;
        text-decoration:none !important;
        white-space:nowrap;
    }
    .fancyNav a.homeIcon{
        background:url('../img/home.png') no-repeat center center;
        display: block;
        overflow: hidden;
        padding-left: 12px;
        padding-right: 12px;
        text-indent: -9999px;
        width: 16px;
    }
    /*-------------------------
        Demo Page Styles
    --------------------------*/
    h1,h2{
        color: #fff;
        line-height: 1;
        background-color: #222;
        font-family: 'Segoe UI Light','Segoe UI',Arial,sans-serif;
        font-weight: normal;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        margin-left: -446px;
    }
    h1{
        font-size: 36px;
        padding: 5px 15px 10px;
        top: 0;
    }
    h2{
        font-size: 14px;
        padding: 4px 13px 9px 11px;
        top: 51px;
    }
    header{
        display:block;
        margin-top:50px;
        position:relative;
    }
    nav{
        display: block;
        margin: 300px auto 0;
        text-align: center;
        width: 600px;
    }
    footer{
        color: #BBBBBB;
        font-size: 15px;
        line-height: 1.6;
        padding: 60px 20px 0;
        text-align: center;
        display:block;
    }
    footer b{
        color: #888888;
        display: block;
        font-size: 10px;
        font-weight: normal;
    }
    a, a:visited {
        text-decoration:none;
        outline:none;
        color:#54a6de;
    }
    a:hover{
        text-decoration:underline;
    }

      

    دانلود فایل تمریندموی آموزش

    این مورد را ارزیابی کنید
    (1 رای)
    آخرین ویرایش در چهارشنبه, 18 شهریور 1394 10:03

    آخرین مطالب آموزشی

    «
    • 1
    • 2
    • 3
    »
    © 2015 Your Company. All Rights Reserved. Designed By JoomShaper

    Please publish modules in offcanvas position.

    تک وب دیزاین-قالب فارسی جوملا