Güven Atbakan | Kişisel Blog » Tasarım http://www.guvenatbakan.net Bir başka coder bloğu Thu, 09 Sep 2010 11:40:43 +0000 en hourly 1 http://wordpress.org/?v=3.0 Temel HTML Tasarımı ve İlk Aşama ASP Örnekleri http://www.guvenatbakan.net/2009/11/17/temel-html-tasarimi-ve-ilk-asama-asp-ornekleri/#utm_source=feed&utm_medium=feed&utm_campaign=feed http://www.guvenatbakan.net/2009/11/17/temel-html-tasarimi-ve-ilk-asama-asp-ornekleri/#comments Tue, 17 Nov 2009 17:48:04 +0000 Güven Atbakan http://www.guvenatbakan.net/?p=271 Bu içerik forum.ceviz.net adresine merakli tarafından gönderilmiştir. Birebir alıntıdır. Güzel bir kaynak olduğu için paylaşma gereksinimi duydum :)

Konu : Sayfa Çözünürlüğü (Html)

Çok güzel sayfalar yapabilirsiniz, Elinizde çok güzel içerikler bulunabilir ancak bunları sağa sola kayan ya da sayfa ve tablo düzeni olmayan bir halde sunmak etkiyi azaltır. Göze hoş gelmez.

Burada yapmak istediğimiz kısaca şu;

  • Üst ve sol tarafta default olarak verilen boşlukları css margin:0px ve padding:0px kodları ile sıfırlayacağız. Böylelikle sayfa alanımız genişlemiş olacak
  • %100 uzunlukta bir tablo açacağız. Böylece her çözünürlüğe göre bu tablo şekil alacak.
  • %100 değerli tablonun içerisine 779 pixel uzunluğunda/genişliğinde sabit bir tablo oluşturacağız.
  • Sabit tabloyu (779px) dinamik tablo(%100) içerisinde ortada ya da isteğe göre sol ya da sağa doğru yaslayıp içerisine sitemizi oluşturacağız.

Şimdi merhale merhale html kodlarımızı oluşturalım. Notpad dışında editör kullanmamanızı şiddetle öneririm.

En basit hali ile html kodlarımız. Bu iskeleti oluşturuyor.

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

kullandığımız html kodlarının versiyonunu belirtiyoruz. HTML 4.01

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Bir Html sayfası bu iki kod arasında yazılan diğer html tagları ile oluşturulur.

Kod:
<html>
</html>

<head></head> arasına sayfa ile ilgili ayar kodlamaları yazılır. Örneğin <title>Deneme Sayfası</title> sayfanın başlığını gösterir. Bu yazı “Deneme Sayfası” açılan sayfamızın durum çubuğunda (Status bar) görünmesini sağlar. Sayfayı farklı kaydettiğimizde sayfanın adının oluşturulmasında kullanılır….

Kod:
<head>
<title></title>
</head>

<body></body> bu iki tag arasına yazılanlar sayfa içeriğini oluşturur.

Kod:
<body>

</body>
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
</head>
<body>

</body>
</html>

Sayfamızda Türkçe Karakterlerin doğru bir şekilde görünmesini sağlar. Mutlaka her sayfada <head></head> tagları arasında yazılmalıdır.

Kod:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">

şimdi <body></body> tagları arasında sayfamızı ve sayfamızın-sitenin iskeletini oluşturmaya başlayalım.

Sayfa uzunluğu/genişliği %100 değeri ile verilmiş dinamik bir tablo

Kod:
<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td></td>
 </tr>
</table>

kısaca açıklayayım
border=”1″ tabloya 1px lik çerçeve verir. Normalde bunu border=”0″ olarak yapacağız. Ancak sayfada yaptıklarımızı görebilmemiz açısından 1 değerini veriyoruz.
cellpadding=”0″ cellspacing=”0″ ile çerçevelerin kenarlarında boşluk vermeyeceğimizi belirtiyoruz siz bu değerleri oynayarak ne ğibi değişiklikler yaptığını deneyebilirsiniz..
width=”100%” uzunluk sayfayı açan kişinin ekran çözünürlüğüne eşit demektir.

