kardeş teşekkürler çok güzel yalnız programı bulamıyorum onuda verirsen daha güzel olacak

gerçekten çok güzel bir paylaşım emeğinize sağlık

harbi sahol çok teşekkürler werdiğn bilgiler için edit: You must spread some Karma around before giving it to sinekwalesi again.

Kardeş güzel anlatım yalnız satır boşluklarında resimlermi vardı onu anlamadım eğer öyleyse resimler nerde?

Hücre Biçimlendirme Bir tablo içerisindeki hücreleri tek tek seçerek veya bir grup hücreyi fare ile seçerek değişik biçimler uygulayabilirsiniz. Hücre ayarları diyalog kutusunu ekrana getirmek için ayarlamak istediğiniz hücreleri farenin sol düğmesine basılı tutup sürükleyerek seçin. Aşağıdaki örnek ekran görüntüsünde tablonun sağ alt tarafındaki üç hücre seçili duruma getirilmiş olarak görünüyor. Dikkat ederseniz, seçili duruma getirilen hücrelerin çerçevesi koyu renkle işaretlenmiş durumda. Böyle bir seçim yaptığınızda aşağıdaki diyalog kutusunun seçeneklerinin de değiştiğini ve ekranda hücrelere özel ayarların görüntülendiğini fark edeceksiniz. Şimdi bu yeni ayarlara bir göz atalım. Diyalog kutusunun üst tarafındaki ayarların bir önemi yok, onlar klasik metin biçimlendirme seçenekleri. HORZ :Hücre içeriğinin hücre içinde yatay olarak yerleşimi VERT :Hücre içeriğinin hücre içinde dikey olarak yerleşimi NO WRAP :Hücre içeriğinin genişliği hücre genişliğinden uzunsa bir alt satıra inilecek mi? HEADER :Hücreler başlık hücreleri mi? Bir tablo içerisindeki hücrelerin içerdiği metinler birbirinden değişik uzunlukta olabilirler. Eğer herhangi özel bir ayar yapılmamışsa bu içerik dikey olarak ortalanarak, yatay olarak da sola yaslanarak görüntülenir. Ancak siz istiyorsanız bu yerleşim seçeneğini değiştirebilirsiniz. Bu yerleşim ayarları hücre özellikleri diyalog kutusunun HORZ ve VERT seçenekleri kullanılarak yapılmaktadır. Aşağıdaki resimdeki tabloda bu ayarların değişik kullanım örneklerini içeren bir tablo görüyorsunuz Web Sayfasında Frame'ler Bir sayfada aynı anda birden fazla sayfanın kullanımı olayıdır. Örneğin sol tarafta hep sabit kalan bir navigator bar sağ tarafta ise menüdeki butonları tıkladıkça değişen bir sayfa, frame kullanımı bu ve buna benzer şekillerde olabilir. Frame kullanmaktaki en büyük avantaj sayfanın menüsünün veya sabit kısmının bir kez yüklenerek defalarca yüklenmesini ve buna bağlı olarak sayfanın açılışını yavaşlatmasını engellemektir. Frame eklemek için: INSERT/Frame menüsü altındaki frame seçeneklerinden birini kullanabilirsiniz. İsterseniz Object araç penceresinden Frame'i seçip, istediğiniz bir modeli sayfanıza tıklayabilirsiniz. Frame'inizi ekledikten sonra frame ile ilgili ayarları yapmaya başlayabiliriz. İlk önce frame'inizin genişliğini ayarlamalıyız. Onun ardından WINDOW/Frames penceresi aktif durumda değil ise aktif duruma getirerek sayfamızdaki framelerin genel bir görünümünü alabiliriz. Bu pencere sayesinde seçtiğimiz frame ile ilgili ayarları Property Inspector üzerinden değiştirebiliriz. Eğer frame'inizde kaydırma çubuğu çıkmasını istemiyorsanız Scrooling kısmına 'No' olarak bırakmalısınız. Gelelim framelerin kaydedilmesine; her frame ayrı birer HTML sayfasıdır, bu yüzden her biri ayrı ayrı kaydedilmelidir. İlk önce bu framelerin bir arada durmasını sağlayan dış sayfayı kaydetmelisiniz. Önce WINDOW/Frames penceresi aktif durumda değil ise aktif duruma getirerek sayfamızdaki framelerin genel bir görünümünü sağlayınız. Sonra bu pencereden en dıştaki pencereyi seçili duruma getirin. Sonra FILE... menüsünden Save Frameset komutunu tıklayın. Dosyanızı site tanımlaması öncesi oluşturduğunuz klasörün içine kaydedin. Daha sonra Frames penceresinden diğer Frameleri seçip, FILE... menüsünden Save All Frames komutu ile diğer sayfaları da kaydedin. Dosyalarınızı kaydederken, kayıt türünü Html Documents olmasına dikkat edin. Eğer daha önceden hazırlamış olduğunuz bir sayfayı seçtiğiniz bir Frame gömmek istiyorsanız FILE... Menüsünden Open in Frame komutunu kullanabilirsiniz Framelerden birisi üzerinde bir link varsa ve bu linke tıklandığında hangi framelerin değişip hangisinin sabit kalacağı ayarı Property Inspector üzerinden yapılabilir. Burada link eklediğiniz text yada resim dosyasını seçtikten sonra Property Inspector üzerindeki link kutucuğunun yanındaki Target seçeneğini ihtiyacınıza göre değiştirmelisiniz. Blank : Tıklanan sayfayı hiç bozmadan yeni bir pencere açarak linki o pencere içinde açar. _Parent : Linki kendi üzerinde açar _Self :Varsayılan ayarlardaki frame'i açar. _Top :En dıştaki frame'in değişmesini sağlayarak tüm framelerin yerini alan tek bir sayfa açılmasını sağlar. _MainFrame:Ana Frame'in değişmesini sağlar. _LeftFrame, _RrightFrame, topFrame... eklediğiniz framelere göre istediğiniz frame'in değişmesini sağlayabilirsiniz. Bir Web sayfasında kullanılan her çerçevenin diğerlerinden farklı bir adı vardır. Çerçeve içeriğine işaret etmek için bu isim kullanılacağı için her çerçevenin adını akılda kalıcı bir şekilde belirleyebilirsiniz. Adını değiştirmek istediğiniz çerçevenin üzerine tıkladığınızda özellikler diyalog kutusunun sol alt tarafında FRAME NAME adında bir bölüm göreceksiniz. Buradan çerçevenin ismini belirleyebilirsiniz. Her çerçevenin ilk başta ismi bellidir. Ancak siz bunları değiştirip, üst, sol, sag gibi isimler verebilirsiniz. Burada da dikkatinizi çekeyim, çerçeve ismi olarak boşluk ve Türkçe karakterler kullanmayın. Çerçevelerin ismini değiştirdiğinizde temsili çerçeve penceresindeki çerçevelerin içinde de bu isimleri göreceksiniz. Bu arada, çerçevelerin içerisine alınan Web sayfaları ile çerçevelerin boyutlarının aynı olması mümkün değil elbette. Bu tür bir durum söz konusu olduğunda, Web sayfasının içeriği çerçeve sınırının dışına taştığında sayfa içeriğini görmek için çerçevelerin yanında kaydırma çubukları çıkmak zorundadır. Bazı durumlarda bu çerçevelerin çıkmasını istemeyebilirsiniz, veya sadece gerekli olduğunda görüntülenmesini tercih edebilirsiniz. Bu ayarı yapmak için temsili çerçeve penceresinden ayarını yapmak istediğiniz çerçeveyi seçerek, özellikler diyalog kutusu içerisinden de SCROLL seçeneğini kullanacaksınız. Buradaki seçenekler şöyle: NO :Web sayfası taşsa bile çerçevede kaydırma çubukları görüntülenmeyecek YES :Web sayfası tassa da taşmasa da kaydırma çubukları görüntülenecek AUTO :Normalde kaydırma çubukları görüntülenmeyecek, Web sayfası taşarsa görüntülenecek Web sayfanızda nasıl bir tasarım kullandığınıza bağlı olarak bu araç çubuklarını görüntüleme veya görüntülememe seçeneğini kullanabilirsiniz. Bu arada, çerçevelerin boyutlarının internet kullanıcısı tarafından değiştirilmesini isteyip istemediğinize bağlı olarak da bazı kısıtlamalar koyabilirsiniz. Bunun için ilgili çerçeveyi seçili duruma getirin, özellikler araç çubuğundan NORESIZE seçeneğini kullanın. Eğer bu seçeneği aktif hale getirirseniz internet kullanıcısı çerçevelerin boyutlarını değiştiremez, eğer açık bırakırsanız isteyen çerçeveyi istediği gibi değiştirebilir. Bir çerçeveyi kaldırmak istediğinizde bütün yapacağınız çerçeve sınırını fare ile sürükleyip Web tasarım penceresinin sol veya üst taraflarına dayamanız yeter lidir. Çerçeve anında silinecektir. Bunun dışında çerçevenin boyut larını sayfayı düzenlerken fare imleci ile sürükleyip bırakarak iste diğiniz gibi değiştirebilirsiniz. WEB SAYFALARINDA TASARIM KOLAYLIKLARI ŞABLON OLUŞTURMA Bir Web sitesindeki sayfaların temel tasarım özelliklerinin birbirine benzemesi geçerlidir. Böylece Web sitesini gezen bir Internet kul lanıcısı ziyareti esnasında sürekli olarak aynı Web sitesi içerisinde dolaşmakta olduğunun bilincinde olur, bir sayfadan diğerine geçti ğinde tasarıma yabancı olmadığı için aradığı bilgiyi kolayca bulabi lir, içerisinde birbirinden farklı tasarımlar kullanılmış onlarca Web sayfasından oluşan Web siteleri ziyaretçileri tarafından çok fazla ba şarılı bulunmamaktadır. Bu arada, bazı sayfalarda çok tekrar ettiğiniz kodlar da olacaktır elbette. Örneğin en baştaki bölümlerde bahsettiğimiz Türkçe ka rakter setini aktif hale getirmek için kullanılan <META> takısı ayarlarını, Web sitenizde oluşturduğunuz bütün sayfalarda kullan manız şarttır. Web sitenizdeki bütün sayfalarda aynı arka plan rengini veya desenini kullanacaksınız diyelim. Bu durumda oluştur duğunuz bütün sayfalarda, tek tek özellikler diyalog kutusunu açıp arka plan resmini belirlemek sıkıntı yaratacaktır. Dreamweawer, standart bir Web sayfası hazırlama nıza ve bu sayfayı Web sitenize şablon olarak kaydetmenize imkan veriyor. Böylece, çok standart sayfalardan oluşan bir Web sayfasın da boş sayfaları bu şablondan yola çıkarak hazırlayıp pek çok zah metten kurtulmuş oluyorsunuz. Şablonumuzu bu boş alanda adım adım oluştu racağız. Önce FILE menüsünden Save As Template komutu nu çalıştırın. Bu komutu çalıştırdığınızda ekrana o anda Web siteniz için ta nımlanmış olan şablonların görüntülendiği bir diyalog kutusu gö rüntülenecektir. Şu anda herhangi şablon olmadığı için bu diyalog kutusu içerisindeki liste boştur. Diyalog kutusu içerisinde SAVE AS bölümüne gelin ve şablonunuzun ismini belirleyin. Aşağıdaki ör nek resimde şablon ismi olarak "tasarım" kullanılmıştır. Her zaman olduğu gibi şablon isimlerinde de Türkçe karakter ve boşluk kullan mıyoruz. Şablonumuzu kaydettikten sonra FILE menüsünden Close komutunu çalıştırın ve Web tasarım penceresini kapatın. Hızlı erişim çubuğundan SITE düğmesine basın ve site haritasını ekrana getirin, site haritası içerisinde TEMPLATES adında yeni bir klasörün yaratıldığını göreceksiniz. Bu klasörü açtığınızda da şab lon dosyanızın buraya kaydedilmiş olduğunu göreceksiniz Soyadı DWT olan şablon dosyalarını istediğiniz gibi değiştirebi lirsiniz. Bunun için üzerine çift tıklamanız yeterli olacaktır. Dosya nın üzerine çift tıkladığınızda şablon dosyası Web tasarım editörü nün içerisinde açılacaktır. Şimdi gerekli değişiklikleri yapmaya başlayabiliriz.

