bilgiz.org

Microsoft frontpage




Tarih28.12.2017
Büyüklüğü55.09 Kb.

Indir 55.09 Kb.

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

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.

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

ye karşılık gelir.


Shift + Enter: Bir alt satıra geçmeyi sağlar. Yani HTML deki
komutuna karşılık gelir.
BİÇİMLENDİRME ARAÇ ÇUBUKLARI



  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.


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.
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



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.




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.

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.

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.



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.



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

 Bize Ulaştığınız Referans

Gazete -Ekle – Form – Onay Kutusu
Afiş
Broşür
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

 

- 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.

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")."
\n";

foreach ($_POST as $anahtar =>$deger){

$ek.="$anahtar : $deger
\n";

}

$ek2= "From: $eposta\n";



$ek2.="Content-Type: text/html; charset=iso-8859-9\n";

mail($eposta,"Başvuru Formu ...",$ek,$ek2) ;

Echo"

Mesajınız bize ulaştı. En kısa zamanda cevaplanacaktır.
Geri dönmek içintıklayınız
";

?>


www.bilgiegitim.com






    Ana sayfa


Microsoft frontpage

Indir 55.09 Kb.