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

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

Her zaman bir web sitesi yapmak istediniz mi? Belki HTML kodlarımızdan bazılarını okudunuz ( HTML'yi anlamak ) ve CSS eğitimleri , ancak bu dilleri daha büyük bir projede nasıl kullanacağınızı bilmiyorum.





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 HTML, CSS ve JavaScript kullanarak bir jQuery dokunuşuyla üreteceksiniz ( jQuery kılavuzu). hiçbir şey yapmayacaksın gerçekten kanama kenarı, bu nedenle bu kod çoğu modern tarayıcıda oldukça iyi çalışmalıdır.





Herhangi bir CSS'den emin değilseniz, şuna bir göz atın: CSS kılavuzu NS W3Schools.com .

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, hatta daha da iyisi, projenin tamamını buradan indirin.



Bu web sitesini hayali bir şirket için tasarladım. Adobe Photoshop 2017. İlgileniyorsanız, indirme paketinden .PSD dosyasını aldığınızdan emin olun. Photoshop dosyasında şunları elde edersiniz:

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



İşlerin doğru görünmesi için birkaç yazı tipinin yüklü olması gerekir. İlk olarak Yazı Tipi Harika , tüm simgeler için kullanılır. Diğer iki yazı tipi PT Şerifi ve Myriad Pro (Photoshop'a dahildir). Yazı tiplerini nasıl yükleyeceğinizden emin değilseniz, kılavuzumuzu okuyun.

sahip değilseniz endişelenmeyin Adobe Photoshop , devam etmek için buna ihtiyacınız yok.



Başlangıç ​​Kodu

Artık tasarım netleştiğine göre kodlamaya başlayalım! Favori metin düzenleyicinizde yeni bir dosya oluşturun (kullanıyorum Yüce Metin 3 ). Bunu farklı kaydet index.html . 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 şeklinden kaynaklanmaktadır. Sunucuların çoğu için varsayılan yapılandırma, herhangi bir sayfa belirtilmemişse index.html sayfasını sunmaktır.

Ayrıntıları öğrenmek istemiyorsanız, indirmeden tam kodu alın.

İşte ihtiyacınız olan kod:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


Bu birkaç şey yapar:

  • Gerekli minimum HTML'yi tanımlar.
  • 'Noise Media' sayfa başlığını tanımlar
  • Google CDN'de barındırılan jQuery'yi içerir (CDN nedir).
  • Google CDN'de barındırılan Font Awesome'i içerir.
  • bir tanımlar stil CSS'nizi yazmak için etiket.
  • bir tanımlar senaryo JavaScript'inizi yazmak için etiket.

Dosyanızı tekrar kaydedin ve web tarayıcınızda açın. Muhtemelen fazla bir şey fark etmeyeceksiniz ve kesinlikle henüz bir web sitesi gibi görünmeyecek.

Sayfa başlığının nasıl olduğuna dikkat edin Gürültü Ortamı . Bu, içindeki metin tarafından tanımlanır Başlık etiket. Bu vardır içinde olmak kafa etiketler.

çevrimdışı görüntüleme için bir web sitesinin tamamı nasıl indirilir

Başlık

Başlığı oluşturalım. İşte neye benzediği:

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

Bu HTML'yi içine ekleyin vücut üstteki etiket:

Hazır buradayken, hadi bunu çözelim. A div diğer şeyleri koymak için bir kap gibidir. Bu 'diğer şeyler' daha fazla kapsayıcı, metin, resim, gerçekten herhangi bir şey olabilir. Belirli etiketlere nelerin girebileceği konusunda bazı kısıtlamalar vardır, ancak div'ler oldukça genel şeylerdir. bir İD ile ilgili üst çubuk . Bu, onu 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 olmalıdırlar. Birden çok öğenin aynı ada sahip olmasını istiyorsanız, bir sınıf bunun yerine -- bunun için tasarlandılar! İşte stil vermek için ihtiyacınız olan CSS (en üstte stil etiket):

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;
}

Karma işaretinin (#, etiket, kare işareti) addan önce nasıl kullanıldığına dikkat edin. Bu, öğenin bir kimlik olduğu anlamına gelir. Bir sınıf kullanıyor olsaydınız, bunun yerine nokta (.) kullanırdınız. NS html ve vücut etiketlerin dolgusu ve kenar boşluğu sıfıra ayarlanmış. Bu, istenmeyen boşluk sorunlarını önler.

Logo ve gezinme çubuğuna geçme zamanı. Başlamadan önce, bu içeriği koymak için bir kapsayıcıya ihtiyacınız var. Bunu bir sınıf yapalım (böylece daha sonra yeniden kullanabilirsiniz) ve bu olduğu gibi Olumsuz duyarlı bir web sitesi, 900 piksel genişliğinde yapın.

HTML:


CSS:

.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 yardımcı olabilir:

background: red;

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

Bu HTML'yi ekle içeri NS normal sarmalayıcı bölüm:



CSS:

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

Tasarımla eşleşmeyen diğer yazı tipleri için endişelenmeyin - bunu daha sonra düzelteceksiniz. Farklı simgeler kullanmak istiyorsanız, şuraya gidin: Yazı Tipi Harika Simgeler sayfa ve ardından değiştir fa-sesi kısma kullanmak istediğiniz simgenin adına

Gezinme çubuğuna giderek sırasız bir liste kullanacaksınız ( NS ) bunun için. Bu HTML'yi ekle sonrasında NS logo-konteyner (ama yine de içeride normal sarmalayıcı ):

NS href diğer sayfalara bağlantı vermek için kullanılır. Bu eğitici web sitesinde başka sayfa yok, ancak adı ve dosya yolunu (gerekirse) buraya koyabilirsiniz, ör. yorumlar.html . Bunu her iki çift tırnak içine aldığınızdan emin olun.

İşte CSS:

#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 bir ile başlar sırasız liste . Daha sonra kullanarak madde işaretlerini kaldırır. liste stili türü: yok; . Bağlantılar biraz aralıklıdır ve farenizi üzerlerine getirdiğinizde bir renk verilir. Küçük gri bölücü, her bir eleman üzerinde sağ kenarlıktır ve daha sonra son eleman için kaldırılır. son bağlantı sınıf. İşte neye benzediği:

Bu bölüm için geriye kalan tek şey kırmızı yatay renk vurgusu. Bu HTML'yi aşağıdakilerden sonra ekleyin: normal sarmalayıcı :

Ve işte CSS:

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

Bu, yapılan en üst kısımdır. İşte neye benziyor - tasarıma oldukça benziyor değil mi?

Ana İçerik Alanı

Şimdi ana içerik alanına - 'ekranın üst kısmına' geçmenin zamanı geldi. İşte bu kısım neye benziyor:

Bu oldukça basit bir kısım, solda bir metin, sağda bir resim var. Bu alan gevşekçe kabaca yaklaşık olarak üçe bölünmüştür. Altın Oran .

Bu kısım için örnek resme ihtiyacınız olacak. İndirmeye dahildir. Bu resim 670 piksel genişliğindedir ve Panasonic Lumix DMC-G80/G85 İncelememizden alınmıştır.

HTML'yi ekleyin sonrasında NS üst-renk-sıçrama eleman:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

iphone'da belgeler nasıl taranır

Alternatively, check out our review of the Panasonic G80 shown on the right!






Nasıl olduğuna dikkat edin normal sarmalayıcı eleman geri döndü (bu, sınıfları kullanmanın sevincidir). Görüntünün nedenini merak ediyor olabilirsiniz ( resim ) etiketi kapanmıyor. Bu kendi kendine kapanan bir etikettir. eğik çizgi ( /> ) bunu belirtir, çünkü bir etiketi kapatmak her zaman mantıklı değildir.

CSS:

.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ırma: kenarlık kutusu; . Bu, elemanların her zaman %40 veya %60 genişlikte olmasını sağlar. Varsayılan (bu öznitelik olmadan), belirttiğiniz genişlik artı herhangi bir dolgu, kenar boşluğu ve kenarlıktır. görüntü sınıfı ( özellikli resim ) var maksimum genişlik ile ilgili 500 piksel . Yalnızca bir boyut (genişlik veya yükseklik) belirtir ve diğerini boş bırakırsanız, css en-boy oranını korurken görüntüyü yeniden boyutlandırır.

Teklif Alanı

Alıntı alanını oluşturalım. İşte bu neye benziyor:

Bu başka bir basit alan. Beyaz merkezli metin içeren koyu gri bir arka plan içerir.

Bu HTML'yi ekle sonrasında önceki normal sarmalayıcı :



makeuseof is the best website ever


Joe Coburn



Ve sonra bu CSS:

#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, boşluk vb. İşte şimdi her şey böyle görünüyor -- bir web sitesi gibi görünmeye başlıyor!

Simge Alanı

Basmaya devam edelim - neredeyse bitti! Oluşturulması gereken bir sonraki alan:

Bu bölüm birkaç sınıf kullanacaktır. Üç simge, içerik dışında çoğunlukla aynıdır, bu nedenle kimlikler yerine sınıfları kullanmak mantıklıdır. Bu HTML'yi ekle sonrasında önceki alıntı alanı :






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



Bu üç simge aynı zamanda Yazı Tipi-Harika . HTML bir kez daha normal sarmalayıcı sınıf. İşte CSS:

.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 tarafından ayarlanıyor sınır yarıçapı: 200 piksel; . Bu değeri genişlikle aynı şekilde ayarlamak mükemmel bir daire ile sonuçlanır. Daha çok köşeleri yuvarlatılmış bir kare tercih ederseniz, bunu azaltabilirsiniz. Vurgulu eylemlerin div'lere nasıl uygulandığına dikkat edin - yalnızca bağlantılarla sınırlı değildir. İşte bu bölümün şimdi nasıl göründüğü:

Yapılacak son şey altbilgidir! Bu, metin içermeyen gri bir alan olduğu için gerçekten basittir. Bu HTML'yi simge alanlarından sonra ekleyin' normal sarmalayıcı :

İşte CSS:

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

Bakın - gerçekten basit şeyler.

Biraz Pizzazz Ekleyin

İşte bu, kodlama tamamlandı! Her şeyi olduğu gibi bırakabilirsiniz, bu bitmiş bir web sayfasıdır. Ancak, görünmediğini fark etmiş olabilirsiniz. kesinlikle tasarım gibi. Bunun temel nedeni kullanılan fontlardır. Bunu çözelim.

Başlıkların çoğunda kullanılan yazı tipi, Sayısız Profesyonel . Bu ile birlikte gelir Adobe Bulut oluşturun, ancak web yazı tipi olarak mevcut değil. Şu anda web sayfasında kullanılan yazı tipi Helvetica . Bu iyi görünüyor, bu yüzden olduğu gibi bırakabilirsiniz, ancak PT Sans web yazı tipi olarak mevcuttur. Tüm metin için kullanılan yazı tipi PT Şerifi , bir web yazı tipi olarak mevcuttur.

Web yazı tipleri basit bir işlemdir. Tıpkı bilgisayarınıza yeni bir yazı tipi yüklemek gibi, web sayfaları da istek üzerine yazı tiplerini yükleyebilir. Bunu yapmanın en iyi yollarından biri, Google Yazı Tipleri .

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

@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:

font-family: 'PT Serif', 'Helvetica', 'Arial';

h3 öğesinin listeye nasıl dahil edilmediğine dikkat edin - bu varsayılan olarak PT-Serif onun yerine PT-Sans .

Son bir güzellik olarak, üç farklı özellikli görsel arasında gezinmek için biraz JavaScript kullanalım. İhtiyacın olacak Resim_2 ve Resim_3 bu kısım için ve yine isteğe bağlıdır. Web sitesi bu noktada bu özellik olmadan tamamen işlevseldir. İşte nasıl görüneceği (hızlandırılmış):

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





Ekstra özellikli görüntüleri gizlemek için gereken CSS:

.hidden {
display: none;
}

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

Bul senaryo sayfanın altındaki alan:


/* JavaScript goes here, at the bottom of the page */

İçine aşağıdaki JavaScript'i ekleyin senaryo etiket:

/* 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 birkaç şey oluyor. Kod içeride bulunur $(belge).hazır() . Bu, tarayıcınızın sayfayı oluşturmayı bitirdiğinde çalışacağı anlamına gelir -- bu iyi bir uygulamadır. NS setAralık() işlevini çağırmak için kullanılır. resmi değiştir () milisaniye cinsinden önceden tanımlanmış bir aralıkta düzenli olarak işlev görür (1000 milisaniye = 1 saniye). Bu, içinde saklanır zaman değişken. Kaydırmayı hızlandırmak veya yavaşlatmak için bunu artırabilir veya azaltabilirsiniz. Son olarak, farklı görüntüleri göstermek ve o anda gösterilen görüntüyü takip etmek için basit bir durum ifadesi kullanılır.

Kodlama Yarışması

Bu kadar! Umarım bu süreçte çok şey öğrenmişsinizdir. Bir meydan okumayı seviyorsanız ve yeni bulunan becerilerinizi test etmek istiyorsanız, neden bu değişiklikleri uygulamayı denemiyorsunuz:

Altbilgi ekleyin: Alt bilgiye biraz metin ekleyin (ipucu: normal sarmalayıcı ve üçte bir/üçte iki sınıflar.).

Görüntü kaydırmayı iyileştirin: Görüntü değişikliklerini canlandırmak için JavaScript'i değiştirin (ipucu: jQuery'ye bakın solmaya ve animasyonlu ).

Birden çok alıntı uygulayın: Birkaç farklı olandan biri arasında geçiş yapmak için alıntıları değiştirin (ipucu: bir başlangıç ​​noktası için görüntü kaydırma koduna bakın).

Bir sunucu kurun: Bir sunucu kurun ve web sayfası ile sunucu arasında veri gönderin (ipucu: JSON ve Python kılavuzumuzu okuyun).

xbox one'a ayna nasıl ekranlanır

JavaScript'i kullanmaya alıştıktan sonra veya Ruby ile herhangi bir deneyiminiz varsa, GatsbyJS veya Jekyll gibi statik bir web sitesi oluşturucu ile bir web sitesi oluşturma konusunda şansınızı deneyebilirsiniz.

Paylaş Paylaş Cıvıldamak E-posta Windows 10 Masaüstünüzün Görünümü ve Hissi Nasıl Değiştirilir

Windows 10'un nasıl daha iyi görüneceğini bilmek ister misiniz? Windows 10'u kendinize özel hale getirmek için bu basit özelleştirmeleri kullanın.

Sonrakini Oku İlgili konular
  • Programlama
  • HTML
  • Web Tasarım
  • CSS
Yazar hakkında Joe Coburn(136 Makale Yayınlandı)

Joe, İngiltere'deki Lincoln Üniversitesi'nden Bilgisayar Bilimleri mezunudur. Profesyonel bir yazılım geliştiricisi ve drone uçurmadığı veya müzik yazmadığı zamanlarda, genellikle fotoğraf çekerken veya video çekerken bulunabilir.

Joe Coburn'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın