BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout...

8
35 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 Contoh Foto Pelatihan Perang sesudah Editing

Transcript of BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout...

Page 1: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout desain dibuat menggunakan adobe Photoshop kemudian di export menuju dreamweaver. Dengan

35

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 Contoh Foto Pelatihan Perang sesudah Editing

Page 2: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout desain dibuat menggunakan adobe Photoshop kemudian di export menuju dreamweaver. Dengan

36

Gambar 5.2 Tampilan Layout Awal

Gambar 5.3 Tampilan menu butto

Page 3: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout desain dibuat menggunakan adobe Photoshop kemudian di export menuju dreamweaver. Dengan

37

Gambar 5.4 Tampilan layout dalam

Gambar 5.5 Tampilan Layout di isi Jajaran Kerja

Page 4: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout desain dibuat menggunakan adobe Photoshop kemudian di export menuju dreamweaver. Dengan

38

Gambar 5.6 Tampilan Layout Visi dan Misi

Gambar 5.7 Tampilan Layout konten video

Page 5: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout desain dibuat menggunakan adobe Photoshop kemudian di export menuju dreamweaver. Dengan

39

5.2 Pembahasan

Pembuatan website ini menggunakan beberapa software yaitu Adobe

Photoshop, dan Adobe Dreamweaver.

1. Pembuatan Layout desain

Layout desain dibuat menggunakan adobe Photoshop kemudian di

export menuju dreamweaver. Dengan ukuran 900x848 px dibuat

dengan background putih dan gambar Patung Jalaseva Jayamahe serta

logo ARMTIM yang dbuat transparan.

2. Membuat Button

Page 6: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout desain dibuat menggunakan adobe Photoshop kemudian di export menuju dreamweaver. Dengan

40

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 warna dasarnya.

3. Tampilan animasi slide show foto video

Disini saya menggunakan slide show dengan jacquery. Yaitu script untuk

penampilan slide show foto produk dengan script sebagai berikut :

4. Finishing Edit

Page 7: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout desain dibuat menggunakan adobe Photoshop kemudian di export menuju dreamweaver. Dengan

41

Pada tahap ini tahap terakhir dari pembuatan layout serta website sandingan

dengan memasukan semua source kedalam adobe dremweaver untuk diedit 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.

Page 8: BAB V HASIL DAN PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/989/8/BAB_V.pdf · Layout desain dibuat menggunakan adobe Photoshop kemudian di export menuju dreamweaver. Dengan

42

Gambar 5.8 Tampilan Hasil Layout jadi.