Bu ayarı da kontrol ettikten sonra diyalog kutusunun en altına gelin ve burada Go To Url bölümünde BROWSE düğmesine basarak bu düğmeye tıklandığında ekrana getirilecek olan Web say fasını ayarlayın. Eğer buradan başka bir Web sitesine link verecek siniz. Bu link'in adresini bu metin kutusunun içerisine direkt olarak girebilirsiniz. . Ayarlarımız tamam, artık Ok düğmesine basıp bu diyalog kutu sunu kapatabiliriz. Diyalog kutusu kapatıldığında ekranda düğmenin birinci halini göreceksiniz. Dreamweaver penceresinde fare imleci nin değişimini izleyemezsiniz. Bunun için CTRL + S tuşlarına basın ve dosyayı kaydedin. Daha sonra F12 tuşuna basarak Web sayfası nı Web tarayıcınız içerisinde görüntüleyin. Düğmelerinizin çalışmakta olduğunu göreceksiniz. Düğmeleri çerçeveli sayfalarda kullanırken, link'leri ayarladık tan sonra Web sayfasının içerisinde üzerine tıklayın ve özellikler penceresinin alt bölümündeki TARGET seçeneğini kullanarak işaret edilen Web sayfasının hangi çerçeve içerisinde açılacağını belirlemeyi unutmayın.

ssaol kadrş bilmeyenleri için güzel paylaşım oslo_-

Teşekkürler gerçekten emek

Saol Kardeşim Güzel Bir Paylaşım

