Yeni Sıvı Izgara Düzeni Dreamweaver CS6

• Nisan 27, 2024

Basit web siteleri veya karmaşık CMS geliştirirseniz, zihninizde her zaman bu nagging sorusuna sahipsiniz - her türlü kitleyi ve ekran çözünürlüğünü hedeflemek için elimden geleni yapıyorum mı? Şey, Dreamweaver^R, CS6, bunu daha kolay bir görev haline getiren yeni özelliklere sahiptir.

Geçmişte, her farklı ekran çözünürlüğü için farklı bir CSS dosyası oluşturulmalı ve gerekli CSS dosyasını atamak için medya sorgusu kullanılmalıdır. Bu çok zaman alıcıydı ve hem geliştirici hem de müşteri için kötü bir haber olan site geliştirmenin toplam maliyetine eklendi. Dreamweaver CS6, uyarlanabilir web siteleri oluşturma işinin çoğunu ortadan kaldırdı.

Bu yeni iş akışı işlemi, web siteniz için her ekran çözünürlüğü için varsayılan düzenlere ve tipografiye sahip bir başlangıç ​​şablonu gibi yeni Akışkan Izgara Düzeni'ne bağlıdır.

1. Menubar'dan Dosya - Yeni Sıvı Izgara Düzeni'ne tıklamanız yeterlidir.
   
   
2. Yeni Belge iletişim kutusunda, bu yeni uyarlanabilir web sayfası için varsayılanları göreceksiniz. Genişlik, farklı ekran çözünürlüklerinin her biri için sabittir.
   
   Mobil 480 piksel
   Tablo 768 piksel
   Masaüstü 1232 piksel
   
   
3. Her ekran çözünürlüğü için varsayılan sütun sayısını ve sütun genişliği yüzdesini değiştirme seçeneğiniz vardır. Varsayılan değerler:
   
   Mobil 5 sütun -% 91
   Tablet 8 sütun -% 93
   Masaüstü 10 sütun -% 90
   
   
4. Varsayılan çalışma alanı kodu ve tasarım görünümlerini gösterebilir. Tasarım görünümünde görebileceğiniz gibi, yeni dosyanın zaten bir div etiketi var. Özellikler panelinde div için varsayılan kimliği ve Sınıfı değiştirebilirsiniz.
   
   Elbette, web sayfanızın birden fazla bölüme ihtiyacı olacaktır. Böylece üstbilgi, gezinme, ana, bir yana ve altbilgi için daha fazla div ekleyebiliriz.
   
   
5. Yeni bir div eklemek için Ekle panelinde Sıvı Izgara Düzeni Div Etiketi Ekle'yi seçin.
   
   
6. İletişim kutusunda etiketin kimliğini adlandırabilirsiniz.
   
   
7. Sayfanız için tüm büyük div'ları eklediğimizde, bunları ızgara içinde yeniden konumlandırmak için tıklayıp sürükleyebiliriz.
   
   

Sitemizin mobil sürümünü oluşturmaya başlamamız ve daha büyük boyutlara geçmemiz önerilir. Mobil, Tablet ve Masaüstü çözünürlükleri için Çözünürlük Değiştiriciyi kullanarak görsel sonuçları çalışırken karşılaştırabilirsiniz.

Düzenimizi kaydettiğimizde, üç ekran çözünürlüğünün hepsinde çalışacak bir HTML5 ve CSS3 dosyası alırız. Bu dosyaların içine bakarsak, uyarlanabilir web sayfamızı oluşturmak için dosyaların nasıl çalıştığı hakkında bilgi bulabiliriz.

* Adobe, inceleme amacıyla bu yazılımın bir kopyasını bana verdi.

Telif Hakkı 2018 Adobe Systems Incorporated. Tüm hakları Saklıdır. Adobe ürün ekran görüntüleri, Adobe Systems Incorporated'ın izniyle kullanılmıştır. Adobe, Photoshop, Photoshop Albümü, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Köprü, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Havai Fişek, Contribute, Captivate, Flash Catalyst ve Flash Paper Amerika Birleşik Devletleri ve / veya diğer ülkelerde Adobe Systems Incorporated'in [a] tescilli ticari markaları veya ticari markalarıdır.