MEMBUAT WEB ALBUM FOT O      MEMBUA          UAT     ALBUM FOT                                                           1...
2      Pendahuluan    Memang benar bahwa mayoritas netters berselancar di dunia internet    karena ingin mencari content. ...
MEMBUAT WEB ALBUM FOT O        MEMBUA            UAT     ALBUM FOT                                                        ...
4    ini, topik tentang ASP Database sudah se-        Dreamweaver MX 2004 dan Macromedia    demikian melimpah sehingga say...
MEMBUAT WEB ALBUM FOT O       MEMBUA           UAT     ALBUM FOT                                                          ...
6    K   Menciptakan layout otomatis: Album               Begitu Anda selesai melakukan langkah        foto online ini aka...
MEMBUAT WEB ALBUM FOT O        MEMBUA            UAT     ALBUM FOT                                                        ...
8     Proses di Belakang Lay ar: Di belakang layar, Macromedia Fireworks MX melakukan tugasnya, yaitu     Proses Belakang ...
MEMBUAT WEB ALBUM FOT O       MEMBUA           UAT     ALBUM FOT                                                          ...
10         Setiap gambar yang ada di dalam al-                    Memoles Album Foto     bum foto mengandung link. Cobalah...
MEMBUAT WEB ALBUM FOT O        MEMBUA            UAT     ALBUM FOT                                                        ...
12     hapuslah tanda centang pada check box               Dan inilah cara untuk mengaplikasikan     “Same for all” dengan...
MEMBUAT WEB ALBUM FOT O       MEMBUA           UAT     ALBUM FOT                                                          ...
14              Kreatif dengan Flash                 di-attach ke dalam dokumen web Anda.                 Menggunakan     ...
MEMBUAT WEB ALBUM FOT O        MEMBUA            UAT     ALBUM FOT                                                        ...
16                                                              Lakukan langkah-langkah di atas beru-                     ...
MEMBUAT WEB ALBUM FOT O        MEMBUA            UAT     ALBUM FOT                                                        ...
18     akan tampak polos tak berseni. Kalau mau,                   Modifikasi Album Foto     Anda bisa menggantinya dengan...
MEMBUAT WEB ALBUM FOT O        MEMBUA            UAT     ALBUM FOT                                                        ...
20     Play’ berfungsi untuk mengatur apakah slide            Caranya, carilah option yang berhu-     akan berjalan otomat...
Upcoming SlideShare
Loading in...5
×

Sp membuat web album foto

2,535

Published on

