Upload
dolien
View
226
Download
0
Embed Size (px)
Citation preview
BAB V
HASIL DAN PEMBAHASAN
5.1 Hasil
Pengerjaan desain web sandingan ARMATIM (ARMADA
TIMUR) Surabaya yang dikerjakan selama kerja praktek 1 bulan lamanya di
Disinfolahta ARMATIM (ARMADA TIMUR) Surabaya dalam pembuatan
website sandingan memperoleh hasil sebagai berikut :
Gambar 5.1 index Koarmatim
Gambar 5.2 tampilan layout
Gambar 5.3 Tampilan menu button
Gambar 5.4 Tampilan motion jquery info Laksamana Muda
Gambar 5.5 Tampilan motion jquery gallery
Gambar 5.6 Tampilan jquery news
5.2 Pembahasan
Pembuatan website ini menggunakan beberapa software yaitu Adobe
Photoshop, dan Adobe Dreamweaver.
1. Pembuatan Layout desain
Gambar 5.7 Pilihan sket awal tampilan halaman awal
Dari beberapa pertimbangan maka penulis memilih desain awal web
sebagai berikut :
Gambar 5.8 Sket tampilan halaman awal yang terpilih
Gambar 5.9 Final desain tampilan halaman awal
Gambar 5.10 Pilihan sket tampilan halaman web
Dari beberapa pertimbangan maka penulis memilih desain halaman
web sebagai berikut :
Gambar 5.11 Sket tampilan halaman web yang terpilih
Gambar 5.12 Final desain tampilan halaman web
Layout desain dibuat menggunakan adobe Photoshop kemudian di
export menuju dreamweaver. Dengan ukuran 293x373 px untuk
tampilan awalan dan 900x848 px untuk halaman konten web. Halaman
awal di buat dengan background gradient dari biru tua ke putih dan
gambar siluet dari tentara serta loga ARMATIM yang berfungsi
sebagai button. Kemudian pada halaman konten dibuat dengan
background putih dan gambar Patung Jalaseva Jayamahe serta logo
ARMTIM yang dbuat transparan.
2. Membuat Button
Gambar 5.13 Tampilan button halaman web
Pembuatan button untuk web ini modern minimalis dengan
menggunakan jquery, berupa kotak berwarna hitam dengan text
didalamnya yang menggunakan warna putih ketika kursor mengarah
ke menu akan berubah warna biru sehingga kontras dengan wrna
dasarnya.
3. Tampilan animasi slide show foto video
Gambar 5.14 Tampilan halaman gallery pada web
Disini saya menggunakan slide show dengan jacquery. Yaitu script
untuk penampilan slide show foto produk dengan script sebagai berikut
Gambar 5.15 Proses editing pada dreamweaver
4. Finishing Edit
Pada tahap ini tahap terakhir dari pembuatan layout serta website
sandingan dengan memasukan semua source kedalam adobe dremweaver
untuk di edit secara total. Pada tahap ini dilakukan beberapa kali editing
meng-fungsikan tiap-tiap button yang terdapat pada tiap halaman website.
Memasukan script-script yang dikehendaki. Tiap-tiap halaman dibuat
sesuai dengan link yang terdapat pada menu.