MODUL 5 MEMBUAT HALAMAN WEB MENGGUNAKAN MACROMEDIA DREAMWEAVER

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. 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.

Pemrograman Internet 1

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

Pemrograman Internet 1

Pilih New.. Site Kemudian akan muncul wizard untuk mendefinisikan suatu site Langkah pertama

Kita diminta untuk mengisikan nama dari website kita Langkah kedua

Terdapat pilihan apakah kita akan menggunakan server technology seperti ASP, ASP.NET, PHP, JSP, atau ColdFusion. Langkah ketiga

Pemrograman Internet 1

Ada 2 pilihan untuk meletakkan file-file dari website kita. Pertama adalah diletakkan pada drive lokal. Kedua diletakkan pada server secara langsung menggunakan local network Langkah keempat

Kita akan diminta mengisikan beberapa informasi yang dibutuhkan, sesuai dengan pilihan kita pada langkah sebelumnya. Window yang terakhir muncul adalah summary dari site yang telah kita buat dan klik done. Setelah semua langkah tersebut kita lakukan, maka pada Site Panel akan tampil informasi tentang site yang kita buat.

2.

3.

Membuat file Klik kanan pada folder site kita, kemudian pilih New File Ketikan nama file, kemudian Enter Bila kita mengakses website, biasanya halaman yang pertama kali diakses adalah file index.html, untuk itu pertama kali kita membuat file dengan nama index.html Untuk mulai bekerja dengan file yang kita buat, kita bisa men-double-klik file tersebut pada Site Panel Mengganti Title Untuk mengganti title dari website, kita biasa isikan pada edit box title yang berada dideretan icon toolbar di bagian atas Dreamweaver.

Pemrograman Internet 1

title tersebut akan tampil pada bagian paling atas web browser.

4.

Page Properties Ketika pertama kali memulai Dreamweaver, halaman web kita secara default tidak mempunyai background. Kita dapat mengeditnya menggunakan Page Properties. Pilih Page Propeties yang ada pada Property Inspector.

5.

Membuat Tabel Penggunaan tabel sangat berguna untuk pengaturan data. Tabel juga bisa digunakan untuk mengontrol dimana harus meletakkan gambar dan teks pada halaman web. Cara membuat tabel adalah : Pilih Insert Table

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 marquee.

Tag... Pilih pada bagian HTML tags, Page Elements, pilih

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.

8.

Ketikkan alamat URL dari tujuan link kita kedalam teks box URL atau dengan memilih file menggunakan kotak browser yang ada. Setelah selesai klik OK. Membuat Template

Pemrograman Internet 1

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

9.

Kemudian simpan dengan nama mysite atau terserah anda. Sebuah halaman baru akan muncul dengan nama mysite.dwt 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.

Pemrograman Internet 1

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
Start Tag NN IE W3C Kegunaan <style> <link> 4.0 3.0 3.2 4.0 3.0 3.2 Mendefinisikan style dalam sebuah dokumen Mendefinisikan relasi antara dua dokumen yang berhubungan

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 {

Pemrograman Internet 1

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 tabel <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>

Pemrograman Internet 1

<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>

Pemrograman Internet 1

</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>

Pemrograman Internet 1