Yazar: | Kategori: Genel
Yorum: 9

Webmasterlerin çoğu, site yapımı için Dreamweaver’i tercih eder. Bunun sebebi çok özelliği olması, tek başına yapabileceği çok şey olması ve web sitesi yapmak için kullanılan Adobe firmasının diğer programları ile uyumlu çalışmasıdır. Bu nedenle html editör dendiğinde akla gelen ilk program genellikle Dreamweaver olur. Bu, Dreamweaver’in rakiplerine oranla daha çok tercih edilmesini sağlar ancak bu kadar çok özelliği ve yeteneği olan bir program bir çok ayar gerektirdiğinden ve araç içerdiğinden çoğu kullanıcıya göre kullanımı zor veya karmaşık gelmektedir. Ben de ilk başta Frontpage ile başladığım site yapımına tavsiyeler üzerine Dreamweaver ile devam etmeye karar verdim. Öğrenmeye başladığım sıralarda yaşadığım zorlukların artık hiç birini yaşamıyorum. Ben de size Dreamweaver kullanmanızı tavsiye ederim. Lafı uzatmadan Dreamweaver ile sitemizi nasıl oluşturacağız beraber bakalım. icon smile Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Dreamweaver’in çalışma alanı görünümü aşağıdaki gibidir. Lütfen resmi inceleyin.

dreamweaver Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Aşağıda gördüğünüz şablonu kullanarak fıkralar ve komik resimler içeren bir web sitesi açacağım. Site yapımına başlamadan önce web siteme ekleyeceğim fıkraları ve komik resimleri hazırladım. Anasayfaya bir fıkra ve bir komik resim ekleyip altına fıkralar ve komik resimler sayfalarına giden linkler ekleyeceğim. Şablonun solundaki bölüme site sayfalarına giden linkleri sağındaki bölüme ise reklam kodlarını ekleyeceğim.

 Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Şimdi bu şablonu kullanarak sitemizi hazırlayalım. (Sayfanın sağındaki şablonlar bağlantısını kullanarak yüzlerce şablon içerisinden seçtiğim hazır site şablonlarını indirebilir, beğendiğiniz bir tanesini kullanarak sitenizi oluşturabilirsiniz.) Şablonun içerisinde olduğu klasörü kopyalayıp C diskine yapıştırıyorum ve klasöre “Site” adını veriyorum. Bu klasör “kök klasör” olarak adlandırılır.(1) Kök klasörün içinde index.html dosyası ve images klasörü bulunur. (2) Sitemizi oluşturup yeni sayfalar oluşturdukça bu sayfaları kök klasöre, sitemizde kullanacağımız resimleri de images klasörüne koyacağız.

asa Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

1.Sitemizi Dreamweaver’e tanıtalım.

Web sitemizin sorunsuz çalışması için sitemizi Dreamweaver’e tanıtmamız gerekir. Site>New Site>Advanced yolunu izleyelim ve aşağıdaki resimde gördüğünüz gibi ilk satıra sitenizin adını, ikinci satıra da sitenizin kök klasörünü, son olarak üçüncü satıra ise kök klasörünüzün içinde bulunan images klasörünü yazın ve Ok’a basın. Böylece sitemizi Dreamweaver’e tanıtmış olduk.

asa2 Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

2. Türkçe Karakter Ayarını Yapalım

Şimdi Dreamweaver’in Türkçe karakterleri sorunsuz göstermesi için gereken ayarları yapalım.

Ana menü yardımıyla Edit>Preferences>New Document>Default Encoding>Türkçe(Windows) seçip Ok butonuna tıklayarak işlemi tamamlayalım.

asa1 Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Yaptığımız son işlemle ç,ş,ö gibi Türkçe karakterlerin sitemizde sorunsuz görünmesini sağladık. Şimdi şablonumuzu açalım ve sitemizdi oluşturmaya başlayalım.

File>Open yolunu izleyerek (veya files panelindeki index.html’ye çift tıklayarak) index.html dosyasını açalım.

Web sayfalarının uzantısı html dir. Örneğin müzik dosyalarının uzantısı genellikle Mp3, resim dosyalarının uzantısı genellikle jpeg olur. Web sayfalarının uzantısı da genellikle html veya htm olur. Hazırlayacağımız her sayfanın sonuna .html ekleyeceğiz. Örn: fikralar.html

index.html dosyasını anasayfanız olarak tasarlayın ve sayfa adını değiştirmeyin. Çünkü bir siteye girdiğinizde, tarayıcınız size o sitenin index.html sayfasını gösterir. Örneğin Internet Explorer’de www.siteadi.com yazarsanız tarayıcınız www.siteadi.com/index.html adresini açar. Daha sonra oluşturacağınız sayfalarınız için farklı isimler yazacaksınız örneğin: sayfaadi.html gibi… Oluşturduğunuz sayfalara isim verirken veya site içerisinde kullandığınız resimlerin adlarında Türkçe karakter veya boşluk kullanmamaya dikkat edin. Örneğin ödev.html isimli bir sayfa yaparsanız bu sayfa görüntülenemez.

3. Tabloları Kullanmak

Daha önce de belirttiğim gibi hazırladığımız sayfalar html formatındadır. Html dilinde her satıra sadece bir içerik ekleyebilirsiniz. Ekleyeceğiniz iki farklı içerik hataya sebep olabilir. Örneğin bir satıra hem yazı hem resim ekleyemezsiniz. Eklemek istediğinizde aşağıdaki resimde görülen problem ile karşılaşırsınız.

hata Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Bu problemi aşmak için bir bir satıra resim ve yazı eklemek yerine, bir tane tablo ekleyeceğim. Ama bu tablonun iki tane sütunu olacak. Tablonun sol sütununa resmi, sağ sütununa ise yazıyı ekleyeceğim. Bu yöntemle bir satıra sadece bir tablo ekleyerek hem resim hem yazıyı yanyana koyabileceğim.

hata2 Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Yukarıda gördüğünüz gibi tablo kullanarak resim ile yazıyı yanyana ekleyebildim. Bu örnekte tablonun görülebilmesi için çerçevelerin kalınlığını artırdım ve rengini beyaz yaptım. Siz çerçeve kalınlığını sıfır yaparak tabloları gizleyebilirsiniz. Sayfaların sorunsuz çalışması için tabloları kullanmalısınız. Çoğu web sitesi tablolar üzerine kuruludur. Bu sitelerde sayfa görünümü ile ilgili hatalar en az seviyededir. Örneğin tablolar üzerine kurulmamış bir site, farklı çözünürlük ayarlarına sahip bilgisayarlarda sorun yaratabilir. Örn: resimlerle yazıların iç içe geçmesi gibi..

Ekleme menüsünü (veya Insert>Table yolunu) kullanarak tablo ekleyebilirsiniz. Tablo eklemek istediğinizde açılan sayfadan tablodaki satır sayısını, sütun sayısını ve benzeri diğer özellikleri ekleyebilirsiniz.

tablo Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Fare yardımı ile eklediğiniz tablonun uzunluk ve genişliğini ayarlayabilirsiniz. Ayrıca eklediğiniz tablonun üzerine tıkladığınızda özellikler panelinde tablonun özellikleri çıkacaktır. Buradan da değişikler yapabilir, tabloyu yeniden düzenleyebilirsiniz.

4. İçerik Ekleyelim

index.html sayfasını yani sitemizin anasayfasını açtık. Şimdi şablondaki yazıları silelim ve yerine bir tane fıkra ekleyelim. Fare ile yazıları seçerek ve klavyenizdeki Delete tuşunu kullanarak yazıları silebilirsiniz. Yazarak veya kopyala yapıştır yöntemi ile fıkrayı anasayfaya yazıyorum. (Resmi orjinal boyutunda görmek için üzerine tıklayın.)

dw2t Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Çalışmalarınızı kaydetmek için File>Save butonuna tıklayın.Yaptığınız değişiklikleri F12′ye basarak kaydedebilir ve görüntüleyebilirsiniz.

