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:
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:
atau
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
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
Buka dahulu program Adobe Dreamweaver
Lembar Kerja Adobe Dreamweaver
Untuk manajemen dalam
membuat website, lakukan langkah berikut Klik Site -> New Site
Akan masuk jendela
baru sbb:
pada kolom site name
silahkan isikan nama situs anda, misal Latihan, untuk local site folder adalah letak menyimpan
seluruh dokumen (file-file) website anda.
Klik tombol pada
sebelah kanan, maka akan muncul lokasi untuk menyimpan seluruh file anda sbb
Sebagai contoh, lokasi
di F:/Websiteku
Lihat pada sidebar
kanan Adobe Dreamweaver anda maka akan muncul folder tempat anda menyimpan
dokumen website anda
Sampai di sini anda
sudah berhasil melakukan seting root dokumen untuk website anda
Next step, adalah
membuat dokumen HTML untuk website kita
Klik pada menu
File->New, lalu pilih Blank Page->HTML lalu klik Create
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:
Buat tabel dengan cara klik Insert->table, gunakan parameter sbb:
klik OK maka akan
muncul tampilan sbb:
Untuk menyesuaikan
dengan layout 1, maka pada baris paling atas (untuk header) lakukan merge cell,
dengan cara:
Maka akan menjadi:
Karena kita akan
menggunakan banyak gambar, alangkah baiknya jika kita membuat folder khusus
untuk lokasi penyimpanan gambar, dengan cara sbb:
Pilih New Folder, beri
nama folder baru dengan nama gambar
Selanjutnya adalah
buka direktori di F:/websiteku/gambar, copykan semua gambar ke folder tsb,
contoh:
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:
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 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
Buka folder gambar
pilih file header.jpg,
lalu klik OK, maka akan menjadi sbb:
Selanjutnya kita akan
membuat menu utama di kolom 1 baris ke 2
Sesuaikan parameter
seperti di atas (Horz: default, Vert:Top)
Selanjutnya kita buat tabel pada cell tsb dengan cara pilih menu insert->table dengan parameter
Selanjutnya kita buat tabel pada cell tsb dengan cara pilih menu insert->table dengan parameter
Lanjutkan dengan
membuat menu utama seperti berikut:
Selanjutnya kita akan
membuat kode menggunakan tag . Tag ini untuk
menentukan lokasi halaman yang muncul
Kita kembali ke split
view, tuliskan tag berikut pada posisi lokasi iframe
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:
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:
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
setelah kita buat file
welcome.html, kita buka kembali file index.html melalui browser:
Sekarang kita buat
file selanjutnya, profil.html dimana file ini merupakan file yang akan dituju
ketika tombol Profil pada Menu Utama diklik
Sekarang kita kembali
ke halaman index.html, kita akan menautkan (link) tombol Profil ke file
profil.html sbb:
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:
lihat pada tag 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:
Pada kolom Target, isikan: isiwebsite, mengapa? coba kita lihat kembali ke atas pada tag:
lihat pada tag 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:
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.
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
0 komentar:
Posting Komentar