ev / bellenim/ Basit HTML şablonları. Basit HTML Şablonları Harika HTML Şablonları

Basit HTML şablonları. Basit HTML Şablonları Harika HTML Şablonları

Siteleri için sunulan tüm şablonlar, HTML5 ve CSS3'ün modern sürümleri üzerine inşa edilmiştir. Buna ek olarak, yazarlar düz tasarım, duyarlı tasarım, uyarlanabilir düzen, jQuery kaydırıcıları, CSS3 animasyonları vb. Gibi modaya uygun özellikleri kullanır. Yani, bir mobil site şablonu arıyorsanız, sunulanlardan herhangi birini seçebilirsiniz. Güzel html5 şablonları 2017, ücretsiz olsa da, premium seviyeye bakın.

Burada 50'den fazla ücretsiz duyarlı web sitesi şablonu bulacaksınız Yüksek kalite hem yeni siteler için hem de mevcut siteler üzerinde yeniden çalışmak için kullanılabilen HTML5 ve CSS3'te. Şık html5 web sitesi şablonları- ihtiyacın olan bu!

03/12/2019 güncellendi: Yazı 2 yıl önce yazıldığından beri birçok link koptu. Ya şablon sahipleri birleşti, ya şablonların durumu ücretsizden ücretliye dönüştü ya da uzaylılar her şeyi alt üst etti. Sizden ricam sevgili okurlar, böyle bir link bulursanız yorumlara yazın düzeltirim.

1. Kar - Ücretsiz HTML5 ve CSS3 Açılış Sayfası Şablonu

hedef html5 css3 şablonu Kar Sayfaları Bootstrap çerçevesi üzerine inşa edilmiştir. Şablon çok şık ve havalı! Sabit bir arka plan ve devasa bir Jumbotron, sitenin ana içeriğini gösteren şeydir. Ve açılış sayfasındaki en önemli şey nedir? Bu doğru, harekete geçirme çağrısı. Doğal olarak, şablon tamamen mobil cihazlar. Hatta bunu kendi şablonlarınız için temel olarak kullanabilirsiniz.

2. Sima - şık ticari web sitesi şablonu

Bu html5 css3 şablonu ayrıca Bootstrap çerçevesi üzerine kurulmuştur. Portföy, ekibiniz, fiyatlarınız, incelemeleriniz ve ihtiyaç duyacağınız diğer her şeyi içeren benzersiz bir site oluşturmak için bu şablonu kullanabilirsiniz. Örneğin, bu şablon bir temizlik hizmetleri web sitesi için idealdir. Bu şablondaki animasyon düzgün ve etkilidir, yazı tipleri temiz ve okunması kolaydır. Sadece mükemmel şablon!

3. Beyaz harika bir tek sayfalık şablondur!

Beyaz web sitesi şablonunun ayırt edici bir özelliği, üst kısımdaki iki arka plan seçeneğidir. Bir görüntü kaydırıcı veya bir video arka planı seçiminiz. Çok kaliteli ve muhteşem şablon site için!

4. Platz - Ücretsiz HTML5 Izgarası Web Sitesi Şablonu

Bir ızgara etrafında tasarlanmış modern, görsel olarak çekici bir HTML5 web sitesi şablonu (ızgara hakkında daha fazla bilgi edinin). Bir blog veya web sitesi için güzel ve duyarlı şablon tasarımı.

5. Mart e-Ticaret - Güzel HTML5 ve CSS3 e-Ticaret Web Sitesi Şablonu

Web sitesi şablonunun yeni ve şık tasarımı, ayakkabı, giysi, saat, aksesuar, spor giyim vb. satan her türlü moda web sitesi için en iyisidir. İhtiyaçlarınıza göre ayarlayabileceğiniz bir PSD dosyası ile birlikte gelir.

6. Nava - yaratıcı web siteleri için muhteşem bir HTML5 ve CSS3 şablonu

Nava, öncelikle çalışmalarını tüm ihtişamıyla sergilemek isteyen yaratıcı profesyoneller için kullanılan modern bir HTML5 web sitesi şablonu. Birçok şablon ayarı varyasyonu, sitenizi benzersiz hale getirmenize olanak tanır. Hafif, güzel ve duyarlı şablon site için.

7. Kutu Portföyü - Benzersiz Yaratıcı HTML5 ve CSS3 Web Sitesi Şablonu

Box Portfolio web sitesi şablonu, temiz ve modern minimalist bir tasarıma sahiptir. Çalışmalarını çevrimiçi ortamda etkili bir şekilde göstermek isteyen profesyoneller için mükemmel. Adından da anlaşılacağı gibi, site şablonu ideal olarak portföyler için uyarlanmıştır.

8. Mountain King - Popüler ve İşlevsel HTML5 ve CSS3 Web Sitesi Şablonu

Web sitesi tasarımında dağ teması son zamanlarda çok popüler. Mountain King web sitesi şablonu bir istisna değildir. Typicons'tan 336 vektör simgesi içerir. Ayrıca harika CSS3 animasyonu. Şablon, seyahat ve portföy web siteleri için mükemmeldir.

9. Beauty Spa - Spa Salonları için Harika HTML5 ve CSS3 Web Sitesi Şablonu

Beauty Spa, spa, sağlık veya fitness merkezleri, yoga web siteleri ve hatta kuaför salonları için ideal birçok özelliğe sahip duyarlı bir web sitesi şablonu. Yazı tiplerinin mükemmel okunabilirliği ve göze batmayan minimalizm.

10. Bent - HTML5 ve CSS3 Web Siteleri için Şık ve Etkili Açılış Sayfası

Bent harika bir ücretsiz html5 ve css3 web sitesi şablonu. Duyarlı tasarım, CSS3 animasyonu, paralaks kaydırma, özelleştirilebilir gezinme ve diğer güzellikler. Bu, ziyaretçilerin ana içeriği net bir şekilde görürken sitenin görünümünden ve verdiği histen keyif almalarını sağlamak için dengeli bir tasarım kullanmak isteyen siteler için temiz bir şablon tasarımıdır.

11. Üçgen - Ücretsiz Duyarlı Çok Amaçlı HTML5 ve CSS3 Şablonu

Triangle, özellikle havalı tasarımlarını daha da kötüleştirmeden tekme atmak isteyenler için özel bir yaratıcı HTML5 ve CSS3 web sitesi şablonu. Şablon, sitenizi istediğiniz gibi özelleştirmenize olanak tanıyan 40'tan fazla önceden tasarlanmış sayfaya sahiptir.

12. Future Imperfect - yaratıcı insanlar için mükemmel bir web sitesi şablonu!

Yazarlar, yazarlar, metin yazarları ve diğer kalem ve kağıt çalışanları için mükemmel olan bu web sitesi şablonuyla gerçek bir zevk duygusu yaşayın. Şablon ayrıca kişisel bir blog, seyahat, yaratıcılık vb. hakkında bir blog için de kullanılabilir. Şablonun yaratıcı tasarımı ve uyarlanabilir düzeni birçok kişiye hitap edecek.

13. Bodo harika bir kişisel web sitesi şablonu

Bodo- güzel desen kişisel bir site için ideal olan HTML5 ve CSS3'te site. Özellikle portföy organizasyonu için. Temiz ve net tipografi, atlıkarınca kaydırıcısı, çalışmanızı sergilemek için açılır pencereler ve daha fazlası.

14. Lens, fotoğrafçılar için mükemmel bir HTML5 web sitesi şablonu

Fotoğrafçılar, çalışmalarını tüm ihtişamıyla, muhteşem ve en önemlisi - büyük olarak sergilemek için siteleri için her zaman mükemmel şablonu ararlar! Nadir site şablonu bu gereksinimleri karşılar. Lens böyle bir fotoğrafçı web sitesi şablonu.

15. Spectral - Benzersiz El İşi HTML5 ve CSS3 Web Sitesi Şablonu

eğer arıyorsan ücretsiz otomatik web sitesi şablonları, o zaman Spectral ideal çözüm olacaktır. İşte tamamen benzersiz bir el yapımı tek sayfalık web sitesi şablonu tasarımı. Tasarım istediğiniz gibi değiştirilebilir. Bu şablonla, etkileyici bir seyahat blogu veya fotoğraf galerisi, bir otomotiv sitesi veya bir barındırma sağlayıcısı olsun, kesinlikle herhangi bir konuda çarpıcı bir site oluşturabilirsiniz.

16. Oksijen - Tek Sayfa HTML5 ve CSS3 Web Sitesi Şablonu

Oksijen, kullanışlı ve benzersiz bir iş web sitesi şablonu. Modern düz tasarım, duyarlı düzen. Örneğin, bu şablon hakkında bir web sitesi için idealdir mobil uygulamalar veya mobil teknoloji.

17. Mobirise Bootstrap - Mükemmel Ücretsiz HTML5 ve CSS3 Web Sitesi Şablonu

Ücretsiz bir web sitesi şablonu arıyorsanız, Mobirise Bootstrap başlamak için mükemmel bir yerdir. Bu, birçok eklenti içeren çok işlevli bir şablondur. Önceden hazırlanmış üç düzen ana sayfa ve bloglar bu konuda size yardımcı olacaktır. Mobirise Bootstrap ayrıca %100 SEO optimizasyonludur ve tüm ekran boyutlarına duyarlıdır.

18. La Casa - Güzel ve Ücretsiz HTML5 Emlak Web Sitesi Şablonu

Brandy şablonu, ticari bir emlak web sitesi düzenlemek için mükemmeldir. Duyarlı ve çok Güzel tasarım sadece sitenin sahibini değil, aynı zamanda ziyaretçileri de memnun edecektir.

19. Drfolio - Şık HTML5 Portföy Web Sitesi Şablonu

Şık ve hareketli HTML5 ve CSS3 portföy web sitesi şablonu. Temiz tasarım, harika tipografi, güzel simgeler ve daha fazlası.

20. Pluton - parlak ve şık tek sayfalık web sitesi şablonu

Pluton, parlak ve göz alıcı bir Bootstrap web sitesi şablonu. Stüdyolar, fotoğrafçılar ve yaratıcı tasarımcılar için harika, benzersiz tek sayfalık düzeni ve duyarlı tasarımıyla modern bir web sitesi şablonu.

21. SquadFree - Profesyonel HTML5 Tek Sayfa Web Sitesi Şablonu

SquadFree şablonu, tek sayfalık ticari bir web sitesi oluşturmak için mükemmeldir. Şablon sadece profesyonel görünmekle kalmaz, aynı zamanda her tür ekrana uyarlanmıştır. Şablon Bootstrap'a dayanmaktadır.

22. Yüce - büyüleyici HTML5 ve CSS3 web sitesi şablonu

Sublime, bir başlangıç, yaratıcı ajans veya portföy web sitesi için mükemmel, temiz ve şaşırtıcı derecede güzel bir HTML5 ve CSS3 web sitesi şablonu. Duyarlı tasarım ve aralarından seçim yapabileceğiniz iki sayfa seçeneği.

23. Kereste - sıradışı ve güzel HTML5 ve CSS3 web sitesi şablonu

Timber, yeni, şık ve sıra dışı bir tek sayfalık web sitesi şablonu temasıdır. Köşegen, bu şablonun ana tasarım özelliğidir. Şablon, bir işletme web sitesi veya portföyü için mükemmeldir. Kendiniz için kolayca özelleştirebileceğiniz yerleşik bir galeri, harita ve iletişim bilgileri vardır.

24. E-Shopper - En İyi E-Ticaret Web Sitesi Şablonu

E-Shopper için harika bir site şablonu e-ticaret. Eksiksiz ve verimli bir çevrimiçi mağaza için harika bir özellik seti ile önyüklemenin üzerine inşa edilmiştir.

25. Manyetik - Ücretsiz HTML5 ve CSS3 Fotoğraf Web Sitesi Şablonu

Bir tasarımcı, illüstratör veya sanatçı için bir fotoğraf sitesi veya portföy oluşturmak için kesinlikle çarpıcı bir HTML5 ve CSS3 şablonu. Bu şablon, profesyonel şablonlar için çıtayı yükselterek yeni seviye! Duyarlı tasarım, her türlü görüntüleme cihazı için mükemmel destek, kolay ve rahat gezinme ve çok daha fazlası.

26. Mabur Portföyü - Güzel Minimalist HTML5 ve CSS3 Web Sitesi Şablonu

Bu minimalist web sitesi şablonunun düz tasarımı, bir portföy oluşturmak için mükemmeldir. Şablonda, tüm ayrıntılar mükemmel bir şekilde doğrulanmıştır!

27. Modern Bootstrap HTML5 - Ücretsiz Tek Sayfa Web Sitesi Şablonu

Bu ücretsiz bir sayfa Bootstrap çerçevesine dayalı olarak, hem küçük şirketler hem de büyük şirketler için kurumsal siteler için mükemmeldir. Düz tasarım, duyarlı düzen, tüm yüksek kaliteli tasarım öğeleri. Şablon 4 farklı renkte gelir.

28. Infusion - HTML5 ve CSS3'te Şık Tek Sayfa Web Sitesi Şablonu

Infusion, bir iş portföyü oluşturmak için özel olarak tasarlanmış bir HTML5 ve CSS3 web sitesi şablonunun harika bir örneğidir. Bu şablonun zengin işlevselliği, müşterilerle etkili bir şekilde çalışmanıza ve yenilerini çekmenize olanak tanır.

29. Yebo - HTML5 ve CSS3'te kurumsal web sitesi şablonu

Bu yüksek kaliteli düz stil web sitesi şablonu, herhangi bir kurumsal web sitesi için idealdir. Duyarlı tasarım, birçok ayar ve düzenleme seçeneği.

30. Twenty - Muhteşem HTML5 ve CSS3 Paralaks Web Sitesi Şablonu

Paralaks efektli bu eşsiz ve çok güzel web sitesi şablonu kimseyi kayıtsız bırakmayacak. Tek sayfa şablonu ile saf HTML5 ve CSS3 üzerine inşa edilmiştir. uyarlanabilir düzen, etkileyici geçmişler, sosyal medya desteği ve daha fazlası.

31. Urbanic - Harika HTML5 ve CSS3 Önyükleme Web Sitesi Şablonu

Urbanic, Bootstrap motoru üzerine inşa edilmiş yeni ve havalı bir HTML5 ve CSS3 web sitesi şablonu. Çok fazla sorun yaşamadan hemen sitenizi oluşturmaya başlamak için mükemmeldir. Şablon, herhangi bir ekran boyutuna mükemmel şekilde uyarlanmıştır.

32. Tasarım Vitrini - HTML5 Portföy Web Sitesi Şablonu

Portföyünüzü düzenlemek için görsel olarak uyumlu ve etkili HTML5 web sitesi şablonu. Şablon, bu formattaki siteler için yapılması çok zor olan mobil cihazlar için mükemmel bir şekilde uyarlanmıştır.

33. Mamba One - basit ve şık HTML5 ve CSS3 web sitesi şablonu

Mamba One, basit ama şık tek sayfalık bir web sitesi şablonu örneğidir. Tüm modern tarayıcılarla uyumludur ve her yerde yeterince görüntülenecektir.

34. KreativePixel - Fotoğrafçılar için Ücretsiz Web Sitesi Şablonu

Bir diğeri güzel desen fotoğrafçılar için site. Portföylerde ve galerilerde fotoğrafların duyarlı tasarımı ve çok uygun şekilde sıralanması birçok fotoğraf severin ilgisini çekecektir. Şablon ayrıca, fotoğrafları görüntülerken izleyicileri de etkileyen bir paralaks efekti kullanır.

35. Retina Hazır Duyarlı Uygulama - Ücretsiz HTML5 ve CSS3 Açılış Sayfası Şablonu

Adından da anlaşılacağı gibi, bu harika web sitesi şablonu yalnızca açılış sayfaları, aynı zamanda özellikle Retina ekranlı cihazlarda netlik açısından yeni mobil trendlere de yanıt veriyor.

