SlideShare a Scribd company logo
1 of 26
6.5.2014 1
Web AlanıTanımlamak için
1-) Dosya menüsünden  Yeni komutu verilir.
2-) Sağda açılan panelden YeniWeb sitesi Web paketi çözümleri
üzerine
6.5.2014 2
3-) Gelen pencereden Genel sekmesine geç  BoşWeb Sitesi
üzerine tıkla
Tamam butonuna basarak işleme devam edilir.
6.5.2014 3
 Klasör Listesini Gizlemek /
Göstermek İçin :
1-) Görünüm Menüsünden Klasör Listesi seçilir.
2-) Araç Çubuklarından Bölmeyi Aç / Kapa üzerine
tıklanır.
6.5.2014 4
PROGRAMIN ARAYÜZÜ
6.5.2014 5
Frontpage de Tasarım yaparken Tasarla görünümü
kullanılarak tasarım yapılır. Böl kısmı ile hemTasarım
hem de Kod ekranı birlikte gelir. Kod sadece HTML
kodlarını gösterir. Önizleme ise sonun gösterir.
6.5.2014 6
BİÇİMLENDİRME ARAÇ ÇUBUKLARI
Stil:Yazılara başlık özelliği vermeyi veya başlıkları kaldırmayı sağlar. Başlık
verilen yazıyı bu listeden normal seçerek normal yazıya çevirebiliriz.
YazıTipi : Yazıların tipini ayarlar.Verdana,Arial …. gibi
YazıTipi Boyutu:Yazılara büyüklük vermeyi sağlar.Web de yazılara
verilebilecek yazı boyutu 1 ile 7 arasındadır.
Kalın : Seçilen yazıları kalın yapar.
İtalik:Yazıları Eğik – İtalik yapar.
Altı Çizili:Yazıların altını çizer
Sola Hizala: Paragrafları sola hizalar. Standardında zaten paragraflar sola
hizalıdır.
Ortala: Paragrafları ortalar.
Sağa Hizala: Paragrafları sağa hizalı yapar.
İkiYanaYasla: Birden fazla satırdan oluşan paragraflar için kullanılır. Bu araç
paragrafı her iki yana da yasladığı için paragraflar düzgün görünür.
6.5.2014 7
YazıTipi Boyutunu Artır:Yazıların boyutunu her tıklamada bir
kademe büyütür. En son yazı boyutu 7 olunca pasif olur.
YazıTipi Boyutunu Azalt:Yazıların boyutunu her tıklamada bir
kademe küçültür. En son yazı boyutu 1 olunca pasif olur.
Numaralandırma: Maddeler halindeki yazıların başına numara koyar.
Madde İşaretleri : Maddeler halindeki yazıların başına madde
işaretleri koyar.
Girintiyi Azalt: Maddeler halinde yazılmış yazılar için verilmiş girintiyi
(içeriden yazılma – boşluk) azaltır.
Girintiyi Artır: Maddeler halindeki yazılar için verilen girintiyi artırıp
yazının daha da içeriden yazılmasını sağlar.
Dış Kenarlıklar:Tablolara kenarlık vermeyi veya kenarlığını kaldırmayı
sağlar.
Vurgu:Yazıların arka planına renk vermeyi veya verilen rengi
kaldırmayı sağlar.
YazıTipi Rengi:Yazıların rengini ayarlamayı sağlar.
6.5.2014 8
SAYFA ÖZELLİKLERİNİ
AYARLAMAK İÇİN
Genel Sekmesi
Başlık (Title): Sayfanın başlığı. Başlık sitenin arama
motorlarında bulunmasını sağlayan önemli bir bölümdür.
Sayfa Açıklaması (Description): Kısaca sayfa içeriğini
birkaç cümle ile özetlemek gerekir. Bu bölüm arama
motorları için önemlidir.
Anahtar Sözcükler: Aralarına virgül koyarak sitemizin
arama motorlarında bulunması için gerekli anahtar
kelimeler tanımlanmalıdır.
6.5.2014 9
SAYFA ÖZELLİKLERİNİ ARAYÜZÜ
6.5.2014 10
Biçimlendirme Sekmesi
Arka Plan Resmi: Sayfanı arka plan resim koyar.
Arka Plan Rengi: Sayfanın zemin rengi
Metin: Sayfadaki yazıların rengi ayarlanır.
Köprü: Sayfadaki linklerin rengi ayarlanır.
Ziyaret Edilen Köprü: Üzerine tıklanmış yani ziyaret edilmiş link
rengi.
Etkin Köprü: Link üzerine basılı iken ki link rengini belirler.
6.5.2014 11
Biçimlendirme Sekmesi Arayüzü
6.5.2014 12
Gelişmiş Sekmesi
 Sayfanın kenar boşluklarını sıfırlandığı bölümdür.
 Gövde Stili butonuna tıklayıp sayfanın tamamını etkileyecek yazı
tipi, boyutu ve rengi buradan ayarlanır.
 Köprü Çevirme Efektlerini Etkinleştir kutucuğu seçilip Stili
Çevir butonuna basarak Mouse linklerin üzerine geldiğinde
görünmesini istediğimiz link rengi ayarlanabilir.
6.5.2014 13
SAYFAYA RESİM EKLEMEK İÇİN.
1.)Web’de kullanılacak resimler *.jpg, *.gif, *.png uzantılı olmalıdır.
2.) Resin Renk Modu :RGB olmalıdır.
3.) Çözünürlük Max:72 dpi olmalıdır.
4.) Resmin MB’ı (boyutu) 70 KB’ı geçmezse iyi olur.
5.) Resmin kenarlarından basılı tutup çekmek resmin MB’ını küçültmez.
Resim hangi boyutta kullanacaksa o boyuta Photoshop kullanarak
ayarlanmalıdır.
6-) Site içerisinde kullanılan resimleri Sitenin ana klasörü içine bir alt
klasör açarak (images veya resimler) orada toplamalıyız.
Resim ekleme işlemini basamaklandırsak ;
6.5.2014 14
Resim Eklemek İçin;
1-) Ekle Menüsünden  Resim  Dosyadan komutu verilir.
2-) Araç Çubuklarından  Dosyadan Resim Ekle SimgesineTıkla
resmi bulunduğu konumdan seç ekle. Kaydet tuşuna bas. Resmin bir
yedeğini de images klasörüne kaydet.
6.5.2014 15
Resmin Özelliklerini Ayarlamak İçin;
Resmin üzerine tıkla  SağTuş  Resim Özellikleri komutu verilir.
6.5.2014 16
LİNKLER – KÖPRÜLER -
BAĞLANTILAR
Link: Bir sayfadan başka bir sayfaya veya internet sitesine
geçmeyi sağlayan bağlantıdır.
 Normal link rengi Mavi,
 Ziyaret edilmiş Link Rengi Bordo’dur.
6.5.2014 17
LinkVermek İçin;
1-) Ekle Menüsünden  Köprü komutu verilir.
2-) Ctrl + Alt + K
3-) SağTuş  Köprü komutu verilir.Adres kutucuğuna açılmasını
istediğimiz sayfa veya site adresi yazılır.Yeni pencerede açtırmak için
Hedef Çerçeve butonuna tıklanır ve oradan da Yeni Pencere
seçeneği işaretlenir.
6.5.2014 18
Bir resmin değişik noktalarına link vermek için.
 Görünüm menüsünden araç çubukları oradan resimleri
işaretleriz.
 Resimin üzerine tıkla – Resimler araç çubuğundan
6.5.2014 19
TABLOLAR
 İnternet siteleri tasarlanırken sitenin yapısını oluşturmak için
tablolar kullanılır.
 Tablolar için kullanılan ölçü birimi Pixel olmalıdır.
 Web Siteleri için genişlik …780.. 800..850..900..950..998 gibi
değerler olabilir
6.5.2014 20
Tablo eklemek için:
Tablo menüsünden  Ekle Tablo komutu verilir.
6.5.2014 21
İLETİŞİM FORMU OLUŞTURMAK
İnternet sitemizi üzerinden bilgi almak, iletişim kurmak için kayıt formu
oluşturmak gerekir.
6.5.2014 22
Kayıt Formu Oluşturmak için:
1-) Ekle Menüsünden – Form – Form komutu verilir. Gönder ve Sıfırla
butonları silinir.
2-) O araya tablo eklenir. 9 satır – 2 Sütunlu
6.5.2014 23
Formun Özelliklerini Ayarlamak için:
1-) Form içerisinde SağTuş – Form Özellikleri komutu verilir.
Başkasına gönder seçilir.
Form adı ile bir isim verilir.
Seçenekler butonuna tıklanır
6.5.2014 24
 Eylem kısmına gonder.php veya gonder.asp yazılır.
 Dosya kayıt edilir.
 2-) Formdaki doldurulan bilgiler email adresimize ulaşsın diye
webarsiv klasörü içindeki form-gonder klasöründeki
gonder.php kopyalanıp yaptığımız site klasörü içine konur.
 - gonder.php dosyası sağ tuş birlikte aç – Not Defteri ile açılır.
 - $eposta=” kendi emailini yaz” kısmı
 - $eposta = "durmazhasan@hotmail.com"; olarak ayarlanır. Kayıt
edilir.
6.5.2014 25
TEŞEKKÜRLER..
6.5.2014 26

More Related Content

More from Merve Aydın

More from Merve Aydın (9)

Asp.net 3
Asp.net 3Asp.net 3
Asp.net 3
 
sunu (Asp-2)
sunu (Asp-2)sunu (Asp-2)
sunu (Asp-2)
 
sunu (Ajax-2)
sunu (Ajax-2)sunu (Ajax-2)
sunu (Ajax-2)
 
sunu (Ajax-1)
sunu (Ajax-1)sunu (Ajax-1)
sunu (Ajax-1)
 
sunu (Asp-1)
sunu (Asp-1)sunu (Asp-1)
sunu (Asp-1)
 
sunu (Frontpage-1)
sunu (Frontpage-1)sunu (Frontpage-1)
sunu (Frontpage-1)
 
sunu (Html-2)
sunu (Html-2)sunu (Html-2)
sunu (Html-2)
 
sunu (Html-1)
sunu (Html-1)sunu (Html-1)
sunu (Html-1)
 
Sunu (Internet)
Sunu (Internet)Sunu (Internet)
Sunu (Internet)
 

