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

Transkript

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

2 O pencereye rengimizin kodunu girince ayarlar gözüküyor.örneğin 0B6E9E için Bu rengin kontrastı için Complementine tıklıyoruz 2

3 Sayfaya dis,onun içine banner,menu,icerik,altlik divlerini ekliyoruz.bunların içine bir şeyler girince divler arası boşluğun değişmemesi için divlerin dışına boşluğa tıklayıp New CSS rule deyip Tag p Margin=0 yapıyoruz. Menunun içine Ana Sayfa hakkımızda İletişim yazıp Aşağıda Properties panelindeki link bölmesine tıklayıp AltGr+3 ile # işareti vererek link yapıyoruz. Linklerden birinin üstüne gelip tıklayınca aşağıda <a> özelliğine tıklayıp etkinleştiriyoruz ve New CSS Rule deyip Margin Right = 15px deyip yazıların aralığını açıyoruz. Menu divine girip Padding ine 20 px yapıyoruz.ki yazılar divin içine ortralansın. 3

4 5 Ocak 2012 / Perşembe Yeni site tanımlayıp disdiv,içine banner,altına menu,altına icerik, altına altlik divlerini ekliyoruz. Disdivin genişliği 900px,içine eklenen divlere genişlik vermiyoruz ve ortalama yapmıyoruz. Dis divin içine ortalanarak otomatik olarak yerleştiriliyor. Diyelim yanlış div ekledik. Sağdan CSS styles panelinden siliyoruz.sahnemizde div e gelip tıklayıp aşağıdan onu etkinleştirip onu da siliyoruz.div içine bölüm ekleyip sağa, sola yaslamak için box içindeki Float kullanılıyor. icerik div imizin içine 500px genişliğinde ve sola yaslalı sol divini ekleyeceğiz. Insert div tag After start of tag <div id= solicerik > ID : sol New CSS rule #solicerik OK Box width : 500px Float : Left OK 4

5 Bunun yanına sağ div i ekleyeceğiz Insert div tag After tag <div id= solicerk > ID : sagicerik New CSS rule #sagicerik OK Box width : 350px Float : Right OK Dikkat : Float kullanılınca son kullanılan div den sonra temizlik Div i kullanılmalı. yoksa sol veya sağ divler içine ekleme yapınca dışarı taşar. 5

6 Insert div tag After tag <div id= sagicerik > ID : temizlik New CSS rule #temizlik OK Box Clear : both OK 6

7 Banner içine çeşitli divler ekleyip içlerine resim, logo, v.s. ekleyeceğim ama bunları istediğim gibi taşıyıp ayarlayabilmek için banner divinin içine girip positioningini relative yapacağız. Bannerin içine div ekleyip positioningini absolute yapıyoruz. Insert div tag After start of tag <div id= banner > ID : resim1 New CSS rule #resim1 OK Positioning : Absolute 7

8 Resim1 divini istediğim yere taşıyorum büyüklüğüne kenarından çekiştirerek değiştirebilirim. Slogan için de ekleme yapacağız. Insert div tag After start of tag <div id= banner > ID : slogan New CSS rule #slogan OK Positioning : Absolute OK Diyelim slogan div inin içine yazdıklarımız banner divinin dışına taştı, banner div i genişlemez onun için banneri taşmayacağız. 8

9 Diyelimki logo için bir genişlik ayarladım ve o kadar genişlikte logo ekleyeceğim. Sahneyi Print Screen yapıp photoshop açıyoruz. File New yapınca belgemiz kadar büyüklükte sayfayı otomatik olarak açıyor Ctrl+V ile sahnemizi yapıştırıyoruz. 9

10 Crop tool ile logomuz kadar yeri seçip enter yapıyoruz. LOGO yazıyoruz.(font : Segeo Script) Layer 1 i ve Background katmanlarını siliyoruz. Böylece yazı katmanını transparan yapmış oluyoruz ve bunu.png olarak kaydediyoruz.daha sonra, Dreamweaver da logo divimizin içine image olarak ekliyoruz.divin içindeki açıklama yazılarını siliyoruz. 10

11 Live viev yapıyoruz Bunu sürükleyerek istediğim yere taşıyabiliyorum Bunu başka yerlere de taşıyabilirim. Peki farkı ne? banneri başka yere götürünce bu da onunla birlikte gelir. Body mizin arka planı gradientli renk olsun istiyoruz. Önce küçük bir çubuğa istediğimiz renk geçişini yapıyoruz.body tag i açıp Background da resmi seçiyoruz.repeat:x yapıp Apply diyoruz.back-ground color olarak alttaki rengi seçiyorum 11

12 12