CSS

Membuat desain web dengan CSS disertai contohnya

Baiklah saya akan memberikan contoh bagaimana membuat desain atau membuat layout web dengan css, memang pada intinya dalam membuat layout web dengan css ini memerlukan ketelitian, pada tutorial kalo ini yang saya akan bahas secara berurutan mengenai desainnya secara umum, standarnya membuat desainnya itu terdiri dari DIV dan CLASS yang pertama desain layoutnya adalah :

1. Wrapper

Wrapper disini adalah sebagai bungkus dari antar muka desain, maksudnya adalah dengan wrapper kita bisa mengecilkan lebar pixelnya

2. Header

Header merupakan kepala dari layout web atau biasanya ditempatkan untuk logo website

3. Sidebar

Sidebar disini merupakan desain samping web, posisi sidebar bisa kiri dan kanan

4. Content

Content biasanya mengacu pada isi website, biasanya terletak pada tengah

5. Footer

Footer adalah layout web yang terletak pada desain bawah setelah Content dan Sidebar

baiklah akan saya jabarkan bagaimana alur dari membuat desain web dengan css. Untuk membuat desain ini sebaiknya adalah ada aplikasi pendukung untuk membuat layout ini, bisa menggunakan notepad++, netbean dan juga bisa menggunakan Dreameweaver.

Oke kita langsung saja membuat layout setelah keterangan di atas. Sementara saya membuat folder dahulu namanya “Latihan”, nah folder kita isi dengan style.css yang tag divnya adalah wrapper, header, sidebar, content dan footer

1. Layout wrapper (Bungkus)

2. header (Kepala Web)

3. sidebar

4. content

5. footer

jadi kumpulan tag di atas menjadi satu file yaitu style.css, berikut bagannya

style.css

kemudian setelah selesai kita membuat style.css diatas di dalam folder “Latihan” maka kemudian kita akan membuat bagaimana cara menampilkan desainnya, mari kita lanjutnya yaitu dengan membuat file baru yaitu index.php kita langsung aja buat index.php biar langsung tampil. oke kita buat dulu seperti ini

index.php

perlu diingat bahwasanya dalam menggabungkan antara index.php dengan style.css yaitu dengan menggunakan perintah ini seperti contoh di atas

setelah selesai itu kita buka file buat tadi index.php kemudian teng-teng jadilah layout sederhana dibawah ini

Membuat desain web dengan CSS

Membuat desain web dengan CSS

 

 

Baiklah untuk lebih jelasnya temen2 silahkan download latihannya di bawah ini

Download Latihan Layout dengan css



Oh ya temen-temen jangan lupa tinggalin komentar ya, saran, kesan dan kritiknya di bawah. Untuk membangun blog yang lebih baik ke depannya. dan slamat berkunjung kembali di mampiro.com :)

Mohon maklum adanya file-file mampiro sudah dihapus oleh pihak ziddu... kami dari pihak mampiro.com akan mereparasinya kembali.., terima kasih sudah berkunjung


2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">