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)

#w rapper {
w idth: 800px;
margin: 0 auto;
}

#wrapper {

width: 100%. sidebar #sidebar { float: left. w idth: 70%. height: 300px. footer . content #content { float: left. width: 800px. width: 70%. height: 300px. height: 150px. } 2. #sidebar { float: left. } 3. #header { float: left. height: 300px. } 5. } 4. background-color: blue. background-color: green. header (Kepala Web) #header { float: left. background-color: red. width: 30%. #content { float: left. margin: 0 auto. height: 300px. w idth: 30%. height: 150px. w idth: 100%.

#footer { float: left. height: 300px. } #footer { . width: 30%.css #w rapper { w idth: 800px. background-color: red. w idth: 100%. height: 100px. background-color: yellow. margin: 0 auto. background-color: green. height: 150px. } #content { float: left.css. } #wrapper { width: 800px. margin: 0 auto. background-color: blue. height: 100px. width: 100%. width: 70%. width: 100%. berikut bagannya style. } jadi kumpulan tag di atas menjadi satu file yaitu style. #footer { float: left. height: 300px. } #sidebar { float: left. } #header { float: left.

php <html> <head> <title>Membuat Layout Web Den <link href="style. background-color: yellow. MENU.</p> </div> <div id="sidebar"> <h1>#sidebar</h1> <p>Ini adalah bagian SIDEBAR. height: 100px. float: left. MENU. DAFTAR KONTEN. width: 100%. dan sebagainya.php kita langsung aja buat index.css" rel="styles <html> <head> <title>Membuat Layout Web Dengan CSS</title> <link href="style.</p> </div> <div id="footer"> <h1>#footer</h1> <p>Ini adalah bagian FOOTER. oke kita buat dulu seperti ini index. Biasanya terdapat HAK CIPTA.php biar langsung tampil. } kemudian setelah selesai kita membuat style.</p> </div> <div id="content"> <h1>#body</h1> <p>Ini adalah bagian BODY yang merupakan bagian inti dari website. Biasanya terdapat MENU.</p> </div> . mari kita lanjutnya yaitu dengan membuat file baru yaitu index. Biasanya terdapat LOGO. dan sebagainya. dan sebagainya.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>#header</h1> <p>Ini adalah bagian HEADER.css diatas di dalam folder “Latihan” maka kemudian kita akan membuat bagaimana cara menampilkan desainnya.

php dengan style. </div> </body> </html> perlu diingat bahwasanya dalam menggabungkan antara index.css" rel="stylesheet" type="text/css"> setelah selesai itu kita buka file buat tadi index.css" rel="styleshee 1 <link href="style.css yaitu dengan menggunakan perintah ini seperti contoh di atas <link href="style.php kemudian teng-teng jadilah layout sederhana dibawah ini .

Membuat desain web dengan CSS .