• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 1

27‘09
June

noimg.jpg

Setelah artikel yang lalu membahas pemembuatan website sederhana dengan table pada photoshop dan dreamweaver. Sekarang mari kita mulai membuat website tableless dengan div tentunya masih menggunakan photoshop dan dreamweaver.

Bila anda belum membaca tutorial sebelumnya, saya sarankan untuk membaca dan mempraktekannya terlebih dahulu supaya lebih mantap lagi untuk memulai project kita kali ini, untuk membacanya silahkan klik disini. Project kali ini sedikit agak rumit dan bila koneksi anda menggunakan dial-up tutorialnya mungkin lumayan lama karena yang pasti kali ini banyak sekali gambar yang harus di load. Bila salah satu image dalam tutorial ini tidak muncul, klik kanan pada image kemudian pilih show image/reload image. Tampilan project website kita kali ini adalah sebagai berikut (klik untuk memperbesar)

Preview

Apa yang harus saya kuasai untuk Mengerjakan Tutorial ini

Untuk mengerjakan tutorial saya ini maka Anda harus menguasai dasar dari CSS, HTML dan minimal bisa membuat website dengan table. Berikut daftar yang bisa anda pelajari terlebih dahulu:

Membuat Desain Awal dengan Photoshop

Silahkan buka photoshop anda kemudian buat kanvas baru dengan ukuran 1280 X 800 pixel dan background content white, settingan yang lainnya tidak perlu dirubah.

#1 image

Double click pada layer 0 yang baru saja dibuat, ganti nama layer menjadi background. Selanjutnya click kanan pada layer background dan pilih blending option :

#2 image

pada dialog blending option centang dan klik gradient overlay kemudian atur gradasi warna sehingga menjadi seperti pada gambar berikut :

#3 image

pilih ellipse tool kemudian buat bidang bulat pada layer background yang telah diberi warna gradasi hitam putih, sehingga menjadi sebagai berikut :

#4 image

buatkan bidang yang sama dengan variasi warna yang berbeda sebanyak 5 buah sehingga menjadi sebagai berikut :

#5 image

klik bidang yang telah dibuat kemudian pilih Filter - Blur - Gausian Blur, ubah radius Gausian Blur menjadi 90 seperti setingan pada gambar dibawah, lakukan setingan tersebut pada semua bidang :

#6 image

apa yang kita lakukan diatas akan menghasilkan gambar sebagai berikut :

#7 image

buat lagi bidang berwarna putih dengan ellipse tool kali ini buatlah bidang yang agak lonjong kemudian tempatkan disebelah atas :

#8 image

Atur fill opacity bidang yang baru saja dibuat pada blending option menjadi 10 sehingga gambar menjadi sebagai berikut :

#9 image

Dengan demikian background untuk website kita kali ini bisa dikatakan selesai, anda bisa saja menambahkan variasi sesuka anda. Sebagai catatan saja dari saya, background yang kita buat usahakan selalu dengan ukuran 1280 x 800 pixel atau lebih. Seperti yang kita ketahui rata-rata resolusi notebook adalah 1280 x 800 pixel, sedangkan rata-rata desktop berukuran hanya 1024 x 780 pixel. Jika kita membuat background dengan ukuran lebar 1024 tentu tidak akan tampil bagus pada resolusi diatasnya, lebih baik lagi bila kita bisa membuat background yang dinamis namun indah dan dengan ukuran byte yang rendah.

Setelah anda selesai dengan background diatas, selanjutnya mari kita buat design untuk layout content website kita. Buatlah sebuah kanvas baru berwarna hitam dengan ukuran 640 x 640 pixel, kemudian pilih rounded rectangle tools ubah radiusnya menjadi 20px dan buatkan bidang berwarna putih.

#10 image

geser layout content tersebut ke dalam background yang sebelumnya kita buat dengan menggunakan move tool .. klik kanan pada layout kemudian pilih blending option gunakan setingan berikut

#11 image

hasil dari penambahan stroke dan gradient overlay pada layout content yang telah di gabungkan dengan background akan menghasilkan gambar sebagai berikut

#12 image

buat sebuah kanvas kemudian tambahkan bulatan-bulatan hitam dengan ellipse tool diatas kanvas sehingga membentuk gambar seperti awan hitam, klik kanan pada layers kemudian pilih merge visible

