Reklam vermek için [email protected]

Web Sitesi Nasıl Yapılır? Yeni Başlayanlar İçin

5.00 yıldız(lar) 1 Değerlendirme Değerlendirenler

Replicant

Co Administrator
Telefon Numarası Onaylanmış Üye TC Kimlik Numarası Doğrulanmış Üye
Co Admin
Katılım
7 May 2010
Konular
10,886
Mesajlar
57,419
Reaksiyon Skoru
15,567
Altın Konu
424
Başarım Puanı
686
TM Yaşı
12 Yıl 7 Ay 1 Gün
Online Süresi
250d 12h 50m
MmoLira
23,401
DevLira
595
Takipçiler
256

LordMt2 | 1-127 Level ve Bol Dönüşümlü Yapısı ile 02 Aralık Cuma Günü Saat 20:00’da Açılıyor. Sende Bu Heyecana Ortak Ol !

make-website-beginner.png

Merhaba, her zaman bir web sitesi yapmak istediniz mi? Belki HTML ve CSS eğitimlerimizden bazılarını okudunuz, ancak bu dilleri daha büyük bir projede nasıl kullanacağınızı bilmiyorsunuz.

Bugün size sıfırdan eksiksiz bir web sitesi yapma sürecinde rehberlik edeceğim. Bu zor bir görev gibi görünüyorsa endişelenmeyin, her adımda size rehberlik edeceğim.

Bu web sitesini bir jQuery dokunuşuyla HTML, CSS ve JavaScript kullanarak oluşturacaksınız (jQuery kılavuzu ). Gerçekten kanayan bir şey yapmayacaksınız , bu nedenle bu kod çoğu modern tarayıcıda oldukça iyi çalışmalıdır.

Herhangi bir CSS'den emin değilseniz , W3Schools.com'daki CSS kılavuzuna bir göz atın .

Dizayn

İşte bu web sitesinin tasarımı. Daha iyi bir görünüm istiyorsanız , yüksek çözünürlüklü bir resme bakın veya daha iyisi, tam projeyi

Website_Design_Wooden.png


PSD_Template.png

PSD'nin içinde, gruplandırılmış, adlandırılmış ve renk kodlu tüm katmanları bulacaksınız:

Template_PSD_Layers.png

Doğru görünmesi için birkaç yazı tipinin yüklü olması gerekir. İlki , tüm simgeler için kullanılan Font Awesome'dir. Diğer iki yazı tipi PT Serif ve Myriad Pro'dur (Photoshop ile birlikte verilir).

Adobe Photoshop'unuz yoksa endişelenmeyin , devam etmek için buna ihtiyacınız yok.


İlk Kod

Artık tasarım netleştiğine göre, kodlamaya başlayalım! Favori metin düzenleyicinizde yeni bir dosya oluşturun ( Sublime Text 3 kullanıyorum ). Bunu index.html olarak kaydedin . Buna istediğiniz herhangi bir şey diyebilirsiniz, birçok sayfanın indeks olarak adlandırılmasının nedeni web sunucularının çalışma şeklidir. Sunucuların çoğunluğu için varsayılan yapılandırma, sayfa belirtilmezse index.html sayfasını sunmaktır.

İşte ihtiyacınız olan kod:

Kod:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Noise Media</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
            /* CSS goes here, at the top of the page */
        </style>
    </head>
    <body>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            /* JavaScript goes here, at the bottom of the page */
        </script>
    </body>
</html>

Bu birkaç şey yapar:

  • Gerekli minimum HTML'yi tanımlar.
  • "Noise Media" için bir sayfa başlığı tanımlar
  • Google CDN'de barındırılan jQuery'yi içerir.
  • Google CDN'de barındırılan Font Awesome'i içerir.
  • CSS'nizi içine yazacağınız bir stil etiketi tanımlar .
  • JavaScript'inizin yazılacağı bir komut dosyası etiketi tanımlar .
