Rabu, 11 November 2015
berhubung saya mendapat tugas PR baru mengenai dreamweaver, mumpung sedang anget-angetnya di-otak. saya akan berbagi ilmu dengan anda sekalian ^＿^)ノ
Untuk awal-awal, mari kita mulai dengan cara membuat tabel ya guys ;)
A :"kenapa harus mulai dari membuat table? bukannya itu untuk aplikasi desain template web?"
aku juga kurang tau, yang jelas aku juga baru mencoba menggunakan aplikasi ini & asleb saya baru memperkenalkan cara membuat table disana. jadi, mari kita sama-sama belajar dari yang paling dasar dan umum terlebih dulu hahaha XD
A :"kenapa harus mulai dari membuat table? bukannya itu untuk aplikasi desain template web?"
aku juga kurang tau, yang jelas aku juga baru mencoba menggunakan aplikasi ini & asleb saya baru memperkenalkan cara membuat table disana. jadi, mari kita sama-sama belajar dari yang paling dasar dan umum terlebih dulu hahaha XD
tapi, sebelum itu sudah punya adobe dreamweaver-nya belum?
jika belum, downlod aja dulu di sini.
kemudian ikutin step-step berikut:
Spoiler:
1. Ekstrak dulu isinya
2. Pastikan komputer kalian terkoneksi ke jaringan internet.
3. Install adobe dreamweaver nya, lalu pilih mode trial.
4. Setelah muncul agreement, pilih saja agree. kemudian klik install.
5. Setelah penginstallan selesai, *ingat jangan buka(menjalankan) applikasi-nya terlebih dahulu.
6. Copy file yang ada dalam crack & letakan ke dalam folder Adobe Dreamweaver CS6.
misalnya: C:\Program Files\Adobe\Adobe Dreamweaver CS6
misalnya: C:\Program Files\Adobe\Adobe Dreamweaver CS6
7. ketika muncul peringatan file yang sama, pilih 'Replace'.
8. Barulah aplikasinya boleh jalankan.
A. Cara Membuat Table
· ketika di jalankan, akan pop up/muncul menu. Pada bagian ‘Create
new’, pilih HTML. Maka akan tampil layar putih yang masih kosong untunk meng-edit tampilannya.
·
Kemudian pada menu paling atas, pilih Insert à
Table. Maka akan muncul menu baru untuk mengatur baris, kolom, tebal tipis untuk garis pembatas dinding-nya, dll yang ada pada table tersebut.
·
Sebagai contoh, misalkan buat menjadi 7 baris, dan 3 kolom saja.
Setelah itu klik ‘OK’.
· Maka table akan tertampil pada layar kosong tadi. Untuk pengisian isi tabelnya, misalnya kita akan membuat tabel untuk memasukan 'biodata'.
maka ketik “BIODATA” pada bagian paling atas tabel (terserah pada kolom mana saja) untuk membuat judul tabelnya. Kemudian, sama seperti saat menggunakan Excel, klik kanan à Table à Merge Cells (untuk menggabungkan 3 buah table menjadi 1).
Kemudian, klik 3 baris yang ada dipaling atas tersebut, lalu klik kanan lagi àAlign à Center (agar judulnya tampil di tengah-tengah baris)
maka ketik “BIODATA” pada bagian paling atas tabel (terserah pada kolom mana saja) untuk membuat judul tabelnya. Kemudian, sama seperti saat menggunakan Excel, klik kanan à Table à Merge Cells (untuk menggabungkan 3 buah table menjadi 1).
Kemudian, klik 3 baris yang ada dipaling atas tersebut, lalu klik kanan lagi àAlign à Center (agar judulnya tampil di tengah-tengah baris)
·
Selajutnya, pada kolom bagian kiri, kita isi dengan data yang ada pada biodata tentunya ;)
misalkan: Nama, NPM, Alamat, Gender & Agama.
misalkan: Nama, NPM, Alamat, Gender & Agama.
·
Untuk pengisian Nama & NPM, klik kolom sebelah
kanannya, lalu pilih menu Insert yg ada pada
bagian paling atas, kemudian pilih Form à Text Field à
(langsung)OK.
· Untuk pengisian Alamat, sama seperti yang di atas, tapi, setelah pilih menu Insert à Form à Text Area à (langsung)OK.
·
Untuk pengisian Gender, sama seperti yang step di atas, tapi, setelah pilih menu Insert à Form à Radio Button (tombol
pencentang/menandai) à pada menu Label-nya, isi dengan Pria/Wanita(satu-satu) à OK.
·
Untuk pengisian Agama, sama seperti step yang ada di atas, tapi, setelah pilih menu Insert à Form à select(List/Menu) à OK.
·
Masih pada kolom bagian kanan dari Agama, klik kanan list menu-nya à pilih List Value. Masukkan semua agama yang kamu ketahui (^ ^)ノ dengan meng-klik add(+) per kata, setelah itu klik OK.
· Dan terakhir, pada baris ke-7, kolom sebelah kanannya. untuk pengisian/ pemasukan semua data di atas, kita akan menbuat tombol 'OK & Reset', yaitu menggunakan Button yang ada di menu Form. Buatlah 2 Button terlebih dahulu, setelah klik salah satunya. Pada menu Properties yang ada di bagian bawah layar, ganti Value-nya men jadi OK/Reset, lalu ganti Action-nya menjadi ‘Submit’ untuk OK dan ganti Action-nya menjadi ‘Reset’ untuk Reset.
jika sudah meng ikuti step-step diatas, kamu tinggal men save programnya, dan jalankan dengan menekan tombol F12. maka akan otomatis pindah ke jendela browser untuk melihat hasil jadinya seperti apa :D *Serius mode off*
.......
masih belum selesai sampai situ loh~ (>w<)
Selanjutnya, kita akan mengotak atik Font Text, mengganti warna text/layar BackGround-nya yang masih putih polos tadi & menyisipkan Gambar pada Layar BG tentunya XD. Langsung saja ikuti step berikut:
·
Klik kanan pada layar yang masih kosong, kemudian
pilih Page Properties. Maka akan muncul menu
baru.
·
Ada 2 pilihan format penampilannya(Appearance) yaitu
dengan menggunakan CSS/HTML. Pilih salah satu aja, di dalamnya terdapat menu
untuk mengubah font & warna text. Kita juga dapat mengganti warna/gambar
untuk BGnya sesuka/seperlunya kita. Setelah itu klik ‘Apply’ lalu ‘OK’.
Terakhir, yaitu bagian serunya~ >w<)ノ apabila kita juga ingin membuat text
berjalan dari arah samping kanan ke arah samping kiri(sepetri selipan berita yang ada di web-web kebanyakan :'v), pertama-tama, pindah
dulu dari menu Design ke menu Code.(Split juga bisa)
·
Lalu masukan kodingan berikut pada kalimat yang ingin
di jalankan tersebut pada bagian isi(bawahnya) <body>:
<marquee scrollamount=”2”> (Text yang mau di jalankan) </marquee>
·
Misalnya, kita akan membuat kolom text baru yang berada di atas nya Biodata. maka masukan kodingannya seperti berikut tepat di atas kodingan biodata:
<tr><td colspan="3"><marquee scrollamount="2"><div align="center"><span style="color: yellow;"><em>Harap Biodata diisi dengan sebaik-baiknya</em></span></div>
</marquee></td></tr>
<tr><td colspan="3"><marquee scrollamount="2"><div align="center"><span style="color: yellow;"><em>Harap Biodata diisi dengan sebaik-baiknya</em></span></div>
</marquee></td></tr>
+-----------------------------+
orange = sama seperti yang ada pada baris biodata, menggabungkan 3 kolom menjadi 1blue = mengatur letak text-nya
purple = mengatur warna text
red = tempat pengisian text(ktik kalimatnya sesuka mu XD)
+-------------------------------+
· Nah, setelah selesai, saatnya melihat tampilan-nya seperti apa ;) .
Save terlebih dahulu, lalu tekan F12.
Save terlebih dahulu, lalu tekan F12.
hasilnya akan seperti contoh berikut:
