Membuat Web Sederhana Dengan Dreamweaver.docx

Membuat Web sederhana dengan Dreamweaver Muliana Insan 11:30:00 PM Jumpa lagi sobat pengiat teknologi, semoga kalian tidak merasa jenuh dan bosan bertemu lagi dengan saya disini... hahaha. Sudah beberapa hari ini saya tidak mengupdate artikel diblog ini dikarenakan aktifitas didunia nyata yang tidak beraturan dan juga agak kusut, baiklah akan saya kesampingkan dulu masalah dunia nyata saya. Oke, Pada kesempatan kali ini saya akan memberikan tutorial web yang sangat sederhana namun menarik dan juga tentunya mudah untuk diikuti yaitu cara membuat web sederhana dengan menggunakan Adobe Dreamweaver. 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. Baiklah tanpa berpanjang lebar, ini dia langkah-lankahnya : 1. Buka software Adobe Dreamweaver sobat, 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...

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

3. Disini sobat 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

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

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

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

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.

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.

10. Disini kita akan memberikan gambar pada header web, beralihlah kembali pada mode 'Code' dan ketikkan kode HTML pada baris pertama kolom pertama , pada baris pertama kolom kedua ketikkan . dan berikan teks pada header kita NAMA WEBNYA .

Saya sarankan untuk menggunakan gambar yang memiliki background transparan atau minimal menggunakan gambar yang warna background-nya sama.

Akan terlihat seperti ini 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

13. Beralihlah kembali pada mode 'Code', kita akan membuat footer nama pembuat. Pada baris ke-4 ketikkan kode HTML berikut :

2016 © Nama Web || Nama Kalian

Akan terlihat seperti ini 14. Langkah selanjutnya adalah membuat artikel pada web kita, masih pada mode 'Code' , pada baris kedua kolom kedua ketikkan kode HTML :

<strong>Selamat datang di beranda website (Nama Web kalian).
Kalimat yang ingin kalian berikan

Terima Kasih!

Dan ubah nama Title menjadi "Nama Web kalian - Home"

Akan terlihat seperti ini

15. Langkah terakhir adalah memberikan tag HTML setelah tag . Lalu save, dan buka pada browser.

Dan hasil akhirnya akan terlihat seperti ini :

Jika kalian menginginkan agar bisa me-link kan, maka sobat hanya perlu mengubah artikelnya saja dan Save As dengan nama yang berbeda. Lalu tekan 2 kali pada tombolnya dan ini harus sesuai dengan tombol yang diberikan misalnya tombol profil harus menuju ke halaman profil, pada tulisan Link tekan Browse lalu pilih file halaman web yang ingin di link kan

Wah, langkah yang sangat panjang, namun cukup mudah untuk diikuti. Baiklah sekian tutorial web dari saya, semoga bermanfaat dan dapat menambah pengetahuan sobat tentang cara pembuatan we b.