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

Yorumlar

Transkript

Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
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.
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>
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
1
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
<div class="footer1"></div> <!-- pembe renkli kare -->
<div class="footer2"></div> <!-- turuncu renkli kare -->
</div>
</body>
css dosyasını adım adım yazıyoruz:
body {
font: 12px/12px Verdana, Geneva, sans-serif;
color: #666;
margin: ;
background-color:#1A1A1A;
}
.container {
width: 766px;
margin: auto;
}
.kolon_sol {
width: 336px;
float: left;
background-color:#FC0;
height: 753px;
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
2
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
}
.kolon_sag {
width: 430px;
float: left;
background-color:#F90;
height: 753px;
}
iki kolon için ekran çıktısı:
CSS kodu yazımımız ilerledikçe sitemizin iskeleti daha çok çıkmakta:
body {
font: 12px/12px Verdana, Geneva, sans-serif;
color: #666;
margin: ;
background-color:#1A1A1A;
}
.container {
width: 766px;
margin: auto;
}
.kolon_sol {
width: 336px;
float: left;
background-color:#FC0;
height: 753px;
}
.kolon_sag {
width: 430px;
float: left;
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
3
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
background-color:#F90;
height: 753px;
}
.footer1 {
height: 220px;
background-color:#6FF;
}
.footer2 {
height: 66px;
background-color:#CC3;
}
HTML kodumuza eklemeler yapıyoruz.
<div class="container">
<div>
<div class="kolon_sol"></div>
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
4
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
<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>
<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>
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
5
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>
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
6
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
</div>
<div class="footer2">
<div style="background-image:url(images/01_home_24.jpg) ; width:766px; height: 66px;"></div>
</div>
</div>
</body>
Bir Başka Örnek:
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
7
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
Şu şekilde bir div yapısı tanımlıyoruz:
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
8
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
CSS Kodları:
.site_siniri { width: 960px; margin: 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>
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
9
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
<div class="sari_en_alt"></div>
</div>
</body>
www.dijitalders.com
Basit Bir Photoshop ile Yapılmış Web
Sayfası Nasıl Tasarlanır?
10

Benzer belgeler

Html Dersleri : Web Site Tasarımında DIV Kullanımı

Html Dersleri : Web Site Tasarımında DIV Kullanımı Aşağıdaki gibi bir DIV yapısına sahip iskeleti oluşturalım.

Detaylı

N2o5 lewis

N2o5 lewis Bangla choti golpo in bangla language December 09, 2015, 04:03 Remove by config the. LIKE because a true and the one pictured them they told me shaped our world view. n2o5 lewis Zerg rush grand nat...

Detaylı

Untitled - Eva Rosabella

Untitled - Eva Rosabella With the years of gained experience and following the changing consumer demands and the advances in technology, quality and great emphasis on customer satisfaction, continuous improvement and devel...

Detaylı

M.E.B. Dış İlişkiler Genel Müdürlüğü Yurt Dışı Burs Başvuru Sistemi

M.E.B. Dış İlişkiler Genel Müdürlüğü Yurt Dışı Burs Başvuru Sistemi bilgilerinizi girmeniz gerekmektedir. Başvuru bilgilerinizi zorunlu alanları girdikten sonra kısım  kısım da kaydedebilirsiniz. Her kayıt işleminden sonra 10 dakika süre yeniden   10 dakika içerisi...

Detaylı