Dreamweaver 8 Temelleri

A-PDF Split DEMO : Purchase from www.a-pdf.com to remove the watermark 1 Dreamweaver 8 Temelleri Macromedia Dreamweaver 8, pek çok Web geliştiricisinin tercih ettiği bir araçtır. Bir yandan kolayca erişilebilir ve standartlara uygun siteler hazırlama ihtiyaçlarına karşılık verirken, diğer yandan da mevcut ve gelişmekte olan pek çok teknolojik çözümle çalışma imkânı sağlayan bir ortamda hem görsel tasarım, hem de kod düzenleme araçları sunar. Dreamweaver, üretim sürecini hızlandırır ve site yönetimi ve sitenin devamlılığını sağlamak için gereken araçları sunar. Web geliştirme yazılımları sektöründe lider olan Dreamweaver, Web siteleri oluşturma ve bunların devamlılığını sağlama, ayrıca sürekli değişen standartlar, yeni teknolojiler ve kullanıcı ihtiyaçlarını karşılama konularındaki zorlukları aşmanıza yardımcı olmak için ihtiyaç duyduğunuz araçları sağlar. Bu derste Web sitesi geliştirme sürecinin (tamamen yeni bir Web sunumu ya da mevcut bir sitenin yeniden tasarlanması işi olabilir) en önemli adımları olan siteyi planlama ve hazırlamanın temellerini öğrenerek işe başlayacaksınız. Bu süreç içinde, kitapta kullanılan siteyi de yakından tanıyacaksınız. Burada kullanılan proje (San Francisco daki bir yoga stüdyosu olan Yoga Sangha nın Web sitesinin yeniden tasarlanması) gerçek bir örnektir. Daha sonra Dreamweaver 8 in temellerini öğrenecek ve programın arabirimini ve araçlarını tanıyacaksınız. Makinenizde, Yoga Sangha sitesinin bölümlerini geliştirirken oluşturacağınız sayfaları içerecek yerel bir site oluşturarak temel site yönetim özelliklerini kullanmaya başlayacaksınız. Bu derste, kitapta kullanacağınız sitenin hazırlanması ve ayarlarının yapılması işlemlerini tamamlarken bir yandan da Dreamweaver arabirimini tanıyacaksınız.

Bu derste, basit bir Web sayfası oluşturmak ve mevcut bir sayfayı açmak, ayrıca çalışmanızı farklı Web tarayıcılarında test etmek (bu, işlevsel ve erişilmesi kolay Web siteleri hazırlamak için gerekli bir adımdır) için belge ayarlarıyla nasıl çalışacağınızı öğreneceksiniz. Ayrıca bu derste Dreamweaver ı kendi çalışma akışınıza uygun olarak nasıl özelleştireceğinizi öğrenecek ve Dreamweaver ın işlevlerini geliştirme yolları hakkında bilgi edineceksiniz. Bu dersin en son uygulamasında, bu derste öğrendiğiniz beceri ve teknikleri kendi Web projelerinize uygulamaya başlayacaksınız. CD-ROM daki Lesson_01_Basics klasörünün içinde bulunan Completed klasöründe Ders 1 in (Lesson 1) tamamlanmış bir örneğini bulabilirsiniz. Neler Öğreneceksiniz? Bu derste şunları öğreneceksiniz: Dreamweaver arabirimini tanıyacaksınız Dreamweaver ortamını özelleştireceksiniz Planlama işleminin nasıl yapıldığını öğreneceksiniz Yeni bir site oluşturacaksınız Yeni bir belge oluşturacak ve bunu kaydedeceksiniz Araçları tanıyacaksınız Sayfanıza bir başlık atayacaksınız Önizleme Web tarayıcılarını belirleyecek ve sayfanızı test edeceksiniz Öğrendiklerinizi kendi sitenize (sitelerinize) uygulayacaksınız Yaklaşık Süre Bu dersin tamamlanması yaklaşık 1 saat sürecektir. Ders Dosyaları Başlangıç Dosyaları: Lesson_01_Basics/resources/client-questionnaire.doc Tamamlanmış Proje: Lesson_01_Basics/Completed/yoga.html Lesson_01_Basics/Completed/yoga-sangha-responses.pdf DERS 1

Çalışma Alanının Tanınması Dreamweaver ile çalışmaya başlayabilmek için arabirimi ve çalışma alanındaki başlangıç seçeneklerini tanımanız gerekir. Programın Windows ve Macintosh sürümleri arasında küçük bazı farklar vardır. Windows Kullanıcıları için: Dreamweaver 8 i Windows yüklü bir bilgisayarda ilk defa açacaksanız, sizden iki çalışma alanından birini seçmeniz istenecektir: Designer ve Coder. Bu uygulamada Designer çalışma alanını seçmeniz gerekiyor, çünkü bütün kitapta bunu kullanacağız. Designer çalışma alanı, Dreamweaver ile ilgili bütün pencereleri ve panelleri görsel tabanlı Web sitesi tasarımı için optimize edilmiş bir ortamda bir araya getirmektedir. Bu, tasarımcılar için ideal bir özelliktir. Coder çalışma alanı asıl olarak HTML ve diğer Web ve programlama dilleriyle çalışmak isteyen programcılar için tasarlanmıştır. Bütün Dreamweaver özelliklerine ve araçlarına her iki çalışma alanından da erişebilirsiniz. Çalışma alanlarında araçlar optimize ayarlarda olacak şekilde düzenlenir. İstediğiniz zaman Window > Workspace Layout komutunu ve ardından da istediğiniz çalışma alanını seçerek Designer çalışma alanı ile Coder çalışma alanı arasında geçiş yapabilirsiniz. Macintosh Kullanıcıları için: Yukarıda bahsedilen Designer ve Coder çalışma alanı seçenekleri Macintosh ta mevcut değildir. Macintosh, ihtiyaçlarınıza göre düzenleyerek aynı optimize ortamı elde etmenizi sağlayan bir kayar panel sistemi kullanır. Dreamweaver ın çalışma alanının özelleştirilmesiyle ilgili ayrıntıları bu dersin devamında ve kitap boyunca göreceksiniz. Dreamweaver 8 Temellerİ

Başlangıç Sayfası Dreamweaver 8 i açtıktan sonra Bir Başlangıç Sayfası (Start Page) göreceksiniz. Bu sayfada şu araçlar bulunmaktadır: En son açılan belgelere ait hızlı bağlantılar Farklı dosya tiplerinde yeni belgeler oluşturmak için kullanabileceğiniz seçenekler Kendi siteleriniz için bir başlangıç noktası oluşturacak sayfa tasarımı örnekleri Aralarında bir Dreamweaver turu ve kılavuzunun da bulunduğu program kaynakları Programın araçlarına ekleme yapmak için kullanabileceğiniz kaynakları içeren Dreamweaver Exchange e ait bir bağlantı Siz Don t show again (Tekrar gösterme) onay kutusunu işaretlemedikçe, Dreamweaver ı her açtığınızda Başlangıç Sayfası karşınıza çıkacaktır. Açılışta Başlangıç Sayfası görünmüyorsa ve siz de bu sayfayı görmek istiyorsanız, Dreamweaver ın Preferences bölümünden Başlangıç Sayfası nın görüntülenmesiyle ilgili ayarları değiştirebilirsiniz. Bunun için Dreamweaver > Preferences (Macintosh ta) ya da Edit > Preferences (Windows ta) komutunu seçtikten sonra Category listesinden General ı seçip Document Options bölümündeki Show Start Page onay kutusuna tıklayın. Bu seçenekteki onay işareti, program açıldığında Başlangıç Sayfası nın görüntüleneceğini gösterir. Onay işareti yoksa, program açıldığında sayfa görüntülenmez. Yeni bir sayfaya oluşturma işlemine başladığınızda veya Başlangıç Sayfası ndaki diğer seçenekleri kurcaladığınızda Başlangıç Sayfası kendiliğinden kapanır. Macintosh kullanıcıları, sol üst köşesindeki Close düğmesini kullanarak da bu pencereyi kapatabilirler. Dreamweaver 8 in Başlangıç Sayfası DERS 1

Siteyi Geliştirmek Üzere Hazırlık Yapmak Bir Web sitesi oluşturmak için gereken ayrıntılı araştırma ve planlama aşamalarına zaman ayırmak çok önemlidir. Geliştirme için bir strateji oluşturmak daha verimli olmanıza, fikirlerinizi daha iyi ve daha ayrıntılı bir şekilde geliştirmenize ve projenizin kapsamını daha iyi anlamanıza yardım edecek, ayrıca zamanı ve kaynakları daha verimli kullanmanızı sağlayacaktır. İyi bir Web sitesi sezgisel olmalı ve kullanıcılara olumlu ve benzersiz bir deneyim sunmalıdır. Etkin bir Web sitesi hazırlarken işe ilgili siteyi oluşturma nedenini tanımlama ve özetleme, rekabet analizi, akış grafiği ya da taslak hazırlama, site özelliklerinin nasıl çalışacağını yazılı olarak tanımlama ve sitenin görüntüsünü ve insanlarda oluşturacağı hissi tasarlama gibi işlemlerle başlarsınız. Büyük şirketlerde bu işlemler için birden fazla insan ya da departman görevlendirilebilir ve bunların tamamlanacağı zaman dilimleri ciddi anlamda çakışabilir. Bu süreç çeşitli şekillerde bölümlere ayrılabilir. Bir Web sitesi hazırlamanın temel bileşenleri bu kitapta beş geliştirme aşamasında gerçekleştirilen adımlar olarak anlatılmıştır. Gerçekten etkin bir site (ister kendi sitenizi hazırlarken, ister bir müşteri için ya da bir ekiple birlikte çalışırken) hazırlamak için bu bileşenlerin hepsini kullanmak gerekir. Derslerde ilerlerken Dreamweaver size bu bahsettiğimiz işlemlerin birçoğunu (sadece prodüksiyon ve post prodüksiyon aşamalarındakileri değil) gerçekleştirme konusunda yardımcı olacaktır. 1. Aşama: Araştırma Herhangi bir sayfa üzerinde çalışmaya başlamadan önce kendinize ya da müşterinize aşağıdaki soruları sorun. Yoga Sangha Web sitesinin geliştirilmesinde kullanılan Müşteri anketinin tam hali CD ROM daki Lesson_01_Basics/resources klasöründe verilmiştir. Bu bölümde, Yoga Sangha tarafından anketteki en önemli sorulara verilen cevapları bulacaksınız. Bu cevaplar, Yoga Sangha sitesinin nasıl geliştirildiğini ve burada ele alınan sürecin sitenin geliştirilmesinde neden temel rol oynadığını anlamanızı sağlayacaktır. Bu süreci tümüyle anladıktan sonra burada edindiğiniz tecrübelerden kendi Web sitelerinizi oluştururken de faydalanacaksınız. Kime hitap edeceksiniz, bu siteye neden ihtiyaç var ve sitenizin ziyaretçilerinin neden sitenize gelmesini istiyorsunuz? Hitap edeceğiniz kitleyi doğru belirlemeniz çok önemlidir. Genel bir kullanıcı profili tanımlamak hedef kitlenize etkin olarak ulaşmanızı kolaylaştıracaktır. Farklı tipte kullanıcılara hitap ediyor olabilirsiniz. Böyle bir durumda her biri için ayrı bir profil geliştirin. Hitap edeceğiniz kitleyi belirledikten sonra bu insanların nasıl bir teknolojiye sahip olabileceği konusunu düşünün. Ziyaretçilerinizin büyük bir çoğunluğu acaba hangi eklentileri, hangi Web tarayıcılarını, hangi işletim sistemlerini kullanıyor? Ziyaretçilerinizin kullandığı araçların tipi, hedef kitlenizin kolayca erişebileceği bir Web sitesi yaratırken dikkat etmeniz gereken çok önemli bir faktördür. Örneğin sadece en yeni ve en güncel Web tarayıcılarının desteklediği elemanları içeren bir site oluşturuyorsanız ve çoğu ziyaretçinizin bilgisayarı bu tarayıcıları çalıştıramayacak kadar eskiyse bu durum pek hoş olmayacaktır. Dreamweaver 8 Temellerİ

