Cara Mengelola Isi Halaman

Web

MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML Membuat dokumen HTML kosong baru :

- Pada tampilan windows, pilih menu File > New.

Untuk membuka file HTML yang sudah ada :

- Pilih menu File > Open

Anda dapat memilih file HTML yang anda inginkan.

Membuat dokumen baru berdasarkan template :

- Pilih menu File > New from Template.

Akan tampak dialog box, daftar template - template yang ada

(anda harus membuat sebuah template terlebih dahulu sebelum

membuat dokumen baru berdasarkan template)

- Pilih salah satu template. Dokumen baru akan dibuat

berdasarkan

template tersebut.

Menyimpan dokumen :

- Pilih menu File > Save.

- Ketik nama file dan tentukan dimana anda ingin menyimpan

file tersebut.

Catatan : Dreamweaver akan secara otomatis menyimpan file

tersebut

dalam bentuk htm atau html.

- Klik button Save untuk menyimpan file tersebut.

BEKERJA DENGAN TABEL

Tabel digunakan untuk memformat data dalam posisi-posisi kolom

dan baris.

Perpotongan antara baris dan kolom dinamakan sel, dan kita

dapat

memasukkan data di dalam sel tersebut.

Memasukkan tabel

Untuk memasukkan tabel ke dalam halaman homepage, pertama-tama

letakkan kursor ke tempat yang diinginkan. Kemudian, pilihlah

satu diantara 3

cara berikut ini :

1. Klik menu Insert Table

2. Klik tombol “Insert table” pada Object Panel, kategori

Common.

3. Tekan shortcut key : Ctrl+Alt+T

Kemudian akan muncul kotak dialog Insert Table seperti ini :

Masukkan spesifikasi tabel yang diinginkan pada kotak dialog

tersebut.

1. Isikan jumlah baris pada “Rows” dan jumlah kolom pada

“Columns”.

2. Berikutnya, tentukan lebar tabel terhadap halaman. Pada

contoh gambar

di atas, tabel yang akan dimasukkan berlebar 200 persen

(“Width : 200

Percent”). Artinya, lebar tabel nantinya adalah 200 persen

dari lebar

halaman. Jika menginginkan lebar tabel dalam satuan pixel

(fixed size),

isikan jumlah pixel pada Width, kemudian gantilah kotak

dropdown yang

bertuliskan Percent menjadi Pixel. Lebar tiap kolom nantinya

dibagi sama

rata dari lebar tabel dan bisa di ubah-ubah sesuai keinginan.

Dan yang ada gambar di atas telah di ubah dari percent ke

pixel

3. Berikutnya, masukkan lebar border tabel yang diinginkan

dalam satuan

pixel. Jika dikosongi maka dianggap 0 (nol) dan tabel tidak

diberi border.

4. Jika diinginkan, masukkan Cell Padding dan Cell Spacing.

Cell Spacing

artinya jarak antar sel dalam tabel, sedangkan Cell Padding

artinya jarak

dari border sel sampai dengan isi sel. Setelah selesai, klik

tombol OK. Jika

ingin membatalkan, tekan Cancel.

Setelah menekan tombol OK, maka tabel akan dimasukkan dalam

halaman

Anda. Bentuknya kira-kira seperti ini (bisa berbeda-beda

tergantung dari

spesifikasi yang Anda masukkan tadi) :

(before)

(after)

Berikut contoh design layout web yang saya buat (cekidot).....

:

Memasukkan Flash Button

Pada Dreamweaver anda diberikan kemudahan dalam mendesain

website

yang dinamis dengan adanya button-button menu pada tampilan

dokumen

anda. Macromedia Dreamweaver dapat langsung memasukkan Flash

Button

yang sangat dinamis dan animasi dalam berbagai macam bentuk.

1. Klik kursor pada tempat dimana anda ingin memasukkan image.

Contoh :

2. Klik Insert > seret ke Media > pilih Flash Button.

Atau bisa jga dengan Klik menu flash button pada Object

panel.

3. Maka akan keluar sebuah dialog box, yang harus anda isi, dengan memilih

bentuk-bentuk button, menulis teks dan jenis hingga

ukuran teks yang akan

ditampilkan pada button tersebut, memasukkan alamat

halaman lain (link). (DI ISI SESUAI SELERA MASING’’)

4. Jika sudah semua. Kemudian Klik OK.

5. Dan jika setelah di Klik OK muncul kotag dialog seperti

ini :

Cukup di Klik OK saja (tidak di isi juga tidak apa’’).

6. Maka hasilnya akan seperti ini :

Berikut contoh Menu’’ flash button yang saya buat. (untuk

selanjutnya bisa di kreasikan menurut selera masing’’) :

Memasukkan Image atau gambar

Anda akan belajar dengan 2 cara untuk memasukkan image pada

Dreamweaver , dengan menggunakan main menu dan dengan

menggunakan Object panel.

1. Klik kursor pada tempat dimana anda ingin memasukkan image. Untuk contohnya seperti gambar di bawah ini.

2. Pilih menu Insert > Image atau bisa juga dengan memencet tombol kombinasi Ctrl+Alt+I pada keyboard.

3. Tampak dialog box untuk memilih file image, buka folder images. Pilih

file logo, pada dialog box sebelah kanan anda akan

melihat preview dari image tersebut.

4. Klik OK, maka image tersebut akan masuk pada dokumen anda.

5. Dan jika keluar kotak dialog seperti ini. Cukup di klik OK saja (tidak perlu di isi juga tidak apa’’).

6. Maka hasilnya akn seperti ini.

7. Untuk cara dengan penggunaan Object panel ; Klik button insert image

pada Object panel.

8. Maka akan tampak tampilan dialog box yang sama,

lakukan seperti

langkah sebelumnya.

Berikut contoh design layout web yang telah di beri

gambar, tulisan, serta flash button yang tadi telah kita

pelajari.

MENGGANTI WARNA PADA TEXT

Pada Dreamweaver, ada bermacam-macam dialog box, seperti juga

pada

Property inspector ada menu untuk kotak-kotak pilihan warna

untuk teks.

Anda tinggal memilih warna-warna sesuai dengan keinginan anda.

1. Pilih teks yang akan anda ganti warnanya. Contohnya seperti pada gambar di bawah ini :

2. Shadding teks tersebut (menekan tombol kiri pada mouse,

pilih teks

yang akan di ganti warnanya),

3. Lalu pindahkan kursor anda pada property inspector bar, Klik pada area warna.

4. Pindahkan kursor ke sembarang tempat, maka teks anda sudah

berganti warna.

MENGGANTI ATAU MENAMBAHKAN GAMBAR BAckGROUND DESIGN LAYOUT

WEB

Pada Property inspector bar, anda dapat mengganti atau

menambahkan gambar background layout web dengan menggunakan

Page Properties.

1. Klik Page Properties pada Property inspector bar.

2. Tampak dialog box untuk memilih file image, klik Browser.

3. Pilih file gambar, pada dialog box sebelah kanan anda akan melihat preview dari image tersebut. Lalu klik OK.

4. Kemudian klik OK lagi pada dialog box selanjutnya.

5. Maka hasilnya akan seprti ini.

MENAMBAHKAN ANIMASI FLASH Anda akan belajar dengan 2 cara untuk memasukkan animasi flash

pada

Dreamweaver , dengan menggunakan main menu dan dengan

menggunakan Object panel.

1. Klik kusor pada tempat dimana anda ingin memasukkan flash. Untuk contohnya lihat gambar di bawah ini.

2. Pilih menu Insert > Media > Flash atau bisa juga dengan memencet tombol kombinasi Ctrl+Alt+F pada

keyboard.

3. Tampak dialog box untuk memilih file flash, buka folder flash. Pilih

file flash yang berextension ‘’SWF’’, Kemudian klik

OK.

4. Dan jika keluar kotak dialog seperti ini. Cukup di klik OK saja (tidak perlu di isi juga tidak apa’’).

5. Setelah klik OK, maka image tersebut akan masuk pada dokumen anda.

6. Untuk cara dengan penggunaan Object panel ; Klik button insert flash

pada Object panel. Seperti gambar di bawah ini.

7. Maka akan tampak tampilan dialog box yang sama, lakukan seperti

langkah sebelumnya.

Catatan : Animasi flash tersebut tidak bisa kita hasilnya di Dreamweaver, namun kita bisa melihat

previewnya melalui web browser dengan cara sebagai

berikut :

1. Anda dapat melihat halaman web secara browser (Internet

Explorer, Mozilla, Chrome, dll) dengan mengklik

button Preview Browser melalui toolbar yg ada di

atas layout.

Kali ini saya akan menggunakan chrome sebagai

web browsernya. Untuk selanjutnya anda bisa

memilih sesuai selera anda masing’’.

2. Setelah pilih web browser yg anda inginkan, maka hasilnya akan seperti di bawah ini.

Membuat Hyperlink dari Property inspector

Anda dapat membuat hyperlink teks dari halaman yang dibuka ke

halaman lain menggunakan fasilitas property inspector.

1. Pilih teks yang akan anda hyperlink.

2. Shadding teks tersebut (menekan tombol kiri pada mouse, pilih teks

yang akan di link). Misalnya tulisan baca selengkapnya

yang akan kita hyperlink.

3. Lalu pindahkan kursor anda pada property inspector bar, klik pada area Link ketik nama file yang dituju.

4. Anda juga dapat memilih tujuan link dengan membuka lambang folder,

maka akan tampak dialog box, dimana anda dapat memilih

file yang anda

inginkan. Kemudian klik OK.

Contohnya seperti gambar di bawah ini :

5. Pindahkan kursor ke sembarang tempat, maka teks anda sudah

hyperlink.

Dan sekian tutorial dari saya yang berikan, semoga dengan

adanya tutorial ini, Anda bisa berkreasi lebih dengan

menggunakan Dreamweaver.

Selamat Mencoba..!!! :D