Belajar Menciptakan Website Dengan Photoshop Dan Dreamweaver

Ada banyak alasan mengapa orang ingin membuat websitenya sendiri. Antara lain, mereka ingin semoga tulisan-tulisan, gambar, serta suasana hati mereka sanggup dibaca oleh banyak orang atau iseng saja berguru dan siapa tau bila sudah menjadi webmasterbisa mendapatkan penghasilan perhiasan dengan membuat suatu jasa pembuatan website. Pada proyek pertama ini, kita bakal membuat Keliru satu bentuk website personal. Website ini didesain dengan nuansa full color sehingga mempunyai kesan yg menarik dan indah walaupun sanggup dibilang proyek pertama ini sangat sederhana sekali, hehehe. Walaupun demikian anda sanggup memodifikasinya sendiri sesuai dengan yg anda sukai.

Sebelum kita memulai tutorial trik membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda Musti menginstal aplikasi Photoshop dan Dreamweaver. Kedua aplikasi ini tidak gratis tapi merupakan pilihan yg sempurna untuk membuat project website, untuk membeli aplikasi ini anda sanggup men-download-nya di situs resmi adobe yaitu www.adobe.com. Mari kita memulai project pembuatan website sederhana apabila anda sudah mempunyai kedua aplikasi tersebut. Berikut merupakan hasil dari proyek Websiteku

Ada banyak alasan mengapa orang ingin membuat websitenya sendiri Belajar Membuat Website dengan Photoshop dan Dreamweaver

Membuat Disain Awal dengan Photoshop

jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, Caranyanya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height : 875 pixel Resolution : 72 pixel/inch Background Content : Transparent

Pilih rounded retangle tool pada tool panel

dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical mirip pada gambar dibawah

Pilih layer click kanan pada layer 1 (bidang yg anda buat) kemudian click gradient dan pilih gradasi warna yg anda sukai... pastikan warna bawah yaitu warna dasar putih

Hasil dari gradasi yg anda buat bakal menghasilkan gambar mirip berikut :

buatlah bidang untuk panel sajian dengan rounded retangle tool pada tool panelseperti sebelumnya beri sentuhan warna yg tidak sama dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar mirip dibawah ini

buatkan lagi sebuah bidang untuk daftar sajian yg kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yg anda buat sebelumnya putarkan hingga arah kemiringan 25⁰ dengan move tool
Ada banyak alasan mengapa orang ingin membuat websitenya sendiri Belajar Membuat Website dengan Photoshop dan Dreamweaver

kemudian copy layer bidang dengan trik tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yg telah anda buat sehingga bakal tampak mirip berikut:

Ketik daftar sajian gunakan Type Tool dengan lambang (T) pada tool panel

Isi text pada bidang untuk daftar sajian dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yg sesuai dengan cita-cita anda . Sampai tahapan ini kita sudah berhasil merancang layoutWebsiteku dengan tampilan sebagai berikut

Gunakan Slicetool
Ada banyak alasan mengapa orang ingin membuat websitenya sendiri Belajar Membuat Website dengan Photoshop dan Dreamweaver

kemudian slice Layout website menjadi 6 bab yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.

Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web

dan bakal muncul wizard mirip berikut

pada opsi dibawah save, anda sanggup menentukan format gambar yg bakal di save mulai dari gif, png, jpg.

apabila sudah menentukan sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satu folder yg anda beri nama Websiteku

Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melaksanakan mark-up atas file index.html yg telah kita save tadi dengan macromedia Dreamweaver.

Mark-Up Tag HTML dengan Dreamweaver

setelah desain web di-slice dengan photoshop, kini saatnya kita melaksanakan sedikit modifikasi dengan menggunakan Dreamweaver. dreamweaver yg saya gunakan yaitu dreamweaver versi 8 padahal kini sudah ada lho yg versi CS 4, hihi. Langsung saja jalankan aplikasi buatan Macromedia ini dan Anda bakal melihat tampilan mirip gambar dibawah ini:

buka file index.htm yg telah kita save pada sesi photoshop dengan trik pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yg 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yg dipakai untuk isi content.

Jangan Heran bila tampilan layout website menjadi hancur mirip gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi

setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda sanggup melihat Tag-tag Mark-up HTML mirip berikut :

Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), Caranyanya tambahkan tag yg berwarna merah pada tag berikut kedalam tag HTML anda.

<html> <head> <title>Untitled-1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  <style type="text/css"> .content {  background:url(images/index_06.png) bottom;  padding:20px 20px 40px 20px; } </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  <!-- ImageReady Slices (Untitled-1.psd) --> <table id="Table_01" align="center" width="700" height="377" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="94"> <img src="images/index_01.gif" width="281" height="94" alt=" Ada banyak alasan mengapa orang ingin membuat websitenya sendiri Belajar Membuat Website dengan Photoshop dan Dreamweaver"></td> <td rowspan="4"> <img src="images/index_02.gif" width="419" height="328" alt=" Ada banyak alasan mengapa orang ingin membuat websitenya sendiri Belajar Membuat Website dengan Photoshop dan Dreamweaver"></td> </tr> <tr> <td height="76"> <img src="images/index_03.gif" width="281" height="76" alt=" Ada banyak alasan mengapa orang ingin membuat websitenya sendiri Belajar Membuat Website dengan Photoshop dan Dreamweaver"></td> </tr> <tr> <td height="64"> <img src="images/index_04.gif" width="281" height="64" alt=" Ada banyak alasan mengapa orang ingin membuat websitenya sendiri Belajar Membuat Website dengan Photoshop dan Dreamweaver"></td> </tr> <tr> <td height="94"> <img src="images/index_05.gif" width="281" height="94" alt=" Ada banyak alasan mengapa orang ingin membuat websitenya sendiri Belajar Membuat Website dengan Photoshop dan Dreamweaver"></td> </tr> <tr> <td colspan="2" class="content" ></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html>

Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show Design View" kemudian isi bab kolom content dengan hal-hal yg ingin anda publikasikan pada website anda. setelah selesai save index.html, kemudian save as dengan nama file yg tidak sama about.htmlpada folder yg sama, save as lagi dengan nama file gallery.html dan yg terakhirlink.html. Sehingga kini anda mempunyai 4 (empat) file html yg tidak sama (semuanya Musti dalam folder yg sama).

Isi kolom content pada masing-masing file yg sudah anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, wacana kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama

Langkah terakhir setelah mengisi semua file yaitu menghubungkan/melink-an file yg satu dengan yg lain. Caranyanya Mudah saja. click setiap sajian link pada website kita kemudian pada properties pilih link dan click icon folder seperti sanggup dilihat pada gambar dibawah :

pilih file yg ingin di hubungkan

Lakukan hal yg sama dan hubungkan semua file... selesailah project anda, kini anda mempunyai website yg anda rancang sendiri...

Catatan Penting : Pembuatan website diatas merupakan Keliru satu trik perancangan web yg berbasis Table. selain menggunakan table sebenarnya ada trik lain yaitu dengan menggunakan Divatau gabungan keduanya Div+Table. kedua trik mempunyai plus minus masing-masing dan anda bakal mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.