İÇİNDEKİLER 1 BAŞLARKEN 1

Transkript

1 İÇİNDEKİLER V İÇİNDEKİLER 1 BAŞLARKEN 1 Giriş 1 Sistem Gereksinimleri 2 Dreamweaver CS6 ile Gelen Yeni Özellikler 3 Akıcı Izgara Mizanpajı 3 JQuery Mobile ve PhoneGap Desteği 4 Güncellenen Canlı Görünüm 5 CSS3 Geçişleri 5 Güncellenen Çoklu Ekran Önizlemesi 6 Yüksek Hızlı FTP Performansı 6 Adobe Business Catalyst Desteği 7 2 HIZLI TUR 9 Adobe Dreamweaver ın Genel Yapısı 9 Hoşgeldiniz Ekranını Kullanarak Bir Uygulamaya Başlamak 10 Open a Recent Item (Son Öğelerden Birini Aç) 11 Create New (Yeni Oluştur) 11 Top Features (En Popüler) 11 Yardım ve Destek Konuları 12 Dont Show Again (Bir Daha Gösterme) 12 Dreamweaver Arabirimine Genel Bakış 12 Doküman Arabirim Penceresi 13 Dreamweaver Menüleri 16 Paneller (Panels) 18 Araç Çubukları 32 Durum Çubuğu (Status Bar) 34 Çalışma Alanı Yerleşimi 35 Yeni Bir Arabirim Yerleşimi Oluşturma 35 DREAMWEAVER-icindekiler.indd V :36:33

2 VI DREAMWEAVER Yerleşim İsmini Değiştirme, Silme 35 Arabirim Yerleşimini Sıfırlama 37 Panelleri Genişletip-Daraltma, Kapatıp-Açma 37 Panelleri Sabitleme, Çıkarma ve Taşıma 38 3 SİTE OLUŞTURMA VE YÖNETME 39 Site Nedir? Neden Gereklidir? 40 Yerel Bir Site Oluşturma 40 Yerel ve Uzak Site Etkileşimi 42 Statik ve Dinamik Siteler 42 Sunucu Tanımlama 43 Site Gelişmiş Ayarlarını Yapma 46 Dosyalar (Files) Paneli ile Çalışma 47 Yerel Site ve Uzak Sunucu Dosyalarına Gözatma 49 Dosya ve Klasörlerle Çalışma 50 Dosya Listelerini Yenileme 51 Uzak Sunucuya Dosya Gönderme/Alma 52 Dosyaları Senkronize Etme 54 Perdelenecek Dosya Türlerini Belirleme 56 4 SAYFALARLA ÇALIŞMA 59 Belge Türünü Belirleme 59 Yeni Bir Web Sayfası Oluşturma 60 Şablon Kullanarak Sayfa Oluşturma 61 Örneklerden Sayfa Oluşturma 62 Yeni Doküman için Tercih Seçeneklerini Ayarlama 63 Sayfa Özelliklerini Düzenleme 65 Sayfa Özelliklerini CSS ile Düzenleme 67 Sayfa Bağlantılarını CSS ile Düzenleme 68 Başlıkları CSS ile Düzenleme 69 DREAMWEAVER-icindekiler.indd VI :36:34

