DREAMWEAVER DERSLERÝ Yazan:Efdal ÇELÝK

Transkript

1 DREAMWEAVER DERSLERÝ DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) Yazan:Efdal ÇELÝK file:///c /Belgelerim/Web/dreamweaver/index.htm [ :45:55]

2 DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) DREMWEAVER NEDÝR? DREAMWEAVER DERSLERÝ Macromedia Dreamweaver, profesyonel bir Web sitesi geliþtirmeniz için ihtiyaç duyacaðýnýz her þeye sahip görsel (WYSIWYG) bir HTML editörüdür. Yazan:Efdal ÇELÝK file:///c /Belgelerim/Web/dreamweaver/1.htm [ :46:10]

3 DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) TÜRKÇE AYAR DREAMWEAVER DERSLERÝ Dreamweaver programýný kurduðumuzda dil ayarlarý karþýmýza ingilizce olarak gelir. Yani çalýþma alanýna herhangi bir türkçe karakterli birþey yazamayýz. Bu derste bu sorunu giderecek ve DW'a hýzlý bir giriþ yapacaðýz. Programa yabancý olacaðýnýz için menülere hiç girmeden Ctrl+U kýsayolu ile uygulama yapacaðýmýz alana geçelim. Açýlan pencerede bazý seçenekler ve menüler çýkacaktýr. Bu seçenekleri aþaðýdaki gibi yapalým: Default Encoding: Other Font Settings: Other Proportional Font: Türkçe olan herhangi biri Fixed Font: Türkçe olan herhangi biri Code Inspector: Türkçe olan herhangi biri Evet, bu ayarlarý yaptýktan sonra yine menülere girmeden Ctrl+J yapalým :). Açýlan penceredeki Document Encoding menüsünden Other'ý seçip, buradanda çýkýyoruz. Son olarak HTML bölümümüze (þekil 1'deki alandan giriyoruz) <head> taglarýný siliyoruz ve aþaðýdaki kodu ekliyoruz yerine: <meta http-equiv="content-type" content="text/html; charset="> <meta http-equiv="content-type" content="text/html; charset=iso "> Yazan:Efdal ÇELÝK file:///c /Belgelerim/Web/dreamweaver/2.htm [ :46:12]

4 DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) OBJELER (OBJECTS) DREAMWEAVER DERSLERÝ Adýndanda anlaþýlacaðý gibi en çok kullanacaðýmýz bölüme geldik sýra. Objeleri Window menüsünden ekrana getirebilirsiniz (Ctrl+F2). Ekrana gelen pencere þekilde de görmüþ olduðunuz gibi bir sürü ikonla dolu. Common seçili olan alandaki seçeneklere bir göz atalým (bkz.þekil2). Characters: Bu bölüm sayfalarýnýza ekleyebileceðiniz bazý sembolleri barýndýrýyor. Copyright, Euro vs. Common: Sýrasýyla tanýyalým: Image: Ýmaj dosyasý eklemenizi saðlayan obje. Rollover Image: Rollover, yani üstüne gelince deðiþen imaj uygulamasý. Sýrf bu özellik için DW kullanmaya baþlayan kiþiler tanýyorum :). Table: Table çizmek için. Tabular Data: Burada bulunan Gözat çalýþmamýza dosya çaðýrmamýzý saðlar. Diðer seçenekler ise çaðýracaðýmýz dosyanýn koþullanacaðý table ayarlarý oluyor. Draw Layer: Ýstediðiniz yere, sanki bir çizim programýnda çalýþýyormuþ gibi katmanlar oluþturmanýzý saðlar. Biz bu layer larý istediðimiz yere taþýyabiliriz. (bkz.þekil3) Navigation Bar: Sürekli duran bir menü örneði. Ýmajlarý siz belirliyorsunuz. Horizontal Rule: Düz çizgi koymamýzý saðlýyor. Bu ve bunun gibi uygulamalarýn özelleþtirmelerini ileriki derslerde göreceðiz. Link: Pek gereði olmayan bir obje. Baðlantý kýsmýna mailto yazmayla uðraþmak istemiyorsanýz kullanabilirsiniz. Date: Sitenizin güncellendiði saati koyar. Server-Side Include: Bir server nesnesini veya dosyasýný koymanýzý saðlar. Fireworks HTML: Fireworks ile hazýrlamýþ olduðunuz çalýþmalarý bu obje ile kolayca çalýþmanýza yerleþtirebilirsiniz. Insert Flash: swf dosyasý koymak için karýþýk kodlarla uðraþmanýzý sona erdiren süper bir uygulama. Flash Button: Havalý sayfalar için flash buttonlarý. Mutlaka denemelisiniz. Flash Text: Sizde bulunan bir fontu baþkasýnýnda görmesini saðlamak için bir yöntem. Bu obje ile yazýnýzý file:///c /Belgelerim/Web/dreamweaver/3.htm (1 of 2) [ :46:14]

5 yazýn swf olarak kendi kaydetsin. Shockwave: Macromedia Shockwave dosyalarýný seçmenizi saðlar. Generator: Macromedia Generator dosyalarýný seçmenizi saðlar. Forms: Form araçlarý. Frames: Çok kullanýþlý bir bölüm. Çeþitli çerçeveler. Sayfalarýnýza frame koymak için seçeneklerden birine týklamanýz yeterli. Head: Sitenizi arama motorlarýnda üst sýrada görmek için kullanabilirsiniz. Karýþtýrmanýzda fayda var. Kodlarla hiç uðraþmýyorsunuz. Invisibles: ICQ'dan yabancý olmadýðýmýz bu terimde üç tane uygulama bulunuyor. Bunlar sýrasýyla þöyle: Named Anchor: Sayfa içi link verme olayý. Ýstediðiniz bir yere koyuyorsunuz ve bir isim veriyorsunuz. Daha sonra sayfa için herhangi bir yazý veya resimin link verme bölümüne # iþaretini koyup anchor a vermiþ olduðunuz ismi yazýyorsunuz. Link verdiðiniz yere týklayan kullanýcýlar anchor un bulunduðu yere gidiyor. Script: Java Script kod eklemenize yarayan profesyonel bir hizmet :) Comment: HTML kod bölümüne yorum ekleme. Special: Applet, Plugin ve ActiveX öðelerini buradan koyabilirsiniz. Yazan:Efdal ÇELÝK efdal@ulcbigisayar.com file:///c /Belgelerim/Web/dreamweaver/3.htm (2 of 2) [ :46:14]

6 DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) ÖZELLEÞTÝRMELER (PROPERTIES) Ctrl+J kýsayoludur. DREAMWEAVER DERSLERÝ Burada anlatýlacak özellikler fazla deðil ve anlaþýlmasý çok kolay. Onun için herkesin bilmediði özellikleri göreceðiz. Text Özelleþtirmeleri: Metinlerimizi yapýlandýrmamýzý saðlayan kýsýmdýr. Format bölümü içindeki seçenekler ile yazýlarýmýzý kolayca biçimlendirebiliriz. Yanýndaki Default Font seçili olan bölümle fontumuzu ayarlarýz. Ama DW'da sýk kullandýðýmýz fontlara kolayca ulaþmak için Macromedia bir kolaylýk sunmuþ bizlere. Font Listesi. Þimdi Default Font yazan yere týklayýn ve alt taraftan Edit Fon List seçeneðini týklayýn. Burada karþýnýzda bir pencere açýlacaktýr. Bu penceredeki + ve - iþaretleri ile listemize yeni fontlar ekleyebilir veya çýkarabiliriz. Text özelleþtirmelerinde Target bölümü ise link verdiðimiz bir adresin ne konumda açýlacaðýný belirtir. Örneðin; _blank baðlantýnýz farklý bir pencerede açýlmasýný saðlar. DW'nýn en sevdiðim özelliklerinden biride kalem ikon þeklinde görülen Quick Tag Editor uygulamasý. Bu uygulama ile HTML kodlarýný kolayca yazabilir veya biyerden alýp anýnda yapýþtýrabilirsiniz. Son olarak açýklayacaðým yer þekildede görmüþ olduðunuz dört ufak buton. Bunlarda Unordered List, nokta yöntemi ile liste oluþturma, Ordered List ise sayý yöntemi ile. Yanýndaki iki buton ise paragraflarýmýzý içeri ve geriye kaydýrma için kullanýlýyor. file:///c /Belgelerim/Web/dreamweaver/4.htm (1 of 2) [ :46:16]

7 Table Özelleþtirmeleri: Öncelik table özelliðtirmelerine girmeden önce bir özelliði görelim. Þekil 4'de görmüþ olduðunuz gibi programýn alt sol tarafýnda <body>, <table> gibi taglar gözüküyor. Bu taglar kolay select için konulmuþtur. Örneðin çizdiðiniz table 'ýn tümüne uygulayacaðýnýz renklendirme, boyutlandýrma vb. özelleþtirmeleri yapmak için table 'ý seçmeniz gerekiyor. Bu iþlemi <table> 'ý týklayarak gerçekleþtirebilirsiniz. Table Name, tablonuza vereciðiniz ismi temsil eder. Ýleride yapacaðýnýz daha deðiþik çalýþmalarda gerekecektir. Onun yanýndaki Rows, yatay ve Cols ise dikey hücreler eklemenizi saðlar. Boyutlandýrmayý W ve H ile yanlarýnda bulunan yüzde ve pixel formatýnda yapabilirsiniz. CellPad kutucuðu hücre içi býrakýlan payý, CellSpace ise hücreler arasý býrakýlan payý temsil eder. Align hizalama yapmamýzý saðlar. Border kalýnlýk ayarýdýr. Þimdi anlatýcaðým özelleþtirmelere sað tarafta bulunan aþaðý gösteren ok'a týklayarak ulaþabilirsiniz. Gözümüze ilk çarpan dört tane buton görünüyor yine. Bazen iþimizi çok kolaylaþtýrabiliyor. Bunlar hücreler arasý boylarý ve boþluklarý ayarlýyor. Bg Color ve yanýnda bulunan Brdr Color renklendirme için. Bg Color tablonuzun tümünü boyar, Brdr Color çerçevenin rengidir. Son olarak Bg Image, table 'ýnýzda uygulayabileceðiniz bir arkaplan imajý uygulayabilmenizi saðlar. Table bölümü bitti. DW'da hücrelere ait özelleþtirmelerde vardýr. Yani hücre içi. Ayarlarý kolayca hücre içine bir kere týkladýktan sonra çýkan menüden yapabilirsiniz. Bu arada hücre içi özelleþtirmelerin yaný sýra Layer, Horizontal Rule vs. uygulamalarýn özelleþtirmelerinide eðer bu dersleri anlamýþsanýz yaparken hiç zorlanmayacaksýnýz. Yazan:Efdal ÇELÝK efdal@ulcbigisayar.com file:///c /Belgelerim/Web/dreamweaver/4.htm (2 of 2) [ :46:16]

8 DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) PAGE PROPERTIES Modify bölünmden Page Properties seçeneðini týklamnýz sizin sayfa içi genel ayarlarý yapmanýz için bir pencere açacýktýr. Buradaki seçenekleri teker teker tanýyalým: Title: Sayfa baþlýðý koymanýzý saðlar. Background Image: Arkaplana imaj yerleþtirmek için. Background: Arkaplan rengini belirlemek için kullanýlýr. Ýsterseniz þekilde de gördüðünüz gibi renk kodlarýnýzý kolayca yazabilirsiniz. DREAMWEAVER DERSLERÝ Text: Boþ bir alana hiçbir özelleþtirme yapmadan yazdýðýnýz yazýnýn rengini buradan ayarlayabilirsiniz. Links: Baðlantý verilmiþ yazýnýn alacaðý renk durumu. Visited Links: Önceden girilmiþ baðlantýyý belirtir. Active Links: Linkli baðlantýya týkladýðýnýzda alacaðý renk durumu. Margin yazýlý olan kýsýmlar, çalýþma sayfalarýnýn kenarlarýndaki paylarý temsil eder. Document Encoding: Dil seçeneði. Türkçe ayar yapmak için kullanmýþtýk. Tracing Image: Transparan bir arkaplan yapmak için kullanýlýyor. Bu seçeneðin altýnda bulunan Image file:///c /Belgelerim/Web/dreamweaver/6.htm (1 of 2) [ :46:18]

9 Transparency netliði ayarlýyor. Yazan:Efdal ÇELÝK file:///c /Belgelerim/Web/dreamweaver/6.htm (2 of 2) [ :46:18]

10 DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) Pencereler DREAMWEAVER DERSLERÝ Pencerelere ister Window menüsünden istersenizde sað altta bulunan ufak ikonlardan ulaþabilirsiniz. Biz bu derslerde bu pencerelerden en çok iþimize yarayabileceklerini göreceðiz. Behaviors Çeþitli Java Script uygulamalarýnýn yer aldýðý bölümdür. Buradan hazýr script'leri sayfanýza koyabilirsiniz. Ayrýca kendinizde ekleyebilirsiniz. Peki nasýl?. Bunu Extensions dersinde görebilirsiniz. Burada bulunan bazý uygulamalar: Go To URL: Yönlendirme seçeneðidir. Go To URL'ye týkladýðýnýzda karþýnýza bir kutucuk gelir. Bu kutucuða yazaðýnýz adres, sayfanýz açýlýr açýlmaz yönleneceði baðlantý olacaktýr. Frame'li sayfalarda istediðiniz bölgede uygulayabilirsiniz. Open Browser Window: Ýstediðiniz boyutta ve özelleþtirmede, istediðiniz bir dosyaya baðlantý yapmanýzý saðlýyor. Yazý veya resme týklayýnca, üstüne gelince vs. durumlarda açýlmasýný penceredeki OnLoad yazýsýnýn yanýndaki oka týkladýktan sonra çýkan seçeneklerden ayarýný yapablirsiniz. Örneðin: OnClick (üstüne týklayýnca). Diðer uygulamalar içinde bu geçerlidir. Play Sound: Ses dosyasý eklemenizi saðlar. Pop-up Mesage: Uyarý mesajýyla istediðiniz yazýyý ekrana getirebilmenizi saðlayan bir seçenek. Set Text > Set Text of Status Bar: Durum çubuðuna yazý yazýdrmak için. file:///c /Belgelerim/Web/dreamweaver/5.htm (1 of 2) [ :46:20]

11 CSS Styles DW'nin bize saðladýðý büyük bir kolaylýk. Ýstediðiniz özelleþtirmeyi kaydederek kolayca istediðiniz yazýya tek týklamayla uygulayabilirsiniz. Yeni bir stil oluþtumak için oka týklayýn ve seçeneklerden New Style'ý seçin. Oluþturacaðýnýz dosyayý bilgisayarýnýza kaydedin. Þunuda hatýrlatmamda yarar var. FTP yoluyla server'a kaydettiðiniz dosyayýda yollamanýz gerekiyor. Kaydettiðiniz stil pencereye gelecektir. Ayarlarýný Edit Style Sheet seçeneðinden yapabilirsiniz. Uygulamasý çok basit. CSS Styles penceresinde kendi stilinize bir kere týklamanýz yeterli. Stili daha önceden hazýrlanmýþ bir yazýya uygulamak için, yazýyý kapsayýp stile týklamanýz yeterli olacaktýr....dýðer Reference Unuttuðunuz ve ne anlama geldiðini bilmediðiniz taglarýn anlamlarýný buradan öðrenebilirsiniz. Alfabetik olarak sýralanmýþ taglara biraz bakmanýzda fayda var. Tabii ingilizceniz varsa. History Adýndanda anlaþýlabileceði gibi Photoshop mantýðýnda geçmiþte yapmýþ olduðunuz çalýþmalarý belgeler. Layers Oluþturduðunuz katmanlarýn pozisyonlarýný ayarlayabileceðiniz pencere. Çoklu layer sayfalarý için. Frames Çerçeveleri kolayca seçmemiz için tasarlanmýþ. Yada bana öyle geldi :)). Yazan:Efdal ÇELÝK file:///c /Belgelerim/Web/dreamweaver/5.htm (2 of 2) [ :46:20]

12 DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) Extensions (Eklentiler) DREAMWEAVER DERSLERÝ Extension, Macromedia'nýn script editörüdür. Ýnternettende indirebileceðiniz bu eklentileri bilgisayarýnýza Macromedia Extension Manager programý ile kolayca yükleyebilirsiniz. Bu program Dreamweaver ile birlikte geliyor. Extension yükleme Bu dosyalarýn uzantýsý MXP 'dir. Tabii sadece Dreamweaver tabanlý bir olay deðildir. Macromedia'nýn diðer bazý ürünleriylede kullanýlabilir, ancak formatý farklýdýr. Dosyayý çift týklayarak açtýðýmýzda Manager programda açýlýr. Karþýnýza bir pencere gelir, devam etmek için týklayýn hesabý :). Bu soruya olumlu cevap veriyoruz (Accept) ve karþýmýza aþaðýdaki mesaj geliyor. Bu mesaj eklentiyi yüklediðimizin iþartidir. Eklentiyi yükledikten sonra Dreamweaver programýna otomatik kayýt edilmiþ olur. Þimdi þekle dikkatlice bakalým. Manager programýnda eklediðiniz script'ler görülür. Script içeriðini üzerine bir kere týkladýktan sonra aþaðýdaki pencereden bakabilirsiniz. Extension'ýn nereye yüklendiðini ise Type kýsmýndan öðrenebilirsiniz. file:///c /Belgelerim/Web/dreamweaver/8.htm (1 of 2) [ :46:22]

13 Yazan:Efdal ÇELÝK file:///c /Belgelerim/Web/dreamweaver/8.htm (2 of 2) [ :46:22]

14 DREAMWEAVER DERSLERÝ DERS1: Dreamweaver Nedir? DERS2: Türkçe ayar DERS3: Objeler (Objects) DERS4: Özelleþtirmeler (Properties) DERS5: Pencereler DERS6: Page Properties DERS7: Swap Image DERS8: Extensions (Eklentiler) Swap Image Rollover imajlar için karýþýk kodlarala uðraþmaya son. Swap Image sayesinde rollover imaj uygulamalarýný daha kolay yapabilirsiniz. Örnek bir çalýþma yapacaðýz. Üç tane imaj halinde yazý hazýrlayýn ve bu yazýlarýn aynýsýndan üç tane daha farklý renkte hazýrlayýn. Yine üç tanede ayný boyutta resim ve ayný boyutta bir boþ (transparan) imaj edinin. Yemek tarifi gibi oldu :). Üç tane yazýmýzý ve bir transparan imajýmýzý ekrana getiriyoruz. Hepsine özelleþtirmelerinden birer isim veriyoruz (bkz.þekil1). file:///c /Belgelerim/Web/dreamweaver/7.htm (1 of 2) [ :46:24]

15 Ýlk imaja bir kere týklayýn ve Behaviors penceresinden Swap Image seçeneðini týklayýn. Karþýnýza saðdaki pencere gelecektir. Gördüðünüz gibi imajlara verdiðimiz isimler oradada gözüküyor. Þimdi ilk imajý seçiliyken altta bulunan Browse butonuna týklýyoruz ve ayný yazýmýzýn önceden hazýrladýðýmýz farklý rengini bilgisayarýmýzdan seçiyoruz. Daha sonra alttaki bos isimli transparan imajýmýza týklýyoruz ve yine Browse diyoruz. Bu kez bir resim seçiyoruz ve OK diyerek çýkýyoruz. Ayný mantýkla diðer imajlarýmýzada uygulamalarý yapýyoruz. Ama dikkat edin bos imajýnýn yerine gelecek resim farklý olsun. Resmin, yazýnýn üstünden çýkýnca kaybolmasýný istemiyorsanýz penceredeki Restore Images onmouseout seçeneðini aktif halden çýkarýn. Ayrýca Swap Image'da çeþitli deðiþiklikler yapmak için Behaviors penceresindeki OnMouseOver yazýsýna çift týklamanýz yeterli olacaktýr. Kolay gelsin. Örnek imajý görmek için týklayýn. Yazan:Efdal ÇELÝK file:///c /Belgelerim/Web/dreamweaver/7.htm (2 of 2) [ :46:24]

16 1.Ders -- Dreamweaver Ayarları ve Türkçe Karakter Sorunu Yeni bir sayfa açın. Bunu yapmak için File menüsünden New'a tıklamanız yeterli olacaktır.ya da klavyeden kısayol olarak Ctrl+N tuşlarına basmanızda sizin için daha kısa bir yol olur. Öncelikle açtığımız bu sayfanın genel özelliklerini belirleyelim. Bu özelliklere ulaşmak için Modify>Page Properties ' tıklamanız ya da farenizin sağ butonuna tıklayıp yine Page Properties seçeneğine tıklamanız yeterli olacaktır.genel özellikten kastettiğim ise sayfamızın ; Title, Background Resmi, Bacground rengi, Yazı rengi, link rengi, ziyaret edilen linklerin rengi, aktif olan linklerin rengi, Left Margin (Sol hizalama boşluğu), Top Margin (Üst hizalama boşluğu) ve bunların genişlik ve yükseklikleri ve Encoding yani dil seçimi gibi nitelikleri belirlemeliyiz.burada hazırlayacağınız sayfanın Title (Başlık) ve diğer özelliklerini sizi zevkinize bırakıp Dreamweaver'da sıkça karşılaşılan Türkçe karakter sorununa değinmek istiyorum.türkçe karakter sorununu halletmeniz için öncelikle şu dosyaları download etmeniz gerekmektedir. Win1254 ve Encoding.zip download etmek için üzerine 1 kez tıklamanız yeterli! Açmak için Winzip programı gerekli. Winzip 8.0 Beta.Winzip'i olmayanlar için. Bu sıkıştırılmış iki dosyayı C:/Program Files/Macromedia/Dreamweaver 4/Configuration/Encodings klasörüne açmanız gerekmektedir yada kopyalamanız. Daha sonra Dreamweaver'in bu dosyaları görmesi,tanıması için Dreamweaver kapatıp yeniden açın. Page Properties menüsünden Document Encoding yazan bölümden Iso Latin 5 (Windows ) seçeneğini seçin ve Ok butonuna tıkladıktan sonra artık Türkçe karakterleri dilediğiniz gibi özgürce kullanabilirsiniz. Önemli : Telaşa kapıldığınız bir nokta olacaktır ki aynı şeyi bende yaşadım çünkü, Türkçe karakterleri dreamweaver içinde göremiyorsanız,ki büyük ihtimalle göremeyeceksiniz,hiç telaşa kapılmayın browserınızda ya da F12'ye basarak iexplorer vaya netscape browserınızda mutlaka göreceksiniz. Đsterseniz deneyin Resim 1

17 2.Ders -- Css Styles Css styles ile sayfalarınızda kullandığınız metinlere vereceğiniz şekiller, fontlar, sizin istediğiniz renklerde görünmesi, tüm metin özelliklerinin sizin ayarlayacağınız şekilde görünmesi ve bunun web browserlarında herhangi bir değişime uğramaması için css styles'e ihtiyacınız olacaktır. Mesela sayfanızda metinler bolca kullanılmışsa siz bu metinlerin özelliklerini tek tek ayarlamak zorunda kalmazsınız. Öreneğin bir başlık ve bunun alt başlığı ve bunun açıklamasını otomatik olarak ayarlayabilirsiniz. Bir css styles hazırladığınız zaman da bunu daha sonra hazırlayacağınız sayfalarda da tek tek ayarlamak yerine bir kerede kullanabilirsiniz. Css styles menüsüne ulaşmak için Window>Css Styles veya klavyeden Shift+F11 ' ebasınız. Şimdi sıra kendi css styles'lerimizi belirlemeye... Css Styles aktif iken yukarıda resimdede göreceğiniz üzere sağ üst köşedeki siyah ok işaretine bir kez tıklayın.açılan menüden New Style'i seçin ve karşınıza şu menü çıkacak. Resim 1 Resim 2

18 Resim 3 Bu menüde name bölümüne istediğiniz ismi yazabilirsiniz. Önemli olan Define In bölümündeki New Style Sheet File seçeneğini seçmeniz ve ok butonuna basmanız. Bundan sonra açılcak menüde size hazırlayacağınız style'in hangi isimle kaydedeciğinizi soracak. Stylenizi dosyalarınızın bulunduğu bölüme kaydedin.bundan sonra karşınıza beklediğimiz asıl menü çıkcak ve siz bu menüden istediğiniz özellikteki seçenekleri seçecekciniz ve css stylenizi oluşturacaksınız. Yukarıda gördüğünüz menüyle karşılaşmanız gerekecek.ben burada bu menü hakkında bahsetmek istemiyorum çünkü herşey açık. Sayfanızda belirleyeceğiniz font, yazı boyutu, style, renk, bacground rengi, tabloların kalınlığı, yazıların altı çizili mi olcak v.s. bunlar size kalmış. Ok butonuna bastıktan sonra css styleniz hazır. Önemli : Mesela diyelimki siz bir sayfanızda yazı boyutunu (size) 5 yaptınız.css stylenizdede bu boyut 2 diyelim. Đşte bu esnada css styleniz devre dışı kalır.ama siz css style'de herhangi bir özelliği belirlemediyseniz, mesela css 'de underline seçili değil ama sayfanızda siz bir yazını altını çizdiniz diylim işte o zaman css stylenizde herhangi bir değişiklik olmaz.bilmem anlatabildim mi? 3. Ders -- Frame - Target Frame bir sayfa içersinde birden fazla sayfa kullanýmý demektir. Örneðin bu framelerden bir tanesi sabit kalýp ayný sayfa içersinde siz o frame içersindeki likler týklayarak yine ayný sayfa içersindeki diðer frame içersinden linkine týkladýðýnýz sayfayý açabilirsiniz. Buda size ve kullanýcýlara zaman açýsýndan yardýmcý olur. Frame eklemek için Ýnsert>Frame menüsünden istediðiniz frame'i ekleyebilirsiniz.ya da objects nesnesinden en üst butona 1 kez týklayarak Frames'i seçerseniz kýsayoldan

19 ulaþmanýzý saðlarsýnýz. Shift+F2'ye basarak ya da Widow>Frames'den Frameminizi aktif hale geitrin. Objects nesnesine týklayýp Frames 'i seçtiðiniz zaman yandaki gibi bir menü elde etmeniz gerekiyor. Frames'i aktif hale getirdikten sonra bunula ilgili ayarlarý yine Property Inspector'den yapabilirsiniz. Eðer framelerinizde kaydýrma çubuðu olmasýný istemiyorsanýz Property Inspector menüsünden Scrool seçeneðini No yapýn. Oluþturduðunuz frameleri kaydederken her bir frame'i ayrý bir htm sayfasý olarak kaydedeceksiniz. Yani her bir frame ayrý bir htm sayfasýdýr. Kaydederken File>Save Frame menüsünü kullanmanýz gerekiyor. Resim 1 Her bir frame'i ayrý ayrý kaydettikten sonra geldi sýra tüm bu framelerin dýþ kalýbýný oluþturan bütün frameleri birlikte kaydetmeye.bunun içinde File>Save All Frame menüsünü kullanmanýz gerekecek.tüm bu iþlemleri yaptýktan sonra framelerimiz artýk hazýr bizi bekliyor olacak. Framenizin borderýnýn görünmesi için borderýnýn görünmesini istediðiniz frame'i seçip Property Inspector'den Borders yazan seçeneði Yes yapýn. Yaptýgýnýz her bir freme'i kaydederken File>Save Frame As olarak kaydedin. Diyelimki bir frame içersindeki bir yazý veya resim gibi bir nesneye link verecekseniz ; Linki verdikten sonra Property Inspector'deki Target yazan yerden size uygun olaný

20 seçmeniz gerekiyor.ben size bu seçeneklerin anlamlarýný veriyorum ; _Blank: Týklanan sayfayý hiç bozmadan yeni bir navigator penceresi açarak linki o pencere içinde açar. _self: Varsayýlan ayarladaki framei açar. _top: En dýþtaki framei deðiþmesini saðlayarak tüm framerlin yerini alan tek bir sayfa açýlmasýný saðlar (örnek sað taraftaki menüdeki ana sayfa ve bölümler linkleri gibi) _mainframe: Ana Framei deðiþmesini saðlar (eðer sol taraftaki menu üzerindeki bir linke týklandýðýnda sað taraftaki ana sayfanýn deðiþmesini istiyorsanýz bunu kullanacaksýnýz) _leftframe, _ rightframe, topframe... eklediðiniz framelere göre istediðiniz frame'in deðiþmesini saðlayabilirsiniz. Benden tavsiye, açýn bir yeni dosya ve bu seçenekleri tek tek deneyin. Öðrendiklerimiz kavramamaýz için uygulama yapmamýz çok þart. Bu arada unutmadan, framelerinizi en son olarak Save All Frame olarak kaydetmeniz gerekiyor Ders -- Đmage (Resim) Eklemek Dreamweaver'da image'dan kasıt sayfalarımıza resim eklemektir. Bunun için uzantısı.gif,.jpg,.jpeg,.png olan dosyalarınızı web sayfalarına ekleyebilirsiniz. Sayfalarınıza Đmage eklemek için Đnsert>Đmage 'dan ulaşabilirsiniz. Ya da tuş kombinasyonlarında Ctrl+Alt+I ilede image menüsüne erişirsiniz.yada objectlerden butonuna tıklayarakda ulaşabilirsiniz. Bu işe yeni başlayan tasarımcıların karşılaştıkları genel sorunlardan birisi resim eklediği halde o resimin browser'da görünmemesi. Bunun sebebi ise eklediği image'ın o dosyaya ait klasörün alt klasöründe olmaması. Yani siz sayfanıza bir resim ekliyorsanız ve resim bulunduğu dosyada resim.htm ise o resimin resim.htm ile aynı klasörde olması ya da resim.htm dosyasının alt klasöründen biri olan diyelimki images isimli bir klasörde olması gerekir. Resim eklemek için ; 1. Đnsert>Đmage tıklayın. 2. Prewiev'a bakarak ekleyeceğiniz resim dosyasını seçin. 3. Relative to seçeneğinin karşısındaki ifadeyi Document yapın. 4. Select'e tıklayın. 5. Resiminiz eklendi. Resim üzerinde değişiklik yapmak için ; 1. Resim'in üzerine 1 kez tıklayarak onu seçili yapın. 2. Properties'den istediğiniz değişiklikleri yapın. 3. Örenğin fare üzerine gelince farenin hemen alt kısmında yazı çıkmasını istiyorsanız resim seçili iken propertiesden alt seçeneğinin karşılığını girerseniz o yazı görünecektir. 4. Öreneğin resimin boyutlarını değiştirmek istiyorsanız bunu resim seçili iken resim üzerinde çıkan kalın çizgilerden büyültüp küçülterek yani istediğiniz boyutlara getirerek ya da properties'de W ve H seçeneklerinin karşılıklarını girerek düzenleyebilirsiniz. 5. Öreneğin resiminize link vermek istiyorsanız seçili iken Đnsert>Link'i yada Properties'de Link yazısının karşılığına resime tıklandığında gideceği yeri yazmanız yeterli olacaktır. 6. Ayrıca yine resim seçili iken Align ayarlarını Properties'den yapmanız mümkün. Burada ayrıca Đmage Map hakkında bilgi vermek doğru olacaktır sanırım. Đmage Map

