ایجاد صفحه بندی سایت (Layout) در HTML
پنجشنبه 14 مرداد 1395در این مقاله قصد آموزش صفحه بندی ( Page Layout ) با استفاده از HTML5 را داریم . که بدین منظور ، به معرفی تگ های مورد نیاز برای صفحه بندی میپردازیم .
به HTML5 ، تگ های جدیدی اضافه شده است که کار صفحه بندی را برای ما بسیار آسان کرده است . که در زیر به آنها اشاره ای خواهیم داشت :
• <header > : این تگ برای تعریف header سایت مورد استفاده قرار میگیرد .
• <nav> : این تگ برای تعریف navigation bar (برای مثال منوی سایت) مورد استفاده قرار میگیرد .
• <section> : برای تعریف یک section در سایت مورد استفاده قرار میگیرد .
• <article> : برای تعریف قسمتی مستقل برای نگهداری مطلب مورد استفاده قرار میگیرد .
• <aside> : برای تعریف قسمت نوار کناری سایت مورد استفاده قرار میگیرد .
• <footer> : برای تعریف footer برای صفحه یا یک section مورد استفاده قرار میگیرد .
• <details> : برای اضافه کردن جزئیات به صفحه ، مورد استفاده قرار میگیرد .
• <summary> : برای اضافه کردن یک header به <details> مورد استفاده قرار میگیرد .
حال بعد از معرفی ، به سراغ ساختن یک صفحه بندی میرویم . در این مثال ، ما از notepad استفاده میکنیم .
مرحله اول :
notepad را باز کنید و فایلی را با پسوند html. ذخیره کنید (همانند عکس زیر) :
مرحله دوم :
فایلی را که ذخیره کردید را باز کنید . ما کدهای HTML خود را در این جا می نویسیم .
<!DOCTYPE html>
<html>
<head>
<title>my layout</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<header id="header">
<h1>Barnamenevisan.org</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="#"><p>ساختن html website</p></a>
<a href="#"><p>آموزش css</p></a>
<a href="#">آموزش c#</a>
</aside>
<article id="article">
<h1>لورم ایپسوم</h1>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم استلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم استلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم استلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم استلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
</article>
<footer id="footer">
copyright @Barnamenevisan.org
</footer>
</body>
</html>
ما برای Style دادن ، به تگ های خود ID دادیم .
فایل Index.htm را باز کنید . وب سایت ساده ما به شکل زیر خواهد بود .
سایت ما اصلا خوب به نظر نمیرسد ، در مرحله بعدی ، قصد عوض کردن ظاهر سایت را با استفاده از CSS داریم .
فایل my.css را باز کنید و کد های زیر را در آن بنویسید .
#header{
color: #247BA0;
text-align: center;
font-size: 20px;
}
#nav{
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{
text-align: center;
float: right;
width: 15%;
padding-bottom: 5%;
background-color: #F1FAEE;
}
#article{
background-color: #EEF5DB;
padding: 10px;
padding-bottom: 5%;
}
#footer{
background-color: #C7EFCF;
text-align:center;
padding-bottom: 5%;
font-size: 20px;
} }
فایل را ذخیره کرده و Index را دوباره باز کنید .
وب سایت ما به شکل زیر نمایش داده خواهد شد .
حال ، به سراغ معرفی صفات استفاده شده در کدهای CSS میپردازیم .
#header{
color: #247BA0;
text-align: center;
font-size: 20px;
#heading شناسه تعریف شده برای تگ header است .
color- رنگ متن را تنظیم می کند .
text-aling برای مشخص کردن مکان متن مورد استفاده قرار میگیرد . در این مثال ، مقدار Center را برای header تنظیم کرده ایم .
font-size سایز متن را تنظیم می کند .
#nav{
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%;
}
- HTML
- 4k بازدید
- 3 تشکر