Web Tasarım ve Programlama Dersi Css Uygulama Sınavında bizden aşağıdaki ekran görüntüsü verilen sayfanın oluşturulması istenmektedir, bunun takip edilecek işlem basamakları ve uygulamanın cevabı …:
Soru 1) Web sayfasının arka plan resmi olarak “bg.png” dosyasını ekleyiniz, sayfanın yazı fontu “Century Gothic” olacak (10 puan)
Soru 2) Bir anakutu oluşturup: genişlik: 960px, iç boşluk: 10px, kenarlık: 5px kalınlığında düz çizgi #00909e renk, arkaplan rengi: beyaz , sayfaya ortalı ve üstten 100px dış boşluk olacak şekilde biçimlendiren stil kodlarını yazınız. (20 puan)
Soru 3) h1 başlık rengi ##e25822, alt çerçeve 2px kalınlığında düz ve #1b2a49 renginde , (10 puan)
Soru 4) h2 başlık rengi #e25822, (5 puan)
Soru 5) Paragraflar her iki yana yaslı, satır yüksekliği 2, (10 puan)
Soru 6) Resimler sayfaya ortalı, alt çerçevesi 5px kalınlığında düz ve rengi #1b2a49 (10 puan)
Soru 7) Linklerin altında çizgi olmayacak, dış sağ boşluğu 20px olacak, yazı büyüklüğü 18px ve kalın olacak, linkler sayfada ortada olacak ve alt çerçevesi 5px kalınlığında düz ve rengi #1b2a49 (25 puan)
Soru 8) Linklerin üzerine gelindiğinde yazı rengi #e25822 ve altı çizgili olacak şekilde stil kodlamalarını yapınız. (10 puan)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>www.bilisimogretmeni.com CSS Uygulama Örnekleri</title>
<link rel="stylesheet" href="style.css">
<link
</head>
<body>
<div id="genel">
<h1>İçerik Yönetim Sistemi (CMS) Nedir?</h1>
<p class="resim"><img src="images/cms-nedir.png" id="cerceve" /></p>
<p>
İçerik Yönetim Sistemleri, web sitelerinin oluşturulması ve güncellenmesi için tasarlanmış web tabanlı uygulamalardır.
İşlevselliklerini artırmak ve web sitesinin yönetimini kolaylaştırmak için temalar ve eklentiler de olabilmektedir.
Halihazırda birçok içerik yönetim sistemi mevcut ve bunların her birinin güçlü ve avantajlı yönleri bulunuyor.
İsterseniz hemen göz atmaya başlayalım.
</p>
<p id="link">
<a href="#">Wordpress</a>
<a href="#">Drupal</a>
<a href="#">Joomla</a>
</p>
<p>
İçerik Yönetim Sistemleri ile ilgili geniş bilgilere yukarıdaki linklere tıklayarak resmi sitelerinden geniş bilgi alabilir yada aşağıda
vermiş olduğumuz kısa açıklamaları inceleyebilirsiniz...
</p>
<h2>
Wordpress
</h2>
<p class="resim"><img src="images/WordPress-Logo.png" id="cerceve" /></p>
<p>
WordPress içerik yönetim sistemlerinin en güçlü olanlarındandır.
Kullanımı kolay ve tasarımları göz alıcı olan bu sistem ilk olarak bir bloglama platformu olarak tasarlanmıştır.
Ancak, yavaş yavaş bazı hileler ve eklentilerin de yardımı ile güçlü bir CMS’e dönüşebilir.
Bu özelleştirme için gerek kodlama yapısı gerekse eklentilerin kullanımını iyi bilmek, olmazsa olmaz bir ihtiyaçtır.
Dünya üzerindeki internet sayfalarının yaklaşık olarak %30`na yakını bu altyapıyı kullanmaktadır.
Ünlü birçok marka ve kişi de web sayfalarını bu altyapıya emanet etmiştir.
Alanında birinciliği olan WordPress’in en büyük iki rakibi Drupal ve Joomla’dır.
Ücretli ve ücretsiz tema ve pluginleri ciddi bir pazar yaratmıştır.
</p>
<h2>
Drupal
</h2>
<p class="resim"><img src="images/drupal-logo.jpg" id="cerceve" /></p>
<p>
Drupal ücretsiz ve açık kaynak kodlu modülleri barındıran bir İçerik Yönetim Sistemi (CMS) dir.
PHP ile yazılmış olan Drupal, web tabanlı bir İçerik Yönetim Sistemidir.
Drupal ile tek kullanıcılı kişisel sitelerden, çok kullanıcılı topluluk sitelerine kadar her türlü siteyi kolayca yapabilirsiniz.
Güçlü tema özellikleri sayesinde sitenizin istediğiniz her köşesini kendi istediğiniz şekilde değiştirebilirsiniz.
Drupal büyük şirketlerden siyasi parti sitelerine, küçük kişisel bloglardan, portfolyo sitelerine kadar birçok alanda kullanılmaktadır.
2009 en iyi PHP CMS sistemi seçilmiştir.
</p>
<h2>
Joomla
</h2>
<p class="resim"><img src="images/joomla.png" id="cerceve" /></p>
<p>
Joomla! sistem olarak bir CMS’tir. Joomla şu anda dünya üzerinde en çok tercih edilen ikinci içerik yönetim sistemidir
ve alanında ödüller kazanmıştır. Bu sistem sayesinde hayal edebileceğiniz her türlü siteyi oluşturabilir, yayınlayabilir
ve geliştirebilirsiniz. Açık Kaynak (Open Source) mantığı gereği ücretsiz olarak tüm dünyaya hizmet vermektedir.
Bunun yanında dünya çapında milyonlarca gönüllü tarafından geliştirilmekte ve kusursuz bir sistem haline getirilmeye çalışılmaktadır.
Joomla her geçen gün yeni bileşenler, modüller ve eklentiler sayesinde daha da gelişmekte ve daha geniş kitlelerin ihtiyaçlarına
karşılık vermektedir.
</p>
</div>
</body>
</html>
Css Kodlarımız
body{
background-image:url("images/bg.png");
font-family:'Century Gothic';
}
#genel{
width:960px;
margin:auto;
margin-top:100px;
padding:10px;
border:5px solid #00909e;
background-color:white;
}
h1{
color:#e25822;
border-bottom:2px solid #1b2a49;
}
h2{
color:#e25822;
}
p{
text-align:justify;
line-height:2;
}
#resim{
text-align:center;
}
#cerceve
{
border-bottom:5px solid #1b2a49;
}
a{
text-decoration:none;
margin-right:20px;
font-size:18px;
font-weight:bold;
}
a:hover{
color:#e25822;
text-decoration:underline;
}
#link{
text-align:center;
border-bottom:5px solid #1b2a49;
}
İndir “Css Uygulama Sınavı”
web_sinav_css_uygulama.zip – 1984 defa indirildi – 1,87 MB