21 Diyelimki sayfanızın herhangi bir bölümüne bir resim eklediniz ve bu resim üzerinde tümüne değilde kendi istediğiniz,kendi seştiğiniz bir bölüme tıklandığında o linke gitsin. Yani Đmage Map tüm resime link vermiyor. Siz nereyi isterseniz oraya link veriyor (Harika değil mi?). Đmage Map'i kullanmak için ; 1. Resiminizi seçin. 2. Properties'de resimde görüldüğü gibi bir bölüm görmüş olmanız lazım. Kırmızı ile işaretli olan bölümü gördüyseniz devam edebiliriz. 3. Bu 3 simgeden bir tanseinin üzerine 1 kez tıklayın. 4. Sonra resiminizin üzerine gelin ve link vermek istediğiniz alanı seçin ve properties'den gitmesini istediğiniz linki, browserın neresinde açılcağını ve o link üzerine gelindiğinde hangi yazı çıkmasını istediğiniz gibi ayarları yapmanız mümkün.şimdi sıra uygulama yapmada. Kolay gelsin Ders -- Meta Tag'lar Meta_Tag'lar arama motorlarında sitenizin üst sıralrada görünmesinde yardımcı olur. Meta Tag içersine yazacağınız her bir şey Head tagı arasına meta kodları içersinde kaydolur. Sayfalarınıza Meta Tag eklemek için Đnsert>Head Tags'a ve buradanda az sonra açıklayacağım menülerden birtanesine tıklamanız yeterli olacaktır. Đşte bu seçeneklerin anlamları ; Meta: Ekleyeceğeiniz özel bir Tag için kullanın. Keywords: Sitenizin arama motorlarında bulunması için gerekli olan anahtar kelimeleri girin. Description: Sitenizin Arama motorlarında görünecek olan kısa tanımı, içerik v.s. Refresh: Sayfanın belli aralıklarla tazelenmesini (yeniden yüklenmesini) sağlayan tag. Link: Sayfanızın arama motorlarında görünecek olan adresi. Eğer sitenizin hitini artırmak istiyorsanız Meta_Tag'lar tam size göre. 6.Ders -- Rollover Text - Ýmage CSS stylelerin belkide en çok bilinen özelliklerinden biri olan rollover text-linkler, oldukça çok dile getirilen problemlerden biri. Bu özellik elbette Dreamweaver'da da mevcut. Dreamweaver'da bu iþi yapmanýn bir çok yolu olduðuda bir gerçek. Bu özelliði Extension ile, Head taglarý arasýna yazacaðýmýz kodlar ile veya Css Styles'ler ile yapmamýz mümkün. Dreamweaver sen harikasýn. Örneðin Head taglarý arasýna yazacaðýmýz Style kodu ile nasýl yapacaðýmýza bakalým.öncelikle yeni bir döküman açýn ve F10 ile html bölümündeki head taglarý arasýna þu kodlarý yazýn. <style type="text/css">

22  </style> Buradaki kodlarda color yazýlarýnýn yanýndaki kodlarý istediðiniz renk kodunu kafanýza göre girerek veya rengin kodunu bilmiyorsanýz o rengin ingilizce karþýlýðýný yazarak kendi isteðinize göre deðiþtirebilirsiniz. Bir çok arkadaþýn da takýldýðý gibi linklerde altçizgi sorununuda bu kod sayesinde halledebiliriz. Örneðin linklerinizde altçizgi olmamasýný ama üzerine gidince altçizgi (underline) çýkmasýný istiyorsanýz, bu kodda olduðu gibi; a:hover komutundaki textdecoration: komutu karþýsýna underline yazmalýsýnýz. Burada ; a:link = linklerin rengi a:active = linke týklandýðý anda çýkan renk a:visited = ziyaret edilmiþ link rengi a:hover = linkin üzerine gidildiðinde deðiþen rollover renk text-decoration komutlarý ise linklerin altýçizgilimi yoksa çizgisiz mi olmasý gerektiðini belirten komuttur. Önemli : Bu arada yine telaþa kapýlmayýn.çünkü yaptýklarýnýz dreamweaver'da görünmeyebilir ama unutmayýnki browserda mutlaka görünecektir. Þimdi gelelim Extension ile nasýl yapýldýðýna.arkadaþlar bu Extensionlar gerçekten iþimizi kolaylaþtýrýyor bu nedenle diðer extensionlarýda en yakýn zamanda elde edin. Öncelikle Text Link Rollover Extension 'u bilgisayarýnýza indirin. Sonra bu zip dosyasýný açýn ve çalýþtýrýn.yani kurun.sonra dreamweaver'da object menüsünde birþey görmeniz gerekiyor. Ýþte þekilde de göreceðiniz üzere kýrmýzý daire içersinde iþaretlenmiþ olan þey sizin az önce kurduðunuz extension.ýþte buna 1 kez týklayýn. Extension menüsündeki açýklamalar þu þekilde ; On MauseOver: linkin üzerine gelince deðiþecek renk On MauseOut: linklerin rengi Visited Link: ziyaret edilmiþ likin rengi. Tüm bu ayarlarý yaptýktan sonra OK diyip extension'ýn kodu sayfanýza otomatik olarak eklemesini saðlayabilirsiniz.

