Modul Desain Web

TUTORIAL MEMBUAT WEBSITE SEDERHANA

MENGGUNAKAN MACROMEDIA DREAMWEAVER 8

Adobe Dreamweaver merupakan software yang digunakan untuk membuat

halaman web dengan mudah dikarenakan kemudahan dalam membuat dengan tampilan
visual sehingga dapat mempercepat pembuatan tampilan web dan dapat melihat hasil
web didalam software ini secara langsung (realtime) tanpa harus membuka browser
terlebih dahulu. Software ini juga mendukung berbagai macam bahasa pemrograman
seperti PHP, ASP, Visual Basic, Coldfusion dan masih banyak lagi.
Web yang akan kita buat ini akan dibuat menggunakan tabel, ini merupakan cara yang
sederhana untuk membuat tampilan web.

Ikuti langkah-langkah berikut ini :

1. Buka software Adobe Dreamweaver kalian, tunggu beberapa saat hingga terbuka.
Langkah pertama yang harus kita lakukan adalah membuat "Dreamweaver Site"
ini bertujuan agar halaman web yang kita buat teroganisir dengan baik dan berada
dalam 1 tempat yang sama. Klik Dreamweaver Site.

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

2. Lalu akan muncul jendela, berikan nama website yang kalian inginkan. Disini
saya memberikan nama web-nya adalah websiteku, Lalu tekan Next

3. Disini kalian akan diberi pernyataan untuk menggunakan bahasa pemrograman

server-side atau tidak, karena berhubung kita hanya membuat web sederhana
maka server-side tidak digunakan. Pilih 'No, I do not want to use a server
technology' , lalu Klik Next

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

4. Tempatkan dimana kalian ingin menyimpan file web ini, kalian dapat menentukan
ingin disimpan dimana file web-nya nanti. Saya disini membiarkannya secara
default berada di Documents, lalu klik Next

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

5. Pilih 'None' karena kita tidak menggunakan remote server, dan kemudian
langsung klik Next saja.. ini langkah terakhir untuk membuat 'Dreamweaver
Site' folder

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

6. Pada 'Create New' pilihlah HTML, lalu akan terlihat tampilan baru lalu pilih mode
'Design'. kemudian pilih icon tabel, buatlah barisnya menjadi 4 dan kolom 2. pada
tulisan Header pilihlah 'Both'. Klik OK

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

7. Disini kita akan menuliskan kode HTML untuk mengatur lebar baris dan kolom
pada tabel, beralihlah ke mode 'Code', lalu aturlah tag HTML table width menjadi
1029 dan height menjadi 764.
Pada baris pertama kolom pertama aturlah menjadi width-nya menjadi 233
height-nya menjadi 250, dan pada baris pertama kolom ke-2 atur width-nya
menjadi 780.
Pada baris ke-2 atur height-nya menjadi 72, pada kolom ke-3 atur height-nya
menjadi 391, dan yang terakhir pada kolom ke-4 aturlah menjadi 39. (lihat pada
gambar untuk lebih detailnya)

8. Beralihlah ke mode 'Design', pada baris kedua seleksi / blok kemudian klik
kanan Table ---> Merge Cells. selanjutnya pada baris keempat seleksi / blok
kemudian merge kembali tabel tersebut.

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

9. Selanjutnya kita akan memberikan warna pada masing-masing baris dan kolom
dengan cara klik baris atau kolom yang ingin diberi warna, lalu pada bagian
bawah ada 'Properties' pilih Bg dan pilihlah warna yang disukai.

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

10. Disini kita akan memberikan gambar pada header web, beralihlah kembali pada
mode 'Code' dan ketikkan kode HTML pada baris pertama kolom pertama
<img src="nama_gambarnya.jpg" width="233" height="250" /> , pada
baris pertama kolom kedua ketikkan <img src="gambarnya.jpg" width="780"
height="250" /> . dan berikan teks pada header kita <font size="6"> NAMA
WEBNYA</font> .
Saya sarankan untuk menggunakan gambar yang memiliki background transparan
atau minimal menggunakan gambar yang warna background-nya sama.

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

11. Kita akan memberikan tombol navigasi interaktif pada web sederhana ini, dengan
cara klik dahulu pada tabel di baris kedua lalu pilih menu Insert  Media 
Flash Button (Jika ada pemberitahuan untuk menyimpan file web saat membuat
tombol ini, maka simpanlah). Kemudian akan muncul jendela, pilih tombol yang
diinginkan. Saya disini menggunakan tombol Blip Arrow , berikan nama pada
tombol-nya 'Home' dengan ukuran font sebesar 13 dan sesuaikan warna pada
tabel baris kedua. Lalu klik OK, kemudian atur ukuran tombol pada 'Properties'
dengan ukuran 200 x 50.
Lakukan hal yang sama hingga membuat 4 buah tombol, yaitu Home, Profil,
Kontak, dan Tentang Saya

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

12. Beralihlah kembali pada mode 'Code', kita akan membuat footer nama pembuat.
Pada baris ke-4 ketikkan kode HTML berikut :
<h4 style="color: black;">2018 &copy; Nama Web || Nama Kalian</h4>

2018 Siti Melissa Futri, S.SI

 Modul Desain Web

13. Langkah selanjutnya adalah membuat artikel pada web kita, masih pada mode
'Code' , pada baris kedua kolom kedua ketikkan kode HTML :

2018 Siti Melissa Futri, S.SI