Mengedit Tampilan Web dengan Google Chrome

Google Chrome ternyata bisa juga Anda manfaatkan untuk mengedit tampilan web Anda (mock up). Namun sebelum tutorial ini kami Lanjutkan, Anda sebaiknya harus sudah menguasai kedua hal berikut :

  • Dasar-dasar HTML
  • Dasar-dasar CSS Layout

Jika kedua hal tersebut belum Anda kuasai, sebaiknya anda membaca-baca dulu tentang css & html dari beberapa website berikut ini atau disini.

Perubahan Layout web yang bisa dilakukan dengan bantuan Google Chome sebenarnya menyangkut pengeditan CSS dan HTML secara live, sehingga langsung terlihat perubahannya di Layar. Anda bisa saja merubah warna dasar, menggeser atau merubah ukuran (panjang dan lebar) dari sebuah TAG.

Langkah untuk memulai perubahan Layout adalah sebagai berikut :

  1. Buka website dengan Google Chrome
  2. Tentukan Bagian yang akan anda Edit.
  3. Klik kanan untuk memunculkan menu popup
    inspect element Mengedit Tampilan Web dengan Google Chrome
  4. Klik Inspect element
  5. Muncul tampilan sebagai berikut:
    chrome web developer window Mengedit Tampilan Web dengan Google Chrome
  6. Tampilan di atas terdiri dari 3 bagian utama yaitu tampilan web, source code HTML dan CSS Style. Anda bisa mencoba melakukan editing di source HTML maupun di CSS Style. Untuk CSS style akan terlihat di baris mana editing dilakukan.
    CSS editing Mengedit Tampilan Web dengan Google Chrome
  7. Perubahan CSS pada Google Chrome sifatnya hanya untuk melihat perubahan secara live, tanpa merubah file aslinya. Jika Editing sudah OK, Anda bisa melakukan perubahan pada file asli.

Selamat mencoba





Penulis :

Desain web murah | Web Instant | Web Toko Online | Pemesanan hubungi : 021-44560674 View all posts by Bestariweb Studio

Comments

2 thoughts on “Mengedit Tampilan Web dengan Google Chrome

  1. Agus Demak says:

    Nice tuts… Kalo di chrome pake firebugs adanya yang lite soalnya. Jadi ga bisa semaksimal kalo di FF.

  2. Erik says:

    Kalau saya lebih suka pakai Firefox… lebih fleksible untuk sya…

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development