Special Project Photoshop

1. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 1
Spesial Project Dreamweaver MX 2004
Membuat Web
Album 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-orang
yang tak lain adalah alumni SMA saya dulu. Untuk ukuran situs lokal, Fotografer.Net
memang menggebrak. Lantas, bagaimana rahasia pembuatan Web Album Foto itu
sendiri?

2. 2
Pendahuluan
Memang benar bahwa mayoritas netters berselancar di dunia internet
karena ingin mencari content. Tapi, content (isi) tidak selalu
identik dengan teks. Dalam dunia website, gambar merupakan
salah satu unsur yang dominan. Tak heran jika gambar atau
foto kemudian beralih fungsi. Gambar tidak lagi berfungsi
sebagai pemanis tampilan tapi sudah beralih sebagai content.
Mau bukti? Situs Fotografer.Net laris karena orang ingin me-
lihat isi dalam wujud gambar atau foto!
Latar Belakang menawan sekalipun. Namun, dalam hi-
tungan beberapa minggu saja, situs ini
Apa itu Web
meneguk sukses luar biasa.
Foto Album?
Di luar negeri, kita mengenal situs-si-
Lantas, apa sebenarnya yang dimaksud de- tus penyedia foto seperti TonyStone.Com
ngan Web Album Foto itu? Jika diterje- meskipun dengan tujuan yang berbeda.
mahkan secara “apa adanya”, yang dimak- Fotografer.Net sampai saat ini masih ber-
sud dengan Web Album Foto itu adalah bentuk komunitas penggemar fotografi.
website yang di dalamnya terkandung ko- Sedangkan TonyStone.Com lebih ke arah
leksi foto-foto yang bisa dilihat dan diak- jual beli foto-foto. Namun, kita tetap bisa
ses—syukur-syukur disimpan—oleh setiap
orang. Jadi pada prinsipnya, web album Fotografer.Net: Situs lokal seperti Fotografer.Net
ini meskipun hanya dipromosikan secara
foto adalah website berisi ratusan bahkan terbatas namun pengaruhnya sungguh besar di
ribuan koleksi foto. komunitas fotografi.
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

3. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 3
TonyStone.Com: Meskipun menyimpan
onyStone
yStone.
ribuan koleksi foto, arah dan tujuan
TonyStone.Com berbeda dengan
Fotografer.Net. Situs ini lebih memilih
aktivitas jual-beli foto.
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
mengambil beberapa koleksi foto yang ada otomatis bilamana anggota itu sudah ikut
di situs yang juga bisa diakses lewat alamat berpartisipasi atau belum. Namun, jika ti-
GettyImages.Com itu. dak ingin memakai cara seperti ini, Anda
bisa meng-upload foto-foto koleksi Anda
Memenuhi Syarat-syarat sendiri untuk konsumsi banyak orang.
Cara ini lebih praktis, hanya saja menguras
Syarat Membuat
energi.
Web Album Foto
Jika Anda sudah punya koleksi foto da-
Membuat website album foto seperti lam jumlah besar, kini Anda hanya tinggal
Fotografer.Net tidaklah enteng. Anda ha- mendesain situs ini saja. Bagaimana
rus memenuhi syarat-syarat tertentu. Sya- mendesainnya? Ada banyak cara. Salah
rat utamanya adalah harus memiliki kolek- satu cara yang saya rekomendasikan adalah
si foto ratusan hingga ribuan buah dan ha- menggunakan Macromedia Dreamweaver
rus di-update setiap saat. Lantas, dari mana MX 2004.
datangnya koleksi foto-foto itu? Foto itu Software yang masih saudara dengan
bisa berasal dari Anda sebagai webmaster Flash MX 2004 ini memang sudah dileng-
serta pengelolanya atau berasal dari para kapi beberapa fasilitas untuk membuat al-
pengunjung. bum foto online, baik yang berbasis
Kita ambil contoh kasus di Foto- HTML murni maupun Flash. Tapi, kalau
grafer.Net. Setiap member wajib ikut ber- itu semua belum cukup, Anda bisa mema-
partisipasi dalam situs ini dengan cara me- dukan Dreamweaver MX 2004 dan Active
nyumbangkan beberapa foto hasil kreasi Server Pages untuk membuat album foto
mereka sendiri. Bagaimana jika tidak? Per- online yang lebih interaktif dan dinamis.
tama, keanggotaan mereka akan dihenti- Cara terakhir ini memang lebih sulit kare-
kan. Kedua, mereka tidak bisa melihat na kita harus mengerti dulu dasar-dasar
foto-foto lain yang ada di situs itu dalam ASP Database. Untungnya, di tanah air

4. 4
ini, topik tentang ASP Database sudah se- Dreamweaver MX 2004 dan Macromedia
demikian melimpah sehingga saya harap Fireworks MX 2004 bekerja. Anda bisa
Anda tidak mengalami banyak kesulitan. menggunakan beragam variasi operating
Jadi, yang Anda perlukan untuk mem- system, khususnya yang berbasis MS Win-
buat web album foto sendiri adalah sebagai dows, seperti MS Windows 9x, 2000,
berikut: 2003, atau XP. Saya rekomendasikan agar
Anda menggunakan seri 2000/2003 atau
Macromedia Dreamweaver MX 2004 XP sebab Dreamweaver MX 2004 ini bu-
Software buatan Macromedia ini merupa- tuh banyak sumber daya.
kan software utama yang akan kita pakai.
Di dalam versi MX 2004 ini ada beberapa Macromedia Extension Manager
fasilitas instan untuk membuat web album Aplikasi ini biasanya telah ikut terinstall
foto sendiri. Kita akan telusuri fasilitas-fa- saat Anda menginstall Dreamweaver MX
silitas tersebut. 2004 ke dalam komputer Anda. Fungsinya
adalah untuk mendata extension-exten-
Macromedia Fireworks MX 2004 sion yang bekerja dalam lingkungan
Software yang masih saudara kandung de- Dreamweaver MX 2004.
ngan Dreamweaver MX 2004 ini hanya
kita pakai sebagai pelengkap. Ada fasilitas Browser
yang terdapat di Dreamweaver MX 2004 Software ini berfungsi sebagai alat uji coba
yang tidak bisa bekerja jika Anda tidak pu- website album foto. Anda bisa mengguna-
nya software desain grafis ini. Selain itu, kan Internet Explorer, Netscape, atau
Fireworks MX 2004 kita pakai untuk NeoPlanet sekalipun.
membuat efek-efek spesial pada gambar.
Anda bebas memilih versi, apakah mau
menggunakan Fireworks MX 2004 atau
Fireworks MX saja.
Flash Player
Kita 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/XP
Yang Anda butuhkan selanjutnya adalah
Flash Player: Plug-In Flash Player pada browser
operating system tempat Macromedia berfungsi untuk “memainkan” animasi Flash.

5. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 5
Command Dreamweaver MX 2004
Salah satu trik termudah untuk membuat web album foto adalah meng-
gunakan salah satu command yang ada di Dreamweaver MX 2004. Cara
pakainya cukup sederhana dan prosesnya berlangsung sangat cepat!
Command Dreamweaver MX 2004 ngan jumlah gambar yang akan menja-
di album foto. Jadi, jika gambar yang
Cara Cepat
kita libatkan berjumlah 30 buah, hala-
Membuat Web Album Foto
man web yang tercipta akan sebanyak
Macromedia Dreamweaver MX 2004 me- 30 halaman pula.
miliki fasilitas “Create Web Photo Album” K Menciptakan tombol navigasi otoma-
yang tersimpan di bagian Menu Com- tis: Tiap-tiap halaman web dilengkapi
mand. Ini adalah cara paling ringkas dalam dengan tombol—atau lebih tepatnya
membuat web album foto. Fasilitas ini ber- link—navigasi. Jadi, pengunjung bisa
interaksi dengan Macromedia Fireworks bergerak ke gambar berikutnya (Next)
MX (2004). Dengan begitu, fasilitas ini ti- atau sebelumnya (Previous).
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:
K 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.
K Menciptakan halaman web untuk
Create Web Photo Album: Fasilitas instan ini
tiap-tiap gambar: Command ini akan berfungsi untuk membuat web album foto
menciptakan halaman web khusus un- secara cepat, praktis, dan langsung jadi. Ia akan
tuk memunculkan gambar berformat mengerjakan empat tugas sekaligus, yaitu
menciptakan thumbnail, tombol navigasi,
besar satu per satu. Jumlah halaman halaman web khusus, serta me-layout tampilan
web yang akan dibuat sebanding de- album foto online agar tampak manis.

6. 6
K Menciptakan layout otomatis: Album Begitu Anda selesai melakukan langkah
foto online ini akan didesain menggu- kecil di atas, Anda akan masuk ke jendela
nakan tabel. Gambar-gambar kecil khusus seperti gambar di bawah ini. Nama
(thumbnail) akan ditata menggunakan jendela itu adalah Create Web Photo Album.
tabel secara otomatis. Anda bisa meng- Ada beberapa bagian dalam jendela
atur berapa kolom yang dibutuhkan tersebut yang harus Anda isi. Pertama,
untuk menampung semua gambar itu. Anda wajib mengisi judul dari album foto
ini. Mungkin, Anda ingin memberi judul
Menggunakan Command pada album foto seperti “Foto Liburan di
Langkah-langkah Bali” atau “Foto Taksir-Taksiran”. Anda isi
Membuat Album Foto judul itu pada text-box “Photo Album
Title”. Lantas, Anda wajib mengisi
Sekarang, saya akan beberkan rahasia subjudul pada text-box “Subheading info”.
pembuatan album foto paling praktis Siapa tahu judul album foto ini memiliki
menggunakan Command Object. Lang- subjudul. Misalnya, kalau judulnya “Foto
kah-langkah yang akan Anda lakukan cu- Liburan di Bali” mungkin subjudulnya
kup simpel, tidak lebih dari lima menit menjadi “Liburan di Sangeh”.
pengerjaan (kecuali jika album foto ini Ketiga, Anda akan menjumpai text-
memuat banyak koleksi dan komputer box “Other Info”. Kalau foto itu punya ke-
Anda sudah tergolong out-of-date). terangan tambahan, seperti tanggal pem-
Pertama, siapkan dokumen website buatan, nama si pemotret, atau lainnya,
baru, boleh HTML ataupun ASP. Kedua, masukkanlah di bagian ini.
klik menu Command > Create Web Langkah keempat dan kelima saling
Photo Album seperti diilustrasikan pada bertautan. Pada langkah keempat, Anda
gambar di bawah ini: 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.
Menu: Memilih menu Create Web Photo Album
dari Menu Command Dreamweaver MX 2004.
Jendela Create Web Photo Album (Kanan):
Gambar di kanan adalah ilustrasi dari jendela
Create Web Photo Album. Kalau Anda ingin
membuat foto album secara cepat dan praktis,
pakailah jendela seperti gambar di samping.

7. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 7
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
Memilih Folder: Pilihlah folder tempat koleksi untuk thumbnail dan file foto dalam ukur-
foto-foto Anda berada. Setelah itu, pilih folder an sesungguhnya pada menu drop-down
sekali lagi sebagai tempat untuk menyimpan
foto-foto tersebut, lengkap dengan thumbnail
‘Thumbnail Format’ dan ‘PhotoFormat’.
dan halaman web-nya. Berapa ukuran masing-masing foto? Jika
Anda ingin ukuran yang sebenarnya, pilih
Mungkin, Anda sudah punya folder khusus
100% pada bagian “Scale”.
untuk menyimpan arsip web dan semua
Terakhir, klik check box “Create naviga-
dokumennya, mungkin di C:InetPub
tion page for each photo” jika masing-ma-
wwwrootfotoalbumgambar. Tulislah folder
sing foto memiliki link navigasi. Dengan
ini pada text-box Destination Folder.
adanya link navigasi, pengunjung bisa ber-
Langkah keenam, Anda tentukan u-
gerak ke satu foto menuju foto lainnya se-
kuran thumbnail untuk masing-masing
cara lebih mudah.
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 Konfigurasi Akhir: Tampak pada gambar di
onfigurasi Akhir:
mengubahnya? Ubahlah angka yang ada di atas, kita telah selesai melakukan konfigurasi
situ dengan mengklik menu drop-down akhir untuk pembuatan album foto online ini.
Setelah Anda mengklik tombol OK, album foto
tersebut. Ada beragam pilihan, mulai dari ini akan selesai dalam waktu cepat.
36x36, 72x72, 144x144 dan sebagainya.
Apakah nama file ini akan dimuncul- Tekan OK jika sudah. Kini, Anda akan li-
kan pada album foto? Jika ya, langkah ketu- hat Macromedia Dreamweaver MX 2004
juh yang harus Anda lakukan adalah meng- akan memanggil saudaranya, Fireworks MX.
klik check box Show Filenames sampai ia Dan software grafis ini akan melakukan tu-
tercentang. gasnya barang sejenak. Lama cepatnya proses
Foto-foto ukuran kecil (thumbnail) ini sangat bergantung pada banyak sedikitnya
akan ditata menggunakan tabel. Berapa koleksi foto yang Anda ambil.

8. 8
Proses di Belakang Lay ar: Di belakang layar, Macromedia Fireworks MX melakukan tugasnya, yaitu
Proses Belakang Layar:
menduplikasi foto-foto dalam ukuran besar dalam ukuran thumbnail dan menyimpannya ke
Destination Folder seperti pilihan Anda tadi.
Tunggulah sejenak dengan sabar. Dan, dipenuhi dengan foto-foto atau gambar-
jika proses telah berakhir, Anda akan kem- gambar dalam ukuran seragam, mungkin
bali ke aplikasi Dreamweaver MX 2004. 100x100 pixel atau ukuran lainnya. Foto-
Selanjutnya, Anda akan melihat kotak dia- foto itu tertata rapi oleh sebuah tabel yang
log seperti gambar di samping. 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
Selesai!: Kotak dialog tanda proses sudah
selesai.
Anda mengeceknya nanti, Anda akan
menjumpai puluhan file HTML yang telah
Sekarang, Anda sudah mendapati kenya- memuat tiap-tiap foto dalam ukuran besar.
taan yang unik. Dokumen baru yang tadi Bagaimana kita melihat file-file HTML
Anda buat masih kosong melompong, putih ini? Pada pengujian nanti, file-file ini akan
tak bercela. Namun kini, dokumen ini sudah muncul di jendela browser.

9. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 9
One-Stop Photo Album: Pengerjaan album foto seperti gambar di atas tampaknya begitu runyam dan
butuh organisasi file yang membosankan. Padahal, proses sesungguhnya berlangsung sangat singkat
dan hemat energi.
pai album foto online ini muncul di jende-
Menguji pada Browser
la browser seperti gambar di bawah ini:
Menguji Album Foto pada
Jendela 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-

10. 10
Setiap gambar yang ada di dalam al- Memoles Album Foto
bum foto mengandung link. Cobalah arah-
CSS untuk Merias
kan kursor mouse di atas gambar itu dan
Album Foto
cermati perbedaannya. Kursor itu pasti
akan berubah ke bentuk gambar sepotong Mari kita kembali ke aplikasi Dreamweaver
tangan yang menandakan adanya link di MX 2004, masih bersama dengan album
dalam gambar itu. foto garapan kita. Mungkin, Anda merasa
Coba Anda klik gambar itu dan Anda bahwa tampilan album foto ini masih se-
akan melihat gambar atau foto dalam u- derhana dan polos. Kita bisa saja memoles-
kuran yang lebih besar (100%). 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.
Ukuran Sesungguhnya: Jika Anda mengklik sebuah
Lewat jendela inilah kita akan
thumbnail, akan muncul kemudian gambar atau foto dalam lakukan pengaturan. Pengaturan
ukuran sesungguhnya seperti ilustrasi di atas. yang bisa dilakukan lewat CSS
Styles bersifat global, tidak melulu
Di atas gambar itu ada link navigasi, yaitu hanya tabel saja. Anda bisa atur posisi sebu-
“Previous | Home | Next”. Gunakan link ah objek pada halaman web, mengatur
navigasi itu untuk berpindah dari satu gam- efek-efek khusus seperti efek pada link,
bar atau foto menuju gambar lainnya. Con- efek transisi halaman web (hanya bekerja
tohnya, link “Previous” dipakai untuk berge- pada browser Internet Explorer), dan efek-
rak ke gambar sebelumnya, sedangkan link efek unik lainnya.
“Next” untuk bergerak ke gambar berikut- Dan kita mulai dari pengaturan khusus
nya. Terakhir, link “Home”, berfungsi untuk untuk memoles garis-garis border tabel
kembali ke halaman utama album foto. pada album foto online ini.

11. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 11
CSS Styles: Mengaktif-
kan jendela CSS Styles
dengan mengklik menu
Styles.
Window > CSS Styles CSS Style Definition for .garisalbum: Di sinilah
kita akan mengonfigurasi garis border pada
tabel.
Arahkan kursor Anda di atas jendela
CSS Styles yang baru saja terbuka tadi. Klik Karena kita akan mengatur garis bor-
tombol kanan mouse sampai muncul der pada tabel maka kita pilih option “Bor-
shortcut menu. Pilih “New…”. Anda akan der” yang ada di bagian “Category”. Begitu
dibawa masuk ke dalam jendela baru, yaitu pilihan ini Anda ambil, Anda akan melihat
“New CSS Style”. tampilan baru pada jendela “CSS Style
Definition for .garisalbum” ini. Gambar-
Membuat Style CSS Baru:
Menggunakan jendela New nya tampak seperti berikut:
CSS Style seperti gambar di
bawah ini, kita akan
menciptakan gaya pada
border tabel.
Pada bagian “Name”, ketikkan Kategori Khusus Border: Kategori seperti
“.garisalbum”. Sementara itu, klik radio gambar di atas khusus berfungsi untuk
button “Class (can apply to any tag)” pada mengatur gaya-gaya border.
bagian “Selector Type”. Terakhir, klik “This
Document Only” jika Anda masuk ke ba- Di situ ada tiga bagian utama, yaitu
gian “Define In”. Tekan tombol OK sesu- Style, Width, dan Color. Klik menu drop-
dahnya. down “Top”. Setelah muncul beberapa
Kini, Anda masuk ke dalam jendela model border, pilihlah “Dotted” agar garis
baru bernama “CSS Style Definition for border ini berupa bintik-bintik. Jika setiap
.garisalbum”. sisi border ingin memiliki gaya yang sama,
Gambarnya tampak seperti ilustrasi di klik check box “Same for all”. Namun, jika
atas ini. setiap sisi ingin punya gaya yang unik,

