Tutorial Menggunakan Menu Insert pada Adobe Dreamweaver

Tutorial Menggunakan Menu Insert pada Adobe Dreamweaver

1. Untuk halaman utama web

•  Langkah pertama, buat judul untuk halaman utama web, pilih menu format, lalu align, lalu center, agar tulisan berada ditengah-tengah.

cara membuat tulisan berada ditengah-tengah

Kemudian pilih format, lalu paragraph format lalu pilih heading1 untuk menjadikannya terlihat seperti judul.

cara membuat tulisan seperti judul

•  Langkah kedua, buat sub judulnya dibawah judul dengan format paragraph biasa.

Maka tampilannya akan seperti ini.

tampilan judul dan subjudul

•  Langkah ketiga,buat tabel untuk pilihan menu-menu pada halaman utama web. Pilih menu insert kemudian pilih table.

cara membuat tabel/menu pada web

 Maka akan muncul kotak seperti ini:

kotak untuk mengatur table

Isi kotak rows yang anda inginkan, rows untuk kotak tabel kebawah kemudian coloumn untuk kotak tabel kesamping. Disini saya mengisi rowsnya 1 dan coloumnnya 3. Setelah selesai diisi klikOK. Isilah kotak-kotak tersebut dengan pilihan menu yang anda inginkan, disini saya membuat menunya dengan 3 kategori yaitu Sejarah, Kontak, dan Formulir. Maka tampilannya akan seperti ini:

gambar table untuk menu pada web

Jika ingin menyesuaikan panjang tabel/kotak menu tarik garis yang ada diantara kotak seperti gambar dibawah ini:

cara menyesuaikan panjang kotak menu/tabel

Halaman utama telah selesai dibuat dilembar kerja pertama, selanjutnya saya akan menjelaskan cara menyantumkan hyperlink untuk menu halaman utama web.

 2. Untuk mencantumkan hyperlink pada menu halaman web

•     Langkah pertama buat dahulu halaman kerja yang baru. Pilih menu file, lalu pilih New, lalu pilih HTML, lalu klik Create.

Pilih menu file, lalu pilih New,

lalu pilih HTML

lalu klik Create.

Kemudian isi halaman kerja yang kedua tersebut sesuai kebutuhan, disini saya misalkan membuat sejarah marching band gita bagasasi pada halaman web saya.

isi halaman sejarah marching band gita bagasasi

•    Langkah kedua save halaman kerja yang kedua tersebut pada tempat satu folder, dan jangan sampai terpisah-pisah.

pilih menu file kemudian save as pada satu folder

klik save disatu folder

Setelah selesai disave, sekarang halaman kerja yang kedua tersebut akan dicantumkan kehalaman kerja yang pertama, yang sebelumnya telah dibuat.

Maka kita akan kembali kelembar kerja yang pertama untuk mencantumkan hyperlink, Caranya blok tulisan 'sejarah' pada halaman kerja yang pertama, kemudian pilih menu insert dan klik Hyperlink.

blok tulisan yang mau dijadikan hyperlink 

pilih menu insert kemudian hyperlink 

 Maka akan muncul kotak seperti gambar dibawah ini.

• Langkah selanjutnya cantumkan halaman sejarah yang telah disave tadi dengan mengklik browse di kotak Link. Pilih lembar kerja yang kedua yang baru saja kita buat, lalu klik OK Seperti yang tertera digambar bawahini.

klik browse  unruk mencari file yang ingin dihyperlinkkan

klik OK

 Kemudian isi Tittle yang tersedia, saya mengisinya dengan “Sejarah Marching Band Gita Bagasasi”. 

 isi Tittle yang tersedia

Setelah selesai klik OK untuk menutup kotak tersebut.
 Berikut adalah tanda hyperlink berhasil dicantumkan, tulisannya menjadi biru seperti digambar ini.

hyperlink yang berhasil dicantumkan

-          Lakukan cara yang sama untuk mencantumkan hyperlink pada menu kontak.

3. Membuat formulir pendaftaran untuk calon anggota marching band gita bagasasi

• Langkah pertama, buat lagi lembar kerja baru dan tulis judulnya seperti yang sudah saya paparkan diatas. Kemudian berikan kalimat petunjuk untuk mengisi formulir tersebut.
• 
  

  

  judul, kalimat awal, serta form nama

• Langkah kedua, isi awal dari formulir ini adalah membuat form nama dengan cara pilih menu insert, lalu form lalu pilih text field. 
• 
  

  

  pilih menu insert, lalu form lalu pilih text field.

  Kemudian akan muncul kotak seperti ini, klik saja OK.

  

  klik OK

Kemudian akan muncul kotak seperti gambar dibawah ini, klik saja Yes.

klik Yes

Maka kotak untuk form menulis nama akan muncul

Jika kotak tersebut muculnya ada dibawah tulisan “nama” maka tinggal kita rapihkan &dinaikan keatas agar sejajar dengan format “nama”nya.

form nama

• Langkah ketiga, lalu isi selanjutnya dari formulir ini adalah tanggal lahir dari si calon anggota. Caranya adalah dengan memilih menu insert lalu pilih form kemudian pilih Select (List/Menu).

