HTML & CSS için yeni başlayanlar için

HTML ve CSS'ye yeni başlayanlar için (Bölüm 42): Düzeni daha da uyarlamak

Eğitimdeki tüm videolar HTML ve CSS için başlangıç kılavuzu

Şu anda düzenin mevcut durumu yaklaşık olarak şöyle görünmelidir:

HTML & CSS for beginners (Part 42): Sayfa düzenini daha da ayarlayın


Şimdiye kadar bir logo ve üst menü eklenmiş durumda. Şimdi sıra, doğrudan gezinme çubuğunun altında görünecek biraz daha büyük bir grafikle devam etmek.

HTML ve CSS başlangıç ​​seviyesi için (Bölüm 42): Düzeni daha da ayarlayın

Yeni katmanların oluşturulma prensibi zaten önceki eğitimde açıklanmıştı. Bu nedenle burada size başka bir şey göstermek istiyorum. Üst menünün hemen altında daha büyük bir resim gösterilecek. Sonuç aşağıdaki gibi olacak:

Resim doğru boyuttaysa, bunu eklediğinizde, önceden düzenlemiş olmalısınız. Ardından Dosya>Aç'ı tıklayın ve resmi seçin. Seçtiğiniz resim daha sonra yeni bir pencerede görünecektir. Resmi panoya kopyalamak için Ctrl+C'yi kullanın. Şimdi resmi doğrudan doğruya doğru boyutta bir katman olarak ekleyebilmeniz için Düzen>Ekle olarak>Yeni Katman'ı tıklayın. Yeni katman otomatik olarak resmin boyutlarını alır ve ardından kolayca uygun yere taşıyabilirsiniz. Bu şekilde, eklemek istediğiniz tüm resimleri düzeninize aktarabilir ve yerleştirebilirsiniz.

Sonra metinleri, aslında nerede görüneceklerse, ekleyin. Tasarım aşamasında genellikle Lorem Ipsum adı verilen metin kullanılır.

"Deneme, deneme, deneme" yazmaya oturmadan önce, size http://www.blindtextgenerator.de/ adresini öneriyorum.

HTML ve CSS'ye yeni başlayanlar için (Bölüm 42): Düzeni daha da ayarlamak



Buradan farklı türde otomatik metinler oluşturabilirsiniz. Ardından bu metinleri Kopyala & Yapıştır yöntemiyle kolayca tasarımınıza ekleyebilirsiniz. Bu bağlamda, size ayrıca http://dummyimage.com/ adresini öneririm. Bu sitede, istediğiniz boyutta sahte resimler oluşturabilirsiniz. Bu sahte resimleri, örneğin henüz oluşturulmamış orijinal grafiklerin yer tutucuları olarak düzenlerinize yerleştirebilirsiniz.

Nesneleri Kesmek

Tasarımdan memnun olduğunuzda, HTML web sayfasına pratik bir şekilde dönüştürme zamanı. Bu noktada, kesme veya dilimleme devreye giriyor. Bu kesme, düzeni HTML ve CSS ile bir araya getirilmek üzere parçalara ayırma işlemidir. Tek tek görüntülenmesi gereken tüm öğeleri dilimlemelisiniz. Tabii ki, zaten tek tek bulunan tüm resim öğeleri hariç. İlk olarak, nasıl öğe kesileceğini size göstereceğim. İlgili öğeyi çevreleyen Kılavuz çizgilerini çizin. Kılavuz hatları sonuçta kesme kenarlarını oluşturacak. Bu nedenle bunları doğru şekilde yerleştirmeye dikkat edin.

Şimdi istediğiniz alanı seçin ve ardından Ctrl+Shift+C tuş kombinasyonunu kullanın. (Bu GIMP ve Photoshop için aynı şekilde geçerlidir). Ardından yeni bir dosya oluşturun. Photoshop'ta bu dosya doğru boyutta olacaktır. GIMP'te ise bu kadar kolay değildir. Burada yeterli boyutlara sahip bir dosya oluşturursunuz. İçerik pano aracılığıyla Ctrl+V ile yapıştırılır.

Şimdi Dilimleme aracı devreye giriyor. Kesmek istediğiniz alanı belirleyin ve ardından Return tuşuna basın. Resim, belirtilen alana göre kesilecek. Dosya>Farklı Kaydet ile resmi kaydedebilirsiniz.