36. Brushed - Bootstrap tarafından desteklenen Duyarlı HTML5 ve CSS3 Web Sitesi Şablonu

Brushed, Bootstrap motorunu temel alan duyarlı, ücretsiz bir HTML5 ve CSS3 web sitesi şablonu. Ayrıca optimize edilmiş Retina ekranlar(iPhoneiPad, ipod touch ve macbook pro retina).

37. Büyük Resim HTML5 ve CSS3 Web Sitesi Şablonu

Büyük Resim'e hoş geldiniz! Bu duyarlı şablon HTML5'teki web sitesi, gösterecek bir şeyleri olan ve bunu sitelerinde büyük ve muhteşem gösteren tüm yaratıcı insanlar için mükemmeldir. Ek olarak, şablon mükemmel bir animasyon kullandı.

38. Tesselatte - Ücretsiz HTML5 ve CSS3 Duyarlı Şablon

Her şeyi hesaba katan tek sayfalık basit bir şablon gerekli araçlar için başarılı yaratım alan. Bir yazarın, metin yazarının ve basılı kelimenin sadece sevgilisinin kişisel blogu için idealdir.

39. Taşma - benzersiz HTML5 ve CSS3 web sitesi şablonu

Bu benzersiz saf HTML5 ve CSS3 web sitesi şablonu, herhangi bir yaratıcı kişi için mükemmeldir. Tamamen duyarlı ve tamamen ücretsizdir.

40. Runkeeper - duyarlı ve çok güzel web sitesi şablonu

Runkeeper ücretsiz, duyarlı ve çok güzel bir web sitesi şablonu. Herhangi bir site için kullanılabilir. Parlak stil ve net yazı tipleri, uyarlanabilir tasarım ve etkileyici desen detayları. Her şey sizin için çalışıyor!

41. Pinball Duyarlı Izgara Stili - Büyük Izgara Tabanlı Web Sitesi Şablonu

Bu harika profesyonel ızgara tabanlı web sitesi şablonu, kurumsal bir web sitesi için mükemmeldir. Şablonun modern düz tasarımı ve duyarlı yapısı, büyük monitörlerin ve mobil cihazların ekranlarında mükemmel bir şekilde görüntülenir.

42. Prologue - Saf HTML5 ve CSS3 Tek Sayfa Web Sitesi Şablonu

Bu temiz, basit ve net HTML5 ve CSS3 web sitesi şablonu, bir açılış sayfası oluşturmak için mükemmeldir. Minimalist tasarım, ana şeyden uzaklaşmaz. Muhteşem bir kaydırmalı yan gezinme çubuğu ve temiz sayfa satırları sadece mükemmel bir kombinasyon!

43. Helios - Saf HTML5 ve CSS3 ile Modern Web Sitesi Şablonu

Minimalizm ve temiz formlar tarzında başka bir web sitesi şablonu. yararlanmak için özel olarak tasarlanmıştır büyük ekranlar görüntüler, aynı zamanda mobil cihazların küçük ekranlarına da mükemmel şekilde uyarlanmıştır.

44. Telefazik - Ücretsiz ve Duyarlı HTML5 Web Sitesi Şablonu

Bu modern, duyarlı ve tamamen ücretsiz web sitesi şablonunun büyük bir avantajı var - basit ve özlü, ancak çoğu kişinin eksikliğini tam olarak bu.

45. Kesinlikle Yazılan - çok güzel yarı retro web sitesi şablonu

Minimalist yarı retro tarzı yeni web sitesi şablonu. Sadece retro artık moda değil, ancak hafif bir ipucu çok hoş. Bu web sitesi şablonu tamamen duyarlıdır, saf HTML5 ve CSS3 üzerine inşa edilmiştir ve gerekli tüm temel sayfa öğelerini içerir. Kesinlikle Yazılan şablon, yaratıcı web siteleri için idealdir. Örneğin, ev dekorasyonu hakkında bir web sitesi için.

46. Striped - Temiz, Güzel ve İşlevsel HTML5 & CSS3 Web Sitesi Şablonu

