Bu derste, doğrudan kodlarla çalışacak ve süreci hızlandırmak için Snippet’ler ve Quick Tag Editor gibi özellikleri kullanacaksınız.
Kodları
Düzenlemek
Web sayfalarınızın oluşturulması için kullanılan kodları, bu kodların nasıl düzenlendiğini, hatta bunları sıfırdan başlayarak yazmayı (“elle kod yazma” olarak da bilinir) öğrendikten sonra, bu sayfalardaki elemanların birçoğu üzerinde daha fazla kontrol imkânına
kavuşacaksınız. Dreamweaver işin büyük kısmını üstlenerek, siz sayfalarınızı görsel olarak tasarlarken arka planda kodu oluşturur. Bununla birlikte, Dreamweaver sadece bir görsel editör değildir. Elle kod yazmak ve kodları düzenlemek için kullanılan kapsamlı bir araç ve kaynak setine de sahiptir. Bu özellikler, ileri seviyedeki programcıların hassas değişiklikler yapmalarına, belgelerindeki sorunları gidermelerine ve kod geliştirme
16
A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
konusundaki en son yenilikleri kullanmalarına (bu yenilikler Dreamweaver’daki özelliklerin gücünü aşsa bile) imkân verir.
Dreamweaver’ın tanımıyor olabileceği öğeleri tanıtabilmeniz ve kodların üzerinde sahip olduğunuz kontrol imkânı, onu hızla değişen Web geliştirme dünyasının gerisinde kalmadan kullanmaya devam edebileceğiniz çok esnek bir program haline getirir.
Dreamweaver’ı kullanmaya yeni başlıyor olsanız bile, bu kod özelliklerini kullanabilir ve kodlar hakkında bilgi edinmek için Dreamweaver’ın kod araçlarından ve kaynaklarından faydalanabilirsiniz. JavaScript, ColdFusion, ASP, JSP, XML ve daha pek çok farklı programlama diliyle çalışmak için Dreamweaver’ı kullanabilirsiniz. Bu derste, HTML (HyperText Markup Language) ile çalışacaksınız.
Bu derste, kodları düzenlemeyi ve bunları elle oluşturmanıza imkân sağlayan birçok aracı kullanmayı öğreneceksiniz. Bu dersin amacı, Dreamweaver’da bulunan kapsamlı kod düzenleme özelliklerine temel bir giriş yapmaktır. Bu araçların tam olarak
incelenmesi bu kitabın kapsamı dışındadır.
Bu derste elde edilen sonucu görmek isterseniz, Lesson_16_Code/Completed/Training klasöründeki training.html ve asana.html dosyalarını açın.
Neler Öğreneceksiniz?
Bu derste şunları öğreneceksiniz:
• Belge görünümleri arasında geçiş yapmayı öğreneceksiniz.
• HTML kodlarını düzenlemek için Code görünümünü kullanacaksınız.
• Code araç çubuğunu kullanacaksınız.
• Meta etiketleri ve HTML açıklamaları oluşturacaksınız.
• Tag Inspector’ı kullanacaksınız.
• Quick Tag Editor’ı kullanacaksınız.
• Snippet’ları kullanacaksınız.
• XHTML kodlarını temizleyeceksiniz.
• Bir Word HTML belgesindeki gereksiz etiketleri temizleyeceksiniz.
• Dreamweaver’ı geliştireceksiniz.
Yaklaşık Süre
Bu dersin tamamlanması yaklaşık 1 saat sürecektir.
Ders Dosyaları
Ortam Dosyaları:
Lesson_16_Code/Images/…(dosyaların tümü) Başlangıç Dosyaları:
Lesson_16_Code/Training/training.html Lesson_16_Code/Training/asana.html Tamamlanmış Proje:
Lesson_16_Code/Completed/Training/training.html Lesson_16_Code/Completed/Training/asana.html
Belge Görünümleri Arasında Geçiş Yapmak
Sayfalarınızı geliştirirken, Dreamweaver tarafından üretilen kaynak kodu görmeniz gerekebilir. Belki kayıp bir satır sonu ya da görünmeyen başka bir karakter, elde etmeye çalıştığınız sonucu bozuyor olabilir, ama bunu belge penceresinde bulamazsınız. Ama HTML kaynak koduna bakarak satır sonunu kolayca bulup kaldırabilirsiniz.
Dreamweaver, size belgelerinizi görüntülemeniz için üç seçenek sunar: Sayfaya eklemiş olduğunuz bütün nesneleri (metinler, resimler, tablolar vb.) gösteren Design görünümü; sadece HTML kaynak kodunu gösteren Code görünümü ve Code ile Design görünümlerinin bir kombinasyonu olan Split görünümü. Aşağıdaki uygulamada, bu görünümlerin her birini kullanma şansını bulacaksınız.
1. Lesson_16_Code/Training klasöründeki training.html belgesini açın.
Document araç çubuğu, Macintosh’ta belge penceresinin tepesinde, Windows’ta da belge penceresinin üstünde bağımsız bir panel olarak görünecektir.
Document araç çubuğu görünmüyorsa, View > Toolbars > Document komutunu seçin.
2. Document araç çubuğundaki Code düğmesine tıklayın.
View > Code komutunu seçerek de Code görünümüne geçebilirsiniz.
Code görünümünde, Web sayfasının görsel elemanlarını tarayıcı penceresinde olduğu şekilde görmezsiniz. Bunun yerine, bir metin editöründe HTML kodunu görürsünüz.
Document araç çubuğu, kodlarla ilgili olarak aşağıdaki kontrolleri içerir:
• Refresh Design View: Bu özellik, Design görünümünü (sayfanızın görsel temsili), Split görünümünü kullanırken Code görünümünde yaptığınız değişiklikleri yansıtacak şekilde günceller.
• View Options: Bu menü, Code görünümünü ayarlayan seçenekler içerir. Örneğin kodun her bir satırına satır numaraları ekleyebilir, sayfanın yatay olarak kaydırılmasının gerekmemesi için sözcük sarma (wrapping) özelliğini etkinleştirebilir ve kodu daha kolay görüntülenecek hale getirebilirsiniz. Dreamweaver > Preferences (Macintosh’ta) ya da Edit
> Preferences (Windows’ta) komutunu seçip Code Format kategorisine geçerek bunların arasından istediğiniz seçenekleri özelleştirebilirsiniz.
Refresh Design View düğmesi
View Options düğmesi
Code görünümüyle aynı seçenekleri ve kontrolleri sunan Code Inspector’ı da (Kod Denetçisi) açabilirsiniz. Aradaki fark, Inspector’ın ayrı bir pencerede açılmasıdır. Bazı geliştiriciler iki monitör kullanır ve bunlardan birinde Code Inspector’ı görüntülerler. Böylece, belge penceresinin Design görünümünde çalışırken aynı anda kodu da görebilirler. Bu Split görünümüne benzer bir işleve sahiptir, ama görünümlerin her birine daha fazla yer ayırır. Code Inspector’ı açmak için, Window > Code Inspector komutunu seçin ya da F10 tuşuna basın.
3. Document araç çubuğundaki Split düğmesine tıklayın.
Split görünümüne, View > Code and Design komutunu seçerek de geçebilirsiniz.
Bu görünümde, hem tasarımı, hem de sayfayı oluşturan kodu görebilirsiniz. Design ve Code bölmelerinin arasındaki kenarlığı sürükleyerek Code bölmesinin büyüklüğünü ayarlayabilirsiniz. Code bölmesinin konumunu değiştirmek için, araç çubuğundaki View Options düğmesine tıklayın ve menüden Design View on Top’ı seçin. Bu menü, cetveller,
4. Araç çubuğundaki Design düğmesine tıklayın.
Design görünümüne, View > Design komutunu seçerek de geçebilirsiniz.
Belge pencereniz, sayfanızdaki bütün görsel elemanları yaklaşık olarak tarayıcıda
göründükleri şekilde gösteren Design görünümüne geçecektir. Diğer belge görünümlerinde de olduğu gibi, görünümle ilgili çeşitli seçeneklere araç çubuğundan erişebilirsiniz.
Code Görünümünde HTML Kodunu Düzenlemek
Kodları elle düzenleyebilirsiniz. Dreamweaver yaptığınız bu değişikliklerin üzerine kaydetmez. Bununla birlikte, yapılan bir değişiklik yanlış gibi görünüyorsa, Dreamweaver bunu vurgulayarak sizi uyarır. Bazen aşağıdaki adımlarda gösterildiği gibi kodda elle ayarlamalar yapmanız gerekebilir.
1. training.html belgesinde ekleme noktasını formun içinde herhangi bir yere yerleştirin ve Etiket Seçici’de <table> etiketine tıklayın.
İçteki tablo, seçili olduğunu gösterecek şekilde kalın siyah bir çizgiyle çevrelenecektir.
2. Split görünümüne geçin. Kodda tablonun başladığı yeri bulun. Bu kısmın aşağıdaki gibi görünmesi gerekir:
<table width=”90%” border=”0” align=”center” cellpadding=”0” cellspacing=”10>
Tablo, belge penceresinin Design görünümünde seçildiği için, Code görünümünde de buna karşılık gelen kod vurgulanacaktır. Açılış table etiketini bulmak için, Code görünümündeki seçimin baş kısmına bakın.
Bu tabloda, tablonun amacını tanımlayan bir özet yer almamaktadır. Bir tablo eklediğinizde, çeşitli erişilebilirlik özellikleri kullanılır hale gelir. Bunların arasında tablo için özet
oluşturma seçeneği de yer alır. Bununla birlikte, bir tablo eklendikten sonra (kodu ya da Tag Inspector’ı kullanmadığınız takdirde) bir özet eklemeniz mümkün değildir.
3. Code görünümü bölmesinde, ekleme noktasını açılış table etiketinin sonundaki >
karakterinin önüne yerleştirin.
Code görünümü bölmesinin etkin hale geldiği, kenarlarının etrafında kalın bir çizgi görüntülenerek (Macintosh’ta) ya da kenar boşluğu vurgulanarak (Windows’ta) gösterilir.
Code görünümünde gördüğünüz HTML etiketlerinden biriyle ilgili ayrıntılı bilgi edinmek isterseniz, ekleme noktasını ilgili etiketin içinde herhangi bir konuma yerleştirin ve Shift+F1 tuşlarına birlikte basın. Results penceresinin Reference sekmesi açılacaktır. Bu sekmede otomatik olarak o an seçili durumda bulunan nitelikle (burada cellspacing niteliği, çünkü ekleme noktasının bulunduğu açılış table etiketinde en son tanımlanan nitelik cellspacing idi) ilgili bilgiler görüntülenir. Reference panelinin üst kısmındaki Tag menüsünden diğer etiketleri de seçebilirsiniz. Örneğin Tag menüsünden TABLE’ı seçtiğinizde, <table>
etiketi hakkındaki bilgiler görüntülenir. Tag menüsünün sağında bulunan ilâve bir menü de, <table> etiketine ait belirli bir niteliği seçmenizi ya da Description seçeneğini kullandığınızda <table> etiketinin kendisiyle ilgili ayrıntılı bir açıklamayı görmenizi sağlar.
Örneğin, sıradaki adımlarda oluşturacağınız summary (özet) niteliği ile ilgili daha fazla bilgi edinmek için, bu menüden summary’yi seçebilirsiniz.
Reference panelinin üst kısmındaki Book menüsünü kullanıp başka bir kitap seçerek O’REILLY HTML Reference hakkındaki tanıtıcı bilgileri okuyabilirsiniz.
Bunun ardından Book menüsünü kullanarak O’REILLY HTML Reference’ı
4. Code görünümü bölmesinde boşluk tuşuna bastığınızda <tag> etiketine ait niteliklerin bir listesini göreceksiniz.
Siz Code görünümünü kullanırken Dreamweaver Code Hinting adı verilen bir özellikten faydalanmanızı sağlar. Code Hinting özelliği siz yazarken ilgili etiketin niteliklerini görüntüler. Siz harfleri girerken bu özellik sizin girdiğiniz harf dizisini, istediğiniz niteliği bulana kadar, mevcut niteliklerle eşleştirmeye çalışır.
5. su yazdığınızda Code Hinting özelliği bu girişi summary niteliğiyle eşleştirecektir. summary niteliği seçildikten sonra Enter (Windows’ta) ya da Return (Macintosh’ta) tuşuna basın. Etikete summary=”” karakter katarı eklenecek ve ekleme noktası çift tırnak işaretlerinin arasında kalacaktır. Çift tırnak işaretinin arasına “Please enter your contact information and information about your experiences with yoga” yazın. Design görünümü bölmesine
tıklayarak belgenin görünümünü tazeleyin.
Kodda bir değişiklik yaptıktan sonra Properties denetçisinde beliren Refresh düğmesine de tıklayabilirsiniz.
HTML kodunu düzenlerken bir hata yaptığınız takdirde, Dreamweaver bu hatayı düzeltmez. Dreamweaver’da, geçersiz görünen kodları parlak sarı renkle vurgulayan Highlight Invalid HTML (varsayılan durumda etkin değildir) adında bir özellik vardır.
Düzeltmeleri sizin yapmanız gerekir. Bu özellik, Dreamweaver’ın RoundTrip HTML olarak bilinen avantajlarından biridir. Dreamweaver’ın kodu değiştirmemesi önemlidir, çünkü Dreamweaver’ın geçersiz olarak gördüğü bir kodu kasten o şekilde yazmış olabilirsiniz. Örneğin Web sunucunuzun tanıdığı, ama standart HTML kodları olmayan özel etiketler ekleyebilirsiniz. Dreamweaver bunları değiştirmez. Invalid Markup (Geçersiz İşaretleme) vurgusu, sadece Dreamweaver’da görünür ve tarayıcıda görünenleri etkilemez.
Properties denetçisi, size vurgulanan seçimin Invalid Markup olduğunu bildirir ve sorunlu etiketleri, kodun neden geçersiz olduğu ile ilgili ek bilgiler ve sorunun nasıl giderilebileceği konusunda bir öneriyle birlikte listeler.
Code görünümünde View > Code View Options > Highlight Invalid HTML komutunu seçerek Invalid Markup vurgusunu etkinleştirebilir ya da bu seçeneğin etkinliğini kaldırabilirsiniz. Design görünümündeki Invalid Markup vurgularını kaldıramazsınız.
Yaptığınız değişikliğin bir etkisi yokmuş gibi görünse de, sayfa artık daha erişilebilir bir durumdadır. Dreamweaver’ın görsel arabirimini kullanarak yapamayacağınız bir değişiklik yapmanız gerekiyorsa, summary etiketleri ekleyebilir ya da kodu düzenleyebilirsiniz.
Ayrıca, Code görünümü bölmesinde bir etikete sağ tıklayarak ya da Ctrl tuşunu basılı tutup tıklayarak (Macintosh’ta tek düğmeli fare kullananlar için) bağlam menüsünü açabilir ve buradan Edit Tag komutunu seçebilirsiniz. Bunu yaptığınızda Tag Editor iletişim kutusu açılır ve burada etiketi düzenlemek için kullanabileceğiniz bir dizi kategori ve seçenek görüntülenir. Bu kategorilerin ve seçeneklerin sayısı, seçilen etikete bağlı olarak değişir.
Code Araç Çubuğunu Kullanmak
Dreamweaver 8’de Code araç çubuğu adını taşıyan ve kod yazmayla ilgili bütün kolaylıkları sunan bir araç mevcuttur.
1. Split modunda görüntülediğiniz training.html sayfasının Design görünümü kısmında ekleme noktasını tablonun içine yerleştirin ve Etiket Seçici’de
<table> etiketini seçin. Belgenin Code görünümü kısmında yer alan Code araç çubuğundaki Collapse Full Tag simgesine tıklayın.
Code araç çubuğu; etiketleri bir bütün olarak, belirli bir seçimi ya da seçilen etiketin ya da seçimin dışındaki her şeyi (Alt/Option tuşunu basılı tutmanız gerekir) daraltmanızı sağlar. Bu da kod üzerinde çalışmadığınız bölümlerini kapatmanızı ve kodun asıl çalışmak istediğiniz bölümlerini görüntülemenizi sağlar.
2. Code araç çubuğunda yer alan Expand All düğmesine tıklayın.
Siz bu düğmeleri kullandığınızda Dreamweaver kodlara herhangi bir zarar vermez, Sadece rahat görüntülenmesi için kodun belirli bölümlerini gizler. Kodunuzu istediğiniz zaman genişletebilirsiniz.
3. Ekleme noktasını herhangi bir tablo satırı etiketinin (<tr>) içine yerleştirin. Code araç çubuğundaki Select Parent Tag düğmesine tıklayın.
Dreamweaver ebeveyn etiketi (burada <table> etiketi) seçecektir.
4. <table> etiketi seçili durumdayken Code araç çubuğundaki Apply Comment düğmesine tıklayın. Açılan menüden Apply HTML Comment komutunu seçin.
HTML açıklamaları koda notlar eklemek, kodun belirli bir kısmının kullanılışını göstermek ya da açıklamak ya da kodu silmeden belgenin bir kısmının etkinliğini kaldırmak için kullanılabilir. Code araç çubuğunun Apply Comment seçeneğini kullanarak kodun belirli bir kısmını çabucak açıklama haline getirebilirsiniz.
Dreamweaver tabloyu HTML açıklama etiketlerinin (<!-- -->) arasına alacak ve böylece sayfa Web tarayıcısında görüntülenirken tablonun görünmesini engelleyecektir.
5. Açıklama haline getirilen <table> etiketi seçili durumdayken Code araç çubuğundaki Remove Comment düğmesine tıklayın.
CSS açıklamaları, standart HTML açıklamalarından farklıdır. Bir CSS açıklaması, stil sayfasında /*Açıklama*/ olarak görünür. CSS açıklamalarını, Apply Comment düğmesine tıkladıktan sonra açılan menüden Apply /* */
Comment komutunu seçerek ekleyebilirsiniz.
Kodun içinde açıklama haline getirilmiş bir bölümü seçerseniz, Dreamweaver seçimi çevreleyen açıklamaları sizin yerinize silecektir.
training.html belgesini açık bırakabilirsiniz. Bu dosyayı bu derste daha sonra tekrar kullanacaksınız.
Dreamweaver, kullanıcılara kodun geliştirilmesinde hassas kontrol imkânı sağlayan pek çok kod düzenleme aracı içerir. Tag Library Editor’ı kullanarak standart ve özel etiketlerle ilgili bilgileri saklayabilirsiniz. Bu araç, geçerli etiketlerde değişiklik yapmanıza ve Dreamweaver ile bütünleşik olarak bulunan kapsamlı etiket veritabanına dışarıdan yeni etiketler aktarmanıza imkân sağlar.
Etiketler bir kütüphane sisteminde düzenlenmiştir. Bu kütüphanelerin her biri farklı bir kod tipine (HTML, CFML, ASP, vs. gibi) özgüdür. Kütüphane ekleyebilir ya da mevcut kütüphaneleri silebilirsiniz. Kütüphanelerin her biri, etiket formatını (Tag Format) düzenlemek için kullanabileceğiniz çeşitli etiketler içerir: Line Breaks (Satır Sonları), Contents (İçerikler) ve Case (BÜYÜK/Küçük Harf). Preview metin alanı, etiketi ayarladığınız seçeneklere göre görüntüler.
Her etiket çeşitli nitelikler içerir. Bu nitelikler de özelleştirilebilir. Edit > Tag Libraries komutunu seçerek Tag Library Editor’ı açın. Etiket kütüphanelerini, etiketleri ve etiket niteliklerini eklerken, değiştirirken ya da silerken dikkatli olun.
Bu iletişim kutusu özellikle, değiştirmek istedikleri kodu gerçekten tanıyan ileri seviyedeki Dreamweaver kullanıcılarına yöneliktir.
Yeni Pencerenin Konumunu Ayarlamak
Yeni pencerelerin niteliklerini Open Browser Window davranışıyla nasıl kontrol
edebileceğinizi Ders 8’de öğrenmiştiniz. Code görünümünde HTML kodunu düzenleyerek bu pencerelerin konumlarını da belirleyebilirsiniz.
1. explorations/poses.html belgesini asıl Web tarayıcınızda önizleyin. İlk sütundaki Uttanasana bağlantısına tıklayın.
İlgili yoga pozisyonunu gösteren fotoğrafın yer aldığı yeni bir tarayıcı penceresi açılacaktır.
fwd-fold.jpg dosyasını seçmek için Open Browser Window davranışını kullanarak bunun gibi yeni bir pencere oluşturmuştunuz, ama pencerenin tam olarak nereye yerleştirileceğini belirleyemiyordunuz. JavaScript koduna belirli parametreler ekleyerek pencerenin
ziyaretçinin ekranındaki konumunu tam olarak belirleyebilirsiniz.
2. poses.html belgesi açık durumdayken Code görünümü bölmesinde, ziyaretçi bağlantıya tıkladığında yeni tarayıcı penceresini açan kodu bulun.
Ekleme noktasını Design görünümü bölmesinde “Uttanasana” bağlantılı metninin içine
yerleştirerek bu kodu bulabilirsiniz. İlgili kod Code görünümü bölmesinde otomatik olarak seçili hale gelecektir. Bunun, Code görünümü bölmesindeki 106 numaralı satırda olması gerekir.
Aşağıdaki gibi bir kod göreceksiniz:
<a href=”#” onclick=”MM_openBrWindow(‘images/fwd-fold.jpg’,’’,’width=405, height=605’)”>Uttanasana</a>
3. Height parametresinin değerinin yanına bir virgül ekleyin ve aşağıdaki kodu girin: top=0,left=0
Virgülü ve kodu, 605 değerinden sonra, kesme işaretinden önce olacak şekilde yazdığınızdan emin olun. Boşluk kullanmayın.
top ve left parametreleri pencereyi ekranın üst ve sol yanına gelecek şekilde yerleştirir.
0 parametresi kullanılırsa, yeni pencere bu koordinatlara (ekranın sol üst köşesine) yerleştirilir.
Elde edilen kod aşağıdaki gibi olacaktır:
<a href=”#” onclick=”MM_openBrWindow(‘images/fwd-fold.jpg’,’’,’width=405, height=605,top=0,left=0’)”>Uttanasana</a>
4. Dosyanızı kaydedin ve Web tarayıcınızda test edin.
Yeni pencere ekranınızın sol üst köşesinde görüntülenecektir.
5. İki parametreyi de 200 olarak değiştirin ve sayfayı tarayıcıda görüntülediğinizde meydana gelen farklılıkları inceleyin.
Yeni pencere farklı bir konumda görüntülenecektir.
Yeni bir tarayıcı penceresinin konumunu tanımlarken, pencereyi çok aşağıda ya da çok sağda olacak şekilde yerleştirmemeye dikkat edin. Küçük monitör kullanan ziyaretçiler, ayarlanan koordinatlar pencereyi ekran boyutlarının dışına yerleştirdiği takdirde pencerenizi göremeyebilirler.
Meta Etiketleri
Kodlarınıza, tarayıcıda görüntülenmeyen, ama yine de belge için önemli olan belirli elemanlar ekleyebilirsiniz. Bu tür elemanlara örnek olarak meta etiketlerini ve HTML açıklamalarını gösterebiliriz. Meta etiketleri pek çok amaçla kullanılabilir. Meta etiketleri (meta tags) belgeleri tanıtır ve tanımlar, telif hakkı bilgilerini verir, yazarları ya da yaratıcıları tanıtır, ziyaretçileri farklı sayfalara yönlendirir, belge özetinin bazı arama motorlarındaki görünümünü kontrol eder ve arama motorlarındaki sıralamayı etkiler.
1. training.html belgesindeyken View > Head Content komutunu seçin.
Design görünümü bölmesinin üzerinde Head Content alanı belirecektir. Burada,
belgenizin head (baş) kısmında, <head> ve </head> etiketlerinin arasında bulunan öğelere ait simgeler görünür. Bu aşamada, bu alanda bulunan öğeler içinde belgenin başlığına ait simgeler, http-equiv niteliğiyle birlikte <meta> etiketi, belgenin head bölümünde görünmesi gereken JavaScript kod parçaları ile harici CSS belgesine ait bağlantı ve dahili CSS bulunur.
Siz head bölmesindeki simgelere tıklarken, Code görünümü bölmesinde bu öğelere karşılık gelen kodlar vurgulanacaktır.
Bu head içerik alanını görüntülemek için Design görünümünde ya da Split görünümünde olmanız gerekir. Code görünümündeyken, View > Head Content seçeneği seçilemez durumdadır. Bu uygulama için Split görünümünü kullanmanız gerekir.
2. Document araç çubuğundaki View Options düğmesine tıklayın ve Design View on Top’ı seçin. Aynı View Options menüsünde, Line Numbers seçeneğinin etkin durumda olduğundan emin olun. İmleci, Design ve Code görünümlerini ayıran çubuğun üzerine getirin. İmleç iki oklu bir çizgiye dönüştüğünde çubuğa tıklayın ve Code görünümü büyüyecek, Design görünümü de daralacak şekilde yukarı doğru sürükleyin.
View Options menüsünü kod satır numaraları (Line numbers), kılavuzlar (Guides), cetveller (Rulers), sözcük sarma (Word Wrap) gibi diğer kod ve tasarım araçlarını açmak ve kapamak için de kullanabilirsiniz. Buradaki
görünüm seçenekleri (View Options) sadece Dreamweaver’a özgü araçlardır ve sayfanın Web tarayıcısındaki görüntüsünü etkilemezler.
Head alanı içeriğini belge pencerenizin üst kısmında, Design görünümü bölmesinin hemen üstünde göreceksiniz. Ayrıca Design görünümü bölmesi minimum boyutunda görünecektir. Head alanındaki simgeleri seçtiğinizde, Code görünümünde bunlara karşılık gelen kodları kolayca görebilirsiniz.
3. Code görünümü bölmesinde, ekleme noktasını belgenin başlığını içeren 5 numaralı satırın sonuna, </title> etiketinin hemen arkasına yerleştirin, sonra da Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Insert araç çubuğunda HTML kategorisini, sonra da Head menüsünden Description’ı seçin.
Description iletişim kutusu açılacaktır. Burada sayfanızla ilgili açıklamayı yazabileceğiniz bir metin alanı göreceksiniz. Sayfanızın içeriğini açıklayan kısa bir özet vermek amacıyla kullanılan description meta etiketi, bazı arama motorlarında gösterilen arama sonuçlarına dahil edilir. Sayfalarınıza description meta etiketini eklemeniz, sitenizin tanıtımı açısından çok önemlidir.
4. Submit your contact information to receive more information about Yoga Sangha training offerings yazın. OK düğmesine tıklayın.
Açıklamalar kısa olmalı, yani en fazla 200 karakterden oluşmalıdır. Arama motorlarının çoğunda belirli bir sınır değeri vardır. Karakter sayısı bu sınır değerinin üzerine çıkıyorsa, fazla gelen kısımlar kullanılmaz. İyi bir açıklama, belgenin içeriğini kısa ve öz olarak vermelidir.
5. Ekleme noktası şu anda 6 numaralı satırın sonunda olmalıdır. Yeni bir satır oluşturmak için Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın ve Insert araç çubuğunun HTML kategorisindeki Head menüsünden Keywords’ü seçin. Keywords metin alanına yoga, sangha, ansara, training yazın. OK düğmesine tıklayarak Keywords iletişim kutusunu kapatın ve anahtar sözcükleri belgenize ekleyin.
Ekleme noktası boş bir satırdaysa (satır 6), Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basmanız gerekmez.
Bir anahtar sözcük listesi oluştururken sözcükleri ya da sözcük gruplarını virgüllerle ayırabilirsiniz. Aynı anahtar sözcüğü ya da sözcük grubunu tekrar tekrar kullanmayın.
Anahtar sözcük listesi olarak örneğin “yoga yoga yoga yoga” şeklinde bir ifade kullanırsanız, “yoga” sözcüğünün tekrarlanmasından dolayı bu, spam olarak
değerlendirilebilir. Anahtar sözcükler, sayfanızın içeriğini temsil etmeli ve sayfanızda kullanılan sözcükler arasından seçilmelidir.
6. View > Head Content komutunu seçerek Head Content görünüm seçeneğinin yanındaki işareti kaldırın.
Head alanı kaybolacaktır. Kitabın geri kalan kısmında, Head Content görünüm seçeneğinin etkinliğini kaldırdığınız kabul edilmiştir.
Tag Inspector’ı Kullanmak
Tag Inspector, panel kümesinin içinde yer alan bir panel grubudur. Tag Inspector’ı, diğer bütünleşik geliştirme ortamlarında (Integrated Development Environment-IDE) bulunanlara benzeyen bir özellik sayfasının yardımıyla etiketleri ve nesneleri düzenlemek
1. training.html sayfasındayken Code görünümüne geçin. Ekleme noktasını 96 numaralı satırdaki <table> etiketinin içine yerleştirin. Tag Inspector panel grubunu açın ve Attributes panelinin görüntülendiğinden emin olun.
Tag Inspector, <table> etiketinin bütün niteliklerini ve bunların değerlerini görüntüleyecektir.
Eğer Tag Inspector paneli görünmüyorsa, Window > Tag Inspector komutunu seçebilir ya da F9 tuşuna basabilirsiniz.
2. Ekleme noktasını Tag Inspector’da cellpadding niteliğinin sağındaki değer sütununun içine yerleştirin. 0 olan değeri 3’le değiştirin. Enter (Windows’ta) ya da Return (Macintosh’ta) tuşuna basın.
Tag Inspector’ı kullanarak herhangi bir etiketin herhangi bir niteliğini çabucak ve kesin bir doğrulukla değiştirebilirsiniz. Burada <table> etiketinin cellpadding niteliğini değiştirdiniz.
training.html sayfasını kaydedebilirsiniz. Sonra da dosyayı açık bırakın.
Kodu Quick Tag Özelliğiyle Düzenlemek
Quick Tag’ler, HTML etiketlerini hızlı bir şekilde eklemenizi sağlar. Özellikle kodu elinizle yazmak zorunda olduğunuz durumlarda sürecin hızlandırılması açısından bu çok önemlidir. HTML kodlarını Quick Tag Editor ile düzenlemenin üç yolu vardır. Yeni bir HTML kodu ekleyebilir, mevcut bir etiketi düzenleyebilir, ya geçerli seçimin etrafını yeni bir etiketle sarabilirsiniz.
1. Lesson_16_Code/Training dizinindeki asana.html sayfasını açın. Design görünümünde ekleme noktasını “In-Depth Asana Training and Practice”
üstbilgisinin altındaki class (sınıf) resmiyle “We will” şeklinde başlayan metnin arasına yerleştirin. Properties denetçisinin sağ üst köşesinde bulunan Quick Tag Editor düğmesine tıklayın.
Quick Tag Editor Insert HTML modunda açılacaktır, çünkü ekleme noktasını belge penceresine yerleştirmiş ve hiçbir şeyi seçmemiştiniz. Quick Tag Editor’ın Insert HTML modunda görünmesi için, imlecin belge penceresinin Design görünümünde olması (bir nesne ekleyecekmişsiniz gibi) gerekir.
Insert HTML Quick Tag Editor, bir metin alanı ve içinden etiket seçebileceğiniz bir menü içeren küçük bir kutu olarak açılacaktır. Code Hints menüsünün açılması için bir süre beklemeniz gerekir.
2. Hints menüsündeki etiketlerin arasında ilerleyerek br etiketini bulun ve çift tıklayın. Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
QuickTag Editor button
br etiketi, break yani satır sonunu temsil eder ve çift tıkladığınızda Quick Tag metin alanında < ve > karakterlerinin arasında görünür. Siz Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna bastıktan sonra, belge penceresinde ekleme noktasının bulunduğu yere bir satır sonu eklenir.
Metin şu anda, resmin hemen altındaki satırda yer almaktadır.
Metin alanına doğrudan yazarak daha kapsamlı kod düzenleme işlemleri de yapabilirsiniz. Siz yazarken, Dreamweaver koddaki düzenlemeleri otomatik olarak yapar.
3. Belge penceresinin Design görünümünde, class (sınıf) resmini seçin ve Properties denetçisindeki Quick Tag Editor düğmesine tıklayın.
Quick Tag Editor Edit Tag modunda açılacaktır, çünkü belgedeki bir nesneyi seçtiniz.
Edit Tag modunda etiket niteliklerinin değerlerini düzenleyebilirsiniz. Quick Tag metin alanında, başlangıçta resme ait yol (kaynak ya da source olarak da bilinir) seçili durumdadır.
4. Tab tuşuna basarak resmin yolundan bir sonraki niteliğe geçebilirsiniz.
Alternatif metin değerine (Training Class) ulaşana kadar Tab tuşuna
basmaya devam edin. Alternatif metni Asana Training Class olarak değiştirin.
Yaptığınız değişikliklerin uygulanması için Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Tab tuşuna her bastığınızda, Quick Tag Editor yapmış olduğunuz değişiklikleri uygular (eğer varsa) ve bir sonraki niteliğe geçer.
Sol köşesine tıklayıp sürükleyerek Quick Tag Editor’ı başka bir konuma taşıyabilirsiniz.
Resmin alternatif metni değişecektir.
5. Eğitim sınıfı resmi seçili durumdayken Properties denetçisindeki Quick Tag Editor düğmesine tıklayın. Cmd+T (Macintosh’ta) ya da Ctrl+T (Windows’ta) tuşlarına basarak üç farklı Quick Tag seçeneğinin arasında Wrap Tag moduna ulaşıncaya kadar ilerleyin.
Cmd+T (Macintosh’ta) ya da Ctrl+T (Windows’ta) tuşlarına her bastığınızda Quick Tag Editor farklı bir moda geçer.
Belgede neyi seçtiğinize bağlı olarak Quick Tag Editor Edit Tag modunda ya da Wrap Tag modunda açılabilir. Örneğin belgede bir metin seçerseniz, Quick Tag Editor Wrap Tag modunda açılır. Quick Tag Editor’ı farklı bir modda açmak istiyorsanız, Cmd+T (Macintosh’ta) ya da Ctrl+T (Windows’ta) tuşlarını kullanarak farklı bir seçeneğe geçebilirsiniz.
6. Quick Tag Editor menüsünden div’i seçin. Boşluk tuşuna basın ve a yazın. Code Hints menüsünün görünmesini bekleyin, sonra da align seçeneğine çift tıklayın.
align=”” metin alanına eklendikten sonra Code Hints menüsü açıldığında center seçeneğine çift tıklayın. Yaptığınız değişikliklerin koda uygulanması için Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Eğitim sınıfı resmi ortalanacaktır. Resmin etrafına <div align=”center”> ve </div> etiketleri yerleştirilecektir.
Etiket Seçici’de bir etiketi seçip Delete (Macintosh’ta) ya da Backspace (Windows’ta) tuşuna basarsanız, etiket ve onun içerdiği her şey silinir. Ama sadece etiketi silmek ve içeriğini aynen bırakmak istiyorsanız, sağ tıkladıktan ya da Ctrl tuşunu basılı tutarak tıkladıktan (Macintosh’ta tek düğmeli fare
kullananlar için) sonra Remove Tag’i seçin.
Snippet’ları Kullanmak
Dreamweaver’da, snippet denilen kod parçalarını daha sonra kolayca kullanılabilecek şekilde saklayabilirsiniz. Dreamweaver’da önceden tanımlanmış pek çok snippet mevcuttur.
Açıklamaları, JavaScript rutinlerini, kod parçalarını ve diğer kaynakları kullanarak kendi snippet’larınızı da oluşturabilirsiniz. Snippet’lar, özellikle bir sitede tekrar tekrar kullanılması gereken kodlar (örneğin bir e-posta adresi ya da bir bağlantı gibi) için faydalıdır. Bu açıdan Ders 12’de anlatılan kütüphane öğelerine benzerler, ama snippet’ların kütüphane öğelerinden
1. training.html belgesinde ekleme noktasını formun Contact Information bölümündeki “Phone” metin alanının arkasına yerleştirin ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Aşağıdaki adımlarda yeni paragraf satırına önceden tanımlanmış bir Dreamweaver snippet’ını ekleyeceksiniz.
2. Files panel grubunda Snippets sekmesini seçin. Accessible klasörünü ve ardından buradaki Form Elements klasörünü açın. Browse For File Button snippet’ini seçin. Snippets panelinin alt kısmında yer alan Insert düğmesine tıklayın. training.html belgesini kaydedin.
Bu snippet, kullanıcının iletişim bilgilerinin geri kalan kısmını yüklemek üzere sabit diskindeki bir dosyayı seçmek için kullanabileceği bir düğme oluşturacaktır.
Snippet’ı, belgede yerleştirilmesini istediğiniz yere sürüklemeniz de mümkündür.
3. asana.html belgesinde, sayfanın alt kısmında bulunan ve yer tutucu resimle buna karşılık gelen resim açıklamasının yer aldığı tabloyu çevreleyen div’i seçin.
div’i seçmek için, tabloyu çevreleyen ince noktalı kenarlığa tıklayabilir ya da ekleme noktasını tablonun içinde herhangi bir yere yerleştirerek belge penceresinin alt kısmındaki Etiket Seçici aracılığıyla <div> etiketini seçebilirsiniz.
Bu tablo, bir Web sitesinde resimler ve bunlara karşılık gelen resim açıklamaları için kullanılabilecek tablolara bir örnektir. Bu tabloyu içeren bir snippet oluşturursanız, artık bir resim ve resim açıklaması kombinasyonu eklemek için her seferinde aynı kodu tekrar oluşturmak zorunda kalmazsınız. Snippet’ı hızla ve kolay bir şekilde ekleyebilirsiniz.
Diğer bir avantajı da, snippet kullanmanın sağladığı tutarlılıktır, Böylece, resim ve resim açıklaması kombinasyonları için standart bir görünüm ve yerleşim düzeni oluşturabilirsiniz.
4. Snippets panelinin alt kısmındaki New Snippet düğmesine tıklayın.
Snippet iletişim kutusu açılacaktır.
Snippet’ları seçtikten sonra Snippets panelinin alt kısmındaki Edit Snippet
5. Name metin alanına Image and Caption Table yazın. Description metin alanına da Table layout for images needing captions yazın. Snippet Type alanında Insert Block seçeneğini, Preview Type alanında da Design seçeneğini işaretleyin. OK düğmesine tıklayın.
Snippet oluşturulacak ve Snippets panelinde görünecektir. Artık bu snippet’ı istediğiniz zaman bir belgeye ekleyebilirsiniz. Bunun için, Snippets panelinde bu snippet’ı seçtikten sonra belgenize sürüklemeniz ya da Snippets panelindeki Insert düğmesine tıklamanız gerekir.
En son eklediğiniz snippet Accessible klasöründeki Form Elements klasöründe yer aldığı için yeni snippet de Form Elements klasöründe görünecektir.
Snippet’larınızı, tıpkı Files panelindeki dosyalarda yaptığınız gibi farklı klasörlere sürükleyerek, klasörler oluşturarak ve klasörleri yeniden adlandırarak organize edebilirsiniz. Ayrıca snippet’larınız için klavye kısayolları da oluşturabilirsiniz.
Code panel grubundaki bağlam menüsünü kullanarak ya da Dreamweaver >
Keyboard Shortcuts (Macintosh’ta) ya da Edit > Keyboard Shortcuts (Windows’ta) komutunu seçerek Keyboard Shortcuts iletişim kutusunu
açabilirsiniz. Snippet’lara ait kısayollar oluşturmak için Commands menüsünden Snippets’ı seçin, snippet listesinden bir snippet seçin ve artı (+) düğmesine tıklayarak seçili öğe için bir kısayol ekleyin (gerekiyorsa Dreamweaver’ın uyarılarını takip ederek yeni bir grup oluşturun) ve istediğiniz tuş
kombinasyonuna basın. Bastığınız tuşlar Press key metin alanında görünecektir.
6. Yeni snippet’ınızı test edin. Bunun için, asana.html belgesindeki orijinal div’i sildikten sonra bunun yerine, Snippets panelinde Image and Caption Table snippet seçeneğini işaretleyip Insert düğmesine tıklayarak yeni snippet’ınızı ekleyin.
Snippet’larınızın isimlerini ve açıklamalarını mümkün olduğu kadar kısa tutun. Snippets panelindeki ilk sütun simgeleri ve isimleri, ikinci sütun da açıklamaları gösterir. İmleci bir açıklamanın üzerine getirerek bu açıklamanın tamamını görebilirsiniz.
Clean Up XHTML Komutunu Kullanmak
Bir XHTML belgesinin oluşturulma süreci boyunca, boş ya da fazlalık etiketlerle, gereksiz ya da hatalı bir şekilde iç içe geçmiş etiketlerle ve belgenizdeki XHTML koduyla ilgili başka sorunlarla karşılaşabilirsiniz. Clean Up XHTML komutunu kullanarak bu sorunlu durumların hemen hepsinden kurtulabilirsiniz. Bir sayfayı ya da siteyi tamamladıktan sonra Clean Up XHTML komutunu çalıştırmanız tavsiye edilir.
1. asana.html belgesinde Commands > Clean Up XHTML komutunu seçin.
Clean Up HTML/XHTML iletişim kutusu açılacaktır. Varsayılan durumda Remove alanındaki ilk iki seçenek ve Options alanındaki her iki seçenek de işaretli durumdadır.
Bu iletişim kutusundaki seçenekler şunlardır:
• Empty container tags (<b></b>, <h1></h1>, …): Siz metinleri biçimlendirirken (özellikle de biçimlendirirken, düzenlerken ve yeniden biçimlendirirken vb), bu iletişim kutusunda verilen <b></b> örneğindeki gibi boş etiketler (kalın
biçimlendirme açılış ve kapanış etiketleri arasında hiçbir şey yoktur) ortaya çıkabilir.
Belge üzerinde ne kadar çok çalışırsanız, bu tür iç içe geçmiş etiketlerin meydana
• Redundant nested tags: Aynı işi yapan bir etiket grubunun içinde birbirinin aynısı iki etiket grubu varsa, içte olan etiket grubu fazlalıktır, çünkü dış kısımdaki etiket grubu zaten gereken tanımlama işlemini yapmıştır. Siz bir belge üzerinde çalışırken, fazlalık yuvalanmış etiketler ortaya çıkabilir. Bu seçenek işaretliyse, Dreamweaver birbirinin aynısı olan etiket gruplarının bütün örneklerini siler, çünkü bunlar gereksizdir. Varsayılan durumda bu seçenek işaretlidir.
• Non-Dreamweaver HTML comments: Bu seçenek işaretliyse, Dreamweaver tarafından eklenmemiş olan bütün açıklamalar silinir. Bunlara Dreamweaver kullanılırken eklenmiş açıklamalar da dâhildir. Dreamweaver HTML açıklamaları, Dreamweaver tarafından belirli nesneleri işaretlemek için oluşturulan açıklamalardır. Buna örnek olarak bir şablondaki
“teachers” düzenlenebilir bölgesini (bkz. Ders 13) gösteren <!--#BeginEditable “teachers”
--> açıklamasını verebiliriz. Bu seçenek varsayılan durumda işaretli değildir.
• Dreamweaver special markup: Dreamweaver, standart HTML’de olmayan birtakım etiketler oluşturur. Bu etiketlerin arasında, Dreamweaver’a belirli nesnelerin nasıl işleneceğini gösteren öğeler de (bir kütüphane öğesini gösteren <mm:libitem> gibi) yer alır. Bu işaretlemeyi yalnızca Dreamweaver tanır; tarayıcılar bunu göz ardı eder. Bu seçeneği kullanırken dikkatli olun, çünkü bu seçenek kütüphane öğeleriyle, şablonlarla ve taslak resimlerle ilişkili bütün etiketlerin silinmesine neden olur. Bu olduğu takdirde, artık bu özellikleri kullanarak sayfayı güncelleyemezsiniz. Bu seçenek varsayılan durumda işaretli değildir.
• Specific tag(s): Bu metin alanı, Dreamweaver’a belirli etiketleri silme komutu vermenize imkân sağlar. Aynı anda birden fazla etiketi silmek istiyorsanız, bunları aralarına virgül koyarak yazın. Bu seçenek varsayılan durumda işaretli değildir.
• Combine nested <font> Tags when possible: Belgenizde <font> etiketleri kullanılıyorsa, siz belgenizdeki metinleri biçimlendirirken bu etiketler iç içe geçebilir. Örneğin, aşağıdaki gibi bir kod parçasıyla karşılaşabilirsiniz:
<fontsize="–1"><fontface="Verdana,Arial,Helvetica,sans-serif">
<fontcolor="#336633">YogaSangha</font></font></font>
Bu örnekteki üç font etiket grubu tek bir <font> ve </font> grubunda birleştirildiğinde kod kısalır ve daha anlaşılır bir hale gelir:
<fontsize="–1"face="Verdana,Arial,Helvetica,sans-serif"
color="#336633">YogaSangha</font>
Varsayılan durumda bu seçenek işaretlidir.
<font> etiketi HTML 4.0’da değerini kaybetmiştir, yani HTML’in daha sonraki sürümlerinde hiç kullanılmayabilir. Metinlerin biçimlendirilmesinde stil sayfalarının kullanılması tavsiye edilir.
• Show log on completion: Günlük (log), Dreamweaver’ın hangi öğeleri temizleyebildiğini öğrenmenizi sağlar. Varsayılan durumda bu seçenek işaretlidir.
2. Varsayılan seçenekleri işaretli durumda bırakın ve OK düğmesine tıklayın.
Dreamweaver Clean Up XHTML komutunu çalıştıracak ve nelerin temizlendiğini gösteren bir günlüğün yer aldığı bir iletişim kutusu açılacaktır. Bazı durumlarda temizlenecek hiçbir şey olmayabilir.
3. OK düğmesine tıklayarak günlüğü kapatın. asana.html belgesini kaydedip kapatın.
Clean Up XHTML komutunun çalıştırılması, kodunuzun mümkün olduğunca temiz ve hatasız hale getirilmesine yardımcı olur. Ayrıca, belgenizin dosya boyutunun küçültülmesinde ve tarayıcıya yüklenme süresinin kısaltılmasında da faydalı olabilir.
Belgelerinizdeki kodları daha fazla optimize etmek için Validate Markup komutunu çalıştırarak kodda bulunabilecek etiket ve sözdizimi hatalarının araştırılmasını sağlayabilirsiniz. Bunun için File > Check Page > Validate Markup komutunu seçerek ya da Results penceresindeki Validation
sekmesine geçip Validate düğmesine (soldaki yeşil üçgen) tıklayın. Bulunan bütün hatalar Results iletişim kutusunda görüntülenecektir.
Microsoft Word HTML Dosyalarıyla Çalışmak
Bir Web sayfasının içeriği çeşitli kaynaklardan alınabilir. Müşterileriniz ya da çalışma arkadaşlarınız, malzemeleri size bir Microsoft Word dosyasında gönderebilir. Word belgesinin biçimlendirmesi çok basitse, metninizi Dreamweaver’a aktarmak için kopyala- yapıştır yöntemini kullanabilirsiniz. Eğer Word belgesinde madde imleri ya da tablolar gibi biçimlendirme özellikleri kullanılmışsa, belgeyi bir Web sayfası olarak kaydedebilir (Word 97 ya da daha sonraki sürümlerde Dosya > Web Sayfası Olarak Kaydet komutunu seçerek) ve elde ettiğiniz HTML dosyasını Dreamweaver’da açabilirsiniz. Ama Word pek çok gereksiz etiket ekler. Bu kodu Dreamweaver’da tek bir adımda temizleyebilirsiniz.
Dreamweaver’ın sildiği etiketler sayfanın Word’de görüntülenebilmesi için gereklidir, ama HTML’de ya da tarayıcılarda bunlara ihtiyaç yoktur.
2. Commands > Clean Up Word HTML komutunu seçin.
Clean Up Word HTML iletişim kutusu açılacaktır.
Dreamweaver, HTML kodu oluşturulurken Word’ün hangi sürümünün kullanıldığını tespit etmeye çalışır. Eğer Dreamweaver sürümü tespit edemezse, menüden Word 2000 and Newer’ı seçmeniz gerekir.
İletişim kutusunda iki sekme yer alır: Basic ve Detailed. Bunların her birinde çeşitli seçenekler bulunur. Bu uygulamada varsayılan ayarları kullanacağız (bütün seçenekler işaretli olacak).
Basic sekmesindeki seçenekler şunlardır:
• Remove all word-specific markup
• Clean up CSS
• Clean up <font> tags
• Fix invalidly nested tags
• Set background color
• Apply source formatting
• Show log on completion:
Detailed sekmesinde, Microsoft Word’e özgü bütün işaretlemeleri silmenize ve CSS’i temizlemenize imkân sağlayan ilâve seçenekler yer alır.
3. Basic sekmesindeki bütün seçeneklerin işaretli olduğundan emin olun ve OK düğmesine tıklayın. Dreamweaver’ın dosyayı temizlerken yaptığı değişiklikleri gözden geçirdikten sonra OK düğmesine tekrar tıklayarak iletişim kutusunu kapatın ve belgeyi kaydedin.
Dreamweaver, yaptığı bütün değişiklikleri listeleyen bir iletişim kutusu görüntüleyecektir.
Code Görünümünde Kodu Yazdırmak
Kodları bir bilgisayar ekranında görmek genellikle pek kolay değildir. Dreamweaver’da kodların çıktısını alabilirsiniz. Bu, basılı bir kopya üzerinde çalışmanıza ya da sonuçları ekip üyeleriyle paylaşmanıza imkân sağlayan faydalı bir özelliktir. Bu uygulamayı tamamlayabilmeniz için, bilgisayarınıza bağlı bir yazıcının olması gerekir.
1. training.html dosyası açıkken File > Print Code komutunu seçin.
Sisteminize bağlı bir yazıcı varsa, kopya sayısı ve sayfa numaraları gibi yazdırma seçeneklerini ayarladıktan sonra Print düğmesine tıklayarak kodunuzu yazdırabilirsiniz.
Design görünümünü Dreamweaver’ın içinden yazdıramazsınız. Web
sayfasının çıktısını tarayıcıda göründüğü şekilde almanız gerekiyorsa, sayfayı bir tarayıcıda önizleyin ve tarayıcıda açıkken yazdırın.
training.html dosyasını kapatabilirsiniz.
Gelişmiş Özelleştirme İşlemleri
Dreamweaver’ın özelleştirilmesiyle ilgili çeşitli seçenekler mevcuttur. Çalışma alanını ihtiyaçlarınıza göre düzenlemek üzere programı, araçları, panelleri ve klavye kısayollarını özelleştirmek için programın temel tercih seçeneklerini kullanabilirsiniz.
Dreamweaver, geliştirilebilecek şekilde tasarlanmıştır; dolayısıyla uygun eklentileri
karmaşık JavaScript komutlarına kadar birçok farklı eklenti vardır. Eklentileri yüklemek, yönetmek ve silmek için Dreamweaver Extension Manager’ı kullanırsınız.
Dreamweaver’da kullanmak üzere yeni davranışlar ve eklentiler oluşturabilir ya da
Dreamweaver Exchange Web sitesinden başkalarının oluşturduğu eklentileri edinebilirsiniz.
Macromedia’nın Dreamweaver Exchange (şimdi Adobe Exchange adını alan) sitesinde ücretsiz script’lerden satın alabileceğiniz eklentilere kadar pek çok eklenti mevcuttur.
1. Help > Manage Extensions komutunu seçin.
Eklentiler Dreamweaver’a Extension Manager kullanılarak yüklenir. Extension Manager, Dreamweaver’la birlikte kurulan ayrı bir programdır. Macromedia Extension Manager klasörü genellikle Macromedia Dreamweaver 8 klasörüyle aynı konuma yerleştirilir.
Varsayılan kurulum konumu Applications (Macintosh’ta) ya da Program Files\Macromedia (Windows’ta) klasörünüzün içinde olacaktır.
Extension Manager; eklentileri yüklemenizi, silmenizi yüklü durumdaki bir eklentiyle ilgili ayrıntılı bilgilere ulaşmanızı ve kendi eklentilerinizi hazırlamanızı sağlar. Ayrıca Dreamweaver Exchange Web sitesine kolayca erişmenizi sağlar. Bu site aracılığıyla daha fazla eklenti bulabilirsiniz.
Macromedia Extension Manager’da eklentilerin ismi, sürüm numarası, tipi ve oluşturan kişi görüntülenir. Burada seçili eklentiyle ilgili bir açıklama görüntülenir ve bu açıklamada söz konusu eklentinin ne işe yaradığı ve Dreamweaver içindeki konumuyla ilgili ayrıntılar yer alır. Eski eklentilerde Dreamweaver’ın önceki sürümlerinde yer alan arabirim elemanlarına
göndermede bulunan ve artık işe yaramayan açıklamalarla karşılaşabilirsiniz. Örneğin Objects paleti artık Insert araç çubuğu olarak anılmaktadır.
2. Extension Manager > Quit Extension Manager (Macintosh’ta) ya da File > Exit (Windows’ta) komutunu seçerek Extension Manager’dan çıkın.
Dreamweaver Exchange’de listelenen eklentilerde Dreamweaver’ın hangi sürümü için oluşturuldukları belirtilir. Bazı eski eklentiler programın yeni sürümleriyle düzgün şekilde çalışırken bazıları da çeşitli sorunlara yol açabilmektedir. Bir eklentiyi yükledikten sonra herhangi bir sorunla karşılaşırsanız o eklentiyi silmeniz gerekir. Bir sorunla
karşılaştığınızda kapatarak eklentilerinizi test edebilirsiniz. Extension Manager’da yer alan On/Off sütunundaki onay kutularını kullanarak eklentileri geçici olarak devreden çıkarabilirsiniz. Böylece, ortaya çıkan hataların belirli eklentilerle ilişkili olup olmadığını anlayabilirsiniz. Bu kutudaki onay işareti, ilgili eklentinin geçerli durumda yüklü olduğunu gösterir.
Eklentilerin Bulunması ve Yüklenmesi
İnternet’e bağlıyken, Dreamweaver’da Help > Dreamweaver Exchange komutunu seçerek ya da Extension Manager’da File > Go To Macromedia Exchange komu- tunu seçerek Dreamweaver Exchange sitesinden başka eklentiler de edinebilirsiniz.
Bu işlemi yaptığınızda varsayılan Web tarayıcınızda Dreamweaver Exchange sitesi açılacaktır. Eklenti indirmek, göndermek ya da eklentilerle ilgili eleştiri yazmak için macromedia.com sitesinin üyesi olmanız gerekir. Bu, ücretsiz bir üyeliktir. Üye olarak Dreamweaver Exchange ana sayfasına girebilirsiniz. Macromedia, Dreamweaver Exchange Web sitesini her tür eklenti için bir nevi depo olarak kullanıma sunmuştur. Siz Dreamweaver Exchange sitesinden eklenti indirirken, Extension Manager indirme işlemi tamamlandıktan sonra otomatik olarak açılır ve yükleme işlemine başlar (Macintosh’ta).
Windows kullanıcılarının ise indirilen dosyayı açmaları ya da bu uygulamada anlatılan yükleme işlemini gerçekleştirmeleri gerekir. Eklentilerden bazılarını Macromedia, bazılarını da üçüncü parti firmalar oluşturur.
Bir eklentiyi Extension Manager ile yüklemek için File > Install Extension komutunu seçin ya da otomatik olarak Extension Manager iletişim kutusunu açmak için ilgili eklenti dosyasına çift tıklayın. Siz bu işlemi yaptıktan sonra Install Extension (Macintosh’ta) ya da Select Extension to Install (Windows’ta) iletişim kutusu açılacaktır.
Eklentileri yükledikten sonra Dreamweaver’ı yeniden başlatmak iyi bir alışkanlıktır.
Dreamweaver’ı yeniden başlattıktan sonra yeni eklentileri kullanabilirsiniz. Program yeniden başlatılana kadar eklentiler kullanılamayabilir.
Ne Öğrendiniz?
Bu derste şunları öğrendiniz:
• Belge görünümleri arasında geçiş yaptınız ve HTML kodlarını Code görünümünde düzenlediniz (Sayfa 517-520).
• Split (Code and Design) görünümünü kullanarak HTML kodlarını elle düzenlediniz (Sayfa 520–523).
• Koda x ve y koordinatları ekleyerek yeni tarayıcı penceresinin konumunu değiştirdiniz (Sayfa 526–529).
• Meta etiketleriyle açıklamalar ve anahtar sözcükler eklediniz (Sayfa 529-533)
• Etiketleri hızlı bir şekilde düzenlemek için Tag Inspector’ı kullandınız (Sayfa 533-535)
• Quick Tags ve Code Hints özelliklerini kullanarak kod eklediniz ve kodları düzenlediniz (Sayfa 535-537).
• Snippet’ları kullanarak kod oluşturdunuz ve eklediniz (Sayfa 537-541).
• Clean Up XHTML komutunu çalıştırarak kodu temizlediniz (Sayfa 541–543).
• Dışarıdan bir Word HTML dosyası aktardınız ve Clean Up Word HTML komutunu kullanarak gereksiz etiketleri sildiniz (Sayfa 543–545).
• HTML kodlarının çıktısını nasıl alacağınızı öğrendiniz (Sayfa 545).
• Dreamweaver eklentilerini nereden bulacağınızı ve bunları nasıl yükleyeceğinizi öğrendiniz (Sayfa 545-547).
