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>

19,450 Okunma Henüz yorum yapılmamış 30/12/2013 17:08:49 01/01/2014 18:14:07

Yorumunuzu Ekleyin
Görsel Liste


Web Tasarımında Dikkat Edilmesi Gereken Temel İlkeler

Bir webmaster bir web sitesi tasarlarken aşağıdaki kurallara mutlaka dikkat eder.

44,011 okuma, 29/11/2024

Web Tasarımında Dikkat Edilmesi Gereken Temel İlkeler
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.

41,934 okuma,

Web Tasarımı Yaparken Kullanılan Programlar
Web Sayfası Tasarım Hataları

Deneyimler neticesinde oluşturulmuş bir liste

26,509 okuma, 15/12/2013

Web Sayfası Tasarım Hataları
Bir Web Sitesinde Olması Gerekenler

Bir web sitesi tasarlarken aşağıdaki kurallara dikkat etmek gerekir.

24,745 okuma,

Bir Web Sitesinde Olması Gerekenler
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.

22,868 okuma, 15/03/2015

Web Siteleri Nasıl Çalışır
Domain ve Hosting Nedir?

Domain, Hosting ve Subdomain nedir?

16,488 okuma, 15/02/2014

Domain ve Hosting Nedir?
Domain Nasıl Alınır?

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

15,674 okuma, 12/02/2014

Domain Nasıl Alınır?
Bulut Sunucu (Cloud Web Hosting) nedir?

15,384 okuma, 30/12/2013

Bulut Sunucu (Cloud Web Hosting) nedir?
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.

13,101 okuma, 01/08/2020

Reverse DNS ve PTR Kaydı
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.

3,822 okuma,

Web Sitesine Sohbet İçin Bir WhatsApp düğmesi Ekleme
Web Geliştirmede Kullanılan En İyi 5 Programlama Dili


Web Geliştirme! Bazılarını heyecanlandıran, bazılarını korkutan bir sözdür. Web geliştirmede kullanılan en iyi 5 programlama dili konusunda size rehberlik edeceğiz, böylece başlamak için hangi dilleri bilmeniz gerektiğini bileceksiniz. Bir geliştiricinin bir web sitesi tasarlamasına ve tasarımlara işlevsellik eklemesine yardımcı olan tüm programlama dillerinden bahsedeceğiz. Ana web geliştirme dillerine ve birbirleriyle karşılaştırıldığında nasıl durduklarına ayrıntılı bir şekilde bakalım.

998 okuma,

Web Geliştirmede Kullanılan En İyi 5 Programlama Dili
XAMPP Nasıl Kurulur?

Xampp hakkında kısaca bilgi verildi.Görsel desteğiyle nasıl kurulacağı anlatıldı.

959 okuma,

XAMPP Nasıl Kurulur?
Programlama Teknolojilerinin Karşılaştırmalı Analizi

Node.js, Java, Python, C# ve PHP

502 okuma, 13/09/2024

Programlama Teknolojilerinin Karşılaştırmalı Analizi
Web Sayfası Zenginleştiricileri

451 okuma, 29/11/2024

Web Sayfası Zenginleştiricileri
Yükleniyor...
    Yükleniyor...