Adobe’nin Dreamweaver’ı, esneklikten ödün vermeden eksiksiz bir web sitesi oluşturmak için kullanabileceğiniz yerleşik bir web tasarım aracıdır.
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.
Adobe web sitesine gidin, 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ı bu GitHub deposunda bulabilirsiniz.
1. Adım: Bir Dreamweaver Sitesi Oluşturun
Adobe Dreamweaver’ı açın ve sayfanın üst kısmındaki Site menüsüne gidin . Yeni Site öğesini seçin, 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.
Yeni Oluştur’a tıklayın veya Dosya > Yeni’ye gidin ve Belge Türü listesinden HTML Şablonu’nu seçin.
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 onu 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ı. Ekranın üst kısmındaki Ekle’ye gidin ve listeden Başlık’ı seçin .
Bu noktada bir diyalog açılacaktır. Yeni başlığınızın sınıfı için bir ad ekleyin ve kodu HTML’nize eklemek için Tamam’ı tıklayın. Yeni kodu otomatik olarak <body></body> etiketleri içine yerleştirmelidir, ancak gerekirse onu taşıyabilirsiniz.
Bunu takiben, sitenin logosu için bir div öğesi ve sitenin menüsü için bir nav öğesi de eklemelisiniz. Ekle menüsüne gidin ve Div öğesini seçin , ardından Ekle menüsüne geri dönün ve Nav öğesini seçin . 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 Ekle’ye gidin ve Köprü’yü seçin . Site başlığımıza beş köprü ekledik: Home, Lion, Tiger, Jaguar ve House Cat.
Başlıkta bağlantıları olacak sayfalar henüz mevcut değil, bu yüzden onları oluşturana kadar href özelliğini boş bırakın.
4. Adım: CSS için Stil Sayfası ekleyin
Gördüğünüz gibi, bu web sitesi olduğu gibi pek iyi görünmüyor. Biraz CSS bu sorunu çözecektir ve Dreamweaver’da kolaylıkla bir stil sayfası ekleyebilirsiniz. Ekranın sağ tarafındaki CSS Tasarımcısına gidin ve Kaynaklar’ın yanındaki Artı simgesine tıklayın. 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. Sayfanıza düzenlenebilir bir bölge eklemek için Ekle > Şablon > Düzenlenebilir Bölge’ye gidin.
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 Ekle’ye gidin ve web sitenize yeni bir div öğesi eklemek için Div’i seç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. Dreamweaver web sitenizi bir sonraki seviyeye taşımak istiyorsanız, bu benzersiz CSS arka plan desenleri harikadır.
Ardından, az önce eklediğiniz div öğesinin içine bir başlık eklemek için Ekle > Başlıklar > H1’e gidin. 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. Şablonunuzun güncellendiğinden emin olmak için Dosya > Tümünü Kaydet’e gidin .
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. Dosya > Yeni’ye gidin ve Belge Türü altında HTML’yi seçin. Oluştur’a basmadan önce eklediğiniz her sayfa için bir Başlık ekleyin .
Yeni sayfa beyazdır ve henüz şablonumuza sahip değildir. Dreamweaver’da yeni sayfanız açıldığında, Araçlar > Şablonlar’a gidin ve Şablonu Sayfaya Uygula öğesine tıklayın . Listeden şablonunuzu seçin ve şablonunuzu yüklemek için Seç’e tıklayın. Son olarak, Dosya > Farklı Kaydet’e gidin 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 Gözat menüsünü açmak için tırnak işaretlerine tıklayın. 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. Dosya > Gerçek Zamanlı Önizleme’ye gidin 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ırmak, başlamak için harika bir yerdir.
HTML ve CSS Kodu
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<!– TemplateBeginEditable name=”doctitle” –>
<title>Untitled Document</title>
<!– TemplateEndEditable –>
<link href=”../page-css.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<header class=”main-header”>
<div class=”site-logo”>MakeUseOf Example Site</div>
<nav class=”main-menu”>
<a href=”../Home.html”>Home</a><a href=”../Lion.html”>Lion</a><a href=”../Tiger.html”>Tiger</a><a href=”../Jaguar.html”>Jaguar</a><a href=”../House Cat.html”>House Cat</a>
</nav>
</header>
<!– TemplateBeginEditable name=”MainContentRegion” –>
<div class=”main-content” id=”lion”>
<h1>This is a lion!</h1>
</div>
<!– TemplateEndEditable –>
</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.
@charset “utf-8”;
body {
margin: 0;
background: black;
font-family: Gotham, “Helvetica Neue”, Helvetica, Arial, “sans-serif”;
}
.main-header {
display: flex;
background: black;
padding: 20px;
}
.site-logo {
width: 30%;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.main-menu {
width: 70%;
text-align: right;
}
.main-menu a {
padding: 10px;
text-decoration: none;
color: white;
}
.main-content {
height: 100vh;
padding: 20px;
background-size: cover;
}
.main-content h1 {
color: white;
font-size: 10rem;
text-transform: uppercase;
}
#lion {
background-image: url(“Images/largelion.png”);
}
#tiger {
background-image: url(“Images/tiger.png”);
}
#jaguar {
background-image: url(“Images/jaguar.png”);
}
#housecat {
background-image: url(“Images/housecat.png”);
}
#allcats {
background-image: url(“Images/loadsofcats.png”);
}
Bu CSS aynı zamanda 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.