coba

Diberdayakan oleh Blogger.

Blogroll

Featured 1

Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Featured 2

Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Featured 3

Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Featured 4

Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Featured 5

Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Sabtu, 02 Januari 2016

Mengatur Background Website Agar Sesuai Resolusi Layar



Publish: 13 Juli 2014 | Author & Copyright: Johan | Status: Dreamweaver CSS
Background adalah hal yang dapat mempercantik desain dari website. Namun kadangkala kita kesulitan menentukan berapa resolusi background yang tepat atau pas untuk background website tersebut mengingat saat ini ukuran resolusi monitor yang sudah bermacam - macam dan ditambah lagi resolusi layar versi mobile dari smartphone dan tablet.
Sebagai seorang web designer maka kita harus bisa mengakalinya dengan CSS (Cascading Style Sheet) yaitu merupakan salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga website akan lebih terstruktur dan seragam.
Bagaimana menyesuaikan Gambar Latar belakang yang berukuran 1400 x 900 pixel agar sesuai dengan berbagai jenis monitor, ok langsung saja berikut scriptnya.
Script ini letaknya di antara tag <head> ... </head>
<style type="text/css">
body{
background: url('images/background.jpg') no-repeat scroll;
background-size: 100% 100%;
min-height: 700px;
}
</style>
Penjelasan :
1. <style type="text/css"> adalah kode pembuka dari tag Style CSS

2. body{ adalah kode css ini nantinya berlaku untuk semua body website

3. background: url('images/background.jpg') adalah kode untuk memanggil background website. images/ adalah direktori dari gambar kita, sedangkan background.jpg adalah nama dari background kita.

4. no-repeat scroll; adalah kode untuk memerintahkan agar tidak mengulang / menggandakan background

5. background-size: 100% 100%; adalah untuk mengatur besarnya background, disini kita memakai 100% agar besarnya background nantinya mengikuti semua resolusi layar

6. min-height: 700px; adalah tinggi minimal dari tampilan background

7. }</style> adalah tag penutup dari Style CSS
Ok, setelah saya memberikan teorinya, mari kita praktikkan di dreamweaver
1. Buka program dreamweaver, lalu buat halaman html baru.
Caranya : File > New > Basic Page > Htlm > Ok
2. Setelah itu copykan script di atas di antara tag <head> ... </head>
Penempatan Script CSS
Gambar 1 Penempatan Script CSS
2. simpan file html tersebut ke dalam sebuah folder, berikan nama file terserah anda. Misal di Folder bernama : Websiteku.
save html
Gambar 2 Menyimpan file html
3. ok, sekarang buat folder baru (New Folder) 'images' sebagai tempat meletakkan gambar background Anda
direktori images
Gambar 3 Direktori images
4. Cari image atau gambar yang akan dijadikan background website Anda. Rename gambar / image tersebut menjadi background.jpg lalu masukkan ke dalam direktori folder 'images'
images background
Gambar 4 Images background
5. Ok. sekarang kembali ke aplikasi Dreamweaver, kita lihat pada bagian preview maka background kita akan tampil.
background css
Gambar 5.1 Background CSS
Untuk mengetesnya bisa doble klik file 'tutorial-css-background.html' untuk membuka di browser Anda.
testing background
Gambar 5.2 Testing Background
Nah sekarang anda bisa mengisi halaman website anda dengan konten apapun tanpa takut background dengan CSS tersebut tidak sesuai dengan resolusi halaman website. Karena dengan width 100% dan height 100% maka background website akan selalu mengikuti resolusi layar monitor yang ada.
Agar lebih mudah lagi dalam mempelajarinya, maka Kami telah menyiapkan Download File Latihan dan Source Code dari tutorial Background CSS ini :
Read More
Diposting oleh UKM di 18.39 0 komentar

Pengenalan JQuery Website





Setelah menjamurnya konsep blogazine pada blog, jQuery sekarang telah menjadi bahan wajib bagi web desainer maupun blogger. Sebenarnya apa itu jQuery? jQuery adalah library javascript, jQuery berisi kumpulan kode-kode/fungsi-fungsi yang siap pakai sehingga mempermudah dan mempercepat waktu kita dalam menuliskan kode javascript, karena kita hanya memanggil fungsi-fungsi yang kita butuhkan yang tentu saja sudah ada dalam jQuery tersebut, serta tidak perlu lagi menyusun kode javascript dari nol.Tentunya ini sesuai dengan slogan jQuery itu sendiri, yakni "Write less, do more".
Menurut pengalaman saya dan teman-teman lainnya, jQuery sangatlah ringan sehingga dengan menggunakan jQuery tidak akan membuat halaman web kita menjadi lambat untuk di load, dengan porsi yang tidak berlebihan, tentunya. Sebelum mempelajari jQuery, ada baiknya Anda sudah menguasai dasar-dasar HTML, CSS serta JavaScript. Untuk dapat menggunakan library ini, Anda dapat mendownload jQuery dari situs resminya yaitu www.jquery.com lalu menaruhnya pada direktori tempat Anda menyimpan file halaman web, dan jangan lupa pula untuk memanggil file jQuery di setap halaman web diantara tag <head></head> Anda dengan cara:
<script type="text/javascript" src="jquery.js"></script>
Tulisan yang berwarna merah menandakan nama file, nama file tersebut harus di sesuaikan dengan nama file jQuery yang telah kita download. Untuk lebih lanjut mengenai tutorial dasar desain web dengan jQuery akan dibahas pada tutorial berikutnya.
|==============|
Sintaks pada jQuery |
|==============| Penting!
sama seperti PHP, untuk mempraktikkan tutorial ini anda harus mempunyai Localhost dengan cara mengubah komputer / laptop anda menjadi Server terlebih dahulu dan meletakkan file jquery di dalam localhost.
jQuery --sama seperti halnya library lainnya-- juga memiliki sintaks, biasanya sintaks yang dipakai adalah untuk memilih elemen-elemen HTML lalu melakukan suatu aksi terhadap elemen tersebut atau elemen lain. Ini mirip dengan gaya bahasa visual basic yang pada visual basic diistilahkan dengan konsep 'even driven' dimana suatu reaksi terjadi jika suatu aksi tertentu dilakukan.
Analoginya begini, misal: kita menuangkan sirup strawberry kedalam gelas yang berisi air putih, maka air putih tersebut akan berubah warna dari putih (bening) menjadi merah. Nah, Yang kita lakukan yakni menuangkan sirup adalah aksi, sedangkan peristiwa berubahnya warna pada gelas dinamakan reaksi.
Sintaks pada jQuery adalah sebagai berikut: $(selector).action() Penjelasan! $ biasa saya sebut dengan "cash", digunakan untuk mendefinisikan jQuery selector) digunakan untuk menunjukkan elemen yang dipilih atau dituju action() adalah aksi yang akan dilakukan terhadap elemen yang telah di seleksi atau dipilih.
agar lebih jelas saya beri contoh sebagai berikut:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Design | ilmugrafis.com</title>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$(document).ready(function(){
            $("button").click(function(){
            $("p").hide(1000);
            });
})
</script>
</head>
<body>
<p>Tulisan ini akan bereaksi</p>
<button>Klik tombol ini</button>
</body>
</html> <script type="text/javascript" src="jquery.js"></script>
Penjelasan!
Seperti yang telah dijelaskan pada tutorial sebelumnya baris ini digunakan untuk memanggil file jquery.js. $(document).ready(function(){
Ini dimaksudkan kode javascript yang ada pada baris dibawahnya berjalan pada saat halaman web di load.
$("button").click(function(){ $("p").hide(1000); });
Baris diatas bermakna: ketika elemen “button” di klik oleh pengguna, maka elemen “p” (paragraph) disembunyikan dengan kecepatan selama 1000 mili detik.
Hasilnya:
floating top
Read More
Diposting oleh UKM di 18.37 0 komentar
 
makalahkita © Powered by Blogger Template by Blogger Templates Gallery
Thanks to Life2Work and Blog Zone