3 İÇİNDEKİLER VII Sayfa Özelliklerini HTML ile Düzenleme 70 Başlık ve Kodlama Sayfa Özelliklerini Düzenleme 71 Sayfa Referans Görüntüsü Özelliklerini Düzenleme 72 Sayfaya Yazı Yazma 73 Sayfaya Resim Ekleme 74 Arama Motorları için Sayfaya Anahtar Kelimeler Tanımlama 75 Arama Motorları için Sayfayı Açıklayıcı Bir Metin Tanımlama 76 Web Sayfasını Kaydetme 77 Kayıtlı Bir Web Sayfasını Açma 79 Sayfayı Tarayıcıda İzleme 81 BrowserLab Kullanarak Sayfayı Test Etme 84 5 METİNLERLE ÇALIŞMA 87 Sayfaya Bir Metin Yazma ve Düzenleme 87 Metni Sayfa İçerisinde Hizalama 88 Yazı Tipinin Ayarlanması 89 Yazı Tipinin Ayarlanması 89 Sayfaya Web Fontları Ekleme 90 Metne Paragraf/Başlık Stili Uygulama 92 Yazı Renginin Ayarlanması 92 Yazı Stilinin Düzenlenmesi 94 Listeli Metinler Oluşturma 95 Properties Panelini Kullanarak Metinleri Biçimlendirme 98 Sayfaya Microsoft Word Belgesini Ekleme 99 Kopyala/Yapıştır Yöntemi ile Sayfaya Metinler Ekleme 100 Web Sayfasına Özel Karakter Ekleme 102 Bul ve Değiştir Özelliğini Kullanma 104 Sayfaya Güncel Tarih Bilgisi Ekleme 105 Sayfaya Yatay Çizgi Ekleme 107 Metinler Üzerinde Sözcük Denetimi Yapma 108 DREAMWEAVER-icindekiler.indd VII :36:34

4 VIII DREAMWEAVER 6 SAYFAYA GÖRSEL NESNELER EKLEME 111 Sayfaya Resim Ekleme 111 Resimleri Düzenleme 115 Resmin Boyutunu Ayarlama 115 Resmi Başka Bir Resimle Değiştirme 115 Resmin Kenarlarını Kırpma 116 Resmin Parlaklık ve Kontrast Ayarlarını Yapma 116 Resmin Renk Keskinlik Ayarını Yapma 117 Değişiklikleri Resim Dosyasına Uygulama 118 Sayfa Zeminine Resim Ekleme 118 Sayfaya Döngülü Resimler Ekleme 119 Sayfaya Resim Yer Tutucu Ekleme 121 Resimleri Web için Optimize Etme 123 JPEG Görüntü Seçenekleri 124 GIF ve PNG Görüntü seçenekleri 125 Assets Panelini Kullanma 125 Kullanılacak Resim Editörünü Ayarlama 126 Resim Editörü ile Resimleri Düzenleme 128 Sayfaya Fireworks Grafikleri ve HTML sini Ekleme 129 Sayfaya Flash Filmleri Ekleme 130 Flash Filmine Ait Özellikleri Düzenleme 131 Web Sayfasına Shockwave Filmi Ekleme 133 Web Sayfasına Flash Video Ekleme 134 Web Sayfasına Applet Ekleme 136 Web Sayfasında Eklentilerle Çalışma 138 HTML 5 Sayfasına Gömülü Videolar Oluşturma BAĞLANTILAR 143 Bağlantılar 143 Bağlantı Türleri ve Özellikleri 143 DREAMWEAVER-icindekiler.indd VIII :36:34

5 İÇİNDEKİLER IX Site İçindeki Dosyalara Yapılan Bağlantılar 144 Site Dışı Bağlantılar 145 E-Posta Adresine Yapılan Bağlantılar 146 Sayfa İçi Bağlantılar Aşama: Bağlantı Konumu Oluşturma Aşama: İsimli Alana Bağlantı Oluşlturma 149 Diğer Dosya Türlerine Yapılan Bağlantılar 150 Resimlere Bağlantı Oluşturma 153 Resmin Üzerine Birden Fazla Bağlantı Oluşturma 153 Bağlantı Renklerinin Düzenlenmesi 155 CSS ile Bağlantıya Hover Efekti Kazandırma 157 Bağlantıların Kontrol Edilmesi TABLOLARLA ÇALIŞMA 161 Web Sayfasında Tablolarla Çalışma 161 Tablo Özelliklerini Düzenleme 164 Tabloyu, Satırı, Sütunu veya Bir Hücre Grubunu Seçme 166 Tablo Hücrelerini Birleştirme 167 Bölünmüş Hücreler Oluşturma 167 Hücre İçerisindeki Verileri Hizalama 168 Tablo Hücrelerini Renklendirme 170 CSS ile Tablo Renklerini Düzenleme 171 Tabloya Satır ve Sütun Ekleme 173 Tablodan Satır ve Sütun Silme 175 Veri Dosyasını Tablo Olarak Aktarma 176 Excel Tablosunu Web Sayfasına Aktarma 178 Tablo Verilerini Sıralama 179 Tablo Verisini veya Tabloyu Silme 181 Sayfa Mizanpajı için Tabloları Kullanma 182 DREAMWEAVER-icindekiler.indd IX :36:35

6 X DREAMWEAVER Sayfa Mizanpajı için Görsel Yardımcılar Kullanma 186 Cetvelin Kullanılması 186 Izgaranın Kullanılması 188 Kılavuzların Kullanılması 189 Büyüteç ve El Aracının Kullanılması ÇERÇEVELER 193 Çerçeveler (Frames) 193 Örnek Çerçeve Setlerinden Sayfa Oluşturma 193 Örnek Çerçeve Setleri ve Özellikleri 194 Çerçeve Setinin Kaydedilmesi 200 Çerçeve Seti Özelliklerini Düzenleme 202 Çerçeveleri Özelleştirme 203 Çerçeveli Sayfalarda Bağlantıların Oluşturulması 204 Çerçeveli Sayfaya Alternatif Sayfa Oluşturmak 206 Çerçeveleri Bölerek Yeni Çerçeve Düzenekleri Oluşturma 206 Sayfaya Satır İçi Çerçeve Ekleme İÇERİĞİ CSS İLE BİÇİMLENDİRME 209 CSS Nedir? Avantajları Nelerdir? 209 Tanımlandığı Konuma Göre CSS Türleri 211 CSS ile Sayfa Görünümünü Düzenleme 212 CSS ile Sayfa Bağlantılarını Düzenleme 215 Başlıkları CSS ile Düzenleme 217 CSS Stilleri Paneli ve Özellikleri 218 Stil İçerisine Yeni Bir CSS Kuralı Ekleme 219 CSS Türleri 223 Class (Sınıf ) Seçiciler 223 ID (Kimlik) Seçiciler 226 DREAMWEAVER-icindekiler.indd X :36:35

7 İÇİNDEKİLER XI Tag (Etiket) Seçiciler 229 Compound (Bileşik) Seçiciler 231 CSS Kuralları ve Özellikleri 231 Type (Yazım) 232 Background (Arkaplan) 233 Block (Blok) 234 Box (Kutu) 236 Border (Kenarlık) 237 List (Liste) 238 Positioning (Konumlandırma) 239 Extensions (Uzatma) 241 Transition (Geçiş) 242 CSS Panelinde Özellikleri Tanımlama 243 Özellikler Listesi Görünüm Türleri 244 CSS 3 ile Gelen Yeni Özellikler 245 CSS Stilleri Panelinde CSS3 Özelliklerini Kullanma 246 Kod Görünümünde CSS3 Özelliklerini Kullanma 247 Harici Stil Sayfaları Oluşturma 248 Dahili Stilleri Harici Stillere Dönüştürme 248 Sayfaya Harici Bir Stil Sayfasını Bağlama 250 Kural ve Özelliklerin Silinmesi 251 Sayfadaki Öğelerin Stil Özelliklerini Takip Etme/Düzenleme 251 Ögelere CSS3 Geçişlerini Uygulama 253 Kuraldan CSS Geçişlerini Kaldırma 255 Hazır CSS Stillerini Kullanma 256 CSS Mizanpajlı Sayfalar Oluşturma 257 CSS ile Kendi Sayfa Mizanpajınızı Oluşturun 259 Div ve AP Öğeleri ve Özellikleri 260 DREAMWEAVER-icindekiler.indd XI :36:35

8 XII DREAMWEAVER Sayfaya Bir Div Etiketi Ekleme 261 CSS ile Div Etiketinin Boyutlarını Ayarlama 263 CSS ile Div Etiketinin İçeriğini Biçimlendirme 264 Sayfaya Bir AP Öğesi Ekleme 266 AP Öğesinin Özelliklerini Düzenleme 267 AP Öğesine İçerik Ekleme 269 Değişken Izgara Mizanpajı ile Sayfalar Tasarlama 271 Ortam Sorgusu Oluşturma 274 CSS için Görsel Yardımcıları Gösterip/Gizleme 276 CSS İçin Kod Renklerini Düzenleme FORM NESNELERİ İLE ÇALIŞMA 279 Form Nedir? 279 Form Araçları ve Özellikleri 280 Sayfaya Form Alanı Ekleme 280 Form Özelliklerini Düzenleme 281 Form Alanına Metin Alanı Ekleme 282 Metin Alanı Özelliklerini Düzenleme 284 Form Alanına Onay Kutusu Ekleme 286 Onay Kutusu Özelliklerini Düzenleme 287 Form Alanına Radyo Düğmesi Ekleme 287 Radyo Düğmesi Özelliklerini Düzenleme 288 Form Alanına, Radyo Grubu Ekleme 289 Radyo Grup Özelliklerini Düzenleme 290 Form Alanına Onay Kutusu Grubu Ekleme 291 Onay Kutusu Grubu Özelliklerini Düzenleme 292 Form Alanına Seçim Listesi/Menüsü Ekleme 293 Seçim Listesi/Menüsü Özelliklerini Düzenleme 293 Form Alanına, Dosya Alanı Ekleme 295 DREAMWEAVER-icindekiler.indd XII :36:35

9 İÇİNDEKİLER XIII Dosya Alanı Özelliklerini Düzenleme 295 Form Alanına Düğme Ekleme 297 Düğme Özelliklerini Düzenleme 297 Form Nesneleri İçin Açıklama Ekleme 298 Form Alanına Gizli Alan Ekleme 299 Gizli Alan Özelliklerini Düzenleme 300 Form Alanına, Görüntü Alanı Ekleme 301 Form Alanına Alan Kümesi Ekleme 302 Form Alanına Atla Menüsü Ekleme DİNAMİK SPRY NESNELERİ İLE ÇALIŞMA 307 Spry Nedir? 307 Doğrulama Form Araçları 308 Form Alanına Spry Doğrulama Metin Alanı Ekleme 309 Spry Doğrulama Metin Alanının Özelliklerini Düzenleme 309 Form Alanına Spry Doğrulama Metin Bölgesi Ekleme 314 Spry Doğrulama Metin Bölgesinin Özelliklerini Düzenleme 314 Form Alanına Spry Doğrulama Onay Kutusu Ekleme 317 Spry Doğrulama Onay Kutusunun Özelliklerini Düzenleme 317 Form Alanına Spry Doğrulama Seçimi Ekleme 320 Spry Doğrulama Seçiminin Özelliklerini Düzenleme 322 Form Alanına Spry Doğrulama Şifresi Ekleme 324 Spry Doğrulama Şifresinin Özelliklerini Düzenleme 324 Form Alanına Spry Doğrulama Onayı Ekleme 326 Spry Doğrulama Onayının Özelliklerini Düzenleme 327 Form Alanına Spry Doğrulama Radyo Grubu Ekleme 328 Spry Doğrulama Radyo Grubunun Özelliklerini Düzenleme 329 Web Sayfasına Canlı Menüler Ekleme 331 Canlı Menü Özelliklerini Düzenleme 331 DREAMWEAVER-icindekiler.indd XIII :36:35

