Dreamweaver, Web siteniz için açılır menüler oluşturmayı kolaylaştırır. Ancak tüm HTML formları gibi biraz zor olabilirler. Bu öğretici, Dreamweaver’da bir açılır menü oluşturma adımlarında size yol gösterecektir.
Dreamweaver Atlama Menüleri
Dreamweaver 8, Web sitenizde gezinmek için bir atlama menüsü oluşturmak için bir sihirbaz da sağlar. Temel açılır menülerin aksine, bu menü işiniz bittiğinde bir şeyler yapacaktır. Açılır formunuzun çalışması için herhangi bir JavaScript veya CGI yazmanız gerekmeyecek. Bu öğretici ayrıca bir atlama menüsü oluşturmak için Dreamweaver 8 sihirbazının nasıl kullanılacağını da açıklar.
İlk olarak, Formu Oluşturun
Atlama menüsü gibi özel sihirbazlar dışında Dreamweaver, HTML formlarını “çalıştırmanıza” yardımcı olmaz. Bunun için bir CGI veya JavaScript’e ihtiyacınız var. Web sitenize bir açılır menü eklerken ihtiyacınız olan ilk şey, onu çevreleyen bir formdur. Dreamweaver’da Ekle menüsüne gidin ve Form’u tıklayın, ardından “Form”u seçin.
Tasarım Görünümünde Form Görüntüleri
Dreamweaver, form konumunuzu tasarım görünümünde görsel olarak gösterir; böylece, açılır menü etiketleri form öğesinin dışında geçerli olmadığından (ve çalışmaz) form öğelerinizi nereye koyacağınızı bilirsiniz. Resimde de görebileceğiniz gibi, form tasarım görünümündeki kırmızı noktalı çizgidir.
Liste/Menü Seç
Açılır menülere Dreamweaver’da “liste” veya “menü” öğeleri denir. Formunuza bir tane eklemek için Ekle menüsündeki Form menüsüne gitmeniz ve “Liste/Menü” seçeneğini seçmeniz gerekir. İmlecinizin form kutunuzun kırmızı noktalı satırında olduğundan emin olun.
Özel Seçenekler Penceresi
Dreamweaver Seçenekleri’nde Erişilebilirlik ile ilgili bir ekran vardır. Bu beş seçeneği doldurursanız, açılır menülerinize diğer web sitelerinden hemen daha erişilebilir olacaktır.
Form Erişilebilirliği
Erişilebilirlik seçenekleri şunlardır:
Etiket
Etiket alanı, form öğenizin yanında metin olarak görünür. Açılır menünüz için bir ad yazın. Açılır menünün yanıtlayacağı bir soru veya kısa bir ifade olabilir.
stil
HTML, form etiketlerinizi web tarayıcısına tanıtmak için bir etiket etiketi içerir. Seçenekleriniz, açılır menüyü ve etiket metnini etiketle sarmak, hangi form etiketine atıfta bulunduğunu belirlemek için etiket etiketindeki “for” niteliğini kullanmak veya etiket etiketini hiç kullanmamaktır.
Durum
Etiketinizi açılır menünün önüne veya arkasına yerleştirebilirsiniz.
Erişim anahtarı
Ziyaretçiler, doğrudan bu form alanına gitmek için Alt veya Option tuşlarıyla birlikte bir erişim anahtarı kullanabilir. Bu klavye kısayolu, formlarınızı fare olmadan kullanmayı çok kolaylaştırır.
Sekme Dizini
Sekme dizini, web sayfasında sekme yapmak için klavyeyi kullanırken kullanıcıların form alanlarına nasıl erişmesi gerektiğidir. Erişilebilirlik seçeneklerinizi güncellediğinizde Tamam’ı tıklayın.
Menüyü Seçin
Açılır menünüzü Dreamweaver tasarım görünümünde görüntüledikten sonra çeşitli öğeleri eklemeniz gerekir. İlk olarak, üzerine tıklayarak açılır menüyü seçin. Dreamweaver, onu seçtiğinizi göstermek için yalnızca açılır menünün çevresine başka bir noktalı çizgi koyacaktır.
Menü Özellikleri
Özellikler menüsü, o açılır menünün liste/menü özelliklerine dönüşecektir. Burada menünüze bir kimlik verebilir (“seç” yazdığı yerde), bunun bir liste mi yoksa bir menü mü olmasını istediğinize karar verebilir, stil sayfanızdan bir stil sınıfı verebilir ve açılır menüye değerler atayabilirsiniz.
Liste ve Menü Arasındaki Fark Nedir?
Dreamweaver, yalnızca bir seçime izin veren herhangi bir açılır menüyü bir açılır menü olarak adlandırır. Bir “liste”, açılır menüde birden fazla seçeneğe izin verir ve birden fazla öğe yüksekliğinde olabilir. Bir açılır menünün birden çok satır yüksekliğinde olmasını istiyorsanız, bunu bir “liste” türüyle değiştirin ve “seçimler” kutusunu işaretlemeden bırakın.
Yeni Liste Öğeleri Ekle
Menünüze yeni öğeler eklemek için, yukarıdaki pencereyi açan “Liste değerleri…” düğmesini tıklayın. Ardından, öğe etiketinizi ilk kutuya yazın. Sayfada görüntülenecektir.
Daha Fazla Ekle ve Yeniden Sırala
Daha fazla öğe eklemek için artı simgesine tıklayın. Liste kutusunda bunları yeniden sıralamak isterseniz sağdaki yukarı ve aşağı okları kullanın.
Tüm Öğelere Değer Ver
Değeri boş bırakırsanız etiket forma gidecektir. Ancak, formunuza alternatif bilgiler göndermek için tüm öğelerinize değerler verebilirsiniz. Bunu atlama menüleri ve köprü oluşturma gibi şeyler için çok kullanacaksınız.
Bir Varsayılan Seçin
Web sayfaları varsayılan olarak, varsayılan öğe olarak ilk olarak hangi açılır öğe listeleniyorsa onu gösterir. Ancak farklı bir tane seçilmesini istiyorsanız, Özellikler menüsündeki “Başlangıçta seçili” kutusunda onu vurgulayın.
Listenizi Tasarım Görünümünde Görün
Özellikleri düzenlemeyi tamamladığınızda Dreamweaver, varsayılan değer seçili olarak açılır listenizi gösterir.
Listenizi Kod Görünümünde Görün
Kod görünümüne geçerseniz Dreamweaver’ın açılır menünüzü temiz kodla eklediğini görebilirsiniz. Tek ekstra nitelik, erişilebilirlik seçenekleridir. Kodun tamamı girintilidir ve okunması ve anlaşılması çok kolaydır.
Tarayıcıda Kaydet ve Görüntüle
Belgeyi kaydeder ve bir web tarayıcısında görüntülerseniz, açılır menünüzün beklediğiniz gibi göründüğünü görebilirsiniz.
Ama Hiçbir Şey Yapmıyor…
Yukarıda oluşturduğumuz menü iyi görünüyor, ancak hiçbir şey yapmıyor. Bir şey yapmasını sağlamak için formun kendisinde bir form eylemi ayarlamanız gerekir. Neyse ki Dreamweaver, formlar, CGI’lar veya komut dosyası hakkında bilgi edinmenize gerek kalmadan sitenizde hemen kullanabileceğiniz yerleşik bir açılır menü formuna sahiptir. Buna Atlama Menüsü denir. Dreamweaver Jump Menüsü, adlar ve URL’ler içeren bir açılır menü oluşturur. Ardından menüden bir öğe seçebilirsiniz ve Web sayfası, tıpkı bir bağlantıyı tıklamışsınız gibi, o konuma taşınır. Ekle menüsüne gidin ve Form’u ve ardından Atla Menüsü’nü seçin.
Menü Penceresini Atla
Standart açılır menünün aksine, Jump menüsü menü öğelerinizi adlandırmanız ve formun nasıl çalışması gerektiğine ilişkin ayrıntılar eklemeniz için yeni bir pencere açar. İlk öğe için, “untitled1” metnini okumasını istediğiniz şekilde değiştirin ve bir URL ekleyin.
Jump Menünüze Öğeler Ekleyin
Atlama menünüze yeni bir öğe eklemek için öğe ekle’ye tıklayın. İstediğiniz kadar öğe ekleyin.
Menü Seçeneklerini Atla
İstediğiniz tüm bağlantıları ekledikten sonra seçeneklerinizi belirlemelisiniz:
URL’leri Aç
Bir çerçeve kümeniz varsa, bağlantıları farklı bir çerçevede açabilirsiniz. Veya URL’nin yeni bir pencerede veya başka bir yerde açılması için Ana Pencere seçeneğini özel bir hedef olarak değiştirebilirsiniz.
Menü Adı
Menünüze sayfa için benzersiz bir kimlik verin. Komut dosyasının doğru çalışması için gereklidir. Ayrıca tek bir formda birden fazla atlama menüsüne sahip olmanızı sağlar – hepsine farklı adlar verin.
Menüden Sonra Git Düğmesini Ekle
Bunu seçmeyi seviyorum çünkü menü değiştiğinde bazen komut dosyası çalışmıyor. Ayrıca daha erişilebilir.
URL Değişikliğinden Sonra İlk Öğeyi Seçin
İlk menü öğesi olarak “Birini seçin” gibi bir isteminiz varsa bunu seçin. Bu, o öğenin sayfada varsayılan olarak kalmasını sağlayacaktır.
Menü Tasarım Görünümünü Atla
İlk menünüzde olduğu gibi, Dreamweaver varsayılan öğe görünür olacak şekilde tasarım görünümünde atlama menünüzü ayarlar. Daha sonra açılır menüyü diğerlerinde yaptığınız gibi düzenleyebilirsiniz. Düzenlerseniz, öğelerdeki kimlikleri değiştirmediğinizden emin olun; aksi takdirde komut dosyası çalışmayabilir.
Tarayıcıda Menüyü Atla
Dosyayı kaydedip F12’ye basmak, sayfayı tercih ettiğiniz tarayıcıda görüntüleyecektir. Orada bir seçenek seçebilir, “Git”e tıklayabilirsiniz ve atlama menüsü çalışır.
