Pada kesempatan kali ini bloginfo akan menyajikan artikel tentang tutorial membuat atau mendesain web site offline yang dapat digunakan sebagai media pemebalajaran. adapun tampilan web yang akan di dijelaskan dalam tutorial mengunakan aplikasi design web offline yaitu webaccapela.
 |
| wepaccapela |
Webacapela merupakan
salah satu software untuk mendesain web secara offline. Dengan mengunakan
software ini kita dapat mendesain web dengan lebih mudah karena memang software
ini hadir dan diperuntuhkan untuk para pendesain web yang masih pemula. Dimana
pada software ini anda tidak berlu mengunakan bahasa pemprograman tingkat tinggi
cukup dengan prosedur desain manual sehingga, aplikasi ini lebih nyaman dan
lebih mudah digunakan dibandingka dengan aplikasi lainnya. Meskipun dikatakan
lebih mudah tapi dengan sofware ini anda dapat mendesain web mulai dari yang
bentuknya sederhana sampai proffesional dengan mudah. Dalam software ini juga
sudah dilengkapi dengan template-template yang bagus dan menarik.
Untuk ini Berikut adalah screenshoot
tampilan awal media pembelajaran yang telah dibuat.
 |
Tampilan Menu home |
 |
| Halaman Video |
 |
| Menu Download |
Untuk proses
pembuatan web ini mengunakan aplikasi creator web bernama webacapela. Sehingga
hal pertama yang perlu dipastikan adalah webacapela telah terisntal dan dapat
dioperasikan dengan nomal dan optimal. Untuk ini pastika webacapela yang
teristal telah dalam mode full version.
Jalankan
webacapela dengan mengklik dua kali pada icon webacapela, kemudian akan muncul
jendela seperti gambar berikut:
Kotak kosong
merupakan tempat menulis nama project, icon + untuk nomor 1 untuk menambah
project, icon – utuk menguragi jumlah project atau menghapus project dan tab no
3 publication parameter sebagai scrib penyimpanan data hasi project. Ketika
tombol publication parameter ditekan maka akan muncul kotak dialog sebagai
berikut :
Automatic configuration untuk
mengkonfigurasi secara otomatis tempat penyimpanan atau alaman postingan(untuk
online) dan manual configurasi untuk mengatur secara manual directory atau alamat penyimpanan data. Untuk web
ini kita aplikasikan secara offline untuk itu centang kotak manual
konfiguratiom dengan menglik bagian kotak kosong kemudian klik ok, maka akan
muncul kotak dialog publication parameter seperti berikut:
Pada kotak dialog publication parameter klik advanced
maka akan muncul lagi kotak dialog baru
seperti berikut :
Centang pada kotak publish on
your computer, lalu klik tombol titik tiga (...) untuk menentukan lokasi penyimpanan
data project.setelah itu tekan ok. Setalah itu akan muncul kotak dilog berisi
desain original aplikasi.
Untuk ini tekan cancel.
Sebelum itu terlebih dahulu dijelaskan fungsi dari setiap icon pada worksheet.
Perhatikan gambar berikut.
 |
| Fungsi Menu web Accapela |
Selain dari icon diatas terdapat beberapa fitur lain
dengan fungsi berbeda.
·
Dynamic menu berfungsi untuk membuat semacam tab atau semacam menu dropdown.
·
Dynamic frame fitur untuk mencopi tampilan dalam halaman web
·
Search engine berupa fitur untuk menambahakan search engine pada halaman
web.
·
E-business element, menambahkan element bisnis berupa foto barang ,harga
dan deskripsi. Fitur ini ditujukan untuk pembuatan web bisnis.
·
Form berupa fitur untuk menampilkan semacam kotak isian.
·
Goole map menambhkan fitur peta pada halaman web
·
Sound, memasukkan audio pada web
·
Flash video, memasukkan atau melampiran file video pada web
·
Flash animation, melampiran file flash pada website
Langkah
berikunya adalah membuat template, yaitu desain tampilan halaman dalam website,
dengan cara klik page new template.
Maka akan tampil
halaman kosong pada lembaran aplikasi. Pada lembar kerja ini klik kanan
kemudian kilik page properties. Kemudian akan meuncul kotak dialog page
properties.
Kolom width untuk
mengatur lebar halaman kanan kiri dan height untuk tinggi halaman (vertikal).
Atur widht 1200 sesuai dengan lebar optimal pada mozilla firefox dan height
1400. Kemudian atur background, untuk becground berupa warna klik pada kotak
putih maka secara otopmatis akan muncul pilihan warna. Untuk background berupa
gambar klik pada kota dengan simbol foto disamping kotak berwarna putih, maka
akan muncul halaman image/filer library
Maka akan terhubung ke media
penyimpanan pada komputer. Masuk ke tempat penyimpanan gambar kemudian pilih
gambar dan klik open.
Maka akan tampak lembar kerja seperti gambar berikut
Untuk selanjutya klik
icon color
dan buat blok warna dengan susunan dan atur sesuai
posisi seperti gambar berikut :
untuk blok warna nomor satu, klik dua kali pada blok
maka akan tampil jendela pengaturan seperti berikut:
Klik pada tanda panah bawah lalu pilih image kemudian klik pada gambar icon
foto maka akan terbuka directory tempat penyimpana data, lalu pilih gambar lalu klik
open.
Lakukan hal yang sama untuk blok warna no 6.
Kemudian untuk blok warna no 2 tempatkan posisinya pada posisi paling belakang
dengan cara klik kanan kemudian pilih send to the back. Untuk blok warna 3, 4
dan 5 atur transparansi warna dengan cara klik dua kali pada tiap blok warna.
Maka akan muncul kotak dialog seperti berikut ;
Kemudian atur opacity sampai
90%. Sebagai tambahan tambahkan gambar-gambar dekorasi dengan mengunakan fungsi
tools image dan tesk. Maka dari prosedure terebut tampilan pada lembar kerja
akan seperti berikut.
Langkah berikutnya adalah membuat menu tab, untuk
pembuatan ini digunakan dua tools yaitu button untuk tab biasa dan tools
dinamic menu untuk tampilan menu dropdown. Menu button digunakan pada pembuatan
tab home, video,aplikasi rapor, aplikasi evaluasi, RPP dan LKPD beriku cara pembuatannya :
1.
Klik pada menu button
2.
Kemudian atur ukuran tab dengan menekan dan menahan dan klik 2 kali
sehingga akan tampil jendela seperti berikut
Pada jendela diatas pada tab pertama atur button style pada mode glossy dengan corner 50 % pada bagian background pilih warna hitam dengan mengklik kotak berwarna biru pada gambar diatas. kemudian beralih pada tab bersimbolkan huruf “a” tampil seperti gambar dibawah:
Pada button label isikan nama tab
home. Kemudian pilih jenis huruf dan besar huruf, serta posisi teks pada
tab. Tab berikutnya adalah tab link.
Pembuatan Tab materi
Untuk tab
materi cara
pembuatannya mengunakan tools yang berbeda. Untuk tab materi ini didesain agar
saat tab di klik akan muncul menu dropdown berupa sub tab berisi sub-sub
materi. Untuk ini pembuatannya sebagai berikut :
1. Arahkan pointer pada icon drop di taksbar kemuidan klik kiri maka akan muncul dropdown menu berupa daftar icon, pada list menu pilih dan klik pada tool dinamic menu
2.
Langkah selanjutnya klik dua kali pada tab yang muncul maka akan muncul
jendela pengaturan tab. Sebagai berikut
3. Berikutnya klik pada tab yang bersimbolkan huruf “a”.
No 1 pada gambar
merupakan pengaturan jenis huruf, besar huruf, posisi teks, efek tesk(bold,
italic, underline) dan warna huruf. Untuk ini atur jenis huruf berupa botani MT
Black, besar huruf 15, center posision dan bold serta berwarna kuning. Untuk no
2, merupakan pengaturan tampilan huruf ketika pointer menyentuh tab yaitu
pengaturan warna dan background tab. Untuk ini atur putih untuk warna huruf dan
merah untuk warna tab.
4.
Kemudian tab bersimbolkan mistar.
Pada tab ini merupakan pengaturan posisi tab dan ukuran dari tab yang dibuat. Pada pengaturan position
yang ditunjukkan oleh lingkaran merah no1 pada gambar, merupakan pengaturan
posisi tab secara automatis, dan size berupa ukuran tinggi dan lebar tab. Pada
w(withd) atur sebesar 93px dan h(hight) 49px.
5.
Hasil tab akan seperti gambar dibawah
EmoticonEmoticon