Belge penceresinde, ekleme noktasını div etiketinin görünmesini istediğiniz yere yerleştirin.
Son güncelleme:
21 May 2021
- Dreamweaver Kullanıcı Kılavuzu
- Giriş
- Dreamweaver ve Creative Cloud
- Dreamweaver çalışma alanları ve görünümleri
- Site kurma
- Dreamweaver siteleri hakkında
- Sitenizin yerel bir sürümünü kurma
- Yayımlama sunucusuna bağlanma
- Test sunucusu kurma
- Dreamweaver site ayarlarını içe ve dışa aktarma
- Mevcut web sitelerini uzak sunucudan yerel site köküne getirme
- Dreamweaver'daki erişilebilirlik özellikleri
- Gelişmiş ayarlar
- Dosya aktarmak için site tercihlerini ayarlama
- Dreamweaver'da proxy sunucu ayarlarını belirtme
- Dreamweaver ayarlarını Creative Cloud ile senkronize etme
- Dreamweaver'da Git'i kullanma
- Dosyaları yönetme
- Dosyaları oluşturma ve açma
- Dosyaları ve klasörleri yönetme
- Sunucunuzdan dosya alma ve dosyaları sunucunuza koyma
- Dosyaları teslim etme ve teslim alma
- Dosyaları senkronize etme
- Dosyaları farklılıklar açısından karşılaştırma
- Dreamweaver sitenizde dosya ve klasör perdeleme
- Dreamweaver siteleri için Tasarım Notları'nı etkinleştirme
- Olası Gatekeeper zaafını önleme
- Mizanpaj ve tasarım
- Mizanpaj için görsel yardımcılar kullanma
- Sayfanızın mizanpajını hazırlamak için CSS'yi kullanma hakkında
- Bootstrap kullanarak dinamik web siteleri tasarlama
- Dreamweaver'da ortam sorguları oluşturma ve kullanma
- Tablolara sahip içerik sunma
- Renkler
- Değişken ızgara mizanpajlarını kullanarak dinamik tasarım
- Dreamweaver'da Extract
- CSS
- Basamaklı Stil Sayfaları'nı anlama
- CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma
- Dreamweaver'da CSS ön işlemcilerini kullanma
- Dreamweaver'da CSS Stili tercihlerini ayarlama
- Dreamweaver'da CSS kurallarını taşıma
- Dreamweaver'da satır içi CSS'yi CSS kuralına dönüştürme
- Div etiketleriyle çalışma
- Arka plana degradeler uygulama
- Dreamweaver'da CSS3 geçiş efektleri oluşturma ve düzenleme
- Kodu formatlama
- Sayfa içeriği ve varlıklar
- Sayfa özelliklerini ayarlama
- CSS başlığı özelliklerini ve CSS bağ özelliklerini ayarlama
- Metinle çalışma
- Metni, etiketleri ve nitelikleri bulma ve değiştirme
- DOM paneli
- Canlı Görünüm'de düzenleme
- Dreamweaver'da belgeleri kodlama
- Belge penceresinde öğe seçme ve görüntüleme
- Özellik denetiminde metin özelliklerini belirleme
- Web sayfası üzerinde yazım denetimi gerçekleştirme
- Dreamweaver'da yatay cetveller kullanma
- Dreamweaver'da font birleşimlerini ekleme ve değiştirme
- Varlıklarla çalışma
- Dreamweaver'da tarih ekleme ve güncelleştirme
- Dreamweaver'da sık kullanılan varlıklar oluşturma ve yönetme
- Dreamweaver'da görüntü ekleme ve düzenleme
- Medya nesneleri ekleme
- Dreamweaver'da video ekleme
- HTML5 video ekleme
- SWF dosyaları ekleme
- Ses efektleri ekleme
- Dreamweaver'da HTML5 ses ekleme
- Kitaplık öğeleriyle çalışma
- Dreamweaver'da Arapça ve İbranice metin kullanma
- Bağlama ve gezinme
- jQuery bileşenleri ve efektleri
- Web sitelerini kodlama
- Dreamweaver'da kod yazma hakkında
- Dreamweaver'da kodlama ortamı
- Kodlama tercihlerini ayarlama
- Kod rengini özelleştirme
- Kod yazma ve düzenleme
- Kod ipuçları verme ve kod tamamlama
- Kodu daraltma ve genişletme
- Parçacıklar ile kodu tekrar kullanma
- Lint kodu
- Kodu en iyileştirme
- Tasarım görünümünde kod düzenleme
- Sayfaların başlık içeriğiyle çalışma
- Dreamweaver'da sunucu tarafı içerikleri ekleme
- Dreamweaver'da etiket kitaplıkları kullanma
- Dreamweaver'a özel etiketleri içe aktarma
- JavaScript davranışlarını kullanma (genel talimatlar)
- Yerleşik JavaScript davranışları uygulama
- XML ve XSLT hakkında
- Dreamweaver uygulamasında sunucu tarafı XSL dönüşümleri gerçekleştirme
- Dreamweaver uygulamasında istemci tarafı XSL dönüşümleri gerçekleştirme
- Dreamweaver'da XSLT için karakter varlıkları ekleme
- Kodu formatlama
- Ürünler arası iş akışları
- Dreamweaver uzantılarını yükleme ve kullanma
- Dreamweaver uygulama içi güncelleştirmeleri
- Dreamweaver'da Microsoft Office belgeleri ekleme (yalnızca Windows)
- Fireworks ve Dreamweaver ile çalışma
- Contribute ile Dreamweaver sitelerindeki içeriği düzenleme
- Dreamweaver-Business Catalyst entegrasyonu
- Kişiselleştirilmiş e-posta kampanyaları oluşturma
- Şablonlar
- Dreamweaver şablonları hakkında
- Şablonları ve şablon tabanlı belgeleri tanıma
- Dreamweaver şablonu oluşturma
- Şablonlarda düzenlenebilir bölgeler oluşturma
- Dreamweaver'da yinelenen bölgeler ve tablolar oluşturma
- Şablonlarda isteğe bağlı bölgeler kullanma
- Dreamweaver'da düzenlenebilir etiket niteliklerini tanımlama
- Dreamweaver uygulamasında yuvalanmış şablonlar oluşturma
- Şablonları düzenleme, güncelleştirme ve silme
- Dreamweaver'da xml içeriğini dışa ve içe aktarma
- Mevcut bir belgenin şablonunu uygulama veya kaldırma
- Dreamweaver şablonlarındaki içerikleri düzenleme
- Dreamweaver'daki şablon etiketleri için sözdizimi kuralları
- Şablon bölgeleri için vurgulama tercihlerini belirleme
- Dreamweaver'da şablon kullanmanın avantajları
- Mobil ve çoklu ekran
- Dinamik siteler, sayfalar ve web formları
- Web uygulamalarını anlama
- Bilgisayarınızı uygulama geliştirme için ayarlama
- Veritabanı bağlantılarında sorun giderme
- Dreamweaver uygulamasında bağlantı komut dosyalarını kaldırma
- Dinamik sayfalar tasarlama
- Dinamik içerik kaynaklarına genel bakış
- Dinamik içerik kaynaklarını tanımlama
- Sayfalara dinamik içerik ekleme
- Dreamweaver'da dinamik içeriği değiştirme
- Veritabanı kayıtlarını görüntüleme
- Dreamweaver'da canlı veri sağlama ve ilgili sorunları giderme
- Dreamweaver'da özel sunucu davranışı ekleme
- Dreamweaver ile form oluşturma
- Kullanıcılardan bilgi toplamak için formları kullanma
- Dreamweaver'da ColdFusion formları oluşturma ve etkinleştirme
- Web formları oluşturma
- Form öğeleri için geliştirilmiş HTML5 desteği
- Dreamweaver uygulamasını kullanarak bir form geliştirme
- Uygulamaları görsel olarak oluşturma
- Dreamweaver'da kalıp ve ayrıntı sayfaları oluşturma
- Arama ve sonuç sayfaları oluşturma
- Kayıt ekleme sayfası oluşturma
- Dreamweaver'da güncelleme kaydı sayfası oluşturma
- Dreamweaver'da kayıt silme sayfaları oluşturma
- Dreamweaver'da veritabanını değiştirmek için ASP komutları kullanma
- Kayıt sayfası oluşturma
- Oturum açma sayfası oluşturma
- Yalnızca yetkili kullanıcıların erişebileceği bir sayfa oluşturma
- Dreamweaver ile ColdFusion'daki klasörlerin güvenliğini sağlama
- Dreamweaver'da ColdFusion bileşenleri kullanma
- Web sitelerini test etme, önizleme ve yayımlama
- Sorun giderme
Bu div etiketlerini içerik bloklarını ortalamak, sütun etkisi oluşturmak, farklı renk alanları oluşturmak ve daha fazlasını yapmak için kullanmayı öğrenin.
Sayfa mizanpajlarını, el ile div etiketleri ekleyip, bunlara CSS konumlandırma stilleri uygulayarak oluşturabilirsiniz. Bir div etiketi, web sayfasının içeriğindeki mantıksal bölümleri tanımlayan etikettir. Bu div etiketlerini içerik bloklarını ortalamak, sütun etkisi oluşturmak, farklı renk alanları oluşturmak ve çok daha fazlasını yapmak için kullanabilirsiniz.
div etiketleri ve Cascading Style Sheets (CSS) kullanarak web sayfası oluşturma hakkında bilginiz yoksa, Dreamweaver uygulamasıyla birlikte gelen hazır mizanpajlardan birini temel alarak bir CSS mizanpajı oluşturabilirsiniz. CSS ile çalışırken çok rahat değilseniz ancak tablo kullanma hakkında bilginiz varsa, tablo kullanmayı da deneyebilirsiniz.
Div etiketleri ekleme
CSS mizanpajları oluşturmak ve bunları belgenizde konumlandırmak için div etiketlerini kullanabilirsiniz. Konumlandırma stilleri belgenize eklenmiş bir CSS stil sayfanız varsa bu kullanışlıdır. Dreamweaver uygulaması hızla div etiketi eklemenizi ve bu etikete stil uygulamanızı sağlar.
-
-
Aşağıdakilerden birini yapın:
Ekle > HTML > Div'i seçin.
Ekle panelinin HTML kategorisinde Div'i tıklatın.
-
Aşağıdaki seçeneklerden birini belirleyin:
Ekle
div etiketinin konumunu ve yeni bir etiket değilse, etiket adını seçmenizi sağlar.
Sınıf
Etikete uygulanmış olan sınıf stilini görüntüler. Stil sayfası eklediyseniz, o stil sayfasında tanımlı sınıflar listede görünür. Etikete uygulamak istediğiniz stili seçmek için bu açılır menüyü kullanın.
Kimlik
div etiketini tanımlamak için kullanılan adı değiştirmenizi sağlar. Stil sayfası eklediyseniz, o stil sayfasında tanımlı kimlikler listede görünür. Belgenizde bulunan blok kimlikleri listelenmez.
Not:Dreamweaver, belgenize aynı kimliği başka bir etiket olarak girerseniz sizi uyarır.
Yeni CSS Kuralı
Yeni CSS Kuralı iletişim kutusunu açar.
-
Tamam'ı tıklatın.
div etiketi belgenizde yer tutucu metin içeren bir kutu olarak görüntülenir. İşaretçiyi kutunun kenarına taşıdığınızda Dreamweaver kutuyu vurgular.
Div etiketi mutlak şekilde konumlandırılmışsa AP öğesine dönüşür. (Mutlak şekilde konumlandırılmamış div etiketlerini düzenleyebilirsiniz.)
div etiketlerini düzenleme
Bir div etiketi ekledikten sonra bunu değiştirebilir veya buna içerik ekleyebilirsiniz.
Not:
Mutlak şekilde konumlandırılmış div etiketleri AP öğelerine dönüşür.
div etiketlerine kenarlık eklediğinizde veya CSS Mizanpajı Anahatları'nı seçtiyseniz, kenarlıkları görünür. (Görünüm > Görsel Yardımlar menüsünde CSS Mizanpajı Anahatları varsayılan olarak seçilidir.) İşaretçiyi div etiketinin üzerine getirdiğinizde Dreamweaver etiketi vurgular. Vurgu rengini değiştirebilir veya vurgulamayı devre dışı bırakabilirsiniz.
Bir div etiketi seçtiğinizde, buna ilişkin kuralları CSS Tasarımcısı'nı kullanarak görüntüleyebilir ve düzenleyebilirsiniz. Ayrıca, ekleme noktasını div etiketinin içine yerleştirip sonra bir sayfaya eklediğiniz şekilde içerik ekleyerek de div etiketlerine kolayca içerik ekleyebilirsiniz.
-
div etiketini seçmek için aşağıdakilerden birini yapın:
- div etiketinin kenarlığını tıklatın.
Not:Kenarlığı görmek için vurguya bakın.
Bu div etiketinin içine tıklatın ve sonra Ctrl+A (Windows) ya da Command+A (Macintosh) tuşlarına iki defa basın.
div etiketinin içine tıklatın ve sonra Belge penceresinin altındaki etiket seçiciden div etiketini seçin.
-
Açık değilse, CSS Tasarımcısı panelini açmak için Pencere > CSS Tasarımcısı'nı seçin.
Bu div etiketine uygulanan kurallar panelde görünür.
-
Gereken düzenlemeleri yapın.
Div etiketlerinin vurgulama rengini değiştirme
Tasarım görünümünde işaretçiyi div etiketinin kenarına getirirseniz Dreamweaver etiketin kenarlıklarını vurgular. Vurgulamayı gerektiği şekilde etkinleştirebilir ya da devre dışı bırakabilirsiniz ya da vurgu rengini Tercihler iletişim kutusunda değiştirebilirsiniz.
-
Düzen > Tercihler'i (Windows) veya Dreamweaver > Tercihler'i (Macintosh) seçin.
-
Soldaki kategori listesinden Vurgulama'yı seçin.
-
Aşağıdaki değişikliklerden herhangi birini yapın ve Tamam'ı tıklatın:
div etiketlerinin vurgu rengini değiştirmek için Fare Üzerinde renk kutusunu tıklatın ve sonra renk seçiciyi kullanarak bir vurgu rengi seçin (ya da vurgu rengi için metin kutusuna on altılık bir değer girin).
div etiketlerinin vurgulanmasını etkinleştirmek ya da devre dışı bırakmak için Fare Üzerinde'nin Göster onay kutusunu işaretleyin ya da işaretini kaldırın.
Not:Bu seçenek, işaretçiyi üzerine getirdiğinizde Dreamweaver tarafından vurgulanan, örneğin tablolar gibi, tüm nesneleri etkiler.
CSS mizanpaj blokları
CSS mizanpaj bloklarını Tasarım görünümünde çalışırken görselleştirebilirsiniz. CSS mizanpaj bloğu, sayfanızda herhangi bir yere yerleştirebileceğiniz bir HTML sayfası öğesidir. Daha ayrıntılı olarak, CSS mizanpaj bloğu display:inline bildirimini içermeyen bir div etiketi ya da display:block, position:absolute veya position:relative CSS bildirimlerini içeren diğer herhangi bir sayfa öğesidir. Aşağıda, Dreamweaver uygulamasında CSS mizanpaj bloğu olarak kabul edilen öğelere birkaç örnek verilmiştir:
div etiketi
Kendisine atanmış mutlak ya da göreli bir konumu olan görüntü
Kendisine display:block stili atanmış bir a etiketi.
Kendisine atanmış mutlak ya da göreli bir konumu olan paragraf
Not:
Görüntü oluşturma amaçlı olarak, CSS mizanpaj blokları satır içi öğeleri (kodu bir metin satırının içine düşen öğeler) ya da paragraflar gibi basit blok öğeleri içermez.
Dreamweaver, CSS mizanpaj bloklarını görüntülemek için bir dizi görsel yardım sağlar. Örneğin tasarım sırasında CSS mizanpaj blokları için anahatları, arka planları ve kutu modelini etkinleştirebilirsiniz. Ayrıca, fare işaretçisini blokun üzerine getirdiğinizde seçili bir CSS mizanpaj bloğunun özelliklerini görüntüleyen araç ipuçları görüntüleyebilirsiniz.
Aşağıdaki CSS mizanpaj bloğu görsel yardımları listesi, Dreamweaver uygulamasının her biri için neleri görüntülediğini açıklar:
CSS Mizanpajı Anahatları
Sayfadaki tüm CSS mizanpaj bloklarının anahatlarını görüntüler.
CSS Mizanpajı Arka Planları
Ayrı ayrı CSS mizanpaj blokları için geçici olarak atanan arka plan renklerini görüntüler ve sayfada normalde görünecek diğer tüm arka plan renklerini ve görüntülerini gizler.
CSS mizanpaj bloğu arka planlarını görüntülemek için görsel yardımı her etkinleştirdiğinizde, Dreamweaver her CSS mizanpaj bloğuna otomatik olarak ayrı bir arka plan rengi atar. (Dreamweaver renkleri algoritmik bir işlem kullanarak seçer. Renkleri sizin atayabileceğiniz hiçbir yöntem yoktur.) Atanan renkler görsel olarak ayırt edilebilir ve CSS mizanpaj bloklarını birbirinden ayırmanıza yardımcı olacak şekilde tasarlanmıştır.
CSS Mizanpajı Kutu Modeli
Seçili CSS mizanpaj bloğunun kutu modelini (dolgularını ve kenar boşluklarını) görüntüler.
CSS mizanpaj bloklarını görüntüleme
CSS mizanpaj bloğu görsel yardımlarını gerektiği şekilde etkinleştirebilir veya devre dışı bırakabilirsiniz. Tüm CSS mizanpaj bloklarını görüntülemek için Görünüm > Tasarım Görünümü Seçenekleri > Görsel Yardımcılar'ı seçin.
CSS Mizanpajı Arka Planları'nı, CSS Mizanpajı Kutu Modeli'ni ve CSS Mizanpajı Anahatları'nı etkinleştirebilir veya devre dışı bırakabilirsiniz.
Adobe MAX
Yaratıcılık Konferansı
14–16 Ekim Miami Beach ve çevrimiçi
Adobe MAX
Yaratıcılık Konferansı
14–16 Ekim Miami Beach ve çevrimiçi