Cara Membuat Website dengan Dreamweaver CS6 - Membuat website dengan Dreamweaver dapat dikatakan cukup mudah. Sobat tidak perlu menghafal script-script HTML yang cukup merepotkan. Nah berikut ane berikan cara membuat website dengan Dreamweaver. Monggo diikuti ya sob..
Pada latihan kali ini kita akan belajar membuat website sederhana menggunakan Adobe Dreamweaver CS6. Langkah awal dalam membuat website adalah menetukan tema website kita. Untuk latihan kali ini kita akan menggunakan tema website pribadi.
Kita tentukan dahulu menu yang akan kita sajikan pada website kita. Sebagai contoh:
Menu utama terdiri dari: HOME, PROFIL, BERITA, GALERI, KONTAK
Layout kita buat sbb:
contoh-desain-website
atau
contoh-desain-website-2
Atau silahkan gunakan imajinasi anda untuk membuat layout website yang akan anda buat.
Keterangan:
Home adalah halaman awal website
Profil dapat diisi mengenai profil anda
Berita dapat diisi dengan berita pada hari ini
Galeri dapat diisi gambar-gambar atau foto-foto kegiatan
Kontak dapat diisi alamat dan nomor telepon yang dapat dihubungi
Untuk membuat website tsb berikut langkah yang dapat dilakukan:
Buka dahulu program Adobe Dreamweaver
Lembar Kerja Adobe Dreamweaver
lembar-kerja-dreamweaver
Untuk manajemen dalam membuat website, lakukan langkah berikut Klik Site -> New Site
step2
Akan masuk jendela baru sbb:
jendela-manajemen-situs
pada kolom site name silahkan isikan nama situs anda, misal Latihan, untuk local site folder adalah letak menyimpan seluruh dokumen (file-file) website anda.
cara-menyimpan-dokumen-dreamweaver
Klik tombol pada sebelah kanan, maka akan muncul lokasi untuk menyimpan seluruh file anda sbb
lokasi menyimpan file
Sebagai contoh, lokasi di F:/Websiteku
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/lokasi-menyimpan-file-website.png
Lihat pada sidebar kanan Adobe Dreamweaver anda maka akan muncul folder tempat anda menyimpan dokumen website anda
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/sidebar-kanan.png
Sampai di sini anda sudah berhasil melakukan seting root dokumen untuk website anda
Next step, adalah membuat dokumen HTML untuk website kita
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-dokumen-html.png
Klik pada menu File->New, lalu pilih Blank Page->HTML lalu klik Create
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-dokumen-html-baru.png
Langkah selanjutnya, kita akan membuat halaman utama, simpan file ini dengan nama index.html. Buat Layout utama (layout contoh 1) sebagai berikut:
Buat tabel dengan cara klik Insert->table, gunakan parameter sbb:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-tabel-di-dreamweaver.png
klik OK maka akan muncul tampilan sbb:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-tabel-dreamweaver.png
Untuk menyesuaikan dengan layout 1, maka pada baris paling atas (untuk header) lakukan merge cell, dengan cara:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/merge-cell.png
Maka akan menjadi:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/merge-cell-3-cell.png
Karena kita akan menggunakan banyak gambar, alangkah baiknya jika kita membuat folder khusus untuk lokasi penyimpanan gambar, dengan cara sbb:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-direktori.png
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-direktori-gambar.png
Pilih New Folder, beri nama folder baru dengan nama gambar
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/direktori-gambar-dibuat.png
Selanjutnya adalah buka direktori di F:/websiteku/gambar, copykan semua gambar ke folder tsb, contoh:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/folder-gambar.png
Setelah kita masukkan gambar ke folder gambar, kita cek pada dreamweaver pada area kerja seperti di bawah, lalu klik F5 (refresh) maka gambar yang sudah dikopi akan diload oleh dreamweaver sbb:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/direktori-gambar-drefresh.png
Pada contoh hanya ada 1 file gambar yaitu header.jpg karena sebelumnya hanya mengkopi 1 file gambar.
Selanjutnya, kita simpan dahulu file ini dengan nama index.html dengan cara pilih menu File->Save
Selanjutnya kita masukkan gambar sebagai header dengan cara pada baris 1, kita sorot lalu pilih menu Insert->image sbb
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/cara-memasukkan-gambar-dreamweaver.png
Buka folder gambar
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/folder-gambar-dibuka.png
pilih file header.jpg, lalu klik OK, maka akan menjadi sbb:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-header.png
Selanjutnya kita akan membuat menu utama di kolom 1 baris ke 2
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-menu.png
Sesuaikan parameter seperti di atas (Horz: default, Vert:Top)
Selanjutnya kita buat tabel pada cell tsb dengan cara pilih menu insert->table dengan parameter
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/parameter-tabel.png
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-dengan-menu.png
Lanjutkan dengan membuat menu utama seperti berikut:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/lanjutkan-dengan-membuat-menu.png
Selanjutnya kita akan membuat kode menggunakan tag <iframe></iframe>. Tag ini untuk menentukan lokasi halaman yang muncul
membuat iframe di dreamweaver
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-iframe2.png
Kita kembali ke split view, tuliskan tag berikut pada posisi lokasi iframe
<iframe name="isiwebsite" src="welcome.html" width="585" height="400" frameborder="0" scrolling="auto"></iframe>
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-iframe-website.png
Sampai di sini halaman utama sudah kita buat. Langkah selanjutnya adalah membuat konten sesuai dengan menu yang sudah kita tentukan.
Nah, sebelumnya kita telah membuat sebuah tag iframe dengan atribut src=”welcome.html”, artinya ketika halaman index.html pertama kali diload/dibuka, maka iframe seharusnya berisi file welcome.html, jika kita lihat melalui browser (tekan F12) sbb:
pesan error di browser
muncul keterangan File not found, mengapa? karena kita belum membuat file dengan nama welcome.html. Lalu apa yang harus kita lakukan? yap, benar sekali kita harus membuat sebuah file baru lagi dengan nama welcome.html. Caranya, silahkan buat kembali dokumen HTML baru lalu simpan dengan nama welcome.html
membuat file baru dreamweaver
setelah kita buat file welcome.html, kita buka kembali file index.html melalui browser:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/cara-memasukkan-iframe-dreamweaver-ok.png
Sekarang kita buat file selanjutnya, profil.html dimana file ini merupakan file yang akan dituju ketika tombol Profil pada Menu Utama diklik
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-halaman-profil.png
Sekarang kita kembali ke halaman index.html, kita akan menautkan (link) tombol Profil ke file profil.html sbb:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/mengubah-link-pada-dreamweaver.png
Pada kolom Link, isikan: profil.html (artinya ketika tombol Profil diklik, maka halaman profil.html akan dibuka)
Pada kolom Target, isikan: isiwebsite, mengapa? coba kita lihat kembali ke atas pada tag: <iframe name="isiwebsite" src="welcome.html" width="585" height="400" frameborder="0" scrolling="auto"></iframe>
lihat pada tag <iframe name="isiwebsite"……></iframe> artinya file profil.html akan ditampilkan pada iframe isiwebsite, sehingga jika kita buka file index.html pada browser dan kita klik pada tombol Profil, maka:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/selesai.png
nah sudah terlihat bukan halaman website kita? eit ada yang kelupaan, kita belum menautkan tombol Home…hmmm kira-kira ke mana ya menautkan tombol Home ini?? ya benar, tombol Home ini kita tautkan ke file index.html
Sekarang coba klik tombol Home atau Profil, maka halaman website kita akan berubah bukan?
Tugas anda sekarang adalah membuat halaman yang lain, yaitu halaman Berita, Galeri dan Kontak. Lakukan langkah sama seperti di atas. Untuk konten silahkan gunakan imajinasi anda. Selamat belajar.
Nah mudah bukan cara membuat website dengan Dreamweaver CS6
Materi Download: Header
Download Tutorial
Sumber

