Web Sitenin Kodlara Dönüştürülmesi
Web sitesi genellikle sahip oldukları başlıkları, menüleri, bir kaç bölümden oluşan içeriği ve alt bilgisi gibi parçalara ayrılır. Hepsi bir düzen içerisinde kullanıcısına sunulur. Web dünyasına göz attığımızda bu şablonu sunacak, tonlarca farklı sayfa düzeni tasarımı bulunmaktadır.
Üç sütunlu düzen, web siteleri için kullanılan en yaygın sayfa düzenlerindendir. Genellikle bir üst bilgi (başlık) ve alt bilgi bulunur. Web sitesinin diğer sayfalarına ulaşmanızı sağlayabilecek bir menü çubuğu mevcuttur. Orta kısım daha çok içeriği sunmak içindir. Tabi ki içerik birden fazla parçaya ayrılabilir. Bu durumda orta kısım ek sütunlar ile bölünebilir. Şu an bu yazıyı okuduğunuz sitemize bir de böyle bir göz atın, sahip olduğu bölümleri inceleyin. Neler görüyorsunuz? Öyleyse, sayfa üzerindeki tüm parçaları koymak için temel HTML‘mizle başlayalım.
1. Adım : <body>
Öncelikle Gövde (body) etiketleri arasında olan her bölümün temel taslağını hazırlayalım. Sayfa düzenini sağlayan tüm bölümleri <div> öğesi ile hazırlıyoruz. Her bölüme bir ilgili sınıf ismi vermek, ilerleyen aşamalarda web sayfası üzerindeki kontrolünüzü arttıracaktır. Her bölümün sırası ve kapsamı sayfanın akışına göre hazırlanmalıdır.
2. Adım : Sayfa
Sayfa isimli bölüm bir görsele sahip olmaktan daha çok içinde yer alan tüm öğeleri bir arada gruplamak ve ortada tutmak için mantıksal bir kapsayıcı olarak bulunmaktadır. Bu sebeple sadece bir genişliğe sahip olacaktır. Margin bildirimi ortalamak için kullanılmaktadır. Arka plan (background) kullanımı isteğe bağlıdır.
3.Adım : Başık
Başlık genellikle web sitesinin üst kısmında bulunur. Sıklıkla bir logo veya web sitesi adı içerir.
4. Adım : Menü
Sırada üst menü yerleşiminde; Yatay bir menü oluşturmak üzere menü bloğu içinde sırasız bir liste yerleştirelim. Yapısında bulunacak olan her bir <li> öğesi başka bir sayfamızın linkini tutacak olan <a> etiketlerini barındıracaktır.HTML belgesinde menü oluşturmak için pek çok farklı öğeyi bir arada kullandık. Yatay bir menü için CSS bildirimlerini yazmadan önce bilmemiz gerekenler var. Menümüz için <div>, <ul>, <li>, <a> öğelerinden faydalanıyoruz.
<div> , <ul>, <li> blok tipi elementlerdir. Kapsayıcısına göre tüm satıra konumlanırlar. <a> Satır içi (inline) elementtir. Sahip olduğu içeriği kadar satır içinde kalırlar. float CSS özelliği uygulanan öğeyi sayfa akışından çıkarır. Kullanımından sonra akışı tekrar normal hale getirilmelidir. <ul>,<li> öğelerinin HTML standartlarından kaynaklanan margin ve padding değerleri vardır.
5. Adım : İçerik
Ana içerik, sitenizin en büyük ve en önemli parçasıdır. Bu bölümdeki düzen, genellikle hedef kullanıcılara bağlıdır. En yaygın düzen, aşağıdakilerin biridir.
- 1 sütun (genellikle mobil tarayıcılarda kullanılır)
- 2 sütun (genellikle tabletler ve dizüstü bilgisayarlar için kullanılır)
- 3 sütunlu düzen (yalnızca masa üstlerinde kullanılır)
Sol ve sağ sütunların genişlikleri ortaktır. Böylece alanın büyük kısmı ana içerik (orta) için ayrılmıştır. Yan içerik (varsa) genellikle, alternatif navigasyon olarak veya ana içerikle ilgili bilgileri belirtmek için kullanılır. Genişlikleri istediğiniz gibi değiştirebilirsiniz, yalnızca toplamda % 100‘e kadar ekleme yapmanız gerektiğini unutmayın.
6.Adım : Alt
Alt bilgi, sayfanızın altına yerleştirilir. Genellikle telif hakkı ve iletişim bilgileri gibi bilgileri içerir.
Çukurova Marka Patent Kalite Yönetim ve Danışmanlık olarak sizin için bugün web sitesinin kodlara dönüştürülmesi konusuna değindik. Bizler Çukurova Marka Patent Kalite Yönetim ve Danışmanlık olarak siz değerli müşterilerimizin düşüncelerini ve isteklerini önemsiyoruz. İstekleriniz için 444 8 148 numaralı sabit hattan bizimle iletişime geçebilirsiniz.