10 XIV DREAMWEAVER Web Sayfasına Sekmeli Paneller Ekleme 334 Sekmeli Panelin Özelliklerini Düzenleme 335 Sayfaya Akordeon Ekleme 337 Akordeonun Özelliklerini Düzenleme 338 Sayfaya Daraltılabilir Panel Ekleme 339 Daraltılabilir Panelin Özelliklerini Düzenleme 340 Sayfaya HTML veya XML Dosyalarından Veri Aktarma 342 Dinamik Spry Verileri ile Çalışma 346 Öğeler İçin İpuçları Ekleme 348 Araç İpucunun Özelliklerini Düzenleme 349 Widget Tarayıcısını Kullanma 351 Yüklenen Widget ları Sayfaya Ekleme JAVASCRIPT İLE ETKİLEŞİM OLUŞTURMA 357 Öğelere Görsel Efektler Uygulama 357 Apear/Fade (Görüntüle/Soluklaştır) Efekti 359 Blind (Perdele) Efekti 360 Grow/Shrink (Büyüt/Küçült) Efekti 361 Highlight (Vurgula) Efekti 362 Shake (Salla) Efekti 363 Slide (Kaydır) Efekti 363 Squish (Ez) Efekti 364 Komut İçin Olayları Belirleme 364 JavaScript Kodunu Çağırıp Çalıştırma 366 Özellikleri Dinamik Olarak Değiştirme 368 Eklentiyi Dinamik Olarak Denetleme 370 Sayfayı Bir URL ye Yönlendirme 372 Reklam Penceresi Açma 373 Sayfada Açılır Mesaj Kutusu Açma 376 DREAMWEAVER-icindekiler.indd XIV :36:35

11 İÇİNDEKİLER XV Görüntü Değiştir Davranışı ile Foto Galeri Oluşturma 378 Sayfada Kullanılacak Görüntüleri Önceden Yükleme 382 Sayfada Hareket Ettirilebilir Öğeler Oluşturma 384 Sayfada Öğeleri Gösterip/Gizleme 386 Çerçeve İçeriğini Dinamik Olarak Değiştirme 389 Kap İçeriğini Dinamik Olarak Değiştirme 391 Durum Çubuğunda Metin Gösterme 391 Etiket Denetimi Paneliyle Çalışma KİTAPLIK VE ŞABLONLARLA ÇALIŞMA 395 Kitaplık Öğeleri 395 Kitaplığa Yeni Bir Öğe Ekleme 396 Kitaplıktan Bir Öğeyi Sayfaya Ekleme 398 Kitaplık Öğelerini Düzenleme 398 Kitaplık Öğesini Kitaplıktan Bağımsız Olarak Düzenleme 400 Kitaplık Öğelerini Silme 401 Şablonlar 402 Yeni Bir Şablon Belgesi Oluşturma 403 Bir Belgeyi Şablon Olarak Saklama 403 Şablon Kullanarak Belge Oluşturma 404 Şablon Bölgeleri Hakkında 406 Şablonda Düzenlenebilir Bölgeler Oluşturma 407 Düzenlenebilir Bölgeyi Kaldırma 409 Şablonda İsteğe Bağlı Bölgeler Oluşturma 409 Şablonda Yinelenen Bölgeler Oluşturma 410 Düzenlenebilir Etiket Nitelikleri Oluşturma 413 Şablon Kullanılarak Oluşturulan Sayfaları Güncelleme 415 Sayfayı Bağlı Olduğu Şablondan Ayırma 416 Şablonları Silme 416 DREAMWEAVER-icindekiler.indd XV :36:35

12 XVI DREAMWEAVER 15 KODLARLA ÇALIŞMA 417 Dreamweaver da Kodlar 417 Kod Görünümüne Bakış 418 Bir HTML Belgesinin Anatomisi 419 <html>...</html> Etiket Bloğu 420 <head>...</head> Etiket Bloğu 420 <body>...</body> Etiket Bloğu 420 HTML Belgesinde Etiketleri Seçme 421 Kod Denetçisi ile Kodları Takip Etme 422 Word Wrap (Sözcük Kaydır) 423 Line Numbers (Satır Numaraları) 424 Highlight Invalid Code (Geçersiz Kodu Vurgula) 424 Syntax Coloring (Sözdizimi Renklendirmesi) 424 Auto Indent (Otomatik Girinti) 425 Kod Araçlarıyla Çalışma 425 Sayfaya El ile Kod Yazma 429 Etiket Seçici ile Kod Ekleme 429 Harici Dosya Kodlarını Takip Etme 432 Kod İçerisinde Tanımlı Fonksiyonları Çağırma 432 Kod İpucu Araçlarını Kullanma 433 Canlı Kod Görünümünü Kullanma 435 Kodlar Hakkında Yardım Alma 435 Hatalı Kodları Bulma ve Ayıklama DİNAMİK SAYFALARLA ÇALIŞMA 439 Dreamweaver da Dinamik Sayfalar Geliştirme 439 Dinamik Sayfa Ne Demektir? Ne Fayda Sağlar? 439 Dinamik Web Sayfaları Nasıl Çalışır? 440 HTTP Sunucuları ve Uygulama Yazılımları 441 Dinamik Bir Uygulamanın Bileşenleri 442 DREAMWEAVER-icindekiler.indd XVI :36:35

