Professional Documents
Culture Documents
-1-
BAB I
Pengenalan Dreamweaver
1.1 Pedahuluan
Merancang sebuah website tidak terlepas dari pembuatan desain tampilan web tersebut, karena
desain web merupakan langkah awal dari pembuatan website.
Dasar pembuatan website menggunakan bahasa HTML (HyperText Markup Language) yaitu bahasa
pemrograman dalam pembuatan web. Penggunaan HTML dalam pembuatan web tidak semua orang dapat
menggunakannya untuk mempermudah dalam pembuatan web ini kita dapat menggunakan aplikasi editor
web yang bersifat visual.
Salah satu aplikasi untuk melakukan perancangan desain web secara visual adalah Adobe
Dreamweaver. Aplikasi ini secara umum sudah sangat poluler digunakan untuk merancang desain website.
Aplikasi Adobe Dreamweaver menyediakan banyak fasilitas yang dapat memudahkan user dalam
menghasilkan sebuah website yang interaktif dan menarik.
Dreamwaver
-2-
Pada Starter Page di atas pada CreateNew pilihlah HTML, maka tampilan dari Adobe Dreamweaver adalah
sebagai berikut:
Document
Toolbar
Tag
Selector
Menu bar
Workspace
Switcher
Property
Inspector
Panel
Groups
Document
Window
Dreamwaver
-3-
Dreamwaver
-4-
Dreamwaver
-5-
Nama
Hyperlink
E-mail Link
Named Anchor
Horizontal Rule
Table
Insert Div Tag
Images
Media
Widget
Date
Server-Side Include
Comment
Head
Script
Templates
Tag Chooser
Fungsi
Untuk membuat link pada objek
Untuk memberikan link ke e-mail
Untuk memberikan nama anchor
Untuk menyisipkan garis secara horizontal
Untuk membuat table
Untuk menyispkan Tag Div
Untuk menyisipkan gambar
Untuk menyisipkan media, seperti file flash(SWF,FLV,dll)
Untuk menyispkan komponen web
Untuk menyisipkan tanggal
Untuk menyisipkan file dokumen Server-Side
Untuk menyisipkan komentar pada script HTML
Untuk menambah elemen pada head section dalam
dokumen, seperti Meta, keyword, Description
Untuk menyisipkan JavaScript
Untuk membuat template
Untuk menyisipkan tag seperti tag HTML, ASP.NET, PHP,
JSP, dan lain-lain
Nama
Insert Div Tag
Draw AP Div
Spry Menu Bar
Spry Tabbed Panels
Spry Accordion
Spry Collapsible Panel
Table
Fungsi
Untuk menyisipkan Div Tag
Untuk membuat layer
Untuk membuat tombol menu pada halaman web
Untuk membuat panel tab pada halaman web
Untuk membuat panel accordion
Untuk membuat tab yang didalamnya terdapat isi dokumen dan
ditampilkan ke bawah
Untuk membuat tabel
Dreamwaver
-6-
Nama
Form
Text Field
Hidden Field
Textarea
Checkbox
Checkbox Group
Radio Button
Radio Group
List/Menu
Jump Menu
Image Field
File Field
Button
Label
Fieldset
Spry Validation Text Field
Spry Validation Textarea
Spry Validation Checkbox
Spry Validation Select
Spry Validation Password
Fungsi
Untuk membuat form
Untuk membuat text field pada form
Untuk membuat hidden field pada form
Untuk membuat Textarea pada form
Untuk membuat satu checkbox pada form
Untuk membuat lebih satu checkbox pada form
Untuk membuat radio button pada form
Untuk membuat radio button secara group pada form
Untuk membuat daftar atau menu pada form
Untuk membuat jump menu pad form
Untuk memasukkan gambar pada form
Untuk membuat pencarian file
Untuk membuat tombol Submit atau Reset pada form
Untuk membuat label pada form
Untuk membuat fieldset
Untuk membuat text field model spry
Untuk membuat Textarea model spry
Untuk membuat checkbox model spry
Untuk membuat daftar atau menu model spry
Untuk membuat password field
Dreamwaver
-7-
Nama
Bold
Italic
Strong
Emphasis
Paragraph
Block Quote
Preformatted Text
Heading 1
Heading 2
Heading 3
Unordered List
Ordered List
List Item
Definition List
Definition Term
Definition Description
Abbreviation
Acronym
Characters
Fungsi
Untuk membuat teks menjadi tebal
Untuk membuat teks menjadi miring
Untuk membuat teks menjadi tebal
Untuk membuat teks menjadi miring
Untuk mengatur paragraf
Untuk menandai teks seperti catatan penting
Untuk membentuk paragraf seperti pada script
Untuk membentuk teks dalam format heading 1
Untuk membentuk teks dalam format heading 2
Untuk membentuk teks dalam format heading 3
Untuk membuat daftar dalam kondisi simbol
Untuk membuat daftar dalam format simbol
Untuk memasukkan daftar
Untuk mendefinisikan sesuatu
Untuk memasukkan definition term
Untuk memberikan penjelasan pada teks
Untuk memberikan penjelasan mengenai singkatan pada
teks yang ditunjuk
Untuk membuat akronim
Untuk menyisipkan karakter tertentu pada teks, seperti
ganti baris, copyright dan lain-lain
Dreamwaver
-8-
Dreamwaver
-9-
Property Inspector , Kita dapat dengan mudah mengatur atau mengedit properti objek, yaitu dengan
memasukkan nilai-nilai parameter yang disediakan. Secara umum, Property Inspector terdiri dari Page
Property, Image Property, Table Property, dan Form Property.
1.2.10.1 Page Property Inspector
Setiap membuka aplikasi Dreamweaver, Property Inspector yang pertama tampil adalah properti
halaman untuk mengelola teks, paragraf, maupun style (CSS). Page Property Inspector tersebut terbagi
menjadi dua pilihan, yaitu HTML dan CSS. Untuk memilih salah satu Property Inspector tersebut, Kita dapat
menekan tombol yang ada di sebelah kiri dari Property Inspector.
Dreamwaver
- 10 -
Image menampilkan besar file gambar dan ukuran dari gambar tersebut.
Src berfungsi untuk menampilkan lokasi file gambar. Untuk mengganti gambar, tekan tombol , lalu pilih
gambar yang diinginkan.
Link berfungsi untuk memberikan link pada gambar.
Alt berfungsi untuk memberikan keterangan berupa teks pada gambar
Edit berfungsi untuk mengedit gambar dengan memanggil program eksternal, ataupun secara
langsung.
Class berfungsi untuk menyisipkan class dari CSS Style pada gambar.
Map berfungsi untuk memberikan pemetaan status atau hotspot pada area gambar.
V Space berfungsi untuk memberikan jarak pada gambar dengan objek lain secara vertikal.
H Space berfungsi untuk memberikan jarak pada gambar dengan objek lain secara horizontal.
Target berfungsi untuk memberikan target link, biasanya digunakan pada frame.
Original berfungsi untuk memasukkan gambar berformat *.psd dan *.png.
Border berfungsi untuk memberikan border pada gambar.
Align berfungsi untuk mengatur posisi gambar.
Dreamwaver
- 11 -
Berikut contoh hasil tampilan jendela kerja yang telah diubah melalui Workspace Switcher menjadi Classic.
Dreamwaver
- 12 -
BAB II
Mengenal Website
Website terdiri dari kumpulan file-file yang saling terkait dan tersimpan dalam satu folder. Website
merupakan lokasi yang akan digunakan untuk mengumpulkan file-file halaman web.
File-file dokumen web tersebut terdiri dari gambar, script CSS, audio dan lain sebagainya. Dengan
banyaknya file-file yang membentuk suatu website, maka perlu dilakukan pengelolaan file yang baik. Pada
Adobe Dreamweaver terdapat fasilitas untuk mengelola file-file dokumen web tersebut yang dikenal
dengan Site. Dengan fasilitas tersebut akan memudahkan Kita dalam mengelola file-file yang terlibat dalam
pembentukan suatu website.
2.1. Membuat Website
Website merupakan lokasi atau tempat untuk mengumpulkan file-file dokumen web dapat dibuat
dengan mudah. Sebelum membuat website, terlebih dahulu untuk mendefinisikan website tersebut, Kita
dapat menggunakan Site Definition Wizard melalui kotak dialog Manage Sites. Untuk menampilkan kotak
dialog Manage Sites dapat dilakukan dengan salah satu cara berikut:
Setelah Manage Sites dipilih, maka akan tampil kotak dialog Manage Sites seperti berikut:
Pilih New, akan tampil kotak dialog Site Definition. Isikan nama site pada kotak What would you like to
name your site? Misalkan websiteku, dan pada What is the HTTP Address (URL) of your site? bawahnya
masukan path nama foldernya, kemudian save done untuk menutup kotak dialog.
Dreamwaver
- 13 -
Setelah done, maka akan tampil local files site kita pada File di bawah kanan.
1. Pada panel INSERT Common klik Table, maka akan tampil gambar berikut:
Dreamwaver
- 14 -
2. Isilah Rows: 8, columns: 3, table width: 700 yang lainnya nol, kemudian klik OK, maka akan tampil tabel
pada Dokumen window seperti berikut:
3. Kemudian gabungkan sel-sel di atas untuk membuat template dengan cara blok sel-sel yang akan
digabung kemudian klik kanan pada sel tersebut kemudian pilih Table Merge cells
Dreamwaver
- 15 -
5. Kemudian Ketikan teks pada masing-masing sel sehingga hasilnya seperti berikut:
6. Untuk mengatur align center dapat dilakukan dengan merubah properties HTML kemudian pada Horz
diset center seperti gambar berikut:
7. Pengaturan style teks dapat menggunakan CSS, misalkan kita akan memformat teks pada banner atas,
kita dapat membuat CSS pada panel CSS STYLES seperti gambar berikut:
8. Untuk membuat CSS, pada panel CSS STYLES pilih All kemudian klik New CSS Rule (
tampil gambar di bawah ini:
), maka akan
Dreamwaver
- 16 -
9. Pada Selector Type: pilih Class, Selector Name: ketik : format, Rule Definition: (New Style Sheet File),
kemudian Klik OK makan akan tampil seperti berikut:
10. Simpanlah dengan nama : format, kemudian klik Save maka akan tampil seperti berikut:
11. Aturlah style pengaturan teksnya mulai dari jenis font, size, warna dan lain-lain, kemudian klik OK maka
akan muncul jenis format baru pada CSS Style seperti gambar berikut:
Dreamwaver
- 17 -
12. Untuk merubah teks banner atas menjadi seperti style pada CSS kita dapat melakukannya dengan cara
blok teks banner, kemudian pada Properties CSS, Targeted Rule: pilih format, maka tampilan teks
tersebut akan berubah sesuai dengan format yang kita atur tadi seperti gambar berikut:
13. Untuk mengatur style menu sebelah kiri: Home, AboutUs, Product dan ContactUs, kita dapat membuat
format CSS baru dengan membuat New CSS Rule ( ), kemudian akan tampil gambar berikut:
14. Pada Selector Type: pilih Class, Selector Name: ketik : Menu_kiri, Rule Definition: format.css,
kemudian Klik OK makan akan tampil seperti berikut:
Dreamwaver
- 18 -
15. Setelah diatur formatnya kemudian klik OK, maka akan tampil seperti berikut:
16. Untuk edit style dapat dilakukan dengan menyorot nama formatnya kemudian kli Edit Style( ) dan
hapus style dengan menekan Unlink ( ).
17. Untuk merubah format menu kiri dengan cara yang sama pada teks banner kita dapat melakukannya
dengan merubah Properties CSS, pada Targeted Rule : pilih Menu_kiri seperti gambar berikut:
18. Teks yang lain dapat diubah formatnya denga cara yang sama seperti di atas.
Dreamwaver
- 19 -
19. Untuk memasukkan gambar pada banner dapat dilakukan dengan cara klik Menu Insert Image,
kemudian pengaturannya dapat diset pada Propertiesnya seperti gambar berikut:
20. Untuk pewarnaan background dapat dilakukan dengan mengatur Properties pada Sel tabel HTML,
Pewarnaan dapat diubah pada bg (background seperti berikut:
21. Untuk membuat link pada menu home lakukan dengan cara blok teks menu Home kemudian pada
properties HTML, Linknya di browse dengan file yang akan dituju seperti berikut, kemudian buatlah link
menu yang lainnya sesuai dengan halaman tujuan.
Dreamwaver
- 20 -
22. Untuk link ke web di internet dapat kita lakukan dengan mengetikan alamat dari websitenya seperti
berikut:
23. Untuk menambahkan background pada halaman dapat kita lakukan dengan cara memilih pada menu
Modify Page Properties seperti gambar berikut:
24. Pada kotak dialog di atas kita dapat merubah background dengan warna ataupun gambar, setelah
memasukkan gambarnya kemudian Ok maka halaman web kita akan menampilkan backgroundnya.
25. Simpanlah halaman web di atas dengan nama home.html
Dreamwaver
- 21 -
Latihan
Buatlah halaman lainya dengan nama file AboutUs.html, Produk.html, ContactUs yang isinya menawarkan
suatu produk dengan tampilan menu-menu teks dan gambar kemudian masukkan linknya ke masing-masing
halaman. Misalkan tampilannya seperti gambar berikut:
a. AboutUs.html
b. Product.html
c. ContactUs.html