Web Tasarım Teknikleri

maChaRa · 14.05.2007

Neden Web Siteniz Olmalı?

*Bir Web sayfası sadece onu incelemek isteyen “hedef kitleye” ulaşır.
*Web sayfaları oluşturmak için tek masrafınız telefon hat ücreti olacaktır.
*Web sayfaları hazırlarken hayal gücünüzü olabilidiğince kullanabilirsiniz.
*Web sayfaları kolayca düzeltilip tekrar yayınlanabilir.
*Sayfalarınız zamanında etkisiyle yeniliklere uğrayacaktır.
*Web sayfalarınız 24 saat boyunca tüm dünyaya açık olacak ve internet kullanıcılarına “etkileşimli” bir hizmet verecektir.
*Web sayfalarını kullanıcıların fikirlerini ve beklentilerini öğrenmek için derleyebilirsiniz.
*Web sayfalarının kaderi diğer medyalar gibi çöp kutusunda sonlanmaz.

Web Editörleri ve İncelemeleri

Herşeyden önce size gerekecek olan program, kullanıcıların izleyeceği Web sayfalarınızı hazırlayacağınız bir programdır. Bu tip programlar ile site içinde yer almasını istediğiniz resimleri, yazıları ve bağlantıları istediğiniz biçimde bir Web Browser'ı tarafından izlenecek şekilde tasarlayarak biraraya getirebilirsiniz. Bunun için önünüzde Allaire Homesite,Microsoft Frontpage, Netscape Composer, Adobe PageMill, Macromedia DreamWeaver, HotDog Pro gibi birçok program alternatifi bulunuyor.

Bir Düzenleyici Hangi Özellikleri Desteklemeli

Kolay Kullanım
Site yönetimi ve dosyaların sunucuya kolayca aktarılması
HTML dışında da farklı dosya tiplerini tanıyabilme
Renkli kodlama
İyi bir dokümantasyon
Şablonlama ve proje desteği
Özelleştirebilme
CSS desteği

Bazı Düzenleyicilerin İncelemeleri

Microsoft Frontpage 2000/XP/2003:

Microsoft firmasının, kendi ürünü olan Word’e benzerliğiyle dikkat çeken, bu nedenlede birçok kullanıcıya kullanımı kolay gelen düzenleyicisidir. Word kullanan biri kolaylıkla Frontpage den html web sitesi yapabilir.Türkçe olması sebebi de iyi bir tercih sebebi olabilir

Artıları: Frontpage en başta kullanması ve öğrenmesi kolay bir düzenleyicidir.Ayrıca Microsoft’un ISS Web sunucusuyla tümleşmesi çok iyidir.Frontpage görsel arabilimi (tam olmasada WYSIWYG denebilir) sayesinde hiçbir HTML kodu yazmadan Web siteleri oluşturabilmeyi sağlar.

Eksileri: Frontpage, önceden sizin düzenlemiş olabileceğiniz kodları, tekrardan düzenlemekte çok ısrarcıdır.Bu nedenle sayfa kodlarına elle müdahale etseniz bile, bir sonraki açışınızda bu ince ayarların silinme olasılığı yüksektir.

Macromedia Dreamweaver:

Frontpage den daha ileri seviyede dir.ingilizcesine güvenenlerin Dreamweaver den başlamaları önerilir.

Artıları: Dreamweaver’ın ilk göze çarpan özelliği, görsel düzenleyiciler arasında en iyi tablolama desteğini sunmasıdır.HTML koduna fazla müdahale etmemesi,Asp ve php desteği blokların kolayca seçilebilmesi, seçilen etiketlerin nerdeyse tüm özelliklerinin kolayca ayarlanabilmesi, tümleşik FTP istemcisi ve site yönetimi,çok iyi DHTML ve Frame desteği, Internet üzerinden de yüklenebilen etiketlerle genişletilebilmesi, tabloları katmanlara, katmanları tablolara çevirebilmesi, rehber resim desteği, Homesite’la bütünleşme.

Eksileri: Homesite kadar iyi bir doğrudan HTML kodu yazımı olmaması ve maalesef sadece Windows ve MacOs’da çalışması.

Web Sayfalarının Tasarlanması

Yukarıda incelemesini yaptığımız birçok web editörü size HTML dilini bilmeden, HTML kodlarını kullanarak web sitesi yapma imkanı veriyor.Bu tip editörler sitenizde yaptığınız her adımı, otomatikman HTML koduna çeviriyor.
Peki o zaman neden HTML öğrenmelisiniz?HTML öğrenmelisiniz çünkü:
En basit neden; eğer iyi bir webmaster olmak istiyorsanız, ve HTML bilmeden sadece bu tür programları kullanmayı düşünüyorsanız, muhtemelen programın verdiği, programdan kaynaklanan en küçük bir hatada eliniz kolunuz bağlı kalacaktır.
Lisans gerektiren programlar: Birçok kaliteli "HTML çevirici" programını kullanmak için, o programın lisansına sahip olmanız gerekir. Ve bu da genelde büyük paralar gerektirir.

HTML Nedir?

HTML, Hyper Text Mark-up Language'ın kısaltılmışıdır. Türkçe karşılığı Hiper Metin İşaretleme Dili'dir. Browserlar tarafından tanınıp yorumlanabilen metin tabanlı bir dildir ve metnin browser tarafından yorumlanması sonucu da web sayfaları elde edilir. Yazdığınız kodların browser tarafından alınıp yorumlanabilmesi için, dosyalarınızın uzantısının ".htm" veya ".html" olması gerekir.
HTML de her işaretleme dilindeki gibi komutlardan oluşur, bu komutlara tag veya mark-up denir. Tag'ler herhangi bir metinden farklı oldukları browser tarafından anlaşılabilsin diye "<" ve ">" işaretlerinin arasına yazılır. Her tag'in bir başlangıcı ve bitişi vardır. Bitiş tag'lerinde, "<" işaretinden sonra tag'in bitiş tag'i olduğunu belirtmek için "/" işareti kullanılır. Bir örnek ile göstermemiz gerekirse;

Bu bir Paragraf tag'idir.

Temel Komutlar:

<HTML></HTML>
Tüm HTML dokümanını içine alan en temel tag'dir ve dokümanın HTML ile yazıldığını browser'a bildirir.
<HEAD></HEAD>
Bu tag'in arasına yazılan her şey, sayfanın tanımını oluşturur. Buna sayfanın başlığı da dahildir. Ayrıca meta takıları da bu tag'in arasına yazılır:

<TITLE></TITLE> : Sayfa başlığıdır. Bu tag'in arasına yazılan her şey sayfamızın ismi olacak ve başlık çubuğunda görüntülenecektir.

META Etiketi: Arama motorlarında iyi bir sıralama kapmak için meta etiketleri içerisine yazdığımız notlar çok önemlidir.
!Sayfanızda kullandığınız meta kelimeleri mutlaka sayfa içinde de geçmelidir.
Örneğin “Afyon Kocatepe Üniversitesi” sitesinin Meta etiketleri şöyle olabilir:
<META name=“keywords” content=“Afyon Kocatepe Üniversitesi,AKÜ,AKU,fakülteler,Yüksekokullar,Enst itüler,Akade
mik Takvim, Üniversite, afyon kocatepe university, Turkey, University,education,campus,Türkiye, academics, students, faculty>

Sayfanızda kullandığınız Türkçe karakterlerin başka bilgisayarda bozuk şekillerde görülmemesi için:
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1254”>

<BODY></BODY>
Sayfanın browser tarafından ekrana basılacak tüm kısımları bu tag'in arasına yazılır. Ekrana basılacak kısmın içine metinler, resimler, formlar, tablolar vs. girer.

<html>
<head>
<title>İlk Sayfam</title>
</head>
<body bgcolor="#e3e3e3">
Web sayfama hoşgeldiniz 
Web sayfama hoşgeldiniz 
Web sayfama hoşgeldiniz 
Web sayfama hoşgeldiniz 
Web sayfama hoşgeldiniz
<center>Web sayfama hoşgeldiniz</center> 
</body>
</html>

14.05.2007	#1 (permalink)
maChaRa ultrAslan Katılma Tarihi: Mar 2007 Nereden: izmir Mesajlar: 124	Web Tasarım Teknikleri Neden Web Siteniz Olmalı? Bir Web sayfası sadece onu incelemek isteyen “hedef kitleye” ulaşır. Web sayfaları oluşturmak için tek masrafınız telefon hat ücreti olacaktır. Web sayfaları hazırlarken hayal gücünüzü olabilidiğince kullanabilirsiniz. Web sayfaları kolayca düzeltilip tekrar yayınlanabilir. Sayfalarınız zamanında etkisiyle yeniliklere uğrayacaktır. Web sayfalarınız 24 saat boyunca tüm dünyaya açık olacak ve internet kullanıcılarına “etkileşimli” bir hizmet verecektir. Web sayfalarını kullanıcıların fikirlerini ve beklentilerini öğrenmek için derleyebilirsiniz. Web sayfalarının kaderi diğer medyalar gibi çöp kutusunda sonlanmaz. Web Editörleri ve İncelemeleri Herşeyden önce size gerekecek olan program, kullanıcıların izleyeceği Web sayfalarınızı hazırlayacağınız bir programdır. Bu tip programlar ile site içinde yer almasını istediğiniz resimleri, yazıları ve bağlantıları istediğiniz biçimde bir Web Browser'ı tarafından izlenecek şekilde tasarlayarak biraraya getirebilirsiniz. Bunun için önünüzde Allaire Homesite,Microsoft Frontpage, Netscape Composer, Adobe PageMill, Macromedia DreamWeaver, HotDog Pro gibi birçok program alternatifi bulunuyor. Bir Düzenleyici Hangi Özellikleri Desteklemeli Kolay Kullanım Site yönetimi ve dosyaların sunucuya kolayca aktarılması HTML dışında da farklı dosya tiplerini tanıyabilme Renkli kodlama İyi bir dokümantasyon Şablonlama ve proje desteği Özelleştirebilme CSS desteği Bazı Düzenleyicilerin İncelemeleri Microsoft Frontpage 2000/XP/2003: Microsoft firmasının, kendi ürünü olan Word’e benzerliğiyle dikkat çeken, bu nedenlede birçok kullanıcıya kullanımı kolay gelen düzenleyicisidir. Word kullanan biri kolaylıkla Frontpage den html web sitesi yapabilir.Türkçe olması sebebi de iyi bir tercih sebebi olabilir Artıları: Frontpage en başta kullanması ve öğrenmesi kolay bir düzenleyicidir.Ayrıca Microsoft’un ISS Web sunucusuyla tümleşmesi çok iyidir.Frontpage görsel arabilimi (tam olmasada WYSIWYG denebilir) sayesinde hiçbir HTML kodu yazmadan Web siteleri oluşturabilmeyi sağlar. Eksileri: Frontpage, önceden sizin düzenlemiş olabileceğiniz kodları, tekrardan düzenlemekte çok ısrarcıdır.Bu nedenle sayfa kodlarına elle müdahale etseniz bile, bir sonraki açışınızda bu ince ayarların silinme olasılığı yüksektir. Macromedia Dreamweaver: Frontpage den daha ileri seviyede dir.ingilizcesine güvenenlerin Dreamweaver den başlamaları önerilir. Artıları: Dreamweaver’ın ilk göze çarpan özelliği, görsel düzenleyiciler arasında en iyi tablolama desteğini sunmasıdır.HTML koduna fazla müdahale etmemesi,Asp ve php desteği blokların kolayca seçilebilmesi, seçilen etiketlerin nerdeyse tüm özelliklerinin kolayca ayarlanabilmesi, tümleşik FTP istemcisi ve site yönetimi,çok iyi DHTML ve Frame desteği, Internet üzerinden de yüklenebilen etiketlerle genişletilebilmesi, tabloları katmanlara, katmanları tablolara çevirebilmesi, rehber resim desteği, Homesite’la bütünleşme. Eksileri: Homesite kadar iyi bir doğrudan HTML kodu yazımı olmaması ve maalesef sadece Windows ve MacOs’da çalışması. Web Sayfalarının Tasarlanması Yukarıda incelemesini yaptığımız birçok web editörü size HTML dilini bilmeden, HTML kodlarını kullanarak web sitesi yapma imkanı veriyor.Bu tip editörler sitenizde yaptığınız her adımı, otomatikman HTML koduna çeviriyor. Peki o zaman neden HTML öğrenmelisiniz?HTML öğrenmelisiniz çünkü: En basit neden; eğer iyi bir webmaster olmak istiyorsanız, ve HTML bilmeden sadece bu tür programları kullanmayı düşünüyorsanız, muhtemelen programın verdiği, programdan kaynaklanan en küçük bir hatada eliniz kolunuz bağlı kalacaktır. Lisans gerektiren programlar: Birçok kaliteli "HTML çevirici" programını kullanmak için, o programın lisansına sahip olmanız gerekir. Ve bu da genelde büyük paralar gerektirir. HTML Nedir? HTML, Hyper Text Mark-up Language'ın kısaltılmışıdır. Türkçe karşılığı Hiper Metin İşaretleme Dili'dir. Browserlar tarafından tanınıp yorumlanabilen metin tabanlı bir dildir ve metnin browser tarafından yorumlanması sonucu da web sayfaları elde edilir. Yazdığınız kodların browser tarafından alınıp yorumlanabilmesi için, dosyalarınızın uzantısının ".htm" veya ".html" olması gerekir. HTML de her işaretleme dilindeki gibi komutlardan oluşur, bu komutlara tag veya mark-up denir. Tag'ler herhangi bir metinden farklı oldukları browser tarafından anlaşılabilsin diye "<" ve ">" işaretlerinin arasına yazılır. Her tag'in bir başlangıcı ve bitişi vardır. Bitiş tag'lerinde, "<" işaretinden sonra tag'in bitiş tag'i olduğunu belirtmek için "/" işareti kullanılır. Bir örnek ile göstermemiz gerekirse; <P>Bu bir Paragraf tag'idir.</P> Temel Komutlar: <HTML></HTML> Tüm HTML dokümanını içine alan en temel tag'dir ve dokümanın HTML ile yazıldığını browser'a bildirir. <HEAD></HEAD> Bu tag'in arasına yazılan her şey, sayfanın tanımını oluşturur. Buna sayfanın başlığı da dahildir. Ayrıca meta takıları da bu tag'in arasına yazılır: <TITLE></TITLE> : Sayfa başlığıdır. Bu tag'in arasına yazılan her şey sayfamızın ismi olacak ve başlık çubuğunda görüntülenecektir. META Etiketi: Arama motorlarında iyi bir sıralama kapmak için meta etiketleri içerisine yazdığımız notlar çok önemlidir. !Sayfanızda kullandığınız meta kelimeleri mutlaka sayfa içinde de geçmelidir. Örneğin “Afyon Kocatepe Üniversitesi” sitesinin Meta etiketleri şöyle olabilir: <META name=“keywords” content=“Afyon Kocatepe Üniversitesi,AKÜ,AKU,fakülteler,Yüksekokullar,Enst itüler,Akade mik Takvim, Üniversite, afyon kocatepe university, Turkey, University,education,campus,Türkiye, academics, students, faculty> Sayfanızda kullandığınız Türkçe karakterlerin başka bilgisayarda bozuk şekillerde görülmemesi için: <meta http-equiv=“Content-Type” content=“text/html; charset=windows-1254”> <BODY></BODY> Sayfanın browser tarafından ekrana basılacak tüm kısımları bu tag'in arasına yazılır. Ekrana basılacak kısmın içine metinler, resimler, formlar, tablolar vs. girer. <html> <head> <title>İlk Sayfam</title> </head> <body bgcolor="#e3e3e3"> <b>Web sayfama hoşgeldiniz</b><br> <i>Web sayfama hoşgeldiniz</i><br> <font face="Lucida Sans Unicode" size="+2" color="#297835">Web sayfama hoşgeldiniz</font><br> <u>Web sayfama hoşgeldiniz</u><br> <b><u><i>Web sayfama hoşgeldiniz</i></u></b> <center><font face="Verdana" size="+2" color="#765678">Web sayfama hoşgeldiniz</font></center><br> </body> </html> __________________ İşi olmayan giremez çünkü içerde yeterince işsiz var...

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
photoshop teknikleri ve dersleri	kaosteamyakuza	P-Q-R-S-T	1	06.04.2008 13:06
RFI Kullanım Teknikleri - J4R	crazy_kıvo	İnternet & Ağ Bağlantıları	0	17.03.2007 14:05
Yeşilçam'ın Dövüş Teknikleri	By_Escape	Fıkra	0	25.06.2006 12:00

Şu Anda Konuyu İnceleyen Aktif Kullanıcılar: 1 (0 üye ve 1 misafir)

Konu Araçları
Yazıcı Çıktısını Göster Sayfayı Emaille Yolla