Dalam modul kursus ini, kita akan berlatih membuat sebuah halaman web dengan
Dreamweaver. Untuk membuat halaman web, dibutuhkan pengetahuan dasar tentang HTML
dan CSS. Tapi keduanya tidak akan dibahas di modul ini. Tentang HTML bisa dilihat di
Modul HTML Dasar dan Modul CSS Dasar.
Sisem yang kita gunakan untuk latihan dalam modul ini adalah server web lokal yang
diinstall dengan XAMPP. Aplikasi XAMPP-nya dianggap sudah terinstall. Tutorial
menginstall XAMPP, dapat dilihat di Membuat Web Server Lokal dengan XAMPP.
Mengapa Dreamweaver
Layar Kerja Dreamweaver
Mengkonfigurasi Site (Project)
Memasukan dan Memformat Teks
Memasukan Gambar
Membuat Table
Membuat Link
Membuat CSS dengan stylesheet Internal dan Eksternal
Dalam kursus web ini, kita akan membuat halaman web yang menampilkan deskripsi produk
sebuah laptop. Materi ini tidak bermaksud untuk promosi, tetapi hanya sebagai contoh.
Kalaupun ada teks dan gambar yang dicopy/diambil dari suatu sumbernya, hak ciptanya ada
dipemilik sumber tersebut.
Mengapa Dreamweaver
Untuk membuat sebuah situs web dari nol, dibutuhkan pengetahuan dasar membuat dokumen
HTML, lengkap dengan CSS dan Javascript. Bagi seorang pemula, hal itu tidak mudah,
karena harus mengingat, atau setidaknya melihat referensi, dan mengetik tag-tag HTML ini
secara manual di text editor. Cara seperti ini juga rawan terjadi kesalahan.
Versi terakhir Dreamweaver pada saat kursus web ini dibuat adalah Dreameaver CC 2015.
Versi ini sangat lengkap dengan segudang fitur yang akan terasa manfaatnya bagi profesional
yang bekerja di web desain. Bagi pemula, fitur yang dibutuhkan hanya sedikit. Bahkan
banyaknya fitur hanya membuat bingung, dan membutuhkan resource komputer yang tinggi.
Dalam kursus web ini, akan dibahas bagaimana menggunakan Dreamweaver 8 (versi lama)
untuk membuat dokumen HTML secara lengkap. Dreamweaver versi 8 dapat dicari dengan
mudah di Internet.
Anda dapat mematikan Welcome Screen dengan memilih check-box “Don’t show again” di
sudut kiri bawah.
The Workspace
The Workspace Layout
Untuk Dreamweaver 8 tersedia 2 jenis role, yaitu Coder dan Designer. Coder adalah jenis
user yang lebih banyak membuat kode program, biasanya untuk situs dinamis dan aplikasi
web. Designer adalah user yang lebih banyak bekerja dengan desain (grafis) dan layout,
termasuk CSS.
Setelan Layout Workspace ada di lokasi menu Windows > Workspace Layout
Workspace Coder cocok untuk developer yang banyak bekerja dengan kode (server-side
script) dan Javascript.
Workspace Designer cocok untuk develper yang banyak bekerja disisi desain, seperti layout
web, CSS, gambar, dan seterusnya.
Text berisi macam-macam teks dan format tag seperti b, em, p, h1, dan ul.
The Document Window adalah jendela yang menunjukan dokumen yang sedang di edit.
Anda dapat memilih beberapa jenis tampilan, yaitu:
Design view untuk pekerjaan desain halaman web secara visual. Tampilan mirip
dengan halaman yang muncul di browser dan bisa langsung di-edit (WYSWYG).
Code view adalah halaman unuk pembuatan code, menulis langsung HTML, kode
Javascript, atau Server-side skrip seperti PHP.
Code and Design view akan menampilkan sekaligus 2 jenis view dalam satu
halaman, digunakan untuk mengedit code dan visual (desain) secara bersamaan.
Insert bar mengandung tombol untuk membuat dan menyisipkan obyek HTML, seperti
paragraph, link, table, form, media, dan potongan kode untuk web dinamis (skrip server).
Tombol tombol ini dikelompokan dalam beberapa kategori seperti Common, Layout,
Forms, Text, HTML, Application, dan seterusnya. Jika kita arahkan pointer mouse ke
tombol ini, keterangan fungsi akan muncul di bawahnya.
Common berisi obyek yang paling sering dipakai seperti hyperlink, gambar, dan table.
Layout berisi obyek yang berkaitan dengan layout seperti tables, div tags, dan frames.
Forms berisi tombol untuk membuat form dan menambahkan elemen form.
HTML berisi macam-macam tag html seperti horizontal rules, head content, tables, frames,
and scripts.
Application berisi elemen dinamis seperti recordsets, repeated regions, and record insertion
and update forms. Elemen dan kode yang tampil akan disesuaikan dengan pilihan bahasa
skrip yang digunakan. (Misalnya PHP)
The Document toolbar memiliki tombol-tombol untuk mengatur perpindahan view dan
perintah-perintah yang umum.
Code, Split, Design, pilihan yang ditampilkan di windows dokumen, apakah Code, Design,
atau Split (keduanya).
Title, Judul halaman web yang sedang dikerjakan, akan muncul di browser bar.
Validate Markup, untuk memvalidasi markup di dokumen yang sedang dibuka
File Management, untuk mengupload halaman ke situs/remote
Priview di Browser, untuk membuka dokumen yang sedang dikerjakan ke browser
Opsi Tampilan, untuk mengatur setting tampilan
Tag selector adalah salah satu tool yang paling sering dipakai dan sangat berguna
untuk melakukan select tag HTML di Windows Documen.
The Property inspector menyediakan tool untuk memeriksa dan mengedit properti dari
elemen HTML, seperti teks atau obyek lain. Isi properti akan menyesuaikan dengan elemen
yang sedang dipilih, misalnya untuk elemen image maka properti yang akan muncul adalah
file path to the image, width dan height of the image, border, alt, align, dan lain-lain.
Dalam Dreamwaeaver, terdapat fitur untuk mengelola proyek, disebut Site. Fitur ini bisa
Anda pakai atau bisa tidak. Fitur Site akan memudahkan dalam mengelola file, aset dan
proses upload ke remote server.
Membuat Halaman Web dengan
Dreamweaver
Mengkonfigurasi Site (Project)
Berikut adalah langkah-langkah menyiapkan Site nya.
6. Klik Next
7. Pada pertanyaaan “.. work with your file: “, pilih: Edit and test locally. Kita akan
menyimpan file-file web di folder XAMPP dan langsung di tes di komputer ini.
8. Pada “Where on your computer do you want to store your files?”, isi dengan :
C:\xampp\htdocs\laptop\. Jika folder ini belum ada, buatlah terlebih dahulu dilokasi
tersebut.
9. Klik Next
10. Untuk root site, isi dengan: http://localhost/laptop/
11. Klik tombol Test URL, jika sukses muncul pesan The URL Prefix test was
successfull.
12. Klik OK, kemudian klik Next
13. Pada pilihan “..do you copy it to another machine? …”, pilih: Pilihan No untuk
sementara, dapat diubah kemudian.
16. Setelah klik Done, nama situs dan lokasi folder akan muncul di panel
Files.
Coder
2. Pilihan ini akan memindahkan seluruh Panel ke-kiri. Silahkan coba Workspace
Layout lain yang lebih cocok bagi Anda.
7. Simpan kursor pada Windows Visual, kemudian klik menu Edit > Paste
8. Klik menu File > Save atau tombo Ctrl+S
9. Simpan dengan nama: asus-n550jv.html
10. Nama file akan muncul di bagian panel Files dan tab di atas Window Document
11. Berikutnya, perhatikan Windows Code. Kita bisa lihat bahwa secara otomatis
Dreamweaver akan menambahkan tag HTML ke dalam teks. Hal tersebut sangat membantu,
terutama bagi pemula yang belum terlalu familiar dengan kode-kode HTML.
Memasang Tag Heading HTML
Pada dokument HTML, tag Heading, H1, H2, H3, dan seterusnya, dipakai untuk membuat
head dari dokumen atau paragraf.
1. Klik pada Window Code untuk menyimpan kursor pada teks, misalnya di tulisan
ASUS N550JV.
2. Klik Panel Properties
3. Klik tag inspektor
<p>
1
5. Lakukan penggantian tag, untuk beberapa kata berikut:
1. Incredible (semua), menjadi Heading 4
2. Beauty, Sound, Response, Touch, menjadi Heading 2
3. “Notebook hiburan …” , menjadi Heading 3
4. “Desain aluminium … “ , menjadi Heading 3
5. “SonicMaster Premium … “ menjadi Heading 3
6. “Teknologi dengan sentuhan … “ menjadi Heading 3
6. Untuk menampilkan hasilnya, klik pada Document Toolbar, pilih tombol Preview in
Browser
Membuat Daftar (List) HTML
1. Blok teks mulai kalimat “Window 8 atau .. s/d …untuk kesan mewah”
2. Klik tombol Unordered List pada panel Properties
3. Perhatikan kode HTML yang baru dibuat
Untuk melihat hasil kerja kita sampai saat ini, buka alamat: http://localhost/laptop/asus.html
atau dari document toolbar
2. Beri nama images. (Nama folder bebas, tapi umumnya menggunakan nama: assets
atau images).
3. Tambahkan satu baris kosong dibawah judul dengan cara: posisikan kursor di ujung
kanan judul, kemudian klik tombol [Enter]
4. Simpan cursor di baris yang baru, klik tombol Insert Image dari Insert Panel
13. Tambahkan sisa gambar yang lain pada semua bagian halaman web ini.
14. Tampilan akhir kira-kira akan seperti berikut:
Menambahkan Link
Link akan ditambahkan dibawah daftar fitur N550 JV.
1. Posisikan kursor di bawah daftar, kemudian klik Enter untuk membuat baris baru
2. Tambahkan teks “Download Product Guide”, kemudian blok.
3. Pada Panel Properties, isi link dengan:
http://www.asus.com/id/Static_WebPage/download/
Page Properties dialog box memiliki 5 kategori terdaftar di kolom sebelah kiri: Appearance,
Links, Headings, Title/Encoding, and Tracing Image. Pada panel Properties, klik Page
Properties.
Untuk menggunakan Page Properties, klik salah-satu kategori, kemudian lakukan perubahan
yang diinginkan, setelah itu klik Apply untuk melihat perubahan yang terjadi, atau klik OK
untuk menyimpan hasil perubahan.
Appeareance
o Page Font: Verdana, Arial, Helvetica, sans-serif
o Size:14
Links
o Link Font: (Same as page font)
o Link Color: #0033CC
Headings
o Page Font: Georgia, Times New Roman, Times, serif
Title: Asus N550JV – Laptop Hiburan dengan 4 Speaker dan Layar Full HD IPS
Setelah disimpan, setelan Page Properties ini akan disimpan sebagai CSS. Buka/expand panel
CSS => CSS Styles => All.
Buka Document Window : Code, kita bisa melihat kode yang ditambahkan oleh Page
Properties, dibagian <head> HTML.
Seperti kita lihat pada kode diatas, semua, thye yang dipasang berbasis pada tag: body, td, th,
a, h1, h1, h2, h3, h4, h5, h6.
7. Klik OK.
CSS
Memasang Style
1. Pilih teks yang akan dipasang style, milsanya pada paragraf ke dua, dengan cara
melakukan blok atau klik tombol tag selector diatas kotak Panel
Properties
Mengedit Styles
Anda dapat mengedit style yang sudah ada.
File
Panel Properties.
Baik, itulah tutorial dasar menggunakan Dreamweaver versi-8 untuk membuat halaman web
secara mudah. Dalam tutorial yang akan datang, kita akan bahas bahas bagaimana
menggunakan fitur-fitur untuk membuat sebuah web dinamis. Tentunya dengan
menggunakan tools yang lebih baru, versi CS-5 atau versi CS-6