Dreamweaver, Web siteniz için açılır menüler oluşturmayı kolaylaştırır. Ancak tüm HTML formları gibi biraz da zor olabilirler. Bu eğitici, Dreamweaver'da açılır menü oluşturma adımlarında size yol gösterecektir.
Dreamweaver Jump Menüler
Dreamweaver 8 ayrıca Web sitenizde gezinmek için bir atlama menüsü oluşturmak için bir sihirbaz sağlar. Temel açılır menülerden farklı olarak, bu menü işiniz bittiğinde bir şeyler yapar. Açılır formunuzun çalışması için herhangi bir JavaScript veya CGI yazmanız gerekmeyecektir. Bu eğitici ayrıca bir atlama menüsü oluşturmak için Dreamweaver 8 sihirbazının nasıl kullanılacağını da açıklamaktadır.
20/1
İlk Formu Oluşturun
HTML Formları ve Dreamweaver Hakkında Önemli Not:
Jump menüsü gibi özel sihirbazlar dışında, Dreamweaver HTML formlarını "iş" etmenize yardımcı olmaz. Bunun için bir CGI veya JavaScript'e ihtiyacınız var. Daha fazla bilgi için lütfen HTML Formları Oluşturma konusunu okuyun.
Web sitenize bir açılır menü eklediğinizde, ihtiyacınız olan ilk şey onu çevreleyen bir formdur. Dreamweaver'da, Ekle menüsüne gidin ve Form'a tıklayın, ardından "Form" u seçin.
20/20
Tasarım Görünümünde Form Ekranları
Dreamweaver, form konumunuzu görsel olarak tasarım görünümünde gösterir, böylece form öğelerinizi nereye koyacağınızı bilirsiniz. Bu önemlidir, çünkü açılan menü etiketleri form öğesinin dışında geçerli değildir (ve çalışmaz). Resimde gördüğünüz gibi, form tasarım görünümünde kırmızı noktalı çizgidir.
20/03
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 girip "Liste / Menü" yi seçmeniz gerekir. İmlecinizin form kutunuzun kırmızı noktalı çizgisinde olduğundan emin olun.
20/04
Özel Seçenekler Penceresi
Dreamweaver Seçenekleri'nde Erişilebilirlik üzerinde bir ekran var. Dreamweaver'ın tüm erişilebilirlik özelliklerini göstermesini tercih ediyorum. Ve bu ekran bunun sonucudur. Formlar, birçok Web sitesinin erişilebilirlik içinde düştüğü ve bu beş seçeneği doldurarak, açılır menülerinizin hemen daha erişilebilir hale geleceği bir yerdir.
05/20
Form Erişilebilirliği
Erişilebilirlik Seçenekleri:
Etiket
Bu alanın adı. Form öğenizin yanında metin olarak görünecektir.
Açılır menüyü aramak istediğiniz şeyi yazın. Bu, açılır menünün cevaplayacağı bir soru veya kısa bir ifade olabilir.
stil
HTML, form etiketlerinizi tarayıcıya tanıtmak için bir etiket etiketi içerir. Seçimleriniz, hangi menü etiketine başvurduğunu tanımlamak için etiket etiketindeki "for" özniteliğini kullanmak veya etiket etiketini hiç kullanmamak için açılır menüyü ve etiket metnini etiketle sarmaktır.
Etiketi kullanmamayı tercih ederim, eğer etiketini bir nedenle hareket ettirmem gerekiyorsa, yine de doğru form alanına eklenecektir.
pozisyon
Etiketinizi, açılır menüden önce veya sonra yerleştirebilirsiniz.
Erişim anahtarı
Bu form alanına doğrudan ulaşmak için Alt veya Option tuşlarıyla birlikte kullanılabilecek anahtardır. Bu, formlarınızı bir fareye ihtiyaç duymadan kullanmasını çok kolaylaştırır. HTML'de Erişim Anahtarı Nasıl Kurulur
Sekme Dizini
Bu, klavyeyi Web sayfası üzerinden sekmeye kullanırken form alanına erişilmesi gereken sıradır. Tabindex'i Anlamak
Erişilebilirlik seçeneklerinizi güncellediğinizde Tamam'ı tıklayın.
20/20
Menüyü Seç
Açılır menüyü tasarım görünümünde görüntüledikten sonra, çeşitli öğeleri eklemeniz gerekir. Önce üzerine tıklayarak açılan menüyü seçin. Dreamweaver, seçtiğiniz menüyü göstermek için açılır menünün etrafına başka bir noktalı çizgi koyacaktır.
07/20
Menü Özellikleri
Özellikler menüsü, o açılır menünün liste / menü özelliklerine dönüşür. Burada menünüze bir kimlik ("seç" yazıyor) verebilir, bir lis veya bir menü olmasını isteyip istemediğinize karar verebilirsiniz, stil sayfanızdan bir stil sınıfı verin ve aşağıya açılan değerleri atayın.
Liste ve Menü Arasındaki Fark Nedir?
Dreamweaver, bir menü açılır menüsünü, yalnızca bir seçime izin veren herhangi bir açılır menüyü çağırır. Bir "liste" açılır menüde birden çok seçeneğe izin verir ve birden fazla öğe yüksek olabilir.
Bir açılır menünün birden çok satırın yüksek olmasını istiyorsanız, bunu bir "liste" türüne değiştirin ve "seçimler" kutusunun işaretini kaldırın.
20/20
Yeni Liste Öğeleri Ekle
Menünüze yeni öğeler eklemek için "Değerleri Listele ..." düğmesine tıklayın. Bu yukarıdaki pencereyi açacaktır. Öğe etiketinizi ilk kutuya yazın. Bu sayfada görüntülenecek olan şey. Değeri boş bırakırsanız, bu da formda gönderilecek.
20/20
Diğer ve Yeniden Sıralama Ekle
Daha fazla öğe eklemek için artı simgesine tıklayın. Bunları liste kutusunda yeniden sıralamak isterseniz, sağdaki yukarı ve aşağı okları kullanın.
20/10
Tüm Öğeler Değerlerini Ver
8. adımda bahsettiğim gibi, değeri boş bırakırsanız, etiket forma gönderilir. Ancak, tüm öğelerin değerlerinizi verebilirsiniz - formunuza alternatif bilgiler göndermek için. Atlama menüleri gibi şeyler için bunu çok kullanacaksınız.
20/11
Bir Varsayılan Seç
Varsayılan sayfaların hangisi olduğunu belirtmek için varsayılan sayfalar varsayılan olarak web sayfalarıdır. Ancak, farklı bir tane seçmek istiyorsanız, Özellikler menüsündeki "Başlangıçta seçili" kutuda vurgulayın.
20/12
Tasarım Görünümünde Listenizi Görüntüleyin
Özellikleri düzenlemeyi tamamladıktan sonra, Dreamweaver açılır listeyi seçili varsayılan değerle gösterir.
20/13
Kod Görünümünde Listenizi Görme
Kod görünümüne geçerseniz, Dreamweaver uygulamasının açılır menünüzü çok temiz bir kodla eklediğini görebilirsiniz. Ekstra özellikler, erişilebilirlik seçenekleriyle eklediğimiz özelliklerdir. Kod tüm girintili ve okumak ve anlamak için çok kolay. Hatta Dreamweaver'a varsayılan olarak XHTML yazmayı söylediğimi söylediğim için seçilen = "selected" özelliğini koyar.
20/14
Tarayıcıda Kaydet ve Görüntüle
Belgeyi kaydedip bir Web tarayıcısında görüntülediğinizde, açılır menünüzün beklediğiniz gibi göründüğünü görebilirsiniz.
20/15
Ama hiçbir şey yapmıyor
Yukarıda oluşturduğumuz menü iyi görünüyor, ancak hiçbir şey yapmıyor. Bir şeyi yapabilmek için, tamamen başka bir öğretici olan formun kendisinde bir form eylemi oluşturmanız gerekir.
Neyse ki, Dreamweaver'da formlar, CGI'lar veya komut dosyaları hakkında bilgi edinmeden sitenizde hemen kullanabileceğiniz yerleşik bir açılır menü formu bulunur. Buna Jump Menu denir.
Dreamweaver Jump Menu, adlar ve URL'lerle açılan bir menü oluşturur. Daha sonra menüden bir öğe seçebilir ve Web sayfası, tıpkı bir bağlantıyı tıklamış olsaydınız, o konuma taşınır.
Ekle menüsüne gidin ve Form ve ardından Atlama Menüsü'nü seçin.
20/16
Atla Menüsü Penceresi
Standart açılır menüden farklı olarak, Jump menüsü, menü öğelerinizi adlandırmanız ve formun nasıl çalışması gerektiğiyle ilgili ayrıntıları eklemeniz için yeni bir pencere açar.
İlk öğe için "adsız1" metnini okumak istediğinizi değiştirin ve bu bağlantının gitmesi gereken bir URL ekleyin.
20/20
Jump Menu'nize Öğe Ekleme
Atlama menünüze yeni bir öğe eklemek için ekle öğesine tıklayın. İstediğiniz kadar öğe ekleyin.
20/18
Jump Menü Seçenekleri
İstediğiniz tüm bağlantıları ekledikten sonra, seçeneklerinizi seçmelisiniz:
URL'leri aç
Çerçeve kümeniz varsa, bağlantıları farklı bir çerçevede açabilirsiniz. Ya da Ana Pencerenin seçeneğini özel bir hedefe dönüştürebilirsiniz, böylece URL yeni bir pencerede veya başka bir yerde açılacaktır.
Menü Adı
Menünüze sayfa için benzersiz bir kimlik verin. Bu, komut dosyasının doğru şekilde çalışması için gereklidir. Aynı zamanda bir formda birden fazla atlama menülerine sahip olmanızı sağlar - sadece tüm farklı isimleri verin.
Menüden sonra Git Düğmesi Ekle
Bunu seçmek hoşuma gidiyor çünkü menü değiştiğinde komut dosyası bazen çalışmıyor. Ayrıca daha erişilebilir.
URL Değişikliği Sonrası İlk Öğeyi Seçin
İlk menü maddesi olarak "Birini seç" gibi bir isteminiz varsa bunu seçin. Bu, bu maddenin sayfada varsayılan olarak kalmasını sağlayacaktır.
20/20
Jump Menu Design Görüntüle
İlk menünüzle olduğu gibi, Dreamweaver da varsayılan menünün görünmesiyle tasarım görünümünde atlama menünüzü ayarlar. Ardından, açılır menüyü, sizin yaptığınız gibi düzenleyebilirsiniz.
Bunu düzenlerseniz, öğelerdeki herhangi bir kimliği değiştirmediğinizden emin olun, aksi halde komut dosyası çalışmayabilir.
20/20
Tarayıcıda Atla Menüsü
Dosyayı kaydetme ve F12'ye basma, sayfayı tercih ettiğiniz tarayıcıda gösterir. Burada bir seçenek seçebilir, "Git" e tıklayabilir ve atlama menüsü çalışır!