|
|
|
 |
| Sende bize katıl 10 numara |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
 |
|
Dreamweaver şu anda piyasada bulunan en kaliteli ve kullanışlı html editörlerinden birisidir. Program WYSIWYG (What You See Is What You Get- Ne görüyorsan onu elde edersin) özelliğine sahip bir program olması sonucu da kodlarla uğraşmadan herhangi html sayfasını inşa edebilmekteyiz. Tabi bununla birlikte programda kodlarla çalışma imkanı da var ve hatta ikisini beraber yaparak kodlara müdahale edebileceksiniz.
Programın arayüzü ilk bakışta karmaşık gibi görünüyor olsada biraz kullandıktan sonra alışacağınıza eminim. Bu konuda eksi olarak düşünebileceğimiz tek şey menülerin yerleşik olmaması diyebiliriz. Ama menüleri isteğimize göre kapatıp Kısaca araç çubuklarından ve menülerden başlayarak konularımıza giriş yapalım
Bu dersimizde dreamweaverin temel öğelerini tanıyacağız ve basit bir web sayfası oluşturmayı öğreneceğiz. Bu işlem için öncelikle Dreamweaver'ın arayüzünü ve ilk etapta kullanacağımız panelleri tanıyalım.
Eğer Word kullanmayı biraz biliyorsanız Dreamweaver' da temel yazı yazma ve nesne ekleme işlemlerini yapacağımız beyaz ekran sizi fazla şaşırtmayacaktır. İlk sayfamızı bu alana birkaç text yazarak ve bu textin rengini büyüklüğünü değiştirerek yapacağız yani tamamen word teki işlemler ile aynı. Burada gördüğünüz gibi ana bir ekran ve iki adet panel görmektesiniz. bu panellerin yanındaki açıklamalardan da anlaşılacağı gibi birisi Properties(özellikler) ve diğeri de Object(nesneler) paneli. Pencerenin en üst kısmında da Title yazan alana sayfamızın başlığını yazıyoruz.
Eğer Object ve Properties panellerini kaybederseniz Window menüsünden tekrar yandaki gibi aktif hale getirebilirsiniz.
Veya bu panellerin seçili olduğu halde ekranda görünmemeleri gibi bir durum ile karşılaşırsanız Window menüsünün altlarında göreceğiniz Arrange Panels butonuna basmanız panellerinizi geri kazanmanız için yeterli olacaktır.
TÜRKÇE KARAKTERLER KULLANIMI
İnternette ve Dreamweaver da Türkçe karakterlerin gösterilmesi için birkaç ayarlama yapılması gerekmektedir. Öncelikle Html dökümanlarında şu kodlar bulunmalıdır.
Bu kodlardan ilki Macintosh'larda Türkçe karakterlerin düzgün görülebilmesi için ikincisi ise windows ortamında düzgün görülebilmesi içindir. Bu karakterleri çoğaltarak yaptığınız sayfanın kodları arasına yerleştirin.
Dreamweaver'da Türkçe karakterleri görebilmek için ise Edit>Preferences'e girilip altta resimdede görülen menünün açılması sağlanmalı ve oradan sol tarafta bulunan menülerden Fonts/Encoding seçilmelidir. Burada yapılacak ayarlar şöyledir. Default Encoding ve Font Setting özellikleri Other yapılmalı ve Proportional Font, Fixed Font ve Code İnspector ayarlarını sonlarında (Türkçe) bulunacak şekilde ayarlayıp OK tuşuna tıklayıp Dreamweaver'ı yeniden başlatarak işlemimiz tamamlanmış olacaktır. Fontların Size (Büyüklüklerini) kendi isteğinize göre ayarlayabilirsiniz.
Bu sorunu çözmek için yapmanız gereken ise edit menüsünden Preferences butonuna basmak ve aşağıdaki adımları takip etmek olacaktır.Bu ayarlamaları yaptıktan sonra Dreamweaverden birkez çıkıp tekrar girmeniz sorunu çözmek için yeterli olacaktır.
Bu problemi de çözdükten sonra sıra geldi bir web sayfası yapmaya.... bu iş için önce sayfanıza bası yazılar yazın mesela bu benim ilk web sayfam hoşgeldiniz gibi. bu yazıları yazdıktan sonra Özellikler panelini kullanarak yazımızın rengini büyüklüğünü ve fontunu değiştirelim. Hizalama butonlarını kullanalım veyazımızı istediğimiz tarafa yaslayalım
Bu işlemden sonra sıra sayfamızın arkaplan rengini değiştirmeye geldi tabiki illada benim sayfam beyaz olacak demiyorsanız. bu iş için iki yol var ya ekranda boş biryerde farenin sağtuşuna tıklayarak karşınıza çıkan menüden Page Properties'i yda Modify menüsünden Page Prorerties'i tıklayın sonuç aynı yere çıkacaktır.
Buradan da sayfanızın başlığını değiştirebileceğininzi fark etmişsinizdir sanırım. Ayrıca bu resimde şimdilik anlamını bilmediğimiz bazı şeyler var ama önemli değil zamanı geldiğinde öğreneceğiz.
Bütün bu işlemlerden sonra sayfamızı kaydedelim ve internet explorer dan bir görelim.
SAYFA ÖZELLİKLERİ
Dreamweaverda sayfa özelliklerini ayarlamak için Modify>Page Properties veya ctrl+j tuş kombinasyonunu kullanarak aşağıda resimde görülen menünün çıkması sağlanmalıdır.
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ıklantıdğı 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
ARAÇ ÇUBUKLARI
Araç çubuklarını insert menüsünü tamami ile içinde barındıran (insert araç çubuğu diye adlandırıyorum) araç çubuğundan başlayarak tanımaya çalışalım
1. Character
1. Line break :
2. Non-breaking space :
3. Copyright :
4. Registered trademark :
5. Trademark :
6. Pound :
7. Yen :
8. Euro :
9. Left quote :
10. Right quote :
11. Em-dash :
12. Other character Bir alt satıra geçmek için kullanılır.
Ekstra boşluk için kullanılır.
©
®
™
£
¥
€
“
”
—
Bunlara benzer diğer karakterler
2. Common
1. İmage :
2. Rollover image :
3. Table :
4. Tabular data:
5. Dtaw layer :
6. Navigasyon bar : Resim eklemek için kullanılır.
Aktif resimler oluşturmamızı sağlar. Normal resim ve mouse üzerine gelince çıkacak resim belirleyebiliriz ve resme link verebiliriz.
Tablo oluşturmak için kullanılır.
Baska web dökümanlarından veriler almanızı sağlar.
Layer dediğimiz katmanları oluşturmaya yarar.
Rollover image'ın biraz daha geliştirilmiş hali.
7. Horizontal rule :
8. Email link :
9. Date
10. Server-side include :
11. Fireworks html :
12. Flash :
13. Flash button :
14. Flash text :
15. Shockwave :
16. Generator : Yatay çizgi.
E-mail linki vermemizi sağlar.
Gün, ay, yıl şeklinde tarih ve saat eklemek için kullanılır.
Büyük site sayfalarında ortak olan kısımları diğer sayfalara daha kolay eklemek için kullanılır.
Fireworks programı ile yapılan html sayfalarını import etmek için.
Flash programıyla yapılan nesneleri sayfaya eklemek için kullanılır.
Hazır flash butonlarını sayfada kullanmak için.
Hazır flash yazıları kullanmak için.
Shockwave eklemek için kullanılır.
Flash, gif, jpeg, mov, png türü dosyalar ekleyip bunlara parametreler (kodlar) eklememizi sağlar.
3. Forms
1. Form :
2. Text field :
3. Button :
4. Checkbox :
5. Radio button :
6. List/menu :
7. File field :
8. İmage field :
9. Hidden field :
10. Jump menu : Form alanı açmak için kullanılır.
Yazı alanı açmak için kullanılır.
Formlar için buton oluşturmaya yarar.
İşaretleme butonu oluşturur.
Yuvarlak işaretleme butonu oluşturur.
Liste şeklinde açılan menü oluşturur.
Dosyalara gözatmak için menü oluşturur.
Resim alanı oluşturur.
Formlar için saklama alanı oluşturur.
Liste şeklinde link menüsü oluşurmaya yarar.
4. Frames
Bu bölüm çerçeve oluşturmaya yarar şekillerde görülen biçimlerde çerçeveler oluşturabilirsiniz.
5. Head
1. Meta :
2. Keywords :
3. Description :
4. Refresh :
5. Base :
6. Link : Özel bir meta tagı eklemek için kullanılır.
Sitenin arama motorları tarafından bulunmasını sağlayan anahtar kelimeleri yazmak için kullanılır.
Arama motorları için sitenin kısa tanımını ve içeriğini yazmanızı sağlar.
Sayfanın belli aralıklarla yeniden yüklenmesini sağlamak için kullanılır.
İnternet sayfanızın gerçek adresini belirtmek için kullanılır.
Güncel sayfa ile başka sayfalar arasında bağlantı sağlamak için kullanılır.
6. İnvisbles
1. Named anchor :
2. Script :
3. Comment : Sayfa içinde herhangi bir yere link verebilmek için Link verilecek yere isim yazmakta kullanılır.
Sayfaya script dilleri ile yazılan kodlar eklemek için kullanılır.
Kodlar arasına yorum eklemek için kullanılır. Sayfada görünmez.
7. Special
Bu bölüm ise sayfaya applet, plugin ve activex denetimlerini eklemenizi sağlar.
Menüleri Tanıyalım
Şimdi yukarıda gördüğünüz özellikler araç çubuğunu tanıyalım.
1. Format :
2. Size :
3. Renk Bölümü :
4. Bold ve İtalik :
5. Hizalama :
6. Listeleme :
7. Girinti :
8. Link :
9. Target : Yazılarımızın paragraf mı başlık mı olacağını buradan seçebiliriz.
Yazılarımızın büyüklüğünü belirlemek için kullanırız.
Yazılarımızın rengi buradan belirlenir.
B ile bold yani kalın I ilke italik yazılar yazarız.
Yazılarımızın sağa sola veya ortaya hizalanmasını sağlar.
Sıralı ve sırasız listeler oluşturmak için kullanılır.
Yzaılarımıza sağ veya sol girinti vermek için kullanılır.
Herhangi bir şeye link vermek için burası kullanılır.
Eğer link vermiş isek onun nerede açılacağını burada belirtiriz.
Bu araç çubuğu kullandığınız nesnelere göre değişmektedir. Mesela tablo kullanıyorsanız tablo ile ilgili özellikler gösterilir, resim kullanıyorsanız resim ile ilgili özellikler gösterilir vb. Bunlar ilgili konularda anlatılacaktır.
Bu gördüğünüz araç çubuğu ise sayfanızda kullanmak için oluşturduğunuz html ve css stillerini listeler ve kullanımınıza sunar, behaviors paneli ise dreamweaver ile birlikte gelen hazır JavaScript ve form bileşenlerini barındırır ve kullanımınıza sunar. Tabi bunlara ileride daha detaylı şekilde gireceğiz.
Bu araç çubuğu ise iki paneli barındırır. Reference panelinde html , css ve javascript kodları örnekler halinde listelenmiş ve kullanım şekilleri açıklanmıştır. Güzel bir kaynak olarak kullanılabilir.
Assets paneli ise sayfalarınızda kullanmış olduğunuz resimler, renkler, linkler, flash animasyonları, shockwave ile yapılmış çalışmalar, movieler(film,fragman vb.) scriptler ve kalıpları listeleyerek başka yerlerde kullanmanızı kolaylaştırmaktadır. Ayrıca favori olarakta bu tür şeyleri listeleyebilirsiniz.
Bu araç çubuğu ise sayfanızda kullanmış olduğunuz frameleri (çerçeve), layersları kontrol etmeniz için yardımcı olmaktadır. Ayrıca history paneli ilede yaptığınız çalışmaları geri alma imkanı vermektedir.
Yukarıdaki resim ise Dreamweaver'da sayfanın en altında görülmektedir. Sol tarafında çalıştığınız nesne ile ilgili kullanılan kodlar görülmektedir. Sağ tarafta ise, ilk simgeden başlayarak, site haritasının açılmasını sağlamakta, 2, 3, 4 ve 5. simgeler yukarıda bahsedilen panellerin (assets, html style, css style behaviors ve history) açılmasını sağlamakta ve son simge ise code inspector'unun açılmasını sağlamaktadır. Code inspector ile istediğimiz yerlere kod yazma imkanı sağlanmıştır.
SİTE HARİTASI OLUŞTURMA
Dreamweaver ile çalışmalarımıza başlamadan site haritanızı oluşturmanızı tavsiye ederim. Bu ne işinize yarayacak? Dreamwever yaptığınız çalışmaları harita şeklinde kaydederek sizin çalışmalarınızı kolaylaştırmıştır. site haritası ile yapmış olduğunuz çalışmalar çevresel olarak kaydedilip bir şema oluşturulmaktadır. Bu şekilde belgelerinize ulaşmak ve üzerinde değişiklikler yapmanız kolaylaşmakta ve daha sonra bu çalışmalarınız internete gönderilirken size kolaylıklar sağlamaktadır. Hatta internet üzerinden sayfalarınızı site haritası ile daha kolay şekilde kontrol edebileceksiniz.
Site haritası oluşturmak için öncelikle tüm site çalışmalarınızı içerisine kaydedeceğiniz bir klasör oluşturun. Daha sonra Dreamweaver'ın üst bölümünden Site>New Site'yi tıklayın. Karşınıza yukarıdaki resimde olduğu gibi bir pencere açılacaktır. Site name bölümüne site haritasını belirtecek bir isim yazın, Local Root Folder bölümüne ise oluşturduğunuz yeni klasörün yolunu, yanındaki dosya simgesine tıklayarak, gösterin, Http Address bölümüne isterseniz sitenizin internet adresini yazabilirsiniz. Bu kadarını yaparak site haritasını oluşturmuş olursunuz.
Yaptığınız tüm çalışmaları yeni oluşturduğunuz klasöre kaydetmelisiniz. Site haritanız hazır bundan sonra yaptığınız tüm çalışmalar şema halinde site haritasına kaydedilecektir. Tabi site haritası siz çalışırken hep açık olmalı.
Linkler yani bağlantılar bir web sitesi oluşturabilmek için bilinmesi gereken en önemli konudur. Bildiğiniz üzere geçen dersimizde sadece tek bir web sayfası yamıştık. Taktir edeceğiniz gibi internetteki siteler sadece bir sayfadan ibaret omuyor bazen onlarca bazen yüzlerce bazende binlerce sayfadan oluşan sitelere rastlamanız mümkün. Bu kadar sayfayı ana bir çatı altında toplamak ve bu sayfalar arasında geçişler yapabilmek için linkleri iyi bir şekilde öğrenmek gerekiyor.
biz linkler konusuna girerken daha çok kendi sitemiz içerisinde başaka bir sayfaya bağlantı yapma meselesi üzerine konuştuk ama işin daha başka boyutları olduğunu hatıratmak lazım sanırım. Mesela sayfanızda intenetteki bir siteye link vermek isterseniz farklı bir method yada size e-mail gönderebilmeleri için bir link yapmak isterseniz başka bir metod veya sayfanız içinde bir bölümden başka bir bölüme link vermek isterseniz yine başka birmetod kullanmanız gerekecektir.İşi daha fazla uzatmadan bu link çeşitlerini maddeler halinde yazalım isterseniz.
1-Site içi sayfalar arası linkler
2-İnternette bir siteye link (mesela yahoo yada hotmail sayfasına)
3-Ziyaretçinin size mail gönderebilmesi için e-mail linkleri
4-Sayfa içi linkler
Şimdi bu link çeşitlerini sırasıyla açıklamaya çalışalım.
Site içinde sayfalar arası linkler
Yandaki şekle dikkatli bir şekilde bakarsak index isimli bir ana sayfa ve buna bağlı diğer üç sayfa bulunduğunu göreceğiz. İşte site içi linklerin temel mantığı bu resimde gzli. Bir ana sayfaya alt sayfaların bağlantısını yapmak. Tabiki alt sayfalardan ana sayfaya yada daha alt sayfalara bağlantı yapmak da mümkün. Ama biz işi fazla karmaşılaştırmadan bu şekildeki gibi bir bağlantıyı nasıl yapacağımızı gösterelim isterseniz.
Öncelikle ilk yapmanız gereken sitenizi oluşturacağınız ve tüm resim ve dosyalarınızın içinde bulunacağı bir klasör oluşturmak. Bu işlemi sembolüne tıklayarak yada File menüsünden New Folder ifadesini seçerek sonra karşımıza gelen şeklindeki yeni klasörün ismini şeklinde kendi ismimizde yada istediğimiz bir isimde değiştirerek yapacağız. Bu işlem bittikten sonra sitemizde kullanacağımız tüm resimleri bu klasörün içerisine kopyalamamız lazım. Daha sonra da sitemizin ana sayfasını ve alt sayfalarını teker teker oluşturarak aynı klasörün içerisine kaydetmemiz gerekiyor.Bu işemleride tamamladıysanız sıra geldi sayfaları birbirine bağlamaya.
Bu arada şunuda söylemek lazım ana sayfamız olacak olan giriş sayfasının ismi mutlaka index.html şeklinde olmalı.Alt sayfalar için böyle bir şart yok ama lat sayfaların ismi içinde uyulması gereken bazı kurallar var.
1-Dosya isimleri küçük harfle oluşturulmalı
2-Dosya isimlerinde ş,ı,ç,ğ,ü,ö gibi türkçe karakterler kesinlikle kullanılmamalı
3-Dosya isimleri birden fazla kelimden oluşuyorsa kelimeler arasında boşluk bırakılmamalı
bu kurallara uymanız linklerin sağlıklı bir şekilde çalışması için gereklidir.
sayfalarımızı yandaki gibi tek tek oluşturup kalsörümüze kardettiysek index.html sayfasını Dreamweaver da açalım.Daha sonra link vermek istediğimiz yazıyı aşağıdaki gibi seçelim. sonra yine aşağıdaki şekilde olduğu gibi özellikler panelinde Link yazısının karşısındaki klasör resmine birkez tıklayalım
Şimdi karşımıza "Selcet File" isimli bir pencere gelecek gelecek bu pencereden bağlantı yapmak istediğimiz dosyayı aşağıdaki gibi seçelim.
ve enter tuşuna basalım. Link verdiğimiz yazının rengi değişecek ve altı çizilecektir. Aynı şekilde diğer link vermek istediğimiz yazıları da tek tek seçip aynı işlemleri tekrarlayalım. Tüm linkleri yaptıktan sonra alt sayfalarımızı Dreamweaver'da açarak sayfaların en altına yazmış olduğumuz ana sayfaya dönüş yazısını seçerek index.html dosyasına link verelim. Link verilen yazıyı seçtiğinizde özellikler penceresinde
yandaki resimde gördüğünüz gibi link vermiş olduğumuz dosya nın adı ve uzantısını görürsünüz. Eğer linkinizde herhangi bir hata varsa bu yazıyı silerek link işlemini tekrarlayınız. Daha sonra da linklerin çalışıp çalışmadığını test etmek için My Computer'den Hard diski oradan da Klasörünüzü seçin klasörün içinden de index.html. isimli dosyayı seçip Enter tuşuna bastığınızda sayfanız Internet Explorer da gösterilecektir burada linklerinize tıklayarak test ediniz. Linklerinizi düzgün yaptıysanız yazının üzerine geldiğinizde fare imleci el şeklini alacaktır. Bu bu yazıda bir link olduğu anlamıdan gelir. Şimdi fareyi tıkayın ve link verdiğiniz sayfaya gidin buradan da ana sayfaya dönüş için yaptığınız linke tıklayarak ana sayfaya dönün. evet bu iş bu kadar....Sıra geldi diğer linklere...
Site Dışı Linkler
web sayfamızdan internetteki bir sayfaya link vermek istediğimiz sitemiz dışına bir bağlantı yapmamız gerekir. bu tür bir bağlantı yapmak için link vereceğimiz sitenin ismini sayfamıza yazalım. Sonra bu yazıyı fare ile seçerek properties yani özellikler panelinde Link yazısının karşısındaki kutucuğa sitenin tam adresini yazalım. Burada dikkat etmemiz gereken bir husus var, Örneğin Fatih Üniversitesi'ne link vermek istersek link kısmına www.fatih.edu.tr yazmanız yeterli olmayacak ve linkiniz çalışmayacaktır. Adresi tam olarak http://www.fatih.edu.tr şeklinde yazmamız gerekiyor.
yandaki örneğe bakarsanız bunu daha iyi anlayabilirsiniz. bu örnekte dikkatinizi çekmesi gereken bir nokta daha var bu da "Target : _blank " ifadesi. Eğer verdiğiniz linkin yeni bir sayfada açılmasını istiyorsanız target olarak _blank'i seçmeniz lazım. Bu genellikle internete verilen linklerede sık kullanılan bir özelliktir.
E-mail Linkleri
Web sayfalarında görmüşsünüzdür sayfayı tasarlayan kişi genellikle " E-mail Gönderin, Bize Yazın, Görüşlerinizi yazın vb." şeklinde yazılar ile kendisine e-mail atılmasını ister ve siz bu linke tıkladığınızda bilgisayarınızda Outlook programınız çalışır ve gönderilecek kişi kısmında o kişinin e-mail adresi yazar bu hemen hemen herkesin başına gelmiştir sanırım. İşte bu şekilde linklerin nasıl yapıldığını bu bölümde öğrenmeye çalışacağız.
Sayfamızda e-mail linki oluşturmanın iki yolu var birinci yol; aynı internette bir siteye link verdiğimiz zaman yaptığımız gibi link vereceğimiz yazıyı yazıyoruz (mesela E-mail Gönderin gibi) ve bu yazıyı fare ile seçtikten sonra properties panelinde link kutucuğuna mailto:mbasti@fatih.edu.tr gibi adresimizi yazıyoruz ve enter tuşuna basıyoruz. Aynı aşağıdaki şekilde gördüğünüz gibi...
İkinci e-mail linki ekleme metodu iste object panelini kullanmak.Bu daha kolay bir yöntem. Bunun için sayfada herhangi bir yazı yazmıyoruz sadece mail linkini vermek istediğimiz yere fareyi konumlandırıyoruz sonra object panelinden insert E-mail link butonuna basıyoruz. buradan da karşımıza aşağıdaki pencere gelecek bu pencerede üst tarafa linkin yazısını alt tarafa da email adresimizi yazıyoruz. Ve enter tuşuna basıyoruz
Sayfa İçi Linkler
Bazen web sayfalarımız çok uzun olabilir bu gibi durumlarda sayfamızın kolay kullanılabilir olamsını sağlamak için sayfada bir bölümden diğer bir bölüme, sayfanın sonundan başına link vermemiz gerekir.(örneğin bir bu sayfada bu teknik kullanılmıştır.) Bunun için yapmamız gereken önce object panelimizin görünümünü değiştirmek olacaktır.
Sonra sayfada link vereceğimiz bölümlere işaret koymamız gerekiyor. İşaret kyacağımız yere fareyi konumlandırdıktan sonra çapa işaretine tıklıyoruz karşımıza aşağıdaki gibi bir pencere gelecektir. Bu pencerede Name yazan yere bir isim vermemiz gerekiyor bu isimde türkçe karekter kullanmamaya dikkat edelim. sonra da yine enter...
Şimdi işaret koyduğumuz yere sayfanın istediğimiz yerinde link verebiliriz. Link vermek için link yazısını seçelim (biz sayfanın sonunda başına link verdiğimizi varsayıyoruz.) Properties panelinde link kutucuğuna
şeklinde diyez ve sonrasında da az önce çapaya verdiğimiz ismi yazıyor ve enter tuşuna basıyoruz. (diyez işaretini çıkartmak için klavyeden Alt Gr tuşu ile birlikte 3 tuşuna basınız.)
Şimdi sayfamızı kaydedip internet explorer da test edebilirz..
LİNK VERME
Dreamweaver da yazılarımıza ve resimlerimize link vermeyi görelim. Önce yazılarımıza nasıl link verebiliriz bunu belirleyelim. Öncelikle yazmış olduğumuz bir yazıyı seçili duruma getirmeliyiz. Daha sonra aşağıdaki resimdede görüldüğü gibi Link bölümüne; eğer bu bir adres ise http://www.webgezegeni.kolayweb.com şeklinde yazarak adresi girmeliyiz. Adres değilde bir resim olabilir veya başka sayfalarınıza gidilmesi için link veriyor olabilirsiniz yani bu sizin kendi dosyalarınız arasında olabilir. O zaman yandaki dosya simgesini tıklayarak resmin veya sayfanın olduğu yeri gösterebilirsiniz.
Burada dikkat edilecek nokta şudur. Resim çalışma klasörünüzün içinde yer almalı. Bu klasör içinde başka bir klasör içerisinde olması farketmez.Olayı daha ayrıntılkı anlatalım. Çalışmalarınızı kaydetmek için bir dosya oluşturdunuz mesela Web diye bir dosya olsun. Bu dosyanın içerisinde resimlerinizi ayrı bir dosyaya koymuş olabilirsiniz buna da resimler diye bir ad verdiniz. Sayfalarınız ile resimleriniz farklı yerlerde olacaktır. Eğer herhangi bir sayfanızda bir resme link verecek olursanız dosyanın yolu şu olmalıdır (resmin adı araba.jp olsun) resim/araba.jpg yani link bölümüne bunu yazmalısınız. Site haritası yapmamış iseniz dosya simgesine tıklayıp resmin yerini tanıttığınız zaman file:///C|/resimler/araba.jpg gibi birşeyler çıkacaktır. Bu şekilde bir link verilmesi sonucu dosyalarınız internete gönderildiği zaman resmin görülmemesine yol açacaktır.
Örneklerimizi artıralım. Web klasörümüz ana klasör olsun içerisinde resimler klasörü resimlerin olduğu ve dreamwever derslerinin olduğu dreamweaver diye bir klasör olsun ve içerisinde de dr1.htm diye bir sayfa olsun. dr1.htm sayfasında bir resme link verecek olursak ve bu resim resim dosyasının içinde motor.jpg olacak olursa bunun link verirken yolu ../resimler / motor.jpg olmalıdır.
Resimdede gördüğünüz gibi dr1.htm sinde motor.jpg linki için öncelikle bir alt klasöre inmeliyiz. Bunu ../ ile yaparız. bunu yapınca web klasörünün içerisine gelmiş oluruz. Daha sonra resimler klasörüne girip motor.jpg yi gösteririz. Toplam olarak ../resimler/motor.jpg yazmış olduk. Her alt klasöre inerken ../ kullanılır. Bunu artırabiliriz. ../../resimler/motor.jpg gibi. Bu durumda dreamweaver klasörünün içinde başka bir dosya varmış ordan geliyormuşuz gibi.
Resimler klasörünün içinde başka bir klaör olursa (webresimleri gibi bir klasör varsa) buraya gelmek için resimler/webresimleri/kitap.jpg gibi olur.
Burada şunuda hatırlatayım bu her şey için geçerli. İlla ki link verme olayı değildir bu. Sayfaya resim eklerkende aynı şey olmalı. Şu üstte görülen resmi sayfaya eklerken bende aynı yolu kullanmaktayım. .Bu resim olacak diye birşey yok. . Sayfa açılınca çalması için ses dosyası eklersiniz, flash animasyon eklersiniz vs. hep aynı şekilde yolunun tarifini yapmalısınız.
Şimdi biraz da resimlere link vermeyi anlatalım. Önce resimi ekleyelim. Nasıldı. İnsert>image değil mi? Daha sonra menümüzden link yerini tıklayıp yukarıda anlattığım kıstaslara göre istediğimiz linki verebiliriz.
Peki sayfa içerisinde link vereceksek. Alttaki Yukarı Çık Linki gibi. Bunu iki şekilde yapabiliriz. Link olarak #top yazmak bu üst demektir. Yani bir yazının veya resmin link bölümüne #top yazarsak buna tıklanınca üste çıkacaktır. İkinci yol ise Named Anchor kullanmak. Araç çubuğumuzdan İnvesibles'i seçip ordan da İnsert Named Anchor'u veya İnsert>İnvesible Tags>Named Anchor'u seçerek yapabiliriz. Bu nedir? Anchor Demir Atma anlamındadır. Sayfamızın herhangi bir yerine resim ekler gibi bir şey ekliyoruz ve bir isim veriyoruz ama bu tabi browserlarda görünmüyor. Bu ismi de link olarak kullanıp oraya gidilmesini sağlıyoruz. Artık bu nesneyi nereye koyacağınız size kalmış. Sayfa içerisinde nereye gidilmesini isterseniz oraya bu nesnemizi koyabilirsiniz. İsim bölümüne türkçe karakter kullanmadan birşeyler yazıp mesela galeri olsun link vereceğiniz şeyin link bölümüne de #galeri yamak işte bu kadar basit. Bununla ilgili örnek sayfa isterseniz şu sayfaya gidiniz. Bu sayfanın en üstünde duran listeler bu tür linklere örnektir ve ordada konu ile ilgili değişik açıklamalar mevcuttur.
Şimdi linklerle ilgili Target konusunu açıklayalım. Target ile linklerimizin nerede açılacağını belirleriz. Burada;
_blank
_self
_top
_parent Bağlantı yeni bir pencerede açılır.
Bağlantı aynı pencere içerisinde açılır.
Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
Text linklerinizin altı çizili olmasın istemiyor ve üzerlerine gelince renklerinin değişmesini istiyor iseniz. Konu ile ilgili şu sayfaya gidebilirsiniz.
FLASH BUTTON
Dreamweaver içerisinde bulunan hazır flash butonlarını kullanarak sayfalarınızı renklendirebilirsiniz. Bunun için Common araç çubuğundan İnsert Flash Button'u veya İnsert>İnteractive İmages>Falsh Button seçilerek aşağıdaki resimdeki gibi bir menü karşınıza
çıkar.
Bu menüde;
Sample Butonun görünen halidir.
Style bu bölümde hazır butonlar vardır zevkinize göre birini seçebilirsiniz.
Button Text butonunuzun üzerinde görünecek olan yazıyı buraya yazarsınız.
Font yazının karakterini belirlemek için kullanılır.
Size yazının boyutudur.
Link vereceğiniz linki belirtir.
Target linkinizin nerede açılacağını belirtir.
Bg Color Arka plan rengi için kullanılır.
Save As ise butonunuzu kaydetceğiniz yeri ve butonun ismini belirler.
Bu bilgileri girdikten sonra OK tuşuna basarak Flash butonunuz hazırlanmış olur.
Not: http://www.macromedia.com/exchange adresinden yeni eklenen buttonları edinmeniz mümkün.
FLASH TEXT
Sayfalarınıza Flash ile yapılmış, üzerine geldiğiniz zaman rengi değişebilen link yazıları ekleyebilirsiniz. Bunun için Common araç çubuğundan İnsert Flash Text'i veya İnsert>İnteractive İmages>Flash Text kombinasyonunu kullanarak aşağıdaki resimde ki gibi bir menünün açılmasını sağlarsınız.
Bu menüde
Font yazınızın karakterini,
Size boyutunu,
Alttaki semboller Bold(kalın), İtalic, ve sağa, sola, ortaya hizalamanızı,
Color yazınızın normal rengini,
Rollover Color yazının üzerine gelince alacağı rengi
Text yazmak istediğiniz yazıyı,
Link vermek istediğiniz linki,
Target nerede açılmasını istiyorsanız orayı belirtmenizi,
Bg Color arka plan rengini,
Save As ise oluşturduğunuz butonu kaydetmenizi sağlar.
TEXT VE LİNK BİÇİMLENDİRME
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.
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 1 2 3 ş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.
RESİM EKLEMEK
Önce Object panelinden yandaki gibi insert image butonunu tıklayalım. Karşımıza aşağıdaki pecere çıkacaktır. Bu pencere bizim sayfaya ekleyeceğimiz resimi seçmemize yardımcı olan ve resmi görmemizi de sağlayan bir penceredir. Resmimizi seçelim ve Select butonuna basalım. Burada dikkat etmemiz gereken iki husus var;
1.Ekleyeceğimiz resim kaydettiğimiz web sayfası ile aynı klasörde olmalı
2.Resim ekleyeceğimiz sayfa önceden mutlaka kaydedilmiş olmalı.
Eklediğimiz resmin özerine fare ile birkez tıklayarak resmi seçebilir sonrada resmimizin boyutlarını kenarlardaki siyah karecikleri kullanarak değiştirebiliriz. Resmi seçtiğimizde aynı zamanda Properties yani özellikler panelimizin görünümü değişecektir. Şimdi bu paneli kullanarak resmimize çerçeve ekleyebilir yada fare üzerine geldiğğinde resim hakkında bilgi veren açıklama yazısı ekleyebiliriz. Yine yazılarda olduğu gibi sağa sola yaslama ve ortalama işlemeleri de yapabiliriz.
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.
Resim Ekleyelim
Sayfalarımıza resim eklemek için İnsert İmage veya Common araç çubuğundan İnsert İmage tıklanmalıdır. Açılan menü sayesinde sayfanıza ekleyeceğiniz resmi seçerek sayfanıza ekleyebilirsiniz.
Sayfanıza bir resim eklediğiniz zaman properties araç çubuğumuzdaki özelliklerimize gözatalım.
Yukarıdaki resimde görülen menünün çıkması için resim seçili olmalıdır.
Burada W resmin enini H boyunu belitmek için kullanılmaktadır.
Sol üst köşede İmage 4k yazısının altındaki boşluk resme isim vermek için kullanılır.
Src resmimizin bulunduğu yeri göstermektedir.
Link ile resmimize livk verebilmekteyiz.
Align resmimizi sayfa içerisinde Left (sola), Center (ortaya), Right(sağa) olacak şekilde hizalamaızı sağlar.
Alt resmin üzerine mouse ile gelindiği zaman çıkacak yazıyı gösterir. Yukarıdaki Motor resminde olduğu gibi.
V Space resmimize üst ve alttan boşluk bırakmak içindir.
H Space sağ ve soldan boşluk vermek içindir.
Target eğer resmimize link verildi ise bunun nerede açılacağını belirtir. Bu konu linkler bölümünde açıklanacaktır.
Low Src Eğer büyük bir resim kullanmış iseniz bunun açılması biraz zaman alacaktır. 2-bitlik bir ön resim koyarak ziyaretçilerinizin ne görecekleri hakkında fikir edinmelerini sağlayabilirsiniz.
Border resme kenarlık eklemek için kullanılır.
Edit resmi bilgisayarınızda kayıtlı bir programda düzenlemeniz için resmi o programda açar.
Borderın yanındaki semboller ise resmi hizalamak için.
Sol alt köşede bulunan Map ise ileride anlatılacaktır.
JUMP MENÜ EKLEMEK
Sayfaya Jump menü eklemek
Web sayfalarında çok sık gördüğümüz Jump menu, liste şeklindeki bir form alanındaki değerlerden istenileni seçerek ilgili linke gitmemizi sağlayan bir özelliktir. Bknz. Örnek sayfa
Bir jump menü yapmak için öncelikle object menüyü Forms görünümüne getirelim.
Jump menüyü sayfada nereye eklemek istiyorsak imlecimizi oraya konumlandıralım. Sonra Formas menüsünden insert jump menüye tıklayalım. (resim1)
Karşımıza resim2 deki gibi bir pencere gelecektir.
Burada; Menu items: ekleyeceğimiz linklerin ve adlarının göründüğü alan,
Text: Ekleyeceğimiz linkin adı, menü öğesi. When Selected, Go To URL: O seçenek seçildiğinde gidilecek olan sayfa. Open URLs In: Gidilecek linkin hangi pencerede açılacağı. Eğer frameli bir sayfa ise burada seçeceğimiz değer target taki gibidir. Örneğin mainFrame seçmek gibi. Frame yoksa Main Window seçili kalabilir.
Option seçeneklerinde ise;
Insert Go Button After Menu: Listemizin sağına bir go butonu ekler. Linki seçtiğimizde go butonuna tıkladıktan sonra sayfaya gidilir. Bu seçenek seçili değil olarak bırakılırsa, linki seçtiğimiz an ilgili sayfaya gidecektir.
Select First Item After URL Change: İsmindende anlaşılacağı üzere,link değişse de Jump Menünün ilk elemanı hep görünen eleman durumundadır.
Seçeneklerin anlamlarını gördüğümüze göre, örneğimizi yapmaya başlayabiliriz.
İlk olarak text alanına about yazıyoruz. Go to URL ye about.htm tanımlıyoruz. Bu örneğimiz Frame li olmadığı için menu name i aynı bırakıyoruz. Go butonlu liste olsun diye de options tan ilk seçeneği seçiyoruz. Sonra üstteki + butonu ile ikinci linkimiz içinde aynı değerleri giriyoruz. Bu işlemi kaç tane linkimiz var ise tekrarlıyoruz.
Linklerimizi tamamladıktan sonra Ok tuşuna basıp işlemimizi tamamlıyoruz. (resim3) Sayfamızı kaydediyoruz. Şimdi örneğimize browserda bakabiliriz.
Varsayalım ki Jump menünüzde hata var ve düzeltmek istiyorsunuz ozaman sayfaya eklediğiniz Jump Menüyü seçiyorsunuz ve Properties panelinden List Value butonuna tıklıyorsunuz buradan jump Menünüzü edit edebilirsiniz. Hadi kolay gelsin....
İMAGE MAP EKLEMEK
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...
Image Map(Resim Haritaları)
Image map, bir resme birden fazla link vermek amacıyla kullanılır. Resmin belirli bölümleri kare, daire yada poligon alanlarla seçilerek linkler verilebilir. Bu işlemi gerçekleştirmek için image map kullanılır. Şimdi örnek resmimiz üzerinde bir uygulama yapalım.
İlk olarak Resim1 deki resimi sayfamıza ekliyoruz. (object menüsünden insert image ile)
Resmimizi seçiyoruz. Properties penceresine baktığımızda sol alt köşede map alanı görülecektir. Bu alanda;
Map: Map adı herhangi bir isim veriyoruz.
Pointer Hotspot Tool: ok şeklindeki simge. Oluşturduğumuz map alanlarını taşımak amacıyla kullanılır. Ayrıca yapılan bir poligonal seçimi iptal etmek işlevinde de kullanılır.
Rectangular Hotspot Tool: Dörtgen şeklinde bir map alanı belirlemek için kullanılır.
Oval Hotspot Tool: Dairesel bir map alanı belirlemek için kullanılır.
Polygon Hotspot Tool: Çokgen bir alan seçmek için kullanılır.
Örneğimizde Hakan Ünsal, Okan ve Hakan Şükür' de Polygon Hotspot, Arif te ise Oval Hot spot kullanacağız.
ilk olarak map adını verdikten sonra polygon Hotspot butonuna basıyoruz, mouse ile Hakan Ünsal' ı seçecek şekilde bir polygon çiziyoruz. Bu işlemi bitirdikten sonra properties da Link kısmına hunsal.htm linkini, target değerine eğer frame kullanıyorsak target ifadesini (mainFrame v.b.), Alt alanına ise (mouse link üzerine gelince görünecek olan mesaj) Hakan Ünsal yazıyoruz. Aynı işlemi Okan ve Hakan Şükür içinde gerçekleştiriyoruz. Bunu yapmadan önce polygon seçimini pasif hale getirmek için
pointer hotspot ile resmin boş bir alanına bir kez tıklıyoruz. Aksi takdirde Hakan Ünsal' ın üzerindeki polygonun devamını çizme hatası ortaya çıkabilir.
Son olarak Arif in resminin üzerine Oval Hotspot ile bir daire çizelim. Properties' dan Oval hotspot u seçtikten sonra bir daire çiziyoruz. Sonra Pointer Hotspot ile bu daireyi istediğimiz yere konumlandırıyoruz. Linki, target ve alt değerini giriyoruz. Image map imiz artık hazır. Kaydedelim ve örneğimize göz atalım.
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 ;
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ı unutmayacağınıza eminim.
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.
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 text-decoration: 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. Işte şekilde de göreceğiniz üzere kırmızı daire içersinde işaretlenmiş olan şey sizin az önce kurduğunuz extension.Işte buna 1 kez tıklayın.
Resim 1 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.
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.
SWAP İMAGE
Yanda gördüğünüz swap image ile yapılmış bir örnektir. Soldaki resimlerin üzerine geldiğiniz zaman sağda duran resim değişmektedir. Aslında sağda değişşen resmi büyük yapabilirdim ama sayfanın boyutu artacaktı. Siz isterseniz resimlerin büyük halini yapabilirsiniz. Böyle etkileşimli bir menü yapmak için en az 5 resim dosyasına ihtiyacınız var. 2tanesi solda duran resimler için 1 tanesi sağda duran tek resim için kalan 2 si ise solda ki resimlerin üzerine gelince sağda çıkacak olan resimlerdir. Ben örneğimde 3 resim dosyası kullandım çünkü üzerlerine gelince çıkan resimler aynı. Siz büyüklerini kullanmak isterseniz bu sayı 5'e çıkar. Burda önemli olan konu sağda ki resimle çıkacak olan resimler ayunı boyutlarda olmalı yoksa resimlerin kalitesi bozulmakta. Eğer gerekli dosyalar hazırsa örneğe başlayalım.
Öncelikle bir tablo oluşturup resimlerinizi yerleştirin. Daha sonra resimleri adlandırın. Nasılmı resmi seçili hale getirdiğinizde özellikler araç çubuğunda sol üzt köşedeki resim görülen bölümün yanına herhangi bir isim yazarak resimleri adlandırın ve hepsine ayrı isimler verin. Mesela ben a,b ve c isimlerini kullandım. Bu işlemi bitirdikten sonra ilk resmimizi (a resmi) seçip Behaviors menüsünden Swap İmage'ı seçin. (Window>Behaviors + sembolüne basarak>Swap İmage) Aşağıdaki gibi bir menü çıkar karşınıza. Her resim için aynı işlemleri ayrı ayrı yapacağız.
Bu menüde;
İmages bölümü sayfa içerisinde bulunan tüm resim dosyalarınızı görüntüler. Yani çok fazla şey varsa şaşırmayın. Bizim için önemli olan isim verdiklerimiz. a resminin üzerine gelince ben c resminin değişmesini istiyorum onun için burada image"c"'yi seçiyorum.
Set Source to buraya ise değişecek resmi gösteriyorum.
Diğer ayarlamalarla oynamanıza gerek yok. OK tuşuna basınca a resmi için işlem tamam.
Şimdi b remi için aynı işlemi tekrarlayıp Ok tuşuna basarak komple işlemi bitirmiş oluruz. Bu şekilde etkileşimli menümüz hazırlanmış olur.
Bununla ilgili hazırlamış olduğum örneği inceleyebilirsiniz. 10 tane güzel otomobil resmi Swap image ile yapılmış bir örnek. Zip'li halde dosyadadır boyutu ise 341kb ortalama 1 dakika içerisinde indirirsiniz. İndirmek için tıklayınız.
META TAGLAR
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.
TABLO KULLANIMI
Web sayfanıza yeni bir tablo eklemek için yapmanız gereken objects (nesneler) panelinden insert table butonuna birkez tıklamak...
Bu işlemden sonra karşımıza ekleyeceğimiz tablonun özelliklerini belirtmemiz gereken aşağıdaki gibi bir pencere çıkacaktır . bu pencerede tablomuzun satır ve sütun sayısı gibi bilgileri girdikten sonra ok tuşuna basalım.
Tablomuz sayfamıza eklenecektir. Şimdi sıra eklediğimiz tablonun özelliklerini değiştirmeye daha doğrusu geliştirmeye geldi. Tablomuzun özelliklerini değiştirmeden önce sayfaya niçin tablo ekleriz konusuna gelelim.
Bir web sayfasında tablo iki amaç için kullanılır;
1.) Word ve Excel de ne amaçla kullanıyorsanız onun için. Yani sayfamızda tablo şeklinde gösterdiğimizde daha kolay anlaşılacak olan bir veri var ise bunu tablo kullanarak gösteririz.Örneğin aşağıdaki tablo gibi...
Sanırım buna benzer tabloları word te de kullanmışsınızdır.eğer bu tür hiç tablo görmediyseniz kendinizi fazla yormayın ve vakit erken iken siz bu web tasarımı işinden vazgeçin:-))
2.) Tabloların ikinci kullanılış amacı ise web sayfalarının dizaynını kolaylaştırmak ve tabloyu bir dizayn aracı olarak kullanmaktır. Mesela bir web sayfasında resimleri ve yazıları aynı anda yan yana kullanmak istiyorsunuz bu gibi durumlarda tablolar en büyük yardımcılardır. Ama burada dikkat edilmesi gereken en önemli nokta bu tabloların border’larının (çerçeve) sıfır olmasıdır. Aşağıda bu tür tablolara bir örnek görüyorsunuz...
Bu tablonun çerçevelerine dikkat ederseniz kesik çizgilerden oluştuğunu görürsünüz. Bu çizgiler İ. Explorer da görünmez. Çünkü Border değeri (çerçeve) sıfırdır.
Şimdi de sıra tablomuzun üzerinde değişiklik yapmaya geldi(mesela satır sayısını değiştirmek hücrelerin genişliklerini değişitirmek hücrelerin arka plan renkleri ile oynamak vb) değişiklik yapmak için önce tabloyu seçmeniz lazım. Tabloyu seçmek için tablonunsol üst köşesine gelin ve fare dört taraflı ok işareti şeklinde iken tıklayın. aşağıdaki gibi bir özellikler pencereniz olacak....
Bu penceredeki her değeri teker teker değiştirin ve tablonuzdaki değişiklikleri gözlemleyin... Burada tablonuz ile ilgili yapamayacağınız değişiklik yoktur... Bütün bu işlemlerden sonra sayfanızı kaydedip internet tarayıcınızdan görebilrisiniz...
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.
Ö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.
Commands>Format Table seçeneğine tıkladığınızda aşağıdaki görünümünü elde etmeniz gerekiyor.
Not - 1: Tablonuzun özelliklerini aynı word te olduğu gibi AutoFormat özelliğini kullanarak değiştirebilirsiniz. Bunun için tabloyu seçin ve Commands menüsünden Format seçeneğini tıklayın ve buradan beğendiğiniz bir sitili seçin...
Not - 2:Tablonuzun yada herhangi bir hücrenin arkaplanına resim ekleyecekseniz önce sayfanızın kaydedilmiş olması gerektiğini unutmayınız..
FRAMELER
Web sayfalarında frameler bir browser penceresinde (yani internet explorer vb.) birdan fazla web sayfasını aynı anda göstermektir. Daha önce girdiğiniz web sayfalarında muhakkak görmüşsünüzdür bazı web sayfalarının bazı bölümleri sürekli sayfada sabit olarak durur özellikle sayfanın menü kısmı ve üstte bulunan reklam banner kısmı buna en güzel örnektir. İşte bu tür bazı yerleri hiç değişmeyen sayfalar oluşturmamnın yolu sayfada frame kullanmaktan geçer.
Web sayfanızı framelere ayırmak için yapmanız gereken objects (nesneler) panelinden Common yazısının hemen yanındaki aşağıya doğru küçük ok işaretine bir kez tıklamak... Bu ok işaretine tıkladığınızda karşınıza bir menü gelecek buradan "Frames" seçeneğini seçin.
Frames seçeneğini seçtiğimizde karşımıza hangi tür bir frame seçeceğimizibelirlemeye yarayan pencere gelecektir. Burada tek yapmanız gereken size uygun bir frame çeşidini seçmek.Frame çeşidini seçtiğinizde sayfanız hemen framelere ayrılacaktır. Bu işlemden sonra DW ekranında gördüğünüz her bir çerçeve ayrı bir web sayfasıdır aslında. Şimdi bu sayfaların teker teker bd color larını değiştirirseniz hepsinin bir birinden bağımsız sayfalar olduğunu daha iyi anlarsınız.
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 Insert>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 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 |
|
 |
|
|
|
|
[
]
|
|
|
|
|
|
|
|
|
 |
|
| |
|
|