Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
1
RESİMLERLE ÇALIŞMAK Hazırlayan:Rabia ÜNLÜ
Bölüm:Bilgisayar Programcılığı İ.Ö Numara:
2
RESİMLERLE ÇALIŞMAK Bir sayfadaki resimlerin konumunu değiştireceğiz.
Resimlerinize isim ve alt nitelikleri atayacağız. Assets panelini kullanarak resimleri yöneteceğiz. Metnin belirli bir bölümünü bir resmin etrafına saracağız Resim yer tutucularını kullanacağız. Temel resim düzenleme araçlarını kullanarak resimlerde ayarlamalar yapacağız. Metinleri resimlere göre hizalayacağız. BU DERSTE BUNLARI ÖĞRENECEĞİZ: Resim formatlarını tanıyacak ve aralarındaki farkları göreceğiz. Bir sayfaya çeşitli resimler ekleyeceğiz Resimlerimizin özelliklerinde değişiklik yapacağız.
3
Resimler ziyaretçilerin dikkatini çekmek ve/veya site üzerinden vermek isteğimiz mesajları daha etkin bir şekilde iletmek için etkili bir araç olabilirler.Dreamweaver 8, sitemizde kullandığımız resimler üzerinde kontrol imkânı sağlar. Bu sayede resim özelliklerini Dreamweaver içinden hızlı şekilde değiştirebilir, sitemiz için uygun hale getirebilir veya diğer resim işleme programları ile açabiliriz. Burada dikkat edilmesi gereken husus, resimlerinizin çalışma klasörü içerisinde toplu olarak bir alt klasörde yer almasıdır. Daha önce ifade edildiği gibi resimler için “image” yada “images” isimli alt klasörler oluşturulması tavsiye edilir.
4
RESİMLERLE ÇALIŞMAK Bir arka plan resminin sitedeki diğer belgelerde de kullanılabilmesini sağlamak için ilgili stil sayfasının düzenlenmesi gerekir. body kuralı, belgenin içeriğinin bulunduğu <body> etiketini yeniden tanımlar.
5
Sayfalarımızın kullanıcıların dikkatini daha çok çekmek veya iletmek istediğimiz mesajları daha etkin şekilde aktarabilmek için sayfamızın arka planını da ayarlayabiliriz. Sayfanın arka planını değiştirmek için “Modify ( Değiştir )” menüsünden Page Properties (Sayfa Özellikleri) komutu kullanılabilir. Açılan iletişim kutusunda “Appearance ( Görünüm )” sekmesinden “Background color kısmından isteğimiz rengi veya “Background Image kısmından isteğimiz resmi seçerek arka planımızı değiştirebiliriz. Bir Arka Plan Resmi Kullanmak RESİMLERLE ÇALIŞMAK
6
Bir Arka Plan Resmi Kullanmak
Arka plana resmimizi eklerken repeat(tekrarlama) özelleğinide belirleyerek arka plana uygulanacak resmin tekrarlanma türünüde belirleyebiliriz. arka plan resminin repeat (tekrarlama) özelliğini kontrol etmek için kullanabileceğiniz çeşitli seçenekler mevcuttur. repeat-y seçeneği, seçilen arka plan resmini düşey olarak döşer. repeat-x seçeneği, resmi yatay olarak döşer. repeat seçeneği, resmi hem düşey, hem de yatay olarak döşer. no-repeat döşenmez. RESİMLERLE ÇALIŞMAK
7
Bir Arka Plan Resmi Kullanmak
RESİMLERLE ÇALIŞMAK Attachment seçeneği arka plan resminin sabitlenip, sabitlenmeyeceğini veya sayfanın geri kalan kısmıyla birlikte kaydırılıp kaydırılmayacağını belirlemenizi sağlar. Bu özellik tekrarlanmayan arka plan resimlerinde kullanılır. Horizontal position ve Vertical position seçenekleri arka plan resminin konumunu kontrol etmenizi sağlar. Konum ayarlama işlemi, yatay olarak yerleştirme için left, center ya da right seçeneklerinin, düşey olarak yerleştirme için de top, center ya da bottom seçeneklerinin ayarlanmasıyla veya sayısal değerler ve piksel (pixels) gibi bir ölçü birimi aracılığıyla tam bir konum tanımı yapılarak gerçekleştirilir.
8
Sayfaya Resim Yerleştirmek
RESİMLERLE ÇALIŞMAK Resimler, metin gibi diğer içerik bileşenleriyle birlikte doğrudan belgenin gövde kısmına yerleştirilebilir. Internet’te kul anılmak üzere GIF ve JPEG formatında kaydedilmiştir. Hiçbir resmi tekrar kaydetmeniz veya optimize etmeniz gerekmez. GIF resimleri maksimum 8-bit renk modu kullanılarak kaydedilebilir. Bu modda sadece 256 renk görüntülenebilir. GIF dosyaları daha hızlı yüklenir, daha fazla optimizasyon seçeneğine sahiptir, ayrıca saydamlık ve animasyonu destekler. GIF dosyaları için .gif uzantısı kullanılır.
9
Sayfaya Resim Yerleştirmek
RESİMLERLE ÇALIŞMAK JPEG formatında resimler 24-bit modunda kaydedilir, bütün renkler korunur ve fazlalık verilerin atıldığı kayıplı bir sıkıştırma tipi kullanılır. JPEG kalitesi düştükçe, bahsettiğimiz atılan verilerden dolayı resme ait daha fazla bilgi kaybı olur. JPEG’lerin kayıplı özelliğinden dolayı resmin kalitesini düşürmemek için bütün düzenleme işlemleri kaynak dosyası üzerinde yapılmalı ve tekrar JPEG olarak kaydedilmelidir. JPEG dosyalarının uzantısı .jpg’dir. İnternet’te PNG (Portable Network Graphic) adında üçüncü bir format daha kullanılır. PNG formatı, GIF’in yerini alması için tasarlanmıştır; JPEG ve GIF formatlarının özelliklerini birleştirir. PNG dosyaları kayıpsızdır, GIF dosyalarından daha iyi sıkıştırır ve renk kontrolü açısından daha fazla seçeneğe sahiptir, ayrıca JPG gibi bütün renkleri koruyabilir ya da bir GIF dosyası gibi sınırlı sayıda renk kullanabilir. PNG JPEG’lerin yerini alması için tasarlanmamıştır. PNG, animasyon desteğine sahip değildir ve eski Web tarayıcıları tarafından desteklenmez. Dosya uzantısı .png’dir.
10
Sayfaya Resim Yerleştirmek
RESİMLERLE ÇALIŞMAK Sayfalarımızda kullanmak isteğimiz resimleri öncelikle olarak sayfaya eklemek gerekmektedir. Bunun için resmi eklemek isteğimiz yere imlecimizi yerleştirdikten sonra “Insert (Ekle) menüsünden Image (Resim)” seçeneğini kullanılabilir. Bir diğer yolu ise Common kategorisinde yer alan Images menü düğmesine tıklayarak ve Image’ı seçmektir.
11
Sayfaya Resim Yerleştirmek
RESİMLERLE ÇALIŞMAK Select Image Source iletişim kutusu çeşitli seçenekler içerir. Resim almak istediğiniz klasörü, menüyü kullanarak ve menü ile görünüm araçlarının alt kısmında yer alan dosya ve klasör bölümünden seçim yaparak tanımlayabilirsiniz. Relative to seçeneği Dreamweaver’ın resimlere nasıl göndermede bulunacağını belirlemenizi sağlar: Belgeye bağlı olarak (Document seçeneği) ya da sitenin kök klasörüne bağlı olarak (Site Root seçeneği).
12
Sayfaya Resim Yerleştirmek
RESİMLERLE ÇALIŞMAK Alternate Text seçeneği, kullanıcıların Web tarayıcısında resim görüntüleme özelliği devre dışı bırakıldıysa, kullanıcıların Web tarayıcısı resim görüntüleyemiyorsa, belirli bir resim yüklenemiyorsa veya kul anıcının resimleri görmesini engelleyen başka bir durum söz konusu ise, böyle durumlarda görüntülenecek olan metni tanımlamanızı sağlar.
13
Sayfaya Resim Yerleştirmek
RESİMLERLE ÇALIŞMAK Alternatif metin, resmin yazılı eşdeğeri olmalıdır, yani söz konusu işlevi tanımlanmalıdır. Alternatif metinlerle uygun olmayan şekilde tanımlanan boşluk resimlerini gösterebiliriz. Bu tip resimler için Alternative metin alanının sağındaki menü düğmesine tıklayarak <empty> seçeneğini işaretlemelisiniz. Alâkasız alternatif metinler kullanmaktan kaçının; bu yarardan çok zarar getirir. Bu uygulamada tanımladığınız alternatif metin, resimde gösterilen metnin aynısıdır. Alternatif metin, resimleri tanımlayan <img> etiketinin bir niteliğidir.
14
Resimleri Yeniden Boyutlandırmak ve Tazelemek
RESİMLERLE ÇALIŞMAK Dışarıdan bir resim aktardığınızda resmin genişliği ve yüksekliği Properties denetçisinde görüntülenir ve otomatik olarak koda yerleştirilir. Bu da Web tarayıcısına sayfanın yerleşim düzenini tanımlamak için ihtiyaç duyduğu bilgileri verir. Bu seçenek, sayfalarınızın yüklenme hızında fark yaratabilir.<img> (image - resim) etiketinin yeni genişlik ve yükseklik nitelikleri, asıl resim dosyasının büyüklüğünü değiştirmeden resmin daha küçük boyutlarda görüntülenmesini sağlar.
15
Resimlerin Yerleştirilmesi
RESİMLERLE ÇALIŞMAK Bir belgedeki her eleman bir kutu (box) olarak değerlendirilir. CSS, kutu kavramını bir elemanın görünümünü, konumunu, vs. kontrol etmek için kullanır. Elemanlar ve dolayısıyla onları temsil eden kutular blok ya da satır içi tipte olabilir ve her kutu başka kutular içerebilir.Kutuları kullanılabilecek üç konum ayarlama yönteminden biri Float, diğer ikisi de absolute ve fixed’tır. Float seçeneğini left (sol) olarak ayarladığınızda etkilenen blok, yani studioPhoto sınıfının uygulandığı eleman, onu içeren bloğun sol tarafındaki kenar boşluğuna doğru itilir. Resimlerin Yerleştirilmesi
16
Align Niteliğini Kullanmak
RESİMLERLE ÇALIŞMAK Align Niteliğini Kullanmak Dreamweaver, düşey ve yatay hizalama seçeneklerinin yer aldığı bir menü aracılığıyla Properties denetçisindeki resim hizalama seçeneklerine hızlı bir şekilde erişmenizi sağlar. Bu menüdeki tüm hizalama seçenekleri <img> etiketinin align niteliğini kullanır. align niteliğini <img> etiketine uygulanmış haliyle kullanmak artık tercih edilmeyen bir yöntemdir, çünkü bu satır içi, sunuma yönelik bir işaretleme şeklidir. Hizalama seçenekleri resmin bulunduğu geçerli satır temel alınarak uygulanır.
17
Align Niteliğini Kullanmak
RESİMLERLE ÇALIŞMAK Bu seçenekler: •Default : Bu seçenekte hiçbir align niteliği tanımlanmamıştır. •Baseline : Resmin altını metin satırının üzerine oturduğu taban çizgisiyle hizalar. •Top :Resmin üstünü satırdaki en yüksek öğeyle hizalar (bu öğe bir resim olabilir). •Middle :Resmin ortasını metin satırının üzerine oturduğu taban çizgisiyle hizalar. •Bottom :Resmin altını metin satırının üzerine oturduğu taban çizgisiyle hizalar (Baseline seçeneğiyle aynıdır).
18
Align Niteliğini Kullanmak
RESİMLERLE ÇALIŞMAK •TextTop :Resmin üstünü metin satırındaki en uzun boylu karakterle hizalar. Genellikle Top seçeneğiyle aynıdır (ama her zaman değil). •Absolute Middle :Resmin ortasını metin satırının ortasıyla hizalar. •Absolute Bottom : Resmin altını metin satırının en kısa boylu karakteriyle hizalar. •Left :Resmi sola kaydırır. Bundan sonra gelen metin, sağ tarafta resmin etrafını sarar. •Right :Resmi sağa kaydırır. Bundan sonra gelen metin, sol tarafta resmin etrafını sarar. Bu menüdeki seçenekler Left, Center ve Right hizalama düğmeleriyle aynı değildir. Menüdeki hizalama seçenekleri <img> etiketine uygulanır, ama yukarıda adı geçen üç hizalama düğmesi resimleri içeren blok elemanına (<p> etiketi gibi) uygulanır ve bu yüzden bu etiketin içindeki diğer her şey hizalama işleminden etkilenir, çünkü onlar da aynı bloğun bir parçasıdır.
19
Bir Resmin Etrafına Kenarlık Eklemek
Kimi zaman bir resmi vurgulamak için arka plandan ya da onu çevreleyen içerikten ayırmanız gerekir. Bu efekti oluşturmak için kullanabileceğiniz yöntemlerden biri, resmin etrafına bir kenarlık (border) eklemektir. Kenarlık, dikkati resmin üzerine çekebilir ve siteye daha hoş bir görünüm kazandırabilir. Bazen kenarlıklar bağlantıları göstermek için de kullanılabilir. Bir kenarlığı iki şekilde tanımlayabilirsiniz. RESİMLERLE ÇALIŞMAK 1. 2.
20
Resimlere İsim Atamak RESİMLERLE ÇALIŞMAK
Resim isimleri, her ne kadar çoğunlukla görünmeseler de Web sayfalarının önemli bileşenlerindendir. Resimlere birer isim atamak genel olarak iyi bir alışkanlıktır ve bu isimler script yazarken nesneyi tanımlamak için kullanılır.
21
Assets Panelini Kullanarak Resim
Eklemek RESİMLERLE ÇALIŞMAK Assets paneli, sitenizin bileşenlerini Dreamweaver içinden düzenleme imkânı sağlar. Bu aracı, çeşitli medya ve sayfa elemanlarını görmek ve düzenlemek için kul anabilirsiniz. Örneğin bütün resimlerinizi düzenlemeniz zor olabilir; özellikle de büyük bir site üzerinde çalışıyorsanız.Assets paneli ile bu resimleri kolayca takip edebilirsiniz. Assets penceresinin Site görünümünde sitedeki bütün resimler gösterilir. Resimler,herhangi bir belgede ister kullanılsın, ister kullanılmasın, bu pencerede otomatik olarak belirirler.
22
Assets Panelini Kullanarak Resim
Eklemek RESİMLERLE ÇALIŞMAK Panelin sitenizdeki bütün resim varlıklarının bir kataloğunu oluşturması birkaç saniye sürebilir. Sitenize yeni bir varlık eklediğinizde bu varlık Assets panelinde hemen görüntülenmeyebilir. Paneli, sitenizdeki tüm resimleri gösterecek şekilde güncellemek için site kataloğunu tazelemeniz gerekir. Bunun için Assets panelinin sağ alt köşesindeki Refresh Site List düğmesine tıklayın. Ayrıca Assets panelinde ilgili resmi seçebilir ve istediğiniz konuma sürükleyebilirsiniz. Bir resim dosyasının konumunu bulmak için söz konusu dosyayı seçtikten sonra Cmd tuşunu basılı tutup tıklayarak veya sağ tıklayarak açılan bağlam menüsünden Locate In Site komutunu seçebilirsiniz.
23
Assets Panelini Kullanarak Resim
Eklemek RESİMLERLE ÇALIŞMAK Assets panelini yatay olarak genişlettiğinizde FullPath sütununu görürsünüz. Bu sütunu kullanarak resimlerin nereye konduğunu görebilirsiniz
24
Resimleri Favori Listesiyle Yönetmek
Tekrar tekrar kullandığınız resimleri Favorite (Sık Kullanılanlar) listesine eklemeniz size önemli ölçüde zaman kazandırabilir. Sitenizdeki her resmi Favorite listenize ekleyebilirsiniz. Her sitenin kendi Favorite listesi vardır. Dreamweaver’ı kullanmaya başladığınızda bu liste boşturImages kategorisindeyken hem Site, hem de Favorite listesinde sitenizin içindeki belirli bir resmin konumunu bulmak için bağlam menüsünü kullanabilirsiniz. RESİMLERLE ÇALIŞMAK
25
Resimleri Favori Listesiyle Yönetmek
RESİMLERLE ÇALIŞMAK Resimleri Favori Listesiyle Yönetmek Bunun için bir resmi seçin ve bağlam menüsünden Locate in Site komutunu seçin. Site yapısında ilgili resim seçili hale gelecek şekilde Files paneli etkinleşecektir. Favorite listesinde oluşturduğunuz bir klasörü silmeniz gerekirse ilgili klasörü seçin ve Assets panelinin alt kısmındaki Remove from Favorites düğmesine tıklayın.
26
Bir Resmin Etrafındaki Boşluğu
Ayarlamak RESİMLERLE ÇALIŞMAK Metinleri resimlerin etrafına sararken ilgili resmin etrafındaki boşluğu da ayarlamanız gerekebilir. Başlangıçta belgenizdeki metin resme çok yakın olacaktır. Bu da metnin okunmasını zorlaştırabilir. Belirli bir miktarda boşluk yaratmak, sayfanızın yerleşim düzeninin daha güzel görünmesine yardımcı olacaktır. Boşluk ayarlarında piksel tabanlı bir ölçü kullanılır.
27
O RESİMLERLE ÇALIŞMAK Bir Resim Yer Tutucusu Eklemek
Asıl resim henüz hazır değilse bir resim yer tutucusu da ekleyebilirsiniz. Belgenize bir resim yer tutucusu ekleyerek asıl resmin sayfada metinler, tablolar veya diğer elemanlarla birlikte nasıl görüneceği hakkında yaklaşık olarak bir fikir elde edebilirsiniz. Images: Image placeholder düğmesi O Images: Image placeholder düğmesine tıklandığında Image Placeholder iletişim kutusu açılacaktır
28
Resim Düzenleme Tercihlerini Ayarlamak
RESİMLERLE ÇALIŞMAK Dreamweaver ile Web sayfaları oluştururken, kullandığınız resimlerde değişiklik yapma gereği duyabilirsiniz. Kapsamlı düzenleme işlemleri için resmi harici bir resim düzenleme programında açmanız ve gereken ayarlamaları o şekilde yapmanız gerekir. Dreamweaver bu işlemi, ilgili resmi, tanımladığınız bir programda hızlı bir şekilde açmanızı sağlayarak basitleştirir.
29
Temel Resim Düzenleme İşlemleri
RESİMLERLE ÇALIŞMAK Bazı temel resim düzenleme işlevlerine doğrudan Dreamweaver içinden erişebilirsiniz. Bunlar sayesinde harici bir editöre gerek kalmadan resminizde değişiklikler yapabilirsiniz. Sitenizde kul anacağınız resimleri yaratmak ya da önemli değişiklikler yapmak için harici bir resim editörüne ihtiyaç duysanız da, yerleşik halde bulunan Fireworks resim düzenleme özellikleriyle pek çok değişikliği (kırpmak, kontrastı ayarlamak, netleştimek gibi) doğrudan Dreamweaver belge penceresinde gerçekleştirebilirsiniz.
30
Resim Tabanlı Bağlantılar Oluşturmak
RESİMLERLE ÇALIŞMAK Kendi sitenizdeki ya da diğer sitelerdeki belgelere bağlanmak için resimlerden de faydalanabilirsiniz.Bağlantıları oluşturmak için metinlerde olduğu gibi resimleri de kolayca kullanabilirsiniz. Yerel dosya yapınızın dışında yer alan bir belgeye veya kök klasörünüzün dışında bulunan herhangi bir şeye bağlanabilmek için bir mutlak yol (absolute path) kullanmanız gerekir.
31
Resim Haritası Oluşturmak
RESİMLERLE ÇALIŞMAK Resmi, aktif alan (hotspot) adı verilen çeşitli bağlı alanlara da bölebilirsiniz. Burada resme aktif alanları yerleştirmek için bir resim haritası (image map) kul anırsınız. Söz konusu aktif alanlar istenilen şekillerde de olabilirler. Bir sayfada birden fazla resim haritası kullanabilirsiniz, ama aynı sayfadaki her haritayı farklı bir şekilde adlandırmanız gerekir. Resim haritalarınızı adlandırmayı unutursanız Dreamweaver her biri için otomatik olarak sıralı isimler oluşturur (Map1, Map2, Map3 vs.) Bu tür genel isimler, uygulandıkları resim haritası ya da resimlerle ilgili tanımlayıcı bir bilgi içermezler
32
Beni Dinlediğiniz İçin Teşekkür Ederim..
Kaynaklar:Dreamweaver 8 kitapçığı adobe dreamweaver 8 dersleri =
Benzer bir sunumlar
