WEB TASARIM CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL
İçindekiler Konular Sayfa Slice 2 Iframe 12 CSS 16 Include (php komutu) 20 1
Slice Fireworks te yapacağımız sitenin boyutuna göre hazırlayacağımız temanın boyutunu seçiyoruz. Ben 800*600 lük bir site hazırlayacağım bunun için yeni dökümanı bu özelliğe göre açtım (şekil 1). Şekil 1 2
Tools çubuğundan arka planımızı, butonlarımızı ayarlayarak sitemizi şeklen hazır hale getiriyoruz (şekil 2). Şekil 2 Butonlarımızın üzerine gelince değişik renk alması için state olayını kullanarak 2. State i oluşturuyoruz. Duplicate State yaparak aynı sayfadan bir tane daha oluşturuyoruz (şekil 3). (NOT: Bu anlatımı gerçekleştirirken State diye bahsettiğimiz kısım macromedia dreamweaver 8 de ve Adobe Dreamweaver CS3 te frame olarak geçiyor. Aynımantık orada state adında değil frame adındadır.) Şekil 3 3
State 1 in altına State 2 yi oluşturuyor. Buradan butonların rengini değiştiriyoruz (şekil 4) Şekil 4 Şimdi asıl önemli olan şey yani Slice lamaya geçelim. Şekil5 Tools menüsünden web kısmında ki dört seçenekten sağ üstteki slice tool u seçip slice işlemini gerçekleştiriyoruz (şekil 5). Slice lamayı gerçekleştirirken her ayrıntıya dikkat etmeliyiz. Sayfamızı Slice ladıktan sonra karşımıza Şekil 6 daki gibi ekran çıkıyor. 4
Şekil 6 Daha sonra State 2 deki butonlarda yaptığımız renk değişimi için Slice ladığımız alanın ortasına tıklayarak Add Swap Image Behaviour u seçiyoruz (şekil 7). Şekil 7 5
Şekil 8 Daha sonra karşımıza çıkan pencereden slice yaptığımız alanların State ler arasında hangisinde değişim yapacaksak onu seçiyoruz ve OK e basıyoruz (şekil 8). Artık yaptığımız butonlar mouse ile üzerine gelince renk değiştirecek. 6
Şu an Slice lama işlemi sona erdi. Fireworks te yapacağımız son adım Export işlemi (şekil 9). Menuden File dan Export u seçiyoruz. Karşımıza çıkan ekranda Export kısmında HTML and Images i seçiyoruz. HTML kısmından Export HTML File ı seçiyoruz ve Slice kısmından Export Slices ı seçiyoruz. Eğer en aşağıdaki kutucuğu seçersek vereceğimiz doğrultuda Export edeceği resimleri seçtiğimiz klasöre koyar ve bu sayede daha düzenli bir çalışma olur. Şekil 9 Şimdi bu çalışmamızı Dreamweaver ile birlikte template haline getireceğiz. 7
Dreamweaver da Export ettiğimiz html dosyasını açıyoruz. En önemli noktalardan biriside burada önümüze geliyor. Slice larken sağ, sol ve alt tarafta küçük çubuk şekliyle Slice lama gerçekleştirdik. Sayfada kenarlarda veya aşağıda kayma olacaksa eğer böyle bir işlem yapmamız zorunludur. Slice ladığımız alan resim olarak kaydedildiği için mesela sayfamız aşağıya doğru uzadıkça resimde patlamalar olacak ve ayarladığımız site istediğimiz görünümde olmayacaktır. Bunun için html dosyasında resmi arkaplan yapmamız gereklidir. Aşağıda yaptğımız slice ile bu işlemi örnekleyelim. Dreamweaver da ki dosyada aşağı kısımda bulunan resmi seçiyoruz. Properties den Src kısmındaki adresi kopyalıyoruz (şekil 10). Şekil 10 8
Şekil 11 Daha sonra bu adresi No wrap kutucuğunun yanındaki Bg kısmına kopyalıyoruz artık resmimiz bir arkaplan resmi haline geldi bundan dolayı sitede patlama, kayma olmayacaktır (şekil 11). Artık gönül rahatlığıyla çalışabiliriz. Şekil 12 Şimdi yaptığımız bu html dosyasını devamlı olarak kolayca kullanabilmek için template haline getiriyoruz. Menuden, File dan, Save as Template yi seçiyoruz. Karşımıza çıkan kutucuktan Save i seçiyoruz ve Template i kaydediyoruz (şekil 12). 9
Template üzerinde bütün değişikliklerimizi yapabiliriz. Burada butonlara link veriyoruz. Template kullanıp bir html sayfası yaptığımızda sayfa üzerinden herhangi bir değişiklik yapamayız. Sayfa üzerinde değişiklik yapabilmek için Editable Region eklemek gerekiyor. Bunu da şekil 13 teki resimde ki adımlara göre yapabiliyoruz. Şekil 13 Karşımıza çıkan küçük pencerede OK e basarak Editable Region u eklemiş oluyoruz (şekil 14). Bu EditRegion kısmını html sayfalarında değiştirebiliyoruz. Yani template kısmında ayarladğımız web sayfalarında sadece bu kısma dokunabiliyoruz. Şekil 14 10
Dreamweaver da Menuden, File dan, New i seçerek aşağıdaki resimdeki gibi templates kısmından yaptığımız template i seçiyoruz ve sitemizi hazırlıyoruz. Şekil 15 11
Iframe Yukarıda ki anlattığımız yöntemin dışında birde iframe kullanarak site yapabiliriz. Daha önce gösterdiğimiz ana.html dosyasını açarak bu çalışmayı gerçekleştirelim. Hazırladığımız sayfamızı açtıktan sonra Menuden Insert ü seçip ordan Tag ı seçiyoruz. Karşımıza şekil 16 da ki ekran gelecektir. Şekil 16 12
Buradan HTML tags ı seçiyoruz. Daha sonra Page Elements ten iframe yi seçiyoruz ve Insert butonuna basıyoruz (şekil 17). Şekil 17 Bu adımdan sonra karşımıza şekil 18 de ki sayfa gelecektir. 13
Şekil 18 Burada Source kısmına iframe in içine gelecek dosyayı veya adresi yazıyoruz. Eğer buraya www.tarikozel.com yazarsak iframe nin içine bu gelir ama index.html adında bir dosyayı seçersek onu içeri getirir. Name bölümüne iframe için isim yazmalıyız çünkü ileride de göreceğiz link vermek için bu isim kullanılacak. Width genişliği, height yüksekliği bize verir. Scrolling kısmında auto olarak bırakırsak çağırdığımız sayfadaki objeler aşağıya veya yana doğru uzarsa otomatik scroll ortaya çıkar. Buradaki ayarlamaları yaptıktan sonra karşımıza aşağıdaki şekilde sayfamız gelecektir. 14
Şekil 19 Ortadaki gri kısım iframe dir (şekil 19). Buraya çağırdığımız sayfalar gelecek. Biz bu iframe mimize icerik ismini verdik. Şekil 20 Web sitemizde birden çok sayfa olacaksa butonlara link vermemiz gerekecektir. Bunun için iframe e link verirken properties den link kısmına sayfamızın adını yazıyoruz (şekil 20). Burada ki püf noktası Target kısmına iframe ismini vermemizdir. Gördüğünüz gibi Target ta icerik yazıyor. 15
CSS CSS görünüm olarak sitemizi güzelleştirmeye yarıyor. Yazacağımız kodlarla renklerde, resimlerde oynamalar yapabiliyoruz. Dreamweaver ın bize verdiği imkanlarla bunları kolayca yapabiliyoruz. İstersek direk kod olarakta yazabiliyoruz. Dreamweaver da File dan, New den, CSS i seçerek yeni bir css sayfası açarak çalışmamıza başlayabiliriz (şekil 21). Şekil 21 16
Karşımıza gelen bu sayfada kodlarımız yazabiliriz. CSS te class lar oluşturuyoruz. Bu class ları şu şekilde yazıyoruz. Örnek:.arkaplan{ background:#99f; border:#000; border:solid; width:700px; height:500px; } arkaplan class ismimizdir, özelliklerini {} içine yazıyoruz (şekil 22). Şekil 22 17
Bu şekilde CSS dosyamızı tamamladıktan sonra boş bir html sayfası açıyoruz ve bu CSS dosyasını içine attach ediyoruz. Propersties ten Class tan Attach Style Sheet i seçiyoruz (şekil 23). Şekil 23 Karşımıza aşağıdaki küçük ekran gelir. Burada File/URL kısmına hazırladığımız css dosyasının konumu seçiyoruz. Add as te link seçili olursa html dosyası css dosyasını dışardan kullanır ama import u seçersek html dosyasının içine css i gömer. OK butonuna basarak CSS i attach ediyoruz (şekil 24). Şekil 24 18
Daha sonra properties tan class lara baktığımızda yazdığımız class ların geldiğini görüyoruz (şekil 25). CSS kodlarını kullanmak için html kodunun içinde body komutunun arasına <div> komutu yazmamız gerekiyor ve bunun arasına class ları yerleştirmemiz gerekiyor. Class ları yazınca </div> yazarak komutu kapıyoruz. Şekil 25 Örnek olarak aşağıdaki koda bakabiliriz. <div class="arkaplan"> <div class="banner"> <div class="link"> <p><a href="index.html">anasayfa</a> <a href="linkler.html">linkler</a> <a href="iletisim.html">iletişim</a> <a href="calismalar.html">çalışmalar</a> <a href="hakkimda.html">hakkımda</a></p> </div></div> <table width="200" border="0"> <tr> <td class="baslik">anabaşlık Anasayfa</td> </tr> <tr> 19
<td class="yanbaslik">yanbaşlık</td> </tr> <tr> <td class="yazi">yazı</td></tr> </table> </div> Bu kodda görüldüğü gibi birden çok <div> açılmış ve bunların içine class lar yazılmış. <td class="baslik">anabaşlık Anasayfa</td> Komutu ile anabaşlık anasayfa yazısını baslik class ına göre ekrana yazarız. Bu komuttan sonra şekil 26 da ki görüntü karşımıza gelir. Şekil 26 20
Include (php komutu) Bir html sayfası oluştururken sayfanın bölümlerini dışarıdan çağırabiliriz. Bunuda PHP yardımıyla yapabiliriz. Hazırlayacağımız sayfada hiçbir şey ayarlamadan sadece dışarıdan sayfalar çağırarak güzel bir sayfa oluşturabiliriz. Öncelikle header.php isminde bir sayfa oluşturalım (şekil 27). Şekil 27 Daha sonra footer.php oluşturalım (şekil 28). Şekil 28 Şimdi yeni oluşturacağımız sayfada bu php dosyalarını çağıralım. 21
Şekil 29 da görüldüğü gibi php kodlarıyla header.php ve footer.php yi çağırarak sayfayı oluşturduk. Şekil 29 Sayfamız tarayıcıda şekil 30 da ki gibi görülmektedir. Şekil 30 Basit bir anlatımla konumuz bu şekilde özetlenebilir. 22