AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUT (10)
AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER
AMIK ROYAL KISARAN
PROGRAM STUDI MANAJEMEN INFORMATIKA
SATUAN ACARA PERKULIAHAN
PERTEMUAN - 14 :
MENDESAIN MENU DENGAN SPRY MENUBAR
1
.
Identitas
Matakuliah
:
Kode Mata Kuliah
:
Semester
:
SKS Dan Jumlah Jam
:
Matakuliah
Pendukung
:
Pemrograman Web 1
3 ( Tiga )
2 (Dua), 2 x 45 menit (90 Menit)
- Pemrograman Terstruktur
- Basis Data
- Design Grafis
2
.
Pendukung
Matakuliah
:
- Pemrograman Web 2
Dosen
:
Andri Nata, ST, M.Kom
Minggu Ke
:
14 ( Dua belas )
1. Unit Kompetensi
:
- Desain Web
2. Elemen Kompetensi
:
3. Kriteria Kinerja
:
- Merancang daftar menu di website
menggunakan spry menubar.
Mahasiswa Mampu :
- Mendesain daftar menu website dengan
adobe dreaweaver cs3.
- Memahami teknik sprymenubar dalam
perancangan daftar menu di website.
Kompete
nsi
3. Proses Pembelajaran
No.
ALOKASI
WAKTU
KEGIATAN
DOSEN
MAHASISWA
MEDIA/
ALAT/
BAHAN
HASIL
(Kriteria Unjuk
Kerja)
82
1
10’
Penciptaan
ketertiban suasana
belajar
Berdoa
bersama
Mengabsensi siswa
Penjelasan
mengenai
tujuan
pembuatan
sprymenubar
dengan
dreamweaver.
Menyimak dan
memahami
Whiteboard,
Laptop &
Projektor
-
2
65’
Memahami dan
mempraktekkan
Whiteboard,
Laptop &
Projektor
Merancang
daftar menu
di website
menggunaka
n spry
menubar.
3
10’
Mempersiapkan
daftar menu untuk
perancangan website.
Memberikan
pemahaman untuk
pembuatan menu dengan
srpymenubar.
Menutup
proses perkuliahan
Berdoa Bersama
Memahami
-
-
4. Materi Pembelajaran
5. Metode Pembelajaran
6. Materi latihan
:-
: Ceramah, tanya jawab, dan latihan.
:
1. Buka coding halaman index dengan editor yang digunakan seperti notepad++
atau adobe dreaweaver dll. Dalam materi ini menggunakan adobe
dreaweaver cs 3. Setelah terbuka pastikan aktif dalam keadaan code view
seperti gambar berikut.
83
2. Lalu aktifkan cursor di daerah div menu supaya menu yang akan dibuat
sesuai dengan layout yang sudah dirancang sebelumnya. Perhatikan gambar
berikut :
Posisi kursor
3. Setelah itu aktifkan dalam keadaan design view untuk perancangan menu.
4. Selanjutnya klik insert – spry – spry menubar
Klik disini
5. Setelah itu akan tampilan pilihan perancangan menu yaitu perancangan
secara vertikal atau horizontal. Berhubungan dari awal layout yang dirancang
adalah mendatar, maka yang harus dipilih adalah horizontal.
Klik OK
6. Maka akan tampil seprti berikut :
84
Tampilan menubar yang
Akan dirancang
7. Secara default akan tampil seperti item1,item2 dan seterusnya. Untuk
melakukan perancangannya maka harus diaktifkan sprymenubar dengan cara
klik warna hijau tepa t diatas item 1.
Klik disini untuk
mengaktifkan
Property sprymenubar
Klik disini ( - ) untuk
mengganti item yang sudah
ada.
8. Selanjutnya adalah menghapus terlebih dahulu nama item yang telah ada
dengan cara klik tanda minus ( - ) untuk mengganti nama menu yang akan
dirancang sebelumnya. Lalu ketikkan menu yang akan dibuat.
Klik disini ( + ) untuk
menambah menu.
Klik disini untuk
perancangan nama menu
9. Setelah menu suda dibuat nama,lanjutkan dengan klik tanda “+” untuk
menambah nama menu selanjutnya. Dan lakukan seterusnya hingga menu
yang akan dirancang selesai.
85
Daftar menu yang sudah
dirancang
10.Apabila menu yang dirancang telah selesai dibuat. Simpan file
tersebut,kemudia reload kembali halaman browser anda. Maka akan tampil
seperti tampilan dibawah ini.
7. Materi Tes
:-
8. Kriteria Penilaian
: 1 - 100
9. Pedoman Bukti
:-
10.
Kunci Jawaban
:-
11.
Referensi
:
86
1.
2.
3.
4.
5.
6.
http://en.wikipedia.org/wiki/World_Wide_Web
http://id.wikipedia.org/wiki/Web
http://mysql.com
http://w3c.org
Jayan. 2010. CSS untuk orang awam. Palembang. Maxikom.
Prijono Agus, dkk. 2005. Mudan dan Cepat Menguasai
Pemrograman WEB. Bandung. Informatika.
7.
Hakim Lukmanul. 2009. Jalan Pintas Menjadi Master PHP.
Yogyakarta. Lokomedia.
87
AMIK ROYAL KISARAN
PROGRAM STUDI MANAJEMEN INFORMATIKA
SATUAN ACARA PERKULIAHAN
PERTEMUAN - 14 :
MENDESAIN MENU DENGAN SPRY MENUBAR
1
.
Identitas
Matakuliah
:
Kode Mata Kuliah
:
Semester
:
SKS Dan Jumlah Jam
:
Matakuliah
Pendukung
:
Pemrograman Web 1
3 ( Tiga )
2 (Dua), 2 x 45 menit (90 Menit)
- Pemrograman Terstruktur
- Basis Data
- Design Grafis
2
.
Pendukung
Matakuliah
:
- Pemrograman Web 2
Dosen
:
Andri Nata, ST, M.Kom
Minggu Ke
:
14 ( Dua belas )
1. Unit Kompetensi
:
- Desain Web
2. Elemen Kompetensi
:
3. Kriteria Kinerja
:
- Merancang daftar menu di website
menggunakan spry menubar.
Mahasiswa Mampu :
- Mendesain daftar menu website dengan
adobe dreaweaver cs3.
- Memahami teknik sprymenubar dalam
perancangan daftar menu di website.
Kompete
nsi
3. Proses Pembelajaran
No.
ALOKASI
WAKTU
KEGIATAN
DOSEN
MAHASISWA
MEDIA/
ALAT/
BAHAN
HASIL
(Kriteria Unjuk
Kerja)
82
1
10’
Penciptaan
ketertiban suasana
belajar
Berdoa
bersama
Mengabsensi siswa
Penjelasan
mengenai
tujuan
pembuatan
sprymenubar
dengan
dreamweaver.
Menyimak dan
memahami
Whiteboard,
Laptop &
Projektor
-
2
65’
Memahami dan
mempraktekkan
Whiteboard,
Laptop &
Projektor
Merancang
daftar menu
di website
menggunaka
n spry
menubar.
3
10’
Mempersiapkan
daftar menu untuk
perancangan website.
Memberikan
pemahaman untuk
pembuatan menu dengan
srpymenubar.
Menutup
proses perkuliahan
Berdoa Bersama
Memahami
-
-
4. Materi Pembelajaran
5. Metode Pembelajaran
6. Materi latihan
:-
: Ceramah, tanya jawab, dan latihan.
:
1. Buka coding halaman index dengan editor yang digunakan seperti notepad++
atau adobe dreaweaver dll. Dalam materi ini menggunakan adobe
dreaweaver cs 3. Setelah terbuka pastikan aktif dalam keadaan code view
seperti gambar berikut.
83
2. Lalu aktifkan cursor di daerah div menu supaya menu yang akan dibuat
sesuai dengan layout yang sudah dirancang sebelumnya. Perhatikan gambar
berikut :
Posisi kursor
3. Setelah itu aktifkan dalam keadaan design view untuk perancangan menu.
4. Selanjutnya klik insert – spry – spry menubar
Klik disini
5. Setelah itu akan tampilan pilihan perancangan menu yaitu perancangan
secara vertikal atau horizontal. Berhubungan dari awal layout yang dirancang
adalah mendatar, maka yang harus dipilih adalah horizontal.
Klik OK
6. Maka akan tampil seprti berikut :
84
Tampilan menubar yang
Akan dirancang
7. Secara default akan tampil seperti item1,item2 dan seterusnya. Untuk
melakukan perancangannya maka harus diaktifkan sprymenubar dengan cara
klik warna hijau tepa t diatas item 1.
Klik disini untuk
mengaktifkan
Property sprymenubar
Klik disini ( - ) untuk
mengganti item yang sudah
ada.
8. Selanjutnya adalah menghapus terlebih dahulu nama item yang telah ada
dengan cara klik tanda minus ( - ) untuk mengganti nama menu yang akan
dirancang sebelumnya. Lalu ketikkan menu yang akan dibuat.
Klik disini ( + ) untuk
menambah menu.
Klik disini untuk
perancangan nama menu
9. Setelah menu suda dibuat nama,lanjutkan dengan klik tanda “+” untuk
menambah nama menu selanjutnya. Dan lakukan seterusnya hingga menu
yang akan dirancang selesai.
85
Daftar menu yang sudah
dirancang
10.Apabila menu yang dirancang telah selesai dibuat. Simpan file
tersebut,kemudia reload kembali halaman browser anda. Maka akan tampil
seperti tampilan dibawah ini.
7. Materi Tes
:-
8. Kriteria Penilaian
: 1 - 100
9. Pedoman Bukti
:-
10.
Kunci Jawaban
:-
11.
Referensi
:
86
1.
2.
3.
4.
5.
6.
http://en.wikipedia.org/wiki/World_Wide_Web
http://id.wikipedia.org/wiki/Web
http://mysql.com
http://w3c.org
Jayan. 2010. CSS untuk orang awam. Palembang. Maxikom.
Prijono Agus, dkk. 2005. Mudan dan Cepat Menguasai
Pemrograman WEB. Bandung. Informatika.
7.
Hakim Lukmanul. 2009. Jalan Pintas Menjadi Master PHP.
Yogyakarta. Lokomedia.
87