Layer

BY IN HTML Comments Off on Layer

Dengan CSS, kita dapat mengaplikasikan layer di dalam halaman web. Layer adalah bagian dari HTML yang dapat diletakkan di atas halaman yang biasa dengan satuan pixel.
Keuntungan yang dapat diperoleh dengan menggunakan layer dapat bermacam-macam, sedangkan salah satu kerugiannya adalah browser Netscape tidak mempunyai kemampuan untuk mensupport layer.

Coba perhatikan kodenya berikut ini:

#Layer1
{
position:absolute;
width:197px;
height:23px;
z-index:1;
left: 701px;
top: 21px;
}

Ini adalah contoh layer pertama
width dan height masing-masing akan mengeset ukuran layer yaitu lebar dan tinggi dari layer. Sedangkan left dan top merupakan posisi layer terhadap layar. Ingat bahwa layer adalah bagian tersendiri dari halaman web. Nilai z-index adalah menentukan urutan layer.

Ini adalah contoh layer kedua
Layer ketiga dengan warna

Sedangkan untuk menuliskan ke halaman webnya, kita menggunakan tag div sebagai berikut:

Ini adalah contoh layer pertama

Selanjutnya kita dapat juga memberikan warna pada layer yaitu dengan cara menambahkan property bgcolor sebagai berikut:

#Layer3 {
position:absolute;
width:159px;
height:16px;
z-index:3;
left: 64px;
top: 91px;
background-color: #F0E4CF;
}

LATIHAN

Sebuah perusahaan game developer “GAME MOUSE” yang sedang berkembang bermaksud untuk membuat websiteyang terdiri dari 3 halaman:
Halaman pertama adalah halaman selamat datang, dilengkapi dengan image dan link yang berupa rollover button yang menuju ke halaman kedua. Link boleh berupa gambar object ataupun tulisan NEXT berbentuk gambar.
Halaman kedua adalah satu halaman dengan fullscreen image dari product terbaru “GAME MOUSE”, buatlah 4 buah link (2 rectangular dan 2 circle) yang masing-masing akan berpindah ke halaman pertama, dan sebuah gambar di bawah dengan teknik rollover button untuk berpindah ke halaman ketiga.
Halaman ketiga adalah berisi informasi lengkap tentang game-game yang pernah dikembangkan. Desain halaman ketiga semenarik mungkin, minimal harus mengandung 4 layer untuk menimbulkan kesan atraktif dan menarik.

Simpanlah di sebuah folder baru yang bernama TUGAS1, yaitu 3 file HTML berikut image-image yang akan digunakan!

Referensi:
http://www.gamehouse.com
http://www.sandloft.com

by: Wahyu Kurniawan




Comments are closed.