Konular

Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?

Hazır bir PSD dosyasına göre HTML ve CSS kodlarını yazmak

Öncelikle PSD bir hazır tema buluyoruz. Bu temayı Photoshop Slice özelliğini kullanarak bölümlere ayırıyoruz.

Basit Bir Web Sayfası Nasıl Tasarlanır?

Bölümle yapısına göre sitemizin iskelet HTML kodunu yazıyoruz.

<body>

<div class="container"> <!-- kırmızı renkli kare -->

  <div><!-- yeşil renkli kare -->
    <div class="kolon_sol"></div> <!-- mavi renkli kare -->
    <div class="kolon_sag"></div> <!-- mavi renkli kare -->
  </div>
  <div style="clear:both"></div>

  <div class="footer1"></div> <!-- pembe renkli kare -->
  <div class="footer2"></div> <!-- turuncu renkli kare -->
</div>

</body>

 

Basit Bir Web Sayfası Nasıl Tasarlanır?

 css dosyasını adım adım yazıyoruz:

body {
        font: 12px/12px Verdana, Geneva, sans-serif;
        color: #666;
        margin: 0;
        background-color:#1A1A1A;
}
.container {
        width: 766px;
        margin: 0 auto;
}
.kolon_sol {
        width: 336px;
        float: left;
        background-color:#FC0;
        height: 753px;
       
}
.kolon_sag {
        width: 430px;
        float: left;
        background-color:#F90;
        height: 753px;
}

  iki kolon için ekran çıktısı:

Basit Bir Web Sayfası Nasıl Tasarlanır?

CSS kodu yazımımız ilerledikçe sitemizin iskeleti daha çok çıkmakta:

body {
        font: 12px/12px Verdana, Geneva, sans-serif;
        color: #666;
        margin: 0;
        background-color:#1A1A1A;
}
.container {
        width: 766px;
        margin: 0 auto;
}
.kolon_sol {
        width: 336px;
        float: left;
        background-color:#FC0;
        height: 753px;
       
}
.kolon_sag {
        width: 430px;
        float: left;
        background-color:#F90;
        height: 753px;
}
.footer1 {
        height: 220px;
        background-color:#6FF;
}
.footer2 {
        height: 66px;
        background-color:#CC3;
}

Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?

 HTML kodumuza eklemeler yapıyoruz.

<div class="container">

  <div>
    <div class="kolon_sol"></div>
    <div class="kolon_sag"></div>
  </div>
  <div style="clear:both"></div>

  <div class="footer1">
        <div style="background-image:url(images/01_home_23.jpg); width:766px; height: 226px;"></div>
  </div>
  <div class="footer2"></div>
</div>

 

Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?

<body>
<div class="container">
  <div>
    <div class="kolon_sol">
      <div style="background-image:url(images/01_home_01.png); width:336px; height:109px;"></div>
      <div style="width:335px; height:192px ; background-color:#00c8f6"></div>
      <div style="width:335px; height:184px ; background-image:url(images/01_home_04.jpg)"></div>
      <div style="width:335px; height:268px ; background-image:url(images/01_home_21.gif)"></div>
    </div>
    <div class="kolon_sag"></div>
  </div>
  <div style="clear:both"></div>
  <div class="footer1">
    <div style="background-image:url(images/01_home_23.jpg); width:766px; height: 226px;"></div>
  </div>
  <div class="footer2"></div>
</div>
</body>

Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?

<body>
<div class="container">
  <div>
    <div class="kolon_sol">
      <div style="width:336px; height:109px; background-image:url(images/01_home_01.png);"></div>
      <div style="width:335px; height:192px ; background-color:#00c8f6"></div>
      <div style="width:335px; height:184px ; background-image:url(images/01_home_04.jpg)"></div>
      <div style="width:335px; height:268px ; background-image:url(images/01_home_21.gif)"></div>
    </div>
    <div class="kolon_sag">
      <div style="width:431px; height:301px; background-image:url(images/01_home_02.jpg); "></div>
      <div style="width:431px; height:184px; background-image:url(images/01_home_20.jpg); "></div>
      <div style="width:431px; height:268px; background-image:url(images/01_home_22.jpg); "></div>
    </div>
  </div>
  <div style="clear:both"></div>
  <div class="footer1">
    <div style="background-image:url(images/01_home_23.jpg); width:766px; height: 226px;"></div>
  </div>
  <div class="footer2">
    <div style="background-image:url(images/01_home_24.jpg) ; width:766px; height: 66px;"></div>
  </div>
