PANCASILA sebagai dasar Negara Republik Indonesia

Mengingat kembali, PANCASILA sebagai dasar Negara Republik Indonesia. Dan buka-buka lagi pelajaran sekolah kita dulu. He he he .....

     Pancasila ditetapkan sebagai Dasar Negara pada sidang Panitia Persiapan Kemerdekaan Indonesia 

(PPKI) tanggal 18 Agustus 1945. Sebagai Dasar Negara, Pancasila memuat pokok-pokok pikiran yang luhur dan sesuai dengan kepribadian bangsa. Pancasila harus menjadi pondasi atau landasan dasar dalam merumuskan setiap produk perundangan maupun etika moral yang akan diberlakukan bagi bangsa.  

     Makna Pancasila Sebagai Dasar Negara tentu harus dipahami karena pancasila merupakan salah satu elemen paling penting dalam negara kita ini. Pancasila adalah suatu ideologi yang dipegang erat bangsa Indonesia. istilah Pancasila diperkenalkan oleh sosok Bung Karno saat sidang BPUPKI I . Pancasila kemudian menjadi sebuah landasan berdirinya negara Indonesia.

     Makna Pancasila Sebagai Dasar Negara ialah Pancasila berperan sebagai landasan dan dasar bagi pelaksanaan pemerintahan, membentukan peraturan, dan mengatur penyelenggaraan negara.

Melihat dari makna pancasila sebagai dasar negara kita tentu dapat menyimpulkan bahwa pancasila sangat berperan sebagai kacamata bagi bangsa Indonesia dalam menilai kebijakan pemeritahan maupun segala fenomena yang terjadi di masayrakat.

Fungsi Pancasila Sebagai Dasar Negara

Pancasila Sebagai Pedoman Hidup

     Disini Pancasila berperan sebagai dasar dari setiap pandangan di Indonesia Pancasila haruslah menjadi sebuah pedoman dalam mengambil keputusan

Pancasila Sebagai Jiwa Bangsa

     Pancasila haruslah menjadi jiwa dari bangsa Indonesia. Pancasila yang merupakan jiwa bangsa harus terwujud dalam setiap lembaga maupun organisasi dan insan yang ada di Indonesia

Pancasila Sebagai Kepribadian Bangsa

     Kepribadian bangsa Indonesia sangatlah penting dan juga menjadi identitas bangsa Indonesia. Oleh karena itu Pancasila harus diam dalam diri tiap pribadi bangsa Indonesia agar bisa membuat Pancasila sebagai Kepribadian Bangsa.

Pancasila Sebagai Sumber Hukum

      Pancasila menjadi sumber hukum dari segala hukum yang berlaku di Indonesia. Atau dengan kata lain Pancasila sebagai dasar negara tidak boleh ada satu pun peraturan yang bertentangan dengan Pancasila

Pancasila Sebagai Cita Cita Bangsa

     Pancasila yang dibuat sebagai dasar negara juga dibuat untuk menjadi tujuan negara dan cita cita bangsa. Kita sebagai bangsa Indonesia haruslah mengidamkan sebuah negara yang punya Tuhan yang Esa punya rasa kemanusiaan yang tinggi, bersatu serta solid, selalu bermusyawarah dan juga munculnya keadilan social

Pengertian Pancasila sebagai Pandangan Hidup

     Pengertian pandangan hidup adalah suatu hal yang dijadikan sebagai pedoman hidup, dimana dengan aturan aturan yang di buat untuk mencapai yang di cita citakan. Pancasila sebagai pandangan hidup merupakan sarana ampuh untuk mempersatukan bangsa Indonesia dan memberi petunjuk dalam mencapai kesejahteraan dan kebahagiaan lahir dan batin dalam masyarakat kita yang beraneka ragam sifatnya.

 Manfaat Pandangan Hidup

1. Kekokohan dan tujuan, setiap bangsa yang ingin berdiri kokoh dan mengetahui jelas kearah mana tujuan yang ingin dicapai memerlukan pandangan hidup
2. Pemecahan masalah, dengan pandangan hidup suatu bangsa akan memandang persoalan yang dihadapi dan menentukan cara bagaimana memecahkan persoalan
3. Pembangunan diri,  dengan pandangan hidup suatu bangsa akan memiliki pegangan dan pedoman bagaiman memecahkan masalah politik, ekonomi, social dan budaya dalam gerak masyarakat yang makin maju dan akan membangun dirinya

 Isi Pandangan Hidup

1. Konsep dasar, dalam pandangan hidup terkandung konsep dasar ialah pikiran – pikiran  yang di dalamnya terkandung gagasan mengenai wujud kehidupan yang dianggap baik yang dicita citakan suatu bangsa
2. Pikiran dan gagasan, dalam pandangan hidup terkandung pula pikiran yang terdalam dan gagasan suatu bangsa mengenai wujud kehidupan yang dianggap baik
3. Kristalisasi dan nilai, pandangan hidup adalah kristalisasi nilai yang dimiliki bangsa itu sendiri, yang diyakini kebenarannya dan menimbulkan tekad untuk mewujudkannya

 Aktualisasi Pancasila Dalam Kehidupan

     Aktualisasi berasal dari kata actual, yang berarti betul betul ada, terjadi, atau sesungguhnya. Aktualisasi pancasila adalah bagaimana nilai nilai pancasila benar-benar dapat tercermin dalam sikap dan prilaku seluruh warga Negara, mulai dari aparatur dan pimpinan nasional samapi kepada rakyat biasa. Aktualisasi pancasila dibedakan menjadi 2 macam, yaitu :

• Aktualisasi Pancasila Objektif

Pelaksanaan pancasila dalam bentuk realisasi dalam setiap aspek penyelenggaraan Negara, baik di bidang legislative, eksekutif, yudikatif maupun semua bidang kenegaraan lainnya.

• Aktualisasi Pancasila Subyektif

Pelasanaan dalam sikap pribadi perorangan, setiap warga Negara, setiap individu, setiap penduduk, setiap penguasa dan setiap orang di Indonesia.

Sumber :     pusaka indonesia

Read More

Unknown 7:53:00 PM  No comment

Tentang Photoshop

Untuk mengingatkan kembali tentang photoshop, mari kita buka lagi , apa itu photoshop. Adobe Photoshop adalah Software (Perangkat Lunak) buatan Adobe Systems yang digunakan untuk pengeditan foto/gambar, termasuk pembuatan efek grafis.

Adobe Photoshop sering digunakan oleh Fotografer Digital dan Perusahaan Iklan (Advertising).

Ada banyak versi Adobe Photoshop, seperti : versi 5.5, versi 7.0, hingga versi kedelapan disebut Photoshop CS (Creative Suite), versi sembilan Photoshop CS2, versi kesepuluh Adobe Photoshop CS3, kemudian versi kesebelas Adobe Photoshop CS4.

Keunggulan Adobe Photoshop
•     Lebih familier dan mudah digunakan dibanding software editing gambar selevel Adobe Photoshop.
•     Fasilitas editing gambar hingga efek variasi gambar lebih lengkap.
•     Bisa menyimpan dalam berbagai format dengan berbagai kualitas gambar beserta resolusi dan ukurannya.
•     Bisa untuk memanipulasi/merekayasa foto, misalnya mengganti background, dll untuk kebutuhan positif.
•     Selain untuk editing foto, sangat bagus juga untuk pembuatan produk lain, seperti banner atau spanduk, kartu nama, dll.
•     Fasilitas efek bisa ditambah lagi, yang didapat dari download pada situs resminya.
•     File hasil editan bisa disimpan dalam format JPG dengan kualitas bagus.

Kelemahan Adobe Photoshop
•     Kurang bagus untuk pembuatan desain majalah atau cetak brosur dengan banyak teks, karena tidak bisa membuat paragraf tulisan dengan sempurna.
•     Ukuran penyimpanan file relatif besar bila terdapat banyak layer dan ukuran gambar yang besar.
•     Proses cetak dalam ukuran kertas pada umumnya, atau ukuran kertas yang besar relatif lebih sulit.
•     Akan lebih rumit ketika mengedit gambar dari banyak layer yang digabung, sebab setiap mengedit satu bagian harus di klik dulu layer yang dimaksud. Ini membutuhkan waktu yang lebih lama dibanding software lain yang bisa untuk mengedit dari banyak gabungan gambar tanpa kesulitan.

Format Penyimpanan Adobe Photoshop

