Dinamik HTML (DHTML), tüm sayfaların tam olarak yüklenme sıklığını azaltarak web sitelerinizde uygulama tarzı bir deneyim oluşturmanıza olanak tanır. Uygulamalarda, bir şeye tıkladığınızda, uygulama o belirli içeriği gösterecek veya size cevabınızı verecek şekilde hemen değişir.
Buna karşılık, web sayfalarının genellikle yeniden yüklenmesi veya tamamen yeni bir sayfanın yüklenmesi gerekir. Bu, kullanıcı deneyimini daha ayrık hale getirebilir. Müşterilerinizin ilk sayfanın yüklenmesini beklemesi ve ardından ikinci sayfanın yüklenmesini tekrar beklemesi vb.
İzleyici Deneyimini Geliştirmek İçin Kullanma
Bu deneyimi geliştirmenin en kolay yollarından biri olan DHTML'yi kullanmak, div öğeleri, istendiğinde içeriği görüntülemek için açılır ve kapanır. bir div öğesi web sayfanızdaki mantıksal bölümleri tanımlar. Bir div'i paragraflar, başlıklar, bağlantılar, resimler ve hatta diğer div'leri içerebilen bir kutu olarak düşünün.
Neye ihtiyacınız olacak
Açılıp kapatılabilen bir div oluşturmak için aşağıdakilere ihtiyacınız vardır:
- Tıklandığında div'i açıp kapatarak kontrol etmek için bir bağlantı.
- Gösterilecek ve gizlenecek div.
- CSS div'i gizli veya görünür hale getirmek için.
- Eylemi gerçekleştirmek için JavaScript.
Kontrol Bağlantısı
Kontrol bağlantısı en kolay kısımdır. Başka bir sayfaya yaptığınız gibi bir bağlantı oluşturmanız yeterlidir. şimdilik, bırakın href özelliği boş.
HTML öğrenin
Bunu web sayfanızın herhangi bir yerine yerleştirin.
Gösterilecek ve Gizlenecek Div
Göstermek ve gizlemek istediğiniz div öğesini oluşturun. Div'inizin üzerinde benzersiz bir kimliği olduğundan emin olun. Örnekte, benzersiz kimlik HTML öğren.
Bu içerik sütunudur. Bu açıklama metni dışında boş başlar. Soldaki gezinme sütununda ne öğrenmek istediğinizi seçin. Metin aşağıda görünecektir:
HTML öğrenin
- Ücretsiz HTML Sınıfı
- HTML Eğitimi
- XHTML nedir?
Div'i Göstermek ve Gizlemek için CSS
CSS'niz için iki sınıf oluşturun: biri div'i gizlemek için, diğeri onu göstermek için. Bunun için iki seçeneğiniz var: görüntüleme ve görünürlük.
Ekran, div'i sayfa akışından kaldırır ve görünürlük yalnızca nasıl görüldüğünü değiştirir. Bazı kodlayıcılar tercih Görüntüle, fakat ara sıra görünürlük mantıklı da. Örneğin:
.hidden { görüntü: yok; }
.unhidden { görüntü: blok; }
Görünürlüğü kullanmak istiyorsanız, bu sınıfları şu şekilde değiştirin:
.hidden { görünürlük: gizli; }
.unhidden { görünürlük: görünür; }
Sayfada gizli olarak başlaması için gizli sınıfı div'inize ekleyin:
Çalıştırmak için JavaScript
Bu betiğin tek yaptığı, div'inizde ayarlanan geçerli sınıfa bakmak ve gizli olarak işaretlenmişse veya tam tersi olarak işaretlenmişse onu gizli duruma getirmektir.
Bu sadece birkaç JavaScript satırıdır. Aşağıdakileri kafanıza yerleştirin HTML belgesi (önce.
Bu komut dosyası ne yapar, satır satır:
işlevi çağırır göster, ve bölme kimliği göstermek veya gizlemek istediğiniz tam benzersiz kimliktir.
i değişkenini ayarlartem div'inizin değeri ile.
Basit bir tarayıcı kontrolü gerçekleştirir; tarayıcı desteklemiyorsa getElementById, bu komut dosyası çalışmayacak.
Div üzerindeki sınıfı kontrol eder. eğer öyleyse gizli, onu değiştirir gizli. Aksi takdirde, onu değiştirir gizli.
kapatır Eğer Beyan.
Fonksiyonu kapatır.
Komut dosyasının çalışması için bir şey daha yapmanız gerekir. Bağlantınıza geri dönün ve javascript'i href niteliğine ekleyin. Bu href'de div'inizi adlandırdığınız tam benzersiz kimliği kullandığınızdan emin olun:
HTML öğrenin
Tebrikler! Artık bir bağlantıya her tıkladığınızda görünecek ve gizlenecek bir div'iniz var.
Dikkat Edilmesi Gereken Olası Sorunlar
Bu komut dosyası kusursuz değildir. Sizin için sorunlara neden olabileceği bazı durumlar vardır:
JavaScript Açık Değil. Okuyucularınızın JavaScript'i yoksa veya kapalıysa bu komut dosyası çalışmaz. Gizli div'ler, okuyucularınız ne yaparsa yapsın gizli kalır. Bunu düzeltmenin bir yolu, gizli div'leri bir noscript alanına koymaktır, ancak doğru şekilde görüntülenmelerini sağlamak için bununla oynamanız gerekecek.
Çok Fazla İçerik. Bu, okuyucularınızın yalnızca ihtiyaç duydukları içeriği görmelerini sağlamak için harika bir araç olabilir, ancak gizli div'lerin içine çok fazla şey koyarsanız, sayfanın nasıl yüklendiğini büyük ölçüde etkileyebilir. İçeriğin görüntülenmiyor olmasına rağmen, web tarayıcısının onu indirmeye devam ettiğini unutmayın, bu nedenle ne kadar içerik gizlediğiniz konusunda sağduyulu davranın.
Müşteriler Anlamıyor. Son olarak, müşteriler içeriği gösteren veya gizleyen bir bağlantıya tıklamaya alışık olmayabilir. Müşterilerinize ne olacağını açıklamak için simgelerle (artı işaretler ve oklar iyi çalışır) veya metinlerle oynayın. Diğer bir çözüm, div'lerden birini açıkken diğerleri kapalı bırakmaktır. Bu, fikri müşterilerinize iletebilir, böylece kalan içeriği nasıl açacaklarını daha hızlı anlayabilirler.
Dinamik HTML'yi her zaman müşterilerinizle bu şekilde test etmelisiniz. Anlayabileceklerinden ve kullanabileceklerinden emin olduğunuzda, bu, çok fazla görünür alan kaplamadan web sayfalarınızda büyük miktarda içerik elde etmenin harika bir yolu olabilir.