12. 12
hapuslah tanda centang pada check box Dan inilah cara untuk mengaplikasikan
“Same for all” dengan cara mengkliknya CSS Style yang tadi telah kita buat ke dalam
kembali. Setelah itu, pilihlah gaya border garis border. Klik tombol kanan mouse sam-
yang lain. pai muncul shortcut menu. Arahkan pada
Kemudian, beralihlah ke bagian Width “CSS Sytles > .garisalbum”.
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.
Memilih CSS Style:
Terakhir, klik tombol OK agar Anda
Langkah-langkah ini kita
kembali lagi ke dokumen album foto tempuh untuk
online. Sekarang amatilah, kini jendela mengaplikasikan CSS
Style pada garis sisi luar
CSS Styles telah merekam gaya atau style
tabel.
baru, yaitu .garisalbum seperti gambar di
bawah ini: Kini, garis sisi luar tabel akan berupa
bintik-bintik. Mungkin, Dreamweaver
Gaya Baru: Setelah
Anda melewati MX 2004 tidak memunculkannya secara
proses seperti tadi, langsung. Kita akan melihatnya nanti pada
Anda akan
jendela browser.
mendapat imbalan
berupa gaya baru
yang siap
diaplikasikan pada
border 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):
Setelah lewat proses panjang, akhirnya album
foto online ini punya garis border baru.
Memilih Garis Sisi Luar Tabel (Kiri): Kita akan
memberi pola pada garis sisi luar tabel sesuai
gaya CSS yang tadi telah kita tentukan.

13. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 13
Fo
Album Fo to Flash!
Cara praktis kedua untuk membuat album foto online adalah menggunakan
Flash MX. Tentu, kita tidak akan masuk ke aplikasi ciptaan Macromedia
yang paling kondang ini. Sebaliknya, kita masih tetap menggunakan
Dreamweaver 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 Meskipun memiliki kelebihan seperti
itu, animasi Flash MX harus di-support pe-
Album Foto
nuh oleh browser. Dengan kata lain,
Beranimasi Flash
browser harus benar-benar mampu menja-
Kreasi album foto itu bisa bermacam-ma- lankan animasi Flash MX secara utuh. Ca-
cam. Dulu, kita hanya membuat album ranya, Anda harus menginstal Macro-
foto statis saja, yaitu gambar dalam posisi media Flash Player terlebih dulu. Selama
diam dan ketika gambar itu diklik browser proses instalasi, aturlah agar Flash Player ini
akan memunculkan gambar itu dalam for- menjadi plug-in bagi browser.
mat besar. Ini bisa dikatakan album foto Di dalam bagian ini, kita akan belajar
gaya lama. Bagaimana dengan album foto bagaimana membuat album foto online
artistik ala Flash MX? berbasis Flash MX menggunakan Macro-
Semua orang pasti tahu bahwa Flash media Dreamweaver MX 2004.
MX adalah software perancang animasi
berbasis website. Kalau album foto ini di-
Album Foto Gaya Flash: Karena berbasis Flash
buat menggunakan Flash MX, pasti album MX, album foto ini menjadi kaya akan animasi
foto ini juga full animasi. Memang ada dan special effect, seperti 3D, misalnya. Namun
benarnya. Album foto yang diciptakan demikian, browser Anda harus support animasi
Flash MX secara penuh.
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!

14. 14
Kreatif dengan Flash di-attach ke dalam dokumen web Anda.
Menggunakan Simpan dengan nama “albumfoto.swf ”.
Image Viewer Setelah itu, tekan tombol Save.
Begitu proses ini selesai, Anda akan
Bagaimana caranya membuat album foto mendapat satu buah kotak berwarna abu-
animasi berbasis Flash MX? Gampang. abu yang di tengahnya tertempel logo Flash
Anda hanya butuh satu langkah saja. MX. Di sinilah nanti album foto Anda
Macromedia Dreamweaver MX 2004 pu- akan berada. Jika perlu, Anda bisa menga-
nya fasilitas yang disebut “Image Viewer”. tur posisi yang pas untuk tempat peletakan
Fasilitas instan ini sebenarnya berfungsi album foto online ini.
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.
Posisi Album Foto Online: Kotak berwarna
abu-abu dengan logo Flash di tengahnya itu
menandakan posisi album foto online di dalam
Memilih Image halaman web. Anda bisa mengaturnya semau
Viewer: Menu ini Anda.
berfungsi untuk
membuat album foto
berbasis Flash MX.
Apakah album foto ber-Flash ini sudah
siap tayang? Sebenarnya belum. Anda be-
Sebelum Anda mendapat album foto lum menentukan foto-foto apa saja yang
online ini, Anda harus menyimpan sebuah akan muncul nanti dan mau ke mana para
file Flash Movie. File ini selanjutnya akan 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.
Menyimpan File Flash Movie: Sebelum
ada album foto online, Anda harus
menyimpan dulu sebuah file flash movie
yang nanti akan di-attach ke dalam
halaman web Anda.

15. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 15
Kalau Anda amati, album foto tersebut Mengatur Lebih Jauh
tidaklah berukuran besar. Akibatnya, foto-
Melakukan Konfigurasi
foto yang nanti akan muncul di jendela
Atas Album Foto
web juga tidak besar-besar amat. Lantas?
Kalau Anda ingin foto-foto itu relatif lebih Seperti tadi telah dikemukakan, album
besar, Anda harus ubah terlebih dulu ukuran foto ini jauh dari siap. Pertama, Anda be-
album foto tersebut. Caranya, coba Anda lum mengatur foto-foto mana saja yang
klik album foto itu sampai ia dalam keada- akan muncul. Kedua, Anda belum menga-
an terpilih. Di situ, ada panel Properties tur bagaimana cara kerja album foto ini.
yang akan mengatur segala hal yang berkait- Pada putaran pertama, kita akan menen-
an dengan album foto itu. Gambarnya se- tukan foto-foto atau gambar-gambar yang
bagai berikut: akan masuk ke dalam album foto ini.
Caranya, klik album foto
itu sekali lagi. Begitu
Anda selesai melakukan-
nya, Dreamweaver MX
Panel Properties: Panel ini berfungsi untuk mengatur beberapa hal
menyangkut album foto online seperti ukuran dan sebagainya. 2004 akan mengeluarkan
jendela “Flash Element”
Pada panel itu sudah tersedia dua buah yang tugasnya mengatur hal-hal yang berka-
kotak, W dan H. Dua kotak itu berfungsi itan dengan file Flash yang ada di dokumen
untuk mengatur ukuran album foto web, termasuk album foto berbasis Flash ini.
online di atas. Coba ubah nilai yang ada di Berikut gambar jendela “Flash Element” yang
kotak W dan H. Sekarang, Anda akan akan Anda dapatkan.
mendapat ukuran album foto online yang
Flash Element:
baru, entah lebih besar atau lebih kecil. Jendela ini
berfungsi untuk
mengatur
konfigurasi file
Flash yang ada
di 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.
Ukuran Baru: Kini, album foto online berbasis Setelah itu, Anda akan masuk ke da-
Flash ini sudah punya ukuran baru. Kali ini, lam jendela “Edit ImageURLs Array” seper-
ukurannya lebih besar. ti gambar berikut.

16. 16
Lakukan langkah-langkah di atas beru-
lang kali sampai koleksi foto dirasakan su-
dah cukup banyak.
Jendela “Edit ImageURLs Array”: Jendela ini
berfungsi untuk menentukan file-file foto mana
saja yang akan dimasukkan ke dalam album foto.
Daftar File Foto: Jika dirasa sudah cukup
Secara default, ada tiga buah file ‘fiktif” di
banyak, Anda bisa menghentikan proses ini.
sana, yaitu img1.jpg – img3.jpg. Karena sifat-
nya ‘fiktif’ Anda bisa menghapus ketiganya Tiap-tiap foto yang ada di dalam album
menggunakan tombol [-]. Setelah itu, tekan ini bisa disispi sebuah link. Dengan begitu,
tombol [+] untuk menambah file baru. 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-
Menambah Koleksi Foto: Setelah menekan suk ke jendela “Edit ImageLinks Array”
tombol [+], Anda bisa menambah koleksi foto baru seperti gambar berikut:
yang akan muncul di album foto Flash MX ini.
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.
Alamat URL: Tiap-tiap foto bisa disisipi alamat
URL yang akan menuju ke situs lain.
Gunakan tombol [+] atau [-]. Dan tu-
lislah alamat URL pada kotak yang telah
tersedia.
File Browsing: Teknik termudah untuk memilih
Brow
owsing:
sebuah file adalah dengan menggunakan teknik
file browsing seperti gambar di samping kiri ini.

17. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 17
Album Foto Flash MX: Setelah semua file foto Anda masukkan ke dalam album, album foto Flash MX
ini sudah siap untuk ditayangkan ke jendela browser seperti gambar di atas.
Kini, Anda tinggal men-save dokumen lih efek transisi sesuai kebutuhan Anda.
web ini dalam sebuah file. Setelah itu, Cobalah amati juga hyperlink yang ada
Anda masuk ke babak pengujian di mana di dalam masing-masing foto. Begitu satu
Anda wajib menggunakan browser untuk buah foto muncul di jendela browser,
mengetes album foto online ini. Aktifkan kursor mouse berubah menjadi gambar ta-
browser Anda, entah IE, Netscape, atau ngan yang menandakan adanya hyperlink
NeoPlanet asal ber-plug-in Macromedia pada foto tersebut. Jika diklik, seorang pe-
Flash Player, dan akseslah halaman web al- ngunjung bisa dibawa pergi oleh browser ke
bum foto tersebut. Jika prosesnya berjalan alamat tertentu seperti dulu telah Anda
lancar, Anda akan melihat tampilan gam- atur.
bar seperti ilustrasi di atas.
Gunakan tombol-tombol navigasi Modifikasi Album Foto
yang ada di situ untuk bergerak dari satu Mengatur Warna Latar
foto ke foto lainnya. Amati efek transisi Belakang
yang terjadi ketika satu foto diganti oleh
foto lainnya. Aplikasi ini sendiri memiliki Secara default, album foto berbasis Flash
beragam efek transisi yang bisa Anda pilih. ini memiliki warna latar putih seperti gam-
Nanti, kita akan belajar bagaimana memi- bar di atas. Hasilnya, mungkin sekitar foto

18. 18
akan tampak polos tak berseni. Kalau mau, Modifikasi Album Foto
Anda bisa menggantinya dengan warna
Mengatur Ketebalan
kesukaan Anda sendiri. Atau, Anda juga
Border
bisa mengatur warna latar belakang album
foto itu menyerupai atau sama persis de- Selain modifikasi pada warna, untuk men-
ngan warna latar belakang halaman web. cegah album foto online di atas tampak
Caranya, masih tetap menggunakan polos, Anda juga bisa melakukan modifi-
jendela “Flash Element”. Klik bagian kasi pada border. Secara default, album
‘BgColor’ dan pilihlah deretan warna yang foto online tersebut tidak dipagari oleh
ada di situ. Jika sudah, simpan lagi doku- border. Jika mau, Anda bisa memagarinya.
men web ini dan munculkan di jendela Coba Anda kembali lagi ke “Flash Ele-
browser. Hasilnya, sekarang Anda sudah ment”. Di situ, ada tiga bagian yang ber-
punya album foto berlatar belakang beda. 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 mencegah
timbulnya area kosong
di sekitar album foto.
Warna Latar Belakang: Dengan sentuhan
warna latar belakang, album foto Anda tidak lagi
tampak polos. Jika perlu, sesuaikan warna latar
belakang album foto menyerupai atau mirip
warna latar belakang halaman web.
Pilihlah warna latar belakang lain dan
berkreasilah sesering mungkin.

