Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm

Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5

Değerli Blog Takipçilerimiz.” ile Ücretsiz Bir Tema ile 5. Bölüm ” isimli yazımız ile karşınızdayız.

Geçtiğimiz haftalarda 4 bölüm olarak yayımladığımız ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” başlıklı eğitim serimizin 5. bölümünde artık anasayfamızın tasarımını bitirmiş olacağız.

Sizlerden gelen ve yorumlarınızı bizimle paylaştığınız ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazı dizimizi ilerleyen günlerde toparlayarak ” html ile web tasarımı ” ve ” html eğitim seti rehberi ” yapmayı planlıyoruz. Hemen çok fazla uzatmayalım ve anasayfanın son bölümlerini tamamlamaya başlayalım.


Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm

Değerli blog takipçilerimiz. Aşağıda en son kaldığımız yer olan ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4 bölüm ” yazımıza ait görselleri hatırlayacaksınız. En son olarak öne çıkarılan hizmetimizi, hemen altına diğer alt hizmet kategorilerimizi, referanslarımızı tamamlamıştık. Bugün ise hemen alt sectionlarda , bölümlerde yer alan mutlu müşteri memnuniyeti adını verdiğimiz bölümler geliyor. Bu bölümlerde yapmış olduğumuz öne çıkarılan müşteri yorumlarını, ekip arkadaşlarımızı, proje sayılarını vb.. içerikleri düzenleyeceğiz. Son olarak footer diye adlandırdığımız ve site alt kısmı diyebileceğimiz kısmı bitireceğiz. Footer bölümü her sayfanın en alt kısmında sabit olarak yer alacaktır bilginiz olsun. Son kaldığımız yer aşağıda görselde mevcuttur.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Devam Ediyor 3
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 4. Bölüm Hizmetler Düzenlemeleri Devam Ediyor 3, html, , , web tasarımı, web tasarımı nasıl yapılır

Artık nasıl başlayacağımızı biliyoruz değil mi ? Notepad plus programı ile index.html dosyasını açıyoruz. Aynı index.html dosyasını yine internet tarayıcımızı kullanarak açıyoruz ki yaptığımız değişikliklerin çıktısını görebilelim. Hemene alt tarafta yer alan notepad plus görselinden hangi section bölümünü veya bölümlerini değiştirmemiz gerektiğini anladınız umarım. Görselleri çok iyi incelemenizi tavsiye ediyorum. İlk olarak 373. satırdan başlayan ve bizim projelerimiz ile mutlu müşteri memnuniyetini öne çıkaracağımız bölüm gözümüze çarpıyor. Bu bölümde yer alan <p>, <h2>, <div_class>, margin, left, right, column, row, <a_href> vb… benzer kodları geçtiğimiz derslerimizde anlatmıştık. Artık sizler nerelerin değiştirilmesi gerektiğini biliyorsunuz. Bu bölümde karşımıza ilk defa çıkan bir kod var.

<h2 class=”timer count-title count-number” data-to=”23″ data-speed=”1500″></h2>

Bu kod, müşteri memnuniyeti, proje vs. gibi rakamsal değerlerin yer aldığı bölümdeki açılış animasyonlarını düzenleyen koddur. data-to kısmında ki 23 sayısını değiştirebilir, data-speed bölümünden de animasyon sayma hızını dilediğiniz gibi değiştirebilirsiniz. Aşağıda yer alan görseli iyi incelemenizi tavsiye ederim. Bilgisayarınıza kayıt edebilir ve yakından detaylı olarak izleyebilirsiniz.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm, html, html web tasarım, html ücretsiz tema, , web tasarımı nasıl yapılır

Yukarıda ki görselde kandi web sayfa içeriklerinize göre gerekli değişiklikleri yaptıktan sonra aşağıda yer alan görseli elde etmeniz gerekiyor.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 1
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 1, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Umarım sizde benzer görüntüyü elde etmişsinizdir. Kod yapılarında şayet her hangi bir yalnışlık yaparsanız, site görünümünüz tamamen değişebilir. Bu yüzden yaptığınız işlemleri kayır etmeden önce mutlaka kodların yedeğini almanızı şiddetler öneririm. Çünkü sizler bu işe henüz başladınız. ” Yedek Hayat Kurtarır. ”. Şimdi gelelim ekip üyelerimizi düzenlemeye. Biz burada yer alan görsellerin hepsini aynı hazırlıyoruz ki sizler hangi kodların nerede, nasıl değiştirileceğini daha iyi anlayın. Tabi bu görsel düzenlemeleri için biraz grafik bilgisine ve görsellere ait format bilgisine sahip olmanız gerekiyor.

Ekip üyeleri bölümü 428. satırdan başlıyor ve <section> olarak belirtilmiş. Aşağıda yer alan görseli inceleyerek kontrol edebilirsiniz. Burada karşımıza yine bildiğimiz kodlar geliyor. Farklı olan kodlar var elbette. Aşağıda yer alan ve global bir site olan fontawesome tarafından ücretsiz olarak sunulan ikon paketleri yer almaktadır. fa fa-facebook, fa fa-instagram, fa fa,whatsapp vb…. benzer kodlar sitemizin görselleşmesi için kullanılabilir. Aşağıda er alan kod yapısını incelemenizi ve fontawesome resmi web sitesini mutlaka ziyaret etmenizi öneririm.

<li><a href=”#”><i class=”fa fa-facebook-f”></i></a></li>
<li><a href=”#”><i class=”fa fa-twitter”></i></a></li>
<li><a href=”#”><i class=”fa fa-linkedin”></i></a></li>
<li><a href=”#”><i class=”fa fa-google-plus”></i></a></li>

Bu bölümde yer alan hashtag ( # ) yazan yerlere, kendinize ait sosyal medya hesaplarınızın tarayıcınızda gördüğünüz linklerini kopyala yapıştır yaparak yapıştırabilirsiniz. Örnek vermek gerekirse ( <li><a href=”https://www.facebook.com/unsalanweb”><i class=”fa fa-google-plus”></i></a></li> )

Aşağıda ekip üyeleri bölümüne ait kodların düzenlenmiş haline ait görseli bulabilirsiniz. Burada dikkat etmeniz gereken husus, daha önce ki derslerimizde belirttiğimiz görsellerin alt= etiketleri ve doya isimlerinin kök klasörde, yani /img/dosyaismi.jpg veya png veya diğer görsel formatları olması. Her bir ekip üyesinin sosyal medya hesap linklerini de doldurmanız gerekecek elbette. Google botları, linki olmayan ve link yapısını ( # ) gördüğünde site sıralamasında olumsuz not vermektedir bilginiz olsun.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 2
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 2, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Yukarıda ki görseli inceleyerek, yapmanız gereken değişiklikleri gerçekleştirdiğinizde aşağıda yer alan çıktıyı elde etmeniz gerekecektir.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 3
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 3, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Ve son olarak footer diye adlandırdığımız ve web sitemizin her sayfasının en alt kısmında yer alacak olan bölüme. Bu bölümde genellikle galeriler, iletişim bilgileri, blog yazıları, bülten abonelikleri ve benzeri içerikler paylaşılmaktadır.  Notepad plus programında 613. satırda footer denilen bölümün başladığı yer zaten html tema içerisinde belirtilmiş. Kurumsal logomuzun altında iletişim bilgilerimiz ve sosyal medya hesaplarımız ikonlar eşliğinde yer almış. İlk olarak ilgili kodları değiştirelim. Comtact Us > İletişim Bilgilerimiz, Adresimiz, Telefon, Mail Bilgilerimiz ve benzeri iletişim detayları ve sosyal medya hesap linklerimiz.

İletişim bilgileri bölümünü düzenledikten sonra, hemen yan tarafında menü bölümüne geçiyoruz. Bu bölüme hızlı menü diyebiliriz. Bu alanı düzenledikten sonra da sağ tarafında yer alan ve son eklenen yazılar bölümünü düzeltebiliriz. Footer‘ın en sağında yer alan bölümde de ziyaretçilerimizin web sayfamıza ve haberlerimize abone olmalarını sağlayabiliriz. Tabi ki bülten abonelikleri kod yapısı olarak farklı altyapı kullanmaktadır ve karışık düzenlemeler gerektirmektedir. Bu konu ile ilgili ve form oluşturma konusu ile ilgili yazılar web sayfamızdan yayımlanacak olup, siz değerli blog takipçilerimize duyurulacaktır. Footer bölümü kodlarının düzenlenmiş haline ait görselimiz aşağıda yer almaktadır. Çok iyi incelemenizi tavsiye ederim.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Footer 1
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Footer 1, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Footer 2
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Footer 2, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Yukarıda gördüğünüz ve kendi sitenize ait bilgileri düzenlediğinizde aşağıda yer alan final footer bölümü çıktısını elde etmeniz gerekiyor. Böylece anasayfa tasarımımızı bitirmiş bulunuyoruz.

Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 4
Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm 4, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

Evet değerli blog takipçilerimiz. ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5. Bölüm ” başlıklı yazımıza bugün için son veriyoruz. Yarın 6. bölüm ile karşınızda olacağız web sitemizi yapmaya devam edeceğiz ve çalışmamızı bitireceğiz.

Umarım 5 bölümden oluşan ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır ” yazı dizimiz beğenmişsinizdir. Aşağıda yer alan yorum bölümüne yorumlarınızı ve her türlü sorularınızı bekliyoruz. Tabi sosyal medya hesaplarınızda paylaşmayı da unutmayın lütfen. Yarın ” Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 6. Bölüm ” ile görüşmek dileğiyle.

Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5
Html ile Web Tasarımı Yapmayan Kalmasın Html ile Ücretsiz Bir Tema ile Web Tasarımı Nasıl Yapılır 5, html, html web tasarım, html ücretsiz tema, html ücretsiz tema web tasarımı, web tasarımı nasıl yapılır

2 yorum

  1. Bu footer denilen bölüm harbi zorladı ama evelallah çözdük. Teşekkürler onur bey güzel yazı dizisi oldu.

    1. Author

      Biz teşekkür ederiz Özcan bey. Tasarımınızı bizimle paylaşmanızı rica ederim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir