Div Tabanlı Web Sitesinin Temelleri: 7 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:22

Bu talimat, size div'lerle bir web sitesi oluşturmanın temellerini gösterecektir. Çünkü düzen için kullanılan tablolar kötüdür!:pBu talimatı anlamak için temel html ve css'yi bilmeniz gerekir. Anlamadığınız bir şey olursa çekinmeden sorabilirsiniz. Kişisel ana sayfam da bu tür bir div yapısı kullanıyor.https://www.erwtje.netEnjoy

Adım 1: Temel Dosyaları Oluşturun

Önce html dosyanızı oluşturun. En temel bilgileri buna ekleyeceğiz. Şimdi css dosyası boş olacak.html dosyası şimdi şunları içeriyor: test Html dosyanızı bir şey.html olarak kaydedin. Adı kendiniz seçebilirsiniz. Css dosyanız.css olarak kaydedilmelidir. Html dosyasında belirtildiği gibi aynı adı verdiğinizden emin olun. Bu durumda "style.css". Artık tarayıcımızda önizleme yapıldığında düz boş bir html sayfamız var.

Adım 2: Temel Renkler, Yazı Tipleri, … için Gövde Etiketini Düzenleyin

Html dosyasını olduğu gibi bırakacağız ve sadece css dosyasını düzenleyeceğiz. Aşağıdaki kodu css dosyanıza ekleyin:body { background: #444444; yazı tipi ailesi: verdana, arial, sans-serif; renk: #444444; yazı tipi boyutu: 12 piksel; margin: 0px;}Bu kod parçasıyla body etiketinin tüm özelliklerini tanımlayacağız. Tüm içerik gövde etiketinde olduğu için bu ayarlar tüm sayfayı etkileyecektir. Arka plan ve yazı tipi rengi (renk) koyu gri olarak ayarlanmıştır. Yazı tipi ailesi (yazı tipi ailesi) verdana olarak ayarlanmıştır. Web sitemizi görüntülemek için kullanılan bilgisayarda "verdana" yazı tipi yoksa, sitemizi "arial" yazı tipinde görüntüleyecektir. Listeye daha fazla yazı tipi ekleyebilirsiniz. "Sans-serif", sağladığınız yazı tipi olmadığında kullanılacak genel türdür. Yazı tipi boyutu (yazı tipi boyutu) 12 piksele ayarlanmıştır. Bu mutlak bir değerdir. Diğer yazı tipi boyutlarını (başlıklar, paragraflar, menü öğeleri gibi) düzenlemek istiyorsanız, "px" yerine "em" göreli birimini kullanabilirsiniz. Bu şekilde, web sitenizi yeniden boyutlandırmak istiyorsanız, yalnızca gövde yazı tipi boyutunu değiştirmeniz gerekir. Gövde etiketinin dört kenarı için kenar boşluğu 0 piksel olarak ayarlanmıştır. Bu, sitenin pencerenin üst kısmına yapışacağından emin olmak için yapılır.

3. Adım: Başlık ve İçerik Olan Bir Kapsayıcı Ekleme

Şimdi konteyneri ekleyeceğiz. Bu, web sitemizin tamamını içerecek olan basit bir ortalanmış div'dir. Bu kapsayıcıda, iki div daha ekleyeceğiz; bir içerik div ve bir başlık div. Html dosyamız şimdi şöyle görünecek: İçerik Başlığını test edin Aşağıdaki kodu css dosyamıza ekleyeceğiz:div#container { width: 800px; kenar boşluğu: 0px otomatik; arka plan: #FFFFFF; dolgu: 0px;}div#içerik { genişlik: 800px; üst dolgu: 100 piksel; arka plan: sarı;}div#başlık { genişlik: 800 piksel; yükseklik: 100 piksel; arka plan: mavi; pozisyon: mutlak; üst: 0px;}.clearfix:after {içerik:"."; Ekran bloğu; yükseklik:0; ikisini de temizle; görünürlük:hidden;}.clearfix {display:inline-block;}/* IE Mac'ten gizle \*/.clearfix {display:block;}div#container, "container" kimliğine sahip bir div etiketimiz olduğu anlamına gelir. Bazı renkler ve bir "margin: 0px auto;" ekleyeceğiz. kapsayıcımızın sayfada ortalandığından emin olmak için. Başlığın diğer içeriğin üzerinde konumlandırıldığından emin olmak için içeriğe bir dolgu üst ve başlığa "üst: 0 piksel" ile mutlak bir değer vermeliyiz. çirkin renkler. Sadece renkleri okumayı ve farklı div'leri görmeyi kolaylaştırmak için. Gezinme ve içerik div'lerimizin (bir sonraki adımda eklenir) çevreleyen div'den düşmemesini sağlamak için bu garip düzeltme koduna ihtiyacımız olacak.

4. Adım: Gezinme ve Gerçek İçerik için Content Div'de İki Div Yapın

Şimdi içerik div'ine iki div daha ekleyeceğiz. Biri gezinme, diğeri asıl içerik için. İçerik etiketi arasında; yeni kodu ekleyeceksiniz:

Gezinme Ana içerik Gezinmeyi ve ana içeriği görüntülemek için bazı css kodları ekleyeceğiz divs;div#nav { width: 200px; yüzer: sol; arka plan: turuncu;}div#anaiçerik { genişlik: 600 piksel; Sağa çık; background: pink;}Bu iki div'in ikisinin de yüzer durumda olduğuna dikkat edin. Önceki adımda fazladan düzeltme kodunu koymamış olsaydık, div'ler çevreleyen div'in dışında yüzerdi. Clearfix yöntemiyle bunun olmamasını sağlayacağız.

Adım 5: Navigasyonda Yapı İçin Bazı Ekstra Div'ler Ekleyin

Şimdi web sayfamızda bir tür yapı oluşturmak için her iki "nav" div'e bazı ekstra div'ler ekleyeceğiz. Aşağıdaki kod parçasını değiştirin:

• Foo
• Bar

Şimdi "navblock" div'in nasıl görüntüleneceğini tanımlamak için bir kod parçası ekleyeceğiz. Navblock'un bir kimliği değil bir sınıfı olduğunu unutmayın. Bunun nedeni basit; kimliğe sahip div'ler yalnızca bir kez görüntülenir (gezinme bloğu, üstbilgi, altbilgi, …). Sınıflı Div'ler birden fazla kez görüntülenebilir. Burada bir sınıf kullanacağız. Daha sonra başka bir gezinme bloğu eklemek istememiz durumunda.div.navblock { width: 180px; kenar boşluğu: 5 piksel otomatik; border: 1px solid red;}Başka bir navigasyon bloğu eklemek istiyorsak, sadece yeni bir … yapısı eklemeniz gerekecek. Kodunuz şimdi şöyle görünecek;

• Foo
• Bar
• yuh
• Uzak

Adım 6: Ana İçerikte Yapı İçin Bazı Ekstra Div'ler Ekleyin

Şimdi aynısını maincontent div için yapacağız. Kod şimdi şöyle görünüyor:

Lorem ipsum dolor sit amet, …

Yine, div'in nasıl görüntülenmesi gerektiğini belirlemek için css dosyamıza bir kod parçası ekleyeceğiz:div.contentblock { width: 580px; kenar boşluğu: 5 piksel otomatik; border: 1px solid white;}Artık ana içerik div'ine başka bir " … " ekleyerek başka bir içerik bloğu ekleyebiliriz;

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

7. Adım: Siteyi Biraz Daha Az Çirkin Hale Getirin

Şimdi eğlenceli kısım; renkler. Artık ana div yapısına sahip olduğumuza göre, renkleri biraz daha az kaotik/çirkin/…Sadece css dosyasındaki renklerle oynayın. Resimde gösterilen web sayfasının tam html dosyası burada.: Ölçek

• ahmak
• Bar
• yuh
• Uzak

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Başlık Ve bu tam css dosyasıdır:body { background: #444444; yazı tipi ailesi: verdana, arial, sans-serif; renk: #444444; yazı tipi boyutu: 12 piksel; kenar boşluğu: 0px;}div#container { genişlik: 800px; kenar boşluğu: 0px otomatik; arka plan: #FFFFFF; dolgu: 0px;}div#içerik { genişlik: 800px; üst dolgu: 100 piksel; arka plan: #FFFFFF;}div#başlık { genişlik: 800 piksel; yükseklik: 100 piksel; arka plan: #888888; pozisyon: mutlak; üst: 0px;}div#nav { genişlik: 200px; yüzer: sol; arka plan: #FFFFFF;}div#maincontent { genişlik: 600 piksel; Sağa çık; arka plan: #DDDDDD;}div.navblock { genişlik: 180 piksel; kenar boşluğu: 5 piksel otomatik; kenarlık: 1 piksel katı #DDDDDD;}div.contentblock { genişlik: 580 piksel; kenar boşluğu: 5 piksel otomatik; kenarlık: 1px katı #FFFFFF;}.clearfix:after {içerik:"."; Ekran bloğu; yükseklik:0; ikisini de temizle; görünürlük:gizli;}.clearfix {display:inline-block;}/* IE Mac'ten gizle \*/.clearfix {display:block;}Artık temel bilgilere sahipsiniz. Tabii ki hala renkler, yazı tipi boyutları, daha iyi görünen bir gezinme bloğu gibi düzenleyecek çok şey var… Ancak bu talimatlar yalnızca div yapısıyla ilgilidir. İlgili diğer talimatları görmek isterseniz, her zaman sorabilirsiniz. Bakalım vakit bulabilecek miyim.