• Bilişim
  • Spor
    • Satranç
  • Kadın ve Çocuk
  • Film
  • Kurumsal
    • İletişim
    • Hakkımızda
    • Künye
    • Gizlilik Politikası
  • Daha Fazla
    • Haberler
    • Antalya Etkinlikleri
    • Hangi Kanalda
    • Antalya Özel
    • Genel
    • Kitap
Kültür Kaynağı
  • Bilişim
  • Spor
    • Satranç
  • Kadın ve Çocuk
  • Film
  • Kurumsal
    • İletişim
    • Hakkımızda
    • Künye
    • Gizlilik Politikası
  • Daha Fazla
    • Haberler
    • Antalya Etkinlikleri
    • Hangi Kanalda
    • Antalya Özel
    • Genel
    • Kitap
  • Facebook

  • Pinterest

  • Google+

  • RSS

Bilişim

html div ile Sayfa Tasarımı Örnekleri

html div ile Sayfa Tasarımı Örnekleri
admin
16 Kasım 2018

Html div ile Sayfa Tasarımı Örnekleri

html kullanarak web tasarım yapan Web Masterlar için html div ile Sayfa Tasarımı Örnekleri konulu yazımıza başlamadan önce ; Div etiketleri ne için nasıl kullanılır sorusuna yanıt arayalım.

Div etiketi ; kutu modeli olarak bilinen Web Sitelerimize nesneleri yerleştirirken yada içerik oluştururken şablon oluşturmaya yarar. Özellikle mobil cihazların yaygınlaşmasıyla beraber div etiketinin kullanım ihtiyacı daha da artmıştır.

Div etiketi tek başına tasarımsal değeri olmamakla birlikte css ile kullanıldığında çok güçlü bir tasarım aracı olarak dikkat çekiyor. Div etiketinin genel kullanım şekli :

<div class=” ……”>içerik </div> kalıbıyla kullanılır.

burada class olarak tanımladığımız sınıf css ile özellik kazandırılmış div etiketimizi güçlendirmek için ihtiyaç duyduğumuz parametredir. class olarak tanımladığımız sınıf css tanımlamalarında .ust benzeri bir isim ile tanımlanmalıdır. Class yerine Id parametresini de kullanabilirdik. Id ile tanımlama yapacak olursak css id ismi #ust benzeri bir yapıda olması gerekecekti.

Bu girizgahtan sonra html div ile Sayfa Tasarımı Örnekleri konumuza dönelim.

Div ile Sayfa Tasarımı Örnek 1:

ulaşacağımız tasarım :

div tasarım örnekleri-1

div tasarım örnekleri-1

oluşturacağımız Harici stilim.css dosya içeriği :


.tasiyici{ width:1202px; height:1300px; border:1px; border-style:solid; border-color:#F00;
}
.banner{ width:1187px; height:300px; border:1px; border-style:dotted;
border-color:#000; margin:3px 5px 3px 5px ; background-image:url(file:///C|/Users/ETKullanici/Desktop/csslitasarimlar/css11cdivler/banner.png);
}
.sol{ float:left; width:200px; height:900px; border:1px; border-color:#FF0;
border-style:double; margin-left:5px; margin-right:5px; margin-top:2px;
}/* CSS Document */
.icerik{ width:979px; height:898px; margin-top:2px; margin-right:5px; margin-bottom:2px;
border:1px; border:#30C; border-style:dotted; float:left;
background-color:#393; }
.footer{ border:1px; border-color:#903; border-style:groove; margin-left:5px;
margin-right:5px; margin-bottom:2px; height:77px; width:1188px; float:right; }


html Belgesi İçeriği :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”css/stilim.css” />
</head>

<body> <center>
<div class=”tasiyici”>
<div class=”banner”></div>
<div class=”sol”> </div>
<div class=”icerik”> </div>
<div class=”footer”> </div>
</div></center>
</body>
</html>


html div ile Sayfa Tasarımı Örnekleri – 2 :

Hedef Tasarım :

div tasarım örnekleri - 2

div tasarım örnekleri – 2


stilim2.css dosyası içeriği :

.container{ width:1200px; height:1300px;
border:1px; border-style:solid; border-color:#000;
margin-left:auto; margin-right:auto; margin-top:10px;
}
.ust { margin:5px 5px 5px 5px; width:1186px;
height:300px; border:1px solid #00F; background-color:#C03;}
.menu{ margin:0px 5px 5px 5px; width:1186px;
height:40px; border:1px solid #0F6; background-color:#06C;}
.icerik{ margin:0 5px 5px 5px; width:1186px;
height:845px; border:1px solid #FF0; background-color:#C9C;}
.alt{ margin:0px 5px 5px 5px; width:1186px;
height:80px; border:1px solid #F00; background-color:#0FF;}


Html Belgesi İçeriği :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”css/sitilim2.css” />
</head>

<body>
<div class=”container”>
<div class=”ust”>banner</div>
<div class=”menu”>menü</div>
<div class=”icerik”> içerik </div>
<div class=”alt”> footer bilgi alanı</div>
</div>

</body>
</html>


sizler için 2 adet Div ile Sayfa Tasarımı Örneği hazırladım. umarım faydalı olmuştur. Konu ile ilgili takıldığınız yada sormak istediğiniz soruları yorum olarak iletirseniz en kısa sürede cevaplayacağım.

Related Itemsdiv etiketidiv ile şablon tasarımıdiv ile sayfa tasarımıdiv örnekleri
Yorum Bırakmadan Geçme :)

Yorum Bırakmadan Geçme :)

Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bilişim
16 Kasım 2018
admin

...

Related Itemsdiv etiketidiv ile şablon tasarımıdiv ile sayfa tasarımıdiv örnekleri

İlişkili Bilişim

Güvenilir YouTube’dan MP3’e Dönüştürücü

admin24 Kasım 2020
İNCELE

Dijital Pazarlamadan Daha Fazla Değer Elde Etmenin Dört Yolu

admin23 Eylül 2020
İNCELE

Blog Yazarlığından Ayda Ne Kadar Para Kazanılır?Kaç İzlenme Kaç TL?

Emre Kasap19 Eylül 2019
İNCELE

Apple, Yenilikçi Yapay Zeka Sistemi (Overton)?

Emre Kasap16 Eylül 2019
İNCELE

Apple İPhone 11 ve 11 Pro Türkiye fiyatı ve bütün özellikleri neler? İPhone 11 yurt dışı fiyatları neler?

Emre Kasap13 Eylül 2019
İNCELE

Montaj Şirketi Flex, Huawei Üretimlerini Durdurdu

Yunus Sönmez25 Mayıs 2019
İNCELE

SpaceX 60 İnternet Uydusunu Uzaya Gönderdi

Yunus Sönmez24 Mayıs 2019
İNCELE
hacker saldırlarında korunma yolları

Hacker Saldırılarından Korunma Yöntemleri

admin15 Kasım 2018
İNCELE
heif vs jpeg heif formatı nedir

Heif Görüntü Formatı Nedir ? HEIF Görüntü Formatı Ne İşe Yarar

Furkan Kurt19 Nisan 2018
İNCELE
Devamı İçin Kaydır
Tap

Film/Dizi Önerilerimiz

  • italya gizem filmleri 2
    İtalyan Yapımı En İyi Gizem Filmleri | İtalya Gizem Filmleri
    Film Önerileri07 Ocak 2019
  • sonu sürprizli ispanyol filmleri
    İspanya Yapımı En İyi Gizem Filmleri Listesi
    Film Önerileri16 Nisan 2018
  • Avengers: Sonsuzluk Savaşı
    Nisan Ayında Vizyona Girecek Filmler -2018
    Film Önerileri02 Nisan 2018
  • amir khan son filmi
    Aamir Khan’ın Son Filmi Secret Superstar – Gizli Süper Yıldız
    Film Önerileri02 Nisan 2018
  • gözlerindeki sır arjantin
    Arjantin Sinemasının Dudak Uçuklatan En Güzel Filmleri
    Film Önerileri27 Mart 2018

Kültür Kaynağı
Bumerang - Yazarkafe

Facebook

Bloga e-posta ile abone ol

Bu bloga abone olmak ve e-posta ile bildirimler almak için e-posta adresinizi girin.

Diğer 358 aboneye katılın




Tüm Hakları Saklıdır.Copyright © 2014 | Antalya Etkinlikleri

Hacker Saldırılarından Korunma Yöntemleri
SpaceX 60 İnternet Uydusunu Uzaya Gönderdi