Web Tasarımı Dersleri – 2
Web tasarımında en çok kullanılan yazılımlar arasında Macromedia Dreamweaver da bulunur. Bu yazılımın deneme sürümünü buraya tıklayarak indirebilirsiniz. İlk bölümde, bu yazılımın menülerinden bahsetmiştik. İlk bölümü okumak için tıklayın.
Şimdi de panelleri inceliyoruz.
BÖLÜM 2
MX 2004’te Paneller ve Özellikleri
Properties Paneli
Dreaweaver’de yaptığımız bütün işlemlerin özelliklerini bu panel yardımı ile
ayarlayabilmekteyiz. Eğer nesnemiz bir resim ise alternatif metnini, köprüsünü,
hizalamasını, dış kenarlığını, resmin boyutlarını, parlaklığını, hotspotunu
bu panelden düzenleyebiliriz.
Eğer nesnemiz bir metin ise fontunu, puntosunu,
fontun rengini, köprüsünü, hizalamasını bu panel ile düzenleriz. Kısaca belgemize
eklediğimiz bütün nesnelerin özelliklerini bu panel ile düzenleyeceğiz.
Insert Paneli
Bu panelimizin içeriği de adı gibi Insert menüsüyle aynıdır. Tabloları, katmanları,
Flash butonları, resimleri, form nesnelerini vb. nesneleri bu menüden ekleyebiliriz.
Macromedia bu paneli iki stilde tasarlamış. İlki, web sayfalarında gördüğümüz
drop-down menü stilinde, ikincisi ise bir araç çubuğu stilinde. Bu işlem için
Insert yazısının üzerine sağ tıklayın ve Show as Tabs komutunu tıklayın.
Bu
işlemden sonra Insert panelimiz tek satır halinde bütün nesneleri gösterecektir.
Eğer varsayılan stile geri dönmek istiyorsanız tekrar Insert panelinde sağ tıklayıp
Show as Menu komutunu tıklamanız yeterli olacaktır.
Bu panelde göze çarpan asıl özellik ise istediğiniz nesneleri seçerek bu paneli
kişiselleştirebilmenizdir. Bu işlem için panelin üzerinde sağ tıklayalım. İkinci
adımda ise Customize Favorites komutunu çalıştıralım.
Çıkan pencereden sık kullandığınız
komutları sağ tarafa ekleyin ve OK butonuna basın. Belirlediğiniz komutların
simgelerinin bu panelde Favorites başlığı altında toplandığını göreceksiniz.
Design Paneli
CSS Styles
Sayfalarımızda kullanacağımız CSS belgelerini bu panel yardımıyla tasarlayacağız.
Yeni stil tasarlamak, var olan bir stili belgemize çağırmak, var olan bir stil
üzerinde değişiklik yapmak gibi işlemleri CSS Styles panelinde yapacağız.
Layers
Belgemizde yer alan bütün katmanları bu panel üzerinde görebiliriz. Ayrıca
belgemizde birden fazla katman kullandıysak ve bu katmanların bir biri üzerine
gelmesini istemiyorsak bu panelden Prevent Overlaps sekmesini tıklamalıyız.
Code Paneli
Snippets
Dreamweaver’ın sağladığı kolaylıklardan biri de Snippets paneli. Hazır kod
arayanlar için tasarlanmış bu panelin içeriğinde Javascript kodları, navigasyon
çubuğu örnekleri, browser scritlerini ve hazır form elemenların bulabilirsiniz.
Yapmanı gereken tek şey istediğiniz kodu seçip çift tıklamak ve Snippets metin
alanından kopyalayıp scripti belgenize eklemek.
Refference
Bu panelde ise PHP, SQL, ASP.NET, HTML, JAVASCRIPT gibi programlama dillerinin
kullanım kılavuzu var. Bu dillerdeki komutların, fonksiyonların nasıl kullanıldığı
anlatılmış.
Application Paneli
Databases
Adından da anlaşılacağız gibi veritabanı ile ilgili işlemleri Application panelinden
yöneteceğiz. Databases bölümünde ise veritabanı bağlantıları için Connection
tanımlayacağız.
Tabi öncelikle bir sanal site tanımlamamız gerekecek. Veritabanı
uygulamaları bölümünde (BÖLÜM 4) bu işlemleri ayrıntılarıyla ele alacağız..
Bindings
Veritabanımız için kayıt setlerini (Recordset), değişkenleri (Session Variable,
Application Variable, Request Variable) ve veritabanımızın SQL ile işlenmesini
(Command) bu panelden yöneteceğiz.
Server Behaviors
Hiç bir programlama bilgisine sahip olmadan bu panel yardımıyla üyelik sistemleri,
veritabanına kayıt girişi, kayıt silme, bilgi güncelleme gibi işlemleri yürütebilirsiniz.
İleriki uygulamalarımızda da bu paneli sık sık ziyaret edeceğiz.
Components
Bu panelde ise ASP.NET C#, ASP.NET VB, Macromedia ColdFusion MX, JSP gibi diller
için Web Servisi bulunmaktadır.
Tag Inspector
Attributes
Bu tarz bir paneli Visual Basic 6’dan hatırlayacaksınız. Değişkenleri girerek
nesnelerinizi böyle bir menü yardımıyla işleyebiliyordunuz. Dreamweaver’de ise
bu panel yardımıyla nesnelerinizin özelliklerini düzenleyebiliyorsunuz.
Eğer
nesne bir resimse alternatif metnini, boyutları, kaynağını, nesne Flash filmi
ise boyutlarını, eğer bir stil dosyası atayacaksanız atama işlemini vb. gibi
işlemleri bu panel yardımıyla yapabilirsiniz.
Behaviors
İşte Dreamweaver’in harikalar yarattığı panele geldik. Hiç bir programlama
bilgisine sahip olmadan, drop-down menüleri swap imageları, tarayıcı işlemlerini,
tarayıcı mesajlarını, ses dosyası çalıştırmayı, katman animasyonlarını bu panelden
yöneteceğiz.
Sizinde en sık kullanacağız panelin bu olacağını görür gibiyim.
Relevant CSS
Revelant CSS paneli de işlevsel olarak Attributes paneli ile aynı mantıkta
çalışıyor. Fakat bu panel Attributes‘ten farklı olarak sadece CSS Stil Dosyaları’nın
özelliklerini değiştirebiliyor.
Eğer bir CSS dosyanız varsa Design panelinden
seçin, Revelant CSS‘nin etkinleştiğini göreceksiniz. Stiller konusunu uygulamalarımıza
daha geniş ele alacağız.
Files Paneli
Files
Daha önceden tanımlamış olduğumuz sanal sitemizi yöneteceğimiz panel ise Files
Paneli. Bu panel yardımıyla yeni bir sanal site tanımlayabileceğimiz gibi tanımlanmış
bir siteyi de yönetebiliriz.
Dallanmış görünüm sayesinde sitenizdeki dosyaların
tümüne bu panelden erişebilirsiniz. Sanal site tanımlamayı ve yönetmeyi Uygulamalar
bölümümüzde ele alacağız..
Assets
Belgelerinizin içindeki sık kullandığınız nesnelerinizi aynı Internet Explorer’daki
gibi Favorites bölümüne gönderebilirsiniz. Bu işlem için Dreamweaver’de Assets
panelini kullanacağız.
Eğer nesnelerinizden birini bu panele göndermek istiyorsanız,
nesnenin üzerinde sağ tıklayın ve (resim dosyası için geçerli) Add to Image
Favorites komutunu tıklayın.
Örneğin aynı yöntemle bir metin için Favorites
Color belirlediniz. Bu rengi tek tıklamayla herhangi bir metin içinde kullanabilirsiniz.
Bunun için ilgili metni seçelim. Assets paneline gelelim ve Colors butonunu
tıklayalım.
Son olarak Favorites‘e eklemiş olduğumuz rengin üzerinde sağ tıklayıp
Apply diyelim. Favorite Color‘ın seçili metne uygulandığını göreceksiniz.
Bölüm 3, çok yakında ShiftDelete.Net’te
SDN
Yorumunuz gönderildi,
onaylandıktan sonra yayımlanacak.
Sayın programı açıklıyan arkadaşım
Programı indirmek için verdiginiz adreste Macromedia’nın Dreamweaver MX-2004 diye bir programı yok. Director MX-2004 diye bir programı var. İkisi aynı program mı?
Aynı oldugunu varsayarak indirip kurdum fakat düşük özellikli olanını kurdugum halde bile serial numara istiyor. Tanıtımlı belli bir süre free bir program degilmi acaba? Deneme sürümü diye yazmışsınız da.
E-mailime de onaylayıcı e-mail geldigi halde
serial no ları yok- direk kredi kartı istiyor.
Kısacası programı çalıştıramadım. Ne yapacağım? Saygılar?
erdenbay,
Dreamweaver ve Director ayrı yazılımlardır. Söz konuus linkte, bu yazılımlar Studio paketi altında toplanmıştır. Kullanacağınız yazılım da bu paket içerisine dahil edildiği için, bağlantıyı da bu adrese verdik.
Deneme sürümünde herhangi bir sorun ile karşılaşmadık. Sorun yaşamaya devam ederseniz bu konuyu forumda yeni bir başlık olarak açabilirsiniz.
O zaman mutlaka bir çözüm sunacağız size.
Pek saygıdeğer arkadaşlar,
Deneme sürümleri için para istemezler ama tam sürüm için ne yazık ki istiyolar 😛
Bu anlatım, MX 2004 için şimdi macromedia.com’dan DW 8 sürümü dağıtılıyor. Arayüzde çok az bir değişiklik var, zaten 8 sürümle ilgili değişiklikleri de ara notlarda vereceğiz.
İlerleyen bölümlerde sadece bir sayfada nice şeyler öğrenebileceksiniz, sakın kaçırmayın.
Selamlar Troy,
Bilgileriniz için çok teşekkürler. Dreamweaver 8’i kurup çalıştırdım. Web sitesi tasarımıyla ilgilenen arkadaşlar bence başka yerde boşuna zaman kaybetmesinler.
İlgilenen bütün arkadaşlara tavsiye ederim kaçırmayın pişman olursunuz. Bu programın anlatımı için emek sarfeden herkese ve diger faydalı bilgilerinle bize bilgisayar ve internet kullanımını sevdiren (SHIFTDELETE.NET) sitesinin tüm yönetim ve yazarlarına sonsuz teşekkürler eder.
Başarılarının devamını dilerim.
Acaba programın anlatımını daha sık ve daha uzun yapmanız mümkünmü?
Programın 30 günlük free süresi bitmeden bir şeyler yapmayı arzu ediyorum.
çox yaralı bilgiler tşkederim..
güzel :grin
selam.. code lar ne işe yarıyor yani neden code die bi böllüm koymuşlar lütfen beni bilgilendirirmisiniz. saçma bi soruysa da şimdiden afedersiniz 🙂 ama napim bilmemek değil öğrenmemek ayıptır dimi ama ?
Ben bu dreamweaver’ı biliyordum ama bu kadar çok fonksiyonu olduğunu bilmiyordum valla harika bi program bu dreamweaver…. :roll :grin
joomla, xoops, mambo, phpnuke gibi hazır site şablonları dört bir tarafı sarsada bu program sıfırdan site kurmak için çok güzel ve eksiksiz bir araç. Ayrıca bahsettiğimiz hazır site şablonları da bu program içinde editlenebiliyor. Dreamweaver artık bir endüstri standardı haline geldi desem pek abartılı bir laf olmaz sanırım. Ama yeni 8 serisinin kaynak dökümanları az ve yeni çıkan her döküman herşeyi sıfırdan başlayıp anlattığı için orta ve ileri düzeydeki bir kullanıcı için ateşi yeniden bulmak gibi oluyor.
Yukarıdaki soruya cevap vereyim code bölümü ile kodları görebilir düzenleyebilir ve bazen gerekli olan sayfaya kod ekleme ve kopyalama işlemi için bu bölümü kullanabilirsiniz. Yoksa herşey design modunda gayet sade ve hızlı olarak gelişiyor. Sağ taraftaki paneller ise Visual dillerdeki denetimler gibi çalışılan sayfa(form) üzerindeki denetimleri sağlıyor. Detaylar ve ince ayrıntılar çok fazla ama yüzeysel olarak birşeylere başlayıp daha geliştirdikçe bunlar lazım oluyor ve öğreniliyor.
anlaşılmadıı
bütün resimlerin etrafında turuncu bir cizgi oluyor bunu nasıl kaldırabiliriz…lütfen yardım!!!