Dreamweaver'da Basit bir Site Oluşturmak - 4 (Sayfalarımızı birbirine bağlamak)

Dreamweaver'da web sayfamızın iskelet yapısını oluşturduk. Web sayfamızın temel görünüm ayarlarını yaptık bundan sonra yapmamız gereken ilk şey sayfamızın sayfalarımızı çoğaltıp çoğaltığımız sayfalarımızı birbirine bağlamamız gerekmekte bu işlemide gerçekleştirdiğimiz anda basit bir web sitesini ana hatları ile tanımlamış olacağız.

Peki bu işlemleri nasıl yapacağız.




Dört adet sayfaya ihtiyacımız var fakat bizim sadece 1 adet sayfamız var bu durumda yapmamız gereken şey sayfalarımızı farklı kaydet komutuyla farklı isimlerde 3 kez kaydetmek. Bundan sonra ise sayfalarımızı birbirlerine linkleyip sitemizi tamamlayacağız.

Index.html sayfamız açıkken menuden files > save as komutu ile sayfalarımızı hakkimizda.html olarak bir kez daha sonra urunler.html olarak bir kez daha ve daha sonrada iletisim.html olarak kaydedeceğiz.

File > Save as

Bu işlemi menumuzdeki tüm elemanlar için bu işlemi tekrar ederek sayfa sayımızı 4'e çıkarıyoruz. Bu işlemlerden sonra Files Panelinin resimdeki gibi gözükmesi gerekiyor.

Files Paneli Son Hali

Tüm sayfalarımızı oluşurduk şimdi sayfalarımızı birbirlerine bağlamamız gerekmekte bundan sonra ise sayfalarımızın içeriklerini düzernleyeceğiz css kuralları ile sayfamızın içeriklerindeki yazıların ve resimlerin ne şekilde görüneceklerini belirteceğiz ve sitemiz oluşmuş olacak. Şimdi sayfalarımızı birbirlerine bağlamak için yapmamız gerekenlere bir bakalım.

Anasayfamız (Index.html)

Menuleri:

• anasayfa --->index.html
• hakkımızda--->hakkimizda.html
• ürünler---->urunler.html
• iletişim---->iletisim.html

Ana sayfamızdaki her menu elemanından tüm sayfalara bağlantı sağlamalıyız.

Hakkımızda sayfamız (hakkimizda.html)

Menuleri:

• anasayfa --->index.html
• hakkımızda--->hakkimizda.html
• ürünler---->urunler.html
• iletişim---->iletisim.html

Hakkımızda sayfamızdaki her menu elemanından tüm sayfalara bağlantı sağlamalıyız.

Ürünler Sayfamız (urunler.html)

Menuleri:

• anasayfa --->index.html
• hakkımızda--->hakkimizda.html
• ürünler---->urunler.html
• iletişim---->iletisim.html

Ürünler sayfamızdaki her menu elemanından tüm sayfalara bağlantı sağlamalıyız.

İletişim Sayfamız (iletisim.html)

Menuleri:

• anasayfa --->index.html
• hakkımızda--->hakkimizda.html
• ürünler---->urunler.html
• iletişim---->iletisim.html

İletişim sayfamızdaki her menu elemanından tüm sayfalara bağlantı sağlamalıyız.

Yani unutmamamız gereken şey her sayfadan her sayfaya bağlantı vermek zorundayız işlem oldukça uzun sürecek gibi görünüyor ancak çok kolay bir işlem olduğundan çok uzun sürmeyecek şimdi bu işlemi nasıl yapacağımıza bir bakalım.

Dreamweaver Link Oluşturmak

Yapmamız gereken bağlantı eklmek istediğimiz menu elemanını seçip properties panelindeki link kutusunun yanındaki point to file iconunun üzerinden çekip resimdede görünen oku doğru sayfanın üzerine çekmek Evet o oku ben çizmedim gerçekten öyle bir ok var ve onu sürükleyip o yazıya tıklandığında hangi sayfanın açılmasını istiyorsanız files panelinden onun üzerine sürüklüyorsunuz.

İlk olarak files panelinden index.html sayfasının üzerine çift tıklayalım. Sayfayı açalım sonrada teker teker menu elemanlarımızı seçip o yazının üzerine tıklandığında hangi sayfanın açılmasını istiyorsak link kutusunun yanındaki point to file okunu o sayfanın üzerine çekiyoruz. 

Daha sonra files panelinden hakkimizda.html sayfasının üzerine çift tıklayıp o sayfayı da açıyoruz. Sonrada bu sayfadaki menu elemanlarını sırasıyla seçip o yazı tıklandığında hangi sayfanın açılmasını istiyorsak link kutusunun yanındaki point to files okunu onun üzerine çekiyoruz. 

Anasayfa > index.html'e

Hakkimizda > hakkimizda.html

Ürünler > urunler.html

İletişim > iletisim.html 'e

bütün sayfalarımızda bu işlemi tekrarlıyoruz. urunler.html sayfasınıda files panelinden çift tıklayarak seçili hale getiriyoruz. Buradada aynı işlemleri tekrarlıyoruz. En son olarak iletisim.html sayfasınında üzerine çift tıklıyoruz. Bu sayfada da aynı işlemleri tekrarlıyoruz. 

Bütün bu işlemleri tamamladıktan sonra sayfalarımızın hepsini birden kaydetmek için 

Save All

Tüm sayfalarımızın yan yana dizili olduğu bölümün yanında gri alanda sağ tıklayıp Save All komutu ile tüm sayfalarımızı birden save ediyoruz. 

Bunun ardından Preview in Browser diyerek sayfalarımız arasında şöyle bir zevkle gezelim biliyorum hepsi aynı gözüküyor ama adres çubuğundan hangi sayfaya geçtiğimizi rahatlıkla kontrol edebiliriz.