Webmasterlar İçin İpuçları

1 ) İsmi satın al

2- Kaç sayfa olacağına karar ver

3- Rakip Siteleri incele

4- Statik mi, Dinamik mi

5- Dinamik ise hangi program ( ASP, PHP,ISP ) kullanılır

6- Site için bir ana renk bir de yardımcı renk seç

7- Bulabildiğimiz kadar resim

8- Şirketin logosu kullanılacak

9- Photoshop’ta resimlere efekt vermek gerekir

10- Anasayfa tasarla

11- Yardımcı sayfalara link ver

12- ftp ile internete gönder



Resimlerin çözünürlüğü RGB renk modelinde 72 dpi ( jpg ,gif ,png ‘ye çevir

Resmin boyutu 50 KB ‘yı geçmesin



Proje için Þ Hasan Þ Dosyalar ve Resimler diye farklı klasörler aç.



FILE



New Þ Web =Empty Web seçerek yeni proje tanımlanır.



View Þ Folder list aktif yapılırsa sol tarfta Proje üzerinde sağ tuş Þ New File denilir. Kaydet butonu ile isim verilebilir.(index.htm) çift tıklayıp açılabilir.

View ÞViews Bar seçeneği ile yandaki görünüm menüsü kaldırılıp eklenebilir.



Sayfanın Dilini Ayarlama: Düzenleme penceresinde yani Normal konumda iken sayfa içerisinde Page Properties Þ Language buradaki bütün ayarları Turkish yapmak gerekir.

Sayfanın Başlığını belirlemek: Sayfa başlığı için sayfa içersinde Page Properties Þ Title kısmına yazılan yazı sayfanın başlık çubuğunda görüntülenir.



Sayfanın Renklerinin Ayarlanması:

1-) Arka plan rengi

2-) Metin rengi

3-) Linklerin rengi

4-) Daha önce ziyaret edilmiş Link’lerin rengi



Sayfa içersinde Page Properties Þ Background bölümünden ayarlanır.

Background: Arka Plan rengi

Text: Sayfadaki metinlerin rengi

Hyperlink ayfadaki Linklerin rengi

Visited Hyperlink: Ziyaret edilmiş linklerin rengi

Active Hyperlink: Sayfada o anda aktif olan link’in rengi ( Eğer Frame kullanılıyorsa)



Arka Plan’a Resim Koymak:

Page Properties Þ Background Þ Background Pictures kısmından Browse seçeneği ile resim bulunup seçilir.



Sayfanın Sağ ve Sol Boşluklarını Ayarlama:

Page Properties Þ Margins Þ Top ve Left margins kısmından yazılan yazı ve konulan resmlerin sayfanın üst ve sol kenarına olan mesafesi ayarlanabilir.



Sayfaya Müzik Eklemek için:

Page Properties ÞGeneral Þ Background Sound kısmından müzik seçilebilir.



Alt Satıra Geçmek için Þ Shift + Enter yapılır.

Yeni Paragraf için Þ Enter kullanılır.



Sayfaya Resim Eklemek

İnsert Þ Picture / From File komutu veya araç çubuklarındaki İnsert Picture From File kullanılır.

Resmin Üzerine Gelince yazı çıkması için Þ Resim üzerinde sağ tuş Þ Picture Properties Þ General Þ Text Kısmına çıkması istenen yazı girilir.



HYPERLİNKLER


Üzerine tıklandığında başka bir sayfayı ekrana getiren metinlere Link denir. Standart web sayfalarında hyperlinkler mavi ve altı çizgili olur ve üzerine gelince mouse imleci bir ele dönüşür. Üzerine tıklanınca başka bir sayfa veya alana gitmeyi sağlar.



1-) Bir Sayfadan diğer sayfalara link: a.)Yazı yazılıp seçilir ve Araç çubuklarından Þ Hyperlink (Dünya üzerinde bir zincir) simgesine tıkla dideceği dosyayı seç ve OK yap. b) veya yazıyı seçip Ctrl + K ‘ya bas.



2-) Sayfa içine Link: Gitmesi istenen her alana tıklayıp orada iken İnsert Þ Bookmark komutu verilip o alanlara isimler verilir.Bu işlem sonunda oralara bayraklar konulur. Üzerine tıklanacak yazı seçilip Araç çubuklarından veya Ctrl + K ile link verilir burada Bookmark kısmından verilen isimler seçilir.



3-) Bir sayfadan diğer bir sayfanın belli noktasına link vermek: Araç çubuklarından veya Ctrl + K ile gidilecek sayfa ve Bookmark kısmından da o alan adı girilir.



4-) Bir sayfadan diğer bir Web Sitesine Link: Yazı yazıldıktan sonra Araç çubuklarından veya Ctrl + K ile gelen alanda URL kısmına http://www........com yazılır. Farklı sayfada açılması için de Target Frame kısmından New Window seçilir.



5-) Resme Link vermek: Resim üzerinde iken sağ tuş Þ Hyperlink Þ URL kısmına http://.........com yazılır.



6-) Mail adresine Link: Yazı yazılıp Araç çubuğundan veya Ctrl + K yapılır ve oradan zarf üzerine tıklanıp mail adresi yazılır.



TABLOLAR


Düzenli ve derli toplu sayfalarda mutlaka tablolar kullanılmalıdır. Tablo eklemek için Araç Çubuklarından Þ Insert Table’ a tıkla. Satır ve sütun sayısını belirle.



Tablo Özellikleri: Tablo üzerinde Sağ Tuş Þ Table Properties ile ayarlamalar yapılabilir.

Specify Width kısmından İn Pixels ile pixel cinsinden, In percent kısmından da % olarak ayarlanabilir.

Cell Spacing: Hücreler arasındaki boşluk ayarlanabilir.

Cell Padding: Yazının tablonun sol, sağ, üst ve alt kenarlara olan mesafesi ayarlanabilir.

Border: Hücreleri birbirinden ayıran çizgilerin kalınlığını ayarlar.

Tablonun Sayfadaki Konumu: Tablo üzerinde Sağ Tuş Þ Tablo Properties Þ Style kısmından Paragraf ayarları, font ayarları, çizgi ayarları ve tablonun sayfadaki konumu ayarlanabilir.

Hücrelerin Dolgu rengi: Hücre seçildikten sonra Araç çubuklarından Þ Highligh Color bölümünden ayarlanabilir.



Tabloya Satır Eklemek: Satır eklenecek yerde Sağ Tuş Þ Insert Row komutu verilir.

Tabloya Sütun Eklemek: Sütun eklenecek yerde Sağ Tuş Þ Insert Column komutu verilir.



Hücre Birleştirmek: Birleştirilecek hücreler seçilip Sağ tuş Þ Merge Cells komutu kullanılır.

Hücre Bölmek: Hücre içerisinde iken Sağ Tuş Þ Split Cells komutu kullanılır.

Satır veya Sütun Silmek: Silinecek satır veya sütun seçilip üzerinde Sağ Tuş Þ Delete Cell komutu kullanılır.



Tablo İçerisine Resim Eklemek: Hücre içerisinde iken araç çubuklarından Insert Picture From File komutu kullanılır.

Tablonun tamamını seçmek için Þ Table Þ Select Þ Table seçeneği kullanılır. Tablo seçildikten sonra araç çubuklarından yazı büyüklükleri, rengi ve biçimi ayarlanabilir.

FRAMELER


Frame’li sayfa için File Þ New Þ Page Þ Frames Pages bölümünden istediğimiz frame yapısını seçeriz. Karşımıza gelen Frame’li sayfalarda New Page komutu verilip. Sayfa içerikleri ayarlanır. Sayfaları kaydederken frame üzerine tıklanıp FileÞ Save komutu verilir en dış çerçeveye (index.htm) diğerlerine de sag.htm ve sol.htm ismi verilip kaydedilir.



Frame Özellikleri: Frame’in çerçevesine tıklanıp Sağ tuş Þ Frame Properties komutu verilir.

Frame Çizgilerini gizlemek için Frame Properties Þ Frames Pages Þ Show Borders seçeneği kaldırılır.

Sayfanın Başlık çubuğunda çıkacak yazıyı Frame Properties Þ Frames Pages Þ General Þ Title kısmından ayarlayabiliriz.

Sayfalarda dikey ve yatay kaydırma çubuklarının çıkıp çıkmayacağını belirlemek için Frame Properties Þ Options Þ Resizable in Browser seçeneği kullanılır

İf Needed Þ Eğer sayfa taşarsa araç çubukları çıkar, taşmazsa çıkmaz

Never Þ Hiçbir zaman araç çubukları çıkmaz

Always Þ Her zaman yatay veya dikey kaydırma çubukları çıkar.



Linklerin açılacağı frame’i Linklerin olduğu yerde Sağ tuş Page Properties Þ Default target frame seçeneği ile belirleyebiliriz. Bu şekilde her lin için ayrı ayrı nerede açılacağını göstermemize gerek kalmaz.



q Link verilecek yazılar seçilip Ctrl + K ile link verilebilir.



q Sayfaları Link verdiğimiz alandan açıp düzenlemek için Link’in üzerine Ctrl ile birlikte tıklarsak o sayfa açılır.

Bir Resmin Değişik Bölümlerine Değişik Link Vermek: Resim Sayfaya eklendikten sonra seçilip, sayfanın alt kısmındaki Pictures (Çizim) araç çubuğundaki daire, kare veya çoklu seçim araç çubukları ile resmin bir bölümü seçilince Link penceresi açılıyor.Buradan gitmesi istenilen dosya belirlenebilir.

Resmi Sayfada İstediğimiz yere koymak için: Resim seçilip resim araç çubuğundan Position Absolutely düğmesine basıp sürükleyip istediğimiz yere taşıyabiliriz.



Mouse Üzerine Gelince Değişen Linkler, Yazılar veya Resimler: Link verildikten sonar yazı seçilip Format Þ Dynamic Html Effects komutu çalıştırılıp gelen araç çubuğundan On Mouse Over seçeneği ile mouse link’in üzerine geldiğinde alacağı yazı şekli belirlenir.



Üzerine Gelince Değişen Buttonlar (Hover Button): Bu tür buttonlar Insert Þ Component Þ Hover Button komutu kullanılır.

Button Text: Butonun yazısı

Font: Button’un font, boyut ve rengini ayarlayabiliriz.

Link to Browse: Link verilecek sayfanın ismi yazılır.

Button Color: Düğmenin normal durumdaki arka plan rengi

Effect: Düğmenin üzerine fare imleci gelince uygulanacak effect

Effect Color: Düğmeye uygulanacak effectin rengi

Width: Düğmenin genişliği

Heigh: Düğmenin yüksekliği



Kayan Yazılar (Marquee): Yazıyı yazıp gerekli renklendirme ve büyültme işlemini yapıp İnsert Þ Component Þ Marquee

Text: Kaydırılacak metin veya seçili metin bu bölüme yazılır.

Direction: Yazının kayacağı yön ayarlanır.

Delay: Yazıların kayma hızı milisaniye cinsinden belirlenir.

Amount: Her kaydırmada gidilecek pixel sayısı.

Behavior: Efktin türü. Scroll ve slide da yazılar bir uçtan girip diğer uçtan çıkar. Alternate yazılar pinpon topu gibi sağa sola hareket eder.

Align Width Text: Kaydırmanın yapıldığı alanın etrafındaki yazının nerede duracağıbelirlenir. Top: Üstte, Middle:Ortada, ve Bottom:Altta

Width: Kaydırma alanının genişliği. Pixel veya yüzde olarak ayarlanabilir.

Height : Kaydırma alanının yüksekliği.

Repeat: Eğer burada Continuously seçeneğini aktif hale getirirsek kaydırma sürekli olur. Repeat bu seçenek işaretlenirse tekrar sayısı belirlenir.

Background Color: Kaydırma alanının arka plan rengi buradan ayarlanabilir.



FORMLAR


