2017-2018

Web Tasarımı Ders Notları

Özgür YAMAN


Zaman Planlaması

HAFTA

KONU

23 Ekim

Pseudo - Background - Kutu Modeli

30 Ekim

Kutu Modeli - Kutu Modeli (border) - Quiz

6 Kasım

Genel Uygulama - 10 Kasım için Site Uygulaması

13 Kasım

Sınav Haftası (Cuma)

20 Kasım

Position - PSD → HTML Dönüşümü

27 Kasım

PSD → HTML Dönüşümü

4 Aralık

PSD → HTML Dönüşümü

11 Aralık

Tablolar (HTML) - Tablolar (CSS) - PSD → HTML Dönüşümü

18 Aralık

Formlar (HTML) - Formlar (CSS) - PSD → HTML Dönüşümü

25 Aralık

PSD → HTML Dönüşümü

1 Ocak

Sınav Haftası (Cuma)

8 Ocak

Responsive Tasarım - Sonradan anlatılacak eksik kalan konular - Quiz

15 Ocak

Son hafta...


Konular

Sonradan Anlatılacak Konular / Hatırlama Listesi

  1. Bilgisayarda yüklü olmayan fontları kullanma (Google Fonts)
  2. Font ikon kullanımı
  3. Favicon ekleme
  4. Box-shadow, text-shadow, transition, border-radius
  5. Google Maps Kullanımı
  6. placehold.it

Faydalı Linkler

  1. http://nigdebilisim.com/ - Uygulamalarımızı yaptığımız web sitesi
  2. https://www.transparenttextures.com/ - Arkaplan görselleri

CSS Ekleme Biçimleri

Web sayfamıza 3 şekilde CSS kodu ekleyebiliriz:

1) style etiketi ile CSS ekleme

Head etiketi arasına <style> ve </style> etiketleri arasına CSS kodları yazabiliriz. Bu durumda eklemiş olduğumuz CSS kodları sadece o html sayfasında etkili olacaktır.

Örnek:

<head>

<style>

body {

        background: red;

}

</style>

</head>

Bu kod sayesinde ilgili html sayfasında arkaplan rengi kırmızı olacaktır.

2) link etiketi ile CSS ekleme

Link etiketi ile CSS eklemek için uzantısı .css olan bir dosya gerekmektedir. Bu dosyaya yazmış olduğumuz CSS kodları, CSS dosyasının bağlandığı tüm html sayfalarına uygulanacaktır. Bu sayede tek bir CSS dosyasından tüm siteyi yönetebiliriz. Bu şekilde CSS dosyasını bağlayabilmek için şu kodu head etiketi arasına yazmamız gerekir:

<link href="css/style.css" rel="stylesheet" type="text/css" />

Burada href parametresinin karşısına css dosyasının konumu yazılmalıdır. Diğer parametrelerdeki bilgiler değişmez.

3) style parametresi ile CSS ekleme

Bu tür CSS ekleme metodları genelde sitede sadece bir iki yerde geçen özel düzenlemeleri yapmak için kullanılır. Örneğin;

<a style=”color:#f00”>Link</a>

Bu şekilde bir CSS kodu eklediğimizde sadece yukarıdaki linkin rengi kırmızı olacaktır.


Pseudo Sınıfları

Pseudo sayesinde belirli durumlar için CSS kodu oluşturabiliriz. Örneğin, herhangi bir elemanın üzerine mouse ile gelindiğinde ilgili elemanın biçimini değiştirebiliriz:

a:hover { color:#f00; }

Bu kod sayesinde sayfada bulunan linklerin üzerine geldiğimizde linklerin rengi kırmızı olacaktır.

Diğer Pseudo Kullanımları:

:first-child → Arka arkaya eklenmiş html elemanlarından sadece ilkini seçer.

:last-child → Arka arkaya eklenmiş html elemanlarından sadece sonuncusunu seçer.

:nth-child → Arka arkaya eklenmiş html elemanlarından sadece x. olarak belirlediğimizi seçer.

:visited → Ziyaret edilmiş (daha önce tıklanmış) linklerin biçimini değiştirir.

:focus → Form elemanlarında aktif form elemanını seçer.

:first-letter → Elemanın sadece ilk harfini seçer

:first-line → Bir metnin sadece ilk satırını seçer.

Pseudo Örnekleri

li:first-child { ... }

Liste elemanlarından ilkini seçer.

a:last-child { ... }

Linklerin sonuncusunu seçer.

p:nth-child(3) { ... }

Paragraflardan üçüncüsünü seçer.

li:nth-child(2n) { ... }

Çift sıradaki liste elemanlarını seçer (İkinci, dördüncü, altıncı...)

input:focus { … }

Input form elemanı aktif olduğunda etkili olacak CSS kodudur.

(Not: Formlar konusu daha sonra anlatılacaktır.)

Background ile Arkaplana Resim Ekleme

CSS’in background özelliği ile arkaplana renk veya görsel ekleyebiliriz. Kullanabileceğimiz parametreler:

body {

        background: url(../images/arkaplan.png) 50% 100% no-repeat fixed;

}

NOT: Buradaki ../ ifadesi bir üst klasöre çıkmayı ifade eder. Bu kod css klasörü içindeki style.css dosyasına aitse, ../ ile önce üst klasöre çıkıp burada bulunan images klasörüne ulaşıyoruz.


CSS’te Kutu Modeli

HTML’de sayfayı oluşturan her bir eleman sayfada belirli bir alan kapsar. Bu alanın kapsadığı genişlik CSS’de kutu modeli altında incelenir. Buna göre bir elemanın genişliğini oluşturan unsurlar, elemanın kendi genişliği, padding, margin ve border değerleridir. CSS’de * seçicisi için box-sizing özelliğine border-box değerini atarsak, elemanın genişliğini arttıran tek unsur margin değeri olur. Diğer değerler toplam genişliğe dahil edilir.

3 sütunlu bir tasarım oluşturma. // Perşembe.


CSS’te Position Özelliği

Position özelliği ile bir html elemanının konumunu düzenleyebiliriz.

Position özelliği 4 değer alır:

Bu 4 değere ek olarak CSS ile elemanın 4 özelliğine müdahale edebiliriz: top, bottom, left ve right. Bu elemanlara piksel veya yüzde cinsinden değerler atanarak elemanın pozisyonu belirlenebilir.

Örnekler derste yapılacaktır (web_layouts/3.psd).


Tablolar

HTML’de tablosal verileri sitemize ekleyebilmek için şu etiketler kullanılır:

Örnek bir tablo:

<table>

<tr>

<th>NUMARA</th>

<th>AD SOYAD</th>

<th>PUAN</th>

</tr>

<tr>

<td>1</td>

<td>Ali Korkmaz</td>

<td>95</td>

</tr>

<tr>

<th>2</th>

<th>Adile Turan</th>

<th>80</th>

</tr>

</table>

Satır ve Sütun Birleştirme (Colspan ve Rowspan)

Tablo Oluşturma Kuralları

CSS ile Tabloları Biçimlendirme


Formlar

Form elemanları:

Diğer: