A. Pengenalan Dreamweaver
Dreamweaver merupakan salah satu produk dari Macromedia dan merupakan
tool yang digunakan untuk membuat halaman web. Dreamweaver membagi editornya
menjadi tiga jenis yaitu : editor HTML berbasis teks, editor yang mengkombinasi
tampilan grafik WYSIWYG (What You See Is What You Get) dengan tampilan kodenya,
dan editor yang benar-benar grafik. Macromedia Dreamweaver merupakan editor
dengan fitur-fitur lengkap yang memenuhi kebutuhan para programmer web, para
webmaster, dan para grafik designer.
Dreamweaver mempunyai beberapa fungsi penting dalam pembuatan suatu
halaman web, seperti Layout View yang memungkinkan para designer halaman web
dapat langsung menempatkan table dan sel di halaman webnya. Juga terdapat fungsi
tambahan seperti team collaboration dan peningkatan kemampuan multimedia.
Tapi sebelumnya jika anda belum mempunyai software dreamweaver dapat anda sedot
B. Komponen Dreamweaver
Komponen dreamweaver yang digunakan pada saat kita membuat halaman
web antara lain adalah document window, Insert Bar, Property Inspector, dan Site
Panel.
Jika Insert Bar dan Property Inspector tidak ada saat menjalankan Dreamweaver,
maka kita bisa menampilkannya dengan meng-klik menu Window kemudian pilih
Insert dan Properties.
Document window menampilkan dokumen atau halaman web yang sedang
kita buat. Pada bagian bawah dari Document window, kita bisa melihat nama file dari
semua dokumen yang sedang kita buka. Dengan meng-klik nama file tersebut maka
kita akan dengan mudah berpindah antara dokumen satu dengan yang lainnya.
Insert Bar terdiri dari beberapa macam icon untuk memasukkan berbagai
macam objek web seperti gambar, layer, dan tabel. Insert Bar ini terdiri dari beberapa
menu yang masing terdiri dari beberapa icon yang bersesuaian.
Property Inspector menampilkan property dari objek yang kita pilih didalam
dokumen. Seperti tinggi dan lebar suatu gambar ataupun mengubah jenis font,
format, maupun paragraph.
Site panel digunakan untuk menampilkan dan mengatur semua file dan folder
yang merupakan bagian dari website kita.
Dreamweaver dapat menampilkan dokumen dalam tiga cara yaitu Code, Split,
dan Design
. Pada Design, kita bisa menmpilkan dan
mengedit halaman web secara visual. Pada Code, kita bisa mengedit langsung
halaman web kita dengan menuliskan kode HTML, javascript, CSS, PHP, dan berbagai
macam kode-kode yang lain. Sedangkan pada Split, kita bisa melihat Code dan Design
secara bersamaan dalam satu window.
C. Pengaturan Site
Suatu website merupakan kumpulan dari beberapa halaman yang saling
berhubungan. Dreamweaver merupakan aplikasi yang dapat digunakan untuk
membuat dan mengelola suatu website serta memperbaikinya. Dreamweaver
menampilkan suatu site sebagai kumpulan dari file-file yang terdapat didalamnya.
Kumpulan file ini dapat dilihat pada Site Panel yang secara default berada disisi
sebelah kanan dari aplikasi Dreamweaver ini.
1. Manage Site
Untuk memulai membuat suatu website, kita akan membuat suatu site pada
Dreamweaver menggunakan Manage Site. Caranya adalah sebgai berikut :
• Klik Manage Site yang ada pada Site Panel
• Kemudian muncul
Untuk membagi Cell menjadi beberapa Cell lagi gunakan Split Cell
Pilih Cell yang akan dibagi, kemudia klik kanan pilih Table _ Split Cell..
6. Memasukkan Teks
Setelah halaman dibuka, tempatkan kursor pada Document Window dan kita bisa
langsung mengetikkan teks ke dalam halaman tersebut.
Pemrograman Internet 1
Bila kita ingin memformat teks yang sudah kita masukkan, caranya adalah dengan
memblok teks tersebut, kemudian ubah teks tersebut menggunakan panel
Property Inspector.
Ada beberapa properti dari teks yang bisa kita atur menggunakan Property
Inspector tersebut, yaitu format teks, ukuran, bentuk huruf, warna, ketebalan,
aligment, bullet, numbering dan lain-lain.
Membuat Teks bergerak
Pilih teks kemudian blok teks tersebut.
Kemudian pilih Insert _ Tag... Pilih pada bagian HTML tags, Page Elements, pilih
marquee.
7. Membuat Link
Link digunakan untuk menghubungkan antar halaman web, menghubungkan ke
website lain ataupun ke sebuah file.
Untuk membuat suatu link, baik link ke halaman web maupun link ke file, yaitu:
Pilih teks, gambar, atau objek yang ingin kita jadikan link
Pilih menu Modify _ Make Link atau klik kanan pilih Make Link, akan muncul kotak
dialog Select File.
Ketikkan alamat URL dari tujuan link kita kedalam teks box URL atau dengan
memilih file menggunakan kotak browser yang ada. Setelah selesai klik OK.
8. Membuat Template
Template ini akan kita gunakan ketika kita akan membuat halaman baru yang
hampir sama dengan halaman awal.
Untuk membuat template caranya adalah :
Setelah kita selesai membuat halaman awal dan disimpan.
Pilih File _ Save as Template, akan muncul kotak dialog save as template
Kemudian simpan dengan nama mysite atau terserah anda. Sebuah halaman baru
akan muncul dengan nama mysite.dwt
9. Menggunakan Template
Untuk menggunakan template yang telah kita buat, caranya adalah :
Pilih File _ New..
Pilih tab Template pada dialog New Document
Kemudian pilih Create
Atau jika kita telah membuat file dan ingin menggunakan template yang kita buat
pilih Modify _ Template _ Apply template to Page.
Setelah itu agar halaman tersebut dapat dimodifikasi, pilih Modify _ Template _
Detach from Template.
STYLE SHEET
RINGKASAN
Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini tiba
saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk keperluan
tersebut, Anda dapat menggunakan style sheet/CSS. CSS tidak hanya dapat membuat
tampilan nampak lebih baik, tetapi dapat membuat pengembangan halaman web menjadi
jauh lebih efisien karena menghilangkan semua kesulitan yang muncul pada halaman web
biasa tanpa style.
Style
1. Pengaturan latar belakang
<html>
<head>
<style type="text/css">
body
{
background: #00ff00
url("gambar.gif")
no-repeat fixed
center center
}
</style>
</head>
<body>
<p>
<b>Catatan:</b>
Properti background-attachment dan background-position tidak bisa digunakan dalam
browser Netscape 4.0.
</p>
<p>Ada teks disini</p>
<p>Tuliskan sekehendak kalian</p>
<p>Terserah apa saja</p>
<p>Yang penting ada tulisannya</p>
</body>
</html>
2. Penanganan font
<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.tebal {font-weight: bold}
p.teballl {font-weight: 900}
p.lengkap
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
<p class="normal">
Perhatikan paragraf ini</p>
<p class="tebal">
Bandingkan dengan paragraf diatasnya</p>
<p class="teballl">
Bandingkan yang ini juga</p>
<p class="lengkap">
Paragraf dengan semua atribut font dimasukkan</p>
</body>
</html>
3. Pembuatan border
<html>
<head>
<style type="text/css">
p.borderous
{
border-style: double;
border-width: 5px 10px 1px medium;
border-color: #ff0000
#00ff00 #0000ff
rgb(250,0,255)
}
</style>
</head>
<body>
<p class="borderous">
<b>Catatan:</b> Properti "border-color" dan "border-width" tidak dikenali oleh
browser Internet Explorer bila digunakan secara langsung. Gunakan properti "borderstyle"
untuk menyiapkan border dalam Internet Explorer.<br>
Internet Explorer 5.5 mendukung semua border style. Internet Explorer 4.0 - 5.0 tidak
mendukung nilai "dotted" dan "dashed" </p>
</body>
</html>
4. Pengaturan margin
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 80px}
</style>
</head>
<body>
<p>
Yang ini adalah paragraf biasa tanpa pengaturan margin, sepertinya biasa saja.
</p>
<p class="margin">
Pemrograman Internet 1
Bandingkan dengan tampilan paragraf ini. Coba Anda kecilkan ukuran window browser
agar terlihat lebih jelas perbedaannya.
</p>
<p>
This is a paragraph</p>
</body>
</html>
5. Mengatur padding pada sel table
<html>
<head>
<style type="text/css">
td {padding: 1.5cm}
td.value2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
Ini adalah tabel dengan sel yang menggunakan padding sama pada setiap sisinya
(1,5cm).
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="value2">
Bandingkan dengan tampilan tabel ini. Padding atas dan bawah memiliki nilai 0,5cm,
sedangkan padding kanan dan kiri nilainya 2,5cm.
</td>
</tr>
</table>
</body>
</html>
6. Menggunakan list
<html>
<head>
<style type="text/css">
ul
{
list-style: square outside url("gambarkecil.gif")
}
</style>
</head>
<body>
<p>Disini Anda menggunakan gambar berukuran kecil sebagai bullet untuk list.
Properti outside akan menyebabkan list menjadi lebih rapi bila terdiri atas item yang
berupa kalimat panjang dan window browser berukuran kecil.</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
7. Elemen latar depan dan latar belakang
<html>
<head>
<style type="text/css">
img.x1
{
position:absolute;
left:0;
top:0;
z-index:1
}
img.x2
{
position:absolute;
left:0;
top:100;
z-index:-1
}
</style>
</head>
<body>
<p><b>Catatan:</b> Netscape 4 tidak mendukung properti "z-index".</p>
<h1>Sepertinya Heading ini terhalang oleh gambar</h1>
<img class="x1" src="gambar.bmp" width="100" height="80">
<p>Nilai default z-index adalah 0. Z-index 1 memiliki prioritas lebih tinggi, sedangkan
Z-index –1 memiliki prioritas lebih rendah.</p>
<p></p>
<img class="x2" src="gambar.bmp" width="100" height="80">
<p>Sekarang Anda bisa membandingkan dengan tampilan di bagian bawah ini.
Apakah masih terhalang gambar?</p>
</body>
</html>
8. Mengubah tampilan Link
<html>
<head>
<style type="text/css">
a:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:visited {color: #0000ff}
a.four:hover {font-family: fixedsys}
a.five:visited {color: #0000ff; text-decoration: line-through}
a.five:hover {text-decoration: overline}
</style>
</head>
<body>
<p>Gerakkan pointer mouse di atas link-link di bawah ini untuk membuat link
tersebut berubah tampilannya.</p>
<p><a class="one" href="hlm1.htm"">Mengubah properti color</a></p>
<p><a class="two" href="hlm2.htm"> Mengubah properti font-size</a></p>
<p><a class="three" href="hlm3.htm"> Mengubah properti backgroundcolor</
a></p>
<p><a class="four" href="hlm4.htm"> Mengubah properti font-family</a></p>
<p><a class="five" href="hlm5.htm"> Mengubah properti text-decoration</a></p>
</body>
</html>