#13 image

Gabungkan gambar awan dengan design website sebelumnya kemudian tambahkan bulatan-bulatan hitam lain disekelilingnya sehingga kita mendapatkan design website seperti gambar berikut

#14 image

OK sekarang content website dan background sudah jadi, selanjutnya mari kita buat Design Menu untuk website kita. langkah pertama adalah buat bidang persegi dengan rectangle tool pada bagian atas content selebar content atau 640 pixel kemudian tambahkan gradient overlay pada blending option dengan variasi warna merah tua dengan hitam (caranya sama seperti sebelumnya)

#15 image

buatkan lagi bidang kali ini dengan rounded rectangle tool disebelah pojok kiri atas yang nantinya akan kita gunakan untuk input pencarian, beri gradisi warna seperti sebelumnya tambahkan icon pencarian diatas bidang. selanjutnya disebelah kanan atas tambahkan logo website anda sehingga bagian atas menu tampak seperti gambar berikut

#16 image

Dengan demikian maka layout website kita sudah jadi dengan tampilan yang lumayan keren

#17 image

Mark Up Design dengan xHTML dan CSS

Sekarang anda sudah memiliki design website yang anda buat sendiri dengan photoshop, nah langkah selanjutnya adalah membuat Mark Up atas Desain yang telah kita buat kedalam xHTML dan CSS, silahkan buka Macromedia Dreamweaver anda.

Buat sebuah file HTML baru dengan tipe dokumen DTD XHTML Strict 1.0 save file dengan nama index.html.

#18 image

Setiap kita membuat file baru maka akan ditampilkan tag html bawaan, ubah tag <title>Untitled Document</title> yang berfungsi untuk memberi title website pada tab browser sesuai dengan title website yang anda kehendaki.


<!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 | Websiteku </title>
</head>
<body>

</body>
</html>

