İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir.

Transkript

1 21 Aralık 2011 / Çarşamba Önce bir site tanımlayacağız, yani önce çalışacağımız klasörü oluşturacağız. Bunun içinde, bir de resim klasörünü oluşturacağız. Görünüm : Classic Site Manage Site sitede düzenleme yapabiliriz. Sağda dosya seçili iken sağ tıklayıp rename yapabiliriz.sağdaki panelden refresh yapabiliriz. Yazıyı seçip Properties panelinden koyu, italik yapabiliriz. İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir. 1

2 Örneğin burada KUMDAKCI nın üstüne imleci getirdiğimde aşağıda sırasıyla italik(em)- koyu(strong)-body tag inin içinde olduğunu gösteriyor. İtaliğe (<em>) tıklatınca orayı seçiyor. Yazıda belirli düzen olması için sayfamızın içindeki yazıların başlıkları format kısmından seçiyoruz. Yazının üstüne imleci getirip tıklayıp Format tan Heading1 i seçiyoruz. Yazıyı otomatik olarak başlık yapıyor. 2

3 Başlığımızın rengini v.s. özelliklerini değiştirebiliriz. Şöyle ki ; 1nci yol : Üstteki menüden Modify Page Properties 2nci yol : Alttaki Properties panelinden Page Properties düğmesini tıklayarak açılan pencereden Headings seçeneğinden istediğimiz değişiklikleri yapabiliyoruz. Links (CSS)seçeneğinden linklerimizin özelliklerini değiştirebiliriz. 3

4 Sayfanın genel özelliklerini modify page properties den değiştirebiliriz. 28 Aralık 2011 / Çarşamba Appearence (CSS) : yazı tipi v.s. özelliklerini Links (CSS) : Rollover links : fare üstüne geldiğinde Active links : Linke tıklandığında Sayfanın görünümünü Classic seçiyoruz. Named Anchor : Sayfanın ortalarına yani nereye gidilmesini istiyorsak oraya imleci getirip tıklayıp Named Anchora tıklıyoruz. Karşımıza pencere geliyor. 4

5 Anchor Name : burasi yazıyoruz.ok dediğimizde buraya çipa işareti konuyor Sayfanın başına gelip buraya link vereceğimiz yazıyı seçip propertiesden link bölümüne #burasi yazıyoruz. Çalıştırınca çipanın olduğu yere gidiyor. Horizontal Rule : Yatay çizgi ekler %:,dışındaki pencereye göre oranı değiştirir. Bunu piksel verince sabit genişliğini korur. 5

6 İmage : Resim ekliyoruz.ancak resmin kenarlarından küçültünce boyutu değişmez. Değiştirmek için Edit Image Settings den yararlanırız. Rollover image : Üzerine gelince resim değişiyor.aynı boyutlu iki resim. Flash dosyası eklemek için Flash dosyası File Export Export Movie Masa Üstü Dosya adı : sekil Dreamweaver a geliyoruz media : swf seç OK FLV uzantılı video ekliyoruz, avi uzantılı ise FLV ye dönüştürmeliyiz. Widget Browser : ,şifre Download Keywords : sitemizin arama motorunda hangi kelimeler arandığında çıkması için.siteyi tanımlayacak kelimeler Bu arama motorları için önemli. Kod kısmında meta etiketine yazar 6

7 CSS : New CSS Rule Tag body this document only Body ye arka plan resmi konunca bunun yerini ayarlayabiliyoruz. 7

8 Her Enter e tıklayışımızda yeni bir paragraf açar.yukarıdaki örnekte Merhaba İyi yıllar Enter Ne var ne yok Enter Enter Enter Yapılmış, arka plan image ı ve arka plan renginin yapısını görebiliriz. 8

9 P tagına özellikler veriyoruz.yazıda entere basınca yeni paragraf açıyor. 29 Aralık 2011 / Perşembe Category Type Sadece yazıların özellikleri için. Yeni font eklemek için font family Edit Font List. İnternetten de font indirebiliriz. Ancak bu fontun kullanıcının bilgisayarında da olması gerekir değilse varsayılan tipinde görülür, dolayısıyla bozuk gözükebilir. Ama photoshop ta resim olarak kaydedip yüklersek problem olmaz. Line-height : satırlar arası boşluğu değiştirir. Yazının boyutu değişmez. Fonweight : yazının kalınlığı Font-variant, Text-transform : Yazılara küçük büyük harf v.s. yapmak için ancak Türkçr karakterlerde hata veriyor. Blink : yazının yanıp sönmesi ama yeni tarayıcılar desteklemiyor. İnternette renk kombinasyonları ile ilgili siteler var google color scheme Colorschemedesigner.com Block : Yazının hizalanmasını sağlıyor. Text-align : justify(iki yana yasla),left,right,center Box : Kutuları boyutlandırma ve hizalandırma. Padding : Hücre içindeki yazının resmin v.s. hücre kenarına olan uzaklığı Margin : hücreler arası uzaklık Ödev : 900x120 px resolution=72 bir banner hazırlayacağız Border : kenarlık özellikleri Resimlere özellik verme Tag i img Class : kullanılacak biçim. İsmini biz veriyoruz, Türkçe karakter ve boşluk kullanmadan. Örneğin vurgulu isimli bir class ımız olsun. 9

10 Buna OK deyince sayfada bir değişiklik olmuyor. Bir yazıyı seçip Properties den Class vurgulu seçtiğimizde özelliklerini değiştiriyor. Bunu resimlere v.s. uygulayabiliriz. Örneğin kenarlık diye bir class CSS oluşturalım. İki resim ekleyelim, birine kenarlik classını uygulayalım,diğerine uygulamayalım. 10

11 ID : Yeni sayfa açıp, Bir div ekleyeceğiz. Insert Div Tag Insert : At insertion point ID:banner new CSS rule OK özellikler ver. Banner divinin altına, menu adlı Yeni div ekleyeceğiz Insert Div Tag Insert : after tag <div id= banner > ID:menu new CSS rule OK özellikler ver. Banner ile menu divinin arasını açmak için, banner divinin bottom margin ini 20px yapalım. 30 Aralık 2011 / Cuma Etiketler başında hiç bir şey yok. Class ların başında nokta var. ID : sadece o alana özgü CSS verilir. Div ler ID ile yapılır.id lerin başında # işareti olur. Sabit yükseklik olmayacaksa yükseklik değeri vermeyeceğiz. İçine ekleme yaptıkça yükseklik değişir. Ancak minimum yükseklik verebiliriz. Div i seçip sağdaki properties den Add Property yi tıklıyoruz min-height 50px 11

12 En dıştaki Div in içine ilk divi eklerken (banner) Insert : After Start of Tag <div id = endisdiv > diyoruz. Genişlik ve ortalama yapmıyoruz. Çünkü varsayılan olarak, en dış divin içi kadar genişlikte ve içine ortalanarak yerleşiyor. Daha sonraki div leri eklerken Insert : After Tag <div id = banner > diyoruz. Yine genişlik ve ortalama yapmıyoruz. Aynı şekilde icerik ve altlik divlerini ekleyeceğiz. Divler arasına boşluk vermek için banner,menu,icerik,altlik divlerine margin-bottom:10 px yapıyoruz. Dikkat: Örneğin icerik Divinin içine bir şeyler yazınca ve entere basınca üstteki divle arasındaki aralık açıldı. Çünkü her entere basınca paragraf ekliyor. Paragrafların da varsayılan margini var.bu nedenle boşluk oluşturuyor. Bunu engellemek için p (paragraf) tag için New CSS Rule açıp orada Margin i same for all da sıfır yapıyoruz. Menu divinin içine padding vererek yazıların kenara olan uzaklığını ayarlıyoruz. Sadece, menu divinin içindeki link e özel, özellikler verebiliriz ki bu özellikler sadece bu divin içindeki linklere uygulanır. Sayfanın diğer linklerinin özelliklerine benzemez. Bunu yapmak için menu divinin içindeki Ana Sayfa linkinin yazısının üstüne gelip tıklıyoruz. Aşağıda <a> yı tıklayıp aktif hale getiriyoruz. CSS Styles panelinde New Css Rule yapıyoruz. Selector Name : #endisdiv#menu a İşareti çıkıyor. Artık istediğimiz değişiklikleri yapabiliriz ve bunlar yalnızca menü div inin içindeki linklere uygulanır. 12

13 Fare üzerine geldiğinde (hover) özelliklerin değişmesi için menu divinin içindeki Ana Sayfa linkinin yazısının üstüne gelip tıklıyoruz. Aşağıda <a> yı tıklayıp aktif hale getiriyoruz. CSS Styles panelinde New Css Rule yapıyoruz. Selector Name : #endisdiv#menu a:hover yazıyoruz. Hover özelliği illa link olması gerekmiyor. Örneğin Paragrafa hover özelliği verebiliriz.aynı şeyleri yapıyoruz. Fareyi paragrafın üstüne getirip tıklıyor ve aşağıdan <p> yi tıklayarak etkinleştirip New Css Rule yapıp istediğimiz özellikler veriyoruz. Ancak hover yazısını eklemeyi unutmamalıyız. Selector Name : #endisdiv#icerik p:hover yazıyoruz 13