Kamis, 28 Februari 2008

Pengantar Mambo/Joomla

Mambo Open Source (MOS) atau sering disebut Mambo adalah sebuah Content Management System (CMS) yang dibuat menggunakan bahasa PHP (PHP Hypertext Processor).

Perkembangan terakhir tentang Mambo, ada sedikit “konflik” antara developer (pengembang) dengan founder (pembuat program). Pihak founder berkeinginan untuk membentuk sebuah perusahaan bernama Mambo Foundation, namun para pengembang tidak setuju karena mereka beralasan bahwa jika Mambo sudah ditangani oleh sebuah perusahaan maka dikhawatirkan Mambo akan menjadi sebuah software yang komersial. Padalah tujuan awal dibuatnya Mambo adalah open source (gratis) untuk semua orang dan siapapun boleh menggunakan, menduplikasi, atau bahkan memodifikasi.

Kondisi seperti ini memicu para developer yang memiliki tanggung jawab dan hati nurani kepada user membuat mereka hengkang dari kepengurusan Mambo. Yang pada akhirnya para developer yang tidak setuju tersebut bergabung dan menciptakan sebuah software “tandingan” Mambo. Maka terciptalah sebuah sofware yang memiliki bentuk dan fungsi yang sama persis bernama Joomla.

Hampir seluruh modul maupun komponen untuk Mambo dapat pula digunakan pula pada Joomla. Jadi, entah Anda menggunakan Mambo ataupun Joomla, tidak menjadi masalah karena seluruh tool memiliki fungsi yang sama.

Meskipun program ini menggunakan bahasa php, bukan berarti harus paham seluruhnya tentang kode php. Bagi mereka tidak memahami kode HTML, Javascript, ASP, CGI, , maupun php tidak perlu takut untuk mempelajarinya karena meskipun tidak tahu tentang kode-kode tersebut, orang bisa membuat sebuah web secara cepat dengan beberapa fitur yang sangat kompleks Mambo dapat digunakan untuk membuat situs: 1. Portal 2. Komersial 3. Non-profit 4. Pribadi

Aplikasi yang beragam dapat dibuat hanya dengan Mambo/Joomla karena memiliki beberapa kemampuan, diantaranya:

  1. Dapat melakukan update halaman utama, halaman berita, halaman artikel, maupun halaman arsip secara cepat.

  2. Dapat melihat file PDF

  3. Dapat menambahkan menu baru pada main menu, other menu, maupun top menu dengan mudah

  4. Dapat mengatur weblink dengan cepat dan mudah.

  5. Dapat mengatur banner (iklan).

  6. Dapat mengatur FAQ (Frequently Asked Questions).

  7. Dapat mengatur Newsflashes

  8. Membuat arsip dan menampilkannya kembali

  9. Dapat mencetak artikel, mengirim artikel lewat email, dan membaca artikel dengan format PDF.

  10. Dapat mengatur pengguna (user) dengan tingkat akses level yang berbeda.

  11. Dapat menambah komponen, modul, dan template dari pihak ketiga (seperti: forum, calendar, reminder, agenda, guestbook (buku tamu), shopping cart, dan sebagainya).

Desain Mambo berbeda dengan aplikasi sejenis seperti Microsoft Frontpage maupun Macromedia Dreamweaver. Mambo sangat fleksibel, mudah digunakan, dan bentuknya sederhana, menjadikan software ini sangat user friendly karena:

  1. Mudah melakukan setup/instalasi.

  2. Memiliki interface administrator yang sederhana untuk mengatur isi situs (website).

  3. Mudah digunakan untuk mengedit (menambah, mengubah, dan menghapus) content dan gambar.

  4. Fleksibel untuk mengatur tampilan front end.

  5. Fleksibel untuk menambah komponen dan modul yang baru dari pihak ketiga.

Seperti telah diijelaskan sebelumnya bahwa Anda tidak perlu lagi mengetahui konsep pembuatan web dengan HTML, XML maupun DHTML, cukup memasukan content dan gambar yang ingin ditampilkan ke dalam situs. Bahkan webmaster tidak perlu memahami program FTP untuk melakukan upload data karena di dalam Mambo/Joomla sudah tersedia fasilitas untuk uploading.

1. Prasyarat Utama

Mambo/Joomla dapat berfungsi dengan baik jika didukung oleh program aplikasi lain seperti: Apache (sebagai web server), PHP (sebagai penterjemah kode), dan MySQL (sebagai database). Ketiga unsur tersebut wajib terpasang dalam komputer Anda jika ingin menjalankan Mambo/Joomla. Jadi, ketika Anda membuat situs secara offline (localhot) perlu sebuah server. Masing-masing aplikasi memiliki fungsi yang berbeda.

Di sini tidak akan membahas tentang instalasi Apache, PHP, maupun MySQL. Silakan Anda menginstal komponen-komponen tersebut sendiri. Untuk mendownload Apache silakan kunjungi di httpd://apache.org, MysSQL di http://mysql.com, dan PHP di http://php.net.

Ada beberapa program yang dapat berfungsi sebagai server mini (sering disebut sebagai server kit) yaitu Uniform Server (Uniserver), PHP Triad, Dongkrak (karya anak bangsa), AppServe, dan lain-lain.

Keempat program tersebut mampu menjalankan Mambo/Joomla karena di dalamnya terdapat komponen yang diperlukan Mambo/Joomla. Dari sekian banyak server, jika Anda mengikuti petunjuk dalam artikel ini, penulis menggunakan Uniform Server (Uniserver). Namun Anda juga bisa menggunakan program lain sesuai keinginan.

2. Instalasi Uniserver (Download)

Uniform Server merupakan sebuah program yang terdiri dari beberapa aplikasi seperti Apache, MySQL, php, dan Perl. Program ini berfungsi seperti layaknya sebuah server mini yang dapat menjalankan kode untuk web seperti php, Perl, CGI, maupun ASP. Seperti kita ketahui, syarat mutlak untuk dapat disebut sebagai server adalah mampu menterjemahkan bahasa yang dibuat dalam oleh Client us kemudian menterjemahkan dan selajutnya mengirimkan pesan yang disampaikan ke browser seperti apa yang diinginkan oleh pembuat situs tersebut. Dan sebuah server, umumnya harus menyediakan beberapa program penterjemah bahasa seperti yang telah disebutkan di atas.

Proses instalasi sangat mudah dan tidak perlu diinstal ke dalam komputer. Anda cukup meng-copy (duplikasi) ke dalam salah satu disk drive (C atau D). Selanjutnya Anda tinggal meletakkan file instalasi Mambo ke dalam salah satu folder.

Anda dapat pula mendownload secara gratis dari internet di http://miniserver.sourceforge.net,

  1. Pertama kali, ekstrak file Uniserver3.3 ke salah satu drive (C atau D).

  2. Setelah ter-extract ke dalam salah satu folder, klik file Server_Start.bat untuk mengaktifkan Uniserver.

  3. Perlu diingat, apabila dalam komputer Anda telah terinstall aplikasi server seperti Apache maupun MySQL Server, sebaiknya dinon-aktifkan terlebih dulu sebelum menjankan program Uniform Server. Jika tidak dinon-aktifkan maka Uniform Server tidak dapat berjalan (tidak aktif) karena Server akan “bentrok” dengan yang lain. Jadi, sebaiknya non-aktifkan seluruh program Server dengan cara menekan tombol Ctrl+Alt+Del secara bersamaan. Klik Tab Processes untuk melihat program yang sedang berjalan. Jika terdapat Apache atau mysqld-exe segera klik tombol End Process.

  4. Tunggu beberapa saat, jika belum muncul halaman utamaUniform Server, klik file Disk Start. Dan jika belum muncul juga, refresh sekali lagi.

  5. Maka akan muncul menu go to main page. Klik menu tersebut untuk masuk ke halaman utama Uniform Server 3.3.

  6. Program tersebut sudah berjalan dengan baik (aktif). Sekarang aktifkan tombol Run MySQL Server. Tunggu beberapa saat, selanjutnya akan muncul pesan bahwa SySQL Server sudah aktif. Sekarang klik tombol Back untuk masuk ke halaman utama Uniform Server.

Tutorial Wordpress: Membuat Posting Baru

Wordpress merupakan salah satu bagian terkecil dari CMS yang jumlahnya ratusan dan sangat mudah digunakan, dalam waktu singkat Anda dapat mengelola blog sendiri. Mulai dari membuat posting, memasang plugin, me-manage komentar, hingga menampilkan statistik di halaman utama.

Jumlah plugin yang disediakan oleh oleh pihak ketiga sangat banyak, dan dikemas dalam beberapa kategori. Anda dapat mendownloadnya di beberapa situs penyedia plugin, diantaranya:

  1. wp-plugins.net
  2. codex.wordpress.org/Plugins

Dengan segala kerendahan hati, bukan bermaksud “mengajari” maupun “menggurui” Anda, artikel ini sengaja saya susun dengan tujuan barangkali ada beberapa rekan yang ingin membuat blog sendiri menggunakan wordpress tapi masih bingung bagaimana memulainya. Dan kita tahu, belum banyak buku yang membahas masalah ini. Mudah-mudahan tutorial ini bermanfaat. Amiin…


MEMBUAT POSTING

Sebelum membuat posting (menulis artikel) di blog Anda, sebaiknya mempersiapkan terlebih dulu artikel apa yang akan ditampilkan. Hal ini penting agar dapat memisahkan artikel-artikel tersebut menjadi beberapa kategor sehingga artikel lebih terstruktur dan nyaman untuk dibaca.

  1. Langkah awal yang harus Anda lakukan adalah masuk ke halaman Administrator, ketikkan alamat situs Anda, misal http://namadomain.net/wp-admin/ kemudian tekan Enter. Masukkan username dan password, lalu klik tombol Login.
    Halaman Login

  2. Setelah berhasil memasukkan username dan password Anda akan berada pada halaman administrator seperti nampak pada gambar berikut:
    Halaman Administrator

  3. Klik menu Write untuk membuat posting baru.
    Menu Write

  4. Tuliskan judul artikel pada kotak isian Title.
  5. Jika Anda ingin mengelompokkan artikel tersebut dalam kategori tertentu, masukkan kategori baru pada Tab Categories kemudian klik tombol Add.
    Categories

  6. Setelah muncul nama kategori baru, beri tanda centang dengan cara mengklik kotak kecil di bagian kiri. Secara default, Wordpress mengaktifkan Uncategorized untuk setiap artikel. Non aktifkan tanda centang pada Uncategorized.
    Categories

  7. Mulailah memasukkan beberapa artikel pada kolom yang telah disediakan.

MENYIMPAN POSTING
Artikel dalam blog Anda dapat disimpan sesuai kebutuhan. Jika artikel tersebut masih dalam status draft (dalam arti belum sempurna), Anda dapat mengaktifkan status Draft pada Tab Post Status.

  1. Pada Tab Post Status, klik tombol plus (+) untuk menampilkan menu yang tersembunyi.
    Post Status

  2. Klik combo box Draft untuk memilih status posting.
    Draft

  3. Klik tombol Save and Continue Editing jika ingin menyimpan artikel dan masih melanjutkan proses editing. Klik tombol Save jika ingin menyimpan artikel dan mengakhiri proses editing.
    Save

  4. Anda dapat pula mengatur waktu untuk posting tersebut, caranya klik tombol plus (+) pada Tab Post Timestamp.
    Post Timestamp

  5. Aturlah waktu yang diinginkan, setelah selesai aktifkan pilihan Edit timestamp.
    Post Timestamp

  6. Jika artikel Anda benar-benar sudah fix dan ingin ditampilkan di halaman utama situs Anda, aktifkan Published pada Tab Post Status.
    Published

Membuat Background Halaman Web dari Foto (1)

Membuat Background Halaman Web dari Foto (1)




Anda dapat menggunakan sebuah foto sebagai gambar background untuk sebuah halaman web. Sayangnya sebuah foto full-color akan cukup memakan bandwidth untuk download ketika proses akses berlangsung.

Disini anda akan saya ajarkan bagaimana menggunakan Adobe® Photoshop® Elements 2.0 untuk membuat sebuah gambar background monochromatic yang menarik untuk halaman web, dengan ukuran yang kecil sehingga proses download jauh lebih cepat.

Software : Adobe Photoshop 5.5
main_int







1
Buka file foto warna anda di photoshop

File > Open.

Buka foto warna yang akan anda gunakan sebagai gambar background. Atur ukurannya atau crop jika memnungkinkan.

Image > image size

Untuk gambar yang dimasukan kedalam halaman web, sebaiknya ukurannya 680 sampai 800 pixels wide dan 480 sampai 600 pixels high. Hati-hati dengan detail dalam foto yang anda pilih. Sebuah gambar background dengan terlalu banyak detail [resolusi warna tinggi] mengurangi kemampuan membaca seseorang pada halaman web anda.

