Dreamweawer

Arkadaşlar dreamweawer ile ilgili paylaşımlarınızı buraya aktarırsanız sevinirm. Özel püf noktalar..

   avrenus hocam sayenizde dreamweawer  i öğrenmeye çalıştım. Bir web sitesi tasarımı bir dosya var bir bakın belki işinize yarar.
 hocam dowload a gönderdim site onaylayınca veya onaylarsa  yada göndermeyi başarabildi isem bakarsınız.

BU KONUDA UZMAN OLDUĞUMU BİLİYORSUN
YİNEDE SİZ AÇIKLAYIN LÜTFEN.

teşekkürler sibella hocam. Daha incelemedim ama bakınca görüşlerimi göndereceğim...

[linkler sadece üyelerimize görünmektedir.]

Gönderilen dosya burada. gerçekten güzel bilgiler var. Dreamweaver'ı pek kullanmadım. Kodlamada yardımcı olduğu için FrontPage'yi tercih ediyorum.

Bende olan bilgiler ama yine de teşekkürler hocam. Dreamweawer da da kodlamaları front page de olduğu gibi yapabilirsiniz ve front page ten geliştirilmiş özellikleri var... Tavsiye ederim TMurat hocam...

Değerli hocalarım bu başlık tam bana göre... Teşekkür ederim!.. Hocam şundan emin olun ki, en iyi tasarı, en iyi tablolalardan oluşur. İçiçe tablolar oluşturmak, onları sağa, sola ve ortaya hizalamak dengeyi oluşturur. En önemlisi ise tablolarımızda yüksekliği sınırlayacaksak yükseklik değeri, genişliği sınırlayacaksak genişlik değerlerini gerek tabloların kendisine ve gerekse de tablo hücrelerinin kendisine vermemiz lazım. Bunu yapabiliyorsak, mükemmel bir şablon zemini oluşturduk demektir. Örnek: Bir sitede eğer gözünüze şu çarpıyorsa hoş olmayabilir; resimler yükleniyordur ve aynı satırdaki veya aynı sütundaki resimlerin ebatarı farklı olduğundan yükleme sırasında devamlı bir hareket gözlenir. Tablo genişlik veya yükseklik değerleri verilmediği için resimler bir o yana, bir bu yana kayarak yüklenirler. Bir efekt olma özelliği taşımadığı için hoş görünmez. Demek istediğim ölçülü çalışmakta her zaman yarar vardır, çünkü nerede hata yaptığımızı hemen tesbit edebiliriz.

Bugün için Dreamweaver' in başlangıcındaki en önemli adımı söylemek istiyorum: "Site Tanımlamak". Bir çok programda olduğu gibi Dreamweaver da bize kolaylıklar sunan Panel' ler kullanır. Bu paneller bazı gruplanmış eylemleri gerçekleştirebilmemizi veya çalıştığımız dökümanları yönetebilmemizi sağlar. Mesela; özellikler (properties) paneli gibi. Ama en önemli panel Files (dosyalar) panelidir. Dreamweaver' in sağ tarafında (ben burayı kullanıyorum) panelleri görüntüleyeceğimiz Panel Park Yeri veya Panel İskelesi denen yeri vardır. Panelleri açmak için Window menüsünü kullanıyoruz ve ordan ilk etapta Files Panelini seçiyoruz (eğer hal-i hazırda görünmüyorsa). Bu Files Panelinde "Bilgisayarım" gibi sürücülerimizi ve masaüstümüzü görmekteyiz. Üzerinde çalışma yapacağımız dosyanın bulunduğu klasörümüzü (veya eski kullanılan tabiriyle dizin) açabiliriz. Fakat çalıştığımız dökümanlar veya klasörler farklı yerlerde olmaya başladıkça (farklı projeler yaptıkça) devamlı alt alta açılmış uzuuuun bir klasörler listesi görmek bizi yoracaktır... Bunun için "SİTE TANIMLAMASI" yaparak, Files Panelinde sadece o andaki projemizin dökümanlarını görüntüleyebiliriz...

SİTE TANIMLAMA:

İlk önce şunu belirtmek isterim: Dreamweaver' da çalışıyorsak eğer, bütün projelerimizi klasörler içerisinde sınıflandırdırmalıyız ve bütün projelerimizi tek bir ANA KLASÖR içerisinde bulundurmalıyız. Mesela, bütün projelerimizin içinde bulunduğu ana klasörümüz " PROJELER " olabilir. Bunun içinde proje1, proje2 gibi veya sizlerin hatırlayacağı isimlerle proje klasörlerinzi isimlendirin. Bu gerçekten önemli Site Tanımla için...


1) Manage Sites iletişim kutusu açılır. Site/Manage Sites menüsünden seçin. New düğmesini tıklayın ve açılan menüden Site sçeneğini işaretleyin. Karşımıza Site Definition penceresi çıkacaktır. 2 sekmemiz vardır: Basic ve Advanced. Biz burada şimdilik Basic sekmesinden ilerleyeceğiz.

2) Basic sekmesinde "What would you like to name your site?" soru cümlesinin altındaki haneye, projemizin adını yazıyoruz. Mesela, " okul " (hangi isimle hatırlayacaksanız).

3) Hemen alttaki " What is the HTTP Adress URL of your site? " sorusuna cevap vermiyoruz. Çünkü biz sadece çalışmalarımızı yaptığımız Bilgisayarımızdaki Ana Klasörü sonraki aşamada göstereceğiz adres olarak. Alttan " NEXT " butonuna tıklayıp sonraki aşamaya geçebiliriz.

4) " Do you want to work with a server technology ....." ile başlayan soruda bize, bir server (sunucu) teknolojisi kullanmak isteyip istemediğimizi ve eğer kullanacaksak bu teknolojinin ne özellikte olmasını istediğimizi soruyor. Bizim cevabımız " No, I do not want to use a server technology " olacak. (evet demedik, çünkü bilgisayarımızda server (sunucu) kurmamız gerekiyor. Biz HTML dökümanlarıyla çalaşacağız olarak varsayıyoruz.) " NEXT " butonuna tıklıyoruz...

5) " How do you want to work....." ile başlayan soru bize, dosyalarımızı nerede düzenleyip geliştireceğimizi soruyor. Biz alttaki 2nci seçeneği işaretliyoruz " Edit directly on server using local network ". Böylece bilgisayarımızda dosyalarımızı düzenlediğimizi ve başka bir yerde kopyasını oluşturmak istemediğimizi belirtiyoruz.

Hemen alttaki,
" Where are you files on the network? " sorusu bize, proje dosyalarımızın nerede olduğunu soruyor. Sağ yandaki klasör simgesine tıkladığımızda açılan pencereden proje dosyamızın yolunu gösteriyoruz. (Mesela, C:\Projelerim\okul\ gibi. Yukarıda yazdığım gibi Projelerim benim bütün projelerimi koyduğum ana klasör, Okul ise bir proje klasörü.) Proje klasörümüzü gösterip " SELECT " tıklıyoruz. Sonra " NEXT " yapıyoruz.

6) " DONE " butonuna tıklıyoruz ve bi önceki açtığım pencereye " Manage Sites " e dönüyoruz, orda da aynen " Done " tıklıyoruz.

Dreamweaver burda proje klasörümüzdeki tüm klasörleri ve dökümanları bizim sınıflandırdığımız şekilde Files Paneli' nde sunuyor. Daha rahat çalışmalar için ve bu özellikten daha önce faydalanmayanlar için paylaşmak istedim.

Uzun oldu ve çok alan kapladı. Umarım rahatsızlık vermedim. İsterseniz paylaşımı bırakabilirim...

Saygılarımla!

Dreamweaver da açılır menüler yapmak...

1) Öncelikle bir link oluşturalım. Mesela "Personelimiz" ve bunu var olan bir dökümana bağlayalım.

2) Şimdi Mouse' umuz ile bu bağlantı yazımızı seçelim (veya 1 kere yazıda herhangi bir yere dokunarak yanıp-sönen imleci bırakmış olalım).

3) Window menüsünden Behaviors a tıklayıp paneli açalım.

4) Behaviors Panelindeki + (artı) işareti olan açılır menüyü açıp Show Pop-Up Menu seçeneğini işaretleyelim.

5) Karşımıza çıkan Show Pop-Up Menu penceresinde 4 adet sekmemiz var. İlk sekmemiz CONTENT içindeyiz. Burda TEXT yazan haneye, menümüzün ilk elemanının adını yazıyoruz.

        Mesela, Personelimiz bağlantısının üstüne geldiğimizde açılacak olan menüde ilk olarak "Yönetim Kadromuz" olsun.

Text hanesine Yönetim Kadromuz yazalım. Hemen altındaki satırda Yönetim Kadromuzla ilgili HTML belgesinin adresini yazıyoruz. Bunun için o satırın sağındaki klasör simgesine tıklayıp açılan pencereden dökümanı seçebiliriz.

Sağ tarafta TARGET yazan yerde ise bu altmenü seçeneğine tıklanınca açılacak dökümanın aynı sayfa üzerinde açılmasını istiyorsak boş bırakırız. Ayrı bir sayfada açılması için " _blank " seçeriz.

6) Bir alt menü daha oluşturacaksak Menu yazan yerdeki + (artı) ya tıklıyoruz. Eğer bir menü sileceksek, menüyü seçip - (eksi) ye tıklıyoruz. Yukarıdaki diğer adımları aynen uygulayıp bir sürü altmenü ekleyebiliriz.