Kod:
<table border="1" cellpadding="0" cellspacing="0" width="100%">
</table>

Satır oluşturur

Kod:
<tr>

</tr>

Sutun/hücre oluşturur.

Kod:
<td></td>

şimdi de 779px genişliğinde sabit bir tablo oluşturalım.

Kod:
<table border="1" cellpadding="0" cellspacing="0" width="779">
 <tr>
  <td></td>
 </tr>
</table>

Tablolama mantığı konusunda da biraz bilgi verirsek ilk yaptığınız tablo hücresi içine diğer tabloyu yazacaksınız. Editörlerin doldurduğu bir sürü anlamsız kodlardanda kurtulmuş ve sadece gerekli olan kodların olduğu tertemiz bir kodlamaya sahip olmuş olacaksınız.
Mantığı şu
her zaman <table> tagından sonra <tr> gelir. <tr> tagından sonra her zaman <td> gelir. <td> tagından sonra bir tablo daha eklemek istiyorsanız <table> tagı sonrada <tr> ve <td> gelir. Elbette açılma sırasına göre bunları kapatmamızda gerekiyor.

Kod:
<table>
 <tr>
  <td>
   <table>
    <tr>
     <td></td>
    </tr>
   </table>
  </td>
 </tr>
</table>

Dinamik tablomuz ile sabit tablomuzu iç içe yazabiliriz.

Kod:
<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   <table border="1" cellpadding="0" cellspacing="0" width="779">
    <tr>
     <td>&nbsp;</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

bundan sonra sitemizi inşa edeceğimiz alanın sol, orta ya da sağa dayalı mı yapacağımıza karar vereceğiz. Sola dayalı yapacaksanız hiç bir şey yapmanıza gerek yok ancak ortada ya da sağda olmasını istiyorsanız sabit 779px lik tabloyu içine alan hücre <td> de bunu belirtmemiz gerekecek. <td align=”center”> gibi..
left : sola hizalı yapar
center : ortaya hizalar.
right : sağa hizalar.

son hali şu şekilde ancak her şey bitmiş değil.

iskeleti oluşturmaya devam edelim.

bir sayfada genel olarak üst orta ve alt bölümler olmak üzere 3 satırdan oluşur.

  1. Üst bölüm banner alanı olarak kullanılabilir.
  2. Orta bölümde kendi içinde iki bölüm/sütundan oluşur. Sol tarafta linkler ve sağ tarafta da sayfa içeriği bulunur.
  3. Alt Bölümde ise linkler ve copyrigth kısmı bulunur.

3 ana satırı ekleyelim.

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
 margin:0px;
 padding:0px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td align="center">
   <table border="1" cellpadding="0" cellspacing="0" width="779">
    <tr>
     <td>üst</td>
    </tr>
    <tr>
     <td>orta</td>
    </tr>
    <tr>
     <td>alt</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

</body>
</html>

görünüm

2. Satır yani orta bölüm iki sutundan oluşuyordu. Bu sütunların sağda olanı genelde menü/link alanı sağ tarafta ise içerik bölümü yer alır. Kodumuza bunu ekliyorum.

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
 margin:0px;
 padding:0px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td align="center">
   <table border="1" cellpadding="0" cellspacing="0" width="779">
    <tr>
     <td height="170">Üst Bölüm</td>
    </tr>
    <tr>
     <td>
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
       <tr>
        <td width="179" valign="top">Sol Menü Bölümü</td>
        <td width="600" valign="top" height="400">Orta İçerik Bölümü</td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td height="25">Alt Bölüm</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

</body>
</html>

Görünümü,

