ساخت صفحه Erorr 404

ساخت صفحه Erorr 404

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

برای مشاهده لینک وارد شود

 مثل همیشه ما کار را با نوشتن کد های HTML آغاز می کنیم.ما در کد HTML هر آنچه را که نیاز خواهیم داشت اعم از استایل ها،کدهای اسکریپت و … را وارد خواهیم کرد.

۴۰۴.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating an Animated 404 Page | 8np Demo</title>

<!-- Internet Explorer HTML5 enabling script: -->

<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="rocket"></div>

<hgroup>
    <h1>Page Not Found</h1>
    <h2>We couldn't find what you were looking for.</h2>
</hgroup>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

 

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

CSS

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

 

body{
    background:url('img/bg.png') no-repeat center center #1d1d1d;
    color:#eee;
    font-family:Corbel,Arial,Helvetica,sans-serif;
    font-size:13px;
}

#rocket{
    width:275px;
    height:375px;
    background:url('img/rocket.png') no-repeat;
    margin:140px auto 50px;
    position:relative;
}

/*	Two steam classes. */

.steam1,
.steam2{
    position:absolute;
    bottom:78px;
    left:50px;
    width:80px;
    height:80px;
    background:url('img/steam.png') no-repeat;
    opacity:0.8;
}

.steam2{

   /*	.steam2 shows the bottom part (dark version)
    *	of the background image.
    */

    background-position:left bottom;
}

hgroup{

    /* Using the HTML4 hgroup element */

    display:block;
    margin:0 auto;
    width:850px;
    font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
    text-align:center;
}

h1{
    color:#76D7FB;
    font-size:60px;
    text-shadow:3px 3px 0 #3D606D;
    white-space:nowrap;
}

h2{
    color:#9FE3FC;
    font-size:18px;
    font-weight:normal;
    padding:25px 0;
}

 

jQuery

​کد های jQuery باعث میشوند تا موشک به حرکت دراید که این کار توسط متد animated که در ادامه خواهید دید میسر میشود.

 

$(window).load(function(){

    // We are listening for the window load event instead of the regular document ready.

    function animSteam(){

        // Create a new span with the steam1, or steam2 class:

        $('',{
            className:'steam'+Math.floor(Math.random()*2 + 1),
            css:{
                // Apply a random offset from 10px to the left to 10px to the right
                marginLeft	: -۱۰ + Math.floor(Math.random()*20)
            }
        }).appendTo('#rocket').animate({
            left:'-=58',
            bottom:'-=100'
        }, ۱۲۰,function(){

            // When the animation completes, remove the span and
            // set the function to be run again in 10 milliseconds

            $(this).remove();
            setTimeout(animSteam,10);
        });
    }

    function moveRocket(){
        $('#rocket').animate({'left':'+=100'},5000).delay(1000)
                    .animate({'left':'-=100'},5000,function(){
                setTimeout(moveRocket,1000);
        });
    }

    // Run the functions when the document and all images have been loaded.

    moveRocket();
    animSteam();
});

تابعی که باعث ایجاد دود در انتها موشک میشود تابع ()animStream است.وقتی که این تابع فراخوانی شود انیمیشن مربوط به ایجاد دود اجرا میشود و وقتی که به پایان رسید توسط تابع setTimeout دوباره اجرا میشود.

پایان

 

 

 

+3
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


− یک = 1

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>