Bukan Pakar SEO Ganteng

Showing posts with label Dreamweaver. Show all posts
Showing posts with label Dreamweaver. Show all posts

Cara Membuat CSS otomatis di dreamweaver CS


Cara Membuat CSS otomatis di dreamweaver CS www.edikomputer.com
Dokument CSS digunakan untuk mengatur tata letak website, nah css sendiri bisa di tulis secara manual namun jika kamu belum paham tentang kode CSS Dreamweaver adalah pilihan tepat untuk mengatur dokumen CSS kamu, di dreamweaver kamu cukup tekan tombol tertentu maka akan otomatis muncul kode CSS yang kamu inginkan.

Oke langsung saja kita bahas materi kali ini, Disini saya menggunakan Adobe Dreamweaver CS 6, anda juga bisa menggunakan dreamweaver versi sebelumnya

silahkan buka program dreamweaver yang kamu miliki buat file CSS Baru
Cara Membuat CSS otomatis di dreamweaver CS www.edikomputer.com
Oke sekarang Buat pengaturan css baru dengan cara mengklik tanda Plus pada jendela properties
Cara Membuat CSS otomatis di dreamweaver CS www.edikomputer.com
Lalu akan muncul window baru dengan judul new css rule, nah disini kita mulai mengedit css yang kita inginkan

Untuk membuat tag seperti body, font, h1, h2, h3 dst kita menggunakan tag (redefines an HTML element)pada pilihan selector type

Untuk untuk ID biasanya menggunakan tanda # di depan selector css misalnya #header dan untuk class kita bisa menggunakan titik di awal judul selector misalnya .logo

Nah untuk lebih jelasnya mari kita lihat video tutorialnya
Pramudya Ksatria Budiman Dreamweaver , HTML/CSS , video

membuat web statis sederhana menggunakan dreamweaver


kali ini edikomputer.com akan mengajak kamu semua untuk belajar membuat template web sendiri meggunakan dreamweaver, tentu kita akan merasa puas dan bangga menggunakan sesuatu hasil karya sendiri meski tampilannya masih sederhana oke mari kita pelajari cara membuat web statis menggunakan dreamweaver dan tetu edikomputer akan memberikan tutorialnya step by step agar lebih mudah untuk di pelajari

Persiapan ;

Oke setelah semua item di atas sudah siap mari kita mulai membuat proyek ini 
pada dasarnya sebuah web terdiri dari 2 file yaitu :
  1. index.html
  2. style.css
dan bila web kita menggunakan media gambar kita bisa menmbahkan folder images tapi kali ini kita akan membuat versi yang sangat sederhana

setelah wamp server terinstal pada komputer buat sebuah folder para directory www yaitu C:\wamp\www beri nama folder tersebut terserah anda misal webgue
kemudian bukalah Dreamweaver buat new file html
kemudian save pada folder webgue tadi dengan nama index.html  lalu buat file baru lagi yaitu file CSS kemudian save pada folder webgue dengan nama style.css setelah itu buka browser dan ketikan http://localhost/   pada browser kemudian klik directory webgue dan ternyata ........ masih kosong atau blank ya tentu saja karena kita belum memberikan konten pada web kita

oke sekarang kembali lagi ke file index.html kita akan menemukan tulisan seperti ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

oke sekarang kita akan memanggil file style.css nya agar style yang kita buat terhubung ke file index.html copy kode berikut kemudian paste diatas </head>

<link rel="stylesheet" href="style.css" type="text/css" />

sehingga susunanya seperti ini ;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" /></head>
<body>
</body>
</html>

teks warna merah merupakan teks yang tadi kita tambahkan kemudian save dengan begitu file index.html telah terhubung dengan style.css

nah sekarang kita beri pengaturan pada style.css  buka file style.css tadi, disinilah kemudahan membuat web dengan dreamweaver kita tidak perlu membut kode-kode yang rumit kita hanya memberi pengaturan yang sesuai maka akan terbetuklah sebuah kode

oke sekarang kamu buat aturan css lihat pada jendela css klik tanda + untuk membuat aturan css baru lihat gambar berikut :
* kemudian akan muncul kotak dialog new css rule
* pada selector type pilih Advanced (IDs, pseudo-class selectors)
* pada selector ketik nama id yaitu #body
* pada devine in biarkan saja
* kemudian pada bacground beri warna latar belakang web kita beri warna sesuka anda dan disini saya 
* menggunakan background hitam
* kemudian pada box : width =100%  height=auto kemudian klik oke maka akan muncul kode berikut ini
#body {
background-color: #000000;
width:100%;
height:auto;
}
kemudian klik save
* kemudian terapkan pada index.html  dengan  mengetik kode <div id="body"><div> kemudian klik save

* buat aturan css baru caranya sama seperti diatas dan berinama #wrapp  pada background beri warna putih height= 768px  dan width = 800px klik oke maka akanterbentuk css seperti ini :

#wrapp {
background-color: #FFFFFF;
height: 768px;
width: 800px;
}
* buka file index tambahkan kode berikut ini  <div id="wrapp"></div> letakkan kode tersebut diantara kode <div id="body"> dan <div> sehingga susunanya seperti ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="body">
        <div id="wrapp"></div>
</div>
</body>
</html>

nah sekarang kamu lihat pada browser maka akan terlihat background hitam dan putih tapi konten masih terletak di sebelah kiri nah agar berada di tengah tambahkan kode berikut <div style align="center"> letakkan diatas <body> dan </div> di bawah </body>

sekarang lihat browser maka akan terlihat background putih diantara background hitam.

sampai disini dulu ya tutorialnya esok kita lanjutkan lagi dan jangan lupa ikuti terus tutorialnya dan mohon jangan lupa komentarnya ya biar saya semangat terus untuk melanjutkan proyek ini, jangan cuma baca, copas terus kabur
Pramudya Ksatria Budiman Dreamweaver