1- Adobe Dreamweaver - Giriş

WEB TASARIM EDİTÖRÜ – ADOBE DREAMWEAVER CS5

 Web sayfasını kodlar ile oluşturabileceğimiz gibi web tasarım editörleri ile de oluşturabiliriz.  Editör kullanmak zamandan çok büyük tasarruf sağlayacaktır.  Kullanacağımız program en çok kullanılan web tasarım editörlerinden biridir.

1. TEMEL İŞLEMLER

Bu bölümde web tasarımı editörünün ara yüzünü inceleyerek site tanımlama işlemlerini öğreneceğiz.

Çalışma Alanı

Bilgisayarımıza yüklediğimiz programı çalıştırmak için Başlat menüsündeki Programlar bölümünden kurduğumuz web tasarım editörüne tıklamamız gerekmektedir.

Editör Ara yüzü

Şekil 1.1: Web tasarımı editörü karşılama ekranı

Web Tasarımı Editörünü açtığımız zaman ilk olarak karşımıza Şekil 1.1’de gördüğümüz karşılama ekranı gelir. Burada inceleyeceğimiz 5 bölüm bulunmaktadır.

1. Son açılan belgeler listelenir. Web tasarım editörünü ilk defa çalıştırıyorsanız bu bölüm boş gelir. Listede olmayan bir belgeyi açmak için aç düğmesine tıklamamız gerekmektedir.

2. Yeni dosya oluşturma seçenekleri görüntülenmektedir. Bu kısımda daha önce öğrendiğimiz HTML ile çalışacağız.

3. Web tasarım editörünün yeni özellikleri ile ilgili eğitim videoları bulunmaktadır.

4. Web tasarım editörü ile ilgili hazırlanmış ayrıntılı yardım içeriğine ulaşabilirsiniz. Programı başlattığınızda karşılama ekranı yerine çalışma ekranının gelmesini istiyorsanız bir daha gösterme seçeneğini etkinleştiriniz.

Karşılama ekranını geri getirmek için düzen menüsündeki tercihler seçeneğini tıklayınız. Daha sonra genel kategorisindeki karşılama ekranını göster seçeneğini işaretleyiniz.

5. Web tasarımı editörü güncellemelerine, yeni video yayınlarına, makalelere ve yeni ip uçlarına ulaşmak için bu bölüm kullanılır.

 Çalışma Ekranları

Web tasarım editöründe kodlarla ya da tasarımla çalışabiliriz. Bunun için uygulama araç çubuğunda yer alan mizanpaj sekmesi tıklanır. Karşımıza aşağıdaki menü gelir. 

Bu menü sayesinde hangi ekranda çalışacağımızı seçebiliriz. Web tasarım editöründe 4 tane çalışma ekranı vardır. Bunlar:

Code:  Web sayfasının sadece kodları görüntülenir. 

Split Code: Web sayfasının kodları iki sayfaya bölünmüş halde görüntülenmektedir. 

Design: Web sayfasının tasarım hali görüntülenir.

 Code and Design: Web sayfasının tasarım görünümü ve kodları bir arada görüntülenir.

 Bir sonraki dersimiz için tıklayın >> Site Tanımlama Nasıl Yapılır?

HTML Ders-8

Sayfa Dışı Bağlantı Oluşturma

Hazırlamış olduğunuz web sayfaları arasında bağlantılar tanımlayarak başka sayfalar, dokümanlar, resimler arasında geçiş yapabilirsiniz. Sayfa dışına herhangi bir bağlantı (link, köprü) oluşturmak için <a href>…</a> html etiketleri kullanılır.

 Herhangi bir web sayfasına bağlantı oluşturmak;

<a href=”http://www.meb.gov.tr”> Milli Eğitim Bakanlığı</a>

“Milli Eğitim Bakanlığı”, yazısına tıkladığınız zaman “www.meb.gov.tr “ internet sitesi açılacaktır.

 Hazırlamış olduğumuz site içerisinde link vermek;

<a href=”index.html”>Ana Sayfa</a>

“Ana Sayfa” yazısına tıkladığımız zaman hazırlamış olduğumuz ve bilgisayarımızda kayıtlı olan “index.html” sayfasına bağlantı oluşturulacaktır.

 Herhangi bir yazıya tıkladığınız zaman resim açılması için; 

<a href=”okul.jpg”>Okulumuzun Resmini Görmek İçin Tıklayınız</a>

 Herhangi bir dosyaya link vermek için; 

<a href=”portlar.pdf”>Portlar modülünü indirmek için tıklayınız…</a>

<a href=”resimler.zip”>Bilgisayarınıza indirmek için tıklayınız</a>

Target parametresini kullanarak, açılacak olan sayfa, resim veya dosyanın açılacağı pencereyi belirtebiliriz.

<a href="..."  target="..."></a>

target="_blank": Bağlantının, yeni bir pencerede açılmasını sağlar.

target="_self": Bağlantının, aynı pencere içerisinde açılmasını sağlar.

target="_top": Bağlantının, aynı pencere içerisinde en üstten itibaren açılmasını sağlar.

target="_parent" : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerinde açılmasını sağlar.

target="çerçeve(frame) adı": Bağlantının, adı verilen çerçevede açılmasını sağlamak için kullanılır.

<a href=http://www.meb.gov.tr target=”_blank”> Milli Eğitim Bakanlığı</a>

E-Posta Adresine Bağlantı Oluşturma

Hazırlamakta olduğunuz web sitesi aracılığıyla istenilen herhangi bir e-posta adresine bağlantı oluşturabilirsiniz.

E-posta adresine bağlantı oluşturmak için;

<a href=”mailto:e-posta adresi”>….</a> komutu kullanılır.

Örnek:
<a href=”mailto: etogm@meb.gov.tr”> E-posta göndermek için tıklayınız.</a>

Yukarıdaki html komut satırını yazıp kaydettiğinizde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

E-posta göndermek için tıklayınız yazısına, tıklandığı zaman konu, bilgi ve e-posta adresi gibi bilgilerin girilebileceği Şekil’de görünen e-posta gönderme programı açılacaktır. İstenilen bilgiler yazıldıktan sonra “Gönder” düğmesine tıklandığında, e-postamız gönderilmiş olur.

E-posta adresine bağlantı oluşturma

>>Bir Sonraki Dersimizde Buluşmak Dileğiyle...