(نسخه قابل پرینت موضوع)
عنوان موضوع : چگونه در طراحی سایت منویی با کد HTM ایجاد کنیم؟
نمایش موضوع اصلی :

mitra60 یکشنبه ۶ اردیبهشت ۱۳۹۴ ۱۱:۰۳ بعد از ظهر
تعبیه منو از جلوه های مهم طراحی سایت است که در جذب و جلب نظر کاربر نقش مهمی دارد و همچنین در بهینه سازی سایت نیز تاثیر خوبی می گذارد. تعبیه منو یکی از عوامل اصلی طراحی سایت به حساب می آید که صفحه های سایت را بهم ربط می دهد و در واقع می تواند نقشه ای از سایت در اختیار کاربر قرار دهد و به همین خاطر در طراحی سایت باید مورد توجه باشد و در همه صفحه های سایت تعبیه و ایجاد شود. تگ <li>  جهت فهرست دهی و تگ  <ul>  جهت فهرست دهی نامرتب و تگ <ol> برای فهرست دهی مرتب استفاده می شود.
 
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea
  <li>Milk</li>
</ul>
 در مثال فوق آیتم ها از نوع disc فهرست دهی می شود. 
<ol type="a">
  <li>Coffee</li>
  <li>Tea
  <li>Milk</li>
</ol>
 و در مثال فوق آیتم ها به صورت مرتب از حرف a نام گذاری می شوند.
با به کارگیری کدهای css  می توانید استایل مخصوصی را برای منو در طراحی سایت تولید کنید. در مثال زیر منوی افقی را می بینید که در آن استایل مخصوصی مدنظر بوده است.
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    padding: 0;
}
ul#menu li {
    display: inline;
}
ul#menu li a {
     background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
     background-color: orange;
}
 </style>
</head>
<body>
<h2>Horizontal List</h2>
 <ul id="menu">
 <li><a href="/demo/html_tables.asp">Tables</a></li>
 <li><a href="/demo/html_lists.asp">Lists</a></li>
 <li><a href="/demo/html_blocks.asp">Blocks</a></li>
 <li><a href="/demo/html_classes.asp">Classes</a></li>
</ul>
</body>
</html>
  طراحی و تعبیه منو علاوه بر ربط دادن صفحه های داخلی سایت به همدیگر، باعث زیبا شدن صفحه های وب سایت نیز می شود که این زیباسازی باعث جذب و جلب نظر کاربر می گردد و به موازات آن بهینه سازی سایت را هم بالا برده و تاثیر مفیدی در آن می گذارد.

Powered by FAchat