Dosyanızı tekrar kaydedin ve web tarayıcınızda açın. Muhtemelen pek fark etmeyeceksiniz ve kesinlikle henüz bir web sitesi gibi görünmeyecek.

First_Code_Run.pngq50fitcropw750dpr1.png

Sayfa başlığının Noise Media olduğuna dikkat edin . Bu, başlık etiketinin içindeki metinle tanımlanır . Bu sahiptir içinde olmak kafa etiketleri.


Başlık

Başlığı oluşturalım. Şöyle görünüyor:

Website_Header.pngq50fitcropw750dpr1.png

En üstteki küçük gri parça ile başlayalım. Altında hafif koyu gri olan açık gri. İşte yakından bakın:

Gray_Bar_Closeup.pngq50fitcropw750dpr1.png

Bu HTML'yi en üstteki gövde etiketinin içine ekleyin :

Kod:
<div id="top-bar"></div>

Siz buradayken, bunu parçalayalım. Bir div , başka şeyler koymak için bir kap gibidir. Bu "diğer şeyler" daha fazla kap, metin, resim veya gerçekten herhangi bir şey olabilir. Nelerin belirli etiketlere girebileceği konusunda bazı kısıtlamalar vardır, ancak div'ler oldukça genel şeylerdir. Bir sahiptir kimliği ait üst bar . Bu, CSS ile biçimlendirmek ve gerekirse JavaScript ile hedeflemek için kullanılacaktır. Belirli bir kimliğe sahip yalnızca bir öğeniz olduğundan emin olun - benzersiz olmaları gerekir. Birden çok öğenin aynı ada sahip olmasını istiyorsanız, bunun yerine bir sınıf kullanın - bunun için tasarlandıkları şey bu! İşte stil vermek için ihtiyacınız olan CSS ( stil etiketinizin en üstüne yerleştirin ):

Kod:
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
    width: 100%;
    background: #F1F1F1; /* light gray */
    border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */
    height: 25px;
}

İsimden önce hash işaretinin (#, hashtag, pound işareti) nasıl kullanıldığına dikkat edin. Bu, öğenin bir kimlik olduğu anlamına gelir. Bir sınıf kullanıyorsanız, bunun yerine nokta (.) Kullanırsınız. Html ve vücut etiketler sıfıra onların dolgu ve marj set var. Bu, istenmeyen boşluk sorunlarını önler.

Logo ve gezinme çubuğuna geçme zamanı. Başlamadan önce, bu içeriği yerleştirmek için bir konteynere ihtiyacınız var. Bunu bir sınıf yapalım (böylece daha sonra tekrar kullanabilirsiniz) ve bu duyarlı bir web sitesi olmadığı için 900 piksel genişliğinde yapın.

HTML:

Kod:
<div class="normal-wrapper">
</div>

CSS:

Kod:
.normal-wrapper {
    width: 900px;
    margin: 0 auto;
    padding: 15px 40px;
    background: red;
    overflow: auto;
}

Kodu bitirene kadar neler olduğunu söylemek zor olabilir, bu nedenle neler olduğunu görmek için (geçici) renkli bir arka plan eklemek faydalı olabilir:

Kod:
background: red;

Şimdi logoyu oluşturma zamanı. Simgenin kendisi için Harika Yazı Tipi gereklidir. Font Awesome, bir vektör yazı tipi olarak paketlenmiş bir dizi simgedir - harika! Yukarıdaki ilk kod zaten Font Awesome'i kurdu, bu yüzden hepsi kullanıma hazır!

HTML:

Kod:
<div id="logo-container">
    <i class="fa fa-volume-down logo-icon"></i> <h1>Noise Media</h1>
</div>

CSS:

Kod:
.logo-icon {
    color: #000000;
    font-size: 60pt;
    float: left;
}
h1 {
    float: left;
    margin: 21px 0 0 25px;
}

Tasarımla uyuşmayan diğer yazı tipleri için endişelenmeyin - bunu daha sonra düzeltirsiniz. Farklı simgeler kullanmak isterseniz, Font Awesome Simgeler sayfasına gidin ve ardından fa-volume-down'ı kullanmak istediğiniz simgenin adına değiştirin.

Gezinme çubuğuna geçtiğinizde, bunun için sırasız bir liste ( UL ) kullanacaksınız.

HTML:


Kod:
<ul id="navbar">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Reviews</a></li>
    <li><a href="" class="last-link" >Contact</a></li>
</ul>

Href başka sayfalara bağlantı için kullanılır. Bu eğitici web sitesinde başka bir sayfa yoktur, ancak adı ve dosya yolunu (gerekirse) buraya koyabilirsiniz, örneğin reviews.html . Bunu her iki çift tırnak içine koyduğunuzdan emin olun.

İşte CSS:

Kod:
#navbar {
    list-style-type: none; /* remove bullet points */
    margin: 29px 0 0 0;
    padding: 0;
    float: right;
    font-size: 16pt;
}
#navbar li {
    display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
    text-decoration: none; /* remove underline */
    color: #000000;
    padding: 0 16px 0 10px; /* space links apart */
    margin: 0;
    border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
    /* remove divider */
    border-right: 0px;
}
#navbar li a:hover {
    /* change color on hover (mouseover) */
    color: #EB6361;
}

