Microsoft Expression Web - Web Sayfası Düzeni
Bu bölümde, web sayfalarınızın temel düzenini ele alacağız. Web sayfası düzenimizi oluşturmadan önce, içeriğimizi düşünmemiz ve ardından web sitemizde görülebilecek içerik olduğu için bu içeriği nasıl sunmak istediğimizi tasarlamamız gerekir.
İzleyicilerimizin sitemizi bulması ve daha sonra sitemizi kontrol etmesi için içeriğimizi nasıl sunduğumuz bize bağlıdır. Düzen muhtemelen üstte şirket logosunu veya başlığını, gezinme menüsünü, birden çok sütun içerebilen bir içerik alanını ve sayfanın altında altbilgiyi içerecektir.
Daha önce, geliştiriciler bu görünümü elde etmek için tablolar kullanıyordu. Tablolar, satırlar ve sütunlar oluşturmak için kullanılan kutular grubu oluşturdu. Artık web tasarımcıları şunu kullanıyor:<div>s kutuları oluşturmak için CSS ve bu kutuları sayfaya yerleştirmek için.
<div> etiketi
Aşağıda <div> etiketinin bazı özellikleri verilmiştir.
<div> etiketi, bir HTML belgesindeki bir bölümü veya bölümü tanımlar ve bu bölümleri veya bölümleri yönetmeyi, biçimlendirmeyi ve değiştirmeyi kolaylaştırır.
Blok elemanlarını CSS ile formatlamak için gruplamak için kullanılır.
Tarayıcılar genellikle div öğesinden önce ve sonra bir satır sonu yerleştirir.
<div> etiketi, blok düzeyinde bir öğedir.
<div> etiketi neredeyse tüm diğer öğeleri içerebilir.
<div> etiketi, <p> etiketinin içinde olamaz.
Misal
Çeşitli kutuları ve stil kuralları oluşturmak için <div> </div> etiketlerini kullanacağımız basit bir örneğe bakalım.
Step 1 - Expression Web'i açın ve ardından index.html önceki bölümde oluşturduğumuz sayfa.
Step 2- Yukarıdaki ekran görüntüsünde görüldüğü gibi, Kod Görünümü varsayılan olarak vurgulanmıştır. ÇalışabilirsinCode View veya Design View, ancak hem Kod Görünümünü hem de Tasarım Görünümünü açacak Bölünmüş Görünümü de görebilirsiniz. Öyleyse seçelimSplit View seçeneği.
Step 3 - bodyöğesi belgenin gövdesini tanımlar. <body> etiketini biçimlendirmek için yeni bir stil oluşturmamız gerekiyor. Önce Tasarım Görünümünde gövde etiketini seçin ve ardındanNew Style…Yeni Stil iletişim kutusunu açan Stilleri Uygula panelinde. Burada tarzınız için farklı seçenekleri tanımlayabilirsiniz.
Step 4 - İlk adım, body -den Selectoraçılır listeyi seçin ve ardından açılır listedeki "Tanımla" dan Mevcut stil sayfasını seçin. URL'den, önceki bölümde oluşturduğumuz CSS dosyasını seçin.
Sol tarafta bir CategoryYazı Tipi, Arka Plan vb. gibi bir liste ve mevcut Yazı Tipi vurgulanır. Yazı tipiyle ilgili bilgileri, yukarıdaki ekran görüntüsünde gösterildiği gibi gereksinimlerinize göre ayarlayın.
Step 5 - seçin Background colorİstediğiniz. Ayrıca, tarayıcı düğmesini kullanarak arka planınızın resmini de seçebilirsiniz. Arkaplan ile işiniz bittiğinde, isterseniz Sınırlarınızı tanımlayın.
Step 6 - Seçelim double linekenarlık seçeneğini seçin ve ayrıca açılır listelerden genişliği ve rengi seçin. Stili tamamladığınızda Tamam'ı tıklayın.
Step 7- Artık tasarım görünümünde arka plan renginin bizim seçtiğimiz renkle değiştirildiğini görebilirsiniz. Sample.css dosyasını açarsanız, tüm bilgilerin otomatik olarak CSS dosyasında saklandığını göreceksiniz.
Step 8 - Şuraya git index.html sayfayı tekrar sürükleyin ve <div> 'Araç Kutusu' panelinden açın ve açık sayfanıza bırakın.
Step 9 - Üstü code view, göreceksin <body> ve <div> etiketler, tıklayın <div>etiketini seçin ve ardından Stilleri Uygula panelinde Yeni Stil… seçeneğine tıklayın. Yeni Stil iletişim kutusunu açacaktır.
Selector alanına "#container" yazın. Karma işareti # bir kimlik seçicidir. "Tanımla" açılır listesinden, Mevcut stil sayfasını seçin ve "Belge seçimine yeni stil uygula" seçeneğini işaretleyin. Arka Plan kategorisine gidin.
Step 10 - Arka plan rengini seçin, beyaz rengi seçelim ve ardından Kutu kategorisine geçelim.
Step 11 - Tanımla padding ve margin ve sonra şuraya git Position kategori
Step 12- Genişliği% 90 olarak ayarlayın. Ancak, içeriği girdiğimizde kabın genişlemesini istediğimiz gibi yüksekliği burada belirtmeyin. Tamam düğmesini tıklayın.
Benzer şekilde, Üstbilgi, üst gezinme, sol gezinme, ana içerik ve altbilgi için stiller ekleyelim.
sample.css
Aşağıdaki kod sample.css yukarıda belirtilen tüm stilleri ekledikten sonra stil sayfası.
body {
font-family: Calibri;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #0000FF;
background-color: #CCFFFF;
background-image: none;
border: medium double #FF0000;
}
#container {
background-color: #FFFFFF;
padding: 8px;
margin: 8px;
width: 90%;
}
#header {
background-color: #54B431;
background-repeat: no-repeat;
background-position: right center;
height: 170px;
}
#top-nav {
height: 50px;
border-top: solid medium #006600;
border-bottom: solid medium #006600;
background-color: #FFFFFF;
}
#left-nav {
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: thin dashed #006600;
}
#main-content {
margin: 20px 10px 10px 200px;
background-color: #CCFFCC;
}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0px;
text-align: center;
}
index.html
Tüm <div> etiketlerini ekledikten sonra index.html dosyasındaki kod aşağıdadır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav"></div>
<div id = "left-nav"></div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>
Çıktı
Tasarım görünümündeki sayfa düzeniniz, aşağıdaki ekran görüntüsünde gösterildiği gibi görünecektir.