Mengelola Isi Halaman Web

Mengelola Isi Halaman Web

Membaut, 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
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. 

 

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.

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’’)

5.    Dan jika sudah semua. Kemudian di Klik OK. 

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.

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.    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.

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.

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.

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.

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.

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.

2.    Setelah pilih web browser yg anda inginkan, maka hasilnya akan muncul di web browser tersebut.

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). 

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.

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

Sumber : http://arzgraphic.blogspot.com/2012/03/cara-mengelola-isi-halaman-web.html