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.
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.
10 DERS 1
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
Dreamweaver varsayılan durumda, siz farklı bir tip seçmediğiniz müddetçe
bütün yeni HTML belgelerinde Belge Tipi Tanımı (Document Type Definition
- DTD) olarak XHTML 1.0 Transitional’ı kullanır. Yeni bir belgenin Belge Tipi
Tanımı’nı New Document iletişim kutusunun alt tarafındaki DTD
menüsünden istediğiniz tipi seçerek değiştirebilirsiniz. Bu kitapta varsayılan
seçenek olan XHTML 1.0 Transitional’ı kullanacaksınız (DTD ayarıyla
oynamayın). File > Convert komutunu ve kullanmak istediğiniz tipi seçerek
HTML ile XHTML arasında dönüştürme işlemi yapabilirsiniz.
Siz Create düğmesine tıkladıktan sonra başlıksız yeni bir XHTML belgesi açılacak ve
Başlangıç Sayfası otomatik olarak kapanacaktır.
Create New sütunundan dosya tipini (meselâ bu uygulamada
oluşturduğunuz HTML gibi) seçerek doğrudan Başlangıç Sayfası’ndan da
yeni bir belge oluşturabilirsiniz. Bu işlemi yaptıktan sonra seçtiğiniz tipte yeni
bir belge açılacak ve Başlangıç Sayfası kapanacaktır.
2. New Document iletişim kutusundaki General sekmesine tıklayın ve kategori
listesinden Basic Page’i seçin. Basic Page listesinden HTML’i seçin ve Create
düğmesine tıklayın.
3. File > Save komutunu seçin ve Lesson_01_Basics içindeki html_docs klasörünü
bulun. Yeni dosyayı bu klasöre kaydedeceksiniz. Save As (Macintosh’ta) ya da
File Name (Windows’ta) alanına yoga.html yazın ve Save düğmesine tıklayın.
Save As
iletişim
kutusu
Dreamweaver 8 Temellerİ 21
Sayfanızı kaydetmek için sayfanın üzerine metin ya da resim yerleştirmeyi beklemeyin.
Yeni belgeleri açar açmaz sayfalarınızı kaydedin. Dosyanızı zamanında kaydettiyseniz,
resim ya da başka medya elemanları aktardığınızda bu elemanların sitenizdeki
konumlarını gösteren bütün yollar düzgün olarak oluşturulacaktır. Eğer belgenizi
kaydetmezseniz, eklediğiniz elemanın konumunu sabit diskinize göre tanımlayan ve
file:// şeklinde başlayan bir yol kullanılacaktır. Belgeyi kaydetmeden bir nesne eklemeye
kalktığınızda Dreamweaver bu eleman için file:// şeklinde bir yol kullanması gerektiğini
belirterek sizi uyaracaktır. Bu “file://” yolları uzak sunucularda çalışmaz, çünkü dosyaların
bilgisayarınıza özgü konumlarını tanımlarlar.
Belgenizi kaydetmek için Cmd+S (Macintosh’ta) ya da Ctrl+S (Windows’ta)
klavye komutunu kullanabilirsiniz. Belgelerinizi sık sık kaydedin. Böylece
herhangi bir sebeple bilgisayarınızın çökmesi durumunda yaşayacağınız bilgi
kaybı fazla olmaz.
Macintosh kullanıcıları için: Dreamweaver, HTML belgesinin File Name metin
alanındaki dosya adının sonuna otomatik olarak.html uzantısını ekler. Bu uzantıyı aynen
bırakabilir ya da belgeyi farklı şekilde kaydetmek için başka bir uzantı seçebilirsiniz.
Windows kullanıcıları için: Dreamweaver, HTML belgelerini kaydederken File Name
metin alanında herhangi bir dosya uzantısı belirtilmemişse dosya adının sonuna otomatik
olarak .html uzantısını ekler. Dosya uzantısını siz de belirleyebilirsiniz.
Dreamweaver, oluşturduğunuz her dosyaya varsayılan dosya uzantısını ekler.
Örneğin bir CSS dosyası oluşturuyorsanız, Dreamweaver dosya adına .css
uzantısını ekleyecektir.
Belgelerinizi her zaman .html uzantısıyla kaydetmelisiniz. Eğer Dreamweaver varsayılan
olarak .htm olarak uzantısını kullanırsa, Dreamweaver > Preferences (Macintosh’ta) ya
da Edit > Preferences (Windows’ta) komutunu ve ardından New Document kategorisini
seçerek bu varsayılan uzantıyı değiştirebilirsiniz. Varsayılan dosya uzantısı bir metin
kutusunda görüntülenir. Kitaptaki uygulamalarda ve CD-ROM’daki materyalde .html
uzantısı kullanılmıştır ve uygulamalarda varsayılan uzantıyı kullanacağınız kabul
edilmiştir.
.htm uzantısı, Windows’un sadece 3 karakterlik dosya uzantılarıyla
çalışabildiği eski zor günlerden kalmıştır. Hazırladığınız site üzerinde Windows
3.1 kullanan biri çalışmayacaksa .htm uzantısını kullanmanın bir gereği yoktur,
çünkü bu yaklaşım pek profesyonelce kabul edilmez.
22 DERS 1
Save As metin alanında yeni belgelere varsayılan olarak Untitled-1.html adı verilir. Burada
kullanılan numaralar, oluşturulan her yeni belge için sırayla artar.
New Document ve Save seçenekleri Standard araç çubuğunda da
mevcuttur. Bu araç çubuğunu View > Toolbars > Standard komutunu seçerek
açabilirsiniz. Varsayılan Document araç çubuğu dışındaki araç çubukları
sadece siz onları etkin belgeye taşıdığınızda ya da eklediğinizde görünürler.
Değişiklikler diğer belgelere yansıtılmaz.
Dosya Adlandırma Standartları
Bir Web sunucusunda kullanılacak dosyaları adlandırma işleminin, sabit diskinizdeki
dosyaları adlandırmaya göre biraz farklı olduğunu unutmayın. Sunucuda hangi işletim
sisteminin kullanıldığını bilmeniz işinizi kolaylaştıracaktır. Bunun için en çok kullanılan
sistemler Unix, Linux, Windows NT ve Mac OS’tur. Windows’taki adlandırma yapısı, diğer
*NIX tabanlı işletim sistemlerinden farklıdır. Örneğin Unix BÜYÜK/küçük harflere duyarlıdır.
Yani dosyam.html ile DOSYAM.HTML aynı değildir. Dosyalarınızın isimlerini sadece
küçük harflerle yazarak dosya adlandırma işlemini basitleştirmiş ve tutarlılık sağlamış
olursunuz. Dosyalarınızı adlandırırken sadece alfabedeki harfleri (A-Z) ve rakamları (0-9)
kullanmalısınız. Aşağıda hem dosya, hem de klasörlerin isimlerinde uymak gereken diğer
önemli adlandırma standartları verilmiştir.
• Boşluklar: Dosya isimlerinde asla boşluk kullanmayın. Sözcükleri ayırmanız gerekiyorsa, boşluğun işlevini görmesi için alt çizgi veya tire karakterini kullanın. Boşluk
karakteri kullandığınızda sorun çıkabilir, çünkü tarayıcılar boşluk karakterlerini %20
karakterleriyle değiştirirler.
• Özel karakterler: ?, %, *, > ya da / gibi özel karakterleri kullanmayın. Virgül kullanmayın.
• Sayılar: Dosya isimlerinin en başında sayı kullanmaktan kaçının.
• Uzunluk: Klasör ve dosya isimlerinin olabildiğince kısa olmasına gayret edin. Klasör
isminin sayfaya erişmek için yazdığınız URL’in bir parçası haline geldiğini unutmayın.
Araçları Tanıyalım
Web sayfası oluşturma işinde daha fazla ilerlemeden önce Dreamweaver 8 arabiriminde
yer alan ve verimli bir şekilde Web siteleri oluşturmanızı sağlayan çeşitli araçları ve
panelleri tanımanız gerekir.
1. İmleci belge penceresinin ve Document araç çubuğunun üzerine getirin. İmleci
bir süre belirli bir düğmenin üzerinde tutun ve düğmenin adının belirmesini
bekleyin.
Tasarım ve kod yazma çalışmalarınızın büyük bir kısmı belge penceresi içinde
gerçekleşecektir. Bu alan sayfanın gövde kısmı olarak bilinir ve burada bir Web sayfasını
oluşturan çeşitli elemanları ekleme, düzenleme ve silme işlemlerini yapabilirsiniz.
Dreamweaver 8 Temellerİ 23
Siz çalışmaya devam ederken belge penceresi sayfanızın bir Web sayfasında nasıl görüneceği
hakkında yaklaşık olarak size bir fikir verir. Burada yaklaşık olarak bir fikir edinirsiniz, çünkü
tarayıcıların Web sayfalarını yorumlama şekilleri arasında bazı farklar vardır.
Design görünümü
Split görünümü
Code görünümü
Belge penceresi
Belgenin başlık çubuğu
Title metin alanı
Document
araç
çubuğu
Etiket
Seçici
Dosya ismi olan yoga.html (önceki uygulamada bu sayfayı bu isimle kaydetmiştiniz) başlık
çubuğunda belirecektir (Windows’ta dosya adı, belge penceresinin üst kısmında bir sekmede
gösterilir; bkz. Sayfa 31’deki resim). Varsayılan durumda bu sayfa başlangıçta Document araç
çubuğundaki Title metin alanında gösterildiği gibi Untitled Document olarak adlandırılır.
View > Toolbars komutu kullanılarak görünür ya da gizli hale getirilebilen Document araç
çubuğunda çeşitli işlemlere kolayca erişebilmenizi sağlayan bazı düğmeler ve menüler bulunur.
Varsayılan durumda araç çubuğu belge penceresinin bir parçasıdır. Windows kullanıcıları belge
penceresinden ayırmak için araç çubuğunun sol kenarındaki taşıma noktasına (gripper) çift
tıklayabilir veya bunu sürükleyebilirler. Böylece o da ayrı bir panel halinde gelir.
Dreamweaver’da üç tane görünüm modu mevcuttur: Design, Code ve Split. Split modunda
hem Design görünümü, hem de Code görünümü yer alır. Bu modlara ait düğmeler Document
araç çubuğunun sol tarafında yer almaktadır. İmleci bu düğmelerin üzerine getirip bir süre
tutarak görünüm modlarının isimlerini görebilirsiniz. Burada Design görünüm modunu
kullanmanız gerekiyor. Etkin düğme vurgulu hale gelerek Dreamweaver’ın sayfayı o görünüm
modunda görüntülediğini gösterir. Ders 16’da Code ve Split görünümlerinde çalışacaksınız.
Belge pencereniz birinde kod bulunan iki bölmeye ayrılmışsa ya da kod içeren tek bir bölme
24 DERS 1
halindeyse Document araç çubuğunun üzerinde bulunan Design View simgesine
tıklamanız gerekir.
Belge penceresinin sol alt köşesinde Etiket Seçici (Tag Selector) düğmesi bulunur. Etiket
Seçici daima <body> etiketinden başlar ve hiyerarşik olarak, o anda seçili durumdaki
elemana uygulanan HTML etiketlerini görüntüler. Etiket Seçici, bu elemanlara karşılık gelen
HTML etiketlerinin aracılığıyla kod hiyerarşisinde hızlı bir şekilde hareket ederek hangi
elemanlar çalıştığınızı görmenizi ve diğer elemanları kolayca seçmenizi sağlar. Etiket Seçici
ile çalışmaya alışmak özellikle Ders 6’da tablo kullanmaya başladığınızda yardımcı olacaktır.
Etiket Seçici’yi göremiyorsanız belge pencerenizin boyutlarını küçültmeyi
deneyin. Etiket Seçici Properties denetçisinin (Özellik Denetçisi) arkasında
gizlenmiş olabilir.
Kitaptaki derslerde ilerledikçe belge penceresindeki pek çok düğmeye ve özelleştirilebilir
seçeneğe aşinalık kazanacaksınız.
2. Insert araç çubuğunun sol ucundaki açılır menüde Common’ın seçili olduğundan
emin olun ve imleci, varsayılan konumu ekranınızın üst kısmı olan çubuğun üzerine
getirin. Adını görmek için düğmelerden birinin üzerinde imleci bir süre tutun.
Hyperlink Email link
Menü:
Named ­anchor
Common
Table
(Varsayılan
Etkin
Insert ­Div‑tag
Grup)
Images: ­Image
Tag ­chooser
İlave araçlar göstergesi
Media
Date
Templates
Comment
Server-Side ­Include
Insert araç çubuğu; resimler, tablolar, özel karakterler, formlar ve HTML gibi sayfanıza
ekleyebileceğiniz pek çok nesne ya da elemanı içerir. Bunlar tiplerine göre sekiz gruba
ayrılmıştır: Common, Layout, Forms, Text, HTML, Application, Flash Elements ve
Favorites. Etkin grubun ismi menüde görüntülenir. Varsayılan durumda Common grubu
etkindir. Menüyü kullanarak farklı bir nesne grubuna geçebilirsiniz. Bu gruplardaki farklı
nesnelerin çoğunun ilâve araçlar, seçenekler ve ilişkili diğer nesnelerle birlikte kendi
özel menüsü vardır ve bunlara küçük siyah bir okla erişilir. Insert araç çubuğundaki
menüde yer alan son seçenek Show As Tabs adını taşır ve Insert araç çubuğunu,
Dreamweaver 8 Temellerİ 25
çubuğun üst kısmında her bir kategorinin sekmesi görüntülenecek şekilde değiştirir. Menü
formatına dönmek için Insert araç çubuğunun sağ üst köşesindeki bağlam menüsünden
Show As Menu komutunu seçin. İstediğiniz görüntüleme yöntemini (sekme veya menü)
seçebilirsiniz.
Sekmeli Insert araç çubuğu
Bağlam menüsü
Kitap içinde “nesneler” ve “elemanlar” sözcüklerinin birbirinin yerine
kullanıldığını göreceksiniz. “Nesne” sözcüğü elden geldiğince düğmeleri
anlatmak için, “eleman” sözcüğü de belge penceresinde beliren bileşenler için
kullanılmıştır.
Bir eleman eklemek için ilgili nesneye ait simgeyi Insert araç çubuğundan belge
penceresinde bunun görünmesini istediğiniz konuma sürükleyebilirsiniz. Önce ekleme
noktasını belge penceresinde nesnenin görünmesini istediğiniz yere getirip sonra panelde
bu nesnenin simgesine tıklayabilirsiniz. Simgeye tıkladığınızda eleman belgede ekleme
noktasının bulunduğu konumda belirecektir.
Sürekli kullandığınız pek çok nesneyi, araç çubuğuna sağ tıklayıp (tek düğmeli
fareyle çalışan Macintosh kullanıcıları aynı seçeneklere ulaşmak için
Control+tıklama yöntemini kullanabilirler) Customize Favorites komutunu
seçerek Insert araç çubuğunun Favorites grubuna taşıyabilirsiniz. Açılan
Available Objects menüsünden istediğiniz öğeyi seçin ve Available Objects ile
Favorite Objects listelerinin arasındaki çift ok simgeli düğmeye tıklayın.
Favorite Objects listesinin üstündeki yukarı ve aşağı ok tuşlarını kullanarak
nesnelerin sırasını ayarlayabilirsiniz. Bu iletişim kutusunu kullanarak Favorites
grubundaki nesneleri silmeniz ve daha iyi organize etmek için nesnelerin
arasına ayırıcılar eklemeniz de mümkündür.
3. İmleci, normalde ekranınızın alt kısmında yer alan Properties denetçisinin üzerine
getirin. Adını görmek için düğmelerden birinin üzerinde imleci bir süre tutun.
Properties denetçisini bir belgedeki seçili metinlerin, resimlerin, tabloların ve diğer
nesnelerin niteliklerini görmek ve düzenlemek için kullanırsınız. Properties denetçisi
bağlama duyarlıdır. Yani üzerinde görüntülenen nitelikler, belge penceresinde seçilen öğeye
bağlı olarak değişir. Properties denetçisini genişletmek ya da toparlamak için panelin sağ
26 DERS 1
alt köşesindeki genişletme okuna tıklayın. Properties denetçisi toparlanmışsa, siz paneli
genişletmeden görünmeyen ilave özellikler olabilir.
Windows kullanıcıları denetçiyi sadece ismi görünecek şekilde küçültebilir ve
görüntülenen alanı büyütebilirler.
Properties denetçisi
Genişletme/Toparlama düğmesi
Windows kullanıcıları ayrıca belge penceresi ile Properties denetçisi
arasında bulunan yatay kenarlıktaki ok düğmesini sürükleyerek Properties
denetçisini (ve daha sonra bu alanda görüntülenen ilave panelleri) yeniden
boyutlandırabilirler. Ok düğmesine tıkladığınızda tüm alan toparlanır, yeniden
açmak için düğmeye tekrar tıklamanız yeterli olacaktır. Programın
Macintosh’taki arabiriminde yatay kenarlık yoktur.
Panellerle ve Belgelerle Çalışmak
Dreamweaver’daki panellerin büyük bir kısmı kenetlenmiş bir halde, işlevlerine göre
sekmeli pencereler şeklinde panel gruplarında yer alır. Varsayılan panel grupları
CSS, Application, Tag Inspector ve Files’tır. Panellere bu gruplardan ya da Windows
menüsünden erişebilirsiniz. Panel grupları, en çok kullandığınız panellere kolayca
erişmenizi ya da bunları gizlemenizi mümkün kılar. Kenetleme işlemi, ekran alanını
maksimum büyüklüğe getirmenizi ve aynı zamanda ihtiyacınız olan panellere çabucak
erişmenizi sağlar. Her panel grubu, etkin paneli ve içindeki diğer panellerin sekmelerini
görüntüleyecek şekilde genişletilebilir ya da sadece grubun adı görünecek şekilde
küçültülebilir.
Dreamweaver’ı bu derse başlamadan önce açtıysanız, paneller aynen programı en son
kapattığınızda bıraktığınız konumlarında olacaktır. Window menüsünde bir öğenin
yanındaki onay işareti, o panelin ya da araç çubuğunun panel grubunda seçili durumda ve
etkin (görünür) olduğunu gösterir.
Dreamweaver 8 Temellerİ 27
1. Henüz açık durumda değilse CSS panel grubunun başlık çubuğundaki oka
tıklayarak grubu genişletin.
CSS panel grubu, varsayılan olarak panel gruplarının en üstünde yer alır. CSS panel grubu
genişletildiğinde CSS Styles panelini görürsünüz. (Bu grupla Ders 4’te çalışacaksınız.)
Panelin sağ üst köşesinde bağlam menüsüne ait düğme yer alır ve bu düğme, panel grubu
küçültüldüğünde görünmez.
CSS panel grubunun başlık çubuğu
Panel taşıma noktası
Bağlam menüsü
CSS Styles panel sekmesi
Window menüsünde gizli panellerin adının yanında onay işareti bulunmaz. Gizli
durumdaki bir paneli görüntülemek isterseniz Window menüsünden bu paneli seçin.
Seçtiğiniz panel o anda kullanılmayan bir panel grubunda bulunuyorsa hem panel, hem
de bunu taşıyan panel grubu ekrana gelecektir. İstenen paneli içeren panel grubu görünür
durumda ama küçültülmüş ise, Window menüsünden bu paneli seçtiğinizde grup
genişleyecek ve söz konusu panel görüntülenecektir.
Kimi zaman bir panel diğer bir panelin ya da belge penceresinin arkasında
kalabilir. Bunun sebeplerinden biri ekran çözünürlüğünün değiştirilmesi
olabilir. Bir panel gizlenmiş durumdaysa ve Window menüsünden
seçtiğinizde görüntülenmiyorsa, açık durumdaki bütün panelleri varsayılan
konumlarına getirmek için Window > Arrange Panels (Sadece Macintosh’ta)
komutunu seçmeniz gerekebilir. Ayrıca hem Macintosh, hem de Windows
kullanıcıları, tüm araçları ve panelleri orijinal konumlarına getirmek için
Window > Workspace Layout > Default (Windows’ta Designer) komutunu da
kullanabilirler. Bu durumda Insert araç çubuğu ekranın sol üst köşesine,
Properties denetçisi ekranın alt kısmına ve açık durumdaki diğer tüm
paneller de ekranın sağına gidecektir.
28 DERS 1
2. İmleci, iki panel grubunu ayıran çizginin alt kısmına getirerek burada tutun. İmleç
düşey iki oklu bir simge haline geldiğinde tıklayın ve panellerin boyunu ayarlamak
için tıklayıp imleci yukarı ya da aşağı doğru sürükleyin.
Çalışırken daha fazla bilgi görüntülemek ya da diğer paneller ve belge penceresi için yer
açmak isterseniz panelleri yeniden boyutlandırmanız gerekebilir.
Windows kullanıcıları ayrıca düşey kenarlıktaki ok düğmesini sürükleyerek
kenetlenmiş durumdaki bütün panel gruplarının tüm alanının genişliğini yeniden
boyutlandırabilir. Ok düğmesine tıkladığınızda bütün kenetlenme alanı daraltılır, tekrar
tıkladığınızda yeniden açılır.
Macintosh arabiriminde bu düşey kenarlık yoktur. Macintosh kullanıcıları kenetlenmiş
durumdaki panel gruplarının genişliğini, panel gruplarının sağ alt köşesindeki yeniden
boyutlandırma düğmesini üzerine tıklayıp sürükleyerek değiştirebilirler.
Kenetlenmiş
durumdaki
paneller
(Macintosh’ta)
Panel alanını
ayarlamada
kullanılan
düşey kenarlık
(Windows’ta)
Kenetlenmiş
durumdaki
paneller
(Windows’ta)
Panelin büyüklüğünün ayarlanması
Yeniden
boyutlandırma
kontrolü
(Macintosh’ta)
Dreamweaver 8 Temellerİ 29
Dreamweaver’ın panellerine ve araçlarına aşinalık kazandıktan sonra panelleri ve panel
gruplarını yeniden düzenleyerek arabirimi ihtiyaçlarınıza göre özelleştirebilirsiniz.
Oluşturduğunuz özel çalışma alanlarını Window > Workspace Layout > Save Current
komutunu seçerek kaydedebilirsiniz. Ayrıca Workspace Layout alt menüsü iki monitörle
(Dual Screen) çalışan geliştiriciler için bir çalışma alanı ile birlikte Manage seçeneği
aracılığıyla çalışma alanlarını yeniden adlandırma ve silme imkânı sunar.
Herhangi bir panel grubunu kenetleme alanından ayırarak kayar hale
getirebilirsiniz. Bir panel grubunu kayar hale getirmek için imleci panel
grubuna ait başlık çubuğunun sol tarafında noktalarla gösterilen panel
taşıma noktasının üzerine getirin. İmleç bir ele (Macintosh’ta) ya da artı
imlecine (Windows’ta) dönüştüğünde tıklayıp sürükleyerek panel grubunu
pencerenin dışına çıkarıp bırakın. Kenetlenmiş durumdaki panellerin dışına
doğru sürüklerken, siz bırakana kadar panel grubunun silik bir görüntüsü
belirir. Bağlam menüsü simgesine tıklayıp Rename Panel Group komutunu
seçerek bu yeni pencereyi ya da panel grubunu yeniden adlandırabilirsiniz.
Bir panel grubunu tekrar kenetlenmiş durumdaki diğer grupların üzerine
sürüklerken bırakmadan önce panel grubunun silik bir görüntüsünü ve panel
grubunun bulunduğu yerde kalın ve koyu renkli bir çizgi görürsünüz. Ayrıca
diğer grupların altında ya da üstünde bulunan gruplardan herhangi birini
taşımak üzere taşıma noktasını kullanarak panel gruplarının sırasını yeniden
düzenleyebilirsiniz. Farklı gruplara taşıyarak panellerin sekme düzenini
değiştirmek isterseniz, sekmesine tıklayarak bir paneli seçin ve bağlam
menüsünden Group (panel adı) with komutunu seçin.
Bu kitaptaki derslerde Dreamweaver 8’deki panellerin ve panel gruplarının sıralarında
ve isimlerinde değişiklik yapmadan varsayılan panel konfigürasyonunu kullandığınız
kabul edilmiştir. Eğer araçlardan herhangi birini yeniden düzenlediyseniz, Window >
Workspace Layout > Default (Macintosh’ta) ya da Window > Workspace > Designer
(Windows’ta) komutunu seçerek varsayılan konfigürasyona dönebilirsiniz.
3. File > New komutunu seçin ve General sekmesinin Basic page kategorisinden
HTML’i seçin.
Geçerli belge penceresinde yeni bir sekmeyle yeni bir XHTML belgesi açılacaktır.
30 DERS 1
Belge penceresi sekmeleri
Ekranı Kapla/Aşağı Geri Getir (Sadece Windows’ta)
Windows kullanıcıları için: Belgeleri görüntülemek için Cascade (Basamaklı), Tile
Horizontally (Yatay döşe) ve Tile Vertically (Dikey döşe) adında üç seçenek vardır. Aynı
anda birden fazla belgeniz açıksa Cascade seçeneği, çalışma alanının belge penceresi
kısmı içinde bu pencerelerin birbiri üzerinde kayar durumda olmasını sağlar. Tile
Horizontally seçeneği, belge pencerelerini yatay olarak üst üste dizer. Tile Vertically
seçeneği ise belge pencerelerinin düşey olarak yan yana dizilmesini sağlar. Bu seçeneklere
Window menüsünden erişebilirsiniz. Ayrıca Tile görünümüne belge penceresinin sağ üst
köşesindeki Ekranı Kapla (Maximize) düğmesine (programa ait Ekranı Kapla düğmesine
değil) tıklayarak da geçebilirsiniz. Bir belge penceresinin Ekranı Kapla düğmesine tekrar
tıkladığınızda sekmeli görünüme geri dönersiniz.
Macintosh kullanıcıları için: Belgeleri görüntülemek için Cascade, Tile ve Combine
As Tabs adında üç seçenek vardır. Cascade seçeneği belgelerin birbiri üzerinde kayar
durumda görünmesini sağlar. Tile seçeneği belgeleri ayrı ayrı pencerelerde yan
yana görüntüler. Combine As Tabs varsayılan yerleştirme seçeneğidir. Bu seçeneği
kullandığınızda yeni belgeler her biri için birer sekme olacak şekilde, aynı pencere içinde
geçerli belgeler olarak görüntülenir. Sekmeli belgelerden istediğinizi, ilgili sekmeye sağ
tıklayıp (Windows’ta) ya da Control düğmesi basılı durumdayken tıklayıp Move To New
Window komutunu seçerek açabilirsiniz.
Dreamweaver 8 Temellerİ 31
Sayfaya Bir Başlık Atamak
Oluşturduğunuz her HTML belgesinin bir başlığı olmalıdır. Bu başlık öncelikle belgenin
tanınması için kullanılır. Web tarayıcısının başlık çubuğunda görüntülenir, sayfanın
içeriğini gösterir ve Sık Kullanılanlar (Favorites) listelerinde isim olarak görünür. Sitenin
adıyla başlayan, belgenin kullanım amacını açıklayan kısa ve bilgilendirici bir ifade
seçmeniz gerekir. Oluşturduğunuz her sayfaya metin ya da resim eklemeden önce başlık
atama alışkanlığını edinin. Bunu yapmayı unutursanız Dreamweaver dosyayı varsayılan
olarak Untitled Document olarak adlandıracaktır.
Sayfanıza bir başlık atamak için, yoga.html belgesinin sekmesine tıklayın ve Document araç
çubuğundaki Title metin alanına Yoga Sangha Project yazın. Return (Macintosh’ta) ya da
Enter (Windows’ta) tuşuna basın veya yoga.html belgesinin içine tıklayın.
Eğer Title metin alanının yer aldığı Document araç çubuğunu göremiyorsanız
View > Toolbars > Document komutunu seçin.
Title metin alanında başlangıçta Untitled Document ifadesi yer alır. Burada bu yer tutucu
başlığı proje sitesindeki bir sayfanın başlığıyla değiştiriyorsunuz.
Belgenizin başlığını Page Properties iletişim kutusunun Title/Encoding
kategorisindeki Title metin alanını kullanarak da belirleyebilirsiniz. Page
Properties iletişim kutusuna erişmek için Modify > Page Properties
komutunu seçin.
32 DERS 1
Önizlemede Kullanılacak Web Tarayıcılarının
Belirlenmesi
Web sayfaları geliştirirken çalışmalarınızın farklı Web tarayıcılarında (Internet Explorer
ve Safari gibi) nasıl göründüğünü sürekli test etmeniz gerekir. Dreamweaver’ın belge
penceresindeki görüntü, sayfalarınızın nasıl görüneceği hakkında yaklaşık olarak bir fikir
verir. Her Web tarayıcısı Web sayfalarını görüntülemede bazı farklılıklara sahiptir. Bunlardan
bazıları önemsiz olsa da, arada bazı çok büyük farklılıklar da olabilir. Aynı Web tarayıcısının
farklı sürümleri arasında bile farklılıklar görebilirsiniz. Sitenizi farklı Web tarayıcılarında ve
farklı işletim sistemlerinde ne kadar sık test ederseniz ve düzenli olarak sayfalarınızda uygun
değişiklikleri yapma alışkanlığına ne kadar sadık kalırsanız, sitenizin ziyaretçilerinin sayfaları
istediğiniz şekilde göreceğinden de o kadar emin olursunuz.
Dreamweaver’daki tercih ayarlarını (Preferences) kullanarak sitenizin sayfalarını önizlemek
için hangi Web tarayıcılarını kullanacağınızı belirleyebilirsiniz. Önizleme işlemini
hızlandırmak için her biri için bir klavye kısayoluyla birlikte biri birincil, diğeri de ikincil
olmak üzere iki tarayıcı tanımlayabilirsiniz.
1. File > Preview in Browser > Edit Browser List komutunu seçin.
Preferences iletişim kutusunun “Preview In Browser” bölümünü açmak için
alternatif olarak Dreamweaver > Preferences (Macintosh’ta) ya da Edit >
Preferences (Windows’ta) komutunu, ardından da iletişim kutusunun sol
tarafında yer alan Category listesinden Preview In Browser’ı seçebilirsiniz.
Preferences iletişim kutusunu açmak için Command+U (Macintosh’ta) veya
Ctrl+U (Windows’ta) klavye kısayolunu da kullanabilirsiniz.
Preferences iletişim kutusu açılarak Preview In Browser seçeneklerini görüntülenecektir.
Dreamweaver burada bilgisayarınızda bulunan bir ya da daha fazla Web tarayıcısını
otomatik olarak listeleyebilir.
Windows’ta Internet Explorer listede iexplore ya da iexplore.exe olarak
görüntülenebilir.
Dreamweaver 8 Temellerİ 33
Tarayıcı listesinde bir tarayıcı adına tıkladığınızda, listenin altındaki onay kutuları bunun
birincil tarayıcı mı, yoksa ikincil tarayıcı mı olduğunu gösterir. Bilgisayarınızda ikiden fazla
tarayıcı yüklüyse, birincil ya da ikincil tarayıcı olmayan seçeneklerde iki kutu da işaretlenmeden
bırakılır.
Preview Using Temporary File seçeneği varsayılan durumda listedeki tüm tarayıcılar için
işaretsiz durumdadır. Bu seçeneği işaretlediğinizde sayfaların bir Web tarayıcısında önizlenmesi
sırasında Dreamweaver geçici dosyalar oluşturur.
2. Tercihleri gözden geçirdikten sonra OK düğmesine tıklayarak iletişim kutusunu kapatın.
Gerektiğinde listeye tarayıcı ekleyebilir ya da mevcut tarayıcıları değiştirebilir veya silebilirsiniz.
• Tarayıcı Eklemek: Listeye bir tarayıcı eklemek için artı (+) düğmesine tıklayın. İletişim
kutusu açıldığında sabit diskinize göz atarak bir Web tarayıcı uygulaması seçin. Eğer
sayfalarınızı önizlerken Option+F12 (Macintosh’ta) veya F12 (Windows’ta) tuşlarına
tıkladığınızda bu tarayıcının açılmasını istiyorsanız, Primary Browser onay kutusunu
işaretleyin. Belgelerinizi önizlemek için Command+F12 (Macintosh’ta) ya da Ctrl+F12
(Windows’ta) tuşlarını kullandığınızda bu tarayıcının açılmasını istiyorsanız, Secondary
Browser onay kutusunu işaretleyin. (Bu kitaptaki dersleri tamamlarken sayfaları sık sık
önizlemeniz gerekecek. Dolayısıyla bu kısayollar size zaman kazandırabilir.)
Tarayıcıda önizlemeyle ilgili klavye kısayollarının çalışabilmesi için fonksiyon
tuşlarınızın etkinleştirilmiş olması gerekir. Genelde fonksiyon tuşları varsayılan
olarak etkin durumdadır. Eğer çalışmıyorlarsa işletim sisteminizin tercihler
bölümünü kontrol edin. Eğer fonksiyon tuşlarınız sistem fonksiyonlarını yerine
getiriyorsa Dreamweaver’a ait fonksiyon tuşlarını kullanmak için Fn tuşuna
basmanız ya da sistem tercihlerinizi uygun şekilde ayarlamanız gerekebilir.
• Tarayıcı Silmek: Listedeki tarayıcılardan birini silmek isterseniz, listeden ilgili tarayıcının
adını seçin ve eksi (-) düğmesine tıklayın.
Bir tarayıcıyı değiştirmek isterseniz, listeden ilgili tarayıcının adını seçin. Sonra da
Edit düğmesine tıklayarak yeni tarayıcının bilgisayarınızda bulunduğu konuma gidin.
3. Sayfayı birincil Web tarayıcınızda önizlemek için yoga.html belge sekmesine tıklayın
ve F12 tuşuna basın.
Önizleme işlemi için File > Preview in Browser komutunu seçip ardından da alt
menüyü kullanarak önizlemede kullanmak istediğiniz tarayıcıyı seçmeniz de
mümkündür. Ayrıca Document araç çubuğunda bulunan Preview/Debug In
Browser adındaki düğmeye tıklayıp açılan menüden önizlemede kullanmak
istediğiniz tarayıcıyı seçebilirsiniz.
Preview/Debug in Browser düğmesi
34 DERS 1
Preferences iletişim kutusundaki Preview In Browser bölümünde birincil Web tarayıcısı
(Primary Browser) olarak tanımlanan tarayıcı açılacak (ya da etkin uygulama halini
alacak) ve bir tarayıcı penceresinde yoga.html dosyasını görüntüleyecektir. Tarayıcının
başlık çubuğundaki Yoga Sangha başlığına dikkat edin.
Bu aşamada Web tarayıcınızda boş bir sayfa göreceksiniz. Artık içerik eklemeye hazırsınız.
Bir sonraki derste bu dosyaya metin ekleyeceksiniz.
Bu derste daha önce gördüğünüz Başlangıç Sayfası’ndaki Don’t show again
onay kutusunu işaretlemediğiniz sürece, bütün açık belgeleri kapadığınızda
Başlangıç Sayfası tekrar belirecektir.
4. yoga.html belgesini kaydedin. Başlıksız belgeyi kapatın ve kaydetmeyin.
Bir sonraki ders için yoga.html belgesini açık bırakabilirsiniz.
Temel Konuları Tek Başınıza Keşfedin
Bir Web sitesinin nasıl planlandığını ve Dreamweaver’da bir site oluşturup hem yeni, hem
de mevcut sayfalarla nasıl çalışacağınızı öğrendiğinize göre bu becerileri ve teknikleri
kendi Web sitenize (sitelerinize) uygulamaya hazırsınız demektir.
1. Kendi siteniz için planlama aşamalarını ve daha önce gördüğümüz soruları
kullanarak araştırma işlemini tamamlayın ve bir yaratıcı brif hazırlayın.
Bu süreçte çalışırken ayrıntılara dikkat etmeyi unutmayın. Sitenizi geliştirme işlemine şu
işlemleri yaparak başlayın:
• Sitenizin kullanım amacını, hedeflerini ve hitap edeceği pazarı düşünüp değerlendirin
• Hitap edeceğiniz kitlenin kim olacağını ve bu insanların ihtiyaçlarının neler olduğunu
belirleyin
• Hazır durumdaki içerik bileşenlerinin ve öğelerin neler olduğunu kontrol edin
• Hangi elemanların oluşturulması gerektiğini belirleyin
• Sitenin temel yapısını hazırlayın
• Dosya yapısını oluşturun
Yaratıcı brif, 1. aşamada siteyle ilgili yapılan tüm araştırma ve çalışmaları düzenlediğiniz
bir belgedir. Bu, sonraki aşamalarda daha koordine bir şekilde çalışmanızda size yardımcı
olabilir ve oluşturduğunuz sitenin geliştirilme sürecini daha kolay takip etmenizi sağlar.
2. Dreamweaver’da sitenizi hazırlamak için Site Definition iletişim kutusunu
kullanın.
Site hazırlama sürecinde, bütün site dosyalarınızı saklayacağınız yerel kök klasörü
oluşturulur.
Dreamweaver 8 Temellerİ 35
3. New Document iletişim kutusunda yer alan başlangıç sayfalarını ve sayfa
tasarımlarını kullanarak yeni sitenizin içinde birkaç tane yer tutucu sayfa
oluşturun.
Bu sayfaları ileride içerik eklemek üzere yer tutucu olarak yerel kök klasörünüze
kaydedebilirsiniz.
Bu kaynaklara, Başlangıç Sayfası’ndaki Create From Samples bölümünden
bir kategori seçerek de erişebilirsiniz.
Derslerde ilerlerken, bu başlangıç sayfalarında karşınıza çıkan çeşitli elemanlarla
(bağlantılar, resimler ve CSS gibi) nasıl çalışacağınızı öğreneceksiniz.
Önerilen Kaynaklar
Kitap: Web ReDesign 2.0: Workflow that Works
Yazar: Kelly Goto ve Emily Cotler
Yayınevi: New Riders. © 2004
ISBN 0-7357-1433-9
Bu kitap, ister sıfırdan yeni bir site oluşturun, ister mevcut bir siteyi yeniden tasarlayın, bir
Web sitesi geliştirme sürecinde faydalanabileceğiniz harika bir bilgi kaynağıdır. Kitapta,
geliştirme süreci açık bir şekilde anlatılmakta ve çalışma akışını projenize en uygun
şekilde geliştirmek için faydalanabileceğiniz birçok araç ve teknik (örnekler, formlar,
kontrol listeleri ve çalışma sayfaları) sunulmaktadır.
Web: www.adobe.com/resources/techniques
Macromedia ile Web ReDesign: Workflow that Works kitabının yazarlarından biri
olan Kelly Goto tarafından ortak olarak hazırlanan bir Web kaynağı. Bu sitede Web
geliştirmenin her aşamasıyla ilgili birçok makale yer almaktadır. Ayrıca sitenin forum
köşesinde (Production Management Online Forum gibi) ilave kaynaklar da mevcuttur.
Kitap: Don’t Make Me Think: A Common Sense Approach to Web Usability
(İkinci Baskı)
Yazar: Steve Krug
Yayınevi: New Riders. © 2005
ISBN 0-3213-4475-8
Kullanım kolaylığı ve anlaşılırlık konularını temel alan “Kullanılırlık” özelliği, iyi bir Web
sitesi yaratmanın temel anahtarıdır. Web için kullanılırlık kavramının mantıklı yönlerinin incelendiği bu kitapta sitenin test edilmesi ve sitenin bütün özelliklerinin (sitede
dolaşma, yerleşim düzeni, içerik, vs.) hitap edilecek kitle tarafından kolayca kullanılıp
kullanılamayacağının belirlenmesiyle ilgili çeşitli yöntemler anlatılmaktadır.
36 DERS 1
Ne Öğrendiniz?
Bu derste şunları öğrendiniz:
• Dreamweaver’ı açtınız (Sayfa 4–5).
• Web sitesi geliştirme işleminin aşamalarını öğrendiniz (Sayfa 5–9).
• Bir Web sitesi oluşturmak için hazırlık yaptınız, bir yerel site hazırladınız ve yerel kök
klasörünü tanımladınız (Sayfa 10–18).
• Yeni bir sayfa oluşturdunuz ve uygun adlandırma standartlarını kullanarak belgeyi
kaydettiniz (Sayfa 18–23).
• Dreamweaver’ın Insert paneli, Properties denetçisi, belge penceresi bileşenlerini ve
diğer araçları, pencereleri ve panellerini tanıdınız (Sayfa 23–31).
• Sayfanıza bir başlık atadınız (Sayfa 32).
• Önizlemede kullanılacak Web tarayıcılarını belirlediniz ve sayfanızı test etmek için
klavye kısayollarını kullandınız (Sayfa 33–35).
Dreamweaver 8 Temellerİ 37