Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web tasarım eğitim içeriğidir. Eğitmen, Driver programı kullanarak HTML ve CSS ile kutu modelinde bir web sitesi yapımını adım adım göstermektedir.
- Video, Driver programının CS6 versiyonunun açılmasıyla başlayıp, yeni bir HTML dosyası oluşturma, klasör sistemi oluşturma ve site tanımlama aşamalarını kapsamaktadır. Eğitmen, konteyner, header, content ve footer gibi temel web sayfası bileşenlerini oluşturma, boyutlandırma ve stil verme işlemlerini detaylı şekilde anlatmaktadır. Ayrıca logo boyutlandırma, transparan hale getirme, menü oluşturma, link ekleme ve görsel düzenleme gibi tasarım adımlarını da göstermektedir.
- Video, bir web projesinin ana sayfasının tamamlanmasıyla sona ererken, bir sonraki derste "Hakkımızda", "Portfolyo" ve "İletişim" sayfalarının oluşturulacağı belirtilmektedir. Bu eğitim, web tasarım ve geliştirme öğrenmek isteyenler için temel bir rehber niteliğindedir.
- Driver ile HTML ve CSS ile Kutu Modeli Web Sitesi Oluşturma
- Dersin amacı, Driver kullanarak HTML ve CSS ile kutu modelinde bir web sitesi yapmaktır.
- CS6 versiyonunu kullanarak HTML dosyası açılıyor.
- Insert menüsü en çok kullanılacak menü olarak belirtiliyor.
- 00:28Klasör Sistemi Oluşturma
- Proje için klasör sistemi oluşturuluyor.
- İmaj dosyaları için "imaj" klasörü, CSS dosyaları için "css" klasörü, JavaScript dosyaları için "js" klasörü ve yazılar için "text" klasörü oluşturuluyor.
- 01:08HTML Dosyasının Tanıtımı
- Site tanımlaması yapılıyor.
- HTML'in genel yapısı inceleniyor.
- Sayfa ismi "proje" olarak değiştiriliyor ve tüm kodların badleri arasında yazılacağı belirtiliyor.
- 01:33Web Sayfası Tasarımına Başlangıç
- Proje kaydedilerek ana sayfa (index) olarak tanımlanıyor.
- Yeni site oluşturulup klasör seçiliyor.
- Tasarım işlemi "insert detek konteyner" ile başlanıyor ve konteyner kapsayıcısı oluşturuluyor.
- 02:26Konteyner Özelliklerinin Ayarlanması
- Konteyner için 1024 piksel genişlik ve 768 piksel yükseklik belirleniyor.
- Sayfa ortalanıyor, yazı tipi Arial, yazı boyutu 14 piksel ve yazı rengi beyaz olarak ayarlanıyor.
- Konteyner için belirgin mavi arka plan rengi veriliyor.
- 05:08Header Alanının Oluşturulması
- Header alanı 1024 piksel genişlik ve 250 piksel yükseklik olarak oluşturuluyor.
- Header için mavi arka plan ve beyaz yazı rengi belirleniyor.
- Header sayfada sola konumlandırılıyor.
- 06:34İçerik ve Footer Alanlarının Oluşturulması
- Header'dan sonra içerik alanı 1024 piksel genişlik ve 450 piksel yükseklik olarak oluşturuluyor.
- İçerik alanı için belirgin bir arka plan rengi ve beyaz yazı rengi belirleniyor.
- Footer alanı 1024 piksel genişlik ve 70 piksel yükseklik olarak oluşturulup koyu gri arka plan ve beyaz yazı rengi veriliyor.
- 09:04Header İçerisine Logo ve Menü Ekleme
- Header içine logo alanı 250 piksel genişlik ve 100 piksel yükseklik olarak oluşturuluyor.
- Logo için belirgin bir arka plan rengi ve siyah yazı rengi belirleniyor.
- Logo ve menü için marjin değerleri ayarlanarak sayfadaki konumları düzenleniyor.
- 15:05Logonun Boyutlandırılması ve Eklenmesi
- Logonun boyutlandırılması için Photoshop kullanılıyor.
- Logo 250 piksel genişlik ve 100 piksel yüksekliğe boyutlandırılıyor ve transparan olarak kaydediliyor.
- Boyutlandırılmış logo dosyası web sayfasına eklendiği ve arka planı kaldırıldı.
- 19:16Menü Tablosu Oluşturma
- Menü için bir tablo oluşturuluyor, 44 sayfadan oluşacak ve 600 piksel genişliğinde olacak.
- Tablonun genişliği 550 piksele ayarlanıyor ve içine "Anasayfa", "Hakkında", "Portfolyo" ve "İletişim" başlıkları ekleniyor.
- Tablonun üzerine tıklandığında border veya diğer özellikler görünmüyor.
- 20:58Link Ekleme
- Ana sayfa tek sayfadan oluştuğu için site dışında Milliyet'e link veriliyor.
- Diğer menü öğelerine "#" işareti ile yalancı linkler veriliyor.
- Menü arka planı kaldırılıyor ve menü konumu ayarlanıyor.
- 24:34İçerik Alanına Görsel Ekleme
- İçerik alanında 1024 piksel genişliğinde ve 350 piksel yüksekliğinde bir görsel alanı oluşturuluyor.
- Photoshop ile uygun boyutta bir görsel oluşturulup sıkıştırılıyor ve içerik alanına ekleniyor.
- Görselin altına 900 piksel genişliğinde ve 100 piksel yüksekliğinde bir yazı alanı açılıyor.
- 29:41Yazı Alanı Düzenleme
- Yazı alanına yukarıdan 10 piksel boşluk bırakılıyor ve sola yaslı konumlandırılıyor.
- Yazı alanına SEO için demo metin ekleniyor.
- Footer'a 1024 piksel genişliğinde ve 40 piksel yüksekliğinde bir yazı alanı açılıyor.
- 33:14Footer Düzenleme ve Kapanış
- Footer yazı alanına "Web projesi 2018 - Hakkı Saklıdır" yazısı ekleniyor.
- Footer yazı alanına yukarıdan 20 piksel ve soldan 20 piksel boşluk bırakılıyor.
- Logoya da Milliyet'e link veriliyor ve anasayfa tasarımı tamamlanıyor.