MACROMEDIA DREAMWEAVER MX 2004

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.

Yazar: Yunus Döküman Düzenleme: Enver Eyaz 

(Alıntı olup hazırlayanlara teşekkür ederiz)