Yeni Başlayanlar için Dreamweaver CS3 Ders 4

1) Site > New Site komutunun seçin. Defınition iletişim kutusu açıldıktan sonra gerekiyorsa Advanced sekmesine tıklayarak Advanced görünümüne geçin.


2) Site defınition iletişim kutusunun Local Info kategorisinde Site name alanına DW CIB yazın ve tab tuşuna basın. Local root folder alanının yanındaki klasör simgesine tıklayın. C klasörüne Projects adında yeni klasör oluşturun ve iletişim kutusundan bu klasörü seçin select düğmesine tıklayın. Artık bir site oluşturduğumuza göre Dreamweaver'ın içinden ilgili dosyaları kolayca açabilirsiniz.

3) Files panelinde lesson03 >home.htm dosyasına çift tıklayarak bu sayfayı belge penceresinde açın.



Sayfada temel içeriklerin (resimler, başlıklar ve paragraflar) olduğunu ama gerçek bir mizanpaj ya da stil olmadığını göreceksiniz. Bu uygulamada tüm nizanpaj ve stillerin büyük bir kısmı önceden oluşturulmuştur ve bir harici stil sayfasında saklanmaktadır. Sıradaki işlemde harici stil sayfasını mevcut sayfaya ekleyeceğiz.

4) Window > CSS Styles komutunu seçin. CSS Styles panelinde, panelin en alt kısmında yer alan Attach Style Sheet adındaki zincir simgesine tıklayın. Açılan iletişim kutusudan lesson03 klasörünün içindeki css klasörüne gidin ve main.css dosyasını seçin.OK düğmesine tıklayın.









Bir css kuralı şu iki temel bileşenden oluşur; Seçici ve özellikler.
Örneğin, aşağıdaki CSS kuralında seçici h1 etiketidir ve özellikler color :red ve font -size :36 px'tir:
h1 {
color: red;
font-size: 36px;
}

Dreamweaver'da yeni CSS stillerini işaretle ve tıkla ortamında oluşturabilirsiniz; Dreamwaver hertürden seçici için CSS kuralları tanımlamanızı sağlar.

5) CSS Styles panelinin All modunda olduğundan emin olun. CSS Styles panelinin en altında yer alan New CSS Rule düğmesine tıklayın.


6) Açılan New CSS Rule iletişim kutusunda selector Type alanında Tag seçeneğini işaretleyin. Tag listesinden h1'i seçin; liste yöntemine alternatif olarak Tag alanına h1 de yazabilirsiniz. Defıne in alanında main.css'in seçili olduğundan emin olun ve OK düğmesine tıklayın.



7) CSS Rule Defınition for h1 in main.css iletişim kutusunda Type kategorisinin seçili olduğundan emin olun. Bu kategori seçili değilse iletişim kutusunun sol tarafındaki kategori listesinden Type'ı seçin. Font listesinden Verdana,Arial,Helvetica,sans-serif'i seçin. Size alanına 1.9 yazın, ardından Tab tuşuna basın ve listeden ems'yi seçin. Color alanına #EE9414 yazın.



Dreamweaver, CSS özelliklerini sekiz farklı kategoriye ayırır.

Box kategorisine tıklayın. Padding alanında Same for all seçeneğinin işaretini kaldırın. Bottom alanına 3 yazın ve Tab tuşuna basın.



Box kategorisi, seçicileri çevreleyen görünmez kutuyu kontrol eder. Bunu kutunun genişliği, yüksekliği, dolgusu, kenar boşlukları ve diğer özellikleri için değerler girmenizi sağlayarak gerçekleştirir.

9) Border kategorisine tıklayın. Same for all onay kutularının üçünün de işaretini kaldırın. Bottom satırının Style sütununda listeden solid'i seçin. Bottom satırının Style sütunundaki alana 2 yazın ve Tab tuşuna basarak varsayılan pixel ölçüm birimini kabul edin. Bottom satırının Color alanına #A7A37E yazın.



Yeni tanımalanan stil, ayfanın üst kısımlarında bulunan

etiketine derhal uygulanacaktır.

10) CSS Styles panelinde, yeni eklenen h1 stilini seçin ve sürükleyerek h2 girişinin üstüne taşıyın.