Metin Biçimlendirme Dreamweawer' da yazılarınızı bir metin editörü kullanır gibi girebilir ve biçimlendirebilirsiniz. Sayfanızın ilk satırından başlayarak yazılarınızı girebilirsiniz. Metni girdikten sonra seçili hale getirip daha sonra Properties(Ctrl+F3) penceresini kullanarak bu metni istediğiniz gibi değiştirebilirsiniz. Metin özellikleri diyalog kutusu aşağıdaki şekilde gösterilmiştir. Başlık için istediğiniz bir biçimlendirmeyi buradan seçebilirsiniz. Metnin fontunu buradan seçebilirsiniz Metnin punto büyüklüğünü buradan girebilirsiniz. Metnin rengini buradan belirleyebilirisiniz. . Belirlediğiniz rengin HEX kodunu buradan görebilirsiniz. Seçilen metini kalın yapar. Seçilen metini eğik yapar. Seçilen metini sola, ortaya veya sağa yaslar. Seçili metinle bir başka sayfaya link verecekseniz, onun yolunu burada belirtebilirsiniz. Eğer sayfanızda frame kullanıyorsanız, linke tıklandığında hangi çerçeve içinde açılacak. Madde imi ve numaralandırma. Liste girdileri ve paragraf girintisini artırma-azaltma. Properties penceresinden yapılan işlemler ile ilgili kodları görmek için kullanılır. Web Sayfası ve Resimler Bir web sayfası içerisinde metinler ne kadar önemliyse, resimler de bir o kadar önemlidir. Düz yazı ile anlatamayacağınız pek çok şeyi resimlerle anlatabilirsiniz. Resimler aynı zamanda sayfaların göze güzel görünmesini sağlamaktadır. Özgün bir sayfa için, Internet üzerinden Internet kullanıcılarına sunacak olduğunuz malzemeleri çok iyi seçmelisiniz. Bu arada resimlerin aşırı kullanımından da kaçınmak gerekir. Zaten yavaş olan Internet hızıyla, bol resimlerle dolu bir web sayfasının yüklenmesini beklemek sayfanızı ziyaret edenlerin kaçmasına yol açacaktır. Bu yüzden sayfalarımızda dev resimler kullanmak hiç de mantıklı bir yöntem olmayacaktır. Bu web sayfalarını yaratırken kullanacağımız resimleri web sayfalarımıza nasıl yerleştireceğinizi de bu bölümde ayrıntıları ile göreceksiniz. Web sayfalarında kullanılan resimler, GIF veya JPEG formatında olmalıdır. Resimleri sınıflandırmak gerekirse, GIF türündeki resim dosyalarının daha çok çizim, düğme, logo gibi görüntüleri web sayfalarına aktarmak için kullanıldığı söylenebilir. Fotoğraf, manzara, peyzaj gibi görüntüleri web sayfalarında kullanmak gerektiğinde ise JPEG formatındaki resimler daha iyi sonuç verir. Her ikisi de "sıkıştırmak" bir resim formatı olan GIF ve JPEG arasında da birçok fark var. GIF resimleri sıkıştırırken kayba neden olmuyor, resmin orijinal görüntüsü neyse ekranda da onu gösteriyor. Oysa kayıplı sıkıştırma yapan JPEG formatında, resim biraz bozuluyor. Ancak daha çok fotoğraf türü resimlerde kullanıldığı için bu kayıp çok da büyük farklar getirmiyor. Bir web sayfasına bu iki formattan birinde hazırlanmış bir resmi yerleştirmek için resmi, ilk önce web siteniz için hazırladığınız klasörün içerisindeki "resimler" klasörüne kopyalamalısınız. Yukarıdaki örnek resimde, fare imleci hemen birinci paragrafın başında bulunuyor. "Bütün kartların..." kelimeleri ile başlayan cümlenin başında yer alıyor. şimdi bu konumda bir resim eklemek için sol taraftaki alet çantası adını verdiğimiz araç çubuğundan birinci düğmeye basabilirsiniz veya INSERT menüsünden Image komutunu tıklayabilirsiniz. Gözat penceresi içerisindeki herhangi bir resmin üzerine tıkladığınızda o resmin örnek bir görüntüsünü diyalog kutusunun sağ tarafından izleyip kararınızı ona göre verebilirsiniz. Bu önizleme görüntüsünün hemen altında da resmin eni ve boyu, resim dosyasının boyutu ve web tarayıcısının normal şartlarda bu resmi ne kadar zamanda yükleyebileceği yazacaktır. Gerekli ayarları yaptıktan sonra SELECT düğmesine basın. Resim web sayfası içerisinde ayarlamış olduğunuz yerde görüntülenecektir. Resim Etiketleri Bir web sayfası açıldığında, ilk önce metinler, arkasından da resimler yüklenir. Ancak bazı durumlarda, örneğin internet hızının düşük olduğu durumlarda bu resimlerin yüklenmesi uzun bir zaman alabilir. Bu durumda web sayfasının yüklenmesi sırasında internet kullanıcısının kendisini nasıl bir web sayfasının beklediğini bilmesi için web sayfalarındaki resimlerin etiketlerini belirlemek iyi bir fikir olacaktır. Eğer bir resme etiket koyarsanız, web sayfası yüklenirken resmin bulunması gereken yerde bu etiket yazar ve web sayfasını yükleyen kişi de en azından nasıl bir resimle karşılaşacağını bilir. Web sayfanıza aldığınız herhangi bir resme böyle bir metin etiketi yapıştırmak istiyorsanız resmi seçili duruma getirin ve özellikler diyalog kutusuna bakın. Burada sağ alt tarafta göreceğiniz ALT isimli metin alanına resmin etiketini yazıp ENTER tuşuna basarak yapabilirsiniz. Web sayfanızdaki bir resim üzerine gelirseniz Resim properties görünür. Resimleri Değişik Konumlara Yerleştirmek Bir resmi bir web sayfasına yerleştirdikten sonra etrafındaki metne göre konumunu değiştirebilirsiniz. Aynen kelime işlem veya diğer sayfa tasarım programlarında olduğu gibi resmi sağa veya sola yaslayarak metnin etrafında kaymasını sağlayabilirsiniz. Böylece gereksiz üst ve alt boşlukların oluşmasını da engellemiş olursunuz. Örneğin bir önceki ekran görüntüsünde aldığımız resimde herhangi bir "yaslama ayarı" yapılmamış olduğu için resmin hemen sağında metin gereksiz yere aşağıdan başlamış olarak görülüyor. Bir resmi metne göre sağa veya sola yaslamak için resmin üzerine bir kere tıklayın ve seçili duruma getirin. Seçili duruma getirilen resmin etrafında bir çerçeve göreceksiniz. Şimdi özellikler diyalog kutusuna bir göz atın (eğer ekranda değilse CTRL + F3 tuşlarına basarak bu diyalog kutusunu ekrana getirebilirsiniz). Bu diyalog kutusunun içerisinde sağ üst tarafta ALIGN adında aşağı doğru açılan bir liste kutusu göreceksiniz. Buradan resmi sola veya sağa yaslayabilirsiniz. Sol için LEFT, sağ için de RIGHT seçeneğini kullanabilirsiniz. Bir resmi sağa veya sola yasladığınızda, editör ekranı içerisinde küçük mavi bir karecik göreceksiniz. Bu mavi kareciği fare ile sü rükleyerek resmin metne göre yerleşimini ayarlayabilirsiniz. Yani mavi kareciği fare ile sürükleyerek metnin içerisinde herhangi bir yere bırakabilir ve resmin o konuma göre sağa veya sola yaslanma sını sağlayabilirsiniz. Bazı durumlarda resimleri metne göre değil metinleri resme göre yerleştirmek gerekebilir. Örneğin alt alta resimlerin yer aldığı ve sağ taraflarında da açıklamaların bulunduğu bir web sayfası hazırlamak istediğinizi varsayalım. Bu durumda metinleri resimlerin tam ortalarına denk getirmek isteyebilirsiniz. Veya bütün metinleri resimlerin sağ üst köşeleri ile hizalamak gibi bir amacınız olabilir. Bu durumda da yine resim özelliklerinden ALIGN ayarını kullanacaksınız. Burada kullanabileceğiniz seçenekleri kısaca özetleyelim. Baseline veya Bottom Metin satırının en alt sınırı resimle hizalanır. Çengellere dikkat edilmez.. Absolute Bottom Metin satırının en alt sınırı resimle hizalanır. Çengellere dikkat edilir. Top Metin satırı içerisindeki en yüksek karakterin en üstü ile resmin en üstü hizalanır. Text top Metin satırı içerisindeki en yüksek karakterin en üstü ile resmin en üstü hizalanır. Middle Metin satırının en alt sınırı, resmin tam ortası ile hizalanır. Absolute Middle Metin satırının tam ortası, resmin tam ortası ile hizalanır. Resimlere Çerçeve Eklemek Web sayfalarınıza aldığınız resimlere bu tür çerçeveler eklemek istiyorsanız, bu işlemi yapmak için Macromedia Dreamweawer ile sayfaya resmi ekledikten sonra üzerine bir kere tıklayın ve seçili duruma getirin. Properties penceresinden Border alanına sayısal değer girin. Resim.9. 31 Resimlere Linkler Link'leri kısaca tanımlarsak, link "bağlantı" anlamına geliyor. Aynı zamanda bir web sayfası içerisinde üzerine fare ile tıkladığınızda sizi başka bir web sayfasına alıp götüren bir alana verilen addır. Yani köprü. Bir web sayfası içerisindeki herhangi bir nesneyi bir link'e dönüştürebilirsiniz. Linkleri koymak ve kullanmak Dreamweawer ile son derece kolaydır. Bu bölümde değişik web sayfası elemanları kullanarak bir web sayfasından diğerine veya bir web sayfası içerisinde, bir yerden başka bir yere link vermeyi öğreneceğiz. Sayfa İçerisindeki Link'ler Çok uzun bir web sayfanız olduğunu düşünelim. Ekranlara sığmıyor, en az bir iki ekran aşağı doğru kaymanız gerekiyor. Bu durumda, bu upuzun yazıyı belli başlıklarla ayırıp sayfanın üst tarafından başlıklara link vererek web sayfasına bağlanan bir Internet kullanıcısının sayfa içerisinde aşağı yukarı kaydırma yapmadan istediği bilgiyi içeren bölüme gitmesini sağlayabilirsiniz. Elbette o bölümünün sonunda sayfanın en tepesine geri dönmesini sağlayacak bir link koymayı unutmamalısınız. Biz bu işleme "sayfa içerisinde link vermek" diyoruz. Bu konuyu bir örnekle uygulamaya başlayabiliriz. Önce üzerinde çalışmak istediğiniz sayfayı açın. Bu sayfanın içerisinde en az iki üç ekran aşağı kaymanızı gerektirecek uzun bir yazı olmasına ve bölüm başlıkları ile ayrılmış olmasına dikkat etmelisiniz. Yoksa yapacağımız işi kendi bilgisayarınızda iyi örnekleyemezsiniz. Bu tür uzun yazıları eski kelime işlem belgelerinizden bulup kopyalayıp Macromedia Dreamweawer editör penceresine yapıştırarak elde edebilirsiniz. Öncelikle INSERT >> invisible tags >> Anchor komutunu çalıştırıyoruz veya Ctrl+Alt+A tuş kombinasyonunu kullanarak da ulaşabiliriz. Linke tıkladığımızda nereye gitmesini istiyorsak anchor linkini o bölge üzerinde veriyoruz aşağıdaki şekilde olduğu gibi.

eline saglık kardes..

güzel döküman.. Eline sağlık +k

NAVIGATION BAR EKLEMEK yatay ve dikey olarak bir grup linkler oluşturabilirz. Interactive İmages / Navigation Bar komutu ile oluşturulu Nav Bar Element : Gruptaki elemntin ismi Element name: Elementin ismi Up İmage: Resmin ilk hali Ower İmage: Mouse üzerine gelince oluşacak resim Down İmage: Tıklandıktan sonraki Resim Ower While Down İmage: Üzerine gelince ve tıklandığında oluşacak resim Alternate Text: Resim Görünecek yazı When Clicked, Go To URL : Tıklandığında gideceği linkin adı Preload Images: Bütün resimlerin yüklenmesi FLASH BUTON EKLEMEK Web sayfamıza etkileşimli swf uzantılı flash butonlarda kayabiliriz. Inset / Interactive Images/ Flash buton komutunu verdiğimizde flash buton ekleme dialog penceresi gelir. Sample: Buton örneğini görnek için Style: Buton çeşitleri Button Text : Buton üzerinde görünecek İsim Font: Yazı Tipi Link: Butona tıklanında gideceği web sayfası veya adresi Target: butona tıklandığında Açılacak sayfanın nasıl açılacağı Bg Color: Buton araka plan rengi Save As: Flas Buton adı BEHAVIORS Hazır bazı java kodlarıyla işlemler yapabilmek için Behaviors penceresini kullanırız. bu pencere aktif halde değilse window menüsünden / Bhawiors komutunu çalıştırırsanız sağ tarafta bir pencere açar Go To URL: Web Sayfası açılırken başka bir web sayfasına yönlenme işi bu komutla yapılr. ilk sayfa açılmadan başaka bir web sayfasına gider. Bu java kodları daha çok web server taşındığında başaka bir web sayfasına yönlenmede çok kullanışlıdır. Open Browser Wimdow: Ana Sayfa açılırken isteğimiz boyutlarda başka bir web sayfası açmak için kullanılır. URL To Display: Açılacak Pencere Window Width: Pencere genişliği Window Height: Pencere yüksekliği Navigation Toolbar: Pencere başlığı olup olmayacağı Menü Bar: Menü barın olup olmayacağı Scrolbars as Needed : Kaydırma çubuklarının olup olmayacağı Resize Handles : Yeniden boyutlandırılabilir olup olmayacağı Windows Name: Pencerenin adı Popup Message : Web Sayfasının açılışında bir mesaj pencersi açılması için kullanılır. Set Text: Statüs barda mesaj görüntülemek için kullanılır. Play Sound: Web Sayfası açıldıktan sonra müzik çalması için kullanılır Show Pup – Up Menu: Web Sayfanızda Aktif olan bir link bloklandığında Show Pup – Up Menu aktif hale geliyor. Link tıklandığında alt munüler gelmesi için bu java komutundan yararlanılır. Show Hide Layers: Üst üste katmanlar oluşturup bunlardan birini gösterip diğerlerini gizleyerek sanki bir çok sayfa ile çalışıyormuş gibi bir menü oluşturabiliriz. bu davranışı yapabilmek için işlem sıramız şöyle olacak Layerleri gösterebilmek için üst üste layerler oluşturup hepsini hidden yaparız. Layerin açılacağı link bağlantısını yapmak için metinlere "#" işareti ile link oluşturuz Window menüsünden layer penceresi açılır. Layer 4 Bloklanır ve Behavior penceresinden Show Hide Layers Komutu seçilir. ve aşağıdaki dialog penceresi gelir. hangi layer gösterilecekse o layer Show diğerleri Hide yapılarak üst üste bindirilmiş layerlerden sadece birinin içeriği gösterilir. CSS STYE Web sayfanızda belgelerinizi şekillendirmek için daha önceden tanımlanmış bilgileri ile metinlerinizi, tablolarınızı, formlarınızı şekillendirebilirsiniz. STYLE ÇEŞİTLERİ Dosya olarak style oluşturmak ve sayfalarınıza link bağlarını kurarak style oluşturmak Web sayfanızda HTML Taglar arasına yazarak style oluşturmak CSS Style oluşturmak için Text /CSS Style komutu çalıştırılır. veya Window bölümünden CSS Styles komutu çalıştırılır. CSS Penceresi açılır. CSS Komutu çalıştırıldığında aşağıdaki pencere açılır. Make Custom Style : Özel tanımlamalar yaparak stil oluşturmak Redefine HTML Tag: Direk HTML Taglarına stiller atayarak web sayfasında HTML Taglar kullanıldığında daha önceden tanımlanan HTML Tagları göre şekillenir. USe CSS Selector: Linklerin şeklenmesinde kullanılıyor: Define in: New Style Sheet File: Stillerin bir dosya olarak saklanması This Document Only: Sadece Aktif sayfaya stiler tanımlanması BİR DOSYA OLARAK CSS OLUŞTURMAK: Text/ CSS Styles/ New CSS Style komutu çalıştırılır. 2. Yukarıdaki CSS Style penceresi açılır. Use CSS Selector: Web sayfasında linklere çeşitli stiller oluşturulur. Selector seçeneğinden linklerin durumu seçilir. a:link : Web Sayfasındaki linkin durumu a:visited : Ziyaret edilmiş linklerin durumu a: hover : Mouse ile linklerin üzerine gelince linkin durumu a: activeAktif linkin durumu yukarıdaki işlemlerden herhangi birini seçip ok tuşuna bastığımızda dosyayı kaydet penceresi açılır Bu pencerede css dosyasının adı verilir ve projenin içine kayıt yapılır STİLERİN ÖZELLİKLERİ Not: CSS Tipi ne olursa olsun tüm css işlemlerinde aşağıdaki penceredeki özellikler kullanılır. TYPE: Metinler ile ilgili stil tanımlamaları yapılır. Font: Metinlerin Font Tipi ayarlanır. Size: Metnin boyutu ayarlanır Syyle: Metinlerin styeli ayarlanır. Weight: Metinlerin kayu olup olmayacağı ayarlanır. Line Height: Metinlerin satır yüksekliği ayarlanır. Case: Metinlerin Büyük harf veya küçük harf durumu ayarlanır. Color: Metin rengi ayarlanır. Decoration: Metinlerin altı çizgili, üzeri çizgili, gibi durumlarının olup olmayacağı ayarlanır. daha sonra uygulanan işlemlerin aktif olması için Apply ve ok tuşuna tıklanır. BACKROUNT: tabloların, metinlerin, hücrelerin arka planları ile ilgili stil tanımlamaları için kullanılır. Bacground: Arka Plan Rengi Background İmage: Arka plan resmi Rpeat : Yenileme türü Attachment: eklentinin nasıl olacağı Horizontal Position: Yatay pozizizyon Vertical Position: Dikey posizyonun nasıl olacağı BLOCK: Stillerin bloklanması ile ilgili bölümdür. Word Spacing: Kelimeler arası boşluk Letter Spacing: Harfler arasında Bırakılacak boşluk miktarı Vertical Alignment: Dikey hizlama Text Align: Metinlerin hizalanması Text İndent: Metinlerin ne kadar içerden başlayacağı Display: Bloklamanın nereye uygulanacağı BOX: kutular oluşturmak. Width: Kutunun genişliği Height: Kutunun Yüksekliği Padding: Kutrunun metinlerin boşluğu Margin: marj ayarları Float: Kutunun nereye yerleştirileceği BORDER: Stil uygulanacak alana kenar çizgileri tanımlama işlemi buradan yapılır. Style: Sağ, sola, Alta, ve üste uygulanacak çizgi tipi Width: Çizginin genişliği Color: Çizginin rengi LİST: Madde imleri oluşturmak için kullanılır. Type: Madde imi tipi Bullet image: Madde imi olarak küçük resim kullanma Position: madde iminin pozisyonu POSİTİON: Stil tanımlanan alanların pozisyonlarını belirlemek için kullanılır. Type: Pozisyonun tipi Width: genişiliğ Height: Yüksekliği Placement: Sağ, sol, yukarı, ve aşağı posizyonunu belirlemek. Visibility: Görünürlük durumu Z-Index: Katman sırası EXTENSIONS: Stillerde özellikle link bağlantılarında kullanılır. Before: Önce After: Sonra Cursor: Mouse imlecinin durumu Filter: Filtreleme efekleri Use CSS Selector: linkler ile ilgili stil tanımlamaları yapmak için kullanılan Stil tipidir. Use CSS Selector seçildiğinde Selector açılır menüsünden a: Link: web tasarım aşamasındaki linkin tanımlamaları yapılır. örneğin aktif linkin Font Tipi: Arial, Boyu: 14 Ve koyu yaptık A: Visited: Ziyaret edilmiş linklerin rengi örneğin Ziyaret edilmiş linklerin rengini kırmızı yaptık fontu:arial ve boyutu: 20 yaptık A: Active: Aktif linkler ile ilgili linkin durumunu belirler. örneğin aktif linkler fontu:arial, boyutu:20 rengi yeşil olsun A:Hover: Linklerin üzerine Mouse gelindiğindeki durumu. örneğin Mouse ile linklerin üzerine gelince fontu:arial olsun, boyutu 20 olsun ve rengde turuncu olsun Not: Linkleri bu şekilde tanımlayarak tüm web sayfamızdaki linkleri tanımlarız. Refine HTML Tag : Web sayfasında kullanılan HTML Taglarına direk stil tanımlamaları yapabiliriz. örneğin Bir tablo oluşturuyorsak tablonun arka plan rengi tablo içindeki metinlerin tipi gibi bir çok işlemi html taglarına stiller tanımlayarak kullanabiliriz HTML Tag olarak Table seçtik. Table tag'ına uyguladığımız stiller. Web sayfasında ne kadar tablo oluşturursak tüm tablolarda atanan stil geçerlidir. Table bacground:yeşil yaptık Border: çizgi verdik Make Custom Style : ismini kendimiz tanımladığımız stiller oluştururuz. amacımıza göre çeşitli isimler altında stiller tanımlarız ve bu stilleri web sayfamızda istediğimiz yerde kullanırız. Örnek: özel tanımlı stilleri oluşturmak için Metin1 adını verdik Fontunu arial, boyutunu 10 ve kalın yaptık Bu stili web sayfasınız nesrinde kullanacaksak orada bu stili ekleriz. STİLLERİN WEB SAYFASINA BAĞLANMASI Web sayfasına Stilleri iki türlü bağlarız Sadece Aktif dokumana bağlanır. <Head> </Head> Tagları arasında tanımlanır. CSS Style olarak This Document Only seçilir. ve tanımladığımız stiller head tagları arasında görülür. sadece bu dökümanı etkiler. örneği aşağdaki resim gibi. Önce Stiller uzantısı "CSS" olarak saklanır. sonra tüm sayfalara bağlanır. Sayfalara CSS Dosyasını bağlamak için Text/ CSS Styles/ Attach Stye Sheet komutu çalıştırılır. Gelen pencereden CSS Dosyası seçilir ve ok butonuna tıklanır. Web sayfamızın kod bölümüne aşağıdaki resimdeki gibi bağlantı oluşturunca Dosya içerisindeki tüm dosyalar kullanıma hazır hale getirilir. ALINTI...

