2inci adım yeni tasarımcılar için

loveangel
August 16, 2006
0 Yorumlar
3.7K Görüntüleme

Merhaba arkadaslar;
Bir önceki yazımda (http://ultima-strike.com/sayfa.php?id=2464 , http://ravenloftuo.com/webdersleri1.rar , http://efedemirci.com/webdersleri1.rar) temel bir tasarım nsl yapılır ondan bahsettim. Tabi tasarımı yaparken bir sürü terimler duyuyoruz. Örn: html, php, asp, javascript ws.. Bu terimlerin anlamlarından biraz bahsedeyim. Html explorer 'ın anladıgı bir bir işaret dilidir. Yani yaptıgımız tasarımları html üzerinde yaparsak kaydettigimizde bilgisayarımıza explorer seklinde kaydeder. Mesela sayfamızın adı deneme olsun kaydettigimizde deneme.html olucak we internet explorer olarak gözükür. Bizde böylece yaptıgımız herseyi kendi bilgisayarımızdan görebiliriz. Bu demek oluyorki html makine üzerinde calısabilen bir web uznatısıdır. Pekiya aynı işlemi php üzerinde yaparsak ne olur? Aynı tasarımı bos bir php sayfasının içine attık we kaydettik. Sayfamızın adı gene deneme.php bu sefer yaptıgımız tasarım dreamweaver seklinde cıkıcak. Ve ona bastıgımızda direk dreamweaver acılcak yani yaptıgımız tasarımı web seklinde göremeyecegiz. Burdan anlıcagımız gibi php web üzerinde calısan html ise kendi bilgisayarımızda calısan bir web uzantılarıdır. Php dosyasını bir weritabanına yani bir serwera koymassanız göremezsiniz. Html'in tam tanımı bir sayfa üzerinde düzendir. Yani demek istedigim sayfasının surasına su gelicek burasına bu imaj gelicek buraya sutablo gelicek gibi bu seyleri html ayarlar. Php web üzerinde calısır dedik. Ama calısırda html'e göre tek farklı o değildir:) Yani web üzerinde calısmasının avatajları war. Mesela php htmle göre daha akıllıdır. Bir iletişim formu düşünün. Yani bu forma doldurdugunuz bilgileri php alır size mail olarak web üzerinden getirir. Ama html bunu yapamaz. Gelelim diger terimlerin tanımına pekiya asp nedir? Aspde aynı php gibi web üzerinde calısan biz uznatıdır. Yapabildikleri hersey aydır. Peki ya aralarındaki fark ne diye sorucak olursa yazılım dilleri farklıdır. Kodları farklıdır. Pekiya javascript nedir? Javascript bir internet sayfası yenilenmeden akılınza gelebilecek herseyi yapmanızı sağlayan bir yazılım dilidir. Yani sayfa yenilenmeden neler olabilir derseniz kısacası hersey diyebilirim:) İlk olarak bir butona basarsınız bütün yazı fontları değişir yazı renkleri değişir. Backround rengi değişir. Javascriptin en cok hosuma giden yanlarından birisi extensiondur. Mesela bir butona basarsınız. Yukarı dogru weya o burondan asagı dogru secenekler cıkar. Aynı bilgisayarınızın baslat menüsü gibi fakat javascript bunların saydam cıkmasını sağlar yani alttaki imajı weya rengi görebilirsiniz. İlerki yazılarımda javascript kodlarını nsl yazılacagını phpleri xhtmlleri zamanı geldikce anlatıcam. Şimdi genelde tasarımcılar arasında benim sitemi caldı gibi bir olay wardır. Bu yanlıs bir terim. Sitemi kullandı deseler daha dogru olur. Cünkü html sayfaları dedigim gibi makina üzerinde calısıtıgı için (web üzerinde değil) Size sayfayı acınca o html sayfasını bilgisayarınıza indirmiş bulunuyorsunuz. (Gecici süreligine) Yani siz yaptıgınız tasarımı adamlara zaten kendi elinizle weriyorsunuz. Web üzerinden biri gelip almıyor. Fakat php böyle değildir. Yani phpde hzrladıgınız bir form örnegin baskası tarafından kullanılamaz. Sadece tasarımını kullanır onuda zaten dedigim gibi düzeni html saglıyor. Nasıl sağladıgını html kodlarına hafif deyinerek anlatıcagım.
Html Kodlarının Tanımı:
Bir sayfanın html olup olmadıgını nsl anlarız?
İlk olarak htmlle baslar htmlle biter:)
Örn: <html> </html>
/ işareti o baslıgın kapandıgını gösterir.
Her html sayfası <html> ile baslar </html> ile biter. İşte burdan Html oldugunu anlayabiliriz. Veya daha kolayı direk uzantısına bakın:)
bu baslıkların arasındada baslıklar wardır.
Bos bir html sayfası kodları:

