Dreamweaver kullanımı

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 https://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.