form tanggal lahir

 menu insert lalu pilih form kemudian pilih Select (List/Menu)

 Kemudian akan muncul kotak seperti ini, klik saja OK.

klik OK

 Kemudian akan muncul kotak seperti gambar dibawah ini, klik saja Yes.

klik Yes

Maka kotak untuk form mengisi tanggal akan muncul, setelah kotak tersebut muncul, kita klik kotak tersebut seperti gambar dibawah ini.

klik kotak tersebut

 Kemudian klik list values yang letaknya berada dibawah seperti yang ada pada gambar.

klik list values

 Setelah di klik list values maka akan muncul kotak seperti ini. Klik tanda ”+” untuk anda membuat pilihan tanggal. 

kotak list values

 Disini saya membuat dari angka 1-31. Setelah selesai memasukkan angka kemudian klik OK.

klik OK

 Lakukan cara yang sama untuk membuat format bulannya. Jika bulan, maka pilihan yang ditambahkan adalah januari hingga desember.Kemudian klik OK.

 list values untuk membuat format bulannya

 Lakukan juga cara yang sama untuk membuat format tahunnya. Disini saya membuat pilihan tahun dari 1994-2000. Kemudian klik OK.

list values untuk membuat format tahunnya

• Langkah ketiga, isi selanjutnya dari formulir ini adalah jenis kelamin. Caranya adalah dengan memilih menu insert lalu pilih form kemudian pilih Radio Group. 

  

  form jenis kelamin

  
  

  

  menu insert lalu pilih form kemudian pilih Radio Group.

   Kemudian akan muncul kotak seperti ini. Isi namenya dengan "jenis kelamin", kemudian isi label dengan "perempuan dan laki-laki". lalu klik OK.
  

  

   isi label dengan perempuan dan laki-laki. lalu klik OK.

    Kemudian akan muncul kotak seperti gambar dibawah ini, klik saja Yes.
  

  

  klikYes

   Kemudian buat form nomor HP dengan menggunakan text field seperti pada saat pembuatan form nama yang diawal pembuatan formulir.
  

  

  form no HP menggunakan text field

   Form selanjutnya adalah mengenai riwayat penyakit, pada form ini sicalon anggota mengisi dengan menceklis apakah menjawab "iya" atau "tidak".
  

  

  form riwayat penyakit

  Cara membuat formnya adalah dengan memilih menu insert kemudian pilih form kemudian pilih checkbox group.
  

  

  menu insert kemudian pilih form kemudian pilih checkbox group.

   Kemudian akan muncul kotak seperti ini. Isi namenya dengan "riwayat penyakit", kemudian isi label dengan "ya atau tidak". lalu klik OK.
  

  

  isi label dengan "Ya atau Tidak" lalu klik OK.

    Kemudian akan muncul kotak seperti gambar dibawah ini, klik saja Yes.

Klik Yes

Buat perintah "sebut apa penyakitnya" dan pertanyaan "kapan terakhir dideritanya" dengan menggunakan form text field sama seperti membuat form nama dan No HP yang sebelumnya.

menggunakan text field

Langkah selanjutnya adalah buat pilihan "alat apa yang akan dipilih" oleh si calon anggota marching ini, pembuatannya sama seperti membuat pilihan tanggal, bulan dan tahun pada langkah sebelumnya. Yaitu menggunakan menu insert kemudian form kemudian Select (List/Menu)

buat dengan menggunakan menu insert kemudian form kemudian Select (List/Menu)

Setelah itu buat form ceklist sebagai persetujuan bahwa dia menyetujui dan akan mematuhi segala peraturan yang adaa di marching band gita bagasasi. Caranya adalah pilih menu insert kemudian pilih form kemudian pilih checkbox.

menu insert kemudian pilih form kemudian pilih checkbox.

Kemudian akan muncul kotak seperti ini, klik saja OK.

Klik OK

Kemudian akan muncul kotak seperti ini, klik saja Yes.

Klik Yes

Ketiik kalimat persetujuannya

Kemudian buat tombol untuk meng-submit sebagai tahap akhir pada pengisian data diformulir calon anggota marching tersebut. Caranya pilih menu insert kemudian pilih form kemudian pilih button.

pilih menu insert kemudian pilih form kemudian pilih button

Kemudian akan muncul kotak seperti ini, klik saja OK

Klik OK

Kemudian akan muncul kotak seperti ini, klik saja Yes

Klik Yes

Inilah bentuk/form dari form button :

Ini adalah hasil dari tutorial untuk yang halaman utamanya

tampilan halaman utama

Ini adalah hasil dari tutorial untuk yang Sejarah, yang menjadi hyperlink menu ke 1 pada halaman utama.

tampilan halaman sejarah

Ini adalah hasil dari tutorial untuk yang Kontak, yang menjadi hyperlink menu ke 2 pada halaman utama

tampilan halaman kontak

Ini adalah hasil dari tutorial untuk yang Formulir yang menjadi hyperlink menu ke 3 pada halaman utama

Akhirnya selesai juga tutorial yang kedua ini, alhamdulillahhhhh =))

Yang kali ini gue rada keteteran ya udah laptop rusak ya nyusahin temen pula ya nasib ya salam :((

See You ditutorial berikutnya, minggu depan! ;)