Dreamweaver kullanımı

Web Tasarımı - Dreamweaver kullanımı ...

Cevapla
Dreamweaver kullanımı
Grafiker002 isimli Üye şimdilik offline konumundadır

Grafiker002

Forumdan Uzaklaştırıldı

Standart

Dreamweaver kullanımı

Alt 15-06-2007 #1
Sponsorlu Bağlantılar

MACROMEDİA DREAMWEAVER’I TANIMAYA HAZIR MIYIZ ?

Hazırsak, web sayfamızı tasarlayamaya başlıyoruz. Sizlere en başta programın araçlarını kullanmayı öğretmeyi istiyoruz. Programı kurup açtığınızda, sizden üç arayüz arasından bir seçim yapmanız isteniyor. Eski kullanıcılar düşünülerek Homesite stili veya DW 4 stili de bunlar arasına eklenmiş. Biz sizlere yeni stili kullanmanızı öneririz. Çünkü bu stil diğer Macromedia programlarında da korunmuş. Zaten MUI adı verilen "Macromedia Kullanıcı Arayüzü" sizi her programda aynı yüzle karşılıyor. Bir kere alıştınız mı, herşey kolay. İlk menü ile seçimimizi yaptıktan sonra arayüzü tanımaya başlayabiliriz.


ARAÇLARI TANIYARAK İŞLERİ KOLAYLAŞTIRMAK MÜMKÜN

Bu bölümde, belge ile ilgili işlemlerin yapılacağı ikonlar bulunuyor. Kodlamanın hangi arayüz kullanılarak yapılacağını seçeceğiniz 3 ikon yan yana duruyor. Sola ve sağa bakan açılı parantez, sizi kod görüntüsüne götürür. Bu görünümde kodlar renklendirildiği için, elle kod yazanlar açısından oldukça pozitif bir durum oluşuyor. Bu ikonun yanında hem kod hem de dizayn görünümü yer alıyor. Bu ikonun avantajı, dizayn görünümünde seçtiğiniz nesnenin kod görünümünde seçili hale gelmesi. Böylece kodda değiştirmek istediğiniz yeri bulmak için uzun uzun arama yapmaktan kurtuluyorsunuz. Üçüncü ikon olan dizayn görünümü ise tamamıyla görsel sayfa tasarımı yapmanızı sağlıyor.

Bu üçlü ikonun yanında "Live Data View" var. Veritabanı uygulamarın geliştiriken bu ikon yardımıyla dinamik datayı tarayıcı yardımı olmadan görebilirsiniz. Hemen sağında, belgenizin başlığını yazacağınız kutu bulunuyor. Bu kutudaki yazı, sayfanızı web tarayıcınızda izlerken sayfanın konusu ile ilgili bilgi vermek amacıyla kullanılabilir. "Falanca Kişinin Sayfasına Hoşgeldiniz" gibi yada "Konu İsmi" gibi... Kutuyu doldurmayı unutursanız, DW sizin yerinize belgeyi "İsimsiz Belge" başlığı ile kaydeder. Bu kutunun sağında belgenizin sunucu ile olan işlerini halledebilirsiniz. Mesela, belgeyi sunucuya göndermek yada belge üzerinde işlem yapan kişinin not bırakması gibi... Yandaki dünya resimli ikonu ise belgenizi önizlemek için kullanabilirsiniz. Son dört ikonun bulunduğu araçlar menüsünün ilki kod görüntüsünde yaptığınız işlemlerin sonucunu görmek için tazelemeye yarar. Ancak güncelleme için tek yol bu değil. Koddaki değişiklikten sonra dizayn görünümüne geçmek yada F5 tuşuna basmak da aynı sonucu verir. Hemen sağında açılı parantezlerin arasında soru işareti bulunan ikon yardımıyla DW’nin referansına erişebilirsiniz. Bu referansın da sizi eriştireceği yer, HTML, CFML, ASP, CSS, JSP, JavaScript, Sitespring gibi diller yada hizmetlerin sözdizimleri ve kurallarıdır. Ayrıca, kod görünümünde iken bir kelimenin üstünde durup bu ikona basarsanız, sizi bu kelimenin açıklandığı referansa görürür.Yani sizi aramak derdinden de kurtarır. Ancak bazen bir kelime farklı dillerde de kullanıldığından, istediğinizi aramak ve bulmak gene de size kalmıştır. Bu arada hemen belirtelim. Referansta PHP dili yer almıyor. Ancak bu referansıda listeye eklemek mümkün. DW’ ı eklentilerle zenginletirmek konusu, daha sonra detaylı olarak anlatılacak.

Referans ikonunun sağında yer alan ikon yardımıyla, kod görünümünde iken, belgede bulunan script’lere kolay erişim sağlayabilirsiniz. Belgenize yeni fonksiyonlar yazdıkça bunlar burada listelenir ve sizi bütün belgede arama yapmaktan kurtatır.Son ikonumuz ise bize ek seçenekler sunar. Tablo veya katmanların çizgilerini gösterip kaldırmayı buradan ayarlayabilirsiniz.Ayrıca belgenizi daha rahat oluşturmak için cetvel ve ızgara da eklemek isterseniz bu ikonu kullanın.

BELGE İŞLEMLERİNİ TAMAMLAMAKTA ZORLUK ÇEKMEYECEKSİNİZ

Bu bölüm DW ilk açıldırğında ekrana gelmeyebilir. Açmak için Araçlar menüsüne sağ tuşla tıklayın yada View menüsünden Toolbars’ın altından Standart seçeneğini işaretleyin. Bu bölümde yeni belge oluşturabilir, belgenizi kaydedebilir ve belgede bulunan nesneleri kesip kopyalayıp yapıştırabilirsiniz. Ayrıca işlemleri geri ve ileri almayı da bu panelden sağlayabilirsiniz. Zaten bu araçlar, ikonların şekilleri de dahil, diğer pek çok metin düzenleme programı ile benzerlik göstermektedir. Bir tek ikon yeni görünebilir. O da çift disket işaretli ikondur. Bu sayfanızda frameset yapısı varsa frameset de bulunan her frame’i kaydetmenizi sağlar.

ETKİLEYİCİ BİR WEB SAYFASI NESNESİZ OLMAZ

En çok kullanılan araçlar bu bölümde toplanmış olup, kategorilere göre gruplandırılmıştır. Mesela sayfaya basit özellikler eklemekten tutun da, form,tablo,görünüm işlemlerini yapacağınız birçok araç bu bölgede bulunur.Buradaki araçlar seçtiğiniz uygulama diline göre farklılık gösterir. Mesela HTML dilinde bir web sayfası geliştiriyorsanız, temel HTML etiketlerini oluşturacak araçlar var iken, seçtiğiniz dil ASP olduğunda veritabanı uygulamaları gerçekleştirebileceğiniz araçlar da eklenir. En genel araçları içeren Common menüsü basit bir web sitesini olşturmanıza yetecek kadar araç içerir. Sadece bu araçları kullanarak bile etkileyici sayfalar yaratmanız mümkün. İkonların ne işe yaradıklarını anlatmak bir hayli uzun süreceğinden, bunları bir uygulama geliştirerek anlatmak istiyoruz. Böylece ikonları uygulama geliştirirken öğrenmiş ve yazının sonunda size ait bir sayfa elde etmiş olacaksınız.

SAYFANIZA HERKESİ DAVET EDEBİLİRSİNİZ

İlk uygulamamız, kendinizi tanıtan bir sayfa oluşturmak. Böylece arkadaşlarınızı yada aileneze size ait bir sayfa ile hava atabileceksiniz. Belge işlemleri menüsünden beyaz sayfa ikonuna tıklayarak, yeni belgenizi açın. Basic Page kategorisinde HTML sayfa tipini seçin. Yazı dizimiz ilerledikçe farklı uygulamalar geliştireceğimizden farklı belge tiplerini kullanacağız.Şimdilik sadece HTML bize yeterli.

DW, yaptığınız sayfaları bir sitenin farklı ama kendi aralarında bağlantılı elemanları olarak düşünüldüğünden, sayfalarınızı bir site altında toplamanız sizin için daha iyi olur. Böylece sayfanızın diğer sayfalarla olan bağlantısında,hatalı bağlantılar ve yollar vermeniz engellenir. Hemen bir site yaratalım. Site menüsünden New Site seçeneğine basın. Site kurma paneli sizi karşılar. Basic sekmesini kullanarak sitenize isim verin. Sitem ismi ilerde hatırlamanız için faydalı olabilir. Bir sonraki adımda bir sunucu teknolojisi seçmeniz istenecek. Şimdilik bu seçeneği hayır diyerek atlayalım. Sitemizi uzak sunucuya gönderip göndermemek arasında bir seçim yapmamız gerekiyor bir sonraki adımda. Sayfalarımızı daha da ilerlettiğimiz zaman, uzak sunucu haberleşmesini de açıklayacağız. Bu aşamada site dosyalarınızın bilgisayarınızda nerede bulunacağını belirliyorsunuz. Bir dizin seçerek diğer adıma atlayın.Seçtiğiniz dizinin, sitenin kök dizini olduğunu unutmayın. Sitenizin bütün bağlantıları, bu dizine bağlı olarak verilir. Son adımda ise uzak sunucuya bağlanmak için bağlantı metodu ve ayarları girebilirsiniz. Şimdilik sadece kendi bilgisayar ortamınızda web sayfaları yapacağınız için, bu seçeneği None olarak ayarlayın. Açtığımız HTML belgesinin başlığını verip kaydedin. Artık boş olsa bile, bir sayfanız var. Hadi dolduralım.

