Css ile Web Tasarım Dersleri: 2013

24 Nisan 2013 Çarşamba

FRAME (ÇERÇEVE)

—

—Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir.

—Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir.

frame name="..." src="..."

—Çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlar.

—src pencerede görüntülenecek html dosyasının yerini gösterir. Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketi kullanılır.

—FRAMESET etiketini HTML dosyanızın </head>...<body> etiketleri arasında kullanmayı unutmamalı!

—FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar;

—frameborder="..." (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.

—border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler.

FRAME (Devam)

—Örnekte 3 adet html dosyası vardır. Bunlardan frame.htm dosyası çerçeve komutlarını içermektedir. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildirmektedir.

Radyo Düğmeleri, Onay Kutuları

<input type="radio"> bir radyo düğmesi tanımlar. Radyo düğmeleri Kullanıcının seçimler sınırlı sayıda TEK seçmesine izin:

<form>

<input type="radio" name=“cinsiyet” value=“erkek">Erkek<br>

<input type="radio" name=“cinsiyet“ value=“kadın">Kadın

</form>

<input type="checkbox"> bir onay kutusunu tanımlar. Kutularını bir kullanıcıya bir seçimler sınırlı sayıdaki sıfır veya daha fazla seçenekleri seçmenize olanak verir.

<form>
<input type="checkbox" name=“araç" value=“Motosiklet">Motosikletim var<br>
<input type="checkbox" name=“araç" value=“Araba">Arabam var<br>

<input type="checkbox" name=“araç" value=“Araba">2 Arabam var
</form>

HTML Formlar

HTML formları bir sunucuya veri aktarmak için kullanılır.

Bir HTML formu metin alanları, onay kutuları, radyo düğmeleri, gönderme düğmeleri ve daha fazlası gibi girdi unsurları içerebilir. Bir form ayrıca, textarea, fieldset, efsane ve etiket elemanları seçim listeleri içerebilir.

<FORM> Bir HTML formu oluşturmak için kullanılır:

<form>
.
input elements
.
</form>

HTML Formları - Girdi Eleman

En önemli unsur formu <input> elemanıdır.

<input> Öğesi kullanıcı bilgileri seçmek için kullanılır.

Bir <input> eleman türü öznitelik bağlı olarak, çeşitli şekillerde değişebilir.

Bir <input> eleman türü, metin alanı, onay, şifre, radyo düğmesi, düğme göndermek olabilir

Metin Alanları

<input type="text"> bir kullanıcı metin girebileceğiniz bir tek satır giriş alanı tanımlar:

<form>

First name:<input type="text" name="firstname"><br>

Last name :<input type="text" name="lastname">

</form>

<input type="password"> bir şifre alanı tanımlar:

<form>
Password: <input type="password" name="pwd">
</form>

Not: Bir parola alanına karakter (yıldız veya daireler olarak gösterilmiştir) maskelenir.

Tablo Özellikleri

tablo ve tablo elemanlarının görünümünü düzenlemek için tablo özellikleri eklenmiştir. Tablolar diger HTML elemanlarından daha farklı kendine has elemanlardır ve farklı özellikleri vardı

§ Baslık Konumu Özelliği (table-layout)

§ Tablo Planı özelliği (caption-side)

§ Hücre Boşluklarını ayarlama (border-collapse)

§ Hücre Dışı boşluklarını ayarlama (border-spacing)

§ Bos hücre ayarları (empty-cells)

1. Baslık Konumu Özelliği (table-layout)

Normalde tablolar içeriğindeki bilgiye göre genişliğini arttırır. Bu bize bir esnek kazandırır ancak bazen tablo genişliğimizin sabit kalmasını isteriz.

table-layout:fixed değeri tablo genişliğimizi sabitlememizi sağlar.

Tablelayout: auto ise tablo genişliğini içeriğe göre arttırır.

2. Tablo planı özelligi (caption-side)

caption-side: Tablonun başlığının(<caption>) nerede (altta mı üstte mi)

olacağını belirler.

3. Hücre Boşluklarını ayarlama (bordercollapse)

border-collapse, tablo hücrelerinin etrafındaki kenarlık ile olan mesafeyi azaltmayı veya açmayı sağlar.

separate ataması yapılmış ise hücreler arasına bir kaç piksellik mesafe konur, HTML içinden bu boşlukları <table> etiketinin cellspacing özelliği ile kaldırmak istenirse tarayıcılar iki kenarlığı bir biri üstünde gösterecektir.

Eğer collapse değeri verilirse iki hücre arasındaki mesafe kalkacaktır ve tek kenarlık görünecektir.

4. Hücre dışı boşluklarını ayarlama (borderspacing)

border-spacing, normal uzunluk değerleri alır ve bordercollapse:

separate ile birlikte kullanılır. Eğer tek değer verilirse bu tüm kenarlar için geçerlidir, iki değer atanırsa ilki yatayda boşluk için ikincisi

dikey de boşluk vermek için tanımlanmıştır.

5. Bos hücre ayarları (empty-cells)

Bir tabloya bazı değerler atadığımızda(örnegin kenarlık değeri) bos olan

hücreler bu değeri görmez, bu durumu düzeltmek için bos olan hücreler

için bos karakter( ) kullanılır.

empty-cells özelliği ile bos kalan hücrelere nasıl davranması gerektiği bildirilir.

show değeri ile hücrenin içeriği olan hücreler ile aynı özellikleri almasını s

hide değeri ile de hücrenin yokmuş gibi davranmasını sağlanır.

21 Nisan 2013 Pazar

HTML ÖZEL KARAKTER STİLLERİ

Hazırladığımız dokümanda kullanmak istediğimiz özel karakter stilleri olabilir. Örneğin bir yerden alıntı yapmak istediğimizde, alıntı yaptığımız yazıların biraz eğik (italik gibi) görünmesini isteyebiliriz. Ya da bazı vurguladığımız kısımların daha çok göze çarpmasını isteyebiliriz. HTML’ de bu gibi özellikleri sağlayan belirteçler de vardır. Bunlar aşağıdaki gibidir.

<EM> Önemli bir yazı </EM> {Bu belirteç vurguyu belirtmek için kullanılır. (Dışarıya biraz eğik çıkar.) }

<STRONG> Çok önemli bir yazı </STRONG> {Bu belirteç çifti güçlü vurguyu belirtir. (Dışarıya biraz koyu çıkar.) }

<CODE> Yazılar yazılar </CODE> {Bu belirteç çifti yasa, kural belirten yazılar için kullanılır. }

<SAMP> Örnek </SAMP> { Örnek çıktı }

<VAR> Değişken, emin değil </VAR> {Değişken, kararsız }

<DFN> Tanımlama </DFN> {Bu belirteç çifti tanımlama belirten yazılar için kullanılır. (Dışarıya hafif eğik çıkar.)}

<CITE> Alıntı </CITE> {Bu belirteç çifti alıntı yazılar için kullanılır. }

<SMALL> Küçük yazı </SMALL> {Bu belirteç çifti arasında yazılan yazılar dışarıya çok küçük çıkar. }

<BIG> Büyük yazı </BIG> {Bu belirteç çifti arasında yazılan yazılar dışarıya çok büyük çıkar. }

<ADDRESS> Yazarın Adresi </ADDRESS> {Bu format yazarın adresini yazmak içindir. }

<BLOCKQUOTE> İçeriden başla </BLOCKQUOTE> {Bu belirteç çifti arasına yazılan yazı sayfanın hem sağından hem solundan içeriye kayar. }

<DIV ALIGN=LEFT|CENTER|RIGHT> Herhangi bir yazı ya da yazı grubu </DIV> {Bu belirteç çifti herhangi bir yazı ya da yazı grubunun sağa, sola ya da ortaya yaslanmasını sağlar. }

<CENTER> Ortalanacak yazı </CENTER> {Bu belirteç çifti yazı ve resimleri sayfada ortalar . }

<PRE> Formatlı metin </PRE> {Bu belirteçler arasına yazılan her şey, yazıldığı gibi ekrana çıkar. Boşluklar, tab' lar, satır bölmeleri vb korunur. }

<BLINK> Yanıp sönen yazı </BLINK> {Bu belirteç çifti arasına yazılan yazılar dışarı çıktıklarında bir yanıp bir sönen şekilde görünürler.}

18 Nisan 2013 Perşembe

Dreamweaver da yeni site oluşturma

Öncelikle dreamweaver açılır. Site menüsünden new site ye tıklanır.

Karşımıza aşağıdaki ekran gelecektir.

Sitemizin adını ve bulunduğu dizini belirtiyoruz.

Bu ekrandan ise resimlerimizin bulunacağı varsayılan klasörü gösteriyoruz.

Ardından save dediğimiz taktirde sitemiz oluşturulmuş olur.

Çoklu Sütun Özellikleri

Bu işlem, ayrı paragraflar oluşturmak için formatlama sorunları yaşamadan içeriğiniz için çoklu sütunlar oluşturulmasını sağlar. Sütun sayısını istediğiniz miktara göre değiştirebilirsiniz.

Webkit nedir?: WebKit, web tarayıcılarına web sayfalarını işlemesine izin vermek için tasarlanmış bir yerleşim moturudur

Ne işe Yarar?:

Webkit motoru penceredeki web içeriğini görüntülemek için bir sınıflar kümesi sağlar ve bağlantılar gibi kullanıcı tarafından tıklandığı zaman tarayıcı özellikleri gerçekleştirir.

CSS3 Çoklu Sütunlar

CSS3 ile, metin atma için birden çok sütun oluşturabilirsiniz

birden çok sütun özellikleri:

Sütun sayısı

Sütun boşluğu

Sütun kuralı

Çoklu sütunlar oluşturma

Sütun sayısı özelliği sütun sayısının ayrılabilir olduğunu belirtir:

column-count: number|auto;

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

<!DOCTYPE html>

<html>

<head>

<style>

.GS

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

}

</style>

</head>

<body>

İçerdeki bu taş ve mermer salonda sizi "VATAN" ve "GALATASARAYLILIK" sevgisi karşılayacaktır. Kapının tam karşısındaki bölümde yalın olmasına karşın görkemli bir anıtta vatan uğruna şehit düşen Galatasaray Lisesi öğrencilerinin listesi yer almaktadır. Bu anıtı gördükten sonra "fazla söze gerek olmadığını“ siz de anlayacaksınız. Salonun, giriş kapısına göre sağ tarafında, Osmanlı İmparatorluğu'nun 1910 senesi hudutlarını gösteren bir harita, haritanın her iki yanında ise şehit olan gencecik yurtseverlerin fotoğrafları sıralanmıştır. Ve haritanın üstünde bir ibare: "Galatasaray'ın bu kahraman evlatları, 500 yıllık bu vatan topraklarını kurtarmak için şehid düştüler. Çoğu öğrenciyken gönüllü olarak katıldıkları savaşlarda şehit olan bu yurtseverler hiçbir zaman unutulmadı.

</div>

</body>

</html>

17 Nisan 2013 Çarşamba

Web tasarımı örnekleri 2

Tasarlamış olduğumuz kişisel bir web sitesi örneği.

Basit ve göze hoş gelen bir tasarım oluşturulmak istenmiştir.

Html tabanlı olup css kodları ile tasarım zenginleştirilmiştir.

Web tasarımı örnekleri 1

Web tasarım örneği olarak sunduğumuz ilk içerik.

Css ve html kullanılarak oluşturulmul ticari web sitesi tasarım örneği.

Jquery sileder kullanılarak sitenin tasarımı geliştirilmiştir.

İçeriği css ile sütunlara bölme

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

<style>

#sorular{

-moz-column-count:2;

-webkit-column-count:2;

column-count:2;

width:900px;

margin:0 auto;}

</style>

</head>

<body>

</div>

</body>

</html>

LİSTE HAZIRLAMAK

Listeler de incelenmesi gereken önemli bir konudur. Listeleri dört grupta inceleyebiliriz.

1- Sırasız (Unordered) Listeler: Bir seçenek belirtilmezse, siyah noktalı listeler oluşturur.

<UL>

<LI> Win 98

<LI> Win NT

</UL>

Fakat, siyah nokta yerine, içi boş daire ya da kare şekli çıkarmakta mümkündür. Bunun için kullanılması gerekli seçenek TYPE seçeneğidir.

TYPE seçeneğinin alabileceği değerler disc, circle ve square’ dir.

2- Sıralı (Ordered) Listeler: Bir seçenek belirtilmezse, 1, 2, 3 … numaralı listeler oluşturur.

<OL>

<LI> Win 98

<LI> Win NT

</OL>

Burada da type seçeneğini kullanarak değişik sıralı listeler yaratmak mümkün olur.

<LI TYPE= #> # = A, a, I, i, 1

3-Açıklamalı Listeler:

<DT> Win98

<DD> Bir işletim sistemidir.

<DT> WinNT

<DD> Arayüzü Windows 95’ e çok benzeyen bir işletim sistemidir.

</DL>

4-İç içe Listeler:

Tüm liste çeşitleri, 3'den fazla bölüm kullanmadıkça iç içe yazılabilir. Örnek olarak;

<UL>

<LI> İç Anadolu illeri

<UL>

<LI> Kırşehir

<LI> Kayseri

</UL>

<LI> Kırşehirdeki üniversiteler

<UL>

<LI> Gazi

<LI> Erciyes

</UL>

Ekran Görüntüsü de aşağıdaki gibi olacaktır.

• İç Anadolu illeri

o Kırşehir

o Kayseri

• Kırşehirdeki üniversiteler

o Gazi

o Erciyes