Çarşamba , 29 Mart 2017
Anasayfa » WEB » CSS » CSS ile Web Sayfası Oluşturma

CSS ile Web Sayfası Oluşturma

Günümüzde web sayfalarında CSS3 ile ( hatta CSS4 yolda ) temel bir çok görsel rahatlıkla oluşturmak mümkün. Bu yazıda CSS’nin önemli bir kaç özelliği ile  sade bir site oluşturacağız. Oluşturacağımız sitenin tasarımı şu şekilde olacak.

css ile web sayfası yapımı

 

Öncelikle tasarımı inceleyip nerede hangi div etiketlerini kullanacağız ona karar vermeliyiz. Tasarıma geçmeden  biraz inceleyip, tasarımın kaç parçadan oluştuğunu çıkarmalıyız. Görece olarak farklılık göstermesine rağmen ben 4 ana parçaya ayırdım.

Bir de küçük bir not. Oluşturacağımız site DIV etiketleri ile yapılacaktır. Tablosuz sayfa tasarımı yapacağız.

Css ile web sayfası tasarımı taslak

Tabi bu sayfaların içinde de gruplanmış başka div etiketlerini oluşturdum. Sayfanın taslağı şu şekilde oluştu.

TEMPLATE1.2

Biraz daha detay eklediğimizde sayfanın hemen hemen tüm parçaları oluşturuldu.

TEMPLATE2

Daha da fazla detaylandırılabilir ancak şimdilik bu bu kadar yeterli olacaktır. Sonraki sayfaya geçerek CSS Sayfa tasarımına başlayabiliriz.

 

Sayfa tasarımında kullanılacak görseller: css-site-tasarimi-resim indir

 1.Adım: Her sayfada olması gereken temel kodları yazarak tasarıma başlıyoruz. Bu kodların yanında bir de tasarımda kullanmak için bir tane sitil dosyası oluşturup bağlantısını yapalım.

2.Adım: 4 temel parçayı ve oluşturan div etiketlerini body içine yazıyoruz. Sadece alt bölümü dışarı aldım. Orta bölümün aşağı doğru tekrar etmesi durumunda arka plan oturmayacaktı. Body etiketi ve içindekiler şu şekilde oldu.

3.Adım: Üst kısıma site adı, slogan ve menü için gerekli divleri oluşturuyoruz.

4.Adım: Bu adımda site adını, sloganı ve menü (ul li a)  için gerekli olan kodları yazarak devam edelim. Site ismi üzerine tıkladığımızda Giriş sayfasına gideceğini düşünürsek bu kısmın bir bağlantı olması gerekecektir.  Üst kısım için gerekli kodlar şu şekilde oluşacaktır.

Tasarım şu şekilde olacaktır. CSS kısmına geçtiğimizde görüntü çok daha iyi olacaktır.

Screenshot_15

 

5.Adım:  Şu aşamada CSS tasarımı yapacağız.  tasarim.css sayfasına geçip genel ve üst bölümün tasarımını yapıyoruz.

Body etiketinin varsayılan boşluklarını kaldırmak margin:0 yaptık. Sayfanın arka plan resmi ve arka plan rengini ayarlıyoruz..

Arka plan resmi sadece yatayda tekrar edeceği için repeat-x özelliğini de eklenir.

Link etiketlerinin altındaki çizgiyi kaldırmak için tüm a etiketlerinin alt çizgisini kaldırıyoruz.

Sayfa divinin genişliğini 980px yapıp soldan ve sağdan ortalı olmasını sağlıyoruz.

 

6.Adım: site adı etiketini sayfanın ortasında istediğimiz konuma getiriyoruz.  Tasarımdaki gibi gölge görüntüsünü elde etmek içinse text-shadow özelliğini kullanarak gölge efekti veriyoruz.

7.Adım slogan görüntüsünü elde etmek için de aşağıdaki kodları yazarız. Kodlama yaparken bazı temel kodları tekrar tekrar yazdığımı farkettim. Tasarıma başlamadan önce css reset dökümanı kullanırsanız ya da oluşturursanız. Margin:0 padding:0 gibi kodları defalarca yazmak zorunda kalmazsınız.

 