YAZMAK İSTEDİKLERİNİZİ ÖNCEDEN TASARLAMANIZDA FAYDA VAR

İlk olarak belgemize kendimizi tanıtan birşeyler yazalım. Dizayn görünümünde solda yanıp sönen bir imleç olmalı.Adınızı yazmakla hemen başlayabilirsiniz. Yazı stilini değiştirip isminizi daha değişik bir görünümde görmek ister misiniz ? Hadi o zaman Özellik Paneli’ ne. İsminizi seçerek aşağıda yer alan Özellik Paneli’ nde A resmi görünen yerin sağındaki menüden kendinize bir font seçin.

Seçiminiz hemen bu font ile şekillenecektir. Adınızın daha büyük görünmesini de isteyebilirsiniz. Ne de olsa bu sayfa sizi anlatacak ve şu anda bu sayfayı sizin yapmanızdan daha önemli hiç bir şey yok. Gene Özellik Paneli ’nde Format menüsünden Heading1’i seçin. Daha sonra Size menüsünün yanında yer alan altındaki okla kare kutuya tıklayın ve renk skalasından bir seçim yapın. Biz mavi tonu tercih ettik.

Şimdi kendinizi anlatan birşeyler yazın. Mesela; "Bu benim ilk web sayfam. Sizleri selamlıyorum. Bu yazı dizisinin sonunda sizlere web sitemin bitmiş halini sunacağım. Beni tanımak için lütfen ilerleyin..."

Bu aşamada aslında yazacağınız kelimeler çok önemli değil. Menüleri kullanmayı öğrendikçe istediğiniz herşeyi yazmakta serbest olacaksınız. Az önce yazdığınız satırları seçerek, renk skalasını açtığınız kutuya gelin, ancak basmayın. Yanında boşluk göreceksiniz. Bu kutuya #123456 yazın. Buraya yazdığınız kod, seçtiğiniz metne uygulamak istediğiniz renk kodudur. Renk skalasında seçtiğiniz renkler web ortamında her ortamda görünebilecek renklerdir. Ancak özel renk kodlarını da denemekten çekinmeyin. Bu sefer Size menüsünden büyüklüğü 3 ’e ayarlayın. Yazdığınız yazının son cümlesini seçin ve link boşluğuna gelerek sonraki.htm yazın. İşte bir bağlantı oluşturdunuz. Bağlantı aslında olmayan bir sayfaya gidiyor. Merak etmeyin. Birazdan ikinci sayfanız olacak.

BİRBİRİ ARDINA GELEN SAYFALAR... İKİNCİ SAYFANIZ BİLE OLDU !

Yeni bir sayfa açın. Üstte yer alan Nesneler panelinden Common başlığı altından 4. ikonu (kutu resimli ikon) seçin. Tablo oluşturma menüsü karşınıza gelir. Rows yazan kutucuğa 1, Colums yazan kutucuğa 1, Cell Padding ve Cell Spacing yazan kutulara sırayla 10 ve 5 yazın. Width miktarını olduğu gibi bırakıp, Border değerini 1 verin.

Neler yaptık bir bakalım! Bir tablo oluşturduk. Bunun 1 satırı ve bu satıra ait 2 sütunumuz var. Bu sütunların birbirlerinden uzaklıkları 5 piksel, 10 değeri ise hücre içeriğinizin ne kadar içeride tutulacağını belirtiyor. Border ayarı ile tablomuzun kenarını göstermek istedik. Tablo kenarımızın rengini açık kırmızı yapalım. Nasıl mı? Özellik Paneli ’ne bakın. Brdr Color yazan bir kutu göreceksiniz. Az önce metin işleminde yaptığımız gibi, buradan renk seçeceksiniz. Ancak önce tablomuzu seçili hale getirmeliyiz ki seçimimiz uygulansın. Tabloyu edklediğiniz anda seçili halde ekrana gelir. Belki daha sonra başka işlemler yapmış olabilirsiniz. O yüzden tabloyu nasıl seçeceğinize bakalım.

Tablo hücrelerinden birinin içine gelin. Özellik ekranının üstünde kalan bir satırda

göreceksiniz. Table yazısına bakın. İşte tablonuz seçili halde.Belgede seçmekte zorlandığınız nesneleri bu satırı kullanarak seçebilirsiniz.

Tek metot bu değil tabii. Tablonuzun sağ veya alt kenarına geldiğinizde genişletmeye yarayan imleçler göreceksiniz. Bir kere basın ve bırakın. Tablonuz gene seçildi. Eğer, genişletme imleçlerini bastıktan sonra bırakmadan sürüklemeye devam ederseniz, tablo ve hücrelerin boylarını değiştirmiş olursunuz. Artık belgemizi kaydetmenin zamanı geldi. Belgeyi ilk sayfanız olduğu yere yani sitenizin kök (root) dizinine sonraki.htm olarak kaydedin. Hatırlarsanız ilk sayfanızdan bu sayfaya bağlantı vermiştik. Şimdi sayfamızı biraz renklendirelim

WEB SAYFANIZA RENK: AL BOYAYI ELİNE, ÇİZ BİR RESİM

Tablonuzun sol sütununun içinde bir yere basın. Gene Common başlığından üzerinde ağaç resmi olan ikona tıklayın. Resim ekleme iletişim kutusu açılır. Bilgisayarınızda dolaşarak hoşunuza giden bir resim seçin. Üzerinde birşeyler yazabileceğiniz bir resim arayın. Bir şiir, düşünce gibi... Çünkü bu resim sizi anlatacak. Resmin boyunu, üzerine tıkladığınızda önizlemesiyle birlikte iletişim panelinin sağında görebilirsiniz. 150x150 piksel civarında boyut tercih edin.
Seçtiğiniz resim muhtemelen sitenizin dizinlerinden başka bir yerde olacaktır. DW seçtiğiniz resmin belgenizi kaydedene kadar mutlak bir yolda olduğunu söyleyecektir. Yani bu, Belgelerim klasörünüzde bir dizine giden yol olabilir. Yaptığınız sayfaları kendi bilgisayarınızda izlerken sorun olmaz ancak uzak sunucuya yüklediğinizde (internette yayınladığınızda) ziyaretçileriniz bilgisayarınızdaki belgelerim klasöründen resmi aldığınız dizini aramaya çalışacaklardır. Bu da resmin yerinde hoş olmayan bir çarpı işareti demektir. O zaman resmi sitenizin kök dizinine taşıyıp seçmeniz daha garantili bir metottur. Peki her seferinde bir yerlerden resim bulup sitenize taşımak olmaz mı? DW bunu sizin için yapar. Seçtiğiniz resim sitenize ait değilse, size bunu taşıyıp taşımamak arasında bir seçim sunar. Sadece deneme amaçlı ise, bu seçeneğe hayır diyebilir veya seçtiğiniz resim hakkında kararınız kesinse evet diyerek resmi garantiye alabilirsiniz. Böylece DW, resmi sitenizin altında kaydetmek için site klasörünü açar ve sizden dosyaya isim vermenizi bekler. Siz de yeni bir isim verebilir ve dosyayı site dizini altında istediğiniz yere koyabilirsiniz.

Hayli zahmetli oldu, ancak artık bir resmimiz var. Resim eklendiği anda seçilidir, ancak başka zamanlarda seçmek için üzerine tıklamanız yeterli. Resme ait özellikler menüde görünür. Resmin boyu, yüksekliği, üzerine geldiğinizde çıkarak alternatif yazı. Resme bastığınızda gideceği link de gene resim özellik panelinde görünür. Burada vurgulamamız gereken bir nokta var. DW, de panellerin yeri aynıdır. Ancak seçtiğiniz nesneye göre bu panellerdeki ayarlar değişir. Böylece her seferinde tek bir yere bakacağınızı bildiğinizden, her nesne için ayrı menü aramak zorunda kalmazsınız. Resim hakkında söyleceğimiz son konu ise DW’ nin resim düzeltme yeteneğinin olmadığıdır., ancak bu açığını güzel bir şekilde kapatmış. Düzenlemek istediğiniz resim seçiliyken sağ tıklayarak Edit with Fireworks veya Edit with’ e tıklayark favori resim düzenleme programınızı açabilirsiniz. Resim düzenlenip kaydedildiğinde, DW resmi sizin için günceller. Genelde web için kullanılan resim formatları .gif veya .jpg olmaktadır. .bmp ve .png de kullanılmaktadır. Ancak en popüler olan ilk iki formattır. Bu yüzden, resim programlarınızda kullandığınız bütün formatları kullanarak çalışmalarınızı riske atmayın.

BİRAZ DAHA DÜZENİN KİMSEYE ZARARI YOKTUR