Taze ve temiz, güzel ve işlevsel, yeni şablon HTML5 ve CSS3'te web sitesi. Süslü alıntılar, tablolar ve listelerin yanı sıra uyarlanmış bir kenar çubuğu (sağda veya solda - istediğiniz gibi) dahil olmak üzere cephaneliğinde gerekli tüm sayfa öğelerine sahiptir.

47. Paralellik - HTML5 ve CSS3'te sıra dışı ve şık web sitesi şablonu

Parallelism, portföyleri veya fotoğrafları düzenlemek için şık bir web sitesi şablonu. Alışılmadıklığı, buradaki kaydırmanın her zamanki gibi dikey değil, yatay olmasıdır. Bu, siteye özel bir çekicilik ve akılda kalıcılık sağlar.

48. Miniport - Tam Duyarlı Minimalist HTML5 Web Sitesi Şablonu

Harika bir minimalist HTML5 web sitesi şablonu. Kişisel bir site / blog için ve ayrıca küçük bir kurumsal tek sayfalık site veya kartvizit sitesi için mükemmeldir.

49. Verti - Geniş ve Ücretsiz Duyarlı HTML5 Web Sitesi Şablonu

Bu web sitesi şablonunun temiz ve ferah tasarımı, küçük kurumsal web siteleri veya ticari projeler için idealdir. Hem yazar hem de kullanıcılar için duyarlı ve kullanışlı.

50. ZeroFour - Etkileyici ve Şık HTML5 ve CSS3 Web Sitesi Şablonu

Ve listedeki son, ancak kalite ve dış gösteriş açısından son değil, ZeroFour web sitesi şablonu. Şık tasarım, çok güzel menü, mükemmel kalibre edilmiş formlar ve düğmeler, güzel simgeler ve çok daha fazlası. Ve tüm bunlar tamamen ücretsiz!

Umarım bu harika HTML5 ve CSS3 web sitesi şablonları arasında uygun bir şey bulmuşsunuzdur. İyi şanlar!

Daha sonra hızlıca bulabilmeniz için yer imlerine ekleyin.

Not: Eğer bir seçim yapamıyorsanız, “Ne istediğimi bilmiyorum” yazısını okuyun. Yardımcı olacaktır.

V bu ders basit bir 2 sütunlu şablon oluşturma sürecini gösterir.

Şablon bir başlıktan oluşacaktır, yatay çubuk gezinme, kenar çubuğu ve altbilgi. Ayrıca tarayıcı penceresinde yatay olarak ortalanacaktır.

Adım 1. Temel yapı.

Öncelikle şablonun ana yapısını oluşturalım.

Ve sonra bazı içerikleri farklı bölümlere koyun:

1. sütun

. . .

şimdi elimizde HTML belgesi kesinlikle stil yok. Ardından, bu belgeye dayalı bir şablon oluşturmak için CSS kullanacağız.

Adım 2 Gövde ve html öğelerini hizalayın.

