Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

RESİMLERLE ÇALIŞMAK Hazırlayan:Rabia ÜNLÜ Bölüm:Bilgisayar Programcılığı İ.Ö Numara:61120000019.

Benzer bir sunumlar


... konulu sunumlar: "RESİMLERLE ÇALIŞMAK Hazırlayan:Rabia ÜNLÜ Bölüm:Bilgisayar Programcılığı İ.Ö Numara:61120000019."— Sunum transkripti:

1 RESİMLERLE ÇALIŞMAK Hazırlayan:Rabia ÜNLÜ Bölüm:Bilgisayar Programcılığı İ.Ö Numara:

2 o Bir sayfadaki resimlerin konumunu değiştireceğiz. o Resimlerinize isim ve alt nitelikleri atayacağız. o Assets panelini kullanarak resimleri yöneteceğiz. o Metnin belirli bir bölümünü bir resmin etrafına saracağız o Resim yer tutucularını kullanacağız. o Temel resim düzenleme araçlarını kullanarak resimlerde ayarlamalar yapacağız. o Metinleri resimlere göre hizalayacağız. RESİMLERLE ÇALIŞMAK BU DERSTE BUNLARI ÖĞRENECEĞİZ : o Resim formatlarını tanıyacak ve aralarındaki farkları göreceğiz. o Bir sayfaya çeşitli resimler ekleyeceğiz o 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 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 etiketini yeniden tanımlar.

5 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Bir Arka Plan Resmi Kullanmak 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.

6 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 RESİMLERLE ÇALIŞMAK Bir Arka Plan Resmi Kullanmak

7  Attachment  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  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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Bir Arka Plan Resmi Kullanmak

8 Sayfaya Resim Yerleştirmek. gif 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK

9 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Sayfaya Resim Yerleştirmek

10 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Sayfaya Resim Yerleştirmek

11 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). RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Sayfaya Resim Yerleştirmek

12 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Sayfaya Resim Yerleştirmek

13 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 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 etiketinin bir niteliğidir. Sayfaya Resim Yerleştirmek RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK

14 Resimleri Yeniden Boyutlandırmak ve Tazelemek 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. (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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK

15 Resimlerin Yerleştirilmesi 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK

16 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 etiketinin align niteliğini kullanır. align niteliğini 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Align Niteliğini Kullanmak

17 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Align Niteliğini Kullanmak 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 RESİMLERLE ÇALIŞMAK 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 etiketine uygulanır, ama yukarıda adı geçen üç hizalama düğmesi resimleri içeren blok elemanına ( 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. Align Niteliğini Kullanmak

19 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK 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

20 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Resimlere İsim Atamak 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 RESİMLERLE ÇALIŞMAK 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. Assets Panelini Kullanarak Resim Eklemek

22 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Assets Panelini Kullanarak Resim Eklemek

23 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 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Assets Panelini Kullanarak Resim Eklemek

24 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK 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.

25 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Resimleri Favori Listesiyle Yönetmek

26 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Bir Resmin Etrafındaki Boşluğu Ayarlamak 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 RESİMLERLE ÇALIŞMAK 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 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK Resim Düzenleme Tercihlerini Ayarlamak 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 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. RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK

30 Resim Tabanlı Bağlantılar Oluşturmak Kendi sitenizdeki ya da diğer sitelerdeki belgelere bağlanmak için resimlerden de faydalanabilirsiniz.Bağlantıl arı 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 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 RESİMLERLE ÇALIŞMAK RESİMLERLE ÇALIŞMAK

32 Kaynaklar:Dreamweaver 8 kitapçığı adobe dreamweaver 8 dersleri = https://www.google.com.tr/search?q=adobe+dre amweaver+dersleri&oq=adobe&aqs=chrome.1.69i5 7j69i59l2j69i60l2j0.7544j0j1&sourceid=chrome&espv= 210&es_sm=122&ie=UTF- 8#es_sm=122&espv=210&q=adobe+dreamweaver+8 +dersleri&spell=1 Beni Dinlediğiniz İçin Teşekkür Ederim..


"RESİMLERLE ÇALIŞMAK Hazırlayan:Rabia ÜNLÜ Bölüm:Bilgisayar Programcılığı İ.Ö Numara:61120000019." indir ppt

Benzer bir sunumlar


Google Reklamları