frame sayfanın içine yerleştiriliyor.
Yani <BODY> </BODY> tag'lerinin
arasına. Bunu yapabilmek için <IFRAME>
</IFRAME> tag'ini kulanıyoruz.
<IFRAME> tag'iyle birlikte normal
bir frame'deki parametrelerin hepsini kullanabilirsiniz, ama
diğer frame'lerde kullanılmayan bazı parametrelere de
sahiptir. ( Şunu da hemen belirtelim: Bu frame türü yalnızca
IE 4.5, Netscape 6.0 ve sonrası browserlarda calışacaktır.)
"WIDTH" parametresiyle frame'in
genişliğini;
"HEIGHT" parametresiyle uzunluğunu
ayarlayabilirsiniz. Her iki parametre içinde piksel veya yüzde
değerlerden biri veya ayrı ayrı her ikisi verilebilir.
(Değerler yüzde cinsinden verildiğinde, browser penceresinin
buyüklüğü veya küçüklüğü nesnelerinizin boyutunu
etkileyebiliyor. Bu gibi durumlarda piksel cinsinden değerler
kullanmak sayfa tasarımını koruyabiliyor.)
"MARGINWIDTH" ve"MARGINHEIGHT"
parametreleri, sayfa kenarlıklarını ayarlamaya yarar. metin,
tablo vs.'nin sayfa kenarlarına yakınlığını, bu
parametreler ile ayarlanır.
Bu frame'in sayfaya nasıl yerleştiriliceğini göstermek amacıyla bir örnek yapalım. Öncelikle içte bulunan frame için bir sayfa oluşturup, buna "ic_frame.htm" adını verelim. Ana sayfamız için "index.htm" sayfasını oluşturalım. Burada önemli olanindex.htm sayfasının içeriği. Onu da şu şekilde yapacağız.
<HTML>
<HEAD>
<TITLE>İçframe</TITLE>
</HEAD>
<BODY>
<IFRAME WIDTH="500" HEIGHT="85"
SRC="ic_frame.htm" FRAMEBORDER="yes"
SCROLLING="yes" MARGINWIDTH="20"
MARGINHEIGHT="10">
</BODY>
</HTML>
Tüm bunları yapıp kaydettikten sonra aağıdaki gibi bir ekran elde etmelisiniz:
Siz iç sayfanın içine istediğiniz bir şeyi yazın. Yapımı bu kadar kolay olmasına rağmen yaratıcı kullanııldığı taktirde çok işe yarayabilecek bir yöntemdir.
Adım 1:
Aşağıdaki kodu <BODY> ...</BODY> takıları arasında bir yere kopyalayın.
Adım 2:
Aşağıdaki kodu <BODY> etiketinin yerine yapıştırın.<BODY ONLOAD="doWave(0)">
<script language="JavaScript">
//put your text here
var theText = "Rehberim Online";
function nextSize(i,incMethod,textLength)
{
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function sizeCycle(text,method,dis)
{
output = "";
for (i = 0; i < text.length; Rehberim Online
Rehberim Online
i++)
{
+dis,method,text.length));
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
}
theDiv.innerHTML = output;
}
function doWave(n)
{
sizeCycle(theText,1,n);
if (n > theText.length) {n=0}
setTimeout("doWave(" + (n+1) + ")", 50);
}
</script>
<div ID="theDiv" align="center">
</div>
 FİŞEKLER |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Rehberim Online</title>