• PSD (namafile.psd) : Format Project Adobe Photoshop. Bisa diedit lagi kapan pun kita mau. Ini belum file utuh dalam satu bagian. Jadi, setiap layer masih terpisah-pisah dari hasil editan yang ada.
•  JPG (namafile.jpg) : Format gambar pada umumnya. Bisa digunakan sebagai wallpaper komputer maupun HP kita. Atau untuk keperluan dicetak layaknya foto pada umumnya.
• BMP (namafile.bmp) : Format gambar yang lebih besar. Ukuran filenya relatif lebih besar dibanding JPG. Biasanya file ini untuk editing video.
• PNG (namafile.png) : Format gambar dengan background transparant. Biasanya untuk dimasukkan pada software lain untuk variasi, maupun untuk gambar sebuah situs di internet.
• File dalam HTML (File – Save for Web & Devices) : Untuk gambar situs offline.
• Pengertian Adobe Photoshop sebagai program standar pengelola gambar (image editing) yang paling polpuler dan paling banyak digunakan. Mengelola foto adalah salah satu fungsi utama photoshop. Adalah kepuasan tersendiri bila anda dapat membuat foto sesuai dengan kemampuan anda. Menambahkan beberapa aksesori pada foto anda biar lebih cantik. Anda bisa melakukan itu semua pada saat pemotretan, akan tetapi akan memakan waktu yang tidak sebentar dan mungkin akan sedikit sulit bila anda melakukan pemotretan dengan memakai jasa tukang foto keliling.
• Tapi semua itu bisa diatasi dengan cara mudah dan menyenangkan dikarenakan Photoshop memiliki kemampuan dan tool-tool.
• Toolbar photoshop adalah program tambahan yang memudahkan pengguna photoshop untuk memaksimalkan kemampuan photoshop. Biasanya berada di sebelah kanan, meskipun dapat dipindahkan sesuai selera. Fungsi dari masing-masig kategori toolbar tersebut yaitu:

Selection Tool

Move Tool - Shortcut (V), alat ini digunakan untuk memindahkan posisi layer dalam satu foto ataupun memindahkan sebuah foto atau layer dalam sebuah foto ke foto yang lain / foto yang berbeda.

Rectangular Marquee Tool - Shortcut (M), alat ini digunakan untuk menyeleksi objek yang berbentuk kotak. Klik kanan diatas alat ini maka akan muncul alat lain dari kelompok marquee tool seperti Eliptical Marquee Tool, Single Row Marquee tool dan Single Column 

Eliptical Marquee Tool - Shortcut (M), alat ini digunakan untuk menyeleksi objek yang berbentuk lingkaran seperti menyeleksi lingkaran mata, ban mobil dan objek lain. Alat ini masih satu kelompok dengan Rectangular Marquee Tool.

Lasso Tool - Shortcut (L), digunakan untuk menyeleksi objek dengan bentuk bebas, alat ini akan membentuk seleksi sesuai dengan gerakan mouse, penggunaan alat ini sangat bergantung dengan gerakan mouse sehingga cukup sulit mengendalikan dan mencapai hasil yang maksimal.

Polygonal Lasso Tool - Shortcut (L), digunakan untuk menyeleksi objek dengan bentuk bebas bersudut, alat ini membentuk seleksi melalui titik-titik point yang dibuat dengan menggunakan klik kiri mouse. Alat ini juga dapat digunakan untuk memotong dan mengubah background foto.

Magnetic Lasso Tool - Shortcut (L), digunakan untuk menyeleksi objek dengan bentuk bebas, cara kerja alat ini adalah menempel pada tepi objek yang akan dipotong ketika mouse bergerak mengelilingi tepian objek, selama proses seleksi alat ini membentuk titik-titik penghubung seleksi.

Magic Wand Tool - Shortcut (W), digunakan untuk  menyeleksi satu jenis warna (warna solid) pada foto. Alat ini dapat menyeleksi dengan pengaturan nilai tolerance atau nilai cakupan warna, semakin besar nilai tersebut maka semakin luas cakupan warna yang di seleksi.

Crop & Slice Tool

Crop Tool - Shortcut (C), digunakan untuk memotong gambar, foto ataupun canvas (kertas kerja). Pemotongan dengan alat ini dilakukan secara permanen mengubah bentuk dimensi lebar dan tinggi foto. Pemotongan dilakukan dengan menentukan area potong berbentuk kotak dari sebuah foto.

 Slice Tool - Shortcut (C), digunakan untuk kebutuhan website dengan cara memotong hasil desain yang telah dibuat di Photoshop menjadi potongan yang lebih kecil.

Slice Select Tool - Shortcut (C), digunakan untuk memilih potongan pada sebuah desain yang telah dipotong sebelumnya dengan menggunakan slice tool.

Annotation, Measuring & Navigation Tool

Eyedropper Tool - Shortcut (I), digunakan untuk mengambil sample warna dari sebuah gambar ataupun foto, sample warna diambil dengan cara mengklik warna target yang kemudian secara otomatis akan mengubah warna depan (foreground color) pada toolbox.

Ruler Tool - Shortcut (I), digunakan untuk mengukur dimensi lebar dan tinggi.  alat ini biasanya digunakan untuk kebutuhan website seperti mengukur dan memperkirakan interface tinggi & lebar tombol, header ataupun area website lainnya. Satuan yang digunakan biasanya pixels.