19. MEMBUAT WEB ALBUM FOT O
MEMBUA
UAT ALBUM FOT 19
Efek Transisi Slide Foto
Mengatur Efek Transisi Mengontrol Slide
Album Foto pada Album Foto
Setiap foto yang ada di dalam album pasti Ada tiga tombol dalam album foto online
akan diganti dengan foto berikutnya. Nah, di atas. Memang, tidak ada penamaan per-
ketika foto itu diganti dengan yang lain, sis terhadap tiga tombol itu. Tapi, saya
Flash MX akan menyisipkan efek khusus mencoba untuk memberinya nama secara
yang disebut efek transisi. Jadi, pada saat bebas. Tombol pertama dapat dikatakan
itu, foto yang baru akan muncul sedemiki- sebagai tombol ‘Previous’. Fungsinya un-
an rupa sehingga secara visual tampak me- tuk melihat foto sebelumnya. Jadi, kalau
narik. Anda sedang melihat foto nomor 3 maka al-
Kurang lebih ada sepuluh efek transisi bum ini akan mencari foto nomor 2 setelah
yang bisa Anda pilih. Secara default, Anda menekan tombol ‘Previous’ ini. Tom-
Dreamweaver MX 2004 akan memilih bol paling pojok kanan berlawanan dengan
efek transisi ‘Random’ yang artinya, efek tombol pertama sebab fungsi tombol itu
transisi dipilih secara acak. Jadi, mungkin adalah untuk melihat foto selanjutnya. Tom-
foto pertama akan menggunakan efek bol ini bisa diberi nama tombol ‘Next’.
‘Zoom’ sedangkan foto selanjutnya mema- Sedangkan tombol yang ada di tengah
kai teknik ‘Fade’. Dengan begitu, setiap foto dapat diberi nama tombol ‘Play’. Mengapa
mungkin akan memiliki efek beragam. Tapi, demikian? Album foto online berbasis
jika Anda tidak ingin menggunakan efek Flash MX ini memang unik sebab konsep
transisi apa pun, Dreamweaver MX 2004 sebenarnya adalah slide foto. Jadi, jika
menyediakan option ‘None’ buat Anda. Anda menekan tombol ‘Play’ ini, Flash
Cara memilih efek transisi cukup gam- akan memunculkan foto-foto itu satu per
pang. Klik option ‘Transition Type’ yang satu dalam rentang waktu tertentu. Dan,
ada di panel “Flash Element”. Pilihlah salah foto itu akan berganti secara otomatis tan-
satu option yang ada di situ. 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-
Blind: Efek transisi seperti gambar di samping
kiri ini, yaitu efek blind, muncul dalam hitungan
detik ketika terjadi pergantian foto dari satu
menuju yang lain.

20. 20
Play’ berfungsi untuk mengatur apakah slide Caranya, carilah option yang berhu-
akan berjalan otomatis saat album online ini bungan dengan ‘title’ di jendela ‘Flash Ele-
muncul di jendela browser. Jika Anda jawab ment’. Di situ Anda akan temukan ‘title’
‘No’ maka Anda harus menekan tombol untuk mengatur teks yang nanti akan men-
‘Play’ untuk memainkan slide ini. Tapi seba- jadi judul album foto ini. Masukkan teks ini
liknya, jika Anda jawab ‘Yes’ maka saat itu di sana. Di bawahnya ada ‘titleColor’. Fung-
juga album foto online ini akan bekerja. sinya untuk mengatur warna judul album
Berapa lama masing-masing foto mun- ini. Anda bisa memilih warna apa pun yang
cul di jendela browser? Tentukanlah pada ba- Anda mau. Kemudian, ada ‘titleFont’. Jelas,
gian ‘Slide Delay’. Lamanya waktu tayang fungsinya untuk mengatur jenis font pada
tiap-tiap foto dihitung dalam satuan detik judul. Secara default, Dreamweaver MX
yang dapat Anda ubah sesuai selera. Semakin 2004 menggunakan font Verdana yang bisa
besar angkanya, semakin lama tayangnya. Anda ubah menjadi yang lain. Terakhir, ada
Terakhir adalah ‘Slide Loop’. Ketika al- ‘titleSize’ yang berfungsi untuk mengatur
bum foto ini sudah berada di posisi foto besar kecilnya teks judul.
terakhir, apa yang akan terjadi kemudian?
Apakah slide ini berhenti bergerak atau Penampakan
Judul: Supaya
akan berulang ke foto pertama? Tentukan jelas, ada kalanya
jawabannya pada bagian ‘Slide Loop’ ini. Anda butuh
kehadiran judul
pada album foto
Kontrol Slide:
ini.
Pada prinsipnya
album foto
online berbasis
Flash MX ini
mengikuti cara
kerja slide foto.
Memberi Judul
Pengaturan Judul
pada 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 Anda bisa juga mengatur warna judul
foto ini. Tapi, di dunia ini ada ratusan sampai untuk menyelaraskan warna teks judul de-
ribuan orang yang butuh ‘pencerahan’ ten- ngan latar belakang, warna album foto dan
tang tema album foto Anda. Daripada Anda sebagainya. Pada prinsipnya, album foto
menjawab satu demi satu, akan lebih baik online ini akan tampak manis dengan sen-
jika album foto ini Anda beri judul. tuhan kreatif seperti itu.