Sebelum melanjutkan XHTML mari kita kembali lagi ke photoshop untuk menyiapkan background dokumen, pastikan save gambar pada photoshop yang telah kita buat dengan ekstensi psd. Delete dulu semua image menu, kemudian pada blending option untuk layout content centang dan ubah color overlay menjadi hitam pekat ( #000000 )

#19 image

#20 image

potong atau crop gambar sehingga memiliki ukuran dengan kb yang lebih kecil, buat persis menjadi sebagai berikut dan pastikan layout hitam berada ditengah-tengah..

#21 image

Simpan gambar background yang telah di crop dengan nama background.jpg, tempatkan pada direktori image yang terdapat pada direktori index.html. Ingat pada saat menyimpan gambar, gunakanlah save for web sehingga kita bisa mengoptimasi ukuran byte gambar dan gambar lebih cepat untuk di load oleh browser

kita terapkan CSS untuk Tag body XHTML. Sementara untuk memudahkan kita, terapkan CSS dengan cara internal style sheet dulu baru kemudian setelah semua mark up selesai kita pindahkan menjadi eksternal stylesheet dengan ekstensi tersendiri. bila anda belum paham dengan penerapan CSS silahkan buka artikel saya sebelumnya Pengertian CSS dan Cara Penerapan CSS pada HTML. OK, tambahkan tag CSS berikut dibawah tag title html

<style media="screen">
body {
	margin:0;
    background:#000000 url(images/background.jpg) no-repeat top;
    font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif
}
</style>

Penambahan mark up css diatas bila kita lihat di browser akan menampilkan dokumen web sebagai berikut

#22 image

Sekarang kembalikan lagi layout content web menjadi putih kembali ( undo color overlay ) kemudian delete layout background sehingga kita mendapatkan gambar sebagai berikut

#23 image

klik kanan pada layer kemudian pilih merge visible pastikan bagian tetap transparent persis seperti gambar diatas. Selanjutnya potong gambar dengan crop menjadi tiga bagian, bagian yang harus dipotong dapat anda lihat pada gambar dibawah ditandai dengan warna merah, pastikan presisi pemotongan gambar sama..

#24 image

simpan (save for web) ketiga gambar yang telah dipotong dengan ekstensi PNG pada folder images.

  • Potongan #1 simpan dengan nama bgheader.png
  • Potongan #2 simpan dengan nama bgcontent.png
  • Potongan #3 simpan dengan nama bgfooter.png
saya tidak memberi patokan ukuran masing-masing potongan, maka dari itu buka semua potongan yang tadi telah disimpan klik kanan pada bagian title kemudian pilih image size untuk mengetahui ukuran pixel potongan anda dan ingat baik-baik ukuran pixel gambar2 tersebut.

Selanjutnya pada style css dibawah body tambahkan kode sebagai berikut

<style media="screen">
.header{
    width: 646px; 
    height: 170px;
    margin: 0;
    background:url(images/bgheader.png) bottom right no-repeat;
}
.content{
    width: 646px;
    margin: 0 auto;
    height:500px;
    background:url(images/bgcontent.png);
}
.container{
    padding : 10px;
}
.footer{
    width: 646px;
    height: 30px;
    margin: 0 auto;
    background:url(images/bgfooter.png) top right no-repeat;
}
</style>

Ukuran width dan height pada property css diatas tergantung dari hasil potongan gambar anda, oleh karena itu untuk width dan height-nya jangan mengacu pada kode diatas silahkan mengacu pada gambar anda.

tambahkan juga tag HTML berikut pada body


<div class="header"></div>
<div class="content">
	<div class="container"> </div>
</div>
<div class="footer"></div>

Dengan demikian maka tag HTML sekarang menjadi 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" />
<title>Welcome | Websiteku</title>
<style media="screen">
.header{
    width: 646px; 
    height: 170px;
    margin: 0;
    background:url(images/bgheader.png) bottom right no-repeat;
}
.content{
    width: 646px;
    margin: 0 auto;
    height:500px;
    background:url(images/bgcontent.png);
}
.container{
    padding : 10px;
}
.footer{
    width: 646px;
    height: 30px;
    margin: 0 auto;
    background:url(images/bgfooter.png) top right no-repeat;
}
</style>

    <div class="header"></div>
    <div class="content">
        <div class="container"> </div>
    </div>
    <div class="footer"></div>

</body>
</html>

Tag HTML diatas sementara akan menghasilkan dokumen website seperti gambar dibawah. Apabila tidak tampil seperti gambar dibawah berarti ada yang salah dengan presisi width dan height pada property CSS, trus utak-atik ukuran width dan heightnya hingga mempunyai presisi yang benar.

#25 image

Div dengan atribut class content akan mengikuti isi karena tidak dipatok dengan ukuran height. sedangkan isi content sendiri kita masukan didalam container. bila kita menambahkan beberapa heading <h1> dan paragraph <p> pada content maka kita akan mendapatkan tampilan sebagai berikut click untuk memperbesar

Gambar Jadi Bagian 1

Anda bisa melihat demo atau mendownload hasil yang saya buat untuk pembelajaran anda

 

Untuk bagian pertama sampai disini dulu.. dibagian kedua nanti kita akan belajar membuat menu navigasi dan mengisi kolom content dari website sehigga content kita tidak hanya paragraph saja. Bila anda ingin mengetahui lebih lanjut dan suka dengan artikel saya ini silahkan subscribe RSS nya. Terimakasih untuk kunjungannya

Update

Bagian kedua bisa anda lihat di artikel berikut : Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 2

Anda juga mungkin suka dengan artikel ini :

  1. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3
  2. Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)
  3. Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
  4. 3 Langkah Membuat Desain Web Responsif (Responsive Design)
  5. Tips dalam Menuliskan CSS yang Baik

Komentar

  • Rahmat (07 Feb 2016 10:52:20)

    Assalamualaikum gan sory ganggu , mau tannya ada engga cara lain selain ngetik untuk masukin kode ke dreamwever ???

  • Obat Perangsang Wanita (30 Jan 2015 06:15:42)

    Terima Kasih Gan Atas Informasinya

  • Niko (09 Jan 2014 01:45:47)

    makasih mater, gue udah bisa yg tahap 1 ini :)
    sekarang lanjut ke tahap 2

  • ary (28 Jun 2013 03:22:44)

    keren,, tapi beda-beda dikit sama yang dicontohin :D.. thank you tutorialnya gan ..

  • gondang (05 Apr 2013 03:58:47)

    bookmark dl gan

» Muat Komentar Sebelumnya (48 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff