|
Arayüz ve Kullanımı
Dreamwaver'ı
en verimli biçimde kullanabilmek için öncelikle
arayüz konusunda
bilgi sahibi olmamız gerekmektedir. Bu anlamda en çok işimize
yarayacağını zannettiğimiz başlıca kısımlar şunlardır:
Toolbar:
Buradan sayfayı yaparken kullancağınız
arayüzü
seçebilirsiniz. Show Code
View diyerek
kodları inceleyebilir yada 'ben koddan anlamam kardeşim' derseniz
Design
View'i
kullanabilirsiniz. Odamı olmadı o zaman Show
Code
and
Design
View diyerek aynı
zamanda hem görüp hemde
kodlamanız mümkün. Title
kutucuğuna Sitenizin adını yazmanız yeterli olacaktır.
Preview/debug
in Browser
Diyerek sayfanızın Web Tarayıcınızda nası
bişeye
benzediğini görebilirsiniz. References
Buttonu size
sıkıştığınız anlarda ingilizce
olarak kısa ipuçları vermeye yarar. View
Option
Butoonu ile kenarlara
cetvel yerleştirebilir (Rulers),
Klavuz
çizgileri görüntüleyebilir (Grid),
devreye sokabilir (Vusual
Aids) Basit
yardımcıları devreye sokabilirsiniz.
Objects
panel: Bu pencere yardımıyla sitenize çeşitli
mataryeller
ekleyebilirsiniz. Örnek olarak Table,
resim, layer,
rollover resim
ekleme gibi işlemleri bu kısımdan yapabilirsiniz. Üst kısmındaki ufak
oka tıklayarak deişik
mataryel
gurplarını
görüntüleyebilirsiniz. (Characters,
Common,
Forms,
Frames,
Head,
Invısıbles,
Special)
Property
Inspector: Bu
pencere sayfamıza eklediğimiz her türlü
dökümanın genel özelliklerini
değiştirmemize ve yönetmemize yarar. Örnek olarak
insert ettiğiniz bir
resimin sağa
mı yoksa sola mı hizalanması gerektiği veya bir
table
ın
background renginden
borderına
kadar tüm özelliklerini değiştirmek için bu
penceriyi
kullanabilirsiniz. İşlerinizi kolaylaştırmak ve hızlandırmak için çok
kullanışlı bir araçtır.
Document
Window: Burası
sizin arenanız. Sayfayı buraya yapıyorsunuz
anlıyacağınız.
Macromedia Dreamweaver
WYSWYG
(What
You
See
What
You
Get/Ne
Görürsen Onu Alırsın) mantığına
dayanan bir program olduğu için bu alan bizim için çok önemli.
Floating
Panel: bu pencere ise sayfa ile ilgili ince ayarların yapıldığı
kısımdır. Adından da anlaşılacağı üzere, değişken bir paneldir. Yani
aktif duruma getirdiğiniz özelliklerle ilgili ayarlar bu panel
üzerinde sıra ile değişir. CSS
styles,
Fames, vs....
Sayfa Ayarları &
Encoding
Yeni bir döküman
oluşturduktan sonra sayfanızın background,
link, text,
ziyaret edilmiş link, actif
link renkleri ve Encoding
(Dökümanın
dili) Left &
Top marign
(sol ve üst hizalama boşluğu) ve sayfanın
title'ını değiştirmek için:
-
Modify/Page
Properties
menüsüne
tıkladıktan sonra karşınıza çıkan pencereden bu ayarları kolaylıkla
yapabilirsiniz.
Gelelim
Encoding
sorunlarına:
Sayfadaki Türkçe karakterlerin görünmemesi sıkça rastlanılan bir
sorundur. Bunun için
Page
Properties
menusunden
encoding'i doğru
ayarlamalısınz.
Bunun için:
- Öncelikle
Macromedia
Dreamweaver'a
türkçe
dil desteği sağlayan
Encoding.zip
ve
win1254.zip
dosyalarını download
etmek zorundasınız.
- Bu dosyaları indirdikten ve
zipli dosyaları açıp
onları özgür bıraktıktan sonra
C./Program
Files/Macromedia/Dreamweaver
4/Configuration/Encodings
klasörü altına kopyalıyarak
varolan dosyalarla bunları
değiştirmelisinz.
- Bu işlemleri yaptıktan sonra
Page
Propertiesdan
Encodingi
ISO
Latin 5 (Windows 1254) olarak girmelisiniz.
- artık sayfanız Türkçe karakterleri de
tanıycaktır.
Eğer Türkçe karakterler
Dreamweaver
da görünmezse paniklemeyin,
Browserda
görünecektir.
Text, Link ve
Biçimlendirme
Sayfanın en sade ve en önemli kısımlarından biri
olan
Textler bilinmesi
gereken en temel konuların başında gelir. Sayfanızdaki
text ve linklerin
renklerinin uyum içinde olması ziyaretçileri hem hoşnut eder
hemde sayfanızın
kolay anlaşılır bir biçimde olmasını sağlar.
Textleri
biçimlendirmek için:
- Yazdığınız paragraf yada kelimeyi seçili
durumua
getiriniz.
- Ayarların büyük bir kısmını
Propery
Inaspector
üzerinden yapabiliriz. Bunun için özellikle bunun üzerinde
yoğunlaşmamız mantıklı olacaktır.
- Seçtiğiniz yazının büyüklüğü
'size', onun solundaki
yazi tipi
'Font
Familiy',
sağındaki font rengi
'Font
color',
üzerine tıklandığında açılacak olan URL
'Link', ne tarafa hizalanacağını belirten
'Align'
Buttonları,
Alt alta uzayan satırların listemi
'List'
yoksa sıralanmış 1 2 3 şekline giden açıklamalar şekline olacağı
'Ordered'
ayarları, İçerden yada dışardan başlamasını sağlayan
'text
'Outdent',
'text
Indent'
ayarları, textin
kalın olmasını sağlayacak
'bold',
eğik olmasını sağlayacak
'italic'
en çok işimize yarayanlarıdır.
- Daha çok ayarı
değştirmek ve
texti biçimlendirmek için 'Text'
menüsünü
kullanabilrsiniz.
Non
Breaking
Space (Ekstra Boşluk)
Dreamweaver'da
ve diğer
HTLM
editörlerinin çoğunda extra
boşluk bırakmak genelde problem yaşanan bir aktivitedir.
Dreamweaver'da
bu problemi aşmak için basit bir klavye
kısayolunu kullanmamız mümkün.
Extra
boşluk bırakmak için:
- Extra
boşluk bırakmak istediğiniz metin alanına farenin sol
tırnağıyla tıklayınız
- İster
CTRL+Shift+Space
(boşluk) tuş kombinasyonuyla, ister
insert/Special
Characters/Non
Breaking
Space
menüsü
ile extra
boşluğunuzu bırakabilirsiniz. odamı olmadı;
Property
İnspector
üzerinden
Special
Characters
grubundan
İnsert
Non
Breaking
Space
butonuna
tıklayarak aynı işlevi yerine getirebilirsiniz.
- Bu yöntemlerden birini kullanarak
istediğiniz kadar extra
boşluk bırakabilirsiniz.
Line Break (Bir Alt
Satıra Geçmek)
Dreamweaver'da
yeni bir paragrafa başlamak için Enter
tuşuna basmamız yeterli. Fakat bir alt satıra
geçmek istediğimiz
zaman daha farklı bir yol izlemek zorundayız.
Bir alt satıra
geçmek
için:
- Bir alt satıra
geçmek istediğiniz metin alanına farenin
sol tırnağıyla tıklayınız.
-
Shift+Enter
tuş kombinasyonuyla veya
İnsert/Special
Characters/Line
Break
menüsü ile bir alt satıra
geçebilirsiniz
Property
İnspector
üzerinde
Special
Characters
grubundaki
İnsert
Line
Break
butonu ile de
aynı sonuca ulaşabilirsiniz.
- Burada dikkat edilmesi gereken; bırakılan
Line
Breaklerde
geçilen her alt satır
yine
Line
Break bıraktığınız paragrafa bağlı bir alt satır yaratır. Yani
bıraktığınız her Line
Breakde
geçtiğiniz her alt
satır yine
bağlı olduğu paragrafın özelliklerini taşır.
Object Panel ve
kullanımı
Object
Panel Dreamweaver'ın
en önemli bileşenlerinden biridir. Bu panel sayesinde
Tablelar,
imageler,
rollover
imageler,
fırmlar,
özel karakterler... gibi
bi çok elementi
sayfanıza dahil edebilirsiniz.
Object
Paneldeki başlıca
buttonlar
ve görevleri şöyle sıralanabilir:
Tablelarla Çalışmak
Table
lar özellikle
sayfayının görünümünü
koruması açısından çok önemli bileşenlerdir. Örnek olarak bir sayfada
yazıları ve dökümanları
direk üst üste yerleştimektense,
onları yapacağınız table
lara basamak
basamak yerleştirmek hem işinizi kolaylaştıracak
hemde ilerde
değiştirilmesi gereken yerleri diğer kısımları bozmadan değiştirmenizi
sağlayacaktır.
Sayfanıza
Table
eklemek için:
-
Objects paneli
üzerinde insert
table
buttonu
 na
tıklamanız yeterli olacaktır.
- Açılan iletişim kutusundan
table'ınızla ilgili
ayarları yapmanız mümkün.
Colons: dikey
aşağıya doğru uzanan kolonlardır,
Raws: Yatay
sıralar,
with:
Table
ın genişliği,
Border: Kenar
çizgilerinin kalınlığı (eğer bunu 0 olarak girerseniz
borderlar görünmez,
bu tüm uygulamalar için geçerlidir)
Cell
Pladding:
table'ın
hücrelerinin gevşeklik payı,
Cell
Spacing:
Hücreler arası boşlukğun
değeri
- Tüm ayarlarınızı yaptıktan sonra
OK butonuna
basarak tableınızı
insert
edebilirsiniz.
- Table
ın herhangi bir
hücresini seçerek ve o hücrenin arkafon
rengini ve align
özelliklerini değiştireilrsiniz.
Bunun için seçmek istediğiniz hücrenin içine bir defa tıkladıktan sora
içinden bir noktaya sol fare düğmesi ile tıklayıp sürüklemeniz yeterli
olcaktır.
- Seçim işlemini yaptıktan sonra
Property
Inspector
üzerinden Gerekli ayarları rahatlıkla yapabilirsiniz.
Property
Inspector eğer
küçük konumda ise daha çok ayarlara erişmek için
sağ alt köşesindeki
aşağı ok tuşuna bir kez tıklayarak onu
genişletmelisiniz.
Sayfaya Resim Eklemek
Word
Wide
Webin
en önemli silahlarından biri olan
image'ler
yani sayfanızdaki resimleri eklemek ve onların ayarlarını yapmak
konusunda Dreamweaver
size birçok kolaylık sağlıyor. Öncelikle sayfanıza ekleyeceğiniz
gif veya
Jpeg
dosyalarını HTML dosyaları ile aynı dizin altına (aynı dizin altında
bir klasör olabilir mesela
images klasörü
gibi) taşımanız gerekmektedir. Şayet bu işe yeni başlayanların en çok
takıldığı noktalardan biri olan sayfayı
servera gönderdikten sonra resimlerin
görünmemesi resim dosyalarının farklı klasör altında olmasından
kaynaklanır.
Sayfanıza
image
eklemek için:
-
Objects
Panel üzerinden
insert
image
butonuna
tıklamalısınız.
- Açılan pencereden ekleyeceğiniz dosyayı
seçerken yan tarafta preview
olarak görmenizde mümkün.
- İşin en önemli noktası: eğer sayfaya
eklediğinz resimlerin
her yerde (Yani servara
gönderdikten sonrada )görünmesini istiyorsanız
Reletive
to
ksımını
Document olarak
girmelisinz.
Şayet bunu yaptıktan sonra image
in adresinin
'images/resim.gif'
şekline olduğuna dikkat ediniz.
-
'select'
diğerek
resmi sayfanıza dahil edebilirsiniz.
- Resminiz sayfanıza eklendikten sonra resmin
üzerine bir kez tıklayarak onu seçili duruma
getirebilirsinz.
Böylece
Property
Inspector
üzerinden Resimle ilgili ayarları yapabilirsiniz.
- Resmin hizalanacağı yer,
border kalınlığı,
resmin boyutu,
alt
metin (Fare imlecinin resmin üzerine gelince
üzerinde çıkan ve resim yüklenmeden önce altta görünen Metin), link
ekleme gibi özellikleri buradan yapabilirsiniz.
Rollover
Image Kullanımı
Imagelere biraz
hareket biraz da eğlence ve gösteriş kazandırmak için
rollover
image çok
kullanılan bir yöntemdir. Mause
ile üzreine
gidildiğinde farklı bir resimin
çıkması olayı rollover
image olarak
adlandırılır.
Dreamweaver her
konuda olduğu olduğu gibi bu konuda da bize çok yardımcı olmakta ve
elinden geleni yapmaktadır. Bu işe başlamadan önce normal resimle
fareyle üzerine gidildiğinde çıkacak olan resimlerin önceden
hazırlanması gereklidir.
Rollover
Image
eklemek için:
-
Object
Panel üzerindeki
insert
Rollover
image
buttonuna
tıklamalısınız.
- Açılacak olan pencerede sizden
sıraylaResim
dosyaları belirlemenizi ve buttonun
url'sinin ne
olacağını soracaktır.
Image
name: bu kısma Buttonun
görevi ile ilgili herhangi birşey
yazabilirsiniz.
Orginal
Image: adından da
anlaşaılacağı
gibi sayfa yüklendiğinde görünecek olan sabit dosyayı belirtmektedir.
Browse diyerek
resim dosyasını seçebilirsiniz.
Rollover
Image: Bu ise
mause imleci
ile üzerine gidildiğinde çıkcak
olan olan resim dosyasını belirtmektedir. Aynı şekilde
bunuda
belirleyebilirsiniz.
When
Clicked
Go
To
URL: bu ise
buttonun
URL sini yani
bağlanacal olan linki belirtmektedir.
- Tüm bu ayarları yaptıktan sonra
OK tuşuna tıklayarak
Rollover
Buttonu'nuzu
kullanabilirsiniz.
CSS
Styles
Eğer Sayfanızdaki metinlerin
yanlızca sizin
yaptığınız şekillendirme ölçüsünde kalmasını ve sonradan
browserlar tarafından
görünümün
tecavüze uğramamasını istiyorsanız
CSS
styles
kullanmalısınız.
CSS
Styles sadece
sayfanın formunu korumak açısından önemli değildir. Eğer sayfada çok
metin varsa ve bunların bazıları kendi aralarında gruplaşabiliyorsa
(örneğin başlıklar, normal açıklama
textleri, ve küçük açıklama
textleri vs vs)
bunları tek tek biçimlendirmek yerine önceden hazırlanan bir
CSS
Styles
dökümanı ile
biçimlendirmek daha mantıklı olacaktır.
Bu anlamda, bir defaya mahsus olarak hazırlayacağınız bir
style'i defalarca
farklı yerlerde kullanabilrsiniz.
CSS
Styles
eklemek için:
- Windows/CSS
Styles
penceresini eğer aktif değilse aktif duruma getiriniz.
- Bir
Floating
Panel açılacaktır. Bu panel üzerinden
CSS style'leri
yönetebilir yeni style'lar
ekleyebilirsiniz. Yeni bir style
eklemek için: Panelin sağ üst köşesindeki ok tuşuna bir defa
tıklayınız.
- Açılan menüden
New
Style diyoruz.
Karşımıza çıkan kutucukta Style'ın
adını istediğiniz gibi değiştirebilirsiniz. Alttaki seçeneklerden
style'in
türünü belirleyebilirsiniz. Biz bu kısma hiç dokunmacağız, en alttaki
seçenekte ise yeni bir css
dosyası oluşturacağımızı belirterek
(NEW
STYLE
SHEET
FILE)
OK
buttonuna tıklıyoruz.
- İlk oluşturulan
CSS
style'de
Dreamweaver
bizden bir tane css
style belgesi
oluşturmamızı isteyecektir. Bu dosyanın adını verdikten sonra (örnek:
html dosyaları ile aynı klasör altına
styleler.css olarak kaydedebilirsiniz)
save
diyebilirsiniz.
- Şimdi karşımıza çıkacak olan pencereden
style'imizin
özelliklerini belirteceğiz. Biz sadece genel özellikleri belirtip
noktalıyacağız.
Siz daha sonra isterseniz tüm özellikleri değiştirip (bgcolor,
font color,
underline,
puntolar arası genişlik, satırlar arası genişlik vs vs) farklı
kombinasyonlar yaratabilirsiniz. Buradan Font boyutunu,
family kısmını ve
diğer ayarları kendinize göre seçtikten sonra OK diyebilirsiniz. artık
sayfanızda bir css
style
eklediniz ve css
styles dosyası
(stles
sheet)
attach etmiş olduk.
- Eğer bu styler.css
dosyasını hazırladığınız diğer sayfalarda da kullanmak isterseniz;
CSS
Styles panelinden Sağ
üst köşedeki ok işaretine tılayarak
Attach
Style
Sheet
demelisniz.
Bundan sonra dosyayı belirleyip ekleyebilirsiniz.
NOT: Eğer hazırladığınız bir
CSS
Style
uyguladığınız text
in
CSS
style'de belirlenmiş
özelliklerinden birini
Property
Inspector
üzerinden tekrar değiştimeye
kalkarsanız,
(yani
CSS
style
özelliklerinde büyüklüğü 12 piksel olarak verilmiş bir
text'in
büyüklüğünü siz tekrar +3 gibi bşey
olarak değiştirirseniz)
CSS
style
devre dışı kalacaktır. Fakat şunu belirtelim:
CSS
style de
belirtilmemiş özelliklerden birini
değiştitrirseniz herhangi bir aksaklık
çıkmayacaktır.
Rollover
Text-linkler
CSS
stylelerin
belkide en çok
bilinen özelliklerinden biri olan rollover
text-linkler,
oldukça çok dile getirilen problemlerden biri. Bu özellik elbette
Dreamweaver'da
da mevcut. Dreamweaver'da
bu işi yapmanın bir çok yolu olduğuda
bir gerçek.
Bu özelliği basitleştiren Extension
ların yanı
sıra
<HEAD>
tagları
arasına ekleyeceğiniz
STYLE kodları ile
de bu olayı gerçekleştirmek oldukça kolay. Sırayla bir bilinen bu
tekniklerin hepsinie
bir göz atalım isterseniz.
STYLE
Koduyla:
- Sayfanızı Dreamweaver
ile açtıktan sonra
Code
View'a
geçerek
<HEAD>...</HEAD>
tagları
arasına şu kodu yerleştirrmelisiniz:
<style
type="text/css">
<!--
a:link {text-decoration:
none;
color:
#006600;}
a:active
{text-decoration:
none;
color:
#ff0000;}
a:visited
{text-decoration:
none;
color:
darkgreen;}
|