Sitenizin hizmet edeceği amacın ne olacağını ve her bir potansiyel kullanıcının siteden ne şekilde faydalanabileceğini iyice düşünün. Site bu amacı yerine getirmek için nasıl bir içeriğe sahip olmalı? Ziyaretçilerin sitenizde yapacakları şeylerle ilgili muhtemel senaryoları belirlemek için, daha önce oluşturduğunuz ziyaretçi profil(ler)ini kullanın. Proje Sitesi: Yoga Sangha nın Hitap Edeceği Kitle Kime hitap edeceksiniz? Potansiyel öğrencilerin ve site ziyaretçilerinin ilgi alanları ve yaş aralıkları ne? Yoga yapmak isteyen ya da sağlıklarını fiziksel aktiviteler vasıtasıyla geliştirmek isteyen 20-60 yaş arasındaki yoga öğrencilerinin dikkatini çekmek istiyoruz. Bu kitle Web sitenizi ve şirketinizin sağladığı hizmetleri nasıl kullanacak? Sitedeki bilgileri, gitmek istedikleri sınıfı ve atölye çalışmalarını seçmeleri için kullanmalarını istiyoruz. Kalitemizi, derinliğimizi, bağlantılarımızı ve kişisel hizmetlerimizi gösteren hizmetlerimiz ve stüdyomuzla ilgili fikir edinmelerini istiyoruz. Yoga Sangha öğrencilerine nasıl yardımcı oluyor ve onların normal programlarıyla sizin derslerinizin arasındaki uyumu nasıl sağlıyorsunuz? Bunu, hem gündüz, hem de gece olmak üzere farklı beceri seviyelerinde yoga dersleri vererek ve atölye çalışmalarını da hafta sonlarında yaparak sağlıyoruz. Bu da öğrencilerin form durumlarına ve kişisel programlarına uygun bir sınıf ya da atölye çalışması bulabilmelerini sağlıyor. Öğrencilerin Yoga Sangha yı seçmelerini sağlayacak başlıca sebepler neler? Çünkü biz öğrencilerimizin yaşadıkları yere yakınız, çünkü Anusara yoga öğretiyoruz ve çünkü en sevdikleri hocalar Yoga Sangha da ders veriyor. Ayrıca Yoga Sangha da sadece duruşları değil, yoganın nasıl uygulandığını da öğreniyorlar. Site nasıl bir içerik gerektiriyor? Sitede kullanılacak materyali belirlemek ve toplamak, bir Web sitesi tasarlama ve oluşturmaya hazırlık kısmının önemli aşamalarından biridir. Metinler, resimler ve multimedya elemanları gibi bütün içeriği toparlamanız gerekir. Bu elemanları düzenlemek eksiksiz ve ayrıntılı bir Web sitesi hazırlamanızda size çok yardımcı olacaktır. Böylece ne tür içeriklerin geliştirilmesi gerektiğini belirleyebilirsiniz. Proje Sitesi: Yoga Sangha nın İçeriği Sitede olmasını istediğiniz bölümleri, özellikleri ve içeriği bir liste halinde yazın. Bu içerik bileşenlerinden hangileri mevcut ve hangilerinin geliştirilmesi gerekiyor? Sitede bir stüdyo turu, üç aylık haberler, Katchie ve Jayne in (stüdyonun sahipleri) üç ayda bir yazacakları bir mektup, bir harita ve talimatların olmasını istiyoruz. Bunların hepsinin geliştirilmesi gerekiyor. Ayrıca sitede üç ayda ya da ayda bir olmak üzere, dünyada başarılı işlere imza atan kâr amacı gütmeyen kuruluşlar a (NGO), belirli hocaların yazılarına ve gelecekteki ihtiyaçları temel alarak, iletmek istediğimiz diğer bilgilere yer vermek istiyoruz. Yine bunların da geliştirilmesi gerekiyor. DERS 1

Sitede ziyaretçilerle iletişiminiz nasıl olacak ve onlara neler anlatacaksınız? Sitede ziyaretçilerinize ne anlatacağınızı tam olarak bilmeniz çok önemlidir. Ne söylemeye çalıştığınızı bilmiyorsanız ziyaretçiler de bunu muhtemelen anlamayacaktır. Sitenizin mesajını açık bir şekilde belirtin. Ziyaretçilerle iletişim kurmak, etkili bir sitenin kalitesini koruyabilmenin önemli bir bileşenidir. Proje Sitesi: Yoga Sangha nın İletişimle İlgili Hedefleri Sitenizin temel hedefleri neler? Stüdyomuz, topluluk bilinciyle faaliyet gösteren, çevreye duyarlı ve kişisel bir stüdyodur. Web sitemizde Anusara Yoga felsefesini ve stüdyomuzla ilgili deneyimleri, kişisel duyguları, toplumsal konuları iletmek istiyoruz. Biz ayrıca, gelecek seneden itibaren stüdyomuzun tam bir Yeşil stüdyo olması, yani tam bir ekolojik sorumluluk ve sürdürülebilirliğe sahip olması için yeni bir programa dahiliz. Aktivizmin önemli isimlerinin katılacağı konferanslar aracılığıyla yoganın günlük hayatla ilişkisini göstermek, ekolojik bilinç, beslenme, toplum ilişkileri, felsefe ve meditasyon konularından bahsetmek istiyoruz. Yeni bir Web sitesiyle ilgili olarak yapılacak araştırmanın son kısmını, rekabet durumunu incelemek oluşturur. Hazırladığınız Web sitesi sadece belirli bir kesime hitap edecek olsa bile bu adım hayati önem taşır. Çünkü Web, neredeyse mantığa uygun her türlü Web sitesinin zaten hazırlanmış olduğu çok büyük bir alandır. Rakiplerinizi tanır ve onların Web sitelerini nasıl hazırladıklarını bilirseniz, farklı bir şeyler ortaya koyabilirsiniz. Rakiplerinizin Web sitelerinin tasarımında zayıflıklar ve özellik anlamında birtakım eksiklikler olabilir ve siz bunları görebilirsiniz. Böyle bir durumda çok daha farklı bir site tasarlayabilir ve diğerlerinden üstün olduğunuzu gösterebilirsiniz. Eğer rakiplerinizin Web sitesi gerçekten iyi bir tasarıma sahipse, bu da size daha iyi bir Web sitesi hazırlamak için itici güç olabilir. Her halükarda, eğer rakiplerinizin yaptıklarını dikkate almazsanız, bu sizin ve tasarımını yaptığınız Web sitesi için bir dezavantaj yaratacaktır. 2. Aşama: Planlama ve Yapılandırma Web sitenizle ziyaretçilerinizin arasındaki bağlantı, kısmen sitenizin yapısına bağlıdır. Açıklık ve kullanım kolaylığı iyi bir Web sitesi için hayati özelliklerdir. Geliştirme sürecinin bu önemli aşaması, bu kitapta göreceğiniz ilk konudur. Sitenin yapısını oluşturmak: Web sitelerinin temelini site yapısı oluşturur. İyi yapılandırılmamış bir Web sitesinde dolaşmak ve böyle bir siteyi kullanmak kafa karıştırıcı ve zor olabilir, ayrıca böyle bir sitenin devamlılığını sağlamak da pek kolay olmayabilir. Anlaşılır, iletişim sorunu olmayan ve ziyaretçilerinin kolayca kullanabileceği bir site oluşturmak için, herhangi bir HTML belgesi oluşturmadan önce sitenin yapısının nasıl olacağını ve sitede kullanılacak dosya ve klasörlerin hiyerarşisini eksiksiz olarak planlamanız gerekir. Dreamweaver 8 Temellerİ

Ayrıntılı bir akış şeması ya da storyboard ile birlikte sitenin kapsamlı bir taslağını hazırlamak, planlama sürecinin önemli bir adımıdır. 3. aşamadaki tasarım evresinden önce içeriğin organize edilmesi ve ayrı ayrı ve daha ayrıntılı sayfa seviyesinde akış şemalarının geliştirilmesi genellikle bu aşamada gerçekleştirilir. Sayfa seviyesindeki içeriğin organize edilmesi konusunu Ders 2 de göreceksiniz. Dosya ve klasör yapısını oluşturmak: Geliştirme sürecinden önce dosya yönetimi için bir strateji hazırlamak önemlidir. Bunu gerçekleştirmek için kullanabileceğiniz güzel yöntemlerden biri, her dosya tipi için farklı tipteki medya öğelerini ayrı klasörlerde tutmaktır. Bir HTML klasörü, bir resim klasörü, bir CSS (Cascading Style Sheets) klasörü ve bir multimedya klasörü kullanabilirsiniz. Örneğin sadece HTML ve XHTML dosyalarını içeren html_docs adında bir klasör kullanmak, bu dosyaları düzenli bir şekilde tutmanızı ve kolayca bulmanızı sağlayacaktır. Eğer site çok büyükse, onu, her kısım ve alt kısım için birer klasör olacak şekilde daha kolay yönetilebilir parçalara ayırmak isteyebilirsiniz. Böyle bir durumda her kısım ve alt kısım klasöründe aynı dosya tipleri için birer klasör kullanabilirsiniz. Site genelinde kullanılan resimler gibi öğeler varsa, aynı dosyaları site içinde farklı konumlarda tekrar tekrar oluşturmamak için ana klasör içinde bu tür dosyalar için ortak bir klasör ya da klasörler oluşturabilirsiniz. Farklı klasör seviyelerinde grafik tabanlı bir akış şeması oluşturmak, klasör hiyerarşisini tanımlamanızda size yardımcı olacaktır. Anlaşılır ve iyi yapılandırılmış bir Web sitesinin geliştirilmesi ve devamlılığının sağlanması, iyi organize edilmemiş bir siteye göre çok daha kolay ve verimli bir şekilde gerçekleştirilir. Site yapısı ve klasör hiyerarşisi, Ders 3 te göreceğimiz bağlantılarla da ilişkili olduğu için, bu konularla öğrenecekleriniz bu derste anlatılanlarla sınırlı değil. Bu kitapta dosya organizasyonu derslere göre düzenlenmiştir. Bir sonraki uygulamada, DW8_YogaSangha/Completed_YogaSangha_ SampleSite klasöründeki klasörleri ve dosyaları inceleyerek Yoga Sangha proje sitesinin yapısını göreceksiniz. 3. Aşama: Geliştirme Sitenin Tasarlanması Bir Web sitesi tasarlarken çalışmaya, genel tasarımı gösteren küçük resimler oluşturarak çalışmaya başlayabilirsiniz (bu, fikirlerinizi kâğıt üzerinde görmek için kullanabileceğiniz hızlı bir beyin fırtınası yöntemidir). Bu süreç boyunca, 1. Aşama da sorulan soruların cevaplarını ve yaptığınız araştırmanın sonuçlarını göz önünde bulundurmaya devam etmeniz gerekir. Tasarımınızı geliştirirken uygulamanız gereken ikinci adım, başlangıçtaki fikirlerinizin en iyilerini ayıklayarak çok daha ayrıntılı taslaklar oluşturmaktır. Son olarak, seçilen tasarıma göre oluşturulan sayfaların nasıl görüneceğini gösteren eksiksiz örnek(ler) oluşturulabilir. Bu tasarım sürecinde müşterinizle sürekli olarak görüşmeniz gerekir. Tasarım fikirleri açısından müşterinizin istemeyeceği örnekler oluşturmak istemeyeceksinizdir. Sitede kullanılacak grafik öğelerinin birçoğu bu aşamada oluşturulur. Sayfa düzeni oluşturma konusunu Ders 4 te, resimleri sayfalara yerleştirme konusunu da Ders 5 te göreceksiniz. DERS 1

Ayrıca, düşüncelerinizin teknik olarak Web sitesinde de aynen gerçekleştirileceğinden emin olmak için yapacağınız görsel tasarım bileşenlerini test etme işleminin de bu aşamada gerçekleştirilmesi gerekir. Etkin bir Web tasarımının temelini, sitenin tümüyle işlevsel teknik özelliklerine aktarılabilen görsel kavramlar oluşturur. Bir Web sitesinde gerçekleştirebileceğiniz şeylerle ilgili bilginiz ne kadar fazlaysa, sitede kullanacağınız öğelerin etkin bir şekilde tasarımı için o kadar donanımlısınız demektir. Bu kitapta, oluştururken Dreamweaver dan yardım alabileceğiniz birçok teknik Web özelliğini öğreneceksiniz. Sitenin görüntüsü ve insanlarda oluşturduğu his, görünüm ve sitede kullanılacak stiller ve renklerle ilgili özel ayrıntıları içeren stil kılavuzu da genellikle bu aşamada oluşturulur. Bir Web sitesi oluşturulurken, geliştirme aşamalarının büyük ölçüde iç içe geçtiği pek çok durumla (aşamaların her birinde sık sık tekrarlanan çalışmalar) karşılaşılır. 2. aşamadaki kavramlardan bazılarını bundan sonraki birkaç derste göreceksiniz; bununla birlikte 3. aşamaya ait prodüksiyon evresi kitaptaki neredeyse tüm dersleri kapsamaktadır. 1. ve 2. aşamanın prodüksiyon öncesi adımlarında neler olduğunu (bunlar proje sitesi için önceden hazırlanmış durumdadır) anladığınıza göre, Yoga Sangha projesinin belirli bölümlerini Dreamweaver ile yeniden oluşturmak için hazırsınız demektir. Kitapta proje üzerinde çalışmaya devam ederken, bütün araştırma, içerik ve tasarım çalışmalarını güzel bir Web sitesinde bir araya getiren HTML belgelerini yaratarak siteyi Dreamweaver la nasıl oluşturacağınızı öğreneceksiniz. 4. Aşama: Test Web sitesini tasarlama işlemini bitirdikten sonra, ziyaretçilerin kullanımına sunmadan önce onu test etmek de çok önemlidir. En basit Web sitelerinin bile mantıklı bir şekilde test edilmesi gerekir. Örneğin Web sitenizi, popüler Web tarayıcılarının hepsiyle test etmeniz gerekmektedir. Her ne kadar Windows ta kullanılan Microsoft Internet Explorer günümüzde en çok kullanılan tarayıcı olsa da, Mozilla Firefox, Opera ve Safari nin pazardaki payları da azımsanmayacak ölçüdedir. Internet Explorer gibi bir tarayıcının bile, bırakın Windows ve Macintosh sürümleri arasındaki farkları, 5, 5.5 ve 6 sürümleri arasında ciddi farklar vardır. Farklı tarayıcıların sayfalarınızı görüntüleme şekillerindeki farklar dışında, her sayfayı ve her bağlantıyı da test ettiğinizden emin olmalısınız. Ders 14 te de göreceğiniz gibi, Dreamweaver 8 size bu postprodüksiyon işlemlerinde yardımcı olabilir. 5. Aşama: Devamlılığın Sağlanması Birçok Web sitesi geliştiricisi, bir Web sitesi geliştirmenin asla sona ermeyen bir işlem olduğunu düşünür. Yeni sayfalar eklemek, bağlantıları güncellemek, içerikte değişiklik yapmak ve resimleri değiştirmek, bir Web sitesinin devamlılığını sağlamak için uygulanan standart işlemlerdir. Dreamweaver 8, kütüphane öğeleri, şablonlar ve diğer araçlar yardımıyla Web sitelerinin devamlılığını sağlama işlemini kolaylaştırmak için birçok özellik sunar. Dreamweaver 8 Temellerİ

Yerel Bir Site Tanımlamak Herhangi bir sayfa oluşturmaya başlamadan önce bir Web sitesi hazırlamanın ilk adımı, bilgisayarınızda sitenin içinde yer alacak her şeyi içerecek olan klasörün oluşturulmasıdır. Bu işlem yerel bir site tanımlamak olarak adlandırılır. Hedef klasör, yerel kök klasörü (local root folder) olarak bilinir ve sabit diskinizde yer alacak olan yerel sitenin sınırlarını belirler ve uzak sitenin adeta bir temsili gibidir. Uzak site, ziyaretçilerinizin erişeceği Web sunucusunda bulunacak olan asıl sitedir. Yerel bir site tanımlamak size yerel ve uzak versiyonlar arasında aynı klasör hiyerarşisini koruma imkânı sağlar. Bu da işlevsel bir site yaratmak ve bunun sürekliliğini sağlamak için çok önemlidir. İçinde sitenin dosyaları ve klasörlerinin yapısıyla ilgili ayarlar bulunan yerel kök klasörüyle birlikte bir yerel site oluşturduğunuzda, siteye ait dosyaların yerel kök klasörünün dışında bir yerde saklanması önlenmiş olur. Sabit diskinizde yer alan ama yerel kök klasörünüzün dışında bulunan dosyalar uzak sunucuya aktarılamaz. Bu kısıtlama, siz sitenizi geliştirirken site çevrimiçi olarak erişilebilir hale getirildiğinde kullanılamaz durumda olan dosyalara erişmenizi engeller. Sitedeki farklı bir konuma taşınmış olan bir dosyaya ait bütün referansların güncellenmesi gibi pek çok Dreamweaver özelliği gerçek anlamda çalışabilmek için yerel bir site tanımına ihtiyaç duyar. Elemanları daima yerel siteler içinde oluşturma ve yine aynı yerde çalışma alışkanlığını edinmeniz gerekir. Bu alışkanlığı kazanmazsanız bağlantılar, yollar ve dosya yönetimi konularında sorun yaşayabilirsiniz. (Dreamweaver ın bu özelliklerle ilgili araçlarını sonraki derslerde göreceğiz.) Sitenizin geliştirilme aşaması sabit diskinizdeki yerel sitede gerçekleşir. Sayfalarınızı burada oluşturur ve başlangıçtaki test aşamasını burada gerçekleştirirsiniz. 10 DERS 1 Bir sitenin ayarlarının hemen yapılması şart değildir ama tavsiye edilir. Dreamweaver siteyle ilgili ayarları yapmadan dosyaları hızlı bir şekilde düzenlemenize, bağlamanıza ve aktarmanıza izin verir. Site yönetimiyle ilgili ayrıntıları Ders 14 te göreceksiniz. 1. CD-ROM daki DW8_YogaSangha klasörünü sabit diskinize kopyalayın. DW8_YogaSangha klasörü, sitenizin yerel kök klasörü olacaktır. Bu klasör, kitapta belirli bölümlerini hazırlayacağınız Yoga Sangha proje sitesinin tüm dosyalarını ve klasörlerini içerecektir. Kendi siteleriniz üzerinde çalışmaya başladığınızda her site için ayrı bir kök klasörü oluşturmanız gerekecek. Yerel kök klasörünün adı, ilgili sitenin adı ya da sizin seçtiğiniz başka bir ad olabilir. Birden fazla site hazırlıyorsanız, siteleri birbirinden kolayca ayırmanızı sağlayacak açıklayıcı isimler seçmeniz işinizi kolaylaştıracaktır. Yerel kök klasörünün adı sadece dosya yönetimi açısından önemlidir ve sitenin ziyaretçileri tarafından görünmeyecektir. Yerel kök klasörünüzü sabit diskinizde Dreamweaver 8 uygulama klasörü dışında bir yere kaydetmelisiniz. Eğer onu Dreamweaver 8 uygulama klasöründe tutarsanız, Dreamweaver ı yeniden yüklemeniz gerektiğinde bütün çalışmalarınızı kaybedersiniz.

Yerel kök klasörlerini saklayabileceğiniz konumlarla ilgili tavsiyeler: Macintosh: Macintosh HD/[KullanıcıAdı]/Sites/yerel kök klasörü Windows: Belgelerim\yerel kök klasörü 2. Dreamweaver Başlangıç sayfasındaki Create New bölümünden Dreamweaver Site ı seçin. Site > New Site ya da Site > Manage Sites komutunu seçip New düğmesine tıkladıktan sonra açılan menüden Site ı seçerek de yeni bir site oluşturabilirsiniz. Bu işlemden sonra Site Definition iletişim kutusu açılacaktır. Basic ve Advanced adındaki iki sekmesiyle birlikte Site Definition iletişim kutusu açılacaktır. Bu sekmeleri kullanarak bir site tanımlama işlemini nasıl gerçekleştirmek istediğinizi seçebilirsiniz. Basic, iletişim kutusunu açtığınızda varsayılan olarak görünen moddur ve işlem boyunca size adım adım yardımcı olur. Advanced modu, yapılandırmada kullanabileceğiniz bir dizi ilave seçenek ve ayar sunar. Basic modundaki açıklayıcı metinler burada görüntülenmez. Bu uygulamada henüz seçili durumda değilse Basic sekmesine tıklayınız. Site Definition iletişim kutusunun Basic bölümü Dreamweaver 8 Temellerİ 11

3. Dreamweaver, Site Definition iletişim kutusunun Basic sekmesinde What would you like to name your site? ifadesiyle sitenizin adının ne olacağını soracaktır. Site adı kutusuna Yoga Sangha yazın ve Next düğmesine tıklayın. Yoga Sangha, burada oluşturduğunuz proje sitesinin adıdır. Kendi sitelerinizi oluştururken atayacağınız isimler, sitelerinizin kolayca tanınmasını sağlamalıdır. Anlaşılır ve mantıklı isimler her bir siteyi diğerlerinden kolayca ayırmanızı sağlar ve birden fazla siteyle çalışırken bunların yönetimini kolaylaştırır. Yerel kök klasöründe olduğu gibi site ismi sadece sizin Dreamweaver ın tanımlanmış siteler listesinde referans olarak kullanacağınız bir araçtır ve sitenizin kullanıcıları tarafından görülmez. Bu ekrandaki HTTP Address metin alanını boş bırakmanız gerekir. HTTP Address (sitenin URL i), site köküyle ilişkili bağlantıları tanımlamak için kullanılır; bu konuyu Ders 3 te göreceğiz. Bu seçenek isteğe bağlıdır ve bu kitapta yer alan uygulamalarda gerekli değildir. Basic görünümündeki bu bölüm, Advanced görünümündeki Local Info kategorisinin Site metin alanına karşılık gelir. Siteyi tanımlama işlemi boyunca Advanced görünümünü kontrol etmek için Basic ve Advanced görünümleri arasında geçiş yapabilirsiniz. Advanced görünümüyle Ders 14 te çalışacaksınız. 4. Dreamweaver, Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP? ifadesiyle ColdFusion, ASP.NET, ASP, JSP ya da PHP gibi bir sunucu teknolojisiyle çalışıp çalışmayacağınızı soracaktır. No, I do not want to use a server technology seçeneğine ait radyo düğmesine tıklayarak bir sunucu teknolojisi kullanmak istemediğinizi belirtin. Next düğmesine tıklayarak bir sonraki bölüme geçin. Şu anda veritabanları ya da diğer sunucu teknolojilerini kullanan sayfalar oluşturmadığınız için No seçeneğini işaretlemeniz gerekiyor. Site ayarlarında değişiklik yapmanız gerektiğinde Site > Manage Sites komutunu, ardından da listeden istediğiniz siteyi seçip Edit düğmesine tıklayarak bu işlevi daha sonra eklemeniz mümkündür. Site Definition iletişim kutusunda sunucu teknolojisi seçeneğinin ayarlanması 12 DERS 1

Basic görünümünün bu bölümü Advanced görünümündeki Testing Server kategorisine karşılık gelir. Bu da, uzak sunucuda kullanılan sunucu modelinin seçilmesi gibi dinamik siteler oluşturmayla ilgili ilave seçenekler sunar. 5. Bu bölümün üst kısmında Dreamweaver, How do you want to work with your files during development? ifadesiyle geliştirme sürecinde dosyalarınızla nasıl çalışmak istediğinizi sorar. Edit local copies on my machine, then upload to server when ready (recommended) seçeneğine tıklayın. Site Definition iletişim kutusunda dosyalarla çalışma şeklinin belirlenmesi Şu anda makinenizdeki dosyalarla çalışacaksınız ve bir uzak sunucuya erişmeniz gerekmiyor. Böyle durumlarda bilgisayarınızda bulunan dosyaları düzenlersiniz. Eğer bir uzak sunucunuz varsa, bu seçenek, dosyaların iki kopyası olduğunu (biri yerel sabit diskinizde, diğeri de sunucunuzda) gösterir. Bu da gerektiğinde size orijinal dosyaları sunucudan alma seçeneğini sunar (eğer yerel olarak değiştirilen dosyaları yükleyerek bunları değiştirmediyseniz). Prodüksiyon ve test çalışmalarınızı yerel sabit diskinizde yaptığınızda, tamamlanmamış sayfaların Web de yayınlanmasını engellemiş olursunuz. Eğer doğrudan bir sunucu üzerinde çalışıyorsanız, yaptığınız tüm değişiklikler hemen orijinal dosyalara uygulanır. Dreamweaver 8 Temellerİ 13

6. Yine bu bölümde Dreamweaver, Where on your computer do you want to store your files? ifadesiyle dosyalarınızı bilgisayarınızda nerde saklamak istediğinizi sorar. Metin alanının sağındaki klasör simgesine tıklayın ve DW8_YogaSangha klasörünü bulun. Bu metin alanı sabit diskinizde siteye ait bütün dosyaların saklanacağı klasörü belirlemenizi sağlar. Bu, uzak sitedeki kök klasörün eşdeğeridir. Dreamweaver bu yerel kök klasörünü sitenizdeki belgeler, resimler ve bağlantılara ait yolları belirlemek için kullanır. Yollar ve bağlantılar konusunu Ders 4 te göreceksiniz. DW8_YogaSangha klasörü, bu uygulamanın birinci adımında CD-ROM dan sabit diskinize kopyaladığınız klasördür. Varsayılan durumda metin alanında başlangıçta Yoga Sangha adındaki klasöre ait bir yol bulunur. Bu varsayılan seçeneği kullanarak sabit diskinizde Yoga Sangha adında yeni bir klasör oluşturun. Bu, sizin yerel kök klasörünüz olacak. Dosyaları içeren DW8_YogaSangha klasörünü kullanmanız gerektiği için bu klasöre erişmeniz gerekmektedir. Macintosh kullanıcıları için: Sabit diskinizdeki DW8_YogaSangha klasörünü bulup seçin ve Choose düğmesine tıklayın. Windows kullanıcıları için: Sabit diskinizdeki DW8_YogaSangha klasörünü bulup seçin ve Open düğmesine tıklayın, ardından DW8_YogaSangha klasörünü yerel kök klasörünüz olarak ayarlamak için Select düğmesine tıklayın. DW8_YogaSangha klasörünün seçileceğini göstermek için Choose Local Root Folder For Site Yoga Sangha iletişim kutusunun sol alt köşesinde Select:DW8_YogaSangha metni belirecektir. Sabit diskinize kopyaladığınız DW8_YogaSangha klasörünü (CD-ROM dakini değil) seçtiğinizden emin olun. Windows un bazı sürümlerinde CD den kopyalanan dosyalar salt okunur olarak işaretlenir. Bu durumu düzeltmek için, kopyaladıktan sonra tüm dosyaları seçin (Ctrl+A), Properties (Özellikler) penceresini açın (Alt+Enter tuşlarına basarak ya da seçilen dosyaları sağ tıklayıp Properties e [Özellikler] tıklayarak) ve Read-Only (Salt Okunur) onay kutusunun işaretini kaldırın. Ardından Apply (Uygula) veya OK (Tamam) düğmesine tıklayın. Site definition iletişim kutusunda yerel kök klasörünün belirlenmesi 14 DERS 1

Yerel kök klasörüne (DW8_YogaSangha) giden yol, metin alanında görüntülenecektir ve bunun konumunun sabit diskinize göre tanımlanmış olduğunu göreceksiniz. Bununla birlikte bu durumda, yerel kök klasörünüz olarak mevcut (ve bu kitaptaki derslerde ihtiyacınız olan dosyaları içeren) DW8_YogaSangha klasörünü seçmeniz gerekir. Kendi sitelerinizi oluştururken eğer mevcut bir klasörünüz yoksa, Dreamweaver ın siteniz için seçtiğiniz ismi temel alarak otomatik olarak bir klasör oluşturmasına izin vererek işinizi kolaylaştırabilirsiniz. Gelişmiş Site Tanımı Seçenekleri Basic görünümün bu bölümü (yerel kök klasörünü belirlediğiniz bölüm), Advanced görünümündeki Local Info kategorisinde bulunan Local root folder metin alanına karşılık gelir. Advanced site tanımı görünümü ayrıca yerel dosya listesini otomatik olarak güncellemenizi (Refresh Local File List automatically), önbelleği etkinleştirmenizi (Enable Cache), varsayılan resim klasörünü (Default Images folder) ve HTTP adresini (HTTP Address) tanımlamanızı sağlar. Refresh Local File List seçeneği varsayılan durumda işaretlidir. Bu da site klasörüne yeni bir dosya eklediğinizde Dreamweaver ın site listesini güncellemesini sağlar. Eğer bu seçeneğin işaretini kaldırırsanız, dosya ekleme ya da silme gibi değişikliklerden sonra yerel dosyaları elle yenilemeniz gerekir. Enable Cache seçeneği varsayılan durumda işaretlidir. Önbelleği etkinleştirme seçeneği, sık kullanılan site verilerini saklamak için bellekte yer ayırır ve böylece bağlantı ve site yönetimi işlemlerini hızlandırır. Site önbelleği bilgileri bilgisayarınızın RAM belleğinde saklayarak önbelleği kullanan özelliklere erişimi hızlandırır. Bu seçenek etkinse, siz çalışmaya devam ederken Dreamweaver önbellekte saklanan bilgileri sürekli günceller. Her ne kadar önbellek seçeneğini etkin durumda bırakmak genelde en iyi yaklaşım olsa da, çok büyük sitelerde önbelleğin yeniden oluşturulmasının işlemleri yavaşlatabileceğini de unutmayın. Default Images folder, sitenizdeki resimlerin konumunu tanımlamanızı sağlar ve resim eklemek üzere resimlerin bulunduğu konuma ulaşırken harcayacağınız zamanı azaltabilir. Resimlerin kullanımını Ders 5 te göreceğiz. Yine isteğe bağlı bir seçenek olan HTTP address ile Web sitenizin URL ini tanımlayabiliriniz. Bu adres mutlak bağlantıları doğrulamak için kullanılır. Bağlantılarla ilgili ayrıntılı bilgi için Ders 3 e bakınız. Dreamweaver 8 Temellerİ 15

7. Next düğmesine tıklayarak bir sonraki bölüme geçin. Uzak sunucunuza nasıl bağlanacağınızı soran How do you connect to your remote server? sorusunun altındaki None seçeneğini işaretleyin. Site Definition iletişim kutusundaki bağlantı seçenekleri Şu anda yerel bir site üzerinde çalışıyorsunuz ve bir uzak sunucuya erişmeniz gerekmiyor. Uzak bir sunucuya bağlanmayla ilgili ayrıntıları Ders 14 te bulabilirsiniz. Basic görünümündeki ayarların bu bölümü Advanced görünümündeki Remote Info kategorisine karşılık gelmektedir. Bu da bir uzak sunucuya dosya transfer etme konusuyla ilgili ilave seçenekleri (sunucuda dosyaları saklamak için kullanılacak klasörü belirlemek gibi) içerir. 16 DERS 1

8. Next düğmesine tıklayarak bir sonraki bölüme geçin. Yeni tanımladığınız site bilgilerini gözden geçirin ve iletişim kutusunun alt kısmındaki Done düğmesine tıklayın. Site Definition iletişim kutusundaki site bilgileri özet görünümü Remote Info ve Testing Server bölümlerinde No seçeneğini işaretlediğiniz için, Dreamweaver her ikisi için de erişim ayarlarının daha sonra yapılacağını bildiren Access: I ll set this up later. ifadesini görüntüleyecektir. Done düğmesine tıkladığınızda Dreamweaver sitenin önbelleğini oluşturmak için DW8_YogaSangha klasöründeki dosyaları tarar. Dreamweaver ilk kez önbellek oluşturma işlemini tamamladığında kısa bir süreliğine bir iletişim kutusuyla karşılaşabilirsiniz. Çok büyük sitelerde önbelleği oluşturmak daha uzun sürer. Dreamweaver 8 Temellerİ 17

Files panelinde artık DW8_YogaSangha klasörünü göreceksiniz. Varsayılan durumda Files paneli, bu derste daha sonra göreceğiniz panel gruplarının alt kısmında görüntülenir. Files paneliyle ilgili ayrıntılar için Ders 14 e bakınız. Files panelinde Yoga Sangha sitesi görüntüleniyor Daha önce Dreamweaver da bir site tanımlamadıysanız, Files panelinde, bilgisayarınızdaki klasörlerin hiyerarşisi ve Manage Sites iletişim kutusunu açmak için kullanabileceğiniz bir bağlantı görüntülenir. Macintosh kullanıcıları için Site paneli açılır menüsündeki varsayılan seçenek Computer dır ve bu seçenek başlangıçta Macintosh HD, Network, FTP & RDS Servers ve Desktop klasörünü içerir. Windows kullanıcıları için varsayılan seçenek, başlangıçta My Computer (Bilgisayarım), My Network Places (Ağ Bağlantılarım), FTP & RDS Servers ve Desktop items öğelerini içeren Desktop tur. Siz bir site oluşturduktan sonra bu site varsayılan seçenek olur. Eğer birden fazla siteniz varsa, Dreamweaver Files panelinde en son kullanılan siteyi görüntüler. Files paneli Files panel grubunda yer alır. Yeni Bir Sayfa Oluşturmak ve Bu Sayfayı Kaydetmek Yerel sitenizi tanımladıktan sonra Web sayfalarınızı oluşturmaya ve bunlarla çalışmaya hazırsınız demektir. Yeni bir sayfa oluşturduğunuzda ilk yapmanız gereken şey belgenizi kaydetmek olmalıdır. 1. File > New komutunu seçin. New Document iletişim kutusu açılacaktır. 18 DERS 1

