Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8

Transkripsi

1 Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8 Oleh Angga Radhitya Rachmat, S.Kom radhizu05@gmail.com

2 KATA PENGANTAR Puji syukur penulis panjatkan kehadirat Allah SWT, pemilik segala apa yang ada dibumi dan dilangit, Yang Maha Mengetahui tentang segala hal. Sholawat dan salam semoga senantiasa dilimpahkan kepada tauladan kita nabi Muhammad saw., keluarganya, sahabatnya, pengikutnya dan seluruh muslimin dimanapun berada. Panduan ini penulis buat sebagai salah satu media sarana pembelajaran bagi yang ingin mempelajari tentang dunia web, tentang desain web dan beberapa hal lainnya. Panduan ini tidak dibuat secara beraturan, cuma berdasarkan tentang apa yang penulis pernah alami dan lakukan sebelumnya pada waktu kuliah. Bahasa yang digunakan pun mungkin akan tidak formal karena masih kesulitan untuk mempraktekkannya (^_^). Penulis menyadari bahwa banyak sekali kekurangan yang ada, namun sedikit harapan akan bemanfaatnya buku ini untuk pembaca yang ingin membacanya. Angga Radhitya Rachmat, S.Kom

3 1. Perkenalan Html, Php, Javascript, ASP VBScript? Makanan apa pula itu? ( dengan logat batak kental. (^_^) horas ). Beberapa istilah diatas mungkin terasa asing bagi beberapa orang, namun bagi programmer web desain bahasa diatas sudah tidak asing lagi. Bagi programmer tersebut, istilah istilah tadi sedah menjadi makanan harian bagi mereka. Istilah tersebut merupakan bahasa pemrograman yang diperuntukan untuk membangun web, dimana masing masing memiliki keunikan dan tatacara masing masing dalam menggunakannya. Dalam panduan ini akan lebih banyak dikupas tentang HTML dan PHP, sementara yang lainnya akan dibahas lain waktu. HTML adalah singkatan dari Hipertext Markup Language, sebuah bahasa pemrograman yang diperuntukkan untuk membangun web. PHP adalah singkatan dari Personal Home Page, sama sama bahasa pemrograman pembangun web. Perbedaan antara keduanya adalah untuk merunning PHP dibutuhkan web server atau yang lebih dikenal dengan Apache, sedangkan HTML tidak memerlukan web server untuk merunningnya. Secara umum sintak HTML dapat dilihat seperti pada contoh dibawah. <html> <head> <title>example</title> </head> <body> Latihan html </body> </html> Contoh sintak html Seperti yang bisa dilihat pada contoh, sintak hatml dimulai dengan <html> dan diakhiri dengan </html>. Dalam contoh tersebut ada <head> <title> yang digunakan untuk membuat tanda pada browser yang digunakan seperti membuat nama file. Sedangkan untuk mengubah konten atau isi dari file tersebut dilakukan pada <body>. Apabila file tadi dijalankan maka akan muncul kata latihan html pada browser. Untuk browser ada banyak yang bisa digunakan seperti Mozilla Firefox, Opera, Internet Explorer, dan lain sebagainya.

4 <?php echo "latihan php";?> Contoh sintak PHP Sintak PHP dimulai dengan tanda <? dan diakhiri dengan tanda?> Untuk beberapa programmer, ada yang biasa menggunakan kata php setelah tanda <? dan ada yang tidak menggunakan, tergantung selera programmer. Sintak HTML dan PHP dapat digabung, akan tetapi ketika menyimpannya harus menggunakan ekstensi PHP. <html> <head> <title>example</title> </head> <body> <?php echo "Hello World";?> </body> </html> Contoh penggabungan sintak HTML dan PHP Ketika dijalankan maka file tersebut akan menghasilkan kata Hello Word pada browser yang digunakan. Untuk membuat file file HTML atau PHP, ada beberapa editor yang bisa digunakan seperti Notepad, Notepad ++, Macromedia Dreamweaver. Untuk editor notepad atau notepad ++ peminatnya agak lebih sedikit (menurut saya, ) karena ada beberapa paket yang tidak terdapat didalamnya, sedangkan Macromedia Dreamweaver memiliki paket yang cukup lengkap dan berbasis GUI sehingga memudahkan user untuk menggunakannya.

5 2. Apa itu Macromedia Dreamweaver? Macromedia Dreamweaver merupakan sebuah editor file yang digunakan untuk membuat beberapa jenis file yang khusus untuk membangun web. Editor ini mampu menangani bahasa pemrograman HTML, PHP, Coldfusion, ASP VBScript, dan masih banyak lagi. Disamping itu Macromedia Dreamweaver mampu untuk menangani beberapa jenis desain web seperti Frameset dan CSS. Untuk mendapatkan master Macromedia Dreamweaver dapat didownload dari atau (hehehe, karena belum bisa beli software original jadi terpaksa membajak I m sory ) Pada panduan ini digunakan Macromedia Dreamweaver 8 sebagai subjek utama. 3. Instalasi Macromedia Dreamweaver Pada umumnya untuk menginstal Macromedia Dreamweaver 8 hampir sama dengan instalasi software lain, pertama double klik kiri master Macromedia Dreamweaver 8 hingga muncul tampilan seperti dibawah ini lalu tinggal next seterusnya sampai selesai.

6

7

8

9

