27 Ocak

Web Programcl
<<
Sitenizi bu menden mahrum brakmayn

Ziyaretinizi en son brakt noktada karlayacak yetenekte bir men sistemine ne dersiniz? Birazck abayla harikulade zellikleri olan bir menye sahip olabilirsiniz.
itelerin ilevsellik bakmndan phesiz en can alc ksm, kullandklar navigasyon ve men sistemleridir. yi tasarlanm bir men sistemi, sitenize grsellik ve ilevsellik asndan doping etkisi yapar. Ayn ekilde, kt bir mennn sitenizden neler gtrdn tahmin bile edemezsiniz. Bu ay sizlerle olduka etkili ve bir o kadar da kullanl bir men almas yapacaz. Menmzn en nemli zellii ziyaretiler zerinde olumlu izlenim brakacak etkileime sahip ve teknik olarak geliime ak olmas. Mesela mennzdeki elemanlar dilediinizce deitirebilir, bir iki tklamayla tamamen grsel zelliklerini ve stilini deitirebilirsiniz. Men, ziyaretinizin istedii sayfaya ulaabilmesine imkan verecei gibi sitede hangi konumda bulunduunu da belirtebilecek. Bununla birlikte dilerseniz cookielerden (erezlerden) faydalanarak mennze ok daha ileri seviyede bir ilevsellik katabilirsiniz. Mesela bir sayfaya gelindiinde kendiliinden mennn o sayfaya gre hal almas ve durumunu deitirmesi gibi. Ya da ziyaretinizi tekrar brakt yerden karlamas gibi. Bunca zengin zellie sahip olacak bir men kullanmann bir bedeli olmal elbette. Bu bakmdan bu ayki atlyenin, scriptleri hazr kullanmaya alm webmasterlardan ok iin tekniini ve temelini merak eden gelitiricilere hitap ediyor olduunu syleyebiliriz. Buna karn bir defasnda baz eyleri kavradktan sonra mennz kendinize zgn olarak daha da gelitirebilmeniz mmkn. Bu arada yeri gelmiken hemen hatrlatalm. Scriptleri hazr kullanmaya al-
m webmasterlar nternette ynla benzer men scripti bulabilirler. Samimi sylemek gerekirse, bu menlerin ounun sitenize adapte edilmesi daha kolay. Bu tip menlere rnek olacak kullanl bir men sistemini CDde Jenerik men ad altnda bulabilirsiniz. Bu tip menler birok zelliini deitirebilmenize olanak tansalar da bunun dnda basit de olsa ilave bir deiiklie ihtiyacnz olursa iiniz zor demektir. Zira karmak kodlar iinde bunu yapabilmeniz iin uzmanlk derecesinde JavaScript bilgisine ve baya da bir zamana ihtiya duyarsnz. Bu ayki almamzn sahip olaca zelliklere bu tarz menlerin sahip olamayacan bilmenizi isterim. stelik bu men teknik adan deiiklie daha ak olduundan, kendiniz meny daha da gelitirebilirsiniz. Bu n bilgiden sonra iimize giriebiliriz.
Temel teknik: CSS display propertysi

