Form alanlarında biz aksini belirtmedikçe tüm alanların doldurulmasına gerek yoktur. Bu nedenle tasarımda formlar her zaman üzerinde iki kere düşünülmesi gereken elemanlardır. Formda istenilen bir değerin girilmemesi durumunda verilecek olan bir uyarı kullanıcı/ziyaretçiyi bilgilendirir ve buna göre hareket etmesi sağlanır. Bilgi girişinin sağlandığı bu elemanlar bu yüzden her zaman suistimale açıktırlar. Adobe Dreamweaver CS4 kullanarak önce basit bir form yapacağız ve sonra bu formda boş bırakılan yerlerde bir uyarı mesajının görünmesini sağlayacağız. Dilerseniz hemen başlayalım.

Öncelikle Dreamweaver’da boş bir Html dosya açalım. Sonra bir form oluşturalım. Bu formda kullanıcıdan adını ve e-posta adresini yazmasını isteyelim. 2 tane metin girdi elemanı ekleyelim. Sonrasında form menüsünden gönderme butonumuzu koyarak formumuzu tamamlayalım.

Hemen hemen aşağıdaki gibi bir form alanına sahip olmamız gerekiyor.

Şimdi fare ile formumuzun Ad soyad isteyen İnput bölümüne bir kere tıklayıp seçili hale getiriyoruz. Bu aşamadan sonra üst menüden Spry bölümüne geliyoruz. Burada Spry Validation Text Field butonuna tıklıyoruz. Böylece metin girdi alanımızda Spry js kullanarak bir form kontrolü sağlamış olduk. Aynı işlemi e-posta adresini istediğimiz metin girdi alanı için de yapalım.

Dokümanı .html uzantılı olarak kaydedelim ve tarayıcımızda izleyelim. Ad soyad veya e-posta alanlarından birini boş bırakıp formu onaylamaya çalıştığınızda form ögesinin yanında “A value is required” mesajı alacağız.

Dikkat ettiyseniz forma Text validation opsiyonunu eklediğimizde SpryValidationTextField.js ve SpryValitadionTextField.css isimli iki dosya da oluşuyor. Formun kontrolünü sağlayan ana js dosyası ve stilleri barındıran stil dosyası da çalışmamızın olduğu dizinde kayıt oluyor.

Stil dosyasında yapacağınız değişikliklerle uyarı mesajının daha iyi görünmesini sağlayabilir ve görünümünü özelleştirebilirsiniz. Sadece metin girdi alanlarında değil Textarea, Radio buton gibi diğer form ögelerinde de aynı kontrolü sağlayabilirsiniz. Umarım yararlı olur.

Merhabalar, daha önce de sitemizde Dreamweaver ile ilgili bir takım makaleler yazmıştık. Şimdi bunlardan bir başkasını da sizlerle paylaşıyoruz. Bu makalemizde Dreamweaver ile hali hazırda kullanmış olduğumuz bir local sunucu üzerinde barınan veritabanına nasıl ulaşabileceğimizi anlatacağız. Ancak makalemize başlamadan önce kullanmış olduğunuz local sunucu yazılımını açıp (Wampserver, Xampp, PhpTriad, EasyPhp gibi) Dreamweaver’da bir site tanımlamış olmanız gereklidir.

Şimdi uygulamamıza geçelim, öncelikle Dreamweaver üzerinde bir Php doküman açalım. Daha sonra Window menüsünden Database bölümüne tıklayalım. Dilerseniz Ctrl+Shift+F10 kısayol tuşuyla da bu bölümü görebilirsiniz. Yan menüde (şayet yan menünüz açıksa) Application başlığı altında bölümü görebilirsiniz.

Bu aşamadan sonra Database bölümünde yer alan + işaretine bir kez tıklayalım. Bağlantının hemen altında Mysql Connection bölümü çıkacak. Buna tıkladıktan sonra karşımıza aşağıdaki gibi bir pencere gelecek.

