Css ile Web Tasarım Dersleri

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>