15.04.2023 1

FRONTPAGE -2

15.04.2023 2

Web Alanı Tanımlamak için1-) Dosya menüsünden Yeni komutu verilir.2-) Sağda açılan panelden Yeni Web sitesi Web paketi çözümleri üzerine

15.04.2023 3

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

Tamam butonuna basarak işleme devam edilir.

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

15.04.2023 5

PROGRAMIN ARAYÜZÜ

15.04.2023 6

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.

15.04.2023 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 …. gibiYazı 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ı çizerSola Hizala: Paragrafları sola hizalar. Standardında zaten paragraflar sola hizalıdır. Ortala: Paragrafları ortalar.Sağa Hizala: Paragrafları sağa hizalı yapar.İ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.

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

15.04.2023 9

SAYFA ÖZELLİKLERİNİ AYARLAMAK İÇİN

Genel SekmesiBaş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.

15.04.2023 10

SAYFA ÖZELLİKLERİNİ ARAYÜZÜ

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

15.04.2023 12

Biçimlendirme Sekmesi Arayüzü

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

15.04.2023 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 ;

15.04.2023 15

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.

15.04.2023 16

Resmin Özelliklerini Ayarlamak İçin;

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

15.04.2023 17

LİNKLER – KÖPRÜLER -BAĞLANTILARLink: 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.

15.04.2023 18

Link Vermek İç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.

15.04.2023 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

15.04.2023 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

15.04.2023 21

Tablo eklemek için:

Tablo menüsünden Ekle Tablo komutu verilir.

15.04.2023 22

İLETİŞİM FORMU OLUŞTURMAK

İnternet sitemizi üzerinden bilgi almak, iletişim kurmak için kayıt formu oluşturmak gerekir.

15.04.2023 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

15.04.2023 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

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

15.04.2023 26

TEŞEKKÜRLER..