Mengenal LAYOUT WEB dan IMAGE SLICE di HTML

LAYOUT WEB

Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. 

Layout meliputi penyusunan, pembagian tempat dalam suatu halaman, pengaturan jarak 

spasi, pengelompokan teks dan grafik, serta penekanan pada bagian tertentu. 

Dalam pengaturan tersebut, digunakan element <div> dengan id dan class CSS yang kita 

sesuaikan

Diperlukan pemahaman aturan <div> untuk setiap konstruksi penggunaannya di dalam 

halaman HTML 

Layout menurut bentuk terdiri dari :

1)  Model Top Index

Biasanya layout  ini cocok digunakan untuk situs portal. Dengan banyak menu dan 

fasilitas yang ditawarkan, atau menampilkan link yang banyak ke situs lain.

2)  Model Layout Bottom Index

Biasanya digunakan apabila  isi  dari  halaman  banyak berhubungan dengan topik tunggal.

3)  Model Layout Left Index

Layout tipe  ini  lebih akrab dengan pengunjung karena tampilan  menu sama dengan

sistem  informasi.

4)  Model Layout Right Index

Kebalikan dari  left  index, cuma bedanya  menu di  bagian kanan  jarang dipakai untuk

menu utama.

5)  Model Layout alternating index

Biasanya digunakan untuk  menampilkan grafik, foto, harga, jumlah, dan  lain –  lain.

IMAGE SLICE (MEMECAH GAMBAR)

Teknik Image Slice :

-Merupakan teknik memecah/memotong gambar pada website.

-Teknik ini digunakan untuk membuat gambar/desain suatu web lebih  fleksibel, cepat, 

dan menarik.

-Pecahan gambar tersebut akan di satukan kembali menggunakan kode CSS dan 

HTML.

-Software yang digunakan : Adobe Photoshop, Adobe Ilustrator, Corel Draw, Gimp, 

dll.

-Crop tool atau Slice tool

-Dua metode yang dapat digunakan untuk memecahkan image atau gambar.

1)  Crop tool

  Proses yang dilakukan secara manual

  Cara ini banyak di pakai oleh professional 

  Untuk memisahkan objek gambar dengan background transparan

2)  Slice tool

  Proses yang dilakukan secara otomatis dan akan tersimpan dalam  satu folder

  Tepat untuk desainer pemula dan menginginkan kepraktisan 

-Slicing ujung dan tengah yang mau diambil gambarnya.

-Slicing bidang bergradasi yang mau diambil gambarnya.

-Penamaan folder untuk slicing.