HTML Dersleri 15 Adobe DreamWeaver Editörünün Tanıtımı

Merhabalar herkese. Geride kalan 14 dersi takip eden arkadaşların HTML konusunda bir hayli yol katettiğini rahatlıkla söyleyebiliriz. Madem bu kadar yol katettik bir level daha atladık o zaman biraz daha profesyonel çalışmakta fayda olduğunu düşünüyorum.

O yüzden bundan sonraki ders anlatımlarımda kullanmak üzere yeni ve daha profesyonel bir editörü sizlere tanıtacağım. 

Tanıtacağım editör Adobe DreamWeaver olacak.

DreamWeaver ilk başlarda Macromedia şirketi tarafından geliştirilen bir ağ sayfası geliştirme aracıydı. 2005 yılından sonra Adobe un Macromedia şirketini bünyesine katmasıyla Adobe DreamWeaver CS3 ismiyle yayınlanmaya devam edilmiştir.

En son sürümü CS6 dır. 



CS4 den sonra genel yapı biraz değişmiştir. Ben sizlere CS5 üzerinden anlatım yapacağım. CS4 yada CS6 da kullansanız pek farklılık gözetmediğini fark edeceksinizdir.


Bilgisayarınıza kurduğunuzu varsayarak anlatmaya başlıyorum.

Programı ilk açtığımızda karşımıza bu ekran gelecektir.

Resimlere tıklayarak orijinal boyutlarında görebilirsiniz.


Şimdi ilk olarak ortada bize bir takım seçenekler sunan pasaja biraz daha yakından bakalım.


Create New dediği bölümde proje tipimizi hangi dilde hangi teknoloji ile yazılım geliştireceğimizi seçeriz. Gördüğümüz gibi HTML den XML e kadar pek çok seçenek mevcut. Bizim şimdiki işlerimizde işimize yarayacak olan kısım ise HTML olacak.



Hemen sol tarafa bakarsak Open a Recent Item kısmına...

Bu alan bize daha önceden üzerinde çalıştığımız son 5 dosyayı sıralar. Hemen tıklayarak eski çalıştığımız dosyaların çalışma alanına geçerek kolay ulaşımı sağlamaktadır. 

Eğer daha önceden çalıştığımız dosya 5 li içinde yoksa o zamanda


Open sekmesine tıklayarak daha önceden çalışmış olduğumuz dosyaların klasörüne gidip oradan seçip çalışmaya devam edebiliriz.

En sağa baktığımızda ise Top Features dediği bölüm bu bölümde bizi Adobe TV internet sayfasına yönlendirir.  DreamWeaver ile ilgili ders anlatımlarına ve ipuçlarına ulaşabildiğimiz alandır.


Bunları da söyledikten sonra artık HTML sekmesine tıklayalım ve çalışma ortamıza geçiş yapalım.


Burası çalışma ortamımız. 

İlk olarak bahsetmemiz gereken kısım kodlarımızı yazıdığımız orta kısım.

DreamWeaver bize Designer modunda 3 çeşit çalışma alanı sunar. 


Bunlardan ilki Code modudur. 

Bu modu seçer isek ana ekran sadece kod yazabildiğimiz bir ekran moduna döner. 

İkincisi Split modudur. 

Bu mod sayfayı iki eşit parçaya böler. Bir bölüm kodlarımızı yazdığımız bölüm diğer bölüm ise anlık olarak kodlar ile yaptığımız tasarımın nasıl göründüğünü bize gösteren tasarım kısmıdır. 

Üçüncü mod ise Design. 

Bu mod ise ana ekranda sadece tasarım alanının göründüğü moddur. Tasarım alanında yaptığımız değişiklikler direk olarak kod ekranına yansıyacaktır. 

Zaten DreamWeaver ın bize sağladığı en büyük avantajlardan biride budur. 

DreamWeaver gördüğümüz gibi ilk açıldığında her HTML dosyasında olması gereken kodları hazır bir şekilde getirir. Buda biz kodlayıcıları memnun eden bir durumdur.

Üst menü çubuklarından bahsedeyim birazda. 


Sayfayı az önceki anlatığım şekillerde görüntülemek için tasarım menü çubuğundaki işaretli kısımlara tıklamamız yeterli olacaktır.


İşaretlediğimiz kısım title projemiz içindeki title etiketi ile yazdığımız İnternet sayfamızın tarayıcıdaki ismine tekabül eden alandır. Direk bu kısımdan bunuda ayarlayabiliriz. Buraya yazdığımız anda otomatik olarak kodlarda da değişecektir.



 Hemen biraz solundaki dünya sekmesi üzerine yoğunlaşalım şimdide. 

Bu sekme bize o anda oluşturmuş olduğumuz Web sayfasının bir tarayıcıda nasıl gözüktüğünü test etmemizi sağlar. 

Gördüğümüz gibi üzerine tıklayarak her bir tarayıcıda sayfamızın nasıl göründüğünü kontrol edebiliriz.

Diyelim ki istediğimiz tarayıcı seçenekler arasında yok o zaman Edit Browser List yazan kısma tıklarız. 



Gelen sayfada + tuşuna tıklayarak yeni bir tarayıcı ekleyebilir. Edit kısmında seçili tarayıcı ile ilgili özelliklere erişebilir. Birincil mi yoksa ikincil tarayıcı mı olduğuna karar verebiliriz.

Birincil tarayıcımıza F12 kısayol tuşu otomatik atanır ve biz çalışma ekranındayken son yaptığımız değişiklikleri kaydedip direk F12 tuşuna basarak varsayılan tarayıcıda sayfamızı kontrol edebiliriz.


İşaretlediğim alan menü çubuğu. Bu kısımı anlatmak saatlerimizi alabilir. O yüzden bu kısımla ilgili bilgileri yeri geldikçe anlatmakta fayda var.


İşaretlediğim alan toolbars dediğimiz araç kutumuz. Pek çok özelliğe bu toolbars sayesinde kolayca ulaşabiliriz.

Yeni bir dosya açmak istersek en üstteki beyaz dosya şeklindeki sekmeye tıklamamız yeterli olacaktır.

Bazen çok uzun kodlar içinde kayboluruz. Böyle durumlarda kodları kod blokları şeklinde kapatmak işimize gelecektir. Bu işlemi yukarıdaki resimde işaretli gördüğünüz sekme ile yapabiliriz. Kodları genişletmek için ise o sekmenin iki altındaki sekme işimizi görecektir.



Bu resimde işaretleridiğim kısımların ilki ile yazmış olduğumuz seçili kodları kodları açıklama satırı haline getirir altındaki ile de yaptığımız işlemi geri alabiliriz.


Sayfanın en altındaki bu properties bölümü ise oluşturmuş olduğumuz alanlara nesnelere direk stil müdahalesi yapabildiğimiz alandır. Burada yaptığımız değişiklikler kodlar içine hemen yansıtılır.

İçeriklerine kod yazarken daha detaylı değineceğim.


Bu kısım ise şimdilik işimize yaramayacak kısım. Ama dosyalarıımıza ulabildiğimiz bir alanın, css yazdığımızda css dosyalarımızla ilgili stillere ulaşabileceğimiz bir alanın, ayrıca propertiesin de bulunduğu bir alandır. Burada kullanılan menülerin konumunu değiştirebilir istersek kaldırabilir istersek daha farklı menülerde ekleyebiliriz.


Bu kısım ise bizim DreamWeaver da ne olarak çalışacağımızı seçtiğimiz alan. Seçimimize göre arayüzün tasarımını değiştirecektir. 

İşte Dream Weaver kabaca böyleydi. Umarım az çok fikir sahibi olabilmişinizdir diyeyim ve bu yazımada son vereyim. Herkese kolaylıklar. Vesselam. 


KONUNUN YAZARI NCFKR
DİĞER KONU ANLATIMLARI İÇİN TIKLA VE ÖĞREN

Yorumlar