Kamis, 17 November 2011

CONTOH PANDUAN SEDERHANA MEMBUAT WEBSITE DENGAN DREAMWEAVER 8


Dreamweaver merupakan sebuah program WEB EDITOR, yang memiliki fungsi sebagai suatu program yang dapat membantu kita untuk mendesain web secara visual, mengedit file-file website, ataupun juga mengelolah website beserta halaman webnya.

Program Dreamweaver ini merupakan program yang lebih fleksibel dibandingkan dengan program web editor lainnya, program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunanya. Saat ini Dreamweaver telah dimiliki oleh perusahaan sofware terkemuka yaitu Adobe.Sebelumnya Dreamweaver merupakan program dari Macromedia, Macromedia sendiri meluncurkan versi terakhir Macromedia Dreamweaver yaitu versi 8.

Persiapan Belajar Membuat Website

1.Program Web Editor
     Sebelum kita membuat halaman website, kita membutuhkan suatu program editor. Ada beberapa program editor yang bisa digunakan untuk pembuatan halaman website (web page). Beberapa contohnya yaitu: Microsoft Frontpage, Macromedia Dreamweaver, Notepad.

2.Server local, bisa menggunakan XAMPP atau WAMP
   
 Ilustrasi Meng-install XAMPP


Mengenal Area Kerja Dreamweaver

Buka program Dreamweaver yang ada pada komputer anda, Seperti biasa untuk membukanya bisa melalui Start Menu > Macromedia > Dreamweaver.

Tampilan pertama kali,  pada saat kita membuka program Dreamweaver"
Saya asumsikan bahwa anda telah berhasil membuka programnya. OK untuk selanjutnya kita mulai masuk ke arae kerja Dreamweaver, Caranya silakan klik "HTML" pada kolom "Create New".

Setelah itu akan muncul halaman kerja dari Dreamweaver, seperti nampak pada gambar dibawah ini :

"Gambar area kerja Dreamweaver"

Untuk selanjutnya untuk praktek kali ini, kita akan banyak menggunakan mode desain, oleh karena itu kita ubah area krjanya menjadi area kerja "desain", berikut langkah-langkahnya :

Klik menu "Windows" > "Workspace Layout" > lalu pilih "Designer" .

setelah itu akan muncul halaman dalam format "designer", seperti terlihat pada gambar dibawah ini :

"Gambar area kerja Dreamweaver"

Berikut ini saya jelaskan fitur-fitur yang ada pada area kerja tersebut :
  • Insert Bar : Bar menu yang mengandung tombol-tombol untuk menyisipkan berbagai macam objek seperti image, tabel dan layer ke dalam dokumen.
  • Document Toolbar : Berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari Document Window.
  • Document Window : Berfungsi untuk menampilkan dokumen dimana anda sekarang bekerja.
  • Files Panel : Memperlihatkangroup file berdasarkan site yang dikerjakan.
  • Tag Selector : Berfungsi menampilkan hirarki tag disekitar pilihan tag aktif pada desain view.
  • Property Inspcetor : Digukan untuk melihat dan mengubah berbagai properti objek dan teks.
  • Site Panel : Digunakan untuk mengatur file dan folder yang membentuk situs web anda.
Melihat Tampilan di Dreamweaver


Draemweaver adalah program yang sangat fleksibel, program ini mengijinkan anda untuk melihat dokumen yang sedang anda kerjakan dalam tampilan yang berbeda, yaitu dalam 3 mode tampilan :
1. Mode Code
2. Mode Split
3. Mode Design


Nantinya, anda bisa berpindah antara tampilan ini dengan meggunakan tiga tombol icon yang trdapat diatas sebelah kiri monitor.


Dalam Mode Code, Dreamweaver menampilkan halaman web dalam bentuk format HTML code. Jika anda sudah dengan HTML, anda bisa mengedit halaman web melalui mode code ini.





"Gambar Tampilan Mode Code"


Mode Split membagi layar dalam setengah tampilan, tampilan code HTML untuk halaman web dibagian atas, dan setengahnya lagi tampilan Design View yang bisa kita edit.



