Bilinmesi Gerekenler
- Insert > Form > Form adresine gidin. Formdaki noktalı kırmızı çizgiye tıklayın ve Insert > Form> List/Menu adresine gidin. Erişilebilirlik seçeneklerini belirleyin.
- Menüyü tıklayın ve özelliklerini seçin, ardından yeni menü öğeleri eklemek için Değerleri listele öğesini seçin. Daha fazla öğe eklemek için artı işaretini tıklayın.
- Öğe değerleri ekleyin ve varsayılan bir öğe seçin. Eylem eklemek için Insert > Form > Jump Menu gidin. Jump menüsüne öğeler ekleyin ve kaydedin.
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 eğitici, Dreamweaver'da bir açılır menü oluşturma adımlarında size yol gösterecektir.
Dreamweaver Jump 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 eğitici ayrıca bir atlama menüsü oluşturmak için Dreamweaver 8 sihirbazının nasıl kullanılacağını da açıklar.
Önce, 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 form öğelerinizi nereye koyacağınızı bilirsiniz çünkü açılır menü etiketleri form öğesinin dışında geçerli değildir (ve çalışmaz). Görselde 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ı çizgisi içinde olduğundan emin olun.
Özel Seçenekler Penceresi
Dreamweaver Seçenekleri'nde Erişilebilirlik ile ilgili bir ekran var. 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:
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 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" özelliğini kullanmak veya etiket etiketini hiç kullanmamaktır.
Pozisyon
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 "Görüntü" veya Seçenek tuşlarıyla bir erişim anahtarı kullanabilir. Bu klavye kısayolu, formlarınızı fare olmadan kullanmayı çok kolaylaştırır. alt="
Tab 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ç
Dreamweaver tasarım görünümünde açılır menünüzü 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 etrafına 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 ile Menü Arasındaki Fark Nedir?
Dreamweaver, yalnızca bir seçime izin veren herhangi bir açılır menüyü 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 üstte olabilir.
Bir açılır menünün birden fazla 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 "Değerleri listele…" düğmesine 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.
Varsayılan Bir Seçin
Web sayfaları varsayılan olarak, varsayılan öğe olarak ilk sırada 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 bitirdiğinizde 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ı oluşturma 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 Menüye Git'i 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 "un titled1" 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 ekle öğesine tıklayın. İstediğiniz kadar öğe ekleyin.
Atlama Menü Seçenekleri
İstediğiniz tüm bağlantıları ekledikten sonra seçeneklerinizi seçmelisiniz:
URL'leri İçinde 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ü bazen menü değiştiğinde komut dosyası çalışmıyor. Ayrıca daha erişilebilir.
URL Değişikliğinden Sonra İlk Öğeyi Seç
İlk menü öğesi olarak "Birini seç" gibi bir isteminiz varsa bunu seçin. Bu, öğenin sayfada varsayılan olarak kalmasını sağlar.
Atlama Menü Tasarım Görünümü
Tıpkı ilk menünüzde olduğu gibi, Dreamweaver atlama menünüzü tasarım görünümünde varsayılan öğe görünür olacak şekilde ayarlar. Ardından, açılır menüyü diğerlerinde yaptığınız gibi düzenleyebilirsiniz.
Düzenlerseniz, öğelerdeki kimlikleri değiştirmediğinizden emin olun; aksi halde komut dosyası çalışmayabilir.
Tarayıcıda Menüyü Atla
Dosyayı kaydetmek ve F12'ye basmak, sayfayı tercih ettiğiniz tarayıcıda görüntüleyecektir. Orada bir seçenek belirleyip "Git" düğmesini tıkladığınızda atlama menüsü çalışır.
