Post on 24-Feb-2018
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 '+
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
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 #
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
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 *
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
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 +
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
5/17
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
6/17
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
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$
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
8/17
C. STUDI KASUS
- %oding /0M"
/ome
&rticle
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
9/17
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
10/17
&bout
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
11/17
- %oding %!!
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
12/17
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
13/17
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
14/17
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
15/17
- 0ampilan Web
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
16/17
7/25/2019 Laporan Praktikum Pemrograman Web Modul 3
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$