11 Ocak 2012 / Çarşamba. Spry menü aktifken, açılır menu ekleyebiliyoruz. Spry Menu Bar OK

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "11 Ocak 2012 / Çarşamba. Spry menü aktifken, açılır menu ekleyebiliyoruz. Spry Menu Bar OK"

Berk Çubukçu
7 yıl önce
İzleme sayısı:

11 Ocak 2012 / Çarşamba Spry menü aktifken, açılır menu ekleyebiliyoruz. Spry Menu Bar OK Bunlar link, onların arka plan rengini, yazı rengini değiştirebiliriz. Sağdan, ul.

1 11 Ocak 2012 / Çarşamba Spry menü aktifken, açılır menu ekleyebiliyoruz. Spry Menu Bar OK Bunlar link, onların arka plan rengini, yazı rengini değiştirebiliriz. Sağdan, ul.menubarhorizontal a üzerine gelip çift tıklayıp özelliklerini açıyoruz ve Arka plan rengini ve yazı rengini değiştirelim (Paddinge değerler vererek yazıların hücre içindeki yerlerini ayarlayabiliriz ) Live viev yapınca linklerin üstüne gelince yine varsayılan renklerde oluyor. 1

2 Bu renkleri değiştirmek için sağdan ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuvisible Burada renkleri değiştirelim arka plan rengini kırmızı,yazı rengini koyu yeşil yapalım Hücrelerin genişliği için sağdan ul.menubarhorizontal li içindeki yazıya göre genişlemesi için genişliğine değer vermemeliyiz,yani genişlik boş olmalı. 2

3 Dikkat edersek Ürünler hücresi ile Kampanyalar hücresinin genişliği farklı Peki alt maddeler için neyi kullanacağız? Sağdan ul.menubarhorizontal ul li Biz bunu boş bir yerde kullanmayacağız, Şablonumuzun içinde kullanacağız. Örneğin menu divinin içine ekleyeceğim. Ya menuye yükseklik veririz yada spry menunun bittiği yere temizlik divi ekleyeceğiz.split olarak açıp </ul> nin bittiği yere gelip, imleç yanıp sönerken insert div tag yapıyoruz. Insert Div Tag At insertion point, ID : Temizlik New CSS Rule #temizlik OK 3

Açıklama yazılarını silelim Dikkat : Bir şeyin üstüne gelince uyarı kutucuğu çıkması yani tool tip için google dan jquerytooltip diye aratıyoruz.

4 Açıklama yazılarını silelim Dikkat : Bir şeyin üstüne gelince uyarı kutucuğu çıkması yani tool tip için google dan jquerytooltip diye aratıyoruz. JQUERY ile yapılan uygulamalar fancybox, 12 Ocak 2012 / Perşembe Yeni sayfa açıyoruz.(ilk.html). Javascript kodları <head> </head> etiketleri arasına yazılır. </head> etiketinin bitiminden hemen öncesine yazılır. Javascript kodları <script> etiketiyle başlar. <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>1</title> <style type="text/css"> </style> <script type="text/javascript"> </head> 4

5 Örnek : Mesaj uyarısını veren kodu yazalım. <script type="text/javascript"> alert ("Merhaba"); </head> Sonra javascript kodu kapatalım <script type="text/javascript"> alert ("Merhaba"); </script> </head> Live view ile çalıştırıyoruz Yeni sayfa açıyoruz (ikinci.html) Masa üstündeki jquery.fancybox klasörünü açıyoruz.içini inceliyoruz, fancybox klasöründe bir sürü şey var,jquery.js dosyası, style dosyası var bu üçünü kopyalayıp kendi dosyama yapıştırıyorum 5

6 Dreamweaverda File Open Fancybox klasöründeki index.html yi açıyoruz. 6

Code bölümüne girip Title etiketinin hemen altında başlayan <script> kodlarını </script> aralığını seçip kopyalıyoruz ve kendi sayfamıza gelip </head> tag inin

7 Code bölümüne girip Title etiketinin hemen altında başlayan <script> kodlarını </script> aralığını seçip kopyalıyoruz ve kendi sayfamıza gelip </head> tag inin hemen üstüne gelip yapıştırıyoruz. Sayfamızın design bölümünde Resmi açmak için tıklayınız yazısını yazıyoruz. Bu yazıyı seçip Atatürk resmini link veriyoruz. 7

8 İndex.html yi açıyorum bir resmin üstüne tıklayıp cod bölümüne bakıyoruz. Link tag ine bakınca - id= example1 yazdığını görüyoruz. Bizde linkimizin olduğu yere id= example1 yazısını ekliyoruz Çalıştırıyoruz 8

9 Diğer örnekleri de uygulayıp farklı animasyonları çalıştırıyoruz. Örneğin aşağıda birden fazla resmin kenardaki oklarla değiştirildiği durum var onu tıklayıp koduna bakıyoruzki orada rel="example_group" yazıyor, bunu linklerimize yazıyoruz. 13 Ocak 2012 / Cuma Köşe yuvarlatmaca : Sayfamıza dis adında bir div ekliyoruz,width:900px,ortalanmış ve mavi renkli. Bunu eklediğimizde <head> </head> tag leri arasına style atar Köşeleri yuvarlatma kodlarını süslü parantezin { } blogların içine yazıyoruz. border-radius: 10px; /* Standart */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari ve */ 9

Çalıştırıyoruz Dive gölge vermek için box shadow Gölge css3 kodu:(mozilla, chrome ve internet explorer 9da çalışır) -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888;

10 Çalıştırıyoruz Dive gölge vermek için box shadow Gölge css3 kodu:(mozilla, chrome ve internet explorer 9da çalışır) -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; Kayan Yazı : <marquee> yazılar </marquee> etiketi içeriisndeki yazıları soldan sağa kaydırır. aşağıdan yukarıya kayması isteniyorsa; <marquee direction="up"> yazılar... </marquee> kodu kullanılır. 10

11 Dreamveawera bilgisayarda yüklü, farklı bir tarayıcıyı tanıtmak için; 11

12 12 Chrome programını seç

Benzer belgeler

4 Ocak 2012 / Çarşamba. Renk uyumunu seçmek için google colorschemedesigner http://colorschemedesigner.com/ RGB ye tıklayınca bir pencere çıkıyor

4 Ocak 2012 / Çarşamba. Renk uyumunu seçmek için google colorschemedesigner http://colorschemedesigner.com/ RGB ye tıklayınca bir pencere çıkıyor 4 Ocak 2012 / Çarşamba Renk uyumunu seçmek için google colorschemedesigner http://colorschemedesigner.com/ RGB ye tıklayınca bir pencere çıkıyor 1 O pencereye rengimizin kodunu girince ayarlar gözüküyor.örneğin