Video: Fixed (Sabit) - Absolute (Mutlak) Elemanları Dikey ve Yatay Olarak Ortalama 2024
Adobe Dreamweaver CS6, içeriği bir sayfada özgürce konumlandırmak için DIV etiketiyle oluşturulan CSS kontrollü sanal konteynırları veya kutuları kullanır. DIV etiketi, sayfanızdaki içerik alanları oluşturmak için kullanılan temel bir etikettir.
Dreamweaver'da, Ekle panelinin Düzen bölümü de dahil olmak üzere çeşitli yerlerden DIV etiketleri oluşturabilirsiniz. Her bir DIV etiketinde, konumunu, görünümünü ve boyutunu kontrol etmek için kendisine atanan benzersiz bir kimlik stili olabilir. İçeriği yerleştirme işlemi genellikle iki adım gerektirir: DIV etiketini oluşturma ve ardından ilgili stili oluşturma.
Dreamweaver, bu işlemi, sayfada serbestçe kutuların içine yerleştirmenizi ve içindeki içeriği yerleştirmenizi sağlayan AP Div aracı ile kolaylaştırır.
CSS, bir sayfada bulunan çoğu konteynır öğesini kutular olarak ele alır; CSS Box model olarak anılan bu yaklaşım, bu öğelerin dolgu, kenar boşlukları, genişlik, yükseklik ve kenarlıklar gibi tekdüzen özellikleri paylaşmasını sağlar.
CSS, bir sayfadaki herhangi bir öğeyi bir kutu olarak (tablo veya liste gibi) görebilirse de, DIV etiketleri, metin, resim ve hatta iç içe yerleştirme için kullanabileceğiniz sanal kutular oluşturmak için genellikle kullanılır kutuları.
Her kutunun kendi genişliği, yüksekliği, konumu (üst ve sol özellikleri aracılığıyla), kenarlık, kenar boşlukları ve dolgu olabilir; her biri uygun CSS özelliklerini kullanarak ayarlanır.
AP (Mutlak Konumlandırılmış) Bölmeler oluşturmak için şu adımları izleyin:
-
Sitenizden yeni bir sayfa oluşturun veya mevcut bir sayfayı açın.
-
Ekle panelinde, Düzen kategorisini seçin.
-
AP Div çiz aracını seçin.
Sayfayı sayfanın üzerine getirdiğinizde imleç çapraz saç gibi görünür.
-
Sayfada herhangi bir yeri tıklayın ve yeni bir AP Bölümü çizmek için sürükleyin; fare düğmesini serbest bırakın.
-
Fare işaretçisini, 4 yönlü bir oka dönüşene kadar kutunun kenarı üzerine getirin; bir kez tıklayın ve kollar her tarafta görünür.
-
Kutuyu dikey veya yatay olarak yeniden boyutlandırmak için bu tutamaçlardan herhangi birini tıklayın ve sürükleyin.
-
Kutuyu taşımak için, sol üst köşesinde oturan sekmeyi tıklayıp sürükleyin ve kutuyu sayfada istediğiniz yere yerleştirin.
Özellik denetçisine bir göz atın ve listelenen pek çok DIV özelliğinin yanı sıra adı da görürsünüz.
-
CSS Stilleri paneli açık değilse, açmak için Pencere → CSS Stilleri'ni seçin; Genişletmek için Tümü panelinin altında stil sayfasının solundaki () simgesini tıklayın.
Oluşturduğunuz yeni AP Divine eklenmiş yeni # apDiv1 kimlik stili görüyorsunuz. Oluşturulan her yeni DIV için, Dreamweaver yaratılış sırasına göre apDiv'i karşılık gelen bir sayı ile atar.
-
Yeni içerik yazmak, yapıştırmak veya eklemek için yeni kutusunun içine tıklayın.
Sayfada bir AP Div çizdiğinizde iki şey meydana gelir: Dreamweaver, kutuyu oluşturmak için bir etiket ekler ve DIV'nin konumunu, genişliğini, yüksekliğini ve diğer özelliklerini depolayan bir CSS KIMLIĞI seçici oluşturur.
Bir AP Div oluşturduktan sonra içeriği doğrudan yazabilir, yapıştırabilir veya içerisine yerleştirebilirsiniz. Herhangi bir DIV öğesine Özellik denetçisinden - çoğunlukla içerik biçimlendirmesini işlemek için, kimlik doğrulayıcısını konumlandırmayı ve boyutları denetleyen bırakarak - sınıf kurabilirsiniz.
