Kamis, 22 Maret 2012

Cara Saat Menambahkan Gambar, Flash, Tabel dsb dalam Mendesain Web

Cara Saat Menambahkan Gambar, Flash, Tabel dsb dalam Mendesain Web


1.    TABEL
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 75 persen (“Width : 75
Percent”). Artinya, lebar tabel nantinya adalah 75 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.
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) :

Saat ini, tabel dikatakan dalam keadaan terpilih (selected), yang ditandai
dengan adanya garis hitam tebal di sekeliling tabel, dan 3 buah kotak hitam
kecil yang disediakan untuk resizing. Seperti yang Anda lihat pada window
Object Properties, terdapat beberapa properti tabel yang disebutkan, antara
lain Rows (jumlah baris), Cols (jumlah kolom), W (lebar, width), H (tinggi,
height), CellPad (cell padding), CellSpace (cell spacing), Align, Border, Bg
Color (background color), Brdr Color (border color), Bg image (Bg image).
Anda dapat bereksperimen dengan mengubah-ubah properti-properti
tersebut. Caranya, isikan nilai (value) baru, kemudian tekan Enter.


2.    FLASH
Tutorial membuat FLASH animasi tulisan dengan program Swishmax
1.    Buka program Swish Max
2.    Klik menu Modify lalu pilih Movie Properties
  Kemudian ubah pixel (width & height) sesuai keinginan anda. Karena disini saya akan memasang animasi flash pada widget blog saya yang lebarnya 265 pixel, maka saya sesuaikan pada animasi flash yang akan saya buat, width 265 dan heightnya saya set jadi 75 pixel. Background color #310397 juga disesuaikan dengan warna background pada widget diblog saya, lanjut.
3.    Lalu buat tulisan menggunakan text tool, disini saya tulis “Selamat Datang Di” dan “Mustguzz Blog” Lebih jelasnya lihat gambar dibawah
 
Keterangan gambar:
1.    Pada garis kotak warna merah, anda bisa merubah properties font (tulisan), ukuran, warna, spasi, nama fontnya dsb.
2.    Pada garis kotak warna ungu, itu adalah panel menu “Timeline”, scene dan layer si objek animasi.
3.    Pada garis kotak warna hijau, itu adalah panel menu tool yang merupakan alat kerja anda.
4.    Selanjutnya kita akan mulai membuat efek animasi pada text tersebut. Klik menu “Add Effect” yang ada disebelah panel menu “Timeline” (pojok kiri atas). Pilih Looping continuously, pilih pilihan efek yg sobat suka .


Pada garis kotak warna merah, adalah properties dari si efek yang sobat pilih (klik ctrl+enter untuk melihat preview animasi). Perhatikan juga panjang/ lama waktu timeline si efek (kotak warna ungu), klik dan tarik garis efek kekanan menurut urutan panjang timelinenya untuk menentukan lamanya animasi.
5.    Lakukan hal yang sama pada text/ tulisan lainnya untuk membuat efek animasi.
6.    Setelah selesai dengan projek sobat, klik file lalu pilih save untuk menyimpan projeknya.
7.    Klik file lalu pilih export SWF, untuk menjadikan file flashnya (.swf).
Oya, tekan ctrl + enter untuk preview hasil projek Flash sobat, bagaimana hasilnya? jika hasilnya dirasa belum memuaskan atau sesuai dengan keinginan sobat, sobat bisa mengedit dan mencoba efek efek animasi lainnya pada swishmax. Sobat juga bisa meng’costumnya lagi atau menambahkan banyaknya layer dan scene agar animasi flash sobat lebih keren lagi. Selamat berkreatifitas dan bereksplorisasi ria Membuat Flash Animasi Teks / Tulisan.







3.    GAMBAR ATAU IMAGE
OBJECT PANEL
Pada Object panel terdapat button-button untuk membuat dan memasukkan object
seperti tabel, layer dan images. Untuk menampilkan dan menyembunyikan Objects panel,
pilih menu Window > Objects.
Memasukkan sebuah Object :
Klik icon button pada Object panel, tergantung pada object yang dipilih. Setelah diklik
salah satu button maka akan tampil Dialog Box yang harus diisi untuk memasukkan
object tersebut. Object panel terdiri dari 7 kategori : Character, Common, Form,
Frames, Head, Invisibles dan Special.
Semua kategori tersebut menampilkan button untuk merubah tampilan : Standart dan
Layout. Untuk saat ini kita hanya akan membicarakan kategori Common atau kategori
yang umum dan biasa dipakai dan kategori Character.
 Memasukkan Image atau gambar
Ada 2 cara untuk memasukkan image pada Dreamweaver , dengan menggunakan main
menu dan dengan menggunakan Object panel.
1. Klik kursor pada tempat dimana ingin dimasukkan image. (coba diklik tempat
paling atas pada dokumen)
2. Pilih menu Insert > Image
3. Tampak dialog box untuk memilih file image pilih image yang akan ditampilkan.
4. Klik select, maka image tersebut akan masuk pada dokumen.
Jika menggunakan cara dengan penggunaan Object panel
Klik button insert image pada Object panel, maka akan tampak tampilan dialog
box yang sama, lakukan seperti langkah sebelumnya.
Membuat rollover image
Rollover image adalah suatu image yang akan berubah ketika pointer dari mouse diarahkan
pada image tersebut.
Rolover image terdiri dari 2 gambar atau image: image pertama akan tampak pada saat
pertama kali loading browser, dan image kedua akan tampak ketika pointer diarahkan pada
image tersebut. Pastikan kedua image tersebut mempunyai ukuran yang sama, bila tidak
sama maka tampilan site tampak tidak teratur.
1. Klik button image rollover pada object panel
2. Maka akan keluar dialog box yang harus diisi nama rollover image tersebut,
memilih image pertama dan memilih rollover image atau image kedua , alamat url
atau link yang dituju bila image tersebut diklik.
 3. Klik option Preload image rollover, untuk memastikan image rollover tersebut
jalan bila dibrowse.
4. Klik OK untuk menutup dialog box tersebut bila sudah selesai.
 Memasukkan Flash Button
Pada Macromedia Dreamweaver dapat langsung memasukkan Flash Button
yang sangat dinamis dan animasi dalam berbagai macam bentuk.
• Klik menu flash button pada Object panel.
Maka akan keluar sebuah dialog box, yang harus diisi, dengan memilih bentuk-bentuk
button, menulis teks dan jenis hingga ukuran teks yang akan ditampilkan pada button
tersebut, memasukkan alamat halaman lain (link).

Tidak ada komentar:

Posting Komentar