DREAMWEAVER DERS NOTLARI - Eğitimde bilişim …...D- Sayfaya tablo eklemek: Common ya da Layout başlığı altında gelen simgelerin içinden “table” simgesi tıklanır 1-Gelen

Gülcay KORKMAZ e_post@: [email protected]

Bilgisayar Öğretmeni web:http://www.egitimde-bilisim.com

Yazılım Uzmanı

1

DREAMWEAVER DERS NOTLARI

Yeni sayfa oluşturmak-Var olan sayfayı açmak

1- Yeni sayfa oluşturmak için: Create New Seçeneğinin

altındaki HTML seçilir

2- Daha önce yaptığımız çalışmalara kısa yollarından erişmek

için:Open a Recent Item menüsünün altından ilgili sayfanın

linki tıklanır.

3- Daha önce oluşturulmuş ancak kısa yolu olmayan sayfaları

açmak içinde yine Open a Recent Item menüsünün altındaki

“open” seçeneği seçilir. Gelen ileti kutusundan dosyanın

olduğu yere geçilerek dosya açılır

DREAMWEAVER sayfa bölümleri

1- Ana menülerin bulunduğu “menu çubuğu”

2- DREAMWEAVER’ a özel simgelerin bulunduğu Nesne

paneli

a- common

b- Layout

c- Forms

d- Text

e- HTML



Yazılım Uzmanı

2

f- Application

g- Flash Elements

h- Favorites

3- Properties Bölümü: Bu bölümde seçili nesne ya da yazılara

biçim verilir. Çeşitli işlemler yapılır

4- Çalışma ortamı: Tüm tasarımın yapıldığı gövde bölümüdür.

5- Document Bölümü:

- sayfanın görünüm modunun (code: sadece

HTML kodlarının göründüğü mod, split: Hem

tasarımın hem de kodlaırn göründüğü mod,

design: Sadece tasarımın göründüğü mod)

değiştirildiği alt bölüm

- title: sayfaya başlık yazısının verildiği bölüm

- Preview:Sayfanın Ön izlemesinin yapıldığı

bölüm,

- View Option:Sayfanın bazı detaylarının