Special Project Photoshop

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,535
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
123
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sp membuat web album foto

  1. 1. MEMBUAT WEB ALBUM FOT O MEMBUA UAT ALBUM FOT 1 Spesial Project Dreamweaver MX 2004Membuat 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-orangyang 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. 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. 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 secaramengambil beberapa koleksi foto yang ada otomatis bilamana anggota itu sudah ikutdi 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 tinggalFotografer.Net tidaklah enteng. Anda ha- mendesain situs ini saja. Bagaimanarus memenuhi syarat-syarat tertentu. Sya- mendesainnya? Ada banyak cara. Salahrat utamanya adalah harus memiliki kolek- satu cara yang saya rekomendasikan adalahsi foto ratusan hingga ribuan buah dan ha- menggunakan Macromedia Dreamweaverrus di-update setiap saat. Lantas, dari mana MX 2004.datangnya koleksi foto-foto itu? Foto itu Software yang masih saudara denganbisa 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, kalaugrafer.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 Activenyumbangkan beberapa foto hasil kreasi Server Pages untuk membuat album fotomereka 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-dasarfoto-foto lain yang ada di situs itu dalam ASP Database. Untungnya, di tanah air
  4. 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. 5. MEMBUAT WEB ALBUM FOT O MEMBUA UAT ALBUM FOT 5 Command Dreamweaver MX 2004Salah 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! 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 sebanyakMacromedia 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 dilengkapimand. Ini adalah cara paling ringkas dalam dengan tombol—atau lebih tepatnyamembuat web album foto. Fasilitas ini ber- link—navigasi. Jadi, pengunjung bisainteraksi 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 dilakukanCommand “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. 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. 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 fileMemilih 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-downsekali lagi sebagai tempat untuk menyimpanfoto-foto tersebut, lengkap dengan thumbnail ‘Thumbnail Format’ dan ‘PhotoFormat’.dan halaman web-nya. Berapa ukuran masing-masing foto? Jika Anda ingin ukuran yang sebenarnya, pilihMungkin, 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. Denganini 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, FireworksMX akan menciptakan thumbnail ini.Jadi, semua foto yang Anda pilih akan me-miliki thumbnail. Lantas, berapa ukuranthumbnail 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 konfigurasisitu dengan mengklik menu drop-down akhir untuk pembuatan album foto online ini. Setelah Anda mengklik tombol OK, album fototersebut. 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 2004juh 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 sedikitnyaakan ditata menggunakan tabel. Berapa koleksi foto yang Anda ambil.
  8. 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. 9. MEMBUAT WEB ALBUM FOT O MEMBUA UAT ALBUM FOT 9One-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. pai album foto online ini muncul di jende- Menguji pada Browser la browser seperti gambar di bawah ini: Menguji Album Foto pada Jendela BrowserMari kita lihat bagaimana album foto ter-sebut bekerja pada jendela browser. Secaradefault, album foto ini telah tersimpan de-ngan nama index.html. Jadi, Anda tidakperlu menyimpannya lagi kecuali jikaAnda ingin menggantinya dengan namafile yang baru atau telah terjadi modifikasipada halaman web di atas. Sekarang luncurkanlah browser Anda,entah Internet Explorer, Netscape Naviga-tor, atau yang lain. Panggilah fileindex.html ini pada browser tersebut sam-
  10. 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. 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 jendelaCSS 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”. Begitudibawa 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 untukbutton “Class (can apply to any tag)” pada mengatur gaya-gaya border.bagian “Selector Type”. Terakhir, klik “ThisDocument Only” jika Anda masuk ke ba- Di situ ada tiga bagian utama, yaitugian “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 garisbaru 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, jikaatas ini. setiap sisi ingin punya gaya yang unik,
  12. 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. 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 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 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. Selamadiam dan ketika gambar itu diklik browser proses instalasi, aturlah agar Flash Player iniakan memunculkan gambar itu dalam for- menjadi plug-in bagi browser.mat besar. Ini bisa dikatakan album foto Di dalam bagian ini, kita akan belajargaya lama. Bagaimana dengan album foto bagaimana membuat album foto onlineartistik ala Flash MX? berbasis Flash MX menggunakan Macro- Semua orang pasti tahu bahwa Flash media Dreamweaver MX 2004.MX adalah software perancang animasiberbasis website. Kalau album foto ini di- Album Foto Gaya Flash: Karena berbasis Flashbuat menggunakan Flash MX, pasti album MX, album foto ini menjadi kaya akan animasifoto ini juga full animasi. Memang ada dan special effect, seperti 3D, misalnya. Namunbenarnya. Album foto yang diciptakan demikian, browser Anda harus support animasi Flash MX secara penuh.menggunakan fasilitas “ImageViewer” ini memang menyimpanbeberapa efek animasi, khususnyaketika satu foto dengan foto lain-nya berganti tempat. Selain itu,tombol anivagasi image viewerjauh lebih trendi dibanding albumfoto online biasa. Selain didukungoleh animasi button, tombol al-bum foto Flash MX ini dipolesmenggunakan warna dan efek 3D. Apakah membuatnya sulit? Ti-dak. Anda bahkan tidak perlu me-ngenal Flash MX sama sekali!
  14. 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. 15. MEMBUAT WEB ALBUM FOT O MEMBUA UAT ALBUM FOT 15 Kalau Anda amati, album foto tersebut Mengatur Lebih Jauhtidaklah berukuran besar. Akibatnya, foto- Melakukan Konfigurasifoto yang nanti akan muncul di jendela Atas Album Fotoweb juga tidak besar-besar amat. Lantas?Kalau Anda ingin foto-foto itu relatif lebih Seperti tadi telah dikemukakan, albumbesar, 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 yangklik 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 yangbagai 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 dokumenuntuk 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” yangkotak 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. 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. 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 adaAnda masuk ke babak pengujian di mana di dalam masing-masing foto. Begitu satuAnda 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 hyperlinkNeoPlanet 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 kebum foto tersebut. Jika prosesnya berjalan alamat tertentu seperti dulu telah Andalancar, Anda akan melihat tampilan gam- atur.bar seperti ilustrasi di atas. Gunakan tombol-tombol navigasi Modifikasi Album Fotoyang ada di situ untuk bergerak dari satu Mengatur Warna Latarfoto ke foto lainnya. Amati efek transisi Belakangyang terjadi ketika satu foto diganti olehfoto lainnya. Aplikasi ini sendiri memiliki Secara default, album foto berbasis Flashberagam 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. 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. 19. MEMBUAT WEB ALBUM FOT O MEMBUA UAT ALBUM FOT 19 Efek Transisi Slide Foto Mengatur Efek Transisi Mengontrol Slide Album Foto pada Album FotoSetiap foto yang ada di dalam album pasti Ada tiga tombol dalam album foto onlineakan 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, sayaFlash MX akan menyisipkan efek khusus mencoba untuk memberinya nama secarayang disebut efek transisi. Jadi, pada saat bebas. Tombol pertama dapat dikatakanitu, foto yang baru akan muncul sedemiki- sebagai tombol ‘Previous’. Fungsinya un-an rupa sehingga secara visual tampak me- tuk melihat foto sebelumnya. Jadi, kalaunarik. Anda sedang melihat foto nomor 3 maka al- Kurang lebih ada sepuluh efek transisi bum ini akan mencari foto nomor 2 setelahyang bisa Anda pilih. Secara default, Anda menekan tombol ‘Previous’ ini. Tom-Dreamweaver MX 2004 akan memilih bol paling pojok kanan berlawanan denganefek transisi ‘Random’ yang artinya, efek tombol pertama sebab fungsi tombol itutransisi 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 tengahkai teknik ‘Fade’. Dengan begitu, setiap foto dapat diberi nama tombol ‘Play’. Mengapamungkin akan memiliki efek beragam. Tapi, demikian? Album foto online berbasisjika Anda tidak ingin menggunakan efek Flash MX ini memang unik sebab konseptransisi apa pun, Dreamweaver MX 2004 sebenarnya adalah slide foto. Jadi, jikamenyediakan option ‘None’ buat Anda. Anda menekan tombol ‘Play’ ini, Flash Cara memilih efek transisi cukup gam- akan memunculkan foto-foto itu satu perpang. 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. 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.

×