Tasarımcılar için HTML ve CSS'ye Giriş

Tasarımcılar için HTML ve CSS'ye giriş.

Bir grafik tasarımcı olarak muhtemelen tasarım ve teknoloji arasında sürekli gelişen ilişkinin farkındasınızdır. Bu özellikle web tasarımıyla ilgilenenler için geçerlidir. Bu sektörde dikkatle hazırlanmış düzenlerimizin nasıl canlı web sayfalarına dönüştüğüne dair temel bir anlayışa sahip olmamız gerekiyor. Bu sürecin temellerini (ve sınırlamalarını) anladığımızda geliştiricilerle doğru bir şekilde iletişim kurabilir ve mükemmel web siteleri piksel.

Bu, bir web sitesini yukarıdan aşağıya nasıl kodlayacağınızı bilmeniz gerektiği anlamına gelmez (gerçi bu harika olurdu!), sadece temelleri anlamanız gerektiği anlamına gelir. Bu yazıda HTML'ye çok temel bir girişle başlayacağız. Photoshop'ta web tasarımlarını nasıl keseceğinizi ve CSS kullanarak HTML'yi nasıl biçimlendireceğinizi öğreneceksiniz. Tasarımcılar için HTML ve CSS'ye Giriş

HTML nedir?

Web'de gezinirken gördüğünüz hemen hemen her şey bir köprü metni biçimlendirme dili (HTML) belgesidir. köprü metni İçeriğinize basit bir tıklamayla erişmenizi sağlayan, ekranınızdaki diğer metinlere referans veren ve referans veren metindir. İşaretleme dili köşeli parantez <> içine alınmış bir etiketler kümesidir. Bu HTML etiketleri genellikle çiftler halinde gelir:

<başlangıç etiketi> : Açılış etiketi olarak da bilinir.
: aynı zamanda kapanış etiketi olarak da adlandırılır ve eğik çizgi içerir /

İçeriği bu iki etiket arasına yerleştirdiğinizde her şey denir eleman :

Bu bir paragraf

Bu dil İnternet'e çevrildiğinde izleyiciler etiketleri görmez; yalnızca aralarındaki içeriği görürler.

HTML'nin mevcut sürümü olan HTML 5, işlevlerini veya görünümlerini değiştiren niteliklere sahip yaklaşık 100 etiket içerir. HTML'yi anlamaya ve oluşturmaya başlamak için bu etiketlerden yalnızca 30-40'ını bilmeniz gerekir. Şunlara bir göz at ve bunların işleve göre nasıl gruplandırıldığına dikkat edin. Bunu uygulamalı olarak görelim.

Photoshop'ta görüntülerin kesilmesi.

Tasarımcılar için HTML ve CSS'ye Giriş

Kodlamadan önce web sitesinin hangi bölümlerinin görsel içermesi gerektiğine ve hangilerinin kodlanabileceğine karar vermemiz gerekiyor. Haydi yararlanalım bir araç Photoshop Dilim (alt menü altında gizli Kırpma aracı ) ve bir burrito fotoğrafı gibi alanları vurgulayın ve taco joan .

Şimdi snippet'lerimizi dışa aktarmamız gerekiyor - Dosya > Web için Kaydet'i seçin (Alt + Shift + Ctrl + S). Belirli bir parçacık seçildiğinde, pencerenin sağ tarafında dışa aktarma seçeneklerini (JPG, PNG vb.) ayarlayabilirsiniz. Belirli bir parçaya çift tıklarsanız bir açılır pencere göreceksiniz " Parça parametreleri" - Bu, belirli parça dosyalarını adlandırmanıza olanak tanır.

Varsayılan olarak tüm resimler şu dizine yerleştirilir: /images/ alt dizini. Yalnızca oluşturduğunuz parçacıkları dışa aktarmak istiyorsanız " Tüm özel parçalar" "Kaydet" penceresinde. Tasarımcılar için HTML ve CSS'ye Giriş

Temel HTML Belgesi Oluşturma

Dilimleyicilerimiz var, temel bir HTML belgesi oluşturalım. Tasarımcılar için HTML ve CSS'ye Giriş

Satır 1 : HTML 5 lehçesinin belgenin dili olduğunu bildirir.

Satır 2 : eleman bir HTML belgesinin kökünü temsil eder. Bu, belgemizin sınırlarını belirten zorunlu bir kapsayıcıdır.

3 : bölüm meta bilgileri, başlık vb. gibi görünmez sayfa öğelerini içerir.

Satır 4 : Bu belge kodlama beyanıdır – utf-8 - güvenli seçim - HTML karakter kodlamaları hakkında daha fazla bilgi edinebilirsiniz burada .

Satır 5 : Örnek Sayfa Bu, tarayıcının başlık çubuğunda görünen sayfa başlığıdır.

6 : etiketi kapatır 3. satırdan.

Satır 7 : Bu gövde öğesi sayfanın tüm görünür içeriğini içerecektir.

Satır 8 : etiketi kapatır 2. satırdan itibaren. Bu öğe belgenin sonunu işaret eder. Tasarımcılar için HTML ve CSS'ye Giriş

Aynı tasarımı kodlamanın başka olası yolları da vardır. Belgenin temel yapısını oluşturmak için HTML 5 semantik etiketlerini (üstbilgi, nav, makale, altbilgi) kullanacağız:

Bu, HTML'ye çevrilmiş düzendir:

Birkaç not:

11. ve 12. satırlar : Öğeler , oluşturmak için kullanıldıkları için İnternet'in özüdür. köprüler . HREF niteliğine bağlıdırlar ve hedefi bağlamaları gerekir. URL .

18-20. satırlar : Bunlar bazı metin biçimlendirme etiketleridir: birinci düzey başlığı belirtir; bir paragrafı belirtir; satır sonu anlamına gelir.

Basamaklı Stil Sayfaları (CSS) ile Biçimlendirme.

Tasarımcılar için HTML ve CSS'ye Giriş

Sadece HTML dosyasını bir web tarayıcısında açtığınızda, önceki tasarımımız gibi formatlanmadığını göreceksiniz. Bunun nedeni HTML kodunun yeterli olmamasıdır; onu biçimlendirmemiz gerekir. Basamaklı Stil Sayfaları (CSS) . CSS, HTML öğelerini biçimlendirmek için kullanılan bir stil sayfası dilidir.

Peki tam olarak neden HTML'yi CCS ile birleştirmemiz gerekiyor? Bir süre önce HTML etiketlerine özellikler eklenerek biçimlendirme sağlanıyordu. Ancak bu, okunamayan ve sürdürülemeyen kodlarla sonuçlandı. Çözüm, belge içeriğini (HTML) belge biçiminden (CSS) ayırmaktı.

Hadi Basit Bir Ayrım Yapalım CSS kuralı : .

Seçici : Bu, stil vermek istediğiniz HTML öğesidir. Örneğin: <makale>

Ilan : Bir CSS kuralının bir veya daha fazla bildirimi olabilir. Her bildirim bir özellik ve değerden oluşur ve noktalı virgülle ayrılır. Bildirimleri küme parantezleri {} içine yerleştirirsiniz. Tasarımcılar için HTML ve CSS'ye Giriş

özellik : bu stil özelliğideğiştirmek istediğinizi seçin. Örneğin: arka plan rengi, boyutu yazı tipi vb.

Değer : Her özelliğin kendisiyle ilişkilendirilmiş bir değeri vardır. Örneğin: #ffcc11 (arka plan rengi için), 16 piksel (yazı tipi boyutu için), vb.

Orada birçok CSS özelliği, bu, her HTML öğesi için ayarlanabilir, ancak hepsini kendiniz yazmanıza gerek yoktur. Tarayıcınızın varsayılan ayarlarına güvenebilir veya tarayıcınızı makul ayarlara sıfırlayan temel bir stil sayfası kullanabilirsiniz. Aslında seçicileri yaz bunu kendiniz yapmak çok fazla bilgi ve deneyim gerektirir.

Basit tasarımımızı biçimlendirmek için gereken bazı CSS kurallarına bakalım.

CSS Konumlandırma Özellikleri : var 4 farklı yöntem (statik, sabit, göreceli ve mutlak) bu da belirli öğeleri tasarımımızda konumlandırmamıza olanak tanır. Bu yöntemlerden birini ayarladıktan sonra üst, sağ, alt ve sol özelliklerini kullanarak öğeleri konumlandırabilirsiniz; bunlar, kullandığınız 4 yöntemden hangisini kullandığınıza bağlı olarak farklı şekilde çalışacaktır. Bu durumda konumlandırmak istiyoruz plaka_image, kullanma kesin konumlandırma.

CSS Kutu Modeli : bu model kenar boşlukları, kenarlıklar, dolgu ve içerik dahil tüm HTML öğelerini kapsayan bir çerçevedir. Kenar boşluğu, kenarlığın etrafındaki görünmez alandır ve kenarlık ile içerik arasındaki dolgudur.

Kodlama hakkında GERÇEKTEN daha fazla bilgi edinmek istiyorsanız, Bir göz at bu harika siteye: Codecademy .