MEMBUAT WEBSITE MENGGUNAKAN ADOBE DREAMWEAVER CS6 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: HEADER WEBSITE MENU UTAMA: ::Home ::Profil ::Berita ::Galeri ::Kontak ISI WEBSITE MENU TAMBAHAN (Bisa berupa daftar link, berita, gambar, dll) FOOTER Atau HEADER WEBSITE Home | Profil | Berita | Galeri | Kontak Selamat datang! ISI WEBSITE MENU TAMBAHAN (Bisa berupa daftar link, berita, gambar, dll) 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 Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo 1
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
MEMBUAT WEBSITE MENGGUNAKAN ADOBE DREAMWEAVER CS6
Pada latihan kali ini kita akan belajar membuat website sederhana menggunakanAdobe 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, KONTAKLayout kita buat sbb:
ISI WEBSITEMENU TAMBAHAN(Bisa berupa daftar link, berita, gambar, dll)
Atau silahkan gunakan imajinasi anda untuk membuat layout website yang akan anda buat.Keterangan:Home adalah halaman awal websiteProfil dapat diisi mengenai profil andaBerita dapat diisi dengan berita pada hari iniGaleri dapat diisi gambar-gambar atau foto-foto kegiatanKontak dapat diisi alamat dan nomor telepon yang dapat dihubungi
Untuk membuat website tsb berikut langkah yang dapat dilakukan:Buka dahulu program Adobe DreamweaverLembar Kerja Adobe Dreamweaver
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo1
Untuk manajemen dalam membuat website, lakukan langkah berikut Klik Site New Site
Akan masuk jendela baru sbb:
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo2
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
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo3
Sebagai contoh, lokasi di F:/Websiteku
Lihat pada sidebar kanan Adobe Dreamweaver anda maka akan muncul folder tempat anda menyimpan dokumen website anda
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo4
Sampai di sini anda sudah berhasil melakukan seting root dokumen untuk website anda
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo5
MEMBUAT DOKUMEN HTML
Klik pada menu FileNew, lalu pilih Blank PageHTML 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 Inserttable, gunakan parameter sbb:
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo6
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:
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo7
Pilih New Folder, beri nama folder baru dengan nama gambar
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo8
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 padaarea 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.
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo9
Selanjutnya, kita simpan dahulu file ini dengan nama index.html dengan cara pilih menu FileSave sbb
lalu klik save
Selanjutnya kita masukkan gambar sebagai header dengan cara pada baris 1, kita sorot lalu pilih menu Insertimage sbb
Buka folder gambar
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo10
pilih file header.jpg, lalu klik OK, maka akan menjadi sbb:
Selanjutnya kita akan membuat menu utama di kolom 1 baris ke 2
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo11
Sesuaikan parameter seperti di atas (Horz: default, Vert:Top)
Selanjutnya kita buat tabel pada cell tsb dengan cara pilih menu inserttable dengan parameter
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo12
Lanjutkan dengan membuat menu utama seperti berikut:
Selanjutnya kita akan membuat kode menggunakan tag <iframe></iframe>. Tag iniuntuk menentukan lokasi halaman yang muncul
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo13
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>
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
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo14
diload/dibuka, maka iframe seharusnya berisi file welcome.html, jika kita lihat melalui browser sbb:
muncul keterangan File not found, mengapa? karena kita belum membuat file dengan nama welcome.html. Lalu apa yang harus kita lakukan? yap, benar sekalikita 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:
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo15
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)Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo
16
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:
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
Nah, sekarang kita lihat via browser, sudah terlihat 2 link/tautan yang berhasil kita buat
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo17
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.
Latihan membuat website dengan Adobe Dreamweaver – UPT LLK Disnakertransos Purworejo18