05 January 2016

Cara Mengetahui Ukuran Layout Dalam Website

Contoh Layout Sebuah Website

Ini adalah salah satu contoh layout Website yang Saya buat sendiri.
Ukurannya 1000x800 pixel.



Teknik Inspect Element

Teknik ini Saya gunakan untuk mengetahui ukuran layout suatu Website karena mudah digunakan.
Inspect Element digunakan untuk melihat dan mengedit elemen-elemen dalam suatu Website. Jadi, kita bisa mengedit dan melihat hasilnya secara langsung melalui browser. Fasilitas ini sudah ada di browser Google Chrome dan Mozilla Firefox, namun Saya menggunakan Google Chrome kali ini.

Cara Mengetahui Ukuran Layout

Pastikan Anda sudah membuka Website yang akan di Inspect. Lalu, klik kanan pada bagian background yang kosong dan klik pilihan Inspect. Bisa juga dengan menekan Ctrl+Shift+I.
(Lihat bagian pojok kiri atas)

Setelah itu akan muncul bagian Inspect Element di bawah.


Sorot bagian <html> karena elemen tersebut mencakup semua bagian dari Website. Apabila disorot maka akan muncul warna biru di websitenya.


Apabila Anda lihat di pojok kiri atas ada ukuran dari elemen yang anda sorot.


Nah, itu adalah ukuran dari bagian <html> yaitu 1349x880 pixel.
Cara lain yang bisa digunakan adalah melihat bagian pojok kanan bawah lalu klik pilihan Computed. Disana terdapat Inspect dari CSS Website tersebut dan langsung bisa dilihat ukurannya.
Apabila disorot efeknya juga sama seperti tadi.



Nah, disini bisa langsung terlihat ukurannya.


Mudah bukan?

Sedikit Info

Teknik Inspect Elemen ini bisa digunakan untuk mengedit Website.
Kita bisa mengganti scriptnya dan hasilnya bisa kita lihat langsung. Setelah itu script yang telah diedit tadi bisa dicopy ke editor website. Perlu diingat bahwa mengedit di Inspect bersifat sementara. Jadi, pastikan scriptnya sudah dicopy karena apabila Website direload maka hilang sudah hasil mengedit tadi.
Nah, teknik ini sangat bermanfaat dan membantu sekali karena kita bisa mengedit website sesuai dengan yang kita inginkan.

Terima Kasih!
Apabila terdapat kesalahan silahkan memberi saran ataupun komentar.

Newer Post Older Post Home

0 komentar :

Post a Comment