Dreamweaver CC 2018'de bir resim ekleme
İçindekiler:
- Giriş
- Resmin Site Dizinine Eklenmesi
- Resmi Sayfaya Ekleme
- Logo Konteyneri Oluşturma
- Resmi Kaydetme
- CSS Hiyerarşisi
- Resim Boyutunu Ayarlama
- Farklı Dosya Türleri Arasındaki Farklar
- PNG Dosyaları
- JPEG Dosyaları
📷 Bir Resmin Site Dizinine Eklenmesi ve Sayfaya Eklenmesi
Bu videoda, sitenizin dizinine bir resmi nasıl ekleyeceğinizi ve ardından bu resmi sayfanıza nasıl ekleyeceğinizi ele alacağız. Bugün özellikle bir logo resmi eklemeye odaklanacağız. Başlamak için, başlığı yazacağımız bir alan oluşturalım ve ardından bu alana bir konteyner oluşturacağız.
Logo Konteyneri Oluşturma
İlk olarak, kendimize bir not ekleyelim: Bu logo konteynerıdır. Bu önceki derslerde yaptığımız gibi notları gösteren bir şekilde yazıyı yorumlayacağız. Ardından, içerisinde birçok şeyi içeren ve web sitelerinde sıkça kullanılan bir öğe olan bir div ekleyelim. Bu div'i bir class ile çağıralım ve "logo" olarak adlandıralım.
Sonra, bu alana biraz boşluk oluşturmak için birkaç satır boşluk bırakalım ve gelecekte yeniden kullanmak isterseniz, konteynerın nerede başladığını ve bittiğini bilebilmek için "logo konteynerının sonu" notunu ekleyelim.
Resmi Kaydetme
Sonraki adım olarak, bir resim dosyasını site dizinine kaydedeceğiz. Bu adımı atlamamızın nedeni, bu elementleri buraya yerleştirmezsek, bazen bağlantı sorunları yaşayabilir ve bunları daha sonra internete koymak istediğinizde doğru bir şekilde görüntülenmez. Önceden araştırılmış bazı dummy logoları zaten buldum, istediğiniz herhangi birini kullanabilirsiniz. Ben bunu kullanacağım, bu yüzden resmi bilgisayarınıza kaydedin ve site dizinine, images klasörüne kaydedin. İsmini "logo" olarak belirleyebilirsiniz.
Sayfaya Resim Ekleme
Daha önce yerleştirdiğimiz boşluğa geri dönelim. Bir resim etiketi eklemek için "img" yazın, ardından iki alana ihtiyacımız vardır. Bir tanesi, resmin nerede bulunacağını belirten src niteliğidir ve diğeri alternatif metindir. İkincisi, erişilebilirlik amacıyla görme engelli kişilere bu görüntünün ne olduğunu açıklayacak bilgileri içerir.
Kaynak için, bu logonun burada olduğunu bilmemiz gerektiğinden, img etiketinde src alanına tıklıyoruz ve karşımıza çıkan listeden images klasöründe "logo" adını tıklıyoruz. Alternatif metin olarak "şirket logosu" yazabiliriz.
Şu anda bu logo çok büyük görünüyor, ancak bunu CSS kullanarak ayarlayacağız. CSS sayfamızın altına giderek, logo class'ını belirleyeceğiz. Ancak, bu çok genel bir tanım olacak çünkü sadece logo içindeki resmi değiştirmek istiyoruz. Tüm resim özelliklerini değiştirmek istemeyiz, bu yüzden "logo img" şeklinde yazacağız. Bu, başlık içindeki divin içindeki resmi seçtiğimizi belirtir.
Son olarak, yükseklik özelliğini tanımlayacağız çünkü bu, başlık yüksekliğine göre orantılı olacak en kolay özelliktir. Örneğin, yüksekliği "70 piksel" olarak ayarlayabiliriz.
Farklı Dosya Türleri Arasındaki Farklar
Sonraki videoda, PNG dosyalarıyla saydam arka planlar arasındaki farklara bakacağız ve ne zaman ve ne zaman kullanılmaması gerektiğini inceleyeceğiz.
Bu işlemleri takip ederek resminizi sitenize ekleyebilir ve boyutunu ayarlayabilirsiniz.
Öne Çıkanlar:
- Bir logo resmini nasıl site dizinine ekleyebilirsiniz
- Logo konteynerının nasıl oluşturulacağı
- Bir resmi sayfaya nasıl ekleyebilirsiniz
- Resim dosyalarını kaydetmek için hangi dosya türünü seçmelisiniz
- CSS kullanarak resim boyutunu nasıl ayarlayabilirsiniz
- PNG ve JPEG dosyalarının farkları ve kullanım alanları
Sıkça Sorulan Sorular
Q: Logomu nasıl belirli bir boyuta ayarlayabilirim?
A: CSS kullanarak logo boyutunu belirleyebilirsiniz. Örneğin, "logo img { height: 70px; }" şeklinde bir stil tanımı yapabilirsiniz.
Q: PNG ve JPEG arasındaki farklar nelerdir?
A: PNG dosyaları genellikle saydam arka planlar için kullanılırken, JPEG dosyaları daha küçük dosya boyutları için tercih edilir.
Q: Alternatif metin nedir ve neden önemlidir?
A: Alternatif metin, bir resmin görüntülenememesi durumunda (örneğin, görme engelli bir kullanıcı için) resmi açıklayan bir metindir. Erişilebilirlik amacıyla önemlidir.
Kaynaklar:
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