Resmi ortalasak daha iyi olacak. Resmin bulunduğu hücrenin içinde bir yere tıklayın. Özellikler panelinden Horz menüsünü açarak Center seçeneğini işaretleyin. Bu hücrede bulunan her nesneyi ortalar. Sağdaki hücreye geçin ve bir şiir yazmayı deneyin. Tamam tamam, sadece birşeyler karalasanız da olur. Sonra yazdığınız yazının ortasında bir yere imleci getirin ve özellik panelinde sağa hizalama tuşuna basın. Yazınız şimdi sağdan sola akmaktadır. Yeni kelimeler ekledikçe aynı düzenin korunduğunu göreceksiniz. Az önce resmi ortalamak için Özellik Paneli’ nde yatay hizalama için Ortala’ yı seçimiştik. Yazımızı sağa yaslamak için yatay hizalamayı sağ yapabilirdik bu hücrede. İki seçenek şu aşamada aynı kapıya çıkıyor. Ancak ayrı ayrı aynı işi yapmalarının farklı bir nedeni var. Bir düşünün: Hücrenizde bulunan şiirinizin kıtalarının biri sağda biri solda olsun isterseniz, ne olacak? Sadece sağda ya da solda olması hiç sorun olmaz, ancak biz biraz lükse kaçmak istiyoruz.
Hücrenin yatay hizalamasını sağa ayarlayın. Yazınızın içine gelerek hizalamayı sola yapın. Böylece hücredeki diğer elemanlar sağa yaslanmış dururken, yazını sola dayalı olacak. [ENTER] tuşuna basın. Bir kıta daha ekleyin. şiirinize. Az önce [Enter] tuşuna bastığınız için üstteki satırlardan miras kalan bir sola dayama mevcut. Bunu sola dayama tuşuna bir kere daha basarak kaldırabilirsiniz. Böylece yazınızın sola dayama özelliği kalkacak ve hücrenin sağa dayama özelliği aktif olacak. Hücrelerin kendi içlerindeki hizalamaları artık biliyorsunuz.
Peki ya tablomuzun tamamını da hizalayabilir miyiz? Tabii ki ! Tablomuzu nasıl seçeceğimizi hatırlıyoruz, değil mi? Kenarına gelin ve tıklayın. Sonra Özellik Paneli’ndeki Align menüsünden Right seçeneğini tercih edin. Tablonuzun tamamı artık sayfaya göre sağa yaslanmıştır. Her içeriği bir üstte yer alan yere göre hizalama esası olduğundan, tablomuzun içinde bulunan hücrelerdeki hizalamalar tabloya göre hizalanmıştır ancak şimdi hepsi beraber biraz daha sağa kaymış durumda olmalı.
Artık bu sayfa ile son bir işimiz daha kaldı. İlk sayfamızdan buraya bir bağlantı kurmuştuk. Bu sefer bu sayfadan ilk sayfaya bir geri dönüş bağlantısı yapacağız. Resmin bulunduğu hücrede resmin sağında hücrede boş bulunan bir yere basın. Sonra [Enter] tuşunu kullanın ve boşluk bırakın. geri dön yazın ve seçin. Sonra link kutusuna ilk sayfanızı kaydettiğiniz ismi girin. Mesela ilksayfa.htm adında kaydettiyseniz, sayfanızın ismi bu olmalıdır. (Başka bir yol ise link kutusunun yanındaki sarı renkte klasöre tıklamaktır. Bu yöntemlede hedef belirterek link oluşturabilirsiniz. Ancak bir kuralımız vardı hatıralayacaksanız. Hedef belirteceğiniz dosya sitenin kök dizininde ya da alt dizinlerde olmalıdır). Belgenizi kaydedin. Sitenizin bulunduğu klasöre gidin. Sayfanızı açın ve bağlantıya tıklayarak resmi yerleştirdiğiniz sayfaya gidin. Resmin altındaki bağlantıyı kullanarak tekrar geri gelin. Artık iki sayfadan oluşan bir siteniz var. Kendinizi kutlayabilirsiniz... Ayrıca bu dersle birlikte de sitemizin sloganı olan "ne yapabileceğini göster" ilkesine de uymuş bulunuyorsunuz.

DREAMWEAVER İLE WEB TASARIMI - BÖLÜM 2

* Site Özellikleri II (Sayfamızın Sunucuda Yayınlanması)
* Uygulama II (Metin Düzenleme - CSS, katmanlar, davranışlar)
* Script I (Kod Görünümünü Kullanma)

Yazı dizimizin ikinci bölümünde Dreamweaver’da biraz daha ilerleyeceğiz. Öyle ki DW’nin aynı zamanda bir FTP programı İçerdiğini göreceksiniz. Ayrıca şu aralar çok popüler olan CSS nasıl yazılır ve düzenlenir konusu da bu ay okuyacaklarınız arasında yer alıyor.

1. Bölümde sadece iki sayfadan oluşan bir site yapmıştık. Geçen sürede sizlere sunduğumuz araçlar ile sayfa sayınızı artırmış olmalısınız. Bunları yayınlamakla da oldukça sabırsızlandığınızı tahmin ediyoruz, internette sizlere ücretsiz alan sağlayan pek çok site var. Tabii bunların verdikleri imkanlar da birbirinden farklı. Sayfalarınızda dinamik özellikler kullandıysanız salt HTML desteği veren bir alan işinize yaramayacaktır. Sonraki sayfada sayfanızı hazırladığınız dilde ücretsiz hizmet veren sitelerin adresleri var. Geçen ay hazırladığımız sayfanın üzerine eklemeler yapacağımızdan bu listede daha çok HTML ağırlıklı adresler bulunuyor.

Sitemiz görücüye çıkıyor: FTP ile sunucuya upload
Site paneli ile geçen ay tanışmışımız. Şimdi yine bu paneli kullanarak uzak sunucudaki sitemize ulaşacağız ve geçen yazıda hazırladığımız siteyi oraya yükleyeceğiz. Tavsiyemiz www.netfirms.com adresine giderek kendinize bedava bir hesap açmanız. Bu isminiz.netfirms.com olacaktır muhtemelen. Böylece http://isminiz.netfirms.com adresine giden kullanıcılar sitenizi ziyaret edecektir. Paneli kullanarak sitenize bağlanma örneğini, adresi buradan almış olduğunuzu düşünerek veriyoruz.
Site menüsünde sitenizin isminin yazdığı tutamaca tıklayın ve aynı yere bir kere daha tıklayarak bırakın. Site ayarlarını yaptığınız ekran karşınıza gelir. Advanced sekmesine geçin. Remote Info kategorisinden Access tipini FTP olarak ayarlayın. Açılan kutulara sitenize ulaşmak için gerekli hesap bilgilerini yazacağız, İlk olarak FTP Host kutucuğuna gelerek isminiz.netfirms.com yazın. Host Directory için www/ yazın. Login ve password kutularına da sırasıyla isminiz ve şifrenizi yazın. Save yazan kutucuğa da tıklamayı unutmayın. Neler yaptık bir bakalım.
İlk olarak uzak sunucuda bulunan dosyalarımıza erişim için FTP kullanacağımızı belirttik. Sonra dosyalarımıza ev sahipliği yapan siteyi yazdık. Bu adreste bulunan www/ adlı evi bulduk. Bu ev bizim gibi diğer kullanıcıların da dosyalarını barındırdıkları genel bir yerdir. Kendi odamızın yolunu bulmak için adımızı ve şifremizi belirttik. Artık yükleme ve hazırız

CSS Nedir ?

CSS, web sayfalarına renk getiren basit kodlardır, desek yanlış olmaz. CSS kodlarını belgenizdeki çeşitli elemanlara bağladığınızda, HTML ile yapamayacağınız işleri başarabilirsiniz. Mesela bir metin editör ünde ki gibi yazılarınızı sağa ve sola eşit bir şekilde yaslayabilir ve paragraf girintisi verebilirsiniz. Resimlerinizi bir resim düzenleme programındaki gibi silikleştirebilir, altlarına gölge verebilirsiniz. Detayları önümüzdeki bölümlerde bulacaksınız.

Sitemizi Dreamweaver ile adım adım yüklüyoruz

