Web Tasarım Çalışması

BÖLÜM-9:WEB TASARIMI
9.1.Macromedia DREAMWEAVER-4
Programlama dillerinde oldugu gibi HTML için de, Visual (görsel) programlama özelligi tasiyan ve
hazir nesneler kullanan editör programlari gelistirilmistir. Bu programlar kullanilarak HTML dili daha basite indirgenmis, sayfalar dolusu program kodu yazmak yerine hazir nesneler, görsel olarak kullanilmistir. Dreamweaver’da bu programlarin en iyileri arasinda yer almaktadir. Bu programla büyük, karmasik ve etkilesimli web sayfalari hazirlamak mümkün. Dreamweaver web tasarimcilari için hazirlanmis olan profesyonel bir web tasarim paketidir. Basit bir doküman dosyasi hazirlar gibi web sitenizi hazirlayabilirsiniz. Dreamweaver, site tasarimini sadece kendi özellikleri ile sinirlamaz. diger programlarla kurdugu iliskiler ile çagirip çalistirmanizi saglar ve olusturdugunuz objeleri destekler. Olusturacaginiz web sayfalarinin yayina hazirlanmasini artirir ve site yönetimini en iyi düzeyde gelistirir. Dreamweaver ile web sayfalarini olustururken sayfa yerlesimini hem görsel olarak düzenleme imkani bulabilir hem de sayfayi temsil eden HTML kodlarini arka plânda takip edebilirsiniz. Sayfa içerisinde degisiklik saglamak için ayrica hizli HTML editörü bulunmaktadir. Bu küçük editör ile birlikte bir çok HTML komutu otomatik olarak sunulmaktadir. Hizli bir sekilde web dizayninin saglanmasi için gelistirilmis bir diger özellik ise HTML stilleridir. Stilleri kullanarak site içerisinde yazi tipi, yazi özellikleri, zemin renkleri veya resimlerinin tanimini, bloklama ve yerlesim islemlerini, çerçeveleme gibi bir çok islemi ayni anda tanimlayip bütün siteye uygulayabilirsiniz. Olusturdugunuz stil tanimini saklayarak bütün siteye uygulama sansina sahip olacaksiniz. Böylece siteyi olusturan bütün sayfalar için ayri ayri tanimlar yapmaktan kurtulacak, kendinize özgü tasarim sablonlari olusturabileceksiniz. Site içerisine eklediginiz görsel nesnelerin arka planda nasil bir HTML kodu olusturdugunu takip edebilirsiniz. Dreamweaver HTML kodlarini satir numarasi vererek takip etme imkani da saglayacaktir. Bu sekilde numaralara göre sayfa içerisindeki kodlari takip edebilirsiniz. Ayrica yerlesim ekraninda seçtiginiz bir nesnenin kodlarinin, HTML kaynak kodlari içerisinde de seçili oldugunu görebilirsiniz. Bu özellik yardimi ile nesneye ait kodlari isaretlemis olabilirsiniz. Olusturulan her sayfa, diger sayfalardan bagimsiz olarak tasarlanir. Sayfalarin birbirlerine baglanmasi ile site olusur. Dreamweaver sadece sayfalarin olusturulmasi ve yönetimi için degil, siteyi olusturan bütün sayfalari kontrol eder ve yönetimini saglar. Site içerisinde bulunan sayfalari kontrol eder ve sayfalar içerisinde tanimlanan kirik baglantilari tespit eder. Ayrica kullanilmayan herhangi bir dosyayi sitenin boyutunu büyütmemesi için silinmesini saglar. Olusturacaginiz sitenin, yerel disk alaninda saklanacagi konumu belirleyebilirsiniz. Ayrica site içerisine eklediginiz yada siteden sildiginiz dosyalara göre, siteye ait dosya listesini otomatik olarak güncellestirebilirsiniz. Dreamweaver siteyi temsil eden dosyalari sadece disk alaninda saklamakla yetinmez, web ortaminda herhangi bir FTP(File Transfer Protocol) adresinede yönlendirebilir. Bu sekilde sitenin internet ortaminda yayinlanmasini saglayabilirsiniz. Ayrica yayinladiginiz dosyalarin kontrolünü de saglamaniz mümkündür. Yani, daha önce yayinladiginiz dosyalarin boyutlari kontrol edilecek, sadece içerigi degisen dosyalar ve yeni dosyalarin yayinlanmasi saglanacaktir. Bu özellik kullanilarak sürekli güncellenen sitelerin yayinlanmasi hizlandirilabilir.

Web sitesinin tasarimina baslamadan önce site içerisinde kullanacaginiz dokümanlari olusturmaniz gerekiyor. Web sayfalari içerisinde kullanacaginiz ses, resim, film ve metin dosyalarini önceden hazirlamaniz, hatta hangi dosyayi hangi sayfada kullanacaginizi kagit üzerinde tasarlamaniz, sitenin olusturulmasi esnasinda size isik tutacaktir.

Ziyaretçi kitlesini ve bu kitleye yapacaginiz hitap metinlerini de uygun bir sekilde hazirlamaniz, sitenin ziyaretçi oranini arttiracaktir.
Web için kullanilan materyallerden site içerisine yazilan dil ve üsluba kadar herseyden site tasarimcisi

sorumlu olacaktir. Bu yüzden site olusturulurken toplumun sosyal ve kültürel özellikleri göz önünde tutulmali, hiçbir zaman hukuk ve demokrasi ile çakisan ifadeler kullanilmamalidir. Site içerisinde kullanilan materyaller eger bir baska yerden alinti ise kesinlikle alinan yerden izin alinmali yada materyalin serbest kullanilip kullanilmayacagi arastirilmalidir. Aksi halde telif yasalarina göre suçlu duruma düsebilirsiniz.

Bilgisayarinizda tüm web içeriginizi kaydedeceginiz bir klasör açiniz ve bu klasörün içinde kullanim amacina uygun alt klasörler olusturunuz. (Resimleriniz için "resim" klasörü, grafik çalismalariniz için "grafik" klasörü gibi). Ancak klasör ve dosya isimlerini verirken kesinlikle Türkçe karakterler (i, ç, g, s, ö, ü) kullanmayiniz. Çünkü Türkçe karakterler web tarayicilarinin dosyanizi görmemesine neden olacaktir. Ziyaretçilerinizin "url" adresinizle görecekleri ilk sayfa yani ana sayfanizin ismi "index.html" olmalidir. Ana sayfanizdan ulasilabilecek diger sayfalariniza kisa ve anlasilabilir isimler vermeniz, istediginize ulasirken size yardimci olacaktir.

Dreamweaver programini ilk çalistirdiginizda asagidaki görüntü ile karsilasacaksiniz. Ilk bakista biraz karisik gelen görüntü sizi tedirgin etmesin. Çünkü programi kullanmaya basladikça program arayüzünün size birçok kolaylik sagladigini fark edeceksiniz.

Resim.9. 1
1.Belge Penceresi
Web sayfamizi olustaracagimiz alan. Yazilarimizi, grafiklerimizi,
tablolarimizi, formlarimizi vb. bu alan üzerinde tasarliyoruz.
2.Nesne Kutusu
Windows menüsünden Objects(nesneler) komutunu tikladiginizda(Ctrl+F2)
karsiniza sol taraftaki nesne kutusu ekrana gelir. Görmüs oldugunuz nesnelerden
istediginizi sayfanizda olusturabilirsiniz. Örnegin sayfaniza resim eklemek
istediginizde, dügmesine tiklamaniz yeterli. Siz sadece ekleyeceginiz resim
dosyasinin yolunu göstereceksiniz.
Nesne kutusunda ekleyeceginiz nesneler alti kategori altinda
toplanmistir.
3.Kolay Erisim Penceresi

Windows menüsünden Launcher komutunu tıkladığınızda kolay erisim penceresi ekrana gelecektir. Bu pencere bazi pencereleri ekrana getirir. Örneğin site haritanızı görmek istediğinizde site düğmesini tiklamaniz yeterli. dügmesini tiklayarak web sayfanizin arka plandaki html kodlarını “code inspector” da görebilirsiniz.

Bu pencerede sayfanizi tasarlarken yapmis oldugumuz eylemler adim adim tutulur. Böylece sitenizi olustururken hangi islem basamaklarindan geçmis oldugunuzu görebilir, istediginiz bir adima geri dönebilirsiniz. Ayni zamanda bu pencere içinde Frames ve Layers bölümleri var. Bunlara tiklayarak da ileriki konularimizda anlatacagimiz ilgili ayarlari yapabilirisiniz.

5. Stil (CSS) Penceresi
Stil, web sayfasinin içerisindeki metin ve paragraf ayarlari ile linklerle ilgili özelliklerin ekranda nasil görünecegini belirleyen bir dizi ayar içeren komut satiridir. Sayfanizda degisiklik yapmak istediginizde bu pencere yardimi ile degisikligi stil sayfanizda yapiyorsunuz, diger sayfalar ona göre görünüslerini ayarliyorlar.

6. Özellikler (Properties) Penceresi
Bu pencere ile sayfanizi tasarlarken o anda üzerinde ugrastiginiz herhangi bir nesnenin(metin, resim, layer vs.) özelliklerini degistirebilirsiniz. Bu pencereyi ekrana Windows menüsünden properties komutu veya klavyeden Ctrl+F3 kisayolu ile çagirabilirsiniz. Araç pencerelerini ekrana getirmek için WINDOWS menüsünü kullanabilirsiniz. Tasarim asamasinda ekranda görmek istediginiz pencerenin ismini tiklayarak ekrana çagirabilirsiniz. Menüdeki komutlarin basinda check(dogru isareti) olan pencereleri F4 tusuna basarak ekrandan gönderebilir, tekrar F4 tusuna basarak ekrana getirebilirsiniz.

Resim.9. 2