5. Resim Ekleyelim

Fıkranın hemen altına bir tane komik resim ekleyelim. Ekleyeceğimiz resmi sitemizin kök klasörü içindeki images klasörüne koymamız gerekiyor. Aksi halde bilgisayarımızda sitemizi açtığımızda resim görünür ama sunucuya gönderdiğimizde görünmez. Sitemizin sorunsuz çalışması için eklediğimiz her video, resim flash vb. kök klasör içerisinde olması gerekir.

Resim eklemeden önce fıkralar ve komik resimler bölümünü ayıralım. Eklediğimiz fıkranın sonuna fare ile 1 kere tıklayalım ve Insert>HTML>Horizontal Rule yolunu izleyelim. Böylece fıkradan sonra yatay bir çizgi ile sayfayı bölmüş olduk.

Şimdi resim eklemek istediğimiz yere fare ile tıklayalım. Insert>Image yolunu izleyelim (Aynı işlemi aşağıdaki resimde işaretli olan butona tıklayarak veya Ctrl+Alt+ I tuşlarına basarak da yapabilirsiniz.) ve eklemek istediğimiz resmi seçip OK butonuna tıklayalım. (Resmin üstüne tıklayarak orjinal boyutuna ve detaylı anlatımıyla ulaşabilirsiniz.)

res21 Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

res1 Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Sayfalarınıza video veya flash eklemek için benzer yöntemi kullanabilirsiniz. Ancak Insert’e tıkladıktan sonra Image yerine Media’ya tıklamanız gerekiyor.

6. Farklı Sayfalar Oluşturup Bağlantılarını Yapalım

Anasayfamızı oluşturduk. Şimdi farklı sayfalar oluşturalım ve ziyaretçilerin bir sayfadan diğerine gidebilmeleri için bağlantılar (linkler) ekleyelim. Fıkralar ve resimler ekleyeceğimiz sayfalar oluşturalım. Kolaylık olması amacıyla index.html dosyasını farklı bir isimle kaydedip tekrar düzenleyeceğiz. index.html dosyası açıkken File>Save as.. yolunu izleyerek fikralar.html yazıp Save butonuna basalım. Böylece görünümü index.html ile aynı ancak adı fikralar.html olan ikinci bir sayfa elde ettik. (Aynı işlemi kök klasörünüzdeki index.html dosyasını kopyalayıp tekrar aynı yere yapıştırarak ve adını fikralar.html olarak değiştirerek de yapabilirsiniz.)

Şimdi fikralar.html sayfasını açalım ve anasayfamız için yazdıklarımızı silip yerine yayınlayacağımız fıkraları ekleyelim. Böylece sayfayı baştan inşa etmek yerine index.html dosyasında birkaç değişiklik yaparak Fıkralar sayfasını oluşturmuş olacağız.

fikra1 Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Sayfamıza fıkraları ekleyip kaydediyoruz. Aynı yöntemle komik resimler sayfasını da oluşturdum. Bunun gibi komik haberler, komik olaylar gibi sayfalar oluşturarak da sitemi zenginleştirebiliriz. Şimdi sayfalarımızı birbirine bağlayalım. index.html yi açıp soldaki link menüsüne sayfa isimlerimizi yazıp link (bağlantı, köPrü) ekleyelim. Hazırladığımız sitede üç tane sayfa var. Anasayfa, Fıkralar ve Komik Resimler. Bu üç sayfayı şablonun sol bölümündeki Menü yazısının hemen altına yazıyorum ve fazlalıkları siliyorum.

menu Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Sitemiz için menü oluşturduk. Şimdi bu menüye link ekleyelim. Yapmamız gerekenler sırasıyla:
1. Soldaki menüden link vermek istediğiniz sayfanın adına çift tıklıyoruz.
2. Klasör simgesine tıklıyoruz ve sayfalarımızın listesi açılıyor.
3. Açılan pencereden link vermek istediğiniz sayfayı seçiyoruz.
4. Ok’a basıyoruz ve çalışmanızı kaydediyoruz. Bu işlemi tekrarlayarak Fıkralar ve Resimler sayfaları için de link ekledim. Böylece Anasayfadan Fıkralar ve Komik Resimler sayfasına açılan bir kapımız oldu.

linking1 Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Yalnız Fıkralar veya Komik Resimler sayfasına giden bir ziyaretçinin tekrar anasayfaya dönmesi mümkün değil. Çünkü diğer sayfalarda link eklemedik. Aynı yöntemle diğer sayfalarda da link eklememiz gerekiyor. Daha kısa olan yöntem ise oluşturduğumuz menünün tamamını kopyalayıp diğer sayfalarda aynı bölüme yapıştırmak. index.html yi açalım ve menüdeki Anasayfa yazısı üzerine seri şekilde üç defa tıklayalım. Tüm yazılar seçili haldeyken fare ile üzerine sağ tıklayıp Copy seçeneğine tıklayalım. Şimdi Fıkralar sayfasını açıp sol bölümdeki Menu ve link yazılarını temizleyelim. Sağ tıklayarak Paste seçeneğine tıklayalım. Böylece daha önce index.html için oluşturduğumuz menüyü Fıkralar sayfasına kopyalamış olduk ve tek tek link eklememize gerek kalmadı. Aynı işlemi Komik Resimler sayfası için de tekrarlayarak sayfaların birbiri ile bağlantısını tamamlıyoruz ve sitemiz yayına hazır hale geliyor.

lkn Dreamweaver kullanmak, resimli anlatım, temel bilgiler, dreamweaver ile site yapmak, dreamweaver nasıl kullanılır? ne işe yarar

Dreamweaver bölümünün son sözleri:

Tabiki Dreamweaver’in yapabilecekleri bunlarla sınırlı değil. Programın içinde yüzlerce sayfalık yardım kitabı var ancak tamamına burada veya başka bir sitede değinilmesi mümkün değil. Zamanla programların yeteneklerini keşfederek veya kullanmayı bilenlerden yardım alarak seviyenizi ilerletebilir daha iyi siteler kurabilirsiniz. bedavasiteyapmak.com’u oluşturmak için bu bilgiler dışında sadece bir resim düzenleyici program ve bir flash programı kullanmak yeterli oldu.

Artık site açmak için yapmamız gereken tek şey sitemizi internetteki bir sunucuya (hosting hesabına) göndermek. Böylece siteniz ziyarete açılmış olacak. Sayfalarınızda yaptığınız değişikliklerin ziyaretçilere yansıması için değişiklik yaptığınız sayfayı tekrar sunucuya göndermeniz gerektiğini hatırlatırım. Şimdi bedava hosting veren firmalardan birine üye olalım ve sitemizi sunucuya yollayalım.

11 Temmuz 2007
Yazar: | Kategori: Genel
Yorum: 2

Dreamweaver CS3, kod karmaşasına girmeden web siteleri tasarımı, geliştirimi ve güncellemsi işleriniz için kolay ve etkileyici araçlarla donatılmıştır. Görsel arayüzü, streamlined kodlama ortamı ve Adobe Photoshop CS3, Fireworks CS3, Flash CS3 Professional, Contribute CS3, Adobe Bridge CS3 araçları ile güçlü entegrasyonu, Dreamweaver ile çalışma isteğinizi arttıracak yeni özelliklerinden bazıları. Uygulamamalarınızda dünya standartlarını ve üst seviyede kullanıcı deneyimini yakalamak; dinamik kullanıcı arayüzleri yaratmak için önceden hazırlanmış widget’ları ve Spry framework’ü Dreamweaver CS3 ile kullanabileceksiniz.

“Browser Compatibility Check” (tarayıcı uyumluluğu kontrolü) ile hazırladığınız sitelerin farklı işletim sistemleri ve tarayıcılar ile de uyumluluğunu test edebileceksiniz. Adobe CSS Advisor topluluğu ile de yaşadığınız problemler ya da öğrenme aşamasında destek almak amacıyla iletişime geçebilirsiniz.