"Gambar Tampilan Mode Split"


Mode Design, Menampilkan area kerja Dreamweaver dalam bentuk full Design, formatnya seperti pada saat kita menggunakan MS Word.



"Gambar Tampilan Mode Design"


OK, saya kira setelah anda membaca sedikit penjelasan diatas, tentunya anda sudah bisa membayangkan seperti program Dreamweaver ini, yuk kita mulai coba praktekan bagaimana membuat website dengan menggunakan Dreamweaver.


Saat Membuat Website
Persiapan : Siapkan sebuah folder untuk menyimpan hasil praktek nanti, buta folder bernama "website". Nantinya simpan semua file-file hasil praktek anda pada folder tersebut.


Untuk file-file gambar, sebaiknya disimpan pada folder khusus yang bernama  "images" , folder images simpan di dalam folder "website" yang sebelumnya sudah anda buat.


Sebelum kita membuat website menggunakan program Dreamweaver, saya akan mengajarkan terlebih dahulu, cara membuat image header website dengan menggunakan program Adobe Photoshop.


Image Header biasanya diletakan dibagian paling atas tampilan sebuah website, berisi alamat website, nama website, logo website, dan slogan atau jargon.


Membuat Layout Website dengan Tabel


Coba Anda Perhatikan gambar dibawah ini :





Gambar diatas adalah sebuah layout website, sebelum membuat website sangat penting bagi kita untuk membuat sebuah layout, hal ini dilakukan untuk membuat sebuah gambaran atau perencanaan pembuatan website. Layout ini nantinya akan kita kembangkan menjadi sebuah website utuh.


Pembagian Layout 


Biasanya untuk istilah penamaan pada pembagian layout dikenal dengan 4 istilah penyebutan :
1. Header, ini adalah istilah untuk penamaan layout bagian atas.
2. Sidebar, ini adalah istilah untuk penamaan layout bagian samping.
3. Center/Main Page, ini adalah istilah untuk penamaan layout bagian tengah.
4. Footer, ini adalah istilah untuk penamaan layout bagian bawah.


Jenis Layout


Sebenarnya untuk membuat sebuah layout itu tergantung dari si pembuat websitenya (web design), biasanya pembuatan layout disesuaikan dengan kebutuhan tampilan dari websitenya, juga disesuaikan dengan memperhatikan kontek/isi website itu nantinya, berikut ini saya berikan contoh jenis layout standar :


1. Layout 2 kolom navigasi kiri.


2. Layout 2 kolom navigasi kanan.


3. Layout 3 kolom navigasi kanan kiri.


4. Layout 3 kolom navigasi kanan.


Membuat Layout Website


Pada pembahasan ini kita akan mempelajari pembuatan layout menggunakan Dreamweaver, berikut langkah-langkahnya :


Pada Insert Bar, anda klik icon "Tabel"


Setelah itu akan muncul Tabel Properties, anda isi dengan data berikut ini :


Rows: 2 Columns: 1
Table width: 780 pixels
Border Thickness: 0
Cell Padding: 0 Cell Spacing: 0


Berikut ilustrasinya :



Setelah itu, akan muncul satu buah tabel yang terdiri dari  2 baris (rows), dan 1 kolom (columns) berikut ilustrasinya:



Selanjutnya anda simpan kursor mouse di baris pertama tabel tersebut, pilih icon "image" pada insert bar.


Setelah itu akan muncul kotak dialog untuk menampilkan image header yang sebelumnya telah kita buat, silakan anda buka image tersebut.
keterangan:
1.Cari file image headernya, misanya ada di folder "image".
2.Pilih file yang akan di tampilkan.
3.Setelah itu klik ok.


Jika sudah maka file image header akan tampil di halamankerja Dreamweaver kita, berikut ilustrasinya.



Langkah selanjutnya simpan kursor mouse pada baris kedua, setelah itu buatlah tabel baru pada kolom tersebut, dengan rincian berikut ini :



Setelah melakukan langkah diatas, berikut hasilnya :





"Tabel baru yang telah berhasil di tambahkan "
 selanjutnya atur lebar kolom ke-1 baris ke-3 menjadi "530px", caranya:
simpan kursor pada kolom ke-1 baris-3 .
Lalu atur lebar kolomnya melalui  "properties" , berikut ketentuannya : Lebar (W) : 530, ver : Top


Selanjutnya atur lebar kolom ke-2 baris ke-3 menjadi "250px",caranya:
simpan kursor pada baris ke-2 baris ke-3.
Lalu atur lebar kolomnya melalui bar "properties" , ketentuannya:
Lebar (W) : 250, Vert : Top, Horz : Center


Menambahkan teks ke dalam layout
Sebagai contuoh, kita akan menambahkan teks berikut kedalam tabel tepatnya kedalam kolom ke-1 baris ke-2.
Selamat Datang di AbdGaniComputers.com.


AbdGaniComputer adalah perusahaan yang bergerak di bidang penjulan online, tepatnya penjualan komputer, laptop dan perangkat hardware lainnya. AbdGaniComputer.com menyediakan perangkat yang berkualitas namun dengan harga terjangkau, tentunya AbdGaniComputer.com merupakan pilihan yang sangat tepat untuk memenuhi kebutuhan anda.


Brikut Ilustrasinya:





"Teks yang telah berhasil ditambahkan"
Selanjutnya kita beri style pada teks tersebut, misalnya kita akan ubah warna teks dan ukuran nya.


Anda blok / highlight tulisan "Selamat Datang di AbdGaniComputer.com", lalu atur format tulisannya seperti berikut :


Warna : Merah 
Ukuran Font : H2 (heading 2)


Menambahkan Image / Gambar


Selanjutnya kita akan mencoba menambahkan content berupa gambar, pada contoh kali ini kita akan tambahkan sebuah gambar pada kolom ke-2 baris ke-3, pada contoh kali ini saya akan memasukan sebuah gambar yang berukuran : 150x250 pixel.


Simpan kursor pada kolom ke-2 baris ke-3.
Pada icon "images" pada insert bar.


Temukan file images yang akan ditampilkan, lalu tekan ok.


Keterangan :
1. Cari letak file gambarnya, misalnya ada  di folder "images".
2. Pilih yang akan ditampilkan, misalnya nama file tersebut "Computer.jpg".
3. Setelah itu klik ok.


Membuat Hyperlink


Selanjutnya kita membuat sebuah hyperlink, dalam contoh kali ini kita akan menambahkan sebuah hyperlink dibawah gambar komputer yang sebelumnya kita telah masukan, caranya :

  •  Simpan kursor di kolom ke-2 baris ke-3.
  • Lalu simpan tulisan Hyperlin-nya dibawah gambar tersebut.
  • Buat tulisan "Dapatkan 1 PC Gratis Klik Disini, dan lalu blok tulisan tersebut.
  • Selanjutnya pada "Properties Bar" anda isi kolom "Link" dengan tulisan nama file yang akan dituju, misalnya "promo.html".
Membuat Tabel Baru
Selanjutnya, kita akan membuat tabel baru, yang nantinya akan di isi dengan content lainnya.

Berikut langkah-langkahnya : 
Anda simpan kursor mouse, disamping tabel pertama yang telah kita buat, lalu tekan Enter, dan pastikan posisi kursor mouse berada di bawah tabel pertama.

Lalu, pastikan kursor berpindah ke bawah tabel setelah anda Enter.

Buat tabel baru, dengan ketentuan sebagai berikut :
Rows : 3, Columns : 2, Tabel Width : 780, Border thickness : 1.

Jika sudah klik ok .

Selanjutnya lakukan "merge" pada kolom 1 dan 2 baris ke-1, cara block/highlights kedua kolom tersebut lalu "klik kanan", pilih menu "table" > "merge cells",
jika sudah berikut hasilnya :


Memberi Background Warna Pada Tabel 

Langkah selanjutnya kita akan coba memberi background warna pada tabel , berikut langkahnya :

Simpan kursor mouse pada baris ke-1, selanjutnya pilih warna untuk background yang diinginkan melalui "Bar Properties" pilih kolom "Bg".

Selanjutnya msih tetap di cells yang sama, kita akn memberikan tambahan teks "Tentang AbdGaniComputer" , lalu anda atur ukuran font-nya menjadi "16px" selanjutnya atur ukuran tinggi kolomnya (H) menjadi "25px", dan atur jenis hurufnya menjadi "Arial " ok.

Selanjutnya simpan kursor mouse pada kolom ke-1 baris ke-2, dan ikuti langkah berikut :
Atur ukuran kolomnya menjadi "250px", dan atur vert menjadi "Top".

Buat tabel baru di dalam kolom tersebut, buat tabel dengan ketentuan :
Rows :5, Columns : 1, Tabel Widht : 250, Border thickness : 0, Cellspacing : 1px.

Jika Sudah
 
Selanjutnya anda blok /highlight tabel baru tersebut, beri warna background, sesuai dengan yang di inginkan.

Menambah Link Menu
Selanjutnya kita akan membuat link menu, kita akan menyimpan link-linknya di dalam tabel yang sebelumnya   telah kita beri background. Ok.brerikut langkah-langkahnya :
Isi kolom-kolom pada tabel tersebut dengan teks-teks berikut :
* Cara pemesanan 
* Produk kami 
* Daftar harga 
* Produk terbaru 
* Promo

Pastikan penempatanya sebagai berikut :

Membuat tulisan menjadi Hypertlink.

Selanjutnya kita akan menjadikan teks tulisan menjadi hyperlink menu, caranya sama seperti yang telah saya jelaskan sebelumnya.

Jika sudah berikut hasilnya :


Ok, untuk teks menu yang lainnya silakan anda buat sendiri, dengan mengaju kepada contoh yang sudah saya beritahukan sebelumnya tentang bagaimana cara membuat link menu.

Menambahkan Content Berupa Teks
Selanjutnya kita akan mencoba menambahkan content berupa teks/tulisan yang terdiri dari beberapa pargraf, contoh ini akan memberi gambaran pada untuk nantinya bisa di aplikasikan jika anda akan menambahkan content berupa artikel dan sejenisnya.

Kita mulai,  berikut langkah-langkahnya :
Simpan kursor mouse pada kolom ke-2 baris ke-2.
Lalu masukan texs berupa tulisan yang terdiri dari beberapa paragraf pada kolom tersebut, sebagai contoh kita akan memasukkan text berikut :
Cara Pemesanan 
Kami melayani pembelian untuk seluruh wilayah Indonesia. baik secara online maupun via telepon atau e-mail. kami senantiasa mencoba  untuk berbisnis secara sederhana fan mudah.

Berikut kami jelaskan cara pemasanan di AbdGaniComputer.com :

Belanja secara on-line Mneggunkan shopping Cart
1. Pilih produk yang anda beli dengan tombol di halamn produk list, tombol di halamn detail product atau halaman mana saja yang ada salah satu diantara kedua tombol itu. Maka produk yang anda pilih akan masuk ke dalam tabel shopping cart.
2. Setelah anda tekan tombol-tombol tersebut, maka barang yang akan masuk ke dalam shopping cart anda. silakan baca manual Shopping cart kami jika anda belum pernah menggunakannya atau belum pernah paham  prosesnya.

Belanja Via Telepon / Email
1. Kami juga melayani pembelian melalui telepon 085266xxxxx.
2. Anda juga bisa berbelanja dan menghubungi kami melalui email order@AbdGaniComputer.com.

Manambahkan Content di Bagian Footer

Bagian footer merupakan bagian paling bawah pada sebuah website, biasanya pada bagian footer ini ditambahkan content berupa, copyright atau lisensi website, juga bisa ditambahkan beberapa menu yang di kenal dengan istilah footer Menu.

















4 komentar:

  1. mbak saudaranya mitha the virgin ya?

    BalasHapus
  2. mantap..........perbanyak lg yach boyyyyyyy postinganny

    hehehhehe

    BalasHapus
  3. Bagus-----tapi kok image-nya nggak bisa di klik kenapa ya...

    BalasHapus
  4. Bagus, sudah bisa kedepannya dengan yang lebih bagus lagi.

    BalasHapus