Html bölümü bitti artık orta içerik kısmının içine yeni tablolar açarak istediğiniz içeriği yazabilirsiniz. Çözünürlük bozulmayacaktır.
Ancak konunun asp ile ilgisi bundan sonra başlıyor. Hemen bir alt konuda asp include yöntemi ile bunu nasıl düzenleyeceğinizi anlatacağım.

Konu : İclude Yöntemi
Seviye : Basit
Kaynak Dosyalar : http://rapidshare.com/files/6194416/include.rar.html

Genel olarak sayfanın 3 satırdan oluştuğunu (1. satır : Üst Bölüm, 2. satır : Orta Bölüm, 3. satır : Alt Bölüm) ve 2.satır’ın yani Orta bölümünde kendi içinde 2 sütundan (1. sütun : Menü/Link Bölümü, 2. sütun : Sayfa İçerik Bölümü) oluştuğunu söylemiştik.

Sayfa İçerik Bölümü dışında kalan bölümler pek değişmez sabit alanlardır. Bunları HTML ile her sayfada yapmak zorundayız. Ancak Asp de bu sayfaları ayrı sayfalar olarak yapar ve bunları kullanılacağı alanlarda include file yöntemi (bunun dışında include virtual ve server.execute yöntemleri var ancak biz burada onlara değinmeyeceğiz.) ile çağırırız.
Bu bize ne kazandırır.
Örneğin Üst bölümde bir banner var ve sitemizde toplam 50 sayfa olsun ve biz bu banneri değiştirecek olalım ozaman tüm bu 50 sayfayı tekrar tekrar düzenlememiz gerekir. Oysa bu sayfayı asp ile bir defa yapıp tüm sayfaların üstüne include ile eklersek bir sayfayı değiştirmekle tüm sitede bu değişikliği kazandırmış oluruz. Zaten sunucu taraflı (asp/php vb.) gibi dillerin önemide buradan kaynaklanmaktadır. Bu bize işlem yoğunluğunu azaltmamıza ve interaktif bir yapıya sahip olmamıza olanak sağlar.

Kullanacağımız kod “” çift tırnak içine çağıracağımız asp dosyasını yazıyoruz.

Kod:
<!--#include file="" -->

kodlamayı bir önceki derste anlatılan son html kod üzerinden devam ederek geliştireceğim.

bir önceki derste ki kodumuzun sayfa içeriği kısmına bir tablo daha ekleyerek devam edelim.

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
 margin:0px;
 padding:0px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td align="center">
   <table border="1" cellpadding="0" cellspacing="0" width="779">
    <tr>
     <td height="170">Üst Bölüm</td>
    </tr>
    <tr>
     <td>
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
       <tr>
        <td width="179" valign="top">Sol Menü Bölümü</td>
        <td width="600" valign="top">
         <table border="1" cellpadding="0" cellspacing="0" width="100%">
          <tr>
           <td height="400">Sayfa İçeriği Bölümü</td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td height="25">Alt Bölüm</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

</body>
</html>

Sayfamız 3 satırdan oluşuyordu ve 2. satır 2 sütundan oluşuyordu.
Şimdi bu kodu ben yine 3 parçaya böleceğim ve üç ayrı asp sayfası olarak kaydedeceğim.

include edilen sayfalar olduğunu belirtmek için inc ekleyeceğim başına.

1. asp sayfamız
inc_ust.asp (üst bölümü ve menü/link bölümünü içerecek)
2. asp sayfamız
default.asp (sayfa içerik bölümünü içerecek ve inc_ust.asp ile inc_alt.asp sayfaları include edilecek)
3. asp sayfamız
inc_alt.asp (alt bölümü içerecek)
edecek…

inc_ust.asp

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
 margin:0px;
 padding:0px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td align="center">
   <table border="1" cellpadding="0" cellspacing="0" width="779">
    <tr>
     <td height="170">Üst Bölüm</td>
    </tr>
    <tr>
     <td>
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
       <tr>
        <td width="179" valign="top">Sol Menü Bölümü</td>
        <td width="600" valign="top">

default.asp

Kod:
<!--#include file="inc_ust.asp" -->
         <table border="1" cellpadding="0" cellspacing="0" width="100%">
          <tr>
           <td height="400">Sayfa İçeriği Bölümü</td>
          </tr>
         </table>
<!--#include file="inc_alt.asp" -->

inc_alt.asp

Kod:
        </td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td height="25">Alt Bölüm</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

</body>
</html>

Sayfaları localhost a koyup default.asp i cağırın.

ADMIN GIRIS ORNEGI

admin girişi

kullanıcı adı : admin

şifre : admin

Asp ile temel dört işlemi tek bir sayfa ile yapabilirsiniz. Konuyu anlamanız için basit bir örnek yaptım.

Dört işlem :

  1. Veritabanından bilgileri sayfada göstermek
  2. Veritabanına yeni veriler eklemek
  3. Veritabanından veri silmek
  4. Veritabanından verileri güncellemek

http://rapidshare.com/files/81604626/islem.rar

ASP Son sistem (sayfalama + Hata Kontrolü + Güvenlik Kodu) ve Admin girişi örneği..

http://rapidshare.com/files/68957515/admin.rar

Admin girişi dışında normal kullanıcı tarafının ve admin girişi yaptıktan sonraki Kayıt linklerini ve içeriğini incelemeni öneririm.

normal kullanıcı tarafında kayıt linkinde yani kayit.asp de
Ülke ve şehir seçimleri yapınız Türkiye seçince illerin açılması diğer ülkelerde ise eyaletin yazılması için bir input form elemanının açılması aranılan bir özelliktir.

Doğum tarihi form elemanında ay ve günlerin yazdırılma şekline, ay gün ya da yıl alanıdoldurulmadığında hangi hataları verdiğine vb. bakılabilir…

Email kısmına hiç bir mail yazılmadığında mecbur doldurulması gerekmediği için hata vermediğine ancak mail yazılırda geçerli formatta olmazsa nasıl hata verdiğine…

Ad ve Soyada alfabe dışında karakter girilememesine ve küçükte yazılsa ismin baş harfinin hep büyük soyadının tüm harflerinin büyük kaydedilmesine…

Hangi sayfaların nasıl include yapılığına
Çözünürlüğün nasıl ayarlandığına
tek sayfada bu işlemlerin nasıl yapıldığına..
Hataların nasıl form elemanlarının hemen karşısına yazdırıldığına…
hata döndürme işlemine…

admin girişi yapıldıktan sonraki kayıt.asp de ise
Sayfalama işleminin yapılmasına
güncelleme işleminin şekline..
tek sayfada bu işlemlerin nasıl yapıldığına..

site ayarlar şifre değiştirme menülerinede bakılabilir…

]]> http://www.guvenatbakan.net/2009/11/17/temel-html-tasarimi-ve-ilk-asama-asp-ornekleri/feed/ 2 Onmouseover change picture http://www.guvenatbakan.net/2009/08/22/onmouseover-change-picture/#utm_source=feed&utm_medium=feed&utm_campaign=feed http://www.guvenatbakan.net/2009/08/22/onmouseover-change-picture/#comments Fri, 21 Aug 2009 22:24:05 +0000 Güven Atbakan http://www.guvenatbakan.net/?p=165 Merhaba arkadaşlar

Javascript kodu ile resmin üzerine gelindiğinde resmin değişmesini sağlayacağız. Bu özelliği menü yaparken kullanabilirsiniz. Daha önce yayınladığım neon parlama konusuna bakarak menü yapımınızı kolaylaştırabilirsiniz. Bknz: Neon Parlama Yazı Efekti @ Photoshop

</head> kodundan önce bu kodu ekleyin.

<SCRIPT TYPE=”text/javascript”>
function neon(node,num,over){
var how = “”;
if(over){
how = “over”;
}else{
how = “normal”;
}
var path = “images/menu/menu_” +  how + “_” + num + “.png”;
node.src = path;
}

function gopage(p){

switch(p){
case 1:
window.location = “#”;
break;
case 2:
window.location = “#”;
break;
case 3:
window.location = “#”;
break;
case 4:
window.location = “#”;
break;
case 5:
window.location = “#”;
break;
}
}
</SCRIPT>

<SCRIPT TYPE=”text/javascript”>
function neon(node,num,over){
var how = “”;
if(over){
how = “over”;
}else{
how = “normal”;
}
var path = “images/menu/menu_” +  how + “_” + num + “.png”;
node.src = path;
}

function gopage(p){

switch(p){
case 1:
window.location = “#”;
break;
case 2:
window.location = “#”;
break;
case 3:
window.location = “#”;
break;
case 4:
window.location = “#”;
break;
case 5:
window.location = “#”;
break;
}
}
</SCRIPT>

Buton kodunuz

<IMG SRC=”images/menu/menu_normal_02.png” onclick =”gopage(2)” onMouseOver=”neon(this,’02‘,true)” onMouseOut=”neon(this,’02‘,false)”>

Buton dosyalarınızın normal ismi, menu_normal_sayı.png(jpg,gif) olmalı. Neonlanmış ismi ise menu_how_sayı.png olmalı. Yukarıdaki buton kodunda sayıyı değiştirmeniz gerekmektedir. ayrıca gopage(2) komutu butonun linkidir. Bunuda javascript kodunda bulup değiştirebilirsiniz.

Dipnot: google bu buton linklerini takip etmez.

]]> http://www.guvenatbakan.net/2009/08/22/onmouseover-change-picture/feed/ 0 Neon Parlama Yazı Efekti @ Photoshop http://www.guvenatbakan.net/2009/08/22/neon-parlama-yazi-efekti-photoshop/#utm_source=feed&utm_medium=feed&utm_campaign=feed http://www.guvenatbakan.net/2009/08/22/neon-parlama-yazi-efekti-photoshop/#comments Fri, 21 Aug 2009 21:18:33 +0000 Güven Atbakan http://www.guvenatbakan.net/?p=156 Tamamiyle alıntıdır. Az önce bir çalışmamda kullandım. İşinize yarar diye düşündümve paylaştım.

Alıntı adresi: http://www.photoshop-tr.com/2007/neon-parlama-efekti/

Bu photoshop dersimizde, neon parlama efektini anlatacağım. 1-2 aşama olduğu için hiç zorlanmayacaksınız ve sonuca şaşıracaksınız.

1) İlk önce çalışma alanımızı açıyoruz. (ben 400*400 açtım.)

2) Çalışma alanımızın arkaplanını siyah yapıyoruz. Yazımızı beyaz renk ile yazacağız ama ondan önce buraya “angelina.zip”  tıklayıp fontumuzu bilgisayarımıza indiriyoruz. İndirdiğimiz dosyayı winzip ya da winrar gibi sıkıştırma programları ile açıp, içindeki angelina.ttf dosyasını c:/windows/fonts klasörüne kopyalıyoruz.

Ve yazımızı yazıyoruz..

neon1.gif

3) Layer > Duplicate Layer yolunu kullanarak katmanımızın kopyasını oluşturuyoruz.

Orjinal katmanımıza sağ tıklayıp, blending options’a tıklıyoruz ya da Layer > Layer Style > Blending Options yolunu kullanıyoruz. Açılan sayfada “stroke” sekmesine tıklayıp, aşağıdaki ayarları yapıyoruz. ( Rengimiz : #0299ff )

Ayarlar için tıklayın

4) Şimdi de “Outer Glow” sekmesine tıklıyoruz. Ve aşağıdaki ayarları yapıyoruz. ( Rengimiz : #0165c9 )

Ayarlar için tıklayın

Ve sonucumuz;

neon4.gif

İyi çalışmalar, kolay gelsin arkadaşlar..

]]> http://www.guvenatbakan.net/2009/08/22/neon-parlama-yazi-efekti-photoshop/feed/ 1