MICROSOFT FRONTPAGE by HC11121318410

VIEWS: 14 PAGES: 12

									     Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu


                     MĠCROSOFT FRONTPAGE


Frontpage html editör programdır. Tasarımları görsel olarak yapmayı sağlar
yapılan tasarımlar sonucunda gerekli html kodları program tarafından
otomatik olarak oluşturulur.

!!! Forntpage’de bir internet sitesi tasarlamaya başlamadan önce bilgilerini
tutacağı web alanı (Klasör = Site) tanımlamalıdır. Tasarıma ait tüm
resimler ve sayfalar bu klasörde tutulur.

Web Alanı ( Site = Klasör ) Tanımlamak için

1-) Dosya menüsünden  Yeni komutu verilir.

2-) Sağda açılan panelden  Yeni Web sitesi  Web paketi çözümleri
üzerine tıkla




                           www.bilgiegitim.com
     Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu

3-) Gelen pencereden Genel sekmesine geç  Boş Web Sitesi üzerine
tıkla




4-) Gözat butonuna tıkla ( D: ) sürücüsünden kendi klasör’üne gir  Yeni
Bir Klasör aç ( örnek: bilgiegitim ) klasör’ün içine gir  Aç  Tamam.

5-) Görünüm menüsünden  Sayfa seçilir.


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.




                           www.bilgiegitim.com
     Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu



                         PROGRAMIN ARAYÜZÜ




Frontpage de Tasarım yaparken Tasarla görünümü kullanılarak tasarım
      yapılır. Böl kısmı ile hem Tasarım hem de Kod ekranı birlikte gelir.
      Kod sadece HTML kodlarını gösterir. Önizleme ise sonun gösterir.

F12  Yapılan tasarımı İnternet Explorer’da görüntüler.

Enter: Yeni paragraf yapmayı sağlar. Yani HTML deki <p> </p> ye karşılık
gelir.

Shift + Enter: Bir alt satıra geçmeyi sağlar. Yani HTML deki <br>
komutuna karşılık gelir.

BĠÇĠMLENDĠRME ARAÇ ÇUBUKLARI




                           www.bilgiegitim.com
  Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu

1. 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.
2. Yazı Tipi : Yazıların tipini ayarlar. Verdana, Arial …. gibi
3. 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.
4. Kalın : Seçilen yazıları kalın yapar.
5. Ġtalik: Yazıları Eğik – İtalik yapar.
6. Altı Çizili: Yazıların altını çizer
7. Sola Hizala: Paragrafları sola hizalar. Standardında zaten
   paragraflar sola hizalıdır.
8. Ortala: Paragrafları ortalar.
9. Sağa Hizala: Paragrafları sağa hizalı yapar.
10.       Ġki Yana Yasla: 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.
11.       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.
12.       Yazı Tipi Boyutunu Azalt: Yazıların boyutunu her tıklamada
   bir kademe küçültür. En son yazı boyutu 1 olunca pasif olur.
13.       Numaralandırma: Maddeler halindeki yazıların başına
   numara koyar.
14.       Madde ĠĢaretleri : Maddeler halindeki yazıların başına madde
   işaretleri koyar.
15.       Girintiyi Azalt: Maddeler halinde yazılmış yazılar için verilmiş
   girintiyi (içeriden yazılma – boşluk) azaltır.
16.       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.
17.       DıĢ Kenarlıklar: Tablolara kenarlık vermeyi veya kenarlığını
   kaldırmayı sağlar.
18.       Vurgu: Yazıların arka planına renk vermeyi veya verilen rengi
   kaldırmayı sağlar.
19.       Yazı Tipi Rengi: Yazıların rengini ayarlamayı sağlar.




                         www.bilgiegitim.com
     Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu

Web’de renkler HEX kodu olarak (#FF66FF) verilir.



SAYFA ÖZELLĠKLERĠNĠ AYARLAMAK ĠÇĠN

Sayfa içerisinde sağ tuş sayfa özellikleri komutu verilir.

                                        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.




                                        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.




                            www.bilgiegitim.com
     Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu




                                    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.

Dil Sekmesi
Sayfamızın Dilini ayarlayan bölümdür. İngilizce versiyon kullanıyorsak
mutlaka buradan dili ayarlamalıyız. Bu bölüm
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">


Windows için olan Türkçe kodunu sayfaya ekler.

                    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 Eklemek Ġçin;

1-) Ekle Menüsünden  Resim  Dosyadan komutu verilir.
2-) Araç Çubuklarından  Dosyadan Resim Ekle     Simgesine Tıkla resmi
bulunduğu konumdan seç ekle. Kaydet tuşuna bas. Resmin bir yedeğini de
images klasörüne kaydet.

Resmin Özelliklerini Ayarlamak Ġçin;

Resmin üzerine tıkla  Sağ Tuş  Resim Özellikleri komutu verilir.




                            www.bilgiegitim.com
      Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu




                                          Görünüm Sekmesi;
                                          Kaydırma Stili Sola veya Sağa
                                          seçilerek resmin yazı içerisine
                                          yerleşmesi sağlanır. Ayrıca bu
                                          bölümden resmin genişlik ve
                                          yüksekliği görülebilir.

                                          Genel Sekmesi;
                                          İle Resmin Düşük çözünürlüklü
                                          hali belirlenebilir.
                                          Resme Metin kısmından resim
                                          açıklaması eklenebilir.
                                          Link vermek için de köprü
kullanılır.

                 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.

1.) İnternet Sitelerine link vermek
- Adresin başına http://www.bilgiegitim.com konur.
- Başkasının sitesine link verdiğimiz zaman yeni pencerede açtırmak
gerekir. Target=”_blank”
2.) Site içerisindeki sayfalara link vermek (anasayfa- iletişim-hakkımızda)
3.) Farklı dosyalara link vermek ( Word – Excel – Müzik - Film)
- Farklı dosyalara da link verdiğimiz zaman yeni pencerede açtırmak
gerekir. Target=”_blank”
4.) Resimlere link vermek
5.) Resmin değişik noktalarına link vermek
6.) E-mail adreslerine link vermek
7.) Sayfa içindeki konulara link vermek.

Link Vermek Ġçin;
Link olacak olan yazıyı seç.
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.




                            www.bilgiegitim.com
     Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu




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


Dikdörtgen Etkin Nokta, Oval etkin nokta veya Çok köşeli etkin nokta
araçlarından uygun olanı alıp resmin üzerindeki alan seçilir. Seçme işlemi
ile birlikte Köprü ekranı açılır. Oradan da link verilir.

Email Adreslerine Link Vermek Ġçin
Link olacak olan yazıyı seç Sağ Tuş  Köprü komutunu ver. Açılan
Pencerede soldan E-posta Adresi seçeneğine tıkla ve email adresini yaz.

Sayfa Ġçindeki Konu BaĢlıklarına Link Vermek için
  - Önce sayfanın en başına konu başlıklarını alt alta Shift + Enter ile
     yerleştir.
  - Sayfa içindeki konunu başına tıkla Ekle Menüsünden  Yer İmi ile
     tüm konulara isim ver.
  - Sayfanın başındaki konu başlığını seç. Sağ tuş  Köprü komutunu
     ver. Soldan Bu Belgede YerleĢtir’i seç sıra ile konulara link ver.

Linklerin Özelliklerini Ayarlamak
1-) Linklerin Alt Çizgisini Kaldırmak için: Link olan yazıyı seç araç
çubuklarından      altı çizili simgesine tıkla.

2-) Normal Link Renklerini DeğiĢtirmek için: Sayfa içerisinde Sağ Tuş
 Sayfa özellikleri komutu verilir. Biçimlendirme sekmesinden

                               Renkler ayarlanır.




                           www.bilgiegitim.com
      Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu

3-) Link Üzerine Gelince Renk değiĢmesi için: Sayfa içerisinde Sağ Tuş
 Sayfa özellikleri komutu verilir. GeliĢmiĢ sekmesinden
                                      Kutucuk işaretlenip Sitili Çevir
                                     butonuna basılıp ayarlar yapılır.



                                 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.
  -   Bir İnternet sitesinin genişliği kullandığımız monitörün ekran
      çözünürlüğüne bağlı olarak değişebilir. Şu anda internet
      kullanıcılarının büyük bir bölümü 17” Monitör kullanmaktadır. 17”
      Monitör için de çözünürlük değeri 1024*768 pixel olduğu için
      çalışılabilecek en büyük değer 998 pixeldir. İstenirse daha küçük
      çalışılabilir. Fakat daha büyük olması tavsiye edilmez.
  -   Web Siteleri için genişlik …780.. 800..850..900..950..998 gibi
      değerler olabilir.




Tablo eklmek için:
-Tablo menüsünden  Ekle  Tablo komutu verilir.




                            www.bilgiegitim.com
     Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu




                              Satırlar: 5 - satır sayısı
                              Sütunlar: 1 - Sütun sayısı
                              Hizalama: Orta  Yatay Hizalama
                              Genişlik: 998 pixel
                              !!! Bu bölümde genişlik pixel cinsinden
                              olmalıdır.
                              Hücre Doldurma: 0
                              Hücre aralığı: 0
                              Kenarlık: 0

                              Şeklinde ayarlanıp tamam tuşuna basılır.

                            Sonradan tablo özelliklerini değiĢtirmek
                            için: Tablo içerisinde Sağ tuş  Tablo özellikleri
komutu verilip ayarlar değiştirilebilir.

Hücre Özelliklerini ayarlamak için: Hücre içerisinde sağ tuş hücre
özellikleri komutu verilir.

İç içe tablolar kullanılarak site yapısı oluşturulur.

                    ĠLETĠġĠM FORMU OLUġTURMAK
İnternet sitemizi üzerinden bilgi almak, iletişim kurmak için kayıt formu
oluşturmak gerekir.




                             www.bilgiegitim.com
        Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu

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

Ad Soyad                                              -Ekle – Form – Metin Kutusu
Email Adresi

Cinsiyet                               Bay            Bayan - Ekle – Form – Seçenek Düğmesi

                                       Gazete     -Ekle – Form – Onay Kutusu

                                       Afiş

                                       Broşür
Bize Ulaştığınız Referans
                                       Internet

                                       Eski Öğrenci

                                       Tavsiye
Katılacağınız Program                                       - Ekle – Form – Açılan Kutu




Adres



                                                                   - Ekle – Form – Metin Alanı
Telefon                                               - Ekle – Form – Metin Kutusu
Eğitim Almak İstediğiniz İl                                 - Ekle – Form – Açılan Kutu
                                    Kayit Formunu Gönder
                                                           - Ekle – Form – Basma Düğmesi


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.




   -       Eylem kısmına gonder.php veya gonder.asp yazılır.
   -       Dosya kayıt edilir.


                              www.bilgiegitim.com
  Bilgi Teknolojileri Bilgisayar Kursu Microsoft Frontpage Ders Notu

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.

! FTP ile siteyi server’a atıp test edebiliriz.


gonder.php dosyasının içeriği:

<?
$eposta = "kendi email adresiniz";
$ek=date("d m Y G:i,s")."<br>\n";
foreach ($_POST as $anahtar =>$deger){
$ek.="$anahtar : $deger<br>\n";
}
$ek2= "From: $eposta\n";
$ek2.="Content-Type: text/html; charset=iso-8859-9\n";
mail($eposta,"Başvuru Formu ...",$ek,$ek2) ;
Echo"<center>Mesajınız bize ulaştı. En kısa zamanda
cevaplanacaktır.<br>Geri dönmek için<a
href=index.htm>tıklayınız</a></center>";
?>




                           www.bilgiegitim.com

								
To top