Ayrıca altmenünün bir altmenüsünü daha oluşturabiliriz. Artı ve Eksi işaretlerinin yanında 2 adet daha kutucuk düğme vardır. OUTDENT ve INDENT. İndent menüyü bi üsttekinin altında açılır şekilde içeri sokar. Outdent dışarı çıkarır.

7) İkinci Sekmemiz olan APPEARANCE geçelim. Burda ilk seçenek Vertical Menü (dikey menü) Horizantal Menü (yatay menü) seçeneğidir. Seçin bir tanesini hemen pencerede etkisini göreceksiniz.

Bu sekmede yazı karakteri, boyutları ayarlanabildiği gibi, açılır menümüzün görüntüsü de renk kutucuklarından ayarlanabilmektedir.

ADVANCED sekmesinde ise açılır menümüzün dış kenarlık ve çerçeve çizgi özellikleri ayarlanabiliyor. Üstlerde bulunan Cell Padding Cell Spacing gibi ayarları deneyin ve etkilerini görün. Bunlar Yazı ile Hücreler arasındaki mesafeleri belirlemektedir.

Border=1 yaparsak zarif görünümlü bir dış çerçeve yapmış oluruz. Rengini seçebiliyoruz...

Shadow çerçevenin Gölge rengini değiştiriyor.

Highlight çerçevenin Işık vuran rengini değiştiriyor.

Böylelikle 3 boyutlu gibi bir etki elde ediyoruz.

9) En son olarak POSITION sekmesinden üstteki görünüm düğmelerine tıklayıp etkileri görebiliriz.  Birbirinin üzerine hafifçe binen, aşağı, yukarı, sağa yön çeşitleri mevcuttur.

Dilersek ilk oluşturduğumuz bağlantı üzerine Mouse ile gelince açılan menünün hangi koordinatlarda açılacağını bile X ve Y koordinatlarına değerler girerek belirleyebiliriz.


10) En son OK tıklayıp çıkıyoruz ve dökümanı kaydedip explorerdan bakıyoruz.

Bir sonraki yazımda bunu daha sonra yeniden nasıl düzenleyebileceğimizi anlatmak istiyorum.

SHOW POP-UP MENUS (AÇILIR MENÜLERİ) TEKRAR DÜZENLEMEK

1) Dreamweaver' da dökümanımızı açıyoruz.

2) Önceden oluşturduğumuz açılır altmenü özelliklerini düzenlemek için açık değilse Programın WİNDOW menüsünden BEHAVIORS panelini açıyoruz.

3) Açılır menü oluşturduğumuz yazı linkinin veya nesnenin başında ÇAPA işareti vardır. Dilersek bu çapayı veya açılır menü özelliği eklediğimiz yazı veya nesneyi seçeriz. Böylelikle programımızın sağ tarafındaki Panel Park Yeri' nde bulunan Behaviors Paneli' nde açılır menü özellikleri sıralanır.

4) Behaviors panelinde 2 satır mevcuttur.

Satırlardan biri " onMouseOut    Hide Pop-up Menu " dür. Bu, mouse menü üzerinde değilken menümüzün gizlenmesini sağlıyor.

Diğer satır " onMouseOver    Show Pop-up Menu " dür. Bu, mouse ile menü üzerine gelince açılmasını sağlıyor.

Biz " onMouseOver " olanın üzerinde Sağ Tık yapıp " Edit Behavior " seçeceğiz.

Bir önceki yazımda anlattığım düzenlemeleri tekrardan yapabiliriz artık.

EK BİLGİ

Yukarıda eklemeyi unuttuğum önemli bir işlev daha var:

Show Pop-up Menu de düzenleme yaparken ADVANCED sekmesinde " Menu Delay " kutucuğu vardır.

Menu Delay hanesine yazacağımız değer, mouse' umuzu açılmış olan menümüzden kenara çekince menümüzün gizlenme zamanını belirlemektedir.

Mesela menu delay hanesine;

1 değeri yazdığımızda, 1 saniyeden daha kısa sürede menümüz gizlenecektir,

1000 değeri yazdığımızda 1 saniye sonunda gizlenecektir,

10000 değeri yazdığımızda 10 saniye sonunda gizlenecektir.

DREAMWEAVER' DA FLASH WEB RESİM ALBÜMÜ OLUŞTURMAK

Bir fotoğraf arşivimiz var ve bunu Web Sitemizde yayınlamak istiyoruz. Bunun için Adobe Macromedia Flash programını kullanmaya alternatif olarak Dreamweaver' a entegre edilmiş Image Viewer seçeneğimiz mevcuttur.


1) Dreamweaver' da üstteki menülerden Insert > Media > Image Viewer sırasını takip ediyoruz.

2) Karşımıza çıkan pencerede oluşturulacak olan Flash oynatıcı dosyasının (SWF) kaydedileceği klasör yolunu belirtiyoruz. Kaydet' e tıklıyoruz.

3) Dökümanımıza bir Flash nesnesi eklendi, değil mi? Şimdi yukarıdaki menülerden (eğer açık değil ise) Window > Tag Inspector panelini seçip açıyoruz.

Şimdi burada dökümanımızdaki Flash nesnesine 1 kez dokunup seçtiğimizde, "Tag Inspector" Panelinin adı "Flash Element" olacaktır.

Panelin içerisinde bulunanlar, Flash nesnemizin (resim göstericimiz) özellikleridir.

4) Özelliklerin Ayarlanması:

Bu özellik paneli 2 sütundan oluşmaktadır. Solda özellikler, sağda değerler vardır. Sağdaki değerlere 1 kez tıkladığınızda, değerlerinde değişiklik yapabileceğiniz şekilde aktif hale gelirler.

bgColor : Arkaplan rengi
captionColor : Resimlerin Başlık Rengi
captionFont : Resimlerin Başlık Fontu
captionSize : Resimlerin Fontun Puntosu
frameColor : Kenarlık Rengi
frameShow : Kenarlığı Göster / Gizle
frameThickness : Kenarlık Boyutu
imageCaption : Resimlerin Başlıkları
imageLinks : Resimlere Verdiğimiz Köprüler, Linkler.
imageLinkTarget : Linklerin Hedefleri (Linklerin aynı pencerede veya yeni pencerede açılmalarını sağlar)
imageURLs : Resimlerin Bulunduğu Klasörün Yolu.
showControls : Kontrol Panelini Göster / Gizle
slideAutoPLay : Slayt Düzeninde Oynat.
slideDelay : İki Oynatım Arasındaki Zaman Aralığı.
slideLoop : Slayt Sonsuz Döngüde (YES seçerseniz, Play' e basıldığında tekrar baştan oynatmaya devam edecektir)
title : Başlık
titleColor : Oynatıcı Düğmelerin Başlık Rengi
titleFont : Oynatıcı Düğmelerin Başlık Fontu
titleSize : Oynatıcı Düğmelerin Başlık Fontunun Puntosu
transitionsType : Resimler Arasındaki Geçiş Efektleri



5) ÖNEMLİ!!!

imageLinks, imageURLs gibi özelliklerin değerlerine tıkladığımızda hemen sağ tarafta (üzerinde kalem olan not kağıdı şeklinde) "Edit Array Values" kutucuğu görünür. Bu kutucuğa tıklamalıyız... Açılan pencerede Artı (+) ve Eksi (-) işaretleri vardır. Artı (+) ya tıkladığımızda hemen alta boş bir satır açar; bu boş satıra tıklıyoruz ve hemen yanında sarı renkli klasör simgesini görüyoruz. Bu klasör simgesi ile açılan pencereden resim yüklemesi yapıyoruz. Eksi (-) işareti seçtiğimiz satırdaki resim bilgilerini siler. Çıkartmak istediğimiz resimleri bu yolla kaldırırız.

Beğeneceksiniz!..

BİR RESİM ÜZERİNDE SEÇTİĞİMİZ ALANLARA FARKLI LİNKLER VERMEK

Dreamweawer' da "HOTSPOT TOOLS" denilen aletler yardımıyla, resimlerin üzerinde istediğimiz gibi seçim alanları oluşturup herbirine farklı linkler verebiliriz.

1) Dökümanımıza fotoğrafı yerleştirelim ve 1 kez üzerine tıklayıp seçili hale getirelim. Aşağıdaki Properties (Özellikler) panelinde, sol altta "MAP" bölümünde 3 adet açık mavi renkte seçim aracı göreceğiz.

2) Adı üzerinde Map (haritalamak, bölmek, bölgelere ayırmak) araçları Dört Kenarlı, Dairesel ve Poligon olmak üzere 3 adettir. Fotoğraf üzerinde seçim işlemi yaptıktan sonra, Properties paneli Map araçlarının özelliklerini ayarlayabileceğimiz şekilde bir görünüm sunar.

3)

Link: Burada, bağlantı verilecek link adresimizi yazıyoruz.
Target: Burada, bağlantıya tıklandığında açılacak URL adresinin yeni (_blank) veya aynı pencere (boş bırakabiliriz) içinde açılıp açılmayacağını belirtiyoruz.
Alt: Burada, seçtiğimiz alanın üzerine Mouse ile gelindiğinde ortaya çıkan, ufak ve sarı renkli bir açıklama kutucuğunun yazısını ayarlıyoruz.

Mesela, TÜRKİYE haritasında hangi ilin üzerine gelirsek oranın ismi görünebilir. Sarı kutucuğun içeriğini burada yazıyoruz.

Hocam hiç yorum almadık bu başlıkta...

Yoksa sıkıntı mı verdim istemeden...