TASARIMA NASIL BAŞLANMALI? Web sitesinin tasarımına başlamadan önce site içerisinde kullanacağınız dokümanları oluştur manız gerekiyor. Web sayfaları içerisinde kullanacağınız ses, resim, film ve metin dosyalarını önceden hazırlamanız, hatta hangi dosyayı hangi sayfada kullanacağınızı kağıt üzerinde tasarlamanız, sitenin oluşturulması esnasında size ışık tutacaktır. Ziyaretçi kitlesini ve bu kitleye yapacağınız hitap metinlerini de uygun bir şekilde hazırlamanız, sitenin ziyaretçi oranını arttıracaktır. Web için kullanılan materyallerden site içerisine yazılan dil ve üsluba kadar herşeyden site tasarımcısı sorumlu olacaktır. Bu yüzden site oluşturulurken toplumun sosyal ve kültürel özellikleri göz önünde tutulmalı, hiçbir zaman hukuk ve demokrasi ile çakışan ifadeler kullanılmamalıdır. Site içerisinde kullanılan materyaller eğer bir başka yerden alıntı ise kesinlikle alınan yerden izin alınmalı yada materyalin serbest kullanılıp kullanılmayacağı araştırılmalıdır. Aksi halde telif yasalarına göre suçlu duruma düşebilirsiniz. DREAMWEAVER ILE ÇALIŞMAYA NASIL BAŞLANIR? Bilgisayarınızda tüm web içeriğinizi kaydedeceğiniz bir klasör açınız ve bu klasörün içinde kullanım amacına uygun alt klasörler oluşturunuz. . Ancak klasör ve dosya isimlerini verirken kesinlikle Türkçe karakterler kullanmayınız. Çünkü Türkçe karakterler web tarayıcılarının dosyanızı görmemesine neden olacaktır. Ziyaretçilerinizin "url" adresinizle görecekleri ilk sayfa yani ana sayfanızın ismi "index.html" olmalıdır. Ana sayfanızdan ulaşılabilecek diğer sayfalarınıza kısa ve anlaşılabilir isimler vermeniz, istediğinize ulaşırken size yardımcı olacaktır. DREAMWEAWER PROGRAMINI TANIYALIM 1. BELGE PENCERESİ Web sayfamızı oluşturacağımız alan. Yazılarımızı, grafiklerimizi, tablolarımızı, formlarımızı vb. bu alan üzerinde tasarlıyoruz istediğiniz pencerenin ismini tıklayarak ekrana çağırabilirsiniz. Menüdeki komutların başında check olan pencereleri F4 tuşuna basarak ekrandan gönderebilir, tekrar F4 tuşuna basarak ekrana getirebilirsiniz. 2. INSER PENCERESİ INSERT Penceresinde bir çok özellik mevcuttur. her bir sekmeyi tıklayarak çok farklı işlemler yapabiliriz. Common Sekmesi: Başka sayfalara link E-posta adresleri ile web üzerinden bağlantı kurmak, Tablolar oluşturmak, Katmanlar oluşturmak, Resim eklemek, Flash dosyaları eklemek, Değişen butonlar oluşturmak, Flah butonları oluşrma işlemleri Common sekmesinden yapılır. Layout Sekmesi: Tasrım modunda çizerek tablolar oluşturma işlemleri Layout Sekmesinden yapılır. Text Sekmesi: Bu bölümde Metinlerimizi şekillendirmek için kullanılır. Metni Koyu, italik, Değişik boyutlarda metin oluşturmak, sıralı listeler oluşturmak için kullanılır. Tables Sekmesi : Belge penceresinin code bölümünde tablolar ile ilgili kodları oluşturmak için kullanılır. Frame Sekmesi: Bir sayfanın içine birden çok sayfa gömme işlemi frame işlemi bu sekmeden yapılır. Forms Sekmesi : Web sayfalarınızda bilgi toplamak amacı ile oluşturacağınız formlar bu sekmeden yapılır. Templates Pencersi : Web sayfasındaki bütün sayfalarda aynı sayfayı kullanmak için şablon oluşturulur ve sayfalar bu dizayna göre yapılır. işte standart sayfalar oluşturmak için bu sekme kullanılır Media Sekmesi: Web sayfanızda Flas butonlar, java appletler ve eklentiler eklemek için bu sekme kullanılır. Head Sekmesi : Web sayfanızın arasında head takları mevcuttur. burada web sayfanızın arama motorlarında aranıp bulunması için anahtar kelimeler ve web sayfanızın adresi görünmesi için head takları arasına meta takları oluşturulur. 2. PROPERTIES PENCERESİ Bu pencere ile sayfanızı tasarlarken o anda üzerinde uğraştığınız herhangi bir nesnenin özelliklerini değiştirebilirsiniz. Bu pencereyi ekrana Windows menüsünden properties komutu veya klavyeden Ctrl+F3 kısa yolu ile çağırabilirsiniz. Araç pencerelerini ekrana getirmek için WINDOWS menüsünü kullanabilirsiniz. Tasarım aşamasında ekranda görmek Örneğin : Belge üzerine tabloyu işaretlediğimde tabloya uygulanacak bütün özellikler geldi. kaç sütun, kaç satır, yükseklik, genişlik, hücreler arası boşluk, arka plan rengi gibi tüm özellikler properties penceresine geldi. Buradan istediğiniz şekilde özelliklerini değiştirebilirsiniz. 4) SİTE PENCERESİ: Bu pencereden Dreamweawer da bir web projesi başlatmak, proje içindeki klasörleri oluşturmak, dosyaları oluşturmak ve resimleri projeye dahil etme işlemleri bu pencereden yapılır DREAMWEAWER İLE PROJE BAŞLATMAK Web sayfalarında bir bütünlük sağlamak için Dreamweawer programında projenizi oluşturmanız gerekir. Site penceresi ekranda yok ise Windows penceresinden site komutuna tıklayınız. Site penceresinden Site/ New Site seçiniz c) Gelen pencereden siteye bir ad veriniz d) next butonuna basınız ve bir sonraki pencereyide next tuşuna basarak geçiniz. e) Eğer web sayfasını bir Networks üzerinde veya direk serverda denemiyorsanız ilk seçeneği seçiniz next tuşuna basınız. Yukarıdaki pencerede de açılır kutudan none seçiniz. next tuşuna basınız yine gelen pencerede next tuşuna basarak Dreamweawer projesi oluşsun. DEAMWEAWERDA TÜRKÇE KAREKTER SORUNUNU ÇÖZMEK: Macromedia Dreamweawer Türkçe karakter setini desteklemiyor. Dolayısı ile sayfalarınızda yazmış olduğunuz ı, ç, ğ, ş, ö, ü gibi karakterler farklı karakterler olarak ekrana yansıyor. Bu nedenle bir kez Dreamweavera Türkçe karakter setini tanımlamanız gerekiyor. Dreamweawer programını açtıktan sonra 1. EDİT menüsünden Preferences komutunu çalıştırınız. Ekrana gelecek olan diyalog kutusu içerisinde sol taraftaki listeden Fonts / Other ve aşağıdaki resimdeki gibi ayarları yapınız. 2) Code bölümünden kod kısmına geçin. 3) <Head> </Head> tagları arasına şu kodları yazınız. <meta http-eguiv="Content-Type" content="text/html; charset=8859-9"> <meta http-eguiv="Content-Type" content="text/html; Windows-1254"> 4) Modify menüsünden Page properties seç gelen pencereden Other seç artık sayfamızda ve browserda Türkçe karakterler görünür. SAYFA AYARLARI : Tasarlayacağımız ilk sayfamız web sitemizin giriş sayfası olacak. Yani index.html. Öncelikle yukarıdaki bölümlerde anlatmış olduğumuz, site ayarları ve Türkçe karakter ayarlarını yapmış olmanız gerekiyor. Title: Sayfanızın başlığını buraya girebilirsiniz. Background image: :Browse... düğmesini tıklayarak. sayfanızın arka alanına resim koyabilirsiniz. Karşınıza gelen ekranda(Resim 2) resim dosyasının yolunu gösteriyorsunuz. Preview images seçeneğini aktif hale getirdiğinizde resim önizlemesini aktif hale getirip, resim dosyalarını işaretlediğinizde ekranın sağ tarafında küçük önizleme yapabilirsiniz. Site tanımlaması yaparken oluşturduğunuz Local Folder'un içinde resim isimli bir klasör oluşturup grafik dosyalarınızı buraya koyabilirsiniz. Bu yöntem dosyanın yolunu tanımlarken size kolaylık sağlayacaktır. Background: :Sayfanızın arka plan rengini, renk paletinden seçebilirsiniz. Text:Sayfanızdaki düz yazı rengi. Links:Sayfadaki yazılara eklenen link'lerin rengi. Visited Links:Sayfada ziyaret edilmiş link'lerin rengi. Active Links:Sayfadaki aktif link'lerin rengi. Bu renk ayarlarını yapmazsanız, Dreamweaver programı kendi default ayarları kabul edecektir. Default ayarlarda arka plan beyaz, metinler siyah, linkler mavi, ziyaret edilmiş renkler ise kırmızıdır. Aynı zamanda bu bölümde yapmış olduğunuz metin rengi ayarları sayfa genelinde yaptığınız ayarlardır. İsterseniz sayfanızın bir bölümünden, bölüm seçip, seçtiğiniz bölüm için ayrı metin ayarları yapabilirsiniz. Left Margin: Sayfanın sol marj ayarı Top margin: Sayfanızın üst marj ayarı Magrin Width: Genişlik marjin ayarı Magrin height : Yükseklik marjin ayarları Document encoding: Sayfanın dil ayarları Tracing İmage: Resmin kendi boyutunda arka plana resim eklmek image tranparency: Resimlerin görünürlük ayarını oluşturmak için kullanılır.

