Kullanıcı Kılavuzu İptal

Sayfanızın mizanpajını hazırlamak için CSS'yi kullanma hakkında

Ara

Son güncelleme: 21 May 2021

CSS mizanpajının temel yapısını kavrayıp sayfaları ve içeriği Dreamweaver'da CSS ile tasarlamayı öğrenin.

CSS sayfa mizanpajı hakkında

CSS sayfa mizanpajı, bir web sayfasındaki içeriği düzenlemek için geleneksel HTML tabloları ya da çerçeveleri yerine Basamaklı Stil Sayfaları formatını kullanır. CSS mizanpajının temel taşı div etiketidir; bu, çoğu durumda metin, görüntü ve diğer sayfa öğeleri için bir kap görevi yapan bir HTML etiketidir. Bir CSS mizanpajı oluştururken, div etiketlerini sayfaya yerleştirin, bunlara içerik ekleyin ve çeşitli yerlere konumlandırın. Bir tablonun satırları ve sütunları arasında bir yerle sınırlı tablo hücrelerinden farklı olarak, div etiketleri web sayfasının herhangi bir yerinde olabilir. Div etiketlerini mutlak olarak (x ve y koordinatları belirterek) veya göreceli olarak (konumunu geçerli konumuna göre belirterek) konumlandırabilirsiniz. Hareketli öğeler, dolgular ve kenar boşlukları (günümüzün web standartları tarafından tercih edilen yöntem) belirterek div etiketlerini de konumlandırabilirsiniz.

CSS sayfa mizanpajı yapısı hakkında

Bu bölüme geçmeden önce temel CSS kavramlarını anlamış olmanız gerekir.

CSS mizanpajının temel taşı div etiketidir; bu, çoğu durumda metin, görüntü ve diğer sayfa öğeleri için bir kap görevi yapan bir HTML etiketidir. Aşağıda örnekte üç ayrı div etiketi içeren bir HTML sayfası gösterilmektedir: bir büyük “container” etiketi ve biri sidebar, biri main content etiketi olmak üzere container etiketinin içinde yer alan iki diğer etiket.

A. Container div B. Sidebar div C. Main Content div

Aşağıda HTML'deki her üç div etiketinin kodu verilmiştir:

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

Yukarıdaki örnekte div etiketlerinin herhangi birine ekli hiçbir “stil” yoktur. CSS kuralları tanımlı değilken, her div etiketi ve içeriği sayfada varsayılan bir konuma yerleştirilir. Ancak, her div etiketinin benzersiz bir kimliği (id) vardır (yukarıdaki örnekte olduğu gibi) ve bu kimlikleri, uygulandığında div etiketlerinin stilini ve konumlandırmasını değiştiren CSS kuralları oluşturmak için kullanabilirsiniz.

Belgenin başlığında ya da harici bir CSS dosyasında yer alabilecek aşağıdaki CSS kuralı, sayfadaki ilk ya da “container” div etiketi için stil kuralları oluşturur:

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

Yukarıdaki #container kuralı container div etiketine 780 piksel genişlikte, beyaz arka plana sahip, kenar boşluksuz (sayfanın sol tarafından), 1 piksellik düz, siyah kenarlıklı ve sola hizalanmış şekilde bir stil uygular. Kuralı container div etiketine uygulamak aşağıdaki sonuçları verir:

A. Sola hizalanmış metin B. Beyaz arka plan C. 1 piksellik düz siyah kenarlık

Sonraki CSS kuralı sidebar div etiketi için stil kuralları oluşturur:

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

#sidebar kuralı sidebar div etiketine 200 piksel genişlikte, gri arka planlı, 15 piksellik üst ve alt dolgu, 10 piksellik sağ dolgu ve 20 piksellik sol dolguya sahip olacak şekilde stil uygular. (Doldurma için varsayılan sıra, üst-sağ-alt-soldur.) Buna ek olarak kural sidebar div etiketini float: left özelliğiyle konumlandırır; bu, sidebar div etiketini container div etiketinin sol tarafına iten bir özelliktir. Kuralı sidebar div etiketine uygulamak aşağıdaki sonuçları verir:

A. 200 piksellik genişlik B. Üst ve altta 15 piksellik dolgu

Son olarak, ana container div etiketinin CSS kuralı mizanpajı bitirir:

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

#mainContent kuralı main content div etiketine sol kenar boşluğu 250 piksel olacak şekilde stil uygular, diğer bir deyişle container div'in sol tarafına ve main content div'in sol tarafına 250 piksellik boşluk koyar. Bunun yanı sıra bu kural main content div'in sağında, altında ve solunda 20 piksellik boşluk sağlar. Kuralı mainContent div etiketine uygulamak aşağıdaki sonuçları verir:

Kodun tamamı aşağıdaki gibidir:

Main Content div, 250 piksellik sol kenar boşluğu

A. 20 piksellik sol dolgu B. 20 piksellik sağ dolgu C. 20 piksellik alt dolgu

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>

Not:

Yukarıdaki örnek kod, Dreamweaver ile birlikte gelen önceden tasarlanmış mizanpajları kullanarak yeni bir belge oluştururken, iki sütunlu sabit sol yan çubuklu mizanpajı oluşturan kodun basitleştirilmiş halidir.

CSS mizanpajıyla sayfa oluşturma

Dreamweaver'da yeni bir sayfa oluştururken, zaten CSS mizanpajı içeren bir sayfa oluşturabilirsiniz. Dreamweaver, aralarından seçim yapabileceğiniz 16 farklı CSS mizanpajıyla birlikte gelir. Buna ek olarak kendi CSS mizanpajlarınızı oluşturabilir ve bunları yapılandırma klasörüne ekleyebilirsiniz, böylece Yeni Belge iletişim kutusunda mizanpaj seçenekleri olarak görünürler.

CSS mizanpajıyla sayfa oluşturma

Dosya > Yeni'yi seçin.
Yeni Belge iletişim kutusunda Boş Sayfa kategorisini seçin. (Bu, varsayılan seçimdir.)
Sayfa Türü için, oluşturmak istediğiniz sayfa türünü seçin.

Not:

Mizanpaj için HTML sayfa türünü seçmelisiniz. Örneğin HTML, ColdFusion®, PHP ve benzerlerini seçebilirsiniz. CSS mizanpajıyla ActionScript™, CSS, Kitaplık Öğesi, JavaScript, XML, XSLT veya ColdFusion Bileşeni sayfası oluşturamazsınız. Yeni Belge iletişim kutusunun Diğer kategorisindeki sayfa türleri de CSS sayfa mizanpajlarını içeremez.
Mizanpaj için, kullanmak istediğiniz CSS mizanpajını seçin. 16 farklı mizanpaj arasından seçim yapabilirsiniz. Önizleme penceresi mizanpajı gösterir ve seçili mizanpajın kısa bir açıklamasını verir.

Hazır CSS mizanpajları aşağıdaki türde sütunları sağlar:

Sabit

Sütun genişliği piksel olarak belirtilir. Bu sütun, tarayıcının boyutuna veya site ziyaretçisinin metin ayarlarına göre yeniden boyutlandırılmaz.

Sıvı

Sütun genişliği, site ziyaretçisinin tarayıcı genişliğinin yüzdesi olarak belirtilir. Bu tasarım, site ziyaretçisi tarayıcıyı genişlettiğinde veya daralttığında buna göre uyarlanır ancak ziyaretçinin metin ayarlarına göre değişmez.
Belge Türü açılır menüsünden bir belge türü seçin.
Mizanpajın CSS'si için Mizanpaj CSS açılır menüsünden bir konum seçin.

Başlığa Ekle

Mizanpajın CSS'sini, oluşturduğunuz sayfanın başlığına ekler.

Yeni Dosya Oluştur

Mizanpajın CSS'sini yeni harici CSS stil sayfasına ekler ve yeni stil sayfasını, oluşturduğunuz sayfaya ekler.

Varolan Dosyaya Bağ Oluştur

Mizanpaj için gerekli CSS kurallarını içeren mevcut bir CSS dosyası belirtmenizi sağlar. Birden fazla belgede aynı CSS mizanpajını (tek bir dosyada bulunan CSS kuralları) kullanmak istediğinizde bu seçenek özellikle kullanışlıdır.
Aşağıdakilerden birini yapın:
- Mizanpaj CSS açılır menüsünden Başlığa Ekle'yi seçtiyseniz (varsayılan seçenek) Oluştur'u tıklatın.
- Mizanpaj CSS açılır menüsünden Yeni Dosya Oluştur'u seçtiyseniz Oluştur'u tıklatın ve sonra Stil Sayfası Dosyasını Farklı Kaydet iletişim kutusunda yeni harici dosya için bir ad girin.
- Mizanpaj CSS açılır menüsünden Varolan Dosyaya Bağ Oluştur'u seçtiyseniz, Stil Sayfası Ekle simgesini tıklatıp, Harici Stil Sayfası Ekle iletişim kutusunu tamamlayarak ve ardından Tamam'ı tıklatarak harici dosyayı CSS dosyası ekle metin kutusuna ekleyin. İşlemi tamamladığınızda Yeni Belge iletişim kutusunda Oluştur'u tıklatın.
Not:

Varolan Dosyaya Bağ Oluştur seçeneğini işaretlediğinizde, belirttiğiniz dosya içerdiği CSS dosyasına ilişkin kurallara sahip olmalıdır.

Mizanpaj CSS'sini yeni bir dosyaya yerleştirdiğinizde ya da varolan bir dosyaya bağladığınızda, Dreamweaver bu dosyayı, oluşturduğunuz HTML sayfasına otomatik olarak bağlar.

Not:

IE görüntüleme sorunlarının giderilmesine yardımcı olan Internet Explorer koşullu yorumları (CC), mizanpaj CSS'niz için konum olarak Yeni Harici Dosya ya da Varolan Harici Dosya'yı seçseniz bile, yeni CSS mizanpajı belgesinin başlığında gömülü kalır.
(İsteğe bağlı) CSS stil sayfalarını yeni sayfanıza (CSS mizanpajıyla ilgisiz), sayfayı oluştururken de ekleyebilirsiniz. Bunu yapmak için CSS dosyası ekle bölmesinin üstündeki Stil Sayfası Ekle simgesini tıklatın ve bir CSS stil sayfası seçin.

Bu işlemle ilgili ayrıntılı bir açıklama için David Powers'ın Automatically attaching a style sheet to new documents (Yeni belgelere otomatik olarak stil sayfası ekleme) makalesine bakın.

Seçenekler listesine özel CSS mizanpajları ekleme

Yeni Belge iletişim kutusundaki seçenekler listesine eklemek istediğiniz CSS mizanpajını içeren bir HTML sayfası oluşturun. Mizanpajın CSS'si HTML sayfasının başlığında bulunmalıdır.

Not:

Özel CSS mizanpajınızı Dreamweaver'la birlikte gelen diğer mizanpajlarla tutarlı hale getirmek için HTML dosyanızı .htm uzantısıyla kaydetmeniz gerekir.
HTML sayfasını Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts klasörüne ekleyin.
(İsteğe bağlı) Mizanpajınızın önizlemesini (örneğin .gif ya da .png dosyasını) Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts klasörüne ekleyin. Dreamweaver'la birlikte gelen varsayılan görüntüler 227 piksel genişliğinde x 193 piksel yüksekliğinde PNG dosyalarıdır.

Not:

Önizleme görüntünüze HTML dosyanızla aynı adı verin, böylece bu dosyayı daha sonra kolayca bulabilirsiniz. Örneğin HTML dosyanızın adı myCustomLayout.htm ise önizleme görüntünüze myCustomLayout.png adını verin.
(İsteğe bağlı) Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes klasörünü açıp, aynı klasördeki mevcut not dosyalarından herhangi birini kopyalayıp yapıştırarak ve ardından bu kopyayı özel mizanpajınız için yeniden adlandırarak özel mizanpajınız için not dosyası oluşturun. Örneğin oneColElsCtr.htm.mno dosyasını kopyalayıp myCustomLayout.htm.mno olarak yeniden adlandırabilirsiniz.
(İsteğe bağlı) Özel mizanpajınız için not dosyası oluşturduktan sonra bu dosyayı açabilir ve mizanpaj adını, açıklamasını ve önizleme görüntüsünü belirtebilirsiniz.