A-PDF Split DEMO : Purchase from to remove the watermark

Transkript

1 A-PDF Split DEMO : Purchase from to remove the watermark 16 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 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.

2 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. 516 DERS 16

3 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. Kodları Düzenlemek 517

4 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 518 DERS 16

5 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, görsel yardımcılar ve ızgara da dâhil olmak üzere görünümün ayarlanmasında kullanılan diğer seçenekleri de içerir. Kodları Düzenlemek 519

6 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. 520 DERS 16

7 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 ı tekrar seçin. HTML referans materyal bölümüyle ilgili tanıtıcı bilgiler görüntülenecek ve bu kez herhangi bir etiket seçili durumda olmayacaktır. Kodları Düzenlemek 521

8 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. 522 DERS 16

9 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. Kodları Düzenlemek 523

10 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. 524 DERS 16

11 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. Kodları Düzenlemek 525

12 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. 526 DERS 16

13 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. Kodları Düzenlemek 527

14 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. 528 DERS 16

15 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. Kodları Düzenlemek 529

16 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. 530 DERS 16

17 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. Kodları Düzenlemek 531

18 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. 532 DERS 16

19 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 için kullanabilirsiniz. Kodları Düzenlemek 533

20 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. 534 DERS 16

21 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. QuickTag Editor button 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. Kodları Düzenlemek 535

22 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. 536 DERS 16

23 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 bir farkı vardır. Orijinal snippet ta bir değişiklik yaptığınızda sitedeki bütün snippet lar bu değişikliği yansıtacak şekilde güncellenmez. Bir snippet ı doğrudan koda yerleştirebilir ya da bir seçimin etrafına sarabilirsiniz. Kodları Düzenlemek 537