ایجاد صفحه بندی سایت (Layout) در HTML

در این مقاله قصد آموزش صفحه بندی ( Page Layout ) با استفاده از HTML5 را داریم . که بدین منظور ، به معرفی تگ های مورد نیاز برای صفحه بندی میپردازیم .

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

<header > : این تگ برای تعریف header سایت مورد استفاده قرار میگیرد .
<nav> : این تگ برای تعریف  navigation  bar (برای مثال منوی سایت) مورد استفاده قرار میگیرد .
<section> : برای تعریف یک section در سایت مورد استفاده قرار میگیرد .
<article> :   برای تعریف قسمتی مستقل برای نگهداری مطلب مورد استفاده قرار میگیرد .
<aside> : برای تعریف قسمت نوار کناری سایت مورد استفاده قرار میگیرد .
<footer> : برای تعریف footer برای صفحه یا یک section مورد استفاده قرار میگیرد .
<details> : برای اضافه کردن جزئیات به صفحه ، مورد استفاده قرار میگیرد .
<summary> : برای اضافه کردن یک header به <details> مورد استفاده قرار میگیرد .

با استفاده از برنامه Visual Studio یک پروژه سایت جدید اضافه کنید .

به پروژه سایت خود یک صفحه HTML اضافه کنید و کد های زیر را در آن قرار دهید :

<!DOCTYPE html> 
<html> 
<head> 
    <title>Csharpoop.Com - my layout</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 

<header id="header"> 

<h1>Csharpoop.Com</h1>

 
</header>

 

<nav id="nav"> 

<ul> 

<li><a href="#">خانه</a></li>

 

<li><a href="#">درباره ما</a></li>

 

<li><a href="#">مقاله ها</a></li>

 

<li><a href="#">تماس با ما</a></li>

 
    </ul>

 
</nav>

 

<aside id="side"> 

<h1>خبر ها</h1>

 
    <a href="#">

ساختن html website

</a> 
    <a href="#">

آموزش css

</a> 
    <a href="#">آموزش c#</a> 
</aside>

 

<article id="article"> 

<h1>لورم ایپسوم</h1>

 


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

 


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

 


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

 


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

 


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


 
</article>

 

<footer id="footer"> 
    copyright @Csharpoop.Com
</footer>

 
</body> 
</html>

اگر در این حالت سایت را اجرا کنید مشاهده خواهید کرد که سایت ایجاد شده بسیار نا منظم و به هم ریخته می باشد ( تصویر زیر )

1-Page Layout

حالا می خواهیم با استفاده از قدرت CSS و HTML5 ظاهر سایت را دگرگون کنیم :

یک فایل CSS به پروژه خود در Visual Studio اضافه کنید و کد های زیر را در آن قرار دهید :

#header {
    color: #247BA0;
    text-align: center;
    font-size: 20px;
}

#nav {
    text-align:justify;
    direction:rtl;
    font-family:Tahoma;
    background-color: #FF1654;
    padding: 5px;
}

ul {
    list-style-type: none;
}

li a {
    color: #F1FAEE;
    font-size: 30px;
    column-width: 5%;
}

li {
    display: inline;
    padding-left: 2px;
    column-width: 20px;
}

a {
    text-decoration: none;
    margin-left: 20px;
}

li a:hover {
    background-color: #F3FFBD;
    color: #FF1654;
    padding: 1%;
}

#side {
    font-family:Tahoma;
    text-align: center;
    float: right;
    width: 15%;
    padding-bottom: 5%;
    background-color: #F1FAEE;
}

#article {
    text-align:justify;
    direction:rtl;
    font-family:Tahoma;
    background-color: #EEF5DB;
    padding: 10px;
    padding-bottom: 5%;
}

#footer {
    background-color: #C7EFCF;
    text-align: center;
    padding-bottom: 5%;
    font-size: 20px;
}

فایل را ذخیره و پروژه خود را اجرا کنید . مشاهده تغییر ظاهر سایت خواهید شد که چگونه با استفاده از چند خط کد ساده می توان یک سایت را زیباتر کرد ( البته خب تا یک سایت خوب کاره زیادی داره )

2-Page Layout

 حال ، به سراغ معرفی صفات استفاده شده در کدهای CSS میپردازیم .

#header {
    color: #247BA0;
    text-align: center;
    font-size: 20px;
}

#heading شناسه تعریف شده برای تگ header است .
color- رنگ متن را تنظیم می کند .
text-aling برای مشخص کردن مکان متن مورد استفاده قرار میگیرد . در این مثال ، مقدار Center را برای header تنظیم کرده ایم .
font-size سایز متن را تنظیم می کند .

#nav {
    text-align:justify;
    direction:rtl;
    font-family:Tahoma;
    background-color: #FF1654;
    padding: 5px;
}

#nav شناسه تعریف شده برای <nav> است .
Background-color برای تنظیم رنگ پس زمینه مورد استفاده قرار میگیرد .
Padding برای بسط دادن فضای اطراف navigation bar مورد استفاده قرار میگیرد .

ul {
    list-style-type: none;
}

در نمایش لیست ها یک نقطه سیاه در پشت داده های لیست قرار دارد ، که ما در این کد با دادن مقدار none به list-of-style این نقطه را حذف کردیم .

li a:hover {
    background-color: #F3FFBD;
    color: #FF1654;
    padding: 1%;
}

 

دانلود سورس کد
پسورد : csharpoop.com
پیش نمایش

ایجاد صفحه بندی سایت (Layout) در HTML
3 (60%) 2 رایs

(416 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *