Şimdi Ara

Psdyi htmlye çevirmek

Bu Konudaki Kullanıcılar:
2 Misafir (1 Mobil) - 1 Masaüstü1 Mobil
5 sn
6
Cevap
0
Favori
509
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • fireworks ile yaptığım bir çalışmayı htmlye çevirmek istiyorum , internetten güzel dersler var mı ve css ne demek .

    birde psd to html siteleri var ama onlar yanlış çıkartıyormuş .



    _____________________________
  • Hemşerimsin ama kusura bakma. Güzel kardeşim internette var mı diyeceğine internete yazsana Fireworks dersleri diye .

    Neyse. CSS dediğin şey, HTML üzerindeki şekillendirme yükünü almak, aynı şekillendirmeyi birden fazla HTML belgesine uygulayabilmek ve bir HTML belgesinin belli bir elemanını ya da aynı şekilendirme özelliği taşıması gereken birden fazla elemanını şekillendirmek için kullanılan stil dosyalarına denir. HTML biliyorsan öğrenmesi basittir.

    Açıklama pek açıklayıcı olmayabilir. Hemen örnekleyelim.

    Bu dosyamıza index.html diyelim.

     

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Kullanımı</title>
    <!--<link ... diye başlayan kısma dikkat -->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--css dosyasını html dosyasına bağladık -->
    </head>

    <body>
    <h1>CSS Derslerine Hoşgeldiniz (Bu bir H1 elementidir.)</h1>
    <p id="id_nedir">ID bir HTML elementinin eşsiz kimliği olup aynı ID, aynı belge içerisinde bir başka HTML elementine verilemez (Bu 'id_nedir' ID'li bir P elementidir)</p>
    <p class="class_nedir">CLASS, ID gibi yine bir HTML elementinin kimliği olup eşsiz değildir ve aynı CLASS birden fazla HTML elementine verilebilir. (Bu 'class_nedir' CLASS'lı bir P elementidir)</p>
    <h3 class="class_nedir">Gördüğünüz gibi, son iki paragraf aynı CLASS ismine, dolayısı ile, CSS dosyasında tanımlandığı üzere aynı yazı rengine sahiptir. (Bu da 'class_nedir' CLASS'lı bir H3 elementidir)</h3>
    </body>
    </html>



    Bu dosyamız da about_us.html olsun

     

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Kullanımı</title>
    <!--<link ... diye başlayan kısma dikkat -->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--css dosyasını html dosyasına bağladık -->
    </head>

    <body>
    <h1>CSS Derslerine Hoşgeldiniz (Bu bir H1 elementidir.)</h1>
    <p id="id_nedir">ID bir HTML elementinin eşsiz kimliği olup aynı ID, aynı belge içerisinde bir başka HTML elementine verilemez (Bu 'id_nedir' ID'li bir P elementidir)</p>
    <p class="class_nedir">CLASS, ID gibi yine bir HTML elementinin kimliği olup eşsiz değildir ve aynı CLASS birden fazla HTML elementine verilebilir. (Bu 'class_nedir' CLASS'lı bir P elementidir)</p>
    <h3 class="class_nedir">Gördüğünüz gibi, son iki paragraf aynı CLASS ismine, dolayısı ile, CSS dosyasında tanımlandığı üzere aynı yazı rengine sahiptir. Burada da gördüğünüz üzere index.html dosyasında kullandığımız style.css dosyasını burada kullandık ve gördük ki CSS HTML dosyasındaki kalabalığı önler ve tek bir dosya ile birden fazla dosyada aynı işlemleri yinelemeksizin uygulamamazı sağlar. Ayrıca farkedeceğiniz üzere class isimlerinde bir değişiklik yoktur. Dilerseniz class adını değiştirmeden P elementi yerine DIV elementi, H3 elementi yerine H6 elementi koyup renk özellklerinin element ne olursa olsun değişmediğini görebilirsiniz. (Bu da 'class_nedir' CLASS'lı bir H3 elementidir)</h3>
    </body>
    </html>



    Son olarak bu da style.css dosyamız

     

    /*style.css*/

    /*doğrudan element adını, örneğin aşağıda olduğu gibi "h1" yazarak şekil verirsek,*/
    /*bir HTML dosyasındaki tüm "h1" elementleri burada belirtilen şekillendirmeyi taşır*/
    h1 {
    color:#AFAFAF;
    }

    /*ID'ler CSS dosyalarında başlarında "#" operatörü ve devamında ID ismi yazılarak tanımlanır.*/
    /*ID yalnızca bir elementte bulanabileceği için sadece o ID'yi taşıyan element,*/
    /*o ID için tanımlanan şekillendirmeyi alır*/

    #id_nedir {
    color:#1A8FAC;
    }

    /*CLASS'lar CSS dosyalarında başlarında "." operatörü ve devamında CLASS ismi yazılarak tanımlanır.*/
    /*Aynı CLASS ismi birden fazla elemente verilebildiği için aynı CLASS adını taşıyan tüm elementler*/
    /*o CLASS için tanımlanan şekillendirmeyi alır*/

    .class_nedir {
    color:#FF0000;
    }

    /*style.css bitti*/



    Bu dosyaların herbirini kaydedip browserda açarsan açıklamaları görerek anlaman daha rahat olur. Umarım yardımcı olur.
    _____________________________
    Kurumsal Web Siteleri İçin Tercüme Hizmeti
    HTML, CSS, JavaScript, jQuery, XML, XPATH, XQuery, PHP
    Perl, Ruby, Python and F# Learner
    Fedora Linux Addict
    Apache Configurator




  • quote:

    Orijinalden alıntı: TradeMark

    Hemşerimsin ama kusura bakma. Güzel kardeşim internette var mı diyeceğine internete yazsana Fireworks dersleri diye .

    Neyse. CSS dediğin şey, HTML üzerindeki şekillendirme yükünü almak, aynı şekillendirmeyi birden fazla HTML belgesine uygulayabilmek ve bir HTML belgesinin belli bir elemanını ya da aynı şekilendirme özelliği taşıması gereken birden fazla elemanını şekillendirmek için kullanılan stil dosyalarına denir. HTML biliyorsan öğrenmesi basittir.

    Açıklama pek açıklayıcı olmayabilir. Hemen örnekleyelim.

    Bu dosyamıza index.html diyelim.

     

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Kullanımı</title>
    <!--<link ... diye başlayan kısma dikkat -->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--css dosyasını html dosyasına bağladık -->
    </head>

    <body>
    <h1>CSS Derslerine Hoşgeldiniz (Bu bir H1 elementidir.)</h1>
    <p id="id_nedir">ID bir HTML elementinin eşsiz kimliği olup aynı ID, aynı belge içerisinde bir başka HTML elementine verilemez (Bu 'id_nedir' ID'li bir P elementidir)</p>
    <p class="class_nedir">CLASS, ID gibi yine bir HTML elementinin kimliği olup eşsiz değildir ve aynı CLASS birden fazla HTML elementine verilebilir. (Bu 'class_nedir' CLASS'lı bir P elementidir)</p>
    <h3 class="class_nedir">Gördüğünüz gibi, son iki paragraf aynı CLASS ismine, dolayısı ile, CSS dosyasında tanımlandığı üzere aynı yazı rengine sahiptir. (Bu da 'class_nedir' CLASS'lı bir H3 elementidir)</h3>
    </body>
    </html>



    Bu dosyamız da about_us.html olsun

     

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Kullanımı</title>
    <!--<link ... diye başlayan kısma dikkat -->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--css dosyasını html dosyasına bağladık -->
    </head>

    <body>
    <h1>CSS Derslerine Hoşgeldiniz (Bu bir H1 elementidir.)</h1>
    <p id="id_nedir">ID bir HTML elementinin eşsiz kimliği olup aynı ID, aynı belge içerisinde bir başka HTML elementine verilemez (Bu 'id_nedir' ID'li bir P elementidir)</p>
    <p class="class_nedir">CLASS, ID gibi yine bir HTML elementinin kimliği olup eşsiz değildir ve aynı CLASS birden fazla HTML elementine verilebilir. (Bu 'class_nedir' CLASS'lı bir P elementidir)</p>
    <h3 class="class_nedir">Gördüğünüz gibi, son iki paragraf aynı CLASS ismine, dolayısı ile, CSS dosyasında tanımlandığı üzere aynı yazı rengine sahiptir. Burada da gördüğünüz üzere index.html dosyasında kullandığımız style.css dosyasını burada kullandık ve gördük ki CSS HTML dosyasındaki kalabalığı önler ve tek bir dosya ile birden fazla dosyada aynı işlemleri yinelemeksizin uygulamamazı sağlar. Ayrıca farkedeceğiniz üzere class isimlerinde bir değişiklik yoktur. Dilerseniz class adını değiştirmeden P elementi yerine DIV elementi, H3 elementi yerine H6 elementi koyup renk özellklerinin element ne olursa olsun değişmediğini görebilirsiniz. (Bu da 'class_nedir' CLASS'lı bir H3 elementidir)</h3>
    </body>
    </html>



    Son olarak bu da style.css dosyamız

     

    /*style.css*/

    /*doğrudan element adını, örneğin aşağıda olduğu gibi "h1" yazarak şekil verirsek,*/
    /*bir HTML dosyasındaki tüm "h1" elementleri burada belirtilen şekillendirmeyi taşır*/
    h1 {
    color:#AFAFAF;
    }

    /*ID'ler CSS dosyalarında başlarında "#" operatörü ve devamında ID ismi yazılarak tanımlanır.*/
    /*ID yalnızca bir elementte bulanabileceği için sadece o ID'yi taşıyan element,*/
    /*o ID için tanımlanan şekillendirmeyi alır*/

    #id_nedir {
    color:#1A8FAC;
    }

    /*CLASS'lar CSS dosyalarında başlarında "." operatörü ve devamında CLASS ismi yazılarak tanımlanır.*/
    /*Aynı CLASS ismi birden fazla elemente verilebildiği için aynı CLASS adını taşıyan tüm elementler*/
    /*o CLASS için tanımlanan şekillendirmeyi alır*/

    .class_nedir {
    color:#FF0000;
    }

    /*style.css bitti*/



    Bu dosyaların herbirini kaydedip browserda açarsan açıklamaları görerek anlaman daha rahat olur. Umarım yardımcı olur.

    hocam zaten fireworks dersi alıyorum , html ve css dersi almıyorum . 1 tane çevirme dersi buldum ama linki kırık diğer derslerde ingilizce , türkçe yok



    < Bu mesaj bu kişi tarafından değiştirildi recep_37 -- 1 Ekim 2011; 15:37:37 >
    _____________________________




  • sanalkurs.net bi bak istersen
    _____________________________
  • quote:

    Orijinalden alıntı: gokhanbey

    sanalkurs.net bi bak istersen

    Evet Orada Güzel Anlatımlar Var Bende Öneririm
    _____________________________
  • İyi CSS ve HTML bilen, grafik tasarım yönü kuvvetli birinin, PSD to HTML yapmasına çok da gerek yok. Dİirekt CSS yazarak ilerleyebilirsin önce çizip sonra HTML'ye çevirmen ancak iş yükünü arttırır.
    _____________________________
    Freelance Web & Grafik Tasarım Hizmetleri
    | Antalya Web Tasarım |

    www.umutozturk.com.tr
  • Yapay Zeka’dan İlgili Konular
    Daha Fazla Göster
    
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.