bilişim teknolojileri eğitimi – video dersler
Dreamweaver
Bilişim Teknolojileri Alanı
Web Tasarım ve Programlama Dersi
Adobe Dreamweaver cs4 video dersleri
1. Dönem Html Uygulamaları
Javascript Örneği
10 Oca
<head>
<script>
function mesaj()
{
var.deger=form1.yazi.value;
alert (deger);
}
</haed>
<body>
<form>
<input type="text" name="yazi"
onclick="mesaj()"/>
</form>
</body>
Linkler İçin CSS Oluşturma
20 Eki
<head>
<style type="text/css">
a { font:"comis sans ms" cursive;
font-size:25pt;
text-decoration:none;}
a:hover { font:"comis sans ms" cursive;
font-size:28pt;
text-decoration:underline;
color:#F00;
}
a:visited {
font-size:15pt;
text-decoration:underline overline;
color:#600;
font-family:"comis sans ms" cursive;
}
a:active {
font:"comis sans ms" cursive;
font-size:15pt;
text-decoration:underline;
color:#96C;
}
</style>
</head>
<body>
<a href:"http://www.szorlutml.k12.tr"> okula git </a>
</body>
-Resim Ekleme-
<body> <img src="araba.png" alt="son model arabam" border="1"/> </body>
CSS Tanımlama Çeşitleri
20 Eki
1-Tag Kullanımı
Hedef olarak HTML tagları belirtilir. HTML kısmından ayrıca bir ilişkilendirme yapmaya gerek yoktur.
Örnek 1:
<head>
<style type="text/css">
h1 {color:#F00;}
</style>
</head>
<body>
<h1> işte başlık </h1>
</body>
Örnek 2:
<head>
<style type="text/css">
h1 {color:#F00;}
p {font:"comic sans ms" cursive;
color:#C3C;
font-size:16px;
}
form {
background-color:#C99;
border:2px;
border-style:solid;
}
</style>
</head>
<body>
<h1> işte başlık <h1>
<p> burada renkli yazılar olacak </p>
<form>
<p> formu doldur </p>
<input type="text" name="isim">
</form>
</body>
2-Class Kullanımı
Önce CSS kısmından .class ismi {tanımlamalar} şeklinde bir tanımlama yapılır ve daha sonra HTML kısmında bu classın ismi hedef nesnenin class özelliği olarak belirtilir. Tag kullanımından farklı olarak tüm nesneleri değil sadece belirtilen nesneleri etkiler. Bu nesneler farklı tipte olabilir.
Örnek:
<head>
<style type="text/css">
.kutu {
width:300px;
height:200px;
background-color:#F60;
border-solid 2px #C30;
}
</style>
</head>
<body>
<p class="kutu"> merhaba </p>
<p> deneme </p>
</body>
3-ID Tanımlama
ID seçicisi tek bir öğeye belirli bir biçim vermek için kullanılır. ID seçicisi HTML ögesinin ID özelliğini kullanır ve “#” işareti ile tanımlanır.
-Class İle Arasındaki Fark-
Sayfa içerisinde tanımlamayı yalnızca bir kez kullanacaksak “ıd”, sayfa içerisinde yaptığımız tanımlamayı birden çok yerde kullanacaksak “class” ile tanımlama yapmalıyız.
<head>
#ad {background:#F90;}
</style>
</head>
<body>
<form>
<p>
<input type="text" ıd="ad" class="kutu"/>
</p>
<p>
<input type="checkbox" id="hobi"/>
</p>
</form>
</body>
CSS
18 Eki
Html sayfalarını daha renkli ve görsel açıdan daha zengin olmasını sağlayan tanımlamadır. Html’e yardımcıdır,rakip değildir.
Css Tanımlama Şekilleri
Tag kullanımı: hedef olarak html tagları belirtilir. Html kısmından ayrıca bir ilişkilendirme yapmaya gerek yoktur.Örneğin;
h1 {color:#500;}
başlık
örnek 2:
h1 {color:#700}
p{font:thoma,geneva,sans-serif; color:#600; font size:15px;}
form
{ bacgraund-color:#c99;border:2px; border-style:solid;}
işte burası başlık
burada renkli yazılar yer alacak