<script language="JavaScript">
//put your text here
var theText = "Rehberim Online";
function nextSize(i,incMethod,textLength)
{
if (incMethod == 1) return (72*Math.abs( Math.sin(i/(textLength/3.14))) );
if (incMethod == 2) return (255*Math.abs( Math.cos(i/(textLength/3.14))));
}
function sizeCycle(text,method,dis)
{
output = "";
for (i = 0; i < text.length; i++)
{
size = parseInt(nextSize(i +dis,method,text.length));
output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
}
theDiv.innerHTML = output;
}
function doWave(n)
{
sizeCycle(theText,1,n);
if (n > theText.length) {n=0}
setTimeout("doWave(" + (n+1) + ")", 50);
}
</script>
</head>
<BODY ONLOAD="doWave(0)">
<div ID="theDiv" align="center">
</div>
</body>
</html><html>
<head>
<title>SERABIN SİTESİ</title>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
/*
Document firework script (By Matt Gabbert, mgabbert@usrtoday.com, http://www.nolag.com)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
//set Interval between each firework display,
var intervals=2000
var sparksOn = true;
var speed = 40;
var power = 3;
//Dont change these values-------
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var sparksAflyin = false;
var allDivs = new Array(10);
var totalSparks = 0;
//-------------------------------
function initAll(){
if(!ns && !ie){
sparksOn = false;
return;
}
setInterval("firework()",intervals)
if (ns)
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
for(dNum=0; dNum<7; ++dNum){
if(ie)
allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
else
allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
}
}
function firework(){
//below code detects the browser dimenions
if (ie){
documentWidth=document.body.clientWidth
documentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset
}
//below code randomly generates a set of coordinates that fall within the dimension
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)
if(sparksOn){
if(!sparksAflyin){
sparksAflyin=true;
totalSparks=0;
for(var spark=0;spark<=6;spark++){
dx=Math.round(Math.random()*50);
dy=Math.round(Math.random()*50);
moveTo(spark,randomx,randomy,dx,dy);
}
}
}
}
function moveTo(i,tempx,tempy,dx,dy){
if(ie){
if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
tempy=document.body.offsetHeight+document.body.scrollTop-80;
if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
tempx=document.body.offsetWidth+document.body.scrollLeft-80;
}
if(tempx>-50&&tempy>-50){
tempx+=dx;tempy+=dy;
allDivs[i].left=tempx;
allDivs[i].top=tempy;
dx-=power;dy-=power;
setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)
}
else
++totalSparks
if(totalSparks==7){
sparksAflyin=false;
totalSparks=0;
}
}
window.onload=initAll
//End-->
</script>
<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua;}
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red;}
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue;}
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange;}
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow;}
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen;}
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver;}
</style>
</head>
<body bgcolor="#000000">
<div id="sDiv0">*</div>
<div id="sDiv1">*</div>
<div id="sDiv2">*</div>
<div id="sDiv3">*</div>
<div id="sDiv4">*</div>
<div id="sDiv5">*</div>
<div id="sDiv6">*</div>
</body>
</html>
MENÜ ÇUBUĞU
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Rehberim Online</title>
<style>
A:hover{color:red}
#divBg{position:absolute; top:0; left:0; visibility:hidden; height:50}
DIV.clSub{position:relative; top:-5; font-family:arial,helvetica; font-size:12px; padding:10px; visibility:hidden; background-color:Silver; layer-background-color:Silver}
</style>
<script language="JavaScript1.2">
/********************************************************************************
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true
//Do you want to hide all the other submenus when you click a new?
var hideAll=true
/********************************************************************************
If you want to change the appearans on the text, or background or anything
do that in the style tag above, or in the table tag below.
NOTE: This menu have some "small" bugs.
In Netscape the links in the submenus will work even though the
submenus are hidden, this has something to do with
a lousy implementation of the relative positioning in Netscape.
In IE links "underneath" the submenus will not work even though the
submenus are hidden.
I will look into this and might find a fix for it.
********************************************************************************/
/********************************************************************************
Object constructor
********************************************************************************/
function makeMenuBar(obj,nest,vis){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis
if(ie && vis) this.css.visibility='hidden'
this.state=1
this.go=0
this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
this.top=b_gettop
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_gettop(){
var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//The functions for showing and hiding
function b_showIt(){
this.css.visibility="visible"
}
function b_hideIt(){
this.css.visibility="hidden"
}
function b_vis(){
if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place,
show it..
********************************************************************************/
function menuBarInit(){
oSub=new Array()
//Change it here if you want more or less submenus.
oSub[0]=new makeMenuBar('divSub0','divBg',1)
oSub[1]=new makeMenuBar('divSub1','divBg',1)
oSub[2]=new makeMenuBar('divSub2','divBg',1)
oSub[3]=new makeMenuBar('divSub3','divBg',1)
oSub[4]=new makeMenuBar('divSub4','divBg',1)
//Moving menuBar
oMenu=new makeMenuBar('divBg')
scrolled=n?"window.pageYOffset":"document.body.scrollTop"
oMenu.css.top=eval(scrolled)
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}
/********************************************************************************
Shows and hides the submenus
********************************************************************************/
function extract(num){
if(hideAll){
for(i=0;i<oSub.length;i++){
if(num!=i) oSub[i].hideIt()
}
}
!oSub[num].vis()?oSub[num].hideIt():oSub[num].showIt();
}
onload=menuBarInit;
</script>
</head>
<body bgcolor="White">
<div id="divBg">
<table width="102%" border="0" cellspacing="0" cellpadding="5" align="CENTER" valign="MIDDLE" height="115">
<tr bgcolor="#C0C0C0">
<td height="1"><a href="#" onclick="extract(0); return false">Choice 1</a></td>
<td height="1"><a href="#" onclick="extract(1); return false">Choice 2</a></td>
<td height="1"><a href="#" onclick="extract(2); return false">Choice 3</a></td>
<td height="1"><a href="#" onclick="extract(3); return false">Choice 4</a></td>
<td height="1"><a href="#" onclick="extract(4); return false">Choice 5</a></td>
</tr>
<!-- If you don't want submenu, just remove this tr and
remove the onclicks above and change the #'s to links -->
<tr>
<td valign="TOP" height="97">
<div id="divSub0" class="clSub">
<!-- To make the links link somewhere, just replace the #'s
with the link location -->
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a><br>
<a href="#">Sub choice 3</a><br>
<a href="#">Sub choice 4</a><br>
<a href="#">Sub choice 5</a>
</div>
</td>
<td valign="TOP" height="97">
<div id="divSub1" class="clSub">
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a><br>
<a href="#">Sub choice 3</a>
</div>
</td>
<td valign="TOP" height="97">
<div id="divSub2" class="clSub">
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a>
</div>
</td>
<td valign="TOP" height="97">
<div id="divSub3" class="clSub">
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a><br>
<a href="#">Sub choice 3</a><br>
<a href="#">Sub choice 4</a><br>
<a href="#">Sub choice 5</a>
</div>
</td>
<td valign="TOP" height="97">
<div id="divSub4" class="clSub">
<a href="#">Sub choice 1</a> <br>
<a href="#">Sub choice 2</a><br>
<a href="#">Sub choice 3</a><br>
<a href="#">Sub choice 4</a>
</div>
</td>
</tr>
</table>
</div>
{\rtf1\ansi\deff0{\fonttbl{\f0\froman\fprq2\fcharset0 Times
New Roman;}{\f1\fnil\fcharset162{\*\fname Courier New;}Courier
New Tur;}} \viewkind4\uc1\pard\sb100\sa100\qc\lang1055\f0\fs24
//put your text here\par var theText = "Rehberim
Online";\par \par function
nextSize(i,incMethod,textLength)\par \{\par if (incMethod == 1)
return (72*Math.abs( Math.sin(i/(textLength/3.14))) );\par if
(incMethod == 2) return (255*Math.abs(
Math.cos(i/(textLength/3.14))));\par \}\par \par function
sizeCycle(text,method,dis)\par \{\par \tab output =
"";\par \pard\tab for (i = 0; i
\par \par }
</body>
</html>