Bu CSS, sırasız bir listeyle başlar . Daha sonra list-style-type: none kullanarak madde imi noktalarını kaldırır ; . Bağlantılar biraz aralıklıdır ve farenizi üzerlerine getirdiğinizde bir renk verilir. Küçük gri bölücü, her öğe üzerinde sağ kenarlıktır ve daha sonra son bağlantı sınıfı kullanılarak son öğe için kaldırılır . Şöyle görünüyor:

Website_Navbar_Hover.gifq50fitcropw750dpr1.jpg

Bu bölüm için geriye kalan tek şey kırmızı yatay renk vurgusudur.

Bu HTML'yi normal sarmalayıcıdan sonra ekleyin:

Kod:
<div id="top-color-splash"></div>

Ve işte CSS:

Kod:
#top-color-splash {
    width: 100%;
    height: 4px;
    background: #EB6361;
}

Yapılan en üst bölüm budur. İşte göründüğü gibi - tasarıma oldukça benziyor, değil mi?

Website_Top_Section_Completed.pngq50fitcropw750dpr1.png

Ana İçerik Alanı

Şimdi ana içerik alanına - sözde "ekranın üst kısmına" geçme zamanı. İşte bu bölüm şuna benziyor:

Website_Main_Area.pngq50fitcropw750dpr1.png

Bu oldukça basit bir bölüm, solda bir metin ve sağda bir resim var. Bu alan, gevşek bir şekilde üçe bölünecektir .

Bu bölüm için örnek resme ihtiyacınız olacak.

HTML ekleyin sonra üst renk sıçrama elemanı:

Kod:
<div class="normal-wrapper">
    <div class="one-third">
        <h2 class="no-margin-top">Welcome!</h2>
        <p>Noise Media is a technology company specialising in tech reviews.</p>
        <p>We’re very good at what we do, but unfortunately, we are not a real company.</p>
        <p>Make sure you visit makeuseof.com for the full tutorial on how to build this website.</p>
        <p>Alternatively, check out our review of the Panasonic G80 shown on the right!</p>
    </div>
    <div class="two-third">
        <img class="featured-image" src="Image_1.jpg" />
    </div>
</div>

Normal sarmalayıcı öğesinin nasıl döndüğüne dikkat edin (sınıfları kullanmanın keyfi budur). Image ( img ) etiketinin neden kapanmadığını merak ediyor olabilirsiniz . Bu, kendi kendine kapanan bir etikettir. Eğik çizgi ( /> ) bunu belirtir, çünkü bir etiketi kapatmak zorunda olmak her zaman mantıklı değildir.

CSS:

Kod:
.one-third {
    width: 40%;
    float: left;
    box-sizing: border-box; /* ensure padding and borders do not increase the size */
    margin-top: 20px;
}
.two-third {
    width: 60%;
    float: left;
    box-sizing: border-box; /* ensure padding and borders do not increase the size */
    padding-left: 40px;
    text-align: right;
    margin-top: 20px;
}
.featured-image {
    max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
    margin-top: 0; /* remove margin on things like headers */
}

Buradaki en önemli özellik kutu boyutlandırmadır: border-box; . Bu, elemanların her zaman% 40 veya% 60 genişlikte olmasını sağlar. Varsayılan (bu öznitelik olmadan), belirttiğiniz genişlik artı dolgu, kenar boşlukları ve kenarlıklardır. Görüntü sınıfı, ( özellikli görüntü ), en azından maksimum genişliği arasında 500px . Yalnızca bir boyut (genişlik veya yükseklik) belirtirseniz ve diğerini boş bırakırsanız, css, en boy oranını korurken resmi yeniden boyutlandıracaktır.


Alıntı Alanı

Alıntı alanını oluşturalım. İşte bunun neye benzediği:

Website_Quote_Area.pngq50fitcropw750dpr1.png


Bu başka bir basit alan. Beyaz ortalanmış metinle koyu gri bir arka plan içerir.

Bu HTML'yi önceki normal sarmalayıcıdan sonra ekleyin :

Kod:
<div id="quote-area">
    <div class="normal-wrapper">
        <h3>“makeuseof is the best website ever”</h3>
        <h4>Joe Coburn</h4>
    </div>
</div>

CSS:

Kod:
#quote-area {
    background: #363636;
    color: #FFFFFF;
    text-align: center;
    padding: 15px 0;
}
h3 {
    font-weight: normal;
    font-size: 20pt;
    margin-top: 0px;
}
h4 {
    font-weight: normal;
    font-size: 16pt;
    margin-bottom: 0;
}

Burada pek bir şey olmuyor. Boyutlandırma, gereken ana ayarlamadır - yazı tipi boyutu, aralık vb. İşte şimdi her şey nasıl görünüyor - bir web sitesi gibi görünmeye başlıyor!

Website_Progress.pngq50fitcropw750dpr1.png

Simge Alanı

Devam edelim - neredeyse bitti! İşte oluşturulması gereken bir sonraki alan:

Website_Icon_Area.pngq50fitcropw750dpr1.png

Bu bölümde birkaç sınıf kullanılacaktır. Üç simge, içerik haricinde çoğunlukla aynıdır, bu nedenle kimlikler yerine sınıfları kullanmak mantıklıdır. Bu HTML'yi önceki alıntı alanından sonra ekleyin:

Kod:
<div class="normal-wrapper">
    <div class="icon-outer">
        <div class="icon-circle">
            <i class="fa fa-youtube logo-icon"></i>
        </div>
        <h5>YouTube</h5>
        <p>Checkout our YouTube channel for more tech reviews, tutorials and giveaways!</p>
    </div>
    <div class="icon-outer">
        <div class="icon-circle">
            <i class="fa fa-camera-retro logo-icon"></i>
        </div>
        <h5>Reviews</h5>
        <p>If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.</p>
    </div>
    <div class="icon-outer">
        <div class="icon-circle">
            <i class="fa fa-dollar logo-icon"></i>
        </div>
        <h5>Buying Guides</h5>
        <p>At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.</p>
    </div>
</div>

Bu üç simge de Font-Awesome'dir. HTML bir kez daha normal sarmalayıcı sınıfını kullanıyor. İşte CSS:

Kod:
.icon-outer {
    box-sizing: border-box; /* ensure padding and borders do not increase the size */
    float: left;
    width: 33.33%;
    padding: 25px;
    margin: 0;
    text-align: center;
}
.icon-circle {
    background: #EEEEEE;
    color: #B4B4B4;
    width: 200px;
    height: 200px;
    border-radius: 200px; /* make rounded corners */
    margin: 0 auto;
    border: 2px solid #D6D6D6;
    box-sizing: border-box; /* ensure padding and borders do not increase the size */
    font-size: 75pt;
    padding: 30px 0 0 0;
    cursor: pointer;
}
.icon-circle:hover {
    /* change color on hover (mouseover) */
    color: #FFFFFF;
    background: #EB6361;
}
h5 {
    margin: 15px 0 10px 0;
    font-size: 20pt;
}

CSS'de birkaç yeni şey oluyor. Yuvarlatılmış köşeler border-radius: 200px; . Bu değerin genişlikle aynı şekilde ayarlanması, mükemmel bir daire ile sonuçlanır. Daha çok köşeleri yuvarlatılmış bir kare tercih ederseniz, bunu azaltabilirsiniz. Fareyle üzerine gelme eylemlerinin div'lere nasıl uygulandığına dikkat edin - yalnızca bağlantılarla sınırlı değildir. İşte bu bölüm şu anda neye benziyor:

website_icons_hover.gifq50fitcropw750dpr1.jpg

Altbilgi

Yapılması gereken son şey altbilgidir! Metin içermeyen gri bir alan olduğu için bu gerçekten basit. Bu HTML'yi simge alanlarının normal sarmalayıcısından sonra ekleyin :

Kod:
<div id="footer"></div>

İşte CSS:

Kod:
#footer {
    width: 100%;
    background: #F1F1F1; /* light gray */
    border-top: 1px solid #D4D4D4; /* dark gray "topline" */
    height: 150px;
}


Pizzazz

İşte bu, kodlama bitti! Her şeyi olduğu gibi bırakabilirsiniz, bu bitmiş bir web sayfasıdır. Bununla birlikte, tam olarak tasarıma benzemediğini fark etmiş olabilirsiniz . Bunun ana nedeni kullanılan yazı tipleridir. Bunu çözelim.

Başlıkların çoğu için kullanılan yazı tipi Myriad Pro'dur . Bu, Adobe Create Cloud ile birlikte gelir ancak web yazı tipi olarak kullanılamaz. Şu anda web sayfasında kullanılan yazı tipi Helvetica'dır . Bu iyi görünüyor, bu yüzden onu olduğu gibi bırakabilirsiniz, ancak PT Sans web yazı tipi olarak mevcuttur. Tüm metinler için kullanılan yazı tipi, web yazı tipi olarak kullanılabilen PT Serif'tir.

Web yazı tipleri basit bir işlemdir. Bilgisayarınıza yeni bir yazı tipi yüklemek gibi, web sayfaları da yazı tiplerini isteğe bağlı olarak yükleyebilir. Bunu yapmanın en iyi yollarından biri Google Yazı Tipleri kullanmaktır .

Daha iyi yazı tiplerine geçmek için bu CSS'yi ekleyin:

Kod:
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
    font-family: 'PT Sans', 'Helvetica', 'Arial';
}

Şimdi yeni yazı tiplerini kullanmak için html ve gövde öğelerinizi değiştirin:

Kod:
font-family: 'PT Serif', 'Helvetica', 'Arial';
H3 öğesinin listeye nasıl dahil edilmediğine dikkat edin - bu, varsayılan olarak PT-Sans yerine PT-Serif olacaktır .

Son bir güzellik olarak, üç farklı özellikli görsel arasında gezinmek için biraz JavaScript kullanalım. Bu bölüm için Image_2 ve Image_3'e ihtiyacınız olacak ve yine isteğe bağlı. Web sitesi bu noktada bu özellik olmadan tamamen işlevseldir. İşte nasıl görüneceği (hızlandırılmış):

Website_Scrolling_Images.gifq50fitcropw750dpr1.jpg