</div>
</body>

 

Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?

Bir Başka Örnek:

Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?

Şu şekilde bir div yapısı tanımlıyoruz:

Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?

CSS Kodları:

.site_siniri { width: 960px; margin:0 auto; }
.turuncu_banner { width: 960px; height: 120px; background-color: orange; }
.parlak_yesil_icerikler { width: 960px; height: 350px; background-color: greenyellow; }
.sari_en_alt { width: 960px; height: 80px; background-color: yellow; }
.mavi_sol_menu { float:left; width: 260px; height: 350px; background-color: cornflowerblue; }
.mor_sag_icerik { float:left; width:700px; height: 350px; background-color: blueviolet; }
.acik_mavi_icerik_ust { height: 200px; background-color: deepskyblue; }
.acik_mor_icerik_alt { height: 150px; background-color: deeppink;  }
 

  HTML Kodları:

<body>

        <div class="site_siniri">

            <div class="turuncu_banner"></div>

            <div class="parlak_yesil_icerikler">

                <div class="mavi_sol_menu"></div>
                <div class="mor_sag_icerik">
                   
                    <div class="acik_mavi_icerik_ust"></div>
                    <div class="acik_mor_icerik_alt"></div>
                   
                </div>

            </div>
            <div style="clear: both"></div>

            <div class="sari_en_alt"></div>

        </div>

    </body>
Yorumunuzu Ekleyin

Web Tasarımı Yaparken Kullanılan Programlar

Her programcının ve her web tasarımcının kendi özel alet çantası olmakla birlikte , genel olarak web tasarımında kullanılan web tasarımcıların en çok tercih ettiği program isimlerini burada sizlerle paylaşağım.

39,764 Okunma Henüz yorum yapılmamış 24/09/2012 09:07:04

Web Sayfası Tasarım Hataları

Deneyimler neticesinde oluşturulmuş bir liste

24,831 Okunma Henüz yorum yapılmamış 18/10/2007 02:24:10 15/12/2013 01:42:24

Web Siteleri Nasıl Çalışır

Hosting ya da daha Türkçe karşılığıyla "Barındırma", web sayfalarınızı internet'te yayınlamak için gerekli alanın kiralanmasıdır. Diğer bir ifade ile, Hosting, bir web sitesinde yayınlanmak istenen sayfaların, resimlerin veya dokümanların internet kullanıcıları tarafından erişebileceği bir bilgisayarda tutulmasıdır.

20,423 Okunma Henüz yorum yapılmamış 26/09/2012 00:12:17 15/03/2015 00:14:09

Domain ve Hosting Nedir?

Domain, Hosting ve Subdomain nedir?

14,811 Okunma Henüz yorum yapılmamış 15/02/2014 17:16:09 15/02/2014 17:18:50

Domain Nasıl Alınır?

onlinenic ve natro host firmalarından domain alımı için hesap oluşturma

14,080 Okunma Henüz yorum yapılmamış 11/02/2014 15:30:30 12/02/2014 15:41:44

Reverse DNS ve PTR Kaydı

DNS türlerinden bir tanesi de PTR kaydıdır, RDNS(Reserve Domain Name System) olarak ta adlandırlır.

11,053 Okunma Henüz yorum yapılmamış 24/11/2015 02:46:12 01/08/2020 14:18:37

Web Sitesine Sohbet İçin Bir WhatsApp düğmesi Ekleme

WhatsApp Business'ı kullanmanın dünyadaki 1,5 milyardan fazla kişiyle iletişim kurmanıza izin vereceğini okumuş olmalısınız, ancak gerçek şu ki, bu potansiyel müşterilere ulaşmak için, işinizle iletişim kurmaları için onları motive etmek için mevcut her kanaldan yararlanmanız gerekir.

1,588 Okunma Henüz yorum yapılmamış 11/12/2019 18:09:47

Yükleniyor...