Gövde, html ( kenar boşluğu:0; dolgu:0; renk:#000; arka plan:#a7a09a; )

Adım 3. Ana kaplar.

Şimdi genişliği ayarlayalım ve içerik alanını ortalayalım. Bunu yapmak için, ana kapsayıcının genişlik özellikleri ve alanı için değerleri ayarlayın #wrap . Ayrıca sayfada öne çıkması için bir arka plan ayarlayacağız.

İçerik merkezleme yöntemi, bir öğenin sol ve sağ kenar boşlukları auto olarak ayarlandığında, öğenin genişliğini kabın genişliğinden çıkardıktan sonra kalan alanı paylaşmalarına dayanır. Bu durumda, #wrap öğesinin genişliği tarayıcı penceresinin genişliğinden çıkarılacaktır.

Not: amacıyla Bu method da çalıştı Internet Explorer(sürüm 6 ve üzeri), belge mutlak IE'ye standart modu kullanmasını söyleyen DOCTYPE kullanın.

Şablonun genişliğini ve merkezini ayarlamak için body öğesini kullanmıyoruz, çünkü bazılarında İnternet sürümleri Explorer bu istenmeyen etkilere neden olabilir.

Sonra ayarladık farklı bölümler sayfada vurgulamak için farklı arka plan renkleri.

#header ( background:#ddd; ) #nav ( background:#c99; ) #main ( background:#9c9; ) #sidebar ( background:#c9c; ) #footer ( background:#cc9; )

Adım 4. Sütunları yan yana yerleştirin

Sütunları (#main ve #kenar çubuğu) yan yana yerleştirmek için, onları kayan hale getirin ve birini sola, diğerini sağa hareket ettirin. Ayrıca sütunların genişliğini de ayarladık.

#main ( kayan nokta:sol; genişlik:500 piksel; arka plan:#9c9; ) #yan çubuk ( kayan nokta:sağ; genişlik:250 piksel; arka plan:#c9c; )

Sütun genişliklerinin toplamının #wrap öğesinin genişliğine eşit olması gerektiğini unutmayın.

#sidebar öğesi şimdi #main öğesinin sağında işleniyor, ancak alt bilgi yanlış yerde.

Adım 5: Alt Bilgiyi Aşağıya Basma

Float özelliği hala geçerli olduğundan alt bilgi yerine oturmuyor. Bir öğe kayan hale getirildiğinde, belgenin genel akışından çıkarılır ve onu takip eden diğer öğelerden aşağı hareket etmez. Bu nedenle, #footer öğesi, #sidebar öğesinin hemen altında başlar.

Düzeltme, yakınlarda başka öğelere sahip olamayacağını söylemek için altbilgideki clear özelliğini ayarlamaktır.

#altbilgi ( clear:her ikisi de; arka plan:#cc9; )

Adım 6. Kenar Çubuğu için Arka Planı Ayarlayın

Artık kısa sütunun altbilgiye kadar uzanmadığını görebilirsiniz. Yapmak görünüm monoton, #sidebar ve #wrap öğeleri için aynı arka plan renklerini ayarlayın.

#kenar çubuğu ( kayan nokta:sağ; genişlik:250 piksel; arka plan:#99c; )

Hangi sütunun daha uzun, hangisinin daha kısa olacağını bilmiyorsanız, arka plan rengini ayarlamak için yöntemlerden birini kullanmanız gerekecektir.

7. Adım: Gezinti Çubuğunu Yatay Yapma

#nav öğesi, normal bir sırasız bağlantı listesi içerir. Görünümünü değiştirmemiz gerekiyor:

#nav ul ( margin:0; padding:0; list-style:none; ) #nav li ( display:inline; margin:0; padding:0; )

8. Adım: Kenar Boşluklarını, Dolguyu Ayarlayın ve IE 6 Uyumluluğu Ekleyin

Neredeyse bitti. Şablonu daha düzgün hale getirmek için bazı öğelerdeki kenar boşluğu ve dolgu özelliklerini hizalamamız gerekiyor.

#header ( padding:5px 10px; background:#ddd; ) h1 ( margin:0; ) #nav ( padding:5px 10px; background:#c99; ) #main ( float:left; width:480px; padding:10px; arka plan:#9c9; ) h2 ( kenar boşluğu:0 0 1em; ) #kenar çubuğu ( kayan nokta:sağ; genişlik:230 piksel; dolgu:10 piksel; arka plan:#99c; ) #footer ( clear:ikisi; dolgu:5px 10px; arka plan: #cc9; ) #footer p ( kenar boşluğu:0; )

#main ve #sidebar öğelerine dolgu eklerken, sağ ve sol boyutlarını öğelerin genişliğinden çıkarın. Çünkü CSS dikdörtgen modelinin etkisini hesaba katmanız gerekiyor.

Ve şimdi Internet Explorer 6'daki kayan öğeler hatasını telafi etmemiz gerekiyor. IE 6'daki 6. adımın sonucuna bakarsak, altbilginin #main altına taşındığını görebiliriz. Kusuru hemen fark etmezseniz sayfayı yukarı ve aşağı hareket ettirmeyi deneyin.

Hatayı düzeltmek için, yalnızca IE 6 için altbilginin yüksekliğini ayarlamak üzere HTML yıldızı yöntemini kullanalım:

* html #footer (yükseklik:1px; )

Bu kod biraz tuhaf görünebilir, ancak IE'deki başka bir hata nedeniyle, altbilgi bir piksel yüksekliğinde olamaz ve içeriğe uyacak şekilde uzar.

Sevgili acemi web yöneticileri, HTML'nin temellerini öğrendik.

Şimdi bu bilgiyi kullanarak hızlıca kendimize küçük bir web sitesi yapalım ve internete koyalım.

Doğru, yalnızca html kullanan tam teşekküllü bir kaynak yapmak zordur, ancak işte birkaç sayfadan oluşan bir kartvizit sitesi, oldukça mümkün.

Birinin tam olarak bu amacı varsa ve diğer programlama dillerini öğrenme arzusu yoksa, o zaman bu makale onlar için.

Kısacası, kendi kendine yazılmış bir versiyonda, bir CMS kullanılmadan hiçbir şey daha basit değildir.

Ve daha havalı bir şeye ihtiyaç duyanlar için, makalenin sonunda, blok şablon koduna sahip makalelere bağlantılar vardır. CSS kullanarak ve PHP kullanarak dinamik site kodu.

Bu sayfada saf html ile bir site yapacağız, tabiri caizse - site içinde site, oldukça çalışan ve içerikle doldurulmaya hazır.

Tüm süreci üç bölüme ayıralım.

1. Bilgisayarınızda bir site dizini oluşturun.

2. Site oluşturma.

3. Sitenin firmamızdan hostinge yani internete çevrilmesi.

Bilgisayarınızda bir web sitesi dizini oluşturma

İlk nokta en kolay olanıdır. Bir dizinin nasıl oluşturulacağı makalede çok net bir şekilde gösterilmiştir (bu sayfadaki tüm bağlantılar kaybolmamak için ayrı bir pencerede açılır).

Ve neyi, hangi klasöre koyacağımı, ana sayfanın kodundan sonra ayrıntılı olarak göstereceğim, böylece dizine gidecek bir şey zaten var.

Ardından en yaratıcı olan ikinci noktaya geçiyoruz.

Bir site şablonu oluşturun

Bir şablon oluşturmak için aşağıdaki kodu yapıştırmanız gereken bir düzenleyiciye ihtiyacınız olacak.

Basit bir Windows Not Defteri veya başka bir metin düzenleyici olabilir.

Şablonun temeli olarak çok katmanlı bir HTML tablosunu alalım. Önceden, CSS'nin ortaya çıkmasından önce, tüm siteler tablolarda yazılırdı, ancak şimdi blok düzeni daha popüler hale geldi.

Ancak şimdiye kadar bile, tablo yapısı eskimedi ve başarıyla uygulandı.

Örneğin, tamamen tablolara dayalı, en karmaşık işlevselliğe sahip bir yatırım CMS H-komut dosyası.

İşte size minimal tasarımlı bir site.

Gelecekte tabloların nasıl biçimlendirileceği makalede ayrıntılı olarak gösterilmektedir.

Site adı (kuruluş)

sitenin açıklaması

ev

Merhaba sevgili geleceğin web yöneticileri! 55 yaşındayım ve sizi web siteme davet etmekten mutluluk duyuyorum.
Bu site kendi başıma geliştirdiğim ilk site ve ondan önce sadece internete nasıl gireceğimi biliyordum.

Neden yapmaya karar verdim? Bu 3 ay boyunca, site oluşturma ve bu kaynağı oluşturma konusunda bilgiliyken, site oluşturma kılavuzlarının yazarlarının birçok nüansı olduğu gibi kabul ettikleri ve bunlara dikkat etmedikleri ortaya çıktı.
Ve benim için, yaşım ve deneyim eksikliğim göz önüne alındığında, sadece bu nüansları anlamak kolay değildi, en çok zaman aldılar.

Menü

Genel bilgi

Metin Genel bilgi

sitenin adı

kenarlık = "1"
hizala = "merkez"
kurallar = "satırlar"
style="width:60%;">