In Aptana Studio 3, Create Web Page With CSS Method 1

In this video tutorial, I will show you make the web page with CSS method in Aptana Studio 3 and The professional, open source development tool for the open web. Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python. We've got you covered!

Aptana Studio 3 programında bu dersimde CSS yöntemi ile görsel olarak göze hitap eden web tasarımı nasıl yapılır onun ilk kısmını gösterceğim. Bu yöntem hem pratik hemde çok kullanışlıdır. İstediğiniz yerde oynama imkanı vermektedir. Lütfen dikkatle takip edip sizlerde uygulayınız.

Source

CSS etiketleri günümüzde de halen kullanılan kendi tasarımlarını yapmak isteyenlerin başvurduğu en pratik yöntemlerden birisidir. Verdiğim kısa yolları muhakkak kayıt ediniz ki tasarım yapacaksanız büyük kolaylık sağlasın size. Hadi videoya geçelim.

Index.html Kodları

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Main Page</title>
        <meta charset ="utf-8">
    <link rel="stylesheet" href="stil.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    </head>
    
    <body>
    <nav>
        <a href="#">HOME</a>
        <a href="#">SERVICES</a>
        <a href="#">WORKS</a>
        <a href="#">ABOUT</a>
        <a href="#">SUPPORT</a>
        <a href="#">CONTACT</a>
    </nav>
    <div id="gor1" class="gorsel">
        <div class="anasayfa anayazi"></div>
        <div class="anasayfa anafiltre"></div>  
    </div>  
    <div id="say1" class="sayfa"></div>     
    <div id="gor2" class="gorsel"></div>        
    <div id="say2" class="sayfa"></div> 
    <div id="gor3" class="gorsel"></div>        
    <div id="say3" class="sayfa"></div>
    
    </body>
    
    </html>

Stil.css Kodları

*{
    margin: 0px;
    padding: 0px;   
}
body, html{
    height: 100%;
}
nav{
    z-index: 2;
    position: absolute;
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
}
nav a{
    color: #fff;
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    margin-left: 15px;
    text-decoration: none;
    padding: 12px 12px;
}
nav a:hover{
    background-color: #000;
}
.gorsel{
    height: 100%;
    background-color: lightblue;
    background-size: cover;
    background-attachment: fixed;
}
.sayfa{
    height: 50%;
    background-color: lightgreen;
}
#gor1{
    background-image: url("1.jpg");
}
#gor2{
    background-image: url("2.jpeg");
}
#gor3{
    background-image: url("3.jpg");
}
.anasayfa{
    position: absolute;
    float: left;
}
.anayazi{
    height: 200px;
    width: 100px;
    background-color: red;
    z-index: 1;
}
.anafiltre{
    height: 100%;
    width: 100%;
    background-color: #000;
    z-index: 0;
    opacity: 0.42;
}

Bir sonraki aşamada görüşmek üzere…

Githup link: Aptana Studio 3

İndirme Link Sitesi: Aptana Studio 3

Posted on Utopian.io - Rewarding Open Source Contributors

In Aptana Studio 3, Create Web Page With CSS Method 1– Turkish Tutorial