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

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

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;
}

  

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

آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:03

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #3 wordpress blog 1397-07-10 07:28
You don't chuck the ball subscription out, but search for toss the pages you've already by way of.
Customers like these and search do besides. Your first submitter gets credit because.
نقل قول کردن
0 #2 سعید صبح خیز 1395-04-07 10:05
به نقل از sam:
سلام
حالا بعد از ساختن Styles.css چطور میشه با index.html مچ کرد تا عین نمونه کار شما بالا بیاد؟؟؟؟؟

سلام
باید Styles.css را بین تگ head لینک کنید . در تصویر شماره 1 مشخص هست
نقل قول کردن
0 #1 sam 1395-04-06 17:02
سلام
حالا بعد از ساختن Styles.css چطور میشه با index.html مچ کرد تا عین نمونه کار شما بالا بیاد؟؟؟؟؟
نقل قول کردن

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

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا