آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

ویژه آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

در صورت مفید بودن این آموزش آن را از طریق کلید G+ (گوگل پلاس ابتدای صفحه ) به اشتراک بگذارید

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

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .
با تگهای HTML آشنایی دارید ؟ اگر با Html کار نکرده اید بهتر است بر روی لینک مورد نظر کلیک کرده و کمی با تگها آشنا شوید. زیرا ممکن است در ادامه سوالهای زیادی برای شما بوجود بیاید . 

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>

 

2. اولین کار عنوان صفحه وب سایت می باشد که با تگ title مشخص می شود و در بین تگ head باید تایپ شود . هر عنوانی دربین این دو تگ قرار بگیرد در تب مرورگر نمایش داده می شود . 

<!DOCTYPE html>
<html>
   <head>
        <title>آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5</title>
   </head>
              <body>
              </body>
</html>

 

3. دومین تگی که باید در بین تگ head  قرار بگیرد <meta charset="utf-8" /> می باشد . برای تعیین نوع رمزنگاری صفحه یا encoding صفحه از این متاتگ استفاده میشود. در صورت استفاده ننمودن از این متاتگ و encoding utf-8 ، در بعضی از مرورگرها و یا سیستم های کاربرانی که encoding فارسی ندارند ، متن های فارسی به صورت علامت سوال (؟) نشان داده می شوند.

<!DOCTYPE html>
<html>
   <head>
        <title>آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5</title>
        <meta charset="utf-8" />
   </head>
              <body>
              </body>
</html>

 

4. حالا نوبت به تگ لینک به فایل Css3 میرسد . ظاهر قالب با استفاده از Css3 مشخص می شود . تمام تنظیمات مربوط به ظاهر قالب در Css3 تایپ می شود .

<!DOCTYPE html>
<html>
   <head>
        <title>آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5</title>
        <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/css/reset.css"> <link rel="stylesheet" href="/css/main.css" /> </head> <body> </body> </html>

 

5. بسیار خوب تا به اینجا کار خاصی انجام نشده است . قالب را با عنوان index.html بر روی دسکتاپ یا یک پوشه ذخیره کنید . File > save as

 حالا نوبت میرسد به تغییرات و ایجاد بخش های جدید در صفحه قالب مثل منو یا لوگو یا هر چیزی که قرار است در این قالب قرار بگیرد .
ابتدا تگ section را درون تگ Body تایپ می کنم.  از تگ < section > برای تعیین یک بخش یا قسمت مجزا در یک سند وب استفاده می شود . برای مثال می توان به یک بخش متن ، یک عنوان خبری و .... اشاره کرد .
1. ابتدا تگ section
2. داخل تگ section یک دیویژن ایجاد می کنیم . سپس با استفاده از تگ <a href="#"><img src="/img/logo.png" class="logo" alt="" titl=""/></a> به لوگو لینک میدهیم . 
3. سپس با استفاده از تگ <ul> منوهای سایت را ایجاد میکنم . 
4. سپس با استفاده از تگ H1 و H2 توضیحات اصلی و فعالیت کاری این وب سایت را مشخص میکنم .
به کدهای زیر دقت کنید . کلاس هایی class که ایجاد شده است برای این می باشد که با استفاده از فایل Css شکل ظاهری هر قسمت را بتوانیم تغییر بدهیم . به عنوان مثال رنگ و چیدمان فونت ها .


تا به اینجا کد باید به این شکل نوشته شده باشد . 

<!DOCTYPE html>
<html>
   <head>
        <title>آموزش طراحي قالب ريسپانسيو با استفاده از Css3 و Html 5</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="/css/reset.css">
        <link rel="stylesheet" href="/css/main.css" />
   </head>
              <body>
    <section class="hero">
        <header>
            <div class="wrapper">
                <a href="#"><img src="/img/logo.png" class="logo" alt="" titl=""/></a>
                <a href="#" class="hamburger"></a>
                <nav>
                    <ul>
                        <li><a href="#">صفحه اصلي </a></li>
                        <li><a href="#">فروشگاه </a></li>
                        <li><a href="#">بخش آموزش</a></li>
                        <li><a href="#">درباره ما</a></li>
                        <li><a href="#">نقشه سايت</a></li>
                    </ul>
                    <a href="#" class="login_btn">ورود</a>
                </nav>
            </div>
        </header><!--  end header section  -->
            <section class="caption">
                <h2 class="caption">Find You Dream Home</h2>
                <h3 class="properties">فروشگاه اينترنتي آسارايان - طراحي قالب  - ريسپانسيو</h3>
            </section>
    </section><!--  end hero section  -->
              </body>
</html>

 

شکل ظاهری قالب را در مرورگر مشاهده می کنید .

1 آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

 

 حالا باید شکل ظاهری قسمت اول تغییر بدهیم و بعد به سراغ قسمت دوم آموزش رفته و تگهای جدید را اضافه کنیم . یک فایل در نوت پد یا هر برنامه ویرایشی که بتوانید کد درون آن تایپ کنید باز کرده و در یک پوشه با عنوان Css به نام main.css ذخیره کنید .
( توضیحات برای کاربران سطح پایه :  شما یک پوشه با نام قالب دارید که تا به الان درون آن فقط یک فایل index.html ذخیره شده بود .شما باید یک پوشه درون آن با عنوان css ایجاد کرده و درون پوشه css فایل main.css را ذخیره کنید . )
درون پوشه قالب یک پوشه با عنوان Font نیز ایجاد کنید زیرا برای قسمت های دلخواه می خواهیم از فونت هایی که خودمان دانلود کرده ایم استفاده کنیم .
درون پوشه قالب یک پوشه با عنوان img برای ذخیره تصاویر ایجاد کنید . پوشه قالب شما باید به شکل زیر باشد . 

2 آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

 

تغییرات ظاهری بالای قالب با استفاده از Css

فایل main.css را باز کنید . (کافیست نوت پد را باز کرده و بدون هیچ کدی فقط با همین عنوان درون پوشه css ذخیره شود) ابتدا کدهای مربوط به فونت را درون آن تایپ میکنم . اگر با تگ فونت آشنایی ندارید ابتدا این آموزش را مورد بررسی قرار بدهید و از دوباره بهاین تمرین برگردید . سئو

/*  Fonts  */
@font-face {
    font-family: 'lato-bold';
    src: url('../fonts/lato-bold.eot');
    src: url('../fonts/lato-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-bold.woff') format('woff'),
         url('../fonts/lato-bold.ttf') format('truetype'),
         url('../fonts/lato-bold.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lato-regular';
    src: url('../fonts/lato-regular.eot');
    src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular.woff') format('woff'),
         url('../fonts/lato-regular.ttf') format('truetype'),
         url('../fonts/lato-regular.svg#LatRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'p22_corinthia';
    src: url('../fonts/p22_corinthia.eot');
    src: url('../fonts/p22_corinthia.eot?#iefix') format('embedded-opentype'),
         url('../fonts/p22_corinthia.woff') format('woff'),
         url('../fonts/p22_corinthia.ttf') format('truetype'),
         url('../fonts/p22_corinthia.svg#P22Corinthia') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

 

حالا نوبت میرسه به رنگ پس زمینه  body
عرض صفحه .wrapper
تگهای اصلی متن که در سئو تاثیر زیادی دارند h1, h2, h3, h4, h5 ,h6

 تگهای این بخش را باید زیر تگهای فونت (بخش بالا) تایپ کنید . 

/*  General CSS  */
body{
    background: #fff;
}

.wrapper{
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

h1, h2, h3, h4, h5 ,h6{
    color: #626262;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder }

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
 
.clearfix {  
    *zoom: 1;  
}

 

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

/*  Header Section  */
header{
    width: 100%;
    height: 100px;
    background: rgba(28, 54, 85, .2);
}
header .logo{
    margin-top: 40px;
    float: left;
}
header a.hamburger{
    text-decoration: none;
    display: none;
    float: right;
    margin-top: 41px;
    width: 24px;
    height: 19px;
    background: url('../img/hamburger_icon.png') no-repeat;
}
header a.hamburger.opned{
    width: 19px;
    background: url('../img/close_menu_icon.png') no-repeat;
}
header nav{
    float: right;
    opacity: 1;
line-height:17px; } header nav ul{ margin-top: 40px; list-style: none; overflow: hidden; float: left; } header nav ul li{ float: left; margin-left: 50px; } header nav ul li a, header nav .login_btn{ text-decoration: none; color: #fff; font-family:tahoma, "lato-regular", Helvetica, Arial, sans-serif; font-size: 16px; letter-spacing: 1px; } header nav .login_btn{ float: right; margin: 30px 0 0 50px; padding: 10px 30px 11px 30px; border: 2px solid #ffffff; background: transparent; transition: background .1s linear; -webkit-transition: background .1s linear; -moz-transition: background .1s linear; -o-transition: background .1s linear; } header nav .login_btn:hover{ background: #ffffff; color: #1c3655; }

اما بخش پایانی این قسمت مربوط می شود به تصویر هدر بالای صفحه .  تگهای اصلی در فایل index.html ذخیره شده است . فقط باید تگهای css را تایپ کنیم . 

/*  Hero Section  */
.hero{
    width: 100%;
    height: 900px;
    position: relative;
    background: url('../img/hero.jpg') no-repeat bottom center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.hero .caption{
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -105px;
    z-index: 10;
}
.hero .caption h2{
    color: #fff;
    font-family: "p22_corinthia", Helvetica, Arial, sans-serif;
    font-size: 100px;
    font-weight: lighter;
    margin: 0;
    position: relative;
    display: block;
}
.hero .caption h3{
    color: #fff;
    font-family: tahoma,"lato-regular",Helvetica,Arial,sans-serif;
    font-size: 14px;
    left: 1px;
    margin: 15px 0 0 25px;
}

 

حالا قالب را در مرورگر باز کنید . همان فایل index.html

3 آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5


2 بخش دیگر تا پایان این آموزش باقی مانده است . 

 

آخرین بروز رسانیپنج شنبه, 28 خرداد 1394 16:28

نوشتن دیدگاه

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

دیدگاه‌ها   

+2 #2 سیمین 1395-12-18 12:27
سلام من همه کارایی ک گفتین انجام دادم اما قالبش این شکلی نشد
نقل قول کردن
0 #1 طراحی فروشگاه اینترن 1394-10-16 09:31
مرسی از سایتتون ،مطالب خیلی خوبه
نقل قول کردن

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

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