Üzerinde çalışacak olduğunuz şablon dosyasını Web tasarım edi törü ile açtıktan sonra standart sayfa tasarımınızı bu sayfaya ekleye bilirsiniz. Örneğin, sayfa özelliklerinden sayfanın arka plan rengini ve başlığını belirleyebilirsiniz. Bir şablonun içerisinde bu şablonu temel alarak üretilecek olan sayfalarda hangi alanların değiştirilebi leceğine, hangilerinin sabit kalacağına karar verebilirsiniz. Normal de, bir Macromedia Dreamweawer şablonunun içerisinde hiç bir alan değiştirilebilir durumda değildir. Ancak istediğiniz yerlere de ğiştirilebilecek alanlar ekleyebilirsiniz. Örneğin tüm sayfaların üst tarafında sabit bir logo görüntülenmesini, gerekli linklerin bulunmasını sağlayabilirsiniz. Sayfanızın diğer kısımlarında ise yazılar, tablolar, resimler ve yazılar değişebilir. Şimdi bu örnek tabloyu inceleyelim. 800 piksel genişliğinde olan bu tablonun üstte değişmeyecek resim ve solda yine değişmeyecek link sadece sağ taraftaki tablo değişecek. şekilde bir şablon hazırlayalım. Bu sayfada, sadece arada " Burası değişecek olan bölüm" ibaresi ile be lirlenmiş olan alanın değiştirilebilmesine izin vermek istiyoruz. Bu şablonu temel alan bir Web sayfası hazırlanırken sadece bu hücre nin içerisine bir şeyler yazılabilecek, sayfanın diğer öğeleri ise sabit kalacak. Şimdi siz de buna benzer bir şablon oluşturun ve imleci de ğiştirilmesini istediğiniz alana getirin. İmleci getirdikten sonra MODIFY menüsünden TEMPLATES NEW EDITABLE REGION... komutunu çalıştırın. Böylece Dreamweawer'a içeriği değiştirilebilir yeni bir alan tanım lamakta olduğumuzu bildiriyoruz. Bu komutu çalıştırdığınızda ek randa aşağıdaki gibi bir diyalog kutusu göreceksiniz. New Edıtable Regıon başlığını taşıyan bu diyalog kutusu içerisinde NAME bölümüne bu alanı tanımlayacak bir bilgi girin. "Burası değişecek alan" alanına "Değişek alan" gibi bir isim verebilirsiniz, ismi belirleyip OK düğmesi ne basınca diyalog kutusu kapatılacak ve ayarlamış olduğunuz alan içerisinde mesajınız kıvrık parantezler arasında görüntülenecektir. Örnek için aşağıdaki resme bakabilirsiniz. Bu bölümü belirledikten sonra buraya girilecek olan metinlerin fontunu, rengini ve boyutunu ayarlayın. Burada standart metin formatlama seçeneklerini özellikler diyalog kutusunu kullanarak uygulayabilirsiniz. Gerekli ayarları yaptıktan sonra FILE menüsün-den CLOSE komutunu çalıştırın. Ekrana gelecek olan ve size "dos yayı kaydetmek istiyor musunuz?" sorusunu soran diyalog kutusu na EVET cevabını verin. ŞABLON KULLANARAK SAYFA OLUŞTURMA Artık standart şablonunuz kullanıma hazırdır. Şimdi bu şablonu te mel alan bir web sayfası hazırlayalım. Önce site haritası görüntüsü nü açın , ağaç ya pısında yeni sayfayı oluşturmak istediğiniz klasörü seçili duruma getirin. Ekrandaki site haritası penceresinin FILE menüsünden New From Template komutunu çalıştırın. Bu komutu çalış tırdığınızda ekrana bir diyalog kutusu gelecek ve bu diyalog kutu su içerisinde Dreamweaver içerisinde tanımlı olan şablonların bir listesi görüntülenecektir. Burada oluşturmuş olduğu nuz şablonun adını seçili duruma getirin ve Create düğmesine basın. Bu düğmeye bastığınızda Dreamweawer Web tasa rım penceresinin içerisinde şablonunuzu temel almış boş bir Web sayfası açılacaktır. Bu Web sayfası içerisinde değiştirilmesine izin verilmeyen alanlar sarı renk ile işaretlenmiştir. Değiştirme imkanı verilmiş olan alanlar ise kıvrık parantezler arasında belirtilmiştir. Artık sayfanızda değişecek olan bölümde eklemelerinizi yaparak yeni dosyanızı kaydedebilirsiniz. Zaman zaman şablonları temel alarak ürettiğiniz Web sayfalarından bazılarım şablonun koymuş olduğu belli kuralları bozarak değişik bir şekilde düzenlemek istersiniz. Bu tür esneklikler değişik türde sayfalar kullanıldığında işe yarayacaktır. Şablona bağlanmış olan bir Web sayfasının bağlı olduğu şablonla ilgili bütün bağlarını kesmek ve onu istediğiniz gibi düzenlenebilir hale getirmek için belgenin üzerine çift tıklayın Dreamweawer Web editörü ile açın Belge açıldığında MODIFY menüsünden TEMPLATES Detach From Template komutunu çalıştırın. Bundan böyle bu belge üzerinde istediğiniz değişiklikleri yapabilecek, sayfanın görü nümünü istediğiniz gibi değiştirebileceksiniz. Eğer şablonuzda değişikler yapacaksanız diğer sayfalara link vermiş iseniz şablondaki sayfadan hangi sayfalarınız etkileniyorsa diğer sayfalarda otomatik olarak güncelleşecektir. MENÜ OLUŞTURMAK Dreamweawer ile bu tür link'ler içeren bir aktif menü oluşturmak için önce menüyü içerecek olan web sayfasını web say fası düzenleme penceresi içerisinde açın. Web sayfasını açtıktan sonra içerisin de menüyü yerleştireceğiniz alanı hazırlayın. Dört elemanı olan bu menüde iki adet sitenin içerisine, iki adet de sitenin dışarısına link bulunuyor. Şimdi sırada bu link'lere git memizi sağlayacak olan menüyü oluşturmak var. ilk iş olarak INSERT menüsünden FORM OBJECT JUMP MENU komutunu çalıştırın. Bu komutu çalıştırdığınızda ekranda aşağıdaki gibi bir di yalog kutusu ile karşılaşacaksınız. Bu diyalog kutusu içerisindeki seçenekleri kullanarak menü ele manlarını adım adım tanımlayabilirsiniz. Birinci eleman TEXT bö lümünde "unnamedl" olarak karşımızda duruyor. Bu bölüme gelin ve ilk elemanın adını yazın, Buraya yazdığınız metin menünün içerisinde görülecektir. Şimdi, menüde bu eleman seçildiğinde gidilecek olan Web sayfasını belirlemek için hemen alttaki WHEN SELECTED GOTO URL isimli metin kutusuna gelin. Burada, eğer Web sitesinin içerisindeki bir sayfaya link vermek istiyorsanız BROWSE düğmesine basıp ekrana gelecek olan diyalog kutusunu kullanarak gitmek istediğiniz web sayfasını belirleyebi1irsiniz. Bu ayarı yaptıktan sonra diyalog kutusunun sol üst tarafında, üzerinde + işareti olan düğmeye basın. Menü seçeneklerinin arası na boş bir seçenek daha eklenecektir. Yine bir önceki tekniği kulla narak bu menü elemanının da adım ve adresini belirleyebilirsiniz. Bu yöntemi kullanarak menü elemanlarını teker teker belirleyin. Yeni menü elemanı ekledikçe diğer elemanlar diyalog kutusunun üst tarafındaki listede isim -> adres şeklinde listelenecektir. Linkleri hazırladıktan sonra yukarıdaki listenin sağ üst tarafında ki yukarı ve aşağı okları kullanarak bir elemanın liste içerisindeki yerini değiştirebilir, yanlış girdiğiniz bir elemanı sol üst tarafta üze rinde - işareti olan düğmeye basarak silebilirsiniz. Normalde, bir internet kullanıcısı bu menüden bir elemanı seç tiğinde link'in işaret ettiği Web sayfasına otomatik olarak yönlendi rilecektir. Ama menünün yanında bir de GİT düğmesi görüntüle mek istiyorsanız, bu diyalog kutusu içerisindeki INSERT GO BUTTON AFTER MENU seçeneğini aktif hale getirin. Bunu ya pınca sağ tarafında üzerinde GO yazan bir düğme görüntülenecek tir. Bu düğmenin üzerinde yazan yazıyı da üzerine tıklayıp özellik ler diyalog kutusu içerisinden değiştirebilir "GİT", şeklinde koyabilirsiniz. SAYFALARINDA ETKİLEŞİMLİ DÜĞMELER Öncelikle düğme dediğimizde neyi ifade etmeye çalıştığımızı açıklayalım. Bir düğme aslında iki adet resimden oluşur, GIF veya JPEG formatında olabilir. Bu iki resimden birincisi web sayfası yüklendiğinde ekranda görünür, ikincisi ise HTML kodunda gizli olarak bekler. Sayfayı ziyaret etmekte olan Internet kullanıcısı fare imleci ile düğme olarak ayarlamış olduğunuz resmin üzerine gelin ce bu resim silinir, yerine arka planda beklemekte olan ikinci düğ me resmi görüntülenir. Örneğin orijinal düğme resmi mavi ise, fare imleci üzerine getirildiğinde aynı düğmenin kırmızı renkli bir versi yonu gösterilir. Böylece resmin bir orijinal hali olur, bir de fare imleci üzerine geldiğinde gösterilen hali. Renk ve şekil değiştirilen düğmeler ile kullanıcıları etkileyen çok hoş tasarımlı Web sayfaları hazırlamak mümkündür. Elbette, düğmelerin tasarımı ve şekli tamamen sizin resim çizme veya internetten resim seçebilme yeteneğinize bağlı. Bu arada, düğ meleri sadece link'ler olarak da düşünmelisiniz. Örneğin iki fotoğrafı bu şekilde ayarlayarak fare imleci üzerine geldiğinde deği şen fotoğraflar da elde edebilirsiniz. İşe başlamadan önce düğme olarak kullanacağınız resimleri hazır lamanız gerekli. Resimleri hazırladıktan sonra şimdi içinde düğme oluşturmak istedi ğiniz Web sayfasını açın. Resmin görün tülenmesini istediğiniz yere imleci getirin, imleci getirdikten sonra dosyayı kaydedin. Hemen arkasından INSERT menüsünden Interactive İmages / Rollover Image komutunu çalıştırın. Bu komutu çalıştırdığınızda ekranda aşağıdaki gibi bir diyalog kutusu ile karşılaşacaksınız. Bu diyalog kutusu içerisinde Image Name bölümünde düğ meye bir isim verin. Macromedia Dreamweaver default olarak bu raya bir isim verecektir. İsterseniz aynen bırakabilir, isterseniz de değiştire bilirsiniz. Bundan sonra Original Image, ekrana gelecek olan diyalog kutusunu kullanarak Web sayfası açıldığında ilk olarak gö rüntülenecek olan resmi seçin. Resmi seçtikten sonra Browse düğmesine basın ve tekrar bu diyalog kutusuna geri dönün. Resmin adresi metin kutusunun içerisine alınacaktır. Şimdi bir alt bölüme inin ve Rollover Image bölümüne gelip BROWSE düğmesine basın. Burada da resmin ikinci halini bulup Browse düğmesine basın. Düğmenin ikinci halini, yani fa re imleci üzerine geldiği sırada gösterilecek olan resim dosyasını da belirlemiş oldunuz. Resimleri belirledikten sonra diyalog kutusunun bir alt bölü mündeki Preload Rollover Image seçeneğinin aktif ol masına dikkat edin. Bu seçenek aktifken Web sayfası yüklendiğin de resmin ikinci hali de Web tarayıcısı tarafından yüklenir ve fare imleci üzerine geldiğinde bu resim anında gösterilir. Aksi takdirde fare imleci üzerine geldiğinde kullanıcı bu resmin yüklenmesini beklemek zorunda kalacaktır.

tşkler bayabi emek vermissin kardeş eline sağlık tşk

Resim.9. 32 Resimde öncelikle anchor link ismini veriyoruz ben disk ismini verdim. Artık sayfanın her hangi yerine veya başka bir web sayfasında vereceğimiz, ben sabitdisk.htm sayfasına ekledim anchor linkimi. Örneğin ben donanim.htm sayfamda seçtiğim bir resmin veya metinin properties kutusuna link bölümüne sabitdisk.htm#disk şeklinde link verdim Uzun bir sayfanız varsa, aynı sayfa içerisinde link verecekseniz, seçtiğiniz resim veya metinin properties ekranındaki link bölümüne vermiş olduğunuz anchor link ismini giriniz. Örneğin ben sabitdik sayfamda sayfanın sonlarına doğru bir yerde disk kelimesinin olduğu kelimeyi seçip properties kutusuna link bölümüne #disk şeklinde link verdim. Aklınızda olması gereken küçük bir not düşelim. Macromedia Drearmveaver'ın Türkçe işaretler ve boşluklar ile arası pek iyi değil. Bu yüzden bölüm başlıklarını işaretlerken ve isimleri verirken, Türkçe karakterler kullanmayın ve boşluk bırakmayın. Boşluk kul lanmak istediğinizde, altçizgi kullanabilirsiniz. 9.11.4.2. Diğer Sayfalara Link'ler Resmi veya metni seçili duruma getirdikten sonra Properties diyalog kutusuna bakın. Diyalog kutusu içerisinde LINK adında bir bö lüm göreceksiniz. Bu bölüme bu web sayfasına bağlanan bir inter net kullanıcısının, resim veya metnin üzerine tıkladığında gitmesini istediği web sayfasının adresini gösterin. Ok ile belirtilen gözat düğmesini tıklayın. Ekrana, aşağıda resmi görülen pencere gelecektir. Buradan daha önce hazırlayıp kaydetmiş olduğunuz web sayfanızın yolunu gösterin. Diğer Sitelere Link'ler Bir web sayfası içerisinde üzerine tıklayarak başka web sayfalarını ekrana getirecek linkler de oluşturabilirsiniz. Örneğin, bir yazının içerisinde "Milli Eğitim Bakanlığı " adı geçiyor diyelim. Bu yazıyı bir link haline getirip, sayfaya bağlanan internet kullanıcısının otomatik olarak bu link'in üzerine tıklayarak Milli Eğitim Bakanlığı web sitesine bağlanmasını sağlayabilirsiniz. Bunu yapmak için önce yazıyı hazırlayın, daha sonra link haline dönüştürmek istediğiniz metni seçili duruma getirin Adresi eksiksiz yazmayı ihmal etmeyin. Eğer bir web sitesine link veriyorsanız bu adresi www ile değil http://www ile başlatmanız gerekli. Aksi takdirde işler karışacaktır. Bir web sitesine link verdiğinizde eğer gidilen web sayfası sizin sitenizin içerisinden bir web sayfası değilse, bu durumda yeni açılan web sayfası internet kullanıcısının sizin web siteniz ile ilgili olan bütün bağlarım koparacaktır. Bu yüzden internet kullanıcılarını web sitenize bağlı tutabilmek için bu tür "site dışı" link'leri yeni açılan web tarayıcısı pencerelerine göndermekte yarar vardır. Böylece sizin web siteniz arka planda açık kalacak, yeni adres açılan yeni bir pencerenin içerisinde görüntülenecektir. Bu pencere kapatıldığında sizin web siteniz yine ekranda hazır durumda bekliyor olacaktır. Bir link'e tıklanıldığında link'in işaret ettiği web sayfasının yeni bir web gezgini penceresi içerisinde açılmasını sağlamak için link'i verdikten sonra özellikler diyalog kutusu içerisinde LINK bölümünün sağındaki TARGET adındaki aşağı doğru açılan liste kutusuna bakın. Buradaki menüden _BLANK seçeneğini aktif hale getirirseniz söz konusu link yeni bir pencerede açılacaktır. Örnek için yukarıdaki resme bakabilirsiniz. E-mail Adresine Link Vermek. Her web sayfası içinde bu sayfayı hazırlayan kişi veya kurumun bir e-mail adresinin görüntülenmesi iyi bir seçenektir. Böylece sayfayı izleyen internet kullanıcısı bir konuda bir sorusu, eleştiri veya yorumu olduğunda bunu kime yönelteceğini merak etmez, çünkü bu bilgi zaten sayfa içerisinde kendisine verilmiştir. Bir web sayfası içerisinde tek tıklama ile istediği niz adrese e-mail göndermesini sağlayacak bir link hazırlayabilirsi niz. Hem de son derece kolay bir şekilde. Önce sayfa içerisinde im leci e-mail adresinizin görüntülenmesini istediğiniz konuma getirin. Yazdığınız bir metni veya resmi seçili konuma getirin. Şimdi Dreamweaver'ın INSERT menüsünden E-Mail Link komutunu çalıştırın. Bu komutu çalıştırdığınızda ekrana aşağıdaki örnek resimdeki gibi bir diyalog kutusu gelecektir.(Resim.9.3Cool Bu diyalog kutusu içerisinde TEXT bölümüne link'in metnini, E-MAIL bölümüne de bu link'e tıklanıldığında e-mail mesajı atılacak olan e-mail adresini girin. OK düğmesine basın ve diyalog kutusunu kapatın. E-mail gönderme link'iniz sayfanın içerisine girilmiş olacaktır. Artık bu link'e tıklayan internet kullanıcısının e-mail programı otomatik olarak açılacak ve ayarlamış olduğunuz e-mail adresine mesaj göndermeye hazır bir şekilde bekleyecektir. İmage-Map Resimlerin üzerinde dolaşırken bazı linkler görürsünüz aynı resim üzerinde bi kaç tane link olur örneğin bunu dreamweaver'da image map komutuyla yapıyoruz. Öncelikle resmi INSERT >> images komutunu çalıştırıp resmimizin sayfaya yerleştiğini, sonrada selection menüde resim özelliklerinden image map özelliğinin de açıldığını göreceğiz. Aşağıdaki şekilde görelim. Şekildede görüldüğü gibi hangi image map şeklini kullanacaksak seçiyoruz ve resmin üzerindeki yeşil alan gibi tarıyoruz, ve link veriyoruz. Target vereceksek düzenliyoruz ve kaydettiğimiz zaman artık resmin üzerinde bi kaç tane link oluşturmuş oluyoruz. Web Sayfasında Tablolar Dreamweaverde' da web sayfası hazırlamanın en kolay yolu tablolar oluşturmaktır. Tablo genişliğini yüzde olarak verebilirsiniz. Böylece gelen ziyaretçinin ekranını sayfaya tam olarak kaplayacaktır. Ancak büyük ekranlarda yatayda bazı boşluklar olacağı için 800 piksel genişliğindeki bir ekranda çalışıyorsanız, yüzde seçeneğini kullanın. Şu an Türkiye'de sörf edenlerin %60'ı 800 600 ekran çözünürlüğünü kullanmaktadır. Yüzde 30'u ise 1024 768 ekran çözünürlüğünü tercih etmektedirler. Bu nedenle tablo oluştururken sayfanın genişliğini 800 piksel olarak belirlemeniz daha doğru olacaktır. Bir tabloyu oluşturduktan hemen sonra yükseklik değerini girin. Ardından her hücre için genişlik ve yükseklik değerlerini, yapacağınız ayarlamaya göre girmeyi unutmayın. Bu iki detay unutulduğu için, browser arayüzünde, hücrelere yerleştirilen elemanlar, dağılmış olarak görünmektedir. Tablo kullanımında bir diğer önemli husus, cell pading ve cell spacing değerlerinin 0 yapılmasıdır. Aksi takdirde, hücreler arasında beyaz boşluklar görünmektedir Browser yazılımları, bir web sayfasını, üstten alta doğru, tablolar ile yükler. Bu nedenle, sayfa tasarımınızı, yatayda tablolara bölün Eğer tüm sayfayı, tek tablo içinde tamamlarsanız, ziyaretçiniz tablonun altındaki son resim elemanın son pikseli yükleninceye kadar, hiç birşey göremeyecektir. Rows : Aşağı doğru ekleyeceğiniz tablo sayısı. Columns : Sağa doğru ekleyeceğiniz tablo sayısı. Width : Tablonuzun genişliği. Yanında pixels seçili bu pixel genişliğine göre genişlik ayarını yapmamız lazım yani 800 600 ekran çözünürlüğünde 750 seçmek mantıklı, percent seçerseniz, buda sayfanızın boyutunu % de ile belirlersiniz %100 yaparsanız 1024 768 çözünürlükte de tam ekran açılır. 800 600 ekran çözünürlüğünde de aynı açılır. Cell padding : Tablo içindeki alan boyutu. Cell Spacing : Tablo alanları arasındaki boşluk boyutu. Border : Tablo kenar genişliği. Bu özellikleri istediğiniz gibi ayarladıktan sonra OK düğmesine basın. Tablonuz web sayfasının içerisinde görüntülenecektir. Aşağıdaki örnek resimde 3x3 boyutlarında, 300 piksel genişliğinde, çerçeveleri olmayan bir tablo oluşturulmuştur. Tablonuzun içerisini böyle doldurduktan sonra, tablonun boyutunu, hücrelerin genişliğini ve bunun gibi özelliklerini istediğiniz gibi değiştirebilirsiniz. Hücre boyutlarını değiştirmek için farenizi kullanın ve hücrelerin çerçevelerine tıklayıp sürükleyip tablonun boyutunu ayarlayın. Hücre boyutlarını böylece ayarladıktan sonra hücrelerin ayarlayabileceğiniz diğer özelliklerine bir göz atalım. Öncelikle, tablo özelliklerini değiştirme işlemini sayfanın alt tarafındaki özellikleri diyalog kutusunu kullanarak yapacağınızı unutmayın. Tablonuzun özellikler diyalog kutusunu ekrana getirmek için hücre çerçevesine tıklayıp tabloyu seçili duruma getirmelisiniz. Bu işlemi yaptığınızda tablonun etrafında bir çerçeve görüntülenecek, özellikler diyalog kutusunda da tablo seçenekleri beliriverecektir. Bu diyalog kutusunun tüm seçeneklerini ekrana getirmek için sağ alt tarafındaki küçük üçgene tıklamalısınız. O zaman diyalog kutusu aşağıya doğru uzayacak ve tüm seçenekler ekrana çıkacaktır. Şimdi de bu seçeneklere bir göz atalım: ROWS :Tablonun satır sayısını buradan değiştirebilirsiniz COLS :Tablonun sütun sayısını buradan değiştirebilirsiniz W :Tablonun genişliğini yüzde veya piksel olarak buradan değiştirebilirsiniz H :Tablonun yüksekliğini yüzde veya piksel olarak buradan değiştirebilirsiniz. CELLPAD :Hücre içeriğinin çerçeveye olan uzaklığını piksel cinsinden ayarlayabilirsiniz CELLSPACE :Hücrelerin birbirine olan uzaklığını piksel cinsinden ayarlayabilirsiniz ALIGN :Tabloyu sağa, sola yaslayabilir veya ortalayabilirsiniz BORDER :Tablo çerçevesinin kalınlığını piksel cinsinden ayarlayabilirsiniz LIGHT BRDR :Tablo çerçevesinin birinci rengi DARK BRDR :Tablo çerçevesinin ikinci rengi BG :Tablonun arka planına bir resim döşemek istiyorsanız buradan seçebilirsiniz. BG :Tablonun genel arka plan rengini buradan belirleyebilirsiniz BRDR :Eğer tablo çerçevesi kullanıyorsanız tablonun çerçeve rengini buradan belirleyebilirsiniz Tablonun genel ayarlarını bu diyalog kutusundaki bu seçenekleri kullanarak yapabilirsiniz. Ancak, eğer hücreleri tek tek biçimlendirmek istediğinizde başka seçenekleriniz de var