Note tool - Shortcut (I), digunakan untuk memberikan catatan pada hasil desain yang telah di buat. Catatan ini berguna sebagai pengingat dalam proses pembuatan desain ataupun dapat berguna sebagai media untuk penyampaian sebuah pesan ketika bekerja secara team.

Hand Tool - Shortcut (H), digunakan untuk menggeser/memindah bidang pandang foto atau gambar di dalam window view area atau dalam kondisi gambar sedang di perbesar (zoom in). Cukup tekan dan tahan tombol spasi untuk meminjam alat ini.

Zoom Tool - Shortcut (Z), digunakan untuk memperbesar ataupun memperkecil tampilan foto atau gambar. Pengaturan zoom in atau zoom out dapat dilakukan melalui option bar.

Retouching Tool

Spot Healing Brush - Shortcut (J), digunakan untuk menghapus noda pada sebuah foto ataupun gambar, alat ini juga biasanya digunakan untuk menghilangkan noda di wajah ataupun menghilangkan jerawat diwajah.

Patch Tool - Shortcut (J), digunakan untuk memperbaiki foto dengan cara memanfaatkan pola yang terdapat pada foto tersebut. Perbaikan dilakukan dengan menyeleksi kerusakan area kemudian menarik seleksi tersebut diatas pola target untuk menutupi area kerusakan.

Red Eye Tool - Shortcut (J), digunakan untuk menghilangkan efek mata merah yang timbul pada foto akibat pengambilan foto dalam kondisi gelap menyebabkan flash kamera memantulkan warna merah pembuluh darah dibalik mata.

Clone Stamp Tool - Shortcut (S), digunakan untuk mengambil sample dari sebuah area gambar kemudian mengkloning / menerapkan sample tersebut untuk dilukiskan diatas area foto lain berdasarkan sample foto yang diambil.

Pattern Stamp Tool - Shortcut (S), digunakan untuk melukis image dengan menggunakan pola tertentu sesuai dengan pola yang dipilih pada option bar.

Eraser Tool - Shortcut (E), digunakan untuk menghapus foto atau gambar dalam sebuah layer raster.

Background Eraser Tool - Shortcut (E), digunakan untuk menghapus foto atau gambar sehingga menghasilkan layer transparant pada bagian foto atau pada area yang dihapus.

Background Eraser Tool - Shortcut (E), digunakan untuk menghapus foto atau gambar sehingga menghasilkan layer transparant pada bagian foto atau pada area yang dihapus.

Magic Eraser Tool - Shortcut (E), digunakan untuk menghapus area tertentu dari sebuah foto atau gambar yang memiliki warna yang serupa (satu warna solid) menjadi transparan dengan satu kali klik pada area warna tersebut. Bisa dimanfaatkan untukmenghapus background satu warna.

Blur Tool - digunakan untuk menghaluskan/mengaburkan area tertentu dari sebuah foto atau gambar. Dengan mengaburkan gambar akan memberikan kesan halus, blur juga dapat menyamarkan pixels gambar.

Sharpen Tool - digunakan untuk menajamkan area tertentu dari sebuah foto atau gambar.

Smudge Tool - digunakan untuk menggosok/mencoreng area tertentu dari sebuah foto atau gambar seolah-olah di pengaruhi oleh sapuan jari telunjuk diatas sebuah lukisan.

Dodge Tool - Shortcut (O), digunakan untuk menerangkan warna di area tertentu pada gambar atau foto dengan memberikan highlights pada area tertentu hingga area tersebut tampak lebih cerah / terang.

Burn Tool - Shortcut (O), digunakan untuk menggelapkan warna di area tertentu pada gambar atau foto dengan memberikan shadow / bayangan pada area tertentu hingga tampak lebih gelap.

Sponge Tool - Shortcut (O), digunakan untuk mengubah saturation di area tertentu pada area gambar atau foto.

Painting Tool

Brush Tool - Shortcut (B), digunakan untuk melukis foto atau gambar dengan goresan kuas berdasarkan warna depan (foreground color) yang telah dipilih.

History Brush Tool - Shortcut (Y), digunakan untuk melukis image menggunakan snapshot atau state history dari Image.

Art History Brush Tool - Shortcut (Y), digunakan untuk melukis image menggunakan snapshot atau state history dari image, dengan model artistik tertentu.

Pencil Tool - Shortcut (B), digunakan untuk melukis dengan efek goresan pensil.

Gradient Tool - Shortcut (G), digunakan untuk mengecat area yang dipilih (selected area) dengan perpaduan dua warna atau lebih.Gradient ini juga memiliki beberapa pengaturan dan tipe untuk menghasilkan efek perpaduan warna yang sesuai dengan keinginan.