Sitenizin ayarlarını yaptıktan sonra paneli kapatın. Site menüsünde iki kablo ucunun birbirine baktığı bir ikon var. Bu ikon ile sitenize bağlantı kuracaksınız. Hadi bağlanın. DW eğer ayarlarda ya da bağlantıda bir sorun varsa bunu size bildirir. Şu ana kadar anlattığımız ayarlar sizin hesabınızı aldığınız yerden farklı olabilir. Bunu sitenizin yardım sayfalarında bulabilirsiniz. Site menusunun sağında kalan, bir sayfanın ikiye ayrılmış olduğu izlenimini veren ikona tıklayın. Bu, çalışmalarınızın ve uzak sunucudaki dosyalarınızın göründüğü bir ekrana götürür sizi. Şu anda hala DW’de olmanıza rağmen FTP programı kullanıyormuşsunuz havası vardır.
Kendi tarafınızda (ki bu genelde sağ tarafta oluyor) geçen bölümde yaratmış olduğunuz onceki.htm ve sonraki.htm dosyaları olmalı. Ya da siz her ne isim verdiyseniz! Ayrıca bir kaç da resim... Sayfalarınızda kullandığınız resimler muhtemelen sayfalarla aynı düzeydedir. Ancak sayfa sayınız arttığında ne yapacaksınız? Birçok dosya arasında .htm olan dosyalan aramak zorunda kalabilirsiniz. İleride dinamik sayfalar hazırladığımızda işler daha da karışacak. Tavsiyemiz, sitenizde belli bölümler oluşturmanız. Mesela anasayfaya ait resimleri, resimler adlı bir klasör açarak barındırabilirsiniz. Bunu sitenizin sağ tarafında boş bir yerde farenizin sağ tuşuna tıklayarak ve "New Folder" diyerek yapabilirsiniz. Dizinin ismi resimler olsun. Sonra sitenize ait resimleri bu klasöre sürükleyerek bırakın. Bu işlemin aynısını zaten işletim sisteminiz de sunuyor. Ancak neden o kadar uzağa gidesiniz ki. Hem hatırlayın. Resminizin orada gözükmesi için ona bir yol verdiniz. Şimdi bunu işletim sisteminizi kullanarak yaparsanız sayfalarınız resimleri olması gereken yerde bulamayacaktır. Dahası bu sayfada yer alan birkaç resim olduğunda yollarını elle düzeltmek sizi fazla yormaz, ama her sayfa bu kadar iyimser olmayabilir. Bu yüzden site panelini kullanarak resimleri taşırsanız DW sizin için siteyi tarar ve sitede bulunan dosyaların taşıdığınız dosyalarla bağı olup olmadığına bakar. Eğer varsa size bunların bir listesini sunar ve bağları güncellemek için bir seçenek sunar. Bu durumda güncellemek, tam olarak istediğiniz şey.

Son kontroller de tamamsa sağ tarafta göndermek istediğiniz dosyalan sol tarafa sürükleyerek bırakmayı deneyin. Ya da araçlar panelinden yukarı bakan mavi oka basın. Dosyanız uzaktaki ev sahibine yola çıktı bile. Bir uyanda bulunmak gerekirse; sitemiz, diğer kullanıcılar ismini yazdığında görünebilir olması için index.htm biçiminde bir giriş sayfası olarak kaydedilmelidir. Esas sayfanız yani bizim örneğimizde onceki.htm artık index.htm olmalıydı. Resimlerin taşınmasında olduğu gibi isim değişikliği de DW tarafından takip edilir ve sonraki.htm sayfanızın güncellenmesi önerilir. onceki.htm olan dosya ismini index.htm olarak değiştirin ve güncellemeyi yapın. Seçtiğiniz sunucuya göre anasayfanızın ismi home veya main olabilir. Sitenizi tarayıcınızda test edin ve çalıştığından emin olun.

Biraz daha çalışalım: CSS stilleriyle sitelere makyaj:

Artık sitenizi sunucuya yükledikten sonra belgemizi daha güzel göstermek için çalışabiliriz. CSS’ten bahsediyoruz. Son dönemde oldukça popüler olan bu teknik sayesinde bir kelime işlem programında yaptığınız gibi metinlerinizi istediğiniz boyda göstermeniz mümkün.

Yani HTML’ in size sunduğu boy sınırlarından kurtuluyorsunuz. Ayrıca kullandığınız font ailesine göre yazınızı farklı kalınlıklarda göstermek, altından, ortasından çizgi geçirmek de mümkün. Formlarda kullandığınız butonlann kenarlarına kalınlık verebilir, zemin rengini değiştirebilir ve hatta üzerinde yazan yazıya bile biçim uygulayabilirsiniz. Resimler üzerinde ufak efektler uygulamanız bile mümkün.
Yeni bir sayfa oluşturun. Sayfanıza başlık verip kaydettikten sonra uzunca bir yazı bulup sayfanıza yapıştırın. Mümkünse iki paragraf şeklinde düzenleyin. Bu yazının bir başlığı olsun. Başlık kısmının ortasında bir yere imleci getirin. Sonra özellik panelinde A yazan ikona tıklayın. Şeklin ying-yang biçimi aldığım göreceksiniz. Yanındaki kutucuğu açarak "New CSS Style.." deyin. Gelen ekranda size yeni stil için ad sorulur. Dikkat ederseniz bu ismin başında bir nokta vardır. Siz de stilinize isim verirken nokta ile başlamalısınız. Bu CSS’in elemanlara uygulanacak stili bulması için gereklidir. Mesela biz bir başlık biçimlendireceğimiz için bu ad .baslık olabilir. Tip olarak birinci seçenek uygun. Ancak CSS’in uygulanacağı yer olarak sadece belgemizi istiyoruz. Bunun için "This Document Only" seçeneği aktif olsun.
Ok seçeneği ile diğer mönüye geçelim. Buradaki kategorileri keşfetmeyi sizlere bırakıyoruz. Şimdilik sadece yazı şekillendirme üzerinde duracağız. "Type" kategorisi altında font kutucuğundan istediğinizi seçin. "Size" menüsünden büyüklüğü 14 piksel olarak ayarlayın. Aslında punto olarak ayarlamanız da mümkün, ancak tarayıcı boyu değiştiğinde okuyucularınız metninizi esnemiş olarak görecektir. Piksel olarak ayarlamanız metninizin her çözünürlüğe adapte olmasını sağlar. Başlığımızın dikkat çekici olmasını isteriz. O zaman altını çizmek için "decoration" tipi olarak underline’ı işaretleyelim, Daha kalın göstermek için ise weight menüsünden 500 uygun olacaktır. Font tipine göre bu miktarı değiştirmek gerekebilir. Ok diyerek CSS ekranını kapatalım.

Kod yazmak istiyorum diyenler için küçük bir başlangıç:

Başlığa uyguladığımız stile benzer şekilde paragraflarımıza da stil uygulayalım. Paragrafın içinde bir yere gelerek yeni bir stil yaratın, ismi .para olsun. Sadece font tipi aynı kalsın. Büyüklüğü 12 piksele rengi ise mavi bir tona ayarlayın. "Block" kategorisinden text indent için 20 piksel yazın. Bu paragrafımızın 20 piksel içeriden başlayacağını belirtir. Paneli kapatın. Değişikliğin uygulandığını göreceksiniz. Ancak ikinci paragrafın da bu stilde olmasını isteyebilirsiniz. Bunun için birkaç yol var. Ancak biz sizlere kod görünümünü nasıl kullanacağınızı da anlatmak istiyoruz.
ikinci paragrafın basına gelerek hem kod hem dizayn görünümüne geçin.

ile başlayan bir kod parçası olmalı. Yanında ise tam olarak durduğunuz paragraftaki cümleler dizilidir. Dizayn görünümünde seçtiğiniz öğeler kod görüntüsünde seçili hale gelir. Biz önceki paragrafta uyguladığımız stili bu paragrafa da taşımak için

yazan yeri

olarak değiştireceğiz, diğer

için başka özellikler de ayarlanmışsa bunları değiştirmeyin. Sadece class="para" eklemiş olmanız gerekir. F5 tuşuna basarak kodda yapmış olduğunuz değişikliğin dizayn ekranında belirmesini sağlayın. Tam islediğiniz gibi bir önceki paragrafa benzer şekilde 20 piksel içeriden başlayan 12 piksel büyüklüğünde mavi bir paragrafınız daha oldu. Ying-yang kutucuğuna bakın. Kodda yaptığınız değişiklik rnenüde de belirir. Menüden yapabileceğiniz bir değişikliği elle yapmış olduk, ancak bu koda alışmanız için minik bir başlangıç oldu.

İşleri daha da kolaylaştırmak: Hazır stilleri kullanın

Şimdi şunu sorabilirsiniz kendi kendinize. DW benim için CSS yazabiliyor, ancak ben bunu şu ana kadar sadece bir tek sayfa için yaptım. Peki pek çok sayfam olduğunda her bir sayfadaki paragrafları aynı şekilde mi değiştirmek zorunda kalacağım? Tabii ki hayır. DW CSS panelini size sunduğunda, stili kullandığınız sayfaya eklemek istemiştiniz. Bir diğer seçenek bunu bir dosyadan almak olabilir. Sayfamıza yeni bir stil ekleyelim. Ancak bu sefer {New Style Sheet File} aktif olsun. DW size stillerin alınacağı CSS belgesinin sitenizde nereye kaydedeceğinizi sorar. Sitenizin ana dizini altında css adlı bir klasör oluşturup text.css olarak kaydedin. Stiliniz hakkındaki özelliklere de karar verdikten sonra paneli kapatın.
Seçtiğiniz stili istediğiniz yerlere uygulayın. Şu anda çalıştığınız sayfanın bir kopyasını çıkarın. Bu, stil kodlarını bir dosyadan almanın ne işe yaradığı hakkında bir fikir verecek. Kopya dosyanız kaynağı olan dosya ile aynı stilleri paylaşır. Ancak buradaki stillerin hepsi zaten css klasörü altında bulunan text.css ile ilişkilendirilmiştir. Şimdi kurnazca bir şekilde sadece text.css dosyasını değiştireceğiz. Tek yol olmamasına rağmen biz bu dosyayı uzaklara gitmeden, hala üzerinde çalıştığımız belge üzerinden değiştirmek istiyoruz. text.css dosyasına kaydettiğiniz stilin uygulandığı bir paragrafa gelin, Ying-yang panelini kullanarak "Edit CSS Style..." deyin. DW değiştirmek istediğiniz stilin nerede kaydedildiğini bilir ve siz değişikliği yaptığınızda text.css dosyasını da günceller. Kopya sayfanızı açlığınızda stildeki değişikliğin burada da güncel olduğunu fark edeceksiniz.
Stillerinizi dosyadan almanın avantajı hakkında düşünelim. Diyelim ki bir konu hakkında uzunca yazılar yazıyorsunuz. Yazının başlıkları, alt başlıkları ve paragrafları için özel stiller belirlediniz, ancak yazı tipi veya renginden memnun kalmadınız. Sadece test.css gibi bir dosyayı değiştirerek istediğiniz kadar sayfada güncelleme yapabilirsiniz.

Stil sayfalarını belgenize bağlamak çok kolay:

Bir yerlerden bir .css dosyası bulduğunuzu farz edelim. Sayfanızda henüz stille şekillenmemiş yazılar olsun. Bir nevî ters bir işlem yapmanız gerekecek. Yani stilleri belgede yaratıp bir dosyaya kaydetmek yerine henüz stil yaratılmamış bir sayfayı, stillerin dolu olduğu bir dosyaya bağlamak. Bu da oldukça kolay. Ying-yang menusu ile "Attach Style Sheet" diyerek hazır bir .css dosyasını belgenize bağlayabilir ve sonra sayfanız da stil eklemek istediğiniz yere gelerek uygun css stilini seçebilirsiniz.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Grafiker002 isimli Üye şimdilik offline konumundadır

Grafiker002

Forumdan Uzaklaştırıldı

Standart
Alt 15-06-2007 #2
                             Sponsorlu Bağlantılar
Katman katman üstüne: DW’da layer’larla çalışmak

Biraz da katmanlara bakalım. Katmanlar belgeniz üzerinde bulunan asetatlara benzer. Bir sandviçin dilimleri gibi üst üste yıkılabilirler. Birbirlerinin yanlarından taşabilirler. Hatta bu dilimleri sandviçin içinde sağa sola çekmek kadar kolay bir şekilde sağa sola kaydırabilirsiniz. Ağzımız fazla sulanmadan konuya girelim. Katmanların şeffaf tepsiler olduklarını hayal edin. İçine aldıkları nesneleri tutarlar. Bunlar, sayfanızda belirli yerlere yaslanmış duran öğelerden daha fazla özgürlük sunarlar, çünkü siz hu tepsiyi istediğiniz yere taşıyabilirsiniz. Bir katman eklemek için ağaç resmi bulunan ikonun solundaki ikona tıklayın. Belgeniz üzerinde katmanın başlamasını istediğiniz yere gelerek farenin tuşuna basın ve sürüklemeye başlayın. İstediğiniz ölçüye gelince bırakın. Artık boş bir katmanınız var. Katmanın içinde bir yere tıklayarak resim ekleyin. Şayet resminizin boyu katmandan fazla ise katman buna uyarak genişleyecektir. Katmanın içindeyken sol üst köşede dört yöne bakan oklar göreceksiniz.. Buna tıklayarak katmanı seçili hale getirelim. Özellik panelinde katman ismi olarak manzara yazın. Sayfanızdaki öğelere isim vermek her zaman aklınızda bulunsun. Bu sayede nesnelere isimleriyle ulaşmak daha rahat olur. Özellik panelinde katmanın görünürlüğünü vis panelinden hidden yapın. Böylece resim eklediğiniz katman gözden kaybolacaktır. Korkmayın, katman hala orada, ancak kendini gizledi. Belgede bir yere "manzaraya bakın" yazın. Sonra bu yazıyı seçin, Design panelinden Behaviours sekmesine gelin. Kapalıysa Window altından bulabilirsiniz. Yazı hala seçili iken artı tuşuna basarak Show-Hide Layers seçeneğine basın. Şaşılacak bir şekilde manzara adlı katmanınız listededir. Katmanın yeni durumu olarak show seçmelisiniz. Ok deyip kapatın. Artık panelde Events kısmında onMouseOver ve Actions kısmında az önce seçtiğiniz davranış olmalıdır. Böylece yazınızın üstüne geldiğinizde katman görünür duruma gelecek. Ancak yazının dışına çıktığınızda resim hala görünür durumda olacaktır. Şimdi yazının dışında bir yere gittiğinizde tekrar saklanmış olmasını isteyebilirsiniz. O zaman yazı seçili iken aynı davranışı tekrarlayın. Katmanın yeni durumu Hide olmalıdır. Eklediğiniz bu yeni davranış panelde en üste gelir, Bu eyleme tıklayarak Events sütununda yanında çıkan ok tuşu ile seçenekler arasından onMouseOut olanı işaretleyin. Eğer göremiyorsanız alt tarafta yer alan "Show livents For" size yardımcı olacaktır. Sayfanızı test ettiğinizde metnin üstüne gittiğinizde katman görünür olacak, ancak dışına çıktığınızda kaybolacaktır.

İşin özü koddur: Görsel araçlar yerine elle kod girmek

Şu ana kadar sayfalarınız için bir yer hariç, ki onu da bir başlangıç olması için yapmıştık, sadece görsel araçları kullandık. Ancak, her zaman elle kod yazmak isteyenler olabileceği gibi bazı durumlarda görsellik işinizi bir yere kadar rahatlatacağından siz de bu yola başvurmak isteyebilirsiniz.
Araçları kullanarak ne kadar kolay sayfalar oluşturacağınızı görmek sizi oldukça sevindirmiştir. Ancak gene de bir bütana basıldığında ekrana bir mesajın çıkması gibi daha zor isler için kod görüntüsüne gereksinim duyacaksınız. Gerçi bu gibi bazı işleri de davranışlar panelinden yapmanıza rağmen artık koda başlamanın zamanı geldi.
Herhangi bir yere "sizlere diyeceklerim var" yazın. Sonra kod görüntüsüne geçerek yazının bulunduğu yere gelin. Yazınız

tagleri arasında kalmış olmalıdır.

tagi içinde onClick="bildir()" yazın. Siz yazarken DW size yazacağınız kod için alternatifler sunar. Uygun olanı seçerek hepsini yazmadan kodunuza dahil edebilirsiniz. Eklediğimiz kod

arasında kalan yerde fareye basıldığında bildir fonksiyonunu çağırır. Henüz böyle bir fonksiyonumuz yok.
taginden önce bir satır boşluk bırakın. Sonra nesne panelinden "Script" başlığını seçin. Burada ilk ikon belirlediğiniz bölgeye bir script eklemenizi sağlar. Buna basın ve gelen ekranda ;
yazın. Bu kod az önce çağırdığınız fonksiyonu tanımlıyor. Yer olarak belgenizin başlığında bulunduğundan, istediğiniz zaman belgeniz içinden bu fonksiyonu çağırabilirsiniz. Script ekleme panelini kullanarak VBScript yazmanız da mümkün.
Oldukça yoğun bir yazı oldu. Ancak DW’nin işleri ne kadar kolaylaştırdığıyla ilgili birçok örnek gördük. Gelecek bölümde yazdığınız kodları tekrar kullanmak için Snippets kullanmayı, belgenize daha fazla davranış eklemek için Macromedia Exhange sitesini keşfetmeyi, sayfanızın çerçeveler içinden haberleşmesini ve ufaktan dinamik özellikler eklemeyi öğreneceksiniz.

» Bedava Hosting Hizmeti Veren Siteler

http://www.netfirms.com
http://www.7host.com
http://www.freewebsites
http://www.0catch.com
http://www.topcities.com
http://www.exeat.com
http://www.freecoolpages.com
http://www.xoasis.com

DREAMWEAVER İLE WEB TASARIMI

* Web Sayfanızda Çerçeveler

Dreamvveaver’ın bize sağladığı araçları kullanarak, tek sayfada birden fazla sayfa tanımlamamızı sağlayan çerçeve yapılarını göreceğiz. Defalarca kullanacağımız kodları Snippets yardımıyla yeniden çağırmanın yanı sıra yavaş yavaş dinamik sayfaların idaresine de başlayacağız.

Web sayfalarında çerçeve kullanmak aslında nazik bir konudur. Bu, temelde işletim sisteminizde kullandığınız dosya yapılarına benzer. Yani bir klasörün içinde yer alan diğer klasörler gibidirler. Her zeminde, daha alt zeminde yer alan klasörler olabilir, işte sayfalarınızda da klasörlere benzer şekilde çerçeveler kullanabilir ve bunları belli seviyelerde dizebilirsiniz. Yalnız işin nazik olan tarafı, çerçeveleriniz arasındaki iletişimi kurabilmektedir.

Web sayfamın hep bir çerçevesi olsun isterdim
Sayfanızda kullandığınız, tablolar, resimler, katmanlar ve diğer elemanlar, sayfanızın alt elemanlarıdır. Bu kural her sayfa için geçerlidir. Çerçeveler için de durum buna benzerdir. Her çerçeve bir sayfayı tutar ve sayfalar da kullandığınız elemanları. Çerçevecibaşı diyeceğimiz ana çerçeve ise bütün bu çerçeveleri tutar. Sayfanız açıldığında ana çerçeve görünür. Eğer bu çerçeve altında başka çerçeveler kullanmışsamz, bunlar da kendi içeriklerini tutacak şekilde belirir. Şu an için iç içe geçmiş içerikler kafanızı karıştırmış olabilir. Ancak uygulamamızı bitirdikten sonra durum netleşecektir.
Yeni bir belge oluşturalım. Kategorilerden "Framesets" aktif olsun. Sağındaki seçeneklerden "Fixed Left" olanı seçin. Böylece sol tarafı sabit olan bir ana çerçeve yaratmış oldunuz. Ana çerçeve ve içinde tuttuğu iki çerçeve ile birlikte üç sayfanız oldu. Ancak bunlar sanki tek sayfaymış gibi görünüyor. Üç sayfa olduğunu daha iyi anlamak için belgenizi kaydetmeyi deneyin. Bunun için normal kaydetme ikonu olan tek disket yerine iki disketin üst üste olduğu ikonu seçin ya da File menüsünden Save All deyin. DW ana, sol ve sağ çerçeveyi kaydetmenizi ister. DW’nin hangi çerçeveyi yani alt sayfayı kaydettiğini anlamak isterseniz, kayıt ismi girileceği sırada çerçevenin etrafında oluşan sicime benzeyen şekle dikkat etmeniz yeterli. Uygulamamıza geri dönelim.
Anaçerçeve için geçen ay yaptığımız uyarıyı hatırlatarak, index.htm ismini veriyoruz. Sağ tarafta kalan sayfaya anasayfa.htm ismini verin. Sol taraftakine ise menu.htm diyebilirsiniz, çünkü bu çerçeveye menülerimizi yerleştirmekle devam edeceğiz. Çerçeveler için verdiğiniz isimleri daha sonradan DW’nin program çubuğuna bakarak anlayabilirsiniz. Sağdaki çerçeveye geçince üstteki isim o sayfanın ismini alır. Şimdi sol tarafta alt alta gelecek şekilde Anasayfa ve Hobilerim yazalım. Bunlar yandaki çerçevede görünmesini istediğimiz sayfaların bağlantıları olacak. CSS kullanmanın tam zamanı.
Bu mesajdan alıntı yap
Grafiker002 isimli Üye şimdilik offline konumundadır

Grafiker002

Forumdan Uzaklaştırıldı

Standart
Alt 15-06-2007 #3
» Snippets Aracı

Daha önce ufak tefek pek çok kod kullandım, ancak bunları hatırlamak ve bulmak zor oluyor!"
internette sayfalarınızda kullanacağınız pek çok kodu bedava veren siteler var. Bunların çoğu Javascript üzerine hazırlanmıştır, ancak başka dillerle ilgili de hazır kodlar bulmanız mümkün. Bu kodları tekrar kullanmak için bilgisayarınızdaki dosyalara kaydedebilir yada sağda solda bulduğunuz kağıtlara yazabilirsiniz. Ancak hiçbiri DW’nin Snippets aracı kadar faydalı olamaz. Simdi son olarak kodları yazdığınız yerlere bakma zamanı geldi. Bundan sonrasını Snippets halledecek.

Oyunu kuralına göre oynayalım: CSS devreye giriyor
Geçen bölümde bahsettiğimiz CSS’i kullanarak üzerine geldiğimizde renk değiştiren metinler yapacağız. Hemen bir stil oluşturalım. Design menüsünden CSS Styles sökmesine geçin ve sol tarafında artı işareti olan mavi kağıtlı ikona basın. Gelen ekranda This Document Only seçili olsun. Burada kullanacağımız stili sayfamızın içinde tutabiliriz, çünkü sayfamızda pek fazla stil olmayacak, bu yüzden bir stil dosyasını dışarıdan yükletmek gereksiz olacaktır.
Use CSS Selector aktif olsun. Açılır menüden a:hover olanı seçelim. Color için üzerine geldiğinizde değişmesini istediğiniz rengi seçin. Text-decoration için underline aktif olsun. Bu işlemleri a:link, a:visited ve a:active için de yapalım. Yalnızca sonuncusu hariç; text-decoration, none olsun. Renk konusunu tercihinize bırakıyoruz. Böylece daha önce ziyaret edilmemiş bir link; üzerine gittiğinizde altı çizgili olacak ve rengi değişecek. Bu linke bastığmızdaysa aktif olacağından altı çizgili bir halde kalacak. Ancak diğerleri o anda aktif durumda olmadığından, kullanıcı altı çizgili olan linke ait sayfada olduğunu anlayacaktır.

Web sayfamız çerçevelerle giderek gelişiyor
Anasayfa metni için özellik panelini kullanarak anasayfa.htm linkini verin. Anasayfa linkinin gittiği sayfanın normal şartlarda sağ tarafta görünmesini isteriz. Bu durumda kodumuza derdimizi anlatacak bir şeyler eklememiz lazım. Bu vakte kadar verdiğimiz linklerde böyle bir durum yoktu. Her bağlantı tıklandığında, içeriğini linkin bulunduğu sayfada gösteriyordu. Ancak bu sefer durum farklı.
Window/Others/Frames diyerek sayfanızdaki çerçeve yapısını görebilirsiniz. Fark edeceğiniz gibi Frames paneli sayfa yapınızı yansıtacak şekilde düzenlenmiştir. Menünüzün bulunduğu sol taraf leftFrame isminde içeriğin akacağı yer ise mainFrame ismindedir. Menüden gelecek ziyaretçimiz içeriğini bize sunmak için bir adres aramaktadır. "Sola veya sağa dön" gibi bir tariften çok, gideceği yeri bilmesi yeterli olacaktır. Bu durumda Anasayfa metnine verdiğimiz linkin gideceği adres mainFrame olmalıdır. Bunu Özellik panelinden Target menusunu kullanarak yapabilirsiniz. Zaten DW çerçeve yapılı bir sayfada çalışırken sizin için çerçevelerin isimlerini burada yazar. Ancak çerçevenin tuttuğu sayfayı tek başına açarsanız bu listede sadece basit hedefleri görürsünüz.
Anasayfa metni artık anasayfa.htm sayfasına bir bağlantı sağlamakta ve bu sayfayı sağ tarafta göstermek istemektedir. Sayfanızda daha fazla sayıda çerçeve kullanmak isteyebilirsiniz. Bu durumda Araçlar panelinden Frames sekmesine gelerek yeni çerçeveler yaratabilirsiniz. Aynı şekilde her çerçevenin bir ismi olacağından hedef olarak içeriğin görünmesini istediğiniz çerçevenin ismini Target olarak seçmelisiniz.

Şimdi de ikinci link devrede: Hobilerim var benim
Artık ikinci linkimiz için çalışma zamanı geldi. Benzer şekilde Target olarak mainFrame seçmek üzere Hobilerim için hobiler.htm linkini verelim. Bir uyarı da bulunmak gerekirse; verdiğiniz Target isimleri büyük küçük harf duyarlıdır. Yani ana çerçevede yer alan alt çerçeveler ile ayrı ayrı çalışıyorsanız, dikkat etmeniz gereken nokta, Target ismini girerken çerçeve ismini tam olarak belirtildiği şekilde yazmanız gerektiğidir.
Anasayfa ve Hobilerim sayfalan için istediğiniz düzenlemeleri yapabilirsiniz. Ancak yaptığınız düzenlemeyi gösterecek olan ana çerçeveyi düzenlemeyi hala bitirmedik. Menünüzün bulunduğu sol çerçevenin boyunun fazla sağda olduğunu düşünelim. İçeriği gösterecek alam daraltmak istemeyiz değil mi? Hadi o zaman çerçevelerimizin boylarını ayarlayalım.
Çerçevelere şekil veriyoruz: Al rendeyi eline marangoz misali
Frames paneline gelin, iki çerçeveyi de tutan bir ana çerçeve temsili göreceksiniz. Buna tıklayın. Özellik paneli ana çerçevenizin özelliklerini gösterecek şekilde değişir. Buradan sol ve sağ çerçevenizin boylarını ayarlayabilirsiniz. İsterseniz çerçevelerinize kenar kalınlığı ve rengi verebilirsiniz. Benzer şekilde ana çerçevenizin tuttuğu alt çerçevelerin de kendi ayarları var. Frames panelinden ayarlamak istediğiniz çerçevenin ismine basın. Bu sefer Özellik panelinde yeni öğeler belirecektir. Mesela sayfanızın kaydırma çubuğunun olmasını veya sayfanın boyunun ayarlanabilir olmasını buradan işaretleyebilirsiniz.

Hazır kodlarla kolayca: Damlaya damlaya göl olur
Gerçek hayatta bu söz pek çoğumuza ilk başta bir şey ifade etmez. Ancak zamanla ufak birikimlerin büyüyerek en ihtiyaç duyduğumuz anda bizi ne kadar rahatlattığım hepimiz biliriz. Programı yapanların bu atasözünü nasıl söylediklerini bilmiyoruz, ancak düşündükleri tam olarak bu şekilde olmuş olmalı: Daha önce Javascript gibi sık kullanılan, ama her zaman sağda solda kalmaya mahkum olan kod parçaları artik gün yüzü görecek. Window/Snippets ile işe başlayabilirsiniz.
Yanında artılar olan pek çok klasör göreceksiniz. Bunlar DW’nin sizin için önceden hazırladığı kodlardır. Pek çoğu Javascript olmasına rağmen HTML, CFML, ASP, JSP kodlarını da ekleyebilirsiniz. Ama önce hazır kodları nasıl kullanacağımıza bakalım. Javascript klasörü altından area calculations alt klasörünü açın. Burada Area of Circle adında hazır bir kod bulunmakta. Üzerine bir kere bastığınızda önizleme penceresinde yerleştirilecek kodu görebilirsiniz.

Bana sayını ver sana alanını söyleyeyim
Örnek olarak çemberin alanını hesaplayan kodu kullanacağız. Çemberin alanı olmaz tabii ki. Ancak yeni bir Snippets yaratırken istediğiniz ismi verebilirsiniz. Bu isme bakan bir matematikçi yoksa yanınızda, çok da önemli değil! Bu kod Javascript ile yazıldığından script takıları arasında kalmalıdır. Bu yüzden takısından önceki bir satıra gelerek Araçlar panelinden Script sekmesine basın. Sol tarafta duran parşömen ikonu ile yeni bir script ekleyeceksiniz; ancak içeriği boş olacak, çünkü bunu birazdan Snippets halledecek.
Az önce eklediğiniz script takıları arasına gelerek, Snippets panelindeki Area of Circle ismine çift tıklayın. Kod parçası sayfanıza eklendi. Artık üzerinde biraz değişiklik yapmanın zamanı geldi. Bu kod parçası dairenin alanını hesaplıyor demiştik. Yani bizden istediği tek bilgi alanını hesaplayacağı dairenin yarıçapı. O zaman bu bilgiyi ona vermek için bir sayı üretmeli ve yollamalıyız. Bu sayede formların veriyi nasıl aldığım da görmüş olacağız.

Formlarımızı hazırlayalım: Formalite deyip geçmeyin
Form doldurmak, yani formaliteye uymak pek çoklarını sıkar, ancak amacına uygun bir form hem güzel bir geri bildirim sağlar hem dolduranı sıkmaz. Şu durumda belgemize iki tane metin alanı ve bir buton ekleyerek bunu sağlayabiliriz, ilk metin alanının soluna "Yarıçap", ikincisinin yanına ise "Alan" diyerek bu kutuların neyi temsil ettiğini anlatabilirsiniz. Tabii hesabı başlatmak için bir hesap makinesinin eşittir tuşu görevini yapacak olan "Hesapla" değerinde bir butonumuz olmalı.
Formdaki öğelerimizin görsellerini ayarladıktan sonra işin mutfak kısmına geçebiliriz. Buton tipi None olarak ayarlanmalı. Bunu buton özelliklerinden yapabilirsiniz. Diğer tipler olan Submit formdaki verileri başka bir sayfaya göndermeye; Reset ise formdaki verileri temizlemeye yarar. Bizim durumumuzda bunlara gerek yok. Yarıçap için eklediğiniz rnetin kutusuna tıklayın, isim olarak radius verin. Aynı şekilde alan değeri için eklediğiniz kutuya area diyerek devam edin. Son olarak formunuz için areas ismini verin.
Butona bastığımız anda bir şeylerin gerçekleşmesini istiyoruz değil mi? Fakat biz derdimizi anlatmazsak bizi kirmse anlamaz. Butona basarak kod görünümüne geçin ve butonun bulunduğu takı kapanmadan onClick="areaOf Circle(document. areas. radius. value)" yazın. Eklediğimiz kodun ne olduğuna bakalım.
Diyoruz ki: "Buton kardeş, dokümanı tara; areas diye bir form olacak. Oradaki radius alanını bul ve bunun değerini areaOfCircle fonksiyonuna gönder." Ne kadar çok iş istediğimizin önemi yok. Biz derdimizi tam anlatırsak; ne istersek yapacaktır.

Dreamvveaver’da dışarıdan veri almak

"Tablolarla uğraşmak güzel ancak verileri kopyalayıp yapıştırmak da zor geliyor... "
Diyorsanız DWnin size sunduğu bir araç ile bu dertten kurtulabilirsiniz. Insert/Table/Objects/Import Tabular Data seçeneği ile dışarıdan veri alacağınız ekranı açı n. Tablolara yerleştireceğiniz verileri Excel’de veya Word’de hazırlayabilirsiniz. Bunlar virgülle, boşlukla ya da sekmeyle ayrılmış dosya tipinde olmalıdır. Acılan panefde size uygun dosya tipini seçerek İse başlayabilirsiniz. Daha sonra dosyanızı bularak yerleştireceğiniz tablonun özelliklerini ayarlayabilirsiniz. Bu metot İle İstediğiniz kadar veriyi bir seferde kolayca sayfanıza eklemeniz mümkün. Ancak tablonuzun içeriğini tutan dosyanız değiştiğinde tekrar aynı işlemi yapmak zorundasınız. Böyle bir güncelleme ancak veritaba-nı kullanarak yapılabilir. Bu metodu gelecek bölümde göreceğiz.
Bu mesajdan alıntı yap
Grafiker002 isimli Üye şimdilik offline konumundadır

Grafiker002

Forumdan Uzaklaştırıldı

Standart
Alt 15-06-2007 #4
İletişimin altın kuralı: Tarafların birbirilerini anlamaları
Bildiğiniz üzere iletişimin altın kuralı anlaşmaktır. Biz derdimizi anlattık, ancak karşı tarafın donanımı bizi anlamaya yeterli olmazsa bütün çabamız boşa gider. Az önce anlaşma sanatının ilk etapını butonumuz ile tamamladık. Şimdi gönderdiğimiz rakamı alacak olan fonksiyona sıra geldi. Kod görünümüne geçerek fonksiyonumuzu bulalım. Burada Return ile başlayan bir satırımız olmalı. Bu satır radius ismiyle aldığı değeri bir takım matematik İşlemlerinden geçirdikten sonra fonksiyonun dışına göndermek için yazılmış, ancak gönderdiği değeri tutan bir değişken yok.
Değişkenimiz tabii ki dairenin alanı olmalı. Durun bir dakika. Zaten formdaki bir metin alanına radius ismini vermiştik. Ve bu değeri fonksiyona göndermiştik. O zaman area değeri olan diğer metin alanına burada hesapladığımız değeri yazmalıyız. Tabii bu işi fonksiyonumuz yapacak.
Böylece yarıçapı girdikten sonra Hesapla butonuma bastığınızda Alan için fonksiyonda hesaplanan değeri göreceksiniz. Return’ü silerek document.are-as.area.value = yazın. Böylece buton için yaptığınız işleme benzer bir şekilde, formunuzdaki area adlı metin alanının değerini burada hesaplanan sayı yapmış oluyorsunuz.

Kodları toparlayalım: Yeni bir Snippets yaratmak
Buraya kadar hazır bir kod parçasını eklemeyi öğrendik. Kenarda köşede duran kodiarımızı derleyip toplamanın zamanı geldi artık. Snippets panelinde üstünde artı olan mavi kağıt parçalı ikona tıklayın. Yeni bir Snippets yaratmanın ilk adımım tamamladınız. Kullanmak istediğiniz kod parçası, seçiminizin başına ve sonuna ayrı ayrı parçalar halinde ya da belgenizde belirttiğiniz yere eklenebilir. Bunu sırasıyla Wrap Selection ve Insert Code seçenekleri ile belirleyebilirsiniz. Kısa bir açıklama ve isim vererek daha sonra kodu hatırlamanız daha rahat olacaktır. Son olarak önizleme tipi olarak dizayn ve kod görünümünü seçebilirsiniz.
Pek çok kod yarattıktan sonra benzer işe yarayanları aynı çatı altında toplamak isteyebilirsiniz. Bunun için klasör resmi olan ikona basarak hepsini tutacak olan bir klasör yaratın. Buna bir isim verin ve altında yer almasını istediğiniz kodların isimlerinden tutup bu klasöre sürükleyin. Bir klasörü başka bir klasörün altına aynı şekilde sürükleyebilirsiniz. Koddan kurtulmanın en kolay yolu tabii ki çöp kutusunu kullanmak

Profesyonel web sayfaları: Dinamik olmak gerek
Dinamik olmak, kulağa her zaman hoş gelen bir ifadedir. Yeniliği temsil ettiği kadar yeniliğin hemen hayata geçirilmesini de anlatır. Şu ana kadar anlattığımız neredeyse bütün teknikler, statik öğelerin sayfaya yerleştirilmesiydi. Verilerin değiştiği anda sayfamızda güncellenmesi için de DW’nin sunduğu araçları kullanabiliriz. Oldukça uzun bir konu olmasından dolayı detayları gelecek sayıya bırakıyoruz. Yalnız bu süre içinde kullanmak istediğiniz dilin kurulumunu yapmayı unutmayın. Her dilin kendi kurulum ve dosya ayarları olduğundan, bu konulara yer sıkıntısından dolayı değinmeyeceğiz. Bu sayıda dinamik özellikler için kullanacağınız farklı tipteki dillerin DW için genel ayarlarından bahsedeceğiz.
Yeni bir doküman yaratmakla işe başlayalım. Kategori Dynamic Page olsun, istediğiniz dinamik sayfa tipini bulun ve açın. Seçtiğiniz tipe göre Araçlar menusu bu tipin özelliklerini ekleyecek ikonlarla zenginleşir. Bir sonraki ay bu ikonlar ile neler yapacağınızı açıklayacağız, ama şimdi hazırlığımızı yapalım. İlk yazımızda Site panelini kullanarak dosyalarımızın nerede duracağını belirtmiştik. Bu bilgiler Local Info altındaydı. Geçen bölümde sitemizi uzak sunucuya göndermek için yapılan ayarlardan bahsetmiştik. Bunlar da Remote Info altındaydı. Son olarak Testing Server ayarlarını da yaparak kendi bilgisayarımızı uzak sunucuymuş gibi göstereceğiz.

Bilgisayarımda sunucu var: Testing Server ayarları
Önce Advanced sekmesine geçin. Seçtiğiniz dinamik sayfa tipine göre bir Server Model seçmelisiniz. Bu kullandığınız kodların sunucu tarafından doğru yorumlanması için birebir örtüşmelidir. Yani elma armut hesabı gibi. Diyelim ki ASP VBScript seçtiniz. Erişim tipi için Access menüsünden Local/Network olanı seçin. Bizim örneğimizde yani ASP tipinde dosyalarımızın durması gereken yer c:Tnetpubwwwroot altında seçtiğimiz bir klasördür. Bu yol sizde farklı olabilir, ancak prensip wwwroot altında bulunan bir klasöre dosyaların gönderilmesi ve test edilmesidir. Test işlemi için alt tarafta web tarayıcısında görünmesi gereken yol verilir. Mesela http://localhost/benimsitem/ ile c:Inetpubwwwroot altında benimsitem adında bir klasörünüzün bulunduğu anlatılır.
Anlattıklarımız, seçtiğiniz dile özgü ayarlar için uygun olmayabilir ya da dosyalarınızı koyduğunuz klasörler olması gereken yerlerde değildir. Bu riski engellemek ve site ayarlarınızın uygun olduğunu anlamak için Basic sekmesine geçin ve ayar ekranlarında alt tarafta çıkan test butonlarına basın. Zaten eğer bir hata varsa DW sizi uyarır. Gelecek bölümde bu konu üzerinde daha fazla durup örneklerle pekiştireceğimizden şimdi bir başka konu olan DW’nin zenginleştirilmesi konusuna geçelim.

Değişim başlıyor: Dreamweaver için eklentiler
Exchange yani değişim, yeniliklere açık olmak DW’nin sizlere sunduğu bir nimet. Zaten Snippet gibi bir araç varken bile kodları kolayca yerleştirip, işlere kalan yerden devam etmek bir kolaylıkken Macromedia Exchange size bu değişiklikleri sonuçlarıyla beraber görmenizi sağlıyor, www.macromedia.com/exchange adresine giderek Dreamweaver linkine tıklayın. Daha önce üye olmadıysanız kaydınızı yaptırın ve yüzlerce eklentiye sahip olma hakkını kazanın. Hatta bu eklentiler arasında sizinkilerin de yer almasını sağlayabilirsiniz.

Ancak bizim konumuz şu anda bunları nasıl kullanacağımız ile ilgili.
Drearnweaver’ın kurulumu sırasında Macromedia Extension Manager da yüklenir. Bu ufak program, Exchange sitesinden bulduğunuz eklentileri DW’nin panellerine ekler. Hemen bir tane eklenti bulup kullanalım. Exchange sitesindeki arama kutusuna chromeless yazın. Arama sonucu olarak 2 tane eklenti çıkacak. Bizim için ChromelessWin olanı önemli. Linkine tıklayarak açıklamasını okuduğumuz eklentiyi Mac veya Windows ortamı için ayrı ayrı yükleyebiliriz. Tavsiye olarak eklentiyi Dreamweaver’ın bulunduğu klasörde Downloaded Extensions altına koymanız. Böylece ilerde bunları taşımak isterseniz aramak derdinden kurtulursunuz. Eklentiyi bilgisayarınıza aldıktan sonra açın. MM Ext. Man. gelir. Eklentiyi kurduktan sonra nasıl kullanacağınız ile ilgili açıklamayı da kurulum ekranında görebilirsiniz. Bazı eklentiler yüklendikten sonra DW’yi kapatıp açmanız gerektiğini söyleyebilir.
Yeni bir belge yaratın. Kısa bir kelime yazın. Bu linkiniz olacak. Bağlantı adresi için # kullanın. Böylece linkiniz olduğu yerde kalacak, ama bu durum birazdan değişecek! Kelimenizi seçin ve Behaviours(Davranışlar) menüsüne gelerek artı tuşuna basın. Open Chromeless Window ile ayarları yapacağınız ekranı çağırın. Sırasıyla göstermek istediğiniz sayfayı, pencerenin başlığını ve ismini, son olarak genişlik ve yüksekliğini vermelisiniz. Açılacak pencerenin ortalanmasını isteyebilir ya da ekranın istediğiniz bir yerinde açılmasını sağlayabilirsiniz. Pencerenin durağan haldeki renklerinin yanı sıra sürüklenirken alacağı renkleri de gene buradan ayarlayabilirsiniz. Son olarak başlık için yazdığınız yazının hangi font, büyüklük ve renkte olacağım ayarlayarak buradaki işimizi bitiriyoruz. Açılacak olan yeni pencere için olayı tetikleyen pek çok nesne olabilir. Mesela sayfanıza girer girmez bu pencereyi açtırabilir ya da birinin bir resme tıklamasını isteyebilirsiniz. Bu gibi ayarları, Behaviours panelinde seçtiğiniz davranış için Event tipini belirterek yapabilirsiniz.
Macromedia sitesinde işinize yarayacak daha pek çok eklenti var. Bunlarla oynamak gerçekten hoş ve bazı eklentiler sayesinde Flash bilmenize gerek kalmadan sayfada sürüklenen ve açılıp kapanan resimler gibi etkileyici efektleri bir kaç tıklamayla oluşturabiliyorsunuz.



Kaynak:sanal kurs
Bu mesajdan alıntı yap
grkn_b isimli Üye şimdilik offline konumundadır

grkn_b

Grafiker / İstanbul

Standart
Alt 20-11-2007 #5
allah razı olsun Dreamweaver kullanımı
Bu mesajdan alıntı yap
KamiLOwen isimli Üye şimdilik offline konumundadır

KamiLOwen

Hosting Yetkilisi

Hiç Biri / İstanbul

Standart
Alt 28-11-2007 #6
Makale için teşekkürler, ancak yeni başlayan arkadaşlara görüntülü videolu derslerle çalışmalarını tavsiye ediyorum genede.

PGH

Bu mesajdan alıntı yap
lord_lion isimli Üye şimdilik offline konumundadır

lord_lion

Bilg. Teknikeri / Konya

Standart
Alt 05-12-2007 #7
Teşekkürler yeni başlayan arkadaşlar muhtemelen biraz karıştırabilirler.Ancak html dilini öğrendiklerinde burdaki dreamvewer özelliklerinin çoğunun farkına varacaklardır.
Bu mesajdan alıntı yap
ozy isimli Üye şimdilik offline konumundadır

ozy

Grafiker / Rize

Standart
Alt 14-12-2007 #8
bana acil dreamweaver programı lazım indirebileceğim link varsa verirmisiniz.Acil site yapmam lazım.
Bu mesajdan alıntı yap
Bahtınur YILDIZ isimli Üye şimdilik offline konumundadır

Bahtınur YILDIZ(33)

Grafiker / Tekirdağ

Standart
Alt 15-12-2007 #9
bana acil dreamweaver programı lazım indirebileceğim link varsa verirmisiniz.Acil site yapmam lazım.
[COLOR="Red"]bu sitede bu tarz istekler yasaktır arkadaşlar forum kurallarını okuyunuz.[/COLOR]
Bu mesajdan alıntı yap
dirayet isimli Üye şimdilik offline konumundadır

dirayet

Hiç Biri / Bursa

Standart
Alt 16-12-2007 #10
bizimle paylaştığınız için teşekkürler.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Cevapla

Tags
dreamweaver, dreamweaver kullanimi macromedia, macromedia dreamweaver, muı girintisi

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
DREAMWEAVER öğrenmek istiyorum blueblackstar Dreamweaver 32 18-12-2015 12:38:24
Dreamweaver Dersleri K.Çakır Dreamweaver 30 11-04-2010 21:25:07
Dreamweaver CS3 ozan-tr Web Tasarımı 10 02-06-2008 22:35:55

Kapat
Şifremi Unuttum?