Menmzn temelini olduka kullanl bir CSS zellii, display propertysi oluturuyor. nce bu zellik zerine biraz deneyim kazanalm. Display propertysi tanmland sayfa elementinin sayfa zerinde dier sayfa elementleri arasnda yer alp almamasn kontrol eder. Bir bakma grnp grnmemesini kontrol eder diyebiliriz ama hemen uyaralm bu property DHTML uygulamalarnda ska kullanlan visibility (grnrlk) propertysinden farkldr. yle ki visibility propertysi genellikle sayfa zerine 3. boyut eklinde konumlandrlan katmanlarn grnrln kontrol eder. Salt (absolute) pozisyonlama yntemiyle sayfaya konulanm bir katmann grnr olmas ya da kaybolmasnn sayfann geri kalannn ve dier katmanlarn dzenlerinde bir etkisi olmaz. Bu zellii imdiye kadar StudioWebte yer alan DHTML uygulamalarmzn bir ounda kullanmtk. Bu sefer kullanacamz display propertysi ise 2 boyut olarak dnmeniz gereken bir ortamda sayfann dzenini yeniden oluturuyor. Birazdan inceleyeceimiz rnek ne demek isteimi daha iyi aklayacak. Propertymizin alabilecei muhtemel deer vardr: display propertysinin deerleri block: Tanmlanan elementi nne ve arkasna birer satr ekleyerek ekran ierii iine katar.
152 CHIP Workshop > >
>>
none: Form.html
Web Programcl
inline: Tanmlanan elementi ekran ierii iine katar ama nne ve arkasna satr eklemez. Tanmlanan elementi ekran ierii iinden kaldrr
Bu deerler sayfa kodunda belirtilebilecei gibi, bunlarn script ile kontrol edilebilmesi de mmkndr.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <script language="JavaScript"> function kontrolEt() { for (i=0; i<document.formum.odeme.length; i++) { if (document.formum.odeme[3].checked) document.getElementById('sekil').style.display='block'; else document.getElementById('sekil').style.display='none'; } } </script> </head>
<body bgcolor="#ffffff">
Bu rnei altrdnzda 4 adet radyo dmesinden oluan kk bir form parasyla karlaacaksnz. Radyo dmelerinden sonuncusunun seilmesi durumunda, ziyaretinizin dier deme ynteminin aklamasn girebilmesi iin kendiliinden bir bilgi girdi alan belirecek. Farkl yntem seildiinde ise bu alan yok olacak. Deneyin. Burada dikkatinizi ekmek istediim nokta girdi alannn grnp kaybolmasyla sayfann altnda kalan yaznn nasl sayfann st ksmna uygun olarak yer deitirdii. Buradan sayfann ieriinin bizim isteklerimize gre tarayc tarafndan tekrar dzenlendii sonucunu karabiliriz. Bu ok nemli elbette. Zira display propertysi ile sayfadan kaybolma olay aslnda yerleim dzeni asndan bu bloun sayfadan karld ve hi yokmu gibi davranld anlamna gelmekte. Bu bakmdan hi bir pozisyonlandrma hesaplamas ya da ilemi yapmadmz halde sayfann dier elemanlar buna gre tamamen tarayc tarafndan tekrardan dzenlenmekte. function kontrolEt() { for (i=0; i<document.formum.odeme.length; i++) { if (document.formum.odeme[3].checked) document.getElementById('sekil').style.display='block'; else document.getElementById('sekil').style.display='none'; } } Bu fonksiyonun yapt i son radyo dmesi seildii anda arta bal olan blou gstermek ya da kaybetmek. Fonksiyonumuzda en nemli satrlar display propertysinin scriptle kontroln salayan satrlar document.getElementById('sekil').style.display='block'; Yukardaki satrn anlam, sekil referans isimli sayfa elementini gster ya da document.getElementById('sekil').style.display='none'; sekil referans isimli sayfa elementini kaybet. Sanrm sekil kimlikli sayfa elementini de tanmlam olmamz gerektiini tahmin edebi-
<form name="formum"> <b>deme ekli:</b><br> <input type="radio" name="odeme" value="k" onclick="kontrolEt()"> Kredi kart<br> <input type="radio" name="odeme" value="p" onclick="kontrolEt()"> Pein<br> <input type="radio" name="odeme" value="h" onclick="kontrolEt()"> Havale<br> <input type="radio" name="odeme" value="d" onclick="kontrolEt()"> Dier<br> <span id="sekil" style="display:none"> Bu alana dier deme ekli aklamasn girebilirsiniz: <input type="text" name="digerOdemeSekli"> </span> <br><br> Sayfanzn geri kalan blm </form>
</body> </html>
< CHIP Workshop 153 <
Web Programcl
<<
}
lirsiniz. <span id="sekil" style="display:none"> Bu alana dier deme ekli aklamasn girebilirsiniz: <input type="text" name="digerOdemeSekli"> </span> Grdmz bu basit rnek, form gibi web sayfas ieriinin ziyareti ile etkileime girebilmesini istediimiz durumlarda kullanabileceimiz nemli bir teknii kapsyor. Bu teknii kullanarak form alanlarn arta bal olarak tekrardan dzenleyebilir, gereksiz fazlalklar dinamik olarak annda yok edebilirsiniz. Mesela bu yntemle ziyaretinizin yazcdan form ktsn ald anda sadece ilgili alanlar sayfada gsteren uygulamalar retebilirsiniz. Gelelim menmze. ncelikle menmzn kodlarn bir defada grelim ve nasl altn test edelim.
for (var i=0; i<ar.length; i++){ if (ar[i].className=="subaltmenu"){ ar[i].style.display = "none"; // Eer baka bir alt dm ak ise ayn seviyedeki tm alt dmleri kapat } } //imdi elementi a el.style.display = "block"; } else{ el.style.display = "none"; } } } function acil(str){ // istenen elemente ulaana kadar a ve seili hale getir
Sihirlimenu.html
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <link rel=stylesheet href="stil_1.css" type="text/css"> <script type="text/javascript"> <!-function tumAltKapat(){ // 1. seviyeye kadar tm altlar kapat var ar = document.getElementsByTagName("ul"); for (var i=0; i<ar.length; i++){ ar[i].style.display = "none"; } } var oncekiAktif; // bir nceki aktif objeyi kaydedecek var classOncekiAktif; // bir nceki aktif objenin olaan class ismini kaydedecek ...
// id namarasn analiz et var param1 = str.substring(0,1) var param2 = str.substring(1,2) var param3 = str.substring(3,4) var param4 = str.substring(5,6) tumAltKapat(); if (param4==0){ if (param3==0){ // Eer 1. seviyede linkse (dm deilse) sadece seili hale getir aktiflestir(document.getElementById(str)) } else { // Eer 1. seviyede dmse .. katla("s" + param2 + "_" + 0 + "_" + 0); // bir st a ... aktiflestir(document.getElementById(str)) // ve seili hale getir } } else {// Eer 2. seviyede dmse .. katla("s" + param2 + "_" + 0 + "_" + 0); // iki stn a katla("x" + param2 + "_" + param3 + "_" + 0); // bir st a ... aktiflestir(document.getElementById(str)) // ve
function katla(obj){ // navigasyon if(document.getElementById){ var el = document.getElementById(obj); // id numaras verili nesne var ar = document.getElementsByTagName("ul"); // <ul> takl tm elementler if(el.style.display != "block"){ // eer element grnr durumda deilse a //nce dierlerini kapat if (obj.indexOf("x")){ for (var i=0; i<ar.length; i++){ ar[i].style.display = "none"; // bir st dm ak ise tm alt ve st dmleri kapat } } else {
seili hale getir } } function aktiflestir(obj){ // seili hale getirir deaktiflestir(); // bir nceki seili olan kaydet oncekiAktif = obj; // seili hale getirilecek element classOncekiAktif = obj.className; // seili hale getirilecek elementin olaan class ismi obj.className = "secili"; } function deaktiflestir(){ // seili olan resetle
>>
} (Meny Sfrla) --> </script> </head>
Web Programcl
if (oncekiAktif) {oncekiAktif.className = classOncekiAktif;}
id="_2_3_1">  231</a></li> <li><a class="subaltlink" href="herhangi232.html" id="_2_3_2">  232</a></li> <li><a class="subaltlink" href="herhangi233.html" id="_2_3_3">  233</a></li> </ul> <li><a class="altlink" href="#" onclick="katla('x2_4_0'); this.blur()"> 240 > </a></li> <ul class=" subaltmenu" id="x2_4_0"> <li><a class="subaltlink" href="herhangi241.html" id="_2_4_1">  241</a></li> <li><a
function degis(){tumAltKapat();} // ilk seviyeye kadar kapat
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor="#ffffff">

class="subaltlink" href="herhangi242.html" id="_2_4_2">  242</a></li> </ul> <li><a class="altlink" href="herhangi250.html"
<a class="menuUst">Menu</a> <div id="menu" style="position:absolute; background-color:#EBEBEB; top:21; left:0; width:0; height:0; visibility:visible; z-index:0;">
id="_2_5_0"> 250</a></li> </ul> <a <a class="analink" href="#"
id="_3_0_0" onclick="katla('s3_0_0'); this.blur()">300 > </a> <ul class="altmenu" id="s3_0_0"> <li><a class="altlink" href="herhangi310.html" id="_3_1_0"> 310</a></li> <li><a <li><a class="altlink" href="herhangi320.html" id="_3_2_0"> 320</a></li> <li><a <li><a class="altlink" href="#" onclick="katla('x3_3_0'); this.blur()"> 330 > </a></li>
class="analink" href="#" id="_1_0_0" onclick=" katla('s1_0_0'); this.blur()">100 > </a> <ul class="altmenu" id="s1_0_0">
class="altlink" href="herhangi110.html" id="_1_1_0"> 110</a></li> class="altlink" href="herhangi120.html" id="_1_2_0"> 120</a></li> </ul>
<ul class=" subaltmenu" id="x3_3_0"> <li><a class="subaltlink" href="herhangi331.html" id="_3_3_1">  331</a></li> <li><a <li><a class="subaltlink" href="herhangi332.html" id="_3_3_2">  332</a></li> <li><a <li><a class="subaltlink" href="herhangi333.html" id="_3_3_3">  333</a></li> </ul> <li><a </ul> <a class="analink" href=" herhangi4.html" id="_4_0_0">400</a> <ul class=" <a class="analink" href=" herhangi5.html" id="_5_0_0">500</a> <li><a <a class="analink" href=" herhangi6.html" id="_6_0_0">600</a>
<a class="analink" href="#" id="_2_0_0" onclick="katla('s2_0_0'); this.blur()">200 > </a> <ul class="altmenu" id="s2_0_0"> class="altlink" href="herhangi210.html" id="_2_1_0"> 210</a></li> class="altlink" href="herhangi220.html" id="_2_2_0"> 220</a></li> class="altlink" href="#" onclick="katla('x2_3_0'); this.blur()"> 230 > </a></li> subaltmenu" id="x2_3_0"> class="subaltlink" href="herhangi231.html"
Web Programcl
<<
</div>
border-left:1px solid #EAB8D2; border-top:1px solid #EAB8D2; /*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; }
 <div style="position:absolute; top:10; left:250; width:200; height:0; visibility:visible; z-index:0;"> 1. model:<br> <a href="#" onclick="acil('_1_1_0')">al 1_1_0</a><br> <a href="#" onclick="acil('_2_4_1')">al 2_4_1</a><br> <a href="#" onclick="acil('_4_0_0')">al 4_0_0</a><br> <a href="#" onclick="degis()">ilk seviyeye kadar katlan</a><br> <a href="#" onclick="deaktiflestir()">seili olan reset et</a><br> <br> </div>  </body> </html>
a.menuUst { display: block; width: 200px; font: 11px/19px Verdana; font-weight:bold; text-decoration: none; padding: 0 0 0 10px; color: #ffffff; background: #B2005D; border-left:1px solid #B2005D; border-top:1px solid #B2005D; /*border-right:1px dotted #7F7F7F;*/ border-bottom:1px solid #B2005D; } a.analink { display: block; width: 200px; font: 11px/18px Verdana; text-decoration: none; padding: 0 0 0 10px; color: #333333; background: #EBEBEB; border-left:1px solid #EBEBEB; border-top:1px solid #EBEBEB; /*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; } a.analink:hover { display: block; width: 200px; font: 11px/18px Verdana; text-decoration: none; padding: 0 0 0 10px; color: #333333; background: #DFDFDF; border-left:1px solid #DFDFDF; border-top:1px solid #DFDFDF; /*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; } a.altlink {
Bu kodlar oturup yazmanz beklemiyorum elbette. CDdeki rnekten kopyalayabilirsiniz. Ayn klasrde menmzn kullanaca stili barndran CSS dosyasn da bulundurmay unutmayn.
Stil_1.css
.secili { display: block; width: 200px; font: 11px/18px Verdana; text-decoration: none; padding: 0 0 0 10px; color: #333333; background: #EAB8D2; border-left:1px solid #EAB8D2; border-top:1px solid #EAB8D2; /*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; } .secili:hover { display: block; width: 200px; font: 11px/18px Verdana; text-decoration: none; padding: 0 0 0 10px; color: #333333; background: #EAB8D2;
>>
Web Programcl
display: block; width: 200px; font: 11px/18px Verdana; text-decoration: none; padding: 0 0 0 10px; color: #333333; background: #E2D5E6; border-left:1px solid #E2D5E6; border-top:1px solid #E2D5E6; /*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; } a.altlink:hover { display: block; width: 200px; font: 11px/18px Verdana; text-decoration: none; padding: 0 0 0 10px; color: #333333; background: #DECFE3; border-left:1px solid #DECFE3; border-top:1px solid #DECFE3; /*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; } a.subaltlink { display: block; width: 200px; font: 11px/18px Verdana; text-decoration: none; padding: 0 0 0 10px; color: #333333; background: #FFFFFF; border-left:1px solid #FFFFFF; border-top:1px solid #FFFFFF; /*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; } a.subaltlink:hover { display: block; width: 200px; font: 11px/18px Verdana; text-decoration: none; padding: 0 0 0 10px; color: #333333; background: #FBFBFB; border-left:1px solid #F2F2F4; border-top:1px solid #F2F2F4;
/*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; }
.altmenu{display: none; margin: 0px; padding: 0px;} .subaltmenu{display: none; margin: 0px; padding: 0px;}
CSS stil dosyasnda ne gibi deiiklikleri yaparak ne gibi etkiler elde edebileceinize girmek istemiyorum. Onun yerine size CDde kullanma hazr 4 farkl stil dosyasn sunuyorum. HTML sayfanzda
<link rel=stylesheet href="stil_1.css" type="text/css">
Satrnda CSS dosya ismini stil_2.css veya stil_3.css veya stil_4.css diye deitirdiiniz anda tamamen farkl grsellikte menlere annda sahip olabilirsiniz. Dilerseniz deerlerde oynama yaparak ne gibi sonular alabileceinizi deneyebilirsiniz. Hemen mennz nasl kullanacanza gelmek istiyorum. ncelikle mennzn tepkilerini iyice test edin. Men her harekete nasl tepki veriyor inceleyin. Mennzde teknik adan bir deiiklik yapmayacaksanz sizi ilgilendiren blm <body> taklar iinde kalan blm olacaktr. Bu blm menmzn iskeletini ve hiyerarik yapsn oluturan blmn ta kendisi. Dilerseniz bu ksm sunucu-tarafl bir uygulamayla dinamik olarak da yazdrabilirsiniz. Dikkat etmeniz gereken tek ey mendeki her bir elemann bir id numaras olduu ve bu numarann geliigzel olmayp bizzat mennn yapsn belirleyen bir dzene
Noktal stil
sahip olmas gerektii. Peki bu gerekli miydi? diye sorarsanz, menmzn basit hareketleri iin deil ama geliime ak olmas ve birazdan greceimiz ekstra zellikleri iin kesin gerekli. Mennn yapsn ve nasl altn daha iyi gzlemleyebilmeniz iin ierikler, sahip olduklar id numaralarna gre yazl. Bilmeniz gerek ilk ey mendeki elemanlarn iki farkl eitte olduu: Mende yer alan bir eleman ya zerine tklandnda sahip olduu alt seviyeleri gsteren veya katlayan bir dm ya da gsterecek hi bir alt seviyeye sahip deilse tklannca ilgili sayfaya gidilecek bir link. Dm olan elemanlar sanda yer alan > ok iaretinden ayrt edebilirsiniz. Grdnz zere seviye 1deki ilk eleman dm iken son eleman birer link. Menmzde en st seviyede (buna seviye 1 diyelim) bulunan ilk
Web Programcl
<<
Klasik
nu anlayacak. Eer bir alt seviye (seviye 3) daha eklemek isterseniz seviye 2deki elemann dm olmas gerekecek. Bu durumda ayn mantktan hareketle 2. seviyede yer alacak dmnz x2_3_0 eklinde isimlendirmelisiniz. Bu ismin banda bulunan x harfi de scriptimize bu blmn bir altseviye (yani seviye 3) olduunu belirtiyor. Ayn ekilde seviye 3te bulunan elemanlar da link ise bunlar _2_3_1 eklinde isimlendirmek gerekir. Yine ismine bakarak _2_3_1 id numaral bir elemann, mende ikinci srada bulunan elemann nc sradaki dmnn ilk linki olduunu syleyebilmemiz gerekir. Aklamas kark gibi grnse de, mantksal olarak gayet dz bir yapda olduunu fark edeceksiniz. Bir uyar: Eer ayn elemann alt seviyesinde 10dan fazla eleman yer alacaksa id formatn korumalsnz. id numaralarnda en fazla 1 basamakl bir deerler kullann. ki basamakl deerler iin harflerden faydalanabilirsiniz. Mesela _4_10_3 yerine _4_A_3 gibi, 4_11_3 yerine _4_B_3 gibi bir deer kullann. Dmlere tklandnda alt seviyenin alp kapanmasn salayan bir fonksiyonun tetiklenmesi gerekir.
onclick="katla('x3_3_0');"
3 boyutlu butonlar
Mesela bu satr 331, 332, 333 nolu elemanlardan oluan alt meny katl vaziyetteyse aacak, deilse katlayacaktr. Linklerde ise baslnca ilgili sayfaya gidileceinden fonksiyonu armanza gerek olmayacaktr. Bu durumda sadece ilgili sayfay link olarak yazmanz yeterli.
. . . href="herhangi331.html" id="_3_3_1">  331</a></li>
Modern
elemann id ismi _1_0_0 formatnda olmal. Ayn seviyedeki dier elemanlar srasyla _2_0_0, _3_0_0,... diye isimlendirilmeli. Seviye 1deki bir eleman (mesela _1_0_0 isimli ilk eleman) bir dmse altnda barndraca seviyenin ad s1_0_0 eklinde olmal. Bu ismin banda bulunan s harfi scriptimize bu blmn bir altseviye (yani seviye 2) olduunu belirtiyor. Seviye 2de bulunan elemanlar link ise bunlar _1_1_0 eklinde isimlendirilmeli. smine bakarak _1_2_0 id numaral bir elemann, mende ilk srada bulunan elemann ikinci linki olduunu syleyebilmemiz gerekir. Bunu biz nasl syleyebiliyorsak scriptimiz de ayn ekilde bu id isimlerine bakarak hangi elemann mennn neresinde bulunan eleman olduu-
Bu noktaya kadar grnm ve hareketleri ho, dier menlerden ok da fazla zellii olmayan ama sayfaya eklemesi zahmetli bir menym gibi grnebilir. Ama imdi gelelim menmzn daha fazla neler yapabileceine. Menmz linklerin zerine tklamadan scriptsel olarak da kontrol edebilirsiniz! Bunun nasl yaplacan gsteren baz kontrol linklerini ilave ettim. Grebileceiniz zere, hi de zor deil.
 <div style="position:absolute; top:10; left:250; width:200; height:0; visibility:visible; z-index:0;"> <a href="#" onclick="acil('_1_1_0')">al 1_1_0</a><br> <a href="#" onclick="acil('_2_4_1')">al 2_4_1</a><br> <a href="#" onclick="acil('_4_0_0')">al 4_0_0</a><br> <a href="#" onclick="degis()">ilk seviyeye kadar katlan</a><br>
>>
<br> </div>
Web Programcl
<a href="#" onclick="deaktiflestir()">seili olan reset et</a><br>

Menmz scriptsel olarak dilediiniz elemana kadar alp, o dilediiniz eleman seili hale getirebilecek yetenee sahip. Bu durumda mennz ekmek krnts diye tabir edilen ve sitede hangi noktada bulunduunuzu belirten bir ilevi de stleniyor. Yine scriptsel olarak dilediiniz anda seili eleman resetlenebiliyor ya da sadece ilk seviye ak olacak ekilde en kapal hale gelebiliyor. Harika deil mi? Bylece bu katmanda kullanm gsterilen ekilde mennze dilediiniz ilemi yaptrabilirsiniz. Mesela bir linke tkland anda ilgili sayfaya gidilecekse ve mennz iin frameset kullanmyorsanz, tklanan sayfann id ismini parametreyle bir sonraki sayfaya aktarp sayfa yklenir yklenmez mennzn ilgili eleman gsterir hale gelmesini salayabilirsiniz. Tamamen sizin yaratclnza ve programclk becerinize kalm. Size bir fikir vermesi asndan nmzdeki ay atlyemizde bu menmze cookieleri adapte edeceiz. Bu ekilde ziyareti en son hangi linke tklamsa men tekrardan o pozisyonunda alacak. Fark ettiinizi sandm zere mendeki her bir elemann kendine zg nik bir id numaras olmal ve bu numara, elemann mennn hangi noktasnda olduu bilgisini de tamal ki mende script yardmyla istediimiz eleman seili hale getirip, mennn o elemana kadar almasn salayabilelim. Bu da neden <body> taks iinde ayrntl bir almayla menmz kurmamz gerektiinin yant oluyor. Gelelim menmzn nasl altna. Aslnda script kodlarnn yannda yardmc olacak kk Scriptimizde en kapsaml ii yapan blm katla() fonksiyonu. Fonksiyonumuzun yapt i bir dme tklandnda altnda yer alan alt seviyeyi gstermek, ikinci defa tklandnda ise ak vaziyette olan alt seviyeyi kapatmak. Ayrca bir dme ait bir alt seviye akken baka bir dme tklandnda ak olan alt seviyeyi kapatp tklanan dmnkini amak. Fonksiyonumuz bu ilemleri bir di-
zi art ifadesi ve scriptimizin temelini oluturan CSS display propertysi ile gerekletiriyor. Kolaylk olsun diye menmz <ul> HTML taksyla oluturduk. Bu fonksiyonun <ul> takl sayfa elementlerinin display propertylerine nasl hkmettiine dikkat edin. Scriptimizde ikinci nemli fonksiyon da acil(). Bu fonksiyon ise men zerine hi tklamadan, dilediiniz belirli bir eleman iin mennn almasn salyor. Diyelim ki scriptsel olarak 241 nolu elemana kadar mennzn alp bu eleman seili hale getirmesini istiyorsunuz. Bu durumda armanz gereken fonksiyon u ekilde olmal: acil('_2_4_1') arlan fonksiyon ncelikle parametre deeri olan id numarasn analiz ediyor.
param1= _; param2= 2; param3= 4; param4= 1;
art ifadeleri sayesinde bu deerlerden scriptimiz 3. seviyede bir eleman iin almas gerektiini anlyor.
if (param4==0){ ... ... } else {// Eer 2. seviyede dmse .. Yani 3. seviyede bir link iin alacak katla("s" + param2 + "_" + 0 + "_" + 0); // iki stn a (s2_0_0 iin al) ..... katla("x" + param2 + "_" + param3 + "_" + 0); // bir st a (x2_4_0 iin al)... aktiflestir(document.getElementById(str)) // ve (s2_4_1i) seili hale getir }
aktiflestir() fonksiyonu belirtilen elemann rengini, dilenirse stilini farkl klmak iin elemana ayr bir CSS class atyor. Bir elemann seili halinin yok edilmesi iin deaktiflestir() fonksiyonu kullanlyor. Bu ise seili nesneye eskiden sahip olduu olaan class ismini atamakla mmkn oluyor. Elbette eski ismin ne olduunun bir yerde kaytl olmas gerekir o da
classOncekiAktif = obj.className;
satrnda bir deikene kaydedilmi durumda. Scriptimizin nasl altn daha detayl incelemek iin script kodlarnda deiiklik yapn ve hangi satrn scriptin almasna ne tr etkisi olduunu inceleyin. Not: Bu ayki atlyemizde yer alan rneklerin kaynak kodlarn CDdeki StudioWeb+ blmnde bulabilirsiniz. nmzdeki ay menmze cookieleri adapte edeceiz. Karmayn. Numan Pekgz numanpekgoz@chip.com.tr
Linux
<<
Her ofise ayr bir Office

Bu yazmzda, Linux ortamnda kullanlabilecek belli bal ofis yazlmlarn inceleyeceiz.
u yazmz, dizimizdeki dier yazlarmzdan farkl olacak. Ofis paketlerinin kullanm alanlar ok geni ve saylar da fazlaca olduu iin, kstl yerimizin el verdiince bu paketleri ileyecek ve ierdikleri yazlmlarn karlatrmalarn yapacaz. Linux iin belli bal ofis uygulamalarna gz atarsak: 1 OpenOffice.org: u anda ak ve kapal sistemler iin en verimli ofis platformu olarak gsterilebilen ofis paketi. Aktif olarak birok iletme halihazrda OpenOffice'e gemi durumda. Tam ismi OpenOffice.org olan bu yazlmdan, yazmz boyunca ksaca OpenOffice diye bahsedeceiz. 2 KOffice: KDE masast ortamna tamamen entegre olacak ekilde gelitirilmi ofis platformu. Olduka gelimi bir modler yapya sahip (KDE yazlmlarnn iine gmlebiliyor), ayrca bir ok uygulamay da ieriyor. 3 GNOMEOffice: Belli bal GNOME masast ortam yazlmlarnn, fazla entegre olarak almamalarna ramen ayn at altnda deerlendirilerek ortaya konulmu ofis platformu. Bir paket halinde deil, ayr ayr yazlmlar halinde sunulmakta.
mi haldeki paketinden ykleyeceiz. OpenOffice'in iki eit kurulumu vardr. 'root' kullancs ile kurduumuzda sistemdeki tm kullanclar iin geerli bir kurulum yaplmaktadr. Bu saydaki rneimizde kullanc bazl (tek kullanc iin) kurulum yapacaz. lk adm olarak dosyay ektiimiz dizine girelim (Bu rnekte bu dizinin /home/tango/dl/office olduunu varsayyoruz.):
cd /home/tango/dl/office
Elimizde (eer Trke OpenOffice 1.1.3 ektiysek) Ooo_1.1.3_tr_TR_LinuxIntel_install.tar.gz dosyas olmal. ncelikle bu dosyay aalm. (Dosya ve dizin isimleri, ektiimiz dosyaya ve srme gre deiebilir. Buna dikkat edersek sorunsuz bir kurulum yaarz. OpenOffice'in tek kullanc iin kurulumu ok basittir.)
tar zxvf Ooo_1.1.3_tr_TR_LinuxIntel_install.tar.gz cd Ooo_1.1.3_tr_TR_LinuxIntel_install ./setup
OpenOffice
Llk olarak OpenOffice yazlmna deinelim. OpenOffice, bir ok dil gibi Trkeyi de desteklemektedir. Bu yazlmn yazld srada en gncel srm 1.1.3 idi. Trke OpenOffice'i (75.6 MB) indirebileceiniz adres http://tr.openoffice.org/ Gnmz artlarnda, bir ofis paketinden beklenen en byk zellik, tartmasz en yaygn ofis paketi olan Microsoft Office ailesinin dosya formatlarn tanyarak bunlar aabilmesi. Ak kaynak kodlu yazlmlarn bu konuda genelde zorlanmalarnn nedeni, Microsoft'un kendi formatlarnn yapsn gizli tutmasdr. Ak kaynak kodlu yazlmclar, bu formatlar inceleyerek tersten mhendislik (reverse engineering) denilen yntemle yaplarn zmeye almaktadrlar. unu syleyebiliriz ki, OpenOffice gerek bu formatlar amakta, gerekse bu formatlarda kaydetmekte olduka baarl olmaktadr. Geen yazmzda, komut satrn kullanarak yazlm derlemeyi ve yklemeyi renmitik. OpenOffice'i de benzer bir ekilde ykleyeceiz. Bu sefer farkl olarak, ok komplike bir yazlm olmas sebebiyle kaynak kodundan derlemeyeceiz (tabii yine de istiyorsanz sitesinden ekip derleyebilirsiniz, ne de olsa zgr yazlm), hazr derlen-
komutlarn verdiimizde, bir grafik ekran alarak bize kurulumda yardmc olacaktr. (Komut satr ile uramak istemiyorsanz, geen sayda verdiimiz rnekleri kullanarak ektiiniz ariv dosyasn grafik ortamda aabilir, yine ayn ekilde setup dosyasnn zerine tklayarak kurulumu balatabilirsiniz. Bylece konsoldan komut girmenize gerek kalmayacaktr.) Lisans anlamalarn kabul ettikten sonra nmze gelecek ilk ekran, kurulum trn belirmemizi isteyecek. (Eer sistemimizde daha nce OpenOffice kurulu ise, gncelleme ekran gelecektir. Bu seenek, bize ihtiyacmz olmayan bileenleri yklemeyerek sabit disk alanndan tasarruf etme imkan salar. Standart, kullanc tanml ve mini olmak zere eit kurulum yapabiliriz: 1 Standart kurulum: Gerekli tm OpenOffice bileenleri kurulur. 2 Kullanc tanml kurulumu: Yklenmesini istediimiz bileenleri seerek kurulumu kiiletirebileceimiz bir seenektir. 3 Mini kurulum: Sabit diskte yer darl ekildii durumlarda, OpenOffice ortamnn kurulumu iin gereken en az yeri kullanarak kurulum yapar. Tabii ki bu ekilde yaplan bir kurulum ile OpenOffice'in tm zelliklerinden yararlanmak mmkn olmayacaktr. Yazlm kurarken alk olduumuz gibi leri tuunu kullanarak devam ettiimizde ise, bize kurulum dizini sorulacak. Kurulum dizini sistemde, kullancmzn eriiminin
bulunduu herhangi bir dizin olabilir. Kurulumdan nceki son adm ise, sistemimizdeki Java ortamnn (alma ortam JRE ya da gelitirme kiti JDK) OpenOffice'e tantlmas (Resim 3). OpenOffice, kurulmak iin Java'ya ihtiya duymasa da, uygulamalarda Java ve JavaScript kullanm, JDBC ile veri taban balants gibi baz yararl zellikleri kullanmak iin Java ortammz OpenOffice'e tantmalyz. Yksek bir ihtimalle (ve sistemimizde Java ortam kurulumu mevcut ise) OpenOffice gerekli dizinleri bulacak ve listeleyecektir. Buradan istediimiz Java srmn seebilir ya da Java ve JavaScript desteklenmiyor seeneini seerek Java ortam olmadan kuruluma devam edebiliriz. OpenOffice, eer kullanc bazl kurulum yapldysa (bizim rneimizdeki gibi) masast ortamlarnn (KDE, Gnome vb.) menlerine kendi simgesini ekleyecektir. Bylece bu menleri kullanarak, datmmzla gelen dier yazlmlar gibi, OpenOffice yazlmlarna da kolayca eriebilmemiz mmkn olacaktr.ncelikle OpenOffice ile beraber gelen yazlmlara bir gz atalm. Aslnda OpenOffice entegrasyon konusunda gayet baarl olduundan bu uygulamalar tek bir at altnda alan farkl arayzler olarak dnmemiz yanl olmayacaktr. 1 Wretir: OpenOffice paketinin kelime ilemci ve web tasarlayc grevini yrtmektedir. Microsoft Word gibi yaygn kelime ilemci formatlaryla uyumludur. Bu formatlar aabilir ve bu formatlarda dosya kaydedebilir. (Resim 4) 2 Math: lem tablosu/hesap izelgesi (spreadsheet) yazlmdr. Microsoft Excel, Lotus 1-2-3 gibi yazlm formatlarn desteklemektedir. zellikle son srmlerde gelien Excel makrolarn da altrma zellii ile dikkat ekmektedir. (Resim 5) 3 Impress: Sunum hazrlamak iin kullanlan yazlmdr. Microsoft PowerPoint formatn okuyabilir ve bu formatta kayt yapabilir. Dier programlarla gl entegras-
Resim 3
>>
Linux
Resim 4
yonu sayesinde hazrladnz dokmanlar (mesela Math'de hazrladnz bir durum grafiini) sunumlarnzda kullanmanz mmkndr. (Resim 6) 4 Draw: Hem vektrel hem de dzlemsel izimler iin kullanabileceimiz yazlmdr. AutoCAD DXF format bata olmak zere bir ok izim formatn aabilir ve bu formatta kayt yapabilir. (Resim 7) 5 Wditer/Web: Writer'n bir paras gibi dnlebilecek bu yazlm da web tasarmnda kullanmak iin gelitirilmitir. Toparlamak gerekirse, OpenOffice'in en gl yanlar cretsiz, zgr, kararl (stabil), entegre ve bir ok platformu (Linux ve Windows bata olmak zere) destekliyor olmasdr. Eksi yanna gelecek olursak, artk ofis paketi denince akla gelen Microsoft'un Office paketini standart olarak kabul edersek (ki dosya format asndan asla standart kabul etmememiz gereklidir), karlatrld zaman tam anlamyla e deer yazlmlar barndrmamasdr (Veritaban olarak Access ve e-posta yazlm olarak Outlook). Bu eksikleri OpenOffice, hali hazrda Linux zerinde alan bir ok veri tabanndan veri alm (import) ve bu verileri ileyi yetenekleriyle kapatmaya balam, daha ileride kacak srmlerinde de tam entegrasyonu hedeflemektedir. E-Posta asndan baktmzda -her ne kadar konumuzun biraz dna ksa da- ofis kullanm iin bir ok zelliiyle (Exchange balant zellii gibi) en uygun pozisyona yerlemi Evolution ve Kolab (Ak kaynak kodlu bir Exchange ikamesi) entegrasyonuna sahip KMail gibi yazlmlar varken tekerlei tekrar icat etmek akas
Resim 6
mantkl gzkmemektedir. OpenOffice konusunda elinizin altnda bulunmasn istediiniz, kapsaml, gvenilir ve Trke bir kaynaa ihtiyacnz var ise, Gelecek Linux Yaynlar tarafndan yaynlanan ok uygun fiyata temin edebileceiniz kelime ilemci, hesap tablosu, sunum, izim, web dzenleme ve forml ileme gibi alt balklar iinde barndran OpenOffice.org kitabn tavsiye ederim.
Resim 8
sayesinde kolayca geniletilebilir, hatta kullanc tarafndan yeni yazlmlar dahi yazlabilir.Eksi yanlarna baktmzda grdklerimiz: KOffice, kullanc havuzu ok fazla olmadndan fazla test edilememektedir. Bunun getirdii baz hatalar bulunsa da, kullancnn bizzat rapor etmesi halinde abucak (genellikle ayn gn) dzeltilmektedir. Kendi format haricindeki dier formatlar tanma zelliine sahip olmasna ramen bu zellii ok gelimi deildir. Bu, basit dokmanlarda sorun karmasa da, kompleks olanlarda karmaktadr. Eer baka yazlmlarn (Microsoft Office gibi) formatlaryla ok fazla almayacaksanz, bu bir problem tekil etmeyecektir.
KOffice
OpenOffice kadar yaygn kullanlmasa da, KDE ortamna entegre olmu gl bir ofis paketidir. Genel KDE kurulumu ile gelmeyen sistemlerde: http://koffice.kde.org/
GNOME Office
GNOME Office, paket halinde sunulmasa da GNOME masast ortamnda alan ofis yazlmlarnn ayn at altnda toplandnda ald isimdir. Tam bir ofis paketi olarak nitelendirilemeyecei iin ksaca deineceiz. Kelime ilemci olarak AbiWord ierir. AbiWord Herkes iin kelime ilem sloganyla yola km ve bu konuda da baarl olmu bir zgr yazlmdr. Henz OpenOffice kadar zellie kavuamasa da olduka yaygn kullanlmaktadr. lem tablosu/hesap izelgesi yazlm olarak Gnumeric yazlmn ierir. Gnumeric gerekten ok fonksiyonlu ve gelimi bir yazlm olup, Microsoft Excel gibi yaygn formatlar da desteklemektedir. (Resim 10) Ayrca GNOME-DB ad altnda gelitirilen veri taban eriim ktphanesi sayesinde bu yazlmlar eitli veri tabanlarna eriip iindeki verileri ileme yeteneine sahiptirler. Linux altnda kullanlan ofis yazlmlarna, yerimiz el verdiince deinmeye altk. Bir sonraki yazmzda ise Linux altnda elence ve sohbet servislerinden (ICQ, MSN vb.) faydalanmak iin mevcut yazlmlar zerinde duracaz. Bu yaz dizimizle zgr yazlmlar zerine ilginizi ekmeye baladmz umuyor, ilginize teekkr ediyoruz. Bol Linux'lu gnler dileklerimizle. Doa enol dsenol@masterz.com
Resim 7
adresinden cretsiz olarak indirilebilir. KOffice, KDE'nin alt tm ortamlarda alabilmekte ve dolaysyla Trke'yi de desteklemektedir. KOffice ok geni bir yazlm yelpazesine sahiptir (Resim 8). Kelime ilemci KWord, ilem tablosu/hesap izelgesi yazlm KSpread, sunum program KPresenter ilk akla gelenlerdir. Bunlarn yannda vektr grafikler iin Karbon14, izim iin Krita, raporlama iin Kugar ve veritaban olarak Kexi (u anda KOffice paketi ile birlikte datlmasa da bir sonraki KOffice srmne dahil edilecektir) ne kmaktadr. KOffice'in avantajl zelliklerine ksaca gz atalm: KDE'nin KParts teknolojisini destekledii iin, tm KDE yazlmlarnn iinden arlabilir ve bu yazlmlar KOffice zelliklerini kendi ilerinden kullanabilir. Benzerlerinden ok daha performansldr. rn yelpazesi KDE'nin KParts teknolojisi
Resim 5
3D
<<
3ds Maxte Poly Modelleme rnekleri

Bu ayki makalemizde, 3B modelleme aralarn ve Poly modelleme yntemini kullanarak gereki bir kpek bal yaratacaz.
emen hemen tm 3 boyutlu animasyon ve modelleme yazlmlar eitli modelleme yntemlerini desteklerler. Animasyonlarmz ve 3 boyutlu uygulamalarmz iin oluturacamz modelleri farkl yntemlerle olutururuz ve bu yntemlere her geen gn yenileri eklenmektedir. Tabii ki her modelleme tekniinin bizlere sunduu avantajlar ve dezavantajlar vardr, stelik her modeli istediimiz teknikle de oluturamayabiliriz. nk kullanacamz teknik bize ve oluturacamz 3B objeye bal olarak deiebilir. rnek olarak, yatay ve przsz yzeylere sahip olan objeleri modellerken kullandmz teknikleri, sert hatlara ve kvrmlara sahip modellerde kullanamayabiliriz. Herkes kendine uygun olan bir teknii seebilir ve bazen karmak teknikler bir arada da kullanlabilir. Bazen sonu ayn olsa bile iki farkl modelleyici birbirinden farkl teknikleri seebilir. Modelleme ok geni bir kavramdr ve her geen gn daha da genilemektedir. Farkl 3B yazlmlar farkl ve birbirine benzer teknikleri bizlere sunarlar ve her birinin kendilerine has avantajlar vardr. Bazen modelleme yaparken iki 3B yazlm arasnda bile geiler yapabiliriz. rnek olarak 3ds maxte oluturduumuz bir modelin ayrntlarn Zbrush gibi bir modelleme yazlmyla tamamlayabiliriz ya da modelleme ilemini ayr, animasyon ilemini daha farkl bir yazlmla tamamlayabiliriz. Bilmemiz gereken dier nemli bir nokta: Modelleme, animasyon kadar ayr ve geni bir konudur ve iyi bir modelleme yapmak iin ayn zamanda iyi bir izim ve gr yeteneine sahip olmamz gerekir. Modelleme, eitli alardan bakldnda heykeltrala, illstratrle, ressamla ve tasarmcla benzer. 3ds maxte de eitli modelleme yntemleri vardr (mesh, patch, nurbs, spline, poly) ve biz bu ay en ok kullanlan modelleme yntemlerinden birisi olan poly mo-
delleme tekniine deineceiz. Poly modellemenin dier tekniklere gre birok avantaj vardr ve renilmesi dier yntemlerden daha kolaydr. Poly modelleme ile organik ve karmak yzeyleri hzl ve daha optimize olarak oluturabiliriz. Poly modelleme 3dsmax in 4.0 srmnden bu yana vardr ve ierii her 3dsmax srmnde genilemektedir. Aslnda Poly modelleme teknii Mesh ynteminin geniletilmi halidir ve mesh yntemine oranla daha optimize ve hzldr. Poly modelleme daha ok organik modelleme olarak tabir edilen karmak objelerin ve yzeylerin oluturulmasnda kullanlr. kt birimi olarak poligonlar kullandndan daha hzl render sonular alrz ve objemizin her ayr blmnde farkl ayrnt seviyeleri oluturabiliriz, bu da gerek tasarm panellerinde gerekse modelleme srecinde bize zaman ve hz kazandrr. Poly modellemenin patch ve nurbs gibi dier yntemlerden en belirgin fark; modellemeye bir objeyle (rnein bir kutu) balamamzdr. Nurbs ve Patch yntemlerinde ise bundan farkl olarak modelleme ilemine eriler kullanlarak balanr. Bu ay poly teknii ile bir kpekbal modeli oluturacaz ve poly modellemenin birok zelliini kullanacaz. Hemen hemen tm 3 boyutlu animasyon ve modelleme yazlmlar eitli modelleme yntemlerini desteklerler. Animasyonlarmz ve 3 boyutlu uygulamalarmz iin oluturacamz modelleri farkl yntemlerle olutururuz ve bu yntemlere her geen gn yenileri eklenmektedir. Tabii ki her modelleme tekniinin bizlere sunduu avantajlar ve dezavantajlar vardr, stelik her modeli istediimiz teknikle de oluturamayabiliriz. nk kullanacamz teknik bize ve oluturacamz 3B objeye bal olarak deiebilir. rnek olarak, yatay ve przsz yzeylere sahip olan objeleri modellerken kullandmz teknikleri, sert hatlara ve kvrmlara sahip modellerde kullanama-
yabiliriz. Herkes kendine uygun olan bir teknii seebilir ve bazen karmak teknikler bir arada da kullanlabilir. Bazen sonu ayn olsa bile iki farkl modelleyici birbirinden farkl teknikleri seebilir. Modelleme ok geni bir kavramdr ve her geen gn daha da genilemektedir. Farkl 3B yazlmlar farkl ve birbirine benzer teknikleri bizlere sunarlar ve her birinin kendilerine has avantajlar vardr. Bazen modelleme yaparken iki 3B yazlm arasnda bile geiler yapabiliriz. rnek olarak 3ds maxte oluturduumuz bir modelin ayrntlarn Zbrush gibi bir modelleme yazlmyla tamamlayabiliriz ya da modelleme ilemini ayr, animasyon ilemini daha farkl bir yazlmla tamamlayabiliriz. Bilmemiz gereken dier nemli bir nokta: Modelleme, animasyon kadar ayr ve geni bir konudur ve iyi bir modelleme yapmak iin ayn zamanda iyi bir izim ve gr yeteneine sahip olmamz gerekir. Modelleme, eitli alardan bakldnda heykeltrala, illstratrle, ressamla ve tasarmcla benzer. 3ds maxte de eitli modelleme yntemleri vardr (mesh, patch, nurbs, spline, poly) ve biz bu ay en ok kullanlan modelleme yntemlerinden birisi olan poly modelleme tekniine deineceiz. Poly modellemenin dier tekniklere gre birok avantaj vardr ve renilmesi dier yntemlerden daha kolaydr. Poly modelleme ile organik ve karmak yzeyleri hzl ve daha optimize olarak oluturabiliriz. Poly modelleme 3dsmax in 4.0 srmnden bu yana vardr ve ierii her 3dsmax srmnde genilemektedir. Aslnda Poly modelleme teknii Mesh ynteminin geniletilmi halidir ve mesh yntemine oranla daha optimize ve hzldr. Poly modelleme daha ok organik modelleme olarak tabir edilen karmak objelerin ve yzeylerin oluturulmasnda kullanlr. kt birimi olarak polygonlar kullandndan daha hzl render sonular alrz ve objemizin her ayr blmnde farkl
>>
3D
ayrnt seviyeleri oluturabiliriz, bu da gerek tasarm panellerinde gerekse modelleme srecinde bize zaman ve hz kazandrr. Poly modellemenin patch ve nurbs gibi dier yntemlerden en belirgin fark; modellemeye bir objeyle (rnein bir kutu) balamamzdr. Nurbs ve Patch yntemlerinde ise bundan farkl olarak modelleme ilemine eriler kullanlarak balanr. Bu ay poly teknii ile bir kpekbal modeli oluturacaz ve poly modellemenin birok zelliini kullanacaz.
2
kutumuzun zerinde yapacamz btn deiiklikler dier tarafa da otomatik olarak uygulanacak. Bu bizim iin byk bir kolaylk, nk simetrik nesnelerin her iki taraf da ayndr. imdi modelimizin sadece sol ksmyla ilgileneceiz ve sa ksm, sol ksmdan referans alnarak oluacak. Bu yntemi simetrik olan her modele uygulayabiliriz.
4
tek seerek ekil-6daki gibi deitirelim. Setiimiz her noktay Move arac ile ieri ve aaya doru dikkatlice tayalm. Kpekbalnn ba ve burun ksm yava yava belirmi olmal. imdi adm 1deki segment ayarlarnn modelimizi deitirirken ne kadar belirleyici bir etken olduunu grrz.
1 ncelikle sahnemizin ortasnda bir adet

box objesi oluturalm ve boxmz sahnemizin tam ortasna alalm. x:0 y:0 z:0. Kutumuzun boyutlarn length:41, width:48 height:41 olarak ayarlayalm ve segment ayarlarn da Length segs:4, width segs:2, height segs:2 olarak deitirelim. imdi kutumuzu oluturacamz model iin ayarlam olduk. Bu ayarlar tamamyla deikendir ve oluturmak istediimiz modele gre
8 Kpekbalnn az ksmn oluturalm. Edge moduna geerek cut aracn seelim.
4 imdi kutumuzu tekrar seelim. Eer herhangi bir sub-object modunda deiiklik yaparsak bunun dier tarafa da yanstldn grebilirsiniz. 5 Kutumuzu vertex seviyesine girerek, left gr penceresindeki gibi deitirelim. Noktalar seerken faremizi srkleyerek sememiz gerekir, nk bylece arkada bulunan noktalar da semi oluruz. Kutu artk basit bir silindire benzedi (ekil- 4).
5
Cut aracna modify panelini biraz aaya kaydrarak ulaabiliriz. Cuta tkladktan sonra modelimizi ekil-7deki gibi keselim. Kpekbalnn az olutu.
1
deiiklik gsterir. Eer baka bir model oluturmak isteseydik ayarlarmz tamamen deiebilirdi. Bu admdan sonra tasarm pencerelerinde show grid onayn kaldralm ve perspektif penceresinde [F4]e basarak kutumuzun edgelerini grnr klalm (ekil- 1)
6 Orta bulunan tm noktalar seerek (srkleme yntemi ile) ekil-5teki gibi deitirelim. 7 Artk perspektif penceresine geelim ve kutumuzu vertex modunda noktalar tek
9 Sub object modundan karak modelimizin dier yarsn silelim, nk modelimizin gvde ksmn oluturmaya balayacaz. Aksi takdirde extrude uygularken ieride is-
2 imdi kutumuza sa tklayp polye evirelim. Kutumuz artk ilenmeye hazr ve modify panelinde editable poly olarak grnmeli. Modify panelinde kutumuzun vertex moduna geerek top penceresinde stteki 6 noktay da faremizi srkleyerek seelim. Bylece alttaki noktalar da semi olduk. Delete ile bu noktalar silelim (ekil-2) 3 Kutumuzun yarsn silmi olduk. imdi vertex modundan karak kutumuz seili durumdayken mirror butonuna tklayalm. Ayarlar ekil-3 teki gibi deitirelim. imdi
3D
<<
7
temediimiz yzeyler oluabilir. Silme ileminden sonra modelimize symmetry modifierini uygulayalm. Ayarlar modelimizin dier yars doru biimde gzkecek ekilde deitirelim ve modelimize tekrar sa tklayarak editable polye evirelim. Artk modelimiz tek para ve extrude ilemi iin uygun. Polygon modunda modelimizin arkasndaki tm yzeyleri seelim ve ekil-8 deki gibi extrude ilemi uygulayalm, extrude ileminden sonra seili yzeyleri scale aracyla biraz kltelim, nk kpekbalnn gvdesi kuyruuna doru gittike incelmeye balar. Extrude ilemini kuyruun balama yerine kadar belirli leklerde yzeyleri scale ile klterek tekrar edelim (ekil-9). ekil9da extrude ileminin tekrarlanma skln da grebiliriz. Tekrar vertex moduna geerek modelin dier ksmn tekrar silelim ve bata yaptmz gibi mirror uygulayalm. Bu sefer ayarlar hi deitirmeyelim. Seimi kaldrp nceki paramz tekrar seelim. Perspektif gr penceresinde modelin ortadaki noktalarn aaya doru tayalm. Ayn ilemi st taraftaki dier noktalar iinde tekrarlayalm. Kademeli olarak gitmeye dikkat et-
9
meliyiz nk modelleme ilemindeki her deiiklik sonuca dorudan yansyacaktr (ekil-10) . imdi kpekbalnn yzgelerini yapmamz iin ekil-11deki gibi edge modunda cut ile kesme ilemi uygulayalm. Bylece yeni oluan yzeylerden polygon moduna geip extrude ile yzgeleri kartabiliriz. sterseniz ayn ilemi kuyrua doru tekrarlaieri ynde extrude ile gz ukurlarn oluturalm (ekil-13). Sub object modundan karak modelimizin dier yarsn seip silelim ve tekrar
10
yp modelimize baka yzgelerde ekleyebiliriz. Top gr penceresinde yzgeleri ekillendirelim (ekil-12) . Edge moduna geip, cut ile gzleri oluturalm, daha sonra polygon moduna geip
symmetry modifierini uygulayp editable polye evirelim. Tekrar tek paradan oluan bir modelimiz oldu. imdi az ksmndaki yzeyleri seip ieriye doru extrude uygulayalm. Gerekli dzenlemeleri de yaptktan sonra modelimiz ekil-14teki modele benzemi olmal. Extrude ilemleri bittikten sonra ieride kalan poligonlar silebiliriz. Modelimizin yzgelerinin hizasndan st ksmda ayn yzgelerde yaptmz gibi kesme ilemi yapp st yzgeci oluturalm. Vertex moduna geip yzgece ekil verelim (ekil15).
14
>>
3D
Modelimizin kuyruu iin en sondaki poligonlar seip extrude uygulayalm. Her extrude ileminden sonra scale ile z ekseninde poligonlar bytelim. Bu ilemi birka kez tekrarlayalm nk her extrude kuyruun ayrntlar iin bize yeni noktalar oluturacak. Extrude ilemlerinden sonra vertex modunda kuyruu ekillendirelim. Bozuk
ekillenmeler olutuunda edge moduna geip slice plane ile kuyruk blmne destekleyici edgeler oluturabiliriz (ekil-16). Tm ekillendirmeler bittikten sonra modelimize meshsmooth modifieri uygulayp yumuatabiliriz. Poly modelleme tekniini hemen hemen
ou organik modelleme ileminde kullanabiliriz. Sizlerde deiik objeleri seip temel primitiflerle modellemeye balayabilirsiniz. Herkese iyi almalar.
Nebi YIKAROLU nykaroglu@chip.com.tr
18
19

27 Ocak

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

27 Ocak

Uploaded by

Copyright:

Available Formats

Web Programcl

Sitenizi bu menden mahrum brakmayn

Temel teknik: CSS display propertysi

154 CHIP Workshop > >

if (oncekiAktif) {oncekiAktif.className = classOncekiAktif;}

function degis(){tumAltKapat();} // ilk seviyeye kadar kapat

<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor="#ffffff">

class="subaltlink" href="herhangi242.html" id="_2_4_2">  242</a></li> </ul> <li><a class="altlink" href="herhangi250.html"

id="_2_5_0"> 250</a></li> </ul> <a <a class="analink" href="#"

class="altlink" href="herhangi110.html" id="_1_1_0"> 110</a></li> class="altlink" href="herhangi120.html" id="_1_2_0"> 120</a></li> </ul>

< CHIP Workshop 155 <

/border-right:1px dotted #7F7F7F;/ border-bottom:1px dotted #7F7F7F; }

158 CHIP Workshop > >

<a href="#" onclick="deaktiflestir()">seili olan reset et</a><br>

Her ofise ayr bir Office

3ds Maxte Poly Modelleme rnekleri

1 ncelikle sahnemizin ortasnda bir adet

8 Kpekbalnn az ksmn oluturalm. Edge moduna geerek cut aracn seelim.

Nebi YIKAROLU nykaroglu@chip.com.tr

< CHIP Workshop 16 <

You might also like

27 Ocak

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

27 Ocak

Uploaded by

Copyright:

Available Formats

Web Programcl

Sitenizi bu menden mahrum brakmayn

Temel teknik: CSS display propertysi

154 CHIP Workshop > >

if (oncekiAktif) {oncekiAktif.className = classOncekiAktif;}

function degis(){tumAltKapat();} // ilk seviyeye kadar kapat

<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor="#ffffff">

class="subaltlink" href="herhangi242.html" id="_2_4_2">&nbsp;&nbsp;242</a></li> </ul> <li><a class="altlink" href="herhangi250.html"

id="_2_5_0">&nbsp;250</a></li> </ul> <a <a class="analink" href="#"

class="altlink" href="herhangi110.html" id="_1_1_0">&nbsp;110</a></li> class="altlink" href="herhangi120.html" id="_1_2_0">&nbsp;120</a></li> </ul>

< CHIP Workshop 155 <

/*border-right:1px dotted #7F7F7F;*/ border-bottom:1px dotted #7F7F7F; }

158 CHIP Workshop > >

<a href="#" onclick="deaktiflestir()">seili olan reset et</a><br>

Her ofise ayr bir Office

3ds Maxte Poly Modelleme rnekleri

1 ncelikle sahnemizin ortasnda bir adet

8 Kpekbalnn az ksmn oluturalm. Edge moduna geerek cut aracn seelim.

Nebi YIKAROLU nykaroglu@chip.com.tr

< CHIP Workshop 16 <

You might also like

class="subaltlink" href="herhangi242.html" id="_2_4_2"> 242</a></li> </ul> <li><a class="altlink" href="herhangi250.html"

id="_2_5_0"> 250</a></li> </ul> <a <a class="analink" href="#"

class="altlink" href="herhangi110.html" id="_1_1_0"> 110</a></li> class="altlink" href="herhangi120.html" id="_1_2_0"> 120</a></li> </ul>

/border-right:1px dotted #7F7F7F;/ border-bottom:1px dotted #7F7F7F; }