Dünkü Günün ipuçları bölümünde yer verdiğimiz konu Web sitesi tasarım konusunu ele almıştık.Webtasarım konusunda ağırlık olarak yer verdiğimiz ilk konu Photoshop yada Firework benzeri yazılımla sitenin görsel şablonunu çizmeyi anlatmıştık.Bugünkü konumuzda ise yer vereceğimiz tamamen grafik şablonun Html,css ve xhtml dönüştürmesi yada bu kodlama türünü anlatacağız.Xhtml ve css gibi kodlama türünü web yazılım grubuna almamak gerekir,Tamam sitenin şablonlarını renklendirmeye yarayan temel şablondur.Web programlama yapılsa bu şablonların her türlü siteye hakim olması gerekmektedir.buna bir örnek vermek gerekirse Websiteni şu şekild özetliyebiliriz.
Bir Apartmanı ele aldığımızda;
Apartmanın temelini Katları ; Web Yazılımla yazıyoruz yani kaç kat olacağını ne tür özellikleri olacağını web yazılım bölümünde yer veriyoruz.
Apartmanın iç ve dış renkleri; Tasarım konusunda kararlaştırıp Photoshop yada Fireworks’da bellirtiyoruz.
Apartmanın boyama işlemi ve rengi gösteren araçları xhtml ve css olarak bilinmesi gerekmektedir.
Bu şekilde daha akılda kalıcağına inanıyorum.Örnek yanlış olabilir yada belki uyumlu görmeseniz ama TeknolojiTR olarak günün ipuçlarında yer verdiğimiz özellikle websitesini yeni öğrenmek istiyenler için bir örnek ve akılda kalıcı için güzel ve pratik bir şekilde bir web sitesinin neler olacağını bilebilirsiniz.
XHTML Tanıyalım: Xtrensible Hypertext Markup Language sözcüklerin baş harflerinin kısaltmalarıyla bir araya gelen bir isimdir.Bu isim ayrıca yen nesil web tasarım standartlarına verilen isimdir.Başındaki X yani Xtrensible aslında XML’den gelmektedir. XML ( extensible markup language ) dilinin HTML için kullanabileceğini göstermektedir.
HTML dili aslında ekranda görünecek içeriği sağlamaktadır.XML ise içeriğin yapılandırmasından sorumludur.
CSS ise bu her iki dilinin görsel sunumu ifade eder ve bu iki dilin görseline amaçlar ve bundan sorumludur.
Günümüzde duyulan CSS3 kavramıda ses desteği tanımlanmış bulumaktadır.Şimdilik web tarayıcılarında ses desteğine sahip değiller fakat bunun için bir çalışma söz konusu özellikle internet explorer 9 yeni nesil web standartları tüm bileşenleri desteklemektedir.
HTML kodları her zaman tüm sayfalarda standart olarak vardır.Bunlarıda birçok web sayfalarını gezerken Sayfanın kaynağını göster dediğinizde bunu görebilirsiniz.Göremiyen yada yapamıyan kullanıcılarım için aşapıda bir HTML dosyalarında ne olduğunu göstereceğim.
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Yukardaki Kodların Anlamı;
<html> Bir web sayfanın başlangıç ve bitiş etiketi olup Bir web sayfasının html denmesinin sebebide bu etiketlerin olduğu içindir.
<head> Bu kodda her sayfada bulunmaktadır.Özellikle arama motorlarını ve web tarayıcılarını bilgilendirecek tüm kodlar bu bölümün başlangıç ve bitişinde yazılır örneğin Google TeknolojiTR aratdığınızda altında bulunan açıklamayı META Description olarak adlandırıp bu etiketin içeriğine yazılır.
<title> Bir sayfanın Web başlığının bilgilendirmesidir.Kısa ve öz bir şekilde açıklamaların yazıldığı yerdir. Örneğin TeknolojiTR – Teknoloji Haberler olan bölümün adıdır.
<body> Sayfayı aslında görüntülediğimiz her şey bu etiketlerin arasında yazılmaktadır.
Dünkü Tasarladığımız Photoshop arayüzü aslında web standartları şeklinde kaydedebiliyoruz.HTML olarak Fakat bu şekilde kaydetiğiniz yazılar herşey resim olarak görünecektir.Buda hem sitenizin açılması yavaşlama hemde ziyaretçiler için görünüm oldukça başarısız olacaktır.
Bu Konuda yardımımıza yine Adobe’nin ürünü olan Adobe Dreamweaver CS4 yazılımını kullanacağız. Dreamweaver CS4 indirmek istiyenler için Deneme sürümünü indirebilirsiniz.
Şimdi birçok terimler öğrendik bu terimleri daha fazla kafanızı karıştırmamak için durumu özetliyelim.Yapmanız gereken işlem şu şekildedir;
- Photoshop’ta arayüzümü tasarladık
- İstenidiği takdirde png olarak kaydedebilirsiniz.Yada PSD şeklinde kaydedebilirsiniz.
- CSS/XHTML olarak çevirme işlemi Photoshop’tan keserek photoshop’ta crop menüsünden yapabilirsiniz.
- Dreamweaver yazılımımızı açıp HTML dosyamızı oluşturuyoruz
- Dreamweaver yazılımından style.css şablon dosyamızı oluşturuyoruz.
- Gereken işlemler css div şeklinde kodlama başlıyoruz.
Bu işlemleri ilerliyen makalelerimizde geniş bir şekilde detaylı öğrenebilirsiniz.Her türlü öneri istek sorularınız için TeknolojiTR dile getirebilirsiniz farklı istediğiniz kategorilerde makale hazırlıyabiliriz.
Etiketler: css nedir, css xhtml nedir, web sitesi css nasıl yapılır, web sitesi nasıl yapılır, xhtml nasıl yapılır, xhtml nedir
http://www.teknolojitr.com/web-sitesi-css-xhtml-nasil-yapilir
