BROWSERS AND HTML IN ADOBE DREAMWEAVER CC EĞİTİMİ

Dreamweaver ile HTML yaz ve önizle

Adobe Dreamweaver CC'de HTML yazımı, Live view ve gerçek tarayıcı önizlemesi

Browsers and HTML in Adobe Dreamweaver CC Eğitimi, Dreamweaver CC ile HTML belgeleri yazmayı ve farklı tarayıcılarda önizlemeyi öğretir.

3 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Code ve Live view'dan Emmet'e, CSS Designer'dan tarayıcı önizlemesine

Browsers and HTML in Adobe Dreamweaver CC Eğitimi, Adobe Dreamweaver CC kullanarak HTML belgelerini yazmayı ve farklı tarayıcılarda önizlemeyi öğretir. Katılımcılar Code, Split ve Live view'ı kullanır; kod ipuçları ve Emmet ile hızlı yazım yapar. Program, semantik HTML yapısı, CSS Designer paneli, Live Preview ile gerçek zamanlı tarayıcı önizlemesi, cihaz önizlemesi ve tarayıcı uyumluluğuyla tamamlanarak çalışan bir sayfa ortaya çıkarır.

Süre ve Format

3 Gün. Her gün dört modül; kısa anlatımın ardından aynı sayfa Dreamweaver'da kurulup gerçek tarayıcılarda önizlenerek sonuçlar karşılaştırılır.

Seviye

Orta Seviye — Adobe Dreamweaver CC ile HTML yazımını ve tarayıcı önizlemesini öğreten uygulamalı program

Öğrenme Metodu

Tek bir web sayfası Dreamweaver'da Code ve Live view ile kurulur; her adım gerçek tarayıcı ve cihaz önizlemesiyle test edilir.

Neden Bu Eğitim?

🎯Hızlı HTML yazımı

Kod ipuçları ve Emmet kısayollarıyla HTML belgelerini Dreamweaver'da çok daha hızlı ve hatasız yazmayı öğrenirsiniz.

👁️Canlı önizleme

Live view ve Live Preview ile yaptığınız değişiklikleri kaydetmeden gerçek tarayıcıda anında görmeyi kavrarsınız.

🌐Tarayıcı uyumu

Sayfanızı farklı tarayıcı ve cihazlarda önizleyerek görünüm farklarını erken fark edip düzeltmeyi uygularsınız.

Anahtar Konular

dreamweaver eğitimiadobe dreamweaver ccdreamweaver html eğitimiweb tasarım dreamweaverdreamweaver css designertarayıcı önizlemehtml editör eğitimidreamweaver live viewweb sayfası tasarımıdreamweaver kursu
“İyi bir sayfa yalnızca editörde değil her tarayıcıda doğru görünür; önizleme alışkanlığı sürprizleri yayından önce bitirir.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak bilgi ve araçlar

1
Temel HTML

Etiket ve nitelik kavramına dair temel HTML bilgisi Dreamweaver'daki kod görünümünü kolaylaştırır.

2
CSS farkındalığı

Seçici ve stil kavramına aşinalık CSS Designer panelini anlamayı hızlandırır.

3
Dreamweaver kurulumu

Adobe Dreamweaver CC kurulu ve bir deneme veya abonelikle açılabilir durumda olmalıdır.

4
Tarayıcılar

Chrome ve Firefox gibi birden çok tarayıcının kurulu olması önizleme karşılaştırması için faydalıdır.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Dreamweaver CC arayüzünü tanır, site tanımlar, Code ve Split view'da HTML belgesi oluşturur ve kod ipuçları ile Emmet'i kullanarak hızlı yazım yapar.
Modül 1
Workspace ve Site Tanımı
  • Dreamweaver arayüzü ve panel düzeni
  • Çalışma alanı (workspace) düzenlerini değiştirme
  • Yeni site tanımlama ve kök klasör seçimi
  • Dosya panelinden site dosyalarını yönetme
  • Document toolbar ve durum çubuğu öğeleri
  • Tercihler (Preferences) ile editör ayarları
Modül 2
Code, Split ve Design View
  • Code view ile ham HTML kodunu düzenleme
  • Split view ile kod ve görünümü birlikte görme
  • Live view ile tarayıcı motorlu önizleme
  • Görünümler arası geçiş ve senkronizasyon
  • Satır numarası, kod daraltma ve biçimlendirme
  • Design view'ın sınırları ve Live view tercihi
Modül 3
Yeni HTML Belgesi Oluşturma
  • New Document ile HTML5 belgesi başlatma
  • doctype ve belgenin temel iskeleti
  • Başlık (title) ve karakter kodlaması ayarı
  • head bölümüne meta ve bağlantı ekleme
  • Belgeyi kaydetme ve dosya uzantısı seçimi
  • Şablon (template) belgeyle yeniden kullanım
