Video: HTML - Ders 4 Siteye Resim ve Video Ekleme 2024
Photoshop, Photoshop Elements veya Fireworks gibi başka bir programa ihtiyacınız var … Web sayfanıza bir resim ekleme, ilk bakışta neredeyse büyülü görünebilir, çünkü süreç Dreamweaver ile çok basittir. Web grafikleri ile ilgili zorluk, bunları sayfalarınıza eklemezken, görüntüleyicinizin tarayıcısına çabucak yüklenebilecek iyi görünümlü görüntüler yaratır.
Görüntü oluşturmak, değiştirmek, düzenlemek ve optimize etmek için Photoshop, Photoshop Elements veya Fireworks gibi başka bir programa ihtiyacınız var. görüntülerin en iyileştirilmesi dosya boyutlarını küçültür, böylece resimleriniz daha hızlı indirilir. Dreamweaver bazı temel resim düzenleme araçları sağlar, ancak çoğunlukla sayfanıza resim eklemek ve yerleştirmek için Dreamweaver kullanırsınız.
Dreamweaver, web sayfalarındaki görüntüleri yerleştirmeyi kolaylaştırır ve bunun için birden fazla yol sunar:
-
Ortak Ekle panelinde Görüntüler simgesini tıklatın ve sonra Görüntü Ekle iletişim kutusunu kullanarak bir resim seçin.
-
Dosyalar panelinde, bir resim adını tıklatıp resmin görünmesini istediğiniz sayfaya sürükleyin.
-
Ekle menüsünü kullanın.
Kullanışlı bir web, JPEG, GIF veya PNG görüntüsüne sahip değilseniz, zaten optimize edilmiş görüntüleri indirebilirsiniz.
Ekle menüsünü kullanarak bir web sayfasına resim yerleştirmek için şu talimatları izleyin:
-
Mevcut bir sayfayı açın veya yeni bir sayfa oluşturup kaydedin.
-
İmlecinizi görüntüye sayfaya eklemek istediğiniz yere getirin.
Yeni bir boş dosyanın sol üst köşesine resim ekleyebilirsiniz ve bir web sayfasındaki etiketleri ve öğeleri içine görüntüler yerleştirebilirsiniz, ancak ek bir HTML kullanmadan yalnızca bir sayfanın ortasına resim koyamazsınız. etiketleri veya CSS biçimlendirmesini yerleştirin.
-
Ekle → Görüntü → Resim'i seçin.
Görüntü Kaynağı Seç iletişim kutusu görüntülenir.
-
Eklemek istediğiniz görüntüyü bulmak için göz atın.
Bilgisayar sisteminize bağlı olarak, görüntüleri farklı şekillerde yerleştirirken önizleme yapabilirsiniz. Üç yaygın seçenek vardır:
-
Windows XP'li bir bilgisayarda, Herhangi bir açık klasördeki tüm görüntülerin küçük resim sürümlerini görüntülemek için Bak alanının sağındaki Görünüm menüsü açılır listesinden Küçük Resimler'i seçin. Ayrıca, iletişim kutusunun en sağındaki herhangi bir seçili resmin tek bir önizlemesini görüntüleyebilirsiniz.
-
Windows Vista veya Windows 7 olan bir bilgisayarda, Bakın Menüsünün sağındaki Görünüm menüsü açılır listesinden bir simge seçeneği (Küçük Simgeler, Orta Simgeler, Büyük Simgeler veya Ekstra Büyük Simgeler) seçin Herhangi bir açık klasördeki tüm görüntülerin küçük resim sürümlerini görüntülemek için alan. Ayrıca, iletişim kutusunun en sağındaki herhangi bir seçili resmin tek bir önizlemesini görüntüleyebilirsiniz.
-
Mac'te, iletişim kutusunun sol üst köşesinden Sütunları Görüntüle seçeneğini seçin. İletişim kutusunun en sağındaki herhangi bir seçili resmin tek bir önizlemesini görüntüleyebilirsiniz.
Kredi: Casey Stoll'un resimleri
-
-
Resmi yerleştirmek için resim adını çift tıklayın veya bir kez tıklayın ve Tamam'ı tıklayın.
Bir sayfaya bir resim eklerseniz ve resim yerel site klasörüne kaydedilmemişse, Dreamweaver bir uyarı iletişim kutusu ister ve görüntüyü yerel site klasörünüze kopyalamayı önerir. Birçok tasarımcı, yerel sitenin içindeki tüm resimleri kendi sitelerinde sakladıkları resimler olarak adlandırılan bir alt klasör oluşturur, ancak isterseniz birden çok alt klasöre resim düzenleyebilirsiniz.
-
Resim özelliklerini görüntülemek ve düzenlemek için web sayfanızdaki görüntüyü seçin.
Görüntü seçenekleri, bir resim seçildiğinde sayfanın altındaki Özellik denetçisinde otomatik olarak görüntülenir.
Kredi: Fotoğraf Casey Stoll
Bir sayfaya bir görüntü dosyası yerleştirdiğinizde, aslında sayfanın bir kopyasını eklemiyorsunuz; görüntüye bir referans oluşturursunuz. Altta yatan kod, bir sayfadan diğerine yapılan bir bağlantı koduna çok benzemektedir.
Hem resim başvuruları hem de bağlantılar, dosyanın adını ve sayfadan o dosyaya giden yolu içerir. Aslında, görüntüyü görüntülediğinde görüntüyü bulmak için bir web tarayıcısı için bir talimat oluşturuyorsunuz.
Web sayfanızda bir resim görüntülemek için web sitenizi yayınladığınızda hem sayfayı hem de resmi yüklemeniz gerekir. Resim dosyalarınız ve bu dosyalara atıfta bulunan sayfalar, web sunucunuzda olduğu gibi sabit diskinizdeki aynı göreceli konumda değilse, resimlerinize yapılan referansı kırarsınız ve sayfanızda çirkin bir Kırık Resim simgesi görünür.
Resimlerinizin ve dosyalarınızın birbiriyle ilişkili olarak kalmalarını sağlamanın en iyi yolu, Dreamweaver'ın sizin için onları takip etmelerine izin vermektir. Bu nedenle, site kurulum sürecini tamamlamak ve Dosyalar panelinde bulunmak dışında asla bir görüntüyü taşımadığınızdan veya yeniden adlandırmadığınızdan emin olmak çok önemlidir.