Web Tasarımında HTML ve CSS ile Menü Yapımı
Web Site Tasarımı
İnternet çağının girmesiyle birlikte web sitesi yapma da önemli hale geldi. Web site tasarımı için birkaç aşamayı gerçekleştirmek gereklidir.
1.Ön Hazırlık Aşması: Hazırlık aşamasında öncelikle istenenlere kesin bir şekilde belirlememiz gerekmektedir. Ardından gerekli dokümanlar toplanmalıdır. Sitemizde olması gereken bilgiler elimizde olursa tasarımımız o kadar kolay olur.
2.Tasarım Aşaması: Öncelikle hayalimizde olan tasarımı çizmeliyiz. Çizimin içeriklerini belli bir plan dâhilinde yapalım. Benzer siteleri araştırarak müşteri potansiyelinin fazla olduğu ve talep gören içeriklerden faydalanalım. Son olarak müşterilerin de fikirlerini alalım.
Kaliteli Web Tasarımında Neler Olmalıdır?
Öncelikli olarak sade olunmalıdır. Çünkü müşteriler siteye girdiğinde karşılarında karışık bir görüntü istemezler. Renk seçimi de göze hoş olmalıdır. Farklı renk kullanımı müşteriyi yorar. Hızlı ve kolay ulaşılabilirliği olmalıdır. Yazılan içerikler de kolay anlaşılabilir olmalıdır. Önemli olan müşteridir. Bu unutulmamalıdır.
Css Açılır Menü Yapımı
Css Açılır Menü Yapımı için iki farklı yol mevcuttur.
Css ile dikey menü; ilk olarak menünün içeriklerini belirleyen bir liste hazırlanmalıdır. İd’sini menü olarak belirlenmelidir. Sonra listede listeleme işaretleri kaldırılmalı, iç ve dış boşluklar sıfırlanmalıdır. Sonra linklerin zemin rengi, genişlik gibi değerler girilmelidir. Daha sonra a:hover özelliği ile nesnelerin rengini değiştiriyoruz. Dikey menü böylece oluşmuş olur.
Css ile yatay menü; ilk olarak index.html adında bir sayfa açılmalıdır. Yatay menü oluşturmak için liste etiketleri yan yana getirilmelidir. Liste etiketleri sola hizalama kodu float:left ile hizalanmalıdır. Sonra link etiketlerini biçimlendirme yapılmalıdır. Aktif olan linki hover seçici ile link etiketleri biçimlendirilmelidir. Son olarak animasyonlu görünüm için transition:all .3s ease-in; kodunu kullanıyoruz.
Css dikey kodları:
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
width: 150px;
#menu a {
font-family: Arial;
font-size: 15px;
color: #FFFFFF;
text-decoration: none;
background-color: #314c5f;
width:100%;
padding-top: 5px;
padding-right: 5px;
border: 1px solid #9fb2bc;
text-align: center;
line-height: 30px;
margin-right: 2px;
display: block;
padding-top: 5px;
padding-right: 5px;
}
text-align: center;
line-height: 30px;
margin-right: 2px;
width:100%;