Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, Photoshop'ta tasarlanan bir web sayfasının HTML ve CSS kodlarıyla nasıl oluşturulacağını adım adım göstermektedir.
- Video, CSS'de resimli menü yapımı konusunu ele almaktadır. İçerikte, klasör yapısının oluşturulması, Visual Studio Code editörünün kullanımı, HTML ve CSS dosyalarının oluşturulması ve düzenlenmesi anlatılmaktadır. Eğitmen, Spotify örneği üzerinden konteyner oluşturma, logo ve banner ekleme, butonların tıklanabilir hale getirilmesi ve flexbox özellikleri kullanarak butonların hizalanmasını göstermektedir.
- Eğitim, bir sonraki derste menünün animasyonla hareketlendirileceğini belirterek sona ermektedir. Video boyunca Photoshop'tan görselleri dışa aktarma, HTML'de div ve image etiketleri kullanma, CSS ile boşluk ayarlama ve liste yapıları ile menü oluşturma gibi temel web geliştirme teknikleri detaylı olarak açıklanmaktadır.
- 00:02CSS'de Resimli Menü Projesi Tanıtımı
- Video, CSS'de resimli bir menü nasıl yapılacağını göstermektedir.
- Ekranda görülen ana sayfa tasarımına ulaşmak için videonun altında bulunan bağlantıdan kaynak dosyaları indirilebilir.
- Proje için masaüstünde "css proje" isimli bir klasör oluşturulmalı ve içinde "css", "image" ve "js" adında üç alt klasör oluşturulmalıdır.
- 01:09Visual Studio Code ile Proje Hazırlığı
- Kodlar Visual Studio Code editöründe yazılacaktır.
- Visual Studio Code'da proje dizilimi tanıtılır ve dosya explorer kısmından projeye erişilebilir.
- HTML dosyası oluşturulup "index.html" olarak kaydedilir.
- 03:07Tasarım Yapısı ve İlk HTML Öğeleri
- Tasarım Spotify logosu, banner alanı ve dört butondan oluşan bir yapıya sahiptir.
- Tüm öğeler bir kaplayıcı alan içerisinde yer almaktadır.
- İçeriklerin ortalı tutulması için bir div oluşturulur ve "container" id'si verilir.
- 04:14CSS Dosyası Oluşturma ve Bağlantı
- Profesyonel projelerde CSS kodları ayrı bir dosyaya yazılır.
- "style.css" adında bir CSS dosyası oluşturulur ve id'li konteyner div'i şekillendirilir.
- CSS dosyasının HTML dosyasına bağlanması için head etiketlerinin arasına link etiketi yazılır.
- 06:53Kutuyu Ortalama
- Tasarımda görünmez kutunun sayfanın içerisinde ortalı olduğu belirtilmiştir.
- Kutuyu ortalamak için marjin left ve marjin right özellikleri kullanılır.
- Bu özellikler sayesinde kutu soldan ve sağdan otomatik boşluklar verilerek ortalanır.
- 07:30HTML'de Konteyner Oluşturma
- Tasarım içerisinde bulunan logo, banner veya buton gibi öğelerin ortada dağılmayacak şekilde tutulabilmesi için konteyner adı verilen bir kutu oluşturulur.
- HTML kodlarında konteyner kutucuğunun içerisinde objeler oluşturulur ve böylece öğelerin ortada duracağı garanti altına alınır.
- Konteyner div'e bir id özelliği verilerek (örneğin "logo") tasarımdaki logo görseli eklenebilir.
- 08:15Logo Görselini Ekleme
- Tasarımdaki logo görseli Photoshop'ta bulunup, sağ klik yaparak "Export as" seçeneğiyle dışarıya kaydedilebilir.
- Görselin arka planı transparan bir şekilde gelebilmesi için PNG formatıyla kaydedilir.
- Resimler masaüstünde CSS proje klasörünün içerisindeki images klasörüne depolanır ve kodlama yaparken buradan çağrılır.
- 09:41Banner Görselini Ekleme
- Logonun altında bulunan banner görseli için logo div'in altında yeni bir div oluşturulur ve id özelliği verilir (örneğin "banner").
- Banner görseli Photoshop'ta bulunup, sağ klik yaparak "Export as" seçeneğiyle dışarıya kaydedilir.
- Transparan olmayan görseller için JPEG formatı kullanılabilir ve kalite ayarlamaları yapılarak optimize edilmiş şekilde kaydedilebilir.
- 11:50CSS ile Görsel Arası Mesafe Ayarlama
- Logo ile banner görselin arasındaki mesafe (örneğin 65 piksel) CSS ile ayarlanabilir.
- Banner id'li objeye CSS kuralı yazarak "margin-top" özelliği kullanılarak yukarıdan dış boşluk verilebilir.
- Bu işlem sayesinde banner görseli logodan mesafeli bir şekilde görüntülenir.
- 12:39Menü Alanı Oluşturma
- Banner alanının altında bulunan dörtlü resimli butonlar için önce onları kaplayan bir kutu oluşturulur.
- Menü div'i için CSS dosyasına "menu" ismi verilerek genişlik (1370 piksel) ve yükseklik (280 piksel) değerleri atanır.
- Menü alanı için geçici bir arkaplan rengi verilerek (background-color) görsel olarak daha anlaşılır hale getirilir.
- 14:34Menü Butonlarını Ekleme
- Menü div'inin içerisinde sıralı bir yapı oluşturmak için liste yapısı kullanılır.
- Liste elementlerinin içerisinde tıklanabilir elementler olarak a elementleri oluşturulur.
- A elementlerin içerisinde resimler için imaj etiketi kullanılır ve iç içe öğeler kullanılarak temel oluşturulur.
- 16:03HTML'de Resim Butonları Oluşturma
- Birden fazla öğe seçildikten sonra sağ tıklayıp "Export as" seçeneği ile katmanlar belirli uzantılarla kaydedilebilir.
- İmaj klasörüne kaydedilen resimler, HTML kodlarında "source" parametresi kullanılarak çağrılabilir.
- Görsellerin tıklanabilir olması için "a" elementinin içerisine "pref" parametresine çarpı işareti konulmalıdır.
- 18:06CSS ile Menü Düzenleme
- Liste yapısı için "ul" etiketi kullanılır ve CSS ile "list-style-type: none" özelliği ile noktacıklar kaldırılabilir.
- Standart HTML boşluklarını sıfırlamak için "* { margin: 0, padding: 00: }" kuralı kullanılabilir.
- Menüdeki butonları yan yana dizmek için "display: inline-block" özelliği kullanılır.
- 22:07Butonlar Arası Boşluk Ayarları
- Butonlar arasında dengeli boşluklar için "flex" özelliği kullanılır.
- "justify-content: space-between" özelliği ile butonlar sola ve sağa eşit şekilde dağıtılır.
- Menü alanının yukarıdan uzaklaşması için "margin-top" özelliği kullanılır.
- 25:21Sonuç ve Gelecek Ders
- Bu teknikle tasarımdaki resimli butonlardan oluşan menü hızlıca oluşturulabilir.
- Bir sonraki derste menünün CSS kodlarıyla hareketlendirilmesi ve içeriklerin animasyon uygulanması gösterilecektir.