“Spry for Ajax” etkileşimli web uygulamaları hazırlamak için geliştirilmiş yeni bir teknolojidir. Ajax, kullanıcının etkileşime girdiği her nesnede web sayfasının yeniden yüklenmesine gerek olmadan, cevap almasına olanak sağlar. Bu da web sayfanızın etkileşim özelliğini, hızını ve kullanışlılığını ve beğenilirliğini arttırır. Spry; Ajax için geliştirilmiş diğer framework’lerin aksine HTML konusunda kendisini daha rahat hisseden tasarımcılar düşünülerek geliştirilmiştir. Bu sayede JavaScript ile boğuşmak zorunda kalmayacaksınız. Dreamweaver CS3 ile gelen Spry Widget’ları, önceden hazırlanmış bileşenleridir. CSS yardımıyla çok kolay kişiselleştirilebiliyorlar. Aşağıda bir kaç örnek arayüzü inceleyebilirsiniz;
Spry data widgets / Spry form validation widgets / Spry user interface widgets
clip image001 Dreamweaver Cs3 Final
Spry efektlerini kullanarak, web sayfanızda yer alan nerdeyse bütün elementlere görsel geçiş ve animasyon efectleri ekleyebileceksiniz.

CSS tabanlı web tasarım ve layout’lar hazırlamak için artık güçlü bir aracınız var. Dreamweaver ile entegre gelen CSS layout’lar, kullanıcılarına tamamen CSS tabanlı web siteleri tasarlamak için hızlı bir başlangıç niteliğinde. Layout’larından bir tanesini seçip, ihtiyaçlarınızı karşılayacak yeni bir tasarıma dönüştürün. Ayrıca layout dosyaları anlaşılır olması adına detaylı ve geniş komentlerle desteklenmiş. Ayrıca CSS paneli, içeriğe uyguladığınız stili, satırlarca yazılmış kod içerisinde boğuşmadan kolayca bulmanıza ve değiştirmenize olanak sağlıyor.

Photoshop CS3 Extended ‘de hazırladığınız bir tasarımı basitçe kopyalayıp, Dreamweaver içerisine yapıştırabilecek ve optimizasyon seçenekleri ile oynayabileceksiniz. Tasarımı düzenlemek mi gerekti; çift tıklayarak orjinal PSD dosyasının Photoshop içerisinde düzenlenmek üzere açılmasını sağlayabileceksiniz. Fireworks CS3′ün hızlı modelleme özelliği ile Dreamweaver’ın mükemmel uyumu, hiç Fireworks kullanmamış olanları dahi öğrenmeye kışkırtacak nitelikte. Dreamweaver ve Contribute CS3 templateleri arasındaki ortak çalışma ise hiç bu kadar mükemmel olmamıştı. Adobe Bridge CS3 ile Dreamweaver üzerinden hazırladığınız sayfanın imaj, video gibi nesnelerini çok kolay organize edebileceksiniz.
clip image002 0000 Dreamweaver Cs3 Final
Dreamweaver CS3, Section 508, WCAG Priority 2, IPv6 gibi internet ve erişilebilirlik protokol ve standartlarını destekliyor.

Arayüzü, streamlined kodlama ortamı ve Adobe Photoshop CS3, Fireworks CS3, Flash CS3 Professional, Contribute CS3, Adobe Bridge CS3 araçları ile güçlü entegrasyonu, Dreamweaver ile çalışma isteğinizi arttıracak yeni özelliklerinden bazıları. Şimdi bu özelliklerden bazıları için, adobe.com’da yayınlanan tanıtıcı eğitim videosunu hep birlikte izleyelim.
Dreamweaver CS3 – Tanıtım ve Egitim Video
Home – www.adobe.com
Download Adobe Dreamweaver CS3 – FINAL – 285 Mb

Download:

Resmi sitesine bakınız;

http://www.adobe.com/products/dreamweaver/

Yukarı
Yazilar iin RSS aboneligi