ayarlandığı (satır numaraları, dizayn bölümüm

altta mı üste mi olması durumu, cetvelin

görünmesi v.b durumların ayarlandığı

bölümlerin bulunduğu kısımdır

- Desing View on top: Tasarım bölümünün üstte

olması

Çalışma sırasında yeni bir sayfa oluşturmak ve kaydetmek için;

1- File menüsünden New seçeneği seçilir

2- Gelen ileti kutusundan HTML seçeneği seçilir ve cereate

tuşu tuşlanır.

3- Yeni açılan dosya başlıksızdır. Tasarıma geçmeden bir ad ve

htm uzantısı vererek kaydetmek işimizi kolaylaştırır.

4- Yeni sayfayı kaydetmek için File menüsünden Save seçeneği

seçilir. (Ya da Ctrl+S tuşlarına basılır)

NOT: Dosya adı verirken boşluk, özel işaret ve Türkçe

karakterler kullanılmaz.

Yeni sayfada yapılacak işlemler (Genel Olarak Tasarım

adımları):



Yazılım Uzmanı

3

A- Yeni sayfada çalışırken karşımıza üç değişik çalışma

modu çıkar:

1- Code: Sadece HTML kodlarının göründüğü çalışma

modudur.

2- Split: Sayfayı ikiye böler. Üstte HTML kodları, altta ise;

tasarım görünümü bulunur.

3- Desing: Sayfa sadece tasarım görünümündedir.

B- Sayfada tasarıma geçmeden önce kod bölümünden “title”

tag’inin arasına, sayfanın başlık çubuğunda görünen açıklaması

yazılır.

C- Sayfada tasarıma başlarken ilk yapılacak iş tablo

eklemektir. Daha sonra bu tablonun hücrelerine yazılar, simgeler,

resimler, animasyonlar v.b. eklenir. İsteğe göre tablonun border’ı

0 yapılabilir. Böylece kenarlık olmaz

D- Sayfaya tablo eklemek: Common ya da Layout başlığı

altında gelen simgelerin içinden “table” simgesi tıklanır

1- Gelen ileti kutusunda Rows(satır) ve Colum(sütun)

sayıları girilerek ok butonu tıklanır.

2- Tabloyu sayfada ortalamak için;

- Table tag’inden önce div tag’i açılır. Align

parametresinden center seçeneği seçilir. (örnek:

<div align=”center”> )

- Ya da Tablo seçilir, properties den align

seçeneklerinden center seçilir.

3- Tabloda birden fazla hücre birleştirmek için;

- Birleştirilecek hücreler seçilir

- Seçilen hücrelerden herhangi bir hücre

üzerindeyken mouse’un sağ buton menüsünden

table seçeneği seçilir

- Table seçeneklerinden “merge cells” seçeneği

seçilir.

4- Tablonun genişliğinin sayfa genişliği ile birlikte

boyutlandırılması için width parametresi “100%”

yapılmalıdır.

5- Tablo da seçili satırın üstüne satır eklemek için; Mouse sağ

buton-table-insert row seçeneği ya da Mouse sağ buton-



Yazılım Uzmanı

4

table-insert rows or columns seçeneğinden “Above” seçeneği

seçilir

6- Tablo da seçili satırın altına satır eklemek için; Mouse sağ

buton-table-insert rows or columns seçeneğinden “Below”

seçeneği seçilir.

7- Tabloda seçili bir hücrede ışıklı çizgiyi yatay olarak

hücrenin içinde hizalamak için;”td” tag’in içinde valign

parametresi kullanılarak gelen listeden seçim yapılır ya da

properties den “vert” listesinden istenilen hizalama seçilir.

E- İfadelere link vermek: Web sayfalarında resimler,

simgeler ya da yazılarla başka sayfaya geçmek için linkler

oluşturulur. Bu linkleri oluşturmak için;

İfadenin başında “a” tag’i açılır, ifadenin sonunda da

“a” tag’i kapatılır.

(örnek: <a href="iletisim.htm"> Iletisim</a>)

F- İfadelere daha önce oluşturulmuş style verebilmek için;

önce ifade seçilir, properties bölümü, style listesinden, daha

önce oluşmuş uygun style seçilir.

G- Sayfaya resim eklemek için; insert seçeneğinden image

seçeneği seçilir. Gelen ileti kutusundan resim seçilir.

H- İndex sayfası ilk yüklendiğinde anasayfanın gelmesi için;

- index sayfasında sayfanın açılacağı hücrenin “td tag’i içine

“iframe” tag’i açılır. Açılan bu tag’e çeşitli parametreler

verilir. Örnek: (<iframe name=”ilk” src=”anasayfa.htm”>)

name parametresi ile iframe bir ad verildi. Src ile ilk

açıldığında yüklenmesi istenen dosya referans edildi.

- Linklerin iframe de açılması için; link verilen yerde “a”

tag’inin devamına “target” parametresi ile iframe nami

yazılır. Örnek: (<a href=”iletisim.htm” target=”ilk”> ilgili

sayfa iframe’de açılır.

SAYFAYA IFRAME EKLEME

IFRAME tag’i ile aynı sayfa içine diğer sayfaları açma işlemi

yapılır. Bu işlemi, yapmak için;

1- Sayfaların açılacağı sayfa da (sayfaların açılacağı hücreye)

<IFRAME name="yeni" width="100%"

src="anasayfa.htm"></iframe>



Yazılım Uzmanı

5

ifadesi eklenir.

Parametrelerin anlamı:

- Name: Diğer sayfaların açılması için oluşturulan

linkte target için verilecek ad

- Src: bu sayfa ilk yüklendiğinde açılması istenen

sayfa

2- IFRAME içinde açılacak sayfaların linklerinde :

<td>

<a href="adres.htm" target="yeni">Adresimiz </a>

</td> adres.htm yeni adlı ifareme içinde açılır.

DİLEK VE ÖNERİ FORMU HAZIRLAMA

Bir web sayfasında kullanıcıdan bazı bilgiler girip gönderme

işlemi yapılacaksa aşağıdaki adımlar izlenmelidir:

1- Bilinen yöntemle sayfaya gerektiği kadar satır ve sütun

içeren tablo eklenir.

2- Tablonun 1. sütununa kullanıcı hangi bilgileri girecekse o

bilgiler için etiket yazılır. (örnek: Adı Soyadı, Mail adresi

…)

3- Tablonun ikinci sütununa ise kullanıcının değer gireceği

form nesneleri yerleştirilir. Form nesneleri form menüsü

altında bulunmaktadır. (örnek: textfield, textarea v.b.

gibi)

Bu nesneleri alırken ilk gelen ileti kutusunda Cansel,

ikinci kutucukta ise no butonu tıklanır.

FLASH BUTTON VE FLASH TEXT EKLEMEK

Sayfada istenilen yere link vermek için Flash buton ya da Flash

textlerden faydalanılabilir.

1- İlgili nesnesin ekleneceği yere konumlanılır

2- İnsert-Media-Flash buton(ya da text) seçilir.

3- Text kısmına linkin görünecek adı yazılır

4- Link kısmına da burası tıklandığında gidilecek adres yazılır

5- Bu nesnelerin zemin renginin sayfanın zemin rengine uyması

için, “bg color” bölümünden çıkan Mouse göstergesi ile

zemin rengi alınır



Yazılım Uzmanı

6

6- Bu yöntemle açılacak pencerenin farklı bir pencerede

açılması için “target” bölümünden “blank” seçeneği seçilir

SAYFAYA KAYAN YAZI EKLEMEK

Sayfaya kayan yazı eklemek için;

1- <marquee> tag’i açılır.

2- Bu tag’in direction metoduna yazıların nereye doğru

kayacağı yazılır

3- Align parametresine de yazıların sayfanın neresinden

çıkacağı belirtilir.

4- Scrolldelay parametresiyle de yazıların kayma hızı

belirlenir.

5- Kayacak olan ifade yazılır

6- En son olarak tag kapatılır (örnek </marquee>)

Örnek:

<marquee direction="down" height="300" align="up"

scrolldelay=400">

Uzay Çağının Tasarım Devi

<p> (Bu tag bir satır alta geçmeyi sağlar)

ABC Mankenlik Ajansı

</marquee>

ROLLOVER İMAGE EKLEMEK ( AYNI ANDA AYNI YERDE

FARKLI RESİMLERİN AÇILMASI)

Bir Resim üzerine mouse’la hareket edildiğinde farklı bir

resmin açılması için;

1- Resmin ekleneceği yere Mouse’la konumlanılır

2- Common araç çubuğundan ya da insert menüsünden

“rollover image” seçeneği seçilir

3- Gelen ileti kutusunda “orginal image” bölümüne sayfa ilk

yüklendiğinde gelecek resim browse’dan seçilir

4- “Rollover image” yerine de mouse’la üzerine gelindiğinde

açılacak resim seçilir ve ok tuşuna basılır



Yazılım Uzmanı

7

SAYFAYA LAYER EKLEMEK

Resim ya da nesnelerin üzerine yazı yazmak için(resmin ya da

nesnenin zemin desenini kaybetmeden);

1- İnsert menüsünden “Layout Object”- Ap Div (ya da layout

panelinden “draw ap div” nesnesi seçilir) seçeneği seçilir.

2- Böylece sayfaya bir kutucuk eklenir.

3- Bu kutucuk Mouse la bayutlandırılabilir.

4- Üzerine istenen yazı yazılır

SAYFAYA FON MÜZİĞİ EKLEMEK

1- Müzik nesnesinin ekleneceği yere Mouse konumlanır

2- İnsert- Media-Plugin seçeneği seçilir.

3- Böylece sayfanıza bir nesne gelir

4- Nesne gelir gelmez bir ileti kutusu açılır

5- Bu ileti kutusundan müziğin olduğu klasöre geçilir

6- Buradan müzik dosyası seçilir

RESME GİZLİ LİNK VERMEK

1- Resim sayfada istenen yere eklenir

2- Resim seçilir

3- Resim seçildiğinde properties bölümünde “map” seçenekleri

açılır

4- Bu seçeneklerden istenilen seçilir

5- Resimde ise link verilecek yer seçilir

6- Böylece link yeri işaretlenmiş olur

7- Properties de “link” bölümüne açılacak sayfanın adresi

verilir.

SAYFA İLE İLGİLİ BİÇİM DEĞİŞİKLİĞİ İÇİN

Sayfanın rengini, zemin resmini v.b. gibi değişiklikleri

yapmak için pages properties den işlem yapmak gerekir. Bunun

için de

1- properties bölümünden



Yazılım Uzmanı

8

2- sayfa üzerindeyken Mouse sağ buton menüsünden

3- Modify menüsünden işlem yapılabilir

Bu menüde; Title sayfanızı tanımlayan ismi yazacağınız bölümdür ve

browserlarda en üstte çıkar.

Background İmage sayfanın arka planını resim eklemek için

kullanılır.

Background sayfanın arka planını renklendirmek için kullanılır.

Text sayfada kullanılan yazıların rengini belirtmek için kullanılır.

Visited Links ziyaret edilmiş link rengini değiştirmenize yarar.

Links linklerinizin görünen rengini belirler.

Active Links o anda kullanılan link yani link tıklandığı zaman

görülen rengi değiştirmek için kullanılır.

Left Margin sayfa içerisinde bulunan nesnelerin (yazı, resim, tablo

vs.) sayfanın sol tarafına olan uzaklığını belirlemede kullanılır.

Top Margin sayfanın üst kenara olan uzaklığını belirlemek için

kullanılır.

Margin Width sayfanın eni ile ilgili margin ayarları yapmanızı

sağlar.

Margin Height sayfanın boyu ile ilgili margin ayarları yapmanızı

sağlar.

Document encoding sayfada kullanılacak olan dil karakterinin

tanımlaması burada yapılır.

Tracing İmage anlamı izleyen şekildir. Sadece dreamweaver

içerisinde görünen ve tarayıcı içerisinde görünmeyen bir resim

ekler sayfanıza.

İmage Transparancey tracing image'ın transparan ayarlarını

yapmaya yarar

LİNK VERME İŞLEMLERİ

Bir sayfa içindeyken başka sayfalara, başka sitelere ya da

sayfanın başka bir bölümüne gitmek gerekir bunun için bir text'e

ya da bir nesneye link vermek gerekir. Link verme çeşitleri ve

işlem basmakları



Yazılım Uzmanı

9

1- Aynı site içinde başka sayfaya link verme: Aynı site için

hazırlanmış ve aynı klasör içinde olan bir başka htm uzantılı

sayfayı çağırmak için;

- link verilecek text ya da nesne seçilir

- <a href="………………..">……</a> tag'leri

arasında,

- Modify menüsünden, make link,

- Nesneler panelinden, common altındaki

hyperlink seçeneğinden

- Properties panelinden, link bölümünden

sayfanın adı yazılarak link verilir.

2- Başka Site adreslerine link verme: Site içinde başka sitelere

geçmek için o sitenin web adresi link bölümüne yazılır.

Başka site adreslerine link vermek için:

- link verilecek text ya da nesne seçilir

- <a href="………………..">……</a> tag'leri

arasında,

- Modify menüsünden, make link,

- Nesneler panelinden, common altındaki

hyperlink seçeneğinden

- Properties panelinden, link bölümünden web

adresi yazılarak link verilir. (örnek:

http://bhmedu.meb.gov.tr )

3- Email Linki vermek: Site içinde mail göndermek için link

verilebilir. Bunun için yukarıdaki seçeneklerin hepsiyle

email linki verilebilir, ancak mailto ifadesi yazılarak yanına

mail adresi yazılır. (örnek: mailto: [email protected] )

4- Sayfa içinde bir bölüme gitmek için link verme: Bazen

sayfalardaki açıklamalar çok uzun olabilir. Yazılar görünüm

olarak birden fazla sayfada olabilir. Sayfa içinde başka

bölümlere gitmek için;

- Gidilecek bölümün başında Mouse ile

konumlanılır

- Nesneler panelinden, common altındaki named

anchor seçeneğinden,

http://bhmedu.meb.gov.tr/

mailto:[email protected]



Yazılım Uzmanı

10

- İnsert menüsü altındaki yine named anchor

seçeneğinden işarete bir ad verilir.

- Daha sonra buraya nereden gelinecekse o text

ya da simge seçilir

- Link seçeneklerinden işaretlenen bölümün adı

yazılır (adın başına # işareti konur.

- Örnek: gidilecek link "Kitaplar" olsun bu

bölümün başına gelinir. Yukarıdaki işlemler

yapılır. Bu bölüme de "git 1. bölüm" olsun. Bu

ifade seçilir. Link bölümünden kitapların id si

yazırlı başına da # işareti konur.

AYNI SAYFA İÇİNDE FARKLI BÖLÜMLERE

GİTMEK İÇİN LİNK OLUŞTURMA

İŞLEMLERİ (ANCHOR)

Aynı sayfa içinde farklı bölümlere vereceğiniz

linklerle gidilebilir.

Bunun için;

1- Sayfa oluşturulur

2- Sayfada hareket edilecek (gidilecek) yerin (textin)

başında Mouse tıklanır

3- Common araç çubuğundan ya da insert menüsünden

“named anchor” seçeneği tıklanır

4- Gelen ileti kutusunda buraya bir ad verilir. (Bu ad

kurallara uygun şekilde olmalıdır)

5- Daha sonra buraya hareketi sağlayacak ifade seçilir

6- Properties den link bölümünde (# bu işaret altGr

ve 3 den çıkar) ve yanına da daha önce gidilecek yere

verilen ad yazılır.

SAYFADA GENEL OLARAK LİNK BİÇİM DEĞİŞİKLİĞİ

1- Sayfada boş bir yere tıklanarak properties bölümünde

“body” nin seçili olması sağlanır



Yazılım Uzmanı

11

2- Properties de “page properties” butonu tıklnaır

3- Gelen ileti kutusunda “Category” bölümünden link seçeneği

seçilir.

4- Açılan bölümde ;

- Link font: Link ifadesinin yazı biçimi

- Size: yazının boyutu

- Link color: edit sayfasında linkin rengi

- Rollover Links: Internet tarayıcısında linkin

üzerine Mouse yönlendiğinde linkin alacağı

renk

- Visited Links : Tarayıcıda henüz ziyaret

edilmemiş link ifadesinin rengi

- Active Links : Ziyaret edilmiş linkin rengi

- Underline Style: Linkin altı çizili olsun mu

olmasın mı (Never underline seçilirse linklerin

altı çizili olmaz)

JUMP(ATLAYAN) MENU İLE SAYFALARI

AÇMAK

1- Forms nesneleri ya da insert-forms menüsünde jump

manu seçeneği seçilir

2- Gelen ileti kutusunda;

- Text bölümüne liste satırlarında görünen ad

yazılır

- When Selected,g oto URL bölümüne bu satır

seçildiğinde hangi sayfa açılacaksa o sayfanın

adı

NOT: yukarıdaki iki seçnek her bir satır için tekrar

edilir. Satır eklemek için (+) işaretine basılır.

- Menu name bölümünü de bu eklenen nesnenin

adı yazılır

SAĞ PANEL (FILES)



Yazılım Uzmanı

12

1- Snippet (Parça-bilgi) Sekmesi Footers (Title and Hanging –

asılı- Link

Bu seçenekle sayfada belirtilen hücreye asılı (yan yana)

linklerin olduğu bir otomatik menü eklenir.

Menü seçenekleri isteğe göre azaltılıp çoğaltılabilir.

Azaltmak için seçip silmek gerekir

Çoğaltmak içinse, seçip kopyalamak gerekir.

Menü seçeneklerinin adını değiştirmek içinse seçip üzerine

yenisini yazmak gerekir

Linkini değiştirmek için, yine seçip ya html kodlarındaki "<a

href" ile başlayan yerdeki adı ya da properties deki link

seçeneğinde yazılı # işaretini silerek link vermek gerekir.

2- Gözat butonu: Butonun ekleneceği yere mouse’la

konumlanır

Sağ panelden; Files-Snippets-Accessible-Form Elements

“Browse-For-File Button” çift tıklanır, böylece

bulunduğunuz yere bir göz at butonu eklemiş olursunuz.

Ön izleme yapılır ve buton tıklanarak bilgisayarımızdaki

sürücüler-dizinler ve dosyalar listelenir.

Listeden istenen dosya seçilir, aç butonu tıklanır

2- Form Elements

- Dropdown menus: Sayfaya istenen formatta

açılır liste ekler (örnek: yıllar listesi- aylar

listesi)

- Close window Buton: Web sayfasını kapatan bir

buton ekler

- Text field, Autoclear: Özellikle digital

formlarda veri girişi yapmak için bir text ekler,

ancak bu textin içine bir mesaj ekler, kullanıcı

texe değer girmek için tıkladığında içindeki

mesaj otomatik olarak silinir



Yazılım Uzmanı

13

TASARIMDA NESNELERE BİÇİM VERMEK (STYLES)

Bir Web tasarımında en önemli iş hazırlanan tasarıma biçim

vermektir. Biçim verme işi ise üç türlü yapılır;

1- Nesnelerin ya da bölümlerin style parametrelerini

kullanarak sadece o yere biçim vermek: Örnek: bir text

elemanına ya da bir linke (a tag’ine) biçim vermek için; bu

elemanların style parametrelerinin alt parametrelerini

kullanarak tasarım yapılabilir. (<a href="mail.htm"

style="color:#333333; text-decoration:none”>) örnekte de

görüldüğü gibi a tag inin style parametresi kullanılarak

buradaki link ifadesi biçimlendirilmiştir. Ancak bu biçim

sadece burası için geçerlidir. Eğer başka bir a tag i açılırsa onu

da yeniden style parametresini kullanarak biçimlendirmek

gerekir.

2- <style> tag i kullanılarak Geçerli olan web sayfasında head

tag i arasına eklenecek style tagi içine etiketler eklenerek

sadece o sayfa elemanlarına ortak biçim verilebilir. Örnek:

dilek_oneri.html dosyasının head tag i arasında aşağıdaki

satırlar eklensin; <style type="text/css">

.style1 {

color: #996600;

font-weight: bold;

font-size: 14px;

font-family: "Comic Sans MS";

}

.detay_hucre {background-color:#CCFF66;

font:"Comic Sans MS";

color:#000033;

font-size:14px}

</style>

Buradaki etiketler sadece bu sayfadaki elemanlara örnek(td, a,

text, radio,list v.b) verilebilir. Ancak Projenin tüm sayfalarında

gerçerli olamaz. Bir projede tüm sayfalara ortak biçim vermek



Yazılım Uzmanı

14

için css dosyası hazırlanmalıdır. Bu dosya her sayfaya

çağrılarak etiketleri kullanılır. (aşağıda detaylı bir şekilde

anlatılmıştır)

3- Windows css den yeni bir style dosyası oluşturmak,

Css dosyası oluşturmak için new seçeneği seçildiğinde gelen

listeden “css” seçeneği seçilir, dosya açılır ve bir ad verilerek bu

dosya kaydedilir ya da bir HTM dosyası açıkken;

Not: Biçim verirken, style dosyasının içinde kod tamamlayarak

kendimizde yazabiliriz ya da sağ paneldeki CSS başlığı

altındaki araç çubuğundaki nesneleri kullanarak açılan ileti

kutusundaki seçenekleri kullanabiliriz.

css style panelinde sağ listeden new seçilir

Gelen ileti kutusunda: selector type ;

- class: etiketlere (.) işareti koyar ve tasarımda

kullandığımızda “class” parametresine atanır

- tag: hiçbir işaret olmaz, direk tag

kullanıldığında biçimlenir. (örnek a tag i için

sytle oluşturulunca link verilen yere otomatik

olarak atanır

- Advanced (ID): kullanılacak yerin “id”

parametresine atanır ve etiketin başında (#)

işareti açılır

Define in;

- New Style Seet Files: Yeni dosya oluşturulunca

seçilmelidir

- This document only : bir style dosyasına yeni

etiket eklenirken seçilir

Gelen ileti kutusunda name yerine css dosyasında

bulunacak ilk etiket adı verilir.

Gelen ileti kutusunda bu etiket için biçimler seçilir

Ok denildiğinde bir css dosya adı verilir ve kaydedilir.

Böylece bu dosya o anda çalışma yapılan htm

dosyasında head tag i arsında <link> tag i le referans

edilir.



Yazılım Uzmanı

15

Artık bu dosya da istenen elementin class

parametresinde etiketler referans edilir.

- Dışardan bir css dosyası eklemek için:

Sağ panelden CSS menü açılır.

Gelen bölümde properties üzerinde bulunan

araç çubuğundan “Attach Style Sheet”

seçeneği seçilir

Gelen ileti kutusunda “browse” butonuna

basılarak sayfaya eklenecek css dosyası

seçilir

Böylece bu scc dosyası artık projenize

eklenmiştir

HTML kodları içinde de eklendiğini

görebilirsiniz. (Head tag’i arasında <link

href="ilk.css" rel="stylesheet"

type="text/css" /> bu satırı gördüğünüzde

sayfanıza scc dosyaı seklenmiştir)

TABLOSUZ TASARIM (DIV TAG’LERİ İLE)

Yapılan sayfa tasarımında kullanılan tabloların, sayfanın değişik

boyutlandırılmasında ya da değişik tarayıcılarda (mozilla, firefox,

opera vb.) yerleri değişmektedir. Yani sayfanın tasarımı

kaymaktadır. İşte bunu önlemek için css dosyaları ya da style tag i

arasında oluşturulan css (Cascading Style Sheets)'nin

Türkçe karşılığı stil şablonları anlamındadır) Etiketlerini div taglarine referans edilir. Bu işlemler için

oluşturulan style dosyaları <head> tag’i arasına iki değişik şekilde

alınır :

1- Import medotu: <style type=text/css media=screen>@import

url(dosyaadi.css);</style>

2- Link medotu: <link href="dosyaadi.css" rel=stylesheet

type=text/css />



Yazılım Uzmanı

16

Ya da direk <head> tag’i arasına <style> tagi içine etiketler

yazılır.

Örnek:

<head>

<style type="text/css">

#dis_bolme {

width: 500px;

height:250px;

background-color: #666;

margin-right: auto; /* sağda sayfaya göre otomatik boşluk

var */

margin-left: auto;

border: 4px solid #FF0000;

}

.ic_bolme{

float:left;/* bölmelerin soldan sağa dizilimini gösterir. Eğer

float:none; olursa bölmeler alt alta sıralanır */

width:150px;

height:150px;

border:2px solid #CCC;

background-color: #F00;

margin-right: 5px;/* bölmelerin sağında 5 px lik boşluk var .

margin-bottom: 4px; bu şekilde yapılırsa da bölmeler alt alta

sıralanır*/

margin-left: 5px; /* bölmelerin solunda 5 px lik boşluk var */

}

</style>

</head>

<body>

<div id="dis_bolme"> <! -- yandaki rool # işareti ile oluşturulduğundan div

tag’inin id parametresine referans edilmiştir.-->



Yazılım Uzmanı

17

<div class="ic_bolme">Bölme1</div>



</div>

</body>

Yukarıdaki tasarımın çıktısı

ÇEŞİTLİ SCRIPTLER

SAFAYI KAĞIDA ALMAK

O anda görüntülenen bir web sayfasındaki yazıların, resimlerin

ya da nesnelerin kağıda alınması için;

1- Sayfaya form nesneleri arasından bir tane buton eklenir

2- Butonun value’su isteğe göre değiştirilir (örnek:sayfayı

kağıda al)

3- Butonun “onclick” metoduna bir javascript yazılır. (örnek:

onclick="javascript:window.print()")

4- İnternet sayfasında sayfa görüntülendiğinde buton tıklanır

ve yazdır ileti kutusu görüntülenir



Yazılım Uzmanı

18

5- Bu aşamadan sonra sayfa döküme hazırdır.

************************

RESİM GALERİSİNDEKİ RESİMLERİN FARKLI

PENCEREDE BÜYÜTÜLEREK AÇILMASI

1- Önce Galeri dosyası hazırlanır. Örnek: galeri.htm: Bu

dosya kaçtane resim varsa o kadar hücre içerecek şekilde

tablo eklenerek oluşturulur. Tablonun her hücresine

insert menüsünden image seçeneği seçilerek resimler

eklenir.

2- Galeride bulunan her resim için ayrı bir dosya

oluşturulur ve bu dosyalar farklı adlarla kaydedilir.

Örnek: resim1.htm, resim2.htm, resim3.htm ….

3- Resim dosyaları bittikten sonra galeri.htm’ye dönülür.

<head> </head> tag’inin arasına aşağıdaki script

yazılır.

<script language="javascript">

function pencere1() { open

("resim1.htm","","height=350,width=220,scrollbars=no,resizable

=no,status=no,menubar=no,toolbar=no,location=no")

}

function pencere2() { open

("resim2.htm","","height=350,width=220,scrollbars=no,resizable

=no,status=no,menubar=no,toolbar=no,location=no")

}

</script>

Yukarıdaki function bölümü her resim için yeniden

oluşturulur ve sadece (eflatun) renkle yazılı yerler değiştiril.

“pencere1” her resim için çalışacak function adı,

“resim1.htm” ise yine her resim için daha önce oluşturulmuş

dosyanın adıdır.

4- Bu functionlar yine galeri.htm de resimler seçilerek “img”

tag’inden önce aşağıdaki şekilde çağrılır:



Yazılım Uzmanı

19

<a href="javascript:pencere2()">

5- en son olarak resmin bulunduğu img tag’inden sonra a

tag’i kapatılır. (</a>) gibi

SAYFA İLK YÜKLENDİĞİNDE AÇILIR PENCERENİN

GELMESİ

Birçok web sayfası ilk açıldığında küçük bir pencere de

beraberinde açılır (diğer adı popup) Bu pencerenin açılması

için aşağıdaki adımlar izlenmelidir:

1- Önce açılması istenen sayfa oluşturulur ve bir ad verilir.

(örnek:ilan.htm)

2- Hangi sayfada açılacaksa o sayfanın <head> </head>

tag’leri arasına açşağıdaki kodlar yazılır:

<script language="JavaScript" type="text/JavaScript">

function pencere(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

</script>

3- Aynı sayfanın body tag’ine ise aşağıdaki kodlar yazılır.

<body

onLoad="pencere('ilan.htm','','width=500,height=300');">

NOT: Açılır pencerelerin sayfada işler hale gelebilmesi için,

engellemenin kaldırılmaıs gerekir ki zaten sayfa yüklendiğinde

size bir uyarı gelecektir.

WEB SAYFALARINI DEĞİŞİK EFECTLERLE AÇMAK

1- head Tag’i arasına

<SCRIPT LANGUAGE="JavaScript">



</script> eklenir

2- Body içinde bu sayfaya link verilecek yere de ;

Örnek: <a href="#" onclick="expandingWindow('test.htm'); return

false">Pencereyi Aç</a> eklenir

WEB SİTELERİNİ YAYINLAMAK İÇİN GEREKLİ

ADIMLAR

(domain ve hosting işlemleri)



Yazılım Uzmanı

21

1- Web sitesi için web sayfalarının hazırlanması gerekir

NOT: Sitede kullanılacak tüm sayfalar, css dosyaları, resimler,

hareketli nesneler, script dosyaları ve veri tabanı dosyalarının

aynı proje klasörü içinde olmasına dikkat edilir.

2- Bu web sitesini internette yayınlamak için bir web adresi

(domain name)

alınması gerekir. (örnek: http://www.yemeksepeti.com.tr)

3- Domain name nasıl alınır:

örnek:

------------------

http://www.co.cc/--->free domain alınan site adresi domain: Web

sitesi adresi

a- almak istediğiniz adresi yazın ve kontrol edin örnek

(www.kaanatagun.co.cc)

b- Bu sitede işlem yapabilmek için bir hesap oluşturulur

c- Gelen digital form doldurulur ve onay işlemi bittikten sonra

aşağıdaki mesaj görüntülenir.

"Your new domain has been successfully registered"

d- Artık bir web adresiniz var

e- Bu işlemler bittikten sonra domain ayarlarını yapmak üzere

gelen sayfada kur butonu (ya da iligili buton) tıklanır.

f- Bu domain adı 48 saat içinde onaylanır(regestre) Bu onay

belirttiğiniz mail adresinize bildirilir.

g- Onay işlemi mailinize bildirildiği andan itibaren hosting

(sitenizin yayınlanması için yer alma işlemleri) işlemlerini

başlatabilirsiniz.

4- Bu adla yayınlanacak web sitesi için hazırlanan sayfaları hosting

(sunucu) bilgisayara göndermek ve yer(alan) satın almak gerekir.

Hosting işleri ile ilgili kurumları bulmak için goole dan arama

yapmak yeterlidir.

5- Yer(hosting) satın almak için aşağıdaki adımlar izlenir

-------------------------------------------------



Yazılım Uzmanı

22

örnek:

1- http://www.acilhost.com adresinden üye olunuz üyelik

formunu doldurunuz.

2- Webhosting linkinden istenilen seçenekleri seçerek bir alan

alın. (alan alırken domain adresiniz de sorulacaktır)

3- Bu adımda ödeme şekliniz belirlenecektir

4- Gerekli ödemeler yapıldıktan sonra size (mail adresinize,

dosyalarınızı göndereceğiniz ftp adresi, kullanıcı adı, şifresi ve

sizin web adresiniz gelecektir)

5- Bu ftp adresini kullanarak (web de girerek) sayfalarınızı size

belirtilen alana gönderebilirsiniz

6- İşlem bittikten sonra adres çubuğuna size daha önce hosting

hizmeti veren şirketten gelen mail ile bildirilmiş adresi girerek

sayfalarınızı yayınlayabilirsiniz.

7- Yer satın aldıktan sonra sizin hosting şirketiniz sayfalarınızı

yayınlamak için size bir ftp adresi- kullanıcı adı ve şifresi

gönderecektir (bu bilgiler üyelik formunda girdiğiniz mail

adresinize gerelecektir)

SİTENİN ARAMA MOTORLARINDA ARANDIĞINDA

BULUNMASI İÇİN YAPILACAKLAR

Sitenizin web de arama motorlarında bulunması için neler

yapılmalı;

Sitenizin ilk yayın sayfasının (örnek: index.htm – index.asp)

<head> tag’i arasında <meta> tag’i içine aşağıdaki örnekteki

kodlar yazılır.

<meta name="keywords" content="bhm, bhem, baskent, çankaya,

halk, egitim, halk egitim, okul, kurs,çevre , badep,

açev,anaçev,belmek,çirak,kursiyer,ankara,aile,cilt

bakimi,kuaför,bilgisayar,resim,müzik,spor,dans,mesleki,sosyal">

Bu kelimelerle arandığında



Yazılım Uzmanı

23

<meta name="description" content="Baskent Halk Egitimi

Merkezi Kurslari "> bu linkle görünecek

Yukarıda birinci tag’de: “keywords” anahtar kelimeler

anlamındadır. Yani bu kelimelerle arandığında anlamında

İkinci tag’deki "description" ise tanımlayıcı anlamında olup,

sayfa bulunduğunda hangi link başlığı ile görüntülensin

NOT: Sitenizin Arama motorlarında üst sıralarda görünmesi

için aşağıdakilere dikkat edilmeli;

- Sitenizin domain name’i gov,edu,mil,org

uzantılara sahipse zaten üst sıralarda

listelenirsiniz

- Sitenizin domain name’i sub domain değilse

yine üst sıralardasınız

- Siteniz com uzantılı olup, aynı zamanda sonuna

tr almışsa yine üst sıralardasınız

- Sitenizin domain name’i adı aldığınız sitenin

uzantısı ile yayınlanıyorsa alt sıralarda yer

alırsınız

- Siteniz google adsense ya da ad words’e kayıtlı

ise yine üst sıralarda yer alırısınız

SİTENİZE REKLAM ALMAK (Adsense)

Google sayfasında “Adsense” linkine girilir ve aşağıdaki işlem

basamakları sırasıyla gerçekleştirilir.

Önce Google ADsense a üye olunur. Üyelik sırasında 1-2 güne

kadar belirttiğiniz mail adresine Reklam alanınızın edit işlemleri

için bilgiler gelecektir. Bu bilgileri kullanarak reklam alanınızın

biçimini değiştirebilirsiniz (aşağıdaki gibi)

Adsense reklam alanı biçim ayarları

----------------------------------------

……[email protected]



Yazılım Uzmanı

24

şifresi: _..........

adresi ile girilir

1- Reklam Türüseçildi

2- Biçim olarak 120 x 240 seçildi

3- renkler Sınır:FFFFFF

Başlık :000000

Arka Plan :FFD600 seçildi

Metin : 666666 seçildi

URL : 940F04 seçildi

4- Yazı tipi verdana seçildi

5- Köşe stilleri haifif yuvarlanmış seçildi

6- herhangi bir reklam yoksa kamu reklamları olsun seçildi

7- performansı izlemek için gerekli olan kanal seçilmedi

8- kod aşağıdaki gibi oluşturuldu

9- Yayıncı No: pub-……………..

10- AdSense birimi: 120x240, oluşturulma 16.09.2009

Bu adımlardan sonra ayarlar kaydedilir. Mail adresinize, sitenizin

ana sayfasına eklenmek üzere , (örnek: index.htm- index.asp) bir

script gelir. Bu scripti anasayfanızın html kodları içine (reklamın

sayfasınızın neresinde görünmesini istiyorsanız ) yapıştırıp

yeniden sunucuya göndereceksiniz.

Bilgileri Güncellemek için, yine google-adsense bölümünden

mail adresiniz ve şifrenizle girerek, gelen sayfadan ; "Reklamları

Yönet"linki tıklanır.

Mailinize gelecek örnek script :

<script type="text/javascript">

</script>

<script type="text/javascript"



Yazılım Uzmanı

25

src="http://pagead2.googlesyndication.com/pagead/show_ads.js

">

</script>

SİTENİZİN REKLAMINI VERMEK(AdWords)

Sitenizin reklamını vermek için de Goggle AdWords işleminden

üye olmanız gerekir. Üyelik sırasında sizden belirli bir miktar

ödenti de istenir. Üyelik işlemleri yukarıdaki Adsense de

olduğu gibidir.

Documents

DREAMWEAVER DERS NOTLARI - Eğitimde bilişim …...D- Sayfaya tablo eklemek: Common ya da Layout başlığı altında gelen simgelerin içinden “table” simgesi tıklanır 1-Gelen