Paint Bucket Tool - Shortcut (G), digunakan untuk mengecat atau mewarnai area tertentu atau layer tertentu berdasarkan warna depan (foreground color) yang telah dipilih.

Drawing and Type Tool

Path Selection Tool - Shortcut (A), digunakan untuk menyeleksi path yang telah dibuat dengan menggunakan pen tool.

Horizontal Type Tool - Shortcut (T), digunakan untuk membuat teks secara horizontal. Selain alat ini ada juga Vertical Type Tool untuk membuat teks secara vertical dan type mask untuk membuat teks dalam bentuk seleksi.

Pen Tool - Shortcut (P), digunakan untuk menggambar path sudut ataupun lengkung. Alat ini biasa juga digunakan untuk menyeleksi objek. Selain alat ini ada kumpulan alat lain untuk menambah titik point, mengurangi dan memodifikasi path yang telah dibuat.

Semoga bermanfaat ya....

Read More

Unknown 7:54:00 PM  No comment

Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver Bagian 3

Apakah anda sudah selesai dengan tutorial membuat "website tanpa table" di bagian Pertama dan kedua yang lalu? mari kita lanjut membuat layout untuk isi halaman utama website. Umumnya halaman utama website di isi dengan pengenalan website itu sendiri. Apabila website ditujukan untuk menjual product (website ecommerce) beberapa product unggulan juga di tampilkan di halaman utama, namun karena website yang kita bangun sekarang adalah jenis website personal maka di halaman utama kita isi dengan alakadarnya dulu :)



Berikut ini markup HTML dari project website Bagian 2 lalu :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome | Bila Luang</title>
<style media="screen">
body {
    background: #000000 url(images/background.jpg) no-repeat top;
    margin:0;
    padding:0;
    font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
}
.header{
    background:url(images/bgheader.png) top right no-repeat;
    width: 646px;
    height: 150px;
    margin: 0 auto;
    padding:0;
}
.header .left{
    width: 230px;
    float:left;
    height: 30px;
    padding:68px 0 0 40px;
    color:#FFFFFF;
}
.header .left .search{
    background:url(images/transparent.gif);
    border:0;
    width: 250px;
    height: 15px;
    padding:3px 5px;
    color:#FFF;
}
.header .left .submit{
    display: none;
}
.header .right{
    width:225px;
    padding:28px 65px 0 0;
    float:right;
}
.clear{ clear:both; }
ul.navigation{
    list-style:none;
    margin:0 auto;
    padding:0;
}
ul.navigation li{
    display: block;
    float: left;
    text-align: center;
    width: 125px;
    height:40px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
    border-left:3px solid #000000;
}
ul.navigation li:hover, li.active{
    background:url(images/bg_navigation_hover.jpg) repeat-x top;
}
ul.navigation li a{
    display: block;
    width: 125px;
    height:40px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
}
ul.navigation li a:hover, ul.navigation li a.active{
    color: #6fca0e;
}
.content{
    width: 646px;
    margin: 0 auto;
    background:url(images/bgcontent.png);
}
.container{
    padding:5px 10px 10px 15px;
    line-height:18px;
}
.container h1{
    border-bottom:1px solid #999999;
    font-size:18px;
    line-height:30px;
    margin-bottom:10px;
}
.container p{
    margin-bottom:10px;
}
.footer{
    width: 646px;
    height: 30px;
    margin: 0 auto;
    margin-bottom:50px;
    background:url(images/bgfooter.png) top right no-repeat;
}
</style>
</head>
<body>
<div class="header">
    <div class="left">
        <form name="search_form" action="/* link untuk proses */" method="post">
        <input type="text" name="search" id="search" class="search" value="Pencarian" />
        <input type="submit" name="submit" id="submit" class="submit" />
        </form>
    </div>
    <div class="right"><a href="#"><img src="images/logo.png" alt="w3Function.com" /></a></div>
    <div class="clear"></div>
    <ul class="navigation">
        <li class="active"><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Galerry</a></li>
        <li><a href="#">Blog</a></li>
        <li style="width:128px"><a href="#">Contact</a></li>
    </ul>
</div>
<div class="content">
    <div class="container">
        <h1>The standard Lorem Ipsum passage.</h1>
        <p>Text apa saja bebas sakarep anjeun</p>
        <p>Text apa saja bebas sakarep anjeun</p>
        <p>Text apa saja bebas sakarep anjeun</p>
    </div>
</div>
<div class="footer"></div>
</body>
</html>



Apa yang harus dikuasai untuk Mengerjakan Tutorial ini
Untuk mengerjakan tutorial ini maka Anda harus menguasai dasar dari CSS, HTML dan minimal bisa membuat website dengan table.
 Silahkan cari referensi lain untuk dasar HTML dan dasar ilustrasi Photoshop, banyak sekali di Google. Apabila anda sudah menguasai selanjutnya tentunya anda harus selesai mengerjakan tutorial pada bagian pertama dan kedua:
- Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver Bagian 1
- Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver Bagian 2



Memindahkan Metode penerapan CSS
Pada tutorial membuat "website semantik tanpa table" yang lalu, untuk menerapkan CSS dengan cara inline style sheet, tujuannya adalah untuk memudahkan anda dalam mengerjakannya dan juga karena pada bagian yang lalu kita masih kerja pada satu file saja (index.html). Sekarang dan selanjutnya kita akan mulai bekerja dengan banyak file HTML sehingga sudah tidak logis lagi untuk menerapkan inline style sheet karena selain nanti kita mengulangi penulisan CSS di setiap file HTML, coding kita juga jadi tambah panjang. Silahkan buat file dengan ekstensi .css kemudian simpan di folder style, susunan foldernya adalah sebagai berikut :

Karena CSS kita pindahkan ke dalam folder style maka kita juga harus merubah arah penunjukan gambar untuk background pada CSSnya, perhatikan coding CSS untuk background yang kita buat sebelumnya misalnya pada tag body berikut :
background: #000000 url(images/background.jpg) no-repeat top;
Silahkan tunjuk ulang posisi gambar yang kita jadikan background, atau ubah arah penunjukan background menjadi sebagai berikut :
background: #000000 url(../images/background.jpg) no-repeat top;

Membuat 2 Kolom untuk Content Halaman Utama
Mari kita membuat 2 kolom untuk layout content di halaman utama. Kolom di sebelah kiri kita gunakan untuk membuat kategori, menyimpan widget dan lain sebagainya (di blog w3function.com saya gunakan kolom ini di sebelah kanan).
Kolom di sebelah kanan kita gunakan untuk isi dari halaman itu sendiri. Ukuran content kita adalah 646 px, 6 px sudah terpakai border dan 20 px sudah terpakai padding untuk container, maka sisa lebar untuk content tinggal 620 px. Berapa lebar yang di perlukan untuk kolom kiri dan kanan?
Hal yang paling logis adalah karena sebelah kiri untuk keperluan widget maka lebar cukup sebesar 186px + border kiri 2px + border kanan 2px (190px), untuk kolom kanan kita gunakan lebar sebesar 416px + border 4px + padding 10 px (430px), total yang akan di pakai jadi 620px. sisanya kita gunakan sebagai jarak antara kolom kiri dan kanan, jiga bingung gunakan calculator :p. Okay sekarang buang heading dan paragraph yang sudah kita buat sebelumnya didalam div dengan class="container" kemudian tambahkan mark up berikut :
<div class="container">
    <div class="column">
        <div class="left-column"></div>
        <div class="right-column"></div>
        <div class="clear"></div>
    </div>
</div>
Div dengan class left-column akan kita gunakan sebagai kolom kiri dan Div dengan class right-column akan kita gunakan sebagai kolom kanan. Tambahkan style untuk membentuk 2 kolom tersebut dengan menuliskan tag CSS berikut :
.container .column{ }
.container .column .left-column{
    float:left;
    width:186px;
    border-top:2px solid #aaa;
    border-bottom:2px solid #aaa;
    border-left:2px solid #aaa;
    border-right:2px solid #aaa;
    margin-left:8px;
    height:200px;
}
.container .column .right-column{
    float:right;
    width:415px;
    border:2px solid #aaa;
    margin-right:8px;
    height:360px;
}
Kalau dulu semua elemen HTML berbentuk kotak persegi, untuk menambahkan lengkung pada setiap sudut persegi kotak maka harus bersusah susah dulu memanipulasi gambar di photoshop
Pada CSS3 dan HTML5 salah satu tambahan propertinya yaitu -moz-border-radius dan -webkit-border-radius kita dipermudah dengan kemampuan untuk membuat kotak dengan lengkungan di tiap sudutnya, sehingga tidak perlu repot lagi memanipulasi gambar di photoshop. Supaya tidak kotak persegi mari kita tambahkan CSS3: 
.container .column{}
.container .column .left-column{
    float:left;
    width:186px;
    border-top:2px solid #aaa;
    border-bottom:2px solid #aaa;
    border-left:2px solid #aaa;
    border-right:2px solid #aaa;
    margin-left:8px;
    height:200px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
.container .column .right-column{
    float:right;
    width:415px;
    border:2px solid #aaa;
    margin-right:8px;
    height:360px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

Membuat Bar untuk Judul Kolom

Sebuah kolom biasanya memiliki judul kolom dan di beri background berbeda dengan isi kolom, mari kita membuat background di photoshop buat sebuah canvas berukuran 600pixel x 32pixel, pada blending option beri gradasi hitam (#11111) ke abu2 (#555555), atau mengenai warna terserah anda.

Masih di photosop dengan rectangle tool buatlah bidang-bidang berwarna putih dengan berbagai ukuran lebar kemudian miringkan, merge semua layer bidang yang telah di buat selanjutnya beri opacity hanya 5% pada bidang yang telah di merge

Tambahkan variasi sesuka anda sebagus mungkin, bar yang saya buat hasilnya sebagai berikut:

buat lagi gambar dengan gradasi abu-abu (#aaaaaa) ke putih (#ffffff)

Simpan bar pertama dengan nama bar-right.png dan yang kedua dengan nama bar-left.png, tambahkan CSS background pada .container .column .left-column dan .container .column .right-column
.container .column .left-column{
    float:left;
    width:186px;
    border:1px solid #555;
    margin-left:8px;
    height:200px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    background:url(../images/bar-left.png) top repeat-x;
}
.container .column .right-column{
    float:right;
    width:415px;
    border:1px solid #111;
    margin-right:8px;
    height:360px;
    -moz-border-radius:10px;
    -webkit-border-radius:5px;
    background:url(../images/bar-right.png) top no-repeat;
}

Ok kita sudah membuat kerangka kolom untuk isi kita selanjutnya apa?
Memformat elemen content (heading, paragraph, dsb) di HTML
Delete properti height untuk class left-column dan right-column, Format semua bentuk elemen HTML yang akan kita jadikan tempat untuk text, gambar, video (konten) kita, misalnya pada CSS buat tag berikut (ini hanya contoh format yang saya buat, berikutnya semuanya tergantung pada kreatifitas design anda)
.container .column .right-column .no-warp{
    width:410px;
    margin:0 auto;
    padding:5px 0 5px 0;
    background:url(../images/bg_warp.jpg) top repeat-x;    
}
.container .column .left-column h1{
    width:180px;
    margin:0 auto;
    margin-bottom:10px;
    border-bottom:1px dotted #aaa;
    font-size:14px;
    font-weight:bold;
    color:#000;
    line-height:26px;
    height:26px;
    text-indent:10px;
}
.container .column .left-column ul{
    margin-bottom:20px;
    margin-left:20px;
    list-style:circle;
}
.container .column .left-column p{
    padding:0 5px;
    margin-bottom:10px;
}

.container .column .left-column ul li{
    margin-bottom:5px;
}
.container .column .right-column h1{
    font-size:14px;
    font-weight:bold;
    color:#FFF;
    line-height:32px;
    height:32px;
    text-align:center;
}
.container .column .right-column h2{
    font-size:14px;
    font-weight:bold;
    padding:2px 5px;
    margin-bottom:5px;
}
.container .column .right-column p{
    margin-bottom:10px;
    padding:0 5px;
}
.container .column .right-column p img{
    width:180px;
    float:left;
}
.container .column .right-column a{
    color:#F30;
    text-decoration:none;
}
.container .column .right-column a:hover{
    text-decoration:underline;
}
Wew, penasaran kan apa yang kita buat diatas. Semua elemen dan class (p, h, dsb ) yang saya tulis di depan .container .column .left-column adalah bentuk format yang akan diterapkan pada semua elemen HTML yang ada di kolom kiri begitu juga semua elemen dan class yang saya tulis di depan .container .column .right-column adalah bentuk format yang akan diterapkan pada semua elemen HTML yang ada di kolom kanan
Jika masih bingung dengan properti seperti margin, border, padding dsb silahkan buka Blog referensi - referensi berikut:
·         Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table
·         Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
·         Silahkan cari referensi lain bila perlu.
Pada class no-warp saya tambahkan background untuk memisahkan isi contentbackground:url(../images/bg_warp.jpg) top repeat-x; gambar yang saya buat berukuran 40pixel x 100pixel dengan gradasi abu-abu ke putih, silahkan berkreasi
Ok dengan memformat elemen content (heading, paragraph, dsb) di HTML dan juga mengisi content yang kita format maka tampilannya akan seperti ini :

Markup Tag dan Content di HTML sesuai dengan format dari CSS adalah sebagai berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<title>Welcome | Bila Luang</title>
</head>
<body>
<div class="header">
    <div class="left">
        <form name="search_form" action="/* link untuk proses */" method="post">
        <input type="text" name="search" id="search" class="search" value="Pencarian" />
        <input type="submit" name="submit" id="submit" class="submit" />
        </form>
    </div>
    <div class="right">
        <a href="#"><img src="images/logo.png" alt="w3Function.com" /></a>
    </div>
    <div class="clear"></div>
    <ul class="navigation">
        <li class="active"><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Galerry</a></li>
        <li><a href="#">Blog</a></li>
        <li style="width:128px"><a href="#">Contact</a></li>
    </ul>
</div>
<div class="content">
    <div class="container">
        <div class="column">
            <div class="left-column">
                <h1>Categories</h1>
                <ul>
                    <li>Lorem ipsum</li>
                    <li>dolor sit amet</li>
                    <li>adipiscing</li>
                    <li>suscipit elit</li>
                    <li>Duis nunc</li>
                    <li>accumsan quis</li>
                </ul>
                <h1>Most View</h1>
                <ul>
                    <li>Lorem ipsum</li>
                    <li>dolor sit amet</li>
                    <li>adipiscing</li>
                    <li>suscipit elit</li>
                    <li>Duis nunc</li>
                    <li>accumsan quis</li>
                </ul>
            </div>
        <div class="right-column">
        <h1>Bagaimana Cara Membuat Website</h1>
        <div class="no-warp">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
        <p>Post under <a href="#">news</a> | <em>25 February 2011</em></p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nam id suscipit elit. Nam orci mauris, semper sed gravida id,
            accumsan quis lectus. In lorem felis Duis nunc mauris
            Vestibulum ut nibh sed lorem pretium mollis quis non ligula. P
            ellentesque at ipsum at metus auctor aliquet.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nam id suscipit elit. Nam orci mauris, semper sed gravida id,
            accumsan quis lectus. In lorem felis Duis nunc mauris
            Vestibulum ut nibh sed lorem pretium mollis quis non ligula.
            Pellentesque at ipsum at metus auctor aliquet.
        </p>
        </div>
        <div class="no-warp">
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
            <p>Post under <a href="#">news</a> | <em>25 February 2011</em></p>
            <p><img src="http://www.w3function.com/images_tutor/dcytbvp.jpg"  /></p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nam id suscipit elit. Nam orci mauris, semper sed gravida id,
                accumsan quis lectus. In lorem felis Duis nunc mauris
                Vestibulum ut nibh sed lorem pretium mollis quis non ligula.
                Pellentesque at ipsum at metus auctor aliquet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nam id suscipit elit. Nam orci mauris, semper sed gravida id,
                accumsan quis lectus. In lorem felis Duis nunc mauris
                Vestibulum ut nibh sed lorem pretium mollis quis non ligula.
                Pellentesque at ipsum at metus auctor aliquet.
            </p>
            </div>
        </div>
        <div class="clear"></div>
        </div>
    </div>
</div>
<div class="footer"></div>
</body>
</html>

Membuat Footer (Bagian bawah)
Bagian bawah website biasanya berisi copy right dan link navigasi tapi sesuai gambar jadi di tutorial bagian 1 mari kita memperindah dengan beberapa background gambar :)
Untuk memperbagus bagian footer sesuai background saya membuat bulatan-bulatan warna warni di bagian footer dan menambahkan vektor karangan daun, disini saya tidak akan menjelaskan cara membuatnya karena topik kita tentang membuat website :) silahkan berkreasi dan berinovasi sendiri di photoshop.

Gambar diatas saya buat berukuran 330pixel x 250 pixel dan saya beri nama leaf_footer.png. Untuk menambahkan format hiasan gambar dan copy right pada CSS bagian footer ganti margin-botom jadi 10px, kemudian di bawahnya tambahkan tag berikut :
.footer .circle_leaf{
    width: 330px;
    height: 250px;
    position:absolute;
    margin:-170px 0 0 -50px;
    display:block;
    background:url(../images/leaf_footer.png) no-repeat;
}
.copy{
    width: 646px;
    height: 50px;
    margin: 0 auto;
    color:#FFF;
    text-align:center;
    font-size:14px;
}
Pada html di bagian footer menjadi seperti berikut :
<div class="footer">
    <div class="circle_leaf"></div>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Galerry</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
</div>
<div class="copy">CopyRight &copy; by Bila Luang</div>
Hasil akhirnya akan seperti ini  :

Selanjutnya tidak ada bagian ke 4, selanjutnya adalah mengembangkan kreatifitas anda untuk membuat desain sendiri. Terimakasih suadah meluangkan waktunya untuk mengikuti artikel. 

Read More

Unknown 8:52:00 PM  No comment