Sekarang anda akan memberikan warna pada foto anda, kemudian mengurangi ukuran file lewat sebuah proses yang disebutnya pengoptimalan [optimizing].
Natal  Perpustakaan 2002


2
Pewarnaan Foto.
Klik Image > Adjust Color > Hue/Saturation. Select the Colorize option. Gunakan sliders Hue, Saturation, dan Lightness untuk mengatur warna dan penerangan [lightness] dari foto anda. Yakinkan bahwa kotak kecil Preview option sudah dalam keadaan Hue/Saturation di dialog box jadi anda dapat preview pengaturan dalam dokumen window.
hue saturation


3
Buatlah foto tsb dalam subtile [spt kotak jubin]
Lakukan eksperimen dengan warna-warna lain dan saturasi [saturation] gambar anda, tetapi usahakan dalam batas yang mudah dibaca untuk. Warna gelap [dark], saturated background colors dapat mengurangi kejelasan daripada teks atau mudah dibaca[legibility of text]. Dimanapun warna soft, warna netral biasanya membantu tampilan desain web nampak jauh lebih bagus.
Ketika anda sudah merasa puas dengan pewarnaan foto tsb, klik OK.
Sekarang anda optimalkan background foto anda agar ukuran file background sekecil mungkin.
Contoh background foto
Membuat Background Halaman Web dari Foto (2)


4
Optimalkan pewarnaan gambar anda

Klik File > Save for Web. Kemudian pilih format gambar GIF atau JPEG dari pop-up menu pada waktu anda klik Save For Web di dialog box.

Dalam contoh ini saya menggunakan format JPEG. Walaupun format GIF tampaknya bisa lebih kecil ukuran filenya daripada JPEG. Format JPEG lebih bagus untuk mencegah warna yang terlalu "ramai" [ dithering] dan mempertahankan detail warna dalam sebuah gambar foto yang continuous-tone. Jika anda memilih format JPEG, aturlah pengoptimalan dengan menunjuk Low untuk sebuah ukuran file kecil. Tak ada gunanya gambar dengan higher quality jika gambar tsb hanya digunakan sebagai background. Anda dapat preview gambar yang sudah optimal dalam dialog box.

Klik OK untuk mengoptimalkan gambar anda.

Sekarang gambar foto anda siap untuk digunakan sebagai sebuah halaman background web. Anda bisa menggunakan program seperti Adobe® GoLive® atau HTML code dan set up halaman web anda.
optimising gambar


5
Tambahkan elemen lain ke halaman web anda (pilihan).
Anda bisa menambahkan elemen seperti teks, buttons, dan graphic ke halaman web anda. Elemen ini seharusnya melengkapi gambar background yang sudah anda buat. Jika format background images dalam bentuk tile—batasi contents halaman web anda dengan ukuran sesuai tile yang pertama. Pengguna tidak dipaksa untuk scroll ke tile berikutnya untuk melihat semua content.
Contoh web page dengan content menu
.
Selesai. Selamat mencoba


Membuat Efek Teks yang Cepat dan Mudah dalam Photoshop 5.5

Membuat Efek Teks yang Cepat dan Mudah dalam Photoshop 5.5


Dalam tutorial ini saya akan mengajarkan anda bagaimana membuat efek teks yang cepat dan mudah dengan menggunakan Photoshop's Layer Effects. Berikut langkah- langkahnya :

  1. Dalam Adobe Photoshop 5.5, klik File > New. Buat teks dengan menggunakan Type Tool. Dalam contoh ini saya menggunakan Bold Font
  2. Langkah berikut, gunakan Layer Effects. Anda bisa menemukan layer effects dengan klik Layer > Effects, atau dengan klik kanan di dalam windows pada ikon T dalam Layer Palette.

    Contoh pertama ini menggunakan Inner Shadow Layer Effect, menggunakan default settings. Lihat gambar 1 :

inner shadow

Hasil akhir :

Inner Shadows

Contoh kedua menggunakan default settings Inner Shadow Layer Effect. kemudian Bevel and Emboss Layer Effect lalu klik pada cek box Apply, untuk merubah default settings berikutnya. Lihat gambar 2 :

bevel and emboss

Pada Style saya set ke Inner Bevel, Depth di set ke 3 pixels, dan Blur di set ke 2 pixels. Akhirnya Drop Shadow Layer Effects telah diaplikasikan, dengan default settings dirubah ke Opacity 35 %, Distance ke 3 pixels dan Blur ke 2 pixels. Lihat gambar di atas.

Hasil akhir

Contoh ke tiga di bawah ini menggunakan Bevel and Emboss Layer Effects yang sudah diaplikasikan merubah default settings. Highlight Mode dirubah ke Normal, Opacity dirubah ke 100%, Style di set ke Pillow Emboss dengan Depth 3 pixels dan Blur 2 pixels. Lihat gambar 3 :

bevel and emboss

Terakhir, Drop Shadow Layer Effect diaplikasikan dengan default settings dirubah ke Distance 3 pixels dan Blur 2 pixels.

Hasil akhir

drop shadow

  1. Klik Image > Mode > Indexed dan save dalam format file gif.

Ingat, walaupun contoh yang saya demonstrasikan menggunakan fasilitas Type Tool, anda juga bisa menggunakan efek ini pada clipart, line art, atau logo. Layer Effects dapat diaplikasikan ke berbagai layer dalam Photoshop 5.5. Juga bisa antar layers dengan sempurna.

Tutorial Animasi dengan Layers

Tutorial Animasi dengan Layers
Adobe Photoshop 5.5

Tahukah Anda bahwa anda bisa mengconvert layers ke frames animasi dalam Adobe® Photoshop® Elements 2.0 . Ini merupakan pekerjaan yang mudah untuk membuat animasi yang berkualifikasi profesional yang bisa anda lihat di web browser. Tutorial kali ini adalah bagaimana membuat dan mengoptimalkan sebuah animasi web dari sebuah file multilayer Photoshop Elements (PSD).

  1. Siapkan layers di Adobe Photoshop Elemen
    Open file > "jumpman.psd" yang ada di folder Tutorial didalam Adobe Photoshop Element pada folder aplikasi. Buka Layers Palette. Perhatikan bahwa file tsb mempunyai multiple layer dengan thumbnail tiap layer yang menunjukkan sebuah gambar dalam berbagai adegan. Ketika layers ditampilkan sebagai frames animasi yang berurutan, gambar akan muncul dan bergerak. Tiap perintah layers menunjukkan bagaimana gambar muncul dan bergerak. Layers yang paling awal dalam layers palette menjadi frames yang pertama dalam animasi ketika anda convert layers ke frames.

  1. Buka Save untuk web dialog box
    Sekarang anda convert layers ke sebuah format animasi GIF

    Choose File > Save for web. Pada kolom setting, pilih optimasi GIF dan select pada animation option



  2. Aturlah pada Animation Options
    Pilih lah apakah format file animasi tsb akan di loop [berulang-ulang] atau tidak. Kemudian masukan nilai untuk Frame Delay untuk menunjukkan jumlah waktu yang dibutuhkan untuk melewati tiap frames. Delay [penundaan frame sebelum melangkah ke frame berikut] dalam detik, jadi nilai 0.25 menunjukkan seperempat detik.

  3. Preview file animasi GIF dalam Save For Web dalam kotak dialog
    Anda bisa preview file animasi anda secara frame demi frame dalam kotak dialog Save For Web. Klik pada frame, dan select buttons untuk bergerak maju dan mundur animasinya.


  4. Preview file animasi GIF di sebuah browser
    Anda bisa juga preview animasi anda dalam sebuah browser dengan memilih sebuah browser dari Preview dalam Pop-up menu. Sebagai tambahan ke animasi GIF, browser akan menampilkan html code dan informasi seperti format, size, dan settings.


  5. Sesuaikan animasi anda
    Jika anda membutuhkan perubahan pada frames animasi anda, klik Cancel untuk menutup kotak dialog Save For Web. Anda bisa menambahkan, menghapus, merubah atau memindah layers untuk membuat efek animasi sesuai yang anda inginkan.

  6. Simpan animasi web yang sudah anda buat.
    Untuk menyimpan animasi anda, klik OK dalam kotak dialog.

    Photoshop Elements converts layers anda ke frames dan disimpan dalam sebuah format file GIF. Sekarang anda bisa melihat hasil animasi GIF dalam sebuah browser
    .


Membuat Pop-Up Menu dengan Fireworks 4.0

Untuk menambah daya tarik sebuah website dan efesiensi space menu halaman depan, para web designer sekarang banyak me-layout desainnya dengan menggunakan pop up menu. Sebelumnya, apabila kita ingin membuat pop-up menu halaman web, kita biasanya menambahkan javascript ke dalam html kita. Namun sekarang kita dapat membuat lay-out design web di Fireworks 4.0. Juga kita bisa langsung membuat pop-up menu. Di bawah ini adalah langkah-langkah sederhana dalam membuat Pop Up Menu


Bagian 1 :

  1. Buka program fireworks 4.0 pada komputer anda,
  2. Klik tombok new, dan aturlah ukuran kanvas, lebar, tinggi dan resolusi serta warna canvas yang kita inginkan. [lihat gambar 1]

    [Gambar 1]
  3. Ketikan menu yang akan kita desain, tekan tombol A text tool lalu ketikan misalnya,
    "Our Campus"
  4. Klik tombol slice tool atau hotspot tool [gambar 2],
    kemudian drag ke tulisan "Our Campus" tadi.
  5. Tekan tombol pointer tool, kemudian klik pada obyek
    [sampai keluar gambar kecil bulat mirip jam, lihat gambar 3]

    [Gambar 3]
  6. Pilih dan klik toolbar Insert > Pop-Up Menu
  7. Masukan menu-menu pada Text field, misalnya : "admission, peta kampus, perpustakaan"
    Klik tanda (+) untuk menambahkan menu. Untuk membuat submenu, klik tombol Indent Menu.

    [gambar 4]
  8. Tentukan alamat web yang dituju pada Link field. Bila perlu tentukan juga Web target.
  9. Bila sudah klik Next.

Bagian 2 :

  1. Pada Cells, pilih HTML atau Image.
    HTML = menggunakan format HTML untuk Up dan Over state-nya.
    Image = menggunakan image yang disediakan sebagai background Up dan Over.
  2. Pilih font, typeface, ukuran dan lainnya.
  3. Pada kolom Up State dan Over State tentukan:
    - bila HTML tentukan warna text dan cell-nya.
    - bila Image tentukan warna dan jenis background serta text


    [Tampilan di browser seperti gambar 5, warna background cell akan berubah manakala mouse di arahkan ke salah satu menu tsb]
  4. Selesai, mudah bukan ayo dicoba !.

ket : Letak dari Pop-Up Menu bisa diatur dengan mendekatkan mouse ke Pop-Up Menu hingga berubah menjadi tangan. Panjangnya menu tidak akan mempengaruhi besar canvas kerja.

Tutorial: Mengedit Web dengan Dreamweaver

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

dreamweaver_01.gif

1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.

Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

  1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
    Gambar 1

  2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
    Gambar 2

  3. Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
    Gambar 3

  4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
    Gambar 4

  5. Ketikkan images/index_26.gif pada kolom Bg.
    Gambar 5

  6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.


2. Memasukkan Objek

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

  1. Letakkan kursor pada tempat yang akan ditambahkan teks.
    Gambar 11

  2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
    Gambar 12

  3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
    Gambar 13

  4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
    Gambar 14

  5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
    Gambar 15

  6. Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
    Gambar 16

  7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.
    Gambar 17

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

1. Membuat Pop-up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.

Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

  1. Pertama kali, klik menu PC.
    dreamweaver_21.gif

  2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
    dreamweaver_22.gif

  3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
    dreamweaver_23.gif

  4. Selanjutnya pilih Show Pop up Menu.
    dreamweaver_24.gif

  5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
    dreamweaver_25.gif

  6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
    dreamweaver_26.gif

  7. Kemudian masukkan alamat URL pada kolom Link.
    dreamweaver_27.gif

  8. Selanjutnya pada kolom Target, pilih _parent.
    dreamweaver_28.gif

  9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
    dreamweaver_29.gif

  10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
    dreamweaver_30.gif

  11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
    dreamweaver_31.gif

  12. Klik Tab Position untuk menentukan posisi pop up menu.
    dreamweaver_32.gif

  13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
    dreamweaver_33.gif

  14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

  1. Buatlah duplikasi gambar tombol yang telah ada.
    dreamweaver_41.gif

  2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
    dreamweaver_42.gif

  3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
    dreamweaver_43.gif

  4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
    dreamweaver_44.gif

  5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
    dreamweaver_45.gif

  6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
    dreamweaver_46.gif

  7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
    dreamweaver_47.gif

  8. Untuk melihat hasilnya, tekan tombol F12.

Name:*

Email Address:*

Feedback: