Fakat Web sayfalarınızda televizyon ve sinema teknolojisinin temeli olan grafiklerin (veya metinlerin) belirli bir sırayla görüntülenmesi, sırası gelenin “açılması,” sırası geçenin “kapanması” sağlanabilir. Bunu katman teknolojisi sağlar. Bir HTML sayfasında, ziyaretçinin Browser’ına ActiveX, Flash, Shock ve benzeri animasyonları gerçekleştirmesi için gerekli plug-in dosyalarının yüklenmesini zorunluk olmaktan çıkartan da katman teknolojisidir. DIV, LAYER, ILAYER ve SPAN etiketleri ile oluşturacağınız katmanlar, piksel düzeyinde bir hassasiyetle, ziyaretçinin ekranında, Browser penceresinde belirli bir yere oturtulabilir ve belirli bir sırayla görünür veya görünmez hale getirilebilir. DHTML’in dinamik tek unsuru da budur. (Bunlardan sık kullanacağınız DIV ile SPAN’dir ve aralarındaki tek fark, DIV, blok elemanıdır, yani kendisinden sonra yeni paragraf başlatır; buna karşılık SPAN satır elemanıdır, kendisinden sonra hiç bir şey yapmaz.)
“Piksel düzeyinde hassasiyet” ne demek? Bir Browser, klasik HTML belgesini aldığı zaman içindeki komutları yorumlayıp, sonucunu kendi penceresinde görüntülemeye, sıfır-sıfır noktasından başlar. Bir Browser penceresini, soldan sağa x, yukarıdan aşağı y koordinatları olarak düşünün.
<magic00005.tif>
Başarılı bir Web sitesi, 14 inçlik bir ekranı, 640x480 çözünürlükte bir grafik kartı bulunan tipik bir ziyaretçi dikkate alınarak kurulduğuna göre, Windows ve MacOS’in aldığı yerler, Browser’ın kendi penceresi, başlık ve menü çubukları, çerçeveler çıktıktan sonra, tasarımcı olarak size “temiz alan” olarak 600’e 350 piksel kalıyor. (Microsoft, ve Brittanica ansiklopedisi bu alana kendi sitelerini sığdırdığına göre, herhalde siz bir günlük gezete sitesi sığdırabilirsiniz!) Düz bir yazı içeren Web sayfası, nerede başlayıp, nerede biterse bitebilir; önemli değil. Ama, diyelim ki, ziyaretçi Mouse işaretçisini bir grafiğin belirli bir yerine getirdiği zaman, aynı grafiğin 155:220 koordinatında başlayan ve eni 35, yüksekliği 48 piksel olan bir bölüme farklı grafik görüntülenecek! Bu ölçüde hassas positioning (yerleştirme işlemi), ancak katmanlarınızı doğru tanımlamakla mümkündür. “Doğru tanımlamak” ise önce ziyaretçinin o andaki Browser boyutlarını bilmekle mümkündür. Kim olduğunu bile bilmediğiniz bir kişinin, ne olduğunu bile bilmediğiniz Browser’ının o anda enini boyunu nasıl bilebilirsiniz? Ve üstelik bunu, her ziyaretçi için yapacaksınız. Oysa işin kolayı, sayfanın bir kenarına, ziyaretçiye hakaret edercesine, “Ekran çözünürlüğünüz 800’den aşağı ise, yandınız!” diye bir uyarı koymak iken!
Bu işleme ziyaretçinin Browser penceresinin çözünürlüğünü belirleme denir, ve Netscape ile Internet Explorer, farklı sorular sormak şartıyla, sorarsanız, size o andaki boyutlarını verirler. Diyelim ki bir haricî JSavascript dosyasını HTML belgenizin baş tarafında:
<SCRIPT LANGUAGE="JavaScript" SRC="javascript.js"></SCRIPT>
şeklinde bir SCRIPT etiketi ile sayfanıza bağlamış bulunuyorsunuz ve bu JS dosyasının içinde daha önce ele aldığımız türden size “brw.ie4” veya “brw.ns4” nesnelerini veren bir fonksiyon var. Şimdi bu neslereni BODY etiketi içinde onLoad olayını kullanarak test edebilir ve ziyaretçinin Browser’ı Netscape ise Netscape için, IE ise IE için geçerli soruyu sorarak, ziyaretçimizin o anda Browser ekranının enini boyunu öğrenebiliriz. İşte size kullanabileceğiniz bir HTML-Javascript parçası:
<BODY onLoad="
if(is.ns4) {
ekranEn =innerWidth;
ekranBoy=innerHeight;
preLoad();
} else if(is.ie4) {
ekranEn=document.body.clientWidth;
ekranBoy=document.body.clientHeight;
preLoad();
}"
onResize="history.go(0)">
Bir parantez açalım: buradaki “onResize=”history.go(0)” ifadesi, ziyaretçininin sitemize bağlandıktan sonra Browser’ının boyutlarını değiştirmesi ihtimaline karşı, sayfamızın ziyaretçinin sabit diskindeki Cache bellekten yeniden yüklenmesini sağlayan bir güvenlik önlemidir. Bir başka güvenlik önlemi Browser’ın sayfa görüntülendiği anda penceresinin sağına ve altına otomatik kaydırma çubuğu koymasını istemiyorsanız, BODY etiketine şu özellikleri de verebilirsiniz:
BACKGROUND="images/horizon.jpg" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO"
Peki, şimdi elinizde iki ölçü oldu: ekranEn ve ekranBoy. Bu bilgileri nasıl kullanacaksınız? İşte bu bilgi, ziyaretçinize “Ekranını 800x600 piksel yap, öyle gel!” demekten sizi kurtaracak, söz gelimi bir grafiği 460:710 koordinatlarına denk gelmek yerine “ziyaretçinin ekranının sağ kenarından 200 piksel solda başlamasını sağlayacak olan bilgidir. Bunu yapabilmek için grafiğinizi bir katman nesnesinin (<LAYER>..</LAYER>, <SPAN>..</SPAN> veya <DIV>..</DIV> etiketlerinin içine koyarsınız; katman nesnesi, “çıplak” konulacak grafikten (<IMG>) farklı olarak, STYLE özelliğine (attribute) sahiptir ve dolayısıyla, posizyon, başka bir nesnenin altında veya üstünde olmak, görünür veya görünmez olmak gibi kontrollere sahiptir. Örneğin, içinde sayfalarınız arasında gidip gelmeyi sağlayan düğmelerden birincisini içeren katmanın şöyle oluşturulduğunu düşünün:
<DIV ID=”katman_dugme1” STYLE=”position: absolute left: ekranEn-200; top ekranBoy-200; width: 120; height: 120; z-index: 1; visibility: hidden;”>
Hangi IMG etiketi böylesine denetlenebilir? İşte bu dinamizmdir; ziyaretçi ile etkileşmektir. Ziyaretçi ile etkileşmek, her ziyaretçinin bilgisayarına bir çerez bırakmaktan ibaret değildir. Katmanlar nesne oldukları için, isimleriyle hitabedilebilirler; herhangi bir Mouse olayına göre attribute değiştirebilir, örneğin görünür hale gelebilirler; görünmez olabilirler. Dinamik bir katman yerleştirme işlemi gibi yönetimi de Javascript ile mümkündür.
10. Sitenizi sınayın: Çok kolay gibi görünmesine rağmen, Internet, farklı Browserlar, farklı modem hızları, farklı bilgisayarlar, farklı ekran kartları ve ekranlarla sınanmamış sitelerle dolu. Bir çok tasarımcı için sınama, en fazla bütün dosyaları sitenin üretildiği bilgisayardan başka bir bilgisayara aktararak, bağlantıları kontrol etme anlamına geliyor. Yani acaba herhangi bir LINK, mutlak bir dosyayı mı çağırıyor? IMAGE dizinine yerleştirilmemiş grafik kaldı mı? Hayır, hayır.. Sınama bu değil. Sınama, mesela siz Istanbul’da oturuyorsanız, Artvin’deki veya Van’taki hedef kitlenize mensup olduğuna inandığınız gerçek Internet kullanıcılarını bir 14.4’lük modem bağlantısı olan, 66 MHz’lük bir CPU’su ve 1 MB bellekli, 640x480 çözünürlükte ekran kartı bulunan ve 15 inç ekrana sahip bir bilgisayarın karşısına geçirip, yüzlerini incelemektir.
Ve bunu yaparsanız, sizden daha iyi Web Sihirbazlığı yapan olmayacağına inanabilirsiniz.
////////////////////UZUN VE BÜYÜÜÜK BİR KUTU////////////////
ŞUNU NASIL YAPARIM?
Ne kadar usta olursa olsun, bu soruyu, hiç olmazsa arada bir sormayan Web tasarımcı düşünmek imkansız gibidir. İşin kötü tarafı, insan kendisini Web tasarımcısı saymaya başladıktan sonra, bu tür soruları da açıkça soramaz! İşte, sormaya çekindiğiniz veya çekinmediğiniz HTML soruları ve yanıtları. Ama hemen eklemek gerekir ki, yapılacak herhangi bir işin, çözülecek herhangi bir tasarım güçlüğünün, HTML 4 gibi, CSS, CSS-P, Javascript ve VBScript ile donanmış bir dilde, sadece bir doğru yanıtı olamaz. Buradaki çözümleri, bulanabilecek çözümlerden sadece biri olarak değerlendirmek gerekir.
Büyük Birinci Harf (Gömme):
Gazete ve dergi yazılarında bazı paragrafların ilk harfi, diğer harflerden çok büyük ve aşağı doğru iki, hatta üç satır yüksekliğinde olur. Gazetecilik dilinde buna Gömme Harf denir. Yazılı basının favori masaüstü yayıncılık programı QuarkExpress’te bile otomatik yapmak için programın beşinci sürümünü beklediğimize göre, HTML’de birinci harfin büyük olmasını otomatik olarak sağlamak için biraz daha bekleyeceğiz demektir. Gerçi CSS-1 kuralları arasında bunu sağlayan bir eleman var (first-letter), fakat kuralların zorunlu değil tavsiye bölümünde yer aldığı için ne Nestcape 4.5 ve öncesi, ne de IE 4.01 ve öncesinde uygulanmış değil. Bütün umudumuz, IE 5 ile CSS-1 ve CSS-P’nin bütün kurallarının uygulanabilir hale gelmesi. Eğer bu mümkün olursa, bu imkandan yararlanmak için, örneğin, şöyle bir stil tanımlamanız yeterli olacak:
P.first-letter {font-size: 200%;}
Tabiî, ilk harfinizi yüzde 200 yerine isterseniz yüzde 400 de büyütebilirsiniz. O zamana kadar şu seçeneklerle idare edin:
1. Grafik olarak harf:
<IMG SCR=”Buyuk_b.gif” HSPACE=1 ALIGN=LEFT>üyük ilk harf elde etmenin çaresi.
2. Tek kutulu tablo:
<TABLE ALIGN=LEFT CELLSPACING=0 CELLPADDING=0 BORDER=0><tr align="left" valign="top"><TD><FONT size=+4>B</FONT></TD> </TR></TABLE>üyük harf elde etmenin çaresi..
3. Stil vererek:
HTML belgesinde HEAD bölümünde şu stili oluşturun:
<style>
.gomme { width: 1em; height: 1em; float: left; text-align: center; font-size: 20pt; color:red; font-style:italic } </style>
Sonra, birinci harfini büyük yapmak istediğiniz paragrafa şöyle başlayın:
<p><SPAN class="gomme">B</span>harf büyük, kırmızı ve yüksekliği üç satır olacak. Bu paragrafı biraz daha uzatalım.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Biraz daha.. Eh bu kadar yeter.</p>
Dikey Çizgi
HTML’de yatay çizgi (<HR>) var da, dikey çizgi yok. Tasarımınız, sayfada dikey çizgi gerektiriyorsa, tablodan yararlanabilirsiniz. Grafik programınızda eni ve boyu 1 piksel ve rengi siyah bir kutu resmi yapın. Bunu 1psiyah.gif adıyla kaydedin. Dikey çizgiye ihtiyacınız olan yerde bir tablo oluşturun; metinlerinizin bir kısmı ve tablonun içine girebilir; girmeyebilir. İşte bir örnek:
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr> <td align="center" valign="top">Burada metin var.</td>
<td><img src="1psiyah.gif" width="5" height="300"></td>
<td align="center" valign="top"> Burada metin var </td></tr>
</table>
Çizginin yüksekliği ne kadar olacaksa, çizginin bulunduğu kutudaki IMG etiketinin yüksekliğini o kadar arttırın.
Beyaz Boşluklar
Bazen, iki satır arasında tam istediğiniz ölçüde boşluk elde etmek zor olur. <P> çok, <BR> ise az boşluk bırakır. Kolayı var. Eni 1, boyu 2 piksel, saydam bir GIF dosyası yapın ve 1psaydam.gif adıyla kaydedin. Boşluğa ihtiyacınız olan iki satırın arasına şu etiketi koyun:
<IMG scr=”1psaydam.gif” width=1 height=1 hspace=20 vspace=49>
Burada 20 ve 49 yerine, kendi ihtiyacınız olan boşluğun değerini yazacaksınız.
Bir satırı arzu ettiğiniz kadar içerden başlatmak amacıyla da aynı teknikten biraz farklı ifadeyle yararlanabilirsiniz:
<IMG hspace=”25” scr=”1psaydam.gif>Bu satır 25 piksel içerden başlayacak.
İki sütun yazı arasına arzu ettiğiniz kadar boşluk vermek için, sütunları bir tablonun hücrelerine alın, ortalarındaki hücrenin boyunu ve enini istediğiniz boşluk ölçüsüne getirin.
Sadece Netscape’de bulunan <SPACER> etiketi de beyaz boşluk sağlayabilir:
<SPACER TYPE=”block” WIDTH=”30” HEIGHT=”45”>
IE, bu kodu görünce, hiç bir şey yapmaz.
Arkaplanda Yazı
Bazen güzel bir düzenleme ile biş başlığın arkasında, aynı veya farklı kelimelerin tekrarlanarak zemin oluşturduğunu görürsünüz. Üstelik de sayfa yıldırım hızıyla gelmiştir; yani arkaplandaki yazıların, grafik olmadığı anlaşılıyor. Bunu katman teknolojisi ile başarabilirsiniz:
<SPAN STYLE="position: relative; top: 60px; left: 40px; z-index: 2; font-family: Verdana, Arial, Helvetica; font-weight: bold; font-size: 24pt; color: #ff3300">ÖNDEKİ METİN<BR>
</SPAN><BR>
<SPAN STYLE="z-index: 1; font-family: Serif, Times, Georgia; font-size: 10pt; color: #ffcc99">Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin <BR>Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin <BR>Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin <BR> </SPAN>
<magic00006.tif>
İlk sayfa bir kaç saniye görünsün, kaybolsun!..
Buna “Splash page” (suya dalma sayfası) da deniyor; bir kaç saniye görünüyor, sitenizin niteliği hakkında fikir veriyor, ilgi çekiyor, sonra yerini ana sayfaya bırakıyor.:
<META HTTP-EQUIV=”Refresh” CONTENT=”5; URL=ANASAYFA.HTML”>
<BODY><IMG width=”300” height=”200” alt=”Giriş grafiği” SCR=”giris.gif”>
<BODY>
Bu tekniği iki sayfasının arasında reklam amacıyla uygulayanlar bile var!
Stil düzenlemesi yapmadan harf belirlemek için
Sayfanızda, sadece bir yerde normal stil komutlarının dışına çıkarak, bir metnin belirli bir harfle görüntülenmesini istiyorsanız, hemen önünde şu etiketi kullanabilirsiniz:
<FONT FACE="Courier">Bu yazı Courier harfle görüntülenecek</FONT>
Türkçenizi kaybetmemek için
Bilgisiyarla uğraşalı beri, kendi dilimiz sık sık kazaya uğruyor, ama sayfalarımızın dilini korumak elimizde. Her sayfanın başına şu META etiketi koyabilirsiniz:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<meta http-equiv="Content-Language" content="tr">
Resimleri Bloklayın!
Sayfanızdaki grafiklerin hepsinin sol tarafı aynı hizaya gelsin istiyorsanız, sadece yazı için kullanılır sandığınız <BLOCKQUOTE> etiketinden grafiklerde de yararlanabilirsiniz:
<BLOCKQUOTE><IMG scr=”resim.gif”></BLOCKQUOTE>
Bütün grafikleriniz soldan yaklaşık 40 piksel hizalanacaktır! Resimleriniz sayganın sağına hizalansın istiyorsanız, buna bir de ALIGN ekleyebilirsiniz:
<BLOCKQUOTE><IMG scr=”resim.gif” ALIGN=right></BLOCKQUOTE>
<BLOCKQUOTE> etiketi kendi içinde kullanırsa, içindeki unsuru 80 piksel sağa iter.
<BLOCKQUOTE><BLOCKQUOTE><IMG scr=”resim.gif” ALIGN=right> </BLOCKQUOTE></BLOCKQUOTE>
Tabiî, en istikrarlı hizalama aracı olarak daima tablodan yararlanabilirsiniz.
Noktasız Liste
HTML’in noktasız listesinin satır araları çok açık; noktalıların araları iyi, fakat siz nokta istemiyorsunuz. O halde HTML’i biraz kandırabilirsiniz:
<UL>Madde 1<BR> Madde 2<BR> Madde 2<BR> Madde 4<BR></UL>
İşte size aralığı dar, ama noktasız liste!
HTML’e ENTER ve TAB girdilerini kabul ettirmek mümkün mü?
Hayır, değil! Düz yazı programınızda HTML belgede bir metne ne kadar ENTER ve TAB girseniz de, Browser bildiğini okur ve bunları yok eder. Bir şartla! İstediğiniz gibi biçimlemek istediğiniz bölümün başına <PRE> , sonuna </PRE> etiketlerini koyarsanız, bütün ENTER ve TAB’leriniz korunacaktır.
Form unsurlarını hizalamak istiyorsanız
Formlarda, isim yazılacak INPUT kutusuyla adres yazılacak INPUT kutusunu hizalayabiliyor musunuz? Elbette, hayır! Bir çaresi bütün unsurları bir tablonun hücrelerine serpiştirmektir. Fakat bir başka çaresi daha var. <PRE> etiketinden yararlanmak.
“İsim” kelimesi dört harfli, “Adres” kelimesi beş harfli.. Demek ki, İsim’in INPUT kutusunun Adres’in INPUT kutusu ile hizalanması için İsim’den sonra bir boşluk olması gerekiyor. <FORM> etiketinden önce <PRE> etiketini kullanırsanız, bütün form unsurlarınıza bu hesabı yaparak, INPUT kutularını kolayca hizalayabilirsiniz.
E-Mektup bağlantısı
Sitenizdeki bir bağlantıyı tıklayan ziyaretçinin elektronik posta programı açılsın; boş bir mektup kağıdı görüntülensin; alıcı hanesine sizin (veya arzu ettiğiniz bir başka kişinin ve kurumun) adresi yazılsın istiyorsunuz. Kolay! Bir mailto: bağlantısı bu işi halleder. Bu mektup birden çok kişiye gitsin istiyorsanız, o zaman kod şöyle olacak:
<A HREF=”mailto:birincikişi@domain.com?cc=ikinci_kişi @domain.com”>
Bu mektubu bir üçüncü kişi de alsın istiyorsanız, bir ekleme yeter:
<A HREF=”mailto:birincikişi@domain.com?cc=ikincikişi@ domain.com&bcc=üçüncükişi@domain.com”>
Peki, sitenizde kime elektronik mektup göndereceği kararını neden ziyaretçiye bırakmıyorsunuz? Bir “açılan liste” kutusuyla bu işi halledebilirsiniz:
<form NAME="mektupformu">
<select SIZE="1" NAME="liste">
<option value="birincikişi@domain.com"> Birinci Kişi </option>
<option value="ikincikişi@domain.com"> İkinci Kişi</option>
<option value="üçüncükişi@domain.gov"> Üçüncü Kişi</option>
</select>
<input LANGUAGE="JavaScript" TYPE="button" VALUE="Mektup Gönder"
ONCLICK="location.href = "mailto:" + document.mektupformu.liste.options[document.mektupformu.liste.selectedIndex].value" NAME="Mektup Gönder">
</form>
Bu kodu yazarken, Javascript bölümünde tırnak işaret tırnak içinde olmasın diye “"” kodunun ktullanıldığına dikkat edin!
Geri Düğmesi
Browser’ın Geri düğmesi özellikle Çerçeveli sayfalarda nereye geri döneceğini bilmeyebilir. Bu bakımdan sayfalarınızda arzu ettiniz yere kendi Geri düğmenizi koyabilirsiniz:
<FORM><INPUT TYPE=”button” VALUE=”Geri dönmek için burayı tıklayınız!” onClick=”history.go(-1)”></FORM>
Aynı kodu grafik yerine bir veya daha fazla kelimeye de kazandırabilirsiniz:
<a href="javascript
:history.go(-1)">Geri dönmek için burayı tıklayın</a>
Aynı kodu, HTML-vari düğmelere de uygulayabilirsiniz:
<FORM><INPUT TYPE = "BUTTON" VALUE = "Back" onClick = "window.history.go(-1);"><INPUT TYPE = "BUTTON" VALUE = "Forward" onClick = "window.history.go(1);"></FORM>
Pencereyi kapatın
Bir ziyaretçinin Browser penceresini kapatmak için sayısız seçeneği var. Ama yine de kolay bir yere Kapat düğmesi koyabilirsiniz:
<A HREF="javascript
:window.close()">Bu pencereyi kapatmak için burayı tıklayınız</A>
İsterseniz, yazı yerine bir grafik de kullanabilirsiniz.
Çerçeveye esir düşünce
Bir başka sitede sizin sayfanıza bağlantı veriliyor; fakat uyanık site sahibi sizin sayfanızı kendi çerçevelerinden birinde görüntülettiriyor. Oysa siz bu tür bağlantılarda sayfanız Browser’ın tüm penceresini kaplasın istiyorsunuz. Sayfalarınızın başına şu minik kodu yazın; hiç kimse sayfalarınızı kendi çerçevesine hapsedemez:
<head>
<script language = javascript>
if(top.location != document.location.href) {
top.location = document.location.href;}
</script>
</head>
Veya şu kodu da yazabilirsiniz:
<script> <!—
if (window != top )
top.location.href = window.location.href;
// -->
</script>
Bağlantılarınıza Tool Tip ekleyin
Tool Tip, Windows’da Mouse işaretçisini araç menüsünde bir simgesinin üzerine götürdüğünüzde açılan ve içinde bu aracın ne işe yaradığını belirten küçük bir sarı kutu içindeki yazılara verilen ad. Ziyaretçi Mouse işaretçisini bağlantılarınızın üzerine götürdüğünde böyle bir Tool Tip görüntülensin isterseniz, bağlantı kodunu şöyle yazabilirsiniz:
<A HREF=”sayfanın_adı.htm”><IMG scr=”images/resim.gif” TITLE=”Burayı tıklayın, filanca sayfaya gidin!”></A>
Sayfanızı Sık Kullanılanlar’a eklettirin:
IE 4.0 ve üstünü kullanan ziyaretçilere, isterlerse, bir kelimeyi tıklattırarak, sayfanızı Windows Sık Kullanılanlar klasörüne eklettirebilirsiniz. Buradaki kod, kendi Browser belirleme fonksiyonunu da içeriyor; dolayısıyla başka tür ve sürüm Browser’ı olan ziyaretçiler açısında arzu etmedikleri bir durum olmayacaktır:
<SCRIPT>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0) && (parseInt(navigator.appVersion) >= 4)) {
document.write("<U><SPAN STYLE='color:blue;cursor:hand;' onclick='window.external.AddFavorite(location.href , document.title);'>
Add this page to your favorites</SPAN></U>");
}
//-->
</SCRIPT>
Geriye doğru sayım
Diyelim ki, özel sitenizde doğum gününüze kaç gün kaldığını belirterek, ziyaretçilerinize, size alacakları armağan için hazırlık fırsatı vermek istiyorsunuz. Ya da tuttuğunuz takımın büyük maçına! Ya da 21’nci yüzyıla! (Bu Script’i kullanmak isterseniz, başındaki kredi satırını atmamak şartıyla serbestçe kullanabilirsiniz):
<script>
<!--//
/*
Script by Jari Aarniala (foo@mbnet.fi)
*/
today = new Date()
hedef = new Date("December 31, 1999") // buraya geriye sayılacak
// tarihi yazın
hedef.setYear = today.getYear;
kalangun = (hedef.getTime() - today.getTime()) / (1000*60*60*24);
kalangun = Math.round(daysLeft);
document.write("Dogum günüme sadece"+ kalangun +" gün kaldı");
//-->
</script>
GeoCities’in yüzen grafiğini kıskanıyor musunuz?
GeoCities bütün sayfalarında yarı-saydam bir loga grafiği, sayfası yukarı da indirseniz, aşağı da indirseniz, sağ alt köşede kıpırdamadan durur. Bu etkiyi elde etmek isterseniz, sadece IE 4 ve sonrasında işlemek üzere, işte kodu:
<body style="background-image: url('resim.gif'); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom">
Fakat aynı etkiyi Netscape de de elde etmek için, bir Javascript’e ihtiyaç var. Önce, DIV ile bir katman oluşturalım:
<DIV id="waterMark" style="position:absolute"><A href="/index.html"><IMG src="watermark.gif" width=90 height=90 border=0></A></DIV>
Kullanacağınız grafiğin dosya adı ne ise, burada grafik kaynak (scr=) yerinde bu ismi kullanacaksınız. Bunu hallettikten sonra, DIV bölümünden sonra ve tercihan BODY etiketinin kapanmasından önce, şu kodu yazın. (Bu Script’i , telif hakkı satırını atmamak şartıyla istediğiniz gibi değiştirerek, kullanabilirsiniz.)
<script language="JavaScript1.2">
<!--
// Watermark script by Paul Anderson, CNET Builder.com. All rights reserved.
markW = 90; //resmin genişliği
markH = 90; //resmin yüksekliği
markX = 100; //sol kenardan uzaklık
markY = 100; //üst kenardan uzaklık
markRefresh = 20; //yenilenme süresi milisaniye olarak
if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark;
wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; // Nav DOM flag
function setVals() {
barW = 0; // scrollbar compensation for PC Nav
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth - markW)-barW) * (markX/100);
posY = ((innerHeight - markH)-barH) * (markY/100);
}
function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
}
function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
}
window.onload=markMe;
//-->
</script>
Yüzen logo olarak kullanacağınız resmin eni-boyu kaç piksel ise, markW ve markX değişkenlerinin karşısına bu değerleri yazmalısınız. Ayrıca logonuzun ekranın neresinde sabit durmasını istiyorsanız, o noktanın koordinatlarını (yüzde olarak) markX ve markY değişkenlerinin karşısına yazablirsiniz. Bu örnekte logo, erkanın sağ alt köşesinde duracak şekilde ayarlanmış bulunuyor. Bu değerler 0,0 olursa, logo ekranın sol üst köşesinde 50,50 olursa ortasında, 100,0 olursa sağ üst köşesinde, 0,100 olursa sol alt köşesinde durur. Yenilenme oranı olan milisaniye ise, Browser’ın logonun yerini kaç saniyede bir güncelleştirmesini istediğinizi gösterir. Bu süre ne kadar düşük olursa, logo o kadar yerinde sabit kalır.
CSS Eğlenceleri
CSS, kullanışlığı olduğu kadar eğlenceli de olabilir. DHTML-uyumlu veya CSS kodlarının tümünü anlayabilen bir Browser ile Mouse işaretçisinin görünümünü değiştirerek, ziyaretçilerinizi şaşırtabilirsiniz. Önce HTML belgesinin HEAD bölümüne şu stil kodlarını yazın:
<style>
<!--
.yesil{
color :green
}
.kahverengi{
color :brown
}
A.yardim {cursor:help}
A.mesgul {cursor:wait}
A.tasi {cursor:move}
A.oto {cursor:auto}
A:link {text-decoration:none;}
{ font-family: Verdana, Arial }
A:visited {text-decoration:none;}
A:hover {color: white; background:"#008080"; decoration=none
}
-->
</style>
Sonra, BODY bölümünde bir sınama yapalım:
<p><a class="yesil" href="#">Yeşil Bağlantı</a></p>
<p><a class="kahverengi" href="#">Kahverengi Bağlantı </a></p>
<p class="yesil">Bir Yeşil Daha Ama bu Bağlantı Değil</p>
<p><a class="mesgul" href="#">Meşgul.. Bekleyiniz</a></p>
<p><a class="yardim" href="#">Yardım</a></p>
<p><a class="tasi" href="#">Taşı</a></p>
<p><a class="oto" href="f**.html">Otomatik</a></p>
Bu kodun işleyebilmesi için ziyaretçinizin IE 4.0 sonrası bir Browser kullanıyor olması gerekir. NS kullanan ziyaretçiler etkiyi göremezler, o kadar.
Maviden gına geldi ise
Browserlar’a bağlantıları mavi harfle ve mavi çizgili çizgili yorumlattıran varsayılan stilden bıktı iseniz, aramıza hoşgeldiniz! Ama üzülmeyin. Mavilikten kurtulmanın bir yolu HEAD etiketi içinde şu stili oluşturmaktır:
<style>
<!--
a:link { text-decoration: none; color: #FF0000 }
A:visited {text-decoration:none; color:**ua}
a:hover { text-decoration: underline; color: #00FF00 }
-->
</style>
Tabiî, renkleri zevkinize göre verebilirsiniz. Dikkat gerektiren tek nokta, ziyaret edilmiş bağlantı ile edilmemiş bağlantının renklerinin aynı olması, ziyaretçiyi şaşırtır.
Yazıcıya göre sayfa kesme
Özene bezene hazırladığınız sayfaların ziyaretçi tarafından yazıcıda bastırılması halinde ne şekil alacağını da hesaba katıyor musunuz? Bazı sayfaların, özellikle grafik bulunan sayfaların yazıcıdan nasıl çıkacağını önceden planlamak tasarımcının görevidir. Fakat yazıcılar arasındaki farklar ve ziyaretçinin varsayılan harfinin büyüklüğü veya küçüklüğü gibi faktörler yüzünden evdeki hesap bazen çarşıyı tutmayabilir; en güzel grafiğiniz kağıda ortasından ikiye ayrılarak dökülebilir. Hiç değilse buna engel olabilir; sayfanızın dağıt üzerinde bir bütün oluşturmasını istediğiniz bölümünü belirleyebilirsiniz. HTML’in HEAD bölümüne şu stili girin:
<style type="text/css">
.yenisayfa (pagebreak-after: always)
</style>
Sonra, sayfanızı bölmek ve kağıt üzerinde yeni bir sayfa başlasın istediğiniz yerde, şu kodu yazın:
<br class="yenisayfa">
Sayfada tarih
Sayfalarınızda, günün adını, ay ve yılı, isterseniz, geri planında bir de güne belirten grafikle gösterebilirsiniz. Biraz uzunca görünmekle birlikte, herşeyi bir tablo içinde yapabilen bu kodu, istediğiniz sayfaya ithal ederek, bir kere yazdıktan sonra yeniden kullanmanız mümkün. (Bu kodu, yazarının adını belirten satıra yer vermek şartıyla, istediğiniz gibi kullanabilir ve değiştirebilirsiniz)
<TABLE WIDTH="75%" BORDER="0" CELLSPACING="5" CELLPADDING="5">
<tr><td WIDTH="100%">
<script LANGUAGE="JavaScript">
<!-- eski browseryardan gizleyelim
// DateCal JavaScript v1.00 Copyright (c) 1998 Carolyn B. Allard
var bugun = new Date()
var gun = bugun.getDay()
var tablo
var ay = bugun.getMonth()
var tarih = bugun.getDate()
var yil = bugun.getYear()
var ay_uzun = "January"
var yil_uzun = 1900
var uzuntarih = "bugun"
if (gun == 0) {resim = "pazar.jpg"}
if (gun == 1) {resim = "pazartesi.jpg"}
if (gun == 2) {resim = "sali.jpg"}
if (gun == 3) {resim = "carsamba.jpg"}
if (gun == 4) {resim = "persembe.jpg"}
if (gun == 5) {resim = "cuma.jpg"}
if (gun == 6) {resim = "cumartesi.jpg"}
if (ay == 0) {ay_uzun = "Ocak"}
if (ay == 1) {ay_uzun = "Şubat"}
if (ay == 2) {ay_uzun = "Mart"}
if (ay == 3) {ay_uzun = "Nisan"}
if (ay == 4) {ay_uzun = "Mayıs"}
if (ay == 5) {ay_uzun = "Haziran"}
if (ay == 6) {ay_uzun = "Temmuz"}
if (ay == 7) {ay_uzun = "Ağustos"}
if (ay == 8) {ay_uzun = "Eylül"}
if (ay == 9) {ay_uzun = "Ekim"}
if (ay == 10) {ay_uzun = "Kasım"}
if (ay == 11) {ay_uzun = "Aralık"}
yil_uzun = 1900 + yil
uzuntarih = ay_uzun + " " + tarih + ", " + yil_uzun
tablo = '<TABLE WIDTH="120" BORDER="0" CELLSPACING="2"';
tablo += 'CELLPADDING="0" HEIGHT="34">';
tablo += ' <TR>';
tablo += ' <TD WIDTH="120" HEIGHT="34"ALIGN="center" VALIGN="bottom" BACKGROUND="';
tablo += resim;
tablo += '"><CENTER><FONT COLOR="#003399" FACE="Arial" SIZE="-1">';
tablo += uzuntarih;
tablo += ' </FONT></CENTER></TD>';
tablo += ' </TR>';
tablo += '</TABLE>'
document.write(tablo)
// gizlemeye son-->
</script></font><</td></tr></table>
Bu kodu yazarken, en çok dikkat edilmesi gereken bölümü, Javascript’e HTML yazdırtan son 16-17 satırıdır.; tek ve çift tırnakların yerine özellikle dikkat etmeniz gerekir.