10 4. Menggunakan Macromedia Dreamweaver 8 Ini adalah tampilan ketika selesai instalasi Macromedia Dreamweaver 8. Disini bisa dilihat ada berbagai macam file yang bias dibuat. Untuk pertama kita buat file html dengan mengklik HTML dan kemudian akan muncul tampilan seperti dibawah ini.

11 Dalam dreamweaver, ada 3 tab yang disediakan untuk mengedit file tersebut, yakni dalam tab Code, Split, dan Design. Untuk tab Code tampilannya adalah sintak program, sedangkan untuk tab Design tampilannya adalah khusus desain, lalu tab Split merupakan gabungan dari keduanya. Code Split Design Tampilan diatas adalah tampilan versi desain. Untuk tampilan versi code dan split seperti dibawah ini

12 Code Split

13 Sekarang coba kita pakai tab Design, lalu tuliskan kalimat selamat datang seperti dibawah ini Lalu sekarang coba untuk disimpan. Kalau disini saya coba simpan di drive D dalam folder kuman + web desain dengan nama file latihan_html. Saya tidak menggunakan ekstensi html dibelakangnya karena pada waktu pertama kalimembuat file tadi menggunakan file html.

14 Kemudian untuk merunningnya tekan tombol F12 dan akan muncul tampilan Selamat Datang pada default browser Cukup praktis bukan, daripada menggunakan editor yang lain yang membutuhkan pemahaman tentang sintaknya. (^_^) 4.1 Membuat halaman berwarna seringkali kita merasa kurang oke dengan tampilan yang standar seperti tadi, ada kalanya kita ingin memodifikasi sesuai dengan apa yang kita inginkan, seperti menambahkan warna. Caranya cukup mudah, masih menggunakan file yang latihan_html.html yang telah dibuat tadi yaitu dengan menggunakan tab Code kemudian taruh kursor setelah kata body pada <body>. Setelah itu tekan spasi dan akan muncul beberapa menu yang bisa digunakan. Untuk memberi warna halaman gunakan bgcolor kemudian memilih warna yang diinginkan lalu disimpan kembali. Pada contoh ini akan diberikan halaman yang berwarna kuning.

15 Ketika dirunning akan menghasilkan seperti gambar berikut

16 4.2 Membuat teks berjalan Ketika kita browsing dan membuka situs tertentu, terkadang ada tulisan atau teks yang berjalan baik dari sisi kanan ke kiri ataupun mengikuti gerakan mouse. Untuk membuat seperti itu caranya cukup sederhana, masih menggunakan tab Code lalu taruh kursor sebelum kata / teks yang akan dirubah. Lalu gunakan tanda < untuk mengeluarkan fungsi fungsi, disini fungsi yang digunakan adalah marquee lalu pilihan gerakan teks pada fungsi behavior dimana akan membuat beberapa tipe gerakan, pilih salah satu. Setelah selesai jangan lupa tutup fungsi marquee diakhir teks tadi kemudian disimpan ulang dan dirunning. 4.3 Menyisipkan gambar Terkadang, kita ingin orang mengenal apa yang kita buat. Salah satunya dengan menyisipkan gambar, contoh foto si pembuat (narsis mode on ). Tujuannya antara lain supaya karya kita dikenal orang dan juga sebagai copyright atas apa yang kita buat. Caranya masih di tab Code lalu taruh kembali kursor seperti saat mewarnai halaman tadi. Kalau mewarnai halaman kita menggunakan fungsi bgcolor maka untuk menyisipkan gambar menggunakan fungsi

17 background, kemudian browse lokasi file gambar berada. Setelah gambar ditemukan maka akan muncul keterangan apakah gambar tersebut akan dicopy ke folder tempat menyimpan file html tersebut. Klik yes kemudian akan muncul copy file as sebagai verifikasi pengcopyan file dan tempatnya, setelah itu klik save.

18 Fungsi background 4.4 Membuat table Table yang dibuat hampir sama dengan yang dibuat pada Microsoft Word. Caranya adalah klik Insert + Table, setelah itu atur jumlah baris pada Rows dan jumlah kolom pada Column. Atau bila ingin langsung klik tanda dibawah tab Commands. Atur border = 0 pada Border Tickness. Rows Coloumns Border Tickness

19 Lalu setelah itu, kita akan mewarnai baris dan kolom dari table itu. Perlu diingat disini bahwa untuk baris identifikasinya adalah <tr> sedangkan kolom adalah <td> (pada tab Code). Sekarang kita akan mewarnai baris 1 dengan warna hijau muda, lalu baris kedua kolom 1 dengan warna merah. Perhatikan gambar berikut. Memberi warna hijau muda pada baris 1 Memberi warna merah pada baris 2 kolom 1 Fungsi pewarnaan ini masih menggunakan fungsi bgcolor yang telah dibahas sebelumnya. Ingat, untuk table bermainnya pada baris dan kolom. 4.5 Pembuatan form Ada banyak form yang bisa digunakan pada bahasa html. Berikut beberapa diantaranya. NO NAMA FORM TAMPILAN SINTAK 1 Text Fields <input type="text" /> 2 Textarea <textarea name="name"></textarea> 3 Check Box <input type="checkbox" /> 4 Radio Button <input type="radio" /> 5 Pop Up Menu <select name="name"> <option value="" > <option value="" > </select>

20 6 Submit <input type="submit" /> Apabila ingin membuat form tersebut pada tab Code, maka cukup dengan mengetikkan sintak yang ada pada table diatas. Akan tetapi apabila ingin membuat dari tab Design maka caranya adalah klik Insert + Form + pilih form yang akan digunakan.