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 :Sayfadaki 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. DİĞER TEKNİKLER 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.Dökümanın Devamı webmastr.tr.gg de. 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