Dreamweaver'da Özel Medya Sorguları Oluşturma - akışkan ızgaralı mizanpaj özelliklerini kullanarak sayfalar oluştururken mankenler

Akışkan ızgaralı mizanpaj özelliklerini kullanarak sayfalar oluşturduğunuzda, Dreamweaver otomatik olarak ilgili medya sorgularını sizin için oluşturur, ancak kendi özel ortam sorgularınızı oluşturabilir ve bunları kendi CSS kurallarınızı hedeflemek için kullanabilirsiniz.

Medya sorguları, baskı için optimize edilmiş alternatif bir sayfa tasarımı yaratmak gibi diğer kullanımlar için on yıldan fazla bir süredir web'de kullanılıyor. Bir medya sorgusu, ekran veya yazdırma (en yaygın iki) gibi bir ortam türünün ve yükseklik veya genişlik gibi belirli özellikleri kontrol eden isteğe bağlı bir ifade ile oluşturulmuştur. En sık kullanılan medya türleri

Elde taşınır ortam türü (

): Tüm aygıtlar için uygundur

yazdırma: Baskı önizlemesi ve bir sayfa basıldığında görüntülenmesi için tasarlanmıştır

artık neredeyse hiç kullanılmadı ve en iyi cep telefonları ve küçük ekranlı, bant genişliği sınırlı bant genişliği ve yalnızca bitmap grafik desteği sağlayan tek renkli görüntüler için kullanıldı. iOS cihazları ve çoğu akıllı telefon, ekran ortamı türleri olarak kategorize edilmiştir.

Dreamweaver sayfa tasarımlarına stiller nasıl uygulanır

Stil sayfalarını bağlayarak veya içe aktararak harici dosyalar olarak uygulayabilir ya da stil sayfalarını başkana iç stiller olarak uygulayabilirsiniz. sayfanın HTML kodu. Satır içi stilleri kullanarak cihazları bile hedefleyebilirsiniz - yalnızca belirli cihazlara belirli bir kural uygulamak istiyorsanız kullanışlı bir seçenek.

Bu seçeneklerin bir kombinasyonunu kullanabilirsiniz ve birden fazla harici stil sayfasını aynı web sayfasına içe aktarabilir veya bağlayabilirsiniz. Ortam türünü hedeflemek istediğiniz ortam özellikleriyle tanımladıktan sonra, sayfaya stillerin nasıl uygulanacağını belirtirsiniz.

Dreamweaver'da dış stil sayfalarında ortam sorgularını kullanma hakkında

Ortam sorgularını harici stil sayfalarında iki yoldan kullanabilirsiniz. Birinci seçenek, medya sorgularıyla ayrılmış birden çok stil grubuyla bir dış stil sayfasına bağlamaktır. Bir akış çizgesi düzenini oluştururken Dreamweaver stilleri birbirine bağlar.

İkinci seçenek, her bir HTML sayfasına iki veya daha fazla ayrı harici stil sayfasını bağlamak ve ortam sorgularını her stil sayfasına eklemektir. Her iki durumda da, CSS ve HTML kodları ayrı dosyalara kaydedilir ve etiket onları birbirine bağlar.

Tüm medya sorgularını ve ilgili stilleri tek bir dosyada veya ayrı CSS dosyalarında kaydetmek yerine, ek stil sayfalarını herhangi bir HTML sayfasına da bağlayabilirsiniz. Örneğin, sayfayı bir yazıcıya gönderildiğinde formatlamak için tasarlanmış ayrı bir stil sayfasında ayrı bir stil grubu ekleyebilirsiniz.

Dreamweaver'da ortam sorguları oluşturma hakkında

Dreamweaver'da istediğiniz kadar medya sorgusu oluşturabilir ve bunları tek bir CSS dosyasında veya çok sayıda ekleyebilirsiniz. Dreamweaver'da yeni bir ortam sorgusu oluşturmak için şu adımları izleyin:

Pencere → CSS Stilleri'ni seçerek CSS Tasarımcısı panelini açın.
Kaynaklar panelinde mevcut bir stil sayfasını seçin veya Kaynaklar panelinde artı işaretini (+) tıklatarak yeni bir stil sayfasını seçin.
CSS Tasarımcısı panelindeki @Media panelinde artı işaretini (+) tıklayın.

Medya Sorgularını Tanımla iletişim kutusu açılır.
İlk açılır listeden Medya seçeneğini, ikinci açılır listeden Ekran'ı seçin.
Artı işaretinin görünmesi için imlecinizi her açılır listelerin sağına getirin ve ardından yeni bir alan eklemek için artı işaretini tıklayın.

Ortam Sorguları iletişim kutusunda yön belirleyebileceğiniz yeni bir alan görüntülenir. Bu alan isteğe bağlıdır, ancak bir tablette veya bir akıllı telefonda yatay ve dikey görüntüler için farklı tasarımlar oluşturmak istiyorsanız genellikle kullanılır. Yönlendirmeye dayalı ek mizanpajlar oluşturmak istemiyorsanız eksi işaretini tıklatarak bu alanı kaldırabilirsiniz.

Not: Artı ve eksi işaretleri yalnızca imlecinizi iletişim kutusunun sağ tarafına getirdiğinizde görünür hale gelirsiniz.
İmlecinizi açılır listelerin sağına getirin, alan eklemek için artı işaretini ikinci kez tıklayın ve minimum genişlik koşulu girin.

Sorguyu hedeflemek için kullanmak istediğiniz en küçük genişliği belirtebilmeniz için Minimum Genişlik alanı Ortam Sorguları iletişim kutusunda görünür. Medya sorgusu, belirttiğiniz minimum genişliğe ve maksimum genişlik aralığına dayanan stilleri bir sonraki adımda kapsadığı için minimum genişlik önemlidir.
İmlecinizi açılır listelerin sağına getirin, alan eklemek için artı işaretini üç defa tıklayın ve maksimum genişlik koşulunu girin.

Sorguyu hedeflemek için kullanmak istediğiniz maksimum genişliği belirtebilmeniz için, Maksimum Genişlik alanı iletişim kutusunda görünür.
Tamam'ı tıklayın.

Medya Sorguları iletişim kutusu kapanır ve ortam sorgusu üretilir ve CSS Tasarımcı panelindeki Kaynaklar panelinde seçtiğiniz stil sayfasına eklenir.
Seçilen herhangi bir stil sayfasına ilave medya sorguları eklemek için, Adım 3-8'i tekrarlayın. Medya sorgularını farklı bir stil sayfasına eklemek için, Adımlar 2-8'i tekrarlayın.

Medya sorgularını istediklerinize göre çok farklı stil sayfalarına kaydedebilirsiniz, ancak her stil sayfası sunucudan ayrı olarak indirilmesi gerektiği için hepsini tek bir harici stil sayfasına kaydetmek daha verimli bir bant genişliği gerektirir. Birden fazla ortam sorgusu içeren bir uzun stil sayfası indirmek, birden fazla stil sayfası indirmekten biraz daha etkilidir.