Bu aşamadan sonra yapacağımız şey burada istenen bilgileri doldurmak ve verdiğimiz bilgilere göre programın kullandığımız veritabanına erişmesini sağlamak. İstenilen bilgilerde veritabanımıza bağlanmak için geçerli olan klasik kullanıcı adı, şifre, veritabanı sunucu ismi gibi bilgiler. Örnek resimde gördüğünüz üzere ben bunları doldurdum.

Son aşamada pencerenin en altında bulunan Databases bağlantısına tıklıyoruz. Burada vermiş olduğumuz bilgiler ışığında bağlanılabilecek veritabanlarının listesini görüyor olmalısınız. Buradan herhangi bir veritabanını seçerek penceremizi kapatıyoruz. Artık veritabanı bağlantımız hazır!

Peki bu bağlantı ile neler yapılabilir; bu bağlantıyı sağlayarak istediğiniz veritabanı tablosuna işlem yaptırabilir, sorgu (Recordset) gönderebilir, sonuçları harici bir .php sayfada gösterebilirsiniz. Tabi yapılabilecek birçok işlem sizi bekliyor.

SORUNLAR VE BAĞLANAMAMA DURUMLARI

Bazı hallerde veritabanı bağlantınızı sağlayamayabilirsiniz. Bu durumların bazı olası nedenleri şöyledir;

• Sunucu programınız açık olmayabilir,

• Mysql çalışmıyor olabilir,

• Daha önce Site Defination (Site Tanımlama) yapmamış olabilirsiniz,

• Veritabanına bağlanmak için gerekli olan kullanıcı şifresini yazmamış olabilirsiniz. Kaldı ki veritabanına ulaşmak için yetkili girişine bir şifre tanımladıysanız bunu Dreamweaver üzerinde yazmanız gerekiyor.

Dreamweaver, piyasada bulunan benzerlerine göre birçok işlevi ve özelliği ile diğer web tasarım editörlerinden ayrılıyor. Belki de bu denli çok tercih edilmesinin ve profesyonellerce kullanılmasının sebebi budur. Geliştirilen özellikleri ve eklentileri ile Dreamweaver, MX serisinden bu yana birçok web tasarımcısının gözdesi.

Bu makalemizde sizlere kısaca Dreamweaver’ın bir başka özelliği olan “Site Defination” dan bahsedeceğim. Site Tanımlama olarak Türkçemize çevirebileceğimiz bu fonksiyon sayesinde Dreamweaver ile tasarım işlerimizi biraz daha kolaylaştıracağız ve hızlanacağız. Dilerseniz hemen konumuza geçelim.

Dreamweaver’da Site Tanımlama Nedir?
Kısaca bahsetmemiz gerekirse Site Defination bilgisayarımızda çalıştığımız yerel bir klasörün Dreamweaver’da tanımlanması ve varsa kullanılan dil ile birlikte (Php, Asp, Jsp gibi) çalışma dizinimizin Dreamweaver’a tanıtılmasıdır. Bu pencereden bakıldığında biraz karışık bir tanımlama gibi duruyor ancak aşağıda yapacağımız örnek uygulama ile konuyu biraz daha ayrıntıya kavuşturacağız.

Site Tanımlama bizlere birçok alanda kolaylık sağlar. En basit durumda hepimiz bilgisayarımızda bir Web Sunucu programına sahibizdir. Bilhassa Php, Mysql işlemlerimizi yapabilmek için PhpTriad, EasyPHP, Wampserver gibi Windows üzerinde çalışan sunucu programları edinmişizdir. (Şahsen ben bunlardan Wampserver’ı tercih ediyorum) Bu sayede sunucu programımızın bizlere vermiş olduğu dizin altında Php script uygulamalarımızı geliştirebilir, örneğin bir Wordpress yazılımı kurabilir ve “localhost” üzerinde bunu geliştirebiliriz.

Bununla birlikte farklı alanlardaki çalışmalarımız için açtığımız dizinleri bir araya toplamak ve birbirleri arasında geçiş yapmak için de Site Tanımlama kullanılabilir. Bu sayede bir çalışmayı kapatmadan başka bir dizin üzerinde bulunan .html, .php, .css dosyalarımızı açabilir ve düzenlemeye geçebiliriz.

Genellikle Site Tanımlama çalışmak istediğimiz Php, Asp gibi doküman tipine sahip sayfaların kolay organizesi ve veritabanı bağlantısı kurmak için kullanılmaktadır. (Sanıyorum bu tanımlama daha açık ve iyi oldu)

Şimdi bir örneklem üzerinden sizlere konuyu ayrıntılı olarak anlatacağım.

Bilgisayarımda Wampserver kullanıyorum. Programın öngördüğü çalışma dizinini değiştirmedim. Bu dizinim C:\wamp\www şeklinde şu anda kullanımda. Bu şu demek; kurmak ve geliştirmek istediğim tüm Php bileşenlerini bu dizin içine atarak (www dizini) işlemlerimi yapabilirim. Wordpress, Drupal, Xoops, Joomla ve aklımıza gelmeyen yüzlerce Php, Mysql tabanlı scriptin düzenlenmesi ve kullanılması işlemi bu dizin altından yapılabilir.

C:\wamp\www dizini benim “localhost” dizinimdir ve ana klasör olarak tüm scriptlerim bu alanda bulunur. Şayet bu alanda yer alan script klasörlerinden birisini Dreamweaver ile düzenlemek istersem bu dizini Dreamweaver’a göstermem ve tanımlamam gerekir.

C:\wamp\www\wordpress dizinimde son sürüm bir Wordpress scripti kurulu ve bunu Dreamweaver’a tanımlamak istiyorum. O halde hemen Dreamweaver’ı açıp işlemimize başlıyoruz.

Site Tanımlama’ya Başlıyoruz
Dreamweaver üzerinde bir Php doküman tipine sahip yeni çalışma sayfası oluşturun. Karşınızda boş bir Php sayfası olacak ve bunun üzerinden işlemimizi yapacağız.

Üst menüden Site >> New Site bağlantısını tıklıyoruz. Karşımıza Site Tanımlama için bizi yönlendirecek olan sihirbaz gelecek. İlk pencere üzerinde site ismimiz ve kullanacağımız dizinin localhost’taki bağlantısını isteyen alanlar göreceksiniz. Site ismimizi Wordpress olarak belirleyelim. Ana URL olarakta http://localhost/wordpress diyelim. (Neden böyle dedik, çünkü benim Wordpress dizinim C:\wamp\www\wordpress üzerinde bulunuyor ve C:\wamp\www = http://localhost/ demektir, çok basit değil mi?)

İkinci adımda ise bize herhangi bir sunucu dilini tercih edip etmeyeceğimiz soruluyor. Wordpress Php, Mysql bileşimi bir sistem olduğu için bu soruya “Yes, I want to use a server technology” cevabını verip aşağıdan Php Mysql kardeşleri seçiyoruz.

Üçüncü adımda ise mevcut dosyalarımızın geliştirme durumunda nasıl kullanılacağı soruluyor. Bu şu demek belirttiğimiz dizinde bir dosyamız değiştirildiğinde bunun durumu ne olacak. Yeni dosyamız tanımlı dizine mi gönderilecek yoksa sadece bu dizin test ve deneme amaçlı mı kullanılacak. Bu alanda ise her zaman ortadaki seçenek default olarak geliyor. Biz de bu alanı seçili bırakıyoruz ve aşağıya dosyalarımızın bulunduğu dizini tanımlıyoruz. Benim örneğimden gidecek olursak C:\wamp\www\wordpress dizinini belirtmem gerekiyor.

Sonraki adımda ise genel bağlantı tipimiz soruluyor. Bağlantı tipinden kastım yanlış anlaşılmasın bu bir internet veya proxy bağlantısı değil. Dosyalarımız nerede düzenleyeceğimize dair bir bağlantı sorusu. Local/Network seçeneği zaten default olarak geliyor. Bu şu demektir ki; ben sadece localhost üzerinde işlemler yapacağım. Burada bulunan dosyalarımı değiştirip yine bu bilgisiyarda kalmasını istiyorum. Dilerseniz bir FTP hesabı veya WebDav hesabı kullanarakta işlemlerinizi yapabilirsiniz. Ancak bizim asıl amacımız zaten yerel dosyalarımızı ve uygulamalarımızı düzenlemek. Bu nedenle Local/Network seçeneği aktifken aşağıda yine bir önceki adımda olduğu gibi dizinimizi tanımlıyoruz. Ben yine C:\wamp\www\wordpress olarak dizinimi belirledim.

Sonraki adımda ise Dreamweaver’ın kullancağı Ana URL soruluyor. Kullanacağımız mevcut Http yapısına sahip url’yi programa bildiriyoruz. Yukarı maddelerde de söylediğim gibi benim ana dizinime kurulu bir wordpress klasörüm olduğu için bu alana http://localhost/wordpress yazmam yeterli. Bu aşamadan sonra dilerseniz hemen TEST URL tuşunu kullanarak vermiş olduğunuz bağlantının çalışıp çalışmadığını test edebilirsiniz. Aşağıdaki resimde göreceğiniz üzere ben bağlantımı kontrol ettim ve bir sorun olmadığına dair uyarı mesajımı aldım.

Son adımlara gelirken artık Dreamweaver size Dosyaların Paylaşımı ile ilgili kriterlerinizi soracak. Tanımladığınız dizindeki klasörlere erişim yetkisi gibi bir sistem olarak düşünülebilir. Şayet sizin dışınızda bu dosyalara başka kimsenin erişimi olmayacaksa bu alanı No ile başlayan seçeneği işaretleyerek geçebilirsiniz. (Ben hiç yes seçeneğini kullanmadım)

Bu bölümden sonra da artık Dreamweaver bize son adımı gösterecek ve yapmış olduğumuz değişimleri ekrana yansıtacak. Bu bölümde girmiş olduğumuz tüm bilgilerin bir derlemesini göreceksiniz. Şayet herhangi bir yanlışınız yoksa Done tuşuna basarak işlemi sonlandırabilirsiniz.

Bu aşamadan sonra Dreamweaver otomatik olarak belirttiğiniz dizini okuyacak ve Cache alarak size program içinde “Files” sekmesi altında tüm dosyalarınızı gösterecektir. Artık Dreamweaver ile bir dizinimizi tanımlamış olduk. Bundan böyle çalışmak istediğimiz bu dizini seçerek işlemlerimizi yapabiliriz.

Yukarıda anlattığımız aşamalar Dreamweaver’ın Site Defination sihirbazı ile yaptığımız adımlardı. Bunlarda kullanıcıya sorulan sorular ve alınan cevaplar ile tanımlama işlemi yapılıyor. Siz dilerseniz Advanced seçeneğinde daha ileri opsiyonlar kullanarakta site tanımlama işlemini gerçekleştirebilirsiniz.

Pekala Site Tanımlama işlemini başarıyla gerçekleştirdik ancak tanımladığımız dizini her zaman yeniden mi tanımlamak ya da programa göstermek mi gerekiyor? Hayır, çalışmak istediğiniz tanımlı siteler arasında geçişler yapabilirsiniz. Bunun için basit yöntemle yine üst menüden Site >> Manage Sites bağlantısını kullanabilirsiniz. Karşınıza çıkan küçük pencerede tanımladığınız dizinler görünecektir. Bunların arasında geçişler yapabilir veya dilerseniz bir sitenin tanımlanmış bilgilerini değiştirebilirsiniz.

Site Tanımlama işlemi yapılan ve sunucu teknolojisi belirtilen bir dizinde Dreamweaver’ın özelliklerinden yararlanılarak rahatlıkla Veritabanı Bağlantısı kurulabilir, veri ekleme çıkarma formları oluşturulabilir. Sahip olduğunuz eklentiler (Extensions) sayesinde farklı fonksiyonlar ekleyebilirsiniz.