21 komentar:

  1. lihat dan download

    http://ngawidian.blogspot.com/2014/01/e-book-photoshop-tutorial-logo-windows-7.html

    BalasHapus
  2. izin downlod tutornya ya kang, ada tugas skolah nih
    tenq banget buat articlenya

    BalasHapus
  3. keren nih...sangat membantu untuk saya yg lagi belajar web..
    thanks..

    kunjungi juga blog saya yaa.. http://pemrogramankom.blogspot.com/

    BalasHapus
  4. sangat membantu buat ngebuat tugas akhir ni.,,,,
    makasih bnyk....

    BalasHapus
  5. makasih bnyk.
    tutorialnya bagus..

    BalasHapus
  6. terima kasih artikelnya
    kebetulan saya ingin belajar bikin web

    BalasHapus
  7. Bagus nih artikel menarik banget..

    BalasHapus
  8. Cara publish ke blogspotnya gimana gan? ane masih newbe banget. hehehe

    BalasHapus
  9. tks bxk sdrq, artikelx sangat mmbantu,smoga risqix tambah banyak, aamiin

    BalasHapus
  10. Trims bos, smoga sy bisa latihan buat web.

    BalasHapus
  11. keren,makasih iyaa infonya..
    jadi nambah pengetahuan saya tentang cara buat blog :D

    BalasHapus
  12. Cadas postingannya gan

    BalasHapus

Site search

    Link Aktif

    Page Rank
    IP

    Pengikut