13 İÇİNDEKİLER XVII Xampp Paketini Yükleme ve Test Etme 442 Siteyi Test Sunucusuna Tanımlama 446 PHP Bilgilerini Görüntüleme 450 Dreamweaver da PHP ile Kodlama Yapma 452 PHP ile Sayfaya Metinler Yazma 454 PHP Belgesi İçerisinde HTML Kullanma 454 Değişkenler ve Veri Türleri 454 Veri Türlerini Değiştirme 455 Komutlar için Açıklama Yazma 456 Sabit Değerler Tanımlama 457 Aritmetiksel Operatörler 457 Atama Operatörleri 458 Karşılaştırma Operatörleri 458 Arttırma ve Azaltma Operatörleri 459 Kontrol Yapıları 460 If Döngüsü 460 If Else Döngüsü 461 İç içe If Döngüsü 461 Switch-Case Döngüsü 462 While Döngüsü 462 Do-While Döngüsü 463 Break ve Continue Komutları 464 For Döngüsü 465 Fonksiyonlar 466 Form Verilerini PHP ile İşleme 467 PHP Sayfası İçerisine Sunucu Tarafında Başka Bir Sayfanın Kodlarını Ekleme 470 Veri Nedir? Veritabanı Nedir? 473 MySQL de Bir Veritabanı Oluşturma 474 DREAMWEAVER-icindekiler.indd XVII :36:35

14 XVIII DREAMWEAVER Veritabanı İçerisine Kayıtlar Ekleme 477 Veritabanına Bağlantı Oluşturma 478 Verileri Sayfaya Ekleme 480 Yinelenen Kayıt Bölgeleri Oluşturma 482 Kayıt Giriş Formaları Oluşturma 484 Şifreyle Giriş Yapılan Sayfalar Oluşturma 488 Kullanıcı Çıkışı İçin Bağlantı Oluşturma 493 CMS Nedir? 494 Bir WordPress Sitesini Dreamweaver da Düzenleme MOBİL UYGULAMALARI GELİŞTİRME 499 jquery Nedir? 499 Dreamweaver & jquery 499 jquery ile Yeni Bir Mobil Uygulama Oluşturma 500 Mobil Uygulamayı Düzenleme 503 Uygulamaya Yeni Bir Mobil Sayfa Ekleme 504 Sayfaya Mobil Düğmeler Ekleme 505 Liste Görünümü Ekleme 508 Mizanpaj Izgarası Ekleme 510 Daraltılabilir Blok Ekleme 511 Diğer jquery Mobil Araçları 512 Uygulama Renklerini ve Düğmelerini Düzenleme 512 Uygulamayı Mobil Aygıtlar için Paketleme 513 Uygulamayı Emulatör ile Görüntüleme SİTEYİ YAYINLAMA 517 Son Kontrollerin Yapılması 517 Web Sitesini Yayınlama 520 Birinci Adım: Uzak Sunucu için Bağlantı Ayarlarını Yapma 520 İkinci Adım: Uzak Sunucuya Bağlanma ve Dosyaları Transfer Etme 523 DREAMWEAVER-icindekiler.indd XVIII :36:36