Kullanıcı Kılavuzu İptal

CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma

  1. Dreamweaver Kullanıcı Kılavuzu
  2. Giriş
    1. Dinamik web tasarımı hakkında temel bilgiler
    2. Dreamweaver'daki yenilikler
    3. Dreamweaver ile web geliştirme - Genel bakış
    4. Dreamweaver / Yaygın Sorular
    5. Klavye kısayolları
    6. Dreamweaver sistem gereksinimleri
    7. Özellik özeti
  3. Dreamweaver ve Creative Cloud
    1. Dreamweaver ayarlarını Creative Cloud ile senkronize etme
    2. Dreamweaver'da Creative Cloud Libraries
    3. Dreamweaver'da Photoshop dosyalarını kullanma
    4. Adobe Animate ve Dreamweaver ile çalışma
    5. Web için en iyileştirilmiş SVG dosyalarını Libraries'den ayıklama
  4. Dreamweaver çalışma alanları ve görünümleri
    1. Dreamweaver çalışma alanı
    2. Dreamweaver çalışma alanını görsel geliştirme açısından en iyileştirme
    3. Dosya adına veya içeriğe göre dosya arama | Mac OS
  5. Site kurma
    1. Dreamweaver siteleri hakkında
    2. Sitenizin yerel bir sürümünü kurma
    3. Yayımlama sunucusuna bağlanma
    4. Test sunucusu kurma
    5. Dreamweaver site ayarlarını içe ve dışa aktarma
    6. Mevcut web sitelerini uzak sunucudan yerel site köküne getirme
    7. Dreamweaver'daki erişilebilirlik özellikleri
    8. Gelişmiş ayarlar
    9. Dosya aktarmak için site tercihlerini ayarlama
    10. Dreamweaver'da proxy sunucu ayarlarını belirtme
    11. Dreamweaver ayarlarını Creative Cloud ile senkronize etme
    12. Dreamweaver'da Git'i kullanma
  6. Dosyaları yönetme
    1. Dosyaları oluşturma ve açma
    2. Dosyaları ve klasörleri yönetme
    3. Sunucunuzdan dosya alma ve dosyaları sunucunuza koyma
    4. Dosyaları teslim etme ve teslim alma
    5. Dosyaları senkronize etme
    6. Dosyaları farklılıklar açısından karşılaştırma
    7. Dreamweaver sitenizde dosya ve klasör perdeleme
    8. Dreamweaver siteleri için Tasarım Notları'nı etkinleştirme
    9. Olası Gatekeeper zaafını önleme
  7. Mizanpaj ve tasarım
    1. Mizanpaj için görsel yardımcılar kullanma
    2. Sayfanızın mizanpajını hazırlamak için CSS'yi kullanma hakkında
    3. Bootstrap kullanarak dinamik web siteleri tasarlama
    4. Dreamweaver'da ortam sorguları oluşturma ve kullanma
    5. Tablolara sahip içerik sunma
    6. Renkler
    7. Değişken ızgara mizanpajlarını kullanarak dinamik tasarım
    8. Dreamweaver'da Extract
  8. CSS
    1. Basamaklı Stil Sayfaları'nı anlama
    2. CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma
    3. Dreamweaver'da CSS ön işlemcilerini kullanma
    4. Dreamweaver'da CSS Stili tercihlerini ayarlama
    5. Dreamweaver'da CSS kurallarını taşıma
    6. Dreamweaver'da satır içi CSS'yi CSS kuralına dönüştürme
    7. Div etiketleriyle çalışma
    8. Arka plana degradeler uygulama
    9. Dreamweaver'da CSS3 geçiş efektleri oluşturma ve düzenleme
    10. Kodu formatlama
  9. Sayfa içeriği ve varlıklar
    1. Sayfa özelliklerini ayarlama
    2. CSS başlığı özelliklerini ve CSS bağ özelliklerini ayarlama
    3. Metinle çalışma
    4. Metni, etiketleri ve nitelikleri bulma ve değiştirme
    5. DOM paneli
    6. Canlı Görünüm'de düzenleme
    7. Dreamweaver'da belgeleri kodlama
    8. Belge penceresinde öğe seçme ve görüntüleme
    9. Özellik denetiminde metin özelliklerini belirleme
    10. Web sayfası üzerinde yazım denetimi gerçekleştirme
    11. Dreamweaver'da yatay cetveller kullanma
    12. Dreamweaver'da font birleşimlerini ekleme ve değiştirme
    13. Varlıklarla çalışma
    14. Dreamweaver'da tarih ekleme ve güncelleştirme
    15. Dreamweaver'da sık kullanılan varlıklar oluşturma ve yönetme
    16. Dreamweaver'da görüntü ekleme ve düzenleme
    17. Medya nesneleri ekleme
    18. Dreamweaver'da video ekleme
    19. HTML5 video ekleme
    20. SWF dosyaları ekleme
    21. Ses efektleri ekleme
    22. Dreamweaver'da HTML5 ses ekleme
    23. Kitaplık öğeleriyle çalışma
    24. Dreamweaver'da Arapça ve İbranice metin kullanma
  10. Bağlama ve gezinme
    1. Bağlama ve gezinme hakkında
    2. Bağ oluşturma
    3. Görüntü eşlemeleri
    4. Bağlantı sorunlarını giderme
  11. jQuery bileşenleri ve efektleri
    1. Dreamweaver'da jQuery UI ve Mobile bileşenlerini kullanma
    2. Dreamweaver'da jQuery efektlerini kullanma
  12. Web sitelerini kodlama
    1. Dreamweaver'da kod yazma hakkında
    2. Dreamweaver'da kodlama ortamı
    3. Kodlama tercihlerini ayarlama
    4. Kod rengini özelleştirme
    5. Kod yazma ve düzenleme
    6. Kod ipuçları verme ve kod tamamlama
    7. Kodu daraltma ve genişletme
    8. Parçacıklar ile kodu tekrar kullanma
    9. Lint kodu
    10. Kodu en iyileştirme
    11. Tasarım görünümünde kod düzenleme
    12. Sayfaların başlık içeriğiyle çalışma
    13. Dreamweaver'da sunucu tarafı içerikleri ekleme
    14. Dreamweaver'da etiket kitaplıkları kullanma
    15. Dreamweaver'a özel etiketleri içe aktarma
    16. JavaScript davranışlarını kullanma (genel talimatlar)
    17. Yerleşik JavaScript davranışları uygulama
    18. XML ve XSLT hakkında
    19. Dreamweaver uygulamasında sunucu tarafı XSL dönüşümleri gerçekleştirme
    20. Dreamweaver uygulamasında istemci tarafı XSL dönüşümleri gerçekleştirme
    21. Dreamweaver'da XSLT için karakter varlıkları ekleme
    22. Kodu formatlama
  13. Ürünler arası iş akışları
    1. Dreamweaver uzantılarını yükleme ve kullanma
    2. Dreamweaver uygulama içi güncelleştirmeleri
    3. Dreamweaver'da Microsoft Office belgeleri ekleme (yalnızca Windows)
    4. Fireworks ve Dreamweaver ile çalışma
    5. Contribute ile Dreamweaver sitelerindeki içeriği düzenleme
    6. Dreamweaver-Business Catalyst entegrasyonu
    7. Kişiselleştirilmiş e-posta kampanyaları oluşturma
  14. Şablonlar
    1. Dreamweaver şablonları hakkında
    2. Şablonları ve şablon tabanlı belgeleri tanıma
    3. Dreamweaver şablonu oluşturma
    4. Şablonlarda düzenlenebilir bölgeler oluşturma
    5. Dreamweaver'da yinelenen bölgeler ve tablolar oluşturma
    6. Şablonlarda isteğe bağlı bölgeler kullanma
    7. Dreamweaver'da düzenlenebilir etiket niteliklerini tanımlama
    8. Dreamweaver uygulamasında yuvalanmış şablonlar oluşturma
    9. Şablonları düzenleme, güncelleştirme ve silme
    10. Dreamweaver'da xml içeriğini dışa ve içe aktarma
    11. Mevcut bir belgenin şablonunu uygulama veya kaldırma
    12. Dreamweaver şablonlarındaki içerikleri düzenleme
    13. Dreamweaver'daki şablon etiketleri için sözdizimi kuralları
    14. Şablon bölgeleri için vurgulama tercihlerini belirleme
    15. Dreamweaver'da şablon kullanmanın avantajları
  15. Mobil ve çoklu ekran
    1. Ortam sorguları oluşturma
    2. Mobil cihazlar için sayfa yönlendirmesini değiştirme
    3. Dreamweaver kullanarak mobil cihazlar için web uygulamaları oluşturma
  16. Dinamik siteler, sayfalar ve web formları
    1. Web uygulamalarını anlama
    2. Bilgisayarınızı uygulama geliştirme için ayarlama
    3. Veritabanı bağlantılarında sorun giderme
    4. Dreamweaver uygulamasında bağlantı komut dosyalarını kaldırma
    5. Dinamik sayfalar tasarlama
    6. Dinamik içerik kaynaklarına genel bakış
    7. Dinamik içerik kaynaklarını tanımlama
    8. Sayfalara dinamik içerik ekleme
    9. Dreamweaver'da dinamik içeriği değiştirme
    10. Veritabanı kayıtlarını görüntüleme
    11. Dreamweaver'da canlı veri sağlama ve ilgili sorunları giderme
    12. Dreamweaver'da özel sunucu davranışı ekleme
    13. Dreamweaver ile form oluşturma
    14. Kullanıcılardan bilgi toplamak için formları kullanma
    15. Dreamweaver'da ColdFusion formları oluşturma ve etkinleştirme
    16. Web formları oluşturma
    17. Form öğeleri için geliştirilmiş HTML5 desteği
    18. Dreamweaver uygulamasını kullanarak bir form geliştirme
  17. Uygulamaları görsel olarak oluşturma
    1. Dreamweaver'da kalıp ve ayrıntı sayfaları oluşturma
    2. Arama ve sonuç sayfaları oluşturma
    3. Kayıt ekleme sayfası oluşturma
    4. Dreamweaver'da güncelleme kaydı sayfası oluşturma
    5. Dreamweaver'da kayıt silme sayfaları oluşturma
    6. Dreamweaver'da veritabanını değiştirmek için ASP komutları kullanma
    7. Kayıt sayfası oluşturma
    8. Oturum açma sayfası oluşturma
    9. Yalnızca yetkili kullanıcıların erişebileceği bir sayfa oluşturma
    10. Dreamweaver ile ColdFusion'daki klasörlerin güvenliğini sağlama
    11. Dreamweaver'da ColdFusion bileşenleri kullanma
  18. Web sitelerini test etme, önizleme ve yayımlama
    1. Sayfaları önizleme
    2. Dreamweaver web sayfalarını birden fazla cihazda önizleme
    3. Dreamweaver sitenizi test etme

 

Stil sayfaları, ortam sorguları, seçiciler oluşturmak veya eklemek ve CSS özelliklerini ayarlamak için CSS Tasarımcısı panelini kullanmayı öğrenin.

CSS Tasarımcısı paneli
CSS Tasarımcısı paneli

CSS Designer paneli (Pencere > CSS Designer), ortam sorgularıyla birlikte 'görsel olarak' CSS stilleri, dosyalar, kurallar ve ayarlı özellikler oluşturmanıza olanak sağlayan bir CSS Özellik Denetimi'dir.

Aşağıdaki bölümler CSS Designer arabiriminde kullanılabilir:

  • Kaynaklar: Projeyle ilişkili CSS dosyaları koleksiyonu
  • @Ortam: Ekran boyutunu denetlemek için ortam sorguları
  • Seçiciler: @Ortam panelinde seçili ortam sorgusuyla ilişkili seçiciler
  • Özellikler: Yalnızca ayarlı özellikleri gösterme seçeneği bulunan seçili seçici ile ilişkili özellikler

CSS Designer'ı kullanarak bir CSS stil sayfasındaki kuralları ayrı ayrı düzenleyebilir (CSS Designer'da Geçerli sekmesini kullanın) veya isterseniz doğrudan CSS stil sayfasında çalışabilirsiniz (CSS Designer'da Tümü sekmesini kullanın).

Stil sayfaları oluşturma ve ekleme

  1. CSS Tasarımcısı panelinin Kaynaklar bölmesinde öğesini tıklatın ve şu seçeneklerden birini tıklatın:

    • Yeni Bir CSS Dosyası Oluştur: Yeni bir CSS dosyası oluşturmak ve belgeye eklemek için
    • Varolan CSS Dosyasını Ekle: Varolan bir CSS dosyasını belgeye eklemek için
    • Sayfada Tanımla: Belge içinde bir CSS tanımlamak için
    CSS Tasarımcısı'nı kullanarak stil sayfaları oluşturma ve ekleme
    CSS Tasarımcısı'nı kullanarak stil sayfaları oluşturma ve ekleme

    Belirlediğiniz seçeneğe bağlı olarak Yeni Bir CSS Dosyası Oluştur veya Varolan CSS Dosyasını Ekle iletişim kutusu görüntülenir.

  2. CSS dosyasının adını ve bir CSS oluşturuyorsanız, yeni dosyanın kaydedileceği konumu belirtmek için Gözat'ı tıklatın.

  3. Aşağıdakilerden birini yapın:

    • Dreamweaver belgesini CSS dosyasıyla bağlamak için Bağ'ı tıklatın.
    • CSS dosyasını belgeye içe aktarmak için İçe Aktar'ı tıklatın.
  4. (İsteğe Bağlı) Koşullu Kullanım'ı tıklatın ve CSS dosyasıyla ilişkilendirmek istediğiniz ortam sorgusunu belirtin.

Ortam sorgularını tanımlama

  1. CSS Tasarımcısı panelinde, Kaynaklar bölmesinde bir CSS Kaynağını tıklatın.

  2. Yeni bir ortam sorgusu eklemek için @Ortam bölmesinde öğesini tıklatın.

    Ortam Sorgusu Tanımla iletişim kutusu görüntülenir ve Dreamweaver tarafından desteklenen tüm ortam sorgusu koşullarını listeler.

  3. Gereksinimlerinize göre Koşullar'ı seçin.

    Ortam sorguları tanımlama
    Ortam sorguları tanımlama

    Seçtiğiniz tüm koşullar için geçerli değerler belirttiğinizden emin olun. Aksi takdirde, ilgili ortam sorguları başarıyla oluşturulmaz.

    Not:

    Birden çok koşul için yalnızca “Ve” işlemi desteklenir.

Kod aracılığıyla ortam sorgusu koşulları eklerseniz, Ortam Sorgusu Tanımla iletişim kutusunda yalnızca desteklenen koşullar doldurulur. Ancak iletişim kutusundaki Kod metin kutusu tamamen (desteklenmeyen koşullar dahil) görüntülenir.

Tasarım/Canlı görünümünde bir ortam sorgusunu tıklatırsanız görüntü kapısı seçili ortam sorgusuna uyacak şekilde değişir. Tam boyutlu görüntü kapısını görüntülemek için @Ortam bölmesinde Global seçeneğini tıklatın.

CSS Seçicileri tanımlama

  1. CSS Tasarımcısı panelinde, Kaynaklar bölmesinde bir CSS kaynağı veya @Ortam bölmesinde bir ortam sorgusu seçin.

  2. Seçiciler bölmesinde öğesini tıklatın. Belgede seçili olan öğeye bağlı olarak CSS Tasarımcısı, ilgili seçiciyi akıllıca tanımlar ve bunun için size istem görüntüler (en fazla üç kurala kadar).

    Aşağıdakilerden birini veya daha fazlasını yapabilirsiniz:

    • Önerilen seçiciyi yukarı veya aşağı ok tuşlarını kullanarak daha belirli veya daha az belirli yapın.
    • Önerilen kuralı silin ve gerekli seçiciyi yazın. Seçici Türü için ifade ile birlikte seçicinin adını da yazdığınızdan emin olun. Örneğin, bir kimlik belirtiyorsanız, seçicinin adına “#” önekini ekleyin.
    • Belirli bir seçiciyi aramak için bölmenin üst kısmındaki arama kutusunu kullanın.
    • Bir seçiciyi yeniden adlandırmak için seçiciyi tıklatın ve gerekli adı yazın.
    • Seçicileri yeniden düzenlemek için seçicileri gerekli konuma sürükleyin.
    • Bir seçiciyi bir kaynaktan diğerine taşımak için seçiciyi Kaynak bölmesindeki gerekli kaynağa sürükleyin.
    • Seçilen kaynaktaki bir seçiciyi çoğaltmak için seçiciyi sağ tıklatın ve Çoğalt'ı tıklatın.
    • Bir seçiciyi çoğaltmak ve ortam sorgusuna eklemek için seçiciyi sağ tıklatın, fareyi Ortam Sorgusunda Çoğalt seçeneğinin üzerine getirin ve ardından ortam sorgusunu seçin.

    Not: Ortam Sorgusunda Çoğalt seçeneği yalnızca, seçili Seçici kaynağında ortam sorgusu bulunuyorsa kullanılabilir. Bir kaynaktaki Seçiciyi başka bir kaynağa ait bir ortam sorgusunda çoğaltamazsınız.

Stilleri kopyalama ve yapıştırma

Stilleri artık bir seçiciden kopyalayıp bir başkasına yapıştırabilirsiniz. Tüm stilleri veya yalnızca Mizanpaj, Metin ve Kenarlık gibi belirli bir stil kategorisini kopyalayabilirsiniz. 

Bir seçiciyi sağ tıklatın ve kullanılabilir seçeneklerden birini belirleyin:

  • Bir seçicide hiç stil yoksa Kopyala ve Tüm Stilleri Kopyala seçenekleri devre dışı bırakılır.
  • Düzenlenemeyen uzak siteler için Stilleri Yapıştır devre dışı bırakılır. Ancak, Kopyala ve Tümünü Kopyala stilleri kullanılabilir.
  • Bir seçicide zaten kısmen var olan Stiller (Üst Üste Binme) yapıştırılabilir. Tüm
    seçiciler birleştirilerek yapıştırılır.
  • CSS dosyalarının İçe Aktar, Bağ, Satır İçi Stiller gibi farklı bağlantıları için de Stiller
    kopyalanıp yapıştırılabilir.
Stilleri kopyalama ve yapıştırma
Stilleri kopyalama ve yapıştırma

Seçicileri yeniden düzenleme

Gerekli seçiciyi tıklatın ve Seçiciler bölmesiyle yeni konumuna sürükleyin.

CSS özelliklerini ayarlama

Özellikler şu kategoriler halinde gruplandırılır ve Özellikler bölmesinin üst kısmında farklı simgelerle temsil edilir:

  • Mizanpaj
  • Metin
  • Kenarlık
  • Arka Plan
  • Daha fazla (görsel denetimlerle birlikte “salt metin” özellikleri ve “salt metin” olmayan özellikler listesi)
Not:

CSS Seçicisi'nin özelliklerini düzenlemeden önce, CSS Seçicisi ile ilişkili öğeleri Ters İnceleme kullanarak tanımlayın. Bunu yaparak, Ters İnceleme sırasında vurgulanan tüm öğelerin gerçekten değişiklik gerektirip gerektirmediğini değerlendirebilirsiniz. 

Yalnızca ayarlı özellikleri görüntülemek için Ayarlı Olanları Göster onay kutusunu seçin. Bir seçici için belirtebileceğiniz tüm özellikleri görüntülemek için Ayarlı Olanları Göster onay kutusunun seçimini kaldırın.

width veya border-collapse gibi bir özellik ayarlamak için Özellikler bölmesinde özelliğin bitişiğinde görüntülenen gerekli seçenekleri tıklatın.

Geçersiz kılınan özellikler, üstü çizili formatta gösterilir.

Kenar boşluklarını, dolguyu ve konumu ayarlama

CSS Tasarımcısı'nın Özellikler bölmesindeki kutu kontrollerini kullanarak hızlı şekilde kenar boşlukları, dolgu ve konum özelliklerini ayarlayabilirsiniz. Bu örnekte olduğu gibi, kod kullanmayı tercih ediyorsanız hızlı düzenleme kutularında kenar boşluğu ve dolgu için steno kodları belirleyebilirsiniz.

kenar boşluğu özelliği
Kenar boşluğu özelliği

Değerleri tıklatın ve gerekli değeri yazın. Dört değerin de aynı olmasını ve eşzamanlı değiştirilmesini istiyorsanız ortadaki bağ simgesini tıklatın.

Herhangi bir anda, sağ, üst ve alt değerleri korurken örneğin, sol kenar boşluğu değeri gibi belirli değerleri devre dışı bırakabilir veya silebilirsiniz.

Kenarlık özelliklerini ayarlama

Kenarlık Kontrolü özellikleri mantıksal sekmeler halinde düzenlenir, böylece özellikleri hızla görüntüleyebilir ve değiştirebilirsiniz. 

Kenarlık kontrolü özellikleri
Kenarlık kontrolü özellikleri

Kod kullanmayı tercih ediyorsanız hızlı düzenleme metin kutularında kenar boşlukları ve kenarlık yarıçapı için steno kodları belirleyebilirsiniz.

Kenarlık Kontrolü özelliklerini belirlemek için, öncelikle “Tüm Kenarlar” sekmesinde özellikleri ayarlayın. Ardından diğer sekmeler etkinleşir ve “Tüm Kenarlar” sekmesinde ayarlanan özellikler tek tek kenarlıklara yansıtılır.

Tek bir kenarlık sekmesindeki bir özelliği değiştirdiğinizde, “Tüm Kenarlar” sekmesindeki karşılık gelen özelliğin değeri “tanımlanmamış” (varsayılan değer) olarak değişir. 

Aşağıdaki örnekte Üst kenarlığa ait kenarlık rengi önce siyaha ayarlanmış ve ardından kırmızı olacak şekilde değiştirilmiştir. 

Tüm kenarlar için kenarlık rengini ayarlama
Tüm kenarlar için kenarlık rengini ayarlama

Tüm kenarlarda kenarlık
Tüm kenarlarda kenarlık

Üst kenarlık rengini ayarlama
Üst kenarlık rengini ayarlama

Üst kenarlık rengi kırmızı olarak ayarlanmış
Üst kenarlık rengi kırmızı olarak ayarlanmış

Eklenen kod, steno veya uzun forma yönelik yapılan tercih ayarına göre belirlenir. 

İnceleme sırasında sekmeler, “ayarlanan” sekmelerin önceliğine bağlı olarak odaklanırlar. En yüksek öncelik “Tüm kenarlar” sekmesindedir ve ardından “Üst”, “Sağ”, “Alt” ve “Sol” gelir. Örneğin bir kenarlık için yalnızca üst değerin ayarlanması durumunda, hesaplanan mod odağı “Üst” sekmesine alarak “Tüm kenarlar” sekmesini yoksayar, çünkü “Tüm kenarlar” sekmesi ayarlanmamıştır.

Özellikleri devre dışı bırakma veya silme

CSS Özelliğini Etkinleştir/Devre Dışı Bırak özelliği, kodda doğrudan değişiklik yapmanıza gerek kalmadan CSS Tasarımcısı panelinden CSS bölümlerini yorum satırına çevirmenize olanak sağlar. CSS bölümlerini yorum satırına çevirdiğinizde, belirli özelliklerin ve değerlerin sayfanız üzerinde ne tür etkileri olduğunu görebilirsiniz.

Bir CSS özelliğini devre dışı bıraktığınızda, Dreamweaver, devre dışı bıraktığınız CSS özelliğine CSS yorum etiketleri ve bir [disabled] etiketi ekler. Devre dışı bırakılan CSS özelliğini kolayca tercihinize göre yeniden etkinleştirebilir veya silebilirsiniz.

CSS Designer'ı kullanarak her özelliği devre dışı bırakabilir veya silebilirsiniz.

Aşağıdaki ekran görüntüsü, height özelliği için devre dışı bırak ve sil simgelerini gösterir. Özelliğin üzerine fareyi getirdiğinizde bu simgeler görünür olur.

Özelliği devre dışı bırakma/silme
Özelliği devre dışı bırakma/silme

Ayrıca silme ve devre dışı bırakma kontrollerini Kenarlık Kontrolü grubu düzeyinde kullanarak bu eylemleri tüm özelliklere de uygulayabilirsiniz.

Klavye kısayolları

Klavye kısayolları kullanarak CSS seçicileri ve özellikleri ekleyebilir ya da silebilirsiniz. Özellikler bölmesinde özellik grupları arasında da gezinebilirsiniz.  

Kısayol

İş Akışı

CTRL + Alt +[Shift =]

Seçici ekler (Kontrol seçici bölümündeyse)

CTRL + Alt+ S

Seçici ekler (Kontrol uygulamada herhangi bir konumdaysa)

CTRL + Alt +[Shift =]

Özellik ekler (Kontrol özellik bölümündeyse)

CTRL + Alt+ P

Özellik ekler (Kontrol uygulamada herhangi bir konumdaysa)

Öğeyi seçin + Delete

Seçici seçili durumdaysa onu siler

CTRL + Alt + (PgUp/PgDn)

Özellikler alt panelindeyken bölümler arasında atlar 

CSS Seçicisi ile ilişkili sayfa öğelerini tanımlama

Çoğunlukla, tek bir CSS Seçicisi birden fazla sayfa öğesi ile ilişkilidir. Örneğin bir sayfanın ana içeriğindeki metin ve üstbilgi ile altbilgi metninin tamamı aynı CSS Seçicisi ile ilişkilendirilebilir. CSS Seçicisinin özelliklerini düzenlediğinizde, Seçici ile ilişkili tüm öğeler etkilenir (değiştirmek istemedikleriniz de dahil).

Canlı Vurgulama, CSS Seçicisi ile ilişkili tüm öğeleri tanımlamanıza yardımcı olur. Yalnızca bir öğeyi veya birkaç öğeyi değiştirmek istiyorsanız, söz konusu öğeler için yeni bir CSS Seçicisi oluşturup ardından özellikleri düzenleyebilirsiniz.

CSS Seçicisi ile ilişkili sayfa öğelerini tanımlamak için, Canlı Görünüm'de (Canlı Kod “kapalıyken”) farenizi Seçicinin üzerine getirin. Dreamweaver, ilişkili öğeleri noktalı çizgilerle vurgular.

Öğeleri vurgu ile çevirmek üzere Seçiciyi tıklatın. Bu durumda öğeler mavi bir kenarlıkla vurgulanır.

Öğelerin etrafındaki mavi vurguyu kaldırmak için Seçiciyi tekrar tıklatın.

Canlı Vurgulama varsayılan olarak etkindir. Canlı Vurgulamayı devre dışı bırakmak için Belge Araç Çubuğunda Canlı Görünüm seçeneklerini tıklatın ve Canlı Vurgulamayı Devre Dışı Bırak seçeneğini tıklatın. 

Harici CSS stil sayfasına bağ oluşturma

Harici CSS stil sayfasını düzenlerken, o CSS stil sayfasına bağlı tüm belgeler düzenlemeleri yansıtmak için güncelleştirilir.

Belgede bulunan CSS stillerini yeni bir CSS stil sayfası oluşturmak için dışa aktarabilirsiniz ve harici stil sayfasındaki stilleri uygulamak için bu sayfayı ekleyebilir veya sayfaya bağ oluşturabilirsiniz.

Oluşturduğunuz ya da sitenize kopyaladığınız tüm stil sayfalarını sitenizin sayfalarına ekleyebilirsiniz.

  1. Aşağıdakilerden birini yaparak CSS Designer'ı açın:

    • Pencere > CSS Designer'ı seçin.
    • Shift + F11 tuşlarına basın.
  2. CSS Designer'da, Kaynaklar'ın yanındaki + simgesini tıklatın ve Varolan CSS Dosyasını Ekle'yi seçin.

    Varolan CSS dosyasını ekle
    Varolan CSS dosyasını ekle

  3. Aşağıdakilerden birini yapın:

    • Harici CSS stil sayfanıza gitmek için Gözat'ı tıklatın.
    • Dosya/URL kutusuna stil sayfasının yolunu yazın.
  4. Stil sayfasının istediğiniz stili geçerli sayfaya uyguladığını doğrulamak için Önizleme düğmesini tıklatın.

    Stiller beklediğiniz şekilde değilse stil sayfasını kaldırmak için İptal'i tıklatın. Sayfa önceki görünümüne döner.

  5. Tamam'ı tıklatın.

Adobe logosu

Hesabınıza giriş yapın