Kullanıcı Kılavuzu İptal

Değişken ızgara mizanpajlarını kullanarak dinamik tasarım

Ara

Son güncelleme: 18 Şub 2022

Birden çok ekran için dinamik web siteleri oluşturmayı mı düşünüyorsunuz? Dreamweaver'da değişken ızgaraları kullanarak mobil cihazlar ve masaüstü bilgisayarlar için web siteleri tasarlamayı öğrenin.

Web sitesi mizanpajı, görüntülendiği cihazın boyutlarına yanıt vermeli ve uyum sağlamalıdır (dinamik tasarıma sahip olmalıdır). Değişken ızgara mizanpajı, web sitesinin görüntülendiği cihazlara 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 cihazları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: Uyarlanabilir Mizanpaj ya da Dinamik Mizanpaj

Değişken Izgara Mizanpajı belgelerine yönelik inceleme modu kullanılamaz.

Değişken ızgara mizanpajı oluşturma

Dreamweaver 2017'de mevcut değişken ızgara mizanpajlarını düzenleyebilirsiniz. Ancak değişken ızgara mizanpajları oluşturamazsınız.

Bunun yerine, Dreamweaver 2017'de dinamik mizanpajlar oluşturmak için Bootstrap'i kullanın. Bootstrap hakkında daha fazla bilgi için bkz. Bootstrap dosyalarıyla çalışma.

Dosya > Değişken Izgara (eski) seçeneğini belirleyin.
Izgaradaki sütun sayısı için varsayılan değer, ortam türünün ortasında görüntülenir. Bir cihazı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 cihazlar 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 cihazda 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 ızgara belgelerini düzenleme

Değişken ızgara belgelerini doğrudan Canlı Görünüm'de düzenleyerek yapabilecekleriniz:

HTML sınıflarını ve kimlikleri öğelerle ilişkilendirin. Daha fazla bilgi için bkz. Öğe Görüntüleme.
Görüntü niteliklerini ve metni düzenleyin. Daha fazla bilgi için bkz. Hızlı Özellik Denetimi ve Canlı Görünüm'de metin düzenleme.
Yeni öğeler ekleyin. Daha fazla bilgi için bkz. Değişken ızgara öğeleri ekleme.

Değişken ızgara belgesinin HTML DOM yapısını Öğeye Hızlı Bakış'ı kullanarak da görselleştirebilirsiniz.

Değişken ızgara öğeleri ekleme

Ekle panelinde (Pencere > Ekle) bir değişken ızgara mizanpajında kullanabileceğiniz öğeler listelenir. Öğe eklerken, bunları değişken öğeler olarak eklemeyi seçebilirsiniz.

Ekle panelinde, eklemek istediğiniz öğeyi tıklatın.
Görüntülenen iletişim kutusunda, öğeyi belgede vurgulanmış olan referans öğesine göre konumlandırmak için Önce, Sonra veya Yuvala seçeneğini tıklatın.
Bir sınıf seçin veya kimlik değerini 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 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	Açıklama
Div'i Takas Et	Geçerli olarak seçili öğeyi yukarıdaki veya aşağıdaki öğeyle takas eder.
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.
Bir satır yukarı taşı	Öğeyi bir satır yukarı taşır
Çoğalt	Geçerli olarak seçili öğeyi çoğaltır. Öğeye bağlı CSS de çoğaltılır.
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.
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 öğelere, yukarı ve aşağı 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.