Anda di halaman 1dari 4

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

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

12. Beralihlah kembali pada mode 'Code', kita akan membuat footer nama pembuat. Pada baris ke-4 
ketikkan kode HTML berikut : <h4 style="color: white;">2016 &copy; Nama Web || Nama
Kalian</h4>
13. Langkah selanjutnya adalah membuat artikel pada web kita, masih pada mode 'Code' , pada baris
kedua kolom kedua ketikkan kode HTML :

<div align="center">

<p><font size="7"><b><q><u>Home</u></q></b></font> </p>

</div>

<p></p>

<p><strong><i><font size="6">Selamat datang di beranda website (Nama Web


kalian).</font></strong><br />

<font size="4">Kalimat yang ingin kalian berikan</font></p>

<p><font size="5">Terima Kasih!</font></p>

<p></p>

<p></p>

<p></p>

<p></p>

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

14. Langkah terakhir adalah memberikan tag HTML <center>  setelah tag <body>.

Lalu save, dan buka pada browser.

Berikut beberapa kelebihan dan kekurangan Adobe Dreamweave :

Kelebihan :

1. Kemampuannya membuat halaman web yang terlihat konsisten.


Adobe Dreamweaver sudah terinstall beberapa template yang elegan dan menarik.
Tentunya ini memudahkan anda yang ingin belajar membuat sebuah web namun anda
belum mampu membuat design web sendiri. Jika anda ingin membuat lebih dari 10 halaman
web dengan didasarkan design template tertentu maka web anda akan memiliki gaya
halaman web yang sama dan terlihat konsisten dari halaman perhalaman.

2. Kemudahan dan efisiensi dalam penggunaan


Program ini tidak hanya dirancang untuk anda yang sudah mahir dan mengerti bahasa
pemrograma. Bagi anda yang belum mengerti bahasa pemrograman, anda bisa membuat
halaman web dengan hanya cara mengklik atau drag and drop menggunakan mouse serta
anda juga bisa melihat halaman html-nya selama  proses desain berlangsung. Atau yang
lebih dikenal dengan sebutan WYSIWYG (What You See Is What You Get)

Selain itu dreamweaver memiliki kemampuan memperlihatkan 3 proses yang berbeda,


yaitu :
 Code View : Berfungsi untuk hanya menampilkan script html saja.
 Desain View : Berfungsi menampilkan kode-kode html yang anda tulis menjadi sebuah
design/template    yang nantinya akan ditampilkan di browser.
 Split View : Berfungsi menampilkan gabungan antara Code View dan Desain View
pada saat bersamaan.Jadi anda bisa langsung melihat perubahan pada saat anda mengubah
htmlnya.

3. Mudah untuk mengupload melalui FTP


Dreamweaver sudah dilengkapi dengan fitur FTP jadi setelah anda selesai membangun
sebuah web, anda bisa langsung menguploadnya melalui FTP . FTP (singkatan dari File
Transfer Protocol) adalah sebuah protokol Internet yang berjalan di dalam lapisan aplikasi
yang merupakan standar untuk pentransferan berkas (file) komputer antar mesin-mesin
dalam sebuah internetwork.

 Ilustrasi FTP

4. Dapat dikustom
Dreamweaver dapat disesuaikan dengan kebutuhan yang anda perlukan. Menu, tab,
perintah, font dan warna semua kode dapat disesuaikan dengan preferensi pribadi. Hal ini
dapat secara efektif memudahkan proses desain web. Selain itu dreamweaver didukung
banyak plug-in yang membantu anda dalam proses desain.

Kekurangan :
1. Harga Software yang Cukup Mahal.
Mungkin salah satu kekurangan dari Dreamweaver ini adalah dari segi harga. Dreamweaver
CS5 dibandrol oleh Adobe sekitar $399. Harga yang mungkin terjangkau oleh kalangan
tertentu saja.

Anda mungkin juga menyukai