DREAMWEAVER DERS NOTLARI

Transkript

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 1

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ı): 2

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- 3

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> 4

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 5

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 6

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 7

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ı 8

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: ) 3- Linki vermek: Site içinde mail göndermek için link verilebilir. Bunun için yukarıdaki seçeneklerin hepsiyle linki verilebilir, ancak mailto ifadesi yazılarak yanına mail adresi yazılır. (örnek: mailto: gkorkmaz@meb.gov.tr ) 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, 9

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 10

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) 11

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 12

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 13

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. 14

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 /> 15

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.--> 16

17 <div class="ic_bolme">bölme1</div> <div class="ic_bolme">bölme2</div> <div class="ic_bolme">bölme3</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 17

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: 18

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"> <!-- Begin function expandingwindow(website) { // Dikine açılma hizi (Yüksek değer=hızlı) var heightspeed = 2; 19

20 // Genişlemesine açılma hizi (Yüksek değer=hızlı) var widthspeed = 7; // Soldan Kaç Piksel solda görünecek var leftdist = 0; // Yukarıdan Kaç Piksel aşağıda görünecek var topdist = 0; if (document.all) { var winwidth = window.screen.availwidth - leftdist; var winheight = window.screen.availheight - topdist; var sizer = window.open("","","left=" + leftdist + ",top=" + topdist + ",width=1,height=1,scrollbars=yes, location=yes, status=yes, toolbar=yes,menubar=yes"); for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed) { sizer.resizeto("1", sizeheight); } for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed) { sizer.resizeto(sizewidth, sizeheight); } sizer.location = website; } else window.location = website; } // End --> </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) 20

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: 3- Domain name nasıl alınır: örnek: domain alınan site adresi domain: Web sitesi adresi a- almak istediğiniz adresi yazın ve kontrol edin örnek ( 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

22 örnek: 1- 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 22

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ı @gmail.com 23

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 : Arka Plan :FFD600 seçildi Metin : 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 AdSense birimi: 120x240, oluşturulma 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 "; /* 120x240, oluşturulma */ google_ad_slot = " "; google_ad_width = 120; google_ad_height = 240; //--> </script> <script type="text/javascript" 24

25 "> src=" </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. 25