sunu (Frontpage-2)

  • 2. Web AlanıTanımlamak için 1-) Dosya menüsünden  Yeni komutu verilir. 2-) Sağda açılan panelden YeniWeb sitesi Web paketi çözümleri üzerine 6.5.2014 2
  • 3. 3-) Gelen pencereden Genel sekmesine geç  BoşWeb Sitesi üzerine tıkla Tamam butonuna basarak işleme devam edilir. 6.5.2014 3
  • 4.  Klasör Listesini Gizlemek / Göstermek İçin : 1-) Görünüm Menüsünden Klasör Listesi seçilir. 2-) Araç Çubuklarından Bölmeyi Aç / Kapa üzerine tıklanır. 6.5.2014 4
  • 6. Frontpage de Tasarım yaparken Tasarla görünümü kullanılarak tasarım yapılır. Böl kısmı ile hemTasarım hem de Kod ekranı birlikte gelir. Kod sadece HTML kodlarını gösterir. Önizleme ise sonun gösterir. 6.5.2014 6
  • 7. BİÇİMLENDİRME ARAÇ ÇUBUKLARI Stil:Yazılara başlık özelliği vermeyi veya başlıkları kaldırmayı sağlar. Başlık verilen yazıyı bu listeden normal seçerek normal yazıya çevirebiliriz. YazıTipi : Yazıların tipini ayarlar.Verdana,Arial …. gibi YazıTipi Boyutu:Yazılara büyüklük vermeyi sağlar.Web de yazılara verilebilecek yazı boyutu 1 ile 7 arasındadır. Kalın : Seçilen yazıları kalın yapar. İtalik:Yazıları Eğik – İtalik yapar. Altı Çizili:Yazıların altını çizer Sola Hizala: Paragrafları sola hizalar. Standardında zaten paragraflar sola hizalıdır. Ortala: Paragrafları ortalar. Sağa Hizala: Paragrafları sağa hizalı yapar. İkiYanaYasla: Birden fazla satırdan oluşan paragraflar için kullanılır. Bu araç paragrafı her iki yana da yasladığı için paragraflar düzgün görünür. 6.5.2014 7
  • 8. YazıTipi Boyutunu Artır:Yazıların boyutunu her tıklamada bir kademe büyütür. En son yazı boyutu 7 olunca pasif olur. YazıTipi Boyutunu Azalt:Yazıların boyutunu her tıklamada bir kademe küçültür. En son yazı boyutu 1 olunca pasif olur. Numaralandırma: Maddeler halindeki yazıların başına numara koyar. Madde İşaretleri : Maddeler halindeki yazıların başına madde işaretleri koyar. Girintiyi Azalt: Maddeler halinde yazılmış yazılar için verilmiş girintiyi (içeriden yazılma – boşluk) azaltır. Girintiyi Artır: Maddeler halindeki yazılar için verilen girintiyi artırıp yazının daha da içeriden yazılmasını sağlar. Dış Kenarlıklar:Tablolara kenarlık vermeyi veya kenarlığını kaldırmayı sağlar. Vurgu:Yazıların arka planına renk vermeyi veya verilen rengi kaldırmayı sağlar. YazıTipi Rengi:Yazıların rengini ayarlamayı sağlar. 6.5.2014 8
  • 9. SAYFA ÖZELLİKLERİNİ AYARLAMAK İÇİN Genel Sekmesi Başlık (Title): Sayfanın başlığı. Başlık sitenin arama motorlarında bulunmasını sağlayan önemli bir bölümdür. Sayfa Açıklaması (Description): Kısaca sayfa içeriğini birkaç cümle ile özetlemek gerekir. Bu bölüm arama motorları için önemlidir. Anahtar Sözcükler: Aralarına virgül koyarak sitemizin arama motorlarında bulunması için gerekli anahtar kelimeler tanımlanmalıdır. 6.5.2014 9
  • 11. Biçimlendirme Sekmesi Arka Plan Resmi: Sayfanı arka plan resim koyar. Arka Plan Rengi: Sayfanın zemin rengi Metin: Sayfadaki yazıların rengi ayarlanır. Köprü: Sayfadaki linklerin rengi ayarlanır. Ziyaret Edilen Köprü: Üzerine tıklanmış yani ziyaret edilmiş link rengi. Etkin Köprü: Link üzerine basılı iken ki link rengini belirler. 6.5.2014 11
  • 13. Gelişmiş Sekmesi  Sayfanın kenar boşluklarını sıfırlandığı bölümdür.  Gövde Stili butonuna tıklayıp sayfanın tamamını etkileyecek yazı tipi, boyutu ve rengi buradan ayarlanır.  Köprü Çevirme Efektlerini Etkinleştir kutucuğu seçilip Stili Çevir butonuna basarak Mouse linklerin üzerine geldiğinde görünmesini istediğimiz link rengi ayarlanabilir. 6.5.2014 13
  • 14. SAYFAYA RESİM EKLEMEK İÇİN. 1.)Web’de kullanılacak resimler *.jpg, *.gif, *.png uzantılı olmalıdır. 2.) Resin Renk Modu :RGB olmalıdır. 3.) Çözünürlük Max:72 dpi olmalıdır. 4.) Resmin MB’ı (boyutu) 70 KB’ı geçmezse iyi olur. 5.) Resmin kenarlarından basılı tutup çekmek resmin MB’ını küçültmez. Resim hangi boyutta kullanacaksa o boyuta Photoshop kullanarak ayarlanmalıdır. 6-) Site içerisinde kullanılan resimleri Sitenin ana klasörü içine bir alt klasör açarak (images veya resimler) orada toplamalıyız. Resim ekleme işlemini basamaklandırsak ; 6.5.2014 14
  • 15. Resim Eklemek İçin; 1-) Ekle Menüsünden  Resim  Dosyadan komutu verilir. 2-) Araç Çubuklarından  Dosyadan Resim Ekle SimgesineTıkla resmi bulunduğu konumdan seç ekle. Kaydet tuşuna bas. Resmin bir yedeğini de images klasörüne kaydet. 6.5.2014 15
  • 16. Resmin Özelliklerini Ayarlamak İçin; Resmin üzerine tıkla  SağTuş  Resim Özellikleri komutu verilir. 6.5.2014 16
  • 17. LİNKLER – KÖPRÜLER - BAĞLANTILAR Link: Bir sayfadan başka bir sayfaya veya internet sitesine geçmeyi sağlayan bağlantıdır.  Normal link rengi Mavi,  Ziyaret edilmiş Link Rengi Bordo’dur. 6.5.2014 17
  • 18. LinkVermek İçin; 1-) Ekle Menüsünden  Köprü komutu verilir. 2-) Ctrl + Alt + K 3-) SağTuş  Köprü komutu verilir.Adres kutucuğuna açılmasını istediğimiz sayfa veya site adresi yazılır.Yeni pencerede açtırmak için Hedef Çerçeve butonuna tıklanır ve oradan da Yeni Pencere seçeneği işaretlenir. 6.5.2014 18
  • 19. Bir resmin değişik noktalarına link vermek için.  Görünüm menüsünden araç çubukları oradan resimleri işaretleriz.  Resimin üzerine tıkla – Resimler araç çubuğundan 6.5.2014 19
  • 20. TABLOLAR  İnternet siteleri tasarlanırken sitenin yapısını oluşturmak için tablolar kullanılır.  Tablolar için kullanılan ölçü birimi Pixel olmalıdır.  Web Siteleri için genişlik …780.. 800..850..900..950..998 gibi değerler olabilir 6.5.2014 20
  • 21. Tablo eklemek için: Tablo menüsünden  Ekle Tablo komutu verilir. 6.5.2014 21
  • 22. İLETİŞİM FORMU OLUŞTURMAK İnternet sitemizi üzerinden bilgi almak, iletişim kurmak için kayıt formu oluşturmak gerekir. 6.5.2014 22
  • 23. Kayıt Formu Oluşturmak için: 1-) Ekle Menüsünden – Form – Form komutu verilir. Gönder ve Sıfırla butonları silinir. 2-) O araya tablo eklenir. 9 satır – 2 Sütunlu 6.5.2014 23
  • 24. Formun Özelliklerini Ayarlamak için: 1-) Form içerisinde SağTuş – Form Özellikleri komutu verilir. Başkasına gönder seçilir. Form adı ile bir isim verilir. Seçenekler butonuna tıklanır 6.5.2014 24
  • 25.  Eylem kısmına gonder.php veya gonder.asp yazılır.  Dosya kayıt edilir.  2-) Formdaki doldurulan bilgiler email adresimize ulaşsın diye webarsiv klasörü içindeki form-gonder klasöründeki gonder.php kopyalanıp yaptığımız site klasörü içine konur.  - gonder.php dosyası sağ tuş birlikte aç – Not Defteri ile açılır.  - $eposta=” kendi emailini yaz” kısmı  - $eposta = "durmazhasan@hotmail.com"; olarak ayarlanır. Kayıt edilir. 6.5.2014 25