Dreamweaver kullanarak web siteleri tasarlama ve geliştirmenin ana hatlarını belirleyen üst düzey iş akışı

Bu makale, Dreamweaver ile çeşitli web geliştirme aşamalarını nasıl tamamlayabileceğinizi anlamanıza yardımcı olur.

Not:

Bu makalede web etki alanı, HTML, CSS ve JavaScript hakkında başlangıç seviyesi ila orta seviyeye arasında bilgiye sahip olduğunuz varsayılmaktadır.

  1. Web geliştirmenin ilk aşaması dinleyici kitlesi ihtiyaçlarını, teknik gereksinimleri ve pazarlama gereksinimlerini analiz ettiğiniz planlama safhasıdır. Ayrıca web sitenizi tasarlamak ve yayımlamak için gerekli önemli bilgileri elde edip aşağıdakilere benzer bazı sorulara yanıt alırsınız:

    • Web sitesini barındırması için hangi servis sağlayıcısını tercih ediyorum? Dosyaları yayımlama sunucusuna yüklemek için erişimim var mı?
    • Web sitesi için hangi etki alanı adı kullanılacak?
    • Mevcut web sitelerini Dreamweaver'a taşıyorsanız dosyalar ve varlıklar şu anda nerede depolanıyor? Bu bilgilerin depolandığı sunucuya erişimim var mı?
    • Dinamik bir web sitesi istiyorsanız, verilerin dinamik olarak görüntülenmesi halinde test etme amaçlı hangi sunucuyu kullanabilirim? Dinamik verileri yüklemek için kullanmak istediğim web uygulaması sunucusunun ayrıntılarına sahip miyim?
    • Web sitesi için ne tür varlıklar gerekiyor?
    • Bunlar sıfırdan tasarlanan varlıklar mı olacak? Varlıklar zaten mevcutsa bunlara erişim iznim bulunuyor mu?
    • Varlıkları tasarlamak için hangi uygulamaları kullanmak istiyorum?
    • Dinamik bir web sitesi oluşturmayı planlıyor muyum?

    Geliştirmek istediğiniz web sitesi ve bunu nasıl ve nerede barındıracağınız konusunda net bir fikriniz varsa ve de web geliştirme işlemi için Dreamweaver ve Creative Cloud kullanmayı tercih ettiyseniz bir sonraki adıma geçin.

  2. Web siteniz için gerekli tüm varlıklara sahip olduğunuzdan emin olun. Bunları yerel klasörlerinizde veya Adobe Creative Cloud Libraries'de toplayın veya düzenleyin.

  3. Şunları kullanarak Dreamweaver'da yeni bir belge oluşturun:

    • Yeni bir boş belge,
    • Dreamweaver ile paketlenmiş başlangıç şablonları veya
    • Başkaları tarafından oluşturulmuş şablon dosyaları (*.dwt)

    Not:

    Dreamweaver hakkında bilginiz yoksa veya web geliştirmeyi yeni öğreniyorsanız, web sayfalarını tasarlama konusunda başlangıç şablonlarının sizi ilerletmek açısından büyük yardımı dokunur.

    Sıfırdan başlamayı planlıyorsanız bile, iyi bir web sayfası tasarımının öğelerini anlamak için bu sayfalara gözatmak iyi bir fikirdir.

  4. Kendinizi Dreamweaver çalışma alanına alıştırmak için birkaç dakikanızı ayırın. Memnun kalacağınız bir çalışma alanı bulun ve bir renk teması ayarlayın. Farklı panelleri size uyacak şekilde yeniden düzenleyin.

  5. Dreamweaver'da sitenizi kurun. Dosyalar ve varlıklar içeren bir klasör yapısı oluşturmaya başlayın. Bilgilerinizi düzenledikten ve bir yapı belirledikten sonra sitenizi oluşturmaya başlayabilirsiniz. (Bkz. Adobe Dreamweaver siteleri hakkında.)

    Bu aşamada, uzak sunucu bağlantılarını ve test sunucularını kurmak da iyi bir fikirdir (dinamik içeriğiniz varsa). 

  6. Web sayfalarınızı Kod görünümünde kodlamaya ya da Tasarım görünümünde / Canlı görünümde tasarlamaya başlayın.

    Photoshop kompozisyonlarını kullanmayı planlıyorsanız bunları Dreamweaver'a ayıklayabilir ve üzerlerinde çalışabilirsiniz. Photoshop kompozisyonları ile çalışma hakkında daha fazla bilgi için bkz. Dreamweaver CC'de Extract.

    Metin, görüntü, rollover görüntüsü, görüntü eşlemesi, renk, film, ses, HTML bağı, tablo ve daha pek çok şey gibi tasarım öğeleri ekleyin.

  7. CSS ile web sayfanızın görünümüne stil uygulayın.

    Dreamweaver'da CSS ile farklı şekillerde çalışabilirsiniz:

    • CSS'ye elle kod ekleyebilirsiniz. CSS'nize elle kod eklemenize yardımcı olan Dreamweaver kodlama özellikleri hakkında bilgi için bkz. Dreamweaver'da kodlama ortamı.
    • CSS sayfaları oluşturma hakkında yeterli bilginiz yoksa CSS'nizi oluşturmaya yardımcı olması için CSS Tasarımcısı panelini kullanabilirsiniz. Daha fazla bilgi için bkz. CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma.
    • Sass ve Less dosyalarıyla çalışmayı tercih ederseniz, Dreamweaver bu seçeneği de destekler ve Dreamweaver sitenize Sass ve Less dosyalarını getirip bunlarla çalışmanıza olanak sağlar. Ardından Dreamweaver bunları otomatik derler (veya bunları el ile derlemeyi tercih edebilirsiniz) ve CSS değişikliklerinizin sonuçlarını gerçek zamanlı olarak görebilirsiniz. Sass ve Less dosyalarını Dreamweaver ile kullanma hakkında daha fazla bilgi için bkz. CSS ön işlemcileri.
  8. Dinamik içerik oluşturmak için bir web uygulaması kurun.

    Birçok web sitesinde, ziyaretçilerin veritabanlarında saklanan bilgileri görüntülemesine; genellikle de bazı ziyaretçilerin veritabanlarına yeni bilgiler ekleyip buradaki bilgileri düzenlemelerine olanak veren dinamik sayfalar bulunur. Böyle sayfalar oluşturmak için önce bir web sunucusu ve uygulama sunucusu kurmalı, bir Dreamweaver sitesi oluşturmalı veya değiştirmeli ve bir veritabanına bağlanmalısınız. Daha fazla bilgi için bkz. Dinamik siteler, sayfalar ve web formları.

  9. Dinamik sayfalar oluşturun.

    Dreamweaver'da; veritabanlarından çıkarılmış kayıt kümeleri, form parametreleri ve JavaBeans bileşenleri dahil olmak üzere çeşitli dinamik içerik kaynakları tanımlayabilirsiniz. Sayfaya dinamik içerik eklemek için içeriği sayfaya sürüklemeniz yeterlidir.

    Sayfanızı aynı anda tek bir kayıt veya birçok kayıt ya da birden çok kayıt sayfası gösterecek şekilde kurabilir, bir kayıt sayfasından diğerine ileri (veya geri) gitmek için özel bağlar ekleyebilir ve kullanıcıların kayıtları takip edebilmesi için kayıt sayaçları oluşturabilirsiniz. Daha fazla bilgi için bkz. Dinamik siteler, sayfalar ve web formları.

  10. Web sitenizi test edin, önizleyin ve yayımlayın. 

    Web sitenizin tasarıma göre ilerlediğini görmek için sayfaları oluşturma aşamasındayken önizlemeniz gerekir. Kodunuzu ve Canlı görünümleri yan yana tutarak Bölünmüş görünümde kod yazabilirsiniz.

    Web sayfalarını gerçek zamanlı olarak bir cihazda (dinamik web sayfaları oluşturuyorsanız) veya bir tarayıcıda da önizleyebilirsiniz.

    Canlı önizleme deneyimine ihtiyacınız yoksa, tarayıcı deneyimindeki normal önizleme işlevini kullanabilirsiniz.

    Uzak sunucu bağlantılarını daha önce tanımlamışsanız bu durumda web sitenizi yayımlamak için dosyalarınızı etkin hale getirmek üzere uzak sunucuya koymanız gerekir.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi