Dosya > Yeni Değişken Izgara Mizanpajı seçeneğini belirleyin.
Son güncelleme:
21 May 2021
Bir web sitesi mizanpajı, görüntülendiği aygıtın boyutlarına yanıt vermeli ve uyum sağlamalıdır. Değişken ızgara mizanpajları, web sitesinin görüntülendiği aygıtlara karşılık gelen farklı mizanpajlar oluşturmanın görsel bir yolunu sağlar.
Örneğin, web siteniz masaüstü bilgisayarlarda, tablet bilgisayarlarda ve cep telefonlarında görüntülenecektir. Bu aygıtların her biri için mizanpaj belirtmek üzere değişken ızgara mizanpajlarını kullanabilirsiniz. Web sitesinin masaüstü bilgisayarda, tablet bilgisayarda veya cep telefonunda görüntülenmesine bağlı olarak, web sitesinin görüntülenmesi için karşılık gelen mizanpajı kullanılır.
Daha fazla bilgi: Adaptive Layout versus Responsive Layout (Uyarlanabilir Mizanpaj - Dinamik Mizanpaj)
Dreamweaver 12.2 Creative Cloud sürümü değişken ızgara mizanpajları açısından HTML5 yapısal öğeleri için destek ve yuvalanmış öğelerin kolay düzenlenmesi gibi birçok geliştirmeyi içerir. Geliştirmelerin eksiksiz listesine genel bakış için burayı tıklatın.
Not:
Değişken Izgara Mizanpajı belgelerine yönelik inceleme modu Dreamweaver 13.1 ve sonraki sürümlerinde kullanılamaz.
Değişken Izgara Mizanpajlarını Kullanma
Değişken Izgara mizanpajlarının nasıl kullanılacağını öğrenmek için bu video eğitimin izleyin: Değişken ızgara mizanpajlarını keşfetme.
Değişken ızgara mizanpajı oluşturma
-
-
Izgaradaki sütun sayısı için varsayılan değer, ortam türünün ortasında görüntülenir. Bir aygıtın sütun sayısını özelleştirmek için, değeri gerektiği şekilde düzenleyin.
-
Bir sayfanın genişliğini ekran boyutuna göre ayarlamak için, değeri yüzde olarak belirleyin.
-
Sütun aralığı genişliğini ayrıca değiştirebilirsiniz. Sütun aralığı, iki sütun arasındaki boşluktur.
-
Sayfa için CSS seçeneklerini belirtin.
Oluştur'u tıklattığınızda sizden bir CSS dosyası belirtmeniz istenir. Aşağıdakilerden birini yapabilirsiniz:
- Yeni bir CSS dosyası oluşturabilirsiniz.
- Mevcut bir CSS dosyasını açabilirsiniz.
- Açılan CSS dosyasını Değişken Izgara CSS dosyası olarak belirtebilirsiniz.
Varsayılan olarak cep telefonları için Değişken Izgara görüntülenir. Ayrıca, Değişken Izgara için Ekle paneli görüntülenir. Mizanpajınızı oluşturmak için Ekle panelindeki seçenekleri kullanın.
Başka aygıtlar için mizanpaj tasarlamaya geçiş yapmak üzere, Tasarım görünümünün altındaki seçeneklerde ilgili simgeyi tıklatın.
-
Dosyayı kaydedin. HTML dosyasını kaydettiğinizde, boilerplate.css ve respond.min.js gibi bağlı dosyaları bilgisayarınızdaki bir konuma kaydetmeniz istenir. Bir konum belirtin ve Kopyala seçeneğini tıklatın.
boilerplate.css, HTML5 standart metnini temel alır. Web sayfanızın birden fazla aygıtta oluşturulma şeklindeki tutarlılığı sağlayan bir CSS stili kümesidir. Respond.min.js, tarayıcının daha eski sürümlerinde ortam sorguları için destek sağlamaya yardımcı olan bir JavaScript kitaplığıdır.
Değişken Izgara öğeleri ekleme
Ekle panelinde (Pencere > Ekle) bir Değişken Izgara mizanpajında kullanabileceğiniz öğeler listelenir. Öğe eklerken, bunları Değişken öğeler olarak eklemeyi seçebilirsiniz.
-
Ekle panelinde eklemek istediğiniz öğeyi seçin.
-
Görüntülenen iletişim kutusunda bir sınıf seçin veya ID için bir değer girin. Sınıf menüsü, sayfayı oluştururken belirtmiş olduğunuz CSS dosyasındaki sınıfları görüntüler.
-
Değişken Öğe Olarak Ekle onay kutusunu işaretleyin.
-
Eklenen öğeyi seçtiğinizde Div gizleme, çoğaltma, kilitleme veya silme seçenekleri görüntülenir. Birbirinin üstünde katman olarak bulunan Div'ler için, Div'leri takas etme seçeneği görüntülenir.
Seçenek Etiket Açıklama A Div'i Takas Et Geçerli olarak seçili öğeyi yukarıdaki veya aşağıdaki öğeyle takas eder.
B Gizle Öğeyi gizler.
Bir öğeyi göstermek için şunlardan birini yapın:
ID seçicilerini göstermek için CSS dosyasındaki display özelliğini block olarak değiştirin. (display:block)
Sınıf seçicilerini göstermek için kaynak kodda uygulanan sınıfı (hide_<MediaType>) kaldırın.
C Bir satır yukarı taşı Öğeyi bir satır yukarı taşır
D Çoğalt Geçerli olarak seçili öğeyi çoğaltır. Öğeye bağlı CSS de çoğaltılır.
E Sil ID seçicileri için hem HTML'i hem de CSS'yi siler. Yalnızca HTML'i silmek için Sil tuşuna basın.
Sınıf seçicileri için yalnızca HTML silinir.
F Kilitle Öğeyi, mutlak konumlu bir öğeye dönüştürür.
G Hizala Sınıf seçicileri için Hizala seçeneği sıfır kenar boşluğu düğmesi olarak görev yapar.
ID seçicileri için hizalama düğmesi öğeyi ızgaraya hizalar.Not:Bir sayfadaki değişken öğelere, sol ve sağ ok tuşları kullanılarak periyodik olarak çapraz geçiş yaptırılabilir. Öğe sınırını belirleyin ve ardından ok tuşuna basın.
Öğeleri yuvalama
Değişken öğeleri, diğer değişken öğelerin içinde yuvalamak için odağın ana öğe içinde olduğundan emin olun. Ardından, gerekli alt öğeyi ekleyin.
Yuvalı Çoğaltma özelliği de desteklenir. Yuvalı Çoğaltma, HTML'i (seçili öğeye ait) çoğaltır ve ilgili Değişken CSS'sini oluşturur. Seçili öğe dahilinde bulunan mutlak öğeler uygun şekilde yerleştirilir. Yuvalı öğeler de, Çoğalt düğmesinin kullanılmasıyla çoğaltılabilir.
Bir ana öğeyi sildiğinizde, öğeye karşılık gelen CSS, bunun alt öğeleri ve ilişkili HTML'i silinir. Yuvalı öğeler de Sil düğmesinin (Klavye Kısayolu: Ctrl+Delete) kullanılmasıyla silinebilir.
