Web sayfalarınızda görüntü ekleme, düzenleme ve yeniden boyutlandırma
Dreamweaver'da görüntü ekleme ve düzenleme
Dreamweaver'da görüntüleri düzenleme
Rollover görüntüsü oluşturma
Harici görüntü düzenleyici kullanma
Görüntülere davranışlar uygulama
Dreamweaver'da görüntüleri eklemeyi, düzenlemeyi, değiştirmeyi ve yeniden boyutlandırmayı öğrenin.
Görüntüler, site ziyaretçileri için daha fazla bağlam sağlayarak web sitesinin birleşik bir parçasını oluşturur. Birçok farklı grafik dosyası formatı vardır ancak web sayfalarında yaygın olarak GIF, JPEG ve PNG dosya formatları kullanılır. GIF ve JPEG dosya formatları web sayfalarıyla uyumludur ve çoğu tarayıcıda görüntülenebilen formatlardır. Aşağıdaki metinde bu dosya formatları hakkında daha fazla bilgi bulunmaktadır:
GIF (Graphic Interchange Format) - GIF dosyaları en fazla 256 renk kullanır ve sürekli olmayan görüntüleri göstermek için en uygun formattır. GIF dosyaları gezinme çubukları, düğmeler, simgeler, logolar veya tek renk ya da ton kullanan diğer görüntüler gibi düz renkli geniş alan kullanan görüntüleri göstermek için en uygun formattır.
JPEG (Joint Photographic Experts Group) - JPEG dosya formatı milyonlarca renk içerdiğinden fotoğraf veya sürekli olmayan tonlu görüntüler için en iyi formattır. JPEG dosyasının kalitesi arttıkça, dosya boyutu ve dosya indirme süresi de artar. JPEG dosyasını sıkıştırarak görüntü kalitesi ile dosya boyutu arasında iyi bir denge kurabilirsiniz.
PNG (Portable Network Group) - PNG dosya formatı dizinlenmiş renk, gri tonlama, gerçek renkli görüntüler ve saydamlık için alfa kanalı desteği içeren GIF'lerin yerine kullanılan patentsiz dosya formatıdır. PNG dosyaları orijinal katmanı, vektörü, rengi ve alt gölge gibi efekt bilgilerini korur. Ayrıca tüm öğeler her zaman tamamen düzenlenebilir. Dosyaların Dreamweaver tarafından PNG dosyası olarak tanınması için .png dosya adı uzantısına sahip olması gerekir.
Dreamweaver bir WYSIWYG (What you see is what you get) düzenleyicisi değildir. Bir başka deyişle, Dreamweaver ile görüntü ekleyebilirsiniz ancak arabirimi kullanarak görüntüleri taşıyamaz veya konumlandıramazsınız.
Görüntülerinizi mizanpajınıza taşımak için HTML içeriğinizi istediğiniz şekilde görüntüleyen CSS kullanmanız gerekir. Kod kullanarak görüntülerle nasıl çalışacağınızı öğrenmek için HTML ve CSS hakkında temel eğitimlere başvurabilirsiniz. Ayrıca Dreamweaver'da görüntülerle çalışma hakkındaki eğitimi görüntüleyebilirsiniz.
Dreamweaver uygulamasıyla görüntüleri eklemeyi ve kullanmayı öğrenmek için aşağıdaki bölümlere bakın.
Dreamweaver belgesine görüntü eklediğinizde, HTML kaynak kodunda görüntü dosyasına referans üretilir. Bu referansın doğru olduğundan emin olmak için görüntü dosyası geçerli sitede olmalıdır. Görüntü geçerli sitede değilse Dreamweaver dosyayı siteye kopyalamak isteyip istemediğinizi sorar.
Dreamweaver dinamik olarak görüntü eklemenizi de sağlar. Dinamik görüntüler, sürekli değişen görüntülerdir. Örneğin, olası bant reklamlar listesinden rastgele bir bant reklam seçen bant reklam dönüş sistemleri. Sistem, bir sayfa istendiğinde seçili bant reklam görüntüsünü dinamik olarak görüntüler.
Canlı Kılavuzlar ve Öğeye Hızlı Bakış özelliklerini kullanarak, Extract panelindeki herhangi bir katmanı sürükleyip Dreamweaver'daki Canlı Görünüm'de herhangi bir yere de bırakabilirsiniz. Extract Paneli, PSD dosyalarını bu panele yükleyip daha sonra PSD dosyasındaki herhangi bir katmanı sürükleyip doğrudan Dreamweaver belgenize bırakmanızı sağlar.
Görüntüyü ekledikten sonra görme sorunu olan kullanıcıların kullandığı ekran okuyucular tarafından seçilebilecek görüntü etiketi ve erişilebilirlik niteliklerini ayarlayabilirsiniz. Bu nitelikleri HTML kodunda düzenleyebilirsiniz.
PSD kompozisyonlarınızdan görüntü ayıklama hakkında bilgi için bkz. PSD dosyalarından görüntü ayıklama.
Belge penceresinde görüntünün olmasını istediğiniz yere ekleme noktasını yerleştirin ve aşağıdakilerden birini yapın:
Ekle panelinde, açılır listeden HTML öğesini seçin. Görüntü'yü tıklatın. Simgeyi çift tıklatın veya belge penceresine (ya da kod kullanarak çalışıyorsanız Kod görünümü penceresine) sürükleyin.
Varlıklar panelinden bir görüntüyü (Pencere > Varlıklar) Belge penceresinde istenen konuma sürükleyin; ardından 3. adıma geçin.
Dosyalar panelinden, görüntüyü Belge penceresinde istediğiniz konuma sürükleyin ve ardından 3. adıma geçin.
Masaüstünden görüntüyü Belge penceresinde istediğiniz konuma sürükleyin ve ardından 3. adıma geçin.
Canlı Görünüm'de görüntüyü Extract panelinden veya Katmanlar sekmesinden sürükleyin. Canlı Kılavuzlar'a göre öğeyi başka bir öğenin üstüne, altına, sağına veya soluna bırakın. Alternatif olarak, </> simgesini tıklatıp Öğeye Hızlı Bakış'ı kullanarak öğeyi belge yapısında kesin bir noktaya bırakın.
Eklemek istediğiniz görüntüyü veya içerik kaynağını seçmek için göz atın.
Kaydedilmemiş bir belgede çalışıyorsanız, Dreamweaver görüntü dosyasına bir file:// referansı oluşturur. Belgeyi sitede herhangi bir yere kaydettiğinizde, Dreamweaver bu referansı belgeyi temel alan bir yola dönüştürür.
Görüntüleri eklediğinizde bir uzak sunucuda bulunan görüntüye olan kesin yolu kullanabilirsiniz. Diğer bir deyişle, yerel sabit sürücüde bulunmayan bir görüntü. Ancak çalışırken performans sorunlarıyla karşılaşırsanız Komutlar > Harici Dosyaları Göster seçimini kaldırarak Tasarım görünümünde görüntünün gösterilmesini devre dışı bırakabilirsiniz.
Görüntü özelliklerini ayarlama
Görüntü Özellik denetçisi görüntünün özelliklerini ayarlamanıza olanak sağlar. Görüntü özelliklerinin tamamını görmüyorsanız, sağ alt köşedeki genişletici oku tıklatın.
Seçili bir görüntünün Özellik Denetçisi'ni görüntülemek için görüntüyü tıklatın ve Pencere > Özellikler'i seçin.
Görüntü seçeneklerinden herhangi birini ayarlayın.
G ve Y
Piksel cinsinden görüntünün genişliği ve yüksekliğidir. Görüntüyü sayfaya eklediğinizde Dreamweaver bu metin kutularını otomatik olarak görüntünün orijinal boyutlarıyla güncelleştirir.
Görüntünün gerçek genişliği ve yüksekliğiyle uyuşmayan G ve Y değerleri girerseniz görüntü tarayıcıda düzgün görüntülenmez. Orijinal değerlere geri dönmek için G ve Y metin kutusu etiketlerini tıklatın veya G ve Y metin kutularının sağında görüntülenen Görüntü Boyutunu Sıfırla düğmesini tıklatın.
Bu görüntü örneğinin görüntülenme boyutunu ölçeklendirmek için bu değerleri değiştirebilirsiniz. Ancak tarayıcı görüntüyü ölçeklendirmeden önce tüm görüntü verilerini indirdiğinden bu değişiklik indirme süresini kısaltmaz. İndirme süresini kısaltmak ve görüntünün tüm örneklerinin aynı boyutta görüntülendiğinden emin olmak için görüntüleri ölçeklendirmek amacıyla bir görüntü düzenleme programı kullanın.
Görüntünün kaynak dosyasını belirtir. Kaynak dosyasını bulmak için klasör simgesini tıklatın veya yolu yazın.
Görüntünün köprüsünü belirtir. Dosyalar panelinde Dosyaya İşaret Et simgesini dosyaya sürükleyin. Sitenizdeki bir belgeyi bulmak için klasör simgesini tıklatın veya URL'yi elle yazın.
Salt metin tarayıcılar veya görüntüleri manuel olarak indirmek üzere ayarlanmış tarayıcılar için görüntü yerine gösterilen alternatif metni belirtir. Salt metin tarayıcılarla konuşma sentezleyicisi kullanan görme sorunu olan kullanıcılar için metin yüksek sesle okunur. Bazı tarayıcılarda bu metin imleç görüntünün üzerine getirildiğinde görüntülenir.
Eşleşme Adı ve Etkin Nokta araçları
İstemci tarafı görüntü eşleşmesini etiketlemenize ve oluşturmanıza olanak sağlar.
Hedef Bağlanan sayfanın yüklediği çerçeveyi veya pencereyi belirtir. Görüntü başka bir dosyaya bağlanmadığında bu seçenek kullanılamaz. Geçerli çerçeve kümesindeki tüm çerçevelerin adları Hedef listesinde görüntülenir. Aşağıdaki ayrılmış hedef adlarından da seçim yapabilirsiniz:
_new bağlı dosyayı yeni bir tarayıcı penceresine yükler.
_self bağlı dosyayı, bağla aynı çerçeveye ya da pencereye yükler. Bu hedef varsayılan hedeftir. Bu değeri açıkça belirtmeniz gerekmez.
Harici Düzenleyiciler tercihlerinde belirlediğiniz görüntü düzenleyiciyi başlatır ve seçili görüntüyü açar.
Görüntü ayarlarını düzenle
Görüntü En İyileştirme iletişim kutusunu açar ve görüntüyü en iyileştirmenize olanak sağlar.
Dreamweaver sayfasındaki görüntü orijinal Photoshop dosyası ile eşitlenmediğinde Dreamweaver orijinal dosyanın güncellendiğini algılar. Bu uygulama, Akıllı Nesne simgesinin oklarından birini kırmızı renkte görüntüler. Web görüntüsünü Tasarım görünümünde seçip Özellik Denetçisi'nde Orijinalden Güncelleştir düğmesini tıklattığınızda görüntü otomatik olarak güncelleştirilir. Güncelleştirilen görüntü orijinal Photoshop dosyasında yaptığınız değişiklikleri yansıtır.
Seçili görüntüdeki istenmeyen alanları kaldırarak görüntünün boyutunu keser.
Yeniden boyutlandırılan görüntüyü, yeni boyutu ve şeklinde resim kalitesini artırarak yeniden örnekler.
Görüntünün parlaklık ve kontrast ayarlarını belirler.
Görüntünün keskinlik ayarlarını belirler.
Ayrıca Hızlı Özellik Denetimi'ni kullanarak, görüntü özniteliklerini Canlı Görünüm'de düzenleyebilirsiniz.
Kodda görüntü erişilebilirlik niteliklerini düzenleme
Görüntü için erişilebilirlik niteliklerini eklediyseniz bu değerleri HTML kodunda düzenleyebilirsiniz.
Belge penceresinde, görüntüyü tıklatın veya görüntü etiketini kod içinden seçin.
Alternatif Metin kutusunda 50 karakterden daha kısa olacak şekilde görüntünün adını veya kısa bir açıklamasını girmek için aşağıdakilerden birini yapın. Ekran okuyucular buraya girdiğiniz bilgileri okur.
Kod görünümünde ilgili görüntü niteliklerini düzenleyin.
Hızlı Özellik Denetimi'ni kullanarak, görüntü özniteliklerini Canlı Görünüm'de düzenleyin.
Özellik denetçisinde Alt değerini düzenleyin.
Görüntü, eklenti, Shockwave veya SWF dosyaları, apletler ve ActiveX denetimleri gibi öğeleri Dreamweaver'da yeniden boyutlandırabilirsiniz.
Görüntüyü görsel olarak yeniden boyutlandırma, görüntünün mizanpajı farklı boyutlarda nasıl etkileyeceğini görmenize yardım eder, ancak görüntü dosyasını belirttiğiniz oranlarda ölçeklendirmez. Görüntüyü bir görüntü düzenleme aracı olmadan Dreamweaver'da görsel olarak yeniden boyutlandırırsanız kullanıcının tarayıcısı sayfa yüklendiğinde görüntüyü ölçekler. Bu, sayfa indirme süresinde gecikmeye neden olabilir ve görüntü kullanıcının tarayıcısında düzgün görüntülenmez.
İndirme süresini azaltmak ve görüntünün tüm örneklerinin aynı boyutta görüntülendiğinden emin olmak için görüntüleri ölçeklendirmek amacıyla görüntü düzenleme programı kullanın. Öğeyi görsel olarak yeniden boyutlandırmayı öğrenmek için aşağıdaki yordamı okuyun.
Öğeyi görsel olarak yeniden boyutlandırma
Belge penceresinde öğeyi (örneğin, görüntü veya SWF dosyasını) seçin.
Yeniden boyutlandırma tutamaçları öğenin sağında, altında ve sağ alt köşesinde görüntülenir. Yeniden boyutlandırma tutamaçları görüntülenmezse öğenin dışında bir alanı tıklatın ve öğeyi yeniden seçin. Alternatif olarak, öğeyi seçmek için etiket seçicide uygun etiketi tıklatabilirsiniz.
Aşağıdakilerden birini yaparak öğeyi yeniden boyutlandırın:
Öğenin genişliğini ayarlamak için sağ seçim tutamacını sürükleyin.
Öğenin yüksekliğini ayarlamak için alt seçim tutamacını sürükleyin.
Aynı anda öğenin hem yüksekliğini hem de genişliğini ayarlamak için köşe seçim tutamacını sürükleyin.
Boyutlarını ayarlarken öğenin en boy oranını (yüksekliğine göre genişlik oranı) korumak için köşe seçim tutamacını Shift tuşunu basılı tutarak sürükleyin.
Öğenin yüksekliğini ve genişliğini belirli bir boyuta (örneğin, 1 x 1 piksel) ayarlamak için Özellik Denetçisi'ni kullanın. G ve Y alanlarına bir sayısal değer girin. Öğeleri görsel olarak en az 8 x 8 piksel ölçülerinde yeniden boyutlandırılabilirsiniz.
Özellik Denetçisi'ni kullanarak bir öğenin genişliğini ve yüksekliğini ayarlama
Yeniden boyutlandırılmış bir öğeyi orijinal boyutlarına döndürmek için Özellik Denetçisi'nde G ve Y alanlarındaki değerleri silin. Ayrıca, Özellik Denetçisi'ndeki Boyutu Sıfırla düğmesini de tıklatabilirsiniz.
Görüntüyü orijinal boyutuna geri döndürme
Görüntü Özellik Denetçisi'nde Boyutu Sıfırla düğmesini tıklatın.
Yeniden boyutlandırılan görüntüyü yeniden örnekleme
Dreamweaver'da bir görüntüyü yeniden boyutlandırdığınızda, yeni boyutlarına uyması için görüntüyü yeniden örneklendirebilirsiniz. Yeniden örnekleme, orijinal görüntünün görünümüne olabildiğince yakın eşleşmesi için yeniden boyutlandırılan JPEG ve GIF görüntü dosyalarına piksel ekler veya çıkarır. Görüntüyü yeniden örneklemek, dosya boyutunu küçültür ve indirme performansını geliştirir.
Görüntüyü yeniden boyutlandırma bölümünde açıklandığı şekilde görüntüyü yeniden boyutlandırın.
Görüntü Özellik denetçisinde Yeniden Örnekle düğmesini tıklatın.
Dreamweaver'da bir görüntüyü yeniden örnekleme
Görüntü yer tutucularını veya bitmap görüntüler dışındaki öğeleri yeniden örnekleyemezsiniz.
Dreamweaver, görüntüleri Photoshop gibi harici görüntü düzenleme uygulaması kullanmanıza gerek kalmadan değiştirmenize olanak sağlayan temel görüntü düzenleme özellikleri sağlar. Dreamweaver görüntü düzenleme araçları, web sitenizde kullanılmak üzere tasarımcıların görüntü dosyaları oluşturma konusunda sorumlu oldukları içerikle kolayca çalışmanız için tasarlanmıştır.
Dreamweaver'da görüntüleri yeniden örneklendirebilir, kırpabilir, en iyileştirebilir ve keskinleştirebilirsiniz. Görüntülerin parlaklığını ve kontrastını da ayarlayabilirsiniz.
Dreamweaver görüntü düzenleme özelliklerini kullanmak için bilgisayarınızda Photoshop veya diğer görüntü düzenleme uygulamalarının yüklü olmasına gerek yoktur.
Düzen > Görüntü seçeneğini belirleyin. Dreamweaver'da aşağıdaki görüntü düzenleme özelliklerini ayarlayabilirsiniz:
Bir hazır ayar seçin, bir dosya formatı belirleyin ve kalite düzeyini belirtin. Sürgüyü kalite düzeyleri arasında hareket ettirdiğinizde iletişim kutusunda görüntünün dosya boyutunu görebilirsiniz. Hazır olduğunda Tamam'ı tıklatın.
Orijinal görüntünün görünümüne olabildiğince yakın eşleşmesi için yeniden boyutlandırılan JPEG ve GIF görüntü dosyalarına piksel ekler veya çıkarır. Görüntüyü yeniden örneklemek, dosya boyutunu küçültür ve indirme performansını geliştirir.
Bir görüntüyü Dreamweaver'da yeniden boyutlandırdığınızda, yeni boyutlarına uyması için görüntüyü yeniden örneklendirebilirsiniz. Bir nokta esaslı nesne yeniden örneklendiğinde, görüntüyü daha büyük veya küçük yapmak için pikseller eklenir veya çıkarılır. Genellikle görüntüyü daha yüksek bir çözünürlüğe yeniden örneklemek görüntü kalitesinde küçük bir kayba neden olur. Ancak daha düşük bir çözünürlüğe yeniden örnekleme veri kaybına ve genellikle kalitede düşüşe neden olur.
Görüntünün alanını azaltarak görüntüleri düzenler. Görüntünün konusunu daha da vurgulamak ve ilgi odağının merkezini çevreleyen gereksiz nesneleri silmek için görüntüyü kırpma özelliğini kullanabilirsiniz.
Görüntüdeki piksellerin parlaklığını veya kontrastını değiştirir. Parlaklık ve Kontrast, görüntünün vurgularını, gölgelerini ve orta tonlarını etkiler. Genellikle çok koyu veya çok parlak olan görüntüleri düzenlerken Parlaklık/Kontrast kullanırsınız.
Görüntü içindeki kenarların kontrastını artırarak görüntünün odağını ayarlar. Bir görüntüyü tararken veya dijital fotoğraf çekerken, birçok görüntü yakalama yazılımının varsayılan eylemi görüntüdeki nesnelerin kenarlarını yumuşatmaktır. Tarama işlemi, dijital görüntülerin oluştuğu piksellerde çok ince detayların kaybolmasını engeller. Bununla birlikte, dijital görüntü dosyalarındaki ayrıntıları ortaya çıkarmak için görüntüyü genellikle keskinleştirmek gerekir. Keskinleştir seçeneği kenar kontrastını artırır ve görüntünün daha keskin görünmesini sağlar.
Dreamweaver görüntü düzenleme özellikleri yalnızca JPEG, GIF ve PNG görüntü dosyası formatlarına uygulanır. Diğer bitmap görüntü dosya formatları bu görüntü düzenleme özellikleri kullanılarak düzenlenemez.
Dreamweaver, bitmap dosyası görüntülerini kırpmanıza veya kesmenize olanak sağlar.
Bir görüntüyü kırptığınızda, kaynak görüntü dosyası diskte değişir. Orijinal görüntüye geri dönmeniz gerekirse görüntü dosyasının bir yedek kopyasını saklamanızı öneririz.
Kırpmak istediğiniz görüntüyü içeren sayfayı açın, görüntüyü seçin ve aşağıdakilerden birini yapın:
Görüntü Özellik denetçisinde Kırpma Aracı simgesini tıklatın.
Düzen > Görüntü > Kırp seçeneğini belirleyin.
Seçili görüntünün çevresinde kırpma tutamaçları görüntülenir.
Dreamweaver'da görüntüleri kırpma
Çevreleyen kutu korumak istediğiniz görüntü alanını çevreleyene kadar kırpma tutamaçlarını ayarlayın.
Sınırlayıcı kutunun içini çift tıklatın veya seçimi kırpmak için Enter tuşuna basın.
Kırpmakta olduğunuz görüntü dosyasının diskte değiştirileceğini bildiren bir iletişim kutusu görüntülenir. Tamam seçeneğini tıklatın.
Sınırlayıcı kutu dışında kalan seçili bitmap dosyasındaki tüm pikseller kaldırılır ancak görüntüdeki diğer nesneler kalır.
Görüntüyü önizleyin ve beklentilerinizi karşıladığından emin olun. Karşılamıyorsa, orijinal görüntüye dönmek için Düzen > Kırpmayı Geri Al seçeneğini belirleyin.
Dreamweaver'dan çıkana veya harici görüntü düzenleme uygulamasıyla dosyayı düzenleyene kadar Kırp komutunun efektini geri alabilir ve orijinal görüntü dosyasına geri dönebilirsiniz.
Bir görüntüyü en iyileştirme
Web sayfanızdaki görüntüleri Dreamweaver içinden en iyileştirebilirsiniz.
En iyileştirmek istediğiniz görüntüyü içeren sayfayı açın. Görüntüyü seçin ve aşağıdakilerden birini yapın:
Görüntü Özellik Denetçisi'ndeki Görüntü Ayarlarını Düzenle düğmesini tıklatın.
Düzen > Görüntü > En İyileştir seçeneğini belirleyin.
Özellik Denetçisi'ni kullanarak görüntü ayarlarını düzenleme
Görüntü En İyileştirme iletişim kutusunda düzenlemelerinizi yapın ve Tamam'ı tıklatın.
Dreamweaver'da görüntünüzü en iyileştirme
Keskinleştirme, görüntünün tanımını veya keskinliğini arttırmak için nesnelerin kenarlarının çevresindeki piksellerin kontrastını artırır.
Keskinleştirmek istediğiniz görüntüyü içeren sayfayı açın, görüntüyü açın ve aşağıdakilerden birini yapın:
Görüntü Özellik denetçisinde Keskinleştir düğmesini tıklatın.
Düzen > Görüntü > Keskinleştir seçeneğini belirleyin.
Dreamweaver'ın görüntüye uyguladığı keskinleştirme derecesini belirtmek için sürgü kontrolünü sürükleyin. Metin kutusuna 0 ve 10 arasında bir değer de girebilirsiniz. Keskinleştir iletişim kutusunu kullanarak görüntünün keskinliğini ayarlarken görüntüdeki değişiklikleri önizleyebilirsiniz.
Dreamweaver'da görüntüleri keskinleştirme
Görüntüden memnun kaldığınızda Tamam'ı tıklatın.
Dosya > Kaydet öğesini seçerek değişikliklerinizi kaydedin veya Düzen > Keskinleştirmeyi Geri Al seçeneğini belirleyerek orijinal görüntüye geri dönün.
Keskinleştir komutunun ve orijinal görüntü dosyasına geri dönmenin etkisini yalnızca görüntüyü içeren sayfayı kaydetmeden önce geri alabilirsiniz. Sayfayı kaydettikten sonra görüntüde yapılan değişiklikler kalıcı hale gelir.
Görüntünün parlaklık ve kontrastını ayarlama
Parlaklık ve Kontrast seçeneği, görüntüdeki piksellerin parlaklığını veya kontrastını değiştirir. Bu seçenek görüntünün vurgularını, gölgelerini ve orta tonlarını etkiler. Genellikle çok koyu veya çok parlak olan görüntüleri düzenlerken Parlaklık ve Kontrast kullanırsınız.
Ayarlamak istediğiniz görüntüyü içeren sayfayı açın, görüntüyü açın ve aşağıdakilerden birini yapın:
Görüntü Özellik Denetçisi'nde Parlaklık ve Kontrast düğmesini tıklatın.
Düzen > Görüntü > Parlaklık/Kontrast seçeneğini belirleyin.
Ayarları belirlemek için Parlaklık ve Kontrast sürgülerini sürükleyin. Değerler -100 ila 100 arasındadır.
Görüntülerin parlaklığını ve kontrastını ayarlama
Rollover, tarayıcıda görüntülenirken üzerine işaretçi geldiğinde değişen bir görüntüdür. Rollover oluşturmak için iki görüntünüz olmalıdır. Birincil görüntü veya sayfa ilk yüklendiğinde görüntülenen görüntü ve ikincil görüntü veya işaretçi birincil görüntünün üzerine geldiğinde görüntülenen görüntü. Rollover'daki her iki görüntü de aynı boyutta olmalıdır. Görüntüler aynı boyutta değilse Dreamweaver, ilk görüntünün özelliklerine uyması için ikinci görüntüyü yeniden boyutlandırır.
Rollover görüntüleri onMouseOver olayına yanıt vermek üzere otomatik ayarlanır. Görüntüyü farklı bir olaya yanıt verecek şekilde ayarlayabilirsiniz. Bu olay bir fare tıklatması veya rollover görüntüsünü değiştirme olabilir.
Belge penceresinde, rollover'ın görüntülenmesini istediğiniz yere ekleme noktasını yerleştirin.
Aşağıdaki yöntemlerden birini kullanarak rollover'ı ekleyin:
Ekle panelinde, açılır listeden HTML öğesini seçin. Seçenekler listesinden Rollover Görüntüsü'nü seçin.
Ekle > HTML > Rollover Görüntüsü seçeneğini belirleyin.
Rollover Görüntüsü Ekle iletişim kutusunda görüntüleri seçin ve rollover görüntüsünün özelliklerini ayarlayın. Şu seçenekleri ayarlayabilirsiniz:
Rollover görüntüsünün özelliklerini ayarlama
Rollover görüntüsünün adı.
Sayfa yüklendiğinde görüntülenmesini istediğiniz görüntü. Metin kutusuna yolu girin veya Gözat'ı tıklatıp görüntüyü seçin.
İşaretçi orijinal görüntünün üzerine geldiğinde görüntülenmesini istediğiniz görüntü. Yolu girin veya Gözat'ı tıklatıp görüntüyü seçin.
Önceden Yüklenen Rollover Görüntüsü
Tarayıcının önbelleğine görüntüleri önceden yükler, böylece kullanıcı işaretçiyi görüntünün üzerine getirdiğinde gecikme olmaz.
(İsteğe bağlıdır) Salt metin tarayıcı kullanan kullanıcılara görüntüyü tanımlayan metin.
Tıklatıldığında URL'ye Git
Kullanıcı rollover görüntüsünü tıklattığında açılmasını istediğiniz dosya. Yolu girin veya Gözat'ı tıklatıp dosyayı seçin.
Görüntünün bağını ayarlamazsanız Dreamweaver, rollover görüntüsü davranışının eklendiği HTML kaynak koduna boş bir bağ (#) ekler. Boş bağı kaldırırsanız rollover görüntüsü çalışmaz.
Rollover görüntüsünü önizlemek için Dosya > Gerçek Zamanlı Önizleme seçeneğini belirleyin veya F12 tuşuna basın.
Tarayıcıda, rollover görüntüsünü görmek için işaretçiyi orijinal görüntünün üzerine getirin.
Tasarım görünümünde rollover görüntüsünün etkisini göremezsiniz.
Dreamweaver uygulamasındayken, seçili görüntüyü harici bir görüntü düzenleyicide açabilirsiniz. Düzenlenen görüntü dosyasını kaydettikten sonra Dreamweaver uygulamasına geri döndüğünüzde, görüntüde yaptığınız değişiklikler Belge penceresinde görünür.
Birincil harici düzenleyiciyi ayarlayabilir ve düzenleyicinin açacağı dosya türlerini belirleyebilirsiniz. Birden fazla görüntü düzenleyici seçebilirsiniz. Örneğin, JPEG dosyasını düzenlemek istediğinizde Photoshop'u başlatacak ve animasyonlu GIF düzenlemek istediğinizde de farklı bir görüntü düzenleyici başlatacak biçimde tercihlerinizi ayarlayabilirsiniz.
Harici görüntü düzenleyiciyi başlatma
Harici düzenleyiciyi açmak için aşağıdakilerden birini yapın:
Düzenlemek istediğiniz görüntüyü çift tıklatın.
Düzenlemek istediğiniz görüntüyü sağ tıklatın (Windows) veya Control tuşu basılıyken görüntüyü tıklatın (Macintosh). Ardından, Birlikte Düzenle > Gözat'ı tıklatın ve bir düzenleyici seçin.
Düzenlemek istediğiniz görüntüyü seçin ve Özellik Denetçisi'nde Düzenle'yi tıklatın.
Birincil görüntü düzenleyiciyi başlatmak için Dosyalar panelinde görüntü dosyasını çift tıklatın. Bir görüntü düzenleyici belirtmediyseniz Dreamweaver, dosya türünün varsayılan düzenleyicisini başlatır.
Dreamweaver penceresine döndükten sonra güncelleştirilen görüntüyü görmüyorsanız görüntüyü seçin ve ardından Özellik Denetçisi'nde Yenile düğmesini tıklatın.
Var olan bir dosya türü için harici görüntü düzenleyici ayarlama
Grafik dosyalarını açmak ve düzenlemek için görüntü düzenleyici seçebilirsiniz. Harici görüntü düzenleyiciyi seçmek için aşağıdaki adımları gerçekleştirin:
Düzenle > Tercihler (Windows) veya Dreamweaver > Tercihler (macOS) seçeneğini belirleyin ve soldaki bölmede bulunan Kategori listesinden Dosya Türleri/Düzenleyiciler öğesini seçin.
Uzantılar listesinde harici düzenleyici ayarlamak istediğiniz dosya uzantısını seçin.
Belirli dosya türleri için harici düzenleyici ayarlama
Düzenleyiciler listesinin üzerindeki Ekle (+) düğmesini tıklatın.
Dış Düzenleyici Seç iletişim kutusunda, bu dosya türü için düzenleyici olarak başlatmak istediğiniz uygulamaya göz atın.
Bu düzenleyicinin, bu dosya türü için birincil düzenleyici olmasını istiyorsanız Tercihler iletişim kutusunda Birincil Yap'ı tıklatın.
Bu dosya türü için başka bir düzenleyici ayarlamak istiyorsanız 3. ve 4. adımları yineleyin.
Bu görüntü türünü düzenlediğinizde Dreamweaver otomatik olarak birincil düzenleyiciyi kullanır. Belge penceresinde görüntünün içerik menüsünden diğer listelenen düzenleyicileri de seçebilirsiniz.
Uzantılar listesine yeni dosya türü ekleme
Dosya Türleri/Düzenleyiciler Tercihleri iletişim kutusunda, Uzantılar listesinin yukarısındaki Ekle (+) düğmesini tıklatın.
Uzantılar listesinde bir metin kutusu görüntülenir.
Düzenleyici ayarlamak istediğiniz dosya türünün uzantısını seçin.
Dosya türü için harici düzenleyici seçmek üzere Düzenleyiciler listesinin üzerindeki Ekle (+) düğmesini tıklatın.
Görüntülenen iletişim kutusunda bu görüntü türünü düzenlemek için kullanmak istediğiniz uygulamayı seçin.
Bu düzenleyicinin görüntü türü için birincil düzenleyici olmasını istiyorsanız Birincil Yap'ı tıklatın.
Var olan düzenleyici tercihini değiştirme
Dosya Türleri/Düzenleyiciler tercihleri iletişim kutusundaki Uzantılar listesinde, var olan düzenleyicileri görüntülemek üzere değiştirdiğiniz dosya türünü belirleyin.
Düzenleyiciler listesinde etkin olmasını istediğiniz düzenleyiciyi seçin ve aşağıdakilerden birini yapın:
Düzenleyici eklemek veya kaldırmak için Düzenleyiciler listesinin üzerindeki Ekle (+) veya Sil (–) düğmesini tıklatın.
Düzenleme için varsayılan olarak açılacak düzenleyiciyi değiştirmek üzere Birincil Yap düğmesini tıklatın.
Görüntüye veya görüntü etkin noktasına mevcut herhangi bir davranışı uygulayabilirsiniz. Etkin bir noktaya davranış uyguladığınızda Dreamweaver, HTML kaynak kodunu area etiketine ekler. Görüntülere özellikle üç davranış uygulanır: Görüntüleri Önceden Yükle, Görüntü Değiştir ve Görüntü Değiştirme Geri Yükleme.
Görüntüleri Önceden Yükle
img etiketinin src niteliğini değiştirerek bir görüntüden diğerine geçer. Bu eylemi düğme rollover'ları ve diğer görüntü efektleri (bir kerede birden fazla görüntü değiştirme dahil) oluşturmak için kullanın.
Görüntü Değiştirme Geri Yükleme
Değiştirilen son görüntü kümesini önceki kaynak dosyalara geri yükler. Bu eylem, bir nesneye Görüntü Değiştir eylemini eklediğinizde varsayılan olarak otomatik eklenir. Bu durumda, Değiştir seçeneğini el ile seçmeniz gerekmez.
Atlama menüleri gibi daha karmaşık gezinme sistemleri oluşturmak için de davranışları kullanabilirsiniz.
Web tasarımında görüntüler
Dreamweaver'da görüntüleri dinamik hale getirme