Varolan bir web sitesini Dreamweaver'da düzenleme

Özgün siteyi oluşturmak için Dreamweaver kullanmamış olsanız bile, Dreamweaver uygulamasını, varolan bir uzak bir siteyi (veya uzak sitenin herhangi bir kolunu) yerel diskinize kopyalamak ve orada düzenlemek için kullanabilirsiniz.

1 Varolan siteyi içerecek bir yerel klasör oluşturun ve bu klasörü sitenin yerel klasörü olarak ayarlayın.
Not: Varolan uzak sitenin ilgili kolunun yapısının tamamını yerel olarak çoğaltmanız gerekir.
2 Varolan siteye ilişkin uzaktan erişim bilgilerini kullanarak uzak bir klasör kurun. Dosyaları düzenlemek için önce bilgisayarınıza yüklemeniz gerektiğinden uzak siteye bağlanmalısınız.

Dreamweaver Test sunucusu kurma

Dinamik sayfalar geliştirmeyi düşünüyorsanız, Dreamweaver uygulaması siz çalışırken dinamik içerik oluşturmak ve görüntülemek için bir test sunucusunun hizmetlerine gerek duyar. Test sunucusu yerel bilgisayarınızda, geliştirme sunucusunda, aşamalandırma sunucusunda veya üretim sunucusunda olabilir.Test sunucusu klasörü kurmadan önce yerel ve uzak klasörleri tanımlamalısınız. Uzak klasöre yerleştirilen dinamik sayfalar normalde bir uygulama sunucusu tarafından işlenebileceğinden, test sunucunuz için çoğu zaman uzak klasörünüzün ayarlarını kullanabilirsiniz.

Photoshop Köşeli Tablo Yapımı

Daha önce photoshop’ta oval tablo yapımını anlatmıştık.Bu yapacağımız çalışmada oval tabloya benzer bir çalışma olacak.Photoshop’ta boş bir 800x600 boş bir belge açıyoruz.Bu belgede sol tarafdaki araç kutusundan Rectangle Tool’u seçiyoruz.Foreground (Birincil Rengi) color rengini belirliyoruz.Yeni bir layer açıp belgede istediğimiz gibi bir şekil çiziyoruz.Şekili çizdikten sonra bu katmanın kopyasını alıyoruz (Ctrl + j).Daha sonra foreground color rengini değiştirip shift + alt + backspace tıklıyoruz.Bir alttaki katmana gelip Filter/Blur/Gaussion Blur tıklayıp bir değer giriyoruz ok tıkladıktan sonra tablonun şekillendiğini göreceksiniz.Köşeli Tablo Hazır.

Dreamweaver CSS Blok Özellikleri

CSS Kuralı Tanımlaması iletişim kutusundaki Blok kategorisini, etiketler ve özelliklerin aralık ve hizalama ayarlarını tanımlamak için kullanırsınız.

1 CSS Stilleri panelini (açık değilse) açın (Üstkarakter+F11)

2 CSS Stilleri panelinin en üst bölmesinde, varolan bir kuralı veya özelliği çift tıklatın.

3 CSS Kuralı Tanımlaması iletişim kutusunda Blok'u seçin ve sonra aşağıdaki stil özelliklerinden herhangi birini ayarlayın.

Dreameraver Dosya Türleri

Dreamweaver programında istediğiniz dosya türüyle çalışabilirsiniz.Çalışacağınız birincil tür dosya HTML dosyasıdır. HTML dosyaları web sayfalarını tarayıcıda görüntüleme işlevini üstlenmiş etiket tabanlı dili içerir. HTML dosyalarını .html ya da .htm uzantısıyla kaydedebilirsiniz. Dreamweaver dosyaları varsayılan olarak .html uzantısıyla kaydeder.

Aşağıda Dreamweaver uygulamasıyla çalışırken kullanabileceğiniz diğer bazı yaygın kullanılan dosya türleri verilmiştir:

Dreamweaver Site Yönetimi

Siteleri Yönet iletişim kutusunu yeni site oluşturmak, siteyi düzenlemek, çoğaltmak, kaldırmak ya da sitenin ayarlarını içe ya da dışa aktarmak için kullanın.

1 Site > Siteleri Yönet'i seçin ve soldaki listeden bir site seçin.
2 Seçeneklerden birini işaretlemek için bir düğmeyi tıklatın ve Bitti'yi tıklatın.
Yeni Yeni site oluşturmanızı sağlar.

Dreamweaver İle Çalışmaya Başlama

Bilgisayarinizda tüm web içeriginizi kaydedeceginiz bir klasör açiniz ve bu klasörün içinde kullanim amacina uygun alt klasörler olusturunuz. (Resimleriniz için "resim" klasörü, grafik çalismalariniz için "grafik" klasörü gibi). Ancak klasör ve dosya isimlerini verirken kesinlikle Türkçe karakterler (i, ç, g, s, ö, ü) kullanmayiniz. Çünkü Türkçe karakterler web tarayicilarinin dosyanizi görmemesine neden olacaktir. Ziyaretçilerinizin "url" adresinizle görecekleri ilk sayfa yani ana sayfanizin ismi "index.html" olmalidir. Ana sayfanizdan ulasilabilecek diger sayfalariniza kisa ve anlasilabilir isimler vermeniz, istediginize ulasirken size yardimci olacaktir.

Web Site Tasarımına Nasıl Başlanmalı

Web sitesinin tasarimina baslamadan önce site içerisinde kullanacaginiz dokümanlari olusturmaniz gerekiyor. Web sayfalari içerisinde kullanacaginiz ses, resim, film ve metin dosyalarini önceden hazirlamaniz hatta hangi dosyayi hangi sayfada kullanacaginizi kagit üzerinde tasarlamaniz, sitenin olusturulmasi esnasinda size isik tutacaktir.Ziyaretçi kitlesini ve bu kitleye yapacaginiz hitap metinlerini de uygun bir sekilde hazirlamaniz, sitenin ziyaretçi oranini arttiracaktir.Web için kullanilan materyallerden site içerisine yazilan dil ve üsluba kadar herseyden site tasarimcisi sorumlu olacaktir. Bu yüzden site olusturulurken toplumun sosyal ve kültürel özellikleri göz önünde tutulmali, hiçbir zaman hukuk ve demokrasi ile çakisan ifadeler kullanilmamalidir. Site içerisinde kullanilan materyaller eger bir baska yerden alinti ise kesinlikle alinan yerden izin alinmali yada materyalin serbest kullanilip kullanilmayacagi arastirilmalidir.Aksi halde telif yasalarina göre suçlu duruma düsebilirsiniz.

Photoshop Neon Yazı Yazma Efekti

Photoshop’ta yeni bir belge açıyouz.Siyah renkle yazıyı yazıyoruz layer/flatten image tıklıyoruz.İmage/adjustment/invert tıklıyoruz.Arkaplan renginin siyah olduğunu görüceksiniz sonra fitler/blur/gaussion blur seçeneğini seçip 2.0 gibi bir değer veriyoruz.Sonra fitler/stylize/solarize tıklıyoruz.İmage/adjustment/levels ayarlıyoruz.En son image/adjustment/hue-saturation ile renk seçip çalışmayı bitiriyoruz.

Photoshop Yazının İçine Resim Yerleştirme

Photoshop’a gelip boş bir belge açıyoruz.Bu belgede istediğimiz bir biçimde yazımızı yazıyoruz.Daha sonra yazının içine yerleştirmek istediğimiz resmi başka bir sayfada açıyoruz.Move tool ile resmi yazının olduğu sayfaya getirip yazının üzerine gelecek şekilde bırakıyoruz.Resim layerinin üzerine sağ tıklayıp create clipping mask seçeneği seçilir.Resim yazının içine gelir.

Photoshop Korku Filmi Efekti

Korku filmi efektini vermek istediğimiz resmi photoshop programında açıyoruz.Layer(katman) üzerinde sağ tıklayıp duplicate layer diyerek layerin kopyasını alıyoruz.Kopyalanan layeri image/adjustment/desature diyerek siyah beyaz yapıyoruz.Tekrar image/adjustment/brightness-contrast tıklayıp contrast değerine 70 gibi bir değer veriyoruz.Yine bu layerin üzerindeyken image/adjustment/hue-saturation tıkayıp colorize düğmesini tıklıyoruz ve kırmızı gibi değer veriyoruz çalışmamızı tamamlıyoruz.

Photoshop Dönen Işık Efekti Yapımı

Bu ışık efekti yapımı için ilk önce boş bir belge açıyoruz.Foreground rengini siyah olarak ayarlıyoruz.Granident tool seçip shift tuşu ile beraber sayfada uzun bir çizgi çiziyoruz.Daha sonra filter menüsünden Distort/Wawe seçiyoruz type menüsünden square’yi işaretliyoruz ve ok tıklıyoruz.Tekrar fitler menüsünden distort/polar coordinates tıklıyoruz açılan pencerede rectangular to polar seçilip ok tıklanır.Bu adımdan sonra layeri kopyalıyoruz.Kopyalanan layerin üzerine gelip image menüsünden adjustment/hue –saturation (ctrl +alt +u)tıklayıp gelen pencerede Hue:220 Saturation:100 değerlerini girip ok tıklıyoruz.Orjinal layere(katman) gelip yine adjustment/hue –saturation penceresinde Hue:0 Saturation:100 yazıp ok tıklanır.Orjinal layerin üzerine gelip Filter/dissort/Twirl Angle tıklanır ve değeri +150 olarak belirlenir ok tıklanır.Kopyalanan layere gelip edit/transform/filip horizontal tıklanır daha sonra fitler/dissort/Twirl Angle tıklanır değer -150 olarak girilir ok tıklanır.Kopyalanan layerin modu difference yapılır ve dönen ışık efekti tamamlanır.

Oval Tabloyu Siteye Taşıma

Photoshop’ta slice tool ile parçalara ayırdığımız oval tabloyu Save For Web seçeneği seçilerek bütün parçalar seçilir ve png 24 olarak html and images seçilerek kaydedilir.Html dosyası dreamweaver’da açıp bütün parçaları background resmi olarak tanımlıyoruz.Sitemiz içinde hangi hücreye kaç tane oval tablo yerleştireceksek hücreyi bölüyoruz.Oval tablonun olduğu html sayfasına gelip tabloyu seçtikten sonra ctrl + c kopyalıyoruz.Sitede istediğiz yere yapıştırıyoruz.Boyutlarını ayarladıktan sonra oval tabloya istediğimiz içeriği verebiliriz.

Dreamweaver oluşturulan Tabloyu Biçimlendirme

Tabloyu sayfaya ekledikten sonra tablo ile ilgili ayarları yapmak için alt taraftaki properties (Properties İnspector) paneline iniyoruz.Burada tablo ile ilgili istediğiniz bütün ayarları (satır sayısı,kolon sayısı,genişlik,yükseklik,kalınlık) yapmak mümkün.

• Table Id: Tablonun adı
• Rows: Satır sayısı.
• Cols: Kolon sayısı
  

Dreamweaver Tablo Oluşturma

Dreamweaver’da yeni bir tablo hazırlamak için İnsert Panelindeki table seçeneği seçilir bu işlemin kısayol tuşu (ctrl + alt + T).Karşımıza tablo ile ilgili özelliklerin olduğu bir pencere gelecek bu pencerede tablonun kaç satır kaç sütun olduğu genişliğinin ne kadar olduğu vb. ile ilgili bilgiler girilir.Ok tıklanır belirlediğimiz özellilerde tablo ekrana gelir.Bu tabloda satırların yüksekliğini ve genişliğini alt taraftaki properties panelinde W - H kısmından ayarlayabiliriz.

HTML ile ASP Arasındaki Farklar

-HTML uzantılı dosyaları çalıştırmak için web sunucusu gerekmez.


-ASP dosyaları için web sunucusu gerekir.

-ASP ile kullanıcı etkileşimli dinamik sayfalar yapmak mümkündür.

-HTML’de sayfaya kullanıcı etki edemez, statik(durağan) sayfalardır.

-Tarayıcı HTML bir dosya istediğinde server hiç işlem yapmadan dosyayı istemciye yollar.

-Tasayıcı ASP bir dosya istediğinde ISS bu isteği ASP derleyiciye gönderir.ASP derleyici bütün dosyayı okur ve ASP kodlarını oluşturur.Sonuçta işlenen bu ASP kodlarını istemciye HTML olarak gönderir.

Web Tasarım Reklam Boyutu Standartları

Reklam standartları; Reklam verenlerin, Reklam Yayıncıların ve Ajanslarının, İnternet’i daha verimli bir araç haline getirmelerine olanak sağlıyan olan kurallardır. Reklam standartları olmadığı zaman, reklam verenler,reklam yayıncıları ve ajanslar arasında bir karışıklık olmaktadır. Bu yüzden Interactive Advertising Bureau yılardır bu konunun üzerine eğilerek, en azından Display reklamlar konusunda belli standartlar getirmeye çalışmışlardır.Dünyanın bir anda reklam devi olan google’da bu stadartlara uyuyor gözüküyor.Reklam vermek isteyen site sahibi mutlaka bu standartlara uyarak reklamını oluşturmalı ve bu standartlar çerçevesinde reklamını yayınlamalıdır.

Arama Motorlarının Çalışması

İnternet ağında iki tür arama motoru vardır.Bunlar Crawlerlar ve Dizinlerdir.Bunların çalışma prensibi birbirinden çok farklıdır.Crawler programlar ile siteler hakkında bilgi toplaken,dizinler insanlar aracılığı ile sitelerdeki bilgi kaydeder.Crawlerlar siteyi düzenli ziyaret ettiği için değişiklerden haberdar olur ve eski bilgiyi yenisi ile değiştirir.Dizinler ise değişikliklerden haberdar olmayabilir.

  -Crawler=Google,Yahoo

  -Dizin    =Dmoz.org

Dreamweaver Sitede H1,H2,H3… Belirleme

Dreamweaver’da CSS sayfasına gelip New CSS Rule tıklanır.Gelen sayfada tag menüsünden istenilen özellik (h1,h2,h3,h4,h5,h6) girilir.Açılan sayfada hangi değerleri vermek istiyorsak,font özellikleri,yazı tipi,background rengi ve resmi vb. özellikler girilerek ok tıklanır.Daha sonra sitenin olduğu sayfaya gelerek hangi yazılara h1,h2,h3… vermek istiyorsak yazı seçilir alt tarafdaki Format menüsünden Heading 1,2,3 seçilir.Kolay gelsin.

Dreamweaver CSS İle Sitenin Üstteki Boşluğunu Silme

Dreamweaver’da sayfanın en üst boşluğunu gidermek için CSS sayfasını açıyoruz.Sitenin olduğu sayfa ile CSS’i bağlıyoruz.CSS sayfasına gelip New CSS Rule ardından tag menüsü işaretlenir alttaki taglardan body seçilir ok tıklanır.Gelen sayfada soldaki kategorilerden box ardından margin/top değeri 0 olarak girilir ok tıklanır.CSS sayfası kaydedilir ve üst tarafdaki boşluk giderilir.Kolay gelsin.

Dreamweaver ASP Sayfaları Açma Görüntüleme

Denetim masasında/programlar/Windows özelliklerini aç veya kapat seçenekleri seçilir.İnternet İnformation Services sekmesinin altındaki bütün kutular işaretlenir tamam tıklandığı zaman bilgisayarımda sistemin kurulu olduğu bölümün içine “ınetpub” adında bir klasör gelir.Bu ınetput klasörünün içindeki wwwroot klasörüne özellikler/güvenlik sekmesinden tam yetki vermeniz gerekir.Buraya kadar olduysa internet tarayıcıya gelip localhost yazınca IIS şablobu geliyorsa oldu demektir.Daha sonra dreamweaver’a gelip tasarladığımız siteyi site/new site diyerek kaydediyoruz.Tarayıcıya gelip localhost/sayfa ismi yazınca asp sayfalarının açıldığını görüceksiniz.Kolay gelsin.

Photoshop’ta Yapılan Oval Tabloyu Dreamweaver’da Açma

Photoshop’ta tasarladığımız oval tabloyu kaydederken “PNG” ve“html and images” olarak kaydediyoruz.Daha sonra dreamweaver’ı çalıştırarak open menüsünden oval tabloyu kaydettiğimiz klasörün içinden html dosyasını seçiyoruz tablo dreamweaver’a geliyor.Bu oval tablonun boyutlarını değiştirmek istiyorsak images parçalarını background olarak ayarlamamız lazım.Bunun için sırasıyla bütün parçaları tek tek silip alt tarafdaki bg menüsünde background ayarlıyoruz.Daha sonra Split ekranına gelip oval tablonun köşedeki parçalarının boşluklarını siliyoruz.Ve istediğimiz boyda ve genişlikte uzayabilen oval tablomuz hazır.Kolay gelsin.