Efendim Site Tanımlama işlemini bu kadar uzun uzadıya anlatmamızın nedeni; program üzerinde profesyonel bir çalışma ortamı sağlamak isteyen kişilerin evvela bu işlemi yapması gerektiğine inandığımdır. Kaldı ki Site Tanımlama opsiyonu kullanılarak hem farklı sunucu dilleri kullanılabilir ve kendi yaptığımız uygulamaları geliştirebiliriz.

Dreamweaver ile rahatlıkla bir “Blog” yazılımı oluşturabilir ve bunu sitemizde kullanabiliriz. Belki bu da başka bir makale konusu olur. Sürç-i lisan ettiysek affola. Yanlışlarımız ve hatalarımız konusunda uyaran dostlarımız olursa çok çok seviniriz. Bir başka makalemizde görüşmek üzere.

Tasarladığımız web sitelerinde sıklıkla açılır menüler ve buna benzer navigasyon araçları kullanırız. Belli bir alandaki resim ya da metin tabanlı link üzerine gelindiğinde açılır menü yardımıyla ilgili kategorinin alt dallarını ve menü başlıklarını görebiliriz. Çoğu zaman bu menüler doğru yerlerde kullanıldığında büyük bir navigasyon kolaylığı sağlarlar.

Bu yazımızda kısaca Adobe Dreamweaver ile resim ve metin tabanlı bağlantılarımızla açılır menülerin nasıl oluşturulacağını, özelleştirilmesini ve kullanımını anlatacağız. Öncelikle Dreamweaver üzerinde yeni bir HTML doküman oluşturun. Bu dokümanınızı ister bir dizin isterseniz de farklı bir alana isim vererek kaydedin.

Şimdi bilgisayarınızda hazırlamış olduğunuz bir buton tarzı resmi veya hazır olarak bulunan buton görünümlü bir resmi sayfanıza yerleştirin. Bunu yapabilmek için Common menüsünden Image alanına gelebilir ve burdan sayfaya eklemek istediğiniz resmi seçebilirsiniz. Ben aşağıda görmüş olduğunuz resmi sayfama ekliyor ve çalışmama devam ediyorum.

Bu resmi sayfaya ekledikten sonra sıra açılır menümüzü oluşturacağımız işlem aşamasına geliyor. Resme bir kere tıklayıp seçtikten sonra F9 tuşuna basarak Tag Inspector alanını aktif hale getiriyoruz. Yine resim seçiliyken burada Behaviors >> Show Pop-Up Menu sekmesine geliyoruz. Bu alana tıkladığımız zaman karşımıza bir pencere açılacak ve menü işlemlerimizi bu pencere altında devam ettireceğiz.

Açılan penceremizde açılır menümüze ait bölümleri tanımlayabilir ve bunlara link verebiliriz. İlk alanda bu işlemleri yapabilmemiz için bazı bölümler göreceksiniz. Buraya sırasıyla bir iki link eklemesi yapalım ve işlemi devam ettirelim.

Bu alanda menü birimlerimin görünecek metin bilgisini yukarıya Text olarak bildirilen alana yazıyorum. Onun hemen altındaki link alanına ise bu bağlantının ulaşacağı linki yazıyorum ve daha sonra bu bilgiyi girdikten sonra + tuşuna basarak yeni bir bağlantı eklemeye başlıyorum. Şayet siz yeterli sayıda bağlantı eklediğinizi düşünüyorsanız + tuşuna basmadan diğer sekmelere geçebilirsiniz.

Bundan sonraki sekmelerde sırasıyla Appearance, Advanced ve Position sekmelerinde bazı değişiklikler yaparak menümüzü şekillendireceğiz.

Şimdi Content sekmesinde menümüzün görünecek olan bağlantılarını yazdık ve linklerini verdik. Bundan sonra Appearance kısmına geçerek menümüzün renklerini ayarlayalım.

Appearance sekmesinde üst bölümde menümüzün ne “tipte” bir menü olduğunu belirliyoruz. Karşımıza iki seçenek sunuluyor; Vertical yani dikey ve Horizontal, yatay menü. Bu aşamada menü sisteminin tipini belirlemek size kalmış. Ben bu örnekte Vertical tipi seçtim ve işlemlerime böyle devam edeceğim.

Yine aynı bölümde menü bağlantımızın görüneceği font tipini, boyutunu ve hizasını seçebiliyoruz. Bu işlemlerden sonra aşağı alanda ise menü birimlerimizin fare hareketleri sırasında alacağı renk değerlerini girmemiz gerekiyor.

Up state alanı menümüzün açılır bölümünün kendi renk değerlerini gösterirken Over state alanı ise menü birimlerinin üzerine fare ile gelindiğinde alınacak olan renk değerlerini göstermekte. Bu alandaki renk belirlemelerini siz kendiniz deneyerek yapabilirsiniz. Ben aşağıda görmüş olduğunuz renk biçimlerinde ayarlamalar yaptım ve bunu örneğim üzerine yansıttım.

Bu aşamadan sonra aynı panelde Advanced sekmesine geliyoruz. Bu bölümde ise menü birimlerimizin sahip olacağı hüce boşluklarını ve kenarlık ayarlarını yapıyoruz. Cellpadding ve Cellspacing bölümlerine vereceğiniz farklı değerlerde değimlerin menü sisteminize nasıl yansıdığını anında görebilirsiniz. Bu alanda yukarıda söylediğim gibi menümüze kenarlık (border) ekleyebilir ve kenarlıklarınıza renkler verebilirsiniz. Aşağıda örnek çalışmanın değerlerini görebilirsiniz.

Bu alandaki değerlerimizi de verdikten sonra son sekmemiz olan Position bölümüne geliyoruz. Bu alanda menü birimlerimizin genel pozisyonlarını ayarlayacak ve bunlar hakkında ayarlamalar yapacağız.

Position sekmesinde ise menümüzün fare ile üzerine gelindiğinde alacağı pozisyonu ayarlıyoruz. Bu bölümde genellikle menümüzün ilgili resmin veya bağlantının altında çıkmasını istiyorsak ikinci resmi seçiyoruz. Bu bölümde hangi alanı seçerseniz seçin X ve Y koordinatlarına değerler verebilir ve menü pozisyonunuzu bu şekilde de ayarlayabilirsiniz. Ben yine aşağıda görmüş olduğunuz örnek çalışma için pozisyon bölümünün bir resmini göstermek istiyorum.

Bu aşamadan sonra açılır menümüz hazır vaziyette. Dosyanızı kaydederek F12 tuşuna basıp tarayıcınızda nasıl çalıştığını görebilirsiniz.

Bu makalemizde ben örneğimi tamamladım ve bu alanda örneğin son haline ulaşmanız mümkün. Makale üzerinde bahsettiğimiz gibi tüm işlemleri metin tabanlı bağlantılarınız için de kullanabilir ve menülerinizi oluşturabilirsiniz. Bir sayfa içinde farklı alanlarda ve farklı bölgelerde istediğiniz kadar açılır menü kullanabilir ve bunların tipini belirleyebilirsiniz.

Bu menü sisteminde dikkat etmeniz gereken tek nokta ise programın sizin için oluşturduğu mm_menu.js dosyasının sayfanız ile aynı dizinde olmasına dikkat etmek. Zaten kaydettiğiniz sayfa içinde de bu JS dosyasına ithafta bulunulduğunu ve yolunun yazıldığını göreceksiniz. Web sayfalarınızda veya farklı dizinler içinde bu menü sistemini kullanırken pathlerinizi buna göre ayarlamanız sizin için iyi olacaktır.

Umarım sizler için faydalı olur. Bir başka makalede görüşmek üzere.