Berisi Tentang Cara Mendesain Web Sederhana Dengan Menggunakan Aplikasi Dreamweaver 8

1. Desain Web Menggunakan Dreamweaver 1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Perkembangan teknologi informasi pada saat ini khususnya dalam penyampaian
informasi sangat pesat perkembangannya. Hal ini telah menjadi bagian dari kehidupan
kita sehari-hari, misalnya penggunaan internet sebagai media untuk mendapatkan
informasi. Fungsi komputer sekarang ini bukan hanya untuk melakukan pekerjaan yang
bersifat terbatas, seperti mengerjakan tugas kantor, tetapi dengan komputer kita bisa
mendapatkan informasi yang luas dan berwawasan dari seluruh pelosok penjuru dunia
dengan menggunakan jasa internet.
Penyampaian dan penyebarluasan informasi dengan menggunakan fasilitas jasa
internet dan www (world wide web) yang sedang banyak diminati, mulai dari kalangan
pelajar, mahasiswa sampai kepada perusahaan yang bergerak dibidang bisnis maupun
lainnya. Sekarang ini website bukan lagi sesuatu hal yang asing/tabu. Banyak sekali dinas
pemerintahan, sekolah-sekolah, kantor-kantor, instansi- instansi bahkan personal yang
memiliki website, bahkan ada yang bergerak dibidang pembuatan website dan bentuk
lainnya.
Bermacam-macam langkah yang digunakan profesi web untuk membuat suatu
homepage, salah satu tool yang banyak digunakan untuk mendesain sebuah web adalah
Macromedia Dreamwever. Macromedia Dreamweaver adalah sebuah HTML editor
profesional untuk mendesain secara visual dan mengelola situs web maupun halaman
web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual
atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing,
Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang
sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain
web.
Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang
memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat
melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas
browser, maupun perkiraan waktu download halaman web.

2. Desain Web Menggunakan Dreamweaver 2
1.2 Tujuan Penelitian
Adapun tujuan yang ingin dicapai adalah sebagai berikut:
1. Menghasilkan rancangan sistem informasi berbasis web
2. Menghasilkan software untuk menampilkan sistem informasi yang berbasis web.
1.3 Manfaat Penelitian
Adapun manfaat yang dapat diambil dari penelitian ini adalah sebagai berikut:
1. Memberikan kemudahan bagi pihak-pihak yang terkait untuk mendapatkan
informasi.
2. Membantu meningkatkan mutu pendidikan.
3. Manfaat bagi peneliti sendiri dapat menambah pengetahuan tentang sistem
informasi berbasis web dengan menggunakan Macromedia Dreamweaver.

3. Desain Web Menggunakan Dreamweaver 3
BAB II
PEMBAHASAN
2.1.Macromedia Dreamwever 8
Macromedia Dreamweaver 8 adalah sebuah editor HTML professional untuk
perancangan (design), pengkodean (coding), dan pengembangan situs web, halaman web
danaplikasi web.
Versi terbaru macromedia dreamweaver di tahun 2005 adalah macromedia diameter 8
yang merupakan penyempurnaan dari versi sebelumnya dan tentu saja semakin mudah
dalam penggunaanya. Fasilitas terbaru dari micromedia dreamweaver 8 adalah zoom tool
dan guides, panel CSS yang baru, code collapse, Coding toolbar, dan insert flash video.
Tidak jauh berbeda dari versi sebelumnya, macromedia dreamweaver 8 mendukung
pemrograman Client Side yang terkenal, yaitu Javasript dengan penggunaan yang sangat
mudah. Macromedia Dreamweaver 8 juga mendukung pemrograman Script Server Side,
seperti Personal Home Page (PHP), Active Server Pages (ASP), ASP.NET, Coldfusion
dan Java Server Page (JSP).
Universitas Sumatera Utara
Macromedia Dreamweaver 8 merupakan software yang dikenal sebagai software web
authoringtool, yaitu software yang didesain untuk desain dan layout halaman web.
Macromedia Dreamweaver 8 telah mengalami banyak perbaikan dan peningkatan dari
versi sebelumnya. Macromedia Dreamweaver 8 memiliki user interface yang lebih baik
dari versi 4 karena adanya peningkatan kemampuan toolbar sehingga dapat memakai
toolbar yang sudah ada atau menambahkan fungsi baru.
Dreamweaver memiliki keunggulan dibandingkan program sejenis lainnya,
keunggulan Dreamweaver adalah sebagai berikut :
 Dreamweaver mempunyai ruang kerja, fasilitas, dan kemampuan yang mampu
meningkatkan produktifitas dan efektifitas dalam desain maupun suatu situs web.
 Fasilitas penyuntingan secara visual dari Dreamweaver memungkinkan untuk
menambah desain dan fungsionalitas halaman-halaman Web.
 Pada Dreamweaver 8 terdapat beberapa kemampuan bukan hanya sebagai
software untuk mendesain web saja, tetapi juga untuk menyunting kode serta
pembuatan aplikasi Web, antara lain JPS, PHP, ASP, dan ColdFusion.
 Lebih mudah dan cepat dalam mendesain web karena tidak perlu harus
menuliskan tag-tag html.

4. Desain Web Menggunakan Dreamweaver 4
2.2 Algoritma Mendesain Web Menggunakan Dreamwever
1. Di Photoshop buat header dengan ukuran 745 x 150 px. Header yang dibuat
memuat: Judul, Jenis, Slogan, Logo perusahaan. Simpan dengan nama header.jpg
2. Pilih HTML setelah Anda mengeklik menu Dreamwever 8.
Gambar 2.2 Tampilan awal Dreamweaver
3. Tambahkan title halaman web, sesuai slogan perusahaan Anda dan simpan file
Anda dengan nama: index.html
Gambar 2.3 Simpan file dan title
4. Pilih align: center pada bagian Properties yang terdapat di bawah stage.
5. Insert ► Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelah
itu klik OK.

5. Desain Web Menggunakan Dreamweaver 5
6. Insert ► Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelah
itu klik OK.
7. Letakkan kursor pada baris pertama. Tekan Insert ► Image (Ctrl+Alt+I).
Setelah itu masukkan file header Anda. Klik OK jika sudah selesai.
8. Letakkan kursor Anda pada baris kedua. Insert ► Table dan isikan sesuai dengan
data berikut.

6. Desain Web Menggunakan Dreamweaver 6
9. Atur sedemikian rupa sehingga kolom pertama memiliki width 24%.
10. Letakkan kursor pada baris kedua kolom kedua. Insert ► Table dan atur seperti
gambar berikut.
11. Letakkan kursor pada kolom ketiga, pilih align: right, kemudian pilih submenu
Form. Tambahkan Text Field pada kolom tersebut.
12. Atur pada kotak dialog Input Tag Accesbility Attributes. Setelah itu klik OK.
13. Posisikan kursor di kolom sebelah kiri. Tambahkan Button dan atur seperti
gambar berikut. Klik OK jika sudah selesai.

7. Desain Web Menggunakan Dreamweaver 7
14. Ganti Button name: Cari dan Value: Cari pada bagian Properties di bawah
stage.
15. Pada baris kedua kolom pertama, ketikkan teks: Menu dengan alignment: Center;
beri warna teks: #FFFFFF dan background warna: #999999. Atur denan font:
Arial dan size: 12.
16. Atur juga pada baris kedua sesuai dengan langkah 15. Berikut ini tampilan pada
baris kedua.

8. Desain Web Menggunakan Dreamweaver 8
17. Letakkan kursor pada baris ketiga. Insert ► Table dan aturlah seperti gambar
berikut.
18. Buatlah kolom pertama dengan lebar 24%.
19. Letakkan kursor Anda pada baris ketiga kolom pertama. Insert ► Table dan
aturlah seperti gambar berikut.
20. Buatlah lebar kolom pertama secara proporsional, seperti gambar berikut. Atur
align: center pada kolom pertama.
21. Buat file di Photoshop dengan ukuran: 8 x 8 px dan berilah warna: #99999.
Simpan file tersebut dengan nama: dot.jpg. Insert ► Image, masukkan file
dot.jpg pada kolom pertama baris 1 sampai dengan baris 9. Selanjutnya ketikkan
menu-menu pada kolom kedua dan atur dengan font: Arial, size: 12.

9. Desain Web Menggunakan Dreamweaver 9
22. Pada baris ketiga kolom kedua isikan konten seperti berikut. Jangan lupa untuk
mengatur Vert: Top.
23. Pada baris ketiga isikan dengan konten seperti. Copyright © …………. Buatlah
sesuai dengan kreasi, warna dan fontasinya.
24. Selanjutnya buat link pada menu pilihan. Blok teks yang ingin diberi link dan
ketikkan sesuai dengan nama menu, misalnya: Home ► index.html; Profil
►profil.html dan seterusnya.
Gambar Cara membuat link

10. Desain Web Menggunakan Dreamweaver 10
Gambar Cara membuat link dengan mem-blok teks
25. Save As file Anda sebanyak 8 kali dengan nama: profil.html; produk.html,
bukutamu.html dan seterusnya sesuai dengan daftar menu di atas, sehingga
saat ini ada 9 file dengan desain yang sama. Buka kembali file-file yang telah
dibuat dan gantilah kontennya yang terdapat pada baris ketiga kolom kedua.
26. Tekan F12 untuk preview hasil halaman web yang telah dibuat.
Tampilan WEB yang dibuat

11. Desain Web Menggunakan Dreamweaver 11
BAB III
PENUTUP
3.2 Kesimpulan
Kesimpulanya adalah:
- Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk
mendesain secara visual dan mengelola situs web maupun halaman web.
- Dengan macromedia dreamweaver kita dapat membuat tampilan homepage(website)
dengan mudah.
- Kita dengan mudah membuat web tanpa harus menghapal seluruh script HTML,
karena Dreamweaver akan membuat script HTMLnya dengan sendirinya.
3.2 Saran
- Untuk kemajuan teknologi komputer khususnya dibidang Website maka diharapkan
agar perkembangan web kedepan mampu mengubah pola fikir dan menjadikan
masyarakat Indonesia menjadi manusia yang kreatif dan inovatif.
- Diharapkan dengan adanya website dapat dimanfaat sesuai dengan kegunaan
sebenarnya yang mampu mempercerdas bangsa bukannya unutk menghancurkan
moral moral bangsa.

12. Desain Web Menggunakan Dreamweaver 12
DAFTAR PUSTAKA
http://slametriyanto.net/membuat-web-dengan-dreamweaver/
http://dreamweavermenu.com/belajar-mengedit-web-menggunakan-dreamweaver.html
http://learning.unla.ac.id/ft/praktikum/sim_tutorial/dreamweaver/dreamweavermx.pdf