Temel olarak formlar, sayfanıza bağlanan İnternet kullanıcılarından metin tabanlı bilgi almak ve bu bilgileri işlemek için kullanılan bir arabirim olarak düşünülebilir. Form işleyen programlara genelde CGI programları adı verilir.



Form Flemanlarının: Üzerinde çift tıkla Format kısmından yazı ve zemimn rengi ayarlanabilir.



Form Eklemek için Þ Insert Þ Form menüsü kullanılır.



Adınız Soyadınız

Online Text Box

Şifreniz

Online Text Box

Şifreniz (tekrar)

Online Text Box

e-mail

Online Text Box

Cinsiyetiniz

Radio Button

Hobileriniz

CheckBox

Adresiniz

Scrolling Text Box

Doğum Tarihiniz

Drop Down Menü

Telefonunuz

Online Text Box


Gönder sil
Push Button




İki buton silinir .Formun düzgün olması için 10 satır ve 2 sütun’lu bir tablo açılır .

Bu tablo formun kesikli çizgileri arasına eklenmelidir.



Alanlar üzerinde çift tıklayıp isim verebiliriz. Herhangibir buton Text üzerinde çift tıkla validate Reguried min ve max değeri ver.



BANNER AD MANAGER


İnsert Þ Component Þ Banner Ad Manager

Normal bölümde resim üzerinde çift tıkla



Ø Transition Effect = Resimlerin değiştirme efektleri

Ø Show each picture fer (seconds): Değişim süresi

Ø Paint Shop Pro = Programı ile banner resimler yapılabilir.





C S S ( Cascade Style Sheet)

Şablon sitil sayfaların
< head > ‘in üst kısmına geçilir.

< style type = text / css >

h1{ colar : blue }

background –colar : yellow;

font-size :150 px;

< /style >

< /head > < body> < h1 > Acaba olacak mı ? <



Başlıkların mavi yazılmasını ,yazının büyüklüğünden 150pixel arka zemin rengi –yeşil yazılmasını sağlar.

<style type = text / css>

a:link {color:red;

text-decoration ne ;

font –size:12px

}



a: visited { color:green;

text-decorationne;

font-size :12px;

}



a: hover { color:blue;

text-decoration :underline

font-size :14px

}



< /style >

< / head >

< body >

< a href = x.html > gel bakalım < / a> <br>

< a href = y.html > buraya gel < /a > br >

< a href =z.html > buraya da gel < /a > < br >

< / body >

< / html >


NORMAL BÖLÜM
Format =Style

a = link = font (tıklanınca )



Bu şekilde sayfaların link değerleri değiştirilebilir.

Yazı yaz = yazıyı seç = Ctrl+K link verir.



Format = Style = New



a : visited yaz ( ziyaret edilince )

format = Font > ile ziyaret edilir.

Bagraund

Sayfanın arka zemin rengi ve yazı rengi ayarlanabilir.



Format = Style = New



a : hover = yaz ( üzerine gelince )

Format = Font > ile üzerine gelince

Baground

Linklerin zemin ve yazı rengi belirlenir.


Link vermek için yazı seçilip

Ctrl+K yapılır

URL kısmına http://www.....com

Her Zaman Yapılan 10 Tasarım Hatası "Önemli"

--------------------------------------------------------------------------------

1. Siteyi planlamadan işe başlamak: Siteyi dizayn etmeye başlamadan önce oturup kalem kağıt ile yazıp çizmeli düşünmeli, eldeki materyallere göre sayfa yapısı sayfa sayısı ne olacak neleri içerecek kime hitap edecek baştan çok iyi hazırlanmalı.

2. Kontak bilgilerini sayfaya koymamak: Mutlaka her sitede "temasa geçin" butonu olmalı her sayfanın altına basitçe emailinizi koyun. Eğer e-ticaret yapıyorsanız kontak bilgisi olmayan bir site kesinlikle bu işten vaz geçmeli. Kimse sizinle temasa geçmese bile insanlar size ulaşabileceklerini bilince daha rahat edeceklerdir. (Tabi burada mail adresi toplayıcılarına da dikkat etmek gerekir.)

3. Kırık linkler: Sitenizi kendiniz test etmeyi unutmayın ziyaretçilerin sitenizde çalışmayan bozuk link görmesi iyi olmaz.

4. Eskimiş bilgi: Bu çoğu web sitesinin sorunudur, eskimiş bilgileri güncellemek çoğu zaman tembel webmasterlara ağır gelir. Bu yüzden kaybedeceğimiz imajımız ileride kaybedeceğimiz paramız demektir.

5. Çok fazla karışık yazı karakteri ve rengi: Sayfalarınızın tümünde aynı karakteri kullanmalısınız bir sayfada en çok 2 veya 3 ayrı karakter ve renk kullanın.

6. Artık sayfalar: Tüm sayfalarınıza bir "anasayfa" linki koyun. örneğin biri sizin sitenizi bir arkadaşına önerdi, siteye giren kişi girdiği sayfadan anasayfanıza gelemiyorsa işiniz bitti demektir.

7. Geri tuşunu iptal etmek: Bazı web siteleri, özellikle ***** siteler, tarayıcınızdaki geri tuşunu iptal ederek veya tıkladığınızda başka reklam siteleri açarak gereksiz çabalar içine giriyorlar fakat bunun ziyaretçilerinizi kızdırmaktan başka bir şeye yaramayacağını bilin.

8. Yeni pencereler açmak: Bir zamanlar kullanıcı sitenizde bir linki tıkladığında içeriği yeni bir pencerede açmak modaydı fakat şu an bu sadece insanların canını sıkmak olur. Reklam açısından işe bakmak gerikirse sadece 1 tane reklam penceresi haklı görülebilir.

9. Uzun yükleme süresi: Eğer siteniz bedava hizmet verilen yerlerin birindeyse bu mazur görülebilir. Fakat siteniz profesyonel bir hizmet alıyorsa sitenizin yavaş olması affedilmez. Bir de sitenizi çok büyük resim yüklemeyin ki ziyaretçi beklerken sıkılmasın, tabi beklerse.

10. En son teknolojiyi kullanmak: Bazen insanı büyüler fakat bazen ziyaretçileri kaçıran bir sorundur, özellikle ziyaretçi sitenizi görüntülemek için bir program indirmek zorunda ise veya siteniz bir tarayıcıda görünüp diğerlerinde görünmüyorsa bu sizin için ölümcül olabilir.

İyi Web Sayfaları

1.İyi bir web sayfasına girdiğiniz zaman sayfa ekrana çabuk gelir (ziyaretçiyi ekranda fazla bekletmez).

2.Sayfanın içinde gereksiz resimlere, büyük fotoğraflara rastlamazsınız. Çok büyük boyutlu ve yüklenmesi uzun süren Animated gifler kullanılmamıştır.

3.Eğer sayfa iyi tasarlanmışsa ziyaretçi sayfa resimlerini kapatarak bağlansa bile sayfadaki bütün bilgilere kolayca ulaşabilir.

4.Eğer sayfada çerçeve kullanılmışsa,çerçeve hataları titizlikle ayıklanmıştır.

5.İyi bir Web sayfasına bağlandığınızda daha ilk sayfadan sayfanın editörü, sahibi vb...ile ilgili bilgilere kolayca ulaşabilirsiniz ve onlarla iletişim kurabilirsiniz.

6.İyi bir Web sayfasının içinde sadece internette her yerde gördüğümüz bilgiler bulunmaz, sayfayı tasarlayan Webmaster sayfaya kendisinden bir şeyler katmıştır.

7.Eğer sayfada linkler varsa, hiçbiri kırık değildir. Webmaster bu linkleri düzenli aralıklarla kontrol etmektedir.

8.Eğer bu siteden başka bir siteye sizi yollayan link varsa bu link mutlaka ayrı bir sayfa açılır. Böylece geldiğiniz yeri kaybetmezsiniz.

9.Sayfa mutlaka, ama mutlaka tablolar kullanarak tasarlanmıştır.