HTML'nizi üç öne çıkan resim içerecek şekilde değiştirin. Bunlardan ikisinin CSS sınıfı gizli olduğuna dikkat edin . JavaScript'in her birini bağımsız olarak hedefleyebilmesi için her resme bir kimlik verilmiştir.

Kod:
<div class="two-third">
    <img id="f-image-1" class="featured-image" src="Image_1.jpg" />
    <img id="f-image-2" class="featured-image hidden" src="Image_2.jpg" />
    <img id="f-image-3" class="featured-image hidden" src="Image_3.jpg" />
</div>

Ekstra öne çıkan resimleri gizlemek için gereken CSS şu şekildedir:

Kod:
.hidden {
    display: none;
}

Artık HTML ve CSS halledildiğine göre JavaScript'e geçelim. Bu bölüm için Belge Nesne Modelini (DOM) anlamak faydalıdır, ancak bu bir gereklilik değildir.

Sayfanın altındaki komut dosyası alanını bulun :

Kod:
<script type="text/javascript">
    /* JavaScript goes here, at the bottom of the page */
</script>

Komut dosyası etiketine aşağıdaki JavaScript'i ekleyin :

Kod:
/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
    // run once the page is ready
    var time = 2500;
    // get the image containers
    $im1 = $('#f-image-1');
    $im2 = $('#f-image-2');
    $im3 = $('#f-image-3');
    setInterval(function(){
        // call function every x milliseconds (defined in time variable above)
        changeImage();
    }, time);
    var currentImage = 1;
    function changeImage(){
        switch(currentImage) {
            case 1:
                // show image 2
                $im1.hide();
                $im2.show();
                $im3.hide();
                currentImage = 2;
                break;
            case 2:
                // show image 3
                $im1.hide();
                $im2.hide();
                $im3.show();
                currentImage = 3;
                break;
            default:
                // show image 1
                $im1.show();
                $im2.hide();
                $im3.hide();
                currentImage = 1;
        }
    }
});

Burada olan birkaç şey var. Kod $ (document) .ready () içinde bulunur . Bu, tarayıcınızın sayfayı işlemeyi tamamladığında çalışacağı anlamına gelir - bu iyi bir uygulamadır. SetInterval () işlevi çağırmak için kullanılan ChangeImage () önceden tanımlanmış bir aralık içinde milisaniye (1000 milisaniye = 1 saniye) düzenli olarak işlev. Bu, zaman değişkeninde saklanır . Kaydırmayı hızlandırmak veya yavaşlatmak için bunu artırabilir veya azaltabilirsiniz. Son olarak, farklı resimleri göstermek ve o anda gösterilen resmi takip etmek için basit bir durum ifadesi kullanılır.


Umarım süreç boyunca birçok şeyi öğrendiniz.
Meydan okumayı seviyorsanız ve yeni bulunan becerilerinizi test etmek istiyorsanız, hemen bu değişiklikleri uygulamayı deneyebilirsiniz.
 

mustafa20081953

CyprusTR
Telefon Numarası Onaylanmış Üye TC Kimlik Numarası Doğrulanmış Üye
Fahri Üye
TM Üye
Katılım
18 Haz 2013
Konular
209
Mesajlar
1,358
Reaksiyon Skoru
383
Altın Konu
2
Başarım Puanı
188
Yaş
25
TM Yaşı
9 Yıl 5 Ay 18 Gün
Online Süresi
16d 3h 27m
MmoLira
598
DevLira
6
Takipçiler
5
Paylaşım İçin Teşekkürler
 

Fauda

Level 8
Vergi
Katılım
27 Haz 2021
Konular
1,069
Mesajlar
3,291
Reaksiyon Skoru
1,486
Altın Konu
100
Başarım Puanı
259
TM Yaşı
1 Yıl 5 Ay 8 Gün
Online Süresi
43d 7h 15m
MmoLira
2,641
DevLira
12
Takipçiler
3
Paylaşım için teşekkürler.
 

Şu an konuyu görüntüleyenler (Toplam : 1, Üye: 0, Misafir: 1)

Üst