dreamweaver ders notları

Transkript

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
Gülcay KORKMAZ
Bilgisayar Öğretmeni
Yazılım Uzmanı
1
e_post@: [email protected]
web:http://www.egitimde-bilisim.com
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ı):
Gülcay KORKMAZ
Yazılım Uzmanı
2
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ğ butonGülcay KORKMAZ
Yazılım Uzmanı
3
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>
Gülcay KORKMAZ
Yazılım Uzmanı
4
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
Gülcay KORKMAZ
Yazılım Uzmanı
5
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
Gülcay KORKMAZ
Yazılım Uzmanı
6
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
Gülcay KORKMAZ
Yazılım Uzmanı
7
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ı
Gülcay KORKMAZ
Yazılım Uzmanı
8
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,
-
Gülcay KORKMAZ
Yazılım Uzmanı
9
-
İ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
Gülcay KORKMAZ
Yazılım Uzmanı
10
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)
Gülcay KORKMAZ
Yazılım Uzmanı
11
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
Gülcay KORKMAZ
Yazılım Uzmanı
12
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
Gülcay KORKMAZ
Yazılım Uzmanı
13
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.
Gülcay KORKMAZ
Yazılım Uzmanı
14
 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 />
Gülcay KORKMAZ
Yazılım Uzmanı
15
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.-->
Gülcay KORKMAZ
Yazılım Uzmanı
16
<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
Gülcay KORKMAZ
Yazılım Uzmanı
17
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:
Gülcay KORKMAZ
Yazılım Uzmanı
18
<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)
Gülcay KORKMAZ
Yazılım Uzmanı
20
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
------------------------------------------------Gülcay KORKMAZ
Yazılım Uzmanı
21
ö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
Gülcay KORKMAZ
Yazılım Uzmanı
22
<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]
Gülcay KORKMAZ
Yazılım Uzmanı
23
ş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"><!-google_ad_client = "pub-4505608178527962";
/* 120x240, oluşturulma 16.09.2009 */
google_ad_slot = "6562130715";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
Gülcay KORKMAZ
Yazılım Uzmanı
24
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.
Gülcay KORKMAZ
Yazılım Uzmanı
25

dreamweaver ders notları

Transkript

Benzer belgeler

23. Hafta - Akasya Koleji

SEO BACKLINK YARATMA TEKNİKLERİ

SURFER Yazılımı ile Hava Kirliliği Haritası Çizimi

Bilimsel Keşfin Beklenmedik Kaynağı Raslantı

dumlupınar üniversitesi - WebSitem

Tasavvuf Gazetesi ~Sayfa 1 29 Ekim 2013/ Salı

Scrapbooking

NO: AD SOYAD:

dalebrook 2011 kataloğu yayında

ekran bölümleri - egitimde

Ekran Görünümü Değiştirmek

RUMA-Marker

Yıl:5 Hafta:15 Sayı: 14

8016 17 xx, 8014 13 xx KNX push-button 1gang with

IPS Style - Ivoclar Vivadent