29-10-2011 Saat: 03:39
800x600 boyutunda bir sayfa açıyoruz.
Rectangle Tool'u seçiyoruz:
Styles seçeneklerinden herhangi birini seçiyoruz bu kısım tamamen kişisel tercihtir bu seçenek kullanılmadan normal boyama da yapılabilir.
Styles seçeneğini uyguladıktan sonra sayfamızın görüntüsü
Rounded Rectangle Tool ile şimdi menü için buton yapacağız.
Butonumuzu yapıp Anasayfa Olarak Adlandırdık
Yaptığımız işlermler karışık görünmesin diye Create a New Group seçeneği ile bir grup açıyoruz .
Grup olarak oluşturulmuş hali
Sayfa menümüzde birden fazla link yapacağımız için ilk yaptığımız grubu kopyalayıp klavye tuşları ile aşağıya alacağız
İkinci butonumuzu Spor olarak adlandırdım
Oluşturduğumuz butonlara link verebilmek için Slice Tool seçeneğini kullanacağız
Slice Tool seçtikten sonra mause'mizin sol tuşunu basılı tutarak butonumuzun etrafını çiziyoruz.
Slice Tool uyguladıktan sonra butonumuzun etrafında menüler açılıyor menüler de yer alan numaralar sistem tarafından resimlerinin numaralandırılmasıdır bizim butonumuz 3.resimdir.
Üstüne tıklıyoruz ve Slice Options seçeneği açılıyor burada butonumuz üzerinden sayfa yönlendirmelerini yapıyoruz.
Slice Tool seçeneği ile aynı şekilde Spor butonumuza uyguluyoruz Spor butonumuz için sistemin bu butonumuz 6.resim olarak oluşturmuştur .
Butonumuza tıklayarak Slice Options seçeneği ile bu butonumuza sayfa adresimizi yazıyoruz.
Yaptığımız sayfayı şimdi Save for Web &Devices seçeneği ile kaydedeceğiz
Sayfa görünümü
Sayfamızı kaydediyoruz.
Sayfamızı kaydedip tarayıcımızda açıyoruz göründüğü gibi mause butonumuzun üstüne geldiğinde linkimiz görülmektedir
Şimdi sayfamız herhangi bir html editörü ile açıyoruz (ben dreamweaver ile açtım)ve kodlarımızı görüyoruz.
Yaptığımız çalışmanın kod listesi
Rectangle Tool'u seçiyoruz:
Styles seçeneklerinden herhangi birini seçiyoruz bu kısım tamamen kişisel tercihtir bu seçenek kullanılmadan normal boyama da yapılabilir.
Styles seçeneğini uyguladıktan sonra sayfamızın görüntüsü
Rounded Rectangle Tool ile şimdi menü için buton yapacağız.
Butonumuzu yapıp Anasayfa Olarak Adlandırdık
Yaptığımız işlermler karışık görünmesin diye Create a New Group seçeneği ile bir grup açıyoruz .
Grup olarak oluşturulmuş hali
Sayfa menümüzde birden fazla link yapacağımız için ilk yaptığımız grubu kopyalayıp klavye tuşları ile aşağıya alacağız
İkinci butonumuzu Spor olarak adlandırdım
Oluşturduğumuz butonlara link verebilmek için Slice Tool seçeneğini kullanacağız
Slice Tool seçtikten sonra mause'mizin sol tuşunu basılı tutarak butonumuzun etrafını çiziyoruz.
Slice Tool uyguladıktan sonra butonumuzun etrafında menüler açılıyor menüler de yer alan numaralar sistem tarafından resimlerinin numaralandırılmasıdır bizim butonumuz 3.resimdir.
Üstüne tıklıyoruz ve Slice Options seçeneği açılıyor burada butonumuz üzerinden sayfa yönlendirmelerini yapıyoruz.
Slice Tool seçeneği ile aynı şekilde Spor butonumuza uyguluyoruz Spor butonumuz için sistemin bu butonumuz 6.resim olarak oluşturmuştur .
Butonumuza tıklayarak Slice Options seçeneği ile bu butonumuza sayfa adresimizi yazıyoruz.
Yaptığımız sayfayı şimdi Save for Web &Devices seçeneği ile kaydedeceğiz
Sayfa görünümü
Sayfamızı kaydediyoruz.
Sayfamızı kaydedip tarayıcımızda açıyoruz göründüğü gibi mause butonumuzun üstüne geldiğinde linkimiz görülmektedir
Şimdi sayfamız herhangi bir html editörü ile açıyoruz (ben dreamweaver ile açtım)ve kodlarımızı görüyoruz.
Yaptığımız çalışmanın kod listesi
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rsmalee Web Sayfa Tasarımı</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<!-- ImageReady Styles (Rsmalee Web Sayfa Tasarımı) -->
<style type="text/css">
<!--
div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:600px;
}
div.Rsmalee-Web-Sayfa-Tasar-m--01_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:10px;
}
div.Rsmalee-Web-Sayfa-Tasar-m--02_ {
position:absolute;
left:0px;
top:10px;
width:28px;
height:74px;
}
div.Rsmalee-Web-Sayfa-Tasar-m--03_ {
position:absolute;
left:28px;
top:10px;
width:332px;
height:68px;
}
div.Rsmalee-Web-Sayfa-Tasar-m--04_ {
position:absolute;
left:360px;
top:10px;
width:440px;
height:590px;
}
div.Rsmalee-Web-Sayfa-Tasar-m--05_ {
position:absolute;
left:28px;
top:78px;
width:332px;
height:6px;
}
div.Rsmalee-Web-Sayfa-Tasar-m--06_ {
position:absolute;
left:0px;
top:84px;
width:328px;
height:70px;
}
div.Rsmalee-Web-Sayfa-Tasar-m--07_ {
position:absolute;
left:328px;
top:84px;
width:32px;
height:516px;
}
div.Rsmalee-Web-Sayfa-Tasar-m--08_ {
position:absolute;
left:0px;
top:154px;
width:328px;
height:446px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Rsmalee Web Sayfa Tasarımı) -->
<div class="Table_01">
<div class="Rsmalee-Web-Sayfa-Tasar-m--01_">
<img id="Rsmalee_Web_Sayfa_Tasar_m__01" src="images/Rsmalee-Web-Sayfa-Tasarımı_.gif" width="800" height="10" alt="" />
</div>
<div class="Rsmalee-Web-Sayfa-Tasar-m--02_">
<img id="Rsmalee_Web_Sayfa_Tasar_m__02" src="images/Rsmalee-Web-Sayfa-Tasarı-02.gif" width="28" height="74" alt="" />
</div>
<div class="Rsmalee-Web-Sayfa-Tasar-m--03_">
<a href="www.rsmalee.com">
<img id="Rsmalee_Web_Sayfa_Tasar_m__03" src="images/Rsmalee-Web-Sayfa-Tasarı-03.gif" width="332" height="68" border="0" alt="" /></a>
</div>
<div class="Rsmalee-Web-Sayfa-Tasar-m--04_">
<img id="Rsmalee_Web_Sayfa_Tasar_m__04" src="images/Rsmalee-Web-Sayfa-Tasarı-04.gif" width="440" height="590" alt="" />
</div>
<div class="Rsmalee-Web-Sayfa-Tasar-m--05_">
<img id="Rsmalee_Web_Sayfa_Tasar_m__05" src="images/Rsmalee-Web-Sayfa-Tasarı-05.gif" width="332" height="6" alt="" />
</div>
<div class="Rsmalee-Web-Sayfa-Tasar-m--06_">
<a href="www.rsmalee.com/spor">
<img id="Rsmalee_Web_Sayfa_Tasar_m__06" src="images/Rsmalee-Web-Sayfa-Tasarı-06.gif" width="328" height="70" border="0" alt="" /></a>
</div>
<div class="Rsmalee-Web-Sayfa-Tasar-m--07_">
<img id="Rsmalee_Web_Sayfa_Tasar_m__07" src="images/Rsmalee-Web-Sayfa-Tasarı-07.gif" width="32" height="516" alt="" />
</div>
<div class="Rsmalee-Web-Sayfa-Tasar-m--08_">
<img id="Rsmalee_Web_Sayfa_Tasar_m__08" src="images/Rsmalee-Web-Sayfa-Tasarı-08.gif" width="328" height="446" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