23 Resim 1 Resim 2 Diðer bir yöntemde Css Styles ile; Css Styles'i açýyoruz.new Style diyoruz ve Type kýsmýndan Use CSS Selector'ü seçili yapýyoruz.selector ksýmýnda ise yanýndaki drop down menüden yaralanarak ekleyeceðimiz style'a göre birinini seçiyoruz.ok dedikten sonra açýlacak olan pencereden gerekli ayarlarý yaptýktan sonra tekrar OK diyip Style'ýmýzý tamamlýyoruz. 7. Ders -- Rollover Đmage Fare ile üzeirne gelindiğinde önceden hazırlanan image'ın değişmesini ve link verildiyse eğer o linke gitmesini sağlar. Dreamweaver'ın bu özelliği de işlerimizi kolaylaştırmakta olup yine ustalığını göstermekte. Bence en yakın zamanda dreamweaver hakkındaki bilgilerinizi arttırın.tabi bu işe gönül verdiyseniz. Bu seçeneğe ulaşmak için ; Đnsert>Đnteractive Đmages>Rollover Đmages 'dan veya Object nesnesinden direkt Rollover Đmage'a tıklayarak ulaşabilirsiniz. Karşınıza şu menü çıkması gerekiyor ;

24 Orginal Image bölümüne asıl olan image'ı seçmeniz, Rollover Image bölümüne fare üzerine geldiğinde görünmesi gereken image'ı seçmeniz When Clicked, Go To Url bölümünede fare üzerine tıklanıldığında hangi linke gitcekse onu yazmanız gerekiyor.tabi bütün bu işlemler yapıldıktan sonra ok butonuna basmayı untmayacağınıza eminim. 8. Ders -- Tablolar Web sayfalarında table kullanmak her yönden işinizi kolaylaştıracaktır. Mesela örnek vereyim,bu sayfada gördüğünüz en üstteki tables yazısı şuan okudğunuz yazı, eklediğinim resimler falan herbirisi ayrı bir tablo içersinde ve border'ı yani dış tablo kenarının kalınlığı 0(sıfır). Size önerim her yaptığınız bir işlemi tablo içersinde kullanın. Böylece yapmış olduğunuz diğer işlemleri falan bozmadan düzenleyebilirsiniz. Tablo eklemek için Đnsert>Table veya Ctrl+Alt+T tuş kombinasyonuyla veya Window>Objekts'ten tablo simgesine tıklayarak ulaşabilirsiniz.bu durumda karşınıza şu menü çıkacak. Bu menüde ; Columns(Sütun): dikey aşağıya doğru uzanan kolonlardır, Rows(Satır): Yatay sıralar, With: Table ın genişliği, Border: Kenar çizgilerinin kalınlığı (eğer bunu o olarak girerseniz borderlar görünmez, bu tüm uygulamalar için geçerlidir), Cell Pladding: Table'ın hücrelerinin gevşeklik payı, Cell Spacing: Hücreler arası boşlukğun değeri Kendi ayarlarınızı yaptıktan sonra Ok butonuna basınız.

25 Örneğin 3 satır 3 sütundan oluşan ve borderının 1 olduğu bir tablo aşağıdaki gibi görüncektir. Bu tabloların içersinde istediğiniz değişikliği yapabilir ve ekleyebilirsiniz. Seçtiğiniz bir tablonun üzerindeki değişikliği Property Inspector ile yapabilirsiniz....:::property Inspector:::... Property Inspector'ü sağ alt köşesindeki ok işaretine basarak geniş özellikli ve az özellikli seçeneklerine göre ayarlayabilirsiniz. Ayrıca Commands>Format Table seçeneğine tıklayarak tablolarınızdaki yazıların stillerini, backgroundlarını, alignlerini, yazı stylerini, borderı v.s. özellikleri kendi isteğinize göre düzenleyebilirsiniz.

26 Commands>Format Table seçeneğine tıkladığınızda aşağıdaki görünümünü elde etmeniz gerekiyor. 9. Ders -- Text, Link ve Biçimlendirme Sayfanın en sade ve en önemli kısımlarından biri olan Textler, bilinmesi gereken en temel konuların başında gelir. Sayfanızdaki text ve linklerin renklerinin uyum içinde olması ziyaretçileri hem hoşnut eder hemde sayfanızın kolay anlaşılır bir biçimde olmasını sağlar. Text'lerinizi biçimlendirmek için öncelikle text'i seçili hale getirin. Text üzerindeki ayarların büyük bir kısmını kısmını Propery Inspector menüsünden rahatlıkla ve zaman açısından da kolaylık sağlaması bakımından buradan yapmanız faydalı olacaktır....:::properties:::... Seçtiğiniz yazının büyüklüğünü 'size', onun solundaki yazi tipi 'Font Familiy', sağındaki font rengi 'Font color', üzerine tıklandığında açılacak olan URL 'Link', ne tarafa hizalanacağını belirten 'Align' Buttonları, Alt alta uzayan satırların listemi 'Unordered List', sıralanmanın şekline olmasını sağlayan 'Ordered List' ayarları, Đçerden yada dışardan başlamasını sağlayan 'text Outdent', 'text Indent' ayarları, textin kalın olmasını sağlayacak 'bold', eğik olmasını sağlayacak 'italic' en çok işimize yarayanlarıdır. Daha geniş yazı biçimlendirme ayarlarına ulaşmak için Text menüsüne tıklamanız yeterli olacaktır.