Web Tasarımı Dersleri

WEB TASARIMI DERSLERİ

Dersleri indirmek için tıklayınız…


HEAD

Title: Başlık

META (Sınav sorusu olabilir;))

  1. Name: Karakter seti özelliği,
  • Generator: kodu üreten program
  • Description: açıklama
  • Keywords: anahtar kelimeler
  • Author: yazar
  • Robots:  content’ine all: hepsini al follow: belli aralıkla takip et index: indeksle
  • Copyright: resmi hak
  1. Meta http-equiv: yazar, editör, arama motoru indekslenebilirliği
  • Content-Type: İçerik belirme, özelliği
  • Content: içeriği text dosyasını
  • charset: iso-8859-9 Türkçe demek windows-1254 de Türkçe’dir.
  • Expires: geçerlilik tarihidir gün, gün_Sayı ay yıl saat saat dilimi GMT
  • Refresh: content’ine saniye cinsinden yenileme emri verir url sine nereye gideceğini de söyleyebiliriz
  • Content-script-type: kullanılacak script de belirtilebilir

Örnek sayfa;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"/>
<meta http-equiv="Expires" content="Fri,01 mar 2010 00:00:00 GMT"/>
<meta http-equiv="refresh" content="5" URL="index.php"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-type" content="text/html; charset=windows-1254"/>
<meta name="Generator" content="Notepad"/>
<meta name="Description" content="Çiçekçilik sayfamız"/>
<meta name="keywords" content="Çiçek bakımı, Süs Bitkileri, Hobi, Bahçe Bakımı"/>
<meta name="Author" content="Coşkun GEMİCİ"/>
<meta name="Robots" content="all, follow, index"/>
<meta name="COPYRIGHT" content="BEYAZ ÇİÇEKÇİLİK"/>
<title>İlk Sayfamız</title>
</head>
<body>
Sayfa
</body>
</html>

<Br> : enter

<P align=>: hizalama

Left, right, center, justfy: sol sağ ortala gibi

<div>:

<span>:

<Hr> : çizgi

<font face= size= color= />

<B> kalın

<u> altı çizgili

<i> italik

<body

Text=””: yazı rengi

Bgcolor=””: arka rengi

Link=””:link rengi

Alink=””: aktif link

vlink=””: gezilmiş link

<h1>…<h6> : başlıklar

<Sub>: üst simge

<Sup>: alt simge

<Pre> not defterindeki gibi enter’li falan yazar, htmller çalışır çalışmaz

<Xmp> not defterindeki gibi enter’li falan yazar, renklendirmeler falan çalışmaz

Listeler

1)    Sıralı liste: 1,2,3 a,b,c g,b, listeler => ol

2)    Sırasız liste: madde imli listeler => ul

3)    Tanımlama listeleri:  => dd, dt

<ol type=”x” de x yerine>

a             gelirse a,b,c … listesi

i               gelirse i,ii,iii … listesi

1             gelirse 1,2,3… listesi oluşturur

<ul type=”x” de x yerine>

circle      gelirse içi boş yuvarlak listesi

disc        gelirse içi dolu yuvarlak listesi

square gelirse içi dolu kare listesi oluşturur

start=”deger” değer e ne yazılırsa o değerden başlar

Örnek

Aşağıdaki listenin kodlarını yazalım

Bitkiler

  • Çiçekler
    • Tek yıllıklar
      • vapur dumanı
      • aslan ağzı
    • Çok Yıllıklar
      • papatya
      • Gül
      • açelya
  • Ağaçlar
<ul type="circle">bitkiler
<li>Çiçekler</li>
<ul>
<li>Tek yıllıklar</li>
<ul>
<li>vapur dumanı </li>
<li>aslan ağzı </li>
</ul>
</ul>
<ul>
<li>Çok Yıllıklar</li>
<ul type="square">
<li>papatya</li>
<li>Gül </li>
<li>açelya</li>
</ul>
</ul>
<li>Ağaçla</li>
</ul>

<font size=”-2″ face=”Verdana, Arial, Helvetica”>

Size: – den başlar (-3) (12 gibi biter)

Face: yazı tipidir 1. Yazılan varsa pc de o gösterilir yoksa sırayla diğerleri denenenir.

Örnek

Aşağıdaki listenin kodlarını yazalım

    Üniversiteler

  1. Sakarya Üniversitesi
    1. Teknik Eğitim Fakültesi
      • Bilgisayar öğr.
      • Elektronik öğr.
    2. Mühendislik Fakültesi
      • Bilgisayar Müh.
      • Makine Müh.
  2. I.T.Ü.
    1. Mühendislik Fakültesi
<ol type="1">Üniversiteler
    <li>Sakarya Üniversitesi</li>
	<ol type="a">
		<li>Teknik Eğitim Fakültesi</li>
		<ul type="circle">
			<li>Bilgisayar öğr.</li>
			<li>Elektronik öğr.</li>
		</ul>
		<li>Mühendislik Fakültesi</li>
		<ul type="square">
			<li>Bilgisayar Müh.</li>
			<li>Makine Müh.</li>
		</ul>
	</ol>
    <li>I.T.Ü.</li>
	<ol type="a">
		<li>Mühendislik Fakültesi</li>
	</ol>
</ol>

Tablolar

<Table>: tablo oluşturma

<tr>:satır oluşturma

<Td>:hüçre oluşturma veya sütun da denebilir

<caption>:yazı

Özellikler

  • Align: yatay hizalama(left,right,center,justfy)
  • Valign: dikey hizalama(top,bottom,middle)
  • Border: kenarlık kalınlığı
  • Width: genişlik
  • Height: yükseklik
  • Cellpadding:  girinti
  • Cellspacing: Hücre boşluğu
  • Colspan: sütun birleştirir
  • Rowspan: satır birleştirir

Aşağıdaki tabloyu oluşturalım

Çiçekler Ağaçlar
Aslan Ağzı Çam
Açelya Kavak
Gül Meşe
Bitkiler
<Table align=center cellspacing=10 cellpadding=5 border=1 width=300 height=300 bgcolor=yellow>
<tr>
<td align=center valign=top><b><font color="red">Çiçekler</font></b></td>
<td align=center valign=top><b><font color="red">Ağaçlar</font></b></td>
</tr>
<tr bgcolor=gray>
<td bgcolor=green>Aslan Ağzı</td>
<td>Çam</td>
</tr>
<tr bgcolor=gray>
<td>Açelya</td>
<td>Kavak</td>
</tr>
<tr bgcolor=gray>
<td>Gül</td>
<td>Meşe</td>
</tr>
<caption align=bottom >Bitkiler</caption>
</table>

Örn

Beyaz Çiçekçilik
Çiçekçilik Hizmetleri
Tel: 0 5xx xxx xx xx
Mail: isim@servis.com

Tablosunu oluşturalım

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"/>
<meta http-equiv="Expires" content="Fri,01 mar 2010 00:00:00 GMT"/>
<meta http-equiv="Refresh" content="5" URL="http://localhost/index2.html"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-type" content="text/html; charset=windows-1254"/>
<meta name="Generator" content="Notepad"/>
<meta name="Description" content="Çiçekçilik sayfamız"/>
<meta name="keywords" content="Çiçek bakımı, Süs Bitkileri, Hobi, Bahçe Bakımı"/>
<meta content="Coşkun GEMİCİ"/>
<meta name="Robots" content="all, follow, index"/>
<meta name="COPYRIGHT" content="BEYAZ ÇİÇEKÇİLİK"/>
<title>İlk Sayfamız</title>
</head>
<body text="#ffffff" bgcolor="green" link="red" alink="yellow" vlink="#0000ff">
<table bgcolor=gray border=0 cellspacing=2 cellpadding=1>
<tr bgcolor=11aa11>
<td colspan=4><b><font color=white size=-1>
Beyaz Çiçekçilik</font></b>
</td>
</tr>
<tr>
<td rowspan=3 color=white width=30>&nbsp;</td>
<td colspan=2>&nbsp;</td>
<td>Çiçekçilik Hizmetleri</td>
</tr>
<tr>
<td>
<b>Tel:</b>
</td>
<td colspan=2>0 5xx xxx xx xx</td>
</tr>
<tr>
<td>
<b>Mail:</b>
</td>
<td colspan=2>isim@servis.com</td>
</tr>
<caption align=bottom></caption>
</table>
</body>
</html>

Dreamweaver 8

Meta ekleme: İnsert->HTML->headtags’lardan meta tag eklenir. Metaların bazıları buradan eklenebilir.

  • Normal entere basarsak <p> yani paragraf açar.
  • <br> : Shift + Enter tuş bileşimiyle yapılır.
  • Özel karakterlerde & işaretinden sonra yardımcı dan yararlanabiliriz.
  • Liste

    Liste yaparken yazılar yazıldıktan sonra alt menüdeki tuşlar kullanılır her hangi bir düzeyin özelliklerini değiştirmek istediğimizde sağ tıklayp List-> Properties’ten ayar yapabiliriz.

    Tablo

    Common araç çubuğundan tablo eklenebilir ve tıklandıkta özellikleri verilir. Sonuçta tablo eklenmiş olur. Burada farklı olarak başlıklar da belirlenebilir. Başlıklar “th” etiketi içinde olurlar. Summary ALT gibi açıklama demektir.

    Tablo satır birleştirme işlemi; özeliklerin olduğu alt kısımdan küçük bir buton olan “merge” sayesinde yapılır. Parçalamak da hemen yanındaki split butonundan yapılır. Arka plan rengi bg özelliğinden ayarlanabilir. Arka plan rengi de özelliklerdeki Bg Image den ayarlanabilir.

    Tabloyu, köşelerindeki Mouse tablo şeklini alınca tıklayarak seçebiliriz. Seçim Yapıldıktan sonrada alt bölümde yine özellik belirleyebiliriz. Align’den  hizalamayı da belirleyebiliriz.

    Resimler

    Resim Common araç çubuğundaki image’den eklenebilir.

    <img src”dosya yolu” alt=”açıklama”>

    Dosya yolu : resmin olduğu yerdir. Bağıl adresleme kullanıldığında dosyanın konumuna göre resim yolu belirtilir. Diğer yöntemle de direkt olarak yolunu vermemiz gerekir.

    Açıklama: resim açıklamaları alt kısmında belirlenir. Resmi düzenlemek için alt taraftaki özellikler penceresinde edit bölümündeki programlardan birinde düzenleme yapılabilir. Biz Fireworks seçeceğiz. Fireworks’te düzenleme bitince done ile dreamweaver’e geri dönebiliriz.


    Fireworks

    Karşılama ekranındaki Create kısmından fireworks file seçilerek özelliklerde belirlendikten sonra yeni bir dosya açılabilir.

    Tools’taki aletleri kullanarak düzenleme yapabiliriz.

    Bitmap bazlı resimlerde büyütmede bozulma olurken vector bazlılarda olmaz. Biz daha çok bitmap’ta çalışacağız.

    Büyütmek için Tools->View den büyüteç  veya sayfanın sağ altından % olan kısımdan ayarlayabiliriz.

    Kaydetmek için File -> Export Wizard… seçilir continue denir WEB de çalışacağımız için WEB seçilir. Devam edilir. exit tıklanır sonraki adımda bir pencere oluşur EXPORT… tıklanır ve kaydedeceğimiz yeri WAMP’ın WWW klasöründeki Resimler klasörü olarak ayarlayıp isim verdiğimizde dosyamız kayıt edilir.

    Dreamweaver den bunu uygulamak için dosyamızı html dosyamızın yanına resmimizi kaydedip; body kısmında bacground=”resimismi.uzantısı” yazılıp arka plan resmi görülebilir.

    Resim yolu için; background=http://localhost/resimler/bg.gif diyebileceğimiz gibi bir üst klasörde olduğunu “..” işaretiyle belirtebiliriz. Örn: “../resimler/bg.gif”

    Bizim sayfamızdan 2 üst klasöre de çıkmak içinde “../../adres” diye kullanılabilir.

    Hem resim hem de arka plan özelliği varsa önce resim aranır yoksa arka plan uygulanır.

    Fireworks’te Modify->Canvas->canvas size… çalışma alanını küçültür sadece. Resmi küçültmek için aynı yerdeki image size… belirtilmelidir.

    Örnek

    Arka planda oval bir şekil olan bir sayfa tasarlayalım

    1. Fireworks tan 100×100 yeni dosya açılır
    2. Toolbox’tan kare üzerine mous’la tıklı bekledikten sonra rounded rectengle seçilir ve sayfayı kaplayacak şekilde bir köşeleri yuvarlı kare çizilir ve rengi gri(e6e6e6) yapılır
    3. View den rulers açılır
    4. Cetvelden kesilecek yerlere birer çizgi indirilir(sol ve üst cetvellerden)
    5. Oluşan köşeler web deki slice den kare şeklinde çizilir
    6. Oluşturulan sliceler Shift+ctrl basılıyken tek tek seçilir
    7. Export wizard tıklanır en sonda kaydedilirken selected slices ve include areas onaylanır ve kaydedilir.
    8. Kaydedilen resimlerden köşeleri belirtenler hariç diğerleri silinir.
    9. Dreamweaver’de 6×6 lık tablo oluşturulur
    10. Köşelere Oluşturulan ilgili resimler verilir.

    Böylece köşeleri yuvarlı tablo oluşturulabilir.

    Dreamweaver’de Site menüsünden yeni site oluşturmak için New Site denir.

    1. Ekranda Bir isim verilir ve site adresi verilir
    2. Server teknolojisi kullanılacak mı ? evet php-mysq(Apachee) seçilir
    3. Dosyalar nerede saklanacak ?
    4. Test şekli nasıl olsun ? local yapıyoruz biz ve dosya yerini bir daha seçiyoruz
    5. Sitenin kök dizinini http olarak yazarız
    6. Dosya paylaşımı seçenekleri de belirlenir
    7. Done tuşu tıklanarak yeni site tanımı yapılmış olur

    Tanımlanan sitelerimizi Sağ tarafta yer alan Files penceresinden izleyebiliriz. Tasarlanan sayfalar da burada görünür.

    Fireworks’te resim düzenleme

    • File Menüsü->import tan resim yüklenebilir. Çalışma alanı tıklanır ve resim yüklenir.
    • Toollardaki Bitmap->marquee  tool’la köşegen resim seçilebilir.
    • Sağtuş->edit ->copy deyip başka yere seçilen kopyalanabilir.
    • Toollardaki Select->Scale tool ile resmi kolayca boyutlayabiliriz.
    • Modify MEnüsü->Canvas->Canvas colordan sayfa arka rengi seçilebilir. Burada renge basılınca sayfadan bir renk de tıklanabilir.
    • Tollar->Vector->TEXT tool dan yazı eklenebilir. Properties Penceresinden de özellkleri belirlenir.
    • Export wizard’dan resimleri uygun şekilde kaydedebiliriz.

    Dreamweaver

    Sayfa tasarımı

    4×8 lik Tablo oluşturalım %80 kaplasın genişlik olarak. Bunuda 80 yazıp width’a pixelide percent olarak ayarlarız. Cell padding, spacing ve border tickness 0 olsun. ortaya hizalı olsun.

    Şeklinde tablo olsun.

    Banner’imizi Soldaki büyük hücreye iletişim bilgilerimizi de (daha önce tasarladığımız iletişim tablosu) sağ tarafına ekleyelim.

    * Yüklenen resimlerin lowsrc özelliği belirlenirse resmin küçük boyutu önce gelmiş olur aslı sonra yüklenir.

    Sayfanın son hali;

    Banner’e tıklayınca ana sayfaya gitme işlemini gerçekleştirelim.

    Resmin Properties’inden link özelliği verilerek tamamı link yapılabilir; fakat biz bunu istemiyoruz.

    Burada bulunan çember ve diğer şekiller kullanılarak alan oluşturulup bunların linkleri belirlenebilir. Bu alanlara Hotspot denir.

    Burada resim ana sayfaya linklendirildi yazı iletişim sayfasına…


    Bu Hotspot’lar code kısmında resmin Usemap=”” özelliğinden fonksiyon tanımlanır gibi yapılabilir. Tanımlanan fonksiyonlar en sonda görülebilir.

    Bunları kendimizde düzenleyebiliriz.

    <area shape=”poly” coords=”0,0,200,100,0,100″ href=”index.htm”/> satırını eklediğimizde bir şekil eklendiğini görebiliriz.

    engel olmaması için sağ alt tarafa küçültün.

    • Açelya
    • Papatya
    • Gül
    • Menekşe
    • Listesini ekleyelim


    Listesini ekleyelim;

    * Link verme: <a href=”http://localhost/Sayfalar/iletisim.htm”>içerik</a>

    Yeni bir sayfada

    Açelya

    Papatya

    Gül

    Menekşe

    Yazılarını aralarında uzun boşluklar olacak şekilde ayarlayın ve kaydedin.

    * Linki Yeni sayfada açma: <li><a href=”Sayfalar/cicekler.htm” target=”_blank”> Açelya</a></li> böylece açelyaya da link verilmiş oldu.

    Ana sayfada açelyadan diğer tasarlanana link verin.

    Çapa:

    Sayfa içinde konumlanılacak yer belirlenir.

    <p><a name=”Menekse”>Menekşe</a></p> şeklinde eklenir (<a></a> tagları ile)

    Böylece cicekler içindeki yazılara bunları ekleyip kaydedelim.

    Çapaya link vermek için adres/sayfa#çapa ismi

    <li><a href=”Sayfalar/cicekler.htm#Acelya” target=”_blank”> Açelya</a></li>

    <li><a href=”Sayfalar/cicekler.htm#Papatya” target=”_blank”> Papatya</a></li>

    <li><a href=”Sayfalar/cicekler.htm#Gul” target=”_blank”> Gül</a></li>

    <li><a href=”Sayfalar/cicekler.htm#Menekse” target=”_blank”> Menekşe</a></li>

    Ana sayfamızda da listemize verilen çapalara gitme linkiş ekleyelim ve yeni sayfada açılsın.

    Mail linki verme:

    <a href=”mailto:example@hotmail.com”>example@hotmail.com</a> şeklinde eklenebilir.

    Böylece iletişime de  mail adresi eklenmiş olduk.

    Sayfanın son şekli;

    Arka planda Müzik çaldırma

    <bgsound src=”Müzik/Beethoven.wma” loop=”1″ volume=”100″ balance=”"/> kodu ekletebilir.

    Beethoven.wma çalar loop, tekrar etme (true, false); volume, ses düzeyi; balance, sağ sol dengesidir.

    <embed src=”Müzik/start.wav” height=”150″ width=”200″ loop=”true” hidden=”true”/>

    Buda sayfada gözükür. Bu yüzden genişlik ve yükseklik verilebilir. Hidden, gizliliğidir.

    Video eklemek içinde embed kullanılır ve dosyada avi olarak verilir. <img dynsrc=”videoyolu” > yöntemi de video ekleme için uygundur yine diğerleri gibi özellikleri de ayarlanabilir.

    Flashda insert->media->flash tan eklenebilir.

    Bir başka Veri ekleme yolu

    <object data=”film.mov”>

    <param value=”100″ />

    <param value=”150″ />

    </object>