Sürükle ve bırak web sitesi oluşturucuları dünyasında Adobe Dreamweaver, rekabetin ortasında kalmak için iyi bir iş çıkardı. Hayatınızı kolaylaştıracak harika özellikler ve birçok araçla dolu bu yazılım, web tasarımcıları ve geliştiricileri için mükemmel bir seçimdir.
Peki Dreamweaver'ı kullanarak ilk web sitenizi nasıl kurarsınız?
Dreamweaver'a Başlarken
Onunla çalışmaya başlamadan önce Adobe Dreamweaver'ın bir kopyasını edinmeniz gerekir, ancak ücretsiz deneme sürümü mevcuttur.
şuraya git: Adobe web sitesinde oturum açın veya bir hesap açın ve başlamak için Adobe Creative Cloud aracını indirin. Buradan Adobe Dreamweaver'ı indirebilir ve kılavuzun tamamına başlayabilirsiniz.
Bu kılavuz, temel olarak Dreamweaver şablon dosyalarını kullanarak temel bir web sitesinin nasıl oluşturulacağını gösterecektir. Tüm proje dosyalarını adresinde bulabilirsiniz. bu GitHub deposu.
1. Adım: Bir Dreamweaver Sitesi Oluşturun
Adobe Dreamweaver'ı açın ve şuraya gidin: Alan sayfanın üst kısmındaki menü. Seçme Yeni site, ardından web siteniz için bir ad seçin ve bunun için bir dosya konumu seçin.
2. Adım: Bir Şablon Dosyası Oluşturun
Ardından, yeni web siteniz için bir şablon dosyası oluşturma zamanı. Şablon dosyaları, WordPress ve Shopify gibi CMS sistemleri tarafından kullanılan temalara benzer şekilde çalışır, bunları yalnızca siz yaparsınız.
Tıklamak Yeni oluşturmak ya da git Dosya > Yeni ve Seç HTML Şablonu itibaren Belge Türü liste.
Bu, bazı HTML'lerin zaten yerinde olduğu temel bir şablon oluşturacaktır. Bu HTML'yi projeniz için kullanacaksınız, bu nedenle sonraki adımlar için yerinde tutmaya değer.
Adım 3: Şablonda Bir Başlık Oluşturun
Şimdi web sitesindeki menü/başlık bölümünü az önce oluşturduğunuz şablonda oluşturma zamanı. git Sokmak Ekranın üst kısmındaki öğesini seçin ve başlık listeden.
Bu noktada bir diyalog açılacaktır. Yeni başlığınızın sınıfı için bir ad ekleyin ve TAMAM kodu HTML'nize eklemek için. Yeni kodu otomatik olarak içine yerleştirmelidir. etiketler, ancak gerekirse taşıyabilirsiniz.
Bunu takiben, sitenin logosu için bir div öğesi ve sitenin menüsü için bir nav öğesi de eklemelisiniz. şuraya git Sokmak menü ve seçin Böl, sonra geri dönün Sokmak menü ve seçin Gezinti. Bu öğelerin her ikisinin de kendi sınıf adlarına ihtiyacı vardır.
Bu işlemin son aşaması olarak navigasyon elementimize bazı menü seçenekleri ekledik. Bunu yapmak için şuraya gidin: Sokmak ve seçin köprü. Site başlığımıza beş köprü ekledik: Home, Lion, Tiger, Jaguar ve House Cat.
Başlıkta bağlantı olacak sayfalar henüz mevcut değil, bu yüzden bırakın href siz onları oluşturana kadar özellik boş.
Adım 4: CSS için Stil Sayfası ekleyin
Gördüğünüz gibi, bu web sitesi olduğu gibi çok iyi görünmüyor. Biraz CSS bu sorunu çözecektir ve Dreamweaver'da kolaylıkla bir stil sayfası ekleyebilirsiniz. şuraya git CSS Tasarımcısı Ekranın sağ tarafında tıklayın ve Artı Kaynaklar'ın yanındaki simge. Stil sayfanız için bir ad seçmeniz yeterlidir ve diğer ayarları olduğu gibi bırakabilirsiniz.
Yapılacak ilk şey, başlığı bir esnek kutuya dönüştürmektir. Flexbox, CSS kullanarak bir web sayfası düzenlemenin yalnızca bir yoludur. Bunun yanı sıra sitenin yazı tipi ayarlandı, siyah bir arka plan ayarlandı ve sitenin daha iyi görünmesi için birkaç değişiklik daha yapıldı. Tam CSS kodunu makalenin sonunda görebilirsiniz.
Adım 5: Şablona Düzenlenebilir Bölgeler Ekleyin
Düzenlenebilir bölgeler, diğer sayfaları oluşturmak için şablonu kullandığınızda düzenlenebilen HTML bölümleri oluşturur. Ana sayfa içeriğimiz tam olarak böyle bir bölgeye uyuyor. git Sokmak > Şablon > Düzenlenebilir Bölge sayfanıza düzenlenebilir bir bölge eklemek için
Adım 6: Şablona Resim/Metin İçeriği Ekleyin
Yeni eklediğiniz düzenlenebilir bölge, herhangi bir ek HTML olmadan kullanılabilir, ancak ayrı sayfalar oluşturduğunuzda düzenlemek için yine de bazılarını ekleyebilirsiniz. Başlamak için şuraya gidin: Sokmak ve seçin Böl web sitenize yeni bir div öğesi eklemek için.
Bu, hem sayfadaki metin içeriği için kap hem de arka plan resmi eklemek için bir yer olarak çalışacaktır. Bu öğenin bir sınıfı ve kimliği vardır, böylece farklı sayfalar farklı CSS özelliklerine sahip olur. Bunlar benzersiz CSS arka plan desenleri Dreamweaver web sitenizi bir sonraki seviyeye taşımak istiyorsanız harikadır.
Sonra, git Sokmak > Başlıklar > H1 az önce eklediğiniz div öğesinin içine bir başlık eklemek için. Bu öğelerin her ikisinin de düzgün çalışması için biraz CSS'ye ihtiyacı vardır. Div, arka plan görüntüsü, arka plan boyutu ve yükseklik değerlerine sahiptir. git Dosya > Hepsini kaydet şablonunuzun güncellendiğinden emin olmak için.
Görüntüleri yerel ağınızdaki veya internetteki herhangi bir yerden ekleyebilirsiniz, ancak kolay erişim için görüntüleri web sitesinin kendi dosyalarına kaydetmek en iyisidir.
7. Adım: Şablonlu Sayfalar Ekleyin
Artık bir şablonunuz olduğuna göre, bazı sayfalar eklemeye başlayabilirsiniz. git Dosya > Yeni ve seçin HTML altında Belge Türü. Ekle Başlık vurmadan önce eklediğiniz her sayfa için Oluşturmak.
Yeni sayfa beyazdır ve henüz şablonumuza sahip değildir. Dreamweaver'da yeni sayfanız açıldığında, şuraya gidin: Aletler > şablonlar ve üzerine tıklayın Şablonu Sayfaya Uygula. Listeden şablonunuzu seçin ve tıklayın. Seçme şablonunuzu yüklemek için Son olarak, git Dosya > Farklı kaydet ve kaydetmeden önce yeni sayfanız için bir ad seçin.
İhtiyaçlarınızı karşılayacak kadar sayfanız olana kadar bu işlemi tekrarlayın. Bunun için tek bir şablona bağlı kalmanıza gerek yok; farklı sayfa düzenleri için yenilerini ekleyebilirsiniz.
8. Adım: Şablona Sayfa Bağlantıları Ekleyin
Sayfalarınız eklendiğinde, şablonunuzdaki gezinme bağlantılarını doğru sayfalara bağlantı verecek şekilde değiştirebilirsiniz. Şablonunuza geri dönün ve daha önce eklediğiniz A etiketlerini bulun. Yer tutucu bağlantısını silin ve alıntı işaretleri açmak için Araştır Menü. Buradan, bağlantılarınızın her biri için doğru sayfayı seçebilirsiniz.
9. Adım: Yeni Sayfalarda CSS/HTML'yi Düzeltin
Sayfaların her biri şu anda aynı görünecek. Kendi içeriklerine sahip olmalarını sağlamak için atılması gereken birkaç adım vardır; yeni web sitenizi tamamlamak için aşağıdaki adımları izleyin.
- Sayfa başlığını yansıtmak için her sayfadaki içerik div öğesi kimliğini değiştirin
- Farklı bir arka plan görüntüsüyle yeni öğe kimliği için CSS kodu ekleyin
- Her sayfada başlığı değiştirin
Adım 10: Web Sitesini Tarayıcınızda Test Edin
Yeni web sitenizi doğrudan Adobe Dreamweaver'dan tercih ettiğiniz web tarayıcınızda test edebilirsiniz. git Dosya > Gerçek Zamanlı Önizleme ve web sitenizi görüntülemek için tercih ettiğiniz tarayıcıyı seçin. Bu, CSS'yi veya her tarayıcıyla uyumlu olmayan diğer kodları test etmek için harikadır.
Artık sadece web sitenizi barındıracak bir yere ihtiyacınız var. AWS S3 ile statik bir site barındırma başlamak için harika bir yerdir.
HTML ve CSS Kodu
<!doctype html>
<html>
<kafa>
<meta karakter kümesi="utf-8">
<!-- TemplateBeginDüzenlenebilir ad="belge" -->
<Başlık>Başlıksız Belge</title>
<!-- ŞablonEndDüzenlenebilir -->
<bağlantı href="../page-css.css" rel="stil sayfası" tip="metin/css">
</head>
<gövde>
<başlık sınıfı="ana başlık">
<div sınıfı="site logosu">MakeUseOf Örnek Site</div>
<gezinme sınıfı="ana menü">
<a href="../Ana Sayfa.html">Ev</a><a href="../Lion.html">Aslan</a><a href="../Tiger.html">Kaplan</a><a href="../Jaguar.html">Jaguar</a><a href="../Ev Kat.html">Ev kedisi</a>
</nav>
</header>
<!-- TemplateBeginDüzenlenebilir ad="AnaİçerikBölge" -->
<div sınıfı="ana içerik" kimlik="aslan">
<h1>Bu bir aslan!</h1>
</div>
<!-- ŞablonEndDüzenlenebilir -->
</body>
</html>
Bu HTML, projemiz için bitmiş web sitesini oluşturur. Nasıl çalıştığını görmek için parçalara ayırabilirsiniz, ancak web siteniz için kendi HTML'nizi oluşturmanızı öneririz.
@karakter seti "utf-8";
gövde {
kenar boşluğu: 0;
arka plan: siyah;
yazı tipi ailesi: Gotham, "Helvetica Neue", Helvetica, Arial, "sans Serif";
}
.main-başlık {
ekran: esnek;
arka plan: siyah;
dolgu: 20 piksel;
}
.site-logosu {
genişlik: %30;
Beyaz renk;
yazı tipi ağırlığı: kalın;
metin dönüştürme: büyük harf;
}
.ana menü {
genişlik: %70;
metin hizalama: sağa;
}
.ana menüa {
dolgu: 10 piksel;
metin-dekorasyon: yok;
Beyaz renk;
}
.ana içerik {
yükseklik: 100vh;
dolgu: 20 piksel;
arka plan boyutu: kapak;
}
.ana içerikh1 {
Beyaz renk;
yazı tipi boyutu: 10rem;
metin dönüştürme: büyük harf;
}
#aslan {
arka plan resmi: url("Resimler/largelion.png");
}
#kaplan {
arka plan resmi: url("Resimler/kaplan.png");
}
#jaguar {
arka plan resmi: url("Resimler/jaguar.png");
}
#ev kedisi {
arka plan resmi: url("Resimler/housecat.png");
}
#allcats {
arka plan resmi: url("Resimler/loadsofcats.png");
}Bu CSS de bitmiş projenin bir parçasıdır. Ele aldığımız HTML gibi, bu web sitesini kendinize ait yapmak için bu kodla oynayabilirsiniz.
Adobe Dreamweaver ile Web Siteleri Oluşturma
Dreamweaver, WordPress veya Squarespace gibi araçlar kadar kullanımı kolay görünmeyebilir, ancak size çok daha fazla güç verir. Bu kılavuz harika bir başlangıç noktasıdır, ancak öğrenecek daha çok şey vardır ve Dreamweaver'ı kendiniz keşfetmeye değer.