Knowledges Weblog

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.

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.

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.

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.

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.

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

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.

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

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

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.

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

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.

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.

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.

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

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

4. Selanjutnya pilih Show Pop up Menu.

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

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

7. Kemudian masukkan alamat URL pada kolom Link.

8. Selanjutnya pada kolom Target, pilih _parent.

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

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.

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

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

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

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.

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

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.

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

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

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.

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

8. Untuk melihat hasilnya, tekan tombol F12.

 

Published by Jubilee at 10:09 pm under Kiat-Kiat Bisnis

Bagaimana caranya melakukan presentasi yang menarik dan berhasil? Simaklah tujuh langkah menuju presentasi yang berhasil yang telah dirancang oleh Jim Smith. Tujuh langkah itu adalah :
1. Perkenalkanlah diri Anda terlebih dulu meskipun klien sudah mengenal Anda. Ceritakan beberapa pengalaman dan cakupan bisnis yang Anda geluti ini.
2. Doronglah klien untuk bertanya kapan pun mereka mau. Yakinkan mereka bahwa tidak ada pertanyaan yang terlalu dasar.
3. Tanya apakah mereka punya nama domain sebelumnya. Jika tidak, cobalah untuk mendiskusikan bagaimana mendapatkan nama yang mudah diingat, dan doronglah klien untuk bertindak cepat jika mereka pikir nama tersebut belum diambil pihak lain.
4. Tanya pada klien apakah mereka punya contoh sebuah website yang mereka suka atau tidak suka. Tanyakan, apa yang mempengaruhi pendapatnya tentang situs itu. Hal ini akan memberi Anda gambaran, apa yang dipikirkan calon klien untuk websitenya nanti.
5. Tunjukkan beberapa contoh website yang baik dan yang buruk. Tunjukkan source code website yang bagus dalam hal desain namun buruk dalam hal peletakan search engine—arahkan pada bagian Meta Tags. Yakinkan bahwa Anda tidak hanya membuat website yang estetis dan bagus tapi juga terkenal dan mudah ditemukan.
6. Jika klien mengajukan pertanyaan seputar tarif, cakupan layanan, atau garansi yang Anda tawarkan, pakai kesempatan ini untuk menyodorkan kontrak.
7. Setelah selesai mendiskusikan masalah kontrak, tanya apakah ia ingin segera menyewa Anda untuk mengerjakan desain web ini. Jika mereka berkata “ya”, isi data-data penting dalam kontrak, tanda tangani (Anda berdua), dan beri tanggal pada kontrak itu. Kemudian, minta klien untuk mengecek kontrak itu, dan jika sudah, Anda bisa mulai bekerja.

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”).

<HTML> Sebagai awal dokumen HTML.
<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :
<TITLE>Belajar WEB | HTML >>> poenyakoe.co.cc</TITLE>

Paragraph Baru: <P> Membuat paragraf baru . Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.

Line Break: <BR> Pindah baris baru.

No Line Break: <NOBR> memakai ini berarti teks yang panjang tidak akan pindah kebawah secara otomatis.

Font <FONT SIZE=4 FACE=”Comic Sans MS” COLOR=”#00ff00″>Contoh teks yang berwarna hijau</FONT>
Hasilnya >> Contoh teks yang berwarna hijau

<BIG> Ukuran teks akan lebih besar satu ukuran</BIG> lebih besar satu ukuran

<SMALL> Ukuran teks akan lebih kecil satu ukuran</SMALL> lebih kecil satu ukuran

<B>teks cetak tebal</B> untuk teks cetak tebal

<U>teks dengan garis bawah</U> untuk teks dengan garis bawah

<I>teks miring</I> untuk teks miring

<SUP>superscript</SUP> memformat teks menjadi ^superscript

<SUB>subscript</SUB> memformat teks menjadi _subscript

<STRIKE>seperti di coret</STRIKE> memformat teks seperti di coret

<BLINK>berkedip</BLINK> teks berkedip ( diwordpress ga bisa)

Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI> [ Unordered Lists ].
Contoh :

<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>

Hasil dari kode di atas adalah:

• Item nomer 1
• Item nomer 2
• Item nomer 3

atau bisa juga pakai Ordered Lists: <OL>

<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>

Definition Lists: <DL> membuat tulisan akan menjorok kedalam

Contoh :
<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>

TABELTabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web “terbagi” pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>

<TABLE>
Terdiri dari atribut :

• align – perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor – warna latar belakang (background) dari tabel.
• border – ukuran lebar border tabel (dalam pixel).
• cellpadding – jarak antara isi cell dengan batas cell (dalam pixel).
• cellspacing – jarak antar cell (dalam pixel).
• width – ukuran tabel dalam pixel atau percent.

Contoh :

<TABLE align=”center” bgcolor=”#0000FF” border=”2″ cellpadding=”5″ cellspacing=”2″ width=”90%”>

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

• align – perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor – warna latar belakang dari baris.
• valign – perataan vertikal : top, middle atau bottom.

Contoh :

<TR align=”right” bgcolor=”#0000FF” valign=top>

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.

• align – perataan
• background – image yang digunakan sebagai latar belakang dari kolom.
• bgcolor – warna latar belakang
• colspan – lihat gambar contoh
• height – ukuran tinggi cell dalam pixels.
• nowrap – membuat supaya isi dari kolom tetap berada pada satu baris.
• rowspan – lihat gambar contoh
• valign – perataan vertikal :top, middle atau bottom.
• width – ukuran kolom dalam pixel atau percen.