Modül 4
Kod İpuçları ve Emmet
  • Etiket yazarken açılan kod ipucu listesi
  • Nitelik ve değer için otomatik tamamlama
  • Emmet kısaltmalarıyla hızlı etiket üretimi
  • div.sinif ve ul>li*3 gibi Emmet kalıpları
  • Kapanış etiketinin otomatik eklenmesi
  • Kod renklendirme ile hataları erken görme
Günün hedefiKatılımcı semantik HTML etiketleriyle sayfa yapısını kurar, görsel ve bağlantı ekler ve CSS Designer paneliyle stil ve medya sorgusu tanımlamayı öğrenir.
Modül 1
Semantik HTML Yapısı
  • header, nav, main ve footer ile sayfa iskeleti
  • section ve article ile içerik gruplama
  • Başlık hiyerarşisi h1'den h6'ya düzen
  • Liste, paragraf ve metin düzeyi etiketleri
  • Anlamlı yapının erişilebilirliğe katkısı
  • Insert panelinden etiketlerin eklenmesi
Modül 2
Bağlantı, Görsel ve Medya
  • a etiketiyle iç ve dış bağlantı ekleme
  • Göreli ve mutlak bağlantı yolu ayrımı
  • img ile görsel ekleme ve alt metni
  • Property Inspector ile görsel özelliklerini ayarlama
  • Varlık (Assets) panelinden medya yönetimi
  • Link kontrolü ile kırık bağlantıların bulunması
Modül 3
CSS Designer Paneli
  • CSS Designer ile stil dosyası oluşturma
  • Seçici (selector) tanımlama ve özgüllük
  • Özellik bölümleriyle görsel stil düzenleme
  • Harici CSS dosyasını belgeye bağlama
  • Stilleri Live view'da anında görme
  • Oluşan CSS kodunu Code view'da inceleme
Modül 4
Medya Sorguları ve Duyarlılık
  • CSS Designer ile @media sorgusu ekleme
  • Visual Media Queries çubuğunu kullanma
  • Breakpoint ekleyerek düzen değişimi tanımlama
  • Esnek genişlik ve yüzde tabanlı ölçüler
  • Mobil öncelikli yaklaşımın uygulanması
  • Duyarlı davranışın görünümde test edilmesi
Günün hedefiKatılımcı Live Preview ve gerçek zamanlı tarayıcı önizlemesini kurar, cihazlarda sayfayı test eder, kodu doğrular ve sayfayı yayına hazırlar.
Modül 1
Live Preview ve Gerçek Zamanlı Önizleme
  • Live Preview ile bağlı tarayıcıda açma
  • Kod değişikliğinin tarayıcıya anında yansıması
  • Birden çok tarayıcıyı aynı anda bağlama
  • Yenileme gerektirmeyen canlı güncelleme
  • Preview in Browser kısayolunun kullanımı
  • Önizlemede yerel sunucu ihtiyacının anlaşılması
Modül 2
Cihaz ve Ekran Önizlemesi
  • Live view'da ekran genişliğini değiştirme
  • Device preview ile mobil cihazda görüntüleme
  • Yönlendirme (orientation) değişiminin etkisi
  • Farklı breakpoint'lerde düzenin denenmesi
  • Dokunma hedeflerinin boyutunun kontrolü
  • Mobil ve masaüstü görünüm farklarının giderilmesi
Modül 3
Tarayıcı Uyumluluğu
  • Chrome, Firefox ve Edge arasındaki render farkları
  • Eski tarayıcılarda desteklenmeyen özellikler
  • Satıcı ön eki gerektiren CSS özellikleri
  • Önizlemede fark bulup kaynakta düzeltme
  • Yazı tipi ve kutu modeli tutarlılığının kontrolü
  • Uyumluluk sorunlarının belgelenmesi
Modül 4
Doğrulama ve Yayın
  • HTML kodunun geçerlilik (validation) kontrolü
  • Uyarı ve hataların kaynakta düzeltilmesi
  • Site dosyalarının düzenlenmesi ve temizlenmesi
  • FTP ve sunucu ayarlarıyla site tanımı
  • Put ile dosyaları sunucuya yükleme
  • Yayın sonrası canlı sayfanın tarayıcıda denenmesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Arayüzü kullanma

Dreamweaver CC workspace'ini, site tanımını ve Code, Split ile Live view geçişlerini rahatça kullanabilirsiniz.

✅
Hızlı HTML yazma

Kod ipuçları ve Emmet kısaltmalarıyla HTML belgelerini çok daha hızlı ve daha az hatayla yazabilirsiniz.

✅
Semantik yapı kurma

header, nav, main ve article gibi semantik etiketlerle anlamlı ve erişilebilir sayfa iskeletleri oluşturabilirsiniz.

✅
CSS Designer kullanımı

CSS Designer paneliyle seçici ve stil tanımlayıp harici stil dosyalarını görsel olarak yönetebilirsiniz.

✅
Medya sorgusu ekleme

Visual Media Queries ile breakpoint ekleyip sayfanın farklı ekranlara uyumlu davranmasını sağlayabilirsiniz.

✅
Canlı önizleme

Live Preview ile değişiklikleri birden çok gerçek tarayıcıda kaydetmeden anında görüp denetleyebilirsiniz.

✅
Tarayıcı uyumu

Farklı tarayıcı ve cihazlardaki render farklarını erken fark edip kaynak kodda düzeltmeyi uygulayabilirsiniz.

✅
Doğrulama ve yayın

HTML kodunu doğrular, hataları giderir ve FTP ile siteyi sunucuya yükleyip canlıda test edebilirsiniz.

Kimler İçin Uygundur?

  • Dreamweaver CC ile görsel ve kod tabanlı HTML geliştirmek isteyen web tasarımcıları
  • kurumsal sayfa hazırlayan içerik üreticileri
  • aracı sağlam öğrenmek isteyen bilgisayar bölümü öğrencileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Dreamweaver CC ile görsel ve kod tabanlı HTML geliştirmek isteyen web tasarımcıları, kurumsal sayfa hazırlayan içerik üreticileri ve aracı sağlam öğrenmek isteyen öğrenciler için uygundur. Temel HTML ve CSS farkındalığı faydalıdır.
Dreamweaver kod mu yoksa görsel araç mı öğretiyor?
İkisi birlikte işlenir. Code ve Split view'da ham HTML yazımı, kod ipuçları ve Emmet gösterilir; aynı zamanda Live view, CSS Designer ve Visual Media Queries gibi görsel araçlar kod üzerinde ne ürettiğiyle birlikte anlatılır.
Tarayıcı önizlemesi nasıl yapılıyor?
Live Preview ile sayfa bağlı gerçek tarayıcılarda açılır ve kod değişiklikleri anında yansır. Ayrıca farklı ekran genişlikleri, cihaz önizlemesi ve Chrome, Firefox, Edge arasındaki render farkları karşılaştırmalı test edilir.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. Tek bir web sayfası Dreamweaver'da kurulup gerçek tarayıcılarda önizlenir. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanabilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve kurulan web sayfası projesini belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Browsers and HTML in Adobe Dreamweaver CC Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSDefensive Coding Fundamentals for JavaScript and HTML Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Defensive Coding Fundamentals for JavaScript and HTML Eğitimi

3 günTemelOnline / Yüz Yüze / Hibrit

Katı mod, basit girdi kontrolü, temel hata yakalama ve güvenli DOM alışkanlıklarıyla savunmacı programlamaya giriş yapan temel seviye eğitim.

Detayları Gör →
HTML ve CSSError Handling for JavaScript and HTML Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Error Handling for JavaScript and HTML Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

try/catch, özel hatalar, Promise ve async/await hata yönetimi, global yakalama ve izleme ile dayanıklı JavaScript yazmayı öğreten eğitim.

Detayları Gör →
HTML ve CSSExtending CSS with Less Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Extending CSS with Less Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Less değişkenleri, mixin, iç içe yazım, guard, fonksiyon ve derleme hattıyla ölçeklenebilir ve sürdürülebilir CSS yazmayı öğreten uygulamalı eğitim.

Detayları Gör →
HTML ve CSSExtending CSS with Sass Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Extending CSS with Sass Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Sass değişkeni, mixin, @extend, @if ve @each kontrol yapıları, map ve @use modül sistemiyle modüler CSS yazmayı öğreten uygulamalı eğitim.

Detayları Gör →
HTML ve CSSFront-end Apps: HTML Applications with JavaScript Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Front-end Apps: HTML Applications with JavaScript Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

DOM, olaylar, form doğrulama, fetch ve modüllerle çerçeve kullanmadan etkileşimli web uygulamaları kurmayı öğreten uygulamalı JavaScript eğitimi.

Detayları Gör →
HTML ve CSSFSD Front-end Development: Advanced CSS Browser Features Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

FSD Front-end Development: Advanced CSS Browser Features Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

Cascade layers, :has, container query, subgrid, oklch ve scroll-driven animasyonlarla güncel CSS özelliklerini öğreten ileri seviye front-end eğitimi.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn