Microsoft Expression Web - HTML Düzeni
Bu bölümde, bir sayfanın düzenini tasarlamanın başka bir yolunu öğreneceğiz. Son bölümde, stilleri üstbilgi, altbilgi vb. Öğelere uygulamak için stil sayfasını kullandık, ancak stilleri ek bir stil sayfası kullanmadan HTML sayfasının kendisinde de belirtebilirsiniz.
Bu, bir düzen tasarlamak için önerilen yol değildir, ancak sadece anlamak amacıyla, bu tekniği burada ele alacağız. Aşağıda verilen adımları takip etmeye çalışın.
Step 1 - Bir HTML sayfası ekleyelim ve diyelim layoutdemo.html
Step 2 - Şimdi ekleyin <div> tag Araç Kutusu'ndan.
Step 3 - içinde Apply Styles paneline tıklayın New Style…
Step 4- "Şurada tanımla" açılır menüsünden Geçerli sayfa seçeneğini seçtiğinizde stil aynı HTML sayfasına kaydedilir. Sayfanız için Yazı Tipini ayarlayın ve ardından Arka Plan kategorisine gidin.
Step 5- Arkaplanınızın rengini ayarlayın. Ayrıca Kenarlık, Kutu ve Konum kategorilerini ayarlayabilir ve ardından Tamam'ı tıklayabilirsiniz.
layoutdemo.html
Stilin aynı HTML dosyasına eklendiğini görebilirsiniz.
<!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" />
<title>Untitled 1</title>
<style type = "text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #800000;
background-color: #C0C0C0;
padding: 8px;
margin: 8px;
width: 90%;
}
</style>
</head>
<body>
<div id = "container"></div>
</body>
</html>
Benzer şekilde, yukarıda gösterildiği gibi üstbilgi, altbilgi, ana içerik vb. Gibi başka stiller de ekleyebilirsiniz.