ایجاد یک قالب وب سایت تک صفحه ای با CSS3 و HTML5

در مقاله امروز از لیداوب، می‌خواهیم با استفاده از ویژگی‌های فوق‌العاده در CSS3 و jQuery و پلاگین scrollTo، یک قالب وب در HTML5 ایجاد کنیم.


هیچ شکی وجود ندارد که تکنیک‌های جدید در حوزه طراحی سایت با سرعت در حال تغییر هستند. بنابراین، لازم است که طراحان حرفه‌ای وب یا برنامه نویسان، خود را با تغییرات جدید و آخرین تکنولوژی‌ها انطباق دهند. برای بهره بردن از مزایای حداکثری تکنیک‌های جدید برنامه نویسی و توسعه وب، باید برای طراحی یا ایجاد یک وب سایت از متدهای جدید استفاده کرد. 

ایجاد یک قالب وب سایت تک صفحه ای با CSS3 و HTML5

 طراحی یک قالب وب

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

 استفاده از  HTML

در این بخش چینش کامل را در چند تگ در HTML دسته بندی کرده‌ایم:

 header:  هدر یا تیتر صفحه شما را پوشش می‌دهد

 footer: فوتر یا پانویس صفحه شما را پوشش می‌دهد

 section: محتوا را در بخش‌های مختلف (مثل نوار کناری، ناحیه میانی و غیره) قرار می‌دهد

 article: مقاله مشخصی را از بقیه صفحه جدا می‌کند

 nav: منوی راهبری وب سایت را ایجاد می‌کند

 figure: تصویری را در خود نگه می‌دارد که به عنوان نشانه مقاله شما به کار خواهد رفت

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

کدهای مربوط به قسمت Head

<!DOCTYPE html> <!-- The new doctype -->

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Coding A CSS3 &amp; HTML5 One Page Template | xyz demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <!-- Internet Explorer HTML5 enabling script: -->
    <!--[if IE]>
        <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <style type="text/css">
            .clear {
                zoom: 1;
                display: block;
            }
        </style>
    <![endif]-->
</head>

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

کدهای قسمت Body

<body>
    <section id="page"> <!-- Defining the #page section with the section tag -->
    <header> <!-- Defining the header section of the page with the appropriate tag -->
        <h1>Your Logo</h1>
        <h3>and a fancy slogan</h3>
        <nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
            <ul>
                <li><a href="#article1">Photoshoot</a></li>
                <li><a href="#article2">Sweet Tabs</a></li>
                <li><a href="#article3">Navigation Menu</a></li>
            </ul>
        </nav>
    </header>

در این کد ما از تگ‌های جدید section استفاده می‌کنیم که صفحه شما را به بخش‌های معنایی جداگانه‌ای دسته بندی می‌کند. علاوه بر این، بخش #page که دارای عرض 960px در استایل شیت است. پس از آن به تگ‌های header و navigation می‌پردازیم.

کدهای قسمت Article

<!-- Article 1 start -->
 <div class="line"></div>  <!-- Dividing line -->
 <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
     <h2>Photoshoot Effect</h2>
     <div class="line"></div>
     <div class="articleBody clear">
         <figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
             <a href="https://xyz.com/2010/02/photo-shoot-css-jquery/">
                 <img src="https://cdn.xyz.com/img/featured/641.jpg" width="620" height="340" /></a>
         </figure>
         <p>In this post, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>
     </div>
 </article>
 <!-- Article 1 end -->

این مارک آپ بین تمام article‌ها مشترک است. علاوه بر آن، خط اول، خط جداکننده است و پس از آن می‌توانیم تگ‌های article جدید را با یک id منحصر به فرد مشاهده کنیم که توسط navigation برای اسکرول کردن صفحه به کار می‌روند. همچنین، می‌توانیم عنوان article، دو پاراگراف و تگ جدید fig که نشان دهنده استفاده از تصاویر در مقاله است را ببینیم.

کدهای مربوط به قسمت footer

  <footer> <!-- Marking the footer section -->
            <div class="line"></div>
            <p>Copyright 2010 - YourSite.com</p> <!-- Change the copyright notice -->
            <a href="#" class="up">Go UP</a>
            <a href="https://xyz.com/" class="by">Template by xyz</a>
        </footer>
    </section> <!-- Closing the #page section -->
    <!-- JavaScript Includes -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
    <script src="script.js"></script>
    </body>
</html>

در انتهای صفحه وب، می‌توانید بقیه فایل‌‌های جاوا اسکریپت که کتابخانه jQuery و پلاگین scrollTo را به صفحه اضافه می‌کنند.

مطالعه مقالات مرتبط در لیداوب:

استفاده از CSS

حالا می‌توانید اندازه گیری‌های بیشتر برای استایل بندی را مشخص کنید. می‌توانید به سادگی با اضافه کردن کد CSS این کار را انجام دهید و صفحه همانطور که انتظار می‌رود، کار خواهد کرد.

کدهای درون style.css

header,footer,
article,section,
hgroup,nav,
figure{
    /* Giving a display value to the HTML5 rendered elements: */
    display:block;
}
article .line{
    /* The dividing line inside of the article is darker: */
    background-color:#15242a;
    border-bottom-color:#204656;
    margin:1.3em 0;
}
footer .line{
    margin:2em 0;
}
nav{
    background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
    padding:0 5px;
    position:absolute;
    right:0;
    top:4em;
    border:1px solid #FCFCFC;
    -moz-box-shadow:0 1px 1px #333333;
    -webkit-box-shadow:0 1px 1px #333333;
    box-shadow:0 1px 1px #333333;
}
nav ul li{
    display:inline;
}
nav ul li a,
nav ul li a:visited{
    color:#565656;
    display:block;
    float:left;
    font-size:1.25em;
    font-weight:bold;
    margin:5px 2px;
    padding:7px 10px 4px;
    text-shadow:0 1px 1px white;
    text-transform:uppercase;
}
nav ul li a:hover{
    text-decoration:none;
    background-color:#f0f0f0;
}
nav, article, nav ul li a,figure{
    /* Applying CSS3 rounded corners: */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

البته باید مقدار نمایشی آخرین تگ‌ها را برای بلاک مشخص کنید که در دو خط آخر مشاهده می‌کنید. سپس، می‌توانید آن‌ها را با div‌های مرسوم، استایل بندی کنیم.

بخش دوم کدهای style.css

/* Article styles: */
#page{
    width:960px;
    margin:0 auto;
    position:relative;
}
article{
    background-color:#213E4A;
    margin:3em 0;
    padding:20px;
    text-shadow:0 2px 0 black;
}

figure{
    border:3px solid #142830;
    float:right;
    height:300px;
    margin-left:15px;
    overflow:hidden;
    width:500px;
}
figure:hover{
    -moz-box-shadow:0 0 2px #4D7788;
    -webkit-box-shadow:0 0 2px #4D7788;
    box-shadow:0 0 2px #4D7788;
}
figure img{
    margin-left:-60px;
}
/* Footer styling: */
footer{
    margin-bottom:30px;
    text-align:center;
    font-size:0.825em;
}
footer p{
    margin-bottom:-2.5em;
    position:relative;
}
footer a,footer a:visited{
    color:#cccccc;
    background-color:#213e4a;
    display:block;
    padding:2px 4px;
    z-index:100;
    position:relative;
}
footer a:hover{
    text-decoration:none;
    background-color:#142830;
}
footer a.by{
    float:left;
}
footer a.up{
    float:right;
}

در این بخش از کدها، استایل بندی مفصلی به عناصر اضافه می‌کنیم، مانند خصوصیت hover، عرض برای صفحه و استایل‌هایی برای لینک‌های درون فوتر.

استفاده از jQuery

حالا می‌توانید یک اسکرول ملایم با کلیک کردن روی لینک navigation با استفاده از پلاگین scrollTjQuery ایجاد کنید.

کدهای درون Script.js

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */
    $('nav a,footer a.up').click(function(e){
        // If a link has been clicked, scroll the page to the link's hash target:
        $.scrollTo( this.hash || 0, 1500);
        e.preventDefault();
    });
});

پس از وارد کردن این کد، قالب ما کامل می‌شود و شما یک قالب سایت تک صفحه‌ای دارید که می‌توانید در صورت نیاز آن را گسترش دهید. امیدوارم این مقاله از لیداوب برای شما مفید باشد. می‌توانید نظرات و سوالات خودتان را در بخش دیدگاه‌ها با ما در میان بگذارید.