Laporan Praktikum Pemrograman Web Modul 3

7/25/2019 Laporan Praktikum Pemrograman Web Modul 3

1/17

LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

MODUL 3

DESAIN WEB (LAYOUT DAN MENU)

Untuk memenuhi tugas matakuliah Praktikum Pemrograman Berbasis Web

yang dibimbing oleh Bapak Didik Dwi Prasetya

Asisten Praktiku!

Sasu" Ari#in

O"e$ !

AMADEU% E%RA&EL

('*33+3,-*)

S' PTI .' O## D

&AKULTAS TEKNIK

/URUSAN TEKNIK ELEKTRO

PRODI S' PENDIDIKAN TEKNIK IN&ORMATIKA

UNI0ERSITAS NEGERI MALANG

MARET '+


2/17

A. TU/UAN

- Memahami penggunaan teknik clear fix dalam membuat layout website

- Memahami fungsi rid !ystem

- Mampu menggunakan teknik clear fix dan rid !ystem untuk membuat layout

website

B. LATI1AN

"atihan #


3/17

Pada latihan berikut adalah penggunaan desain web yang menggunakan teknik

clear both$ %lear both difungsikan untuk mengatasi permasalahan pada float

yang dapat merusak alur elemen$ &kan tetapi untuk peletakan elemenselan'utnya yang tidak pasti( maka style clear)both tidak dapat beker'a dengan

baik$

"atihan *


4/17

Pada latihan ini adalah desain %!! yang

menggunakan teknik clear fix yang dapat digunakan

sebagai pengganti dari teknik clear both

sebelumnya( karena pada clear both tidak dapat

berfungsi dengan baik apabila kita tidak tau pasti

dalam meletakan elemen selan'utnya$ !ehingga adanya clear fix dapat mengatasi

permasalahan dari clear both tersebut$

"atihan +


5/17


6/17


7/17

Berikut merupakan desain web dan layout menggunakan system rid$ ,ita

dapat menyusun perhitungan lebar elemen melalui pengubahan parameter pada

di- class col yang dapat kita tentukan berdasar pembagian lebar pixel layout atau

membuat kode disetiap kelas dengan ukuran rid yang berbeda seperti pada

contoh %!! diatas yang sudah didefinisikan ukuran tiap.tiap col rid$


8/17

C. STUDI KASUS

- %oding /0M"

/ome

&rticle


9/17


10/17

&bout


11/17

- %oding %!!


12/17


13/17


14/17


15/17

- 0ampilan Web


16/17


17/17

,eterangan )

Pada tugas rumah ini berisikan konten beranda( artikel dan tentang saya$

"ayout menggunakan system grid yaitu menerapkan pembagian parameterukuran tiap col yang dituliskan di file css$ Pada konten yang berisikan link

artikel menggunakan col+ dan yang berisi konten bebas menggunakan col1$

!edangkan pada footer menggunnakan col#*$

Pada kode %!! terdapat desain pada keseluruh di- yang dibuat baik

bertipe id maupun class$ Pada selector ho-er khusus pada col+ 'ika diarahkan

akan ter'adi transformasi yaitu bertambah lebar$ Pada background area na-bar

ho-er 'uga 'ika diarahkan mouse akan berganti warna$ 2uga pada selector lain

didesain sesuai dengan yang diinginkan dengan tetap memperhatikan desain dari

system grid$

D. KESIMPULAN

!tyle clear)both merupakan cara umum untuk membersihkan float$

Metode untuk membersihkan float dengan menggunakan teknik clear fix dapat

digunakan walaupun kita tidak tahu pasti elemen selan'utnya yang akan

diletakkan

rid merupakan garis pembantu penyusunan elemen( yang dapat digunakan

untuk menyusun elemen secara merata$

E. DA&TAR PUSTAKA

&rifin( !amsul. *3#4$Modul Ajar Praktikum Pemrograman Web Bab 3 Desain

Web (Layout dan Menu)$ 2urusan 0eknik 5lektro 60$UM$

Documents

Laporan Praktikum Pemrograman Web Modul 3