bab v hasil dan pembahasan - sir.stikom.edusir.stikom.edu/id/eprint/965/8/bab v.pdf · gambar 5.12...
TRANSCRIPT
![Page 1: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/1.jpg)
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
![Page 2: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/2.jpg)
Gambar 5.2 tampilan layout
Gambar 5.3 Tampilan menu button
![Page 3: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/3.jpg)
Gambar 5.4 Tampilan motion jquery info Laksamana Muda
Gambar 5.5 Tampilan motion jquery gallery
![Page 4: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/4.jpg)
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
![Page 5: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/5.jpg)
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
![Page 6: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/6.jpg)
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
![Page 7: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/7.jpg)
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.
![Page 8: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/8.jpg)
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
![Page 9: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/965/8/BAB V.pdf · Gambar 5.12 Final desain tampilan halaman web . Layout desain dibuat menggunakan adobe Photoshop](https://reader030.vdocuments.pub/reader030/viewer/2022040206/5d4e540e88c99303708b60fd/html5/thumbnails/9.jpg)
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.