WEB EDİTÖRÜ
1 - FORMLAR
Öğr.Gör. Serkan KORKMAZ
MART 2015
1
GİRİŞ
Sevgili Öğrenciler
İnternet kullanımının hızla yaygınlaşması, web
sayfalarının ve dolayısıyla sayfa tasarımının öneminin
artmasına sebep olmuştur.
2
GİRİŞ
Sevgili Öğrenciler
İnternet ortamında gezinirken ziyaret etmiş olduğunuz
tüm sayfalar web tasarım editörleri kullanılarak
hazırlanmaktadır.
Bunların kaynak kodlarına baktığınızda her birinin
arkasında HTML komutlarının yer aldığını görebilirsiniz.
3
GİRİŞ
Sevgili Öğrenciler
Sayfalar içinde hayranlıkla izlediğiniz resimler,
ziyaretçiler ile iletişime olanak sağlayan formlar gibi
sayfada tüm elemanların kodları mutlaka vardır.
4
GİRİŞ
Sevgili Öğrenciler
Bu modülde web sayfaları içinde sıkça rastlanılan
formları ve form nesnelerinin kullanımını öğreneceksiniz.
5
FORMLAR
 Formlar,
 Web sayfas ı tasarlayan kişi veya şirketlerle internet kullanıcıları
arasındaki veri alışverişini sağlamak için ideal bir araçtır.
6
FORMLAR
 Formlar iki yönlü olarak çalışır;
 Web taray ıcı tarafından ekranda oluşturulan görüntü, kullanıcı
tarafından doldurulduktan sonra gönderilir.
 Web taray ıcı bu bilgileri alarak sunucuda çalıştırılan bir programa
iletir.
 Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.
7
<form>
 Bir form oluşturmak için;
 <form> … </form> etiketleri arasına istenilen kontroller
input etiketi sayesinde belirtilir.
 Kontrollerden toplanan bilgilerin nasıl değerlendirileceği form
etiketinin içinde gösterilir.
8
FORMLAR
 Genel Kullanımı,
 <FORM
 ACTION=url
 METHOD= get - post
 TARGET=pencere>
 …..
 </FORM>
9
Action
 Action,
 Formdan girilecek bilgilerin değerlendirileceği dosyanın tam
yolunu gösterir.
10
Method
 Method,
 Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme
yöntemini belirtir.
 GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan
adrese eklenip değerlendiriciye gönderilir.
 POST değeri ise form içeriğini direkt olarak değerlendiriciye
yönlendirir.
11
Target
 Target,
 Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın
hangi pencerede belireceğini gösterir.
 Pencere isimleri bağlantılar konusunda da gösterdiğimiz “_blank” , “
_top” gibi değerlerden biri olabilir.
12
<input>
 <input>
 Genel amaçlı bir form etiketidir.
 Sonlandırıcı etiketi yoktur.
 Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını
sağlar.
13
<input>
 Genel Kullanımı,
 <INPUT ALIGN=tip [CHECKED]
 MAXLENGTH=uzunluk
 NAME=isim
 SIZE=boyut
 SRC=adres
 TYPE=tip VALUE=değer>
14
<input>
 Align
 Elemanın form üzerinde nasıl konumlanacağını belirtmek için
kullanılır.
 (left, center, right).
 Eğer type değeri bir resim olarak atanırsa bir sonraki satırın resme
göre nasıl yerleştirileceğini belirler.
 Top, middle veya bottom değerlerinden birini alabilir.
15
<input>
 CHECKED
 Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında
CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza
gelmesini sağlar.
16
<input>
 MAXLENGTH
 “text” ve “password” elemanlar ında girilebilecek en çok karakter
sayısını belirtmek için kullanılır.
 Ön tanımlı değeri sınırsızdır.
17
<input>
 NAME
 Girilen verinin hangi değişken ismi altında değerlendirileceğini
belirtmek için kullanılır.
 Mutlaka belirtilmelidir.
18
<input>
 SIZE
 “text” ve “password” elemanlar ında karakter sayısını belirtmek
için kullanılır.
 Diğerlerinde ise piksel cinsinden genişliği belirtmek için
kullanılır.
19
<input>
 SRC
 "image" elemanında resim dosyasını belirtmek için kullanılır.
20
<input>
 TYPE
 Eleman türü belirtilir.
 text, password, checkbox, radio,
 submit, reset, file, hidden, image, button
 değerlerinden biri kullanılır.
21
Form Nesneleri
 CheckBox
 Formumuza onay kutuları eklemek için kullanılır.
22
Form Nesneleri









23
<HTML>
<body >
<FORM ACTION=' http://internet/form' METHOD=POST>
<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL
</FORM>
</body>
</HTML>
Form Nesneleri
24
Form Nesneleri
 Radio
 Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine
olanak tanır.
 Grup içindeki radio kontrolleri her zaman aynı ismi taşımalı,
değerleri ise value değerine atanmalıdır.
25
Form Nesneleri
26
<HTML>
<body >
<FORM ACTION=‘form1.html' METHOD=POST>
<input type="radio" name="kutu" value="1"> HTML<br>
<input type="radio" name="kutu" value="2"> PHP<br>
<input type="radio" name="kutu" value="3">MySQL
</FORM>
</body>
</HTML>
Form Nesneleri
27
Form Nesneleri
 Text
 Kullanıcıdan tek satırlık veri alınmasına olanak tanır.
 Size ve maxlength takıları, bu kontrolle birlikte kullanılabilir.
28
Form Nesneleri
 Adı:
 <input type="text" name=“adi"><br>
 Soyadı:
 <input type="text" name=“soyadi">
29
Form Nesneleri
 Image
 Bir resmi ifade eder ve üzerine tıklandığında form değerlerini
sunucuya yollar.
 Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi
x ve y noktalarına dokunduğu öğrenilebilir.
 Bu tag src ile birlikte kullanılır ve src komutu resmin bulunduğu
URL'yi göstermelidir.
30
Form Nesneleri
 Password
 Formumuza parola yazılabilecek alan eklemek için kullanılır.
 “text” elemanından farklı olarak bu alana girilen karakter aşağıdaki
gibi gösterilir.
 Bu “*” işareti de olabilir.
31
Form Nesneleri
 Kullanıcı:
 <input type="text" name="username"><br>
 Parola:
 <input type="password" name="password">
32
Form Nesneleri





<HTML>
<HEAD>
<TITLE>Formlar</TITLE>
</HEAD>
<BODY>
 <FORM ACTION="form.html" METHOD="GET">
 Adınız: <INPUT TYPE="TEXT" NAME="adi"><br>
 Soyadınız: <INPUT TYPE="TEXT" NAME="soyadi"><br>
33
 </FORM>
 </BODY>
 </HTML>
text
34
Form Nesneleri
 Textarea
 Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek
alan eklemek için kullanılır.
 Yard ımcı öğeler olarak rows ve cols kullanılır.
35
textarea





<HTML>
<HEAD>
<TITLE>Textarea</TITLE>
</HEAD>
<BODY>
 <FORM ACTION="form.html" METHOD="GET">
 Yorumlar: <br>
 <textarea NAME="yorumlar" rows="6“ cols="40"></textarea><br>
 </FORM>
 </BODY>
 </HTML>
36
textarea
37
Form Nesneleri
 Reset
 Tıklandığında form içeriğini temizler.
 Kullanıcının formu tekrar doldurmasını sağlar.
38
Form Nesneleri
 Submit
 Form içeriğini sunucuya yollar.
 Value değeri kullanılarak üzerindeki yazı değiştirilebilir.
39
reset & submit





<HTML>
<HEAD>
<TITLE>Textarea</TITLE>
</HEAD>
<BODY>
 <FORM ACTION="form.html" METHOD="GET">
 Yorumlar: <br>
 <textarea NAME="yorumlar" rows="6“ cols="40"></textarea><br>
 <INPUT TYPE="SUBMIT" VALUE="Gönder">
 <INPUT TYPE="RESET" VALUE="Vazgeç ">
 </FORM>
 </BODY>
 </HTML>
40
textarea
41
Form Nesneleri
 select option
 Çok fazla seçenek gerektiren durumlarda menü diğer adıyla açılır liste
kullanmalısınız.
 Bir menü gereken tüm seçenekleri içerebilir ve formda çok az yer kaplar.
 Bir menü yaratmak için çift taraflı bir <select> etiketiyle başlanır.
 Bu etiket içine her seçenek kendi <option> etiketinin içinde olacak şekilde
yerleştirilir.
 Eğer <option> tagında “selected” parametresi kullanılmışsa form ekrana
görüntülendiğinde bu seçenek, seçili (varsayılan) olarak görüntülenmesi
demektir.
42
Form Nesneleri
 select option
 Bir menü istediğimiz uzunlukta olabilir.
 size bağımsız değişkeni açılır liste oluşturan değer olan 1 ‘e
ayarlanmıştır.
 Size değişkeninin değerini artırırsanız, liste kutusu oluşturursunuz.
 Oluşturduğunuz listenin uzunluğundan daha fazla seçenek varsa,
kutunun hemen sağında bir kaydırma çubuğu görünür.
43
Form Nesneleri
 select option
 Renkler: <select name="renkler" size="1">
 <option>Kırmızı</option>
 <option>Mavi</option>
 <option>Sarı</option>
44
select option
45
Form Nesneleri
 select option
 <p>Renkler: <select name="renkler" size="4">
 <option>Mavi</option>
 <option>Kırmızı</option>
 <option>Sarı</option>
 <option>Yeşil</option>
 </select>
 </p>
46
select option
47
Form Nesneleri
 select optgroup
 Menü seçenekleri kategoriler halindeyse seçenekleri kısımlara bölmek
isteyebiliriz.
48
Form Nesneleri
 Bir menüyü yukarıdaki gibi biçimlendirmek için seçenek gruplarını <optiongroup>
etiketleri içine alırız.
 Her seçenek grubu için başlık belirleyen bir label bağımsız değişkeni ekleriz.
49
 <FORM ACTION="form.html" METHOD="GET">
 <p>Yazıcı Modelini Seçiniz:
 <select name="yazicilar" size="1">
 <optgroup label="Inkjet">
 <option>SuperJet 1400</option>
 <option>SuperJet 1405</option>
 <option>SuperJet 1405 Plus</option>
 </optgroup>
 <optgroup label="Lazer">
 <option>SuperLaser Value Edition</option>
 <option>SuperLaser Pro</option>
 <option>SuperLaser Plus</option>
 </optgroup>
 </select>
 </p>
 </FORM>
50
Form Nesneleri
51
52
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
1. Aşağıdakilerden hangisi elemanın form üzerinde nasıl hizalanacağını
belirtmek için kullanılır?
A size
B type
C src
D align
53
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
2. Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine
olanak tanıyan form nesnesi hangisidir?
A radio
B checkbox
C text
D submit
54
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
3. Formunuza yazı yazılabilecek alan eklemek için kullanılan form
nesnesi hangisidir?
A text
B submit
C textarea
D image
55
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
4. Bir forma personel adını vermek için hangi HTML satırı kullanılır?
A <form title=personel>
B <form name=personel>
C <form name id=personel>
D <form id=personel>
56
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
5. Hangisi form üzerinde bir onay kutusu (checkbox) oluşturmayı sağlar.
A <input type="click">
B <input type="check">
C <input type="confirm">
D <input type="checkbox">
57
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
6. Hangisi bir resim linkidir?
A <img src="C:\resim\araba.jpg">
B <image href="C:\resim\araba.jpg">
C <image src="C:\resim\araba.jpg">
D <a src="C:\resim\araba.jpg">
58
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
7. Hangi tür HTML düğmesi tıklandığında form içeriğini temizler?
A reset
B submit
C send
D call
59
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
8. Hangi tür HTML düğmesi tıklandığında form içeriğini sunucuya
gönderir?
A reset
B submit
C send
D call
60
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
9. Aşağıdaki form elemanlarından hangisi input type’larından değildir?
A password
B text
C textarea
D select
61
Web Editörü
h1 {font-size:13pt; color:green}
h2 {font-size:20pt; color:blue}
h3 {font-size:15pt; color:red}
Stil Şablonları
(CSS)
Öğr.Gör. Serkan KORKMAZ
Harran Üniversitesi Birecik Meslek Yüksekokulu
1
GİRİŞ
Sevgili Öğrenciler
Bir web sayfası içerisinde zaten estetik kuralları gereği
yüzlerce renk ve font kullanmayız.
2
GİRİŞ
Sevgili Öğrenciler
Genelde birbiriyle uyumlu birkaç renk ve birkaç font
kullanırız.
3
GİRİŞ
Sevgili Öğrenciler
Bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS
yardımıyla bir sefer tanımlayıp bütün web sayfamızda
kullanabiliriz.
4
GİRİŞ
Sevgili Öğrenciler
Bu şekilde güncelleme yaparken de onlarca sayfayı
değiştirmekten kurtuluruz.
5
GİRİŞ
Stil Şablonları (CSS – Cascading Style Sheets)
Bu tekniğin en önemli özelliği kullanımındaki esnekliğidir.
6
GİRİŞ
Stil Şablonları (CSS – Cascading Style Sheets)
Sayfalarınız için global şablonlar hazırlama olanağı
verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük
gibi özelliklerini değiştirmek için de kullanılabilir.
7
GİRİŞ
Stil Şablonları (CSS – Cascading Style Sheets)
CSS kodları HTML kodlarının içine yazılır.
8
GİRİŞ
Stil Şablonları (CSS – Cascading Style Sheets)
Türüne göre body veya head bölümlerinde yer alabilir.
9
GİRİŞ
Stil Şablonları (CSS – Cascading Style Sheets)
Bunların dışında harici CSS dosyaları oluşturulup bunlar
gerektiğinde HTML belgesi içerisinde çağırılabilir.
10
CSS Komut Yapısı

Bir stil dokümanı;

<style type="text/css">…..</style>

ifadeleri arasına yazılır.
11
CSS Komut Yapısı



Stil kısmı HTML dokümanının <head>…</head>
aralığında tanımlanır.
Stil tanımlaya başlarken istenirse “<!--” ve “-->”
işaretleri kullanılır.
Bu işaretler, CSS tanımayan tarayıcıların bu kısmı
geçmesini sağlar.
12
CSS










<html>
<head>
<style type=”text/css”>
<!-……….
-->
</style>
</head>
……….
</html>
13
CSS




CSS kodu oluşturmanın en basit yolu;
HTML kodlamasında olduğu gibi herhangi bir metin
editöründe (Note Defteri vs.) elle kodlama
yapmaktır.
Çünkü harici CSS dosyaları (örneğin “style.css”) da
dahil olmak üzere CSS kodları da HTML
dokümanları gibi ASCII (plain-text) formatındadır.
Bu nedenle CSS kodlaması basit text editörleri
yardımıyla yapılabilir.
14
CSS


HTML ile web sayfası tasarımcılığında CSS
kavramı önemli yer tutar.
İyi bir tasarımcı olmanın koşullarından birisi de
CSS konusunu bütün yönleriyle iyice öğrenmektir.
15
CSS




Bir style sheet ifadesi,
selektör ve bildirim olmak üzere 2 ana kısımdan
oluşur.
Selektör (selector) bir style sheet bildiriminin ilk
öğesine verilen isimdir.
Selektör CSS’lerde hangi etiket ile ilgili işlem
yapacağımızı seçmeye yarar.
16
CSS
H1 {color:green}
Selektör (Selector)
Bildirim (Declaration)
17
CSS

Bildirim (decleration) kısmı da kendi içinde

özellik ve değer

olarak 2 temel bileşene ayrılmaktadır.
18
CSS
H1 {color:green}
Özellik (Property)
Değer (Value)
19
CSS

Temel bileşenlerin bir araya getirilmesinde
kullandığımız

“{ }” ve “:” şeklindeki işaretler

yalın haldeki kod satırının tamamlayıcı öğeleridir.
20
CSS

NOT:

Burada önemli bir konu da;



<style> ... </style> etiketi arasındaki stil ifadelerinde,
değer ataması yapmak için yazılan sözcükler " veya '
işaretleri ile sınırlandırılmaz.
Örneğin H1 {color: "blue"} ifadesi yanlıştır.
CSS2 ile kurallaşan bu hususa özen göstermek
gerekmektedir.
21
Stil Şablonlarının Çeşitleri

Stil şablonları üç çeşittir.

Bunlar,

Yerel CSS

Genel CSS

Harici CSS
22
Yerel Stil Şablonu

Yerel stil şablonları,

HTML belgesinin body bölümüne yazılır.

Sadece bir kereliğine, yazıldıkları yerde etkili olur.
23
Yerel Stil Şablonu
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:20pt; color:blue>CSS Kullanımı</h2>
</body>
</html>
24
Yerel Stil Şablonu
25
Yerel Stil Şablonu



Verilen kodları tarayıcıda çalıştırdığımızda iki tane “CSS
Kullanımı” ifadesiyle karşılaşırız.
Bunların her ikisi de h2 olmasına rağmen yazım şekilleri
farklıdır.
Çünkü ikinci etikete etki etmek üzere bir stil şablon
eklenmiştir.
26
Genel Stil Şablonu

HTML belgesinin head bölümüne yazılır ve
belgenin tümünü etkiler.
27
Genel Stil Şablonu
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-- h2 {font-size:20pt; color:blue} -->
</style>
</head>
<body>
<h2>Web Tasarımı</h2><br>
<h2>Web Tasarımı</h2>
</body>
</html>
28
Genel Stil Şablonu
29
Genel Stil Şablonu


Bu örneği genel şablon kullanarak yazdık.
Sonuçta her ikisi de şablonda belirttiğimiz özelliklerle
görüntülendi.
30
Harici Stil Şablonları



Global stil şablonunu, sitemiz içerisindeki tüm sayfalarda
aynı stil özelliklerini kullanmak istediğimizde kullanırız.
Uygularken, stillerimizi yukarıda örneklerini verdiğimiz
şekilde hazırlarız.
Fakat bu stil listesini html dosyamızın içerisinde değil de
boş bir sayfaya yazarız ve css uzantılı bir şekilde
kaydederiz.
31
Harici Stil Şablonları

Ardından da html dosyamızın içerisine

<head> … </head> etiketleri arasına

<link rel="stylesheet“ type="text/css" href="dosya_ismi.css">

şeklinde ekleriz.
32
Harici Stil Şablonları

Aşağıda verilen kodları not defterine yazıp stil.css olarak
kaydediniz.

h1 {font-size:13pt; color:green}

h2 {font-size:20pt; color:blue}

h3 {font-size:15pt; color:red}
33
Harici Stil Şablonları

Daha sonra HTML dosyasını hazırlıyoruz.
34
Harici Stil Şablonları
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1> Stil Şablonları </h1>
<h2> Stil Şablonları </h2>
<h3> Stil Şablonları </h3>
</body>
</html>
35
Harici Stil Şablonları

HTML dosyasının kodları arasında geçen

<link rel="stylesheet" type="text/css“ href="stil.css">



kodu ile harici olarak hazırladığınız stil.css dosyasındaki
stil özelliklerini kullanmanızı sağlar.
Aynı stilleri kullanmak istediğiniz diğer HTML dosyalarına
bu satırı eklemeniz yeterlidir.
Böylelikle her sayfada tek tek stil özellikleri tanımlamamış
ve başlangıçta tanımladığınız stil özelliklerini kullanarak
koddan tasarruf etmiş olursunuz.
36
Harici Stil Şablonları
37
Örnek - 1
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-p {font-size : 12pt;
font-family : Arial;
font-weight : bold;
font-style :italic; color : #00FFFF;
}
-->
</style>
</head>
<body>
<p>Stil Şablonları</p>
</body>
</html>
font-family: Font tipini belirler.
(Arial,Courier, Verdana…)
font-weight: Fontun kalınlık
incelik durumunu belirler.
 bold: Fontu kalın yapar.
 normal: Fontun normal halde
olmasını sağlar. Bu özellik
yazılmadığında normal
özellik alınır.
font-style: Fontun stilini belirler.
 italic: Yazının sağa doğru yatık
olmasını sağlar.
 color: Fontun rengini belirler. 38
Örnek - 1
39
Örnek - 2
text-transform :
lowercase: Yazının tümünü küçük harf yapar.
uppercase: Yazının tümünü büyük harf yapar.
capitalize: Yazıyı istenilen şekilde bırakır.
text-decoration :
underline: Yazının altının çizili olmasını sağlar.
overline: Yazının üstünün çizili olmasını sağlar.
line-through: Yazının üzerinin çizili olmasını sağlar.
none: Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align:
left: Yazının sola bitişik olmasını sağlar.
center: Yazının ortada olmasının sağlar.
right: Yazının sağa bitişik olmasını sağlar.
line-height: Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px
gibi değerler alır.
text-ident: Yazının soldan ne kadar boşlukla içeriden başlayacağını
40
belirler. 5px, 10px gibi değerler alır.
Örnek - 2
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-p{
text-transform : uppercase;
text-decoration : underline;
text-align : left;
line-height : 20px;
text-ident : 15px;
}
-->
</style><head>
<body>
<p>Stil Şablonları</p>
</body>
</html>
41
Örnek - 2
42
Seçiciler (Selectors)


Seçiciler bize oluşturduğumuz <h1>, <h2> ... gibi
etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni
özellikler ekleme olanağı verir.
Aynı zamanda istediğimiz bir kelimeye style özellikleri
atayıp istediğimiz zaman çağırmamızı da sağlar.

İki çeşit seçici vardır.

Bunlar, id seçicisi ve sınıf seçicisi
43
Id Selectors (Id Seçicileri)


Id seçicilerini tanımlayıcı adlarının önündeki “#“
işaretinden tanırız.
HTML belgesinde kendi tanımlayıcı adlarına
gönderme yaparak herhangi bir HTML etiketine stil
vermekte kullanılır.
44
Id Selectors (Id Seçicileri)
<html>
<head><title>Id seçicileri</title>
<style type="text/css">
<!-#idSecici
{
background:teal;
color:white;
font-weight:bold;
font-family:arial;
}
-->
</style></head><body>
<u id=idSecici>ID Seçiciler</u>
</body></html>
45
Id Selectors (Id Seçicileri)
46
Class Selectors (Sınıf Seçicileri)



Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün
aynı olmasını istemediğiniz durumlarda
kullanabilirsiniz.
Böylelikle genel bazı özellikleri koruyarak farklı
özellikleri değiştirebilirsiniz.
Sınıf seçicisinin iki türü vardır.
47
Class Selectors (Sınıf Seçicileri)
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-h2.yesil {color:green}
h2.gri {color:gray}
-->
</style>
</head>
<body>
<h2 class=yesil>YEŞİL sınıf seçicisi ile </h2><br>
<h2 class=gri>GRİ sınıf seçicisi ile </h2>
</body>
</html>
48
Class Selectors (Sınıf Seçicileri)
49
Class Selectors (Sınıf Seçicileri)


Burada sınıf seçicisini sadece h2 için tanımladık.
Sınıf seçicisinin ikinci türü de genel bir sınıf seçicisi
tanımlamaktır.
50
Class Selectors (Sınıf Seçicileri)
<html>
<head>
<title>Css</title>
<style type="text/css">
<!-.yesil {color:green}
.gri {color:gray}
-->
</style>
</head>
<body>
<h3 class=yesil>YEŞİL sınıf seçicisi ile </h3>
<br>
<h4 class=gri>GRİ sınıf seçicisi ile </h4>
</body>
</html>
51
Class Selectors (Sınıf Seçicileri)
52
Stil Şablonlarının Genel
Kullanım Şekilleri


CSS’i HTML üzerinde kullanmak için 3 yöntem (yerelgenel-harici) olduğunu daha önce belirtmiştik.
Şimdi ise komple bir CSS dosyasını HTML üzerinde nasıl
kullanacağımızı görelim.
53
A Etiketinin CSS ile Kullanımı

Bildiğiniz üzere a etiketi HTML’ye çok büyük bir özellik
katan link etiketidir.

Bu etiket ile diğer bir web sayfasına veya bir mail
adresine gönderme yapabiliriz.

Bu etiketin belli durumlarda aldığı değişik değerler vardır.

Yani link tıklandığında etiket artık visited (ziyaret edilmiş)
pozisyonuna geçecektir.

Biz CSS yardımıyla a etiketinin aldığı pozisyonlara
istediğimiz biçimi verebiliriz.
54
A Etiketinin CSS ile Kullanımı

Şimdi a etiketinin aldığı pozisyonları görelim:

İlk pozisyon linke herhangi bir tıklama olmadığındadır.

Bu değer linkin sayfada görülecek ilk halidir.

Visited : Link tıklandıktan sonra etiketin aldığı değerdir.

Active : Linkin aktif olduğu durumdur.

Yani imleç linkin tıklandığı andaki durumdur.

Hover : Linkin üzerine gelindiğinde nasıl bir biçimde olması
isteniyorsa stil o şekilde verilir.
55
A Etiketinin CSS ile Kullanımı
<html><head><title>Css</title>
<style type="text/css">
<!A.normal
{
background-color:white;
color:blue;
}
A.ziyaret:visited
{
background-color:white;
color:maroon;
font-weight:normal;
}
56
A Etiketinin CSS ile Kullanımı
A.aktif:active
{
background-color:white;
color:red;
font-weight:normal;
}
A.degisken:hover
{
background-color:blue;
color:white;
font-weight:bold;
} -->
</style>
</head>
57
A Etiketinin CSS ile Kullanımı
<body>
<a href="#" class="normal">Linkin normal durumu</a><br>
<a href="#" class="ziyaret">Linki tıklayın ve degiştiğini
görün</a><br>
<a href="#" class="aktif">Linkin aktif durumu</a><br>
<a href="#" class="değisken">Linkin üzerine geldiğinde stil
değişecek</a><br>
</body>
</html>
58
A Etiketinin CSS ile Kullanımı
59
CSS

Bazı stil özelliklerinin sonunda gördüğünüz

!important ifadesi ile



ziyaretçi kendi bilgisayarındaki tarayıcı özelliklerini değiştirmiş
olsa dahi bu değerleri kullanmamasını, bizim belirttiğimiz
değerleri kullanmasını söylemiş oluyoruz.
Font özelliklerinde çoğu zaman birden çok font ismi kullandık.
Bunun nedeni eğer ziyaretçinin makinesinde ilk font yoksa
ikincisi o da yoksa üçüncü font kullanılır.
60
CSS





Bazı stil özelliklerinin sonunda gördüğünüz “!important” ifadesi ile
ziyaretçi kendi bilgisayarındaki tarayıcı özelliklerini değiştirmiş olsa
dahi bu değerleri kullanmamasını, bizim belirttiğimiz değerleri
kullanmasını söylemiş oluyoruz.
Font özelliklerinde çoğu zaman birden çok font ismi kullandık.
Bunun nedeni eğer ziyaretçinin makinesinde ilk font yoksa ikincisi
o da yoksa üçüncü font kullanılır.
Şayet o font da yoksa tarayıcının kendi standart fontu kullanılır.
Böylelikle bizde değişik ziyaretçi makinelerinde sayfamızın nasıl
görünebileceğini öncelikle kontrol altına almış oluruz.
61
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
1. Stil kısmı HTML dokümanının hangi aralığında tanımlanır?
A <head>…</head>
B <title>…</title>
C <body>…</body>
D <form>…</form>
62
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
2. Belgenin tümünde etkili olan stil çeşidi hangisidir?
A Dahili
B Genel
C Harici
D Yerel
63
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
3. Sadece bir kereliğine, yazıldıkları yerde etkili olan stil çeşidi hangisidir?
A Dahili
B Genel
C Harici
D Yerel
64
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
4. Id seçicilerinin tanımlayıcı adlarının önünde hangi işaret tanımlanır?
A #
B . (nokta)
C &
D $
65
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
5. Sınıf seçicilerinin tanımlayıcı adlarının önünde hangi işaret tanımlanır?
A #
B . (nokta)
C &
D $
66
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
6. h1 {color:green} css tanımlamasında h1 ile gösterilen kısım nedir?
A selector
B bildirim
C özellik
D değer
67
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
7. h1 {color:green} css tanımlamasında {color:green} ile gösterilen kısım
nedir?
A selector
B bildirim
C özellik
D değer
68
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
8. h1 {color:green} css tanımlamasında color ile gösterilen kısım nedir?
A selector
B bildirim
C özellik
D değer
69
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
9. h1 {color:green} css tanımlamasında green ile gösterilen kısım nedir?
A selector
B bildirim
C özellik
D değer
70
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
10. Css tanımlamasında yazının tümünü küçük harf yapmak için texttransform özelliğine hangi değer verilir?
A
uppercase
B
lowercase
C
capitalize
D
overline
71
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
11.
Css tanımlamasında yazının tümünü büyük harf yapmak için texttransform özelliğine hangi değer verilir?
A
uppercase
B
lowercase
C
capitalize
D
overline
72
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
12. Css tanımlamasıda yazıyı değiştirmeden istenilen şekilde bırakmak
için text-transform özelliğine hangi değer verilir?
A
uppercase
B
lowercase
C
capitalize
D
overline
73
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
13. Aşağıdakilerden hangisi başlık için tanımlanmış bir stildir?
A
p {font-size: 20pt; color: red}
B
u {font-size: 20pt; color: red}
C
s {font-size: 20pt; color: red}
D
h3 {font-size: 20pt; color: red}
74
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
14. h1 {color: "blue"} şeklindeki css ifadesi geçerli bir ifadedir. ( D / Y )
75
UYGULAMA FAALİYETİ
İşlem Basamakları
Öneriler
Web sayfanızda kullanacağınız ve
bütün sayfalarında geçerli olacak
yazının tipi, boyutu, sayfanın düzeni,
rengi ile ilgili stil şablonu oluşturunuz
ve kaydediniz.
Genel stil şablonu tanımlayarak
hazırlamış olduğunuz stilin tüm
web sayfasında geçerli olmasını
sağlayabilirsiniz.
Hazırlamış olduğunuz stil şablonunun
bazı sayfalarda belli özelliklerini
değiştirerek kullanınız.
Sınıf seçicilerini kullanarak ve
mevcut özellikleri koruyarak
istediğiniz değişikliği
yapabilirsiniz.
76
ÖLÇME VE DEĞERLENDİRME
PERFORMANS TESTİ
Bir arkadaşınızla birlikte yaptığınız uygulamayı değerlendirme ölçeğine
göre değerlendirerek, eksik veya hatalı gördüğünüz davranışları
tamamlayınız.
77
KONTROL LİSTESİ
Değerlendirme Ölçütleri
1
Stil şablonlarının komut yapısını öğrendiniz mi?
2
Stil şablon çeşitlerini öğrendiniz mi?
3
Sayfanızda yerel stil şablonunu tanımladınız mı?
4
Sayfanızda genel stil şablonunu tanımladınız mı?
5
Sayfanızda harici stil şablonunu tanımladınız mı?
6
Sayfanızda Id seçicileri kullandınız mı?
7
Sayfanızda sınıf seçicileri kullandınız mı?
8
Stil şablonlarının genel kullanım şekillerini öğrendiniz mi?
78
Web Editörü
Çoklu Ortam Araçları
Öğr.Gör. Serkan KORKMAZ
Harran Üniversitesi Birecik Meslek Yüksekokulu
1
GİRİŞ
Sevgili Öğrenciler
Bir web sayfası içerisinde metin ve resimlerden daha
fazlası olabilir.
2
GİRİŞ
Sevgili Öğrenciler
HTML’de video ve ses klipleri gibi çeşitli çoklu ortam
içerikleri kullanılabilir.
3
GİRİŞ
Sevgili Öğrenciler
HTML etkileşimli ve çarpıcı dokümanlar oluşturmak için
mükemmel bir ortamdır.
4
GİRİŞ
Sevgili Öğrenciler
Ses ve video görüntülerinin HTML sayfalarında
kullanılabilmesi bu ortamı daha da çekici bir konuma
getirir.
5
GİRİŞ
Sevgili Öğrenciler
Ses ve video dosyaları çok yer kapladığından ve internet
bağlantısının yavaş olduğu durumlarda indirilmesi çok
zaman aldığından önceleri web tasarımcıları çoklu ortam
web içerikleri kullanmaktan kaçınmışlardır.
6
GİRİŞ
Sevgili Öğrenciler
Geniş bantlı kullanımı olmayan ve aradıkları bilgiye
çabuk ulaşmak isteyen ve hemen ulaşamayan
ziyaretçiler siteyi gezerken sıkılıp siteden çıkarlar.
7
GİRİŞ
Sevgili Öğrenciler
Ancak geniş bantlı kullanım yaygınlaştıkça web
tasarımcıları da bu tür içerikleri kullanmayı tercih etmeye
başlamışlardır.
8
GİRİŞ
Sevgili Öğrenciler
Bu bölümde bir web sayfasına ses ve video eklemenin
çeşitli yöntemleri anlatılacaktır.
9
GİRİŞ
Sevgili Öğrenciler
Bu bölümde çoklu ortam içeriklerini planlamayı,web
sitenize ses ve video klipler eklemeyi ve onlara bağlantı
eklemeyi öğreneceksiniz.
10
Ses ve Video Kullanımını
Planlamak


Bazı sitelerde ses ve video kliplerinin diğerlerinden
daha iyi olduklarını fark etmişinizdir.
Bir ses veya video klipinin bir web sitesinde gerekli veya
gereksiz olacağına karar verirken aşağıdaki hususlara
dikkat edilmesi gerekir.
11
Ses ve Video Kullanımını Planlamak
Yapın
Yapmayın
Ziyaretçilerin ses veya videoyu kontrol
edebilmesini sağlayın.
Ses dosyalarını sayfa yüklendiğinde
otomatik olarak açılacak şekilde
ayarlamayın.
Klipleri iyi bilinen ve genelde desteklenen
dosya biçimlerinde oluşturun.
Klipleri çoğu tarayıcının
desteklemediği tanınmamış dosya
biçimlerinde oluşturmayın.
Windows’un desteklemediği bir dosya
biçimini kullanıyorsanız bu dosya biçimini
çalıştıracak programın indirilebildiği bir
siteye bağlanan bir köprü oluşturun.
Herkeste sizdeki dosya türlerini
destekleyecek tarayıcılar olmadığını
unutmayın.
Dosya boyutu ve kalitesi arasında uygun
bir denge kurun.
Dosya boyutunu indirilmesinin uzun
sürmemesi için çok büyük
ayarlamayın.
Çoklu ortam olmayan bir alternatif
sağlayın veya en azından klipin ne tür bir
içeriğinin olduğunu gösteren bir ekran
ipucu hazırlayın.
Gerekli bilgileri sadece klipte
vermeyin.
12
Kliplerin Görüntülenmesini
Sağlamak

Bir web sayfasına ses veya video klipleri koymanın
çeşitli yöntemleri vardır.
13
Kliplerin Görüntülenmesini Sağlamak





Çevrimiçi ortam (inline media);
Ses veya video klipleri ziyaretçilerin sayfada bir düğmeyi
tıkladığında oynayacak şekilde sayfanın içine eklenebilir.
Bunun için ziyaretçinin tarayıcısının klip dosyasının türünü
desteklemesi veya destekleyen bir program indirmesi
gerekir.
Bunun için Internet Explorer 5.5 veya üstü sürümler
kullanan ziyaretçiler için <object> etiketi kullanılır.
Diğer sürümler için <embed> etiketi kullanılır.
14
Kliplerin Görüntülenmesini Sağlamak





Harici ortam (External media);
Ses veya video klipler ziyaretçi bir köprüyü tıkladığında
Windows Media Player gibi harici bir uygulamada
oynayacak şekilde bağlanılabilir.
Bunun için ziyaretçilerin klip dosyasının türünü
destekleyen bir harici uygulamasının olması veya
destekleyen bir program indirmesi gerekir.
Bu yöntemin yararı tüm tarayıcılarda aynı şekilde
işlemesidir.
Tıpkı diğer köprülerde olduğu gibi bağlantı için <a> etiketi
kullanılır.
15
Kliplerin Görüntülenmesini Sağlamak

Arka plan sesi (background sound);

Sayfa yüklendiğinde otomatik olarak oynamaya başlayan
ses klipidir.

Sadece Internet Explorer kullanan ziyaretçilerin
tarayıcılarında çalışır.

Bunun için <bgsound> etiketi kullanılır.

Ziyaretçi sesi kontrol edemez be başlamasını durduramaz.

Sesi kapatamamanın rahatsızlık verici olduğu durumlar
olabilir.
16
Kliplerin Görüntülenmesini Sağlamak





Akıcı ses veya video (streaming audio or video);
Ses veya video kliplerini ziyaretçilerin bilgisayarına
aşamalı olarak aktarılacak şekilde ayarlayabilirsiniz.
Örneğin, ziyaretçinin bilgisayarına klipin 30 saniyelik kısmı
yüklendikten sonra klip oynamaya başlar ve oynarken
klipin aktarımı devam eder.
Bu bölümde bu tür kliplere değinilmemiştir.
Gerekli yazılımlar ve sunucular olmadan ayarlanmaları
zordur.
17
Sık Kullanılan Klip Biçimleri ve Oynatıcıları


Hangi yöntemle klipi sunacağımıza karar verdikten sonra
sıra hangi biçimin kullanılacağına karar vermeye gelir.
Tüm biçimler aynı değildir.

Dosya boyutu ve, görüntü ve ses kalitesi, popülerlik
bakımından farklılık gösterirler.

Popülerlik çok önemlidir.

Çünkü genelde ziyaretçilerin bilgisayarında popüler olan
klip biçimlerini oynatacak yazılımlar bulunur.
18
Sık Kullanılan Klip Biçimleri ve Oynatıcıları




Bir bilgisayar bir ses veya video dosyasının
biçimini iki yolla destekler.
Tarayıcısında bir eklenti veya ayrıca bir oynatıcı
vardır.
Eklenti (plug-in) tarayıcının web sayfasının
içeriğini açmasını sağlayan yardımcı dosyadır.
Oynatıcı (player) ise klipi ayrı bir pencerede açan
harici bir programdır.
19
Sık Kullanılan Klip Biçimleri ve Oynatıcıları
Biçim
WAV(ses)
Artıları
Neredeyse tüm tarayıcılar tarafından desteklenmesi,
kalitesi
Eksileri
Dosya boyutunun büyüklüğü; bu yüzden sadece küçük
klip dosyaları veya akış
Oynatıcı
Tarayıcı eklentisi veya Windows Media Player
En Uygun Olduğu Ses efektleri gibi küçük dosyalar
20
Sık Kullanılan Klip Biçimleri ve Oynatıcıları
Biçim
MIDI (ses)
Artıları
Neredeyse tüm tarayıcılar tarafından desteklenmesi;
dosya boyutunun küçüklüğü
Eksileri
Bilgisayar tarafından oluşturulmuş müzik olması;
yapay ses olması
Oynatıcı
Tarayıcı eklentisi veya Windows Media Player
En Uygun Olduğu
Arka plan müziği veya elektronik klavye ile bestelediğimiz
müzikler
21
Sık Kullanılan Klip Biçimleri ve Oynatıcıları
Biçim
MP3 (ses)
Artıları
İndirilebilir müzik klipleri dağıtmak için en popüler biçim
olması; dosya boyutunun küçüklüğü
Eksileri
Çoğu tarayıcı tarafından desteklenmediği için
ziyaretçilerin başka bir oynatıcıya ihtiyaç duyması
Oynatıcı
Windows Media Player veya diğer MP3 çalabilen müzik
oynatıcıları
En Uygun Olduğu İndirilebilen müzik kipleri
22
Sık Kullanılan Klip Biçimleri ve Oynatıcıları
Biçim
AVI (video)
Artıları
Video dağıtımı için popüler bir biçim olması,
Windows Media Player ile de oynatılabilir olması
Eksileri
İşletim sistemi Windows olmayan ziyaretçilerin ayrı bir
oynatıcı indirmek zorunda kalmaları
Oynatıcı
Windows Media Player
En Uygun Olduğu İndirilebilir video
23
Sık Kullanılan Klip Biçimleri ve Oynatıcıları
Biçim
WMV (video)
Artıları
Video için popüler biçim olması; Windows Media Player
ile oynatılabilir olması; varsayılan biçimin Windows Movie
Maker ile oluşturulması
Eksileri
İşletim sistemi Windows olmayan ziyaretçilerin daha
önceden bir oynatıcı yükleme olasılıklarının az olması
Oynatıcı
Windows Media Player
En Uygun Olduğu İndirilebilir video
24
Sık Kullanılan Klip Biçimleri ve Oynatıcıları
Not
Biçimler arası geçiş için farklı kaydet özellikleri olan çok sayıda ses ve
video düzenleme programı vardır.
Bu yüzden klipin ilk biçiminin bir engel olmadığına dikkat edin.
25
Dosya boyutunu ve kalitesini düzenlemek


Bir video klipinde “boyut” sözcüğünün iki anlamı vardır:
Dosya boyutu ve görüntü boyutu (yatayda ve dikeydeki
piksel sayısı)

Bu iki etken doğru orantılıdır.

Büyük görüntü boyutu için büyük dosya boyutu.

Web sayfasındaki bir klipin tüm ekranı kaplamasına gerek
yoktur.

2 veya 3 inçlik bir pencere yeterli olur.
26
Dosya boyutunu ve kalitesini düzenlemek






Dosya boyutu üzerindeki tek etken görüntü boyutu değildir.
Bazı dosya biçimleri çeşitli derecelerde sıkıştırma (compression)
uygulayarak dosya boyutunu küçültebilir.
Bir video klipi içindeki fazladan boşlukları kaldırmak için kullanılan bir
dizi matematiksel formül olan sıkıştırma algoritması ile sıkıştırılır.
Sıkıştırılmış bir klipi oynatmak için uygun codec (compression /
decompression kısaltılması) gerekir.
Codec ortam oynatıcı (media player) programıyla birlikte çalışan bir
yardımcı dosyadır.
Bir video klipi oynatmak için sadece uygun oynatıcı yetmez, oynatıcıda
uygun codec olması da gerekir.
27
Dosya boyutunu ve kalitesini düzenlemek
Not
Bir sıkıştırma algoritması veri dosyasındaki tekrarlanan karakterleri
veya kalıpları belirleyerek işler.
Örneğin, bir algoritma 00000000000000000000 yerine 20*0 belirtir.
28
Ses ve video klipleri bulmak

İnternette çok geniş ses ve video klip depoları vardır.

Ama çoğu klipin özellikleri ihtiyaçlarınızı karşılamaz.




Ses ve video kullanmaktaki temel amaç gösteriş
yapmaktan çok bilgi vermek olmalıdır.
Gerekli bilileri içermeyen bir klip vermek gereksizdir.
Bu nedenle en yararlı ve etkili klipler kendi
hazırlayacağınız kliplerdir.
Örneğin, müşterilerinizi işinizi anlatan görsel bir tura
çıkarabilir veya onlara işin ustalık gerektiren yerlerini
gösterebilirsiniz.
29
Ses Araçları Ekleme

Seçiminize göre geri planda WAV, .AU veya MIDI ses
dosyalarından birini çalmak için Internet Explorer'da
BGSOUND etiketini kullanabilirsiniz.

<BGSOUND SRC=' deneme.midi' LOOP=5>

komutunu kullandığınızda “deneme.mid” adlı MIDI dosyası
sayfa yüklendiğinde 5 defa tekrarlanacak ve sonra
duracaktır.
30
Ses klipine bağlantı oluşturmak

Ses klipine köprü oluşturmak kullanışlı bir yoldur.

Bunun için standart <a> etiketi kullanılır.

Ancak burada web sayfası adı değil ses dosyası belirtilir.



<p> Şirketimizin Genel Müdürü <a href=“hosgeldiniz.wav”>
hoşgeldiniz</a> diyor.
Ziyaretçi bu bağlantıyı tıkladığında bilgisayarında bu tür
dosyalar için hangi program varsa ses klipi açılır.
Windows sistemlerinde genelde waw dosyaları için
varsayılan oynatıcı Windows Media Player ’dır.
31
Ses klipine bağlantı oluşturmak

Bir ortam dosyasına bağlantı oluşturmak ziyaretçiye bir
takım seçenekler sunması açısından dosyayı doğrudan
eklemekten daha iyi bir tercihtir.

Klipi açmayabilirler.

Daha sonra açmak üzere indirebilirler.


Klipi indirmek için farenin sağ düğmesiyle tıklayıp Hedefi
Farklı Kaydet ‘i seçebilirler.
Web kullanıcılarının çoğu bunu yapmayı bilirler.
32
Ses klipine bağlantı oluşturmak





Ziyaretçiler dosyayı indirmeden önce dosyanın biçimini ve
boyutunu bilmek isterler.
Bir bağlantı ile bu bilgileri ziyaretçilere gösterebilirsiniz.
Klipin iki veya daha fazla dosya biçiminde ve kalite
seviyesinde olması şu yararları sağlar.
Kullanıcıların sahip oldukları oynatıcı tipine uygun biçimi
seçebilmeleri
İndirmek için gereken süreyi tercih etmeleri
33
Ses Klipi Katıştırmak





Ses klipi eklemenin diğer bir yolu klipi sayfaya katıştırmaktır
(embed).
Bir sayfaya çoklu ortam içeriği katıştırılırsa harici bir
uygulamayla değil sayfadaki bir eklenti ile oynatılır.
Eklenti (plug-in) tarayıcının web sayfasının içeriğini
açmasını sağlayan yardımcı dosyadır.
Tarayıcılarda küçük bir eklentiler kümesi olur ama istenirse
daha fazlası indirilebilir.
QuickTime, Java, Flash, Shockwave ve Adobe PDF yaygın
olarak bilinen ve kullanılan eklentilerdir.
34
Ses Klipi Katıştırmak




Sayfaya ses katıştırmak için kullanılabilecek iki farklı etiket
vardır.
<embed> Netscape kaynaklı standart olmayan bir etikettir.
HTML’de resmi olarak desteklenen bir etiket değildir ama
çok uzun bir süredir kullanıldığından Internet Explorer dahil
çoğu tarayıcı tarafından desteklenir.
<object> HTML ile uyumlu standart bir etikettir. Sadece
video ve ses klipleri için değil tüm nesneleri eklemek için
kullanılabilir.
35
<embed> Etiketini Kullanmak

<embed> etiketini kullanmak için otomatik olarak autostart=
ile yürütüllecek olsa da olmasa da kaynağı src= ile belirtilir.

Örneğin;

<embed src=“hosgeldiniz.wav” autostart=“false” />


autostart= bağımsız değişkeni kullanılmazsa klip sayfa
yüklendiği zaman otomatik olarak başlar.
Oynatıcı veya eklenti belirtmeye gerek yoktur. Tarayıcı klip
dosyasının uzantısına göre ayarlar.
36
<embed> Etiketini Kullanmak



Arzu edilirse ses düzeni için yükseklik (height) ve genişlik
(width) belirtilebilir.
Örneğin;
<embed src=“hosgeldiniz.wav” autostart=“false”
width=“140” height=“60” />
37
<embed> Etiketini Kullanmak
Not
Klipler üzerinde kullanıcıların kontrolünü azaltabilirsiniz ama bundan
hoşlanmayacaklardır.
Kullanıcılar gerekirse sesi kapatabilmek isterler.
38
<embed> Etiketini Kullanmak

Klipin çok kez oynatılabilmesi için loop= bağımsız
değişkenini kullanabilirsiniz.

loop için geçerli olan değerler;

true

false

infinite

bir tamsayı değeri
39
<embed> Etiketini Kullanmak



Örneğin;
Sonsuz defa tekrar oluşturmak için aşağıdaki gibi bir loop=
değişkeni girilir.
<embed src=“hosgeldiniz.wav” autostart=“false”
loop=“infinite” />
40
<embed> Etiketini Kullanmak
infinite ve true ayarları arasında işlevsel bir fark yoktur.
Not
İkisi de sonsuz tekrar sağlar.
41
<object> Etiketini Kullanmak

<object> etiketi, <embed> gibi özel etiketlerin yerine
konabilecek ve tüm işlevlerini karşılayabilecek standart bir
etiket olarak HTML ‘de yerini almıştır.

Ama kullanımı çok hızlı bir şekilde yaygınlaşmamıştır.

Çünkü kodlamada kullanımı <embed> etiketinden zordur .

Bazı tarayıcılar tarafından desteklenmez.
42
<object> Etiketini Kullanmak




Sayısal kodlama veya MIME türü kodlama olarak da dosya
adını belirtmek için classid= bağımsız değişkeni, nesne
türünü belirtmek için type= bağımsız değişkeni kullanılır.
Örneğin;
<object classid=“hosgeldiniz.wav” type=“audio/wav”
height=“20” width=“100”>
</object>
43
ses klipleri için mime türü
Dosya Türü
MIME türü
AU
audio/basic
WAV
audio/wav
RA
audio/x-pn-realaudio
MID
audio/x-midi
MP3
audio/mpeg
44
<object> Etiketini Kullanmak




Yukarıdaki örneklerde <object> etiketi çift taraflıdır.
Açılış ve kapanış etiketleri arasına klibin parametrelerini
tanımlamak için <param> etiketi yerleştirilebilir.
Örneğin;
Klipi sadece tıklandığı zaman çalışacak (otomatik olarak
açılmayacak) şekilde ayarlamak için aşağıdaki gibi bir
parametre eklenir.
45
<object> Etiketini Kullanmak



<object classid=“hosgeldiniz.wav” type=“audio/wav”
height=“20” width=“100”>
<param name=“autostart” value=“no” valuetype=“data”>
</object>
46
<object> Etiketini Kullanmak

Ortam kliplerini eklemek için <object> etiketini kullanmayı
bilmenize rağmen, biraz daha deneyim kazanana kadar
<embed> etiketini kullanmayı tercih edebilirsiniz.
47
Arka Plan Sesi Kullanmak





Bir ses eklemenin en basit yolu klipi sayfaya arka plan sesi
olarak yerleştirmektir.
Sayfa yüklendiğinde otomatik olarak çalışır.
Arka plan sesi kontrol edilemediği için kullanıcılar bu sesten
rahatsız olduğu durumlarda kapatamazlar.
Ayrıca arka plan sesleri sadece Internet Explorer’da çalışır.
Tüm bunları aklımızda bulundurarak arka plan sesinin nasıl
yapıldığına bakalım.
48
Arka Plan Sesi Kullanmak


<bgsound> etiketi ses dosyasını belirten src= bağımsız
değişkeni ile birlikte kullanılır.
Loop= bağımsız değişkeni ile ses klipinin kaç kez
tekrarlanacağı ve volume= bağımsız değişkeni ile klipin
sesi 0’dan 10000’e kadar ayarlanabilir.

Örneğin;

<bgsound src=“hosgeldiniz.wav” loop=“1” volume=“1000” />
49
Video Ekleme




Bir AVI veya MOV dosyasını oynatmak için ise yine sadece
Explorer'da işe yarayacak DYNSRC komutunu
kullanmalısınız.
Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek
için aşağıdaki gibi bir komut kullanabilirsiniz.
Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer
kaplayacaktır.
<IMG DYNSRC=' deneme.avi' SRC=' deneme.gif'
LOOP=INFINITE >
50
Video Ekleme

Çoklu ortam dosyalarını Netscape'de gösterebiliriz.

Fakat görsel açıdan Explorer'daki kadar başarılı olmuyor.

EMBED komutuyla Netscape penceresine “gömülen”
dosyalar beraberinde çerçeve kaydırma çubuğunu da
birlikte getiriyor.

Netscape için komut şöyle:

<EMBED SRC=' deneme.avi' >
51
Web Editörü
Dreamweaver Temelleri
Öğr.Gör. Serkan KORKMAZ
Harran Üniversitesi Birecik Meslek Yüksekokulu
1
ADOBE DREAMWEAVER CS4
BÖLÜM
1
Dreamweaver
Temelleri
Dreamweaver Temelleri
Başlangıç Sayfası
Siteyi Geliştirmek Üzere Hazırlık Yapmak
Yerel Bir Site Tanımlamak
Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek
Dosya Adlandırma Standartları
Araçlar ve Arayüz
Paneller
Sayfaya Başlık Atamak
GİRİŞ
Adobe Dreamweaver CS4
Web sitelerinin oluşturulmasını, yönetilmesini, bakımının ve
devamlılığını sağlanmasını mümkün kılmak için güçlü görsel
tasarım araçlarıyla metin tabanlı HTML düzenleme
özelliklerini bir araya getirmiştir.
4
GİRİŞ
Dreamweaver CS4
Yazılım, acemi kullanıcıların Web sayfaları oluşturmak için
gereken araçlara kolayca ulaşmasını sağlarken, elle kod yazmaya
alışkın deneyimli kullanıcılara da gerektiğinde doğrudan kodla
çalışma imkânı sağlar.
5
GİRİŞ
Dreamweaver CS4
Bu esnek program, gelişmiş teknikleri erişilebilir ve kolay kullanılır
hale getirir.
6
GİRİŞ
Dreamweaver CS4
Güçlü tasarım, kod ve etkileşim özelliklerinin bir arada sunulması
hem acemiler, hem de deneyimli kullanıcılar için sayısız fayda
sağlar.
7
Dreamweaver CS4



Adobe Dreamweaver CS4, pek çok Web geliştiricisinin
tercih ettiği bir araçtır.
Bir yandan kolayca erişilebilir ve standartlara uygun siteler
hazırlama ihtiyaçlarına karşılık verir.
Diğer yandan da mevcut ve gelişmekte olan pek çok
teknolojik çözümle çalışma imkânı sağlayan bir ortamda
hem görsel tasarım, hem de kod düzenleme araçları
sunar.
8
Dreamweaver CS4



Dreamweaver, üretim sürecini hızlandırır ve site yönetimi
ve sitenin devamlılığını sağlamak için gereken araçları
sunar.
Web geliştirme yazılımları sektöründe liderdir.
Web siteleri oluşturma ve bunların devamlılığını sağlama,
ayrıca sürekli değişen standartlar, yeni teknolojiler ve
kullanıcı ihtiyaçlarını karşılama konularındaki zorlukları
aşmanıza yardımcı olmak için ihtiyaç duyduğunuz araçları
sağlar.
9
Başlangıç Sayfası

Dreamweaver CS4’ü açtıktan sonra bir başlangıç sayfası
göreceksiniz.

Bu sayfada şu araçlar bulunmaktadır:

En son açılan belgelere ait hızlı bağlantılar

Farklı dosya tiplerinde yeni belgeler oluşturmak için
kullanabileceğiniz seçenekler

Dreamweaver ile ilgili sihirbaz ve bilgiler

Kaynaklar

Dreamweaver Exchange Bağlantısı
11
12
Başlangıç Sayfası

Yeni bir sayfa oluşturma işlemine başladığınızda

veya

Başlangıç Sayfası’ndaki diğer seçenekleri seçtiğinizde Başlangıç
Sayfası kendiliğinden kapanır.
13
Siteyi Geliştirmek Üzere Hazırlık Yapmak

Bir Web sitesi oluşturmak için gereken ayrıntılı araştırma ve
planlama aşamalarına zaman ayırmak çok önemlidir.

Geliştirme için bir strateji oluşturmak daha verimli olmanıza,

fikirlerinizi daha iyi ve daha ayrıntılı bir şekilde geliştirmenize

ve projenizin kapsamını daha iyi anlamanıza yardım edecektir.


Ayrıca zamanı ve kaynakları daha verimli kullanmanızı
sağlayacaktır.
İyi bir Web sitesi sezgisel olmalı ve kullanıcılara olumlu ve
benzersiz bir deneyim sunmalıdır.
14
Siteyi Geliştirmek Üzere Hazırlık Yapmak

Etkin bir Web sitesi hazırlarken işe;

ilgili siteyi oluşturma nedenini tanımlama ve özetleme,

rekabet analizi,

akış grafiği ya da taslak hazırlama,

site özelliklerinin nasıl çalışacağını yazılı olarak tanımlama,

sitenin görüntüsünü ve insanlarda oluşturacağı hissi tasarlama

gibi işlemlerle başlarsınız.
15
1. Aşama: Araştırma

Herhangi bir sayfa üzerinde çalışmaya başlamadan önce;

kendinize ya da müşterinize şu soruları sorun.

Siteniz hangi amaçlara hizmet edecektir ?

Sitenizin ne gibi içerikler barındırması gerekir ?
16
2. Aşama: Planlama ve Yapılandırma



Web sitenizle ziyaretçileriniz arasındaki bağlantı, kısmen sitenizin
yapısına bağlıdır.
Açıklık ve kullanım kolaylığı iyi bir Web sitesi için hayati
özelliklerdir.
Geliştirme sürecinin bu önemli aşaması, bu derste göreceğiniz ilk
konudur.
17
2. Aşama: Planlama ve Yapılandırma





Web sitelerinin temelini site yapısı oluşturur.
İyi yapılandırılmamış bir Web sitesinde dolaşmak ve böyle bir siteyi
kullanmak kafa karıştırıcı ve zor olabilir.
Ayrıca böyle bir sitenin devamlılığını sağlamak da pek kolay
olmayabilir.
Anlaşılır, iletişim sorunu olmayan ve ziyaretçilerinin kolayca
kullanabileceği bir site oluşturmak için, herhangi bir HTML belgesi
oluşturmadan önce;
Sitenin yapısının nasıl olacağını ve sitede kullanılacak dosya ve
klasörlerin hiyerarşisini eksiksiz olarak planlamanız gerekir.
18
3. Aşama: Sitenin Tasarlanması


Bir Web sitesi tasarlarken çalışmaya, genel tasarımı gösteren
küçük resimler oluşturarak başlayabilirsiniz.
Bu, fikirlerinizi kâğıt üzerinde görmek için kullanabileceğiniz hızlı bir
beyin fırtınası yöntemidir.

Bu süreç boyunca;

1. Aşama’da sorulan soruların cevaplarını,

yaptığınız araştırmanın sonuçlarını

göz önünde bulundurmaya devam etmeniz gerekir.
19
3. Aşama: Sitenin Tasarlanması





Tasarımınızı geliştirirken uygulamanız gereken ikinci adım,
Başlangıçtaki fikirlerinizin en iyilerini ayıklayarak çok daha ayrıntılı
taslaklar oluşturmaktır.
Son olarak,
Seçilen tasarıma göre oluşturulan sayfaların nasıl görüneceğini
gösteren eksiksiz örnek(ler) oluşturulabilir
Bu tasarım sürecinde işin sahibi ile sürekli olarak görüşmeniz
gerekir.
20
3. Aşama: Sitenin Tasarlanması




Düşüncelerinizin teknik olarak Web sitesinde de aynen
gerçekleştirileceğinden emin olmak için yapacağınız görsel tasarım
bileşenlerini test etme işleminin de bu aşamada gerçekleştirilmesi
gerekir.
Etkin bir Web tasarımının temelini, sitenin tümüyle işlevsel teknik
özelliklerine aktarılabilen görsel kavramlar oluşturur.
Bir Web sitesinde gerçekleştirebileceğiniz şeylerle ilgili bilginiz ne
kadar fazlaysa, sitede kullanacağınız öğelerin etkin bir şekilde
tasarımı için o kadar donanımlısınız demektir.
Bu derste, oluştururken Dreamweaver’dan yardım alabileceğiniz
birçok teknik Web özelliğini öğreneceksiniz.
21
3. Aşama: Sitenin Tasarlanması


Sitenin görüntüsü ve insanlarda oluşturduğu his, görünüm ve
sitede kullanılacak stiller ve renklerle ilgili özel ayrıntıları içeren stil
kılavuzu da genellikle bu aşamada oluşturulur.
Bir Web sitesi oluşturulurken, geliştirme aşamalarının büyük ölçüde
iç içe geçtiği pek çok durumla (aşamaların her birinde sık sık
tekrarlanan çalışmalar) karşılaşılır.
22
4. Aşama: Test





Web sitesini tasarlama işlemini bitirdikten sonra, ziyaretçilerin
kullanımına sunmadan önce onu test etmek de çok önemlidir.
En basit Web sitelerinin bile mantıklı bir şekilde test edilmesi
gerekir.
Örneğin Web sitenizi, popüler Web tarayıcılarının hepsiyle test
etmeniz gerekmektedir.
Her ne kadar Windows’ta kullanılan Microsoft Internet Explorer
günümüzde en çok kullanılan tarayıcı olsa da,
Mozilla Firefox, Google Chrome, Opera ve Safari’nin pazardaki
payları da azımsanmayacak ölçüdedir.
23
4. Aşama: Test

Internet Explorer gibi bir tarayıcının bile,

Bırakın Windows ve Macintosh sürümleri arasındaki farkları,

5, 5.5 ve 6 sürümleri arasında ciddi farklar vardır.

Farklı tarayıcıların sayfalarınızı görüntüleme şekillerindeki farklar
dışında, her sayfayı ve her bağlantıyı da test ettiğinizden emin
olmalısınız.
24
5. Aşama: Devamlılığın Sağlanması



Birçok Web sitesi geliştiricisi, bir Web sitesi geliştirmenin asla sona
ermeyen bir işlem olduğunu düşünür.
Yeni sayfalar eklemek, bağlantıları güncellemek, içerikte değişiklik
yapmak ve resimleri değiştirmek, bir Web sitesinin devamlılığını
sağlamak için uygulanan standart işlemlerdir.
Dreamweaver CS4, kütüphane öğeleri, şablonlar ve diğer araçlar
yardımıyla Web sitelerinin devamlılığını sağlama işlemini
kolaylaştırmak için birçok özellik sunar.
25
Site Klasör Yapısı Nasıl Olmalıdır?





Siteniz içinde dosyalarınız ile çalışırken düzenli bir çalışma ortamı
için, site klasörünüz içinde aşağıdaki klasörleri oluşturmalısınız.
images: Bu klasör sizin sitenizin içinde resimlerinizi
barındıracağınız klasördür.
css: Css klasörü sitenizin içinde stil dosyalarınızı saklayacağınız
klasördür.
varliklar: Sitenizin içinde ham dosyalarınızı saklayacağınız (ileride
kolay bulmanız için) klasördür.
Bu klasörün içine fla, psd gibi sitenizi içinde direk olarak
kullanılmayan, fakat çıktılarının kullanıldığı ham dosyaları
yerleştirebilirsiniz.
26
Site Klasör Yapısı Nasıl Olmalıdır?

Klasörlerinizi adlandırırken Türkçe karakter kullanmamaya özen
göstermelisiniz.

Varliklar klasör ismi bu nedenle varlıklar şeklinde kullanılmamıştır.

Benim_Sitem

images

css

varliklar
27
Yerel Bir Site Tanımlamak


Herhangi bir sayfa oluşturmaya başlamadan önce bir Web sitesi
hazırlamanın ilk adımı;
Bilgisayarınızda sitenin içinde yer alacak her şeyi içerecek olan
klasörün oluşturulmasıdır.

Bu işlem yerel bir site tanımlamak olarak adlandırılır.

Hedef klasör, yerel kök klasörü (local root folder) olarak bilinir.


Sabit diskinizde yer alacak olan yerel sitenin sınırlarını belirler ve
uzak sitenin adeta bir temsili gibidir.
Uzak site, ziyaretçilerinizin erişeceği Web sunucusunda bulunacak
olan asıl sitedir.
28
Yerel Bir Site Tanımlamak


Yerel bir site tanımlamak size yerel ve uzak sürümler arasında aynı
klasör hiyerarşisini koruma imkânı sağlar.
Bu da işlevsel bir site yaratmak ve bunun sürekliliğini sağlamak için
çok önemlidir.
29
Yerel Bir Site Tanımlamak




İçinde sitenin dosyaları ve klasörlerinin yapısıyla ilgili ayarlar
bulunan yerel kök klasörüyle birlikte bir yerel site
oluşturduğunuzda;
Siteye ait dosyaların yerel kök klasörünün dışında bir yerde
saklanması önlenmiş olur.
Sabit diskinizde yer alan ama yerel kök klasörünüzün dışında
bulunan dosyalar uzak sunucuya aktarılamaz.
Bu kısıtlama, siz sitenizi geliştirirken site çevrimiçi olarak erişilebilir
hale getirildiğinde kullanılamaz durumda olan dosyalara erişmenizi
engeller.
30
Yerel Bir Site Tanımlamak



Sitedeki farklı bir konuma taşınmış olan bir dosyaya ait bütün
referansların güncellenmesi gibi pek çok Dreamweaver özelliği
gerçek anlamda çalışabilmek için yerel bir site tanımına ihtiyaç
duyar.
Elemanları daima yerel siteler içinde oluşturma ve yine aynı yerde
çalışma alışkanlığını edinmeniz gerekir.
Bu alışkanlığı kazanmazsanız bağlantılar, yollar ve dosya yönetimi
konularında sorun yaşayabilirsiniz.
31
Yerel Bir Site Tanımlamak





Bilgisayarınızda siteniz için bir klasör oluşturun.
Bu klasör için en uygun yer sürücünüzün kökünde bir klasör
oluşturmaktır. (Ör: C:\WebSitem)
Yerel kök klasörünün adı, ilgili sitenin adı ya da sizin seçtiğiniz
başka bir ad olabilir.
Birden fazla site hazırlıyorsanız, siteleri birbirinden kolayca
ayırmanızı sağlayacak açıklayıcı isimler seçmeniz işinizi
kolaylaştıracaktır.
Yerel kök klasörünün adı sadece dosya yönetimi açısından
önemlidir ve sitenin ziyaretçileri tarafından görünmeyecektir.
32
Yerel Bir Site Tanımlamak


Dreamweaver içinde site oluşturmak için aşağıdakileri yapın:
Dreamweaver başlangıç sayfasından Dreamweaver Sitesi… menü
nesnesini seçin.
33
34
Yerel Bir Site Tanımlamak

veya

Site > Yeni Site

menü nesnesini seçin.
35
36
Yerel Bir Site Tanımlamak


Temel ve Gelişmiş adındaki iki sekmesiyle birlikte Site Tanımı
iletişim kutusu açılacaktır.
Bu sekmeleri kullanarak bir site tanımlama işlemini nasıl
gerçekleştirmek istediğinizi seçebilirsiniz.
37
38
Yerel Bir Site Tanımlamak



Temel, iletişim kutusunu açtığınızda varsayılan olarak görünen
moddur ve işlem boyunca size adım adım yardımcı olur.
Gelişmiş modu, yapılandırmada kullanabileceğiniz bir dizi ilave
seçenek ve ayar sunar.
Temel modundaki açıklayıcı metinler burada görüntülenmez.
39
40
Yerel Bir Site Tanımlamak





Bu uygulamada henüz seçili durumda değilse Temel sekmesine
tıklayın.
Dreamweaver, Site Tanımı iletişim kutusunun Temel sekmesinde
“Sitenizi nasıl adlandırmak istersiniz?” ifadesiyle sitenizin adının ne
olacağını soracaktır.
Site adı kutusuna Dreamweaver yazın ve İleri düğmesine tıklayın.
Anlaşılır ve mantıklı isimler her bir siteyi diğerlerinden kolayca
ayırmanızı sağlar ve birden fazla siteyle çalışırken bunların yönetimini
kolaylaştırır.
Yerel kök klasöründe olduğu gibi site ismi sadece sizin
Dreamweaver’ın tanımlanmış siteler listesinde referans olarak
41
kullanacağınız bir araçtır ve sitenizin kullanıcıları tarafından görülmez.
Yerel Bir Site Tanımlamak

“ColdFusion, ASP.NET, ASP, JSP, yada PHP gibi bir sunucu
teknolojisi ile çalışmak ister misiniz?”

ifadesiyle ColdFusion, ASP.NET, ASP, JSP ya da PHP gibi bir
sunucu teknolojisiyle çalışıp çalışmayacağınızı soracaktır.

“Hayır, sunucu teknolojisi kullanmak istemiyorum” seçeneğine ait
radyo düğmesine tıklayarak

Bir sunucu teknolojisi kullanmak istemediğinizi belirtin.

İleri düğmesine tıklayarak bir sonraki bölüme geçin.
42
43
Yerel Bir Site Tanımlamak



“Makinemdeki yerel kopyaları düzenle sonra hazır olduğunda
sunucuya yükle (önerilen)” seçeneğine tıklayın.
Şu anda makinenizdeki dosyalarla çalışacaksınız ve bir uzak
sunucuya erişmeniz gerekmiyor.
Böyle durumlarda bilgisayarınızda bulunan dosyaları düzenlersiniz.
44
45
Yerel Bir Site Tanımlamak

İleri düğmesine tıklayarak bir sonraki bölüme geçin.

Uzak sunucunuza nasıl bağlanacağınızı soran

“Uzak sunucunuza nasıl bağlanıyorsunuz?”

sorusunun altındaki “Yok” seçeneğini işaretleyin.

Şu anda yerel bir site üzerinde çalışıyorsunuz ve bir uzak sunucuya
erişmeniz gerekmiyor.
46
47
Yerel Bir Site Tanımlamak

İleri düğmesine tıklayarak bir sonraki bölüme geçin.

Yeni tanımladığınız site bilgilerini gözden geçirin.

İletişim kutusunun alt kısmındaki Bitti düğmesine tıklayın.
48
49
Yerel Bir Site Tanımlamak

Dosyalar panelinde kendi dosyalarınızı görebilirsiniz.
50
51
Yeni Bir Sayfa Oluşturmak
ve Kayıt Etmek


Yerel sitenizi tanımladıktan sonra Web sayfalarınızı oluşturmaya ve
bunlarla çalışmaya hazırsınız demektir.
Yeni bir sayfa oluşturduğunuzda ilk yapmanız gereken şey belgenizi
kaydetmek olmalıdır.

Yeni dosya oluşturmak için aşağıdakileri yapın:

Dosya - > Yeni komutunu seçin.

Yeni Belge iletişim kutusu açılacaktır.
52
53
Yeni Bir Sayfa Oluşturmak
ve Kayıt Etmek

Açılan pencereden HTML seçeneğini seçin.

Oluştur butonuna tıklayarak HTML dokümanı oluşturun.
54
55
Yeni Bir Sayfa Oluşturmak
ve Kayıt Etmek




Dosya > Kaydet seçeneğini seçerek oluşturduğunuz dokümanı kayıt
edin.
Sayfanızı kaydetmek için sayfanın üzerine metin ya da resim
yerleştirmeyi beklemeyin.
Yeni belgeleri açar açmaz sayfalarınızı kaydedin.
Dosyanızı zamanında kaydettiyseniz, resim ya da başka medya
elemanları aktardığınızda bu elemanların sitenizdeki konumlarını
gösteren bütün yollar düzgün olarak oluşturulacaktır.
56
57
Yeni Bir Sayfa Oluşturmak
ve Kayıt Etmek



Eğer belgenizi kaydetmezseniz, eklediğiniz elemanın konumunu sabit
diskinize göre tanımlayan ve file:// şeklinde başlayan bir yol
kullanılacaktır.
Belgeyi kaydetmeden bir nesne eklemeye kalktığınızda Dreamweaver
bu eleman için file:// şeklinde bir yol kullanması gerektiğini belirterek
sizi uyaracaktır.
Bu “file://” yolları uzak sunucularda çalışmaz, çünkü dosyaların
bilgisayarınıza özgü konumlarını tanımlarlar.
58
Dosya Adlandırma Standartları




Bir Web sunucusunda kullanılacak dosyaları adlandırma işleminin,
sabit diskinizdeki dosyaları adlandırmaya göre biraz farklı olduğunu
unutmayın.
Sunucuda hangi işletim sisteminin kullanıldığını bilmeniz işinizi
kolaylaştıracaktır.
Bunun için en çok kullanılan sistemler Unix, Linux, Windows NT ve
Mac OS’tur.
Windows’taki adlandırma yapısı, diğer UNIX tabanlı işletim
sistemlerinden farklıdır.
59
Dosya Adlandırma Standartları

Örneğin Unix BÜYÜK/küçük harflere duyarlıdır.

Yani dosyam.html ile DOSYAM.HTML aynı değildir.



Dosyalarınızın isimlerini sadece küçük harflerle yazarak dosya
adlandırma işlemini basitleştirmiş ve tutarlılık sağlamış olursunuz.
Dosyalarınızı adlandırırken sadece alfabedeki harfleri (A-Z) ve
rakamları (0-9) kullanmalısınız.
Aşağıda hem dosya, hem de klasörlerin isimlerinde uymak gereken
diğer önemli adlandırma standartları verilmiştir.
60
Dosya Adlandırma Standartları

Boşluklar:

Dosya isimlerinde asla boşluk kullanmayın.


Sözcükleri ayırmanız gerekiyorsa, boşluğun işlevini görmesi için alt
çizgi veya tire karakterini kullanın.
Boşluk karakteri kullandığınızda sorun çıkabilir, çünkü tarayıcılar
boşluk karakterlerini %20 karakterleriyle değiştirirler.
61
Dosya Adlandırma Standartları

Özel karakterler:

?, %, *, > ya da / gibi özel karakterleri kullanmayın.

Virgül kullanmayın.
62
Dosya Adlandırma Standartları

Sayılar:

Dosya isimlerinin en başında sayı kullanmaktan kaçının.
63
Dosya Adlandırma Standartları

Uzunluk:

Klasör ve dosya isimlerinin olabildiğince kısa olmasına gayret edin.

Klasör isminin sayfaya erişmek için yazdığınız URL’in bir parçası
haline geldiğini unutmayın.
64
Araçlar ve Arayüz




Web sayfası oluşturma işinde daha fazla ilerlemeden önce
Dreamweaver CS4 arabiriminde yer alan ve verimli bir şekilde Web
siteleri oluşturmanızı sağlayan çeşitli araçları ve panelleri tanımanız
gerekir.
Tasarım ve kod yazma çalışmalarınızın büyük bir kısmı belge
penceresi içinde gerçekleşecektir.
Bu alan sayfanın gövde kısmı olarak bilinir.
Burada bir Web sayfasını oluşturan çeşitli elemanları ekleme,
düzenleme ve silme işlemlerini yapabilirsiniz.
65
Araçlar ve Arayüz



Siz çalışmaya devam ederken belge penceresi sayfanızın bir Web
sayfasında nasıl görüneceği hakkında yaklaşık olarak size bir fikir
verir.
Burada yaklaşık olarak bir fikir edinirsiniz.
Çünkü tarayıcıların Web sayfalarını yorumlama şekilleri arasında bazı
farklar vardır.
66
67
Araçlar ve Arayüz





Dosya ismi başlık çubuğunda belirecektir.
Windows’ta dosya adı, belge penceresinin üst kısmında bir sekmede
gösterilir.
Varsayılan durumda bu sayfa başlangıçta Belge araç çubuğundaki
Başlık metin alanında gösterildiği gibi Başlıksız-1 olarak adlandırılır.
Görünüm > Araç Çubukları
komutu kullanılarak görünür ya da gizli hale getirilebilen Belge araç
çubuğunda çeşitli işlemlere kolayca erişebilmenizi sağlayan bazı
düğmeler ve menüler bulunur.
68
Araçlar ve Arayüz



Varsayılan durumda araç çubuğu belge penceresinin bir parçasıdır.
Windows kullanıcıları belge penceresinden ayırmak için araç
çubuğunun sol kenarındaki taşıma noktasına (tutamaç) çift tıklayabilir
veya bunu sürükleyebilirler.
Böylece o da ayrı bir panel halinde gelir.
69
Araçlar ve Arayüz

Dreamweaver’da üç tane görünüm modu mevcuttur:

Tasarım,

Kod

Böl
70
71
Araçlar ve Arayüz





Böl modunda hem Tasarım görünümü, hem de Kod görünümü yer
alır.
Bu modlara ait düğmeler Belge araç çubuğunun sol tarafında yer
almaktadır.
İmleci bu düğmelerin üzerine getirip bir süre tutarak görünüm
modlarının isimlerini görebilirsiniz.
Burada Tasarım görünüm modunu kullanmanız gerekiyor.
Etkin düğme vurgulu hale gelerek Dreamweaver’ın sayfayı o görünüm
modunda görüntülediğini gösterir.
72
Araçlar ve Arayüz

Belge penceresinin sol alt köşesinde Etiket Seçici düğmesi bulunur.

Etiket Seçici daima <body> etiketinden başlar.



Hiyerarşik olarak, o anda seçili durumdaki elemana uygulanan HTML
etiketlerini görüntüler.
Etiket Seçici, bu elemanlara karşılık gelen HTML etiketlerinin
aracılığıyla kod hiyerarşisinde hızlı bir şekilde hareket eder.
Böylece hangi elemanlarla çalıştığınızı görmenizi ve diğer elemanları
kolayca seçmenizi sağlar.
73
74
Araçlar ve Arayüz









Ekle araç çubuğu; resimler, tablolar, özel karakterler, formlar ve
HTML gibi sayfanıza ekleyebileceğiniz pek çok nesne ya da elemanı
içerir.
Bunlar tiplerine göre yedi gruba ayrılmıştır:
Ortak
Mizanpaj
Formlar
Data
Spry
Metin
Sık Kullanılanlar
75
Araçlar ve Arayüz

Etkin grubun ismi menüde görüntülenir.

Varsayılan durumda Ortak grubu etkindir.

Menüyü kullanarak farklı bir nesne grubuna geçebilirsiniz.


Bu gruplardaki farklı nesnelerin çoğunun ilâve araçlar, seçenekler ve
ilişkili diğer nesnelerle birlikte kendi özel menüsü vardır.
Bunlara küçük siyah bir okla erişilir.
76
77
Araçlar ve Arayüz


Sayfanızın altında,
Kullandığınız nesneler ve metinlerle ilgili özellikleri değiştirebileceğiniz
Özellikler panelini görebilirsiniz.
78
79
Paneller


Dreamweaver’daki panellerin büyük bir kısmı kenetlenmiş bir
haldedir.
İşlevlerine göre sekmeli pencereler şeklinde panel gruplarında yer
alır.

Varsayılan panel grupları;

CSS

Uygulama

Etiket Denetimi

Dosyalar
80
Paneller


Dreamweaver’daki panellerin büyük bir kısmı kenetlenmiş bir
haldedir.
İşlevlerine göre sekmeli pencereler şeklinde panel gruplarında yer
alır.

Varsayılan panel grupları;

CSS

Uygulama

Etiket Denetimi

Dosyalar
81
82
Sayfaya Başlık Atamak

Oluşturduğunuz her HTML belgesinin bir başlığı olmalıdır.

Bu başlık öncelikle belgenin tanınması için kullanılır.

Web tarayıcısının başlık çubuğunda görüntülenir, sayfanın içeriğini
gösterir ve Sık Kullanılanlar (Favorites) listelerinde isim olarak
görünür.

Başlık bölümünde Başlıksız Belge olarak görünür.

Bu başlığı sayfanızı uygun bir başlıkla değiştirin.

Bu değişikliği yaptıktan sonra dosyayı kaydedin.
83
84
Web Editörü
Dreamweaver CS4
İçerik Eklemek
Öğr.Gör. Serkan KORKMAZ
Harran Üniversitesi Birecik Meslek Yüksekokulu
1
ADOBE DREAMWEAVER CS4
BÖLÜM
2
İçerik
Eklemek
Metin Eklemek
Satır Arası Eklemek
Bölünmez Boşluk Eklemek
Metni Hizalamak ve Madde İmleri
Özel Karakterler Eklemek
Sayfayı Önizleme ile Tarayıcıda Görüntülemek
GİRİŞ
Dreamweaver CS4
İçeriğin hiyerarşisini ve yapısını geliştirmek, bir Web sitesi
oluşturma sürecinde bir sonraki adımdır.
Yapıyı oluşturarak ve çatıyı kurarak sitenin temel bileşeni olan
içeriği hazırlamış olursunuz.
4
Metin Eklemek





Sayfaya metin eklemek için birkaç farklı yöntem
bulunmaktadır.
Metni oluşturduğunuz boş sayfa içine yazmak.
Başka bir metin düzenliyicisinden kopyalayarak
yapıştırmak.
TXT gibi düz metinleri Dreamweaver içinde açmak
Herhangi bir metni Dreamweaver sayfasına
eklediğinizde ya da yazdığınızda Özellikler denetçisi ile
özelliklerini değiştirebilirsiniz.
5
Metin Eklemek

Metin için özellikler denetçisi iki bölümü ayrılmıştır:

HTML ve CSS
7
Metin Eklemek



HTML alanında metnin HTML özelliklerini düzenleyebilirsiniz.
Metninizin görsel özelliklerini düzenlemek için CSS seçeneğini
seçmelisiniz.
Dreamweaver CS4 sürümünden itibaren tüm metin düzenlemeleri
için CSS tekniğini kullanmaktadır.
8
Satır Arası Eklemek


Yazılarınızı yazarken bir alt satıra inmek istediğinizde
CTRL + Enter kısayolunu kullanarak bir line break
ekleyebilirsiniz.
Sadece Enter tuşuna basarak yeni bir paragraf
oluşturabilirsiniz.
9
10
Bölünmez Boşluk Eklemek

HTML dokümanlarında artarda bir tane boşluk
verilebilir.

Artarda birden fazla boşluk vermek için

CTRL + SHIFT + BOŞLUK tuşuna basmalısınız.


Eğer bu kısayol yerine her seferinde boşluk tuşuna
bastığınızda birden fazla boşluk vermek isterseniz
Düzen > Tercihler seçeneğini seçin.
Genel sekmesinde “Birden çok ardışık boşluğa izin ver”
seçeneğini seçin ve Tamam butonuna basarak
pencereyi kapatın.
11
12
Metni Hizalamak ve Madde İmleri

Paragrafları hizalamak metin hizalama butonlarını
Özellikler denetçisinde CSS sekmesi altında
kullanabilirsiniz.
13
Metni Hizalamak ve Madde İmleri

Metinlerinizden madde imi oluşturmak için yine
Özellikler paneli HTML sekmesinde bulunan madde imi
butonlarını kullanabilirsiniz.
14
Metni Hizalamak ve Madde İmleri




HTML dokümanlarında her bir paragraf bir madde imi
olarak kabul edilmektedir.
Eğer madde imi içinde bir alt satıra inmek isterseniz
CTRL + ENTER tuşlarına basmalısınız.
Oluşturduğunuz madde imlerinin (numaralı ya da
numarasız) görünümü değiştirmek için listenin
içindeyken
Format -> Liste -> Özellikler seçeneğini seçin.
15
16
17
Özel Karakterler Eklemek

Özel karakterler eklemek için Ekle panelinde Metin
seçeneğini seçin.
18
19
Özel Karakterler Eklemek

En alttaki açılır menüden dilediğiniz özel karakterleri
sayfanıza ekleyebilirsiniz.
20
21
Sayfayı Önizleme ile Tarayıcıda
Görüntülemek





Dreamweaver içinde çalışırken oluşturduğunuz sayfaları
tarayıcıda önizleyerek içindeki hataları görmek ya da yapmış
olduğunuz sayfanın neye benzediğine bakmak isteyebilirsiniz.
Bu durumda yapmanız gereken klavyenizden F12 tuşuna
basarak yapmış olduğunuz sayfanın tarayıcıda açılmasını
sağlamak olacaktır.
F12 tuşuna bastığınızda sayfa varsayılan tarayıcıda açılacaktır.
Eğer varsayılan tarayıcıyı değiştirmek yada alternatif bir
tarayıcıyı önizleme seçeneklerine eklemek istiyorsanız
Dreamweaver menüsünden Dosya > Tarayıcıda Önizleme >
Tarayıcı Listesini Düzenle... seçmelisiniz.
22
23
Sayfayı Önizleme ile Tarayıcıda
Görüntülemek

Açılan iletişim kutusundan istediğiniz ikincil tarayıcıyı
ekleyebilir yada var olan birincil tarayıcı ile ilgili
değişiklikler yapabilirsiniz.
24
25
ADOBE DREAMWEAVER CS4
Kullanıcı El Kitabı
ADOBE
DREAMWEAVER CS4
Kullanıcı El Kitabı
İÇİNDEKİLER
Dreamweaver Temelleri
İçerik Eklemek
Stil Sayfaları Oluşturmak
Bağlarla Çalışmak
Resimlerle Çalışmak
Tablolarla Çalışmak
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı
Etkileşimi ve Ajax Bileşenleri
Formlarla Çalışmak
Şablonlar
Siteyi Yönetmek
1
19
27
43
51
65
81
95
109
113
BÖLÜM
1
Dreamweaver
Temelleri
Dreamweaver Temelleri
Başlangıç Sayfası
Siteyi Geliştirmek Üzere Hazırlık Yapmak
Yerel Bir Site Tanımlamak
Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek
Dosya Adlandırma Standartları
Araçlar ve Arayüz
Paneller
Sayfaya Başlık Atamak
Bölüm 1
Dreamweaver Temelleri
Dreamweaver Temelleri
Dreamweaver CS4, Web sitelerinin oluşturulmasını, yönetilmesini, bakımının ve devamlılığını
sağlanmasını mümkün kılmak için güçlü görsel tasarım araçlarıyla metin tabanlı HTML düzenleme
özelliklerini bir araya getirmiştir. Yazılım, acemi kullanıcıların Web sayfaları oluşturmak için
gereken araçlara kolayca ulaşmasını sağlarken, elle kod yazmaya alışkın deneyimli kullanıcılara da
gerektiğinde doğrudan kodla çalışma imkânı sağlar. Bu esnek program, gelişmiş teknikleri erişilebilir
ve kolay kullanılır hale getirir. Güçlü tasarım, kod ve etkileşim özelliklerinin bir arada sunulması
hem acemiler, hem de deneyimli kullanıcılar için sayısız fayda sağlar.
Adobe Dreamweaver CS4, pek çok Web geliştiricisinin tercih ettiği bir araçtır. Bir yandan kolayca
erişilebilir ve standartlara uygun siteler hazırlama ihtiyaçlarına karşılık verirken, diğer yandan da
mevcut ve gelişmekte olan pek çok teknolojik çözümle çalışma imkânı sağlayan bir ortamda hem
görsel tasarım, hem de kod düzenleme araçları sunar. Dreamweaver, üretim sürecini hızlandırır
ve site yönetimi ve sitenin devamlılığını sağlamak için gereken araçları sunar. Web geliştirme
yazılımları sektöründe lider olan Dreamweaver, Web siteleri oluşturma ve bunların devamlılığını
sağlama, ayrıca sürekli değişen standartlar, yeni teknolojiler ve kullanıcı ihtiyaçlarını karşılama
konularındaki zorlukları aşmanıza yardımcı olmak için ihtiyaç duyduğunuz araçları sağlar
Başlangıç Sayfası
Dreamweaver CS4’ü açtıktan sonra bir başlangıç sayfası göreceksiniz. Bu sayfada şu araçlar
bulunmaktadır:
En son açılan belgelere ait hızlı bağlantılar
Farklı dosya tiplerinde yeni belgeler oluşturmak için kullanabileceğiniz seçenekler
1
2
Bölüm 1
Dreamweaver Temelleri
Dreamweaver ile ilgili sihirbaz ve bilgiler
Kaynaklar
Dreamweaver Exchange Bağlantısı
Yeni bir sayfa oluşturma işlemine başladığınızda veya Başlangıç Sayfası’ndaki diğer seçenekleri
seçtiğinizde Başlangıç Sayfası kendiliğinden kapanır.
Siteyi Geliştirmek Üzere Hazırlık Yapmak
Bir Web sitesi oluşturmak için gereken ayrıntılı araştırma ve planlama aşamalarına zaman ayırmak
çok önemlidir. Geliştirme için bir strateji oluşturmak daha verimli olmanıza, fikirlerinizi daha iyi ve
daha ayrıntılı bir şekilde geliştirmenize ve projenizin kapsamını daha iyi anlamanıza yardım edecek,
ayrıca zamanı ve kaynakları daha verimli kullanmanızı sağlayacaktır. İyi bir Web sitesi sezgisel
olmalı ve kullanıcılara olumlu ve benzersiz bir deneyim sunmalıdır. Etkin bir Web sitesi hazırlarken
işe ilgili siteyi oluşturma nedenini tanımlama ve özetleme, rekabet analizi, akış grafiği ya da taslak
hazırlama, site özelliklerinin nasıl çalışacağını yazılı olarak tanımlama ve sitenin görüntüsünü
ve insanlarda oluşturacağı hissi tasarlama gibi işlemlerle başlarsınız. Bu süreç çeşitli şekillerde
bölümlere ayrılabilir. Bir Web sitesi hazırlamanın temel bileşenleri bu kitapta beş geliştirme
aşamasında gerçekleştirilen adımlar olarak anlatılmıştır. Gerçekten etkin bir site (ister kendi sitenizi
hazırlarken, ister bir müşteri için ya da bir ekiple birlikte çalışırken) hazırlamak için bu bileşenlerin
hepsini kullanmak gerekir.
Bölüm 1
Dreamweaver Temelleri
1. Aşama: Araştırma
Herhangi bir sayfa üzerinde çalışmaya başlamadan önce kendinize ya da müşterinize sitenizin hangi
amaçlara hizmet edeceği ve ne gibi içerikler barındırması gerektirdiği ile ilgili soruları sorun.
2. Aşama: Planlama ve Yapılandırma
Web sitenizle ziyaretçileriniz arasındaki bağlantı, kısmen sitenizin yapısına bağlıdır. Açıklık ve
kullanım kolaylığı iyi bir Web sitesi için hayati özelliklerdir. Geliştirme sürecinin bu önemli aşaması,
bu kitapta göreceğiniz ilk konudur.
Web sitelerinin temelini site yapısı oluşturur. İyi yapılandırılmamış bir Web sitesinde dolaşmak
ve böyle bir siteyi kullanmak kafa karıştırıcı ve zor olabilir, ayrıca böyle bir sitenin devamlılığını
sağlamak da pek kolay olmayabilir. Anlaşılır, iletişim sorunu olmayan ve ziyaretçilerinin kolayca
kullanabileceği bir site oluşturmak için, herhangi bir HTML belgesi oluşturmadan önce sitenin
yapısının nasıl olacağını ve sitede kullanılacak dosya ve klasörlerin hiyerarşisini eksiksiz olarak
planlamanız gerekir.
3. Aşama: Geliştirme—Sitenin Tasarlanması
Bir Web sitesi tasarlarken çalışmaya, genel tasarımı gösteren küçük resimler oluşturarak
başlayabilirsiniz (bu, fikirlerinizi kâğıt üzerinde görmek için kullanabileceğiniz hızlı bir beyin
fırtınası yöntemidir). Bu süreç boyunca, 1. Aşama’da sorulan soruların cevaplarını ve yaptığınız
araştırmanın sonuçlarını göz önünde bulundurmaya devam etmeniz gerekir. Tasarımınızı
geliştirirken uygulamanız gereken ikinci adım, başlangıçtaki fikirlerinizin en iyilerini ayıklayarak
çok daha ayrıntılı taslaklar oluşturmaktır. Son olarak, seçilen tasarıma göre oluşturulan sayfaların
nasıl görüneceğini gösteren eksiksiz örnek(ler) oluşturulabilir. Bu tasarım sürecinde işin sahibi ile
sürekli olarak görüşmeniz gerekir.
Ayrıca, düşüncelerinizin teknik olarak Web sitesinde de aynen gerçekleştirileceğinden emin olmak
için yapacağınız görsel tasarım bileşenlerini test etme işleminin de bu aşamada gerçekleştirilmesi
gerekir. Etkin bir Web tasarımının temelini, sitenin tümüyle işlevsel teknik özelliklerine
aktarılabilen görsel kavramlar oluşturur. Bir Web sitesinde gerçekleştirebileceğiniz şeylerle ilgili
bilginiz ne kadar fazlaysa, sitede kullanacağınız öğelerin etkin bir şekilde tasarımı için o kadar
donanımlısınız demektir. Bu kitapta, oluştururken Dreamweaver’dan yardım alabileceğiniz birçok
teknik Web özelliğini öğreneceksiniz.
Sitenin görüntüsü ve insanlarda oluşturduğu his, görünüm ve sitede kullanılacak stiller ve renklerle
ilgili özel ayrıntıları içeren stil kılavuzu da genellikle bu aşamada oluşturulur.
Bir Web sitesi oluşturulurken, geliştirme aşamalarının büyük ölçüde iç içe geçtiği pek çok durumla
(aşamaların her birinde sık sık tekrarlanan çalışmalar) karşılaşılır.
3
4
Bölüm 1
Dreamweaver Temelleri
4. Aşama: Test
Web sitesini tasarlama işlemini bitirdikten sonra, ziyaretçilerin kullanımına sunmadan önce onu
test etmek de çok önemlidir. En basit Web sitelerinin bile mantıklı bir şekilde test edilmesi gerekir.
Örneğin Web sitenizi, popüler Web tarayıcılarının hepsiyle test etmeniz gerekmektedir. Her ne
kadar Windows’ta kullanılan Microsoft Internet Explorer günümüzde en çok kullanılan tarayıcı olsa
da, Mozilla Firefox, Opera ve Safari’nin pazardaki payları da azımsanmayacak ölçüdedir. Internet
Explorer gibi bir tarayıcının bile, bırakın Windows ve Macintosh sürümleri arasındaki farkları,
5, 5.5 ve 6 sürümleri arasında ciddi farklar vardır. Farklı tarayıcıların sayfalarınızı görüntüleme
şekillerindeki farklar dışında, her sayfayı ve her bağlantıyı da test ettiğinizden emin olmalısınız.
5. Aşama: Devamlılığın Sağlanması
Birçok Web sitesi geliştiricisi, bir Web sitesi geliştirmenin asla sona ermeyen bir işlem olduğunu
düşünür. Yeni sayfalar eklemek, bağlantıları güncellemek, içerikte değişiklik yapmak ve resimleri
değiştirmek, bir Web sitesinin devamlılığını sağlamak için uygulanan standart işlemlerdir.
Dreamweaver CS4, kütüphane öğeleri, şablonlar ve diğer araçlar yardımıyla Web sitelerinin
devamlılığını sağlama işlemini kolaylaştırmak için birçok özellik sunar.
Site Klasör Yapısı Nasıl Olmalıdır?
Siteniz içinde dosyalarınız ile çalışırken düzenli bir çalışma ortamı için, site klasörünüz içinde
aşağıdaki klasörleri oluşturmalısınız.
images: Bu klasör sizin sitenizin içinde resimlerinizi barındıracağınız klasördür.
css: Css klasörü sitenizin içinde stil dosyalarınızı saklayacağınız klasördür.
varliklar: Sitenizin içinde ham dosyalarınızı saklayacağınız (ileride kolay bulmanız için)
klasördür. Bu klasörün içine fla, psd gibi sitenizi içinde direk olarak kullanılmayan, fakat
çıktılarının kullanıldığı ham dosyaları yerleştirebilirsiniz. Klasörlerinizi adlandırırken Türkçe
karakter kullanmamaya özen göstermelisiniz. Varliklar klasör ismi bu nedenle varlıklar şeklinde
kullanılmamıştır.
Benim Sitem
images
css
varliklar
Bölüm 1
Dreamweaver Temelleri
Yerel Bir Site Tanımlamak
Herhangi bir sayfa oluşturmaya başlamadan önce bir Web sitesi hazırlamanın ilk adımı,
bilgisayarınızda sitenin içinde yer alacak her şeyi içerecek olan klasörün oluşturulmasıdır. Bu işlem
yerel bir site tanımlamak olarak adlandırılır. Hedef klasör, yerel kök klasörü (local root folder)
olarak bilinir ve sabit diskinizde yer alacak olan yerel sitenin sınırlarını belirler ve uzak sitenin
adeta bir temsili gibidir. Uzak site, ziyaretçilerinizin erişeceği Web sunucusunda bulunacak olan
asıl sitedir. Yerel bir site tanımlamak size yerel ve uzak sürümler arasında aynı klasör hiyerarşisini
koruma imkânı sağlar. Bu da işlevsel bir site yaratmak ve bunun sürekliliğini sağlamak için çok
önemlidir.
İçinde sitenin dosyaları ve klasörlerinin yapısıyla ilgili ayarlar bulunan yerel kök klasörüyle birlikte
bir yerel site oluşturduğunuzda, siteye ait dosyaların yerel kök klasörünün dışında bir yerde
saklanması önlenmiş olur. Sabit diskinizde yer alan ama yerel kök klasörünüzün dışında bulunan
dosyalar uzak sunucuya aktarılamaz. Bu kısıtlama, siz sitenizi geliştirirken site çevrimiçi olarak
erişilebilir hale getirildiğinde kullanılamaz durumda olan dosyalara erişmenizi engeller. Sitedeki
farklı bir konuma taşınmış olan bir dosyaya ait bütün referansların güncellenmesi gibi pek çok
Dreamweaver özelliği gerçek anlamda çalışabilmek için yerel bir site tanımına ihtiyaç duyar.
Elemanları daima yerel siteler içinde oluşturma ve yine aynı yerde çalışma alışkanlığını edinmeniz
gerekir. Bu alışkanlığı kazanmazsanız bağlantılar, yollar ve dosya yönetimi konularında sorun
yaşayabilirsiniz.
Bilgisayarınızda siteniz için bir klasör oluşturun. Bu klasör için en uygun yer sürücünüzün kökünde
bir klasör oluşturmaktır (Ör: C:\WebSitem)
Yerel kök klasörünün adı, ilgili sitenin adı ya da sizin seçtiğiniz başka bir ad olabilir. Birden fazla site
hazırlıyorsanız, siteleri birbirinden kolayca ayırmanızı sağlayacak açıklayıcı isimler seçmeniz işinizi
kolaylaştıracaktır. Yerel kök klasörünün adı sadece dosya yönetimi açısından önemlidir ve sitenin
ziyaretçileri tarafından görünmeyecektir.
Dreamweaver içinde site oluşturmak için aşağıdakileri yapın:
5
6
Bölüm 1
Dreamweaver Temelleri
1
Dreamweaver başlangıç sayfasından Dreamweaver Sitesi… menü nesnesini seçin
veya Site > Yeni Site menü nesnesini seçin.
Bölüm 1
Dreamweaver Temelleri
2
Temel ve Gelişmiş adındaki iki sekmesiyle birlikte Site Tanımı iletişim kutusu açılacaktır. Bu
sekmeleri kullanarak bir site tanımlama işlemini nasıl gerçekleştirmek istediğinizi seçebilirsiniz.
3
Temel, iletişim kutusunu açtığınızda varsayılan olarak görünen moddur ve işlem boyunca size
adım adım yardımcı olur. Gelişmiş modu, yapılandırmada kullanabileceğiniz bir dizi ilave
seçenek ve ayar sunar. Temel modundaki açıklayıcı metinler burada görüntülenmez.
7
8
Bölüm 1
Dreamweaver Temelleri
4
Bu uygulamada henüz seçili durumda değilse Temel sekmesine tıklayın. Dreamweaver,
Site Tanımı iletişim kutusunun Temel sekmesinde “Sitenizi nasıl adlandırmak istersiniz?”
ifadesiyle sitenizin adının ne olacağını soracaktır. Site adı kutusuna Dreamweaver yazın ve İleri
düğmesine tıklayın. Anlaşılır ve mantıklı isimler her bir siteyi diğerlerinden kolayca ayırmanızı
sağlar ve birden fazla siteyle çalışırken bunların yönetimini kolaylaştırır. Yerel kök klasöründe
olduğu gibi site ismi sadece sizin Dreamweaver’ın tanımlanmış siteler listesinde referans olarak
kullanacağınız bir araçtır ve sitenizin kullanıcıları tarafından görülmez.
5
Dreamweaver, “ColdFusion, ASP.NET, ASP, JSP, yada PHP gibi bir sunucu teknolojisi ile
çalışmak ister misiniz?” ifadesiyle ColdFusion, ASP.NET, ASP, JSP ya da PHP gibi bir sunucu
teknolojisiyle çalışıp çalışmayacağınızı soracaktır. “Hayır, sunucu teknolojisi kullanmak
istemiyorum” seçeneğine ait radyo düğmesine tıklayarak bir sunucu teknolojisi kullanmak
istemediğinizi belirtin. İleri düğmesine tıklayarak bir sonraki bölüme geçin.
6
“Makinemdeki yerel kopyaları düzenle sonra hazır olduğunda sunucuya yükle (önerilen)”
seçeneğine tıklayın. Şu anda makinenizdeki dosyalarla çalışacaksınız ve bir uzak sunucuya
erişmeniz gerekmiyor. Böyle durumlarda bilgisayarınızda bulunan dosyaları düzenlersiniz.
Bölüm 1
Dreamweaver Temelleri
7
İleri düğmesine tıklayarak bir sonraki bölüme geçin. Uzak sunucunuza nasıl
bağlanacağınızı soran “Uzak sunucunuza nasıl bağlanıyorsunuz?” sorusunun altındaki “Yok”
seçeneğini işaretleyin. Şu anda yerel bir site üzerinde çalışıyorsunuz ve bir uzak sunucuya
erişmeniz gerekmiyor.
9
10
Bölüm 1
Dreamweaver Temelleri
8
İleri düğmesine tıklayarak bir sonraki bölüme geçin. Yeni tanımladığınız site bilgilerini gözden
geçirin ve iletişim kutusunun alt kısmındaki Bitti düğmesine tıklayın.
Dosyalar panelinde kendi dosyalarınızı görebilirsiniz
Bölüm 1
Dreamweaver Temelleri
Yeni Bir Sayfa Oluşturmak ve Kayıt Etmek
Yerel sitenizi tanımladıktan sonra Web sayfalarınızı oluşturmaya ve bunlarla çalışmaya hazırsınız
demektir. Yeni bir sayfa oluşturduğunuzda ilk yapmanız gereken şey belgenizi kaydetmek olmalıdır.
Yeni dosya oluşturmak için aşağıdakileri yapın:
1
Dosya > Yeni komutunu seçin. Yeni Belge iletişim kutusu açılacaktır.
2
Açılan pencereden HTML seçeneğini seçin ve Oluştur butonuna tıklayarak HTML dokümanı
oluşturun.
11
12
Bölüm 1
Dreamweaver Temelleri
3
Dosya > Kaydet seçeneğini seçerek oluşturduğunuz dokümanı kayıt edin.
Sayfanızı kaydetmek için sayfanın üzerine metin ya da resim yerleştirmeyi beklemeyin. Yeni
belgeleri açar açmaz sayfalarınızı kaydedin. Dosyanızı zamanında kaydettiyseniz, resim ya da
başka medya elemanları aktardığınızda bu elemanların sitenizdeki konumlarını gösteren bütün
yollar düzgün olarak oluşturulacaktır.
Eğer belgenizi kaydetmezseniz, eklediğiniz elemanın konumunu sabit diskinize göre tanımlayan
ve file:// şeklinde başlayan bir yol kullanılacaktır. Belgeyi kaydetmeden bir nesne eklemeye
kalktığınızda Dreamweaver bu eleman için file:// şeklinde bir yol kullanması gerektiğini belirterek
sizi uyaracaktır. Bu “file://” yolları uzak sunucularda çalışmaz, çünkü dosyaların bilgisayarınıza özgü
konumlarını tanımlarlar.
Dosya Adlandırma Standartları
Bir Web sunucusunda kullanılacak dosyaları adlandırma işleminin, sabit diskinizdeki dosyaları
adlandırmaya göre biraz farklı olduğunu unutmayın. Sunucuda hangi işletim sisteminin
kullanıldığını bilmeniz işinizi kolaylaştıracaktır. Bunun için en çok kullanılan sistemler Unix,
Linux, Windows NT ve Mac OS’tur. Windows’taki adlandırma yapısı, diğer *NIX tabanlı işletim
sistemlerinden farklıdır. Örneğin Unix BÜYÜK/küçük harflere duyarlıdır. Yani dosyam.html ile
DOSYAM.HTML aynı değildir. Dosyalarınızın isimlerini sadece küçük harflerle yazarak dosya
adlandırma işlemini basitleştirmiş ve tutarlılık sağlamış olursunuz. Dosyalarınızı adlandırırken
sadece alfabedeki harfleri (A-Z) ve rakamları (0-9) kullanmalısınız. Aşağıda hem dosya, hem de
klasörlerin isimlerinde uymak gereken diğer önemli adlandırma standartları verilmiştir.
Bölüm 1
Dreamweaver Temelleri
▶
Boşluklar: Dosya isimlerinde asla boşluk kullanmayın. Sözcükleri ayırmanız gerekiyorsa,
boşluğun işlevini görmesi için alt çizgi veya tire karakterini kullanın. Boşluk karakteri
kullandığınızda sorun çıkabilir, çünkü tarayıcılar boşluk karakterlerini %20 karakterleriyle
değiştirirler.
▶
Özel karakterler: ?, %, *, > ya da / gibi özel karakterleri kullanmayın. Virgül kullanmayın.
▶
Sayılar: Dosya isimlerinin en başında sayı kullanmaktan kaçının.
▶
Uzunluk: Klasör ve dosya isimlerinin olabildiğince kısa olmasına gayret edin. Klasör isminin
sayfaya erişmek için yazdığınız URL’in bir parçası haline geldiğini unutmayın.
Araçlar ve Arayüz
Web sayfası oluşturma işinde daha fazla ilerlemeden önce Dreamweaver CS4 arabiriminde yer
alan ve verimli bir şekilde Web siteleri oluşturmanızı sağlayan çeşitli araçları ve panelleri tanımanız
gerekir.
Tasarım ve kod yazma çalışmalarınızın büyük bir kısmı belge penceresi içinde gerçekleşecektir. Bu
alan sayfanın gövde kısmı olarak bilinir ve burada bir Web sayfasını oluşturan çeşitli elemanları
ekleme, düzenleme ve silme işlemlerini yapabilirsiniz.
Siz çalışmaya devam ederken belge penceresi sayfanızın bir Web sayfasında nasıl görüneceği
hakkında yaklaşık olarak size bir fikir verir. Burada yaklaşık olarak bir fikir edinirsiniz, çünkü
tarayıcıların Web sayfalarını yorumlama şekilleri arasında bazı farklar vardır.
13
14
Bölüm 1
Dreamweaver Temelleri
Dosya ismi başlık çubuğunda belirecektir (Windows’ta dosya adı, belge penceresinin üst kısmında
bir sekmede gösterilir). Varsayılan durumda bu sayfa başlangıçta Belge araç çubuğundaki Başlık
metin alanında gösterildiği gibi Başlıksız-1 olarak adlandırılır.
Görünüm > Araç Çubukları komutu kullanılarak görünür ya da gizli hale getirilebilen Belge araç
çubuğunda çeşitli işlemlere kolayca erişebilmenizi sağlayan bazı düğmeler ve menüler bulunur.
Varsayılan durumda araç çubuğu belge penceresinin bir parçasıdır. Windows kullanıcıları belge
penceresinden ayırmak için araç çubuğunun sol kenarındaki taşıma noktasına (tutamaç) çift
tıklayabilir veya bunu sürükleyebilirler. Böylece o da ayrı bir panel halinde gelir.
Dreamweaver’da üç tane görünüm modu mevcuttur: Tasarım, Kod ve Böl.
Böl modunda hem Tasarım görünümü, hem de Kod görünümü yer alır. Bu modlara ait düğmeler
Belge araç çubuğunun sol tarafında yer almaktadır. İmleci bu düğmelerin üzerine getirip bir
süre tutarak görünüm modlarının isimlerini görebilirsiniz. Burada Tasarım görünüm modunu
kullanmanız gerekiyor. Etkin düğme vurgulu hale gelerek Dreamweaver’ın sayfayı o görünüm
modunda görüntülediğini gösterir.
Belge penceresinin sol alt köşesinde Etiket Seçici düğmesi bulunur. Etiket Seçici daima <body>
etiketinden başlar ve hiyerarşik olarak, o anda seçili durumdaki elemana uygulanan HTML
etiketlerini görüntüler. Etiket Seçici, bu elemanlara karşılık gelen HTML etiketlerinin aracılığıyla
kod hiyerarşisinde hızlı bir şekilde hareket ederek hangi elemanlarla çalıştığınızı görmenizi ve diğer
elemanları kolayca seçmenizi sağlar.
Bölüm 1
Dreamweaver Temelleri
Ekle araç çubuğu; resimler, tablolar, özel karakterler, formlar ve HTML gibi sayfanıza
ekleyebileceğiniz pek çok nesne ya da elemanı içerir. Bunlar tiplerine göre yedi gruba ayrılmıştır:
Ortak, Mizanpaj, Formlar, Data, Spry, Metin, Sık Kullanılanlar. Etkin grubun ismi menüde
görüntülenir. Varsayılan durumda Ortak grubu etkindir. Menüyü kullanarak farklı bir nesne
grubuna geçebilirsiniz. Bu gruplardaki farklı nesnelerin çoğunun ilâve araçlar, seçenekler ve ilişkili
diğer nesnelerle birlikte kendi özel menüsü vardır ve bunlara küçük siyah bir okla erişilir.
15
16
Bölüm 1
Dreamweaver Temelleri
Sayfanızın altında, kullandığınız nesneler ve metinlerle ilgili özellikleri değiştirebileceğiniz Özellikler
panelini görebilirsiniz.
Paneller
Dreamweaver’daki panellerin büyük bir kısmı kenetlenmiş bir halde, işlevlerine göre sekmeli
pencereler şeklinde panel gruplarında yer alır. Varsayılan panel grupları CSS, Uygulama, Etiket
Denetimi ve Dosyalar’dır. Panellere bu gruplardan ya da Pencere menüsünden erişebilirsiniz. Panel
grupları, en çok kullandığınız panellere kolayca erişmenizi ya da bunları gizlemenizi mümkün kılar.
Kenetleme işlemi, ekran alanını maksimum büyüklüğe getirmenizi ve aynı zamanda ihtiyacınız
olan panellere çabucak erişmenizi sağlar. Her panel grubu, etkin paneli ve içindeki diğer panellerin
sekmelerini görüntüleyecek şekilde genişletilebilir ya da sadece grubun adı görünecek şekilde
küçültülebilir.
Bölüm 1
Dreamweaver Temelleri
Sayfaya Başlık Atamak
Oluşturduğunuz her HTML belgesinin bir başlığı olmalıdır. Bu başlık öncelikle belgenin tanınması
için kullanılır. Web tarayıcısının başlık çubuğunda görüntülenir, sayfanın içeriğini gösterir ve Sık
Kullanılanlar (Favorites) listelerinde isim olarak görünür.
Başlık bölümünde Başlıksız Belge olarak görünür. Bu başlığı sayfanızı uygun bir başlıkla değiştirin.
Bu değişikliği yaptıktan sonra dosyayı kaydedin.
17
BÖLÜM
2
İçerik
Eklemek
Metin Eklemek
Satır Arası Eklemek
Bölünmez Boşluk Eklemek
Metni Hizalamak ve Madde İmleri
Özel Karakterler Eklemek
Sayfayı Önizleme ile Tarayıcıda Görüntülemek
Bölüm 2
İçerik Eklemek
İ
çeriğin hiyerarşisini ve yapısını geliştirmek, bir Web sitesi oluşturma sürecinde bir sonraki
adımdır. Yapıyı oluşturarak ve çatıyı kurarak sitenin temel bileşeni olan içeriği hazırlamış
olursunuz.
Metin Eklemek
Sayfaya metin eklemek için birkaç farklı yöntem bulunmaktadır.
▶
Metni oluşturduğunuz boş sayfa içine yazmak.
▶
Başka bir metin düzenliyicisinden kopyalayarak yapıştırmak.
▶
TXT gibi düz metinleri Dreamweaver içinde açmak
Herhangi bir metni Dreamweaver sayfasına eklediğinizde ya da yazdığınızda Özellikler denetçisi ile
özelliklerini değiştirebilirsiniz.
Metin için özellikler denetçisi iki bölümü ayrılmıştır:
HTML ve CSS
19
20
Bölüm 2
İçerik Eklemek
HTML alanında metnin HTML özelliklerini düzenleyebilirsiniz.
Metninizin görsel özelliklerini düzenlemek için CSS seçeneğini seçmelisiniz. Dreamweaver CS4
sürümünden itibaren tüm metin düzenlemeleri için CSS tekniğini kullanmaktadır.
Satır Arası Eklemek
Yazılarınızı yazarken bir alt satıra inmek istediğinizde CTRL + Enter kısayolunu kullanarak bir line
break ekleyebilirsiniz.
Sadece Enter tuşuna basarak yeni bir paragraf oluşturabilirsiniz.
Bölünmez Boşluk Eklemek
HTML dokümanlarında ardarda bir tane boşluk verilebilir. Ardarda birden fazla boşluk vermek için
CTRL + SHIFT + BOŞLUK tuşuna basmalısınız.
Eğer bu kısayol yerine her seferinde boşluk tuşuna bastığınızda birden fazla boşluk vermek isterseniz
Düzen > Tercihler seçeneğini seçin.
Genel sekmesinde “Birden çok ardışık boşluğa izin ver” seçeneğini seçin ve Tamam butonuna
basarak pencereyi kapatın.
Bölüm 2
İçerik Eklemek
Metni Hizalamak ve Madde İmleri
Paragrafları hizalamak metin hizalama butonlarını Özellikler denetçisinde CSS sekmesi altında
kullanabilirsiniz.
Metinlerinizden madde imi oluşturmak için yine Özellikler paneli HTML sekmesinde bulunan
madde imi butonlarını kullanabilirsiniz.
HTML dokümanlarında her bir paragraf bir madde imi olarak kabul edilmektedir. Eğer madde
imi içinde bir alt satıra inmek isterseniz CTRL + ENTER tuşlarına basmalısınız. Oluşturduğunuz
madde imlerinin (numaralı ya da numarasız) görünümü değiştirmek için listenin içindeyken
Format > Liste > Özellikler seçeneğini seçin.
21
22
Bölüm 2
İçerik Eklemek
Özel Karakterler Eklemek
Özel karakterler eklemek için Ekle panelinde Metin seçeneğini seçin.
Bölüm 2
İçerik Eklemek
En alttaki açılır menüden dilediğiniz özel karakterleri sayfanıza ekleyebilirsiniz.
23
24
Bölüm 2
İçerik Eklemek
Sayfayı Önizleme ile Tarayıcıda Görüntülemek
Dreamweaver içinde çalışırken oluşturduğunuz sayfaları tarayıcıda önizleyerek içindeki hataları
görmek ya da yapmış olduğunuz sayfanın neye benzediğine bakmak isteyebilirsiniz. Bu durumda
yapmanız gereken klavyenizden F12 tuşuna basarak yapmış olduğunuz sayfanın tarayıcıda
açılmasını sağlamak olacaktır. F12 tuşuna bastığınızda sayfa varsayılan tarayıcıda açılacaktır.
Eğer varsayılan tarayıcıyı değiştirmek yada alternatif bir tarayıcıyı önizleme seçeneklerine eklemek
istiyorsanız Dreamweaver menüsünden Dosya > Tarayıcıda Önizleme > Tarayıcı Listesini
Düzenle... seçmelisiniz.
Açılan iletişim kutusundan istediğiniz ikincil tarayıcıyı ekleyebilir yada var olan birincil tarayıcı ile
ilgili değişiklikler yapabilirsiniz.
Bölüm 2
İçerik Eklemek
25
BÖLÜM
3
Stil Sayfaları
Oluşturmak
Sayfa Arkaplan Rengini Değiştirmek
Sayfa Karakterini Değiştirmek
Dâhili Stiller
Dahili Stilleri Harici Stillere Dönüştürmek
Mevcut Bir Harici Stil Sayfasını Bağlamak
Harici Stiller Oluşturmak
Dreamweaver’ın CSS Düzenleme Özelliği
Eklediğiniz Stilleri Kullanmak
Bir Etiket İçin Stil Oluşturmak
Bölüm 3
Stil Sayfaları Oluşturmak
C
ascading Style Sheets (CSS) olarak adlandırılan stil sayfaları, metinler ve resimler
gibi çeşitli elemanların Web sayfalarınızda nasıl görüneceğini tanımlamanızı sağlar.
Cascading (basamaklı) terimi, stillerin sırasını ve öncelik düzeyini tanımlar. Stil (style), tek bir
isimle tanımlanan bir dizi biçimlendirme niteliğidir. Bu da Web tarayıcısına bir elemanı nasıl
görüntülemesi gerektiğini bildirir. HTML belgelerindeki stiller, biçimlendirme, görünüm ve
yerleşim düzeni üzerinde geniş bir kontrol imkânı sağlar. Stillerden faydalanmanın avantajını şöyle
özetleyebiliriz: Bir stilin niteliklerinden birinde bir değişiklik yaptığınızda, bu stil tarafından kontrol
edilen bütün elemanlar otomatik olarak güncellenir (stili nasıl oluşturduğunuza bağlı olarak tek
bir belgede ya da bütün site genelinde). Font, büyüklük ve renk gibi standart niteliklerden sadece
CSS ile erişilebilen gelişmiş metin niteliklerine (satır aralıkları [leading] gibi) kadar pek çok ayarda
değişiklik yapabilirsiniz.
Stil sayfalarını kullanarak örneğin 1,25 cm’lik kenar boşluğuna sahip bir paragraf oluşturabilir,
satırlarının arasını 20 punto yapabilir ve metinde kullanılan fontun puntosunu 12 olarak
ayarlayabilirsiniz. Böyle bir şeyi CSS olmadan yapamazsınız. Web tarayıcılarının 4.0 ya da daha
yeni sürümleri CSS desteğine sahiptir. Internet Explorer 3.0 bazı stil niteliklerini tanısa da eski
Web tarayıcıları CSS’i görmezden gelir. En iyi sonucu, sürümü 5.0 ve daha üst versiyonu olan Web
tarayıcıları verir. Bunlar pek çok özelliği destekler.
Tek bir sayfayı biçimlendirmek için belgede saklanan bir dahili stili kullanabilirsiniz. Çeşitli
belgeleri birden fazla sayfada (aynı metin biçimlendirme özelliklerini koruyacak şekilde) bir bütün
olarak kontrol etmek isterseniz bir harici stil sayfasından da faydalanabilirsiniz. Çeşitli belgelerin
görünümünü, aynı metin biçimlendirme özelliklerini birden fazla sayfada koruyacak şekilde bir
bütün olarak kontrol etmek isterseniz bir harici stil sayfasından da faydalanabilirsiniz. Bu stil sayfası
Web sayfasının dışında bulunur ve geçerli sayfaya bağlanır. Böyle durumlarda metinlerin ve sayfa
yerleşim düzeninin bütün site içinde tutarlı olmasını sağlamak en iyisidir. Çünkü bu öğeler sayfadan
sayfaya ciddi ölçüde değişiklik gösterirse, ziyaretçileriniz başka bir siteye geçtiklerini düşünebilir.
Stil sayfalarını kullanmanın diğer bir avantajı da, Web sayfalarının içeriğini biçimlendirmeden ayrı
tutabilmeyi sağlamasıdır. Sonuç olarak bu, içeriğinizin görünümü üzerinde daha hassas bir kontrol
imkânı sağlar ve Web sitenize içerik eklemek daha hızlı ve daha az karmaşık bir işlem halini alır.
İçeriği bu şekilde izole etmek, sitenin güncellenmesi ve devamlılığının sağlanmasını çok daha basit
bir hale getirir. Web sayfalarınızın biçimlendirme özelliklerini stil sayfalarıyla kontrol ederek farklı
platformlar ve Web tarayıcıları arasında daha uyumlu sayfalar oluşturabilirsiniz.
Sayfa Arkaplan Rengini Değiştirmek
Sayfa arkaplan rengini değiştirmek için sayfa özellikleri penceresini açmalısınız. Sayfa özelliklerini
açmak için Dreamweaver menüsünden Değiştir > Sayfa Özellikleri seçeneğini seçin.
27
28
Bölüm 3
Stil Sayfaları Oluşturmak
Sayfa özelliklerini iki şekilde ayarlayabilirsiniz: CSS ve HTML
Bölüm 3
Stil Sayfaları Oluşturmak
Açılan iletişim penceresinde görünüm alt menüsü içindeki arkaplan rengi alanından kendi
sayfanıza özgü bir renk seçebilirsiniz. Burada seçmiş olduğunuz renk sayfanız içinde bir CSS olarak
Dreamweaver tarafından tanımlanacaktır.
Sayfa Karakterini Değiştirmek
Sayfanızın içinde bütün metinlerinizin aynı fontta olmasını istiyorsanız yine sayfa özellikleri
penceresi içinde Sayfa Fontu seçeneğini dilediğiniz bir fontu yansıtacak şekilde düzenleyebilirsiniz.
Sayfa fontunu belirlemek için Sayfa Özellikleri penceresini açın. Sayfa özelliklerini açmak için
Dreamweaver menüsünden Değiştir > Sayfa Özellikleri seçeneğini seçin.
29
30
Bölüm 3
Stil Sayfaları Oluşturmak
Açılan pencerede Görünüm (CSS) seçeneğini seçerek sayfanız içindeki metinlerin stil görünümlerini
düzenleyebilirsiniz.
Bu seçiminiz de sayfa içinde bir CSS olarak gözükecektir. Sayfanızın kod görünümüne geçtiğinizde
yapmış olduğunuz seçimlere göre aşağıdaki gibi gözüktüğünü göreceksiniz (Sizin seçimleriniz farklı
olabileceğinden aşağıdaki kodun aynısını göremeyebilirsiniz).
<style>
body {
background-color: #003333;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
</style>
Yine aynı sayfa özellikleri penceresi içinde sayfanıza ait font rengini de belirleyebilirsiniz.
Bölüm 3
Stil Sayfaları Oluşturmak
Dâhili Stiller
Dahili stiller sadece geçerli belgede tanımlanan, kullanılan stillerdir. Sitenizdeki tek bir sayfa için bir
stil tanımları oluşturacaksanız dahili stilleri kullanabilirsiniz. Eğer tanımladığınız stilin siteniz içinde
birden fazla sayfada kullanılmasını istiyorsanız, harici bir stil sayfası oluşturmanız ve bu stil sayfasını
aynı görünüme sahip olmasını istediğiniz her belgeye bağlamanız gerekir. Mümkün olan her yerde
harici stil sayfaları kullanmanız tavsiye edilir. Harici stiller diğer belgelerdeki stilleri kullanabilmenizi
sağladığı için çok kullanışlıdır. Ayrıca, harici stiller için kullanılan biçimlendirme kodu ortak bir
harici belgede saklandığı için bu stil sayfasını kullanan Web sayfaları biçimlendirme bilgilerini tekrar
tekrar yüklemek zorunda kalmaz. Bu da daha az kod kullanılmasını sağlar ve böylece sayfalar daha
hızlı yüklenir. Bunlara ek olarak, hepsi aynı yerde bulunduğu için stillerin güncellenmesi de daha
kolay olur.
Dahili stil oluşturmak için CSS panelinden yararlanacağız. Bu panel içinde hem dahili hem de
harici stilleri bir arada görebilirsiniz. Bu panel açık değilse açmak için Pencere > CSS Stilleri
seçeneğini seçin.
31
32
Bölüm 3
Stil Sayfaları Oluşturmak
CSS Styles panelinde, sayfa özelliklerini tanımladığınızda oluşturulan stillerin bir listesi bulunur.
CSS panelinin altındaki yeni CSS kuralı butonuna basın. Karşınıza yeni stil oluşturma penceresi
çıkacaktır.
Dremaweaver içinde kullanabileceğiniz 4 çeşit stil vardır. Bunlar Sınıf, Kimlik, Etiket ve Bileşiktir.
Bölüm 3
Stil Sayfaları Oluşturmak
Sınıf:
Bu seçici tipi, belirli bir elemana bağlı olmayan sınıflar yaratmanızı sağlar. Tek bir sınıfı pek çok
farklı elemana uygulayabilirsiniz. Sınıflar, başlarına konan nokta işaretiyle gösterilirler.
Kimlik: Bu seçici tipi ID’ler oluşturmanızı sağlar ve önemli bir istisna dışında sınıflara benzerler:
ID’ler belirli bir elemanı benzersiz bir şekilde tanımlama yöntemi olarak sayfa başına sadece tek bir
kez kullanılabilirler. Benzersiz yapılarından ötürü ID’ler genellikle script yazma amacıyla kullanılır
ve bir diyez işaretiyle (#) gösterilirler.
Etiket: Bu seçici tipi, stil tarafından yeniden tanımlanacak olan bir eleman olarak bir HTML
etiketinin görsel özelliklerini belirlemenizi sağlar. Etiketin varsayılan görünümü stil tarafından
değiştirilir.
Bileşik: Bu seçici tipi, özel etiket birleşimleri için kullanılan stiller oluşturmanızı sağlar (bağlamsal
seçiciler). Bu seçici tipi ayrıca ID’ler oluşturmanızı sağlar ve önemli bir istisna dışında sınıflara
benzerler: ID’ler belirli bir elemanı benzersiz bir şekilde tanımlama yöntemi olarak sayfa başına
sadece tek bir kez kullanılabilirler. Benzersiz yapılarından ötürü ID’ler genellikle script yazma
amacıyla kullanılır ve bir diyez işaretiyle (#) gösterilirler.
Sınıf türü bir stil oluşturmak için aşağıdakileri yapın:
Sadece dahili bir stil oluşturacaksanız o zaman açılan pencere içinde “Sadece bu belge” seçeneğini
seçmelisiniz. Ad alanına bu stile vermek istediğiniz ismi yazmalısınız. Yazmış olduğunuz ismin
başına bir “.” nokta koyarak ismi yazabilirsiniz. Nokta işaretini koymasanız da Dreamweaver bunu
sizin için koyacaktır.
33
34
Bölüm 3
Stil Sayfaları Oluşturmak
Tamam butonuna bastıktan sonra açılan pencerede bu stil ile ilgili özellikleri düzenleyebilirsiniz.
Bölüm 3
Stil Sayfaları Oluşturmak
Dahili Stilleri Harici Stillere Dönüştürmek
Stil sayfaları harici olarak saklanabilir ve bir ya da daha fazla belgeye bağlanabilir. Bir harici stil
sayfası, sadece CSS spesifikasyonları içeren bir dosyadır. Harici stil sayfalarını birden fazla Web
sayfasında kullanarak sayfaların tutarlı olmasını sağlayabilirsiniz.
Dahili stiller içeren bir belgeniz varsa ve bu stilleri diğer sayfalarda da kullanmak istiyorsanız,
bunları harici bir stil sayfasına kolayca aktarabilirsiniz.
Dahili stil sayfanızı harici bir stil olarak kayıt etmek için seçtiğiniz stil üzerinde sağ tıkladıktan sonra
“CSS Kuralını taşı...” komutunun seçmeli ve ve “Yeni bir stil sayfası...” seçeneğini işaretlemelisiniz.
Bu aşamadan sonra Dreamweaver size yeni stil sayfanızı kayıt edeceğiniz yeri soracaktır. Harici stil
sayfalarınızı tutacağınız en uygun yer siteniz altındaki CSS klasörünün içindir. Bu nedenle siteniz
içinde oluşturduğunuz CSS klasörünü kullanabilirsiniz.
35
36
Bölüm 3
Stil Sayfaları Oluşturmak
Mevcut Bir Harici Stil Sayfasını Bağlamak
Eğer harici bir stil dosyanız varsa ve bunu siteniz içindeki diğer sayfalarda da kullanmak istiyorsanız
o zaman sayfalarınızı bu stil sayfalarına bağlamalısınız.
Harici var olan bir stil sayfanızı bir sayfaya bağlamak için o sayfayı Dreamweaver içinde açtıktan
sonra, CSS panelinin altında bulunan “Stil Sayfasını Ekle” seçeneğini işaretlemelisiniz.
Bu seçeneği seçtiğinizde karşınıza yeni bir iletişim kutusu açılacak ve sizden harici stil sayfanızın
yerini soracaktır. Bu açılan pencerede stil sayfanızı seçtiğinizde artık içindeki css tanımlarını sayfanız
içinde de kullanabilirsiniz. Harici stil sayfaları ile çalışırken unutmamanız gereken şey, bu stillerde
bir değişiklik yaptığınızda buna bağlı olan tüm sayfalardaki bu stilin görünümü de değişecektir.
Harici Stiller Oluşturmak
Font, font büyüklüğü, rengi gibi çeşitli biçimlendirme niteliklerini ayrı ayrı belgelerde kolayca
değiştirebilirsiniz. Ancak harici stil sayfalarının seçeneklerinizi artırabileceğini ve bu stilleri
sitenizdeki diğer belgelerde de kolayca uygulamanızı sağladığını unutmayın. Stillerinizi, onları
kullanmak istediğiniz her sayfada yeniden yaratmak yerine, bütün stillerinizi saklamak üzere bir
harici stil sayfası kullanabilir ve böylece bu stilleri söz konusu stil sayfasının bağlı olduğu her belge
tarafından erişilebilir kılabilirsiniz. Bu da biçimlendirme işlemini önemli ölçüde hızlandırabilir.
Harici bir stil oluşturmak için CSS panelinde “Yeni CSS Kuralı” butonuna bastıktan sonra açılan
pencerede Tanımla alanında “(Yeni Stil Sayfası Dosyası)” seçeneğini seçmeli veya daha önce harici
bir stil sayfanız varsa açılan pencereden onu seçmelisiniz.
Bölüm 3
Stil Sayfaları Oluşturmak
Dreamweaver’ın CSS Düzenleme Özelliği
Dreamweaver varsayılan davranış olarak CSS sayfalarını düzenlediğinizde onları açar ve yaptığınız
değişiklikleri içine ekler ancak otomatik olarak kayıt etmez. Bu durumda yaptığınız son
değişiklikleri sayfanızda göremeyebilirsiniz.
Bu durumu engellemek için yapmanız gereken Dreamweaver içinde Düzen > Tercihler seçeneğini
seçin.
37
38
Bölüm 3
Stil Sayfaları Oluşturmak
CSS Stilleri menüsünden “Değiştirildiğinde CSS dosyalarını aç” kutucuğundaki işareti kaldırmaktır.
Bölüm 3
Stil Sayfaları Oluşturmak
Eklediğiniz Stilleri Kullanmak
Stil olarak eklediğiniz Sınıf ’ları sayfanızın içinde kullanmak için onların etki edecekleri metinleri
seçmelisiniz. Bu işlem için sayfanızın içinde bir metni ya da başka bir nesneyi işaretlemeli ve ona
oluşturmuş olduğunuz stili seçerek yeni görünümünü vermelisiniz. Yazıyı işaretledikten sonra
Özellikler panelindeki Stil penceresinden eklemiş olduğunuz bu stili seçmelisiniz. Unutmayın bu
stili CSS panelinde değiştirdiğinizde sayfa içinde uygulandığı her yerde değişecektir.
Bir Etiket İçin Stil Oluşturmak
Eğer sayfanızın içinde bir etiketin geçtiği yerlerdeki özelliklerini bir seferde düzenlemek istiyorsanız
o zaman, o etiket için bir stil tanımlayabilirsiniz. Bunu yapmak için yeni stil ekleme butonuna
bastıktan sonra Etiket seçeneğini seçmeli ve buradan hangi etiket için işlem yapacaksanız onun
seçili olduğundan emin olmalısınız. Örneğin dokümanlarınızın içindeki tüm paragrafların sizin
seçtiğiniz şekilde gözükmesini istiyorsanız o zaman açılan menüden p etiketini seçmelisiniz (HTML
bir etiketler dilidir. Sayfa içindeki tüm gösterimler ile ilişkili bir etiket bulunmaktadır. Paragraf için
kullanılan etikette <p> dir.
39
40
Bölüm 3
Stil Sayfaları Oluşturmak
Oluşturduğunuz yeni stil, paragraf etiketleriyle biçimlendirilen metnin görüntülenme şeklini
yeniden tanımlayacaktır.
Bileşik Stil Hazırlamak
Bileşik stili kullanabileceğiniz yerlerden biri sayfanızın içindeki bağlantılara efekt eklemektir. Bileşik
modu içinde hazır olarak tanımlanmış 4 adet link seçeneği bulunmaktadır.
Bölüm 3
Stil Sayfaları Oluşturmak
Bunlar:
a:link – Sayfa içinde daha önceden ziyaret edilmemiş linklerin görünümü ile ilgili görsel
ayarlamaları yapabileceğiniz tanımlama.
a:hover – Sayfa içindeki linklerin üzerine geldiğinizde nasıl bir görünüm alacağını
ayarlayabileceğiniz tanımlama.
a:active – Eğer çerçeveli sayfalar kullanıyorsanız tıklanmış olan linkin nasıl bir görünüm alacağını
ayarlayabileceğiniz tanımlama.
a:visited – Daha önce ziyaret edilmiş bir linkin nasıl bir görünüm alacağını ayarlayabileceğiniz
tanımlama.
41
BÖLÜM
4
Bağlarla
Çalışmak
Bağlara Farklı Renk Atamak
Onaltılık Tabanlı Renk Kodları
Hipermetin Bağlantıları Oluşturmak
Sayfa İçinde Link Vermek
E-Posta Bağlantıları Eklemek
Bölüm 4
Bağlarla Çalışmak
B
enzersiz bir araç olan Web sitelerinin gücü, metinleri ve resimleri diğer belgelerle doğrusal
ya da sıralı olmayan bağlantılar aracılığıyla bağlama becerilerinden ileri gelir. Web tarayıcısı,
bağlantı olduklarını göstermek için bu bölgeleri vurgulayabilir (genellikle belirli bir renkle ya da
altçizgiyle).
HTML’de bağlantılar iki parçadan oluşur: Kendisine bağlanılacak olan dosyanın adı ve yolu (ya
da URL’i - Uniform Resource Locator) ile tıklanabilir alan olarak görev yapan metin ya da resim.
Kullanıcı bir bağlantıya tıkladığında Web tarayıcısı bağlı belgeyi yükler. Bazı Web tarayıcılarında
imleç üzerine geldiğinde bağlantının yolu, tarayıcı penceresinin durum alanında (pencerenin sol
alt köşesinde yer alır) görüntülenir. Bağlantılar kullanıcıları diğer HTML dosyalarına, resimlere ve
diğer medya dosyalarına indirilebilir, dosyalara yönlendirebilir.
Bağlara Farklı Renk Atamak
Sayfanızdaki metin tabanlı bağlantıların varsayılan rengini belirleyebilirsiniz. Belgedeki normal
gövde metninden farklı bir bağlantı rengi seçtiğinizde kullanıcılar bağlantıları kolayca ayırt
edebileceklerdir. Belgenizin varsayılan bağlantı özellikleri Sayfa Özellikleri iletişim kutusunda
belirtilir.
Bağ renklerini değiştirmek için Değiştir > Sayfa Özellikleri menü nesnesini seçin.
Açılan sayfa özelliklerinde Bağlar (CSS) başlığını seçin.
43
44
Bölüm 4
Bağlarla Çalışmak
Eğer bağlantı renklerini belirlemezseniz, sayfa kullanıcının Web tarayıcısında görüntülendiğinde
tarayıcının varsayılan ayarları kullanılacaktır. Bu varsayılan ayarlar tarayıcıdan tarayıcıya farklılık
gösterebilir.
Sitenizin görünümü üzerinde çalışmaya başladığınızda sitenin renk düzenini bir bütün olarak
hesaba katmak en iyisi olacaktır. Sitenin tamamında kullanılacak stillere ve renklere karar verirken
bağlantı renklerini değiştirerek bu renklerin sayfalarınızda kullanılan diğer renklerle uyumlu
olmasını sağlayabilirsiniz.
Bağlantıların kolayca okunabilmesi için, seçtiğiniz renklerin arka planla ve diğer elemanlarla
kontrast oluşturması (ama uyumsuzluk yaratmaması) gerekir.
Bağlantılar farklı durumlara sahiptir. Örneğin tıklanan ve tıklanmayan bağlantıların durumu
farklıdır. Bir bağlantının her durumu için ayrı görünüm nitelikleri kullanabilirsiniz. Kullanıcının
davranışına göre değişen dört farklı bağlantı durumu için renk tanımlayabilirsiniz.
Bağ Rengi: Bağlantının, üzerine tıklanmadan önceki yani başlangıçtaki rengidir. Bağlantılar için
kullanılan standart Web tarayıcısı rengi mavidir.
Ziyaret Edilen Bağlar: Kullanıcı bir bağlantıya tıkladığında bağlantının aldığı renktir. Tıklanmış bir
bağlantı için kullanılan standart Web tarayıcısı rengi mordur.
Rollover Bağlar: Kullanıcı, imleci bir bağlantının üzerinde bir süre tuttuğunda bağlantının aldığı
renktir. Bu, bir öğenin tıklanabilir olduğunu gösteren ikinci bir işaret olarak tanımlanabilir. Bu
seçenek boş bırakılırsa rollover kullanılmaz.
Etkin Bağlar: İmleç üzerindeyken farenin düğmesine basıldığında bağlantının aldığı renktir.
Etkin bağlantılardan, ziyaretçiye ilgili bağlantıya tıklandığını gösteren etkileşimli bir işaret olarak
faydalanılabilir. Bununla birlikte, kullanıcıların Internet erişiminin hızlanmasıyla etkin bağlantıların
eskisi kadar rağbet görmediğini hatırlatmak isterim. Bu seçenek boş bırakılırsa etkinlik durumunu
göstermek için bir etkin renk kullanılmaz.
Bölüm 4
Bağlarla Çalışmak
Onaltılık Tabanlı Renk Kodları
HTML’de renkler RGB (Red/Green/Blue – Kırmızı/Yeşil/Mavi) kullanılarak onaltılık kodlarla
tanımlanır. Onaltılık sistemde rakamlar (0-9) ve harfler (A-F) kullanılır. HTML’de renkleri
tanımlamak için kullanılan altı basamaklı kodda ilk iki basamak kırmızıyı, ikinci iki basamak yeşili
ve son iki basamak da maviyi temsil eder. Örneğin #00FF00 ifadesiyle gösterilen renkte kırmızı ve
mavi yoktur ve parlak bir yeşil kullanılmıştır. #000000 ifadesiyle gösterilen renkte ise ne kırmızı, ne
yeşil, ne de mavi kullanılmıştır. Bu, siyah rengi gösterir. Bunun tersine, #FFFFFF ifadesi de kırmızı,
yeşil ve mavinin maksimum derecelerini gösterir ve bunlar birleştiğinde ekranınızda beyaz rengi
oluşturur. Bilgisayar ekranlarının sizin gördüğünüz renkleri oluşturmak için ışıktan faydalandığını
hatırlayın. Işığın renk özellikleri (eklenen renk sistemine dayanır ve bu sistemde tüm renkler
birleşerek beyazı oluşturur), basılı medyada (çıkarılan renk sistemine dayanır ve bu sistemde tüm
renkler birleşerek siyahı oluşturur) kullanılan pigmentlerin özelliklerinden çok farklıdır. Diyez
işareti (#), kendisini takip eden ifadenin bir renk ismi (siyah, beyaz, kırmızı, vs. gibi) değil, onaltılık
tabanlı bir değer olduğunu gösterir.
Hipermetin Bağlantıları Oluşturmak
Hipermetin bağlantıları (hypertext links) ziyaretçileri Web sitenizin içindeki belgelere ya da
Internet’teki başka sayfalara yönlendirmenizi sağlar. Aynı site içindeki diğer belgelere ya da sayfalara
giden bağlantılara göreceli bağlantılar (relative links) denir. Göreceli bağlantıları tek bir sitenin
klasör yapısı içinde farklı konumlarda yer alan pek çok farklı dosyaya atayabilirsiniz. Bu tür
bağlantıları oluşturmak için birçok farklı yöntemden faydalanabilirsiniz. Aşağıdaki uygulamada bu
yöntemleri göreceksiniz.
Herhangi bir bağlantı oluşturmadan önce yeni belgeleri kaydetmek önemlidir. Böylece
Dreamweaver’a belgenizin nerede olduğunu bildirerek bağlantı yollarını belirlemesini sağlarsınız.
Dreamweaver’ın bağlı dosyanın bağlantıyı yerleştirdiğiniz dosyaya göre olan konumunu belirlemesi
gerekir. Belgenizi ilk kez kaydetmeden önce bir bağlantı oluşturmaya çalışırsanız bu bağlantıya ait
yol file:// ifadesiyle bağlanacak ve uzak sitelerde kullanılamayacaktır, çünkü bunlar sabit diskinize
göre tanımlanmıştır, bağlantının bulunduğu dosyaya göre değil. Siz belgelerinizi kaydettiğinizde
Dreamweaver bağlantıları otomatik olarak günceller. Ama sorunlu yolların ortaya çıkma ihtimalini
ortadan kaldırmak için, dokümanınız oluşturduğunuzda kayıt etmeniz en iyisidir.
Site oluştururken bağlantıları göstermek için kullanacağınız ifadeleri seçerken dikkatli olun.
“Buraya Tıklayın” ifadesini kullanmaktan kaçının. Çünkü bu belirsiz bir ifadedir ve gezintiyle ilgili
zorluklar da dahil olmak üzere çeşitli sorunlara yol açabilir. Örneğin görme engelli ziyaretçiler
(özellikle de sesli Web tarayıcısı kullananlar) “Buraya Tıklayın” ifadesini kullanan birden fazla
bağlantıyı birbirinden ayırt edemeyebilir ve bunun sonucunda sitenizde gezinirken ciddi anlamda
zorlanabilirler. Ayrıca, sayfalarınıza ilgilerini çekecek bir bağlantı var mı diye göz atan ziyaretçiler
genellikle bağlantıları gösteren alt çizgilere dikkat ederler. Güzel bir açıklama yerine “Buraya
Tıklayın” ifadesini kullanmak durumu zorlaştırır. Bağlantı içeren ifadeler yazarken her zaman
konuyu açıklayıcı ifadeler kullanmaya dikkat edin.
45
46
Bölüm 4
Bağlarla Çalışmak
Yerel sitenizdeki bir başka sayfa ya da dosyaya bağlantı oluşturmak için bağlantı vereceğiniz yazıyı
işaretledikten sonra, Özellikler panelinde, HTML sekmesine tıklayın ve Bağ metin kutusunun
sağındaki klasör işaretine tıklayın ve sitenizin içinden ilgili dosyayı seçin.
Bu alana eğer başka bir siteye link verecekseniz bu sitenin adresini başında http bulunarak
yazmalısınız. (Ör: http://wwww.adobe.com)
Eğer sayfanızın yeni bir pencerede açılmasını istiyorsanız Hedef menüsünden _blank seçeneğini
seçmelisiniz.
Kendi siteniz içinde başka bir dosyaya link verdiğinizde, eğer link verdiğiniz dosyalar, içinde link
bulunan sayfa ile aynı klasördeyse, diğer dosya ismini Bağ alanında görürsünüz. Örneğin index.
hmtl dosyasının içinden aynı klasördeki iletisim.html dosyasına link veriyorsanız Bağ penceresinde
iletisim.html dosya ismini görürsünüz. Eğer bir klasör daha altta ise bu alanda örneğin sayfalar/
iletisim.html yazısını görürsünüz. Eğer bir klasör üstteyse ../iletisim.html yazısını görürsünüz. Daha
alt klasörlere gitmek için yolunuz üzerindeki tüm klasör isimleri linkinizin içinde olmalıdır. Eğer
daha üste gitmek istiyorsanız çıktığınız her üst seviye için linkinize ayrı bir ../ eklemelisiniz .
Sitenizin içinde yeni bir klasör oluşturmak isterseniz Dosyalar panelindeki boş beyaz alanda sağ
butona basarak yeni klasör seçeneğini seçin.
Sayfa İçinde Link Vermek
Bir belge çok uzunsa ya da birden fazla bölümden oluşuyorsa, kullanıcının belge içindeki belirli
yerlere atlamasını sağlayan çeşitli bağlantılar oluşturmanız gerekebilir. Bu teknik, kullanıcıları uzun
metin pasajlarıyla dolu bir ekranı sürekli kaydırma zorunluluğundan kurtarır. Adlı bağlantı (named
anchor), sayfada belirli bir bağlantının atlayacağı yeri işaretler.
Adlı bağlantı eklemek için Ekle panelinden çapa butonuna basın.
Bölüm 4
Bağlarla Çalışmak
İsimli bağlantı eklemek için Ekle > Adlı Bağlantı seçeneğini seçin. Açılan pencerede yer imine bir
isim verin.
Bu ismi kullanarak sayfa içinde link verebilirsiniz.
İsimde boşluk, noktalama işareti veya özel karakter (telif hakkı sembolü, diyez işareti vs gibi)
kullanmayın. Aynı belgede aynı isme sahip birden fazla isimli yer imi asla kullanılmamalıdır. Aksi
takdirde Web tarayıcısı kullanıcıyı doğru yer imine götüremez.
Sayfada, isimli yer imini göstermek için sarı bir simge belirecektir. Sayfada ilk belirdiğinde bu
simgeyi seçebilirsiniz (seçilen yer imi simgelerinin rengi maviye döner). Bu simge, Web tarayıcısında
görünmeyen bir elemandır.
Adlı bağlantı simgesini göremiyorsanız Görünüm > Görsel Yardımcılar > Görünmez Öğeler
komutunu seçerek görünmez öğelerin göründüğünden emin olun.
47
48
Bölüm 4
Bağlarla Çalışmak
Sayfa içinde yer imlerini oluşturduğunuza göre onlara artık link verebilirsiniz. Sayfa içinde bir
bağlantıya tıkladığınızda gitmek istediğiniz yere yer iminizi yerleştiriniz. Bağlantı vermek istediğiniz
metni işaretleyin ve Bağ penceresine yer iminin adının önüne # işareti koyarak yer iminin adını
yazın. Örneğin yer imi olarak bolum1 koyduysanız bu imi gitmek için link alanına #bolum1
yazmalısınız.
E-Posta Bağlantıları Eklemek
Sayfanız içinde tıkladığında çalışan bir eposta linki istiyorsanız bunun için yapmanız gereken
linki vermek istediğiniz metni işaretlemek ve Bağ kutucuğunun içine eposta linkini mailto:bilgi@
example.com şeklinde yazmaktır. Böylece bir eposta linki oluşturmuş olursunuz.
Bölüm 4
Bağlarla Çalışmak
49
BÖLÜM
5
Resimlerle
Çalışmak
Resim Türleri
Sayfalarınıza Arkaplan Resmi Eklemek
Sayfalarınıza Resim Eklemek
Dreamweaver İçinde Temel Resim Düzenleme İşlemleri
Resim Özellikleri
Resimlere İsim Atamak
Varlıklar Panelini Kullanarak Resim Eklemek
Bir Resim Yer Tutucusu Eklemek
Resim Düzenleme Tercihlerini Ayarlamak
Resim Tabanlı Bağlantılar Oluşturmak
Resim Haritası Oluşturmak
Bölüm 5
Resimlerle Çalışmak
R
esimler izleyicilerinizin dikkatini çekmede ve Web sitenizde vermeyi düşündüğünüz mesajı
etkin bir şekilde iletmede önemli bir rol oynayabilir.
Adobe Dreamweaver CS4’deki özellikler, sitenizde kullandığınız resimler üzerinde önemli ölçüde
kontrol imkânı sağlar. Böylece resim özelliklerini Dreamweaver içinden hızlı bir şekilde değiştirebilir
ve resimleri harici bir resim editöründe açabilirsiniz. Varlıklar paneli, sitenizde kullandığınız ya da
kullanmanız gereken bütün resimler için kataloglar hazırlamanızı sağlayarak resimlerin yönetimini
basitleştirir.
Resim Türleri
Web sitenizi geliştirirken sayfalarınızın içinde resimleri kullanarak etkiyi arttırabilirsiniz.
Sayfalarınızın içinde kullanabileceğiniz resim türleri aşağıdakiler gibidir:
▶
JPG
▶
GIF
▶
PNG
İnternet’te en çok ve en yaygın şekilde kullanılan resim formatı GIF (Graphic Interchange Format)
ve JPEG’dir (Joint Photographic Experts Group). Resimleri Internet’te kullanmak üzere kaydetme
işlemi optimizasyon olarak adlandırılır ve Adobe Fireworks ya da Adobe Photoshop gibi bir resim
editörüyle gerçekleştirilebilir. Bir resmi GIF olarak mı yoksa JPEG olarak mı kaydedeceğinize karar
verirken en yüksek resim kalitesini ve olası en düşük dosya boyutunu hedefleyin.
Genel bir kural olarak, resimde düz renklerden oluşan geniş alanlar varsa ve renk harmanları yoksa
veya çok azsa GIF formatını kullanın. GIF’ler metinlerde, vektör tabanlı resimlerde, ayrıca sınırlı
renge ve çok küçük boyutlara sahip resimlerde çok kullanışlıdır. GIF resimleri maksimum 8-bit renk
modu kullanılarak kaydedilebilir. Bu modda sadece 256 renk görüntülenebilir.
GIF dosyaları daha hızlı yüklenir, daha fazla optimizasyon seçeneğine sahiptir, ayrıca saydamlık ve
animasyonu destekler. GIF dosyaları için .gif uzantısı kullanılır.
Fotoğraflarda ya da ton aralığı büyük olan resimlerde JPEG formatını kullanmalısınız. JPEG
formatı renk harmanlarını çok iyi görüntüleyebilir ve bir GIF resminin kesri kadarlık bir boyutta
çok daha kaliteli fotografik resimler oluşturabilirsiniz. JPEG formatında resimler 24-bit modunda
kaydedilir, bütün renkler korunur ve fazlalık verilerin atıldığı kayıplı bir sıkıştırma tipi kullanılır.
JPEG kalitesi düştükçe, bahsettiğimiz atılan verilerden dolayı resme ait daha fazla bilgi kaybı olur.
JPEG’lerin kayıplı özelliğinden dolayı resmin kalitesini düşürmemek için bütün düzenleme işlemleri
kaynak dosyası üzerinde yapılmalı ve tekrar JPEG olarak kaydedilmelidir. JPEG dosyalarının
uzantısı .jpg’dir.
İnternet’te PNG (Portable Network Graphic) adında üçüncü bir format daha kullanılır.
51
52
Bölüm 5
Resimlerle Çalışmak
PNG formatı, GIF’in yerini alması için tasarlanmıştır; JPEG ve GIF formatlarının özelliklerini
birleştirir. PNG dosyaları kayıpsızdır, GIF dosyalarından daha iyi sıkıştırır ve renk kontrolü
açısından daha fazla seçeneğe sahiptir, ayrıca JPG gibi bütün renkleri koruyabilir ya da bir GIF
dosyası gibi sınırlı sayıda renk kullanabilir. PNG JPEG’lerin yerini alması için tasarlanmamıştır.
PNG, animasyon desteğine sahip değildir ve eski Web tarayıcıları tarafından desteklenmez. Dosya
uzantısı .png’dir.
Sayfalarınıza Arkaplan Resmi Eklemek
Sayfalarınıza arkaplan resmi eklemek için Dreamweaver menüsünden Değiştir > Sayfa Özellikleri
seçeneklerini seçin.
Açılan iletişim kutusunda Arka plan görüntüsü seçeneğinden uygun bir resmi seçebilirsiniz. Bu
seçimi Görünüm (CSS)
Bölüm 5
Resimlerle Çalışmak
veya
Görünüm (HTML) seçeneklerinden birini kullanarak yapabilirsiniz.
Sayfalarınıza Resim Eklemek
Sayfalarınıza resim eklemek için imlecinizi sayfa içinde resmi eklemek istediğiniz yere yerleştirdikten
sonra Ekle panelinden Resim düğmesine tıklamalısınız.
53
54
Bölüm 5
Resimlerle Çalışmak
Bölüm 5
Resimlerle Çalışmak
Açılan iletişim kutusundan eklemek istediğiniz resmi seçin. Eğer seçtiğiniz resim sitenizin içinde
değil de bilgisayarınızda başka bir yerde ise resmi seçtikten sonra Dreamweaver size bu dosyayı
sitenizin içine kopyalamayı isteyip istemediğinizi soracaktır. Bu soruya Evet olarak cevap vermeli
ve dosyayı sitenizin içindeki images klasörü içine kayıt etmelisiniz. Sonraki iletişim kutusunda
karşınıza çıkan alanlardan Alternatif metin alanına bu resimle ilgili açıklayıcı bir başlık, uzun
açıklama bölümüne ise görme özürlü ziyaretçilerin sayfalarınızı kolaylıkla ekran okuyucu
programlarla okuyabilmeleri için açıklama metnini yazabilirsiniz.
Dreamweaver İçinde Temel Resim Düzenleme İşlemleri
Dreamweaver içinde temel resim düzenleme işlemlerini yapabilirsiniz. Bu işlemleri yapmak için
özellikler panelindeki Düzenle buton grubunu kullanabilirsiniz. Bu butonlar sırasıyla aşağıdaki
gibidir:
55
56
Bölüm 5
Resimlerle Çalışmak
Düzenle: Harici bir resim düzenleme programını açar ve düzenlemek için hazırlar
En İyileştir...:Resminizin KB cinsinden boyutunu optimize etmek için optimizasyon penceresini
açar.
Kırp: Başka bir düzenleme programına ihtiyaç duymaksızın resimleri kırpmanızı sağlar.
Parlaklık ve Kontrast: Resimlerinizin parlaklık ve kontrastlarını ayarlamanızı sağlar.
Keskinleştir: Resimlerinizin keskinliğini arttırır.
Resim Özellikleri
Sayfalarınıza eklediğiniz resimlerin özelliklerini özellik panelini kullanarak düzenleyebilirsiniz.
G: Resmin genişliği
Y: Resmin yüksekliği
Kaynak: Resmin sabit diskiniz üzerindeki yeri
Bağ: Resmin linki
Alt: Resmin üzerine gelindiğinde çıkacak yazı
D Boşluk: Resmin altında ve üstündeki boşluğu
Y Boşluk: Resmin solunda ve sağındaki boşluğu
Hedef: Resmin linkinin hangi pencerede açılacağı
Düşük Kaynak: Resim yüklenene kadar gösterilecek düşük boyutlu versiyonu
Kenarlık: Resmin çerçeve kalınlığını ifade etmektedir.
Resminizin genişlik yada yüksekliğini, G yada Y değerini veya resminizin kenar tutamaçlarından
tutarak boyutunu değiştirdiğinizde iki birim arasında bir yenile ikonu çıkacaktır. Bu ikona
tıklayarak resmin orijinal boyutlarına dönmesini sağlayabilirsiniz.
Bölüm 5
Resimlerle Çalışmak
Resmin boyutlarını büyütürken kalitenin düştüğüne dikkat edin. Resimler Web tarayıcılarında
ekran çözünürlüğünde (72 dpi) görüntülenir. Bu çözünürlük değeri, resmi orijinalinden daha
büyük boyutlarda görüntülemek için yeterli değildir. Bu yüzden, mümkün olan en küçük dosya
boyutunu elde etmek üzere bir resim editöründe (Adobe Fireworks ya da Adobe Photoshop gibi)
boyutları ayarlamanız gerekecektir.
Resimlere İsim Atamak
Resim isimleri, her ne kadar çoğunlukla görünmeseler de Web sayfalarının önemli
bileşenlerindendir. Resimlere birer isim atamak genel olarak iyi bir alışkanlıktır ve bu isimler script
yazarken nesneyi tanımlamak için kullanılır.
Varlıklar Panelini Kullanarak Resim Eklemek
Varlıklar paneli, sitenizin bileşenlerini Dreamweaver içinden düzenleme imkânı sağlar. Bu aracı,
çeşitli medya ve sayfa elemanlarını görmek ve düzenlemek için kullanabilirsiniz. Örneğin bütün
resimlerinizi düzenlemeniz zor olabilir; özellikle de büyük bir site üzerinde çalışıyorsanız. Varlıklar
paneli ile bu resimleri kolayca takip edebilirsiniz.
Varlıklar panelinin sol tarafında yer alan diğer düğmeler sitenizde kullanabileceğiniz farklı varlık
(asset) tiplerini temsil eder. Bunların içinde renkler de yer alır.
Varlıklar paneliyle iki şekilde çalışabilirsiniz. Paneli, Site listesiyle (sitenizdeki bütün resimlerin tam
bir listesini içerir) ya da Sık Kullanılanlar listesiyle (sadece sizin sık kullanılan olarak işaretlediğiniz
resimleri gösterir) görüntüleyebilirsiniz. Her iki görünümde de seçtiğiniz bir resmi sayfanıza
ekleyebilirsiniz.
Bir Resim Yer Tutucusu Eklemek
Asıl resim henüz hazır değilse bir resim yer tutucusu da ekleyebilirsiniz. Belgenize bir resim yer
tutucusu ekleyerek asıl resmin sayfada metinler, tablolar veya diğer elemanlarla birlikte nasıl
görüneceği hakkında yaklaşık olarak bir fikir elde edebilirsiniz.
Görüntü yer tutucusu eklemek için Ekle Paneli içinde Görüntüler açılır menüsünü seçin.
57
58
Bölüm 5
Resimlerle Çalışmak
Açılan menüden Görüntü Yer Tutucuyu seçin
Bölüm 5
Resimlerle Çalışmak
Görüntü Yer Tutucu iletişim kutusu açılacaktır. Bu pencere içinde gerekli değerleri girebilirsiniz.
Resim yer tutucusu belge penceresinde belirecektir.
Resim Düzenleme Tercihlerini Ayarlamak
Dreamweaver ile Web sayfaları oluştururken, kullandığınız resimlerde değişiklik yapma gereği
duyabilirsiniz. Kapsamlı düzenleme işlemleri için resmi harici bir resim düzenleme programında
açmanız ve gereken ayarlamaları o şekilde yapmanız gerekir. Dreamweaver bu işlemi, ilgili resmi,
tanımladığınız bir programda hızlı bir şekilde açmanızı sağlayarak basitleştirir.
Dreamweaver Düzen > Tercihler menü nesnesini seçin.
59
60
Bölüm 5
Resimlerle Çalışmak
Tercihler iletişim kutusundaki Kategori listesinde Dosya Türleri / Düzenleyiciler’i seçin.
Bölüm 5
Resimlerle Çalışmak
Gerekli tanımlamaları bu pencereden yapabilirsiniz.
Resim Tabanlı Bağlantılar Oluşturmak
Kendi sitenizdeki ya da diğer sitelerdeki belgelere bağlanmak için resimlerden de faydalanabilirsiniz.
Bu uygulamada harici bir bağlantının nasıl oluşturulduğunu göreceksiniz. Resimleri sitenizdeki
dosyalara bağlamak için önceki uygulamada kullandığınız teknikleri kullanabilirsiniz.
Resimlere bağlantı oluşturmak için, bağ bilgisini gireceğiniz resmi seçin ve özellikler denetçisi
içindeki bağ bölümüne dosya adını yazın.
Resim Haritası Oluşturmak
Önceki uygulamada bir resme bağlantı uygulamanın ne kadar kolay olduğunu görmüştünüz. Bağlı
sayfaya gitmek için kullanıcının resmin herhangi bir yerine tıklaması yeterliydi. Resmi, aktif alan
(hotspot) adı verilen çeşitli bağlı alanlara da bölebilirsiniz. Burada resme aktif alanları yerleştirmek
için bir resim haritası (image map) kullanırsınız. Söz konusu aktif alanlar ille de dikdörtgen
şeklinde olmak zorunda değildir, farklı şekillerde de olabilirler. Kavramsal olarak bakıldığında,
resim haritaları coğrafi haritalarda kolayca kullanılabilir. Bununla birlikte herhangi bir resmi de
resim haritası olarak kullanabilirsiniz. Özellikler denetçisindeki Eşlem metin alanına istediğiniz ismi
yazabilirsiniz.
61
62
Bölüm 5
Resimlerle Çalışmak
Bu alandaki şekil araçlarını seçerek resminiz üzerine resim alanları çizebilirsiniz. Resim alanını
çizdikten sonra erişilebilirlikle ilgili bir uyarı görüntülenecektir.
Resim haritası resim üzerinde belirecek ve özellikleri de özellikler denetçisinden erişilebilir olacaktır.
Resmin bu bölümünde, isimlerin etrafında tutamaçlarla birlikte mavi-yeşil renkli yarı saydam
bir alan belirecektir. Özellikler denetçisinde aktif alan özelliklerinin belirdiğine dikkat edin.
Dreamweaver, Özellikler denetçisindeki Bağ metin alanına otomatik olarak bir boş bağlantı (#)
yerleştirecektir. Yerine hemen bir bağlantı yazmayacaksanız bu karakteri silmeyin. Bu karakter, ilgili
alanın tıklanabilir olduğunu göstermek için bir yer tutucu olarak görev yapar.
Oluşturduğunuz aktif alanlar kolayca düzenlenebilir. Bunları istediğiniz zaman yeniden
boyutlandırabilir, taşıyabilir ya da silebilirsiniz.
Resim haritasıyla işiniz bittikten sonra İşaretçi Etkin Nokta Aracıyla resmin üzerinde aktif alan
dışında başka bir yere tıklayabilirsiniz. Resim üzerinde resim alanının dışında farklı bir yere
tıkladığınızda Özellikler denetçisindeki seçenekler resim özelliklerini gösterecek şekilde değişecektir.
Bir aktif alanı taşımak isterseniz imleci aktif alanın içine yerleştirin ve sürükleyin. Aktif alan
İşaretçi Etkin Nokta aracıyla seçildikten sonra ok tuşlarını kullanarak da aktif alanın konumunu
ayarlayabilirsiniz. İşlemi gerçekleştirdikten sonra F12’ye basarak sayfalarınızı önizleyebilirsiniz.
Bölüm 5
Resimlerle Çalışmak
63
BÖLÜM
6
Tablolarla
Çalışmak
Tablo Oluşturmak
Harici Tabloları Aktarmak
Tablo Hücrelerini Kopyalamak ve Yapıştırmak
Tablo Hücrelerini Seçmek ve Biçimlendirmek
Tablo Özellikleri
Hücre Özellikleri
Tablo İçeriğini Sıralamak
Tabloda Satır yada Sütünları Silmek
Tablolara Satır yada Sütün Eklemek
İçiçe Tablolar
Farklı Ekran Çözünürlükleri İçin Uygun Boyutlar
Bölüm 6
Tablolarla Çalışmak
T
ablolar, bilgileri düzenli bir şekilde sunmanızı sağlar. Tablolarda yer alan satırlar (rows)
ve sütunların (columns) kesişimi hücreleri (cells) oluşturur ve tablo içeriğini bu hücrelere
yerleştirirsiniz. Hücreleri birleştirerek daha büyük hücreler elde edebilirsiniz. Tablolar, hesap
tablolarıyla sunulması gereken sekmeli (tabular) verilerden resimler ve HTML metinlerinin
kombinasyonlarından oluşan görsel tasarımlara kadar pek çok farklı tipte içerik sunmak için
kullanılabilir. Tablolar yerleşim düzenini kontrol etmek için kullanılabilir. İçeriği tablo hücreleri
içinde düzenleyerek nesneleri sayfa üzerinde belirli konumlara yerleştirebilir ve daha karmaşık
görsel tasarımlar oluşturabilirsiniz. Tablolar, tasarımcılara ve geliştiricilere sitelerinin yerleşim düzeni
üzerinde kontrol imkânı sağlayan HTML elemanlarından biridir.
Tablo Oluşturmak
Bir tablonun tüm içeriği her zaman bir hücre içinde yer alır ve her tabloda bir ya da daha fazla
hücre bulunur. Hücre (cell), bir satır (row) ve bir sütunun (column) kesişmesiyle oluşan alana
verilen isimdir. Bir tabloda en az bir satır ve bir sütun olmalıdır; böylece bir hücre elde edilir.
Ekle araç çubuğunda Mizanpaj kategorisini seçin ve Standart mod düğmesinin seçili olduğundan
emin olun.
65
66
Bölüm 6
Tablolarla Çalışmak
Varsayılan durumda Standart mod seçeneği etkin olmalıdır. Etkin mod, vurgulu bir düğmeyle
gösterilir. Etkin tablo modu olarak Standart mod seçili değilse, Standart düğmesine tıklayın.
Daha sonra ekleme noktanızı sayfanızın içinde istediğiniz bir noktaya koyarak yeni bir tablo
eklemek için Ekle panelindeki Mizanpaj modundaki yada Ortak modundaki Tablo düğmesine
tıklayın.
Bölüm 6
Tablolarla Çalışmak
Tablo iletişim kutusu üç bölüme ayrılmıştır Table Boyutu, Üstbilgi ve Erişebilirlik.
Tablo Boyutu bölümünde şu seçenekler yer alır:
Satırlar: Tablodaki satırların sayısını gösterir. Daha önce bir tablo oluşturmadıysanız varsayılan
Dreamweaver değeri 3’tür.
Sütunlar: Sütun sayısını gösterir. Daha önce bir tablo oluşturmadıysanız varsayılan Dreamweaver
değeri 3’tür
Tablo Genişliği: Piksel ya da Web tarayıcısı penceresinin bir yüzde değeri cinsinden tablo
genişliğidir. Piksel cinsinden tanımlanan tablolar metin ve resimlerin hassas bir şekilde
yerleştirilmesi açısından iyidir. Yüzde cinsinden tanımlanan tablolar ise sütunların orantıları
asıl genişliklerinden daha önemliyse ideal bir seçenektir. Daha önce bir tablo oluşturmadıysanız
varsayılan Dreamweaver değeri 200 piksel olacaktır.
Kenarlık Kalınlığı: Tablo kenarlığının genişliğini (kalınlığını) gösterir. Daha önce bir tablo
oluşturmadıysanız varsayılan Dreamweaver değeri 1 olacaktır.
Hücre Dolgusu: Hücre içeriği ve hücre duvarları arasındaki boşluk miktarını gösterir. Bu seçeneği
boş bırakırsanız, varsayılan değer olan 1 piksel kullanılır. Böyle bir boşluk kullanmak istemiyorsanız
metin alanına 0 (sıfır) yazdığınızdan emin olun. Daha önce bir tablo oluşturmadıysanız varsayılan
Dreamweaver değeri boştur. Metin alanının sağında söz konusu boşluğu göstermek için mavi rengin
kullanıldığı küçük bir tablo resmi göreceksiniz.
Hücre Boşluğu: Tablo hücreleri arasındaki boşluk miktarıdır (kenarlık buna dahil değildir).
Bu seçeneği boş bırakırsanız varsayılan değer olan 1 piksel kullanılır. Bunun için herhangi bir
boşluk kullanmak istiyorsanız metin alanına 0 yazdığınızdan emin olun. Daha önce bir tablo
oluşturmadıysanız varsayılan Dreamweaver değeri boştur. Metin alanının sağında söz konusu
boşluğu göstermek için mavi rengin kullanıldığı küçük bir tablo resmi göreceksiniz.
67
68
Bölüm 6
Tablolarla Çalışmak
Bu özellikleri daha sonra da değiştirebilirsiniz. Belge penceresinde bir tablo seçildiğinde Tablo
Boyutu bölümündeki seçeneklere Özellikler denetçisinden ulaşabilirsiniz. Tablo iletişim kutusunu
daha önce kullandıysanız bu seçeneklerin varsayılan değerleri farklı olabilir. Bu durumda varsayılan
değerler bir tablo için en son tanımladığınız değerler olacaktır.
Üstbilgi bölümü üstbilgi için dört farklı yerleşim seçeneği içerir: Yok, Sol, Üst ve Her ikisi. Üstbilgi
(header), içeriğinizi etiketlemek için kullandığınız bir satır ya da sütun başlığıdır.
Üstbilgiler tasarım/yerleşim tablolarından (tasarım amacıyla görsel elemanların düzenlenmesi ve
yerleştirilmesi için kullanılan tablolar) ziyade çoğunlukla veri tabloları (hesap tabloları gibi işlev
gören tablolar) için kullanılır. Bir hücreyi (ya da hücreleri) üstbilgiye dönüştüren bu seçeneğe
Özellikler denetçisi aracılığıyla da erişebilir ve istediğiniz zaman üzerinde değişiklik yapabilirsiniz.
Sayfalarınızın ziyaretçileriniz açısından erişilebilirlik durumunu sürekli olarak dikkate almanız
önemlidir. Erişilebilir sayfalar hazırlamanın amacı, olabildiğince çok ziyaretçi için (engelli olanlar da
dahil olmak üzere) işlevsel bir içerik oluşturmaktır. Dreamweaver, Erişilebilirlik bölümü aracılığıyla
erişilebilirlik özelliklerini en baştan itibaren dahil etmeyi çok kolay bir hale getirmektedir. Bu
bölümde şu seçenekler yer alır:
Bölüm 6
Tablolarla Çalışmak
Resim Yazısı: Siz bir tablo açıklaması (caption) tanımladığınızda bu açıklama bütün kullanıcılar
tarafından görülür ve tablonun üstüne, altına, soluna ya da sağına hizalanabilir. Bu seçeneği boş
bırakırsanız herhangi bir tablo açıklaması eklenmez. Bu seçenek sadece Tablo iletişim kutusunda
bulunur. Daha ileride bu özelliği dahil etmek isterseniz, HTML kodunu düzenleyerek bunu
gerçekleştirebilirsiniz.
Özet: Tablo özeti sayfada görüntülenmez. Ekran okuyucular tarafından okunur ve tablonun
kullanılma amacını ve içeriğini açıklamak için kullanılır. Özet (summary), tablodaki materyali
özlü, açıklayıcı ve olabildiğince kısa bir şekilde tanımlamalıdır. Tablonun içeriğinin ne olduğunu
göstermelidir. Bu seçeneği boş bırakırsanız özet dahil edilmez.
Sayfada, belirlediğiniz özelliklerle oluşturulmuş bir tablo belirecek ve otomatik olarak seçili
durumda olacaktır. Tablonun üst kısmına bir tablo üstbilgisi (açık renkli gri çubuk) eklendiğine
dikkat edin. Tablonun sol ve sağ sınırlarını gösteren yeşil renkli düşey çizgiler bu çubuğun iki
yanında görüntülenir.
69
70
Bölüm 6
Tablolarla Çalışmak
Çubuğun üst veya alt kısmı boyunca, ortasında tablonun genişlik değeri yazan ve bir menü oku
bulunan yeşil bir çizginin uzandığını göreceksiniz. Çubuğun tabloya en yakın kısmında bir dizi
kısa yeşil çizgi yer almaktadır. Sütunların genişliğini gösteren bu çizgilerin her biri kendi menü
okuna sahiptir. Siz tablonun dışında bir yere tıkladığınızda tablo üstbilgisi kaybolur, tablo tekrar
etkin duruma geldiğinde ya da seçildiğinde yine belirir. Tablo üstbilgisi, tablonun üst kısmındaki
içeriği örtebilir. Eğer tablo belgenizdeki ilk öğeyse, tablo üstbilgisi tablonun alt kısmına eklenebilir.
Çubuğun nerede görüntüleneceğini kontrol edemezsiniz.
Görünüm > Görsel Yardımcılar > Tablo Genişlikleri komutunu seçerek tablo üstbilgisi görsel
yardımcısını açabilir ya da kapatabilirsiniz.
Bölüm 6
Tablolarla Çalışmak
Onay işareti söz konusu seçeneğin etkin durumda olduğunu gösterir. Eğer yanında onay işareti
yoksa seçenek kapalı durumda demektir.
Tabloyla tablo açıklamasını çevreleyen ve alt ve sağ yanında seçim tutamaçları bulunan siyah
düz bir dış hat (outline), tablonun seçili durumda olduğunu gösterir. İki satır ve dört sütun,
tablo açıklamasını çevrelemeyen gri bir kenarlıkla gösterilir. Varsayılan Hücre Dolgusu değerinin
uygulanmasından dolayı hücrelerin arasında bir boşluk görebilirsiniz. Çünkü Hücre Boşluğu
seçeneği boş bırakılmıştı.
Siz yazıp diğer hücrelere geçmeye devam ettikçe tablo metni sığdırmak için sütunların genişliğini
otomatik olarak değiştirebilir.
Hücreler arasında hareket etmek için Tab tuşunu ya da ok tuşlarını kullanabilirsiniz. Tab tuşu,
sağda yer alan bir sonraki hücreye ya da satırın en sonundayken alttaki satırın ilk hücresine (en
soldaki hücre) geçmek için en hızlı yöntemdir. İçeriği bulunan bir hücreye Tab tuşunu kullanarak
geçtiğinizde o hücrenin içeriği seçili hale gelir. Eğer tabloyu eklerken en üst satırı üst bilgi satırı
olarak tanımladıysanız içine yazdığınız metinler koyu renkte ve ortalanmış olarak karşınıza
çıkacaktır. Tablonun dışına tıkladığınızda sütunlar genişlikleri değişerek hafifçe kayabilirler.
Harici Tabloları Aktarmak
Dreamweaver içine harici tabloları, Microsoft Office programlarından aktarabilirsiniz. Bunun için
yapmanız gereken ilgili tabloyu kopyalamak ve HTML sayfanızın içine yapıştırmaktır.
71
72
Bölüm 6
Tablolarla Çalışmak
Tablo Hücrelerini Kopyalamak ve Yapıştırmak
Hücreler, ekleme noktasının bulunduğu bir konuma yapıştırılabilir ya da mevcut bir tablodaki
seçimin yerine konabilir. Birden fazla tablo hücresini yapıştırmak istiyorsanız panonun (clipboard)
içeriği tablonun ya da yapıştırılan hücrelerin tabloda yerine geçeceği seçimin yapısına bütünüyle
uymalıdır. Bir hücreyi kopyalayıp bunu seçili bir hücrenin yerine geçecek şekilde yapıştırabilirsiniz.
Bütün satırları bir tablonun sonuna yapıştırırsanız satırlar tabloya eklenir. Yapıştırma işlemini bir
ya da daha fazla hücreyi değiştirmek amacıyla yapıyorsanız, pano içeriğinin seçilen hücrenin (ya
da hücrelerin) yapısına uyması durumunda seçilen hücrenin (ya da hücrelerin) içeriği kopyalanmış
olanlarla değiştirilir. Hücreyi ya da hücreleri bir tablonun dışına yapıştırıyorsanız, satırlar, sütunlar
veya hücreler yeni bir tablo tanımlamak için kullanılır.
Hücrelerin içeriğini silmeniz, ama aynı zamanda hücrelerin kendisini aynı şekilde bırakmanız
gerekiyorsa bir ya da daha fazla hücreyi seçin (tüm satırı ya da sütunu değil), ardından da Düzen
> Temizle komutunu seçin veya Sil tuşuna basın. Bütün bir satırı silmeniz gerekiyorsa imleci
sürükleyerek satırdaki bütün hücreleri seçin ve Sil tuşuna basın.
Silmek için önce bu tabloyu seçmeniz gerekir. Dreamweaver, tablo seçmek için kullanabileceğiniz
birkaç yöntem sunar. Tablo yapısının karmaşıklığına bağlı olarak bazı yöntemler diğerlerine göre
daha kolaydır.
Bir tabloyu, sol üst köşesine veya sağ ya da alt kenarında bir yere tıklayarak da seçebilirsiniz.
Kenarlardan birine yaklaştırdığınızda imleç okunun yanında bir tablo simgesi belirecektir.
Tıklamadan önce imleci görene kadar bekleyin.
Bir tabloyu seçmek için kullanabileceğiniz bir diğer yöntem de tablonun içinde bir yere tıklayıp
ardından Değiştir > Tablo > Tablo Seç komutunu seçmek şeklindedir.
Bölüm 6
Tablolarla Çalışmak
Tabloyu seçmek için gri çubuk boyunca uzanan yeşil renkli yatay tablo genişlik çizgisine de
tıklayabilirsiniz.
Seçildikten sonra tablonun etrafında seçim tutamaçları belirir ve bütün tabloyu siyah bir kenarlık
çevreler. Siyah kenarlık sadece bir ya da birden fazla hücrenin etrafını sarmaz, tüm tabloyu kapsar.
Eğer ekleme noktası tablonun içindeyse ve tablo seçili durumda değilse Etiket Seçici’de <table>
etiketinin yanında <tr> ve <td> etiketlerini de görebilirsiniz. <tr> etiketi, tablo satırını temsil eder.
<td> etiketi tablo verisini temsil eder ve hücre olarak da bilinir. Bir <td> etiketini seçtiğinizde ilgili
hücre seçili hale gelir ve Özellikler denetçisini kullanarak bu hücre üzerinde değişiklik yapabilirsiniz.
İmleç bir hücrenin içindeyken Ctrl+A klavye kısayolunu kullandığınızda hücre seçili hale gelir. Bu
kısayolu ikinci kez kullandığınızda tüm tablo seçilir.
Tablo Hücrelerini Seçmek ve Biçimlendirmek
Bir tablodaki tek bir satırı, tek bir sütunu ya da tablodaki bütün hücreleri kolayca seçebilirsiniz.
Bunun için satır’a soldan yada sütuna üstten yaklaştığınızda ok işareti çıkar. Bu ok işareti çıktığında
tıklamanız satırı seçmenizi sağlayacaktır. Bir tablodaki komşu olmayan hücreleri de (birbirine
değmeyen hücreler) seçebilir ve bunların özelliklerinde değişiklik yapabilirsiniz. Ancak komşu
olmayan hücreleri kopyalayıp yapıştıramazsınız. Bir tablo içinde birbirine komşu olmayan hücreleri
seçmek istediğinizde klavyeden CTRL tuşuna basılı tutarak hücrelere 1 kere tıklayın. Böylece
birbirine komşu olmayan hücreleri seçmiş olursunuz. İmleci bir hücrenin üzerinde hareket ettirirken
Ctrl tuşunu basılı tuttuğunuzda, ok imlecinin yanında birden fazla hücre seçtiğinizi göstermek üzere
dış hatları belirgin bir kare belirebilir.
73
74
Bölüm 6
Tablolarla Çalışmak
Tablo Özellikleri
Herhangi bir tabloyu seçtiğinizde özellik denetçisi içinde bu tablo ile ilgili özellikler belirecektir. Bu
özellikler aşağıdaki gibidir.
Tablo Kimliği: Tablonun başlığını girebileceğiniz alandır. Bu alan sizin tablonuzu sayfa içinde eşsiz
bir şekilde tanımlayabileceğiniz alanı belirler.
Satırlar: Tablolarınızın satır sayısını ayarlayabileceğiniz alan.
Sütunlar: Tablolarınızın sütun sayısını ayarlayabileceğiniz alan.
G: Tablolarınızın genişliğini ayarlayabileceğiniz alan. Buradan tablo genişliğinizi piksel yada yüzde
olarak ayarlayabilirsiniz.
Hücre Dolgusu: Hücrelerinizin içindeki nesnelerle duvarları arasındaki uzaklığın piksel olarak
değeri.
Hücre Boşluğu: Hücre arası boşluklarınızın piksel olarak değeri.
Hizala: Tablonuzun sayfanız içindeki yatay hizalaması
Kenarlık: Tablolarınızın kenar kalınlığı. Bu kalınlık değeri, eğer tablolarınızı tasarım elemanı olarak
kullanıyorsanız 0 olarak ayarlanmalıdır.
Hücre Özellikleri
Tablo özelliklerini düzenleyebileceğiniz gibi, tablolarınızın her bir hücresinin yada çoklu seçim
yaptıysanız hepsinin özelliklerini de bir arada değiştirebilirsiniz. Bunun için özelliklerini
değiştirmek istediğiniz hücreye tıklamalı veya birden fazla hücre için bu işi yapacaksanız o hücreleri
CTRL tuşuna basarak seçmelisiniz.
Seçilen hücreleri yayılmaları kullanarak birleştir: Bu seçenekle birbirine komşu iki hücreyi
birleştirebilirsiniz.
Seçilen hücreleri satır yada sütunlara böler: Bu seçenek ile seçilen hücreleri satır yada sütunlara
bölebilirsiniz.
Yatay: Hücre içindeki yatay hizalamayı belirler.
Dikey: Hücre içindeki dikey hizalamayı belirler.
Gen: Sütünün genişliğini belirler.
Bölüm 6
Tablolarla Çalışmak
Yük: Satırın yüksekliğini belirler.
Bg: Hücre arkaplan renginizi belirler. Burada vermiş olduğunuz değer tabloya vermiş olduğunuz
arkaplan değerinin üzerinde gözükür.
Sarma Yok: Yazılarınızın tablo küçüldüğünde bir alt satıra inmesini engeller.
Üstbilgi: İşaretlendiği hücrenin başlık formatında gözükmesini sağlar.
Tablo İçeriğini Sıralamak
Tek bir sütunun içeriğini alarak basit bir tablo sıralaması yapabilirsiniz. İki sütunun içeriğini temel
alarak daha karmaşık bir sıralama işlemi de gerçekleştirmek mümkündür. Birleştirilmiş hücreler
içeren tablolarda sıralama yapamazsınız. Sıralama yapmak için, tabloyu seçin ve arkasından
Komutlar > Tabloyu Sırala komutunu seçin.
Tabloyu Sırala penceresi açılacaktır.
75
76
Bölüm 6
Tablolarla Çalışmak
Bununla Sırala: Sıralamada temel alınacak sütunu seçmek için kullanabilirsiniz.
Sıralama: Sütunu alfabetik olarak mı yoksa sayısal olarak mı sıralayacağınızı belirler. Bu seçeneğin
önemi, içeriği sayısal olan sütunlarda ortaya çıkar. Bir ve iki basamaklı sayılarla numaralandırılmış
bir listeyi alfabetik olarak sıralarsanız, normal bir sayısal sıralama yerine (1, 2, 3, 10, 20, 30 gibi)
alfanümerik bir sıralama elde edersiniz (1, 10, 2, 20, 3, 30 gibi). Sıralama düzeni için azalan (A’dan
Z’ye veya artan) seçeneğini işaretleyin (varsayılan).
Sonra Bununla: Bu uygulamada bu seçeneği boş (varsayılan) bırakın. Sonra Bununla ile farklı
bir sütunda ikincil bir sıralama gerçekleştirebilirsiniz. Menüdeki sıralama seçenekleri Bununla
Sırala’dakilerle aynıdır.
Sıralama ilk satırı içerir: Bu seçenekle ilk satırın sıralamaya dahil edilip edilmeyeceğini
belirleyebilirsiniz. Eğer ilk satır başka bir yere taşınmaması gereken bir üstbilgiyse bu onay kutusunu
işaretlemeden bırakın (varsayılan).
Üst bilgi satırlarını sırala: Üstbilgi satırlarını göster.
Alt bilgi satırlarını sırala: Altlık satırlarını göster.
Sıralama tamamlandıktan sonra tüm satır renklerini aynı şekilde koruyun: Bir satırın herhangi
bir niteliğini değiştirdiyseniz, bu seçeneği işaretleyerek satırdaki ilgili niteliğini eski değerine
getirebilirsiniz. İlk satırına belirli bir renk atanmış olan bir tabloyu sıraladığınızı farz edelim.
Sıralamadan sonra ilk satırdaki veriler ikinci satıra kayar. Bu seçenek işaretlendiğinde verilerle
birlikte renk de ikinci satıra kayar. Eğer bu seçenek işaretli değilse renk ilk satırda kalır.
Tabloda Satır yada Sütünları Silmek
Tablonuzdan satır yada sütunu seçtikten sonar klavyenizden sil butonuna basarak yada menüden
Değiştir > Tablo > Satır Sil yada Sütun Sil seçeneğini seçerek silme işlemini gerçekleştirebilirsiniz.
Bölüm 6
Tablolarla Çalışmak
Tablolara Satır yada Sütün Eklemek
Tablolarınıza satır yada sütun eklemek isterseniz yapmanız gereken eklemek istediğiniz satır yada
sütun içinde bir hücreye tıkladıktan sonra Değiştir > Tablo > Satır Ekle yada Sütun Ekle seçeneğine
tıklamaktır.
77
78
Bölüm 6
Tablolarla Çalışmak
Eğer aynı menüden Satır veya Sütun ekle seçeneğini işaretlerseniz aşağıdaki gibi bir iletişim kutusu
karşınıza çıkacaktır.
İçiçe Tablolar
Tabloları tek başına kullanabileceğiniz gibi aynı zamanda içiçe olacak şekilde de kullanabilirsiniz.
Bu işlem ile tablolarınızı sayfa tasarımı için daha gelişkin olarak kullanabilirsiniz. Bu işlemi yapmak
için bir tablo ekledikten sonra tablonun içinde herhangi bir hücreye tıklayarak farklı özelliklerde bir
başka tablo daha ekleyebilirsiniz.
Farklı Ekran Çözünürlükleri İçin Uygun Boyutlar
Ziyaretçilerinizin ekran çözünürlükleri birbirinden çok farklı olabilir. Bu durumda bu farklı
çözünürlüklere hitap edecek farklı boyutlarda tablolar hazırlamanız gerekebilir. Bu durumda
yapmanız gereken hedef kitlenize uygun bir tablo genişliği seçmektir. Tablo genişlikleri ile ilgili
uygun boyutlar aşağıdaki gibidir.
Çözünürlük (Piksel) Cihaz
160 X 160 Palm tipi cihazlar
240 X 320 Cep bilgisayarı
544 X 372 Web TV
640 X 240 Windows CE
640 X 480 13 inç’lik monitör
800 X 600 15-17 inç’lik monitör
1024 X 768 17- 19 inç’lik monitör
1200 X 1024 21 inç’lik monitör
Bölüm 6
Tablolarla Çalışmak
79
BÖLÜM
7
Çoklu Ortam
Bileşenlerini
Kullanmak, Kullanıcı
Etkileşimi ve Ajax
Bileşenleri
Sayfalarınıza Flash Animasyonları Eklemek
Kullanıcı Etkileşimi
Bir Rollover Resmi Eklemek
Bir Durum Çubuğu Mesajı Oluşturmak
Yeni Bir Tarayıcı Penceresi Açmak
Ajax Eklentileri
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
A
dobe Flash ve QuickTime filmleri gibi multimedya elemanları, sitenizde sunduğunuz içeriği
geliştirmenizde size yardımcı olabilir. Bu elemanları kullanarak sitenizin ziyaretçilerine
mesajınızı iletmek üzere sitenize animasyonlar ve videolar ekleyebilirsiniz.
Sayfalarınıza Flash Animasyonları Eklemek
Sayfalarınıza Flash animasyonu eklemek için Ortak sekmesindeki çoklu ortam bileşenleri menüsüne
tıklayarak Flash’ı seçmeniz yeterli olacaktır.
Resimlerde olduğu gibi Varlıklar panelini kullanarak belgelerinize Flash animasyonları da
ekleyebilirsiniz.
Flash animasyonu eklemek için Ekle panelinden Ortam açılır menüsüne tıklayın ve Flash seçeneğini
seçin.
Flash animasyonu eklenirken erişilebilirlik penceresi açılacaktır.
81
82
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Herhangi bir Flash animasyonunu sayfanıza eklediğinizde özellikler paneli aşağıdaki gibi değişir.
Buradaki alanlar:
Gen: Genişlik
Yük: Yükseklik
Dosya: Dosyanın sitenizdeki yeri
Kaynak: Bu dosya için orijinal FLA dosyanız varsa onun yeri
Düzenle: Bu dosyanın orijinal FLA dosyasını açıp düzenlemeniz için gerekli buton
D Boşluk: animasyonun sağında ve solunda verilecek dikey boşluk
Y Boşluk: Animasyonun üstünde ve altında verilecek yatay boşluk
Kalite: Animasyonun hangi kalitede oynayacağı. Bu ayarı eğer ziyaretçilerinizin düşük bilgisayar
konfigürasyonları olduğunu düşünüyorsanız değiştirin.
Oynat/Çal: Animasyonu DW içinde önizlemek istiyorsanız gerekli buton
Parametreler: Flash animasyonuna göndermek istediğiniz parametreleri burada belirtebilirsiniz.
Hizala: Flash animasyonunu etrafındaki başka bir nesneye göre hizalama seçeneği
Wmode: Flash’ın görünüm parametresi
Ölçek: Flash animasyonunun genişliğinin %100 olması durumunda bu boyuta gelirken eğer
deforme olmasını istemiyorsanız Kenarlık Yok seçeneğini, eğer deforme olmasında sakınca yoksa
Tam Sığma seçeneğini seçebilirsiniz.
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Kullanıcı Etkileşimi
Etkileşim ve kullanıcı geribildirimi, Web sitelerinin önemli bileşenleridir. Bunları etkin bir şekilde
kullanarak çeşitli avantajlar elde edebilirsiniz. Bu bileşenleri kullanarak örneğin ziyaretçilerinizin
sitenizin içeriğini ve amacını daha iyi anlamalarına yardımcı olabilir, sayfalarınızda dolaşmalarını
kolaylaştırabilir ve sitenizde gezmeyi onlar için daha hoş ve faydalı bir deneyim haline
getirebilirsiniz.
Bir Web sitesine etkileşim eklemenin pek çok yolu vardır. Etkileşimli sayfalar oluşturmak için
kullanabileceğiniz birçok araca örnek olarak dinamik ve veritabanı destekli sayfalar, Adobe Flash
ve QTVR’ı (Quick Time Virtual Reality) verebiliriz. QTVR, 360° panoramik görünümleri ve
etkileşimli bileşenleri destekleyen filmlerdir. Etkileşimli Web siteleri oluşturmak için kullanılan
araçların en yaygın ve etkili olanlarından biri (özellikle istemci taraflı script’lerin yazılmasında
kullanılan) JavaScript’tir. İstemci taraflı script’ler, Web sayfalarında bulunan ve tarayıcı tarafından
işlenen script’lerdir. JSP (Java Server Page) tarafından kullanılan script’ler de dahil olmak üzere diğer
script’ler, sunucu taraflı script’lerdir. Bunlar sunucu tarafından işlenir ve kullanıcıya gönderilir.
Adobe Dreamweaver, standart JavaScript fonksiyonlarının kullanılma sürecini ve davranışlarını
kullanıma sunarak basitleştirir. Davranışlar (behavior) Web sitenize kolaylıkla dahil edebileceğiniz
önceden yazılmış JavaScript kod rutinleridir. Davranış, bir kullanıcı olayını (örneğin imlecin
Web tarayıcısındaki grafik tabanlı bir düğmenin üzerine getirilmesi), bu olayın sonucu olarak
gerçekleşen bir eylemle ya da bir dizi eylemle birleştirir. Davranışları sayfalarınıza etkileşim eklemek,
kullanıcıların eylemlerine bağlı olarak geribildirim almalarını ve gördükleri bilgileri değiştirmelerini
ya da değiştiremiyorlarsa kontrol etmelerini sağlamak için kullanabilirsiniz.
Dreamweaver’da önceden tanımlanmış bir dizi davranış bulunmaktadır. İlave davranışlar
ekleyerek Dreamweaver’ı geliştirebilir ya da JavaScript konusunda yeterli bilgiye sahip iseniz kendi
davranışlarınızı oluşturabilirsiniz.
Bir Rollover Resmi Eklemek
Web sayfalarında JavaScript en çok rollover oluşturmak için kullanılır. (Rollover, kullanıcı imleci
üzerine getirdiğinde değişen bir resimdir.) Rollover’lar, iki resmin kullanımını aynı alanda birleştirir.
Bir ziyaretçi rollover’ların kullanıldığı bir sayfaya ilk girdiğinde, bu resim kombinasyonları orijinal
durumlarında görüntülenir. İmleç rollover resminin üzerine getirildiğinde, bunun yerini yeni bir
resim alır. Yeni resim, bazen resmin “on” ya da “over” durumu olarak adlandırılır. Kullanıcı imleci
resimden uzaklaştırdığında, resim orijinal haline geri dönebilir ya da değişmiş olarak kalır. Rollover,
etkileşimin temel bir uygulamasıdır. Kullanıcının imleci resmin üzerine getirme işlemine bir yanıt
verir. Bu yanıt, genellikle mevcut resimde görsel bir efekt (örneğin bir düğmenin aydınlatılması, bir
sekmenin vurgulanması ya da bir gezinti elemanının etkin görünmesini sağlamak için derinliğin
değiştirilmesi) olarak görünür. Rollover yanıtında ayrıca, yeni resme içeriğin tanımı ya da açıklaması
gibi ilave bilgiler de eklenebilir.
83
84
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Web sitesindeki etkileşim, özellikle kullanıcı açısından önemlidir. Bu, ziyaretçi ile Web sitesi
arasında gerçekleşen bir şeydir. Etkileşimin sağlanması için bir hareket ve bir yanıt gerekir; yani bu
iki yönlü bir iletişim sürecidir. Sayfalarınıza etkileşim eklemeniz (yani ziyaretçilerin eylemlerine
sitenizin vereceği yanıtı belirlemeniz), sitenize yapılan ziyaretlerin karmaşıklık derecesini ve
derinliğini artırabilir. Ziyaretçileri belirli eylemler gerçekleştirmeye ya da katılımda bulunmaya
teşvik eden Web siteleri, kullanıcı üzerinde yaratılan etki açısından, kullanıcıyı pasif bir konumda
tutan sitelere göre muhtemelen daha başarılı ve işlevseldir ve akılda daha çok kalır.
Dreamweaver’da, hiç HTML ya da JavaScript kodu kullanmadan rollover’lar oluşturabilirsiniz.
Rollover, Ekle çubuğunun Ortak kategorisinde yer alan basit bir davranıştır. Bu yöntemi
kullandığınızda, davranış Dreamweaver tarafından oluşturulur.
Sayfanıza Rollover resmi eklemek için öncelikle Ekle panelindeki Ortak sekmesine tıklayın. Bu
panelde daha önce resim eklediğiniz butona tıklayın ve açılan menüden Rollover Görüntüsü
seçeneğini seçin.
Dreamweaver, rollover oluşturma işleminde bu iletişim kutusu aracılığıyla size adım adım yardımcı
olur. Rollover oluşturmak için kullanacağınız resimleri henüz sayfaya yerleştirmediyseniz bu
yöntemi kullanmayı tercih edebilirsiniz, çünkü bu yöntemle aynı anda hem resmi ekleyebilir, hem
de bunu rollover olarak tanımlayabilirsiniz.
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Bir rollover resmi eklemek için ayrıca Ekle > Görüntü Nesneleri > Rollover Görüntüsü komutunu
seçip yine aynı iletişim kutusunu kullanmanız da mümkündür.
Görüntü adı bölümüne bir isim yazarak resmi adlandırabilirsiniz. Buraya bir isim yazmazsanız
Dreamweaver resimleri kendisi adlandıracaktır.
Orijinal Görüntü alanındaki Gözat... butonunu seçerek orijinal resim olarak gözükecek resmi seçin.
Rollover Görüntüsü, imleç orijinal resmin üzerine geldiğinde değişeceği ikincil halinin dosyasıdır.
“Rollover görüntüyü önceden yükle” kutucuğunu işaretlediğinizde ikincil resim daha ona ihtiyaç
olmadan sayfanızın içine ön yükleme ile yüklenir. Böylece kullanıcıların resmin üzerine geldiğinde
ikincil resmin çıkması için beklemesi engellenmiş olunur.
Alternatif metin, resimler için kullandığımız ALT alanı ile aynı işlevi görmektedir.
“Tıklandığında URL’ye git” seçeneği ise resme verdiğiniz linki göstermektedir.
85
86
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Resme eklediğiniz davranışlar, Davranışlar panelinde görülmektedir.
Eğer daha önceden eklenmiş resimleriniz varsa onlara da rollover davranışını ekleyebilirsiniz. Bunun
için yapmanız gereken rollover ekleyeceğiniz resmi seçmek ve Davranışlar panelini açmak olacaktır.
Daha sonra resminiz halen seçili iken Davranışlar panelinden “+” butonuna basarak, “Görüntü
Değiştir” seçeneğini seçmelisiniz.
Açılan iletişim kutusunda seçtiğiniz resim liste içinde seçili olarak karşınıza gelecektir. “Kaynağı
buna ayarla” seçeneğinin yanındaki “Gözat...” butonuna tıklayarak yeni ikincil resminizi
seçebilirsiniz.
Bu eklemiş olduğunuz davranış da, resmi seçtiğinizde, Davranışlar panelinde gözükecektir.
Bir davranışı silmeniz gerekirse, belge penceresinde davranışı içeren nesneyi ve Davranışlar
panelinde silmek istediğiniz eylemi seçin, sonra da Davranışlar panelinin üst kısmındaki eksi (–)
işaretli düğmeye tıklayın. Bir davranışı, seçtikten sonra Backspace tuşuna basarak da silebilirsiniz.
Bir davranış eklediğinizde bu davranışın ortaya çıkması için bir olayın meydana gelmesi gereklidir.
Örneğin kullanıcının imlecini bir resmin üzerine götürmesi yukarıda anlattığımız rollover işlemi
için gerekli bir olaydır. Bu tür olaylara bir tetikleyici olay yada tetik deriz. Rollover davranışını
eklediğiniz resmi seçtiğinizde Davranışlar panelinde soldaki sütunda bu işlemin gerçekleşmesi için
gerekli tetikler görünmektedir. Rollover davranışı için varsayılan tetik onMouseOver, yani farenin
nesnenin üzerine gitmesidir. Ancak isterseniz açılan menüden bu davranışı değiştirebilirsiniz ve
kendi çalışmanıza uygun başka bir tetik seçebilirsiniz.
Sayfanıza bir davranış eklediğinizde bu davranış ile ilgili javascript kodları sayfanızın içine eklenir.
Böylece amaçladığınız etkileşim oluşturulmuş olur. Davranışları ekledikten sonra sayfanızın Kod
görünümüne dönerek davranışlarla ilgili javascript kodlarını inceleyebilirsiniz.
Bir Durum Çubuğu Mesajı Oluşturmak
Durum çubuğu mesajı, kullanıcılara bağlantıların onları nereye götüreceği konusunda ek bilgi
vermek için kullanılabilir. Tarayıcı penceresinin alt kısmındaki durum çubuğunda görünen bu
mesaj, bağlı sayfaya giden URL ya da yolun yerini alır. Oluşturacağınız durum çubuğu mesajı
sadece sayfanın Internet Explorer ya da Mozilla tarayıcılarda açılması durumunda görünür.
Bu mesajın görünmesi için hangi nesneye bu etkileşimi ekleyecekseniz o nesneyi seçmelisiniz (resim,
link yada sayfanın body etiketi). Daha sonra Davranışlar penceresinden “+” işaretine tıklayın ve
“Metni Ayarla > Durum Çubuğu Metni Ayarla” seçeneğini seçin. Açılan iletişim kutusunun içine
gözükmesini istediğiniz mesajı yazdıktan sonra tamam butonuna basarak pencereyi kapatabilirsiniz.
Böylece sayfanızı bu davranışı eklemiş olursunuz.
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Yeni Bir Tarayıcı Penceresi Açmak
Sayfanız içinde en çok kullanabileceğiniz davranışlardan bir tanesi bir linke tıkladığınızda bu linkin
içeriğinin yeni bir pencerede açılmasını sağlamaktır. Bu yeni pencereyi reklamlar, terimler ya da
başka bilgileri görüntülemek için kullanabilirsiniz. _blank hedefini standart bir bağlantı ile birlikte
kullanarak bir tarayıcı penceresi açabilirsiniz, ama bu yeni pencerenin niteliklerini hiçbir şekilde
kontrol edemezsiniz. Diğer yandan, “Tarayıcı Penceresini Aç” seçeneği, yeni tarayıcı penceresinin
büyüklüğü ile birlikte kaydırma çubukları ve menü çubukları gibi çeşitli niteliklerini kontrol
etmenize imkân sağlar.
Tarayıcı Penceresini Aç seçeneğini eklemek kolay olsa da, bunu bir Web sayfasında kullanmadan
önce iyi düşünün. Ekstra bir pencerenin gerekli olduğundan emin olun. Kullanıcılar Web’de
dolaşırken sürekli olarak açılan yeni pencerelerden genellikle rahatsız olurlar. Bunları makul
bir seviyede tutmak önemlidir. Yeni tarayıcı pencereleri oluştururken ya da başka davranışları
kullanırken, ziyaretçilere sunduğunuz geribildirim ya da etkileşim seçeneklerinin miktarını göz
önünde bulundurmayı unutmayın ve çok az (bu durumda kullanıcıya yeterli bilgi sunulmaz) ve
çok fazla (bu da genellikle zorlayıcı olabilir) arasında gereken dengeyi kurun. Ziyaretçilerin Web
siteleriyle ve diğer ortamlarla ilgili daha önceki deneyimlerini anlamanız, onların sitenizi ziyaret
ettiklerinde ve sitenizle etkileşime girdiklerinde karşılaşacakları şeyleri daha iyi belirlemenize
yardımcı olacaktır.
Yeni bir davranış eklemek için Davranışlar panelindeki artı düğmesine (+) tıklayın ve ardından
açılan listeden Tarayıcı Penceresini Aç’ı seçin.
87
88
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Bu işlem sonrasında yeni tarayıcı penceresi iletişim kutusu karşınıza çıkacaktır.
Gezinti araç çubuğu: Aralarında Back (Geri), Forward (İleri), Home (Giriş) ve Reload (Yenile)
düğmelerinin de bulunduğu tarayıcı düğmeleri.
Konum araç çubuğu: Aralarında location (konum) alanının da bulunduğu tarayıcı seçenekleri.
Durum çubuğu: Tarayıcı penceresinin alt kısmında bulunan ve mesajların (kalan yükleme süresi ve
bağlantılarla ilişkili URL’ler gibi) görüntülendiği alandır.
Menü çubuğu: Tarayıcı penceresinin (sadece Windows’ta) File (Dosya), Edit (Düzenle), View
(Görünüm), Go (Git) ve Help (Yardım) gibi menülerin göründüğü alanıdır. Kullanıcıların yeni
pencerede gezinti imkânına sahip olmalarını istiyorsanız bu seçeneği ayarlamanız gerekir. Eğer bu
seçeneği ayarlamazsanız, kullanıcılar yeni pencerede sadece pencereyi kapatma ya da minimum
boyuta getirme seçeneklerine sahip olurlar.
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Gerektiğinde kaydırma çubuklarını görüntüle: İçeriğin görünür alanın dışına taşması durumunda
kaydırma çubuklarının görüntülenmesi gerektiğini belirtir. Bu seçeneği ayarlamadığınız takdirde,
kaydırma çubukları görüntülenmeyebilir. Bunun yanında Yeniden Boyutlandırma Tutamaçları
seçeneğinin etkinliği de kaldırılırsa, ziyaretçiler içeriğin pencerenin orijinal boyutlarına sığmayan
kısmını hiçbir şekilde göremeyebilir. Eğer durum böyleyse, pencerenin sayfanın içeriğine uygun
olacak şekilde boyutlandırıldığından emin olmanız gerekir. Pencerenin çok küçük ya da çok büyük
olması ve kaydırma çubuklarının bulunmaması ziyaretçiler açısından sinir bozucu bir durumdur.
Bazı Web tarayıcıları bu ayarı (yeniden boyutlandırma tutamaçları ayarıyla birlikte) dikkate almaz
ve gerektiğinde kullanır.
Yeniden boyutlandırma tutamaçları: Kullanıcıların pencerenin boyutlarını, pencerenin sağ alt
köşesini sürükleyerek ya da sağ üst köşedeki Maximize (Ekranı Kapla) düğmesine (Windows’ta) veya
boyutlandırma kutusuna (Macintosh’ta) tıklayarak değiştirebilmeleri gerektiğini belirtir. Bu seçeneği
ayarlamadığınız takdirde, boyut değiştirme kontrolleri genellikle kullanılamaz durumda olur ve
kullanıcı pencerenin boyutlarını değiştiremez.
Pencere ismi: Yeni pencerenin ismidir. Yeni pencereyi bağlantılar için hedef olarak tanımlamak ya da
JavaScript ile kontrol etmek istiyorsanız, bu pencereyi adlandırmanız gerekir.
Ajax Eklentileri
Dreamweaver yeni sürümü ile birlikte kolay Ajax uygulamaları geliştirebileceğiniz Spry
Framework özelliği ile gelmektedir. Spry, Adobe tarafından dünya üzerinde en çok kullanılan Ajax
yöntemlerinin içinden özenle seçilmiş bir koleksiyondur.
Dreamweaver içinde gelen Spry aslında bir JavaScript kütüphanesidir. Aynı davranışlar gibi size
birkaç adımda kolay olarak sayfalarınıza Ajax kontrolleri eklemenizi sağlarlar.
Spry Akordeonu, Spry Sekmeli Paneller, Spry Daraltılabilir Panel
Spry kütüphanesi içinde veri ile çalışabileceğiniz özellikler olduğu gibi görsel öğeler de
bulunmaktadır.
Bu görsel öğelerden herhangi birini eklemek için yapmanız gereken Ekle panelindeki Spry grubunu
açmaktır.
89
90
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Spry sekmesinde eklemek Spry Akordeonu butonuna tıklayın. Diğer görsel öğelerin kullanımı da
benzer şekildedir.
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Bu butona bastığınızda sayfanızın içine bir akordeon menü eklenecektir. Bu menü ile sayfalarınız
içinde sınıflandırmak istediğiniz alanları açılır kapanır bir menü şeklinde kullanabilirsiniz.
Sayfanızı Dosya > Kaydet seçeneği ile kayıt ettiğinizde Dreamweaver size bu eklentiyi ilk kez
kullandığınızda ilgili Javascript dosyalarını kopyalamanız gerektiğini söyleyecektir.
Bu pencerede Tamam seçeneğini seçin. Bu dosyalar SpryAssets klasörü altına yerleştirilecektir.
Bu dosyalar SpryAssets klasörü altına yerleştirilecektir. Sitenizi sunucunuza atarken, bu dosyaları
atmayı unutmayın.
91
92
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
Yukarıdaki resimde akordeon kontrolü eklediğinizde sayfanın içeriğini görmektesiniz. Yeni bölümler
eklemek için Paneller başlığının yanındaki + işaretine tıklayabilir var olan bir bölümü silmek için –
işaretine tıklayabilirsiniz. Yukarı ya da aşağı okları ile bölümlerin sırasını değiştirebilirsiniz. F12’ye
basarak dosyanızı varsayılan tarayıcınızda önizleyebilirsiniz.
Diğer Spry görsel panelleri de aynı özelliklere sahiptir.
Bölüm 7
Çoklu Ortam Bileşenlerini Kullanmak, Kullanıcı Etkileşimi ve Ajax Bileşenleri
93
BÖLÜM
8
Formlarla
Çalışmak
Formun Oluşturulması
Form İçeriğini Gruplamak
Tek Satırlı Metin Alanları Eklemek
Radyo Düğmeleri Eklemek
Onay Kutuları Eklemek
Liste ve Menü Öğeleri Eklemek
Çok Satırlı Metin Alanları Eklemek
Buton Eklemek
Gizli Alanlar Oluşturmak
Bölüm 8
Formlarla Çalışmak
K
imi zaman Web sitenizi ziyaret eden insanlardan bilgi almanız gerekebilir. Bu bilgiler
içinde insanların siteyle ilgili düşünceleri, kullanıcı kayıt verileri, anket cevapları ve ürün
satın alma bilgileri (e-ticaret) sayılabilir. Farklı tipte bilgiler toplamaktan ziyaretçilerin siteyle
etkileşime girmesini sağlamaya kadar pek çok işleve sahip olan formlar, veri elde etmenizi sağlayan
kullanıcı arabirimleridir. Formlarla ziyaretçilerinizden belirli konularla ilgili bilgi alabilir ya da
onlara geribildirim, soru ya da istek gönderme imkânı tanıyabilirsiniz. Ziyaretçi kayıt işlemleri
ve ürün siparişleri genellikle formlarla sağlanan bir işlevselliği gerektirir. Formlar veritabanlarıyla
sıkça kullanılır ve ziyaretçilerin arama yapmalarını ve bir veritabanına dahil edilecek bilgileri
göndermelerini sağlayabilir. Formlar alan (field) adı verilen ve ziyaretçinin bilgi girdiği bazı
bileşenler içerir. Bu alanların arasında metin alanlarını, radyo düğmelerini, onay kutularını,
menüleri ya da listeleri sayabiliriz.
Form verileri genellikle bir sunucu üzerinde yer alan bir veritabanına, bir e-posta adresine ya
da kendilerini işleyecek bir uygulamaya gönderilir. Formların işlenmesi, dinamik sayfaların (bu
sayfalar veritabanları gibi dinamik içerik kaynaklarına erişmek için PHP, JSP, ColdFusion vb dilleri
kullanırlar) ya da CGI (Common Gateway Interface) script’lerinin kullanımıyla gerçekleştirilir.
CGI, formdaki verilerle sunucu arasında iletişim bağlantısı olarak görev yapan standart bir
protokoldür. Bu bölümdeki konuların içinde veritabanı yada bir sunucu ile iletişim olmadığından,
sunucu erişimine ihtiyaç duymayacaksınız
Formun Oluşturulması
Bir sayfaya alanlar ve düğmeler gibi elemanlar eklemeden önce bu elemanları içerecek olan
formu oluşturmak gerekir. Form; alanlar, düğmeler, menüler ve ziyaretçilerin bilgi girmek ya
da seçim yapmak için kullandığı diğer nesneler için bir taşıyıcı görevi üstlenir. Formlar ayrıca
gönderildiklerinde verilere ne olacağını belirler. Form nesnelerinin çalışabilmesi için mutlaka bir
form ile çevreli olmaları gereklidir. Bunun için sayfanıza ilk olarak form etiketini yada çevreleyicisini
eklemelisiniz.
Sayfanızın içinde formunuzu ekleyeceğiniz noktayı seçin. Form etiketleri blok elemanları
olduğundan içinde bulundukları çerçevenin (Bir tablo hücresi yada bir div etiketi veya sayfanın
tamamı) tamamını doldururlar. Bu nedenle bir formu başka bir nesne ile yan yana koymak
istiyorsanız iki nesneyi de bir çevreleyicinin (tablo yada div etiketi) içine koymalısınız.
Ekleme noktanıza imlecinizi koyduktan sonra Ekle panelinin Formlar kategorisindeki Form
düğmesine tıklayın.
95
96
Bölüm 8
Formlarla Çalışmak
Bu düğme en soldaki düğmedir. Böylece bir formu sayfanızın içine eklemiş oldunuz. Bu eklediğiniz
sadece formun genel çerçevesidir. İçinde herhangi bir form elemanı barındırmamaktadır.
Bölüm 8
Formlarla Çalışmak
Form tarafından kaplanan alan, belge penceresinde kırmızı noktalı çizgilerle gösterilir. Bu
alan kodda <form> ve </form> etiketleriyle tanımlanır. Söz konusu kırmızı çizgiler sadece
Dreamweaver’da görüntülenen görünmez elemanlardır. Sayfayı bir Web tarayıcısında açtığınızda
form alanını gösteren herhangi bir işaret göremezsiniz. Ayrıca bu kırmızı çizgileri tutup
sürükleyemezsiniz.
Eğer görünmez elemanlar etkin değilse bir mesaj kutusu belirecek ve formu göremeyeceğinizi
belirtecektir. OK düğmesine tıklayarak mesaj kutusunu kapatın ve Görünüm > Görsel Yardımcılar
> Görünmez Öğeler komutunu seçerek formun kırmızı noktalı sınırlarını görüntüleyin. Eğer
görünmez elemanlar etkin durumdaysa bu uyarı mesajını görmezsiniz. Dreamweaver’ın Tercihler
iletişim kutusunda yer alan Görünmez Öğeler kategorisindeki Form Ayırıcı seçeneğinin de işaretli
olması gerekir. Bu seçenek varsayılan durumda işaretlidir.
Bir sayfaya birden fazla form yerleştirebilirsiniz. Ancak HTML’de bir formu diğer bir formun içine
yerleştiremezsiniz. Bu kısıtlamadan dolayı Dreamweaver formların yanlışlıkla iç içe yerleştirilmesini
engeller. Bunu da bir formun diğer formun içine yerleştirilmesini imkânsız kılarak gerçekleştirir.
Form ekleme seçeneği iptal edilmez, ama bir formu diğer bir formun içine yerleştirmeye
kalktığınızda bu işlem gerçekleşmez. Form etiketlerinin başka bir forma elle eklenmesi durumunda
Dreamweaver hatalı etiketleri vurgulayarak dikkatinizi hatanın bulunduğu konuma çeker.
Eklemiş olduğunuz bir form çerçevesini ya da etiketini seçtiğinizde özellikler denetçisinde bu
formun özellikleri gözükür.
Bu pencere içindeki form1 yerinde formunuzun ismini yazabilirsiniz.
Eylem alanı, formunuzun altındaki gönder butonuna (henüz nasıl ekleneceğini söylemedik)
basıldığında sayfanın hangi sayfaya yönleneceğini söylediğimiz yerdir. Bu alana genelde formunuzu
işleyecek ve sunucu ile bağlantılı bir dinamik sayfanın adresini girersiniz. Ancak statik bir sayfa
yaptığınızda ve bir sunucu ile iletişiminiz yoksa buraya mailto:[email protected] gibi bir eposta
adresi girerseniz, form içerikleri ziyaretçinin bilgisayarındaki varsayılan eposta istemcisi aracılığı
(Outlook, Outlook Express, Thunderbird, vb) ile gösterdiğiniz eposta adresine gönderilir.
Dreamweaver formlar için genel tipte isimler oluşturur. Siz her form oluşturduğunuzda bu
formların isimleri sayısal olarak otomatik bir şekilde artar (form1, form2, vb). Bütün form
isimlerinin benzersiz olması ve ayrıca özel karakter içermemesi gerekir. Form isimleri önemli
tanımlayıcılardır (identifier); özellikle de bir sayfada birden fazla form varsa veya form aracılığıyla
istenen ya da toplanan bilgileri içeren bir veritabanı kullanıyorsanız. Form isimleri ayrıca, JavaScript
gibi script dilleri aracılığıyla formları kontrol etmek için de kullanılır.
Tablo, formun yerleşim düzenini geliştirir. Tablo kullanmak, etiketlemek üzere metin ya da
resimlerin form alanlarıyla hizalanmasını kolaylaştırır.
Bir formun içine bir tablo ya da bir tablonun içine bir form yerleştirebilirsiniz. Ama burada söz
konusu tablo, formu tamamen kapsamalı ya da form tarafından tamamen kapsanmalıdır.
97
98
Bölüm 8
Formlarla Çalışmak
Form İçeriğini Gruplamak
Formunuzun içeriğini oluşturmaya başlamadan önce biraz zaman ayırarak içeriğin ayrıntılı bir
taslağını oluşturmanız gerekir. Ziyaretçilerden isteyeceğiniz bilgilerin bir taslağını oluşturduktan
sonra bu bilgileri içerik benzerliğini temel alarak mantıksal gruplara ayırabilirsiniz.
Formunuzun bölümlerini belirledikten sonra formun içinde bu bölümleri oluşturmak için alan
kümelerini (fieldsets) kullanmaya hazırsınız demektir. Alan kümeleri, bir form içinde ayrı ayrı içerik
bölümleri oluşturmak için kullanılan form elemanlarıdır. Formunuzun içeriğini küçük ve bağımsız
bölümler halinde grupladığınızda ziyaretçilerin formu anlaması ve doldurması daha kolay olur.
Böylece ziyaretçileriniz formun genel yapısını hemen kavrayabilirler.
Formunuzun içine grup eklemek için imlecinizi eklemek istediğiniz noktaya tıklatın ve Formlar
kategorisi altından Alan Kümesi’ni seçin.
Fieldset iletişim kutusu açılacaktır. İçine başlığınızı yazın ve Tamam tuşuna basın.
Bir alan kümesi, kullanabileceği bütün alanı kaplayacak kadar genişler. Formlarda olduğu gibi
alan kümesini bir tabloya veya bir tabloyu bir alan kümesine yerleştirmek mümkündür. Ama tablo
alan kümesini tamamen kapsamalı ya da alan kümesi tarafından tamamen kapsanmalıdır. Vermiş
olduğunuz alan başlığı form içinde gözükecek ve kullanıcılarınızın formunuzu kolay anlaması için
kullanılacaktır. Bu nedenle alanlarınıza açıklayıcı başlıklar verin.
Bölüm 8
Formlarla Çalışmak
Tek Satırlı Metin Alanları Eklemek
Metin alanları, ziyaretçinin yazarak girebileceği bilgileri toplamak için kullanılır. Kısa, özlü cevaplar
(bir sözcük ya da sözcük grubu gibi) için tek satırlı metin alanları kullanılır. Normalde kullanılan
tek satırlı metin alanları; ziyaretçinin isim, kısa adres ve e-posta gibi bilgilerini girmesi için
kullanılır. Bu metin alanları ayrıca temel arama işlemleri için de kullanılır. Burada ziyaretçi, ilgili
alana istenen bilgiyi tanımlayan sözcükleri girer.
Bütün form alanlarını ve düğmeleri kırmızı noktalı çizgilerin içine yerleştirmeniz gerekir, aksi
takdirde bunlar formun bir parçası olmaz. Form alanlarını kırmızı çizgilerin dışına yerleştirmeye
kalkarsanız Dreamweaver size bu alanı kapsayan bir form alanı oluşturup oluşturmak istemediğinizi
sorar. Hayır derseniz ilgili alan ya da düğmeler herhangi bir formun bir parçası olarak işlev görmez.
Formunuza tek satırlı bir metin alanı eklemek için Formlar panelinden metin alanı seçeneği seçin.
Herhangi bir form nesnesi eklediğinizde Erişilebilirlik Özellikleri penceresi açılabilir. Bu pencere
formlarınızın erişilebilir olması için kullanabileceğiniz özellikleri barındırır.
99
100
Bölüm 8
Formlarla Çalışmak
Bu pencerede ilgili alanları doldurabilir yada İptal seçeneğine tıklayarak devam edebilirsiniz. Eğer
Dreamweaver Girdi Etiketi Erişebilirlik Nitelikleri iletişim kutusunu otomatik olarak açmazsa, form
nesneleri için erişilebilirlik özelliklerini etkinleştirmeniz gerekebilir. Bunun için Düzen > Tercihler
komutunu seçin. Erişebilirlik kategorisine geçin ve Form nesneleri onay kutusunu işaretleyin.
Bölüm 8
Formlarla Çalışmak
Sonra da Tamam düğmesine tıklayın. Eğer her seferinde bu iletişim kutusu ile uğraşmak
istemiyorsanız bu özelliği kapatmak için bu sefer ilgili alanlardaki işareti kaldırmanız yeterli
olacaktır.
Formunuza tek satırlı metin alanını ekledikten sonra ona ait özellikleri değiştirebilirsiniz. Bunu
yapabilmek için metin kutusuna tıkladıktan sonra özellikler penceresi içinde özelliklerini belirleyin.
En soldaki kutucuk içinde yer alan textfield kelimesi yerine bu alanı form içinde eşsiz (tekil) olarak
niteleyecek bir ismi özel karakterler olmadan ve Türkçe karakterleri(çÇöÖşŞğĞüÜıİ) kullanmadan
yazın.
Karakter alanı bu metin kutusunun aynı anda kaç karakteri gösterebileceğini ayarladığınız
seçenektir.
Maks kar, bu metin kutusunun içinde en fazla kaç karakter barındırabileceğini belirttiğiniz alandır.
Bu alandaki rakam ile karakter alanındaki rakamlar birbirinden farklı olabilir. Örneğin bir metin
kutusu aynı anda 10 karakter gösterebilirken, içinde en fazla 20 karakter bulundurabilir. Bu
durumda bu alanı dolduran ziyaretçiler yazmaya devam ederken yazılar sola doğru kayacaktır.
Yazım seçeneği bu alanın tek satırlı mı yoksa çok satırlı mı olacağını seçtiğiniz alandır. Burada
aynı zamanda bu alanı bir şifre alanı olarak da gösterebileceğiniz bir seçenek bulunmaktadır. Şifre
seçeneğini seçerseniz metin alanının içine yazılan yazıların yerinde noktalar gözükecektir.
Başlangıç değeri, seçeneği ile bu alanın, sayfa ilk yüklendiğinde hangi metinle dolacağını
seçebilirsiniz.
Radyo Düğmeleri Eklemek
Radyo düğmelerini (radio buttons) kullanıcıların bir dizi seçenek arasından sadece birini seçmesini
istediğiniz durumlarda kullanırsınız. Bir seçeneği işaretlediğinizde diğer seçenekler otomatik
olarak geçersiz kılınır. Radyo düğmeleri genellikle kredi kartı seçimi ve Evet ya da Hayır şeklinde
cevaplanan sorular için kullanılır. Bir radyo grubu eklemek için Formlar panelinde Radyo Grubu
butonuna tıklayın. Radyo Grubu iletişim kutusu açılacaktır. Bu penceredeki etiket alanları
sayfa içinde ziyaretçilerin göreceği değerleri, Değer alanı ise sayfa ile gönderilecek değerleri
göstermektedir. Eğer bu grubun satır atlatılarak sıralanmasını istiyorsanız, satır kesmelerini, tablo
ile gösterilmesini istiyorsanız Tablo seçeneğini seçmelisiniz.
101
102
Bölüm 8
Formlarla Çalışmak
Varsayılan durumda her grup (Radyo Grubu) en az iki radyo düğmesi içerir. İstediğiniz kadar radyo
düğmesi ekleyebilir, silebilirsiniz. Girişleri seçip ok tuşlarının yardımıyla listede yukarıya ya da
aşağıya doğru taşıyarak girişlerin sıralamasını da değiştirebilirsiniz.
Bir form gönderildiğinde buradaki değerler, sunucuda formu işleyen script’e gönderilir.
Ziyaretçinin hangi seçeneği işaretlediğini anlayabilmek için her bir radyo düğmesine farklı bir değer
verdiğinizden emin olun.
Onay Kutuları Eklemek
Onay kutuları (checkboxes), ziyaretçilerin birbiriyle alâkalı bir grup öğe arasından bir ya da birden
fazla öğe seçmesini sağlar. Ziyaretçinin istediği sayıda seçeneği işaretleyebilmesine izin vermek
istediğiniz yerlerde genellikle onay kutularını kullanırsınız.
Bölüm 8
Formlarla Çalışmak
Eğer ziyaretçinin sadece tek bir seçenek işaretlemesini istiyorsanız, bundan sonraki uygulamada
olduğu gibi radyo düğmelerinden faydalanırsınız. Onay kutusu eklemek için Ekle araç çubuğunun
Formlar kategorisinde yer alan Onay kutusu düğmesine tıklayın.
Liste ve Menü Öğeleri Eklemek
Kaydırılabilir bir liste (scrolling list) ya da menü oluşturarak ziyaretçilerin buradaki öğelerin
arasından seçim yapmasını sağlayabilirsiniz. Kaydırılabilir bir listeyle ziyaretçilerinize birden
fazla bitişik ya da bitişik olmayan öğeyi seçme imkânı tanıyabilirsiniz. Menülerde ziyaretçiler tek
bir seçim yapabilir. Bunların her ikisinde de, ziyaretçinin seçtiği öğeler vurgulu hale gelir. Liste
veya menü öğeleri eklemek için Ekle araç çubuğunun Formlar kategorisinde yer alan List/Menu
düğmesine tıklayın.
103
104
Bölüm 8
Formlarla Çalışmak
Eklediğiniz form nesnesine tıkladığınızda karşınıza bununla ilgili özellikler denetçisi çıkacaktır.
Tür alanında bu form elemanının Menü mü Liste mi olacağını seçebilirsiniz. Liste olan nesneler
aynı anda birden fazla içeriği gösterebilirler ve bunların içinden birden fazlası aynı anda seçilebilir.
Yükseklik değeri eğer tür olarak Liste’yi seçerseniz aktif olacaktır.
Çokluya izin ver seçeneği de yine eğer tür olarak Liste’yi seçerseniz aktif olacaktır.
Liste değerleri butonu ile bu listenin içini dolduracak değerleri seçebilirsiniz.
Başlangıçta seçili seçeneği ile sayfanız yüklendiğinde formunuzun içinde başlangıç olarak hangi
değerin seçili olduğunu ayarlayabilirsiniz
Çok Satırlı Metin Alanları Eklemek
Ziyaretçilerin metin girebileceği birden fazla satıra sahip metin alanları aracılığıyla
ziyaretçilerinizden daha büyük miktarda bilgi alabilirsiniz. Çok satırlı metin alanları genelde
ziyaretçilerden yorum ve geribildirim almak için kullanılır. Çok satırlı bir metin alanını Ekle > Form
> Metin Bölgesi komutunu seçerek de ekleyebilirsiniz.
Bölüm 8
Formlarla Çalışmak
Çok satırlı metin alanları ile tek satırlı metin olanlarının özellikleri birbirine benzemektedir. Çok
satırlı metin alanlarında ek olarak Sar(wrap) seçeneği ve satır sayısı seçeneği bulunmaktadır.
Sar (wrap) menüsündeki seçenekler şunlardır: Varsayılan(Default), Kapalı(off), Sanal(virtual) ve
Fiziksel(physical).
Varsayılan seçeneği, tarayıcının varsayılan ayarını kullanır. Yazım alanında Çok Satırlı’yı
işaretlediğinizde otomatik olarak bu seçenek ayarlanır.
Kapalı seçeneği, metnin bölünerek bir sonraki satıra geçmesini engeller. Metin, siz Return ya da
Enter tuşuna basana kadar aynı satırda devam eder. Ziyaretçi yazarken metin görünebilir alanın
sınırını aştığında sola doğru kayar.
Sanal seçeneği, metni bölerek bir sonraki satırdan devam etmesini sağlar. Ama sözcük sarma özelliği,
form gönderildiği zaman verilere uygulanmaz.
Fiziksel seçeneği, metni bölerek bir sonraki satırdan devam etmesini sağlar ve sözcük sarma özelliği,
form gönderildiğinde verilere uygulanır.
Buton Eklemek
Formlarda, biri form verisini göndermek (Gönder-Submit), diğeri de formu temizlemek (TemizleReset) için olmak üzere genellikle iki düğme kullanılır. Gönder(Submit) düğmesi Web tarayıcısına
veriyi göndermesi gerektiğini bildirir. Temizle(Reset) düğmesi ise sayfadaki alanlarda bulunan
bütün bilgileri siler. Temel arama işlevi için oluşturulan bir formda genellikle sadece tek bir
Gönder(Submit) düğmesi bulunur. Bu da çoğunlukla Ara ya da Git şeklinde adlandırılır. Sayfanıza
bir buton eklemek için yapmanız gereken imlecinizi formunuzun içinde uygun bir yere koyduktan
sonra, formlar sekmesinden buton elemanını eklemektir.
Butonun işlev özelliklerini değiştirebilirsiniz. Bir butonun Gönderme, silme yada görevsiz
özelliğinde olmasını ve içinde yazacak olan başlık yazısını özellikler denetçisinden ayarlayabilirsiniz.
105
106
Bölüm 8
Formlarla Çalışmak
Gizli Alanlar Oluşturmak
Kimi zaman formunuza, ziyaretçiler tarafından görülmeyen ya da ziyaretçi tarafından doldurulacak
bazı bilgileri dahil etmeniz gerekebilir.
Böyle durumlarda Web tarayıcısında görüntülenmeyen gizli alanlardan faydalanabilirsiniz. Gizli
alanlar (hidden fields) genellikle, formun işlenmesi için (isim, sipariş numarası ya da satılan ürünle
ilgili başka bir bilgi almak, form bir e-posta adresine gönderilecekse bir e-posta adresi ve konu
başlığı eklemek, formu doldurduktan sonra ziyaretçilerinizi yönlendirmek istediğiniz bir sayfanın
URL’sini dahil etmek, bilgileri bir formdan başka bir forma aktarmak ya da belirli alanların ziyaretçi
tarafından doldurulmasını sağlamak için) belirli bilgiler gerektiğinde sunucu taraflı script’lerle
birlikte kullanılır. Böyle durumlarda gizli alanların işlenebilmesi için sunucu taraflı script’ler (server
side scripting) gerekir. Sunucu taraflı script’lerin gerekmediği ya da kullanılamadığı durumlarda gizli
alanlarla birlikte JavaScript de (istemci taraflı script olarak da bilinir) kullanılabilir. İstemci taraflı
script (client side scripting) kullanımında script’leri ziyaretçinin Web tarayıcısı (istemci) işler. Gizli
alan eklemek için Formlar sekmesinden gizli alan butonuna basmalısınız.
Bölüm 8
Formlarla Çalışmak
107
BÖLÜM
9
Şablonlar
Şablon Oluşturmak
Bir Şablona Düzenlenebilir Alanlar Eklemek
Belirli Bir Şablonu Temel Alan Sayfalar Hazırlamak
Şablonda Değişiklik Yapmak
Bölüm 9
Şablonlar
Ş
ablon (template), diğer belgeleri oluşturmak için temel olarak kullanabileceğiniz bir belgedir.
Şablon kullanılarak oluşturulan her belge, bu şablonla aynı yerleşim düzenini ve yapıyı kullanır.
Bir şablon oluşturulurken, bu şablonu temel alan belgelerde düzenlenebilir durumda olması
gereken alanların gösterilmesi gerekir. Şablonun diğer kısımları kilitli durumdadır ve ebeveyn
şablon tarafından kontrol edilir. Şablonlar, birden fazla sayfanın yapısını ve içeriğini güncellemek
için kullanılabilecek hızlı bir yol sunmaları açısından kütüphane öğelerine benzer. İster pek çok
bölümden oluşan büyük bir Web siteniz, ister ortak bir tasarımı kullanan birden fazla sayfanız
olsun, bir şablon oluşturarak prodüksiyon sürecini hızlandırabilirsiniz. Bir şablon kullanırsanız,
birkaç dakika içinde birden fazla sayfada değişiklik yaparak sitenizin görünümünü değiştirebilir ya
da güncelleyebilirsiniz. Sitenin belirli bir bölümünü hazırlayan bir ekiple çalıştığınız durumlarda
şablonlar çok faydalı olur. Web tasarımcısı bir şablon oluşturabilir ve sayfanın düzenlenebilecek olan
kısımlarına yer tutucular ekleyebilir. Sayfanın genel tasarımı kilitli durumda kalır. Ekip üyeleri, bir
şablonu temel alıp Adobe Dreamweaver ya da Adobe Contribute kullanarak sayfaları hazırlayabilir
ve düzenleyebilirler. (Adobe Contribute, Web sitelerini oluşturma konusunda çok az deneyime
sahip olan ya da hiç deneyimli olmayan içerik editörleri gibi teknik konularla ilgilenmeyen
kullanıcılara yönelik bir programdır.)
Şablonların avantajları iki durumda net olarak ortaya çıkar: Bir bölüm ya da sayfa grubunda aynı
tasarımın ve yerleşim düzeninin kullanılması gereken durumlarda ya da sayfanın görünümünün
tasarımcı tarafından oluşturulduğu, ama sayfa içeriklerinin içerik editörleri tarafından eklendiği
durumlarda.
Şablon Oluşturmak
Şablonlar, sayfaların yerleşim düzenini ve tasarımını tanımlar. Bir şablon oluştururken uygulamanız
gereken ilk adım, genellikle sayfa tasarımının hazırlanmasını içerir.
Şablonlarla tasarım yaparken öncelikli olarak boş bir HTML sayfası oluşturmalı ve bu sayfayı
Şablon olarak kayıt etmelisiniz (Dosya > Şablon Olarak Kayıt Et). Bu seçenekten sonra karşınıza
çıkan iletişim kutusundan şablonu kaydetmek istediğiniz siteyi seçebilirsiniz. Dreamweaver
otomatik olarak şablona bir isim verecektir. Siz isterseniz bunu değiştirebilirsiniz. Şablonun ismini
değiştirmek istiyorsanız, yeni ismi Save As (Farklı Kaydet) metin alanına yazın. Şablonun ismi
sadece ekibiniz ve sizin için bir referans niteliğindedir. Bu ismi sitenizin ziyaretçileri görmeyecektir.
Şablonlarınız için mümkün olduğu kadar açıklayıcı isimler kullanmaya gayret edin. Kaydet
düğmesine tıklayarak iletişim kutusunu kapatın. Dreamweaver “Bağlantıları Güncelleyeyim mi?”
diye soran bir uyarı kutusu görüntülediğinde Evet düğmesine tıklayın.
Bağlantıların güncellenmesi, Dreamweaver’ın bağlantılara ve resimlere giden yolları doğru olarak
muhafaza etmesini sağlayacaktır.
Artık şablonunuz sitenize eklendi ve .dwt uzantısıyla Templates klasörüne kaydedildi. Templates
adında bir klasör mevcut değilse, Dreamweaver bu klasörü otomatik olarak ekler. Templates
klasörünü görmek için, Dosyalar panelindeki Yenile (Refresh) düğmesine tıklamanız gerekebilir. Bu
dosyayı bir sonraki uygulamada kullanmak üzere açık bırakın.
Bir Şablona Düzenlenebilir Alanlar Eklemek
109
110
Bölüm 9
Şablonlar
Bir şablonun oluşturulmasında ikinci adım, bu şablon temel alınarak oluşturulan belgelerde
düzenlenebilir durumda olması gereken alanları tanımlamaktır. (Düzenlenebilir alanlar, belgenin
şablon temel alınarak oluşturulan sayfalardaki değiştirilebilen bölümleridir.)
Kural olarak, bir şablondaki bütün alanlar başlangıçta kilitli durumdadır. Şablonu kullanan
sayfalardaki bilgileri değiştirmek istiyorsanız, düzenlenebilir alanlar ya da bölgeler oluşturmanız
gerekir. Birçok Web sitesinde, bu bölgeler genellikle içerik alanlarıdır. Şablonda açıkça
düzenlenebilir olarak tanımlanmayan her şey, şablonu temel alan sayfalarda kilitli durumdadır.
Orijinal şablonu düzenlerken hem düzenleyebilir, hem de kilitli alanlarda değişiklik yapabilirsiniz;
ama şablon kullanılarak hazırlanmış olan bir sayfada sadece düzenlenebilir bölgelerde değişiklik
yapabilirsiniz.
Bir şablona düzenlenebilir alan eklemek için şablon içinde içerik geliştiriciler tarafından
düzenlenebilir alana imlecinizle tıklamanız yada bu bir tablo yada hücre ise bu nesneyi seçmeniz
gereklidir. Bu seçimi yaptığınız alan düzenelenebilir alan olarak atandığında şablondaki
değişikliklerden etkilenmeyecektir. Sadece bu alanın dışındaki bölgeler orijinal şablon değiştiğinde
değişecektir. İstediğiniz alanı seçtikten sonra yapmanız gereken Ortak sekmesinden Şablonlar
butonu altındaki Düzenlenebilir Bölge butonuna basmaktır.
Böylece imlecinizin bulunduğu yer yada tablo artık düzenlenebilir bir alan olarak kullanılacaktır.
Düzenlenebilir alanlarınıza anlamlı bir isim verirseniz sonraki aşamalarınızda işiniz kolay olacaktır.
Düzenlenebilir alan başlıkları görünmez nesnelerdir yani ziyaretçiler tarafından görünmezler.
Bölüm 9
Şablonlar
Belirli Bir Şablonu Temel Alan Sayfalar Hazırlamak
Şablonların kullanıldığı bir site oluşturma sürecinde bir sonraki adım, orijinal şablonu temel alan
sayfaları oluşturmaktır.
Bu uygulamada, bu dersin daha önceki uygulamalarında oluşturduğunuz teacher şablonunu
kullanan yeni sayfalar oluşturacaksınız. Orijinal şablonun içeriği bu sayfalarda da yer alacaktır. Bu
yeni sayfalarda sadece şablonda düzenlenebilir olarak tanımladığınız kısımları değiştirebilirsiniz.
Dosya > Yeni komutunu seçin. Bu pencerede yer alan Şablondan Sayfa sekmesine tıklayın. Örnek
olarak tanımladığımız “Kitap Evi” sitesi, seçili site için oluşturduğunuz örnek “diğer” şablonu ve
şablonun kendisi görünecektir. Şablonu seçin ve Oluştur butonuna tıklayın.
Yeni sayfada, kilitli bölgelere ait vurgu renginin (varsayılan renk açık sarıdır) sayfayı çevrelediğini
göreceksiniz. Ayrıca, belge penceresinin sağ üst köşesinde aynı renkteki bir sekmede şablonun ismini
de göreceksiniz.
Üzerine getirdiğinizde ya da kilitli bölgelerden birine tıklamayı denediğinizde, imleç, ortasından
çizgi geçen bir daireye dönüşür. Bu da söz konusu alanların düzenlenemeyeceğini gösterir.
Bazen metnin biçimlendirilmesi tablonun genişlemesine neden olur. Stili daha küçük boyutlu
metinler kullanan bir stille değiştirirseniz, normal bir belgede yaptığınız gibi tablonun dışına
tıklayıp tabloyu tekrar küçülterek uygun büyüklüğe getirmeniz mümkün olmaz. Bu belge bir
şablon kullanılarak oluşturulduğundan, tabloların büyüklük açısından içeriklerine uygun şekilde
ayarlanabilmesi için dosyayı kapatıp yeniden açmanız gerekir. Yeni bir stil oluşturmadan bu
belgedeki metnin büyüklüğünü değiştiremezsiniz, çünkü metni tanımlayan dahili stil sayfası
düzenlenebilir durumda değildir.
Şablonda Değişiklik Yapmak
Bir şablon yardımıyla, bu orijinal şablonun tasarımını kullanan sayfaları çok kolay bir şekilde
hazırlayabilirsiniz. Sayfayı oluşturan kişi sayfadan sayfaya farklılık gösterecek olan içeriği ekleyebilir,
fakat kilitli alanların hiçbirinde değişiklik yapamaz.
Şablon kullanılarak hazırlanan sayfaların hepsinde değişiklik yapmanız gereken durumlarda,
şablonlar size ciddi ölçüde zaman kazandırır. Şablon kullanmıyorsanız, her bir sayfayı tek tek
düzenlemeniz gerekir. Şablon kullandığınızda ise, şablondan oluşturulmuş bütün sayfaları
güncellemek için sadece orijinal şablon dosyasını düzenlemeniz yeterlidir.
Şablonlardan oluşturduğunuz sayfalarda kilitli alanları değiştiremezsiniz. Bunun için bu
değişikliklerinizi şablon içinde yapmalısınız. Şablon dosyanızı templates klasörü içinde bulup
Dreamweaver’da açın. Açılmış olan dosya üzerinde gerekli değişiklikleri yaptıktan sonra onu tekrar
Dosya > Kaydet seçeneği ile kayıt edin. Bu işlemden sonra Dreamweaver size bu şablona bağlı
dosyaların olduğunu yaptığınız değişikliğin onlara da etki edip etmesini istemediğinizi soracaktır.
Bu durumda uygula derseniz şablondan oluşturulmuş tüm dosyalara bu değişiklikler uygulanacaktır.
Eğer İptal seçeneğini seçerseniz o zaman bu değişiklikler uygulanmadan atlanacaktır. Bu durumda
şablonunuzla, bu şablondan oluşturduğunuz sayfalar arasında uyumsuzluk oluşacaktır.
111
BÖLÜM
10
Siteyi
Yönetmek
Dosyalar Panelini Kullanmak
Bölüm 10
Siteyi Yönetmek
B
ir Web sitesi geliştirme süreci genellikle planlama aşmasıyla başlar. Bu aşamada siteyle ilgili
genel fikri oluşturur, site dosyalarını ve gezinti yapısını hazırlar, içeriği toplar, ayrıca sitenin
görünümünü ve ziyaretçiler üzerinde nasıl bir etki yaratmak istediğinizi tasarlarsınız. Bu hazırlık
adımları genellikle Dreamweaver’da çalışmaya başlamadan önce gerçekleşir. Planlama aşamasını
üretim aşaması takip eder.
Web geliştirme sürecinin hayatî bileşenlerinden biri olan site yönetimi, bir sitenin sürekli
olarak kullanılabilmesi açısından çok önemlidir. Dreamweaver, yerel kök klasörünüzde ve uzak
sunucuda bulunan site dosyalarının devamlılığını sağlayarak Web sitenizi kolayca güncellemenizi
ve kontrol etmenizi sağlayan pek çok yönetim aracı sunar. Dreamweaver, dosyalarınızı izlemek
için site tanımlarını kullanır ve burada devamlılık sağlama işlemlerini (dosyaların ve klasörlerin
taşınması, eklenmesi, silinmesi gibi) gerçekleştirmek üzere site araçlarını kullandığınızda
güncellemelerin otomatik olarak yapılmasını sağlar. Bir ekibin iş akışını yönetmek, ekip çalışmasını
ve işbirliği çabalarını koordine etmeye yönelik çeşitli araçlarla gerçekleştirilebilir. Dreamweaver
aracılığıyla birden fazla Web sitesini yönetebilir, site ayarlarını içeriye ve dışarıya aktarabilir,
hatta site hazırlamak zorunda kalmadan sunucularla bağlantı kurarak hızlı aktarma işlemleri
gerçekleştirebilirsiniz.
Dosyalar Panelini Kullanmak
Dosyalar paneli (sitenizin dosya ve klasör yapısını gösterir), kenetlenmiş bir panel olarak ya da
genişletilmiş modda daha büyük bir pencere olarak görüntülenebilir. Dosyalar panelini dosya ve
klasörlerin eklenmesi, silinmesi, yeniden adlandırılması ve taşınması gibi çeşitli devamlılık sağlama
işlemlerini gerçekleştirmek için daraltılmış ya da genişletilmiş görünümde kullanabilirsiniz.
Devamlılık sağlamayla ilgili bütün işlemleri Dreamweaver içinde gerçekleştirerek gerektiğinde
bağlantılar, resimler ve diğer elemanlara ait yolların otomatik olarak güncellenmesini sağlarsınız.
Dreamweaver, yaptığınız değişiklikleri izler ve tanımlanmış bir sitede yapılan bütün değişiklikleri
temel alarak dosyalarınızı günceller. Dosya ya da klasör değişikliklerini Finder (Macintosh’ta),
Bilgisayarım (Windows’ta) veya Windows Explorer File Manager’da (Windows’ta) yaparsanız,
Dreamweaver’ın dosya bilgilerini güncellemek için Yenile (Refresh) düğmesini kullanmadığınız
takdirde Dreamweaver bu değişiklikleri tanımaz ve yolları doğru şekilde takip edemez.
Varsayılan durumda Dosyalar paneline başlangıçta daraltılmış görünümde erişebilirsiniz. Bu
moddayken panel Dosyalar panel grubunda Varlıklar paneline kenetlenmiş durumdadır ve sadece
yerel dosyalar görünür. Dosyalar paneli bir araç çubuğuyla birlikte site devamlılığını sağlama
işlevlerine sahip pek çok bağlam menüsü seçeneği içerir. Göster menüsü, tanımladığınız herhangi
bir siteye ya da bilgisayarınıza geçmenizi sağlar. Panelin üst kısmında yer alan Görünüm menüsünü
kullanarak Yerel Görünüm, Uzak Görünüm, Test Sunucusu ve Eşlem Görünüm seçenekleri arasında
geçiş yapabilirsiniz.
113
114
Bölüm 10
Siteyi Yönetmek
Yerel dosyalarınız Dosyalar panelinin sağdaki bölmesinde (Yerel Görünüm) yer alır. Dosyalar
panelini genişlettikten sonra Genişletme/Toparlama düğmesine tıklayarak tekrar Dosyalar panel
grubu haline getirebilirsiniz.
Bölüm 10
Siteyi Yönetmek
Bu aşamada Dosyalar panel penceresinin sol bölmesinde (Uzak Görünüm) bir Yardım metni
görüntülenecektir. Bu metinde Web sunucunuzdaki mevcut dosyaları görebilmek için bir uzak
site tanımlamanız gerektiği belirtilir. Bölmelerin büyüklüğünü, onları ayıran çubuğu sürükleyerek
ayarlayabilirsiniz.
Dosyalar panelindeki temel araçlar, Dosyalar araç çubuğu üzerinde yer alır.
Göster menüsü, tanımladığınız bütün siteleri görüntüler ve bilgisayarınızdaki diğer dosyalara erişme
ve uzak sitelere hızlı bir şekilde bağlanma imkânı sağlar. Belirli bir siteyi açmak için menüden ilgili
siteyi seçmeniz yeterlidir.
Uzak ana bilgisayara bağlanma düğmesi, uzak siteye bağlanmanızı ya da bu bağlantıyı kesmenizi
sağlar. Henüz bir uzak site tanımlamadığınız için bu düğmeye tıkladığınızda Site Tanımlaması
iletişim kutusu açılır. Varsayılan durumda Dreamweaver bir uzak FTP sitesiyle kurulan bağlantıyı,
30 dakikadan fazla boş kalma durumunda keser.
Yenile düğmesi, beklediğiniz şeyi yapar. Yani yerel ve uzak dizin listelerini tazeler. Dosya listelerinde
yapılan bütün değişiklikler Yenile düğmesine tıklandıktan sonra görüntülenir.
Üç düğmeden oluşan grup, üç farklı görünüm seçeneği sunar: Site Dosyaları, Test Sunucusu ve Site
Eşlemi. Etkin görünüm vurgulanır. Burada varsayılan görünüm seçeneği Site Dosyaları’dır.
Dosyaları Al düğmesi, seçili dosyayı ya da dosyaları uzak siteden yerel klasörünüze kopyalar. Bunu
yaparken mevcut yerel kopyaları siler.
Dosyaları Koy düğmesi, seçili dosyayı ya da dosyaları yerel klasörden uzak siteye kopyalar. Bunu
yaparken mevcut uzak kopyaları siler.
Dosyaları Teslim Al düğmesi, seçili dosyayı ya da dosyaları uzak sunucudan yerel klasörünüze
kopyalar. Bunu yaparken mevcut kopyaları siler. Dosya daha sonra sunucuda “alındı” (checked out)
şeklinde işaretlenir. Teslim Al/Teslim Et özelliği Web sitesinde bir ekiple işbirliği içinde çalışırken
çok faydalı bir araçtır. Bir dosyanın bu şekilde işaretlenmesi durumunda Dreamweaver hiç kimsenin
bu dosyayı düzenlemesine izin vermez.
Teslim Al düğmesi seçili dosyayı ya da dosyaları yerel klasörden uzak sunucuya kopyalar. Bunu
yaparken mevcut uzak kopyaları siler. Uzak sunucudaki dosya diğer elemanlar tarafından
düzenlenebilir. Dosyanın yerel klasörünüzde (genellikle bilgisayarınızda) bulunan kopyası salt
okunur hale gelir ve siz onu almadıkça (Teslim Et) düzenlenemez.
Senkronize Et seçeneği dosyaları yerel ve uzak klasör arasında senkronize hale getirir.
Menü seçenekleri olan Dosya, Düzen, Görünüm ve Site, genişletilmiş Dosyalar panelinin sağ
üst köşesindeki bağlam menüsünde (Macintosh’ta) veya genişletilmiş Dosyalar panelinin sol üst
tarafında (Windows’ta) yer alır. Bağlam menüsü hem Macintosh’ta, hem de Windows’ta Files
panelinin daraltılmış görünümünde (Files panel grubunun sağ üst köşesinde yer alır) bu menülere
erişim sağlar.
Dosyalar panelinde iken dosyaları bir klasörden diğerine taşıdığınızda Dreamweaver bu dosyalara
olan linkleri otomatik olarak düzenlemek için sizden izin ister. Bu durumda Güncelle seçeneğini
seçerek bu düzenleme için izin vermelisiniz.
115
116
Bölüm 10
Siteyi Yönetmek
Daha önce bir yerel site oluşturmuştunuz. Bu, sabit diskinizde bulunan ve siteniz için gereken
bütün klasörleri ve dosyaları içeren bir klasördü. Fakat kendi sitelerinizi geliştirirken, üretim
aşamasını tamamladıktan sonra Web sayfalarınızın ziyaretçiler tarafından görülebilmesi için yerel
dosyalarınızı bir uzak siteye kopyalamanız gerekecektir. Uzak site genellikle host’unuz, Web
yöneticiniz ya da istemciniz tarafından belirlenen bir sunucuda bulunur. Bu site ayrıca yerel bir ağda
da bulunabilir.
Siteyi bir canlı sunucuya aktarmak (ideali, bu iş için sitenin bulunduğu sunucuyu kullanmaktır) ve
her şeyin beklendiği şekilde çalıştığını görmek için bu siteyi test etmek iyi olacaktır. Siteyi farklı bir
konuma aktardığınız için bazı şeylerin önceki konumda olduğu gibi çalışmama ihtimali her zaman
mevcuttur. Bu tür sorunların olup olmadığını, siteyi ziyaretçilerin ya da siteyi görmesi istenen
kişilerin kullanımına açmadan önce belirlemek ve eğer varsa bu sorunları çözmek en iyisidir.
Site > Siteleri Yönet komutunu seçin. Açılan menüden düzenleme yapmak istediğiniz siteyi seçin
ve Düzenle butonuna basın. Açılan pencerede gelişmiş seçeneğini seçin. İletişim kutusunun sol
tarafındaki Kategori listesinden Uzak Bilgileri’ni seçin.
Site Tanımlaması iletişim kutusunun Uzak Bilgileri bölümünde, Dreamweaver’a hangi uzak siteye
bağlanması gerektiğini ve bu uzak sitenin niteliklerini bildirmek için gereken bilgileri girersiniz.
Geçerli seçenek Yok (None) tur. Burada eğer sunucunuz yerel ağınızda ise yerel/Ağ seçeneğini
seçmelisiniz.
Eğer bir FTP sunucusuna bağlanacaksanız o zaman FTP seçeneğini seçmelisiniz. Aşağıdaki
adımlarda uzak FTP (File Transfer Protocol) sitesini taklit etmek için bir klasör oluşturacaksınız. Bu
işlem, bir uzak sunucuya erişmek zorunda kalmadan Dosyaları Al ve Dosyaları Koy fonksiyonlarıyla
ilâve site yönetimi fonksiyonlarını kullanmanızı sağlar.
FTP erişimi, uzak bir sitedeki dosyaları almak ya da bu siteye dosya göndermek için sık kullanılan
bir yöntemdir. Bu bölümü tamamlarken bir uzak site erişiminiz olamayabilir. Bu yüzden aşağıdaki
bilgiler sadece referans olması amacıyla verilmiştir. Bu seçenekleri doğru olarak ayarlamak için ağ
yöneticinize ya da sunucu firmanıza başvurun. Aşağıdaki seçeneklere, Site Tanımlaması iletişim
kutusunun Uzak Bilgiler bölümündeki Erişim menüsünden FTP’yi seçerek ulaşabilirsiniz.
FTP host: Web sunucunuzun host adı (adobe.com gibi).
Ana Bilgisayar Dizini: Uzak sitede, ziyaretçiler tarafından görünen belgelerin saklandığı dizin (site
root yani sitenin kök dizini olarak da bilinir.
Oturum Aç ve Şifre: Sunucudaki kullanıcı adınız ve şifreniz. Kaydet onay kutusunun işaretini
kaldırırsanız, uzak siteye her bağlanışınızda sizden şifre girmeniz istenir.
Pasif FTP Kullan: Bu seçeneği, bilgisayarınızla sunucu arasında bir güvenlik varsa kullanırsınız. Bu
seçenek de varsayılan durumda işaretli değildir.
Güvenlik Duvarı: Bu seçeneği, uzak sunucuya bir güvenlik duvarı arkasından bağlanıyorsanız
kullanırsınız. Bu seçenek de varsayılan durumda işaretli değildir. Güvenlik duvarı ayarları
Dreamweaver’ın Tercihler iletişim kutusunda bulunur. Güvenlik Duvarı Ayarları düğmesine
tıklayarak buraya hemen ulaşabilirsiniz.
Bölüm 10
Siteyi Yönetmek
Güvenli FTP Kullan (SFTP): Bu seçeneği, bir SFTP sunucunuz varsa kullanırsınız. SFTP sunucusu
güvenli bağlantılar oluşturmak için şifreleme özelliğini kullanır. Bu seçenek de varsayılan durumda
işaretli değildir.
Bu bağlantıyı sağladıktan sonra sunucuya dosyalarınızı atmak için Yukarı mavi oka (Dosyaları koy),
sunucudan dosyaları almak için ise aşağı yeşil oka (dosyaları al) basmalısınız.
117
Web Tasarımının
Temelleri
12 - XML
Öğr.Gör. Serkan KORKMAZ
Harran Üniversitesi
Birecik Meslek Yüksekokulu
1
GİRİŞ
Günümüzde iletişim yaşamın vazgeçilmez bir parçasıdır.
Herkesin ortak bir dili kullanması için çeşitli denemeler yapılmıştır.
Bu çabalar bir sonuca ulaşmamıştır ama zamanla İngilizce
yaygınlaşarak insanların ortak anlaşma dili durumuna ulaşmıştır.
2
GİRİŞ
Bilişim dünyasında da programlar arasındaki iletişimin
gerçekleşmesi, farklı sistemler arasında veri alışverişinin
sorunsuz olması için ortak yapılar, standartlar oluşturma çabaları
devam etmektedir.
Bu çabalardan birisi XML dilidir.
3
GİRİŞ
Bu modülde verilerin platformdan bağımsız olarak dolaşımını
sağlamak amacıyla üretilmiş XML dilini öğreneceksiniz.
4
XML Dili


XML, farklı bilgisayar sistemleri arasında veri iletmek için tasarlanmış yazılım ve
donanımdan bağımsız bir dildir.
XML (Extensible Markup Language) kavramının Türkçesi Genişletilebilir
İşaretleme Dili’dir.

Bu dil bilgisayar dünyasında bazı ihtiyaçların giderilmesi amacıyla geliştirilmiştir.

Veri aktarmak HTML sayfalarıyla yapılabiliyordu. Örneğin borsa verilerini dağıtan
bir sayfadan bilgi almak mümkündü.


İnternette her türlü veriye ulaşılabiliyordu fakat verileri tanımlamak, analiz etmek,
yeniden biçimlemek mümkün değildi.
İşte bu ihtiyaçları gidermek için istenildiği kadar genişletilebilen ve tekrar
biçimlendirilebilen bir yapıya sahip XML geliştirildi.
5
XML Dili





XML uyumsuz (incompatible) sistemler arasında veri alışverişi için
kullanılabilir.
Bilgisayar programları uyumsuz formatlarda veri tutarlar.
XML’nin kullanım alanları internet uygulamaları ile sınırlı olmayıp geliştirilme
amacı, birbiriyle bilgi alışverişi yapması istenen uygulamalar için ortak bir dil
sunmaktır.
Verinin XML’ye dönüştürülmesi, veriyi farklı türdeki uygulamalar (farklı
işletim sistemleri üzerinde çalışan, farklı firmalar tarafından yazılmış, farklı
dillerle yazılmış vs. uygulamalar) tarafından okunabilen veri haline getirerek
veri alışverişinde yaşanan sıkıntıyı büyük ölçüde azaltır.
XML belgeleri hangi uygulama tarafından kullanılacaksa biçimlendirilerek o
uygulamaya uyumlu hale getirilir.
6
XML Dili





XML, verileri metin tabanlı tanımlar.
XML belgeleri, verilerin etiketlenerek bir düzen içinde tutulduğu metin
dosyalarıdır.
XML ile düz metin dosyaları veri paylaşmak için kullanılabilir.
XML verileri düz metin formatında saklandığından XML yazılım ve
donanımdan bağımsız şekilde veri paylaşımını mümkün kılar.
Bu durum farklı uygulamaların çalışabileceği verilerin oluşturulmasını
kolaylaştırır.
7
XML Dili



XML belgeleri, verileri tutmak amacıyla kullanıldığından
verilerin birbirleriyle olan ilişkileri de belirtilmelidir.
Etiketleme işlemi verilerin birbiriyle ilişkilerini belirlemek
için kullanılır.
Örneğin, elimizde aşağıdaki veriler olsun.
8
XML Dili
Burak
Eren
Polis
Yunus
Hızır
Savcı
Bu verilere bir kimlik kazandırmak ve aralarındaki ilişkiyi
belirlemek için etiketler kullanalım.
9
Meslekler
<?xml version="1.0" encoding="windows-1254"?>
<!-- Meslek Listesi -->
<meslekler>
<eleman>
<ad>Burak</ad>
<soyad>Eren</soyad>
<meslek>Polis</meslek>
</eleman>
<eleman>
<ad>Yunus</ad>
<soyad>Hızır</soyad>
<meslek>Savcı</meslek>
</eleman>
</meslekler>
10
XML Dili





Bu örnekte “Burak, Eren, Polis, Yunus, Hızır, Savcı” bilgileri
arasındaki ilişki belli değildir.
“Eren” kelimesi ayrı bir ismi mi yoksa “Burak” isimli elemanın
soyadını mı ifade etmektedir?
“Polis” rastgele konmuş bir kelime midir yoksa Burak”ın mesleği
midir?
İşte bilgiler arasındaki doğru ilişkilendirmeyi kurmak için
etiketlendirmeler kullanılmıştır.
Dikkat edilirse HTML’ye benzer bir etiketlendirme mantığı
kullanılmıştır.
11
XML Dili



HTML’den farklı olarak XML’de veri ile verinin sunumu (verinin
istenilen biçimde gösterilmesi) birbirinden ayrıdır.
Bu durum XML’nin yararlarından biridir.
Böylelikle farklı stil sayfaları kullanarak XML belgesinden birçok
biçimlendirilmiş sayfa üretebilir.
12
XML Dili





XML, HTML’nin türetildiği SGML (Standart Generalized Markup
Language) dilinden türetilmiştir.
HTML’de bütün tanımlamalar, adlar bellidir ve bunların dışına
çıkılmaması gerekir.
XML’de asıl önemli olan veridir.
XML belgelerinde biçimlenmemiş veriler bulunur ve etiket adlarını
belirlerken, belli temel kurallara bağlı kalmak koşuluyla herhangi bir
tanımlayıcı isim kullanılabilir.
XML, HTML gibi ücretsiz bir dildir.
13
XML Dili

Örnekte <personel>, <eleman>, <ad> gibi elemanlar kullanılmıştır.

Bir başkası bu bilgileri tutmak için farklı eleman isimleri kullanabilirdi.

Örneğin, <çalışanlar>, <çalışan>, <çalışan_ismi>.

XML’nin yaygınlaşmasını sağlayan bu esnekliğin dezavantajı da
vardır.
14
XML Dili






Farklı uygulamalar arasında veri alışverişinde farklı elemanların kullanılmış
olması sıkıntılara neden olur.
Veriyi yorumlamak ve anlamlı bilgi çıkartmak için XML okuyucuları ve
yazıcıları standart bir eleman yapısına ihtiyaç duyarlar.
Bu amaçla çeşitli sektörlerde verilerin tutulması için XML’den alt diller
türetilmiştir.
Standartlaşmayı sağlamak açısından bu sektörel alt diller de HTML gibi
standart etiket adlarına sahiptir fakat işleyiş açısından XML’yi temel alır.
World Wide Web Konsorsiyumu (W3C), finans, sağlık, sigorta, yayıncılık,
trafik, emlak, seyahat, din ve akla gelebilecek her sektör için XML tabanlı
ortak alt diller oluşturmaya devam etmektedir.
Kurumlar birbirleri ile bilgi alışverişi yaparken, bu alt dillerden kendileri ile
ilgili olanını alıp serbestçe kullanabileceklerdir.
15
XML Dili





XML ile E-Devlet uygulamalarında olduğu gibi farklı kurumların
birbirleriyle olan iletişimi de daha kolay olacaktır.
Veriler başka kurumlar tarafından kullanıldığında yeniden
sorgulanabilir ve biçimlendirilebilir olacaktır.
Örneğin, hastaneye giden bir vatandaşın tedavisi yapılmadan
önce nüfus merkezinde tutulan veritabanından alınan veriler
istemci program tarafından kolaylıkla anlaşılabilecektir.
Internet bankacılığını kullanan birisi bağlı bulunduğu belediyenin
veritabanını sorgulayarak vergisini öder duruma gelebilecektir.
Bu tür uygulamaları gerçekleştirmek veri aktarımında ortak bir
dilde birleşildiği için eskisine göre daha kolay olacaktır.
16
XML Dili






XML, HTML’nin yerini almak için üretilen bir dil değildir.
Aksine HTML ile XML birlikte kullanılıp daha yetenekli veri sayfaları
oluşturulabilir.
XML’in kullanım alanı internet ile sınırlı değildir.
Birbiriyle bilgi alışverişi yapması gereken uygulamalar için ortak bir dil
olarak kullanılabilir.
Böylelikle birbirinden bağımsız, tamamen ayrı sistemler XML
aracılığıyla bilgi alış verişinde bulunabilirler.
Paylaşmanız gereken verileri XML biçiminde dağıttığınızda verinizi
alan bütün uygulamalar bilgiyi anlamlandırabilecektir.
17
XML Dili



XML belgesi içinde yer alan veriler, etiketlerle
tanımlandıklarından hem bilgisayarlar hem de insanlar
tarafından okunabilir.
Tabii ki kimi karmaşık (kompleks) belgelerin anlaşılması
zordur, uygulamalar tarafından okunabilir.
İnternet üzerinde XML iki türlü kullanılabilir: İstemci
tarafında ya da sunucu tarafında XML belgelerini
işlemek
18
XML Dili




Sunucu tarafında işlenen XML verileri HTML biçiminde iletilirler.
Bu, sunucu bilgisayarlara yük getiren ve genellikle önerilmeyen bir
yöntemdir.
Zaten bu şekilde yeniden tanımlanabilen veri aktarmak mümkün
olmaz ve bu işlem veriyi XML olarak yayınlamamak, XML’yi amacına
uygun kullanmamak anlamına gelir.
Sunucu tarafında XML çalıştırmanın sebebi XML’i desteklemeyen
eski web tarayıcılarda yaşanan sorunları önlemektir.
19
XML Dili



Sunucu, kendisine gelen istek vasıtasıyla istemcideki tarayıcının ne
olduğunu anlayıp, XML biçimlemelerini kabul edip etmeyeceğine
karar verir.
İstemcinin tarayıcısı XML uyumlu ise istenilen sayfayı gönderir.
Tarayıcı XML uyumlu değilse XML belgesini biçimleyip tarayıcının
anlayabileceği, biçimlendirilmiş hazır kodlar gönderir.
20
XML Dili




XML uyumlu web tarayıcılar sunucudan gelen verileri alıp
biçimlendirebilirler.
İstemci bilgisayara XML belgesi ile birlikte biçim bilgilerinin bulunduğu
bir başka dosya da gönderilebilir.
Varsa bu biçim dosyasını (stil sayfası, stil şablonu) da beraberinde
yükleyen web tarayıcı programı biçim dosyasına bakarak XML
belgesindeki verileri gösterir.
XML belgesine, ziyaretçinin kendi seçebileceği bir stil sayfası
uygulanabilir.
21
XML Dili


XML için standart biçimleme dili olarak XSL önerilmektedir.
Her yeni teknoloji gibi XML’nin de geliştiriciler tarafından
benimsemesi için eski kalıplara destek sunması gerekmektedir.

Bu amaçla CSS biçim dosyalarını kullanarak XML verilerini
biçimlemek mümkündür.

XML yeni diller oluşturmak için kullanılabilir.

Örneğin, WML (Wireless Markup Language) XML’den türetilmiştir.
22
XML Dili



XML belgesi oluşturabilmek için Not Defteri gibi metin düzenleme
programlarından biri kullanılabilir.
Ayrıca sadece XML veri alanlarını düzenlemek için oluşturulmuş
programlar da tercih edilebilir.
Örneğin, XML Notepad programı Microsoft’un sitesinden ücretsiz
olarak indirilebilir.
23
XML Dili



XML ile veriler daha fazla kullanıcının kullanımına açıktır.
XML, donanım ve yazılımdan bağımsız olduğundan veriler standart
HTML tarayıcılarının dışındaki yazılımlar tarafından da kullanılabilir.
Diğer istemciler ve uygulamalar XML belgelerine erişebilirler.
24
XML Dili



Veri tabanlarında tutulan veriler, web ortamındaki bilgisayarlar arasında veri
paylaşımı için sıklıkla XML verilerine dönüştürülür.
İnternet sitesi kullanıcılarına veri tabanını erişmek için izin vermek güvenlik
açısında bir risktir.
Bu nedenle veri tabanındaki verileri XML verilerine dönüştürerek paylaşmak
güvenlik açısından daha uygundur.
25
XML Dili





XML’in en yaygın kullanım alanlarından biri elektronik ticaret
uygulamalarıdır.
XML, tedarikçiler, müşteriler, iş ortakları vb. kurumlar arasında bilgi
paylaşımında avantaj sağlar.
XML ayrıca yayıncılık sektöründe de kullanışlıdır.
XML olarak saklanan bilgi, her tür yayıncılık formatına kolaylıkla
dönüştürülebilir.
XML’nin dünyadaki her uygulama tarafından tanınması için uygulama
geliştiricileri W3C konsorsiyumunun kurallarına bağlı kalmaktadırlar.
26
XML Dili



HTML dosyalarının yapısı ve HTML dosyaları oluşturmak için
kullanılan etiketler (örneğin <br>, <i>) önceden tanımlanmıştır.
XML belgesinin yapısını ve etiketlerini ise uygulama geliştiricisinin
kendisi oluşturur.
Personel ile ilgili verilerin bulunduğu yukarıdaki örnekte geliştirici
olarak kendi etiketlerimizi kullandık.

XML, HTML’nin yerini alması için tasarlanmamıştır.

XML, HTML’nin tamamlayıcısıdır.

XML, verileri tanımlamak için kullanılırken HTML verileri
biçimlendirmek ve görüntülemek için kullanılır.
27
XML ile HTML Arasındaki Fark





HTML veri görüntülemek için tasarlanmıştır ve verinin nasıl
göründüğüne odaklanır.
HTML dili bir belgenin formatlanması amacıyla daha önceden
tanımlanmış bir etiket (tag) kümesine sahiptir.
XML veri tanımlamak için tasarlanmıştır ve verinin ne olduğuna
odaklanır.
XML verinin nasıl görüneceğiyle ilgili veri içermez.
XML belgelerinden elde edilen verilerin sayfadaki görünümünü
ayarlamak için CSS, XSLT stil sayfaları kullanılır.
28
XML ile HTML Arasındaki Fark

XML verileri yapılandırmak, depolamak, göndermek için oluşturulmuştur.

Yukarıdaki örnekte görüldüğü gibi XML’de veri kendi içinde bir yapıya
sahiptir.

Bu şekilde XML belgesinde tutulacaktır ve ihtiyaç duyulduğunda
gönderilecektir.

Verileri görüntülemek için HTML kullanıldığında veriler HTML içinde
tutulur.

XML ile veriler ayrı XML belgelerinde tutulabilirler.


Bu yöntemle verilerdeki herhangi bir değişiklikte HTML kodlarında
değişiklik yapmak gerekmez.
HTML sadece verileri istenilen yerleştiriliş düzeninde görüntülemek için
kullanılır.
29
XML ile HTML Arasındaki Fark

HTML’de bazı etiketler kapatılmadan kullanılmaktadır.

Örneğin, <p> etiketi. XML’de ise tüm etiketler kapatılmalıdır.

XML’de etiketler büyük küçük harf duyarlıdır.

<ad> ile <Ad> farklı etiketlerdir.

<ad> Zuhal </ad> DOĞRU

<Ad> Zuhal </ad> YANLIŞ
30
XML ile HTML Arasındaki Fark

XML’de etiketler düzgün sırayla kapatılmalıdır.

<b><u>Malzeme listesi</b></u> YANLIŞ

<b><u>Malzeme listesi</u></b> DOĞRU


Aralık (space) tuşu, sekme (tab) tuşu ya da yeni satır tuşu ile elde
edilen boşluğu ifade eden beyaz boşluk (white space) XML’de
korunur.
HTML birden fazla olan beyaz boşluk karakterini tek beyaz boşluğa
indirir.
HTML Merhaba
Dünya
Çıktı
Merhaba Dünya
XML
Merhaba
Dünya
Çıktı
Merhaba
Dünya
31
XML ile HTML Arasındaki Fark

HTML etiketlerindeki kimi hatalara rağmen HTML tarayıcıları belgeleri
gösterir.

XML belgelerindeki hatalarda ise XML uygulamalarının çalışması durur.

HTML dosyalarının uzantısı html veya htm’dir.

XML belgelerinin uzantısı xml’dir.
32
XML Söz Dizimi (Syntax) Kuralları


XML yazım kurallarını örnek bir XML belgesi üzerinden anlatalım.
XML belgesinde verilerin aşağıdaki gibi dizilerek oluşturduğu
görünüme ağaç görünümü (tree view) denir.
33
XML Söz Dizimi (Syntax) Kuralları
34
personel.xml
<?xml version="1.0" encoding=“windows-1254"?>
<!-- Aciklama satiri -->
<personel>
<eleman>
<ad>Serkan</ad>
<soyad>KORKMAZ</soyad>
</eleman>
<eleman>
<ad>Mehmet</ad>
<soyad>YILMAZ</soyad>
</eleman>
</personel>
35
XML Söz Dizimi (Syntax) Kuralları
Personel.xml belgesinin ağaç yapısı
Personel.xml belgesinin ağaç yapısındaki her kutuya düğüm denir.
36
XML Söz Dizimi (Syntax) Kuralları
37
personel.xml belgesinin tarayıcıdaki görüntüsü
XML Söz Dizimi (Syntax) Kuralları


XML belgesinde etiketler ve etiketler arasında belirtilen veriler
bulunmaktadır.
Etiket ve veriden oluşun birime eleman (öge, element) adı verilir.
38
XML Söz Dizimi (Syntax) Kuralları

Eleman isimleri aşağıda kurallara uymalıdır.

İsimler harf, rakam ve diğer karakterleri içerebilir.

İsimler rakam veya noktalama işaretleriyle başlayamaz.

İsimler boşluk içeremez.


Eğer birden fazla kelime kullanılmak isteniyorsa kelimeler arasındaki
boşluk yerine alt çizgi kullanılabilir.
“-“ (tire), “.” (nokta), “:” (iki nokta üst üste) karakterlerini kullanmaktan
kaçınılmalıdır.

Bazı yazılımlar bu karakteri farklı anlamlarda yorumlayabilir.

İsimler “xml” harfleriyle başlayamaz. (XML, xml vs.)
39
XML Söz Dizimi (Syntax) Kuralları


XML belgeleri sıklıkla kendisiyle ilişkili bir veri tabanına sahiptir.
Bu açıdan veri tabanındaki isimlendirme kurallarını XML belgelerinde
de kullanmak yararlı bir uygulamadır.
40
XML Söz Dizimi (Syntax) Kuralları



Belgenin ilk satırındaki bildirim XML sürüm (version) bilgisi ve
kullanılacak dil kodlamasını tanımlar.
Örnek belgede XML 1.0 sürümü ve “utf-8” dil kodlaması kullanılacağı
belirtilmiştir.
Bildirim XML elemanı olmadığından kapanış etiketi kullanılmamıştır.
41
XML Söz Dizimi (Syntax) Kuralları

İkinci satır belgenin personel isimli kök (root) elemanını
tanımlamaktadır.

XML belgeleri sadece bir kök elemanına sahip olabilir.

Kök eleman yavru elemanları (child elements) içinde barındırır.

Yavru elemanlara sahip elemana ana (parent) eleman adı verilir.

Tüm elemanlar yavru elemanlara sahip olabilir.

Yavru elemanlar ana elemanlar içinde düzgün bir şekilde
yerleştirilmelidir.
42
XML Söz Dizimi (Syntax) Kuralları
<kök eleman>
<yavru eleman1>
<alt yavru eleman1a>.....</alt yavru eleman1a>
<alt yavru eleman1b>.....</alt yavru eleman1b>
</yavru eleman1>
<yavru eleman2>
<alt yavru eleman2a>.....</alt yavru eleman2a>
<alt yavru eleman2b>.....</alt yavru eleman2b>
</yavru eleman2>
</kök eleman>
43
XML Söz Dizimi (Syntax) Kuralları
Genişletilmiş halde personel isimli kök eleman ve daraltılmış halde eleman isimli yavru eleman
44
XML Söz Dizimi (Syntax) Kuralları
Daraltılmış halde personel isimli kök eleman
45
XML Söz Dizimi (Syntax) Kuralları






XML’de açıklama satırı eklenmesi aşağıdaki şekilde
yapılır.
<!-- Açıklama satırı -->
Örnek üzerinden gösterirsek şu şekilde bir açıklama
satırı kullanılabilir.
<?xml version="1.0" encoding="utf-8"?>
<!-- Personel Bilgileri -->
………………………………..
46
XML Söz Dizimi (Syntax) Kuralları

XML’de bazı karakterler özel anlam taşır.

XML elemanları içinde “<” karakteri kullanıldığında hata oluşur.


Çünkü ayrıştırıcı (parser) bu karakteri yeni bir elemanın başlangıcı
olarak yorumlar.
Bu tür özel karakterler yerine aşağıdaki tablodaki değerler kullanılır.
&lt;
&gt;
<
>
&amp; &
&apos; '
&quot; "
47
XML Söz Dizimi (Syntax) Kuralları





XML’de özellik (attribute) değeri tek veya çift tırnak işareti içine
alınmalıdır.
<not tarih=”06/06/2006”>
XML söz dizimi (syntax) kurallarına uyan XML belgelerine iyi biçimli
(well formed) XML belgesi denir.
NOT: XML belgelerinin iyi biçimli olup olmadığını test etmek için o
belgeyi tarayıcınızda açınız.
Bir hata varsa tarayıcınız bu hatayı görüntüleyecektir.
48
kitaplar.xml belgesinin ağaç yapısını çiziniz.
<?xml version="1.0" encoding="utf-8"?>
<kitaplar>
<kitap>
<nu>1</nu>
<ad>Nutuk</ad>
<yazar>M.Kemal Atatürk</yazar>
<yayinevi>Kanarya</yayinevi>
</kitap>
<kitap>
<nu>2</nu>
<ad>Mesnevi'den Seçmeler</ad>
<yazar>Mevlana</yazar>
<yayinevi>Serçe</yayinevi>
</kitap>
<kitap>
<nu>3</nu>
<ad>Çalıkuşu</ad>
<yazar>Reşat Nuri Güntekin</yazar>
<yayinevi>Doğan</yayinevi>
</kitap>
</kitaplar>
49
XML Söz Dizimi (Syntax) Kuralları


Kitaplar.xml belgesi yukarıdaki gibi yapılandırıldığı gibi geliştiricinin
tercihine göre farklı şekilde de yapılandırılabilir.
Örneğin, aşağıda kitabın birden fazla yazara sahip olduğu durumları
da ele alan ve kimi elemanları özellik olarak belirleyen örnek
verilmiştir.
50
Bu belgelerin ağaç yapısını çiziniz.
<kitaplar>
<kitap nu=”1”>
<ad>Mesnevi'den Seçmeler</ad>
<yazar>Mevlana</yazar>
<yayinevi>Serçe</yayinevi>
</kitap>
<kitaplar>
51
Örnek XML Belgesi
<?xml version="1.0" encoding="utf-8"?>
<!-- Aciklama satiri -->
<personel>
<eleman>
<ad>Serkan</ad>
<soyad>KORKMAZ</soyad>
</eleman>
<eleman>
<ad>Mehmet</ad>
<soyad>YILMAZ</soyad>
</eleman>
</personel>
52
Örnek XML Belgesi
53
Örnek XML Belgesi
54
Öğrenci Listesi
id
1
2
Numara
141206002
141206010
Ad
Ahmet
Emine
Soyad
ÖZOĞUL
BİLİR
Kök eleman ogrenciler olsun.
id değeri özellik olarak verilsin.
Eleman ismi ogrenci olarak tanımlansın.
55
Öğrenci Listesi
<?xml version="1.0" encoding="windows-1254"?>
<!– Öğrenci Listesi -->
<ogrenciler>
<ogrenci id=“1">
<numara>141206002</numara>
<ad>Ahmet</ad>
<soyad>ÖZOĞUL</soyad>
</ogrenci>
<ogrenci id=“2">
<numara>141206010</numara>
<ad>Emine</ad>
<soyad>BİLİR</soyad>
</ogrenci>
</ogrenciler>
56
Kitap Listesi
<?xml version="1.0" encoding="windows-1254"?>
<!-- Kitap Listesi -->
<kitaplar>
<kitap>
<numara>1</numara>
<ad>Çalıkuşu</ad>
<yazar>Reşat Nuri Güntekin</yazar>
<yayinevi>Serçe</yayinevi>
</kitap>
<kitap>
<numara>2</numara>
<ad>Aşk</ad>
<yazar>Elif ŞAFAK</yazar>
<yayinevi>Yurt</yayinevi>
</kitap>
</kitaplar>
57
Kimlik Bilgileri
<?xml version="1.0" encoding="windows-1254"?>
<!-- Kimlik Bilgileri -->
<kimlik>
<kisi no="1">
<tcno>11111111111</tcno>
<ad>Ahmet</ad>
<soyad>KILIÇ</soyad>
<dogum_yeri>BİRECİK</dogum_yeri>
<dogum_tarihi>01.01.1990</dogum_tarihi>
</kisi>
<kisi no="2">
<tcno>22222222222</tcno>
<ad>Fatma</ad>
<soyad>ÇİÇEK</soyad>
<meslek>Hemşire</meslek>
<dogum_yeri>ŞANLIURFA</dogum_yeri>
<dogum_tarihi>01.01.1993</dogum_tarihi>
</kisi>
</kimlik>
58
Ürün Bilgileri
<?xml version="1.0" encoding="windows-1254"?>
<!– Urün Bilgileri -->
<urunler>
<urun>
<urun_no>125</urun_no>
<urun_adi>Cep Telefonu</urun_adi>
<fiyat>200 TL</fiyat>
<firma>NOKIA</firma>
<model>u900</model>
</urun>
<urun>
<urun_no>150</urun_no>
<urun_adi>Bilgisayar</urun_adi>
<fiyat>1500 TL</fiyat>
<firma>IBM</firma>
<model>ThinkCentre</model>
</urun>
<urun>
<urun_no>175</urun_no>
<urun_adi>Televizyon</urun_adi>
<fiyat>500 TL</fiyat>
<firma>Arçelik</firma>
<model>A-25</model>
</urun>
59
Çiçek Bilgileri
<?xml version="1.0" encoding="windows-1254"?>
<!-- Çiçek Bilgileri -->
<cicekler>
<cicek>
<cicek_adi>Gül</cicek_adi>
<fiyat>5 TL</fiyat>
<renk>Kırmızı</renk>
<anlami>Aşk</anlami>
</cicek>
<cicek>
<cicek_adi>Orkide</cicek_adi>
<fiyat>25 TL</fiyat>
<renk>Beyaz</renk>
<anlami>Temizlik</anlami>
</cicek>
<cicek>
<cicek_adi>Karanfil</cicek_adi>
<fiyat>2.5 TL</fiyat>
<renk>Mor</renk>
<anlami>Dostluk</anlami>
</cicek>
</cicekler>
60
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
1. Bilişim dünyasında programlar arasındaki iletişimin gerçekleşmesi,
farklı sistemler arasında veri alışverişinin sorunsuz olması için ortak
yapılar, standartlar oluşturma çabaları için geliştirilen dil hangisidir?
A html
B css
C js
D xml
61
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
2. XML için standart biçimleme dili olarak aşağıdakilerden hangisi
önerilmektedir?
A xsl
B css
C xts
D still
62
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
3. XML belgelerinde <?xml version="1.0" encoding="windows-1254" ?>
satırında dil kodlaması için kullanılan ifade aşağıdakilerden hangisidir?
A <?xml
B version="1.0"
C encoding="windows-1254"
D ?>
63
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
4. XML belgelerinde <?xml version="1.0" encoding="windows-1254" ?>
satırında sürüm bilgisi için kullanılan ifade aşağıdakilerden hangisidir?
A <?xml
B version="1.0"
C encoding="windows-1254"
D ?>
64
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
5. XML belgelerinde türkçe dil kodlaması için kullanılan ifade hangisidir?
A encoding=“utf-8"
B encoding=“utf-16"
C encoding="windows-1254"
D encoding=“latin"
65
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
6. XML belgelerinde birden fazla kök eleman kullanılabilir. ( D / Y )
66
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
7. XML belgelerinde asıl önemli olan veridir. ( D / Y )
67
ÖLÇME VE DEĞERLENDİRME
A-OBJEKTİF TESTLER(ÖLÇME SORULARI)
Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.
Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.
Şıklı sorularda uygun şıkkı işaretleyiniz.
8. XML’in en yaygın kullanım alanlarından biri elektronik ticaret
uygulamalarıdır. ( D / Y )
68
Download

Web Editörü - Birecik Meslek Yüksekokulu