<html>
<head>

<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Bu bos bir sayfadır. Bunu yazış amacım aradaki diger baslıkları görmenizi saglamaktır. Dikkat ederseniz hepsi belli bir sıraya göre gitmektedir.

<html>

acılmıs sonra

<head>

arasinda title baslıgı war. (title baslıgı arasına yazılan hersey baslat menüsünün yanında cıkan sayfa adıdır.)(tabiyki head arasında sadece title yoqtur. Bu bir bos sayfa oldugu için böyledir. İlerde içinde neler olabilecegini bagsedicegim.) Sonra

</head>

kapanır.
Ardında <body> acılır we kapanır

</body>

ve sayfa biter html kapanır.

</html>

Html baslıklarının arasına hangi kodlar girer:

<html>
<head>

Burda Styleler vardır. Yani direk style die bir baslık daha acılır

içine renkler fontlar aklınıza ne gelirse girer. Tabi siz her her yazıya farklı font wermek istiyorum derseniz ayrı ayrı styler olusur. Ve adlarını html kendi koyar örn: style 1 die yeni bir baslık acar içine koyar fontu rengi ws.
buraya sadece styleler gelmez örnegin bir javascript kodalrınıda buraya yazabilirsiniz. Ama bodyede yazabilirsiniz. Fakat genelde buraya yazılır. Cünkü ilk olarak scriptten ne yapılcagına karar werilip sonra bodyde yerlestirilir. O nedenle daha cok head baslıkları arasına yazılır. Javascript
yazarken direk bu baslıgın içine

<script> ..... </script>

olmak üzere baslık acılır ve arasına javascrit kodları eklenir.
Gene bu kısma link kodları eklenir. Yani dreamweaverda bunu deneyebilirsiniz. Örnegin ctrl+j yapıp ordan her seyi ayarlyının sonra code kısmına bakın html otomatik olarak oraya acıcaktır.

<title>Untitled Document</title>
</head>

<body>

Bu kısmın içinde ise photoshopta yaptıgımız imajları kopyaladıgımızda buraya kaydolur. Actıgımız herhangi bir tablo ve içinde yazan yazılar resimle bile burda gözükür. Yani siz entera bile bassanız orda <br> die gözükür yani paragraf atladıgınız direk kodlara yansır. Siz tasarımda herseyi yapıyorsanız sitede yaptıgınız en ufuk bişey direk kodlara yansır. Bu kısımda hep imajlar ve tablolar wardır. Bazen javascript kodlarınada rastlaya bilirsiniz.

</body>
</html>

Not:Bu aradaki kodların ne olduklarını ne işe yaradıklarını ilerki yazılarımda tek tek anlatıcagım.

Güzel bir sitede olması gerekenler:
1. Güzel bir imaj
2. Javascriptte yapılmıs butonlar
3. Sitenin amacına uygun güzel bir logo
4. Kaliteli photoshop fırcalarıyla imajları sekillendirme
5. Photoshopta imaja drop shadowda sekil verme
6. Düzgün renk üstüne kaliteli patternler
7. Gereken imajlara güzel renkte stroke verme
8. Özel Dreamweaver ekleri(scroll ekleme , equiv = marque ws. )