8.Adım: Menünün tasarımı için öncelikle menünün hizasını ayarlıyoruz.

Ul etiketinin başındaki madde imlerini kaldırmak için list-style değerini kaldırıyoruz. Ul etiketinin varsayılan iç ve dış boluklarını kaldırmak için margin ve padding değerlerini de kaldırıyoruz.

Sonra eşit aralıklarla menü etiketlerini(li) sola hizalı olarak(float:left) dağıtıyoruz. Linklerin yanında bulunan çizgileri border olarak ekliyoruz. Yalnız ilk ve son etiketteki kenarlıkları kaldırmak gerekiyor. bunun için sözde etiket kullanmak gerekiyor. li:first-child li:last child etiketlerini kullanarak gerekli düzenlemeleri yapıyoruz.

Link(a) etiketi içinde bulunduğu alanı tamamen kaplaması için display özelliğini block yapıyoruz. Mavi alanı tamamen kaplaması için sabit yükseklik verip, verdiğim sabit yükseklik değeri kadar satır yüksekliği değeri veriyorum. Diğer ayarlamalar ekrandaki yazı şekline ait olan ayarlamalar.

Belki linkerin üzerine geldiğimizde farklılık elde etmek isteyebiliriz. Bunun içinde a:hover seçicisini kullanıyoruz.

 

Görüntü şekildeki gibi oluşacaktır.

css tasarim

 

9.Adım: Slider paneli için sadece alanın yüksekliğini ayarlayıp içine bir tane resim ekleyeceğiz. Tasarım bittikten sonra bir tane jquery slider ekleriz.

***Menü içindeki li etiketlerini sola hizalı yaptığımız için slider ile menü arasına temizle adında bir tane div atıp buna clear both ekleyip daha yukarı kaymayı engelliyoruz.

 

 

10.Adım: Orta kısımda sol ve sağ bölümler bulunmakta. Sol kısımdaki etiketleri oluşturuyoruz.

11.Adım: sol ve sağ kısım için gerekli CSS düzenlemesini yapıp ürün tasarımı tasarımdaki gibi yapıyoruz. Toplam genişliğin 980px olduğunu hatırlayarak genişlik değerini veriyoruz. Yan yana gelmeleri için float:left değerini de ekliyoruz. (Not: alt bölümle orta bölüm arasıda temizle etiketi eklemeyi unutmayın)

Ürün resmi ürün başlığının solunda ve ürün başlığının hemen altında ürün detayı görünüyor. Ürün detayının sonda da daha fazla linki bulunmaktadır.

Ekran görüntüsü aşağıdaki gibi olacaktır.

 

resim

 

12.Adım: Sağ kısımda bulunan paneller için orta bir panel başlığı ve panel bölümü oluşturup farklı çalışmalarda kullanmak mümkün olacaktır. Aşağıdaki şekilde panelin Popüler Ürünler için bir panel galeri için 2. Paneli oluşturuyoruz. 2. Panel Jquery kullanarak resim gösterme paneli olacak. Şimdilik bir tane resim eklemek yeterli olacaktır.

HTML:

 

CSS:


13.Adım:
alt kısmı oluştururken hemen üzerindeki kırmızı alanı kenarlık olarak yapıp, alanın ortalanması için içine .ortala adında bir div ekliyorum. Sonrada sol ve sağ bölümler içinde yaptığım gibi sola ve sağa hizalamalar ile alt kısmı oluşturuyorum.

HTML:

 

CSS:

 

14.Adım: alt bölümdeki sağ kısmı oluşturmak için gerekli olan html ve css kodları

HTML:

CSS:

 

15.Adım: bazı etiketlerde font-family, margin, padding değerleri ortak olduğu için bir araya toplanıp CSS dosyası boyutu kısaltılabilir.

CSS ile WEB SAYFASI TASARIMINI INDIRIN :  HTML SAYFA TASARIMI

 

 

 

Hakkında Hayri

İlginizi Çekebilir

CSS ile Etkili Resim Efektleri

Eskiden can alıcı görüntüler oluşturmak için Photoshop gibi grafik programlarından faydalanırdık. Günümüzde CSS’e eklenen bir …

Bir Cevap Yazın

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