بلاگ تخصصی دات نت نیوک ایران

وبلاگ تخصصی دات نت نیوک فارسی

بلاگ تخصصی دات نت نیوک ایران

وبلاگ تخصصی دات نت نیوک فارسی

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

نویسندگان

آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

سه شنبه, ۱۹ فروردين ۱۳۹۳، ۰۳:۴۶ ب.ظ

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

صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم. اما در طراحی ریسپانسیو ما نیاز به نصب کامپوننت های اضافی خواهیم داشت. بیشتر این متا تگ ها توسط مرورگرهای مدرن پشتیبانی میشوند.

<!DOCTYPE HTML>
<html>
<head>
    <title>آموزش طراحی ریسپانسیو یک سایت کامل</title>
    <meta name="author" content="آپارنت">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
     <link rel="stylesheet" type="text/css" href="style/styles.css"
    <link rel="stylesheet" type="text/css" href="style/responsive.css"
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/js-main.js"></script>
     <!--[if lt IE 9]> 
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
     <![endif]-->

متا تگ viewport تگ خیلی مهمی برای کار کردن با طراحی ریسپانسیو است. ما اندازه را برابر یک کردیم. بنابراین پیکسل ها در صفحه نمایش به خوبی نمایش داده میشوند.
همچنین ما از برای نسخه های IE پایین تر از 9 فایل هایی را فرخوانی کردیم که موجب شناخت مرورگر از عناصر HTML5 و همچین media queries میشود.

برای خواندن مطالب بیشتر در مورد متا تگ viewport به Mozilla Developer مراجعه کنید.
برای خواندن مطالب بیشتر در مورد متا تگ X-UA-Compatible به Stackoverflow و MSDN Microsoft مراجعه کنید.
برای خواندن مطالب بیشتر در مورد پشتیبانی نشدن عناصر HTML5 در IE به آپارنت مراجعه کنید.


بلاک های محتوای اصلی
کل سند اصلی تشکیل شده از یک دایو با تعداد زیادی تگ section در داخل خودش. تگ header شامل عکس من, آدرس ایمیل, و دیگر اطلاعات مهم است. بعد از قراردادن تگ header بقیه سند را نیز مانند زیر وارد میکنیم.

<div id="w">
    <header class="clearfix">
        <div id="info">
            <div id="photo"
                <img src="http://aparnet.ir/wp-content/themes/aptana/about/style/photo.png" alt="محسن شفیعی"/> 
            </div>
            <h1><span>محسن شفیعی</span></h1
            <h3><span>توسعه و طراحی وب</span></h3>
            <h3><span><a href="http://aparnet.ir">آپارنت</a></span></h3>   
            <small
              <span>مشهد</span>
              <span>ایران</span
            </small
            <small><span>mohsen.sh12@hotmail.com    </span></small>
        </div>
    </header><br />
    <section id="myhistory">
        <h2>درباره من</h2>
        <p>
            من محسن شفیعی هستم متولد 73 که علاقه زیاد به دنیای وب منو واداشت که به این عرصه پا بذارم. پس از چند ماه کارکردن در دنیای وب جای خالی یک وب سایت قدرتمند رو در ایران حس کردم. به همین دلیل سایت
            آپارنت رو راه اندازی کردم تا محلی برای معرفی فناوری های روز جهان وب باشه.
        </p>
    </section><br />
    <section id="skills">
        <h2>مهارت ها</h2>
        <section id="skills-right">
            <ul>
                <li>HTML5/CSS3</li>
                <li>Jquery</li>
                <li>Wordpress</li>
                <li>PHP</li>
                <li>MySQL Database</li>
            </ul>
        </section>
    </section><br />
    <section id="articles">
        <h2>آخرین مطالب</h2>
        <a href="http://aparnet.ir/114-%d8%ad%d9%84-%d9%85%d8%b4%da%a9%d9%84-%d9%be%d8%b4%d8%aa%db%8c%d8%a8%d8%a7%d9%86%db%8c-%d9%86%d8%b4%d8%af%d9%86-%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-html5-%d8%af%d8%b1-ie">حل مشکل پشتیبانی نشدن عناصر HTML5 در IE</a><br />
        <a href="http://aparnet.ir/111-%d9%be%db%8c%d8%af%d8%a7%da%a9%d8%b1%d8%af%d9%86-%d9%82%d8%a7%d8%a8%d9%84%db%8c%d8%aa-%d9%87%d8%a7%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7">پیداکردن قابلیت های مرورگرها</a>
    </section>
</div>
خب حالا در فایل استایل کدهای زیر را قرار میدهیم.

*{ margin: 0; padding: 0; direction: rtl; font-family: "Tahoma";} 
html { height: 101%; } 
body { background: #f2f2f2 url('http://aparnet.ir/wp-content/themes/aptana/style/images/bg.png');  padding-bottom: 65px; } 
   
h1 { color: #454545; font-size: 2.0em; margin-bottom: 6px; } 
h2 { color: #484848; font-size: 1.5em; margin-bottom: 10px; text-decoration: underline; } 
h3 { color: #777; font-size: 1.0em; font-weight: normal; margin-bottom: 10px; } 
h4 { color: #656565; font-size: 0.8em;font-weight: bold;margin-bottom: 4px; } 
   
p {color: #565656; font-size: 1.0em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px; } 
small { font-family: "Balthazar", serif; color: #656565; font-size: 0.7em; display: block; margin-bottom: 6px; } 
ul { display: block; list-style: none; } 
ul li { padding-right: 45px; vertical-align: top;margin-bottom: 5px; color: #666; font-size: 1em; line-height: 2.3em; } 
   
img { border: 0; max-width: 100%; } 
   
a { color: #5582d6; text-decoration: none; } 
a:hover { text-decoration: underline; } 
 
    /** @group core layout **/ 
#w { margin: 0px auto; padding: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 1200px; border-radius: 0px 0px 8px 8px; } 
   
header { width: 100%; } 
   
/** @group personal settings **/ 
#info { float: none; margin-bottom: 12px; } 
#photo { float: left; } 
#photo img {  
    -webkit-border-radius: 3px
    -moz-border-radius: 3px
    border-radius: 3px
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    background-color: #fff
    border: 1px solid #ccc
    padding: 5px;  


خب تا اینجا طراحی سایت ما مانند یک سایت معمولی بود.
خب به فایل responsive.css میرویم و کدهای زیر را قرار میدهیم.

@media only screen and (max-width: 740px) { 
    h1 { font-size: 4.5em; } 
    h3 { font-size: 2.2em; } 
    h2 { display: block; text-align: center; } 
    #info { float: none; display: block; text-align: center; } 
    #photo { 
        float: none
        display: block
        text-align: center
    
    #w { padding: 20px 15px; } 
    p { padding: 0; } 
}
در کد بالا ما کدهایی که مربوط به نمایشگرهایی که بیشترین عرضشان 740px است را قرار دادیم. همه چیز واضح است. کدهای دیگر را نیز مانند زیر قرار میدهیم.

@media only screen and (max-width: 570px) { 
    ul li { 
        display: inline-block;  
        padding-left: 15px;  
        width: 140px;  
        background-position: -5px 0px
        margin-right: 6px;  
        line-height: 1.7em
    
    #skills-left, skills-rightright { margin-bottom: 15px; } 
 
@media only screen and (max-width: 480px) { 
    ul li { width: 120px; } 
    #w { margin: 0 20px; } 
   
@media only screen and (max-width: 320px) { 
    #w { margin: 0 10px; } 
   
/** iPhone only **/ 
@media screen and (max-device-width: 480px) { 
    ul li { width: 150px; } 
}


موافقین ۰ مخالفین ۰ ۹۳/۰۱/۱۹

نظرات (۱)

۱۶ خرداد ۹۳ ، ۱۷:۵۰ گروه توسعه
واقعاً عالی بود
مفید و مختصر
ممنون

پاسخ:
بازدید و نظرات شما دوستان گرامی باعث دلگرمی ما می باشد

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی