Web Tasarımı

Ankara - 2006

T.C.MİLLÎ EĞİTİM BAKANLIĞI

EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Web TasarımıWeb Tasarımı

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Web sayfasının yapısı Web sayfasının yapısı Web sayfası <html> etiketi ile başlar ve </html> ile biter. İki

bölümden oluşur.

<head> …. </head>: Bu bölümde sayfa ve sayfayı hazırlayan kişi vb. konularda bilgi verilir. Burada yazdıklarımız sayfanın görünümünü etkiler, ancak sayfada görüntülenmez.

Örneğin; <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> koduyla sayfasının karakter kodlamasının hangi dil ile olacağını belirtmiş oluruz. (“iso-8859-9” ve “windows-1254” sayfanın Türkçe karakterlerle görüntüleneceğini belirtir.)

<title>…</title> etiketi de web tarayıcısının başlık çubuğunda görüntülenecek metni belirler.

<meta name="author" content="Hazırlayan"> Sayfayı hazırlayan veya sahibi olan kişi veya kuruluşu belirtir.

<body>…</body>: Sayfada görüntülenecek metin, resim, tablo vb. nesnelerin bulunduğu bölümdür.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Basit bir web sayfasının görünümü şöyledir:

<html><head>…. (Sayfayı tanımlayan kodlar.)</head><body>… (Sayfanın içeriği: metin, resim vb.)</body></html>

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

HTML HTML HTML HyperText Markup Language kelimelerinin ilk harflerinden oluşur.

Hipermetin İşaretleme Dili diye Türkçeleştirilebilir. HTML de web tarayıcısına tag (etiket) denilen komutlarla istekler bildirilir. Etiketlerle verilen komutlar web tarayıcısı tarafından yorumlanır ve görüntü oluşturulur. Etiketlerin yapısı şöyledir:

<etiket özellik1(Parametre1)= "değer" özellik2="değer" özellik3="değer">… </etiket>

Etiketler genelde <etiket …> şeklinde açılıp </etiket> şeklinde kapatılır. Ancak kapatılmayan etiketler de vardır.

Etiketleri bir örnekle açıklayacak olursak:<otomobil marka="tofaş" model="dogan" uretim_tarihi="2003"

renk="beyaz">Bunlarla “2003 yılında üretilmiş, doğan model beyaz renkli tofaş bir otomobil

istiyorum” demiş oluruz. Gerçek bir örnek verecek olursak:< font face="verdana" size="4" color="red" align="center">Paragrafın

içerdiği metin</font>Bu kodlarla da şunu demiş oluruz:“Yazacağım metnin yazıtipi verdana , boyutu 4, rengi kırmızı olsun ve

ortaya hizalansın.”

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Başlıca HTML etiketleri Başlıca HTML etiketleri Metin Etiketleri

1 b Metni kalın yapar.

2 i Metni italik yapar.

3 strike Metni üstü çizili yapar.

4 u Metni altı çizili yapar.

5 strong Metni kalın yapar.

6font Aldığı face, size, color vb. parametrelerle

metnin yazıtipi, boyut, renk gibi özelliklerini belirler.

7 sub Metni alt simge olarak gösterir.

8 sup Metni üst simge olarak gösterir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Blok Etiketleri

9 blockquote Metnin sol girintisini artırır.

10 center Metni ortalar.

11 div Sayfa içinde ayrı bir katman oluşturur.

12

span Div etiketi gibidir. Ancak div ile oluşturulan katman metni satır olarak alır, span ile ise metin kelime bazında da bölümlere ayrılabilir.

13 p Paragraf oluşturur.

14h1, h2, h3…

Başlık oluşturur.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Liste Etiketleri

15

ol Numaralandırma oluşturur. Bu numaralandırmanın, type parametresini kullanarak A, a, I, i biçimlerinde olması sağlayabiliriz.

16ul Madde işaretleri oluşturur.

17li Liste öğelerini belirtir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Tablo Etiketleri

18table Tablo oluşturur.

19tr Tabloya satır ekler.

20td Tabloya hücre ekler.

21th Tabloya başlık metni içerecek hücre

ekler.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Form Etiketleri

22 form Sayfaya form ekler.

23input Type parametresine göre tek satırlık

metin kutusu, buton, onay kutusu vs. oluşturur.

24textarea Birden çok satır yazılabilen metin

kutusu oluşturur.

25 select Açılır form alanı oluşturur.

26option Select etiketi ile oluşturulan açılır

form alanında seçenekleri belirtir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Çeşitli Etiketler

27html Web sayfasının bütününü içine alır. İki bölümden oluşur:

head ve body.

28head Sayfanın dil kodlaması, başlığı gibi özelliklerini belirleyen

etiketleri içerir. Burada yazılanlar sayfada görüntülenmez.

29body Web sayfasının görüntülenen içeriğinin bulunduğu

bölümdür.

30 a Başka bir dosyaya link (Köprü) oluşturur.

31 br Boş bir satır oluşturur

32 hr Yatay çizgi oluşturur.

33script Sayfaya Javascript vb. web programlama dilleri ile yazılan

script’leri ekler.

34 style Sayfaya Cascading Style Sheet komutlarını ekler

35title Web tarayıcısının başlık çubuğunda görüntülenecek olan

sayfa başlığını belirtir.

36 img Sayfaya resim ekler.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Örnek Uygulamalar Örnek Uygulamalar

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Metin Biçimlendirme Metin Biçimlendirme

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Liste Oluşturma Liste Oluşturma Yukarıdaki listeyi oluşturmak için

aşağıdaki kodlar yazılmalıdır.

Yukarıdaki kodlarda <ol> sıralı, <ul> sırasız bir liste oluşturulacağını belirtir. “type” parametresi ise oluşturulacak listedeki liste belirtecinin ne olacağını (a, A, i, I, kare, içi dolu daire, içi boş daire vb.) belirler. <li> listeye öğeler ekler.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Tablo Oluşturma Tablo Oluşturma

Bir haftalık ders programı hazırlayacağımızı varsayalım. Tablomuzda 6 sütun ve 7 satır bulunmaktadır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Sırasıyla şunlar yapılmalıdır:<table> yazarak bir tablo oluşturulacağı belirtilir. <tr> ile birinci satır oluşturulur. <td> ile birinci hücre oluşturulur ve </td> ile kapatılır.

Yukarıdaki tabloya bakarsak her satırda altı hücre olduğu görülür. Bu nedenle yine aynı şekilde diğer 5 hücre oluşturulur. (Tablonun doğru görüntülenebilmesi için hücreler boş bırakılacak olsa bile boşlukla doldurulmalıdır. Boşluğun karşılığı ise “ ” dir.)

Birinci satır bittiğinden </tr> ile kapatılır. Bu durumda görünüm şöyle olur:

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

• 2, 3 ve 4. maddedekiler altı defa tekrarlanarak diğer satırlar oluşturulur.

• Tablo </table> ile kapatılır. • Artık içlerini doldurabiliriz. İlk satırın 2-6 arası

hücrelere günleri yazabiliriz. 2-7 arası satırların ilk hücrelerine de sayıları yazalım.

• Görünümün yukarıdaki örnek gibi olması için tablonun özellikleri üzerinde değişiklik yapmamız gerekir. <table border="1" bordercolor="black" cellspacing="0" cellpadding="0" width="500"> diyerek tabloya siyah renkli kenar çizgisi verelim. Hücre çizgileri arasındaki boşluk 0, hücre ile içindeki nesneler arasındaki boşluk da 1 olsun. Genişliğini de 500 piksel olarak belirtelim.

• Hücreler için genişlik belirtmediğimizden sütunların genişlikleri farklı görünecektir. “Width” etiketiyle hücrelere uygun genişlikleri verdiğimizde istediğimiz görüntüye ulaşabiliriz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Resim Ekleme Resim Ekleme • "images" klasörü içerisinde resim1.jpg adlı dosyayı

sayfamıza eklemek istediğimizi varsayalım. Bunun için aşağıdaki kod yazılmalıdır:

• <img src="images/resim1.jpg" width="200" height="150" hspace="10" vspace="10" border="2" align="left">

• (Yukarıdaki kodda “src” klasörün adresini, “width” genişliğini, “height” yüksekliğini, “hspace” resim ile çevresindeki nesneler arasında bırakılacak yatay boşluğu, “vspace” resim ile çevresindeki nesneler arasında bırakılacak dikey boşluğu, “border” resme verilecek kenar çizgisinin kalınlığını, “align” resmin sayfada hizalanacağı konumu belirtmektedir.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Sonuç:

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Çerçeve Oluşturma Çerçeve Oluşturma Yukarıdaki görüntüyü oluşturmak için aşağıdaki kodlar kullanılmalıdır:

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

CSS CSS

• CSS web sayfasını biçimlendirmede HTML den daha geniş imkânlar sunar. Örneğin div etiketiyle bir katman oluşturabiliriz ama hizalama dışında başka bir özelliğini değiştiremeyiz. Ancak CSS ile katmanın sayfa içindeki konumu, arka plan rengi, kenarlık tipi, yazı rengi, kanlınlığı vb. pek çok özelliğini belirleyebiliriz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

CSS kullanım şekilleri CSS kullanım şekilleri • Style komutlarını üç yerde tutabiliriz:• Ayrı bir metin dosyası olarak: Bu durumda head bölümüne

CSS dosyasına bağlantı kurulur. (<link type="text/css" rel="stylesheet" href="style_dosyasi.css"> gibi)

• CSS kodlarını doğrudan head bölümüne yerleştirebiliriz. Örnek:<html><head><style>P {font-family:arial; font-size:12px;}</style></head>....

• CSS kodlarını HTML etiketlerinin içine yerleştirebiliriz. Örnek:<p style="font-family:arial; font-size:12px;font-color:black;">...</p>

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

• Style komutları sadece bir yerde kullanılacaksa doğrudan etiket içinde kullanılması uygun olur. Ancak pek çok yerde aynı style özellikleri kullanılacaksa, tekrardan kaçınmak için şu metodlar kullanılabilir.

• Sınıf (class) tanımlanabilir: Style dosyasında etiket isminden ve . dan sonra sınıf adı yazılır ve {} işaretleri arasına style komutları yazılır.

span.vurgulu {color:red; background-color:yellow;}

Sayfa içinde kullanımı da aşağıdaki gibi olur:

<p>Cümlede <span class="vurgulu">burası</span> çok önemli.</p>

Görünüm aşağıdaki gibi olur.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

• id tanımlanabilir: Yukarıdaki gibidir. Ancak . yerine # kullanılır ve bir etiket ile ilişkilendirilmesi gerekmez.

#vurgulu {color:red; background-color:yellow;}

<p>Cümlede <span id="vurgulu">burası</span> çok önemli.</p>

• Bir etikettin tümü aynı özelliklere sahip olsun istiyorsak id ve class kullanmadan doğrudan etiketi yazabiliriz.

b {font-family: arial; font-size: 9pt; font-weight: bold; color: blue;}

Bu durumda bütün <b></b> etiketi içerisindeki metinlerin yazıtipi mavi, boyutu 9 punto, kalın ve rengi mavi olacaktır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Başlıca CSS Komutları Başlıca CSS Komutları

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

BİÇİMLENDİRME

font-family Tahoma, Comic Sans MS vs.

Yazı tipini belirler.(Arial , Verdana gibi.)

font-style normalitalicoblique

Yazının normal veya sağa eğik olmasını sağlar.

font-variant normalsmall-caps

Yazının, yazıldığı gibi veya tümünün büyük harflerden oluşmuş gibi görünmesini sağlar. İkinci durumda metnin ilk harfi de boyut olarak büyük gözükür.

font-weight normalboldbolderlighter100 - 900

Yazının kalınlık-inceliğini belirler.

font-size absolute-size (xx-small | x-small | small | medium | large | x-large | xx-large)relative-size (larger | smaller)px , pt, %

Yazının büyüklüğünü

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

METİN

Word Spacing normal | <boyut:px vb.> Sözcük aralığı

Letter Spacing normal | <boyut:px vb.> Harf aralığı

Text Decoration none | underline | overline | line-through | blink

Metin süsleme

Vertical Alignment baseline | sub | super | top | text-top | middle | bottom | text-bottom | Yüzde:200% vb.

Dikey hizalama

Text Transformation none | capitalize | uppercase | lowercase

Metin dönüştürme

Text Alignment left | right | center | justify

Metin hizalama

Text Indentation Boyut | Yüzde Metin girintisi

Line Height normal | <sayı> | <boyut> | <yüzde>

Satır yüksekliği

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

RENK VE ARKAPLAN

Color Renk adı veya RGB değeri (red veya #FF0000 gibi)

Renk

Background Color Renk adı | RGB değeri (red veya #FF0000 gibi) | transparent

Arka plan rengi

Background Image url(images/resimadi.gif) Arka plana yerleştirilecek resmin adresi

Background Repeat repeat | repeat-x | repeat-y | no-repeat

Arka plan resminin hangi yönde tekrarlanacağını belirler.

Background Attachment scroll | fixed Sayfa kaydırma çubuğuyla hareket ettirildiğinde zeminin de hareket edip etmeyeceğini belirler.

Background Position yüzde | boyut | top | center | bottom| left | center | right

Zemindeki resmin sayfa üzerinde istenilen yere yerleştirilmesini sağlar.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

KUTU ÖZELLİKLERİ

Margin Sayısal değer. Nesnenin dışındaki nesnelere olan aralığını belirler.

Padding Sayısal değer. Doldurma

Border Width Sayısal değer. Kenarlık genişliği (kalınlığı)

Border Color Renk adı | RGB değeri Kenarlık rengi

Border Style none | dotted | dashed | solid | double | groove | ridge | inset | outset

Kenarlık stili

Border border-width | border-style | border-color

Kenarlık kalınlık, style ve rengi.

Width boyut | yüzde | auto Genişlik

Height boyut | auto Yükseklik

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

LİSTE ÖZELLİKLERİ

List Style Type disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Listenin harflerden mi yoksa sayılardan mı oluşacağını belirler.

List Style Image adres | none (list-style-image: url(images/maddeimi.gif) gibi.)

Liste simgesi olarak resim kullanılmasını sağlar.

List Style Position inside | outside Listenin ilk satırının diğer satırlar aynı hizada olup olmayacağını belirler.

List Style list-style-type | list-style-position| adres (list-style: lower-roman inside gibi.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Örnek Uygulamalar Örnek Uygulamalar

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

a:link {font-family:tahoma;font-size:9pt; color:blue;text-decoration:none;}

Sayfamdaki linklerin1.Yazıtipi tahoma 2.Yazı boyutu 9 punto 3.Rengi mavi olsun ve 4.Altı çizili de olmasın.

a:hover{font-family:tahoma;font-size:9pt; color:red;text-decoration:none; }

Üzerine gelindiğinde linklerin1.Yazıtipi tahoma 2.Yazı boyutu 9 punto 3.Rengi kırmızı olsun ve 4.Altı çizili de olmasın.

a:visited{font-family:tahoma;font-size:9pt; color:grey;text-decoration:underline; }

Ziyaret edilen linklerin ise 1.Yazıtipi tahoma 2.Yazı boyutu 9 punto 3.Rengi gri olsun ve 4.Altı da çizili olsun.

Alt çizgisi olmayan linkler Alt çizgisi olmayan linkler

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Katman Katman

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

AÇIKLAMA:Burada:• Position: Katmanın yerinin neye göre belirleneceğini (absolute,

pencere esas alınarak belirlensin), • Top: Pencereye göre kaç piksel aşağıda olacağını, • Left: Pencereye göre kaç piksel solda olacağını, • Width: Katmanın genişliğini, • Height: Katmanın yüksekliğini, • Background-color: Arkaplan rengini, • Overflow: Taşan metnin durumunun ne olacağını (hidden, gizli

kalsın, gösterilmesin), • Z-index: Üstüste geldiğinde hangi sıra ile yerleştirileceğini (1.

katmana 1 değeri verilmiştir, dolayısıyla en altta o gösterilecektir), • Padding: Katmanın kenar çizgileri ile içindeki nesneler arasında

bırakılacak boşluğu, • Border: Kenar çizgilerinin kalınlık, kenarlık türü ve rengini

belirtmektedir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Liste Liste

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

AÇIKLAMA:• "list-style-image" parametresi listeye HTML ile veremeyeceğimiz

bir özellik kazandırmakta ve liste simgesi olarak bir resmi kullanmamızı sağlamaktadır. "list-style" parametresi için verilebilecek alternatif değerler ise şunlardır:

• disc (Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.)

• circle (Liste biçiminin çember şeklinde olmasını sağlar.) • square (Liste biçiminin kare olmasını sağlar.) • decimal (Liste biçiminin rakamlardan oluşmasını sağlar.) • lower-roman (Liste biçiminin i,ii,iii gibi küçük roma

rakamlarından oluşmasını sağlar.) • upper-roman (Liste biçiminin I,II,II gibi büyük roma

rakamlarından oluşmasını sağlar.) • lower-alpha (Liste biçiminin a,b,c şeklinde küçük harf olmasını

sağlar.) • upper-alpha (Liste biçiminin A,B,C şeklinde büyük harf olmasını

sağlar.) • none (Listenin simgesiz olmasını sağlar.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

WEB PROGRAMLAMA DİLLERİ WEB PROGRAMLAMA DİLLERİ

• İnternette yaygın olarak kullanılan iki dil vardır. Javascript ve VBScript.

• Bunların kullanım alanları da ikiye ayrılabilir: İstemci üzerinde veya sunucu üzerinde çalışmaları.

• İstemci üzerinde çalıştığında kodlar genelde sayfanın <head> bölümüne <script></script> etiketleri içine yazılır.

• Sunucu üzerinde çalışmaları ise ASP veya PHP ile olabilir. Örneğin ASP de script kodları <% … %> işaretleri arasına yazılır ve sunucu tarafında çalışarak sonucu sayfa üzerinde istemciye ulaştırır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

WEB TASARIM PROGRAMLARI WEB TASARIM PROGRAMLARI

Web tasarım programları görsel ve kod tabanlı olarak ayrılabilir.GÖRSEL: WYSIWYG (What you see is what you get / Ne görürseniz onu alırsınız) olarak nitelendirilen bu tür programlarda kullanıcı kendisi HTML kodu yazmaz, sayfa web browser’daki gibi görüntülenir, kullanıcılar Word’de yazı yazar gibi sayfayı oluştururlar, HTML kodları program tarafından oluşturulur. Bu tür programlara Microsoft Frontpage, Macromedia Dreamweaver vs. örnek verilebilir. (Bu programlar çoğu zaman kod tabanlı programların yeteneklerine de sahip olabilir.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Dreamweaver

FrontPage

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

KOD TABANLI:

Kullanıcının kod yazarak sayfayı oluşturduğu programlardır. Macromedia HomeSite, HotDog Pro vb. Bu tür programlar genelde PHP, ASP, VBScript gibi dilleri otomatik tanırlar ve kod tamamlamayı önerme özelliklerine sahiptirler.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Homesite

Hotdog Professional

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

DREAMWEAVER DREAMWEAVER

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Site tanımlamak Site tanımlamak • Site menüsünden New site'ye tıklanır. • Site name başlıklı metin kutusuna sitenin

adı yazılır. • Local root folder başlıklı metin kutusuna

sitenin yolu yazılır. (Bunun için simgesi kullanılabilir.)

• Default images folder başlıklı metin kutusuna resimlerin konulacağı klasör yazılır.

• İsteğe bağlı olarak da diğer bölümler doldurulabilir. Bundan sonra oluşturduğumuz her sayfa varsayılan olarak buraya kaydedilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

• Sitenin bulunuduğu klasörün dizin yapısını Window / Files (F8) menüsüne tıklayarak görebiliriz. Böylece istediğimiz dosyaya kolayca ulaşabilir, internete göndermeyi kolaylaştırabilirsiniz.

• Yeni dosya oluşturmayı da Dosya / New menüsünden veya site haritasına sağ tuş / New File menüsüne tıklayarak yapabiliriz.

• NOT: • Dosyalara isim verirken aşağıdakilere dikkat edilmelidir:• Dosyanın adı ve uzantısı küçük harflerden oluşmalı ve link

verirken aynen, olduğu gibi yazılmalıdır. (resim.jpg ile resim.JPG linux server'lar için farklı dosyalardır ve olduğundan farklı yazıldığında doğru görüntülenmez.)

• Türkçe karakterler kullanılmamalıdır. (ı, İ, ş, ç, ğ, ö, ü) • Kelimeler arasında boşluk birakılmamalıdır. (Boşlukların alt

tire ile doldurulması gelenek halini almıştır. "resim adi.jpg" yerine "resim_adi.jpg" yazılabilir.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Dökuman özelliklerini ayarlamak Dökuman özelliklerini ayarlamak

Oluşturulan sayfanın özelliklerini değiştirmek için Modify/Page Properties (Ctrl+J) kullanılabilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Appearance bölümünde şu özellikleri değiştirebiliriz:• Page Font: Sayfada kullanılacak yazıtipi. • Size: Yazının boyutu. • Text Color: Yazı rengi. • Background color: Arkaplan rengi. • Background image: Arkaplana yerleştirilecek resim. • Repeat: Arkaplan resminin hangi yönde tekrarlanacağı. • Left Margin: Sayfa içindeki nesnelerin sol kenara uzaklığı. • Right Margin: Sayfa içindeki nesnelerin sağl kenara uzaklığı. • Top Margin: Sayfa içindeki nesnelerin üst kenara uzaklığı. • Bottom Margin: Sayfa içindeki nesnelerin alt kenara uzaklığı.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Links bölümünde şu özellikleri değiştirebiliriz:Link font: Sayfadaki köprülerin yazıtipi. Size: Sayfadaki köprülerin yazı boyutu. Link color: Sayfadaki köprülerin rengi. Rollover links: Fare ile üzerine gelindiğinde köprünün yazı rengi. Visited links: Ziyaret edilen sayfaları ait köprünün yazı rengi. Active links: Üzerine tıklandığında köprünün yazı rengi. Underline style: Köprünün alt çizgisinin olup olmayacağı.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

ProgramıHeadings bölümünde başlıkların yazıtipi, boyut ve renkleri belirlenir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı Title/Encoding bölümünde şu özellikleri değiştirebiliriz:1. Title: Sayfanın başlık çubuğunda görüntelecek

metin. 2. Document Type: Belge türü. 3. Encoding: Dil kodlaması.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı Tracing Image bölümünde şu özellikleri değiştirebiliriz:1. Tracing image: Sadece dreamweaver içerisinde görünen

ve tarayıcı içerisinde görünmeyen bir resim ekler. 2. Transparancey: Bu resmin saydamlık ayarlarını yapar.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Metin Biçimlendirme Metin Biçimlendirme Seçili metnin özelliklerini değiştirmek için Window/Properties (Ctrl+F3) kullanılır.

Burada şu özellikler değiştirilebilir:Format: Seçili metnin başlık veya normal paragraf olacağı. Font: Yazıtipi Style: Önceden style tanımlanmışsa seçili metnin id'si veya mensup olduğu sınıf (class). Size: Boyutu. Link: Metne verilecek köprü. (Köprü oluşturmayı metni seçtikten sonra simgesine tıklayıp hedef dosyayı göstererek veya simgesini Files panelindeki hedef dosya üzerine sürükleyip bırakarak yapabiliriz.) Target: Hedef sayfanın ne şekilde açılacağı. (Yeni sayfada, ana çerçevede, kendisinin bulunduğu çerçevede vs.)

: Metin hizalama (Sol, orta, sağ, iki yana yaslı) : Madde işareti, numaralandırma, girinti artır ve girinti azalt. : Kalın, italik. :Yazı rengi.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Çerçeve Çerçeve Çerçeveler:• Çerçeveler aynı kodları her sayfada tekrarlamaktan

bizi kurtarır. Çerçeve sayfası gerçekte iki bölümden oluşur. Ana sayfa ve çerçeveler. Ana sayfa çerçeve bilgilerinin tutulduğu sayfadır. Çerçeve sayısı kadar bölümlere ayrılır ve her bölümde ilgili sayfa gösterilir.

Çerçeve Oluşturmak: • Çerçeve oluşturmak için File/New/Framesets

menüsünü kullanabiliriz. Açılan pencerede nasıl bir çerçeve oluşturabileceğimize yönelik bazı kalıplar sunulur. Burdan istediğimizi seçerek çerçevellerin oluşmasını sağlayabiliriz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Var olan bir sayafaya çerçeve eklemek için ise Insert Araç Çubuğunda Layout seçilir. simgesine tıklanarak istenilen çerçeve seçilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Çerçeveler Üzerinde Düzenleme Yapmak:

Çerçeveler Üzerinde Düzenleme Yapmak:

• Oluşturulan çerçevenin genişliklerini değiştirmek için çerçeve çizgilerini istediğimiz yöne çekebiliriz. ( )

• Çerçevelerle ilgili ayrıntılı ayarlar için Window/Frames menüsünde açabileceğimiz Frames Paneli kullanılabilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Panel üzerinde hangi çerçeve üzerine tıklarsak Properties panelinde o çerçeve ile ilgili ayarlar açılacaktır. Eğer görünmeyen ana sayfa (frameset) üzerinde düzenleme yapmak istiyorsak dış çizgiye tıklamamız gerekir.

Aynı işlem düzenleme yaptığımız alanda da yapılabilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

1.Border: Kenarlığın olup olmayacağı (Yes, No, Default) 2.Border width: Kenar kalınlığı 3.Border color: Kenarlık rengi 4.Row: Üst çerçevenin yüksekliği (Örnekte ekranın 80 pikselini üst çerçeve, geri kalanını da alt çerçeveler kaplamaktadır.)

Ana çerçeve seçili olduğunda Properties panelinde yapılabilecek düzenlemeler şunlardır:

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Diğer çerçevelerden herhangi birisini seçtiğimizde yapabileceğimiz düzenlemeler de şunlardır:

Src: Çerçevenin adresi. Scroll: Kaydırmanın olup olmayacağı. (Yes, No, Auto, Default) Yes seçili olduğunda kaydırma çubukları her zaman görüntülenir, No seçili olduğunda kaydırma çubukları hiç bir zaman görüntülenmez, Auto olduğunda içerik taşarsa kaydırma çubuğu görüntülenir, yoksa görüntülenmez.) Borders: Kenar çizgisisinin olup olmayacağı (Default, Yes, No). Border color: Kenar çizginin rengi. No resize: Boyutlandırmanın yapılıp yapılamayacağı. Margin width: Çerçeve içindeki nesnelerin sol kenara uzaklığı. Margin height: Çerçeve içindeki nesnelerin üst kenara uzaklığı.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

NOT: Herhangi bir çerçevede oluşturulan köprünün belirli bir çerçevede açılmasını istiyorsak iki yol tutabiliriz:1.Köprü seçili durumdayken Properties panelinde, Target başlıklı açılır kutudan hedef çerçevenin adı seçilir.

2. Sayfanın <head>...</head> bölümüne <base target="cerceveadi"> kodunu eklemek. Böylece aksi belirtilmedikçe varsayılan hedef çerçevenin hangisi olacağı belirtilmiş olur.

Bun da Insert/Tag/Page Composition/Base yolu takip edilerek yapılabilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Nesne eklemek Nesne eklemek

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

ListeListe

Üç tür listeden söz edilebilir:• Sıralı Liste (Numaralandırma) • Sırasız Liste (Madde İşareti) • Tanımlama Listesi.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Sıralı Liste (Numaralandırma)Sıralı Liste (Numaralandırma)• Sıralı liste oluşturmak için Text/List/Ordered List

menüsü veya Properties panelindeki ( ) simgesi kullanılabilir. Alt maddeler oluşturmak için ( ) simgesine tıklanır. Yeniden üst maddeden devam etmek için de ( ) simgesine tıklarız.

• Oluşturulan listenin özelliklerini Window/Tag Inspector panelinden değiştirebiliriz. Properties panelinin üzerinde, üzerinde çalıştığımız metnin etiketlri sıralanır.

• Buradan sıralı listeyi ifade eden <ol> etiketine tıkladığımızda Tag Inspector panelinde liste ile ilgili ayarlara ulaşırız.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

• Compact: Listenin daha az yer kaplamasını sağlar.

• Type: Listenin türünü belirler. (A, a, I, i, 1)

• Start: Listenin hangi karakterden başlayacağı.

• <li> etiketini seçili hale

getirdiğimizde Tag Inspector panelinde seçili liste öğesi ile ilgili ayarlara ulaşırız.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

<li> etiketini seçili hale getirdiğimizde Tag Inspector panelinde seçili liste öğesi ile ilgili ayarlara ulaşırız.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Sırasız Liste (Madde İşareti)Sırasız Liste (Madde İşareti)

Madde İşareti oluşturmak için Text/List/Unordered List menüsü veya Properties panelindeki simgesi kullanılabilir. <ul> etiketine tıkladığımızda Tag Inspector panelinde liste ile ilgili ayarlara ulaşırız. Type parametresi; circle ( ), disc ( ), square ( ) değerlerini alabilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Tanımlama ListesiTanımlama Listesi• Bunun için Text/List/Definition menüsü kullanılabilir. Bu

liste türü örneğin bir kavramı açıklarken kullanılabilir.• Açıklanacak kavramı yazdıktan sonra Enter tuşuna

bastığımızda metin bir miktar sağa kaydırılacak ve tanım için bir bölüm oluşturulacaktır. Yeniden Enter tuşuna bastığımızda ise metin yeni tanım için sola kaydırılacaktır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

TabloTablo

• Tablo eklemek için Insert/Table menüsünü veya ( ) simgesini kullanabiliriz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

• Burada belirleyebileceğimiz tablo özellikleri şunlardır:• Rows: Satır sayısı. • Columns: Sütun sayısı. • Table width: Tablonun piksel veya yüzde olarak

genişliği. • Border thickness: Kenarlık kalınlığı. • Cell padding: Hücrenin içindeki nesnelerle hücre

çizgisi arasında bırakılacak boşluk. • Cell spacing: Hücre çizgileri arasında bırakılacak

boşluk. • Header: Başlık metni içeren hücrelerin hangileri

olacağı. Burada belirlenen hücreler varsayılan olarak kalın ve ortaya hizalanmış olarak görüntülenir.

• Caption: Başlık. Buraya yazılan metin tablonun üstünde görünür.

• Align caption: Başlığın nereye hizalanacağı. • Summary: Özet.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Tablo üzerinde ayrıntılı ayarlar için Properties'i kullanabiliriz.

Tabloda herhangi bir hücrenin içine tıkladığımızda Properties panelinin üzerinde; seçili hücre, hücrenin bulunduğu satır ve tablonun kodları görünür. Buradaki <table> komutuna tıklayarak tabloyu seçili hale getirdiğimizde yeni özelliklere ulaşabilir, yukarıdakilerden farklı olarak:

1. Tabloya sınıf (class) veya id atayabilir, 2. Tablonun sayfada nasıl hizalanacağını (Align), 3. Arkaplan rengini (Bg color), 4. Arkaplana yerleştirilecek resmi ( Bg Image) 5. Kenarlık rengini (Brdr color) belirleyebiliriz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Soldaki simgeler ile de önceden belirlenmiş satır yükseklik ve sütun genişlik değerlerini temizleyebilir, piksel ile belirlenen değerleri yüzdeye, yüzde ile belirlenen değerleri piksele çevirebiliriz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

İstediğimiz hücreyi seçili hale getirdiğimizde ise Properties panelinin görünümü yukarıdaki gibi olur. Burada:1.Horz: Yatay hizalama, 2.Vert: Dikey hizalama, 3.W: Hücrenin genişliği, 4.H: Hücrenin yüksekiği, 5.No wrap: Metin kaydırma yapılıp yapılmayacağı, 6.Header: Hücrenin başlık hücresi olup olmaycağı, 7.Bg (Üstte): Arkaplan resmi, 8.Bg (Altta): Arkaplan rengi, 9.Brdr: Kenar çizgilerinin rengi belirlenebilir. simgesi ile seçili hücreler birleştirilebilir (veya sağ tuş/Table/Merge Cells ile), simgesi ile de hücre sütun veya satırlara bölünebilir (veya sağ tuş/Table/Split Cells ile).

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

NOT: Commands/Format Table ile otomatik tablo biçimi uygulayabilirsiniz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

ResimResim• Sayfamıza resim eklemek için

Insert/Image(Ctrl+Alt+I) veya Common araç çubuğundaki simgesini ( ) kullanabiliriz.

• Eklenen resmin özelliklerin değiştirmek için resme tıklayarak seçili hale getirmemiz gerekir. Bu durumda Properties paneli açılacaktır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

• Burada resimle ilgili şu değişiklikler yapılabilir. • Soldaki başlıksız ilk metin kutusu resme isim vermek için kullanılır. • W: Resmin genişliği. • H: Resmin yüksekliği. • Src: Resmin adresi. • Link: Resme köprü verilecekse hedef dosyanın adresi. • Alt: Fare ile resmin üzerine gelindiğinde görüntülenecek metin. • Class: Resmin style'de tanımlanan sınıfı. • Edit ( ) : Burada sırasıyla; seçili resmi Fireworks ile

düzenle, Fireworks ile optimize et, Kırp, Yeniden örneklendir, Parlaklık ve karşıtlık, Keskinleştirme işlemleri yapılabilir.

• V Space: Resmin sağ ve sol kenarlarıyla çevresindeki nesneler uzaklığı. • H Space: Resmin üst ve alt kenarlarıyla çevresindeki nesneler uzaklığı. • Target: Resme link verilmişse açılacak sayfanın ne şekilde açılacağı

(Yeni pencerede vs.) • Low Src: Resim yüklenene kadar yerine konacak küçük resim. • Border: Resmin kenar çizgisinin kalınlığı. • Align: Resmin nereye hizalanacağı (Sola, sağa, üste, alta, ortaya vb.) • ( ): Resmin nereye hizalanacağı. (Sola, ortaya, sağa. Bunun

yukarıdakinden farkı burada metin kaydırma yapılmamasıdır.) • Map: Resmi sanal parçalara bölerek herbiri için ayrı link verme vb. işler

için kullanılır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

KöprüKöprüLinkleri (köprü) dört gruba ayırabiliriz:1.Sitemizdeki başka bir dosyaya oluşturulan linkler. 2.Aynı sayfa içinde başka bir satıra oluşturulan linkler. 3.Sitemizin dışındaki başka bir web adresine oluşturulan linkler. 4.Mail gönderilmesi için oluşturulan linkler.

Sitemizdeki başka bir dosyaya köprü oluşturmak: Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusunda hedef dosya belirtilir. (Köprü oluşturmayı simgesini Files panelindeki hedef dosya üzerine sürükleyip bırakarak ya da simgesine tıklayıp hedef dosyayı seçerek de yapabiliriz.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Aynı sayfa içinde başka bir satıra köprü oluşturmak:Bunun için önce köpriye tıklandığında gidilecek satıra yer işareti olurturmamız gerekir. Hedef satıra gidip, Common araç çubuğundaki simgesine tıklayarak çıkan iletişim kutusunda işarete bir isim verdiğimizde imlecin bulunduğu yerde bir yer işareti oluşturmuş oluruz. Bundan sonra köprü verilecek metni seçerek Properties panelinde Link başlıklı metin kutusuna # işaretinden sonra, yer işaretine verdiğimiz ismi yazarız. (Köprü oluşturmayı simgesini yer işareti üzerinde sürükleyip bırakarak da yapabiliriz.)

Sitemizin dışındaki başka bir web adresine köprü oluşturmak:Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusunda hedef dosya yada web sitesinin adresi belirtilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Mail gönderilmesi için köprü oluşturmak:Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusuna başına "mailto:" getirilerek hedef mail adresi yazılır.

NOTLAR:

Başka bir dosyaya link oluşturmayı Common araç çubuğundaki simgesine tıklayarak da yapabiliriz. Burada text köprü oluşturulacak metni; link, hedef dosyayı; target, hedef dosyanın nerede açılacağını; title, fare ile üzerine geldiğimizde görüntülenecek metni; Access Key, alt+klavyeden bir tuş'a basılıp enter'a basıldığında bizi hedef dosyaya götürecek kısayol harfini; Tab index, tab tuşuna ardarda bastığımızda kaçıncı sırada seçili köprüye odaklanılacağını belirler.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

•Mail göndermek için köprü oluşturmayı Common araç çubuğundaki simgesine tıklayarak da yapabiliriz.

Target parametresinin beş değeri vardır: a._blank: Hedef dosyayı yeni bir pencerede açar. b._parent: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın herhangi bir çerçevede değil ana pencerede açılmasını sağlar. c._self: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın köprünün bulunduğu çerçevede açılmasını sağlar. d._top: Yer işareti oluşturmadan sayfayı, sayfanın en üstüne kaydırmayı sağlar. e._cerceveadi: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın adı verilen çerçevede açılmasını sağlar. ("cerceveadi", çerçeve oluştururken, çerçeveye verdiğimiz isimdir.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Hedef dosyayı gösterirken adres göstermeyi iki şekilde yapabiliriz: Mutlak ve göreceli.

Yukarıdaki köprüde hedef sayfanın tam adresi verilmiştir.

Yukarıdaki köprüde ise hedef sayfanın adresi göreceli olarak verilmiştir. Yukarıdaki köprü ile browser'a şu anlatılmaktadır: Açılacak hedef dosya, şu an açık olan dosyanın bulunduğu yerde bulunan "dosyalar" klasörünün içindeki "hedefdosya.htm" adlı dosyadır.

"../" ise bir üst klasörü ifade eder. "../dosyalar/hedefdosya.htm" anlamı ise şudur: Açılacak hedef dosya, şu an açık olan dosyanın bulunduğu yerden bir üst klasörde bulunan "dosyalar" klasörünün içindeki "hedefdosya.htm" adlı dosyadır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Flash NesnesiFlash Nesnesi• Sayfamıza flash nesnesi eklemek için Insert/Media

menüsünü kullanabiliriz. Burada 6 seçenek kullanılabilir:

• Flash: Sayfaya flash dosyası (*.swf) ekler. • Image Viewer: Flash web albümü oluşturur. • Flash Text: Sayfaya hazır Macromedia Flash yazısı

ekler. • Flash Button: Sayfaya hazır Macromedia Flash butonu

ekler. • Flash Papper: Sayfaya .swf uzantlı flash paper ekler. • Flash Video: Sayfaya .flv uzantlı flash video ekler.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Sayfaya flash eklemek Sayfaya flash eklemek Insert/Media/Flash menüsüne tıklanarak .swf uzantılı dosyanın yolu gösterilir. Seçili hale getirdiğimizde açılan Properties panelinden flash nesnesinin özelliklerini değiştirebiliriz.

W: Genişlik, H: Yükseklik, File: Flash dosyasının (.swf) adresi, Src: Kaynak dosyasının (.fla) adresi. Edit: Düzenle, Reset Size: Boyutu sıfırla, Class: Mensup olduğu style dosyasında tanımlanan sınıf adı. Loop: Bittiğinde yeniden oynat,

Autoplay: Otomatik oynat. V Space: Flash dosyasının sağ ve sol kenarları ile çevresindeki nesneler arasında bırakılacak boşluk, H Space: Flash dosyasınınüst ve alt kenarları ile çevresindeki nesneler arasında bırakılacak boşluk, Quality: Görüntü kalitesi, Scale: Ölçek, Align: Hizalama, Bg: Arkaplan rengi, Play: Çalıştır

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Image Viewer EklemekImage Viewer EklemekInsert/Media/Flash Image Viewer menüsüne tıklanır ve dosyaya ad verilerek kaydedileceği yer gösterilir. Sağda otomatik açılan Flash Element panelinde imgURLs ile slayt oluşturulacak resimler gösterilir.

Yine aynı panel üzerinde showControls ile ileri, geri vb. kontrol düğmelerinin görüntülenip görüntülenmeyeceği, slideAutoPlay ile otomatik çalıştırılıp çalıştırılmayacağı, slideDelay ile resimler arasındaki gecikme, slideLoop ile gösteri bittiğinde baştan yeniden gösterilip gösterilmeyeceği vb. özellikler belirlenebilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Flash Text eklemek Flash Text eklemek Insert/Media/Flash Text menüsüne tıklanır. Çıkan iletişim kutusunda yazı tipi, boyutu, rengi, üzerine gelince alacağı renk, metin, tıklanınca gidilecek hedef dosyanın adresi, hedef dosyanın nerede açılacağı, arkaplan rengi, oluşturulacak dosyanın adı vb. özellikleri belirtiriz. Sonuçta oluşacak flash metin aşağıdaki gibi olacaktır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Flash Button eklemek Flash Button eklemek Insert/Media/Flash Button menüsüne tıklanır. Burada butonun sitili, buton üzerinde görüntülenecek metin, yazıtipi, yazı boyutu, tıklanınca açılacak hedef dosyanın adresi, hedef dosyanın nerede açılacağı, arkaplan rengi, hangi dosya adıyla kaydedileceği belirtilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Flash Paper Eklemek Flash Paper Eklemek

Insert/Media/FlashPaper menüsüne tıklanır. Flash dosyasının adresi, yükseklik ve genişliği belirtilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Flash Video Eklemek Flash Video Eklemek Insert/Media/Flash Video menüsüne tıklanır. Burada video türü, videonun adresi, kullanılacak skin, videonun genişlik ve yüksekliği, boyutları orjinalinden farklı yazılacaksa boyutların orantılı olarak değiştirilip değiştirilmeyeceği, otomatik çalma, otomatik geri sarma işlemlerinin yapılıp yapılmayacağı belirtilir. NOT: Flv uzantılı flash video oluşturmak için Flash 8 Video Encoder kullanılabilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Video Eklemek Video Eklemek

Sayfamıza avi, mpg vs. uzantılarında video dosyaları eklemek için Insert/Media/Plugin menüsüne tıklanır ve video dosyası seçilerek OK tuşuna basılır. Sayfamızda şeklinde bir simge oluşacaktır. Bu simgesi seçili hale getirerek Properties veya Window/Tag Inspector panelinden özelliklerini belirleyebiliriz.

Buradaki değerler sayfaya ses eklemek ile aynı olduğundan parametrelerin açıklamaları için ses ekleme slaydına bakılabilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Ses Eklemek Ses Eklemek • Window/Behaviors menüsüne tıklanırve açılan

Tag/Behaviors panelinde aşağıdaki işlemler yapılır:• + işaretine tıklanır, Açılan menüde Play Sound'da basılır.

Browse tuşuna basılarak ses dosyasını adresi belirtilir.• Sayfa üzerinde şeklinde bir simge belirecektir. Aslında

bu bilgisayarımızda yüklü olan varsayılan video oynatıcıdır (Genelde de Windows Media Player). Bu nesneyi seçili hale getirerek aşağıdaki özelliklerini değiştirebiliriz:

W: Nesnenin genişliği. H: Nesnenin yüksekliği (0 değeri nesnenin sayfada görünmemesini sağlayacaktır). Src: Ses dosyasının adresi. Plg URL: İlgili plugin'in download adresi.

Align: Hizalama Class: Mensup olduğu, style dosyasında oluşturulan sınıf adı. Play: Çalıştır. Border: Çerçeve kalınlığı.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Parameters tuşuna basarak diğer bazı özelliklere de ulaşabiliriz

Loop: Bitince yeniden başlatılıp başlatılmayacağı. Autostart: Otomatik çalıştırılıp çalıştırılmayacağı. Hidden: Gizli veya görünür olup olmayacağı.

Aynı özelliklere Window/Tag Inspector panelinden de ulaşılabilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Image Map Eklemek Image Map Eklemek İmage Map, resmin istenilen bölümlerine köprü oluşturmak için kullanılır.

Yukarıdaki resimde hangi tuşa basılırsa, o tuşun işlevlerinin anlatıldığı sayfaya gidilsin istediğimizi varsayalım.Resmi seçili hale getirdiğimizde Properties paneli açılacaktır. Image map oluşturmak için buradaki Map bölümünü kullanırız.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Örneğimizde klavye tuşlarına köprü verileceğimiz için biz kare işaretleme aracını kullanacağız. simgesine tıkladıktan sonra resimde istediğimiz bölümü işaretleriz.

İşaretlenmiş alana link vermek için, o alanı seçili hale getirdikten sonra Properties panelinde link başlıklı metin kutusuna hedef dosyanın adresi yazılır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Kayan Yazı Eklemek Kayan Yazı Eklemek Insert/Tag menüsüne tıklanır. Çıkan pencerede sırasıyla HTML Tags, Page Elements, Marguee, Insert'e tıklanır. Code görünümünde <marquee></marquee> etiketleri arasına istediğimiz metin yazılır. Özellikleri üzerindeki değişiklikleri, Window/Inpector'a tıklayarak açabileceğimiz Tag paneli üzerinden yapabiliriz.

Burada değiştirebileceğimiz bazı özellikler şunlardır:Scrollamount: Yazının bir defada kaç piksel hareket

edeceği. ScrollDelay: Yazının her bir hareketi arasında kaç

milisaniye bekleneceği. Direction: Kayma yönü (Yukarı, aşağı, sağa, sola) Widht: Kayan yazı bloğunun genişliği. Height : Kayan yazı bloğunun genişliği. Loop: Kaç defa tekrarlanacağı. Varsayılan sürekli

tekrarlanmasıdır. Behavior: Hareket şekli (Scroll seçildiğinde yazı, sınırın

bir köşesinden belirerir, diğer köşeden kayarak kaybolur, Slide seçildiğinde yazı bir köşeden başlayarak diğer köşede donar, Alternate seçildiğinde ise metin iki köşe arasında gidip gelir.)

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

CSSCSSStyle ile ilgili işlemler için Window/CSS Styles menüsünden CSS panelini kullanabiliriz.

Daha önceden style dosyası oluşturulmuşsa, oluşturulan dosyadaki kodların geçerli sayfa için de geçerli olması için sayfamıza eklememiz gerekir. Bunun için simgesine tıklar ve açılan iletişim kutusunda dosyanın adresini belirtiriz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Yeni bir style dosyası oluşturmak için ise simgesine tıklarız. Bu durumda aşağıdaki iletişim kutusu açılacaktır.

Burada "Selector Type" bölümünde class veya id seçicilerinin mi kullanılacağı, yoksa bir etiket için mi style tanımlamaları yapılacağını seçeriz.Class seçildiğinde bizden sınıf adı, Tag seçildiğinde style tanımlamaları yapılacak etiketin adı, Advanced seçildiğinde ise id adı istenir."Define in" ile ise yeni bir style dosyasında mı yoksa geçerli sayfada mı style tanımlamalarının yapılacağı belirtilir.Yeni style dosyası oluşturmak için (New Style Sheet File) seçilir. Çıkan iletişim kutusunda dosya adı yazılarak kaydedilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Sonraki adımda oluşturduğumuz style için ayarları yapabileceğimiz bir pencere açılacaktır.

Burada istediğimiz değişiklikleri yapıp OK tuşuna bastğımızda CSS panelinde oluşturduğumuz tanımlamalar görünecektir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Artık oluşturduğumuz style tanımlamasını sayfada kullanabiliriz. Bunun için istenilen metin seçilir ve Properties panelindeki "Style" bölümünden class adı seçilir.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Şablon Kaydetme Şablon Kaydetme • Gerçekte bir site oluştururken ilk yapmamız gereken bir

arayüz, örnek bir sayfa hazırlamak olmalıdır. Sayfa tasarımı son haline gelince, yeni sayfalarda da aynı tasarımı kolayca kullanabilmek için şablon olarak kaydetmek gerekir.

• Ancak bunu yapmadan önce şablon olarak kaydedilecek sayfada düzenlenebilir alanlar oluşturmamız gerekir. Çünkü şablon olarak kaydettiğimizde düzenlenebilir alanlar dışındaki yerler düzenlenemez hale gelir.

• Bunun için imleci düzenlenebilir alan oluşturmak istediğimiz yere getirir ve Insert/Template Objects/Editable Region menüsüne tıklarız.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Çıkan iletişim kutusunda düzenlenebilir alan alan için bir ad yazarız. Sonuçta sayfada aşağıdaki gibi bir alan oluşacaktır.

Örneğimizde düzenlenebilir iki alan oluşturulmuştur: Başlı ve metnin yazılacağı iç tablo. İleride bu şablonu kullanarak bir sayfa oluşturduğumuzda sadece bu iki alan üzerinde değişiklik yapabileceğiz. Oluşturduğumuz şablonu File/Save As Template menüsü kullanarak kaydedebiliriz.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

• Burada site tanımlanmışsa hangi site için şablon kaydedileceği, açıklaması ve şablonun adı bizden istenir. Daha önceden oluşturulan şablonlar da "Existing templates" bölümünde sıralanır.

• Kaydedilen şablon sitemizin bulunduğu klasöre Templates klasörü içine kaydedilir. Dreamweaver da ise Window/Assets panelinden şanlonlara ulaşabiliriz.

• Şablondan yeni bir sayfa oluşturmak için Window/Assets menüsünden ulaşabileceğimiz Assets panelinde gösterilen şablonumuza sağ tıklar ve çıkan menüden "New from Template" e tıklarız.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Resimde görüldüğü gibi düzenlenebilir alanlara istediğimizi yazabiliyoruz, ancak diğer alanlar düzenlenememektedir.

NOT:1. Şablon üzerinde değişiklik yapıldığında o şablona bağlı tüm

sayfalarda da aynı değişiklikler yapılır. 2. Oluşturulan düzenlenebilir alnı silmek için

Modify/Templates/Remove Template Markup menüsünü kullanabiliriz.

3. Şablona bağlı bir sayfayı şablondan kurtarmak ve tümüyle düzenlenebilir hale getirmek için Modify/Templates/Detach From Template menüsü kullanılır.

Ankara - 2006



Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

Bilişim

Teknolojileri

Formatör

Öğretmen

Eğitimi

Programı

KAYNAKLAR:KAYNAKLAR:

• Macromedia Dreamweaver MX 2004, Khristine Annwn Page, Medyasoft, 2006.

• http://www.dreamweaver.gen.tr/

Documents

Web Tasarımı