Burdanda analsıldıgı gibi güzel bi tasarım istiyorsanız kodlardan önce photoshop bilginiz cok güzel olmalıdır. Tekrar söylüyorum ekstra kaynaklar için
http://ravenloftuo.com/PhotoShopBook.rar
http://ravenloftuo.com/dwuygulama.rar

veya,
http://efedemirci.com/PhotoShopBook.rar
http://efedemirci.com/dwuygulama.rar

adreslerinden pdflere ulasabilirsiniz.

photoshopta yapmanız gerekenleri bilginiz we bir web sitesi mantıgınız tamamen oturunca sizlere anlatıcagım. Bu yazıdaki amacım html kodlarının ne işe yaradıgını we web uzantılarının ne oldugunu sizlere anlatmaktır.
Tasarım acısından dreamweverın bi özellgi yoqtur. Sadece photoshopta hazıraldıgımız imajları tablolara yerlestirmek için ve özel kodlar eklemek içni kullanırız. Yani mesala bi scrool ekleyelim.

<IFRAME width=510 height=308 frameBorder=0  name="www.efedemirci.com" src="aciklama.html" ></IFRAME>

şimdi bu kod bir tablonun içine koyulur. Bende tabloyu 510a 308 actıgım için kodları böyle yaptım. Bunu değiştirebiliriz. Şimdi gelelim htmlden body kısmına. Dedigim gibi tablo ordan yapılır.


<tr>
    <td width="479"><img src="images/anasayfa_06.jpg" width="479" height="308"></td>
    <td width="510"><IFRAME width=510 height=308 frameBorder=0  name="www.efedemirci.com" src="aciklama.html" ></IFRAME></td>
  </tr>

şimdi ben size kendi yaptıklarımı anlatayım. İlk olarak söyle bir tablo actım:

rows:1 columns:2
table width: 989
border thickness:0
cell padding :0
cell spacing :0
ve photoshopta hazırladıgım bitane 479 eninde bir imajım war. İlk olarak tablonun ilk kısmına imajımı kopyaladım. Ve yanda olan tablo ucunu imaja dogru cektim. (1. yazıda anlattıgım gibi) Daha sonra yandaki tablom 510eninde oldu. Ve imajım oraya kendi boyunu koydugu için 308lik bir boy actı. Bende bos tablomu sectim ve code kısmını actım içine ölçülerinin aynı olmasını saglamak için o tablonun ölçülerini verdim. Ve scroolu ekledim. Fakat yazıları nereye yazıcaz die bir soru aklınıza takılabilir:) Dikkat ettiyseninz o tablo kısmına baska bir dosya cagrıyorum. aciklama.html dosyasını. Bu demek oluyorki o sayfaya yazıları yazıcagız. Tabi o sayfanın içine yazı yazıcazda belli bi kuralı war. Mesela ordada bir tablonun içine yazı yazıcaz ve bu tablo 510 eninde olmak zorundadır. Cünkü scrool kodu koydugumuz yer 510 enindedir. Ve Yazacagımız yazının 308 boyundan büyük olması gerekirki scroll acılsın yazıları asagıya dogru cekelim;) aciklama.html sayfasına 510 eninde tablo acıp uzun bir yazı yazdıktan sonra o sayfada gene ctrl+j yapıp backroundu we yazı rengini büyüklügünü boldunu ayarlıyabilirsiniz. Bunlar gereklidir. Cünkü Bu kodu verdigimiz yerde o sayfadaki tablo tamamen cıkıcaktır. O nedenle bu kodu verdigimiz sayfadaki renklerle uyumunada dikkat ediniz. Aslında tablo boylarının aynı olmasına gerek yoq. Eger Daha büyük olursa alttanda scroll cıkıcak ve okunması bozukucak. Öylede deneyebilirsiniz. Fakat bana göre tek scroll herzaman daha ii durmustur. (zewkler ve renkler tartısılmaz)

Bir sornaki yazımda olucaklar:
Photoshopun püf noktaları
Dreamweaver tam anlamıyla nasıl kullanılır.
Basit javasript kuralları ve javascript için özel yardımcı program
İlk sitemizi yapalım

e-mail
[email protected] & [email protected]