|
MACROMEDIA
DREAMWEAVER MX 2004
Sitemizin bu bölümünde
Macromedia firmasının yegane ürünü olan Dreamweaver Mx 2004 programını içli
dışlı yeterince anlatmaya çalışacağım. Siz webmaster'ların işini kolaylaştıran
yani sizin yerinize kodları yazan ve bir çok özelliği içinde bulunduran
Dreamweaver mx 2004 programıyla artık web tasarımı yapmak çok kolay. Yeni
başlayanların, profesyonellerin, uzmanların tercihi ve dünyanın webmaster
programlarının en önünde gelen ve kullanımı çok rahat olan Dreamweaver mx 2004
programı kendi içerisinde çok geniş web master araçları sunmaktadır. Bu
programla ayrıca Macromedia firması programlar arasında ortak çalışmanın ne
kadar önemli olduğunu bir kez daha dünya bilişim teknolojicilerine göstermiş
oldu. Macromedia flash mx, fireworks gibi programların ana özelliklerini
dreamweaver mx 2004 programına kullanıcıların daha güzel siteler tasarlaması
için entegre etti. Artık bu programları dreamweaver programında iki tıklamayla
resim düzenlemeler, flash buton vb. yapmak çok kolay olarak gerçekleştiriliyor.
Bu özellikte kullanıcının kafasının karışmamasına ve tasarımın daha etkili
olmasına yol açıyor. Kısaca belirtirsek amaç web tasarımsa kaynak olarak doğru
kişi (yunus tapa, chemeng ve diğer turkwebmasters.net editörleri) doğru site (turkwebmasters.net)
ve doğru programı öğrenmeniz için bu bilgileri tekrar tekrar okumanız birde her
daim uygulama yapmanız gerekecektir. Ve sorunlarınızı bize email atarak yada
forumumuza yazarak çözebilirsiniz.
Dreamweaver Neler Yapabilir?
Web sayfası yapar, bu sayfayı
yapmakla da yetinmez onu admin (Sahip) olarak yönetmenize, tek bir tıklamayla
yüzlerce sayfayı aynı anda güncellemenizi, internette yayımlamanızı,
programlamanızı ve bunun gibi bir çok opsiyonu yerine getirebilmekte yani web
tasarımda devrim niteliğinde bir programdır Dreamweaver Mx 2004 programı.
Aslında Göründüğü Kadar Karmaşık Değil!
Dreamweaver programı, web
sayfası tasarımına yeni başlamış, deyim yerindeyse tecrübesiz kullanıcıların
karmaşık diye tabir ettiği bir yazılım değildir aslında. Programla yeni tanışan
çoğu kullanıcı sadece programın ara yüzüne bakarak kullanımının zor olduğuna
karar verebilir, ancak durum sanıldığı gibi değil. Program içerisinde her
özellik kendine ait bir menü altında yer alıyor ve bu menülere alışmak fazla
zamanınızı almıyor. Dreamweaver programının ara yüzü genel olarak üç bölümden
oluşuyor. Sağ kısmı tamamen program içerisindeki pencerelerin yer aldığı panel
kaplıyor. Alt kısımda ise programın en önemli pencerelerden biri olan ve
programda kullanabileceğiniz bütün araçların özelliklerini ayarlamanızı
sağlayacak olan properties bölümü bulunuyor. Bu bölümün üst kısmı ise sayfamızın
görüntülendiği bölüm olarak ayrılmış. Bunların dışında, çalışmalarımızda
kullanacağımız araçların yer aldığı menüler de en üst kısımda bulunuyor.
Dreamweaver'de Bir Sorun Türkçe
Konuşamaması. (Ama Dert Değil Bunu da Nasıl Gidereceğimizi Anlatıyorum)
Sayfa içerisinde kullandığınız
Türkçe karakterler browser'da(internet Explorer) istediğiniz gibi görünmüyor. Bu
problem sizinde tahmin edebileceğiniz gibi ş ve ğ harflerinden kaynaklanıyor. bu
olayın olmaması için bir çok yöntem vardır ama ben en basitini anlatayım. İlk
olarak edit menüsünden preferences'i tıklayın. Ekran karşınıza gelince sağ
taraftaki Default Encoding'ten Other Front Settings'den de Other'ı seçin.
Proportional Font'um Times New Roman (Turkish), Fixed Font ve Html Inspector'u
Courier New(turkish) yapın. Ok butonuna tıkladıktan sonra Dreamweaver'i kapatıp
tekrar açın. Bu yaptıklarınızla artık yaptığınız sayfalarda Türkçe karakterlerde
kullanabilirsiniz.
Yazılar, Yazılar, Yazılar…
Dreamweaver yazı özellikleri
bakımından diğer web tasarım programlarından daha iyidir. Sayfanızdaki yazıların
font ve büyüklüklerini değiştirmeye yarayan özellikler de bazı farklılıklar
içerir. Dreamweaver'in yazı özelliklerinin nasıl olduğunu ve daha sonra sizin
için uygun olanı seçip ana sayfanızda uygulayınız. Programı çalıştırdığınız
zaman file den new'e tıklayın. Boş bir sayfa açılacaktır. Bu sayfanın ortasına
bir yazı yazalım mesela isminizi. En alttaki bölüm olan properties bölümünden
istediğimiz değişikliği yapabiliriz. "Properties" yukarıdaki ekran karşınıza
çıkacaktır. Burada format ile başlayalım. Yazımızın hangi formatlarda olacağını
belirler. Font yazımızın hangi fontla yazılması, size yazının büyüklüğünü, style
yazının hangi stille yazılacağı, B (yazı kalın), I (yazı italic) altta renk
kutucuğu yazı rengini, link yazıya köprü, link yapmamıza olanak sağlar (En
önemli olanlar bunlar olduğu için anlattım diğerlerini karıştırarak
öğrenebilirsiniz).
Sayfa İle İlgili Özellikler
Sayfamızın özelliklerini sayfa
içerisinde sağ tıklayarak Page Properties'i seçmekle işe başlamalısınız. Bu
ekran Çok anlaşılırdır. Apperance bölümü bizim bölümüz çünkü en önemli olan
ayarlar orada mevcuttur. Sırasıyla page font sayfanın ana fontunu belirlememizi
sağlar. Size ise sayfa yazılarının hangi büyüklükte olacağını, text colar
sayfamızdaki yazıların ana rengini belirlememizi, Backgroundacolor sayfamızın
arka planının ne renk olacağını, Background imege sayfamızın arka planına resim
eklememizi sağlar(bunlar en önemlileri diğerlerini deneyerek öğrenmek kolay
olur)
Yaptığım Sayfaları Birbirine Nasıl Bağlarım?
(Güzel Soru, Kutluyorum ve anlatmaya başlıyorum)
En çok kullanacağınız ve en
çokta ihtiyacınız olan link özelliği de budur işte. İki sayfa yapalım ve bunları
kayıt edelim. File menüsünden save ile yapabiliriz (tabi ilk sayfayı tasarlarız
ondan sonra save deriz. Böyle iki sayfa kayıt edelim. Ve bunları birbirine nasıl
bağlarız sorusuna cevap bulalım) Mesela ilk sayfamızda Mağazam diye bir yazı
olsun. Bu yazıyı seçerek (mouse'la) properties bölümündeki link'e bağlanacağımız
dosyayı yazıyoruz. Yada hedef işaretinin yanındaki klasör resmine tıklayın
oradan hangi sayfayı kullanacağınızı seçin. Ve ok tıklayın. F12 tuşuyla deneme
yapın göreceksiniz ki sayfalarınız birbirine bağlanmış olacaktır. (yani
tıkladığımızda başka sayfaya gitsin diye)
Sayfamıza Mail Adresi Ekleme
E-mai linki eklemek
dreamweaver'de farklıdır. En üstteki bölümden insert bölümünden e-mail linkine
tıklayın. Ekranda text bölümüne Yazıyı, Email kısmına ise email adresinizi
yazın. Ok tıklayın artık sayfanızda bir email linki bile oldu.
Sayfamıza Resim Ekleyelim
Sayfamıza resim eklemek için
Objects panelinden Insert Image'e tıklayın. Select Image Source penceresi
açılacaktır. Resim eklemek için bu pencereden hangi resmi ekliyeceksek sayfamıza
onu seçmeliyiz. Sonra ok tıklayıp sayfamıza geri döneriz. Tabiki resimli haline.
Eğer resmimize köprü, başka sayfaya bağlanmasını istiyorsanız Url kısmına hangi
sayfaya bağlanacağını yazabilirsiniz.
Resme Link Verme
Önceki konularda nasıl link
eklediğimizi söylemiştim ama resme link eklemeyi bir daha açıklık getireyim.
Sayfaya resim ekledikten sonra link vermek çok kolay. Zaten dreamweaver'de çoğu
işi yapmak çok kolaydır. Yeter ki sabır gösterip işin nasıl yapıldığını deneyin.
Resme tek tıkladıktan sonra properties bölümündeki link bölümünü kullanacağız.
Resme tıklanınca karşımıza hangi sayfanın gelmesini istiyorsak linkin sağındaki
dosya butonuna tıklamanız iyi olacaktır. Hedef dosya ne ise seçip select
butonuna tıklayınız. bu durumda resme link vermiş olduk.
Dreamweaver Ve Tablolar
Tabloların bir webmaster için
ne anlama geldiğini anlatmam gerekirse profesyonel bir site düşünün kesinlikle
bu site tablolar üzerine kurulmuştur. Bir inşaatın temeli inşaat için ne önem
taşıyorsa web sitesi içinde tablolar o önemi taşıyor. Tablo eklemek için Objects
panelinden Insert table butonuna tıklayalım. Insert table ekranı karşınıza
çıkacaktır. Ekranda neler olduğuna ve bizim için önemli olanlara göz atalım.
Rows kutucuğu kaç satırlık bir tablo kullanacağımızı, colomns'a ise kolon sayısı
yazılacak. Cell padding hücrelerin içindeki yazıların veya resimlerin hücrelerin
sol üst köşesinden ne kadar uzaklıkta olacağını, Cell Spacing ise hücrelerin
arasında bırakılacak alan boşluğu belirlenir. Tablonun genişliğini Width
kısmından, tablonuzda kenar çizgileri olmasını istiyorsunuz border kısmını
arttırmanızı sağlar. Bunları yaptıktan sonrada ok tıklayın (bunlar en önemli
bilgiler diğerlerini bulabileceğinizi sizde biliyorsunuz artık).
Frame'ler ve Biz!!!
Frame'nin kelime anlamı
çerçevedir. Web sayfanızı aynı pencerede gibi değişik bölümlere ayırır.
Sayfanızı kaç bölüme ayıracağınızı seçersiniz. Ayırdığınız her birini ayrı ayrı
dizayn etmenize olanak sağlar. Bahsettiğim gibi frame'in sitenizi vezirde
rezilde edebilir. Frame kullanarak yapılan bir sayfa, en az 3 sayfan oluşur. Bu
sayfaların ilki sayfanın anası yani kendisidir, diğer sayfalar ise tek başlarına
birer html sayfası olup pencerenin kenarlarıdır. Biraz karışık öyle değimli,
Örnek yaparak daha iyi anlayabilirsiniz. Frame'yi evinizin pencerelerine
benzetebilirsiniz.
Ne Zaman Frame Kullanmalıyım?
Frame kullanabileceğiniz ilk
durum, siteniz çok fazla konu başlığı içermesidir. Çok fazla konu başlığı
olması, çok fazla link olması demektir ki bu işlem oldukça uzun sürecektir. Bu
durumda bir sayfayı(daha doğrusu frame'nin bir bölümünü)sitenizdeki konu
başlıkları sıralamak için kullanabilirsiniz. Sayfanızın kalan bölümlerinde ise
sitenizdeki diğer sayfaları gösterebilirisiniz. Sayfalarınızı konularına göre
kategorilere ayırırsanız frame kullanmak sizi rahatlatacak, yeni sayfalar ve
kategoriler eklemek çok kolay olacaktır.
Dreamweaver'de Frame Tasarımı Ve Rahat Olan
Kullanımı
Programdaki en üst öğelerden
olan Modify'den Frameset'i izleyerek istediğimiz frame'i seçmektedir.
Böyle bir ekran çıkmaktadır. Böyle dört seçenek
gelmelidir. Dört Seçeneği de İnceleyelim mi ne dersiniz bence iyi olur.
1.Split FrameLeft: Sayfanın sol tarafında bir frame oluşturur.
2.Split Frame Right: Sağda bir frame oluşturur.
3.Split Frame Up: Üstte bir Frame oluşturur.
4.Split Frame Down: Altta bir frame oluşturur.
Gördüğünüz gibi bu yöntemle
sayfamıza bir frame ekleyebiliriz. Dreamweaver sayfanın kodlarında gerekli
değişikliği yaparak sayfada bir frame alanı oluşturur. Oluşan her iki bölümü de
istediğiniz gibi düzenleyebilirsiniz. Bu yöntemle iki tane sayfayı frame
özelliğiyle yapabilirsiniz ama istediğiniz tasarım bu değilse ne yapabilirsiniz.
Buyurun…
İkinci yöntem Frame panelini
kullanmaktır. Öncelikle Object panelinden Frame'i seçmelisiniz. Frame paneli
değişik frame seçeneklerini sunan bir paneldir. Bu paneli object panelini
görüntüledikten sonra sayfanızı hangi frame yapısına göre yapacağınıza karar
vermeniz gerekecektir. Karar verdiğiniz frame dizaynına tıklayın ve
düzenlemeleri yapın. Ben size burada sitelerde en çok kullanılan yani aşağıdaki
şekildeki gibi olan frame'yi açıklayayım ve sizde uygulayın.
Sorularınız İçin:
yunus@turkwebmasters.net adlı e-maile
yada forumumuza yazarak bize ulaştırabilirsiniz.
Unutmayın
Herşey Paylaşmak Adına…
|