New Document iletişim kutusunu açmak için Cmd+N (Macintosh ta) ya da Ctrl+N (Windows ta) klavye komutlarını kullanabilirsiniz. Bu klavye komutlarını kullanırken New Document iletişim kutusunu atlamak ve hemen yeni bir belge açmak isterseniz Dreamweaver > Preferences (Macintosh ta) ya da Edit > Preferences (Windows ta) komutunu seçin, ardından Category listesinden New Document i seçin ve Show New Document Dialog on Command+N (Macintosh ta) ya da Show New Document Dialog on Ctrl+N (Windows ta) seçeneğinin işaretini kaldırın. Bu bölümde ayrıca varsayılan belge tipini, uzantıyı ve kodlamayı değiştirmenizi sağlayan seçenekler bulunmaktadır. Kitaptaki derslerde varsayılan seçenekleri kullandığınız kabul edilmiştir. Preferences iletişim kutusunu açmanın diğer bir yolu da New Document iletişim kutusunun alt kısmındaki Preferences düğmesine tıklamaktır. New Document iletişim kutusu açıldığında iki sekme görürsünüz: General ve Templates. Şimdiki uygulamada yeni bir HTML (Hypertext Markup Language) sayfası oluşturacaksınız. Yeni bir HTML sayfası oluşturma seçeneği General sekmesinin Basic kategorisinde yer alır. Bunlar varsayılan ayarlardır ve önceden seçilmiş olabilir. New Document iletişim kutusu New Document iletişim kutusunda birçok farklı tipte sayfa oluşturmanızı sağlayan ilave seçenekler de sunulur. Basic Page kategorisinde HTML e ek olarak CSS (Cascading Style Dreamweaver 8 Temellerİ 19

Sheets), JavaScript ve XML gibi bir dizi seçenek yer alır. Kullanabileceğiniz diğer sayfa tipi kategorileri arasında da Dynamic Pages (ASP, ColdFusion ve PHP gibi diller kullanılır) ve Page Designs ı (kendi sitenizi oluştururken başlangıç noktası olarak kullanabilirsiniz) sayabiliriz. İletişim kutusunun sol tarafındaki kategori listesini (Dynamic, Templates, CSS Style Sheets, Framesets ve Page Designs) kullanarak özel sayfa tiplerine erişebilirsiniz. Buradaki uygulamada bu ilave sayfa tiplerinden herhangi birini kullanmayacaksınız, ama bunların neler olduğunu bilmeniz iyi olur. İletişim kutusunun ortasındaki sütunun içeriği, sol sütunda seçilen kategoriye göre değişir. XHTML, XML ve Belge Tipi Tanımları Bir Web sayfasının görsel kısmının temelini kod oluşturur. İşaretleme dili (markup language) olarak da adlandırılan bu bileşen, ziyaretçilerin tarayıcılarında gördüğü şeyleri oluşturmak için kullanılır. İşaretleme terimi; metin ve resim gibi elemanları talimatlarla tanımlayarak bir sayfanın yapısını ve görünümünü ve aynı zamanda bu elemanların nasıl görüntüleneceğini tanımlar. Bu tanımlama işlemini de etiketler ve bunların nitelikleriyle gerçekleştirir. Hypertext Markup Language (HTML) şu anda en çok bilinen işaretleme dilidir. Ancak HTML doğası gereği sınırlıdır. Bu öncelikle yeni özelliklerin genellikle geriye yönelik uyumlu olmaması anlamında geçerlidir ve farklı tarayıcılarda kullanımıyla ilgili pek çok uyum sorunu ortaya çıkmaktadır. HTML, mevcut Web standartlarını karşılayamadığı ve bu standartlara uymasını sağlayacak gelişme potansiyeline sahip olmadığı için yavaş yavaş kullanımdan kalkmaya başlayan eski bir işaretleme dilidir. XHTML (Extensible Hypertext Markup Language), bir XML (Extensible Markup Language) dili olarak düzenleyerek HTML in becerilerini geliştirmekte ve onun yerini almaktadır. XML işaretleme dili, bir sayfanın içeriğinin ve yapısının tanımlanması aracılığıyla yapı, içerik ve sunumun birbirinden ayrılmasının önemini vurgular ve bunu kolaylaştırır. Ancak bu, görünüm ya da sunum için geçerli değildir; tüm sunum tanımı CSS gibi araçlarla ayrıca gerçekleştirilir. XHTML kullanılmasının avantajları arasında hem geriye, hem de ileriye yönelik uyumluluk, cep telefonları ya da avuçiçi bilgisayarlar gibi alternatif Web erişimi sağlayan araçlarda kullanılabilirlik ve geliştirilebilme potansiyeli sayılabilir. XHTML 1.0 Transitional, kullanılması artık uygun görülmeyen (endüstride uyumluluk sağlanması için belirli Web standartları geliştiren bir kurum olan World Wide Web Consortium [W3C] tarafından modası geçmiş olarak tanımlanan) ve bu yüzden XHTML in daha katı kurallar içeren sürümlerinde mevcut olmayan bazı HTML elemanlarının kullanılmasına izin veren bir XHTML sürümüdür. Kullanılması artık uygun bulunmayan bu elemanların kullanılmasına izin vermesi dolayısıyla HTML in XHTML e dönüştürülmesi yoluyla geriye yönelik uyumluluğu mümkün kıldığı için XHTML 1.0 Transitional şu anda Web geliştirme için tavsiye edilen işaretleme dilidir. Bu dillerin kullanımı Belge Tipi Tanımı (Document Type Definition - DTD) aracılığıyla tanımlanır. Ziyaretçiler tarafından görülmeyen DTD, Web sayfasını oluşturan kodun en başında bulunur. DTD, sayfada kullanılan işaretleme dilinin sözdizimini belirtir, yani Web tarayıcısının veya Web erişim cihazının sayfayı nasıl yorumlayacağını tanımlar. 20 DERS 1