Sp membuat web album foto

MEMBMEMBMEMBMEMBMEMBUAUAUAUAUAT T T T T WEB WEB WEB WEB WEB ALBALBALBALBALBUM FOUM FOUM FOUM FOUM FOTTTTTOOOOO 1

Spesial Project Dreamweaver MX 2004

Membuat WebAlbum Foto

“Kalau website Anda ingin laris, buatlah album foto di dalam website tersebut”.Begitulah saran saya kepada seorang rekan. Saran saya itu cukup beralasan jika kita

menengok barang sebentar situs Fotografer.Net yang dikomandani orang-orangyang tak lain adalah alumni SMA saya dulu. Untuk ukuran situs lokal, Fotografer.Netmemang menggebrak. Lantas, bagaimana rahasia pembuatan Web Album Foto itu

sendiri?

2

P e n d a h u l u a nP e n d a h u l u a nP e n d a h u l u a nP e n d a h u l u a nP e n d a h u l u a n

Latar BelakangLatar BelakangLatar BelakangLatar BelakangLatar Belakang

Apa itu WebFoto Album?

Memang benar bahwa mayoritas netters berselancar di dunia internetkarena ingin mencari content. Tapi, content (isi) tidak selaluidentik dengan teks. Dalam dunia website, gambar merupakansalah satu unsur yang dominan. Tak heran jika gambar ataufoto kemudian beralih fungsi. Gambar tidak lagi berfungsisebagai pemanis tampilan tapi sudah beralih sebagai content.Mau bukti? Situs Fotografer.Net laris karena orang ingin me-lihat isi dalam wujud gambar atau foto!

Lantas, apa sebenarnya yang dimaksud de-

ngan Web Album Foto itu? Jika diterje-

mahkan secara “apa adanya”, yang dimak-

sud dengan Web Album Foto itu adalah

website yang di dalamnya terkandung ko-

leksi foto-foto yang bisa dilihat dan diak-

ses—syukur-syukur disimpan—oleh setiap

orang. Jadi pada prinsipnya, web album

foto adalah website berisi ratusan bahkan

ribuan koleksi foto.

Kalau sudah begini, content

website itu didominasi oleh foto.

Di Indonesia ini, web album foto

yang paling laris dan berpengaruh

adalah Fotografer.Net. Bahkan,

harian sebergengsi Kompas me-

muat berita tentang hebohnya

Fotografer.Net sampai lebih dari

sekali. Terus terang, kesuksesan

Fotografer.Net menjadi bahan

inspirasi. Bagaimana tidak? Situs

ini dikelola orang Indonesia—te-

patnya di Yogyakarta—dan hanya

dipublikasikan lewat media-me-

dia tertentu, seperti Detik.Com,

milis, dan lain sebagainya. Tak ada

hingar bingar, bahkan launching

Fotografer.Net: Situs lokal seperti Fotografer.Netini meskipun hanya dipromosikan secaraterbatas namun pengaruhnya sungguh besar dikomunitas fotografi.

menawan sekalipun. Namun, dalam hi-

tungan beberapa minggu saja, situs ini

meneguk sukses luar biasa.

Di luar negeri, kita mengenal situs-si-

tus penyedia foto seperti TonyStone.Com

meskipun dengan tujuan yang berbeda.

Fotografer.Net sampai saat ini masih ber-

bentuk komunitas penggemar fotografi.

Sedangkan TonyStone.Com lebih ke arah

jual beli foto-foto. Namun, kita tetap bisa


TTTTTonononononyStoneyStoneyStoneyStoneyStone.....CCCCCom:om:om:om:om: Meskipun menyimpanribuan koleksi foto, arah dan tujuanTonyStone.Com berbeda denganFotografer.Net. Situs ini lebih memilihaktivitas jual-beli foto.

Memenuhi Syarat-syarat

Syarat MembuatWeb Album Foto

Membuat website album foto seperti

Fotografer.Net tidaklah enteng. Anda ha-

rus memenuhi syarat-syarat tertentu. Sya-

rat utamanya adalah harus memiliki kolek-

si foto ratusan hingga ribuan buah dan ha-

rus di-update setiap saat. Lantas, dari mana

datangnya koleksi foto-foto itu? Foto itu

bisa berasal dari Anda sebagai webmaster

serta pengelolanya atau berasal dari para

pengunjung.

Kita ambil contoh kasus di Foto-

grafer.Net. Setiap member wajib ikut ber-

partisipasi dalam situs ini dengan cara me-

nyumbangkan beberapa foto hasil kreasi

mereka sendiri. Bagaimana jika tidak? Per-

tama, keanggotaan mereka akan dihenti-

kan. Kedua, mereka tidak bisa melihat

foto-foto lain yang ada di situs itu dalam

ukuran besar. Karena adanya aturan

seperti inilah yang membuat koleksi

foto di Fotografer.Net sangat me-

limpah sebab setiap orang ter-

dorong untuk menyumbang bebe-

rapa koleksinya.

Anda bisa meniru konsep seper-

ti ini. Tentu, Anda harus mengerti

trik pemrograman website supaya

situs ini mampu mendeteksi secara

otomatis bilamana anggota itu sudah ikut

berpartisipasi atau belum. Namun, jika ti-

dak ingin memakai cara seperti ini, Anda

bisa meng-upload foto-foto koleksi Anda

sendiri untuk konsumsi banyak orang.

Cara ini lebih praktis, hanya saja menguras

energi.

Jika Anda sudah punya koleksi foto da-

lam jumlah besar, kini Anda hanya tinggal

mendesain situs ini saja. Bagaimana

mendesainnya? Ada banyak cara. Salah

satu cara yang saya rekomendasikan adalah

menggunakan Macromedia Dreamweaver

MX 2004.

Software yang masih saudara dengan

Flash MX 2004 ini memang sudah dileng-

kapi beberapa fasilitas untuk membuat al-

bum foto online, baik yang berbasis

HTML murni maupun Flash. Tapi, kalau

itu semua belum cukup, Anda bisa mema-

dukan Dreamweaver MX 2004 dan Active

Server Pages untuk membuat album foto

online yang lebih interaktif dan dinamis.

Cara terakhir ini memang lebih sulit kare-

na kita harus mengerti dulu dasar-dasar

ASP Database. Untungnya, di tanah air

mengambil beberapa koleksi foto yang ada

di situs yang juga bisa diakses lewat alamat

GettyImages.Com itu.

4

ini, topik tentang ASP Database sudah se-

demikian melimpah sehingga saya harap

Anda tidak mengalami banyak kesulitan.

Jadi, yang Anda perlukan untuk mem-

buat web album foto sendiri adalah sebagai

berikut:

Macromedia Dreamweaver MX 2004Software buatan Macromedia ini merupa-

kan software utama yang akan kita pakai.

Di dalam versi MX 2004 ini ada beberapa

fasilitas instan untuk membuat web album

foto sendiri. Kita akan telusuri fasilitas-fa-

silitas tersebut.

Macromedia Fireworks MX 2004Software yang masih saudara kandung de-

ngan Dreamweaver MX 2004 ini hanya

kita pakai sebagai pelengkap. Ada fasilitas

yang terdapat di Dreamweaver MX 2004

yang tidak bisa bekerja jika Anda tidak pu-

nya software desain grafis ini. Selain itu,

Fireworks MX 2004 kita pakai untuk

membuat efek-efek spesial pada gambar.

Anda bebas memilih versi, apakah mau

menggunakan Fireworks MX 2004 atau

Fireworks MX saja.

Flash PlayerKita nanti akan sedikit berlatih dengan

Macromedia Flash MX 2004 meskipun ti-

dak secara langsung. Agar browser Anda

mampu memunculkan animasi Flash MX

2004 secara efektif, browser tersebut harus

dilengkapi plug-in berupa Flash Player. Di

sini, saya merekomendasikan agar Anda

menginstal Macromedia Flash Player 7.

MS Windows 9x/2000/2003/XPYang Anda butuhkan selanjutnya adalah

operating system tempat Macromedia

Dreamweaver MX 2004 dan Macromedia

Fireworks MX 2004 bekerja. Anda bisa

menggunakan beragam variasi operating

system, khususnya yang berbasis MS Win-

dows, seperti MS Windows 9x, 2000,

2003, atau XP. Saya rekomendasikan agar

Anda menggunakan seri 2000/2003 atau

XP sebab Dreamweaver MX 2004 ini bu-

tuh banyak sumber daya.

Macromedia Extension ManagerAplikasi ini biasanya telah ikut terinstall

saat Anda menginstall Dreamweaver MX

2004 ke dalam komputer Anda. Fungsinya

adalah untuk mendata extension-exten-

sion yang bekerja dalam lingkungan

Dreamweaver MX 2004.

BrowserSoftware ini berfungsi sebagai alat uji coba

website album foto. Anda bisa mengguna-

kan Internet Explorer, Netscape, atau

NeoPlanet sekalipun.

Flash Player:Flash Player:Flash Player:Flash Player:Flash Player: Plug-In Flash Player pada browserberfungsi untuk “memainkan” animasi Flash.


Command Dreamweaver MX 2004Command Dreamweaver MX 2004Command Dreamweaver MX 2004Command Dreamweaver MX 2004Command Dreamweaver MX 2004

Command Dreamweaver MX 2004

Cara CepatMembuat Web Album Foto

Salah satu trik termudah untuk membuat web album foto adalah meng-gunakan salah satu command yang ada di Dreamweaver MX 2004. Carapakainya cukup sederhana dan prosesnya berlangsung sangat cepat!

Macromedia Dreamweaver MX 2004 me-

miliki fasilitas “Create Web Photo Album”

yang tersimpan di bagian Menu Com-

mand. Ini adalah cara paling ringkas dalam

membuat web album foto. Fasilitas ini ber-

interaksi dengan Macromedia Fireworks

MX (2004). Dengan begitu, fasilitas ini ti-

dak bisa bekerja jika Anda belum mengin-

stal Fireworks MX terlebih dulu.

Apa yang akan dilakukan

Command “Create Web Photo Al-

bum” ini? Mereka akan melaku-

kan langkah-langkah seperti ini:

� Menciptakan thumbnail secara

otomatis: Web album foto bia-

sanya mempunyai dua buah

versi gambar, yaitu gambar ke-

cil—sering disebut thumb-

nail—dan gambar dalam ukur-

an lebih besar. Biasanya, yang

muncul pertama kali adalah

thumbnail terlebih dulu. Baru,

setelah gambar mungil itu

diklik akan muncul gambar da-

lam format lebih besar.

� Menciptakan halaman web untuk

tiap-tiap gambar: Command ini akan

menciptakan halaman web khusus un-

tuk memunculkan gambar berformat

besar satu per satu. Jumlah halaman

web yang akan dibuat sebanding de-

ngan jumlah gambar yang akan menja-

di album foto. Jadi, jika gambar yang

kita libatkan berjumlah 30 buah, hala-

man web yang tercipta akan sebanyak

30 halaman pula.

� Menciptakan tombol navigasi otoma-

tis: Tiap-tiap halaman web dilengkapi

dengan tombol—atau lebih tepatnya

link—navigasi. Jadi, pengunjung bisa

bergerak ke gambar berikutnya (Next)

atau sebelumnya (Previous).

Create Web Photo Album:Create Web Photo Album:Create Web Photo Album:Create Web Photo Album:Create Web Photo Album: Fasilitas instan iniberfungsi untuk membuat web album fotosecara cepat, praktis, dan langsung jadi. Ia akanmengerjakan empat tugas sekaligus, yaitumenciptakan thumbnail, tombol navigasi,halaman web khusus, serta me-layout tampilanalbum foto online agar tampak manis.

6

� Menciptakan layout otomatis: Album

foto online ini akan didesain menggu-

nakan tabel. Gambar-gambar kecil

(thumbnail) akan ditata menggunakan

tabel secara otomatis. Anda bisa meng-

atur berapa kolom yang dibutuhkan

untuk menampung semua gambar itu.

Menggunakan Command

Langkah-langkahMembuat Album Foto

Sekarang, saya akan beberkan rahasia

pembuatan album foto paling praktis

menggunakan Command Object. Lang-

kah-langkah yang akan Anda lakukan cu-

kup simpel, tidak lebih dari lima menit

pengerjaan (kecuali jika album foto ini

memuat banyak koleksi dan komputer

Anda sudah tergolong out-of-date).

Pertama, siapkan dokumen website

baru, boleh HTML ataupun ASP. Kedua,

klik menu Command > Create WebPhoto Album seperti diilustrasikan pada

gambar di bawah ini:

Menu:Menu:Menu:Menu:Menu: Memilih menu Create Web Photo Albumdari Menu Command Dreamweaver MX 2004.

Begitu Anda selesai melakukan langkah

kecil di atas, Anda akan masuk ke jendela

khusus seperti gambar di bawah ini. Nama

jendela itu adalah Create Web Photo Album.

Ada beberapa bagian dalam jendela

tersebut yang harus Anda isi. Pertama,

Anda wajib mengisi judul dari album foto

ini. Mungkin, Anda ingin memberi judul

pada album foto seperti “Foto Liburan di

Bali” atau “Foto Taksir-Taksiran”. Anda isi

judul itu pada text-box “Photo Album

Title”. Lantas, Anda wajib mengisi

subjudul pada text-box “Subheading info”.

Siapa tahu judul album foto ini memiliki

subjudul. Misalnya, kalau judulnya “Foto

Liburan di Bali” mungkin subjudulnya

menjadi “Liburan di Sangeh”.

Ketiga, Anda akan menjumpai text-

box “Other Info”. Kalau foto itu punya ke-

terangan tambahan, seperti tanggal pem-

buatan, nama si pemotret, atau lainnya,

masukkanlah di bagian ini.

Langkah keempat dan kelima saling

bertautan. Pada langkah keempat, Anda

disuruh menentukan lokasi dimana foto-

foto tersebut disimpan. Mungkin, foto-

foto kenangan itu Anda taruh di folder

D:\fotodigital. Ketikkan lokasi folder itu

pada text-box “Source images folder”. Agar

mudah, Anda bisa pakai fasilitas Browse…

yang ada di situ. Lantas, tentukan di mana

foto-foto itu akan disimpan kemudian.

Jendela Create Web Photo Album (Kanan):Jendela Create Web Photo Album (Kanan):Jendela Create Web Photo Album (Kanan):Jendela Create Web Photo Album (Kanan):Jendela Create Web Photo Album (Kanan):Gambar di kanan adalah ilustrasi dari jendelaCreate Web Photo Album. Kalau Anda inginmembuat foto album secara cepat dan praktis,pakailah jendela seperti gambar di samping.


Mungkin, Anda sudah punya folder khusus

untuk menyimpan arsip web dan semua

dokumennya, mungkin di C:\InetPub\

wwwroot\fotoalbum\gambar. Tulislah folder

ini pada text-box Destination Folder.

Langkah keenam, Anda tentukan u-

kuran thumbnail untuk masing-masing

foto. Seperti telah disinggung di atas,

thumbnail adalah gambar ukuran kecil un-

tuk mewakili gambar dalam ukuran se-

sungguhnya. Secara otomatis, Fireworks

MX akan menciptakan thumbnail ini.

Jadi, semua foto yang Anda pilih akan me-

miliki thumbnail. Lantas, berapa ukuran

thumbnail ini? Secara default, Dream-

weaver MX 2004 telah mengatur ukur-

annya,yaitu 100x100 pixel. Anda ingin

mengubahnya? Ubahlah angka yang ada di

situ dengan mengklik menu drop-down

tersebut. Ada beragam pilihan, mulai dari

36x36, 72x72, 144x144 dan sebagainya.

Apakah nama file ini akan dimuncul-

kan pada album foto? Jika ya, langkah ketu-

juh yang harus Anda lakukan adalah meng-

klik check box Show Filenames sampai ia

tercentang.

Foto-foto ukuran kecil (thumbnail)

akan ditata menggunakan tabel. Berapa

Memilih Folder:Memilih Folder:Memilih Folder:Memilih Folder:Memilih Folder: Pilihlah folder tempat koleksifoto-foto Anda berada. Setelah itu, pilih foldersekali lagi sebagai tempat untuk menyimpanfoto-foto tersebut, lengkap dengan thumbnaildan halaman web-nya.

kolom yang Anda butuhkan? Secara

default, Dreamweaver MX 2004

akan memilih lima kolom. Tapi,

Anda bisa menggantinya sesuai se-

lera Anda. Gantilah jika perlu seba-

gai langkah kedelapan.

Masing-masing file album foto

pasti punya format tertentu, entah

JPEG atau GIF. Pilihlah format file

untuk thumbnail dan file foto dalam ukur-

an sesungguhnya pada menu drop-down

‘Thumbnail Format’ dan ‘PhotoFormat’.

Berapa ukuran masing-masing foto? Jika

Anda ingin ukuran yang sebenarnya, pilih

100% pada bagian “Scale”.

Terakhir, klik check box “Create naviga-

tion page for each photo” jika masing-ma-

sing foto memiliki link navigasi. Dengan

adanya link navigasi, pengunjung bisa ber-

gerak ke satu foto menuju foto lainnya se-

cara lebih mudah.

KKKKKonfiguronfiguronfiguronfiguronfigurasi Akhirasi Akhirasi Akhirasi Akhirasi Akhir::::: Tampak pada gambar diatas, kita telah selesai melakukan konfigurasiakhir untuk pembuatan album foto online ini.Setelah Anda mengklik tombol OK, album fotoini akan selesai dalam waktu cepat.

Tekan OK jika sudah. Kini, Anda akan li-

hat Macromedia Dreamweaver MX 2004

akan memanggil saudaranya, Fireworks MX.

Dan software grafis ini akan melakukan tu-

gasnya barang sejenak. Lama cepatnya proses

ini sangat bergantung pada banyak sedikitnya

koleksi foto yang Anda ambil.

8

PrPrPrPrProses di Belakoses di Belakoses di Belakoses di Belakoses di Belakang Laang Laang Laang Laang Layyyyyararararar::::: Di belakang layar, Macromedia Fireworks MX melakukan tugasnya, yaitumenduplikasi foto-foto dalam ukuran besar dalam ukuran thumbnail dan menyimpannya keDestination Folder seperti pilihan Anda tadi.

Tunggulah sejenak dengan sabar. Dan,

jika proses telah berakhir, Anda akan kem-

bali ke aplikasi Dreamweaver MX 2004.

Selanjutnya, Anda akan melihat kotak dia-

log seperti gambar di samping.

Selesai!:Selesai!:Selesai!:Selesai!:Selesai!: Kotak dialog tanda proses sudahselesai.

Sekarang, Anda sudah mendapati kenya-

taan yang unik. Dokumen baru yang tadi

Anda buat masih kosong melompong, putih

tak bercela. Namun kini, dokumen ini sudah

dipenuhi dengan foto-foto atau gambar-

gambar dalam ukuran seragam, mungkin

100x100 pixel atau ukuran lainnya. Foto-

foto itu tertata rapi oleh sebuah tabel yang

memiliki beberapa kolom di dalamnya, seca-

ra default berjumlah lima. Di situ juga ada ju-

dul album foto dan keterangan-keterangan

lainnya yang bisa Anda ubah nanti.

Tapi yang jelas, Anda hanya butuh in-

vestasi tenaga yang cukup sedikit dan

Dreamweaver MX 2004 akan mengerja-

kan sisanya. Di belakang itu semua, jika

Anda mengeceknya nanti, Anda akan

menjumpai puluhan file HTML yang telah

memuat tiap-tiap foto dalam ukuran besar.

Bagaimana kita melihat file-file HTML

ini? Pada pengujian nanti, file-file ini akan

muncul di jendela browser.


One-Stop Photo Album:One-Stop Photo Album:One-Stop Photo Album:One-Stop Photo Album:One-Stop Photo Album: Pengerjaan album foto seperti gambar di atas tampaknya begitu runyam danbutuh organisasi file yang membosankan. Padahal, proses sesungguhnya berlangsung sangat singkatdan hemat energi.

Menguji pada Browser

Menguji Album Foto padaJendela Browser

Mari kita lihat bagaimana album foto ter-

sebut bekerja pada jendela browser. Secara

default, album foto ini telah tersimpan de-

ngan nama index.html. Jadi, Anda tidak

perlu menyimpannya lagi kecuali jika

Anda ingin menggantinya dengan nama

file yang baru atau telah terjadi modifikasi

pada halaman web di atas.

Sekarang luncurkanlah browser Anda,

entah Internet Explorer, Netscape Naviga-

tor, atau yang lain. Panggilah file

index.html ini pada browser tersebut sam-

pai album foto online ini muncul di jende-

la browser seperti gambar di bawah ini:

10

Setiap gambar yang ada di dalam al-

bum foto mengandung link. Cobalah arah-

kan kursor mouse di atas gambar itu dan

cermati perbedaannya. Kursor itu pasti

akan berubah ke bentuk gambar sepotong

tangan yang menandakan adanya link di

dalam gambar itu.

Coba Anda klik gambar itu dan Anda

akan melihat gambar atau foto dalam u-

kuran yang lebih besar (100%).

Ukuran Sesungguhnya:Ukuran Sesungguhnya:Ukuran Sesungguhnya:Ukuran Sesungguhnya:Ukuran Sesungguhnya: Jika Anda mengklik sebuahthumbnail, akan muncul kemudian gambar atau foto dalamukuran sesungguhnya seperti ilustrasi di atas.

Di atas gambar itu ada link navigasi, yaitu

“Previous | Home | Next”. Gunakan link

navigasi itu untuk berpindah dari satu gam-

bar atau foto menuju gambar lainnya. Con-

tohnya, link “Previous” dipakai untuk berge-

rak ke gambar sebelumnya, sedangkan link

“Next” untuk bergerak ke gambar berikut-

nya. Terakhir, link “Home”, berfungsi untuk

kembali ke halaman utama album foto.

Memoles Album Foto

CSS untuk MeriasAlbum Foto

Mari kita kembali ke aplikasi Dreamweaver

MX 2004, masih bersama dengan album

foto garapan kita. Mungkin, Anda merasa

bahwa tampilan album foto ini masih se-

derhana dan polos. Kita bisa saja memoles-

nya lebih lanjut, misalnya dengan cara

memberi border artistik pada tabel

tersebut. Caranya? Dengan meng-

gunakan CSS.

CSS atau Cascading Style

Sheet telah lama dipakai oleh

webmaster untuk memoles tam-

pilan visual dari website yang tidak

bisa dikerjakan secara langsung

oleh HTML. Pada latihan kali ini,

kita akan poles border tabel agar

tampak lebih artistik lagi.

Kita butuh beberapa langkah

awal. Langkah pertama yang harus

kita lakukan adalah mengaktifkan

terlebih dulu jendela CSS Styles

dengan cara mengklik menu Win-dow > CSS Styles sampai jendela

ini muncul.

Lewat jendela inilah kita akan

lakukan pengaturan. Pengaturan

yang bisa dilakukan lewat CSS

Styles bersifat global, tidak melulu

hanya tabel saja. Anda bisa atur posisi sebu-

ah objek pada halaman web, mengatur

efek-efek khusus seperti efek pada link,

efek transisi halaman web (hanya bekerja

pada browser Internet Explorer), dan efek-

efek unik lainnya.

Dan kita mulai dari pengaturan khusus

untuk memoles garis-garis border tabel

pada album foto online ini.


Arahkan kursor Anda di atas jendela

CSS Styles yang baru saja terbuka tadi. Klik

tombol kanan mouse sampai muncul

shortcut menu. Pilih “New…”. Anda akan

dibawa masuk ke dalam jendela baru, yaitu

“New CSS Style”.

Membuat Style CSS Baru:Membuat Style CSS Baru:Membuat Style CSS Baru:Membuat Style CSS Baru:Membuat Style CSS Baru:Menggunakan jendela NewCSS Style seperti gambar dibawah ini, kita akanmenciptakan gaya padaborder tabel.

Pada bagian “Name”, ketikkan

“.garisalbum”. Sementara itu, klik radio

button “Class (can apply to any tag)” pada

bagian “Selector Type”. Terakhir, klik “This

Document Only” jika Anda masuk ke ba-

gian “Define In”. Tekan tombol OK sesu-

dahnya.

Kini, Anda masuk ke dalam jendela

baru bernama “CSS Style Definition for

.garisalbum”.

Gambarnya tampak seperti ilustrasi di

atas ini.

CSS Style Definition for .garisalbum:CSS Style Definition for .garisalbum:CSS Style Definition for .garisalbum:CSS Style Definition for .garisalbum:CSS Style Definition for .garisalbum: Di sinilahkita akan mengonfigurasi garis border padatabel.

Karena kita akan mengatur garis bor-

der pada tabel maka kita pilih option “Bor-

der” yang ada di bagian “Category”. Begitu

pilihan ini Anda ambil, Anda akan melihat

tampilan baru pada jendela “CSS Style

Definition for .garisalbum” ini. Gambar-

nya tampak seperti berikut:

Kategori Khusus Border:Kategori Khusus Border:Kategori Khusus Border:Kategori Khusus Border:Kategori Khusus Border: Kategori sepertigambar di atas khusus berfungsi untukmengatur gaya-gaya border.

Di situ ada tiga bagian utama, yaitu

Style, Width, dan Color. Klik menu drop-

down “Top”. Setelah muncul beberapa

model border, pilihlah “Dotted” agar garis

border ini berupa bintik-bintik. Jika setiap

sisi border ingin memiliki gaya yang sama,

klik check box “Same for all”. Namun, jika

setiap sisi ingin punya gaya yang unik,

CSS Styles:CSS Styles:CSS Styles:CSS Styles:CSS Styles: Mengaktif-kan jendela CSS Stylesdengan mengklik menuWindow > CSS StylesWindow > CSS StylesWindow > CSS StylesWindow > CSS StylesWindow > CSS Styles.

12

hapuslah tanda centang pada check box

“Same for all” dengan cara mengkliknya

kembali. Setelah itu, pilihlah gaya border

yang lain.

Kemudian, beralihlah ke bagian Width

yang berfungsi untuk mengatur tebal-tipis

garis border. Isikan dengan angka 1 dengan

satuan “pixel” pada bagian ini. Terakhir, pi-

lihlah warna border ini pada bagian “Color”.

Akan lebih baik jika berwarna hitam.

Terakhir, klik tombol OK agar Anda

kembali lagi ke dokumen album foto

online. Sekarang amatilah, kini jendela

CSS Styles telah merekam gaya atau style

baru, yaitu .garisalbum seperti gambar di

bawah ini:

Gaya Baru:Gaya Baru:Gaya Baru:Gaya Baru:Gaya Baru: SetelahAnda melewatiproses seperti tadi,Anda akanmendapat imbalanberupa gaya baruyang siapdiaplikasikan padaborder tabel.

Kini, kita tinggal mengaplikasikan

gaya border tadi pada tabel. Caranya, arah-

kan kursor mouse pada bagian luar garis ta-

bel. Kliklah mouse Anda sehingga garis sisi

luar pada tabel dalam keadaan terpilih.

Album Foto Online dengan Border Baru (Atas):Album Foto Online dengan Border Baru (Atas):Album Foto Online dengan Border Baru (Atas):Album Foto Online dengan Border Baru (Atas):Album Foto Online dengan Border Baru (Atas):Setelah lewat proses panjang, akhirnya albumfoto online ini punya garis border baru.

Memilih Garis Sisi Luar Memilih Garis Sisi Luar Memilih Garis Sisi Luar Memilih Garis Sisi Luar Memilih Garis Sisi Luar TTTTTabel (Kiri):abel (Kiri):abel (Kiri):abel (Kiri):abel (Kiri): Kita akanmemberi pola pada garis sisi luar tabel sesuaigaya CSS yang tadi telah kita tentukan.

Dan inilah cara untuk mengaplikasikan

CSS Style yang tadi telah kita buat ke dalam

garis border. Klik tombol kanan mouse sam-

pai muncul shortcut menu. Arahkan pada

“CSS Sytles > .garisalbum”.

Kini, garis sisi luar tabel akan berupa

bintik-bintik. Mungkin, Dreamweaver

MX 2004 tidak memunculkannya secara

langsung. Kita akan melihatnya nanti pada

jendela browser.

Memilih CSS Style:Memilih CSS Style:Memilih CSS Style:Memilih CSS Style:Memilih CSS Style:Langkah-langkah ini kitatempuh untukmengaplikasikan CSSStyle pada garis sisi luartabel.


Album FAlbum FAlbum FAlbum FAlbum Fooooottttto Flash!o Flash!o Flash!o Flash!o Flash!Cara praktis kedua untuk membuat album foto online adalah menggunakanFlash MX. Tentu, kita tidak akan masuk ke aplikasi ciptaan Macromediayang paling kondang ini. Sebaliknya, kita masih tetap menggunakanDreamweaver MX 2004. Lantas? Kita akan menggunakan fasilitas “Im-age Viewer” yang dimiliki Dreamweaver MX 2004. Secara kebetulan saja,fasilitas ini memiliki koneksi yang erat dengan animasi Flash.

Menggunakan Image Viewer

Album FotoBeranimasi Flash

Kreasi album foto itu bisa bermacam-ma-

cam. Dulu, kita hanya membuat album

foto statis saja, yaitu gambar dalam posisi

diam dan ketika gambar itu diklik browser

akan memunculkan gambar itu dalam for-

mat besar. Ini bisa dikatakan album foto

gaya lama. Bagaimana dengan album foto

artistik ala Flash MX?

Semua orang pasti tahu bahwa Flash

MX adalah software perancang animasi

berbasis website. Kalau album foto ini di-

buat menggunakan Flash MX, pasti album

foto ini juga full animasi. Memang ada

benarnya. Album foto yang diciptakan

menggunakan fasilitas “Image

Viewer” ini memang menyimpan

beberapa efek animasi, khususnya

ketika satu foto dengan foto lain-

nya berganti tempat. Selain itu,

tombol anivagasi image viewer

jauh lebih trendi dibanding album

foto online biasa. Selain didukung

oleh animasi button, tombol al-

bum foto Flash MX ini dipoles

menggunakan warna dan efek 3D.

Apakah membuatnya sulit? Ti-

dak. Anda bahkan tidak perlu me-

ngenal Flash MX sama sekali!

Album Foto Gaya Flash: Album Foto Gaya Flash: Album Foto Gaya Flash: Album Foto Gaya Flash: Album Foto Gaya Flash: Karena berbasis FlashMX, album foto ini menjadi kaya akan animasidan special effect, seperti 3D, misalnya. Namundemikian, browser Anda harus support animasiFlash MX secara penuh.

Meskipun memiliki kelebihan seperti

itu, animasi Flash MX harus di-support pe-

nuh oleh browser. Dengan kata lain,

browser harus benar-benar mampu menja-

lankan animasi Flash MX secara utuh. Ca-

ranya, Anda harus menginstal Macro-

media Flash Player terlebih dulu. Selama

proses instalasi, aturlah agar Flash Player ini

menjadi plug-in bagi browser.

Di dalam bagian ini, kita akan belajar

bagaimana membuat album foto online

berbasis Flash MX menggunakan Macro-

media Dreamweaver MX 2004.

14

Kreatif dengan Flash

MenggunakanImage Viewer

Bagaimana caranya membuat album foto

animasi berbasis Flash MX? Gampang.

Anda hanya butuh satu langkah saja.

Macromedia Dreamweaver MX 2004 pu-

nya fasilitas yang disebut “Image Viewer”.

Fasilitas instan ini sebenarnya berfungsi

untuk browsing gambar-gambar dengan

kreasi yang unik. Tapi, Anda juga bisa

mengartikannya sebagai image viewer.

Cara pakainya sederhana. Pertama-

tama, Anda siapkan dulu dokumen web

baru. Agar praktis, pilihlah format HTML

biasa sebab album foto online ini bekerja

di sisi client. Setelah Anda mendapat do-

kumen web baru, kliklah menu Insert >Media > Image Viewer.

Memilih ImageMemilih ImageMemilih ImageMemilih ImageMemilih ImageViewer: Viewer: Viewer: Viewer: Viewer: Menu iniberfungsi untukmembuat album fotoberbasis Flash MX.

Sebelum Anda mendapat album foto

online ini, Anda harus menyimpan sebuah

file Flash Movie. File ini selanjutnya akan

di-attach ke dalam dokumen web Anda.

Simpan dengan nama “albumfoto.swf”.

Setelah itu, tekan tombol Save.

Begitu proses ini selesai, Anda akan

mendapat satu buah kotak berwarna abu-

abu yang di tengahnya tertempel logo Flash

MX. Di sinilah nanti album foto Anda

akan berada. Jika perlu, Anda bisa menga-

tur posisi yang pas untuk tempat peletakan

album foto online ini.

Menyimpan File Flash Movie: Menyimpan File Flash Movie: Menyimpan File Flash Movie: Menyimpan File Flash Movie: Menyimpan File Flash Movie: Sebelumada album foto online, Anda harusmenyimpan dulu sebuah file flash movieyang nanti akan di-attach ke dalamhalaman web Anda.

Posisi Album Foto Online: Posisi Album Foto Online: Posisi Album Foto Online: Posisi Album Foto Online: Posisi Album Foto Online: Kotak berwarnaabu-abu dengan logo Flash di tengahnya itumenandakan posisi album foto online di dalamhalaman web. Anda bisa mengaturnya semauAnda.

Apakah album foto ber-Flash ini sudah

siap tayang? Sebenarnya belum. Anda be-

lum menentukan foto-foto apa saja yang

akan muncul nanti dan mau ke mana para

pengunjung jika mengklik foto-foto itu.

Tapi, sebelum kita mengonfigurasi ko-

leksi foto-foto itu, ada baiknya jika kita

belajar terlebih dulu bagaimana me-resize

ukuran album foto online di atas.


Kalau Anda amati, album foto tersebut

tidaklah berukuran besar. Akibatnya, foto-

foto yang nanti akan muncul di jendela

web juga tidak besar-besar amat. Lantas?

Kalau Anda ingin foto-foto itu relatif lebih

besar, Anda harus ubah terlebih dulu ukuran

album foto tersebut. Caranya, coba Anda

klik album foto itu sampai ia dalam keada-

an terpilih. Di situ, ada panel Properties

yang akan mengatur segala hal yang berkait-

an dengan album foto itu. Gambarnya se-

bagai berikut:

Panel Properties: Panel Properties: Panel Properties: Panel Properties: Panel Properties: Panel ini berfungsi untuk mengatur beberapa halmenyangkut album foto online seperti ukuran dan sebagainya.

Pada panel itu sudah tersedia dua buah

kotak, W dan H. Dua kotak itu berfungsi

untuk mengatur ukuran album foto

online di atas. Coba ubah nilai yang ada di

kotak W dan H. Sekarang, Anda akan

mendapat ukuran album foto online yang

baru, entah lebih besar atau lebih kecil.

Ukuran Baru: Ukuran Baru: Ukuran Baru: Ukuran Baru: Ukuran Baru: Kini, album foto online berbasisFlash ini sudah punya ukuran baru. Kali ini,ukurannya lebih besar.

Mengatur Lebih Jauh

Melakukan KonfigurasiAtas Album Foto

Seperti tadi telah dikemukakan, album

foto ini jauh dari siap. Pertama, Anda be-

lum mengatur foto-foto mana saja yang

akan muncul. Kedua, Anda belum menga-

tur bagaimana cara kerja album foto ini.

Pada putaran pertama, kita akan menen-

tukan foto-foto atau gambar-gambar yang

akan masuk ke dalam album foto ini.

Caranya, klik album foto

itu sekali lagi. Begitu

Anda selesai melakukan-

nya, Dreamweaver MX

2004 akan mengeluarkan

jendela “Flash Element”

yang tugasnya mengatur hal-hal yang berka-

itan dengan file Flash yang ada di dokumen

web, termasuk album foto berbasis Flash ini.

Berikut gambar jendela “Flash Element” yang

akan Anda dapatkan.

Flash Element:Flash Element:Flash Element:Flash Element:Flash Element:Jendela iniberfungsi untukmengaturkonfigurasi fileFlash yang adadi halaman web.

Kalau Anda cermati, salah satu bagian

yang ada di dalam jendela “Flash Element”

adalah “ImageURLs”. Di sinilah kita akan

menentukan foto-foto mana saja yang akan

dimasukkan ke dalam album foto online ini.

Klik bagian ini sampai muncul kotak

kecil di bagian pojok kanan “ImageURLs”

tersebut.

Setelah itu, Anda akan masuk ke da-

lam jendela “Edit ImageURLs Array” seper-

ti gambar berikut.

16

Jendela “Edit ImageURLs Array”: Jendela “Edit ImageURLs Array”: Jendela “Edit ImageURLs Array”: Jendela “Edit ImageURLs Array”: Jendela “Edit ImageURLs Array”: Jendela iniberfungsi untuk menentukan file-file foto manasaja yang akan dimasukkan ke dalam album foto.

Menambah Koleksi Foto: Menambah Koleksi Foto: Menambah Koleksi Foto: Menambah Koleksi Foto: Menambah Koleksi Foto: Setelah menekantombol [+], Anda bisa menambah koleksi foto baruyang akan muncul di album foto Flash MX ini.

FFFFFile Brile Brile Brile Brile Browowowowowsing: sing: sing: sing: sing: Teknik termudah untuk memilihsebuah file adalah dengan menggunakan teknikfile browsing seperti gambar di samping kiri ini.

Lakukan langkah-langkah di atas beru-

lang kali sampai koleksi foto dirasakan su-

dah cukup banyak.

Daftar File Foto: Daftar File Foto: Daftar File Foto: Daftar File Foto: Daftar File Foto: Jika dirasa sudah cukupbanyak, Anda bisa menghentikan proses ini.

Tiap-tiap foto yang ada di dalam album

ini bisa disispi sebuah link. Dengan begitu,

saat foto ini muncul, seorang pengunjung

bisa mengklik foto itu. Selanjutnya seperti

biasa, orang itu akan masuk ke halaman web

atau alamat web lain. Cara untuk meng-

onfigurasi link masing-masing gambar cukup

mudah. Pakailah option “ImageLinks”.

Kliklah option yang masih satu lokasi

dengan “ImageURLs” ini sampai Anda ma-

suk ke jendela “Edit ImageLinks Array”

seperti gambar berikut:

Alamat URL: Alamat URL: Alamat URL: Alamat URL: Alamat URL: Tiap-tiap foto bisa disisipi alamatURL yang akan menuju ke situs lain.

Gunakan tombol [+] atau [-]. Dan tu-

lislah alamat URL pada kotak yang telah

tersedia.

Secara default, ada tiga buah file ‘fiktif” di

sana, yaitu img1.jpg – img3.jpg. Karena sifat-

nya ‘fiktif ’ Anda bisa menghapus ketiganya

menggunakan tombol [-]. Setelah itu, tekan

tombol [+] untuk menambah file baru.

Agar gampang, tekan icon bergambar

“folder” berwarna kuning yang ada di situ.

Setelah itu, Anda bisa memilih file lewat

metode browsing. Pilih salah satu file gam-

bar dan tekan tombol OK.


Album Foto Flash MX: Album Foto Flash MX: Album Foto Flash MX: Album Foto Flash MX: Album Foto Flash MX: Setelah semua file foto Anda masukkan ke dalam album, album foto Flash MXini sudah siap untuk ditayangkan ke jendela browser seperti gambar di atas.

Kini, Anda tinggal men-save dokumen

web ini dalam sebuah file. Setelah itu,

Anda masuk ke babak pengujian di mana

Anda wajib menggunakan browser untuk

mengetes album foto online ini. Aktifkan

browser Anda, entah IE, Netscape, atau

NeoPlanet asal ber-plug-in Macromedia

Flash Player, dan akseslah halaman web al-

bum foto tersebut. Jika prosesnya berjalan

lancar, Anda akan melihat tampilan gam-

bar seperti ilustrasi di atas.

Gunakan tombol-tombol navigasi

yang ada di situ untuk bergerak dari satu

foto ke foto lainnya. Amati efek transisi

yang terjadi ketika satu foto diganti oleh

foto lainnya. Aplikasi ini sendiri memiliki

beragam efek transisi yang bisa Anda pilih.

Nanti, kita akan belajar bagaimana memi-

lih efek transisi sesuai kebutuhan Anda.

Cobalah amati juga hyperlink yang ada

di dalam masing-masing foto. Begitu satu

buah foto muncul di jendela browser,

kursor mouse berubah menjadi gambar ta-

ngan yang menandakan adanya hyperlink

pada foto tersebut. Jika diklik, seorang pe-

ngunjung bisa dibawa pergi oleh browser ke

alamat tertentu seperti dulu telah Anda

atur.

Modifikasi Album Foto

Mengatur Warna LatarBelakang

Secara default, album foto berbasis Flash

ini memiliki warna latar putih seperti gam-

bar di atas. Hasilnya, mungkin sekitar foto

18

akan tampak polos tak berseni. Kalau mau,

Anda bisa menggantinya dengan warna

kesukaan Anda sendiri. Atau, Anda juga

bisa mengatur warna latar belakang album

foto itu menyerupai atau sama persis de-

ngan warna latar belakang halaman web.

Caranya, masih tetap menggunakan

jendela “Flash Element”. Klik bagian

‘BgColor’ dan pilihlah deretan warna yang

ada di situ. Jika sudah, simpan lagi doku-

men web ini dan munculkan di jendela

browser. Hasilnya, sekarang Anda sudah

punya album foto berlatar belakang beda.

Warna Latar Belakang: Warna Latar Belakang: Warna Latar Belakang: Warna Latar Belakang: Warna Latar Belakang: Dengan sentuhanwarna latar belakang, album foto Anda tidak lagitampak polos. Jika perlu, sesuaikan warna latarbelakang album foto menyerupai atau miripwarna latar belakang halaman web.

Pilihlah warna latar belakang lain dan

berkreasilah sesering mungkin.

Modifikasi Album Foto

Mengatur KetebalanBorder

Selain modifikasi pada warna, untuk men-

cegah album foto online di atas tampak

polos, Anda juga bisa melakukan modifi-

kasi pada border. Secara default, album

foto online tersebut tidak dipagari oleh

border. Jika mau, Anda bisa memagarinya.

Coba Anda kembali lagi ke “Flash Ele-

ment”. Di situ, ada tiga bagian yang ber-

fungsi untuk mengatur border, yaitu

‘Frame Color’, ‘Frame Show’, dan ‘Frame

Thickness’. Pertama kali, Anda harus me-

nyalakan border terlebih dulu dengan

mengklik bagian ‘Frame Show’. Pilihlah

‘Yes’ setelah muncul menu drop-down. Se-

telah itu, baru Anda atur warna border ter-

sebut pada bagian ‘Frame Color’. Seberapa

tebalkah frame ini? Aturlah pada bagian

‘Frame Thickness’. Semakin besar angka-

nya, semakin tebal pula garis border ini.

Garis Border: Garis Border: Garis Border: Garis Border: Garis Border: Garisborder mencegahtimbulnya area kosongdi sekitar album foto.


Efek Transisi

Mengatur Efek TransisiAlbum Foto

Setiap foto yang ada di dalam album pasti

akan diganti dengan foto berikutnya. Nah,

ketika foto itu diganti dengan yang lain,

Flash MX akan menyisipkan efek khusus

yang disebut efek transisi. Jadi, pada saat

itu, foto yang baru akan muncul sedemiki-

an rupa sehingga secara visual tampak me-

narik.

Kurang lebih ada sepuluh efek transisi

yang bisa Anda pilih. Secara default,

Dreamweaver MX 2004 akan memilih

efek transisi ‘Random’ yang artinya, efek

transisi dipilih secara acak. Jadi, mungkin

foto pertama akan menggunakan efek

‘Zoom’ sedangkan foto selanjutnya mema-

kai teknik ‘Fade’. Dengan begitu, setiap foto

mungkin akan memiliki efek beragam. Tapi,

jika Anda tidak ingin menggunakan efek

transisi apa pun, Dreamweaver MX 2004

menyediakan option ‘None’ buat Anda.

Cara memilih efek transisi cukup gam-

pang. Klik option ‘Transition Type’ yang

ada di panel “Flash Element”. Pilihlah salah

satu option yang ada di situ.

Blind: Blind: Blind: Blind: Blind: Efek transisi seperti gambar di sampingkiri ini, yaitu efek blind, muncul dalam hitungandetik ketika terjadi pergantian foto dari satumenuju yang lain.

Slide Foto

Mengontrol Slidepada Album Foto

Ada tiga tombol dalam album foto online

di atas. Memang, tidak ada penamaan per-

sis terhadap tiga tombol itu. Tapi, saya

mencoba untuk memberinya nama secara

bebas. Tombol pertama dapat dikatakan

sebagai tombol ‘Previous’. Fungsinya un-

tuk melihat foto sebelumnya. Jadi, kalau

Anda sedang melihat foto nomor 3 maka al-

bum ini akan mencari foto nomor 2 setelah

Anda menekan tombol ‘Previous’ ini. Tom-

bol paling pojok kanan berlawanan dengan

tombol pertama sebab fungsi tombol itu

adalah untuk melihat foto selanjutnya. Tom-

bol ini bisa diberi nama tombol ‘Next’.

Sedangkan tombol yang ada di tengah

dapat diberi nama tombol ‘Play’. Mengapa

demikian? Album foto online berbasis

Flash MX ini memang unik sebab konsep

sebenarnya adalah slide foto. Jadi, jika

Anda menekan tombol ‘Play’ ini, Flash

akan memunculkan foto-foto itu satu per

satu dalam rentang waktu tertentu. Dan,

foto itu akan berganti secara otomatis tan-

pa Anda menekan tombol apa pun. De-

ngan demikian, prinsip kerjanya menyeru-

pai slide yang akan bergerak secara otomatis.

Lantas, apakah Dreamweaver MX

2004 menyediakan kontrol untuk menga-

tur slide ini? Ada tiga kontrol untuk meng-

atur slide ini, yaitu ‘SlideAutoPlay’, ‘Slide

Delay’, dan ‘Slide Loop’. Kesemuanya itu

dapat Anda temukan di jendela ‘Flash Ele-

ment’. Kontrol pertama, yaitu ‘SlideAuto-

20

Play’ berfungsi untuk mengatur apakah slide

akan berjalan otomatis saat album online ini

muncul di jendela browser. Jika Anda jawab

‘No’ maka Anda harus menekan tombol

‘Play’ untuk memainkan slide ini. Tapi seba-

liknya, jika Anda jawab ‘Yes’ maka saat itu

juga album foto online ini akan bekerja.

Berapa lama masing-masing foto mun-

cul di jendela browser? Tentukanlah pada ba-

gian ‘Slide Delay’. Lamanya waktu tayang

tiap-tiap foto dihitung dalam satuan detik

yang dapat Anda ubah sesuai selera. Semakin

besar angkanya, semakin lama tayangnya.

Terakhir adalah ‘Slide Loop’. Ketika al-

bum foto ini sudah berada di posisi foto

terakhir, apa yang akan terjadi kemudian?

Apakah slide ini berhenti bergerak atau

akan berulang ke foto pertama? Tentukan

jawabannya pada bagian ‘Slide Loop’ ini.

Kontrol Slide:Kontrol Slide:Kontrol Slide:Kontrol Slide:Kontrol Slide:Pada prinsipnyaalbum fotoonline berbasisFlash MX inimengikuti carakerja slide foto.

Memberi Judul

Pengaturan Judulpada Album Foto

“Ini foto tentang apa?” Bagaimana kalau

ada seseorang bertanya kepada yang lain saat

mereka melihat album foto online Anda?

Kalau ia punya jawabannya maka Anda tak

perlu repot-repot memberi judul pada album

foto ini. Tapi, di dunia ini ada ratusan sampai

ribuan orang yang butuh ‘pencerahan’ ten-

tang tema album foto Anda. Daripada Anda

menjawab satu demi satu, akan lebih baik

jika album foto ini Anda beri judul.

Caranya, carilah option yang berhu-

bungan dengan ‘title’ di jendela ‘Flash Ele-

ment’. Di situ Anda akan temukan ‘title’

untuk mengatur teks yang nanti akan men-

jadi judul album foto ini. Masukkan teks ini

di sana. Di bawahnya ada ‘titleColor’. Fung-

sinya untuk mengatur warna judul album

ini. Anda bisa memilih warna apa pun yang

Anda mau. Kemudian, ada ‘titleFont’. Jelas,

fungsinya untuk mengatur jenis font pada

judul. Secara default, Dreamweaver MX

2004 menggunakan font Verdana yang bisa

Anda ubah menjadi yang lain. Terakhir, ada

‘titleSize’ yang berfungsi untuk mengatur

besar kecilnya teks judul.

PenampakanPenampakanPenampakanPenampakanPenampakanJudul: Judul: Judul: Judul: Judul: Supayajelas, ada kalanyaAnda butuhkehadiran judulpada album fotoini.

Anda bisa juga mengatur warna judul

untuk menyelaraskan warna teks judul de-

ngan latar belakang, warna album foto dan

sebagainya. Pada prinsipnya, album foto

online ini akan tampak manis dengan sen-

tuhan kreatif seperti itu.

Sp membuat web album foto

Education

Transcript of Sp membuat web album foto